lens-inspector 0.1.2 → 0.2.0

package/index.html

@@ -5,6 +5,14 @@
 <title>Lens Inspector</title>
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600&display=swap" rel="stylesheet">
+<script type="importmap">
+{
+  "imports": {
+    "three": "https://cdn.jsdelivr.net/npm/three@0.171.0/build/three.module.js",
+    "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.171.0/examples/jsm/"
+  }
+}
+</script>
 <style>
 * { margin: 0; padding: 0; box-sizing: border-box; }
 
@@ -19,27 +27,27 @@
   --text-muted: #70707e;
   --white: #fff;
 
-  /* LS component categories — no green, higher saturation */
-  --c-camera: #d08020;
-  --c-visual: #3088c0;
-  --c-text: #3070d0;
-  --c-script: #5060c0;
-  --c-audio: #1090b0;
-  --c-light: #c09010;
-  --c-physics: #d05030;
-  --c-vfx: #1098c0;
-  --c-interaction: #4060c0;
-  --c-tracking: #1090b0;
-  --c-animation: #c07020;
-  --c-ui: #3878d0;
-  --c-ml: #3070c0;
-  --c-empty: #909098;
-  --c-prefab: #4080d0;
-
-  --c-runtime: #3088c0;
-  --c-selected: #1850d0;
-  --c-enabled: #3088c0;
-  --c-disabled: #d04040;
+  /* BRIGHT, PUNCHY. No purple, green, cyan, or washed-out steel blue. */
+  --c-camera: #ff9500;
+  --c-visual: #0090ff;
+  --c-text: #0080ff;
+  --c-script: #ff2d20;
+  --c-audio: #ff6b00;
+  --c-light: #ffc800;
+  --c-physics: #ff1a1a;
+  --c-vfx: #00a0ff;
+  --c-interaction: #ff5500;
+  --c-tracking: #99a;
+  --c-animation: #ff8800;
+  --c-ui: #0070ff;
+  --c-ml: #5060ff;
+  --c-empty: #99a;
+  --c-prefab: #00aaff;
+
+  --c-runtime: #0090ff;
+  --c-selected: #0070ff;
+  --c-enabled: #0090ff;
+  --c-disabled: #ff2d20;
 
   --font: 'IBM Plex Sans', -apple-system, system-ui, sans-serif;
   --mono: 'IBM Plex Mono', 'JetBrains Mono', monospace;
@@ -67,19 +75,45 @@ body { background: var(--bg); color: var(--text); font-family: var(--font); heig
   font-family: var(--font); font-size: 10px; font-weight: 500; border-radius: 3px; cursor: pointer; transition: all var(--transition);
 }
 #toolbar button:hover { border-color: var(--border-bright); color: var(--text); background: var(--border); }
-.status-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; transition: all 0.3s ease; }
-.dot-off { background: #bbb; }
-.dot-live { background: var(--c-selected); box-shadow: 0 0 6px rgba(24,80,208,0.5); }
-.dot-mcp { background: var(--c-text); box-shadow: 0 0 6px rgba(48,112,208,0.5); }
+.status-dot { width: 7px; height: 7px; border-radius: 2px; flex-shrink: 0; transition: background 0.2s ease; }
+.dot-off { background: #101018; }
+.dot-live { background: var(--c-selected); }
+.dot-example { background: var(--c-camera); }
 #status-text { font-family: var(--mono); font-size: 10px; color: var(--text-dim); }
+#source-badge {
+  font-family: var(--mono); font-size: 9px; font-weight: 600; padding: 1px 7px;
+  border-radius: 3px; text-transform: uppercase; letter-spacing: 0.5px;
+}
+.badge-example { background: #fff3e0; color: #c06000; border: 1px solid #f0c880; }
+.badge-live { background: #e0f0ff; color: #0060c0; border: 1px solid #80c0f0; }
+.badge-off { display: none; }
+#project-name { font-family: var(--mono); font-size: 10px; color: var(--text); font-weight: 500; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.toolbar-spacer { flex: 1; }
+#setup-btn { font-size: 9px; }
 
 /* --- Main layout --- */
 #main { flex: 1; display: flex; min-height: 0; }
 
+/* --- Resize handles --- */
+.resize-handle {
+  width: 5px; flex-shrink: 0; cursor: col-resize; background: transparent;
+  position: relative; z-index: 5; margin: 0 -2px;
+  transition: background 0.15s;
+}
+.resize-handle:hover, .resize-handle.active { background: var(--c-selected); }
+.resize-handle::after {
+  content: ''; position: absolute; inset: 0; width: 1px; margin: auto;
+  background: var(--border);
+}
+.resize-handle:hover::after, .resize-handle.active::after { background: transparent; }
+body.resizing { cursor: col-resize !important; user-select: none !important; }
+body.resizing * { cursor: col-resize !important; user-select: none !important; pointer-events: none !important; }
+body.resizing .resize-handle { pointer-events: auto !important; }
+
 /* --- Tree panel (left) --- */
 #tree-panel {
-  width: 300px; background: var(--panel); border-right: 2px solid var(--border);
-  display: flex; flex-direction: column; flex-shrink: 0;
+  width: 300px; background: var(--panel);
+  display: flex; flex-direction: column; flex-shrink: 0; min-width: 150px;
 }
 #tree-header {
   padding: 4px 10px; border-bottom: 1px solid var(--border);
@@ -93,6 +127,17 @@ body { background: var(--bg); color: var(--text); font-family: var(--font); heig
 }
 #tree-search:focus { border-color: var(--c-selected); }
 #tree-search::placeholder { color: var(--border-bright); }
+
+/* --- Category filter chips --- */
+#tree-filters { display: flex; flex-wrap: wrap; gap: 2px; padding: 2px 6px 3px; }
+.filter-chip {
+  font-family: var(--mono); font-size: 8px; padding: 1px 5px; border-radius: 3px;
+  border: 1px solid var(--border); background: transparent; color: var(--text-dim);
+  cursor: pointer; transition: all var(--transition); line-height: 1.4;
+}
+.filter-chip:hover { border-color: var(--border-bright); color: var(--text); }
+.filter-chip.active { background: var(--text); color: var(--panel); border-color: var(--text); }
+
 #tree-list { flex: 1; overflow-y: auto; padding: 1px 0; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
 #tree-list::-webkit-scrollbar { width: 5px; }
 #tree-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
@@ -106,6 +151,8 @@ body { background: var(--bg); color: var(--text); font-family: var(--font); heig
 .tree-node:hover { background: var(--surface); }
 .tree-node.selected { background: #dde4f4; border-left-color: var(--c-selected); }
 .tree-node.disabled { opacity: 0.3; }
+.tree-node.hidden-vis { opacity: 0.35; }
+.tree-node.hidden-vis .tree-name { text-decoration: line-through; }
 .tree-arrow { width: 12px; font-size: 7px; color: var(--border-bright); text-align: center; flex-shrink: 0; cursor: pointer; user-select: none; transition: color var(--transition); }
 .tree-arrow:hover { color: var(--text); }
 .tree-icon { width: 13px; height: 13px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
@@ -117,29 +164,60 @@ body { background: var(--bg); color: var(--text); font-family: var(--font); heig
 .tree-badge { font-family: var(--mono); font-size: 7px; padding: 0 4px; border-radius: 2px; flex-shrink: 0; font-weight: 500; }
 .badge-prefab { background: #d8e4f4; color: var(--c-prefab); }
 
-/* --- Viewport (center, single view) --- */
-#viewport { flex: 1; position: relative; background: var(--panel); overflow: hidden; min-width: 0; }
-#viewport canvas { width: 100%; height: 100%; cursor: grab; }
-#viewport canvas:active { cursor: grabbing; }
-#view-bar {
-  position: absolute; top: 6px; left: 8px; display: flex; align-items: center; gap: 0; z-index: 2;
-  background: rgba(255,255,255,0.92); border: 2px solid var(--border); border-radius: 4px; overflow: hidden;
-}
-.view-btn {
-  font-family: var(--mono); font-size: 10px; font-weight: 600; padding: 3px 10px;
-  border: none; background: none; color: var(--text-dim); cursor: pointer; transition: all var(--transition);
-  letter-spacing: 0.3px;
-}
-.view-btn:hover { color: var(--text); background: var(--surface); }
-.view-btn.active { color: var(--c-selected); background: #dde4f4; }
-.view-btn + .view-btn { border-left: 1px solid var(--border); }
-#view-info {
-  position: absolute; bottom: 6px; right: 8px; font-family: var(--mono); font-size: 9px;
-  color: var(--text-dim); pointer-events: none; background: rgba(255,255,255,0.85); padding: 1px 6px; border-radius: 3px;
+/* Eye (visibility) toggle */
+.tree-vis {
+  width: 14px; height: 14px; flex-shrink: 0; display: flex; align-items: center;
+  justify-content: center; cursor: pointer; color: var(--border-bright);
+  opacity: 0; transition: opacity var(--transition), color var(--transition);
+}
+.tree-vis svg { width: 11px; height: 11px; }
+.tree-node:hover .tree-vis { opacity: 0.6; }
+.tree-vis:hover { color: var(--text); opacity: 1 !important; }
+.tree-vis.vis-off { opacity: 0.7; color: var(--c-disabled); }
+.tree-node:hover .tree-vis.vis-off { opacity: 1; }
+
+/* --- 3D Viewport (center) --- */
+#viewport { flex: 1; position: relative; background: #f0f0f4; overflow: hidden; min-width: 0; user-select: none; -webkit-user-select: none; }
+#viewport canvas { width: 100%; height: 100%; display: block; -webkit-user-drag: none; user-select: none; -webkit-user-select: none; touch-action: none; }
+#scene-labels {
+  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
+}
+.scene-label {
+  position: absolute; font-family: var(--mono); font-size: 9px; font-weight: 500;
+  white-space: nowrap; pointer-events: auto; cursor: pointer;
+  transform: translate(-50%, -100%) translateY(-8px);
+  text-shadow: 0 0 3px rgba(255,255,255,0.9), 0 0 6px rgba(255,255,255,0.5);
+  opacity: 0.7; transition: opacity 0.15s;
+}
+.scene-label:hover { opacity: 1; }
+.scene-label.selected { opacity: 1; font-weight: 600; font-size: 10px; }
+.grad-label {
+  position: absolute; font-family: var(--mono); font-size: 9px; font-weight: 500;
+  white-space: nowrap; pointer-events: none;
+  transform: translate(-50%, -50%);
+  opacity: 0.6;
+}
+.grad-label-unit { font-weight: 600; font-size: 10px; opacity: 0.7; }
+
+/* --- Gizmo --- */
+#gizmo {
+  position: absolute; top: 8px; right: 8px; width: 90px; height: 90px; z-index: 3;
+}
+#gizmo canvas { width: 100%; height: 100%; }
+.gizmo-label {
+  position: absolute; font-family: var(--mono); font-size: 11px; font-weight: 700;
+  pointer-events: auto; cursor: pointer; user-select: none;
+  transform: translate(-50%, -50%);
+  width: 18px; height: 18px; line-height: 18px; text-align: center;
+  border-radius: 50%;
+}
+.gizmo-label:hover { text-decoration: underline; }
+.gizmo-back {
+  font-size: 8px; font-weight: 500; opacity: 0.3;
 }
 #view-stats {
-  position: absolute; bottom: 6px; left: 8px; display: flex; gap: 12px; z-index: 2;
-  font-family: var(--mono); font-size: 10px; background: rgba(255,255,255,0.92); padding: 3px 10px; border-radius: 3px; border: 1px solid var(--border);
+  position: absolute; bottom: 8px; left: 10px; display: flex; gap: 12px; z-index: 2;
+  font-family: var(--mono); font-size: 10px; background: rgba(255,255,255,0.85); padding: 3px 10px; border-radius: 3px; border: 1px solid var(--border);
 }
 .stat-item { display: flex; align-items: baseline; gap: 4px; }
 .stat-num { font-size: 13px; font-weight: 700; color: var(--text); }
@@ -147,8 +225,8 @@ body { background: var(--bg); color: var(--text); font-family: var(--font); heig
 
 /* --- Properties panel (right) --- */
 #props-panel {
-  width: 240px; background: var(--panel); border-left: 2px solid var(--border);
-  display: flex; flex-direction: column; flex-shrink: 0; overflow-y: auto;
+  width: 320px; background: var(--panel);
+  display: flex; flex-direction: column; flex-shrink: 0; overflow-y: auto; min-width: 180px;
   scrollbar-width: thin; scrollbar-color: var(--border) transparent;
 }
 #props-panel::-webkit-scrollbar { width: 5px; }
@@ -156,12 +234,12 @@ body { background: var(--bg); color: var(--text); font-family: var(--font); heig
 #props-header { padding: 4px 10px; border-bottom: 1px solid var(--border); }
 #props-header h2 { font-family: var(--mono); font-size: 9px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: 1px; }
 #props-content { padding: 6px 10px; }
-.prop-section { margin-bottom: 8px; animation: fadeIn 0.2s ease; }
+.prop-section { margin-bottom: 8px; }
 @keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
 .prop-section-title { font-family: var(--mono); font-size: 8px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 3px; }
 .prop-row { display: flex; justify-content: space-between; align-items: center; padding: 1px 0; border-bottom: 1px solid var(--surface); }
 .prop-key { font-family: var(--mono); font-size: 10px; color: var(--text-dim); }
-.prop-val { font-family: var(--mono); font-size: 10px; color: var(--text); text-align: right; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.prop-val { font-family: var(--mono); font-size: 10px; color: var(--text); text-align: right; word-break: break-all; }
 .prop-val-color { display: inline-block; width: 10px; height: 10px; border-radius: 2px; border: 1px solid var(--border); vertical-align: middle; margin-right: 4px; }
 .prop-hint { font-size: 11px; color: var(--text-dim); padding: 16px 0; text-align: center; }
 
@@ -176,6 +254,7 @@ body { background: var(--bg); color: var(--text); font-family: var(--font); heig
 #welcome {
   position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
   z-index: 10; background: var(--bg); animation: fadeIn 0.3s ease;
+  overflow-y: auto; padding: 24px 0;
 }
 #welcome.hidden { display: none; }
 .welcome-box {
@@ -211,25 +290,50 @@ body { background: var(--bg); color: var(--text); font-family: var(--font); heig
 
 <div id="welcome">
   <div class="welcome-box">
-    <h1>Lens Inspector</h1>
+    <h1>Connect to Lens Studio</h1>
     <div class="step">
       <span class="step-check">&#10003;</span>
-      <span class="step-text">Server running</span>
+      <span class="step-text">Start the inspector: <code>npx lens-inspector</code></span>
     </div>
     <div class="step">
       <span class="step-num">2</span>
       <span class="step-text">
-        Download <a href="/SceneInspector.ts" style="color: var(--accent);">SceneInspector.ts</a>, add it to your Lens Studio project's Assets, and attach it to any object.
-        Then go to <strong>Project Settings &gt; General</strong> and enable <strong>Experimental APIs</strong>.
+        Download <a href="/SceneInspector.ts" style="color: var(--c-selected);">SceneInspector.ts</a> and drag it into your Lens Studio project's <strong>Assets</strong> panel.
+        Attach it to any SceneObject (e.g. Camera).
       </span>
     </div>
     <div class="step">
       <span class="step-num">3</span>
-      <span class="step-text">Hit <strong>Play</strong> in Lens Studio.</span>
+      <span class="step-text">
+        In Lens Studio: <strong>Project Settings &gt; General &gt; Experimental APIs</strong> &rarr; enable.
+      </span>
+    </div>
+    <div class="step">
+      <span class="step-num">4</span>
+      <span class="step-text">Hit <strong>Play</strong> in Lens Studio. The scene appears here automatically. Component details require LS MCP (AI Assistant &gt; MCP, port 8733).</span>
+    </div>
+    <div style="margin-top:14px;padding-top:12px;border-top:1px solid var(--border);">
+      <div style="font-family:var(--mono);font-size:9px;font-weight:600;color:var(--text-dim);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:4px;">Server</div>
+      <div style="display:flex;gap:6px;align-items:center;">
+        <input type="text" id="welcome-url" value="localhost:8200"
+          style="flex:1;padding:4px 8px;background:var(--surface);border:1px solid var(--border);border-radius:3px;font-family:var(--mono);font-size:11px;color:var(--text);outline:none;">
+      </div>
+      <div style="font-size:9px;color:var(--text-muted);margin-top:4px;">Change this if your inspector runs on a different port or machine.</div>
+      <div style="margin-top:8px;">
+        <div style="font-family:var(--mono);font-size:9px;font-weight:600;color:var(--text-dim);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:4px;">MCP Config <span style="font-weight:400;text-transform:none;letter-spacing:0;color:var(--text-muted)">(optional, for component details)</span></div>
+        <textarea id="mcp-config" rows="3" placeholder='Paste MCP config JSON from Lens Studio (AI Assistant > MCP)'
+          style="width:100%;padding:4px 8px;background:var(--surface);border:1px solid var(--border);border-radius:3px;font-family:var(--mono);font-size:10px;color:var(--text);outline:none;resize:vertical;line-height:1.4;"></textarea>
+        <div id="mcp-config-status" style="font-size:9px;color:var(--text-muted);margin-top:3px;">Copy from Lens Studio: AI Assistant > MCP config.</div>
+      </div>
+      <button id="server-connect-btn" style="margin-top:14px;width:100%;padding:8px 0;background:var(--c-selected);border:none;border-radius:4px;font-family:var(--font);font-size:12px;font-weight:600;cursor:pointer;color:#fff;">Connect</button>
     </div>
-    <div class="welcome-status">
+    <div class="welcome-status" id="welcome-status">
       <div class="welcome-spinner"></div>
-      <span>Waiting for Lens Studio to connect...</span>
+      <span>Waiting for Lens Studio...</span>
+    </div>
+    <div class="welcome-status" id="welcome-example" style="display:none">
+      <span style="color:var(--c-camera);font-weight:500">Viewing example scene.</span>
+      <span>Connect Lens Studio to see your real project.</span>
     </div>
   </div>
 </div>
@@ -238,17 +342,14 @@ body { background: var(--bg); color: var(--text); font-family: var(--font); heig
   <span class="toolbar-brand"><b>lens</b>-inspector</span>
   <div class="sep"></div>
   <span class="status-dot dot-off" id="ws-dot"></span>
-  <span id="status-text">disconnected</span>
-  <div class="sep"></div>
-  <label style="font-size:10px;color:var(--text-muted)">Server:</label>
-  <input id="ws-url" value="ws://localhost:8200" style="width:140px">
-  <button id="ws-btn">Connect</button>
-  <div class="sep"></div>
-  <label style="font-size:10px;color:var(--text-muted)">MCP:</label>
-  <input id="mcp-token" value="" placeholder="token" style="width:90px">
-  <button id="mcp-btn">Design-Time</button>
-  <span class="status-dot dot-off" id="mcp-dot"></span>
+  <span id="status-text">connecting...</span>
+  <span id="source-badge" class="badge-off"></span>
+  <span id="project-name"></span>
+  <div class="toolbar-spacer"></div>
+  <button id="setup-btn">How to connect</button>
 </div>
+<input type="hidden" id="ws-url" value="ws://localhost:8200">
+<input type="hidden" id="mcp-base" value="http://localhost:8200">
 
 <div id="main">
   <div id="tree-panel">
@@ -257,22 +358,33 @@ body { background: var(--bg); color: var(--text); font-family: var(--font); heig
       <span id="tree-count"></span>
     </div>
     <input type="text" id="tree-search" placeholder="Filter...">
+    <div id="tree-filters">
+      <button class="filter-chip active" data-cat="all">All</button>
+      <button class="filter-chip" data-cat="camera">Camera</button>
+      <button class="filter-chip" data-cat="visual">Visual</button>
+      <button class="filter-chip" data-cat="script">Script</button>
+      <button class="filter-chip" data-cat="light">Light</button>
+      <button class="filter-chip" data-cat="physics">Physics</button>
+      <button class="filter-chip" data-cat="audio">Audio</button>
+      <button class="filter-chip" data-cat="animation">Anim</button>
+      <button class="filter-chip" data-cat="ui">UI</button>
+      <button class="filter-chip" data-cat="tracking">Track</button>
+      <button class="filter-chip" data-cat="empty">Empty</button>
+    </div>
     <div id="tree-list"></div>
   </div>
+  <div class="resize-handle" id="resize-left"></div>
 
   <div id="viewport">
     <canvas id="scene-canvas"></canvas>
-    <div id="view-bar">
-      <button class="view-btn active" data-view="xz">TOP</button>
-      <button class="view-btn" data-view="xy">FRONT</button>
-      <button class="view-btn" data-view="yz">SIDE</button>
-    </div>
-    <span id="view-info"></span>
+    <div id="scene-labels"></div>
+    <div id="gizmo"><canvas width="180" height="180"></canvas></div>
     <div id="view-stats">
       <div class="stat-item"><span class="stat-num" id="stat-objects">0</span><span class="stat-label">objects</span></div>
       <div class="stat-item"><span class="stat-num" id="stat-components">0</span><span class="stat-label">components</span></div>
     </div>
   </div>
+  <div class="resize-handle" id="resize-right"></div>
 
   <div id="props-panel">
     <div id="props-header"><h2>Inspector</h2></div>
@@ -280,8 +392,11 @@ body { background: var(--bg); color: var(--text); font-family: var(--font); heig
   </div>
 </div>
 
-<script>
-// --- Icons (no green) ---
+<script type="module">
+import * as THREE from 'three';
+import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+
+// --- Icons ---
 const ICONS = {
   camera: `<svg viewBox="0 0 12 12" fill="none"><rect x="1" y="3" width="7" height="6" rx="1" stroke="currentColor" stroke-width="1.2"/><path d="M8 5l3-1.5v5L8 7" stroke="currentColor" stroke-width="1.2"/></svg>`,
   visual: `<svg viewBox="0 0 12 12" fill="none"><rect x="2" y="2" width="8" height="8" rx="1" fill="currentColor" opacity="0.6"/></svg>`,
@@ -302,61 +417,630 @@ const ICONS = {
   unknown: `<svg viewBox="0 0 12 12" fill="none"><circle cx="6" cy="6" r="4" stroke="currentColor" stroke-width="1"/></svg>`,
 };
 
+const ICON_EYE = `<svg viewBox="0 0 12 12" fill="none"><path d="M1 6s2-3.5 5-3.5S11 6 11 6s-2 3.5-5 3.5S1 6 1 6z" stroke="currentColor" stroke-width="1" fill="none"/><circle cx="6" cy="6" r="1.5" fill="currentColor"/></svg>`;
+const ICON_EYE_OFF = `<svg viewBox="0 0 12 12" fill="none"><path d="M1 6s2-3.5 5-3.5S11 6 11 6s-2 3.5-5 3.5S1 6 1 6z" stroke="currentColor" stroke-width="1" fill="none"/><line x1="2" y1="10" x2="10" y2="2" stroke="currentColor" stroke-width="1.2"/></svg>`;
+
 const CAT_COLORS = {
-  camera: '#d08020', visual: '#3088c0', text: '#3070d0', script: '#5060c0',
-  audio: '#1090b0', light: '#c09010', physics: '#d05030', vfx: '#1098c0',
-  interaction: '#4060c0', tracking: '#1090b0', animation: '#c07020', ui: '#3878d0',
-  ml: '#3070c0', utility: '#70707e', empty: '#909098', prefab: '#4080d0', unknown: '#909098',
+  camera: '#ff9500', visual: '#0090ff', text: '#0080ff', script: '#ff2d20',
+  audio: '#ff6b00', light: '#ffc800', physics: '#ff1a1a', vfx: '#00a0ff',
+  interaction: '#ff5500', tracking: '#99a', animation: '#ff8800', ui: '#0070ff',
+  ml: '#5060ff', utility: '#88889a', empty: '#99a', prefab: '#00aaff', unknown: '#99a',
 };
 
 // --- State ---
-let liveTree = null, mcpTree = null, flatNodes = [], selectedId = null;
-let collapsedPaths = new Set(), searchFilter = '', ws = null;
-
-// Single view with switchable plane
-let activeView = 'xz';
-const viewDefs = {
-  xz: { offset: {x:0,y:0}, scale: 14, axes: [0,2], label: ['X','Z'] },
-  xy: { offset: {x:0,y:0}, scale: 14, axes: [0,1], label: ['X','Y'] },
-  yz: { offset: {x:0,y:0}, scale: 14, axes: [2,1], label: ['Z','Y'] },
-};
-let canvas = null, ctx = null, dragging = false;
+let liveTree = null, mcpTree = null, flatNodes = [], sceneNodes = [], selectedId = null;
+let collapsedPaths = new Set(), hiddenPaths = new Set(), searchFilter = '', activeCategoryFilter = 'all', ws = null;
+let dataSource = null; // 'example' | 'live' | null
+
+// --- Three.js ---
+let scene3d, camera3d, renderer3d, controls3d, raycaster, pointer, gridMat;
+let sceneMeshes = []; // { group, boxMesh, node }
+let labelEls = []; // { el, node }
+const labelContainer = document.getElementById('scene-labels');
+const tmpVec = new THREE.Vector3();
+
+function initScene3D() {
+  const container = document.getElementById('viewport');
+  const canvas = document.getElementById('scene-canvas');
+
+  scene3d = new THREE.Scene();
+
+  // Gradient background (top: white, bottom: soft blue-gray)
+  const bgCanvas = document.createElement('canvas');
+  bgCanvas.width = 2; bgCanvas.height = 512;
+  const bgCtx = bgCanvas.getContext('2d');
+  const grad = bgCtx.createLinearGradient(0, 0, 0, 512);
+  grad.addColorStop(0, '#ffffff');
+  grad.addColorStop(0.5, '#f0f2f8');
+  grad.addColorStop(1, '#d8dce8');
+  bgCtx.fillStyle = grad;
+  bgCtx.fillRect(0, 0, 2, 512);
+  const bgTex = new THREE.CanvasTexture(bgCanvas);
+  bgTex.mapping = THREE.EquirectangularReflectionMapping;
+  scene3d.background = bgTex;
+
+  camera3d = new THREE.PerspectiveCamera(50, container.clientWidth / container.clientHeight, 0.1, 2000);
+  camera3d.position.set(30, 25, 10);
+
+  renderer3d = new THREE.WebGLRenderer({ canvas, antialias: true });
+  renderer3d.setSize(container.clientWidth, container.clientHeight);
+  renderer3d.setPixelRatio(window.devicePixelRatio);
+
+  controls3d = new OrbitControls(camera3d, canvas);
+  controls3d.enableDamping = true;
+  controls3d.dampingFactor = 0.08;
+  controls3d.enablePan = true;
+  controls3d.mouseButtons = { LEFT: THREE.MOUSE.ROTATE, MIDDLE: THREE.MOUSE.PAN, RIGHT: THREE.MOUSE.PAN };
+  controls3d.target.set(0, 0, 40);
+
+  // Infinite grid (multi-level shader, smooth transitions)
+  gridMat = new THREE.ShaderMaterial({
+    transparent: true, depthWrite: false, side: THREE.DoubleSide,
+    uniforms: { uCamDist: { value: 50.0 } },
+    vertexShader: `
+      varying vec3 vWorld;
+      void main() {
+        vWorld = (modelMatrix * vec4(position, 1.0)).xyz;
+        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+      }
+    `,
+    fragmentShader: `
+      varying vec3 vWorld;
+      uniform float uCamDist;
+      float gridLine(vec2 pos, float spacing) {
+        vec2 coord = pos / spacing;
+        vec2 g = abs(fract(coord - 0.5) - 0.5);
+        vec2 line = g / fwidth(coord);
+        return 1.0 - min(min(line.x, line.y), 1.0);
+      }
+      void main() {
+        float dist = length(vWorld.xz);
+        float fadeR = uCamDist * 3.0;
+        float fade = 1.0 - smoothstep(fadeR * 0.5, fadeR, dist);
+        if (fade < 0.01) discard;
+
+        float logD = log(uCamDist) / log(10.0);
+        float level = floor(logD);
+        float frac = logD - level;
+
+        float s0 = pow(10.0, level - 1.0);
+        float s1 = pow(10.0, level);
+        float s2 = pow(10.0, level + 1.0);
+
+        float g0 = gridLine(vWorld.xz, s0);
+        float g1 = gridLine(vWorld.xz, s1);
+        float g2 = gridLine(vWorld.xz, s2);
+
+        float a0 = g0 * 0.06 * (1.0 - frac);
+        float a1 = g1 * 0.18;
+        float a2 = g2 * (0.28 + 0.1 * frac);
+
+        float a = max(max(a0, a1), a2) * fade;
+        if (a < 0.01) discard;
+        gl_FragColor = vec4(0.55, 0.57, 0.63, a);
+      }
+    `,
+  });
+  const gridPlane = new THREE.Mesh(new THREE.PlaneGeometry(20000, 20000), gridMat);
+  gridPlane.rotation.x = -Math.PI / 2;
+  scene3d.add(gridPlane);
+
+  // Subtle axes at origin
+  const axLen = 8;
+  const axMat = (c) => new THREE.LineBasicMaterial({ color: c, transparent: true, opacity: 0.8 });
+  const mkAx = (dir, color) => {
+    const g = new THREE.BufferGeometry().setFromPoints([new THREE.Vector3(), dir.clone().multiplyScalar(axLen)]);
+    return new THREE.Line(g, axMat(color));
+  };
+  scene3d.add(mkAx(new THREE.Vector3(1,0,0), 0xe03020));
+  scene3d.add(mkAx(new THREE.Vector3(0,1,0), 0xe0b010));
+  scene3d.add(mkAx(new THREE.Vector3(0,0,1), 0x1878e0));
+
+  raycaster = new THREE.Raycaster();
+  pointer = new THREE.Vector2();
+
+  // Click to select
+  canvas.addEventListener('pointerdown', onPointerDown);
+  canvas.addEventListener('pointermove', (e) => {
+    const rect = canvas.getBoundingClientRect();
+    pointer.x = ((e.clientX - rect.left) / rect.width) * 2 - 1;
+    pointer.y = -((e.clientY - rect.top) / rect.height) * 2 + 1;
+  });
+
+  window.addEventListener('resize', onResize);
+  onResize();
+
+  animate();
+}
+
+let pointerDownPos = { x: 0, y: 0 };
+function onPointerDown(e) {
+  pointerDownPos = { x: e.clientX, y: e.clientY };
+  const canvas = renderer3d.domElement;
+  canvas.addEventListener('pointerup', onPointerUp, { once: true });
+}
+
+function onPointerUp(e) {
+  const dx = e.clientX - pointerDownPos.x, dy = e.clientY - pointerDownPos.y;
+  if (dx * dx + dy * dy > 25) return;
+
+  const rect = renderer3d.domElement.getBoundingClientRect();
+  pointer.x = ((e.clientX - rect.left) / rect.width) * 2 - 1;
+  pointer.y = -((e.clientY - rect.top) / rect.height) * 2 + 1;
+
+  raycaster.setFromCamera(pointer, camera3d);
+  const meshes = sceneMeshes.map(m => m.boxMesh);
+  const hits = raycaster.intersectObjects(meshes);
+  if (hits.length > 0) {
+    const hit = sceneMeshes.find(m => m.boxMesh === hits[0].object);
+    if (hit) {
+      selectedId = hit.node.id;
+      updateMeshStyles();
+      renderTree();
+      renderProps();
+    }
+  }
+}
+
+function onResize() {
+  const container = document.getElementById('viewport');
+  const w = container.clientWidth, h = container.clientHeight;
+  if (w <= 0 || h <= 0) return;
+  camera3d.aspect = w / h;
+  camera3d.updateProjectionMatrix();
+  renderer3d.setSize(w, h);
+}
+
+// --- Gizmo (navigation gnomon) ---
+const gizmoEl = document.getElementById('gizmo');
+const gizmoCanvas = gizmoEl.querySelector('canvas');
+const gizmoCtx = gizmoCanvas.getContext('2d');
+const gizmoDirs = [
+  { label: 'X', dir: new THREE.Vector3(1,0,0), color: '#e03020' },
+  { label: 'Y', dir: new THREE.Vector3(0,1,0), color: '#e0b010' },
+  { label: 'Z', dir: new THREE.Vector3(0,0,1), color: '#1878e0' },
+];
+const gizmoLabels = [];
+
+for (const d of gizmoDirs) {
+  const pos = document.createElement('div');
+  pos.className = 'gizmo-label';
+  pos.style.color = d.color;
+  pos.textContent = d.label;
+  pos.addEventListener('click', () => snapToView(d.dir.clone()));
+  gizmoEl.appendChild(pos);
+  gizmoLabels.push({ el: pos, dir: d.dir, color: d.color, back: false });
+
+  const neg = document.createElement('div');
+  neg.className = 'gizmo-label gizmo-back';
+  neg.style.color = d.color;
+  neg.textContent = '-' + d.label;
+  neg.addEventListener('click', () => snapToView(d.dir.clone().negate()));
+  gizmoEl.appendChild(neg);
+  gizmoLabels.push({ el: neg, dir: d.dir.clone().negate(), color: d.color, back: true });
+}
+
+let snapAnimId = null;
+function snapToView(dir) {
+  const dist = camera3d.position.distanceTo(controls3d.target);
+  const target = controls3d.target.clone();
+  const endPos = target.clone().add(dir.clone().multiplyScalar(dist));
+  const startPos = camera3d.position.clone();
+  const up = Math.abs(dir.y) > 0.9 ? new THREE.Vector3(0, 0, dir.y > 0 ? -1 : 1) : new THREE.Vector3(0, 1, 0);
+  const startTime = performance.now();
+  if (snapAnimId) cancelAnimationFrame(snapAnimId);
+  function step() {
+    const t = Math.min((performance.now() - startTime) / 350, 1);
+    const ease = t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2;
+    camera3d.position.lerpVectors(startPos, endPos, ease);
+    camera3d.up.lerp(up, ease * 0.5 + 0.5);
+    camera3d.lookAt(target);
+    controls3d.update();
+    if (t < 1) snapAnimId = requestAnimationFrame(step);
+    else snapAnimId = null;
+  }
+  step();
+}
+
+function updateGizmo() {
+  const cx = 90, cy = 90, r = 32;
+  gizmoCtx.clearRect(0, 0, 180, 180);
+  const quat = camera3d.quaternion.clone().invert();
+
+  for (const d of gizmoDirs) {
+    const p = d.dir.clone().applyQuaternion(quat);
+    const n = d.dir.clone().negate().applyQuaternion(quat);
+    gizmoCtx.beginPath();
+    gizmoCtx.moveTo(cx + n.x * r, cy - n.y * r);
+    gizmoCtx.lineTo(cx + p.x * r, cy - p.y * r);
+    gizmoCtx.strokeStyle = d.color;
+    gizmoCtx.globalAlpha = 0.4;
+    gizmoCtx.lineWidth = 2;
+    gizmoCtx.stroke();
+    gizmoCtx.globalAlpha = 1;
+  }
+
+  for (const gl of gizmoLabels) {
+    const p = gl.dir.clone().applyQuaternion(quat);
+    const x = 45 + p.x * 34;
+    const y = 45 - p.y * 34;
+    gl.el.style.left = x + 'px';
+    gl.el.style.top = y + 'px';
+    gl.el.style.opacity = gl.back ? (p.z > 0 ? '0.15' : '0.4') : (p.z > 0 ? '0.4' : '0.9');
+    gl.el.style.zIndex = p.z > 0 ? '0' : '1';
+  }
+}
+
+function animate() {
+  requestAnimationFrame(animate);
+  updateFlyMovement();
+  controls3d.update();
+  rebuildGraduations();
+  renderer3d.render(scene3d, camera3d);
+  updateLabelPositions();
+  updateGradLabels();
+  updateGizmo();
+}
+
+let hasAutoFit = false;
+
+function autoFitCamera() {
+  const nodes = sceneNodes.length ? sceneNodes : flatNodes;
+  if (nodes.length === 0) return;
+  const box = new THREE.Box3();
+  for (const node of nodes) {
+    const p = new THREE.Vector3(node.pos[0], node.pos[1], node.pos[2]);
+    const s = new THREE.Vector3(
+      Math.max(Math.abs(node.scale[0]), 0.3),
+      Math.max(Math.abs(node.scale[1]), 0.3),
+      Math.max(Math.abs(node.scale[2]), 0.3)
+    );
+    box.expandByPoint(p.clone().sub(s.clone().multiplyScalar(0.5)));
+    box.expandByPoint(p.clone().add(s.clone().multiplyScalar(0.5)));
+  }
+  const center = box.getCenter(new THREE.Vector3());
+  const size = box.getSize(new THREE.Vector3());
+  const maxDim = Math.max(size.x, size.y, size.z);
+  const dist = maxDim * 1.2;
+
+  controls3d.target.copy(center);
+  camera3d.position.set(center.x + dist * 0.6, center.y + dist * 0.4, center.z - dist * 0.6);
+  controls3d.update();
+}
+
+// --- Build 3D scene from scene nodes (independent of tree collapse) ---
+function buildScene3D() {
+  for (const m of sceneMeshes) {
+    scene3d.remove(m.group);
+    m.group.traverse(child => {
+      if (child.geometry) child.geometry.dispose();
+      if (child.material) child.material.dispose();
+    });
+  }
+  sceneMeshes = [];
+
+  for (const l of labelEls) l.el.remove();
+  labelEls = [];
+
+  const visibleNodes = sceneNodes.filter(n => !hiddenPaths.has(n.id));
+
+  for (const node of visibleNodes) {
+    const cat = node.isPrefab ? 'prefab' : node.category;
+    const hexColor = CAT_COLORS[cat] || '#909098';
+    const color = new THREE.Color(hexColor);
+    const sel = node.id === selectedId;
+
+    const group = new THREE.Group();
+    group.position.set(node.pos[0], node.pos[1], node.pos[2]);
+
+    const sx = Math.max(Math.abs(node.scale[0]), 0.3);
+    const sy = Math.max(Math.abs(node.scale[1]), 0.3);
+    const sz = Math.max(Math.abs(node.scale[2]), 0.3);
+
+    const geom = new THREE.BoxGeometry(sx, sy, sz);
+
+    const fillMat = new THREE.MeshBasicMaterial({
+      color, transparent: true, opacity: sel ? 0.3 : 0.15, depthWrite: false, side: THREE.DoubleSide,
+    });
+    const boxMesh = new THREE.Mesh(geom, fillMat);
+    group.add(boxMesh);
+
+    const edges = new THREE.EdgesGeometry(geom);
+    const edgeMat = new THREE.LineBasicMaterial({ color, transparent: true, opacity: sel ? 1.0 : 0.65 });
+    const wire = new THREE.LineSegments(edges, edgeMat);
+    group.add(wire);
+
+    scene3d.add(group);
+    sceneMeshes.push({ group, boxMesh, wire, fillMat, edgeMat, node });
+
+    const label = document.createElement('div');
+    label.className = 'scene-label' + (sel ? ' selected' : '');
+    label.style.color = hexColor;
+    label.textContent = node.name;
+    label.dataset.id = node.id;
+    label.addEventListener('click', () => {
+      selectedId = node.id;
+      updateMeshStyles();
+      renderTree();
+      renderProps();
+    });
+    labelContainer.appendChild(label);
+    labelEls.push({ el: label, node });
+  }
+
+  if (!hasAutoFit && sceneNodes.length > 0) {
+    hasAutoFit = true;
+    autoFitCamera();
+  }
+}
+
+function updateMeshStyles() {
+  for (const m of sceneMeshes) {
+    const sel = m.node.id === selectedId;
+    m.fillMat.opacity = sel ? 0.25 : 0.1;
+    m.edgeMat.opacity = sel ? 1.0 : 0.5;
+  }
+  for (const l of labelEls) {
+    l.el.classList.toggle('selected', l.node.id === selectedId);
+  }
+}
+
+function updateLabelPositions() {
+  if (!camera3d || !renderer3d) return;
+  const w = renderer3d.domElement.clientWidth;
+  const h = renderer3d.domElement.clientHeight;
+
+  const labelData = [];
+  for (const { el, node } of labelEls) {
+    const m = sceneMeshes.find(m => m.node.id === node.id);
+    if (!m) { el.style.display = 'none'; continue; }
+
+    tmpVec.copy(m.group.position);
+    const sy = Math.max(Math.abs(node.scale[1]), 0.3);
+    tmpVec.y += sy / 2;
+    tmpVec.project(camera3d);
+
+    if (tmpVec.z > 1) { el.style.display = 'none'; continue; }
+
+    const x = (tmpVec.x * 0.5 + 0.5) * w;
+    const y = (-tmpVec.y * 0.5 + 0.5) * h;
+    const dist = camera3d.position.distanceTo(m.group.position);
+    const maxDist = 150;
+
+    if (dist > maxDist && node.id !== selectedId) { el.style.display = 'none'; continue; }
+
+    labelData.push({ el, node, x, y, dist, sel: node.id === selectedId });
+  }
+
+  labelData.sort((a, b) => {
+    if (a.sel !== b.sel) return a.sel ? -1 : 1;
+    return a.dist - b.dist;
+  });
+
+  const placed = [];
+  const labelH = 14;
+  const pad = 4;
+
+  for (const d of labelData) {
+    const labelW = d.node.name.length * 6.5 + 8;
+    const candidates = [
+      { x: d.x - labelW / 2, y: d.y - labelH - 8 },
+      { x: d.x - labelW - 4, y: d.y - labelH - 4 },
+      { x: d.x + 4, y: d.y - labelH - 4 },
+      { x: d.x - labelW / 2, y: d.y + 4 },
+    ];
 
-// --- Flatten ---
-function flattenTree(roots, source) {
+    let ok = false;
+    for (const c of candidates) {
+      const overlaps = placed.some(p =>
+        c.x < p.x + p.w + pad && c.x + labelW + pad > p.x &&
+        c.y < p.y + p.h + pad && c.y + labelH + pad > p.y
+      );
+      if (!overlaps || d.sel) {
+        d.el.style.display = '';
+        d.el.style.left = (c.x + labelW / 2) + 'px';
+        d.el.style.top = (c.y + labelH) + 'px';
+        placed.push({ x: c.x, y: c.y, w: labelW, h: labelH });
+        ok = true;
+        break;
+      }
+    }
+
+    if (!ok) {
+      d.el.style.display = d.sel ? '' : 'none';
+      if (d.sel) {
+        d.el.style.left = d.x + 'px';
+        d.el.style.top = (d.y - labelH - 8) + 'px';
+      }
+    }
+  }
+}
+
+// --- Adaptive Graduations ---
+let gradLabelEls = [];
+let gradGroup = null;
+let lastGradSpacing = 0;
+
+const GRAD_AXES = [
+  { name: 'X', color: 0xe03020, css: '#e03020', dir: new THREE.Vector3(1,0,0), perp: new THREE.Vector3(0,1,0) },
+  { name: 'Y', color: 0xe0b010, css: '#e0b010', dir: new THREE.Vector3(0,1,0), perp: new THREE.Vector3(1,0,0) },
+  { name: 'Z', color: 0x1878e0, css: '#1878e0', dir: new THREE.Vector3(0,0,1), perp: new THREE.Vector3(0,1,0) },
+];
+
+function niceNum(v) {
+  const exp = Math.floor(Math.log10(v));
+  const frac = v / Math.pow(10, exp);
+  const nice = frac < 1.5 ? 1 : frac < 3.5 ? 2 : frac < 7.5 ? 5 : 10;
+  return nice * Math.pow(10, exp);
+}
+
+function formatCm(v, spacing) {
+  if (v === 0) return '0';
+  if (spacing >= 100) return (v / 100) + ' m';
+  if (spacing < 1) return Math.round(v * 10) + ' mm';
+  if (Number.isInteger(v)) return v + ' cm';
+  return +v.toFixed(1) + ' cm';
+}
+
+function rebuildGraduations() {
+  if (!camera3d || !controls3d) return;
+  const dist = camera3d.position.distanceTo(controls3d.target);
+  const majorSpacing = niceNum(dist * 0.25);
+
+  if (gridMat) gridMat.uniforms.uCamDist.value = dist;
+
+  if (majorSpacing === lastGradSpacing) return;
+  lastGradSpacing = majorSpacing;
+
+  if (gradGroup) {
+    scene3d.remove(gradGroup);
+    gradGroup.traverse(c => { if (c.geometry) c.geometry.dispose(); if (c.material) c.material.dispose(); });
+  }
+  for (const gl of gradLabelEls) gl.el.remove();
+  gradLabelEls = [];
+  gradGroup = new THREE.Group();
+
+  const minorSpacing = majorSpacing / 5;
+  const range = majorSpacing * 10;
+  const nTicks = Math.round(range / minorSpacing);
+  const majorTickSize = Math.max(majorSpacing * 0.06, 0.5);
+  const minorTickSize = majorTickSize * 0.5;
+
+  for (const ax of GRAD_AXES) {
+    const lineMat = new THREE.LineBasicMaterial({ color: ax.color, transparent: true, opacity: 0.2 });
+    const majorTickMat = new THREE.LineBasicMaterial({ color: ax.color, transparent: true, opacity: 0.5 });
+    const minorTickMat = new THREE.LineBasicMaterial({ color: ax.color, transparent: true, opacity: 0.2 });
+
+    gradGroup.add(new THREE.Line(
+      new THREE.BufferGeometry().setFromPoints([ax.dir.clone().multiplyScalar(-range), ax.dir.clone().multiplyScalar(range)]),
+      lineMat
+    ));
+
+    const majorPts = [], minorPts = [];
+    for (let i = -nTicks; i <= nTicks; i++) {
+      if (i === 0) continue;
+      const v = i * minorSpacing;
+      const isMajor = (i % 5) === 0;
+      const ts = isMajor ? majorTickSize : minorTickSize;
+      const center = ax.dir.clone().multiplyScalar(v);
+      majorPts.push(
+        ...(isMajor ? [center.clone().add(ax.perp.clone().multiplyScalar(ts)), center.clone().sub(ax.perp.clone().multiplyScalar(ts))] : [])
+      );
+      if (!isMajor) {
+        minorPts.push(center.clone().add(ax.perp.clone().multiplyScalar(ts)), center.clone().sub(ax.perp.clone().multiplyScalar(ts)));
+      }
+
+      if (isMajor) {
+        const label = document.createElement('div');
+        label.className = 'grad-label';
+        label.style.color = ax.css;
+        label.textContent = formatCm(v, majorSpacing);
+        labelContainer.appendChild(label);
+        const lPos = center.clone().add(ax.perp.clone().multiplyScalar(ts + Math.max(majorSpacing * 0.04, 0.8)));
+        gradLabelEls.push({ el: label, pos: lPos });
+      }
+    }
+
+    if (majorPts.length) gradGroup.add(new THREE.LineSegments(new THREE.BufferGeometry().setFromPoints(majorPts), majorTickMat));
+    if (minorPts.length) gradGroup.add(new THREE.LineSegments(new THREE.BufferGeometry().setFromPoints(minorPts), minorTickMat));
+
+    const endLabel = document.createElement('div');
+    endLabel.className = 'grad-label grad-label-unit';
+    endLabel.style.color = ax.css;
+    endLabel.textContent = ax.name;
+    labelContainer.appendChild(endLabel);
+    gradLabelEls.push({ el: endLabel, pos: ax.dir.clone().multiplyScalar(range + majorSpacing * 0.5) });
+  }
+
+  scene3d.add(gradGroup);
+}
+
+function updateGradLabels() {
+  if (!camera3d || !renderer3d) return;
+  const w = renderer3d.domElement.clientWidth;
+  const h = renderer3d.domElement.clientHeight;
+
+  const items = [];
+  for (const gl of gradLabelEls) {
+    tmpVec.copy(gl.pos);
+    tmpVec.project(camera3d);
+    if (tmpVec.z > 1) { gl.el.style.display = 'none'; continue; }
+    const x = (tmpVec.x * 0.5 + 0.5) * w;
+    const y = (-tmpVec.y * 0.5 + 0.5) * h;
+    if (x < -30 || x > w + 30 || y < -30 || y > h + 30) { gl.el.style.display = 'none'; continue; }
+    const dist = camera3d.position.distanceTo(gl.pos);
+    items.push({ gl, x, y, dist });
+  }
+  items.sort((a, b) => a.dist - b.dist);
+
+  const placed = [];
+  const lh = 12, pad = 3;
+  for (const it of items) {
+    const lw = it.gl.el.textContent.length * 6 + 4;
+    const rx = it.x - lw / 2, ry = it.y - lh / 2;
+    const overlaps = placed.some(p =>
+      rx < p.x + p.w + pad && rx + lw + pad > p.x &&
+      ry < p.y + p.h + pad && ry + lh + pad > p.y
+    );
+    if (overlaps) { it.gl.el.style.display = 'none'; continue; }
+    it.gl.el.style.display = '';
+    it.gl.el.style.left = it.x + 'px';
+    it.gl.el.style.top = it.y + 'px';
+    placed.push({ x: rx, y: ry, w: lw, h: lh });
+  }
+}
+
+// --- Classify a node from its components ---
+function classifyNode(node, components) {
+  let category = node.category || 'empty';
+  let hasVisual = node.hasVisual || false;
+  if (components.length > 0 && (category === 'empty' || category === 'unknown')) {
+    const types = components.map(c => c.type || '');
+    if (types.some(t => t.includes('Camera'))) category = 'camera';
+    else if (types.some(t => t.includes('Script') || t.includes('Inspector') || t.includes('Spawner'))) category = 'script';
+    else if (types.some(t => t.includes('Light') || t === 'LightSource' || t.includes('DirectionalLight') || t.includes('PointLight') || t.includes('AmbientLight'))) category = 'light';
+    else if (types.some(t => t.includes('Audio'))) category = 'audio';
+    else if (types.some(t => t.includes('Animation') || t.includes('BlendShapes'))) category = 'animation';
+    else if (types.some(t => t.includes('Body') || t.includes('Collider') || t.includes('Physics'))) category = 'physics';
+    else if (types.some(t => t.includes('VFX') || t.includes('Particle'))) category = 'vfx';
+    else if (types.some(t => t.includes('Interaction') || t.includes('Manipulate'))) category = 'interaction';
+    else if (types.some(t => t.includes('Tracking') || t.includes('DeviceTracking') || t.includes('ObjectTracking') || t.includes('Head'))) category = 'tracking';
+    else if (types.some(t => t.includes('ScreenTransform') || t.includes('Canvas') || t.includes('ScreenRegion'))) category = 'ui';
+    else if (types.some(t => t.includes('ML') || t.includes('SnapML'))) category = 'ml';
+    else if (types.some(t => t.includes('RenderMeshVisual') || t.includes('Image') || t.includes('FaceMask') || t.includes('SpriteVisual'))) { category = 'visual'; hasVisual = true; }
+    else if (types.some(t => t.includes('Text'))) category = 'text';
+  }
+  return { category, hasVisual };
+}
+
+// --- Flatten tree ---
+// respectCollapse=true for tree display, false for 3D scene (shows everything)
+function flattenTree(roots, source, respectCollapse) {
   const result = [];
   function walk(node, depth, path) {
     const id = source + ':' + path;
     const hasChildren = node.children && node.children.length > 0;
     const collapsed = collapsedPaths.has(id);
-    let category = node.category || 'empty';
-    if (category === 'empty' && node.components && node.components.length > 0) {
-      const types = node.components.map(c => c.type || '');
-      if (types.some(t => t.includes('Camera'))) category = 'camera';
-      else if (types.some(t => t.includes('Script') || t.includes('Inspector') || t.includes('Spawner'))) category = 'script';
-      else if (types.some(t => t.includes('Light'))) category = 'light';
-      else if (types.some(t => t.includes('Audio'))) category = 'audio';
-      else if (types.some(t => t.includes('Animation'))) category = 'animation';
-      else if (types.some(t => t.includes('Body') || t.includes('Collider') || t.includes('Physics'))) category = 'physics';
-      else if (types.some(t => t.includes('VFX') || t.includes('Particle'))) category = 'vfx';
-      else if (types.some(t => t.includes('Interaction') || t.includes('Manipulate'))) category = 'interaction';
-      else if (types.some(t => t.includes('Tracking') || t.includes('DeviceTracking') || t.includes('Head'))) category = 'tracking';
-      else if (types.some(t => t.includes('ScreenTransform') || t.includes('Canvas') || t.includes('ScreenRegion'))) category = 'ui';
-      else if (types.some(t => t.includes('ML'))) category = 'ml';
-      else if (node.hasVisual) category = 'visual';
-      else if (node.text) category = 'text';
+
+    // Get components: live data first, MCP enrichment if empty
+    let components = node.components || [];
+    if (components.length === 0 && mcpComponentMap && mcpComponentMap[node.name]) {
+      components = mcpComponentMap[node.name].components;
     }
+
+    const { category, hasVisual } = classifyNode(node, components);
+
     const isPrefab = node.isPrefab || (node.name && node.name.startsWith('[Prefab]'));
     result.push({
       id, name: node.name || '(unnamed)', depth, hasChildren, collapsed,
       enabled: node.enabled !== false, category, source, isPrefab,
       text: node.text || null,
       pos: node.pos || [0,0,0], scale: node.scale || [1,1,1], rot: node.rot || [0,0,0,1],
-      components: node.components || [], hasVisual: node.hasVisual || false,
+      components, hasVisual,
       color: node.color || null, layer: node.layer || null,
       childCount: node.children ? node.children.length : 0,
     });
-    if (hasChildren && !collapsed) {
+    if (hasChildren && (!respectCollapse || !collapsed)) {
       for (let i = 0; i < node.children.length; i++) walk(node.children[i], depth+1, path+'/'+(node.children[i].name||i));
     }
   }
@@ -366,20 +1050,31 @@ function flattenTree(roots, source) {
 
 function rebuildFlat() {
   const tree = liveTree || mcpTree;
-  if (!tree) { flatNodes = []; return; }
-  flatNodes = flattenTree(tree, liveTree ? 'live' : 'mcp');
-  if (searchFilter) {
+  if (!tree) { flatNodes = []; sceneNodes = []; return; }
+  const source = liveTree ? 'live' : 'mcp';
+
+  // Full walk for 3D scene (ignores tree collapse state)
+  sceneNodes = flattenTree(tree, source, false);
+
+  // Tree walk (respects collapse for display)
+  flatNodes = flattenTree(tree, source, true);
+
+  // Apply text search + category filter to tree display only
+  if (searchFilter || activeCategoryFilter !== 'all') {
     const q = searchFilter.toLowerCase();
-    flatNodes = flatNodes.filter(n =>
-      n.name.toLowerCase().includes(q) || (n.text && n.text.toLowerCase().includes(q)) ||
-      n.components.some(c => (c.type||'').toLowerCase().includes(q)) || n.category.includes(q)
-    );
+    flatNodes = flatNodes.filter(n => {
+      const matchSearch = !searchFilter ||
+        n.name.toLowerCase().includes(q) || (n.text && n.text.toLowerCase().includes(q)) ||
+        n.components.some(c => (c.type||'').toLowerCase().includes(q)) || n.category.includes(q);
+      const matchCat = activeCategoryFilter === 'all' || n.category === activeCategoryFilter;
+      return matchSearch && matchCat;
+    });
   }
-  document.getElementById('tree-count').textContent = flatNodes.length;
-  // Update stats
+
+  document.getElementById('tree-count').textContent = flatNodes.length + ' / ' + sceneNodes.length;
   let totalComp = 0;
-  flatNodes.forEach(n => totalComp += n.components.length);
-  document.getElementById('stat-objects').textContent = flatNodes.length;
+  sceneNodes.forEach(n => totalComp += n.components.length);
+  document.getElementById('stat-objects').textContent = sceneNodes.length;
   document.getElementById('stat-components').textContent = totalComp;
 }
 
@@ -395,30 +1090,51 @@ function renderTree() {
     const textPreview = n.text ? `<span class="tree-text-preview">"${esc(n.text.substring(0,14))}"</span>` : '';
     const sel = n.id === selectedId ? ' selected' : '';
     const dis = n.enabled ? '' : ' disabled';
+    const visHidden = hiddenPaths.has(n.id);
+    const visClass = visHidden ? ' hidden-vis' : '';
     const cc = n.components.length > 1 ? `<span class="tree-comp-count">${n.components.length}</span>` : '';
-    return `<div class="tree-node${sel}${dis}" data-id="${esc(n.id)}" style="padding-left:${indent+4}px">
+    const eye = `<span class="tree-vis${visHidden ? ' vis-off' : ''}" data-vis="${esc(n.id)}">${visHidden ? ICON_EYE_OFF : ICON_EYE}</span>`;
+    return `<div class="tree-node${sel}${dis}${visClass}" data-id="${esc(n.id)}" style="padding-left:${indent+4}px">
       <span class="tree-arrow" data-toggle="${esc(n.id)}">${arrowChar}</span>
       <span class="tree-icon" style="color:${iconColor}">${ICONS[cat]||ICONS.empty}</span>
-      <span class="${nameClass}">${esc(n.name)}</span>${textPreview}${cc}
+      <span class="${nameClass}">${esc(n.name)}</span>${textPreview}${cc}${eye}
     </div>`;
   }).join('');
   list.innerHTML = html || '<p class="prop-hint">No scene data</p>';
   list.onclick = (e) => {
+    // Eye toggle (visibility)
+    const vis = e.target.closest('[data-vis]');
+    if (vis) {
+      const id = vis.dataset.vis;
+      if (hiddenPaths.has(id)) hiddenPaths.delete(id); else hiddenPaths.add(id);
+      renderTree();
+      buildScene3D();
+      return;
+    }
+    // Arrow toggle (collapse)
     const toggle = e.target.closest('[data-toggle]');
-    if (toggle) { const id = toggle.dataset.toggle; if (collapsedPaths.has(id)) collapsedPaths.delete(id); else collapsedPaths.add(id); rebuildFlat(); renderTree(); renderAllViews(); return; }
+    if (toggle) {
+      const id = toggle.dataset.toggle;
+      if (collapsedPaths.has(id)) collapsedPaths.delete(id); else collapsedPaths.add(id);
+      rebuildFlat(); renderTree();
+      // NOTE: collapsing no longer affects 3D scene
+      return;
+    }
+    // Row click (select)
     const row = e.target.closest('.tree-node');
-    if (row) { selectedId = row.dataset.id; renderTree(); renderProps(); renderAllViews(); }
+    if (row) { selectedId = row.dataset.id; updateMeshStyles(); renderTree(); renderProps(); }
   };
 }
 
 // --- Properties ---
 function renderProps() {
   const el = document.getElementById('props-content');
-  const node = flatNodes.find(n => n.id === selectedId);
+  // Look in both flatNodes (tree) and sceneNodes (full) since tree might be filtered
+  const node = flatNodes.find(n => n.id === selectedId) || sceneNodes.find(n => n.id === selectedId);
   if (!node) { el.innerHTML = '<p class="prop-hint">Select a node</p>'; return; }
   const cat = node.isPrefab ? 'prefab' : node.category;
   const cc = CAT_COLORS[cat] || CAT_COLORS.empty;
-  let h = `<div style="margin-bottom:10px;display:flex;align-items:center;gap:6px;animation:fadeIn 0.2s ease">
+  let h = `<div style="margin-bottom:10px;display:flex;align-items:center;gap:6px">
     <span class="tree-icon" style="color:${cc}">${ICONS[cat]||ICONS.empty}</span>
     <span style="font-weight:600;font-size:12px">${esc(node.name)}</span>
   </div>`;
@@ -448,213 +1164,340 @@ function renderProps() {
   el.innerHTML = h;
 }
 
-// --- Scene View ---
-function renderScene() {
-  const v = viewDefs[activeView];
-  const dpr = window.devicePixelRatio || 1;
-  const w = canvas.clientWidth, h = canvas.clientHeight;
-  if (w <= 0 || h <= 0) return;
-  canvas.width = w * dpr; canvas.height = h * dpr;
-  ctx.scale(dpr, dpr);
-
-  const cx = w/2 + v.offset.x, cy = h/2 + v.offset.y;
-  const [ax, ay] = v.axes;
-  const flipY = ay === 1;
-
-  // Background
-  ctx.fillStyle = '#f8f8fa';
-  ctx.fillRect(0, 0, w, h);
-
-  // Grid
-  const gs = v.scale * 5;
-  if (gs > 3) {
-    ctx.strokeStyle = '#e4e4ea';
-    ctx.lineWidth = 1;
-    for (let x = cx % gs; x < w; x += gs) { ctx.beginPath(); ctx.moveTo(x,0); ctx.lineTo(x,h); ctx.stroke(); }
-    for (let y = cy % gs; y < h; y += gs) { ctx.beginPath(); ctx.moveTo(0,y); ctx.lineTo(w,y); ctx.stroke(); }
+// --- Server URL ---
+function getServerHost() {
+  return localStorage.getItem('lens-inspector-host') || location.host || 'localhost:8200';
+}
+function applyServerUrl() {
+  const input = document.getElementById('welcome-url');
+  let host = input.value.trim().replace(/^https?:\/\//, '').replace(/\/+$/, '');
+  if (!host) host = 'localhost:8200';
+  localStorage.setItem('lens-inspector-host', host);
+  applyMcpConfig();
+  input.value = host;
+  document.getElementById('ws-url').value = 'ws://' + host;
+  document.getElementById('mcp-base').value = 'http://' + host;
+  liveTree = null; mcpTree = null; mcpComponentMap = null; hasFetchedMCP = false;
+  dataSource = null;
+  connectWS();
+}
+// Set initial values from storage
+{
+  const h = getServerHost();
+  document.getElementById('ws-url').value = 'ws://' + h;
+  document.getElementById('mcp-base').value = 'http://' + h;
+  const welcomeInput = document.getElementById('welcome-url');
+  if (welcomeInput) welcomeInput.value = h;
+  const savedConfig = localStorage.getItem('lens-inspector-mcp-config');
+  const configArea = document.getElementById('mcp-config');
+  if (savedConfig && configArea) {
+    configArea.value = savedConfig;
+    applyMcpConfig();
   }
+}
 
-  // Origin axes
-  ctx.lineWidth = 1.5;
-  ctx.strokeStyle = '#d0d0d8'; ctx.beginPath(); ctx.moveTo(0,cy); ctx.lineTo(w,cy); ctx.stroke();
-  ctx.strokeStyle = '#d0d0d8'; ctx.beginPath(); ctx.moveTo(cx,0); ctx.lineTo(cx,h); ctx.stroke();
-
-  // Axis labels
-  ctx.font = '600 9px "IBM Plex Mono", monospace'; ctx.fillStyle = '#a0a0aa';
-  ctx.textAlign = 'right'; ctx.textBaseline = 'bottom';
-  ctx.fillText('+' + v.label[0], w-6, cy-4);
-  ctx.textAlign = 'left'; ctx.textBaseline = 'top';
-  ctx.fillText('+' + v.label[1], cx+4, 4);
-
-  // Nodes: first pass draws boxes, second pass draws labels with collision avoidance
-  const nodeRects = [];
-  for (const node of flatNodes) {
-    const px = cx + node.pos[ax] * v.scale;
-    const py = flipY ? cy - node.pos[ay] * v.scale : cy + node.pos[ay] * v.scale;
-    const sw = Math.max(Math.abs(node.scale[ax]), 0.4) * v.scale;
-    const sh = Math.max(Math.abs(node.scale[ay]), 0.4) * v.scale;
-    const sel = node.id === selectedId;
-    const cat = node.isPrefab ? 'prefab' : node.category;
-    const catColor = CAT_COLORS[cat] || '#909098';
-
-    // Fill
-    if (node.hasVisual && node.color) {
-      const [r,g,b,a] = node.color;
-      ctx.fillStyle = `rgba(${r},${g},${b},${Math.max((a||255)/255*0.2, 0.05)})`;
-      ctx.fillRect(px-sw/2, py-sh/2, sw, sh);
-    } else if (node.hasVisual || (cat !== 'empty' && cat !== 'unknown')) {
-      ctx.fillStyle = catColor + '12';
-      ctx.fillRect(px-sw/2, py-sh/2, sw, sh);
-    }
-
-    // Outline
-    if (sel) { ctx.strokeStyle = '#1850d0'; ctx.lineWidth = 2.5; ctx.setLineDash([]); }
-    else if (node.hasVisual || (cat !== 'empty' && cat !== 'unknown')) { ctx.strokeStyle = catColor + '70'; ctx.lineWidth = 1.5; ctx.setLineDash([]); }
-    else { ctx.strokeStyle = '#c8c8d0'; ctx.lineWidth = 1; ctx.setLineDash([3,3]); }
-    ctx.strokeRect(px-sw/2, py-sh/2, sw, sh);
-    ctx.setLineDash([]);
+// --- MCP enrichment ---
+let mcpComponentMap = null;
+let hasFetchedMCP = false;
+let parsedMcpConfig = null;
 
-    if (sw > 12 || sel) nodeRects.push({ node, px, py, sw, sh, sel, cat, catColor });
+function parseMcpConfig(raw) {
+  try {
+    const obj = JSON.parse(raw);
+    const servers = obj.servers || obj;
+    const key = Object.keys(servers)[0];
+    if (!key) return null;
+    const srv = servers[key];
+    if (!srv.url) return null;
+    return { url: srv.url, headers: srv.headers || {}, name: key };
+  } catch (e) {
+    return null;
   }
+}
 
-  // Labels: collision-aware placement
-  const placedLabels = []; // [{x,y,w,h}]
-  function labelsOverlap(lx, ly, lw, lh) {
-    for (const p of placedLabels) {
-      if (lx < p.x + p.w && lx + lw > p.x && ly < p.y + p.h && ly + lh > p.y) return true;
-    }
-    return false;
-  }
-  // Selected nodes get priority
-  nodeRects.sort((a, b) => (b.sel ? 1 : 0) - (a.sel ? 1 : 0));
-  for (const { node, px, py, sw, sh, sel, cat, catColor } of nodeRects) {
-    ctx.font = sel ? '600 8px "IBM Plex Mono", monospace' : '8px "IBM Plex Mono", monospace';
-    const tw = ctx.measureText(node.name).width;
-    const th = 10;
-    // Try positions: above-left, above-right, below-left, below-right
-    const candidates = [
-      { x: px - sw/2, y: py - sh/2 - th - 2 },
-      { x: px + sw/2 - tw, y: py - sh/2 - th - 2 },
-      { x: px - sw/2, y: py + sh/2 + 2 },
-      { x: px + sw/2 - tw, y: py + sh/2 + 2 },
-    ];
-    let placed = false;
-    for (const c of candidates) {
-      if (!labelsOverlap(c.x, c.y, tw, th)) {
-        ctx.fillStyle = sel ? catColor : '#80808c';
-        ctx.textAlign = 'left'; ctx.textBaseline = 'top';
-        ctx.fillText(node.name, c.x, c.y);
-        placedLabels.push({ x: c.x, y: c.y, w: tw, h: th });
-        placed = true;
-        break;
-      }
-    }
-    // If all positions overlap, selected nodes always draw (force top-left)
-    if (!placed && sel) {
-      const c = candidates[0];
-      ctx.fillStyle = catColor;
-      ctx.textAlign = 'left'; ctx.textBaseline = 'top';
-      ctx.fillText(node.name, c.x, c.y);
-      placedLabels.push({ x: c.x, y: c.y, w: tw, h: th });
-    }
+function applyMcpConfig() {
+  const textarea = document.getElementById('mcp-config');
+  const status = document.getElementById('mcp-config-status');
+  const raw = textarea.value.trim();
+  if (!raw) { parsedMcpConfig = null; status.style.color = 'var(--text-muted)'; status.textContent = 'Copy from Lens Studio: AI Assistant > MCP config.'; return; }
+  const parsed = parseMcpConfig(raw);
+  if (parsed) {
+    parsedMcpConfig = parsed;
+    localStorage.setItem('lens-inspector-mcp-config', raw);
+    status.style.color = '#0a8020';
+    status.textContent = 'MCP configured: ' + parsed.url;
+    if (liveTree && hasFetchedMCP) { hasFetchedMCP = false; fetchMCPComponents(); }
+  } else {
+    parsedMcpConfig = null;
+    status.style.color = '#c03020';
+    status.textContent = 'Invalid config. Paste the full JSON from Lens Studio.';
   }
-
-  document.getElementById('view-info').textContent = `${v.scale.toFixed(1)}x`;
 }
 
-function renderAllViews() { renderScene(); }
+async function fetchMCPComponents() {
+  if (hasFetchedMCP) return;
+  hasFetchedMCP = true;
+
+  let fetchUrl, fetchHeaders;
+  if (parsedMcpConfig) {
+    const base = document.getElementById('mcp-base').value;
+    const params = new URLSearchParams();
+    params.set('url', parsedMcpConfig.url);
+    const authHeader = parsedMcpConfig.headers['Authorization'] || parsedMcpConfig.headers['authorization'] || '';
+    const token = authHeader.replace(/^Bearer\s+/i, '');
+    if (token) params.set('token', token);
+    fetchUrl = base + '/mcp?' + params.toString();
+    fetchHeaders = { 'Content-Type': 'application/json' };
+  } else {
+    const base = document.getElementById('mcp-base').value;
+    fetchUrl = base + '/mcp';
+    fetchHeaders = { 'Content-Type': 'application/json' };
+  }
 
-// --- Pan/Zoom ---
-function setupViewport() {
-  canvas = document.getElementById('scene-canvas');
-  ctx = canvas.getContext('2d');
-  let dragStart = {x:0,y:0};
+  try {
+    const resp = await fetch(fetchUrl, {
+      method: 'POST',
+      headers: fetchHeaders,
+      body: JSON.stringify({
+        jsonrpc: '2.0', id: 1, method: 'tools/call',
+        params: { name: 'GetLensStudioSceneGraph', arguments: {} }
+      })
+    });
+    const data = await resp.json();
+    const sceneText = data.result?.content?.[0]?.text;
+    if (!sceneText) { console.log('[inspector] MCP returned no scene data'); return; }
+    const scene = JSON.parse(sceneText);
+    const roots = scene.sceneTree?.children || scene.children || [];
 
-  canvas.addEventListener('mousedown', e => { dragging = true; const v = viewDefs[activeView]; dragStart = {x: e.clientX - v.offset.x, y: e.clientY - v.offset.y}; });
-  window.addEventListener('mousemove', e => { if (dragging) { const v = viewDefs[activeView]; v.offset.x = e.clientX - dragStart.x; v.offset.y = e.clientY - dragStart.y; renderScene(); }});
-  window.addEventListener('mouseup', () => { dragging = false; });
-  canvas.addEventListener('wheel', e => { e.preventDefault(); const v = viewDefs[activeView]; v.scale = Math.max(1, Math.min(100, v.scale * (1 - e.deltaY*0.002))); renderScene(); }, {passive:false});
+    // Extract project name from scene data
+    const projName = scene.projectName || scene.name || (parsedMcpConfig ? parsedMcpConfig.name : '');
+    if (projName) {
+      document.getElementById('project-name').textContent = projName;
+    }
 
-  // View toggle
-  document.getElementById('view-bar').addEventListener('click', e => {
-    const btn = e.target.closest('.view-btn');
-    if (!btn) return;
-    activeView = btn.dataset.view;
-    document.querySelectorAll('.view-btn').forEach(b => b.classList.toggle('active', b === btn));
-    renderScene();
-  });
+    mcpComponentMap = {};
+    function walkMcp(obj, path) {
+      const name = obj.name || '';
+      const key = path + '/' + name;
+      const components = (obj.components || []).map(c => ({
+        type: c.name || c.type || 'Unknown',
+        enabled: c.enabled !== false,
+        category: null,
+        scriptName: c.properties?.scriptAsset?.name || null,
+        meshName: c.properties?.mesh?.name || null,
+        materialName: c.properties?.mainMaterial?.name || null,
+        text: c.properties?.text || null,
+      }));
+      if (components.length > 0) {
+        mcpComponentMap[name] = { components, path: key };
+      }
+      for (const child of (obj.children || [])) walkMcp(child, key);
+    }
+    for (const r of roots) walkMcp(r, '');
+    console.log('[inspector] MCP enrichment: got components for', Object.keys(mcpComponentMap).length, 'objects');
+    if (liveTree) { rebuildFlat(); renderTree(); buildScene3D(); if (selectedId) renderProps(); }
+  } catch (e) {
+    console.log('[inspector] MCP enrichment failed:', e.message);
+  }
 }
 
 // --- WebSocket ---
+function updateSourceUI() {
+  const dot = document.getElementById('ws-dot');
+  const text = document.getElementById('status-text');
+  const badge = document.getElementById('source-badge');
+  if (dataSource === 'example') {
+    dot.className = 'status-dot dot-example';
+    text.textContent = 'connected';
+    badge.className = 'badge-example';
+    badge.textContent = 'Example scene';
+  } else if (dataSource === 'live') {
+    dot.className = 'status-dot dot-live';
+    text.textContent = 'live';
+    badge.className = 'badge-live';
+    badge.textContent = 'Lens Studio';
+  } else {
+    dot.className = 'status-dot dot-off';
+    text.textContent = 'connecting...';
+    badge.className = 'badge-off';
+  }
+}
+
 function connectWS() {
   const url = document.getElementById('ws-url').value.trim();
   if (ws) { ws.close(); ws = null; }
   ws = new WebSocket(url);
-  ws.onopen = () => { document.getElementById('ws-dot').className = 'status-dot dot-live'; document.getElementById('status-text').textContent = 'live'; };
+  ws.onopen = () => updateSourceUI();
   ws.onmessage = (e) => {
     try {
       const msg = JSON.parse(e.data);
+      if (msg.event === 'reload') { location.reload(); return; }
       if (msg.event === 'scene_snapshot' && msg.roots) {
+        const wasEmpty = !liveTree;
+        const oldCount = sceneNodes.length;
+        const newSource = msg.source === 'example' ? 'example' : 'live';
+
+        if (dataSource === 'example' && newSource === 'live') {
+          selectedId = null;
+        }
+        dataSource = newSource;
         liveTree = msg.roots;
-        rebuildFlat(); renderTree(); renderAllViews();
+        rebuildFlat(); renderTree(); buildScene3D();
+        if (wasEmpty || Math.abs(sceneNodes.length - oldCount) > oldCount * 0.5) {
+          hasAutoFit = false;
+          autoFitCamera();
+          hasAutoFit = true;
+          lastGradSpacing = 0;
+        }
         if (selectedId) renderProps();
-        hideWelcome();
+        updateSourceUI();
+        if (wasEmpty) hideWelcome();
+        if (newSource === 'live' && !hasFetchedMCP) fetchMCPComponents();
       }
     } catch (err) {}
   };
   ws.onclose = () => {
-    document.getElementById('ws-dot').className = 'status-dot dot-off';
-    document.getElementById('status-text').textContent = 'reconnecting...';
+    dataSource = null;
+    updateSourceUI();
     ws = null; setTimeout(connectWS, 2000);
   };
 }
-document.getElementById('ws-btn').addEventListener('click', connectWS);
-
-// --- MCP ---
-async function fetchMCP() {
-  const token = document.getElementById('mcp-token').value.trim();
-  const dot = document.getElementById('mcp-dot');
-  dot.className = 'status-dot dot-off';
-  try {
-    const proxyUrl = `http://${location.host}/mcp` + (token ? `?token=${encodeURIComponent(token)}` : '');
-    const resp = await fetch(proxyUrl, { method:'POST', headers:{'Content-Type':'application/json'},
-      body: JSON.stringify({jsonrpc:'2.0',id:1,method:'tools/call',params:{name:'GetLensStudioSceneGraph',arguments:{}}})});
-    const data = await resp.json();
-    const sceneText = data.result?.content?.[0]?.text;
-    if (!sceneText) throw new Error('No scene data');
-    const scene = JSON.parse(sceneText);
-    const roots = scene.sceneTree?.children || scene.children || [];
-    function convertMcp(obj) {
-      const pos = obj.localTransform?.position||{x:0,y:0,z:0};
-      const scl = obj.localTransform?.scale||{x:1,y:1,z:1};
-      const rot = obj.localTransform?.rotation||{x:0,y:0,z:0,w:1};
-      const components = (obj.components||[]).map(c => ({type:c.name||c.type||'Unknown',enabled:c.enabled!==false,text:c.properties?.text||null,category:null}));
-      return { name:obj.name, enabled:obj.enabled!==false, category:'empty',
-        pos:[pos.x,pos.y,pos.z], scale:[scl.x,scl.y,scl.z], rot:[rot.x,rot.y,rot.z,rot.w],
-        components, text:components.find(c=>c.text)?.text||null,
-        hasVisual:components.some(c=>c.type==='RenderMeshVisual'||c.type==='Image'), color:null,
-        children:(obj.children||[]).map(convertMcp) };
-    }
-    mcpTree = roots.map(convertMcp);
-    if (!liveTree) { rebuildFlat(); renderTree(); renderAllViews(); }
-    dot.className = 'status-dot dot-mcp'; hideWelcome();
-  } catch (e) { dot.className = 'status-dot dot-off'; alert('MCP error: '+e.message); }
-}
-document.getElementById('mcp-btn').addEventListener('click', fetchMCP);
 
 // --- Search ---
 document.getElementById('tree-search').addEventListener('input', (e) => {
   searchFilter = e.target.value.trim(); rebuildFlat(); renderTree();
 });
 
+// --- Category filter chips ---
+document.getElementById('tree-filters').addEventListener('click', (e) => {
+  const chip = e.target.closest('.filter-chip');
+  if (!chip) return;
+  activeCategoryFilter = chip.dataset.cat;
+  document.querySelectorAll('.filter-chip').forEach(c => c.classList.toggle('active', c.dataset.cat === activeCategoryFilter));
+  rebuildFlat(); renderTree();
+});
+
 // --- Utils ---
 function esc(s) { return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;'); }
-function hideWelcome() { document.getElementById('welcome').classList.add('hidden'); }
+function hideWelcome() {
+  const w = document.getElementById('welcome');
+  if (dataSource === 'example') {
+    document.getElementById('welcome-status').style.display = 'none';
+    document.getElementById('welcome-example').style.display = 'flex';
+  }
+  w.classList.add('hidden');
+}
+function showWelcome() {
+  const w = document.getElementById('welcome');
+  if (dataSource === 'example') {
+    document.getElementById('welcome-status').style.display = 'none';
+    document.getElementById('welcome-example').style.display = 'flex';
+  } else if (dataSource === 'live') {
+    document.getElementById('welcome-status').style.display = 'none';
+    document.getElementById('welcome-example').style.display = 'none';
+  } else {
+    document.getElementById('welcome-status').style.display = 'flex';
+    document.getElementById('welcome-example').style.display = 'none';
+  }
+  w.classList.remove('hidden');
+}
+document.getElementById('setup-btn').addEventListener('click', showWelcome);
+document.getElementById('server-connect-btn').addEventListener('click', applyServerUrl);
+document.getElementById('welcome-url').addEventListener('keydown', (e) => { if (e.key === 'Enter') applyServerUrl(); });
+document.getElementById('mcp-config').addEventListener('input', applyMcpConfig);
+document.getElementById('welcome').addEventListener('click', (e) => {
+  if (e.target === document.getElementById('welcome') && dataSource) hideWelcome();
+});
+
+// --- Resizable panes ---
+function initResize() {
+  const treePanel = document.getElementById('tree-panel');
+  const propsPanel = document.getElementById('props-panel');
+  const handleL = document.getElementById('resize-left');
+  const handleR = document.getElementById('resize-right');
+
+  function makeDraggable(handle, getTarget, isLeft) {
+    let startX, startW;
+    function onDown(e) {
+      e.preventDefault();
+      const target = getTarget();
+      startX = e.clientX;
+      startW = target.offsetWidth;
+      handle.classList.add('active');
+      document.body.classList.add('resizing');
+      document.addEventListener('mousemove', onMove);
+      document.addEventListener('mouseup', onUp);
+    }
+    function onMove(e) {
+      const dx = e.clientX - startX;
+      const target = getTarget();
+      const newW = isLeft ? startW + dx : startW - dx;
+      target.style.width = Math.max(150, newW) + 'px';
+      onResize();
+    }
+    function onUp() {
+      handle.classList.remove('active');
+      document.body.classList.remove('resizing');
+      document.removeEventListener('mousemove', onMove);
+      document.removeEventListener('mouseup', onUp);
+    }
+    handle.addEventListener('mousedown', onDown);
+  }
+
+  makeDraggable(handleL, () => treePanel, true);
+  makeDraggable(handleR, () => propsPanel, false);
+}
+
+// --- WASD fly controls (uses e.code for keyboard-layout independence) ---
+const keysDown = new Set();
+const flySpeed = { base: 0.5, shift: 2.5 };
+const FLY_CODES = new Set(['KeyW','KeyA','KeyS','KeyD','KeyQ','KeyE','ShiftLeft','ShiftRight']);
+
+function initFlyControls() {
+  const canvas = document.getElementById('scene-canvas');
+  canvas.tabIndex = 0;
+  canvas.style.outline = 'none';
+  canvas.addEventListener('mousedown', () => canvas.focus());
+
+  canvas.addEventListener('keydown', (e) => {
+    if (FLY_CODES.has(e.code)) {
+      keysDown.add(e.code);
+      e.preventDefault();
+    }
+  });
+  canvas.addEventListener('keyup', (e) => {
+    keysDown.delete(e.code);
+  });
+  canvas.addEventListener('blur', () => keysDown.clear());
+}
+
+function updateFlyMovement() {
+  if (keysDown.size === 0) return;
+  const speed = (keysDown.has('ShiftLeft') || keysDown.has('ShiftRight')) ? flySpeed.shift : flySpeed.base;
+  const dist = camera3d.position.distanceTo(controls3d.target);
+  const step = speed * dist * 0.01;
+
+  const forward = new THREE.Vector3();
+  camera3d.getWorldDirection(forward);
+  const right = new THREE.Vector3().crossVectors(forward, camera3d.up).normalize();
+  const up = new THREE.Vector3(0, 1, 0);
+
+  const move = new THREE.Vector3();
+  if (keysDown.has('KeyW')) move.add(forward.clone().multiplyScalar(step));
+  if (keysDown.has('KeyS')) move.add(forward.clone().multiplyScalar(-step));
+  if (keysDown.has('KeyD')) move.add(right.clone().multiplyScalar(step));
+  if (keysDown.has('KeyA')) move.add(right.clone().multiplyScalar(-step));
+  if (keysDown.has('KeyE')) move.add(up.clone().multiplyScalar(step));
+  if (keysDown.has('KeyQ')) move.add(up.clone().multiplyScalar(-step));
+
+  camera3d.position.add(move);
+  controls3d.target.add(move);
+}
 
 // --- Init ---
-window.addEventListener('resize', renderScene);
-setupViewport();
-renderScene();
+initScene3D();
+initResize();
+initFlyControls();
 connectWS();
 </script>
 </body>