Back to components

AI Interfaces

Tool Latency Waterfall

A critical-path timeline showing overlapping tool calls, blocking work, and total response latency.

toolslatencyobservability

Installation

Copy and paste the code into your project.

Accessibility notes

Every tool exposes its exact duration and the critical-path bottleneck is summarized in text.

Latency waterfall

Tool execution path

1.42s total
  1. Search420ms
  2. Database710ms
  3. Formatter290ms

Database lookup owns 50% of the critical path.

Preview accent

TypeScript
const calls = [{ name: "Search", time: "420ms" }, { name: "Database", time: "710ms" }]; export function ToolLatencyWaterfall() { return <ol>{calls.map((call) => <li key={call.name}>{call.name}: {call.time}</li>)}</ol>; }
Usage
<ToolLatencyWaterfall />

Related components

Agent activity

3 tool calls

live
  1. 1

    search_docs

    design system tokens

    128ms
  2. 2

    read_file

    components/card.tsx

    42ms
  3. …

    write_patch

    3 changes proposed

    running

AI Interfaces

Tool Call Inspector

Intermediate

A live execution trace for agent tools, file operations, and long-running tasks.

agenttoolsobservability
View component

Tool health

Runtime dependencies

Last 15m
ToolSuccessP95
Search
Healthy
99.8%410ms
CRM
Healthy
98.7%620ms
Billing
Watch
94.1%1.4s

AI Interfaces

Tool Health Matrix

Intermediate

A runtime dependency matrix showing tool success rate, P95 latency, and degraded states for agent operations.

toolshealthobservability
View component

Context window

25.4k / 32k

79% used
System
4.2k
Conversation
12.8k
Sources
8.4k

6.6k tokens available for response

AI Interfaces

Context Window Meter

Intermediate

A token allocation breakdown for system instructions, conversation history, and retrieved sources.

tokenscontextobservability
View component