Integrate 3D city into main UI: iframe viewport 7/8 + data panel 1/8 right

- index.html: replace 2D canvas with 3D iframe (7/8 width), keep sidebar
right (1/8) with agents/chat/events tabs
- 3d.html: hide status bar and controls when embedded, postMessage bridge
for agent selection and camera controls
- Auto-detect file:// protocol for local demo mode (no server needed)
- Added collision avoidance, smooth mountains, 75 agents, new buildings

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

web/3d.html

@@ -1934,6 +1934,7 @@ function selectAgent(agentId) {
   const data = simState.agents?.[agentId];
   if (data) updateAgentInfo(agentId, data);
   document.getElementById('info-panel').classList.add('visible');
+  if (window.parent !== window) window.parent.postMessage({ type: 'agent-select', agentId }, '*');
 }
 
 function selectBuilding(buildingId) {
@@ -2288,6 +2289,18 @@ async function pollFallback() {
 // ============================================================
 // BOOT
 // ============================================================
+const isEmbedded = window.parent !== window;
+if (isEmbedded) {
+  document.getElementById('status-bar').style.display = 'none';
+  document.getElementById('controls-bar').style.display = 'none';
+  const hint = document.getElementById('zoom-hint');
+  if (hint) hint.style.display = 'none';
+  window.addEventListener('message', (e) => {
+    if (e.data?.type === 'zoom-in')       zoomIn();
+    if (e.data?.type === 'zoom-out')      zoomOut();
+    if (e.data?.type === 'reset-camera')  resetCamera();
+  });
+}
 connectWebSocket();
 setInterval(pollFallback, 3000);
 animate();

web/index.html

@@ -40,14 +40,16 @@
   }
   .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
   .dot.green { background: #4ecca3; } .dot.yellow { background: #f0c040; } .dot.red { background: #e94560; }
-  #main { display: flex; height: calc(100vh - 50px); }
-  #canvas-container { flex: 1; position: relative; min-width: 0; }
-  #cityCanvas { width: 100%; height: 100%; display: block; }
+  #main { display: flex; flex-direction: row; height: calc(100vh - 50px); }
+  #viewport-3d { flex: 7; position: relative; min-width: 0; }
+  #viewport-3d iframe { width: 100%; height: 100%; border: none; display: block; }
+  #canvas-container { display: none; }
+  #cityCanvas { display: none; }
 
-  /* SIDEBAR */
+  /* RIGHT DATA PANEL (1/8 of screen) */
   #sidebar {
-    width: 260px; background: #16213e; border-left: 2px solid #0f3460;
-    display: flex; flex-direction: column; overflow: hidden;
+    flex: 1; background: #16213e; border-left: 2px solid #0f3460;
+    display: flex; flex-direction: column; overflow: hidden; min-width: 0;
   }
   .sidebar-tabs {
     display: flex; border-bottom: 2px solid #0f3460; flex-shrink: 0;
@@ -85,7 +87,7 @@
   .agent-list-item .agent-name { font-weight: 600; }
   .agent-list-item .agent-action { color: #666; font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 
-  #conversations-panel { padding: 0; flex: 1; overflow-y: auto; }
+  #conversations-panel { padding: 0; flex: 1; overflow-y: auto; min-width: 0; }
   .conv-card {
     margin: 8px; padding: 10px; background: #1a1a2e; border-radius: 6px;
     border: 1px solid #0f3460;
@@ -279,10 +281,9 @@
         oninput="onLlmProbSlider(this.value)" title="LLM usage probability">
       <span id="llm-prob-label" style="font-size:10px;color:#4ecca3;min-width:28px;text-align:right;">10%</span>
       <span style="color:#1a3a6e;margin:0 4px">│</span>
-      <button class="ctrl-btn" id="btn-rect-zoom" onclick="toggleRectZoom()" title="Draw a rectangle to zoom into that area (Shift+drag)">⬚</button>
-      <button class="ctrl-btn" onclick="zoomBy(1.3)" title="Zoom In (scroll up)">＋</button>
-      <button class="ctrl-btn" onclick="zoomBy(1/1.3)" title="Zoom Out (scroll down)">－</button>
-      <button class="ctrl-btn" onclick="zoomFit()" title="Fit entire city on screen">Fit</button>
+      <button class="ctrl-btn" onclick="send3d('zoom-in')" title="Zoom In (scroll in 3D view)">＋</button>
+      <button class="ctrl-btn" onclick="send3d('zoom-out')" title="Zoom Out (scroll in 3D view)">－</button>
+      <button class="ctrl-btn" onclick="send3d('reset-camera')" title="Reset 3D camera">Fit</button>
     </span>
     <span id="api-calls">API: 0</span>
     <span id="cost">$0.00</span>
@@ -290,18 +291,12 @@
   </div>
 </div>
 <div id="main">
-  <div id="canvas-container">
-    <canvas id="cityCanvas"></canvas>
-    <div id="tooltip"></div>
+  <div id="viewport-3d">
+    <iframe id="city3d" allow="autoplay"></iframe>
+    <script>document.getElementById('city3d').src = location.protocol === 'file:' ? '3d.html' : '/3d';</script>
+    <div id="tooltip" style="z-index:200"></div>
     <div id="toast-container"></div>
     <div id="llm-popup"><div class="llm-pop-title">SWITCH LLM</div></div>
-    <input type="range" id="pan-x" min="0" max="100" value="0"
-      style="position:absolute;bottom:4px;left:10px;right:10px;width:calc(100% - 20px);height:14px;opacity:0.5;z-index:50;"
-      oninput="onPanSlider()">
-    <input type="range" id="pan-y" min="0" max="100" value="0"
-      orient="vertical"
-      style="position:absolute;right:4px;top:10px;bottom:24px;width:14px;height:calc(100% - 34px);opacity:0.5;z-index:50;writing-mode:vertical-lr;direction:ltr;-webkit-appearance:slider-vertical;"
-      oninput="onPanSlider()">
   </div>
   <div id="sidebar">
     <div class="sidebar-tabs">
@@ -684,19 +679,7 @@ function switchTab(tab) {
 // CANVAS SETUP
 // ============================================================
 function initCanvas() {
-  canvas = document.getElementById('cityCanvas');
-  ctx = canvas.getContext('2d');
-  resizeCanvas();
-  window.addEventListener('resize', resizeCanvas);
-  canvas.addEventListener('click', onCanvasClick);
-  canvas.addEventListener('mousemove', onCanvasMouseMove);
-  canvas.addEventListener('mousedown', onCanvasDragStart);
-  canvas.addEventListener('mousemove', onCanvasDrag);
-  canvas.addEventListener('mouseup', onCanvasDragEnd);
-  canvas.addEventListener('mouseleave', onCanvasDragEnd);
-  canvas.addEventListener('wheel', onCanvasWheel, {passive: false});
-  initParticles();
-  requestAnimationFrame(animate);
+  // 2D canvas disabled — 3D viewport in iframe handles rendering
 }
 function resizeCanvas() {
   const c = document.getElementById('canvas-container');
@@ -805,7 +788,7 @@ function toggleRectZoom() {
   rectZoomMode = !rectZoomMode;
   const btn = document.getElementById('btn-rect-zoom');
   if (btn) btn.classList.toggle('active', rectZoomMode);
-  canvas.style.cursor = rectZoomMode ? 'crosshair' : 'default';
+  if (canvas) canvas.style.cursor = rectZoomMode ? 'crosshair' : 'default';
 }
 
 function animate() {
@@ -3910,10 +3893,24 @@ document.addEventListener('click', () => {
   }
 });
 
+// ============================================================
+// 3D IFRAME BRIDGE
+// ============================================================
+function send3d(cmd) {
+  const f = document.getElementById('city3d');
+  if (f?.contentWindow) f.contentWindow.postMessage({ type: cmd }, '*');
+}
+window.addEventListener('message', (e) => {
+  if (e.data?.type === 'agent-select' && e.data.agentId) {
+    selectedAgentId = e.data.agentId;
+    switchTab('agents');
+    fetchAgentDetail(e.data.agentId);
+  }
+});
+
 // ============================================================
 // INIT
 // ============================================================
-initCanvas();
 showDefaultDetail();
 fetchState();
 fetchControls();