Agent runPro
A live AI agent run: steps stream in, tool calls expand, a diff waits for approval, and it all folds into a result.
- Showing an AI agent working through a task with a human approval step, such as a coding agent.
- Runs where each step should stream into a timeline and a diff waits for approval before writing.
- Use text-stream for plain streamed text.
- Use ai-composer for the prompt input.
- Use timeline for a static list of events.
Installation
Pro source and install commands unlock with a Pro plan.
Usage
Use this to show an AI agent working on a task with approval steps. Replace the scripted run in agent-run-data.ts with events from your agent runtime.
import { AgentRun } from "@/registry/blocks/agent-run/agent-run"; export default function AgentTaskPage() { return ( <main> <AgentRun /> </main> );}AgentRun
A live view of an AI agent working through a task. Steps stream into a timeline and expand in place, a diff waits for approval before any write, and the run folds into a result with a pull request action. Takes no props; the request, steps, timing, approval gate and result are a scripted run in agent-run-data.ts, and opening the pull request is simulated.
No props.
- Each step header is a disclosure button with aria-expanded and aria-controls pointing at a labelled details region.
- A polite live region announces the current step, the approval wait, pauses and the final result.
- After Approve, Reject or Retry, focus moves back to the gated step's header; Restart focuses the pause button.
- The run starts the first time the block scrolls into view, and the clock holds while the tab is hidden.
- Steps stream in with heights that follow content on a smooth spring, and the active step title shimmers.
- Reduced motion makes height and panel changes instant.
- Below a 480px viewport the frame padding and prompt size shrink and hit text hides.
- Step details expand in place with a ResizeObserver tracking their height.
- The run clock uses one setInterval that holds while the tab is hidden.
- Steps are not virtualized; very long runs should collapse finished steps.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Use to show an AI agent working on a task with a human approval step, such as a coding agent or workflow runner.
- Replace STEPS, TIMING, GATE, REQUEST and RESULT in agent-run-data.ts with events streamed from your agent runtime.
- Wire Approve, Reject and Open pull request to real actions; nothing is executed in the preview.
The full library index for assistants is at /llms.txt.
