fix: use actual video FPS for frame index calculation to prevent track card disappearance

Frontend hardcoded 30fps for frame index calculation, causing drift on non-30fps
videos. Near the end of a 24fps video, the frontend would request frame indices
beyond what the backend stored, resulting in empty track data and disappearing
cards. Now uses the actual FPS from the backend summary endpoint, with clamping
to prevent overshoot.

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

frontend/js/core/state.js

@@ -24,6 +24,8 @@ APP.core.state = {
         depthVideoUrl: null,        // Depth video URL
         depthBlob: null,            // Depth video blob
         summary: null,
+        fps: null,               // actual video FPS from backend summary
+        totalFrames: null,       // actual total frame count from backend
         busy: false,
         lastError: null,
         missionSpec: null

frontend/js/core/timeline.js

@@ -60,7 +60,7 @@ APP.core.timeline = {};
         const ctx = canvas.getContext("2d");
         ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
 
-        const fps = 30;
+        const fps = APP.core.state.hf.fps || 30;
         const totalFrames = Math.ceil(duration * fps);
         if (totalFrames <= 0) return;
 
@@ -155,6 +155,8 @@ APP.core.timeline = {};
             // Cache duration from backend metadata (bypass video.duration dependency)
             if (data.total_frames > 0 && data.fps > 0) {
                 APP.core.timeline._cachedDuration = data.total_frames / data.fps;
+                state.hf.fps = data.fps;
+                state.hf.totalFrames = data.total_frames;
             }
 
             console.log(`[timeline] Loaded summary: ${Object.keys(frames).length} frames, duration=${APP.core.timeline._cachedDuration}s`);

frontend/js/core/video.js

@@ -61,6 +61,8 @@ APP.core.video.unloadVideo = async function (options = {}) {
     state.hf.completedJobId = null;
     state.hf.asyncStatus = "idle";
     state.hf.videoUrl = null;
+    state.hf.fps = null;
+    state.hf.totalFrames = null;
 
     setHfStatus("idle");
     state.hasReasoned = false;

frontend/js/main.js

@@ -166,6 +166,8 @@ document.addEventListener("DOMContentLoaded", () => {
                 state.tracker.nextId = 1;
                 state.tracker.heatmap = {};
                 state.tracker.assessmentCache = {};
+                state.hf.fps = null;
+                state.hf.totalFrames = null;
                 APP.core.timeline._cachedDuration = null;
                 if (btnPause) btnPause.textContent = "Pause";
                 renderFrameTrackList();
@@ -592,7 +594,9 @@ document.addEventListener("DOMContentLoaded", () => {
                 // Backend sync every 333ms — always runs, even with zero tracks
                 const jobId = state.hf.asyncJobId || state.hf.completedJobId;
                 if (jobId && (t - state.tracker.lastHFSync > 333)) {
-                    const frameIdx = Math.floor(videoEngage.currentTime * 30);
+                    const fps = state.hf.fps || 30;
+                    const maxFrame = state.hf.totalFrames ? state.hf.totalFrames - 1 : Infinity;
+                    const frameIdx = Math.min(Math.floor(videoEngage.currentTime * fps), maxFrame);
                     if (isFinite(frameIdx) && frameIdx >= 0) {
                         APP.core.tracker.syncWithBackend(frameIdx);
                     }