feat: click-to-select tracks on video overlay

Add click handler on engage overlay canvas for selecting tracked objects
directly in the video. Hit-tests against track bboxes with smallest-area
priority for overlapping objects, dispatches track-selected event.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

frontend/js/core/video.js

@@ -212,6 +212,7 @@ APP.core.video.resizeOverlays = function () {
         const h = videoEngage.videoHeight || state.frame.h;
         engageOverlay.width = w;
         engageOverlay.height = h;
+        engageOverlay.style.pointerEvents = "auto";
     }
 
     if (frameOverlay) {

frontend/js/main.js

@@ -12,7 +12,7 @@ document.addEventListener("DOMContentLoaded", () => {
     const { load: loadDemo, getFrameData: getDemoFrameData, enable: enableDemo } = APP.core.demo;
 
     // UI Renderers
-    const { renderFrameOverlay, renderEngageOverlay } = APP.ui.overlays;
+    const { renderFrameOverlay, renderEngageOverlay, initClickHandler } = APP.ui.overlays;
     const { renderFrameTrackList } = APP.ui.cards;
     const { tickAgentCursor, moveCursorToRect } = APP.ui.cursor;
     const { matchAndUpdateTracks, predictTracks } = APP.core.tracker;
@@ -60,6 +60,9 @@ document.addEventListener("DOMContentLoaded", () => {
         syncKnobDisplays();
         setHfStatus("idle");
 
+        // Enable click-to-select on engage overlay
+        initClickHandler();
+
         // Start main loop
         requestAnimationFrame(loop);
 

frontend/js/ui/overlays.js

@@ -39,6 +39,45 @@ APP.ui.overlays.renderFrameOverlay = function () {
     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)
+        let best = null;
+        let bestArea = Infinity;
+
+        for (const t of tracks) {
+            const b = t.bbox;
+            if (!b) continue;
+            if (nx >= b.x && nx <= b.x + b.w && ny >= b.y && ny <= b.y + b.h) {
+                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;
     const { $ } = APP.core.utils;