let-them-talk 3.5.1 → 3.6.0

package/office/animation.js

@@ -0,0 +1,337 @@
+import { S } from './state.js';
+import { updateMonitorScreen, setMonitorDim } from './monitors.js';
+
+export function easeInOutQuad(t) {
+  return t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2;
+}
+
+export function updateAgent(agent, dt, time) {
+  var isWalking = agent.target !== null;
+  var isSleeping = agent.state === 'sleeping';
+  var isDead = agent.state === 'dead';
+
+  // Death removal
+  if (agent.dying) {
+    agent.deathOpacity = Math.max(0, agent.deathOpacity - dt * 2);
+    var s = Math.max(0.01, agent.deathOpacity);
+    agent.parts.group.scale.set(s, s, s);
+    if (agent.deathOpacity <= 0) {
+      S.scene.remove(agent.parts.group);
+      disposeAgent(agent);
+      delete S.agents3d[agent.name];
+      return;
+    }
+  }
+
+  // Walk
+  if (agent.target && agent.walkDuration > 0) {
+    var speedMult = S.conversationVelocity === 1 ? 1.5 : (S.conversationVelocity === -1 ? 0.8 : 1);
+    agent.walkProgress += (dt / agent.walkDuration) * speedMult;
+    if (agent.walkProgress >= 1) {
+      agent.pos.x = agent.target.x;
+      agent.pos.z = agent.target.z;
+      var cb = agent.target.cb;
+      agent.target = null;
+      agent.walkProgress = 0;
+      if (agent.walkQueue && agent.walkQueue.length > 0) {
+        var next = agent.walkQueue.shift();
+        walkTo(agent, next.x, next.z, next.cb);
+      } else if (cb) {
+        cb();
+      }
+    } else {
+      var t = easeInOutQuad(agent.walkProgress);
+      agent.pos.x = agent.walkStart.x + (agent.target.x - agent.walkStart.x) * t;
+      agent.pos.z = agent.walkStart.z + (agent.target.z - agent.walkStart.z) * t;
+    }
+  }
+
+  agent.parts.group.position.x = agent.pos.x;
+  agent.parts.group.position.z = agent.pos.z;
+
+  if (isDead && !agent.dying) {
+    agent.parts.group.visible = false;
+    return;
+  }
+  agent.parts.group.visible = true;
+
+  // Hand-raise gesture
+  if (agent.handRaiseTimer > 0) {
+    agent.handRaiseTimer -= dt;
+    var raiseT = agent.handRaiseTimer / 0.4;
+    agent.parts.rightArm.rotation.z = -Math.sin(raiseT * Math.PI) * 1.2;
+    agent.parts.rightArm.rotation.x = -Math.sin(raiseT * Math.PI) * 0.3;
+  }
+
+  // Wave gesture (both arms up, friendly wave)
+  if (agent.waveTimer > 0) {
+    agent.waveTimer -= dt;
+    var wT = agent.waveTimer / 0.8;
+    agent.parts.rightArm.rotation.z = -Math.sin(wT * Math.PI) * 1.4;
+    agent.parts.rightArm.rotation.x = Math.sin(time * 12) * 0.3 * wT;
+    agent.parts.leftArm.rotation.z = Math.sin(wT * Math.PI) * 0.3;
+  }
+
+  // Thinking gesture (hand on chin, head tilted)
+  if (agent.thinkTimer > 0) {
+    agent.thinkTimer -= dt;
+    var thT = Math.min(1, agent.thinkTimer / 1.5);
+    agent.parts.rightArm.rotation.x = -1.0 * thT;
+    agent.parts.rightForearm.rotation.x = -1.5 * thT;
+    agent.parts.head.rotation.z = 0.1 * thT;
+    agent.parts.head.rotation.x = -0.08 * thT;
+  }
+
+  // Pointing gesture (right arm extended forward)
+  if (agent.pointTimer > 0) {
+    agent.pointTimer -= dt;
+    var ptT = agent.pointTimer / 0.6;
+    agent.parts.rightArm.rotation.x = -Math.sin(ptT * Math.PI) * 1.4;
+    agent.parts.rightForearm.rotation.x = -0.1 * Math.sin(ptT * Math.PI);
+  }
+
+  // Celebrate gesture (both arms up, bounce)
+  if (agent.celebrateTimer > 0) {
+    agent.celebrateTimer -= dt;
+    var celT = agent.celebrateTimer / 1.5;
+    agent.parts.leftArm.rotation.z = Math.sin(celT * Math.PI) * 1.6;
+    agent.parts.rightArm.rotation.z = -Math.sin(celT * Math.PI) * 1.6;
+    agent.parts.leftArm.rotation.x = -0.2 * celT;
+    agent.parts.rightArm.rotation.x = -0.2 * celT;
+    agent.parts.group.position.y += Math.abs(Math.sin(time * 10)) * 0.04 * celT;
+  }
+
+  // Stretch gesture (arms wide, body arches back)
+  if (agent.stretchTimer > 0) {
+    agent.stretchTimer -= dt;
+    var stT = agent.stretchTimer / 2;
+    var stPhase = Math.sin(stT * Math.PI);
+    agent.parts.leftArm.rotation.z = stPhase * 1.3;
+    agent.parts.rightArm.rotation.z = -stPhase * 1.3;
+    agent.parts.leftArm.rotation.x = -stPhase * 0.5;
+    agent.parts.rightArm.rotation.x = -stPhase * 0.5;
+    agent.parts.body.rotation.x = -stPhase * 0.15;
+    agent.parts.head.rotation.x = -stPhase * 0.2;
+  }
+
+  // Idle gesture system — random gestures when sitting and idle
+  if (!agent.idleGestureTimer) agent.idleGestureTimer = 5 + Math.random() * 10;
+  if (agent.isSitting && agent.state === 'active' && !isWalking && !agent.isListening) {
+    agent.idleGestureTimer -= dt;
+    if (agent.idleGestureTimer <= 0) {
+      agent.idleGestureTimer = 8 + Math.random() * 15;
+      var gestures = ['stretch', 'think', 'none', 'none', 'none'];
+      var gesture = gestures[Math.floor(Math.random() * gestures.length)];
+      if (gesture === 'stretch') agent.stretchTimer = 2;
+      else if (gesture === 'think') agent.thinkTimer = 1.5;
+    }
+  }
+
+  // Face walk direction
+  if (isWalking && agent.target) {
+    var dx = agent.target.x - agent.pos.x;
+    var dz = agent.target.z - agent.pos.z;
+    if (Math.abs(dx) > 0.01 || Math.abs(dz) > 0.01) {
+      agent.facingTarget = Math.atan2(dx, dz);
+    }
+  }
+
+  // Sitting logic
+  var atDesk = !agent.location || agent.location === 'desk';
+  var shouldSit = !isWalking && agent.registered && !isSleeping && !isDead && agent.handRaiseTimer <= 0 && atDesk;
+  if (shouldSit && !agent.isSitting) {
+    agent.isSitting = true;
+  } else if (!shouldSit && agent.isSitting) {
+    agent.isSitting = false;
+  }
+
+  var sittingTarget = agent.isSitting ? 1 : 0;
+  agent.sittingLerp += (sittingTarget - agent.sittingLerp) * Math.min(1, dt * 5);
+
+  agent.parts.group.position.y = agent.sittingLerp * 0.06;
+  var sitHip = -1.5 * agent.sittingLerp;
+  agent.parts.leftLeg.rotation.x = agent.parts.leftLeg.rotation.x * (1 - agent.sittingLerp) + sitHip * agent.sittingLerp;
+  agent.parts.rightLeg.rotation.x = agent.parts.rightLeg.rotation.x * (1 - agent.sittingLerp) + sitHip * agent.sittingLerp;
+  var sitKnee = 1.5 * agent.sittingLerp;
+  agent.parts.leftLowerLeg.rotation.x = sitKnee;
+  agent.parts.rightLowerLeg.rotation.x = sitKnee;
+  agent.parts.leftForearm.rotation.x = -0.4 * agent.sittingLerp;
+  agent.parts.rightForearm.rotation.x = -0.4 * agent.sittingLerp;
+
+  // Facing at desk
+  if (agent.isSitting && agent.sittingLerp > 0.5) {
+    agent.facingTarget = Math.PI;
+  }
+
+  // Idle look-around
+  if (!isWalking && !agent.isSitting && !isSleeping && agent.registered) {
+    agent.facingTarget = Math.sin(time * 0.3 + agent.name.length) * 0.4;
+  }
+
+  // Smooth rotation
+  var currentRot = agent.parts.group.rotation.y;
+  var diff = agent.facingTarget - currentRot;
+  while (diff > Math.PI) diff -= Math.PI * 2;
+  while (diff < -Math.PI) diff += Math.PI * 2;
+  agent.parts.group.rotation.y += diff * Math.min(1, dt * 4);
+
+  // Leg/arm swing
+  if (isWalking) {
+    var swingSpeed = S.conversationVelocity === 1 ? 14 : (S.conversationVelocity === -1 ? 7 : 10);
+    var swingAmplitude = S.conversationVelocity === 1 ? 0.7 : (S.conversationVelocity === -1 ? 0.35 : 0.5);
+    var swing = Math.sin(time * swingSpeed) * swingAmplitude;
+    agent.parts.leftLeg.rotation.x = swing;
+    agent.parts.rightLeg.rotation.x = -swing;
+    agent.parts.leftLowerLeg.rotation.x = Math.max(0, -swing) * 0.8;
+    agent.parts.rightLowerLeg.rotation.x = Math.max(0, swing) * 0.8;
+    agent.parts.leftArm.rotation.x = -swing * 0.7;
+    agent.parts.rightArm.rotation.x = swing * 0.7;
+    agent.parts.leftForearm.rotation.x = -0.3 - Math.abs(swing) * 0.3;
+    agent.parts.rightForearm.rotation.x = -0.3 - Math.abs(swing) * 0.3;
+  } else if (!agent.isSitting) {
+    agent.parts.leftLeg.rotation.x *= 0.9;
+    agent.parts.rightLeg.rotation.x *= 0.9;
+    agent.parts.leftArm.rotation.x *= 0.9;
+    agent.parts.rightArm.rotation.x *= 0.9;
+    agent.parts.leftLowerLeg.rotation.x *= 0.9;
+    agent.parts.rightLowerLeg.rotation.x *= 0.9;
+    agent.parts.leftForearm.rotation.x *= 0.9;
+    agent.parts.rightForearm.rotation.x *= 0.9;
+  }
+
+  // Idle breathing
+  if (!isWalking && !isSleeping) {
+    var breatheSpeed = S.conversationVelocity === -1 ? 1.2 : 2;
+    var breathe = 1 + Math.sin(time * breatheSpeed) * 0.02;
+    agent.parts.body.scale.y = breathe;
+    if (!agent.isSitting) {
+      agent.parts.head.rotation.z = Math.sin(time * 0.5) * 0.03;
+    }
+  }
+
+  // Sleep transition
+  var sleepTarget = isSleeping ? 1 : 0;
+  agent.sleepTransition += (sleepTarget - agent.sleepTransition) * Math.min(1, dt * (isSleeping ? 1 : 4));
+  agent.parts.head.rotation.x = agent.sleepTransition * 0.35;
+  agent.parts.body.rotation.x = agent.sleepTransition * 0.18;
+
+  // Wake-up bounce
+  if (agent.prevState === 'sleeping' && agent.state === 'active') {
+    if (agent.sleepTransition < 0.05) {
+      agent.prevState = null;
+      agent.parts.group.position.y = 0.08;
+    }
+  }
+
+  // ZZZ floating sprites
+  if (isSleeping && agent.sleepTransition > 0.5) {
+    if (!agent.zzzActive) {
+      agent.zzzActive = true;
+      agent.parts.zzzObjects.forEach(function(z) { z.obj.visible = true; });
+    }
+    agent.parts.zzzObjects.forEach(function(z) {
+      var phase = time * 1.5 + z.index * 1.2;
+      var cycleT = (phase % 3) / 3;
+      var yOff = cycleT * 0.5;
+      var xOff = Math.sin(phase * 2) * 0.08;
+      z.obj.position.set(0.2 + z.index * 0.1 + xOff, z.baseY + yOff, 0);
+      var opacity = cycleT < 0.2 ? cycleT / 0.2 : (cycleT > 0.7 ? (1 - cycleT) / 0.3 : 1);
+      z.div.style.opacity = String(Math.max(0, opacity));
+    });
+  } else if (agent.zzzActive) {
+    agent.zzzActive = false;
+    agent.parts.zzzObjects.forEach(function(z) {
+      z.obj.visible = false;
+      z.div.style.opacity = '0';
+    });
+  }
+
+  // Listening head-tilt
+  if (agent.isListening && !isWalking && !isSleeping) {
+    agent.parts.head.rotation.z = Math.sin(time * 1.5) * 0.08;
+  }
+
+  // Typing dots
+  var showTyping = agent.state === 'active' && !agent.isListening && !isWalking && !isSleeping && agent.registered && agent.isSitting;
+  agent.parts.typingLabel.visible = showTyping;
+
+  // Task indicator
+  var task = agent.currentTask;
+  if (agent.taskCelebration > 0) {
+    agent.taskCelebration -= dt;
+    agent.parts.taskLabel.visible = true;
+    agent.parts.taskDiv.className = 'office3d-task-indicator done';
+    agent.parts.taskDiv.textContent = '\u2714 Done!';
+    var bounceT = agent.taskCelebration / 2;
+    agent.parts.group.position.y += Math.abs(Math.sin(bounceT * Math.PI * 4)) * 0.05;
+    if (agent.taskCelebration <= 0) {
+      agent.parts.taskLabel.visible = false;
+      agent.taskCelebration = 0;
+    }
+  } else if (task) {
+    var taskStatus = task.status || '';
+    if (taskStatus === 'in_progress' || taskStatus === 'in-progress') {
+      agent.parts.taskLabel.visible = true;
+      agent.parts.taskDiv.className = 'office3d-task-indicator working';
+      agent.parts.taskDiv.textContent = '\u2699 Working';
+    } else if (taskStatus === 'blocked') {
+      agent.parts.taskLabel.visible = true;
+      agent.parts.taskDiv.className = 'office3d-task-indicator blocked';
+      agent.parts.taskDiv.textContent = '\u2757 Blocked';
+    } else {
+      agent.parts.taskLabel.visible = false;
+    }
+  } else {
+    agent.parts.taskLabel.visible = false;
+  }
+
+  // Monitor screen content
+  if (agent.registered && agent.isSitting && agent.state === 'active') {
+    agent.monitorTimer += dt;
+    if (agent.monitorTimer >= 0.5) {
+      agent.monitorTimer = 0;
+      updateMonitorScreen(agent.deskIdx, agent.name, time);
+    }
+  } else if (agent.registered && isSleeping) {
+    setMonitorDim(agent.deskIdx);
+  }
+
+  // Bubble timer
+  if (agent.bubbleTimer > 0) {
+    agent.bubbleTimer -= dt;
+    if (agent.bubbleTimer <= 1) {
+      agent.parts.bubbleDiv.style.opacity = String(Math.max(0, agent.bubbleTimer));
+    }
+    if (agent.bubbleTimer <= 0) {
+      agent.parts.bubbleDiv.style.display = 'none';
+      agent.bubbleTimer = 0;
+    }
+  }
+}
+
+function walkTo(agent, tx, tz, callback) {
+  var dx = tx - agent.pos.x;
+  var dz = tz - agent.pos.z;
+  var dist = Math.sqrt(dx * dx + dz * dz);
+  agent.walkStart = { x: agent.pos.x, z: agent.pos.z };
+  agent.target = { x: tx, z: tz, cb: callback || null };
+  agent.walkProgress = 0;
+  agent.walkDuration = Math.max(dist * 0.4, 0.3);
+}
+
+function disposeAgent(agent) {
+  agent.parts.group.traverse(function(child) {
+    if (child.geometry) child.geometry.dispose();
+    if (child.material) {
+      if (child.material.map) child.material.map.dispose();
+      child.material.dispose();
+    }
+  });
+  if (agent.parts.labelDiv.parentElement) agent.parts.labelDiv.remove();
+  if (agent.parts.bubbleDiv.parentElement) agent.parts.bubbleDiv.remove();
+  if (agent.parts.taskDiv && agent.parts.taskDiv.parentElement) agent.parts.taskDiv.remove();
+  if (agent.parts.typingDiv && agent.parts.typingDiv.parentElement) agent.parts.typingDiv.remove();
+  if (agent.parts.zzzObjects) {
+    agent.parts.zzzObjects.forEach(function(z) { if (z.div.parentElement) z.div.remove(); });
+  }
+}

package/office/appearance.js

@@ -0,0 +1,56 @@
+import * as THREE from 'three';
+import { DEFAULT_APPEARANCE, AGENT_PALETTES } from './constants.js';
+
+// Deterministic appearance resolution from agent name + stored appearance
+export function resolveAppearance(name, appearance) {
+  var app = appearance || {};
+  var h = 0;
+  for (var i = 0; i < name.length; i++) h = ((h << 5) - h + name.charCodeAt(i)) | 0;
+  h = Math.abs(h);
+  var palette = AGENT_PALETTES[h % AGENT_PALETTES.length];
+
+  // Accessory pools — deterministic based on name hash
+  var glassesPool = [null, null, null, 'round', 'square', 'sunglasses', null, null];
+  var headwearPool = [null, null, null, null, 'headphones', 'beanie', 'cap', null, null, 'headband'];
+  var neckwearPool = [null, null, null, 'tie', 'bowtie', 'lanyard', null, null];
+  var accColorPool = ['#555555', '#8B4513', '#333333', '#c0392b', '#1a5276', '#7d3c98', '#2e4053'];
+
+  // Outfit and body type pools
+  var outfitPool = [null, null, null, null, 'hoodie', 'suit', 'jacket', 'vest', null, null, 'labcoat', null];
+  var bodyTypePool = ['default', 'default', 'default', 'stocky', 'slim', 'default', 'default'];
+  var eyePool = ['dots', 'dots', 'anime', 'confident', 'happy', 'dots', 'wink', 'dots'];
+  var mouthPool = ['smile', 'smile', 'neutral', 'grin', 'smile', 'smirk', 'smile'];
+
+  var resolved = {
+    head_color: app.head_color || DEFAULT_APPEARANCE.head_color,
+    hair_style: app.hair_style || ['short', 'spiky', 'bob', 'ponytail', 'curly', 'afro', 'bun', 'braids', 'mohawk', 'wavy', 'long'][h % 11],
+    hair_color: app.hair_color || palette.hair_color,
+    eye_style: app.eye_style || eyePool[h % eyePool.length],
+    mouth_style: app.mouth_style || mouthPool[(h >> 2) % mouthPool.length],
+    shirt_color: app.shirt_color || palette.shirt_color,
+    pants_color: app.pants_color || palette.pants_color,
+    shoe_color: app.shoe_color || DEFAULT_APPEARANCE.shoe_color,
+    glasses: app.glasses !== undefined ? app.glasses : glassesPool[(h >> 3) % glassesPool.length],
+    glasses_color: app.glasses_color || accColorPool[(h >> 4) % accColorPool.length],
+    headwear: app.headwear !== undefined ? app.headwear : headwearPool[(h >> 5) % headwearPool.length],
+    headwear_color: app.headwear_color || accColorPool[(h >> 6) % accColorPool.length],
+    neckwear: app.neckwear !== undefined ? app.neckwear : neckwearPool[(h >> 7) % neckwearPool.length],
+    neckwear_color: app.neckwear_color || accColorPool[(h >> 8) % accColorPool.length],
+    outfit: app.outfit !== undefined ? app.outfit : outfitPool[(h >> 9) % outfitPool.length],
+    body_type: app.body_type || bodyTypePool[(h >> 10) % bodyTypePool.length],
+  };
+
+  // Add Three.js hex values
+  resolved.head_hex = new THREE.Color(resolved.head_color).getHex();
+  resolved.shirt_hex = new THREE.Color(resolved.shirt_color).getHex();
+  resolved.pants_hex = new THREE.Color(resolved.pants_color).getHex();
+  resolved.shoe_hex = new THREE.Color(resolved.shoe_color).getHex();
+  resolved.hair_hex = new THREE.Color(resolved.hair_color).getHex();
+
+  return resolved;
+}
+
+// Expose for legacy callers (profile editor, 2D compat)
+window.officeGetAppearance = function(agent) {
+  return resolveAppearance(agent.displayName || 'agent', agent.appearance || {});
+};

package/office/character.js

@@ -0,0 +1,208 @@
+import * as THREE from 'three';
+import { CSS2DObject } from 'three/addons/renderers/CSS2DRenderer.js';
+import { resolveAppearance } from './appearance.js';
+import { buildHair } from './hair.js';
+import { buildFaceSprite } from './face.js';
+import { buildGlasses, buildHeadwear, buildNeckwear } from './accessories.js';
+import { buildOutfit } from './outfits.js';
+
+// Body type scale multipliers (all keep the chibi oversized head)
+var BODY_TYPES = {
+  default: { torsoW: 1, torsoH: 1, torsoD: 1, legW: 1, legH: 1, armW: 1, armH: 1, legSpread: 1, armSpread: 1, headY: 0 },
+  stocky:  { torsoW: 1.3, torsoH: 0.95, torsoD: 1.25, legW: 1.25, legH: 0.9, armW: 1.2, armH: 0.95, legSpread: 1.2, armSpread: 1.15, headY: -0.02 },
+  slim:    { torsoW: 0.82, torsoH: 1.1, torsoD: 0.85, legW: 0.8, legH: 1.08, armW: 0.8, armH: 1.05, legSpread: 0.85, armSpread: 0.9, headY: 0.04 },
+};
+
+export function createCharacter(name, appearance) {
+  var a = resolveAppearance(name, appearance);
+  var bt = BODY_TYPES[a.body_type] || BODY_TYPES.default;
+  var group = new THREE.Group();
+  group.userData.agentName = name;
+
+  // Shadow
+  var shadowGeo = new THREE.PlaneGeometry(0.5, 0.5);
+  var shadowMat = new THREE.MeshBasicMaterial({ color: 0x000000, transparent: true, opacity: 0.25 });
+  var shadow = new THREE.Mesh(shadowGeo, shadowMat);
+  shadow.rotation.x = -Math.PI / 2;
+  shadow.position.y = 0.01;
+  shadow.userData.isShadow = true;
+  group.add(shadow);
+
+  // Materials
+  var bodyMat = new THREE.MeshStandardMaterial({ color: a.shirt_hex, roughness: 0.7 });
+  var legMat = new THREE.MeshStandardMaterial({ color: a.pants_hex, roughness: 0.7 });
+  var shoeMat = new THREE.MeshStandardMaterial({ color: a.shoe_hex, roughness: 0.6 });
+  var armMat = new THREE.MeshStandardMaterial({ color: a.shirt_hex, roughness: 0.7 });
+  var handMat = new THREE.MeshStandardMaterial({ color: a.head_hex, roughness: 0.7 });
+
+  // Torso (scaled by body type)
+  var body = new THREE.Mesh(new THREE.BoxGeometry(0.3 * bt.torsoW, 0.32 * bt.torsoH, 0.18 * bt.torsoD), bodyMat);
+  body.position.y = 0.58; body.castShadow = true;
+  group.add(body);
+
+  // Left Leg
+  var legXOffset = 0.08 * bt.legSpread;
+  var leftLeg = new THREE.Group();
+  leftLeg.position.set(-legXOffset, 0.42, 0);
+  group.add(leftLeg);
+  var leftUpperLeg = new THREE.Mesh(new THREE.BoxGeometry(0.1 * bt.legW, 0.18 * bt.legH, 0.1 * bt.legW), legMat);
+  leftUpperLeg.position.y = -0.09 * bt.legH; leftUpperLeg.castShadow = true;
+  leftLeg.add(leftUpperLeg);
+  var leftLowerLeg = new THREE.Group();
+  leftLowerLeg.position.set(0, -0.18 * bt.legH, 0);
+  leftLeg.add(leftLowerLeg);
+  var leftShin = new THREE.Mesh(new THREE.BoxGeometry(0.09 * bt.legW, 0.16 * bt.legH, 0.09 * bt.legW), legMat);
+  leftShin.position.y = -0.08 * bt.legH; leftShin.castShadow = true;
+  leftLowerLeg.add(leftShin);
+  var leftShoe = new THREE.Mesh(new THREE.BoxGeometry(0.1 * bt.legW, 0.05, 0.14), shoeMat);
+  leftShoe.position.set(0, -0.18 * bt.legH, 0.02); leftShoe.castShadow = true;
+  leftLowerLeg.add(leftShoe);
+
+  // Right Leg
+  var rightLeg = new THREE.Group();
+  rightLeg.position.set(legXOffset, 0.42, 0);
+  group.add(rightLeg);
+  var rightUpperLeg = new THREE.Mesh(new THREE.BoxGeometry(0.1 * bt.legW, 0.18 * bt.legH, 0.1 * bt.legW), legMat);
+  rightUpperLeg.position.y = -0.09 * bt.legH; rightUpperLeg.castShadow = true;
+  rightLeg.add(rightUpperLeg);
+  var rightLowerLeg = new THREE.Group();
+  rightLowerLeg.position.set(0, -0.18 * bt.legH, 0);
+  rightLeg.add(rightLowerLeg);
+  var rightShin = new THREE.Mesh(new THREE.BoxGeometry(0.09 * bt.legW, 0.16 * bt.legH, 0.09 * bt.legW), legMat);
+  rightShin.position.y = -0.08 * bt.legH; rightShin.castShadow = true;
+  rightLowerLeg.add(rightShin);
+  var rightShoe = new THREE.Mesh(new THREE.BoxGeometry(0.1 * bt.legW, 0.05, 0.14), shoeMat);
+  rightShoe.position.set(0, -0.18 * bt.legH, 0.02); rightShoe.castShadow = true;
+  rightLowerLeg.add(rightShoe);
+
+  // Left Arm
+  var armXOffset = 0.21 * bt.armSpread;
+  var leftArm = new THREE.Group();
+  leftArm.position.set(-armXOffset, 0.7, 0);
+  group.add(leftArm);
+  var leftUpperArm = new THREE.Mesh(new THREE.BoxGeometry(0.08 * bt.armW, 0.16 * bt.armH, 0.08 * bt.armW), armMat);
+  leftUpperArm.position.y = -0.08 * bt.armH; leftUpperArm.castShadow = true;
+  leftArm.add(leftUpperArm);
+  var leftForearm = new THREE.Group();
+  leftForearm.position.set(0, -0.16 * bt.armH, 0);
+  leftArm.add(leftForearm);
+  var leftForearmMesh = new THREE.Mesh(new THREE.BoxGeometry(0.07 * bt.armW, 0.14 * bt.armH, 0.07 * bt.armW), armMat);
+  leftForearmMesh.position.y = -0.07 * bt.armH; leftForearmMesh.castShadow = true;
+  leftForearm.add(leftForearmMesh);
+  var leftHand = new THREE.Mesh(new THREE.SphereGeometry(0.04, 8, 6), handMat);
+  leftHand.position.y = -0.16 * bt.armH;
+  leftForearm.add(leftHand);
+
+  // Right Arm
+  var rightArm = new THREE.Group();
+  rightArm.position.set(armXOffset, 0.7, 0);
+  group.add(rightArm);
+  var rightUpperArm = new THREE.Mesh(new THREE.BoxGeometry(0.08 * bt.armW, 0.16 * bt.armH, 0.08 * bt.armW), armMat);
+  rightUpperArm.position.y = -0.08 * bt.armH; rightUpperArm.castShadow = true;
+  rightArm.add(rightUpperArm);
+  var rightForearm = new THREE.Group();
+  rightForearm.position.set(0, -0.16 * bt.armH, 0);
+  rightArm.add(rightForearm);
+  var rightForearmMesh = new THREE.Mesh(new THREE.BoxGeometry(0.07 * bt.armW, 0.14 * bt.armH, 0.07 * bt.armW), armMat);
+  rightForearmMesh.position.y = -0.07 * bt.armH; rightForearmMesh.castShadow = true;
+  rightForearm.add(rightForearmMesh);
+  var rightHand = new THREE.Mesh(new THREE.SphereGeometry(0.04, 8, 6), handMat);
+  rightHand.position.y = -0.16 * bt.armH;
+  rightForearm.add(rightHand);
+
+  // Head (always same chibi size regardless of body type)
+  var headGeo = new THREE.SphereGeometry(0.25, 20, 16);
+  var headMat = new THREE.MeshStandardMaterial({ color: a.head_hex, roughness: 0.6 });
+  var head = new THREE.Mesh(headGeo, headMat);
+  head.position.y = 1.05 + bt.headY; head.castShadow = true;
+  group.add(head);
+
+  // Hair
+  var hairGroup = buildHair(a.hair_style, a.hair_hex);
+  hairGroup.position.y = 1.05 + bt.headY;
+  group.add(hairGroup);
+
+  // Face
+  var faceSprite = buildFaceSprite(a.eye_style, a.mouth_style, false);
+  faceSprite.position.set(0, 0, 0.251);
+  head.add(faceSprite);
+
+  // Outfit (layered on top of body)
+  var outfitGroup = null;
+  if (a.outfit) {
+    outfitGroup = buildOutfit(a.outfit, { shirt_color: a.shirt_color, pants_color: a.pants_color }, group);
+  }
+
+  // Accessories
+  if (a.glasses) buildGlasses(a.glasses, a.glasses_color || '#555555', head);
+  if (a.headwear) buildHeadwear(a.headwear, a.headwear_color || '#333333', head);
+  if (a.neckwear && !a.outfit) buildNeckwear(a.neckwear, a.neckwear_color || '#c0392b', group);
+
+  // Name label
+  var labelDiv = document.createElement('div');
+  labelDiv.className = 'office3d-label';
+  labelDiv.innerHTML = '<span class="office3d-label-name"></span><span class="office3d-label-dot"></span>';
+  var label = new CSS2DObject(labelDiv);
+  label.position.set(0, 1.55, 0);
+  group.add(label);
+
+  // Bubble
+  var bubbleDiv = document.createElement('div');
+  bubbleDiv.className = 'office3d-bubble';
+  bubbleDiv.style.display = 'none';
+  var bubble = new CSS2DObject(bubbleDiv);
+  bubble.position.set(0, 1.8, 0);
+  group.add(bubble);
+
+  // ZZZ sprites
+  var zzzObjects = [];
+  ['z', 'Z', 'Z'].forEach(function(letter, i) {
+    var zDiv = document.createElement('div');
+    zDiv.className = 'office3d-zzz';
+    zDiv.textContent = letter;
+    zDiv.style.fontSize = (10 + i * 4) + 'px';
+    var zObj = new CSS2DObject(zDiv);
+    zObj.position.set(0.15 + i * 0.1, 1.4 + i * 0.15, 0);
+    zObj.visible = false;
+    group.add(zObj);
+    zzzObjects.push({ obj: zObj, div: zDiv, baseY: 1.4 + i * 0.15, index: i });
+  });
+
+  // Task indicator
+  var taskDiv = document.createElement('div');
+  taskDiv.className = 'office3d-task-indicator working';
+  var taskLabel = new CSS2DObject(taskDiv);
+  taskLabel.position.set(0, 1.7, 0);
+  taskLabel.visible = false;
+  group.add(taskLabel);
+
+  // Typing dots
+  var typingDiv = document.createElement('div');
+  typingDiv.className = 'office3d-typing';
+  typingDiv.innerHTML = '<span class="office3d-typing-dot"></span><span class="office3d-typing-dot"></span><span class="office3d-typing-dot"></span>';
+  var typingLabel = new CSS2DObject(typingDiv);
+  typingLabel.position.set(0, 1.65, 0);
+  typingLabel.visible = false;
+  group.add(typingLabel);
+
+  return {
+    group: group,
+    body: body, head: head,
+    leftLeg: leftLeg, rightLeg: rightLeg,
+    leftLowerLeg: leftLowerLeg, rightLowerLeg: rightLowerLeg,
+    leftArm: leftArm, rightArm: rightArm,
+    leftForearm: leftForearm, rightForearm: rightForearm,
+    leftHand: leftHand, rightHand: rightHand,
+    leftShoe: leftShoe, rightShoe: rightShoe,
+    faceSprite: faceSprite, hairGroup: hairGroup,
+    outfitGroup: outfitGroup,
+    label: label, labelDiv: labelDiv,
+    bubble: bubble, bubbleDiv: bubbleDiv,
+    shadow: shadow,
+    bodyMat: bodyMat, legMat: legMat, headMat: headMat,
+    armMat: armMat, handMat: handMat, shoeMat: shoeMat,
+    zzzObjects: zzzObjects,
+    taskDiv: taskDiv, taskLabel: taskLabel,
+    typingDiv: typingDiv, typingLabel: typingLabel
+  };
+}

package/office/constants.js

@@ -0,0 +1,62 @@
+export const FLOOR_W = 28;
+export const FLOOR_D = 16;
+
+export const DESK_POSITIONS = [
+  { x: -4.5, z: 1.5 }, { x: -1.5, z: 1.5 }, { x: 1.5, z: 1.5 }, { x: 4.5, z: 1.5 },
+  { x: -4.5, z: -1 },  { x: -1.5, z: -1 },  { x: 1.5, z: -1 },  { x: 4.5, z: -1 },
+  { x: -4.5, z: -3.5 },{ x: -1.5, z: -3.5 },{ x: 1.5, z: -3.5 },{ x: 4.5, z: -3.5 },
+];
+
+export const RECEPTION_POS = { x: 0, z: 6 };
+export const SPAWN_POS = { x: 0, z: 7.5 };
+
+export const ENVS = {
+  modern: {
+    floor1: 0x2a2d35, floor2: 0x323640,
+    wall: 0x1e2028,
+    desk: 0x5a6a80, deskLegs: 0x4a5568,
+    chair: 0x374151, chairSeat: 0x2d3748,
+    accent: 0x58a6ff,
+  },
+  startup: {
+    floor1: 0x2c2520, floor2: 0x362f28,
+    wall: 0x1a1512,
+    desk: 0xA67B1D, deskLegs: 0x8B6914,
+    chair: 0x5a3e28, chairSeat: 0x3d2b1f,
+    accent: 0xf97316,
+  }
+};
+
+export const HEAD_R = 0.25;
+
+// Dressing room — right wing
+export const DRESSING_ROOM_POS = { x: 10, z: -1.5 }; // platform center
+export const DRESSING_ROOM_ENTRANCE = { x: 7.5, z: -1.5 }; // walk target
+
+// Rest area — right wing, further back
+export const REST_AREA_POS = { x: 10, z: -5.5 }; // beanbag center
+export const REST_AREA_ENTRANCE = { x: 7.5, z: -5.5 }; // walk target
+
+export const DEFAULT_APPEARANCE = {
+  head_color: '#FFD5B8',
+  hair_style: 'short',
+  hair_color: '#4A3728',
+  eye_style: 'dots',
+  mouth_style: 'smile',
+  shirt_color: '#58a6ff',
+  pants_color: '#2d3748',
+  shoe_color: '#1a1a2e',
+  outfit: null,
+  body_type: 'default',
+};
+
+export const AGENT_PALETTES = [
+  { shirt_color: '#58a6ff', pants_color: '#2d3748', hair_color: '#4A3728' },
+  { shirt_color: '#f97316', pants_color: '#3d2b1f', hair_color: '#1a1a1a' },
+  { shirt_color: '#a855f7', pants_color: '#1e1b2e', hair_color: '#8B4513' },
+  { shirt_color: '#22c55e', pants_color: '#1a2e1a', hair_color: '#D4A574' },
+  { shirt_color: '#ef4444', pants_color: '#2e1a1a', hair_color: '#333' },
+  { shirt_color: '#eab308', pants_color: '#2e2a1a', hair_color: '#8B0000' },
+  { shirt_color: '#06b6d4', pants_color: '#1a2e2e', hair_color: '#F5DEB3' },
+  { shirt_color: '#ec4899', pants_color: '#2e1a28', hair_color: '#FFD700' },
+];