Redesign track cards with inline features, remove separate features panel, clean up overlays

frontend/index.html

@@ -158,38 +158,14 @@
 
 
 
-            <div class="panel panel-features">
-              <h3>
-                <span>Selected Target · Features</span>
-                <span class="rightnote" id="selId">—</span>
-              </h3>
-              <table class="table" id="featureTable">
-                <thead>
-                  <tr>
-                    <th style="width:42%">Feature</th>
-                    <th>Value</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  <tr>
-                    <td class="k">—</td>
-                    <td class="mini">No target selected</td>
-                  </tr>
-                </tbody>
-              </table>
-              <div class="hint mt-sm">You can replace feature generation via <span
-                  class="kbd">externalFeatures()</span>. The UI will render whatever 10–12 key-value pairs you return.
-              </div>
-            </div>
-
-            <div class="panel panel-summary" style="display:flex; flex-direction:column; min-height: 0;">
+            <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:8px;">
+              <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(--text-dim); text-align:center; margin-top:20px;">
+                <div style="font-style:italic; color:var(--faint); text-align:center; margin-top:20px; font-size:12px;">
                   No objects tracked.
                 </div>
               </div>

frontend/js/core/tracker.js

@@ -112,7 +112,7 @@ APP.core.tracker.matchAndUpdateTracks = function (dets, dtSec) {
             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.0025) continue;
+            if (a < (w * h) * 0.0005) continue;
 
             const newId = `T${String(state.tracker.nextId++).padStart(2, "0")}`;
             const ap = defaultAimpoint(detObjs[i].label);
@@ -239,6 +239,11 @@ APP.core.tracker.syncWithBackend = async function (frameIdx) {
         state.tracker.tracks = newTracks;
         state.detections = newTracks; // Keep synced
 
+        // Re-render track cards (same renderer as Tab 1)
+        if (APP.ui.cards && APP.ui.cards.renderFrameTrackList) {
+            APP.ui.cards.renderFrameTrackList();
+        }
+
     } catch (e) {
         console.warn("Track sync failed", e);
     }

frontend/js/core/video.js

@@ -187,7 +187,6 @@ APP.core.video.unloadVideo = async function (options = {}) {
     // Re-render UI components
     if (APP.ui.radar.renderFrameRadar) APP.ui.radar.renderFrameRadar();
     if (APP.ui.cards.renderFrameTrackList) APP.ui.cards.renderFrameTrackList();
-    if (APP.ui.features.renderFeatures) APP.ui.features.renderFeatures(null);
     if (APP.ui.trade.renderTrade) APP.ui.trade.renderTrade();
 
     setStatus("warn", "STANDBY · No video loaded");

frontend/js/main.js

@@ -14,11 +14,9 @@ document.addEventListener("DOMContentLoaded", () => {
     // UI Renderers
     const { renderFrameOverlay, renderEngageOverlay } = APP.ui.overlays;
     const { renderFrameTrackList } = APP.ui.cards;
-    const { renderFeatures } = APP.ui.features;
     const { tickAgentCursor, moveCursorToRect } = APP.ui.cursor;
     const { matchAndUpdateTracks, predictTracks } = APP.core.tracker;
     const { defaultAimpoint } = APP.core.physics;
-    const { normBBox } = APP.core.utils;
 
     // DOM Elements
     const videoEngage = $("#videoEngage");
@@ -155,7 +153,6 @@ document.addEventListener("DOMContentLoaded", () => {
                 state.selectedId = null;
                 renderFrameTrackList();
                 renderFrameOverlay();
-                renderFeatures(null);
 
                 log("Detections cleared.", "t");
             });
@@ -213,14 +210,12 @@ document.addEventListener("DOMContentLoaded", () => {
 
 
 
-    // Track selection event
+    // 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();
-        const det = state.detections.find(d => d.id === state.selectedId);
-        renderFeatures(det);
     });
 
     // Cursor mode toggle
@@ -333,8 +328,6 @@ document.addEventListener("DOMContentLoaded", () => {
         state.selectedId = null;
         renderFrameTrackList();
         renderFrameOverlay();
-        renderFeatures(null);
-
 
         setStatus("warn", "REASONING · Running perception pipeline");
 
@@ -574,7 +567,6 @@ document.addEventListener("DOMContentLoaded", () => {
         state.selectedId = state.detections[0]?.id || null;
 
         renderFrameTrackList();
-        renderFeatures(state.detections[0] || null);
         renderFrameOverlay();
 
         log(`Detected ${state.detections.length} objects in first frame.`, "g");

frontend/js/ui/cards.js

@@ -4,28 +4,29 @@ APP.ui.cards.renderFrameTrackList = function () {
     const { state } = APP.core;
     const { $ } = APP.core.utils;
     const frameTrackList = $("#frameTrackList");
-    const trackCount = $("#trackCount"); // Correct ID
+    const trackList = $("#trackList");       // Tab 2 (Engage) uses the same card logic
+    const trackCount = $("#trackCount");
 
-    if (!frameTrackList) return;
-    frameTrackList.innerHTML = "";
+    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 => {
-        // LEGACY mode: mission_relevant is null -> show all
         if (d.mission_relevant === null || d.mission_relevant === undefined) return true;
-        // MISSION mode: only show relevant
         return d.mission_relevant === true;
     });
 
     if (trackCount) trackCount.textContent = dets.length;
 
     if (dets.length === 0) {
-        frameTrackList.innerHTML = '<div style="font-style:italic; color:var(--text-dim); text-align:center; margin-top:20px;">No objects tracked.</div>';
+        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;
     }
 
-    // Deterministic sort: ASSESSED first (by threat score), then UNASSESSED, then STALE
-    // Within each group, sort by threat_level_score descending, then by confidence
+    // Sort: ASSESSED first (by threat score), then UNASSESSED, then STALE
     const statusOrder = { "ASSESSED": 0, "UNASSESSED": 1, "STALE": 2 };
     const sorted = [...dets].sort((a, b) => {
         const statusA = statusOrder[a.assessment_status] ?? 1;
@@ -39,16 +40,17 @@ APP.ui.cards.renderFrameTrackList = function () {
 
     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 (Depth)`;
+            rangeStr = `${Math.round(det.depth_est_m)}m`;
         } else if (det.gpt_distance_m) {
-            rangeStr = `~${det.gpt_distance_m}m (est.)`;
+            rangeStr = `~${det.gpt_distance_m}m`;
         } else if (det.baseRange_m) {
-            rangeStr = `${Math.round(det.baseRange_m)}m (Area)`;
+            rangeStr = `${Math.round(det.baseRange_m)}m`;
         }
 
         if (det.gpt_direction) {
@@ -56,8 +58,7 @@ APP.ui.cards.renderFrameTrackList = function () {
         }
 
         const card = document.createElement("div");
-        card.className = "track-card";
-        if (state.selectedId === id) card.classList.add("active");
+        card.className = "track-card" + (isActive ? " active" : "");
         card.id = `card-${id}`;
 
         card.onclick = () => {
@@ -65,11 +66,7 @@ APP.ui.cards.renderFrameTrackList = function () {
             document.dispatchEvent(ev);
         };
 
-        const desc = det.gpt_description
-            ? `<div class="track-card-body"><span class="gpt-text">${det.gpt_description}</span></div>`
-            : "";
-
-        // Assessment status badge (INV-6: UNASSESSED distinct from score 0)
+        // Assessment status badge
         let statusBadge = "";
         const assessStatus = det.assessment_status || "UNASSESSED";
         if (assessStatus === "UNASSESSED") {
@@ -80,19 +77,46 @@ APP.ui.cards.renderFrameTrackList = function () {
             statusBadge = `<span class="badgemini" style="background:${det.threat_level_score >= 8 ? '#ff4d4d' : '#ff9f43'}; color:white">T-${det.threat_level_score}</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">
+                <div style="display:flex; gap:4px; align-items:center">
                     ${statusBadge}
-                    <span class="badgemini">${(det.score * 100).toFixed(0)}%</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">
-               RANGE: ${rangeStr} | BEARING: ${bearingStr}
+               RNG ${rangeStr} · BRG ${bearingStr}
             </div>
             ${desc}
+            ${featuresHtml}
         `;
-        frameTrackList.appendChild(card);
+        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/features.js

@@ -1,36 +1 @@
 APP.ui.features = {};
-
-APP.ui.features.renderFeatures = function (det) {
-    const { $ } = APP.core.utils;
-    const featureTable = $("#featureTable");
-    const selId = $("#selId"); // Correct ID
-
-    if (!featureTable || !selId) return;
-
-    selId.textContent = det ? det.id : "—";
-    const tbody = featureTable.querySelector("tbody");
-    tbody.innerHTML = "";
-
-    if (!det) {
-        tbody.innerHTML = `<tr><td class="k">—</td><td class="mini">No target selected</td></tr>`;
-        return;
-    }
-
-    const feats = det.features || {};
-    const keys = Object.keys(feats);
-    const show = keys.slice(0, 12);
-
-    show.forEach(k => {
-        const tr = document.createElement("tr");
-        tr.innerHTML = `<td class="k">${k}</td><td>${String(feats[k])}</td>`;
-        tbody.appendChild(tr);
-    });
-
-    if (show.length < 10) {
-        for (let i = show.length; i < 10; i++) {
-            const tr = document.createElement("tr");
-            tr.innerHTML = `<td class="k">—</td><td class="mini">awaiting additional expert outputs</td>`;
-            tbody.appendChild(tr);
-        }
-    }
-};

frontend/js/ui/overlays.js

@@ -2,70 +2,24 @@ APP.ui.overlays = {};
 
 APP.ui.overlays.render = function (canvasId, trackSource) {
     const { state } = APP.core;
-    const { now, $ } = APP.core.utils;
-    const { defaultAimpoint } = APP.core.physics;
+    const { $ } = APP.core.utils;
 
     const canvas = $(`#${canvasId}`);
     if (!canvas) return;
 
-    // Avoid double-drawing: If we are in Engage view (engageOverlay) and viewing the processed feed
-    // (which has baked-in boxes from backend), we should NOT draw frontend predicted boxes.
-    // Except maybe selected highlight? For now, hide all to avoid clutter/mismatch.
+    // If viewing the processed feed (which has baked-in boxes from backend),
+    // do not draw frontend predicted boxes to avoid clutter/mismatch.
     if (canvasId === "engageOverlay" && state.useProcessedFeed) {
         const ctx = canvas.getContext("2d");
         ctx.clearRect(0, 0, canvas.width, canvas.height);
         return;
     }
 
-    // Resize to match DOM if needed (handling HiDPI optionally, or just verify size)
-    const w = canvas.width, h = canvas.height;
     const ctx = canvas.getContext("2d");
-    ctx.clearRect(0, 0, w, h);
-
-    const source = trackSource || state.detections || [];
-    if (!source || !source.length) return;
-
-    // Helpers
-    function roundRect(ctx, x, y, w, h, r, fill, stroke) {
-        if (w < 2 * r) r = w / 2;
-        if (h < 2 * r) r = h / 2;
-        ctx.beginPath();
-        ctx.moveTo(x + r, y);
-        ctx.arcTo(x + w, y, x + w, y + h, r);
-        ctx.arcTo(x + w, y + h, x, y + h, r);
-        ctx.arcTo(x, y + h, x, y, r);
-        ctx.arcTo(x, y, x + w, y, r);
-        ctx.closePath();
-        if (fill) ctx.fill();
-        if (stroke) ctx.stroke();
-    }
-
-    function drawAimpoint(ctx, x, y, isSel) {
-        ctx.save();
-        ctx.strokeStyle = "rgba(239,68,68,.95)";
-        ctx.lineWidth = isSel ? 3 : 2;
-        ctx.beginPath();
-        ctx.arc(x, y, isSel ? 10 : 9, 0, Math.PI * 2);
-        ctx.stroke();
-
-        ctx.strokeStyle = "rgba(255,255,255,.70)";
-        ctx.lineWidth = 1.5;
-        ctx.beginPath();
-        ctx.moveTo(x - 14, y); ctx.lineTo(x - 4, y);
-        ctx.moveTo(x + 4, y); ctx.lineTo(x + 14, y);
-        ctx.moveTo(x, y - 14); ctx.lineTo(x, y - 4);
-        ctx.moveTo(x, y + 4); ctx.lineTo(x, y + 14);
-        ctx.stroke();
-
-        ctx.fillStyle = "rgba(239,68,68,.95)";
-        ctx.beginPath();
-        ctx.arc(x, y, 2.5, 0, Math.PI * 2);
-        ctx.fill();
-        ctx.restore();
-    }
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
 
     // Bounding boxes and labels are baked into the video by the backend.
-    // Frontend overlay drawing (aimpoints) disabled — backend boxes only.
+    // Frontend overlay drawing disabled — backend boxes only.
 };
 
 APP.ui.overlays.renderFrameOverlay = function () {
@@ -74,7 +28,6 @@ APP.ui.overlays.renderFrameOverlay = function () {
     const canvas = $("#frameOverlay");
     if (!canvas) return;
 
-    // Only show overlay for the selected detection
     if (state.selectedId) {
         const sel = (state.detections || []).filter(d => d.id === state.selectedId);
         if (sel.length) {
@@ -82,7 +35,6 @@ APP.ui.overlays.renderFrameOverlay = function () {
             return;
         }
     }
-    // Nothing selected — clear
     const ctx = canvas.getContext("2d");
     ctx.clearRect(0, 0, canvas.width, canvas.height);
 };
@@ -91,7 +43,7 @@ APP.ui.overlays.renderEngageOverlay = function () {
     const { state } = APP.core;
     const { $ } = APP.core.utils;
 
-    // User request: No overlays on first frame of video
+    // No overlays on first frame of video
     const video = $("#videoEngage");
     if (video && (video.currentTime < 0.25 || (video.paused && video.currentTime === 0))) {
         const canvas = $("#engageOverlay");

frontend/style.css

@@ -81,7 +81,18 @@ header {
     min-height: 0;
 }
 
-aside,
+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);
@@ -541,10 +552,10 @@ input[type="number"]:focus {
 .list {
     display: flex;
     flex-direction: column;
-    gap: 8px;
+    gap: 6px;
     min-height: 160px;
-    max-height: 320px;
-    overflow: auto;
+    max-height: none;
+    overflow-y: auto;
     padding-right: 4px;
 }
 
@@ -708,25 +719,21 @@ input[type="number"]:focus {
 .frame-grid {
     display: grid;
     grid-template-columns: 1.6fr 0.9fr;
-    grid-template-rows: auto auto auto;
+    grid-template-rows: auto auto;
     gap: 12px;
     min-height: 0;
 }
 
-/* Video panel on left, track cards on right */
+/* 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;
-}
-
-.frame-grid .panel-features {
-    grid-column: 2;
-    grid-row: 2;
+    grid-row: 1 / 3;
 }
 
 .intel {
@@ -894,22 +901,24 @@ input[type="number"]:focus {
 
 /* Track Cards */
 .track-card {
-    background: rgba(255, 255, 255, 0.03);
-    border: 1px solid var(--border-color);
-    border-radius: 4px;
-    padding: 8px;
-    margin-bottom: 8px;
+    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.2s;
+    transition: all 0.15s ease;
 }
 
 .track-card:hover {
-    background: rgba(255, 255, 255, 0.08);
+    background: rgba(255, 255, 255, 0.06);
+    border-color: rgba(255, 255, 255, .18);
 }
 
 .track-card.active {
-    border-color: var(--accent);
-    background: rgba(34, 211, 238, 0.1);
+    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 {
@@ -917,24 +926,68 @@ input[type="number"]:focus {
     justify-content: space-between;
     align-items: center;
     font-weight: 600;
-    margin-bottom: 4px;
-    font-size: 13px;
-    color: var(--text-color);
+    margin-bottom: 6px;
+    font-size: 12px;
+    color: rgba(255, 255, 255, .92);
+    letter-spacing: .02em;
 }
 
 .track-card-meta {
-    font-size: 11px;
-    color: var(--text-dim);
-    margin-bottom: 4px;
+    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.4;
-    color: #ccc;
-    background: rgba(0, 0, 0, 0.2);
-    padding: 6px;
-    border-radius: 4px;
+    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 {
@@ -947,7 +1000,7 @@ input[type="number"]:focus {
 }
 
 .gpt-text {
-    color: #e0e0e0;
+    color: rgba(255, 255, 255, .78);
 }
 
 /* =========================================
@@ -955,9 +1008,9 @@ input[type="number"]:focus {
    ========================================= */
 
 .panel-chat {
-    grid-column: 1;
+    grid-column: 1 / -1;
     grid-row: 3;
-    max-height: 280px;
+    max-height: 260px;
     display: flex;
     flex-direction: column;
 }