Agent Activity · paneui

- The user wants Q3 churn by plan. I should check the warehouse schema first, then confirm how cancellations are recorded.

Installation

pnpm dlx shadcn@latest add @paneui/agent-activity

Usage

import { AgentActivity } from "@/components/ui/agent-activity"

<AgentActivity
  status="working"
  items={[{ id: "1", type: "search", query: "flights HKG to KIX", status: "active" }]}
/>

Examples

Item Types

Use to show every kind of work in one run; consecutive items of one type fold into a group.

Completed

Custom Labels

Errors

Keep Open

Behaviour

While working the stream is always open, the header can't be toggled and the live group stays open. Groups the reader opens or closes keep that choice.

Motion

Under reduced motion the spinners stop, the live group loses its pulse ring, search chips fade in without scaling, and panels open without a height transition.

API Reference

Built on the Collapsible primitive. Only the props this library adds or changes are listed; everything else passes through.

AgentActivity

One adaptive activity stream for an agent run. Also accepts every prop of Collapsible.Root.

items*: AgentActivityItem[]; Chronological activity. Append or update items as events stream in.
status= "working": "working" | "complete"; Run state.
duration: number; Total seconds; while working and unset, the header ticks on its own.
open: boolean; Controlled open state once complete.
defaultOpen= false: boolean; Initial open state when mounting complete.
onOpenChange: (open: boolean) => void; Called when the stream opens or closes.
collapseOnComplete= true: boolean; Fold into the summary line when the run completes.
activeLabel: ReactNode; Override the live header label.
summary: ReactNode; Override the completed summary, which defaults to "Worked for …" plus a count of searches, tool calls and steps.

Prop	Type	Default	Description
items*	AgentActivityItem[]	—	Chronological activity. Append or update items as events stream in.
status	"working" \| "complete"	"working"	Run state.
duration	number	—	Total seconds; while working and unset, the header ticks on its own.
open	boolean	—	Controlled open state once complete.
defaultOpen	boolean	false	Initial open state when mounting complete.
onOpenChange	(open: boolean) => void	—	Called when the stream opens or closes.
collapseOnComplete	boolean	true	Fold into the summary line when the run completes.
activeLabel	ReactNode	—	Override the live header label.
summary	ReactNode	—	Override the completed summary, which defaults to "Worked for …" plus a count of searches, tool calls and steps.

data-status: working or complete.

Data attribute	Description
data-status	`working` or `complete`.

AgentActivityItem

Union of the four item shapes. Every item has id: string and optional status: "active" | "complete" | "error".

type: "reasoning": { text: ReactNode; duration?: number }; Thinking text; duration feeds "Thought for …".
type: "search": { query: string; results?: CitationSource[] }; A web search and its result chips.
type: "tool": { action: string; target: ReactNode; detail?: ReactNode; additions?: number; deletions?: number }; A tool call; read, edit, write and run get their own verb and icon.
type: "step": { label: ReactNode; detail?: ReactNode }; A plan step with a checkable dot.

Prop	Type	Default	Description
type: "reasoning"	{ text: ReactNode; duration?: number }	—	Thinking text; `duration` feeds "Thought for …".
type: "search"	{ query: string; results?: CitationSource[] }	—	A web search and its result chips.
type: "tool"	{ action: string; target: ReactNode; detail?: ReactNode; additions?: number; deletions?: number }	—	A tool call; `read`, `edit`, `write` and `run` get their own verb and icon.
type: "step"	{ label: ReactNode; detail?: ReactNode }	—	A plan step with a checkable dot.