Tool Activity Feed

A live stream of the tools the assistant is calling, updating in real time as each one runs — across Brand, Neutral, and Outline styles.

Loading demo: tool-activity-feed-real-world

Installation

npx sdaia-ui@latest add tool-activity-feed

Usage

import { ToolActivityFeed } from "sdaia-ui"

1<ToolActivityFeed
2  variant="brand"
3  state="live"
4  title="Agent Processing Feed"
5  count="3 Jobs Active"
6  items={[
7    { type: 'code', title: 'tool::code_execution', status: 'Running...' },
8    { type: 'web', title: 'tool::web_action', status: 'Awaiting pipe' },
9  ]}
10/>

Examples

Brand

A raised surface with a default border — the default style, shown in the live state.

Loading demo: tool-activity-feed-brand

Neutral

A subtle surface with a subtle border.

Loading demo: tool-activity-feed-neutral

Outline

A transparent surface with a default border.

Loading demo: tool-activity-feed-outline

Completed

The completed state — a success tick replaces the live dot, the count turns neutral, and each row shows a result line plus a metric badge.

Loading demo: tool-activity-feed-completed

API Reference

Tool Activity Props

Prop	Type	Default	Required
variant	'brand' \| 'neutral' \| 'outline'	'brand'	optional
state	'live' \| 'completed'	'live'	optional
title	ReactNode	—	required
items	ToolActivityFeedItem[]	—	required
count	ReactNode	—	optional
showCount	boolean	true	optional
headerIcon	ReactNode	—	optional
showMetrics	boolean	true	optional
dir	'ltr' \| 'rtl'	'ltr'	optional
as	ElementType	'div'	optional