Tool-call row | Sodium design system

State

1. Compact filesCompact files1,204 partitionsQueuedQueued
queued
1. Write partitionsWrite partitionswh_events.events_raw14sWriting partitions
running
1. Scale workersScale workerspool-a, 48 to 96Needs approval
waiting
1. Read sourceRead sourcelake://events/2026-10-181.2sDoneDone
donedefault
1. Write partitionsWrite partitionswh_events.events_raw3.8sWrite failed
failed
1. Compact filesCompact files1,204 partitionsStoppedStopped
stopped

1. Read sourceRead sourcelake://events/2026-10-181.2sDoneDone
2. Write partitionsWrite partitionswh_events.events_raw14sWriting partitions
3. Compact filesCompact files1,204 partitionsQueuedQueued
defaultdefault
1. Read sourceRead sourcelake://events/2026-10-181.2sDoneDone
2. Write partitionsWrite partitionswh_events.events_raw14sWriting partitions
3. Compact filesCompact files1,204 partitionsQueuedQueued
sm

wrote 1,204 partitions to wh_events.events_raw
compacted 12 files, 3.4 GB

rest

wrote 1,204 partitions to wh_events.events_raw
compacted 12 files, 3.4 GB

hover

wrote 1,204 partitions to wh_events.events_raw
compacted 12 files, 3.4 GB

focus-visible

wrote 1,204 partitions to wh_events.events_raw
compacted 12 files, 3.4 GB

open

1. Read sourcelake://events/2026-10-181.2sDoneDone
2. Write partitionswh_events.events_raw14sWriting partitions
3. Compact files1,204 partitionsQueuedQueued
drawing
1. Write partitionsWrite partitionswh_events.events_rawWrite failed
tab scrambling

When to use it

Use: A run, a job or an agent works through steps and the person watches them land in order.
Use: One step failed or waits on the person, and it has to be found at a glance among the rest.
Not for: The steps are an agent's tool calls with events, output and approvals. Use Tool call.
Not for: One live line for the whole run. Use Activity.

7 rules

Must: Put the rows of one run in a ToolCallStack, in the order they ran. Because the stack draws the spine and the connectors, keeps the 20px a tab sits in, and makes the rows one list.
Never: Put a ToolCallStack inside a frame or a panel; set it in message flow or on the page. Because each step is already a box, and Sodium never draws a box in a box.
Must: Write the label in sentence case as a verb and its object, with no brackets; put what it acted on in detail, as written. Because the row draws the brackets and the capitals, and a path or a table name in capitals is a different name.
Should: Keep one step running at a time in a stack, and give it a tab that names the work ("Writing partitions"). Because the running tab is the place the eye goes, and two of them split it.
Must: Say what failed in the failed tab ("Write failed") and the cause in the body; never leave the tab as just the colour. Because red alone reads only as "something", and a person scanning a run needs the step and the cause.
Never: Show a step waiting on a person in yellow; use state="waiting", which is orange with its word. Because yellow is the one action on the screen, so a yellow step reads as the thing to press.
Should: Pass clock to the stack for a still picture (a test, a screenshot, a replay you drive); leave it out for live motion. Because given a clock the connectors and tab words draw that one moment and run no frame loop.

5 checks

: The stack is an ordered list, so the steps are read in the order they ran.
: Every state has a word: the tab or the end word, read once after the label; the pending mark and the connectors are aria-hidden.
: A row with a body has a button header with aria-expanded and aria-controls, named by its label, detail, state and time.
: The failure tab is white on the failure red, 6.5:1 in light and 6.6:1 in dark; the waiting word is 5.2:1 on its tint.
: A running row sets aria-busy.

1 key

6 edge cases

Long label or detail: The detail truncates first, then the label; the time and the word never do.
Narrow screen: The detail shrinks to nothing before the label shrinks.
A step arrives later: Its connector draws from the moment it arrives, after any hop still drawing.
State flips: The colour cuts at once; only the tab's words scramble in.
Reduced motion: Connectors, labels and tab words are all there from the first frame; the pending mark stands still.
Forced colors: The edges, the connectors, the tab and its word stay, in the system colours.

12 props

ToolCallStack connectors: boolean default true
ToolCallStack typing: boolean default true
ToolCallStack size: 'default' | 'sm' default 'default'
ToolCallStack clock, play: number, boolean
label: string default required
detail: ReactNode
state: 'queued' | 'running' | 'waiting' | 'done' | 'failed' | 'stopped' default 'done'
tab, word: string default the state's word
duration: number
children: ReactNode
open, defaultOpen, onOpenChange: boolean, boolean, function default false
words: Partial<StepWords> default English

26 tokens