Step timer

Elapsed and final duration for an agent step, in tabular figures that tick once per second.

Markdown

On this page

Live elapsed time and finished durations in tabular figures.

Installation

$ pnpm dlx shadcn@latest add https://chatcn.dev/r/step-timer.json

Usage

tsx

import { StepTimer } from "@/components/ui/chatcn/step-timer"

<StepTimer running={running} startedAt={startedAt} durationMs={durationMs} placeholder="Running" />

Keep one StepTimer mounted across running and done and it measures the step for you. The same logic is available as the useChatcnElapsed hook, with formatChatcnDuration for your own labels.

Format

Duration	Finished	Live
84 ms	84 ms	Hidden, or the placeholder
1.32 s	1.3 s	1 s
12.4 s	12 s	12 s
124 s	2 m 4 s	2 m 4 s

Props

Prop	Type	Notes
`running`	`boolean`	Ticks while true
`startedAt`	`number`	Epoch ms. Measured from the first running render when omitted
`durationMs`	`number`	Final duration once not running
`showAfter`	`number`	Hide the live counter until this many ms. Default 1000
`placeholder`	`ReactNode`	Shown before `showAfter`
`precise`	`boolean`	Decimals under 10 s for finished steps. Default true
`prefix`	`ReactNode`	Text before the time, for example Thought for

Accessibility

Renders a time element with an ISO 8601 duration. While running it has role="timer", which is not announced on every tick.

Motion

No animation. Ticks align to the start time, so the counter turns over exactly at 1 s, 2 s, 3 s. Tabular figures keep the width still.