bmad-visual 0.1.0

package/templates/dashboard/src/office/RoomBuilder.ts

@@ -0,0 +1,190 @@
+import Phaser from 'phaser';
+import { COLORS, TILE, MARGIN, WALL_H } from './palette';
+import { FURNITURE_KEYS } from './assetKeys';
+
+export class RoomBuilder {
+  private scene: Phaser.Scene;
+
+  constructor(scene: Phaser.Scene) {
+    this.scene = scene;
+  }
+
+  build(roomW: number, roomH: number): void {
+    this.drawFloor(roomW, roomH);
+    this.drawWalls(roomW);
+    this.drawRoomBorder(roomW, roomH);
+    this.placeFurniture(roomW, roomH);
+  }
+
+  private drawFloor(roomW: number, roomH: number): void {
+    const g = this.scene.add.graphics();
+    // Main floor fill
+    g.fillStyle(COLORS.floor, 1);
+    g.fillRect(0, WALL_H, roomW, roomH - WALL_H);
+    // Checkerboard texture
+    g.fillStyle(COLORS.floorAlt, 0.25);
+    for (let y = WALL_H; y < roomH; y += TILE) {
+      for (let x = 0; x < roomW; x += TILE) {
+        if ((x / TILE + y / TILE) % 2 === 0) {
+          g.fillRect(x, y, TILE, TILE);
+        }
+      }
+    }
+    // Shadow along the wall base for depth
+    g.fillStyle(0x000000, 0.1);
+    g.fillRect(0, WALL_H, roomW, 10);
+    g.fillStyle(0x000000, 0.05);
+    g.fillRect(0, WALL_H + 10, roomW, 6);
+    // Subtle shadow along left and right walls
+    g.fillStyle(0x000000, 0.04);
+    g.fillRect(0, WALL_H, 6, roomH - WALL_H);
+    g.fillRect(roomW - 6, WALL_H, 6, roomH - WALL_H);
+    // Subtle warm highlight on bottom edge
+    g.fillStyle(0xddc89e, 0.15);
+    g.fillRect(0, roomH - 4, roomW, 4);
+    g.setDepth(-2);
+  }
+
+  private drawWalls(roomW: number): void {
+    const g = this.scene.add.graphics();
+    // Wall background — slight gradient effect with two tones
+    g.fillStyle(COLORS.wall, 1);
+    g.fillRect(0, 0, roomW, WALL_H);
+    // Lighter upper band for depth
+    g.fillStyle(0xede2d6, 1);
+    g.fillRect(0, 0, roomW, WALL_H / 3);
+    // Baseboard trim
+    g.fillStyle(COLORS.wallTrim, 1);
+    g.fillRect(0, WALL_H - 5, roomW, 5);
+    // Thin highlight line above baseboard
+    g.fillStyle(0xc8b8a8, 1);
+    g.fillRect(0, WALL_H - 6, roomW, 1);
+    g.setDepth(-1);
+  }
+
+  private drawRoomBorder(roomW: number, roomH: number): void {
+    const g = this.scene.add.graphics();
+    const bg = 0x0a0e1a;
+    const pad = 200; // generous padding to cover any viewport overflow
+
+    // Dark overlay strips outside the room on all 4 sides
+    g.fillStyle(bg, 1);
+    g.fillRect(-pad, -pad, roomW + pad * 2, pad);         // top
+    g.fillRect(-pad, roomH, roomW + pad * 2, pad);        // bottom
+    g.fillRect(-pad, -pad, pad, roomH + pad * 2);         // left
+    g.fillRect(roomW, -pad, pad, roomH + pad * 2);        // right
+
+    // Clean 2px border around room edge
+    g.lineStyle(2, 0x1a2540, 0.8);
+    g.strokeRect(0, 0, roomW, roomH);
+    g.setDepth(1000);
+  }
+
+  placeFurniture(roomW: number, roomH: number): void {
+    const s = this.scene;
+    const centerX = roomW / 2;
+    const deskAreaBottom = roomH - MARGIN;
+    const loungeY = deskAreaBottom - TILE * 0.5;
+
+    // ================================================================
+    // WALL DECORATIONS — 5 evenly-spaced sections for breathing room
+    // ================================================================
+    const wallSections = 5;
+    const section = roomW / wallSections;
+
+    // Section 1: Window — far left
+    s.add.image(section * 0.6, WALL_H + 5, FURNITURE_KEYS.blindsLargeWhite)
+      .setOrigin(0.5, 1).setScale(1.8).setDepth(0);
+
+    // Section 2: Bookshelf purple tall — left
+    s.add.image(section * 1.8, WALL_H + 40, FURNITURE_KEYS.bookshelfPurpleTall)
+      .setOrigin(0.5, 1).setScale(2).setDepth(0);
+
+    // Section 4: Whiteboard stand with graph — right of center
+    s.add.image(section * 3.2, WALL_H + 40, FURNITURE_KEYS.whiteboardStandGraph)
+      .setOrigin(0.5, 1).setScale(2.0).setDepth(0);
+
+    // Section 5: Window — far right
+    s.add.image(section * 4.4, WALL_H + 5, FURNITURE_KEYS.blindsLargeWhite)
+      .setOrigin(0.5, 1).setScale(1.8).setDepth(0);
+
+    // ================================================================
+    // CORNER PLANTS — one plant anchored to each room corner
+    // ================================================================
+    // Top-left corner
+    s.add.image(MARGIN / 2 + 8, WALL_H + TILE * 2, FURNITURE_KEYS.monstera)
+      .setOrigin(0.5, 1).setScale(1.3).setDepth(WALL_H + TILE * 2);
+
+    // Top-right corner — water cooler against the right wall
+    s.add.image(roomW - MARGIN / 4, WALL_H + TILE * 2, FURNITURE_KEYS.waterCooler)
+      .setOrigin(0.5, 1).setScale(1.5).setDepth(WALL_H + TILE * 2 + 1);
+
+    // Bottom-left corner
+    s.add.image(MARGIN / 2, roomH - TILE * 0.5, FURNITURE_KEYS.plant3)
+      .setOrigin(0.5, 1).setScale(1.8).setDepth(roomH - TILE * 0.5);
+
+    // Bottom-right corner
+    s.add.image(roomW - MARGIN / 2.5, roomH - TILE * 0.5, FURNITURE_KEYS.plantPoof)
+      .setOrigin(0.5, 1).setScale(1.8).setDepth(roomH - TILE * 0.5);
+
+    // Bottom-right corner — treasure chest
+    s.add.image(roomW - MARGIN / 4, roomH - TILE * 2, FURNITURE_KEYS.treasurechestGold)
+      .setOrigin(0.5, 1).setScale(1.4).setDepth(1);
+
+
+
+      
+    // Middle-left and middle-right (vertical center)
+    const midY = WALL_H + (roomH - WALL_H) / 2;
+    s.add.image(MARGIN / 2, midY, FURNITURE_KEYS.monsteraSmall)
+      .setOrigin(0.5, 1).setScale(1.5).setDepth(midY);
+    s.add.image(roomW - MARGIN / 2, midY, FURNITURE_KEYS.plant1)
+      .setOrigin(0.5, 1).setScale(1.5).setDepth(midY);
+
+    // ================================================================
+    // DESK-AREA ACCENTS — flowers near wall, anchored to desk tops
+    // ================================================================
+
+
+    // ================================================================
+    // LOUNGE ZONE — cozy social area at bottom
+    // ================================================================
+    // Rug — wide rectangular, covers full lounge seating group (448x256 sprite)
+    s.add.image(centerX, loungeY + TILE * 0.9, FURNITURE_KEYS.fancyRugWide)
+      .setOrigin(0.5, 0.5).setScale(0.7).setDepth(-0.5);
+
+    // Couch — centered, bigger
+    const couchY = loungeY + TILE * 0.3;
+    s.add.image(centerX, couchY, FURNITURE_KEYS.couchTanDown)
+      .setOrigin(0.5, 1).setScale(1.8).setDepth(couchY);
+
+    // Cushions — sitting on the couch seat (slightly above couch bottom)
+    s.add.image(centerX - 26, couchY - 28, FURNITURE_KEYS.cushionBlue)
+      .setOrigin(0.5, 0.5).setScale(1.5).setDepth(couchY + 1);
+    s.add.image(centerX + 26, couchY - 28, FURNITURE_KEYS.cushionTan)
+      .setOrigin(0.5, 0.5).setScale(1.5).setDepth(couchY + 1);
+
+    // Armchairs — flanking the couch, same scale
+    s.add.image(centerX - 95, loungeY + TILE * 0.8, FURNITURE_KEYS.armchairTanDown)
+      .setOrigin(0.5, 1).setScale(1.8).setDepth(loungeY + TILE * 0.8);
+    s.add.image(centerX + 95, loungeY + TILE * 0.8, FURNITURE_KEYS.armchairTanDown)
+      .setOrigin(0.5, 1).setScale(1.8).setDepth(loungeY + TILE * 0.8);
+
+    // Coffee table — in front of couch
+    s.add.image(centerX, loungeY + TILE * 1.5, FURNITURE_KEYS.coffeeTable)
+      .setOrigin(0.5, 1).setScale(1.4).setDepth(loungeY + TILE * 1.5);
+
+    // Coffee mug on table
+    s.add.image(centerX + 12, loungeY + TILE * 1.3, FURNITURE_KEYS.coffeeMugBlue)
+      .setOrigin(0.5, 1).setDepth(loungeY + TILE * 1.5 + 1);
+
+    // Coffee station — right side of lounge
+    const stationX = centerX + TILE * 6;
+    const stationY = loungeY + TILE * 1.9;
+    s.add.image(stationX, stationY, FURNITURE_KEYS.coffeetableBlackH)
+      .setOrigin(0.5, 1).setScale(1.5).setDepth(stationY);
+    s.add.image(stationX, stationY + 5, FURNITURE_KEYS.coffeepotRight)
+      .setOrigin(0.5, 1).setScale(1.2).setDepth(stationY + 1);
+
+  }
+}

package/templates/dashboard/src/office/assetKeys.ts

@@ -0,0 +1,150 @@
+// Asset key constants for Phaser loader
+// All paths relative to /assets/ in public/
+
+// --- Characters ---
+export const MALE_CHARACTERS   = ['Male1', 'Male2', 'Male3', 'Male4'] as const;
+export const FEMALE_CHARACTERS = ['Female1', 'Female2', 'Female3', 'Female4', 'Female5', 'Female6'] as const;
+
+export type CharacterName =
+  | typeof MALE_CHARACTERS[number]
+  | typeof FEMALE_CHARACTERS[number];
+
+// Combined array for preloading all sprites
+export const CHARACTER_NAMES = [...MALE_CHARACTERS, ...FEMALE_CHARACTERS] as const;
+
+// Characters with only a single wave frame (no _1wave/_2wave variants)
+const SINGLE_WAVE = new Set<CharacterName>(['Male3', 'Male4', 'Female3', 'Female4', 'Female5', 'Female6']);
+
+// Returns the asset keys for a character's animation frames
+export function avatarKeys(name: CharacterName) {
+  return {
+    blink: `avatar_${name}_blink`,
+    talk: `avatar_${name}_talk`,
+    wave1: `avatar_${name}_wave1`,
+    wave2: `avatar_${name}_wave2`,
+  };
+}
+
+export function avatarPath(name: CharacterName, pose: string): string {
+  if (pose === 'wave1') return SINGLE_WAVE.has(name) ? `assets/avatars/${name}_wave.png` : `assets/avatars/${name}_1wave.png`;
+  if (pose === 'wave2') return SINGLE_WAVE.has(name) ? `assets/avatars/${name}_wave.png` : `assets/avatars/${name}_2wave.png`;
+  return `assets/avatars/${name}_${pose}.png`;
+}
+
+// --- Desks ---
+export const DESK_KEYS = {
+  blackIdle: 'desk_black_idle',
+  blackCoding: 'desk_black_coding',
+  blackCodingAlt: 'desk_black_coding_alt',
+  whiteIdle: 'desk_white_idle',
+  whiteCoding: 'desk_white_coding',
+  whiteCodingAlt: 'desk_white_coding_alt',
+  blackUp: 'desk_black_up',
+  whiteUp: 'desk_white_up',
+} as const;
+
+export const DESK_PATHS: Record<string, string> = {
+  [DESK_KEYS.blackIdle]: 'assets/desks/desktop_set_black_down.png',
+  [DESK_KEYS.blackCoding]: 'assets/desks/desktop_set_black_down_coding.png',
+  [DESK_KEYS.blackCodingAlt]: 'assets/desks/desktop_set_black_down_coding-1.png',
+  [DESK_KEYS.whiteIdle]: 'assets/desks/desktop_set_white_down.png',
+  [DESK_KEYS.whiteCoding]: 'assets/desks/desktop_set_white_down_coding.png',
+  [DESK_KEYS.whiteCodingAlt]: 'assets/desks/desktop_set_white_down_coding-1.png',
+  [DESK_KEYS.blackUp]: 'assets/desks/desktop_set_black_up.png',
+  [DESK_KEYS.whiteUp]: 'assets/desks/desktop_set_white_up.png',
+};
+
+// --- Furniture ---
+export const FURNITURE_KEYS = {
+  bookshelf: 'furniture_bookshelf',
+  whiteboard: 'furniture_whiteboard',
+  clock: 'furniture_clock',
+  plant1: 'furniture_plant1',
+  plant2: 'furniture_plant2',
+  plant3: 'furniture_plant3',
+  flowers1: 'furniture_flowers1',
+  flowers2: 'furniture_flowers2',
+  couch: 'furniture_couch',
+  rug: 'furniture_rug',
+  coffeeMug: 'furniture_coffee_mug',
+  blinds: 'furniture_blinds',
+  coffeeTable: 'furniture_coffee_table',
+  // New assets
+  lampTan: 'furniture_lamp_tan',
+  monstera: 'furniture_monstera',
+  monsteraSmall: 'furniture_monstera_small',
+  succulentGreen: 'furniture_succulent_green',
+  succulentBlue: 'furniture_succulent_blue',
+  posterBlue: 'furniture_poster_blue',
+  bulletinBoard: 'furniture_bulletin_board',
+  fancyRug: 'furniture_fancy_rug',
+  cushionBlue: 'furniture_cushion_blue',
+  cushionTan: 'furniture_cushion_tan',
+  armchairTan: 'furniture_armchair_tan',
+  backpackBlue: 'furniture_backpack_blue',
+  backpackRed: 'furniture_backpack_red',
+  plantPoof: 'furniture_plant_poof',
+  plantSpindly: 'furniture_plant_spindly',
+  coffeeMugBlue: 'furniture_coffee_mug_blue',
+  pictureFrame: 'furniture_picture_frame',
+  lantern: 'furniture_lantern',
+  windowBlindsOpen: 'furniture_window_blinds_open',
+  couchTanDown: 'furniture_couch_tan_down',
+  armchairTanDown: 'furniture_armchair_tan_down',
+  deskWood: 'furniture_desk_wood',
+  fancyRugWide: 'furniture_fancy_rug_wide',
+  waterCooler: 'furniture_water_cooler',
+  whiteboardStandGraph: 'furniture_whiteboard_stand_graph',
+  bookshelfPurpleTall: 'furniture_bookshelf_purple_tall',
+  coffeetableBlackH: 'furniture_coffeetable_black_h',
+  coffeepotRight: 'furniture_coffeepot_right',
+  blindsLargeWhite: 'furniture_blinds_large_white',
+  treasurechestGold: 'furniture_treasurechest_gold',
+} as const;
+
+export const FURNITURE_PATHS: Record<string, string> = {
+  [FURNITURE_KEYS.bookshelf]: 'assets/furniture/bookshelf.png',
+  [FURNITURE_KEYS.whiteboard]: 'assets/furniture/whiteboard.png',
+  [FURNITURE_KEYS.clock]: 'assets/furniture/clock.png',
+  [FURNITURE_KEYS.plant1]: 'assets/furniture/plant1.png',
+  [FURNITURE_KEYS.plant2]: 'assets/furniture/plant2.png',
+  [FURNITURE_KEYS.plant3]: 'assets/furniture/plant3.png',
+  [FURNITURE_KEYS.flowers1]: 'assets/furniture/flowers1.png',
+  [FURNITURE_KEYS.flowers2]: 'assets/furniture/flowers2.png',
+  [FURNITURE_KEYS.couch]: 'assets/furniture/couch.png',
+  [FURNITURE_KEYS.rug]: 'assets/furniture/rug.png',
+  [FURNITURE_KEYS.coffeeMug]: 'assets/furniture/coffee_mug.png',
+  [FURNITURE_KEYS.blinds]: 'assets/furniture/blinds.png',
+  [FURNITURE_KEYS.coffeeTable]: 'assets/furniture/coffee_table.png',
+  // New assets
+  [FURNITURE_KEYS.lampTan]: 'assets/furniture/lamp_tan.png',
+  [FURNITURE_KEYS.monstera]: 'assets/furniture/monstera.png',
+  [FURNITURE_KEYS.monsteraSmall]: 'assets/furniture/monstera_small.png',
+  [FURNITURE_KEYS.succulentGreen]: 'assets/furniture/succulent_green.png',
+  [FURNITURE_KEYS.succulentBlue]: 'assets/furniture/succulent_blue.png',
+  [FURNITURE_KEYS.posterBlue]: 'assets/furniture/poster_blue.png',
+  [FURNITURE_KEYS.bulletinBoard]: 'assets/furniture/bulletin_board.png',
+  [FURNITURE_KEYS.fancyRug]: 'assets/furniture/fancy_rug.png',
+  [FURNITURE_KEYS.cushionBlue]: 'assets/furniture/cushion_blue.png',
+  [FURNITURE_KEYS.cushionTan]: 'assets/furniture/cushion_tan.png',
+  [FURNITURE_KEYS.armchairTan]: 'assets/furniture/armchair_tan.png',
+  [FURNITURE_KEYS.backpackBlue]: 'assets/furniture/backpack_blue.png',
+  [FURNITURE_KEYS.backpackRed]: 'assets/furniture/backpack_red.png',
+  [FURNITURE_KEYS.plantPoof]: 'assets/furniture/plant_poof.png',
+  [FURNITURE_KEYS.plantSpindly]: 'assets/furniture/plant_spindly.png',
+  [FURNITURE_KEYS.coffeeMugBlue]: 'assets/furniture/coffee_mug_blue.png',
+  [FURNITURE_KEYS.pictureFrame]: 'assets/furniture/picture_frame.png',
+  [FURNITURE_KEYS.lantern]: 'assets/furniture/lantern.png',
+  [FURNITURE_KEYS.windowBlindsOpen]: 'assets/furniture/window_blinds_open.png',
+  [FURNITURE_KEYS.couchTanDown]: 'assets/furniture/couch_tan_down.png',
+  [FURNITURE_KEYS.armchairTanDown]: 'assets/furniture/armchair_tan_down.png',
+  [FURNITURE_KEYS.deskWood]: 'assets/furniture/desk_wood.png',
+  [FURNITURE_KEYS.fancyRugWide]: 'assets/furniture/fancy_rug_wide.png',
+  [FURNITURE_KEYS.waterCooler]: 'assets/furniture/water_cooler_better.png',
+  [FURNITURE_KEYS.whiteboardStandGraph]: 'assets/furniture/whiteboard_stand_graph.png',
+  [FURNITURE_KEYS.bookshelfPurpleTall]: 'assets/furniture/bookshelf_purple_tall.png',
+  [FURNITURE_KEYS.coffeetableBlackH]: 'assets/furniture/coffeetable_black_horizontal.png',
+  [FURNITURE_KEYS.coffeepotRight]: 'assets/furniture/coffeepot_right.png',
+  [FURNITURE_KEYS.blindsLargeWhite]: 'assets/furniture/blinds_large_closed_white.png',
+  [FURNITURE_KEYS.treasurechestGold]: 'assets/furniture/treasurechest_closed_gold.png',
+};

package/templates/dashboard/src/office/palette.ts

@@ -0,0 +1,32 @@
+// Slimmed palette — only badge colors and layout constants
+// All visual rendering now uses sprite assets, not procedural colors
+
+export const COLORS = {
+  // Status badge dots
+  statusIdle: 0x6b7894,
+  statusWorking: 0x3b82f6,
+  statusDone: 0x10b981,
+  statusCheckpoint: 0xf59e0b,
+
+  // Name badge
+  nameCardBg: 0x0f1629,
+  nameCardText: 0xf0f0f0,
+
+  // Background
+  background: 0x0a0e1a,
+
+  // Floor fill (warm wood)
+  floor: 0xc8ac86,
+  floorAlt: 0xbca07a,
+
+  // Wall fill
+  wall: 0xe6dace,
+  wallTrim: 0xa89888,
+} as const;
+
+// Layout constants
+export const TILE = 32;           // Base tile size in pixels
+export const CELL_W = 3 * TILE;   // 96px — desk cell width (tighter grid)
+export const CELL_H = 3 * TILE;   // 96px — desk cell height
+export const MARGIN = 3 * TILE;   // 96px — room edge margin (more breathing room)
+export const WALL_H = 3 * TILE;   // 96px — wall strip height (taller for decorations)

package/templates/dashboard/src/plugin/squadWatcher.ts

@@ -0,0 +1,260 @@
+import type { Plugin, ViteDevServer } from "vite";
+import { WebSocketServer, WebSocket } from "ws";
+import type { Server, IncomingMessage } from "node:http";
+import type { Duplex } from "node:stream";
+import fs from "node:fs";
+import fsp from "node:fs/promises";
+import { watch as chokidarWatch } from "chokidar";
+import path from "node:path";
+import { parse as parseYaml } from "yaml";
+import type { SquadInfo, SquadState, WsMessage } from "../types/state";
+
+function resolveSquadsDir(): string {
+  const candidates = [
+    path.resolve(process.cwd(), "../squads"),  // started from dashboard/
+    path.resolve(process.cwd(), "squads"),     // started from project root
+  ];
+  for (const c of candidates) {
+    if (fs.existsSync(c)) return c;
+  }
+  return path.resolve(process.cwd(), "../squads"); // default (will be created on demand)
+}
+
+async function discoverSquads(squadsDir: string): Promise<SquadInfo[]> {
+  let entries;
+  try {
+    entries = await fsp.readdir(squadsDir, { withFileTypes: true });
+  } catch {
+    return [];
+  }
+
+  const squads: SquadInfo[] = [];
+
+  for (const entry of entries) {
+    if (!entry.isDirectory()) continue;
+    if (entry.name.startsWith(".") || entry.name.startsWith("_")) continue;
+
+    const yamlPath = path.join(squadsDir, entry.name, "squad.yaml");
+    try {
+      const raw = await fsp.readFile(yamlPath, "utf-8");
+      const parsed = parseYaml(raw);
+      const s = parsed?.squad;
+      if (s) {
+        squads.push({
+          code: typeof s.code === "string" ? s.code : entry.name,
+          name: typeof s.name === "string" ? s.name : entry.name,
+          description: typeof s.description === "string" ? s.description : "",
+          icon: typeof s.icon === "string" ? s.icon : "\u{1F4CB}",
+          agents: Array.isArray(s.agents) ? (s.agents as unknown[]).filter((a): a is string => typeof a === "string") : [],
+        });
+        continue;
+      }
+    } catch {
+      // No squad.yaml or invalid YAML — fall through to default
+    }
+
+    squads.push({
+      code: entry.name,
+      name: entry.name,
+      description: "",
+      icon: "\u{1F4CB}",
+      agents: [],
+    });
+  }
+
+  return squads;
+}
+
+function isValidState(data: unknown): data is SquadState {
+  if (!data || typeof data !== "object") return false;
+  const d = data as Record<string, unknown>;
+  return (
+    typeof d.status === "string" &&
+    d.step != null && typeof d.step === "object" &&
+    Array.isArray(d.agents)
+  );
+}
+
+async function readActiveStates(squadsDir: string): Promise<Record<string, SquadState>> {
+  const states: Record<string, SquadState> = {};
+
+  let entries;
+  try {
+    entries = await fsp.readdir(squadsDir, { withFileTypes: true });
+  } catch {
+    return states;
+  }
+
+  for (const entry of entries) {
+    if (!entry.isDirectory()) continue;
+    const statePath = path.join(squadsDir, entry.name, "state.json");
+
+    try {
+      const raw = await fsp.readFile(statePath, "utf-8");
+      const parsed = JSON.parse(raw);
+      if (isValidState(parsed)) {
+        states[entry.name] = parsed;
+      }
+    } catch {
+      // Skip missing or invalid JSON
+    }
+  }
+
+  return states;
+}
+
+async function buildSnapshot(squadsDir: string): Promise<WsMessage> {
+  return {
+    type: "SNAPSHOT",
+    squads: await discoverSquads(squadsDir),
+    activeStates: await readActiveStates(squadsDir),
+  };
+}
+
+function broadcast(wss: WebSocketServer, msg: WsMessage) {
+  const data = JSON.stringify(msg);
+  for (const client of wss.clients) {
+    if (client.readyState === WebSocket.OPEN) {
+      try {
+        client.send(data);
+      } catch {
+        // Client connection dying — ws library will clean it up
+      }
+    }
+  }
+}
+
+export function squadWatcherPlugin(): Plugin {
+  return {
+    name: "squad-watcher",
+    configureServer(server: ViteDevServer) {
+      if (!server.httpServer) {
+        server.config.logger.warn("[squad-watcher] no httpServer — skipping");
+        return;
+      }
+
+      const squadsDir = resolveSquadsDir();
+      server.config.logger.info(`[squad-watcher] squads dir: ${squadsDir}`);
+
+      // Create WebSocket server with noServer to avoid intercepting Vite's HMR
+      const wss = new WebSocketServer({ noServer: true });
+      (server.httpServer as Server).on("upgrade", (req: IncomingMessage, socket: Duplex, head: Buffer) => {
+        if (req.url === "/__squads_ws") {
+          wss.handleUpgrade(req, socket, head, (ws) => {
+            wss.emit("connection", ws, req);
+          });
+        }
+        // Let Vite handle all other upgrade requests (HMR)
+      });
+
+      // Send snapshot on new connection
+      wss.on("connection", async (ws) => {
+        try {
+          const snap = await buildSnapshot(squadsDir);
+          ws.send(JSON.stringify(snap));
+        } catch {
+          // Connection may have closed before snapshot was ready
+        }
+      });
+
+      // Ensure squads directory exists
+      fsp.mkdir(squadsDir, { recursive: true }).catch((err) => {
+        server.config.logger.error(`[squad-watcher] failed to create squads dir: ${err.message}`);
+      });
+
+      // REST API fallback — serves snapshot over HTTP for polling clients
+      server.middlewares.use(async (req, res, next) => {
+        if (req.url !== "/api/snapshot") return next();
+        try {
+          const snapshot = await buildSnapshot(squadsDir);
+          res.setHeader("Content-Type", "application/json");
+          res.setHeader("Cache-Control", "no-cache");
+          res.end(JSON.stringify(snapshot));
+        } catch {
+          res.writeHead(500);
+          res.end("Internal Server Error");
+        }
+      });
+
+      // REST API — reset agent status to idle after delivery animation
+      server.middlewares.use(async (req, res, next) => {
+        if (req.url !== "/api/reset-agent" || req.method !== "POST") return next();
+        let body = "";
+        req.on("data", (chunk: Buffer) => { body += chunk.toString(); });
+        req.on("end", async () => {
+          try {
+            const { squad, agentId } = JSON.parse(body);
+            const statePath = path.join(squadsDir, squad, "state.json");
+            const raw = await fsp.readFile(statePath, "utf-8");
+            const state = JSON.parse(raw);
+            if (!isValidState(state)) { res.writeHead(400); res.end("Invalid state"); return; }
+            const agent = state.agents.find((a: { id: string }) => a.id === agentId);
+            if (agent) {
+              agent.status = "idle";
+              state.updatedAt = new Date().toISOString();
+              await fsp.writeFile(statePath, JSON.stringify(state, null, 2));
+            }
+            res.setHeader("Content-Type", "application/json");
+            res.end(JSON.stringify({ ok: true }));
+          } catch {
+            res.writeHead(500);
+            res.end("Error");
+          }
+        });
+      });
+
+      // File watcher using chokidar — reliable cross-platform, handles partial writes
+      const watcher = chokidarWatch(squadsDir, {
+        ignoreInitial: true,
+        awaitWriteFinish: { stabilityThreshold: 300, pollInterval: 50 },
+        ignored: [/(^|[/\\])\./, /node_modules/, /output[/\\]/],
+        depth: 2,
+      });
+
+      function handleFileChange(filePath: string) {
+        const relative = path.relative(squadsDir, filePath).replace(/\\/g, "/");
+        const parts = relative.split("/");
+        if (parts.length < 2) return;
+
+        const squadName = parts[0];
+        const fileName = parts[1];
+
+        if (fileName === "state.json") {
+          fsp.readFile(filePath, "utf-8").then((raw) => {
+            const parsed = JSON.parse(raw);
+            if (!isValidState(parsed)) return;
+            broadcast(wss, { type: "SQUAD_UPDATE", squad: squadName, state: parsed });
+          }).catch(() => {
+            // Invalid JSON — next change event will retry
+          });
+        } else if (fileName === "squad.yaml") {
+          buildSnapshot(squadsDir).then((snap) => broadcast(wss, snap));
+        }
+      }
+
+      function handleFileRemoval(filePath: string) {
+        const relative = path.relative(squadsDir, filePath).replace(/\\/g, "/");
+        const parts = relative.split("/");
+        if (parts.length < 2) return;
+
+        const squadName = parts[0];
+        const fileName = parts[1];
+
+        if (fileName === "state.json") {
+          broadcast(wss, { type: "SQUAD_INACTIVE", squad: squadName });
+        } else if (fileName === "squad.yaml") {
+          buildSnapshot(squadsDir).then((snap) => broadcast(wss, snap));
+        }
+      }
+
+      watcher.on("add", handleFileChange);
+      watcher.on("change", handleFileChange);
+      watcher.on("unlink", handleFileRemoval);
+
+      server.httpServer.on("close", () => {
+        watcher.close();
+      });
+    },
+  };
+}
+