chore(frontend): Remove unused UI sections - radar, intel summary, HEL knobs, atmosphere, and trade space

Cleaned up frontend by removing:
- Mission Intel Summary card
- Radar/Relative Geometry sections (Tab 1 & 2)
- HEL & Director Knobs card
- Atmosphere & Maritime card
- Trade Space tab and section (Tab 3)
- Related JS imports, event handlers, and script includes

frontend/index.html

@@ -112,128 +112,6 @@
           </div>
         </div>
 
-        <div class="card">
-          <h2>Mission Intel Summary</h2>
-          <div class="hint">Unbiased 2–3 sentence scene description computed from a few sampled frames + detected
-            objects (no location inference).</div>
-
-          <div class="intel">
-            <div class="intel-top">
-              <span class="badge"><span class="dot warn" id="intelDot"
-                  style="width:7px;height:7px;box-shadow:none"></span><span id="intelStamp">Idle</span></span>
-              <button id="btnIntelRefresh" class="btn secondary"
-                style="padding:8px 10px; border-radius:10px; font-weight:700">Refresh</button>
-            </div>
-
-            <div class="thumbrow" aria-label="sampled frames">
-              <img id="intelThumb0" alt="sample frame 1" />
-              <img id="intelThumb1" alt="sample frame 2" />
-              <img id="intelThumb2" alt="sample frame 3" />
-            </div>
-
-            <div id="intelSummaryBox" class="intelbox">Upload a video, then click <b>Reason</b> to generate an unbiased
-              scene summary.</div>
-          </div>
-        </div>
-
-        <div class="card">
-          <h2>HEL & Director Knobs</h2>
-          <div class="grid2">
-            <div>
-              <label>Max output power (kW)</label>
-              <input id="helPower" type="range" min="20" max="250" step="1" value="60" />
-              <div class="row"><small class="mini"><span id="helPowerVal">60</span> kW</small><small class="mini">turret
-                  output</small></div>
-            </div>
-            <div>
-              <label>Aperture (m)</label>
-              <input id="helAperture" type="range" min="0.05" max="0.6" step="0.01" value="0.25" />
-              <div class="row"><small class="mini"><span id="helApertureVal">0.25</span> m</small><small
-                  class="mini">beam director</small></div>
-            </div>
-          </div>
-
-          <div class="grid2 mt-sm">
-            <div>
-              <label>Beam quality (M²)</label>
-              <input id="helM2" type="range" min="1.1" max="4.0" step="0.1" value="1.6" />
-              <div class="row"><small class="mini"><span id="helM2Val">1.6</span></small><small class="mini">lower is
-                  better</small></div>
-            </div>
-            <div>
-              <label>Jitter (μrad RMS)</label>
-              <input id="helJitter" type="range" min="0.5" max="15" step="0.1" value="3.2" />
-              <div class="row"><small class="mini"><span id="helJitterVal">3.2</span></small><small
-                  class="mini">director stability</small></div>
-            </div>
-          </div>
-
-          <div class="grid2 mt-sm">
-            <div>
-              <label>Mode</label>
-              <select id="helMode">
-                <option value="cw">CW (continuous)</option>
-                <option value="burst">Burst (duty-limited)</option>
-                <option value="pulse">Pulsed (peak shaping)</option>
-              </select>
-            </div>
-            <div>
-              <label>Duty cycle (%)</label>
-              <input id="helDuty" type="range" min="10" max="100" step="1" value="85" />
-              <div class="row"><small class="mini"><span id="helDutyVal">85</span>%</small><small class="mini">thermal /
-                  power</small></div>
-            </div>
-          </div>
-        </div>
-
-        <div class="card">
-          <h2>Atmosphere & Maritime</h2>
-          <div class="grid2">
-            <div>
-              <label>Visibility (km)</label>
-              <input id="atmVis" type="range" min="1" max="30" step="1" value="16" />
-              <div class="row"><small class="mini"><span id="atmVisVal">16</span> km</small><small
-                  class="mini">aerosol/haze</small></div>
-            </div>
-            <div>
-              <label>Turbulence (Cn²)</label>
-              <input id="atmCn2" type="range" min="1" max="10" step="1" value="5" />
-              <div class="row"><small class="mini"><span id="atmCn2Val">5</span>/10</small><small
-                  class="mini">wavefront</small></div>
-            </div>
-          </div>
-
-          <div class="grid2 mt-sm">
-            <div>
-              <label>Sea spray</label>
-              <input id="seaSpray" type="range" min="0" max="10" step="1" value="2" />
-              <div class="row"><small class="mini"><span id="seaSprayVal">2</span>/10</small><small class="mini">salt
-                  attenuation</small></div>
-            </div>
-            <div>
-              <label>Adaptive optics</label>
-              <input id="aoQ" type="range" min="0" max="10" step="1" value="7" />
-              <div class="row"><small class="mini"><span id="aoQVal">7</span>/10</small><small class="mini">turbulence
-                  mitigation</small></div>
-            </div>
-          </div>
-
-          <div class="grid2 mt-sm">
-            <div>
-              <label>Baseline range (m)</label>
-              <input id="rangeBase" type="range" min="200" max="6000" step="25" value="1500" />
-              <div class="row"><small class="mini"><span id="rangeBaseVal">1500</span> m</small><small
-                  class="mini">median target</small></div>
-            </div>
-            <div>
-              <label>Update rate (Hz)</label>
-              <input id="detHz" type="range" min="1" max="12" step="1" value="6" />
-              <div class="row"><small class="mini"><span id="detHzVal">6</span> Hz</small><small class="mini">tab 2
-                  detection</small></div>
-            </div>
-          </div>
-        </div>
-
         <div class="card">
           <h2>Engagement Policy</h2>
           <div class="grid2">
@@ -274,7 +152,6 @@
         <div class="tabs">
           <button class="tabbtn active" data-tab="frame">Tab 1 · Frame-1 Reason</button>
           <button class="tabbtn" data-tab="engage">Tab 2 · Video Engage</button>
-          <button class="tabbtn" data-tab="trade">Trade Space</button>
         </div>
 
         <!-- ===== Tab 1 ===== -->
@@ -312,13 +189,7 @@
               </div>
             </div>
 
-            <div class="panel panel-objects radar">
-              <h3>
-                <span>Radar / Relative Geometry</span>
-                <span class="rightnote" id="objCount">0</span>
-              </h3>
-              <canvas id="frameRadar" width="600" height="260" class="full-size"></canvas>
-            </div>
+
 
             <div class="panel panel-features">
               <h3>
@@ -413,93 +284,17 @@
             </div>
 
             <div class="engage-right">
-              <div class="panel radar">
-                <h3>
-                  <span>Radar / Relative Geometry</span>
-                  <span class="rightnote">Dynamic</span>
-                </h3>
-                <canvas id="radarCanvas" width="600" height="260" class="full-size"></canvas>
-              </div>
-
               <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>
-
-                <!-- Radar Controls -->
-                <div class="mt-sm" style="padding: 10px; background: rgba(0,0,0,0.2); border-radius: 6px;">
-                  <div class="row">
-                    <label class="mini">History Trails</label>
-                    <input id="radarHistoryLen" type="range" min="0" max="100" value="30" style="flex:1; margin:0 8px">
-                    <small class="mini" id="radarHistoryVal">30</small>
-                  </div>
-                  <div class="row mt-xs">
-                    <label class="mini">Future Pred</label>
-                    <input id="radarFutureLen" type="range" min="0" max="100" value="30" style="flex:1; margin:0 8px">
-                    <small class="mini" id="radarFutureVal">30</small>
-                  </div>
-                </div>
               </div>
             </div>
           </div>
         </section>
 
-        <!-- ===== Tab 3 ===== -->
-        <section class="tab" id="tab-trade">
-          <div class="trade-grid">
-            <div class="panel plot">
-              <h3>
-                <span>Range Sensitivity · Max vs Required Power · Dwell</span>
-                <span class="rightnote">Interactive</span>
-              </h3>
-              <canvas id="tradeCanvas" width="1100" height="420" class="full-size"></canvas>
-            </div>
-
-            <div class="panel">
-              <h3>
-                <span>Trade Controls</span>
-                <span class="rightnote">What-if</span>
-              </h3>
-              <div class="hint">This plot is computed from your current HEL and atmosphere knobs. It uses the selected
-                target’s baseline requirements (from Tab 1) as a reference curve.</div>
-
-              <div class="mt-md">
-                <label>Selected target for curve</label>
-                <select id="tradeTarget"></select>
-              </div>
-
-              <div class="grid2 mt-sm">
-                <div>
-                  <label>Range sweep min (m)</label>
-                  <input id="rMin" type="number" value="200" min="50" max="10000" step="50" />
-                </div>
-                <div>
-                  <label>Range sweep max (m)</label>
-                  <input id="rMax" type="number" value="6000" min="100" max="20000" step="50" />
-                </div>
-              </div>
-
-              <div class="row mt-md">
-                <label>Show P(kill)</label>
-                <select id="showPk">
-                  <option value="on">On</option>
-                  <option value="off">Off</option>
-                </select>
-              </div>
-
-              <div class="btnrow">
-                <button class="btn secondary" id="btnReplot">Replot</button>
-                <button class="btn secondary" id="btnSnap">Snapshot (log)</button>
-              </div>
-
-              <div class="hint">This tab is designed to look like a weapon trade-space console: propagation, lethality
-                margin, and dwell inflation with range and atmosphere.</div>
-            </div>
-          </div>
-        </section>
-      </main>
     </div>
 
     <footer>
@@ -527,12 +322,9 @@
   <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/radar.js"></script>
   <script src="./js/ui/cards.js"></script>
   <script src="./js/ui/features.js"></script>
-  <script src="./js/ui/intel.js"></script>
   <script src="./js/ui/cursor.js"></script>
-  <script src="./js/ui/trade.js"></script>
   <script src="./data/helicopter_demo_data.js"></script>
   <script src="./js/core/demo.js"></script>
   <script src="./js/main.js"></script>

frontend/js/main.js

@@ -12,12 +12,9 @@ document.addEventListener("DOMContentLoaded", () => {
     const { load: loadDemo, getFrameData: getDemoFrameData, enable: enableDemo } = APP.core.demo;
 
     // UI Renderers
-    const { renderFrameRadar, renderLiveRadar } = APP.ui.radar;
     const { renderFrameOverlay, renderEngageOverlay } = APP.ui.overlays;
     const { renderFrameTrackList } = APP.ui.cards;
     const { renderFeatures } = APP.ui.features;
-    const { renderTrade, populateTradeTarget, snapshotTrade } = APP.ui.trade;
-    const { computeIntelSummary, resetIntelUI, renderMissionContext } = APP.ui.intel;
     const { tickAgentCursor, moveCursorToRect } = APP.ui.cursor;
     const { matchAndUpdateTracks, predictTracks } = APP.core.tracker;
     const { defaultAimpoint } = APP.core.physics;
@@ -36,9 +33,6 @@ document.addEventListener("DOMContentLoaded", () => {
     const btnReset = $("#btnReset");
     const btnPause = $("#btnPause");
     const btnToggleSidebar = $("#btnToggleSidebar");
-    const btnIntelRefresh = $("#btnIntelRefresh");
-    const btnReplot = $("#btnReplot");
-    const btnSnap = $("#btnSnap");
 
     const detectorSelect = $("#detectorSelect");
     const missionText = $("#missionText");
@@ -66,7 +60,6 @@ document.addEventListener("DOMContentLoaded", () => {
 
         // Initial UI sync
         syncKnobDisplays();
-        renderMissionContext();
         setHfStatus("idle");
 
         // Start main loop
@@ -150,7 +143,7 @@ document.addEventListener("DOMContentLoaded", () => {
                 if (!state.hasReasoned) return;
                 await recomputeHEL();
                 renderFrameOverlay();
-                renderTrade();
+
                 log("HEL parameters recomputed.", "g");
             });
         }
@@ -163,7 +156,7 @@ document.addEventListener("DOMContentLoaded", () => {
                 renderFrameTrackList();
                 renderFrameOverlay();
                 renderFeatures(null);
-                renderTrade();
+
                 log("Detections cleared.", "t");
             });
         }
@@ -200,8 +193,6 @@ document.addEventListener("DOMContentLoaded", () => {
                 state.tracker.running = false;
                 state.tracker.nextId = 1;
                 renderFrameTrackList();
-                renderFrameRadar();
-                renderLiveRadar();
                 log("Engage reset.", "t");
             });
         }
@@ -218,47 +209,28 @@ document.addEventListener("DOMContentLoaded", () => {
                 }
             });
         }
+    }
 
-        // Intel refresh
-        if (btnIntelRefresh) {
-            btnIntelRefresh.addEventListener("click", async () => {
-                if (!state.videoLoaded) return;
-                log("Refreshing mission intel summary...", "t");
-                await computeIntelSummary();
-            });
-        }
 
-        // Trade space controls
-        if (btnReplot) {
-            btnReplot.addEventListener("click", renderTrade);
-        }
-        if (btnSnap) {
-            btnSnap.addEventListener("click", snapshotTrade);
-        }
-        const tradeTarget = $("#tradeTarget");
-        if (tradeTarget) {
-            tradeTarget.addEventListener("change", renderTrade);
-        }
 
-        // Track selection event
-        document.addEventListener("track-selected", (e) => {
-            state.selectedId = e.detail.id;
-            state.tracker.selectedTrackId = e.detail.id;
-            renderFrameTrackList();
-            renderFrameOverlay();
-            const det = state.detections.find(d => d.id === state.selectedId);
-            renderFeatures(det);
+    // Track selection event
+    document.addEventListener("track-selected", (e) => {
+        state.selectedId = e.detail.id;
+        state.tracker.selectedTrackId = e.detail.id;
+        renderFrameTrackList();
+        renderFrameOverlay();
+        const det = state.detections.find(d => d.id === state.selectedId);
+        renderFeatures(det);
+    });
+
+    // 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);
+            }
         });
-
-        // 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() {
@@ -270,7 +242,7 @@ document.addEventListener("DOMContentLoaded", () => {
                 if (state.hasReasoned) {
                     recomputeHEL();
                     renderFrameOverlay();
-                    renderTrade();
+
                 }
             });
         });
@@ -327,13 +299,8 @@ document.addEventListener("DOMContentLoaded", () => {
                 if (tab) tab.classList.add("active");
 
                 // Tab-specific actions
-                if (btn.dataset.tab === "trade") {
-                    populateTradeTarget();
-                    renderTrade();
-                }
                 if (btn.dataset.tab === "engage") {
                     resizeOverlays();
-                    renderLiveRadar();
                 }
             });
         });
@@ -367,7 +334,7 @@ document.addEventListener("DOMContentLoaded", () => {
         renderFrameTrackList();
         renderFrameOverlay();
         renderFeatures(null);
-        renderTrade();
+
 
         setStatus("warn", "REASONING · Running perception pipeline");
 
@@ -500,10 +467,6 @@ document.addEventListener("DOMContentLoaded", () => {
 
                 // Seed tracks for Tab 2
                 seedTracksFromTab1();
-                renderFrameRadar();
-
-                // Generate intel summary (async)
-                computeIntelSummary();
             }).catch(err => {
                 log(`Polling error: ${err.message}`, "e");
                 stopStreamingMode();
@@ -760,8 +723,6 @@ document.addEventListener("DOMContentLoaded", () => {
         } // End if(running)
 
         // Render UI
-        if (renderFrameRadar) renderFrameRadar();
-        if (renderLiveRadar) renderLiveRadar();
         if (renderFrameOverlay) renderFrameOverlay();
         if (renderEngageOverlay) renderEngageOverlay();
         if (tickAgentCursor) tickAgentCursor();