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
Install animui once, then import any component or block from its typed package entry.
React 19 and React DOM 19 are required. The package includes Free and Pro entries, styles and TypeScript declarations.
npm install https://animui.stracture.net/__local/package.tgzLoad the stylesheet once at your app root, then use the typed component import:
import 'animui/styles.css';
import { AgentRun } from 'animui/agent-run';Read the Code tab for the implementation files and the API reference below for required props.
Download animui 0.3.0 · Agent guideUsage
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 "animui/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.
