feat: Task Timeline dashboard with parent-child task tree

- Add TaskTimeline.vue: two-pane dashboard with task list + message timeline - Add task-service.js: aggregate cross-agent conversations into task tree - 4-strategy parent-child inference (explicit meta, time-overlap, conv→tpl, master→T) - Read messages.log for full tool call details (not just history.json) - Add tasks.js API routes: GET /api/tasks, GET /api/tasks/:taskId/timeline - Mount /api/tasks in agent-server.js - Add 'Task Logs' nav entry in AppNav.vue after Templates - Support taskId in URL (/tasks/:taskId?) for sharing/bookmarking - Add --parent flag to CLI task dispatch for explicit parentTaskId - Auto-detect parentTaskId in task/dispatch from sender's active task - Add --instructions flag to template train CLI command - Update master tools.md with new parameters

feat: Task Timeline dashboard with parent-child task tree
- Add TaskTimeline.vue: two-pane dashboard with task list + message timeline - Add task-service.js: aggregate cross-agent conversations into task tree - 4-strategy parent-child inference (explicit meta, time-overlap, conv→tpl, master→T) - Read messages.log for full tool call details (not just history.json) - Add tasks.js API routes: GET /api/tasks, GET /api/tasks/:taskId/timeline - Mount /api/tasks in agent-server.js - Add 'Task Logs' nav entry in AppNav.vue after Templates - Support taskId in URL (/tasks/:taskId?) for sharing/bookmarking - Add --parent flag to CLI task dispatch for explicit parentTaskId - Auto-detect parentTaskId in task/dispatch from sender's active task - Add --instructions flag to template train CLI command - Update master tools.md with new parameters
yibo
1 parent 4611a4b7
Showing 12 changed files with 1325 additions and 12 deletions
bin/lemon.js
data/system/agents/master/tools.md
docs/task_timeline_design.md
server/agent-server.js
server/index.js
server/routes/agent-chat.js
server/routes/company.js
server/routes/tasks.js
server/services/task-service.js
web/src/components/AppNav.vue
web/src/router/index.js
web/src/views/TaskTimeline.vue
@@ -84,9 +84,11 @@ async function run() {
     }
     else if (command === 'template train') {
       const { values } = parseArgs({ args: args.slice(2), options: {
-        id: { type: 'string' }
+        id: { type: 'string' }, instructions: { type: 'string' }
       }});
-      const res = await request('POST', `/company/templates/${values.id}/train`);
+      const payload = {};
+      if (values.instructions) payload.instructions = values.instructions;
+      const res = await request('POST', `/company/templates/${values.id}/train`, payload);
       console.log(JSON.stringify(res.data, null, 2));
     }
     else if (command === 'company templates') {
@@ -122,11 +124,12 @@ async function run() {
     else if (command === 'task dispatch') {
       const { values } = parseArgs({ args: args.slice(2), options: {
         from: { type: 'string' }, to: { type: 'string' }, task: { type: 'string' }, priority: { type: 'string', default: 'P1' }, 
-        goal: { type: 'string' }, node: { type: 'string' }, auto: { type: 'boolean', default: true }
+        goal: { type: 'string' }, node: { type: 'string' }, auto: { type: 'boolean', default: true }, parent: { type: 'string' }
       }});
       const payload = { from: values.from, to: values.to, task: values.task, priority: values.priority, autoExecute: values.auto };
       if (values.goal) payload.goalId = values.goal;
       if (values.node) payload.nodeId = values.node;
+      if (values.parent) payload.parentTaskId = values.parent;
       const res = await request('POST', '/agent/task/dispatch', payload);
       console.log(JSON.stringify(res.data, null, 2));
@@ -36,9 +36,9 @@ node bin/lemon.js template create --id &lt;template_id&gt; --name &quot;&lt;模板名称&gt;&quot; --d
 ### 3d. template train — 指派 Innovator 训练并优化模板
 ```bash
-node bin/lemon.js template train --id <template_id>
+node bin/lemon.js template train --id <template_id> --instructions "<额外训练要求或参考材料位置>"
 ```
-当你建立完一个新模板，或者用户想加强某个模板时，调用此命令。这将唤醒 Innovator 对该模板执行多轮强化验证与能力补充。
+当你建立完一个新模板，或者用户想加强某个模板时，调用此命令。这将唤醒 Innovator 对该模板执行多轮强化验证与能力补充。如果用户指定了训练的参考资料（如特定的文档或代码），务必使用 `--instructions` 参数传递给 Innovator。
 ### 3c. company fire — 辞退 Agent
 ```bash
+# Task Timeline View Design Document
+
+## 1. Overview
+The **Task Timeline View (Task Trace UI)** is a new management page that provides a unified, chronological view of all messages, tool calls, and actions performed by multiple Agents collaborating on a single "Task" (identified by a `taskId`). 
+This page solves the "Black Box" problem by aggregating isolated agent conversation logs into a single, sortable, filterable timeline.
+
+## 2. Core Features
+- **Left Panel (Task List):** Displays all recent tasks in the system. Cards show the `taskId`, task progress/status, and the agents involved.
+- **Right Panel (Unified Timeline):** A chronological feed of all `history.json` items spanning across all agents involved in the selected task.
+- **Filtering & Search:** 
+    - **Filter by Agent:** A multi-select dropdown to only show messages from specific agents (e.g. Master, Innovator, Hunter).
+    - **Search Box:** Full-text search to filter messages by keyword.
+    - **Sort Toggle:** Switch between ascending (oldest first) and descending (newest first) chronological order.
+
+## 3. Backend Architecture Changes
+
+### Data Source Challenge
+Tasks in the system often represent an orchestration spawned from Master, such as `jobId` or `conversationId` mappings. 
+To link conversations to a single logical "Task", we will scrape the meta tags from agent conversations. In recent builds, `meta.json` or directory names often reflect the global `jobId` or `conversationId` (e.g., `tpl-train-lemonv_drama-xxx` or `train-xxx`).
+
+### New API Endpoints (`server/routes/tasks.js`)
+
+**1. `GET /api/tasks`**
+- **Action:** Scans the job store (`.data/jobs-train.json` or `.data/jobs.json`) and conversation metadata to return an array of top-level tasks.
+- **Response Format:**
+  ```json
+  [
+    {
+       "taskId": "train-xxx",
+       "type": "train-create",
+       "status": "completed",
+       "progress": "✅ 训练完成",
+       "createdAt": "2026-03-29T12:00:00Z",
+       "agentsInvolved": ["master", "innovator", "hunter", "digester", "evolver"]
+    }
+  ]
+  ```
+
+**2. `GET /api/tasks/:taskId/timeline`**
+- **Action:** Aggregates and flattens all conversation logs associated with a `taskId`.
+    - It searches all companies and system agents (`data/companies/*/agents/*` and `data/system/agents/*`).
+    - Finds all conversation folders where the folder name or `meta.json`'s `conversationId` / `jobId` matches or contains the target `taskId`.
+    - Reads `history.json` for all these matched conversations.
+    - Annotates each message with `agentId` and `companyId`.
+    - Sorts the final array globally by `timestamp`.
+- **Response Format:**
+  ```json
+  [
+    {
+       "timestamp": "2026-03-29T12:00:01Z",
+       "role": "assistant",
+       "content": "🔧 [TOOL_CALL] Glob...",
+       "agentId": "master",
+       "companyId": "system",
+       "conversationId": "conv-mnbq123"
+    },
+    {
+       "timestamp": "2026-03-29T12:00:05Z",
+       "role": "assistant",
+       "content": "正在执行 hunted...",
+       "agentId": "hunter",
+       "companyId": "system",
+       "conversationId": "hunt-xxx"
+    }
+  ]
+  ```
+
+## 4. Frontend Architecture Changes
+
+### Routing (`web/src/router/index.js`)
+- Add a new route `/tasks` mapped to the `TaskTimelineView`.
+
+### Layout (`web/src/views/TaskTimelineView.vue`)
+- **Structure:** Uses a `<div class="flex h-screen">` to split Left and Right.
+- **Left Column:** Needs a highly scannable List View of Tasks.
+    - Each item should highlight its Status using distinct colors (Green for `completed`, Yellow for `running`, Red for `failed`).
+    - Highlights the list of involved agents using small tags (`<el-tag size="small">`).
+- **Right Column:**
+    - **Header:** Sticky Header containing Search (`<el-input>`), Agent Select Dropdown (`<el-select multiple>`), and Sort Button (`<el-button>`).
+    - **Timeline Feed:** A scrollable `div` containing blocks of agent messages. Reuses the markdown renderer (`vue-markdown`) and adds specialized syntax highlighting/styling for the `🔧 [TOOL_CALL]` blocks to make them easily readable.
+    - **Agent Identity Header:** Every message block starts with a distinct visual header `avatar/icon + Agent Name + precise time`.
+
+### Navigation (`web/src/components/Sidebar.vue`)
+- Add a new navigation item "Task Logs" / "任务看板" right below "MasterBot" or "Companies".
+
+## 5. Implementation Steps
+1. **Backend Base:** Create `server/services/task-service.js` containing the heavy logic for aggregating cross-agent logs.
+2. **Backend Routes:** Create `server/routes/tasks.js` and mount it to `server/index.js` or `server/app.js`.
+3. **Frontend API:** Expose API bindings for Tasks in the Vue frontend.
+4. **Frontend View:** Implement `TaskTimelineView.vue` with dummy data to build the layout.
+5. **Integration:** Connect the frontend view with the live `/api/tasks` backend and polish the UI interactions (filtering/sorting).
@@ -64,6 +64,7 @@ app.use(&#39;/api/agent&#39;, agentChatRoute);
 // Company API
 app.use('/api/company', require('./routes/company'));
 app.use('/api/goals',   require('./routes/goals'));
+app.use('/api/tasks',   require('./routes/tasks'));
 // Health
 app.get('/api/health', (req, res) => res.json({ status: 'ok', service: 'agent-chat' }));
@@ -92,6 +92,7 @@ app.use(&#39;/api/users&#39;,       require(&#39;./routes/users&#39;));
 app.use('/api/agent',        require('./routes/agent-chat'));
 app.use('/api/goals',        require('./routes/goals'));
 app.use('/api/company',      require('./routes/company'));
+app.use('/api/tasks',        require('./routes/tasks'));
 // ─── 系统端点 ───
 app.get('/api/health', (req, res) => res.json({
@@ -1224,7 +1224,7 @@ function loadTaskMeta(taskId) {
 router.post('/task/dispatch', async (req, res) => {
   try {
-    const { from, to, task, priority = 'P1', planId, goalId, nodeId, autoExecute = true } = req.body;
+    const { from, to, task, priority = 'P1', planId, goalId, nodeId, autoExecute = true, parentTaskId: explicitParent } = req.body;
     if (!from || !to || !task) return res.status(400).json({ error: 'from, to, task are required' });
     const targetDir = getAgentDir(to);
@@ -1238,6 +1238,34 @@ router.post(&#39;/task/dispatch&#39;, async (req, res) =&gt; {
     // 净化多行文本和竖线，防止破坏 Markdown 表格格式
     const safeTask = task.replace(/\n/g, '<br>').replace(/\|/g, '&#124;');
+    // ── 自动推断 parentTaskId ──
+    // 如果调用者没有显式传 parentTaskId，则尝试从 .tasks/ 目录下
+    // 查找 from agent 正在执行的（status=dispatched 且 to=from）的 task
+    let parentTaskId = explicitParent || null;
+    let sourceConvId = null;
+    if (!parentTaskId) {
+      try {
+        const taskFiles = fs.readdirSync(TASK_META_DIR).filter(f => f.endsWith('.json'));
+        // 找到 "to === from" 且尚未完成的任务 → 这就是 from agent 正在执行的父任务
+        let candidates = [];
+        for (const tf of taskFiles) {
+          try {
+            const tm = JSON.parse(fs.readFileSync(path.join(TASK_META_DIR, tf), 'utf-8'));
+            if (tm.to === from && tm.status === 'dispatched') {
+              candidates.push(tm);
+            }
+          } catch(e) {}
+        }
+        // 如果有多个，取最近创建的
+        if (candidates.length > 0) {
+          candidates.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());
+          parentTaskId = candidates[0].taskId;
+          sourceConvId = candidates[0].executionConvId || null;
+          console.log(`[TaskDispatch] 🔗 Auto-detected parentTaskId: ${parentTaskId} (${from} is executing it)`);
+        }
+      } catch(e) { /* ignore */ }
+    }
+
     // 1. 写入目标 Agent 的 todo.md
     const todoPath = path.join(targetDir, 'todo.md');
     let todoContent = fs.existsSync(todoPath) ? fs.readFileSync(todoPath, 'utf-8') : '';
@@ -1269,7 +1297,7 @@ router.post(&#39;/task/dispatch&#39;, async (req, res) =&gt; {
       }
     }
-    console.log(`[TaskDispatch] 📨 ${from} → ${to}: "${task}" (${taskId}, ${priority}${goalId ? `, goal: ${goalId}` : ''})`);
+    console.log(`[TaskDispatch] 📨 ${from} → ${to}: "${task}" (${taskId}, ${priority}${goalId ? `, goal: ${goalId}` : ''}${parentTaskId ? `, parent: ${parentTaskId}` : ''})`);
     // 4. 持久化 Task 元数据 (用于 task/report 回调)
     const executionConvId = autoExecute ? `task-${taskId}` : null;
@@ -1281,6 +1309,8 @@ router.post(&#39;/task/dispatch&#39;, async (req, res) =&gt; {
       priority,
       goalId: goalId || null,
       nodeId: nodeId || null,
+      parentTaskId: parentTaskId || null,
+      sourceConvId: sourceConvId || null,
       executionConvId,
       createdAt: new Date().toISOString(),
       status: 'dispatched',
@@ -1897,13 +1927,16 @@ router.post(&#39;/:agentId/chat&#39;, async (req, res) =&gt; {
           currentToolInput = '';
           const toolName = event.params.name;
           const toolMsg = `\n🔧 [TOOL_CALL] ${toolName} (ID: ${event.params.tool_use_id || 'unknown'})\n`;
+          fullOutput += toolMsg;
           logMessageChunk(agentId, convId, toolMsg);
           sendSSE('tool_call', { tool: toolName, toolId: event.params.tool_use_id, message: `🔧 调用工具: ${toolName}` });
           meta.stats.toolCallCount = (meta.stats.toolCallCount || 0) + 1;
         } else if (event.method === 'claude/stream/content_block_stop') {
           // 工具调用结束 — 输出积攒的输入参数
           if (currentToolInput) {
-            logMessageChunk(agentId, convId, `   输入: ${currentToolInput.slice(0, 500)}${currentToolInput.length > 500 ? '...' : ''}\n`);
+            const inputLog = `   输入: ${currentToolInput.slice(0, 500)}${currentToolInput.length > 500 ? '...' : ''}\n`;
+            fullOutput += inputLog;
+            logMessageChunk(agentId, convId, inputLog);
             sendSSE('tool_input', { input: currentToolInput });
             currentToolInput = '';
           }
@@ -1948,7 +1981,9 @@ router.post(&#39;/:agentId/chat&#39;, async (req, res) =&gt; {
             const result = innerEvent.content || innerEvent.content_block?.content || '';
             const resultStr = typeof result === 'string' ? result : JSON.stringify(result);
             const truncated = resultStr.slice(0, 1000) + (resultStr.length > 1000 ? `...(${resultStr.length} chars)` : '');
-            logMessageChunk(agentId, convId, `   结果: ${truncated}\n`);
+            const resultLog = `   结果: ${truncated}\n`;
+            fullOutput += `\n` + resultLog;
+            logMessageChunk(agentId, convId, resultLog);
             sendSSE('tool_result', { result: truncated });
           }
         }
@@ -131,6 +131,7 @@ router.post(&#39;/templates/:templateId/generate&#39;, async (req, res) =&gt; {
 router.post('/templates/:templateId/train', async (req, res) => {
   try {
     const { templateId } = req.params;
+    const { instructions } = req.body;
     const path = require('path');
     const fs = require('fs');
     const config = require('../config');
@@ -142,11 +143,16 @@ router.post(&#39;/templates/:templateId/train&#39;, async (req, res) =&gt; {
     }
     const PORT = config.port || 3000;
-    const prompt = `请你对模板 Agent "${templateId}" 进行评估和训练。
+    let prompt = `请你对模板 Agent "${templateId}" 进行评估和训练。
 模板位于 \`../../data/system/templates/${templateId}\` 目录。
 请使用 FDE pipeline 对该模板的技能进行评测和进化训练，目标: Benchmark Score ≥ 95。
-训练过程包括 Hunt(验证数据), Digest(知识消化), Evolver(技能进化) 等。
-请立即开始评估和训练，训练完成后请汇报最终分数。`;
+训练过程包括 Hunt(验证数据), Digest(知识消化), Evolver(技能进化) 等。`;
+
+    if (instructions) {
+      prompt += `\n**【额外训练要求/指令】**\n${instructions}\n`;
+    }
+
+    prompt += `\n请立即开始评估和训练，训练完成后请汇报最终分数。`;
     // 异步调用 innovator
     fetch(`http://127.0.0.1:${PORT}/api/agent/innovator/chat`, {
+const express = require('express');
+const router = express.Router();
+const { TaskService } = require('../services/task-service');
+
+const taskService = new TaskService();
+
+// GET /api/tasks — 扫描获取系统中聚合的 Task 列表（含父子关系）
+router.get('/', (req, res) => {
+  try {
+    const tasks = taskService.getAggregatedTasks();
+
+    const taskList = tasks.map(t => ({
+      taskId: t.taskId,
+      title: t.title,
+      createdAt: t.createdAt,
+      updatedAt: t.updatedAt,
+      status: t.status,
+      from: t.from,
+      to: t.to,
+      parentTaskId: t.parentTaskId,
+      children: t.children,
+      isRoot: t.isRoot,
+      agents: t.agents,
+      conversationCount: t.conversations.length,
+    }));
+
+    res.json(taskList);
+  } catch (err) {
+    res.status(500).json({ error: err.message });
+  }
+});
+
+// GET /api/tasks/:taskId/timeline — 获取跨 Agent 的所有 Timeline Log（含子任务）
+router.get('/:taskId/timeline', (req, res) => {
+  try {
+    const includeChildren = req.query.children !== 'false';
+    const timeline = taskService.getTaskTimeline(req.params.taskId, includeChildren);
+    if (!timeline || timeline.length === 0) {
+      return res.status(404).json({ error: '找不到该任务相关的聊天记录。' });
+    }
+    res.json(timeline);
+  } catch (err) {
+    res.status(500).json({ error: err.message });
+  }
+});
+
+module.exports = router;
+const fs = require('fs');
+const path = require('path');
+
+const SYSTEM_AGENTS_DIR = path.resolve(__dirname, '../../data/system/agents');
+const COMPANIES_DIR = path.resolve(__dirname, '../../data/companies');
+const TASK_META_DIR = path.resolve(__dirname, '../../data/system/agents/.tasks');
+
+/**
+ * 递归扫描并读取系统中所有 Agent 的会话，
+ * 从 .tasks/ meta 和 conversation 模式中推断父子关系，构建任务树。
+ */
+class TaskService {
+
+  getAllConversations() {
+    const list = [];
+    
+    if (fs.existsSync(SYSTEM_AGENTS_DIR)) {
+      const agents = fs.readdirSync(SYSTEM_AGENTS_DIR).filter(d => !d.startsWith('.'));
+      for (const agentId of agents) {
+        const convDir = path.join(SYSTEM_AGENTS_DIR, agentId, 'conversations');
+        this._scanConversationsDir(convDir, 'system', agentId, list);
+      }
+    }
+
+    if (fs.existsSync(COMPANIES_DIR)) {
+      const dbNames = fs.readdirSync(COMPANIES_DIR).filter(d => !d.startsWith('.'));
+      for (const companyId of dbNames) {
+        if (companyId === '_archived_agents') continue;
+        const agentsDir = path.join(COMPANIES_DIR, companyId, 'agents');
+        if (fs.existsSync(agentsDir)) {
+          const agents = fs.readdirSync(agentsDir).filter(d => !d.startsWith('.'));
+          for (const agentId of agents) {
+            const convDir = path.join(agentsDir, agentId, 'conversations');
+            this._scanConversationsDir(convDir, companyId, agentId, list);
+          }
+        }
+      }
+    }
+
+    return list;
+  }
+
+  _loadTaskMetas() {
+    const metas = new Map();
+    if (!fs.existsSync(TASK_META_DIR)) return metas;
+    const files = fs.readdirSync(TASK_META_DIR).filter(f => f.endsWith('.json'));
+    for (const f of files) {
+      try {
+        const tm = JSON.parse(fs.readFileSync(path.join(TASK_META_DIR, f), 'utf-8'));
+        if (tm.taskId) metas.set(tm.taskId, tm);
+      } catch(e) {}
+    }
+    return metas;
+  }
+
+  /**
+   * 从 Conversation 聚合 Task 列表，并通过多种手段推断父子关系：
+   * 1) .tasks/ meta 中的显式 parentTaskId
+   * 2) conversationId 模式推断（task-T-xxx 从 tpl-train-* 派出，tpl-train 从 conv-* 派出）
+   * 3) title 中可解析的 task reference（[TASK from xxx]）
+   */
+  getAggregatedTasks() {
+    const convs = this.getAllConversations();
+    const taskMetas = this._loadTaskMetas();
+    const taskMap = new Map();
+
+    // 第一遍：建立所有 task group
+    for (const c of convs) {
+      let taskId = this._extractTaskId(c.conversationId);
+
+      if (!taskMap.has(taskId)) {
+        const meta = taskMetas.get(taskId);
+        taskMap.set(taskId, {
+          taskId,
+          title: c.meta.title || taskId,
+          createdAt: c.meta.createdAt || new Date().toISOString(),
+          updatedAt: c.meta.updatedAt || c.meta.createdAt,
+          status: meta?.status || c.meta.status || 'unknown',
+          from: meta?.from || null,
+          to: meta?.to || null,
+          parentTaskId: meta?.parentTaskId || null,
+          agents: new Set(),
+          conversations: [],
+          children: [],
+        });
+      }
+
+      const t = taskMap.get(taskId);
+      t.agents.add(`${c.companyId}:${c.agentId}`);
+      t.conversations.push(c);
+      
+      if (c.meta.createdAt && new Date(c.meta.createdAt) < new Date(t.createdAt)) t.createdAt = c.meta.createdAt;
+      if (c.meta.updatedAt && new Date(c.meta.updatedAt) > new Date(t.updatedAt)) t.updatedAt = c.meta.updatedAt;
+    }
+
+    // 第二遍：推断父子关系
+    this._inferParentChild(taskMap, taskMetas);
+
+    // 第三遍：构建 children 列表
+    for (const t of taskMap.values()) {
+      if (t.parentTaskId && taskMap.has(t.parentTaskId)) {
+        const parent = taskMap.get(t.parentTaskId);
+        if (!parent.children.includes(t.taskId)) {
+          parent.children.push(t.taskId);
+        }
+      }
+    }
+
+    const tasks = Array.from(taskMap.values()).map(t => ({
+      ...t,
+      agents: Array.from(t.agents),
+      isRoot: !t.parentTaskId || !taskMap.has(t.parentTaskId),
+      conversationCount: t.conversations.length,
+    }));
+    
+    tasks.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());
+    return tasks;
+  }
+
+  /**
+   * 从 conversationId 提取逻辑 taskId
+   */
+  _extractTaskId(convId) {
+    // "task-T-xxx" / "callback-T-xxx" → "T-xxx"
+    if (convId.includes('-T-')) {
+      const match = convId.match(/(T-[a-z0-9]+)/);
+      if (match) return match[1];
+    }
+    // 其他 (conv-xxx, tpl-train-xxx) 保持原样
+    return convId;
+  }
+
+  /**
+   * 多策略推断父子关系：
+   * 
+   * 策略1: .tasks/ meta 中的 parentTaskId（直接有的情况）
+   * 策略2: 通过 "from" agent 的 活跃会话 推断
+   *   - T-xxx 的 meta.from = "innovator" 
+   *   - innovator 同时有一个 tpl-train-* 会话（时间上包含 T-xxx）
+   *   → tpl-train-* 就是 T-xxx 的父任务
+   * 策略3: 通过 master conv 触发 tpl-train 推断
+   *   - conv-xxx (master) 的时间 < tpl-train-xxx 的时间 且 title 包含相同模板名
+   *   → conv-xxx 是 tpl-train-xxx 的父任务
+   */
+  _inferParentChild(taskMap, taskMetas) {
+    const allTasks = Array.from(taskMap.values());
+    
+    // 策略1: 已有 parentTaskId (来自 .tasks/ meta)，已在构建时设置
+    
+    // 策略2: T-xxx 任务，推断父任务为 from agent 的活跃 tpl-train/task 会话
+    for (const t of allTasks) {
+      if (t.parentTaskId) continue;
+      if (!t.taskId.startsWith('T-')) continue;
+      
+      const meta = taskMetas.get(t.taskId);
+      if (!meta) continue;
+      
+      const fromAgent = meta.from;
+      const taskCreatedAt = new Date(meta.createdAt);
+      
+      // 找 fromAgent 的其他会话，时间上在这个 task 之前开始且之后结束/仍活跃
+      let bestParent = null;
+      let bestTimeDiff = Infinity;
+      
+      for (const candidate of allTasks) {
+        if (candidate.taskId === t.taskId) continue;
+        if (candidate.taskId.startsWith('T-') && !taskMetas.has(candidate.taskId)) continue;
+        
+        const hasAgent = candidate.conversations.some(c => c.agentId === fromAgent);
+        if (!hasAgent) continue;
+        
+        const candidateCreated = new Date(candidate.createdAt);
+        const candidateUpdated = new Date(candidate.updatedAt);
+        
+        if (candidateCreated < taskCreatedAt && candidateUpdated >= taskCreatedAt) {
+          const diff = taskCreatedAt - candidateCreated;
+          if (diff < bestTimeDiff) {
+            bestTimeDiff = diff;
+            bestParent = candidate;
+          }
+        }
+      }
+      
+      if (bestParent) {
+        t.parentTaskId = bestParent.taskId;
+        console.log(`[TaskService] 🔗 Inferred parent: ${t.taskId} → ${bestParent.taskId}`);
+      }
+    }
+
+    // 策略4: T-xxx from master，但 master 的 conv-* 已经结束的情况
+    // 这种情况发生在：master 原始对话结束后，通过 callback 链路继续派发新任务
+    // 例如 conv-xxx → tpl-train → T-a (callback → master → 新 dispatch T-b)
+    // 此时 T-b 应该关联到 conv-xxx（同一个用户请求）
+    for (const t of allTasks) {
+      if (t.parentTaskId) continue;
+      if (!t.taskId.startsWith('T-')) continue;
+      
+      const meta = taskMetas.get(t.taskId);
+      if (!meta || meta.from !== 'master') continue;
+      
+      const taskCreatedAt = new Date(meta.createdAt);
+      
+      // 找最近的 master conv-* 会话，窗口放宽到 30 分钟
+      let bestConv = null;
+      let bestDiff = 30 * 60 * 1000;
+      
+      for (const candidate of allTasks) {
+        if (!candidate.taskId.startsWith('conv-')) continue;
+        if (!candidate.conversations.some(c => c.agentId === 'master')) continue;
+        
+        const cCreated = new Date(candidate.createdAt);
+        const diff = taskCreatedAt - cCreated;
+        
+        if (diff > 0 && diff < bestDiff) {
+          bestDiff = diff;
+          bestConv = candidate;
+        }
+      }
+      
+      if (bestConv) {
+        t.parentTaskId = bestConv.taskId;
+        console.log(`[TaskService] 🔗 Inferred parent (master→T): ${t.taskId} → ${bestConv.taskId}`);
+      }
+    }
+
+    // 策略3: tpl-train-* / task-* 与 conv-* (master) 的关联
+    // master 的 conv-xxx 在时间上紧接着触发了 tpl-train-xxx
+    for (const t of allTasks) {
+      if (t.parentTaskId) continue;
+      // tpl-train-* 的 conversations 中有 innovator
+      if (!t.taskId.startsWith('tpl-train-') && !t.taskId.startsWith('train-')) continue;
+      
+      const tCreated = new Date(t.createdAt);
+      
+      // 找 master 的 conv-xxx，时间上在 tpl-train 之前且间隔小于 5 分钟
+      let bestConv = null;
+      let bestDiff = 5 * 60 * 1000; // 5分钟窗口
+      
+      for (const candidate of allTasks) {
+        if (!candidate.taskId.startsWith('conv-')) continue;
+        // 必须有 master 参与
+        if (!candidate.conversations.some(c => c.agentId === 'master')) continue;
+        
+        const cCreated = new Date(candidate.createdAt);
+        const diff = tCreated - cCreated;
+        
+        if (diff > 0 && diff < bestDiff) {
+          // 额外检查：title 是否有模板名关联
+          const templateName = t.taskId.replace(/^tpl-train-/, '').replace(/-[a-z0-9]+$/, '');
+          if (candidate.title && candidate.title.toLowerCase().includes(templateName.replace(/_/g, ' ').split(' ')[0])) {
+            bestDiff = diff;
+            bestConv = candidate;
+          } else if (!bestConv) {
+            // 如果没有更好的匹配，用时间最近的
+            bestDiff = diff;
+            bestConv = candidate;
+          }
+        }
+      }
+      
+      if (bestConv) {
+        t.parentTaskId = bestConv.taskId;
+        console.log(`[TaskService] 🔗 Inferred parent (conv→tpl): ${t.taskId} → ${bestConv.taskId}`);
+      }
+    }
+  }
+
+  getTaskTimeline(filterTaskId, includeChildren = true) {
+    const tasks = this.getAggregatedTasks();
+    const taskGroup = tasks.find(t => t.taskId === filterTaskId);
+    if (!taskGroup) return [];
+
+    const taskIds = new Set([filterTaskId]);
+    if (includeChildren) {
+      this._collectDescendants(filterTaskId, tasks, taskIds);
+    }
+
+    const relevantConvs = [];
+    for (const t of tasks) {
+      if (taskIds.has(t.taskId)) {
+        relevantConvs.push(...t.conversations);
+      }
+    }
+
+    let timeline = [];
+    
+    for (const conv of relevantConvs) {
+      const logPath = path.join(path.dirname(conv.histPath), 'messages.log');
+      
+      if (fs.existsSync(logPath)) {
+        try {
+          const logContent = fs.readFileSync(logPath, 'utf-8');
+          const blocks = this._parseMessagesLog(logContent, conv);
+          timeline.push(...blocks);
+        } catch (e) {
+          console.warn('Error parsing messages.log', logPath, e.message);
+        }
+      } else if (fs.existsSync(conv.histPath)) {
+        try {
+          const history = JSON.parse(fs.readFileSync(conv.histPath, 'utf-8'));
+          history.forEach(msg => {
+            if (!msg.content && !msg.tool_calls) return;
+            timeline.push({
+              key: `${conv.conversationId}-${msg.messageId || Math.random()}`,
+              companyId: conv.companyId,
+              agentId: conv.agentId,
+              conversationId: conv.conversationId,
+              role: msg.role,
+              content: msg.content,
+              timestamp: msg.timestamp || conv.meta.updatedAt,
+            });
+          });
+        } catch (e) {
+          console.warn('Error parsing history.json', conv.histPath);
+        }
+      }
+    }
+
+    timeline.sort((a, b) => new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime());
+    return timeline;
+  }
+
+  _collectDescendants(taskId, allTasks, collected) {
+    const task = allTasks.find(t => t.taskId === taskId);
+    if (!task) return;
+    for (const childId of task.children) {
+      if (!collected.has(childId)) {
+        collected.add(childId);
+        this._collectDescendants(childId, allTasks, collected);
+      }
+    }
+  }
+
+  _parseMessagesLog(logContent, conv) {
+    const blocks = [];
+    const blockRegex = /\[(\d{4}-\d{2}-\d{2}T[\d:.]+Z?)\]\s*\[(USER|AGENT|SYSTEM|TOOL)\]\n/g;
+    
+    const splits = [];
+    let match;
+    while ((match = blockRegex.exec(logContent)) !== null) {
+      splits.push({
+        timestamp: match[1],
+        role: match[2].toLowerCase(),
+        startIndex: match.index + match[0].length,
+      });
+    }
+
+    for (let i = 0; i < splits.length; i++) {
+      const s = splits[i];
+      const endIndex = (i + 1 < splits.length) ? splits[i + 1].startIndex - splits[i + 1].timestamp.length - 10 : logContent.length;
+      const content = logContent.substring(s.startIndex, endIndex).trim();
+      if (!content) continue;
+
+      blocks.push({
+        key: `${conv.conversationId}-log-${i}`,
+        companyId: conv.companyId,
+        agentId: conv.agentId,
+        conversationId: conv.conversationId,
+        role: s.role === 'agent' ? 'assistant' : s.role,
+        content,
+        timestamp: s.timestamp.endsWith('Z') ? s.timestamp : s.timestamp + 'Z',
+      });
+    }
+    return blocks;
+  }
+
+  _scanConversationsDir(convDir, companyId, agentId, list) {
+    if (!fs.existsSync(convDir)) return;
+    const items = fs.readdirSync(convDir, { withFileTypes: true });
+    for (const item of items) {
+      if (item.isDirectory()) {
+        const metaPath = path.join(convDir, item.name, 'meta.json');
+        const histPath = path.join(convDir, item.name, 'history.json');
+        if (fs.existsSync(metaPath)) {
+          let meta = {};
+          try { meta = JSON.parse(fs.readFileSync(metaPath, 'utf-8')); } catch(e){}
+          list.push({ companyId, agentId, conversationId: item.name, meta, histPath });
+        }
+      }
+    }
+  }
+}
+
+module.exports = { TaskService };
@@ -13,6 +13,10 @@
         <span>📦</span> Templates
       </router-link>
+      <router-link to="/tasks" class="nav-link" :class="{ active: $route.path.startsWith('/tasks') }">
+        <span>📜</span> Task Logs
+      </router-link>
+
       <router-link to="/quota" class="nav-link" :class="{ active: $route.path === '/quota' }">
         <span>📊</span> Quota
       </router-link>
@@ -55,6 +55,11 @@ const routes = [
     component: () => import('@/views/JobsPanel.vue'),
   },
   {
+    path: '/tasks/:taskId?',
+    name: 'TaskTimeline',
+    component: () => import('@/views/TaskTimeline.vue'),
+  },
+  {
     path: '/pipelines',
     name: 'PipelineEditor',
     component: () => import('@/views/PipelineEditor.vue'),
+<template>
+  <div class="task-timeline-page">
+    <AppNav />
+    <div class="tl-container">
+      <!-- Left Panel: Task List -->
+      <div class="tl-left">
+        <div class="tl-left-header">
+          <h2>📜 All Tasks</h2>
+          <button class="btn-refresh" @click="fetchTasks">🔄</button>
+        </div>
+
+        <div class="tl-search-bar">
+          <input 
+            v-model="taskSearch" 
+            placeholder="Search tasks..." 
+            class="tl-input"
+          />
+        </div>
+
+        <div class="tl-task-list">
+          <div v-if="loadingTasks" class="tl-empty">Loading tasks...</div>
+          <div v-else-if="filteredTasks.length === 0" class="tl-empty">No tasks found</div>
+          
+          <template v-for="task in filteredTasks" :key="task.taskId">
+            <!-- Root task card -->
+            <div 
+              @click="selectTask(task)"
+              class="tl-task-card"
+              :class="{ active: selectedTask?.taskId === task.taskId }"
+            >
+              <div class="task-card-title" :title="task.title">{{ task.title }}</div>
+              <div class="task-card-id">
+                <span v-if="task.from && task.to" class="task-flow">{{ task.from }} → {{ task.to }}</span>
+                {{ task.taskId }}
+                <span v-if="task.status" class="task-status-dot" :class="'status-' + task.status"></span>
+              </div>
+              
+              <div class="task-card-agents">
+                <span 
+                  v-for="agent in task.agents.slice(0, 4)" 
+                  :key="agent"
+                  class="agent-tag"
+                >
+                  {{ agent.split(':')[1] || agent }}
+                </span>
+                <span v-if="task.agents.length > 4" class="agent-tag more">
+                  +{{ task.agents.length - 4 }}
+                </span>
+              </div>
+              
+              <div class="task-card-meta">
+                Convs: {{ task.conversationCount }}
+                <template v-if="task.children && task.children.length"> · 🔗 {{ task.children.length }} subtask(s)</template>
+                · {{ formatTime(task.updatedAt) }}
+              </div>
+            </div>
+
+            <!-- Child task cards (indented) -->
+            <div 
+              v-for="childId in task.children || []"
+              :key="childId"
+              class="tl-task-card tl-child-card"
+              :class="{ active: selectedTask?.taskId === childId }"
+              @click="selectTaskById(childId)"
+            >
+              <div class="child-connector">└─</div>
+              <div class="child-content">
+                <div class="task-card-title" :title="getTaskTitle(childId)">{{ getTaskTitle(childId) }}</div>
+                <div class="task-card-id">
+                  <span class="task-flow">{{ getTaskFlow(childId) }}</span>
+                  {{ childId }}
+                </div>
+                <!-- Grandchildren indicator -->
+                <div v-if="getTaskChildren(childId).length" class="task-card-meta">
+                  🔗 {{ getTaskChildren(childId).length }} subtask(s)
+                </div>
+              </div>
+            </div>
+          </template>
+        </div>
+      </div>
+
+      <!-- Right Panel: Unified Timeline -->
+      <div class="tl-right">
+        <div v-if="!selectedTask" class="tl-placeholder">
+          <div class="placeholder-icon">📜</div>
+          <h3>Select a task from the left to view timeline</h3>
+        </div>
+
+        <template v-else>
+          <!-- Header Controls -->
+          <div class="tl-right-header">
+            <div class="tl-right-title">
+              <h2>Timeline: {{ selectedTask.taskId }}</h2>
+              <div class="tl-right-subtitle">{{ selectedTask.title }}</div>
+            </div>
+            
+            <div class="tl-filters">
+              <input 
+                v-model="timelineSearch" 
+                placeholder="Filter messages..." 
+                class="tl-input filter-input"
+              />
+
+              <select v-model="filterAgent" class="tl-select">
+                <option value="">All Agents</option>
+                <option v-for="a in uniqueAgents" :key="a" :value="a">{{ a }}</option>
+              </select>
+
+              <select v-model="filterCompany" class="tl-select">
+                <option value="">All Companies</option>
+                <option v-for="c in uniqueCompanies" :key="c" :value="c">{{ c }}</option>
+              </select>
+              
+              <select v-model="filterConversation" class="tl-select filter-conv">
+                <option value="">All Conversations</option>
+                <option v-for="cv in uniqueConversations" :key="cv" :value="cv">{{ cv }}</option>
+              </select>
+
+              <button @click="sortDesc = !sortDesc" class="btn-sort">
+                {{ sortDesc ? '↑ Newest' : '↓ Oldest' }}
+              </button>
+            </div>
+          </div>
+
+          <!-- Timeline Log List -->
+          <div class="tl-timeline-scroll" ref="timelineScrollRef">
+            <div v-if="loadingTimeline" class="tl-empty">Loading timeline data...</div>
+            <div v-else-if="filteredTimeline.length === 0" class="tl-empty">No matching events found.</div>
+            
+            <div class="tl-timeline-list" v-else>
+              <div 
+                v-for="(item, index) in filteredTimeline" 
+                :key="item.key || index"
+                class="tl-msg-card"
+              >
+                <!-- Agent Header Bar -->
+                <div class="tl-msg-header" :class="'agent-' + item.agentId.toLowerCase()">
+                  <div class="tl-msg-header-left">
+                    <span class="agent-dot"></span>
+                    <strong class="agent-name">{{ item.agentId }}</strong>
+                    <span class="company-badge">{{ item.companyId }}</span>
+                    <span class="conv-id">{{ item.conversationId }}</span>
+                  </div>
+                  <div class="tl-msg-time">{{ formatTimeDetail(item.timestamp) }}</div>
+                </div>
+
+                <!-- Message Content -->
+                <div class="tl-msg-body">
+                  <div v-if="isToolCall(item.content)" class="tool-call-block">
+                    {{ item.content }}
+                  </div>
+                  <div v-else class="msg-text">{{ item.content }}</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import AppNav from '@/components/AppNav.vue'
+
+const route = useRoute()
+const router = useRouter()
+
+const tasks = ref([])
+const loadingTasks = ref(false)
+const taskSearch = ref('')
+
+const selectedTask = ref(null)
+const timeline = ref([])
+const loadingTimeline = ref(false)
+
+const timelineSearch = ref('')
+const filterAgent = ref('')
+const filterCompany = ref('')
+const filterConversation = ref('')
+const sortDesc = ref(false)
+const timelineScrollRef = ref(null)
+
+const filteredTasks = computed(() => {
+  let list = tasks.value.filter(t => t.isRoot)  // Only show root-level tasks
+  if (taskSearch.value) {
+    const term = taskSearch.value.toLowerCase()
+    list = list.filter(t => 
+      t.taskId.toLowerCase().includes(term) || 
+      t.title.toLowerCase().includes(term) ||
+      t.agents.some(a => a.toLowerCase().includes(term)) ||
+      // Also match if any child matches
+      (t.children || []).some(cid => cid.toLowerCase().includes(term))
+    )
+  }
+  return list
+})
+
+// Tree helper functions
+function getTaskTitle(taskId) {
+  const t = tasks.value.find(x => x.taskId === taskId)
+  return t ? t.title : taskId
+}
+function getTaskFlow(taskId) {
+  const t = tasks.value.find(x => x.taskId === taskId)
+  return t && t.from && t.to ? `${t.from} → ${t.to}` : ''
+}
+function getTaskChildren(taskId) {
+  const t = tasks.value.find(x => x.taskId === taskId)
+  return t ? (t.children || []) : []
+}
+function selectTaskById(taskId) {
+  const t = tasks.value.find(x => x.taskId === taskId)
+  if (t) selectTask(t)
+}
+
+const uniqueAgents = computed(() => [...new Set(timeline.value.map(i => i.agentId))].sort())
+const uniqueCompanies = computed(() => [...new Set(timeline.value.map(i => i.companyId))].sort())
+const uniqueConversations = computed(() => [...new Set(timeline.value.map(i => i.conversationId))].sort())
+
+const filteredTimeline = computed(() => {
+  let stream = [...timeline.value]
+  if (filterAgent.value) stream = stream.filter(t => t.agentId === filterAgent.value)
+  if (filterCompany.value) stream = stream.filter(t => t.companyId === filterCompany.value)
+  if (filterConversation.value) stream = stream.filter(t => t.conversationId === filterConversation.value)
+  if (timelineSearch.value) {
+    const kw = timelineSearch.value.toLowerCase()
+    stream = stream.filter(t => t.content && t.content.toLowerCase().includes(kw))
+  }
+  stream.sort((a, b) => {
+    const ta = new Date(a.timestamp).getTime()
+    const tb = new Date(b.timestamp).getTime()
+    return sortDesc.value ? tb - ta : ta - tb
+  })
+  return stream
+})
+
+async function fetchTasks() {
+  loadingTasks.value = true
+  try {
+    const res = await fetch('/api/tasks')
+    if (res.ok) tasks.value = await res.json()
+  } catch (err) {
+    console.error('Failed to fetch tasks', err)
+  } finally {
+    loadingTasks.value = false
+  }
+}
+
+async function selectTask(task) {
+  selectedTask.value = task
+  timelineSearch.value = ''
+  filterAgent.value = ''
+  filterCompany.value = ''
+  filterConversation.value = ''
+  sortDesc.value = false
+
+  // Update URL
+  router.replace({ path: `/tasks/${encodeURIComponent(task.taskId)}` })
+  
+  await loadTimeline(task.taskId)
+}
+
+async function loadTimeline(taskId) {
+  loadingTimeline.value = true
+  try {
+    const res = await fetch(`/api/tasks/${encodeURIComponent(taskId)}/timeline`)
+    if (res.ok) {
+      timeline.value = await res.json()
+      setTimeout(() => {
+        if (timelineScrollRef.value) timelineScrollRef.value.scrollTop = 0
+      }, 50)
+    }
+  } catch (err) {
+    console.error('Failed to fetch timeline', err)
+  } finally {
+    loadingTimeline.value = false
+  }
+}
+
+function isToolCall(text) {
+  if (!text) return false
+  return text.trim().startsWith('🔧') || text.includes('[TOOL_CALL]')
+}
+
+function formatTime(ts) {
+  if (!ts) return '-'
+  return new Date(ts).toLocaleString('zh-CN')
+}
+
+function formatTimeDetail(ts) {
+  if (!ts) return '-'
+  return new Date(ts).toLocaleTimeString('zh-CN', { hour12: false })
+}
+
+onMounted(async () => {
+  await fetchTasks()
+  
+  // Restore from URL param
+  const taskIdFromUrl = route.params.taskId
+  if (taskIdFromUrl && tasks.value.length > 0) {
+    const found = tasks.value.find(t => t.taskId === taskIdFromUrl)
+    if (found) {
+      selectedTask.value = found
+      await loadTimeline(found.taskId)
+    }
+  }
+})
+</script>
+
+<style scoped>
+.task-timeline-page {
+  min-height: 100vh;
+  background: var(--bg-primary);
+  color: var(--text-primary);
+}
+
+.tl-container {
+  display: flex;
+  height: calc(100vh - 44px);
+  overflow: hidden;
+}
+
+/* ═══ Left Panel ═══ */
+.tl-left {
+  width: 340px;
+  min-width: 280px;
+  border-right: 1px solid var(--border-primary);
+  display: flex;
+  flex-direction: column;
+  background: var(--bg-secondary);
+}
+
+.tl-left-header {
+  padding: 16px 20px;
+  border-bottom: 1px solid var(--border-primary);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.tl-left-header h2 {
+  font-size: 18px;
+  font-weight: 700;
+}
+
+.btn-refresh {
+  padding: 6px 10px;
+  border-radius: 6px;
+  border: 1px solid var(--border-primary);
+  background: var(--bg-surface);
+  color: var(--text-secondary);
+  cursor: pointer;
+  font-size: 14px;
+  transition: all 0.2s;
+}
+.btn-refresh:hover {
+  background: var(--bg-surface-hover);
+  border-color: var(--border-active);
+}
+
+.tl-search-bar {
+  padding: 10px 16px;
+  border-bottom: 1px solid var(--border-primary);
+}
+
+.tl-input {
+  width: 100%;
+  padding: 8px 12px;
+  border-radius: 6px;
+  border: 1px solid var(--border-primary);
+  background: var(--bg-input);
+  color: var(--text-primary);
+  font-size: 13px;
+  outline: none;
+  transition: all 0.2s;
+}
+.tl-input:focus {
+  background: var(--bg-input-focus);
+  border-color: var(--border-active);
+}
+
+.tl-task-list {
+  flex: 1;
+  overflow-y: auto;
+}
+
+.tl-empty {
+  text-align: center;
+  padding: 40px 16px;
+  color: var(--text-muted);
+  font-size: 14px;
+}
+
+.tl-task-card {
+  padding: 14px 20px;
+  border-bottom: 1px solid var(--border-primary);
+  cursor: pointer;
+  transition: all 0.15s;
+}
+.tl-task-card:hover {
+  background: var(--bg-surface-hover);
+}
+.tl-task-card.active {
+  background: var(--bg-surface-active);
+  border-left: 3px solid var(--accent);
+}
+
+.task-card-title {
+  font-size: 14px;
+  font-weight: 700;
+  color: var(--text-primary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-bottom: 4px;
+}
+
+.task-card-id {
+  font-size: 11px;
+  color: var(--text-muted);
+  font-family: monospace;
+  margin-bottom: 8px;
+}
+
+.task-card-agents {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  margin-bottom: 6px;
+}
+
+.agent-tag {
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-size: 10px;
+  font-weight: 700;
+  text-transform: uppercase;
+  background: var(--accent-bg);
+  color: var(--accent-light);
+  letter-spacing: 0.3px;
+}
+.agent-tag.more {
+  background: var(--bg-surface);
+  color: var(--text-muted);
+}
+
+.task-card-meta {
+  font-size: 11px;
+  color: var(--text-tertiary);
+}
+
+/* Task flow badge (from → to) */
+.task-flow {
+  display: inline-block;
+  font-size: 10px;
+  padding: 1px 5px;
+  border-radius: 3px;
+  background: var(--purple-bg);
+  color: var(--purple-text);
+  margin-right: 4px;
+  font-weight: 600;
+}
+
+/* Status dot */
+.task-status-dot {
+  display: inline-block;
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  margin-left: 6px;
+  vertical-align: middle;
+}
+.status-done, .status-completed { background: var(--green-text); }
+.status-dispatched, .status-running { background: var(--blue-text); animation: pulse-dot 1.5s infinite; }
+.status-failed { background: #f87171; }
+.status-unknown { background: var(--text-muted); }
+
+@keyframes pulse-dot {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.3; }
+}
+
+/* ── Child task cards ── */
+.tl-child-card {
+  display: flex;
+  padding: 10px 12px 10px 16px;
+  background: var(--bg-surface);
+  border-left: 2px solid var(--border-active);
+  margin-left: 16px;
+}
+.tl-child-card .task-card-title {
+  font-size: 13px;
+  font-weight: 600;
+}
+.tl-child-card .task-card-id {
+  font-size: 10px;
+}
+
+.child-connector {
+  color: var(--text-muted);
+  font-family: monospace;
+  font-size: 13px;
+  margin-right: 8px;
+  flex-shrink: 0;
+  padding-top: 2px;
+}
+
+.child-content {
+  flex: 1;
+  min-width: 0;
+}
+
+/* ═══ Right Panel ═══ */
+.tl-right {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: var(--bg-primary);
+}
+
+.tl-placeholder {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-muted);
+}
+.placeholder-icon {
+  font-size: 56px;
+  margin-bottom: 16px;
+}
+.tl-placeholder h3 {
+  font-weight: 500;
+  font-size: 16px;
+}
+
+.tl-right-header {
+  padding: 16px 24px;
+  border-bottom: 1px solid var(--border-primary);
+  background: var(--bg-secondary);
+  flex-shrink: 0;
+}
+
+.tl-right-title h2 {
+  font-size: 16px;
+  font-weight: 700;
+}
+.tl-right-subtitle {
+  font-size: 13px;
+  color: var(--text-tertiary);
+  margin-top: 4px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 600px;
+}
+
+.tl-filters {
+  display: flex;
+  gap: 10px;
+  margin-top: 12px;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+.filter-input {
+  width: 180px;
+}
+
+.tl-select {
+  padding: 6px 10px;
+  border-radius: 6px;
+  border: 1px solid var(--border-primary);
+  background: var(--bg-input);
+  color: var(--text-primary);
+  font-size: 13px;
+  outline: none;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+.tl-select:focus {
+  border-color: var(--border-active);
+  background: var(--bg-input-focus);
+}
+.filter-conv {
+  max-width: 200px;
+}
+
+.btn-sort {
+  padding: 6px 12px;
+  border-radius: 6px;
+  border: 1px solid var(--border-primary);
+  background: var(--bg-surface);
+  color: var(--text-secondary);
+  cursor: pointer;
+  font-size: 13px;
+  font-weight: 600;
+  transition: all 0.2s;
+}
+.btn-sort:hover {
+  background: var(--bg-surface-hover);
+  border-color: var(--border-active);
+}
+
+/* ═══ Timeline List ═══ */
+.tl-timeline-scroll {
+  flex: 1;
+  overflow-y: auto;
+  padding: 20px 24px;
+}
+
+.tl-timeline-list {
+  max-width: 900px;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.tl-msg-card {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-primary);
+  border-radius: 10px;
+  overflow: hidden;
+  transition: box-shadow 0.2s;
+}
+.tl-msg-card:hover {
+  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
+}
+
+/* Agent Header */
+.tl-msg-header {
+  padding: 8px 16px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid var(--border-primary);
+  font-size: 13px;
+}
+
+.tl-msg-header-left {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.agent-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--accent);
+}
+
+.agent-name {
+  text-transform: uppercase;
+  font-size: 12px;
+  letter-spacing: 0.5px;
+}
+
+.company-badge {
+  font-size: 11px;
+  padding: 1px 6px;
+  border-radius: 4px;
+  background: var(--bg-surface);
+  color: var(--text-tertiary);
+}
+
+.conv-id {
+  font-size: 10px;
+  color: var(--text-muted);
+  font-family: monospace;
+}
+
+.tl-msg-time {
+  font-size: 12px;
+  color: var(--text-tertiary);
+  font-family: monospace;
+}
+
+/* Agent-specific colors */
+.agent-master  { background: rgba(139,92,246,0.08); border-left: 3px solid #8b5cf6; }
+.agent-master .agent-dot  { background: #8b5cf6; }
+.agent-master .agent-name { color: var(--purple-text); }
+
+.agent-innovator  { background: rgba(59,130,246,0.08); border-left: 3px solid #3b82f6; }
+.agent-innovator .agent-dot  { background: #3b82f6; }
+.agent-innovator .agent-name { color: var(--blue-text); }
+
+.agent-hunter  { background: rgba(16,185,129,0.08); border-left: 3px solid #10b981; }
+.agent-hunter .agent-dot  { background: #10b981; }
+.agent-hunter .agent-name { color: var(--green-text); }
+
+.agent-digester  { background: rgba(251,191,36,0.08); border-left: 3px solid #fbbf24; }
+.agent-digester .agent-dot  { background: #fbbf24; }
+.agent-digester .agent-name { color: var(--yellow-text); }
+
+.agent-evolver  { background: rgba(239,68,68,0.08); border-left: 3px solid #ef4444; }
+.agent-evolver .agent-dot  { background: #ef4444; }
+.agent-evolver .agent-name { color: #f87171; }
+
+.agent-agent-creator  { background: rgba(236,72,153,0.08); border-left: 3px solid #ec4899; }
+.agent-agent-creator .agent-dot  { background: #ec4899; }
+.agent-agent-creator .agent-name { color: #f472b6; }
+
+/* Message Body */
+.tl-msg-body {
+  padding: 14px 16px;
+  font-size: 14px;
+  line-height: 1.7;
+}
+
+.msg-text {
+  white-space: pre-wrap;
+  word-break: break-word;
+  color: var(--text-secondary);
+}
+
+.tool-call-block {
+  background: var(--bg-code);
+  padding: 10px 14px;
+  border-radius: 6px;
+  font-family: 'SF Mono', 'Fira Code', monospace;
+  font-size: 12px;
+  color: var(--cyan-text);
+  white-space: pre-wrap;
+  word-break: break-all;
+  border: 1px solid var(--border-primary);
+  overflow-x: auto;
+}
+</style>