ToolCallTrace

A collapsible summary of an AI assistant's tool calls, web searches, and internal "thoughts" behind a single reply: a one-line trigger ("Thought, searched the web, used 2 tools") that expands into a vertical timeline of each step. Each step is a ToolCallEntry — one thing the assistant did (ran a tool, searched the web, or reasoned out loud) — rendered as one row of that timeline.

Installation

npx dafink-ui add tool-call-trace

Also installs: Collapsible, Timeline, Scroll-fade

Demo

Run npx dafink-ui add button in your project root; it copies the component source straight into your repo.

Props

Name	Type	Default	Description
toolCalls	ToolCallEntry[]	-	The ordered list of steps to summarize and, once expanded, render as a timeline; renders nothing when empty. See "ToolCallEntry fields" below for what each field does.

ToolCallEntry fields

interface ToolCallLink {
  title: string;
  url:   string;
}

interface ToolCallEntry {
  id:      string;
  kind:    string;
  title:   string;
  detail:  string;
  result?: string;
  links?:  ToolCallLink[];
  icon?:   ReactNode;
}

Accessibility

ToolCallTrace has no custom focus management of its own: the trigger is Collapsible's native button with aria-expanded, reachable with Tab and toggled with Enter/Space, and its content is hidden from assistive tech while collapsed. Once expanded, the nested Timeline's numbered dots and connector lines are purely decorative (aria-hidden), so the only additional tab stops are each result link, which opens in a new tab via target="_blank" rel="noopener noreferrer".