Agent Cursor

`<pura-agent-cursor>` replays a sequence of pointer actions over its slotted content from a portable JSON trace, so an agent can *show* what it did (or will do) instead of only describing it. The ghost cursor tweens between points by timestamp, pulses a ring on `click` steps, and surfaces a per-step `label` tooltip plus a screen-reader announcement. Feed it a trace via the `.trace` property, an inline `<script type="application/json">` child, or a `trace` URL attribute. Control it with `play()`, `pause()`, `restart()`, `seek(ms)`, `autoplay`, `loop`, and `speed`; listen for `cursorstep` `{ index, action, target, label, value, t }`, `cursorplay`, `cursorpause`, `cursorend`. Each instance registers in `window.__puraAgentCursors` by `data-pura-id` and mirrors `data-pura-cursor-{playing,step}`. The trace format is `{ version: 1, steps: [{ x, y, t, action, target?, label?, value? }] }` with `x`/`y` in px relative to the element (or a `target` selector to center on), `t` in milliseconds, and `action` one of `move` (default), `click`, `type`, `hover`.

Preview

<pura-agent-cursor trace="/traces/checkout.json" loop></pura-agent-cursor>

<script type="module">
  const c = document.querySelector('pura-agent-cursor');
  c.trace = { version: 1, steps: [
    { x: 20, y: 20, t: 0, label: 'Start' },
    { x: 180, y: 90, t: 1000, action: 'click', target: '#submit', label: 'Submit' },
  ] };
  c.addEventListener('cursorstep', (e) => console.log(e.detail));
  c.play();
</script>

<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/agent-cursor.js"></script>

import "./pura/lib/agent-cursor.js";