Tool Call Sequence

A collapsible step list that visualises the status and details of sequential AI tool calls. Each step shows a numbered index, the tool name, a status icon (pending, running, done, or error), and an expandable drawer displaying the call arguments, result, or error payload.

import { ToolCallSequence } from "@aetherstack/patterns"

Installation

terminal

npx aether-ui add tool-call-sequence

Import

import.tsx

import { ToolCallSequence } from "@aetherstack/patterns"

Usage

tool-call-sequence.tsx

import { ToolCallSequence } from "@aetherstack/patterns"

const steps = [
  {
    id: "1",
    toolName: "search_web",
    status: "done",
    args: { query: "latest React news" },
    result: { count: 5, top: "React 19 released" },
  },
  {
    id: "2",
    toolName: "read_file",
    status: "running",
    args: { path: "src/app.tsx" },
  },
  {
    id: "3",
    toolName: "write_file",
    status: "pending",
  },
]

export function MyToolCallSequence() {
  return <ToolCallSequence steps={steps} />
}

Props

Prop	Type	Default	Description
steps*	Step[]	—	Array of tool call steps. Each step requires id, toolName, and status ("pending" \| "running" \| "done" \| "error").
className	string	—	Additional CSS classes applied to the list container.

* Required

Accessibility

→Each step row is a button element — keyboard users can expand and collapse details with Enter or Space.
→The expand/collapse icon is aria-hidden; the button's accessible label is derived from the tool name.
→Status icons include a visually-hidden text equivalent so screen readers announce the step state.
→Expanded code blocks are marked as role='region' with an aria-label referencing the step name.