Agent runPro
An AI coding agent's run: steps stream in with search results, code and a diff.
What's inside
- Streaming steps with timers
- Search results, code and diff
- Pause, resume and replay
When to use
- Showing what an agent or background job is doing step by step.
When not to use
- A plain chat: use the AI chat block.
Installation
Usage
Import it from @/components/blocks/agent-run after installing. It ships with sample data, so it renders straight away; swap in your own data when you're ready.
example.tsx
import { AgentRun } from "@/components/blocks/agent-run";
export default function Page() {
return (
<main className="mx-auto max-w-6xl p-6">
<AgentRun />
</main>
);
}API reference
AgentRun
An AI coding agent's run: steps stream in with timers, each expandable to show search results, code and a diff, with pause, resume and replay. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.
No props.
Keyboard interactions
| Keys | Action |
|---|---|
| Tab | Move between steps and controls |
| EnterorSpace | Expand a step or pause and resume |
Accessibility
- Steps are buttons with aria-expanded.
- Status is text (Running, Done), not only icons.
Motion
- Steps enter one by one; the running step shows a live timer.
Responsive behavior
- Code and diffs scroll horizontally on phones.
Performance
- One timeout schedules the next step and one interval the timer; both stop when paused or unmounted.
Notes for AI
- Feed real events into the steps array from your agent's stream.
This page as Markdown, for assistants and coding agents:
/blocks/agent-run/markdownThe full library index for assistants is at /llms.txt.
Lode222 doc pagesllms.txt