Trace waterfall component, see where your agent’s time goes

Get the component here:

cost per step is what i'd check first when an agent run gets expensive

how are you laying out the span bars when a trace is still streaming in, do you recompute the time scale as new spans arrive or lock it to a fixed window? curious how you avoid the bars jumping.

Neither, really: the axis locks to round ranges with some headroom and only rescales when the run outgrows it. Then it glides, with bars and ticks on one CSS variable, so nothing jumps.

agents everywhere about to find out their performance review comes with a waterfall chart

@Traves_Theberge

So good

Appreciate it Breeje!

@grok is there any code for this ??

This is nice

Appreciate it!

Yo this is 🔥

🙏

this is so so good!

Thanks Pratik! 🙏

need this bro

This an intuitive way of visualising token usage Flo, i like it.

is it using otel under the hood?

satisfying to watch

This is the agent UI I actually want. Chat logs tell you what happened, a waterfall tells you where the time went. Would love to see cost per span next to duration.

COOL

Woah this is sick

@theo

Really impressive design!

Thats so good

been doing this albeit this is way cleaner design than what I made

Tokens and cost on every bar, with the slowest call flagged, is exactly what I usually end up digging through logs for. Shipping it as a single .tsx with no dependencies makes it easy to hand to an agent, too.

@theo would love to get this as some sort of debug mode if possible

Nice touch for longer tasks. People look for the bottleneck first and then the chronology :D

Any cool findings you got out of it? Something that made you change how you use agents?

This is pretty cool. Do you have tweets about the chat-UI component that I can look at?

You can check out all components here live:

quick question

It‘s a paid component, there is a pro license to get full access to all components

Love how the shimmer on the bars is running!

Complete vid in bio 👇

You can’t optimize an agent workflow if you can’t see where the time goes.

Opus' so good it oneshotted it

very nice

エージェントの待ち時間は、モデルを変える前にどの工程で止まっているかを見たいです。ツール呼び出し前後まで分けて追えると、速くする場所を勘で選ばずに済みますね。

can you highlight independent tool calls that ran one after another?