Office Visualizer

Last updated: April 11, 2026

Assistant Office Visualizer

The Office Visualizer provides a real-time, 2D grid-based representation of the Business Hive, bridging the gap between Go backend logic and a dynamic JavaScript frontend.

The Virtual Office Architecture

The visualizer simulates a physical space where agents (represented as sprites) move and perform tasks.

1. Backend State (office.go)

The Go backend maintains the source of truth for the virtual space:

  • Grid (20x15): Coordinates for functional rooms (Lobby, Workspace, CEO Suite).
  • Agent Registry: A map of active OfficeAgent structs, tracking their current X,Y position, target destination, and state.
  • Game Loop: A 500ms ticker that updates agent positions using a Breadth-First Search (BFS) pathfinding algorithm.

2. State Synchronization

Events are broadcast from Go to the frontend via WebSockets:

  • spawn: A new agent enters the lobby.
  • move: The agent steps to a new grid cell.
  • thought: A visual "thinking" indicator (bubble) appears over the sprite.
  • tool: A "tool" indicator (wrench) appears during execution.

Frontend Rendering (mission_control.js)

The JavaScript frontend in Mission Control (port :9999) consumes the WebSocket stream and renders the office:

  • Sprite Mapping: Maps the agent's role (CEO, Team Leader, Worker) to specific CSS classes or image assets.
  • Interpolation: Smoothly animates the transition between grid cells to prevent "teleporting" visuals.
  • Context Tooltips: Hovering over an agent displays their current task objective and recent "thought" content.

Visual Configuration (office_layout.md)

The physical layout of the office is defined by coordinates referenced in office_layout.md:

  • Lobby: (0,7) to (3,10)
  • Main Workspace: (5,2) to (15,13)
  • Executive Suite: (16,5) to (19,10)

Mermaid Diagram: Visualizer Sync Flow

graph TD
    BH[Business Hive Task] --> O[office.go]
    O --> BFS[Pathfinding Engine]
    O --> WS[WebSocket Hub]
    WS -- JSON Event --> MC[mission_control.js]
    MC --> DOM[Update HTML Grid/Sprites]
    
    subgraph "Visual States"
        DOM --> T[Thought Bubble]
        DOM --> W[Tool Icon]
        DOM --> M[Walk Animation]
    end

Guidance for AI Agents

  • Real-time Monitoring: Be aware that your task execution is visible to the user. This visual feedback confirms the system's "liveness."
  • Department Grouping: Agents in the same company or department will naturally cluster in the "Workspace" room, allowing users to see team collaboration at a glance.

Cross-References