Show first frame radar when processed image appears

- Add state.firstFrameReady flag set after first frame is processed
- First frame radar now displays with processed image (not after video done)
- Reset flag on video unload

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

frontend/js/core/state.js

@@ -6,6 +6,7 @@ APP.core.state = {
     useDepthFeed: false,        // Flag for depth view (Tab 2 video)
     useFrameDepthView: false,   // Flag for first frame depth view (Tab 1)
     hasReasoned: false,
+    firstFrameReady: false,     // Flag for first frame radar display
     isReasoning: false,         // Flag to prevent concurrent Reason executions
 
     hf: {

frontend/js/core/video.js

@@ -124,6 +124,7 @@ APP.core.video.unloadVideo = async function (options = {}) {
 
     setHfStatus("idle");
     state.hasReasoned = false;
+    state.firstFrameReady = false;
     state.isReasoning = false;
 
     // Reset button states

frontend/js/main.js

@@ -454,6 +454,9 @@ document.addEventListener("DOMContentLoaded", () => {
                 processFirstFrameDetections(rawDetections);
             }
 
+            // Mark first frame as ready (for radar display)
+            state.firstFrameReady = true;
+
             // Store depth URLs if provided
             if (data.depth_video_url) {
                 state.hf.depthVideoUrl = data.depth_video_url.startsWith("http")

frontend/js/ui/radar.js

@@ -635,8 +635,8 @@ APP.ui.radar.render = function (canvasId, trackSource, options = {}) {
 APP.ui.radar.renderFrameRadar = function () {
     const { state } = APP.core;
 
-    // Only show tracks after Reason has been clicked
-    if (!state.hasReasoned) {
+    // Only show tracks after first frame is processed
+    if (!state.firstFrameReady) {
         APP.ui.radar.render("frameRadar", [], { static: true });
         return;
     }