Preview Updated 2026-05-10

AgentTimeline 代理时间线

单个 agent 的行动时间线：thought / tool / action / observation / message / error 节点，纵向流式展开，每节点带 timestamp + duration + meta。

English translation pending This page hasn't been translated yet — falling back to Chinese. PRs welcome on GitHub.

基础用法

适合记录 / 回放一个 agent 的完整执行过程。事件按数组顺序渲染，每条都展示 type 徽章 + 标题 + 耗时 + 时间戳，可选 mono 字体的 content 和 meta key/value 表格。

背景视口

修复 dashboard P99 加载慢。先看 trace 找瓶颈。

{ service: "web-dashboard", lookback: "1h", min_duration: "1s" }

spans: 142
slowest: 4.2s

SELECT * FROM entries WHERE user_id = ? ORDER BY created_at DESC

EXPLAIN: Seq Scan on entries, rows=2.4M, cost=12834..98231

action创建迁移 add_idx_entries_user_created50 ms09:01:21

请 review；P99 预期从 4.2s → 80ms。

src/App.vue

<script setup lang="ts">
import { CfAgentTimeline, type AgentEvent } from '@chufix-design/vue';

const now = Date.now();
const events: AgentEvent[] = [
  {
    id: 'e1',
    type: 'thought',
    title: '理解用户意图',
    content: '修复 dashboard P99 加载慢。先看 trace 找瓶颈。',
    timestamp: now - 12000,
  },
  {
    id: 'e2',
    type: 'tool',
    title: 'jaeger.search',
    content: '{ service: "web-dashboard", lookback: "1h", min_duration: "1s" }',
    duration: 850,
    timestamp: now - 11000,
    meta: { spans: 142, slowest: '4.2s' },
  },
  {
    id: 'e3',
    type: 'observation',
    title: 'DB 查询占总时长 76%',
    content: 'SELECT * FROM entries WHERE user_id = ? ORDER BY created_at DESC',
    timestamp: now - 9000,
  },
  {
    id: 'e4',
    type: 'tool',
    title: 'sql.explain',
    duration: 220,
    content: 'EXPLAIN: Seq Scan on entries, rows=2.4M, cost=12834..98231',
    timestamp: now - 7500,
  },
  {
    id: 'e5',
    type: 'action',
    title: '创建迁移 add_idx_entries_user_created',
    duration: 50,
    timestamp: now - 6000,
  },
  {
    id: 'e6',
    type: 'message',
    title: '已开 PR #1042',
    content: '请 review；P99 预期从 4.2s → 80ms。',
    timestamp: now - 1000,
  },
];
</script>
<template>
  <CfAgentTimeline :events="events" />
</template>

<script setup>
import { CfAgentTimeline } from '@chufix-design/vue';

const now = Date.now();
const events= [
  {
    id: 'e1',
    type: 'thought',
    title: '理解用户意图',
    content: '修复 dashboard P99 加载慢。先看 trace 找瓶颈。',
    timestamp: now - 12000,
  },
  {
    id: 'e2',
    type: 'tool',
    title: 'jaeger.search',
    content: '{ service: "web-dashboard", lookback: "1h", min_duration: "1s" }',
    duration: 850,
    timestamp: now - 11000,
    meta: { spans: 142, slowest: '4.2s' },
  },
  {
    id: 'e3',
    type: 'observation',
    title: 'DB 查询占总时长 76%',
    content: 'SELECT * FROM entries WHERE user_id = ? ORDER BY created_at DESC',
    timestamp: now - 9000,
  },
  {
    id: 'e4',
    type: 'tool',
    title: 'sql.explain',
    duration: 220,
    content: 'EXPLAIN: Seq Scan on entries, rows=2.4M, cost=12834..98231',
    timestamp: now - 7500,
  },
  {
    id: 'e5',
    type: 'action',
    title: '创建迁移 add_idx_entries_user_created',
    duration: 50,
    timestamp: now - 6000,
  },
  {
    id: 'e6',
    type: 'message',
    title: '已开 PR #1042',
    content: '请 review；P99 预期从 4.2s → 80ms。',
    timestamp: now - 1000,
  },
];
</script>
<template>
  <CfAgentTimeline :events="events" />
</template>

import { CfAgentTimeline } from '@chufix-design/react';

export default function Demo() {
  const now = Date.now();
  const events: AgentEvent[] = [
    {
      id: 'e1',
      type: 'thought',
      title: '理解用户意图',
      content: '修复 dashboard P99 加载慢。先看 trace 找瓶颈。',
      timestamp: now - 12000,
    },
    {
      id: 'e2',
      type: 'tool',
      title: 'jaeger.search',
      content: '{ service: "web-dashboard", lookback: "1h", min_duration: "1s" }',
      duration: 850,
      timestamp: now - 11000,
      meta: { spans: 142, slowest: '4.2s' },
    },
    {
      id: 'e3',
      type: 'observation',
      title: 'DB 查询占总时长 76%',
      content: 'SELECT * FROM entries WHERE user_id = ? ORDER BY created_at DESC',
      timestamp: now - 9000,
    },
    {
      id: 'e4',
      type: 'tool',
      title: 'sql.explain',
      duration: 220,
      content: 'EXPLAIN: Seq Scan on entries, rows=2.4M, cost=12834..98231',
      timestamp: now - 7500,
    },
    {
      id: 'e5',
      type: 'action',
      title: '创建迁移 add_idx_entries_user_created',
      duration: 50,
      timestamp: now - 6000,
    },
    {
      id: 'e6',
      type: 'message',
      title: '已开 PR #1042',
      content: '请 review；P99 预期从 4.2s → 80ms。',
      timestamp: now - 1000,
    },
  ];
  return (
    <>
      <CfAgentTimeline events={events} />
    </>
  );
}

import { CfAgentTimeline } from '@chufix-design/react';

export default function Demo() {
  const now = Date.now();
  const events= [
    {
      id: 'e1',
      type: 'thought',
      title: '理解用户意图',
      content: '修复 dashboard P99 加载慢。先看 trace 找瓶颈。',
      timestamp: now - 12000,
    },
    {
      id: 'e2',
      type: 'tool',
      title: 'jaeger.search',
      content: '{ service: "web-dashboard", lookback: "1h", min_duration: "1s" }',
      duration: 850,
      timestamp: now - 11000,
      meta: { spans: 142, slowest: '4.2s' },
    },
    {
      id: 'e3',
      type: 'observation',
      title: 'DB 查询占总时长 76%',
      content: 'SELECT * FROM entries WHERE user_id = ? ORDER BY created_at DESC',
      timestamp: now - 9000,
    },
    {
      id: 'e4',
      type: 'tool',
      title: 'sql.explain',
      duration: 220,
      content: 'EXPLAIN: Seq Scan on entries, rows=2.4M, cost=12834..98231',
      timestamp: now - 7500,
    },
    {
      id: 'e5',
      type: 'action',
      title: '创建迁移 add_idx_entries_user_created',
      duration: 50,
      timestamp: now - 6000,
    },
    {
      id: 'e6',
      type: 'message',
      title: '已开 PR #1042',
      content: '请 review；P99 预期从 4.2s → 80ms。',
      timestamp: now - 1000,
    },
  ];
  return (
    <>
      <CfAgentTimeline events={events} />
    </>
  );
}

API

属性	类型	默认	说明
`events`	`AgentEvent[]`	—	时间线事件
`showTimestamp`	`boolean`	`true`	显示时间戳

AgentEvent

type AgentEventType =
  | 'thought' | 'tool' | 'action' | 'observation' | 'message' | 'error';

interface AgentEvent {
  id: string;
  type: AgentEventType;
  title?: string;
  content?: string;
  timestamp?: number | string;
  duration?: number;
  meta?: Record<string, string | number>;
}