feat: crop inspection to selected object bbox with 20% padding

Instead of sending the entire frame to inspection modules, all API
calls now pass the selected track_id so the backend crops to the
object's bounding box with 20% surrounding context:

- fetchFrame: passes track_id + padding=0.20 query params
- fetchDepth + _fetchDepthJson: passes track_id for bbox-scoped depth
- fetchSuperRes: padding updated from 0.15 to 0.20 for consistency
- _loadAndRender: passes trackId to frame and depth fetchers

The backend already supported track_id cropping on all these endpoints
— this change wires the frontend to use it. Clicking a bbox or track
card now inspects only the detected object region, not the full frame.

https://claude.ai/code/session_01XQ1edVcrdcMErbKF53r1aF

frontend/js/api/inspection-api.js

@@ -2,14 +2,20 @@
 APP.api.inspection = {};
 
 /**
- * Fetch a raw video frame as an Image element.
+ * Fetch a raw video frame as an Image element, optionally cropped to a track.
  * @param {string} jobId
  * @param {number} frameIdx
+ * @param {string} [trackId] — if provided, crops to the track's bbox + padding
+ * @param {number} [padding=0.20] — padding ratio around the bbox
  * @returns {Promise<HTMLImageElement>}
  */
-APP.api.inspection.fetchFrame = async function (jobId, frameIdx) {
+APP.api.inspection.fetchFrame = async function (jobId, frameIdx, trackId, padding) {
     const base = APP.core.state.hf.baseUrl;
-    const url = `${base}/inspect/frame/${jobId}/${frameIdx}`;
+    let url = `${base}/inspect/frame/${jobId}/${frameIdx}`;
+    if (trackId) {
+        const p = padding != null ? padding : 0.20;
+        url += `?track_id=${encodeURIComponent(trackId)}&padding=${p}`;
+    }
     const resp = await fetch(url);
     if (!resp.ok) throw new Error(`Frame fetch failed: ${resp.status}`);
 
@@ -66,15 +72,19 @@ APP.api.inspection.generateMask = async function (jobId, frameIdx, trackId) {
 };
 
 /**
- * Fetch depth map for a specific frame.
+ * Fetch depth map for a specific frame, optionally cropped to a track.
  * @param {string} jobId
  * @param {number} frameIdx
+ * @param {string} [trackId] — if provided, crops depth to the track's bbox
  * @returns {Promise<Object>} { width, height, min, max, data: Float32Array }
  */
-APP.api.inspection.fetchDepth = async function (jobId, frameIdx) {
+APP.api.inspection.fetchDepth = async function (jobId, frameIdx, trackId) {
     const base = APP.core.state.hf.baseUrl;
     // Try binary format first; fall back to JSON if CORS strips custom headers
-    const url = `${base}/inspect/depth/${jobId}/${frameIdx}?format=raw`;
+    let url = `${base}/inspect/depth/${jobId}/${frameIdx}?format=raw`;
+    if (trackId) {
+        url += `&track_id=${encodeURIComponent(trackId)}`;
+    }
     const resp = await fetch(url);
     if (!resp.ok) throw new Error(`Depth fetch failed: ${resp.status}`);
 
@@ -92,7 +102,7 @@ APP.api.inspection.fetchDepth = async function (jobId, frameIdx) {
         // If CORS stripped headers, infer dimensions from data length
         if (isNaN(w) || isNaN(h)) {
             // Fall back to JSON format
-            return await APP.api.inspection._fetchDepthJson(jobId, frameIdx);
+            return await APP.api.inspection._fetchDepthJson(jobId, frameIdx, trackId);
         }
 
         return {
@@ -112,9 +122,12 @@ APP.api.inspection.fetchDepth = async function (jobId, frameIdx) {
 /**
  * Fallback: fetch depth in JSON format if raw binary headers are unavailable.
  */
-APP.api.inspection._fetchDepthJson = async function (jobId, frameIdx) {
+APP.api.inspection._fetchDepthJson = async function (jobId, frameIdx, trackId) {
     const base = APP.core.state.hf.baseUrl;
-    const url = `${base}/inspect/depth/${jobId}/${frameIdx}?format=json`;
+    let url = `${base}/inspect/depth/${jobId}/${frameIdx}?format=json`;
+    if (trackId) {
+        url += `&track_id=${encodeURIComponent(trackId)}`;
+    }
     const resp = await fetch(url);
     if (!resp.ok) throw new Error(`Depth (JSON) fetch failed: ${resp.status}`);
     const json = await resp.json();
@@ -184,7 +197,7 @@ APP.api.inspection.fetchSuperRes = async function (jobId, frameIdx, trackId, sca
         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.15 })
+            body: JSON.stringify({ track_id: trackId, scale: scale, padding: 0.20 })
         });
 
         if (resp.status === 202) {

frontend/js/ui/inspection.js

@@ -272,9 +272,10 @@ APP.ui.inspection._loadAndRender = async function () {
 
     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);
-            const frameImg = await api.fetchFrame(jobId, frameIdx);
+            const frameImg = await api.fetchFrame(jobId, frameIdx, trackId, 0.20);
             state.inspection.frameImageUrl = frameImg.src;
             state.inspection._frameImg = frameImg;
         }
@@ -296,7 +297,7 @@ APP.ui.inspection._loadAndRender = async function () {
                     break;
 
                 case "depth":
-                    cache.depth = await api.fetchDepth(jobId, frameIdx);
+                    cache.depth = await api.fetchDepth(jobId, frameIdx, trackId);
                     break;
 
                 case "attention":