Gary Stow has released a guide and starter code for a 'Live Village' dashboard that visualizes AI agent workflows using isometric graphics reminiscent of RimWorld and South Park. Originally published on garystow.co.uk and hosted on DEV.to, the project addresses a common pain point in agent observability: standard data tables are unreadable to non-technical stakeholders. Stow’s solution maps each automation script to a physical structure within a virtual village, allowing users to see agent activity as walking characters and changing landscapes rather than raw logs.

Architecture and Data Flow

The system relies on a three-part decoupled architecture to ensure stability. First, every automation script appends a single JSON line to a shared activity log file, creating an immutable audit trail. A separate Python script, village_data.py, reads the last 48 hours of these logs and generates a static JSON file describing the current state of the village. Finally, a single HTML page with a JavaScript canvas renders this JSON data. This separation ensures that bugs in the visualization layer cannot crash the underlying automation processes.

Visualizing Workflows as Physical Spaces

Stow assigns specific meanings to village components to create an intuitive mental model. The Town Hall represents the supervisor agent, while distinct districts separate website content generation from trading strategy execution. Houses correspond to web pages, with their size and floor count scaling based on page views. Trading strategies are depicted as fields that grow or shrink visually based on real-time profit and loss metrics, clamped between 0.6 and 1.45 scale factors to maintain readability. Individual agents are rendered as small characters that walk between buildings when tasks are assigned or completed.

Implementation and Accessibility

The technical stack is intentionally lightweight, requiring only Python 3, a text editor, and a modern web browser. Stow provides code snippets for drawing isometric tiles and handling the animation loop using requestAnimationFrame for smooth 60fps rendering. For public sharing, a make_public function strips sensitive data, rounding financial figures and anonymizing request details before publishing to GitHub Pages. Stow also emphasizes accessibility, recommending the Atkinson Hyperlegible font and testing on mobile devices to ensure the visual metaphor remains clear across different screen sizes.

Key Takeaways

  • Decouple visualization from execution by using intermediate JSON files to prevent dashboard bugs from breaking automations.
  • Use spatial metaphors (buildings, fields, walking characters) to make abstract agent states tangible for non-technical users.
  • Implement data sanitization functions to safely publish agent activity logs to public repositories like GitHub Pages.
  • Start with minimal viable visuals, such as one building and one walking agent, before expanding to a full village ecosystem.

The Bottom Line

Stow’s approach proves that effective observability doesn't require complex enterprise tools; sometimes, a simple visual metaphor is the best way to bridge the gap between technical execution and human understanding.