Agent Activity

A live timeline that shows an AI agent's work step by step — thinking shimmer while running, then a collapsible summary.

Steps

Streams type: "step" rows while status="working". Replay remounts the cycle.

Loading…

Installation

CLI

npx @sonojs/ui@latest add agent-activity

Also needsnpx @sonojs/ui@latest add agent-disclosure && npm i lucide-react motion

Usage

agent-activity.tsx

import {
  AgentActivity,
  type AgentActivityItem,
} from "@/components/sonojs/agent-activity"

const items: AgentActivityItem[] = [
  { id: "1", type: "step", label: "Reading briefs", status: "complete" },
  { id: "2", type: "step", label: "Writing report", status: "active" },
]

export function Example() {
  return (
    <AgentActivity items={items} status="working" />
  )
}

Props

Prop	Type	Default	Description
items	AgentActivityItem[]	—	Chronological activity entries (step, text, search, tool, trace).
status	"working" · "complete"	"working"	Working always stays expanded; complete can collapse.
duration	number	0	Elapsed seconds for the step/text summary.
open	boolean	uncontrolled	Controlled expanded state after complete.
defaultOpen	boolean	false	Initial open state when complete.
collapseOnComplete	boolean	true	Collapse when status flips from working to complete.
activeLabel	ReactNode	derived	Shimmer label while working.
summary	ReactNode	derived	Completed trigger label.
maxHeight	number	208	Max viewport height before the stream glides.