ai-control-center 1.15.2

package/lib/web/public/office/js/office-layout.js

@@ -0,0 +1,1524 @@
+/**
+ * Office Layout — pixel art RPG style team zones with furniture.
+ * Expanded with warehouse, conveyor belt, break room, gym, and status board.
+ */
+
+import { getPathfinder } from './pathfinding.js';
+import { renderPixelText, PIXEL_SIZE } from './sprite-renderer.js';
+
+const TILE = 32;
+const TEAM_WIDTH = 22;  // tiles (wider for new rooms)
+const TEAM_HEIGHT = 22; // tiles (taller for warehouse area)
+const TEAM_GAP = 3;
+
+// Workstation positions within a team zone (in tiles)
+const STATIONS = {
+  // ── Work area (top section) ──
+  statusBoard:{ x: 1,  y: 2,  w: 6, h: 3, label: 'Status Board' },
+  pmDesk:     { x: 8,  y: 2,  w: 3, h: 2, label: 'PM Desk' },
+  whiteboard: { x: 12, y: 2,  w: 5, h: 3, label: 'Whiteboard' },
+  coffee:     { x: 18, y: 2,  w: 2, h: 2, label: 'Coffee' },
+  codingDesk: { x: 1,  y: 7,  w: 6, h: 2, label: 'Coding Station' },
+  reviewTable:{ x: 8,  y: 7,  w: 3, h: 2, label: 'Review Table' },
+  // ── Social area (middle section) ──
+  breakRoom:  { x: 12, y: 7,  w: 4, h: 3, label: 'Break Room' },
+  gym:        { x: 17, y: 7,  w: 4, h: 3, label: 'Gym' },
+  // ── Deploy & warehouse (bottom section) ──
+  deployDock: { x: 1,  y: 11, w: 4, h: 2, label: 'Deploy Dock' },
+  conveyor:   { x: 5,  y: 11, w: 5, h: 2, label: 'Conveyor Belt' },
+  warehouse:  { x: 10, y: 10, w: 11, h: 5, label: 'Warehouse' },
+  // Gossip spots (open floor)
+  lounge1:    { x: 1,  y: 16, w: 3, h: 2, label: 'Lounge' },
+  lounge2:    { x: 5,  y: 16, w: 3, h: 2, label: 'Lounge' },
+};
+
+// RPG Pixel Palette
+const PAL = {
+  floor1: '#3a3a5a', floor2: '#343454',
+  wall: '#4a4a7a', wallDk: '#38385a', wallTop: '#5a5a8a',
+  desk: '#8b6914', deskDk: '#6a5010', deskLt: '#a07820',
+  monitor: '#1a1a2e', screen: '#40a8f0', screenG: '#40d870',
+  wbBg: '#e8e8d8', wbFrame: '#8a8070',
+  dockBg: '#4a4a4a', dockYel: '#e8a020',
+  whGray: '#5a5a62', whGrayLt: '#6a6a72', whGrayDk: '#4a4a52',
+  convBelt: '#606068', convRoller: '#888890',
+  pkgTan: '#c8a050', pkgTan2: '#a88030',
+  prodGrn: '#2a7a3a', prodDk: '#1a5a2a', prodRf: '#3a9a4a',
+  road: '#505058', roadLn: '#707078',
+  carpet: '#3a2a4a', shadow: '#2a2a3a',
+  breakFloor: '#4a3a2a', breakTable: '#6a5030',
+  gymFloor: '#2a3a4a', gymMat: '#3050a0',
+  statusBg: '#1a2a1a', statusGreen: '#40d060', statusRed: '#d04040',
+  statusYellow: '#d8c020', statusBlue: '#4080d0',
+};
+
+export class OfficeLayout {
+  constructor() {
+    this._teamOrigins = new Map();
+    this._projectData = new Map(); // project → {feature, stage, packages}
+    this._conveyorOffset = 0;     // animated conveyor belt offset
+    this._time = 0;
+    this._trucks = new Map();           // projectName → truck animation state
+    this._exhaustParticles = new Map(); // projectName → [{x,y,life,maxLife,vx,vy}]
+  }
+
+  setupTeams(projectConfigs) {
+    this._teamOrigins.clear();
+    const startX = 2;
+    const startY = 2;
+
+    projectConfigs.forEach((config, i) => {
+      const ox = (startX + i * (TEAM_WIDTH + TEAM_GAP)) * TILE;
+      const oy = startY * TILE;
+      this._teamOrigins.set(config.name, { x: ox, y: oy, config });
+      if (!this._projectData.has(config.name)) {
+        this._projectData.set(config.name, {
+          feature: '', stage: 'idle',
+          packages: [], // shipped features stored in warehouse
+          isDeploying: false,
+          conveyorOffset: 0,
+          conveyorTime: 0,
+        });
+      }
+    });
+
+    // Build pathfinding grids
+    const pf = getPathfinder();
+    for (const [name, origin] of this._teamOrigins) {
+      const obstacles = [];
+      for (const [key, s] of Object.entries(STATIONS)) {
+        if (key !== 'lounge1' && key !== 'lounge2') {
+          // Pad obstacles by 1 tile so characters walk around furniture, not through it
+          obstacles.push({ x: Math.max(0, s.x - 1), y: Math.max(0, s.y - 1), w: s.w + 2, h: s.h + 2 });
+        }
+      }
+      pf.buildGrid(name, { x: origin.x, y: origin.y }, TEAM_WIDTH, TEAM_HEIGHT, obstacles);
+    }
+  }
+
+  /** Update project state data for rendering */
+  setProjectState(projectName, feature, stage, isDeploying) {
+    const data = this._projectData.get(projectName);
+    if (!data) return;
+    data.feature = feature || '';
+    data.stage = stage || 'idle';
+    data.isDeploying = isDeploying || false;
+  }
+
+  /** Start the deployer truck driving animation for a project */
+  startTruckAnimation(projectName) {
+    // Don't start if already running
+    if (this._trucks.has(projectName)) return;
+    const origin = this._teamOrigins.get(projectName);
+    if (!origin) return;
+
+    // Truck start position: center of deploy dock (in pixels, relative to team origin)
+    const dockX = STATIONS.deployDock.x * TILE + (STATIONS.deployDock.w * TILE) / 2 - 16;
+    const dockY = STATIONS.deployDock.y * TILE + 8;
+    // Warehouse entrance (right edge of conveyor / left edge of warehouse)
+    const warehouseX = STATIONS.warehouse.x * TILE - 4;
+
+    this._trucks.set(projectName, {
+      x: dockX,
+      y: dockY,
+      startX: dockX,
+      targetX: warehouseX,
+      phase: 'loading',
+      timer: 0,
+      featureName: this._projectData.get(projectName)?.feature || 'feature',
+      packageY: 0,       // for unloading animation
+      packageAlpha: 1,
+    });
+    this._exhaustParticles.set(projectName, []);
+  }
+
+  /** Check if a truck animation is active for a project */
+  hasTruckAnimation(projectName) {
+    return this._trucks.has(projectName);
+  }
+
+  /** Update all active truck animations */
+  _updateTrucks(dt) {
+    for (const [name, truck] of this._trucks) {
+      truck.timer += dt;
+      const particles = this._exhaustParticles.get(name) || [];
+
+      switch (truck.phase) {
+        case 'loading':
+          // Truck vibrates at dock for 2s
+          if (truck.timer >= 2) {
+            truck.phase = 'driving';
+            truck.timer = 0;
+          }
+          break;
+
+        case 'driving': {
+          // Drive from dock to warehouse entrance over 4s
+          const progress = Math.min(truck.timer / 4, 1);
+          // Ease-in-out for smooth movement
+          const eased = progress < 0.5
+            ? 2 * progress * progress
+            : 1 - Math.pow(-2 * progress + 2, 2) / 2;
+          truck.x = truck.startX + (truck.targetX - truck.startX) * eased;
+
+          // Spawn exhaust particles behind the truck (from the left/back side)
+          if (Math.random() < 0.4) {
+            particles.push({
+              x: truck.x - 4,
+              y: truck.y + 10 + (Math.random() - 0.5) * 6,
+              life: 0,
+              maxLife: 0.6 + Math.random() * 0.4,
+              vx: -8 - Math.random() * 6,
+              vy: -4 - Math.random() * 4,
+              size: 2 + Math.random() * 3,
+            });
+          }
+
+          if (truck.timer >= 4) {
+            truck.phase = 'unloading';
+            truck.timer = 0;
+            truck.x = truck.targetX;
+          }
+          break;
+        }
+
+        case 'unloading':
+          // Package slides off into warehouse over 2s
+          truck.packageY = Math.min(truck.timer / 1.5, 1) * 20;
+          truck.packageAlpha = Math.max(1 - truck.timer / 2, 0);
+          if (truck.timer >= 2) {
+            truck.phase = 'returning';
+            truck.timer = 0;
+          }
+          break;
+
+        case 'returning': {
+          // Drive back to dock over 3s
+          const retProgress = Math.min(truck.timer / 3, 1);
+          const retEased = retProgress < 0.5
+            ? 2 * retProgress * retProgress
+            : 1 - Math.pow(-2 * retProgress + 2, 2) / 2;
+          truck.x = truck.targetX + (truck.startX - truck.targetX) * retEased;
+
+          if (truck.timer >= 3) {
+            truck.phase = 'done';
+            truck.timer = 0;
+          }
+          break;
+        }
+
+        case 'done':
+          this._trucks.delete(name);
+          this._exhaustParticles.delete(name);
+          continue;
+      }
+
+      // Update exhaust particles
+      for (let i = particles.length - 1; i >= 0; i--) {
+        const p = particles[i];
+        p.life += dt;
+        p.x += p.vx * dt;
+        p.y += p.vy * dt;
+        p.vx *= 0.96;
+        p.vy *= 0.96;
+        if (p.life >= p.maxLife) {
+          particles.splice(i, 1);
+        }
+      }
+      this._exhaustParticles.set(name, particles);
+    }
+  }
+
+  /** Draw animated truck and effects for a project */
+  _drawAnimatedTruck(ctx, name, ox, oy) {
+    const truck = this._trucks.get(name);
+    if (!truck) return;
+
+    const tx = ox + truck.x;
+    const ty = ox !== undefined ? oy + truck.y : truck.y;
+
+    // Draw exhaust smoke particles (behind truck, so draw first)
+    const particles = this._exhaustParticles.get(name) || [];
+    for (const p of particles) {
+      const alpha = 0.5 * (1 - p.life / p.maxLife);
+      ctx.save();
+      ctx.globalAlpha = alpha;
+      ctx.fillStyle = '#888';
+      ctx.fillRect(ox + p.x, oy + p.y, p.size, p.size);
+      ctx.restore();
+    }
+
+    // Draw the truck at animated position
+    const vibrate = truck.phase === 'loading'
+      ? Math.sin(this._time * 20) * 1.5
+      : 0;
+    this._drawPixelTruck(ctx, tx + vibrate, ty, true, this._time);
+
+    // Draw unloading package
+    if (truck.phase === 'unloading') {
+      ctx.save();
+      ctx.globalAlpha = truck.packageAlpha;
+      // Small package box sliding right and down
+      const pkgX = tx + 24 + truck.packageY * 0.8;
+      const pkgY = ty + 4 + truck.packageY;
+      ctx.fillStyle = '#c8a050';
+      ctx.fillRect(pkgX, pkgY, 12, 10);
+      ctx.fillStyle = '#a88030';
+      ctx.fillRect(pkgX, pkgY, 12, 2);
+      ctx.fillRect(pkgX + 5, pkgY, 2, 10);
+      ctx.fillRect(pkgX, pkgY + 4, 12, 2);
+      ctx.restore();
+    }
+
+    // "VROOM" text while driving
+    if (truck.phase === 'driving') {
+      ctx.save();
+      ctx.globalAlpha = 0.7 + Math.sin(this._time * 5) * 0.3;
+      renderPixelText(ctx, 'VROOM!', tx + 10, ty - 6, '#ffcc00', 1);
+      ctx.restore();
+    }
+  }
+
+  /** Add a shipped package to the warehouse */
+  addShippedPackage(projectName, featureName) {
+    const data = this._projectData.get(projectName);
+    if (!data) return;
+    data.packages.push({
+      name: featureName,
+      time: Date.now(),
+    });
+    if (data.packages.length > 12) data.packages.shift(); // max 12 visible
+  }
+
+  getCharacterPositions(projectName) {
+    const origin = this._teamOrigins.get(projectName);
+    if (!origin) return {};
+    const o = origin;
+    return {
+      pm:       { x: o.x + (STATIONS.pmDesk.x + 1.5) * TILE,     y: o.y + (STATIONS.pmDesk.y + 2.2) * TILE },
+      arch:     { x: o.x + (STATIONS.whiteboard.x + 2.5) * TILE,  y: o.y + (STATIONS.whiteboard.y + 3.5) * TILE },
+      coder:    { x: o.x + (STATIONS.codingDesk.x + 3) * TILE,    y: o.y + (STATIONS.codingDesk.y + 2.5) * TILE },
+      deployer: { x: o.x + (STATIONS.deployDock.x + 2) * TILE,    y: o.y + (STATIONS.deployDock.y + 2.5) * TILE },
+    };
+  }
+
+  /** Get positions for idle activities */
+  getIdlePositions(projectName) {
+    const origin = this._teamOrigins.get(projectName);
+    if (!origin) return {};
+    const o = origin;
+    return {
+      breakRoom: { x: o.x + (STATIONS.breakRoom.x + 2) * TILE, y: o.y + (STATIONS.breakRoom.y + 2.5) * TILE },
+      gym:       { x: o.x + (STATIONS.gym.x + 2) * TILE,       y: o.y + (STATIONS.gym.y + 2.5) * TILE },
+      coffee:    { x: o.x + (STATIONS.coffee.x + 1) * TILE,     y: o.y + (STATIONS.coffee.y + 2.2) * TILE },
+      lounge1:   { x: o.x + (STATIONS.lounge1.x + 1.5) * TILE,  y: o.y + (STATIONS.lounge1.y + 1.5) * TILE },
+      lounge2:   { x: o.x + (STATIONS.lounge2.x + 1.5) * TILE,  y: o.y + (STATIONS.lounge2.y + 1.5) * TILE },
+    };
+  }
+
+  getWorkstation(projectName, role) {
+    const positions = this.getCharacterPositions(projectName);
+    return positions[role] || { x: 0, y: 0 };
+  }
+
+  render(ctx, dt) {
+    this._time += (dt || 0.016);
+    // Update per-project conveyor offset independently
+    for (const data of this._projectData.values()) {
+      if (data.isDeploying) {
+        data.conveyorOffset = (data.conveyorOffset + (dt || 0.016) * 30) % 8;
+        data.conveyorTime = (data.conveyorTime || 0) + (dt || 0.016);
+      }
+    }
+
+    // Update truck animations
+    this._updateTrucks(dt || 0.016);
+
+    for (const [name, origin] of this._teamOrigins) {
+      this._renderTeamZone(ctx, name, origin);
+    }
+  }
+
+  _renderTeamZone(ctx, name, origin) {
+    const ox = origin.x;
+    const oy = origin.y;
+    const w = TEAM_WIDTH * TILE;
+    const h = TEAM_HEIGHT * TILE;
+    const color = origin.config.color || '#4A90D9';
+    const data = this._projectData.get(name) || {};
+
+    // ── Floor ─────────────────────────────────────────────────
+    for (let ty = 0; ty < TEAM_HEIGHT; ty++) {
+      for (let tx = 0; tx < TEAM_WIDTH; tx++) {
+        const isLight = (tx + ty) % 2 === 0;
+        ctx.fillStyle = isLight ? PAL.floor1 : PAL.floor2;
+        ctx.fillRect(ox + tx * TILE, oy + ty * TILE, TILE, TILE);
+        ctx.strokeStyle = '#2e2e4e';
+        ctx.lineWidth = 0.5;
+        ctx.strokeRect(ox + tx * TILE, oy + ty * TILE, TILE, TILE);
+      }
+    }
+
+    // ── Room floors ───────────────────────────────────────────
+    // Break room floor
+    this._fillArea(ctx, ox, oy, STATIONS.breakRoom, PAL.breakFloor);
+    // Gym floor
+    this._fillArea(ctx, ox, oy, STATIONS.gym, PAL.gymFloor);
+    // Carpet under work area
+    this._drawCarpet(ctx, ox + 0.5 * TILE, oy + 5.5 * TILE, 7 * TILE, 3 * TILE);
+
+    // ── Walls ─────────────────────────────────────────────────
+    ctx.fillStyle = PAL.wallTop;
+    ctx.fillRect(ox, oy, w, TILE * 0.8);
+    ctx.fillStyle = PAL.wall;
+    ctx.fillRect(ox, oy + TILE * 0.8, w, TILE * 0.4);
+    ctx.fillStyle = PAL.wallDk;
+    ctx.fillRect(ox, oy + TILE * 1.2, w, 3);
+    ctx.fillStyle = PAL.wall;
+    ctx.fillRect(ox, oy, TILE * 0.4, h);
+    ctx.fillRect(ox + w - TILE * 0.4, oy, TILE * 0.4, h);
+    ctx.fillStyle = PAL.wallDk;
+    ctx.fillRect(ox + TILE * 0.4, oy, 2, h);
+    ctx.fillRect(ox + w - TILE * 0.4 - 2, oy, 2, h);
+    ctx.fillRect(ox, oy + h - 3, w, 3);
+
+    // ── Team banner ───────────────────────────────────────────
+    ctx.fillStyle = color;
+    ctx.fillRect(ox + TILE * 0.4, oy, w - TILE * 0.8, 22);
+    ctx.fillStyle = '#fff';
+    ctx.fillRect(ox + TILE * 0.4, oy + 21, w - TILE * 0.8, 1);
+    renderPixelText(ctx, name, ox + w / 2, oy + 6, '#fff', 2);
+
+    // ── Status Board (big LED-style) ──────────────────────────
+    this._drawStatusBoard(ctx, ox, oy, data);
+
+    // ── PM Desk ───────────────────────────────────────────────
+    this._drawPixelDesk(ctx,
+      ox + STATIONS.pmDesk.x * TILE, oy + STATIONS.pmDesk.y * TILE,
+      STATIONS.pmDesk.w * TILE, STATIONS.pmDesk.h * TILE);
+    this._drawPapers(ctx,
+      ox + (STATIONS.pmDesk.x + 0.5) * TILE, oy + (STATIONS.pmDesk.y + 0.3) * TILE);
+    // Phase 4: PM Desk Lamp
+    this._drawDeskLamp(ctx,
+      ox + (STATIONS.pmDesk.x + 2.2) * TILE, oy + (STATIONS.pmDesk.y + 0.1) * TILE,
+      data.stage, this._time);
+
+    // ── Whiteboard (shows current feature) ────────────────────
+    this._drawWhiteboardWithFeature(ctx,
+      ox + STATIONS.whiteboard.x * TILE, oy + STATIONS.whiteboard.y * TILE,
+      STATIONS.whiteboard.w * TILE, STATIONS.whiteboard.h * TILE,
+      data.feature, data.stage, this._time);
+
+    // ── Coffee ────────────────────────────────────────────────
+    this._drawCoffeeMachine(ctx, ox + STATIONS.coffee.x * TILE, oy + STATIONS.coffee.y * TILE);
+
+    // ── Coding Station ────────────────────────────────────────
+    this._drawCodingStation(ctx,
+      ox + STATIONS.codingDesk.x * TILE, oy + STATIONS.codingDesk.y * TILE,
+      STATIONS.codingDesk.w * TILE, STATIONS.codingDesk.h * TILE,
+      data.stage, this._time);
+
+    // ── Review Table ──────────────────────────────────────────
+    this._drawPixelDesk(ctx,
+      ox + STATIONS.reviewTable.x * TILE, oy + STATIONS.reviewTable.y * TILE,
+      STATIONS.reviewTable.w * TILE, STATIONS.reviewTable.h * TILE);
+    this._drawMagnifier(ctx,
+      ox + (STATIONS.reviewTable.x + 1) * TILE, oy + (STATIONS.reviewTable.y + 0.3) * TILE);
+    this._drawReviewTableAnim(ctx,
+      ox + STATIONS.reviewTable.x * TILE, oy + STATIONS.reviewTable.y * TILE,
+      STATIONS.reviewTable.w * TILE, STATIONS.reviewTable.h * TILE,
+      data.stage, this._time);
+
+    // ── Break Room ────────────────────────────────────────────
+    this._drawBreakRoom(ctx, ox + STATIONS.breakRoom.x * TILE, oy + STATIONS.breakRoom.y * TILE,
+      STATIONS.breakRoom.w * TILE, STATIONS.breakRoom.h * TILE);
+
+    // ── Gym ───────────────────────────────────────────────────
+    this._drawGym(ctx, ox + STATIONS.gym.x * TILE, oy + STATIONS.gym.y * TILE,
+      STATIONS.gym.w * TILE, STATIONS.gym.h * TILE);
+
+    // ── Deploy Dock ───────────────────────────────────────────
+    this._drawDeployDock(ctx,
+      ox + STATIONS.deployDock.x * TILE, oy + STATIONS.deployDock.y * TILE,
+      STATIONS.deployDock.w * TILE, STATIONS.deployDock.h * TILE,
+      data.stage, this._time, this._trucks.has(name));
+
+    // ── Conveyor Belt (animated) ──────────────────────────────
+    this._drawConveyorBelt(ctx,
+      ox + STATIONS.conveyor.x * TILE, oy + STATIONS.conveyor.y * TILE,
+      STATIONS.conveyor.w * TILE, STATIONS.conveyor.h * TILE,
+      data.isDeploying, data.conveyorOffset || 0, data.conveyorTime || 0);
+
+    // ── Warehouse ─────────────────────────────────────────────
+    this._drawWarehouse(ctx,
+      ox + STATIONS.warehouse.x * TILE, oy + STATIONS.warehouse.y * TILE,
+      STATIONS.warehouse.w * TILE, STATIONS.warehouse.h * TILE,
+      data.packages);
+
+    // ── Animated Deploy Truck ─────────────────────────────────
+    this._drawAnimatedTruck(ctx, name, ox, oy);
+
+    // ── Lounge areas (plants, benches) ────────────────────────
+    this._drawLounge(ctx, ox + STATIONS.lounge1.x * TILE, oy + STATIONS.lounge1.y * TILE);
+    this._drawLounge(ctx, ox + STATIONS.lounge2.x * TILE, oy + STATIONS.lounge2.y * TILE);
+
+    // ── Chairs ────────────────────────────────────────────────
+    this._drawChair(ctx, ox + (STATIONS.pmDesk.x + 1.5) * TILE, oy + (STATIONS.pmDesk.y + 1.8) * TILE);
+    this._drawChair(ctx, ox + (STATIONS.codingDesk.x + 1) * TILE, oy + (STATIONS.codingDesk.y + 1.8) * TILE);
+    this._drawChair(ctx, ox + (STATIONS.codingDesk.x + 3) * TILE, oy + (STATIONS.codingDesk.y + 1.8) * TILE);
+    this._drawChair(ctx, ox + (STATIONS.codingDesk.x + 5) * TILE, oy + (STATIONS.codingDesk.y + 1.8) * TILE);
+    this._drawChair(ctx, ox + (STATIONS.reviewTable.x + 1) * TILE, oy + (STATIONS.reviewTable.y + 1.8) * TILE);
+    this._drawChair(ctx, ox + (STATIONS.reviewTable.x + 2.5) * TILE, oy + (STATIONS.reviewTable.y + 1.8) * TILE);
+    this._drawChair(ctx, ox + (STATIONS.deployDock.x + 2) * TILE, oy + (STATIONS.deployDock.y + 1.8) * TILE);
+    this._drawChair(ctx, ox + (STATIONS.whiteboard.x + 2.5) * TILE, oy + (STATIONS.whiteboard.y + 3) * TILE);
+
+    // Room divider lines
+    ctx.fillStyle = PAL.wallDk;
+    // Between work and social
+    ctx.fillRect(ox + 11.5 * TILE, oy + 5.5 * TILE, 2, 4 * TILE);
+    // Between break room and gym
+    ctx.fillRect(ox + 16.5 * TILE, oy + 5.5 * TILE, 2, 3.5 * TILE);
+  }
+
+  // ── Helper ──────────────────────────────────────────────────
+
+  _fillArea(ctx, ox, oy, station, color) {
+    ctx.fillStyle = color;
+    ctx.fillRect(ox + station.x * TILE, oy + station.y * TILE, station.w * TILE, station.h * TILE);
+  }
+
+  // ── Status Board ────────────────────────────────────────────
+
+  _drawStatusBoard(ctx, ox, oy, data) {
+    const s = STATIONS.statusBoard;
+    const x = ox + s.x * TILE;
+    const y = oy + s.y * TILE;
+    const w = s.w * TILE;
+    const h = s.h * TILE;
+
+    // Board background
+    ctx.fillStyle = PAL.statusBg;
+    ctx.fillRect(x, y, w, h);
+    ctx.strokeStyle = '#3a5a3a';
+    ctx.lineWidth = 2;
+    ctx.strokeRect(x, y, w, h);
+
+    // Scanline effect
+    ctx.fillStyle = '#ffffff08';
+    for (let sy = 0; sy < h; sy += 3) {
+      ctx.fillRect(x, y + sy, w, 1);
+    }
+
+    // Title
+    renderPixelText(ctx, 'STATUS', x + w / 2, y + 4, '#40d060', 1);
+
+    // Status indicator
+    const stage = data.stage || 'idle';
+    const isWorking = stage && stage !== 'idle' && stage !== 'inbox' && stage !== '';
+    const statusColor = isWorking ? PAL.statusGreen : PAL.statusYellow;
+    const statusText = isWorking ? 'WORKING' : 'IDLE';
+
+    // Blinking dot
+    const blink = Math.sin(this._time * (isWorking ? 4 : 1.5)) > 0;
+    if (blink) {
+      ctx.fillStyle = statusColor;
+      ctx.fillRect(x + 6, y + 16, 6, 6);
+    }
+
+    renderPixelText(ctx, statusText, x + w / 2, y + 16, statusColor, 1);
+
+    // Current stage
+    const stageShort = stage.replace(/_/g, ' ').toUpperCase().slice(0, 18);
+    if (isWorking) {
+      renderPixelText(ctx, stageShort, x + w / 2, y + 28, '#80c0f0', 1);
+    }
+
+    // Feature name — use native canvas text for wider display
+    if (data.feature) {
+      const maxChars = Math.floor(w / 5);
+      const featLine1 = data.feature.slice(0, maxChars).toUpperCase();
+      ctx.fillStyle = '#e8d040';
+      ctx.font = 'bold 8px monospace';
+      ctx.textAlign = 'center';
+      ctx.fillText(featLine1, x + w / 2, y + 48);
+      // Second line if feature name is longer
+      if (data.feature.length > maxChars) {
+        const featLine2 = data.feature.slice(maxChars, maxChars * 2).toUpperCase();
+        ctx.fillStyle = '#c8b030';
+        ctx.fillText(featLine2, x + w / 2, y + 58);
+      }
+      // Short description below
+      ctx.fillStyle = '#708070';
+      ctx.font = '7px monospace';
+      ctx.fillText(stage.replace(/_/g, ' '), x + w / 2, y + 68);
+      ctx.textAlign = 'start';
+    }
+
+    // Shipped count
+    const shipped = (data.packages || []).length;
+    renderPixelText(ctx, `SHIPPED:${shipped}`, x + w / 2, y + h - 12, '#808080', 1);
+  }
+
+  // ── Whiteboard with Feature ─────────────────────────────────
+
+  _drawWhiteboardWithFeature(ctx, x, y, w, h, feature, stage = '', t = 0) {
+    // Frame
+    ctx.fillStyle = PAL.wbFrame;
+    ctx.fillRect(x + 2, y, w - 4, 3);
+    ctx.fillRect(x + 2, y + h - 10, w - 4, 3);
+    ctx.fillRect(x + 2, y, 3, h - 8);
+    ctx.fillRect(x + w - 5, y, 3, h - 8);
+
+    // White surface
+    ctx.fillStyle = PAL.wbBg;
+    ctx.fillRect(x + 5, y + 3, w - 10, h - 14);
+
+    // Title area
+    ctx.fillStyle = '#4060b0';
+    ctx.fillRect(x + 8, y + 6, w - 16, 12);
+    renderPixelText(ctx, 'ARCHITECTURE', x + w / 2, y + 8, '#fff', 1);
+
+    // Feature name (if any)
+    if (feature) {
+      const lines = feature.toUpperCase().match(/.{1,16}/g) || [];
+      for (let i = 0; i < Math.min(lines.length, 3); i++) {
+        renderPixelText(ctx, lines[i], x + w / 2, y + 22 + i * 10, '#d04040', 1);
+      }
+    }
+
+    // Diagrams
+    ctx.fillStyle = '#4060b0';
+    ctx.fillRect(x + 10, y + 52, 16, 10);
+    ctx.fillStyle = '#e8e8d8';
+    ctx.fillRect(x + 12, y + 54, 12, 6);
+    ctx.fillStyle = '#d04040';
+    ctx.fillRect(x + 34, y + 52, 16, 10);
+    ctx.fillStyle = '#e8e8d8';
+    ctx.fillRect(x + 36, y + 54, 12, 6);
+    // Arrow
+    ctx.fillStyle = '#4060b0';
+    ctx.fillRect(x + 26, y + 56, 8, 2);
+    ctx.fillRect(x + 32, y + 54, 2, 6);
+
+    // Marker tray
+    ctx.fillStyle = PAL.wbFrame;
+    ctx.fillRect(x + 8, y + h - 8, w - 16, 4);
+    ctx.fillStyle = '#d04040';
+    ctx.fillRect(x + 12, y + h - 10, 3, 6);
+    ctx.fillStyle = '#4060b0';
+    ctx.fillRect(x + 18, y + h - 10, 3, 6);
+    ctx.fillStyle = '#40a040';
+    ctx.fillRect(x + 24, y + h - 10, 3, 6);
+
+    // Phase 5: Animated diagram drawing when architect is designing
+    if (stage === 'architecture' || stage === 'arch_complete') {
+      const boardX = x + 8;
+      const boardY = y + 38;
+      const boardW = w - 16;
+      const boardH = h - 52;
+
+      // Clear diagram area for animated content
+      ctx.fillStyle = PAL.wbBg;
+      ctx.fillRect(boardX, boardY, boardW, 38);
+
+      // Cycle through diagram layouts every ~8 seconds
+      const layoutPhase = Math.floor(t % 8);
+      const cycleT = t % 8;  // time within current cycle
+
+      // Marker colors cycling
+      const markerColors = ['#4060b0', '#d04040', '#40a040'];
+      const activeMarker = markerColors[Math.floor(t) % 3];
+
+      // --- Diagram layout definitions ---
+      const layouts = [
+        // Layout 0-2: Three boxes in a row with arrows
+        () => {
+          const boxes = [
+            { bx: boardX + 4,  by: boardY + 8,  bw: 22, bh: 12, label: 'API' },
+            { bx: boardX + 38, by: boardY + 8,  bw: 22, bh: 12, label: 'SVC' },
+            { bx: boardX + 72, by: boardY + 8,  bw: 22, bh: 12, label: 'DB' },
+          ];
+          const progress = Math.min(cycleT / 2, 1); // grow over 2 seconds
+          for (let bi = 0; bi < boxes.length; bi++) {
+            const b = boxes[bi];
+            const drawW = Math.floor(b.bw * progress);
+            const drawH = Math.floor(b.bh * progress);
+            if (drawW > 2 && drawH > 2) {
+              ctx.strokeStyle = markerColors[bi % 3];
+              ctx.lineWidth = 1;
+              ctx.strokeRect(b.bx, b.by, drawW, drawH);
+              if (progress > 0.6) {
+                ctx.fillStyle = markerColors[bi % 3];
+                ctx.font = 'bold 5px monospace';
+                ctx.textAlign = 'center';
+                ctx.fillText(b.label, b.bx + b.bw / 2, b.by + b.bh / 2 + 2);
+                ctx.textAlign = 'start';
+              }
+            }
+          }
+          // Connection arrows (appear after boxes)
+          if (cycleT > 1.5) {
+            const arrowProg = Math.min((cycleT - 1.5) / 1, 1);
+            const arrowLen = Math.floor(12 * arrowProg);
+            ctx.fillStyle = activeMarker;
+            ctx.fillRect(boardX + 26, boardY + 13, arrowLen, 2);
+            if (arrowLen > 4) { ctx.fillRect(boardX + 26 + arrowLen - 2, boardY + 11, 2, 6); }
+            ctx.fillRect(boardX + 60, boardY + 13, arrowLen, 2);
+            if (arrowLen > 4) { ctx.fillRect(boardX + 60 + arrowLen - 2, boardY + 11, 2, 6); }
+          }
+        },
+        // Layout 3-5: Vertical flow chart
+        () => {
+          const boxes = [
+            { bx: boardX + 30, by: boardY + 2,  bw: 30, bh: 10, label: 'INPUT' },
+            { bx: boardX + 30, by: boardY + 18, bw: 30, bh: 10, label: 'PROC' },
+            { bx: boardX + 30, by: boardY + 34, bw: 30, bh: 10, label: 'OUT' },
+          ];
+          const progress = Math.min(cycleT / 2, 1);
+          for (let bi = 0; bi < boxes.length; bi++) {
+            const b = boxes[bi];
+            const drawW = Math.floor(b.bw * progress);
+            if (drawW > 2) {
+              ctx.strokeStyle = markerColors[bi % 3];
+              ctx.lineWidth = 1;
+              ctx.strokeRect(b.bx, b.by, drawW, b.bh);
+              if (progress > 0.5) {
+                ctx.fillStyle = markerColors[bi % 3];
+                ctx.font = 'bold 5px monospace';
+                ctx.textAlign = 'center';
+                ctx.fillText(b.label, b.bx + b.bw / 2, b.by + 7);
+                ctx.textAlign = 'start';
+              }
+            }
+          }
+          // Vertical arrows
+          if (cycleT > 1.5) {
+            ctx.fillStyle = activeMarker;
+            ctx.fillRect(boardX + 44, boardY + 12, 2, 6);
+            ctx.fillRect(boardX + 42, boardY + 16, 6, 2);
+            ctx.fillRect(boardX + 44, boardY + 28, 2, 6);
+            ctx.fillRect(boardX + 42, boardY + 32, 6, 2);
+          }
+        },
+        // Layout 6-7: Diamond decision + branches
+        () => {
+          const progress = Math.min(cycleT / 2, 1);
+          // Diamond (decision)
+          const cx = boardX + boardW / 2;
+          const cy = boardY + 12;
+          const ds = Math.floor(8 * progress);
+          if (ds > 2) {
+            ctx.strokeStyle = '#d04040';
+            ctx.lineWidth = 1;
+            ctx.beginPath();
+            ctx.moveTo(cx, cy - ds);
+            ctx.lineTo(cx + ds, cy);
+            ctx.lineTo(cx, cy + ds);
+            ctx.lineTo(cx - ds, cy);
+            ctx.closePath();
+            ctx.stroke();
+            if (progress > 0.5) {
+              ctx.fillStyle = '#d04040';
+              ctx.font = 'bold 5px monospace';
+              ctx.textAlign = 'center';
+              ctx.fillText('?', cx, cy + 2);
+              ctx.textAlign = 'start';
+            }
+          }
+          // Branch boxes
+          if (cycleT > 1.5) {
+            const brProg = Math.min((cycleT - 1.5) / 1.5, 1);
+            const brW = Math.floor(20 * brProg);
+            ctx.strokeStyle = '#4060b0';
+            ctx.lineWidth = 1;
+            if (brW > 4) {
+              ctx.strokeRect(boardX + 8, boardY + 28, brW, 8);
+              ctx.strokeRect(boardX + boardW - 8 - brW, boardY + 28, brW, 8);
+              ctx.fillStyle = '#4060b0';
+              ctx.font = 'bold 5px monospace';
+              ctx.textAlign = 'center';
+              ctx.fillText('Y', boardX + 18, boardY + 34);
+              ctx.fillText('N', boardX + boardW - 18, boardY + 34);
+              ctx.textAlign = 'start';
+            }
+            // Branch lines
+            ctx.fillStyle = '#40a040';
+            ctx.fillRect(cx - 12, cy + 8, 2, Math.floor(12 * brProg));
+            ctx.fillRect(cx + 10, cy + 8, 2, Math.floor(12 * brProg));
+          }
+        },
+      ];
+
+      // Select layout based on phase (cycle through 3 layouts in 8-second windows)
+      const layoutIdx = Math.floor((t / 8) % layouts.length);
+      layouts[layoutIdx]();
+
+      // "Drawing hand" cursor moving across the board
+      const handX = boardX + 4 + ((t * 18) % (boardW - 8));
+      const handY = boardY + 4 + Math.sin(t * 5) * 6 + 12;
+      ctx.fillStyle = activeMarker;
+      ctx.fillRect(handX, handY, 3, 3);
+      ctx.fillRect(handX + 1, handY + 3, 2, 2);
+
+      // Glowing border around whiteboard
+      ctx.save();
+      ctx.globalAlpha = 0.25 + Math.sin(t * 2) * 0.15;
+      ctx.fillStyle = '#60c060';
+      ctx.fillRect(x + 3, y + 1, w - 6, 2);
+      ctx.fillRect(x + 3, y + h - 12, w - 6, 2);
+      ctx.restore();
+    }
+  }
+
+  // ── Break Room ──────────────────────────────────────────────
+
+  _drawBreakRoom(ctx, x, y, w, h) {
+    // Room label
+    renderPixelText(ctx, 'BREAK ROOM', x + w / 2, y + 2, '#a08060', 1);
+
+    // Table
+    ctx.fillStyle = PAL.breakTable;
+    ctx.fillRect(x + w / 2 - 16, y + 16, 32, 20);
+    ctx.fillStyle = '#5a4020';
+    ctx.strokeStyle = '#4a3018';
+    ctx.lineWidth = 1;
+    ctx.strokeRect(x + w / 2 - 16, y + 16, 32, 20);
+
+    // Plates
+    ctx.fillStyle = '#e0e0d8';
+    ctx.beginPath();
+    ctx.arc(x + w / 2 - 6, y + 26, 4, 0, Math.PI * 2);
+    ctx.fill();
+    ctx.beginPath();
+    ctx.arc(x + w / 2 + 6, y + 26, 4, 0, Math.PI * 2);
+    ctx.fill();
+
+    // Food items
+    ctx.fillStyle = '#d04040'; // apple
+    ctx.fillRect(x + w / 2 - 8, y + 24, 4, 4);
+    ctx.fillStyle = '#e8d040'; // sandwich
+    ctx.fillRect(x + w / 2 + 4, y + 24, 6, 3);
+
+    // Chairs around table
+    this._drawChair(ctx, x + w / 2 - 20, y + 24);
+    this._drawChair(ctx, x + w / 2 + 20, y + 24);
+    this._drawChair(ctx, x + w / 2, y + 42);
+
+    // Vending machine
+    ctx.fillStyle = '#505060';
+    ctx.fillRect(x + 4, y + 10, 16, 24);
+    ctx.fillStyle = '#404050';
+    ctx.fillRect(x + 6, y + 12, 12, 18);
+    // Drinks
+    ctx.fillStyle = '#d04040';
+    ctx.fillRect(x + 8, y + 14, 3, 5);
+    ctx.fillStyle = '#4080d0';
+    ctx.fillRect(x + 12, y + 14, 3, 5);
+    ctx.fillStyle = '#40b060';
+    ctx.fillRect(x + 8, y + 21, 3, 5);
+    ctx.fillStyle = '#e8d040';
+    ctx.fillRect(x + 12, y + 21, 3, 5);
+
+    // Microwave
+    ctx.fillStyle = '#606068';
+    ctx.fillRect(x + w - 20, y + 10, 16, 12);
+    ctx.fillStyle = '#1a1a2a';
+    ctx.fillRect(x + w - 18, y + 12, 10, 8);
+    // Button
+    ctx.fillStyle = '#40d060';
+    ctx.fillRect(x + w - 6, y + 14, 2, 2);
+  }
+
+  // ── Gym ─────────────────────────────────────────────────────
+
+  _drawGym(ctx, x, y, w, h) {
+    // Room label
+    renderPixelText(ctx, 'GYM', x + w / 2, y + 2, '#6080a0', 1);
+
+    // Yoga mat
+    ctx.fillStyle = PAL.gymMat;
+    ctx.fillRect(x + 8, y + 14, 24, 12);
+    ctx.fillStyle = '#3858b0';
+    ctx.fillRect(x + 10, y + 16, 20, 8);
+
+    // Treadmill
+    ctx.fillStyle = '#505058';
+    ctx.fillRect(x + 40, y + 12, 20, 26);
+    ctx.fillStyle = '#404048';
+    ctx.fillRect(x + 42, y + 14, 16, 20);
+    // Running belt
+    ctx.fillStyle = '#353540';
+    ctx.fillRect(x + 44, y + 24, 12, 8);
+    // Handles
+    ctx.fillStyle = '#707078';
+    ctx.fillRect(x + 44, y + 14, 2, 10);
+    ctx.fillRect(x + 56, y + 14, 2, 10);
+    // Display
+    ctx.fillStyle = '#40d060';
+    ctx.fillRect(x + 48, y + 16, 6, 4);
+
+    // Dumbbells
+    ctx.fillStyle = '#505058';
+    ctx.fillRect(x + 70, y + 30, 16, 4);
+    ctx.fillStyle = '#404048';
+    ctx.fillRect(x + 68, y + 28, 4, 8);
+    ctx.fillRect(x + 84, y + 28, 4, 8);
+
+    // Weight rack
+    ctx.fillStyle = '#404048';
+    ctx.fillRect(x + 68, y + 12, 22, 14);
+    ctx.fillStyle = '#505058';
+    for (let i = 0; i < 3; i++) {
+      ctx.fillRect(x + 70 + i * 7, y + 14, 5, 10);
+    }
+
+    // Water cooler
+    ctx.fillStyle = '#a0d0e0';
+    ctx.fillRect(x + w - 14, y + 14, 8, 14);
+    ctx.fillStyle = '#80b0c8';
+    ctx.fillRect(x + w - 12, y + 16, 4, 8);
+  }
+
+  // ── Conveyor Belt (animated) ────────────────────────────────
+
+  _drawConveyorBelt(ctx, x, y, w, h, isDeploying, conveyorOffset, conveyorTime) {
+    // Belt base
+    ctx.fillStyle = PAL.convBelt;
+    ctx.fillRect(x, y + 4, w, h - 8);
+
+    // Rollers (animated per-project)
+    ctx.fillStyle = PAL.convRoller;
+    const offset = Math.floor(conveyorOffset);
+    for (let rx = offset; rx < w; rx += 8) {
+      ctx.fillRect(x + rx, y + 6, 4, h - 12);
+    }
+
+    // Belt edges
+    ctx.fillStyle = '#808088';
+    ctx.fillRect(x, y + 4, w, 2);
+    ctx.fillRect(x, y + h - 6, w, 2);
+
+    // Moving package on belt when deploying
+    if (isDeploying) {
+      const pkgX = x + (conveyorTime * 40 % w);
+      this._drawMiniPackage(ctx, pkgX, y + h / 2 - 4);
+    }
+
+    // Direction arrows
+    ctx.fillStyle = '#ffffff30';
+    for (let ax = 0; ax < w - 10; ax += 20) {
+      const axx = x + ax + (conveyorOffset * 2 % 20);
+      ctx.fillRect(axx + 4, y + h / 2 - 1, 6, 2);
+      ctx.fillRect(axx + 8, y + h / 2 - 3, 2, 6);
+    }
+  }
+
+  // ── Warehouse ───────────────────────────────────────────────
+
+  _drawWarehouse(ctx, x, y, w, h, packages) {
+    // Warehouse floor
+    ctx.fillStyle = PAL.whGrayDk;
+    ctx.fillRect(x, y, w, h);
+
+    // Floor markings (grid)
+    ctx.strokeStyle = '#5a5a5a';
+    ctx.lineWidth = 0.5;
+    for (let gx = 0; gx < w; gx += TILE) {
+      ctx.beginPath();
+      ctx.moveTo(x + gx, y);
+      ctx.lineTo(x + gx, y + h);
+      ctx.stroke();
+    }
+    for (let gy = 0; gy < h; gy += TILE) {
+      ctx.beginPath();
+      ctx.moveTo(x, y + gy);
+      ctx.lineTo(x + w, y + gy);
+      ctx.stroke();
+    }
+
+    // Warehouse walls (back and sides)
+    ctx.fillStyle = PAL.whGray;
+    ctx.fillRect(x, y, w, 6);
+    ctx.fillRect(x, y, 4, h);
+    ctx.fillRect(x + w - 4, y, 4, h);
+
+    // Sign
+    ctx.fillStyle = '#1a2a3a';
+    ctx.fillRect(x + w / 2 - 30, y - 4, 60, 12);
+    renderPixelText(ctx, 'WAREHOUSE', x + w / 2, y - 2, '#e8d040', 1);
+
+    // Shelving units (3 rows)
+    for (let row = 0; row < 3; row++) {
+      const sy = y + 14 + row * (TILE + 14);
+      // Shelf
+      ctx.fillStyle = '#6a6a72';
+      ctx.fillRect(x + 8, sy, w - 16, 4);
+      ctx.fillStyle = '#5a5a62';
+      ctx.fillRect(x + 8, sy + 4, w - 16, 2);
+      // Shelf supports
+      ctx.fillStyle = '#505058';
+      ctx.fillRect(x + 10, sy, 3, TILE + 8);
+      ctx.fillRect(x + w - 14, sy, 3, TILE + 8);
+      ctx.fillRect(x + w / 2, sy, 3, TILE + 8);
+    }
+
+    // Draw shipped packages on shelves
+    if (packages && packages.length > 0) {
+      for (let i = 0; i < packages.length; i++) {
+        const pkg = packages[i];
+        const row = Math.floor(i / 4);
+        const col = i % 4;
+        if (row >= 3) break;
+
+        const px = x + 18 + col * ((w - 36) / 4);
+        const py = y + 14 + row * (TILE + 14) - 14;
+        this._drawShippedPackage(ctx, px, py, pkg.name);
+      }
+    }
+
+    // Forklift (static decoration)
+    ctx.fillStyle = '#e8a020';
+    ctx.fillRect(x + w - 40, y + h - 24, 16, 10);
+    ctx.fillStyle = '#c88010';
+    ctx.fillRect(x + w - 38, y + h - 22, 12, 6);
+    // Forks
+    ctx.fillStyle = '#808088';
+    ctx.fillRect(x + w - 44, y + h - 18, 6, 2);
+    ctx.fillRect(x + w - 44, y + h - 14, 6, 2);
+    // Wheels
+    ctx.fillStyle = '#333';
+    ctx.fillRect(x + w - 40, y + h - 14, 5, 4);
+    ctx.fillRect(x + w - 28, y + h - 14, 5, 4);
+  }
+
+  _drawShippedPackage(ctx, x, y, name) {
+    // Package box
+    ctx.fillStyle = PAL.pkgTan;
+    ctx.fillRect(x, y, 20, 14);
+    // Outline
+    ctx.fillStyle = PAL.pkgTan2;
+    ctx.fillRect(x, y, 20, 2);
+    ctx.fillRect(x, y, 2, 14);
+    ctx.fillRect(x + 18, y, 2, 14);
+    ctx.fillRect(x, y + 12, 20, 2);
+    // Cross tape
+    ctx.fillStyle = PAL.pkgTan2;
+    ctx.fillRect(x + 9, y, 2, 14);
+    ctx.fillRect(x, y + 6, 20, 2);
+    // Checkmark (shipped!)
+    ctx.fillStyle = '#40d060';
+    ctx.fillRect(x + 14, y + 2, 2, 2);
+    ctx.fillRect(x + 16, y + 1, 2, 2);
+    ctx.fillRect(x + 12, y + 3, 2, 2);
+  }
+
+  _drawMiniPackage(ctx, x, y) {
+    ctx.fillStyle = PAL.pkgTan;
+    ctx.fillRect(x, y, 12, 8);
+    ctx.fillStyle = PAL.pkgTan2;
+    ctx.fillRect(x + 5, y, 2, 8);
+    ctx.fillRect(x, y + 3, 12, 2);
+  }
+
+  // ── Lounge ──────────────────────────────────────────────────
+
+  _drawLounge(ctx, x, y) {
+    // Bench
+    ctx.fillStyle = '#5a4a3a';
+    ctx.fillRect(x + 4, y + 10, 28, 10);
+    ctx.fillStyle = '#4a3a2a';
+    ctx.fillRect(x + 6, y + 8, 24, 4);
+    // Cushions
+    ctx.fillStyle = '#6a4060';
+    ctx.fillRect(x + 8, y + 12, 10, 6);
+    ctx.fillStyle = '#4060a0';
+    ctx.fillRect(x + 20, y + 12, 10, 6);
+
+    // Plant
+    ctx.fillStyle = '#6a4030';
+    ctx.fillRect(x + 38, y + 20, 8, 12);
+    ctx.fillStyle = '#306028';
+    ctx.beginPath();
+    ctx.arc(x + 42, y + 16, 10, 0, Math.PI * 2);
+    ctx.fill();
+    ctx.fillStyle = '#408030';
+    ctx.beginPath();
+    ctx.arc(x + 40, y + 14, 6, 0, Math.PI * 2);
+    ctx.fill();
+  }
+
+  // ── Existing drawing methods (updated) ──────────────────────
+
+  _drawCarpet(ctx, x, y, w, h) {
+    ctx.fillStyle = PAL.carpet;
+    ctx.fillRect(x, y, w, h);
+    ctx.fillStyle = '#3a2a52';
+    for (let py = 0; py < h; py += 8) {
+      for (let px = 0; px < w; px += 8) {
+        if ((px / 8 + py / 8) % 2 === 0) {
+          ctx.fillRect(x + px, y + py, 4, 4);
+        }
+      }
+    }
+  }
+
+  _drawPixelDesk(ctx, x, y, w, h) {
+    ctx.fillStyle = PAL.shadow;
+    ctx.fillRect(x + 4, y + h - 2, w - 4, 4);
+    ctx.fillStyle = PAL.deskLt;
+    ctx.fillRect(x + 2, y + 2, w - 4, h - 8);
+    ctx.fillStyle = PAL.deskDk;
+    ctx.fillRect(x + 2, y + 2, w - 4, 2);
+    ctx.fillRect(x + 2, y + h - 8, w - 4, 2);
+    ctx.fillRect(x + 2, y + 2, 2, h - 8);
+    ctx.fillRect(x + w - 4, y + 2, 2, h - 8);
+    ctx.fillStyle = PAL.desk;
+    ctx.fillRect(x + 2, y + h - 6, w - 4, 6);
+    ctx.fillStyle = PAL.deskDk;
+    ctx.fillRect(x + 4, y + h, 3, 4);
+    ctx.fillRect(x + w - 7, y + h, 3, 4);
+  }
+
+  _drawPapers(ctx, x, y) {
+    ctx.fillStyle = '#f0f0e8';
+    ctx.fillRect(x, y, 14, 18);
+    ctx.fillStyle = '#e0e0d8';
+    ctx.fillRect(x + 2, y + 2, 14, 18);
+    ctx.fillStyle = '#bbb';
+    for (let i = 0; i < 4; i++) {
+      ctx.fillRect(x + 4, y + 6 + i * 4, 10, 1);
+    }
+    ctx.fillStyle = '#3050a0';
+    ctx.fillRect(x + 16, y + 4, 2, 12);
+    ctx.fillStyle = '#2040a0';
+    ctx.fillRect(x + 16, y + 14, 2, 4);
+  }
+
+  _drawMagnifier(ctx, x, y) {
+    ctx.strokeStyle = '#888';
+    ctx.lineWidth = 2;
+    ctx.beginPath();
+    ctx.arc(x + 8, y + 8, 6, 0, Math.PI * 2);
+    ctx.stroke();
+    ctx.fillStyle = '#c0e0ff80';
+    ctx.beginPath();
+    ctx.arc(x + 8, y + 8, 5, 0, Math.PI * 2);
+    ctx.fill();
+    ctx.fillStyle = '#6a5040';
+    ctx.fillRect(x + 12, y + 12, 3, 8);
+  }
+
+  _drawCodingStation(ctx, x, y, w, h, stage = '', t = 0) {
+    this._drawPixelDesk(ctx, x, y, w, h);
+    const monW = 30, monH = 22, gap = 8;
+    const totalMonW = monW * 3 + gap * 2;
+    const startX = x + (w - totalMonW) / 2;
+
+    // Determine monitor mode from stage
+    const isCoding   = ['implementation', 'implementation_complete'].includes(stage);
+    const isReview   = ['review', 'review_complete'].includes(stage);
+    const isRejected = stage === 'rejected';
+    const isIdle     = !stage || stage === '' || stage === 'inbox';
+
+    // Phase 6: Pseudo-code lines for realistic code scrolling
+    // Each line: [indentLevel, type] where type determines color
+    // Types: 'kw' = keyword, 'str' = string, 'cmt' = comment, 'num' = number, 'code' = normal
+    const CODE_LINES = [
+      [0, 'kw',  10], [0, 'code', 14], [1, 'str',  12], [1, 'code', 8],
+      [2, 'kw',   6], [2, 'num',  10], [2, 'code', 14], [1, 'code', 9],
+      [0, 'cmt', 16], [0, 'kw',   8], [1, 'code', 12], [1, 'str',  10],
+      [2, 'kw',   7], [2, 'num',   5], [3, 'code', 11], [3, 'str',  13],
+      [2, 'code', 9], [1, 'kw',   8], [0, 'code', 15], [0, 'cmt', 18],
+      [0, 'kw',  11], [1, 'code',  7], [1, 'num',   6], [2, 'str', 14],
+    ];
+    const SYNTAX_COLORS = {
+      kw:   '#4080d0', // keywords in blue
+      str:  '#40a050', // strings in green
+      cmt:  '#606060', // comments in gray
+      num:  '#d08030', // numbers in orange
+      code: '#c0c0d0', // normal code
+    };
+
+    // Terminal output lines (green on black)
+    const TERM_LINES = [
+      [0, 8], [0, 14], [0, 10], [0, 6], [0, 16], [0, 12],
+      [0, 9], [0, 11], [0, 7], [0, 15], [0, 13], [0, 5],
+    ];
+
+    // Compile error flash: brief red flash every ~20s for 0.3s
+    const errorCycleT = t % 20;
+    const isErrorFlash = isCoding && errorCycleT > 19.7;
+
+    for (let i = 0; i < 3; i++) {
+      const mx = startX + i * (monW + gap);
+      const my = y - 4;
+      const screenX = mx + 2;
+      const screenY = my + 2;
+      const screenW = monW - 4;
+      const screenH = monH - 6;
+
+      // Monitor bezel
+      ctx.fillStyle = PAL.monitor;
+      ctx.fillRect(mx, my, monW, monH);
+
+      // Screen background
+      if (isIdle) {
+        ctx.fillStyle = '#050d15';
+      } else if (isRejected || isErrorFlash) {
+        ctx.fillStyle = '#1a0808';
+      } else if (isReview) {
+        ctx.fillStyle = '#081418';
+      } else if (i === 2 && isCoding) {
+        ctx.fillStyle = '#0a0a0a'; // terminal: pure black
+      } else {
+        ctx.fillStyle = '#0a1a2a';
+      }
+      ctx.fillRect(screenX, screenY, screenW, screenH);
+
+      if (!isIdle) {
+        ctx.save();
+        ctx.beginPath();
+        ctx.rect(screenX, screenY, screenW, screenH);
+        ctx.clip();
+
+        if (isCoding) {
+          // ── Phase 6: Realistic code / terminal scrolling ──
+          const isTerminal = (i === 2); // third monitor is terminal
+          const lineH = 3; // pixel height per code line
+          const maxVisibleLines = Math.floor(screenH / lineH);
+          const scrollOffset = (t * 6 + i * 7) % (CODE_LINES.length * lineH);
+          const lines = isTerminal ? TERM_LINES : CODE_LINES;
+
+          for (let ln = 0; ln < maxVisibleLines + 2; ln++) {
+            const lineIdx = (ln + Math.floor(scrollOffset / lineH)) % lines.length;
+            const lineData = lines[lineIdx];
+            const indentPx = isTerminal ? 1 : lineData[0] * 2; // indent in pixels
+            const lineY = screenY + ln * lineH - (scrollOffset % lineH);
+
+            if (lineY < screenY - lineH || lineY > screenY + screenH) continue;
+
+            if (isTerminal) {
+              // Terminal: green on black
+              ctx.fillStyle = '#30d050';
+              ctx.fillRect(screenX + 1, lineY, lineData[1], 2);
+            } else {
+              // Code: syntax colored
+              const type = lineData[1];
+              const lineW = lineData[2];
+              ctx.fillStyle = (isErrorFlash) ? '#ff4040' : SYNTAX_COLORS[type];
+              ctx.fillRect(screenX + 2 + indentPx, lineY, Math.min(lineW, screenW - 4 - indentPx), 2);
+            }
+          }
+
+          // Blinking cursor at end of current line
+          if (Math.sin(t * 4 + i) > 0) {
+            const cursorLine = Math.floor(maxVisibleLines * 0.7);
+            const cursorLineIdx = (cursorLine + Math.floor(scrollOffset / lineH)) % lines.length;
+            const cLineData = lines[cursorLineIdx];
+            const cIndent = isTerminal ? 1 : cLineData[0] * 2;
+            const cLineW = isTerminal ? cLineData[1] : cLineData[2];
+            ctx.fillStyle = isTerminal ? '#30ff50' : '#40ff80';
+            ctx.fillRect(screenX + 2 + cIndent + cLineW + 1, screenY + cursorLine * lineH, 1, 2);
+          }
+
+          // Scrollbar on right side
+          ctx.fillStyle = '#303040';
+          ctx.fillRect(screenX + screenW - 2, screenY, 2, screenH);
+          const scrollFrac = (scrollOffset / (lines.length * lineH));
+          const thumbH = Math.max(3, Math.floor(screenH * 0.3));
+          ctx.fillStyle = '#606080';
+          ctx.fillRect(screenX + screenW - 2, screenY + scrollFrac * (screenH - thumbH), 2, thumbH);
+
+        } else {
+          // Non-coding states (review, rejected) — keep original simple rendering
+          const lineColors = isRejected
+            ? ['#ff4040', '#ff8040', '#ff4060', '#e04040']
+            : ['#40e0d0', '#40b0ff', '#80e0e0', '#40a8f0'];
+          const LINE_WIDTHS = [14, 8, 12, 6, 10, 16, 7, 13, 9, 15, 11, 6];
+
+          for (let ln = 0; ln < 4; ln++) {
+            ctx.fillStyle = lineColors[(i * 4 + ln) % lineColors.length];
+            const lineW = LINE_WIDTHS[(i * 4 + ln) % LINE_WIDTHS.length];
+            ctx.fillRect(mx + 4, my + 4 + ln * 4, lineW, 2);
+          }
+        }
+
+        ctx.restore();
+
+        // Glow effect on active monitors
+        ctx.save();
+        if (isErrorFlash) {
+          ctx.globalAlpha = 0.3;
+          ctx.fillStyle = '#ff4040';
+        } else {
+          ctx.globalAlpha = 0.15 + Math.sin(t * 2 + i) * 0.08;
+          ctx.fillStyle = isRejected ? '#ff4040' : isReview ? '#40d0d0' : '#40a8f0';
+        }
+        ctx.fillRect(mx - 2, my - 2, monW + 4, monH + 4);
+        ctx.restore();
+      }
+
+      // Monitor stand
+      ctx.fillStyle = '#444';
+      ctx.fillRect(mx + monW / 2 - 3, my + monH, 6, 3);
+      ctx.fillRect(mx + monW / 2 - 6, my + monH + 3, 12, 2);
+    }
+
+    // Keyboard lightning spark when coding
+    if (isCoding && Math.sin(t * 6) > 0.7) {
+      ctx.fillStyle = '#60d0ff';
+      ctx.fillRect(x + w / 2 - 2 + Math.floor(t * 5) % 6, y + h - 8, 2, 4);
+    }
+
+    ctx.fillStyle = '#505058';
+    ctx.fillRect(x + w / 2 - 20, y + h - 6, 40, 8);
+    ctx.fillStyle = '#606068';
+    for (let kx = 0; kx < 9; kx++) {
+      for (let ky = 0; ky < 2; ky++) {
+        ctx.fillRect(x + w / 2 - 18 + kx * 4, y + h - 5 + ky * 4, 3, 3);
+      }
+    }
+  }
+
+  _drawReviewTableAnim(ctx, x, y, w, h, stage = '', t = 0) {
+    if (stage !== 'review') return;
+    // Pulsing glow around review table
+    ctx.save();
+    ctx.globalAlpha = 0.18 + Math.sin(t * 3) * 0.1;
+    ctx.fillStyle = '#e0d040';
+    ctx.fillRect(x - 2, y - 2, w + 4, h + 4);
+    ctx.restore();
+    // Animated magnifier movement
+    const mx = x + w / 2 + Math.sin(t * 2) * 8;
+    const my = y + 4 + Math.cos(t * 1.5) * 3;
+    ctx.save();
+    ctx.globalAlpha = 0.7;
+    ctx.strokeStyle = '#e0d040';
+    ctx.lineWidth = 1;
+    ctx.beginPath();
+    ctx.arc(mx, my, 5, 0, Math.PI * 2);
+    ctx.stroke();
+    ctx.restore();
+  }
+
+  _drawDeployDock(ctx, x, y, w, h, stage = '', t = 0, truckAnimActive = false) {
+    ctx.fillStyle = PAL.dockBg;
+    ctx.fillRect(x + 2, y + 2, w - 4, h + 4);
+    ctx.fillStyle = PAL.dockYel;
+    for (let i = 0; i < w - 4; i += 8) {
+      ctx.fillRect(x + 2 + i, y + 2, 4, 2);
+      ctx.fillRect(x + 2 + i + 4, y + h + 2, 4, 2);
+    }
+    for (let i = 0; i < h + 2; i += 8) {
+      ctx.fillRect(x + 2, y + 2 + i, 2, 4);
+      ctx.fillRect(x + w - 4, y + 2 + i + 4, 2, 4);
+    }
+
+    const isDeploying = stage === 'deploying';
+    const isDeployed  = stage === 'deployed';
+
+    // Hide static truck when animated truck is active
+    if (!truckAnimActive) {
+      // Truck drifts slightly when deploying
+      const truckOffX = isDeploying ? Math.sin(t * 3) * 1.5 : 0;
+      this._drawPixelTruck(ctx, x + w / 2 - 16 + truckOffX, y + 8, isDeploying || isDeployed, t);
+    }
+
+    // Dock glow / warning when deploying
+    if (isDeploying) {
+      ctx.save();
+      ctx.globalAlpha = 0.18 + Math.abs(Math.sin(t * 4)) * 0.15;
+      ctx.fillStyle = '#ffcc00';
+      ctx.fillRect(x, y, w, h + 6);
+      ctx.restore();
+      // VROOM label (only show when truck is not animating — it has its own label)
+      if (!truckAnimActive) {
+        ctx.save();
+        ctx.globalAlpha = 0.7 + Math.sin(t * 5) * 0.3;
+        renderPixelText(ctx, '🚀 DEPLOY!', x + w / 2, y + h - 4, '#ffcc00', 1);
+        ctx.restore();
+      }
+    }
+  }
+
+  _drawPixelTruck(ctx, x, y, active = false, t = 0) {
+    ctx.fillStyle = '#c8a050';
+    ctx.fillRect(x, y, 20, 16);
+    ctx.fillStyle = '#a88030';
+    ctx.fillRect(x, y, 20, 2);
+    ctx.fillRect(x, y, 2, 16);
+    ctx.fillRect(x + 18, y, 2, 16);
+    ctx.fillStyle = '#a88030';
+    ctx.fillRect(x + 9, y, 2, 16);
+    ctx.fillRect(x, y + 7, 20, 2);
+    ctx.fillStyle = '#d04040';
+    ctx.fillRect(x + 20, y + 4, 12, 12);
+    ctx.fillStyle = '#80c0e0';
+    ctx.fillRect(x + 22, y + 6, 8, 6);
+    ctx.fillStyle = '#222';
+    ctx.fillRect(x + 2, y + 16, 6, 4);
+    ctx.fillRect(x + 24, y + 16, 6, 4);
+    ctx.fillStyle = '#666';
+    ctx.fillRect(x + 4, y + 17, 2, 2);
+    ctx.fillRect(x + 26, y + 17, 2, 2);
+    // Headlights flash when active
+    if (active) {
+      const on = Math.sin(t * 6) > 0;
+      ctx.fillStyle = on ? '#ffffc0' : '#806030';
+      ctx.fillRect(x + 2, y + 4, 4, 3);
+      ctx.fillRect(x + 2, y + 9, 4, 3);
+      if (on) {
+        ctx.save();
+        ctx.globalAlpha = 0.4;
+        ctx.fillStyle = '#ffffa0';
+        ctx.fillRect(x - 6, y + 3, 8, 10);
+        ctx.restore();
+      }
+    }
+  }
+
+  _drawCoffeeMachine(ctx, x, y) {
+    // Coffee table
+    ctx.fillStyle = PAL.desk;
+    ctx.fillRect(x + 2, y + 20, 28, 16);
+    ctx.fillStyle = PAL.deskDk;
+    ctx.fillRect(x + 2, y + 34, 28, 3);
+    // Table legs
+    ctx.fillStyle = PAL.deskDk;
+    ctx.fillRect(x + 4, y + 36, 3, 8);
+    ctx.fillRect(x + 25, y + 36, 3, 8);
+
+    // Coffee machine on table
+    ctx.fillStyle = '#606068';
+    ctx.fillRect(x + 6, y + 6, 20, 16);
+    ctx.fillStyle = '#505058';
+    ctx.fillRect(x + 8, y + 8, 16, 12);
+    // Screen
+    ctx.fillStyle = '#40a040';
+    ctx.fillRect(x + 10, y + 9, 12, 5);
+    // Label uses native text for clean rendering
+    ctx.fillStyle = '#1a3a1a';
+    ctx.font = 'bold 5px monospace';
+    ctx.textAlign = 'center';
+    ctx.fillText('COFFEE', x + 16, y + 13);
+    ctx.textAlign = 'start';
+    // Dispenser
+    ctx.fillStyle = '#404048';
+    ctx.fillRect(x + 10, y + 16, 12, 6);
+    // Cup
+    ctx.fillStyle = '#f0f0e8';
+    ctx.fillRect(x + 13, y + 18, 6, 5);
+    ctx.fillStyle = '#6a3a1a';
+    ctx.fillRect(x + 14, y + 19, 4, 3);
+    // Steam
+    ctx.fillStyle = '#ffffff40';
+    ctx.fillRect(x + 14, y + 15, 1, 3);
+    ctx.fillRect(x + 17, y + 14, 1, 3);
+  }
+
+  // ── Phase 4: PM Desk Lamp ──────────────────────────────────
+
+  _drawDeskLamp(ctx, x, y, stage = '', t = 0) {
+    const isActive = stage === 'spec' || stage === 'review';
+
+    // Lamp base (4x2 px dark gray)
+    ctx.fillStyle = '#505058';
+    ctx.fillRect(x, y + 18, 8, 4);
+
+    // Arm (angled, ~10px tall)
+    ctx.fillStyle = '#606068';
+    ctx.save();
+    ctx.translate(x + 4, y + 18);
+    ctx.rotate(-0.35); // slight angle
+    ctx.fillRect(-1, -12, 3, 12);
+    ctx.restore();
+
+    // Shade (trapezoid-ish rectangle at top of arm)
+    const shadeX = x + 1;
+    const shadeY = y + 2;
+    ctx.fillStyle = '#707858';
+    ctx.fillRect(shadeX - 2, shadeY, 14, 5);
+    ctx.fillStyle = '#606850';
+    ctx.fillRect(shadeX - 1, shadeY + 5, 12, 2);
+
+    if (isActive) {
+      // Pulsing yellow glow under shade
+      const pulse = 0.5 + Math.sin(t * 3) * 0.3;
+      ctx.save();
+      ctx.globalAlpha = pulse;
+      // Bulb glow
+      ctx.fillStyle = '#ffe860';
+      ctx.fillRect(shadeX + 2, shadeY + 5, 6, 3);
+      // Light cone (semi-transparent triangle pointing down)
+      ctx.globalAlpha = pulse * 0.35;
+      ctx.fillStyle = '#ffee80';
+      ctx.beginPath();
+      ctx.moveTo(shadeX + 1, shadeY + 7);
+      ctx.lineTo(shadeX + 9, shadeY + 7);
+      ctx.lineTo(shadeX + 12, y + 20);
+      ctx.lineTo(shadeX - 2, y + 20);
+      ctx.closePath();
+      ctx.fill();
+      // Soft glow circle
+      ctx.globalAlpha = pulse * 0.15;
+      ctx.fillStyle = '#ffee60';
+      ctx.beginPath();
+      ctx.arc(shadeX + 5, y + 14, 10, 0, Math.PI * 2);
+      ctx.fill();
+      ctx.restore();
+    } else {
+      // Inactive: dim bulb
+      ctx.fillStyle = '#404040';
+      ctx.fillRect(shadeX + 3, shadeY + 5, 4, 2);
+    }
+  }
+
+  _drawChair(ctx, x, y) {
+    ctx.fillStyle = '#505068';
+    ctx.fillRect(x - 5, y - 3, 10, 8);
+    ctx.fillStyle = '#404058';
+    ctx.fillRect(x - 4, y - 6, 8, 4);
+    ctx.fillStyle = '#606078';
+    ctx.fillRect(x - 4, y - 2, 8, 6);
+  }
+
+  hitTest(wx, wy) {
+    for (const [name, origin] of this._teamOrigins) {
+      const ox = origin.x;
+      const oy = origin.y;
+      if (wx >= ox && wx <= ox + TEAM_WIDTH * TILE && wy >= oy && wy <= oy + TEAM_HEIGHT * TILE) {
+        return { project: name, config: origin.config };
+      }
+    }
+    return null;
+  }
+
+  /** Hit-test warehouse packages; returns { project, pkg } or null */
+  hitTestPackage(wx, wy) {
+    for (const [name, origin] of this._teamOrigins) {
+      const data = this._projectData.get(name);
+      if (!data || !data.packages.length) continue;
+      const wh = STATIONS.warehouse;
+      const ox = origin.x + wh.x * TILE;
+      const oy = origin.y + wh.y * TILE;
+      const w = wh.w * TILE;
+      for (let i = 0; i < data.packages.length; i++) {
+        const row = Math.floor(i / 4);
+        const col = i % 4;
+        if (row >= 3) break;
+        const px = ox + 18 + col * ((w - 36) / 4);
+        const py = oy + 14 + row * (TILE + 14) - 14;
+        if (wx >= px && wx <= px + 22 && wy >= py && wy <= py + 16) {
+          return { project: name, pkg: data.packages[i], index: i, total: data.packages.length };
+        }
+      }
+    }
+    return null;
+  }
+
+  getTeamOrigin(projectName) {
+    return this._teamOrigins.get(projectName);
+  }
+}
+
+export { STATIONS, TILE, TEAM_WIDTH, TEAM_HEIGHT };