A compact live-operation-log entry. It pairs a muted header (label + dated clock), a divider, and an activity line (a brand-green action icon + description + timestamp) — across Brand, Neutral, and Outline styles.
Loading demo: agent-activity-real-world
npx sdaia-ui@latest add agent-activity
import { AgentActivity } from "sdaia-ui"1<AgentActivity2variant="brand"3label="Live Operation Log"4date="June 2026"5action="Parsing security payload ruleset on distributed endpoint database"6timestamp="14:20:34.120"7/>
A raised surface — the default style.
Loading demo: agent-activity-brand
A subtle surface.
Loading demo: agent-activity-neutral
A transparent surface with a default border.
Loading demo: agent-activity-outline
Hide the header with showHeader={false}, or the timestamp with showTimestamp={false}.
Loading demo: agent-activity-toggles
Prop | Type | Default | Required |
|---|---|---|---|
variant | 'brand' | 'neutral' | 'outline' | 'brand' | optional |
action | ReactNode | — | required |
label | ReactNode | — | optional |
date | ReactNode | — | optional |
showHeader | boolean | true | optional |
timestamp | ReactNode | — | optional |
showTimestamp | boolean | true | optional |
actionIcon | string | wrench02Stroke | optional |
showActionIcon | boolean | true | optional |
headerIcon | string | timeHalfPassStroke | optional |
dir | 'ltr' | 'rtl' | 'ltr' | optional |
as | ElementType | 'div' | optional |