Refine overlays: Hide on first frame and remove speed from labels

frontend/index.html

@@ -427,6 +427,20 @@
                   <span class="rightnote" id="liveStamp">—</span>
                 </h3>
                 <div class="list" id="trackList" style="max-height:none"></div>
+
+                <!-- Radar Controls -->
+                <div class="mt-sm" style="padding: 10px; background: rgba(0,0,0,0.2); border-radius: 6px;">
+                  <div class="row">
+                    <label class="mini">History Trails</label>
+                    <input id="radarHistoryLen" type="range" min="0" max="100" value="30" style="flex:1; margin:0 8px">
+                    <small class="mini" id="radarHistoryVal">30</small>
+                  </div>
+                  <div class="row mt-xs">
+                    <label class="mini">Future Pred</label>
+                    <input id="radarFutureLen" type="range" min="0" max="100" value="30" style="flex:1; margin:0 8px">
+                    <small class="mini" id="radarFutureVal">30</small>
+                  </div>
+                </div>
               </div>
             </div>
           </div>
@@ -519,6 +533,9 @@
   <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>
 
 </body>

frontend/js/main.js

@@ -9,6 +9,7 @@ document.addEventListener("DOMContentLoaded", () => {
     // Core modules
     const { captureFirstFrame, drawFirstFrame, unloadVideo, toggleDepthView, toggleFirstFrameDepthView, toggleProcessedFeed, resizeOverlays, setStreamingMode, stopStreamingMode, displayProcessedFirstFrame } = APP.core.video;
     const { syncKnobDisplays, recomputeHEL } = APP.core.hel;
+    const { load: loadDemo, getFrameData: getDemoFrameData, enable: enableDemo } = APP.core.demo;
 
     // UI Renderers
     const { renderFrameRadar, renderLiveRadar } = APP.ui.radar;
@@ -71,6 +72,12 @@ document.addEventListener("DOMContentLoaded", () => {
         // Start main loop
         requestAnimationFrame(loop);
 
+        // Load demo data (if available)
+        loadDemo().then(() => {
+            // hidden usage: enable if video filename matches "demo" or manually
+            // APP.core.demo.enable(true);
+        });
+
         log("System READY.", "g");
     }
 
@@ -110,6 +117,19 @@ document.addEventListener("DOMContentLoaded", () => {
 
             setStatus("warn", "READY · Video loaded (run Reason)");
             log(`Video loaded: ${file.name}`, "g");
+
+            // Load video-specific demo tracks (e.g., helicopter demo)
+            if (APP.core.demo.loadForVideo) {
+                await APP.core.demo.loadForVideo(file.name);
+            }
+
+            // Auto-enable demo mode if filename contains "demo" or helicopter video
+            const shouldEnableDemo = file.name.toLowerCase().includes("demo") ||
+                                     file.name.toLowerCase().includes("enhance_video_movement");
+            if (shouldEnableDemo && APP.core.demo.data) {
+                enableDemo(true);
+                log("Auto-enabled DEMO mode for this video.", "g");
+            }
         });
     }
 
@@ -663,20 +683,61 @@ document.addEventListener("DOMContentLoaded", () => {
 
         // Update tracker when engaged
         if (state.tracker.running && videoEngage && !videoEngage.paused) {
-            predictTracks(dt);
-
-            // Sync with backend every few frames (approx 5Hz)
-            if (t - state.tracker.lastHFSync > 200) {
-                // Estimate frame index
-                const fps = 30; // hardcoded for now, ideal: state.fps
-                const frameIdx = Math.floor(videoEngage.currentTime * fps);
-                // Only sync if we have a job ID
-                if (state.hf.asyncJobId) {
-                    APP.core.tracker.syncWithBackend(frameIdx);
+
+            // DEMO MODE BYPASS
+            if (APP.core.demo.active && APP.core.demo.data) {
+                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;
+
+                    state.tracker.tracks.forEach(tr => {
+                        // Check if inputs are absolute pixels (if x > 1 or w > 1)
+                        // We assume demo data is in pixels (as per spec)
+                        if (tr.bbox.x > 1 || tr.bbox.w > 1) {
+                            tr.bbox.x /= w;
+                            tr.bbox.y /= h;
+                            tr.bbox.w /= w;
+                            tr.bbox.h /= h;
+                        }
+
+                        // Note: history in 'tr' is also in pixels in the source JSON.
+                        // But we don't normalize history here because radar.js currently handles raw pixels for history?
+                        // Actually, we should probably standardize everything to normalized if possible, 
+                        // but let's check radar.js first.
+                    });
+
+                } else {
+                    // NORMAL MODE
+                    predictTracks(dt);
+
+                    // Sync with backend every few frames (approx 5Hz)
+                    if (t - state.tracker.lastHFSync > 200) {
+                        // Estimate frame index
+                        const fps = 30; // hardcoded for now, ideal: state.fps
+                        const frameIdx = Math.floor(videoEngage.currentTime * fps);
+                        // Only sync if we have a job ID
+                        if (state.hf.asyncJobId) {
+                            APP.core.tracker.syncWithBackend(frameIdx);
+                        }
+                        state.tracker.lastHFSync = t;
+                    }
                 }
-                state.tracker.lastHFSync = t;
             }
-        }
+        } // End if(running)
 
         // Render UI
         if (renderFrameRadar) renderFrameRadar();

frontend/js/ui/overlays.js

@@ -101,7 +101,7 @@ APP.ui.overlays.render = function (canvasId, trackSource) {
         let text = (d.label || "OBJ").toUpperCase();
         if (d.track_id) text = `[${d.track_id}] ${text}`;
         if (d.gpt_distance_m) text += ` ${Math.round(d.gpt_distance_m)}m`;
-        if (d.speed_kph && d.speed_kph > 1) text += ` ${Math.round(d.speed_kph)}km/h`;
+        // if (d.speed_kph && d.speed_kph > 1) text += ` ${Math.round(d.speed_kph)}km/h`;
 
         const tm = ctx.measureText(text);
         const textW = tm.width + 16;
@@ -130,11 +130,30 @@ APP.ui.overlays.render = function (canvasId, trackSource) {
 };
 
 APP.ui.overlays.renderFrameOverlay = function () {
-    const { state } = APP.core;
-    APP.ui.overlays.render("frameOverlay", state.detections);
+    const { $ } = APP.core.utils;
+    // User request: No overlays on first frame (Tab 1)
+    const canvas = $("#frameOverlay");
+    if (canvas) {
+        const ctx = canvas.getContext("2d");
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+    }
+    // APP.ui.overlays.render("frameOverlay", state.detections);
 };
 
 APP.ui.overlays.renderEngageOverlay = function () {
     const { state } = APP.core;
+    const { $ } = APP.core.utils;
+
+    // User request: No overlays on first frame of video
+    const video = $("#videoEngage");
+    if (video && (video.currentTime < 0.25 || (video.paused && video.currentTime === 0))) {
+        const canvas = $("#engageOverlay");
+        if (canvas) {
+            const ctx = canvas.getContext("2d");
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+        }
+        return;
+    }
+
     APP.ui.overlays.render("engageOverlay", state.tracker.tracks);
 };

frontend/js/ui/radar.js

@@ -1,9 +1,31 @@
 APP.ui.radar = {};
 
-APP.ui.radar.render = function (canvasId, trackSource) {
+// Military color palette
+APP.ui.radar.colors = {
+    background: "#0a0d0f",
+    gridPrimary: "rgba(0, 255, 136, 0.3)",
+    gridSecondary: "rgba(0, 255, 136, 0.12)",
+    gridTertiary: "rgba(0, 255, 136, 0.06)",
+    sweepLine: "rgba(0, 255, 136, 0.9)",
+    sweepGlow: "rgba(0, 255, 136, 0.4)",
+    sweepTrail: "rgba(0, 255, 136, 0.15)",
+    text: "rgba(0, 255, 136, 0.9)",
+    textDim: "rgba(0, 255, 136, 0.5)",
+    ownship: "#00ff88",
+    hostile: "#ff3344",
+    neutral: "#ffaa00",
+    friendly: "#00aaff",
+    selected: "#ffffff",
+    dataBox: "rgba(0, 20, 10, 0.92)",
+    dataBorder: "rgba(0, 255, 136, 0.6)"
+};
+
+APP.ui.radar.render = function (canvasId, trackSource, options = {}) {
+    const isStatic = options.static || false;
     const { state } = APP.core;
     const { clamp, now, $ } = APP.core.utils;
     const canvas = $(`#${canvasId}`);
+    const colors = APP.ui.radar.colors;
 
     if (!canvas) return;
     const ctx = canvas.getContext("2d");
@@ -20,80 +42,277 @@ APP.ui.radar.render = function (canvasId, trackSource) {
 
     const w = canvas.width, h = canvas.height;
     const cx = w * 0.5, cy = h * 0.5;
-    const R = Math.min(w, h) * 0.45; // Max radius
+    const R = Math.min(w, h) * 0.44;
+    const maxRangeM = 1500;
 
     ctx.clearRect(0, 0, w, h);
 
-    // --- 1. Background (Tactical Grid) ---
-    ctx.fillStyle = "#0a0f22"; // Matches --panel2
+    // --- Control Knobs ---
+    const histSlider = document.getElementById("radarHistoryLen");
+    const futSlider = document.getElementById("radarFutureLen");
+    if (histSlider && document.getElementById("radarHistoryVal")) {
+        document.getElementById("radarHistoryVal").textContent = histSlider.value;
+    }
+    if (futSlider && document.getElementById("radarFutureVal")) {
+        document.getElementById("radarFutureVal").textContent = futSlider.value;
+    }
+    const maxHist = histSlider ? parseInt(histSlider.value, 10) : 30;
+    const maxFut = futSlider ? parseInt(futSlider.value, 10) : 30;
+
+    // ===========================================
+    // 1. BACKGROUND - Dark tactical display
+    // ===========================================
+    ctx.fillStyle = colors.background;
     ctx.fillRect(0, 0, w, h);
 
-    // Grid Rings (Concentric)
-    ctx.strokeStyle = "rgba(34, 211, 238, 0.1)"; // Cyan faint
+    // Subtle noise/static effect
+    ctx.globalAlpha = 0.03;
+    for (let i = 0; i < 100; i++) {
+        const nx = Math.random() * w;
+        const ny = Math.random() * h;
+        ctx.fillStyle = "#00ff88";
+        ctx.fillRect(nx, ny, 1, 1);
+    }
+    ctx.globalAlpha = 1;
+
+    // Scanline effect
+    ctx.strokeStyle = "rgba(0, 255, 136, 0.02)";
     ctx.lineWidth = 1;
-    for (let i = 1; i <= 4; i++) {
+    for (let y = 0; y < h; y += 3) {
         ctx.beginPath();
-        ctx.arc(cx, cy, R * (i / 4), 0, Math.PI * 2);
+        ctx.moveTo(0, y);
+        ctx.lineTo(w, y);
         ctx.stroke();
     }
 
-    // Grid Spokes (Cardinals)
+    // ===========================================
+    // 2. OUTER BEZEL / FRAME
+    // ===========================================
+    // Outer border ring
+    ctx.strokeStyle = colors.gridPrimary;
+    ctx.lineWidth = 2;
     ctx.beginPath();
-    ctx.moveTo(cx - R, cy); ctx.lineTo(cx + R, cy);
-    ctx.moveTo(cx, cy - R); ctx.lineTo(cx, cy + R);
+    ctx.arc(cx, cy, R + 8, 0, Math.PI * 2);
     ctx.stroke();
 
-    // --- 2. Sweep Animation ---
-    const t = now() / 1500; // Slower, more deliberate sweep
-    const ang = (t * (Math.PI * 2)) % (Math.PI * 2);
+    // Inner border ring
+    ctx.strokeStyle = colors.gridSecondary;
+    ctx.lineWidth = 1;
+    ctx.beginPath();
+    ctx.arc(cx, cy, R + 3, 0, Math.PI * 2);
+    ctx.stroke();
 
-    const grad = ctx.createConicGradient(ang + Math.PI / 2, cx, cy); // Offset to start at 0
-    grad.addColorStop(0, "transparent"); // transparent
-    grad.addColorStop(0.1, "transparent");
-    grad.addColorStop(0.8, "rgba(34, 211, 238, 0.0)");
-    grad.addColorStop(1, "rgba(34, 211, 238, 0.15)"); // Trailing edge
+    // Corner brackets
+    const bracketSize = 15;
+    const bracketOffset = R + 20;
+    ctx.strokeStyle = colors.gridPrimary;
+    ctx.lineWidth = 2;
 
-    ctx.fillStyle = grad;
+    // Top-left
     ctx.beginPath();
-    ctx.arc(cx, cy, R, 0, Math.PI * 2);
-    ctx.fill();
+    ctx.moveTo(cx - bracketOffset, cy - bracketOffset + bracketSize);
+    ctx.lineTo(cx - bracketOffset, cy - bracketOffset);
+    ctx.lineTo(cx - bracketOffset + bracketSize, cy - bracketOffset);
+    ctx.stroke();
 
-    // Scan Line
-    ctx.strokeStyle = "rgba(34, 211, 238, 0.6)";
-    ctx.lineWidth = 1.5;
+    // Top-right
     ctx.beginPath();
-    ctx.moveTo(cx, cy);
-    ctx.lineTo(cx + Math.cos(ang) * R, cy + Math.sin(ang) * R);
+    ctx.moveTo(cx + bracketOffset - bracketSize, cy - bracketOffset);
+    ctx.lineTo(cx + bracketOffset, cy - bracketOffset);
+    ctx.lineTo(cx + bracketOffset, cy - bracketOffset + bracketSize);
     ctx.stroke();
 
-    // --- 3. Ownship (Center) ---
-    ctx.fillStyle = "#22d3ee"; // Cyan
+    // Bottom-left
     ctx.beginPath();
-    ctx.arc(cx, cy, 3, 0, Math.PI * 2);
-    ctx.fill();
-    // Ring around ownship
-    ctx.strokeStyle = "rgba(34, 211, 238, 0.5)";
-    ctx.lineWidth = 1;
+    ctx.moveTo(cx - bracketOffset, cy + bracketOffset - bracketSize);
+    ctx.lineTo(cx - bracketOffset, cy + bracketOffset);
+    ctx.lineTo(cx - bracketOffset + bracketSize, cy + bracketOffset);
+    ctx.stroke();
+
+    // Bottom-right
     ctx.beginPath();
-    ctx.arc(cx, cy, 6, 0, Math.PI * 2);
+    ctx.moveTo(cx + bracketOffset - bracketSize, cy + bracketOffset);
+    ctx.lineTo(cx + bracketOffset, cy + bracketOffset);
+    ctx.lineTo(cx + bracketOffset, cy + bracketOffset - bracketSize);
     ctx.stroke();
 
-    // --- 4. Render Detections ---
+    // ===========================================
+    // 3. RANGE RINGS with labels
+    // ===========================================
+    const rangeRings = [
+        { frac: 0.25, label: "375m" },
+        { frac: 0.5, label: "750m" },
+        { frac: 0.75, label: "1125m" },
+        { frac: 1.0, label: "1500m" }
+    ];
+
+    rangeRings.forEach((ring, i) => {
+        const ringR = R * ring.frac;
+
+        // Ring line
+        ctx.strokeStyle = i === 3 ? colors.gridPrimary : colors.gridSecondary;
+        ctx.lineWidth = i === 3 ? 1.5 : 1;
+        ctx.beginPath();
+        ctx.arc(cx, cy, ringR, 0, Math.PI * 2);
+        ctx.stroke();
+
+        // Tick marks on outer ring
+        if (i === 3) {
+            for (let deg = 0; deg < 360; deg += 5) {
+                const rad = (deg - 90) * Math.PI / 180;
+                const tickLen = deg % 30 === 0 ? 8 : (deg % 10 === 0 ? 5 : 2);
+                const x1 = cx + Math.cos(rad) * ringR;
+                const y1 = cy + Math.sin(rad) * ringR;
+                const x2 = cx + Math.cos(rad) * (ringR + tickLen);
+                const y2 = cy + Math.sin(rad) * (ringR + tickLen);
+
+                ctx.strokeStyle = deg % 30 === 0 ? colors.gridPrimary : colors.gridTertiary;
+                ctx.lineWidth = deg % 30 === 0 ? 1.5 : 0.5;
+                ctx.beginPath();
+                ctx.moveTo(x1, y1);
+                ctx.lineTo(x2, y2);
+                ctx.stroke();
+            }
+        }
+
+        // Range labels (on right side)
+        ctx.font = "bold 9px 'Courier New', monospace";
+        ctx.fillStyle = colors.textDim;
+        ctx.textAlign = "left";
+        ctx.textBaseline = "middle";
+        ctx.fillText(ring.label, cx + ringR + 4, cy);
+    });
+
+    // ===========================================
+    // 4. COMPASS ROSE / BEARING LINES
+    // ===========================================
+    // Cardinal directions with labels
+    const cardinals = [
+        { deg: 0, label: "N", primary: true },
+        { deg: 45, label: "NE", primary: false },
+        { deg: 90, label: "E", primary: true },
+        { deg: 135, label: "SE", primary: false },
+        { deg: 180, label: "S", primary: true },
+        { deg: 225, label: "SW", primary: false },
+        { deg: 270, label: "W", primary: true },
+        { deg: 315, label: "NW", primary: false }
+    ];
+
+    cardinals.forEach(dir => {
+        const rad = (dir.deg - 90) * Math.PI / 180;
+        const x1 = cx + Math.cos(rad) * 12;
+        const y1 = cy + Math.sin(rad) * 12;
+        const x2 = cx + Math.cos(rad) * R;
+        const y2 = cy + Math.sin(rad) * R;
+
+        // Spoke line
+        ctx.strokeStyle = dir.primary ? colors.gridSecondary : colors.gridTertiary;
+        ctx.lineWidth = dir.primary ? 1 : 0.5;
+        ctx.setLineDash(dir.primary ? [] : [2, 4]);
+        ctx.beginPath();
+        ctx.moveTo(x1, y1);
+        ctx.lineTo(x2, y2);
+        ctx.stroke();
+        ctx.setLineDash([]);
+
+        // Cardinal label
+        const labelR = R + 18;
+        const lx = cx + Math.cos(rad) * labelR;
+        const ly = cy + Math.sin(rad) * labelR;
+
+        ctx.font = dir.primary ? "bold 11px 'Courier New', monospace" : "9px 'Courier New', monospace";
+        ctx.fillStyle = dir.primary ? colors.text : colors.textDim;
+        ctx.textAlign = "center";
+        ctx.textBaseline = "middle";
+        ctx.fillText(dir.label, lx, ly);
+    });
+
+    // ===========================================
+    // 5. SWEEP ANIMATION (skip for static mode)
+    // ===========================================
+    if (!isStatic) {
+        const t = now() / 2000; // Slower sweep
+        const sweepAng = (t * (Math.PI * 2)) % (Math.PI * 2);
+
+        // Sweep trail (gradient arc)
+        const trailLength = Math.PI * 0.4;
+        const trailGrad = ctx.createConicGradient(sweepAng - trailLength + Math.PI / 2, cx, cy);
+        trailGrad.addColorStop(0, "transparent");
+        trailGrad.addColorStop(0.7, "rgba(0, 255, 136, 0.0)");
+        trailGrad.addColorStop(1, "rgba(0, 255, 136, 0.12)");
+
+        ctx.fillStyle = trailGrad;
+        ctx.beginPath();
+        ctx.arc(cx, cy, R, 0, Math.PI * 2);
+        ctx.fill();
+
+        // Sweep line with glow
+        ctx.shadowBlur = 15;
+        ctx.shadowColor = colors.sweepGlow;
+        ctx.strokeStyle = colors.sweepLine;
+        ctx.lineWidth = 2;
+        ctx.beginPath();
+        ctx.moveTo(cx, cy);
+        ctx.lineTo(cx + Math.cos(sweepAng) * R, cy + Math.sin(sweepAng) * R);
+        ctx.stroke();
+        ctx.shadowBlur = 0;
+    }
+
+    // ===========================================
+    // 6. OWNSHIP (Center)
+    // ===========================================
+    // Ownship symbol - aircraft shape
+    ctx.fillStyle = colors.ownship;
+    ctx.shadowBlur = 8;
+    ctx.shadowColor = colors.ownship;
+
+    ctx.beginPath();
+    ctx.moveTo(cx, cy - 8);      // Nose
+    ctx.lineTo(cx + 5, cy + 4);  // Right wing
+    ctx.lineTo(cx + 2, cy + 2);
+    ctx.lineTo(cx + 2, cy + 8);  // Right tail
+    ctx.lineTo(cx, cy + 5);
+    ctx.lineTo(cx - 2, cy + 8);  // Left tail
+    ctx.lineTo(cx - 2, cy + 2);
+    ctx.lineTo(cx - 5, cy + 4);  // Left wing
+    ctx.closePath();
+    ctx.fill();
+    ctx.shadowBlur = 0;
+
+    // Ownship pulse ring (skip for static mode)
+    if (!isStatic) {
+        const pulsePhase = (now() / 1000) % 1;
+        const pulseR = 10 + pulsePhase * 15;
+        ctx.strokeStyle = `rgba(0, 255, 136, ${0.5 - pulsePhase * 0.5})`;
+        ctx.lineWidth = 1;
+        ctx.beginPath();
+        ctx.arc(cx, cy, pulseR, 0, Math.PI * 2);
+        ctx.stroke();
+    } else {
+        // Static ring for static mode
+        ctx.strokeStyle = `rgba(0, 255, 136, 0.4)`;
+        ctx.lineWidth = 1;
+        ctx.beginPath();
+        ctx.arc(cx, cy, 12, 0, Math.PI * 2);
+        ctx.stroke();
+    }
+
+    // ===========================================
+    // 7. RENDER TRACKS / TARGETS
+    // ===========================================
     const source = trackSource || state.detections;
+    const fovRad = (60 * Math.PI) / 180;
 
-    if (source) {
-        source.forEach(det => {
-            // Determine Range (pixels)
+    if (source && source.length > 0) {
+        source.forEach((det, idx) => {
+            // Calculate range
             let rPx;
             let dist = 3000;
-            const maxRangeM = 1500;
 
             if (det.depth_valid && det.depth_rel != null) {
-                // Use relative depth for accurate relative positioning (0.1 R to R)
                 rPx = (det.depth_rel * 0.9 + 0.1) * R;
                 dist = det.depth_est_m || 3000;
             } else {
-                // Fallback to absolute metrics
                 if (det.gpt_distance_m) {
                     dist = det.gpt_distance_m;
                 } else if (det.baseRange_m) {
@@ -102,190 +321,335 @@ APP.ui.radar.render = function (canvasId, trackSource) {
                 rPx = (clamp(dist, 0, maxRangeM) / maxRangeM) * R;
             }
 
+            // Calculate bearing from bbox
             const bx = det.bbox.x + det.bbox.w * 0.5;
-            const fw = state.frame.w || 1280;
-            const tx = (bx / fw) - 0.5;
-
-            const fovRad = (60 * Math.PI) / 180;
+            let tx = 0;
+            if (bx <= 2.0) {
+                tx = bx - 0.5;
+            } else {
+                const fw = state.frame.w || 1280;
+                tx = (bx / fw) - 0.5;
+            }
             const angle = (-Math.PI / 2) + (tx * fovRad);
 
-            // --- Draw Blip ---
+            // Target position
             const px = cx + Math.cos(angle) * rPx;
             const py = cy + Math.sin(angle) * rPx;
 
             const isSelected = (state.selectedId === det.id) || (state.tracker.selectedTrackId === det.id);
 
-            // Glow for selected
-            if (isSelected) {
-                ctx.shadowBlur = 10;
-                ctx.shadowColor = "#f59e0b"; // Amber glow
-            } else {
-                ctx.shadowBlur = 0;
-            }
-
-            // Blip Color
-            let col = "#7c3aed"; // Default violet
+            // Determine threat color
+            let threatColor = colors.hostile; // Default hostile (red)
             const label = (det.label || "").toLowerCase();
-            if (label.includes('person')) col = "#ef4444"; // Red
-            if (label.includes('airplane') || label.includes('drone')) col = "#f59e0b"; // Amber
-            if (isSelected) col = "#ffffff"; // White for selected
+            if (label.includes('person')) threatColor = colors.neutral;
+            if (label.includes('friendly')) threatColor = colors.friendly;
+            if (isSelected) threatColor = colors.selected;
 
-            ctx.fillStyle = col;
-            // Draw Triangle (Directional)
-            ctx.fillStyle = col;
+            // Target glow for all targets
+            ctx.shadowBlur = isSelected ? 15 : 8;
+            ctx.shadowColor = threatColor;
 
+            // ===========================================
+            // TARGET SYMBOL - Military bracket style
+            // ===========================================
             ctx.save();
             ctx.translate(px, py);
 
-            // Rotation:
-            // Backend angle: 0 is Right (Screen X+), 90 gets mapped to Down (Screen Y+). 
-            // Radar view: Up is Forward (Screen Y-). 
-            // We need to map screen motion to radar heading.
-            // Screen Right (0 deg) -> Radar Right (0 deg)
-            // Screen Down (90 deg) -> Radar Backwards (180 deg)?
-            // Screen Up (-90 deg) -> Radar Forwards (-90 deg)?
-
-            // Wait, radar usually maps:
-            // Top of radar = Forward. 
-            // Screen perspective: Objects moving "Down" (Y+) are coming CLOSER (Backwards relative to view).
-            // Objects moving "Up" (Y-) are moving AWAY (Forwards relative to view).
-            // So: Screen Y+ (90 deg) -> Radar Down (90 deg)
-            // Screen Y- (-90 deg) -> Radar Up (-90 deg)
-            // It actually aligns well if we consider standard canvas coordinates where Y is down.
-            // But visually on radar, "Up" (Y=0) is usually forward/away.
-
-            let rotation = 0;
+            // Rotation based on heading
+            let rotation = -Math.PI / 2;
             if (det.angle_deg !== undefined) {
-                // Convert degrees to radians
-                // Adjust phase: 
-                // det.angle_deg is math angle (0=Right, 90=Down).
-                // If we want triangle to point in velocity direction:
-                // Just use the angle directly. Canvas rotation is clockwise.
                 rotation = det.angle_deg * (Math.PI / 180);
-            } else {
-                // Default (point up/forward if unknown?)
-                rotation = -Math.PI / 2;
             }
-
-            // Adjust rotation for canvas (clockwise from X+)
             ctx.rotate(rotation);
 
-            const size = isSelected ? 8 : 6;
+            const size = isSelected ? 16 : 12;
+
+            // Draw target - larger triangle shape
+            ctx.strokeStyle = threatColor;
+            ctx.fillStyle = threatColor;
+            ctx.lineWidth = isSelected ? 2.5 : 2;
+
+            // Triangle pointing in direction of travel
             ctx.beginPath();
-            ctx.moveTo(size, 0);       // Tip (Right, at 0 deg)
-            ctx.lineTo(-size / 2, -size / 2); // Top Left
-            ctx.lineTo(-size / 2, size / 2);  // Bottom Left
+            ctx.moveTo(size, 0);              // Front tip
+            ctx.lineTo(-size * 0.6, -size * 0.5); // Top left
+            ctx.lineTo(-size * 0.4, 0);       // Back indent
+            ctx.lineTo(-size * 0.6, size * 0.5);  // Bottom left
             ctx.closePath();
             ctx.fill();
 
-            ctx.restore();
+            // Outline for better visibility
+            ctx.strokeStyle = isSelected ? "#ffffff" : "rgba(0, 0, 0, 0.5)";
+            ctx.lineWidth = 1;
+            ctx.stroke();
 
-            // Selected UI overlays
+            ctx.restore();
+            ctx.shadowBlur = 0;
+
+            // ===========================================
+            // TARGET ID LABEL (always show)
+            // ===========================================
+            ctx.font = "bold 9px 'Courier New', monospace";
+            ctx.fillStyle = threatColor;
+            ctx.textAlign = "left";
+            ctx.textBaseline = "middle";
+            ctx.fillText(det.id, px + 12, py - 2);
+
+            // ===========================================
+            // SELECTED TARGET - Full data display
+            // ===========================================
             if (isSelected) {
-                ctx.fillStyle = "#fff";
-                ctx.font = "bold 11px monospace";
-                ctx.fillText(det.id, px + 8, py + 3);
+                // Targeting brackets around selected target
+                const bracketS = 18;
+                ctx.strokeStyle = colors.selected;
+                ctx.lineWidth = 1.5;
+
+                // Animated bracket expansion (static for static mode)
+                const bracketPulse = isStatic ? 0 : Math.sin(now() / 200) * 2;
+                const bOff = bracketS + bracketPulse;
+
+                // Top-left bracket
+                ctx.beginPath();
+                ctx.moveTo(px - bOff, py - bOff + 6);
+                ctx.lineTo(px - bOff, py - bOff);
+                ctx.lineTo(px - bOff + 6, py - bOff);
+                ctx.stroke();
+
+                // Top-right bracket
+                ctx.beginPath();
+                ctx.moveTo(px + bOff - 6, py - bOff);
+                ctx.lineTo(px + bOff, py - bOff);
+                ctx.lineTo(px + bOff, py - bOff + 6);
+                ctx.stroke();
+
+                // Bottom-left bracket
+                ctx.beginPath();
+                ctx.moveTo(px - bOff, py + bOff - 6);
+                ctx.lineTo(px - bOff, py + bOff);
+                ctx.lineTo(px - bOff + 6, py + bOff);
+                ctx.stroke();
+
+                // Bottom-right bracket
+                ctx.beginPath();
+                ctx.moveTo(px + bOff - 6, py + bOff);
+                ctx.lineTo(px + bOff, py + bOff);
+                ctx.lineTo(px + bOff, py + bOff - 6);
+                ctx.stroke();
+
+                // Data callout box
+                const boxX = px + 25;
+                const boxY = py - 50;
+                const boxW = 95;
+                const boxH = det.speed_kph ? 52 : 32;
+
+                // Line from target to box
+                ctx.strokeStyle = colors.dataBorder;
+                ctx.lineWidth = 1;
+                ctx.setLineDash([2, 2]);
+                ctx.beginPath();
+                ctx.moveTo(px + 15, py - 10);
+                ctx.lineTo(boxX, boxY + boxH / 2);
+                ctx.stroke();
+                ctx.setLineDash([]);
 
-                // Draw Trail (Breadcrumbs)
-                if (det.history && det.history.length > 0 && det.gpt_distance_m) {
-                    // Stadiametric Ranging Logic:
-                    // D_new = D_0 * (H_0 / H_new)
-                    // We assume det.history[0] is roughly frame 0 or close to it? 
-                    // No, history is rolling window of 30 frames.
-                    // We need the reference height H_0 from the first measurement.
-                    // det.gpt_distance_m corresponds to the box size at the moment GPT ran.
-                    // Let's assume current box H corresponds to current Distance D.
-                    // For past history point i: D_i = D_curr * (H_curr / H_i)
-
-                    // det.bbox is current.
-                    // det.history = [bbox_old, ..., bbox_new]
+                // Box background
+                ctx.fillStyle = colors.dataBox;
+                ctx.fillRect(boxX, boxY, boxW, boxH);
+
+                // Box border
+                ctx.strokeStyle = colors.dataBorder;
+                ctx.lineWidth = 1;
+                ctx.strokeRect(boxX, boxY, boxW, boxH);
+
+                // Corner accents
+                ctx.strokeStyle = colors.text;
+                ctx.lineWidth = 2;
+                const cornerLen = 5;
+
+                // Top-left
+                ctx.beginPath();
+                ctx.moveTo(boxX, boxY + cornerLen);
+                ctx.lineTo(boxX, boxY);
+                ctx.lineTo(boxX + cornerLen, boxY);
+                ctx.stroke();
+
+                // Top-right
+                ctx.beginPath();
+                ctx.moveTo(boxX + boxW - cornerLen, boxY);
+                ctx.lineTo(boxX + boxW, boxY);
+                ctx.lineTo(boxX + boxW, boxY + cornerLen);
+                ctx.stroke();
+
+                // Data text
+                ctx.font = "bold 10px 'Courier New', monospace";
+                ctx.fillStyle = colors.text;
+                ctx.textAlign = "left";
+
+                // Range
+                ctx.fillText(`RNG: ${Math.round(dist)}m`, boxX + 6, boxY + 14);
+
+                // Bearing
+                const bearingDeg = Math.round((angle + Math.PI / 2) * 180 / Math.PI);
+                ctx.fillText(`BRG: ${bearingDeg.toString().padStart(3, '0')}°`, boxX + 6, boxY + 28);
+
+                // Speed (if available)
+                if (det.speed_kph) {
+                    ctx.fillStyle = colors.neutral;
+                    ctx.fillText(`SPD: ${det.speed_kph.toFixed(0)} kph`, boxX + 6, boxY + 42);
+                }
 
+                // Trail rendering for selected target
+                if (det.history && det.history.length > 0 && det.gpt_distance_m) {
                     const currH = det.bbox.h;
                     const currDist = det.gpt_distance_m;
 
                     ctx.save();
-                    ctx.globalAlpha = 0.4;
-
-                    // Draw line
-                    ctx.beginPath();
-
-                    det.history.forEach((hBox, i) => {
-                        // hBox is [x, y, x2, y2] raw pixels (from inference.py history)
-                        // Logic: we need to normalize to current frame w/h to match radar logic?
-                        // radar logic uses:
-                        // rPx = (dist / maxRange) * R
-                        // angle = fov mapping
-
-                        // Problem: hBox is RAW pixels from backend inference.py (see SpeedEstimator)
-                        // tracker logic `normBBox` normalized the *current* bbox.
-                        // But history in `det` might be passed through from backend?
-                        // In `inference.py`, `track['history']` stores `track['bbox']`, which is [x1, y1, x2, y2] pixels.
-                        // Backend sends this. `tracker.js` copies it.
-
-                        // We need frame dimensions `fw`, `fh` (defined earlier in visualizer or state)
-                        // If fw not available, use state.frame.w
-                        const fw = state.frame.w || 1280;
-                        const fh = state.frame.h || 720;
-
-                        const hH = (hBox[3] - hBox[1]) / fh; // Normalized height
-                        const hX = ((hBox[0] + hBox[2]) / 2) / fw; // Normalized center X
-
+                    const available = det.history.length;
+                    const startIdx = Math.max(0, available - maxHist);
+                    const subset = det.history.slice(startIdx);
+
+                    let points = [];
+                    subset.forEach((hBox) => {
+                        let hH, hX;
+                        if (hBox[0] <= 2.0 && hBox[2] <= 2.0) {
+                            hH = hBox[3] - hBox[1];
+                            hX = (hBox[0] + hBox[2]) / 2;
+                        } else {
+                            const fw = state.frame.w || 1280;
+                            const fh = state.frame.h || 720;
+                            hH = (hBox[3] - hBox[1]) / fh;
+                            hX = ((hBox[0] + hBox[2]) / 2) / fw;
+                        }
                         if (hH <= 0.001) return;
 
-                        // Stadiametric: D_hist = D_curr * (currH_norm / hH_norm)
                         let distHist = currDist * (det.bbox.h / hH);
-
-                        // Project to Radar
                         const rPxHist = (clamp(distHist, 0, maxRangeM) / maxRangeM) * R;
                         const txHist = hX - 0.5;
                         const angleHist = (-Math.PI / 2) + (txHist * fovRad);
-
                         const pxHist = cx + Math.cos(angleHist) * rPxHist;
                         const pyHist = cy + Math.sin(angleHist) * rPxHist;
-
-                        if (i === 0) ctx.moveTo(pxHist, pyHist);
-                        else ctx.lineTo(pxHist, pyHist);
+                        points.push({ x: pxHist, y: pyHist });
                     });
 
-                    ctx.strokeStyle = col;
-                    ctx.lineWidth = 1;
-                    ctx.stroke();
+                    points.push({ x: px, y: py });
+
+                    ctx.lineWidth = 1.5;
+                    for (let i = 0; i < points.length - 1; i++) {
+                        const p1 = points[i];
+                        const p2 = points[i + 1];
+                        const age = points.length - 1 - i;
+                        const alpha = Math.max(0, 1.0 - (age / (maxHist + 1)));
+
+                        ctx.beginPath();
+                        ctx.moveTo(p1.x, p1.y);
+                        ctx.lineTo(p2.x, p2.y);
+                        ctx.strokeStyle = threatColor;
+                        ctx.globalAlpha = alpha * 0.6;
+                        ctx.stroke();
+                    }
+                    ctx.globalAlpha = 1;
                     ctx.restore();
                 }
 
-                ctx.setLineDash([]);
-
-                const mx = (cx + px) * 0.5;
-                const my = (cy + py) * 0.5;
-                const distStr = `${Math.round(dist)}m`;
-
-                ctx.font = "10px monospace";
-                const tm = ctx.measureText(distStr);
-                const tw = tm.width;
-                const th = 10;
-
-                ctx.fillStyle = "rgba(10, 15, 34, 0.85)";
-                ctx.fillRect(mx - tw / 2 - 3, my - th / 2 - 2, tw + 6, th + 4);
+                // Predicted path
+                if (det.predicted_path && maxFut > 0) {
+                    ctx.save();
+                    const futSubset = det.predicted_path.slice(0, maxFut);
 
-                ctx.fillStyle = "#22d3ee"; // Cyan
-                ctx.textAlign = "center";
-                ctx.textBaseline = "middle";
-                ctx.fillText(distStr, mx, my);
+                    if (futSubset.length > 0) {
+                        const currDist = det.gpt_distance_m || (det.depth_est_m || 2000);
+                        const fw = state.frame.w || 1280;
+                        const fh = state.frame.h || 720;
 
-                ctx.textAlign = "start";
-                ctx.textBaseline = "alphabetic";
+                        let predPoints = [{ x: px, y: py }];
+
+                        futSubset.forEach((pt) => {
+                            const pX = pt[0] <= 2.0 ? pt[0] : (pt[0] / fw);
+                            const pY = pt[0] <= 2.0 ? pt[1] : (pt[1] / fh);
+                            const txP = pX - 0.5;
+                            const angP = (-Math.PI / 2) + (txP * fovRad);
+                            const cY = (det.bbox.y <= 2.0) ? (det.bbox.y + det.bbox.h / 2) : ((det.bbox.y + det.bbox.h / 2) / fh);
+                            let distP = currDist * (cY / Math.max(0.01, pY));
+                            const rPxP = (clamp(distP, 0, maxRangeM) / maxRangeM) * R;
+                            const pxP = cx + Math.cos(angP) * rPxP;
+                            const pyP = cy + Math.sin(angP) * rPxP;
+                            predPoints.push({ x: pxP, y: pyP });
+                        });
+
+                        ctx.lineWidth = 1.5;
+                        ctx.setLineDash([4, 4]);
+
+                        for (let i = 0; i < predPoints.length - 1; i++) {
+                            const p1 = predPoints[i];
+                            const p2 = predPoints[i + 1];
+                            const alpha = Math.max(0, 1.0 - (i / maxFut));
+
+                            ctx.beginPath();
+                            ctx.moveTo(p1.x, p1.y);
+                            ctx.lineTo(p2.x, p2.y);
+                            ctx.strokeStyle = threatColor;
+                            ctx.globalAlpha = alpha * 0.8;
+                            ctx.stroke();
+                        }
+                        ctx.setLineDash([]);
+                        ctx.globalAlpha = 1;
+                    }
+                    ctx.restore();
+                }
             }
         });
     }
+
+    // ===========================================
+    // 8. STATUS OVERLAY - Top corners
+    // ===========================================
+    ctx.font = "bold 9px 'Courier New', monospace";
+    ctx.fillStyle = colors.textDim;
+    ctx.textAlign = "left";
+    ctx.textBaseline = "top";
+
+    // Top left - Mode
+    ctx.fillText(isStatic ? "SNAPSHOT" : "TGT ACQUISITION", 8, 8);
+
+    // Track count
+    const trackCount = source ? source.length : 0;
+    ctx.fillStyle = trackCount > 0 ? colors.text : colors.textDim;
+    ctx.fillText(`TRACKS: ${trackCount}`, 8, 22);
+
+    // Top right - Range setting
+    ctx.textAlign = "right";
+    ctx.fillStyle = colors.textDim;
+    ctx.fillText(`MAX RNG: ${maxRangeM}m`, w - 8, 8);
+
+    // Time
+    const timeStr = new Date().toLocaleTimeString('en-US', { hour12: false });
+    ctx.fillText(timeStr, w - 8, 22);
+
+    // Bottom center - FOV indicator
+    ctx.textAlign = "center";
+    ctx.fillStyle = colors.textDim;
+    ctx.fillText("FOV: 60°", cx, h - 12);
 };
 
-// Aliases for compatibility if needed, but ideally updated in main.js
+// Aliases for compatibility
 APP.ui.radar.renderFrameRadar = function () {
     const { state } = APP.core;
-    APP.ui.radar.render("frameRadar", state.detections);
+
+    // 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) {
+        const demoTracks = APP.core.demo.getFrameData(0); // Get frame 0 data
+        if (demoTracks && demoTracks.length > 0) {
+            trackSource = demoTracks;
+        }
+    }
+
+    // First frame radar is static - no sweep animation
+    APP.ui.radar.render("frameRadar", trackSource, { static: true });
 };
 
 APP.ui.radar.renderLiveRadar = function () {
     const { state } = APP.core;
-    APP.ui.radar.render("radarCanvas", state.tracker.tracks);
+    // Live radar has sweep animation
+    APP.ui.radar.render("radarCanvas", state.tracker.tracks, { static: false });
 };

inference.py

@@ -1272,12 +1272,12 @@ def run_inference(
                                 # Append Track ID
                                 if 'track_id' in d:
                                     lbl = f"{d['track_id']} {lbl}"
-                                # Append Speed/Direction if available
-                                if 'speed_kph' in d and d['speed_kph'] > 1.0: # Threshold static
-                                    lbl += f" {int(d['speed_kph'])}km/h"
-                                # Append GPT Distance if available (from first frame persistence)
-                                if d.get('gpt_distance_m'):
-                                    lbl += f" {int(d['gpt_distance_m'])}m"
+                                # Speed display removed per user request
+                                # if 'speed_kph' in d and d['speed_kph'] > 1.0:
+                                #     lbl += f" {int(d['speed_kph'])}km/h"
+                                # Distance display removed per user request
+                                # if d.get('gpt_distance_m'):
+                                #     lbl += f" {int(d['gpt_distance_m'])}m"
                                     
                                 display_labels.append(lbl)