GitHubnpm

Accent theme

Base radius

GitHubnpm

Accent theme

Base radius

Colour scheme

Docs menu

Guides


Primitives
Forms
Layout
Feedback
Overlays
Navigation
Data Display
AI

Agent Activity

One chronological stream of what an agent did: reasoning, searches, tool calls, structured traces, mixed freely. It's a real<ol>, because a trace is the one thing where orderis the content — "it searched, then read the file, then edited it" stops being true if the list reorders.

  1. Thought for 3s
    The failing assertion is about the settle target, so the drag engine is the place to look before the component.
  2. Searched the repo for “settle”
  3. Ran the motion checks
    4 passed, 0 failed.
  4. Wrote the fix to sheetDrag.ts

Playground

Toggle every adjustable prop and watch the component — and the code — update live.

  1. Searched the repo
    Three matches, all in packages/react/src/utils.
Unstyled

Same component — Kernel look stripped. See Platforms.

kind
status
has detail
Usage
<AgentActivity>
  <AgentActivityItem kind="search" status="complete" label="Searched the repo">
    Three matches, all in packages/react/src/utils.
  </AgentActivityItem>
</AgentActivity>

Props

Props for Agent Activity Item.
PropTypeDefault
labelReactNoderequired
kind"reasoning" | "search" | "tool" | "trace""trace"
status"pending" | "running" | "complete" | "error""complete"
defaultOpenbooleanfalse
open / onOpenChangeboolean / (open) => void

AgentActivity itself takes only label, the stream's accessible name (default "Activity").

It composes Reasoning and Tool Call, it doesn't replace them

A step with kind="reasoning" rendersReasoning in its body; a step withkind="tool" rendersTool Call. Their disclosure, streaming, and status behaviour isn't reimplemented here — there's one source of truth for those states, and both components stay exactly as they were for anyone using them standalone. search andtrace steps get this component's own<details>, height-animated by the sameDetailsPanelAnimator. A step with no children is a plain status line, not an empty disclosure.

Accessibility

  • There's no connector rail down the stream. Reasoning and tool steps render their own bordered surfaces, so a spine could only ever be drawn beside some of the steps — and one that appears next to one row and not the next reads as a rendering bug rather than a timeline. The kind icons and the row rhythm carry the sequence.
  • A step whose status is running and which has no disclosure announces itself through role="status", so progress reaches a screen reader without stealing focus.
  • Kind icons are aria-hidden. The step's meaning lives in its label, which is real text.