DEV Community

babycat
babycat

Posted on

A 3D Agent Replay Still Needs an Accessible Event List

Mindwalk, a project for replaying coding-agent sessions on a 3D map of a codebase, appeared in the Hacker News top-story feed during my 2026-07-12 08:00 UTC snapshot. Spatial replay is an interesting way to expose where an agent traveled.

But 3D position cannot be the only carrier of meaning. Motion, color, distance, and camera angle may be unavailable to keyboard, screen-reader, low-vision, or motion-sensitive users. The fix is not to remove the visualization. Give it a synchronized semantic twin.

Model events once

type AgentEvent = {
  id: string;
  timestamp: string;
  kind: "read" | "edit" | "command" | "test" | "error";
  path?: string;
  summary: string;
  status: "running" | "passed" | "failed";
};
Enter fullscreen mode Exit fullscreen mode

Render both the 3D scene and the accessible list from that array. Selecting either representation updates one shared selectedEventId.

A semantic companion view

<section aria-labelledby="replay-heading">
  <h2 id="replay-heading">Agent replay</h2>
  <p id="replay-help">
    Use the event list to inspect the same actions shown in the code map.
  </p>

  <div id="map" role="img"
       aria-label="3D code map; details are available in the event list"></div>

  <ol id="events" aria-describedby="replay-help">
    <li>
      <button type="button" aria-current="step">
        <time datetime="2026-07-12T07:41:02Z">07:41:02</time>
        Read <code>src/auth.ts</code> โ€” passed
      </button>
    </li>
  </ol>
</section>
Enter fullscreen mode Exit fullscreen mode

The list should support normal browser find, copyable file paths, visible focus, and deep links such as ?event=e-42. When selection changes, move visual emphasis but do not steal keyboard focus. Announce only important state changes in a restrained aria-live="polite" status region.

Motion and color rules

  • Respect prefers-reduced-motion by replacing camera flights with an immediate selection change.
  • Never encode event kind or failure only by color; include text and an icon with an accessible name.
  • Pause automatic playback when the user interacts with controls.
  • Provide playback speed and a โ€œshow failures onlyโ€ filter.
  • Keep the event list usable if WebGL fails or is disabled.

A compact QA matrix

Scenario Expected behavior
keyboard only every event and control is reachable in a logical order
screen reader time, action, path, summary, and status are announced
reduced motion no forced camera travel or pulsing
200% zoom controls reflow without covering the timeline
WebGL failure complete event evidence remains available

Applying the pattern to MonkeyCode

The public MonkeyCode repository shows an AI task workspace and cloud task execution interface. A replay or audit view would be relevant to that product category, but the component above is a proposed independent pattern. It does not claim that MonkeyCode currently provides a 3D replay or this exact timeline.

Disclosure: I contribute to the MonkeyCode project. Product observations are limited to the linked public repository and screenshots.

Frontend developers can discuss task-interface accessibility in the MonkeyCode Discord. Readers evaluating the hosted service can also ask about current free model-credit availability, eligibility, and limits.

A visualization may be the memorable view. The semantic event list is what makes its evidence durable.

Top comments (0)