ai-control-center 1.15.2

package/lib/web/public/office/js/main.js

@@ -0,0 +1,1757 @@
+/**
+ * Main — entry point for the AI Office Visualizer (Pixel Art RPG Edition).
+ * Restored from 3bfc3f7 and adapted to current hub-client event-emitter API.
+ * Integrates new modules: day-night, cost-overlay, progress-bars,
+ * achievements-ui, sound-effects, chat-bubbles, replay, ui.
+ */
+
+import { Character, IDLE_BEHAVIORS, pickTimeAwareBehavior } from './character.js';
+import { getEffects } from './effects.js';
+import { Engine } from './engine.js';
+import { TicketManager } from './feature-ticket.js';
+import { HubClient } from './hub-client.js';
+import { OfficeLayout } from './office-layout.js';
+import { drawStaminaBar, initStamina, updateStamina } from './stamina-system.js';
+
+// ── New modules ─────────────────────────────────────────────────────────────
+import { DayNightCycle } from './day-night.js';
+import { CostOverlay } from './cost-overlay.js';
+import { ProgressBarSystem } from './progress-bars.js';
+import { AchievementsUI } from './achievements-ui.js';
+import { SoundEffects } from './sound-effects.js';
+import { ChatBubbleSystem } from './chat-bubbles.js';
+import { PipelineReplay } from './replay.js';
+
+// ── State ───────────────────────────────────────────────────────────────────
+let engine, layout, hubClient, effects;
+let dayNight, costOverlay, progressBars, achievementsUI, soundFx, chatBubbles, replay;
+let projectConfigs = [];    // from hub config
+let characters = new Map(); // key: "project:role", value: Character
+let projectStates = [];     // latest state from hub
+let activityLog = [];       // recent activity entries
+let prevStageMap = new Map();   // project → last stage
+let prevFeatureMap = new Map(); // project → last feature (Bug 2)
+let rejectionCountMap = new Map(); // project → consecutive rejection count
+let clickedPMProject = null;    // for PM interaction menu
+let firstLoadDone = false;       // suppress fireworks on initial state replay
+let projectSeenOnce = new Set(); // track projects that have had at least one state update processed
+let ticketManager = new TicketManager();
+let pendingHandoffs = [];        // Phase 3: active handoff animations
+
+// Phase 3: maps pipeline stage → which character carries the ticket to whom
+const HANDOFF_MAP = {
+  architecture:   { from: 'pm',       to: 'arch' },
+  implementation: { from: 'arch',     to: 'coder' },
+  review:         { from: 'coder',    to: 'pm' },       // coder submits for review to PM
+  rejected:       { from: 'pm',       to: 'coder' },    // PM rejects back to coder
+  approved:       { from: 'pm',       to: 'deployer' }, // PM approves, hand to deployer
+  deploying:      { from: 'deployer', to: 'deployer' }, // deployer stays
+};
+
+// Estimated durations per pipeline stage (seconds of visual progress)
+const STAGE_DURATIONS = {
+  spec: 30, architecture: 45, implementation: 60,
+  review: 20, rejected: 15, fixing: 40, deploying: 15,
+  approved: 5, deployed: 5, inbox: 3,
+};
+
+// ── Persistent shipped packages (survive page refresh) ─────────────────────
+function loadShippedPackages() {
+  try {
+    return JSON.parse(localStorage.getItem('office_shipped_packages') || '{}');
+  } catch { return {}; }
+}
+function saveShippedPackage(projectName, featureName) {
+  const pkgs = loadShippedPackages();
+  if (!pkgs[projectName]) pkgs[projectName] = [];
+  if (!pkgs[projectName].includes(featureName)) {
+    pkgs[projectName].push(featureName);
+    if (pkgs[projectName].length > 20) pkgs[projectName].shift();
+    localStorage.setItem('office_shipped_packages', JSON.stringify(pkgs));
+  }
+}
+
+// ── Initialize ──────────────────────────────────────────────────────────────
+function init() {
+  const canvas = document.getElementById('office-canvas');
+  engine = new Engine(canvas);
+  layout = new OfficeLayout();
+
+  effects = getEffects();
+
+  // ── Initialize new modules ──────────────────────────────────────────────
+  dayNight = new DayNightCycle(canvas);
+  costOverlay = new CostOverlay(document.getElementById('canvas-container'));
+  progressBars = new ProgressBarSystem();
+  achievementsUI = new AchievementsUI(document.getElementById('canvas-container'));
+  soundFx = new SoundEffects();
+  chatBubbles = new ChatBubbleSystem();
+  replay = new PipelineReplay(engine);
+
+  // Register render layers (order matters: layout → characters → effects → idle AI)
+  engine.onRender((ctx, dt) => {
+    layout.render(ctx, dt);
+  });
+
+  engine.onRender((ctx, dt) => {
+    updateIdleBehaviors(dt);
+    updateWorkVisits(dt);
+    updateHandoffs(dt);
+    for (const char of characters.values()) {
+      char.update(dt);
+      char.render(ctx);
+    }
+
+    // Chat bubbles (render on canvas in world space)
+    chatBubbles.update(dt);
+    // Build agents map for chat bubble rendering
+    const agentsMap = {};
+    for (const [key, char] of characters) {
+      agentsMap[key] = char;
+    }
+    chatBubbles.render(ctx, agentsMap);
+
+    // Feature tickets (render on top of characters)
+    ticketManager.update(dt);
+    ticketManager.render(ctx);
+  });
+
+  engine.onRender((ctx, dt) => {
+    effects.update(dt);
+    effects.render(ctx);
+  });
+
+  // ── Post-render overlays (screen space) ─────────────────────────────────
+  engine.onPostRender((ctx, dt) => {
+    // Day/night cycle overlay
+    dayNight.update(dt);
+    dayNight.applyLighting(ctx, engine.width, engine.height);
+  });
+
+  // Click handling
+  engine.onClick((wx, wy, e) => {
+    // Check character clicks first
+    for (const char of characters.values()) {
+      if (char.hitTest(wx, wy)) {
+        showCharPopup(char, e.clientX, e.clientY);
+        return;
+      }
+    }
+
+    // Bug 4: Check warehouse package clicks
+    const pkg = layout.hitTestPackage(wx, wy);
+    if (pkg) {
+      showPackagePopup(pkg, e.clientX, e.clientY);
+      return;
+    }
+
+    // Check team zone clicks
+    const zone = layout.hitTest(wx, wy);
+    if (zone) {
+      showTeamPanel(zone.project, zone.config);
+      return;
+    }
+
+    // Click on empty space — hide popups
+    hidePopups();
+  });
+
+  // ── Hub WebSocket (event-emitter API) ────────────────────────────────────
+  hubClient = new HubClient();
+
+  hubClient.on('connected', () => {
+    console.log('[Office] Hub connected');
+    document.getElementById('connection-status')?.classList.replace('offline', 'online');
+  });
+
+  hubClient.on('disconnected', () => {
+    console.log('[Office] Hub disconnected');
+    document.getElementById('connection-status')?.classList.replace('online', 'offline');
+  });
+
+  // ── Hub mode: multi-project state from hub server ──────────────────────
+  // Hub broadcasts: { type: 'state', projects: { "Name": {name,url,color,icon,status,online}, ... }, summary }
+  hubClient.on('state', (msg) => {
+    const projects = msg?.projects || {};
+    const projectList = Object.values(projects);
+    if (projectList.length === 0) return;
+    console.log(`[Office] Hub state received: ${projectList.map(p => `${p.name}=${p.status?.stage||'?'}`).join(', ')}`);
+
+    // Extract configs from hub state (first time or when projects change)
+    const configs = projectList.map(p => ({
+      name: p.name,
+      color: p.color || '#4A90D9',
+      icon: p.icon || '',
+      url: p.url || '',
+    }));
+
+    // Update config if project list changed
+    const configNames = configs.map(c => c.name).sort().join(',');
+    const currentNames = projectConfigs.map(c => c.name).sort().join(',');
+    if (configNames !== currentNames) {
+      onConfigUpdate(configs);
+    }
+
+    // Convert hub state to array format for onStateUpdate
+    const wrapped = projectList.map(p => ({
+      name: p.name,
+      online: p.online !== false,
+      status: {
+        stage: p.status?.stage || '',
+        current_feature: p.status?.current_feature || '',
+        _bannedModels: p.status?._bannedModels || [],
+        history: p.status?.history || [],
+        rejection_reason: p.status?.rejection_reason || '',
+      },
+    }));
+    onStateUpdate(wrapped);
+  });
+
+  // ── Standalone mode: single-project status from individual web server ──
+  hubClient.on('status', (msg) => {
+    const data = msg?.data || msg;
+    const status = data?.status || data;
+    if (!status) return;
+    console.log(`[Office] Standalone status: stage=${status.stage}, feature=${status.current_feature || '?'}`);
+
+    // Use known project name from config, or extract from status
+    const projectName = status.project || status.projectName || projectConfigs[0]?.name || 'Default';
+
+    // Auto-create project config if we haven't received one yet
+    if (projectConfigs.length === 0) {
+      onConfigUpdate([{ name: projectName, color: '#4A90D9', icon: '' }]);
+    }
+
+    // Server sends single-project status object — wrap it as array for our multi-project renderer
+    const wrapped = [{
+      name: projectName,
+      online: true,
+      status: {
+        stage: status.stage || '',
+        current_feature: status.current_feature || status.currentFeature || '',
+        _bannedModels: status._bannedModels || status.bannedModels || [],
+        history: status.history || [],
+        rejection_reason: status.rejection_reason || '',
+      },
+    }];
+    onStateUpdate(wrapped);
+  });
+
+  // Handle pipeline events (user actions, deploy, etc.)
+  hubClient.on('event', (msg) => {
+    const data = msg?.data || msg;
+    if (!data) return;
+    const projectName = data.project || data.projectName || projectConfigs[0]?.name || '';
+    const event = data.event || data.type || '';
+    onHubEvent(projectName, event, data.data || data);
+  });
+
+  // Handle log entries
+  hubClient.on('log', (msg) => {
+    const data = msg?.data || msg;
+    if (data?.message) {
+      addActivity(data.project || 'System', data.message);
+    }
+  });
+
+  // ── Connect to hub first, fallback to local WebSocket ──────────────────
+  connectToHub();
+
+  // UI buttons
+  document.getElementById('btn-submit')?.addEventListener('click', () => {
+    document.getElementById('submit-modal')?.classList.remove('hidden');
+  });
+
+  document.getElementById('submit-go')?.addEventListener('click', submitFeature);
+
+  // PM menu item clicks
+  document.querySelectorAll('.pm-menu-item').forEach(item => {
+    item.addEventListener('click', () => {
+      const action = item.dataset.action;
+      handlePMAction(action);
+    });
+  });
+
+  // Initialize slash command bar
+  initCommandBar();
+
+  // Start engine
+  engine.start();
+  console.log('[Office] AI Operations Center started (Pixel Art RPG Edition)');
+
+  // Show demo characters if no hub connection after 3s
+  setTimeout(() => {
+    if (projectConfigs.length === 0) {
+      loadDemoMode();
+    }
+  }, 3000);
+
+  // Fetch initial state (hub mode will override via WebSocket)
+  fetchInitialState();
+}
+
+// ── Hub / Standalone Connection ──────────────────────────────────────────────
+
+let hubBaseUrl = null; // set when hub is detected
+
+/**
+ * Try connecting to hub server first (port 3850 by convention).
+ * If hub is available, use it for multi-project state.
+ * Otherwise fall back to the local project's WebSocket.
+ */
+async function connectToHub() {
+  const wsProtocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
+
+  // Try hub on same host, default port 3850
+  const hubPort = 3850;
+  const hubWsUrl = `${wsProtocol}//${location.hostname}:${hubPort}/ws`;
+  const hubHttpUrl = `${location.protocol}//${location.hostname}:${hubPort}`;
+
+  try {
+    // Quick check if hub is running
+    const res = await fetch(`${hubHttpUrl}/api/health`, { signal: AbortSignal.timeout(2000) });
+    if (res.ok) {
+      const health = await res.json();
+      if (health.hub === 'ok') {
+        console.log(`[Office] Hub detected at port ${hubPort} — multi-project mode (${health.projectCount} projects)`);
+        hubBaseUrl = hubHttpUrl;
+        hubClient.connect(hubWsUrl);
+        return;
+      }
+    }
+  } catch {
+    // Hub not available
+  }
+
+  // Fallback: connect to local project's WebSocket
+  console.log('[Office] No hub detected — single-project mode');
+  hubClient.connect(`${wsProtocol}//${location.host}/ws`);
+}
+
+/** Fetch initial state from REST API (for single-project mode bootstrap) */
+async function fetchInitialState() {
+  // If hub is connected, it will push state via WebSocket — skip REST
+  if (hubBaseUrl) {
+    try {
+      const res = await fetch(`${hubBaseUrl}/api/projects`);
+      const data = await res.json();
+      if (data.projects?.length) {
+        const configs = data.projects.map(p => ({
+          name: p.name,
+          color: p.color || '#4A90D9',
+          icon: p.icon || '',
+          url: p.url || '',
+        }));
+        onConfigUpdate(configs);
+
+        const wrapped = data.projects.map(p => ({
+          name: p.name,
+          online: p.online !== false,
+          status: {
+            stage: p.status?.stage || '',
+            current_feature: p.status?.current_feature || '',
+            _bannedModels: p.status?._bannedModels || [],
+            history: p.status?.history || [],
+            rejection_reason: p.status?.rejection_reason || '',
+          },
+        }));
+        onStateUpdate(wrapped);
+      }
+    } catch { /* hub will push state via WS */ }
+    return;
+  }
+
+  // Single-project mode: fetch from local API
+  try {
+    const infoRes = await fetch('/api/info');
+    const info = await infoRes.json();
+    const projectName = info.name || 'Unknown Project';
+
+    if (projectConfigs.length === 0) {
+      onConfigUpdate([{ name: projectName, color: info.color || '#4A90D9', icon: info.icon || '' }]);
+    }
+
+    const statusRes = await fetch('/api/status');
+    const status = await statusRes.json();
+    if (status) {
+      onStateUpdate([{
+        name: projectName,
+        online: true,
+        status: {
+          stage: status.stage || '',
+          current_feature: status.current_feature || '',
+          _bannedModels: status._bannedModels || [],
+          history: status.history || [],
+          rejection_reason: status.rejection_reason || '',
+        },
+      }]);
+    }
+  } catch { /* will use demo mode after 3s timeout */ }
+}
+
+// ── Idle Behavior System ─────────────────────────────────────────────────────
+
+function updateIdleBehaviors(_dt) {
+  for (const char of characters.values()) {
+    if (!char.wantsIdleAction()) continue;
+
+    // Pick an idle behavior with time-of-day awareness
+    const behavior = pickTimeAwareBehavior();
+    const idlePositions = layout.getIdlePositions(char.project);
+
+    let targetPos = null;
+    let gossipPartner = null;
+
+    switch (behavior) {
+      case 'wander': {
+        // Wander to a random spot near home
+        const wanderRange = 80;
+        targetPos = {
+          x: char.homeX + (Math.random() - 0.5) * wanderRange * 2,
+          y: char.homeY + (Math.random() - 0.5) * wanderRange * 2,
+        };
+        break;
+      }
+      case 'gossip': {
+        // Find another idle character from the same project to gossip with
+        gossipPartner = findGossipPartner(char);
+        if (!gossipPartner) {
+          // No partner available — wander instead
+          targetPos = {
+            x: char.homeX + (Math.random() - 0.5) * 60,
+            y: char.homeY + (Math.random() - 0.5) * 60,
+          };
+        } else {
+        // Meet near each other with a 16px gap so they don't overlap
+        const midX = (char.x + gossipPartner.x) / 2;
+        const midY = (char.y + gossipPartner.y) / 2;
+        const gdx = gossipPartner.x - char.x;
+        const gdy = gossipPartner.y - char.y;
+        const glen = Math.sqrt(gdx * gdx + gdy * gdy) || 1;
+        const GOSSIP_GAP = 16;
+        targetPos = {
+          x: midX - (gdx / glen) * GOSSIP_GAP,
+          y: midY - (gdy / glen) * GOSSIP_GAP,
+        };
+        gossipPartner.startIdleBehavior('gossip', {
+          x: midX + (gdx / glen) * GOSSIP_GAP,
+          y: midY + (gdy / glen) * GOSSIP_GAP,
+        }, char);
+        }
+        break;
+      }
+      case 'gym':
+        targetPos = idlePositions.gym;
+        break;
+      case 'breakRoom':
+        targetPos = idlePositions.breakRoom;
+        break;
+      case 'coffee':
+        targetPos = idlePositions.coffee;
+        break;
+      case 'poke':
+      case 'highfive': {
+        // Find a partner for social interaction
+        gossipPartner = findGossipPartner(char);
+        if (!gossipPartner) {
+          targetPos = { x: char.homeX + (Math.random() - 0.5) * 60, y: char.homeY + (Math.random() - 0.5) * 60 };
+        } else {
+          const midX = (char.x + gossipPartner.x) / 2;
+          const midY = (char.y + gossipPartner.y) / 2;
+          const gdx = gossipPartner.x - char.x;
+          const gdy = gossipPartner.y - char.y;
+          const glen = Math.sqrt(gdx * gdx + gdy * gdy) || 1;
+          const GAP = 14;
+          targetPos = { x: midX - (gdx / glen) * GAP, y: midY - (gdy / glen) * GAP };
+          gossipPartner.startIdleBehavior(behavior, { x: midX + (gdx / glen) * GAP, y: midY + (gdy / glen) * GAP }, char);
+        }
+        break;
+      }
+      case 'phone':
+        // Stay in place, check phone
+        targetPos = { x: char.x, y: char.y };
+        break;
+      case 'stretch':
+        // Stay in place, stretch
+        targetPos = { x: char.x, y: char.y };
+        break;
+      case 'meeting': {
+        // Two idle characters from the same project meet at break room
+        gossipPartner = findGossipPartner(char);
+        if (!gossipPartner) {
+          // No partner — just wander instead
+          targetPos = {
+            x: char.homeX + (Math.random() - 0.5) * 60,
+            y: char.homeY + (Math.random() - 0.5) * 60,
+          };
+        } else {
+          // Meet at break room
+          const meetPos = idlePositions.breakRoom || idlePositions.lounge1;
+          if (meetPos) {
+            const GAP = 16;
+            targetPos = { x: meetPos.x - GAP, y: meetPos.y };
+            gossipPartner.startIdleBehavior('meeting', { x: meetPos.x + GAP, y: meetPos.y }, char);
+          } else {
+            targetPos = { x: char.homeX, y: char.homeY };
+          }
+        }
+        break;
+      }
+      case 'sleep':
+        // Sleep at their desk
+        targetPos = { x: char.homeX, y: char.homeY };
+        break;
+      default:
+        targetPos = idlePositions.lounge1;
+    }
+
+    char.startIdleBehavior(behavior, targetPos, gossipPartner);
+  }
+}
+
+function findGossipPartner(char) {
+  // Find an idle character from the same project who isn't already gossiping
+  for (const other of characters.values()) {
+    if (other === char) continue;
+    if (other.project !== char.project) continue;
+    if (other.isWorking) continue;
+    if (other.idleBehavior === 'gossip') continue;   // already gossiping
+    if (other.idleBehavior === 'meeting') continue;  // in a meeting
+    if (other.idleBehavior === 'sleep') continue;    // don't wake them up
+    if (other.idleBehavior === 'phone') continue;    // on their phone
+    if (other.idleBehavior === 'stretch') continue;  // stretching
+    return other;
+  }
+  return null;
+}
+
+// ── Work Visit System (feature discussions while working) ───────────────────
+// DISABLED: Working characters must stay at their desk and focus.
+let workVisitTimer = 0;
+
+function updateWorkVisits(dt) {
+  // No-op: working characters should not leave their station
+  workVisitTimer += dt;
+}
+
+// ── Phase 3: Handoff Animation System ────────────────────────────────────────
+const HANDOFF_TIMEOUT = 8; // seconds — if source doesn't arrive, force-complete
+
+function completeHandoff(ho) {
+  // Drop the ticket at the target position
+  ho.ticket.detach();
+  ho.ticket.setRole(ho.targetRole);
+  ho.ticket.sendTo(ho.targetPos, ho.stayDuration);
+
+  // Release source character and send them home
+  ho.sourceChar.isHandingOff = false;
+  ho.sourceChar.idleTimer = 4 + Math.random() * 6;
+  ho.sourceChar.moveTo(ho.sourceChar.homeX, ho.sourceChar.homeY);
+
+  // Target character reacts
+  if (ho.targetChar && ho.targetChar !== ho.sourceChar) {
+    ho.targetChar.react('working', '\u{1F4CB} Got it!', 2);
+  }
+}
+
+function updateHandoffs(dt) {
+  for (let i = pendingHandoffs.length - 1; i >= 0; i--) {
+    const ho = pendingHandoffs[i];
+    ho.elapsed = (ho.elapsed || 0) + dt;
+
+    const dx = ho.targetPos.x - ho.sourceChar.x;
+    const dy = ho.targetPos.y - ho.sourceChar.y;
+    const dist = Math.sqrt(dx * dx + dy * dy);
+
+    if (dist < 12 || ho.elapsed > HANDOFF_TIMEOUT) {
+      completeHandoff(ho);
+      pendingHandoffs.splice(i, 1);
+    }
+  }
+}
+
+// ── Demo Mode (when hub isn't running) ──────────────────────────────────────
+
+function loadDemoMode() {
+  console.log('[Office] No hub detected — loading demo mode');
+  const demoConfigs = [
+    { name: 'XConnector', color: '#4A90D9', icon: '' },
+    { name: 'PickleBall', color: '#27AE60', icon: '' },
+  ];
+  onConfigUpdate(demoConfigs);
+
+  // Simulate pipeline activity for XConnector
+  const demoStages = ['idle', 'spec', 'architecture', 'implementation', 'review', 'approved', 'deploying', 'deployed'];
+  let stageIdx = 0;
+  const demoFeature = 'Auto-Sync Dashboard';
+
+  setInterval(() => {
+    stageIdx = (stageIdx + 1) % demoStages.length;
+    const stage = demoStages[stageIdx];
+
+    // Update character states
+    for (const role of ['pm', 'arch', 'coder', 'deployer']) {
+      const key = `XConnector:${role}`;
+      const char = characters.get(key);
+      if (char) {
+        const wasWorking = char.isWorking;
+        char.setState(stage);
+        if (!wasWorking && char.isWorking) {
+          char.moveTo(char.homeX, char.homeY);
+        }
+      }
+    }
+
+    // Update status board and whiteboard
+    layout.setProjectState('XConnector', demoFeature, stage, stage === 'deploying');
+
+    // Add shipped package when deployed
+    if (stage === 'deployed') {
+      layout.addShippedPackage('XConnector', demoFeature);
+    }
+
+    addActivity('XConnector', stageToMessage(stage, demoFeature));
+
+    // Sound effects for demo
+    if (soundFx) {
+      if (stage === 'spec' || stage === 'architecture' || stage === 'implementation') soundFx.playTaskStart();
+      if (stage === 'deployed') soundFx.playTaskComplete();
+    }
+  }, 4000);
+
+  // PickleBall team is idle — they'll use the idle behavior system naturally
+  layout.setProjectState('PickleBall', '', 'idle', false);
+
+  document.getElementById('connection-status')?.classList.replace('offline', 'online');
+  addActivity('System', 'Demo mode active — hub not connected');
+}
+
+// ── Hub State Updates ───────────────────────────────────────────────────────
+
+function onConfigUpdate(configs) {
+  projectConfigs = configs || [];
+  layout.setupTeams(projectConfigs);
+  createCharacters();
+  updateProjectDropdown();
+
+  document.getElementById('project-count').textContent =
+    `${projectConfigs.length} PROJECT${projectConfigs.length !== 1 ? 'S' : ''}`;
+
+  document.getElementById('connection-status')?.classList.replace('offline', 'online');
+
+  // Restore shipped packages from localStorage
+  const savedPkgs = loadShippedPackages();
+  for (const [projName, features] of Object.entries(savedPkgs)) {
+    for (const feat of features) {
+      layout.addShippedPackage(projName, feat);
+    }
+  }
+
+  // Bug 2 fix: re-apply current pipeline state immediately after characters are created
+  if (projectStates.length > 0) {
+    prevStageMap.clear();
+    rejectionCountMap.clear();
+    onStateUpdate(projectStates);
+  }
+}
+
+function onStateUpdate(projects) {
+  projectStates = projects || [];
+
+  // Debug: log state updates to browser console
+  for (const p of (projects || [])) {
+    const s = p.status?.stage || '';
+    const prev = prevStageMap.get(p.name);
+    if (s !== prev) {
+      console.log(`[Office] Stage change: ${p.name} ${prev || '(none)'} → ${s}`);
+    }
+  }
+
+  // Snapshot which projects have been seen before this update cycle.
+  // Celebrations are only allowed for projects already in the set.
+  const alreadySeen = new Set(projectSeenOnce);
+
+  for (const p of projectStates) {
+    const stage = p.status?.stage || '';
+    const name = p.name;
+    const feature = p.status?.current_feature || '';
+    const isDeploying = stage === 'deploying';
+
+    // Update status board, whiteboard, and conveyor state
+    layout.setProjectState(name, feature, stage, isDeploying);
+
+    // ── Only update character states when stage CHANGES (Bug 1 fix) ──────────
+    const prevStage = prevStageMap.has(name) ? prevStageMap.get(name) : undefined;
+    if (stage !== prevStage) {
+      prevStageMap.set(name, stage);
+
+      // Cancel any pending handoffs for this project (stage moved on)
+      for (let hi = pendingHandoffs.length - 1; hi >= 0; hi--) {
+        if (pendingHandoffs[hi].projectName === name) {
+          completeHandoff(pendingHandoffs[hi]);
+          pendingHandoffs.splice(hi, 1);
+        }
+      }
+
+      // Track rejection count for escalating reactions
+      if (stage === 'rejected') {
+        rejectionCountMap.set(name, (rejectionCountMap.get(name) || 0) + 1);
+      } else if (stage === 'approved' || stage === 'deployed') {
+        rejectionCountMap.set(name, 0);
+      }
+      const rejCount = rejectionCountMap.get(name) || 0;
+
+      // Wake ALL characters when transitioning from idle to active stage
+      const idleStages = new Set(['', 'idle', 'inbox']);
+      const isNewTask = idleStages.has(prevStage || '') && !idleStages.has(stage);
+
+      for (const role of ['pm', 'arch', 'coder', 'deployer']) {
+        const key = `${name}:${role}`;
+        const char = characters.get(key);
+        if (char) {
+          // Track current feature for work discussions vs idle gossip
+          char.currentFeature = feature || '';
+
+          // Wake sleeping/idle chars and send them home when new task starts
+          if (isNewTask) {
+            char.idleBehavior = null;
+            char.gossipTarget = null;
+            char.gossipLine = '';
+            char.moveTo(char.homeX, char.homeY);
+          }
+
+          const wasWorking = char.isWorking;
+          char.isHandingOff = false; // clear handoff flag on stage change
+          char.rejectionCount = rejCount;
+          char.setState(stage);
+
+          // Set task progress duration for progress bar
+          char.taskProgress = 0;
+          char.taskDuration = STAGE_DURATIONS[stage] || 0;
+
+          // When approved, always send deployer back to their dock to stand by
+          if (stage === 'approved' && char.role === 'deployer') {
+            char.moveTo(char.homeX, char.homeY);
+            char.workBubble = '📦 Package ready!';
+            char.workBubbleDuration = 3;
+            char.workBubbleTimer = 2;
+          } else if (!wasWorking && char.isWorking) {
+            char.moveTo(char.homeX, char.homeY);
+            // Show "going to work" bubble so user knows who's starting
+            const workLabels = {
+              working: '📝 On it!',
+              designing: '📐 Designing...',
+              reviewing: '🔍 Reviewing...',
+              deploying: '🚀 Deploying!',
+              fighting_bug: '🐛 Fixing bugs!',
+              celebrating: '🎉 Done!',
+              waiting_input: '⏳ Waiting...',
+            };
+            const label = workLabels[char.state] || '⚡ Working...';
+            char.workBubble = label;
+            char.workBubbleDuration = 4;
+            char.workBubbleTimer = 0;
+          }
+        }
+      }
+
+      // ── Progress bars for pipeline stages ──────────────────────────────────
+      if (progressBars) {
+        progressBars.handlePipelineEvent({
+          type: 'stage-start',
+          stage,
+          project: name,
+        });
+      }
+
+      // ── Sound effects on stage change ──────────────────────────────────────
+      if (soundFx && firstLoadDone && alreadySeen.has(name)) {
+        if (stage === 'spec' || stage === 'architecture' || stage === 'implementation') {
+          soundFx.playTaskStart();
+        } else if (stage === 'deployed') {
+          soundFx.playTaskComplete();
+        } else if (stage === 'rejected') {
+          soundFx.playError();
+        } else if (stage === 'approved') {
+          soundFx.playNotification();
+        }
+      }
+
+      // ── Feature Ticket management ──────────────────────────────────────────
+      const stageToRole = {
+        inbox: 'pm', spec: 'pm', spec_complete: 'pm',
+        architecture: 'arch', arch_complete: 'arch',
+        implementation: 'coder', implementation_complete: 'coder',
+        review: 'pm', review_complete: 'pm',
+        rejected: 'coder', fixing: 'coder',
+        approved: 'deployer', deploying: 'deployer',
+      };
+
+      if (isNewTask && feature) {
+        // Create a new ticket at PM's desk — but only if one doesn't already exist
+        const existingTicket = ticketManager.getByProject(name);
+        if (!existingTicket) {
+          const pmPos = layout.getCharacterPositions(name).pm;
+          const projColor = projectConfigs.find(c => c.name === name)?.color || '#4A90D9';
+          if (pmPos) {
+            ticketManager.createTicket(feature, name, pmPos, projColor);
+          }
+        }
+      }
+
+      // Move existing ticket to the role's station for the current stage
+      const ticket = ticketManager.getByProject(name);
+      if (ticket) {
+        const targetRole = stageToRole[stage];
+        if (targetRole) {
+          const positions = layout.getCharacterPositions(name);
+          const targetPos = positions[targetRole];
+          if (targetPos) {
+            const handoff = HANDOFF_MAP[stage];
+            const stayDuration = STAGE_DURATIONS[stage] || 10;
+
+            // Phase 3: Try handoff animation if a mapping exists
+            if (handoff && firstLoadDone && alreadySeen.has(name)) {
+              const sourceChar = characters.get(`${name}:${handoff.from}`);
+              const targetChar = characters.get(`${name}:${handoff.to}`);
+
+              // Hand-carry: source just finished their stage, so temporarily release them for handoff
+              if (sourceChar && handoff.from !== handoff.to) {
+                // Release source from working state and mark as handing off
+                sourceChar.isWorking = false;
+                sourceChar.isAtDesk = false;
+                sourceChar.isHandingOff = true; // prevents idle system from hijacking
+                sourceChar.idleBehavior = null;
+                sourceChar.gossipTarget = null;
+                sourceChar.gossipLine = '';
+                sourceChar.state = 'handing_off';
+
+                // Show delivery bubble on source
+                const roleLabels = { pm: 'PM', arch: 'Architect', coder: 'Coder', deployer: 'Deployer' };
+                sourceChar.workBubble = `📋→ ${roleLabels[handoff.to] || handoff.to}`;
+                sourceChar.workBubbleDuration = 5;
+                sourceChar.workBubbleTimer = 0;
+
+                // Attach ticket to source character
+                ticket.attachTo(sourceChar);
+
+                // Source character walks to the target desk
+                sourceChar.moveTo(targetPos.x, targetPos.y);
+
+                // Track this pending handoff
+                pendingHandoffs.push({
+                  projectName: name,
+                  sourceChar,
+                  targetChar,
+                  ticket,
+                  targetPos,
+                  targetRole,
+                  stayDuration,
+                  elapsed: 0,
+                });
+              } else {
+                // Source is busy or same role — fall back to direct send
+                ticket.setRole(targetRole);
+                ticket.sendTo(targetPos, stayDuration);
+              }
+            } else {
+              // No handoff mapping or initial page load — direct send
+              ticket.setRole(targetRole);
+              ticket.sendTo(targetPos, stayDuration);
+            }
+          }
+        }
+        if (stage === 'deploying') {
+          ticket.state = 'on_conveyor';
+        } else if (stage === 'deployed') {
+          ticket.delivered = true;
+        }
+      }
+
+      if (stage) addActivity(name, stageToMessage(stage, feature));
+
+      // ── Achievements on milestones ─────────────────────────────────────────
+      if (achievementsUI && firstLoadDone && alreadySeen.has(name)) {
+        if (stage === 'deployed') {
+          achievementsUI.showUnlockAnimation({
+            id: 'first_deploy',
+            name: 'First Deploy!',
+            description: `Shipped: ${feature}`,
+            icon: '🚀',
+          });
+        }
+      }
+
+      // ── Deployed: play deploying animation first, then celebrate ───────────
+      if (stage === 'deployed' && feature) {
+        if (firstLoadDone && alreadySeen.has(name)) {
+          // Live: inject a client-side "deploying" phase (10s) before celebration
+          const deployerChar = characters.get(`${name}:deployer`);
+          if (deployerChar) {
+            deployerChar.state = 'deploying';
+            deployerChar.isWorking = true;
+            deployerChar.taskProgress = 0;
+            deployerChar.taskDuration = 10;
+            deployerChar.workBubble = '🚀 Launching to prod!';
+            deployerChar.workBubbleDuration = 9;
+            deployerChar.moveTo(deployerChar.homeX, deployerChar.homeY);
+          }
+          // Run conveyor belt for the deploy duration
+          layout.setProjectState(name, feature, 'deploying', true);
+          // Start the truck driving animation (dock → conveyor → warehouse)
+          layout.startTruckAnimation(name);
+
+          const capturedName = name;
+          const capturedFeature = feature;
+          setTimeout(() => {
+            // Celebration phase — all characters react
+            for (const role of ['pm', 'arch', 'coder', 'deployer']) {
+              const char = characters.get(`${capturedName}:${role}`);
+              if (char) {
+                const msg = role === 'deployer' ? '🚀 SHIPPED!' :
+                            role === 'pm'       ? '🎉 Amazing!' :
+                            role === 'arch'     ? '🏆 Nailed it!' : '🥳 We did it!';
+                char.react('celebrating', msg, 5);
+              }
+            }
+            // Fireworks + banner
+            if (effects) {
+              const origin = layout.getTeamOrigin(capturedName);
+              if (origin) effects.launchFireworks(origin.x + 160, origin.y + 80, 22);
+              effects.showBanner('🎉 SHIPPED!', `${capturedName}: ${capturedFeature.slice(0, 35)}`, 4.5);
+            }
+            layout.addShippedPackage(capturedName, capturedFeature);
+            saveShippedPackage(capturedName, capturedFeature);
+            // Mark ticket as delivered
+            const t = ticketManager.getByProject(capturedName);
+            if (t) t.delivered = true;
+            // Sound
+            if (soundFx) soundFx.playAchievement();
+            // Reset status board after celebration
+            setTimeout(() => {
+              layout.setProjectState(capturedName, '', 'idle', false);
+              prevStageMap.set(capturedName, 'idle');
+            }, 8000);
+          }, 10000);
+        } else {
+          // Page-load replay: silently add to warehouse, no animation
+          layout.addShippedPackage(name, feature);
+          saveShippedPackage(name, feature);
+        }
+      }
+    }
+
+    // ── Always: idle sleep check — only after 8+ seconds of idle ───────────
+    if (!stage || stage === '' || stage === 'inbox') {
+      if (!feature) {
+        for (const role of ['pm', 'arch', 'coder', 'deployer']) {
+          const key = `${name}:${role}`;
+          const char = characters.get(key);
+          if (char && char.state === 'idle' && !char.idleBehavior && char.stateTime > 8) {
+            char.state = 'sleeping';
+          }
+        }
+      }
+    }
+
+    // ── Always: rate-limited character indicators ─────────────────────────────
+    const banned = p.status?._bannedModels || [];
+    for (const ban of banned) {
+      const model = ban.model?.toLowerCase() || '';
+      let role = null;
+      if (model.includes('gemini')) role = 'pm';
+      else if (model.includes('claude')) role = 'arch';
+      else if (model.includes('sonnet') || model.includes('opus')) role = 'coder';
+
+      if (role) {
+        const key = `${name}:${role}`;
+        const char = characters.get(key);
+        if (char && (char.state === 'idle' || char.state === 'sleeping')) {
+          char.state = 'rate_limited';
+        }
+      }
+    }
+
+    // ── Always: new feature arrives → recall idle chars home ─────────────────
+    const prevFeature = prevFeatureMap.get(name) || '';
+    if (feature && feature !== prevFeature) {
+      prevFeatureMap.set(name, feature);
+      for (const role of ['pm', 'arch', 'coder', 'deployer']) {
+        const key = `${name}:${role}`;
+        const char = characters.get(key);
+        if (char && !char.isWorking) {
+          char.idleBehavior = null;
+          char.gossipTarget = null;
+          char.gossipLine = '';
+          char.workBubble = '';
+          char.moveTo(char.homeX, char.homeY);
+        }
+      }
+    }
+  } // end for (const p of projectStates)
+
+  // Mark all current projects as seen for future celebration gating
+  for (const p of projectStates) {
+    projectSeenOnce.add(p.name);
+  }
+  firstLoadDone = true;
+
+  // Update project count
+  const online = projectStates.filter(p => p.online).length;
+  document.getElementById('project-count').textContent =
+    `${online}/${projectStates.length} ONLINE`;
+}
+
+// ── Real-time event reactions (pushed instantly from Telegram/actions) ────────
+function onHubEvent(projectName, event, data) {
+  // Map event → per-role reactions { role: [state, bubbleText, durationSec] }
+  const REACTIONS = {
+    // User actions
+    'user_action:approve': {
+      pm:       ['celebrating', '✅ APPROVED!', 4],
+      arch:     ['celebrating', '🎉 Let\'s go!', 4],
+      coder:    ['celebrating', '🙌 YES!!!', 4],
+      deployer: ['waiting_input', '🚛 Ready!', 4],
+    },
+    'user_action:reject': {
+      pm:       ['frustrated',   '❌ REJECTED', 3],
+      arch:     ['idle',          '😬 Oops...', 2],
+      coder:    ['fighting_bug',  '😭 Again?!', 5],
+      deployer: ['idle',          '⏳ Waiting', 2],
+    },
+    'user_action:deploy_confirm': {
+      deployer: ['deploying',    '🚀 DEPLOYING!', 6],
+      coder:    ['celebrating',  '🙏 Finally!', 4],
+    },
+    'user_action:feature_submitted': {
+      pm:       ['working',      `📋 NEW TASK!`, 5],
+      arch:     ['idle',         '👀 Incoming', 3],
+      coder:    ['idle',         '☕ BRB...', 2],
+    },
+    // Pipeline events
+    'feature_approved': {
+      pm:       ['celebrating', '✅ APPROVED!', 4],
+      arch:     ['celebrating', '🎉 Let\'s go!', 4],
+      coder:    ['celebrating', '🙌 YES!!!', 4],
+    },
+    'feature_rejected': {
+      pm:       ['frustrated',  '❌ REJECTED', 3],
+      coder:    ['fighting_bug','😭 Fix time!', 5],
+    },
+    'deploy_success': {
+      deployer: ['celebrating', '🚀 SHIPPED!',  5],
+      pm:       ['celebrating', '🎉 Amazing!',  4],
+      coder:    ['celebrating', '🥳 We did it!',4],
+    },
+    'deploy_failed': {
+      deployer: ['frustrated',  '💥 FAILED!',  4],
+      pm:       ['frustrated',  '😱 Oh no!',   3],
+    },
+    'feature_created': {
+      pm:       ['working',     '📋 NEW TASK!', 5],
+    },
+    'review_complete': {
+      pm:       ['waiting_input','🔍 Review done', 4],
+    },
+    'autopilot_toggled': {
+      pm:       ['celebrating', data?.mode === 'auto' ? '🤖 AUTO ON!' : '👋 MANUAL', 3],
+    },
+  };
+
+  // Support "user_action:<action>" composite key
+  let key = event;
+  if (event === 'user_action' && data?.action) key = `user_action:${data.action}`;
+
+  const reactionMap = REACTIONS[key];
+  if (!reactionMap) return;
+
+  // Apply reactions only to chars in this specific project
+  for (const [role, [state, bubble, dur]] of Object.entries(reactionMap)) {
+    const char = characters.get(`${projectName}:${role}`);
+    if (char) char.react(state, bubble, dur);
+  }
+
+  // Sound effects for events
+  if (soundFx) {
+    if (key.includes('approve') || key === 'feature_approved') soundFx.playNotification();
+    if (key.includes('reject') || key === 'feature_rejected') soundFx.playError();
+    if (key === 'deploy_success') soundFx.playAchievement();
+    if (key === 'deploy_failed') soundFx.playError();
+  }
+
+  // Show a brief notification banner
+  if (effects) {
+    const labels = {
+      'user_action:approve':         '✅ User approved!',
+      'user_action:reject':          '❌ User rejected',
+      'user_action:deploy_confirm':  '🚀 Deploying...',
+      'user_action:feature_submitted':'📋 New task submitted',
+      'feature_approved':            '✅ Approved',
+      'feature_rejected':            '❌ Rejected — fixing...',
+      'deploy_success':              '🎉 Deployed successfully!',
+      'deploy_failed':               '💥 Deploy failed',
+    };
+    const label = labels[key];
+    if (label) effects.showBanner(label, `${projectName}${data?.username ? ' (by @' + data.username + ')' : ''}`, 3);
+  }
+
+  addActivity(projectName, `[${event}]${data?.username ? ' @' + data.username : ''}`);
+}
+
+function stageToMessage(stage, feature) {
+  const msgs = {
+    idle:                     'All agents idle',
+    spec:                     'PM writing spec...',
+    spec_complete:            'Spec complete!',
+    architecture:             'Architect designing...',
+    arch_complete:            'Architecture ready!',
+    implementation:           'Coder implementing...',
+    implementation_complete:  'Implementation done!',
+    review:                   'Code review in progress...',
+    review_complete:          'Review complete',
+    approved:                 'Approved!',
+    deploying:                'Deploying...',
+    deployed:                 'Deployed successfully!',
+    rejected:                 'Rejected - fixing bugs...',
+  };
+  const suffix = feature ? ` [${feature}]` : '';
+  return (msgs[stage] || `Stage: ${stage}`) + suffix;
+}
+
+// ── Character Creation ──────────────────────────────────────────────────────
+
+function createCharacters() {
+  characters.clear();
+
+  // Default team colors if config doesn't supply one
+  const DEFAULT_TEAM_COLORS = ['#4A90D9', '#27AE60', '#E8A020', '#D04040', '#8050D0'];
+
+  projectConfigs.forEach((config, projIdx) => {
+    const positions = layout.getCharacterPositions(config.name);
+    const teamColor = config.color || DEFAULT_TEAM_COLORS[projIdx % DEFAULT_TEAM_COLORS.length];
+
+    for (const role of ['pm', 'arch', 'coder', 'deployer']) {
+      const pos = positions[role] || { x: 0, y: 0 };
+      const char = new Character(role, config.name, pos.x, pos.y);
+      char.setHome(pos.x, pos.y);
+      char.projectColor = teamColor;
+      char.projectIndex = projIdx;
+      characters.set(`${config.name}:${role}`, char);
+    }
+  });
+}
+
+// ── UI Interactions ─────────────────────────────────────────────────────────
+
+function showCharPopup(char, screenX, screenY) {
+  const popup = document.getElementById('char-popup');
+  if (!popup) return;
+
+  const info = char.getInfo();
+  const projectState = projectStates.find(p => p.name === char.project);
+  const projConfig = projectConfigs.find(c => c.name === char.project);
+  const projUrl = projConfig?.url || '';
+
+  document.getElementById('popup-title').textContent = `${info.role} (${info.ai})`;
+  document.getElementById('popup-project').textContent = `${projConfig?.icon || ''} ${info.project}`.trim();
+  document.getElementById('popup-status').textContent = formatState(info.state);
+  document.getElementById('popup-model').textContent = info.ai;
+  document.getElementById('popup-task').textContent = projectState?.status?.current_feature || '—';
+  document.getElementById('popup-duration').textContent = formatDuration(char.stateTime);
+
+  // Extra details
+  const stage = projectState?.status?.stage || '';
+  const extra = document.getElementById('popup-extra');
+  if (extra) {
+    const parts = [];
+    if (stage) parts.push(`Stage: ${stage}`);
+    if (info.idleBehavior) parts.push(`Idle: ${info.idleBehavior}`);
+    if (char.workBubble) parts.push(`Thinking: ${char.workBubble}`);
+    const rejReason = projectState?.status?.rejection_reason;
+    if (rejReason && info.state === 'fighting_bug') parts.push(`Last reject: ${rejReason.slice(0, 40)}`);
+    extra.textContent = parts.join(' · ');
+  }
+
+  // Show role-specific menu
+  const allMenus = ['popup-pm-menu', 'popup-arch-menu', 'popup-coder-menu', 'popup-deployer-menu'];
+  allMenus.forEach(id => document.getElementById(id)?.classList.add('hidden'));
+
+  const menuMap = { pm: 'popup-pm-menu', arch: 'popup-arch-menu', coder: 'popup-coder-menu', deployer: 'popup-deployer-menu' };
+  const menuId = menuMap[char.role];
+  if (menuId) document.getElementById(menuId)?.classList.remove('hidden');
+
+  if (char.role === 'pm') {
+    clickedPMProject = char.project;
+  }
+
+  // ── Pipeline action menu (stage-aware, shown for all roles) ──
+  const pipelineMenu = document.getElementById('popup-pipeline-menu');
+  if (pipelineMenu) {
+    pipelineMenu.classList.remove('hidden');
+    const currentStage = projectState?.status?.stage || 'idle';
+
+    // Define which actions are allowed per stage
+    const stageActions = {
+      idle:                      ['implement', 'cleanup', 'reset'],
+      inbox:                     ['implement', 'cleanup', 'reset'],
+      spec:                      ['cleanup', 'reset'],
+      spec_complete:             ['cleanup', 'reset'],
+      architecture:              ['cleanup', 'reset'],
+      arch_complete:             ['implement', 'cleanup', 'reset'],
+      implementation:            ['cleanup', 'reset'],
+      implementation_complete:   ['review', 'approve', 'reject', 'cleanup', 'reset'],
+      review:                    ['cleanup', 'reset'],
+      review_complete:           ['approve', 'reject', 'fix', 'cleanup', 'reset'],
+      approved:                  ['deploy', 'cleanup', 'reset'],
+      deploying:                 ['cleanup', 'reset'],
+      deployed:                  ['cleanup', 'reset'],
+      rejected:                  ['fix', 'review', 'cleanup', 'reset'],
+      fix:                       ['cleanup', 'reset'],
+    };
+    const allowed = new Set(stageActions[currentStage] || ['cleanup', 'reset']);
+
+    pipelineMenu.querySelectorAll('.btn-action').forEach(btn => {
+      const action = btn.dataset.pipeline;
+      if (allowed.has(action)) {
+        btn.classList.remove('pipeline-hidden');
+      } else {
+        btn.classList.add('pipeline-hidden');
+      }
+    });
+
+    // Wire click handlers
+    const projName = char.project;
+    pipelineMenu.querySelectorAll('.btn-action').forEach(btn => {
+      const originalLabel = btn.textContent;
+      btn.onclick = async () => {
+        const action = btn.dataset.pipeline;
+        btn.disabled = true;
+        btn.textContent = '⏳...';
+        try {
+          await sendAction(projName, action);
+          addActivity(projName, `⚡ ${action.toUpperCase()} triggered from office UI`);
+          hidePopups();
+        } catch (e) {
+          addActivity(projName, `❌ ${action} failed: ${e.message}`);
+        } finally {
+          btn.disabled = false;
+          btn.textContent = originalLabel;
+        }
+      };
+    });
+  }
+
+  // Wire role-specific buttons
+  const openLogs = () => { if (projUrl) window.open(projUrl, '_blank'); else showFeaturesPanel(char.project); };
+  const openDocs = () => showFeaturesPanel(char.project);
+
+  // Architect
+  const archDocs = document.getElementById('popup-arch-docs');
+  const archLogs = document.getElementById('popup-arch-logs');
+  if (archDocs) archDocs.onclick = openDocs;
+  if (archLogs) archLogs.onclick = openLogs;
+
+  // Coder
+  const coderReview = document.getElementById('popup-coder-review');
+  const coderLogs = document.getElementById('popup-coder-logs');
+  if (coderReview) coderReview.onclick = async () => {
+    try {
+      await sendAction(char.project, 'review');
+      addActivity(char.project, '🔍 Review triggered from coder menu');
+      hidePopups();
+    } catch (e) { addActivity(char.project, `❌ Review failed: ${e.message}`); }
+  };
+  if (coderLogs) coderLogs.onclick = openLogs;
+
+  // Deployer
+  const deployerDeploy = document.getElementById('popup-deployer-deploy');
+  const deployerLogs = document.getElementById('popup-deployer-logs');
+  if (deployerDeploy) deployerDeploy.onclick = async () => {
+    try {
+      await sendAction(char.project, 'deploy');
+      addActivity(char.project, '🚀 Deploy triggered from deployer menu');
+      hidePopups();
+    } catch (e) { addActivity(char.project, `❌ Deploy failed: ${e.message}`); }
+  };
+  if (deployerLogs) deployerLogs.onclick = openLogs;
+
+  // Position popup
+  const maxX = window.innerWidth - 300;
+  const maxY = window.innerHeight - 300;
+  popup.style.left = `${Math.min(screenX + 10, maxX)}px`;
+  popup.style.top = `${Math.min(screenY - 10, maxY)}px`;
+  popup.classList.remove('hidden');
+}
+
+/** Send a pipeline action via REST API (routes through hub if available) */
+async function sendAction(project, action) {
+  // Hub mode: route through hub proxy to avoid cross-origin issues
+  if (hubBaseUrl) {
+    const res = await fetch(`${hubBaseUrl}/api/projects/${encodeURIComponent(project)}/action/${encodeURIComponent(action)}`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ action }),
+    });
+    if (!res.ok) {
+      const err = await res.json().catch(() => ({}));
+      throw new Error(err.error || `HTTP ${res.status}`);
+    }
+    return res.json();
+  }
+  // Standalone mode: send to local API
+  const res = await fetch(`/api/${action}`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ project, action }),
+  });
+  if (!res.ok) throw new Error(`HTTP ${res.status}`);
+  return res.json();
+}
+
+function handlePMAction(action) {
+  hidePopups();
+
+  if (action === 'bug' || action === 'feature') {
+    // Open submit modal pre-filled
+    const modal = document.getElementById('submit-modal');
+    const typeSelect = document.getElementById('submit-type');
+    const projectSelect = document.getElementById('submit-project');
+
+    if (typeSelect) typeSelect.value = action === 'bug' ? 'bug' : 'feature';
+    if (projectSelect && clickedPMProject) {
+      for (const opt of projectSelect.options) {
+        if (opt.value === clickedPMProject) {
+          opt.selected = true;
+          break;
+        }
+      }
+    }
+    modal?.classList.remove('hidden');
+  } else if (action === 'status') {
+    const state = projectStates.find(p => p.name === clickedPMProject);
+    if (state) {
+      const stage = state.status?.stage || 'idle';
+      const feature = state.status?.current_feature || 'none';
+      addActivity(clickedPMProject, `Status check: ${stage} | Feature: ${feature}`);
+    }
+  }
+}
+
+// Bug 4: Show package info popup
+function showPackagePopup(pkgInfo, screenX, screenY) {
+  const panel = document.getElementById('features-panel');
+  if (!panel) return;
+
+  const { project, pkg, index, total } = pkgInfo;
+  const ts = new Date(pkg.time);
+  const timeStr = ts.toLocaleDateString() + ' ' + ts.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+
+  document.getElementById('fp-title').textContent = `📦 ${pkg.name}`;
+  document.getElementById('fp-body').innerHTML =
+    `<div class="fp-row"><span class="label">Project:</span> <span>${project}</span></div>` +
+    `<div class="fp-row"><span class="label">Feature:</span> <span>${pkg.name}</span></div>` +
+    `<div class="fp-row"><span class="label">Shipped:</span> <span>${timeStr}</span></div>` +
+    `<div class="fp-row"><span class="label">Package #:</span> <span>${index + 1} of ${total}</span></div>` +
+    `<div class="fp-row"><span class="label">Status:</span> <span style="color:#40d060">✅ DEPLOYED</span></div>`;
+
+  const maxX = window.innerWidth - 280;
+  panel.style.left = `${Math.min(screenX + 10, maxX)}px`;
+  panel.style.top = `${Math.min(screenY - 10, window.innerHeight - 220)}px`;
+  panel.classList.remove('hidden');
+}
+
+// Bug 6: Show features history panel
+function showFeaturesPanel(projectName) {
+  const panel = document.getElementById('features-panel');
+  if (!panel) return;
+
+  const state = projectStates.find(p => p.name === projectName);
+  const history = state?.status?.history || [];
+  const current = state?.status?.current_feature || '';
+  const stage = state?.status?.stage || 'idle';
+
+  document.getElementById('fp-title').textContent = `📋 ${projectName} — Features`;
+
+  const rows = [];
+  if (current) {
+    rows.push(`<div class="fp-row fp-current"><span class="label">🔄 Active:</span> <span>${current} [${stage}]</span></div>`);
+  }
+  if (history.length) {
+    rows.push(`<div class="fp-row"><span class="label">History (${history.length}):</span></div>`);
+    for (const h of [...history].reverse().slice(0, 12)) {
+      const icon = h.stage === 'deployed' ? '✅' : h.stage === 'rejected' ? '❌' : '⏳';
+      rows.push(`<div class="fp-row">${icon} <span style="font-size:9px">${h.id || h}</span></div>`);
+    }
+  } else {
+    rows.push(`<div class="fp-row">No history yet.</div>`);
+  }
+  document.getElementById('fp-body').innerHTML = rows.join('');
+
+  panel.style.left = '50%';
+  panel.style.top = '80px';
+  panel.style.transform = 'translateX(-50%)';
+  panel.classList.remove('hidden');
+}
+
+function formatState(state) {
+  const stateNames = {
+    sleeping: 'Sleeping',
+    walking: 'Walking',
+    working: 'Working',
+    thinking: 'Thinking',
+    reviewing: 'Reviewing code',
+    designing: 'Designing architecture',
+    fighting_bug: 'Fighting bugs!',
+    celebrating: 'Celebrating!',
+    frustrated: 'Frustrated',
+    rate_limited: 'Rate limited',
+    deploying: 'Deploying',
+    waiting_input: 'Waiting for input',
+    handing_off: 'Handing off work',
+    coffee_break: 'Coffee break',
+  };
+  return stateNames[state] || state;
+}
+
+function formatDuration(seconds) {
+  if (seconds < 60) return `${Math.floor(seconds)}s`;
+  const m = Math.floor(seconds / 60);
+  const s = Math.floor(seconds % 60);
+  return `${m}m ${s}s`;
+}
+
+function showTeamPanel(projectName, _config) {
+  const state = projectStates.find(p => p.name === projectName);
+  const stage = state?.status?.stage || 'idle';
+  const feature = state?.status?.current_feature || 'none';
+  addActivity(projectName, `Team overview: ${formatState(stage)} | ${feature}`);
+}
+
+function hidePopups() {
+  document.getElementById('char-popup')?.classList.add('hidden');
+}
+
+function updateProjectDropdown() {
+  const select = document.getElementById('submit-project');
+  if (!select) return;
+  select.innerHTML = '';
+  for (const config of projectConfigs) {
+    const opt = document.createElement('option');
+    opt.value = config.name;
+    opt.textContent = `${config.icon || ''} ${config.name}`.trim();
+    select.appendChild(opt);
+  }
+}
+
+async function submitFeature() {
+  const project = document.getElementById('submit-project')?.value;
+  const type = document.getElementById('submit-type')?.value;
+  const mode = document.getElementById('submit-mode')?.value;
+  const desc = document.getElementById('submit-desc')?.value?.trim();
+
+  if (!project || !desc) return;
+
+  try {
+    // Hub mode: route to the specific project via hub
+    let featureUrl = '/api/feature';
+    if (hubBaseUrl) {
+      featureUrl = `${hubBaseUrl}/api/projects/${encodeURIComponent(project)}/feature`;
+    }
+    const res = await fetch(featureUrl, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ description: desc, mode, type }),
+    });
+    if (!res.ok) throw new Error(`HTTP ${res.status}`);
+    addActivity(project, `Submitted ${type}: ${desc.slice(0, 60)}...`);
+    document.getElementById('submit-modal')?.classList.add('hidden');
+    document.getElementById('submit-desc').value = '';
+    if (soundFx) soundFx.playNotification();
+  } catch (e) {
+    addActivity(project, `Submit failed: ${e.message}`);
+  }
+}
+
+// ── Activity Feed ───────────────────────────────────────────────────────────
+
+function addActivity(project, message) {
+  const now = new Date();
+  const time = `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}`;
+
+  activityLog.unshift({ time, project, message });
+  if (activityLog.length > 50) activityLog.length = 50;
+
+  const container = document.getElementById('feed-entries');
+  if (!container) return;
+
+  const entry = document.createElement('div');
+  entry.className = 'feed-entry';
+  entry.innerHTML = `<span class="time">[${time}]</span> <span class="project">${project}:</span> <span class="msg">${message}</span>`;
+  container.insertBefore(entry, container.firstChild);
+
+  while (container.children.length > 30) {
+    container.removeChild(container.lastChild);
+  }
+}
+
+// ── Slash Command System ────────────────────────────────────────────────────
+
+const SLASH_COMMANDS = [
+  { cmd: '/status',   icon: '\u{1F4CA}', desc: 'Show pipeline status' },
+  { cmd: '/feature',  icon: '\u{2728}',  desc: 'Submit a new feature' },
+  { cmd: '/approve',  icon: '\u{2705}',  desc: 'Approve current feature' },
+  { cmd: '/reject',   icon: '\u{274C}',  desc: 'Reject current feature' },
+  { cmd: '/deploy',   icon: '\u{1F680}', desc: 'Deploy approved feature' },
+  { cmd: '/reset',    icon: '\u{1F504}', desc: 'Reset pipeline to idle' },
+  { cmd: '/review',   icon: '\u{1F50D}', desc: 'Trigger code review' },
+  { cmd: '/health',   icon: '\u{1F49A}', desc: 'Check system health' },
+  { cmd: '/costs',    icon: '\u{1F4B0}', desc: 'Show token costs' },
+  { cmd: '/help',     icon: '\u{2753}',  desc: 'Show all commands' },
+];
+
+let cmdSelectedIndex = 0;
+
+function initCommandBar() {
+  const bar = document.getElementById('command-bar');
+  const input = document.getElementById('command-input');
+  const dropdown = document.getElementById('command-dropdown');
+  if (!bar || !input || !dropdown) return;
+
+  // Global "/" key opens command bar (only when not already in a text input)
+  document.addEventListener('keydown', (e) => {
+    if (e.key === '/' && !isInTextInput(e.target)) {
+      e.preventDefault();
+      showCommandBar();
+    }
+  });
+
+  // Input events
+  input.addEventListener('input', () => {
+    const val = input.value;
+    if (val.startsWith('/')) {
+      const filtered = filterCommands(val);
+      renderDropdown(filtered);
+    } else {
+      hideDropdown();
+    }
+  });
+
+  input.addEventListener('keydown', (e) => {
+    const items = dropdown.querySelectorAll('.command-dropdown-item');
+
+    if (e.key === 'Escape') {
+      e.preventDefault();
+      hideCommandBar();
+      return;
+    }
+
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      cmdSelectedIndex = Math.min(cmdSelectedIndex + 1, items.length - 1);
+      updateActiveItem(items);
+      return;
+    }
+
+    if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      cmdSelectedIndex = Math.max(cmdSelectedIndex - 1, 0);
+      updateActiveItem(items);
+      return;
+    }
+
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      const activeItem = items[cmdSelectedIndex];
+      if (activeItem) {
+        executeSlashCommand(activeItem.dataset.cmd);
+      } else {
+        // Try to match typed text directly
+        const val = input.value.trim().toLowerCase();
+        const match = SLASH_COMMANDS.find(c => c.cmd === val);
+        if (match) executeSlashCommand(match.cmd);
+      }
+      return;
+    }
+
+    if (e.key === 'Tab') {
+      e.preventDefault();
+      const activeItem = items[cmdSelectedIndex];
+      if (activeItem) {
+        input.value = activeItem.dataset.cmd;
+        const filtered = filterCommands(input.value);
+        renderDropdown(filtered);
+      }
+    }
+  });
+
+  // Click outside closes command bar
+  document.addEventListener('mousedown', (e) => {
+    if (bar.style.display !== 'none' && !bar.contains(e.target)) {
+      hideCommandBar();
+    }
+  });
+}
+
+function isInTextInput(el) {
+  const tag = el.tagName?.toLowerCase();
+  return tag === 'input' || tag === 'textarea' || tag === 'select' || el.isContentEditable;
+}
+
+function showCommandBar() {
+  const bar = document.getElementById('command-bar');
+  const input = document.getElementById('command-input');
+  bar.style.display = 'block';
+  input.value = '/';
+  input.focus();
+  // Set cursor to end
+  input.setSelectionRange(1, 1);
+  const filtered = filterCommands('/');
+  renderDropdown(filtered);
+}
+
+function hideCommandBar() {
+  const bar = document.getElementById('command-bar');
+  const input = document.getElementById('command-input');
+  bar.style.display = 'none';
+  input.value = '';
+  hideDropdown();
+}
+
+function filterCommands(text) {
+  const query = text.slice(1).toLowerCase(); // remove leading "/"
+  if (!query) return SLASH_COMMANDS;
+  return SLASH_COMMANDS.filter(c =>
+    c.cmd.slice(1).includes(query) || c.desc.toLowerCase().includes(query)
+  );
+}
+
+function renderDropdown(commands) {
+  const dropdown = document.getElementById('command-dropdown');
+  if (commands.length === 0) {
+    dropdown.innerHTML = '<div class="command-dropdown-hint">NO MATCHING COMMANDS</div>';
+    dropdown.classList.add('visible');
+    return;
+  }
+
+  cmdSelectedIndex = 0;
+  dropdown.innerHTML = commands.map((c, i) =>
+    `<div class="command-dropdown-item${i === 0 ? ' active' : ''}" data-cmd="${c.cmd}">
+      <span class="cmd-icon">${c.icon}</span>
+      <div class="cmd-info">
+        <span class="cmd-name">${c.cmd}</span>
+        <span class="cmd-desc">${c.desc}</span>
+      </div>
+    </div>`
+  ).join('') + '<div class="command-dropdown-hint">ENTER to select / ESC to close</div>';
+
+  dropdown.classList.add('visible');
+
+  // Click handlers for dropdown items
+  dropdown.querySelectorAll('.command-dropdown-item').forEach(item => {
+    item.addEventListener('click', () => {
+      executeSlashCommand(item.dataset.cmd);
+    });
+  });
+}
+
+function hideDropdown() {
+  const dropdown = document.getElementById('command-dropdown');
+  dropdown.classList.remove('visible');
+  dropdown.innerHTML = '';
+}
+
+function updateActiveItem(items) {
+  items.forEach((item, i) => {
+    item.classList.toggle('active', i === cmdSelectedIndex);
+  });
+  // Scroll active item into view
+  const active = items[cmdSelectedIndex];
+  if (active) active.scrollIntoView({ block: 'nearest' });
+}
+
+async function executeSlashCommand(cmd) {
+  hideCommandBar();
+
+  // Determine which project to target (first available or clicked PM project)
+  const project = clickedPMProject || projectConfigs[0]?.name || 'default';
+
+  switch (cmd) {
+    case '/feature': {
+      // Open the submit modal for feature input
+      const modal = document.getElementById('submit-modal');
+      const typeSelect = document.getElementById('submit-type');
+      if (typeSelect) typeSelect.value = 'feature';
+      modal?.classList.remove('hidden');
+      // Focus the description field
+      setTimeout(() => document.getElementById('submit-desc')?.focus(), 100);
+      return;
+    }
+
+    case '/help': {
+      // Show all commands in activity feed
+      addActivity('System', '--- SLASH COMMANDS ---');
+      for (const c of SLASH_COMMANDS) {
+        addActivity('System', `${c.icon} ${c.cmd} - ${c.desc}`);
+      }
+      return;
+    }
+
+    case '/status': {
+      // Show status for all projects
+      if (projectStates.length === 0) {
+        addActivity('System', 'No projects connected');
+        return;
+      }
+      for (const state of projectStates) {
+        const stage = state.status?.stage || 'idle';
+        const feature = state.status?.current_feature || 'none';
+        addActivity(state.name, `Status: ${stage} | Feature: ${feature}`);
+      }
+      return;
+    }
+
+    case '/health': {
+      // Fetch health from API
+      try {
+        const url = hubBaseUrl ? `${hubBaseUrl}/api/health` : '/api/health';
+        const res = await fetch(url);
+        const data = await res.json();
+        addActivity('System', `Health: ${JSON.stringify(data).slice(0, 120)}`);
+      } catch (e) {
+        addActivity('System', `Health check failed: ${e.message}`);
+      }
+      return;
+    }
+
+    case '/costs': {
+      // Fetch costs from API
+      try {
+        const url = hubBaseUrl ? `${hubBaseUrl}/api/costs` : '/api/costs';
+        const res = await fetch(url);
+        const data = await res.json();
+        const total = data.totalCost != null ? `$${data.totalCost.toFixed(4)}` : JSON.stringify(data).slice(0, 100);
+        addActivity('System', `Token costs: ${total}`);
+      } catch (e) {
+        addActivity('System', `Costs fetch failed: ${e.message}`);
+      }
+      return;
+    }
+
+    // Simple action commands: approve, reject, deploy, reset, review
+    default: {
+      const action = cmd.slice(1); // remove "/"
+      try {
+        addActivity(project, `${cmd} triggered from command bar`);
+        await sendAction(project, action);
+        addActivity(project, `${cmd} completed`);
+        if (soundFx) soundFx.playNotification();
+      } catch (e) {
+        addActivity(project, `${cmd} failed: ${e.message}`);
+      }
+      return;
+    }
+  }
+}
+
+// ── Boot ────────────────────────────────────────────────────────────────────
+document.addEventListener('DOMContentLoaded', init);