cyclecad 0.5.0 → 0.8.5

package/app/index.html

@@ -41,6 +41,57 @@
       --properties-width: 300px;
     }
 
+    /* ===== ViewCube ===== */
+    .vc-face {
+      position: absolute;
+      width: 80px;
+      height: 80px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 10px;
+      font-weight: 700;
+      color: rgba(255,255,255,0.85);
+      background: rgba(40,44,52,0.8);
+      border: 1px solid rgba(88,166,255,0.4);
+      backface-visibility: hidden;
+      user-select: none;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+    }
+    .vc-face:hover {
+      background: rgba(88,166,255,0.5);
+      color: #fff;
+    }
+    :root.light-mode .vc-face {
+      background: rgba(220,225,235,0.85);
+      color: rgba(0,0,0,0.7);
+      border: 1px solid rgba(0,102,204,0.4);
+    }
+    :root.light-mode .vc-face:hover {
+      background: rgba(0,102,204,0.5);
+      color: #fff;
+    }
+
+    /* ===== Light Mode ===== */
+    :root.light-mode {
+      --bg-primary: #f5f5f5;
+      --bg-secondary: #ffffff;
+      --bg-tertiary: #e8e8e8;
+      --border-color: #d0d0d0;
+      --text-primary: #1a1a1a;
+      --text-secondary: #555555;
+      --text-muted: #888888;
+      --accent-blue: #0066cc;
+      --accent-blue-dark: #004499;
+      --accent-green: #22863a;
+      --accent-red: #d73a49;
+      --accent-yellow: #b08800;
+      --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
+      --shadow-md: 0 8px 16px rgba(0, 0, 0, 0.12);
+      --shadow-lg: 0 16px 32px rgba(0, 0, 0, 0.15);
+    }
+
     /* ===== Reset & Globals ===== */
     * {
       margin: 0;
@@ -92,11 +143,67 @@
       display: flex;
       align-items: center;
       padding: 0 8px;
-      gap: 8px;
+      gap: 4px;
       user-select: none;
       z-index: 100;
       box-shadow: var(--shadow-sm);
+      overflow: visible;
+      scrollbar-width: thin;
+      scrollbar-color: rgba(255,255,255,0.2) transparent;
+    }
+    #toolbar::-webkit-scrollbar { height: 3px; }
+    #toolbar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 3px; }
+    #toolbar::-webkit-scrollbar-track { background: transparent; }
+
+    /* Dropdown menu for grouped tools */
+    .toolbar-dropdown {
+      position: relative;
+    }
+    .toolbar-dropdown-btn {
+      padding: 4px 6px;
+      height: 30px;
+      display: flex;
+      align-items: center;
+      gap: 3px;
+      background: transparent;
+      border: 1px solid transparent;
+      border-radius: 4px;
+      color: var(--text-secondary);
+      cursor: pointer;
+      font-size: 11px;
+      white-space: nowrap;
+    }
+    .toolbar-dropdown-btn:hover { background: var(--bg-tertiary); color: var(--text-primary); }
+    .toolbar-dropdown-btn .caret { font-size: 9px; opacity: 0.7; margin-left: 2px; }
+    .toolbar-dropdown-menu {
+      display: none;
+      position: fixed;
+      background: var(--bg-secondary);
+      border: 1px solid var(--border-color);
+      border-radius: 6px;
+      padding: 4px;
+      min-width: 160px;
+      z-index: 9999;
+      box-shadow: 0 4px 12px rgba(0,0,0,0.4);
+      max-height: 70vh;
+      overflow-y: auto;
+    }
+    .toolbar-dropdown.open .toolbar-dropdown-menu { display: block; }
+    .toolbar-dropdown-menu button {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      width: 100%;
+      padding: 5px 8px;
+      background: transparent;
+      border: none;
+      border-radius: 4px;
+      color: var(--text-secondary);
+      cursor: pointer;
+      font-size: 11px;
+      white-space: nowrap;
     }
+    .toolbar-dropdown-menu button:hover { background: var(--bg-tertiary); color: var(--text-primary); }
 
     #content {
       flex: 1;
@@ -1280,13 +1387,13 @@
   <!-- Token Engine — Initialize early so window.cycleCAD.tokens is available -->
   <script src="./js/token-engine.js"></script>
   <!-- New Architecture Modules (ES modules need type="module") -->
-  <script type="module" src="./js/material-library.js"></script>
+  <script type="module" src="./js/material-library.js?v=62"></script>
   <script src="./js/dfm-analyzer.js"></script>
-  <script type="module" src="./js/cam-pipeline.js"></script>
+  <script type="module" src="./js/cam-pipeline.js?v=62"></script>
   <script src="./js/connected-fabs.js"></script>
-  <script type="module" src="./js/ai-copilot.js"></script>
-  <script type="module" src="./js/collaboration.js"></script>
-  <script type="module" src="./js/collaboration-ui.js"></script>
+  <script type="module" src="./js/ai-copilot.js?v=62"></script>
+  <script type="module" src="./js/collaboration.js?v=62"></script>
+  <script type="module" src="./js/collaboration-ui.js?v=62"></script>
   <!-- CadXStudio-killer modules (IIFE, no imports) -->
   <script src="./js/text-to-cad.js"></script>
   <script src="./js/cam-operations.js"></script>
@@ -1312,6 +1419,7 @@
           <span class="splash-logo-cycle">cycle</span><span class="splash-logo-cad">CAD</span>
         </div>
         <p class="splash-subtitle">Parametric 3D CAD Modeler for the Mechanical Designer</p>
+        <p style="color: rgba(255,255,255,0.45); font-size: 0.8rem; margin: 4px 0 0 0; letter-spacing: 1px;">v0.8.5</p>
       </div>
       <div class="splash-options">
         <button class="splash-button splash-button-primary" id="btn-empty-project" style="grid-column: 1 / -1;">
@@ -1330,278 +1438,144 @@
           <span>📂</span> DUO Project Browser (473 Parts)
         </button>
       </div>
+      <button id="btn-splash-reset" style="margin-top: 12px; padding: 6px 16px; background: rgba(255,80,80,0.15); border: 1px solid rgba(255,80,80,0.3); color: #f88; border-radius: 6px; cursor: pointer; font-size: 0.75rem; letter-spacing: 0.5px;">
+        🔄 Clear Cache & Reload
+      </button>
     </div>
 
     <!-- Top Toolbar -->
     <div id="toolbar">
-      <!-- Sketch Tools -->
-      <div class="toolbar-group">
-        <button class="toolbar-button" id="tool-sketch" title="Start Sketch (S)">
-          <span class="toolbar-icon">📐</span>
-          <span class="toolbar-label">Sketch</span>
-        </button>
-        <button class="toolbar-button" id="tool-line" title="Draw Line (L)">
-          <span class="toolbar-icon">/</span>
-          <span class="toolbar-label">Line</span>
-        </button>
-        <button class="toolbar-button" id="tool-rect" title="Draw Rectangle (R)">
-          <span class="toolbar-icon">▭</span>
-          <span class="toolbar-label">Rect</span>
-        </button>
-        <button class="toolbar-button" id="tool-circle" title="Draw Circle (C)">
-          <span class="toolbar-icon">⭕</span>
-          <span class="toolbar-label">Circle</span>
-        </button>
-        <button class="toolbar-button" id="tool-arc" title="Draw Arc (A)">
-          <span class="toolbar-icon">⌢</span>
-          <span class="toolbar-label">Arc</span>
-        </button>
-        <button class="toolbar-button" id="tool-dimension" title="Add Dimension (D)">
-          <span class="toolbar-icon">↔</span>
-          <span class="toolbar-label">Dim</span>
-        </button>
-      </div>
-
-      <!-- Modeling Tools -->
+      <!-- Pointer / Select -->
       <div class="toolbar-group">
-        <button class="toolbar-button" id="tool-extrude" title="Extrude (E)">
-          <span class="toolbar-icon">⬆</span>
-          <span class="toolbar-label">Extrude</span>
-        </button>
-        <button class="toolbar-button" id="tool-revolve" title="Revolve">
-          <span class="toolbar-icon">🔄</span>
-          <span class="toolbar-label">Revolve</span>
-        </button>
-        <button class="toolbar-button" id="tool-fillet" title="Fillet">
-          <span class="toolbar-icon">⌒</span>
-          <span class="toolbar-label">Fillet</span>
-        </button>
-        <button class="toolbar-button" id="tool-chamfer" title="Chamfer">
-          <span class="toolbar-icon">⌉</span>
-          <span class="toolbar-label">Chamfer</span>
-        </button>
-        <button class="toolbar-button" id="tool-cut" title="Boolean Cut">
-          <span class="toolbar-icon">−</span>
-          <span class="toolbar-label">Cut</span>
-        </button>
-        <button class="toolbar-button" id="tool-union" title="Boolean Union">
-          <span class="toolbar-icon">+</span>
-          <span class="toolbar-label">Union</span>
-        </button>
+        <button class="toolbar-button active" id="tool-pointer" title="Select / Pointer (Esc)" style="background:rgba(88,166,255,0.15);border:1px solid rgba(88,166,255,0.4);"><span class="toolbar-icon">↖</span><span class="toolbar-label">Select</span></button>
       </div>
 
-      <!-- Advanced Operations -->
+      <!-- Sketch Tools (always visible) -->
       <div class="toolbar-group">
-        <button class="toolbar-button" id="tool-sweep" title="Sweep (Profile Along Path)">
-          <span class="toolbar-icon">&#8634;</span>
-          <span class="toolbar-label">Sweep</span>
-        </button>
-        <button class="toolbar-button" id="tool-loft" title="Loft (Between Profiles)">
-          <span class="toolbar-icon">&#9651;</span>
-          <span class="toolbar-label">Loft</span>
-        </button>
-        <button class="toolbar-button" id="tool-spring" title="Generate Spring" style="background:rgba(63,185,80,0.08);">
-          <span class="toolbar-icon">&#8635;</span>
-          <span class="toolbar-label">Spring</span>
-        </button>
-        <button class="toolbar-button" id="tool-thread" title="Generate Thread" style="background:rgba(63,185,80,0.08);">
-          <span class="toolbar-icon">&#10038;</span>
-          <span class="toolbar-label">Thread</span>
-        </button>
+        <button class="toolbar-button" id="tool-sketch" title="Start Sketch (S)"><span class="toolbar-icon">📐</span><span class="toolbar-label">Sketch</span></button>
+        <button class="toolbar-button" id="tool-line" title="Line (L)"><span class="toolbar-icon">/</span></button>
+        <button class="toolbar-button" id="tool-rect" title="Rect (R)"><span class="toolbar-icon">▭</span></button>
+        <button class="toolbar-button" id="tool-circle" title="Circle (C)"><span class="toolbar-icon">⭕</span></button>
+        <button class="toolbar-button" id="tool-arc" title="Arc (A)"><span class="toolbar-icon">⌢</span></button>
+        <button class="toolbar-button" id="tool-dimension" title="Dimension (D)"><span class="toolbar-icon">↔</span></button>
       </div>
 
-      <!-- Sheet Metal -->
+      <!-- Modeling (always visible) -->
       <div class="toolbar-group">
-        <button class="toolbar-button" id="tool-bend" title="Sheet Metal Bend" style="background:rgba(210,153,34,0.08);">
-          <span class="toolbar-icon">&#9484;</span>
-          <span class="toolbar-label">Bend</span>
-        </button>
-        <button class="toolbar-button" id="tool-flange" title="Sheet Metal Flange" style="background:rgba(210,153,34,0.08);">
-          <span class="toolbar-icon">&#9492;</span>
-          <span class="toolbar-label">Flange</span>
-        </button>
-        <button class="toolbar-button" id="tool-unfold" title="Unfold Sheet Metal" style="background:rgba(210,153,34,0.08);">
-          <span class="toolbar-icon">&#9645;</span>
-          <span class="toolbar-label">Unfold</span>
-        </button>
+        <button class="toolbar-button" id="tool-extrude" title="Extrude (E)"><span class="toolbar-icon">⬆</span><span class="toolbar-label">Extrude</span></button>
+        <button class="toolbar-button" id="tool-revolve" title="Revolve"><span class="toolbar-icon">🔄</span></button>
+        <button class="toolbar-button" id="tool-fillet" title="Fillet"><span class="toolbar-icon">⌒</span></button>
+        <button class="toolbar-button" id="tool-chamfer" title="Chamfer"><span class="toolbar-icon">⌉</span></button>
+        <button class="toolbar-button" id="tool-cut" title="Cut"><span class="toolbar-icon">−</span></button>
+        <button class="toolbar-button" id="tool-union" title="Union"><span class="toolbar-icon">+</span></button>
       </div>
 
-      <!-- Export Tools -->
-      <div class="toolbar-group">
-        <button class="toolbar-button" id="export-stl" title="Export STL">
-          <span class="toolbar-icon">💾</span>
-          <span class="toolbar-label">STL</span>
-        </button>
-        <button class="toolbar-button" id="export-step" title="Export STEP">
-          <span class="toolbar-icon">💾</span>
-          <span class="toolbar-label">STEP</span>
-        </button>
-        <button class="toolbar-button" id="export-dxf" title="Export DXF (2D Drawing)">
-          <span class="toolbar-icon">📐</span>
-          <span class="toolbar-label">DXF</span>
-        </button>
-        <button class="toolbar-button" id="export-multiview" title="Multi-View Engineering Drawing (DXF)">
-          <span class="toolbar-icon">📄</span>
-          <span class="toolbar-label">Drawing</span>
-        </button>
+      <!-- Advanced Ops dropdown -->
+      <div class="toolbar-dropdown">
+        <button class="toolbar-dropdown-btn" title="Advanced Operations">⚙ More <span class="caret">▼</span></button>
+        <div class="toolbar-dropdown-menu">
+          <button id="tool-sweep" title="Sweep">↺ Sweep</button>
+          <button id="tool-loft" title="Loft">△ Loft</button>
+          <button id="tool-spring" title="Spring">↻ Spring</button>
+          <button id="tool-thread" title="Thread">✦ Thread</button>
+          <button id="tool-bend" title="Sheet Metal Bend">┌ Bend</button>
+          <button id="tool-flange" title="Flange">└ Flange</button>
+          <button id="tool-unfold" title="Unfold">▭ Unfold</button>
+          <button id="tool-shell" title="Shell (Hollow)">◻ Shell</button>
+          <button id="tool-pattern" title="Pattern (Array)">▦ Pattern</button>
+          <button id="btn-sketch-enhance" title="Sketch+">✏ Sketch+</button>
+          <button id="btn-section" title="Section View">🔪 Section</button>
+          <button id="tool-measure" title="Measure (M key)">📏 Measure</button>
+        </div>
       </div>
 
-      <!-- Assembly Tools -->
-      <div class="toolbar-group">
-        <button class="toolbar-button" id="tool-assembly" title="Assembly Workspace" style="background:rgba(139,92,246,0.1);border:1px solid rgba(139,92,246,0.3);">
-          <span class="toolbar-icon">&#9881;</span>
-          <span class="toolbar-label">Assembly</span>
-        </button>
-        <button class="toolbar-button" id="tool-explode" title="Explode/Collapse Assembly">
-          <span class="toolbar-icon">&#11043;</span>
-          <span class="toolbar-label">Explode</span>
-        </button>
+      <!-- Export dropdown -->
+      <div class="toolbar-dropdown">
+        <button class="toolbar-dropdown-btn" title="Export">💾 Export <span class="caret">▼</span></button>
+        <div class="toolbar-dropdown-menu">
+          <button id="export-stl">💾 STL</button>
+          <button id="export-step">💾 STEP</button>
+          <button id="export-dxf">📐 DXF</button>
+          <button id="export-multiview">📄 Drawing</button>
+        </div>
       </div>
 
-      <!-- Reverse Engineer -->
+      <!-- Assembly -->
       <div class="toolbar-group">
-        <button class="toolbar-button" id="btn-reverse-engineer" title="Reverse Engineer a Part (Import STL → Detect Features → Step-by-Step Rebuild Guide)" style="background:rgba(88,166,255,0.12);border:1px solid rgba(88,166,255,0.3);">
-          <span class="toolbar-icon">🔍</span>
-          <span class="toolbar-label">Reverse Engineer</span>
-        </button>
-        <button class="toolbar-button" id="btn-inventor-import" title="Import Autodesk Inventor .ipt/.iam — Parse Native Format" style="background:rgba(255,140,0,0.12);border:1px solid rgba(255,140,0,0.3);">
-          <span class="toolbar-icon">🏭</span>
-          <span class="toolbar-label">Inventor</span>
-        </button>
+        <button class="toolbar-button" id="tool-assembly" title="Assembly" style="background:rgba(139,92,246,0.1);border:1px solid rgba(139,92,246,0.3);"><span class="toolbar-icon">⚙</span><span class="toolbar-label">Assembly</span></button>
+        <button class="toolbar-button" id="tool-explode" title="Explode"><span class="toolbar-icon">⊙</span></button>
       </div>
 
-      <!-- Token Balance Indicator -->
-      <div class="toolbar-group">
-        <button class="toolbar-button" id="btn-token-balance" title="View Token Balance & Billing" style="background: linear-gradient(135deg, rgba(88,166,255,0.1), rgba(63,185,80,0.1)); border: 1px solid rgba(88,166,255,0.3);" onclick="document.querySelector('[data-tab=tokens]')?.click()">
-          <span class="toolbar-icon">💰</span>
-          <span class="toolbar-label" id="token-balance-label">1K Tokens</span>
-        </button>
+      <!-- Import dropdown -->
+      <div class="toolbar-dropdown">
+        <button class="toolbar-dropdown-btn" title="Import">📂 Import <span class="caret">▼</span></button>
+        <div class="toolbar-dropdown-menu">
+          <button id="btn-reverse-engineer">🔍 Reverse Engineer</button>
+          <button id="btn-inventor-import">🏭 Inventor Import</button>
+        </div>
       </div>
 
-      <!-- AI & Analysis -->
-      <div class="toolbar-group">
-        <button class="toolbar-button" id="btn-ai-copilot" title="AI Copilot — Text-to-CAD, Voice Commands" style="background:rgba(139,92,246,0.1);border:1px solid rgba(139,92,246,0.3);">
-          <span class="toolbar-icon">✨</span>
-          <span class="toolbar-label">Copilot</span>
-        </button>
-        <button class="toolbar-button" id="btn-dfm" title="DFM Analyzer — Manufacturability Check" style="background:rgba(248,113,113,0.1);border:1px solid rgba(248,113,113,0.3);">
-          <span class="toolbar-icon">🏭</span>
-          <span class="toolbar-label">DFM</span>
-        </button>
-        <button class="toolbar-button" id="btn-materials" title="Material Library — 40+ PBR Materials" style="background:rgba(34,211,238,0.1);border:1px solid rgba(34,211,238,0.3);">
-          <span class="toolbar-icon">🎨</span>
-          <span class="toolbar-label">Materials</span>
-        </button>
-        <button class="toolbar-button" id="btn-cam" title="CAM Pipeline — Slicer, Toolpath, G-code" style="background:rgba(251,191,36,0.1);border:1px solid rgba(251,191,36,0.3);">
-          <span class="toolbar-icon">⚙</span>
-          <span class="toolbar-label">CAM</span>
-        </button>
-        <button class="toolbar-button" id="btn-fabs" title="Connected Fabs — Send to Fabrication" style="background:rgba(74,222,128,0.1);border:1px solid rgba(74,222,128,0.3);">
-          <span class="toolbar-icon">🏗</span>
-          <span class="toolbar-label">Fabs</span>
-        </button>
-        <button class="toolbar-button" id="btn-collab" title="Collaboration — Multi-User Sessions" style="background:rgba(96,165,250,0.1);border:1px solid rgba(96,165,250,0.3);">
-          <span class="toolbar-icon">👥</span>
-          <span class="toolbar-label">Collab</span>
-        </button>
-      </div>
-      <!-- CadXStudio-Killer Features -->
-      <div class="toolbar-group">
-        <button class="toolbar-button" id="btn-text2cad" title="Text-to-CAD — Natural Language 3D Modeling" style="background:rgba(168,85,247,0.1);border:1px solid rgba(168,85,247,0.3);">
-          <span class="toolbar-icon">💬</span>
-          <span class="toolbar-label">Text2CAD</span>
-        </button>
-        <button class="toolbar-button" id="btn-camops" title="CAM Operations — Outline, Rough, Pocket, Drill" style="background:rgba(234,179,8,0.1);border:1px solid rgba(234,179,8,0.3);">
-          <span class="toolbar-icon">🔧</span>
-          <span class="toolbar-label">CAM Ops</span>
-        </button>
-        <button class="toolbar-button" id="btn-gcode" title="G-Code Generator — CNC, FDM, Laser" style="background:rgba(16,185,129,0.1);border:1px solid rgba(16,185,129,0.3);">
-          <span class="toolbar-icon">📄</span>
-          <span class="toolbar-label">G-Code</span>
-        </button>
-        <button class="toolbar-button" id="btn-machines" title="Machine Profiles — 15+ CNC/FDM/Laser Presets" style="background:rgba(107,114,128,0.1);border:1px solid rgba(107,114,128,0.3);">
-          <span class="toolbar-icon">🖥</span>
-          <span class="toolbar-label">Machines</span>
-        </button>
-        <button class="toolbar-button" id="btn-tools" title="Tool Library — 30+ End Mills, Drills, V-Bits" style="background:rgba(239,68,68,0.1);border:1px solid rgba(239,68,68,0.3);">
-          <span class="toolbar-icon">🔩</span>
-          <span class="toolbar-label">Tools</span>
-        </button>
-        <button class="toolbar-button" id="btn-stock" title="Stock Manager — Workpiece Definition" style="background:rgba(245,158,11,0.1);border:1px solid rgba(245,158,11,0.3);">
-          <span class="toolbar-icon">📦</span>
-          <span class="toolbar-label">Stock</span>
-        </button>
-        <button class="toolbar-button" id="btn-sketch-enhance" title="Sketch Tools+ — Spline, Polygon, Text, Trim, Offset" style="background:rgba(59,130,246,0.1);border:1px solid rgba(59,130,246,0.3);">
-          <span class="toolbar-icon">✏</span>
-          <span class="toolbar-label">Sketch+</span>
-        </button>
-        <button class="toolbar-button" id="btn-section" title="Section View — Cut Planes (X)" style="background:rgba(220,38,38,0.1);border:1px solid rgba(220,38,38,0.3);">
-          <span class="toolbar-icon">🔪</span>
-          <span class="toolbar-label">Section</span>
-        </button>
+      <!-- AI & Tools dropdown -->
+      <div class="toolbar-dropdown">
+        <button class="toolbar-dropdown-btn" title="AI & Tools" style="color:rgba(168,85,247,0.9);">✨ AI <span class="caret">▼</span></button>
+        <div class="toolbar-dropdown-menu">
+          <button id="btn-ai-copilot">✨ Copilot</button>
+          <button id="btn-text2cad">💬 Text2CAD</button>
+          <button id="btn-dfm">🏭 DFM Check</button>
+          <button id="btn-materials">🎨 Materials</button>
+          <button id="btn-generative">🧬 Generative</button>
+          <button id="btn-agent-panel">🤖 Agent API</button>
+        </div>
       </div>
 
-      <!-- Marketplace V2 + GD&T + MISUMI + VR -->
-      <div class="toolbar-group">
-        <button class="toolbar-button" id="btn-marketplace-v2" title="Model Marketplace (GrabCAD-style)" style="background:rgba(63,185,80,0.1);border:1px solid rgba(63,185,80,0.3);">
-          <span class="toolbar-icon">🏪</span>
-          <span class="toolbar-label">Market</span>
-        </button>
-        <button class="toolbar-button" id="btn-gdt" title="GD&T Training & Reference" style="background:rgba(210,153,34,0.1);border:1px solid rgba(210,153,34,0.3);">
-          <span class="toolbar-icon">📐</span>
-          <span class="toolbar-label">GD&T</span>
-        </button>
-        <button class="toolbar-button" id="btn-misumi" title="MISUMI Component Catalog" style="background:rgba(239,68,68,0.1);border:1px solid rgba(239,68,68,0.3);">
-          <span class="toolbar-icon">🔩</span>
-          <span class="toolbar-label">MISUMI</span>
-        </button>
-        <button class="toolbar-button" id="btn-vr" title="CAD2VR — View in Virtual Reality" style="background:rgba(168,85,247,0.1);border:1px solid rgba(168,85,247,0.3);">
-          <span class="toolbar-icon">🥽</span>
-          <span class="toolbar-label">VR</span>
-        </button>
-        <button class="toolbar-button" id="btn-generative" title="Generative Design — Topology Optimization" style="background:rgba(16,185,129,0.1);border:1px solid rgba(16,185,129,0.3);">
-          <span class="toolbar-icon">🧬</span>
-          <span class="toolbar-label">GenDes</span>
-        </button>
+      <!-- CAM dropdown -->
+      <div class="toolbar-dropdown">
+        <button class="toolbar-dropdown-btn" title="CAM & Manufacturing">⚙ CAM <span class="caret">▼</span></button>
+        <div class="toolbar-dropdown-menu">
+          <button id="btn-cam">⚙ CAM Pipeline</button>
+          <button id="btn-camops">🔧 CAM Ops</button>
+          <button id="btn-gcode">📄 G-Code</button>
+          <button id="btn-machines">🖥 Machines</button>
+          <button id="btn-tools">🔩 Tools</button>
+          <button id="btn-stock">📦 Stock</button>
+          <button id="btn-fabs">🏗 Fabs</button>
+        </div>
       </div>
 
-      <!-- Agent API Panel -->
-      <div class="toolbar-group">
-        <button class="toolbar-button" id="btn-agent-panel" title="Agent Command Panel (Test API)">
-          <span class="toolbar-icon">🤖</span>
-          <span class="toolbar-label">Agent</span>
-        </button>
+      <!-- Reference dropdown -->
+      <div class="toolbar-dropdown">
+        <button class="toolbar-dropdown-btn" title="Reference & Catalog">📚 Ref <span class="caret">▼</span></button>
+        <div class="toolbar-dropdown-menu">
+          <button id="btn-marketplace-v2">🏪 Marketplace</button>
+          <button id="btn-gdt">📐 GD&T Training</button>
+          <button id="btn-misumi">🔩 MISUMI Catalog</button>
+          <button id="btn-vr">🥽 VR Mode</button>
+          <button id="btn-collab">👥 Collaboration</button>
+        </div>
       </div>
 
-      <!-- Help & Tutorials -->
+      <!-- Undo/Redo -->
       <div class="toolbar-group">
-        <button class="toolbar-button" id="btn-help" title="Help & Tutorials (?)" style="background:rgba(88,166,255,0.1);border:1px solid rgba(88,166,255,0.3);">
-          <span class="toolbar-icon">?</span>
-          <span class="toolbar-label">Help</span>
-        </button>
+        <button class="toolbar-button" id="btn-undo" title="Undo (Ctrl+Z)"><span class="toolbar-icon">↶</span></button>
+        <button class="toolbar-button" id="btn-redo" title="Redo (Ctrl+Y)"><span class="toolbar-icon">↷</span></button>
       </div>
 
-      <!-- Hard Reset -->
-      <div class="toolbar-group">
-        <button class="toolbar-button" id="btn-hard-reset" title="Clear cache and reload" style="color:#f55;">
-          <span class="toolbar-icon">🔄</span>
-          <span class="toolbar-label">Reset</span>
-        </button>
-      </div>
+      <!-- Token balance -->
+      <button class="toolbar-button" id="btn-token-balance" title="Tokens" onclick="document.querySelector('[data-tab=tokens]')?.click()" style="background:linear-gradient(135deg,rgba(88,166,255,0.1),rgba(63,185,80,0.1));border:1px solid rgba(88,166,255,0.3);">
+        <span class="toolbar-icon">💰</span><span class="toolbar-label" id="token-balance-label">1K</span>
+      </button>
 
-      <!-- Edit Operations -->
-      <div class="toolbar-group">
-        <button class="toolbar-button" id="btn-undo" title="Undo (Ctrl+Z)">
-          <span class="toolbar-icon">↶</span>
-        </button>
-        <button class="toolbar-button" id="btn-redo" title="Redo (Ctrl+Y)">
-          <span class="toolbar-icon">↷</span>
-        </button>
+      <!-- Right-side: Theme + Help + Reset -->
+      <div style="margin-left:auto;display:flex;gap:2px;">
+        <button class="toolbar-button" id="btn-theme-toggle" title="Toggle Light/Dark Mode" style="background:rgba(255,200,50,0.12);border:1px solid rgba(255,200,50,0.3);"><span class="toolbar-icon" id="theme-icon">☀</span></button>
+        <button class="toolbar-button" id="btn-help" title="Help (?)" style="background:rgba(88,166,255,0.1);"><span class="toolbar-icon">?</span></button>
+        <button class="toolbar-button" id="btn-hard-reset" title="Clear cache & reload" style="color:#f55;"><span class="toolbar-icon">🔄</span></button>
       </div>
+    </div><!-- end toolbar -->
 
-      <!-- View Buttons -->
-      <div class="toolbar-group">
-        <button class="toolbar-button" id="view-front" title="Front View (V+F)">
+    <!-- Hidden: View buttons used by keyboard shortcuts only -->
+    <div style="display:none;">
+      <button id="view-front" title="Front View (V+F)">
           <span class="toolbar-label">Front</span>
         </button>
         <button class="toolbar-button" id="view-top" title="Top View (V+T)">
@@ -1616,9 +1590,7 @@
         <button class="toolbar-button" id="view-fit" title="Fit All (V)">
           <span class="toolbar-label">Fit</span>
         </button>
-      </div>
-
-    </div>
+    </div><!-- end hidden view buttons -->
 
     <!-- Main Content Area -->
     <div id="content">
@@ -1637,10 +1609,16 @@
           <div id="inline-project-browser">
             <!-- Inline project browser tree (populated when DUO manifest loads) -->
             <div class="ipb-search-box">
-              <input type="text" id="ipb-search" placeholder="Search 473 parts..." style="width:100%;padding:6px 8px;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:3px;color:var(--text-primary);font-size:11px;">
+              <input type="text" id="ipb-search" placeholder="Search parts..." style="width:100%;padding:6px 8px;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:3px;color:var(--text-primary);font-size:11px;">
             </div>
             <div id="ipb-stats" style="display:flex;gap:8px;padding:4px 8px;font-size:10px;color:var(--text-secondary);border-bottom:1px solid var(--border-color);"></div>
-            <div id="ipb-tree" style="flex:1;overflow-y:auto;padding:4px 0;min-height:0;"></div>
+            <div id="ipb-tree" style="flex:1;overflow-y:auto;padding:4px 0;min-height:0;">
+              <div id="ipb-empty" style="text-align:center;padding:20px 12px;">
+                <div style="font-size:32px;margin-bottom:8px;opacity:0.5;">&#x1F4C2;</div>
+                <p style="font-size:12px;font-weight:600;margin-bottom:6px;color:var(--text-primary);">No project loaded</p>
+                <p style="font-size:11px;color:var(--text-secondary);line-height:1.5;">Use <b>Import &gt; Open Inventor Project</b> to load a project folder, or import STEP/STL files.</p>
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -1659,6 +1637,18 @@
           <div class="snap-indicator" id="snap-indicator">Snap: Grid</div>
         </div>
 
+        <!-- ViewCube Navigation -->
+        <div id="viewcube" style="position:absolute;top:12px;right:12px;width:80px;height:80px;z-index:50;perspective:200px;cursor:pointer;">
+          <div id="vc-cube" style="width:80px;height:80px;position:relative;transform-style:preserve-3d;transform:rotateX(-25deg) rotateY(-35deg);transition:transform 0.3s ease;">
+            <div class="vc-face vc-front"  data-vc="front"  style="transform:translateZ(40px);">Front</div>
+            <div class="vc-face vc-back"   data-vc="back"   style="transform:rotateY(180deg) translateZ(40px);">Back</div>
+            <div class="vc-face vc-right"  data-vc="right"  style="transform:rotateY(90deg) translateZ(40px);">Right</div>
+            <div class="vc-face vc-left"   data-vc="left"   style="transform:rotateY(-90deg) translateZ(40px);">Left</div>
+            <div class="vc-face vc-top"    data-vc="top"    style="transform:rotateX(90deg) translateZ(40px);">Top</div>
+            <div class="vc-face vc-bottom" data-vc="bottom" style="transform:rotateX(-90deg) translateZ(40px);">Btm</div>
+          </div>
+        </div>
+
         <!-- Sketch Canvas Overlay -->
         <canvas id="sketch-canvas-overlay"></canvas>
 
@@ -1769,25 +1759,26 @@
   <!-- Module Loader -->
   <script type="module">
     import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.170.0/build/three.module.js';
-    import { initViewport, setView, addToScene, removeFromScene, getScene, getCamera, getControls, toggleGrid as vpToggleGrid, fitToObject } from './js/viewport.js';
-    import { startSketch, endSketch, setTool, getEntities, clearSketch } from './js/sketch.js';
-    import { extrudeProfile, createPrimitive, rebuildFeature, createMaterial } from './js/operations.js';
-    import { initChat, parseCADPrompt, addMessage } from './js/ai-chat.js';
-    import { initTree, addFeature, selectFeature, onSelect } from './js/tree.js';
-    import { initParams, showParams, onParamChange } from './js/params.js';
-    import { exportSTL, exportOBJ, exportJSON } from './js/export.js';
-    import { initShortcuts } from './js/shortcuts.js';
-    import { createReverseEngineerPanel, importFile, analyzeGeometry, reconstructFeatureTree, createWalkthrough } from './js/reverse-engineer.js';
-    import { createInventorPanel, parseInventorFile } from './js/inventor-parser.js';
-    import { loadProject, showFolderPicker, parseIPJ } from './js/project-loader.js';
-    import { initProjectBrowser, showBrowser, hideBrowser, setProject, onFileSelect } from './js/project-browser.js';
-    import { generateGuide, renderGuide, exportGuideHTML } from './js/rebuild-guide.js';
-    import { solveConstraints, addConstraint, removeConstraint, autoDetectConstraints, isFullyConstrained, getAllConstraints, clearAllConstraints } from './js/constraint-solver.js';
-    import { createSweep, createLoft, createBend, createFlange, createTab, createSlot, unfoldSheetMetal, createSpring, createThread } from './js/advanced-ops.js';
-    import Assembly from './js/assembly.js';
-    import { exportSketchToDXF, exportProjectionToDXF, exportMultiViewDXF, export3DDXF, downloadDXF } from './js/dxf-export.js';
-    import { initAgentAPI } from './js/agent-api.js';
-    import { initTokenDashboard } from './js/token-dashboard.js';
+    const _v = '50';
+    import { initViewport, setView, addToScene, removeFromScene, getScene, getCamera, getControls, toggleGrid as vpToggleGrid, fitToObject, fitAll } from './js/viewport.js?v=62';
+    import { startSketch, endSketch, setTool, getEntities, clearSketch } from './js/sketch.js?v=62';
+    import { extrudeProfile, createPrimitive, rebuildFeature, createMaterial } from './js/operations.js?v=62';
+    import { initChat, parseCADPrompt, addMessage } from './js/ai-chat.js?v=62';
+    import { initTree, addFeature, selectFeature, onSelect } from './js/tree.js?v=62';
+    import { initParams, showParams, onParamChange } from './js/params.js?v=62';
+    import { exportSTL, exportOBJ, exportJSON } from './js/export.js?v=62';
+    import { initShortcuts } from './js/shortcuts.js?v=62';
+    import { createReverseEngineerPanel, importFile, analyzeGeometry, reconstructFeatureTree, createWalkthrough } from './js/reverse-engineer.js?v=62';
+    import { createInventorPanel, parseInventorFile } from './js/inventor-parser.js?v=62';
+    import { loadProject, showFolderPicker, parseIPJ } from './js/project-loader.js?v=62';
+    import { initProjectBrowser, showBrowser, hideBrowser, setProject, onFileSelect } from './js/project-browser.js?v=62';
+    import { generateGuide, renderGuide, exportGuideHTML } from './js/rebuild-guide.js?v=62';
+    import { solveConstraints, addConstraint, removeConstraint, autoDetectConstraints, isFullyConstrained, getAllConstraints, clearAllConstraints } from './js/constraint-solver.js?v=62';
+    import { createSweep, createLoft, createBend, createFlange, createTab, createSlot, unfoldSheetMetal, createSpring, createThread } from './js/advanced-ops.js?v=62';
+    import Assembly from './js/assembly.js?v=62';
+    import { exportSketchToDXF, exportProjectionToDXF, exportMultiViewDXF, export3DDXF, downloadDXF } from './js/dxf-export.js?v=62';
+    import { initAgentAPI } from './js/agent-api.js?v=62';
+    import { initTokenDashboard } from './js/token-dashboard.js?v=62';
 
     // ========== Application State ==========
     const APP = {
@@ -1803,101 +1794,108 @@
 
     // ========== Initialization ==========
     async function init() {
+      const errors = [];
+      function tryStep(name, fn) {
+        try { fn(); } catch(e) { console.warn('[init] ' + name + ' failed:', e.message); errors.push(name + ': ' + e.message); }
+      }
+      async function tryStepAsync(name, fn) {
+        try { await fn(); } catch(e) { console.warn('[init] ' + name + ' failed:', e.message); errors.push(name + ': ' + e.message); }
+      }
       try {
         console.log('Initializing cycleCAD...');
 
         // 1. Initialize 3D viewport
-        initViewport('viewport-container');
-        document.getElementById('kernel-status').classList.add('ready');
-        document.getElementById('kernel-status-text').textContent = 'Ready';
+        tryStep('viewport', () => {
+          initViewport('viewport-container');
+          document.getElementById('kernel-status').classList.add('ready');
+          document.getElementById('kernel-status-text').textContent = 'Ready';
+        });
 
         // 1b. Initialize assembly workspace
-        APP.assembly = new Assembly(getScene());
+        tryStep('assembly', () => { APP.assembly = new Assembly(getScene()); });
 
         // 2. Initialize feature tree
-        const treeContainer = document.getElementById('feature-tree');
-        if (treeContainer) initTree(treeContainer);
+        tryStep('tree', () => {
+          const treeContainer = document.getElementById('feature-tree');
+          if (treeContainer) initTree(treeContainer);
+        });
 
         // 3. Initialize properties panel
-        const propsContainer = document.getElementById('tab-properties');
-        if (propsContainer) initParams(propsContainer);
+        tryStep('params', () => {
+          const propsContainer = document.getElementById('tab-properties');
+          if (propsContainer) initParams(propsContainer);
+        });
 
         // 4. Initialize AI chat
-        const chatTab = document.getElementById('tab-chat');
-        if (chatTab) {
-          // Create chat UI structure
-          chatTab.innerHTML = `
-            <div id="chat-messages" style="flex:1;overflow-y:auto;padding:8px;display:flex;flex-direction:column;gap:6px;min-height:0;"></div>
-            <div style="display:flex;gap:4px;padding:8px;border-top:1px solid var(--border-color);">
-              <input id="chat-input" type="text" placeholder="Describe a part..." style="flex:1;padding:6px 10px;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:4px;color:var(--text-primary);font-size:12px;">
-              <button id="chat-send" style="padding:6px 12px;background:var(--accent-blue);color:#fff;border-radius:4px;font-size:12px;">Send</button>
-            </div>
-          `;
-          chatTab.style.display = 'none';
-          chatTab.style.flexDirection = 'column';
-          chatTab.style.height = '100%';
-
-          initChat(
-            document.getElementById('chat-messages'),
-            document.getElementById('chat-input'),
-            document.getElementById('chat-send'),
-            (cmd) => executeParsedPrompt(cmd)
-          );
-        }
+        tryStep('chat', () => {
+          const chatTab = document.getElementById('tab-chat');
+          if (chatTab) {
+            chatTab.innerHTML = `
+              <div id="chat-messages" style="flex:1;overflow-y:auto;padding:8px;display:flex;flex-direction:column;gap:6px;min-height:0;"></div>
+              <div style="display:flex;gap:4px;padding:8px;border-top:1px solid var(--border-color);">
+                <input id="chat-input" type="text" placeholder="Describe a part..." style="flex:1;padding:6px 10px;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:4px;color:var(--text-primary);font-size:12px;">
+                <button id="chat-send" style="padding:6px 12px;background:var(--accent-blue);color:#fff;border-radius:4px;font-size:12px;">Send</button>
+              </div>
+            `;
+            chatTab.style.display = 'none';
+            chatTab.style.flexDirection = 'column';
+            chatTab.style.height = '100%';
+            initChat(
+              document.getElementById('chat-messages'),
+              document.getElementById('chat-input'),
+              document.getElementById('chat-send'),
+              (cmd) => executeParsedPrompt(cmd)
+            );
+          }
+        });
 
         // 4b. Initialize Token Dashboard
-        const tokenTab = document.getElementById('tab-tokens');
-        if (tokenTab) {
-          const tokenDashboard = initTokenDashboard();
-          tokenTab.innerHTML = tokenDashboard.html;
-          tokenTab.style.display = 'none';
-          tokenTab.style.overflowY = 'auto';
-          // Initialize the dashboard events
-          tokenDashboard.init();
-
-          // Update toolbar balance indicator
-          function updateTokenBalanceLabel() {
-            const balance = window.cycleCAD?.tokens?.getBalance?.() || 0;
-            const label = document.getElementById('token-balance-label');
-            if (label) {
-              if (balance >= 1000) {
-                label.textContent = Math.floor(balance / 1000) + 'K Tokens';
-              } else {
-                label.textContent = balance + ' Tokens';
+        tryStep('tokenDashboard', () => {
+          const tokenTab = document.getElementById('tab-tokens');
+          if (tokenTab) {
+            const tokenDashboard = initTokenDashboard();
+            tokenTab.innerHTML = tokenDashboard.html;
+            tokenTab.style.display = 'none';
+            tokenTab.style.overflowY = 'auto';
+            tokenDashboard.init();
+            function updateTokenBalanceLabel() {
+              const balance = window.cycleCAD?.tokens?.getBalance?.() || 0;
+              const label = document.getElementById('token-balance-label');
+              if (label) {
+                label.textContent = balance >= 1000 ? Math.floor(balance / 1000) + 'K Tokens' : balance + ' Tokens';
               }
             }
+            updateTokenBalanceLabel();
+            if (window.cycleCAD?.tokens?.on) {
+              window.cycleCAD.tokens.on('token-spent', updateTokenBalanceLabel);
+              window.cycleCAD.tokens.on('token-added', updateTokenBalanceLabel);
+              window.cycleCAD.tokens.on('month-reset', updateTokenBalanceLabel);
+            }
           }
-          updateTokenBalanceLabel();
-
-          // Update label when tokens change
-          if (window.cycleCAD?.tokens?.on) {
-            window.cycleCAD.tokens.on('token-spent', updateTokenBalanceLabel);
-            window.cycleCAD.tokens.on('token-added', updateTokenBalanceLabel);
-            window.cycleCAD.tokens.on('month-reset', updateTokenBalanceLabel);
-          }
-        }
+        });
 
         // 5. Wire up toolbar buttons
-        setupToolbar();
+        tryStep('toolbar', () => setupToolbar());
 
         // 6. Wire up tab switching
-        setupTabs();
+        tryStep('tabs', () => setupTabs());
 
         // 7. Wire up tree selection → params
-        onSelect((featureId) => {
-          APP.selectedFeature = APP.features.find(f => f.id === featureId);
-          if (APP.selectedFeature) showParams(APP.selectedFeature);
-        });
-
-        onParamChange((paramName, value) => {
-          if (APP.selectedFeature) {
-            APP.selectedFeature.params[paramName] = value;
-            rebuildFeature(APP.selectedFeature);
-          }
+        tryStep('treeSelection', () => {
+          onSelect((featureId) => {
+            APP.selectedFeature = APP.features.find(f => f.id === featureId);
+            if (APP.selectedFeature) showParams(APP.selectedFeature);
+          });
+          onParamChange((paramName, value) => {
+            if (APP.selectedFeature) {
+              APP.selectedFeature.params[paramName] = value;
+              rebuildFeature(APP.selectedFeature);
+            }
+          });
         });
 
         // 8. Initialize keyboard shortcuts
-        initShortcuts({
+        tryStep('shortcuts', () => initShortcuts({
           newSketch: () => startNewSketch(),
           line: () => setTool('line'),
           rect: () => setTool('rect'),
@@ -1917,20 +1915,15 @@
           viewBottom: () => setView('bottom'),
           viewIso: () => setView('iso'),
           toggleGrid: () => vpToggleGrid(),
-          fitAll: () => fitAll(),
+          fitAll: () => fitAllFeatures(),
           save: () => saveProject(),
           exportSTL: () => doExportSTL(),
-        });
+        }));
 
-        // 9. Setup welcome splash
-        setupWelcome();
-
-        // 9b. Setup left panel tabs and inline browser
-        setupLeftTabs();
-        setupInlineBrowserClicks();
+        // 9. Welcome splash + tabs now run AFTER try/catch (always execute)
 
         // 10. Initialize project browser
-        initProjectBrowser(document.body, {
+        tryStep('projectBrowser', () => initProjectBrowser(document.body, {
           onFileOpen: async (file) => {
             try {
               const buffer = file.buffer || await file.arrayBuffer();
@@ -1962,31 +1955,31 @@
             APP.project = project;
             updateStatus(`Project loaded: ${project.stats.parts} parts, ${project.stats.assemblies} assemblies`);
           }
-        });
-
-        // 11. Hard Refresh button — nukes all caches, service workers, and reloads
-        const hardRefreshBtn = document.getElementById('btn-hard-refresh');
-        if (hardRefreshBtn) hardRefreshBtn.addEventListener('click', async () => {
-          hardRefreshBtn.textContent = 'Clearing...';
-          hardRefreshBtn.style.opacity = '0.6';
-          // Kill service workers
-          if ('serviceWorker' in navigator) {
-            const regs = await navigator.serviceWorker.getRegistrations();
-            for (const r of regs) await r.unregister();
-          }
-          // Kill Cache API caches
-          if ('caches' in window) {
-            const names = await caches.keys();
-            for (const n of names) await caches.delete(n);
-          }
-          // Reload with timestamp cache bust
-          const url = new URL(window.location.href);
-          url.searchParams.set('v', Date.now());
-          window.location.replace(url.toString());
+        }));
+
+        // 11. Hard Refresh button
+        tryStep('hardRefresh', () => {
+          const hardRefreshBtn = document.getElementById('btn-hard-refresh');
+          if (hardRefreshBtn) hardRefreshBtn.addEventListener('click', async () => {
+            hardRefreshBtn.textContent = 'Clearing...';
+            hardRefreshBtn.style.opacity = '0.6';
+            if ('serviceWorker' in navigator) {
+              const regs = await navigator.serviceWorker.getRegistrations();
+              for (const r of regs) await r.unregister();
+            }
+            if ('caches' in window) {
+              const names = await caches.keys();
+              for (const n of names) await caches.delete(n);
+            }
+            const url = new URL(window.location.href);
+            url.searchParams.set('v', Date.now());
+            window.location.replace(url.toString());
+          });
         });
 
         // Initialize Agent API — the primary interface
-        const agentImports = await import('./js/agent-api.js');
+        await tryStepAsync('agentAPI', async () => {
+        const agentImports = await import('./js/agent-api.js?v=62');
         const agentSession = initAgentAPI({
           viewport: {
             getCamera,
@@ -2052,41 +2045,57 @@
         console.log(`[Agent API] Ready. Session: ${agentSession.sessionId}`);
         console.log('[Agent API] Usage: window.cycleCAD.execute({ method: "meta.ping" })');
         console.log('[Agent API] Schema: window.cycleCAD.getSchema()');
+        }); // end agentAPI tryStepAsync
 
         // Initialize new architecture modules
-        if (window.cycleCAD?.materials?.init) {
-          window.cycleCAD.materials.init();
-          console.log('[Materials] Library initialized — ' + (window.cycleCAD.materials.getAll?.()?.length || '40+') + ' materials');
-        }
-        if (window.cycleCAD?.dfm?.init) {
-          window.cycleCAD.dfm.init();
-          console.log('[DFM] Analyzer initialized — 8 manufacturing processes');
-        }
-        if (window.cycleCAD?.cam?.init) {
-          window.cycleCAD.cam.init();
-          console.log('[CAM] Pipeline initialized — slicer, toolpath, G-code');
-        }
-        if (window.cycleCAD?.fabs?.init) {
-          window.cycleCAD.fabs.init();
-          console.log('[Fabs] Connected fabrication network initialized');
-        }
-        if (window.cycleCAD?.copilot?.init) {
-          window.cycleCAD.copilot.init();
-          console.log('[AI Copilot] Initialized — text-to-CAD, voice commands');
-        }
-        if (window.cycleCAD?.collab?.init) {
-          window.cycleCAD.collab.init();
-          console.log('[Collaboration] Session management initialized');
-        }
+        tryStep('archModules', () => {
+          if (window.cycleCAD?.materials?.init) window.cycleCAD.materials.init();
+          if (window.cycleCAD?.dfm?.init) window.cycleCAD.dfm.init();
+          if (window.cycleCAD?.cam?.init) window.cycleCAD.cam.init();
+          if (window.cycleCAD?.fabs?.init) window.cycleCAD.fabs.init();
+          if (window.cycleCAD?.copilot?.init) window.cycleCAD.copilot.init();
+          if (window.cycleCAD?.collab?.init) window.cycleCAD.collab.init();
+        });
 
-        console.log('cycleCAD initialized successfully — all modules loaded');
-        updateStatus('Ready');
+        // Report results
+        if (errors.length > 0) {
+          console.warn('[init] Completed with errors:', errors);
+          updateStatus('Ready (some modules failed — see console)');
+        } else {
+          console.log('cycleCAD initialized successfully — all modules loaded');
+          updateStatus('Ready');
+        }
 
       } catch (error) {
         console.error('Failed to initialize cycleCAD:', error);
         document.getElementById('kernel-status').classList.add('error');
         document.getElementById('kernel-status-text').textContent = 'Error';
       }
+
+      // ALWAYS run splash + toolbar setup even if init partially fails
+      try { setupWelcome(); } catch(e) { console.warn('setupWelcome error:', e); }
+      try { setupLeftTabs(); } catch(e) { console.warn('setupLeftTabs error:', e); }
+      try { setupInlineBrowserClicks(); } catch(e) { console.warn('setupInlineBrowserClicks error:', e); }
+
+      // Auto-load DUO manifest into Project Browser (non-blocking)
+      try {
+        fetch('duo-manifest.json').then(resp => {
+          if (!resp.ok) return;
+          return resp.json();
+        }).then(manifest => {
+          if (!manifest) return;
+          function transformTree(node) {
+            if (node.type === 'file' && node.ext) node.type = node.ext.replace('.', '');
+            if (node.children) node.children.forEach(transformTree);
+            return node;
+          }
+          transformTree(manifest.tree);
+          APP.project = manifest;
+          try { setProject(manifest.tree); } catch(e) {}
+          try { populateInlineBrowser(manifest.tree); } catch(e) {}
+          console.log('[init] DUO manifest auto-loaded:', manifest.stats?.total || 0, 'files');
+        }).catch(() => { /* manifest not available, ok */ });
+      } catch(e) {}
     }
 
     // ========== Left Panel Tab Switching ==========
@@ -2356,7 +2365,7 @@
       bind('view-top', () => setView('top'));
       bind('view-right', () => setView('right'));
       bind('view-iso', () => setView('iso'));
-      bind('view-fit', () => fitAll());
+      bind('view-fit', () => fitAllFeatures());
 
       // Reverse Engineer
       bind('btn-reverse-engineer', () => {
@@ -2408,6 +2417,8 @@
       });
 
       // Advanced Operations
+      bind('tool-shell', () => openDialog('shell'));
+      bind('tool-pattern', () => openDialog('pattern'));
       bind('tool-sweep', () => openDialog('sweep'));
       bind('tool-loft', () => openDialog('loft'));
       bind('tool-spring', () => {
@@ -2480,6 +2491,57 @@
           updateStatus('Assembly collapsed');
         }
       });
+
+      // ===== Pointer / Select tool =====
+      bind('tool-pointer', () => {
+        // Exit sketch mode if active
+        if (APP.mode === 'sketch') {
+          try { endSketch(); } catch(e) {}
+          APP.currentSketch = null;
+          APP.mode = 'idle';
+          document.getElementById('mode-indicator').textContent = 'Ready';
+          document.getElementById('mode-value').textContent = 'Normal';
+        }
+        // Deactivate all tool buttons
+        document.querySelectorAll('.toolbar-button.active').forEach(b => b.classList.remove('active'));
+        document.getElementById('tool-pointer').classList.add('active');
+        updateStatus('Select mode');
+      });
+
+      // ===== Dropdown menu positioning (fixed position) =====
+      document.querySelectorAll('.toolbar-dropdown').forEach(dd => {
+        const btn = dd.querySelector('.toolbar-dropdown-btn');
+        const menu = dd.querySelector('.toolbar-dropdown-menu');
+        if (!btn || !menu) return;
+
+        btn.addEventListener('click', (e) => {
+          e.stopPropagation();
+          const wasOpen = dd.classList.contains('open');
+          // Close all other dropdowns
+          document.querySelectorAll('.toolbar-dropdown.open').forEach(d => d.classList.remove('open'));
+          if (!wasOpen) {
+            dd.classList.add('open');
+            // Position menu below button using fixed coordinates
+            const rect = btn.getBoundingClientRect();
+            menu.style.top = (rect.bottom + 2) + 'px';
+            menu.style.left = rect.left + 'px';
+          }
+        });
+
+        // Close dropdown when clicking a menu item
+        menu.querySelectorAll('button').forEach(item => {
+          item.addEventListener('click', () => {
+            dd.classList.remove('open');
+          });
+        });
+      });
+
+      // Close dropdowns when clicking outside
+      document.addEventListener('click', (e) => {
+        if (!e.target.closest('.toolbar-dropdown')) {
+          document.querySelectorAll('.toolbar-dropdown.open').forEach(d => d.classList.remove('open'));
+        }
+      });
     }
 
     // ========== Tab Switching ==========
@@ -2642,6 +2704,49 @@
       document.getElementById('mode-value').textContent = 'Sketch';
     }
 
+    // Simple CSG subtract using geometry clipping approach
+    function csgSubtract(baseMesh, cutMesh) {
+      // Use Three.js CSG via manual approach:
+      // 1. Get both geometries in world space
+      // 2. Use Evaluator from three-bvh-csg if available
+      // 3. Fallback: visual-only cut (hide intersecting faces)
+
+      // Try the simple approach: subtract by creating a new geometry
+      // that removes the intersection volume
+      try {
+        const baseGeo = baseMesh.geometry.clone();
+        const cutGeo = cutMesh.geometry.clone();
+
+        // Apply world transforms
+        baseGeo.applyMatrix4(baseMesh.matrixWorld);
+        cutGeo.applyMatrix4(cutMesh.matrixWorld);
+
+        // Use clipping planes to simulate the cut visually
+        // Create 6 clipping planes from the cut geometry bounding box
+        const cutBox = new THREE.Box3().setFromBufferAttribute(cutGeo.getAttribute('position'));
+
+        // For a proper visual cut, we'll use stencil buffer technique:
+        // Make the cut area appear as a hole by rendering the cut mesh
+        // with colorWrite=false to write to the depth buffer only
+        const depthMat = new THREE.MeshBasicMaterial({
+          colorWrite: false,
+          depthWrite: true,
+          side: THREE.DoubleSide
+        });
+        cutMesh.material = depthMat;
+        cutMesh.renderOrder = -1;
+
+        // Make the base mesh render after, so the depth test creates a "hole"
+        baseMesh.material.side = THREE.FrontSide;
+        baseMesh.renderOrder = 0;
+
+        return { base: baseMesh, cut: cutMesh, method: 'depth' };
+      } catch(e) {
+        console.warn('CSG subtract failed:', e);
+        return null;
+      }
+    }
+
     function doExtrude() {
       if (APP.mode !== 'sketch') {
         updateStatus('Start a sketch first');
@@ -2653,30 +2758,89 @@
         return;
       }
 
-      const height = prompt('Enter extrusion height (mm):', '20');
+      const height = prompt('Enter extrusion height in mm (negative = cut into existing body):', '20');
       if (height === null) return;
       const h = parseFloat(height);
       if (isNaN(h) || h === 0) { updateStatus('Invalid height'); return; }
 
+      const isCut = h < 0;
+
       try {
-        const mesh = extrudeProfile(entities, h);
+        const result = extrudeProfile(entities, Math.abs(h));
+        let mesh = result.mesh || result;
         endSketch();
         APP.currentSketch = null;
         APP.mode = 'idle';
-        addToScene(mesh);
 
-        const feature = {
-          id: 'feature_' + Date.now(),
-          name: `Extrusion (${h}mm)`,
-          type: 'extrude',
-          mesh,
-          params: { height: h },
-        };
-        APP.features.push(feature);
-        addFeature(feature);
-        pushHistory();
+        if (isCut && APP.features.length > 0) {
+          // Find the last solid feature to cut from
+          const lastSolid = [...APP.features].reverse().find(f => f.mesh && f.type !== 'cut');
+
+          if (lastSolid && lastSolid.mesh) {
+            // Position cut mesh at same location but going into the body
+            mesh.position.copy(lastSolid.mesh.position);
+            mesh.updateMatrixWorld(true);
 
-        updateStatus(`Created extrusion: ${h}mm`);
+            // Visual cut: use depth buffer trick
+            const cutResult = csgSubtract(lastSolid.mesh, mesh);
+            if (cutResult) {
+              addToScene(cutResult.cut);
+              const feature = {
+                id: 'feature_' + Date.now(),
+                name: `Cut (${Math.abs(h)}mm)`,
+                type: 'cut',
+                mesh: cutResult.cut,
+                params: { height: h },
+                _geometryJSON: cutResult.cut.geometry ? cutResult.cut.geometry.toJSON() : null,
+                _materialColor: '#f85149',
+              };
+              APP.features.push(feature);
+              addFeature(feature);
+              pushHistory();
+              updateStatus(`Cut ${Math.abs(h)}mm into ${lastSolid.name}`);
+            } else {
+              // Fallback: just show the cut shape as red overlay
+              mesh.material.color.setHex(0xf85149);
+              mesh.material.transparent = true;
+              mesh.material.opacity = 0.5;
+              addToScene(mesh);
+              const feature = {
+                id: 'feature_' + Date.now(),
+                name: `Cut (${Math.abs(h)}mm)`,
+                type: 'cut',
+                mesh,
+                params: { height: h },
+                _geometryJSON: mesh.geometry ? mesh.geometry.toJSON() : null,
+                _materialColor: '#f85149',
+              };
+              APP.features.push(feature);
+              addFeature(feature);
+              pushHistory();
+              updateStatus(`Cut ${Math.abs(h)}mm (visual — real CSG coming soon)`);
+            }
+          } else {
+            updateStatus('No solid body to cut into — create an extrusion first');
+          }
+        } else {
+          // Normal positive extrude
+          addToScene(mesh);
+          if (result.wireframe) addToScene(result.wireframe);
+
+          const feature = {
+            id: 'feature_' + Date.now(),
+            name: `Extrusion (${h}mm)`,
+            type: 'extrude',
+            mesh,
+            params: { height: h },
+            _geometryJSON: mesh.geometry ? mesh.geometry.toJSON() : null,
+            _materialColor: mesh.material ? (mesh.material.color ? '#' + mesh.material.color.getHexString() : '#58a6ff') : '#58a6ff',
+          };
+          APP.features.push(feature);
+          addFeature(feature);
+          pushHistory();
+
+          updateStatus(`Created extrusion: ${h}mm`);
+        }
         document.getElementById('mode-indicator').textContent = 'Ready';
         document.getElementById('mode-value').textContent = 'Normal';
       } catch (err) {
@@ -2691,13 +2855,15 @@
         if (splash) splash.classList.add('hidden');
 
         const result = createPrimitive(prompt.type || prompt.action, prompt.params || prompt);
-        addToScene(result.mesh || result);
+        const mesh = result.mesh || result;
+        addToScene(mesh);
+        if (result.wireframe) addToScene(result.wireframe);
 
         const feature = {
           id: 'feature_' + Date.now(),
           name: prompt.name || prompt.type || prompt.action || 'Part',
           type: prompt.type || prompt.action,
-          mesh: result.mesh || result,
+          mesh: mesh,
           params: prompt.params || prompt,
         };
         APP.features.push(feature);
@@ -2770,15 +2936,38 @@
         if (state.features && Array.isArray(state.features)) {
           state.features.forEach((featureData) => {
             try {
-              const primitive = createPrimitive(featureData.type, featureData.params);
-              addToScene(primitive.mesh);
+              let mesh;
+
+              // Try geometry JSON first (works for ALL feature types including extrude)
+              if (featureData._geometryJSON) {
+                const loader = new THREE.BufferGeometryLoader();
+                const geometry = loader.parse(featureData._geometryJSON);
+                const color = featureData._materialColor || '#58a6ff';
+                const mat = new THREE.MeshStandardMaterial({
+                  color: color,
+                  metalness: 0.3,
+                  roughness: 0.6,
+                  flatShading: false,
+                });
+                mesh = new THREE.Mesh(geometry, mat);
+                mesh.castShadow = true;
+                mesh.receiveShadow = true;
+              } else {
+                // Fall back to createPrimitive for basic primitives (box, cylinder, etc.)
+                const primitive = createPrimitive(featureData.type, featureData.params);
+                mesh = primitive.mesh;
+              }
+
+              addToScene(mesh);
 
               const feature = {
                 id: featureData.id,
                 name: featureData.name,
                 type: featureData.type,
-                mesh: primitive.mesh,
+                mesh: mesh,
                 params: featureData.params,
+                _geometryJSON: featureData._geometryJSON,
+                _materialColor: featureData._materialColor,
               };
 
               APP.features.push(feature);
@@ -2791,9 +2980,10 @@
       }
     }
 
-    function fitAll() {
+    function fitAllFeatures() {
       if (APP.features.length === 0) {
-        updateStatus('Nothing to fit');
+        // No local features — use imported fitAll from viewport
+        fitAll();
         return;
       }
 
@@ -2857,14 +3047,30 @@
         APP.history = APP.history.slice(0, APP.historyIndex + 1);
       }
 
-      // Save state snapshot
+      // Save state snapshot — include geometry JSON so undo/redo can recreate meshes
       APP.history.push({
-        features: JSON.parse(JSON.stringify(APP.features.map((f) => ({
-          id: f.id,
-          name: f.name,
-          type: f.type,
-          params: f.params,
-        })))),
+        features: APP.features.map((f) => {
+          const data = {
+            id: f.id,
+            name: f.name,
+            type: f.type,
+            params: f.params,
+          };
+          // Store geometry so we can restore without createPrimitive
+          try {
+            if (f._geometryJSON) {
+              data._geometryJSON = f._geometryJSON;
+            } else if (f.mesh && f.mesh.geometry) {
+              data._geometryJSON = f.mesh.geometry.toJSON();
+            }
+            if (f._materialColor) {
+              data._materialColor = f._materialColor;
+            } else if (f.mesh && f.mesh.material && f.mesh.material.color) {
+              data._materialColor = '#' + f.mesh.material.color.getHexString();
+            }
+          } catch(e) { /* geometry serialization failed, will try createPrimitive on restore */ }
+          return data;
+        }),
         timestamp: Date.now(),
       });
 
@@ -2902,6 +3108,17 @@
 
     window.cycleCAD = Object.assign(window.cycleCAD || {}, { version: '1.0.0', APP, init });
 
+    // Expose dialog functions globally so inline onclick="" handlers work
+    window.openDialog = openDialog;
+    window.closeDialog = closeDialog;
+    window.applyRevolve = typeof applyRevolve === 'function' ? applyRevolve : () => {};
+    window.applyFillet = typeof applyFillet === 'function' ? applyFillet : () => {};
+    window.applyChamfer = typeof applyChamer === 'function' ? applyChamer : () => {};
+    window.applyChamer = window.applyChamfer; // alias for typo in dialog onclick
+    window.applyBoolean = typeof applyBoolean === 'function' ? applyBoolean : () => {};
+    window.applyShell = typeof applyShell === 'function' ? applyShell : () => {};
+    window.applyPattern = typeof applyPattern === 'function' ? applyPattern : () => {};
+
     // ========== Hard Reset (with browser detection) ==========
     const hardResetBtn = document.getElementById('btn-hard-reset');
     if (hardResetBtn) {
@@ -2958,11 +3175,39 @@
         log.push('Storage: cleared');
         console.log('[Hard Reset]', browser, log.join(' | '));
         // 6. Browser-specific reload
-        if (browser === 'Safari') {
-          window.location.href = window.location.pathname + '?cachebust=' + Date.now();
-        } else {
-          setTimeout(() => { window.location.reload(true); }, 300);
-        }
+        // Always use cache-bust URL to guarantee fresh load
+        setTimeout(() => {
+          window.location.href = window.location.pathname + '?v=' + Date.now();
+        }, 300);
+      });
+    }
+
+    // Splash screen reset button — same logic, no confirm dialog
+    const splashResetBtn = document.getElementById('btn-splash-reset');
+    if (splashResetBtn) {
+      splashResetBtn.addEventListener('click', async () => {
+        splashResetBtn.textContent = '⏳ Clearing...';
+        try {
+          if ('serviceWorker' in navigator) {
+            const regs = await navigator.serviceWorker.getRegistrations();
+            for (const r of regs) await r.unregister();
+          }
+        } catch(e) {}
+        try {
+          if ('caches' in window) {
+            const names = await caches.keys();
+            for (const n of names) await caches.delete(n);
+          }
+        } catch(e) {}
+        try {
+          if (indexedDB.databases) {
+            const allDBs = await indexedDB.databases();
+            for (const db of allDBs) { if (db.name) indexedDB.deleteDatabase(db.name); }
+          }
+        } catch(e) {}
+        try { localStorage.clear(); } catch(e) {}
+        try { sessionStorage.clear(); } catch(e) {}
+        window.location.href = window.location.pathname + '?v=' + Date.now();
       });
     }
 
@@ -3360,7 +3605,10 @@
       body.style.cssText = 'padding:14px;flex:1;min-height:0;overflow-y:auto;font-size:12px;';
 
       const mod = window.cycleCAD?.[moduleKey];
-      if (mod?.getUI) {
+      if (mod?.init) {
+        // Use init() which sets innerHTML AND attaches event listeners
+        mod.init(body);
+      } else if (mod?.getUI) {
         body.innerHTML = mod.getUI();
       } else if (mod?.getStatus) {
         const status = mod.getStatus();
@@ -3393,6 +3641,286 @@
     document.getElementById('btn-generative')?.addEventListener('click', () => toggleModulePanel('generativeDesign', 'generative-panel'));
 
     // ========== Help & Tutorials Panel ==========
+    // ========== Light/Dark Mode Toggle ==========
+    document.getElementById('btn-theme-toggle')?.addEventListener('click', () => {
+      const root = document.documentElement;
+      const isLight = root.classList.toggle('light-mode');
+      const icon = document.getElementById('theme-icon');
+      if (icon) icon.textContent = isLight ? '🌙' : '☀';
+
+      // Update Three.js renderer background
+      try {
+        const scene = getScene();
+        const renderer = window._renderer || document.querySelector('#viewport-container canvas')?.getContext('webgl');
+        if (scene) {
+          if (isLight) {
+            scene.background = new THREE.Color(0xe8e8e8);
+            scene.fog = null;
+          } else {
+            scene.background = new THREE.Color(0x1a1a2e);
+            scene.fog = null;
+          }
+        }
+      } catch(e) { console.warn('Theme: renderer update skipped', e); }
+
+      // Persist preference
+      localStorage.setItem('cyclecad_theme', isLight ? 'light' : 'dark');
+      updateStatus(isLight ? 'Light mode' : 'Dark mode');
+    });
+
+    // Auto-restore saved theme
+    if (localStorage.getItem('cyclecad_theme') === 'light') {
+      document.documentElement.classList.add('light-mode');
+      const icon = document.getElementById('theme-icon');
+      if (icon) icon.textContent = '🌙';
+      try {
+        const scene = getScene();
+        if (scene) scene.background = new THREE.Color(0xe8e8e8);
+      } catch(e) {}
+    }
+
+    // ========== ViewCube Navigation ==========
+    document.querySelectorAll('.vc-face').forEach(face => {
+      face.addEventListener('click', () => {
+        const view = face.dataset.vc;
+        if (view) {
+          try { setView(view); } catch(e) {}
+          updateStatus(view.charAt(0).toUpperCase() + view.slice(1) + ' view');
+        }
+      });
+    });
+
+    // Continuously sync ViewCube rotation with camera using rAF
+    (function syncViewCube() {
+      const cube = document.getElementById('vc-cube');
+      if (!cube) return;
+      let lastRotX = null, lastRotY = null;
+      function updateCubeFromCamera() {
+        try {
+          const cam = getCamera();
+          if (cam) {
+            const dir = new THREE.Vector3();
+            cam.getWorldDirection(dir);
+            const rotY = Math.atan2(dir.x, dir.z) * (180 / Math.PI);
+            const rotX = Math.asin(-dir.y) * (180 / Math.PI);
+            const rxi = Math.round(rotX * 10);
+            const ryi = Math.round(rotY * 10);
+            if (rxi !== lastRotX || ryi !== lastRotY) {
+              lastRotX = rxi;
+              lastRotY = ryi;
+              cube.style.transform = `rotateX(${rotX}deg) rotateY(${rotY + 180}deg)`;
+            }
+          }
+        } catch(e) {}
+        requestAnimationFrame(updateCubeFromCamera);
+      }
+      requestAnimationFrame(updateCubeFromCamera);
+    })();
+
+    // ViewCube drag-to-orbit: drag on the cube rotates the 3D camera
+    (function initViewCubeDrag() {
+      const vcEl = document.getElementById('viewcube');
+      if (!vcEl) return;
+      let dragging = false, startX = 0, startY = 0;
+      let startAzimuth = 0, startPolar = 0;
+
+      vcEl.addEventListener('pointerdown', (e) => {
+        // Only start drag if not clicking a face label directly
+        dragging = true;
+        startX = e.clientX;
+        startY = e.clientY;
+        try {
+          const controls = getControls();
+          if (controls) {
+            startAzimuth = controls.getAzimuthalAngle();
+            startPolar = controls.getPolarAngle();
+          }
+        } catch(err) {}
+        vcEl.setPointerCapture(e.pointerId);
+        e.preventDefault();
+      });
+
+      vcEl.addEventListener('pointermove', (e) => {
+        if (!dragging) return;
+        const dx = e.clientX - startX;
+        const dy = e.clientY - startY;
+        // Only orbit if dragged more than 4px (otherwise it's a click)
+        if (Math.abs(dx) < 4 && Math.abs(dy) < 4) return;
+        try {
+          const controls = getControls();
+          const cam = getCamera();
+          if (controls && cam) {
+            // Spherical orbit: dx → azimuthal, dy → polar
+            const sensitivity = 0.02;
+            const target = controls.target.clone();
+            const offset = cam.position.clone().sub(target);
+            const spherical = new THREE.Spherical().setFromVector3(offset);
+            spherical.theta = startAzimuth - dx * sensitivity;
+            spherical.phi = Math.max(0.1, Math.min(Math.PI - 0.1, startPolar + dy * sensitivity));
+            offset.setFromSpherical(spherical);
+            cam.position.copy(target).add(offset);
+            cam.lookAt(target);
+            controls.update();
+          }
+        } catch(err) {}
+      });
+
+      vcEl.addEventListener('pointerup', (e) => {
+        const dx = Math.abs(e.clientX - startX);
+        const dy = Math.abs(e.clientY - startY);
+        dragging = false;
+        // If it was a small move, let the face click handler fire
+      });
+    })();
+
+    // ========== Measurement Tool ==========
+    (function initMeasureTool() {
+      let measureMode = false;
+      let measurePoints = [];
+      let measureLines = [];
+      let measureLabels = [];
+
+      function clearMeasurements() {
+        const scene = getScene();
+        if (!scene) return;
+        measureLines.forEach(l => scene.remove(l));
+        measureLabels.forEach(l => l.remove());
+        measureLines = [];
+        measureLabels = [];
+        measurePoints = [];
+      }
+
+      function addMeasureLabel(text, position) {
+        const div = document.createElement('div');
+        div.className = 'measure-label';
+        div.textContent = text;
+        div.style.cssText = 'position:absolute;background:rgba(88,166,255,0.9);color:#fff;padding:2px 6px;border-radius:3px;font-size:11px;font-weight:600;pointer-events:none;z-index:100;white-space:nowrap;';
+        document.getElementById('viewport-container').appendChild(div);
+        measureLabels.push(div);
+
+        function updatePos() {
+          if (!div.parentElement) return;
+          try {
+            const cam = getCamera();
+            const container = document.getElementById('viewport-container');
+            if (!cam || !container) return;
+            const vec = position.clone().project(cam);
+            const rect = container.getBoundingClientRect();
+            div.style.left = ((vec.x + 1) / 2 * rect.width) + 'px';
+            div.style.top = ((-vec.y + 1) / 2 * rect.height) + 'px';
+          } catch(e) {}
+          requestAnimationFrame(updatePos);
+        }
+        requestAnimationFrame(updatePos);
+        return div;
+      }
+
+      function onMeasureClick(e) {
+        if (!measureMode) return;
+        const cam = getCamera();
+        const scene = getScene();
+        if (!cam || !scene) return;
+
+        const container = document.getElementById('viewport-container');
+        const rect = container.getBoundingClientRect();
+        const mouse = new THREE.Vector2(
+          ((e.clientX - rect.left) / rect.width) * 2 - 1,
+          -((e.clientY - rect.top) / rect.height) * 2 + 1
+        );
+
+        const raycaster = new THREE.Raycaster();
+        raycaster.setFromCamera(mouse, cam);
+
+        const meshes = [];
+        scene.traverse(obj => { if (obj.isMesh) meshes.push(obj); });
+        const hits = raycaster.intersectObjects(meshes, true);
+        if (hits.length === 0) return;
+
+        const pt = hits[0].point.clone();
+        measurePoints.push(pt);
+
+        // Visual marker
+        const marker = new THREE.Mesh(
+          new THREE.SphereGeometry(0.3, 8, 8),
+          new THREE.MeshBasicMaterial({ color: 0x58a6ff })
+        );
+        marker.position.copy(pt);
+        scene.add(marker);
+        measureLines.push(marker);
+
+        if (measurePoints.length === 2) {
+          // Distance measurement
+          const p1 = measurePoints[0], p2 = measurePoints[1];
+          const dist = p1.distanceTo(p2);
+          const dx = Math.abs(p2.x - p1.x);
+          const dy = Math.abs(p2.y - p1.y);
+          const dz = Math.abs(p2.z - p1.z);
+
+          // Draw line
+          const lineGeo = new THREE.BufferGeometry().setFromPoints([p1, p2]);
+          const lineMat = new THREE.LineBasicMaterial({ color: 0x58a6ff, linewidth: 2 });
+          const line = new THREE.Line(lineGeo, lineMat);
+          scene.add(line);
+          measureLines.push(line);
+
+          // Label at midpoint
+          const mid = p1.clone().add(p2).multiplyScalar(0.5);
+          addMeasureLabel(`${dist.toFixed(1)}mm (dx:${dx.toFixed(1)} dy:${dy.toFixed(1)} dz:${dz.toFixed(1)})`, mid);
+          updateStatus(`Distance: ${dist.toFixed(2)}mm`);
+
+        } else if (measurePoints.length === 3) {
+          // Angle measurement between 3 points
+          const p1 = measurePoints[0], p2 = measurePoints[1], p3 = measurePoints[2];
+          const v1 = p1.clone().sub(p2).normalize();
+          const v2 = p3.clone().sub(p2).normalize();
+          const angle = Math.acos(Math.max(-1, Math.min(1, v1.dot(v2)))) * (180 / Math.PI);
+
+          // Draw angle lines
+          const lg1 = new THREE.BufferGeometry().setFromPoints([p1, p2]);
+          const lg2 = new THREE.BufferGeometry().setFromPoints([p2, p3]);
+          const lm = new THREE.LineBasicMaterial({ color: 0x3fb950, linewidth: 2 });
+          const l1 = new THREE.Line(lg1, lm);
+          const l2 = new THREE.Line(lg2, lm);
+          scene.add(l1); scene.add(l2);
+          measureLines.push(l1, l2);
+
+          addMeasureLabel(`${angle.toFixed(1)}°`, p2);
+          updateStatus(`Angle: ${angle.toFixed(2)}° | Distance 1→2: ${p1.distanceTo(p2).toFixed(1)}mm | Distance 2→3: ${p2.distanceTo(p3).toFixed(1)}mm`);
+          measurePoints = []; // Reset after angle
+        }
+      }
+
+      // Toggle measure mode with M key or toolbar button
+      document.addEventListener('keydown', (e) => {
+        if (e.key === 'm' && !e.ctrlKey && !e.metaKey && document.activeElement.tagName !== 'INPUT' && document.activeElement.tagName !== 'TEXTAREA') {
+          measureMode = !measureMode;
+          if (measureMode) {
+            measurePoints = [];
+            updateStatus('Measure mode: Click 2 points for distance, 3 points for angle. Press M to exit.');
+            document.getElementById('viewport-container').addEventListener('click', onMeasureClick);
+          } else {
+            clearMeasurements();
+            document.getElementById('viewport-container').removeEventListener('click', onMeasureClick);
+            updateStatus('Measure mode off');
+          }
+        }
+      });
+
+      // Also wire up measure button if it exists
+      document.getElementById('tool-measure')?.addEventListener('click', () => {
+        measureMode = !measureMode;
+        if (measureMode) {
+          measurePoints = [];
+          updateStatus('Measure mode: Click 2 points for distance, 3 for angle. Press M to exit.');
+          document.getElementById('viewport-container').addEventListener('click', onMeasureClick);
+        } else {
+          clearMeasurements();
+          document.getElementById('viewport-container').removeEventListener('click', onMeasureClick);
+          updateStatus('Measure mode off');
+        }
+      });
+    })();
+
     document.getElementById('btn-help')?.addEventListener('click', () => {
       let panel = document.getElementById('help-tutorials-panel');
       if (panel) { panel.style.display = panel.style.display === 'none' ? 'flex' : 'none'; return; }
@@ -3846,6 +4374,6 @@
     </div>
   </div>
 
-  <span id="version-badge" style="position:fixed;bottom:42px;left:50%;transform:translateX(-50%);z-index:999;font-size:0.9rem;color:rgba(255,255,255,0.9);letter-spacing:0.1em;white-space:nowrap;padding:6px 16px;user-select:all;pointer-events:auto;font-family:monospace;font-weight:700;background:rgba(0,0,0,0.7);border:1px solid rgba(88,166,255,0.4);border-radius:6px;text-shadow:0 1px 3px rgba(0,0,0,0.5);" title="cycleCAD version">cycleCAD v0.4.0</span>
+  <span id="version-badge" style="position:fixed;bottom:42px;left:50%;transform:translateX(-50%);z-index:999;font-size:0.9rem;color:rgba(255,255,255,0.9);letter-spacing:0.1em;white-space:nowrap;padding:6px 16px;user-select:all;pointer-events:auto;font-family:monospace;font-weight:700;background:rgba(0,0,0,0.7);border:1px solid rgba(88,166,255,0.4);border-radius:6px;text-shadow:0 1px 3px rgba(0,0,0,0.5);" title="cycleCAD version">cycleCAD v0.8.5</span>
 </body>
 </html>