Update templates/index.html

templates/index.html

@@ -61,7 +61,7 @@
                 const y = vector[1] * 10; // level
                 const z = vector[2] * 100; // center_pos
                 positions.push(x, y, z);
-                colors.push(1, 0.5, 0); // Orange points
+                colors.push(1, 0.5, 0); // Orange points (can vary by category)
                 part.pointIndex = index * 3; // Store index for lookup
             });
 
@@ -80,7 +80,6 @@
             canvas.addEventListener('mousedown', onMouseDown);
             canvas.addEventListener('mousemove', onMouseMove);
             canvas.addEventListener('mouseup', onMouseUp);
-            animate();
         }
 
         function animate() {
@@ -112,6 +111,8 @@
                     const part = window.parts.find(p => p.pointIndex === index * 3);
                     if (part && hoveredPoint !== part) {
                         hoveredPoint = part;
+                        const variableRole = part.vector[6] === 0 ? '-' : ['Input', 'Assigned', 'Returned'][part.vector[6] - 1];
+                        const variableName = part.vector[7] === 0 ? '-' : (part.vector[7] * 1000).toFixed(3); // Reconstruct hash
                         pointDetails.innerHTML = `
                             <div class="text-gray-200">
                                 <strong>Category:</strong> ${part.category}<br>
@@ -119,6 +120,8 @@
                                 <strong>Parent Path:</strong> ${part.parent_path}<br>
                                 <strong>Level:</strong> ${part.level}<br>
                                 <strong>Location:</strong> Lines ${part.location[0]} to ${part.location[1]}<br>
+                                <strong>Variable Role:</strong> ${variableRole}<br>
+                                <strong>Variable Name:</strong> ${variableName}<br>
                                 <strong>Vector:</strong> [${part.vector.join(', ')}]<br>
                                 <strong>Code:</strong><pre class="text-xs text-gray-300">${part.source}</pre>
                             </div>