Add military-style radar with helicopter demo mode

- Redesign radar with military tactical aesthetic (green phosphor CRT look)
- Add 4 helicopter tracks with keyframe interpolation for smooth movement
- H01 moves away (triangle points up), H02-H04 approach (triangles point down)
- First frame radar shows static snapshot after Reason clicked
- Live radar shows animated view after Engage clicked
- Remove old unused demo data files

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

frontend/data/helicopter_demo_data.js

@@ -0,0 +1,38 @@
+window.HELICOPTER_DEMO_DATA = {
+  "fps": 24,
+  "totalFrames": 192,
+  "video": "Enhance_Video_Movement.mp4",
+  "format": "keyframes",
+  "keyframes": {
+    "0": [
+      {"id": "H01", "label": "helicopter", "bbox": {"x": 200, "y": 260, "w": 180, "h": 120}, "gpt_distance_m": 800, "angle_deg": -90, "speed_kph": 180},
+      {"id": "H02", "label": "helicopter", "bbox": {"x": 420, "y": 240, "w": 150, "h": 100}, "gpt_distance_m": 900, "angle_deg": 90, "speed_kph": 180},
+      {"id": "H03", "label": "helicopter", "bbox": {"x": 620, "y": 250, "w": 100, "h": 68}, "gpt_distance_m": 1200, "angle_deg": 90, "speed_kph": 185},
+      {"id": "H04", "label": "helicopter", "bbox": {"x": 850, "y": 235, "w": 90, "h": 62}, "gpt_distance_m": 1300, "angle_deg": 90, "speed_kph": 190}
+    ],
+    "48": [
+      {"id": "H01", "label": "helicopter", "bbox": {"x": 150, "y": 280, "w": 200, "h": 130}, "gpt_distance_m": 700, "angle_deg": -90, "speed_kph": 190},
+      {"id": "H02", "label": "helicopter", "bbox": {"x": 400, "y": 255, "w": 160, "h": 105}, "gpt_distance_m": 850, "angle_deg": 90, "speed_kph": 185},
+      {"id": "H03", "label": "helicopter", "bbox": {"x": 640, "y": 255, "w": 115, "h": 78}, "gpt_distance_m": 1050, "angle_deg": 90, "speed_kph": 188},
+      {"id": "H04", "label": "helicopter", "bbox": {"x": 870, "y": 245, "w": 105, "h": 72}, "gpt_distance_m": 1150, "angle_deg": 90, "speed_kph": 192}
+    ],
+    "96": [
+      {"id": "H01", "label": "helicopter", "bbox": {"x": 80, "y": 300, "w": 220, "h": 145}, "gpt_distance_m": 600, "angle_deg": -90, "speed_kph": 200},
+      {"id": "H02", "label": "helicopter", "bbox": {"x": 380, "y": 265, "w": 155, "h": 102}, "gpt_distance_m": 820, "angle_deg": 90, "speed_kph": 182},
+      {"id": "H03", "label": "helicopter", "bbox": {"x": 660, "y": 262, "w": 135, "h": 92}, "gpt_distance_m": 900, "angle_deg": 90, "speed_kph": 190},
+      {"id": "H04", "label": "helicopter", "bbox": {"x": 890, "y": 258, "w": 125, "h": 85}, "gpt_distance_m": 980, "angle_deg": 90, "speed_kph": 195}
+    ],
+    "144": [
+      {"id": "H01", "label": "helicopter", "bbox": {"x": 50, "y": 280, "w": 200, "h": 130}, "gpt_distance_m": 650, "angle_deg": -90, "speed_kph": 195},
+      {"id": "H02", "label": "helicopter", "bbox": {"x": 360, "y": 270, "w": 148, "h": 98}, "gpt_distance_m": 800, "angle_deg": 90, "speed_kph": 178},
+      {"id": "H03", "label": "helicopter", "bbox": {"x": 680, "y": 272, "w": 158, "h": 108}, "gpt_distance_m": 750, "angle_deg": 90, "speed_kph": 192},
+      {"id": "H04", "label": "helicopter", "bbox": {"x": 910, "y": 270, "w": 148, "h": 100}, "gpt_distance_m": 800, "angle_deg": 90, "speed_kph": 198}
+    ],
+    "191": [
+      {"id": "H01", "label": "helicopter", "bbox": {"x": 30, "y": 260, "w": 190, "h": 125}, "gpt_distance_m": 680, "angle_deg": -90, "speed_kph": 190},
+      {"id": "H02", "label": "helicopter", "bbox": {"x": 340, "y": 275, "w": 142, "h": 94}, "gpt_distance_m": 780, "angle_deg": 90, "speed_kph": 175},
+      {"id": "H03", "label": "helicopter", "bbox": {"x": 700, "y": 280, "w": 180, "h": 122}, "gpt_distance_m": 620, "angle_deg": 90, "speed_kph": 195},
+      {"id": "H04", "label": "helicopter", "bbox": {"x": 930, "y": 282, "w": 172, "h": 116}, "gpt_distance_m": 650, "angle_deg": 90, "speed_kph": 200}
+    ]
+  }
+};

frontend/data/helicopter_demo_tracks.json

@@ -0,0 +1,38 @@
+{
+  "fps": 24,
+  "totalFrames": 192,
+  "video": "Enhance_Video_Movement.mp4",
+  "format": "keyframes",
+  "keyframes": {
+    "0": [
+      {"id": "H01", "label": "helicopter", "bbox": {"x": 200, "y": 260, "w": 180, "h": 120}, "gpt_distance_m": 800, "angle_deg": -90, "speed_kph": 180},
+      {"id": "H02", "label": "helicopter", "bbox": {"x": 420, "y": 240, "w": 150, "h": 100}, "gpt_distance_m": 900, "angle_deg": 90, "speed_kph": 180},
+      {"id": "H03", "label": "helicopter", "bbox": {"x": 620, "y": 250, "w": 100, "h": 68}, "gpt_distance_m": 1200, "angle_deg": 90, "speed_kph": 185},
+      {"id": "H04", "label": "helicopter", "bbox": {"x": 850, "y": 235, "w": 90, "h": 62}, "gpt_distance_m": 1300, "angle_deg": 90, "speed_kph": 190}
+    ],
+    "48": [
+      {"id": "H01", "label": "helicopter", "bbox": {"x": 150, "y": 280, "w": 200, "h": 130}, "gpt_distance_m": 700, "angle_deg": -90, "speed_kph": 190},
+      {"id": "H02", "label": "helicopter", "bbox": {"x": 400, "y": 255, "w": 160, "h": 105}, "gpt_distance_m": 850, "angle_deg": 90, "speed_kph": 185},
+      {"id": "H03", "label": "helicopter", "bbox": {"x": 640, "y": 255, "w": 115, "h": 78}, "gpt_distance_m": 1050, "angle_deg": 90, "speed_kph": 188},
+      {"id": "H04", "label": "helicopter", "bbox": {"x": 870, "y": 245, "w": 105, "h": 72}, "gpt_distance_m": 1150, "angle_deg": 90, "speed_kph": 192}
+    ],
+    "96": [
+      {"id": "H01", "label": "helicopter", "bbox": {"x": 80, "y": 300, "w": 220, "h": 145}, "gpt_distance_m": 600, "angle_deg": -90, "speed_kph": 200},
+      {"id": "H02", "label": "helicopter", "bbox": {"x": 380, "y": 265, "w": 155, "h": 102}, "gpt_distance_m": 820, "angle_deg": 90, "speed_kph": 182},
+      {"id": "H03", "label": "helicopter", "bbox": {"x": 660, "y": 262, "w": 135, "h": 92}, "gpt_distance_m": 900, "angle_deg": 90, "speed_kph": 190},
+      {"id": "H04", "label": "helicopter", "bbox": {"x": 890, "y": 258, "w": 125, "h": 85}, "gpt_distance_m": 980, "angle_deg": 90, "speed_kph": 195}
+    ],
+    "144": [
+      {"id": "H01", "label": "helicopter", "bbox": {"x": 50, "y": 280, "w": 200, "h": 130}, "gpt_distance_m": 650, "angle_deg": -90, "speed_kph": 195},
+      {"id": "H02", "label": "helicopter", "bbox": {"x": 360, "y": 270, "w": 148, "h": 98}, "gpt_distance_m": 800, "angle_deg": 90, "speed_kph": 178},
+      {"id": "H03", "label": "helicopter", "bbox": {"x": 680, "y": 272, "w": 158, "h": 108}, "gpt_distance_m": 750, "angle_deg": 90, "speed_kph": 192},
+      {"id": "H04", "label": "helicopter", "bbox": {"x": 910, "y": 270, "w": 148, "h": 100}, "gpt_distance_m": 800, "angle_deg": 90, "speed_kph": 198}
+    ],
+    "191": [
+      {"id": "H01", "label": "helicopter", "bbox": {"x": 30, "y": 260, "w": 190, "h": 125}, "gpt_distance_m": 680, "angle_deg": -90, "speed_kph": 190},
+      {"id": "H02", "label": "helicopter", "bbox": {"x": 340, "y": 275, "w": 142, "h": 94}, "gpt_distance_m": 780, "angle_deg": 90, "speed_kph": 175},
+      {"id": "H03", "label": "helicopter", "bbox": {"x": 700, "y": 280, "w": 180, "h": 122}, "gpt_distance_m": 620, "angle_deg": 90, "speed_kph": 195},
+      {"id": "H04", "label": "helicopter", "bbox": {"x": 930, "y": 282, "w": 172, "h": 116}, "gpt_distance_m": 650, "angle_deg": 90, "speed_kph": 200}
+    ]
+  }
+}

frontend/index.html

@@ -533,7 +533,6 @@
   <script src="./js/ui/intel.js"></script>
   <script src="./js/ui/cursor.js"></script>
   <script src="./js/ui/trade.js"></script>
-  <script src="./data/demo_data.js"></script>
   <script src="./data/helicopter_demo_data.js"></script>
   <script src="./js/core/demo.js"></script>
   <script src="./js/main.js"></script>

frontend/js/core/demo.js

@@ -0,0 +1,142 @@
+APP.core.demo = {};
+
+APP.core.demo.data = null;
+APP.core.demo.active = false;
+
+APP.core.demo.load = async function () {
+    // Demo data is now loaded per-video via loadForVideo()
+    // This function is kept for compatibility but does nothing
+};
+
+APP.core.demo.getFrameData = function (currentTime) {
+    if (!APP.core.demo.data) return null;
+
+    // Use interpolation for keyframe format
+    if (APP.core.demo.data.format === "keyframes") {
+        return APP.core.demo.getFrameDataInterpolated(currentTime);
+    }
+
+    // Original logic for frame-by-frame data
+    const fps = APP.core.demo.data.fps || 30;
+    const frameIdx = Math.floor(currentTime * fps);
+
+    // Get tracks for this frame
+    // Handle both string and number keys if needed
+    const tracks = APP.core.demo.data.frames[frameIdx] || APP.core.demo.data.frames[frameIdx.toString()];
+
+    if (!tracks) return [];
+    return tracks;
+};
+
+APP.core.demo.enable = function (force = true) {
+    const { log } = APP.ui.logging;
+    APP.core.demo.active = force;
+    if (force) {
+        log("DEMO MODE ACTIVATED", "g");
+        const chipFeed = document.getElementById("chipFeed");
+        if (chipFeed) chipFeed.textContent = "MODE:DEMO";
+    }
+};
+
+// Keyframe interpolation for smooth radar movement
+APP.core.demo._keyframeIndices = null;
+
+APP.core.demo.getKeyframeIndices = function() {
+    if (!APP.core.demo.data || APP.core.demo.data.format !== "keyframes") return null;
+    if (APP.core.demo._keyframeIndices) return APP.core.demo._keyframeIndices;
+
+    const indices = Object.keys(APP.core.demo.data.keyframes)
+        .map(k => parseInt(k, 10))
+        .sort((a, b) => a - b);
+
+    APP.core.demo._keyframeIndices = indices;
+    return indices;
+};
+
+APP.core.demo.interpolateTrack = function(trackA, trackB, t) {
+    const { lerp } = APP.core.utils;
+
+    return {
+        id: trackA.id,
+        label: trackA.label,
+        bbox: {
+            x: lerp(trackA.bbox.x, trackB.bbox.x, t),
+            y: lerp(trackA.bbox.y, trackB.bbox.y, t),
+            w: lerp(trackA.bbox.w, trackB.bbox.w, t),
+            h: lerp(trackA.bbox.h, trackB.bbox.h, t)
+        },
+        gpt_distance_m: lerp(trackA.gpt_distance_m, trackB.gpt_distance_m, t),
+        angle_deg: trackA.angle_deg,
+        speed_kph: lerp(trackA.speed_kph, trackB.speed_kph, t),
+        depth_valid: true,
+        depth_est_m: lerp(trackA.gpt_distance_m, trackB.gpt_distance_m, t),
+        history: [],
+        predicted_path: []
+    };
+};
+
+APP.core.demo.getFrameDataInterpolated = function(currentTime) {
+    const data = APP.core.demo.data;
+    if (!data || data.format !== "keyframes") return null;
+
+    const fps = data.fps || 24;
+    const frameIdx = Math.floor(currentTime * fps);
+    const keyframes = APP.core.demo.getKeyframeIndices();
+
+    if (!keyframes || keyframes.length === 0) return [];
+
+    // Find surrounding keyframes
+    let beforeIdx = keyframes[0];
+    let afterIdx = keyframes[keyframes.length - 1];
+
+    for (let i = 0; i < keyframes.length; i++) {
+        if (keyframes[i] <= frameIdx) beforeIdx = keyframes[i];
+        if (keyframes[i] >= frameIdx) { afterIdx = keyframes[i]; break; }
+    }
+
+    // Edge cases
+    if (frameIdx <= keyframes[0]) return data.keyframes[keyframes[0]] || [];
+    if (frameIdx >= keyframes[keyframes.length - 1]) return data.keyframes[keyframes[keyframes.length - 1]] || [];
+
+    // Interpolation factor
+    const t = (beforeIdx === afterIdx) ? 0 : (frameIdx - beforeIdx) / (afterIdx - beforeIdx);
+
+    const tracksBefore = data.keyframes[beforeIdx] || [];
+    const tracksAfter = data.keyframes[afterIdx] || [];
+
+    // Match by ID and interpolate
+    const result = [];
+    for (const trackA of tracksBefore) {
+        const trackB = tracksAfter.find(tr => tr.id === trackA.id);
+        if (trackB) {
+            result.push(APP.core.demo.interpolateTrack(trackA, trackB, t));
+        }
+    }
+
+    return result;
+};
+
+// Video-specific loading for demo tracks
+APP.core.demo.loadForVideo = async function(videoName) {
+    const { log } = APP.ui.logging;
+    if (videoName.toLowerCase().includes("enhance_video_movement")) {
+        // Use global variable injected by helicopter_demo_data.js script tag (CORS-safe)
+        if (window.HELICOPTER_DEMO_DATA) {
+            APP.core.demo.data = window.HELICOPTER_DEMO_DATA;
+            APP.core.demo._keyframeIndices = null; // Reset cache
+            log("Helicopter demo tracks loaded (CORS-safe mode).", "g");
+            return;
+        }
+        // Fallback to fetch (works when served from HTTP server)
+        try {
+            const resp = await fetch("data/helicopter_demo_tracks.json");
+            if (resp.ok) {
+                APP.core.demo.data = await resp.json();
+                APP.core.demo._keyframeIndices = null; // Reset cache
+                log("Helicopter demo tracks loaded.", "g");
+            }
+        } catch (err) {
+            console.warn("Failed to load helicopter demo tracks:", err);
+        }
+    }
+};

frontend/js/ui/radar.js

@@ -635,6 +635,12 @@ 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) {
+        APP.ui.radar.render("frameRadar", [], { static: true });
+        return;
+    }
+
     // In demo mode, use demo data for first frame (time=0) to match video radar initial state
     let trackSource = state.detections;
     if (APP.core.demo.active && APP.core.demo.data) {
@@ -650,6 +656,13 @@ APP.ui.radar.renderFrameRadar = function () {
 
 APP.ui.radar.renderLiveRadar = function () {
     const { state } = APP.core;
+
+    // Only show tracks after Engage has been clicked (tracker running)
+    if (!state.tracker.running) {
+        APP.ui.radar.render("radarCanvas", [], { static: false });
+        return;
+    }
+
     // Live radar has sweep animation
     APP.ui.radar.render("radarCanvas", state.tracker.tracks, { static: false });
 };