# 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).