@cluesmith/codev 1.4.12 → 1.5.2

package/templates/dashboard/js/tabs.js

@@ -1,10 +1,47 @@
 // Tab Management - Rendering, Selection, Overflow
 
 // Get the base URL for ttyd/server connections (uses current hostname for remote access)
+// DEPRECATED: Use getTerminalUrl() for terminal tabs (Spec 0062)
 function getBaseUrl(port) {
   return `http://${window.location.hostname}:${port}`;
 }
 
+/**
+ * Get the terminal URL for a tab (Spec 0062 - Secure Remote Access)
+ * Uses the reverse proxy instead of direct port access, enabling SSH tunnel support.
+ *
+ * @param {Object} tab - The tab object
+ * @returns {string} The URL to load in the iframe
+ */
+function getTerminalUrl(tab) {
+  // Architect terminal
+  if (tab.type === 'architect') {
+    return '/terminal/architect';
+  }
+
+  // Builder terminal - use the builder's ID (e.g., builder-0055)
+  if (tab.type === 'builder') {
+    return `/terminal/builder-${tab.projectId}`;
+  }
+
+  // Shell/utility terminal - use the utility's ID (e.g., util-U12345)
+  if (tab.type === 'shell') {
+    return `/terminal/util-${tab.utilId}`;
+  }
+
+  // File tabs still use direct port access (open-server, not ttyd)
+  if (tab.type === 'file' && tab.port) {
+    return getBaseUrl(tab.port);
+  }
+
+  // Fallback for backward compatibility
+  if (tab.port) {
+    return getBaseUrl(tab.port);
+  }
+
+  return null;
+}
+
 // Build tabs from initial state
 function buildTabsFromState() {
   const previousTabIds = new Set(tabs.map(t => t.id));
@@ -88,7 +125,8 @@ function renderArchitect() {
     // Only update iframe if port changed (avoid flashing on poll)
     if (currentArchitectPort !== state.architect.port) {
       currentArchitectPort = state.architect.port;
-      content.innerHTML = `<iframe src="${getBaseUrl(state.architect.port)}" title="Architect Terminal" allow="clipboard-read; clipboard-write"></iframe>`;
+      // Use proxied URL for remote access support (Spec 0062)
+      content.innerHTML = `<iframe src="/terminal/architect" title="Architect Terminal" allow="clipboard-read; clipboard-write"></iframe>`;
     }
   } else {
     if (currentArchitectPort !== null) {
@@ -249,7 +287,13 @@ function renderTabContent() {
   if (currentTabPort !== tab.port || currentTabType !== tab.type) {
     currentTabPort = tab.port;
     currentTabType = tab.type;
-    content.innerHTML = `<iframe src="${getBaseUrl(tab.port)}" title="${tab.name}" allow="clipboard-read; clipboard-write"></iframe>`;
+    // Use proxied URL for terminal tabs (Spec 0062 - Secure Remote Access)
+    const url = getTerminalUrl(tab);
+    if (url) {
+      content.innerHTML = `<iframe src="${url}" title="${tab.name}" allow="clipboard-read; clipboard-write"></iframe>`;
+    } else {
+      content.innerHTML = `<div class="empty-state"><p>Terminal unavailable</p></div>`;
+    }
   }
 }
 
@@ -486,11 +530,12 @@ function openInNewTab(tabId) {
   const tab = tabs.find(t => t.id === tabId);
   if (!tab) return;
 
-  if (!tab.port) {
+  // Use proxied URL for terminal tabs (Spec 0062 - Secure Remote Access)
+  const url = getTerminalUrl(tab);
+  if (!url) {
     showToast('Tab not ready', 'error');
     return;
   }
 
-  const url = getBaseUrl(tab.port);
   window.open(url, '_blank', 'noopener,noreferrer');
 }

package/templates/open.html

@@ -559,6 +559,7 @@
       yaml: { prefix: '# REVIEW', regex: /^(\s*)#\s*REVIEW(\(@\w+\))?:\s*(.*)$/ },
       yml: { prefix: '# REVIEW', regex: /^(\s*)#\s*REVIEW(\(@\w+\))?:\s*(.*)$/ },
       md: { prefix: '<!-- REVIEW', suffix: ' -->', regex: /^(\s*)<!--\s*REVIEW(\(@\w+\))?:\s*(.*?)\s*-->$/ },
+      qmd: { prefix: '<!-- REVIEW', suffix: ' -->', regex: /^(\s*)<!--\s*REVIEW(\(@\w+\))?:\s*(.*?)\s*-->$/ },
       html: { prefix: '<!-- REVIEW', suffix: ' -->', regex: /^(\s*)<!--\s*REVIEW(\(@\w+\))?:\s*(.*?)\s*-->$/ },
       css: { prefix: '/* REVIEW', suffix: ' */', regex: /^(\s*)\/\*\s*REVIEW(\(@\w+\))?:\s*(.*?)\s*\*\/$/ },
     };
@@ -1660,6 +1661,72 @@
       }
     });
 
+    // Auto-reload: poll file mtime and reload when changed
+    let lastMtime = null;
+    const POLL_INTERVAL = 1000; // 1 second
+
+    async function checkForChanges() {
+      // Don't auto-reload if user has unsaved changes
+      if (hasUnsavedChanges || editMode) return;
+
+      try {
+        const res = await fetch('/api/mtime');
+        if (res.ok) {
+          const data = await res.json();
+          if (lastMtime === null) {
+            lastMtime = data.mtime;
+          } else if (data.mtime !== lastMtime) {
+            lastMtime = data.mtime;
+            autoReloadFile();
+          }
+        }
+      } catch (err) {
+        // Ignore fetch errors (server may be restarting)
+      }
+    }
+
+    async function autoReloadFile() {
+      // For images and videos, just reload the source
+      if (isImageFile) {
+        const img = document.getElementById('image-display');
+        img.src = '/api/image?t=' + Date.now();
+        showNotification('Image reloaded');
+        return;
+      }
+
+      if (isVideoFile) {
+        const video = document.getElementById('video-display');
+        video.src = '/api/video?t=' + Date.now();
+        showNotification('Video reloaded');
+        return;
+      }
+
+      // For text files, fetch new content
+      try {
+        const res = await fetch('/file');
+        if (res.ok) {
+          const content = await res.text();
+          currentContent = content;
+          originalContent = content;
+          fileLines = content.split('\n');
+
+          // Re-render based on current mode
+          if (isPreviewMode) {
+            renderPreview();
+          } else {
+            renderFile();
+          }
+          updateAnnotationsList();
+          showNotification('File reloaded');
+        }
+      } catch (err) {
+        // Ignore errors
+      }
+    }
+
+    // Start polling for changes
+    setInterval(checkForChanges, POLL_INTERVAL);
+
     // FILE_CONTENT will be injected by the server
   </script>
 </body>

package/templates/stl-viewer.html

@@ -1,473 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>{{FILE}} - STL Viewer</title>
-  <style>
-    * {
-      margin: 0;
-      padding: 0;
-      box-sizing: border-box;
-    }
-
-    body {
-      background: #1a1a2e;
-      color: #e0e0e0;
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-      overflow: hidden;
-      height: 100vh;
-      display: flex;
-      flex-direction: column;
-    }
-
-    #header {
-      background: #16213e;
-      padding: 8px 16px;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      border-bottom: 1px solid #0f3460;
-      flex-shrink: 0;
-    }
-
-    #filename {
-      font-size: 14px;
-      color: #94a3b8;
-    }
-
-    #info {
-      font-size: 12px;
-      color: #64748b;
-    }
-
-    #controls {
-      display: flex;
-      gap: 8px;
-      align-items: center;
-    }
-
-    .control-group {
-      display: flex;
-      gap: 4px;
-      padding: 0 8px;
-      border-right: 1px solid #0f3460;
-    }
-
-    .control-group:last-child {
-      border-right: none;
-    }
-
-    .control-label {
-      font-size: 10px;
-      color: #64748b;
-      margin-right: 4px;
-      align-self: center;
-    }
-
-    button {
-      background: #0f3460;
-      color: #e0e0e0;
-      border: 1px solid #1e4976;
-      padding: 4px 8px;
-      border-radius: 4px;
-      cursor: pointer;
-      font-size: 11px;
-      transition: background 0.2s;
-      min-width: 28px;
-    }
-
-    button:hover {
-      background: #1e4976;
-    }
-
-    button.active {
-      background: #2563eb;
-      border-color: #3b82f6;
-    }
-
-    button.view-btn {
-      font-family: monospace;
-      font-weight: bold;
-    }
-
-    button.view-btn.positive {
-      color: #4ade80;
-    }
-
-    button.view-btn.negative {
-      color: #f87171;
-    }
-
-    #canvas-container {
-      flex: 1;
-      position: relative;
-    }
-
-    #canvas {
-      display: block;
-      width: 100%;
-      height: 100%;
-    }
-
-    #loading {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      text-align: center;
-      color: #94a3b8;
-    }
-
-    #loading .spinner {
-      width: 40px;
-      height: 40px;
-      border: 3px solid #0f3460;
-      border-top-color: #3b82f6;
-      border-radius: 50%;
-      animation: spin 1s linear infinite;
-      margin: 0 auto 12px;
-    }
-
-    @keyframes spin {
-      to { transform: rotate(360deg); }
-    }
-
-    #error {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      text-align: center;
-      color: #ef4444;
-      display: none;
-    }
-
-    .hidden {
-      display: none !important;
-    }
-
-    /* Axes legend */
-    #axes-legend {
-      position: absolute;
-      bottom: 16px;
-      left: 16px;
-      background: rgba(22, 33, 62, 0.9);
-      padding: 8px 12px;
-      border-radius: 4px;
-      font-size: 11px;
-      font-family: monospace;
-    }
-
-    #axes-legend div {
-      margin: 2px 0;
-    }
-
-    .axis-x { color: #ef4444; }
-    .axis-y { color: #22c55e; }
-    .axis-z { color: #3b82f6; }
-  </style>
-</head>
-<body>
-  <div id="header">
-    <div>
-      <span id="filename">{{FILE}}</span>
-      <span id="info"></span>
-    </div>
-    <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>
-      </div>
-      <div class="control-group">
-        <button id="viewIso" title="Isometric view">Iso</button>
-        <button id="resetBtn" title="Fit model to view">Fit</button>
-      </div>
-      <div class="control-group">
-        <button id="wireframeBtn" title="Toggle wireframe mode">Wire</button>
-        <button id="axesBtn" class="active" title="Toggle axes">Axes</button>
-        <button id="gridBtn" class="active" title="Toggle grid">Grid</button>
-      </div>
-    </div>
-  </div>
-
-  <div id="canvas-container">
-    <canvas id="canvas"></canvas>
-    <div id="loading">
-      <div class="spinner"></div>
-      <div>Loading STL...</div>
-    </div>
-    <div id="error">
-      <div style="font-size: 48px; margin-bottom: 12px;">⚠️</div>
-      <div id="error-message">Failed to load STL file</div>
-    </div>
-    <div id="axes-legend">
-      <div class="axis-x">X → Right</div>
-      <div class="axis-y">Y → Up</div>
-      <div class="axis-z">Z → Front</div>
-    </div>
-  </div>
-
-  <!-- Three.js from CDN (using r128 which has global builds) -->
-  <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/build/three.min.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/loaders/STLLoader.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.js"></script>
-
-  <script>
-    // Configuration
-    const FILE_PATH = '{{FILE_PATH}}';
-    const FILE_NAME = '{{FILE}}';
-
-    // Three.js setup
-    let scene, camera, renderer, controls, mesh;
-    let axesHelper, gridHelper;
-    let wireframeMode = false;
-    let showAxes = true;
-    let showGrid = true;
-    let modelCenter = new THREE.Vector3();
-    let cameraDistance = 100;
-
-    // DOM elements
-    const canvas = document.getElementById('canvas');
-    const container = document.getElementById('canvas-container');
-    const loading = document.getElementById('loading');
-    const error = document.getElementById('error');
-    const errorMessage = document.getElementById('error-message');
-    const info = document.getElementById('info');
-
-    // Buttons
-    const resetBtn = document.getElementById('resetBtn');
-    const wireframeBtn = document.getElementById('wireframeBtn');
-    const axesBtn = document.getElementById('axesBtn');
-    const gridBtn = document.getElementById('gridBtn');
-    const viewTop = document.getElementById('viewTop');
-    const viewBottom = document.getElementById('viewBottom');
-    const viewFront = document.getElementById('viewFront');
-    const viewBack = document.getElementById('viewBack');
-    const viewRight = document.getElementById('viewRight');
-    const viewLeft = document.getElementById('viewLeft');
-    const viewIso = document.getElementById('viewIso');
-
-    function init() {
-      // Scene
-      scene = new THREE.Scene();
-      scene.background = new THREE.Color(0x1a1a2e);
-
-      // Camera
-      camera = new THREE.PerspectiveCamera(
-        45,
-        container.clientWidth / container.clientHeight,
-        0.1,
-        10000
-      );
-      camera.position.set(100, 100, 100);
-
-      // Renderer
-      renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
-      renderer.setSize(container.clientWidth, container.clientHeight);
-      renderer.setPixelRatio(window.devicePixelRatio);
-
-      // Controls
-      controls = new THREE.OrbitControls(camera, renderer.domElement);
-      controls.enableDamping = true;
-      controls.dampingFactor = 0.1;
-      controls.screenSpacePanning = true;
-
-      // Lighting
-      const ambientLight = new THREE.AmbientLight(0x404040, 0.5);
-      scene.add(ambientLight);
-
-      const directionalLight1 = new THREE.DirectionalLight(0xffffff, 0.8);
-      directionalLight1.position.set(1, 1, 1);
-      scene.add(directionalLight1);
-
-      const directionalLight2 = new THREE.DirectionalLight(0xffffff, 0.4);
-      directionalLight2.position.set(-1, -1, -1);
-      scene.add(directionalLight2);
-
-      // Grid
-      gridHelper = new THREE.GridHelper(200, 20, 0x0f3460, 0x0f3460);
-      scene.add(gridHelper);
-
-      // Axes helper (X=red, Y=green, Z=blue)
-      axesHelper = new THREE.AxesHelper(50);
-      scene.add(axesHelper);
-
-      // Load STL
-      loadSTL();
-
-      // Event listeners
-      window.addEventListener('resize', onResize);
-
-      // Control buttons
-      resetBtn.addEventListener('click', fitToView);
-      wireframeBtn.addEventListener('click', toggleWireframe);
-      axesBtn.addEventListener('click', toggleAxes);
-      gridBtn.addEventListener('click', toggleGrid);
-
-      // View buttons
-      viewTop.addEventListener('click', () => setView(0, 1, 0));
-      viewBottom.addEventListener('click', () => setView(0, -1, 0));
-      viewFront.addEventListener('click', () => setView(0, 0, 1));
-      viewBack.addEventListener('click', () => setView(0, 0, -1));
-      viewRight.addEventListener('click', () => setView(1, 0, 0));
-      viewLeft.addEventListener('click', () => setView(-1, 0, 0));
-      viewIso.addEventListener('click', () => setView(1, 1, 1));
-
-      // Animation loop
-      animate();
-    }
-
-    function loadSTL() {
-      const loader = new THREE.STLLoader();
-
-      // Load from API endpoint
-      loader.load(
-        '/api/stl',
-        (geometry) => {
-          // Center geometry
-          geometry.computeBoundingBox();
-          const center = new THREE.Vector3();
-          geometry.boundingBox.getCenter(center);
-          geometry.translate(-center.x, -center.y, -center.z);
-
-          // Move to sit on grid (optional - comment out to keep centered)
-          const minY = geometry.boundingBox.min.y - center.y;
-          geometry.translate(0, -minY, 0);
-
-          // Recalculate bounding box after translation
-          geometry.computeBoundingBox();
-
-          // Material
-          const material = new THREE.MeshPhongMaterial({
-            color: 0x3b82f6,
-            specular: 0x111111,
-            shininess: 30,
-            flatShading: false
-          });
-
-          mesh = new THREE.Mesh(geometry, material);
-          scene.add(mesh);
-
-          // Calculate model center and size
-          const box = new THREE.Box3().setFromObject(mesh);
-          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
-          scene.remove(gridHelper);
-          gridHelper = new THREE.GridHelper(gridSize, gridSize / 5, 0x0f3460, 0x0f3460);
-          scene.add(gridHelper);
-
-          scene.remove(axesHelper);
-          axesHelper = new THREE.AxesHelper(gridSize / 2);
-          scene.add(axesHelper);
-
-          // Fit camera to model
-          fitToView();
-
-          // Update info
-          const triangles = geometry.attributes.position.count / 3;
-          info.textContent = ` — ${triangles.toLocaleString()} triangles`;
-
-          // Hide loading
-          loading.classList.add('hidden');
-        },
-        (progress) => {
-          // Progress callback (optional)
-        },
-        (err) => {
-          console.error('Error loading STL:', err);
-          loading.classList.add('hidden');
-          error.style.display = 'block';
-          errorMessage.textContent = 'Failed to load STL file: ' + (err.message || 'Unknown error');
-        }
-      );
-    }
-
-    function fitToView() {
-      if (!mesh) return;
-
-      const box = new THREE.Box3().setFromObject(mesh);
-      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);
-      cameraDistance = maxDim / (2 * Math.tan(fov / 2)) * 1.5;
-
-      // Isometric view
-      setView(1, 1, 1);
-    }
-
-    function setView(x, y, z) {
-      if (!mesh) return;
-
-      const box = new THREE.Box3().setFromObject(mesh);
-      const center = box.getCenter(new THREE.Vector3());
-
-      // Normalize direction
-      const dir = new THREE.Vector3(x, y, z).normalize();
-
-      // Set camera position
-      camera.position.copy(center).add(dir.multiplyScalar(cameraDistance));
-
-      // Set up vector (handle top/bottom views)
-      if (Math.abs(y) > 0.9) {
-        camera.up.set(0, 0, y > 0 ? -1 : 1);
-      } else {
-        camera.up.set(0, 1, 0);
-      }
-
-      // Look at center
-      controls.target.copy(center);
-      camera.lookAt(center);
-      controls.update();
-    }
-
-    function toggleWireframe() {
-      wireframeMode = !wireframeMode;
-      if (mesh) {
-        mesh.material.wireframe = wireframeMode;
-      }
-      wireframeBtn.classList.toggle('active', wireframeMode);
-    }
-
-    function toggleAxes() {
-      showAxes = !showAxes;
-      axesHelper.visible = showAxes;
-      axesBtn.classList.toggle('active', showAxes);
-      document.getElementById('axes-legend').style.display = showAxes ? 'block' : 'none';
-    }
-
-    function toggleGrid() {
-      showGrid = !showGrid;
-      gridHelper.visible = showGrid;
-      gridBtn.classList.toggle('active', showGrid);
-    }
-
-    function onResize() {
-      camera.aspect = container.clientWidth / container.clientHeight;
-      camera.updateProjectionMatrix();
-      renderer.setSize(container.clientWidth, container.clientHeight);
-    }
-
-    function animate() {
-      requestAnimationFrame(animate);
-      controls.update();
-      renderer.render(scene, camera);
-    }
-
-    // Start
-    init();
-  </script>
-</body>
-</html>