Agents

Reasoning Steps

A dense trace of what the agent did, with a glyph per kind of step and a duration on each. Open while it runs, folded to one summary line when done.

Group: Agents. Exports: ReasoningSteps. Halaska addition with no shadcn/ui equivalent.

Usage

import { ReasoningSteps } from "./halaska-kit";

steps { id: string, kind: "thought" | "search" | "read" | "tool" | "write", label: string, detail?: string, durationMs?: number }[] (default REASON_STEPS): Steps in order; each shows for its durationMs, or stepMs when absent (default: REASON_STEPS)
autoplay boolean (default true): Stream the steps in on mount; false renders the finished trace with no timers (default: true)
stepMs number (default 900): Fallback duration for a step without durationMs (default: 900)
runningLabel string (default "Thinking"): Header text while running (default: "Thinking")
summaryLabel string | (seconds: number) => string: Header text once done; a function receives the total seconds (default: `Thought for ${seconds} seconds`)
collapsed boolean (default true): Fold to the summary line once done; false leaves the steps open (default: true)
collapseDelayMs number (default 700): Pause between the last step and the fold (default: 700)
onDone (seconds: number) => void: Fires when the last step finishes (autoplay only)
onToggle (open: boolean) => void: Fires when the trace opens or folds, by click or by the automatic fold

The header is a native button with aria-expanded and aria-controls. It only toggles once the trace is done, and the cursor says so.
The steps render as a list inside a polite live region, so each one is announced as it arrives. Each kind glyph is an image named with its kind.
Steps that have not arrived yet are hidden from assistive technology. The active step sets aria-current.
Durations are text, not colour, so they read the same in every theme.