A live timeline of agent activity with per-step icons, searched sources, running state, and details.
import { CheckCircleIcon } from '@solar-icons/react/linear/check-circle'
import { GlobalIcon } from '@solar-icons/react/linear/global'
import { PenNewSquareIcon } from '@solar-icons/react/linear/pen-new-square'
import { ShieldCheckIcon } from '@solar-icons/react/linear/shield-check'
import { Widget4Icon } from '@solar-icons/react/linear/widget-4'
import * as React from 'react'
import AgentActivity, { type AgentActivityItem } from '@/components/ui/agent-activity'
const sites = ['21st.dev', 'shadcn.io', 'assistant-ui.com', 'pro.pastaui.com']
const steps = [
{ id: 'inventory', icon: <Widget4Icon />, running: 'Inspecting the component inventory', done: 'Inspected the component inventory', detail: '51 components indexed' },
{ id: 'search', icon: <GlobalIcon />, running: 'Searching AI-focused registries', done: 'Searched AI-focused registries', detail: '576 directory items compared' },
{ id: 'author', icon: <PenNewSquareIcon />, running: 'Authoring approval and execution surfaces', done: 'Authored approval and execution surfaces', detail: '7 surfaces drafted' },
{ id: 'verify', icon: <ShieldCheckIcon />, running: 'Running production verification', done: 'Verified the production build', detail: '116 routes checked' },
{ id: 'summary', icon: <CheckCircleIcon />, running: 'Writing the summary', done: 'Wrote the summary', detail: 'Ready for review' },
]
export default function Demo() {
const [count, setCount] = React.useState(3)
React.useEffect(() => {
const finished = count > steps.length
const timer = setTimeout(() => setCount((value) => (finished ? 1 : value + 1)), finished ? 3200 : 1700)
return () => clearTimeout(timer)
}, [count])
const items: AgentActivityItem[] = steps.slice(0, Math.min(count, steps.length)).map((step, index) => {
const running = index === count - 1 && count <= steps.length
return {
id: step.id,
icon: step.icon,
label: running ? step.running : step.done,
detail: running ? undefined : step.detail,
status: running ? 'running' : 'complete',
sources:
step.id === 'search'
? sites.map((site) => ({ id: site, label: site, icon: <GlobalIcon /> }))
: undefined,
}
})
return (
<div className="min-h-[19rem] w-full max-w-lg">
<AgentActivity items={items} />
</div>
)
}
Part of Pasta UI — browse the full library on 21st.dev.