feat: side-by-side inspection/chat layout + 360° spin interaction

Layout:
- Inspection panel now occupies grid column 1, row 2 (left)
- Chat panel now occupies grid column 2, row 2 (right)
- Both panels sit side-by-side below the video/track cards row
- Chat messages area grows to fill available height
- Both panels have matching min-height 320px, max-height 480px

360° Spin:
- Inspection canvas supports click-drag to rotate in 3D space
- CSS perspective (1200px) + preserve-3d for smooth 3D transforms
- Horizontal drag rotates Y-axis, vertical drag rotates X-axis
(pitch clamped to ±80°)
- Inertia: releasing while dragging continues spinning with decay
- Double-click snaps back to front view with smooth transition
- Touch support for mobile devices
- Rotation resets on track change or panel close

https://claude.ai/code/session_01XQ1edVcrdcMErbKF53r1aF

frontend/js/ui/inspection.js

@@ -26,6 +26,129 @@ APP.ui.inspection.init = function () {
             APP.ui.inspection.close();
         });
     }
+
+    // --- 360° spin interaction on inspection canvas ---
+    APP.ui.inspection._initSpin();
+};
+
+/**
+ * Wire drag-to-spin 3D rotation on the inspection canvas.
+ * Click + drag rotates the inspected object crop in 3D space.
+ * Double-click resets to front view.
+ */
+APP.ui.inspection._initSpin = function () {
+    const { $ } = APP.core.utils;
+    const canvas = $("#inspectionCanvas");
+    if (!canvas) return;
+
+    let dragging = false;
+    let lastX = 0, lastY = 0;
+    let rotX = 0, rotY = 0;      // current rotation in degrees
+    let velX = 0, velY = 0;      // inertia velocity
+    let animFrame = null;
+
+    function applyTransform() {
+        canvas.style.transform = `rotateY(${rotY}deg) rotateX(${rotX}deg)`;
+    }
+
+    canvas.addEventListener("mousedown", (e) => {
+        if (e.button !== 0) return; // left click only
+        dragging = true;
+        lastX = e.clientX;
+        lastY = e.clientY;
+        velX = 0;
+        velY = 0;
+        canvas.classList.remove("spinning");
+        if (animFrame) { cancelAnimationFrame(animFrame); animFrame = null; }
+        e.preventDefault();
+    });
+
+    window.addEventListener("mousemove", (e) => {
+        if (!dragging) return;
+        const dx = e.clientX - lastX;
+        const dy = e.clientY - lastY;
+        rotY += dx * 0.5;
+        rotX -= dy * 0.5;
+        rotX = Math.max(-80, Math.min(80, rotX)); // clamp pitch
+        velX = dx * 0.5;
+        velY = -dy * 0.5;
+        lastX = e.clientX;
+        lastY = e.clientY;
+        applyTransform();
+    });
+
+    window.addEventListener("mouseup", () => {
+        if (!dragging) return;
+        dragging = false;
+        // Inertia spin
+        if (Math.abs(velX) > 1 || Math.abs(velY) > 1) {
+            canvas.classList.remove("spinning");
+            const decay = () => {
+                velX *= 0.95;
+                velY *= 0.95;
+                rotY += velX;
+                rotX += velY;
+                rotX = Math.max(-80, Math.min(80, rotX));
+                applyTransform();
+                if (Math.abs(velX) > 0.1 || Math.abs(velY) > 0.1) {
+                    animFrame = requestAnimationFrame(decay);
+                }
+            };
+            animFrame = requestAnimationFrame(decay);
+        }
+    });
+
+    // Double-click to reset rotation smoothly
+    canvas.addEventListener("dblclick", () => {
+        if (animFrame) { cancelAnimationFrame(animFrame); animFrame = null; }
+        rotX = 0;
+        rotY = 0;
+        canvas.classList.add("spinning");
+        applyTransform();
+        setTimeout(() => canvas.classList.remove("spinning"), 800);
+    });
+
+    // Touch support
+    canvas.addEventListener("touchstart", (e) => {
+        if (e.touches.length !== 1) return;
+        dragging = true;
+        lastX = e.touches[0].clientX;
+        lastY = e.touches[0].clientY;
+        velX = 0;
+        velY = 0;
+        canvas.classList.remove("spinning");
+        if (animFrame) { cancelAnimationFrame(animFrame); animFrame = null; }
+    }, { passive: true });
+
+    canvas.addEventListener("touchmove", (e) => {
+        if (!dragging || e.touches.length !== 1) return;
+        const dx = e.touches[0].clientX - lastX;
+        const dy = e.touches[0].clientY - lastY;
+        rotY += dx * 0.5;
+        rotX -= dy * 0.5;
+        rotX = Math.max(-80, Math.min(80, rotX));
+        velX = dx * 0.5;
+        velY = -dy * 0.5;
+        lastX = e.touches[0].clientX;
+        lastY = e.touches[0].clientY;
+        applyTransform();
+    }, { passive: true });
+
+    canvas.addEventListener("touchend", () => {
+        if (!dragging) return;
+        dragging = false;
+    });
+
+    // Store reset function for use when switching tracks
+    APP.ui.inspection._resetSpin = function () {
+        if (animFrame) { cancelAnimationFrame(animFrame); animFrame = null; }
+        rotX = 0;
+        rotY = 0;
+        velX = 0;
+        velY = 0;
+        canvas.style.transform = "";
+        canvas.classList.remove("spinning");
+    };
 };
 
 /**
@@ -60,6 +183,9 @@ APP.ui.inspection.open = function (trackId) {
     // Clear caches if track or frame changed
     APP.ui.inspection._clearCaches();
 
+    // Reset 3D spin rotation
+    if (APP.ui.inspection._resetSpin) APP.ui.inspection._resetSpin();
+
     // Show panel
     panel.style.display = "flex";
 
@@ -94,6 +220,9 @@ APP.ui.inspection.close = function () {
 
     APP.ui.inspection._clearCaches();
 
+    // Reset 3D spin rotation
+    if (APP.ui.inspection._resetSpin) APP.ui.inspection._resetSpin();
+
     const panel = $("#inspectionPanel");
     if (panel) panel.style.display = "none";
 

frontend/style.css

@@ -1030,9 +1030,10 @@ input[type="number"]:focus {
    ========================================= */
 
 .panel-chat {
-    grid-column: 1 / -1;
-    grid-row: 3;
-    max-height: 260px;
+    grid-column: 2;
+    grid-row: 2;
+    max-height: 480px;
+    min-height: 320px;
     display: flex;
     flex-direction: column;
 }
@@ -1043,6 +1044,7 @@ input[type="number"]:focus {
 
 .panel-chat.collapsed {
     max-height: 44px;
+    min-height: 0;
 }
 
 .chat-container {
@@ -1064,7 +1066,6 @@ input[type="number"]:focus {
     flex-direction: column;
     gap: 8px;
     min-height: 100px;
-    max-height: 160px;
 }
 
 .chat-message {
@@ -1168,9 +1169,10 @@ input[type="number"]:focus {
    ========================================= */
 
 .panel-inspection {
-    grid-column: 1 / -1;
+    grid-column: 1;
     grid-row: 2;
-    max-height: 420px;
+    max-height: 480px;
+    min-height: 320px;
     display: flex;
     flex-direction: column;
     animation: slideDown 0.25s ease;
@@ -1185,7 +1187,7 @@ input[type="number"]:focus {
     }
     to {
         opacity: 1;
-        max-height: 420px;
+        max-height: 480px;
     }
 }
 
@@ -1231,6 +1233,7 @@ input[type="number"]:focus {
     overflow: hidden;
     background: radial-gradient(600px 300px at 50% 50%, rgba(0, 0, 0, .45), rgba(0, 0, 0, .25));
     border: 1px solid rgba(255, 255, 255, .08);
+    perspective: 1200px;
 }
 
 .inspection-viewport canvas {
@@ -1238,6 +1241,17 @@ input[type="number"]:focus {
     height: 100%;
     display: block;
     object-fit: contain;
+    transform-style: preserve-3d;
+    transition: transform 0.05s linear;
+    cursor: grab;
+}
+
+.inspection-viewport canvas:active {
+    cursor: grabbing;
+}
+
+.inspection-viewport canvas.spinning {
+    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }
 
 #inspection3dContainer {
@@ -1300,7 +1314,10 @@ input[type="number"]:focus {
     padding: 20px;
 }
 
-/* When sidebar collapsed, inspection still spans full width */
+/* When sidebar collapsed, panels still keep their columns */
 .engage-grid.sidebar-collapsed .panel-inspection {
-    grid-column: 1 / -1;
+    grid-column: 1;
+}
+.engage-grid.sidebar-collapsed .panel-chat {
+    grid-column: 2;
 }