let-them-talk 3.5.1 → 3.6.0

package/office/index.js

@@ -0,0 +1,337 @@
+import * as THREE from 'three';
+import { CSS2DObject } from 'three/addons/renderers/CSS2DRenderer.js';
+import { S } from './state.js';
+import { DESK_POSITIONS, DRESSING_ROOM_POS, DRESSING_ROOM_ENTRANCE, REST_AREA_POS, REST_AREA_ENTRANCE } from './constants.js';
+import { initScene } from './scene.js';
+import { buildEnvironment, updateTVScreen } from './environment.js';
+import { updateAgent } from './animation.js';
+import { syncAgents, processMessages, walkTo, showBubble } from './agents.js';
+// Side-effect: registers window.officeGetAppearance
+import './appearance.js';
+
+// Expose createCharacter + resolveAppearance for the character designer (Phase 3)
+export { createCharacter } from './character.js';
+export { resolveAppearance } from './appearance.js';
+export { buildHair } from './hair.js';
+export { buildFaceSprite } from './face.js';
+export { buildGlasses, buildHeadwear, buildNeckwear } from './accessories.js';
+export { buildOutfit, removeOutfit } from './outfits.js';
+
+// ===================== RAYCASTER + COMMAND MENU =====================
+var raycaster = new THREE.Raycaster();
+var mouse = new THREE.Vector2();
+var activeMenu = null;       // { agentName, css2dObj, div, timeout }
+var clickHandlerBound = null;
+
+function setupClickHandler() {
+  if (clickHandlerBound) return;
+  // Track mouse-down position to distinguish clicks from camera drags
+  var downPos = { x: 0, y: 0 };
+  S.renderer.domElement.addEventListener('mousedown', function(e) {
+    downPos.x = e.clientX; downPos.y = e.clientY;
+  });
+  clickHandlerBound = function(event) {
+    if (!S.running || !S.renderer) return;
+    // Ignore if mouse moved more than 5px (it was a drag, not a click)
+    var dx = event.clientX - downPos.x, dy = event.clientY - downPos.y;
+    if (Math.sqrt(dx * dx + dy * dy) > 5) return;
+
+    var rect = S.renderer.domElement.getBoundingClientRect();
+    mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
+    mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1;
+
+    raycaster.setFromCamera(mouse, S.camera);
+
+    // Test all agent body meshes
+    var agentMeshes = [];
+    for (var name in S.agents3d) {
+      var agent = S.agents3d[name];
+      if (agent.dying) continue;
+      // Collect body-part meshes for intersection
+      agent.parts.group.traverse(function(child) {
+        if (child.isMesh && !child.userData.isShadow) {
+          child.userData._agentName = name;
+          agentMeshes.push(child);
+        }
+      });
+    }
+
+    var intersects = raycaster.intersectObjects(agentMeshes, false);
+    if (intersects.length > 0) {
+      var hitAgent = intersects[0].object.userData._agentName;
+      if (hitAgent && S.agents3d[hitAgent]) {
+        event.stopPropagation();
+        showCommandMenu(hitAgent);
+        return;
+      }
+    }
+
+    // Clicked nothing — dismiss menu
+    dismissCommandMenu();
+  };
+  S.renderer.domElement.addEventListener('click', clickHandlerBound);
+}
+
+function showCommandMenu(agentName) {
+  dismissCommandMenu();
+  var agent = S.agents3d[agentName];
+  if (!agent) return;
+
+  var loc = agent.location || 'desk';
+  var isWalking = agent.target !== null;
+
+  var div = document.createElement('div');
+  div.className = 'office3d-cmd-menu';
+
+  var commands = [
+    { icon: '\uD83D\uDC57', label: 'Dressing Room', action: 'dressing_room', disabled: loc === 'dressing_room' || isWalking },
+    { icon: '\uD83D\uDCA4', label: 'Go Rest', action: 'rest', disabled: loc === 'rest' || isWalking },
+    { icon: '\uD83D\uDCBB', label: 'Back to Work', action: 'desk', disabled: loc === 'desk' || isWalking },
+    { divider: true },
+    { icon: '\u270F\uFE0F', label: 'Edit Profile', action: 'edit_profile', disabled: false },
+  ];
+
+  commands.forEach(function(cmd) {
+    if (cmd.divider) {
+      var d = document.createElement('div');
+      d.className = 'office3d-cmd-divider';
+      div.appendChild(d);
+      return;
+    }
+    var btn = document.createElement('button');
+    btn.className = 'office3d-cmd-btn' + (cmd.disabled ? ' disabled' : '');
+    btn.innerHTML = '<span class="office3d-cmd-icon">' + cmd.icon + '</span>' + cmd.label;
+    btn.addEventListener('click', function(e) {
+      e.stopPropagation();
+      dismissCommandMenu();
+      executeCommand(agentName, cmd.action);
+    });
+    div.appendChild(btn);
+  });
+
+  var menuObj = new CSS2DObject(div);
+  menuObj.position.set(0, 2.1, 0);
+  agent.parts.group.add(menuObj);
+
+  activeMenu = {
+    agentName: agentName,
+    css2dObj: menuObj,
+    div: div,
+    timeout: setTimeout(dismissCommandMenu, 5000),
+  };
+}
+
+function dismissCommandMenu() {
+  if (!activeMenu) return;
+  var agent = S.agents3d[activeMenu.agentName];
+  if (agent) {
+    agent.parts.group.remove(activeMenu.css2dObj);
+  }
+  if (activeMenu.div.parentElement) activeMenu.div.remove();
+  clearTimeout(activeMenu.timeout);
+  activeMenu = null;
+}
+
+function executeCommand(agentName, action) {
+  var agent = S.agents3d[agentName];
+  if (!agent) return;
+
+  switch (action) {
+    case 'dressing_room':
+      agent.location = 'walking';
+      agent.isSitting = false;
+      showBubble(agent, 'Going to change!');
+      walkTo(agent, DRESSING_ROOM_ENTRANCE.x, DRESSING_ROOM_ENTRANCE.z, function() {
+        walkTo(agent, DRESSING_ROOM_POS.x, DRESSING_ROOM_POS.z, function() {
+          agent.location = 'dressing_room';
+          agent.isSitting = false;
+          showBubble(agent, 'Time for a new look!');
+          // Open character editor for this agent
+          window.editingAgent = agentName;
+          if (typeof window.openProfileEditor === 'function') {
+            window.openProfileEditor();
+          }
+          // Listen for editor close to return to desk
+          waitForEditorClose(agent);
+        });
+      });
+      break;
+
+    case 'rest':
+      agent.location = 'walking';
+      agent.isSitting = false;
+      showBubble(agent, 'Need a break...');
+      walkTo(agent, REST_AREA_ENTRANCE.x, REST_AREA_ENTRANCE.z, function() {
+        walkTo(agent, REST_AREA_POS.x, REST_AREA_POS.z, function() {
+          agent.location = 'rest';
+          agent.state = 'sleeping';
+          agent.isSitting = false;
+          showBubble(agent, 'Zzz...');
+        });
+      });
+      break;
+
+    case 'desk':
+      agent.location = 'walking';
+      agent.state = 'active';
+      agent.isSitting = false;
+      showBubble(agent, 'Back to work!');
+      walkTo(agent, agent.deskPos.x, agent.deskPos.z + 0.7, function() {
+        agent.location = 'desk';
+        agent.registered = true;
+      });
+      break;
+
+    case 'edit_profile':
+      window.editingAgent = agentName;
+      if (typeof window.openProfileEditor === 'function') {
+        window.openProfileEditor();
+      }
+      break;
+  }
+}
+
+function waitForEditorClose(agent) {
+  // Poll for the character designer panel closing
+  var checkInterval = setInterval(function() {
+    var panel = document.getElementById('char-designer');
+    if (!panel || !panel.classList.contains('open')) {
+      clearInterval(checkInterval);
+      // Agent walks back to desk after editor closes
+      if (agent.location === 'dressing_room') {
+        agent.location = 'walking';
+        showBubble(agent, 'Looking good!');
+        walkTo(agent, DRESSING_ROOM_ENTRANCE.x, DRESSING_ROOM_ENTRANCE.z, function() {
+          walkTo(agent, agent.deskPos.x, agent.deskPos.z + 0.7, function() {
+            agent.location = 'desk';
+            agent.registered = true;
+          });
+        });
+      }
+    }
+  }, 500);
+  // Safety: stop checking after 2 minutes
+  setTimeout(function() { clearInterval(checkInterval); }, 120000);
+}
+
+// ===================== ANIMATION LOOP =====================
+function animate() {
+  if (!S.running) return;
+  S.animationId = requestAnimationFrame(animate);
+
+  var dt = Math.min(S.clock.getDelta(), 0.1);
+  var time = S.clock.getElapsedTime();
+
+  for (var name in S.agents3d) {
+    updateAgent(S.agents3d[name], dt, time);
+  }
+
+  // Update TV screen every ~0.5s for smooth ticker
+  if (!S._tvTimer) S._tvTimer = 0;
+  S._tvTimer += dt;
+  if (S._tvTimer >= 0.15) {
+    S._tvTimer = 0;
+    updateTVScreen(time);
+  }
+
+  S.controls.update(dt);
+  S.renderer.render(S.scene, S.camera);
+  S.cssRenderer.render(S.scene, S.camera);
+
+  // FPS
+  S.fpsCounter++;
+  var now = performance.now();
+  if (now - S.fpsTime > 1000) {
+    var fpsEl = document.getElementById('office-fps');
+    if (fpsEl && window.activeView === 'office') fpsEl.textContent = S.fpsCounter + ' fps';
+    S.fpsCounter = 0;
+    S.fpsTime = now;
+  }
+}
+
+// ===================== PUBLIC API =====================
+window.office3dStart = function() {
+  if (S.running) return;
+  S.container = document.getElementById('office-3d-container');
+  if (!S.container) return;
+
+  if (!S.scene) {
+    if (!initScene()) return;
+    buildEnvironment();
+  }
+
+  if (!S.container.contains(S.renderer.domElement)) {
+    S.container.appendChild(S.renderer.domElement);
+    S.container.appendChild(S.cssRenderer.domElement);
+  }
+
+  var w = S.container.clientWidth;
+  var h = S.container.clientHeight;
+  if (w > 0 && h > 0) {
+    S.camera.aspect = w / h;
+    S.camera.updateProjectionMatrix();
+    S.renderer.setSize(w, h);
+    S.cssRenderer.setSize(w, h);
+  }
+
+  S.running = true;
+  S.clock.start();
+  S.lastProcessedMsg = 0;
+  syncAgents();
+  processMessages();
+  setupClickHandler();
+  animate();
+
+  if (S.syncInterval) clearInterval(S.syncInterval);
+  S.syncInterval = setInterval(function() {
+    if (S.running && window.activeView === 'office') {
+      syncAgents();
+      processMessages();
+      updateTVScreen(S.clock.getElapsedTime());
+    }
+  }, 2000);
+};
+
+window.office3dStop = function() {
+  S.running = false;
+  if (S.animationId) {
+    cancelAnimationFrame(S.animationId);
+    S.animationId = null;
+  }
+  if (S.syncInterval) {
+    clearInterval(S.syncInterval);
+    S.syncInterval = null;
+  }
+  dismissCommandMenu();
+};
+
+window.office3dSetEnvironment = function(env) {
+  if (env === S.currentEnv) return;
+  S.currentEnv = env;
+  if (S.scene) {
+    buildEnvironment();
+    var i = 0;
+    for (var name in S.agents3d) {
+      var agent = S.agents3d[name];
+      if (i < DESK_POSITIONS.length) {
+        agent.deskIdx = i;
+        agent.deskPos = { x: DESK_POSITIONS[i].x, z: DESK_POSITIONS[i].z };
+        walkTo(agent, agent.deskPos.x, agent.deskPos.z + 0.7);
+      }
+      i++;
+    }
+  }
+};
+
+window.office3dSetCamSpeed = function(speed) {
+  if (S.controls) S.controls.moveSpeed = speed;
+};
+
+// Handle visibility change for 3D mode
+document.addEventListener('visibilitychange', function() {
+  if (document.hidden && S.running) {
+    window.office3dStop();
+  } else if (!document.hidden && window.activeView === 'office' && window.officeMode === '3d') {
+    window.office3dStart();
+  }
+});

package/office/mod-loader.js

@@ -0,0 +1,257 @@
+// Mod loader — loads and validates GLB/GLTF community mods + built-in procedural items.
+// GLB files contain ONLY geometry/textures/animations — NO executable code.
+import * as THREE from 'three';
+import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
+
+// Type limits for validation
+const TYPE_LIMITS = {
+  accessory:   { maxPolys: 500,   maxBytes: 200 * 1024 },
+  hairstyle:   { maxPolys: 800,   maxBytes: 300 * 1024 },
+  outfit:      { maxPolys: 1500,  maxBytes: 500 * 1024 },
+  character:   { maxPolys: 3000,  maxBytes: 1024 * 1024 },
+  environment: { maxPolys: 10000, maxBytes: 2 * 1024 * 1024 },
+};
+
+// Manifest schema validation
+const REQUIRED_FIELDS = ['id', 'name', 'version', 'author', 'type', 'category'];
+const VALID_TYPES = ['accessory', 'hairstyle', 'outfit', 'character', 'environment'];
+const ID_PATTERN = /^[a-z0-9_-]{1,40}$/;
+
+// GLB magic bytes: 0x46546C67 ("glTF" in ASCII)
+const GLB_MAGIC = 0x46546C67;
+
+const modRegistry = {};
+const loadedModels = {};
+let builtInItems = [];
+
+// Load built-in procedural item manifests
+export async function loadBuiltInManifests() {
+  try {
+    var resp = await fetch('/mods/built-in-accessories.json');
+    if (resp.ok) {
+      builtInItems = await resp.json();
+      builtInItems.forEach(function(item) {
+        modRegistry[item.id] = item;
+      });
+    }
+  } catch (e) {
+    console.warn('Could not load built-in mod manifests:', e);
+  }
+}
+
+export function getInstalledMods() {
+  return Object.values(modRegistry);
+}
+
+export function getModsByCategory(category) {
+  return Object.values(modRegistry).filter(function(m) { return m.category === category; });
+}
+
+export function getModsByType(type) {
+  return Object.values(modRegistry).filter(function(m) { return m.type === type; });
+}
+
+export function isModInstalled(id) {
+  return !!modRegistry[id];
+}
+
+export function getMod(id) {
+  return modRegistry[id] || null;
+}
+
+// Validate manifest JSON
+export function validateManifest(manifest) {
+  var errors = [];
+
+  // Required fields
+  for (var i = 0; i < REQUIRED_FIELDS.length; i++) {
+    if (!manifest[REQUIRED_FIELDS[i]]) {
+      errors.push('Missing required field: ' + REQUIRED_FIELDS[i]);
+    }
+  }
+
+  // ID format
+  if (manifest.id && !ID_PATTERN.test(manifest.id)) {
+    errors.push('Invalid id format: must be 1-40 chars of a-z, 0-9, _, -');
+  }
+
+  // Type
+  if (manifest.type && !VALID_TYPES.includes(manifest.type)) {
+    errors.push('Invalid type: must be one of ' + VALID_TYPES.join(', '));
+  }
+
+  // ID collision
+  if (manifest.id && modRegistry[manifest.id]) {
+    errors.push('ID collision: "' + manifest.id + '" already exists');
+  }
+
+  // Asset definition
+  if (!manifest.asset || !manifest.asset.format) {
+    errors.push('Missing asset definition');
+  } else if (!['glb', 'gltf', 'procedural'].includes(manifest.asset.format)) {
+    errors.push('Invalid asset format: must be glb, gltf, or procedural');
+  }
+
+  return { valid: errors.length === 0, errors: errors };
+}
+
+// Validate GLB binary data (client-side, called after loading)
+export function validateGLBBytes(arrayBuffer) {
+  if (arrayBuffer.byteLength < 12) {
+    return { valid: false, error: 'File too small to be a valid GLB' };
+  }
+
+  var view = new DataView(arrayBuffer);
+  var magic = view.getUint32(0, true);
+  if (magic !== GLB_MAGIC) {
+    return { valid: false, error: 'Invalid GLB magic bytes (not a GLB file)' };
+  }
+
+  var version = view.getUint32(4, true);
+  if (version !== 2) {
+    return { valid: false, error: 'Unsupported GLB version: ' + version + ' (expected 2)' };
+  }
+
+  return { valid: true };
+}
+
+// Count polygons in a loaded GLTF scene
+export function countPolygons(gltfScene) {
+  var totalPolys = 0;
+  gltfScene.traverse(function(child) {
+    if (child.isMesh && child.geometry) {
+      var geo = child.geometry;
+      if (geo.index) {
+        totalPolys += geo.index.count / 3;
+      } else if (geo.attributes.position) {
+        totalPolys += geo.attributes.position.count / 3;
+      }
+    }
+  });
+  return Math.floor(totalPolys);
+}
+
+// Check bounding box fits expected dimensions
+export function checkBoundingBox(gltfScene, maxDim) {
+  var box = new THREE.Box3().setFromObject(gltfScene);
+  var size = box.getSize(new THREE.Vector3());
+  var max = Math.max(size.x, size.y, size.z);
+  if (max > maxDim) {
+    return { valid: false, error: 'Model too large: ' + max.toFixed(2) + ' > ' + maxDim + ' max dimension' };
+  }
+  return { valid: true, size: size };
+}
+
+// Sanitize materials (cap emissive, force roughness minimum)
+export function sanitizeMaterials(gltfScene) {
+  gltfScene.traverse(function(child) {
+    if (child.isMesh && child.material) {
+      var mats = Array.isArray(child.material) ? child.material : [child.material];
+      mats.forEach(function(mat) {
+        if (mat.emissiveIntensity > 2) mat.emissiveIntensity = 2;
+        if (mat.roughness !== undefined && mat.roughness < 0.1) mat.roughness = 0.1;
+      });
+    }
+  });
+}
+
+// Load a GLB mod and validate it
+export async function loadGLBMod(manifest) {
+  if (manifest.asset.format !== 'glb' || !manifest.asset.file) {
+    return { success: false, error: 'Not a GLB mod or missing file path' };
+  }
+
+  var limits = TYPE_LIMITS[manifest.type] || TYPE_LIMITS.accessory;
+  var url = '/mods/' + manifest.id + '/' + manifest.asset.file;
+
+  try {
+    // Fetch raw bytes for magic check
+    var resp = await fetch(url);
+    if (!resp.ok) throw new Error('Failed to fetch: ' + resp.status);
+    var buffer = await resp.arrayBuffer();
+
+    // Size check
+    if (buffer.byteLength > limits.maxBytes) {
+      return { success: false, error: 'File too large: ' + (buffer.byteLength / 1024).toFixed(0) + 'KB > ' + (limits.maxBytes / 1024) + 'KB limit' };
+    }
+
+    // Magic bytes check
+    var bytesCheck = validateGLBBytes(buffer);
+    if (!bytesCheck.valid) return { success: false, error: bytesCheck.error };
+
+    // Parse with Three.js GLTFLoader
+    var loader = new GLTFLoader();
+    var gltf = await new Promise(function(resolve, reject) {
+      loader.parse(buffer, '', resolve, reject);
+    });
+
+    // Poly count check
+    var polyCount = countPolygons(gltf.scene);
+    if (polyCount > limits.maxPolys) {
+      return { success: false, error: 'Too many polygons: ' + polyCount + ' > ' + limits.maxPolys + ' limit' };
+    }
+
+    // Bounding box check (max dimension based on type)
+    var maxDims = { accessory: 1, hairstyle: 1, outfit: 2, character: 3, environment: 30 };
+    var bbCheck = checkBoundingBox(gltf.scene, maxDims[manifest.type] || 1);
+    if (!bbCheck.valid) return { success: false, error: bbCheck.error };
+
+    // Sanitize materials
+    sanitizeMaterials(gltf.scene);
+
+    // Store loaded model
+    loadedModels[manifest.id] = gltf;
+
+    return { success: true, gltf: gltf, polyCount: polyCount, size: bbCheck.size };
+  } catch (e) {
+    return { success: false, error: 'Failed to load GLB: ' + e.message };
+  }
+}
+
+// Get a loaded GLB model's scene (clone for instancing)
+export function getModModel(id) {
+  if (!loadedModels[id]) return null;
+  return loadedModels[id].scene.clone();
+}
+
+// Register a mod into the registry
+export function registerMod(manifest) {
+  modRegistry[manifest.id] = manifest;
+}
+
+// Unregister a mod
+export function unregisterMod(id) {
+  delete modRegistry[id];
+  if (loadedModels[id]) {
+    // Dispose loaded model
+    loadedModels[id].scene.traverse(function(child) {
+      if (child.geometry) child.geometry.dispose();
+      if (child.material) {
+        if (Array.isArray(child.material)) child.material.forEach(function(m) { m.dispose(); });
+        else child.material.dispose();
+      }
+    });
+    delete loadedModels[id];
+  }
+}
+
+// Initialize: load registry + built-in manifests
+export async function initModSystem() {
+  await loadBuiltInManifests();
+
+  // Load community registry
+  try {
+    var resp = await fetch('/api/mods');
+    if (resp.ok) {
+      var data = await resp.json();
+      var mods = data.mods || {};
+      for (var id in mods) {
+        if (!modRegistry[id]) {
+          modRegistry[id] = mods[id];
+        }
+      }
+    }
+  } catch (e) {
+    console.warn('Could not load mod registry:', e);
+  }
+}

package/office/monitors.js

@@ -0,0 +1,113 @@
+import * as THREE from 'three';
+import { S } from './state.js';
+
+export function updateMonitorScreen(deskIdx, agentName, time) {
+  var desk = S.deskMeshes[deskIdx];
+  if (!desk) return;
+  var W = 256, H = 160;
+  if (!S.monitorCanvases[deskIdx]) {
+    var cvs = document.createElement('canvas');
+    cvs.width = W; cvs.height = H;
+    S.monitorCanvases[deskIdx] = { canvas: cvs, texture: new THREE.CanvasTexture(cvs) };
+    S.monitorCanvases[deskIdx].texture.minFilter = THREE.LinearFilter;
+    desk.screen.material = new THREE.MeshStandardMaterial({
+      map: S.monitorCanvases[deskIdx].texture,
+      emissive: 0x58a6ff, emissiveIntensity: 0.3, roughness: 0.2
+    });
+  }
+  var mc = S.monitorCanvases[deskIdx];
+  var ctx = mc.canvas.getContext('2d');
+
+  // Terminal background
+  ctx.fillStyle = '#0c1021';
+  ctx.fillRect(0, 0, W, H);
+
+  // Title bar
+  ctx.fillStyle = '#1a1f36';
+  ctx.fillRect(0, 0, W, 14);
+  ctx.fillStyle = '#ff5f57'; ctx.beginPath(); ctx.arc(8, 7, 3, 0, Math.PI * 2); ctx.fill();
+  ctx.fillStyle = '#ffbd2e'; ctx.beginPath(); ctx.arc(18, 7, 3, 0, Math.PI * 2); ctx.fill();
+  ctx.fillStyle = '#28c840'; ctx.beginPath(); ctx.arc(28, 7, 3, 0, Math.PI * 2); ctx.fill();
+  ctx.fillStyle = '#8892b0';
+  ctx.font = '9px monospace';
+  ctx.fillText(agentName + ' \u2014 terminal', 40, 11);
+
+  // Gather real data
+  var history = window.cachedHistory || [];
+  var agentInfo = (window.cachedAgents || {})[agentName] || {};
+  var lines = [];
+
+  var statusColor = agentInfo.status === 'active' ? '#28c840' : '#ffbd2e';
+  lines.push({ color: '#546178', text: '$ agent status' });
+  lines.push({ color: statusColor, text: '  ' + (agentInfo.status || 'unknown').toUpperCase() + (agentInfo.is_listening ? ' (listening)' : ' (working)') });
+  lines.push({ color: '#546178', text: '' });
+
+  var sent = 0, recv = 0;
+  for (var i = 0; i < history.length; i++) {
+    if (history[i].from === agentName) sent++;
+    if (history[i].to === agentName) recv++;
+  }
+  lines.push({ color: '#546178', text: '$ stats' });
+  lines.push({ color: '#79c0ff', text: '  sent: ' + sent + '  recv: ' + recv + '  total: ' + history.length });
+  lines.push({ color: '#546178', text: '' });
+
+  lines.push({ color: '#546178', text: '$ tail -f messages.jsonl' });
+  var agentMsgs = [];
+  for (var j = history.length - 1; j >= 0 && agentMsgs.length < 4; j--) {
+    var m = history[j];
+    if (m.from === agentName || m.to === agentName) agentMsgs.unshift(m);
+  }
+  for (var k = 0; k < agentMsgs.length; k++) {
+    var msg = agentMsgs[k];
+    var isSent = msg.from === agentName;
+    var prefix = isSent ? '  > ' : '  < ';
+    var peer = isSent ? (msg.to || 'all') : msg.from;
+    var snippet = (msg.content || msg.message || '').substring(0, 28);
+    if ((msg.content || msg.message || '').length > 28) snippet += '..';
+    lines.push({ color: isSent ? '#7ee787' : '#d2a8ff', text: prefix + peer + ': ' + snippet });
+  }
+  if (agentMsgs.length === 0) {
+    lines.push({ color: '#3d4663', text: '  (no messages yet)' });
+  }
+
+  var showCursor = Math.floor(time * 2) % 2 === 0;
+
+  ctx.font = '9px monospace';
+  var lineY = 24;
+  var maxLines = Math.floor((H - 24) / 11);
+  var startLine = Math.max(0, lines.length - maxLines);
+  for (var r = startLine; r < lines.length; r++) {
+    ctx.fillStyle = lines[r].color;
+    ctx.fillText(lines[r].text, 4, lineY);
+    lineY += 11;
+  }
+  if (showCursor) {
+    ctx.fillStyle = '#58a6ff';
+    ctx.fillText('$ _', 4, lineY);
+  } else {
+    ctx.fillStyle = '#58a6ff';
+    ctx.fillText('$', 4, lineY);
+  }
+
+  // Scanline effect
+  ctx.fillStyle = 'rgba(0,0,0,0.03)';
+  for (var sl = 0; sl < H; sl += 2) {
+    ctx.fillRect(0, sl, W, 1);
+  }
+
+  mc.texture.needsUpdate = true;
+}
+
+export function setMonitorDim(deskIdx) {
+  var desk = S.deskMeshes[deskIdx];
+  if (!desk) return;
+  if (S.monitorCanvases[deskIdx]) {
+    S.monitorCanvases[deskIdx].texture.dispose();
+    if (desk.screen.material !== desk.screenMat) desk.screen.material.dispose();
+    delete S.monitorCanvases[deskIdx];
+  }
+  desk.screen.material = desk.screenMat;
+  desk.screenMat.emissive.setHex(0x1a2744);
+  desk.screenMat.emissiveIntensity = 0.15;
+  desk.screenMat.color.setHex(0x1a2744);
+}