refactor: replace frontend SPA with minimal detection UI

Delete the full Mission Console frontend (frontend/ directory) and
replace with a single index.html — vanilla HTML/JS with video upload,
mode/model picker, live MJPEG stream, processed video playback,
and collapsible detection JSON viewer.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

frontend/data/helicopter_demo_data.js

@@ -1,38 +0,0 @@
-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

@@ -1,38 +0,0 @@
-{
-  "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

@@ -1,302 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <link rel="stylesheet" href="style.css">
-  <title>Mission Console</title>
-</head>
-
-<body>
-  <div id="app">
-    <header>
-      <div class="brand">
-        <div class="logo" aria-hidden="true"></div>
-        <div>
-          <h1>Mission Console</h1>
-          <div class="sub">Video → detection → analysis → tracking → mission assessment</div>
-        </div>
-      </div>
-      <div class="status-row">
-        <div class="pill">
-          <span class="dot" id="sys-dot"></span>
-          <span id="sys-status">STANDBY · No video loaded</span>
-        </div>
-        <div class="pill">
-          <span class="kbd">Detect</span>
-          <span>First-frame analysis</span>
-        </div>
-        <div class="pill">
-          <span class="kbd">Track</span>
-          <span>Continuous monitoring</span>
-        </div>
-      </div>
-    </header>
-
-    <div class="workspace">
-      <aside>
-        <div class="card">
-          <h2>Video Input</h2>
-          <div class="hint">Upload one video. Tab 1 uses only the first frame. Tab 2 reuses the same video for tracking
-            and monitoring.</div>
-
-          <div class="row mt-md">
-            <label for="videoFile">Video file</label>
-            <span class="badge"><span id="videoMeta">No file</span></span>
-          </div>
-          <input id="videoFile" type="file" accept="video/*" />
-
-          <div class="mt-md">
-            <label>Mission Objective (optional · enables class filtering)</label>
-            <textarea id="missionText" rows="3"
-              placeholder="Optional: e.g., Detect people and vehicles; highlight hazards and key objects."></textarea>
-
-            <div class="hint mt-sm">
-              Mission objective is <b>optional</b>. If provided, it will be used directly as input to the detector.
-              If left blank, the detector will detect <b>all</b> objects without filtering.
-              <div class="mini mt-xs" id="hfBackendStatus">HF Backend: STANDBY</div>
-            </div>
-          </div>
-
-          <div class="btnrow">
-            <button id="btnLoadSample" class="btn secondary" title="Optional: wire up sample videos later" disabled>Load
-              Sample</button>
-            <button id="btnEject" class="btn danger" title="Unload video">Eject</button>
-          </div>
-
-          <div class="grid2">
-            <div>
-              <label>Detector</label>
-              <select id="detectorSelect">
-                <optgroup label="Object Detection Models">
-                  <option value="yolo11" data-kind="object" selected>Lite</option>
-                  <option value="detr_resnet50" data-kind="object">Big</option>
-                  <option value="grounding_dino" data-kind="object">Large</option>
-                </optgroup>
-                <optgroup label="Segmentation Models">
-                  <option value="GSAM2-L" data-kind="segmentation">GSAM2-L</option>
-                  <option value="GSAM2-B" data-kind="segmentation">GSAM2-B</option>
-                  <option value="GSAM2-S" data-kind="segmentation">GSAM2-S</option>
-                  <option value="YSAM2-L" data-kind="segmentation">YSAM2-L (Fast)</option>
-                  <option value="YSAM2-B" data-kind="segmentation">YSAM2-B (Fast)</option>
-                  <option value="YSAM2-S" data-kind="segmentation">YSAM2-S (Fast)</option>
-                </optgroup>
-                <optgroup label="Drone Detection Models">
-                  <option value="drone_yolo" data-kind="drone">Drone</option>
-                </optgroup>
-
-              </select>
-            </div>
-            <div>
-              <label>Tracking</label>
-              <select id="trackerSelect">
-                <option value="iou">IOU + velocity (built-in)</option>
-                <option value="external">External hook (user API)</option>
-              </select>
-            </div>
-
-            <label class="checkbox-row" for="enableDepthToggle" style="display:none">
-              <input type="checkbox" id="enableDepthToggle">
-              <span>Enable Legacy Depth Map (Slow)</span>
-            </label>
-            <label class="checkbox-row" for="enableGPTToggle" style="margin-top: 4px;">
-              <input type="checkbox" id="enableGPTToggle" checked>
-              <span style="color: var(--accent-light);">Enable GPT Reasoning</span>
-            </label>
-            <label class="checkbox-row" for="enableStreamToggle" style="margin-top: 4px;">
-              <input type="checkbox" id="enableStreamToggle" checked>
-              <span>Enable Stream Processing</span>
-            </label>
-          </div>
-
-        </div>
-
-
-        <div class="card" style="flex:1; min-height:0">
-          <h2>System Log</h2>
-          <div class="log" id="sysLog"></div>
-        </div>
-      </aside>
-
-      <main>
-        <div class="tabs">
-          <button class="tabbtn active" data-tab="frame">Tab 1 · Detect & Analyze</button>
-          <button class="tabbtn" data-tab="engage">Tab 2 · Track & Monitor</button>
-        </div>
-
-        <!-- ===== Tab 1 ===== -->
-        <section class="tab active" id="tab-frame">
-          <div class="frame-grid">
-            <div class="panel panel-monitor">
-              <h3>
-                <span>First Frame · Detection + Analysis</span>
-                <span class="rightnote" id="frameNote">Awaiting video</span>
-              </h3>
-              <div class="viewbox" id="frameViewBox">
-                <canvas id="frameCanvas" width="1280" height="720"></canvas>
-                <canvas id="frameOverlay" class="overlay" width="1280" height="720"></canvas>
-                <div class="watermark">EO/IR · Track-ID · Classification</div>
-                <div class="empty" id="frameEmpty">
-                  <div class="big">Upload a video to begin</div>
-                  <div class="small">This demo performs first-frame detection and analysis. Then it replays the video
-                    with continuous object tracking.</div>
-                  <div style="display:flex; gap:10px; margin-top:6px; flex-wrap:wrap; justify-content:center;">
-                    <span class="badge"><span class="dot"></span> If you are online, COCO-SSD loads automatically</span>
-                  </div>
-                </div>
-              </div>
-
-              <div class="btnrow" style="margin-top:10px">
-                <button id="btnReason" class="btn">Detect</button>
-                <button id="btnCancelReason" class="btn danger" style="display: none;">Cancel</button>
-                <button id="btnRecompute" class="btn secondary">Reanalyze</button>
-                <button id="btnClear" class="btn secondary">Clear</button>
-              </div>
-
-              <div class="strip mt-md">
-                <span class="chip" id="chipFrameDepth"
-                  title="Toggle depth view of first frame (if available)" style="display:none">VIEW:DEFAULT</span>
-              </div>
-            </div>
-
-
-
-            <div class="panel panel-summary" style="display:flex; flex-direction:column; min-height: 0; overflow: hidden;">
-              <h3>
-                <span>Object Track Cards</span>
-                <span class="rightnote" id="trackCount">0</span>
-              </h3>
-              <div class="list" id="frameTrackList" style="flex:1; overflow-y:auto; padding:6px; max-height:none;">
-                <!-- Cards injected here -->
-                <div style="font-style:italic; color:var(--faint); text-align:center; margin-top:20px; font-size:12px;">
-                  No objects tracked.
-                </div>
-              </div>
-            </div>
-
-            <!-- Threat Chat Panel -->
-            <div class="panel panel-chat" id="chatPanel">
-              <h3>
-                <span>Mission Analyst</span>
-                <button class="collapse-btn" id="chatToggle" style="font-size: 0.75rem;">▲ Close Chat</button>
-              </h3>
-              <div class="chat-container">
-                <div class="chat-messages" id="chatMessages">
-                  <div class="chat-message chat-system">
-                    <span class="chat-icon">SYS</span>
-                    <span class="chat-content">Run detection first, then ask questions about detected objects.</span>
-                  </div>
-                </div>
-                <div class="chat-input-row">
-                  <input type="text" id="chatInput" placeholder="Ask about detections..." autocomplete="off">
-                  <button id="chatSend" class="btn">Send</button>
-                </div>
-              </div>
-            </div>
-
-          </div>
-
-        </section>
-
-        <!-- ===== Tab 2 ===== -->
-        <section class="tab" id="tab-engage">
-          <div class="engage-grid">
-            <div class="panel">
-              <h3>
-                <span>Video Tracking · Continuous Monitoring</span>
-                <div style="display: flex; gap: 8px; align-items: center;">
-                  <button class="collapse-btn" id="btnToggleSidebar">◀ Hide Sidebar</button>
-                  <span class="rightnote" id="engageNote">Awaiting video</span>
-                </div>
-              </h3>
-
-              <div class="viewbox" style="min-height: 420px;">
-                <video id="videoEngage" playsinline muted></video>
-                <canvas id="engageOverlay" class="overlay"></canvas>
-                <div class="watermark">TRACK · ID · DIST · STATUS</div>
-                <div class="empty" id="engageEmpty">
-                  <div class="big">No video loaded</div>
-                  <div class="small">Upload a video. Run <b>Detect</b> first to analyze objects.
-                    Then click <b>Track</b>.</div>
-                </div>
-              </div>
-
-              <div class="btnrow mt-md">
-                <button id="btnEngage" class="btn">Track</button>
-                <button id="btnPause" class="btn secondary">Pause</button>
-                <button id="btnReset" class="btn secondary">Reset</button>
-              </div>
-
-              <div class="strip mt-md">
-                <span class="chip" id="chipPolicy">POLICY:AUTO</span>
-                <span class="chip" id="chipTracks">TRACKS:0</span>
-                <span class="chip" id="chipBeam">MODE:AUTO</span>
-                <span class="chip" id="chipHz">DET:6Hz</span>
-                <span class="chip" id="chipFeed" title="Toggle raw vs HF-processed feed (if available)">FEED:RAW</span>
-                <span class="chip" id="chipDepth" title="Toggle depth view (if available)" style="display:none">VIEW:DEFAULT</span>
-              </div>
-
-              <div class="mt-md">
-                <div class="row"><label>Active track progress (selected)</label><small class="mini"
-                    id="dwellText">—</small>
-                </div>
-                <div class="bar">
-                  <div id="dwellBar"></div>
-                </div>
-              </div>
-
-              <div class="hint mt-md">Manual selection: choose "Manual" in Policy, then click a target in the video.</div>
-            </div>
-
-            <div class="engage-right">
-              <div class="panel" style="flex:1; min-height:0">
-                <h3>
-                  <span>Live Track Cards</span>
-                  <span class="rightnote" id="liveStamp">—</span>
-                </h3>
-                <div class="list" id="trackList" style="max-height:none"></div>
-              </div>
-            </div>
-          </div>
-        </section>
-
-    </div>
-
-    <footer>
-      <div>Mission Console · Unclassified visuals</div>
-      <div class="mono" id="telemetry">VIS=16km · DET=6Hz</div>
-    </footer>
-
-    <!-- Hidden video used only for first-frame capture -->
-    <video id="videoHidden" playsinline muted style="display:none"></video>
-  </div>
-
-  <script>
-    window.API_CONFIG = {
-      BACKEND_BASE: "https://biaslab2025-perception.hf.space"
-    };
-  </script>
-  <script src="./js/init.js"></script>
-  <script src="./js/core/config.js"></script>
-  <script src="./js/core/utils.js"></script>
-  <script src="./js/core/state.js"></script>
-  <script src="./js/core/physics.js"></script>
-  <script src="./js/core/video.js"></script>
-  <script src="./js/core/hel.js"></script>
-  <script src="./js/ui/logging.js"></script>
-  <script src="./js/core/gptMapping.js"></script>
-  <script src="./js/core/tracker.js"></script>
-  <script src="./js/api/client.js"></script>
-  <script src="./js/ui/overlays.js"></script>
-  <script src="./js/ui/cards.js"></script>
-  <script src="./js/ui/features.js"></script>
-  <script src="./js/ui/cursor.js"></script>
-  <script src="./js/ui/chat.js"></script>
-  <script src="./data/helicopter_demo_data.js"></script>
-  <script src="./js/core/demo.js"></script>
-  <script src="./js/main.js"></script>
-
-</body>
-
-</html>

frontend/js/api/client.js

@@ -1,372 +0,0 @@
-// API Client Module - Backend communication
-APP.api.client = {};
-
-APP.api.client.hfDetectAsync = async function (formData) {
-    const { state } = APP.core;
-    if (!state.hf.baseUrl) return;
-
-    const resp = await fetch(`${state.hf.baseUrl}/detect/async`, {
-        method: "POST",
-        body: formData
-    });
-
-    if (!resp.ok) {
-        const err = await resp.json().catch(() => ({ detail: resp.statusText }));
-        throw new Error(err.detail || "Async detection submission failed");
-    }
-
-    const data = await resp.json();
-
-    // Store URLs from response
-    if (data.status_url) {
-        state.hf.statusUrl = data.status_url.startsWith("http")
-            ? data.status_url
-            : `${state.hf.baseUrl}${data.status_url}`;
-    }
-
-    if (data.video_url) {
-        state.hf.videoUrl = data.video_url.startsWith("http")
-            ? data.video_url
-            : `${state.hf.baseUrl}${data.video_url}`;
-    }
-
-    if (data.depth_video_url) {
-        state.hf.depthVideoUrl = data.depth_video_url.startsWith("http")
-            ? data.depth_video_url
-            : `${state.hf.baseUrl}${data.depth_video_url}`;
-    }
-
-    if (data.depth_first_frame_url) {
-        state.hf.depthFirstFrameUrl = data.depth_first_frame_url.startsWith("http")
-            ? data.depth_first_frame_url
-            : `${state.hf.baseUrl}${data.depth_first_frame_url}`;
-    }
-
-    return data;
-};
-
-APP.api.client.checkJobStatus = async function (jobId) {
-    const { state } = APP.core;
-    if (!state.hf.baseUrl) return { status: "error" };
-
-    const url = state.hf.statusUrl || `${state.hf.baseUrl}/detect/job/${jobId}`;
-    const resp = await fetch(url, { cache: "no-store" });
-
-    if (!resp.ok) {
-        if (resp.status === 404) return { status: "not_found" };
-        throw new Error(`Status check failed: ${resp.status}`);
-    }
-
-    return await resp.json();
-};
-
-APP.api.client.cancelBackendJob = async function (jobId, reason) {
-    const { state } = APP.core;
-    const { log } = APP.ui.logging;
-
-    if (!state.hf.baseUrl || !jobId) return;
-
-    // Don't attempt cancel on HF Space (it doesn't support it)
-    if (state.hf.baseUrl.includes("hf.space")) {
-        log(`Job cancel skipped for HF Space (${reason || "user request"})`, "w");
-        return { status: "skipped", message: "Cancel disabled for HF Space" };
-    }
-
-    try {
-        const resp = await fetch(`${state.hf.baseUrl}/detect/job/${jobId}`, {
-            method: "DELETE"
-        });
-
-        if (resp.ok) {
-            const result = await resp.json();
-            log(`Job ${jobId.substring(0, 8)} cancelled`, "w");
-            return result;
-        }
-        if (resp.status === 404) return { status: "not_found" };
-        throw new Error("Cancel failed");
-    } catch (err) {
-        log(`Cancel error: ${err.message}`, "e");
-        return { status: "error", message: err.message };
-    }
-};
-
-/**
- * Sync GPT enrichment data from polled first_frame_detections into state.detections.
- * Returns true if any card was updated and needs re-render.
- */
-APP.api.client._syncGptFromDetections = function (rawDets, logLabel) {
-    const { state } = APP.core;
-    const { log } = APP.ui.logging;
-    let needsRender = false;
-
-    // Phase A: Sync assessment status, relevance fields
-    for (const rd of rawDets) {
-        const tid = rd.track_id || `T${String(rawDets.indexOf(rd) + 1).padStart(2, "0")}`;
-        const existing = (state.detections || []).find(d => d.id === tid);
-        if (existing) {
-            if (rd.assessment_status && existing.assessment_status !== rd.assessment_status) {
-                existing.assessment_status = rd.assessment_status;
-                needsRender = true;
-            }
-            if (rd.mission_relevant !== undefined && rd.mission_relevant !== null) {
-                existing.mission_relevant = rd.mission_relevant;
-            }
-            if (rd.relevance_reason) {
-                existing.relevance_reason = rd.relevance_reason;
-            }
-        }
-    }
-
-    // Phase B: Full GPT feature merge (gated on gpt_raw)
-    const hasGptData = rawDets.some(d => d.gpt_raw);
-    if (hasGptData) {
-        state.hf.firstFrameDetections = rawDets;
-        for (const rd of rawDets) {
-            const tid = rd.track_id || `T${String(rawDets.indexOf(rd) + 1).padStart(2, "0")}`;
-            const existing = (state.detections || []).find(d => d.id === tid);
-            if (existing && rd.gpt_raw) {
-                const g = rd.gpt_raw;
-                existing.features = APP.core.gptMapping.buildFeatures(g);
-                existing.threat_level_score = rd.threat_level_score || g.threat_level_score || 0;
-                existing.threat_classification = rd.threat_classification || g.threat_classification || "Unknown";
-                existing.weapon_readiness = rd.weapon_readiness || g.weapon_readiness || "Unknown";
-                existing.gpt_distance_m = rd.gpt_distance_m || null;
-                existing.gpt_direction = rd.gpt_direction || null;
-                needsRender = true;
-            }
-        }
-        log(`Track cards updated with GPT assessment${logLabel ? " (" + logLabel + ")" : ""}`, "g");
-    }
-
-    if (needsRender && APP.ui && APP.ui.cards && APP.ui.cards.renderFrameTrackList) {
-        APP.ui.cards.renderFrameTrackList();
-    }
-
-    return needsRender;
-};
-
-APP.api.client.pollAsyncJob = async function () {
-    const { state } = APP.core;
-    const { log, setHfStatus } = APP.ui.logging;
-    const { fetchProcessedVideo, fetchDepthVideo, fetchDepthFirstFrame } = APP.core.video;
-    const syncGpt = APP.api.client._syncGptFromDetections;
-
-    const pollInterval = 3000; // 3 seconds
-    const maxAttempts = 200;   // 10 minutes max
-    let attempts = 0;
-    let fetchingVideo = false;
-
-    return new Promise((resolve, reject) => {
-        state.hf.asyncPollInterval = setInterval(async () => {
-            attempts++;
-
-            try {
-                const resp = await fetch(state.hf.statusUrl, { cache: "no-store" });
-
-                if (!resp.ok) {
-                    if (resp.status === 404) {
-                        clearInterval(state.hf.asyncPollInterval);
-                        reject(new Error("Job expired or not found"));
-                        return;
-                    }
-                    throw new Error(`Status check failed: ${resp.statusText}`);
-                }
-
-                const status = await resp.json();
-                state.hf.asyncStatus = status.status;
-                state.hf.asyncProgress = status;
-
-                if (status.status === "completed") {
-                    if (fetchingVideo) return;
-                    fetchingVideo = true;
-
-                    const completedJobId = state.hf.asyncJobId;
-                    log(`✓ Backend job ${completedJobId.substring(0, 8)}: completed successfully`, "g");
-                    setHfStatus("job completed, fetching video...");
-
-                    // Final GPT sync — enrichment may have completed during
-                    // processing but the poll never landed on a "processing"
-                    // cycle that picked it up (common for segmentation mode
-                    // where _enrich_first_frame_gpt is skipped).
-                    if (status.first_frame_detections && status.first_frame_detections.length > 0) {
-                        syncGpt(status.first_frame_detections, "final sync");
-                    }
-
-                    try {
-                        await fetchProcessedVideo();
-                        await fetchDepthVideo();
-                        await fetchDepthFirstFrame();
-
-                        clearInterval(state.hf.asyncPollInterval);
-                        state.hf.completedJobId = state.hf.asyncJobId;  // preserve for post-completion sync
-                        state.hf.asyncJobId = null;
-                        setHfStatus("ready");
-                        resolve();
-                    } catch (err) {
-                        if (err && err.code === "VIDEO_PENDING") {
-                            setHfStatus("job completed, finalizing video...");
-                            fetchingVideo = false;
-                            return;
-                        }
-                        clearInterval(state.hf.asyncPollInterval);
-                        state.hf.asyncJobId = null;
-                        reject(err);
-                    }
-                } else if (status.status === "failed") {
-                    clearInterval(state.hf.asyncPollInterval);
-                    const errMsg = status.error || "Processing failed";
-                    log(`✗ Backend job ${state.hf.asyncJobId.substring(0, 8)}: failed - ${errMsg}`, "e");
-                    state.hf.asyncJobId = null;
-                    setHfStatus(`error: ${errMsg}`);
-                    reject(new Error(errMsg));
-                } else {
-                    // Still processing
-                    const progressInfo = status.progress ? ` (${Math.round(status.progress * 100)}%)` : "";
-                    setHfStatus(`job ${state.hf.asyncJobId.substring(0, 8)}: ${status.status}${progressInfo} (${attempts})`);
-
-                    // Check if GPT enrichment has updated first-frame detections
-                    if (status.first_frame_detections && status.first_frame_detections.length > 0) {
-                        syncGpt(status.first_frame_detections);
-                    }
-                }
-
-                if (attempts >= maxAttempts) {
-                    clearInterval(state.hf.asyncPollInterval);
-                    reject(new Error("Polling timeout (10 minutes)"));
-                }
-            } catch (err) {
-                clearInterval(state.hf.asyncPollInterval);
-                reject(err);
-            }
-        }, pollInterval);
-    });
-};
-
-// External detection hook (can be replaced by user)
-APP.api.client.externalDetect = async function (input) {
-    console.log("externalDetect called", input);
-    return [];
-};
-
-// External features hook (can be replaced by user)
-APP.api.client.externalFeatures = async function (detections, frameInfo) {
-    console.log("externalFeatures called for", detections.length, "objects");
-    return {};
-};
-
-// External tracker hook (can be replaced by user)
-APP.api.client.externalTrack = async function (videoEl) {
-    console.log("externalTrack called");
-    return [];
-};
-
-// Call HF object detection directly (for first frame)
-APP.api.client.callHfObjectDetection = async function (canvas) {
-    const { state } = APP.core;
-    const { canvasToBlob } = APP.core.utils;
-    const { CONFIG } = APP.core;
-
-    const proxyBase = (CONFIG.PROXY_URL || "").trim();
-
-    if (proxyBase) {
-        const blob = await canvasToBlob(canvas);
-        const form = new FormData();
-        form.append("image", blob, "frame.jpg");
-
-        const resp = await fetch(`${proxyBase.replace(/\/$/, "")}/detect`, {
-            method: "POST",
-            body: form
-        });
-
-        if (!resp.ok) {
-            let detail = `Proxy inference failed (${resp.status})`;
-            try {
-                const err = await resp.json();
-                detail = err.detail || err.error || detail;
-            } catch (_) { }
-            throw new Error(detail);
-        }
-
-        return await resp.json();
-    }
-
-    // Default: use the backend base URL
-    const blob = await canvasToBlob(canvas);
-    const form = new FormData();
-    form.append("image", blob, "frame.jpg");
-
-    const resp = await fetch(`${state.hf.baseUrl}/detect/frame`, {
-        method: "POST",
-        body: form
-    });
-
-    if (!resp.ok) {
-        throw new Error(`Frame detection failed: ${resp.statusText}`);
-    }
-
-    return await resp.json();
-};
-
-// Capture current video frame and send to backend for GPT analysis
-APP.api.client.analyzeFrame = async function (videoEl, tracks) {
-    const { state } = APP.core;
-    const { canvasToBlob } = APP.core.utils;
-
-    // Capture current video frame
-    const canvas = document.createElement("canvas");
-    canvas.width = videoEl.videoWidth;
-    canvas.height = videoEl.videoHeight;
-    canvas.getContext("2d").drawImage(videoEl, 0, 0);
-    const blob = await canvasToBlob(canvas);
-
-    // Convert normalized bbox (0-1) back to pixel coords for backend
-    const w = canvas.width, h = canvas.height;
-    const dets = tracks.map(t => ({
-        track_id: t.id,
-        label: t.label,
-        bbox: [
-            Math.round(t.bbox.x * w),
-            Math.round(t.bbox.y * h),
-            Math.round((t.bbox.x + t.bbox.w) * w),
-            Math.round((t.bbox.y + t.bbox.h) * h),
-        ],
-        score: t.score,
-    }));
-
-    const form = new FormData();
-    form.append("image", blob, "frame.jpg");
-    form.append("detections", JSON.stringify(dets));
-    const jobId = state.hf.asyncJobId || state.hf.completedJobId;
-    if (jobId) form.append("job_id", jobId);
-
-    const resp = await fetch(`${state.hf.baseUrl}/detect/analyze-frame`, {
-        method: "POST",
-        body: form,
-    });
-    if (!resp.ok) throw new Error(`Frame analysis failed: ${resp.statusText}`);
-    return await resp.json();
-};
-
-// Chat about threats using GPT
-APP.api.client.chatAboutThreats = async function (question, detections) {
-    const { state } = APP.core;
-
-    const form = new FormData();
-    form.append("question", question);
-    form.append("detections", JSON.stringify(detections));
-    if (state.hf.missionSpec) {
-        form.append("mission_context", JSON.stringify(state.hf.missionSpec));
-    }
-
-    const resp = await fetch(`${state.hf.baseUrl}/chat/threat`, {
-        method: "POST",
-        body: form
-    });
-
-    if (!resp.ok) {
-        const err = await resp.json().catch(() => ({ detail: resp.statusText }));
-        throw new Error(err.detail || "Chat request failed");
-    }
-
-    return await resp.json();
-};

frontend/js/core/config.js

@@ -1,15 +0,0 @@
-APP.core.CONFIG = {
-    // API Endpoints will be loaded from window.API_CONFIG or defaults
-    BACKEND_BASE: (window.API_CONFIG?.BACKEND_BASE || window.API_CONFIG?.BASE_URL || "").replace(/\/$/, "") || window.location.origin,
-    HF_TOKEN: window.API_CONFIG?.HF_TOKEN || "",
-    PROXY_URL: (window.API_CONFIG?.PROXY_URL || "").trim(),
-
-    // Tracking Constants
-    REASON_INTERVAL: 30,
-    MAX_TRACKS: 50,
-    TRACK_PRUNE_MS: 1500,
-    TRACK_MATCH_THRESHOLD: 0.25,
-
-    // Default Queries
-    DEFAULT_QUERY_CLASSES: ["drone", "uav", "quadcopter", "fixed-wing", "missile", "person", "vehicle"]
-};

frontend/js/core/demo.js

@@ -1,142 +0,0 @@
-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/core/gptMapping.js

@@ -1,46 +0,0 @@
-/**
- * gptMapping.js — canonical GPT-raw → features field mapping.
- *
- * Replaces 4 identical inline mapping blocks across main.js, client.js,
- * and tracker.js (2 locations).
- */
-APP.core.gptMapping = {};
-
-/** Frozen assessment-status string constants. */
-APP.core.gptMapping.STATUS = Object.freeze({
-    ASSESSED: "ASSESSED",
-    UNASSESSED: "UNASSESSED",
-    STALE: "STALE",
-    PENDING_GPT: "PENDING_GPT",
-});
-
-/**
- * Build a features object from a gpt_raw payload.
- *
- * @param {Object|null|undefined} gptRaw - The gpt_raw dict from a detection.
- * @returns {Object} Features key-value map (empty object if gptRaw is falsy).
- */
-APP.core.gptMapping.buildFeatures = function (gptRaw) {
-    if (!gptRaw) return {};
-    const rangeStr = gptRaw.range_estimate && gptRaw.range_estimate !== "Unknown"
-        ? gptRaw.range_estimate + " (est.)" : "Unknown";
-    const features = {
-        "Type": gptRaw.object_type || "Unknown",
-        "Size": gptRaw.size || "Unknown",
-        "Threat Lvl": (gptRaw.threat_level || gptRaw.threat_level_score || "?") + "/10",
-        "Status": gptRaw.threat_classification || "?",
-        "Weapons": (gptRaw.visible_weapons || []).join(", ") || "None Visible",
-        "Readiness": gptRaw.weapon_readiness || "Unknown",
-        "Motion": gptRaw.motion_status || "Unknown",
-        "Range": rangeStr,
-        "Bearing": gptRaw.bearing || "Unknown",
-        "Intent": gptRaw.tactical_intent || "Unknown",
-    };
-    const dynFeats = gptRaw.dynamic_features || [];
-    for (const feat of dynFeats) {
-        if (feat && feat.key && feat.value) {
-            features[feat.key] = feat.value;
-        }
-    }
-    return features;
-};

frontend/js/core/hel.js

@@ -1,245 +0,0 @@
-// HEL (High-Energy Laser) Physics and Computation Module
-APP.core.hel = {};
-
-// Get current knob values from UI
-APP.core.hel.getKnobs = function () {
-    const { $ } = APP.core.utils;
-
-    const helPower = $("#helPower");
-    const helAperture = $("#helAperture");
-    const helM2 = $("#helM2");
-    const helJitter = $("#helJitter");
-    const helDuty = $("#helDuty");
-    const helMode = $("#helMode");
-    const atmVis = $("#atmVis");
-    const atmCn2 = $("#atmCn2");
-    const seaSpray = $("#seaSpray");
-    const aoQ = $("#aoQ");
-    const rangeBase = $("#rangeBase");
-
-    if (!helPower) return {};
-
-    return {
-        PkW: +helPower.value,
-        aperture: +helAperture.value,
-        M2: +helM2.value,
-        jitter_urad: +helJitter.value,
-        duty: (+helDuty.value) / 100,
-        mode: helMode ? helMode.value : "cw",
-        vis_km: +atmVis.value,
-        cn2: +atmCn2.value,
-        spray: +seaSpray.value,
-        ao: +aoQ.value,
-        baseRange: +rangeBase.value
-    };
-};
-
-// Compute max power at target considering atmospheric effects
-APP.core.hel.maxPowerAtTarget = function (range_m) {
-    const k = APP.core.hel.getKnobs();
-    if (!k.PkW) return { Ptar: 0, Pout: k.PkW || 0, trans: 0, turb: 0, beam: 0 };
-
-    const { clamp } = APP.core.utils;
-
-    // Atmospheric transmission (Beer-Lambert approximation)
-    const sigma_km = 3.912 / Math.max(1, k.vis_km);
-    const range_km = range_m / 1000;
-    const trans = Math.exp(-sigma_km * range_km);
-
-    // Turbulence factor (simplified Cn² model)
-    const cn2_factor = clamp(1 - (k.cn2 / 10) * 0.3, 0.5, 1);
-    const ao_correction = 1 + (k.ao / 10) * 0.25;
-    const turb = cn2_factor * ao_correction;
-
-    // Sea spray attenuation
-    const spray_factor = 1 - (k.spray / 10) * 0.15;
-
-    // Beam quality degradation with range
-    const beam_spread = 1 + (k.M2 - 1) * (range_km / 5);
-    const jitter_loss = 1 / (1 + (k.jitter_urad / 10) * (range_km / 3));
-    const beam = jitter_loss / beam_spread;
-
-    // Total power at target
-    const Pout = k.PkW * k.duty;
-    const Ptar = Pout * trans * turb * spray_factor * beam;
-
-    return {
-        Ptar: Math.max(0, Ptar),
-        Pout,
-        trans,
-        turb: turb * spray_factor,
-        beam
-    };
-};
-
-// Estimate required power based on target features
-APP.core.hel.requiredPowerFromFeatures = function (feat) {
-    if (!feat) return 35; // Default
-
-    let base = 30; // kW base requirement
-
-    // Adjust based on material
-    const material = (feat.material || "").toLowerCase();
-    if (material.includes("metal") || material.includes("aluminum")) base *= 1.2;
-    if (material.includes("composite") || material.includes("carbon")) base *= 0.8;
-    if (material.includes("plastic") || material.includes("polymer")) base *= 0.6;
-
-    // Adjust based on reflectivity
-    const refl = feat.reflectivity;
-    if (typeof refl === "number") {
-        base *= (1 + refl * 0.5); // Higher reflectivity = more power needed
-    }
-
-    // Adjust based on size
-    const size = feat.physical_size;
-    if (typeof size === "number") {
-        base *= Math.max(0.5, Math.min(2, size / 2)); // Assuming size in meters
-    }
-
-    return Math.round(base);
-};
-
-// Calculate required dwell time
-APP.core.hel.requiredDwell = function (range_m, reqP_kW, maxP_kW, baseDwell_s) {
-    if (maxP_kW <= 0) return Infinity;
-    if (maxP_kW >= reqP_kW) return baseDwell_s;
-
-    // Dwell inflates quadratically as power drops below requirement
-    const ratio = reqP_kW / maxP_kW;
-    return baseDwell_s * ratio * ratio;
-};
-
-// Calculate probability of kill
-APP.core.hel.pkillFromMargin = function (margin_kW, baseDwell_s, reqDwell_s) {
-    if (margin_kW <= 0) return 0;
-    if (reqDwell_s <= 0) return 0;
-
-    const dwellRatio = baseDwell_s / reqDwell_s;
-    const marginFactor = Math.min(1, margin_kW / 50); // Normalize margin
-
-    return Math.min(0.99, dwellRatio * marginFactor * 0.95);
-};
-
-// Recompute HEL synthesis for all detections
-APP.core.hel.recomputeHEL = async function () {
-    const { state } = APP.core;
-    const { log } = APP.ui.logging;
-    const knobs = APP.core.hel.getKnobs();
-
-    if (!state.detections || state.detections.length === 0) return;
-
-    for (const det of state.detections) {
-        // Get range from GPT or use baseline
-        const range = det.gpt_distance_m || knobs.baseRange || 1500;
-
-        // Compute power at target
-        const power = APP.core.hel.maxPowerAtTarget(range);
-        det.maxP_kW = power.Ptar;
-
-        // Required power from features
-        det.reqP_kW = APP.core.hel.requiredPowerFromFeatures(det.features);
-
-        // Dwell calculation
-        det.baseDwell_s = det.baseDwell_s || 5.0;
-        det.reqDwell_s = APP.core.hel.requiredDwell(range, det.reqP_kW, det.maxP_kW, det.baseDwell_s);
-
-        // P(kill)
-        const margin = det.maxP_kW - det.reqP_kW;
-        det.pkill = APP.core.hel.pkillFromMargin(margin, det.baseDwell_s, det.reqDwell_s);
-
-        // Store range
-        det.baseRange_m = range;
-    }
-
-    log("HEL synthesis updated for all targets.", "t");
-};
-
-// External hook for HEL synthesis (can be replaced by user)
-APP.core.hel.externalHEL = async function (detections, knobs) {
-    // Default implementation - can be replaced by user
-    console.log("externalHEL called for", detections.length, "objects", knobs);
-    return {
-        targets: {},
-        system: { maxP_kW: 0, reqP_kW: 0, margin_kW: 0, medianRange_m: 0 }
-    };
-};
-
-// Sync knob display values in the UI
-APP.core.hel.syncKnobDisplays = function () {
-    const { $ } = APP.core.utils;
-
-    const helPower = $("#helPower");
-    const helAperture = $("#helAperture");
-    const helM2 = $("#helM2");
-    const helJitter = $("#helJitter");
-    const helDuty = $("#helDuty");
-    const atmVis = $("#atmVis");
-    const atmCn2 = $("#atmCn2");
-    const seaSpray = $("#seaSpray");
-    const aoQ = $("#aoQ");
-    const rangeBase = $("#rangeBase");
-    const detHz = $("#detHz");
-    const assessWindow = $("#assessWindow");
-    const policyMode = $("#policyMode");
-
-    if (helPower) {
-        const v = $("#helPowerVal");
-        if (v) v.textContent = helPower.value;
-    }
-    if (helAperture) {
-        const v = $("#helApertureVal");
-        if (v) v.textContent = (+helAperture.value).toFixed(2);
-    }
-    if (helM2) {
-        const v = $("#helM2Val");
-        if (v) v.textContent = (+helM2.value).toFixed(1);
-    }
-    if (helJitter) {
-        const v = $("#helJitterVal");
-        if (v) v.textContent = (+helJitter.value).toFixed(1);
-    }
-    if (helDuty) {
-        const v = $("#helDutyVal");
-        if (v) v.textContent = helDuty.value;
-    }
-    if (atmVis) {
-        const v = $("#atmVisVal");
-        if (v) v.textContent = atmVis.value;
-    }
-    if (atmCn2) {
-        const v = $("#atmCn2Val");
-        if (v) v.textContent = atmCn2.value;
-    }
-    if (seaSpray) {
-        const v = $("#seaSprayVal");
-        if (v) v.textContent = seaSpray.value;
-    }
-    if (aoQ) {
-        const v = $("#aoQVal");
-        if (v) v.textContent = aoQ.value;
-    }
-    if (rangeBase) {
-        const v = $("#rangeBaseVal");
-        if (v) v.textContent = rangeBase.value;
-    }
-    if (detHz) {
-        const v = $("#detHzVal");
-        if (v) v.textContent = detHz.value;
-    }
-    if (assessWindow) {
-        const v = $("#assessWindowVal");
-        if (v) v.textContent = (+assessWindow.value).toFixed(1);
-    }
-
-    // Update chips
-    const chipPolicy = $("#chipPolicy");
-    const chipHz = $("#chipHz");
-    if (chipPolicy && policyMode) chipPolicy.textContent = `POLICY:${policyMode.value.toUpperCase()}`;
-    if (chipHz && detHz) chipHz.textContent = `DET:${detHz.value}Hz`;
-
-    // Update telemetry footer
-    const telemetry = $("#telemetry");
-    if (telemetry && helPower && atmVis && atmCn2 && aoQ && detHz) {
-        telemetry.textContent = `VIS=${atmVis.value}km · DET=${detHz.value}Hz`;
-    }
-};

frontend/js/core/physics.js

@@ -1,57 +0,0 @@
-APP.core.physics = {};
-
-APP.core.physics.defaultAimpoint = function (label) {
-    const l = (label || "object").toLowerCase();
-    if (l.includes("airplane") || l.includes("drone") || l.includes("uav") || l.includes("kite") || l.includes("bird")) {
-        return { relx: 0.62, rely: 0.55, label: "engine" };
-    }
-    if (l.includes("helicopter")) {
-        return { relx: 0.50, rely: 0.45, label: "rotor_hub" };
-    }
-    if (l.includes("boat") || l.includes("ship")) {
-        return { relx: 0.60, rely: 0.55, label: "bridge/engine" };
-    }
-    if (l.includes("truck") || l.includes("car")) {
-        return { relx: 0.55, rely: 0.62, label: "engine_block" };
-    }
-    return { relx: 0.50, rely: 0.55, label: "center_mass" };
-};
-
-APP.core.physics.aimpointByLabel = function (label) {
-    const l = String(label || "").toLowerCase();
-    if (l.includes("engine") || l.includes("fuel")) return { relx: 0.64, rely: 0.58, label: label };
-    if (l.includes("wing")) return { relx: 0.42, rely: 0.52, label: label };
-    if (l.includes("nose") || l.includes("sensor")) return { relx: 0.28, rely: 0.48, label: label };
-    if (l.includes("rotor")) return { relx: 0.52, rely: 0.42, label: label };
-    return { relx: 0.50, rely: 0.55, label: label || "center_mass" };
-};
-
-APP.core.physics.getKnobs = function () {
-    const { $ } = APP.core.utils;
-    const helPower = $("#helPower");
-    const helAperture = $("#helAperture");
-    const helM2 = $("#helM2");
-    const helJitter = $("#helJitter");
-    const helDuty = $("#helDuty");
-    const helMode = $("#helMode");
-    const atmVis = $("#atmVis");
-    const atmCn2 = $("#atmCn2");
-    const seaSpray = $("#seaSpray");
-    const aoQ = $("#aoQ");
-    const rangeBase = $("#rangeBase");
-
-    if (!helPower) return {};
-
-    const PkW = +helPower.value;
-    const aperture = +helAperture.value;
-    const M2 = +helM2.value;
-    const jitter_urad = +helJitter.value;
-    const duty = (+helDuty.value) / 100;
-    const mode = helMode ? helMode.value : "cw";
-    const vis_km = +atmVis.value;
-    const cn2 = +atmCn2.value;
-    const spray = +seaSpray.value;
-    const ao = +aoQ.value;
-    const baseRange = +rangeBase.value;
-    return { PkW, aperture, M2, jitter_urad, duty, mode, vis_km, cn2, spray, ao, baseRange };
-};

frontend/js/core/state.js

@@ -1,80 +0,0 @@
-APP.core.state = {
-    videoUrl: null,
-    videoFile: null,
-    videoLoaded: false,
-    useProcessedFeed: false,
-    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: {
-        // Will be properly initialized after CONFIG loads
-        baseUrl: (window.API_CONFIG?.BACKEND_BASE || window.API_CONFIG?.BASE_URL || "").replace(/\/$/, "") || window.location.origin,
-        detector: "auto",
-        asyncJobId: null,           // Current job ID from /detect/async
-        completedJobId: null,       // Preserved job ID for post-completion track sync
-        asyncPollInterval: null,    // Polling timer handle
-        firstFrameUrl: null,        // First frame preview URL
-        firstFrameDetections: null, // First-frame detections from backend
-        statusUrl: null,            // Status polling URL
-        videoUrl: null,             // Final video URL
-        asyncStatus: "idle",        // "idle"|"processing"|"completed"|"failed"
-        asyncProgress: null,        // Progress data from status endpoint
-        queries: [],                // Mission objective used as query
-        processedUrl: null,
-        processedBlob: null,
-        depthVideoUrl: null,        // Depth video URL
-        depthFirstFrameUrl: null,   // First frame depth URL
-        depthBlob: null,            // Depth video blob
-        depthFirstFrameBlob: null,  // Depth first frame blob
-        summary: null,
-        busy: false,
-        lastError: null,
-        missionId: null,
-        missionSpec: null,
-        plan: null
-    },
-
-    detector: {
-        mode: "coco",
-        kind: "object",
-        loaded: false,
-        model: null,
-        loading: false,
-        cocoBlocked: false,
-        hfTrackingWarned: false
-    },
-
-    tracker: {
-        mode: "iou",
-        tracks: [],
-        nextId: 1,
-        lastDetTime: 0,
-        lastHFSync: 0,
-        running: false,
-        selectedTrackId: null,
-        beamOn: false,
-        lastFrameTime: 0,
-        frameCount: 0,
-        _lastCardRenderFrame: 0,    // Frame count at last card render
-        _gptBusy: false             // Prevent overlapping GPT calls
-    },
-
-    frame: {
-        w: 1280,
-        h: 720,
-        bitmap: null
-    },
-
-    detections: [], // from Tab 1
-    selectedId: null,
-
-    intelBusy: false,
-
-    ui: {
-        cursorMode: "on",
-        agentCursor: { x: 0.65, y: 0.28, vx: 0, vy: 0, visible: false, target: null, mode: "idle", t0: 0 }
-    }
-};

frontend/js/core/tracker.js

@@ -1,278 +0,0 @@
-APP.core.tracker = {};
-
-APP.core.tracker.matchAndUpdateTracks = function (dets, dtSec) {
-    const { state } = APP.core;
-    const { CONFIG } = APP.core;
-    const { normBBox, lerp, now, $ } = APP.core.utils;
-    const { defaultAimpoint } = APP.core.physics;
-    const { log } = APP.ui.logging;
-
-    const videoEngage = $("#videoEngage");
-    const rangeBase = $("#rangeBase"); // Fixed Selector
-
-    if (!videoEngage) return;
-
-    // IOU helper
-    function iou(a, b) {
-        const ax2 = a.x + a.w, ay2 = a.y + a.h;
-        const bx2 = b.x + b.w, by2 = b.y + b.h;
-        const ix1 = Math.max(a.x, b.x), iy1 = Math.max(a.y, b.y);
-        const ix2 = Math.min(ax2, bx2), iy2 = Math.min(ay2, by2);
-        const iw = Math.max(0, ix2 - ix1), ih = Math.max(0, iy2 - iy1);
-        const inter = iw * ih;
-        const ua = a.w * a.h + b.w * b.h - inter;
-        return ua <= 0 ? 0 : inter / ua;
-    }
-
-    // Convert detections to bbox in video coordinates
-    const w = videoEngage.videoWidth || state.frame.w;
-    const h = videoEngage.videoHeight || state.frame.h;
-
-    const detObjs = dets.map(d => ({
-        bbox: normBBox(d.bbox, w, h),
-        label: d.class,
-        score: d.score,
-        depth_rel: Number.isFinite(d.depth_rel) ? d.depth_rel : null,
-        depth_est_m: d.depth_est_m,
-        depth_valid: d.depth_valid
-    }));
-
-    // mark all tracks as unmatched
-    const tracks = state.tracker.tracks;
-    const used = new Set();
-
-    for (const tr of tracks) {
-        let best = null;
-        let bestI = 0.0;
-        let bestIdx = -1;
-        for (let i = 0; i < detObjs.length; i++) {
-            if (used.has(i)) continue;
-            const IoU = iou(tr.bbox, detObjs[i].bbox);
-            if (IoU > bestI) {
-                bestI = IoU;
-                best = detObjs[i];
-                bestIdx = i;
-            }
-        }
-
-        // Strict matching threshold
-        if (best && bestI >= CONFIG.TRACK_MATCH_THRESHOLD) {
-            used.add(bestIdx);
-
-            // Velocity with Exponential Moving Average (EMA) for smoothing
-            const cx0 = tr.bbox.x + tr.bbox.w * 0.5;
-            const cy0 = tr.bbox.y + tr.bbox.h * 0.5;
-            const cx1 = best.bbox.x + best.bbox.w * 0.5;
-            const cy1 = best.bbox.y + best.bbox.h * 0.5;
-
-            const rawVx = (cx1 - cx0) / Math.max(1e-3, dtSec);
-            const rawVy = (cy1 - cy0) / Math.max(1e-3, dtSec);
-
-            // Alpha of 0.3 means 30% new value, 70% history
-            tr.vx = tr.vx * 0.7 + rawVx * 0.3;
-            tr.vy = tr.vy * 0.7 + rawVy * 0.3;
-
-            // smooth bbox update
-            tr.bbox.x = lerp(tr.bbox.x, best.bbox.x, 0.7);
-            tr.bbox.y = lerp(tr.bbox.y, best.bbox.y, 0.7);
-            tr.bbox.w = lerp(tr.bbox.w, best.bbox.w, 0.6);
-            tr.bbox.h = lerp(tr.bbox.h, best.bbox.h, 0.6);
-
-            // Logic: Only update label if the new detection is highly confident 
-            // AND the current track doesn't have a "premium" label (like 'drone').
-            const protectedLabels = ["drone", "uav", "missile"];
-            const isProtected = protectedLabels.some(l => (tr.label || "").toLowerCase().includes(l));
-
-            if (!isProtected || (best.label && protectedLabels.some(l => best.label.toLowerCase().includes(l)))) {
-                tr.label = best.label || tr.label;
-            }
-
-            tr.score = best.score || tr.score;
-            if (Number.isFinite(best.depth_rel)) {
-                tr.depth_rel = best.depth_rel;
-            }
-            if (best.depth_valid) {
-                // EMA Smoothing
-                const newD = best.depth_est_m;
-                if (tr.depth_est_m == null) tr.depth_est_m = newD;
-                else tr.depth_est_m = tr.depth_est_m * 0.7 + newD * 0.3;
-                tr.depth_valid = true;
-            }
-            tr.lastSeen = now();
-        } else {
-            // Decay velocity
-            tr.vx *= 0.9;
-            tr.vy *= 0.9;
-        }
-    }
-
-    // Limit total tracks
-    if (tracks.length < CONFIG.MAX_TRACKS) {
-        for (let i = 0; i < detObjs.length; i++) {
-            if (used.has(i)) continue;
-            // create new track only if big enough
-            const a = detObjs[i].bbox.w * detObjs[i].bbox.h;
-            if (a < (w * h) * 0.0005) continue;
-
-            const newId = `T${String(state.tracker.nextId++).padStart(2, "0")}`;
-            const ap = defaultAimpoint(detObjs[i].label);
-            tracks.push({
-                id: newId,
-                label: detObjs[i].label,
-                bbox: { ...detObjs[i].bbox },
-                score: detObjs[i].score,
-                aimRel: { relx: ap.relx, rely: ap.rely, label: ap.label },
-                baseAreaFrac: (detObjs[i].bbox.w * detObjs[i].bbox.h) / (w * h),
-                baseRange_m: rangeBase ? +rangeBase.value : 1000,
-                baseDwell_s: 5.5,
-                reqP_kW: 42,
-                depth_rel: detObjs[i].depth_rel,
-                depth_est_m: detObjs[i].depth_est_m,
-                depth_valid: detObjs[i].depth_valid,
-
-                // GPT properties
-                gpt_distance_m: null,
-                gpt_direction: null,
-                gpt_description: null,
-
-                // Track state
-                lastSeen: now(),
-                vx: 0, vy: 0,
-                dwellAccum: 0,
-                killed: false,
-                state: "TRACK",
-                assessT: 0
-            });
-            log(`New track created: ${newId} (${detObjs[i].label})`, "t");
-        }
-    }
-
-    // prune old tracks
-    const tNow = now();
-    state.tracker.tracks = tracks.filter(tr => (tNow - tr.lastSeen) < CONFIG.TRACK_PRUNE_MS || tr.killed);
-};
-
-// Polling for backend tracks
-APP.core.tracker.syncWithBackend = async function (frameIdx) {
-    const { state } = APP.core;
-    const { $ } = APP.core.utils;
-    const jobId = state.hf.asyncJobId || state.hf.completedJobId;
-
-    if (!jobId || !state.hf.baseUrl) return;
-
-    try {
-        const resp = await fetch(`${state.hf.baseUrl}/detect/tracks/${jobId}/${frameIdx}`);
-        if (!resp.ok) return;
-
-        const dets = await resp.json();
-        if (!dets || !Array.isArray(dets)) return;
-
-        // Transform backend format to frontend track format
-        // Backend: { bbox: [x1, y1, x2, y2], label: "car", track_id: "T01", angle_deg: 90, ... }
-        // Frontend: { id: "T01", bbox: {x,y,w,h}, label: "car", angle_deg: 90, ... }
-
-        const videoEngage = $("#videoEngage");
-        const w = videoEngage ? (videoEngage.videoWidth || state.frame.w) : state.frame.w;
-        const h = videoEngage ? (videoEngage.videoHeight || state.frame.h) : state.frame.h;
-
-        const newTracks = dets.map(d => {
-            const x = d.bbox[0], y = d.bbox[1];
-            const wBox = d.bbox[2] - d.bbox[0];
-            const hBox = d.bbox[3] - d.bbox[1];
-
-            // Normalize
-            const nx = x / w;
-            const ny = y / h;
-            const nw = wBox / w;
-            const nh = hBox / h;
-
-            return {
-                id: d.track_id || `T${Math.floor(Math.random() * 1000)}`, // Fallback
-                label: d.label,
-                bbox: { x: nx, y: ny, w: nw, h: nh },
-                score: d.score,
-                angle_deg: d.angle_deg,
-                gpt_distance_m: d.gpt_distance_m,
-                gpt_direction: d.gpt_direction,
-                gpt_description: d.gpt_description,
-                speed_kph: d.speed_kph,
-                depth_est_m: d.depth_est_m,
-                depth_rel: d.depth_rel,
-                depth_valid: d.depth_valid,
-                // Threat intelligence
-                threat_level_score: d.threat_level_score || 0,
-                threat_classification: d.threat_classification || "Unknown",
-                weapon_readiness: d.weapon_readiness || "Unknown",
-                // Mission relevance and assessment status
-                mission_relevant: d.mission_relevant ?? null,
-                relevance_reason: d.relevance_reason || null,
-                assessment_status: d.assessment_status || APP.core.gptMapping.STATUS.UNASSESSED,
-                assessment_frame_index: d.assessment_frame_index ?? null,
-                // GPT raw data for feature table
-                gpt_raw: d.gpt_raw || null,
-                features: APP.core.gptMapping.buildFeatures(d.gpt_raw),
-                // Keep UI state fields
-                lastSeen: Date.now(),
-                state: "TRACK"
-            };
-        });
-
-        // Preserve GPT enrichment data that syncWithBackend would otherwise wipe
-        const gptCache = state.hf.firstFrameDetections;
-        if (gptCache && gptCache.length > 0) {
-            const gptMap = {};
-            for (const gd of gptCache) {
-                const tid = gd.track_id || `T${String(gptCache.indexOf(gd) + 1).padStart(2, "0")}`;
-                if (gd.gpt_raw) gptMap[tid] = gd;
-            }
-            for (const track of newTracks) {
-                const cached = gptMap[track.id];
-                if (!cached || track.gpt_raw) continue;
-                const g = cached.gpt_raw;
-                track.gpt_raw = g;
-                track.assessment_status = cached.assessment_status || APP.core.gptMapping.STATUS.ASSESSED;
-                track.threat_level_score = cached.threat_level_score || g.threat_level_score || 0;
-                track.threat_classification = cached.threat_classification || g.threat_classification || "Unknown";
-                track.weapon_readiness = cached.weapon_readiness || g.weapon_readiness || "Unknown";
-                track.gpt_distance_m = cached.gpt_distance_m || null;
-                track.gpt_direction = cached.gpt_direction || null;
-                track.mission_relevant = cached.mission_relevant ?? track.mission_relevant;
-                track.relevance_reason = cached.relevance_reason || track.relevance_reason;
-                track.features = APP.core.gptMapping.buildFeatures(g);
-            }
-        }
-
-        // Detect new objects before state update
-        const oldIds = new Set(state.tracker.tracks.map(t => t.id));
-        const brandNew = newTracks.filter(t => !oldIds.has(t.id));
-        if (brandNew.length > 0) {
-            state.tracker._newObjectDetected = true;
-            APP.ui.logging.log(`New objects: ${brandNew.map(t => t.id).join(", ")}`, "t");
-        }
-
-        // Update state
-        state.tracker.tracks = newTracks;
-        state.detections = newTracks; // Keep synced
-
-    } catch (e) {
-        console.warn("Track sync failed", e);
-    }
-};
-
-APP.core.tracker.predictTracks = function (dtSec) {
-    const { state } = APP.core;
-    const { $ } = APP.core.utils;
-    const videoEngage = $("#videoEngage");
-    if (!videoEngage) return;
-    const w = videoEngage.videoWidth || state.frame.w;
-    const h = videoEngage.videoHeight || state.frame.h;
-
-    // Simple clamp util locally or imported
-    const clamp = (val, min, max) => Math.min(max, Math.max(min, val));
-
-    state.tracker.tracks.forEach(tr => {
-        if (tr.killed) return;
-        tr.bbox.x = clamp(tr.bbox.x + tr.vx * dtSec * 0.12, 0, w - 1);
-        tr.bbox.y = clamp(tr.bbox.y + tr.vy * dtSec * 0.12, 0, h - 1);
-    });
-};

frontend/js/core/utils.js

@@ -1,55 +0,0 @@
-APP.core.utils = {};
-
-APP.core.utils.$ = (sel, root = document) => root.querySelector(sel);
-APP.core.utils.$$ = (sel, root = document) => Array.from(root.querySelectorAll(sel));
-
-APP.core.utils.clamp = (x, a, b) => Math.min(b, Math.max(a, x));
-APP.core.utils.lerp = (a, b, t) => a + (b - a) * t;
-APP.core.utils.now = () => performance.now();
-
-APP.core.utils.escapeHtml = function (s) {
-    return String(s).replace(/[&<>"']/g, m => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" }[m]));
-};
-
-APP.core.utils.canvasToBlob = function (canvas, quality = 0.88) {
-    return new Promise((resolve, reject) => {
-        if (!canvas.toBlob) { reject(new Error("Canvas.toBlob not supported")); return; }
-        canvas.toBlob(blob => {
-            if (!blob) { reject(new Error("Canvas toBlob failed")); return; }
-            resolve(blob);
-        }, "image/jpeg", quality);
-    });
-};
-
-APP.core.utils.normBBox = function (bbox, w, h) {
-    const [x, y, bw, bh] = bbox;
-    return {
-        x: APP.core.utils.clamp(x, 0, w - 1),
-        y: APP.core.utils.clamp(y, 0, h - 1),
-        w: APP.core.utils.clamp(bw, 1, w),
-        h: APP.core.utils.clamp(bh, 1, h)
-    };
-};
-
-APP.core.utils.loadedScripts = new Map();
-
-APP.core.utils.loadScriptOnce = function (key, src) {
-    return new Promise((resolve, reject) => {
-        if (APP.core.utils.loadedScripts.get(key) === "loaded") { resolve(); return; }
-        if (APP.core.utils.loadedScripts.get(key) === "loading") {
-            const iv = setInterval(() => {
-                if (APP.core.utils.loadedScripts.get(key) === "loaded") { clearInterval(iv); resolve(); }
-                if (APP.core.utils.loadedScripts.get(key) === "failed") { clearInterval(iv); reject(new Error("Script failed earlier")); }
-            }, 50);
-            return;
-        }
-
-        APP.core.utils.loadedScripts.set(key, "loading");
-        const s = document.createElement("script");
-        s.src = src;
-        s.async = true;
-        s.onload = () => { APP.core.utils.loadedScripts.set(key, "loaded"); resolve(); };
-        s.onerror = () => { APP.core.utils.loadedScripts.set(key, "failed"); reject(new Error(`Failed to load ${src}`)); };
-        document.head.appendChild(s);
-    });
-};

frontend/js/core/video.js

@@ -1,621 +0,0 @@
-// Video management: loading, unloading, first frame capture, depth handling
-APP.core.video = {};
-
-APP.core.video.captureFirstFrame = async function () {
-    const { state } = APP.core;
-    const { $ } = APP.core.utils;
-    const videoHidden = $("#videoHidden");
-
-    if (!videoHidden || !state.videoUrl) return;
-
-    videoHidden.src = state.videoUrl;
-    videoHidden.load();
-
-    await new Promise((resolve, reject) => {
-        videoHidden.onloadeddata = resolve;
-        videoHidden.onerror = () => reject(new Error("Video failed to load"));
-        setTimeout(() => reject(new Error("Video load timeout")), 10000);
-    });
-
-    // Seek to first frame
-    videoHidden.currentTime = 0;
-    await new Promise(r => {
-        videoHidden.onseeked = r;
-        setTimeout(r, 500);
-    });
-
-    state.frame.w = videoHidden.videoWidth || 1280;
-    state.frame.h = videoHidden.videoHeight || 720;
-};
-
-APP.core.video.drawFirstFrame = function () {
-    const { state } = APP.core;
-    const { $ } = APP.core.utils;
-    const frameCanvas = $("#frameCanvas");
-    const frameOverlay = $("#frameOverlay");
-    const videoHidden = $("#videoHidden");
-    const frameEmpty = $("#frameEmpty");
-
-    if (!frameCanvas || !videoHidden) return;
-
-    const ctx = frameCanvas.getContext("2d");
-    frameCanvas.width = state.frame.w;
-    frameCanvas.height = state.frame.h;
-    ctx.drawImage(videoHidden, 0, 0, state.frame.w, state.frame.h);
-
-    // Also resize overlay to match so bbox coordinates align
-    if (frameOverlay) {
-        frameOverlay.width = state.frame.w;
-        frameOverlay.height = state.frame.h;
-    }
-
-    if (frameEmpty) frameEmpty.style.display = "none";
-};
-
-APP.core.video.frameToBitmap = async function (videoEl) {
-    const w = videoEl.videoWidth || 1280;
-    const h = videoEl.videoHeight || 720;
-    const canvas = document.createElement("canvas");
-    canvas.width = w;
-    canvas.height = h;
-    const ctx = canvas.getContext("2d");
-    ctx.drawImage(videoEl, 0, 0, w, h);
-    return canvas;
-};
-
-APP.core.video.seekTo = function (videoEl, time) {
-    return new Promise((resolve) => {
-        if (!videoEl) { resolve(); return; }
-        videoEl.currentTime = Math.max(0, time);
-        videoEl.onseeked = () => resolve();
-        setTimeout(resolve, 600);
-    });
-};
-
-APP.core.video.unloadVideo = async function (options = {}) {
-    const { state } = APP.core;
-    const { $, $$ } = APP.core.utils;
-    const { log, setStatus, setHfStatus } = APP.ui.logging;
-    const preserveInput = !!options.preserveInput;
-
-    // Stop polling if running
-    if (state.hf.asyncPollInterval) {
-        clearInterval(state.hf.asyncPollInterval);
-        state.hf.asyncPollInterval = null;
-    }
-
-    // Revoke blob URLs
-    if (state.videoUrl && state.videoUrl.startsWith("blob:")) {
-        URL.revokeObjectURL(state.videoUrl);
-    }
-    if (state.hf.processedUrl && state.hf.processedUrl.startsWith("blob:")) {
-        try { URL.revokeObjectURL(state.hf.processedUrl); } catch (_) { }
-    }
-    if (state.hf.depthVideoUrl && state.hf.depthVideoUrl.startsWith("blob:")) {
-        try { URL.revokeObjectURL(state.hf.depthVideoUrl); } catch (_) { }
-    }
-    if (state.hf.depthFirstFrameUrl && state.hf.depthFirstFrameUrl.startsWith("blob:")) {
-        try { URL.revokeObjectURL(state.hf.depthFirstFrameUrl); } catch (_) { }
-    }
-
-    // Reset state
-    state.videoUrl = null;
-    state.videoFile = null;
-    state.videoLoaded = false;
-    state.useProcessedFeed = false;
-    state.useDepthFeed = false;
-    state.useFrameDepthView = false;
-
-    state.hf.missionId = null;
-    state.hf.plan = null;
-    state.hf.processedUrl = null;
-    state.hf.processedBlob = null;
-    state.hf.depthVideoUrl = null;
-    state.hf.depthBlob = null;
-    state.hf.depthFirstFrameUrl = null;
-    state.hf.depthFirstFrameBlob = null;
-    state.hf.summary = null;
-    state.hf.busy = false;
-    state.hf.lastError = null;
-    state.hf.asyncJobId = null;
-    state.hf.completedJobId = null;
-    state.hf.asyncStatus = "idle";
-    state.hf.firstFrameUrl = null;
-    state.hf.videoUrl = null;
-
-    setHfStatus("idle");
-    state.hasReasoned = false;
-    state.firstFrameReady = false;
-    state.isReasoning = false;
-
-    // Reset button states
-    const btnReason = $("#btnReason");
-    const btnCancelReason = $("#btnCancelReason");
-    const btnEngage = $("#btnEngage");
-
-    if (btnReason) {
-        btnReason.disabled = false;
-        btnReason.style.opacity = "1";
-        btnReason.style.cursor = "pointer";
-    }
-    if (btnCancelReason) btnCancelReason.style.display = "none";
-    if (btnEngage) btnEngage.disabled = true;
-
-    state.detections = [];
-    state.selectedId = null;
-
-    state.tracker.tracks = [];
-    state.tracker.nextId = 1;
-    state.tracker.running = false;
-    state.tracker.selectedTrackId = null;
-    state.tracker.beamOn = false;
-
-    // Clear video elements
-    const videoHidden = $("#videoHidden");
-    const videoEngage = $("#videoEngage");
-    const videoFile = $("#videoFile");
-
-    if (videoHidden) {
-        videoHidden.removeAttribute("src");
-        videoHidden.load();
-    }
-    if (videoEngage) {
-        videoEngage.removeAttribute("src");
-        videoEngage.load();
-    }
-    if (!preserveInput && videoFile) {
-        videoFile.value = "";
-    }
-
-    // Update UI
-    const videoMeta = $("#videoMeta");
-    const frameEmpty = $("#frameEmpty");
-    const engageEmpty = $("#engageEmpty");
-    const frameNote = $("#frameNote");
-    const engageNote = $("#engageNote");
-
-    if (!preserveInput && videoMeta) videoMeta.textContent = "No file";
-    if (frameEmpty) frameEmpty.style.display = "flex";
-    if (engageEmpty) engageEmpty.style.display = "flex";
-    if (frameNote) frameNote.textContent = "Awaiting video";
-    if (engageNote) engageNote.textContent = "Awaiting video";
-
-    // Clear canvases
-    APP.core.video.clearCanvas($("#frameCanvas"));
-    APP.core.video.clearCanvas($("#frameOverlay"));
-    APP.core.video.clearCanvas($("#engageOverlay"));
-
-    // Re-render UI components
-    if (APP.ui.cards.renderFrameTrackList) APP.ui.cards.renderFrameTrackList();
-
-    setStatus("warn", "STANDBY · No video loaded");
-    log("Video unloaded. Demo reset.", "w");
-};
-
-APP.core.video.clearCanvas = function (canvas) {
-    if (!canvas) return;
-    const ctx = canvas.getContext("2d");
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
-};
-
-APP.core.video.resizeOverlays = function () {
-    const { state } = APP.core;
-    const { $ } = APP.core.utils;
-
-    const videoEngage = $("#videoEngage");
-    const engageOverlay = $("#engageOverlay");
-    const frameOverlay = $("#frameOverlay");
-
-    if (videoEngage && engageOverlay) {
-        const w = videoEngage.videoWidth || state.frame.w;
-        const h = videoEngage.videoHeight || state.frame.h;
-        engageOverlay.width = w;
-        engageOverlay.height = h;
-        engageOverlay.style.pointerEvents = "auto";
-    }
-
-    if (frameOverlay) {
-        frameOverlay.width = state.frame.w;
-        frameOverlay.height = state.frame.h;
-    }
-};
-
-// Depth video handling
-APP.core.video.fetchDepthVideo = async function () {
-    const { state } = APP.core;
-    const { log } = APP.ui.logging;
-
-    // Depth is optional - skip silently if no URL
-    if (!state.hf.depthVideoUrl) {
-        return;
-    }
-
-    try {
-        const resp = await fetch(state.hf.depthVideoUrl, { cache: "no-store" });
-
-        if (!resp.ok) {
-            // 404 = depth not enabled/available - this is fine, not an error
-            if (resp.status === 404) {
-                state.hf.depthVideoUrl = null;
-                return;
-            }
-            // 202 = still processing
-            if (resp.status === 202) {
-                return;
-            }
-            throw new Error(`Failed to fetch depth video: ${resp.statusText}`);
-        }
-
-        const nullOrigin = (window.location && window.location.origin) === "null" || (window.location && window.location.protocol === "file:");
-        if (nullOrigin) {
-            state.hf.depthBlob = null;
-            state.hf.depthVideoUrl = `${state.hf.depthVideoUrl}?t=${Date.now()}`;
-            log("Depth video ready (streaming URL)");
-            return;
-        }
-
-        const blob = await resp.blob();
-        state.hf.depthBlob = blob;
-        const blobUrl = URL.createObjectURL(blob);
-        state.hf.depthVideoUrl = blobUrl;
-
-        log(`Depth video ready (${(blob.size / 1024 / 1024).toFixed(1)} MB)`, "g");
-        APP.core.video.updateDepthChip();
-    } catch (err) {
-        // Don't log as error - depth is optional
-        state.hf.depthVideoUrl = null;
-        state.hf.depthBlob = null;
-    }
-};
-
-APP.core.video.fetchDepthFirstFrame = async function () {
-    const { state } = APP.core;
-    const { log } = APP.ui.logging;
-
-    // Depth is optional - skip silently if no URL
-    if (!state.hf.depthFirstFrameUrl) return;
-
-    try {
-        const resp = await fetch(state.hf.depthFirstFrameUrl, { cache: "no-store" });
-
-        // 404 or other errors - depth not available, that's fine
-        if (!resp.ok) {
-            state.hf.depthFirstFrameUrl = null;
-            return;
-        }
-
-        const blob = await resp.blob();
-        state.hf.depthFirstFrameBlob = blob;
-        state.hf.depthFirstFrameUrl = URL.createObjectURL(blob);
-        log("First frame depth ready", "g");
-    } catch (err) {
-        // Silently clear - depth is optional
-        state.hf.depthFirstFrameUrl = null;
-        state.hf.depthFirstFrameBlob = null;
-    }
-};
-
-APP.core.video.fetchProcessedVideo = async function () {
-    const { state } = APP.core;
-    const { log } = APP.ui.logging;
-    const { $ } = APP.core.utils;
-
-    const resp = await fetch(state.hf.videoUrl, { cache: "no-store" });
-
-    if (!resp.ok) {
-        if (resp.status === 202) {
-            const err = new Error("Video still processing");
-            err.code = "VIDEO_PENDING";
-            throw err;
-        }
-        throw new Error(`Failed to fetch video: ${resp.statusText}`);
-    }
-
-    const nullOrigin = (window.location && window.location.origin) === "null" || (window.location && window.location.protocol === "file:");
-    if (nullOrigin) {
-        state.hf.processedBlob = null;
-        state.hf.processedUrl = `${state.hf.videoUrl}?t=${Date.now()}`;
-        const btnEngage = $("#btnEngage");
-        if (btnEngage) btnEngage.disabled = false;
-        log("Processed video ready (streaming URL)");
-        return;
-    }
-
-    const blob = await resp.blob();
-
-    if (state.hf.processedUrl && state.hf.processedUrl.startsWith("blob:")) {
-        URL.revokeObjectURL(state.hf.processedUrl);
-    }
-
-    state.hf.processedBlob = blob;
-    state.hf.processedUrl = URL.createObjectURL(blob);
-
-    const btnEngage = $("#btnEngage");
-    if (btnEngage) btnEngage.disabled = false;
-    log(`Processed video ready (${(blob.size / 1024 / 1024).toFixed(1)} MB)`);
-};
-
-APP.core.video.updateDepthChip = function () {
-    const { state } = APP.core;
-    const { $ } = APP.core.utils;
-
-    const chipDepth = $("#chipDepth");
-    if (!chipDepth) return;
-
-    if (state.hf.depthVideoUrl || state.hf.depthBlob) {
-        chipDepth.style.cursor = "pointer";
-        chipDepth.style.opacity = "1";
-    } else {
-        chipDepth.style.cursor = "not-allowed";
-        chipDepth.style.opacity = "0.5";
-    }
-};
-
-APP.core.video.toggleDepthView = function () {
-    const { state } = APP.core;
-    const { $, log } = APP.core.utils;
-    const { log: uiLog } = APP.ui.logging;
-
-    if (!state.hf.depthVideoUrl && !state.hf.depthBlob) {
-        uiLog("Depth video not available yet. Run Reason and wait for processing.", "w");
-        return;
-    }
-
-    state.useDepthFeed = !state.useDepthFeed;
-
-    const videoEngage = $("#videoEngage");
-    const chipDepth = $("#chipDepth");
-
-    if (state.useDepthFeed) {
-        if (chipDepth) chipDepth.textContent = "VIEW:DEPTH";
-        if (videoEngage) {
-            const currentTime = videoEngage.currentTime;
-            const wasPlaying = !videoEngage.paused;
-            videoEngage.src = state.hf.depthVideoUrl;
-            videoEngage.load();
-            videoEngage.currentTime = currentTime;
-            if (wasPlaying) videoEngage.play();
-        }
-    } else {
-        if (chipDepth) chipDepth.textContent = "VIEW:DEFAULT";
-        if (videoEngage) {
-            const currentTime = videoEngage.currentTime;
-            const wasPlaying = !videoEngage.paused;
-            const feedUrl = state.useProcessedFeed ? state.hf.processedUrl : state.videoUrl;
-            videoEngage.src = feedUrl;
-            videoEngage.load();
-            videoEngage.currentTime = currentTime;
-            if (wasPlaying) videoEngage.play();
-        }
-    }
-};
-
-APP.core.video.toggleFirstFrameDepthView = function () {
-    const { state } = APP.core;
-    const { $ } = APP.core.utils;
-    const { log } = APP.ui.logging;
-
-    if (!state.hf.depthFirstFrameUrl) {
-        log("First frame depth not available", "w");
-        return;
-    }
-
-    state.useFrameDepthView = !state.useFrameDepthView;
-
-    const frameCanvas = $("#frameCanvas");
-    const chipFrameDepth = $("#chipFrameDepth");
-
-    if (state.useFrameDepthView) {
-        if (chipFrameDepth) chipFrameDepth.textContent = "VIEW:DEPTH";
-        // Draw depth first frame
-        const img = new Image();
-        img.onload = () => {
-            if (frameCanvas) {
-                frameCanvas.width = state.frame.w;
-                frameCanvas.height = state.frame.h;
-                frameCanvas.getContext("2d").drawImage(img, 0, 0, state.frame.w, state.frame.h);
-                APP.ui.overlays.renderFrameOverlay();
-            }
-        };
-        img.src = state.hf.depthFirstFrameUrl;
-    } else {
-        if (chipFrameDepth) chipFrameDepth.textContent = "VIEW:DEFAULT";
-        // Re-draw original first frame
-        APP.core.video.drawFirstFrame();
-        APP.ui.overlays.renderFrameOverlay();
-    }
-};
-
-APP.core.video.toggleProcessedFeed = function () {
-    const { state } = APP.core;
-    const { $ } = APP.core.utils;
-    const { log } = APP.ui.logging;
-
-    if (!state.hf.processedUrl) {
-        log("Processed video not available yet", "w");
-        return;
-    }
-
-    state.useProcessedFeed = !state.useProcessedFeed;
-    state.useDepthFeed = false; // Reset depth view when switching feeds
-
-    const videoEngage = $("#videoEngage");
-    const chipFeed = $("#chipFeed");
-    const chipDepth = $("#chipDepth");
-
-    if (state.useProcessedFeed) {
-        if (chipFeed) chipFeed.textContent = "FEED:HF";
-        if (videoEngage) {
-            const currentTime = videoEngage.currentTime;
-            const wasPlaying = !videoEngage.paused;
-            videoEngage.src = state.hf.processedUrl;
-            videoEngage.load();
-            videoEngage.currentTime = currentTime;
-            if (wasPlaying) videoEngage.play();
-        }
-    } else {
-        if (chipFeed) chipFeed.textContent = "FEED:RAW";
-        if (videoEngage) {
-            const currentTime = videoEngage.currentTime;
-            const wasPlaying = !videoEngage.paused;
-            videoEngage.src = state.videoUrl;
-            videoEngage.load();
-            videoEngage.currentTime = currentTime;
-            if (wasPlaying) videoEngage.play();
-        }
-    }
-
-    if (chipDepth) chipDepth.textContent = "VIEW:DEFAULT";
-};
-
-// ========= Streaming Mode for Tab 2 (Live Backend Processing) =========
-
-APP.core.video.setStreamingMode = function (url) {
-    const { $ } = APP.core.utils;
-    const videoEngage = $("#videoEngage");
-    const engageEmpty = $("#engageEmpty");
-
-    // Ensure stream image element exists
-    let streamView = $("#streamView");
-    if (!streamView) {
-        streamView = document.createElement("img");
-        streamView.id = "streamView";
-        streamView.style.width = "100%";
-        streamView.style.height = "100%";
-        streamView.style.objectFit = "contain";
-        streamView.style.position = "absolute";
-        streamView.style.top = "0";
-        streamView.style.left = "0";
-        streamView.style.zIndex = "10"; // Above video
-        streamView.style.backgroundColor = "#000";
-
-        // Insert into the wrapper (parent of videoEngage)
-        if (videoEngage && videoEngage.parentNode) {
-            videoEngage.parentNode.appendChild(streamView);
-            // Ensure container is relative for absolute positioning
-            if (getComputedStyle(videoEngage.parentNode).position === "static") {
-                videoEngage.parentNode.style.position = "relative";
-            }
-        }
-    }
-
-    if (streamView) {
-        // Reset state
-        streamView.style.display = "block";
-        streamView.onerror = () => {
-            // If stream fails (404 etc), silently revert
-            streamView.style.display = "none";
-            if (videoEngage) videoEngage.style.display = "block";
-            if (engageEmpty && !videoEngage.src) engageEmpty.style.display = "flex";
-        };
-        streamView.src = url;
-
-        if (videoEngage) videoEngage.style.display = "none";
-
-        // Also hide empty state
-        if (engageEmpty) engageEmpty.style.display = "none";
-    }
-};
-
-APP.core.video.stopStreamingMode = function () {
-    const { $ } = APP.core.utils;
-    const videoEngage = $("#videoEngage");
-
-    const streamView = $("#streamView");
-    if (streamView) {
-        streamView.src = ""; // Stop connection
-        streamView.style.display = "none";
-    }
-    if (videoEngage) videoEngage.style.display = "block";
-};
-
-// ========= Display Processed First Frame (from backend) =========
-
-APP.core.video.displayProcessedFirstFrame = function () {
-    const { state } = APP.core;
-    const { $ } = APP.core.utils;
-    const { log } = APP.ui.logging;
-
-    const frameCanvas = $("#frameCanvas");
-    const frameOverlay = $("#frameOverlay");
-    const frameEmpty = $("#frameEmpty");
-    const frameNote = $("#frameNote");
-
-    if (!state.hf.firstFrameUrl) {
-        log("Processed first frame URL not available", "w");
-        return;
-    }
-
-    const img = new Image();
-    img.crossOrigin = "anonymous";
-    img.onload = () => {
-        if (frameCanvas) {
-            // Update frame dimensions from image
-            state.frame.w = img.naturalWidth || 1280;
-            state.frame.h = img.naturalHeight || 720;
-
-            // Resize both canvas and overlay to match frame dimensions
-            frameCanvas.width = state.frame.w;
-            frameCanvas.height = state.frame.h;
-            frameCanvas.getContext("2d").drawImage(img, 0, 0, state.frame.w, state.frame.h);
-
-            // CRITICAL: Resize frameOverlay to match so bbox coordinates align
-            if (frameOverlay) {
-                frameOverlay.width = state.frame.w;
-                frameOverlay.height = state.frame.h;
-            }
-
-            // Hide empty state
-            if (frameEmpty) frameEmpty.style.display = "none";
-            if (frameNote) frameNote.textContent = "Processed (from backend)";
-
-            // Re-render overlay on top (now with matching dimensions)
-            if (APP.ui.overlays.renderFrameOverlay) {
-                APP.ui.overlays.renderFrameOverlay();
-            }
-
-            log("Processed first frame displayed", "g");
-        }
-    };
-    img.onerror = () => {
-        log("Failed to load processed first frame", "e");
-        // Fallback to local first frame
-        APP.core.video.drawFirstFrame();
-    };
-    img.src = state.hf.firstFrameUrl;
-};
-
-// ========= Display First Frame with Depth Overlay (if available) =========
-
-APP.core.video.displayFirstFrameWithDepth = function () {
-    const { state } = APP.core;
-    const { $ } = APP.core.utils;
-
-    // Check if we're in depth view mode and depth is available
-    if (state.useFrameDepthView && state.hf.depthFirstFrameUrl) {
-        const frameCanvas = $("#frameCanvas");
-        const img = new Image();
-        img.crossOrigin = "anonymous";
-        img.onload = () => {
-            if (frameCanvas) {
-                frameCanvas.width = state.frame.w;
-                frameCanvas.height = state.frame.h;
-                frameCanvas.getContext("2d").drawImage(img, 0, 0, state.frame.w, state.frame.h);
-                if (APP.ui.overlays.renderFrameOverlay) {
-                    APP.ui.overlays.renderFrameOverlay();
-                }
-            }
-        };
-        img.onerror = () => {
-            // Fallback to processed or raw first frame
-            APP.core.video.displayProcessedFirstFrame();
-        };
-        img.src = state.hf.depthFirstFrameUrl;
-    } else if (state.hf.firstFrameUrl) {
-        // Show processed first frame
-        APP.core.video.displayProcessedFirstFrame();
-    } else {
-        // Fallback to local video first frame
-        APP.core.video.drawFirstFrame();
-    }
-};

frontend/js/init.js

@@ -1,6 +0,0 @@
-// Initialize Global Namespace
-window.APP = {
-    core: {},
-    ui: {},
-    api: {}
-};

frontend/js/main.js

@@ -1,785 +0,0 @@
-// Main Entry Point - Wire up all event handlers and run the application
-document.addEventListener("DOMContentLoaded", () => {
-    // Shortcuts
-    const { state } = APP.core;
-    const { $, $$ } = APP.core.utils;
-    const { log, setStatus, setHfStatus } = APP.ui.logging;
-    const { hfDetectAsync, checkJobStatus, cancelBackendJob, pollAsyncJob } = APP.api.client;
-
-    // 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 { renderFrameOverlay, renderEngageOverlay, initClickHandler } = APP.ui.overlays;
-    const { renderFrameTrackList } = APP.ui.cards;
-    const { tickAgentCursor, moveCursorToRect } = APP.ui.cursor;
-    const { matchAndUpdateTracks, predictTracks } = APP.core.tracker;
-    const { defaultAimpoint } = APP.core.physics;
-
-    // DOM Elements
-    const videoEngage = $("#videoEngage");
-    const videoHidden = $("#videoHidden");
-    const videoFile = $("#videoFile");
-    const btnReason = $("#btnReason");
-    const btnCancelReason = $("#btnCancelReason");
-    const btnRecompute = $("#btnRecompute");
-    const btnClear = $("#btnClear");
-    const btnEject = $("#btnEject");
-    const btnEngage = $("#btnEngage");
-    const btnReset = $("#btnReset");
-    const btnPause = $("#btnPause");
-    const btnToggleSidebar = $("#btnToggleSidebar");
-
-    const detectorSelect = $("#detectorSelect");
-    const missionText = $("#missionText");
-    const cursorMode = $("#cursorMode");
-    const frameCanvas = $("#frameCanvas");
-    const frameTrackList = $("#frameTrackList");
-    const frameEmpty = $("#frameEmpty");
-    const frameNote = $("#frameNote");
-    const engageEmpty = $("#engageEmpty");
-    const engageNote = $("#engageNote");
-
-    const chipFeed = $("#chipFeed");
-    const chipDepth = $("#chipDepth");
-    const chipFrameDepth = $("#chipFrameDepth");
-
-    // Initialization
-    function init() {
-        log("System initializing...", "t");
-
-        setupFileUpload();
-        setupControls();
-        setupKnobListeners();
-        setupChipToggles();
-        setupTabSwitching();
-
-        // Initial UI sync
-        syncKnobDisplays();
-        setHfStatus("idle");
-
-        // Enable click-to-select on engage overlay
-        initClickHandler();
-
-        // 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");
-    }
-
-    function setupFileUpload() {
-        if (!videoFile) return;
-
-        videoFile.addEventListener("change", async (e) => {
-            const file = e.target.files[0];
-            if (!file) return;
-
-            state.videoFile = file;
-            state.videoUrl = URL.createObjectURL(file);
-            state.videoLoaded = true;
-
-            // Show meta
-            const videoMeta = $("#videoMeta");
-            if (videoMeta) videoMeta.textContent = file.name;
-
-            // Load video into engage player
-            if (videoEngage) {
-                videoEngage.src = state.videoUrl;
-                videoEngage.load();
-            }
-
-            // Hide empty states  
-            if (engageEmpty) engageEmpty.style.display = "none";
-
-            // Capture first frame dimensions (but don't draw - wait for processed frame from backend)
-            try {
-                await captureFirstFrame();
-                // Show placeholder message - actual frame will come from backend
-                if (frameNote) frameNote.textContent = "Video loaded (run Detect for processed frame)";
-                if (engageNote) engageNote.textContent = "Ready for Track";
-            } catch (err) {
-                log(`First frame capture failed: ${err.message}`, "e");
-            }
-
-            setStatus("warn", "READY · Video loaded (run Detect)");
-            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");
-            }
-        });
-    }
-
-    function setupControls() {
-        // Reason button
-        if (btnReason) {
-            btnReason.addEventListener("click", runReason);
-        }
-
-        // Cancel Reason button
-        if (btnCancelReason) {
-            btnCancelReason.addEventListener("click", cancelReasoning);
-        }
-
-        // Recompute HEL button
-        if (btnRecompute) {
-            btnRecompute.addEventListener("click", async () => {
-                if (!state.hasReasoned) return;
-                await recomputeHEL();
-                renderFrameOverlay();
-
-                log("Parameters recomputed.", "g");
-            });
-        }
-
-        // Clear button
-        if (btnClear) {
-            btnClear.addEventListener("click", () => {
-                state.detections = [];
-                state.selectedId = null;
-                renderFrameTrackList();
-                renderFrameOverlay();
-
-                log("Detections cleared.", "t");
-            });
-        }
-
-        // Eject button
-        if (btnEject) {
-            btnEject.addEventListener("click", async () => {
-                await unloadVideo();
-            });
-        }
-
-        // Engage button
-        if (btnEngage) {
-            btnEngage.addEventListener("click", runEngage);
-        }
-
-        // Pause button
-        if (btnPause) {
-            btnPause.addEventListener("click", () => {
-                if (videoEngage) videoEngage.pause();
-                state.tracker.running = false;
-                log("Tracking paused.", "t");
-            });
-        }
-
-        // Reset button
-        if (btnReset) {
-            btnReset.addEventListener("click", () => {
-                if (videoEngage) {
-                    videoEngage.pause();
-                    videoEngage.currentTime = 0;
-                }
-                state.tracker.tracks = [];
-                state.tracker.running = false;
-                state.tracker.nextId = 1;
-                renderFrameTrackList();
-                log("Tracking reset.", "t");
-            });
-        }
-
-        // Sidebar toggle (Tab 2)
-        if (btnToggleSidebar) {
-            btnToggleSidebar.addEventListener("click", () => {
-                const engageGrid = $(".engage-grid");
-                if (engageGrid) {
-                    engageGrid.classList.toggle("sidebar-collapsed");
-                    btnToggleSidebar.textContent = engageGrid.classList.contains("sidebar-collapsed")
-                        ? "▶ Show Sidebar"
-                        : "◀ Hide Sidebar";
-                }
-            });
-        }
-    }
-
-
-
-    // Track selection event — re-renders cards (with inline features for active card)
-    document.addEventListener("track-selected", (e) => {
-        state.selectedId = e.detail.id;
-        state.tracker.selectedTrackId = e.detail.id;
-        renderFrameTrackList();
-        renderFrameOverlay();
-        renderEngageOverlay();
-
-        // Scroll selected card into view (Tab 2 sidebar)
-        const card = document.getElementById(`card-${e.detail.id}`);
-        if (card) card.scrollIntoView({ behavior: "smooth", block: "nearest" });
-    });
-
-    // Cursor mode toggle
-    if (cursorMode) {
-        cursorMode.addEventListener("change", () => {
-            state.ui.cursorMode = cursorMode.value;
-            if (state.ui.cursorMode === "off" && APP.ui.cursor.setCursorVisible) {
-                APP.ui.cursor.setCursorVisible(false);
-            }
-        });
-    }
-
-    function setupKnobListeners() {
-        // Listen to all inputs and selects for knob updates
-        const inputs = Array.from(document.querySelectorAll("input, select"));
-        inputs.forEach(el => {
-            el.addEventListener("input", () => {
-                syncKnobDisplays();
-                if (state.hasReasoned) {
-                    recomputeHEL();
-                    renderFrameOverlay();
-
-                }
-            });
-        });
-
-        // Initial sync
-        syncKnobDisplays();
-    }
-
-    function setupChipToggles() {
-        // Toggle processed/raw feed
-        if (chipFeed) {
-            chipFeed.style.cursor = "pointer";
-            chipFeed.addEventListener("click", () => {
-                if (!state.videoLoaded) return;
-                toggleProcessedFeed();
-                log(`Feed set to: ${state.useProcessedFeed ? "HF" : "RAW"}`, "t");
-            });
-        }
-
-        // Toggle depth view (Tab 2)
-        if (chipDepth) {
-            chipDepth.style.cursor = "pointer";
-            chipDepth.addEventListener("click", () => {
-                if (!state.videoLoaded) return;
-                toggleDepthView();
-                log(`Engage view set to: ${state.useDepthFeed ? "DEPTH" : "DEFAULT"}`, "t");
-            });
-        }
-
-        // Toggle first frame depth view (Tab 1)
-        if (chipFrameDepth) {
-            chipFrameDepth.style.cursor = "pointer";
-            chipFrameDepth.addEventListener("click", () => {
-                if (!state.videoLoaded) return;
-                if (!state.hf.depthFirstFrameUrl) {
-                    log("First frame depth not ready yet. Run Detect and wait for depth processing.", "w");
-                    return;
-                }
-                toggleFirstFrameDepthView();
-                log(`First frame view set to: ${state.useFrameDepthView ? "DEPTH" : "DEFAULT"}`, "t");
-            });
-        }
-    }
-
-    function setupTabSwitching() {
-        const tabs = Array.from(document.querySelectorAll(".tabbtn"));
-        tabs.forEach(btn => {
-            btn.addEventListener("click", () => {
-                tabs.forEach(b => b.classList.remove("active"));
-                document.querySelectorAll(".tab").forEach(t => t.classList.remove("active"));
-                btn.classList.add("active");
-                const tabId = `#tab-${btn.dataset.tab}`;
-                const tab = $(tabId);
-                if (tab) tab.classList.add("active");
-
-                // Tab-specific actions
-                if (btn.dataset.tab === "engage") {
-                    resizeOverlays();
-                }
-            });
-        });
-    }
-
-    async function runReason() {
-        if (!state.videoLoaded) {
-            log("No video loaded. Upload a video first.", "w");
-            setStatus("warn", "READY · Upload a video");
-            return;
-        }
-
-        if (state.isReasoning) {
-            log("Detection already in progress. Please wait.", "w");
-            return;
-        }
-
-        // Lock the Reason process
-        state.isReasoning = true;
-        if (btnReason) {
-            btnReason.disabled = true;
-            btnReason.style.opacity = "0.5";
-            btnReason.style.cursor = "not-allowed";
-        }
-        if (btnCancelReason) btnCancelReason.style.display = "inline-block";
-        if (btnEngage) btnEngage.disabled = true;
-
-        // Clear previous detections
-        state.detections = [];
-        state.selectedId = null;
-        renderFrameTrackList();
-        renderFrameOverlay();
-
-        setStatus("warn", "DETECTING · Running perception pipeline");
-
-        // Agent cursor flair
-        if (state.ui.cursorMode === "on" && moveCursorToRect) {
-            if (btnReason) moveCursorToRect(btnReason.getBoundingClientRect());
-            if (frameCanvas) setTimeout(() => moveCursorToRect(frameCanvas.getBoundingClientRect()), 260);
-            if (frameTrackList) setTimeout(() => moveCursorToRect(frameTrackList.getBoundingClientRect()), 560);
-        }
-
-        try {
-            const selectedOption = detectorSelect ? detectorSelect.options[detectorSelect.selectedIndex] : null;
-            const selectedValue = detectorSelect ? detectorSelect.value : "yolo11";
-            const kind = selectedOption ? selectedOption.getAttribute("data-kind") : "object";
-            const queries = missionText ? missionText.value.trim() : "";
-            const enableGPT = $("#enableGPTToggle")?.checked || false;
-            const enableDepth = false; // depth mode disabled
-
-            // Determine mode and model parameter from data-kind attribute
-            let mode, detectorParam, segmenterParam;
-            if (kind === "segmentation") {
-                mode = "segmentation";
-                segmenterParam = selectedValue;
-                detectorParam = "yolo11"; // default, unused for segmentation
-            } else if (kind === "drone") {
-                mode = "drone_detection";
-                detectorParam = selectedValue;
-                segmenterParam = "GSAM2-L";
-            } else {
-                mode = "object_detection";
-                detectorParam = selectedValue;
-                segmenterParam = "GSAM2-L";
-            }
-
-            const form = new FormData();
-            form.append("video", state.videoFile);
-            form.append("mode", mode);
-            if (queries) form.append("queries", queries);
-            form.append("detector", detectorParam);
-            form.append("segmenter", segmenterParam);
-            form.append("enable_gpt", enableGPT ? "true" : "false");
-            form.append("enable_depth", enableDepth ? "true" : "false");
-
-            log(`Submitting job to ${state.hf.baseUrl}...`, "t");
-            setHfStatus("submitting job...");
-
-            const data = await hfDetectAsync(form);
-
-            state.hf.asyncJobId = data.job_id;
-
-            // Store mission specification for chatbot context
-            if (data.mission_spec) {
-                state.hf.missionSpec = data.mission_spec;
-            }
-
-            // Store raw detections (will process after image loads to get correct dimensions)
-            const rawDetections = data.first_frame_detections || [];
-
-            // Display processed first frame from backend (only processed frame, not raw)
-            // This is async - image loading will update state.frame.w/h
-            if (data.first_frame_url) {
-                state.hf.firstFrameUrl = data.first_frame_url.startsWith("http")
-                    ? data.first_frame_url
-                    : `${state.hf.baseUrl}${data.first_frame_url}`;
-
-                // Wait for image to load so we have correct dimensions before processing detections
-                await new Promise((resolve, reject) => {
-                    const img = new Image();
-                    img.crossOrigin = "anonymous";
-                    img.onload = () => {
-                        // Update frame dimensions from loaded image
-                        state.frame.w = img.naturalWidth || 1280;
-                        state.frame.h = img.naturalHeight || 720;
-
-                        // Resize canvases to match
-                        const frameCanvas = $("#frameCanvas");
-                        const frameOverlay = $("#frameOverlay");
-                        if (frameCanvas) {
-                            frameCanvas.width = state.frame.w;
-                            frameCanvas.height = state.frame.h;
-                            frameCanvas.getContext("2d").drawImage(img, 0, 0, state.frame.w, state.frame.h);
-                        }
-                        if (frameOverlay) {
-                            frameOverlay.width = state.frame.w;
-                            frameOverlay.height = state.frame.h;
-                        }
-
-                        // Hide empty state
-                        const frameEmpty = $("#frameEmpty");
-                        const frameNote = $("#frameNote");
-                        if (frameEmpty) frameEmpty.style.display = "none";
-                        if (frameNote) frameNote.textContent = "Processed (from backend)";
-
-                        log(`Processed first frame displayed (${state.frame.w}×${state.frame.h})`, "g");
-                        resolve();
-                    };
-                    img.onerror = () => {
-                        log("Failed to load processed first frame, using local frame", "w");
-                        drawFirstFrame();
-                        resolve();
-                    };
-                    img.src = state.hf.firstFrameUrl;
-                });
-            }
-
-            // NOW process detections (after frame dimensions are correct)
-            if (rawDetections.length > 0) {
-                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")
-                    ? data.depth_video_url
-                    : `${state.hf.baseUrl}${data.depth_video_url}`;
-                log("Depth video URL received", "t");
-            }
-            if (data.first_frame_depth_url) {
-                state.hf.depthFirstFrameUrl = data.first_frame_depth_url.startsWith("http")
-                    ? data.first_frame_depth_url
-                    : `${state.hf.baseUrl}${data.first_frame_depth_url}`;
-                log("First frame depth URL received", "t");
-            }
-
-            // Enable streaming mode if stream_url is provided (Tab 2 live view)
-            const enableStream = $("#enableStreamToggle")?.checked;
-
-            if (data.stream_url && enableStream) {
-                const streamUrl = data.stream_url.startsWith("http")
-                    ? data.stream_url
-                    : `${state.hf.baseUrl}${data.stream_url}`;
-                log("Activating live stream...", "t");
-                setStreamingMode(streamUrl);
-                log("Live view available in 'Track' tab.", "g");
-                setStatus("warn", "Live processing... View in Track tab");
-
-                // Trigger resize/render for Tab 2
-                resizeOverlays();
-            }
-
-            // Start polling for completion
-            pollAsyncJob().then(() => {
-                log("Video processing complete.", "g");
-                // Stop streaming mode once video is ready
-                stopStreamingMode();
-
-                state.hasReasoned = true;
-                setStatus("good", "READY · Detection complete (you can Track)");
-                log("Detection complete. Ready to Track.", "g");
-
-                // Seed tracks for Tab 2
-                seedTracksFromTab1();
-
-                // Re-enable engage button
-                if (btnEngage) btnEngage.disabled = false;
-            }).catch(err => {
-                log(`Polling error: ${err.message}`, "e");
-                stopStreamingMode();
-            });
-
-            // Initial status (processing in background)
-            setStatus("warn", "PROCESSING · Analysing video...");
-            log("Reasoning started (processing in background)...", "t");
-
-
-
-        } catch (err) {
-            setStatus("bad", "ERROR · Detection failed");
-            log(`Detection failed: ${err.message}`, "e");
-            console.error(err);
-        } finally {
-            state.isReasoning = false;
-            if (btnReason) {
-                btnReason.disabled = false;
-                btnReason.style.opacity = "1";
-                btnReason.style.cursor = "pointer";
-            }
-            if (btnCancelReason) btnCancelReason.style.display = "none";
-            // Re-enable engage button in case of failure
-            if (btnEngage) btnEngage.disabled = false;
-        }
-    }
-
-    function processFirstFrameDetections(dets) {
-        state.detections = dets.map((d, i) => {
-            const id = d.track_id || `T${String(i + 1).padStart(2, "0")}`;
-            const ap = defaultAimpoint(d.label || d.class);
-            const bbox = d.bbox
-                ? { x: d.bbox[0], y: d.bbox[1], w: d.bbox[2] - d.bbox[0], h: d.bbox[3] - d.bbox[1] }
-                : { x: 0, y: 0, w: 10, h: 10 };
-
-            // Build features from universal schema via canonical mapping
-            let features = APP.core.gptMapping.buildFeatures(d.gpt_raw);
-
-            return {
-                id,
-                label: d.label || d.class,
-                score: d.score || 0.5,
-                bbox,
-                aim: { ...ap },
-                features,
-                baseRange_m: null,
-                baseAreaFrac: (bbox.w * bbox.h) / (state.frame.w * state.frame.h),
-                baseDwell_s: 5.0,
-                reqP_kW: 40,
-                maxP_kW: 0,
-                pkill: 0,
-                // Depth fields
-                depth_est_m: (d.depth_est_m !== undefined && d.depth_est_m !== null) ? d.depth_est_m : null,
-                depth_rel: (d.depth_rel !== undefined && d.depth_rel !== null) ? d.depth_rel : null,
-                depth_valid: d.depth_valid ?? false,
-                gpt_distance_m: d.gpt_distance_m || null,
-                gpt_direction: d.gpt_direction || null,
-                gpt_description: d.gpt_description || null,
-                // Threat Intelligence
-                threat_level_score: d.threat_level_score || 0,
-                threat_classification: d.threat_classification || "Unknown",
-                weapon_readiness: d.weapon_readiness || "Unknown",
-                // Mission relevance and assessment status
-                mission_relevant: d.mission_relevant ?? null,
-                relevance_reason: d.relevance_reason || null,
-                assessment_status: d.assessment_status || APP.core.gptMapping.STATUS.UNASSESSED,
-                assessment_frame_index: d.assessment_frame_index ?? null,
-            };
-        });
-
-        state.selectedId = state.detections[0]?.id || null;
-
-        renderFrameTrackList();
-        renderFrameOverlay();
-
-        log(`Detected ${state.detections.length} objects in first frame.`, "g");
-    }
-
-    function seedTracksFromTab1() {
-        const rangeBase = $("#rangeBase");
-        state.tracker.tracks = state.detections.map(d => ({
-            id: d.id,
-            label: d.label,
-            bbox: { ...d.bbox },
-            score: d.score,
-            aimRel: d.aim ? { relx: d.aim.relx, rely: d.aim.rely, label: d.aim.label } : { relx: 0.5, rely: 0.5, label: "center_mass" },
-            baseAreaFrac: d.baseAreaFrac || ((d.bbox.w * d.bbox.h) / (state.frame.w * state.frame.h)),
-            baseRange_m: d.baseRange_m || (rangeBase ? +rangeBase.value : 1500),
-            baseDwell_s: d.baseDwell_s || 4.0,
-            reqP_kW: d.reqP_kW || 35,
-            depth_rel: d.depth_rel,
-            depth_est_m: d.depth_est_m,
-            depth_valid: d.depth_valid,
-            lastDepthBbox: d.depth_valid ? { ...d.bbox } : null,
-            gpt_distance_m: d.gpt_distance_m,
-            gpt_direction: d.gpt_direction,
-            gpt_description: d.gpt_description,
-            lastSeen: APP.core.utils.now(),
-            vx: 0,
-            vy: 0,
-            dwellAccum: 0,
-            killed: false,
-            state: "TRACK",
-            assessT: 0
-        }));
-        state.tracker.nextId = state.detections.length + 1;
-        log(`Seeded ${state.tracker.tracks.length} tracks from Tab 1 detections.`, "t");
-    }
-
-    function cancelReasoning() {
-        // Stop HF polling if running
-        if (state.hf.asyncPollInterval) {
-            clearInterval(state.hf.asyncPollInterval);
-            state.hf.asyncPollInterval = null;
-            log("HF polling stopped.", "w");
-        }
-
-        // Stop streaming mode
-        stopStreamingMode();
-
-        // Cancel backend job if it exists
-        const jobId = state.hf.asyncJobId;
-        if (jobId) {
-            cancelBackendJob(jobId, "cancel button");
-        }
-
-        // Reset state
-        state.isReasoning = false;
-        state.hf.busy = false;
-        state.hf.asyncJobId = null;
-        state.hf.completedJobId = null;
-        state.hf.asyncStatus = "cancelled";
-
-        // Re-enable Reason button
-        if (btnReason) {
-            btnReason.disabled = false;
-            btnReason.style.opacity = "1";
-            btnReason.style.cursor = "pointer";
-        }
-        if (btnCancelReason) btnCancelReason.style.display = "none";
-
-        setStatus("warn", "CANCELLED · Detection stopped");
-        setHfStatus("cancelled (stopped by user)");
-        log("Detection cancelled by user.", "w");
-    }
-
-    function runEngage() {
-        if (!state.hasReasoned) {
-            log("Please run Detect first.", "w");
-            return;
-        }
-
-        if (state.hf.asyncJobId) {
-            log("Processing still in progress. Please wait.", "w");
-            // If we are streaming, make sure we are on the engage tab to see it
-            const engageTab = $(`.tabbtn[data-tab="engage"]`);
-            if (engageTab) engageTab.click();
-            return;
-        }
-
-        // Switch to engage tab
-        const engageTab = $(`.tabbtn[data-tab="engage"]`);
-        if (engageTab) engageTab.click();
-
-        // Set video source
-        if (videoEngage) {
-            videoEngage.src = state.hf.processedUrl || state.videoUrl;
-            videoEngage.play().catch(err => {
-                log(`Video playback failed: ${err.message}`, "e");
-            });
-        }
-
-        state.tracker.running = true;
-        state.tracker.lastFrameTime = APP.core.utils.now();
-
-        // Ensure tracks are seeded
-        if (state.tracker.tracks.length === 0) {
-            seedTracksFromTab1();
-        }
-
-        log("Tracking started.", "g");
-    }
-
-    function loop() {
-        const { now } = APP.core.utils;
-        const t = now();
-
-        // Guard against huge dt on first frame
-        if (state.tracker.lastFrameTime === 0) state.tracker.lastFrameTime = t;
-
-        const dt = Math.min((t - state.tracker.lastFrameTime) / 1000, 0.1);
-        state.tracker.lastFrameTime = t;
-
-        // ── 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: sync tracks to current video time (even when paused)
-                const demoTracks = getDemoFrameData(videoEngage.currentTime);
-                if (demoTracks) {
-                    const tracksClone = JSON.parse(JSON.stringify(demoTracks));
-
-                    state.tracker.tracks = tracksClone.map(d => ({
-                        ...d,
-                        lastSeen: t,
-                        state: "TRACK",
-                        depth_valid: true,
-                        depth_est_m: d.gpt_distance_m || 1000,
-                    }));
-
-                    const w = videoEngage.videoWidth || state.frame.w || 1280;
-                    const h = videoEngage.videoHeight || state.frame.h || 720;
-
-                    state.tracker.tracks.forEach(tr => {
-                        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;
-                        }
-                    });
-                }
-            } else {
-                // NORMAL MODE: predict positions every frame
-                predictTracks(dt);
-
-                // 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;
-                }
-            }
-        }
-
-        // ── 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();
-                            state.tracker._gptBusy = false;
-                        })
-                        .catch(err => {
-                            console.warn("Frame GPT analysis failed:", err);
-                            state.tracker._gptBusy = false;
-                        });
-                }
-            }
-        }
-
-        // Render UI
-        if (renderFrameOverlay) renderFrameOverlay();
-        if (renderEngageOverlay) renderEngageOverlay();
-        if (tickAgentCursor) tickAgentCursor();
-
-        requestAnimationFrame(loop);
-    }
-
-    // Expose state for debugging
-    window.__LP_STATE__ = state;
-
-    // Start
-    init();
-});

frontend/js/ui/cards.js

@@ -1,130 +0,0 @@
-APP.ui.cards = {};
-
-APP.ui.cards.renderFrameTrackList = function () {
-    const { state } = APP.core;
-    const { $ } = APP.core.utils;
-    const frameTrackList = $("#frameTrackList");
-    const trackList = $("#trackList");       // Tab 2 (Engage) uses the same card logic
-    const trackCount = $("#trackCount");
-
-    if (!frameTrackList && !trackList) return;
-    if (frameTrackList) frameTrackList.innerHTML = "";
-    if (trackList) trackList.innerHTML = "";
-
-    // Filter: only show mission-relevant detections (or all in LEGACY mode)
-    const dets = (state.detections || []).filter(d => {
-        if (d.mission_relevant === null || d.mission_relevant === undefined) return true;
-        return d.mission_relevant === true;
-    });
-
-    if (trackCount) trackCount.textContent = dets.length;
-
-    if (dets.length === 0) {
-        const emptyMsg = '<div style="font-style:italic; color:var(--faint); text-align:center; margin-top:20px; font-size:12px;">No objects tracked.</div>';
-        if (frameTrackList) frameTrackList.innerHTML = emptyMsg;
-        if (trackList) trackList.innerHTML = emptyMsg;
-        return;
-    }
-
-    // Sort: ASSESSED first (by threat score), then UNASSESSED, then STALE
-    const S = APP.core.gptMapping.STATUS;
-    const statusOrder = { [S.ASSESSED]: 0, [S.UNASSESSED]: 1, [S.STALE]: 2 };
-    const sorted = [...dets].sort((a, b) => {
-        const statusA = statusOrder[a.assessment_status] ?? 1;
-        const statusB = statusOrder[b.assessment_status] ?? 1;
-        if (statusA !== statusB) return statusA - statusB;
-        const scoreA = a.threat_level_score || 0;
-        const scoreB = b.threat_level_score || 0;
-        if (scoreB !== scoreA) return scoreB - scoreA;
-        return (b.score || 0) - (a.score || 0);
-    });
-
-    sorted.forEach((det, i) => {
-        const id = det.id || `T${String(i + 1).padStart(2, '0')}`;
-        const isActive = state.selectedId === id;
-
-        let rangeStr = "---";
-        let bearingStr = "---";
-
-        if (det.depth_valid && det.depth_est_m != null) {
-            rangeStr = `${Math.round(det.depth_est_m)}m`;
-        } else if (det.gpt_distance_m) {
-            rangeStr = `~${det.gpt_distance_m}m`;
-        } else if (det.baseRange_m) {
-            rangeStr = `${Math.round(det.baseRange_m)}m`;
-        }
-
-        if (det.gpt_direction) {
-            bearingStr = det.gpt_direction;
-        }
-
-        const card = document.createElement("div");
-        card.className = "track-card" + (isActive ? " active" : "");
-        card.id = `card-${id}`;
-
-        card.onclick = () => {
-            const ev = new CustomEvent("track-selected", { detail: { id } });
-            document.dispatchEvent(ev);
-        };
-
-        // Assessment status badge
-        let statusBadge = "";
-        const assessStatus = det.assessment_status || S.UNASSESSED;
-        if (assessStatus === S.UNASSESSED) {
-            statusBadge = '<span class="badgemini" style="background:#6c757d; color:white">UNASSESSED</span>';
-        } else if (assessStatus === S.STALE) {
-            statusBadge = '<span class="badgemini" style="background:#ffc107; color:#333">STALE</span>';
-        } else if (det.threat_level_score > 0) {
-            statusBadge = `<span class="badgemini" style="background:${det.threat_level_score >= 8 ? '#ff4d4d' : '#ff9f43'}; color:white">T-${det.threat_level_score}</span>`;
-        } else if (assessStatus === S.ASSESSED) {
-            statusBadge = '<span class="badgemini" style="background:#17a2b8; color:white">ASSESSED</span>';
-        }
-
-        // GPT description (collapsed summary)
-        const desc = det.gpt_description
-            ? `<div class="track-card-body"><span class="gpt-text">${det.gpt_description}</span></div>`
-            : "";
-
-        // Inline features (only shown when active/expanded)
-        let featuresHtml = "";
-        if (isActive && det.features && Object.keys(det.features).length > 0) {
-            const entries = Object.entries(det.features).slice(0, 12);
-            const rows = entries.map(([k, v]) =>
-                `<div class="feat-row"><span class="feat-key">${k}</span><span class="feat-val">${String(v)}</span></div>`
-            ).join("");
-            featuresHtml = `<div class="track-card-features">${rows}</div>`;
-        }
-
-        card.innerHTML = `
-            <div class="track-card-header">
-                <span>${id} · ${det.label}</span>
-                <div style="display:flex; gap:4px; align-items:center">
-                    ${statusBadge}
-                    ${det.mission_relevant === true
-                        ? '<span class="badgemini" style="background:#28a745; color:white">RELEVANT</span>'
-                        : det.mission_relevant === false
-                            ? '<span class="badgemini" style="background:#6c757d; color:white">N/R</span>'
-                            : `<span class="badgemini" style="background:rgba(255,255,255,.08); color:rgba(255,255,255,.7)">${(det.score * 100).toFixed(0)}%</span>`
-                    }
-                </div>
-            </div>
-            <div class="track-card-meta">
-               RNG ${rangeStr} · BRG ${bearingStr}
-            </div>
-            ${desc}
-            ${featuresHtml}
-        `;
-        if (frameTrackList) frameTrackList.appendChild(card);
-        if (trackList) trackList.appendChild(card.cloneNode(true));
-    });
-
-    // Wire up click handlers on cloned Tab 2 cards
-    if (trackList) {
-        trackList.querySelectorAll(".track-card").forEach(card => {
-            const id = card.id.replace("card-", "");
-            card.onclick = () => {
-                document.dispatchEvent(new CustomEvent("track-selected", { detail: { id } }));
-            };
-        });
-    }
-};

frontend/js/ui/chat.js

@@ -1,155 +0,0 @@
-// Chat UI Module - Threat-aware chat with GPT
-(function () {
-    const { state } = APP.core;
-    const { $ } = APP.core.utils;
-    const { log } = APP.ui.logging;
-
-    let chatHistory = [];
-
-    /**
-     * Initialize the chat module.
-     */
-    function init() {
-        const chatInput = $("#chatInput");
-        const chatSend = $("#chatSend");
-
-        if (chatSend) {
-            chatSend.addEventListener("click", sendMessage);
-        }
-
-        if (chatInput) {
-            chatInput.addEventListener("keydown", (e) => {
-                if (e.key === "Enter" && !e.shiftKey) {
-                    e.preventDefault();
-                    sendMessage();
-                }
-            });
-        }
-
-        // Toggle chat panel
-        const chatToggle = $("#chatToggle");
-        const chatPanel = $("#chatPanel");
-        if (chatToggle && chatPanel) {
-            chatToggle.addEventListener("click", () => {
-                chatPanel.classList.toggle("collapsed");
-                chatToggle.textContent = chatPanel.classList.contains("collapsed")
-                    ? "▼ Chat"
-                    : "▲ Close Chat";
-            });
-        }
-    }
-
-    /**
-     * Send a chat message about current threats.
-     */
-    async function sendMessage() {
-        const chatInput = $("#chatInput");
-        const chatMessages = $("#chatMessages");
-
-        if (!chatInput || !chatMessages) return;
-
-        const question = chatInput.value.trim();
-        if (!question) {
-            log("Please enter a question.", "w");
-            return;
-        }
-
-        // Check if we have detections
-        if (!state.detections || state.detections.length === 0) {
-            appendMessage("system", "No detections yet. Run Detect first to analyze the scene.");
-            return;
-        }
-
-        // Add user message to UI
-        appendMessage("user", question);
-        chatInput.value = "";
-        chatInput.disabled = true;
-
-        // Show loading indicator
-        const loadingId = appendMessage("assistant", "Analyzing scene...", true);
-
-        try {
-            const response = await APP.api.client.chatAboutThreats(question, state.detections);
-
-            // Remove loading message
-            removeMessage(loadingId);
-
-            if (response.response) {
-                appendMessage("assistant", response.response);
-                chatHistory.push({ role: "user", content: question });
-                chatHistory.push({ role: "assistant", content: response.response });
-            } else if (response.error || response.detail) {
-                appendMessage("system", `Error: ${response.error || response.detail}`);
-            }
-        } catch (err) {
-            removeMessage(loadingId);
-            appendMessage("system", `Failed to get response: ${err.message}`);
-            log(`Chat error: ${err.message}`, "e");
-        } finally {
-            chatInput.disabled = false;
-            chatInput.focus();
-        }
-    }
-
-    /**
-     * Append a message to the chat display.
-     */
-    function appendMessage(role, content, isLoading = false) {
-        const chatMessages = $("#chatMessages");
-        if (!chatMessages) return null;
-
-        const msgId = `msg-${Date.now()}`;
-        const msgDiv = document.createElement("div");
-        msgDiv.className = `chat-message chat-${role}`;
-        msgDiv.id = msgId;
-
-        if (isLoading) {
-            msgDiv.classList.add("loading");
-        }
-
-        // Format content with line breaks
-        const formatted = content.replace(/\n/g, "<br>");
-
-        const icon = role === "user" ? "YOU" : role === "assistant" ? "TAC" : "SYS";
-        msgDiv.innerHTML = `<span class="chat-icon">${icon}</span><span class="chat-content">${formatted}</span>`;
-
-        chatMessages.appendChild(msgDiv);
-        chatMessages.scrollTop = chatMessages.scrollHeight;
-
-        return msgId;
-    }
-
-    /**
-     * Remove a message by ID.
-     */
-    function removeMessage(msgId) {
-        const msg = document.getElementById(msgId);
-        if (msg) msg.remove();
-    }
-
-    /**
-     * Clear chat history.
-     */
-    function clearChat() {
-        const chatMessages = $("#chatMessages");
-        if (chatMessages) {
-            chatMessages.innerHTML = "";
-        }
-        chatHistory = [];
-    }
-
-    // Export
-    APP.ui = APP.ui || {};
-    APP.ui.chat = {
-        init,
-        sendMessage,
-        clearChat
-    };
-
-    // Auto-init on DOMContentLoaded
-    if (document.readyState === "loading") {
-        document.addEventListener("DOMContentLoaded", init);
-    } else {
-        init();
-    }
-})();

frontend/js/ui/cursor.js

@@ -1,90 +0,0 @@
-// Agent Cursor Animation Module
-APP.ui.cursor = {};
-
-APP.ui.cursor.ensureAgentCursorOverlay = function () {
-    const { $ } = APP.core.utils;
-    if ($("#agentCursor")) return;
-
-    const el = document.createElement("div");
-    el.id = "agentCursor";
-    el.style.cssText = `
-        position: fixed;
-        width: 12px;
-        height: 12px;
-        border-radius: 50%;
-        background: linear-gradient(135deg, rgba(34, 211, 238, 0.9), rgba(124, 58, 237, 0.9));
-        box-shadow: 0 0 20px rgba(34, 211, 238, 0.6), 0 0 40px rgba(124, 58, 237, 0.4);
-        pointer-events: none;
-        z-index: 10000;
-        opacity: 0;
-        display: none;
-        transition: opacity 0.3s ease;
-    `;
-    document.body.appendChild(el);
-};
-
-APP.ui.cursor.setCursorVisible = function (visible) {
-    const { $ } = APP.core.utils;
-    const { state } = APP.core;
-
-    APP.ui.cursor.ensureAgentCursorOverlay();
-    const el = $("#agentCursor");
-
-    if (!el) return;
-
-    state.ui.agentCursor.visible = visible;
-    el.style.opacity = visible ? "1" : "0";
-    el.style.display = visible ? "block" : "none";
-};
-
-APP.ui.cursor.moveCursorToRect = function (rect) {
-    const { state } = APP.core;
-    const { $, now } = APP.core.utils;
-
-    if (state.ui.cursorMode === "off") return;
-
-    APP.ui.cursor.ensureAgentCursorOverlay();
-    const el = $("#agentCursor");
-
-    if (!el) return;
-
-    const c = state.ui.agentCursor;
-    c.visible = true;
-    c.target = rect;
-    c.t0 = now();
-    el.style.opacity = "1";
-    el.style.display = "block";
-};
-
-APP.ui.cursor.tickAgentCursor = function () {
-    const { state } = APP.core;
-    const { $, clamp, now } = APP.core.utils;
-    const el = $("#agentCursor");
-
-    if (!el || state.ui.cursorMode !== "on" || !state.ui.agentCursor.visible) return;
-
-    const c = state.ui.agentCursor;
-    if (!c.target) return;
-
-    const tx = c.target.left + c.target.width * 0.72;
-    const ty = c.target.top + c.target.height * 0.50;
-
-    // Smooth spring physics
-    const dx = tx - (c.x * window.innerWidth);
-    const dy = ty - (c.y * window.innerHeight);
-    c.vx = (c.vx + dx * 0.0018) * 0.85;
-    c.vy = (c.vy + dy * 0.0018) * 0.85;
-
-    const px = (c.x * window.innerWidth) + c.vx * 18;
-    const py = (c.y * window.innerHeight) + c.vy * 18;
-    c.x = clamp(px / window.innerWidth, 0.02, 0.98);
-    c.y = clamp(py / window.innerHeight, 0.02, 0.98);
-
-    el.style.transform = `translate(${c.x * window.innerWidth}px, ${c.y * window.innerHeight}px)`;
-
-    // Hide after settling
-    const settle = Math.hypot(dx, dy);
-    if (settle < 6 && (now() - c.t0) > 650) {
-        el.style.opacity = "0.75";
-    }
-};

frontend/js/ui/logging.js

@@ -1,45 +0,0 @@
-APP.ui.logging = {};
-
-APP.ui.logging.log = function (msg, type = "i") {
-    const { $ } = APP.core.utils;
-    const consoleHook = $("#sysLog"); // Fixed ID: sysLog from html
-    if (!consoleHook) return;
-    const div = document.createElement("div");
-    div.className = "log-line";
-    const ts = new Date().toISOString().split("T")[1].slice(0, 8);
-    let color = "#94a3b8"; // dim
-    if (type === "g") color = "var(--good)";
-    if (type === "w") color = "var(--warn)";
-    if (type === "e") color = "var(--bad)";
-    if (type === "t") color = "var(--theme)";
-
-    div.innerHTML = `<span class="ts">[${ts}]</span> <span style="color:${color}">${msg}</span>`;
-    consoleHook.appendChild(div);
-    consoleHook.scrollTop = consoleHook.scrollHeight;
-};
-
-APP.ui.logging.setStatus = function (level, text) {
-    const { $ } = APP.core.utils;
-    const sysDot = $("#sys-dot");
-    const sysStatus = $("#sys-status");
-    if (!sysDot || !sysStatus) return;
-    let color = "var(--text-dim)";
-    if (level === "good") color = "var(--good)";
-    if (level === "warn") color = "var(--warn)";
-    if (level === "bad") color = "var(--bad)";
-
-    sysDot.style.background = color;
-    sysDot.style.boxShadow = `0 0 10px ${color}`;
-    sysStatus.textContent = text;
-    sysStatus.style.color = color === "var(--text-dim)" ? "var(--text-main)" : color;
-};
-
-APP.ui.logging.setHfStatus = function (msg) {
-    const { $ } = APP.core.utils;
-    const el = $("#hfBackendStatus");
-    if (el) el.textContent = `HF Backend: ${msg}`;
-
-    if (msg && (msg.toLowerCase().includes("error") || msg.toLowerCase().includes("failed"))) {
-        APP.ui.logging.log(msg, "e");
-    }
-};

frontend/js/ui/overlays.js

@@ -1,113 +0,0 @@
-APP.ui.overlays = {};
-
-APP.ui.overlays.render = function (canvasId, trackSource) {
-    const { state } = APP.core;
-    const { $ } = APP.core.utils;
-
-    const canvas = $(`#${canvasId}`);
-    if (!canvas) return;
-
-    const ctx = canvas.getContext("2d");
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
-
-    const tracks = trackSource || [];
-    if (!tracks.length) return;
-
-    const w = canvas.width;
-    const h = canvas.height;
-    const selId = state.selectedId || state.tracker.selectedTrackId;
-
-    // Draw selected track highlight (always, even on processed feed)
-    if (selId) {
-        const sel = tracks.find(t => t.id === selId);
-        if (sel && sel.bbox) {
-            const b = sel.bbox;
-            const px = b.x * w, py = b.y * h, pw = b.w * w, ph = b.h * h;
-
-            // Subtle filled highlight
-            ctx.fillStyle = "rgba(124, 58, 237, 0.15)";
-            ctx.fillRect(px, py, pw, ph);
-
-            // Border glow (double stroke for glow effect)
-            ctx.strokeStyle = "rgba(124, 58, 237, 0.6)";
-            ctx.lineWidth = 3;
-            ctx.strokeRect(px, py, pw, ph);
-            ctx.strokeStyle = "rgba(34, 211, 238, 0.4)";
-            ctx.lineWidth = 1;
-            ctx.strokeRect(px - 1, py - 1, pw + 2, ph + 2);
-
-            // Small label tag
-            const label = `${sel.id}`;
-            ctx.font = "bold 11px monospace";
-            const tw = ctx.measureText(label).width + 8;
-            ctx.fillStyle = "rgba(124, 58, 237, 0.8)";
-            ctx.fillRect(px, py - 18, tw, 16);
-            ctx.fillStyle = "#fff";
-            ctx.fillText(label, px + 4, py - 5);
-        }
-    }
-};
-
-APP.ui.overlays.renderFrameOverlay = function () {
-    const { state } = APP.core;
-    const { $ } = APP.core.utils;
-    const canvas = $("#frameOverlay");
-    if (!canvas) return;
-
-    if (state.selectedId) {
-        const sel = (state.detections || []).filter(d => d.id === state.selectedId);
-        if (sel.length) {
-            APP.ui.overlays.render("frameOverlay", sel);
-            return;
-        }
-    }
-    const ctx = canvas.getContext("2d");
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
-};
-
-APP.ui.overlays.initClickHandler = function () {
-    const { $ } = APP.core.utils;
-    const canvas = $("#engageOverlay");
-    if (!canvas) return;
-
-    canvas.style.pointerEvents = "auto";
-    canvas.style.cursor = "crosshair";
-
-    canvas.addEventListener("click", (e) => {
-        const { state } = APP.core;
-        const tracks = state.tracker.tracks;
-        if (!tracks || !tracks.length) return;
-
-        // Convert click to normalized 0-1 coords relative to canvas
-        const rect = canvas.getBoundingClientRect();
-        const nx = (e.clientX - rect.left) / rect.width;
-        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 - 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;
-                    best = t;
-                }
-            }
-        }
-
-        const id = best ? best.id : null;
-        document.dispatchEvent(new CustomEvent("track-selected", { detail: { id } }));
-    });
-};
-
-APP.ui.overlays.renderEngageOverlay = function () {
-    const { state } = APP.core;
-    APP.ui.overlays.render("engageOverlay", state.tracker.tracks);
-};

frontend/style.css

@@ -1,1142 +0,0 @@
-/* =========================================
-   LaserPerception Design System
-   ========================================= */
-
-:root {
-    /* --- Colors --- */
-    --bg: #060914;
-    --panel: #0b1026;
-    --panel2: #0a0f22;
-
-    --stroke: rgba(255, 255, 255, .08);
-    --stroke2: rgba(255, 255, 255, .12);
-
-    --text: rgba(255, 255, 255, .92);
-    --muted: rgba(255, 255, 255, .62);
-    --faint: rgba(255, 255, 255, .42);
-
-    --good: #22c55e;
-    --warn: #f59e0b;
-    --bad: #ef4444;
-
-    --accent: #7c3aed;
-    --cyan: #22d3ee;
-    --mag: #fb7185;
-
-    /* --- Effects --- */
-    --shadow: 0 18px 60px rgba(0, 0, 0, .55);
-
-    /* --- Typography --- */
-    --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-    --sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
-}
-
-* {
-    box-sizing: border-box;
-}
-
-html,
-body {
-    height: 100%;
-    margin: 0;
-}
-
-body {
-    background:
-        radial-gradient(1200px 700px at 20% 8%, rgba(124, 58, 237, .22), transparent 60%),
-        radial-gradient(900px 500px at 82% 18%, rgba(34, 211, 238, .18), transparent 60%),
-        radial-gradient(800px 520px at 52% 82%, rgba(251, 113, 133, .10), transparent 65%),
-        linear-gradient(180deg, #040614, #060914);
-    color: var(--text);
-    font-family: var(--sans);
-    overflow: hidden;
-}
-
-/* =========================================
-   Layout & Structure
-   ========================================= */
-
-#app {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-}
-
-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 14px 16px 12px;
-    border-bottom: 1px solid var(--stroke);
-    background: linear-gradient(180deg, rgba(255, 255, 255, .035), transparent);
-}
-
-.workspace {
-    flex: 1;
-    display: grid;
-    grid-template-columns: 270px 1fr;
-    /* Fixed sidebar width - reduced by 50% */
-    gap: 12px;
-    padding: 12px;
-    min-height: 0;
-}
-
-aside {
-    background: rgba(255, 255, 255, .02);
-    border: 1px solid var(--stroke);
-    border-radius: 16px;
-    box-shadow: var(--shadow);
-    overflow-y: auto;
-    overflow-x: hidden;
-    display: flex;
-    flex-direction: column;
-    min-height: 0;
-}
-
-main {
-    background: rgba(255, 255, 255, .02);
-    border: 1px solid var(--stroke);
-    border-radius: 16px;
-    box-shadow: var(--shadow);
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-    min-height: 0;
-}
-
-footer {
-    padding: 10px 14px;
-    border-top: 1px solid var(--stroke);
-    color: var(--muted);
-    font-size: 11px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    gap: 10px;
-    background: linear-gradient(0deg, rgba(255, 255, 255, .03), transparent);
-}
-
-footer .mono {
-    font-family: var(--mono);
-    color: rgba(255, 255, 255, .76);
-}
-
-/* =========================================
-   Brand & Status
-   ========================================= */
-
-.brand {
-    display: flex;
-    gap: 12px;
-    align-items: center;
-    min-width: 420px;
-}
-
-.logo {
-    width: 40px;
-    height: 40px;
-    border-radius: 14px;
-    background:
-        radial-gradient(circle at 30% 30%, rgba(34, 211, 238, .9), rgba(124, 58, 237, .9) 55%, rgba(0, 0, 0, .1) 70%),
-        linear-gradient(135deg, rgba(255, 255, 255, .10), transparent 60%);
-    box-shadow: 0 16px 46px rgba(124, 58, 237, .25);
-    border: 1px solid rgba(255, 255, 255, .16);
-    position: relative;
-    overflow: hidden;
-}
-
-.logo:after {
-    content: "";
-    position: absolute;
-    inset: -40px;
-    background: conic-gradient(from 180deg, transparent, rgba(255, 255, 255, .10), transparent);
-    animation: spin 10s linear infinite;
-}
-
-@keyframes spin {
-    to {
-        transform: rotate(360deg);
-    }
-}
-
-.brand h1 {
-    font-size: 14px;
-    margin: 0;
-    letter-spacing: .16em;
-    text-transform: uppercase;
-}
-
-.brand .sub {
-    font-size: 12px;
-    color: var(--muted);
-    margin-top: 2px;
-    line-height: 1.2;
-}
-
-.status-row {
-    display: flex;
-    gap: 10px;
-    align-items: center;
-    flex-wrap: wrap;
-    justify-content: flex-end;
-}
-
-/* =========================================
-   Components: Cards & Panels
-   ========================================= */
-
-.card {
-    padding: 12px 12px 10px;
-    border-bottom: 1px solid var(--stroke);
-    position: relative;
-}
-
-.card:last-child {
-    border-bottom: none;
-}
-
-.card h2 {
-    margin: 0;
-    font-size: 12px;
-    letter-spacing: .14em;
-    text-transform: uppercase;
-    color: rgba(255, 255, 255, .78);
-}
-
-.card small {
-    color: var(--muted);
-}
-
-.card .hint {
-    color: var(--faint);
-    font-size: 11px;
-    line-height: 1.35;
-    margin-top: 6px;
-}
-
-.panel {
-    background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .015));
-    border: 1px solid var(--stroke);
-    border-radius: 16px;
-    padding: 10px;
-    box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
-    overflow: hidden;
-    position: relative;
-}
-
-.panel h3 {
-    margin: 0 0 8px;
-    font-size: 12px;
-    letter-spacing: .14em;
-    text-transform: uppercase;
-    color: rgba(255, 255, 255, .78);
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 8px;
-}
-
-.panel h3 .rightnote {
-    font-size: 11px;
-    color: var(--muted);
-    font-family: var(--mono);
-    letter-spacing: 0;
-    text-transform: none;
-}
-
-.collapse-btn {
-    background: rgba(255, 255, 255, .05);
-    border: 1px solid rgba(255, 255, 255, .12);
-    border-radius: 8px;
-    padding: 4px 8px;
-    color: var(--muted);
-    cursor: pointer;
-    font-size: 11px;
-    font-family: var(--mono);
-    transition: all 0.2s ease;
-    text-transform: none;
-    letter-spacing: 0;
-}
-
-.collapse-btn:hover {
-    background: rgba(255, 255, 255, .08);
-    color: var(--text);
-    border-color: rgba(255, 255, 255, .18);
-}
-
-/* =========================================
-   Components: Inputs & Controls
-   ========================================= */
-
-.grid2 {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 8px;
-    margin-top: 10px;
-}
-
-.row {
-    display: flex;
-    gap: 8px;
-    align-items: center;
-    justify-content: space-between;
-    margin-top: 8px;
-}
-
-label {
-    font-size: 11px;
-    color: var(--muted);
-}
-
-input[type="range"] {
-    width: 100%;
-}
-
-select,
-textarea,
-input[type="text"],
-input[type="number"] {
-    width: 100%;
-    background: rgba(255, 255, 255, .04);
-    border: 1px solid var(--stroke2);
-    border-radius: 10px;
-    padding: 8px 10px;
-    color: var(--text);
-    outline: none;
-    font-size: 12px;
-}
-
-select:focus,
-textarea:focus,
-input[type="text"]:focus,
-input[type="number"]:focus {
-    border-color: rgba(124, 58, 237, .55);
-    box-shadow: 0 0 0 3px rgba(124, 58, 237, .16);
-}
-
-.btn {
-    user-select: none;
-    cursor: pointer;
-    border: none;
-    border-radius: 12px;
-    padding: 10px 12px;
-    font-weight: 700;
-    font-size: 12px;
-    letter-spacing: .04em;
-    color: rgba(255, 255, 255, .92);
-    background: linear-gradient(135deg, rgba(124, 58, 237, .95), rgba(34, 211, 238, .45));
-    box-shadow: 0 18px 40px rgba(124, 58, 237, .24);
-}
-
-.btn:hover {
-    filter: brightness(1.06);
-}
-
-.btn:active {
-    transform: translateY(1px);
-}
-
-.btn.secondary {
-    background: rgba(255, 255, 255, .06);
-    border: 1px solid var(--stroke2);
-    box-shadow: none;
-    font-weight: 600;
-}
-
-.btn.secondary:hover {
-    background: rgba(255, 255, 255, .08);
-}
-
-.btn.danger {
-    background: linear-gradient(135deg, rgba(239, 68, 68, .95), rgba(251, 113, 133, .55));
-    box-shadow: 0 18px 40px rgba(239, 68, 68, .18);
-}
-
-.btnrow {
-    display: flex;
-    gap: 8px;
-    margin-top: 10px;
-}
-
-.btnrow .btn {
-    flex: 1;
-}
-
-.pill {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    padding: 8px 12px;
-    border-radius: 999px;
-    border: 1px solid var(--stroke2);
-    background: rgba(255, 255, 255, .04);
-    box-shadow: 0 10px 26px rgba(0, 0, 0, .35);
-    font-size: 12px;
-    color: var(--muted);
-    white-space: nowrap;
-}
-
-.dot {
-    width: 8px;
-    height: 8px;
-    border-radius: 50%;
-    background: var(--good);
-    box-shadow: 0 0 16px rgba(34, 197, 94, .6);
-}
-
-.dot.warn {
-    background: var(--warn);
-    box-shadow: 0 0 16px rgba(245, 158, 11, .55);
-}
-
-.dot.bad {
-    background: var(--bad);
-    box-shadow: 0 0 16px rgba(239, 68, 68, .55);
-}
-
-.kbd {
-    font-family: var(--mono);
-    font-size: 11px;
-    padding: 2px 6px;
-    border: 1px solid var(--stroke2);
-    border-bottom-color: rgba(255, 255, 255, .24);
-    background: rgba(0, 0, 0, .35);
-    border-radius: 7px;
-    color: rgba(255, 255, 255, .78);
-}
-
-.badge {
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-    padding: 4px 8px;
-    border-radius: 999px;
-    border: 1px solid var(--stroke2);
-    background: rgba(0, 0, 0, .25);
-    font-family: var(--mono);
-}
-
-/* =========================================
-   Navigation: Tabs
-   ========================================= */
-
-.tabs {
-    display: flex;
-    gap: 8px;
-    padding: 10px 12px;
-    border-bottom: 1px solid var(--stroke);
-    background: linear-gradient(180deg, rgba(255, 255, 255, .035), transparent);
-    flex-wrap: wrap;
-}
-
-.tabbtn {
-    cursor: pointer;
-    border: none;
-    border-radius: 999px;
-    padding: 8px 12px;
-    font-size: 12px;
-    color: rgba(255, 255, 255, .75);
-    background: rgba(255, 255, 255, .04);
-    border: 1px solid var(--stroke2);
-}
-
-.tabbtn.active {
-    color: rgba(255, 255, 255, .92);
-    background: linear-gradient(135deg, rgba(124, 58, 237, .35), rgba(34, 211, 238, .10));
-    border-color: rgba(124, 58, 237, .45);
-    box-shadow: 0 0 0 3px rgba(124, 58, 237, .14);
-}
-
-.tab {
-    display: none;
-    flex: 1;
-    min-height: 0;
-    overflow: auto;
-    padding: 12px;
-}
-
-.tab.active {
-    display: block;
-}
-
-/* =========================================
-   Visualization: Views & Canvas
-   ========================================= */
-
-.viewbox {
-    position: relative;
-    border-radius: 14px;
-    overflow: hidden;
-    background: radial-gradient(700px 380px at 30% 30%, rgba(124, 58, 237, .12), rgba(0, 0, 0, .0) 60%),
-        linear-gradient(180deg, rgba(0, 0, 0, .25), rgba(0, 0, 0, .15));
-    border: 1px solid rgba(255, 255, 255, .08);
-    min-height: 360px;
-}
-
-.viewbox canvas,
-.viewbox video {
-    width: 100%;
-    height: 100%;
-    display: block;
-    object-fit: contain;
-    /* Maintain aspect ratio, letterbox if needed */
-}
-
-/* Always show the engage video feed */
-#videoEngage {
-    display: block;
-    opacity: 1;
-}
-
-/* Overlay must use same object-fit as the main canvas to align properly */
-.viewbox .overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    pointer-events: none;
-    object-fit: contain;
-    /* CRITICAL: match frameCanvas object-fit */
-}
-
-/* Engage overlay: transparent by default, receives clicks for track selection */
-#engageOverlay {
-    pointer-events: auto;
-    cursor: crosshair;
-}
-
-.viewbox .watermark {
-    position: absolute;
-    left: 10px;
-    bottom: 10px;
-    font-family: var(--mono);
-    font-size: 11px;
-    color: rgba(255, 255, 255, .55);
-    background: rgba(0, 0, 0, .35);
-    border: 1px solid rgba(255, 255, 255, .14);
-    padding: 6px 8px;
-    border-radius: 10px;
-}
-
-.viewbox .empty {
-    position: absolute;
-    inset: 0;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    gap: 10px;
-    color: rgba(255, 255, 255, .72);
-    text-align: center;
-    padding: 22px;
-}
-
-.viewbox .empty .big {
-    font-size: 14px;
-    letter-spacing: .12em;
-    text-transform: uppercase;
-}
-
-.viewbox .empty .small {
-    color: var(--muted);
-    font-size: 12px;
-    max-width: 520px;
-    line-height: 1.4;
-}
-
-/* =========================================
-   Lists & Tables
-   ========================================= */
-
-.list {
-    display: flex;
-    flex-direction: column;
-    gap: 6px;
-    min-height: 160px;
-    max-height: none;
-    overflow-y: auto;
-    padding-right: 4px;
-}
-
-.obj {
-    padding: 10px;
-    border-radius: 14px;
-    border: 1px solid var(--stroke2);
-    background: rgba(255, 255, 255, .03);
-    cursor: pointer;
-}
-
-.obj:hover {
-    background: rgba(255, 255, 255, .05);
-}
-
-.obj.active {
-    border-color: rgba(34, 211, 238, .45);
-    box-shadow: 0 0 0 3px rgba(34, 211, 238, .14);
-    background: linear-gradient(135deg, rgba(34, 211, 238, .10), rgba(124, 58, 237, .08));
-}
-
-.obj .top {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 10px;
-}
-
-.obj .id {
-    font-family: var(--mono);
-    font-size: 12px;
-    color: rgba(255, 255, 255, .90);
-}
-
-.obj .cls {
-    font-size: 12px;
-    color: rgba(255, 255, 255, .80);
-}
-
-.obj .meta {
-    margin-top: 6px;
-    display: flex;
-    gap: 10px;
-    flex-wrap: wrap;
-    font-size: 11px;
-    color: var(--muted);
-}
-
-.table {
-    width: 100%;
-    border-collapse: separate;
-    border-spacing: 0;
-    overflow: hidden;
-    border-radius: 14px;
-    border: 1px solid rgba(255, 255, 255, .10);
-}
-
-.table th,
-.table td {
-    padding: 8px 10px;
-    font-size: 12px;
-    border-bottom: 1px solid rgba(255, 255, 255, .08);
-    vertical-align: top;
-}
-
-.table th {
-    background: rgba(255, 255, 255, .04);
-    color: rgba(255, 255, 255, .78);
-    letter-spacing: .12em;
-    text-transform: uppercase;
-    font-size: 11px;
-}
-
-.table tr:last-child td {
-    border-bottom: none;
-}
-
-.k {
-    font-family: var(--mono);
-    color: rgba(255, 255, 255, .84);
-}
-
-.mini {
-    font-size: 11px;
-    color: var(--muted);
-    line-height: 1.35;
-}
-
-/* =========================================
-   Metrics & Logs
-   ========================================= */
-
-.metricgrid {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 8px;
-}
-
-.metric {
-    border: 1px solid rgba(255, 255, 255, .10);
-    background: rgba(255, 255, 255, .03);
-    border-radius: 14px;
-    padding: 10px;
-}
-
-.metric .label {
-    font-size: 11px;
-    color: var(--muted);
-    letter-spacing: .12em;
-    text-transform: uppercase;
-}
-
-.metric .value {
-    margin-top: 6px;
-    font-family: var(--mono);
-    font-size: 16px;
-    color: rgba(255, 255, 255, .92);
-}
-
-.metric .sub {
-    margin-top: 4px;
-    font-size: 11px;
-    color: var(--faint);
-    line-height: 1.35;
-}
-
-.log {
-    font-family: var(--mono);
-    font-size: 11px;
-    color: rgba(255, 255, 255, .78);
-    line-height: 1.45;
-    background: rgba(0, 0, 0, .35);
-    border: 1px solid rgba(255, 255, 255, .12);
-    border-radius: 14px;
-    padding: 10px;
-    height: 210px;
-    overflow: auto;
-    white-space: pre-wrap;
-}
-
-.log .t {
-    color: rgba(34, 211, 238, .95);
-}
-
-.log .w {
-    color: rgba(245, 158, 11, .95);
-}
-
-.log .e {
-    color: rgba(239, 68, 68, .95);
-}
-
-.log .g {
-    color: rgba(34, 197, 94, .95);
-}
-
-/* =========================================
-   Tab Specific: Intel + Frame
-   ========================================= */
-
-.frame-grid {
-    display: grid;
-    grid-template-columns: 1.6fr 0.9fr;
-    grid-template-rows: auto auto;
-    gap: 12px;
-    min-height: 0;
-}
-
-/* Video panel on left */
-.frame-grid .panel-monitor {
-    grid-column: 1;
-    grid-row: 1 / 3;
-}
-
-/* Track cards on right, spanning full height */
-.frame-grid .panel-summary {
-    grid-column: 2;
-    grid-row: 1 / 3;
-}
-
-.intel {
-    margin-top: 10px;
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-}
-
-.intel-top {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 8px;
-}
-
-.thumbrow {
-    display: flex;
-    gap: 8px;
-}
-
-.thumbrow img {
-    flex: 1;
-    height: 86px;
-    object-fit: cover;
-    border-radius: 12px;
-    border: 1px solid rgba(255, 255, 255, .12);
-    background: rgba(0, 0, 0, .25);
-}
-
-.intelbox {
-    font-size: 12px;
-    line-height: 1.45;
-    color: rgba(255, 255, 255, .84);
-    background: rgba(0, 0, 0, .35);
-    border: 1px solid rgba(255, 255, 255, .12);
-    border-radius: 14px;
-    padding: 10px;
-    min-height: 72px;
-}
-
-/* =========================================
-   Tab Specific: Engage
-   ========================================= */
-
-.engage-grid {
-    display: grid;
-    grid-template-columns: 1.6fr .9fr;
-    gap: 12px;
-    min-height: 0;
-    transition: grid-template-columns 0.3s ease;
-}
-
-.engage-grid.sidebar-collapsed {
-    grid-template-columns: 1fr 0fr;
-}
-
-.engage-grid.sidebar-collapsed .engage-right {
-    display: none;
-}
-
-.engage-right {
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
-    min-height: 0;
-}
-
-.radar {
-    height: 540px;
-    display: flex;
-    flex-direction: column;
-}
-
-.radar canvas {
-    flex: 1;
-    width: 100%;
-    height: 100%;
-    display: block;
-}
-
-.strip {
-    display: flex;
-    gap: 8px;
-    flex-wrap: wrap;
-    align-items: center;
-    font-size: 12px;
-    color: var(--muted);
-}
-
-.strip .chip {
-    padding: 6px 10px;
-    border-radius: 999px;
-    border: 1px solid rgba(255, 255, 255, .12);
-    background: rgba(255, 255, 255, .03);
-    font-family: var(--mono);
-    color: rgba(255, 255, 255, .78);
-}
-
-/* Sidebar Checkbox Row */
-.checkbox-row {
-    grid-column: span 2;
-    margin-top: 8px;
-    border-top: 1px solid var(--stroke2);
-    padding-top: 8px;
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    cursor: pointer;
-}
-
-.checkbox-row input[type="checkbox"] {
-    width: auto;
-    margin: 0;
-}
-
-.bar {
-    height: 10px;
-    border-radius: 999px;
-    background: rgba(255, 255, 255, .08);
-    border: 1px solid rgba(255, 255, 255, .12);
-    overflow: hidden;
-}
-
-.bar>div {
-    height: 100%;
-    width: 0%;
-    background: linear-gradient(90deg, rgba(34, 211, 238, .95), rgba(124, 58, 237, .95));
-    transition: width .18s ease;
-}
-
-/* =========================================
-   Tab Specific: Trade Space
-   ========================================= */
-
-.trade-grid {
-    display: grid;
-    grid-template-columns: 1.35fr .65fr;
-    gap: 12px;
-    min-height: 0;
-}
-
-.plot {
-    height: 420px;
-}
-
-/* =========================================
-   Utilities
-   ========================================= */
-
-::-webkit-scrollbar {
-    width: 10px;
-    height: 10px;
-}
-
-::-webkit-scrollbar-thumb {
-    background: rgba(255, 255, 255, .10);
-    border-radius: 999px;
-    border: 2px solid rgba(0, 0, 0, .25);
-}
-
-::-webkit-scrollbar-thumb:hover {
-    background: rgba(255, 255, 255, .16);
-}
-
-/* Track Cards */
-.track-card {
-    background: rgba(255, 255, 255, 0.025);
-    border: 1px solid rgba(255, 255, 255, .10);
-    border-radius: 10px;
-    padding: 10px 12px;
-    margin-bottom: 0;
-    cursor: pointer;
-    transition: all 0.15s ease;
-}
-
-.track-card:hover {
-    background: rgba(255, 255, 255, 0.06);
-    border-color: rgba(255, 255, 255, .18);
-}
-
-.track-card.active {
-    border-color: rgba(124, 58, 237, .55);
-    background: linear-gradient(135deg, rgba(124, 58, 237, .12), rgba(34, 211, 238, .06));
-    box-shadow: 0 0 0 2px rgba(124, 58, 237, .15);
-}
-
-.track-card-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    font-weight: 600;
-    margin-bottom: 6px;
-    font-size: 12px;
-    color: rgba(255, 255, 255, .92);
-    letter-spacing: .02em;
-}
-
-.track-card-meta {
-    font-size: 10px;
-    font-family: var(--mono);
-    color: rgba(255, 255, 255, .50);
-    margin-bottom: 6px;
-    letter-spacing: .03em;
-}
-
-.track-card-body {
-    font-size: 11px;
-    line-height: 1.45;
-    color: rgba(255, 255, 255, .72);
-    background: rgba(0, 0, 0, 0.25);
-    padding: 8px 10px;
-    border-radius: 8px;
-    border: 1px solid rgba(255, 255, 255, .05);
-}
-
-.badgemini {
-    font-size: 10px;
-    font-weight: 600;
-    padding: 2px 6px;
-    border-radius: 6px;
-    letter-spacing: .03em;
-    line-height: 1;
-}
-
-.track-card-features {
-    margin-top: 8px;
-    border-top: 1px solid rgba(255, 255, 255, .06);
-    padding-top: 8px;
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 4px 12px;
-}
-
-.track-card-features .feat-row {
-    display: flex;
-    justify-content: space-between;
-    align-items: baseline;
-    font-size: 10px;
-    padding: 2px 0;
-}
-
-.track-card-features .feat-key {
-    font-family: var(--mono);
-    color: rgba(255, 255, 255, .50);
-    letter-spacing: .02em;
-    white-space: nowrap;
-    margin-right: 6px;
-}
-
-.track-card-features .feat-val {
-    color: rgba(255, 255, 255, .85);
-    text-align: right;
-    font-size: 10px;
-}
-
-.gpt-badge {
-    color: gold;
-    font-size: 10px;
-    border: 1px solid gold;
-    border-radius: 3px;
-    padding: 1px 4px;
-    margin-left: 6px;
-}
-
-.gpt-text {
-    color: rgba(255, 255, 255, .78);
-}
-
-/* =========================================
-   Threat Chat Panel
-   ========================================= */
-
-.panel-chat {
-    grid-column: 1 / -1;
-    grid-row: 3;
-    max-height: 260px;
-    display: flex;
-    flex-direction: column;
-}
-
-.panel-chat.collapsed .chat-container {
-    display: none;
-}
-
-.panel-chat.collapsed {
-    max-height: 44px;
-}
-
-.chat-container {
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-    min-height: 0;
-    gap: 8px;
-}
-
-.chat-messages {
-    flex: 1;
-    overflow-y: auto;
-    background: rgba(0, 0, 0, .35);
-    border: 1px solid rgba(255, 255, 255, .10);
-    border-radius: 12px;
-    padding: 10px;
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    min-height: 100px;
-    max-height: 160px;
-}
-
-.chat-message {
-    display: flex;
-    gap: 8px;
-    padding: 8px 10px;
-    border-radius: 10px;
-    font-size: 12px;
-    line-height: 1.4;
-    animation: fadeIn 0.2s ease;
-}
-
-@keyframes fadeIn {
-    from {
-        opacity: 0;
-        transform: translateY(4px);
-    }
-
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
-.chat-message.chat-user {
-    background: linear-gradient(135deg, rgba(124, 58, 237, .25), rgba(34, 211, 238, .10));
-    border: 1px solid rgba(124, 58, 237, .35);
-    margin-left: 20px;
-}
-
-.chat-message.chat-assistant {
-    background: rgba(255, 255, 255, .04);
-    border: 1px solid rgba(255, 255, 255, .10);
-    margin-right: 20px;
-}
-
-.chat-message.chat-system {
-    background: rgba(245, 158, 11, .10);
-    border: 1px solid rgba(245, 158, 11, .25);
-    color: rgba(245, 158, 11, .95);
-    font-size: 11px;
-}
-
-.chat-message.loading .chat-content::after {
-    content: "";
-    display: inline-block;
-    width: 12px;
-    height: 12px;
-    border: 2px solid rgba(255, 255, 255, .3);
-    border-top-color: var(--cyan);
-    border-radius: 50%;
-    animation: spin 0.8s linear infinite;
-    margin-left: 8px;
-    vertical-align: middle;
-}
-
-.chat-icon {
-    flex-shrink: 0;
-    font-size: 14px;
-}
-
-.chat-content {
-    flex: 1;
-    color: rgba(255, 255, 255, .88);
-    word-break: break-word;
-}
-
-.chat-input-row {
-    display: flex;
-    gap: 8px;
-}
-
-.chat-input-row input {
-    flex: 1;
-    background: rgba(255, 255, 255, .04);
-    border: 1px solid rgba(255, 255, 255, .12);
-    border-radius: 10px;
-    padding: 10px 12px;
-    color: var(--text);
-    font-size: 12px;
-    outline: none;
-}
-
-.chat-input-row input:focus {
-    border-color: rgba(124, 58, 237, .55);
-    box-shadow: 0 0 0 3px rgba(124, 58, 237, .16);
-}
-
-.chat-input-row input:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-}
-
-.chat-input-row .btn {
-    padding: 10px 16px;
-    min-width: 70px;
-}

index.html

@@ -0,0 +1,197 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Detection Base</title>
+<style>
+  * { box-sizing: border-box; margin: 0; padding: 0; }
+  body { font-family: system-ui, sans-serif; background: #111; color: #eee; padding: 24px; max-width: 960px; margin: 0 auto; }
+  h1 { margin-bottom: 16px; font-size: 1.4em; }
+  label { display: block; margin-top: 12px; font-size: 0.85em; color: #aaa; }
+  select, input[type="file"], input[type="number"] { width: 100%; padding: 8px; margin-top: 4px; background: #222; color: #eee; border: 1px solid #444; border-radius: 4px; }
+  .row { display: flex; gap: 12px; flex-wrap: wrap; }
+  .row > div { flex: 1; min-width: 140px; }
+  button { margin-top: 16px; padding: 10px 24px; background: #2563eb; color: #fff; border: none; border-radius: 4px; cursor: pointer; font-size: 1em; }
+  button:disabled { background: #555; cursor: not-allowed; }
+  #status { margin-top: 12px; padding: 8px; font-size: 0.9em; color: #aaa; }
+  .preview { margin-top: 16px; }
+  .preview img, .preview video { max-width: 100%; border-radius: 4px; border: 1px solid #333; }
+  #detections { margin-top: 12px; background: #1a1a1a; padding: 12px; border-radius: 4px; max-height: 300px; overflow: auto; font-family: monospace; font-size: 0.8em; white-space: pre-wrap; display: none; }
+  .toggle { margin-top: 8px; font-size: 0.85em; color: #6ba3ff; cursor: pointer; text-decoration: underline; }
+  .hidden { display: none; }
+  #segOpts { display: none; }
+</style>
+</head>
+<body>
+<h1>Detection Base</h1>
+
+<label for="video">Video</label>
+<input type="file" id="video" accept="video/*">
+
+<div class="row">
+  <div>
+    <label>Mode</label>
+    <select id="mode">
+      <option value="object_detection">Object Detection</option>
+      <option value="segmentation">Segmentation</option>
+      <option value="drone_detection">Drone Detection</option>
+    </select>
+  </div>
+  <div>
+    <label>Detector</label>
+    <select id="detector">
+      <option value="yolo11">YOLO11</option>
+      <option value="detr_resnet50">DETR</option>
+      <option value="grounding_dino">Grounding DINO</option>
+      <option value="drone_yolo">Drone YOLO</option>
+    </select>
+  </div>
+</div>
+
+<div id="segOpts" class="row">
+  <div>
+    <label>Segmenter</label>
+    <select id="segmenter">
+      <option value="GSAM2-L">GSAM2-L</option>
+      <option value="GSAM2-B">GSAM2-B</option>
+      <option value="GSAM2-S">GSAM2-S</option>
+      <option value="YSAM2-L">YSAM2-L</option>
+      <option value="YSAM2-B">YSAM2-B</option>
+      <option value="YSAM2-S">YSAM2-S</option>
+    </select>
+  </div>
+  <div>
+    <label>Step (keyframe interval)</label>
+    <input type="number" id="step" value="7" min="1" max="60">
+  </div>
+</div>
+
+<label>Queries (comma-separated, optional)</label>
+<input type="text" id="queries" placeholder="person, car, truck" style="width:100%;padding:8px;margin-top:4px;background:#222;color:#eee;border:1px solid #444;border-radius:4px;">
+
+<div class="row">
+  <div>
+    <label><input type="checkbox" id="enableDepth"> Enable depth estimation</label>
+  </div>
+</div>
+
+<button id="submit" onclick="submit()">Run Detection</button>
+<div id="status"></div>
+
+<div class="preview">
+  <div id="firstFrameBox" class="hidden">
+    <p>First Frame</p>
+    <img id="firstFrame" alt="First frame detection preview">
+  </div>
+  <div id="streamBox" class="hidden">
+    <p>Live Stream</p>
+    <img id="stream" alt="Live MJPEG detection stream">
+  </div>
+  <div id="videoBox" class="hidden">
+    <p>Processed Video</p>
+    <video id="result" controls type="video/mp4"></video>
+  </div>
+</div>
+<span class="toggle hidden" id="detToggle" onclick="toggleDets()">Show detections JSON</span>
+<pre id="detections"></pre>
+
+<script>
+const $ = id => document.getElementById(id);
+
+$('mode').onchange = () => {
+  const seg = $('mode').value === 'segmentation';
+  $('segOpts').style.display = seg ? 'flex' : 'none';
+  $('detector').parentElement.style.display = seg ? 'none' : '';
+};
+
+let pollTimer = null;
+
+async function submit() {
+  const file = $('video').files[0];
+  if (!file) return alert('Select a video file');
+
+  $('submit').disabled = true;
+  $('status').textContent = 'Uploading...';
+  hide('firstFrameBox'); hide('streamBox'); hide('videoBox'); hide('detToggle');
+  $('detections').style.display = 'none';
+
+  const fd = new FormData();
+  fd.append('video', file);
+  fd.append('mode', $('mode').value);
+  fd.append('queries', $('queries').value);
+  fd.append('detector', $('detector').value);
+  fd.append('segmenter', $('segmenter').value);
+  fd.append('step', $('step').value);
+  fd.append('enable_depth', $('enableDepth').checked);
+
+  try {
+    const res = await fetch('/detect/async', { method: 'POST', body: fd });
+    if (!res.ok) { const e = await res.json(); throw new Error(e.detail || res.statusText); }
+    const data = await res.json();
+
+    $('status').textContent = 'Processing...';
+
+    // Show first frame
+    $('firstFrame').src = data.first_frame_url;
+    show('firstFrameBox');
+
+    // Show detections
+    if (data.first_frame_detections && data.first_frame_detections.length) {
+      $('detections').textContent = JSON.stringify(data.first_frame_detections, null, 2);
+      show('detToggle');
+    }
+
+    // Start stream
+    $('stream').src = data.stream_url;
+    show('streamBox');
+
+    // Poll for completion
+    pollTimer = setInterval(async () => {
+      try {
+        const sr = await fetch(data.status_url);
+        const st = await sr.json();
+        $('status').textContent = `Status: ${st.status}`;
+
+        if (st.status === 'completed') {
+          clearInterval(pollTimer);
+          hide('streamBox');
+          $('result').src = data.video_url;
+          show('videoBox');
+          $('submit').disabled = false;
+          // Update detections with final data
+          if (st.first_frame_detections && st.first_frame_detections.length) {
+            $('detections').textContent = JSON.stringify(st.first_frame_detections, null, 2);
+            show('detToggle');
+          }
+        } else if (st.status === 'failed') {
+          clearInterval(pollTimer);
+          $('status').textContent = `Failed: ${st.error}`;
+          $('submit').disabled = false;
+        } else if (st.status === 'cancelled') {
+          clearInterval(pollTimer);
+          $('status').textContent = 'Cancelled';
+          $('submit').disabled = false;
+        }
+      } catch(e) { /* keep polling */ }
+    }, 2000);
+
+  } catch(e) {
+    $('status').textContent = `Error: ${e.message}`;
+    $('submit').disabled = false;
+  }
+}
+
+function show(id) { $(id).classList.remove('hidden'); }
+function hide(id) {
+  $(id).classList.add('hidden');
+  const img = $(id).querySelector('img');
+  if (img && img.src) img.src = '';
+}
+function toggleDets() {
+  const d = $('detections');
+  d.style.display = d.style.display === 'none' ? 'block' : 'none';
+}
+</script>
+</body>
+</html>