Agent Run

Live demo

Live, from the library itself, at full size: scroll, hover, navigate away and back. The demo is never gated.

Install Pro

The demo above is never gated; the source is. With a key in components.json (see account), the registry serves it like any other item:

npx shadcn@latest add @moonarc-pro/agent-run

---
import AgentRun from '@/components/moonarc/pro/AgentRun.astro';
---
<AgentRun
  headline="Watch a run from task to merge"
  task="Fix the failing checkout test in apps/web"
  steps={{
    items: ['Read the failing job', 'Find the cause', 'Change the code', 'Run the tests again'],
    calls: [
      { name: 'read_log', args: 'job 4182', took: '0.4 s' },
      { name: 'run_tests', args: 'apps/web', took: '38 s' },
    ],
    diff: {
      path: 'apps/web/src/cart.ts',
      lines: [
        { kind: 'del', text: 'return total * 100;' },
        { kind: 'add', text: 'return Math.round(total * 100);' },
      ],
    },
    review: { who: 'Maya Kim', note: 'Ready to merge. 48 tests pass.' },
  }}
  result={{ title: 'Checkout total rounds to cents', stats: [{ label: 'Tests', value: '48 passed' }, { label: 'Time', value: '2 min 41 s' }] }}
  replay
/>

Without a key the registry answers 401 with an upgrade message. Everything this section composes is free: reveal.

Props

Theming and overrides

The section reads the theme contract (shadcn's variable names with the base tokens as fallback), so a pasted theme or one --ma-brand recolours it. Its class names are the override surface and stay stable; a named slot replaces the matching prop with your own markup.

Why it is built this way

• The end state is the markup: every beat is an animation from a start state back to the element's own style, with fill both, so the played run lands on exactly what the server sent, and no script has to reveal anything.
• One clock for the whole run: every beat reads --ma-agentrun-play for its play state, which is paused until Reveal marks the run in view, running then, and paused again by the Pause control (:has(:checked)) or a pointer over the run. Held, every animation reports paused.
• The schedule is computed on the server from the counts, so three plan items or five, two calls or four, the run takes 8 to 12 s; beat lengths stay the same and only the gaps scale.
• The accent is only on what is live: the top edge of the lane that runs, a spinning call, the approve being pressed, the Running status. Everything done is in the text colour and the success green.
• Machine text is set in the monospace face (tool calls, the path, the diff, times and tokens) and a person's words in the sans. The diff scrolls inside its card when a line is wider than its lane.
• Every beat is interpolated (opacity, translate, clip-path, a stroke), never a stepped change: WebKit applies a stepped keyframe that lands after the first second of the document to computed style but not to layout.

Replaces: Agent plan and tool call demo (Aceternity) · AI workflow animation (Magic UI). See the migration table.

Related