agentid-agent-house

A 2D pixel-art multi-agent office scene rendered on an HTML Canvas.
Each agent is an animated sprite that walks around a real office background using A* pathfinding, sits at desks, takes breaks, and reacts to live events with speech bubbles. Used on agentid.live.

Features

• A* pathfinding on a 108×100 walkability grid (8px cells)
• Line-of-sight path smoother (Bresenham) for natural movement
• Sprite sheet animation (16 directions × 4 frames each: idle, walk, sit, work, dance, alert)
• Weighted task spots: desks, sofa, kitchen, patio, conference room
• Per-agent speech bubbles that expire automatically
• Live event reactions: task.completed triggers a victory dance, task.failed triggers alert jump
• Accent colour per agent, derived from identity colour palette
• Paint-override tool for walkability grid (persisted to localStorage)
• Up to 8 agents simultaneously, each with unique deterministic spawn zone

Install

No extra dependencies beyond React. The component uses the browser's native Canvas API.

Usage

import { AgentHouse } from "./AgentHouse";

<AgentHouse
  stations={[
    {
      handle: "alice",
      persona: {
        name: "Alice",
        appearance: { color_palette: ["#7c3aed"] },
      },
      recentEvents: [],
    },
    {
      handle: "bob",
      persona: {
        name: "Bob",
        appearance: { color_palette: ["#10b981"] },
      },
    },
  ]}
  lastEvent={null}
  onSelect={(handle) => console.log("selected:", handle)}
/>

You will also need the two asset files placed at the correct public paths:

File	Path
Office background	/office_bg.webp (864×800 px)
Office foreground	/office_fg.webp (864×800 px, furniture in front of agents)
Sprite sheet	One per agent avatar — /avatars/sprite_{0-7}.png (384×576, 48×64 per frame)

Props

interface AgentHouseProps {
  stations: HouseStation[];   // agents to render
  lastEvent: HouseEvent | null; // latest live event (triggers animations)
  onSelect?: (handle: string) => void; // click callback
}

interface HouseStation {
  handle: string;
  persona: {
    name: string | null;
    tone?: string | null;
    appearance?: { color_palette?: string[]; portrait_url?: string; character?: unknown };
  } | null;
  recentEvents?: Array<{ type: string; title: string; timestamp: string }>;
}

Walkability grid

The grid is defined as two arrays of rectangles in the source:

• WALKABLE_RECTS — whitelisted walkable zones (rooms, corridors)
• FURNITURE_RECTS — carved-out furniture within those zones

Edit these to match your own background image.

License

MIT — built by AgentID