fix: keep track positions fresh during pause for always-clickable bboxes

Decouple track prediction and backend sync from the play/pause guard so
hit-test data stays valid regardless of playback state. Add 1.5% hit
margin around bboxes to account for visual-vs-tracked position drift.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

frontend/js/main.js

@@ -688,27 +688,23 @@ document.addEventListener("DOMContentLoaded", () => {
         const dt = Math.min((t - state.tracker.lastFrameTime) / 1000, 0.1);
         state.tracker.lastFrameTime = t;
 
-        // Update tracker when engaged
-        if (state.tracker.running && videoEngage && !videoEngage.paused) {
-            state.tracker.frameCount++;
-
+        // ── Always keep track positions fresh (playing OR paused) ──
+        // This ensures bboxes remain clickable regardless of playback state.
+        if (state.tracker.running && videoEngage && state.tracker.tracks.length > 0) {
             if (APP.core.demo.active && APP.core.demo.data) {
-                // DEMO MODE (keep existing demo track logic unchanged)
+                // DEMO MODE: sync tracks to current video time (even when paused)
                 const demoTracks = getDemoFrameData(videoEngage.currentTime);
                 if (demoTracks) {
-                    // Deep clone to avoid mutating source data
                     const tracksClone = JSON.parse(JSON.stringify(demoTracks));
 
                     state.tracker.tracks = tracksClone.map(d => ({
                         ...d,
-                        // Ensure defaults
                         lastSeen: t,
                         state: "TRACK",
                         depth_valid: true,
                         depth_est_m: d.gpt_distance_m || 1000,
                     }));
 
-                    // Normalize if needed (frontend usually expects 0..1)
                     const w = videoEngage.videoWidth || state.frame.w || 1280;
                     const h = videoEngage.videoHeight || state.frame.h || 720;
 
@@ -722,57 +718,56 @@ document.addEventListener("DOMContentLoaded", () => {
                     });
                 }
             } else {
-                // ── NORMAL MODE ──
-
-                // (1) Every frame: smooth overlay animation
+                // NORMAL MODE: predict positions every frame
                 predictTracks(dt);
 
-                // (2) Every ~10 frames (333ms): backend sync for accurate positions
+                // Backend sync every 333ms (works while paused too)
                 const jobId = state.hf.asyncJobId || state.hf.completedJobId;
                 if (jobId && (t - state.tracker.lastHFSync > 333)) {
                     const frameIdx = Math.floor(videoEngage.currentTime * 30);
                     APP.core.tracker.syncWithBackend(frameIdx);
                     state.tracker.lastHFSync = t;
                 }
+            }
+        }
 
-                // (3) Every 40 frames OR new object: render cards + fire GPT
-                const framesSinceRender = state.tracker.frameCount - state.tracker._lastCardRenderFrame;
-                if (state.tracker._newObjectDetected || framesSinceRender >= 40) {
-                    // Immediate card render (current positions/labels, pre-GPT)
-                    renderFrameTrackList();
-                    state.tracker._lastCardRenderFrame = state.tracker.frameCount;
-                    state.tracker._newObjectDetected = false;
-
-                    // Fire async GPT analysis (non-blocking)
-                    if (!state.tracker._gptBusy && state.tracker.tracks.length > 0) {
-                        state.tracker._gptBusy = true;
-                        APP.api.client.analyzeFrame(videoEngage, state.tracker.tracks)
-                            .then(enriched => {
-                                // Merge GPT results into state.detections
-                                for (const rd of enriched) {
-                                    const tid = rd.track_id || rd.id;
-                                    const existing = (state.detections || []).find(d => d.id === tid);
-                                    if (existing && rd.gpt_raw) {
-                                        existing.gpt_raw = rd.gpt_raw;
-                                        existing.features = APP.core.gptMapping.buildFeatures(rd.gpt_raw);
-                                        existing.assessment_status = rd.assessment_status || "ASSESSED";
-                                        existing.threat_level_score = rd.threat_level_score || 0;
-                                        existing.gpt_description = rd.gpt_description || existing.gpt_description;
-                                        existing.gpt_distance_m = rd.gpt_distance_m || existing.gpt_distance_m;
-                                        existing.gpt_direction = rd.gpt_direction || existing.gpt_direction;
-                                    }
+        // ── Card rendering & GPT analysis: only during active playback ──
+        if (state.tracker.running && videoEngage && !videoEngage.paused) {
+            state.tracker.frameCount++;
+
+            const framesSinceRender = state.tracker.frameCount - state.tracker._lastCardRenderFrame;
+            if (state.tracker._newObjectDetected || framesSinceRender >= 40) {
+                renderFrameTrackList();
+                state.tracker._lastCardRenderFrame = state.tracker.frameCount;
+                state.tracker._newObjectDetected = false;
+
+                if (!state.tracker._gptBusy && state.tracker.tracks.length > 0) {
+                    state.tracker._gptBusy = true;
+                    APP.api.client.analyzeFrame(videoEngage, state.tracker.tracks)
+                        .then(enriched => {
+                            for (const rd of enriched) {
+                                const tid = rd.track_id || rd.id;
+                                const existing = (state.detections || []).find(d => d.id === tid);
+                                if (existing && rd.gpt_raw) {
+                                    existing.gpt_raw = rd.gpt_raw;
+                                    existing.features = APP.core.gptMapping.buildFeatures(rd.gpt_raw);
+                                    existing.assessment_status = rd.assessment_status || "ASSESSED";
+                                    existing.threat_level_score = rd.threat_level_score || 0;
+                                    existing.gpt_description = rd.gpt_description || existing.gpt_description;
+                                    existing.gpt_distance_m = rd.gpt_distance_m || existing.gpt_distance_m;
+                                    existing.gpt_direction = rd.gpt_direction || existing.gpt_direction;
                                 }
-                                renderFrameTrackList();  // Re-render with GPT data
-                                state.tracker._gptBusy = false;
-                            })
-                            .catch(err => {
-                                console.warn("Frame GPT analysis failed:", err);
-                                state.tracker._gptBusy = false;
-                            });
-                    }
+                            }
+                            renderFrameTrackList();
+                            state.tracker._gptBusy = false;
+                        })
+                        .catch(err => {
+                            console.warn("Frame GPT analysis failed:", err);
+                            state.tracker._gptBusy = false;
+                        });
                 }
             }
-        } // End if(running)
+        }
 
         // Render UI
         if (renderFrameOverlay) renderFrameOverlay();

frontend/js/ui/overlays.js

@@ -84,13 +84,16 @@ APP.ui.overlays.initClickHandler = function () {
         const ny = (e.clientY - rect.top) / rect.height;
 
         // Hit-test against track bboxes (smallest area wins for overlaps)
+        // Margin accounts for drift between visual bbox and tracked position
+        const margin = 0.015;
         let best = null;
         let bestArea = Infinity;
 
         for (const t of tracks) {
             const b = t.bbox;
             if (!b) continue;
-            if (nx >= b.x && nx <= b.x + b.w && ny >= b.y && ny <= b.y + b.h) {
+            if (nx >= b.x - margin && nx <= b.x + b.w + margin &&
+                ny >= b.y - margin && ny <= b.y + b.h + margin) {
                 const area = b.w * b.h;
                 if (area < bestArea) {
                     bestArea = area;