Tool Status Row

A compact row per tool that pairs identity, lifecycle state and progress in a single line — here a success, a running and a queued call stacked as an agent works.

Loading demo: tool-status-row-real-world

Installation

npx sdaia-ui@latest add tool-status-row

Usage

import { ToolStatusRow } from "sdaia-ui"

1<ToolStatusRow
2  variant="neutral"
3  state="running"
4  name="search_web"
5  subtitle="Search server · attempt 1 of 3"
6/>

Examples

Brand

Brand-tinted surface and pill — shown across all four states.

Loading demo: tool-status-row-brand

Neutral

A raised surface with a neutral pill — the quiet default.

Loading demo: tool-status-row-neutral

Outline

A transparent surface with an outline pill.

Loading demo: tool-status-row-outline

API Reference

Prop	Type	Default	Required
variant	'brand' \| 'neutral' \| 'outline'	'neutral'	optional
state	'queued' \| 'running' \| 'success' \| 'failed'	'queued'	optional
name	ReactNode	—	required
subtitle	ReactNode	—	optional
statusLabel	ReactNode	—	optional
showStatus	boolean	true	optional
progress	number	—	optional
showProgress	boolean	true	optional
icon	string	—	optional
showIcon	boolean	true	optional
dir	'ltr' \| 'rtl'	'ltr'	optional
as	ElementType	'div'	optional