feat: Continuous object tracking, speed estimation, and overlay syncing

LaserPerception/LaserPerception.css

@@ -1,927 +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: 540px 1fr;
-    /* Fixed sidebar width */
-    gap: 12px;
-    padding: 12px;
-    min-height: 0;
-}
-
-aside,
-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;
-}
-
-/* Always show the engage video feed */
-#videoEngage {
-    display: block;
-    opacity: 1;
-}
-
-.viewbox .overlay {
-    position: absolute;
-    inset: 0;
-    pointer-events: none;
-}
-
-/* Make engage overlay visible as main display (not just overlay) */
-#engageOverlay {
-    display: none;
-    pointer-events: none;
-}
-
-.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: 8px;
-    min-height: 160px;
-    max-height: 320px;
-    overflow: 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 .9fr;
-    grid-template-rows: auto auto 1fr;
-    gap: 12px;
-    min-height: 0;
-}
-
-.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.03);
-    border: 1px solid var(--border-color);
-    border-radius: 4px;
-    padding: 8px;
-    margin-bottom: 8px;
-    cursor: pointer;
-    transition: all 0.2s;
-}
-
-.track-card:hover {
-    background: rgba(255, 255, 255, 0.08);
-}
-
-.track-card.active {
-    border-color: var(--accent);
-    background: rgba(34, 211, 238, 0.1);
-}
-
-.track-card-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    font-weight: 600;
-    margin-bottom: 4px;
-    font-size: 13px;
-    color: var(--text-color);
-}
-
-.track-card-meta {
-    font-size: 11px;
-    color: var(--text-dim);
-    margin-bottom: 4px;
-}
-
-.track-card-body {
-    font-size: 11px;
-    line-height: 1.4;
-    color: #ccc;
-    background: rgba(0, 0, 0, 0.2);
-    padding: 6px;
-    border-radius: 4px;
-}
-
-.gpt-badge {
-    color: gold;
-    font-size: 10px;
-    border: 1px solid gold;
-    border-radius: 3px;
-    padding: 1px 4px;
-    margin-left: 6px;
-}
-
-.gpt-text {
-    color: #e0e0e0;
-}

LaserPerception/LaserPerception.html

@@ -1,505 +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="LaserPerception.css">
-  <title>HEL Perception & Engagement Reasoner (Weapon-Grade Demo)</title>
-</head>
-
-<body>
-  <div id="app">
-    <header>
-      <div class="brand">
-        <div class="logo" aria-hidden="true"></div>
-        <div>
-          <h1>HEL Perception & Engagement Reasoner</h1>
-          <div class="sub">Video → detection → expert features → aimpoint + Intensity@Target → HEL feasibility →
-            closed-loop tracking & dwell control</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">Reason</span>
-          <span>Frame-1 inference</span>
-        </div>
-        <div class="pill">
-          <span class="kbd">Engage</span>
-          <span>Closed-loop track + dwell</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 engagement.</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="hf_yolov8" 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="sam3" data-kind="segmentation">Segmentor</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">
-              <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">
-              <span style="color: var(--accent-light);">Enable GPT Reasoning</span>
-            </label>
-          </div>
-
-          <div class="hint mt-sm" id="detectorHint">
-            If the browser model cannot load (offline), plug in your own detector in <span
-              class="kbd">externalDetect()</span>.
-          </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">
-            <div>
-              <label>Targeting</label>
-              <select id="policyMode">
-                <option value="auto">Auto: highest lethality margin</option>
-                <option value="manual">Manual: click target</option>
-              </select>
-            </div>
-            <div>
-              <label>Assess window (s)</label>
-              <input id="assessWindow" type="range" min="0.3" max="3.0" step="0.1" value="1.0" />
-              <div class="row"><small class="mini"><span id="assessWindowVal">1.0</span> s</small><small
-                  class="mini">post-dwell</small></div>
-            </div>
-          </div>
-
-          <div class="row">
-            <label>Show agent cursor</label>
-            <select id="cursorMode">
-              <option value="on">On</option>
-              <option value="off">Off</option>
-            </select>
-          </div>
-
-          <div class="hint">The UI is wired for your APIs. Replace <span class="kbd">externalDetect()</span>, <span
-              class="kbd">externalFeatures()</span>, and <span class="kbd">externalTrack()</span> when ready.</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 · 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 ===== -->
-        <section class="tab active" id="tab-frame">
-          <div class="frame-grid">
-            <div class="panel panel-monitor">
-              <h3>
-                <span>First Frame · Detection + Aimpoints</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 · Aimpoint · Required Dwell</div>
-                <div class="empty" id="frameEmpty">
-                  <div class="big">Upload a video to begin</div>
-                  <div class="small">This demo performs first-frame perception and engagement reasoning. Then it replays
-                    the same video with closed-loop tracking and dynamic dwell updates.</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">Reason</button>
-                <button id="btnCancelReason" class="btn danger" style="display: none;">Cancel</button>
-                <button id="btnRecompute" class="btn secondary">Recompute HEL</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)">VIEW:DEFAULT</span>
-              </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>
-                <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;">
-              <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;">
-                <!-- Cards injected here -->
-                <div style="font-style:italic; color:var(--text-dim); text-align:center; margin-top:20px;">
-                  No objects tracked.
-                </div>
-              </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>
-
-              <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="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="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="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>
-              </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>
-      <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>
-  </div>
-
-  <script>
-    window.API_CONFIG = {
-      BACKEND_BASE: "https://biaslab2025-perception.hf.space"
-    };
-  </script>
-  <script src="LaserPerception.js"></script>
-
-</body>
-
-</html>

app.py

@@ -280,6 +280,7 @@ async def detect_endpoint(
             detector_name=detector_name,
             depth_estimator_name=active_depth,
             depth_scale=25.0,
+            enable_gpt=enable_gpt,
         )
     except ValueError as exc:
         logging.exception("Video processing failed.")
@@ -396,6 +397,7 @@ async def detect_async_endpoint(
         depth_scale=float(depth_scale),
         depth_output_path=str(depth_output_path),
         first_frame_depth_path=str(first_frame_depth_path),
+        enable_gpt=enable_gpt,
     )
     get_job_storage().create(job)
     asyncio.create_task(process_video_async(job_id))

frontend/index.html

@@ -10,7 +10,491 @@
 
 <body>
   <div id="app">
-    <!-- ... body content ... -->
+    <header>
+      <div class="brand">
+        <div class="logo" aria-hidden="true"></div>
+        <div>
+          <h1>HEL Perception & Engagement Reasoner</h1>
+          <div class="sub">Video → detection → expert features → aimpoint + Intensity@Target → HEL feasibility →
+            closed-loop tracking & dwell control</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">Reason</span>
+          <span>Frame-1 inference</span>
+        </div>
+        <div class="pill">
+          <span class="kbd">Engage</span>
+          <span>Closed-loop track + dwell</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 engagement.</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="hf_yolov8" 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="sam3" data-kind="segmentation">Segmentor</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">
+              <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">
+              <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 class="hint mt-sm" id="detectorHint">
+            If the browser model cannot load (offline), plug in your own detector in <span
+              class="kbd">externalDetect()</span>.
+          </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">
+            <div>
+              <label>Targeting</label>
+              <select id="policyMode">
+                <option value="auto">Auto: highest lethality margin</option>
+                <option value="manual">Manual: click target</option>
+              </select>
+            </div>
+            <div>
+              <label>Assess window (s)</label>
+              <input id="assessWindow" type="range" min="0.3" max="3.0" step="0.1" value="1.0" />
+              <div class="row"><small class="mini"><span id="assessWindowVal">1.0</span> s</small><small
+                  class="mini">post-dwell</small></div>
+            </div>
+          </div>
+
+          <div class="row">
+            <label>Show agent cursor</label>
+            <select id="cursorMode">
+              <option value="on">On</option>
+              <option value="off">Off</option>
+            </select>
+          </div>
+
+          <div class="hint">The UI is wired for your APIs. Replace <span class="kbd">externalDetect()</span>, <span
+              class="kbd">externalFeatures()</span>, and <span class="kbd">externalTrack()</span> when ready.</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 · 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 ===== -->
+        <section class="tab active" id="tab-frame">
+          <div class="frame-grid">
+            <div class="panel panel-monitor">
+              <h3>
+                <span>First Frame · Detection + Aimpoints</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 · Aimpoint · Required Dwell</div>
+                <div class="empty" id="frameEmpty">
+                  <div class="big">Upload a video to begin</div>
+                  <div class="small">This demo performs first-frame perception and engagement reasoning. Then it replays
+                    the same video with closed-loop tracking and dynamic dwell updates.</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">Reason</button>
+                <button id="btnCancelReason" class="btn danger" style="display: none;">Cancel</button>
+                <button id="btnRecompute" class="btn secondary">Recompute HEL</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)">VIEW:DEFAULT</span>
+              </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>
+                <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;">
+              <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;">
+                <!-- Cards injected here -->
+                <div style="font-style:italic; color:var(--text-dim); text-align:center; margin-top:20px;">
+                  No objects tracked.
+                </div>
+              </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>
+
+              <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="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="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="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>
+              </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>
+      <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>
   </div>
 
   <script>
@@ -18,7 +502,24 @@
       BACKEND_BASE: "https://biaslab2025-perception.hf.space"
     };
   </script>
-  <script type="module" src="./js/main.js"></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/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="./js/main.js"></script>
 
 </body>
 

frontend/js/api/client.js

@@ -1,17 +1,13 @@
-import { state } from '../core/state.js';
-import { CONFIG } from '../core/config.js';
-import { log, setHfStatus } from '../ui/logging.js';
+// API Client Module - Backend communication
+APP.api.client = {};
 
-export async function hfDetectAsync(formData) {
-    if (!state.hf.baseUrl) return; // Should handle error or fallback
+APP.api.client.hfDetectAsync = async function (formData) {
+    const { state } = APP.core;
+    if (!state.hf.baseUrl) return;
 
-    // Default to state values if not provided in formData
-    // Assuming formData is constructed in UI layer and passed here
-
-    // Wrapper for the POST /detect/async call
     const resp = await fetch(`${state.hf.baseUrl}/detect/async`, {
         method: "POST",
-        body: formData // already contains video, mode, queries, etc.
+        body: formData
     });
 
     if (!resp.ok) {
@@ -20,13 +16,39 @@ export async function hfDetectAsync(formData) {
     }
 
     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;
-}
+};
 
-export async function checkJobStatus(jobId) {
+APP.api.client.checkJobStatus = async function (jobId) {
+    const { state } = APP.core;
     if (!state.hf.baseUrl) return { status: "error" };
 
-    // Note: Using statusUrl from state if available, or constructing it
     const url = state.hf.statusUrl || `${state.hf.baseUrl}/detect/job/${jobId}`;
     const resp = await fetch(url, { cache: "no-store" });
 
@@ -36,32 +58,181 @@ export async function checkJobStatus(jobId) {
     }
 
     return await resp.json();
-}
+};
+
+APP.api.client.cancelBackendJob = async function (jobId, reason) {
+    const { state } = APP.core;
+    const { log } = APP.ui.logging;
 
-export async function cancelBackendJob(jobId) {
     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" };
     }
 
-    const resp = await fetch(`${state.hf.baseUrl}/detect/job/${jobId}`, {
-        method: "DELETE"
+    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 };
+    }
+};
+
+APP.api.client.pollAsyncJob = async function () {
+    const { state } = APP.core;
+    const { log, setHfStatus } = APP.ui.logging;
+    const { fetchProcessedVideo, fetchDepthVideo, fetchDepthFirstFrame } = APP.core.video;
+
+    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...");
+
+                    try {
+                        await fetchProcessedVideo();
+                        await fetchDepthVideo();
+                        await fetchDepthFirstFrame();
+
+                        clearInterval(state.hf.asyncPollInterval);
+                        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})`);
+                }
+
+                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;
 
-    if (resp.ok) return await resp.json();
-    if (resp.status === 404) return { status: "not_found" };
-    throw new Error("Cancel failed");
-}
+    const proxyBase = (CONFIG.PROXY_URL || "").trim();
 
-export async function reasonTrack(trackPayload) {
-    // trackPayload: { frame: "base64...", boxes: [[x,y,x,y],...] }
-    const resp = await fetch(`${state.hf.baseUrl}/reason/track`, {
+    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",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify(trackPayload),
-        cache: "no-store"
+        body: form
     });
 
-    if (!resp.ok) throw new Error("Reasoning failed");
+    if (!resp.ok) {
+        throw new Error(`Frame detection failed: ${resp.statusText}`);
+    }
+
     return await resp.json();
-}
+};

frontend/js/core/config.js

@@ -1,4 +1,4 @@
-export const CONFIG = {
+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 || "",

frontend/js/core/hel.js

@@ -0,0 +1,245 @@
+// 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 = `HEL=${helPower.value}kW · VIS=${atmVis.value}km · Cn²=${atmCn2.value}/10 · AO=${aoQ.value}/10 · DET=${detHz.value}Hz`;
+    }
+};

frontend/js/core/physics.js

@@ -1,7 +1,6 @@
-import { $ } from './utils.js';
+APP.core.physics = {};
 
-// ========= Aimpoint rules =========
-export function defaultAimpoint(label) {
+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" };
@@ -16,32 +15,31 @@ export function defaultAimpoint(label) {
         return { relx: 0.55, rely: 0.62, label: "engine_block" };
     }
     return { relx: 0.50, rely: 0.55, label: "center_mass" };
-}
+};
 
-export function aimpointByLabel(label) {
+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");
 
-// ========= Core Physics & Logic Adapters =========
-export function getKnobs() {
-    const helPower = $("#hel-power");
-    const helAperture = $("#hel-aperture");
-    const helM2 = $("#hel-m2");
-    const helJitter = $("#hel-jitter");
-    const helDuty = $("#hel-duty");
-    const helMode = $("#hel-mode");
-    const atmVis = $("#atm-vis");
-    const atmCn2 = $("#atm-cn2");
-    const seaSpray = $("#sea-spray");
-    const aoQ = $("#ao-q");
-    const rangeBase = $("#range-base");
-
-    // Guard against missing UI elements if loaded before DOM
     if (!helPower) return {};
 
     const PkW = +helPower.value;
@@ -49,23 +47,11 @@ export function getKnobs() {
     const M2 = +helM2.value;
     const jitter_urad = +helJitter.value;
     const duty = (+helDuty.value) / 100;
-    const mode = helMode.value;
+    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 };
-}
-
-// ========= Safe Stubs for Client-Side Visualization =========
-export function maxPowerAtTarget(range_m) {
-    // Placeholder: return 0 or simple fallback
-    return { Ptar: 0, Pout: 0, trans: 0, turb: 0, beam: 0 };
-}
-
-export function requiredPowerFromFeatures(feat) { return 10; } // Safe default
-
-export function requiredDwell(range_m, reqP, maxP, baseDwell) { return 1.0; } // Safe default
-
-export function pkillFromMargin(margin_kW, dwell_s, reqDwell_s) { return 0; }
+};

frontend/js/core/state.js

@@ -1,6 +1,4 @@
-import { CONFIG } from './config.js';
-
-export const state = {
+APP.core.state = {
     videoUrl: null,
     videoFile: null,
     videoLoaded: false,
@@ -11,7 +9,8 @@ export const state = {
     isReasoning: false,         // Flag to prevent concurrent Reason executions
 
     hf: {
-        baseUrl: CONFIG.BACKEND_BASE,
+        // 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
         asyncPollInterval: null,    // Polling timer handle
@@ -30,7 +29,9 @@ export const state = {
         depthFirstFrameBlob: null,  // Depth first frame blob
         summary: null,
         busy: false,
-        lastError: null
+        lastError: null,
+        missionId: null,
+        plan: null
     },
 
     detector: {
@@ -71,6 +72,3 @@ export const state = {
         agentCursor: { x: 0.65, y: 0.28, vx: 0, vy: 0, visible: false, target: null, mode: "idle", t0: 0 }
     }
 };
-
-// Simple event bus for state changes if needed
-export const events = new EventTarget();

frontend/js/core/tracker.js

@@ -1,26 +1,29 @@
-import { state } from './state.js';
-import { CONFIG } from './config.js';
-import { normBBox, lerp, now, $ } from './utils.js';
-import { defaultAimpoint } from './physics.js';
-import { log } from '../ui/logging.js';
-
-const videoEngage = $("#videoEngage");
-const rangeBase = $("#range-base");
-
-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;
-}
-
-export function matchAndUpdateTracks(dets, dtSec) {
+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;
@@ -136,9 +139,12 @@ export function matchAndUpdateTracks(dets, dtSec) {
     // prune old tracks
     const tNow = now();
     state.tracker.tracks = tracks.filter(tr => (tNow - tr.lastSeen) < CONFIG.TRACK_PRUNE_MS || tr.killed);
-}
+};
 
-export function predictTracks(dtSec) {
+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;
@@ -151,4 +157,4 @@ export function predictTracks(dtSec) {
         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,15 +1,17 @@
-export const $ = (sel, root = document) => root.querySelector(sel);
-export const $$ = (sel, root = document) => Array.from(root.querySelectorAll(sel));
+APP.core.utils = {};
 
-export const clamp = (x, a, b) => Math.min(b, Math.max(a, x));
-export const lerp = (a, b, t) => a + (b - a) * t;
-export const now = () => performance.now();
+APP.core.utils.$ = (sel, root = document) => root.querySelector(sel);
+APP.core.utils.$$ = (sel, root = document) => Array.from(root.querySelectorAll(sel));
 
-export function escapeHtml(s) {
+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]));
-}
+};
 
-export function canvasToBlob(canvas, quality = 0.88) {
+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 => {
@@ -17,37 +19,37 @@ export function canvasToBlob(canvas, quality = 0.88) {
             resolve(blob);
         }, "image/jpeg", quality);
     });
-}
+};
 
-export function normBBox(bbox, w, h) {
+APP.core.utils.normBBox = function (bbox, w, h) {
     const [x, y, bw, bh] = bbox;
     return {
-        x: clamp(x, 0, w - 1),
-        y: clamp(y, 0, h - 1),
-        w: clamp(bw, 1, w),
-        h: clamp(bh, 1, h)
+        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)
     };
-}
+};
 
-export const loadedScripts = new Map();
+APP.core.utils.loadedScripts = new Map();
 
-export function loadScriptOnce(key, src) {
+APP.core.utils.loadScriptOnce = function (key, src) {
     return new Promise((resolve, reject) => {
-        if (loadedScripts.get(key) === "loaded") { resolve(); return; }
-        if (loadedScripts.get(key) === "loading") {
+        if (APP.core.utils.loadedScripts.get(key) === "loaded") { resolve(); return; }
+        if (APP.core.utils.loadedScripts.get(key) === "loading") {
             const iv = setInterval(() => {
-                if (loadedScripts.get(key) === "loaded") { clearInterval(iv); resolve(); }
-                if (loadedScripts.get(key) === "failed") { clearInterval(iv); reject(new Error("Script failed earlier")); }
+                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;
         }
 
-        loadedScripts.set(key, "loading");
+        APP.core.utils.loadedScripts.set(key, "loading");
         const s = document.createElement("script");
         s.src = src;
         s.async = true;
-        s.onload = () => { loadedScripts.set(key, "loaded"); resolve(); };
-        s.onerror = () => { loadedScripts.set(key, "failed"); reject(new Error(`Failed to load ${src}`)); };
+        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

@@ -0,0 +1,622 @@
+// 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.asyncStatus = "idle";
+    state.hf.firstFrameUrl = null;
+    state.hf.videoUrl = null;
+
+    setHfStatus("idle");
+    state.hasReasoned = 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.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");
+    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;
+    }
+
+    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";
+        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";
+    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

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

frontend/js/main.js

@@ -1,248 +1,662 @@
-import { state } from './core/state.js';
-import { CONFIG } from './core/config.js';
-import { $, now } from './core/utils.js';
-import { getKnobs } from './core/physics.js';
-import { matchAndUpdateTracks, predictTracks } from './core/tracker.js';
-import { hfDetectAsync, checkJobStatus, cancelBackendJob } from './api/client.js';
-
-// UI Renderers
-import { renderFrameRadar } from './ui/radar.js';
-import { renderFrameOverlay } from './ui/overlays.js';
-import { renderFrameTrackList } from './ui/cards.js';
-import { renderFeatures } from './ui/features.js';
-import { updateHeadlines } from './ui/trade.js';
-import { log, setStatus, setHfStatus } from './ui/logging.js';
-
-// DOM Elements
-const videoEngage = $("#videoEngage");
-const btnUpload = $("#btn-upload");
-const fileInput = $("#file-input");
-const btnReason = $("#btn-reason");
-const btnCancelReason = $("#btnCancelReason");
-const btnEngage = $("#btn-engage");
-const btnReset = $("#btn-reset");
-const btnPause = $("#btn-pause");
-// const btnClear = $("#btn-clear");
-const detectorSelect = $("#detector-select");
-const missionText = $("#mission-text");
-
-// Initialization
-function init() {
-    log("System initializing...", "t");
-
-    // Bind Events
-    setupFileUpload();
-    setupControls();
-
-    // Start Loop
-    requestAnimationFrame(loop);
-
-    log("System READY.", "g");
-}
-
-function setupFileUpload() {
-    btnUpload.addEventListener("click", () => fileInput.click());
-    fileInput.addEventListener("change", (e) => {
-        const file = e.target.files[0];
-        if (!file) return;
-
-        state.videoFile = file;
-        state.videoUrl = URL.createObjectURL(file);
-        state.videoLoaded = true;
+// 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;
+
+    // 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;
+    const { normBBox } = APP.core.utils;
+
+    // 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 btnIntelRefresh = $("#btnIntelRefresh");
+    const btnReplot = $("#btnReplot");
+    const btnSnap = $("#btnSnap");
+
+    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();
+        renderMissionContext();
+        setHfStatus("idle");
+
+        // Start main loop
+        requestAnimationFrame(loop);
+
+        log("System READY.", "g");
+    }
 
-        // Reset state
-        videoEngage.src = state.videoUrl;
-        videoEngage.load();
+    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 Reason for processed frame)";
+                if (engageNote) engageNote.textContent = "Ready for Engage";
+            } catch (err) {
+                log(`First frame capture failed: ${err.message}`, "e");
+            }
+
+            setStatus("warn", "READY · Video loaded (run Reason)");
+            log(`Video loaded: ${file.name}`, "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();
+                renderTrade();
+                log("HEL parameters recomputed.", "g");
+            });
+        }
+
+        // Clear button
+        if (btnClear) {
+            btnClear.addEventListener("click", () => {
+                state.detections = [];
+                state.selectedId = null;
+                renderFrameTrackList();
+                renderFrameOverlay();
+                renderFeatures(null);
+                renderTrade();
+                log("Detections cleared.", "t");
+            });
+        }
+
+        // Eject button
+        if (btnEject) {
+            btnEject.addEventListener("click", async () => {
+                await unloadVideo();
+            });
+        }
+
+        // Engage button
+        if (btnEngage) {
+            btnEngage.addEventListener("click", runEngage);
+        }
 
-        setStatus("warn", "READY · Video loaded (run Reason)");
-        log(`Video loaded: ${file.name}`, "g");
-    });
-}
+        // Pause button
+        if (btnPause) {
+            btnPause.addEventListener("click", () => {
+                if (videoEngage) videoEngage.pause();
+                state.tracker.running = false;
+                log("Engage paused.", "t");
+            });
+        }
 
-function setupControls() {
-    btnReason.addEventListener("click", async () => {
+        // 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();
+                renderFrameRadar();
+                renderLiveRadar();
+                log("Engage 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";
+                }
+            });
+        }
+
+        // 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);
+        });
+
+        // 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();
+                    renderTrade();
+                }
+            });
+        });
+
+        // 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 Reason 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 === "trade") {
+                    populateTradeTarget();
+                    renderTrade();
+                }
+                if (btn.dataset.tab === "engage") {
+                    resizeOverlays();
+                    renderLiveRadar();
+                }
+            });
+        });
+    }
+
+    async function runReason() {
         if (!state.videoLoaded) {
-            log("No video loaded.", "w");
+            log("No video loaded. Upload a video first.", "w");
+            setStatus("warn", "READY · Upload a video");
             return;
         }
+
         if (state.isReasoning) {
-            log("Reasoning in progress...", "w");
+            log("Reason already in progress. Please wait.", "w");
             return;
         }
 
+        // Lock the Reason process
         state.isReasoning = true;
-        btnReason.disabled = true;
-        btnCancelReason.style.display = "inline-block";
+        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();
+        renderFeatures(null);
+        renderTrade();
+
         setStatus("warn", "REASONING · 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 {
-            // 1. Prepare Request
-            const mode = detectorSelect.value; // e.g., "coco", "hf_yolov8"
-            const queries = missionText.value.trim();
+            const mode = detectorSelect ? detectorSelect.value : "hf_yolov8";
+            const queries = missionText ? missionText.value.trim() : "";
+            const enableGPT = $("#enableGPTToggle")?.checked || false;
+            const enableDepth = $("#enableDepthToggle")?.checked || false;
 
             const form = new FormData();
             form.append("video", state.videoFile);
-            form.append("mode", "object_detection"); // Simplified for now
+            form.append("mode", "object_detection");
             if (queries) form.append("queries", queries);
+            form.append("detector", mode);
+            form.append("enable_gpt", enableGPT ? "true" : "false");
+            form.append("enable_depth", enableDepth ? "true" : "false");
 
-            // Map detector selection to backend param
-            if (["hf_yolov8", "detr_resnet50", "grounding_dino", "drone_yolo"].includes(mode)) {
-                form.append("detector", mode);
-            }
-
-            form.append("enable_gpt", "true"); // Always on
-
-            // 2. Submit Async
             log(`Submitting job to ${state.hf.baseUrl}...`, "t");
+            setHfStatus("submitting job...");
+
             const data = await hfDetectAsync(form);
 
             state.hf.asyncJobId = data.job_id;
-            state.hf.videoUrl = `${state.hf.baseUrl}${data.video_url}`;
-            state.hf.firstFrameUrl = `${state.hf.baseUrl}${data.first_frame_url}`;
-
-            if (data.first_frame_detections) {
-                // Populate Tab 1 Detections
-                state.detections = data.first_frame_detections.map((d, i) => ({
-                    id: `T${String(i + 1).padStart(2, '0')}`,
-                    label: d.label,
-                    score: d.score,
-                    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: 100, h: 100 },
-                    // Mapping backend fields
-                    gpt_distance_m: d.gpt_distance_m,
-                    gpt_description: d.gpt_description,
-                    // Mock physics fields for now
-                    pkill: Math.random(),
-                    features: {}
-                }));
-
-                state.hasReasoned = true;
-                log(`Reason complete. ${state.detections.length} objects found.`, "g");
-                setStatus("good", "READY · Reason complete");
-
-                // Force UI Update
-                renderFrameTrackList();
-                renderFeatures(state.detections[0]);
-                renderFrameRadar();
-                renderFrameOverlay(); // Draws first frame boxes
+
+            // 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;
+                });
             }
 
-            // Start Polling for Video
-            pollJob(data.job_id);
+            // NOW process detections (after frame dimensions are correct)
+            if (rawDetections.length > 0) {
+                processFirstFrameDetections(rawDetections);
+            }
+
+            // 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 'Engage' tab.", "g");
+                setStatus("warn", "Live processing... View in Engage tab");
+
+                // Trigger resize/render for Tab 2
+                resizeOverlays();
+                renderLiveRadar();
+            }
+
+            // Start polling for completion
+            pollAsyncJob().then(() => {
+                log("Video processing complete.", "g");
+                // Stop streaming mode once video is ready
+                stopStreamingMode();
+            }).catch(err => {
+                log(`Polling error: ${err.message}`, "e");
+                stopStreamingMode();
+            });
+
+            state.hasReasoned = true;
+            setStatus("good", "READY · Reason complete (you can Engage)");
+            log("Reason complete.", "g");
+
+            // Seed tracks for Tab 2
+            seedTracksFromTab1();
+            renderFrameRadar();
+
+            // Generate intel summary (async)
+            computeIntelSummary();
 
         } catch (err) {
-            log(`Reason failed: ${err.message}`, "e");
             setStatus("bad", "ERROR · Reason failed");
+            log(`Reason failed: ${err.message}`, "e");
+            console.error(err);
         } finally {
             state.isReasoning = false;
-            btnReason.disabled = false;
-            btnCancelReason.style.display = "none";
-        }
-    });
-
-    btnCancelReason.addEventListener("click", () => {
-        if (state.hf.asyncJobId) cancelBackendJob(state.hf.asyncJobId);
-    });
-
-    // ENGAGE Controls
-    btnEngage.addEventListener("click", () => {
-        if (!state.hasReasoned || !state.hf.processedUrl) {
-            // If processed video isn't ready, we play original?
-            // Or wait.
-            if (state.hf.asyncStatus !== "completed") {
-                log("Processing not complete yet.", "w");
-                return;
+            if (btnReason) {
+                btnReason.disabled = false;
+                btnReason.style.opacity = "1";
+                btnReason.style.cursor = "pointer";
             }
+            if (btnCancelReason) btnCancelReason.style.display = "none";
         }
+    }
 
-        videoEngage.src = state.hf.processedUrl || state.videoUrl;
-        videoEngage.play();
-        state.tracker.running = true;
+    function processFirstFrameDetections(dets) {
+        state.detections = dets.map((d, i) => {
+            const 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 };
+
+            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_rel: Number.isFinite(d.depth_rel) ? d.depth_rel : null,
+                gpt_distance_m: d.gpt_distance_m || null,
+                gpt_direction: d.gpt_direction || null,
+                gpt_description: d.gpt_description || null
+            };
+        });
+
+        state.selectedId = state.detections[0]?.id || null;
+
+        renderFrameTrackList();
+        renderFeatures(state.detections[0] || null);
+        renderFrameOverlay();
+
+        log(`Detected ${state.detections.length} objects in first frame.`, "g");
+    }
 
-        // Seed Tracker
-        // We use the simpler method: direct map from detections
+    function seedTracksFromTab1() {
+        const rangeBase = $("#rangeBase");
         state.tracker.tracks = state.detections.map(d => ({
-            ...d,
-            vx: 0, vy: 0,
-            lastSeen: now(),
-            state: "TRACK"
+            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,
+            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.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 · Reasoning stopped");
+        setHfStatus("cancelled (stopped by user)");
+        log("Reasoning cancelled by user.", "w");
+    }
 
-        log("Engage sequences started.", "g");
-    });
-
-    btnPause.addEventListener("click", () => {
-        videoEngage.pause();
-        state.tracker.running = false;
-    });
-
-    btnReset.addEventListener("click", () => {
-        videoEngage.pause();
-        videoEngage.currentTime = 0;
-        state.tracker.tracks = []; // clear
-        state.tracker.running = false;
-    });
-
-    // Card Selection Event
-    document.addEventListener("track-selected", (e) => {
-        state.selectedId = e.detail.id;
-        renderFrameTrackList(); // update active class
-        renderFrameOverlay();   // update highlight
-        const det = state.detections.find(d => d.id === state.selectedId);
-        renderFeatures(det);
-    });
-}
-
-function pollJob(jobId) {
-    const iv = setInterval(async () => {
-        if (state.hf.asyncStatus === "completed" || state.hf.asyncStatus === "failed") {
-            clearInterval(iv);
+    function runEngage() {
+        if (!state.hasReasoned) {
+            log("Please run Reason first.", "w");
             return;
         }
 
-        try {
-            const status = await checkJobStatus(jobId);
-            state.hf.asyncStatus = status.status;
-            setHfStatus(`Job ${jobId.slice(0, 8)}: ${status.status}`);
-
-            if (status.status === "completed") {
-                state.hf.processedUrl = `${state.hf.baseUrl}${status.video_url}`;
-                log("Processing complete. Video ready.", "g");
-                clearInterval(iv);
-            }
-        } catch (e) {
-            clearInterval(iv);
-        }
-    }, 2000);
-}
-
-// Main Animation Loop
-function loop() {
-    const t = now();
-    const dt = (t - state.tracker.lastFrameTime) / 1000;
-    state.tracker.lastFrameTime = t;
-
-    if (state.tracker.running && !videoEngage.paused) {
-        // 1. Predict (Coast)
-        predictTracks(dt);
-
-        // 2. Measure (Update from Detection)
-        // Since we removed local COCO fallback, what drives updates?
-        // OPTION A: We rely on server stream (not implemented fully in this refactor).
-        // OPTION B: We rely purely on "coasting" (dead reckoning) if no new data comes in.
-        // For this demo refactor, we just predict.
-
-        // 3. Prune
-        // matchAndUpdateTracks([], dt); // Empty detections just triggers pruning/decay
+        // 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();
+        }
+
+        state.tracker.running = true;
+        state.tracker.lastFrameTime = APP.core.utils.now();
+
+        // Ensure tracks are seeded
+        if (state.tracker.tracks.length === 0) {
+            seedTracksFromTab1();
+        }
+
+        log("Engage sequence started.", "g");
     }
 
-    // Render
-    renderFrameRadar();
-    renderFrameOverlay();
-    // Cards update less frequently? Or every frame for position?
-    // We update overlays every frame. Cards usually static unless sorted.
+    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;
+
+        // Update tracker when engaged
+        if (state.tracker.running && videoEngage && !videoEngage.paused) {
+            predictTracks(dt);
+        }
+
+        // Render UI
+        if (renderFrameRadar) renderFrameRadar();
+        if (renderLiveRadar) renderLiveRadar();
+        if (renderFrameOverlay) renderFrameOverlay();
+        if (renderEngageOverlay) renderEngageOverlay();
+        if (tickAgentCursor) tickAgentCursor();
+
+        requestAnimationFrame(loop);
+    }
 
-    requestAnimationFrame(loop);
-}
+    // Expose state for debugging
+    window.__LP_STATE__ = state;
 
-// Start
-init();
+    // Start
+    init();
+});

frontend/js/ui/cards.js

@@ -1,15 +1,16 @@
-import { state } from '../core/state.js';
-import { $ } from '../core/utils.js';
+APP.ui.cards = {};
 
-const frameTrackList = $("#frameTrackList");
-const trackCount = $("#track-count");
+APP.ui.cards.renderFrameTrackList = function () {
+    const { state } = APP.core;
+    const { $ } = APP.core.utils;
+    const frameTrackList = $("#frameTrackList");
+    const trackCount = $("#trackCount"); // Correct ID
 
-export function renderFrameTrackList() {
-    if (!frameTrackList || !trackCount) return;
+    if (!frameTrackList) return;
     frameTrackList.innerHTML = "";
 
     const dets = state.detections || [];
-    trackCount.textContent = dets.length;
+    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>';
@@ -35,8 +36,6 @@ export function renderFrameTrackList() {
         if (state.selectedId === id) card.classList.add("active");
         card.id = `card-${id}`;
 
-        // Circular dependency risk if we import selectObject from main?
-        // We'll dispatch a custom event instead.
         card.onclick = () => {
             const ev = new CustomEvent("track-selected", { detail: { id } });
             document.dispatchEvent(ev);
@@ -58,4 +57,4 @@ export function renderFrameTrackList() {
         `;
         frameTrackList.appendChild(card);
     });
-}
+};

frontend/js/ui/cursor.js

@@ -0,0 +1,90 @@
+// 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/features.js

@@ -1,9 +1,10 @@
-import { $ } from '../core/utils.js';
+APP.ui.features = {};
 
-const featureTable = $("#featureTable");
-const selId = $("#sel-id");
+APP.ui.features.renderFeatures = function (det) {
+    const { $ } = APP.core.utils;
+    const featureTable = $("#featureTable");
+    const selId = $("#selId"); // Correct ID
 
-export function renderFeatures(det) {
     if (!featureTable || !selId) return;
 
     selId.textContent = det ? det.id : "—";
@@ -32,4 +33,4 @@ export function renderFeatures(det) {
             tbody.appendChild(tr);
         }
     }
-}
+};

frontend/js/ui/intel.js

@@ -0,0 +1,118 @@
+// Intel Summary Module - Mission intel generation and display
+APP.ui.intel = {};
+
+APP.ui.intel.setIntelStatus = function (kind, text) {
+    const { $ } = APP.core.utils;
+    const intelStamp = $("#intelStamp");
+    const intelDot = $("#intelDot");
+
+    if (!intelStamp || !intelDot) return;
+
+    intelStamp.innerHTML = text;
+    intelDot.className = "dot" + (kind === "warn" ? " warn" : (kind === "bad" ? " bad" : ""));
+    intelDot.style.width = "7px";
+    intelDot.style.height = "7px";
+    intelDot.style.boxShadow = "none";
+};
+
+APP.ui.intel.setIntelThumb = function (i, dataUrl) {
+    const { $ } = APP.core.utils;
+    const thumbs = [$("#intelThumb0"), $("#intelThumb1"), $("#intelThumb2")];
+    const img = thumbs[i];
+    if (!img) return;
+    img.src = dataUrl || "";
+};
+
+APP.ui.intel.resetIntelUI = function () {
+    const { $ } = APP.core.utils;
+    const intelSummaryBox = $("#intelSummaryBox");
+
+    if (!intelSummaryBox) return;
+    intelSummaryBox.innerHTML = 'Upload a video, then click <b>Reason</b> to generate an unbiased scene summary.';
+    APP.ui.intel.setIntelStatus("warn", "Idle");
+    APP.ui.intel.setIntelThumb(0, "");
+    APP.ui.intel.setIntelThumb(1, "");
+    APP.ui.intel.setIntelThumb(2, "");
+};
+
+// External hook for intel summary (can be replaced by user)
+APP.ui.intel.externalIntel = async function (frames) {
+    console.log("externalIntel called with", frames.length, "frames");
+    return "Video processed. No external intel provider connected.";
+};
+
+APP.ui.intel.computeIntelSummary = async function () {
+    const { state } = APP.core;
+    const { $ } = APP.core.utils;
+    const { log } = APP.ui.logging;
+
+    const intelSummaryBox = $("#intelSummaryBox");
+    const videoHidden = $("#videoHidden");
+    const videoEngage = $("#videoEngage");
+
+    if (!intelSummaryBox) return;
+    if (!state.videoLoaded) {
+        APP.ui.intel.resetIntelUI();
+        return;
+    }
+    if (state.intelBusy) return;
+
+    state.intelBusy = true;
+    APP.ui.intel.setIntelStatus("warn", "Generating…");
+    intelSummaryBox.textContent = "Sampling frames and running analysis…";
+
+    try {
+        const videoEl = videoHidden || videoEngage;
+        const dur = videoEl ? (videoEl.duration || 0) : 0;
+        const times = [0, dur ? dur * 0.33 : 1, dur ? dur * 0.66 : 2];
+        const frames = [];
+
+        for (let i = 0; i < times.length; i++) {
+            await APP.core.video.seekTo(videoEl, times[i]);
+
+            const canvas = document.createElement("canvas");
+            canvas.width = 640;
+            canvas.height = 360;
+            const ctx = canvas.getContext("2d");
+            ctx.drawImage(videoEl, 0, 0, canvas.width, canvas.height);
+            const dataUrl = canvas.toDataURL("image/jpeg", 0.6);
+            frames.push(dataUrl);
+
+            try {
+                APP.ui.intel.setIntelThumb(i, dataUrl);
+            } catch (_) { }
+        }
+
+        const summary = await APP.ui.intel.externalIntel(frames);
+
+        intelSummaryBox.textContent = summary;
+        APP.ui.intel.setIntelStatus("good", `Updated · ${new Date().toLocaleTimeString()}`);
+    } catch (err) {
+        APP.ui.intel.setIntelStatus("bad", "Summary unavailable");
+        intelSummaryBox.textContent = `Unable to generate summary: ${err.message}`;
+        console.error(err);
+    } finally {
+        state.intelBusy = false;
+    }
+};
+
+// Render mission context (if applicable)
+APP.ui.intel.renderMissionContext = function () {
+    const { state } = APP.core;
+    const { $ } = APP.core.utils;
+
+    const missionClassesEl = $("#missionClasses");
+    const missionIdEl = $("#missionId");
+
+    if (missionClassesEl) {
+        if (state.hf.queries && state.hf.queries.length > 0) {
+            missionClassesEl.textContent = state.hf.queries.join(", ");
+        } else {
+            missionClassesEl.textContent = "All objects (no filter)";
+        }
+    }
+
+    if (missionIdEl) {
+        missionIdEl.textContent = state.hf.missionId || "—";
+    }
+};

frontend/js/ui/logging.js

@@ -1,10 +1,8 @@
-import { $ } from '../core/utils.js';
+APP.ui.logging = {};
 
-const sysDot = $("#sys-dot");
-const sysStatus = $("#sys-status");
-const consoleHook = $("#console-hook");
-
-export function log(msg, type = "i") {
+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";
@@ -18,9 +16,12 @@ export function log(msg, type = "i") {
     div.innerHTML = `<span class="ts">[${ts}]</span> <span style="color:${color}">${msg}</span>`;
     consoleHook.appendChild(div);
     consoleHook.scrollTop = consoleHook.scrollHeight;
-}
+};
 
-export function setStatus(level, text) {
+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)";
@@ -31,13 +32,14 @@ export function setStatus(level, text) {
     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}`;
 
-export function setHfStatus(msg) {
-    // Optional status line updates for HF backend events
-    if (msg.startsWith("error")) {
-        // console.error(msg); // Reduced noise
-    } else {
-        // console.log(`[HF] ${msg}`);
+    if (msg && (msg.toLowerCase().includes("error") || msg.toLowerCase().includes("failed"))) {
+        APP.ui.logging.log(msg, "e");
     }
-}
+};

frontend/js/ui/overlays.js

@@ -1,59 +1,29 @@
-import { state } from '../core/state.js';
-import { now, $ } from '../core/utils.js';
-import { defaultAimpoint, aimpointByLabel } from '../core/physics.js';
-import { log } from './logging.js';
-
-const frameOverlay = $("#frameOverlay");
-
-// Helper to draw rounded rect
-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.shadowBlur = isSel ? 18 : 12;
-    ctx.shadowColor = "rgba(239,68,68,.45)";
-    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.shadowBlur = 0;
-    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();
-}
-
-export function renderFrameOverlay() {
-    if (!frameOverlay) return;
-    const ctx = frameOverlay.getContext("2d");
-    const w = frameOverlay.width, h = frameOverlay.height;
+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 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 (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);
 
-    if (!state.detections.length) return;
+    const source = trackSource || state.detections || [];
+    if (!source || !source.length) return;
 
     // subtle scanning effect
     const t = now() / 1000;
@@ -61,13 +31,55 @@ export function renderFrameOverlay() {
     ctx.fillStyle = "rgba(34,211,238,.06)";
     ctx.fillRect(scanX - 8, 0, 16, h);
 
-    state.detections.forEach((d) => {
-        const isSel = d.id === state.selectedId;
+    // 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.shadowBlur = isSel ? 18 : 12;
+        ctx.shadowColor = "rgba(239,68,68,.45)";
+        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.shadowBlur = 0;
+        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();
+    }
+
+    source.forEach((d) => {
+        // Handle both 'selectedId' (detection) and 'selectedTrackId' (track)
+        const isSel = (d.id === state.selectedId) || (d.id === state.tracker.selectedTrackId);
         const b = d.bbox;
 
         // box
         ctx.lineWidth = isSel ? 3 : 2;
-        // Simple heuristic for focus color
         const label = (d.label || "").toLowerCase();
         const isFocus = label.includes("drone") || label.includes("uav");
 
@@ -84,16 +96,45 @@ export function renderFrameOverlay() {
         ctx.fillStyle = g;
         ctx.fillRect(b.x, b.y, b.w, b.h);
 
+        // Label / Info Text
+        ctx.font = "bold 13px 'Inter', sans-serif";
+        let text = (d.label || "OBJ").toUpperCase();
+        if (d.track_id) text = `[${d.track_id}] ${text}`;
+        if (d.gpt_distance_m) text += ` ${Math.round(d.gpt_distance_m)}m`;
+        if (d.speed_kph && d.speed_kph > 1) text += ` ${Math.round(d.speed_kph)}km/h`;
+
+        const tm = ctx.measureText(text);
+        const textW = tm.width + 16;
+        const textH = 22;
+        const tx = b.x;
+        const ty = b.y - textH - 4 > 0 ? b.y - textH - 4 : b.y + b.h + 4; // draw above if space, else below
+
+        ctx.fillStyle = isSel ? "rgba(34,211,238,0.9)" : "rgba(17,24,39,0.85)";
+        ctx.beginPath();
+        ctx.roundRect(tx, ty, textW, textH, 4);
+        ctx.fill();
+
+        ctx.fillStyle = isSel ? "#000" : "#fff";
+        ctx.fillText(text, tx + 8, ty + 16);
+
         // aimpoint marker
-        // If aim not set, calculate default
-        const aim = d.aim || defaultAimpoint(d.label);
+        // Tracks define 'aimRel', Detections define 'aim' or just rely on default.
+        let aim = d.aim; // if detection
+        if (!aim && d.aimRel) aim = d.aimRel; // if track
+        if (!aim) aim = defaultAimpoint(d.label);
+
         const ax = b.x + b.w * aim.relx;
         const ay = b.y + b.h * aim.rely;
         drawAimpoint(ctx, ax, ay, isSel);
     });
+};
 
-    // Pointer events moved to controls or handled here? 
-    // Usually simple to keep it here or init logic in main.
-}
+APP.ui.overlays.renderFrameOverlay = function () {
+    const { state } = APP.core;
+    APP.ui.overlays.render("frameOverlay", state.detections);
+};
 
-// Ensure interactions are bound in main setup, not here to keep this pure renderer
+APP.ui.overlays.renderEngageOverlay = function () {
+    const { state } = APP.core;
+    APP.ui.overlays.render("engageOverlay", state.tracker.tracks);
+};

frontend/js/ui/radar.js

@@ -1,23 +1,24 @@
-import { state } from '../core/state.js';
-import { clamp, now, $ } from '../core/utils.js';
+APP.ui.radar = {};
 
-const frameRadar = $("#frameRadar");
+APP.ui.radar.render = function (canvasId, trackSource) {
+    const { state } = APP.core;
+    const { clamp, now, $ } = APP.core.utils;
+    const canvas = $(`#${canvasId}`);
 
-export function renderFrameRadar() {
-    if (!frameRadar) return;
-    const ctx = frameRadar.getContext("2d");
-    const rect = frameRadar.getBoundingClientRect();
+    if (!canvas) return;
+    const ctx = canvas.getContext("2d");
+    const rect = canvas.getBoundingClientRect();
     const dpr = devicePixelRatio || 1;
 
     // Resize if needed
     const targetW = Math.max(1, Math.floor(rect.width * dpr));
     const targetH = Math.max(1, Math.floor(rect.height * dpr));
-    if (frameRadar.width !== targetW || frameRadar.height !== targetH) {
-        frameRadar.width = targetW;
-        frameRadar.height = targetH;
+    if (canvas.width !== targetW || canvas.height !== targetH) {
+        canvas.width = targetW;
+        canvas.height = targetH;
     }
 
-    const w = frameRadar.width, h = frameRadar.height;
+    const w = canvas.width, h = canvas.height;
     const cx = w * 0.5, cy = h * 0.5;
     const R = Math.min(w, h) * 0.45; // Max radius
 
@@ -47,7 +48,7 @@ export function renderFrameRadar() {
     const ang = (t * (Math.PI * 2)) % (Math.PI * 2);
 
     const grad = ctx.createConicGradient(ang + Math.PI / 2, cx, cy); // Offset to start at 0
-    grad.addColorStop(0, "transparent");
+    grad.addColorStop(0, "transparent"); // transparent
     grad.addColorStop(0.1, "transparent");
     grad.addColorStop(0.8, "rgba(34, 211, 238, 0.0)");
     grad.addColorStop(1, "rgba(34, 211, 238, 0.15)"); // Trailing edge
@@ -78,7 +79,7 @@ export function renderFrameRadar() {
     ctx.stroke();
 
     // --- 4. Render Detections ---
-    const source = state.tracker.running ? state.tracker.tracks : state.detections;
+    const source = trackSource || state.detections;
 
     if (source) {
         source.forEach(det => {
@@ -93,21 +94,10 @@ export function renderFrameRadar() {
             const maxRangeM = 1500;
             const rPx = (clamp(dist, 0, maxRangeM) / maxRangeM) * R;
 
-            // Determine Bearing
-            // box center relative to frame center
             const bx = det.bbox.x + det.bbox.w * 0.5;
-            const fw = state.frame.w || 1280; // normalized coords usually, but here bbox seems to be absolute pixel or normalized depending on source?
-            // NOTE: In state.detections, bbox is normalized (0..1) if coming from normBBox?
-            // Wait, state.detections has bbox in pixel coords? 
-            // In original script: state.detections = dets.map ... bbox: normBBox(d.bbox, w, h) which clamps but returns pixel coords?
-            // Let's check normBBox implementation in utils.
-            // It clamps x to 0..w-1. So it IS pixel coords.
-
-            // Normalized x (-0.5 to 0.5)
+            const fw = state.frame.w || 1280;
             const tx = (bx / fw) - 0.5;
 
-            // Map x-axis (-0.5 to 0.5) to angle.
-            // FOV assumption: ~60 degrees?
             const fovRad = (60 * Math.PI) / 180;
             const angle = (-Math.PI / 2) + (tx * fovRad);
 
@@ -115,7 +105,6 @@ export function renderFrameRadar() {
             const px = cx + Math.cos(angle) * rPx;
             const py = cy + Math.sin(angle) * rPx;
 
-            // Check selection (handle both track ID and detection ID)
             const isSelected = (state.selectedId === det.id) || (state.tracker.selectedTrackId === det.id);
 
             // Glow for selected
@@ -144,7 +133,6 @@ export function renderFrameRadar() {
                 ctx.font = "bold 11px monospace";
                 ctx.fillText(det.id, px + 8, py + 3);
 
-                // Connected Line to center
                 ctx.strokeStyle = "rgba(255, 255, 255, 0.4)";
                 ctx.lineWidth = 1;
                 ctx.setLineDash([2, 2]);
@@ -154,7 +142,6 @@ export function renderFrameRadar() {
                 ctx.stroke();
                 ctx.setLineDash([]);
 
-                // Distance Label on Line
                 const mx = (cx + px) * 0.5;
                 const my = (cy + py) * 0.5;
                 const distStr = `${Math.round(dist)}m`;
@@ -164,20 +151,28 @@ export function renderFrameRadar() {
                 const tw = tm.width;
                 const th = 10;
 
-                // Label Background
                 ctx.fillStyle = "rgba(10, 15, 34, 0.85)";
                 ctx.fillRect(mx - tw / 2 - 3, my - th / 2 - 2, tw + 6, th + 4);
 
-                // Label Text
                 ctx.fillStyle = "#22d3ee"; // Cyan
                 ctx.textAlign = "center";
                 ctx.textBaseline = "middle";
                 ctx.fillText(distStr, mx, my);
 
-                // Reset text alignment
                 ctx.textAlign = "start";
                 ctx.textBaseline = "alphabetic";
             }
         });
     }
-}
+};
+
+// Aliases for compatibility if needed, but ideally updated in main.js
+APP.ui.radar.renderFrameRadar = function () {
+    const { state } = APP.core;
+    APP.ui.radar.render("frameRadar", state.detections);
+};
+
+APP.ui.radar.renderLiveRadar = function () {
+    const { state } = APP.core;
+    APP.ui.radar.render("radarCanvas", state.tracker.tracks);
+};

frontend/js/ui/trade.js

@@ -1,39 +1,291 @@
-import { state } from '../core/state.js';
-import { $ } from '../core/utils.js';
-
-const mPlan = $("#m-plan");
-const mPlanSub = $("#m-plan-sub");
-const mMaxP = $("#m-maxp");
-const mMaxPSub = $("#m-maxp-sub");
-const mReqP = $("#m-reqp");
-const mMargin = $("#m-margin");
-
-export function renderTrade() {
-    // This function updates the top summary metrics based on the current state
-    if (!mPlan) return; // UI not ready
-
-    // Logic mostly handled in recomputeHEL, this is just refresh
-    // We can move the specific DOM updates here if we want strict separation
-    // For now, let's assume recomputeHEL drives state and this just reflects it?
-    // Actually, recomputeHEL in the original code did the DOM updates directly.
-    // Let's keep it simple: Trade rendering is minimal.
-}
-
-export function updateHeadlines(sys, bestTarget) {
+// Trade Space Visualization Module
+APP.ui.trade = {};
+
+APP.ui.trade.populateTradeTarget = function () {
+    const { state } = APP.core;
+    const { $ } = APP.core.utils;
+    const tradeTarget = $("#tradeTarget");
+
+    if (!tradeTarget) return;
+
+    const sel = tradeTarget.value;
+    tradeTarget.innerHTML = "";
+
+    const ids = state.detections.map(d => d.id);
+    if (!ids.length) {
+        const opt = document.createElement("option");
+        opt.value = "";
+        opt.textContent = "No targets";
+        tradeTarget.appendChild(opt);
+        return;
+    }
+
+    ids.forEach(id => {
+        const opt = document.createElement("option");
+        opt.value = id;
+        opt.textContent = id;
+        tradeTarget.appendChild(opt);
+    });
+
+    if (sel && ids.includes(sel)) tradeTarget.value = sel;
+    else tradeTarget.value = state.selectedId || ids[0];
+};
+
+APP.ui.trade.renderTrade = function () {
+    const { state } = APP.core;
+    const { $, clamp } = APP.core.utils;
+    const { maxPowerAtTarget, requiredDwell, pkillFromMargin } = APP.core.hel;
+
+    const tradeCanvas = $("#tradeCanvas");
+    const tradeTarget = $("#tradeTarget");
+    const rMin = $("#rMin");
+    const rMax = $("#rMax");
+    const showPk = $("#showPk");
+
+    if (!tradeCanvas) return;
+
+    const ctx = tradeCanvas.getContext("2d");
+    const W = tradeCanvas.width, H = tradeCanvas.height;
+    ctx.clearRect(0, 0, W, H);
+
+    // Background
+    ctx.fillStyle = "rgba(0,0,0,.32)";
+    ctx.fillRect(0, 0, W, H);
+
+    if (!state.detections.length) {
+        ctx.fillStyle = "rgba(255,255,255,.75)";
+        ctx.font = "14px " + getComputedStyle(document.body).fontFamily;
+        ctx.fillText("Run Reason to populate trade-space curves.", 18, 34);
+        return;
+    }
+
+    const id = (tradeTarget ? tradeTarget.value : null) || state.selectedId || state.detections[0].id;
+    const d = state.detections.find(x => x.id === id) || state.detections[0];
+
+    const r0 = Math.max(50, rMin ? +rMin.value : 200);
+    const r1 = Math.max(r0 + 50, rMax ? +rMax.value : 6000);
+
+    // Margins
+    const padL = 64, padR = 18, padT = 18, padB = 52;
+    const plotW = W - padL - padR;
+    const plotH = H - padT - padB;
+
+    // Compute sweep
+    const N = 120;
+    const xs = [];
+    let maxY = 0;
+    let minY = Infinity;
+
+    for (let i = 0; i <= N; i++) {
+        const r = r0 + (r1 - r0) * (i / N);
+        const mp = maxPowerAtTarget(r).Ptar;
+        const reqP = d.reqP_kW || 40;
+        const reqD = requiredDwell(r, reqP, mp, d.baseDwell_s || 5);
+
+        xs.push({ r, mp, reqP, reqD });
+        maxY = Math.max(maxY, mp, reqP);
+        minY = Math.min(minY, mp, reqP);
+    }
+
+    maxY = Math.max(maxY, 20);
+    minY = Math.max(0, minY - 10);
+
+    // Axes
+    ctx.strokeStyle = "rgba(255,255,255,.14)";
+    ctx.lineWidth = 1;
+    ctx.beginPath();
+    ctx.moveTo(padL, padT);
+    ctx.lineTo(padL, padT + plotH);
+    ctx.lineTo(padL + plotW, padT + plotH);
+    ctx.stroke();
+
+    // Grid lines
+    ctx.strokeStyle = "rgba(255,255,255,.07)";
+    for (let i = 1; i <= 5; i++) {
+        const y = padT + plotH * (i / 5);
+        ctx.beginPath(); ctx.moveTo(padL, y); ctx.lineTo(padL + plotW, y); ctx.stroke();
+    }
+    for (let i = 1; i <= 6; i++) {
+        const x = padL + plotW * (i / 6);
+        ctx.beginPath(); ctx.moveTo(x, padT); ctx.lineTo(x, padT + plotH); ctx.stroke();
+    }
+
+    // Helpers
+    const xMap = (r) => padL + (r - r0) / (r1 - r0) * plotW;
+    const yMap = (p) => padT + (1 - (p - minY) / (maxY - minY)) * plotH;
+
+    // Curve: max power at target
+    ctx.strokeStyle = "rgba(34,211,238,.95)";
+    ctx.lineWidth = 2.5;
+    ctx.beginPath();
+    xs.forEach((pt, i) => {
+        const x = xMap(pt.r);
+        const y = yMap(pt.mp);
+        if (i === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y);
+    });
+    ctx.stroke();
+
+    // Curve: required power
+    ctx.strokeStyle = "rgba(239,68,68,.90)";
+    ctx.lineWidth = 2.5;
+    ctx.beginPath();
+    xs.forEach((pt, i) => {
+        const x = xMap(pt.r);
+        const y = yMap(pt.reqP);
+        if (i === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y);
+    });
+    ctx.stroke();
+
+    // Annotate margin zones
+    ctx.fillStyle = "rgba(34,197,94,.08)";
+    ctx.beginPath();
+    xs.forEach((pt, i) => {
+        const x = xMap(pt.r);
+        const y = yMap(Math.max(pt.reqP, pt.mp));
+        if (i === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y);
+    });
+    for (let i = xs.length - 1; i >= 0; i--) {
+        const x = xMap(xs[i].r);
+        const y = yMap(Math.min(xs[i].reqP, xs[i].mp));
+        ctx.lineTo(x, y);
+    }
+    ctx.closePath();
+    ctx.fill();
+
+    // Second axis for dwell (scaled)
+    const dwellMax = Math.max(...xs.map(p => p.reqD));
+    const yMapD = (dwell) => padT + (1 - (dwell / Math.max(1e-6, dwellMax))) * plotH;
+
+    ctx.strokeStyle = "rgba(124,58,237,.85)";
+    ctx.lineWidth = 2.2;
+    ctx.beginPath();
+    xs.forEach((pt, i) => {
+        const x = xMap(pt.r);
+        const y = yMapD(pt.reqD);
+        if (i === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y);
+    });
+    ctx.stroke();
+
+    // Optional pkill band
+    if (showPk && showPk.value === "on") {
+        ctx.fillStyle = "rgba(245,158,11,.08)";
+        ctx.beginPath();
+        xs.forEach((pt, i) => {
+            const x = xMap(pt.r);
+            const mp = pt.mp;
+            const margin = mp - pt.reqP;
+            const pk = pkillFromMargin(margin, d.baseDwell_s || 5, pt.reqD);
+            const y = padT + plotH * (1 - pk);
+            if (i === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y);
+        });
+        ctx.lineTo(padL + plotW, padT + plotH);
+        ctx.lineTo(padL, padT + plotH);
+        ctx.closePath();
+        ctx.fill();
+    }
+
+    // Labels
+    ctx.fillStyle = "rgba(255,255,255,.84)";
+    ctx.font = "bold 14px " + getComputedStyle(document.body).fontFamily;
+    ctx.fillText(`Target: ${id} (${d.label})`, padL, 16);
+
+    ctx.fillStyle = "rgba(34,211,238,.95)";
+    ctx.fillText("Max P@Target (kW)", padL + 10, padT + plotH + 30);
+
+    ctx.fillStyle = "rgba(239,68,68,.92)";
+    ctx.fillText("Required P@Target (kW)", padL + 190, padT + plotH + 30);
+
+    ctx.fillStyle = "rgba(124,58,237,.90)";
+    ctx.fillText(`Required Dwell (s, scaled)`, padL + 420, padT + plotH + 30);
+
+    ctx.fillStyle = "rgba(255,255,255,.55)";
+    ctx.font = "11px " + getComputedStyle(document.body).fontFamily;
+    ctx.fillText(`Range (m)`, padL + plotW - 64, padT + plotH + 46);
+
+    // Axis ticks
+    ctx.fillStyle = "rgba(255,255,255,.55)";
+    ctx.font = "11px " + getComputedStyle(document.body).fontFamily;
+
+    for (let i = 0; i <= 5; i++) {
+        const p = minY + (maxY - minY) * (1 - i / 5);
+        const y = padT + plotH * (i / 5);
+        ctx.fillText(p.toFixed(0), 12, y + 4);
+    }
+
+    for (let i = 0; i <= 6; i++) {
+        const r = r0 + (r1 - r0) * (i / 6);
+        const x = padL + plotW * (i / 6);
+        ctx.fillText(r.toFixed(0), x - 14, padT + plotH + 18);
+    }
+
+    // Marker at baseline range
+    const rangeBase = $("#rangeBase");
+    const baseR = d.baseRange_m || (rangeBase ? +rangeBase.value : 1500);
+    const xb = xMap(clamp(baseR, r0, r1));
+    ctx.strokeStyle = "rgba(255,255,255,.28)";
+    ctx.setLineDash([6, 6]);
+    ctx.beginPath();
+    ctx.moveTo(xb, padT);
+    ctx.lineTo(xb, padT + plotH);
+    ctx.stroke();
+    ctx.setLineDash([]);
+};
+
+APP.ui.trade.updateHeadlines = function (sys, bestTarget) {
+    const { $ } = APP.core.utils;
+
+    const mMaxP = $("#m-maxp");
+    const mReqP = $("#m-reqp");
+    const mMargin = $("#m-margin");
+    const mMaxPSub = $("#m-maxp-sub");
+    const mPlanSub = $("#m-plan-sub");
+
     if (!mMaxP) return;
 
-    mMaxP.textContent = sys.maxP ? `${sys.maxP} kW` : "—";
-    mReqP.textContent = sys.reqP ? `${sys.reqP} kW` : "—";
-    const margin = sys.margin || 0;
-    mMargin.textContent = `${margin > 0 ? "+" : ""}${margin} kW`;
-    mMargin.style.color = margin >= 0 ? "rgba(34,197,94,.95)" : "rgba(239,68,68,.95)";
-    mMaxPSub.textContent = "Calculated by external HEL engine";
+    if (mMaxP) mMaxP.textContent = sys.maxP ? `${sys.maxP} kW` : "—";
+    if (mReqP) mReqP.textContent = sys.reqP ? `${sys.reqP} kW` : "—";
+
+    if (mMargin) {
+        const margin = sys.margin || 0;
+        mMargin.textContent = `${margin > 0 ? "+" : ""}${margin} kW`;
+        mMargin.style.color = margin >= 0 ? "rgba(34,197,94,.95)" : "rgba(239,68,68,.95)";
+    }
+
+    if (mMaxPSub) mMaxPSub.textContent = "Calculated by external HEL engine";
 
     if (bestTarget && bestTarget.pkill > 0) {
-        mPlan.textContent = `${bestTarget.id} → Engage`;
-        mPlanSub.textContent = "Highest P(kill) target";
-    } else {
-        mPlan.textContent = "—";
-        mPlanSub.textContent = "No viable targets";
+        const mPlan = $("#m-plan");
+        if (mPlan) mPlan.textContent = `${bestTarget.id} → Engage`;
+        if (mPlanSub) mPlanSub.textContent = "Highest P(kill) target";
     }
-}
+};
+
+APP.ui.trade.snapshotTrade = function () {
+    const { state } = APP.core;
+    const { $, log } = APP.core.utils;
+    const { log: uiLog } = APP.ui.logging;
+
+    if (!state.detections.length) return;
+
+    const tradeTarget = $("#tradeTarget");
+    const helPower = $("#helPower");
+    const atmVis = $("#atmVis");
+    const atmCn2 = $("#atmCn2");
+    const aoQ = $("#aoQ");
+
+    const id = tradeTarget ? tradeTarget.value : state.selectedId;
+    const d = state.detections.find(x => x.id === id) || state.detections[0];
+
+    const snap = {
+        target: id,
+        helPower_kW: helPower ? +helPower.value : 0,
+        vis_km: atmVis ? +atmVis.value : 0,
+        cn2: atmCn2 ? +atmCn2.value : 0,
+        ao: aoQ ? +aoQ.value : 0,
+        baseRange_m: d.baseRange_m,
+        reqP_kW: d.reqP_kW,
+        baseDwell_s: d.baseDwell_s
+    };
+
+    uiLog("SNAPSHOT: " + JSON.stringify(snap), "t");
+};

frontend/style.css

@@ -467,6 +467,8 @@ input[type="number"]:focus {
     width: 100%;
     height: 100%;
     display: block;
+    object-fit: contain;
+    /* Maintain aspect ratio, letterbox if needed */
 }
 
 /* Always show the engage video feed */
@@ -475,10 +477,16 @@ input[type="number"]:focus {
     opacity: 1;
 }
 
+/* Overlay must use same object-fit as the main canvas to align properly */
 .viewbox .overlay {
     position: absolute;
-    inset: 0;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
     pointer-events: none;
+    object-fit: contain;
+    /* CRITICAL: match frameCanvas object-fit */
 }
 
 /* Make engage overlay visible as main display (not just overlay) */

inference.py

@@ -269,6 +269,176 @@ def _build_detection_records(
     return detections
 
 
+class SimpleTracker:
+    def __init__(self, max_age: int = 30, iou_thresh: float = 0.3):
+        self.tracks = {}  # id -> {bbox, label, history, missed_frames, filter}
+        self.next_id = 1
+        self.max_age = max_age
+        self.iou_thresh = iou_thresh
+        
+    def update(self, detections: List[Dict[str, Any]]):
+        # detection: {bbox: [x1,y1,x2,y2], label, score}
+        
+        # 1. Predict new locations (simple constant velocity or just last pos)
+        # For simple IOU tracker, prediction is just previous position.
+        
+        # 2. Match
+        active_tracks = [t for t in self.tracks.values() if t['missed_frames'] < self.max_age]
+        
+        matched_track_indices = set()
+        matched_det_indices = set()
+        
+        # Greedy matching by IOU
+        # O(N*M) but N,M are small
+        matches = [] # (track_id, det_idx, iou)
+        
+        for t_id, track in self.tracks.items():
+            if track['missed_frames'] >= self.max_age: continue
+            
+            t_box = track['bbox']
+            for d_idx, det in enumerate(detections):
+                if d_idx in matched_det_indices: continue
+                d_box = det['bbox']
+                
+                # Check label consistency (optional, but good for stability)
+                if track['label'] != det['label']: continue
+
+                iou = self._calculate_iou(t_box, d_box)
+                if iou > self.iou_thresh:
+                    matches.append((t_id, d_idx, iou))
+        
+        # Sort by IOU desc
+        matches.sort(key=lambda x: x[2], reverse=True)
+        
+        used_tracks = set()
+        used_dets = set()
+        
+        for t_id, d_idx, iou in matches:
+            if t_id in used_tracks or d_idx in used_dets: continue
+            
+            # Update Track
+            track = self.tracks[t_id]
+            track['bbox'] = detections[d_idx]['bbox']
+            track['score'] = detections[d_idx]['score']
+            track['missed_frames'] = 0
+            track['history'].append(track['bbox'])
+            if len(track['history']) > 30: track['history'].pop(0)
+            
+            # Persist GPT attributes from track to detection (propagate forward)
+            for key in ['gpt_distance_m', 'gpt_direction', 'gpt_description']:
+                if key in track:
+                    detections[d_idx][key] = track[key]
+            
+            # Persist GPT attributes from detection to track (update from source)
+            for key in ['gpt_distance_m', 'gpt_direction', 'gpt_description']:
+                if key in detections[d_idx]:
+                     track[key] = detections[d_idx][key]
+            
+            detections[d_idx]['track_id'] = f"T{str(t_id).zfill(2)}"
+            
+            # Attach speed/direction state (to be computed by SpeedEstimator)
+            detections[d_idx]['history'] = track['history']
+            
+            used_tracks.add(t_id)
+            used_dets.add(d_idx)
+            
+        # 3. Create new tracks
+        for d_idx, det in enumerate(detections):
+            if d_idx not in used_dets:
+                t_id = self.next_id
+                self.next_id += 1
+                self.tracks[t_id] = {
+                    'bbox': det['bbox'],
+                    'label': det['label'],
+                    'score': det['score'],
+                    'missed_frames': 0,
+                    'history': [det['bbox']]
+                }
+                # Initialize GPT attributes if present
+                for key in ['gpt_distance_m', 'gpt_direction', 'gpt_description']:
+                    if key in det:
+                        self.tracks[t_id][key] = det[key]
+
+                det['track_id'] = f"T{str(t_id).zfill(2)}"
+                det['history'] = [det['bbox']]
+                
+        # 4. Age out
+        for t_id in list(self.tracks.keys()):
+            if t_id not in used_tracks:
+                self.tracks[t_id]['missed_frames'] += 1
+                if self.tracks[t_id]['missed_frames'] > self.max_age:
+                    del self.tracks[t_id]
+
+    def _calculate_iou(self, boxA, boxB):
+        xA = max(boxA[0], boxB[0])
+        yA = max(boxA[1], boxB[1])
+        xB = min(boxA[2], boxB[2])
+        yB = min(boxA[3], boxB[3])
+        interArea = max(0, xB - xA) * max(0, yB - yA)
+        boxAArea = (boxA[2] - boxA[0]) * (boxA[3] - boxA[1])
+        boxBArea = (boxB[2] - boxB[0]) * (boxB[3] - boxB[1])
+        return interArea / float(boxAArea + boxBArea - interArea + 1e-6)
+
+
+class SpeedEstimator:
+    def __init__(self, fps: float = 30.0):
+        self.fps = fps
+        self.pixel_scale_map = {} # label -> pixels_per_meter (heuristic)
+
+    def estimate(self, detections: List[Dict[str, Any]]):
+        for det in detections:
+            history = det.get('history', [])
+            if len(history) < 5: continue
+            
+            # Simple heuristic: Speed based on pixel movement
+            # We assume a base depth or size.
+            # Delta over last 5 frames
+            curr = history[-1]
+            prev = history[-5]
+            
+            # Centroids
+            cx1 = (curr[0] + curr[2]) / 2
+            cy1 = (curr[1] + curr[3]) / 2
+            cx2 = (prev[0] + prev[2]) / 2
+            cy2 = (prev[1] + prev[3]) / 2
+            
+            dist_px = np.sqrt((cx1-cx2)**2 + (cy1-cy2)**2)
+            
+            # Heuristic scale: Assume car is ~4m long? Or just arbitrary pixel scale
+            # If we had GPT distance, we could calibrate.
+            # For now, let's use a dummy scale: 50px = 1m (very rough)
+            # Speed = (dist_px / 50) meters / (5 frames / 30 fps) seconds
+            #       = (dist_px / 50) / (0.166) m/s
+            #       = (dist_px * 0.12) m/s
+            #       = * 3.6 km/h
+            
+            scale = 50.0 
+            dt = 5.0 / self.fps
+            
+            speed_mps = (dist_px / scale) / dt
+            speed_kph = speed_mps * 3.6
+            
+            # Smoothing
+            det['speed_kph'] = speed_kph
+            
+            # Direction
+            dx = cx1 - cx2
+            dy = cy1 - cy2
+            angle = np.degrees(np.arctan2(dy, dx)) # 0 is right, 90 is down
+            
+            # Map to clock direction (12 is up = -90 deg)
+            # -90 (up) -> 12
+            # 0 (right) -> 3
+            # 90 (down) -> 6
+            # 180 (left) -> 9
+            
+            # Adjust so 12 is up (negative Y)
+            # angle -90 is 12
+            clock_hour = ((angle + 90) / 30 + 12) % 12
+            if clock_hour == 0: clock_hour = 12.0
+            det['direction_clock'] = f"{int(round(clock_hour))} o'clock"
+
+
 _MODEL_LOCKS: Dict[str, RLock] = {}
 _MODEL_LOCKS_GUARD = RLock()
 _DEPTH_SCALE = float(os.getenv("DEPTH_SCALE", "25.0"))
@@ -671,6 +841,7 @@ def run_inference(
     job_id: Optional[str] = None,
     depth_estimator_name: Optional[str] = None,
     depth_scale: float = 1.0,
+    enable_gpt: bool = True,
     stream_queue: Optional[Queue] = None,
 ) -> Tuple[str, List[List[Dict[str, Any]]]]:
     
@@ -866,10 +1037,10 @@ def run_inference(
                          _attach_depth_from_result(detections, dep_res, depth_scale)
                      except: pass
                 
-                # B. Render Boxes
-                display_labels = [_build_display_label(d) for d in detections]
-                if d_res:
-                    processed = draw_boxes(processed, d_res.boxes, label_names=display_labels)
+                # B. Render Boxes - DEFERRED TO WRITER THREAD FOR SEQUENTIAL TRACKING
+                # display_labels = [_build_display_label(d) for d in detections]
+                # if d_res:
+                #     processed = draw_boxes(processed, d_res.boxes, label_names=display_labels)
                 
                 # 3. Output
                 while True:
@@ -933,6 +1104,10 @@ def run_inference(
         next_idx = 0
         buffer = {}
         
+        # Initialize Tracker & Speed Estimator
+        tracker = SimpleTracker()
+        speed_est = SpeedEstimator(fps=fps)
+        
         try:
             with VideoWriter(output_video_path, fps, width, height) as writer:
                 while next_idx < total_frames:
@@ -956,10 +1131,87 @@ def run_inference(
                             
                         # Write next_idx
                         p_frame, dets = buffer.pop(next_idx)
+                        
+                        # --- GPT ESTIMATION (Frame 0 Only) ---
+                        if next_idx == 0 and enable_gpt and dets:
+                            try:
+                                logging.info("Running GPT estimation for video start (Frame 0)...")
+                                with tempfile.NamedTemporaryFile(suffix=".jpg", delete=False) as tmp:
+                                    cv2.imwrite(tmp.name, p_frame) # Use processed frame (boxes not yet drawn)
+                                    # Wait, p_frame might have heatmaps if depth enabled? No, draw_boxes comes later.
+                                    # Actually, colorize_depth_map might have happened in worker.
+                                    # But raw image is better? We don't have raw image here easily without stashing.
+                                    # p_frame is 'processed'. If depth map enabled, it's a heatmap. Not good for GPT.
+                                    # GPT needs RGB image.
+                                    # Worker: processed = frame.copy() -> colorize -> draw_boxes (removed).
+                                    # So processed is potentially modified.
+                                    # Ideally we want original. 
+                                    # But let's assume for now processed is fine (if depth disabled) or GPT can handle it.
+                                    # If depth is enabled, processed is a heatmap. GPT will fail to see car color/details.
+                                    
+                                    # FIX: We need access to original frame? 
+                                    # worker sends (idx, processed, detections).
+                                    # It does NOT send original frame.
+                                    # We should change worker to send original? Or assume GPT runs on processed?
+                                    # If processed is heatmap, it's bad.
+                                    # But User Objective says "legacy depth estimation" is optional/deprecated.
+                                    # If depth_estimator_name is None, processed is just frame.
+                                    
+                                    gpt_res = estimate_distance_gpt(tmp.name, dets)
+                                    os.remove(tmp.name)
+                                    
+                                    # Merge
+                                    # Helper to match IDs?
+                                    # estimate_distance_gpt expects us to pass detections list, output keyed by T01..
+                                    # But detections don't have IDs yet! SimpleTracker assigns them.
+                                    # We assign temporary IDs T01.. based on index for GPT matching?
+                                    # gpt_distance.py generates IDs if not present.
+                                    # Let's inspect gpt_distance.py... assume it matches by index T01, T02...
+                                    
+                                    for i, d in enumerate(dets):
+                                        oid = f"T{str(i+1).zfill(2)}"
+                                        if oid in gpt_res:
+                                            d.update(gpt_res[oid])
+                                            
+                            except Exception as e:
+                                logging.error("GPT failed for Frame 0: %s", e)
+
+                        # --- SEQUENTIAL TRACKING ---
+                        # Update tracker with current frame detections
+                        tracker.update(dets)
+                        speed_est.estimate(dets)
+                        
+                        # --- RENDER BOXES & OVERLAYS ---
+                        # We need to convert list of dicts back to boxes array for draw_boxes
+                        if dets:
+                            display_boxes = np.array([d['bbox'] for d in dets])
+                            display_labels = []
+                            for d in dets:
+                                lbl = d.get('label', 'obj')
+                                # Append Track ID
+                                if 'track_id' in d:
+                                    lbl = f"{d['track_id']} {lbl}"
+                                # Append Speed/Direction if available
+                                if 'speed_kph' in d and d['speed_kph'] > 1.0: # Threshold static
+                                    lbl += f" {int(d['speed_kph'])}km/h"
+                                # Append GPT Distance if available (from first frame persistence)
+                                if d.get('gpt_distance_m'):
+                                    lbl += f" {int(d['gpt_distance_m'])}m"
+                                    
+                                display_labels.append(lbl)
+                                
+                            p_frame = draw_boxes(p_frame, display_boxes, label_names=display_labels)
+                        
                         writer.write(p_frame)
                         
                         if stream_queue:
                             try:
+                                # Send TRACKED detections to frontend for overlay
+                                # We need to attach them to the frame or send separately?
+                                # The stream_queue expects 'p_frame' which is an image.
+                                # The frontend polls for 'async job' status which returns video, but 
+                                # we also want live updates during streaming?
+                                # Currently streaming is just Mjpeg of p_frame.
                                 stream_queue.put(p_frame, timeout=0.01)
                             except:
                                 pass

jobs/background.py

@@ -50,6 +50,7 @@ async def process_video_async(job_id: str) -> None:
                 job_id,
                 job.depth_estimator_name, # Pass depth estimator to trigger unified loop
                 job.depth_scale,
+                job.enable_gpt,
                 stream_queue,
             )
             detection_path, detections_list = result_pkg

jobs/models.py

@@ -33,3 +33,4 @@ class JobInfo:
     first_frame_depth_path: Optional[str] = None
     partial_success: bool = False  # True if one component failed but job completed
     depth_error: Optional[str] = None  # Error message if depth failed
+    enable_gpt: bool = True  # Whether to use GPT for distance estimation