diff --git a/frontend/src/components/GraphPanel.vue b/frontend/src/components/GraphPanel.vue
index db18829821..0dd2026883 100644
--- a/frontend/src/components/GraphPanel.vue
+++ b/frontend/src/components/GraphPanel.vue
@@ -1,5 +1,11 @@
 <template>
   <div class="graph-panel">
+    <!-- Barra de inteligência Zep — mostra context do grafo -->
+    <GraphContextBar
+      :graphData="graphData"
+      :projectData="projectData"
+      :currentPhase="currentPhase"
+    />
     <div class="panel-header">
       <span class="panel-title">{{ $t('graph.panelTitle') }}</span>
       <!-- 顶部工具栏 (Internal Top Right) -->
@@ -238,12 +244,14 @@
 <script setup>
 import { ref, onMounted, onUnmounted, watch, nextTick, computed } from 'vue'
 import * as d3 from 'd3'
+import GraphContextBar from './workspace/GraphContextBar.vue'
 
 const props = defineProps({
-  graphData: Object,
-  loading: Boolean,
+  graphData:    Object,
+  projectData:  { type: Object, default: null },
+  loading:      Boolean,
   currentPhase: Number,
-  isSimulating: Boolean
+  isSimulating: Boolean,
 })
 
 const emit = defineEmits(['refresh', 'toggle-maximize'])
diff --git a/frontend/src/components/Step2EnvSetup.vue b/frontend/src/components/Step2EnvSetup.vue
index a27ba347c0..d86554760e 100644
--- a/frontend/src/components/Step2EnvSetup.vue
+++ b/frontend/src/components/Step2EnvSetup.vue
@@ -1,818 +1,356 @@
 <template>
   <div class="env-setup-panel">
     <div class="scroll-container">
-      <!-- Step 01: 模拟实例 -->
-      <div class="step-card" :class="{ 'active': phase === 0, 'completed': phase > 0 }">
-        <div class="card-header">
-          <div class="step-info">
-            <span class="step-num">01</span>
-            <span class="step-title">{{ $t('step2.simInstanceInit') }}</span>
-          </div>
-          <div class="step-status">
-            <span v-if="phase > 0" class="badge success">{{ $t('common.completed') }}</span>
-            <span v-else class="badge processing">{{ $t('step2.initializing') }}</span>
-          </div>
-        </div>
-        
-        <div class="card-content">
-          <p class="api-note">POST /api/simulation/create</p>
-          <p class="description">
-            {{ $t('step2.simInstanceDesc') }}
-          </p>
-
-          <div v-if="simulationId" class="info-card">
-            <div class="info-row">
-              <span class="info-label">Project ID</span>
-              <span class="info-value mono">{{ projectData?.project_id }}</span>
-            </div>
-            <div class="info-row">
-              <span class="info-label">Graph ID</span>
-              <span class="info-value mono">{{ projectData?.graph_id }}</span>
-            </div>
-            <div class="info-row">
-              <span class="info-label">Simulation ID</span>
-              <span class="info-value mono">{{ simulationId }}</span>
-            </div>
-            <div class="info-row">
-              <span class="info-label">Task ID</span>
-              <span class="info-value mono">{{ taskId || $t('step2.asyncTaskDone') }}</span>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <!-- Step 02: 生成 Agent 人设 -->
-      <div class="step-card" :class="{ 'active': phase === 1, 'completed': phase > 1 }">
-        <div class="card-header">
-          <div class="step-info">
-            <span class="step-num">02</span>
-            <span class="step-title">{{ $t('step2.generateAgentPersona') }}</span>
-          </div>
-          <div class="step-status">
-            <span v-if="phase > 1" class="badge success">{{ $t('common.completed') }}</span>
-            <span v-else-if="phase === 1" class="badge processing">{{ prepareProgress }}%</span>
-            <span v-else class="badge pending">{{ $t('common.pending') }}</span>
-          </div>
-        </div>
-
-        <div class="card-content">
-          <p class="api-note">POST /api/simulation/prepare</p>
-          <p class="description">
-            {{ $t('step2.generateAgentPersonaDesc') }}
-          </p>
-
-          <!-- Profiles Stats -->
-          <div v-if="profiles.length > 0" class="stats-grid">
-            <div class="stat-card">
-              <span class="stat-value">{{ profiles.length }}</span>
-              <span class="stat-label">{{ $t('step2.currentAgentCount') }}</span>
-            </div>
-            <div class="stat-card">
-              <span class="stat-value">{{ expectedTotal || '-' }}</span>
-              <span class="stat-label">{{ $t('step2.expectedAgentTotal') }}</span>
-            </div>
-            <div class="stat-card">
-              <span class="stat-value">{{ totalTopicsCount }}</span>
-              <span class="stat-label">{{ $t('step2.relatedTopicsCount') }}</span>
-            </div>
-          </div>
-
-          <!-- Profiles List Preview -->
-          <div v-if="profiles.length > 0" class="profiles-preview">
-            <div class="preview-header">
-              <span class="preview-title">{{ $t('step2.generatedAgentPersonas') }}</span>
-            </div>
-            <div class="profiles-list">
-              <div 
-                v-for="(profile, idx) in profiles" 
-                :key="idx" 
-                class="profile-card"
-                @click="selectProfile(profile)"
-              >
-                <div class="profile-header">
-                  <span class="profile-realname">{{ profile.username || 'Unknown' }}</span>
-                  <span class="profile-username">@{{ profile.name || `agent_${idx}` }}</span>
-                </div>
-                <div class="profile-meta">
-                  <span class="profile-profession">{{ profile.profession || $t('step2.unknownProfession') }}</span>
-                </div>
-                <p class="profile-bio">{{ profile.bio || $t('step2.noBio') }}</p>
-                <div v-if="profile.interested_topics?.length" class="profile-topics">
-                  <span 
-                    v-for="topic in profile.interested_topics.slice(0, 3)" 
-                    :key="topic" 
-                    class="topic-tag"
-                  >{{ topic }}</span>
-                  <span v-if="profile.interested_topics.length > 3" class="topic-more">
-                    +{{ profile.interested_topics.length - 3 }}
-                  </span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <!-- Step 03: 生成双平台模拟配置 -->
-      <div class="step-card" :class="{ 'active': phase === 2, 'completed': phase > 2 }">
-        <div class="card-header">
-          <div class="step-info">
-            <span class="step-num">03</span>
-            <span class="step-title">{{ $t('step2.dualPlatformConfig') }}</span>
-          </div>
-          <div class="step-status">
-            <span v-if="phase > 2" class="badge success">{{ $t('common.completed') }}</span>
-            <span v-else-if="phase === 2" class="badge processing">{{ $t('step2.generating') }}</span>
-            <span v-else class="badge pending">{{ $t('common.pending') }}</span>
-          </div>
-        </div>
-
-        <div class="card-content">
-          <p class="api-note">POST /api/simulation/prepare</p>
-          <p class="description">
-            {{ $t('step2.dualPlatformConfigDesc') }}
-          </p>
-          
-          <!-- Config Preview -->
-          <div v-if="simulationConfig" class="config-detail-panel">
-            <!-- 时间配置 -->
-            <div class="config-block">
-              <div class="config-grid">
-                <div class="config-item">
-                  <span class="config-item-label">{{ $t('step2.simulationDuration') }}</span>
-                  <span class="config-item-value">{{ simulationConfig.time_config?.total_simulation_hours || '-' }} {{ $t('common.hours') }}</span>
-                </div>
-                <div class="config-item">
-                  <span class="config-item-label">{{ $t('step2.roundDuration') }}</span>
-                  <span class="config-item-value">{{ simulationConfig.time_config?.minutes_per_round || '-' }} {{ $t('common.minutes') }}</span>
-                </div>
-                <div class="config-item">
-                  <span class="config-item-label">{{ $t('step2.totalRounds') }}</span>
-                  <span class="config-item-value">{{ Math.floor((simulationConfig.time_config?.total_simulation_hours * 60 / simulationConfig.time_config?.minutes_per_round)) || '-' }} {{ $t('common.rounds') }}</span>
-                </div>
-                <div class="config-item">
-                  <span class="config-item-label">{{ $t('step2.activePerHour') }}</span>
-                  <span class="config-item-value">{{ simulationConfig.time_config?.agents_per_hour_min }}-{{ simulationConfig.time_config?.agents_per_hour_max }}</span>
-                </div>
-              </div>
-              <div class="time-periods">
-                <div class="period-item">
-                  <span class="period-label">{{ $t('step2.peakHours') }}</span>
-                  <span class="period-hours">{{ simulationConfig.time_config?.peak_hours?.join(':00, ') }}:00</span>
-                  <span class="period-multiplier">×{{ simulationConfig.time_config?.peak_activity_multiplier }}</span>
-                </div>
-                <div class="period-item">
-                  <span class="period-label">{{ $t('step2.workHours') }}</span>
-                  <span class="period-hours">{{ simulationConfig.time_config?.work_hours?.[0] }}:00-{{ simulationConfig.time_config?.work_hours?.slice(-1)[0] }}:00</span>
-                  <span class="period-multiplier">×{{ simulationConfig.time_config?.work_activity_multiplier }}</span>
-                </div>
-                <div class="period-item">
-                  <span class="period-label">{{ $t('step2.morningHours') }}</span>
-                  <span class="period-hours">{{ simulationConfig.time_config?.morning_hours?.[0] }}:00-{{ simulationConfig.time_config?.morning_hours?.slice(-1)[0] }}:00</span>
-                  <span class="period-multiplier">×{{ simulationConfig.time_config?.morning_activity_multiplier }}</span>
-                </div>
-                <div class="period-item">
-                  <span class="period-label">{{ $t('step2.offPeakHours') }}</span>
-                  <span class="period-hours">{{ simulationConfig.time_config?.off_peak_hours?.[0] }}:00-{{ simulationConfig.time_config?.off_peak_hours?.slice(-1)[0] }}:00</span>
-                  <span class="period-multiplier">×{{ simulationConfig.time_config?.off_peak_activity_multiplier }}</span>
-                </div>
-              </div>
-            </div>
-
-            <!-- Agent 配置 -->
-            <div class="config-block">
-              <div class="config-block-header">
-                <span class="config-block-title">{{ $t('step2.agentConfig') }}</span>
-                <span class="config-block-badge">{{ simulationConfig.agent_configs?.length || 0 }} {{ $t('common.items') }}</span>
-              </div>
-              <div class="agents-cards">
-                <div 
-                  v-for="agent in simulationConfig.agent_configs" 
-                  :key="agent.agent_id" 
-                  class="agent-card"
-                >
-                  <!-- 卡片头部 -->
-                  <div class="agent-card-header">
-                    <div class="agent-identity">
-                      <span class="agent-id">Agent {{ agent.agent_id }}</span>
-                      <span class="agent-name">{{ agent.entity_name }}</span>
-                    </div>
-                    <div class="agent-tags">
-                      <span class="agent-type">{{ agent.entity_type }}</span>
-                      <span class="agent-stance" :class="'stance-' + agent.stance">{{ agent.stance }}</span>
-                    </div>
-                  </div>
-                  
-                  <!-- 活跃时间轴 -->
-                  <div class="agent-timeline">
-                    <span class="timeline-label">{{ $t('step2.activeTimePeriod') }}</span>
-                    <div class="mini-timeline">
-                      <div 
-                        v-for="hour in 24" 
-                        :key="hour - 1" 
-                        class="timeline-hour"
-                        :class="{ 'active': agent.active_hours?.includes(hour - 1) }"
-                        :title="`${hour - 1}:00`"
-                      ></div>
-                    </div>
-                    <div class="timeline-marks">
-                      <span>0</span>
-                      <span>6</span>
-                      <span>12</span>
-                      <span>18</span>
-                      <span>24</span>
-                    </div>
-                  </div>
-
-                  <!-- 行为参数 -->
-                  <div class="agent-params">
-                    <div class="param-group">
-                      <div class="param-item">
-                        <span class="param-label">{{ $t('step2.postsPerHour') }}</span>
-                        <span class="param-value">{{ agent.posts_per_hour }}</span>
-                      </div>
-                      <div class="param-item">
-                        <span class="param-label">{{ $t('step2.commentsPerHour') }}</span>
-                        <span class="param-value">{{ agent.comments_per_hour }}</span>
-                      </div>
-                      <div class="param-item">
-                        <span class="param-label">{{ $t('step2.responseDelay') }}</span>
-                        <span class="param-value">{{ agent.response_delay_min }}-{{ agent.response_delay_max }}min</span>
-                      </div>
-                    </div>
-                    <div class="param-group">
-                      <div class="param-item">
-                        <span class="param-label">{{ $t('step2.activityLevel') }}</span>
-                        <span class="param-value with-bar">
-                          <span class="mini-bar" :style="{ width: (agent.activity_level * 100) + '%' }"></span>
-                          {{ (agent.activity_level * 100).toFixed(0) }}%
-                        </span>
-                      </div>
-                      <div class="param-item">
-                        <span class="param-label">{{ $t('step2.sentimentBias') }}</span>
-                        <span class="param-value" :class="agent.sentiment_bias > 0 ? 'positive' : agent.sentiment_bias < 0 ? 'negative' : 'neutral'">
-                          {{ agent.sentiment_bias > 0 ? '+' : '' }}{{ agent.sentiment_bias?.toFixed(1) }}
-                        </span>
-                      </div>
-                      <div class="param-item">
-                        <span class="param-label">{{ $t('step2.influenceWeight') }}</span>
-                        <span class="param-value highlight">{{ agent.influence_weight?.toFixed(1) }}</span>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            <!-- 平台配置 -->
-            <div class="config-block">
-              <div class="config-block-header">
-                <span class="config-block-title">{{ $t('step2.recommendAlgoConfig') }}</span>
-              </div>
-              <div class="platforms-grid">
-                <div v-if="simulationConfig.twitter_config" class="platform-card">
-                  <div class="platform-card-header">
-                    <span class="platform-name">{{ $t('step2.platform1Name') }}</span>
-                  </div>
-                  <div class="platform-params">
-                    <div class="param-row">
-                      <span class="param-label">{{ $t('step2.recencyWeight') }}</span>
-                      <span class="param-value">{{ simulationConfig.twitter_config.recency_weight }}</span>
-                    </div>
-                    <div class="param-row">
-                      <span class="param-label">{{ $t('step2.popularityWeight') }}</span>
-                      <span class="param-value">{{ simulationConfig.twitter_config.popularity_weight }}</span>
-                    </div>
-                    <div class="param-row">
-                      <span class="param-label">{{ $t('step2.relevanceWeight') }}</span>
-                      <span class="param-value">{{ simulationConfig.twitter_config.relevance_weight }}</span>
-                    </div>
-                    <div class="param-row">
-                      <span class="param-label">{{ $t('step2.viralThreshold') }}</span>
-                      <span class="param-value">{{ simulationConfig.twitter_config.viral_threshold }}</span>
-                    </div>
-                    <div class="param-row">
-                      <span class="param-label">{{ $t('step2.echoChamberStrength') }}</span>
-                      <span class="param-value">{{ simulationConfig.twitter_config.echo_chamber_strength }}</span>
-                    </div>
-                  </div>
-                </div>
-                <div v-if="simulationConfig.reddit_config" class="platform-card">
-                  <div class="platform-card-header">
-                    <span class="platform-name">{{ $t('step2.platform2Name') }}</span>
-                  </div>
-                  <div class="platform-params">
-                    <div class="param-row">
-                      <span class="param-label">{{ $t('step2.recencyWeight') }}</span>
-                      <span class="param-value">{{ simulationConfig.reddit_config.recency_weight }}</span>
-                    </div>
-                    <div class="param-row">
-                      <span class="param-label">{{ $t('step2.popularityWeight') }}</span>
-                      <span class="param-value">{{ simulationConfig.reddit_config.popularity_weight }}</span>
-                    </div>
-                    <div class="param-row">
-                      <span class="param-label">{{ $t('step2.relevanceWeight') }}</span>
-                      <span class="param-value">{{ simulationConfig.reddit_config.relevance_weight }}</span>
-                    </div>
-                    <div class="param-row">
-                      <span class="param-label">{{ $t('step2.viralThreshold') }}</span>
-                      <span class="param-value">{{ simulationConfig.reddit_config.viral_threshold }}</span>
-                    </div>
-                    <div class="param-row">
-                      <span class="param-label">{{ $t('step2.echoChamberStrength') }}</span>
-                      <span class="param-value">{{ simulationConfig.reddit_config.echo_chamber_strength }}</span>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            <!-- LLM 配置推理 -->
-            <div v-if="simulationConfig.generation_reasoning" class="config-block">
-              <div class="config-block-header">
-                <span class="config-block-title">{{ $t('step2.llmConfigReasoning') }}</span>
-              </div>
-              <div class="reasoning-content">
-                <div 
-                  v-for="(reason, idx) in simulationConfig.generation_reasoning.split('|').slice(0, 2)" 
-                  :key="idx" 
-                  class="reasoning-item"
-                >
-                  <p class="reasoning-text">{{ reason.trim() }}</p>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <!-- Step 04: 初始激活编排 -->
-      <div class="step-card" :class="{ 'active': phase === 3, 'completed': phase > 3 }">
-        <div class="card-header">
-          <div class="step-info">
-            <span class="step-num">04</span>
-            <span class="step-title">{{ $t('step2.initialActivation') }}</span>
-          </div>
-          <div class="step-status">
-            <span v-if="phase > 3" class="badge success">{{ $t('common.completed') }}</span>
-            <span v-else-if="phase === 3" class="badge processing">{{ $t('step2.orchestrating') }}</span>
-            <span v-else class="badge pending">{{ $t('common.pending') }}</span>
-          </div>
-        </div>
-
-        <div class="card-content">
-          <p class="api-note">POST /api/simulation/prepare</p>
-          <p class="description">
-            {{ $t('step2.initialActivationDesc') }}
-          </p>
-
-          <div v-if="simulationConfig?.event_config" class="orchestration-content">
-            <!-- 叙事方向 -->
-            <div class="narrative-box">
-              <span class="box-label narrative-label">
-                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="special-icon">
-                  <path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="url(#paint0_linear)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-                  <path d="M16.24 7.76L14.12 14.12L7.76 16.24L9.88 9.88L16.24 7.76Z" fill="url(#paint0_linear)" stroke="url(#paint0_linear)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-                  <defs>
-                    <linearGradient id="paint0_linear" x1="2" y1="2" x2="22" y2="22" gradientUnits="userSpaceOnUse">
-                      <stop stop-color="#FF5722"/>
-                      <stop offset="1" stop-color="#FF9800"/>
-                    </linearGradient>
-                  </defs>
-                </svg>
-                {{ $t('step2.narrativeDirection') }}
-              </span>
-              <p class="narrative-text">{{ simulationConfig.event_config.narrative_direction }}</p>
-            </div>
-
-            <!-- 热点话题 -->
-            <div class="topics-section">
-              <span class="box-label">{{ $t('step2.initialHotTopics') }}</span>
-              <div class="hot-topics-grid">
-                <span v-for="topic in simulationConfig.event_config.hot_topics" :key="topic" class="hot-topic-tag">
-                  # {{ topic }}
-                </span>
-              </div>
-            </div>
-
-            <!-- 初始帖子流 -->
-            <div class="initial-posts-section">
-              <span class="box-label">{{ $t('step2.initialActivationSeq', { count: simulationConfig.event_config.initial_posts.length }) }}</span>
-              <div class="posts-timeline">
-                <div v-for="(post, idx) in simulationConfig.event_config.initial_posts" :key="idx" class="timeline-item">
-                  <div class="timeline-marker"></div>
-                  <div class="timeline-content">
-                    <div class="post-header">
-                      <span class="post-role">{{ post.poster_type }}</span>
-                      <span class="post-agent-info">
-                        <span class="post-id">Agent {{ post.poster_agent_id }}</span>
-                        <span class="post-username">@{{ getAgentUsername(post.poster_agent_id) }}</span>
-                      </span>
-                    </div>
-                    <p class="post-text">{{ post.content }}</p>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <!-- Step 05: 准备完成 -->
-      <div class="step-card" :class="{ 'active': phase === 4 }">
-        <div class="card-header">
-          <div class="step-info">
-            <span class="step-num">05</span>
-            <span class="step-title">{{ $t('step2.setupComplete') }}</span>
-          </div>
-          <div class="step-status">
-            <span v-if="phase >= 4" class="badge processing">{{ $t('step1.inProgress') }}</span>
-            <span v-else class="badge pending">{{ $t('common.pending') }}</span>
-          </div>
-        </div>
-
-        <div class="card-content">
-          <p class="api-note">POST /api/simulation/start</p>
-          <p class="description">{{ $t('step2.setupCompleteDesc') }}</p>
-          
-          <!-- 模拟轮数配置 - 只有在配置生成完成且轮数计算出来后才显示 -->
-          <div v-if="simulationConfig && autoGeneratedRounds" class="rounds-config-section">
-            <div class="rounds-header">
-              <div class="header-left">
-                <span class="section-title">{{ $t('step2.roundsConfig') }}</span>
-                <span class="section-desc">{{ $t('step2.roundsConfigDesc', { hours: simulationConfig?.time_config?.total_simulation_hours || '-', minutesPerRound: simulationConfig?.time_config?.minutes_per_round || '-' }) }}</span>
-              </div>
-              <label class="switch-control">
-                <input type="checkbox" v-model="useCustomRounds">
-                <span class="switch-track"></span>
-                <span class="switch-label">{{ $t('step2.customToggle') }}</span>
-              </label>
-            </div>
-            
-            <Transition name="fade" mode="out-in">
-              <div v-if="useCustomRounds" class="rounds-content custom" key="custom">
-                <div class="slider-display">
-                  <div class="slider-main-value">
-                    <span class="val-num">{{ customMaxRounds }}</span>
-                    <span class="val-unit">{{ $t('step2.roundsUnit') }}</span>
-                  </div>
-                  <div class="slider-meta-info">
-                    <span>{{ $t('step2.estimatedDuration', { minutes: Math.round(customMaxRounds * 0.6) }) }}</span>
-                  </div>
-                </div>
-
-                <div class="range-wrapper">
-                  <input 
-                    type="range" 
-                    v-model.number="customMaxRounds" 
-                    min="10" 
-                    :max="autoGeneratedRounds"
-                    step="5"
-                    class="minimal-slider"
-                    :style="{ '--percent': ((customMaxRounds - 10) / (autoGeneratedRounds - 10)) * 100 + '%' }"
-                  />
-                  <div class="range-marks">
-                    <span>10</span>
-                    <span 
-                      class="mark-recommend" 
-                      :class="{ active: customMaxRounds === 40 }"
-                      @click="customMaxRounds = 40"
-                      :style="{ position: 'absolute', left: `calc(${(40 - 10) / (autoGeneratedRounds - 10) * 100}% - 30px)` }"
-                    >{{ $t('step2.recommendedRounds', { rounds: 40 }) }}</span>
-                    <span>{{ autoGeneratedRounds }}</span>
-                  </div>
-                </div>
-              </div>
-              
-              <div v-else class="rounds-content auto" key="auto">
-                <div class="auto-info-card">
-                  <div class="auto-value">
-                    <span class="val-num">{{ autoGeneratedRounds }}</span>
-                    <span class="val-unit">{{ $t('step2.roundsUnit') }}</span>
-                  </div>
-                  <div class="auto-content">
-                    <div class="auto-meta-row">
-                      <span class="duration-badge">
-                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                          <circle cx="12" cy="12" r="10"></circle>
-                          <polyline points="12 6 12 12 16 14"></polyline>
-                        </svg>
-                        {{ $t('step2.estimatedDurationFull', { minutes: Math.round(autoGeneratedRounds * 0.6) }) }}
-                      </span>
-                    </div>
-                    <div class="auto-desc">
-                      <p class="highlight-tip" @click="useCustomRounds = true">{{ $t('step2.customTip') }} ➝</p>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </Transition>
-          </div>
-
-          <div class="action-group dual">
-            <button 
-              class="action-btn secondary"
-              @click="$emit('go-back')"
-            >
-              ← {{ $t('step2.backToGraphBuild') }}
-            </button>
-            <button 
-              class="action-btn primary"
-              :disabled="phase < 4"
-              @click="handleStartSimulation"
-            >
-              {{ $t('step2.startDualWorldSim') }} ➝
-            </button>
-          </div>
-        </div>
-      </div>
+      <!-- 01: Simulation Instance -->
+      <SimulationInstanceCard
+        :phase="phase"
+        :simulationId="simulationId"
+        :projectData="projectData"
+        :taskId="taskId"
+      />
+
+      <!-- 02: Agent Personas -->
+      <AgentProfilesSection
+        :phase="phase"
+        :profiles="profiles"
+        :prepareProgress="prepareProgress"
+        :expectedTotal="expectedTotal"
+        @select-profile="selectedProfile = $event"
+      />
+
+      <!-- 03: Dual Platform Config -->
+      <SimConfigSection
+        :phase="phase"
+        :simulationConfig="simulationConfig"
+      />
+
+      <!-- 04: Orchestration / Initial Posts -->
+      <OrchestrationSection
+        :phase="phase"
+        :simulationConfig="simulationConfig"
+        :profiles="profiles"
+      />
+
+      <!-- 05: Readiness & Launch -->
+      <SetupReadinessSection
+        :phase="phase"
+        :simulationConfig="simulationConfig"
+        :autoGeneratedRounds="autoGeneratedRounds"
+        v-model:useCustomRounds="useCustomRounds"
+        v-model:customMaxRounds="customMaxRounds"
+        @go-back="$emit('go-back')"
+        @start-simulation="handleStartSimulation"
+      />
     </div>
 
-    <!-- Profile Detail Modal -->
-    <Transition name="modal">
-      <div v-if="selectedProfile" class="profile-modal-overlay" @click.self="selectedProfile = null">
-        <div class="profile-modal">
-          <div class="modal-header">
-          <div class="modal-header-info">
-            <div class="modal-name-row">
-              <span class="modal-realname">{{ selectedProfile.username }}</span>
-              <span class="modal-username">@{{ selectedProfile.name }}</span>
-            </div>
-            <span class="modal-profession">{{ selectedProfile.profession }}</span>
-          </div>
-          <button class="close-btn" @click="selectedProfile = null">×</button>
-        </div>
-        
-        <div class="modal-body">
-          <!-- 基本信息 -->
-          <div class="modal-info-grid">
-            <div class="info-item">
-              <span class="info-label">{{ $t('step2.profileModalAge') }}</span>
-              <span class="info-value">{{ selectedProfile.age || '-' }} {{ $t('step2.yearsOld') }}</span>
-            </div>
-            <div class="info-item">
-              <span class="info-label">{{ $t('step2.profileModalGender') }}</span>
-              <span class="info-value">{{ { male: $t('step2.genderMale'), female: $t('step2.genderFemale'), other: $t('step2.genderOther') }[selectedProfile.gender] || selectedProfile.gender }}</span>
-            </div>
-            <div class="info-item">
-              <span class="info-label">{{ $t('step2.profileModalCountry') }}</span>
-              <span class="info-value">{{ selectedProfile.country || '-' }}</span>
-            </div>
-            <div class="info-item">
-              <span class="info-label">{{ $t('step2.profileModalMbti') }}</span>
-              <span class="info-value mbti">{{ selectedProfile.mbti || '-' }}</span>
-            </div>
-          </div>
-
-          <!-- 简介 -->
-          <div class="modal-section">
-            <span class="section-label">{{ $t('step2.profileModalBio') }}</span>
-            <p class="section-bio">{{ selectedProfile.bio || $t('step2.noBio') }}</p>
-          </div>
-
-          <!-- 关注话题 -->
-          <div class="modal-section" v-if="selectedProfile.interested_topics?.length">
-            <span class="section-label">{{ $t('step2.profileModalTopics') }}</span>
-            <div class="topics-grid">
-              <span 
-                v-for="topic in selectedProfile.interested_topics" 
-                :key="topic" 
-                class="topic-item"
-              >{{ topic }}</span>
-            </div>
-          </div>
-
-          <!-- 详细人设 -->
-          <div class="modal-section" v-if="selectedProfile.persona">
-            <span class="section-label">{{ $t('step2.profileModalPersona') }}</span>
-            
-            <!-- 人设维度概览 -->
-            <div class="persona-dimensions">
-              <div class="dimension-card">
-                <span class="dim-title">{{ $t('step2.personaDimExperience') }}</span>
-                <span class="dim-desc">{{ $t('step2.personaDimExperienceDesc') }}</span>
-              </div>
-              <div class="dimension-card">
-                <span class="dim-title">{{ $t('step2.personaDimBehavior') }}</span>
-                <span class="dim-desc">{{ $t('step2.personaDimBehaviorDesc') }}</span>
-              </div>
-              <div class="dimension-card">
-                <span class="dim-title">{{ $t('step2.personaDimMemory') }}</span>
-                <span class="dim-desc">{{ $t('step2.personaDimMemoryDesc') }}</span>
-              </div>
-              <div class="dimension-card">
-                <span class="dim-title">{{ $t('step2.personaDimSocial') }}</span>
-                <span class="dim-desc">{{ $t('step2.personaDimSocialDesc') }}</span>
-              </div>
-            </div>
-
-            <div class="persona-content">
-              <p class="section-persona">{{ selectedProfile.persona }}</p>
-            </div>
-          </div>
-        </div>
-      </div>
-      </div>
-    </Transition>
+    <!-- Logs panel — compacto por padrão -->
+    <SystemLogsPanel :logs="systemLogs" :contextId="simulationId" />
 
-    <!-- Bottom Info / Logs -->
-    <div class="system-logs">
-      <div class="log-header">
-        <span class="log-title">SYSTEM DASHBOARD</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>
+    <!-- Profile detail modal -->
+    <ProfileDetailPanel
+      :profile="selectedProfile"
+      @close="selectedProfile = null"
+    />
   </div>
 </template>
 
 <script setup>
-import { ref, computed, watch, onMounted, onUnmounted, nextTick } from 'vue'
+import { ref, computed, watch, onMounted, onUnmounted } from 'vue'
 import { useI18n } from 'vue-i18n'
+
+import SimulationInstanceCard from './step2/SimulationInstanceCard.vue'
+import AgentProfilesSection   from './step2/AgentProfilesSection.vue'
+import SimConfigSection       from './step2/SimConfigSection.vue'
+import OrchestrationSection   from './step2/OrchestrationSection.vue'
+import SetupReadinessSection  from './step2/SetupReadinessSection.vue'
+import ProfileDetailPanel     from './step2/ProfileDetailPanel.vue'
+import SystemLogsPanel        from './workspace/SystemLogsPanel.vue'
+
 import {
   prepareSimulation,
   getPrepareStatus,
   getSimulationProfilesRealtime,
-  getSimulationConfig,
-  getSimulationConfigRealtime
+  getSimulationConfigRealtime,
 } from '../api/simulation'
 
 const { t } = useI18n()
 
+// ── Props & Emits ──────────────────────────────────────────────────────────────
 const props = defineProps({
-  simulationId: String,  // 从父组件传入
-  projectData: Object,
-  graphData: Object,
-  systemLogs: Array
+  simulationId: String,
+  projectData:  Object,
+  graphData:    Object,
+  systemLogs:   Array,
 })
 
 const emit = defineEmits(['go-back', 'next-step', 'add-log', 'update-status'])
 
-// State
-const phase = ref(0) // 0: 初始化, 1: 生成人设, 2: 生成配置, 3: 完成
-const taskId = ref(null)
+// ── State ─────────────────────────────────────────────────────────────────────
+const phase           = ref(0) // 0 init | 1 personas | 2 config | 3 orchestration | 4 ready
+const taskId          = ref(null)
 const prepareProgress = ref(0)
-const currentStage = ref('')
-const progressMessage = ref('')
-const profiles = ref([])
-const entityTypes = ref([])
-const expectedTotal = ref(null)
+const currentStage    = ref('')
+const profiles        = ref([])
+const entityTypes     = ref([])
+const expectedTotal   = ref(null)
 const simulationConfig = ref(null)
 const selectedProfile = ref(null)
-const showProfilesDetail = ref(true)
+const useCustomRounds = ref(false)
+const customMaxRounds = ref(40)
 
-// 日志去重：记录上一次输出的关键信息
-let lastLoggedMessage = ''
+// Dedup tracking
+let lastLoggedMessage      = ''
 let lastLoggedProfileCount = 0
-let lastLoggedConfigStage = ''
+let lastLoggedConfigStage  = ''
+
+// Polling timers
+let pollTimer     = null
+let profilesTimer = null
+let configTimer   = null
+
+// ── Computed ───────────────────────────────────────────────────────────────────
+const autoGeneratedRounds = computed(() => {
+  const tc = simulationConfig.value?.time_config
+  if (!tc?.total_simulation_hours || !tc?.minutes_per_round) return null
+  return Math.max(Math.floor((tc.total_simulation_hours * 60) / tc.minutes_per_round), 40)
+})
 
-// 模拟轮数配置
-const useCustomRounds = ref(false) // 默认使用自动配置轮数
-const customMaxRounds = ref(40)   // 默认推荐40轮
+// systemLogs is passed from parent (SimulationView), re-export for SystemLogsPanel
+// Note: The panel renders props.systemLogs directly.
 
-// Watch stage to update phase
+// ── Helpers ───────────────────────────────────────────────────────────────────
+const addLog = (msg) => emit('add-log', msg)
+
+const handleStartSimulation = (params = {}) => {
+  if (params.maxRounds) {
+    addLog(t('log.startSimCustomRounds', { rounds: params.maxRounds }))
+  } else {
+    addLog(t('log.startSimAutoRounds', { rounds: autoGeneratedRounds.value }))
+  }
+  emit('next-step', params)
+}
+
+// ── Stage watcher ─────────────────────────────────────────────────────────────
 watch(currentStage, (newStage) => {
   if (newStage === '生成Agent人设' || newStage === 'generating_profiles') {
     phase.value = 1
   } else if (newStage === '生成模拟配置' || newStage === 'generating_config') {
     phase.value = 2
-    // 进入配置生成阶段，开始轮询配置
     if (!configTimer) {
       addLog(t('log.startGeneratingConfig'))
       startConfigPolling()
     }
   } else if (newStage === '准备模拟脚本' || newStage === 'copying_scripts') {
-    phase.value = 2 // 仍属于配置阶段
+    phase.value = 2
   }
 })
 
-// 从配置中计算自动生成的轮数（不使用硬编码默认值）
-const autoGeneratedRounds = computed(() => {
-  if (!simulationConfig.value?.time_config) {
-    return null // 配置未生成时返回 null
-  }
-  const totalHours = simulationConfig.value.time_config.total_simulation_hours
-  const minutesPerRound = simulationConfig.value.time_config.minutes_per_round
-  if (!totalHours || !minutesPerRound) {
-    return null // 配置数据不完整时返回 null
-  }
-  const calculatedRounds = Math.floor((totalHours * 60) / minutesPerRound)
-  // 确保最大轮数不小于40（推荐值），避免滑动条范围异常
-  return Math.max(calculatedRounds, 40)
-})
+// ── Polling: prepare status ───────────────────────────────────────────────────
+const startPolling = () => { pollTimer = setInterval(pollPrepareStatus, 2000) }
+const stopPolling  = () => { if (pollTimer) { clearInterval(pollTimer); pollTimer = null } }
 
-// Polling timer
-let pollTimer = null
-let profilesTimer = null
-let configTimer = null
+const pollPrepareStatus = async () => {
+  if (!taskId.value && !props.simulationId) return
+  try {
+    const res = await getPrepareStatus({ task_id: taskId.value, simulation_id: props.simulationId })
+    if (!res.success || !res.data) return
+    const data = res.data
+
+    prepareProgress.value = data.progress || 0
+
+    if (data.progress_detail) {
+      currentStage.value = data.progress_detail.current_stage_name || ''
+      const d = data.progress_detail
+      const key = `${d.current_stage}-${d.current_item}-${d.total_items}`
+      if (key !== lastLoggedMessage && d.item_description) {
+        lastLoggedMessage = key
+        const info = `[${d.stage_index}/${d.total_stages}]`
+        if (d.total_items > 0) {
+          addLog(`${info} ${d.current_stage_name}: ${d.current_item}/${d.total_items} - ${d.item_description}`)
+        } else {
+          addLog(`${info} ${d.current_stage_name}: ${d.item_description}`)
+        }
+      }
+    } else if (data.message && data.message !== lastLoggedMessage) {
+      lastLoggedMessage = data.message
+      const match = data.message.match(/\[(\d+)\/(\d+)\]\s*([^:]+)/)
+      if (match) currentStage.value = match[3].trim()
+      addLog(data.message)
+    }
 
-// Computed
-const displayProfiles = computed(() => {
-  if (showProfilesDetail.value) {
-    return profiles.value
+    if (data.status === 'completed' || data.status === 'ready' || data.already_prepared) {
+      addLog(t('log.prepareComplete'))
+      stopPolling()
+      stopProfilesPolling()
+      await loadPreparedData()
+    } else if (data.status === 'failed') {
+      addLog(t('log.prepareFailedWithError', { error: data.error || t('common.unknownError') }))
+      stopPolling()
+      stopProfilesPolling()
+    }
+  } catch (e) {
+    console.warn('prepare poll error:', e)
   }
-  return profiles.value.slice(0, 6)
-})
+}
 
-// 根据agent_id获取对应的username
-const getAgentUsername = (agentId) => {
-  if (profiles.value && profiles.value.length > agentId && agentId >= 0) {
-    const profile = profiles.value[agentId]
-    return profile?.username || `agent_${agentId}`
+// ── Polling: profiles ─────────────────────────────────────────────────────────
+const startProfilesPolling = () => { profilesTimer = setInterval(fetchProfilesRealtime, 3000) }
+const stopProfilesPolling  = () => { if (profilesTimer) { clearInterval(profilesTimer); profilesTimer = null } }
+
+const fetchProfilesRealtime = async () => {
+  if (!props.simulationId) return
+  try {
+    const res = await getSimulationProfilesRealtime(props.simulationId, 'reddit')
+    if (!res.success || !res.data) return
+
+    profiles.value = res.data.profiles || []
+    if (res.data.total_expected) expectedTotal.value = res.data.total_expected
+
+    const types = new Set()
+    profiles.value.forEach(p => { if (p.entity_type) types.add(p.entity_type) })
+    entityTypes.value = Array.from(types)
+
+    const count = profiles.value.length
+    if (count > 0 && count !== lastLoggedProfileCount) {
+      lastLoggedProfileCount = count
+      const total = expectedTotal.value || '?'
+      const latest = profiles.value[count - 1]
+      const name = latest?.name || latest?.username || `Agent_${count}`
+      if (count === 1) addLog(t('log.startGeneratingAgentProfiles'))
+      addLog(t('log.agentProfile', { current: count, total, name, profession: latest?.profession || t('step2.unknownProfession') }))
+      if (expectedTotal.value && count >= expectedTotal.value) {
+        addLog(t('log.allProfilesComplete', { count }))
+      }
+    }
+  } catch (e) {
+    console.warn('profiles poll error:', e)
   }
-  return `agent_${agentId}`
 }
 
-// 计算所有人设的关联话题总数
-const totalTopicsCount = computed(() => {
-  return profiles.value.reduce((sum, p) => {
-    return sum + (p.interested_topics?.length || 0)
-  }, 0)
-})
+// ── Polling: config ───────────────────────────────────────────────────────────
+const startConfigPolling = () => { configTimer = setInterval(fetchConfigRealtime, 2000) }
+const stopConfigPolling  = () => { if (configTimer) { clearInterval(configTimer); configTimer = null } }
 
-// Methods
-const addLog = (msg) => {
-  emit('add-log', msg)
-}
+const fetchConfigRealtime = async () => {
+  if (!props.simulationId) return
+  try {
+    const res = await getSimulationConfigRealtime(props.simulationId)
+    if (!res.success || !res.data) return
+    const data = res.data
 
-// 处理开始模拟按钮点击
-const handleStartSimulation = () => {
-  // 构建传递给父组件的参数
-  const params = {}
-  
-  if (useCustomRounds.value) {
-    // 用户自定义轮数，传递 max_rounds 参数
-    params.maxRounds = customMaxRounds.value
-    addLog(t('log.startSimCustomRounds', { rounds: customMaxRounds.value }))
-  } else {
-    // 用户选择保持自动生成的轮数，不传递 max_rounds 参数
-    addLog(t('log.startSimAutoRounds', { rounds: autoGeneratedRounds.value }))
-  }
-  
-  emit('next-step', params)
-}
+    if (data.generation_stage && data.generation_stage !== lastLoggedConfigStage) {
+      lastLoggedConfigStage = data.generation_stage
+      if (data.generation_stage === 'generating_profiles') addLog(t('log.generatingAgentProfileConfig'))
+      else if (data.generation_stage === 'generating_config') addLog(t('log.generatingLLMConfig'))
+    }
+
+    if (data.config_generated && data.config) {
+      simulationConfig.value = data.config
+      addLog(t('log.configComplete'))
+
+      if (data.summary) {
+        addLog(t('log.configSummaryAgents',   { count: data.summary.total_agents }))
+        addLog(t('log.configSummaryHours',    { hours: data.summary.simulation_hours }))
+        addLog(t('log.configSummaryPosts',    { count: data.summary.initial_posts_count }))
+        addLog(t('log.configSummaryTopics',   { count: data.summary.hot_topics_count }))
+        addLog(t('log.configSummaryPlatforms',{
+          twitter: data.summary.has_twitter_config ? '✓' : '✗',
+          reddit:  data.summary.has_reddit_config  ? '✓' : '✗',
+        }))
+      }
+      if (data.config.time_config) {
+        const tc = data.config.time_config
+        addLog(t('log.timeConfigDetail', {
+          minutes: tc.minutes_per_round,
+          rounds:  Math.floor((tc.total_simulation_hours * 60) / tc.minutes_per_round),
+        }))
+      }
+      if (data.config.event_config?.narrative_direction) {
+        const n = data.config.event_config.narrative_direction
+        addLog(t('log.narrativeDirection', { direction: n.length > 50 ? n.slice(0, 50) + '…' : n }))
+      }
 
-const truncateBio = (bio) => {
-  if (bio.length > 80) {
-    return bio.substring(0, 80) + '...'
+      stopConfigPolling()
+      phase.value = 4
+      addLog(t('log.envSetupComplete'))
+      emit('update-status', 'completed')
+    }
+  } catch (e) {
+    console.warn('config poll error:', e)
   }
-  return bio
 }
 
-const selectProfile = (profile) => {
-  selectedProfile.value = profile
+// ── Data loading ──────────────────────────────────────────────────────────────
+const loadPreparedData = async () => {
+  phase.value = 2
+  addLog(t('log.loadingExistingConfig'))
+
+  await fetchProfilesRealtime()
+  addLog(t('log.loadedAgentProfiles', { count: profiles.value.length }))
+
+  try {
+    const res = await getSimulationConfigRealtime(props.simulationId)
+    if (res.success && res.data?.config_generated && res.data.config) {
+      simulationConfig.value = res.data.config
+      addLog(t('log.configLoadSuccess'))
+      if (res.data.summary) {
+        addLog(t('log.configSummaryAgents',   { count: res.data.summary.total_agents }))
+        addLog(t('log.configSummaryHours',    { hours: res.data.summary.simulation_hours }))
+        addLog(t('log.configSummaryPostsAlt', { count: res.data.summary.initial_posts_count }))
+      }
+      addLog(t('log.envSetupComplete'))
+      phase.value = 4
+      emit('update-status', 'completed')
+    } else {
+      addLog(t('log.configGenerating'))
+      startConfigPolling()
+    }
+  } catch (err) {
+    addLog(t('log.loadConfigFailed', { error: err.message }))
+    emit('update-status', 'error')
+  }
 }
 
-// 自动开始准备模拟
 const startPrepareSimulation = async () => {
   if (!props.simulationId) {
     addLog(t('log.errorMissingSimId'))
     emit('update-status', 'error')
     return
   }
-  
-  // 标记第一步完成，开始第二步
+
   phase.value = 1
   addLog(t('log.simInstanceCreated', { id: props.simulationId }))
   addLog(t('log.preparingSimEnv'))
   emit('update-status', 'processing')
-  
+
   try {
     const res = await prepareSimulation({
-      simulation_id: props.simulationId,
-      use_llm_for_profiles: true,
-      parallel_profile_count: 5
+      simulation_id:           props.simulationId,
+      use_llm_for_profiles:    true,
+      parallel_profile_count:  5,
     })
-    
+
     if (res.success && res.data) {
       if (res.data.already_prepared) {
         addLog(t('log.detectedExistingPrep'))
         await loadPreparedData()
         return
       }
-      
+
       taskId.value = res.data.task_id
       addLog(t('log.prepareTaskStarted'))
       addLog(t('log.prepareTaskId', { taskId: res.data.task_id }))
-      
-      // 立即设置预期Agent总数（从prepare接口返回值获取）
+
       if (res.data.expected_entities_count) {
         expectedTotal.value = res.data.expected_entities_count
         addLog(t('log.zepEntitiesFound', { count: res.data.expected_entities_count }))
-        if (res.data.entity_types && res.data.entity_types.length > 0) {
+        if (res.data.entity_types?.length) {
           addLog(t('log.entityTypes', { types: res.data.entity_types.join(', ') }))
         }
       }
-      
+
       addLog(t('log.startPollingProgress'))
-      // 开始轮询进度
       startPolling()
-      // 开始实时获取 Profiles
       startProfilesPolling()
     } else {
       addLog(t('log.prepareFailed', { error: res.error || t('common.unknownError') }))
@@ -824,252 +362,8 @@ const startPrepareSimulation = async () => {
   }
 }
 
-const startPolling = () => {
-  pollTimer = setInterval(pollPrepareStatus, 2000)
-}
-
-const stopPolling = () => {
-  if (pollTimer) {
-    clearInterval(pollTimer)
-    pollTimer = null
-  }
-}
-
-const startProfilesPolling = () => {
-  profilesTimer = setInterval(fetchProfilesRealtime, 3000)
-}
-
-const stopProfilesPolling = () => {
-  if (profilesTimer) {
-    clearInterval(profilesTimer)
-    profilesTimer = null
-  }
-}
-
-const pollPrepareStatus = async () => {
-  if (!taskId.value && !props.simulationId) return
-  
-  try {
-    const res = await getPrepareStatus({
-      task_id: taskId.value,
-      simulation_id: props.simulationId
-    })
-    
-    if (res.success && res.data) {
-      const data = res.data
-      
-      // 更新进度
-      prepareProgress.value = data.progress || 0
-      progressMessage.value = data.message || ''
-      
-      // 解析阶段信息并输出详细日志
-      if (data.progress_detail) {
-        currentStage.value = data.progress_detail.current_stage_name || ''
-        
-        // 输出详细进度日志（避免重复）
-        const detail = data.progress_detail
-        const logKey = `${detail.current_stage}-${detail.current_item}-${detail.total_items}`
-        if (logKey !== lastLoggedMessage && detail.item_description) {
-          lastLoggedMessage = logKey
-          const stageInfo = `[${detail.stage_index}/${detail.total_stages}]`
-          if (detail.total_items > 0) {
-            addLog(`${stageInfo} ${detail.current_stage_name}: ${detail.current_item}/${detail.total_items} - ${detail.item_description}`)
-          } else {
-            addLog(`${stageInfo} ${detail.current_stage_name}: ${detail.item_description}`)
-          }
-        }
-      } else if (data.message) {
-        // 从消息中提取阶段
-        const match = data.message.match(/\[(\d+)\/(\d+)\]\s*([^:]+)/)
-        if (match) {
-          currentStage.value = match[3].trim()
-        }
-        // 输出消息日志（避免重复）
-        if (data.message !== lastLoggedMessage) {
-          lastLoggedMessage = data.message
-          addLog(data.message)
-        }
-      }
-      
-      // 检查是否完成
-      if (data.status === 'completed' || data.status === 'ready' || data.already_prepared) {
-        addLog(t('log.prepareComplete'))
-        stopPolling()
-        stopProfilesPolling()
-        await loadPreparedData()
-      } else if (data.status === 'failed') {
-        addLog(t('log.prepareFailedWithError', { error: data.error || t('common.unknownError') }))
-        stopPolling()
-        stopProfilesPolling()
-      }
-    }
-  } catch (err) {
-    console.warn('轮询状态失败:', err)
-  }
-}
-
-const fetchProfilesRealtime = async () => {
-  if (!props.simulationId) return
-  
-  try {
-    const res = await getSimulationProfilesRealtime(props.simulationId, 'reddit')
-    
-    if (res.success && res.data) {
-      const prevCount = profiles.value.length
-      profiles.value = res.data.profiles || []
-      // 只有当 API 返回有效值时才更新，避免覆盖已有的有效值
-      if (res.data.total_expected) {
-        expectedTotal.value = res.data.total_expected
-      }
-      
-      // 提取实体类型
-      const types = new Set()
-      profiles.value.forEach(p => {
-        if (p.entity_type) types.add(p.entity_type)
-      })
-      entityTypes.value = Array.from(types)
-      
-      // 输出 Profile 生成进度日志（仅当数量变化时）
-      const currentCount = profiles.value.length
-      if (currentCount > 0 && currentCount !== lastLoggedProfileCount) {
-        lastLoggedProfileCount = currentCount
-        const total = expectedTotal.value || '?'
-        const latestProfile = profiles.value[currentCount - 1]
-        const profileName = latestProfile?.name || latestProfile?.username || `Agent_${currentCount}`
-        if (currentCount === 1) {
-          addLog(t('log.startGeneratingAgentProfiles'))
-        }
-        addLog(t('log.agentProfile', { current: currentCount, total: total, name: profileName, profession: latestProfile?.profession || t('step2.unknownProfession') }))
-
-        // 如果全部生成完成
-        if (expectedTotal.value && currentCount >= expectedTotal.value) {
-          addLog(t('log.allProfilesComplete', { count: currentCount }))
-        }
-      }
-    }
-  } catch (err) {
-    console.warn('获取 Profiles 失败:', err)
-  }
-}
-
-// 配置轮询
-const startConfigPolling = () => {
-  configTimer = setInterval(fetchConfigRealtime, 2000)
-}
-
-const stopConfigPolling = () => {
-  if (configTimer) {
-    clearInterval(configTimer)
-    configTimer = null
-  }
-}
-
-const fetchConfigRealtime = async () => {
-  if (!props.simulationId) return
-  
-  try {
-    const res = await getSimulationConfigRealtime(props.simulationId)
-    
-    if (res.success && res.data) {
-      const data = res.data
-      
-      // 输出配置生成阶段日志（避免重复）
-      if (data.generation_stage && data.generation_stage !== lastLoggedConfigStage) {
-        lastLoggedConfigStage = data.generation_stage
-        if (data.generation_stage === 'generating_profiles') {
-          addLog(t('log.generatingAgentProfileConfig'))
-        } else if (data.generation_stage === 'generating_config') {
-          addLog(t('log.generatingLLMConfig'))
-        }
-      }
-      
-      // 如果配置已生成
-      if (data.config_generated && data.config) {
-        simulationConfig.value = data.config
-        addLog(t('log.configComplete'))
-
-        // 显示详细配置摘要
-        if (data.summary) {
-          addLog(t('log.configSummaryAgents', { count: data.summary.total_agents }))
-          addLog(t('log.configSummaryHours', { hours: data.summary.simulation_hours }))
-          addLog(t('log.configSummaryPosts', { count: data.summary.initial_posts_count }))
-          addLog(t('log.configSummaryTopics', { count: data.summary.hot_topics_count }))
-          addLog(t('log.configSummaryPlatforms', { twitter: data.summary.has_twitter_config ? '✓' : '✗', reddit: data.summary.has_reddit_config ? '✓' : '✗' }))
-        }
-        
-        // 显示时间配置详情
-        if (data.config.time_config) {
-          const tc = data.config.time_config
-          addLog(t('log.timeConfigDetail', { minutes: tc.minutes_per_round, rounds: Math.floor((tc.total_simulation_hours * 60) / tc.minutes_per_round) }))
-        }
-        
-        // 显示事件配置
-        if (data.config.event_config?.narrative_direction) {
-          const narrative = data.config.event_config.narrative_direction
-          addLog(t('log.narrativeDirection', { direction: narrative.length > 50 ? narrative.substring(0, 50) + '...' : narrative }))
-        }
-        
-        stopConfigPolling()
-        phase.value = 4
-        addLog(t('log.envSetupComplete'))
-        emit('update-status', 'completed')
-      }
-    }
-  } catch (err) {
-    console.warn('获取 Config 失败:', err)
-  }
-}
-
-const loadPreparedData = async () => {
-  phase.value = 2
-  addLog(t('log.loadingExistingConfig'))
-
-  // 最后获取一次 Profiles
-  await fetchProfilesRealtime()
-  addLog(t('log.loadedAgentProfiles', { count: profiles.value.length }))
-
-  // 获取配置（使用实时接口）
-  try {
-    const res = await getSimulationConfigRealtime(props.simulationId)
-    if (res.success && res.data) {
-      if (res.data.config_generated && res.data.config) {
-        simulationConfig.value = res.data.config
-        addLog(t('log.configLoadSuccess'))
-
-        // 显示详细配置摘要
-        if (res.data.summary) {
-          addLog(t('log.configSummaryAgents', { count: res.data.summary.total_agents }))
-          addLog(t('log.configSummaryHours', { hours: res.data.summary.simulation_hours }))
-          addLog(t('log.configSummaryPostsAlt', { count: res.data.summary.initial_posts_count }))
-        }
-
-        addLog(t('log.envSetupComplete'))
-        phase.value = 4
-        emit('update-status', 'completed')
-      } else {
-        // 配置尚未生成，开始轮询
-        addLog(t('log.configGenerating'))
-        startConfigPolling()
-      }
-    }
-  } catch (err) {
-    addLog(t('log.loadConfigFailed', { error: err.message }))
-    emit('update-status', 'error')
-  }
-}
-
-// Scroll log to bottom
-const logContent = ref(null)
-watch(() => props.systemLogs?.length, () => {
-  nextTick(() => {
-    if (logContent.value) {
-      logContent.value.scrollTop = logContent.value.scrollHeight
-    }
-  })
-})
-
+// ── Lifecycle ──────────────────────────────────────────────────────────────────
 onMounted(() => {
-  // 自动开始准备流程
   if (props.simulationId) {
     addLog(t('log.step2Init'))
     startPrepareSimulation()
@@ -1088,1518 +382,20 @@ onUnmounted(() => {
   height: 100%;
   display: flex;
   flex-direction: column;
-  background: #FAFAFA;
+  background: #F7F7F7;
   font-family: 'Space Grotesk', 'Noto Sans SC', system-ui, sans-serif;
+  overflow: hidden;
 }
 
 .scroll-container {
   flex: 1;
   overflow-y: auto;
-  padding: 24px;
+  padding: 20px 18px;
   display: flex;
   flex-direction: column;
-  gap: 20px;
-}
-
-/* Step Card */
-.step-card {
-  background: #FFF;
-  border-radius: 8px;
-  padding: 20px;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
-  border: 1px solid #EAEAEA;
-  transition: all 0.3s ease;
-  position: relative;
-}
-
-.step-card.active {
-  border-color: #FF5722;
-  box-shadow: 0 4px 12px rgba(255, 87, 34, 0.08);
-}
-
-.card-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 16px;
-}
-
-.step-info {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.step-num {
-  font-family: 'JetBrains Mono', monospace;
-  font-size: 20px;
-  font-weight: 700;
-  color: #E0E0E0;
-}
-
-.step-card.active .step-num,
-.step-card.completed .step-num {
-  color: #000;
-}
-
-.step-title {
-  font-weight: 600;
-  font-size: 14px;
-  letter-spacing: 0.5px;
-}
-
-.badge {
-  font-size: 10px;
-  padding: 4px 8px;
-  border-radius: 4px;
-  font-weight: 600;
-  text-transform: uppercase;
-}
-
-.badge.success { background: #E8F5E9; color: #2E7D32; }
-.badge.processing { background: #FF5722; color: #FFF; }
-.badge.pending { background: #F5F5F5; color: #999; }
-.badge.accent { background: #E3F2FD; color: #1565C0; }
-
-.card-content {
-  /* No extra padding - uses step-card's padding */
-}
-
-.api-note {
-  font-family: 'JetBrains Mono', monospace;
-  font-size: 10px;
-  color: #999;
-  margin-bottom: 8px;
-}
-
-.description {
-  font-size: 12px;
-  color: #666;
-  line-height: 1.5;
-  margin-bottom: 16px;
-}
-
-/* Action Section */
-.action-section {
-  margin-top: 16px;
-}
-
-.action-btn {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  padding: 12px 24px;
-  font-size: 14px;
-  font-weight: 600;
-  border: none;
-  border-radius: 6px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-}
-
-.action-btn.primary {
-  background: #000;
-  color: #FFF;
-}
-
-.action-btn.primary:hover:not(:disabled) {
-  opacity: 0.8;
-}
-
-.action-btn.secondary {
-  background: #F5F5F5;
-  color: #333;
-}
-
-.action-btn.secondary:hover:not(:disabled) {
-  background: #E5E5E5;
-}
-
-.action-btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.action-group {
-  display: flex;
-  gap: 12px;
-  margin-top: 16px;
-}
-
-.action-group.dual {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-}
-
-.action-group.dual .action-btn {
-  width: 100%;
-}
-
-/* Info Card */
-.info-card {
-  background: #F5F5F5;
-  border-radius: 6px;
-  padding: 16px;
-  margin-top: 16px;
-}
-
-.info-row {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 8px 0;
-  border-bottom: 1px dashed #E0E0E0;
-}
-
-.info-row:last-child {
-  border-bottom: none;
-}
-
-.info-label {
-  font-size: 12px;
-  color: #666;
-}
-
-.info-value {
-  font-size: 13px;
-  font-weight: 500;
-}
-
-.info-value.mono {
-  font-family: 'JetBrains Mono', monospace;
-  font-size: 12px;
-}
-
-/* Stats Grid */
-.stats-grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
   gap: 12px;
-  background: #F9F9F9;
-  padding: 16px;
-  border-radius: 6px;
-}
-
-.stat-card {
-  text-align: center;
-}
-
-.stat-value {
-  display: block;
-  font-size: 20px;
-  font-weight: 700;
-  color: #000;
-  font-family: 'JetBrains Mono', monospace;
 }
 
-.stat-label {
-  font-size: 9px;
-  color: #999;
-  text-transform: uppercase;
-  margin-top: 4px;
-  display: block;
-}
-
-/* Profiles Preview */
-.profiles-preview {
-  margin-top: 20px;
-  border-top: 1px solid #E5E5E5;
-  padding-top: 16px;
-}
-
-.preview-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 12px;
-}
-
-.preview-title {
-  font-size: 12px;
-  font-weight: 600;
-  color: #666;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
-
-.profiles-list {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 12px;
-  max-height: 320px;
-  overflow-y: auto;
-  padding-right: 4px;
-}
-
-.profiles-list::-webkit-scrollbar {
-  width: 4px;
-}
-
-.profiles-list::-webkit-scrollbar-thumb {
-  background: #DDD;
-  border-radius: 2px;
-}
-
-.profiles-list::-webkit-scrollbar-thumb:hover {
-  background: #CCC;
-}
-
-.profile-card {
-  background: #FAFAFA;
-  border: 1px solid #E5E5E5;
-  border-radius: 6px;
-  padding: 14px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-}
-
-.profile-card:hover {
-  border-color: #999;
-  background: #FFF;
-}
-
-.profile-header {
-  display: flex;
-  align-items: baseline;
-  gap: 8px;
-  margin-bottom: 6px;
-}
-
-.profile-realname {
-  font-size: 14px;
-  font-weight: 700;
-  color: #000;
-}
-
-.profile-username {
-  font-family: 'JetBrains Mono', monospace;
-  font-size: 11px;
-  color: #999;
-}
-
-.profile-meta {
-  margin-bottom: 8px;
-}
-
-.profile-profession {
-  font-size: 11px;
-  color: #666;
-  background: #F0F0F0;
-  padding: 2px 8px;
-  border-radius: 3px;
-}
-
-.profile-bio {
-  font-size: 12px;
-  color: #444;
-  line-height: 1.6;
-  margin: 0 0 10px 0;
-  display: -webkit-box;
-  -webkit-line-clamp: 3;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-
-.profile-topics {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-}
-
-.topic-tag {
-  font-size: 10px;
-  color: #1565C0;
-  background: #E3F2FD;
-  padding: 2px 8px;
-  border-radius: 10px;
-}
-
-.topic-more {
-  font-size: 10px;
-  color: #999;
-  padding: 2px 6px;
-}
-
-/* Config Preview */
-/* Config Detail Panel */
-.config-detail-panel {
-  margin-top: 16px;
-}
-
-.config-block {
-  margin-top: 16px;
-  border-top: 1px solid #E5E5E5;
-  padding-top: 12px;
-}
-
-.config-block:first-child {
-  margin-top: 0;
-  border-top: none;
-  padding-top: 0;
-}
-
-.config-block-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 12px;
-}
-
-.config-block-title {
-  font-size: 12px;
-  font-weight: 600;
-  color: #666;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
-
-.config-block-badge {
-  font-family: 'JetBrains Mono', monospace;
-  font-size: 11px;
-  background: #F1F5F9;
-  color: #475569;
-  padding: 2px 8px;
-  border-radius: 10px;
-}
-
-/* Config Grid */
-.config-grid {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: 12px;
-}
-
-.config-item {
-  background: #F9F9F9;
-  padding: 12px 14px;
-  border-radius: 6px;
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.config-item-label {
-  font-size: 11px;
-  color: #94A3B8;
-}
-
-.config-item-value {
-  font-family: 'JetBrains Mono', monospace;
-  font-size: 16px;
-  font-weight: 600;
-  color: #1E293B;
-}
-
-/* Time Periods */
-.time-periods {
-  margin-top: 12px;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.period-item {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 8px 12px;
-  background: #F9F9F9;
-  border-radius: 6px;
-}
-
-.period-label {
-  font-size: 12px;
-  font-weight: 500;
-  color: #64748B;
-  min-width: 70px;
-}
-
-.period-hours {
-  font-family: 'JetBrains Mono', monospace;
-  font-size: 11px;
-  color: #475569;
-  flex: 1;
-}
-
-.period-multiplier {
-  font-family: 'JetBrains Mono', monospace;
-  font-size: 11px;
-  font-weight: 600;
-  color: #6366F1;
-  background: #EEF2FF;
-  padding: 2px 6px;
-  border-radius: 4px;
-}
-
-/* Agents Cards */
-.agents-cards {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 12px;
-  max-height: 400px;
-  overflow-y: auto;
-  padding-right: 4px;
-}
-
-.agents-cards::-webkit-scrollbar {
-  width: 4px;
-}
-
-.agents-cards::-webkit-scrollbar-thumb {
-  background: #DDD;
-  border-radius: 2px;
-}
-
-.agents-cards::-webkit-scrollbar-thumb:hover {
-  background: #CCC;
-}
-
-.agent-card {
-  background: #F9F9F9;
-  border: 1px solid #E5E5E5;
-  border-radius: 6px;
-  padding: 14px;
-  transition: all 0.2s ease;
-}
-
-.agent-card:hover {
-  border-color: #999;
-  background: #FFF;
-}
-
-/* Agent Card Header */
-.agent-card-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  margin-bottom: 14px;
-  padding-bottom: 12px;
-  border-bottom: 1px solid #F1F5F9;
-}
-
-.agent-identity {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-
-.agent-id {
-  font-family: 'JetBrains Mono', monospace;
-  font-size: 10px;
-  color: #94A3B8;
-}
-
-.agent-name {
-  font-size: 14px;
-  font-weight: 600;
-  color: #1E293B;
-}
-
-.agent-tags {
-  display: flex;
-  gap: 6px;
-}
-
-.agent-type {
-  font-size: 10px;
-  color: #64748B;
-  background: #F1F5F9;
-  padding: 2px 8px;
-  border-radius: 4px;
-}
-
-.agent-stance {
-  font-size: 10px;
-  font-weight: 500;
-  text-transform: uppercase;
-  padding: 2px 8px;
-  border-radius: 4px;
-}
-
-.stance-neutral {
-  background: #F1F5F9;
-  color: #64748B;
-}
-
-.stance-supportive {
-  background: #DCFCE7;
-  color: #16A34A;
-}
-
-.stance-opposing {
-  background: #FEE2E2;
-  color: #DC2626;
-}
-
-.stance-observer {
-  background: #FEF3C7;
-  color: #D97706;
-}
-
-/* Agent Timeline */
-.agent-timeline {
-  margin-bottom: 14px;
-}
-
-.timeline-label {
-  display: block;
-  font-size: 10px;
-  color: #94A3B8;
-  margin-bottom: 6px;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-}
-
-.mini-timeline {
-  display: flex;
-  gap: 2px;
-  height: 16px;
-  background: #F8FAFC;
-  border-radius: 4px;
-  padding: 3px;
-}
-
-.timeline-hour {
-  flex: 1;
-  background: #E2E8F0;
-  border-radius: 2px;
-  transition: all 0.2s;
-}
-
-.timeline-hour.active {
-  background: linear-gradient(180deg, #6366F1, #818CF8);
-}
-
-.timeline-marks {
-  display: flex;
-  justify-content: space-between;
-  margin-top: 4px;
-  font-family: 'JetBrains Mono', monospace;
-  font-size: 9px;
-  color: #94A3B8;
-}
-
-/* Agent Params */
-.agent-params {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-
-.param-group {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 8px;
-}
-
-.param-item {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-
-.param-item .param-label {
-  font-size: 10px;
-  color: #94A3B8;
-}
-
-.param-item .param-value {
-  font-family: 'JetBrains Mono', monospace;
-  font-size: 12px;
-  font-weight: 600;
-  color: #475569;
-}
-
-.param-value.with-bar {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.mini-bar {
-  height: 4px;
-  background: linear-gradient(90deg, #6366F1, #A855F7);
-  border-radius: 2px;
-  min-width: 4px;
-  max-width: 40px;
-}
-
-.param-value.positive {
-  color: #16A34A;
-}
-
-.param-value.negative {
-  color: #DC2626;
-}
-
-.param-value.neutral {
-  color: #64748B;
-}
-
-.param-value.highlight {
-  color: #6366F1;
-}
-
-/* Platforms Grid */
-.platforms-grid {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 12px;
-}
-
-.platform-card {
-  background: #F9F9F9;
-  padding: 14px;
-  border-radius: 6px;
-}
-
-.platform-card-header {
-  margin-bottom: 10px;
-  padding-bottom: 8px;
-  border-bottom: 1px solid #E5E5E5;
-}
-
-.platform-name {
-  font-size: 13px;
-  font-weight: 600;
-  color: #333;
-}
-
-.platform-params {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.param-row {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.param-label {
-  font-size: 12px;
-  color: #64748B;
-}
-
-.param-value {
-  font-family: 'JetBrains Mono', monospace;
-  font-size: 12px;
-  font-weight: 600;
-  color: #1E293B;
-}
-
-/* Reasoning Content */
-.reasoning-content {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-
-.reasoning-item {
-  padding: 12px 14px;
-  background: #F9F9F9;
-  border-radius: 6px;
-}
-
-.reasoning-text {
-  font-size: 13px;
-  color: #555;
-  line-height: 1.7;
-  margin: 0;
-}
-
-/* Profile Modal */
-.profile-modal-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.6);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1000;
-  backdrop-filter: blur(4px);
-}
-
-.profile-modal {
-  background: #FFF;
-  border-radius: 16px;
-  width: 90%;
-  max-width: 600px;
-  max-height: 85vh;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
-}
-
-.modal-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  padding: 24px;
-  background: #FFF;
-  border-bottom: 1px solid #F0F0F0;
-}
-
-.modal-header-info {
-  flex: 1;
-}
-
-.modal-name-row {
-  display: flex;
-  align-items: baseline;
-  gap: 10px;
-  margin-bottom: 8px;
-}
-
-.modal-realname {
-  font-size: 20px;
-  font-weight: 700;
-  color: #000;
-}
-
-.modal-username {
-  font-family: 'JetBrains Mono', monospace;
-  font-size: 13px;
-  color: #999;
-}
-
-.modal-profession {
-  font-size: 12px;
-  color: #666;
-  background: #F5F5F5;
-  padding: 4px 10px;
-  border-radius: 4px;
-  display: inline-block;
-  font-weight: 500;
-}
-
-.close-btn {
-  width: 32px;
-  height: 32px;
-  border: none;
-  background: none;
-  color: #999;
-  border-radius: 50%;
-  font-size: 24px;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  line-height: 1;
-  transition: color 0.2s;
-  padding: 0;
-}
-
-.close-btn:hover {
-  color: #333;
-}
-
-.modal-body {
-  padding: 24px;
-  overflow-y: auto;
-  flex: 1;
-}
-
-/* 基本信息网格 */
-.modal-info-grid {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 24px 16px;
-  margin-bottom: 32px;
-  padding: 0;
-  background: transparent;
-  border-radius: 0;
-}
-
-.info-item {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.info-label {
-  font-size: 11px;
-  color: #999;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  font-weight: 600;
-}
-
-.info-value {
-  font-size: 15px;
-  font-weight: 600;
-  color: #333;
-}
-
-.info-value.mbti {
-  font-family: 'JetBrains Mono', monospace;
-  color: #FF5722;
-}
-
-/* 模块区域 */
-.modal-section {
-  margin-bottom: 28px;
-}
-
-.section-label {
-  display: block;
-  font-size: 11px;
-  font-weight: 600;
-  color: #999;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  margin-bottom: 12px;
-}
-
-.section-bio {
-  font-size: 14px;
-  color: #333;
-  line-height: 1.6;
-  margin: 0;
-  padding: 16px;
-  background: #F9F9F9;
-  border-radius: 6px;
-  border-left: 3px solid #E0E0E0;
-}
-
-/* 话题标签 */
-.topics-grid {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-}
-
-.topic-item {
-  font-size: 11px;
-  color: #1565C0;
-  background: #E3F2FD;
-  padding: 4px 10px;
-  border-radius: 12px;
-  transition: all 0.2s;
-  border: none;
-}
-
-.topic-item:hover {
-  background: #BBDEFB;
-  color: #0D47A1;
-}
-
-/* 详细人设 */
-.persona-dimensions {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 12px;
-  margin-bottom: 16px;
-}
-
-.dimension-card {
-  background: #F8F9FA;
-  padding: 12px;
-  border-radius: 6px;
-  border-left: 3px solid #DDD;
-  transition: all 0.2s;
-}
-
-.dimension-card:hover {
-  background: #F0F0F0;
-  border-left-color: #999;
-}
-
-.dim-title {
-  display: block;
-  font-size: 12px;
-  font-weight: 700;
-  color: #333;
-  margin-bottom: 4px;
-}
-
-.dim-desc {
-  display: block;
-  font-size: 10px;
-  color: #888;
-  line-height: 1.4;
-}
-
-.persona-content {
-  max-height: none;
-  overflow: visible;
-  padding: 0;
-  background: transparent;
-  border: none;
-  border-radius: 0;
-}
-
-.persona-content::-webkit-scrollbar {
-  width: 4px;
-}
-
-.persona-content::-webkit-scrollbar-thumb {
-  background: #DDD;
-  border-radius: 2px;
-}
-
-.section-persona {
-  font-size: 13px;
-  color: #555;
-  line-height: 1.8;
-  margin: 0;
-  text-align: justify;
-}
-
-/* System Logs */
-.system-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: #888;
-}
-
-.log-content {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  height: 80px; /* Approx 4 lines visible */
-  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: #666;
-  min-width: 75px;
-}
-
-.log-msg {
-  color: #CCC;
-  word-break: break-all;
-}
-
-/* Spinner */
-.spinner-sm {
-  width: 16px;
-  height: 16px;
-  border: 2px solid #E5E5E5;
-  border-top-color: #FF5722;
-  border-radius: 50%;
-  animation: spin 0.8s linear infinite;
-}
-
-@keyframes spin {
-  to { transform: rotate(360deg); }
-}
-/* Orchestration Content */
-.orchestration-content {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-  margin-top: 16px;
-}
-
-.box-label {
-  display: block;
-  font-size: 12px;
-  font-weight: 600;
-  color: #666;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  margin-bottom: 12px;
-}
-
-.narrative-box {
-  background: #FFFFFF;
-  padding: 20px 24px;
-  border-radius: 12px;
-  border: 1px solid #EEF2F6;
-  box-shadow: 0 4px 24px rgba(0,0,0,0.03);
-  transition: all 0.3s ease;
-}
-
-.narrative-box .box-label {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  color: #666;
-  font-size: 13px;
-  letter-spacing: 0.5px;
-  margin-bottom: 12px;
-  font-weight: 600;
-}
-
-.special-icon {
-  filter: drop-shadow(0 2px 4px rgba(255, 87, 34, 0.2));
-  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
-}
-
-.narrative-box:hover .special-icon {
-  transform: rotate(180deg);
-}
-
-.narrative-text {
-  font-family: 'Inter', 'Noto Sans SC', system-ui, sans-serif;
-  font-size: 14px;
-  color: #334155;
-  line-height: 1.8;
-  margin: 0;
-  text-align: justify;
-  letter-spacing: 0.01em;
-}
-
-.topics-section {
-  background: #FFF;
-}
-
-.hot-topics-grid {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-}
-
-.hot-topic-tag {
-  font-size: 12px;
-  color:rgba(255, 86, 34, 0.88);
-  background: #FFF3E0;
-  padding: 4px 10px;
-  border-radius: 12px;
-  font-weight: 500;
-}
-
-.hot-topic-more {
-  font-size: 11px;
-  color: #999;
-  padding: 4px 6px;
-}
-
-.initial-posts-section {
-  border-top: 1px solid #EAEAEA;
-  padding-top: 16px;
-}
-
-.posts-timeline {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-  padding-left: 8px;
-  border-left: 2px solid #F0F0F0;
-  margin-top: 12px;
-}
-
-.timeline-item {
-  position: relative;
-  padding-left: 20px;
-}
-
-.timeline-marker {
-  position: absolute;
-  left: 0;
-  top: 14px;
-  width: 12px;
-  height: 2px;
-  background: #DDD;
-}
-
-.timeline-content {
-  background: #F9F9F9;
-  padding: 12px;
-  border-radius: 6px;
-  border: 1px solid #EEE;
-}
-
-.post-header {
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: 6px;
-}
-
-.post-role {
-  font-size: 11px;
-  font-weight: 700;
-  color: #333;
-  text-transform: uppercase;
-}
-
-.post-agent-info {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.post-id,
-.post-username {
-  font-family: 'JetBrains Mono', monospace;
-  font-size: 10px;
-  color: #666;
-  line-height: 1;
-  vertical-align: baseline;
-}
-
-.post-username {
-  margin-right: 6px;
-}
-
-.post-text {
-  font-size: 12px;
-  color: #555;
-  line-height: 1.5;
-  margin: 0;
-}
-
-/* 模拟轮数配置样式 */
-.rounds-config-section {
-  margin: 24px 0;
-  padding-top: 24px;
-  border-top: 1px solid #EAEAEA;
-}
-
-.rounds-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 20px;
-}
-
-.header-left {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.section-title {
-  font-size: 14px;
-  font-weight: 600;
-  color: #1E293B;
-}
-
-.section-desc {
-  font-size: 12px;
-  color: #94A3B8;
-}
-
-.desc-highlight {
-  font-family: 'JetBrains Mono', monospace;
-  font-weight: 600;
-  color: #1E293B;
-  background: #F1F5F9;
-  padding: 1px 6px;
-  border-radius: 4px;
-  margin: 0 2px;
-}
-
-/* Switch Control */
-.switch-control {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  cursor: pointer;
-  padding: 4px 8px 4px 4px;
-  border-radius: 20px;
-  transition: background 0.2s;
-}
-
-.switch-control:hover {
-  background: #F8FAFC;
-}
-
-.switch-control input {
-  display: none;
-}
-
-.switch-track {
-  width: 36px;
-  height: 20px;
-  background: #E2E8F0;
-  border-radius: 10px;
-  position: relative;
-  transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
-}
-
-.switch-track::after {
-  content: '';
-  position: absolute;
-  left: 2px;
-  top: 2px;
-  width: 16px;
-  height: 16px;
-  background: #FFF;
-  border-radius: 50%;
-  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
-  transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
-}
-
-.switch-control input:checked + .switch-track {
-  background: #000;
-}
-
-.switch-control input:checked + .switch-track::after {
-  transform: translateX(16px);
-}
-
-.switch-label {
-  font-size: 12px;
-  font-weight: 500;
-  color: #64748B;
-}
-
-.switch-control input:checked ~ .switch-label {
-  color: #1E293B;
-}
-
-/* Slider Content */
-.rounds-content {
-  animation: fadeIn 0.3s ease;
-}
-
-.slider-display {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-end;
-  margin-bottom: 16px;
-}
-
-.slider-main-value {
-  display: flex;
-  align-items: baseline;
-  gap: 4px;
-}
-
-.val-num {
-  font-family: 'JetBrains Mono', monospace;
-  font-size: 24px;
-  font-weight: 700;
-  color: #000;
-}
-
-.val-unit {
-  font-size: 12px;
-  color: #666;
-  font-weight: 500;
-}
-
-.slider-meta-info {
-  font-family: 'JetBrains Mono', monospace;
-  font-size: 11px;
-  color: #64748B;
-  background: #F1F5F9;
-  padding: 4px 8px;
-  border-radius: 4px;
-}
-
-.range-wrapper {
-  position: relative;
-  padding: 0 2px;
-}
-
-.minimal-slider {
-  -webkit-appearance: none;
-  width: 100%;
-  height: 4px;
-  background: #E2E8F0;
-  border-radius: 2px;
-  outline: none;
-  background-image: linear-gradient(#000, #000);
-  background-size: var(--percent, 0%) 100%;
-  background-repeat: no-repeat;
-  cursor: pointer;
-}
-
-.minimal-slider::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  width: 16px;
-  height: 16px;
-  border-radius: 50%;
-  background: #FFF;
-  border: 2px solid #000;
-  cursor: pointer;
-  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
-  transition: transform 0.1s;
-  margin-top: -6px; /* Center thumb */
-}
-
-.minimal-slider::-webkit-slider-thumb:hover {
-  transform: scale(1.1);
-}
-
-.minimal-slider::-webkit-slider-runnable-track {
-  height: 4px;
-  border-radius: 2px;
-}
-
-.range-marks {
-  display: flex;
-  justify-content: space-between;
-  margin-top: 8px;
-  font-family: 'JetBrains Mono', monospace;
-  font-size: 10px;
-  color: #94A3B8;
-  position: relative;
-}
-
-.mark-recommend {
-  cursor: pointer;
-  transition: color 0.2s;
-  position: relative;
-}
-
-.mark-recommend:hover {
-  color: #000;
-}
-
-.mark-recommend.active {
-  color: #000;
-  font-weight: 600;
-}
-
-.mark-recommend::after {
-  content: '';
-  position: absolute;
-  top: -12px;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 1px;
-  height: 4px;
-  background: #CBD5E1;
-}
-
-/* Auto Info */
-.auto-info-card {
-  display: flex;
-  align-items: center;
-  gap: 24px;
-  background: #F8FAFC;
-  padding: 16px 20px;
-  border-radius: 8px;
-}
-
-.auto-value {
-  display: flex;
-  flex-direction: row;
-  align-items: baseline;
-  gap: 4px;
-  padding-right: 24px;
-  border-right: 1px solid #E2E8F0;
-}
-
-.auto-content {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  justify-content: center;
-}
-
-.auto-meta-row {
-  display: flex;
-  align-items: center;
-}
-
-.duration-badge {
-  display: inline-flex;
-  align-items: center;
-  gap: 5px;
-  font-family: 'JetBrains Mono', monospace;
-  font-size: 11px;
-  font-weight: 500;
-  color: #64748B;
-  background: #FFFFFF;
-  border: 1px solid #E2E8F0;
-  padding: 3px 8px;
-  border-radius: 6px;
-  box-shadow: 0 1px 2px rgba(0,0,0,0.02);
-}
-
-.auto-desc {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-
-.auto-desc p {
-  margin: 0;
-  font-size: 13px;
-  color: #64748B;
-  line-height: 1.5;
-}
-
-.highlight-tip {
-  margin-top: 4px !important;
-  font-size: 12px !important;
-  color: #000 !important;
-  font-weight: 500;
-  cursor: pointer;
-}
-
-.highlight-tip:hover {
-  text-decoration: underline;
-}
-
-@keyframes fadeIn {
-  from { opacity: 0; transform: translateY(4px); }
-  to { opacity: 1; transform: translateY(0); }
-}
-
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.2s ease;
-}
-
-.fade-enter-from,
-.fade-leave-to {
-  opacity: 0;
-}
-
-/* Modal Transition */
-.modal-enter-active,
-.modal-leave-active {
-  transition: opacity 0.3s ease;
-}
-
-.modal-enter-from,
-.modal-leave-to {
-  opacity: 0;
-}
-
-.modal-enter-active .profile-modal {
-  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
-}
-
-.modal-leave-active .profile-modal {
-  transition: all 0.3s ease-in;
-}
-
-.modal-enter-from .profile-modal,
-.modal-leave-to .profile-modal {
-  transform: scale(0.95) translateY(10px);
-  opacity: 0;
-}
+.scroll-container::-webkit-scrollbar { width: 4px; }
+.scroll-container::-webkit-scrollbar-thumb { background: #DDD; border-radius: 2px; }
 </style>
diff --git a/frontend/src/components/step2/AgentProfilesSection.vue b/frontend/src/components/step2/AgentProfilesSection.vue
new file mode 100644
index 0000000000..15d90ba4ef
--- /dev/null
+++ b/frontend/src/components/step2/AgentProfilesSection.vue
@@ -0,0 +1,313 @@
+<template>
+  <div class="setup-card" :class="cardClass">
+    <div class="card-head">
+      <div class="card-label">
+        <span class="card-num">02</span>
+        <span class="card-title">{{ $t('step2.generateAgentPersona') }}</span>
+      </div>
+      <span class="card-badge" :class="badgeClass">
+        <template v-if="phase > 1">{{ $t('common.completed') }}</template>
+        <template v-else-if="phase === 1">{{ prepareProgress }}%</template>
+        <template v-else>{{ $t('common.pending') }}</template>
+      </span>
+    </div>
+
+    <div class="card-body">
+      <p class="api-route">POST /api/simulation/prepare</p>
+      <p class="card-desc">{{ $t('step2.generateAgentPersonaDesc') }}</p>
+
+      <!-- Stats quando há perfis -->
+      <div v-if="profiles.length > 0" class="stats-row">
+        <div class="stat-item">
+          <span class="stat-num">{{ profiles.length }}</span>
+          <span class="stat-lbl">{{ $t('step2.currentAgentCount') }}</span>
+        </div>
+        <div class="stat-sep" />
+        <div class="stat-item">
+          <span class="stat-num">{{ expectedTotal || '?' }}</span>
+          <span class="stat-lbl">{{ $t('step2.expectedAgentTotal') }}</span>
+        </div>
+        <div class="stat-sep" />
+        <div class="stat-item">
+          <span class="stat-num">{{ totalTopicsCount }}</span>
+          <span class="stat-lbl">{{ $t('step2.relatedTopicsCount') }}</span>
+        </div>
+      </div>
+
+      <!-- Progress bar durante geração -->
+      <div v-if="phase === 1 && prepareProgress > 0" class="progress-bar-wrap">
+        <div class="progress-bar-track">
+          <div class="progress-bar-fill" :style="{ width: prepareProgress + '%' }" />
+        </div>
+        <span class="progress-pct">{{ prepareProgress }}%</span>
+      </div>
+
+      <!-- Lista de personas -->
+      <div v-if="profiles.length > 0" class="profiles-section">
+        <div class="profiles-header">
+          <span class="profiles-label">{{ $t('step2.generatedAgentPersonas') }}</span>
+          <button
+            v-if="profiles.length > 6"
+            class="btn-toggle-all"
+            @click="showAll = !showAll"
+          >
+            {{ showAll ? $t('step2.showLess') : $t('step2.showAll', { count: profiles.length }) }}
+          </button>
+        </div>
+
+        <div class="profiles-grid">
+          <div
+            v-for="(profile, idx) in visibleProfiles"
+            :key="idx"
+            class="profile-card"
+            @click="$emit('select-profile', profile)"
+            tabindex="0"
+          >
+            <div class="profile-top">
+              <div class="profile-name-block">
+                <span class="profile-realname">{{ profile.username || 'Unknown' }}</span>
+                <span class="profile-handle">@{{ profile.name || `agent_${idx}` }}</span>
+              </div>
+              <span class="profile-type-tag" v-if="profile.entity_type">{{ profile.entity_type }}</span>
+            </div>
+            <span class="profile-profession">{{ profile.profession || $t('step2.unknownProfession') }}</span>
+            <p class="profile-bio">{{ truncate(profile.bio || $t('step2.noBio'), 90) }}</p>
+            <div v-if="profile.interested_topics?.length" class="profile-topics">
+              <span
+                v-for="topic in profile.interested_topics.slice(0, 3)"
+                :key="topic"
+                class="topic-tag"
+              >{{ topic }}</span>
+              <span v-if="profile.interested_topics.length > 3" class="topic-more">
+                +{{ profile.interested_topics.length - 3 }}
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+  phase:          { type: Number, required: true },
+  profiles:       { type: Array,  default: () => [] },
+  prepareProgress:{ type: Number, default: 0 },
+  expectedTotal:  { type: Number, default: null },
+})
+
+defineEmits(['select-profile'])
+
+const showAll = ref(false)
+
+const cardClass = computed(() => ({
+  'card--pending':   props.phase < 1,
+  'card--active':    props.phase === 1,
+  'card--completed': props.phase > 1,
+}))
+
+const badgeClass = computed(() => {
+  if (props.phase > 1) return 'badge--done'
+  if (props.phase === 1) return 'badge--active'
+  return 'badge--pending'
+})
+
+const visibleProfiles = computed(() =>
+  showAll.value ? props.profiles : props.profiles.slice(0, 6)
+)
+
+const totalTopicsCount = computed(() =>
+  props.profiles.reduce((sum, p) => sum + (p.interested_topics?.length || 0), 0)
+)
+
+const truncate = (str, n) => str && str.length > n ? str.slice(0, n) + '…' : str
+</script>
+
+<style scoped>
+.setup-card {
+  background: #fff;
+  border: 1px solid #EBEBEB;
+  border-radius: 10px;
+  overflow: hidden;
+  transition: border-color 0.2s, opacity 0.2s;
+}
+.setup-card.card--active    { border-color: #D0D0D0; }
+.setup-card.card--completed { border-color: #E8E8E8; opacity: 0.9; }
+.setup-card.card--pending   { opacity: 0.55; }
+
+.card-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 14px 18px;
+  border-bottom: 1px solid #F0F0F0;
+}
+.card-label { display: flex; align-items: center; gap: 10px; }
+.card-num {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 11px;
+  font-weight: 700;
+  color: #CCCCCC;
+}
+.card-title { font-size: 13px; font-weight: 700; color: #1A1A1A; }
+
+.card-badge {
+  font-size: 10.5px;
+  font-weight: 700;
+  padding: 3px 10px;
+  border-radius: 20px;
+}
+.badge--done    { background: #F0FBF2; color: #2A7D3A; }
+.badge--active  { background: #FFF3EE; color: #D44B00; }
+.badge--pending { background: #F5F5F5; color: #AAAAAA; }
+
+.card-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
+
+.api-route {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 10px;
+  color: #AAAAAA;
+  margin: 0;
+}
+
+.card-desc {
+  font-size: 12.5px;
+  color: #555;
+  margin: 0;
+  line-height: 1.55;
+}
+
+/* Stats */
+.stats-row {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  background: #F8F8F8;
+  border-radius: 8px;
+  padding: 12px 16px;
+}
+.stat-item { display: flex; flex-direction: column; gap: 2px; }
+.stat-num {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 20px;
+  font-weight: 700;
+  color: #1A1A1A;
+  line-height: 1;
+}
+.stat-lbl { font-size: 10.5px; color: #888; font-weight: 500; }
+.stat-sep { width: 1px; height: 28px; background: #E5E5E5; }
+
+/* Progress */
+.progress-bar-wrap { display: flex; align-items: center; gap: 10px; }
+.progress-bar-track {
+  flex: 1;
+  height: 4px;
+  background: #EFEFEF;
+  border-radius: 2px;
+  overflow: hidden;
+}
+.progress-bar-fill {
+  height: 100%;
+  background: #FF5722;
+  border-radius: 2px;
+  transition: width 0.4s ease;
+}
+.progress-pct {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 11px;
+  color: #888;
+  flex-shrink: 0;
+}
+
+/* Profiles section */
+.profiles-section { display: flex; flex-direction: column; gap: 10px; }
+.profiles-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.profiles-label {
+  font-size: 11px;
+  font-weight: 700;
+  color: #AAAAAA;
+  text-transform: uppercase;
+  letter-spacing: 0.6px;
+}
+.btn-toggle-all {
+  font-size: 11px;
+  color: #666;
+  background: none;
+  border: none;
+  cursor: pointer;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+/* Profile grid */
+.profiles-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  gap: 8px;
+}
+
+.profile-card {
+  background: #FAFAFA;
+  border: 1px solid #EFEFEF;
+  border-radius: 8px;
+  padding: 12px 13px;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  transition: border-color 0.15s, background 0.15s;
+}
+.profile-card:hover { background: #F3F3F3; border-color: #E0E0E0; }
+
+.profile-top {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 6px;
+}
+.profile-name-block { display: flex; flex-direction: column; gap: 1px; }
+.profile-realname { font-size: 12.5px; font-weight: 700; color: #1A1A1A; }
+.profile-handle { font-size: 10.5px; color: #AAAAAA; font-family: 'JetBrains Mono', monospace; }
+
+.profile-type-tag {
+  font-size: 9.5px;
+  font-weight: 700;
+  color: #666;
+  background: #EDEDED;
+  padding: 2px 6px;
+  border-radius: 3px;
+  flex-shrink: 0;
+  white-space: nowrap;
+}
+
+.profile-profession { font-size: 11px; color: #888; font-weight: 500; }
+
+.profile-bio {
+  font-size: 11.5px;
+  color: #555;
+  line-height: 1.5;
+  margin: 0;
+}
+
+.profile-topics {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  margin-top: 2px;
+}
+.topic-tag {
+  font-size: 10px;
+  background: #EDEDED;
+  color: #555;
+  padding: 2px 7px;
+  border-radius: 3px;
+}
+.topic-more { font-size: 10px; color: #AAAAAA; align-self: center; }
+</style>
diff --git a/frontend/src/components/step2/OrchestrationSection.vue b/frontend/src/components/step2/OrchestrationSection.vue
new file mode 100644
index 0000000000..c38e24e8d8
--- /dev/null
+++ b/frontend/src/components/step2/OrchestrationSection.vue
@@ -0,0 +1,165 @@
+<template>
+  <div class="setup-card" :class="cardClass">
+    <div class="card-head">
+      <div class="card-label">
+        <span class="card-num">04</span>
+        <span class="card-title">{{ $t('step2.initialActivation') }}</span>
+      </div>
+      <span class="card-badge" :class="badgeClass">
+        <template v-if="phase > 3">{{ $t('common.completed') }}</template>
+        <template v-else-if="phase === 3">{{ $t('step2.orchestrating') }}</template>
+        <template v-else>{{ $t('common.pending') }}</template>
+      </span>
+    </div>
+
+    <div class="card-body">
+      <p class="api-route">POST /api/simulation/prepare</p>
+      <p class="card-desc">{{ $t('step2.initialActivationDesc') }}</p>
+
+      <template v-if="eventConfig">
+        <!-- Narrative direction -->
+        <div class="narrative-block">
+          <span class="block-label">{{ $t('step2.narrativeDirection') }}</span>
+          <p class="narrative-text">{{ eventConfig.narrative_direction }}</p>
+        </div>
+
+        <!-- Hot topics -->
+        <div class="topics-block" v-if="eventConfig.hot_topics?.length">
+          <span class="block-label">{{ $t('step2.initialHotTopics') }}</span>
+          <div class="hot-topics">
+            <span v-for="topic in eventConfig.hot_topics" :key="topic" class="hot-tag">
+              # {{ topic }}
+            </span>
+          </div>
+        </div>
+
+        <!-- Initial posts timeline -->
+        <div class="posts-block" v-if="eventConfig.initial_posts?.length">
+          <span class="block-label">
+            {{ $t('step2.initialActivationSeq', { count: eventConfig.initial_posts.length }) }}
+          </span>
+          <div class="posts-timeline">
+            <div
+              v-for="(post, idx) in eventConfig.initial_posts"
+              :key="idx"
+              class="post-item"
+            >
+              <div class="post-marker" />
+              <div class="post-content">
+                <div class="post-meta">
+                  <span class="post-type">{{ post.poster_type }}</span>
+                  <span class="post-agent">
+                    Agent {{ post.poster_agent_id }}
+                    <span class="post-username">@{{ getAgentUsername(post.poster_agent_id) }}</span>
+                  </span>
+                </div>
+                <p class="post-text">{{ post.content }}</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  phase:            { type: Number,  required: true },
+  simulationConfig: { type: Object,  default: null },
+  profiles:         { type: Array,   default: () => [] },
+})
+
+const cardClass = computed(() => ({
+  'card--pending':   props.phase < 3,
+  'card--active':    props.phase === 3,
+  'card--completed': props.phase > 3,
+}))
+
+const badgeClass = computed(() => {
+  if (props.phase > 3) return 'badge--done'
+  if (props.phase === 3) return 'badge--active'
+  return 'badge--pending'
+})
+
+const eventConfig = computed(() => props.simulationConfig?.event_config || null)
+
+const getAgentUsername = (agentId) => {
+  const profile = props.profiles[agentId]
+  return profile?.name || profile?.username || `agent_${agentId}`
+}
+</script>
+
+<style scoped>
+.setup-card {
+  background: #fff;
+  border: 1px solid #EBEBEB;
+  border-radius: 10px;
+  overflow: hidden;
+  transition: border-color 0.2s, opacity 0.2s;
+}
+.setup-card.card--active    { border-color: #D0D0D0; }
+.setup-card.card--completed { border-color: #E8E8E8; opacity: 0.9; }
+.setup-card.card--pending   { opacity: 0.5; }
+
+.card-head {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 14px 18px; border-bottom: 1px solid #F0F0F0;
+}
+.card-label { display: flex; align-items: center; gap: 10px; }
+.card-num { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; color: #CCCCCC; }
+.card-title { font-size: 13px; font-weight: 700; color: #1A1A1A; }
+
+.card-badge { font-size: 10.5px; font-weight: 700; padding: 3px 10px; border-radius: 20px; }
+.badge--done    { background: #F0FBF2; color: #2A7D3A; }
+.badge--active  { background: #FFF3EE; color: #D44B00; }
+.badge--pending { background: #F5F5F5; color: #AAAAAA; }
+
+.card-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; }
+.api-route { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: #AAAAAA; margin: 0; }
+.card-desc  { font-size: 12.5px; color: #555; margin: 0; line-height: 1.55; }
+
+.block-label {
+  font-size: 10.5px; font-weight: 700; color: #AAAAAA;
+  text-transform: uppercase; letter-spacing: 0.5px;
+}
+
+.narrative-block { display: flex; flex-direction: column; gap: 7px; }
+.narrative-text {
+  font-size: 12.5px; color: #333; line-height: 1.65; margin: 0;
+  background: #F8F8F8; border-radius: 7px; padding: 11px 13px;
+  border-left: 3px solid #FF5722;
+}
+
+.topics-block { display: flex; flex-direction: column; gap: 7px; }
+.hot-topics { display: flex; flex-wrap: wrap; gap: 6px; }
+.hot-tag {
+  font-size: 11.5px; font-weight: 600; color: #333;
+  background: #F0F0F0; padding: 4px 10px; border-radius: 4px;
+}
+
+.posts-block { display: flex; flex-direction: column; gap: 7px; }
+.posts-timeline { display: flex; flex-direction: column; gap: 8px; }
+
+.post-item { display: flex; gap: 10px; align-items: flex-start; }
+.post-marker {
+  width: 7px; height: 7px; border-radius: 50%;
+  background: #D0D0D0; flex-shrink: 0; margin-top: 6px;
+}
+
+.post-content { flex: 1; }
+.post-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
+.post-type {
+  font-size: 9.5px; font-weight: 700; color: #888;
+  text-transform: uppercase; letter-spacing: 0.4px;
+}
+.post-agent { font-size: 11px; color: #555; }
+.post-username { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: #AAAAAA; margin-left: 4px; }
+
+.post-text {
+  font-size: 12px; color: #333; line-height: 1.6; margin: 0;
+  background: #F8F8F8; border-radius: 6px; padding: 8px 10px;
+}
+</style>
diff --git a/frontend/src/components/step2/ProfileDetailPanel.vue b/frontend/src/components/step2/ProfileDetailPanel.vue
new file mode 100644
index 0000000000..8ec2bd8434
--- /dev/null
+++ b/frontend/src/components/step2/ProfileDetailPanel.vue
@@ -0,0 +1,173 @@
+<template>
+  <Transition name="modal">
+    <div v-if="profile" class="modal-overlay" @click.self="$emit('close')">
+      <div class="modal-panel">
+        <!-- Header -->
+        <div class="modal-head">
+          <div class="modal-identity">
+            <span class="modal-realname">{{ profile.username }}</span>
+            <span class="modal-handle">@{{ profile.name }}</span>
+          </div>
+          <div class="modal-head-right">
+            <span class="modal-type-tag" v-if="profile.entity_type">{{ profile.entity_type }}</span>
+            <button class="modal-close" @click="$emit('close')" :aria-label="$t('common.close')">✕</button>
+          </div>
+        </div>
+
+        <!-- Body -->
+        <div class="modal-body">
+          <!-- Profession + bio -->
+          <div class="modal-section">
+            <span class="section-lbl">{{ $t('step2.profileModalProfession') }}</span>
+            <span class="section-val">{{ profile.profession || $t('step2.unknownProfession') }}</span>
+          </div>
+
+          <div class="modal-section" v-if="profile.bio">
+            <span class="section-lbl">{{ $t('step2.profileModalBio') }}</span>
+            <p class="section-bio">{{ profile.bio }}</p>
+          </div>
+
+          <!-- Topics -->
+          <div class="modal-section" v-if="profile.interested_topics?.length">
+            <span class="section-lbl">{{ $t('step2.profileModalTopics') }}</span>
+            <div class="topics-grid">
+              <span v-for="topic in profile.interested_topics" :key="topic" class="topic-chip">
+                {{ topic }}
+              </span>
+            </div>
+          </div>
+
+          <!-- Persona -->
+          <div class="modal-section" v-if="profile.persona">
+            <span class="section-lbl">{{ $t('step2.profileModalPersona') }}</span>
+
+            <div class="persona-dims">
+              <div class="dim-item">
+                <span class="dim-title">{{ $t('step2.personaDimExperience') }}</span>
+                <span class="dim-desc">{{ $t('step2.personaDimExperienceDesc') }}</span>
+              </div>
+              <div class="dim-item">
+                <span class="dim-title">{{ $t('step2.personaDimBehavior') }}</span>
+                <span class="dim-desc">{{ $t('step2.personaDimBehaviorDesc') }}</span>
+              </div>
+              <div class="dim-item">
+                <span class="dim-title">{{ $t('step2.personaDimMemory') }}</span>
+                <span class="dim-desc">{{ $t('step2.personaDimMemoryDesc') }}</span>
+              </div>
+              <div class="dim-item">
+                <span class="dim-title">{{ $t('step2.personaDimSocial') }}</span>
+                <span class="dim-desc">{{ $t('step2.personaDimSocialDesc') }}</span>
+              </div>
+            </div>
+
+            <p class="persona-text">{{ profile.persona }}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </Transition>
+</template>
+
+<script setup>
+defineProps({
+  profile: { type: Object, default: null },
+})
+defineEmits(['close'])
+</script>
+
+<style scoped>
+.modal-overlay {
+  position: fixed; inset: 0; z-index: 500;
+  background: rgba(0, 0, 0, 0.35);
+  display: flex; align-items: center; justify-content: center;
+  padding: 24px;
+}
+
+.modal-panel {
+  background: #fff; border-radius: 12px;
+  width: 100%; max-width: 560px; max-height: 85vh;
+  display: flex; flex-direction: column;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
+  overflow: hidden;
+}
+
+/* Head */
+.modal-head {
+  display: flex; align-items: flex-start; justify-content: space-between;
+  padding: 20px 22px; border-bottom: 1px solid #F0F0F0; flex-shrink: 0;
+}
+.modal-identity { display: flex; flex-direction: column; gap: 3px; }
+.modal-realname { font-size: 17px; font-weight: 800; color: #0A0A0A; }
+.modal-handle {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 12px; color: #AAAAAA;
+}
+
+.modal-head-right { display: flex; align-items: center; gap: 10px; }
+.modal-type-tag {
+  font-size: 10px; font-weight: 700;
+  background: #EDEDED; color: #555; padding: 3px 8px; border-radius: 4px;
+}
+.modal-close {
+  background: none; border: none; cursor: pointer;
+  font-size: 16px; color: #BBBBBB; padding: 2px 6px;
+  transition: color 0.15s;
+}
+.modal-close:hover { color: #333; }
+
+/* Body */
+.modal-body {
+  overflow-y: auto; padding: 20px 22px;
+  display: flex; flex-direction: column; gap: 18px;
+}
+.modal-body::-webkit-scrollbar { width: 4px; }
+.modal-body::-webkit-scrollbar-thumb { background: #DDD; border-radius: 2px; }
+
+.modal-section { display: flex; flex-direction: column; gap: 8px; }
+
+.section-lbl {
+  font-size: 10px; font-weight: 700; color: #BBBBBB;
+  text-transform: uppercase; letter-spacing: 0.7px;
+}
+
+.section-val { font-size: 13px; font-weight: 600; color: #1A1A1A; }
+
+.section-bio {
+  font-size: 12.5px; color: #444; line-height: 1.65;
+  margin: 0;
+}
+
+/* Topics */
+.topics-grid { display: flex; flex-wrap: wrap; gap: 6px; }
+.topic-chip {
+  font-size: 11.5px; color: #444;
+  background: #F0F0F0; padding: 4px 10px; border-radius: 4px;
+}
+
+/* Persona */
+.persona-dims {
+  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 4px;
+}
+.dim-item {
+  background: #F8F8F8; border-radius: 7px; padding: 10px 12px;
+  display: flex; flex-direction: column; gap: 3px;
+}
+.dim-title { font-size: 11px; font-weight: 700; color: #333; }
+.dim-desc  { font-size: 10.5px; color: #888; line-height: 1.4; }
+
+.persona-text {
+  font-size: 12px; color: #444; line-height: 1.7;
+  margin: 0; background: #F8F8F8; border-radius: 7px; padding: 12px 14px;
+}
+
+/* Transitions */
+.modal-enter-active, .modal-leave-active { transition: opacity 0.22s ease; }
+.modal-enter-from, .modal-leave-to { opacity: 0; }
+
+.modal-enter-active .modal-panel,
+.modal-leave-active .modal-panel {
+  transition: transform 0.22s ease;
+}
+.modal-enter-from .modal-panel { transform: scale(0.96) translateY(8px); }
+.modal-leave-to .modal-panel   { transform: scale(0.96) translateY(8px); }
+</style>
diff --git a/frontend/src/components/step2/SetupReadinessSection.vue b/frontend/src/components/step2/SetupReadinessSection.vue
new file mode 100644
index 0000000000..7d5abe22b3
--- /dev/null
+++ b/frontend/src/components/step2/SetupReadinessSection.vue
@@ -0,0 +1,257 @@
+<template>
+  <div class="setup-card" :class="{ 'card--active': phase >= 4, 'card--pending': phase < 4 }">
+    <div class="card-head">
+      <div class="card-label">
+        <span class="card-num">05</span>
+        <span class="card-title">{{ $t('step2.setupComplete') }}</span>
+      </div>
+      <span class="card-badge" :class="phase >= 4 ? 'badge--active' : 'badge--pending'">
+        {{ phase >= 4 ? $t('step1.inProgress') : $t('common.pending') }}
+      </span>
+    </div>
+
+    <div class="card-body">
+      <p class="api-route">POST /api/simulation/start</p>
+      <p class="card-desc">{{ $t('step2.setupCompleteDesc') }}</p>
+
+      <!-- Configuração de rounds — só aparece quando ready -->
+      <div v-if="simulationConfig && autoGeneratedRounds" class="rounds-section">
+        <div class="rounds-head">
+          <div class="rounds-info">
+            <span class="rounds-title">{{ $t('step2.roundsConfig') }}</span>
+            <span class="rounds-desc">
+              {{ $t('step2.roundsConfigDesc', {
+                hours: simulationConfig?.time_config?.total_simulation_hours || '—',
+                minutesPerRound: simulationConfig?.time_config?.minutes_per_round || '—'
+              }) }}
+            </span>
+          </div>
+          <label class="toggle-label">
+            <input type="checkbox" v-model="localCustom" class="toggle-input" />
+            <span class="toggle-track"><span class="toggle-thumb" /></span>
+            <span class="toggle-text">{{ $t('step2.customToggle') }}</span>
+          </label>
+        </div>
+
+        <Transition name="fade" mode="out-in">
+          <div v-if="localCustom" key="custom" class="rounds-body">
+            <div class="rounds-display">
+              <span class="rounds-num">{{ localMaxRounds }}</span>
+              <span class="rounds-unit">{{ $t('step2.roundsUnit') }}</span>
+              <span class="rounds-est">≈ {{ Math.round(localMaxRounds * 0.6) }}min</span>
+            </div>
+            <div class="range-wrap">
+              <input
+                type="range"
+                v-model.number="localMaxRounds"
+                min="10"
+                :max="autoGeneratedRounds"
+                step="5"
+                class="range-input"
+                :style="{ '--fill': fillPct }"
+              />
+              <div class="range-marks">
+                <span>10</span>
+                <span
+                  class="mark-rec"
+                  :class="{ active: localMaxRounds === 40 }"
+                  @click="localMaxRounds = 40"
+                >{{ $t('step2.recommendedRounds', { rounds: 40 }) }}</span>
+                <span>{{ autoGeneratedRounds }}</span>
+              </div>
+            </div>
+          </div>
+
+          <div v-else key="auto" class="rounds-auto">
+            <div class="auto-num">
+              <span class="rounds-num">{{ autoGeneratedRounds }}</span>
+              <span class="rounds-unit">{{ $t('step2.roundsUnit') }}</span>
+            </div>
+            <p class="auto-tip" @click="localCustom = true">
+              {{ $t('step2.customTip') }} →
+            </p>
+          </div>
+        </Transition>
+      </div>
+
+      <!-- Ações -->
+      <div class="action-row">
+        <button class="btn-secondary" @click="$emit('go-back')">
+          ← {{ $t('step2.backToGraphBuild') }}
+        </button>
+        <button
+          class="btn-primary"
+          :disabled="phase < 4"
+          @click="handleStart"
+        >
+          {{ $t('step2.startDualWorldSim') }} →
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch } from 'vue'
+
+const props = defineProps({
+  phase:              { type: Number,  required: true },
+  simulationConfig:   { type: Object,  default: null },
+  autoGeneratedRounds:{ type: Number,  default: null },
+  useCustomRounds:    { type: Boolean, default: false },
+  customMaxRounds:    { type: Number,  default: 40 },
+})
+
+const emit = defineEmits(['go-back', 'start-simulation', 'update:useCustomRounds', 'update:customMaxRounds'])
+
+const localCustom    = ref(props.useCustomRounds)
+const localMaxRounds = ref(props.customMaxRounds)
+
+// Sync child → parent
+watch(localCustom,    (v) => emit('update:useCustomRounds', v))
+watch(localMaxRounds, (v) => emit('update:customMaxRounds', v))
+
+// Sync parent → child (caso o pai mude externamente, ex: remount)
+watch(() => props.useCustomRounds, (v) => { if (v !== localCustom.value) localCustom.value = v })
+watch(() => props.customMaxRounds, (v) => { if (v !== localMaxRounds.value) localMaxRounds.value = v })
+
+// Guard: quando autoGeneratedRounds fica disponível ou muda,
+// clamp localMaxRounds para não exceder o máximo do slider.
+watch(() => props.autoGeneratedRounds, (max) => {
+  if (max !== null && localMaxRounds.value > max) {
+    localMaxRounds.value = max
+  }
+})
+
+const fillPct = computed(() => {
+  if (!props.autoGeneratedRounds) return '0%'
+  return ((localMaxRounds.value - 10) / (props.autoGeneratedRounds - 10)) * 100 + '%'
+})
+
+const handleStart = () => {
+  const params = {}
+  if (localCustom.value) params.maxRounds = localMaxRounds.value
+  emit('start-simulation', params)
+}
+</script>
+
+<style scoped>
+.setup-card {
+  background: #fff;
+  border: 1px solid #EBEBEB;
+  border-radius: 10px;
+  overflow: hidden;
+  transition: border-color 0.2s, opacity 0.2s;
+}
+.setup-card.card--active  { border-color: #CCCCCC; }
+.setup-card.card--pending { opacity: 0.5; }
+
+.card-head {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 14px 18px; border-bottom: 1px solid #F0F0F0;
+}
+.card-label { display: flex; align-items: center; gap: 10px; }
+.card-num { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; color: #CCCCCC; }
+.card-title { font-size: 13px; font-weight: 700; color: #1A1A1A; }
+
+.card-badge { font-size: 10.5px; font-weight: 700; padding: 3px 10px; border-radius: 20px; }
+.badge--active  { background: #FFF3EE; color: #D44B00; }
+.badge--pending { background: #F5F5F5; color: #AAAAAA; }
+
+.card-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 16px; }
+.api-route { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: #AAAAAA; margin: 0; }
+.card-desc  { font-size: 12.5px; color: #555; margin: 0; line-height: 1.55; }
+
+/* Rounds section */
+.rounds-section {
+  background: #F8F8F8; border-radius: 8px; padding: 14px 16px;
+  display: flex; flex-direction: column; gap: 14px;
+}
+.rounds-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
+.rounds-info { display: flex; flex-direction: column; gap: 3px; }
+.rounds-title { font-size: 13px; font-weight: 700; color: #1A1A1A; }
+.rounds-desc  { font-size: 11px; color: #888; line-height: 1.5; }
+
+/* Toggle */
+.toggle-label { display: flex; align-items: center; gap: 8px; cursor: pointer; flex-shrink: 0; }
+.toggle-input { display: none; }
+.toggle-track {
+  width: 34px; height: 18px; background: #DDD; border-radius: 9px;
+  position: relative; transition: background 0.2s; flex-shrink: 0;
+}
+.toggle-thumb {
+  position: absolute; top: 2px; left: 2px;
+  width: 14px; height: 14px; border-radius: 50%;
+  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.2);
+  transition: transform 0.2s;
+}
+.toggle-input:checked ~ .toggle-track { background: #1A1A1A; }
+.toggle-input:checked ~ .toggle-track .toggle-thumb { transform: translateX(16px); }
+.toggle-text { font-size: 11.5px; color: #555; font-weight: 500; }
+
+/* Rounds display */
+.rounds-body { display: flex; flex-direction: column; gap: 10px; }
+.rounds-display { display: flex; align-items: baseline; gap: 6px; }
+.rounds-num { font-family: 'JetBrains Mono', monospace; font-size: 28px; font-weight: 800; color: #1A1A1A; }
+.rounds-unit { font-size: 13px; color: #888; }
+.rounds-est { font-size: 11px; color: #AAAAAA; margin-left: 8px; }
+
+/* Range input */
+.range-wrap { display: flex; flex-direction: column; gap: 6px; }
+.range-input {
+  -webkit-appearance: none;
+  width: 100%; height: 4px;
+  background: linear-gradient(to right, #1A1A1A var(--fill, 0%), #E0E0E0 var(--fill, 0%));
+  border-radius: 2px; outline: none; cursor: pointer;
+}
+.range-input::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: 14px; height: 14px; border-radius: 50%;
+  background: #1A1A1A; cursor: pointer;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
+}
+.range-marks {
+  display: flex; justify-content: space-between; align-items: center;
+  position: relative; font-size: 10px; color: #AAAAAA;
+  font-family: 'JetBrains Mono', monospace;
+}
+.mark-rec {
+  cursor: pointer; font-size: 10px; color: #888;
+  background: #E8E8E8; padding: 1px 6px; border-radius: 3px;
+  transition: background 0.15s;
+}
+.mark-rec.active { background: #1A1A1A; color: #fff; }
+.mark-rec:hover  { background: #D0D0D0; }
+
+/* Auto */
+.rounds-auto { display: flex; align-items: center; gap: 16px; }
+.auto-num { display: flex; align-items: baseline; gap: 6px; }
+.auto-tip {
+  font-size: 11.5px; color: #999; cursor: pointer; margin: 0;
+  text-decoration: underline; text-underline-offset: 2px;
+  transition: color 0.15s;
+}
+.auto-tip:hover { color: #333; }
+
+/* Action row */
+.action-row { display: flex; gap: 10px; }
+.btn-secondary {
+  flex: 1; padding: 11px 0; border: 1.5px solid #E0E0E0;
+  background: #fff; border-radius: 8px; font-size: 13px; font-weight: 600;
+  color: #555; cursor: pointer; transition: border-color 0.15s, color 0.15s;
+}
+.btn-secondary:hover { border-color: #AAAAAA; color: #1A1A1A; }
+
+.btn-primary {
+  flex: 2; padding: 11px 0; border: none;
+  background: #1A1A1A; border-radius: 8px; font-size: 13px; font-weight: 700;
+  color: #fff; cursor: pointer; letter-spacing: 0.2px;
+  transition: background 0.15s, opacity 0.15s;
+}
+.btn-primary:hover:not(:disabled) { background: #333; }
+.btn-primary:disabled { opacity: 0.35; cursor: not-allowed; }
+
+/* Fade transition */
+.fade-enter-active, .fade-leave-active { transition: opacity 0.2s; }
+.fade-enter-from, .fade-leave-to { opacity: 0; }
+</style>
diff --git a/frontend/src/components/step2/SimConfigSection.vue b/frontend/src/components/step2/SimConfigSection.vue
new file mode 100644
index 0000000000..cdbd07cf5b
--- /dev/null
+++ b/frontend/src/components/step2/SimConfigSection.vue
@@ -0,0 +1,306 @@
+<template>
+  <div class="setup-card" :class="cardClass">
+    <div class="card-head">
+      <div class="card-label">
+        <span class="card-num">03</span>
+        <span class="card-title">{{ $t('step2.dualPlatformConfig') }}</span>
+      </div>
+      <span class="card-badge" :class="badgeClass">
+        <template v-if="phase > 2">{{ $t('common.completed') }}</template>
+        <template v-else-if="phase === 2">{{ $t('step2.generating') }}</template>
+        <template v-else>{{ $t('common.pending') }}</template>
+      </span>
+    </div>
+
+    <div class="card-body">
+      <p class="api-route">POST /api/simulation/prepare</p>
+      <p class="card-desc">{{ $t('step2.dualPlatformConfigDesc') }}</p>
+
+      <template v-if="simulationConfig">
+        <!-- Bloco: Configuração de tempo -->
+        <div class="config-section">
+          <span class="section-label">{{ $t('step2.simulationDuration') }}</span>
+          <div class="kv-grid">
+            <div class="kv-item">
+              <span class="kv-key">{{ $t('step2.simulationDuration') }}</span>
+              <span class="kv-val">{{ simulationConfig.time_config?.total_simulation_hours || '—' }}h</span>
+            </div>
+            <div class="kv-item">
+              <span class="kv-key">{{ $t('step2.roundDuration') }}</span>
+              <span class="kv-val">{{ simulationConfig.time_config?.minutes_per_round || '—' }}min</span>
+            </div>
+            <div class="kv-item">
+              <span class="kv-key">{{ $t('step2.totalRounds') }}</span>
+              <span class="kv-val">{{ calculatedRounds }}</span>
+            </div>
+            <div class="kv-item">
+              <span class="kv-key">{{ $t('step2.activePerHour') }}</span>
+              <span class="kv-val">
+                {{ simulationConfig.time_config?.agents_per_hour_min }}–{{ simulationConfig.time_config?.agents_per_hour_max }}
+              </span>
+            </div>
+          </div>
+
+          <!-- Time periods -->
+          <div class="time-periods" v-if="simulationConfig.time_config">
+            <div class="period-row" v-for="period in timePeriods" :key="period.key">
+              <span class="period-name">{{ period.label }}</span>
+              <span class="period-range">{{ period.range }}</span>
+              <span class="period-mult">×{{ period.multiplier }}</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- Bloco: Agentes -->
+        <div class="config-section" v-if="simulationConfig.agent_configs?.length">
+          <div class="section-head">
+            <span class="section-label">{{ $t('step2.agentConfig') }}</span>
+            <span class="section-count">{{ simulationConfig.agent_configs.length }}</span>
+          </div>
+          <div class="agents-list">
+            <div
+              v-for="agent in simulationConfig.agent_configs"
+              :key="agent.agent_id"
+              class="agent-row"
+            >
+              <div class="agent-ident">
+                <span class="agent-id">A{{ agent.agent_id }}</span>
+                <span class="agent-name">{{ agent.entity_name }}</span>
+              </div>
+              <div class="agent-tags">
+                <span class="tag-type">{{ agent.entity_type }}</span>
+                <span class="tag-stance" :class="'stance-' + agent.stance">{{ agent.stance }}</span>
+              </div>
+              <!-- 24h mini timeline -->
+              <div class="mini-timeline" :title="$t('step2.activeTimePeriod')">
+                <div
+                  v-for="h in 24"
+                  :key="h - 1"
+                  class="tl-hour"
+                  :class="{ active: agent.active_hours?.includes(h - 1) }"
+                />
+              </div>
+              <div class="agent-params">
+                <span>{{ agent.posts_per_hour }}<small>p/h</small></span>
+                <span>{{ agent.activity_level ? (agent.activity_level * 100).toFixed(0) : '—' }}%</span>
+                <span
+                  :class="agent.sentiment_bias > 0 ? 'pos' : agent.sentiment_bias < 0 ? 'neg' : ''"
+                >
+                  {{ agent.sentiment_bias > 0 ? '+' : '' }}{{ agent.sentiment_bias?.toFixed(1) ?? '0.0' }}
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Bloco: Plataformas -->
+        <div class="config-section" v-if="simulationConfig.twitter_config || simulationConfig.reddit_config">
+          <span class="section-label">{{ $t('step2.recommendAlgoConfig') }}</span>
+          <div class="platforms-row">
+            <div v-if="simulationConfig.twitter_config" class="platform-block">
+              <span class="platform-name">{{ $t('step2.platform1Name') }}</span>
+              <div class="platform-kv">
+                <span>{{ $t('step2.recencyWeight') }}</span>
+                <span>{{ simulationConfig.twitter_config.recency_weight }}</span>
+              </div>
+              <div class="platform-kv">
+                <span>{{ $t('step2.popularityWeight') }}</span>
+                <span>{{ simulationConfig.twitter_config.popularity_weight }}</span>
+              </div>
+              <div class="platform-kv">
+                <span>{{ $t('step2.echoChamberStrength') }}</span>
+                <span>{{ simulationConfig.twitter_config.echo_chamber_strength }}</span>
+              </div>
+            </div>
+            <div v-if="simulationConfig.reddit_config" class="platform-block">
+              <span class="platform-name">{{ $t('step2.platform2Name') }}</span>
+              <div class="platform-kv">
+                <span>{{ $t('step2.recencyWeight') }}</span>
+                <span>{{ simulationConfig.reddit_config.recency_weight }}</span>
+              </div>
+              <div class="platform-kv">
+                <span>{{ $t('step2.popularityWeight') }}</span>
+                <span>{{ simulationConfig.reddit_config.popularity_weight }}</span>
+              </div>
+              <div class="platform-kv">
+                <span>{{ $t('step2.echoChamberStrength') }}</span>
+                <span>{{ simulationConfig.reddit_config.echo_chamber_strength }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Reasoning -->
+        <div class="config-section" v-if="simulationConfig.generation_reasoning">
+          <span class="section-label">{{ $t('step2.llmConfigReasoning') }}</span>
+          <div class="reasoning-text">
+            {{ simulationConfig.generation_reasoning.split('|')[0]?.trim() }}
+          </div>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+
+const props = defineProps({
+  phase:            { type: Number,  required: true },
+  simulationConfig: { type: Object,  default: null },
+})
+
+const cardClass = computed(() => ({
+  'card--pending':   props.phase < 2,
+  'card--active':    props.phase === 2,
+  'card--completed': props.phase > 2,
+}))
+
+const badgeClass = computed(() => {
+  if (props.phase > 2) return 'badge--done'
+  if (props.phase === 2) return 'badge--active'
+  return 'badge--pending'
+})
+
+const calculatedRounds = computed(() => {
+  const tc = props.simulationConfig?.time_config
+  if (!tc?.total_simulation_hours || !tc?.minutes_per_round) return '—'
+  return Math.floor((tc.total_simulation_hours * 60) / tc.minutes_per_round)
+})
+
+const timePeriods = computed(() => {
+  const tc = props.simulationConfig?.time_config
+  if (!tc) return []
+  return [
+    { key: 'peak',     label: t('step2.peakHours'),    range: (tc.peak_hours?.[0] ?? '') + ':00…',     multiplier: tc.peak_activity_multiplier },
+    { key: 'work',     label: t('step2.workHours'),    range: (tc.work_hours?.[0] ?? '') + ':00…',     multiplier: tc.work_activity_multiplier },
+    { key: 'morning',  label: t('step2.morningHours'), range: (tc.morning_hours?.[0] ?? '') + ':00…',  multiplier: tc.morning_activity_multiplier },
+    { key: 'offpeak',  label: t('step2.offPeakHours'), range: (tc.off_peak_hours?.[0] ?? '') + ':00…', multiplier: tc.off_peak_activity_multiplier },
+  ].filter(p => p.multiplier !== undefined)
+})
+</script>
+
+<style scoped>
+.setup-card {
+  background: #fff;
+  border: 1px solid #EBEBEB;
+  border-radius: 10px;
+  overflow: hidden;
+  transition: border-color 0.2s, opacity 0.2s;
+}
+.setup-card.card--active    { border-color: #D0D0D0; }
+.setup-card.card--completed { border-color: #E8E8E8; opacity: 0.9; }
+.setup-card.card--pending   { opacity: 0.55; }
+
+.card-head {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 14px 18px; border-bottom: 1px solid #F0F0F0;
+}
+.card-label { display: flex; align-items: center; gap: 10px; }
+.card-num { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; color: #CCCCCC; }
+.card-title { font-size: 13px; font-weight: 700; color: #1A1A1A; }
+
+.card-badge { font-size: 10.5px; font-weight: 700; padding: 3px 10px; border-radius: 20px; }
+.badge--done    { background: #F0FBF2; color: #2A7D3A; }
+.badge--active  { background: #FFF3EE; color: #D44B00; }
+.badge--pending { background: #F5F5F5; color: #AAAAAA; }
+
+.card-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; }
+
+.api-route { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: #AAAAAA; margin: 0; }
+.card-desc  { font-size: 12.5px; color: #555; margin: 0; line-height: 1.55; }
+
+/* Config sections */
+.config-section { display: flex; flex-direction: column; gap: 8px; }
+
+.section-head { display: flex; align-items: center; gap: 8px; }
+.section-label {
+  font-size: 10.5px; font-weight: 700; color: #AAAAAA;
+  text-transform: uppercase; letter-spacing: 0.5px;
+}
+.section-count {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 10px; color: #CCCCCC;
+  background: #F0F0F0; padding: 1px 6px; border-radius: 3px;
+}
+
+/* KV grid */
+.kv-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
+.kv-item {
+  display: flex; align-items: baseline; justify-content: space-between;
+  background: #F8F8F8; border-radius: 6px; padding: 8px 10px;
+}
+.kv-key { font-size: 11px; color: #888; }
+.kv-val { font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 700; color: #1A1A1A; }
+
+/* Time periods */
+.time-periods { display: flex; flex-direction: column; gap: 4px; }
+.period-row {
+  display: flex; align-items: center; gap: 10px;
+  font-size: 11.5px; padding: 3px 0;
+}
+.period-name { color: #888; width: 80px; flex-shrink: 0; }
+.period-range { color: #555; flex: 1; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; }
+.period-mult { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #444; font-weight: 700; }
+
+/* Agents list */
+.agents-list { display: flex; flex-direction: column; gap: 6px; }
+.agent-row {
+  display: flex; align-items: center; gap: 10px;
+  background: #F8F8F8; border-radius: 7px; padding: 8px 12px;
+  flex-wrap: wrap;
+}
+.agent-ident { display: flex; align-items: center; gap: 6px; min-width: 120px; }
+.agent-id { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: #AAAAAA; }
+.agent-name { font-size: 12px; font-weight: 700; color: #1A1A1A; }
+.agent-tags { display: flex; gap: 4px; flex-shrink: 0; }
+.tag-type {
+  font-size: 9.5px; font-weight: 700;
+  background: #EDEDED; color: #555; padding: 2px 6px; border-radius: 3px;
+}
+.tag-stance {
+  font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 3px;
+  background: #F0F0F0; color: #666;
+}
+.stance-positive { background: #E8F5E9; color: #2E7D32; }
+.stance-negative { background: #FFEBEE; color: #C62828; }
+.stance-neutral  { background: #F5F5F5; color: #757575; }
+
+/* Mini timeline */
+.mini-timeline { display: flex; gap: 1px; flex: 1; min-width: 80px; }
+.tl-hour { height: 8px; flex: 1; background: #E8E8E8; border-radius: 1px; }
+.tl-hour.active { background: #FF5722; }
+
+.agent-params {
+  display: flex; gap: 10px; font-size: 11px; color: #666;
+  font-family: 'JetBrains Mono', monospace;
+}
+.agent-params small { font-size: 9px; color: #AAAAAA; }
+.pos { color: #2E7D32; }
+.neg { color: #C62828; }
+
+/* Platforms */
+.platforms-row { display: flex; gap: 10px; }
+.platform-block {
+  flex: 1; background: #F8F8F8; border-radius: 8px; padding: 12px 14px;
+  display: flex; flex-direction: column; gap: 7px;
+}
+.platform-name { font-size: 11.5px; font-weight: 700; color: #1A1A1A; margin-bottom: 2px; }
+.platform-kv {
+  display: flex; justify-content: space-between;
+  font-size: 11px; color: #777;
+}
+.platform-kv span:last-child {
+  font-family: 'JetBrains Mono', monospace; color: #333; font-weight: 600;
+}
+
+/* Reasoning */
+.reasoning-text {
+  font-size: 12px; color: #555; line-height: 1.6;
+  background: #F8F8F8; border-radius: 7px; padding: 10px 12px;
+  border-left: 2px solid #E0E0E0;
+}
+</style>
diff --git a/frontend/src/components/step2/SimulationInstanceCard.vue b/frontend/src/components/step2/SimulationInstanceCard.vue
new file mode 100644
index 0000000000..4a157344df
--- /dev/null
+++ b/frontend/src/components/step2/SimulationInstanceCard.vue
@@ -0,0 +1,144 @@
+<template>
+  <div class="setup-card" :class="cardClass">
+    <div class="card-head">
+      <div class="card-label">
+        <span class="card-num">01</span>
+        <span class="card-title">{{ $t('step2.simInstanceInit') }}</span>
+      </div>
+      <span class="card-badge" :class="phase > 0 ? 'badge--done' : 'badge--active'">
+        {{ phase > 0 ? $t('common.completed') : $t('step2.initializing') }}
+      </span>
+    </div>
+
+    <div class="card-body">
+      <p class="api-route">POST /api/simulation/create</p>
+      <p class="card-desc">{{ $t('step2.simInstanceDesc') }}</p>
+
+      <div v-if="simulationId" class="id-grid">
+        <div class="id-row">
+          <span class="id-label">{{ $t('system.labelProject') }}</span>
+          <span class="id-val">{{ projectData?.project_id || '—' }}</span>
+        </div>
+        <div class="id-row">
+          <span class="id-label">{{ $t('system.labelGraph') }}</span>
+          <span class="id-val">{{ projectData?.graph_id || '—' }}</span>
+        </div>
+        <div class="id-row">
+          <span class="id-label">{{ $t('system.labelSimulation') }}</span>
+          <span class="id-val highlight">{{ simulationId }}</span>
+        </div>
+        <div class="id-row" v-if="taskId">
+          <span class="id-label">{{ $t('system.labelTask') }}</span>
+          <span class="id-val">{{ taskId }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  phase:       { type: Number, required: true },
+  simulationId:{ type: String, default: null },
+  projectData: { type: Object, default: null },
+  taskId:      { type: String, default: null },
+})
+
+const cardClass = computed(() => ({
+  'card--active':    props.phase === 0,
+  'card--completed': props.phase > 0,
+}))
+</script>
+
+<style scoped>
+.setup-card {
+  background: #fff;
+  border: 1px solid #EBEBEB;
+  border-radius: 10px;
+  overflow: hidden;
+  transition: border-color 0.2s;
+}
+.setup-card.card--active { border-color: #D0D0D0; }
+.setup-card.card--completed { border-color: #E8E8E8; opacity: 0.85; }
+
+/* Head */
+.card-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 14px 18px;
+  border-bottom: 1px solid #F0F0F0;
+}
+.card-label { display: flex; align-items: center; gap: 10px; }
+.card-num {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 11px;
+  font-weight: 700;
+  color: #CCCCCC;
+}
+.card-title {
+  font-size: 13px;
+  font-weight: 700;
+  color: #1A1A1A;
+}
+
+/* Badge */
+.card-badge {
+  font-size: 10.5px;
+  font-weight: 700;
+  padding: 3px 10px;
+  border-radius: 20px;
+}
+.badge--done    { background: #F0FBF2; color: #2A7D3A; }
+.badge--active  { background: #FFF3EE; color: #D44B00; }
+
+/* Body */
+.card-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
+
+.api-route {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 10px;
+  color: #AAAAAA;
+  margin: 0;
+}
+
+.card-desc {
+  font-size: 12.5px;
+  color: #555;
+  margin: 0;
+  line-height: 1.55;
+}
+
+/* ID grid */
+.id-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  background: #F8F8F8;
+  border-radius: 7px;
+  padding: 12px 14px;
+}
+.id-row {
+  display: flex;
+  align-items: baseline;
+  gap: 10px;
+}
+.id-label {
+  font-size: 10.5px;
+  font-weight: 600;
+  color: #AAAAAA;
+  width: 60px;
+  flex-shrink: 0;
+  text-transform: uppercase;
+  letter-spacing: 0.4px;
+}
+.id-val {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 11px;
+  color: #333;
+  word-break: break-all;
+}
+.id-val.highlight { color: #1A1A1A; font-weight: 700; }
+</style>
diff --git a/frontend/src/components/workspace/GraphContextBar.vue b/frontend/src/components/workspace/GraphContextBar.vue
new file mode 100644
index 0000000000..5f5a578e55
--- /dev/null
+++ b/frontend/src/components/workspace/GraphContextBar.vue
@@ -0,0 +1,222 @@
+<template>
+  <div v-if="graphData || projectData" class="graph-ctx-bar">
+    <!-- Grupo: identidade Zep -->
+    <div class="ctx-group">
+      <span class="ctx-engine-badge">ZEP</span>
+      <span class="ctx-metric">
+        <span class="ctx-num">{{ nodeCount }}</span>
+        <span class="ctx-unit">nodes</span>
+      </span>
+      <span class="ctx-dot" />
+      <span class="ctx-metric">
+        <span class="ctx-num">{{ edgeCount }}</span>
+        <span class="ctx-unit">edges</span>
+      </span>
+    </div>
+
+    <div class="ctx-sep" />
+
+    <!-- Grupo: entity types da ontologia -->
+    <div class="ctx-group ctx-types" v-if="entityTypeList.length">
+      <span class="ctx-types-label">{{ $t('graph.ctxTypes') }}</span>
+      <span
+        v-for="type in entityTypeList.slice(0, 5)"
+        :key="type"
+        class="ctx-type-tag"
+      >{{ type }}</span>
+      <span v-if="entityTypeList.length > 5" class="ctx-type-more">
+        +{{ entityTypeList.length - 5 }}
+      </span>
+    </div>
+
+    <div class="ctx-spacer" />
+
+    <!-- Grupo: estado da ingestão -->
+    <div class="ctx-group">
+      <span class="ctx-state-dot" :class="stateClass" />
+      <span class="ctx-state-label">{{ stateLabel }}</span>
+      <span v-if="graphId" class="ctx-graph-id">{{ shortGraphId }}</span>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const props = defineProps({
+  graphData:   { type: Object, default: null },
+  projectData: { type: Object, default: null },
+  /** Fase atual: -1 upload, 0 ontology, 1 building, 2 complete, 3+ simulation */
+  currentPhase: { type: Number, default: -1 },
+})
+
+const nodeCount = computed(() => {
+  if (!props.graphData) return '—'
+  return props.graphData.node_count ?? props.graphData.nodes?.length ?? '—'
+})
+
+const edgeCount = computed(() => {
+  if (!props.graphData) return '—'
+  return props.graphData.edge_count ?? props.graphData.edges?.length ?? '—'
+})
+
+/** Entity types: tenta ontologia primeiro, depois infere dos nodes */
+const entityTypeList = computed(() => {
+  if (props.projectData?.ontology?.entity_types) {
+    return props.projectData.ontology.entity_types.map((e) =>
+      typeof e === 'string' ? e : e.name || e.type || String(e)
+    )
+  }
+  if (props.graphData?.nodes?.length) {
+    const types = new Set()
+    props.graphData.nodes.forEach((n) => {
+      if (n.labels) n.labels.forEach((l) => { if (l !== 'Entity') types.add(l) })
+    })
+    return Array.from(types)
+  }
+  return []
+})
+
+const graphId = computed(() => props.projectData?.graph_id || props.graphData?.graph_id || null)
+
+const shortGraphId = computed(() => {
+  if (!graphId.value) return ''
+  const id = String(graphId.value)
+  return id.length > 18 ? id.slice(0, 8) + '…' + id.slice(-6) : id
+})
+
+const stateClass = computed(() => {
+  if (props.currentPhase >= 2) return 'state--ready'
+  if (props.currentPhase === 1) return 'state--building'
+  if (props.currentPhase === 0) return 'state--ontology'
+  return 'state--idle'
+})
+
+const { t } = useI18n()
+
+const stateLabel = computed(() => {
+  if (props.currentPhase >= 3) return t('graph.ctxStateMemory')
+  if (props.currentPhase === 2) return t('graph.ctxStateReady')
+  if (props.currentPhase === 1) return t('graph.ctxStateBuilding')
+  if (props.currentPhase === 0) return t('graph.ctxStateOntology')
+  return t('graph.ctxStatePending')
+})
+</script>
+
+<style scoped>
+.graph-ctx-bar {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  height: 34px;
+  padding: 0 14px;
+  background: #FAFAFA;
+  border-bottom: 1px solid #EFEFEF;
+  flex-shrink: 0;
+  overflow: hidden;
+}
+
+/* Grupos */
+.ctx-group {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  flex-shrink: 0;
+}
+
+.ctx-sep {
+  width: 1px;
+  height: 14px;
+  background: #E0E0E0;
+  flex-shrink: 0;
+}
+
+.ctx-spacer { flex: 1; }
+
+/* Badge ZEP */
+.ctx-engine-badge {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 9px;
+  font-weight: 800;
+  letter-spacing: 1.5px;
+  color: #fff;
+  background: #1A1A1A;
+  padding: 2px 6px;
+  border-radius: 3px;
+}
+
+/* Métricas */
+.ctx-metric { display: flex; align-items: baseline; gap: 2px; }
+.ctx-num {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 12px;
+  font-weight: 700;
+  color: #1A1A1A;
+}
+.ctx-unit {
+  font-size: 10px;
+  color: #999;
+  font-weight: 500;
+}
+.ctx-dot {
+  width: 3px;
+  height: 3px;
+  border-radius: 50%;
+  background: #CCC;
+}
+
+/* Entity types */
+.ctx-types { gap: 5px; }
+.ctx-types-label {
+  font-size: 10px;
+  color: #AAAAAA;
+  font-weight: 600;
+  letter-spacing: 0.5px;
+  text-transform: uppercase;
+  margin-right: 2px;
+}
+.ctx-type-tag {
+  font-size: 10.5px;
+  font-weight: 600;
+  color: #444;
+  background: #EDEDED;
+  padding: 1px 7px;
+  border-radius: 3px;
+}
+.ctx-type-more {
+  font-size: 10px;
+  color: #AAA;
+  font-weight: 500;
+}
+
+/* Estado */
+.ctx-state-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+.ctx-state-label {
+  font-size: 11px;
+  font-weight: 600;
+  color: #666;
+}
+.ctx-graph-id {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 10px;
+  color: #BDBDBD;
+  letter-spacing: 0.3px;
+}
+
+/* State variants */
+.state--ready    { background: #4CAF50; }
+.state--building { background: #FF9800; animation: pulse-build 1.2s infinite; }
+.state--ontology { background: #2196F3; }
+.state--idle     { background: #CCC; }
+
+@keyframes pulse-build {
+  0%, 100% { opacity: 1; }
+  50%       { opacity: 0.4; }
+}
+</style>
diff --git a/frontend/src/components/workspace/SystemLogsPanel.vue b/frontend/src/components/workspace/SystemLogsPanel.vue
new file mode 100644
index 0000000000..2693901d7e
--- /dev/null
+++ b/frontend/src/components/workspace/SystemLogsPanel.vue
@@ -0,0 +1,192 @@
+<template>
+  <div class="logs-panel" :class="{ expanded: isExpanded }">
+    <!-- Header clicável para expandir/colapsar -->
+    <button class="logs-header" @click="toggle" :aria-expanded="isExpanded">
+      <div class="logs-header-left">
+        <span class="logs-title">SYSTEM LOG</span>
+        <span v-if="contextId" class="logs-ctx-id">{{ contextId }}</span>
+      </div>
+      <div class="logs-header-right">
+        <span class="logs-count" v-if="logs.length">{{ logs.length }}</span>
+        <span class="expand-icon" :class="{ rotated: isExpanded }">▾</span>
+      </div>
+    </button>
+
+    <!-- Conteúdo expansível -->
+    <Transition name="logs-slide">
+      <div v-if="isExpanded" class="logs-body" ref="logsBody">
+        <div
+          v-for="(log, idx) in logs"
+          :key="idx"
+          class="log-line"
+          :class="logClass(log.msg)"
+        >
+          <span class="log-time">{{ log.time }}</span>
+          <span class="log-msg">{{ log.msg }}</span>
+        </div>
+        <div v-if="!logs.length" class="log-empty">{{ $t('system.noLogs') }}</div>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch, nextTick } from 'vue'
+
+const props = defineProps({
+  /** Array de { time: string, msg: string } */
+  logs: { type: Array, default: () => [] },
+  /** ID de contexto a exibir no header (ex: simulation ID) */
+  contextId: { type: String, default: '' },
+  /** Expandido por padrão */
+  defaultExpanded: { type: Boolean, default: false },
+})
+
+const isExpanded = ref(props.defaultExpanded)
+const logsBody = ref(null)
+
+const toggle = () => { isExpanded.value = !isExpanded.value }
+
+/** Scroll automático para o final quando novos logs chegam */
+watch(
+  () => props.logs.length,
+  () => {
+    if (!isExpanded.value) return
+    nextTick(() => {
+      if (logsBody.value) logsBody.value.scrollTop = logsBody.value.scrollHeight
+    })
+  }
+)
+
+/** Coloração semântica dos logs */
+const logClass = (msg) => {
+  if (!msg) return ''
+  const lower = msg.toLowerCase()
+  if (lower.startsWith('error') || lower.includes('failed') || lower.includes('exception'))
+    return 'log--error'
+  if (lower.includes('complete') || lower.includes('success') || lower.includes('ready'))
+    return 'log--success'
+  if (lower.includes('warning') || lower.includes('warn'))
+    return 'log--warn'
+  return ''
+}
+</script>
+
+<style scoped>
+.logs-panel {
+  border-top: 1px solid #EBEBEB;
+  background: #FAFAFA;
+  flex-shrink: 0;
+}
+
+/* Header */
+.logs-header {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 16px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  text-align: left;
+}
+.logs-header:hover { background: #F3F3F3; }
+
+.logs-header-left {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.logs-title {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 9.5px;
+  font-weight: 700;
+  letter-spacing: 1.5px;
+  color: #AAAAAA;
+}
+
+.logs-ctx-id {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 9px;
+  color: #C8C8C8;
+}
+
+.logs-header-right {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.logs-count {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 10px;
+  color: #BBBBBB;
+}
+
+.expand-icon {
+  font-size: 12px;
+  color: #BBBBBB;
+  transition: transform 0.2s ease;
+}
+.expand-icon.rotated { transform: rotate(180deg); }
+
+/* Body */
+.logs-body {
+  max-height: 180px;
+  overflow-y: auto;
+  padding: 0 16px 10px;
+  scroll-behavior: smooth;
+}
+.logs-body::-webkit-scrollbar { width: 4px; }
+.logs-body::-webkit-scrollbar-thumb { background: #DDD; border-radius: 2px; }
+
+.log-line {
+  display: flex;
+  gap: 10px;
+  padding: 2px 0;
+  font-size: 11px;
+  line-height: 1.5;
+  font-family: 'JetBrains Mono', monospace;
+  border-bottom: 1px solid #F0F0F0;
+}
+.log-line:last-child { border-bottom: none; }
+
+.log-time {
+  color: #C0C0C0;
+  flex-shrink: 0;
+  font-size: 10px;
+}
+
+.log-msg { color: #4A4A4A; word-break: break-word; }
+
+/* Variantes semânticas */
+.log--error .log-msg { color: #C62828; }
+.log--success .log-msg { color: #2E7D32; }
+.log--warn .log-msg { color: #E65100; }
+
+.log-empty {
+  font-size: 11px;
+  color: #CCCCCC;
+  font-style: italic;
+  padding: 8px 0;
+}
+
+/* Transição slide */
+.logs-slide-enter-active,
+.logs-slide-leave-active {
+  transition: max-height 0.25s ease, opacity 0.2s ease;
+  overflow: hidden;
+}
+.logs-slide-enter-from,
+.logs-slide-leave-to {
+  max-height: 0;
+  opacity: 0;
+}
+.logs-slide-enter-to,
+.logs-slide-leave-from {
+  max-height: 220px;
+  opacity: 1;
+}
+</style>
diff --git a/frontend/src/components/workspace/WorkspaceHeader.vue b/frontend/src/components/workspace/WorkspaceHeader.vue
new file mode 100644
index 0000000000..f1a838d3f7
--- /dev/null
+++ b/frontend/src/components/workspace/WorkspaceHeader.vue
@@ -0,0 +1,228 @@
+<template>
+  <header class="ws-header">
+    <!-- Brand -->
+    <div class="ws-brand" @click="$emit('brand-click')" role="button" tabindex="0">
+      <span class="brand-text">MIROFISH</span>
+    </div>
+
+    <!-- Layout switcher — centro absoluto -->
+    <div class="ws-center">
+      <div class="layout-switcher" role="group" aria-label="Layout mode">
+        <button
+          v-for="mode in layoutModes"
+          :key="mode.key"
+          class="layout-btn"
+          :class="{ active: modelValue === mode.key }"
+          @click="$emit('update:modelValue', mode.key)"
+        >
+          {{ mode.label }}
+        </button>
+      </div>
+    </div>
+
+    <!-- Direita: slot + step + status -->
+    <div class="ws-right">
+      <slot name="right" />
+
+      <template v-if="step !== null">
+        <div class="ws-sep" />
+        <div class="step-context">
+          <span class="step-counter">{{ String(step).padStart(2, '0') }}</span>
+          <span class="step-slash">/</span>
+          <span class="step-total">05</span>
+          <span class="step-name-text">{{ stepName }}</span>
+        </div>
+      </template>
+
+      <div class="ws-sep" />
+      <div class="status-pill" :class="statusVariant">
+        <span class="status-pulse" />
+        <span class="status-label">{{ statusLabel }}</span>
+      </div>
+    </div>
+  </header>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+
+const props = defineProps({
+  /** v-model para viewMode: 'graph' | 'split' | 'workbench' */
+  modelValue: { type: String, default: 'split' },
+  /** Número do step atual (1–5). null = não exibir */
+  step: { type: Number, default: null },
+  /** Nome do step atual */
+  stepName: { type: String, default: '' },
+  /** Variante visual: 'processing' | 'completed' | 'error' | 'idle' */
+  statusVariant: { type: String, default: 'idle' },
+  /** Texto do status */
+  statusLabel: { type: String, default: '' },
+})
+
+defineEmits(['update:modelValue', 'brand-click'])
+
+const layoutModes = computed(() => [
+  { key: 'graph',     label: t('main.layoutGraph') },
+  { key: 'split',     label: t('main.layoutSplit') },
+  { key: 'workbench', label: t('main.layoutWorkbench') },
+])
+</script>
+
+<style scoped>
+/* ── Container ── */
+.ws-header {
+  height: 56px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 28px;
+  background: #fff;
+  border-bottom: 1px solid #E8E8E8;
+  position: relative;
+  z-index: 100;
+  flex-shrink: 0;
+}
+
+/* ── Brand ── */
+.ws-brand {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  user-select: none;
+  outline: none;
+}
+.brand-text {
+  font-family: 'JetBrains Mono', monospace;
+  font-weight: 800;
+  font-size: 15px;
+  letter-spacing: 2px;
+  color: #0A0A0A;
+  transition: opacity 0.15s;
+}
+.ws-brand:hover .brand-text { opacity: 0.65; }
+
+/* ── Centro — switcher absoluto ── */
+.ws-center {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.layout-switcher {
+  display: flex;
+  background: #F4F4F4;
+  border-radius: 7px;
+  padding: 3px;
+  gap: 2px;
+}
+
+.layout-btn {
+  border: none;
+  background: transparent;
+  padding: 5px 18px;
+  font-size: 11.5px;
+  font-weight: 600;
+  color: #888;
+  border-radius: 5px;
+  cursor: pointer;
+  letter-spacing: 0.3px;
+  transition: background 0.18s, color 0.18s, box-shadow 0.18s;
+  white-space: nowrap;
+}
+.layout-btn.active {
+  background: #fff;
+  color: #111;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
+}
+.layout-btn:not(.active):hover { color: #333; }
+
+/* ── Direita ── */
+.ws-right {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+/* Separador vertical */
+.ws-sep {
+  width: 1px;
+  height: 16px;
+  background: #E0E0E0;
+  flex-shrink: 0;
+}
+
+/* Step context */
+.step-context {
+  display: flex;
+  align-items: baseline;
+  gap: 4px;
+}
+.step-counter {
+  font-family: 'JetBrains Mono', monospace;
+  font-weight: 700;
+  font-size: 13px;
+  color: #C0C0C0;
+  line-height: 1;
+}
+.step-slash {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 11px;
+  color: #D0D0D0;
+}
+.step-total {
+  font-family: 'JetBrains Mono', monospace;
+  font-weight: 500;
+  font-size: 11px;
+  color: #C0C0C0;
+  margin-right: 8px;
+}
+.step-name-text {
+  font-size: 12.5px;
+  font-weight: 700;
+  color: #1A1A1A;
+  letter-spacing: 0.1px;
+}
+
+/* Status pill */
+.status-pill {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  padding: 4px 10px;
+  border-radius: 20px;
+  font-size: 11.5px;
+  font-weight: 600;
+  background: #F5F5F5;
+  color: #666;
+  transition: background 0.2s, color 0.2s;
+}
+
+.status-pulse {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: #CCCCCC;
+  flex-shrink: 0;
+}
+
+/* Variantes */
+.status-pill.processing { background: #FFF3EE; color: #D44B00; }
+.status-pill.processing .status-pulse {
+  background: #FF5722;
+  animation: pulse-dot 1s ease-in-out infinite;
+}
+.status-pill.completed { background: #F0FBF2; color: #2A7D3A; }
+.status-pill.completed .status-pulse { background: #4CAF50; }
+.status-pill.error { background: #FFF0F0; color: #C62828; }
+.status-pill.error .status-pulse { background: #EF5350; }
+.status-pill.idle { background: #F5F5F5; color: #888; }
+.status-pill.idle .status-pulse { background: #C0C0C0; }
+
+@keyframes pulse-dot {
+  0%, 100% { opacity: 1; transform: scale(1); }
+  50% { opacity: 0.45; transform: scale(0.8); }
+}
+</style>
diff --git a/frontend/src/components/workspace/WorkspaceLayout.vue b/frontend/src/components/workspace/WorkspaceLayout.vue
new file mode 100644
index 0000000000..2e6a4dd2fe
--- /dev/null
+++ b/frontend/src/components/workspace/WorkspaceLayout.vue
@@ -0,0 +1,61 @@
+<template>
+  <main class="ws-layout">
+    <!-- Painel Esquerdo: Graph -->
+    <div class="ws-panel ws-panel--left" :style="leftStyle">
+      <slot name="graph" />
+    </div>
+
+    <!-- Painel Direito: Conteúdo do Step -->
+    <div class="ws-panel ws-panel--right" :style="rightStyle">
+      <slot name="content" />
+    </div>
+  </main>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  /** Modo de layout: 'graph' | 'split' | 'workbench' */
+  viewMode: { type: String, default: 'split' },
+})
+
+const leftStyle = computed(() => {
+  if (props.viewMode === 'graph')
+    return { width: '100%', opacity: 1, transform: 'translateX(0)', pointerEvents: 'all' }
+  if (props.viewMode === 'workbench')
+    return { width: '0%', opacity: 0, transform: 'translateX(-16px)', pointerEvents: 'none' }
+  return { width: '50%', opacity: 1, transform: 'translateX(0)', pointerEvents: 'all' }
+})
+
+const rightStyle = computed(() => {
+  if (props.viewMode === 'workbench')
+    return { width: '100%', opacity: 1, transform: 'translateX(0)', pointerEvents: 'all' }
+  if (props.viewMode === 'graph')
+    return { width: '0%', opacity: 0, transform: 'translateX(16px)', pointerEvents: 'none' }
+  return { width: '50%', opacity: 1, transform: 'translateX(0)', pointerEvents: 'all' }
+})
+</script>
+
+<style scoped>
+.ws-layout {
+  flex: 1;
+  display: flex;
+  overflow: hidden;
+  min-height: 0;
+}
+
+.ws-panel {
+  height: 100%;
+  overflow: hidden;
+  transition:
+    width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
+    opacity 0.28s ease,
+    transform 0.28s ease;
+  will-change: width, opacity, transform;
+}
+
+.ws-panel--left {
+  border-right: 1px solid #EAEAEA;
+}
+</style>
diff --git a/frontend/src/composables/useWorkspaceShell.js b/frontend/src/composables/useWorkspaceShell.js
new file mode 100644
index 0000000000..2cb10a650d
--- /dev/null
+++ b/frontend/src/composables/useWorkspaceShell.js
@@ -0,0 +1,56 @@
+import { ref, computed } from 'vue'
+
+/**
+ * Composable compartilhado para todas as views do workspace.
+ * Gerencia: modo de layout, painel de logs, transições de painel.
+ *
+ * @param {string} defaultMode - 'split' | 'graph' | 'workbench'
+ */
+export function useWorkspaceShell(defaultMode = 'split') {
+  const viewMode = ref(defaultMode)
+  const systemLogs = ref([])
+
+  const addLog = (msg) => {
+    const now = new Date()
+    const time =
+      now.toLocaleTimeString('en-US', {
+        hour12: false,
+        hour: '2-digit',
+        minute: '2-digit',
+        second: '2-digit',
+      }) +
+      '.' +
+      now.getMilliseconds().toString().padStart(3, '0')
+    systemLogs.value.push({ time, msg })
+    if (systemLogs.value.length > 200) systemLogs.value.shift()
+  }
+
+  const toggleMaximize = (target) => {
+    viewMode.value = viewMode.value === target ? 'split' : target
+  }
+
+  const leftPanelStyle = computed(() => {
+    if (viewMode.value === 'graph')
+      return { width: '100%', opacity: 1, transform: 'translateX(0)', pointerEvents: 'all' }
+    if (viewMode.value === 'workbench')
+      return { width: '0%', opacity: 0, transform: 'translateX(-16px)', pointerEvents: 'none' }
+    return { width: '50%', opacity: 1, transform: 'translateX(0)', pointerEvents: 'all' }
+  })
+
+  const rightPanelStyle = computed(() => {
+    if (viewMode.value === 'workbench')
+      return { width: '100%', opacity: 1, transform: 'translateX(0)', pointerEvents: 'all' }
+    if (viewMode.value === 'graph')
+      return { width: '0%', opacity: 0, transform: 'translateX(16px)', pointerEvents: 'none' }
+    return { width: '50%', opacity: 1, transform: 'translateX(0)', pointerEvents: 'all' }
+  })
+
+  return {
+    viewMode,
+    systemLogs,
+    addLog,
+    toggleMaximize,
+    leftPanelStyle,
+    rightPanelStyle,
+  }
+}
diff --git a/frontend/src/views/InteractionView.vue b/frontend/src/views/InteractionView.vue
index 7e555b26e4..35019c0895 100644
--- a/frontend/src/views/InteractionView.vue
+++ b/frontend/src/views/InteractionView.vue
@@ -1,56 +1,32 @@
 <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: $t('main.layoutGraph'), split: $t('main.layoutSplit'), workbench: $t('main.layoutWorkbench') }[mode] }}
-          </button>
-        </div>
-      </div>
-
-      <div class="header-right">
+    <WorkspaceHeader
+      v-model="viewMode"
+      :step="5"
+      :stepName="String($tm('main.stepNames')[4] || '')"
+      :statusVariant="statusVariant"
+      :statusLabel="statusLabel"
+      @brand-click="router.push('/')"
+    >
+      <template #right>
         <LanguageSwitcher />
-        <div class="step-divider"></div>
-        <div class="workflow-step">
-          <span class="step-num">Step 5/5</span>
-          <span class="step-name">{{ $tm('main.stepNames')[4] }}</span>
-        </div>
-        <div class="step-divider"></div>
-        <span class="status-indicator" :class="statusClass">
-          <span class="dot"></span>
-          {{ statusText }}
-        </span>
-      </div>
-    </header>
+      </template>
+    </WorkspaceHeader>
 
-    <!-- Main Content Area -->
-    <main class="content-area">
-      <!-- Left Panel: Graph -->
-      <div class="panel-wrapper left" :style="leftPanelStyle">
-        <GraphPanel 
+    <WorkspaceLayout :viewMode="viewMode">
+      <template #graph>
+        <GraphPanel
           :graphData="graphData"
+          :projectData="projectData"
           :loading="graphLoading"
           :currentPhase="5"
           :isSimulating="false"
           @refresh="refreshGraph"
           @toggle-maximize="toggleMaximize('graph')"
         />
-      </div>
+      </template>
 
-      <!-- Right Panel: Step5 深度互动 -->
-      <div class="panel-wrapper right" :style="rightPanelStyle">
+      <template #content>
         <Step5Interaction
           :reportId="currentReportId"
           :simulationId="simulationId"
@@ -58,8 +34,8 @@
           @add-log="addLog"
           @update-status="updateStatus"
         />
-      </div>
-    </main>
+      </template>
+    </WorkspaceLayout>
   </div>
 </template>
 
@@ -67,110 +43,68 @@
 import { ref, computed, onMounted, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
-import GraphPanel from '../components/GraphPanel.vue'
-import Step5Interaction from '../components/Step5Interaction.vue'
+
+import WorkspaceHeader   from '../components/workspace/WorkspaceHeader.vue'
+import WorkspaceLayout   from '../components/workspace/WorkspaceLayout.vue'
+import GraphPanel        from '../components/GraphPanel.vue'
+import Step5Interaction  from '../components/Step5Interaction.vue'
+import LanguageSwitcher  from '../components/LanguageSwitcher.vue'
+
+import { useWorkspaceShell } from '../composables/useWorkspaceShell'
+
 import { getProject, getGraphData } from '../api/graph'
 import { getSimulation } from '../api/simulation'
 import { getReport } from '../api/report'
-import LanguageSwitcher from '../components/LanguageSwitcher.vue'
 
-const route = useRoute()
-const router = useRouter()
 const { t } = useI18n()
+const route  = useRoute()
+const router = useRouter()
 
-// Props
-const props = defineProps({
-  reportId: String
-})
-
-// Layout State - 默认切换到工作台视角
-const viewMode = ref('workbench')
+// ── Shell compartilhado — default 'workbench' (view de interação profunda) ───
+const { viewMode, systemLogs, addLog, toggleMaximize } = useWorkspaceShell('workbench')
 
-// Data State
+// ── 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(() => {
+const simulationId    = ref(null)
+const projectData     = ref(null)
+const graphData       = ref(null)
+const graphLoading    = ref(false)
+// 'ready': aguardando interação; 'processing': respondendo; 'completed'; 'error'
+const currentStatus   = ref('ready')
+
+// ── Status ─────────────────────────────────────────────────────────────────────
+// 'ready' → 'idle' (dot cinza): aguardando input
+const statusVariant = computed(() => {
+  if (currentStatus.value === 'ready') return 'idle'
   return currentStatus.value
 })
 
-const statusText = computed(() => {
-  if (currentStatus.value === 'error') return 'Error'
-  if (currentStatus.value === 'completed') return 'Completed'
+const statusLabel = 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
-  }
-}
+const updateStatus = (status) => { currentStatus.value = status }
 
-// --- Data Logic ---
+// ── Data loading ───────────────────────────────────────────────────────────────
 const loadReportData = async () => {
   try {
     addLog(t('log.loadReportData', { id: 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
+      simulationId.value = reportRes.data.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(t('log.projectLoadSuccess', { id: projRes.data.project_id }))
-
-              // 获取 graph 数据
-              if (projRes.data.graph_id) {
-                await loadGraph(projRes.data.graph_id)
-              }
-            }
+        if (simRes.success && simRes.data?.project_id) {
+          const projRes = await getProject(simRes.data.project_id)
+          if (projRes.success && projRes.data) {
+            projectData.value = projRes.data
+            addLog(t('log.projectLoadSuccess', { id: projRes.data.project_id }))
+            if (projRes.data.graph_id) await loadGraph(projRes.data.graph_id)
           }
         }
       }
@@ -184,7 +118,6 @@ const loadReportData = async () => {
 
 const loadGraph = async (graphId) => {
   graphLoading.value = true
-  
   try {
     const res = await getGraphData(graphId)
     if (res.success) {
@@ -199,18 +132,15 @@ const loadGraph = async (graphId) => {
 }
 
 const refreshGraph = () => {
-  if (projectData.value?.graph_id) {
-    loadGraph(projectData.value.graph_id)
-  }
+  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(t('log.interactionViewInit'))
@@ -227,129 +157,4 @@ onMounted(() => {
   overflow: hidden;
   font-family: 'Space Grotesk', 'Noto Sans SC', system-ui, 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>
diff --git a/frontend/src/views/MainView.vue b/frontend/src/views/MainView.vue
index 513c70d833..ca0c293620 100644
--- a/frontend/src/views/MainView.vue
+++ b/frontend/src/views/MainView.vue
@@ -1,57 +1,33 @@
 <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: $t('main.layoutGraph'), split: $t('main.layoutSplit'), workbench: $t('main.layoutWorkbench') }[mode] }}
-          </button>
-        </div>
-      </div>
-
-      <div class="header-right">
+    <WorkspaceHeader
+      v-model="viewMode"
+      :step="currentStep"
+      :stepName="String(stepNames[currentStep - 1] || '')"
+      :statusVariant="statusVariant"
+      :statusLabel="statusLabel"
+      @brand-click="router.push('/')"
+    >
+      <template #right>
         <LanguageSwitcher />
-        <div class="step-divider"></div>
-        <div class="workflow-step">
-          <span class="step-num">Step {{ currentStep }}/5</span>
-          <span class="step-name">{{ $tm('main.stepNames')[currentStep - 1] }}</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 
+      </template>
+    </WorkspaceHeader>
+
+    <WorkspaceLayout :viewMode="viewMode">
+      <template #graph>
+        <GraphPanel
           :graphData="graphData"
+          :projectData="projectData"
           :loading="graphLoading"
           :currentPhase="currentPhase"
           @refresh="refreshGraph"
           @toggle-maximize="toggleMaximize('graph')"
         />
-      </div>
+      </template>
 
-      <!-- Right Panel: Step Components -->
-      <div class="panel-wrapper right" :style="rightPanelStyle">
-        <!-- Step 1: 图谱构建 -->
-        <Step1GraphBuild 
+      <template #content>
+        <!-- Step 1: Graph Build -->
+        <Step1GraphBuild
           v-if="currentStep === 1"
           :currentPhase="currentPhase"
           :projectData="projectData"
@@ -61,7 +37,8 @@
           :systemLogs="systemLogs"
           @next-step="handleNextStep"
         />
-        <!-- Step 2: 环境搭建 -->
+
+        <!-- Step 2: Env Setup -->
         <Step2EnvSetup
           v-else-if="currentStep === 2"
           :projectData="projectData"
@@ -71,102 +48,75 @@
           @next-step="handleNextStep"
           @add-log="addLog"
         />
-      </div>
-    </main>
+      </template>
+    </WorkspaceLayout>
   </div>
 </template>
 
 <script setup>
-import { ref, computed, onMounted, onUnmounted, nextTick } from 'vue'
+import { ref, computed, onMounted, onUnmounted } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
-import GraphPanel from '../components/GraphPanel.vue'
+
+import WorkspaceHeader from '../components/workspace/WorkspaceHeader.vue'
+import WorkspaceLayout from '../components/workspace/WorkspaceLayout.vue'
+import GraphPanel      from '../components/GraphPanel.vue'
 import Step1GraphBuild from '../components/Step1GraphBuild.vue'
-import Step2EnvSetup from '../components/Step2EnvSetup.vue'
+import Step2EnvSetup   from '../components/Step2EnvSetup.vue'
+import LanguageSwitcher from '../components/LanguageSwitcher.vue'
+
+import { useWorkspaceShell } from '../composables/useWorkspaceShell'
+
 import { generateOntology, getProject, buildGraph, getTaskStatus, getGraphData } from '../api/graph'
 import { getPendingUpload, clearPendingUpload } from '../store/pendingUpload'
-import LanguageSwitcher from '../components/LanguageSwitcher.vue'
 
-const route = useRoute()
+const route  = useRoute()
 const router = useRouter()
 const { t, tm } = useI18n()
 
-// Layout State
-const viewMode = ref('split') // graph | split | workbench
-
-// Step State
-const currentStep = ref(1) // 1: 图谱构建, 2: 环境搭建, 3: 开始模拟, 4: 报告生成, 5: 深度互动
-const stepNames = computed(() => tm('main.stepNames'))
-
-// Data State
-const currentProjectId = ref(route.params.projectId)
-const loading = ref(false)
-const graphLoading = ref(false)
-const error = ref('')
-const projectData = ref(null)
-const graphData = ref(null)
-const currentPhase = ref(-1) // -1: Upload, 0: Ontology, 1: Build, 2: Complete
-const ontologyProgress = ref(null)
-const buildProgress = ref(null)
-const systemLogs = ref([])
+// ── Shell compartilhado ────────────────────────────────────────────────────────
+const { viewMode, systemLogs, addLog, toggleMaximize } = useWorkspaceShell('split')
 
-// Polling timers
-let pollTimer = null
-let graphPollTimer = null
+// ── Step state ─────────────────────────────────────────────────────────────────
+const currentStep = ref(1)
+const stepNames   = computed(() => tm('main.stepNames'))
 
-// --- 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)' }
-})
+// ── Data state ─────────────────────────────────────────────────────────────────
+const currentProjectId  = ref(route.params.projectId)
+const loading           = ref(false)
+const graphLoading      = ref(false)
+const error             = ref('')
+const projectData       = ref(null)
+const graphData         = ref(null)
+const currentPhase      = ref(-1)
+const ontologyProgress  = ref(null)
+const buildProgress     = ref(null)
 
-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)' }
-})
+// Polling timers
+let pollTimer      = null
+let graphPollTimer = null
 
-// --- Status Computed ---
-const statusClass = computed(() => {
-  if (error.value) return 'error'
+// ── Status computed ────────────────────────────────────────────────────────────
+const statusVariant = computed(() => {
+  if (error.value)          return 'error'
   if (currentPhase.value >= 2) return 'completed'
-  return 'processing'
+  if (currentPhase.value >= 0) return 'processing'
+  return 'idle'
 })
 
-const statusText = computed(() => {
-  if (error.value) return 'Error'
-  if (currentPhase.value >= 2) return 'Ready'
-  if (currentPhase.value === 1) return 'Building Graph'
-  if (currentPhase.value === 0) return 'Generating Ontology'
+const statusLabel = computed(() => {
+  if (error.value)                return 'Error'
+  if (currentPhase.value >= 2)    return 'Ready'
+  if (currentPhase.value === 1)   return 'Building Graph'
+  if (currentPhase.value === 0)   return 'Generating Ontology'
   return 'Initializing'
 })
 
-// --- 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 })
-  // Keep last 100 logs
-  if (systemLogs.value.length > 100) {
-    systemLogs.value.shift()
-  }
-}
-
-// --- Layout Methods ---
-const toggleMaximize = (target) => {
-  if (viewMode.value === target) {
-    viewMode.value = 'split'
-  } else {
-    viewMode.value = target
-  }
-}
-
+// ── Navigation ─────────────────────────────────────────────────────────────────
 const handleNextStep = (params = {}) => {
   if (currentStep.value < 5) {
     currentStep.value++
     addLog(t('log.enterStep', { step: currentStep.value, name: stepNames.value[currentStep.value - 1] }))
-    
-    // 如果是从 Step 2 进入 Step 3，记录模拟轮数配置
     if (currentStep.value === 3 && params.maxRounds) {
       addLog(t('log.customSimRounds', { rounds: params.maxRounds }))
     }
@@ -180,8 +130,7 @@ const handleGoBack = () => {
   }
 }
 
-// --- Data Logic ---
-
+// ── Data logic ─────────────────────────────────────────────────────────────────
 const initProject = async () => {
   addLog('Project view initialized.')
   if (currentProjectId.value === 'new') {
@@ -198,23 +147,22 @@ const handleNewProject = async () => {
     addLog('Error: No pending files found for new project.')
     return
   }
-  
   try {
     loading.value = true
     currentPhase.value = 0
     ontologyProgress.value = { message: 'Uploading and analyzing docs...' }
     addLog('Starting ontology generation: Uploading files...')
-    
+
     const formData = new FormData()
     pending.files.forEach(f => formData.append('files', f))
     formData.append('simulation_requirement', pending.simulationRequirement)
-    
+
     const res = await generateOntology(formData)
     if (res.success) {
       clearPendingUpload()
       currentProjectId.value = res.data.project_id
-      projectData.value = res.data
-      
+      projectData.value      = res.data
+
       router.replace({ name: 'Process', params: { projectId: res.data.project_id } })
       ontologyProgress.value = null
       addLog(`Ontology generated successfully for project ${res.data.project_id}`)
@@ -240,7 +188,7 @@ const loadProject = async () => {
       projectData.value = res.data
       updatePhaseByStatus(res.data.status)
       addLog(`Project loaded. Status: ${res.data.status}`)
-      
+
       if (res.data.status === 'ontology_generated' && !res.data.graph_id) {
         await startBuildGraph()
       } else if (res.data.status === 'graph_building' && res.data.graph_build_task_id) {
@@ -266,19 +214,19 @@ const loadProject = async () => {
 const updatePhaseByStatus = (status) => {
   switch (status) {
     case 'created':
-    case 'ontology_generated': currentPhase.value = 0; break;
-    case 'graph_building': currentPhase.value = 1; break;
-    case 'graph_completed': currentPhase.value = 2; break;
-    case 'failed': error.value = 'Project failed'; break;
+    case 'ontology_generated':  currentPhase.value = 0; break
+    case 'graph_building':      currentPhase.value = 1; break
+    case 'graph_completed':     currentPhase.value = 2; break
+    case 'failed':              error.value = 'Project failed'; break
   }
 }
 
 const startBuildGraph = async () => {
   try {
-    currentPhase.value = 1
+    currentPhase.value  = 1
     buildProgress.value = { progress: 0, message: 'Starting build...' }
     addLog('Initiating graph build...')
-    
+
     const res = await buildGraph({ project_id: currentProjectId.value })
     if (res.success) {
       addLog(`Graph build task started. Task ID: ${res.data.task_id}`)
@@ -302,7 +250,6 @@ const startGraphPolling = () => {
 
 const fetchGraphData = async () => {
   try {
-    // Refresh project info to check for graph_id
     const projRes = await getProject(currentProjectId.value)
     if (projRes.success && projRes.data.graph_id) {
       const gRes = await getGraphData(projRes.data.graph_id)
@@ -328,25 +275,19 @@ const pollTaskStatus = async (taskId) => {
     const res = await getTaskStatus(taskId)
     if (res.success) {
       const task = res.data
-      
-      // Log progress message if it changed
-      if (task.message && task.message !== buildProgress.value?.message) {
-        addLog(task.message)
-      }
-      
+      if (task.message && task.message !== buildProgress.value?.message) addLog(task.message)
       buildProgress.value = { progress: task.progress || 0, message: task.message }
-      
+
       if (task.status === 'completed') {
         addLog('Graph build task completed.')
         stopPolling()
-        stopGraphPolling() // Stop polling, do final load
+        stopGraphPolling()
         currentPhase.value = 2
-        
-        // Final load
+
         const projRes = await getProject(currentProjectId.value)
         if (projRes.success && projRes.data.graph_id) {
-            projectData.value = projRes.data
-            await loadGraph(projRes.data.graph_id)
+          projectData.value = projRes.data
+          await loadGraph(projRes.data.graph_id)
         }
       } else if (task.status === 'failed') {
         stopPolling()
@@ -385,28 +326,15 @@ const refreshGraph = () => {
 }
 
 const stopPolling = () => {
-  if (pollTimer) {
-    clearInterval(pollTimer)
-    pollTimer = null
-  }
+  if (pollTimer) { clearInterval(pollTimer); pollTimer = null }
 }
 
 const stopGraphPolling = () => {
-  if (graphPollTimer) {
-    clearInterval(graphPollTimer)
-    graphPollTimer = null
-    addLog('Graph polling stopped.')
-  }
+  if (graphPollTimer) { clearInterval(graphPollTimer); graphPollTimer = null; addLog('Graph polling stopped.') }
 }
 
-onMounted(() => {
-  initProject()
-})
-
-onUnmounted(() => {
-  stopPolling()
-  stopGraphPolling()
-})
+onMounted(() => { initProject() })
+onUnmounted(() => { stopPolling(); stopGraphPolling() })
 </script>
 
 <style scoped>
@@ -418,128 +346,4 @@ onUnmounted(() => {
   overflow: hidden;
   font-family: 'Space Grotesk', 'Noto Sans SC', system-ui, 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);
-}
-
-.status-indicator {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 12px;
-  color: #666;
-  font-weight: 500;
-}
-
-.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;
-}
-
-.dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background: #CCC;
-}
-
-.status-indicator.processing .dot { background: #FF5722; 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>
diff --git a/frontend/src/views/ReportView.vue b/frontend/src/views/ReportView.vue
index ac054e47b6..3a6d4b582c 100644
--- a/frontend/src/views/ReportView.vue
+++ b/frontend/src/views/ReportView.vue
@@ -1,56 +1,32 @@
 <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: $t('main.layoutGraph'), split: $t('main.layoutSplit'), workbench: $t('main.layoutWorkbench') }[mode] }}
-          </button>
-        </div>
-      </div>
-
-      <div class="header-right">
+    <WorkspaceHeader
+      v-model="viewMode"
+      :step="4"
+      :stepName="String($tm('main.stepNames')[3] || '')"
+      :statusVariant="statusVariant"
+      :statusLabel="statusLabel"
+      @brand-click="router.push('/')"
+    >
+      <template #right>
         <LanguageSwitcher />
-        <div class="step-divider"></div>
-        <div class="workflow-step">
-          <span class="step-num">Step 4/5</span>
-          <span class="step-name">{{ $tm('main.stepNames')[3] }}</span>
-        </div>
-        <div class="step-divider"></div>
-        <span class="status-indicator" :class="statusClass">
-          <span class="dot"></span>
-          {{ statusText }}
-        </span>
-      </div>
-    </header>
+      </template>
+    </WorkspaceHeader>
 
-    <!-- Main Content Area -->
-    <main class="content-area">
-      <!-- Left Panel: Graph -->
-      <div class="panel-wrapper left" :style="leftPanelStyle">
-        <GraphPanel 
+    <WorkspaceLayout :viewMode="viewMode">
+      <template #graph>
+        <GraphPanel
           :graphData="graphData"
+          :projectData="projectData"
           :loading="graphLoading"
           :currentPhase="4"
           :isSimulating="false"
           @refresh="refreshGraph"
           @toggle-maximize="toggleMaximize('graph')"
         />
-      </div>
+      </template>
 
-      <!-- Right Panel: Step4 报告生成 -->
-      <div class="panel-wrapper right" :style="rightPanelStyle">
+      <template #content>
         <Step4Report
           :reportId="currentReportId"
           :simulationId="simulationId"
@@ -58,8 +34,8 @@
           @add-log="addLog"
           @update-status="updateStatus"
         />
-      </div>
-    </main>
+      </template>
+    </WorkspaceLayout>
   </div>
 </template>
 
@@ -67,109 +43,62 @@
 import { ref, computed, onMounted, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
-import GraphPanel from '../components/GraphPanel.vue'
-import Step4Report from '../components/Step4Report.vue'
+
+import WorkspaceHeader from '../components/workspace/WorkspaceHeader.vue'
+import WorkspaceLayout from '../components/workspace/WorkspaceLayout.vue'
+import GraphPanel      from '../components/GraphPanel.vue'
+import Step4Report     from '../components/Step4Report.vue'
+import LanguageSwitcher from '../components/LanguageSwitcher.vue'
+
+import { useWorkspaceShell } from '../composables/useWorkspaceShell'
+
 import { getProject, getGraphData } from '../api/graph'
 import { getSimulation } from '../api/simulation'
 import { getReport } from '../api/report'
-import LanguageSwitcher from '../components/LanguageSwitcher.vue'
 
-const route = useRoute()
-const router = useRouter()
 const { t } = useI18n()
+const route  = useRoute()
+const router = useRouter()
 
-// Props
-const props = defineProps({
-  reportId: String
-})
-
-// Layout State - 默认切换到工作台视角
-const viewMode = ref('workbench')
+// ── Shell compartilhado — default 'workbench' (view centrada em relatório) ───
+const { viewMode, systemLogs, addLog, toggleMaximize } = useWorkspaceShell('workbench')
 
-// Data State
+// ── 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('processing') // processing | completed | error
+const simulationId    = ref(null)
+const projectData     = ref(null)
+const graphData       = ref(null)
+const graphLoading    = ref(false)
+const currentStatus   = ref('processing')
 
-// --- 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)' }
-})
+// ── Status ─────────────────────────────────────────────────────────────────────
+const statusVariant = computed(() => currentStatus.value)
 
-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'
+const statusLabel = computed(() => {
+  if (currentStatus.value === 'error')     return 'Error'
   if (currentStatus.value === 'completed') return 'Completed'
   return 'Generating'
 })
 
-// --- 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 }
 
-const updateStatus = (status) => {
-  currentStatus.value = status
-}
-
-// --- Layout Methods ---
-const toggleMaximize = (target) => {
-  if (viewMode.value === target) {
-    viewMode.value = 'split'
-  } else {
-    viewMode.value = target
-  }
-}
-
-// --- Data Logic ---
+// ── Data loading ───────────────────────────────────────────────────────────────
 const loadReportData = async () => {
   try {
     addLog(t('log.loadReportData', { id: 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
+      simulationId.value = reportRes.data.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(t('log.projectLoadSuccess', { id: projRes.data.project_id }))
-
-              // 获取 graph 数据
-              if (projRes.data.graph_id) {
-                await loadGraph(projRes.data.graph_id)
-              }
-            }
+        if (simRes.success && simRes.data?.project_id) {
+          const projRes = await getProject(simRes.data.project_id)
+          if (projRes.success && projRes.data) {
+            projectData.value = projRes.data
+            addLog(t('log.projectLoadSuccess', { id: projRes.data.project_id }))
+            if (projRes.data.graph_id) await loadGraph(projRes.data.graph_id)
           }
         }
       }
@@ -183,7 +112,6 @@ const loadReportData = async () => {
 
 const loadGraph = async (graphId) => {
   graphLoading.value = true
-  
   try {
     const res = await getGraphData(graphId)
     if (res.success) {
@@ -198,18 +126,16 @@ const loadGraph = async (graphId) => {
 }
 
 const refreshGraph = () => {
-  if (projectData.value?.graph_id) {
-    loadGraph(projectData.value.graph_id)
-  }
+  if (projectData.value?.graph_id) loadGraph(projectData.value.graph_id)
 }
 
-// Watch route params
+// Recarrega quando o reportId muda (ex: navegação interna)
 watch(() => route.params.reportId, (newId) => {
   if (newId && newId !== currentReportId.value) {
     currentReportId.value = newId
     loadReportData()
   }
-}, { immediate: true })
+})
 
 onMounted(() => {
   addLog(t('log.reportViewInit'))
@@ -226,128 +152,4 @@ onMounted(() => {
   overflow: hidden;
   font-family: 'Space Grotesk', 'Noto Sans SC', system-ui, 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.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>
diff --git a/frontend/src/views/SimulationRunView.vue b/frontend/src/views/SimulationRunView.vue
index c675d87732..ee16ebb641 100644
--- a/frontend/src/views/SimulationRunView.vue
+++ b/frontend/src/views/SimulationRunView.vue
@@ -1,56 +1,32 @@
 <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: $t('main.layoutGraph'), split: $t('main.layoutSplit'), workbench: $t('main.layoutWorkbench') }[mode] }}
-          </button>
-        </div>
-      </div>
-
-      <div class="header-right">
+    <WorkspaceHeader
+      v-model="viewMode"
+      :step="3"
+      :stepName="String($tm('main.stepNames')[2] || '')"
+      :statusVariant="statusVariant"
+      :statusLabel="statusLabel"
+      @brand-click="router.push('/')"
+    >
+      <template #right>
         <LanguageSwitcher />
-        <div class="step-divider"></div>
-        <div class="workflow-step">
-          <span class="step-num">Step 3/5</span>
-          <span class="step-name">{{ $tm('main.stepNames')[2] }}</span>
-        </div>
-        <div class="step-divider"></div>
-        <span class="status-indicator" :class="statusClass">
-          <span class="dot"></span>
-          {{ statusText }}
-        </span>
-      </div>
-    </header>
+      </template>
+    </WorkspaceHeader>
 
-    <!-- Main Content Area -->
-    <main class="content-area">
-      <!-- Left Panel: Graph -->
-      <div class="panel-wrapper left" :style="leftPanelStyle">
-        <GraphPanel 
+    <WorkspaceLayout :viewMode="viewMode">
+      <template #graph>
+        <GraphPanel
           :graphData="graphData"
+          :projectData="projectData"
           :loading="graphLoading"
           :currentPhase="3"
           :isSimulating="isSimulating"
           @refresh="refreshGraph"
           @toggle-maximize="toggleMaximize('graph')"
         />
-      </div>
+      </template>
 
-      <!-- Right Panel: Step3 开始模拟 -->
-      <div class="panel-wrapper right" :style="rightPanelStyle">
+      <template #content>
         <Step3Simulation
           :simulationId="currentSimulationId"
           :maxRounds="maxRounds"
@@ -63,110 +39,67 @@
           @add-log="addLog"
           @update-status="updateStatus"
         />
-      </div>
-    </main>
+      </template>
+    </WorkspaceLayout>
   </div>
 </template>
 
 <script setup>
 import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import GraphPanel from '../components/GraphPanel.vue'
-import Step3Simulation from '../components/Step3Simulation.vue'
+import { useI18n } from 'vue-i18n'
+
+import WorkspaceHeader from '../components/workspace/WorkspaceHeader.vue'
+import WorkspaceLayout from '../components/workspace/WorkspaceLayout.vue'
+import GraphPanel       from '../components/GraphPanel.vue'
+import Step3Simulation  from '../components/Step3Simulation.vue'
+import LanguageSwitcher from '../components/LanguageSwitcher.vue'
+
+import { useWorkspaceShell } from '../composables/useWorkspaceShell'
+
 import { getProject, getGraphData } from '../api/graph'
 import { getSimulation, getSimulationConfig, stopSimulation, closeSimulationEnv, getEnvStatus } from '../api/simulation'
-import LanguageSwitcher from '../components/LanguageSwitcher.vue'
-import { useI18n } from 'vue-i18n'
 
 const { t } = useI18n()
-const route = useRoute()
+const route  = useRoute()
 const router = useRouter()
 
-// Props
-const props = defineProps({
-  simulationId: String
-})
-
-// Layout State
-const viewMode = ref('split')
+// ── Shell compartilhado ────────────────────────────────────────────────────────
+const { viewMode, systemLogs, addLog, toggleMaximize } = useWorkspaceShell('split')
 
-// Data State
+// ── Data state ─────────────────────────────────────────────────────────────────
 const currentSimulationId = ref(route.params.simulationId)
-// 直接在初始化时从 query 参数获取 maxRounds，确保子组件能立即获取到值
-const maxRounds = ref(route.query.maxRounds ? parseInt(route.query.maxRounds) : null)
-const minutesPerRound = ref(30) // 默认每轮30分钟
-const projectData = ref(null)
-const graphData = ref(null)
-const graphLoading = ref(false)
-const systemLogs = ref([])
-const currentStatus = ref('processing') // 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)' }
-})
+const maxRounds           = ref(route.query.maxRounds ? parseInt(route.query.maxRounds) : null)
+const minutesPerRound     = ref(30)
+const projectData         = ref(null)
+const graphData           = ref(null)
+const graphLoading        = ref(false)
+const currentStatus       = ref('processing')
+
+// ── Status ─────────────────────────────────────────────────────────────────────
+const isSimulating = computed(() => currentStatus.value === 'processing')
 
-// --- Status Computed ---
-const statusClass = computed(() => {
-  return currentStatus.value
-})
+const statusVariant = computed(() => currentStatus.value)
 
-const statusText = computed(() => {
-  if (currentStatus.value === 'error') return 'Error'
+const statusLabel = computed(() => {
+  if (currentStatus.value === 'error')     return 'Error'
   if (currentStatus.value === 'completed') return 'Completed'
   return 'Running'
 })
 
-const isSimulating = computed(() => currentStatus.value === 'processing')
-
-// --- 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
-  }
-}
+const updateStatus = (status) => { currentStatus.value = status }
 
+// ── Navigation ─────────────────────────────────────────────────────────────────
 const handleGoBack = async () => {
-  // 在返回 Step 2 之前，先关闭正在运行的模拟
   addLog(t('log.preparingGoBack'))
-  
-  // 停止轮询
   stopGraphRefresh()
-  
+
   try {
-    // 先尝试优雅关闭模拟环境
     const envStatusRes = await getEnvStatus({ simulation_id: currentSimulationId.value })
-    
     if (envStatusRes.success && envStatusRes.data?.env_alive) {
       addLog(t('log.closingSimEnv'))
       try {
-        await closeSimulationEnv({ 
-          simulation_id: currentSimulationId.value,
-          timeout: 10
-        })
+        await closeSimulationEnv({ simulation_id: currentSimulationId.value, timeout: 10 })
         addLog(t('log.simEnvClosed'))
       } catch (closeErr) {
         addLog(t('log.closeSimEnvFailed'))
@@ -178,7 +111,6 @@ const handleGoBack = async () => {
         }
       }
     } else {
-      // 环境未运行，检查是否需要停止进程
       if (isSimulating.value) {
         addLog(t('log.stoppingSimProcess'))
         try {
@@ -192,49 +124,61 @@ const handleGoBack = async () => {
   } catch (err) {
     addLog(t('log.checkStatusFailed', { error: err.message }))
   }
-  
-  // 返回到 Step 2 (环境搭建)
+
   router.push({ name: 'Simulation', params: { simulationId: currentSimulationId.value } })
 }
 
 const handleNextStep = () => {
-  // Step3Simulation 组件会直接处理报告生成和路由跳转
-  // 这个方法仅作为备用
   addLog(t('log.enterStep4'))
 }
 
-// --- Data Logic ---
+// ── Graph auto-refresh durante simulação ──────────────────────────────────────
+let graphRefreshTimer = null
+
+const startGraphRefresh = () => {
+  if (graphRefreshTimer) return
+  addLog(t('log.graphRealtimeRefreshStart'))
+  graphRefreshTimer = setInterval(refreshGraph, 30000)
+}
+
+const stopGraphRefresh = () => {
+  if (graphRefreshTimer) {
+    clearInterval(graphRefreshTimer)
+    graphRefreshTimer = null
+    addLog(t('log.graphRealtimeRefreshStop'))
+  }
+}
+
+watch(isSimulating, (val) => {
+  if (val) startGraphRefresh()
+  else     stopGraphRefresh()
+}, { immediate: true })
+
+// ── Data loading ───────────────────────────────────────────────────────────────
 const loadSimulationData = async () => {
   try {
     addLog(t('log.loadingSimData', { id: currentSimulationId.value }))
-    
-    // 获取 simulation 信息
+
     const simRes = await getSimulation(currentSimulationId.value)
     if (simRes.success && simRes.data) {
       const simData = simRes.data
-      
-      // 获取 simulation config 以获取 minutes_per_round
+
       try {
         const configRes = await getSimulationConfig(currentSimulationId.value)
         if (configRes.success && configRes.data?.time_config?.minutes_per_round) {
           minutesPerRound.value = configRes.data.time_config.minutes_per_round
           addLog(t('log.timeConfig', { minutes: minutesPerRound.value }))
         }
-      } catch (configErr) {
+      } catch {
         addLog(t('log.timeConfigFetchFailed', { minutes: minutesPerRound.value }))
       }
-      
-      // 获取 project 信息
+
       if (simData.project_id) {
         const projRes = await getProject(simData.project_id)
         if (projRes.success && projRes.data) {
           projectData.value = projRes.data
           addLog(t('log.projectLoadSuccess', { id: projRes.data.project_id }))
-          
-          // 获取 graph 数据
-          if (projRes.data.graph_id) {
-            await loadGraph(projRes.data.graph_id)
-          }
+          if (projRes.data.graph_id) await loadGraph(projRes.data.graph_id)
         }
       }
     } else {
@@ -246,19 +190,12 @@ const loadSimulationData = async () => {
 }
 
 const loadGraph = async (graphId) => {
-  // 当正在模拟时，自动刷新不显示全屏 loading，以免闪烁
-  // 手动刷新或初始加载时显示 loading
-  if (!isSimulating.value) {
-    graphLoading.value = true
-  }
-  
+  if (!isSimulating.value) graphLoading.value = true
   try {
     const res = await getGraphData(graphId)
     if (res.success) {
       graphData.value = res.data
-      if (!isSimulating.value) {
-        addLog(t('log.graphDataLoadSuccess'))
-      }
+      if (!isSimulating.value) addLog(t('log.graphDataLoadSuccess'))
     }
   } catch (err) {
     addLog(t('log.graphLoadFailed', { error: err.message }))
@@ -268,51 +205,16 @@ const loadGraph = async (graphId) => {
 }
 
 const refreshGraph = () => {
-  if (projectData.value?.graph_id) {
-    loadGraph(projectData.value.graph_id)
-  }
-}
-
-// --- Auto Refresh Logic ---
-let graphRefreshTimer = null
-
-const startGraphRefresh = () => {
-  if (graphRefreshTimer) return
-  addLog(t('log.graphRealtimeRefreshStart'))
-  // 立即刷新一次，然后每30秒刷新
-  graphRefreshTimer = setInterval(refreshGraph, 30000)
+  if (projectData.value?.graph_id) loadGraph(projectData.value.graph_id)
 }
 
-const stopGraphRefresh = () => {
-  if (graphRefreshTimer) {
-    clearInterval(graphRefreshTimer)
-    graphRefreshTimer = null
-    addLog(t('log.graphRealtimeRefreshStop'))
-  }
-}
-
-watch(isSimulating, (newValue) => {
-  if (newValue) {
-    startGraphRefresh()
-  } else {
-    stopGraphRefresh()
-  }
-}, { immediate: true })
-
 onMounted(() => {
   addLog(t('log.simRunViewInit'))
-  
-  // 记录 maxRounds 配置（值已在初始化时从 query 参数获取）
-  if (maxRounds.value) {
-    addLog(t('log.customRounds', { rounds: maxRounds.value }))
-  }
-  
+  if (maxRounds.value) addLog(t('log.customRounds', { rounds: maxRounds.value }))
   loadSimulationData()
 })
 
-onUnmounted(() => {
-  stopGraphRefresh()
-})
+onUnmounted(() => { stopGraphRefresh() })
 </script>
 
 <style scoped>
@@ -324,129 +226,4 @@ onUnmounted(() => {
   overflow: hidden;
   font-family: 'Space Grotesk', 'Noto Sans SC', system-ui, 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.processing .dot { background: #FF5722; 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>
-
diff --git a/frontend/src/views/SimulationView.vue b/frontend/src/views/SimulationView.vue
index f3e1c18e86..8e67ab7e69 100644
--- a/frontend/src/views/SimulationView.vue
+++ b/frontend/src/views/SimulationView.vue
@@ -1,55 +1,31 @@
 <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: $t('main.layoutGraph'), split: $t('main.layoutSplit'), workbench: $t('main.layoutWorkbench') }[mode] }}
-          </button>
-        </div>
-      </div>
-
-      <div class="header-right">
+    <WorkspaceHeader
+      v-model="viewMode"
+      :step="2"
+      :stepName="String($tm('main.stepNames')[1] || '')"
+      :statusVariant="statusVariant"
+      :statusLabel="statusLabel"
+      @brand-click="router.push('/')"
+    >
+      <template #right>
         <LanguageSwitcher />
-        <div class="step-divider"></div>
-        <div class="workflow-step">
-          <span class="step-num">Step 2/5</span>
-          <span class="step-name">{{ $tm('main.stepNames')[1] }}</span>
-        </div>
-        <div class="step-divider"></div>
-        <span class="status-indicator" :class="statusClass">
-          <span class="dot"></span>
-          {{ statusText }}
-        </span>
-      </div>
-    </header>
+      </template>
+    </WorkspaceHeader>
 
-    <!-- Main Content Area -->
-    <main class="content-area">
-      <!-- Left Panel: Graph -->
-      <div class="panel-wrapper left" :style="leftPanelStyle">
-        <GraphPanel 
+    <WorkspaceLayout :viewMode="viewMode">
+      <template #graph>
+        <GraphPanel
           :graphData="graphData"
+          :projectData="projectData"
           :loading="graphLoading"
           :currentPhase="2"
           @refresh="refreshGraph"
           @toggle-maximize="toggleMaximize('graph')"
         />
-      </div>
+      </template>
 
-      <!-- Right Panel: Step2 环境搭建 -->
-      <div class="panel-wrapper right" :style="rightPanelStyle">
+      <template #content>
         <Step2EnvSetup
           :simulationId="currentSimulationId"
           :projectData="projectData"
@@ -60,89 +36,54 @@
           @add-log="addLog"
           @update-status="updateStatus"
         />
-      </div>
-    </main>
+      </template>
+    </WorkspaceLayout>
   </div>
 </template>
 
 <script setup>
-import { ref, computed, onMounted, onUnmounted } from 'vue'
+import { ref, computed, onMounted } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import GraphPanel from '../components/GraphPanel.vue'
-import Step2EnvSetup from '../components/Step2EnvSetup.vue'
+import { useI18n } from 'vue-i18n'
+
+import WorkspaceHeader from '../components/workspace/WorkspaceHeader.vue'
+import WorkspaceLayout from '../components/workspace/WorkspaceLayout.vue'
+import GraphPanel      from '../components/GraphPanel.vue'
+import Step2EnvSetup   from '../components/Step2EnvSetup.vue'
+import LanguageSwitcher from '../components/LanguageSwitcher.vue'
+
+import { useWorkspaceShell } from '../composables/useWorkspaceShell'
+
 import { getProject, getGraphData } from '../api/graph'
 import { getSimulation, stopSimulation, getEnvStatus, closeSimulationEnv } from '../api/simulation'
-import LanguageSwitcher from '../components/LanguageSwitcher.vue'
-import { useI18n } from 'vue-i18n'
 
 const { t } = useI18n()
-const route = useRoute()
+const route  = useRoute()
 const router = useRouter()
 
-// Props
-const props = defineProps({
-  simulationId: String
-})
-
-// Layout State
-const viewMode = ref('split')
+// ── Shell compartilhado ────────────────────────────────────────────────────────
+const { viewMode, systemLogs, addLog, toggleMaximize } = useWorkspaceShell('split')
 
-// Data State
+// ── Data state ─────────────────────────────────────────────────────────────────
 const currentSimulationId = ref(route.params.simulationId)
-const projectData = ref(null)
-const graphData = ref(null)
-const graphLoading = ref(false)
-const systemLogs = ref([])
-const currentStatus = ref('processing') // 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)' }
-})
+const projectData         = ref(null)
+const graphData           = ref(null)
+const graphLoading        = ref(false)
+const currentStatus       = ref('processing')
 
-// --- Status Computed ---
-const statusClass = computed(() => {
-  return currentStatus.value
-})
+// ── Status computed ────────────────────────────────────────────────────────────
+const statusVariant = computed(() => currentStatus.value)
 
-const statusText = computed(() => {
-  if (currentStatus.value === 'error') return 'Error'
+const statusLabel = computed(() => {
+  if (currentStatus.value === 'error')     return 'Error'
   if (currentStatus.value === 'completed') return 'Ready'
   return 'Preparing'
 })
 
-// --- 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 > 100) {
-    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
-  }
-}
+const updateStatus = (status) => { currentStatus.value = status }
 
+// ── Navigation ─────────────────────────────────────────────────────────────────
 const handleGoBack = () => {
-  // 返回到 process 页面
   if (projectData.value?.project_id) {
     router.push({ name: 'Process', params: { projectId: projectData.value.project_id } })
   } else {
@@ -152,66 +93,37 @@ const handleGoBack = () => {
 
 const handleNextStep = (params = {}) => {
   addLog(t('log.enterStep3'))
-
-  // 记录模拟轮数配置
   if (params.maxRounds) {
     addLog(t('log.customRoundsConfig', { rounds: params.maxRounds }))
   } else {
     addLog(t('log.useAutoRounds'))
   }
-  
-  // 构建路由参数
-  const routeParams = {
-    name: 'SimulationRun',
-    params: { simulationId: currentSimulationId.value }
-  }
-  
-  // 如果有自定义轮数，通过 query 参数传递
-  if (params.maxRounds) {
-    routeParams.query = { maxRounds: params.maxRounds }
-  }
-  
-  // 跳转到 Step 3 页面
+
+  const routeParams = { name: 'SimulationRun', params: { simulationId: currentSimulationId.value } }
+  if (params.maxRounds) routeParams.query = { maxRounds: params.maxRounds }
   router.push(routeParams)
 }
 
-// --- Data Logic ---
-
-/**
- * 检查并关闭正在运行的模拟
- * 当用户从 Step 3 返回到 Step 2 时，默认用户要退出模拟
- */
+// ── Simulation cleanup (quando volta do Step 3) ───────────────────────────────
 const checkAndStopRunningSimulation = async () => {
   if (!currentSimulationId.value) return
-  
   try {
-    // 先检查模拟环境是否存活
     const envStatusRes = await getEnvStatus({ simulation_id: currentSimulationId.value })
-    
     if (envStatusRes.success && envStatusRes.data?.env_alive) {
       addLog(t('log.detectedSimEnvRunning'))
-      
-      // 尝试优雅关闭模拟环境
       try {
-        const closeRes = await closeSimulationEnv({ 
-          simulation_id: currentSimulationId.value,
-          timeout: 10  // 10秒超时
-        })
-        
+        const closeRes = await closeSimulationEnv({ simulation_id: currentSimulationId.value, timeout: 10 })
         if (closeRes.success) {
           addLog(t('log.simEnvClosed'))
         } else {
           addLog(t('log.closeSimEnvFailedWithError', { error: closeRes.error || t('common.unknownError') }))
-          // 如果优雅关闭失败，尝试强制停止
           await forceStopSimulation()
         }
       } catch (closeErr) {
         addLog(t('log.closeSimEnvException', { error: closeErr.message }))
-        // 如果优雅关闭异常，尝试强制停止
         await forceStopSimulation()
       }
     } else {
-      // 环境未运行，但可能进程还在，检查模拟状态
       const simRes = await getSimulation(currentSimulationId.value)
       if (simRes.success && simRes.data?.status === 'running') {
         addLog(t('log.detectedSimRunning'))
@@ -219,14 +131,10 @@ const checkAndStopRunningSimulation = async () => {
       }
     }
   } catch (err) {
-    // 检查环境状态失败不影响后续流程
-    console.warn('检查模拟状态失败:', err)
+    console.warn('Erro ao verificar status da simulação:', err)
   }
 }
 
-/**
- * 强制停止模拟
- */
 const forceStopSimulation = async () => {
   try {
     const stopRes = await stopSimulation({ simulation_id: currentSimulationId.value })
@@ -240,26 +148,19 @@ const forceStopSimulation = async () => {
   }
 }
 
+// ── Data loading ───────────────────────────────────────────────────────────────
 const loadSimulationData = async () => {
   try {
     addLog(t('log.loadingSimData', { id: currentSimulationId.value }))
-
-    // 获取 simulation 信息
     const simRes = await getSimulation(currentSimulationId.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(t('log.projectLoadSuccess', { id: projRes.data.project_id }))
-          
-          // 获取 graph 数据
-          if (projRes.data.graph_id) {
-            await loadGraph(projRes.data.graph_id)
-          }
+          if (projRes.data.graph_id) await loadGraph(projRes.data.graph_id)
         }
       }
     } else {
@@ -286,18 +187,12 @@ const loadGraph = async (graphId) => {
 }
 
 const refreshGraph = () => {
-  if (projectData.value?.graph_id) {
-    loadGraph(projectData.value.graph_id)
-  }
+  if (projectData.value?.graph_id) loadGraph(projectData.value.graph_id)
 }
 
 onMounted(async () => {
   addLog(t('log.simViewInit'))
-  
-  // 检查并关闭正在运行的模拟（用户从 Step 3 返回时）
   await checkAndStopRunningSimulation()
-  
-  // 加载模拟数据
   loadSimulationData()
 })
 </script>
@@ -311,129 +206,4 @@ onMounted(async () => {
   overflow: hidden;
   font-family: 'Space Grotesk', 'Noto Sans SC', system-ui, 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;
-}
-
-.brand {
-  font-family: 'JetBrains Mono', monospace;
-  font-weight: 800;
-  font-size: 18px;
-  letter-spacing: 1px;
-  cursor: pointer;
-}
-
-.header-center {
-  position: absolute;
-  left: 50%;
-  transform: translateX(-50%);
-}
-
-.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.processing .dot { background: #FF5722; 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>
-
diff --git a/locales/en.json b/locales/en.json
index 544c68b1f6..f7ee0d543b 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -174,7 +174,10 @@
     "genderOther": "Other",
     "yearsOld": "years old",
     "initializing": "Initializing",
-    "generating": "Generating"
+    "generating": "Generating",
+    "showLess": "Show less",
+    "showAll": "Show all ({count})",
+    "profileModalProfession": "Profession"
   },
   "step3": {
     "startGenerateReport": "Generate Report",
@@ -295,7 +298,20 @@
     "graphDataLoading": "Loading graph data...",
     "waitingOntology": "Waiting for ontology generation...",
     "toggleMaximize": "Maximize/Restore",
-    "closeHint": "Close hint"
+    "closeHint": "Close hint",
+    "ctxTypes": "types",
+    "ctxStateMemory": "Memory active",
+    "ctxStateReady": "Graph ready",
+    "ctxStateBuilding": "Building",
+    "ctxStateOntology": "Ontology set",
+    "ctxStatePending": "Pending"
+  },
+  "system": {
+    "noLogs": "No logs yet.",
+    "labelProject": "Project",
+    "labelGraph": "Graph",
+    "labelSimulation": "Simulation",
+    "labelTask": "Task"
   },
   "history": {
     "title": "Simulation History",
diff --git a/locales/zh.json b/locales/zh.json
index cd747e2fa7..9a2549e4ae 100644
--- a/locales/zh.json
+++ b/locales/zh.json
@@ -174,7 +174,10 @@
     "genderOther": "其他",
     "yearsOld": "岁",
     "initializing": "初始化",
-    "generating": "生成中"
+    "generating": "生成中",
+    "showLess": "收起",
+    "showAll": "展开全部 ({count})",
+    "profileModalProfession": "职业"
   },
   "step3": {
     "startGenerateReport": "开始生成结果报告",
@@ -295,7 +298,20 @@
     "graphDataLoading": "图谱数据加载中...",
     "waitingOntology": "等待本体生成...",
     "toggleMaximize": "最大化/还原",
-    "closeHint": "关闭提示"
+    "closeHint": "关闭提示",
+    "ctxTypes": "类型",
+    "ctxStateMemory": "记忆激活",
+    "ctxStateReady": "图谱就绪",
+    "ctxStateBuilding": "构建中",
+    "ctxStateOntology": "本体已设置",
+    "ctxStatePending": "等待中"
+  },
+  "system": {
+    "noLogs": "暂无日志。",
+    "labelProject": "项目",
+    "labelGraph": "图谱",
+    "labelSimulation": "模拟",
+    "labelTask": "任务"
   },
   "history": {
     "title": "推演记录",