conectese 0.1.14

package/dashboard/src/hooks/useSquadSocket.ts

@@ -0,0 +1,135 @@
+import { useEffect, useRef } from "react";
+import { useSquadStore } from "@/store/useSquadStore";
+import type { WsMessage } from "@/types/state";
+
+const RECONNECT_BASE_MS = 1000;
+const RECONNECT_MAX_MS = 30000;
+const WS_FAIL_THRESHOLD = 3;
+const POLL_INTERVAL_MS = 3000;
+
+export function useSquadSocket() {
+  const wsRef = useRef<WebSocket | null>(null);
+  const pollTimerRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+  const setConnected = useSquadStore((s) => s.setConnected);
+  const setSnapshot = useSquadStore((s) => s.setSnapshot);
+  const updateSquadState = useSquadStore((s) => s.updateSquadState);
+  const setSquadInactive = useSquadStore((s) => s.setSquadInactive);
+
+  useEffect(() => {
+    let disposed = false;
+    let reconnectTimer: ReturnType<typeof setTimeout> | undefined;
+    let reconnectDelay = RECONNECT_BASE_MS;
+    let wsFailCount = 0;
+
+    function dispatch(msg: WsMessage) {
+      if (disposed) return;
+      switch (msg.type) {
+        case "SNAPSHOT":
+          setSnapshot(msg.squads, msg.activeStates);
+          break;
+        case "SQUAD_UPDATE":
+          updateSquadState(msg.squad, msg.state);
+          break;
+        case "SQUAD_INACTIVE":
+          setSquadInactive(msg.squad);
+          break;
+      }
+    }
+
+    // ── HTTP polling fallback ───────────────────────────────────────────
+
+    function stopPolling() {
+      if (pollTimerRef.current) {
+        clearInterval(pollTimerRef.current);
+        pollTimerRef.current = null;
+      }
+    }
+
+    function startPolling() {
+      stopPolling();
+
+      const poll = async () => {
+        if (disposed) return;
+        try {
+          const res = await fetch("/api/snapshot", { cache: "no-store" });
+          if (!res.ok || disposed) return;
+          const msg: WsMessage = await res.json();
+          dispatch(msg);
+          setConnected(true);
+        } catch {
+          // Endpoint not available — will retry on next interval
+        }
+      };
+
+      poll();
+      pollTimerRef.current = setInterval(poll, POLL_INTERVAL_MS);
+    }
+
+    // ── WebSocket connection ────────────────────────────────────────────
+
+    function connect() {
+      if (disposed) return;
+
+      if (reconnectTimer !== undefined) {
+        clearTimeout(reconnectTimer);
+        reconnectTimer = undefined;
+      }
+
+      const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
+      const ws = new WebSocket(
+        `${protocol}//${window.location.host}/__squads_ws`,
+      );
+      wsRef.current = ws;
+
+      ws.onopen = () => {
+        if (disposed) { ws.close(); return; }
+        setConnected(true);
+        reconnectDelay = RECONNECT_BASE_MS;
+        wsFailCount = 0;
+        stopPolling();
+      };
+
+      ws.onmessage = (event) => {
+        if (disposed) return;
+        try {
+          const msg: WsMessage = JSON.parse(event.data);
+          dispatch(msg);
+        } catch {
+          // Ignore malformed messages
+        }
+      };
+
+      ws.onclose = () => {
+        if (disposed) return;
+
+        setConnected(false);
+        wsFailCount++;
+
+        if (wsFailCount >= WS_FAIL_THRESHOLD) {
+          startPolling();
+        }
+
+        reconnectTimer = setTimeout(() => {
+          reconnectDelay = Math.min(reconnectDelay * 2, RECONNECT_MAX_MS);
+          connect();
+        }, reconnectDelay);
+      };
+
+      ws.onerror = () => {
+        // onerror is always followed by onclose — just let onclose handle it.
+        // Don't call ws.close() here to avoid "closed before established" in StrictMode.
+      };
+    }
+
+    connect();
+
+    return () => {
+      disposed = true;
+      if (reconnectTimer !== undefined) clearTimeout(reconnectTimer);
+      stopPolling();
+      wsRef.current?.close();
+      wsRef.current = null;
+    };
+  }, [setConnected, setSnapshot, updateSquadState, setSquadInactive]);
+}

package/dashboard/src/lib/formatTime.ts

@@ -0,0 +1,16 @@
+/**
+ * Formats elapsed milliseconds as "MM:SS" or "HH:MM:SS" if over an hour.
+ */
+export function formatElapsed(ms: number): string {
+  const totalSeconds = Math.floor(ms / 1000);
+  const hours = Math.floor(totalSeconds / 3600);
+  const minutes = Math.floor((totalSeconds % 3600) / 60);
+  const seconds = totalSeconds % 60;
+
+  const pad = (n: number) => n.toString().padStart(2, "0");
+
+  if (hours > 0) {
+    return `${pad(hours)}:${pad(minutes)}:${pad(seconds)}`;
+  }
+  return `${pad(minutes)}:${pad(seconds)}`;
+}

package/dashboard/src/lib/normalizeState.ts

@@ -0,0 +1,25 @@
+import type { SquadState, Agent } from "@/types/state";
+
+/**
+ * Returns agents sorted by desk position (row first, then col).
+ */
+export function sortAgentsByDesk(agents: Agent[]): Agent[] {
+  return [...agents].sort((a, b) => {
+    if (a.desk.row !== b.desk.row) return a.desk.row - b.desk.row;
+    return a.desk.col - b.desk.col;
+  });
+}
+
+/**
+ * Find agent by id.
+ */
+export function findAgent(state: SquadState, agentId: string): Agent | undefined {
+  return state.agents.find((a) => a.id === agentId);
+}
+
+/**
+ * Returns the currently working agent, if any.
+ */
+export function getWorkingAgent(state: SquadState): Agent | undefined {
+  return state.agents.find((a) => a.status === "working");
+}

package/dashboard/src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { App } from "./App";
+import "./styles/globals.css";
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+);

package/dashboard/src/office/AgentSprite.ts

@@ -0,0 +1,241 @@
+import Phaser from 'phaser';
+import { avatarKeys, DESK_KEYS, FURNITURE_KEYS, type CharacterName } from './assetKeys';
+import { COLORS } from './palette';
+import type { Agent, AgentStatus } from '@/types/state';
+
+// Avatar display scale — characters should be prominent at desk
+const AVATAR_SCALE = 0.8;
+
+// Status → badge color mapping
+const STATUS_COLORS: Record<AgentStatus, number> = {
+  idle: COLORS.statusIdle,
+  working: COLORS.statusWorking,
+  done: COLORS.statusDone,
+  checkpoint: COLORS.statusCheckpoint,
+  delivering: COLORS.statusWorking,
+};
+
+// Status → display label
+const STATUS_LABELS: Record<AgentStatus, string> = {
+  idle: 'idle',
+  working: 'working',
+  done: 'done',
+  checkpoint: 'checkpoint',
+  delivering: 'delivering',
+};
+
+export class AgentSprite {
+  private scene: Phaser.Scene;
+  private deskTable: Phaser.GameObjects.Image;
+  private deskShadow: Phaser.GameObjects.Graphics;
+  private desk: Phaser.GameObjects.Image;
+  private coffeeMug: Phaser.GameObjects.Image;
+  private avatar: Phaser.GameObjects.Image;
+  private nameText: Phaser.GameObjects.Text;
+  private badgeBg: Phaser.GameObjects.Graphics;
+  private statusDot: Phaser.GameObjects.Graphics;
+  private statusText: Phaser.GameObjects.Text;
+  private animTimer?: Phaser.Time.TimerEvent;
+  private agent: Agent;
+  private characterName: CharacterName;
+  private deskVariant: 'black' | 'white';
+  private avatarDisplayH: number = 0;
+
+  constructor(
+    scene: Phaser.Scene,
+    x: number,
+    y: number,
+    characterName: CharacterName,
+    deskVariant: 'black' | 'white',
+    agent: Agent,
+  ) {
+    this.scene = scene;
+    this.agent = agent;
+    this.characterName = characterName;
+    this.deskVariant = deskVariant;
+
+    // === VERTICAL LAYOUT (sprites, top to bottom on screen) ===
+    // desk_wood: 96x64 @ 1.3x = 125x83px  → y-42 to y+42
+    // desktop_set: ~48x40 @ 1.3x = 62x52px → y-56 to y-4  (center at y-30)
+    // avatar: 48x51 @ 0.8x = 38x41px        → y-91 to y-50 (center at y-70)
+    //
+    // Depth order (low = behind, high = front):
+    //   avatar     → y        (seated character, lowest — desk will cover lower body)
+    //   desk_wood  → y+1      (desk surface IN FRONT of avatar → covers avatar's lower half)
+    //   monitor    → y+2      (on desk surface, screen faces viewer)
+    //   coffee mug → y+3      (foreground item on front desk edge)
+    //   label      → 900/901  (always on top)
+    //
+    // Result: avatar fully visible above monitor, lower body hidden by desk → seated look
+    // =========================================
+
+    // Avatar — positioned further behind the desk so head/torso is clearly visible
+    const avatarKey = this.getAvatarKey(agent.status);
+    this.avatar = scene.add.image(x, y - 70, avatarKey)
+      .setOrigin(0.5, 0.5)
+      .setScale(AVATAR_SCALE)
+      .setDepth(y);  // LOWEST depth — desk and monitor render in front
+    // Lock display height so texture swaps between frames of different pixel dimensions
+    // don't cause a visible scale jump (e.g. Male1 blink=56px tall vs talk=51px tall).
+    // Width is NOT locked — each frame scales proportionally from this height reference.
+    this.avatarDisplayH = this.avatar.displayHeight;
+
+    // Desk table surface — renders IN FRONT of avatar (covers lower body)
+    this.deskTable = scene.add.image(x, y, FURNITURE_KEYS.deskWood)
+      .setOrigin(0.5, 0.5)
+      .setScale(1.3)
+      .setDepth(y + 1);
+
+    // Monitor — screen-facing (_down orientation), sits on desk surface
+    const deskKey = this.getDeskKey(agent.status);
+    this.desk = scene.add.image(x, y - 30, deskKey)
+      .setOrigin(0.5, 0.5)
+      .setScale(1.3)
+      .setDepth(y + 2);  // On top of desk surface, screen visible to viewer
+
+    // Coffee mug — right side of desk, away from monitor
+    this.coffeeMug = scene.add.image(x + 42, y + 8, 'furniture_coffee_mug')
+      .setOrigin(0.5, 1).setScale(1.4).setDepth(y + 3);
+
+    // Shadow (unused graphics object kept for destroy() compatibility)
+    this.deskShadow = scene.add.graphics();
+    this.deskShadow.setDepth(y - 1);
+
+    // Name badge — above avatar head (avatar center y-70, head top ≈ y-91, badge at y-140)
+    // badge height = 44px → badge bottom at y-96, leaving 5px gap above avatar top
+    const labelY = y - 140;
+
+    // Background pill behind name + status
+    this.badgeBg = scene.add.graphics();
+
+    // Name text — bold, clean, high contrast
+    this.nameText = scene.add.text(x, labelY + 5, agent.name, {
+      fontFamily: '"Segoe UI", "Helvetica Neue", Arial, sans-serif',
+      fontSize: '16px',
+      fontStyle: 'bold',
+      color: '#ffffff',
+      align: 'center',
+      stroke: '#000000',
+      strokeThickness: 4,
+      resolution: 2,
+    }).setOrigin(0.5, 0);
+    this.nameText.setDepth(901);
+
+    // Status dot
+    this.statusDot = scene.add.graphics();
+
+    // Status text — colored with outline
+    const statusColor = this.getStatusHexColor(agent.status);
+    this.statusText = scene.add.text(x, labelY + 24, STATUS_LABELS[agent.status], {
+      fontFamily: '"Segoe UI", "Helvetica Neue", Arial, sans-serif',
+      fontSize: '13px',
+      fontStyle: 'bold',
+      color: statusColor,
+      align: 'center',
+      stroke: '#000000',
+      strokeThickness: 3,
+      resolution: 2,
+    }).setOrigin(0.5, 0);
+    this.statusText.setDepth(901);
+
+    // Draw background and status dot
+    this.drawLabelBackground(x, labelY);
+    this.drawStatusDot(x, labelY + 22, agent.status);
+
+    this.startAnimation(agent.status);
+  }
+
+  private getStatusHexColor(status: AgentStatus): string {
+    const num = STATUS_COLORS[status] ?? COLORS.statusIdle;
+    return '#' + num.toString(16).padStart(6, '0');
+  }
+
+  private getDeskKey(_status: AgentStatus): string {
+    // Always show coding desk — all agents are always working
+    return this.deskVariant === 'black' ? DESK_KEYS.blackCoding : DESK_KEYS.whiteCoding;
+  }
+
+  private getAvatarKey(_status: AgentStatus): string {
+    // Always start in talk frame — animation will cycle from there
+    return avatarKeys(this.characterName).talk;
+  }
+
+  private drawLabelBackground(x: number, labelY: number): void {
+    const nameW = Math.max(this.nameText.width, this.statusText.width + 18);
+    const bgW = nameW + 20;
+    const bgH = 44;
+    // Solid dark background with rounded corners
+    this.badgeBg.fillStyle(0x1a1225, 0.95);
+    this.badgeBg.fillRoundedRect(x - bgW / 2, labelY, bgW, bgH, 5);
+    // Subtle border
+    this.badgeBg.lineStyle(1, 0x6a5a80, 0.4);
+    this.badgeBg.strokeRoundedRect(x - bgW / 2, labelY, bgW, bgH, 4);
+    this.badgeBg.setDepth(900);
+  }
+
+  private drawStatusDot(x: number, _statusY: number, status: AgentStatus): void {
+    const dotColor = STATUS_COLORS[status] ?? COLORS.statusIdle;
+    const textW = Math.max(this.statusText.width, 24);
+    this.statusDot.fillStyle(dotColor, 1);
+    this.statusDot.fillCircle(x - textW / 2 - 5, this.statusText.y + this.statusText.height / 2, 3);
+    this.statusDot.setDepth(901);
+  }
+
+  private setAvatarFrame(key: string): void {
+    this.avatar.setTexture(key);
+    // Scale uniformly so height matches the reference (talk frame) — preserves aspect ratio
+    this.avatar.setScale(this.avatarDisplayH / this.avatar.height);
+  }
+
+  private startAnimation(_status: AgentStatus): void {
+    // Always run the working animation regardless of status
+    const keys = avatarKeys(this.characterName);
+    let frame = 0;
+    this.animTimer = this.scene.time.addEvent({
+      delay: 500,
+      loop: true,
+      callback: () => {
+        frame = (frame + 1) % 2;
+        this.setAvatarFrame(frame === 0 ? keys.talk : keys.blink);
+      },
+    });
+  }
+
+  updateStatus(agent: Agent): void {
+    if (this.agent.status === agent.status) return;
+    this.agent = agent;
+
+    this.desk.setTexture(this.getDeskKey(agent.status));
+    this.setAvatarFrame(this.getAvatarKey(agent.status));
+
+    this.animTimer?.destroy();
+    this.startAnimation(agent.status);
+
+    // Update status text and dot
+    this.statusText.setText(STATUS_LABELS[agent.status]);
+    this.statusText.setColor(this.getStatusHexColor(agent.status));
+
+    this.statusDot.clear();
+    const dotColor = STATUS_COLORS[agent.status] ?? COLORS.statusIdle;
+    this.statusDot.fillStyle(dotColor, 1);
+    const textW = Math.max(this.statusText.width, 24);
+    this.statusDot.fillCircle(
+      this.statusText.x - textW / 2 - 5,
+      this.statusText.y + this.statusText.height / 2,
+      3,
+    );
+  }
+
+  destroy(): void {
+    this.animTimer?.destroy();
+    this.deskTable.destroy();
+    this.deskShadow.destroy();
+    this.desk.destroy();
+    this.coffeeMug.destroy();
+    this.avatar.destroy();
+    this.nameText.destroy();
+    this.badgeBg.destroy();
+    this.statusDot.destroy();
+    this.statusText.destroy();
+  }
+}

package/dashboard/src/office/OfficeScene.ts

@@ -0,0 +1,153 @@
+import Phaser from 'phaser';
+import {
+  CHARACTER_NAMES, MALE_CHARACTERS, FEMALE_CHARACTERS, avatarKeys, avatarPath,
+  DESK_PATHS,
+  FURNITURE_PATHS,
+  type CharacterName,
+} from './assetKeys';
+import { CELL_W, CELL_H, MARGIN, WALL_H } from './palette';
+import { RoomBuilder } from './RoomBuilder';
+import { AgentSprite } from './AgentSprite';
+import type { SquadState, Agent } from '@/types/state';
+
+function assignCharacters(agents: Agent[]): Map<string, CharacterName> {
+  const assignments = new Map<string, CharacterName>();
+  let maleIndex = 0;
+  let femaleIndex = 0;
+
+  for (const agent of agents) {
+    if (agent.gender === 'male') {
+      assignments.set(agent.id, MALE_CHARACTERS[maleIndex % MALE_CHARACTERS.length]);
+      maleIndex++;
+    } else {
+      assignments.set(agent.id, FEMALE_CHARACTERS[femaleIndex % FEMALE_CHARACTERS.length]);
+      femaleIndex++;
+    }
+  }
+
+  return assignments;
+}
+
+const DEMO_AGENTS: Agent[] = [
+  { id: '1', name: 'Researcher', icon: '', status: 'working', gender: 'female', desk: { col: 1, row: 1 } },
+  { id: '2', name: 'Writer', icon: '', status: 'idle', gender: 'male', desk: { col: 2, row: 1 } },
+  { id: '3', name: 'Editor', icon: '', status: 'done', gender: 'female', desk: { col: 3, row: 1 } },
+  { id: '4', name: 'Designer', icon: '', status: 'working', gender: 'female', desk: { col: 1, row: 2 } },
+  { id: '5', name: 'Reviewer', icon: '', status: 'checkpoint', gender: 'male', desk: { col: 2, row: 2 } },
+  { id: '6', name: 'Publisher', icon: '', status: 'idle', gender: 'male', desk: { col: 3, row: 2 } },
+];
+
+export class OfficeScene extends Phaser.Scene {
+  private agentSprites: Map<string, AgentSprite> = new Map();
+  private roomBuilder!: RoomBuilder;
+
+  constructor() {
+    super({ key: 'OfficeScene' });
+  }
+
+  preload(): void {
+    // Load desk sprites
+    for (const [key, path] of Object.entries(DESK_PATHS)) {
+      this.load.image(key, path);
+    }
+
+    // Load avatar sprites
+    for (const name of CHARACTER_NAMES) {
+      const keys = avatarKeys(name);
+      this.load.image(keys.blink, avatarPath(name, 'blink'));
+      this.load.image(keys.talk, avatarPath(name, 'talk'));
+      this.load.image(keys.wave1, avatarPath(name, 'wave1'));
+      this.load.image(keys.wave2, avatarPath(name, 'wave2'));
+    }
+
+    // Load furniture sprites
+    for (const [key, path] of Object.entries(FURNITURE_PATHS)) {
+      this.load.image(key, path);
+    }
+
+    this.load.on('loaderror', (file: Phaser.Loader.File) => {
+      console.error('Failed to load asset:', file.key, file.url);
+    });
+  }
+
+  create(): void {
+    // Set all loaded textures to NEAREST filter for crisp pixel art
+    this.textures.list && Object.values(this.textures.list).forEach((tex) => {
+      if (tex.key !== '__DEFAULT' && tex.key !== '__MISSING') {
+        tex.setFilter(Phaser.Textures.FilterMode.NEAREST);
+      }
+    });
+
+    this.roomBuilder = new RoomBuilder(this);
+
+    this.events.on('stateUpdate', (state: SquadState | null) => {
+      this.onStateUpdate(state);
+    });
+
+    this.renderScene(DEMO_AGENTS);
+  }
+
+  private onStateUpdate(state: SquadState | null): void {
+    const agents = state?.agents ?? DEMO_AGENTS;
+    this.renderScene(agents);
+  }
+
+  private renderScene(agents: Agent[]): void {
+    // Auto-assign desk positions if all agents are at the same spot (default 1,1)
+    const allSameDesk = agents.length > 1 &&
+      agents.every(a => a.desk.col === agents[0].desk.col && a.desk.row === agents[0].desk.row);
+    if (allSameDesk) {
+      const cols = Math.min(agents.length, 3); // max 3 columns
+      agents = agents.map((a, i) => ({
+        ...a,
+        desk: { col: (i % cols) + 1, row: Math.floor(i / cols) + 1 },
+      }));
+    }
+
+    let maxCol = 0, maxRow = 0;
+    for (const agent of agents) {
+      maxCol = Math.max(maxCol, agent.desk.col);
+      maxRow = Math.max(maxRow, agent.desk.row);
+    }
+
+    // Wider cells for comfortable spacing between agents + labels
+    const cellW = CELL_W + 64;   // 160px per cell (wider for desk tables + decorations)
+    const cellH = CELL_H + 80;   // 176px per cell (label + monitor + desk + avatar)
+
+    const roomW = Math.max(maxCol * cellW + MARGIN * 2, 580);
+    // Extra space below desk grid for lounge area
+    const loungeSpace = CELL_H + 48;
+    const roomH = maxRow * cellH + MARGIN * 2 + WALL_H + loungeSpace;
+
+    this.clearScene();
+    this.roomBuilder.build(roomW, roomH);
+
+    const characterMap = assignCharacters(agents);
+
+    for (let i = 0; i < agents.length; i++) {
+      const agent = agents[i];
+      const x = (agent.desk.col - 1) * cellW + MARGIN + cellW / 2;
+      const y = (agent.desk.row - 1) * cellH + MARGIN + WALL_H + cellH / 2;
+      const characterName = characterMap.get(agent.id)!;
+      const deskVariant = i % 2 === 0 ? 'black' : 'white';
+      const agentSprite = new AgentSprite(this, x, y, characterName, deskVariant, agent);
+      this.agentSprites.set(agent.id, agentSprite);
+    }
+
+    // Fit room in viewport with slight padding
+    const cam = this.cameras.main;
+    const scaleX = cam.width / (roomW + 32);
+    const scaleY = cam.height / (roomH + 32);
+    const zoom = Math.min(scaleX, scaleY, 2);
+    cam.setZoom(zoom);
+    cam.centerOn(roomW / 2, roomH / 2);
+  }
+
+  private clearScene(): void {
+    for (const sprite of this.agentSprites.values()) {
+      sprite.destroy();
+    }
+    this.agentSprites.clear();
+    this.children.removeAll(true);
+  }
+}

package/dashboard/src/office/PhaserGame.tsx

@@ -0,0 +1,80 @@
+import { useEffect, useRef } from 'react';
+import Phaser from 'phaser';
+import { OfficeScene } from './OfficeScene';
+import { useSquadStore } from '@/store/useSquadStore';
+
+export function PhaserGame() {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const gameRef = useRef<Phaser.Game | null>(null);
+
+  // Create Phaser game on mount
+  useEffect(() => {
+    if (!containerRef.current || gameRef.current) return;
+
+    const container = containerRef.current;
+    const w = container.clientWidth || 800;
+    const h = container.clientHeight || 600;
+
+    const game = new Phaser.Game({
+      type: Phaser.AUTO,
+      parent: container,
+      width: w,
+      height: h,
+      pixelArt: false,          // disabled globally so text renders smooth
+      antialias: false,          // keep pixel art look for sprites
+      roundPixels: true,         // snap sprites to whole pixels
+      backgroundColor: '#1a1420',
+      scene: [OfficeScene],
+      scale: {
+        mode: Phaser.Scale.NONE,
+      },
+    });
+
+    gameRef.current = game;
+
+    // Resize canvas when container resizes
+    const ro = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const { width, height } = entry.contentRect;
+        if (width > 0 && height > 0) {
+          game.scale.resize(width, height);
+        }
+      }
+    });
+    ro.observe(container);
+
+    return () => {
+      ro.disconnect();
+      game.destroy(true);
+      gameRef.current = null;
+    };
+  }, []);
+
+  // Bridge React state → Phaser scene
+  useEffect(() => {
+    return useSquadStore.subscribe((state) => {
+      const game = gameRef.current;
+      if (!game) return;
+      const scene = game.scene.getScene('OfficeScene') as OfficeScene | null;
+      if (!scene || !scene.scene.isActive()) return;
+
+      const selectedSquad = state.selectedSquad;
+      const squadState = selectedSquad
+        ? state.activeStates.get(selectedSquad) ?? null
+        : null;
+
+      scene.events.emit('stateUpdate', squadState);
+    });
+  }, []);
+
+  return (
+    <div
+      ref={containerRef}
+      style={{
+        flex: 1,
+        overflow: 'hidden',
+        imageRendering: 'auto',
+      }}
+    />
+  );
+}