Trace group

Folds consecutive steps into one line, Read 6 files, with a live line that shows what the agent is doing right now.

Markdown

On this page

Reads fold into one line that shows the file being read right now.

Installation

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

Usage

tsx

import { Trace, TraceStep } from "@/components/ui/chatcn/trace"
import { TraceGroup } from "@/components/ui/chatcn/trace-group"

<Trace>
  <TraceGroup
    status={done ? "done" : "running"}
    title={`Read ${reads.length} files`}
    activeTitle={`Reading ${reads.length} files`}
    current={currentPath}
  >
    {reads.map((r) => (
      <TraceStep key={r.id} status={r.status} detail={r.path} />
    ))}
  </TraceGroup>
</Trace>

Mark the group done once the agent moves on, not in the gaps between steps, and keep current on the last step between reads so the line never blinks empty.

Examples

300 steps

Children mount only while expanded and finished rows are static, so a large group stays light. The list scrolls past 22 rem with a soft bottom edge.

A large group stays still: static rows, no motion on mount.

Props

Prop	Type	Notes
`status`	`TraceStatus`	Usually `running` or `done`
`title`	`ReactNode`	Summary when finished: Read 6 files
`activeTitle`	`ReactNode`	Label while running. Defaults to `title`
`current`	`ReactNode`	The doing now line while running
`summary`	`ReactNode`	Shown in its place once finished
`icon`	`ReactNode`	Glyph at rest. Defaults to a list tree
`durationMs`, `startedAt`	`number`	Measured automatically when omitted
`maxHeight`	`string`	Cap before the list scrolls. Default 22 rem
`open`, `defaultOpen`, `onOpenChange`		Collapsed by default

Keyboard

Key	Action
`Enter`, `Space`	Expand or collapse the group

Accessibility

The doing now line is not a live region: a screen reader would hear every file. The finished title is announced once, politely.
The header is a Base UI Collapsible trigger with aria-expanded.

Motion

The doing now line swaps in place with no animation, so a group moving through hundreds of steps stays still.
Only the group's own glyph crossfades, once, when it finishes.