Build an agent run trace with Tailwind CSS for inspecting what an AI agent actually did. Use a max-w-3xl card with a header carrying the run title, a green completed pill, a monospace run id with the agent name and step count, then right-aligned duration and token totals and a replay button. Below it, an ordered list of steps joined by a thin vertical rail: each row has a small round status dot, a monospace kind badge reading thought, tool or output, the step name, a truncated one-line result, and right-aligned duration and token figures. Clicking a row expands a dark monospace panel underneath showing the raw input and output for that step. Then add JavaScript that renders the steps from an array, toggles one panel at a time, and makes replay clear the totals and reveal the steps one after another with a short stagger, adding each step duration and token count to the header as it lands.
Paste it into Claude, Cursor, v0 or any AI coding tool. Prefer the
finished markup? .
Build an agent run trace with Tailwind CSS for inspecting what an AI agent actually did. Use a max-w-3xl card with a header carrying the run title, a green completed pill, a monospace run id with the agent name and step count, then right-aligned duration and token totals and a replay button. Below it, an ordered list of steps joined by a thin vertical rail: each row has a small round status dot, a monospace kind badge reading thought, tool or output, the step name, a truncated one-line result, and right-aligned duration and token figures. Clicking a row expands a dark monospace panel underneath showing the raw input and output for that step. Then add JavaScript that renders the steps from an array, toggles one panel at a time, and makes replay clear the totals and reveal the steps one after another with a short stagger, adding each step duration and token count to the header as it lands.
