let-them-talk 4.2.0 → 4.3.0

package/office/index.js

@@ -67,6 +67,29 @@ function setupClickHandler() {
       }
     }
 
+    // Check monitor screen clicks
+    var monitorMeshes = [];
+    for (var di = 0; di < S.deskMeshes.length; di++) {
+      if (S.deskMeshes[di] && S.deskMeshes[di].screen) {
+        S.deskMeshes[di].screen.userData._deskIdx = di;
+        monitorMeshes.push(S.deskMeshes[di].screen);
+      }
+    }
+    var monitorHits = raycaster.intersectObjects(monitorMeshes, false);
+    if (monitorHits.length > 0) {
+      var deskIdx = monitorHits[0].object.userData._deskIdx;
+      // Find which agent sits at this desk
+      var monitorAgent = null;
+      for (var mname in S.agents3d) {
+        if (S.agents3d[mname].deskIndex === deskIdx) { monitorAgent = mname; break; }
+      }
+      if (monitorAgent) {
+        event.stopPropagation();
+        showMonitorPanel(monitorAgent);
+        return;
+      }
+    }
+
     // Clicked nothing — dismiss menu
     dismissCommandMenu();
   };
@@ -85,6 +108,11 @@ function showCommandMenu(agentName) {
   div.className = 'office3d-cmd-menu';
 
   var commands = [
+    { icon: '\uD83D\uDCAC', label: 'Send Message', action: 'send_message', disabled: false },
+    { icon: '\uD83D\uDCCB', label: 'Assign Task', action: 'assign_task', disabled: false },
+    { icon: '\uD83D\uDCE8', label: 'View Messages', action: 'view_messages', disabled: false },
+    { icon: '\uD83D\uDC4B', label: 'Nudge', action: 'nudge', disabled: false },
+    { divider: true },
     { 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 },
@@ -133,6 +161,88 @@ function dismissCommandMenu() {
   activeMenu = null;
 }
 
+var activeMonitorPanel = null;
+
+function showMonitorPanel(agentName) {
+  dismissMonitorPanel();
+  var history = window.cachedHistory || [];
+  var agentMsgs = history.filter(function(m) { return m.from === agentName || m.to === agentName; }).slice(-10);
+
+  var panel = document.createElement('div');
+  panel.className = 'office3d-monitor-panel';
+  panel.style.cssText = 'position:fixed;right:20px;top:80px;width:360px;max-height:500px;background:#0c1021;border:1px solid #1a1f36;border-radius:10px;overflow:hidden;z-index:300;box-shadow:0 8px 32px rgba(0,0,0,0.5);font-family:monospace';
+
+  var header = '<div style="background:#1a1f36;padding:8px 12px;display:flex;align-items:center;justify-content:space-between"><span style="color:#8892b0;font-size:12px">' + agentName + ' \u2014 messages</span><button onclick="this.parentElement.parentElement.remove()" style="background:none;border:none;color:#ff5f57;cursor:pointer;font-size:14px">\u2715</button></div>';
+
+  var body = '<div style="padding:10px;overflow-y:auto;max-height:440px;font-size:11px">';
+  if (!agentMsgs.length) {
+    body += '<div style="color:#546178;text-align:center;padding:20px">No messages yet</div>';
+  }
+  for (var i = 0; i < agentMsgs.length; i++) {
+    var m = agentMsgs[i];
+    var isFrom = m.from === agentName;
+    var color = isFrom ? '#58a6ff' : '#3fb950';
+    var content = (m.content || '').substring(0, 150);
+    body += '<div style="margin-bottom:8px;padding:6px 8px;background:#111827;border-radius:6px;border-left:2px solid ' + color + '">' +
+      '<div style="color:' + color + ';font-size:10px;font-weight:bold;margin-bottom:2px">' + m.from + ' \u2192 ' + m.to + '</div>' +
+      '<div style="color:#e6edf3;line-height:1.4">' + content.replace(/</g, '&lt;').replace(/>/g, '&gt;') + (m.content && m.content.length > 150 ? '...' : '') + '</div>' +
+    '</div>';
+  }
+  body += '</div>';
+
+  panel.innerHTML = header + body;
+  document.body.appendChild(panel);
+  activeMonitorPanel = panel;
+}
+
+function dismissMonitorPanel() {
+  if (activeMonitorPanel) {
+    activeMonitorPanel.remove();
+    activeMonitorPanel = null;
+  }
+}
+
+// Non-blocking input overlay — replaces browser prompt() to avoid freezing events
+var _activeInputOverlay = null;
+function showInputOverlay(label, placeholder, callback) {
+  if (_activeInputOverlay) _activeInputOverlay.remove();
+  var overlay = document.createElement('div');
+  overlay.style.cssText = 'position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.4);z-index:10000;display:flex;align-items:center;justify-content:center';
+  var box = document.createElement('div');
+  box.style.cssText = 'background:#161b22;border:1px solid #30363d;border-radius:12px;padding:20px;min-width:340px;box-shadow:0 8px 32px rgba(0,0,0,0.5)';
+  box.innerHTML = '<div style="color:#e6edf3;font-size:13px;font-weight:600;margin-bottom:10px">' + label.replace(/</g, '&lt;') + '</div>';
+  var input = document.createElement('input');
+  input.type = 'text';
+  input.placeholder = placeholder || '';
+  input.style.cssText = 'width:100%;padding:8px 12px;background:#0d1117;border:1px solid #30363d;border-radius:8px;color:#e6edf3;font-size:13px;outline:none;box-sizing:border-box;font-family:inherit';
+  box.appendChild(input);
+  var btns = document.createElement('div');
+  btns.style.cssText = 'display:flex;gap:8px;margin-top:12px;justify-content:flex-end';
+  var cancelBtn = document.createElement('button');
+  cancelBtn.textContent = 'Cancel';
+  cancelBtn.style.cssText = 'padding:6px 14px;background:#21262d;border:1px solid #30363d;border-radius:6px;color:#8b949e;font-size:12px;cursor:pointer;font-family:inherit';
+  var submitBtn = document.createElement('button');
+  submitBtn.textContent = 'Send';
+  submitBtn.style.cssText = 'padding:6px 14px;background:#238636;border:1px solid #2ea043;border-radius:6px;color:#fff;font-size:12px;cursor:pointer;font-weight:600;font-family:inherit';
+  btns.appendChild(cancelBtn);
+  btns.appendChild(submitBtn);
+  box.appendChild(btns);
+  overlay.appendChild(box);
+  document.body.appendChild(overlay);
+  _activeInputOverlay = overlay;
+  input.focus();
+  function close() { overlay.remove(); _activeInputOverlay = null; }
+  function submit() { var val = input.value; close(); callback(val); }
+  submitBtn.addEventListener('click', submit);
+  cancelBtn.addEventListener('click', close);
+  overlay.addEventListener('click', function(e) { if (e.target === overlay) close(); });
+  input.addEventListener('keydown', function(e) {
+    if (e.key === 'Enter') { e.preventDefault(); submit(); }
+    if (e.key === 'Escape') { e.preventDefault(); close(); }
+    e.stopPropagation(); // prevent WASD from moving player while typing
+  });
+}
+
 function executeCommand(agentName, action) {
   var agent = S.agents3d[agentName];
   if (!agent) return;
@@ -183,6 +293,51 @@ function executeCommand(agentName, action) {
       });
       break;
 
+    case 'send_message':
+      showInputOverlay('Send message to ' + agentName + ':', 'Type your message...', function(msg) {
+        if (msg && msg.trim()) {
+          showBubble(agent, 'Message incoming...');
+          fetch('/api/inject' + (window.activeProject ? '?project=' + encodeURIComponent(window.activeProject) : ''), {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json', 'X-LTT-Request': '1' },
+            body: JSON.stringify({ to: agentName, content: msg.trim() })
+          }).then(function() { showBubble(agent, 'Got it!'); });
+        }
+      });
+      break;
+
+    case 'assign_task':
+      showInputOverlay('New task for ' + agentName + ':', 'Task title...', function(title) {
+        if (title && title.trim()) {
+          showBubble(agent, 'New task assigned!');
+          fetch('/api/tasks' + (window.activeProject ? '?project=' + encodeURIComponent(window.activeProject) : ''), {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json', 'X-LTT-Request': '1' },
+            body: JSON.stringify({ title: title.trim(), assignee: agentName, status: 'pending' })
+          });
+        }
+      });
+      break;
+
+    case 'view_messages':
+      showBubble(agent, 'Showing messages...');
+      if (typeof window.switchView === 'function') window.switchView('messages');
+      var searchInput = document.getElementById('search-input');
+      if (searchInput) {
+        searchInput.value = agentName;
+        if (typeof window.onSearch === 'function') window.onSearch();
+      }
+      break;
+
+    case 'nudge':
+      showBubble(agent, 'Hey! Wake up!');
+      fetch('/api/inject' + (window.activeProject ? '?project=' + encodeURIComponent(window.activeProject) : ''), {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json', 'X-LTT-Request': '1' },
+        body: JSON.stringify({ to: agentName, content: 'Hey ' + agentName + ', the user is waiting for you. Please check for new messages and continue your work.' })
+      });
+      break;
+
     case 'edit_profile':
       window.editingAgent = agentName;
       if (typeof window.openProfileEditor === 'function') {
@@ -269,10 +424,31 @@ function animate() {
     updateTVScreen(time);
   }
 
+  // Jukebox neon color cycling
+  if (S._jukebox && S._jukebox.neonMat) {
+    if (!S._jukeboxTimer) S._jukeboxTimer = 0;
+    S._jukeboxTimer += dt;
+    if (S._jukeboxTimer >= 1.5) { // cycle every 1.5s
+      S._jukeboxTimer = 0;
+      S._jukebox.neonIndex = (S._jukebox.neonIndex + 1) % S._jukebox.neonColors.length;
+      var c = S._jukebox.neonColors[S._jukebox.neonIndex];
+      S._jukebox.neonMat.color.setHex(c);
+      S._jukebox.neonMat.emissive.setHex(c);
+    }
+  }
+
   S.controls.update(dt);
   S.renderer.render(S.scene, S.camera);
   S.cssRenderer.render(S.scene, S.camera);
 
+  // Minimap update (every ~0.3s)
+  if (!S._minimapTimer) S._minimapTimer = 0;
+  S._minimapTimer += dt;
+  if (S._minimapTimer >= 0.3) {
+    S._minimapTimer = 0;
+    updateMinimap();
+  }
+
   // FPS
   S.fpsCounter++;
   var now = performance.now();
@@ -284,6 +460,205 @@ function animate() {
   }
 }
 
+// ===================== FULLSCREEN TOGGLE =====================
+var _fullscreenBtn = null;
+
+function createFullscreenButton() {
+  if (_fullscreenBtn) return;
+  _fullscreenBtn = document.createElement('button');
+  _fullscreenBtn.id = 'office-fullscreen-btn';
+  _fullscreenBtn.innerHTML = '&#x26F6;'; // ⛶ fullscreen icon
+  _fullscreenBtn.title = 'Enter Fullscreen (End key to exit)';
+  // Custom button hidden — dashboard's own Fullscreen button now handles 3D-only fullscreen
+  _fullscreenBtn.style.cssText = 'display:none;';
+}
+
+function removeFullscreenButton() {
+  if (_fullscreenBtn) {
+    _fullscreenBtn.style.display = 'none';
+  }
+}
+
+function toggleFullscreen() {
+  if (document.fullscreenElement) {
+    document.exitFullscreen();
+  } else {
+    // Fullscreen only the 3D Hub container — not the entire dashboard
+    var target = S.container || document.getElementById('office-3d-container');
+    if (target) {
+      target.requestFullscreen().catch(function() {});
+    }
+  }
+}
+
+// "End" key exits fullscreen
+document.addEventListener('keydown', function(e) {
+  if (e.code === 'End' && document.fullscreenElement) {
+    document.exitFullscreen();
+  }
+});
+
+// Update button icon + minimap visibility on fullscreen change
+document.addEventListener('fullscreenchange', function() {
+  if (!_fullscreenBtn) return;
+  if (document.fullscreenElement) {
+    _fullscreenBtn.innerHTML = '&#x2716;'; // ✖ exit icon
+    _fullscreenBtn.title = 'Exit Fullscreen (End key)';
+    // Show minimap in fullscreen only
+    if (_minimapContainer) _minimapContainer.style.display = 'block';
+  } else {
+    _fullscreenBtn.innerHTML = '&#x26F6;'; // ⛶ fullscreen icon
+    _fullscreenBtn.title = 'Enter Fullscreen (End key to exit)';
+    // Hide minimap when exiting fullscreen
+    if (_minimapContainer) _minimapContainer.style.display = 'none';
+  }
+});
+
+// ===================== MINIMAP =====================
+var _minimapCanvas = null;
+var _minimapCtx = null;
+var _minimapContainer = null;
+
+function createMinimap() {
+  if (_minimapContainer) return;
+  _minimapContainer = document.createElement('div');
+  _minimapContainer.id = 'office-minimap';
+  // Minimap only visible in fullscreen mode
+  _minimapContainer.style.cssText = 'position:fixed;bottom:12px;left:12px;z-index:10001;width:140px;height:140px;border-radius:8px;border:1px solid #30363d;overflow:hidden;background:rgba(0,0,0,0.75);pointer-events:none;display:none;';
+
+  _minimapCanvas = document.createElement('canvas');
+  _minimapCanvas.width = 140;
+  _minimapCanvas.height = 140;
+  _minimapContainer.appendChild(_minimapCanvas);
+  _minimapCtx = _minimapCanvas.getContext('2d');
+
+  document.body.appendChild(_minimapContainer);
+  // Minimap starts hidden — only shown in fullscreen mode
+}
+
+function removeMinimap() {
+  if (_minimapContainer) {
+    _minimapContainer.style.display = 'none';
+  }
+}
+
+function updateMinimap() {
+  if (!_minimapCtx || !S.running) return;
+  var ctx = _minimapCtx;
+  var W = 140, H = 140;
+  // Map world coords to minimap: world is roughly -14..14 X, -8..8 Z
+  var scaleX = W / 32; // 32 world units width
+  var scaleZ = H / 20; // 20 world units depth
+  var offX = 16; // center offset
+  var offZ = 10;
+
+  ctx.clearRect(0, 0, W, H);
+
+  // Draw floor outline
+  ctx.strokeStyle = '#30363d';
+  ctx.lineWidth = 1;
+  ctx.strokeRect(2, 2, W - 4, H - 4);
+
+  // Draw desk positions as gray squares
+  var allDesks = S._campusDeskPositions || [];
+  ctx.fillStyle = 'rgba(100,100,120,0.4)';
+  for (var di = 0; di < allDesks.length; di++) {
+    var dp = allDesks[di];
+    var dx = (dp.x + offX) * scaleX;
+    var dz = (dp.z + offZ) * scaleZ;
+    ctx.fillRect(dx - 3, dz - 2, 6, 4);
+  }
+
+  // Draw agents as colored dots
+  for (var name in S.agents3d) {
+    var agent = S.agents3d[name];
+    if (!agent.registered || agent.dying) continue;
+    var ax = (agent.pos.x + offX) * scaleX;
+    var az = (agent.pos.z + offZ) * scaleZ;
+
+    // Color by state
+    if (agent.state === 'active' && agent.isListening) {
+      ctx.fillStyle = '#4ade80'; // green - listening
+    } else if (agent.state === 'active') {
+      ctx.fillStyle = '#58a6ff'; // blue - active
+    } else if (agent.state === 'sleeping') {
+      ctx.fillStyle = '#facc15'; // yellow - sleeping
+    } else {
+      ctx.fillStyle = '#f87171'; // red - dead
+    }
+
+    ctx.beginPath();
+    ctx.arc(ax, az, 4, 0, Math.PI * 2);
+    ctx.fill();
+
+    // Agent name label (tiny)
+    ctx.fillStyle = 'rgba(255,255,255,0.7)';
+    ctx.font = '7px sans-serif';
+    ctx.textAlign = 'center';
+    ctx.fillText(agent.displayName.substring(0, 6), ax, az - 6);
+  }
+
+  // Draw player as white triangle
+  if (S._player && isPlayerMode()) {
+    var px = (S._player.pos.x + offX) * scaleX;
+    var pz = (S._player.pos.z + offZ) * scaleZ;
+    ctx.fillStyle = '#ffffff';
+    ctx.beginPath();
+    ctx.moveTo(px, pz - 5);
+    ctx.lineTo(px - 3.5, pz + 3);
+    ctx.lineTo(px + 3.5, pz + 3);
+    ctx.closePath();
+    ctx.fill();
+    ctx.fillStyle = 'rgba(255,255,255,0.8)';
+    ctx.font = '7px sans-serif';
+    ctx.textAlign = 'center';
+    ctx.fillText('You', px, pz - 7);
+  }
+}
+
+// ===================== CONTROLS HUD (H key) =====================
+var _controlsHud = null;
+
+function createControlsHud() {
+  if (_controlsHud) return;
+  _controlsHud = document.createElement('div');
+  _controlsHud.id = 'office-controls-hud';
+  _controlsHud.style.cssText = 'position:fixed;bottom:16px;left:16px;z-index:1001;background:rgba(0,0,0,0.75);color:#c9d1d9;padding:14px 18px;border-radius:10px;font-size:12px;line-height:1.8;pointer-events:none;border:1px solid rgba(48,54,61,0.6);backdrop-filter:blur(4px);display:none;font-family:monospace;';
+  _controlsHud.innerHTML =
+    '<div style="color:#58a6ff;font-weight:600;margin-bottom:4px;font-size:13px">Controls</div>' +
+    '<div><span style="color:#7ee787">W A S D</span> &nbsp; Move</div>' +
+    '<div><span style="color:#7ee787">Space</span> &nbsp;&nbsp;&nbsp; Jump</div>' +
+    '<div><span style="color:#7ee787">Shift</span> &nbsp;&nbsp;&nbsp; Sprint</div>' +
+    '<div><span style="color:#7ee787">E</span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Sit / Stand</div>' +
+    '<div><span style="color:#7ee787">Mouse</span> &nbsp;&nbsp;&nbsp; Look around</div>' +
+    '<div><span style="color:#7ee787">Scroll</span> &nbsp;&nbsp;&nbsp; Zoom in/out</div>' +
+    '<div><span style="color:#7ee787">Click</span> &nbsp;&nbsp;&nbsp;&nbsp; Agent commands</div>' +
+    '<div style="margin-top:6px;border-top:1px solid #30363d;padding-top:6px">' +
+      '<span style="color:#d2a8ff">H</span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Toggle this HUD</div>' +
+    '<div><span style="color:#d2a8ff">End</span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Exit fullscreen</div>';
+  document.body.appendChild(_controlsHud);
+}
+
+function removeControlsHud() {
+  if (_controlsHud && _controlsHud.parentElement) {
+    _controlsHud.remove();
+    _controlsHud = null;
+  }
+}
+
+// Toggle HUD with H key (only when 3D is running and not typing in an input)
+document.addEventListener('keydown', function(e) {
+  if (e.code === 'KeyH' && S.running && !e.target.matches('input,textarea')) {
+    if (_controlsHud) {
+      _controlsHud.style.display = _controlsHud.style.display === 'none' ? 'block' : 'none';
+    }
+  }
+  // World Builder (B key) — lazy-loaded to avoid breaking 3D Hub if builder has issues
+  if (e.code === 'KeyB' && S.running && !e.target.matches('input,textarea') && isPlayerMode() && window._builderModule) {
+    window._builderModule.toggleBuilder();
+  }
+});
+
 // ===================== PUBLIC API =====================
 window.office3dStart = function() {
   if (S.running) return;
@@ -315,6 +690,18 @@ window.office3dStart = function() {
   syncAgents();
   processMessages();
   setupClickHandler();
+  createFullscreenButton();
+  createMinimap();
+  createControlsHud();
+  // Lazy-load World Builder (won't break 3D Hub if builder has issues)
+  setTimeout(function() {
+    import('./builder.js').then(function(mod) {
+      window._builderModule = mod;
+      mod.loadSavedWorld();
+    }).catch(function(e) {
+      console.warn('[builder] Failed to load:', e.message);
+    });
+  }, 1500);
   animate();
 
   if (S.syncInterval) clearInterval(S.syncInterval);
@@ -338,6 +725,26 @@ window.office3dStop = function() {
     S.syncInterval = null;
   }
   dismissCommandMenu();
+  removeFullscreenButton();
+  removeMinimap();
+  removeControlsHud();
+  // Exit builder mode if active
+  if (window._builderModule && window._builderModule.isBuilderActive()) {
+    window._builderModule.exitBuilder();
+  }
+  // Exit fullscreen when leaving 3D Hub
+  if (document.fullscreenElement) document.exitFullscreen();
+  // Hide "Press E to sit" prompt so it doesn't leak to other tabs
+  var sitPrompt = S._player && S._player._sitPrompt;
+  if (sitPrompt) sitPrompt.style.display = 'none';
+  // Hide iframe overlay if player was sitting at a monitor
+  var iframeOverlay = document.getElementById('office-monitor-overlay');
+  if (iframeOverlay) iframeOverlay.style.display = 'none';
+  // Clean up jukebox overlay + prompt
+  dismissJukebox();
+  // Hide "Press E for Jukebox" prompt
+  var jukeboxPrompt = S._player && S._player._jukeboxPrompt;
+  if (jukeboxPrompt) jukeboxPrompt.style.display = 'none';
 };
 
 window.office3dSetEnvironment = function(env) {
@@ -380,6 +787,13 @@ window.office3dSetCamSpeed = function(speed) {
 // Player avatar API
 window.office3dEnterWorld = function() {
   spawnPlayer();
+  // Show controls hint briefly
+  if (_controlsHud) {
+    _controlsHud.style.display = 'block';
+    setTimeout(function() {
+      if (_controlsHud) _controlsHud.style.display = 'none';
+    }, 4000);
+  }
 };
 window.office3dExitWorld = function() {
   despawnPlayer();
@@ -421,3 +835,212 @@ document.addEventListener('visibilitychange', function() {
 if (window.activeView === 'office') {
   window.office3dStart();
 }
+
+// ===================== INTERACTIVE IFRAME MONITOR (Phase 2) =====================
+var activeIframe = null;
+
+window.onPlayerSit = function(deskIdx) {
+  if (activeIframe) return;
+  var container = document.getElementById('office-3d-container') || document.getElementById('office-area');
+  if (!container) return;
+
+  // Create iframe overlay positioned over the 3D canvas
+  var overlay = document.createElement('div');
+  overlay.id = 'office-iframe-overlay';
+  overlay.style.cssText = 'position:absolute;top:5%;left:10%;width:80%;height:85%;z-index:200;background:#000;border-radius:8px;box-shadow:0 0 40px rgba(88,166,255,0.3);overflow:hidden;display:flex;flex-direction:column';
+
+  // Header bar (mimics monitor bezel)
+  var header = document.createElement('div');
+  header.style.cssText = 'background:#1a1f36;padding:6px 12px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0';
+  header.innerHTML = '<div style="display:flex;gap:6px"><span style="width:10px;height:10px;border-radius:50%;background:#ff5f57"></span><span style="width:10px;height:10px;border-radius:50%;background:#ffbd2e"></span><span style="width:10px;height:10px;border-radius:50%;background:#28c840"></span></div><span style="color:#8892b0;font-size:11px;font-family:monospace">Let Them Talk Dashboard</span><button id="office-leave-btn" style="background:#ff5f57;color:#fff;border:none;border-radius:4px;padding:3px 12px;font-size:11px;font-weight:bold;cursor:pointer;font-family:monospace">LEAVE</button>';
+  header.querySelector('#office-leave-btn').addEventListener('click', function() {
+    if (typeof window.onPlayerStand === 'function') window.onPlayerStand();
+    // Also trigger player stand-up in player.js
+    if (typeof window.playerForceStand === 'function') window.playerForceStand();
+  });
+  overlay.appendChild(header);
+
+  // Dashboard iframe
+  var iframe = document.createElement('iframe');
+  iframe.src = window.location.origin || 'http://localhost:3000';
+  iframe.style.cssText = 'flex:1;border:none;width:100%;background:#0d1117';
+  iframe.allow = 'clipboard-read; clipboard-write';
+  overlay.appendChild(iframe);
+
+  container.style.position = 'relative';
+  container.appendChild(overlay);
+  activeIframe = overlay;
+
+  // Focus iframe for keyboard input
+  iframe.addEventListener('load', function() { iframe.focus(); });
+};
+
+window.onPlayerStand = function() {
+  if (activeIframe) {
+    activeIframe.remove();
+    activeIframe = null;
+  }
+};
+
+// ===================== JUKEBOX INTERACTION =====================
+var _jukeboxOverlay = null;
+var _jukeboxPopup = null; // popup player window reference (module-scoped to survive jukebox UI reopen)
+
+window.onJukeboxInteract = function() {
+  if (_jukeboxOverlay) return; // already open
+  var container = document.getElementById('office-3d-container') || document.body;
+
+  var overlay = document.createElement('div');
+  overlay.id = 'jukebox-overlay';
+  overlay.style.cssText = 'position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.7);z-index:10000;display:flex;align-items:center;justify-content:center;';
+
+  var panel = document.createElement('div');
+  panel.style.cssText = 'background:#1a1a2e;border:2px solid #ff4488;border-radius:16px;padding:20px;width:500px;max-width:90vw;max-height:80vh;display:flex;flex-direction:column;box-shadow:0 0 30px rgba(255,68,136,0.3);';
+
+  // Header
+  var header = document.createElement('div');
+  header.style.cssText = 'display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;';
+  header.innerHTML = '<div style="color:#ff4488;font-size:16px;font-weight:bold;text-shadow:0 0 8px #ff4488">JUKEBOX</div>';
+  var closeBtn = document.createElement('button');
+  closeBtn.textContent = 'Close (Esc)';
+  closeBtn.style.cssText = 'background:#333;color:#fff;border:1px solid #555;border-radius:6px;padding:4px 12px;cursor:pointer;font-size:11px;';
+  closeBtn.onclick = dismissJukebox;
+  header.appendChild(closeBtn);
+  panel.appendChild(header);
+
+  // Jukebox playlists — @AtmosphereBeatMusic (channel ID: UC72yf4UQp6w3ix5CjASZbUQ)
+  var JUKEBOX_PLAYLISTS = [
+    { id: 'PLbUEFO6dm3dYsGrZQNU_W-VY-usRTfhU8', name: 'Atmosphere Beat' },
+    { id: 'PLbUEFO6dm3dZvQ_8ma_9YfuOWdxO4G_Rn', name: 'Chill Vibes' },
+    { id: 'PLbUEFO6dm3dZs8sKlvztA2eec_C4gHbUm', name: 'Deep Focus' },
+    { id: 'PLbUEFO6dm3dYmU1PvubrMXRi4mYsi29Uj', name: 'Night Mode' },
+  ];
+  // Playlist selector buttons
+  var selectorDiv = document.createElement('div');
+  selectorDiv.style.cssText = 'display:flex;gap:6px;margin-bottom:10px;flex-wrap:wrap;';
+
+  // Now-playing display area
+  var playerArea = document.createElement('div');
+  playerArea.style.cssText = 'flex:1;border-radius:8px;overflow:hidden;background:#111;min-height:200px;display:flex;align-items:center;justify-content:center;';
+  playerArea.innerHTML =
+    '<div style="text-align:center;padding:20px;color:#ccc">' +
+      '<div style="font-size:48px;margin-bottom:8px">\uD83C\uDFB5</div>' +
+      '<div style="font-size:14px;color:#ff4488;font-weight:bold">Select a Playlist</div>' +
+      '<div style="font-size:11px;color:#666;margin-top:4px">Music opens in a mini player window</div>' +
+    '</div>';
+
+  function playPlaylist(plId, plName, btnEl) {
+    // Try embed first — if channel enables embedding, this works seamlessly
+    var embedUrl = 'https://www.youtube-nocookie.com/embed/videoseries?list=' + plId + '&autoplay=1&shuffle=1&loop=1&rel=0';
+
+    // Open popup player window (400x300 — compact music player)
+    var popW = 480, popH = 360;
+    var popX = window.screenX + window.outerWidth - popW - 30;
+    var popY = window.screenY + 80;
+    var features = 'width=' + popW + ',height=' + popH + ',left=' + popX + ',top=' + popY + ',resizable=yes,scrollbars=no,toolbar=no,menubar=no,location=no,status=no';
+
+    // Close previous popup if open
+    if (_jukeboxPopup && !_jukeboxPopup.closed) _jukeboxPopup.close();
+    _jukeboxPopup = window.open(
+      'https://www.youtube.com/playlist?list=' + plId,
+      'jukebox_player',
+      features
+    );
+
+    // Update player area to show now-playing
+    playerArea.innerHTML =
+      '<div style="text-align:center;padding:20px;color:#ccc">' +
+        '<div style="font-size:48px;margin-bottom:8px;animation:pulse 2s ease infinite">\uD83C\uDFB6</div>' +
+        '<div style="font-size:15px;color:#ff4488;font-weight:bold">Now Playing</div>' +
+        '<div style="font-size:13px;color:#e6edf3;margin-top:4px">' + (plName || 'Playlist') + '</div>' +
+        '<div style="font-size:10px;color:#666;margin-top:8px">Playing in mini player window</div>' +
+        '<div style="margin-top:14px;display:flex;gap:8px;justify-content:center">' +
+          '<button id="jb-focus" style="padding:6px 16px;background:#ff4488;color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:11px;font-weight:bold">\u25B6 Show Player</button>' +
+          '<button id="jb-stop" style="padding:6px 16px;background:#333;color:#ff4488;border:1px solid #ff4488;border-radius:6px;cursor:pointer;font-size:11px">\u25A0 Stop</button>' +
+        '</div>' +
+      '</div>';
+
+    // Wire up buttons
+    var focusBtn = playerArea.querySelector('#jb-focus');
+    var stopBtn = playerArea.querySelector('#jb-stop');
+    if (focusBtn) focusBtn.onclick = function() {
+      if (_jukeboxPopup && !_jukeboxPopup.closed) _jukeboxPopup.focus();
+      else playPlaylist(plId, plName, btnEl); // reopen if closed
+    };
+    if (stopBtn) stopBtn.onclick = function() {
+      if (_jukeboxPopup && !_jukeboxPopup.closed) _jukeboxPopup.close();
+      _jukeboxPopup = null;
+      playerArea.innerHTML =
+        '<div style="text-align:center;padding:20px;color:#ccc">' +
+          '<div style="font-size:48px;margin-bottom:8px">\uD83C\uDFB5</div>' +
+          '<div style="font-size:14px;color:#ff4488;font-weight:bold">Music Stopped</div>' +
+          '<div style="font-size:11px;color:#666;margin-top:4px">Select a playlist to play again</div>' +
+        '</div>';
+    };
+
+    // Highlight active playlist button
+    var allBtns = selectorDiv.querySelectorAll('button[data-pl-id]');
+    for (var bi = 0; bi < allBtns.length; bi++) {
+      allBtns[bi].style.background = '#222';
+      allBtns[bi].style.borderColor = '#444';
+    }
+    if (btnEl) { btnEl.style.background = '#ff448833'; btnEl.style.borderColor = '#ff4488'; }
+  }
+
+  for (var pi = 0; pi < JUKEBOX_PLAYLISTS.length; pi++) {
+    var pl = JUKEBOX_PLAYLISTS[pi];
+    var plBtn = document.createElement('button');
+    plBtn.textContent = '\u266B ' + pl.name;
+    plBtn.dataset.plId = pl.id;
+    plBtn.dataset.plName = pl.name;
+    plBtn.style.cssText = 'flex:1;min-width:80px;padding:8px;background:#222;border:1px solid #444;border-radius:8px;color:#e6edf3;font-size:11px;cursor:pointer;font-weight:500;transition:all 0.15s;';
+    plBtn.addEventListener('mouseenter', function() { this.style.background = '#ff448822'; });
+    plBtn.addEventListener('mouseleave', function() {
+      if (this.style.borderColor !== 'rgb(255, 68, 136)') this.style.background = '#222';
+    });
+    plBtn.addEventListener('click', function() { playPlaylist(this.dataset.plId, this.dataset.plName, this); });
+    selectorDiv.appendChild(plBtn);
+  }
+
+  panel.appendChild(selectorDiv);
+  panel.appendChild(playerArea);
+
+  // Add pulse animation for now-playing icon
+  var styleTag = document.createElement('style');
+  styleTag.textContent = '@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}';
+  panel.appendChild(styleTag);
+
+  // Channel link + hint
+  var hint = document.createElement('div');
+  hint.style.cssText = 'color:#888;font-size:10px;text-align:center;margin-top:8px;';
+  hint.innerHTML = 'Music by <a href="https://www.youtube.com/@AtmosphereBeatMusic" target="_blank" style="color:#ff4488;text-decoration:none">@AtmosphereBeatMusic</a> &bull; Escape to close (music keeps playing)';
+  panel.appendChild(hint);
+
+  overlay.appendChild(panel);
+  overlay.addEventListener('click', function(e) { if (e.target === overlay) dismissJukebox(); });
+  document.body.appendChild(overlay);
+  _jukeboxOverlay = overlay;
+
+  // Update jukebox label
+  if (S._jukebox) {
+    S._jukebox.playing = true;
+    S._jukebox.label.innerHTML = '<div style="color:#ffdd44;font-size:10px">NOW PLAYING</div><div style="font-size:7px;color:#ff4488">Walk away to close</div>';
+  }
+
+  // Escape key to close
+  var escHandler = function(e) {
+    if (e.key === 'Escape') { dismissJukebox(); document.removeEventListener('keydown', escHandler); }
+  };
+  document.addEventListener('keydown', escHandler);
+};
+
+function dismissJukebox() {
+  if (_jukeboxOverlay) {
+    _jukeboxOverlay.remove();
+    _jukeboxOverlay = null;
+  }
+  if (S._jukebox) {
+    S._jukebox.playing = false;
+    S._jukebox.label.innerHTML = '<div style="color:#ffdd44;font-size:10px">JUKEBOX</div><div style="font-size:7px;color:#aaa">Press E to play</div>';
+  }
+}