● HOW IT WORKS
Architecture.
One rule: agents emit events, the world is a reducer over events, the office is just a view. The demo runs everything in the browser; production swaps the fake brains for real agent sessions without touching the renderer.
1 · Demo (what you're watching)
Goal inputuser / API
→
Orchestratororchestrator.js
goal → task DAG, assign by role, deps, handoffs
→
Agentsagents.js
state machine: idle · walk · meet · work
→
Message busbus.js
publish / subscribe
→
Viewsrender.js (canvas) · feed.js (bus console: filters, status, export) · collab.js (@mention replies)
map.jsPixel Societies office art on the 32×24 grid · walkability mask derived from the art (tools/derive-mask.py) · BFS pathfinding
Game looprequestAnimationFrame · fixed sim clock · pause / 1-2-4× speed
2 · Production (real agents)
Agent runtimesClaude Code · Codex · custom LLM agents · MCP tools
→
Adaptershooks / SDK callbacks → normalized events
→
Event busRedis pub/sub · Durable Objects · Supabase Realtime
→
World reducerevent → position, status, bubble, task progress
→
ClientsWebSocket → same canvas renderer, multiplayer
CoordinatorLLM planner writes the DAG; agents claim tasks by capability (concord-style)
StorePostgres: events (append-only), agents, tasks → replay any session
Event schema
{
"id": 1042,
"at": "2026-10-07T19:58:20Z",
"from": "Bolt",
"to": "Dex", // optional
"kind": "handoff", // chat|plan|assign|tool|handoff|done|system
"text": "Build prototype ready for review",
"task": "build" // optional
}
Event → what you see
assign | agent walks to their desk, monitor lights up |
tool | speech bubble with the tool call, progress bar ticks |
handoff | agent walks over to the next owner |
done | stage task-board tile turns green |
plan | everyone gathers in front of the stage |
system: shipped | fireworks + party in front of the stage |
60-second demo script
- Idle society. Agents roam, grab coffee, chat. Every chat is a bus event (right panel).
- Type a goal → Run. Ada (orchestrator) takes the stage; everyone gathers at the audience seats.
- Plan. Goal splits into a 6-task DAG. Task board on the stage = task status.
- Parallel work. Research + spec start immediately; build waits on both. Bubbles show tool calls.
- Handoffs. Finishing an upstream task walks the agent to the downstream owner.
- Ship. Review → deploy → fireworks. Hit 4× to speed it up. Click any agent to inspect memory.
PIXEL SOCIETIES