@cluesmith/codev 1.5.13 → 1.5.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cluesmith/codev",
-  "version": "1.5.13",
+  "version": "1.5.14",
   "description": "Codev CLI - AI-assisted software development framework",
   "type": "module",
   "bin": {

package/templates/3d-viewer.html

@@ -12,7 +12,7 @@
     }
 
     body {
-      background: #1a1a2e;
+      background: #000000;
       color: #e0e0e0;
       font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
       overflow: hidden;
@@ -91,12 +91,17 @@
       font-weight: bold;
     }
 
-    button.view-btn.positive {
-      color: #4ade80;
+    /* Color view buttons to match axes: X=red, Y=green, Z=blue */
+    button.view-btn.axis-x {
+      color: #ef4444;
+    }
+
+    button.view-btn.axis-y {
+      color: #22c55e;
     }
 
-    button.view-btn.negative {
-      color: #f87171;
+    button.view-btn.axis-z {
+      color: #3b82f6;
     }
 
     #canvas-container {
@@ -177,15 +182,15 @@
     <div id="controls">
       <div class="control-group">
         <span class="control-label">View:</span>
-        <button id="viewTop" class="view-btn positive" title="Top (+Y)">+Y</button>
-        <button id="viewBottom" class="view-btn negative" title="Bottom (-Y)">-Y</button>
-        <button id="viewFront" class="view-btn positive" title="Front (+Z)">+Z</button>
-        <button id="viewBack" class="view-btn negative" title="Back (-Z)">-Z</button>
-        <button id="viewRight" class="view-btn positive" title="Right (+X)">+X</button>
-        <button id="viewLeft" class="view-btn negative" title="Left (-X)">-X</button>
+        <button id="viewRight" class="view-btn axis-x" title="Right (from +X)">Right</button>
+        <button id="viewLeft" class="view-btn axis-x" title="Left (from -X)">Left</button>
+        <button id="viewFront" class="view-btn axis-y" title="Front (from -Y)">Front</button>
+        <button id="viewBack" class="view-btn axis-y" title="Back (from +Y)">Back</button>
+        <button id="viewTop" class="view-btn axis-z" title="Top (looking down Z)">Top</button>
+        <button id="viewBottom" class="view-btn axis-z" title="Bottom (looking up)">Bot</button>
       </div>
       <div class="control-group">
-        <button id="viewIso" title="Isometric view">Iso</button>
+        <button id="viewIso" title="Toggle perspective/orthographic">Persp</button>
         <button id="resetBtn" title="Fit model to view">Fit</button>
       </div>
       <div class="control-group">
@@ -207,9 +212,9 @@
       <div id="error-message">Failed to load 3D model</div>
     </div>
     <div id="axes-legend">
-      <div class="axis-x">X &#8594; Left</div>
-      <div class="axis-y">Y &#8594; Front</div>
-      <div class="axis-z">Z &#8594; Up</div>
+      <div class="axis-x">X → Right</div>
+      <div class="axis-y">Y → Front</div>
+      <div class="axis-z">Z → Up</div>
     </div>
   </div>
 
@@ -235,13 +240,14 @@
     const FORMAT = '{{FORMAT}}';  // 'stl' or '3mf'
 
     // Three.js setup
-    let scene, camera, renderer, controls;
+    let scene, camera, orthoCamera, perspCamera, renderer, controls;
     let model = null;  // Can be mesh (STL) or group (3MF)
     let wireframeMesh = null;  // Wireframe overlay mesh
     let axesHelper, gridHelper;
     let viewMode = 'solid';  // 'solid', 'wireframe', or 'both'
     let showAxes = true;
     let showGrid = true;
+    let isOrthographic = false;
     let modelCenter = new THREE.Vector3();
     let cameraDistance = 100;
 
@@ -270,17 +276,25 @@
     function init() {
       // Scene
       scene = new THREE.Scene();
-      scene.background = new THREE.Color(0x1a1a2e);
-
-      // Camera (Z-up coordinate system)
-      camera = new THREE.PerspectiveCamera(
-        45,
-        container.clientWidth / container.clientHeight,
-        0.1,
-        10000
+      scene.background = new THREE.Color(0x000000);
+
+      // Cameras (Z-up coordinate system)
+      const aspect = container.clientWidth / container.clientHeight;
+      perspCamera = new THREE.PerspectiveCamera(45, aspect, 0.1, 10000);
+      perspCamera.up.set(0, 0, 1);  // Z is up
+      perspCamera.position.set(100, 100, 100);
+
+      // Orthographic camera (size will be adjusted when model loads)
+      const frustumSize = 100;
+      orthoCamera = new THREE.OrthographicCamera(
+        -frustumSize * aspect / 2, frustumSize * aspect / 2,
+        frustumSize / 2, -frustumSize / 2,
+        0.1, 10000
       );
-      camera.up.set(0, 0, 1);  // Z is up
-      camera.position.set(100, 100, 100);
+      orthoCamera.up.set(0, 0, 1);
+      orthoCamera.position.set(100, 100, 100);
+
+      camera = perspCamera;  // Start with perspective
 
       // Renderer
       renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
@@ -307,12 +321,15 @@
       directionalLight2.position.set(-1, -1, -1);
       scene.add(directionalLight2);
 
-      // Grid (on XY plane for Z-up coordinate system)
-      gridHelper = new THREE.GridHelper(200, 20, 0x0f3460, 0x0f3460);
-      gridHelper.rotation.x = Math.PI / 2;  // Rotate to XY plane
+      // Grid on XY plane (Z=0) for Z-up coordinate system
+      // GridHelper(size, divisions) - 10mm squares, 200mm total = 20 divisions
+      gridHelper = new THREE.GridHelper(200, 20, 0x808080, 0x808080);
+      gridHelper.rotation.x = Math.PI / 2;  // Rotate from XZ to XY plane
+      gridHelper.material.transparent = true;
+      gridHelper.material.opacity = 0.5;
       scene.add(gridHelper);
 
-      // Axes helper (X=red, Y=green, Z=blue)
+      // Axes helper at origin
       axesHelper = new THREE.AxesHelper(50);
       scene.add(axesHelper);
 
@@ -328,14 +345,14 @@
       axesBtn.addEventListener('click', toggleAxes);
       gridBtn.addEventListener('click', toggleGrid);
 
-      // View buttons (Z-up coordinate system: X=left, Y=front, Z=up)
+      // View buttons (Z-up coordinate system: X=right, Y=front, Z=up)
       viewTop.addEventListener('click', () => setView(0, 0, 1));     // Looking down from +Z
       viewBottom.addEventListener('click', () => setView(0, 0, -1)); // Looking up from -Z
-      viewFront.addEventListener('click', () => setView(0, -1, 0));  // Looking from -Y (front)
-      viewBack.addEventListener('click', () => setView(0, 1, 0));    // Looking from +Y (back)
-      viewRight.addEventListener('click', () => setView(1, 0, 0));   // Looking from +X
-      viewLeft.addEventListener('click', () => setView(-1, 0, 0));   // Looking from -X
-      viewIso.addEventListener('click', () => setView(1, -1, 1));    // Isometric from front-right-above
+      viewFront.addEventListener('click', () => setView(0, -1, 0));  // Looking from -Y
+      viewBack.addEventListener('click', () => setView(0, 1, 0));    // Looking from +Y
+      viewRight.addEventListener('click', () => setView(1, 0, 0));   // Looking from +X (right side)
+      viewLeft.addEventListener('click', () => setView(-1, 0, 0));   // Looking from -X (left side)
+      viewIso.addEventListener('click', toggleOrthographic);         // Toggle perspective/orthographic
 
       // Animation loop
       animate();
@@ -402,15 +419,7 @@
         (group) => {
           // 3MFLoader returns a Group with meshes
           // 3MF uses Z-up natively, which matches our coordinate system
-
-          // Center the group in XY
-          const box = new THREE.Box3().setFromObject(group);
-          const center = box.getCenter(new THREE.Vector3());
-          group.position.sub(center);
-
-          // Move to sit on grid (Z=0 plane)
-          const newBox = new THREE.Box3().setFromObject(group);
-          group.position.z -= newBox.min.z;
+          // Keep model at original position (don't center) to preserve coordinate alignment
 
           model = group;
           scene.add(model);
@@ -446,14 +455,26 @@
       const box = new THREE.Box3().setFromObject(object);
       box.getCenter(modelCenter);
       const size = box.getSize(new THREE.Vector3());
-      cameraDistance = Math.max(size.x, size.y, size.z) * 2;
-
-      // Scale grid and axes to model size
       const maxDim = Math.max(size.x, size.y, size.z);
-      const gridSize = Math.ceil(maxDim * 2 / 10) * 10; // Round up to nearest 10
+      cameraDistance = maxDim * 2;
+
+      // Configure orthographic camera frustum based on model size
+      const aspect = container.clientWidth / container.clientHeight;
+      const frustumSize = maxDim * 1.5;
+      orthoCamera.left = -frustumSize * aspect / 2;
+      orthoCamera.right = frustumSize * aspect / 2;
+      orthoCamera.top = frustumSize / 2;
+      orthoCamera.bottom = -frustumSize / 2;
+      orthoCamera.updateProjectionMatrix();
+
+      // Scale grid and axes to model size - always 10mm squares
+      const gridSize = Math.ceil(maxDim * 2 / 10) * 10; // Round up to nearest 10mm
+      const divisions = gridSize / 10;  // 10mm per square
       scene.remove(gridHelper);
-      gridHelper = new THREE.GridHelper(gridSize, gridSize / 5, 0x0f3460, 0x0f3460);
-      gridHelper.rotation.x = Math.PI / 2;  // Rotate to XY plane for Z-up
+      gridHelper = new THREE.GridHelper(gridSize, divisions, 0x808080, 0x808080);
+      gridHelper.rotation.x = Math.PI / 2;  // Rotate from XZ to XY plane
+      gridHelper.material.transparent = true;
+      gridHelper.material.opacity = 0.5;
       gridHelper.visible = showGrid;
       scene.add(gridHelper);
 
@@ -462,8 +483,9 @@
       axesHelper.visible = showAxes;
       scene.add(axesHelper);
 
-      // Fit camera to model
-      fitToView();
+      // Set camera to look at model center, default front view
+      controls.target.copy(modelCenter);
+      setView(0, -1, 0);  // Front view
 
       // Hide loading
       loading.classList.add('hidden');
@@ -481,13 +503,46 @@
 
       const box = new THREE.Box3().setFromObject(model);
       const size = box.getSize(new THREE.Vector3());
+      const center = box.getCenter(new THREE.Vector3());
 
       const maxDim = Math.max(size.x, size.y, size.z);
-      const fov = camera.fov * (Math.PI / 180);
+      const fov = perspCamera.fov * (Math.PI / 180);
       cameraDistance = maxDim / (2 * Math.tan(fov / 2)) * 1.5;
 
-      // Isometric view from front-right-above (Z-up system)
-      setView(1, -1, 1);
+      // Update orthographic frustum
+      const aspect = container.clientWidth / container.clientHeight;
+      const frustumSize = maxDim * 1.5;
+      orthoCamera.left = -frustumSize * aspect / 2;
+      orthoCamera.right = frustumSize * aspect / 2;
+      orthoCamera.top = frustumSize / 2;
+      orthoCamera.bottom = -frustumSize / 2;
+      orthoCamera.updateProjectionMatrix();
+
+      // Keep current view direction, just adjust distance
+      const currentDir = new THREE.Vector3().subVectors(camera.position, controls.target).normalize();
+      camera.position.copy(center).add(currentDir.multiplyScalar(cameraDistance));
+      controls.target.copy(center);
+      controls.update();
+    }
+
+    function toggleOrthographic() {
+      isOrthographic = !isOrthographic;
+
+      // Copy position and orientation from current camera to the other
+      const newCamera = isOrthographic ? orthoCamera : perspCamera;
+      newCamera.position.copy(camera.position);
+      newCamera.up.copy(camera.up);
+      newCamera.lookAt(controls.target);
+
+      camera = newCamera;
+
+      // Update controls to use new camera
+      controls.object = camera;
+      controls.update();
+
+      // Update button state
+      viewIso.classList.toggle('active', isOrthographic);
+      viewIso.textContent = isOrthographic ? 'Ortho' : 'Persp';
     }
 
     function setView(x, y, z) {
@@ -633,8 +688,18 @@
     }
 
     function onResize() {
-      camera.aspect = container.clientWidth / container.clientHeight;
-      camera.updateProjectionMatrix();
+      const aspect = container.clientWidth / container.clientHeight;
+
+      // Update perspective camera
+      perspCamera.aspect = aspect;
+      perspCamera.updateProjectionMatrix();
+
+      // Update orthographic camera (maintain frustum height, adjust width)
+      const frustumHeight = orthoCamera.top - orthoCamera.bottom;
+      orthoCamera.left = -frustumHeight * aspect / 2;
+      orthoCamera.right = frustumHeight * aspect / 2;
+      orthoCamera.updateProjectionMatrix();
+
       renderer.setSize(container.clientWidth, container.clientHeight);
       controls.handleResize();  // TrackballControls needs this to update screen dimensions
     }

package/templates/open.html

@@ -182,11 +182,34 @@
       color: #888;
     }
 
-    /* Editor textarea */
-    #editor {
+    /* Editor container with line numbers */
+    #editor-container {
       display: none;
-      width: 100%;
       height: calc(100vh - 80px);
+      position: relative;
+    }
+    #editor-line-numbers {
+      position: absolute;
+      left: 0;
+      top: 0;
+      bottom: 0;
+      width: 50px;
+      background: #252525;
+      color: #666;
+      font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
+      font-size: 13px;
+      line-height: 1.5;
+      padding: 15px 8px 15px 0;
+      text-align: right;
+      overflow: hidden;
+      border-right: 1px solid #333;
+      user-select: none;
+      box-sizing: border-box;
+    }
+    #editor {
+      width: calc(100% - 50px);
+      height: 100%;
+      margin-left: 50px;
       font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
       font-size: 13px;
       line-height: 1.5;
@@ -473,8 +496,11 @@
     </div>
   </div>
 
-  <!-- Editor mode -->
-  <textarea id="editor" spellcheck="false"></textarea>
+  <!-- Editor mode with line numbers -->
+  <div id="editor-container">
+    <div id="editor-line-numbers"></div>
+    <textarea id="editor" spellcheck="false"></textarea>
+  </div>
 
   <!-- Search Bar -->
   <div class="search-bar" id="searchBar">
@@ -1279,6 +1305,7 @@
 
     async function toggleEditMode() {
       const viewMode = document.getElementById('viewMode');
+      const editorContainer = document.getElementById('editor-container');
       const editor = document.getElementById('editor');
       const editBtn = document.getElementById('editBtn');
       const saveBtn = document.getElementById('saveBtn');
@@ -1302,14 +1329,15 @@
         // to ensure Cancel always reverts to the true disk state
         editor.value = currentContent;
         viewMode.style.display = 'none';
-        editor.style.display = 'block';
+        editorContainer.style.display = 'block';
         editBtn.textContent = 'Switch to Annotate';
         subtitle.textContent = 'Edit the file directly by clicking and typing.';
         saveBtn.style.display = 'inline-block';
         cancelBtn.style.display = 'inline-block';
         editMode = true;
 
-        // Apply scroll position to editor
+        // Update line numbers and apply scroll position
+        updateEditorLineNumbers();
         editor.scrollTop = scrollTop;
         editor.focus();
       } else {
@@ -1324,7 +1352,7 @@
 
         currentContent = editor.value;
         fileLines = currentContent.split('\n');
-        editor.style.display = 'none';
+        editorContainer.style.display = 'none';
         viewMode.style.display = 'grid';
         editBtn.textContent = 'Switch to Editing';
         subtitle.textContent = 'Click on a line number to leave an annotation.';
@@ -1343,6 +1371,19 @@
       }
     }
 
+    // Update line numbers in editor
+    function updateEditorLineNumbers() {
+      const editor = document.getElementById('editor');
+      const lineNumbers = document.getElementById('editor-line-numbers');
+      const lines = editor.value.split('\n');
+      lineNumbers.innerHTML = lines.map((_, i) => `<div>${i + 1}</div>`).join('');
+    }
+
+    // Sync line numbers scroll with editor scroll
+    document.getElementById('editor').addEventListener('scroll', function() {
+      document.getElementById('editor-line-numbers').scrollTop = this.scrollTop;
+    });
+
     async function saveEdit() {
       const editor = document.getElementById('editor');
       const content = editor.value;
@@ -1398,10 +1439,11 @@
       setTimeout(() => notification.remove(), 3000);
     }
 
-    // Track unsaved changes in editor
+    // Track unsaved changes in editor and update line numbers
     document.getElementById('editor').addEventListener('input', () => {
       hasUnsavedChanges = document.getElementById('editor').value !== originalContent;
       updateUnsavedIndicator();
+      updateEditorLineNumbers();
     });
 
     // Tab key handling for indentation