goiabaseeds 1.0.0

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

@@ -0,0 +1,181 @@
+// === Office Color Palette (Gather.town-inspired modern office) ===
+export const COLORS = {
+  // Floor (wood planks)
+  woodLight: 0x9a7a56,
+  woodBase: 0x876a48,
+  woodDark: 0x755a3a,
+  woodGap: 0x4e3a28,
+
+  // Walls (clean cream)
+  wallFace: 0xe4d8cc,
+  wallTrim: 0xa89888,
+  wallShadow: 0x887868,
+
+  // Desk / Workstation (light maple)
+  deskTop: 0xd4bf9c,
+  deskEdge: 0xb8a480,
+  deskShadow: 0x806844,
+  monitorFrame: 0x2a2a32,
+  monitorScreen: 0x1a2a3a,
+  monitorScreenOn: 0x4a9aff,
+  keyboard: 0x3a3a42,
+
+  // Office chair (top-down)
+  chairSeat: 0x3a3a4a,
+  chairBase: 0x4a4a5a,
+
+  // Furniture / Decor
+  bookshelfWood: 0xc4a070,
+  plantGreen: 0x5aaa5a,
+  plantDark: 0x3a7a3a,
+  plantPot: 0xd4a878,
+  whiteboardBg: 0xf5f0ea,
+  whiteboardFrame: 0x8a8a92,
+  clockFace: 0xf0ebe0,
+  clockFrame: 0x6a6a72,
+  coffeeMachine: 0x4a4a52,
+
+  // Characters
+  skinLight: 0xf5c5a3,
+  skinMedium: 0xd4a574,
+  skinDark: 0x8b6340,
+  hairBlack: 0x2a2018,
+  hairBrown: 0x6a4a2a,
+  hairBlonde: 0xd4a840,
+  hairRed: 0xb04020,
+  shirtBlue: 0x4a78b0,
+  shirtGreen: 0x4a8a4a,
+  shirtRed: 0xa84848,
+  shirtWhite: 0xe0d8cc,
+  shirtPurple: 0x7a58a0,
+  pantsDark: 0x3a3a4a,
+  shoeDark: 0x2a2018,
+
+  // Character shading (auto-derived tones)
+  skinLightShadow: 0xd4a883,
+  skinMediumShadow: 0xb48854,
+  skinDarkShadow: 0x6b4320,
+
+  hairBlackLight: 0x3a3028,
+  hairBlackDark: 0x1a1008,
+  hairBrownLight: 0x8a6a4a,
+  hairBrownDark: 0x4a2a0a,
+  hairBlondeLight: 0xe4b850,
+  hairBlondeDark: 0xb48830,
+  hairRedLight: 0xc05030,
+  hairRedDark: 0x903010,
+
+  shirtBlueLight: 0x5a8ac0,
+  shirtBlueDark: 0x3a6898,
+  shirtGreenLight: 0x5a9a5a,
+  shirtGreenDark: 0x3a7a3a,
+  shirtRedLight: 0xb85858,
+  shirtRedDark: 0x983838,
+  shirtWhiteLight: 0xf0e8dc,
+  shirtWhiteDark: 0xd0c8bc,
+  shirtPurpleLight: 0x8a68b0,
+  shirtPurpleDark: 0x6a4890,
+
+  pantsBase: 0x3a3a4a,
+  pantsShade: 0x2a2a3a, // darker shade for leg edges/inner shadow
+
+  shoeBase: 0x2a2018,
+  shoeLight: 0x3a3028,
+
+  // Accessories
+  mugBody: 0xe0e0e0,
+  mugRim: 0xcccccc,
+  mugHandle: 0xcccccc,
+  postItYellow: 0xffee55,
+  postItPink: 0xff8866,
+  bookRed: 0xcc4444,
+  bookBlue: 0x4466aa,
+  bookGreen: 0x44aa44,
+  photoFrame: 0x3a3028,
+  waterBottle: 0x88bbdd,
+  waterCap: 0x4488aa,
+
+  // Name card
+  nameCardBg: 0x14141c,
+  nameCardText: 0xffffff,
+
+  // Belt
+  beltBuckle: 0x8a8a6a,
+
+  // Collar
+  collarWhite: 0xf0f0f0,
+
+  // Status effects (high contrast)
+  statusIdle: 0xaaaacc,
+  statusWorking: 0x60b0ff,
+  statusDone: 0x60f080,
+  statusCheckpoint: 0xffbb22,
+  bubbleBg: 0xffffff,
+  bubbleBorder: 0x3a3a4a,
+  particleGreen: 0x60f080,
+
+  // Envelope
+  envelopeBody: 0xf5e6c8,
+  envelopeFold: 0xe0d0b0,
+  envelopeSeal: 0xcc3333,
+} as const;
+
+// === Layout Constants ===
+export const TILE = 32;
+export const CELL_W = 4 * TILE; // 128px wide per cell (spacious)
+export const CELL_H = 4 * TILE; // 128px tall per cell
+export const SCENE_SCALE = 3;   // Integer scaling — crisp pixel art
+
+export type CharacterColors = {
+  hair: number;      hairLight: number;     hairDark: number;
+  skin: number;      skinShadow: number;
+  shirt: number;     shirtLight: number;    shirtDark: number;
+  pants: number;     pantsDark: number;
+  shoe: number;      shoeLight: number;
+};
+
+// Character variants (assigned round-robin to agents)
+export const CHARACTER_VARIANTS: CharacterColors[] = [
+  {
+    hair: COLORS.hairBlack,  hairLight: COLORS.hairBlackLight,  hairDark: COLORS.hairBlackDark,
+    skin: COLORS.skinLight,  skinShadow: COLORS.skinLightShadow,
+    shirt: COLORS.shirtBlue, shirtLight: COLORS.shirtBlueLight, shirtDark: COLORS.shirtBlueDark,
+    pants: COLORS.pantsBase, pantsDark: COLORS.pantsShade,
+    shoe: COLORS.shoeBase,   shoeLight: COLORS.shoeLight,
+  },
+  {
+    hair: COLORS.hairBrown,  hairLight: COLORS.hairBrownLight,  hairDark: COLORS.hairBrownDark,
+    skin: COLORS.skinMedium, skinShadow: COLORS.skinMediumShadow,
+    shirt: COLORS.shirtGreen, shirtLight: COLORS.shirtGreenLight, shirtDark: COLORS.shirtGreenDark,
+    pants: COLORS.pantsBase, pantsDark: COLORS.pantsShade,
+    shoe: COLORS.shoeBase,   shoeLight: COLORS.shoeLight,
+  },
+  {
+    hair: COLORS.hairBlonde, hairLight: COLORS.hairBlondeLight,  hairDark: COLORS.hairBlondeDark,
+    skin: COLORS.skinLight,  skinShadow: COLORS.skinLightShadow,
+    shirt: COLORS.shirtRed,  shirtLight: COLORS.shirtRedLight,  shirtDark: COLORS.shirtRedDark,
+    pants: COLORS.pantsBase, pantsDark: COLORS.pantsShade,
+    shoe: COLORS.shoeBase,   shoeLight: COLORS.shoeLight,
+  },
+  {
+    hair: COLORS.hairRed,    hairLight: COLORS.hairRedLight,    hairDark: COLORS.hairRedDark,
+    skin: COLORS.skinDark,   skinShadow: COLORS.skinDarkShadow,
+    shirt: COLORS.shirtWhite, shirtLight: COLORS.shirtWhiteLight, shirtDark: COLORS.shirtWhiteDark,
+    pants: COLORS.pantsBase, pantsDark: COLORS.pantsShade,
+    shoe: COLORS.shoeBase,   shoeLight: COLORS.shoeLight,
+  },
+  {
+    hair: COLORS.hairBlack,  hairLight: COLORS.hairBlackLight,  hairDark: COLORS.hairBlackDark,
+    skin: COLORS.skinMedium, skinShadow: COLORS.skinMediumShadow,
+    shirt: COLORS.shirtPurple, shirtLight: COLORS.shirtPurpleLight, shirtDark: COLORS.shirtPurpleDark,
+    pants: COLORS.pantsBase, pantsDark: COLORS.pantsShade,
+    shoe: COLORS.shoeBase,   shoeLight: COLORS.shoeLight,
+  },
+  {
+    hair: COLORS.hairBrown,  hairLight: COLORS.hairBrownLight,  hairDark: COLORS.hairBrownDark,
+    skin: COLORS.skinLight,  skinShadow: COLORS.skinLightShadow,
+    shirt: COLORS.shirtGreen, shirtLight: COLORS.shirtGreenLight, shirtDark: COLORS.shirtGreenDark,
+    pants: COLORS.pantsBase, pantsDark: COLORS.pantsShade,
+    shoe: COLORS.shoeBase,   shoeLight: COLORS.shoeLight,
+  },
+];

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

@@ -0,0 +1,254 @@
+import { Texture, CanvasSource } from "pixi.js";
+import { COLORS, CharacterColors } from "./palette";
+
+function hexToRgb(hex: number): [number, number, number] {
+  return [(hex >> 16) & 0xff, (hex >> 8) & 0xff, hex & 0xff];
+}
+
+function createCanvas(w: number, h: number): [HTMLCanvasElement, CanvasRenderingContext2D] {
+  const canvas = document.createElement("canvas");
+  canvas.width = w;
+  canvas.height = h;
+  const ctx = canvas.getContext("2d")!;
+  ctx.imageSmoothingEnabled = false;
+  return [canvas, ctx];
+}
+
+// 1 pixel per logical pixel — SCENE_SCALE=2 handles display scaling
+function px(ctx: CanvasRenderingContext2D, x: number, y: number, color: number) {
+  const [r, g, b] = hexToRgb(color);
+  ctx.fillStyle = `rgb(${r},${g},${b})`;
+  ctx.fillRect(x, y, 1, 1);
+}
+
+function hspan(ctx: CanvasRenderingContext2D, x1: number, x2: number, y: number, color: number) {
+  for (let x = x1; x <= x2; x++) px(ctx, x, y, color);
+}
+
+type MouthVariant = "neutral" | "focused" | "smile";
+
+function drawHead(ctx: CanvasRenderingContext2D, c: CharacterColors, mouth: MouthVariant) {
+  // --- HAIR (rows 2-7) ---
+  hspan(ctx, 16, 30, 2, c.hair);
+  hspan(ctx, 15, 31, 3, c.hair);
+  hspan(ctx, 14, 32, 4, c.hair);
+  hspan(ctx, 14, 32, 5, c.hair);
+  // Hair highlights
+  px(ctx, 17, 3, c.hairLight); px(ctx, 20, 3, c.hairLight); px(ctx, 24, 3, c.hairLight);
+  px(ctx, 25, 4, c.hairLight); px(ctx, 28, 3, c.hairLight);
+  px(ctx, 16, 4, c.hairLight); px(ctx, 22, 4, c.hairLight); px(ctx, 30, 4, c.hairLight);
+  // Hair dark edges
+  px(ctx, 14, 5, c.hairDark); px(ctx, 32, 5, c.hairDark);
+  px(ctx, 15, 4, c.hairDark); px(ctx, 31, 4, c.hairDark);
+  // Sideburns
+  px(ctx, 14, 6, c.hair); px(ctx, 14, 7, c.hair);
+  px(ctx, 32, 6, c.hair); px(ctx, 32, 7, c.hair);
+
+  // --- FACE (rows 6-14) with oval contour ---
+  hspan(ctx, 15, 31, 6, c.skin);
+  hspan(ctx, 15, 31, 7, c.skin);
+  hspan(ctx, 15, 31, 8, c.skin);
+  hspan(ctx, 15, 31, 9, c.skin);
+  hspan(ctx, 15, 31, 10, c.skin);
+  hspan(ctx, 16, 30, 11, c.skin);
+  hspan(ctx, 17, 29, 12, c.skin);
+  hspan(ctx, 18, 28, 13, c.skin);
+  hspan(ctx, 19, 27, 14, c.skin);
+  // Oval contour shadows — left edge
+  px(ctx, 15, 8, c.skinShadow); px(ctx, 15, 9, c.skinShadow); px(ctx, 15, 10, c.skinShadow);
+  px(ctx, 16, 11, c.skinShadow); px(ctx, 17, 12, c.skinShadow);
+  px(ctx, 18, 13, c.skinShadow); px(ctx, 19, 14, c.skinShadow);
+  // Oval contour shadows — right edge
+  px(ctx, 31, 8, c.skinShadow); px(ctx, 31, 9, c.skinShadow); px(ctx, 31, 10, c.skinShadow);
+  px(ctx, 30, 11, c.skinShadow); px(ctx, 29, 12, c.skinShadow);
+  px(ctx, 28, 13, c.skinShadow); px(ctx, 27, 14, c.skinShadow);
+  // Jaw shadow
+  hspan(ctx, 20, 26, 14, c.skinShadow);
+
+  // Eyebrows (4px wide, 1 row above eyes)
+  hspan(ctx, 17, 20, 7, c.hairDark);
+  hspan(ctx, 26, 29, 7, c.hairDark);
+
+  // Eyes (5px wide: white-white-pupil-white-white) — focused shifts down 1px
+  const eyeY = mouth === "focused" ? 10 : 9;
+  px(ctx, 17, eyeY, 0xf0ede8); px(ctx, 18, eyeY, 0xf0ede8);
+  px(ctx, 19, eyeY, 0x2a2018); px(ctx, 20, eyeY, 0x2a2018);
+  px(ctx, 21, eyeY, 0xf0ede8);
+  px(ctx, 25, eyeY, 0xf0ede8);
+  px(ctx, 26, eyeY, 0x2a2018); px(ctx, 27, eyeY, 0x2a2018);
+  px(ctx, 28, eyeY, 0xf0ede8); px(ctx, 29, eyeY, 0xf0ede8);
+
+  // Nose (L-shape, more defined)
+  px(ctx, 23, 10, c.skinShadow);
+  px(ctx, 23, 11, c.skinShadow);
+  px(ctx, 23, 12, c.skinShadow);
+  px(ctx, 24, 12, c.skinShadow);
+
+  // Mouth
+  if (mouth === "smile") {
+    // Smile: corners up + bottom curve
+    px(ctx, 20, 13, 0x2a2018); px(ctx, 26, 13, 0x2a2018);
+    hspan(ctx, 21, 25, 14, 0x2a2018);
+    // Lower lip highlight
+    hspan(ctx, 22, 24, 15, c.skinShadow);
+  } else {
+    // neutral / focused: two-row mouth with lip
+    hspan(ctx, 21, 25, 13, 0x2a2018);
+    hspan(ctx, 22, 24, 14, c.skinShadow);
+  }
+
+  // Ears (2px tall, with shadow)
+  px(ctx, 14, 8, c.skin); px(ctx, 14, 9, c.skin); px(ctx, 14, 10, c.skinShadow);
+  px(ctx, 32, 8, c.skin); px(ctx, 32, 9, c.skin); px(ctx, 32, 10, c.skinShadow);
+}
+
+function drawBody(ctx: CanvasRenderingContext2D, c: CharacterColors) {
+  // --- NECK (rows 15-16) ---
+  hspan(ctx, 20, 26, 15, c.skin);
+  hspan(ctx, 21, 25, 16, c.skin);
+  px(ctx, 20, 15, c.skinShadow); px(ctx, 26, 15, c.skinShadow);
+
+  // --- COLLAR (row 17) ---
+  hspan(ctx, 17, 29, 17, COLORS.collarWhite);
+  px(ctx, 22, 17, 0xe0e0e0); px(ctx, 23, 17, 0xe0e0e0); px(ctx, 24, 17, 0xe0e0e0);
+
+  // --- SHIRT (rows 18-28) ---
+  for (let y = 18; y <= 28; y++) {
+    for (let i = 13; i <= 33; i++) {
+      if (i <= 15) px(ctx, i, y, c.shirtDark);
+      else if (i >= 31) px(ctx, i, y, c.shirtDark);
+      else if (i >= 22 && i <= 24) px(ctx, i, y, c.shirtLight);
+      else px(ctx, i, y, c.shirt);
+    }
+  }
+
+  // --- BELT (row 29) ---
+  hspan(ctx, 13, 33, 29, c.pantsDark);
+  px(ctx, 22, 29, COLORS.beltBuckle); px(ctx, 23, 29, COLORS.beltBuckle); px(ctx, 24, 29, COLORS.beltBuckle);
+
+  // --- PANTS (rows 30-39) ---
+  for (let y = 30; y <= 39; y++) {
+    for (let i = 14; i <= 21; i++) px(ctx, i, y, i <= 15 ? c.pantsDark : c.pants);
+    for (let i = 25; i <= 32; i++) px(ctx, i, y, i >= 31 ? c.pantsDark : c.pants);
+    px(ctx, 21, y, c.pantsDark); px(ctx, 25, y, c.pantsDark);
+  }
+
+  // --- SHOES (rows 40-43) ---
+  for (let i = 13; i <= 22; i++) { px(ctx, i, 40, c.shoe); px(ctx, i, 41, c.shoe); }
+  for (let i = 13; i <= 22; i++) px(ctx, i, 42, i <= 14 ? c.shoeLight : c.shoe);
+  hspan(ctx, 13, 22, 43, c.shoeLight);
+  for (let i = 24; i <= 33; i++) { px(ctx, i, 40, c.shoe); px(ctx, i, 41, c.shoe); }
+  for (let i = 24; i <= 33; i++) px(ctx, i, 42, i >= 32 ? c.shoeLight : c.shoe);
+  hspan(ctx, 24, 33, 43, c.shoeLight);
+}
+
+function drawCharacterIdle(ctx: CanvasRenderingContext2D, c: CharacterColors) {
+  drawHead(ctx, c, "neutral");
+  drawBody(ctx, c);
+
+  // Left arm at side — sleeve (3px wide)
+  for (let y = 18; y <= 22; y++) { px(ctx, 10, y, c.shirtDark); px(ctx, 11, y, c.shirt); px(ctx, 12, y, c.shirt); }
+  // Left forearm (3px wide with shadow)
+  for (let y = 23; y <= 27; y++) { px(ctx, 9, y, c.skinShadow); px(ctx, 10, y, c.skin); px(ctx, 11, y, c.skin); }
+  // Left hand (4px wide)
+  px(ctx, 8, 28, c.skin); px(ctx, 9, 28, c.skin); px(ctx, 10, 28, c.skin); px(ctx, 11, 28, c.skin);
+  px(ctx, 8, 29, c.skinShadow); px(ctx, 9, 29, c.skinShadow); px(ctx, 10, 29, c.skin);
+
+  // Right arm at side — sleeve (3px wide)
+  for (let y = 18; y <= 22; y++) { px(ctx, 34, y, c.shirt); px(ctx, 35, y, c.shirt); px(ctx, 36, y, c.shirtDark); }
+  // Right forearm (3px wide with shadow)
+  for (let y = 23; y <= 27; y++) { px(ctx, 35, y, c.skin); px(ctx, 36, y, c.skin); px(ctx, 37, y, c.skinShadow); }
+  // Right hand (4px wide)
+  px(ctx, 35, 28, c.skin); px(ctx, 36, 28, c.skin); px(ctx, 37, 28, c.skin); px(ctx, 38, 28, c.skin);
+  px(ctx, 36, 29, c.skin); px(ctx, 37, 29, c.skinShadow); px(ctx, 38, 29, c.skinShadow);
+}
+
+function drawCharacterWorking(ctx: CanvasRenderingContext2D, c: CharacterColors, frame: 0 | 1) {
+  drawHead(ctx, c, "focused");
+  drawBody(ctx, c);
+
+  // Arms forward (typing) — 3px wide sleeves + forearms
+  if (frame === 0) {
+    // Left arm: sleeve reaching forward
+    for (let y = 18; y <= 20; y++) { px(ctx, 10, y, c.shirtDark); px(ctx, 11, y, c.shirt); px(ctx, 12, y, c.shirt); }
+    // Left forearm
+    for (let y = 21; y <= 24; y++) { px(ctx, 9, y, c.skinShadow); px(ctx, 10, y, c.skin); px(ctx, 11, y, c.skin); }
+    // Left hand on keyboard
+    px(ctx, 10, 25, c.skin); px(ctx, 11, 25, c.skin); px(ctx, 12, 25, c.skin); px(ctx, 13, 25, c.skin);
+    // Right arm
+    for (let y = 18; y <= 20; y++) { px(ctx, 34, y, c.shirt); px(ctx, 35, y, c.shirt); px(ctx, 36, y, c.shirtDark); }
+    for (let y = 21; y <= 24; y++) { px(ctx, 35, y, c.skin); px(ctx, 36, y, c.skin); px(ctx, 37, y, c.skinShadow); }
+    px(ctx, 33, 25, c.skin); px(ctx, 34, 25, c.skin); px(ctx, 35, 25, c.skin); px(ctx, 36, 25, c.skin);
+  } else {
+    // Left arm: slightly raised (keystroke)
+    for (let y = 18; y <= 20; y++) { px(ctx, 10, y, c.shirtDark); px(ctx, 11, y, c.shirt); px(ctx, 12, y, c.shirt); }
+    for (let y = 21; y <= 23; y++) { px(ctx, 9, y, c.skinShadow); px(ctx, 10, y, c.skin); px(ctx, 11, y, c.skin); }
+    px(ctx, 10, 24, c.skin); px(ctx, 11, 24, c.skin); px(ctx, 12, 24, c.skin); px(ctx, 13, 24, c.skin);
+    // Right arm
+    for (let y = 18; y <= 20; y++) { px(ctx, 34, y, c.shirt); px(ctx, 35, y, c.shirt); px(ctx, 36, y, c.shirtDark); }
+    for (let y = 21; y <= 23; y++) { px(ctx, 35, y, c.skin); px(ctx, 36, y, c.skin); px(ctx, 37, y, c.skinShadow); }
+    px(ctx, 33, 24, c.skin); px(ctx, 34, 24, c.skin); px(ctx, 35, 24, c.skin); px(ctx, 36, 24, c.skin);
+  }
+}
+
+function drawCharacterDone(ctx: CanvasRenderingContext2D, c: CharacterColors) {
+  drawHead(ctx, c, "smile");
+  drawBody(ctx, c);
+
+  // Arms raised (celebration) — 3px wide, diagonal up
+  // Left sleeve
+  px(ctx, 10, 18, c.shirtDark); px(ctx, 11, 18, c.shirt); px(ctx, 12, 18, c.shirt);
+  px(ctx, 10, 17, c.shirt); px(ctx, 11, 17, c.shirt);
+  // Left arm going up-left (3px wide diagonal)
+  px(ctx, 9, 16, c.skin); px(ctx, 10, 16, c.skin); px(ctx, 10, 15, c.skinShadow);
+  px(ctx, 8, 14, c.skin); px(ctx, 9, 14, c.skin); px(ctx, 9, 13, c.skinShadow);
+  px(ctx, 7, 12, c.skin); px(ctx, 8, 12, c.skin);
+  px(ctx, 6, 10, c.skin); px(ctx, 7, 10, c.skin); px(ctx, 7, 11, c.skin);
+  px(ctx, 5, 8, c.skin); px(ctx, 6, 8, c.skin); px(ctx, 6, 9, c.skin);
+
+  // Right sleeve
+  px(ctx, 34, 18, c.shirt); px(ctx, 35, 18, c.shirt); px(ctx, 36, 18, c.shirtDark);
+  px(ctx, 35, 17, c.shirt); px(ctx, 36, 17, c.shirt);
+  // Right arm going up-right
+  px(ctx, 36, 16, c.skin); px(ctx, 37, 16, c.skin); px(ctx, 36, 15, c.skinShadow);
+  px(ctx, 37, 14, c.skin); px(ctx, 38, 14, c.skin); px(ctx, 37, 13, c.skinShadow);
+  px(ctx, 38, 12, c.skin); px(ctx, 39, 12, c.skin);
+  px(ctx, 39, 10, c.skin); px(ctx, 40, 10, c.skin); px(ctx, 39, 11, c.skin);
+  px(ctx, 40, 8, c.skin); px(ctx, 41, 8, c.skin); px(ctx, 40, 9, c.skin);
+}
+
+export interface CharacterTextures {
+  idle: Texture;
+  working: [Texture, Texture];
+  done: Texture;
+  checkpoint: Texture;
+}
+
+export function generateCharacterTextures(colors: CharacterColors): CharacterTextures {
+  const size = 48;
+
+  function makeFrame(drawFn: (ctx: CanvasRenderingContext2D) => void): Texture {
+    const [canvas, ctx] = createCanvas(size, size);
+    drawFn(ctx);
+    return new Texture({ source: new CanvasSource({ resource: canvas, scaleMode: "nearest" }) });
+  }
+
+  return {
+    idle: makeFrame((ctx) => drawCharacterIdle(ctx, colors)),
+    working: [
+      makeFrame((ctx) => drawCharacterWorking(ctx, colors, 0)),
+      makeFrame((ctx) => drawCharacterWorking(ctx, colors, 1)),
+    ],
+    done: makeFrame((ctx) => drawCharacterDone(ctx, colors)),
+    checkpoint: makeFrame((ctx) => drawCharacterIdle(ctx, colors)),
+  };
+}
+
+const textureCache = new Map<number, CharacterTextures>();
+
+export function getCharacterTextures(variantIndex: number, colors: CharacterColors): CharacterTextures {
+  if (!textureCache.has(variantIndex)) {
+    textureCache.set(variantIndex, generateCharacterTextures(colors));
+  }
+  return textureCache.get(variantIndex)!;
+}

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

@@ -0,0 +1,210 @@
+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 path from "node:path";
+import { parse as parseYaml } from "yaml";
+import type { DepartmentInfo, DepartmentState, WsMessage } from "../types/state";
+
+function resolveDepartmentsDir(): string {
+  const candidates = [
+    path.resolve(process.cwd(), "../departments"),  // started from dashboard/
+    path.resolve(process.cwd(), "departments"),     // started from project root
+  ];
+  for (const c of candidates) {
+    if (fs.existsSync(c)) return c;
+  }
+  return path.resolve(process.cwd(), "../departments"); // default (will be created on demand)
+}
+
+function discoverDepartments(departmentsDir: string): DepartmentInfo[] {
+  if (!fs.existsSync(departmentsDir)) return [];
+
+  const entries = fs.readdirSync(departmentsDir, { withFileTypes: true });
+  const departments: DepartmentInfo[] = [];
+
+  for (const entry of entries) {
+    if (!entry.isDirectory()) continue;
+    if (entry.name.startsWith(".") || entry.name.startsWith("_")) continue;
+
+    const yamlPath = path.join(departmentsDir, entry.name, "department.yaml");
+    if (fs.existsSync(yamlPath)) {
+      try {
+        const raw = fs.readFileSync(yamlPath, "utf-8");
+        const parsed = parseYaml(raw);
+        const s = parsed?.department;
+        if (s) {
+          departments.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 {
+        // Fall through to default
+      }
+    }
+
+    // No department.yaml or invalid YAML — use directory name as fallback
+    departments.push({
+      code: entry.name,
+      name: entry.name,
+      description: "",
+      icon: "\u{1F4CB}",
+      agents: [],
+    });
+  }
+
+  return departments;
+}
+
+function isValidState(data: unknown): data is DepartmentState {
+  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)
+  );
+}
+
+function readActiveStates(departmentsDir: string): Record<string, DepartmentState> {
+  const states: Record<string, DepartmentState> = {};
+  if (!fs.existsSync(departmentsDir)) return states;
+
+  const entries = fs.readdirSync(departmentsDir, { withFileTypes: true });
+  for (const entry of entries) {
+    if (!entry.isDirectory()) continue;
+    const statePath = path.join(departmentsDir, entry.name, "state.json");
+    if (!fs.existsSync(statePath)) continue;
+
+    try {
+      const raw = fs.readFileSync(statePath, "utf-8");
+      const parsed = JSON.parse(raw);
+      if (isValidState(parsed)) {
+        states[entry.name] = parsed;
+      }
+    } catch {
+      // Skip invalid JSON
+    }
+  }
+
+  return states;
+}
+
+function buildSnapshot(departmentsDir: string): WsMessage {
+  return {
+    type: "SNAPSHOT",
+    departments: discoverDepartments(departmentsDir),
+    activeStates: readActiveStates(departmentsDir),
+  };
+}
+
+function broadcast(wss: WebSocketServer, msg: WsMessage) {
+  const data = JSON.stringify(msg);
+  for (const client of wss.clients) {
+    if (client.readyState === WebSocket.OPEN) {
+      client.send(data);
+    }
+  }
+}
+
+export function departmentWatcherPlugin(): Plugin {
+  return {
+    name: "department-watcher",
+    configureServer(server: ViteDevServer) {
+      const departmentsDir = resolveDepartmentsDir();
+      server.config.logger.info(`[department-watcher] departments dir: ${departmentsDir}`);
+
+      // 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 === "/__departments_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", (ws) => {
+        ws.send(JSON.stringify(buildSnapshot(departmentsDir)));
+      });
+
+      // Ensure departments directory exists
+      if (!fs.existsSync(departmentsDir)) {
+        fs.mkdirSync(departmentsDir, { recursive: true });
+      }
+
+      // Watch state.json files using Vite's built-in chokidar watcher
+      const stateGlob = path.join(departmentsDir, "*/state.json").replace(/\\/g, "/");
+      server.watcher.add(stateGlob);
+
+      // Debounce timers per department to avoid reading partial writes
+      const changeTimers = new Map<string, ReturnType<typeof setTimeout>>();
+
+      // Also watch for new department.yaml files
+      const yamlGlob = path.join(departmentsDir, "*/department.yaml").replace(/\\/g, "/");
+      server.watcher.add(yamlGlob);
+
+      server.watcher.on("add", (filePath: string) => {
+        if (filePath.endsWith("state.json")) {
+          const departmentName = extractDepartmentName(filePath, departmentsDir);
+          if (!departmentName) return;
+          clearTimeout(changeTimers.get(departmentName));
+          changeTimers.set(departmentName, setTimeout(() => {
+            try {
+              const raw = fs.readFileSync(filePath, "utf-8");
+              const state: DepartmentState = JSON.parse(raw);
+              broadcast(wss, { type: "DEPARTMENT_ACTIVE", department: departmentName, state });
+            } catch { /* skip */ }
+          }, 50));
+        } else if (filePath.endsWith("department.yaml")) {
+          broadcast(wss, buildSnapshot(departmentsDir));
+        }
+      });
+
+      server.watcher.on("change", (filePath: string) => {
+        if (filePath.endsWith("state.json")) {
+          const departmentName = extractDepartmentName(filePath, departmentsDir);
+          if (!departmentName) return;
+          clearTimeout(changeTimers.get(departmentName));
+          changeTimers.set(departmentName, setTimeout(() => {
+            try {
+              const raw = fs.readFileSync(filePath, "utf-8");
+              const state: DepartmentState = JSON.parse(raw);
+              broadcast(wss, { type: "DEPARTMENT_UPDATE", department: departmentName, state });
+            } catch { /* skip */ }
+          }, 50));
+        } else if (filePath.endsWith("department.yaml")) {
+          broadcast(wss, buildSnapshot(departmentsDir));
+        }
+      });
+
+      server.watcher.on("unlink", (filePath: string) => {
+        if (filePath.endsWith("state.json")) {
+          const departmentName = extractDepartmentName(filePath, departmentsDir);
+          if (!departmentName) return;
+          clearTimeout(changeTimers.get(departmentName));
+          changeTimers.delete(departmentName);
+          broadcast(wss, { type: "DEPARTMENT_INACTIVE", department: departmentName });
+        } else if (filePath.endsWith("department.yaml")) {
+          broadcast(wss, buildSnapshot(departmentsDir));
+        }
+      });
+    },
+  };
+}
+
+function extractDepartmentName(filePath: string, departmentsDir: string): string | null {
+  const normalized = filePath.replace(/\\/g, "/");
+  const normalizedBase = departmentsDir.replace(/\\/g, "/");
+  const relative = normalized.replace(normalizedBase + "/", "");
+  const parts = relative.split("/");
+  return parts.length >= 2 ? parts[0] : null;
+}