diff --git a/PRD.md b/PRD.md
index e960eeab..51905f43 100644
--- a/PRD.md
+++ b/PRD.md
@@ -1,6 +1,6 @@
 # Foresight 先见之明 — 产品需求文档 (PRD)
 
-> **版本**：v0.3 — 2026-04-15 大版本前最后一次校准
+> **版本**：v0.3.1 — 2026-04-15 生产链路打通
 > **基线**：基于 [MiroFish](https://github.com/666ghj/MiroFish) v0.1.2 二次开发，已大量重构。
 
 ---
@@ -449,7 +449,35 @@ FLASK_DEBUG=False
 
 ## 8. v0.3 当前状态与已交付
 
-### v0.3 已完成（本次大版本前的全部更新）
+### v0.3.1 hotfix（2026-04-15 生产链路打通）
+
+经过一次完整的端到端测试，修复了 7 个阻塞生产跑通的 bug：
+
+- [x] **Manus 式沉浸视图重构** — 回放界面从三栏分析面板 → Manus 风格单栏 cinematic 视图
+  - 顶部 breadcrumb、浏览器外壳 + 平台原生帖子卡片、Jump to live 按钮、live 指示灯
+  - 右上角 ◫/▦ 可切回三栏分析视图
+  - 自动轮询：sim running 时每 10s 拉数据
+  - 文件：`frontend/src/views/SimulationReplayView.vue`
+
+- [x] **LLM 客户端指数退避重试** — 识别 `RateLimitError / 429 / 5xx / 1302 / 超时`，5 次重试 1→2→4→8→16s 带随机抖动
+  - 文件：`backend/app/utils/llm_client.py`
+
+- [x] **GLM → Qwen 32B 双 LLM 降级 fallback** — 主 LLM 重试耗尽后自动切 SiliconFlow Qwen 32B 单次兜底，解决 GLM 低 RPM 配额的间歇性限流
+  - 文件：`backend/app/services/ontology_generator.py`
+
+- [x] **Qwen 32B 上下文爆修复** — `MAX_TEXT_LENGTH_FOR_LLM` 50000 → 28000 chars，保证 prompt+response < 32768 tokens
+  - 文件：`backend/app/services/ontology_generator.py`
+
+- [x] **Neo4j entity summary flatten** — monkey-patch `Neo4jEntityNodeOperations.save/save_bulk`，LLM 返回嵌套 dict 时自动取 `.value` 扁平化，防 Neo4j TypeError
+  - 文件：`backend/app/services/graphiti_client.py`
+
+- [x] **Frontend 无 pending state 路由修复** — `/process/new` 访问时无上传状态，自动 `router.replace({name:'Home'})` 不再死循环
+  - 文件：`frontend/src/views/MainView.vue`
+
+- [x] **semaphore 100 → 30** — OASIS 模拟并发峰值降低，避免 GLM 限流雪崩
+  - 文件：`backend/scripts/run_parallel_simulation.py`
+
+### v0.3 完成（本次大版本前的全部更新）
 
 #### 基础设施迁移
 - [x] 从 Zep Cloud → 自托管 Graphiti + Neo4j（脱离外部 SaaS 依赖）
@@ -578,3 +606,7 @@ FLASK_DEBUG=False
 | 2026-04-15 | 200 agents 设为甜点 | 8G 容量 + 95% 置信度足够 |
 | 2026-04-15 | 上线 Manus 式 replay UI | 给客户演示 + 复盘工具 |
 | 2026-04-15 | v0.4 路线图：国内平台 + SaaS | 用户战略需求 |
+| 2026-04-15 | v0.3.1 hotfix：7 个 bug 修复 | 第一次完整 E2E 跑通压力测试 |
+| 2026-04-15 | LLM client 加指数退避重试 + 双 LLM fallback | GLM RPM 配额低，retry 不够兜底 |
+| 2026-04-15 | Replay UI 重构为 Manus cinematic 风格 | 三栏分析面板对客户演示不够"沉浸" |
+| 2026-04-15 | semaphore 100 → 30 | 高并发触发 GLM 限流雪崩 |
diff --git a/backend/app/services/graphiti_client.py b/backend/app/services/graphiti_client.py
index 4e51f333..9ff6b7f6 100644
--- a/backend/app/services/graphiti_client.py
+++ b/backend/app/services/graphiti_client.py
@@ -27,6 +27,34 @@ def _safe_str(val):
     return str(val)
 
 
+def _flatten_entity_property(value):
+    """
+    Flatten a potentially nested dict/list value into a Neo4j-safe primitive.
+
+    Priority:
+    1. Primitive (str/int/float/bool/None) → return as-is
+    2. dict with "value" key → recurse into value (handles LLM JSON-schema pollution)
+    3. dict → json.dumps
+    4. list → flatten each element recursively
+    5. Other → str()
+    """
+    if value is None or isinstance(value, (str, int, float, bool)):
+        return value
+    if isinstance(value, dict):
+        if "value" in value:
+            return _flatten_entity_property(value["value"])
+        import json
+        return json.dumps(value, ensure_ascii=False)
+    if isinstance(value, list):
+        return [_flatten_entity_property(v) for v in value]
+    return str(value)
+
+
+def _sanitize_entity_data(entity_data: dict) -> dict:
+    """Sanitize all values in entity_data dict to Neo4j-safe primitives."""
+    return {k: _flatten_entity_property(v) for k, v in entity_data.items()}
+
+
 from graphiti_core.embedder.client import EmbedderClient
 
 
@@ -201,11 +229,79 @@ class GraphitiClient:
             embedder=embedder,
             cross_encoder=reranker,
         )
+
+        # Monkey-patch Neo4j entity node ops to sanitize LLM-polluted summary fields
+        # before they reach Neo4j (which rejects non-primitive property values).
+        self._patch_entity_node_ops()
+
         # Build indices
         _run_async(self._graphiti.build_indices_and_constraints())
         self._initialized = True
         logger.info("Graphiti core initialized with indices")
 
+    def _patch_entity_node_ops(self):
+        """
+        Patch Neo4jEntityNodeOperations.save and save_bulk to sanitize entity_data
+        before writing to Neo4j. Handles the case where Qwen/other LLMs return
+        nested dicts (JSON-schema metadata) in fields like 'summary'.
+        """
+        from graphiti_core.driver.neo4j.operations.entity_node_ops import Neo4jEntityNodeOperations
+        from graphiti_core.driver.driver import GraphProvider
+        from graphiti_core.driver.query_executor import QueryExecutor, Transaction
+        from graphiti_core.nodes import EntityNode
+        from graphiti_core.models.nodes.node_db_queries import (
+            get_entity_node_save_query,
+            get_entity_node_save_bulk_query,
+        )
+        from typing import Any
+
+        _flatten = _sanitize_entity_data  # closure over module-level helper
+
+        original_save = Neo4jEntityNodeOperations.save
+        original_save_bulk = Neo4jEntityNodeOperations.save_bulk
+
+        async def patched_save(self_ops, executor, node: EntityNode, tx=None):
+            entity_data: dict[str, Any] = {
+                'uuid': node.uuid,
+                'name': node.name,
+                'name_embedding': node.name_embedding,
+                'group_id': node.group_id,
+                'summary': node.summary,
+                'created_at': node.created_at,
+            }
+            entity_data.update(node.attributes or {})
+            entity_data = _flatten(entity_data)
+            labels = ':'.join(list(set(node.labels + ['Entity'])))
+            query = get_entity_node_save_query(GraphProvider.NEO4J, labels)
+            if tx is not None:
+                await tx.run(query, entity_data=entity_data)
+            else:
+                await executor.execute_query(query, entity_data=entity_data)
+
+        async def patched_save_bulk(self_ops, executor, nodes: list, tx=None, batch_size: int = 100):
+            prepared: list[dict[str, Any]] = []
+            for node in nodes:
+                entity_data: dict[str, Any] = {
+                    'uuid': node.uuid,
+                    'name': node.name,
+                    'group_id': node.group_id,
+                    'summary': node.summary,
+                    'created_at': node.created_at,
+                    'name_embedding': node.name_embedding,
+                    'labels': list(set(node.labels + ['Entity'])),
+                }
+                entity_data.update(node.attributes or {})
+                prepared.append(_flatten(entity_data))
+            query = get_entity_node_save_bulk_query(GraphProvider.NEO4J, prepared)
+            if tx is not None:
+                await tx.run(query, nodes=prepared)
+            else:
+                await executor.execute_query(query, nodes=prepared)
+
+        Neo4jEntityNodeOperations.save = patched_save
+        Neo4jEntityNodeOperations.save_bulk = patched_save_bulk
+        logger.info("Patched Neo4jEntityNodeOperations to sanitize LLM-polluted entity fields")
+
     @classmethod
     def get_instance(cls) -> 'GraphitiClient':
         """Singleton accessor."""
diff --git a/backend/app/services/ontology_generator.py b/backend/app/services/ontology_generator.py
index 8c630c41..b69dbc34 100644
--- a/backend/app/services/ontology_generator.py
+++ b/backend/app/services/ontology_generator.py
@@ -9,6 +9,7 @@ import re
 from typing import Dict, Any, List, Optional
 from ..utils.llm_client import LLMClient
 from ..utils.locale import get_language_instruction
+from ..config import Config
 
 logger = logging.getLogger(__name__)
 
@@ -181,6 +182,17 @@ class OntologyGenerator:
     
     def __init__(self, llm_client: Optional[LLMClient] = None):
         self.llm_client = llm_client or LLMClient()
+        # Fallback LLM: SiliconFlow Qwen 32B（高 RPM，GLM 限流时兜底）
+        self._fallback_llm: Optional[LLMClient] = None
+        try:
+            if Config.GRAPHITI_LLM_API_KEY:
+                self._fallback_llm = LLMClient(
+                    api_key=Config.GRAPHITI_LLM_API_KEY,
+                    base_url=Config.GRAPHITI_LLM_BASE_URL,
+                    model=Config.GRAPHITI_LLM_MODEL,
+                )
+        except Exception as e:
+            logger.warning(f"Fallback LLM 初始化失败: {e}")
     
     def generate(
         self,
@@ -213,20 +225,35 @@ class OntologyGenerator:
             {"role": "user", "content": user_message}
         ]
         
-        # 调用LLM
-        result = self.llm_client.chat_json(
-            messages=messages,
-            temperature=0.3,
-            max_tokens=4096
-        )
+        # 调用 LLM（主 LLM 重试 5 次全失败后，自动降级到 fallback）
+        try:
+            result = self.llm_client.chat_json(
+                messages=messages,
+                temperature=0.3,
+                max_tokens=4096
+            )
+        except Exception as primary_err:
+            if not self._fallback_llm:
+                raise
+            logger.warning(
+                f"主 LLM (GLM) 生成本体失败，降级到 Qwen 32B fallback: "
+                f"{type(primary_err).__name__}: {str(primary_err)[:200]}"
+            )
+            result = self._fallback_llm.chat_json(
+                messages=messages,
+                temperature=0.3,
+                max_tokens=4096
+            )
         
         # 验证和后处理
         result = self._validate_and_process(result)
         
         return result
     
-    # 传给 LLM 的文本最大长度（5万字）
-    MAX_TEXT_LENGTH_FOR_LLM = 50000
+    # 传给 LLM 的文本最大长度（2.8万字）
+    # Qwen 32768 token 窗口：system prompt ~2K tokens + 响应 ~4K tokens
+    # 留给文档的安全预算 ≈ 26K tokens，保守按 1 char ≈ 1 token 估算取 28000 chars
+    MAX_TEXT_LENGTH_FOR_LLM = 28000
     
     def _build_user_message(
         self,
@@ -243,7 +270,7 @@ class OntologyGenerator:
         # 如果文本超过5万字，截断（仅影响传给LLM的内容，不影响图谱构建）
         if len(combined_text) > self.MAX_TEXT_LENGTH_FOR_LLM:
             combined_text = combined_text[:self.MAX_TEXT_LENGTH_FOR_LLM]
-            combined_text += f"\n\n...(原文共{original_length}字，已截取前{self.MAX_TEXT_LENGTH_FOR_LLM}字用于本体分析)..."
+            combined_text += f"\n\n[...文档已截断以适应 LLM 上下文窗口。原文共 {original_length} 字，已截取前 {self.MAX_TEXT_LENGTH_FOR_LLM} 字用于本体分析...]"
         
         message = f"""## 模拟需求
 
diff --git a/backend/app/utils/llm_client.py b/backend/app/utils/llm_client.py
index b4f79faa..9477cbf6 100644
--- a/backend/app/utils/llm_client.py
+++ b/backend/app/utils/llm_client.py
@@ -5,11 +5,41 @@ LLM客户端封装
 
 import json
 import re
+import time
+import random
+import logging
 from typing import Optional, Dict, Any, List
-from openai import OpenAI
+from openai import OpenAI, RateLimitError, APIError, APIConnectionError, APITimeoutError
 
 from ..config import Config
 
+logger = logging.getLogger('foresight.llm_client')
+
+# 重试配置（针对 429 / 5xx / 超时 / 连接错误）
+_MAX_RETRIES = 5
+_BASE_BACKOFF = 1.0  # 首次重试等 1s
+_MAX_BACKOFF = 30.0  # 单次最多等 30s
+
+
+def _is_rate_limit_error(err: Exception) -> bool:
+    """判断是否是速率限制/可重试错误"""
+    if isinstance(err, (RateLimitError, APIConnectionError, APITimeoutError)):
+        return True
+    if isinstance(err, APIError):
+        # 429 / 500 / 502 / 503 / 504 都可重试
+        status = getattr(err, "status_code", None) or getattr(err, "code", None)
+        try:
+            status = int(status) if status else None
+        except (ValueError, TypeError):
+            status = None
+        if status in (429, 500, 502, 503, 504):
+            return True
+        # 智谱 1302 = 速率限制
+        msg = str(err)
+        if "1302" in msg or "rate limit" in msg.lower() or "速率限制" in msg or "too many request" in msg.lower():
+            return True
+    return False
+
 
 class LLMClient:
     """LLM客户端"""
@@ -61,7 +91,28 @@ class LLMClient:
         if response_format:
             kwargs["response_format"] = response_format
 
-        response = self.client.chat.completions.create(**kwargs)
+        # 带指数退避的重试：处理 429/5xx/超时等可恢复错误
+        response = None
+        last_err = None
+        for attempt in range(_MAX_RETRIES + 1):
+            try:
+                response = self.client.chat.completions.create(**kwargs)
+                break
+            except Exception as err:
+                last_err = err
+                if attempt >= _MAX_RETRIES or not _is_rate_limit_error(err):
+                    raise
+                # 指数退避 + 随机抖动
+                backoff = min(_MAX_BACKOFF, _BASE_BACKOFF * (2 ** attempt))
+                backoff += random.uniform(0, backoff * 0.3)
+                logger.warning(
+                    f"LLM 调用遇到可重试错误 (attempt {attempt + 1}/{_MAX_RETRIES}): "
+                    f"{type(err).__name__}: {str(err)[:200]}. 退避 {backoff:.1f}s 后重试..."
+                )
+                time.sleep(backoff)
+        if response is None:
+            raise last_err or RuntimeError("LLM 调用失败（未知原因）")
+
         # Token 追踪（v0.3 新增）：记录每次调用的 token 消耗，按当前 stage 归类
         try:
             from . import token_tracker
diff --git a/backend/scripts/run_parallel_simulation.py b/backend/scripts/run_parallel_simulation.py
index 0eeb527f..ef99677f 100644
--- a/backend/scripts/run_parallel_simulation.py
+++ b/backend/scripts/run_parallel_simulation.py
@@ -1156,7 +1156,7 @@ async def run_twitter_simulation(
         agent_graph=result.agent_graph,
         platform=oasis.DefaultPlatformType.TWITTER,
         database_path=db_path,
-        semaphore=100,  # 限制最大并发 LLM 请求数，防止 API 过载
+        semaphore=30,  # 限制最大并发 LLM 请求数，防止 API 过载（GLM RPM 友好值）
     )
     
     await result.env.reset()
@@ -1347,7 +1347,7 @@ async def run_reddit_simulation(
         agent_graph=result.agent_graph,
         platform=oasis.DefaultPlatformType.REDDIT,
         database_path=db_path,
-        semaphore=100,  # 限制最大并发 LLM 请求数，防止 API 过载
+        semaphore=30,  # 限制最大并发 LLM 请求数，防止 API 过载（GLM RPM 友好值）
     )
     
     await result.env.reset()
diff --git a/frontend/src/views/MainView.vue b/frontend/src/views/MainView.vue
index 93a13433..7772f728 100644
--- a/frontend/src/views/MainView.vue
+++ b/frontend/src/views/MainView.vue
@@ -201,8 +201,13 @@ const initProject = async () => {
 const handleNewProject = async () => {
   const pending = getPendingUpload()
   if (!pending.isPending || pending.files.length === 0) {
-    error.value = 'No pending files found.'
-    addLog('Error: No pending files found for new project.')
+    error.value = 'No pending files found. Redirecting to home to upload documents...'
+    addLog('No pending upload detected for /process/new. Redirecting to Home.')
+    // Direct-visit / refresh case: pending state is empty because it's in-memory only.
+    // Send user back to Home so they can upload files and start a real project.
+    setTimeout(() => {
+      router.replace({ name: 'Home' })
+    }, 800)
     return
   }
   
diff --git a/frontend/src/views/SimulationReplayView.vue b/frontend/src/views/SimulationReplayView.vue
index 489b694a..33f8ceb5 100644
--- a/frontend/src/views/SimulationReplayView.vue
+++ b/frontend/src/views/SimulationReplayView.vue
@@ -1,36 +1,151 @@
 <template>
   <div class="replay-view">
-    <!-- Header -->
+    <!-- ========== Header bar ========== -->
     <header class="replay-header">
       <div class="header-left">
-        <button class="back-btn" @click="goBack">← {{ $t('common.back') }}</button>
-        <div class="brand">
-          <span class="brand-en">foresight</span>
-          <span class="brand-sep">·</span>
-          <span class="brand-zh">回放</span>
+        <button class="back-btn" @click="goBack">←</button>
+        <div class="title-block">
+          <div class="title-main">Foresight's Sandbox</div>
+          <div class="title-sub">
+            <span v-if="currentAction">
+              Foresight is running
+              <span class="platform-tag" :class="currentAction.platform">
+                {{ currentAction.platform === 'twitter' ? 'Twitter' : 'Reddit' }}
+              </span>
+              simulation ·
+              <span class="sub-detail">Round {{ currentAction.round_num }}/{{ maxRound }}</span>
+              ·
+              <span class="sub-detail">Day {{ currentRound?.simulated_day ?? '-' }}
+                {{ String(currentRound?.simulated_hour ?? 0).padStart(2, '0') }}:00</span>
+            </span>
+            <span v-else-if="loading">loading replay data…</span>
+            <span v-else>no actions yet</span>
+          </div>
         </div>
       </div>
-      <div class="header-center">
-        <span class="sim-id mono">{{ simulationId }}</span>
-        <span class="status-badge" :class="statusClass">{{ statusLabel }}</span>
-      </div>
       <div class="header-right">
-        <button class="icon-btn" @click="reload" :title="$t('common.refresh') || '刷新'">↻</button>
+        <button class="icon-btn" @click="toggleAnalyst" :title="analystMode ? '切换沉浸视图' : '切换分析视图'">
+          {{ analystMode ? '◫' : '▦' }}
+        </button>
+        <button class="icon-btn" @click="reload" title="刷新数据">↻</button>
       </div>
     </header>
 
-    <!-- Loading / Error -->
-    <div v-if="loading" class="loading-screen">
-      <div class="loading-text">加载回放数据…</div>
+    <!-- ========== Loading / Error ========== -->
+    <div v-if="loading" class="screen-state">
+      <div class="state-text">加载回放数据…</div>
     </div>
-    <div v-else-if="loadError" class="error-screen">
-      <div class="error-text">加载失败: {{ loadError }}</div>
+    <div v-else-if="loadError" class="screen-state">
+      <div class="state-text error">加载失败：{{ loadError }}</div>
       <button class="primary-btn" @click="reload">重试</button>
     </div>
 
-    <!-- Main 3-column layout -->
-    <div v-else-if="replayData" class="replay-body">
-      <!-- LEFT: Workflow timeline -->
+    <!-- ========== Main Stage (Cinematic Mode) ========== -->
+    <main v-else-if="replayData && !analystMode" class="stage-wrap">
+      <div class="stage">
+        <!-- 平台框（类似浏览器/reddit 外壳） -->
+        <div class="platform-frame" :class="currentAction?.platform || 'reddit'">
+          <div class="platform-frame-head">
+            <span class="dot red"></span>
+            <span class="dot yellow"></span>
+            <span class="dot green"></span>
+            <span class="platform-url mono">
+              <template v-if="currentAction?.platform === 'twitter'">x.com/{{ currentAction.agent_name }}</template>
+              <template v-else-if="currentAction?.platform === 'reddit'">reddit.com/r/foresight/u/{{ currentAction.agent_name }}</template>
+              <template v-else>foresight://sandbox/idle</template>
+            </span>
+          </div>
+
+          <!-- 内容区 -->
+          <div class="platform-frame-body">
+            <!-- 有动作时显示帖子卡片 -->
+            <div v-if="currentAction" class="post-card">
+              <!-- 平台头部：reddit 子版 或 twitter 推文顶栏 -->
+              <div v-if="currentAction.platform === 'reddit'" class="reddit-subreddit-bar">
+                r/foresight · posted by u/{{ currentAction.agent_name }}
+                · {{ formatTime(currentAction.timestamp) }}
+              </div>
+              <div v-else class="twitter-top-bar">
+                <div class="avatar" :style="avatarGradient(currentAction.agent_id)">{{ agentInitial(currentAction.agent_name) }}</div>
+                <div class="tw-names">
+                  <div class="tw-display">{{ currentAction.agent_name }}</div>
+                  <div class="tw-handle mono">@{{ getAgentUsername(currentAction.agent_id) }} · {{ formatTime(currentAction.timestamp) }}</div>
+                </div>
+              </div>
+
+              <!-- 动作类型 badge -->
+              <div class="action-type-badge" :class="currentAction.action_type.toLowerCase()">
+                {{ formatActionType(currentAction.action_type) }}
+              </div>
+
+              <!-- 内容 -->
+              <div class="post-content" v-if="currentAction.action_args?.content">
+                {{ currentAction.action_args.content }}
+              </div>
+              <div class="post-content empty" v-else-if="currentAction.action_type === 'DO_NOTHING'">
+                <em>（该 Agent 本轮未产生动作）</em>
+              </div>
+              <div class="post-content" v-else>
+                {{ JSON.stringify(currentAction.action_args) }}
+              </div>
+
+              <!-- 底部互动栏 -->
+              <div v-if="currentAction.platform === 'reddit'" class="reddit-actions">
+                <span class="reddit-btn">▲ 0</span>
+                <span class="reddit-btn">💬 {{ (currentRound?.stats?.by_type?.CREATE_COMMENT) || 0 }}</span>
+                <span class="reddit-btn">⇄ {{ (currentRound?.stats?.by_type?.QUOTE_POST) || 0 }}</span>
+                <span class="reddit-btn">Share</span>
+              </div>
+              <div v-else class="twitter-actions">
+                <span class="tw-btn">💬 0</span>
+                <span class="tw-btn">🔁 {{ (currentRound?.stats?.by_type?.QUOTE_POST) || 0 }}</span>
+                <span class="tw-btn">♡ 0</span>
+                <span class="tw-btn">📊 —</span>
+              </div>
+            </div>
+            <!-- 无动作占位 -->
+            <div v-else class="empty-stage">
+              <div class="empty-icon">◌</div>
+              <div class="empty-msg">
+                <template v-if="allActions.length === 0">
+                  还没有任何动作数据，点刷新试试
+                </template>
+                <template v-else>
+                  拖动进度条开始回放
+                </template>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- stage 下方：round 统计带 -->
+        <div class="stage-meta" v-if="currentRound">
+          <div class="meta-item">
+            <span class="meta-label">本轮动作</span>
+            <span class="meta-value">{{ currentRound.stats.total_actions }}</span>
+          </div>
+          <div class="meta-item">
+            <span class="meta-label">活跃 agent</span>
+            <span class="meta-value">{{ currentRound.stats.active_agents_count }}</span>
+          </div>
+          <div class="meta-item">
+            <span class="meta-label">POST</span>
+            <span class="meta-value">{{ currentRound.stats.by_type?.CREATE_POST || 0 }}</span>
+          </div>
+          <div class="meta-item">
+            <span class="meta-label">COMMENT</span>
+            <span class="meta-value">{{ currentRound.stats.by_type?.CREATE_COMMENT || 0 }}</span>
+          </div>
+          <div class="meta-item">
+            <span class="meta-label">QUOTE</span>
+            <span class="meta-value">{{ currentRound.stats.by_type?.QUOTE_POST || 0 }}</span>
+          </div>
+        </div>
+      </div>
+    </main>
+
+    <!-- ========== Analyst Mode (原三栏) ========== -->
+    <main v-else-if="replayData && analystMode" class="analyst-body">
       <aside class="col-workflow">
         <h3 class="col-title">工作流时间线</h3>
         <div class="workflow-list">
@@ -40,135 +155,66 @@
             class="workflow-step"
             :class="{ 'is-completed': step.status === 'completed', 'is-running': step.status === 'running' }"
           >
-            <div class="step-marker">
-              <span class="step-num">{{ step.step }}</span>
-            </div>
+            <div class="step-marker"><span class="step-num">{{ step.step }}</span></div>
             <div class="step-body">
               <div class="step-name">{{ step.name }}</div>
               <div class="step-meta">
                 <template v-if="step.step === 1">
-                  <div class="meta-line">{{ step.metadata.files?.length || 0 }} 个文件 · {{ formatLength(step.metadata.text_length) }}</div>
-                  <div class="meta-line dim" v-if="step.metadata.requirement">需求：{{ truncate(step.metadata.requirement, 40) }}</div>
+                  <div class="meta-line">{{ step.metadata.files?.length || 0 }} 个文件</div>
                 </template>
                 <template v-else-if="step.step === 2">
                   <div class="meta-line">{{ step.metadata.entities_count }} 个实体</div>
-                  <div class="meta-line dim mono">{{ step.metadata.graph_id }}</div>
                 </template>
                 <template v-else-if="step.step === 3">
-                  <div class="meta-line">{{ step.metadata.profiles_count }} 个 Agent 人设</div>
-                  <div class="meta-line dim">已加载 {{ step.metadata.agents_loaded }}</div>
+                  <div class="meta-line">{{ step.metadata.profiles_count }} 个人设</div>
                 </template>
                 <template v-else-if="step.step === 4">
                   <div class="meta-line">{{ step.metadata.total_simulation_hours }}h / 每轮 {{ step.metadata.minutes_per_round }}min</div>
-                  <div class="meta-line dim">{{ step.metadata.initial_posts_count }} 条初始帖子</div>
                 </template>
                 <template v-else-if="step.step === 5">
                   <div class="meta-line">{{ step.metadata.total_rounds_executed }} 轮 · {{ step.metadata.total_actions }} 动作</div>
-                  <div class="meta-line dim">
-                    Twitter {{ step.metadata.by_platform?.twitter || 0 }} · Reddit {{ step.metadata.by_platform?.reddit || 0 }}
-                  </div>
                 </template>
               </div>
-              <div class="step-status-tag" :class="step.status">{{ stepStatusLabel(step.status) }}</div>
             </div>
           </div>
         </div>
       </aside>
 
-      <!-- CENTER: Featured action + scrolling feed -->
-      <main class="col-center">
-        <!-- Featured action card -->
-        <section class="featured-action">
-          <div class="featured-header">
-            <span class="section-label">当前动作</span>
-            <span v-if="currentAction" class="action-counter mono">
-              {{ currentActionIndex + 1 }} / {{ allActions.length }}
-            </span>
-          </div>
-          <div v-if="currentAction" class="action-card large">
-            <div class="action-card-top">
-              <div class="action-agent">
-                <div class="agent-avatar">{{ agentInitial(currentAction.agent_name) }}</div>
-                <div class="agent-info">
-                  <div class="agent-name">{{ currentAction.agent_name }}</div>
-                  <div class="agent-meta mono">#{{ currentAction.agent_id }} · {{ getAgentProfession(currentAction.agent_id) }}</div>
-                </div>
-              </div>
-              <div class="action-tags">
-                <span class="tag platform" :class="currentAction.platform">{{ currentAction.platform }}</span>
-                <span class="tag action-type">{{ currentAction.action_type }}</span>
-              </div>
-            </div>
-            <div class="action-content">
-              {{ currentAction.action_args?.content || currentAction.action_args?.text || JSON.stringify(currentAction.action_args) }}
-            </div>
-            <div class="action-card-bottom">
-              <span class="time-info">
-                Day {{ currentRound?.simulated_day || '-' }} · {{ String(currentRound?.simulated_hour ?? 0).padStart(2, '0') }}:00
-              </span>
-              <span class="time-info mono dim">round {{ currentAction.round_num }}</span>
-            </div>
-          </div>
-          <div v-else class="empty-card">
-            <span>还没有动作可回放</span>
-          </div>
-        </section>
-
-        <!-- Action feed -->
-        <section class="feed-section">
-          <div class="feed-header">
-            <span class="section-label">动作流</span>
-            <span class="dim mono">{{ visibleFeed.length }} / {{ allActions.length }}</span>
-          </div>
-          <div class="feed-list" ref="feedListRef">
-            <div
-              v-for="(action, idx) in visibleFeed"
-              :key="idx"
-              class="feed-row"
-              :class="{ active: idx === visibleFeed.length - 1 }"
-              @click="jumpToActionByGlobalIndex(action._gIdx)"
-            >
-              <span class="feed-time mono">r{{ action.round_num }}</span>
-              <span class="feed-platform" :class="action.platform">{{ action.platform[0].toUpperCase() }}</span>
-              <span class="feed-agent">{{ action.agent_name }}</span>
-              <span class="feed-type">{{ action.action_type }}</span>
-              <span class="feed-content">{{ truncate(action.action_args?.content || '', 60) }}</span>
-            </div>
-            <div v-if="visibleFeed.length === 0" class="feed-empty">尚无动作记录</div>
-          </div>
-        </section>
-      </main>
-
-      <!-- RIGHT: Aggregate stats -->
-      <aside class="col-stats">
-        <h3 class="col-title">全局统计</h3>
-
-        <div class="stat-block">
-          <div class="stat-row">
-            <span class="stat-label">总动作</span>
-            <span class="stat-value mono">{{ replayData.aggregate.total_actions }}</span>
-          </div>
-          <div class="stat-row">
-            <span class="stat-label">已跑 rounds</span>
-            <span class="stat-value mono">{{ replayData.aggregate.rounds_with_actions }}</span>
-          </div>
-          <div class="stat-row">
-            <span class="stat-label">Agent 总数</span>
-            <span class="stat-value mono">{{ replayData.agents.length }}</span>
+      <section class="col-feed">
+        <h3 class="col-title">动作流（全部 {{ allActions.length }} 条）</h3>
+        <div class="feed-list" ref="feedListRef">
+          <div
+            v-for="(action, idx) in allActions"
+            :key="idx"
+            class="feed-row"
+            :class="{ active: idx === currentActionIndex }"
+            @click="jumpToIndex(idx)"
+          >
+            <span class="feed-time mono">r{{ action.round_num }}</span>
+            <span class="feed-platform" :class="action.platform">{{ action.platform[0].toUpperCase() }}</span>
+            <span class="feed-agent">{{ action.agent_name }}</span>
+            <span class="feed-type">{{ action.action_type }}</span>
+            <span class="feed-content">{{ truncate(action.action_args?.content || '', 80) }}</span>
           </div>
         </div>
+      </section>
 
+      <aside class="col-stats">
+        <h3 class="col-title">全局统计</h3>
+        <div class="stat-block">
+          <div class="stat-row"><span>总动作</span><span class="mono">{{ replayData.aggregate.total_actions }}</span></div>
+          <div class="stat-row"><span>有效 rounds</span><span class="mono">{{ replayData.aggregate.rounds_with_actions }}</span></div>
+          <div class="stat-row"><span>Twitter</span><span class="mono">{{ replayData.aggregate.platform_totals?.twitter || 0 }}</span></div>
+          <div class="stat-row"><span>Reddit</span><span class="mono">{{ replayData.aggregate.platform_totals?.reddit || 0 }}</span></div>
+        </div>
         <div class="stat-section">
           <div class="section-label-sm">类型分布</div>
           <div v-for="(count, type) in replayData.aggregate.action_type_distribution" :key="type" class="bar-row">
             <span class="bar-label">{{ type }}</span>
-            <div class="bar-track">
-              <div class="bar-fill" :style="{ width: barWidth(count) + '%' }"></div>
-            </div>
+            <div class="bar-track"><div class="bar-fill" :style="{ width: barWidth(count) + '%' }"></div></div>
             <span class="bar-num mono">{{ count }}</span>
           </div>
         </div>
-
         <div class="stat-section">
           <div class="section-label-sm">Top Agents</div>
           <div v-for="agent in replayData.aggregate.top_agents.slice(0, 8)" :key="agent.agent_id" class="top-agent-row">
@@ -177,64 +223,49 @@
             <span class="top-agent-count mono">{{ agent.count }}</span>
           </div>
         </div>
-
-        <div class="stat-section">
-          <div class="section-label-sm">平台分布</div>
-          <div class="platform-split">
-            <div class="platform-item twitter">
-              <span class="platform-name">Twitter</span>
-              <span class="platform-count mono">{{ replayData.aggregate.platform_totals?.twitter || 0 }}</span>
-            </div>
-            <div class="platform-item reddit">
-              <span class="platform-name">Reddit</span>
-              <span class="platform-count mono">{{ replayData.aggregate.platform_totals?.reddit || 0 }}</span>
-            </div>
-          </div>
-        </div>
       </aside>
-    </div>
+    </main>
 
-    <!-- Bottom scrubber -->
+    <!-- ========== Scrubber bar (always visible when data ready) ========== -->
     <footer v-if="replayData && allActions.length > 0" class="replay-footer">
-      <div class="footer-controls">
-        <button class="ctrl-btn" @click="stepBack" :disabled="currentActionIndex === 0">⏮</button>
-        <button class="ctrl-btn primary" @click="togglePlay">
-          {{ isPlaying ? '⏸' : '▶' }}
+      <!-- 上排：时间戳 + Jump to live + live 指示灯 -->
+      <div class="footer-top">
+        <div class="timestamp-chip mono">
+          {{ currentAction ? formatFullTime(currentAction.timestamp) : '--' }}
+        </div>
+        <button class="jump-live-btn" @click="jumpToLive" :disabled="isAtLive">
+          ▶ Jump to live
         </button>
-        <button class="ctrl-btn" @click="stepForward" :disabled="currentActionIndex >= allActions.length - 1">⏭</button>
-      </div>
-
-      <div class="scrubber">
-        <input
-          type="range"
-          min="0"
-          :max="allActions.length - 1"
-          v-model.number="currentActionIndex"
-          @input="onScrubberInput"
-        />
-        <div class="scrubber-info">
-          <span class="info-left mono">
-            {{ currentActionIndex + 1 }} / {{ allActions.length }}
-            · round {{ currentAction?.round_num ?? '-' }}/{{ replayData.config?.time_config?.total_simulation_hours
-              ? Math.floor((replayData.config.time_config.total_simulation_hours * 60) / replayData.config.time_config.minutes_per_round)
-              : '?' }}
-          </span>
-          <span class="info-right">
-            Day {{ currentRound?.simulated_day || '-' }} ·
-            {{ String(currentRound?.simulated_hour ?? 0).padStart(2, '0') }}:00
-          </span>
+        <div class="live-indicator" :class="{ 'is-live': isSimLive }">
+          <span class="live-dot"></span>
+          {{ isSimLive ? 'live' : 'ended' }}
         </div>
       </div>
 
-      <div class="footer-speed">
-        <span class="speed-label">速度</span>
-        <button
-          v-for="s in [0.5, 1, 2, 5, 10]"
-          :key="s"
-          class="speed-btn"
-          :class="{ active: speed === s }"
-          @click="speed = s"
-        >{{ s }}x</button>
+      <!-- 进度条 -->
+      <div class="scrubber-row">
+        <button class="step-btn" @click="stepBack" :disabled="currentActionIndex === 0">⏮</button>
+        <button class="play-btn" @click="togglePlay">{{ isPlaying ? '⏸' : '▶' }}</button>
+        <button class="step-btn" @click="stepForward" :disabled="currentActionIndex >= allActions.length - 1">⏭</button>
+        <div class="scrubber">
+          <input
+            type="range"
+            min="0"
+            :max="allActions.length - 1"
+            v-model.number="currentActionIndex"
+            @input="pause"
+          />
+        </div>
+        <div class="speed-group">
+          <button v-for="s in [0.5, 1, 2, 5, 10]" :key="s" class="speed-btn" :class="{ active: speed === s }" @click="speed = s">{{ s }}x</button>
+        </div>
+      </div>
+
+      <!-- 底部任务栏 -->
+      <div class="footer-bottom">
+        <span class="task-icon">{{ taskIcon }}</span>
+        <span class="task-label">{{ taskLabel }}</span>
+        <span class="task-progress mono">step {{ activeStep }}/5</span>
       </div>
     </footer>
   </div>
@@ -256,10 +287,12 @@ const currentActionIndex = ref(0)
 const isPlaying = ref(false)
 const speed = ref(1)
 const feedListRef = ref(null)
+const analystMode = ref(false)
 
+// 自动轮询：如果 sim 还在 running，每 10s 重新拉数据
+let pollTimer = null
 let playTimer = null
 
-// All actions flattened in time order, each carrying its global index
 const allActions = computed(() => {
   if (!replayData.value) return []
   const out = []
@@ -276,23 +309,47 @@ const allActions = computed(() => {
 const currentAction = computed(() => allActions.value[currentActionIndex.value] || null)
 const currentRound = computed(() => currentAction.value?._round || null)
 
-const visibleFeed = computed(() => {
-  // Show last 30 actions up to current
-  const end = currentActionIndex.value + 1
-  const start = Math.max(0, end - 30)
-  return allActions.value.slice(start, end)
+const maxRound = computed(() => {
+  const tc = replayData.value?.config?.time_config
+  if (tc?.total_simulation_hours && tc?.minutes_per_round) {
+    return Math.floor((tc.total_simulation_hours * 60) / tc.minutes_per_round)
+  }
+  return replayData.value?.rounds?.length || '?'
 })
 
-const statusClass = computed(() => {
+const isSimLive = computed(() => {
   const s = replayData.value?.simulation?.status
-  if (s === 'running') return 'running'
-  if (s === 'completed' || s === 'ready') return 'completed'
-  if (s === 'failed') return 'failed'
-  return ''
+  return s === 'running' || s === 'preparing'
 })
-const statusLabel = computed(() => {
-  const s = replayData.value?.simulation?.status || '-'
-  return ({ running: '运行中', completed: '已完成', ready: '就绪', failed: '失败', preparing: '准备中' })[s] || s
+
+const isAtLive = computed(() => currentActionIndex.value >= allActions.value.length - 1)
+
+// 当前激活的 step（基于 workflow status）
+const activeStep = computed(() => {
+  if (!replayData.value) return 0
+  const wf = replayData.value.workflow || []
+  for (let i = wf.length - 1; i >= 0; i--) {
+    if (wf[i].status === 'running') return wf[i].step
+  }
+  for (let i = wf.length - 1; i >= 0; i--) {
+    if (wf[i].status === 'completed') return wf[i].step
+  }
+  return 1
+})
+
+const taskIcon = computed(() => {
+  const wf = replayData.value?.workflow || []
+  const step = wf.find(w => w.step === activeStep.value)
+  if (!step) return '◌'
+  if (step.status === 'completed') return '✓'
+  if (step.status === 'running') return '▶'
+  return '◌'
+})
+
+const taskLabel = computed(() => {
+  const wf = replayData.value?.workflow || []
+  const step = wf.find(w => w.step === activeStep.value)
+  return step?.name || '等待中'
 })
 
 const maxTypeCount = computed(() => {
@@ -304,55 +361,99 @@ function barWidth(count) {
   return Math.round((count / maxTypeCount.value) * 100)
 }
 
-function stepStatusLabel(s) {
-  return ({ completed: '✓', running: '运行中', pending: '待开始', failed: '失败', ready: '就绪' })[s] || s
-}
-
 function truncate(s, n) {
   if (!s) return ''
   return s.length > n ? s.slice(0, n) + '…' : s
 }
 
-function formatLength(n) {
-  if (!n) return '0 字符'
-  if (n > 10000) return (n / 10000).toFixed(1) + 'w 字'
-  if (n > 1000) return (n / 1000).toFixed(1) + 'k 字'
-  return n + ' 字'
-}
-
 function agentInitial(name) {
-  if (!name) return '?'
-  return name.slice(0, 1).toUpperCase()
+  return name ? name.slice(0, 1).toUpperCase() : '?'
 }
 
-function getAgentProfession(agentId) {
+function avatarGradient(agentId) {
+  const palette = [
+    ['#FF5722', '#FF8A65'],
+    ['#3F51B5', '#7986CB'],
+    ['#4CAF50', '#81C784'],
+    ['#E91E63', '#F06292'],
+    ['#00BCD4', '#4DD0E1'],
+    ['#FFC107', '#FFD54F'],
+    ['#9C27B0', '#BA68C8'],
+    ['#795548', '#A1887F'],
+  ]
+  const [a, b] = palette[(agentId || 0) % palette.length]
+  return `background: linear-gradient(135deg, ${a}, ${b})`
+}
+
+function getAgentUsername(agentId) {
   const a = replayData.value?.agents?.find(x => x.id === agentId)
-  return a?.profession || '-'
+  return a?.username || `agent_${agentId}`
 }
 
-async function loadReplay() {
-  loading.value = true
-  loadError.value = null
+function formatTime(ts) {
+  if (!ts) return '--'
+  try {
+    const d = new Date(ts)
+    return d.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit', hour12: false })
+  } catch {
+    return '--'
+  }
+}
+
+function formatFullTime(ts) {
+  if (!ts) return '--'
+  try {
+    const d = new Date(ts)
+    return d.toLocaleString('zh-CN', {
+      year: 'numeric', month: '2-digit', day: '2-digit',
+      hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false
+    })
+  } catch {
+    return ts
+  }
+}
+
+function formatActionType(type) {
+  const map = {
+    CREATE_POST: '✏️ 发帖',
+    CREATE_COMMENT: '💬 评论',
+    LIKE_POST: '♡ 点赞',
+    QUOTE_POST: '🔁 转发',
+    DO_NOTHING: '◌ 观望',
+  }
+  return map[type] || type
+}
+
+async function loadReplay(silent = false) {
+  if (!silent) {
+    loading.value = true
+    loadError.value = null
+  }
   try {
     const res = await getSimulationReplay(simulationId)
     if (res.success) {
+      const prevLen = allActions.value.length
+      const wasAtLive = currentActionIndex.value >= prevLen - 1
       replayData.value = res.data
-      // Reset to last action so user sees the most recent state
-      const total = res.data.rounds.reduce((sum, r) => sum + r.actions.length, 0)
-      currentActionIndex.value = Math.max(0, total - 1)
-    } else {
+      const newLen = allActions.value.length
+      // 初次加载或之前处于 live 状态时，自动跳到最新
+      if (!silent || wasAtLive) {
+        currentActionIndex.value = Math.max(0, newLen - 1)
+      }
+      loadError.value = null
+    } else if (!silent) {
       loadError.value = res.error || '未知错误'
     }
   } catch (e) {
-    loadError.value = e.message || String(e)
+    if (!silent) loadError.value = e.message || String(e)
   } finally {
-    loading.value = false
+    if (!silent) loading.value = false
   }
 }
 
 function reload() {
   pause()
-  loadReplay()
+  loadReplay(false)
 }
 
 function togglePlay() {
@@ -361,86 +462,59 @@ function togglePlay() {
 }
 
 function play() {
-  if (currentActionIndex.value >= allActions.value.length - 1) {
-    currentActionIndex.value = 0
-  }
+  if (currentActionIndex.value >= allActions.value.length - 1) currentActionIndex.value = 0
   isPlaying.value = true
-  scheduleNextStep()
+  scheduleNext()
 }
 
 function pause() {
   isPlaying.value = false
-  if (playTimer) {
-    clearTimeout(playTimer)
-    playTimer = null
-  }
+  if (playTimer) { clearTimeout(playTimer); playTimer = null }
 }
 
-function scheduleNextStep() {
+function scheduleNext() {
   if (!isPlaying.value) return
-  const intervalMs = 800 / speed.value
+  const interval = 1200 / speed.value
   playTimer = setTimeout(() => {
     if (currentActionIndex.value < allActions.value.length - 1) {
       currentActionIndex.value++
-      scrollFeedToBottom()
-      scheduleNextStep()
+      scheduleNext()
     } else {
       pause()
     }
-  }, intervalMs)
+  }, interval)
 }
 
-function stepForward() {
-  pause()
-  if (currentActionIndex.value < allActions.value.length - 1) {
-    currentActionIndex.value++
-    scrollFeedToBottom()
-  }
+function stepForward() { pause(); if (currentActionIndex.value < allActions.value.length - 1) currentActionIndex.value++ }
+function stepBack() { pause(); if (currentActionIndex.value > 0) currentActionIndex.value-- }
+function jumpToIndex(idx) { pause(); currentActionIndex.value = idx }
+function jumpToLive() { pause(); currentActionIndex.value = Math.max(0, allActions.value.length - 1) }
+function toggleAnalyst() { analystMode.value = !analystMode.value }
+function goBack() { router.back() }
+
+function startPolling() {
+  if (pollTimer) return
+  pollTimer = setInterval(() => {
+    // 只在 sim 还在 running 时轮询
+    if (isSimLive.value) loadReplay(true)
+  }, 10000)
 }
 
-function stepBack() {
-  pause()
-  if (currentActionIndex.value > 0) {
-    currentActionIndex.value--
-    scrollFeedToBottom()
-  }
-}
-
-function onScrubberInput() {
-  pause()
-  scrollFeedToBottom()
-}
-
-function jumpToActionByGlobalIndex(idx) {
-  pause()
-  currentActionIndex.value = idx
-}
-
-function scrollFeedToBottom() {
-  nextTick(() => {
-    if (feedListRef.value) {
-      feedListRef.value.scrollTop = feedListRef.value.scrollHeight
-    }
-  })
-}
-
-function goBack() {
-  router.back()
+function stopPolling() {
+  if (pollTimer) { clearInterval(pollTimer); pollTimer = null }
 }
 
 watch(speed, () => {
-  if (isPlaying.value) {
-    if (playTimer) clearTimeout(playTimer)
-    scheduleNextStep()
-  }
+  if (isPlaying.value) { if (playTimer) clearTimeout(playTimer); scheduleNext() }
 })
 
 onMounted(() => {
-  loadReplay()
+  loadReplay(false).then(() => startPolling())
 })
 
 onUnmounted(() => {
   pause()
+  stopPolling()
 })
 </script>
 
@@ -449,76 +523,75 @@ onUnmounted(() => {
   height: 100vh;
   display: flex;
   flex-direction: column;
-  background: #FAFAFA;
+  background: #0A0A0B;
+  color: #E8E8E8;
   font-family: 'Space Grotesk', 'Noto Sans SC', system-ui, sans-serif;
-  color: #1A1A1A;
   overflow: hidden;
 }
 
-.mono { font-family: 'JetBrains Mono', monospace; }
-.dim { color: #999; }
+.mono { font-family: 'JetBrains Mono', 'Courier New', monospace; }
 
 /* ========== Header ========== */
 .replay-header {
-  height: 56px;
-  background: #FFF;
-  border-bottom: 1px solid #E5E5E5;
+  height: 64px;
+  background: #111113;
+  border-bottom: 1px solid #1F1F23;
   display: flex;
   align-items: center;
   padding: 0 24px;
   flex-shrink: 0;
+  gap: 16px;
 }
-.header-left { display: flex; align-items: center; gap: 16px; flex: 1; }
-.header-center { display: flex; align-items: center; gap: 12px; flex: 1; justify-content: center; }
-.header-right { flex: 1; display: flex; justify-content: flex-end; gap: 8px; }
+.header-left { display: flex; align-items: center; gap: 16px; flex: 1; min-width: 0; }
+.header-right { display: flex; gap: 8px; align-items: center; }
 
 .back-btn {
   background: transparent;
-  border: 1px solid #E5E5E5;
-  padding: 6px 12px;
-  border-radius: 4px;
+  border: 1px solid #2A2A2E;
+  width: 36px;
+  height: 36px;
+  border-radius: 8px;
   cursor: pointer;
-  font-size: 12px;
-  color: #666;
+  color: #C0C0C0;
+  font-size: 18px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   transition: all 0.15s;
 }
-.back-btn:hover { background: #F5F5F5; color: #000; }
+.back-btn:hover { background: #1A1A1E; color: #FFF; }
 
-.brand { display: flex; align-items: baseline; gap: 6px; font-weight: 600; }
-.brand-en { font-size: 14px; letter-spacing: 0.5px; }
-.brand-sep { color: #CCC; }
-.brand-zh { font-size: 13px; }
-
-.sim-id { font-size: 11px; color: #666; padding: 4px 8px; background: #F5F5F5; border-radius: 4px; }
-
-.status-badge {
+.title-block { min-width: 0; }
+.title-main { font-size: 14px; font-weight: 700; color: #FFF; letter-spacing: 0.3px; }
+.title-sub { font-size: 12px; color: #888; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.sub-detail { color: #E0E0E0; }
+.platform-tag {
+  display: inline-block;
+  padding: 1px 8px;
+  border-radius: 3px;
   font-size: 10px;
-  font-weight: 600;
-  padding: 4px 10px;
-  border-radius: 4px;
+  font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.5px;
-  background: #F5F5F5;
-  color: #999;
+  margin: 0 4px;
 }
-.status-badge.running { background: #FFF3E0; color: #FF5722; }
-.status-badge.completed { background: #E8F5E9; color: #2E7D32; }
-.status-badge.failed { background: #FFEBEE; color: #C62828; }
+.platform-tag.twitter { background: #1DA1F2; color: #FFF; }
+.platform-tag.reddit { background: #FF4500; color: #FFF; }
 
 .icon-btn {
   background: transparent;
-  border: 1px solid #E5E5E5;
-  width: 32px;
-  height: 32px;
-  border-radius: 4px;
+  border: 1px solid #2A2A2E;
+  width: 36px;
+  height: 36px;
+  border-radius: 8px;
   cursor: pointer;
+  color: #C0C0C0;
   font-size: 16px;
-  color: #666;
 }
-.icon-btn:hover { background: #F5F5F5; color: #000; }
+.icon-btn:hover { background: #1A1A1E; color: #FFF; }
 
-/* ========== Loading / Error ========== */
-.loading-screen, .error-screen {
+/* ========== State screens ========== */
+.screen-state {
   flex: 1;
   display: flex;
   flex-direction: column;
@@ -526,376 +599,369 @@ onUnmounted(() => {
   justify-content: center;
   gap: 16px;
 }
-.loading-text, .error-text { color: #666; font-size: 14px; }
-
+.state-text { color: #888; font-size: 14px; }
+.state-text.error { color: #F44336; }
 .primary-btn {
-  background: #1A1A1A;
+  background: #FF5722;
   color: #FFF;
   border: none;
-  padding: 8px 20px;
-  border-radius: 4px;
+  padding: 10px 24px;
+  border-radius: 8px;
   cursor: pointer;
-  font-size: 12px;
+  font-size: 13px;
+  font-weight: 600;
 }
 
-/* ========== Body 3-col layout ========== */
-.replay-body {
+/* ========== Stage Wrap (Cinematic mode) ========== */
+.stage-wrap {
   flex: 1;
-  display: grid;
-  grid-template-columns: 280px 1fr 280px;
-  gap: 1px;
-  background: #E5E5E5;
-  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px 48px 20px;
+  min-height: 0;
+  overflow: auto;
 }
 
-.col-workflow, .col-stats {
-  background: #FFF;
-  padding: 20px 16px;
-  overflow-y: auto;
-}
-
-.col-center {
-  background: #FFF;
-  padding: 20px 24px;
+.stage {
+  width: 100%;
+  max-width: 760px;
   display: flex;
   flex-direction: column;
-  gap: 20px;
+  gap: 16px;
+}
+
+.platform-frame {
+  background: #FFF;
+  border-radius: 12px;
   overflow: hidden;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px #1F1F23;
+  color: #1A1A1A;
 }
+.platform-frame.twitter { background: #FFF; }
+.platform-frame.reddit { background: #FFF; }
 
-.col-title {
-  font-size: 11px;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 1px;
-  color: #999;
-  margin: 0 0 16px 0;
-}
-
-/* ========== Workflow ========== */
-.workflow-list { display: flex; flex-direction: column; gap: 4px; position: relative; }
-
-.workflow-step {
+.platform-frame-head {
+  background: #2A2A2E;
+  padding: 10px 14px;
   display: flex;
-  gap: 12px;
-  padding: 12px 0;
-  position: relative;
+  align-items: center;
+  gap: 8px;
+  border-bottom: 1px solid #1F1F23;
 }
-.workflow-step:not(:last-child)::before {
-  content: '';
-  position: absolute;
-  left: 13px;
-  top: 36px;
-  bottom: -4px;
-  width: 1px;
-  background: #E5E5E5;
+.dot { width: 11px; height: 11px; border-radius: 50%; }
+.dot.red { background: #FF5F57; }
+.dot.yellow { background: #FEBC2E; }
+.dot.green { background: #28C840; }
+.platform-url {
+  flex: 1;
+  text-align: center;
+  font-size: 11px;
+  color: #999;
+  background: #1A1A1E;
+  padding: 4px 12px;
+  border-radius: 4px;
 }
 
-.step-marker {
-  width: 28px;
-  height: 28px;
+.platform-frame-body {
+  padding: 24px 28px;
+  min-height: 360px;
+}
+
+/* ========== Post card ========== */
+.post-card { display: flex; flex-direction: column; gap: 14px; }
+
+.reddit-subreddit-bar {
+  font-size: 12px;
+  color: #878A8C;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #EDEFF1;
+}
+
+.twitter-top-bar { display: flex; gap: 12px; align-items: center; }
+.avatar {
+  width: 48px;
+  height: 48px;
   border-radius: 50%;
-  background: #F5F5F5;
+  color: #FFF;
+  font-weight: 700;
+  font-size: 18px;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
-  border: 1px solid #E0E0E0;
-  z-index: 1;
 }
-.workflow-step.is-completed .step-marker { background: #E8F5E9; border-color: #4CAF50; }
-.workflow-step.is-running .step-marker { background: #FFF3E0; border-color: #FF5722; animation: pulse-border 1.5s infinite; }
+.tw-names { min-width: 0; }
+.tw-display { font-size: 15px; font-weight: 700; color: #0F1419; }
+.tw-handle { font-size: 12px; color: #536471; }
 
-.step-num { font-size: 11px; font-weight: 700; color: #666; }
-.workflow-step.is-completed .step-num { color: #2E7D32; }
-.workflow-step.is-running .step-num { color: #FF5722; }
-
-.step-body { flex: 1; min-width: 0; }
-.step-name { font-size: 13px; font-weight: 600; margin-bottom: 4px; }
-.step-meta { font-size: 11px; color: #666; line-height: 1.5; }
-.meta-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-
-.step-status-tag {
-  display: inline-block;
-  font-size: 10px;
-  padding: 2px 6px;
-  border-radius: 3px;
-  margin-top: 4px;
-  background: #F5F5F5;
-  color: #999;
-}
-.step-status-tag.completed { background: #E8F5E9; color: #2E7D32; }
-.step-status-tag.running { background: #FFF3E0; color: #FF5722; }
-.step-status-tag.failed { background: #FFEBEE; color: #C62828; }
-
-@keyframes pulse-border {
-  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 87, 34, 0.4); }
-  50% { box-shadow: 0 0 0 4px rgba(255, 87, 34, 0); }
-}
-
-/* ========== Featured action ========== */
-.featured-action { display: flex; flex-direction: column; gap: 12px; flex-shrink: 0; }
-.featured-header { display: flex; justify-content: space-between; align-items: baseline; }
-.section-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #999; }
-.action-counter { font-size: 11px; color: #666; }
-
-.action-card.large {
-  background: #FFF;
-  border: 1px solid #E5E5E5;
-  border-radius: 8px;
-  padding: 20px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
-}
-
-.action-card-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; }
-.action-agent { display: flex; gap: 12px; align-items: center; }
-.agent-avatar {
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-  background: linear-gradient(135deg, #FF5722, #FF8A65);
-  color: #FFF;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: 700;
-  font-size: 16px;
-}
-.agent-name { font-size: 14px; font-weight: 600; }
-.agent-meta { font-size: 11px; color: #999; margin-top: 2px; }
-
-.action-tags { display: flex; gap: 6px; }
-.tag {
-  font-size: 10px;
-  padding: 3px 8px;
-  border-radius: 3px;
-  font-weight: 600;
-  text-transform: uppercase;
-}
-.tag.platform.twitter { background: #E1F5FE; color: #0277BD; }
-.tag.platform.reddit { background: #FFEBEE; color: #C62828; }
-.tag.action-type { background: #F5F5F5; color: #666; }
-
-.action-content {
-  font-size: 14px;
-  line-height: 1.6;
-  color: #1A1A1A;
-  padding: 12px 0;
-  border-top: 1px solid #F0F0F0;
-  border-bottom: 1px solid #F0F0F0;
-  margin-bottom: 12px;
-  max-height: 120px;
-  overflow-y: auto;
-}
-
-.action-card-bottom { display: flex; justify-content: space-between; font-size: 11px; color: #666; }
-.time-info { display: flex; align-items: center; gap: 4px; }
-
-.empty-card {
-  background: #F9F9F9;
-  border: 1px dashed #E0E0E0;
-  border-radius: 8px;
-  padding: 40px;
-  text-align: center;
-  color: #999;
-  font-size: 13px;
-}
-
-/* ========== Feed ========== */
-.feed-section { flex: 1; display: flex; flex-direction: column; gap: 8px; min-height: 0; }
-.feed-header { display: flex; justify-content: space-between; align-items: baseline; }
-
-.feed-list {
-  flex: 1;
-  background: #FAFAFA;
-  border: 1px solid #E5E5E5;
-  border-radius: 6px;
-  overflow-y: auto;
-  padding: 4px;
-  min-height: 0;
-}
-
-.feed-row {
-  display: grid;
-  grid-template-columns: 36px 20px 100px 110px 1fr;
-  gap: 8px;
-  padding: 6px 8px;
+.action-type-badge {
+  align-self: flex-start;
   font-size: 11px;
-  cursor: pointer;
-  border-radius: 3px;
-  align-items: center;
-  border-left: 2px solid transparent;
-}
-.feed-row:hover { background: #F0F0F0; }
-.feed-row.active {
-  background: #FFF3E0;
-  border-left-color: #FF5722;
+  padding: 4px 10px;
+  border-radius: 4px;
+  background: #F0F0F0;
+  color: #666;
+  font-weight: 600;
 }
+.action-type-badge.create_post { background: #FFE0B2; color: #E65100; }
+.action-type-badge.create_comment { background: #C8E6C9; color: #1B5E20; }
+.action-type-badge.quote_post { background: #BBDEFB; color: #0D47A1; }
+.action-type-badge.like_post { background: #F8BBD0; color: #880E4F; }
+.action-type-badge.do_nothing { background: #ECEFF1; color: #546E7A; }
 
-.feed-time { color: #999; font-family: 'JetBrains Mono', monospace; }
-.feed-platform {
-  width: 18px;
-  height: 18px;
-  border-radius: 3px;
+.post-content {
+  font-size: 17px;
+  line-height: 1.65;
+  color: #0F1419;
+  padding: 4px 0;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+.post-content.empty { color: #999; font-size: 14px; }
+
+.reddit-actions, .twitter-actions {
+  display: flex;
+  gap: 24px;
+  padding-top: 12px;
+  border-top: 1px solid #EDEFF1;
+}
+.reddit-btn, .tw-btn {
+  font-size: 12px;
+  color: #878A8C;
   display: flex;
   align-items: center;
-  justify-content: center;
-  font-weight: 700;
-  font-size: 10px;
+  gap: 4px;
+  cursor: default;
 }
-.feed-platform.twitter { background: #E1F5FE; color: #0277BD; }
-.feed-platform.reddit { background: #FFEBEE; color: #C62828; }
 
-.feed-agent { font-weight: 600; color: #1A1A1A; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.feed-type { color: #666; font-size: 10px; }
-.feed-content { color: #555; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-
-.feed-empty { text-align: center; color: #BBB; padding: 40px; font-size: 12px; }
-
-/* ========== Stats column ========== */
-.stat-block {
+.empty-stage {
+  height: 360px;
   display: flex;
   flex-direction: column;
-  gap: 8px;
-  padding: 12px;
-  background: #FAFAFA;
-  border-radius: 6px;
-  margin-bottom: 20px;
-}
-.stat-row { display: flex; justify-content: space-between; align-items: center; }
-.stat-label { font-size: 12px; color: #666; }
-.stat-value { font-size: 14px; font-weight: 700; }
-
-.stat-section { margin-bottom: 24px; }
-.section-label-sm {
-  font-size: 10px;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 1px;
-  color: #999;
-  margin-bottom: 10px;
-}
-
-.bar-row { display: grid; grid-template-columns: 80px 1fr 32px; gap: 8px; align-items: center; padding: 4px 0; font-size: 11px; }
-.bar-label { color: #666; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.bar-track { background: #F0F0F0; height: 6px; border-radius: 3px; overflow: hidden; }
-.bar-fill { background: #FF5722; height: 100%; transition: width 0.3s; }
-.bar-num { color: #1A1A1A; text-align: right; font-size: 11px; font-weight: 600; }
-
-.top-agent-row {
-  display: grid;
-  grid-template-columns: 28px 1fr 32px;
-  gap: 8px;
-  padding: 5px 0;
-  font-size: 11px;
   align-items: center;
+  justify-content: center;
+  gap: 12px;
+  color: #C0C0C0;
 }
-.top-agent-rank { color: #999; }
-.top-agent-name { color: #1A1A1A; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.top-agent-count { text-align: right; font-weight: 600; }
+.empty-icon { font-size: 48px; opacity: 0.3; }
+.empty-msg { font-size: 14px; color: #666; }
 
-.platform-split { display: flex; gap: 8px; }
-.platform-item {
+/* ========== Stage meta ========== */
+.stage-meta {
+  display: flex;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 12px 16px;
+  background: #111113;
+  border: 1px solid #1F1F23;
+  border-radius: 10px;
+}
+.meta-item {
   flex: 1;
-  padding: 10px;
-  border-radius: 6px;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 4px;
 }
-.platform-item.twitter { background: #E1F5FE; color: #0277BD; }
-.platform-item.reddit { background: #FFEBEE; color: #C62828; }
-.platform-name { font-size: 10px; font-weight: 600; text-transform: uppercase; }
-.platform-count { font-size: 18px; font-weight: 700; }
+.meta-label { font-size: 10px; color: #666; text-transform: uppercase; letter-spacing: 0.5px; }
+.meta-value { font-size: 16px; font-weight: 700; color: #FFF; font-family: 'JetBrains Mono', monospace; }
+
+/* ========== Analyst mode ========== */
+.analyst-body {
+  flex: 1;
+  display: grid;
+  grid-template-columns: 240px 1fr 280px;
+  gap: 1px;
+  background: #1F1F23;
+  overflow: hidden;
+}
+.col-workflow, .col-stats, .col-feed {
+  background: #111113;
+  padding: 20px 16px;
+  overflow-y: auto;
+}
+.col-title { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #666; margin: 0 0 16px; }
+.workflow-list { display: flex; flex-direction: column; }
+.workflow-step { display: flex; gap: 10px; padding: 12px 0; border-bottom: 1px solid #1F1F23; }
+.step-marker { width: 24px; height: 24px; border-radius: 50%; background: #1A1A1E; border: 1px solid #2A2A2E; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
+.workflow-step.is-completed .step-marker { background: rgba(76, 175, 80, 0.2); border-color: #4CAF50; }
+.workflow-step.is-running .step-marker { background: rgba(255, 87, 34, 0.2); border-color: #FF5722; }
+.step-num { font-size: 10px; font-weight: 700; color: #C0C0C0; }
+.step-name { font-size: 12px; font-weight: 600; color: #E8E8E8; }
+.step-meta .meta-line { font-size: 10px; color: #888; margin-top: 2px; }
+
+.feed-list { overflow-y: auto; }
+.feed-row { display: grid; grid-template-columns: 30px 18px 90px 100px 1fr; gap: 8px; padding: 6px 8px; font-size: 11px; cursor: pointer; border-radius: 3px; align-items: center; }
+.feed-row:hover { background: #1A1A1E; }
+.feed-row.active { background: rgba(255, 87, 34, 0.15); }
+.feed-time { color: #666; }
+.feed-platform { width: 16px; height: 16px; border-radius: 3px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 9px; }
+.feed-platform.twitter { background: #1DA1F2; color: #FFF; }
+.feed-platform.reddit { background: #FF4500; color: #FFF; }
+.feed-agent { color: #E0E0E0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.feed-type { color: #888; font-size: 10px; }
+.feed-content { color: #999; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+.stat-block { display: flex; flex-direction: column; gap: 8px; padding: 12px; background: #1A1A1E; border-radius: 6px; margin-bottom: 20px; }
+.stat-row { display: flex; justify-content: space-between; font-size: 12px; color: #C0C0C0; }
+.stat-section { margin-bottom: 20px; }
+.section-label-sm { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #666; margin-bottom: 10px; }
+.bar-row { display: grid; grid-template-columns: 70px 1fr 28px; gap: 6px; align-items: center; font-size: 10px; padding: 3px 0; }
+.bar-label { color: #888; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.bar-track { background: #1A1A1E; height: 5px; border-radius: 3px; overflow: hidden; }
+.bar-fill { background: #FF5722; height: 100%; transition: width 0.3s; }
+.bar-num { color: #E8E8E8; text-align: right; }
+.top-agent-row { display: grid; grid-template-columns: 24px 1fr 28px; gap: 6px; padding: 4px 0; font-size: 11px; }
+.top-agent-rank { color: #666; }
+.top-agent-name { color: #E8E8E8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.top-agent-count { text-align: right; color: #FF5722; font-weight: 600; }
 
 /* ========== Footer scrubber ========== */
 .replay-footer {
-  height: 72px;
-  background: #FFF;
-  border-top: 1px solid #E5E5E5;
-  display: flex;
-  align-items: center;
-  padding: 0 24px;
-  gap: 24px;
+  background: #0E0E10;
+  border-top: 1px solid #1F1F23;
+  padding: 14px 32px 12px;
   flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
 }
 
-.footer-controls { display: flex; gap: 6px; align-items: center; }
-.ctrl-btn {
+.footer-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+.timestamp-chip {
+  font-size: 11px;
+  color: #C0C0C0;
+  padding: 5px 10px;
+  background: #1A1A1E;
+  border: 1px solid #2A2A2E;
+  border-radius: 6px;
+}
+.jump-live-btn {
+  background: #FF5722;
+  color: #FFF;
+  border: none;
+  padding: 8px 18px;
+  border-radius: 20px;
+  cursor: pointer;
+  font-size: 12px;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.jump-live-btn:hover:not(:disabled) { background: #FF6E40; }
+.jump-live-btn:disabled { background: #2A2A2E; color: #666; cursor: not-allowed; }
+.live-indicator {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11px;
+  color: #666;
+}
+.live-indicator.is-live { color: #4CAF50; }
+.live-dot { width: 7px; height: 7px; border-radius: 50%; background: #666; }
+.live-indicator.is-live .live-dot { background: #4CAF50; animation: live-pulse 1.5s infinite; }
+@keyframes live-pulse {
+  0%, 100% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.6); }
+  50% { box-shadow: 0 0 0 5px rgba(76, 175, 80, 0); }
+}
+
+.scrubber-row { display: flex; align-items: center; gap: 12px; }
+.step-btn, .play-btn {
+  background: transparent;
+  border: 1px solid #2A2A2E;
+  color: #C0C0C0;
   width: 36px;
   height: 36px;
   border-radius: 50%;
-  border: 1px solid #E0E0E0;
-  background: #FFF;
   cursor: pointer;
   font-size: 14px;
-  color: #666;
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: all 0.15s;
 }
-.ctrl-btn:hover:not(:disabled) { background: #F5F5F5; color: #000; }
-.ctrl-btn:disabled { opacity: 0.4; cursor: not-allowed; }
-.ctrl-btn.primary {
-  background: #1A1A1A;
+.step-btn:hover:not(:disabled), .play-btn:hover { background: #1A1A1E; color: #FFF; }
+.step-btn:disabled { opacity: 0.3; cursor: not-allowed; }
+.play-btn {
+  background: #FF5722;
+  border-color: #FF5722;
   color: #FFF;
   width: 44px;
   height: 44px;
   font-size: 16px;
-  border-color: #1A1A1A;
 }
-.ctrl-btn.primary:hover:not(:disabled) { background: #333; }
+.play-btn:hover { background: #FF6E40; }
 
-.scrubber { flex: 1; display: flex; flex-direction: column; gap: 4px; }
+.scrubber { flex: 1; }
 .scrubber input[type="range"] {
   width: 100%;
   -webkit-appearance: none;
   appearance: none;
   background: transparent;
-  height: 24px;
+  height: 28px;
   margin: 0;
 }
 .scrubber input[type="range"]::-webkit-slider-runnable-track {
   height: 4px;
-  background: #E5E5E5;
+  background: #2A2A2E;
   border-radius: 2px;
 }
 .scrubber input[type="range"]::-webkit-slider-thumb {
   -webkit-appearance: none;
   appearance: none;
-  width: 14px;
-  height: 14px;
+  width: 16px;
+  height: 16px;
   background: #FF5722;
   border-radius: 50%;
-  margin-top: -5px;
+  margin-top: -6px;
   cursor: pointer;
+  box-shadow: 0 0 0 2px rgba(255, 87, 34, 0.2);
+}
+.scrubber input[type="range"]::-moz-range-track {
+  height: 4px;
+  background: #2A2A2E;
+  border-radius: 2px;
 }
 .scrubber input[type="range"]::-moz-range-thumb {
-  width: 14px;
-  height: 14px;
+  width: 16px;
+  height: 16px;
   background: #FF5722;
   border-radius: 50%;
   cursor: pointer;
   border: none;
 }
-.scrubber-info { display: flex; justify-content: space-between; font-size: 11px; }
-.info-left { color: #666; }
-.info-right { color: #1A1A1A; font-weight: 600; }
 
-.footer-speed { display: flex; gap: 4px; align-items: center; }
-.speed-label { font-size: 11px; color: #999; margin-right: 4px; }
+.speed-group { display: flex; gap: 4px; }
 .speed-btn {
   background: transparent;
-  border: 1px solid #E5E5E5;
-  padding: 4px 10px;
-  border-radius: 3px;
+  border: 1px solid #2A2A2E;
+  color: #888;
+  padding: 5px 10px;
+  border-radius: 4px;
   cursor: pointer;
   font-size: 11px;
-  color: #666;
   font-family: 'JetBrains Mono', monospace;
 }
-.speed-btn:hover { background: #F5F5F5; }
-.speed-btn.active { background: #1A1A1A; color: #FFF; border-color: #1A1A1A; }
+.speed-btn:hover { background: #1A1A1E; color: #FFF; }
+.speed-btn.active { background: #FF5722; color: #FFF; border-color: #FF5722; }
+
+/* ========== Footer bottom ========== */
+.footer-bottom {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 14px;
+  background: #1A1A1E;
+  border-radius: 6px;
+  font-size: 12px;
+}
+.task-icon { color: #4CAF50; font-weight: 700; }
+.task-label { color: #E8E8E8; flex: 1; }
+.task-progress { color: #666; }
 </style>