ActivityFeed
Real-time feed of agent events — tool calls, reasoning steps, and permission requests.
Preview
claude-3-5-sonnet completed tool call web_search("multi-agent coordination 2025")
claude-3-5-sonnet requested permission for bash("git diff HEAD~1")
claude-3-haiku wrote to memory context/search-results-batch-2.md
claude-3-haiku failed to read file src/agent/planner.ts
claude-3-5-sonnet skipped step — already cached index/embeddings-v3.bin
Variants
Single group — no date header
claude-3-5-sonnet completed tool call read_file("src/planner.ts")
claude-3-5-sonnet is writing to context/plan-v2.md
Dense — many events, counts visible
claude-3-haiku wrote to memory context/results-batch-1.md
claude-3-haiku wrote to memory context/results-batch-2.md
claude-3-5-sonnet failed to call bash("cargo build")
claude-3-5-sonnet queued retry for bash("cargo build --release")
claude-3-haiku skipped — duplicate of context/results-batch-1.md
Props
| Prop | Type | Description |
|---|---|---|
| groups* | ActivityFeedGroupProps[] | Ordered list of dated event groups. Rendered top to bottom. |
| groups[].label* | string | Section heading, e.g. "Today", "Yesterday", "14:00 – 14:05". |
| groups[].events* | ActivityEvent[] | Ordered list of events within this group. |
| groups[].hideCount | boolean | Hides the per-group event count badge in the sticky header. |
| events[].id* | string | Stable key for React reconciliation. |
| events[].status* | StatusType | Colours the leading StatusDot: running · success · error · skipped · paused · pending. |
| events[].agent* | string | Name of the acting agent — rendered in bold. |
| events[].action* | string | Verb phrase describing what the agent did, e.g. "completed tool call". |
| events[].target | string | Optional artifact or resource the action touched. Rendered monospace. |
| events[].time* | string | Short relative or absolute time, e.g. "12s ago" or "14:02". |
| className | string | Additional Tailwind classes applied to the outer container. |
* required.
Usage
import { ActivityFeed } from "@/components/monitor/activity-feed";
<ActivityFeed
groups={[
{
label: "Just now",
events: [
{
id: "evt-001",
status: "success",
agent: "claude-3-5-sonnet",
action: "completed tool call",
target: "web_search(\"multi-agent coordination\")",
time: "2s ago",
},
{
id: "evt-002",
status: "running",
agent: "claude-3-5-sonnet",
action: "requested permission for",
target: "bash(\"git diff HEAD~1\")",
time: "5s ago",
},
],
},
]}
/>