feat(inspection): quad view redesign — 2x2 simultaneous seg/edge/depth/3D

Replace single-viewport tab-switched inspection panel with simultaneous
2x2 quad view. All four analysis layers (segmentation, edge detection,
depth map, 3D mesh) render in parallel when a track is selected.

- New quad grid CSS with per-quadrant styling, corner brackets, expand states
- Per-quadrant loading/error overlays instead of panel-wide overlay
- Click any quadrant to expand full-size, Escape to collapse
- Header shows object name, confidence, mission status badge
- Bottom metrics strip: velocity, depth, area, tracked frames
- Remove attention heatmap and super-resolution modes
- Clean up dead code: dispatch(), inferno colormap, fetchAttention, fetchSuperRes

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

frontend/index.html

@@ -175,34 +175,51 @@
             </div>
 
             <div class="panel panel-inspection" id="inspectionPanel" style="display:none">
-              <h3>
-                <span>Object Inspection</span>
-                <div style="display: flex; gap: 8px; align-items: center;">
-                  <span class="rightnote" id="inspectionTarget">No object selected</span>
-                  <button class="collapse-btn" id="btnCloseInspection">Close</button>
+              <div class="inspection-header">
+                <div class="inspection-header-left">
+                  <span class="inspection-obj-name" id="inspectionObjName">--</span>
+                  <span class="inspection-conf" id="inspectionConf">--</span>
+                  <span class="inspection-status pending" id="inspectionStatus">PENDING</span>
+                </div>
+                <div class="inspection-header-right">
+                  <span class="inspection-frame" id="inspectionFrame">FRM -- / --</span>
+                  <button class="collapse-btn" id="btnCloseInspection">CLOSE</button>
                 </div>
-              </h3>
-
-              <div class="inspection-toolbar" id="inspectionToolbar">
-                <button class="insp-mode-btn active" data-mode="seg" title="Segmentation mask overlay">Seg</button>
-                <button class="insp-mode-btn" data-mode="edge" title="Edge detection (Sobel)">Edge</button>
-                <button class="insp-mode-btn" data-mode="depth" title="Depth colormap">Depth</button>
-                <button class="insp-mode-btn" data-mode="attention" title="Attention heatmap">Attention</button>
-                <button class="insp-mode-btn" data-mode="superres" title="Super-resolution enhancement">Hi-Res</button>
-                <button class="insp-mode-btn" data-mode="3d" title="3D point cloud (rotatable)">3D</button>
               </div>
 
-              <div class="inspection-viewport" id="inspectionViewport">
-                <canvas id="inspectionCanvas"></canvas>
-                <div id="inspection3dContainer" style="display:none"></div>
-                <div class="inspection-loading" id="inspectionLoading" style="display:none">
-                  <div class="inspection-spinner"></div>
-                  <span>Loading...</span>
+              <div class="inspection-quad" id="inspectionQuad">
+                <div class="inspection-quadrant" data-mode="seg" id="quadSeg">
+                  <div class="quad-label"><span class="quad-dot quad-dot-seg"></span>SEGMENTATION</div>
+                  <canvas class="quad-canvas" id="quadCanvasSeg"></canvas>
+                  <div class="quad-metric" id="quadMetricSeg"></div>
+                  <div class="quad-loading" style="display:none"><div class="inspection-spinner"></div></div>
+                  <div class="quad-error" style="display:none"></div>
                 </div>
-                <div class="inspection-error" id="inspectionError" style="display:none"></div>
-                <div class="inspection-empty" id="inspectionEmpty">
-                  Select an object from the track cards or click a bounding box to inspect it.
+                <div class="inspection-quadrant" data-mode="edge" id="quadEdge">
+                  <div class="quad-label"><span class="quad-dot quad-dot-edge"></span>EDGE</div>
+                  <canvas class="quad-canvas" id="quadCanvasEdge"></canvas>
+                  <div class="quad-metric" id="quadMetricEdge">SOBEL</div>
                 </div>
+                <div class="inspection-quadrant" data-mode="depth" id="quadDepth">
+                  <div class="quad-label"><span class="quad-dot quad-dot-depth"></span>DEPTH</div>
+                  <canvas class="quad-canvas" id="quadCanvasDepth"></canvas>
+                  <div class="quad-metric" id="quadMetricDepth"></div>
+                  <div class="quad-loading" style="display:none"><div class="inspection-spinner"></div></div>
+                  <div class="quad-error" style="display:none"></div>
+                </div>
+                <div class="inspection-quadrant" data-mode="3d" id="quad3d">
+                  <div class="quad-label"><span class="quad-dot quad-dot-3d"></span>3D MESH</div>
+                  <div class="quad-3d-container" id="quad3dContainer"></div>
+                  <div class="quad-metric" id="quadMetric3d"></div>
+                  <div class="quad-loading" style="display:none"><div class="inspection-spinner"></div></div>
+                  <div class="quad-error" style="display:none"></div>
+                </div>
+              </div>
+
+              <div class="inspection-metrics" id="inspectionMetrics"></div>
+
+              <div class="inspection-empty" id="inspectionEmpty">
+                Select an object from the track cards or click a bounding box to inspect it.
               </div>
             </div>
 

frontend/js/api/inspection-api.js

@@ -151,75 +151,6 @@ APP.api.inspection._decodeDepthJson = function (json) {
     };
 };
 
-/**
- * Fetch attention heatmap for a specific track on a specific frame.
- * @param {string} jobId
- * @param {number} frameIdx
- * @param {string} trackId
- * @returns {Promise<Object>} { width, height, data: Float32Array }
- */
-APP.api.inspection.fetchAttention = async function (jobId, frameIdx, trackId) {
-    const base = APP.core.state.hf.baseUrl;
-    const url = `${base}/inspect/attention/${jobId}/${frameIdx}/${encodeURIComponent(trackId)}?format=json`;
-    const resp = await fetch(url);
-    if (!resp.ok) throw new Error(`Attention fetch failed: ${resp.status}`);
-
-    const json = await resp.json();
-    const raw = atob(json.data_b64);
-    const buf = new ArrayBuffer(raw.length);
-    const view = new Uint8Array(buf);
-    for (let i = 0; i < raw.length; i++) view[i] = raw.charCodeAt(i);
-
-    return {
-        width: json.width,
-        height: json.height,
-        data: new Float32Array(buf),
-        trackId: json.track_id || trackId,
-        frameIdx: json.frame_idx || frameIdx
-    };
-};
-
-/**
- * Request super-resolution enhancement of a cropped region.
- * @param {string} jobId
- * @param {number} frameIdx
- * @param {string} trackId
- * @param {number} scale upscale factor (default 4)
- * @returns {Promise<HTMLImageElement>}
- */
-APP.api.inspection.fetchSuperRes = async function (jobId, frameIdx, trackId, scale) {
-    const base = APP.core.state.hf.baseUrl;
-    scale = scale || 4;
-
-    // Poll loop: backend may return 202 while processing
-    const MAX_POLLS = 20;
-    for (let attempt = 0; attempt < MAX_POLLS; attempt++) {
-        const resp = await fetch(`${base}/inspect/super-resolve/${jobId}/${frameIdx}`, {
-            method: "POST",
-            headers: { "Content-Type": "application/json" },
-            body: JSON.stringify({ track_id: trackId, scale: scale, padding: 0.20 })
-        });
-
-        if (resp.status === 202) {
-            await new Promise(r => setTimeout(r, 2000));
-            continue;
-        }
-        if (!resp.ok) throw new Error(`Super-resolve failed: ${resp.status}`);
-
-        const blob = await resp.blob();
-        const blobUrl = URL.createObjectURL(blob);
-        return new Promise((resolve, reject) => {
-            const img = new Image();
-            img.onload = () => resolve(img);
-            img.onerror = () => reject(new Error("Failed to decode super-res image"));
-            img.src = blobUrl;
-            img._blobUrl = blobUrl;
-        });
-    }
-
-    throw new Error("Super-resolve timed out after polling");
-};
-
 /**
  * Fetch 3D mesh or point cloud data for a specific object.
  * @param {string} jobId

frontend/js/core/state.js

@@ -71,22 +71,19 @@ APP.core.state = {
     },
 
     inspection: {
-        visible: false,            // panel open/closed
-        trackId: null,             // currently inspected track ID (e.g., "T01")
-        mode: "seg",               // active viz: "seg"|"edge"|"depth"|"attention"|"superres"|"3d"
-        frameIdx: null,            // frame index being inspected
-        frameImageUrl: null,       // blob URL of the raw frame JPEG
-        loading: false,            // true while fetching data
-        error: null,               // error message string or null
+        visible: false,
+        trackId: null,
+        frameIdx: null,
+        frameImageUrl: null,
+        loading: false,
+        error: null,
+        expandedQuadrant: null,    // null | "seg" | "edge" | "depth" | "3d"
 
-        // Per-mode cached data (cleared on track/frame change)
         cache: {
-            seg: null,             // { mask, color, bbox } from API
-            edge: null,            // ImageData from client-side Sobel
-            depth: null,           // { width, height, data (Float32Array), min, max }
-            attention: null,       // { width, height, data (Float32Array) }
-            superres: null,        // blob URL of enhanced image
-            pointcloud: null       // { positions, colors, numPoints, bbox3d }
+            seg: null,
+            edge: null,
+            depth: null,
+            pointcloud: null
         }
     }
 };

frontend/js/ui/inspection-3d.js

@@ -29,20 +29,16 @@ APP.ui.inspection3d.render = async function (data) {
     if (!data || !data.positions || !data.colors) return;
 
     const { $ } = APP.core.utils;
-    const container = $("#inspection3dContainer");
+    const container = $("#quad3dContainer");
     if (!container) return;
 
-    APP.ui.inspection._setLoading(true, "3d");
-
     try {
         await APP.ui.inspection3d._ensureThreeJs();
     } catch (err) {
-        APP.ui.inspection._setLoading(false);
-        APP.ui.inspection._setError("Failed to load 3D libraries: " + err.message);
+        console.error("Failed to load 3D libraries:", err);
         return;
     }
 
-    APP.ui.inspection._setLoading(false);
     APP.ui.inspection3d.dispose();
     APP.ui.inspection3d._disposed = false;
 

frontend/js/ui/inspection-renders.js

@@ -1,37 +1,6 @@
 // Inspection Renderers — per-mode canvas drawing functions
 APP.ui.inspectionRenders = {};
 
-/**
- * Dispatch rendering to the correct mode handler.
- * @param {string} mode
- * @param {HTMLImageElement} frameImg — the base video frame
- * @param {Object} cache — state.inspection.cache
- * @param {Object} track — the selected track object with .bbox
- */
-APP.ui.inspectionRenders.dispatch = function (mode, frameImg, cache, track) {
-    const { $ } = APP.core.utils;
-    const canvas = $("#inspectionCanvas");
-    if (!canvas) return;
-
-    switch (mode) {
-        case "seg":
-            APP.ui.inspectionRenders._renderSeg(canvas, frameImg, cache.seg, track);
-            break;
-        case "edge":
-            APP.ui.inspectionRenders._renderEdge(canvas, frameImg, cache.edge, track);
-            break;
-        case "depth":
-            APP.ui.inspectionRenders._renderDepth(canvas, frameImg, cache.depth, track);
-            break;
-        case "attention":
-            APP.ui.inspectionRenders._renderAttention(canvas, frameImg, cache.attention, track);
-            break;
-        case "superres":
-            APP.ui.inspectionRenders._renderSuperRes(canvas, cache.superres, track);
-            break;
-    }
-};
-
 /**
  * Render segmentation mask overlay on the frame.
  * Shows the full frame dimmed, with the selected object's mask highlighted.
@@ -427,173 +396,6 @@ APP.ui.inspectionRenders._drawTrackDepthStats = function (ctx, track, canvasW, c
     ctx.fillText(`Depth: ${avgDepth.toFixed(1)}m (${localMin.toFixed(1)}-${localMax.toFixed(1)})`, bx + 4, by + 16);
 };
 
-/**
- * Render attention heatmap (GradCAM) overlaid on the base frame.
- * Uses inferno colormap with semi-transparent blending.
- */
-APP.ui.inspectionRenders._renderAttention = function (canvas, frameImg, attentionData, track) {
-    if (!frameImg) return;
-
-    const w = frameImg.naturalWidth || frameImg.width;
-    const h = frameImg.naturalHeight || frameImg.height;
-    canvas.width = w;
-    canvas.height = h;
-    const ctx = canvas.getContext("2d");
-
-    // Draw base frame (slightly dimmed to make heatmap more visible)
-    ctx.drawImage(frameImg, 0, 0);
-    ctx.fillStyle = "rgba(0, 0, 0, 0.2)";
-    ctx.fillRect(0, 0, w, h);
-
-    if (!attentionData || !attentionData.data) {
-        ctx.fillStyle = "rgba(0,0,0,0.5)";
-        ctx.fillRect(0, 0, w, h);
-        ctx.fillStyle = "#aaa";
-        ctx.font = "14px monospace";
-        ctx.textAlign = "center";
-        ctx.fillText("Attention data not available", w / 2, h / 2);
-        return;
-    }
-
-    // Render attention as inferno colormap overlay
-    const aw = attentionData.width;
-    const ah = attentionData.height;
-    const ad = attentionData.data;
-
-    const heatCanvas = document.createElement("canvas");
-    heatCanvas.width = aw;
-    heatCanvas.height = ah;
-    const hctx = heatCanvas.getContext("2d");
-    const img = hctx.createImageData(aw, ah);
-    const id = img.data;
-
-    // Track peak attention value for stats
-    let peakVal = 0;
-    let sumVal = 0;
-
-    for (let i = 0; i < ad.length; i++) {
-        const t = APP.core.utils.clamp(ad[i], 0, 1);
-        if (t > peakVal) peakVal = t;
-        sumVal += t;
-        const rgb = APP.ui.inspectionRenders._inferno(t);
-        const oi = i * 4;
-        id[oi]     = rgb[0];
-        id[oi + 1] = rgb[1];
-        id[oi + 2] = rgb[2];
-        // Alpha: low values are very transparent, high values are semi-opaque
-        // Use a power curve for better visual contrast
-        id[oi + 3] = Math.round(Math.pow(t, 0.7) * 200);
-    }
-
-    hctx.putImageData(img, 0, 0);
-
-    // Use bilinear upscaling for smooth heatmap (attention resolution is typically low)
-    ctx.imageSmoothingEnabled = true;
-    ctx.imageSmoothingQuality = "high";
-    ctx.drawImage(heatCanvas, 0, 0, w, h);
-
-    // Draw bbox highlight
-    APP.ui.inspectionRenders._drawBBoxHighlight(ctx, track, w, h);
-
-    // Draw attention legend and stats
-    const avgVal = ad.length > 0 ? sumVal / ad.length : 0;
-    APP.ui.inspectionRenders._drawAttentionLegend(ctx, w, h, peakVal, avgVal);
-};
-
-/**
- * Draw an attention intensity legend with inferno colormap bar.
- */
-APP.ui.inspectionRenders._drawAttentionLegend = function (ctx, canvasW, canvasH, peakVal, avgVal) {
-    const barW = 16;
-    const barH = Math.min(140, canvasH - 60);
-    const x = canvasW - barW - 30;
-    const y = 30;
-
-    // Background panel
-    ctx.fillStyle = "rgba(0, 0, 0, 0.55)";
-    ctx.fillRect(x - 6, y - 20, barW + 60, barH + 56);
-    ctx.strokeStyle = "rgba(255, 255, 255, 0.15)";
-    ctx.lineWidth = 1;
-    ctx.strokeRect(x - 6, y - 20, barW + 60, barH + 56);
-
-    // Draw gradient bar (top = high attention, bottom = low)
-    for (let py = 0; py < barH; py++) {
-        const t = 1 - (py / (barH - 1)); // 0 = bottom (low), 1 = top (high)
-        const rgb = APP.ui.inspectionRenders._inferno(t);
-        ctx.fillStyle = `rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`;
-        ctx.fillRect(x, y + py, barW, 1);
-    }
-
-    // Border around bar
-    ctx.strokeStyle = "rgba(255, 255, 255, 0.3)";
-    ctx.lineWidth = 1;
-    ctx.strokeRect(x, y, barW, barH);
-
-    // Labels
-    ctx.fillStyle = "rgba(255, 255, 255, 0.8)";
-    ctx.font = "10px monospace";
-    ctx.textAlign = "left";
-    ctx.fillText("High", x + barW + 4, y + 10);
-    ctx.fillText("Low", x + barW + 4, y + barH);
-
-    // Title
-    ctx.fillStyle = "rgba(255, 255, 255, 0.6)";
-    ctx.font = "9px monospace";
-    ctx.textAlign = "center";
-    ctx.fillText("ATTENTION", x + barW / 2, y - 6);
-
-    // Stats
-    ctx.fillStyle = "rgba(252, 255, 164, 0.8)"; // inferno yellow
-    ctx.font = "10px monospace";
-    ctx.textAlign = "left";
-    ctx.fillText(`Peak: ${(peakVal * 100).toFixed(0)}%`, x - 2, y + barH + 18);
-    ctx.fillText(`Avg:  ${(avgVal * 100).toFixed(0)}%`, x - 2, y + barH + 32);
-};
-
-/**
- * Render super-resolved image centered in the viewport.
- */
-APP.ui.inspectionRenders._renderSuperRes = function (canvas, srImg, track) {
-    if (!srImg) return;
-
-    const iw = srImg.naturalWidth || srImg.width;
-    const ih = srImg.naturalHeight || srImg.height;
-
-    // Size canvas to fit the super-res image with padding
-    const maxW = canvas.parentElement ? canvas.parentElement.clientWidth : 800;
-    const maxH = canvas.parentElement ? canvas.parentElement.clientHeight : 400;
-
-    const scale = Math.min(maxW / iw, maxH / ih, 1);
-    const drawW = Math.round(iw * scale);
-    const drawH = Math.round(ih * scale);
-
-    canvas.width = maxW;
-    canvas.height = maxH;
-    const ctx = canvas.getContext("2d");
-
-    // Black background
-    ctx.fillStyle = "#000";
-    ctx.fillRect(0, 0, maxW, maxH);
-
-    // Center the image
-    const x = Math.round((maxW - drawW) / 2);
-    const y = Math.round((maxH - drawH) / 2);
-    ctx.drawImage(srImg, x, y, drawW, drawH);
-
-    // Label showing original vs upscaled dimensions
-    const origW = Math.round(iw / 4);
-    const origH = Math.round(ih / 4);
-    ctx.fillStyle = "rgba(0,0,0,0.6)";
-    ctx.fillRect(x, y, 260, 32);
-    ctx.fillStyle = "rgba(255,255,255,0.7)";
-    ctx.font = "11px monospace";
-    ctx.textAlign = "left";
-    ctx.fillText(`SUPER-RES  ${origW}x${origH} -> ${iw}x${ih}  (4x)`, x + 6, y + 14);
-    ctx.fillStyle = "rgba(255,255,255,0.45)";
-    ctx.font = "9px monospace";
-    ctx.fillText(`Enhanced resolution via deep upscaling`, x + 6, y + 26);
-};
-
 /**
  * Draw a highlighted bounding box for the selected track.
  */
@@ -616,20 +418,6 @@ APP.ui.inspectionRenders._viridis = function (t) {
     return APP.ui.inspectionRenders._interpolateColormap(t, stops);
 };
 
-/**
- * Inferno-like colormap: t in [0,1] -> [R, G, B] in [0,255].
- */
-APP.ui.inspectionRenders._inferno = function (t) {
-    const stops = [
-        [0.0,  0, 0, 4],
-        [0.25, 87, 16, 110],
-        [0.5,  188, 55, 84],
-        [0.75, 249, 142, 9],
-        [1.0,  252, 255, 164]
-    ];
-    return APP.ui.inspectionRenders._interpolateColormap(t, stops);
-};
-
 /**
  * Linearly interpolate a colormap defined by stops.
  * @param {number} t — value in [0,1]

frontend/js/ui/inspection.js

@@ -1,159 +1,41 @@
-// Inspection Panel Controller — manages panel visibility, mode switching, data loading
+// Inspection Panel Controller — quad view: seg, edge, depth, 3D simultaneously
 APP.ui.inspection = {};
 
 /**
- * Initialize: wire toolbar buttons, close button.
+ * Initialize: wire close button, quad expand/collapse, Escape key.
  * Called once from main.js init().
  */
 APP.ui.inspection.init = function () {
     const { $ } = APP.core.utils;
 
-    // Mode toolbar buttons
-    const toolbar = $("#inspectionToolbar");
-    if (toolbar) {
-        toolbar.addEventListener("click", (e) => {
-            const btn = e.target.closest(".insp-mode-btn");
-            if (!btn) return;
-            const mode = btn.getAttribute("data-mode");
-            APP.ui.inspection.setMode(mode);
-        });
-    }
-
     // Close button
     const closeBtn = $("#btnCloseInspection");
     if (closeBtn) {
-        closeBtn.addEventListener("click", () => {
-            APP.ui.inspection.close();
-        });
+        closeBtn.addEventListener("click", () => 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)`;
+    // Quad expand/collapse (event delegation)
+    const quad = $("#inspectionQuad");
+    if (quad) {
+        quad.addEventListener("click", (e) => {
+            const quadrant = e.target.closest(".inspection-quadrant");
+            if (!quadrant) return;
+            const mode = quadrant.getAttribute("data-mode");
+            APP.ui.inspection._toggleExpand(mode);
+        });
     }
 
-    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);
+    // Escape to collapse
+    document.addEventListener("keydown", (e) => {
+        if (e.key === "Escape" && APP.core.state.inspection.expandedQuadrant) {
+            APP.ui.inspection._collapseExpanded();
         }
     });
-
-    // 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");
-    };
 };
 
 /**
  * Open the inspection panel for a specific track.
- * @param {string} trackId — e.g., "T01"
+ * @param {string} trackId
  */
 APP.ui.inspection.open = function (trackId) {
     const { state } = APP.core;
@@ -174,36 +56,31 @@ APP.ui.inspection.open = function (trackId) {
     }
     if (!isFinite(frameIdx) || frameIdx < 0) frameIdx = 0;
 
+    // Collapse any expanded quadrant
+    APP.ui.inspection._collapseExpanded();
+
     // Update state
     state.inspection.trackId = trackId;
     state.inspection.frameIdx = frameIdx;
     state.inspection.visible = true;
     state.inspection.error = null;
 
-    // Clear caches if track or frame changed
+    // Clear caches
     APP.ui.inspection._clearCaches();
 
-    // Reset 3D spin rotation
-    if (APP.ui.inspection._resetSpin) APP.ui.inspection._resetSpin();
-
     // Show panel
     panel.style.display = "flex";
 
-    // Update header
-    const target = $("#inspectionTarget");
-    const track = (state.detections || []).find(d => d.id === trackId);
-    if (target) {
-        target.textContent = track
-            ? `${track.label} / Frame ${frameIdx}`
-            : `Frame ${frameIdx}`;
-    }
-
     // Hide empty state
     const empty = $("#inspectionEmpty");
     if (empty) empty.style.display = "none";
 
-    // Load data for current mode
-    APP.ui.inspection._loadAndRender();
+    // Update header
+    const track = (state.detections || []).find(d => d.id === trackId);
+    APP.ui.inspection._updateHeader(track, frameIdx);
+
+    // Load all quadrants
+    APP.ui.inspection._loadAllQuadrants();
 };
 
 /**
@@ -218,60 +95,18 @@ APP.ui.inspection.close = function () {
     state.inspection.loading = false;
     state.inspection.error = null;
 
+    APP.ui.inspection._collapseExpanded();
     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";
 
-    // Clean up 3D scene if active
+    // Clean up 3D scene
     if (APP.ui.inspection3d && APP.ui.inspection3d.dispose) {
         APP.ui.inspection3d.dispose();
     }
 };
 
-/**
- * Switch visualization mode.
- * @param {string} mode — "seg"|"edge"|"depth"|"attention"|"superres"|"3d"
- */
-APP.ui.inspection.setMode = function (mode) {
-    const { state } = APP.core;
-    const { $, $$ } = APP.core.utils;
-
-    const validModes = ["seg", "edge", "depth", "attention", "superres", "3d"];
-    if (!validModes.includes(mode)) return;
-
-    state.inspection.mode = mode;
-
-    // Update toolbar active state
-    const buttons = $$(".insp-mode-btn");
-    buttons.forEach(btn => {
-        btn.classList.toggle("active", btn.getAttribute("data-mode") === mode);
-    });
-
-    // Toggle canvas vs 3D container visibility
-    const canvas = $("#inspectionCanvas");
-    const container3d = $("#inspection3dContainer");
-    if (mode === "3d") {
-        if (canvas) canvas.style.display = "none";
-        if (container3d) container3d.style.display = "block";
-    } else {
-        if (canvas) canvas.style.display = "block";
-        if (container3d) container3d.style.display = "none";
-        // Dispose 3D scene when switching away
-        if (APP.ui.inspection3d && APP.ui.inspection3d.dispose) {
-            APP.ui.inspection3d.dispose();
-        }
-    }
-
-    // Load data if panel is open
-    if (state.inspection.visible && state.inspection.trackId) {
-        APP.ui.inspection._loadAndRender();
-    }
-};
-
 /**
  * Refresh inspection for the current video time (called when user seeks).
  */
@@ -289,37 +124,57 @@ APP.ui.inspection.refreshFrame = function () {
     }
     if (!isFinite(frameIdx) || frameIdx < 0) frameIdx = 0;
 
-    // Only refresh if frame actually changed
     if (frameIdx === state.inspection.frameIdx) return;
 
     state.inspection.frameIdx = frameIdx;
     APP.ui.inspection._clearCaches();
 
-    // Update header
-    const target = $("#inspectionTarget");
+    // Update header frame counter
     const track = (state.detections || []).find(d => d.id === state.inspection.trackId);
-    if (target) {
-        target.textContent = track
-            ? `${track.label} / Frame ${frameIdx}`
-            : `Frame ${frameIdx}`;
-    }
+    APP.ui.inspection._updateHeader(track, frameIdx);
 
-    APP.ui.inspection._loadAndRender();
+    APP.ui.inspection._loadAllQuadrants();
 };
 
 /**
- * Internal: clear all cached visualization data.
+ * Update the inspection header bar.
+ */
+APP.ui.inspection._updateHeader = function (track, frameIdx) {
+    const { $ } = APP.core.utils;
+    const { state } = APP.core;
+    const totalFrames = state.hf.totalFrames || "--";
+
+    const nameEl = $("#inspectionObjName");
+    const confEl = $("#inspectionConf");
+    const statusEl = $("#inspectionStatus");
+    const frameEl = $("#inspectionFrame");
+
+    if (nameEl) nameEl.textContent = (track && track.label || "UNKNOWN").toUpperCase();
+    if (confEl) confEl.textContent = track ? (track.score || 0).toFixed(2) : "--";
+    if (frameEl) frameEl.textContent = `FRM ${frameIdx} / ${totalFrames}`;
+
+    if (statusEl) {
+        statusEl.className = "inspection-status";
+        if (track && track.satisfies === true) {
+            statusEl.textContent = "MISSION MATCH";
+            statusEl.classList.add("match");
+        } else if (track && track.satisfies === false) {
+            statusEl.textContent = "NO MATCH";
+            statusEl.classList.add("no-match");
+        } else {
+            statusEl.textContent = "PENDING";
+            statusEl.classList.add("pending");
+        }
+    }
+};
+
+/**
+ * Clear all cached visualization data.
  */
 APP.ui.inspection._clearCaches = function () {
     const { state } = APP.core;
     const cache = state.inspection.cache;
 
-    // Revoke any blob URLs
-    if (cache.superres && cache.superres._blobUrl) {
-        URL.revokeObjectURL(cache.superres._blobUrl);
-    }
-
-    // Revoke frame image URL
     if (state.inspection._frameImg && state.inspection._frameImg._blobUrl) {
         URL.revokeObjectURL(state.inspection._frameImg._blobUrl);
     }
@@ -329,137 +184,227 @@ APP.ui.inspection._clearCaches = function () {
     cache.seg = null;
     cache.edge = null;
     cache.depth = null;
-    cache.attention = null;
-    cache.superres = null;
     cache.pointcloud = null;
 };
 
 /**
- * Internal: show/hide loading indicator with optional mode-specific message.
- * @param {boolean} loading
- * @param {string} [mode] — if provided, shows a mode-specific message
- */
-APP.ui.inspection._setLoading = function (loading, mode) {
-    const { $ } = APP.core.utils;
-    const el = $("#inspectionLoading");
-    if (el) {
-        el.style.display = loading ? "flex" : "none";
-        // Update loading message based on mode
-        const msgEl = el.querySelector("span");
-        if (msgEl && loading && mode) {
-            const modeMessages = {
-                seg: "Computing segmentation mask...",
-                edge: "Computing edges...",
-                depth: "Computing depth map...",
-                attention: "Generating attention heatmap...",
-                superres: "Enhancing resolution...",
-                "3d": "Generating point cloud..."
-            };
-            msgEl.textContent = modeMessages[mode] || "Loading...";
-        } else if (msgEl && !loading) {
-            msgEl.textContent = "Loading...";
-        }
-    }
-    APP.core.state.inspection.loading = loading;
-};
-
-/**
- * Internal: show error message in the viewport.
- */
-APP.ui.inspection._setError = function (msg) {
-    const { $ } = APP.core.utils;
-    const el = $("#inspectionError");
-    if (el) {
-        el.textContent = msg || "";
-        el.style.display = msg ? "flex" : "none";
-    }
-    APP.core.state.inspection.error = msg;
-};
-
-/**
- * Internal: load data for the current mode, then render.
- * Caches results so repeated mode switches don't refetch.
+ * Load and render all four quadrants in parallel.
  */
-APP.ui.inspection._loadAndRender = async function () {
+APP.ui.inspection._loadAllQuadrants = async function () {
     const { state } = APP.core;
-    const { log } = APP.ui.logging;
+    const { $ } = APP.core.utils;
     const api = APP.api.inspection;
     const renders = APP.ui.inspectionRenders;
-    const { trackId, frameIdx, mode, cache } = state.inspection;
+    const { trackId, frameIdx, cache } = state.inspection;
 
     const jobId = state.hf.asyncJobId || state.hf.completedJobId;
     if (!jobId || !trackId || frameIdx == null) return;
 
-    APP.ui.inspection._setError(null);
-
-    // Get the track object for bbox info
     const track = (state.detections || []).find(d => d.id === trackId);
     if (!track || !track.bbox) {
-        APP.ui.inspection._setError("Track not found in current frame");
+        APP.ui.inspection._showQuadError("seg", "Track not found");
         return;
     }
 
     try {
-        // --- Step 1: Ensure we have the base frame image (shared by most modes) ---
-        // Fetch cropped to the selected track's bbox with 20% padding
-        if (!state.inspection._frameImg && mode !== "3d") {
-            APP.ui.inspection._setLoading(true, mode);
+        // Step 1: Fetch shared frame image
+        if (!state.inspection._frameImg) {
             const frameImg = await api.fetchFrame(jobId, frameIdx, trackId, 0.20);
-            state.inspection.frameImageUrl = frameImg.src;
             state.inspection._frameImg = frameImg;
+            state.inspection.frameImageUrl = frameImg.src;
         }
+    } catch (err) {
+        APP.ui.inspection._showQuadError("seg", "Frame load failed");
+        APP.ui.inspection._showQuadError("depth", "Frame load failed");
+        return;
+    }
 
-        // --- Step 2: Fetch mode-specific data if not cached ---
-        if (!cache[mode]) {
-            APP.ui.inspection._setLoading(true, mode);
-
-            switch (mode) {
-                case "seg":
-                    cache.seg = await api.fetchMask(jobId, frameIdx, trackId);
-                    break;
-
-                case "edge":
-                    // Pure frontend — computed from the frame image
-                    if (state.inspection._frameImg && renders) {
-                        cache.edge = renders.computeEdge(state.inspection._frameImg);
-                    }
-                    break;
-
-                case "depth":
-                    cache.depth = await api.fetchDepth(jobId, frameIdx, trackId);
-                    break;
-
-                case "attention":
-                    cache.attention = await api.fetchAttention(jobId, frameIdx, trackId);
-                    break;
-
-                case "superres": {
-                    const srImg = await api.fetchSuperRes(jobId, frameIdx, trackId, 4);
-                    cache.superres = srImg;
-                    break;
-                }
-
-                case "3d":
-                    cache.pointcloud = await api.fetchPointCloud(jobId, frameIdx, trackId);
-                    break;
-            }
+    const frameImg = state.inspection._frameImg;
+
+    // Step 2: Fire all four in parallel
+    const segPromise = (async () => {
+        APP.ui.inspection._showQuadLoading("seg", true);
+        try {
+            if (!cache.seg) cache.seg = await api.fetchMask(jobId, frameIdx, trackId);
+            const canvas = $("#quadCanvasSeg");
+            if (canvas && renders) renders._renderSeg(canvas, frameImg, cache.seg, track);
+            APP.ui.inspection._updateQuadMetric("seg", cache.seg);
+        } catch (e) {
+            APP.ui.inspection._showQuadError("seg", e.message);
         }
+        APP.ui.inspection._showQuadLoading("seg", false);
+    })();
 
-        APP.ui.inspection._setLoading(false);
+    const edgePromise = (async () => {
+        try {
+            if (!cache.edge && frameImg && renders) {
+                cache.edge = renders.computeEdge(frameImg);
+            }
+            const canvas = $("#quadCanvasEdge");
+            if (canvas && renders) renders._renderEdge(canvas, frameImg, cache.edge, track);
+        } catch (e) {
+            // Edge is client-side only, unlikely to fail
+            console.error("Edge render error:", e);
+        }
+    })();
+
+    const depthPromise = (async () => {
+        APP.ui.inspection._showQuadLoading("depth", true);
+        try {
+            if (!cache.depth) cache.depth = await api.fetchDepth(jobId, frameIdx, trackId);
+            const canvas = $("#quadCanvasDepth");
+            if (canvas && renders) renders._renderDepth(canvas, frameImg, cache.depth, track);
+            APP.ui.inspection._updateQuadMetric("depth", cache.depth);
+        } catch (e) {
+            APP.ui.inspection._showQuadError("depth", e.message);
+        }
+        APP.ui.inspection._showQuadLoading("depth", false);
+    })();
 
-        // --- Step 3: Render ---
-        if (mode === "3d") {
+    const threeDPromise = (async () => {
+        APP.ui.inspection._showQuadLoading("3d", true);
+        try {
+            if (!cache.pointcloud) cache.pointcloud = await api.fetchPointCloud(jobId, frameIdx, trackId);
             if (APP.ui.inspection3d && APP.ui.inspection3d.render && cache.pointcloud) {
                 APP.ui.inspection3d.render(cache.pointcloud);
             }
-        } else if (renders) {
-            renders.dispatch(mode, state.inspection._frameImg, cache, track);
+            APP.ui.inspection._updateQuadMetric("3d", cache.pointcloud);
+        } catch (e) {
+            APP.ui.inspection._showQuadError("3d", e.message);
         }
+        APP.ui.inspection._showQuadLoading("3d", false);
+    })();
 
-    } catch (err) {
-        APP.ui.inspection._setLoading(false);
-        APP.ui.inspection._setError(`Failed to load ${mode}: ${err.message}`);
-        log(`Inspection error (${mode}): ${err.message}`, "e");
-        console.error("Inspection load error:", err);
+    await Promise.allSettled([segPromise, edgePromise, depthPromise, threeDPromise]);
+
+    // Step 3: Update bottom metrics
+    APP.ui.inspection._updateBottomMetrics(track, cache);
+};
+
+/**
+ * Toggle per-quadrant loading spinner.
+ */
+APP.ui.inspection._showQuadLoading = function (mode, show) {
+    const modeToId = { seg: "quadSeg", edge: "quadEdge", depth: "quadDepth", "3d": "quad3d" };
+    const el = document.getElementById(modeToId[mode]);
+    if (!el) return;
+    const loader = el.querySelector(".quad-loading");
+    if (loader) loader.style.display = show ? "flex" : "none";
+};
+
+/**
+ * Show per-quadrant error message.
+ */
+APP.ui.inspection._showQuadError = function (mode, msg) {
+    const modeToId = { seg: "quadSeg", edge: "quadEdge", depth: "quadDepth", "3d": "quad3d" };
+    const el = document.getElementById(modeToId[mode]);
+    if (!el) return;
+    const errEl = el.querySelector(".quad-error");
+    if (errEl) {
+        errEl.textContent = msg || "";
+        errEl.style.display = msg ? "flex" : "none";
+    }
+};
+
+/**
+ * Update per-quadrant metric overlay text.
+ */
+APP.ui.inspection._updateQuadMetric = function (mode, data) {
+    const { $ } = APP.core.utils;
+    if (!data) return;
+
+    if (mode === "seg") {
+        // Count mask pixels from RLE or mask image
+        let area = 0;
+        if (data.rle && data.rle.counts) {
+            let val = 0;
+            for (const count of data.rle.counts) {
+                if (val) area += count;
+                val = 1 - val;
+            }
+        }
+        const el = $("#quadMetricSeg");
+        if (el) el.textContent = area > 0 ? `AREA ${area.toLocaleString()} px` : "";
+    } else if (mode === "depth") {
+        const el = $("#quadMetricDepth");
+        if (el && data.min != null && data.max != null) {
+            const avg = ((data.min + data.max) / 2).toFixed(1);
+            el.textContent = `${avg}m`;
+        }
+    } else if (mode === "3d") {
+        const el = $("#quadMetric3d");
+        if (el) {
+            const n = data.numVertices || (data.positions ? data.positions.length / 3 : 0);
+            const label = data.renderMode === "mesh" ? "verts" : "pts";
+            el.textContent = `${n.toLocaleString()} ${label}`;
+        }
+    }
+};
+
+/**
+ * Update the bottom metrics strip.
+ */
+APP.ui.inspection._updateBottomMetrics = function (track, cache) {
+    const { $ } = APP.core.utils;
+    const el = $("#inspectionMetrics");
+    if (!el || !track) return;
+
+    const speed = track.speed_kph != null ? `${Math.round(track.speed_kph)} kph` : "N/A";
+    const depth = track.depth_est_m != null ? `${track.depth_est_m.toFixed(1)}m` : "N/A";
+
+    let area = "N/A";
+    if (cache.seg && cache.seg.rle && cache.seg.rle.counts) {
+        let px = 0, val = 0;
+        for (const count of cache.seg.rle.counts) {
+            if (val) px += count;
+            val = 1 - val;
+        }
+        if (px > 0) area = `${px.toLocaleString()} px`;
+    }
+
+    const frames = track.frameCount || "--";
+
+    el.innerHTML =
+        `VEL <span>${speed}</span>` +
+        `DEPTH <span>${depth}</span>` +
+        `AREA <span>${area}</span>` +
+        `TRACKED <span>${frames} frm</span>`;
+};
+
+/**
+ * Toggle expand/collapse of a quadrant.
+ */
+APP.ui.inspection._toggleExpand = function (mode) {
+    const { state } = APP.core;
+    if (state.inspection.expandedQuadrant === mode) {
+        APP.ui.inspection._collapseExpanded();
+    } else {
+        APP.ui.inspection._collapseExpanded();
+        const modeToId = { seg: "quadSeg", edge: "quadEdge", depth: "quadDepth", "3d": "quad3d" };
+        const el = document.getElementById(modeToId[mode]);
+        if (el) {
+            el.classList.add("expanded");
+            state.inspection.expandedQuadrant = mode;
+            // Trigger resize for 3D renderer
+            if (mode === "3d") {
+                setTimeout(() => window.dispatchEvent(new Event("resize")), 50);
+            }
+        }
+    }
+};
+
+/**
+ * Collapse any currently expanded quadrant.
+ */
+APP.ui.inspection._collapseExpanded = function () {
+    const { state } = APP.core;
+    const was3d = state.inspection.expandedQuadrant === "3d";
+
+    const expanded = document.querySelector(".inspection-quadrant.expanded");
+    if (expanded) expanded.classList.remove("expanded");
+    state.inspection.expandedQuadrant = null;
+
+    if (was3d) {
+        setTimeout(() => window.dispatchEvent(new Event("resize")), 50);
     }
 };

frontend/style.css

@@ -1336,14 +1336,14 @@ body.state-complete .viewbox {
 }
 
 /* =========================================
-   Inspection Panel
+   Inspection Panel — Quad View
    ========================================= */
 
 .panel-inspection {
     grid-column: 1;
     grid-row: 2;
-    max-height: 480px;
-    min-height: 320px;
+    max-height: 520px;
+    min-height: 360px;
     display: flex;
     flex-direction: column;
     animation: panelSlideUp 0.3s cubic-bezier(.4, 0, .2, 1);
@@ -1354,83 +1354,250 @@ body.state-complete .viewbox {
     to   { opacity: 1; transform: translateY(0); }
 }
 
-.inspection-toolbar {
+/* --- Header --- */
+
+.inspection-header {
     display: flex;
-    gap: 3px;
-    margin-bottom: 10px;
-    background: rgba(255,255,255,.02);
-    border-radius: var(--radius-sm);
-    padding: 3px;
-    border: 1px solid var(--border);
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px 12px;
+    border-bottom: 1px solid rgba(255,255,255,0.04);
 }
 
-.insp-mode-btn {
-    cursor: pointer;
-    border: 1px solid transparent;
-    border-radius: 6px;
-    padding: 5px 12px;
-    font-size: 11px;
-    font-weight: 600;
+.inspection-header-left {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.inspection-obj-name {
+    font-size: 14px;
+    font-weight: 700;
+    color: #e2e8f0;
+    letter-spacing: 0.5px;
     font-family: var(--mono);
-    color: var(--text3);
-    background: transparent;
-    transition: all 0.15s ease;
-    flex: 1;
-    text-align: center;
 }
 
-.insp-mode-btn:hover {
-    background: rgba(255,255,255,.04);
-    color: var(--text2);
+.inspection-conf {
+    font-size: 10px;
+    color: #64748b;
+    font-family: var(--mono);
 }
 
-.insp-mode-btn.active {
-    color: var(--text);
-    background: rgba(59, 130, 246, .1);
-    border-color: rgba(59, 130, 246, .2);
-    box-shadow: 0 0 12px rgba(59, 130, 246, .06);
+.inspection-status {
+    font-size: 8px;
+    padding: 2px 8px;
+    border-radius: 2px;
+    letter-spacing: 0.5px;
+    font-family: var(--mono);
+    font-weight: 600;
+}
+.inspection-status.match {
+    background: rgba(34,197,94,0.12);
+    border: 1px solid rgba(34,197,94,0.2);
+    color: #22c55e;
+}
+.inspection-status.no-match {
+    background: rgba(239,68,68,0.12);
+    border: 1px solid rgba(239,68,68,0.2);
+    color: #ef4444;
+}
+.inspection-status.pending {
+    background: rgba(255,255,255,0.05);
+    border: 1px solid rgba(255,255,255,0.08);
+    color: #64748b;
 }
 
-.inspection-viewport {
-    position: relative;
+.inspection-header-right {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.inspection-frame {
+    font-size: 9px;
+    color: #64748b;
+    letter-spacing: 1px;
+    font-family: var(--mono);
+}
+
+/* --- Quad Grid --- */
+
+.inspection-quad {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: 1fr 1fr;
+    gap: 8px;
     flex: 1;
-    min-height: 280px;
-    border-radius: var(--radius-sm);
+    min-height: 300px;
+    position: relative;
+    padding: 8px 12px;
+}
+
+.inspection-quadrant {
+    background: rgba(0,0,0,0.5);
+    border: 1px solid rgba(74,158,255,0.1);
+    border-radius: 5px;
+    position: relative;
     overflow: hidden;
-    background: #000;
-    border: 1px solid var(--border);
-    perspective: 1200px;
+    cursor: pointer;
+    transition: all 0.25s ease;
 }
 
-.inspection-viewport canvas {
-    width: 100%; height: 100%;
+.inspection-quadrant:hover {
+    border-color: rgba(74,158,255,0.2);
+}
+
+.inspection-quadrant.expanded {
+    position: absolute;
+    inset: 8px;
+    z-index: 10;
+    border-radius: 5px;
+}
+
+/* --- Corner Brackets --- */
+
+.inspection-quadrant::before {
+    content: '';
+    position: absolute;
+    top: 6px;
+    right: 6px;
+    width: 14px;
+    height: 14px;
+    border-top: 1.5px solid rgba(74,158,255,0.25);
+    border-right: 1.5px solid rgba(74,158,255,0.25);
+    pointer-events: none;
+    z-index: 1;
+}
+
+.inspection-quadrant::after {
+    content: '';
+    position: absolute;
+    bottom: 6px;
+    left: 6px;
+    width: 14px;
+    height: 14px;
+    border-bottom: 1.5px solid rgba(74,158,255,0.25);
+    border-left: 1.5px solid rgba(74,158,255,0.25);
+    pointer-events: none;
+    z-index: 1;
+}
+
+#quadSeg::before, #quadSeg::after { border-color: rgba(74,158,255,0.25); }
+#quadEdge::before, #quadEdge::after { border-color: rgba(148,163,184,0.2); }
+#quadDepth::before, #quadDepth::after { border-color: rgba(245,158,11,0.2); }
+#quad3d::before, #quad3d::after { border-color: rgba(34,197,94,0.2); }
+
+/* --- Quadrant Labels & Metrics --- */
+
+.quad-label {
+    position: absolute;
+    top: 8px;
+    left: 10px;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 8px;
+    letter-spacing: 2px;
+    font-family: var(--mono);
+    pointer-events: none;
+}
+
+.quad-dot {
+    width: 5px;
+    height: 5px;
+    border-radius: 50%;
+}
+
+.quad-dot-seg  { background: #4a9eff; box-shadow: 0 0 4px rgba(74,158,255,0.5); }
+.quad-dot-edge { background: #94a3b8; box-shadow: 0 0 4px rgba(148,163,184,0.5); }
+.quad-dot-depth { background: #f59e0b; box-shadow: 0 0 4px rgba(245,158,11,0.5); }
+.quad-dot-3d   { background: #22c55e; box-shadow: 0 0 4px rgba(34,197,94,0.5); }
+
+#quadSeg .quad-label  { color: rgba(74,158,255,0.6); }
+#quadEdge .quad-label { color: rgba(148,163,184,0.6); }
+#quadDepth .quad-label { color: rgba(245,158,11,0.6); }
+#quad3d .quad-label   { color: rgba(34,197,94,0.6); }
+
+.quad-metric {
+    position: absolute;
+    bottom: 8px;
+    right: 10px;
+    font-size: 8px;
+    font-family: var(--mono);
+    pointer-events: none;
+}
+
+#quadSeg .quad-metric  { color: rgba(74,158,255,0.35); }
+#quadEdge .quad-metric { color: rgba(148,163,184,0.35); }
+#quadDepth .quad-metric { color: rgba(245,158,11,0.35); }
+#quad3d .quad-metric   { color: rgba(34,197,94,0.35); }
+
+.quad-canvas {
+    width: 100%;
+    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);
+.quad-3d-container {
+    position: absolute;
+    inset: 0;
+    z-index: 2;
 }
 
-#inspection3dContainer { position: absolute; inset: 0; z-index: 2; }
-#inspection3dContainer canvas { width: 100% !important; height: 100% !important; }
+.quad-3d-container canvas {
+    width: 100% !important;
+    height: 100% !important;
+}
 
-.inspection-loading {
-    position: absolute; inset: 0;
-    display: flex; flex-direction: column;
-    align-items: center; justify-content: center;
-    gap: 10px;
-    background: rgba(0,0,0,.6);
-    backdrop-filter: blur(4px);
+/* --- Per-Quadrant Loading/Error --- */
+
+.quad-loading {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(0,0,0,0.5);
+    backdrop-filter: blur(2px);
     z-index: 5;
-    color: var(--text3);
-    font-size: 12px;
 }
 
+.quad-error {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(0,0,0,0.5);
+    z-index: 5;
+    color: var(--danger);
+    font-size: 10px;
+    font-family: var(--mono);
+    padding: 10px;
+    text-align: center;
+}
+
+/* --- Bottom Metrics Strip --- */
+
+.inspection-metrics {
+    display: flex;
+    gap: 24px;
+    padding: 8px 12px;
+    border-top: 1px solid rgba(255,255,255,0.04);
+    font-size: 9px;
+    color: #64748b;
+    font-family: var(--mono);
+}
+
+.inspection-metrics span {
+    color: #e2e8f0;
+}
+
+/* --- Retained --- */
+
 .inspection-spinner {
     width: 20px; height: 20px;
     border: 2px solid rgba(255,255,255,.08);
@@ -1439,17 +1606,6 @@ body.state-complete .viewbox {
     animation: spin 0.7s linear infinite;
 }
 
-.inspection-error {
-    position: absolute; inset: 0;
-    display: flex; align-items: center; justify-content: center;
-    background: rgba(0,0,0,.6);
-    z-index: 5;
-    color: var(--danger);
-    font-size: 12px;
-    padding: 20px;
-    text-align: center;
-}
-
 .inspection-empty {
     position: absolute; inset: 0;
     display: flex; align-items: center; justify-content: center;