shadcn.io is not affiliated with official shadcn/ui
Agent Reasoning Log Monitoring Block for Vue
One agent run as ten numbered steps (thought, action, observation, final answer) with a filter for reasoning or tool calls, a replay range that mutes the steps not run yet, and meters for the time and tokens spent so far.
Installation
Overview
Read what an agent did, step by step, and replay it to any point, with this run log for Vue with Ark UI. It is Reasonwell, an agent run viewer (made up), showing one recorded run of a support agent that refunds a duplicate charge. A hairline frame with a plus mark on each corner holds ten steps on a rail of numbered marks: thoughts, actions with the tool call as written, observations with the tool's answer, and a final answer, told apart by the mark's fill and outline. A Toggle Group in the header shows all steps, only the reasoning, or only the tool calls. A native range, Replay to step, mutes every step after it and marks it "Not run", while two meters above the log count the time and the tokens spent so far against the whole run. A ghost copy of the full log holds the height, so no filter or replay moves the page. Guides draw the frame and its bands; the entrance is CSS only. For teams that debug agents, review tool use and need a readable record of why a run did what it did.
FAQ
How do I use my own run?
Edit STEPS: each step has a number, a kind (thought, action, observation or final), the text, the milliseconds and tokens it took and, on an action, the call as written. The header totals, the meters and the replay all derive from those numbers. Add or remove steps and the range, the counts and the ghost list follow; the range's maximum is the number of steps.
What does replay do?
It treats the run as it was after step N. Steps up to N read normally and their time is counted in the meters; later steps stay in place, muted, with their time replaced by "Not run" and a hidden note, so the log never changes length. Arrow keys on the range move one step. A polite status line reads the position, the time, the tokens and the filter about 600 ms after your last change.
Does the filter change the step numbers?
No. Reasoning keeps the thoughts and the final answer, Tool calls keeps the actions and observations, and each step keeps its own number so you can tell what was left out. The count beside the heading says how many are shown. Replay and the filter combine.
What is real here and what is typed?
All of it is typed: the run, its times and its tokens are examples. No agent ran and no tool was called; the tool calls are text. In your app feed the same shape from your agent framework's run record, one object per step.