Agent Activity

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

Installation

npx sdaia-ui@latest add agent-activity

Usage

import { AgentActivity } from "sdaia-ui"

1<AgentActivity
2  variant="brand"
3  label="Live Operation Log"
4  date="June 2026"
5  action="Parsing security payload ruleset on distributed endpoint database"
6  timestamp="14:20:34.120"
7/>

Examples

Brand

A raised surface — the default style.

Loading demo: agent-activity-brand

Neutral

A subtle surface.

Loading demo: agent-activity-neutral

Outline

A transparent surface with a default border.

Loading demo: agent-activity-outline

Optional slots

Hide the header with showHeader={false}, or the timestamp with showTimestamp={false}.

Loading demo: agent-activity-toggles

API Reference

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