ai-control-center 1.15.2

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

@@ -0,0 +1,1056 @@
+/**
+ * Character — pixel art RPG character with state machine, pathfinding,
+ * sprite animation, and idle social behaviors (wander, gossip, gym, eat, sleep).
+ */
+
+import { renderSprite, renderPixelText, PIXEL_SIZE } from './sprite-renderer.js';
+import { getSprite, ROLE_COLORS } from './pixel-sprites.js';
+import { getEffects } from './effects.js';
+import { getPathfinder } from './pathfinding.js';
+
+// ── Pipeline stage → character states ──────────────────────────────────────────
+const STAGE_MAP = {
+  '':                        { pm: 'idle',        arch: 'idle',      coder: 'idle',        deployer: 'idle' },
+  'inbox':                   { pm: 'working',     arch: 'idle',      coder: 'idle',        deployer: 'idle' },
+  'spec':                    { pm: 'working',     arch: 'idle',      coder: 'idle',        deployer: 'idle' },
+  'spec_complete':           { pm: 'celebrating', arch: 'walking',   coder: 'idle',        deployer: 'idle' },
+  'architecture':            { pm: 'idle',        arch: 'designing', coder: 'idle',        deployer: 'idle' },
+  'arch_complete':           { pm: 'idle',        arch: 'celebrating', coder: 'walking',   deployer: 'idle' },
+  'implementation':          { pm: 'idle',        arch: 'idle',      coder: 'working',     deployer: 'idle' },
+  'implementation_complete': { pm: 'idle',        arch: 'idle',      coder: 'celebrating', deployer: 'idle' },
+  'review':                  { pm: 'reviewing',   arch: 'idle',      coder: 'waiting_input', deployer: 'idle' },
+  'review_complete':         { pm: 'idle',        arch: 'idle',      coder: 'idle',        deployer: 'idle' },
+  'approved':                { pm: 'celebrating', arch: 'celebrating', coder: 'celebrating', deployer: 'waiting_input' },
+  'deploying':               { pm: 'idle',        arch: 'idle',      coder: 'idle',        deployer: 'deploying' },
+  'deployed':                { pm: 'celebrating', arch: 'celebrating', coder: 'celebrating', deployer: 'celebrating' },
+  'rejected':                { pm: 'frustrated',  arch: 'idle',      coder: 'fighting_bug', deployer: 'idle' },
+};
+
+const ROLES = {
+  pm:       { label: 'PM',        spriteKey: 'pm',       ai: 'PM',        color: ROLE_COLORS.pm },
+  arch:     { label: 'Architect', spriteKey: 'architect', ai: 'Architect', color: ROLE_COLORS.architect },
+  coder:    { label: 'Coder',     spriteKey: 'coder',    ai: 'Coder',     color: ROLE_COLORS.coder },
+  deployer: { label: 'Deployer',  spriteKey: 'deployer', ai: 'Deployer',  color: ROLE_COLORS.deployer },
+};
+
+const WALK_STATES = new Set(['walking', 'handing_off']);
+const SPRITE_W = 16 * PIXEL_SIZE;
+const SPRITE_H = 24 * PIXEL_SIZE;
+
+// ── Idle behavior types ──────────────────────────────────────────────────────
+const IDLE_BEHAVIORS = ['wander', 'gossip', 'gossip', 'gym', 'breakRoom', 'coffee', 'sleep', 'poke', 'highfive', 'phone', 'stretch', 'meeting'];
+
+// Gossip phrases (what characters say when chatting idle)
+const GOSSIP_LINES = [
+  // Work-related casual
+  'Did you see the new feature?',
+  'The tests are flaky again...',
+  'Need more coffee...',
+  'Sprint review tomorrow!',
+  'That bug was tricky!',
+  'Who broke the build?',
+  'Lunch plans?',
+  'Nice refactor!',
+  'PR looks good to me',
+  'Ship it!',
+  'Standup in 5 min',
+  'API is slow today...',
+  'Love the new UI!',
+  'Merge conflicts again...',
+  'Great code review!',
+  'Time for a break',
+  'The deploy went smooth!',
+  'Any blockers?',
+  'Working on the fix now',
+  'Almost done!',
+  // Office banter
+  'Who ate my lunch?',
+  'Meeting could be an email',
+  'The WiFi is slow again',
+  'Love this weather!',
+  'Weekend plans?',
+  'Did you watch the game?',
+  'New phone who dis?',
+  'Coffee run anyone?',
+  'The AC is freezing!',
+  'Happy Friday!',
+  // Tech humor
+  'It works on my machine',
+  'Have you tried restarting?',
+  'Stack Overflow saves lives',
+  'Git blame says it was you',
+  'Tabs or spaces?',
+  'Is it a feature or a bug?',
+  'The cloud is just servers',
+  '404 motivation not found',
+  'sudo make me a sandwich',
+  'There are 10 types of people',
+  // Social
+  'Great job yesterday!',
+  'How is your project going?',
+  'Any fun plans tonight?',
+  'That presentation was awesome',
+  'New coffee machine rocks!',
+  'The gym here is nice',
+  'Have you tried the new place?',
+  'Team dinner this week?',
+  'Congrats on the promotion!',
+  'Love your desk setup!',
+  // Philosophical
+  'Is AI coming for our jobs?',
+  'Agile or waterfall?',
+  'Monolith or microservices?',
+  'REST or GraphQL?',
+  'To deploy or not to deploy',
+  'The code review was rough',
+  'Thats a clever solution!',
+  'Who writes the docs anyway?',
+  // Daily life
+  'Traffic was terrible today',
+  'My cat stepped on my keyboard',
+  'Dog ate my USB cable',
+  'Forgot my badge again',
+  'Elevator is broken again',
+  'Parking was a nightmare',
+  'The vending machine is empty',
+  'Did you see the sunset?',
+  // Celebrations
+  'We hit the milestone!',
+  'Another sprint done!',
+  'Zero bugs this week!',
+  'Client loved the demo!',
+  'Performance is up 40%!',
+  'All tests green!',
+  'Deployment was flawless!',
+  'New record uptime!',
+  // Complaints
+  'JIRA is down again',
+  'Too many meetings today',
+  'My back hurts from sitting',
+  'Need a standing desk',
+  'Slack notifications overload',
+  'Email inbox is a disaster',
+  'The printer never works',
+  'VPN disconnected again',
+  // Random fun
+  'Anyone want to play ping pong?',
+  'Movie night this Friday?',
+  'Boba tea run?',
+  'Pizza or sushi for lunch?',
+  'New season is out on Netflix',
+  'That meme was hilarious',
+  'Best commit message ever',
+  'My code compiled first try!',
+  'Rubber duck debugging works',
+  'The intern fixed the bug!',
+  'Senior dev was wrong!',
+  'Pair programming is fun',
+  'Code kata this afternoon?',
+  'Hackathon next month!',
+  'Open source contribution day',
+  'Tech conference next week',
+  'New framework dropped!',
+  'TypeScript saves lives',
+  'Linting catches everything',
+  'CI/CD pipeline is beautiful',
+];
+
+// Thought bubbles shown while characters are actively working
+const WORK_MESSAGES = {
+  pm:       ['📝 Writing spec...', '🤔 Requirements?', '📊 Roadmap!', '🎯 Scope defined', '💼 Stakeholders', '🗺 User stories', '✅ Acceptance criteria'],
+  arch:     ['🏗 Architecture...', '💡 Design pattern?', '🔧 Scalability!', '📐 Diagrams...', '⚡ Optimize!', '🧩 Microservices?', '📦 Clean layers'],
+  coder:    ['💻 Coding...', '🔍 Debugging...', '🐛 Found it!', '⌨️ Refactor...', '✅ Tests pass!', '🔥 Edge case!', '💡 Better way?', '🚀 Almost done!'],
+  deployer: ['🚀 Deploying...', '⚙️ Config check', '🐳 Build image', '✅ Health check', '🔄 Rollback ready', '📦 Packaging...', '🌐 DNS updated'],
+  deployer_standby: ['📦 Package ready!', '🚀 Awaiting signal...', '⚙️ Preflight check...', '🔑 Credentials OK', '🐳 Docker image built', '✅ Env vars set', '🌐 Prod cluster ready', '🔄 Rollback plan set', '📋 Deploy checklist ✓', '💾 DB backup done'],
+};
+
+// Feature-related discussion lines (used instead of gossip when team is working)
+const FEATURE_DISCUSS_LINES = [
+  'About this feature...',
+  'The spec looks good!',
+  'Any edge cases?',
+  'Architecture ready?',
+  'Need your input!',
+  'Tests for this?',
+  'Lets sync up!',
+  'Good progress!',
+  'Blocking issue?',
+  'Almost there!',
+  'Deploy plan?',
+  'Review notes...',
+  'Scope change?',
+  'Nice design!',
+  'QA check?',
+  // Technical discussions
+  'What about error handling?',
+  'Should we add caching?',
+  'The API contract looks solid',
+  'Need a migration script?',
+  'Backwards compatible?',
+  'Performance impact?',
+  'Security review needed',
+  'Database schema change?',
+  'Unit test coverage?',
+  'Integration test plan?',
+  'Load testing results?',
+  'The mock data is ready',
+  'Code review comments addressed',
+  'Docs updated for this?',
+  'Release notes drafted',
+  // Planning
+  'Sprint capacity check?',
+  'Dependencies resolved?',
+  'Stakeholder approval?',
+  'UAT environment ready?',
+  'Feature flag needed?',
+  'Rollback strategy?',
+  'Monitoring in place?',
+  'Logging sufficient?',
+  'Alert thresholds set?',
+  'Timeline on track?',
+  // Collaboration
+  'Lets whiteboard this',
+  'Can you pair on this?',
+  'Review my approach?',
+  'Second opinion needed',
+  'Knowledge transfer done?',
+  'Handoff checklist ready',
+  'Demo prep started?',
+  'Client feedback incorporated',
+  'Tech debt noted for later',
+  'Clean up after merge',
+];
+
+// Rejection-escalating messages for coder (shown when fighting bugs after rejection)
+const REJECTION_MESSAGES = [
+  ['😤 Fix review...', '🐛 Hunt the bug', '💻 Rework it!', '🔍 What changed?'],
+  ['😰 2nd reject!', '💦 Sweating...', '🙏 Please pass!', '😓 Nearly there'],
+  ['😭 3rd reject!', '🙏🙏 Praying...', '⛪ Dear God...', '💦 Full panic!', '🆘 HELP!!!'],
+  ['🤯 4th reject!', '🙏🙏🙏 GOD PLEASE', '😱 Why won\'t it pass', '💀 I give up...'],
+];
+
+// Social interaction lines
+const POKE_LINES = [
+  '👉 Hey!', '👉 Wake up!', '😜 Gotcha!', '👊 Boop!',
+  '🤪 Surprise!', '😏 Guess who?', '👋 Yo!', '🫵 Tag!',
+  '😝 Poke poke!', '🤭 Hi there!', '😂 Made you look!',
+  '🤓 Did you know?', '🧐 Ahem!', '🫠 Bored!',
+];
+
+const HIGHFIVE_LINES = [
+  '✋ High five!', '🙌 Teamwork!', '🤝 Nice one!', '👏 Bravo!',
+  '💪 Nailed it!', '🎯 Bullseye!', '⭐ Star player!', '🏆 Champions!',
+  '🔥 On fire!', '💯 Perfect!', '🚀 To the moon!', '🎉 Celebrate!',
+];
+
+const MEETING_LINES = [
+  'Lets sync on priorities',
+  'Quick status update?',
+  'Blocker discussion',
+  'Sprint retro notes',
+  'Timeline check-in',
+  'Dependency update',
+  'Risk assessment',
+  'Capacity planning',
+  'Action items review',
+  'Quick standup!',
+];
+
+/**
+ * Time-of-day weighted behavior selection.
+ * Returns a behavior from IDLE_BEHAVIORS with preferences based on hour.
+ */
+function pickTimeAwareBehavior() {
+  const hour = new Date().getHours();
+
+  // Time-of-day preferences: [behavior, extraWeight]
+  const boosts = [];
+
+  if (hour >= 6 && hour <= 9) {
+    // Morning: prefer coffee
+    boosts.push(['coffee', 4]);
+  }
+  if (hour >= 22 || hour <= 5) {
+    // Late night: prefer sleep
+    boosts.push(['sleep', 5]);
+  }
+  if (hour >= 12 && hour <= 14) {
+    // Lunch time: prefer gym / breakRoom
+    boosts.push(['gym', 3]);
+    boosts.push(['breakRoom', 3]);
+  }
+
+  // Build weighted pool: start with base list (weight 1 each)
+  const pool = IDLE_BEHAVIORS.slice();
+
+  // Add extra copies for boosted behaviors
+  for (const [beh, weight] of boosts) {
+    for (let i = 0; i < weight; i++) pool.push(beh);
+  }
+
+  return pool[Math.floor(Math.random() * pool.length)];
+}
+
+export class Character {
+  constructor(role, projectName, x, y) {
+    this.role = role;
+    this.project = projectName;
+    this.meta = ROLES[role];
+
+    // Position
+    this.x = x;
+    this.y = y;
+    this.targetX = x;
+    this.targetY = y;
+    this.homeX = x; // workstation position
+    this.homeY = y;
+    this.speed = 50;
+
+    // Pathfinding
+    this.path = [];
+    this.pathIndex = 0;
+
+    // Facing direction
+    this.facing = 'down';
+
+    // State
+    this.state = 'idle';
+    this.prevState = 'idle';
+    this.stateTime = 0;
+    this.isWorking = false;    // true when pipeline assigns work
+    this.isAtDesk = false;     // true when working character has reached their desk
+    this.isHandingOff = false; // true when delivering a ticket to another character
+
+    // Project-specific color badge (set by createCharacters in main.js)
+    this.projectColor = '#888888';
+    this.projectIndex = 0;
+    this.rejectionCount = 0; // escalates desperate reactions after each review rejection
+    this.currentFeature = ''; // current feature name for work discussions
+
+    // Task progress (driven by pipeline stage duration)
+    this.taskProgress = 0;   // 0.0 – 1.0
+    this.taskDuration = 0;   // estimated seconds for current phase
+
+    // Idle behavior
+    this.idleBehavior = null;    // current idle activity
+    this.idleTimer = 0;          // countdown to next idle action
+    this.idleDuration = 0;       // how long current idle activity lasts
+    this.gossipTarget = null;    // character we're gossiping with
+    this.gossipLine = '';        // what we're saying
+    this.gossipShowTime = 0;     // when to show the bubble
+
+    // Phone / stretch idle timers
+    this.phoneTimer = 0;
+    this.stretchTimer = 0;
+
+    // Work thought bubbles (shown while working)
+    this.workBubble = '';
+    this.workBubbleTimer = 2 + Math.random() * 4; // first bubble delay
+    this.workBubbleDuration = 0;
+
+    // Animation
+    this.animFrame = 0;
+    this.animTimer = 0;
+    this.animSpeed = 0.22;
+
+    // Rendering
+    this.bobOffset = 0;
+    this.shadow = true;
+
+    // Randomize initial idle timer so characters don't all act at once
+    this.idleTimer = 3 + Math.random() * 8;
+  }
+
+  /** Update state from pipeline stage */
+  setState(pipelineStage) {
+    const map = STAGE_MAP[pipelineStage] || STAGE_MAP[''];
+    const newState = map[this.role] || 'idle';
+
+    // Check if this is a "working" state
+    const workingStates = new Set(['working', 'designing', 'reviewing', 'deploying', 'fighting_bug', 'celebrating', 'frustrated', 'waiting_input', 'handing_off']);
+    this.isWorking = workingStates.has(newState);
+
+    if (newState !== this.state) {
+      this.prevState = this.state;
+      this.state = newState;
+      this.stateTime = 0;
+      this.animFrame = 0;
+
+      // If transitioning TO work, cancel idle behavior
+      if (this.isWorking) {
+        this.idleBehavior = null;
+        this.gossipTarget = null;
+        this.gossipLine = '';
+      }
+    }
+  }
+
+  /**
+   * Temporarily override state for a reaction, then restore.
+   * @param {string} reactionState  - e.g. 'celebrating', 'frustrated', 'waiting_input'
+   * @param {string} bubbleText     - optional speech bubble text
+   * @param {number} durationSec    - how long before reverting
+   */
+  react(reactionState, bubbleText = '', durationSec = 3) {
+    if (this._reactionTimer) clearTimeout(this._reactionTimer);
+    const saved = this.state;
+    this.prevState = saved;
+    this.state = reactionState;
+    this.stateTime = 0;
+    this.animFrame = 0;
+    if (bubbleText) {
+      this._reactionBubble = bubbleText;
+      this._reactionBubbleTimer = durationSec;
+    }
+    this._reactionTimer = setTimeout(() => {
+      this._reactionTimer = null;
+      this._reactionBubble = '';
+      this.state = saved;
+      this.stateTime = 0;
+    }, durationSec * 1000);
+  }
+
+  /** Set home position (workstation) */
+  setHome(x, y) {
+    this.homeX = x;
+    this.homeY = y;
+  }
+
+  /** Move to target with pathfinding */
+  moveTo(tx, ty) {
+    this.targetX = tx;
+    this.targetY = ty;
+    const pf = getPathfinder();
+    this.path = pf.findPath(this.project, this.x, this.y, tx, ty);
+    this.pathIndex = 0;
+  }
+
+  /** Start an idle behavior (called from main.js idle system) */
+  startIdleBehavior(behavior, targetPos, gossipChar) {
+    // HARD BLOCK: working characters NEVER start idle behaviors
+    if (this.isWorking) return;
+
+    this.idleBehavior = behavior;
+    this.idleDuration = 5 + Math.random() * 10;
+
+    if (targetPos) {
+      this.moveTo(targetPos.x, targetPos.y);
+    }
+
+    if (behavior === 'gossip' && gossipChar) {
+      this.gossipTarget = gossipChar;
+      // Use feature discussion lines when working, random gossip when idle
+      if (this.currentFeature) {
+        this.gossipLine = FEATURE_DISCUSS_LINES[Math.floor(Math.random() * FEATURE_DISCUSS_LINES.length)];
+      } else {
+        this.gossipLine = GOSSIP_LINES[Math.floor(Math.random() * GOSSIP_LINES.length)];
+      }
+      this.gossipShowTime = 0;
+    } else if (behavior === 'poke' && gossipChar) {
+      this.gossipTarget = gossipChar;
+      this.gossipLine = POKE_LINES[Math.floor(Math.random() * POKE_LINES.length)];
+      this.gossipShowTime = 0;
+      this.idleDuration = 3 + Math.random() * 3;
+    } else if (behavior === 'highfive' && gossipChar) {
+      this.gossipTarget = gossipChar;
+      this.gossipLine = HIGHFIVE_LINES[Math.floor(Math.random() * HIGHFIVE_LINES.length)];
+      gossipChar.gossipLine = HIGHFIVE_LINES[Math.floor(Math.random() * HIGHFIVE_LINES.length)];
+      gossipChar.gossipShowTime = 0;
+      this.gossipShowTime = 0;
+      this.idleDuration = 2 + Math.random() * 2;
+    } else if (behavior === 'phone') {
+      // Stay in place, check phone for 4-6 seconds
+      this.phoneTimer = 4 + Math.random() * 2;
+      this.idleDuration = this.phoneTimer + 0.5;
+    } else if (behavior === 'stretch') {
+      // Stay in place, stretch for 3 seconds
+      this.stretchTimer = 3;
+      this.idleDuration = 3.5;
+    } else if (behavior === 'meeting' && gossipChar) {
+      this.gossipTarget = gossipChar;
+      this.gossipLine = MEETING_LINES[Math.floor(Math.random() * MEETING_LINES.length)];
+      gossipChar.gossipLine = MEETING_LINES[Math.floor(Math.random() * MEETING_LINES.length)];
+      this.gossipShowTime = 0;
+      gossipChar.gossipShowTime = 0;
+      this.idleDuration = 6 + Math.random() * 4;
+    } else if (behavior === 'sleep') {
+      this.state = 'sleeping';
+    } else if (behavior === 'gym') {
+      this.state = 'working'; // reuse working animation for gym
+    } else if (behavior === 'coffee') {
+      this.state = 'coffee_break';
+    }
+  }
+
+  /** Update position, animation, and idle behavior */
+  update(dt) {
+    this.stateTime += dt;
+    this.animTimer += dt;
+
+    // Auto-expire 'celebrating' after 7s — don't celebrate forever after deploy
+    if (this.state === 'celebrating' && this.stateTime > 7) {
+      this.state = 'idle';
+      this.isWorking = false;
+      this.stateTime = 0;
+    }
+
+    // Advance animation frame
+    if (this.animTimer >= this.animSpeed) {
+      this.animTimer = 0;
+      this.animFrame = (this.animFrame + 1) % 4;
+    }
+
+    // Idle behavior timer
+    if (!this.isWorking && this.idleBehavior) {
+      this.idleDuration -= dt;
+      if (this.idleDuration <= 0) {
+        // Return home
+        this.idleBehavior = null;
+        this.gossipTarget = null;
+        this.gossipLine = '';
+        this.state = 'idle';
+        this.moveTo(this.homeX, this.homeY);
+        this.idleTimer = 4 + Math.random() * 8;
+      }
+
+      // Gossip bubble timing
+      if (this.idleBehavior === 'gossip' || this.idleBehavior === 'meeting') {
+        this.gossipShowTime += dt;
+      }
+
+      // Phone timer countdown
+      if (this.idleBehavior === 'phone' && this.phoneTimer > 0) {
+        this.phoneTimer -= dt;
+      }
+
+      // Stretch timer countdown
+      if (this.idleBehavior === 'stretch' && this.stretchTimer > 0) {
+        this.stretchTimer -= dt;
+      }
+    }
+
+    // Idle timer (pick new behavior when timer runs out)
+    if (!this.isWorking && !this.idleBehavior) {
+      this.idleTimer -= dt;
+    }
+
+    // Work thought bubbles (shown periodically while working)
+    if (this.isWorking) {
+      this.workBubbleTimer -= dt;
+      if (this.workBubbleTimer <= 0) {
+        // Use rejection-escalating messages for coder in fighting_bug state
+        let msgs;
+        if (this.state === 'fighting_bug' && this.rejectionCount > 0) {
+          const tier = Math.min(this.rejectionCount - 1, REJECTION_MESSAGES.length - 1);
+          msgs = REJECTION_MESSAGES[tier];
+        } else if (this.role === 'deployer' && this.state === 'waiting_input') {
+          msgs = WORK_MESSAGES.deployer_standby;
+        } else {
+          msgs = WORK_MESSAGES[this.role] || WORK_MESSAGES.coder;
+        }
+        this.workBubble = msgs[Math.floor(Math.random() * msgs.length)];
+        this.workBubbleDuration = 3.5;
+        // Deployer standby: cycle bubbles faster to look active
+        this.workBubbleTimer = (this.role === 'deployer' && this.state === 'waiting_input')
+          ? 2 + Math.random() * 2
+          : 2 + Math.random() * 3;
+      }
+      if (this.workBubbleDuration > 0) {
+        this.workBubbleDuration -= dt;
+        if (this.workBubbleDuration <= 0) this.workBubble = '';
+      }
+    } else {
+      this.workBubble = '';
+      this.workBubbleTimer = 3 + Math.random() * 4;
+    }
+
+    // Working characters stay at their desk — snap home and stop moving
+    if (this.isWorking && this.state !== 'handing_off') {
+      // If not yet at home, walk there first
+      const hx = this.homeX - this.x;
+      const hy = this.homeY - this.y;
+      const homeDist = Math.sqrt(hx * hx + hy * hy);
+      if (homeDist > 4) {
+        // Walk toward home desk — mark as not yet seated
+        this.isAtDesk = false;
+        const step = Math.min(this.speed * dt, homeDist);
+        this.x += (hx / homeDist) * step;
+        this.y += (hy / homeDist) * step;
+        if (Math.abs(hx) > Math.abs(hy)) {
+          this.facing = hx > 0 ? 'right' : 'left';
+        } else {
+          this.facing = hy > 0 ? 'down' : 'up';
+        }
+      } else {
+        // At desk — stay put, face forward
+        this.isAtDesk = true;
+        this.x = this.homeX;
+        this.y = this.homeY;
+        this.path = [];
+        this.pathIndex = 0;
+        this.facing = 'down';
+      }
+    } else {
+      // Follow path or move toward target (idle / walking characters)
+      let moveTargetX = this.targetX;
+      let moveTargetY = this.targetY;
+
+      if (this.path.length > 0 && this.pathIndex < this.path.length) {
+        moveTargetX = this.path[this.pathIndex].x;
+        moveTargetY = this.path[this.pathIndex].y;
+      }
+
+      const dx = moveTargetX - this.x;
+      const dy = moveTargetY - this.y;
+      const dist = Math.sqrt(dx * dx + dy * dy);
+
+      if (dist > 2) {
+        const step = Math.min(this.speed * dt, dist);
+        this.x += (dx / dist) * step;
+        this.y += (dy / dist) * step;
+
+        if (Math.abs(dx) > Math.abs(dy)) {
+          this.facing = dx > 0 ? 'right' : 'left';
+        } else {
+          this.facing = dy > 0 ? 'down' : 'up';
+        }
+      } else {
+        this.x = moveTargetX;
+        this.y = moveTargetY;
+        if (this.path.length > 0 && this.pathIndex < this.path.length) {
+          this.pathIndex++;
+        }
+      }
+    }
+
+    // Bob animation
+    if (this.state === 'working' || this.state === 'designing') {
+      this.bobOffset = Math.sin(this.stateTime * 4) * 1.5;
+    } else if (this.state === 'celebrating') {
+      this.bobOffset = Math.abs(Math.sin(this.stateTime * 6)) * -8;
+    } else if (this.state === 'sleeping') {
+      this.bobOffset = Math.sin(this.stateTime * 1.5) * 1;
+    } else if (this.state === 'frustrated' || this.state === 'rate_limited') {
+      this.bobOffset = Math.sin(this.stateTime * 12) * 1;
+    } else if (this.idleBehavior === 'gym') {
+      this.bobOffset = Math.abs(Math.sin(this.stateTime * 5)) * -3; // exercise bounce
+    } else if (this.idleBehavior === 'stretch' && this.stretchTimer > 0) {
+      // Alternate between normal and slightly taller to simulate stretching
+      this.bobOffset = Math.sin(this.stateTime * 3) * -4;
+    } else {
+      this.bobOffset = 0;
+    }
+  }
+
+  /** Render pixel art character */
+  render(ctx) {
+    const effects = getEffects();
+
+    // Determine sprite state
+    let spriteState = this.state;
+    const isMoving = Math.abs(this.targetX - this.x) > 2 || Math.abs(this.targetY - this.y) > 2;
+
+    if (isMoving || WALK_STATES.has(this.state)) {
+      if (this.facing === 'left' || this.facing === 'right') {
+        spriteState = 'walk_side';
+      } else if (this.facing === 'up') {
+        spriteState = 'walk_up';
+      } else {
+        spriteState = 'walk_down';
+      }
+    }
+
+    const pixelData = getSprite(this.meta.spriteKey, spriteState, this.animFrame, this.project);
+    if (!pixelData) return;
+
+    // Shadow
+    if (this.shadow) {
+      ctx.save();
+      ctx.globalAlpha = 0.3;
+      ctx.fillStyle = '#000';
+      ctx.beginPath();
+      ctx.ellipse(this.x, this.y + 2, SPRITE_W / 3, 4, 0, 0, Math.PI * 2);
+      ctx.fill();
+      ctx.restore();
+    }
+
+    // Sprite — apply team-specific tint overlay for visual distinction
+    renderSprite(ctx, pixelData, this.x, this.y, {
+      flipX: this.facing === 'left',
+      offsetY: this.bobOffset,
+    });
+
+    // Team-colored name banner (replaces old badge — clearly shows which project)
+    const labelText = `${this.meta.label}`;
+    const labelW = labelText.length * 4 + 4;
+    ctx.fillStyle = this.projectColor;
+    ctx.globalAlpha = 0.85;
+    ctx.fillRect(this.x - labelW / 2 - 1, this.y + 2, labelW + 2, 8);
+    ctx.globalAlpha = 1;
+    renderPixelText(ctx, labelText, this.x, this.y + 3, '#fff', 1);
+
+    // State effects (lightbulb, confetti, etc.) — pass isAtDesk so work effects only show at desk
+    effects.renderStateOverlay(ctx, this.state, this.x, this.y, this.stateTime, this.isAtDesk);
+
+    // Gossip / meeting bubble
+    if ((this.idleBehavior === 'gossip' || this.idleBehavior === 'meeting') && this.gossipLine && this.gossipShowTime > 0.5) {
+      this._renderGossipBubble(ctx);
+    }
+
+    // Reaction bubble (from react() call — shows immediately, higher priority)
+    if (this._reactionBubble) {
+      const savedBubble = this.workBubble;
+      this.workBubble = this._reactionBubble;
+      this.isWorking = true;
+      this._renderWorkBubble(ctx);
+      this.workBubble = savedBubble;
+      this.isWorking = !!savedBubble;
+    } else if (this.isWorking && this.workBubble) {
+      // Work thought bubble
+      this._renderWorkBubble(ctx);
+    }
+
+    // Rejection desperation overlay (sweat drops + prayer hands above head)
+    if (this.state === 'fighting_bug' && this.rejectionCount >= 2) {
+      this._renderPrayerOverlay(ctx);
+    }
+
+    // Idle activity indicator
+    if (this.idleBehavior && !isMoving) {
+      this._renderIdleIndicator(ctx);
+    }
+  }
+
+  /** Status badge shown above the character — only visible while working */
+  _renderStatusBadge(ctx) {
+    // Only show badge when actively working — hide when idle/ready/sleeping
+    if (!this.isWorking) return;
+
+    const workLabels = {
+      working: '⚡ WORKING',
+      designing: '📐 DESIGNING',
+      reviewing: '🔍 REVIEWING',
+      deploying: '🚀 DEPLOYING',
+      fighting_bug: '🐛 FIXING BUG',
+      celebrating: '🎉 DONE!',
+      frustrated: '😤 REJECTED',
+      waiting_input: this.role === 'deployer' ? '🚀 STANDBY' : '⏳ WAITING',
+      handing_off: '📄 HANDING OFF',
+    };
+    const statusText = workLabels[this.state] || '⚡ WORKING';
+    const bgColor = this.state === 'celebrating' ? '#27ae60' :
+                    this.state === 'frustrated' ? '#c0392b' :
+                    this.state === 'waiting_input' ? '#f39c12' :
+                    '#2980b9';
+
+    // Draw badge above sprite (just below any progress bar / bubbles)
+    const badgeY = this.y - SPRITE_H + this.bobOffset - 6;
+    // Use native canvas text for emoji + crispness
+    ctx.save();
+    ctx.font = 'bold 7px monospace';
+    const metrics = ctx.measureText(statusText);
+    const bw = metrics.width + 6;
+    const bh = 10;
+    const bx = this.x - bw / 2;
+
+    // Background pill
+    ctx.globalAlpha = 0.88;
+    ctx.fillStyle = bgColor;
+    ctx.beginPath();
+    ctx.roundRect(bx, badgeY - bh, bw, bh, 3);
+    ctx.fill();
+
+    // Text
+    ctx.globalAlpha = 1;
+    ctx.fillStyle = '#fff';
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'middle';
+    ctx.fillText(statusText, this.x, badgeY - bh / 2);
+    ctx.restore();
+  }
+
+  _renderGossipBubble(ctx) {
+    // Count only renderable chars for accurate bubble sizing
+    const upperText = this.gossipLine.toUpperCase();
+    const renderableLen = upperText.split('').filter(ch =>
+      /[A-Z0-9 .!?:\-/',()+=#_]/.test(ch)
+    ).length;
+    const bubbleW = Math.min(renderableLen * 4 + 12, 100);
+    const bubbleH = 14;
+    // Offset bubble AWAY from gossip partner so they don't overlap
+    let xOffset = 0;
+    if (this.gossipTarget) {
+      xOffset = this.x <= this.gossipTarget.x ? -(bubbleW / 2 + 6) : (bubbleW / 2 + 6);
+    }
+    const bx = this.x + xOffset - bubbleW / 2;
+    const by = this.y - SPRITE_H - bubbleH - 8;
+    // Text center matches bubble center
+    const textCenterX = bx + bubbleW / 2;
+
+    // Bubble bg
+    ctx.fillStyle = '#fff';
+    ctx.fillRect(bx + 2, by, bubbleW - 4, bubbleH);
+    ctx.fillRect(bx, by + 2, bubbleW, bubbleH - 4);
+
+    // Border
+    ctx.fillStyle = '#555';
+    ctx.fillRect(bx + 2, by - 1, bubbleW - 4, 1);
+    ctx.fillRect(bx + 2, by + bubbleH, bubbleW - 4, 1);
+    ctx.fillRect(bx - 1, by + 2, 1, bubbleH - 4);
+    ctx.fillRect(bx + bubbleW, by + 2, 1, bubbleH - 4);
+
+    // Tail — point from bubble toward character
+    ctx.fillStyle = '#fff';
+    const tailX = Math.max(bx + 4, Math.min(this.x, bx + bubbleW - 6));
+    ctx.fillRect(tailX - 2, by + bubbleH, 3, 3);
+    ctx.fillRect(tailX, by + bubbleH + 3, 2, 2);
+
+    // Text (truncated to fit, centered in bubble)
+    const maxChars = Math.floor((bubbleW - 8) / 4);
+    const text = this.gossipLine.slice(0, maxChars).toUpperCase();
+    renderPixelText(ctx, text, textCenterX, by + 4, '#333', 1);
+
+    // Fade out after a while
+    if (this.gossipShowTime > 4) {
+      this.gossipShowTime = 0;
+      this.gossipLine = GOSSIP_LINES[Math.floor(Math.random() * GOSSIP_LINES.length)];
+    }
+  }
+
+  _renderWorkBubble(ctx) {
+    const text = this.workBubble;
+    // Emoji chars are wider — estimate width more generously
+    const hasEmoji = /[\u{1F000}-\u{1FFFF}]/u.test(text);
+    const charW = hasEmoji ? 5 : 4;
+    const bubbleW = Math.min(text.length * charW + 16, 120);
+    const bubbleH = 16;
+    const bx = this.x - bubbleW / 2;
+    const by = this.y - SPRITE_H - bubbleH - 10;
+
+    // Thought bubble style (rounded, lighter)
+    ctx.fillStyle = '#e8f4ff';
+    ctx.fillRect(bx + 2, by, bubbleW - 4, bubbleH);
+    ctx.fillRect(bx, by + 2, bubbleW, bubbleH - 4);
+
+    // Border (blue tint for thought bubble)
+    ctx.fillStyle = '#4080d0';
+    ctx.fillRect(bx + 2, by - 1, bubbleW - 4, 1);
+    ctx.fillRect(bx + 2, by + bubbleH, bubbleW - 4, 1);
+    ctx.fillRect(bx - 1, by + 2, 1, bubbleH - 4);
+    ctx.fillRect(bx + bubbleW, by + 2, 1, bubbleH - 4);
+
+    // Thought dots tail (instead of speech tail)
+    ctx.fillStyle = '#e8f4ff';
+    ctx.fillRect(this.x - 1, by + bubbleH, 2, 2);
+    ctx.fillStyle = '#4080d0';
+    ctx.fillRect(this.x, by + bubbleH + 2, 2, 2);
+    ctx.fillRect(this.x + 1, by + bubbleH + 5, 2, 2);
+
+    // Text — render emoji natively, pixel text for ASCII
+    if (hasEmoji) {
+      ctx.save();
+      ctx.font = '9px sans-serif';
+      ctx.textAlign = 'center';
+      ctx.textBaseline = 'middle';
+      ctx.fillStyle = '#1a3a7a';
+      ctx.fillText(text.slice(0, 20), this.x, by + bubbleH / 2);
+      ctx.restore();
+    } else {
+      const maxChars = Math.floor((bubbleW - 8) / 4);
+      renderPixelText(ctx, text.slice(0, maxChars), this.x, by + 4, '#1a3a7a', 1);
+    }
+  }
+
+  _renderPrayerOverlay(ctx) {
+    const t = this.stateTime;
+    const count = this.rejectionCount;
+    const px = PIXEL_SIZE;
+
+    // Animated sweat drops (intensity increases with rejection count)
+    const drops = Math.min(count + 1, 4);
+    ctx.fillStyle = '#60a0ff';
+    for (let i = 0; i < drops; i++) {
+      const angle = (t * 2.5 + i * (Math.PI * 2 / drops)) % (Math.PI * 2);
+      const radius = 12 + i * 2;
+      const sx = this.x + Math.cos(angle) * radius;
+      const sy = (this.y - SPRITE_H * 0.6) + Math.sin(angle) * 6;
+      const size = 1 + (Math.sin(t * 3 + i) * 0.5 + 0.5);
+      ctx.fillRect(sx, sy, px * size, px * size * 2);
+    }
+
+    // Prayer hands emoji above head (pulsing)
+    if (count >= 2) {
+      const pulse = 0.85 + Math.sin(t * 4) * 0.15;
+      ctx.save();
+      ctx.font = `${Math.round(11 * pulse)}px serif`;
+      ctx.textAlign = 'center';
+      ctx.globalAlpha = 0.9;
+      ctx.fillText('🙏', this.x, this.y - SPRITE_H - 18);
+      ctx.restore();
+    }
+
+    // Desperation sparkles / stress marks for count >= 3
+    if (count >= 3) {
+      ctx.fillStyle = '#ff6040';
+      const stressAngle = t * 5;
+      ctx.fillRect(this.x + Math.cos(stressAngle) * 16 - 1, this.y - SPRITE_H * 0.8 + Math.sin(stressAngle) * 8 - 1, 3, 3);
+      ctx.fillRect(this.x - Math.cos(stressAngle) * 14 - 1, this.y - SPRITE_H * 0.7 - Math.sin(stressAngle) * 6 - 1, 2, 2);
+    }
+  }
+
+  _renderIdleIndicator(ctx) {
+    const pw = PIXEL_SIZE;
+    const ix = this.x;
+    const iy = this.y - SPRITE_H - 4;
+
+    switch (this.idleBehavior) {
+      case 'gym':
+        // Dumbbell icon above head
+        ctx.fillStyle = '#808088';
+        ctx.fillRect(ix - 6, iy, 12, 2);
+        ctx.fillStyle = '#606068';
+        ctx.fillRect(ix - 8, iy - 2, 4, 6);
+        ctx.fillRect(ix + 4, iy - 2, 4, 6);
+        break;
+      case 'breakRoom':
+        // Fork/knife icon
+        ctx.fillStyle = '#c0c0c0';
+        ctx.fillRect(ix - 3, iy - 2, 1, 6);
+        ctx.fillRect(ix + 2, iy - 2, 1, 6);
+        ctx.fillRect(ix - 4, iy - 2, 2, 2);
+        ctx.fillRect(ix + 2, iy, 2, 1);
+        break;
+      case 'phone':
+        // Small phone screen rectangle near character's hand
+        ctx.fillStyle = '#1a1a2e';
+        ctx.fillRect(ix + 6, iy + 4, 5, 8); // phone body
+        ctx.fillStyle = '#60c0ff'; // bright screen
+        ctx.fillRect(ix + 7, iy + 5, 3, 5); // screen
+        // Screen glow flicker
+        if (Math.sin(this.stateTime * 4) > 0) {
+          ctx.fillStyle = '#a0e0ff';
+          ctx.fillRect(ix + 7, iy + 5, 3, 1);
+        }
+        break;
+      case 'stretch':
+        // Motion lines "~" above the character
+        ctx.fillStyle = '#a0a0b0';
+        const wave = Math.sin(this.stateTime * 6);
+        // Left motion line
+        ctx.fillRect(ix - 8, iy - 4 + wave * 2, 4, 1);
+        ctx.fillRect(ix - 7, iy - 3 + wave * 2, 4, 1);
+        // Right motion line
+        ctx.fillRect(ix + 4, iy - 6 - wave * 2, 4, 1);
+        ctx.fillRect(ix + 5, iy - 5 - wave * 2, 4, 1);
+        // Top motion line
+        ctx.fillRect(ix - 2, iy - 8 + wave, 5, 1);
+        break;
+      case 'meeting':
+        // Small clipboard icon above head
+        ctx.fillStyle = '#c8a050';
+        ctx.fillRect(ix - 3, iy - 2, 6, 8); // clipboard body
+        ctx.fillStyle = '#f0e8d0';
+        ctx.fillRect(ix - 2, iy, 4, 5); // paper
+        ctx.fillStyle = '#888';
+        ctx.fillRect(ix - 1, iy - 3, 2, 2); // clip
+        break;
+    }
+  }
+
+  /** Draw task progress bar above character sprite */
+  _drawProgressBar(ctx) {
+    const barW = 28;
+    const barH = 4;
+    const barX = this.x - barW / 2;
+    const barY = this.y - SPRITE_H + this.bobOffset - barH - 3;
+
+    // Background
+    ctx.fillStyle = '#1a1a2e';
+    ctx.fillRect(barX - 1, barY - 1, barW + 2, barH + 2);
+
+    // Empty track
+    ctx.fillStyle = '#2a2a4a';
+    ctx.fillRect(barX, barY, barW, barH);
+
+    // Filled portion — color shifts by progress
+    const p = Math.max(0, Math.min(1, this.taskProgress));
+    const fillW = Math.floor(barW * p);
+    if (fillW > 0) {
+      if (p < 0.3)      ctx.fillStyle = '#d04040';
+      else if (p < 0.7) ctx.fillStyle = '#d8c020';
+      else               ctx.fillStyle = '#40d060';
+      ctx.fillRect(barX, barY, fillW, barH);
+      // Shine
+      ctx.fillStyle = '#ffffff30';
+      ctx.fillRect(barX, barY, fillW, 1);
+    }
+
+    // Percentage
+    ctx.fillStyle = '#ffffff';
+    ctx.font = 'bold 5px monospace';
+    ctx.textAlign = 'center';
+    ctx.fillText(`${Math.floor(p * 100)}%`, this.x, barY + barH - 1);
+    ctx.textAlign = 'start';
+  }
+
+  /** Check if character wants a new idle behavior */
+  wantsIdleAction() {
+    return !this.isWorking && !this.isHandingOff && this.state !== 'rate_limited' && !this.idleBehavior && this.idleTimer <= 0;
+  }
+
+  hitTest(wx, wy) {
+    const halfW = SPRITE_W / 2;
+    return wx >= this.x - halfW && wx <= this.x + halfW &&
+           wy >= this.y - SPRITE_H && wy <= this.y + 8;
+  }
+
+  getInfo() {
+    let displayState = this.state;
+    if (this.isWorking) {
+      const workNames = {
+        working: '⚡ Working',
+        designing: '📐 Designing architecture',
+        reviewing: '🔍 Reviewing code',
+        deploying: '🚀 Deploying',
+        fighting_bug: '🐛 Fixing bug',
+        celebrating: '🎉 Celebrating',
+        frustrated: '😤 Frustrated (rejected)',
+        waiting_input: '⏳ Waiting for input',
+        handing_off: '📄 Handing off',
+      };
+      displayState = workNames[this.state] || '⚡ Working';
+    } else if (this.idleBehavior) {
+      const idleNames = {
+        wander: 'Wandering around',
+        gossip: 'Chatting',
+        gym: 'Working out',
+        breakRoom: 'Having lunch',
+        coffee: 'Getting coffee',
+        sleep: 'Sleeping',
+        poke: 'Poking around',
+        highfive: 'High five!',
+        phone: 'Checking phone',
+        stretch: 'Stretching',
+        meeting: 'Quick meeting',
+      };
+      displayState = idleNames[this.idleBehavior] || this.state;
+    } else {
+      displayState = '🟢 Ready';
+    }
+
+    return {
+      role: this.meta.label,
+      ai: this.meta.ai,
+      project: this.project,
+      state: displayState,
+      rawState: this.state,
+      color: this.meta.color,
+      spriteKey: this.meta.spriteKey,
+      isPM: this.role === 'pm',
+      isWorking: this.isWorking,
+      idleBehavior: this.idleBehavior,
+    };
+  }
+}
+
+export { STAGE_MAP, ROLES, IDLE_BEHAVIORS, FEATURE_DISCUSS_LINES, pickTimeAwareBehavior };