Docs / Tool calls /

StepStatusRow

A single row in a step sequence: step name, current status, and optional metadata inline.

Preview

Clone repository· 3.2s

git clone https://github.com/acme/api.git

Install dependencies· 15s

bun install · 312 packages

Run test suite

bun test · 148 tests

Build for production

Deploy to Vercel

Variants

All statuses

Completed step· 1.2s

Currently running

Awaiting start

Failed with error· 880ms

Exit code 1 — see logs

Skipped (cache hit)

Paused — awaiting approval

With meta

Fetch external data· 218ms200 OK

GET https://api.stripe.com/v1/balance

Parse and validate response· 4ms42 records

Write to database

Upserting balance records…

Props

Prop	Type	Description
title*	string	Primary label for the step.
status*	"pending" \| "running" \| "success" \| "error" \| "skipped" \| "paused"	Controls the icon circle's colour, fill, and icon glyph.
index	number	Step number shown inside the icon circle when status is "pending".
description	string	Secondary text line below the title, truncated to one line.
durationMs	number	Wall-clock duration displayed next to the title as a short string.
meta	React.ReactNode	Right-aligned slot for badges or supplementary information.
connector	"none" \| "top" \| "bottom" \| "both"	Draws a vertical line connecting adjacent steps. Use "both" for middle items, "bottom" for the first, "top" for the last.
active	boolean	Highlights the content area with a border and surface background — use for the currently running step.
className	string	Extra classes for the row container.

* required.

Usage

import { StepStatusRow } from "@/components/agent/step-status-row";

<div className="flex flex-col">
  <StepStatusRow
    index={1}
    title="Clone repository"
    status="success"
    durationMs={3200}
    connector="bottom"
  />
  <StepStatusRow
    index={2}
    title="Run tests"
    status="running"
    connector="both"
    active
  />
  <StepStatusRow
    index={3}
    title="Deploy"
    status="pending"
    connector="top"
  />
</div>