Fix ReferenceError by removing renderSummary calls and cleanup UI code

LaserPerception/LaserPerception.css

@@ -750,7 +750,7 @@ input[type="number"]:focus {
 
 .engage-grid {
     display: grid;
-    grid-template-columns: 2.5fr 1.5fr;
+    grid-template-columns: 1.6fr .9fr;
     gap: 12px;
     min-height: 0;
     transition: grid-template-columns 0.3s ease;

LaserPerception/LaserPerception.html

@@ -353,142 +353,143 @@
             </div>
 
           </div>
-    </div>
-    </section>
-
-    <!-- ===== Tab 2 ===== -->
-    <section class="tab" id="tab-engage">
-      <div class="engage-grid">
-        <div class="panel">
-          <h3>
-            <span>Video Engage · Tracking + Dynamic Dwell</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">LOCK · DIST · DWELL · AIMPOINT · FIRE/ASSESS</div>
-            <div class="empty" id="engageEmpty">
-              <div class="big">No video loaded</div>
-              <div class="small">Upload a video. Run <b>Reason</b> first to initialize aimpoints and baseline dwell.
-                Then click <b>Engage</b>.</div>
-            </div>
-          </div>
 
-          <div class="btnrow mt-md">
-            <button id="btnEngage" class="btn">Engage</button>
-            <button id="btnPause" class="btn secondary">Pause</button>
-            <button id="btnReset" class="btn secondary">Reset</button>
-          </div>
+        </section>
 
-          <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">BEAM:OFF</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)">VIEW:DEFAULT</span>
-          </div>
+        <!-- ===== Tab 2 ===== -->
+        <section class="tab" id="tab-engage">
+          <div class="engage-grid">
+            <div class="panel">
+              <h3>
+                <span>Video Engage · Tracking + Dynamic Dwell</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="mt-md">
-            <div class="row"><label>Active dwell progress (selected)</label><small class="mini" id="dwellText">—</small>
-            </div>
-            <div class="bar">
-              <div id="dwellBar"></div>
-            </div>
-          </div>
+              <div class="viewbox" style="min-height: 420px;">
+                <video id="videoEngage" playsinline muted></video>
+                <canvas id="engageOverlay" class="overlay"></canvas>
+                <div class="watermark">LOCK · DIST · DWELL · AIMPOINT · FIRE/ASSESS</div>
+                <div class="empty" id="engageEmpty">
+                  <div class="big">No video loaded</div>
+                  <div class="small">Upload a video. Run <b>Reason</b> first to initialize aimpoints and baseline dwell.
+                    Then click <b>Engage</b>.</div>
+                </div>
+              </div>
 
-          <div class="hint mt-md">Manual targeting: choose “Manual” in Engagement Policy, then
-            click a target in the video. The “beam” will track its aimpoint and accumulate dwell.</div>
-        </div>
+              <div class="btnrow mt-md">
+                <button id="btnEngage" class="btn">Engage</button>
+                <button id="btnPause" class="btn secondary">Pause</button>
+                <button id="btnReset" class="btn secondary">Reset</button>
+              </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="strip mt-md">
+                <span class="chip" id="chipPolicy">POLICY:AUTO</span>
+                <span class="chip" id="chipTracks">TRACKS:0</span>
+                <span class="chip" id="chipBeam">BEAM:OFF</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)">VIEW:DEFAULT</span>
+              </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>
-          </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="mt-md">
+                <div class="row"><label>Active dwell progress (selected)</label><small class="mini"
+                    id="dwellText">—</small>
+                </div>
+                <div class="bar">
+                  <div id="dwellBar"></div>
+                </div>
+              </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="hint mt-md">Manual targeting: choose “Manual” in Engagement Policy, then
+                click a target in the video. The “beam” will track its aimpoint and accumulate dwell.</div>
+            </div>
 
-          <div class="mt-md">
-            <label>Selected target for curve</label>
-            <select id="tradeTarget"></select>
-          </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="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 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 class="row mt-md">
-            <label>Show P(kill)</label>
-            <select id="showPk">
-              <option value="on">On</option>
-              <option value="off">Off</option>
-            </select>
-          </div>
+        <!-- ===== 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="btnrow">
-            <button class="btn secondary" id="btnReplot">Replot</button>
-            <button class="btn secondary" id="btnSnap">Snapshot (log)</button>
-          </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="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>
+              <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>
-    <div>Demo mode · Unclassified visuals · Integrate your APIs where marked</div>
-    <div class="mono" id="telemetry">HEL=60kW · VIS=16km · Cn²=5/10 · AO=7/10 · DET=6Hz</div>
-  </footer>
+    <footer>
+      <div>Demo mode · Unclassified visuals · Integrate your APIs where marked</div>
+      <div class="mono" id="telemetry">HEL=60kW · VIS=16km · Cn²=5/10 · AO=7/10 · DET=6Hz</div>
+    </footer>
 
-  <!-- Hidden video used only for first-frame capture -->
-  <video id="videoHidden" playsinline muted style="display:none"></video>
+    <!-- Hidden video used only for first-frame capture -->
+    <video id="videoHidden" playsinline muted style="display:none"></video>
   </div>
 
   <script>

LaserPerception/LaserPerception.js

@@ -151,15 +151,7 @@
     const trackCount = $("#trackCount");
     const frameTrackList = $("#frameTrackList");
     // Removed old summary references
-    const summaryTable = $("#summaryTable");
-    const mMaxP = $("#mMaxP");
-    const mReqP = $("#mReqP");
-    const mMargin = $("#mMargin");
-    const mPlan = $("#mPlan");
-    const mMaxPSub = $("#mMaxPSub");
-    const mReqPSub = $("#mReqPSub");
-    const mMarginSub = $("#mMarginSub");
-    const mPlanSub = $("#mPlanSub");
+
 
     const videoHidden = $("#videoHidden");
 
@@ -398,7 +390,11 @@
             $$(".tab").forEach(t => t.classList.remove("active"));
             $(`#tab-${tab}`).classList.add("active");
             if (tab === "trade") renderTrade();
-            if (tab === "engage") resizeOverlays();
+            if (tab === "engage") {
+                resizeOverlays();
+                renderRadar();
+                renderTrackCards();
+            }
         });
     });
 
@@ -486,8 +482,8 @@
         clearCanvas(engageOverlay);
         renderRadar();
 
-        renderObjectList();
-        renderSummary();
+        renderFrameTrackList();
+        // renderSummary();
         renderFeatures(null);
         renderTrade();
 
@@ -1948,7 +1944,7 @@
             moveCursorToRect(btnReason.getBoundingClientRect());
             setTimeout(() => moveCursorToRect(frameCanvas.getBoundingClientRect()), 260);
             setTimeout(() => moveCursorToRect(objList.getBoundingClientRect()), 560);
-            setTimeout(() => moveCursorToRect(summaryTable.getBoundingClientRect()), 880);
+            // setTimeout(() => moveCursorToRect(summaryTable.getBoundingClientRect()), 880);
         }
 
         try {
@@ -2068,7 +2064,7 @@
     btnRecompute.addEventListener("click", () => {
         if (!state.hasReasoned) return;
         recomputeHEL();
-        renderSummary();
+        // renderSummary();
         renderFrameOverlay();
         renderTrade();
         log("Recomputed HEL metrics using current knobs (no new detection).", "t");
@@ -2083,9 +2079,9 @@
         btnReason.style.opacity = "1";
         btnReason.style.cursor = "pointer";
         btnCancelReason.style.display = "none";  // Hide Cancel button
-        renderObjectList();
+        renderFrameTrackList();
         renderFrameOverlay();
-        renderSummary();
+        // renderSummary();
         renderFeatures(null);
         renderTrade();
         log("Cleared Tab 1 outputs.", "w");
@@ -2156,7 +2152,7 @@
         }
 
         summaryStamp.textContent = new Date().toLocaleTimeString();
-        renderSummary();
+        // renderSummary();
         refreshTradeTargets();
     }
 
@@ -2276,39 +2272,7 @@
         }
     }
 
-    function renderSummary() {
-        const tbody = summaryTable.querySelector("tbody");
-        tbody.innerHTML = "";
-        if (!state.detections.length) {
-            tbody.innerHTML = `<tr><td class="k">—</td><td colspan="7" class="mini">No outputs yet. Click <b>Reason</b>.</td></tr>`;
-            mMaxP.textContent = "—";
-            mReqP.textContent = "—";
-            mMargin.textContent = "—";
-            mPlan.textContent = "—";
-            return;
-        }
-
-        state.detections.forEach(d => {
-            const tr = document.createElement("tr");
-            const range = d.baseRange_m ?? 0;
-            const reqP = d.reqP_kW ?? 0;
-            const maxP = d.maxP_kW ?? 0;
-            const dwell = d.baseDwell_s ?? 0;
-            const p = d.pkill ?? 0;
-
-            tr.innerHTML = `
-          <td class="k">${d.id}</td>
-          <td>${escapeHtml(d.label)}</td>
-          <td class="k">${Math.round(range)}</td>
-          <td class="k">${escapeHtml(d.aim?.label || "center")}</td>
-          <td class="k">${reqP.toFixed(1)} kW</td>
-          <td class="k">${maxP.toFixed(1)} kW</td>
-          <td class="k">${dwell.toFixed(1)} s</td>
-          <td class="k">${Math.round(p * 100)}%</td>
-        `;
-            tbody.appendChild(tr);
-        });
-    }
+    // renderSummary removed
 
     function escapeHtml(s) {
         return s.replace(/[&<>"']/g, m => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" }[m]));
@@ -2373,10 +2337,8 @@
                 .sort((a, b) => (a.d.bbox.w * a.d.bbox.h) - (b.d.bbox.w * b.d.bbox.h))[0];
 
             if (hit) {
-                state.selectedId = hit.d.id;
-                renderObjectList();
+                selectObject(hit.d.id);
                 renderFeatures(hit.d);
-                renderFrameOverlay();
                 renderTrade();
             }
         };