refactor: remove /app frontend, consolidate on demo as sole UI

The demo (/) is the primary UI with command bar, state machine, event
log, and reasoning trace. The /app frontend was a secondary analyst tool
with less operational capability. All Tripo3D and inspection features
are already ported to the demo.

- Remove frontend/ directory and /app mount from app.py
- Update CLAUDE.md to reflect demo/ as the sole frontend
- Update no-cache middleware to target /demo instead of /app

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

CLAUDE.md

@@ -92,24 +92,22 @@ Frontend (index.html) → POST /detect/async → background task → MJPEG strea
 - **`background.py`** — `process_video_async()` coroutine dispatches to the right inference function
 - **`streaming.py`** — MJPEG frame queue + `asyncio.Event` publisher; `publish_frame()` resizes to 640px
 
-### Frontend (frontend/)
+### Frontend (demo/)
 
-Single-page app served at `/app`. No build step. Uses `window.APP` global namespace.
+Single-page command center UI served at `/` (mounted at `/demo`). No build step. Uses `window.ISR` global namespace.
 
-**Script modules (load order matters):**
-- `init.js` → bootstraps `window.APP` namespace
-- `core/config.js` → backend URL, tracking constants
-- `core/state.js` → all client state (video, job, tracks, UI)
-- `core/video.js` → video load/unload, blob lifecycle, depth toggle
-- `core/tracker.js` → client-side IoU + velocity tracker
-- `core/timeline.js` → canvas heatmap timeline bar
-- `api/client.js` → `hfDetectAsync()`, `pollAsyncJob()`, `cancelBackendJob()`
-- `ui/overlays.js` → canvas bounding box rendering
-- `ui/cards.js` → live track card panel
-- `ui/logging.js` → system log, status indicators
-- `main.js` → event wiring, app entry point
+**Key scripts:**
+- `init.js` → bootstraps `window.ISR`, wires UI, initializes state machine
+- `state-machine.js` → explicit FSM for UI flow (idle → detecting → playing → inspect)
+- `api.js` → all backend API calls (`startDetection`, `fetchTracks`, `fetchPointCloud`, etc.)
+- `real-backend.js` → streaming + polling + prefetch logic for live detection jobs
+- `inspect.js` → 4-quadrant inspection panel (seg, edge, depth, 3D) with Tripo3D support
+- `render.js` → canvas overlays for bounding boxes and tracks
+- `ui.js` → panel layout, drawer tabs, command bar
+- `analysis.js` → track analysis and timeline rendering
+- `helpers.js` → viridis colormap, Sobel filter, RLE decode, utility functions
 
-The frontend infers `mode` from `data-kind` attribute on the `<select id="detectorSelect">` options.
+The frontend infers `mode` from the detector select element's `data-kind` attribute.
 
 ## Models
 
@@ -144,7 +142,7 @@ Single entry: key `depth` → `DepthAnythingV2Estimator`. Optional, enabled via
 1. Create class in `models/detectors/` implementing `ObjectDetector.predict()` → `DetectionResult`
 2. If weights need downloading, add `ensure_weights()` classmethod for thread-safe prefetch
 3. Register in `models/model_loader.py` `_REGISTRY`
-4. Add `<option>` to `frontend/index.html` `#detectorSelect` with appropriate `data-kind`
+4. Add `<option>` to `demo/index.html` `#detectorSelect` with appropriate `data-kind`
 
 ## Key Patterns
 

app.py

@@ -101,16 +101,13 @@ async def add_no_cache_header(request: Request, call_next):
     """Ensure frontend assets are not cached by the browser (important for HF Spaces updates)."""
     response = await call_next(request)
     # Apply to all static files and the root page
-    if request.url.path.startswith("/app") or request.url.path == "/":
+    if request.url.path.startswith("/demo") or request.url.path == "/":
         response.headers["Cache-Control"] = "no-cache, no-store, must-revalidate"
         response.headers["Pragma"] = "no-cache"
         response.headers["Expires"] = "0"
     return response
 
 app.mount("/demo", StaticFiles(directory="demo", html=True), name="demo")
-_FRONTEND_DIR = Path(__file__).with_name("frontend")
-if _FRONTEND_DIR.exists():
-    app.mount("/app", StaticFiles(directory=_FRONTEND_DIR, html=True), name="frontend")
 
 # Valid detection modes
 VALID_MODES = {"object_detection", "segmentation", "drone_detection"}

demo/js/inspect.js

@@ -552,9 +552,15 @@ async function renderRealSegmentation(jobId, frameIdx, trackId) {
   const dpr = window.devicePixelRatio || 1;
   canvas.width = canvas.offsetWidth * dpr;
   canvas.height = canvas.offsetHeight * dpr;
+  if (canvas.width === 0 || canvas.height === 0) {
+    // Layout not ready — retry after next frame
+    requestAnimationFrame(() => renderRealSegmentation(jobId, frameIdx, trackId));
+    return;
+  }
   try {
     // Fetch the cropped frame image first (for overlay rendering)
     const frameBlob = await ISR.fetchFrame(jobId, frameIdx, trackId);
+    if (!frameBlob) { showQuadPlaceholder(ctx, canvas, 'FRAME UNAVAILABLE'); if (metric) metric.textContent = '\u2014'; return; }
     const maskData = await ISR.fetchMask(jobId, frameIdx, trackId);
     if (!maskData) { showQuadPlaceholder(ctx, canvas, 'MASK UNAVAILABLE'); if (metric) metric.textContent = '\u2014'; return; }
 
@@ -638,6 +644,10 @@ async function renderRealEdge(jobId, frameIdx, trackId) {
   const dpr = window.devicePixelRatio || 1;
   canvas.width = canvas.offsetWidth * dpr;
   canvas.height = canvas.offsetHeight * dpr;
+  if (canvas.width === 0 || canvas.height === 0) {
+    requestAnimationFrame(() => renderRealEdge(jobId, frameIdx, trackId));
+    return;
+  }
   try {
     const blob = await ISR.fetchFrame(jobId, frameIdx, trackId);
     if (!blob) { showQuadPlaceholder(ctx, canvas, 'FRAME UNAVAILABLE'); return; }
@@ -658,6 +668,10 @@ async function renderRealDepth(jobId, frameIdx, trackId) {
   const dpr = window.devicePixelRatio || 1;
   canvas.width = canvas.offsetWidth * dpr;
   canvas.height = canvas.offsetHeight * dpr;
+  if (canvas.width === 0 || canvas.height === 0) {
+    requestAnimationFrame(() => renderRealDepth(jobId, frameIdx, trackId));
+    return;
+  }
   try {
     const depthData = await ISR.fetchDepth(jobId, frameIdx, trackId);
     if (!depthData || !depthData.data) { showQuadPlaceholder(ctx, canvas, 'DEPTH UNAVAILABLE'); if (metric) metric.textContent = '\u2014'; return; }

frontend/index.html

@@ -1,310 +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="style.css?v=20260323">
-  <title>ISR Analytics</title>
-</head>
-
-<body>
-  <!-- Ambient animated background -->
-  <div id="ambientBg">
-    <div class="orb orb-1"></div>
-    <div class="orb orb-2"></div>
-    <div class="orb orb-3"></div>
-  </div>
-
-  <div id="app">
-    <header>
-      <div class="brand">
-        <div class="logo" aria-hidden="true"></div>
-        <div>
-          <h1>ISR Analytics</h1>
-          <div class="sub">Real-time video intelligence</div>
-        </div>
-      </div>
-      <div class="status-row">
-        <div class="pill">
-          <span class="dot" id="sys-dot"></span>
-          <span id="sys-status">Standby</span>
-        </div>
-        <div class="pill">
-          <span class="kbd">Live</span>
-          <span>Continuous tracking</span>
-        </div>
-      </div>
-    </header>
-
-    <div class="workspace">
-      <aside>
-        <div class="card">
-          <h2>Input</h2>
-          <div class="hint">Upload a video to begin analysis.</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>Detection Query (optional)</label>
-            <textarea id="missionText" rows="3"
-              placeholder="e.g., person, vehicle, hazard"></textarea>
-
-            <div class="hint mt-sm">
-              Specify object classes to filter detection. Leave blank to detect all objects.
-              <div class="mini mt-xs" id="hfBackendStatus">Backend: Standby</div>
-            </div>
-          </div>
-
-          <div class="btnrow">
-            <button id="btnLoadSample" class="btn secondary" title="Load a sample video" 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="yolo11" 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="GSAM2-L" data-kind="segmentation">GSAM2-L</option>
-                  <option value="GSAM2-B" data-kind="segmentation">GSAM2-B</option>
-                  <option value="GSAM2-S" data-kind="segmentation">GSAM2-S</option>
-                  <option value="YSAM2-L" data-kind="segmentation">YSAM2-L (Fast)</option>
-                  <option value="YSAM2-B" data-kind="segmentation">YSAM2-B (Fast)</option>
-                  <option value="YSAM2-S" data-kind="segmentation">YSAM2-S (Fast)</option>
-                </optgroup>
-                <optgroup label="Drone Detection Models">
-                  <option value="yolov8_visdrone" data-kind="drone">VisDrone (YOLOv8)</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" style="display:none">
-              <input type="checkbox" id="enableDepthToggle">
-              <span>Enable Depth Map</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>
-
-        <div class="card" style="flex:1; min-height:0">
-          <h2>System Log</h2>
-          <div class="log" id="sysLog"></div>
-        </div>
-      </aside>
-
-      <main>
-        <section class="tab active" id="tab-engage">
-          <div class="engage-grid">
-            <div class="panel">
-              <h3>
-                <span>Video Analysis</span>
-                <div style="display: flex; gap: 8px; align-items: center;">
-                  <button class="collapse-btn" id="btnToggleSidebar">Hide Panel</button>
-                  <span class="rightnote" id="engageNote">Awaiting video</span>
-                </div>
-              </h3>
-
-              <div class="viewbox" style="min-height: 420px;">
-                <video id="videoEngage" playsinline muted></video>
-
-                <!-- Progress ring overlay (shown during detection) -->
-                <div class="progress-ring-wrap" id="progressRing">
-                  <svg viewBox="0 0 90 90">
-                    <circle class="progress-ring-bg" cx="45" cy="45" r="42" />
-                    <circle class="progress-ring-fg" id="progressRingFg" cx="45" cy="45" r="42" />
-                  </svg>
-                  <div class="progress-ring-text" id="progressRingText">Detecting...</div>
-                </div>
-
-                <div class="watermark">ISR Analytics</div>
-                <div class="empty" id="engageEmpty">
-                  <div class="big">No video loaded</div>
-                  <div class="small">Upload a video file, then run <b>Detect</b> to identify objects. Use <b>Track</b> to follow them in real time.</div>
-                </div>
-              </div>
-
-              <div id="timelineWrap" class="timeline-wrap">
-                <canvas id="timelineBar"></canvas>
-              </div>
-
-              <div class="btnrow mt-md">
-                <button id="btnReason" class="btn">Detect</button>
-                <button id="btnCancelReason" class="btn danger" style="display: none;">Cancel</button>
-                <button id="btnEngage" class="btn">Track</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="chipTracks">TRACKS:0</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)" style="display:none">VIEW:DEFAULT</span>
-              </div>
-            </div>
-
-            <div class="engage-right">
-              <div class="panel" style="flex:1; min-height:0">
-                <h3>
-                  <span>Detected Objects</span>
-                  <span class="rightnote" id="liveStamp"></span>
-                </h3>
-                <div class="list" id="trackList" style="max-height:360px; overflow-y:auto"></div>
-              </div>
-            </div>
-
-            <div class="panel panel-inspection" id="inspectionPanel" style="display:none">
-              <div class="inspection-header">
-                <div class="inspection-header-left">
-                  <span class="inspection-obj-name" id="inspectionObjName">--</span>
-                  <span class="inspection-conf" id="inspectionConf">--</span>
-                  <span class="inspection-status pending" id="inspectionStatus">PENDING</span>
-                </div>
-                <div class="inspection-header-right">
-                  <span class="inspection-frame" id="inspectionFrame">FRM -- / --</span>
-                  <button class="collapse-btn" id="btnCloseInspection">CLOSE</button>
-                </div>
-              </div>
-
-              <div class="inspection-quad" id="inspectionQuad">
-                <div class="inspection-quadrant" data-mode="seg" id="quadSeg">
-                  <div class="quad-label"><span class="quad-dot quad-dot-seg"></span>SEGMENTATION</div>
-                  <canvas class="quad-canvas" id="quadCanvasSeg"></canvas>
-                  <div class="quad-metric" id="quadMetricSeg"></div>
-                  <div class="quad-loading" style="display:none"><div class="inspection-spinner"></div></div>
-                  <div class="quad-error" style="display:none"></div>
-                </div>
-                <div class="inspection-quadrant" data-mode="edge" id="quadEdge">
-                  <div class="quad-label"><span class="quad-dot quad-dot-edge"></span>EDGE</div>
-                  <canvas class="quad-canvas" id="quadCanvasEdge"></canvas>
-                  <div class="quad-metric" id="quadMetricEdge">SOBEL</div>
-                  <div class="quad-error" style="display:none"></div>
-                </div>
-                <div class="inspection-quadrant" data-mode="depth" id="quadDepth">
-                  <div class="quad-label"><span class="quad-dot quad-dot-depth"></span>DEPTH</div>
-                  <canvas class="quad-canvas" id="quadCanvasDepth"></canvas>
-                  <div class="quad-metric" id="quadMetricDepth"></div>
-                  <div class="quad-loading" style="display:none"><div class="inspection-spinner"></div></div>
-                  <div class="quad-error" style="display:none"></div>
-                </div>
-                <div class="inspection-quadrant" data-mode="3d" id="quad3d">
-                  <div class="quad-label"><span class="quad-dot quad-dot-3d"></span>3D MESH</div>
-                  <div class="quad-3d-container" id="quad3dContainer"></div>
-                  <div class="quad-metric" id="quadMetric3d"></div>
-                  <div class="quad-loading" style="display:none"><div class="inspection-spinner"></div></div>
-                  <div class="quad-error" style="display:none"></div>
-                </div>
-              </div>
-
-              <div class="inspection-metrics" id="inspectionMetrics"></div>
-              <div class="interpretability-graph" id="interpretabilityGraph"></div>
-
-              <div class="inspection-empty" id="inspectionEmpty">
-                Select an object from the track cards or click a bounding box to inspect it.
-              </div>
-            </div>
-
-            <div class="panel panel-chat" id="chatPanel">
-              <h3>
-                <span>AI Assistant</span>
-                <div style="display: flex; gap: 8px; align-items: center;">
-                  <button class="collapse-btn" id="chatClear">Clear</button>
-                </div>
-              </h3>
-              <div class="chat-context-header" id="chatContextHeader" style="display:none;">
-                <span class="chat-context-label">CONTEXT</span>
-                <div class="chat-context-chips" id="chatContextChips"></div>
-              </div>
-              <div class="chat-suggestions" id="chatSuggestions" style="display:none;"></div>
-              <div class="chat-container">
-                <div class="chat-messages" id="chatMessages"></div>
-                <div class="chat-input-row">
-                  <input type="text" id="chatInput" placeholder="Select a track to start..." />
-                  <button class="btn" id="chatSend">Send</button>
-                </div>
-              </div>
-            </div>
-          </div><!-- engage-grid -->
-        </section>
-
-    </div>
-
-    <footer>
-      <div class="footer-left">ISR Analytics Platform</div>
-      <div class="stat-bar" id="statBar">
-        <div class="stat-item">
-          <span class="stat-label">Objects</span>
-          <span class="stat-value" id="statTracks">0</span>
-        </div>
-        <div class="stat-item">
-          <span class="stat-label">Model</span>
-          <span class="stat-value" id="statModel">YOLO11</span>
-        </div>
-        <div class="stat-item">
-          <span class="stat-label">Status</span>
-          <span class="stat-value" id="statStatus">Ready</span>
-        </div>
-      </div>
-    </footer>
-
-  </div>
-
-  <!-- Toast notification container -->
-  <div class="toast-container" id="toastContainer"></div>
-
-  <script>
-    window.API_CONFIG = {
-      BACKEND_BASE: "https://biaslab2025-isr.hf.space"
-    };
-  </script>
-  <script src="./js/init.js?v=20260318"></script>
-  <script src="./js/core/config.js?v=20260318"></script>
-  <script src="./js/core/utils.js?v=20260318"></script>
-  <script src="./js/core/state.js?v=20260318"></script>
-  <script src="./js/core/physics.js?v=20260318"></script>
-  <script src="./js/core/video.js?v=20260318"></script>
-  <script src="./js/ui/logging.js?v=20260318"></script>
-  <script src="./js/core/gptMapping.js?v=20260318"></script>
-  <script src="./js/core/tracker.js?v=20260318"></script>
-  <script src="./js/core/timeline.js?v=20260318"></script>
-  <script src="./js/api/client.js?v=20260318"></script>
-  <script src="./js/api/inspection-api.js?v=20260318"></script>
-  <script src="./js/ui/overlays.js?v=20260318"></script>
-  <script src="./js/ui/cards.js?v=20260318"></script>
-  <script src="./js/ui/chat.js?v=20260318"></script>
-  <script src="./vendor/d3-hierarchy.v3.min.js?v=20260323"></script>
-  <script src="./vendor/d3-path.v3.min.js?v=20260323"></script>
-  <script src="./vendor/d3-shape.v3.min.js?v=20260323"></script>
-  <script src="./js/ui/inspection.js?v=20260318"></script>
-  <script src="./js/ui/inspection-renders.js?v=20260318"></script>
-  <script src="./js/ui/inspection-3d.js?v=20260318"></script>
-  <script src="./js/ui/explainability.js?v=20260323"></script>
-  <script src="./js/ui/cursor.js?v=20260318"></script>
-  <script src="./js/ui/animations.js?v=20260318"></script>
-  <script src="./js/core/demo.js?v=20260318"></script>
-  <script src="./js/main.js?v=20260318"></script>
-
-</body>
-
-</html>

frontend/js/api/client.js

@@ -1,221 +0,0 @@
-// API Client Module - Backend communication
-APP.api.client = {};
-
-APP.api.client.hfDetectAsync = async function (formData) {
-    const { state } = APP.core;
-    if (!state.hf.baseUrl) return;
-
-    const resp = await fetch(`${state.hf.baseUrl}/detect/async`, {
-        method: "POST",
-        body: formData
-    });
-
-    if (!resp.ok) {
-        const err = await resp.json().catch(() => ({ detail: resp.statusText }));
-        throw new Error(err.detail || "Async detection submission failed");
-    }
-
-    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}`;
-    }
-
-    return data;
-};
-
-APP.api.client.checkJobStatus = async function (jobId) {
-    const { state } = APP.core;
-    if (!state.hf.baseUrl) return { status: "error" };
-
-    const url = state.hf.statusUrl || `${state.hf.baseUrl}/detect/job/${jobId}`;
-    const resp = await fetch(url, { cache: "no-store" });
-
-    if (!resp.ok) {
-        if (resp.status === 404) return { status: "not_found" };
-        throw new Error(`Status check failed: ${resp.status}`);
-    }
-
-    return await resp.json();
-};
-
-APP.api.client.cancelBackendJob = async function (jobId, reason) {
-    const { state } = APP.core;
-    const { log } = APP.ui.logging;
-
-    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" };
-    }
-
-    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 } = 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(`Job ${completedJobId.substring(0, 8)}: completed`, "g");
-                    setHfStatus("job completed, fetching video...");
-
-                    try {
-                        await fetchProcessedVideo();
-                        await fetchDepthVideo();
-
-                        clearInterval(state.hf.asyncPollInterval);
-                        state.hf.completedJobId = state.hf.asyncJobId;  // preserve for post-completion sync
-                        // Fetch timeline summary for heatmap
-                        APP.core.timeline.loadSummary();
-                        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(`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 progress = status.progress || 0;
-                    const progressPct = Math.round(progress * 100);
-                    const progressInfo = progress ? ` (${progressPct}%)` : "";
-                    setHfStatus(`job ${state.hf.asyncJobId.substring(0, 8)}: ${status.status}${progressInfo}`);
-
-                    // Update progress ring animation
-                    if (APP.ui.animations && APP.ui.animations.updateProgressRing) {
-                        const fraction = progress || Math.min(attempts / maxAttempts * 2, 0.9);
-                        const label = progress ? (progressPct + "%") : "Processing...";
-                        APP.ui.animations.updateProgressRing(fraction, label);
-                    }
-                }
-
-                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 [];
-};
-
-APP.api.client.chatSend = async function (message, mission, activeObjects, history) {
-    const { state } = APP.core;
-    const base = state.hf.baseUrl;
-    if (!base) throw new Error("Backend not configured");
-
-    const resp = await fetch(`${base}/chat`, {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-            message,
-            mission: mission || "",
-            active_objects: activeObjects || [],
-            history: history || []
-        })
-    });
-
-    if (!resp.ok) {
-        const err = await resp.json().catch(() => ({ detail: resp.statusText }));
-        throw new Error(err.detail || "Chat request failed");
-    }
-
-    const data = await resp.json();
-    return data.response;
-};

frontend/js/api/inspection-api.js

@@ -1,228 +0,0 @@
-// Inspection API Client — fetches data for the deep-inspection panel
-APP.api.inspection = {};
-
-/**
- * Fetch a raw video frame as an Image element, optionally cropped to a track.
- * @param {string} jobId
- * @param {number} frameIdx
- * @param {string} [trackId] — if provided, crops to the track's bbox + padding
- * @param {number} [padding=0.20] — padding ratio around the bbox
- * @returns {Promise<HTMLImageElement>}
- */
-APP.api.inspection.fetchFrame = async function (jobId, frameIdx, trackId, padding) {
-    const base = APP.core.state.hf.baseUrl;
-    let url = `${base}/inspect/frame/${jobId}/${frameIdx}`;
-    if (trackId) {
-        const p = padding != null ? padding : 0.20;
-        url += `?track_id=${encodeURIComponent(trackId)}&padding=${p}`;
-    }
-    const resp = await fetch(url);
-    if (!resp.ok) throw new Error(`Frame fetch failed: ${resp.status}`);
-
-    const blob = await resp.blob();
-    const blobUrl = URL.createObjectURL(blob);
-
-    return new Promise((resolve, reject) => {
-        const img = new Image();
-        img.onload = () => resolve(img);
-        img.onerror = () => reject(new Error("Failed to decode frame image"));
-        img.src = blobUrl;
-        // Store blobUrl on the image so caller can revoke later
-        img._blobUrl = blobUrl;
-    });
-};
-
-/**
- * Fetch segmentation mask for a specific track on a specific frame.
- * @param {string} jobId
- * @param {number} frameIdx
- * @param {string} trackId
- * @returns {Promise<Object>} { track_id, bbox, color, mask (ImageData or RLE) }
- */
-APP.api.inspection.fetchMask = async function (jobId, frameIdx, trackId) {
-    const base = APP.core.state.hf.baseUrl;
-    const url = `${base}/inspect/mask/${jobId}/${frameIdx}/${encodeURIComponent(trackId)}`;
-    const resp = await fetch(url);
-
-    if (resp.status === 404) {
-        // No pre-computed mask — generate one on-demand via SAM2
-        return await APP.api.inspection.generateMask(jobId, frameIdx, trackId);
-    }
-    if (!resp.ok) throw new Error(`Mask fetch failed: ${resp.status}`);
-    return await resp.json();
-};
-
-/**
- * Generate a mask on-demand via SAM2 (for detection mode jobs).
- * Result is cached server-side — subsequent fetchMask calls will find it.
- * @param {string} jobId
- * @param {number} frameIdx
- * @param {string} trackId
- * @returns {Promise<Object>} Same shape as fetchMask response
- */
-APP.api.inspection.generateMask = async function (jobId, frameIdx, trackId) {
-    const base = APP.core.state.hf.baseUrl;
-    const resp = await fetch(`${base}/inspect/generate-mask/${jobId}/${frameIdx}/${encodeURIComponent(trackId)}`, {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ sam2_size: "large" })
-    });
-    if (!resp.ok) throw new Error(`Mask generation failed: ${resp.status}`);
-    return await resp.json();
-};
-
-/**
- * Fetch depth map for a specific frame, optionally cropped to a track.
- * @param {string} jobId
- * @param {number} frameIdx
- * @param {string} [trackId] — if provided, crops depth to the track's bbox
- * @returns {Promise<Object>} { width, height, min, max, data: Float32Array }
- */
-APP.api.inspection.fetchDepth = async function (jobId, frameIdx, trackId) {
-    const base = APP.core.state.hf.baseUrl;
-    // Try binary format first; fall back to JSON if CORS strips custom headers
-    let url = `${base}/inspect/depth/${jobId}/${frameIdx}?format=raw`;
-    if (trackId) {
-        url += `&track_id=${encodeURIComponent(trackId)}`;
-    }
-    const resp = await fetch(url);
-    if (!resp.ok) throw new Error(`Depth fetch failed: ${resp.status}`);
-
-    const contentType = resp.headers.get("content-type") || "";
-
-    if (contentType.includes("application/octet-stream")) {
-        // Binary float32 format with metadata in headers
-        const w = parseInt(resp.headers.get("X-Depth-Width"), 10);
-        const h = parseInt(resp.headers.get("X-Depth-Height"), 10);
-        const minD = parseFloat(resp.headers.get("X-Depth-Min"));
-        const maxD = parseFloat(resp.headers.get("X-Depth-Max"));
-        const buf = await resp.arrayBuffer();
-        const data = new Float32Array(buf);
-
-        // If CORS stripped headers, infer dimensions from data length
-        if (isNaN(w) || isNaN(h)) {
-            // Fall back to JSON format
-            return await APP.api.inspection._fetchDepthJson(jobId, frameIdx, trackId);
-        }
-
-        return {
-            width: w,
-            height: h,
-            min: isNaN(minD) ? 0 : minD,
-            max: isNaN(maxD) ? 1 : maxD,
-            data: data
-        };
-    } else {
-        // JSON + base64 format
-        const json = await resp.json();
-        return APP.api.inspection._decodeDepthJson(json);
-    }
-};
-
-/**
- * Fallback: fetch depth in JSON format if raw binary headers are unavailable.
- */
-APP.api.inspection._fetchDepthJson = async function (jobId, frameIdx, trackId) {
-    const base = APP.core.state.hf.baseUrl;
-    let url = `${base}/inspect/depth/${jobId}/${frameIdx}?format=json`;
-    if (trackId) {
-        url += `&track_id=${encodeURIComponent(trackId)}`;
-    }
-    const resp = await fetch(url);
-    if (!resp.ok) throw new Error(`Depth (JSON) fetch failed: ${resp.status}`);
-    const json = await resp.json();
-    return APP.api.inspection._decodeDepthJson(json);
-};
-
-/**
- * Decode a JSON depth response to the standard { width, height, min, max, data } format.
- */
-APP.api.inspection._decodeDepthJson = function (json) {
-    const raw = atob(json.data_b64);
-    const buf = new ArrayBuffer(raw.length);
-    const view = new Uint8Array(buf);
-    for (let i = 0; i < raw.length; i++) view[i] = raw.charCodeAt(i);
-    return {
-        width: json.width,
-        height: json.height,
-        min: json.min_depth,
-        max: json.max_depth,
-        data: new Float32Array(buf)
-    };
-};
-
-/**
- * Fetch 3D mesh or point cloud data for a specific object.
- * @param {string} jobId
- * @param {number} frameIdx
- * @param {string} trackId
- * @param {boolean} [useGenerative=false] — if true, request Tripo3D generative model (API cost)
- * @returns {Promise<Object>} { renderMode, numVertices, numTriangles, positions, colors, indices?, bbox3d }
- */
-APP.api.inspection.fetchPointCloud = async function (jobId, frameIdx, trackId, useGenerative) {
-    const base = APP.core.state.hf.baseUrl;
-    const resp = await fetch(`${base}/inspect/pointcloud/${jobId}/${frameIdx}`, {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-            track_id: trackId,
-            max_points: 50000,
-            render_mode: "mesh",
-            use_generative: !!useGenerative
-        })
-    });
-    if (!resp.ok) throw new Error(`Point cloud fetch failed: ${resp.status}`);
-
-    const contentType = resp.headers.get("content-type") || "";
-
-    // Tripo3D returns GLB binary
-    if (contentType.includes("model/gltf-binary")) {
-        const buffer = await resp.arrayBuffer();
-        return { type: "glb", buffer: buffer };
-    }
-
-    // Depth-based fallback returns JSON
-    const json = await resp.json();
-
-    function b64decode(b64, TypedArray) {
-        const raw = atob(b64);
-        const buf = new ArrayBuffer(raw.length);
-        const view = new Uint8Array(buf);
-        for (let i = 0; i < raw.length; i++) view[i] = raw.charCodeAt(i);
-        return new TypedArray(buf);
-    }
-
-    const result = {
-        type: "legacy",
-        renderMode: json.render_mode || "points",
-        numVertices: json.num_vertices || json.num_points,
-        numTriangles: json.num_triangles || 0,
-        positions: b64decode(json.positions, Float32Array),
-        colors: b64decode(json.colors, Uint8Array),
-        bbox3d: json.bbox_3d
-    };
-
-    if (json.indices) {
-        result.indices = b64decode(json.indices, Uint32Array);
-    }
-
-    return result;
-};
-
-/**
- * Fetch multi-LLM explainability tree for a tracked object.
- * @param {string} jobId
- * @param {string} trackId
- * @param {AbortSignal} [signal] — for aborting in-flight requests
- * @returns {Promise<Object>} Explanation tree with consensus data
- */
-APP.api.inspection.explainTrack = async function (jobId, trackId, signal) {
-    const base = APP.core.state.hf.baseUrl;
-    const url = `${base}/inspect/explain/${jobId}/${encodeURIComponent(trackId)}`;
-    const resp = await fetch(url, { signal });
-    if (!resp.ok) {
-        const body = await resp.json().catch(() => ({}));
-        throw new Error(body.detail || `Explain failed: ${resp.status}`);
-    }
-    return await resp.json();
-};

frontend/js/core/config.js

@@ -1,15 +0,0 @@
-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 || "",
-    PROXY_URL: (window.API_CONFIG?.PROXY_URL || "").trim(),
-
-    // Tracking Constants
-    REASON_INTERVAL: 30,
-    MAX_TRACKS: 50,
-    TRACK_PRUNE_MS: 1500,
-    TRACK_MATCH_THRESHOLD: 0.25,
-
-    // Default Queries
-    DEFAULT_QUERY_CLASSES: ["drone", "uav", "quadcopter", "fixed-wing", "missile", "person", "vehicle"]
-};

frontend/js/core/demo.js

@@ -1,141 +0,0 @@
-APP.core.demo = {};
-
-APP.core.demo.data = null;
-APP.core.demo.active = false;
-
-APP.core.demo.load = async function () {
-    // Demo data is now loaded per-video via loadForVideo()
-    // This function is kept for compatibility but does nothing
-};
-
-APP.core.demo.getFrameData = function (currentTime) {
-    if (!APP.core.demo.data) return null;
-
-    // Use interpolation for keyframe format
-    if (APP.core.demo.data.format === "keyframes") {
-        return APP.core.demo.getFrameDataInterpolated(currentTime);
-    }
-
-    // Original logic for frame-by-frame data
-    const fps = APP.core.demo.data.fps || 30;
-    const frameIdx = Math.floor(currentTime * fps);
-
-    // Get tracks for this frame
-    // Handle both string and number keys if needed
-    const tracks = APP.core.demo.data.frames[frameIdx] || APP.core.demo.data.frames[frameIdx.toString()];
-
-    if (!tracks) return [];
-    return tracks;
-};
-
-APP.core.demo.enable = function (force = true) {
-    const { log } = APP.ui.logging;
-    APP.core.demo.active = force;
-    if (force) {
-        log("DEMO MODE ACTIVATED", "g");
-        const chipFeed = document.getElementById("chipFeed");
-        if (chipFeed) chipFeed.textContent = "MODE:DEMO";
-    }
-};
-
-// Keyframe interpolation for smooth radar movement
-APP.core.demo._keyframeIndices = null;
-
-APP.core.demo.getKeyframeIndices = function() {
-    if (!APP.core.demo.data || APP.core.demo.data.format !== "keyframes") return null;
-    if (APP.core.demo._keyframeIndices) return APP.core.demo._keyframeIndices;
-
-    const indices = Object.keys(APP.core.demo.data.keyframes)
-        .map(k => parseInt(k, 10))
-        .sort((a, b) => a - b);
-
-    APP.core.demo._keyframeIndices = indices;
-    return indices;
-};
-
-APP.core.demo.interpolateTrack = function(trackA, trackB, t) {
-    const { lerp } = APP.core.utils;
-
-    return {
-        id: trackA.id,
-        label: trackA.label,
-        bbox: {
-            x: lerp(trackA.bbox.x, trackB.bbox.x, t),
-            y: lerp(trackA.bbox.y, trackB.bbox.y, t),
-            w: lerp(trackA.bbox.w, trackB.bbox.w, t),
-            h: lerp(trackA.bbox.h, trackB.bbox.h, t)
-        },
-        angle_deg: trackA.angle_deg,
-        speed_kph: lerp(trackA.speed_kph, trackB.speed_kph, t),
-        depth_valid: false,
-        depth_est_m: null,
-        history: [],
-        predicted_path: []
-    };
-};
-
-APP.core.demo.getFrameDataInterpolated = function(currentTime) {
-    const data = APP.core.demo.data;
-    if (!data || data.format !== "keyframes") return null;
-
-    const fps = data.fps || 24;
-    const frameIdx = Math.floor(currentTime * fps);
-    const keyframes = APP.core.demo.getKeyframeIndices();
-
-    if (!keyframes || keyframes.length === 0) return [];
-
-    // Find surrounding keyframes
-    let beforeIdx = keyframes[0];
-    let afterIdx = keyframes[keyframes.length - 1];
-
-    for (let i = 0; i < keyframes.length; i++) {
-        if (keyframes[i] <= frameIdx) beforeIdx = keyframes[i];
-        if (keyframes[i] >= frameIdx) { afterIdx = keyframes[i]; break; }
-    }
-
-    // Edge cases
-    if (frameIdx <= keyframes[0]) return data.keyframes[keyframes[0]] || [];
-    if (frameIdx >= keyframes[keyframes.length - 1]) return data.keyframes[keyframes[keyframes.length - 1]] || [];
-
-    // Interpolation factor
-    const t = (beforeIdx === afterIdx) ? 0 : (frameIdx - beforeIdx) / (afterIdx - beforeIdx);
-
-    const tracksBefore = data.keyframes[beforeIdx] || [];
-    const tracksAfter = data.keyframes[afterIdx] || [];
-
-    // Match by ID and interpolate
-    const result = [];
-    for (const trackA of tracksBefore) {
-        const trackB = tracksAfter.find(tr => tr.id === trackA.id);
-        if (trackB) {
-            result.push(APP.core.demo.interpolateTrack(trackA, trackB, t));
-        }
-    }
-
-    return result;
-};
-
-// Video-specific loading for demo tracks
-APP.core.demo.loadForVideo = async function(videoName) {
-    const { log } = APP.ui.logging;
-    if (videoName.toLowerCase().includes("enhance_video_movement")) {
-        // Use global variable injected by helicopter_demo_data.js script tag (CORS-safe)
-        if (window.HELICOPTER_DEMO_DATA) {
-            APP.core.demo.data = window.HELICOPTER_DEMO_DATA;
-            APP.core.demo._keyframeIndices = null; // Reset cache
-            log("Helicopter demo tracks loaded (CORS-safe mode).", "g");
-            return;
-        }
-        // Fallback to fetch (works when served from HTTP server)
-        try {
-            const resp = await fetch("data/helicopter_demo_tracks.json");
-            if (resp.ok) {
-                APP.core.demo.data = await resp.json();
-                APP.core.demo._keyframeIndices = null; // Reset cache
-                log("Helicopter demo tracks loaded.", "g");
-            }
-        } catch (err) {
-            console.warn("Failed to load helicopter demo tracks:", err);
-        }
-    }
-};

frontend/js/core/gptMapping.js

@@ -1,37 +0,0 @@
-/**
- * gptMapping.js — canonical GPT-raw → features field mapping.
- *
- * Replaces 4 identical inline mapping blocks across main.js, client.js,
- * and tracker.js (2 locations).
- */
-APP.core.gptMapping = {};
-
-/** Frozen assessment-status string constants. */
-APP.core.gptMapping.STATUS = Object.freeze({
-    ASSESSED: "ASSESSED",
-    UNASSESSED: "UNASSESSED",
-    STALE: "STALE",
-    PENDING_GPT: "PENDING_GPT",
-});
-
-/**
- * Build a features object from a gpt_raw payload.
- *
- * @param {Object|null|undefined} gptRaw - The gpt_raw dict from a detection.
- * @returns {Object} Features key-value map (empty object if gptRaw is falsy).
- */
-APP.core.gptMapping.buildFeatures = function (gptRaw) {
-    if (!gptRaw) return {};
-    const features = {};
-    for (const [k, v] of Object.entries(gptRaw)) {
-        if (k === "satisfies" || k === "reason") continue;
-        features[k] = String(v);
-    }
-    if (gptRaw.satisfies !== undefined) {
-        features["Satisfies"] = gptRaw.satisfies === true ? "Yes" : gptRaw.satisfies === false ? "No" : "—";
-    }
-    if (gptRaw.reason) {
-        features["Reason"] = gptRaw.reason;
-    }
-    return features;
-};

frontend/js/core/physics.js

@@ -1,18 +0,0 @@
-APP.core.physics = {};
-
-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" };
-    }
-    if (l.includes("helicopter")) {
-        return { relx: 0.50, rely: 0.45, label: "rotor_hub" };
-    }
-    if (l.includes("boat") || l.includes("ship")) {
-        return { relx: 0.60, rely: 0.55, label: "bridge/engine" };
-    }
-    if (l.includes("truck") || l.includes("car")) {
-        return { relx: 0.55, rely: 0.62, label: "engine_block" };
-    }
-    return { relx: 0.50, rely: 0.55, label: "center_mass" };
-};

frontend/js/core/state.js

@@ -1,92 +0,0 @@
-APP.core.state = {
-    videoUrl: null,
-    videoFile: null,
-    videoLoaded: false,
-    useProcessedFeed: false,
-    useDepthFeed: false,        // Flag for depth view (Tab 2 video)
-    hasReasoned: false,
-    isReasoning: false,         // Flag to prevent concurrent Reason executions
-
-    hf: {
-        // 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
-        completedJobId: null,       // Preserved job ID for post-completion track sync
-        asyncPollInterval: null,    // Polling timer handle
-        statusUrl: null,            // Status polling URL
-        videoUrl: null,             // Final video URL
-        asyncStatus: "idle",        // "idle"|"processing"|"completed"|"failed"
-        asyncProgress: null,        // Progress data from status endpoint
-        queries: [],                // Mission objective used as query
-        processedUrl: null,
-        processedBlob: null,
-        depthVideoUrl: null,        // Depth video URL
-        depthBlob: null,            // Depth video blob
-        summary: null,
-        fps: null,               // actual video FPS from backend summary
-        totalFrames: null,       // actual total frame count from backend
-        busy: false,
-        lastError: null,
-        missionSpec: null,
-        mode: null                  // "object_detection"|"segmentation"|"drone_detection"
-    },
-
-    detector: {
-        mode: "coco",
-        kind: "object",
-        loaded: false,
-        model: null,
-        loading: false,
-        cocoBlocked: false,
-        hfTrackingWarned: false
-    },
-
-    tracker: {
-        mode: "iou",
-        tracks: [],
-        nextId: 1,
-        lastDetTime: 0,
-        lastHFSync: 0,
-        running: false,
-        selectedTrackId: null,
-        lastFrameTime: 0,
-        frameCount: 0,
-        _lastCardRenderFrame: 0,    // Frame count at last card render
-        heatmap: {},                // { frameIdx: trackCount } for timeline heatmap
-        assessmentCache: {}         // { track_id: { gpt_raw, satisfies, reason, ... } }
-    },
-
-    frame: {
-        w: 1280,
-        h: 720,
-        bitmap: null
-    },
-
-    detections: [], // from Tab 1
-    selectedIds: [],
-
-    ui: {
-        cursorMode: "on",
-        agentCursor: { x: 0.65, y: 0.28, vx: 0, vy: 0, visible: false, target: null, mode: "idle", t0: 0 }
-    },
-
-    inspection: {
-        visible: false,
-        trackId: null,
-        frameIdx: null,
-        frameImageUrl: null,
-        loading: false,
-        error: null,
-        expandedQuadrant: null,    // null | "seg" | "edge" | "depth" | "3d"
-
-        cache: {
-            seg: null,
-            edge: null,
-            depth: null,
-            pointcloud: null
-        },
-
-        explanationCache: {}   // track_id -> explanation result (survives frame changes)
-    }
-};

frontend/js/core/timeline.js

@@ -1,167 +0,0 @@
-/**
- * timeline.js — Lazy heatmap timeline bar for Tab 2 (Track & Monitor).
- *
- * Renders a thin canvas bar showing:
- *   - Detection density heatmap (colored by track count per frame)
- *   - White playhead at current video position
- *   - Click-to-seek interaction
- *
- * Heatmap data is populated lazily by tracker.syncWithBackend() writing
- * track counts into state.tracker.heatmap[frameIdx].
- */
-APP.core.timeline = {};
-
-(function () {
-    const COLORS = {
-        bg:       "#111827",   // unvisited
-        empty:    "#1e293b",   // visited, 0 tracks
-        low:      "rgba(59, 130, 246, 0.35)",  // 1-2 tracks
-        mid:      "rgba(59, 130, 246, 0.65)",  // 3-4 tracks
-        high:     "rgba(96, 165, 250, 0.9)",   // 5+ tracks
-        playhead: "#ffffff",
-    };
-
-    function colorForCount(count) {
-        if (count === undefined) return COLORS.bg;
-        if (count === 0) return COLORS.empty;
-        if (count <= 2) return COLORS.low;
-        if (count <= 4) return COLORS.mid;
-        return COLORS.high;
-    }
-
-    /** Render the timeline heatmap + playhead. Called every RAF frame. */
-    APP.core.timeline.render = function () {
-        const { state } = APP.core;
-        const { $ } = APP.core.utils;
-        const canvas = $("#timelineBar");
-        const video = $("#videoEngage");
-        if (!canvas || !video) return;
-
-        // Cache duration once metadata loads (video.duration is NaN before that)
-        if (video.duration && isFinite(video.duration)) {
-            APP.core.timeline._cachedDuration = video.duration;
-        }
-        const duration = APP.core.timeline._cachedDuration;
-        if (!duration) return;
-
-        const wrap = canvas.parentElement;
-        const rect = wrap.getBoundingClientRect();
-        const dpr = window.devicePixelRatio || 1;
-        const w = Math.floor(rect.width);
-        const h = 14;
-
-        if (canvas.width !== w * dpr || canvas.height !== h * dpr) {
-            canvas.width = w * dpr;
-            canvas.height = h * dpr;
-            canvas.style.width = w + "px";
-            canvas.style.height = h + "px";
-        }
-
-        const ctx = canvas.getContext("2d");
-        ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
-
-        const fps = APP.core.state.hf.fps || 30;
-        const totalFrames = Math.ceil(duration * fps);
-        if (totalFrames <= 0) return;
-
-        const heatmap = state.tracker.heatmap;
-
-        // Draw heatmap segments
-        // Group consecutive pixels mapping to same color to reduce draw calls
-        const pxPerFrame = w / totalFrames;
-
-        if (pxPerFrame >= 1) {
-            // Enough room to draw per-frame
-            for (let f = 0; f < totalFrames; f++) {
-                const x = Math.floor(f * pxPerFrame);
-                const nx = Math.floor((f + 1) * pxPerFrame);
-                ctx.fillStyle = colorForCount(heatmap[f]);
-                ctx.fillRect(x, 0, Math.max(nx - x, 1), h);
-            }
-        } else {
-            // More frames than pixels — bucket frames per pixel
-            for (let px = 0; px < w; px++) {
-                const fStart = Math.floor((px / w) * totalFrames);
-                const fEnd = Math.floor(((px + 1) / w) * totalFrames);
-                let maxCount;
-                for (let f = fStart; f < fEnd; f++) {
-                    const c = heatmap[f];
-                    if (c !== undefined && (maxCount === undefined || c > maxCount)) {
-                        maxCount = c;
-                    }
-                }
-                ctx.fillStyle = colorForCount(maxCount);
-                ctx.fillRect(px, 0, 1, h);
-            }
-        }
-
-        // Draw playhead
-        const progress = video.currentTime / duration;
-        const px = Math.round(progress * w);
-        ctx.fillStyle = COLORS.playhead;
-        ctx.fillRect(px - 1, 0, 2, h);
-    };
-
-    /** Initialize click-to-seek on the timeline canvas. */
-    APP.core.timeline.init = function () {
-        const { $ } = APP.core.utils;
-        const canvas = $("#timelineBar");
-        const video = $("#videoEngage");
-        if (!canvas || !video) return;
-
-        let dragging = false;
-
-        function seek(e) {
-            const rect = canvas.getBoundingClientRect();
-            const x = Math.max(0, Math.min(e.clientX - rect.left, rect.width));
-            const ratio = x / rect.width;
-            const dur = APP.core.timeline._cachedDuration || video.duration;
-            if (dur && isFinite(dur)) {
-                video.currentTime = ratio * dur;
-            }
-        }
-
-        canvas.addEventListener("mousedown", function (e) {
-            dragging = true;
-            seek(e);
-        });
-        window.addEventListener("mousemove", function (e) {
-            if (dragging) seek(e);
-        });
-        window.addEventListener("mouseup", function () {
-            dragging = false;
-        });
-    };
-
-    /** Fetch track summary from backend and populate heatmap + duration. */
-    APP.core.timeline.loadSummary = async function () {
-        const { state } = APP.core;
-        const jobId = state.hf.asyncJobId || state.hf.completedJobId;
-        if (!jobId || !state.hf.baseUrl) return;
-
-        try {
-            const resp = await fetch(`${state.hf.baseUrl}/detect/tracks/${jobId}/summary`);
-            if (!resp.ok) return;
-
-            const data = await resp.json();
-            const frames = data.frames || {};
-
-            // Populate heatmap — keys come as strings from JSON, convert to int
-            state.tracker.heatmap = {};
-            for (const [idx, count] of Object.entries(frames)) {
-                state.tracker.heatmap[parseInt(idx, 10)] = count;
-            }
-
-            // Cache duration from backend metadata (bypass video.duration dependency)
-            if (data.total_frames > 0 && data.fps > 0) {
-                APP.core.timeline._cachedDuration = data.total_frames / data.fps;
-                state.hf.fps = data.fps;
-                state.hf.totalFrames = data.total_frames;
-            }
-
-            console.log(`[timeline] Loaded summary: ${Object.keys(frames).length} frames, duration=${APP.core.timeline._cachedDuration}s`);
-        } catch (e) {
-            console.warn("[timeline] Failed to load summary", e);
-        }
-    };
-})();

frontend/js/core/tracker.js

@@ -1,288 +0,0 @@
-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 { log } = APP.ui.logging;
-
-    const videoEngage = $("#videoEngage");
-
-    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;
-
-    const detObjs = dets.map(d => ({
-        bbox: normBBox(d.bbox, w, h),
-        label: d.class,
-        score: d.score,
-        depth_rel: Number.isFinite(d.depth_rel) ? d.depth_rel : null,
-        depth_est_m: d.depth_est_m,
-        depth_valid: d.depth_valid
-    }));
-
-    // mark all tracks as unmatched
-    const tracks = state.tracker.tracks;
-    const used = new Set();
-
-    for (const tr of tracks) {
-        let best = null;
-        let bestI = 0.0;
-        let bestIdx = -1;
-        for (let i = 0; i < detObjs.length; i++) {
-            if (used.has(i)) continue;
-            const IoU = iou(tr.bbox, detObjs[i].bbox);
-            if (IoU > bestI) {
-                bestI = IoU;
-                best = detObjs[i];
-                bestIdx = i;
-            }
-        }
-
-        // Strict matching threshold
-        if (best && bestI >= CONFIG.TRACK_MATCH_THRESHOLD) {
-            used.add(bestIdx);
-
-            // Velocity with Exponential Moving Average (EMA) for smoothing
-            const cx0 = tr.bbox.x + tr.bbox.w * 0.5;
-            const cy0 = tr.bbox.y + tr.bbox.h * 0.5;
-            const cx1 = best.bbox.x + best.bbox.w * 0.5;
-            const cy1 = best.bbox.y + best.bbox.h * 0.5;
-
-            const rawVx = (cx1 - cx0) / Math.max(1e-3, dtSec);
-            const rawVy = (cy1 - cy0) / Math.max(1e-3, dtSec);
-
-            // Alpha of 0.3 means 30% new value, 70% history
-            tr.vx = tr.vx * 0.7 + rawVx * 0.3;
-            tr.vy = tr.vy * 0.7 + rawVy * 0.3;
-
-            // smooth bbox update
-            tr.bbox.x = lerp(tr.bbox.x, best.bbox.x, 0.7);
-            tr.bbox.y = lerp(tr.bbox.y, best.bbox.y, 0.7);
-            tr.bbox.w = lerp(tr.bbox.w, best.bbox.w, 0.6);
-            tr.bbox.h = lerp(tr.bbox.h, best.bbox.h, 0.6);
-
-            // Logic: Only update label if the new detection is highly confident 
-            // AND the current track doesn't have a "premium" label (like 'drone').
-            const protectedLabels = ["drone", "uav", "missile"];
-            const isProtected = protectedLabels.some(l => (tr.label || "").toLowerCase().includes(l));
-
-            if (!isProtected || (best.label && protectedLabels.some(l => best.label.toLowerCase().includes(l)))) {
-                tr.label = best.label || tr.label;
-            }
-
-            tr.score = best.score || tr.score;
-            if (Number.isFinite(best.depth_rel)) {
-                tr.depth_rel = best.depth_rel;
-            }
-            if (best.depth_valid) {
-                // EMA Smoothing
-                const newD = best.depth_est_m;
-                if (tr.depth_est_m == null) tr.depth_est_m = newD;
-                else tr.depth_est_m = tr.depth_est_m * 0.7 + newD * 0.3;
-                tr.depth_valid = true;
-            }
-            tr.lastSeen = now();
-        } else {
-            // Decay velocity
-            tr.vx *= 0.9;
-            tr.vy *= 0.9;
-        }
-    }
-
-    // Limit total tracks
-    if (tracks.length < CONFIG.MAX_TRACKS) {
-        for (let i = 0; i < detObjs.length; i++) {
-            if (used.has(i)) continue;
-            // create new track only if big enough
-            const a = detObjs[i].bbox.w * detObjs[i].bbox.h;
-            if (a < (w * h) * 0.0005) continue;
-
-            const newId = String(state.tracker.nextId++);
-            tracks.push({
-                id: newId,
-                label: detObjs[i].label,
-                bbox: { ...detObjs[i].bbox },
-                score: detObjs[i].score,
-                depth_rel: detObjs[i].depth_rel,
-                depth_est_m: detObjs[i].depth_est_m,
-                depth_valid: detObjs[i].depth_valid,
-                satisfies: null,
-                reason: null,
-                lastSeen: now(),
-                vx: 0, vy: 0,
-                killed: false,
-                state: "TRACK",
-            });
-            log(`New track created: ${newId} (${detObjs[i].label})`, "t");
-        }
-    }
-
-    // prune old tracks
-    const tNow = now();
-    state.tracker.tracks = tracks.filter(tr => (tNow - tr.lastSeen) < CONFIG.TRACK_PRUNE_MS || tr.killed);
-};
-
-// Polling for backend tracks
-APP.core.tracker.syncWithBackend = async function (frameIdx) {
-    const { state } = APP.core;
-    const { $ } = APP.core.utils;
-    const jobId = state.hf.asyncJobId || state.hf.completedJobId;
-
-    if (!jobId || !state.hf.baseUrl) return;
-
-    try {
-        const resp = await fetch(`${state.hf.baseUrl}/detect/tracks/${jobId}/${frameIdx}`);
-        if (!resp.ok) return;
-
-        const dets = await resp.json();
-        if (!dets || !Array.isArray(dets)) return;
-
-        // If backend returned empty for this frame, keep existing tracks
-        if (dets.length === 0) return;
-
-        // Transform backend format to frontend track format
-        // Backend: { bbox: [x1, y1, x2, y2], label: "car", track_id: "T01", angle_deg: 90, ... }
-        // Frontend: { id: "T01", bbox: {x,y,w,h}, label: "car", angle_deg: 90, ... }
-
-        const videoEngage = $("#videoEngage");
-        const w = videoEngage ? (videoEngage.videoWidth || state.frame.w) : state.frame.w;
-        const h = videoEngage ? (videoEngage.videoHeight || state.frame.h) : state.frame.h;
-
-        const newTracks = dets.map(d => {
-            const x = d.bbox[0], y = d.bbox[1];
-            const wBox = d.bbox[2] - d.bbox[0];
-            const hBox = d.bbox[3] - d.bbox[1];
-
-            // Normalize
-            const nx = x / w;
-            const ny = y / h;
-            const nw = wBox / w;
-            const nh = hBox / h;
-
-            return {
-                id: d.track_id || String(Math.floor(Math.random() * 1000)),
-                label: d.label,
-                bbox: { x: nx, y: ny, w: nw, h: nh },
-                score: d.score,
-                vx: 0,
-                vy: 0,
-                angle_deg: d.angle_deg,
-                speed_kph: d.speed_kph,
-                depth_est_m: d.depth_est_m,
-                depth_rel: d.depth_rel,
-                depth_valid: d.depth_valid,
-                // Satisfaction reasoning
-                satisfies: d.satisfies ?? null,
-                reason: d.reason || null,
-                // Mission relevance and assessment status
-                mission_relevant: d.mission_relevant ?? null,
-                relevance_reason: d.relevance_reason || null,
-                assessment_status: d.assessment_status || APP.core.gptMapping.STATUS.UNASSESSED,
-                assessment_frame_index: d.assessment_frame_index ?? null,
-                // GPT raw data for feature table
-                gpt_raw: d.gpt_raw || null,
-                features: APP.core.gptMapping.buildFeatures(d.gpt_raw),
-                // Keep UI state fields
-                lastSeen: Date.now(),
-                state: "TRACK"
-            };
-        });
-
-        // ── Phase 1: Update assessment cache from tracks that arrived with GPT data ──
-        const cache = state.tracker.assessmentCache;
-        for (const track of newTracks) {
-            if (track.gpt_raw || track.assessment_status === APP.core.gptMapping.STATUS.ASSESSED) {
-                cache[track.id] = {
-                    gpt_raw: track.gpt_raw,
-                    satisfies: track.satisfies,
-                    reason: track.reason,
-                    mission_relevant: track.mission_relevant,
-                    relevance_reason: track.relevance_reason,
-                    assessment_status: track.assessment_status,
-                    assessment_frame_index: track.assessment_frame_index,
-                    features: track.features,
-                };
-            }
-        }
-
-        // ── Phase 2: Carry forward cached assessment for tracks missing GPT data ──
-        for (const track of newTracks) {
-            if (track.gpt_raw) continue;
-            const cached = cache[track.id];
-            if (!cached) continue;
-            track.gpt_raw = cached.gpt_raw;
-            track.satisfies = cached.satisfies ?? track.satisfies;
-            track.reason = cached.reason || track.reason;
-            track.mission_relevant = cached.mission_relevant ?? track.mission_relevant;
-            track.relevance_reason = cached.relevance_reason || track.relevance_reason;
-            track.assessment_status = cached.assessment_status || APP.core.gptMapping.STATUS.ASSESSED;
-            track.assessment_frame_index = cached.assessment_frame_index ?? track.assessment_frame_index;
-            track.features = cached.features && Object.keys(cached.features).length > 0
-                ? cached.features
-                : track.features;
-        }
-
-        // Check if mission verdicts exist (used for filtering cards, heatmap, logs)
-        const hasVerdicts = newTracks.some(t => t.satisfies === true || t.satisfies === false);
-
-        // Detect new objects before state update — only log MATCH items when verdicts exist
-        const oldIds = new Set(state.tracker.tracks.map(t => t.id));
-        const brandNew = newTracks.filter(t => !oldIds.has(t.id));
-        const logWorthy = hasVerdicts
-            ? brandNew.filter(t => t.satisfies === true)
-            : brandNew;
-        if (logWorthy.length > 0) {
-            state.tracker._newObjectDetected = true;
-            APP.ui.logging.log(`New objects: ${logWorthy.map(t => t.id).join(", ")}`, "t");
-        }
-
-        // Cache track count for timeline heatmap (only MATCH items when verdicts exist)
-        const matchCount = hasVerdicts
-            ? newTracks.filter(t => t.satisfies === true).length
-            : newTracks.length;
-        state.tracker.heatmap[frameIdx] = matchCount;
-
-        // Update state
-        state.tracker.tracks = newTracks;
-        state.detections = newTracks; // Keep synced
-
-        // Always trigger card re-render after backend sync (verdicts may have changed)
-        state.tracker._newObjectDetected = true;
-
-    } catch (e) {
-        console.warn("Track sync failed", e);
-    }
-};
-
-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;
-
-    // Simple clamp util locally or imported
-    const clamp = (val, min, max) => Math.min(max, Math.max(min, val));
-
-    state.tracker.tracks.forEach(tr => {
-        if (tr.killed) return;
-        tr.bbox.x = clamp(tr.bbox.x + (tr.vx || 0) * dtSec * 0.12, 0, w - 1);
-        tr.bbox.y = clamp(tr.bbox.y + (tr.vy || 0) * dtSec * 0.12, 0, h - 1);
-    });
-};

frontend/js/core/utils.js

@@ -1,55 +0,0 @@
-APP.core.utils = {};
-
-APP.core.utils.$ = (sel, root = document) => root.querySelector(sel);
-APP.core.utils.$$ = (sel, root = document) => Array.from(root.querySelectorAll(sel));
-
-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]));
-};
-
-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 => {
-            if (!blob) { reject(new Error("Canvas toBlob failed")); return; }
-            resolve(blob);
-        }, "image/jpeg", quality);
-    });
-};
-
-APP.core.utils.normBBox = function (bbox, w, h) {
-    const [x, y, bw, bh] = bbox;
-    return {
-        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)
-    };
-};
-
-APP.core.utils.loadedScripts = new Map();
-
-APP.core.utils.loadScriptOnce = function (key, src) {
-    return new Promise((resolve, reject) => {
-        if (APP.core.utils.loadedScripts.get(key) === "loaded") { resolve(); return; }
-        if (APP.core.utils.loadedScripts.get(key) === "loading") {
-            const iv = setInterval(() => {
-                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;
-        }
-
-        APP.core.utils.loadedScripts.set(key, "loading");
-        const s = document.createElement("script");
-        s.src = src;
-        s.async = true;
-        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

@@ -1,367 +0,0 @@
-// Video management: loading, unloading, first frame capture, depth handling
-APP.core.video = {};
-
-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 (_) { }
-    }
-    // Reset state
-    state.videoUrl = null;
-    state.videoFile = null;
-    state.videoLoaded = false;
-    state.useProcessedFeed = false;
-    state.useDepthFeed = false;
-
-    state.hf.processedUrl = null;
-    state.hf.processedBlob = null;
-    state.hf.depthVideoUrl = null;
-    state.hf.depthBlob = null;
-    state.hf.summary = null;
-    state.hf.busy = false;
-    state.hf.lastError = null;
-    state.hf.asyncJobId = null;
-    state.hf.completedJobId = null;
-    state.hf.asyncStatus = "idle";
-    state.hf.videoUrl = null;
-    state.hf.fps = null;
-    state.hf.totalFrames = 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.selectedIds = [];
-
-    state.tracker.tracks = [];
-    state.tracker.nextId = 1;
-    state.tracker.running = false;
-    state.tracker.selectedTrackId = null;
-    state.tracker.assessmentCache = {};
-    state.inspection.explanationCache = {};
-
-    // Clear video elements
-    const videoEngage = $("#videoEngage");
-    const videoFile = $("#videoFile");
-
-    if (videoEngage) {
-        videoEngage.removeAttribute("src");
-        videoEngage.load();
-    }
-    if (!preserveInput && videoFile) {
-        videoFile.value = "";
-    }
-
-    // Update UI
-    const videoMeta = $("#videoMeta");
-    const engageEmpty = $("#engageEmpty");
-    const engageNote = $("#engageNote");
-
-    if (!preserveInput && videoMeta) videoMeta.textContent = "No file";
-    if (engageEmpty) engageEmpty.style.display = "flex";
-    if (engageNote) engageNote.textContent = "Awaiting video";
-
-    // Re-render UI components
-    if (APP.ui.cards.renderFrameTrackList) APP.ui.cards.renderFrameTrackList();
-
-    setStatus("warn", "STANDBY · No video loaded");
-    log("Video unloaded. Demo reset.", "w");
-};
-
-// 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" || (window.location && window.location.protocol === "file:");
-        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.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" || (window.location && window.location.protocol === "file:");
-    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.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";
-};
-

frontend/js/init.js

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

frontend/js/main.js

@@ -1,762 +0,0 @@
-// 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 { unloadVideo, toggleDepthView, toggleProcessedFeed, setStreamingMode, stopStreamingMode } = APP.core.video;
-    const { load: loadDemo, getFrameData: getDemoFrameData, enable: enableDemo } = APP.core.demo;
-
-    // UI Renderers
-    const { renderFrameTrackList } = APP.ui.cards;
-    const { render: renderOverlay, init: initOverlay } = APP.ui.overlays;
-    const { tickAgentCursor, moveCursorToRect } = APP.ui.cursor;
-    const { matchAndUpdateTracks, predictTracks } = APP.core.tracker;
-
-    // DOM Elements
-    const videoEngage = $("#videoEngage");
-    const videoFile = $("#videoFile");
-    const btnReason = $("#btnReason");
-    const btnCancelReason = $("#btnCancelReason");
-    const btnEject = $("#btnEject");
-    const btnEngage = $("#btnEngage");
-    const btnReset = $("#btnReset");
-    const btnPause = $("#btnPause");
-    const btnToggleSidebar = $("#btnToggleSidebar");
-
-    const detectorSelect = $("#detectorSelect");
-    const missionText = $("#missionText");
-    const cursorMode = $("#cursorMode");
-    const engageEmpty = $("#engageEmpty");
-    const engageNote = $("#engageNote");
-
-    const chipFeed = $("#chipFeed");
-    const chipDepth = $("#chipDepth");
-
-    // Animation module shortcuts
-    const anim = APP.ui.animations;
-
-    // Initialization
-    function init() {
-        log("System initializing...", "t");
-
-        setupFileUpload();
-        setupControls();
-        setupKnobListeners();
-        setupChipToggles();
-
-        // Initial UI sync
-        setHfStatus("idle");
-
-        // Initialize SVG overlay
-        initOverlay();
-
-        // Initialize chat panel
-        APP.ui.chat.init();
-
-        // Initialize timeline seek interaction
-        APP.core.timeline.init();
-
-        // Initialize inspection panel
-        APP.ui.inspection.init();
-
-        // Initialize animation system
-        if (anim && anim.init) anim.init();
-
-        // Start main loop
-        requestAnimationFrame(loop);
-
-        // Load demo data (if available)
-        loadDemo().then(() => {
-            // hidden usage: enable if video filename matches "demo" or manually
-            // APP.core.demo.enable(true);
-        });
-
-        log("System ready.", "g");
-
-        // Update footer stat bar with initial model
-        if (anim) {
-            anim.updateModel(detectorSelect ? detectorSelect.options[detectorSelect.selectedIndex].text : "YOLO11");
-            anim.updateStatus("Ready");
-        }
-    }
-
-    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";
-            if (engageNote) engageNote.textContent = "Ready";
-
-            setStatus("warn", "Video loaded - ready to detect");
-            log(`Video loaded: ${file.name}`, "g");
-
-            // Toast + stat bar
-            if (anim) {
-                anim.toast("Video loaded: " + file.name, "success");
-                anim.updateStatus("Ready");
-            }
-
-            // Load video-specific demo tracks (e.g., helicopter demo)
-            if (APP.core.demo.loadForVideo) {
-                await APP.core.demo.loadForVideo(file.name);
-            }
-
-            // Auto-enable demo mode if filename contains "demo" or helicopter video
-            const shouldEnableDemo = file.name.toLowerCase().includes("demo") ||
-                file.name.toLowerCase().includes("enhance_video_movement");
-            if (shouldEnableDemo && APP.core.demo.data) {
-                enableDemo(true);
-                log("Auto-enabled DEMO mode for this video.", "g");
-            }
-        });
-    }
-
-    function setupControls() {
-        // Reason button
-        if (btnReason) {
-            btnReason.addEventListener("click", runReason);
-        }
-
-        // Cancel Reason button
-        if (btnCancelReason) {
-            btnCancelReason.addEventListener("click", cancelReasoning);
-        }
-
-        // Eject button
-        if (btnEject) {
-            btnEject.addEventListener("click", async () => {
-                await unloadVideo();
-            });
-        }
-
-        // Engage button
-        if (btnEngage) {
-            btnEngage.addEventListener("click", runEngage);
-        }
-
-        // Pause / Resume toggle button
-        if (btnPause) {
-            btnPause.addEventListener("click", () => {
-                if (!videoEngage) return;
-                if (videoEngage.paused) {
-                    videoEngage.play().catch(err => {
-                        log(`Video resume failed: ${err.message}`, "e");
-                    });
-                    state.tracker.running = true;
-                    btnPause.textContent = "Resume";
-                    log("Tracking resumed.", "t");
-                } else {
-                    videoEngage.pause();
-                    btnPause.textContent = "Pause";
-                    log("Video paused.", "t");
-                }
-            });
-        }
-
-        // 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;
-                state.tracker.heatmap = {};
-                state.tracker.assessmentCache = {};
-                state.inspection.explanationCache = {};
-                state.hf.fps = null;
-                state.hf.totalFrames = null;
-                APP.core.timeline._cachedDuration = null;
-                if (btnPause) btnPause.textContent = "Pause";
-                renderFrameTrackList();
-                log("Tracking 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 Panel"
-                        : "Hide Panel";
-                }
-            });
-        }
-    }
-
-
-
-    // Track selection event — multi-select toggle
-    document.addEventListener("track-selected", (e) => {
-        const clickedId = e.detail.id;
-        const vid = $("#videoEngage");
-
-        if (!clickedId) {
-            // Click on empty area — deselect all
-            state.selectedIds = [];
-            state.tracker.selectedTrackId = null;
-            APP.ui.chat.clear();
-            APP.ui.inspection.close();
-            renderFrameTrackList();
-            renderOverlay();
-            // Auto-resume playback
-            if (vid && vid.paused && state.tracker.running) {
-                vid.play().catch(() => {});
-                if (btnPause) btnPause.textContent = "Pause";
-            }
-            return;
-        }
-
-        // Toggle: add or remove from selectedIds
-        const idx = state.selectedIds.indexOf(clickedId);
-        if (idx >= 0) {
-            // Deselect this track
-            state.selectedIds.splice(idx, 1);
-            APP.ui.chat.removeTrackContext(clickedId);
-            // Update selectedTrackId to last remaining, or null
-            state.tracker.selectedTrackId = state.selectedIds.length > 0
-                ? state.selectedIds[state.selectedIds.length - 1]
-                : null;
-        } else {
-            // Select this track
-            state.selectedIds.push(clickedId);
-            state.tracker.selectedTrackId = clickedId;
-            // Pause video to freeze on the selected object
-            if (vid && !vid.paused) {
-                vid.pause();
-                if (btnPause) btnPause.textContent = "Resume";
-            }
-        }
-
-        // Sync tracker.tracks from detections if empty
-        if (state.tracker.tracks.length === 0 && state.detections.length > 0) {
-            state.tracker.tracks = [...state.detections];
-        }
-
-        renderFrameTrackList();
-        renderOverlay();
-
-        // Open inspection for last-clicked track (even if deselecting, show last remaining)
-        const inspectId = state.tracker.selectedTrackId;
-        if (inspectId) {
-            APP.ui.inspection.open(inspectId);
-        } else {
-            APP.ui.inspection.close();
-        }
-
-        // Inject track context into chat (additive)
-        const selectedTrack = (state.detections || []).find(d => d.id === clickedId);
-        if (selectedTrack && state.selectedIds.includes(clickedId)) {
-            APP.ui.chat.injectTrackContext(selectedTrack);
-        }
-
-        // Scroll selected card into view
-        const card = document.getElementById(`card-${clickedId}`);
-        if (card) card.scrollIntoView({ behavior: "smooth", block: "nearest" });
-    });
-
-    // 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", () => {
-                // Knob change handler (overlay rendering removed)
-            });
-        });
-
-        // Update stat bar when detector changes
-        if (detectorSelect) {
-            detectorSelect.addEventListener("change", () => {
-                if (anim) {
-                    anim.updateModel(detectorSelect.options[detectorSelect.selectedIndex].text);
-                }
-            });
-        }
-    }
-
-    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");
-            });
-        }
-
-    }
-
-    async function runReason() {
-        if (!state.videoLoaded) {
-            log("No video loaded. Upload a video first.", "w");
-            setStatus("warn", "Upload a video to begin");
-            return;
-        }
-
-        if (state.isReasoning) {
-            log("Detection already in progress. Please wait.", "w");
-            return;
-        }
-
-        // Lock the Reason process
-        state.isReasoning = true;
-        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.selectedIds = [];
-        renderFrameTrackList();
-
-        setStatus("warn", "Running detection pipeline");
-
-        // Show progress ring + ambient processing state
-        if (anim) {
-            anim.showProgressRing("Initializing...");
-            anim.setBodyState("processing");
-            anim.setDotProcessing(true);
-            anim.updateStatus("Processing");
-            anim.toast("Detection pipeline started", "info");
-            // Update model name in stat bar
-            const modelText = detectorSelect ? detectorSelect.options[detectorSelect.selectedIndex].text : "YOLO11";
-            anim.updateModel(modelText);
-        }
-
-        try {
-            const selectedOption = detectorSelect ? detectorSelect.options[detectorSelect.selectedIndex] : null;
-            const selectedValue = detectorSelect ? detectorSelect.value : "yolo11";
-            const kind = selectedOption ? selectedOption.getAttribute("data-kind") : "object";
-            const queries = missionText ? missionText.value.trim() : "";
-            const enableDepth = false; // depth mode disabled
-
-            // Determine mode and model parameter from data-kind attribute
-            let mode, detectorParam, segmenterParam;
-            if (kind === "segmentation") {
-                mode = "segmentation";
-                segmenterParam = selectedValue;
-                detectorParam = "yolo11"; // default, unused for segmentation
-            } else if (kind === "drone") {
-                mode = "drone_detection";
-                detectorParam = selectedValue;
-                segmenterParam = "GSAM2-L";
-            } else {
-                mode = "object_detection";
-                detectorParam = selectedValue;
-                segmenterParam = "GSAM2-L";
-            }
-
-            const form = new FormData();
-            form.append("video", state.videoFile);
-            form.append("mode", mode);
-            if (queries) form.append("queries", queries);
-            form.append("detector", detectorParam);
-            form.append("segmenter", segmenterParam);
-            form.append("enable_depth", enableDepth ? "true" : "false");
-
-            const missionVal = missionText ? missionText.value.trim() : "";
-            if (missionVal) form.append("mission", missionVal);
-
-            log(`Submitting job to ${state.hf.baseUrl}...`, "t");
-            setHfStatus("submitting job...");
-
-            const data = await hfDetectAsync(form);
-
-            state.hf.asyncJobId = data.job_id;
-            state.hf.mode = mode;
-
-            // Store depth video URL 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");
-            }
-
-            // 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 'Track' tab.", "g");
-                setStatus("warn", "Live processing... View in Track tab");
-
-                // Poll tracks during live streaming (no video element to derive frameIdx from)
-                const streamTrackPoll = setInterval(async () => {
-                    const jobId = state.hf.asyncJobId;
-                    if (!jobId || !state.hf.baseUrl) return;
-                    try {
-                        // Fetch summary to find latest frame with track data
-                        const sumResp = await fetch(`${state.hf.baseUrl}/detect/tracks/${jobId}/summary`);
-                        if (!sumResp.ok) return;
-                        const summary = await sumResp.json();
-                        const frames = summary.frames || {};
-                        const frameIndices = Object.keys(frames).map(Number).filter(n => !isNaN(n));
-                        if (!frameIndices.length) return;
-
-                        const latestIdx = Math.max(...frameIndices);
-                        const trackResp = await fetch(`${state.hf.baseUrl}/detect/tracks/${jobId}/${latestIdx}`);
-                        if (!trackResp.ok) return;
-                        const dets = await trackResp.json();
-                        if (!Array.isArray(dets) || !dets.length) return;
-
-                        // Map to frontend format
-                        const newTracks = dets.map(d => {
-                            const bw = d.bbox[2] - d.bbox[0];
-                            const bh = d.bbox[3] - d.bbox[1];
-                            // Use stream image dimensions or fallback
-                            const streamView = $("#streamView");
-                            const fw = streamView ? (streamView.naturalWidth || 1280) : 1280;
-                            const fh = streamView ? (streamView.naturalHeight || 720) : 720;
-                            return {
-                                id: d.track_id || String(Math.floor(Math.random() * 1000)),
-                                label: d.label,
-                                bbox: { x: d.bbox[0] / fw, y: d.bbox[1] / fh, w: bw / fw, h: bh / fh },
-                                score: d.score,
-                                speed_kph: d.speed_kph,
-                                vx: 0,
-                                vy: 0,
-                                satisfies: d.satisfies ?? null,
-                                reason: d.reason || null,
-                                mission_relevant: d.mission_relevant ?? null,
-                                assessment_status: d.assessment_status || APP.core.gptMapping.STATUS.UNASSESSED,
-                                gpt_raw: d.gpt_raw || null,
-                                features: APP.core.gptMapping.buildFeatures(d.gpt_raw),
-                                lastSeen: Date.now(),
-                                state: "TRACK"
-                            };
-                        });
-
-                        state.detections = newTracks;
-                        state.tracker.tracks = newTracks;
-                        renderFrameTrackList();
-                    } catch (e) { /* ignore stream poll errors */ }
-                }, 1000);
-                state.hf._streamTrackPoll = streamTrackPoll;
-            }
-
-            // Start polling for completion
-            pollAsyncJob().then(() => {
-                log("Video processing complete.", "g");
-                // Stop streaming track polling and streaming mode
-                if (state.hf._streamTrackPoll) {
-                    clearInterval(state.hf._streamTrackPoll);
-                    state.hf._streamTrackPoll = null;
-                }
-                stopStreamingMode();
-
-                state.hasReasoned = true;
-                setStatus("good", "Detection complete - ready to track");
-                log("Detection complete. Ready to Track.", "g");
-
-                // Animation: complete state
-                if (anim) {
-                    anim.updateProgressRing(1.0, "Complete");
-                    anim.setDotProcessing(false);
-                    anim.setBodyState("complete");
-                    anim.updateStatus("Complete");
-                    anim.toast("Detection complete - " + (state.detections || []).length + " objects found", "success", 5000);
-                    setTimeout(function() { anim.hideProgressRing(); }, 800);
-                }
-
-                // Seed tracks for Tab 2
-                seedTracksFromTab1();
-
-                // Re-enable engage button
-                if (btnEngage) btnEngage.disabled = false;
-            }).catch(err => {
-                log(`Polling error: ${err.message}`, "e");
-                if (state.hf._streamTrackPoll) {
-                    clearInterval(state.hf._streamTrackPoll);
-                    state.hf._streamTrackPoll = null;
-                }
-                stopStreamingMode();
-
-                // Animation: error state
-                if (anim) {
-                    anim.hideProgressRing();
-                    anim.setDotProcessing(false);
-                    anim.setBodyState("error");
-                    anim.updateStatus("Error");
-                    anim.toast("Detection failed: " + err.message, "error", 6000);
-                }
-            });
-
-            // Initial status (processing in background)
-            setStatus("warn", "Processing video...");
-            log("Detection started...", "t");
-
-
-
-        } catch (err) {
-            setStatus("bad", "Detection failed");
-            log(`Detection failed: ${err.message}`, "e");
-            console.error(err);
-
-            if (anim) {
-                anim.hideProgressRing();
-                anim.setDotProcessing(false);
-                anim.setBodyState("error");
-                anim.updateStatus("Error");
-                anim.toast("Detection failed: " + err.message, "error", 6000);
-            }
-        } finally {
-            state.isReasoning = false;
-            if (btnReason) {
-                btnReason.disabled = false;
-                btnReason.style.opacity = "1";
-                btnReason.style.cursor = "pointer";
-            }
-            if (btnCancelReason) btnCancelReason.style.display = "none";
-            // Re-enable engage button in case of failure
-            if (btnEngage) btnEngage.disabled = false;
-        }
-    }
-
-    function seedTracksFromTab1() {
-        // Preserve detections from streaming poll if available
-        if (state.detections && state.detections.length > 0) {
-            state.tracker.tracks = [...state.detections];
-        } else {
-            state.tracker.tracks = [];
-        }
-        state.tracker.nextId = 1;
-        log("Tracks initialized.", "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.completedJobId = 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", "Detection cancelled");
-        setHfStatus("cancelled (stopped by user)");
-        log("Detection cancelled by user.", "w");
-
-        if (anim) {
-            anim.hideProgressRing();
-            anim.setDotProcessing(false);
-            anim.setBodyState("idle");
-            anim.updateStatus("Cancelled");
-            anim.toast("Detection cancelled", "warning");
-        }
-    }
-
-    function runEngage() {
-        if (!state.hasReasoned) {
-            log("Please run Detect first.", "w");
-            return;
-        }
-
-        if (state.hf.asyncJobId) {
-            log("Processing still in progress. Please wait.", "w");
-            return;
-        }
-
-        // Set video source
-        if (videoEngage) {
-            videoEngage.src = state.hf.processedUrl || state.videoUrl;
-            videoEngage.play().catch(err => {
-                log(`Video playback failed: ${err.message}`, "e");
-            });
-        }
-
-        state.tracker.running = true;
-        state.tracker.lastFrameTime = APP.core.utils.now();
-        if (btnPause) btnPause.textContent = "Pause";
-
-        // Ensure tracks are seeded
-        if (state.tracker.tracks.length === 0) {
-            seedTracksFromTab1();
-        }
-
-        log("Tracking started.", "g");
-
-        if (anim) {
-            anim.setBodyState("complete");
-            anim.updateStatus("Tracking");
-            anim.toast("Real-time tracking active", "success");
-        }
-    }
-
-    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;
-
-        // ── Always keep track positions fresh (playing OR paused) ──
-        // This ensures bboxes remain clickable regardless of playback state.
-        if (state.tracker.running && videoEngage) {
-            if (APP.core.demo.active && APP.core.demo.data) {
-                // DEMO MODE: sync tracks to current video time (even when paused)
-                const demoTracks = getDemoFrameData(videoEngage.currentTime);
-                if (demoTracks) {
-                    const tracksClone = JSON.parse(JSON.stringify(demoTracks));
-
-                    state.tracker.tracks = tracksClone.map(d => ({
-                        ...d,
-                        lastSeen: t,
-                        state: "TRACK",
-                        depth_valid: false,
-                        depth_est_m: null,
-                    }));
-
-                    const w = videoEngage.videoWidth || state.frame.w || 1280;
-                    const h = videoEngage.videoHeight || state.frame.h || 720;
-
-                    state.tracker.tracks.forEach(tr => {
-                        if (tr.bbox.x > 1 || tr.bbox.w > 1) {
-                            tr.bbox.x /= w;
-                            tr.bbox.y /= h;
-                            tr.bbox.w /= w;
-                            tr.bbox.h /= h;
-                        }
-                    });
-                }
-            } else {
-                // NORMAL MODE: predict positions every frame (only if tracks exist)
-                if (state.tracker.tracks.length > 0) {
-                    predictTracks(dt);
-                }
-
-                // Backend sync every 333ms — always runs, even with zero tracks
-                const jobId = state.hf.asyncJobId || state.hf.completedJobId;
-                if (jobId && (t - state.tracker.lastHFSync > 333)) {
-                    const fps = state.hf.fps || 30;
-                    const maxFrame = state.hf.totalFrames ? state.hf.totalFrames - 1 : Infinity;
-                    const frameIdx = Math.min(Math.floor(videoEngage.currentTime * fps), maxFrame);
-                    if (isFinite(frameIdx) && frameIdx >= 0) {
-                        APP.core.tracker.syncWithBackend(frameIdx);
-                    }
-                    state.tracker.lastHFSync = t;
-                }
-
-                // Refresh inspection panel if frame changed
-                if (APP.ui.inspection.refreshFrame) {
-                    APP.ui.inspection.refreshFrame();
-                }
-            }
-        }
-
-        // ── Card rendering ──
-        if (state.tracker.running && videoEngage) {
-            // Always render immediately when new objects arrive (even if paused)
-            if (state.tracker._newObjectDetected) {
-                renderFrameTrackList();
-                state.tracker._lastCardRenderFrame = state.tracker.frameCount;
-                state.tracker._newObjectDetected = false;
-            }
-
-            // Periodic re-render during active playback
-            if (!videoEngage.paused) {
-                state.tracker.frameCount++;
-                const framesSinceRender = state.tracker.frameCount - state.tracker._lastCardRenderFrame;
-                if (framesSinceRender >= 40) {
-                    renderFrameTrackList();
-                    state.tracker._lastCardRenderFrame = state.tracker.frameCount;
-                }
-            }
-        }
-
-        // Render UI
-        renderOverlay();
-        if (tickAgentCursor) tickAgentCursor();
-        APP.core.timeline.render();
-
-        requestAnimationFrame(loop);
-    }
-
-    // Expose state for debugging
-    window.__LP_STATE__ = state;
-
-    // Start
-    init();
-});

frontend/js/ui/animations.js

@@ -1,146 +0,0 @@
-// Animations Module — Toast notifications, progress ring, stat counters, ambient state
-APP.ui.animations = {};
-
-// =========================================
-//  Toast Notification System
-// =========================================
-
-APP.ui.animations._toastQueue = [];
-APP.ui.animations._toastMax = 4;
-
-/**
- * Show a toast notification.
- * @param {string} message - Text to display
- * @param {"info"|"success"|"warning"|"error"} type - Toast type
- * @param {number} duration - Auto-dismiss in ms (default 4000)
- */
-APP.ui.animations.toast = function (message, type, duration) {
-    type = type || "info";
-    duration = duration || 4000;
-
-    var container = document.getElementById("toastContainer");
-    if (!container) return;
-
-    var toast = document.createElement("div");
-    toast.className = "toast";
-    toast.innerHTML =
-        '<span class="toast-icon ' + type + '"></span>' +
-        '<span class="toast-text">' + message + '</span>' +
-        '<div class="toast-progress" style="animation-duration:' + duration + 'ms"></div>';
-
-    container.appendChild(toast);
-    APP.ui.animations._toastQueue.push(toast);
-
-    // Enforce max visible
-    while (APP.ui.animations._toastQueue.length > APP.ui.animations._toastMax) {
-        var old = APP.ui.animations._toastQueue.shift();
-        if (old && old.parentNode) old.parentNode.removeChild(old);
-    }
-
-    // Auto-dismiss
-    setTimeout(function () {
-        toast.classList.add("exiting");
-        setTimeout(function () {
-            if (toast.parentNode) toast.parentNode.removeChild(toast);
-            var idx = APP.ui.animations._toastQueue.indexOf(toast);
-            if (idx > -1) APP.ui.animations._toastQueue.splice(idx, 1);
-        }, 280);
-    }, duration);
-};
-
-// =========================================
-//  Progress Ring (video overlay)
-// =========================================
-
-APP.ui.animations.showProgressRing = function (text) {
-    var wrap = document.getElementById("progressRing");
-    var ring = document.getElementById("progressRingFg");
-    var label = document.getElementById("progressRingText");
-    if (!wrap) return;
-
-    wrap.classList.add("visible");
-    if (label) label.textContent = text || "Processing...";
-    if (ring) ring.style.strokeDashoffset = "264"; // 0%
-};
-
-APP.ui.animations.updateProgressRing = function (fraction, text) {
-    var ring = document.getElementById("progressRingFg");
-    var label = document.getElementById("progressRingText");
-    if (!ring) return;
-
-    // circumference = 2 * PI * 42 = ~264
-    var offset = 264 - (264 * Math.min(Math.max(fraction, 0), 1));
-    ring.style.strokeDashoffset = String(offset);
-    if (label && text) label.textContent = text;
-};
-
-APP.ui.animations.hideProgressRing = function () {
-    var wrap = document.getElementById("progressRing");
-    if (wrap) wrap.classList.remove("visible");
-};
-
-// =========================================
-//  Footer Stat Bar (animated counters)
-// =========================================
-
-APP.ui.animations._statValues = {};
-
-APP.ui.animations.updateStat = function (id, value) {
-    var el = document.getElementById(id);
-    if (!el) return;
-
-    var prev = APP.ui.animations._statValues[id];
-    if (prev === value) return;
-
-    APP.ui.animations._statValues[id] = value;
-    el.textContent = value;
-
-    // Flash accent color on change
-    el.classList.add("updated");
-    setTimeout(function () { el.classList.remove("updated"); }, 600);
-};
-
-// Convenience: update track count with animated counter effect
-APP.ui.animations.animateTrackCount = function (count) {
-    APP.ui.animations.updateStat("statTracks", String(count));
-};
-
-APP.ui.animations.updateModel = function (modelName) {
-    APP.ui.animations.updateStat("statModel", modelName);
-};
-
-APP.ui.animations.updateStatus = function (statusText) {
-    APP.ui.animations.updateStat("statStatus", statusText);
-};
-
-// =========================================
-//  Ambient State Management
-// =========================================
-
-APP.ui.animations.setBodyState = function (state) {
-    // Remove all state classes
-    document.body.classList.remove("state-processing", "state-complete", "state-error", "state-idle");
-    if (state) {
-        document.body.classList.add("state-" + state);
-    }
-};
-
-// Set processing dot to pulse
-APP.ui.animations.setDotProcessing = function (active) {
-    var dot = document.getElementById("sys-dot");
-    if (!dot) return;
-    if (active) {
-        dot.classList.add("processing");
-    } else {
-        dot.classList.remove("processing");
-    }
-};
-
-// =========================================
-//  Init (called from main.js)
-// =========================================
-
-APP.ui.animations.init = function () {
-    // Set initial state
-    APP.ui.animations.setBodyState("idle");
-};

frontend/js/ui/cards.js

@@ -1,122 +0,0 @@
-APP.ui.cards = {};
-
-APP.ui.cards.renderFrameTrackList = function () {
-    const { state } = APP.core;
-    const { $ } = APP.core.utils;
-    const frameTrackList = $("#frameTrackList");
-    const trackList = $("#trackList");       // Tab 2 (Engage) uses the same card logic
-    const trackCount = $("#trackCount");
-
-    if (!frameTrackList && !trackList) return;
-    if (frameTrackList) frameTrackList.innerHTML = "";
-    if (trackList) trackList.innerHTML = "";
-
-    // Filter: show only MATCH items when mission assessment is active
-    const allDets = state.detections || [];
-    const hasVerdicts = allDets.some(d => d.satisfies === true || d.satisfies === false);
-    const dets = hasVerdicts ? allDets.filter(d => d.satisfies === true) : allDets;
-
-    if (trackCount) trackCount.textContent = dets.length;
-
-    // Update footer stat
-    if (APP.ui.animations && APP.ui.animations.animateTrackCount) {
-        APP.ui.animations.animateTrackCount(dets.length);
-    }
-
-    if (dets.length === 0) {
-        const emptyMsg = '<div style="color:var(--text3); text-align:center; margin-top:20px; font-size:12px;">No objects detected yet.</div>';
-        if (frameTrackList) frameTrackList.innerHTML = emptyMsg;
-        if (trackList) trackList.innerHTML = emptyMsg;
-        return;
-    }
-
-    // Sort: mission-relevant first, then assessed (high→low conf), then unassessed, then stale
-    const sorted = [...dets].sort((a, b) => {
-        // 1. Mission-relevant objects always on top
-        const relA = a.mission_relevant === true ? 0 : 1;
-        const relB = b.mission_relevant === true ? 0 : 1;
-        if (relA !== relB) return relA - relB;
-        // 2. Assessed before unassessed before stale
-        const S = APP.core.gptMapping.STATUS;
-        const statusOrder = { [S.ASSESSED]: 0, [S.UNASSESSED]: 1, [S.STALE]: 2 };
-        const statusA = statusOrder[a.assessment_status] ?? 1;
-        const statusB = statusOrder[b.assessment_status] ?? 1;
-        if (statusA !== statusB) return statusA - statusB;
-        // 3. Higher confidence first
-        return (b.score || 0) - (a.score || 0);
-    });
-
-    sorted.forEach((det, i) => {
-        const id = det.id || String(i + 1);
-        const isActive = state.selectedIds.includes(id);
-        const isInspected = state.tracker.selectedTrackId === id;
-
-        const card = document.createElement("div");
-        card.className = "track-card" + (isActive ? " active" : "") + (isInspected ? " inspected" : "");
-        card.id = `card-${id}`;
-        // Staggered entrance animation
-        card.style.animationDelay = (i * 40) + "ms";
-        if (det.mission_relevant === false) {
-            card.style.opacity = "0.4";
-        }
-
-        card.onclick = () => {
-            const ev = new CustomEvent("track-selected", { detail: { id } });
-            document.dispatchEvent(ev);
-        };
-
-        // Single unified status badge
-        const S = APP.core.gptMapping.STATUS;
-        const assessStatus = det.assessment_status || S.UNASSESSED;
-        let statusBadge = "";
-        if (det.satisfies === true) {
-            statusBadge = '<span class="badgemini" style="background:rgba(52,211,153,.15); color:#34d399; border:1px solid rgba(52,211,153,.25)">Match</span>';
-        } else if (det.satisfies === false) {
-            statusBadge = '<span class="badgemini" style="background:rgba(248,113,113,.12); color:#f87171; border:1px solid rgba(248,113,113,.2)">No Match</span>';
-        } else if (det.mission_relevant === true) {
-            statusBadge = '<span class="badgemini" style="background:rgba(59,130,246,.12); color:#60a5fa; border:1px solid rgba(59,130,246,.2)">Relevant</span>';
-        } else if (assessStatus === S.STALE) {
-            statusBadge = '<span class="badgemini" style="background:rgba(251,191,36,.1); color:#fbbf24; border:1px solid rgba(251,191,36,.18)">Stale</span>';
-        } else if (det.mission_relevant === false) {
-            statusBadge = '<span class="badgemini" style="background:rgba(255,255,255,.04); color:rgba(255,255,255,.4); border:1px solid rgba(255,255,255,.08)">N/R</span>';
-        } else {
-            statusBadge = `<span class="badgemini" style="background:rgba(255,255,255,.05); color:rgba(255,255,255,.6); border:1px solid rgba(255,255,255,.08)">${(det.score * 100).toFixed(0)}%</span>`;
-        }
-
-        // Satisfaction reason (collapsed summary)
-        const desc = det.reason
-            ? `<div class="track-card-body"><span class="gpt-text">${det.reason}</span></div>`
-            : "";
-
-        // Inline features (only shown when active/expanded)
-        let featuresHtml = "";
-        if (isInspected && det.features && Object.keys(det.features).length > 0) {
-            const entries = Object.entries(det.features).slice(0, 12);
-            const rows = entries.map(([k, v]) =>
-                `<div class="feat-row"><span class="feat-key">${k}</span><span class="feat-val">${String(v)}</span></div>`
-            ).join("");
-            featuresHtml = `<div class="track-card-features">${rows}</div>`;
-        }
-
-        card.innerHTML = `
-            <div class="track-card-header">
-                <span>${det.label}</span>
-                ${statusBadge}
-            </div>
-            ${desc}
-            ${featuresHtml}
-        `;
-        if (frameTrackList) frameTrackList.appendChild(card);
-        if (trackList) trackList.appendChild(card.cloneNode(true));
-    });
-
-    // Wire up click handlers on cloned Tab 2 cards
-    if (trackList) {
-        trackList.querySelectorAll(".track-card").forEach(card => {
-            const id = card.id.replace("card-", "");
-            card.onclick = () => {
-                document.dispatchEvent(new CustomEvent("track-selected", { detail: { id } }));
-            };
-        });
-    }
-};

frontend/js/ui/chat.js

@@ -1,320 +0,0 @@
-// Chat UI Module - Mission Analyst Chatbot (Multi-Object Context)
-APP.ui.chat = {};
-
-APP.ui.chat._history = [];
-APP.ui.chat._trackContexts = {};  // { trackId: trackObject }
-APP.ui.chat._msgCounter = 0;
-
-APP.ui.chat.init = function () {
-    const { $ } = APP.core.utils;
-    const input = $("#chatInput");
-    const btn = $("#chatSend");
-
-    if (input) {
-        input.addEventListener("keydown", (e) => {
-            if (e.key === "Enter" && !e.shiftKey) {
-                e.preventDefault();
-                APP.ui.chat.send();
-            }
-        });
-    }
-    if (btn) {
-        btn.addEventListener("click", () => APP.ui.chat.send());
-    }
-
-    const clearBtn = $("#chatClear");
-    if (clearBtn) {
-        clearBtn.addEventListener("click", () => APP.ui.chat.clear());
-    }
-};
-
-APP.ui.chat.send = async function () {
-    const { $ } = APP.core.utils;
-    const input = $("#chatInput");
-    if (!input) return;
-
-    const message = input.value.trim();
-    if (!message) return;
-
-    input.value = "";
-    input.disabled = true;
-
-    const missionText = $("#missionText");
-    const mission = missionText ? missionText.value.trim() : "";
-
-    // Add user message to UI and history
-    APP.ui.chat._addMessage("user", message);
-    APP.ui.chat._history.push({ role: "user", content: message });
-
-    // Show loading indicator
-    const loadingId = APP.ui.chat._addMessage("assistant", "", true);
-
-    try {
-        const activeObjects = Object.values(APP.ui.chat._trackContexts);
-        const response = await APP.api.client.chatSend(
-            message,
-            mission,
-            activeObjects,
-            APP.ui.chat._history
-        );
-
-        // Remove loading, add real response
-        APP.ui.chat._removeMessage(loadingId);
-        APP.ui.chat._addMessage("assistant", response);
-        APP.ui.chat._history.push({ role: "assistant", content: response });
-    } catch (err) {
-        APP.ui.chat._removeMessage(loadingId);
-        APP.ui.chat._addMessage("system", "Error: " + err.message);
-    }
-
-    input.disabled = false;
-    input.focus();
-};
-
-/**
- * Add a track to the active context (additive — does not clear).
- */
-APP.ui.chat.injectTrackContext = function (track) {
-    if (!track) return;
-
-    // Skip if already in context
-    if (APP.ui.chat._trackContexts[track.id]) return;
-
-    APP.ui.chat._trackContexts[track.id] = track;
-
-    // Build visible context summary
-    const parts = [`${track.id} \u00b7 ${track.label}`];
-    if (track.assessment_status) parts.push(track.assessment_status);
-    if (track.satisfies === true) parts.push("satisfies=YES");
-    else if (track.satisfies === false) parts.push("satisfies=NO");
-    if (track.mission_relevant === true) parts.push("RELEVANT");
-    else if (track.mission_relevant === false) parts.push("NOT RELEVANT");
-    if (track.score != null) parts.push(`conf=${(track.score * 100).toFixed(0)}%`);
-    if (track.reason) parts.push(track.reason);
-
-    APP.ui.chat._addMessage("marker", "Context loaded for " + parts.join(" \u00b7 "));
-
-    // Update header and suggestions
-    APP.ui.chat._renderHeader();
-    APP.ui.chat._renderSuggestions();
-    APP.ui.chat._updatePlaceholder();
-};
-
-/**
- * Remove a track from active context.
- */
-APP.ui.chat.removeTrackContext = function (trackId) {
-    if (!APP.ui.chat._trackContexts[trackId]) return;
-
-    const track = APP.ui.chat._trackContexts[trackId];
-    delete APP.ui.chat._trackContexts[trackId];
-
-    APP.ui.chat._addMessage("marker", "\u2500\u2500 " + track.id + " " + track.label + " removed from context \u2500\u2500");
-
-    APP.ui.chat._renderHeader();
-    APP.ui.chat._renderSuggestions();
-    APP.ui.chat._updatePlaceholder();
-};
-
-/**
- * Full clear — reset everything.
- */
-APP.ui.chat.clear = function () {
-    const { $ } = APP.core.utils;
-    const container = $("#chatMessages");
-    if (container) container.innerHTML = "";
-    APP.ui.chat._history = [];
-    APP.ui.chat._trackContexts = {};
-    APP.ui.chat._renderHeader();
-    APP.ui.chat._renderSuggestions();
-    APP.ui.chat._updatePlaceholder();
-};
-
-/**
- * Render the persistent context header with chips.
- */
-APP.ui.chat._renderHeader = function () {
-    const { $ } = APP.core.utils;
-    const header = $("#chatContextHeader");
-    const chips = $("#chatContextChips");
-    if (!header || !chips) return;
-
-    const contexts = Object.values(APP.ui.chat._trackContexts);
-
-    if (contexts.length === 0) {
-        header.style.display = "none";
-        return;
-    }
-
-    header.style.display = "flex";
-    const esc = APP.core.utils.escapeHtml;
-    chips.innerHTML = contexts.map(t => {
-        let statusClass = "unassessed";
-        let statusDot = "\u25CF";
-        if (t.satisfies === true) statusClass = "match";
-        else if (t.satisfies === false) statusClass = "no-match";
-
-        return `<span class="chat-context-chip">
-            ${esc(t.id)} <span class="chip-label">${esc(t.label)}</span>
-            <span class="chip-status ${statusClass}">${statusDot}</span>
-        </span>`;
-    }).join("");
-};
-
-/**
- * Generate and render suggestion chips (only when 2+ objects).
- */
-APP.ui.chat._renderSuggestions = function () {
-    const { $ } = APP.core.utils;
-    const container = $("#chatSuggestions");
-    if (!container) return;
-
-    const contexts = Object.values(APP.ui.chat._trackContexts);
-
-    if (contexts.length < 2) {
-        container.style.display = "none";
-        return;
-    }
-
-    const suggestions = APP.ui.chat._generateSuggestions(contexts);
-
-    if (suggestions.length === 0) {
-        container.style.display = "none";
-        return;
-    }
-
-    container.style.display = "flex";
-    container.innerHTML = suggestions.map(s =>
-        `<span class="chat-suggestion-chip">${s}</span>`
-    ).join("");
-
-    // Wire click handlers
-    container.querySelectorAll(".chat-suggestion-chip").forEach(chip => {
-        chip.addEventListener("click", () => {
-            const input = $("#chatInput");
-            if (input) {
-                input.value = chip.textContent;
-                APP.ui.chat.send();
-            }
-        });
-    });
-};
-
-/**
- * Rule-based suggestion generation from active object set.
- * Returns top 3-4 suggestions.
- */
-APP.ui.chat._generateSuggestions = function (objects) {
-    const suggestions = [];
-
-    // Rule 1: Mixed satisfaction
-    const matches = objects.filter(o => o.satisfies === true);
-    const noMatches = objects.filter(o => o.satisfies === false);
-    if (matches.length > 0 && noMatches.length > 0) {
-        suggestions.push(`Why does ${noMatches[0].id} fail mission?`);
-    }
-
-    // Rule 2: Different classes
-    const labels = [...new Set(objects.map(o => o.label))];
-    if (labels.length > 1 && objects.length <= 4) {
-        const a = objects[0], b = objects.find(o => o.label !== a.label);
-        if (b) suggestions.push(`Compare ${a.id} (${a.label}) and ${b.id} (${b.label})`);
-    }
-
-    // Rule 3: Speed delta
-    const withSpeed = objects.filter(o => o.speed_kph != null && o.speed_kph > 0);
-    if (withSpeed.length >= 2) {
-        const speeds = withSpeed.map(o => o.speed_kph);
-        const delta = Math.max(...speeds) - Math.min(...speeds);
-        if (delta > 15) suggestions.push("Which is moving faster?");
-    }
-
-    // Rule 4: Depth delta
-    const withDepth = objects.filter(o => o.depth_est_m != null && o.depth_est_m > 0);
-    if (withDepth.length >= 2) {
-        const depths = withDepth.map(o => o.depth_est_m);
-        const delta = Math.max(...depths) - Math.min(...depths);
-        if (delta > 50) suggestions.push("Compare distances");
-    }
-
-    // Rule 5: Both match mission
-    if (matches.length >= 2) {
-        suggestions.push("Which is higher priority?");
-    }
-
-    // Rule 6: Low confidence
-    const lowConf = objects.find(o => o.score != null && o.score < 0.7);
-    if (lowConf) {
-        suggestions.push(`How confident is ${lowConf.id} classification?`);
-    }
-
-    // Rule 7: 3+ objects — aggregate
-    if (objects.length >= 3) {
-        suggestions.push("Rank by threat level");
-    }
-
-    // Rule 8: Stale assessment
-    const S = APP.core.gptMapping ? APP.core.gptMapping.STATUS : {};
-    const stale = objects.find(o => o.assessment_status === (S.STALE || "STALE"));
-    if (stale) {
-        suggestions.push(`Is ${stale.id} assessment still valid?`);
-    }
-
-    // Rule 9: Mixed motion (stationary vs moving)
-    const moving = objects.filter(o => o.speed_kph != null && o.speed_kph > 2);
-    const stationary = objects.filter(o => o.speed_kph == null || o.speed_kph <= 2);
-    if (moving.length > 0 && stationary.length > 0) {
-        suggestions.push("Compare movement patterns");
-    }
-
-    // Return top 4, deduplicated
-    return suggestions.slice(0, 4);
-};
-
-/**
- * Update input placeholder based on context state.
- */
-APP.ui.chat._updatePlaceholder = function () {
-    const { $ } = APP.core.utils;
-    const input = $("#chatInput");
-    if (!input) return;
-
-    const count = Object.keys(APP.ui.chat._trackContexts).length;
-    if (count === 0) {
-        input.placeholder = "Select a track to start...";
-    } else if (count === 1) {
-        input.placeholder = "Ask about loaded object...";
-    } else {
-        input.placeholder = `Ask about ${count} loaded objects...`;
-    }
-};
-
-APP.ui.chat._addMessage = function (role, content, loading) {
-    const { $ } = APP.core.utils;
-    const container = $("#chatMessages");
-    if (!container) return null;
-
-    const id = "chat-msg-" + (++APP.ui.chat._msgCounter);
-    const div = document.createElement("div");
-    div.className = "chat-message chat-" + role + (loading ? " loading" : "");
-    div.id = id;
-
-    const esc = APP.core.utils.escapeHtml;
-    if (role === "marker") {
-        div.innerHTML = `<span class="chat-content">${esc(content)}</span>`;
-    } else {
-        const safe = (role === "user") ? esc(content) : content;
-        const labels = { user: "You", assistant: "AI", system: "SYS" };
-        div.innerHTML = `<span class="chat-icon">${labels[role] || ""}</span><span class="chat-content">${safe}</span>`;
-    }
-
-    container.appendChild(div);
-    container.scrollTop = container.scrollHeight;
-    return id;
-};
-
-APP.ui.chat._removeMessage = function (id) {
-    if (!id) return;
-    const el = document.getElementById(id);
-    if (el) el.remove();
-};

frontend/js/ui/cursor.js

@@ -1,90 +0,0 @@
-// 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(59, 130, 246, 0.9), rgba(96, 165, 250, 0.9));
-        box-shadow: 0 0 16px rgba(59, 130, 246, 0.5), 0 0 32px rgba(96, 165, 250, 0.3);
-        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/explainability.js

@@ -1,367 +0,0 @@
-/**
- * explainability.js — Interactive hierarchical interpretability graph.
- *
- * Renders a D3.js tree showing why an object was classified,
- * with multi-LLM consensus indicators and hover tooltips.
- */
-APP.ui.explainability = {};
-
-/** @type {AbortController|null} */
-APP.ui.explainability._abortCtrl = null;
-
-/** Category color fallback */
-APP.ui.explainability._COLORS = {
-    Structure: "#3b82f6", Function: "#06b6d4", Material: "#f59e0b",
-    Color: "#ef4444", Size: "#10b981", Type: "#8b5cf6",
-    Motion: "#ec4899", Context: "#64748b", Shape: "#f97316", Markings: "#a855f7",
-};
-
-/**
- * Fetch + render the explainability graph for a track.
- * Aborts any previous in-flight request.
- */
-APP.ui.explainability.load = async function (jobId, trackId) {
-    const { state } = APP.core;
-    const container = document.getElementById("interpretabilityGraph");
-    if (!container) return;
-
-    // Check cache first
-    const cached = state.inspection.explanationCache[trackId];
-    if (cached) {
-        APP.ui.explainability.render(cached, container);
-        return;
-    }
-
-    // Abort previous request
-    if (APP.ui.explainability._abortCtrl) {
-        APP.ui.explainability._abortCtrl.abort();
-    }
-    APP.ui.explainability._abortCtrl = new AbortController();
-
-    // Show loading
-    container.innerHTML =
-        '<div class="explain-loading">' +
-        '<div class="explain-spinner"></div>' +
-        '<span>Analyzing with GPT-4o, Claude, and Gemini...</span>' +
-        '</div>';
-
-    try {
-        const data = await APP.api.inspection.explainTrack(
-            jobId, trackId, APP.ui.explainability._abortCtrl.signal
-        );
-        state.inspection.explanationCache[trackId] = data;
-        APP.ui.explainability.render(data, container);
-    } catch (err) {
-        if (err.name === "AbortError") return; // Aborted — new track selected
-        container.innerHTML =
-            '<div class="explain-error">' + _escHtml(err.message) + '</div>';
-    }
-};
-
-/**
- * Render the hierarchical tree inside a container element.
- */
-APP.ui.explainability.render = function (data, container) {
-    container.innerHTML = "";
-
-    if (!data || !data.categories || data.categories.length === 0) {
-        container.innerHTML = '<div class="explain-error">No explanation data available</div>';
-        return;
-    }
-
-    // Build D3 hierarchy data
-    const root = {
-        name: (data.object || "OBJECT").toUpperCase(),
-        confidence: data.confidence,
-        satisfies: data.satisfies,
-        summary: data.reasoning_summary,
-        children: data.categories.map(cat => ({
-            name: cat.name,
-            color: cat.color || APP.ui.explainability._COLORS[cat.name] || "#64748b",
-            isCategory: true,
-            children: (cat.features || []).map(f => ({
-                name: f.name,
-                value: f.value,
-                reasoning: f.reasoning,
-                validators: f.validators || {},
-                consensus: f.consensus || 0,
-                color: cat.color || APP.ui.explainability._COLORS[cat.name] || "#64748b",
-                isFeature: true,
-            })),
-        })),
-    };
-
-    // Dimensions
-    const margin = { top: 30, right: 20, bottom: 60, left: 20 };
-    const width = container.clientWidth || 500;
-    const totalLeaves = root.children.reduce((s, c) => s + (c.children ? c.children.length : 1), 0);
-    const height = Math.max(280, totalLeaves * 35 + 120);
-
-    // Create SVG
-    const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-    svg.setAttribute("width", width);
-    svg.setAttribute("height", height);
-    svg.setAttribute("class", "explain-svg");
-    container.appendChild(svg);
-
-    // Glow filter
-    const defs = document.createElementNS("http://www.w3.org/2000/svg", "defs");
-    defs.innerHTML =
-        '<filter id="explainGlow"><feGaussianBlur stdDeviation="3" result="blur"/>' +
-        '<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge></filter>';
-    svg.appendChild(defs);
-
-    // D3 tree layout
-    const hierarchy = d3.hierarchy(root);
-    const treeLayout = d3.tree().size([
-        width - margin.left - margin.right,
-        height - margin.top - margin.bottom,
-    ]);
-    treeLayout(hierarchy);
-
-    const g = document.createElementNS("http://www.w3.org/2000/svg", "g");
-    g.setAttribute("transform", `translate(${margin.left},${margin.top})`);
-    svg.appendChild(g);
-
-    // Draw edges (curved paths)
-    hierarchy.links().forEach(link => {
-        const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
-        const sx = link.source.x, sy = link.source.y;
-        const tx = link.target.x, ty = link.target.y;
-        const my = (sy + ty) / 2;
-        path.setAttribute("d", `M${sx},${sy} C${sx},${my} ${tx},${my} ${tx},${ty}`);
-        path.setAttribute("fill", "none");
-        path.setAttribute("stroke", link.target.data.color || "#3b82f6");
-        path.setAttribute("stroke-width", link.source.depth === 0 ? "2.5" : "1.5");
-        path.setAttribute("opacity", "0.5");
-        path.setAttribute("filter", "url(#explainGlow)");
-        g.appendChild(path);
-    });
-
-    // Draw nodes
-    hierarchy.descendants().forEach(node => {
-        const d = node.data;
-        const ng = document.createElementNS("http://www.w3.org/2000/svg", "g");
-        ng.setAttribute("transform", `translate(${node.x},${node.y})`);
-
-        if (node.depth === 0) {
-            // Root node
-            _drawRootNode(ng, d);
-        } else if (d.isCategory) {
-            // Category node
-            _drawCategoryNode(ng, d);
-        } else if (d.isFeature) {
-            // Feature leaf node
-            _drawFeatureNode(ng, d);
-        }
-
-        // Tooltip on hover
-        ng.addEventListener("mouseenter", (e) => _showTooltip(e, d, container));
-        ng.addEventListener("mouseleave", () => _hideTooltip(container));
-
-        g.appendChild(ng);
-    });
-
-    // Consensus bar
-    if (data.consensus_bar) {
-        _drawConsensusBar(svg, data.consensus_bar, width, height, margin);
-    }
-};
-
-/**
- * Clear the graph and remove tooltip.
- */
-APP.ui.explainability.clear = function () {
-    const container = document.getElementById("interpretabilityGraph");
-    if (container) container.innerHTML = "";
-    if (APP.ui.explainability._abortCtrl) {
-        APP.ui.explainability._abortCtrl.abort();
-        APP.ui.explainability._abortCtrl = null;
-    }
-};
-
-
-// ── Private helpers ──────────────────────────────────────────────
-
-function _drawRootNode(g, d) {
-    const w = 120, h = 32, rx = 8;
-    const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
-    rect.setAttribute("x", -w / 2); rect.setAttribute("y", -h / 2);
-    rect.setAttribute("width", w); rect.setAttribute("height", h);
-    rect.setAttribute("rx", rx); rect.setAttribute("fill", "#7c3aed");
-    rect.setAttribute("filter", "url(#explainGlow)");
-    g.appendChild(rect);
-
-    const text = document.createElementNS("http://www.w3.org/2000/svg", "text");
-    text.setAttribute("text-anchor", "middle"); text.setAttribute("dy", "0.35em");
-    text.setAttribute("fill", "white"); text.setAttribute("font-size", "11");
-    text.setAttribute("font-weight", "700");
-    text.textContent = d.name;
-    if (d.confidence != null) text.textContent += ` ${Math.round(d.confidence * 100)}%`;
-    g.appendChild(text);
-}
-
-function _drawCategoryNode(g, d) {
-    const w = 90, h = 26, rx = 6;
-    const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
-    rect.setAttribute("x", -w / 2); rect.setAttribute("y", -h / 2);
-    rect.setAttribute("width", w); rect.setAttribute("height", h);
-    rect.setAttribute("rx", rx); rect.setAttribute("fill", d.color || "#3b82f6");
-    rect.setAttribute("filter", "url(#explainGlow)"); rect.setAttribute("opacity", "0.95");
-    g.appendChild(rect);
-
-    const text = document.createElementNS("http://www.w3.org/2000/svg", "text");
-    text.setAttribute("text-anchor", "middle"); text.setAttribute("dy", "0.35em");
-    text.setAttribute("fill", "white"); text.setAttribute("font-size", "9");
-    text.setAttribute("font-weight", "600");
-    text.textContent = d.name;
-    g.appendChild(text);
-}
-
-function _drawFeatureNode(g, d) {
-    const w = 80, h = 22, rx = 5;
-    const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
-    rect.setAttribute("x", -w / 2); rect.setAttribute("y", -h / 2);
-    rect.setAttribute("width", w); rect.setAttribute("height", h);
-    rect.setAttribute("rx", rx); rect.setAttribute("fill", "#0f172a");
-    rect.setAttribute("stroke", d.color || "#3b82f6"); rect.setAttribute("stroke-width", "1.5");
-    g.appendChild(rect);
-
-    const text = document.createElementNS("http://www.w3.org/2000/svg", "text");
-    text.setAttribute("text-anchor", "middle"); text.setAttribute("dy", "0.35em");
-    text.setAttribute("fill", _lightenColor(d.color || "#3b82f6")); text.setAttribute("font-size", "7.5");
-    text.textContent = d.name.length > 12 ? d.name.slice(0, 11) + "\u2026" : d.name;
-    g.appendChild(text);
-
-    // Validator badge
-    const total = Object.keys(d.validators || {}).length;
-    if (total > 0) {
-        const agreed = Object.values(d.validators).filter(v => v.agree).length;
-        const badge = document.createElementNS("http://www.w3.org/2000/svg", "text");
-        badge.setAttribute("x", w / 2 - 4); badge.setAttribute("y", -h / 2 - 3);
-        badge.setAttribute("text-anchor", "end"); badge.setAttribute("font-size", "7");
-        badge.setAttribute("fill", agreed === total ? "#4ade80" : "#f87171");
-        badge.textContent = `${agreed}/${total}`;
-        g.appendChild(badge);
-    }
-}
-
-function _drawConsensusBar(svg, bar, width, height, margin) {
-    // Positioned at the bottom of the SVG
-    const barY = height - 30;
-    const barW = width - 40;
-    const barX = 20;
-    const barH = 6;
-    const ratio = bar.total_features > 0 ? bar.agreed / bar.total_features : 0;
-
-    // Background
-    const bg = document.createElementNS("http://www.w3.org/2000/svg", "rect");
-    bg.setAttribute("x", barX); bg.setAttribute("y", barY);
-    bg.setAttribute("width", barW); bg.setAttribute("height", barH);
-    bg.setAttribute("rx", 3); bg.setAttribute("fill", "#1e293b");
-    svg.appendChild(bg);
-
-    // Fill
-    const fill = document.createElementNS("http://www.w3.org/2000/svg", "rect");
-    fill.setAttribute("x", barX); fill.setAttribute("y", barY);
-    fill.setAttribute("width", barW * ratio); fill.setAttribute("height", barH);
-    fill.setAttribute("rx", 3); fill.setAttribute("fill", "#7c3aed");
-    fill.setAttribute("opacity", "0.8"); fill.setAttribute("filter", "url(#explainGlow)");
-    svg.appendChild(fill);
-
-    // Label
-    const label = document.createElementNS("http://www.w3.org/2000/svg", "text");
-    label.setAttribute("x", barX); label.setAttribute("y", barY + barH + 14);
-    label.setAttribute("fill", "#a78bfa"); label.setAttribute("font-size", "9");
-    label.textContent = `${bar.agreed}/${bar.total_features} features agreed`;
-    svg.appendChild(label);
-
-    const vLabel = document.createElementNS("http://www.w3.org/2000/svg", "text");
-    vLabel.setAttribute("x", barX + barW); vLabel.setAttribute("y", barY + barH + 14);
-    vLabel.setAttribute("text-anchor", "end");
-    vLabel.setAttribute("fill", "#6b7280"); vLabel.setAttribute("font-size", "9");
-    vLabel.textContent = `${bar.validators_available}/2 validators`;
-    svg.appendChild(vLabel);
-}
-
-function _showTooltip(event, data, container) {
-    _hideTooltip(container);
-    if (!data.reasoning && !data.isCategory && !data.summary) return;
-
-    const tip = document.createElement("div");
-    tip.className = "explain-tooltip";
-
-    if (data.isCategory) {
-        // Category summary
-        const children = data.children || [];
-        const total = children.length;
-        const allAgreed = children.filter(c => {
-            const vals = Object.values(c.validators || {});
-            return vals.length > 0 && vals.every(v => v.agree);
-        }).length;
-        tip.innerHTML = `<strong>${_escHtml(data.name)}</strong><br>${allAgreed}/${total} features fully validated`;
-    } else if (data.isFeature) {
-        // Feature detail
-        let html = `<strong>${_escHtml(data.name)}</strong>`;
-        if (data.reasoning) {
-            html += `<div class="tip-section"><span class="tip-label">GPT-4o:</span> ${_escHtml(data.reasoning)}</div>`;
-        }
-        const validators = data.validators || {};
-        if (validators.claude) {
-            const icon = validators.claude.agree ? "\u2713" : "\u2717";
-            const cls = validators.claude.agree ? "tip-agree" : "tip-disagree";
-            html += `<div class="tip-section ${cls}"><span class="tip-label">${icon} Claude:</span> ${_escHtml(validators.claude.note || "")}</div>`;
-        }
-        if (validators.gemini) {
-            const icon = validators.gemini.agree ? "\u2713" : "\u2717";
-            const cls = validators.gemini.agree ? "tip-agree" : "tip-disagree";
-            html += `<div class="tip-section ${cls}"><span class="tip-label">${icon} Gemini:</span> ${_escHtml(validators.gemini.note || "")}</div>`;
-        }
-        tip.innerHTML = html;
-    } else if (data.summary) {
-        tip.innerHTML = `<strong>${_escHtml(data.name)}</strong><br>${_escHtml(data.summary)}`;
-    }
-
-    // Position near the hovered element
-    const rect = event.target.closest("g").getBoundingClientRect();
-    const containerRect = container.getBoundingClientRect();
-    let left = rect.left - containerRect.left + rect.width / 2;
-    let top = rect.top - containerRect.top - 8;
-
-    tip.style.left = left + "px";
-    tip.style.top = top + "px";
-    tip.style.transform = "translate(-50%, -100%)";
-
-    container.appendChild(tip);
-
-    // Clamp to container bounds
-    const tipRect = tip.getBoundingClientRect();
-    if (tipRect.left < containerRect.left) {
-        tip.style.left = (left + (containerRect.left - tipRect.left) + 4) + "px";
-    }
-    if (tipRect.right > containerRect.right) {
-        tip.style.left = (left - (tipRect.right - containerRect.right) - 4) + "px";
-    }
-}
-
-function _hideTooltip(container) {
-    const old = container.querySelector(".explain-tooltip");
-    if (old) old.remove();
-}
-
-function _escHtml(str) {
-    const div = document.createElement("div");
-    div.textContent = str || "";
-    return div.innerHTML;
-}
-
-function _lightenColor(hex) {
-    // Return a lighter version for text on dark backgrounds
-    const map = {
-        "#3b82f6": "#93c5fd", "#06b6d4": "#a5f3fc", "#f59e0b": "#fde68a",
-        "#ef4444": "#fca5a5", "#10b981": "#6ee7b7", "#8b5cf6": "#c4b5fd",
-        "#ec4899": "#f9a8d4", "#64748b": "#94a3b8", "#f97316": "#fdba74",
-        "#a855f7": "#d8b4fe",
-    };
-    return map[hex] || "#e2e8f0";
-}

frontend/js/ui/inspection-3d.js

@@ -1,474 +0,0 @@
-// Inspection 3D Viewer — Three.js mesh + point cloud renderer
-APP.ui.inspection3d = {};
-
-// Internal state
-APP.ui.inspection3d._scene = null;
-APP.ui.inspection3d._camera = null;
-APP.ui.inspection3d._renderer = null;
-APP.ui.inspection3d._controls = null;
-APP.ui.inspection3d._animFrameId = null;
-APP.ui.inspection3d._object = null;
-APP.ui.inspection3d._label = null;
-APP.ui.inspection3d._disposed = false;
-
-/**
- * Load Three.js and OrbitControls (once).
- */
-APP.ui.inspection3d._ensureThreeJs = async function () {
-    const { loadScriptOnce } = APP.core.utils;
-    await loadScriptOnce("three", "/app/vendor/three.min.js");
-    await loadScriptOnce("three-orbit", "/app/vendor/OrbitControls.js");
-    await loadScriptOnce("three-gltf", "/app/vendor/GLTFLoader.js");
-};
-
-/**
- * Render 3D data in the inspection container.
- * Supports both mesh (with indices) and point cloud modes.
- * @param {Object} data — from fetchPointCloud
- */
-APP.ui.inspection3d.render = async function (data) {
-    if (!data || !data.positions || !data.colors) return;
-
-    const { $ } = APP.core.utils;
-    const container = $("#quad3dContainer");
-    if (!container) return;
-
-    try {
-        await APP.ui.inspection3d._ensureThreeJs();
-    } catch (err) {
-        console.error("Failed to load 3D libraries:", err);
-        return;
-    }
-
-    APP.ui.inspection3d.dispose();
-    APP.ui.inspection3d._disposed = false;
-
-    const rect = container.getBoundingClientRect();
-    const width = rect.width || 600;
-    const height = rect.height || 350;
-    const isMesh = data.renderMode === "mesh" && data.indices && data.indices.length > 0;
-
-    // ── Scene ──
-    const scene = new THREE.Scene();
-    scene.background = new THREE.Color(0x0a0f1e);
-
-    // ── Camera ──
-    const camera = new THREE.PerspectiveCamera(50, width / height, 0.01, 500);
-
-    // ── Renderer ──
-    const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: false });
-    renderer.setSize(width, height);
-    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
-    container.appendChild(renderer.domElement);
-
-    // ── OrbitControls ──
-    const controls = new THREE.OrbitControls(camera, renderer.domElement);
-    controls.enableDamping = true;
-    controls.dampingFactor = 0.08;
-    controls.rotateSpeed = 0.8;
-    controls.zoomSpeed = 1.0;
-    controls.panSpeed = 0.6;
-    controls.minDistance = 0.1;
-    controls.maxDistance = 50;
-
-    // ── Geometry ──
-    const geometry = new THREE.BufferGeometry();
-    geometry.setAttribute("position", new THREE.Float32BufferAttribute(data.positions, 3));
-
-    // Normalize colors to [0,1]
-    const colorFloats = new Float32Array(data.colors.length);
-    for (let i = 0; i < data.colors.length; i++) {
-        colorFloats[i] = data.colors[i] / 255.0;
-    }
-    geometry.setAttribute("color", new THREE.Float32BufferAttribute(colorFloats, 3));
-
-    // Center geometry
-    geometry.computeBoundingBox();
-    const bbox = geometry.boundingBox;
-    const center = new THREE.Vector3();
-    bbox.getCenter(center);
-    geometry.translate(-center.x, -center.y, -center.z);
-
-    // Normalize scale — depth is arbitrary, scale to ~4 units
-    const rawSize = new THREE.Vector3();
-    bbox.getSize(rawSize);
-    const rawMaxDim = Math.max(rawSize.x, rawSize.y, rawSize.z) || 1;
-    const scaleFactor = 4.0 / rawMaxDim;
-    geometry.scale(scaleFactor, scaleFactor, scaleFactor);
-
-    let object3d;
-
-    if (isMesh) {
-        // ── Triangle mesh mode ──
-        geometry.setIndex(new THREE.BufferAttribute(data.indices, 1));
-        geometry.computeVertexNormals();
-
-        const material = new THREE.MeshPhongMaterial({
-            vertexColors: true,
-            side: THREE.DoubleSide,
-            shininess: 25,
-            specular: new THREE.Color(0x222222),
-            flatShading: false
-        });
-
-        object3d = new THREE.Mesh(geometry, material);
-
-        // Better lighting for mesh
-        const ambient = new THREE.AmbientLight(0xffffff, 0.5);
-        scene.add(ambient);
-
-        const keyLight = new THREE.DirectionalLight(0xffffff, 0.7);
-        keyLight.position.set(5, 5, 5);
-        scene.add(keyLight);
-
-        const fillLight = new THREE.DirectionalLight(0x8888cc, 0.3);
-        fillLight.position.set(-4, 2, -3);
-        scene.add(fillLight);
-
-        const rimLight = new THREE.DirectionalLight(0x4444ff, 0.2);
-        rimLight.position.set(0, -3, -5);
-        scene.add(rimLight);
-    } else {
-        // ── Point cloud fallback ──
-        const numPts = data.numVertices || data.positions.length / 3;
-        const ptSize = numPts > 30000 ? 0.02 : numPts > 10000 ? 0.03 : 0.05;
-        const material = new THREE.PointsMaterial({
-            size: ptSize,
-            vertexColors: true,
-            sizeAttenuation: true,
-            transparent: true,
-            opacity: 0.9
-        });
-        object3d = new THREE.Points(geometry, material);
-
-        const ambient = new THREE.AmbientLight(0xffffff, 1.0);
-        scene.add(ambient);
-    }
-
-    scene.add(object3d);
-
-    // Subtle fog
-    scene.fog = new THREE.FogExp2(0x0a0f1e, 0.03);
-
-    // ── Camera positioning ──
-    geometry.computeBoundingBox();
-    const scaledBbox = geometry.boundingBox;
-    const scaledSize = new THREE.Vector3();
-    scaledBbox.getSize(scaledSize);
-    const maxDim = Math.max(scaledSize.x, scaledSize.y, scaledSize.z) || 1;
-
-    const camDist = maxDim * 1.6;
-    camera.position.set(camDist * 0.7, camDist * 0.4, camDist * 0.9);
-    camera.lookAt(0, 0, 0);
-    controls.target.set(0, 0, 0);
-    controls.update();
-
-    // Subtle grid
-    const gridHelper = new THREE.GridHelper(maxDim * 2, 20, 0x333366, 0x1a1a3e);
-    gridHelper.position.y = scaledBbox.min.y;
-    scene.add(gridHelper);
-
-    // ── Info labels ──
-    const numV = data.numVertices || data.positions.length / 3;
-    const modeTag = isMesh ? "MESH" : "POINT CLOUD";
-    let labelText = `${modeTag}  ${numV.toLocaleString()} ${isMesh ? "verts" : "pts"}`;
-    if (isMesh && data.numTriangles) {
-        labelText += ` / ${data.numTriangles.toLocaleString()} tris`;
-    }
-    if (data.bbox3d) {
-        const b = data.bbox3d;
-        const dims = [
-            (b.max[0] - b.min[0]).toFixed(1),
-            (b.max[1] - b.min[1]).toFixed(1),
-            (b.max[2] - b.min[2]).toFixed(1)
-        ];
-        labelText += `  |  ${dims[0]} x ${dims[1]} x ${dims[2]}`;
-    }
-
-    const label = document.createElement("div");
-    label.style.cssText = [
-        "position: absolute", "top: 8px", "left: 8px",
-        "padding: 4px 8px", "background: rgba(0,0,0,0.6)",
-        "border: 1px solid rgba(255,255,255,0.15)", "border-radius: 6px",
-        "font: 10px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace",
-        "color: rgba(255,255,255,0.7)", "pointer-events: none", "z-index: 10"
-    ].join("; ");
-    label.textContent = labelText;
-    container.appendChild(label);
-
-    const hint = document.createElement("div");
-    hint.style.cssText = [
-        "position: absolute", "bottom: 8px", "right: 8px",
-        "padding: 4px 8px", "background: rgba(0,0,0,0.5)",
-        "border: 1px solid rgba(255,255,255,0.10)", "border-radius: 6px",
-        "font: 9px ui-monospace, SFMono-Regular, Menlo, monospace",
-        "color: rgba(255,255,255,0.45)", "pointer-events: none", "z-index: 10"
-    ].join("; ");
-    hint.textContent = "Drag to rotate | Scroll to zoom | Right-drag to pan";
-    container.appendChild(hint);
-
-    // ── Store refs ──
-    APP.ui.inspection3d._scene = scene;
-    APP.ui.inspection3d._camera = camera;
-    APP.ui.inspection3d._renderer = renderer;
-    APP.ui.inspection3d._controls = controls;
-    APP.ui.inspection3d._object = object3d;
-    APP.ui.inspection3d._label = label;
-    APP.ui.inspection3d._hint = hint;
-
-    // ── Resize handler ──
-    APP.ui.inspection3d._resizeHandler = function () {
-        if (APP.ui.inspection3d._disposed) return;
-        const r = container.getBoundingClientRect();
-        const w = r.width || 600;
-        const h = r.height || 350;
-        camera.aspect = w / h;
-        camera.updateProjectionMatrix();
-        renderer.setSize(w, h);
-    };
-    window.addEventListener("resize", APP.ui.inspection3d._resizeHandler);
-
-    // ── Animation loop ──
-    function animate() {
-        if (APP.ui.inspection3d._disposed) return;
-        APP.ui.inspection3d._animFrameId = requestAnimationFrame(animate);
-        controls.update();
-        renderer.render(scene, camera);
-    }
-    animate();
-};
-
-/**
- * Render a GLB model from Tripo3D in the inspection container.
- * @param {ArrayBuffer} arrayBuffer — raw GLB binary
- */
-APP.ui.inspection3d.renderGLB = async function (arrayBuffer) {
-    const { $ } = APP.core.utils;
-    const container = $("#quad3dContainer");
-    if (!container) return;
-
-    try {
-        await APP.ui.inspection3d._ensureThreeJs();
-    } catch (err) {
-        console.error("Failed to load 3D libraries:", err);
-        return;
-    }
-
-    APP.ui.inspection3d.dispose();
-    APP.ui.inspection3d._disposed = false;
-
-    var rect = container.getBoundingClientRect();
-    var width = rect.width || 600;
-    var height = rect.height || 350;
-
-    // ── Scene ──
-    var scene = new THREE.Scene();
-    scene.background = new THREE.Color(0x0a0f1e);
-
-    // ── Camera ──
-    var camera = new THREE.PerspectiveCamera(50, width / height, 0.01, 500);
-
-    // ── Renderer ──
-    var renderer = new THREE.WebGLRenderer({ antialias: true, alpha: false });
-    renderer.setSize(width, height);
-    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
-    container.appendChild(renderer.domElement);
-
-    // ── OrbitControls ──
-    var controls = new THREE.OrbitControls(camera, renderer.domElement);
-    controls.enableDamping = true;
-    controls.dampingFactor = 0.08;
-    controls.rotateSpeed = 0.8;
-    controls.zoomSpeed = 1.0;
-    controls.panSpeed = 0.6;
-    controls.minDistance = 0.1;
-    controls.maxDistance = 50;
-
-    // ── Lights (same 3-light rig as mesh mode) ──
-    scene.add(new THREE.AmbientLight(0xffffff, 0.5));
-    var keyLight = new THREE.DirectionalLight(0xffffff, 0.7);
-    keyLight.position.set(5, 5, 5);
-    scene.add(keyLight);
-    var fillLight = new THREE.DirectionalLight(0x8888cc, 0.3);
-    fillLight.position.set(-4, 2, -3);
-    scene.add(fillLight);
-    var rimLight = new THREE.DirectionalLight(0x4444ff, 0.2);
-    rimLight.position.set(0, -3, -5);
-    scene.add(rimLight);
-
-    // ── Parse GLB ──
-    var loader = new THREE.GLTFLoader();
-    var gltf = await new Promise(function (resolve, reject) {
-        loader.parse(arrayBuffer, "", resolve, reject);
-    });
-
-    var model = gltf.scene;
-    scene.add(model);
-
-    // ── Center and normalize scale ──
-    var box = new THREE.Box3().setFromObject(model);
-    var center = new THREE.Vector3();
-    box.getCenter(center);
-    model.position.sub(center);
-
-    var size = new THREE.Vector3();
-    box.getSize(size);
-    var maxDim = Math.max(size.x, size.y, size.z) || 1;
-    var scaleFactor = 4.0 / maxDim;
-    model.scale.setScalar(scaleFactor);
-
-    // Recompute after scaling
-    var scaledBox = new THREE.Box3().setFromObject(model);
-    var scaledSize = new THREE.Vector3();
-    scaledBox.getSize(scaledSize);
-    var scaledMax = Math.max(scaledSize.x, scaledSize.y, scaledSize.z) || 1;
-
-    // ── Camera positioning ──
-    var camDist = scaledMax * 1.6;
-    camera.position.set(camDist * 0.7, camDist * 0.4, camDist * 0.9);
-    camera.lookAt(0, 0, 0);
-    controls.target.set(0, 0, 0);
-    controls.update();
-
-    // ── Grid ──
-    var gridHelper = new THREE.GridHelper(scaledMax * 2, 20, 0x333366, 0x1a1a3e);
-    gridHelper.position.y = scaledBox.min.y;
-    scene.add(gridHelper);
-
-    // ── Fog ──
-    scene.fog = new THREE.FogExp2(0x0a0f1e, 0.03);
-
-    // ── Count vertices for label ──
-    var totalVerts = 0;
-    model.traverse(function (child) {
-        if (child.isMesh && child.geometry) {
-            var pos = child.geometry.getAttribute("position");
-            if (pos) totalVerts += pos.count;
-        }
-    });
-
-    // ── Label ──
-    var label = document.createElement("div");
-    label.style.cssText = [
-        "position: absolute", "top: 8px", "left: 8px",
-        "padding: 4px 8px", "background: rgba(0,0,0,0.6)",
-        "border: 1px solid rgba(255,255,255,0.15)", "border-radius: 6px",
-        "font: 10px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace",
-        "color: rgba(255,255,255,0.7)", "pointer-events: none", "z-index: 10"
-    ].join("; ");
-    label.textContent = "GENERATIVE 3D  " + totalVerts.toLocaleString() + " verts";
-    container.appendChild(label);
-
-    // ── Hint ──
-    var hint = document.createElement("div");
-    hint.style.cssText = [
-        "position: absolute", "bottom: 8px", "right: 8px",
-        "padding: 4px 8px", "background: rgba(0,0,0,0.5)",
-        "border: 1px solid rgba(255,255,255,0.10)", "border-radius: 6px",
-        "font: 9px ui-monospace, SFMono-Regular, Menlo, monospace",
-        "color: rgba(255,255,255,0.45)", "pointer-events: none", "z-index: 10"
-    ].join("; ");
-    hint.textContent = "Drag to rotate | Scroll to zoom | Right-drag to pan";
-    container.appendChild(hint);
-
-    // ── Store refs ──
-    APP.ui.inspection3d._scene = scene;
-    APP.ui.inspection3d._camera = camera;
-    APP.ui.inspection3d._renderer = renderer;
-    APP.ui.inspection3d._controls = controls;
-    APP.ui.inspection3d._object = model;
-    APP.ui.inspection3d._label = label;
-    APP.ui.inspection3d._hint = hint;
-
-    // ── Resize handler ──
-    APP.ui.inspection3d._resizeHandler = function () {
-        if (APP.ui.inspection3d._disposed) return;
-        var r = container.getBoundingClientRect();
-        var w = r.width || 600;
-        var h = r.height || 350;
-        camera.aspect = w / h;
-        camera.updateProjectionMatrix();
-        renderer.setSize(w, h);
-    };
-    window.addEventListener("resize", APP.ui.inspection3d._resizeHandler);
-
-    // ── Animation loop ──
-    function animate() {
-        if (APP.ui.inspection3d._disposed) return;
-        APP.ui.inspection3d._animFrameId = requestAnimationFrame(animate);
-        controls.update();
-        renderer.render(scene, camera);
-    }
-    animate();
-};
-
-/**
- * Dispose of all Three.js resources and clean up DOM.
- */
-APP.ui.inspection3d.dispose = function () {
-    APP.ui.inspection3d._disposed = true;
-
-    if (APP.ui.inspection3d._animFrameId) {
-        cancelAnimationFrame(APP.ui.inspection3d._animFrameId);
-        APP.ui.inspection3d._animFrameId = null;
-    }
-
-    if (APP.ui.inspection3d._resizeHandler) {
-        window.removeEventListener("resize", APP.ui.inspection3d._resizeHandler);
-        APP.ui.inspection3d._resizeHandler = null;
-    }
-
-    if (APP.ui.inspection3d._controls) {
-        APP.ui.inspection3d._controls.dispose();
-        APP.ui.inspection3d._controls = null;
-    }
-
-    if (APP.ui.inspection3d._object) {
-        if (APP.ui.inspection3d._object.geometry) {
-            APP.ui.inspection3d._object.geometry.dispose();
-        }
-        if (APP.ui.inspection3d._object.material) {
-            APP.ui.inspection3d._object.material.dispose();
-        }
-        APP.ui.inspection3d._object = null;
-    }
-
-    if (APP.ui.inspection3d._renderer) {
-        APP.ui.inspection3d._renderer.dispose();
-        const canvas = APP.ui.inspection3d._renderer.domElement;
-        if (canvas && canvas.parentElement) {
-            canvas.parentElement.removeChild(canvas);
-        }
-        APP.ui.inspection3d._renderer = null;
-    }
-
-    if (APP.ui.inspection3d._label && APP.ui.inspection3d._label.parentElement) {
-        APP.ui.inspection3d._label.parentElement.removeChild(APP.ui.inspection3d._label);
-    }
-    APP.ui.inspection3d._label = null;
-
-    if (APP.ui.inspection3d._hint && APP.ui.inspection3d._hint.parentElement) {
-        APP.ui.inspection3d._hint.parentElement.removeChild(APP.ui.inspection3d._hint);
-    }
-    APP.ui.inspection3d._hint = null;
-
-    if (APP.ui.inspection3d._scene) {
-        APP.ui.inspection3d._scene.traverse(function (obj) {
-            if (obj.geometry) obj.geometry.dispose();
-            if (obj.material) {
-                var mats = Array.isArray(obj.material) ? obj.material : [obj.material];
-                mats.forEach(function (m) {
-                    if (m.map) m.map.dispose();
-                    if (m.normalMap) m.normalMap.dispose();
-                    if (m.roughnessMap) m.roughnessMap.dispose();
-                    if (m.metalnessMap) m.metalnessMap.dispose();
-                    if (m.emissiveMap) m.emissiveMap.dispose();
-                    m.dispose();
-                });
-            }
-        });
-        APP.ui.inspection3d._scene = null;
-    }
-
-    APP.ui.inspection3d._camera = null;
-};

frontend/js/ui/inspection-renders.js

@@ -1,446 +0,0 @@
-// Inspection Renderers — per-mode canvas drawing functions
-APP.ui.inspectionRenders = {};
-
-/**
- * Render segmentation mask overlay on the frame.
- * Shows the full frame dimmed, with the selected object's mask highlighted.
- */
-APP.ui.inspectionRenders._renderSeg = function (canvas, frameImg, maskData, track) {
-    if (!frameImg) return;
-
-    const w = frameImg.naturalWidth || frameImg.width;
-    const h = frameImg.naturalHeight || frameImg.height;
-    canvas.width = w;
-    canvas.height = h;
-    const ctx = canvas.getContext("2d");
-
-    // Draw base frame (dimmed)
-    ctx.drawImage(frameImg, 0, 0);
-    ctx.fillStyle = "rgba(0, 0, 0, 0.45)";
-    ctx.fillRect(0, 0, w, h);
-
-    if (!maskData) return;
-
-    // Compute the crop region matching backend's crop_frame(bbox, padding=0.20)
-    // The frame image is cropped, but the mask is in full-frame coordinates.
-    const _cropRegion = (fullW, fullH) => {
-        const padding = 0.20;
-        let bx1, by1, bx2, by2;
-        if (maskData.bbox) {
-            [bx1, by1, bx2, by2] = maskData.bbox;
-        } else if (track && track.bbox) {
-            bx1 = track.bbox.x * fullW;
-            by1 = track.bbox.y * fullH;
-            bx2 = (track.bbox.x + track.bbox.w) * fullW;
-            by2 = (track.bbox.y + track.bbox.h) * fullH;
-        } else {
-            return null;
-        }
-        const bw = bx2 - bx1, bh = by2 - by1;
-        const padX = Math.floor(bw * padding), padY = Math.floor(bh * padding);
-        return {
-            cx1: Math.max(0, bx1 - padX), cy1: Math.max(0, by1 - padY),
-            cx2: Math.min(fullW, bx2 + padX), cy2: Math.min(fullH, by2 + padY),
-        };
-    };
-
-    const color = maskData.color || [59, 130, 246];
-
-    if (maskData.rle) {
-        const rle = maskData.rle;
-        const maskH = rle.size[0];
-        const maskW = rle.size[1];
-
-        // Decode RLE to flat boolean array (column-major, COCO format)
-        const mask = new Uint8Array(maskH * maskW);
-        let pos = 0;
-        let val = 0;
-        for (const count of rle.counts) {
-            for (let i = 0; i < count && pos < mask.length; i++) {
-                mask[pos++] = val;
-            }
-            val = 1 - val;
-        }
-
-        const crop = _cropRegion(maskW, maskH);
-
-        const frameCanvas = document.createElement("canvas");
-        frameCanvas.width = w;
-        frameCanvas.height = h;
-        const fctx = frameCanvas.getContext("2d");
-        fctx.drawImage(frameImg, 0, 0);
-        const framePixels = fctx.getImageData(0, 0, w, h);
-
-        const outPixels = ctx.getImageData(0, 0, w, h);
-        const out = outPixels.data;
-        const fd = framePixels.data;
-
-        for (let py = 0; py < h; py++) {
-            for (let px = 0; px < w; px++) {
-                let mx, my;
-                if (crop) {
-                    // Map cropped canvas pixel back to full-frame coordinates
-                    mx = Math.floor(crop.cx1 + px * (crop.cx2 - crop.cx1) / w);
-                    my = Math.floor(crop.cy1 + py * (crop.cy2 - crop.cy1) / h);
-                } else {
-                    mx = Math.floor(px * maskW / w);
-                    my = Math.floor(py * maskH / h);
-                }
-                // COCO RLE is column-major: index = x * height + y
-                const maskIdx = mx * maskH + my;
-
-                if (maskIdx >= 0 && maskIdx < mask.length && mask[maskIdx]) {
-                    const i = (py * w + px) * 4;
-                    out[i]     = Math.round(fd[i] * 0.5 + color[0] * 0.5);
-                    out[i + 1] = Math.round(fd[i + 1] * 0.5 + color[1] * 0.5);
-                    out[i + 2] = Math.round(fd[i + 2] * 0.5 + color[2] * 0.5);
-                    out[i + 3] = 255;
-                }
-            }
-        }
-        ctx.putImageData(outPixels, 0, 0);
-
-    } else if (maskData._maskImage) {
-        // PNG mask: full-frame sized, must map through crop region
-        const maskImgW = maskData._maskImage.naturalWidth || maskData._maskImage.width;
-        const maskImgH = maskData._maskImage.naturalHeight || maskData._maskImage.height;
-
-        const maskCanvas = document.createElement("canvas");
-        maskCanvas.width = maskImgW;
-        maskCanvas.height = maskImgH;
-        const mctx = maskCanvas.getContext("2d");
-        mctx.drawImage(maskData._maskImage, 0, 0);
-        const maskPixels = mctx.getImageData(0, 0, maskImgW, maskImgH);
-
-        const crop = _cropRegion(maskImgW, maskImgH);
-
-        const frameCanvas = document.createElement("canvas");
-        frameCanvas.width = w;
-        frameCanvas.height = h;
-        const fctx = frameCanvas.getContext("2d");
-        fctx.drawImage(frameImg, 0, 0);
-        const framePixels = fctx.getImageData(0, 0, w, h);
-
-        const outPixels = ctx.getImageData(0, 0, w, h);
-        const out = outPixels.data;
-        const md = maskPixels.data;
-        const fd = framePixels.data;
-
-        for (let py = 0; py < h; py++) {
-            for (let px = 0; px < w; px++) {
-                let fullX, fullY;
-                if (crop) {
-                    fullX = Math.floor(crop.cx1 + px * (crop.cx2 - crop.cx1) / w);
-                    fullY = Math.floor(crop.cy1 + py * (crop.cy2 - crop.cy1) / h);
-                } else {
-                    fullX = Math.floor(px * maskImgW / w);
-                    fullY = Math.floor(py * maskImgH / h);
-                }
-                if (fullX >= 0 && fullX < maskImgW && fullY >= 0 && fullY < maskImgH) {
-                    const mi = (fullY * maskImgW + fullX) * 4;
-                    const maskVal = md[mi + 3] > 0 ? 1 : (md[mi] > 128 ? 1 : 0);
-                    if (maskVal) {
-                        const i = (py * w + px) * 4;
-                        out[i]     = Math.round(fd[i] * 0.5 + color[0] * 0.5);
-                        out[i + 1] = Math.round(fd[i + 1] * 0.5 + color[1] * 0.5);
-                        out[i + 2] = Math.round(fd[i + 2] * 0.5 + color[2] * 0.5);
-                        out[i + 3] = 255;
-                    }
-                }
-            }
-        }
-        ctx.putImageData(outPixels, 0, 0);
-    }
-};
-
-/**
- * Compute Sobel edge detection from a frame image (pure frontend).
- * @param {HTMLImageElement} frameImg
- * @returns {ImageData} the edge-detected image
- */
-APP.ui.inspectionRenders.computeEdge = function (frameImg) {
-    const w = frameImg.naturalWidth || frameImg.width;
-    const h = frameImg.naturalHeight || frameImg.height;
-
-    const tmpCanvas = document.createElement("canvas");
-    tmpCanvas.width = w;
-    tmpCanvas.height = h;
-    const tmpCtx = tmpCanvas.getContext("2d");
-    tmpCtx.drawImage(frameImg, 0, 0);
-    const src = tmpCtx.getImageData(0, 0, w, h);
-    const d = src.data;
-
-    // Convert to grayscale
-    const gray = new Float32Array(w * h);
-    for (let i = 0; i < w * h; i++) {
-        const idx = i * 4;
-        gray[i] = 0.299 * d[idx] + 0.587 * d[idx + 1] + 0.114 * d[idx + 2];
-    }
-
-    // Sobel kernels
-    const out = new ImageData(w, h);
-    const od = out.data;
-
-    for (let y = 1; y < h - 1; y++) {
-        for (let x = 1; x < w - 1; x++) {
-            const idx = y * w + x;
-
-            // Gx = Sobel horizontal
-            const gx =
-                -gray[(y - 1) * w + (x - 1)] + gray[(y - 1) * w + (x + 1)]
-                - 2 * gray[y * w + (x - 1)] + 2 * gray[y * w + (x + 1)]
-                - gray[(y + 1) * w + (x - 1)] + gray[(y + 1) * w + (x + 1)];
-
-            // Gy = Sobel vertical
-            const gy =
-                -gray[(y - 1) * w + (x - 1)] - 2 * gray[(y - 1) * w + x] - gray[(y - 1) * w + (x + 1)]
-                + gray[(y + 1) * w + (x - 1)] + 2 * gray[(y + 1) * w + x] + gray[(y + 1) * w + (x + 1)];
-
-            const mag = Math.min(255, Math.sqrt(gx * gx + gy * gy));
-
-            const oi = idx * 4;
-            // Render edges as cyan on black (matches design system)
-            od[oi]     = Math.round(mag * 0.13);  // R (slight tint)
-            od[oi + 1] = Math.round(mag * 0.83);  // G
-            od[oi + 2] = Math.round(mag * 0.93);  // B (cyan)
-            od[oi + 3] = 255;
-        }
-    }
-
-    return out;
-};
-
-/**
- * Render edge detection result.
- */
-APP.ui.inspectionRenders._renderEdge = function (canvas, frameImg, edgeData, track) {
-    if (!frameImg) return;
-
-    const w = frameImg.naturalWidth || frameImg.width;
-    const h = frameImg.naturalHeight || frameImg.height;
-    canvas.width = w;
-    canvas.height = h;
-    const ctx = canvas.getContext("2d");
-
-    if (edgeData) {
-        ctx.putImageData(edgeData, 0, 0);
-    } else {
-        ctx.drawImage(frameImg, 0, 0);
-    }
-
-    APP.ui.inspectionRenders._drawBBoxHighlight(ctx, track, w, h);
-};
-
-/**
- * Render depth colormap (viridis-like palette) with scale legend.
- */
-APP.ui.inspectionRenders._renderDepth = function (canvas, frameImg, depthData, track) {
-    if (!frameImg) return;
-
-    const w = frameImg.naturalWidth || frameImg.width;
-    const h = frameImg.naturalHeight || frameImg.height;
-    canvas.width = w;
-    canvas.height = h;
-    const ctx = canvas.getContext("2d");
-
-    if (!depthData || !depthData.data) {
-        // No depth — show frame with message
-        ctx.drawImage(frameImg, 0, 0);
-        ctx.fillStyle = "rgba(0,0,0,0.6)";
-        ctx.fillRect(0, 0, w, h);
-        ctx.fillStyle = "#aaa";
-        ctx.font = "14px monospace";
-        ctx.textAlign = "center";
-        ctx.fillText("Depth data not available", w / 2, h / 2);
-        return;
-    }
-
-    // Apply viridis-like colormap to depth values
-    const dw = depthData.width;
-    const dh = depthData.height;
-    const dd = depthData.data;
-    const minD = depthData.min;
-    const maxD = depthData.max;
-    const range = maxD - minD || 1;
-
-    const depthCanvas = document.createElement("canvas");
-    depthCanvas.width = dw;
-    depthCanvas.height = dh;
-    const dctx = depthCanvas.getContext("2d");
-    const img = dctx.createImageData(dw, dh);
-    const id = img.data;
-
-    for (let i = 0; i < dd.length; i++) {
-        const val = dd[i];
-        // Handle NaN/Inf values — render as black
-        if (!isFinite(val)) {
-            const oi = i * 4;
-            id[oi] = 0; id[oi + 1] = 0; id[oi + 2] = 0; id[oi + 3] = 255;
-            continue;
-        }
-        const t = APP.core.utils.clamp((val - minD) / range, 0, 1);
-        const rgb = APP.ui.inspectionRenders._viridis(t);
-        const oi = i * 4;
-        id[oi]     = rgb[0];
-        id[oi + 1] = rgb[1];
-        id[oi + 2] = rgb[2];
-        id[oi + 3] = 255;
-    }
-
-    dctx.putImageData(img, 0, 0);
-
-    // Draw scaled to canvas size
-    ctx.drawImage(depthCanvas, 0, 0, w, h);
-
-    // Draw bbox highlight for the selected track
-    APP.ui.inspectionRenders._drawBBoxHighlight(ctx, track, w, h);
-
-    // Draw depth scale legend (vertical gradient bar on the right)
-    APP.ui.inspectionRenders._drawDepthLegend(ctx, w, h, minD, maxD);
-
-    // If track is selected, compute and show average depth in the bbox region
-    if (track && track.bbox && dw > 0 && dh > 0) {
-        APP.ui.inspectionRenders._drawTrackDepthStats(ctx, track, w, h, depthData);
-    }
-};
-
-/**
- * Draw a vertical depth scale legend on the right side of the canvas.
- */
-APP.ui.inspectionRenders._drawDepthLegend = function (ctx, canvasW, canvasH, minD, maxD) {
-    const barW = 16;
-    const barH = Math.min(180, canvasH - 60);
-    const x = canvasW - barW - 30;
-    const y = 30;
-
-    // Background panel
-    ctx.fillStyle = "rgba(0, 0, 0, 0.55)";
-    ctx.fillRect(x - 6, y - 20, barW + 52, barH + 40);
-    ctx.strokeStyle = "rgba(255, 255, 255, 0.15)";
-    ctx.lineWidth = 1;
-    ctx.strokeRect(x - 6, y - 20, barW + 52, barH + 40);
-
-    // Draw gradient bar
-    for (let py = 0; py < barH; py++) {
-        const t = py / (barH - 1); // 0 = top (near/min), 1 = bottom (far/max)
-        const rgb = APP.ui.inspectionRenders._viridis(t);
-        ctx.fillStyle = `rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`;
-        ctx.fillRect(x, y + py, barW, 1);
-    }
-
-    // Border around bar
-    ctx.strokeStyle = "rgba(255, 255, 255, 0.3)";
-    ctx.lineWidth = 1;
-    ctx.strokeRect(x, y, barW, barH);
-
-    // Labels
-    ctx.fillStyle = "rgba(255, 255, 255, 0.8)";
-    ctx.font = "10px monospace";
-    ctx.textAlign = "left";
-    ctx.fillText(`${minD.toFixed(1)}m`, x + barW + 4, y + 10);
-    ctx.fillText(`${maxD.toFixed(1)}m`, x + barW + 4, y + barH);
-
-    // Title
-    ctx.fillStyle = "rgba(255, 255, 255, 0.6)";
-    ctx.font = "9px monospace";
-    ctx.textAlign = "center";
-    ctx.fillText("DEPTH", x + barW / 2, y - 6);
-};
-
-/**
- * Compute and display average depth within the selected track's bounding box.
- */
-APP.ui.inspectionRenders._drawTrackDepthStats = function (ctx, track, canvasW, canvasH, depthData) {
-    const b = track.bbox;
-    const dw = depthData.width;
-    const dh = depthData.height;
-    const dd = depthData.data;
-
-    // Map normalized bbox to depth map coordinates
-    const x1 = Math.max(0, Math.floor(b.x * dw));
-    const y1 = Math.max(0, Math.floor(b.y * dh));
-    const x2 = Math.min(dw - 1, Math.floor((b.x + b.w) * dw));
-    const y2 = Math.min(dh - 1, Math.floor((b.y + b.h) * dh));
-
-    let sum = 0;
-    let count = 0;
-    let localMin = Infinity;
-    let localMax = -Infinity;
-
-    for (let py = y1; py <= y2; py++) {
-        for (let px = x1; px <= x2; px++) {
-            const val = dd[py * dw + px];
-            if (isFinite(val)) {
-                sum += val;
-                count++;
-                if (val < localMin) localMin = val;
-                if (val > localMax) localMax = val;
-            }
-        }
-    }
-
-    if (count === 0) return;
-
-    const avgDepth = sum / count;
-
-    // Draw stats label below the bbox
-    const bx = b.x * canvasW;
-    const by = (b.y + b.h) * canvasH;
-
-    ctx.fillStyle = "rgba(0, 0, 0, 0.7)";
-    ctx.fillRect(bx, by + 4, 160, 18);
-
-    ctx.fillStyle = "rgba(253, 231, 37, 0.9)"; // viridis yellow for contrast
-    ctx.font = "bold 11px monospace";
-    ctx.textAlign = "left";
-    ctx.fillText(`Depth: ${avgDepth.toFixed(1)}m (${localMin.toFixed(1)}-${localMax.toFixed(1)})`, bx + 4, by + 16);
-};
-
-/**
- * Draw a highlighted bounding box for the selected track.
- */
-APP.ui.inspectionRenders._drawBBoxHighlight = function () {
-    // No-op — inspection shows the cropped object only, no bbox overlay
-};
-
-/**
- * Viridis-like colormap: t in [0,1] -> [R, G, B] in [0,255].
- * Simplified 5-stop linear interpolation.
- */
-APP.ui.inspectionRenders._viridis = function (t) {
-    const stops = [
-        [0.0,  68, 1, 84],
-        [0.25, 59, 82, 139],
-        [0.5,  33, 145, 140],
-        [0.75, 94, 201, 98],
-        [1.0,  253, 231, 37]
-    ];
-    return APP.ui.inspectionRenders._interpolateColormap(t, stops);
-};
-
-/**
- * Linearly interpolate a colormap defined by stops.
- * @param {number} t — value in [0,1]
- * @param {Array} stops — [[t, r, g, b], ...] sorted by t
- * @returns {number[]} [r, g, b]
- */
-APP.ui.inspectionRenders._interpolateColormap = function (t, stops) {
-    if (t <= stops[0][0]) return [stops[0][1], stops[0][2], stops[0][3]];
-    if (t >= stops[stops.length - 1][0]) {
-        const s = stops[stops.length - 1];
-        return [s[1], s[2], s[3]];
-    }
-
-    for (let i = 0; i < stops.length - 1; i++) {
-        if (t >= stops[i][0] && t <= stops[i + 1][0]) {
-            const f = (t - stops[i][0]) / (stops[i + 1][0] - stops[i][0]);
-            return [
-                Math.round(stops[i][1] + f * (stops[i + 1][1] - stops[i][1])),
-                Math.round(stops[i][2] + f * (stops[i + 1][2] - stops[i][2])),
-                Math.round(stops[i][3] + f * (stops[i + 1][3] - stops[i][3]))
-            ];
-        }
-    }
-
-    return [0, 0, 0];
-};

frontend/js/ui/inspection.js

@@ -1,520 +0,0 @@
-// Inspection Panel Controller — quad view: seg, edge, depth, 3D simultaneously
-APP.ui.inspection = {};
-
-/**
- * Initialize: wire close button, quad expand/collapse, Escape key.
- * Called once from main.js init().
- */
-APP.ui.inspection.init = function () {
-    const { $ } = APP.core.utils;
-
-    // Close button
-    const closeBtn = $("#btnCloseInspection");
-    if (closeBtn) {
-        closeBtn.addEventListener("click", () => APP.ui.inspection.close());
-    }
-
-    // Quad expand/collapse (event delegation)
-    const quad = $("#inspectionQuad");
-    if (quad) {
-        quad.addEventListener("click", (e) => {
-            const quadrant = e.target.closest(".inspection-quadrant");
-            if (!quadrant) return;
-            const mode = quadrant.getAttribute("data-mode");
-            APP.ui.inspection._toggleExpand(mode);
-        });
-    }
-
-    // Escape to collapse
-    document.addEventListener("keydown", (e) => {
-        if (e.key === "Escape" && APP.core.state.inspection.expandedQuadrant) {
-            APP.ui.inspection._collapseExpanded();
-        }
-    });
-};
-
-/**
- * Open the inspection panel for a specific track.
- * @param {string} trackId
- */
-APP.ui.inspection.open = function (trackId) {
-    const { state } = APP.core;
-    const { $ } = APP.core.utils;
-
-    if (!trackId) return;
-
-    const panel = $("#inspectionPanel");
-    if (!panel) return;
-
-    // Determine current frame index
-    const video = $("#videoEngage");
-    const fps = state.hf.fps || 30;
-    const maxFrame = state.hf.totalFrames ? state.hf.totalFrames - 1 : Infinity;
-    let frameIdx = 0;
-    if (video && isFinite(video.currentTime)) {
-        frameIdx = Math.min(Math.floor(video.currentTime * fps), maxFrame);
-    }
-    if (!isFinite(frameIdx) || frameIdx < 0) frameIdx = 0;
-
-    // Collapse any expanded quadrant
-    APP.ui.inspection._collapseExpanded();
-
-    // Update state
-    state.inspection.trackId = trackId;
-    state.inspection.frameIdx = frameIdx;
-    state.inspection.visible = true;
-    state.inspection.error = null;
-
-    // Clear caches
-    APP.ui.inspection._clearCaches();
-
-    // Show panel
-    panel.style.display = "flex";
-
-    // Hide empty state
-    const empty = $("#inspectionEmpty");
-    if (empty) empty.style.display = "none";
-
-    // Update header
-    const track = (state.detections || []).find(d => d.id === trackId);
-    APP.ui.inspection._updateHeader(track, frameIdx);
-
-    // Load all quadrants
-    APP.ui.inspection._loadAllQuadrants();
-
-    // Load explainability graph
-    const expJobId = state.hf.asyncJobId || state.hf.completedJobId;
-    if (expJobId && APP.ui.explainability) {
-        APP.ui.explainability.load(expJobId, trackId);
-    }
-};
-
-/**
- * Close the inspection panel.
- */
-APP.ui.inspection.close = function () {
-    const { state } = APP.core;
-    const { $ } = APP.core.utils;
-
-    state.inspection.visible = false;
-    state.inspection.trackId = null;
-    state.inspection.loading = false;
-    state.inspection.error = null;
-
-    APP.ui.inspection._collapseExpanded();
-    APP.ui.inspection._clearCaches();
-
-    // Clear explainability graph (but NOT the cache — it's track-scoped)
-    if (APP.ui.explainability) APP.ui.explainability.clear();
-
-    const panel = $("#inspectionPanel");
-    if (panel) panel.style.display = "none";
-
-    // Clean up 3D scene
-    if (APP.ui.inspection3d && APP.ui.inspection3d.dispose) {
-        APP.ui.inspection3d.dispose();
-    }
-};
-
-/**
- * Refresh inspection for the current video time (called when user seeks).
- */
-APP.ui.inspection.refreshFrame = function () {
-    const { state } = APP.core;
-    if (!state.inspection.visible || !state.inspection.trackId) return;
-
-    const { $ } = APP.core.utils;
-    const video = $("#videoEngage");
-    const fps = state.hf.fps || 30;
-    const maxFrame = state.hf.totalFrames ? state.hf.totalFrames - 1 : Infinity;
-    let frameIdx = 0;
-    if (video && isFinite(video.currentTime)) {
-        frameIdx = Math.min(Math.floor(video.currentTime * fps), maxFrame);
-    }
-    if (!isFinite(frameIdx) || frameIdx < 0) frameIdx = 0;
-
-    if (frameIdx === state.inspection.frameIdx) return;
-
-    state.inspection.frameIdx = frameIdx;
-    APP.ui.inspection._clearCaches();
-
-    // Update header frame counter
-    const track = (state.detections || []).find(d => d.id === state.inspection.trackId);
-    APP.ui.inspection._updateHeader(track, frameIdx);
-
-    APP.ui.inspection._loadAllQuadrants();
-};
-
-/**
- * Update the inspection header bar.
- */
-APP.ui.inspection._updateHeader = function (track, frameIdx) {
-    const { $ } = APP.core.utils;
-    const { state } = APP.core;
-    const totalFrames = state.hf.totalFrames || "--";
-
-    const nameEl = $("#inspectionObjName");
-    const confEl = $("#inspectionConf");
-    const statusEl = $("#inspectionStatus");
-    const frameEl = $("#inspectionFrame");
-
-    if (nameEl) nameEl.textContent = (track && track.label || "UNKNOWN").toUpperCase();
-    if (confEl) confEl.textContent = track ? (track.score || 0).toFixed(2) : "--";
-    if (frameEl) frameEl.textContent = `FRM ${frameIdx} / ${totalFrames}`;
-
-    if (statusEl) {
-        statusEl.className = "inspection-status";
-        if (track && track.satisfies === true) {
-            statusEl.textContent = "MISSION MATCH";
-            statusEl.classList.add("match");
-        } else if (track && track.satisfies === false) {
-            statusEl.textContent = "NO MATCH";
-            statusEl.classList.add("no-match");
-        } else {
-            statusEl.textContent = "PENDING";
-            statusEl.classList.add("pending");
-        }
-    }
-};
-
-/**
- * Clear all cached visualization data.
- */
-APP.ui.inspection._clearCaches = function () {
-    const { state } = APP.core;
-    const cache = state.inspection.cache;
-
-    if (state.inspection._frameImg && state.inspection._frameImg._blobUrl) {
-        URL.revokeObjectURL(state.inspection._frameImg._blobUrl);
-    }
-
-    state.inspection.frameImageUrl = null;
-    state.inspection._frameImg = null;
-    cache.seg = null;
-    cache.edge = null;
-    cache.depth = null;
-    cache.pointcloud = null;
-};
-
-/**
- * Load and render all four quadrants in parallel.
- */
-APP.ui.inspection._loadAllQuadrants = async function () {
-    const { state } = APP.core;
-    const { $ } = APP.core.utils;
-    const api = APP.api.inspection;
-    const renders = APP.ui.inspectionRenders;
-    const { trackId, frameIdx, cache } = state.inspection;
-
-    const jobId = state.hf.asyncJobId || state.hf.completedJobId;
-    if (!jobId || !trackId || frameIdx == null) {
-        const msg = !jobId ? "No active job — run detection first"
-            : !trackId ? "No track selected"
-            : "Frame index unavailable";
-        APP.ui.inspection._showQuadError("seg", msg);
-        APP.ui.inspection._showQuadError("edge", msg);
-        APP.ui.inspection._showQuadError("depth", msg);
-        APP.ui.inspection._showQuadError("3d", msg);
-        return;
-    }
-
-    const track = (state.detections || []).find(d => d.id === trackId);
-    if (!track || !track.bbox) {
-        const msg = "Track not found in current frame";
-        APP.ui.inspection._showQuadError("seg", msg);
-        APP.ui.inspection._showQuadError("edge", msg);
-        APP.ui.inspection._showQuadError("depth", msg);
-        APP.ui.inspection._showQuadError("3d", msg);
-        return;
-    }
-
-    try {
-        // Step 1: Fetch shared frame image
-        if (!state.inspection._frameImg) {
-            const frameImg = await api.fetchFrame(jobId, frameIdx, trackId, 0.20);
-            state.inspection._frameImg = frameImg;
-            state.inspection.frameImageUrl = frameImg.src;
-        }
-    } catch (err) {
-        APP.ui.inspection._showQuadError("seg", "Frame load failed");
-        APP.ui.inspection._showQuadError("edge", "Frame load failed");
-        APP.ui.inspection._showQuadError("depth", "Frame load failed");
-        APP.ui.inspection._showQuadError("3d", "Frame load failed");
-        return;
-    }
-
-    const frameImg = state.inspection._frameImg;
-
-    // Step 2: Fire seg, edge, depth in parallel; 3D is on-demand
-    const segPromise = (async () => {
-        APP.ui.inspection._showQuadLoading("seg", true);
-        try {
-            if (!cache.seg) cache.seg = await api.fetchMask(jobId, frameIdx, trackId);
-            const canvas = $("#quadCanvasSeg");
-            if (canvas && renders) renders._renderSeg(canvas, frameImg, cache.seg, track);
-            APP.ui.inspection._updateQuadMetric("seg", cache.seg);
-        } catch (e) {
-            APP.ui.inspection._showQuadError("seg", e.message);
-        }
-        APP.ui.inspection._showQuadLoading("seg", false);
-    })();
-
-    const edgePromise = (async () => {
-        try {
-            if (!cache.edge && frameImg && renders) {
-                cache.edge = renders.computeEdge(frameImg);
-            }
-            const canvas = $("#quadCanvasEdge");
-            if (canvas && renders) renders._renderEdge(canvas, frameImg, cache.edge, track);
-        } catch (e) {
-            console.error("Edge render error:", e);
-        }
-    })();
-
-    const depthPromise = (async () => {
-        APP.ui.inspection._showQuadLoading("depth", true);
-        try {
-            if (!cache.depth) cache.depth = await api.fetchDepth(jobId, frameIdx, trackId);
-            const canvas = $("#quadCanvasDepth");
-            if (canvas && renders) renders._renderDepth(canvas, frameImg, cache.depth, track);
-            APP.ui.inspection._updateQuadMetric("depth", cache.depth);
-        } catch (e) {
-            APP.ui.inspection._showQuadError("depth", e.message);
-        }
-        APP.ui.inspection._showQuadLoading("depth", false);
-    })();
-
-    await Promise.allSettled([segPromise, edgePromise, depthPromise]);
-
-    // Step 3: Show 3D on-demand prompt (no auto-loading)
-    APP.ui.inspection._show3dPrompt();
-
-    // Step 4: Update bottom metrics
-    APP.ui.inspection._updateBottomMetrics(track, cache);
-};
-
-/**
- * Show on-demand 3D generation prompt in the 3D quadrant.
- */
-APP.ui.inspection._show3dPrompt = function () {
-    const container = document.getElementById("quad3dContainer");
-    if (!container) return;
-
-    // Clean up existing 3D scene
-    if (APP.ui.inspection3d && APP.ui.inspection3d.dispose) {
-        APP.ui.inspection3d.dispose();
-    }
-
-    // Clear container
-    container.innerHTML = "";
-
-    const prompt = document.createElement("div");
-    prompt.className = "quad-3d-prompt";
-    prompt.innerHTML = `
-        <div class="quad-3d-prompt-icon">
-            <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
-                <path d="M12 2L2 7l10 5 10-5-10-5z"/>
-                <path d="M2 17l10 5 10-5"/>
-                <path d="M2 12l10 5 10-5"/>
-            </svg>
-        </div>
-        <div class="quad-3d-prompt-label">3D MODEL</div>
-        <button class="quad-3d-btn" data-mode="depth">COMPUTE 3D</button>
-        <button class="quad-3d-btn quad-3d-btn-gen" data-mode="generative">GENERATE AI 3D</button>
-        <div class="quad-3d-prompt-hint">AI 3D uses Tripo API (external)</div>
-    `;
-
-    // Wire button handlers
-    prompt.querySelector('[data-mode="depth"]').addEventListener("click", (e) => {
-        e.stopPropagation();
-        APP.ui.inspection._trigger3d(false);
-    });
-    prompt.querySelector('[data-mode="generative"]').addEventListener("click", (e) => {
-        e.stopPropagation();
-        APP.ui.inspection._trigger3d(true);
-    });
-
-    container.appendChild(prompt);
-};
-
-/**
- * Trigger 3D model generation (on-demand).
- * @param {boolean} generative — if true, use Tripo3D (API cost)
- */
-APP.ui.inspection._trigger3d = async function (generative) {
-    const { state } = APP.core;
-    const api = APP.api.inspection;
-    const { trackId, frameIdx, cache } = state.inspection;
-    const jobId = state.hf.asyncJobId || state.hf.completedJobId;
-
-    if (!jobId || !trackId || frameIdx == null) return;
-
-    // Clear prompt and show loading with status
-    const container = document.getElementById("quad3dContainer");
-    if (container) container.innerHTML = "";
-
-    const statusEl = document.createElement("div");
-    statusEl.className = "quad-3d-status";
-    statusEl.innerHTML = generative
-        ? '<div class="inspection-spinner"></div><div class="quad-3d-status-text">Uploading to Tripo3D...</div>'
-        : '<div class="inspection-spinner"></div><div class="quad-3d-status-text">Computing depth mesh...</div>';
-    if (container) container.appendChild(statusEl);
-
-    APP.ui.inspection._showQuadLoading("3d", true);
-    APP.ui.inspection._showQuadError("3d", "");
-
-    // Update metric to show status
-    const metricEl = document.getElementById("quadMetric3d");
-    if (metricEl) metricEl.textContent = generative ? "TRIPO3D GENERATING..." : "COMPUTING...";
-
-    try {
-        cache.pointcloud = await api.fetchPointCloud(jobId, frameIdx, trackId, generative);
-        if (container) container.innerHTML = "";
-
-        if (cache.pointcloud && APP.ui.inspection3d) {
-            if (cache.pointcloud.type === "glb") {
-                await APP.ui.inspection3d.renderGLB(cache.pointcloud.buffer);
-            } else {
-                APP.ui.inspection3d.render(cache.pointcloud);
-            }
-        }
-        APP.ui.inspection._updateQuadMetric("3d", cache.pointcloud);
-    } catch (e) {
-        if (container) container.innerHTML = "";
-        APP.ui.inspection._showQuadError("3d", e.message);
-        if (metricEl) metricEl.textContent = "FAILED";
-    }
-    APP.ui.inspection._showQuadLoading("3d", false);
-};
-
-/**
- * Toggle per-quadrant loading spinner.
- */
-APP.ui.inspection._showQuadLoading = function (mode, show) {
-    const modeToId = { seg: "quadSeg", edge: "quadEdge", depth: "quadDepth", "3d": "quad3d" };
-    const el = document.getElementById(modeToId[mode]);
-    if (!el) return;
-    const loader = el.querySelector(".quad-loading");
-    if (loader) loader.style.display = show ? "flex" : "none";
-};
-
-/**
- * Show per-quadrant error message.
- */
-APP.ui.inspection._showQuadError = function (mode, msg) {
-    const modeToId = { seg: "quadSeg", edge: "quadEdge", depth: "quadDepth", "3d": "quad3d" };
-    const el = document.getElementById(modeToId[mode]);
-    if (!el) return;
-    const errEl = el.querySelector(".quad-error");
-    if (errEl) {
-        errEl.textContent = msg || "";
-        errEl.style.display = msg ? "flex" : "none";
-    }
-};
-
-/**
- * Update per-quadrant metric overlay text.
- */
-APP.ui.inspection._updateQuadMetric = function (mode, data) {
-    const { $ } = APP.core.utils;
-    if (!data) return;
-
-    if (mode === "seg") {
-        // Count mask pixels from RLE or mask image
-        let area = 0;
-        if (data.rle && data.rle.counts) {
-            let val = 0;
-            for (const count of data.rle.counts) {
-                if (val) area += count;
-                val = 1 - val;
-            }
-        }
-        const el = $("#quadMetricSeg");
-        if (el) el.textContent = area > 0 ? `AREA ${area.toLocaleString()} px` : "";
-    } else if (mode === "depth") {
-        const el = $("#quadMetricDepth");
-        if (el && data.min != null && data.max != null) {
-            const avg = ((data.min + data.max) / 2).toFixed(1);
-            el.textContent = `${avg}m`;
-        }
-    } else if (mode === "3d") {
-        const el = $("#quadMetric3d");
-        if (el) {
-            if (data.type === "glb") {
-                el.textContent = "GENERATIVE 3D";
-            } else {
-                const n = data.numVertices || (data.positions ? data.positions.length / 3 : 0);
-                const label = data.renderMode === "mesh" ? "verts" : "pts";
-                el.textContent = `${n.toLocaleString()} ${label}`;
-            }
-        }
-    }
-};
-
-/**
- * Update the bottom metrics strip.
- */
-APP.ui.inspection._updateBottomMetrics = function (track, cache) {
-    const { $ } = APP.core.utils;
-    const el = $("#inspectionMetrics");
-    if (!el || !track) return;
-
-    const speed = track.speed_kph != null ? `${Math.round(track.speed_kph)} kph` : "N/A";
-    const depth = track.depth_est_m != null ? `${track.depth_est_m.toFixed(1)}m` : "N/A";
-
-    let area = "N/A";
-    if (cache.seg && cache.seg.rle && cache.seg.rle.counts) {
-        let px = 0, val = 0;
-        for (const count of cache.seg.rle.counts) {
-            if (val) px += count;
-            val = 1 - val;
-        }
-        if (px > 0) area = `${px.toLocaleString()} px`;
-    }
-
-    const frames = track.frameCount || "--";
-
-    el.innerHTML =
-        `VEL <span>${speed}</span>` +
-        `DEPTH <span>${depth}</span>` +
-        `AREA <span>${area}</span>` +
-        `TRACKED <span>${frames} frm</span>`;
-};
-
-/**
- * Toggle expand/collapse of a quadrant.
- */
-APP.ui.inspection._toggleExpand = function (mode) {
-    const { state } = APP.core;
-    if (state.inspection.expandedQuadrant === mode) {
-        APP.ui.inspection._collapseExpanded();
-    } else {
-        APP.ui.inspection._collapseExpanded();
-        const modeToId = { seg: "quadSeg", edge: "quadEdge", depth: "quadDepth", "3d": "quad3d" };
-        const el = document.getElementById(modeToId[mode]);
-        if (el) {
-            el.classList.add("expanded");
-            state.inspection.expandedQuadrant = mode;
-            // Trigger resize for 3D renderer
-            if (mode === "3d") {
-                setTimeout(() => window.dispatchEvent(new Event("resize")), 50);
-            }
-        }
-    }
-};
-
-/**
- * Collapse any currently expanded quadrant.
- */
-APP.ui.inspection._collapseExpanded = function () {
-    const { state } = APP.core;
-    const was3d = state.inspection.expandedQuadrant === "3d";
-
-    const expanded = document.querySelector(".inspection-quadrant.expanded");
-    if (expanded) expanded.classList.remove("expanded");
-    state.inspection.expandedQuadrant = null;
-
-    if (was3d) {
-        setTimeout(() => window.dispatchEvent(new Event("resize")), 50);
-    }
-};

frontend/js/ui/logging.js

@@ -1,55 +0,0 @@
-APP.ui.logging = {};
-
-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";
-    const ts = new Date().toISOString().split("T")[1].slice(0, 8);
-    let color = "#94a3b8"; // dim
-    if (type === "g") color = "var(--success)";
-    if (type === "w") color = "var(--warning)";
-    if (type === "e") color = "var(--danger)";
-    if (type === "t") color = "var(--accent2)";
-
-    div.innerHTML = `<span class="ts">[${ts}]</span> <span style="color:${color}">${msg}</span>`;
-    consoleHook.appendChild(div);
-    consoleHook.scrollTop = consoleHook.scrollHeight;
-
-    // Fire toast for error messages
-    if (type === "e" && APP.ui.animations && APP.ui.animations.toast) {
-        APP.ui.animations.toast(msg, "error", 5000);
-    }
-};
-
-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(--text3)";
-    if (level === "good") color = "var(--success)";
-    if (level === "warn") color = "var(--warning)";
-    if (level === "bad") color = "var(--danger)";
-
-    // Update dot CSS class for state-aware styling
-    sysDot.classList.remove("warn", "bad");
-    if (level === "warn") sysDot.classList.add("warn");
-    if (level === "bad") sysDot.classList.add("bad");
-
-    sysDot.style.background = color;
-    sysDot.style.boxShadow = `0 0 8px ${color}`;
-    sysStatus.textContent = text;
-    sysStatus.style.color = color === "var(--text3)" ? "var(--text)" : color;
-};
-
-APP.ui.logging.setHfStatus = function (msg) {
-    const { $ } = APP.core.utils;
-    const el = $("#hfBackendStatus");
-    if (el) el.textContent = `Backend: ${msg}`;
-
-    if (msg && (msg.toLowerCase().includes("error") || msg.toLowerCase().includes("failed"))) {
-        APP.ui.logging.log(msg, "e");
-    }
-};

frontend/js/ui/overlays.js

@@ -1,187 +0,0 @@
-// SVG-based overlay for bounding box rendering and click-to-select
-APP.ui.overlays = {};
-
-const SVG_NS = "http://www.w3.org/2000/svg";
-
-/**
- * Get current tracks from state (detections preferred, then tracker.tracks).
- */
-APP.ui.overlays._getTracks = function () {
-    const { state } = APP.core;
-    if (state.detections && state.detections.length > 0) return state.detections;
-    if (state.tracker.tracks && state.tracker.tracks.length > 0) return state.tracker.tracks;
-    return [];
-};
-
-/**
- * Ensure the SVG element exists inside the viewbox, create if missing.
- * Uses viewBox="0 0 1 1" so all coordinates are normalized 0-1.
- */
-APP.ui.overlays._ensureSVG = function () {
-    const { $ } = APP.core.utils;
-    let svg = $("#engageOverlay");
-    if (svg) return svg;
-
-    const viewbox = $(".viewbox");
-    if (!viewbox) return null;
-
-    svg = document.createElementNS(SVG_NS, "svg");
-    svg.id = "engageOverlay";
-    svg.setAttribute("viewBox", "0 0 1 1");
-    svg.setAttribute("preserveAspectRatio", "none");
-
-    // Insert after video element
-    const video = $("#videoEngage");
-    if (video && video.nextSibling) {
-        viewbox.insertBefore(svg, video.nextSibling);
-    } else {
-        viewbox.appendChild(svg);
-    }
-
-    return svg;
-};
-
-/**
- * Sync SVG overlay position/size to match the video's actual rendered area
- * (accounting for object-fit: contain letterboxing).
- */
-APP.ui.overlays._syncToVideo = function (svg) {
-    const { $ } = APP.core.utils;
-    const video = $("#videoEngage");
-    if (!video || !video.videoWidth || !video.videoHeight) return;
-
-    const container = svg.parentElement;
-    if (!container) return;
-
-    const cw = container.clientWidth;
-    const ch = container.clientHeight;
-    const vw = video.videoWidth;
-    const vh = video.videoHeight;
-
-    // Calculate rendered video area within container (object-fit: contain)
-    const containerRatio = cw / ch;
-    const videoRatio = vw / vh;
-
-    let renderW, renderH, offsetX, offsetY;
-    if (videoRatio > containerRatio) {
-        // Video wider than container — letterbox top/bottom
-        renderW = cw;
-        renderH = cw / videoRatio;
-        offsetX = 0;
-        offsetY = (ch - renderH) / 2;
-    } else {
-        // Video taller than container — letterbox left/right
-        renderH = ch;
-        renderW = ch * videoRatio;
-        offsetX = (cw - renderW) / 2;
-        offsetY = 0;
-    }
-
-    svg.style.left = offsetX + "px";
-    svg.style.top = offsetY + "px";
-    svg.style.width = renderW + "px";
-    svg.style.height = renderH + "px";
-};
-
-/**
- * Main render: draws all track boxes with mission-status colors,
- * and highlights the selected track.
- */
-APP.ui.overlays.render = function () {
-    const { state } = APP.core;
-    const svg = APP.ui.overlays._ensureSVG();
-    if (!svg) return;
-
-    // Sync SVG position to video's rendered area
-    APP.ui.overlays._syncToVideo(svg);
-
-    // Clear previous content
-    svg.innerHTML = "";
-
-    // In segmentation mode, masks are already rendered in the video by the backend —
-    // skip drawing bounding box overlays to avoid clutter.
-    if (state.hf.mode === "segmentation") return;
-
-    const tracks = APP.ui.overlays._getTracks();
-    const selIds = state.selectedIds || [];
-    const inspectedId = state.tracker.selectedTrackId;
-
-    if (!tracks.length) return;
-
-    for (const t of tracks) {
-        if (!t.bbox) continue;
-        const b = t.bbox;
-        const isSelected = selIds.includes(t.id);
-        const isInspected = t.id === inspectedId;
-
-        // Skip tracks with invalid bbox
-        if (!isFinite(b.x) || !isFinite(b.y) || !isFinite(b.w) || !isFinite(b.h)) continue;
-
-        const group = document.createElementNS(SVG_NS, "g");
-        group.setAttribute("data-track-id", t.id);
-        group.classList.add("track-box");
-        if (isSelected) group.classList.add("selected");
-        if (isInspected) group.classList.add("inspected");
-
-        // Mission-status border (green/red) or default neutral
-        let strokeColor = "rgba(255,255,255,0.3)";
-        if (t.satisfies === true) {
-            strokeColor = "rgba(40, 167, 69, 0.8)";   // green
-        } else if (t.satisfies === false) {
-            strokeColor = "rgba(220, 53, 69, 0.8)";   // red
-        }
-
-        // Main bbox rect
-        const rect = document.createElementNS(SVG_NS, "rect");
-        rect.setAttribute("x", b.x);
-        rect.setAttribute("y", b.y);
-        rect.setAttribute("width", b.w);
-        rect.setAttribute("height", b.h);
-        rect.setAttribute("fill", isSelected ? "rgba(59, 130, 246, 0.12)" : "none");
-        rect.setAttribute("stroke", isSelected ? "rgba(59, 130, 246, 0.7)" : strokeColor);
-        rect.setAttribute("stroke-width", isInspected ? "0.004" : isSelected ? "0.003" : "0.002");
-        rect.setAttribute("vector-effect", "non-scaling-stroke");
-        group.appendChild(rect);
-
-        // Selected glow border
-        if (isSelected) {
-            const glow = document.createElementNS(SVG_NS, "rect");
-            glow.setAttribute("x", b.x);
-            glow.setAttribute("y", b.y);
-            glow.setAttribute("width", b.w);
-            glow.setAttribute("height", b.h);
-            glow.setAttribute("fill", "none");
-            glow.setAttribute("stroke", isInspected ? "rgba(96, 165, 250, 0.6)" : "rgba(96, 165, 250, 0.25)");
-            glow.setAttribute("stroke-width", isInspected ? "2" : "1");
-            glow.setAttribute("vector-effect", "non-scaling-stroke");
-            group.appendChild(glow);
-        }
-
-        // No label tag — backend-rendered labels are sufficient
-
-        // Click handler for this track group
-        group.addEventListener("click", (e) => {
-            e.stopPropagation();
-            document.dispatchEvent(new CustomEvent("track-selected", { detail: { id: t.id } }));
-        });
-
-        svg.appendChild(group);
-    }
-
-};
-
-/**
- * Initialize the SVG overlay (creates element if needed).
- * Attaches the empty-area click handler once.
- */
-APP.ui.overlays.init = function () {
-    const svg = APP.ui.overlays._ensureSVG();
-    if (svg && !svg._deselectBound) {
-        svg.addEventListener("click", (e) => {
-            if (e.target === svg) {
-                document.dispatchEvent(new CustomEvent("track-selected", { detail: { id: null } }));
-            }
-        });
-        svg._deselectBound = true;
-    }
-};

frontend/style.css

@@ -1,2028 +0,0 @@
-/* =========================================
-   ISR Analytics — Investor Demo
-   Floating Glass HUD Design System
-   ========================================= */
-
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
-
-:root {
-    /* --- Surface --- */
-    --bg:       #06080f;
-    --surface:  rgba(12, 17, 30, .72);
-    --surface2: rgba(16, 22, 38, .65);
-    --surface3: rgba(22, 30, 50, .60);
-    --glass:    rgba(12, 17, 30, .55);
-
-    /* --- Border --- */
-    --border:   rgba(255, 255, 255, .06);
-    --border2:  rgba(255, 255, 255, .09);
-    --border3:  rgba(255, 255, 255, .14);
-
-    /* --- Text --- */
-    --text:     rgba(255, 255, 255, .92);
-    --text2:    rgba(255, 255, 255, .58);
-    --text3:    rgba(255, 255, 255, .34);
-
-    /* --- Semantic --- */
-    --success:  #34d399;
-    --warning:  #fbbf24;
-    --danger:   #f87171;
-
-    /* --- Accent --- */
-    --accent:   #3b82f6;
-    --accent2:  #60a5fa;
-    --accent-glow: rgba(59, 130, 246, .15);
-
-    /* --- Effects --- */
-    --blur: blur(24px);
-    --blur-heavy: blur(40px);
-    --shadow-sm: 0 1px 3px rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.2);
-    --shadow-md: 0 4px 20px rgba(0,0,0,.35);
-    --shadow-lg: 0 12px 48px rgba(0,0,0,.5);
-    --shadow-glow: 0 0 40px rgba(59, 130, 246, .08);
-
-    --radius-sm: 8px;
-    --radius-md: 12px;
-    --radius-lg: 16px;
-    --radius-xl: 20px;
-
-    /* --- Typography --- */
-    --font: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-    --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
-    --sans: var(--font);
-}
-
-/* ---- Reset ---- */
-* { box-sizing: border-box; margin: 0; padding: 0; }
-html, body { height: 100%; }
-
-body {
-    background: var(--bg);
-    color: var(--text);
-    font-family: var(--font);
-    font-size: 13px;
-    line-height: 1.5;
-    overflow: hidden;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-}
-
-/* =========================================
-   Ambient Background
-   ========================================= */
-
-#ambientBg {
-    position: fixed;
-    inset: 0;
-    z-index: 0;
-    pointer-events: none;
-    overflow: hidden;
-}
-
-#ambientBg .orb {
-    position: absolute;
-    border-radius: 50%;
-    filter: blur(100px);
-    opacity: 0.4;
-    will-change: transform;
-}
-
-#ambientBg .orb-1 {
-    width: 600px; height: 600px;
-    background: radial-gradient(circle, rgba(59, 130, 246, .18), transparent 70%);
-    top: -10%; left: -5%;
-    animation: orbFloat1 25s ease-in-out infinite;
-}
-
-#ambientBg .orb-2 {
-    width: 500px; height: 500px;
-    background: radial-gradient(circle, rgba(99, 102, 241, .12), transparent 70%);
-    bottom: -15%; right: -5%;
-    animation: orbFloat2 30s ease-in-out infinite;
-}
-
-#ambientBg .orb-3 {
-    width: 400px; height: 400px;
-    background: radial-gradient(circle, rgba(14, 165, 233, .10), transparent 70%);
-    top: 40%; left: 50%;
-    animation: orbFloat3 20s ease-in-out infinite;
-}
-
-@keyframes orbFloat1 {
-    0%, 100% { transform: translate(0, 0) scale(1); }
-    33% { transform: translate(80px, 40px) scale(1.1); }
-    66% { transform: translate(-40px, 80px) scale(0.95); }
-}
-@keyframes orbFloat2 {
-    0%, 100% { transform: translate(0, 0) scale(1); }
-    33% { transform: translate(-60px, -30px) scale(1.05); }
-    66% { transform: translate(40px, -60px) scale(0.9); }
-}
-@keyframes orbFloat3 {
-    0%, 100% { transform: translate(0, 0) scale(1); }
-    50% { transform: translate(60px, -40px) scale(1.15); }
-}
-
-/* State-aware ambient: processing = pulse */
-body.state-processing #ambientBg .orb-1 {
-    animation: orbPulse 3s ease-in-out infinite;
-}
-
-@keyframes orbPulse {
-    0%, 100% { opacity: 0.3; transform: scale(1); }
-    50% { opacity: 0.6; transform: scale(1.15); }
-}
-
-/* =========================================
-   Layout Shell
-   ========================================= */
-
-#app {
-    position: relative;
-    z-index: 1;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-}
-
-/* ---- Header ---- */
-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0 20px;
-    height: 52px;
-    background: var(--glass);
-    backdrop-filter: var(--blur);
-    -webkit-backdrop-filter: var(--blur);
-    border-bottom: 1px solid var(--border);
-    flex-shrink: 0;
-    z-index: 100;
-}
-
-/* ---- Workspace ---- */
-.workspace {
-    flex: 1;
-    display: grid;
-    grid-template-columns: 272px 1fr;
-    gap: 0;
-    min-height: 0;
-    transition: grid-template-columns 0.4s cubic-bezier(.4, 0, .2, 1);
-}
-
-/* ---- Sidebar ---- */
-aside {
-    background: var(--glass);
-    backdrop-filter: var(--blur);
-    -webkit-backdrop-filter: var(--blur);
-    border-right: 1px solid var(--border);
-    overflow-y: auto;
-    overflow-x: hidden;
-    display: flex;
-    flex-direction: column;
-    min-height: 0;
-    z-index: 10;
-}
-
-/* ---- Main ---- */
-main {
-    background: transparent;
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-    min-height: 0;
-}
-
-/* ---- Footer / Stat Bar ---- */
-footer {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0 20px;
-    height: 40px;
-    background: var(--glass);
-    backdrop-filter: var(--blur);
-    -webkit-backdrop-filter: var(--blur);
-    border-top: 1px solid var(--border);
-    flex-shrink: 0;
-    z-index: 100;
-}
-
-footer .mono {
-    font-family: var(--mono);
-    font-size: 11px;
-    color: var(--text3);
-    letter-spacing: .02em;
-}
-
-.footer-left {
-    font-size: 11px;
-    color: var(--text3);
-}
-
-/* ---- Stat Chips in footer ---- */
-.stat-bar {
-    display: flex;
-    gap: 16px;
-    align-items: center;
-}
-
-.stat-item {
-    display: flex;
-    align-items: baseline;
-    gap: 6px;
-    font-size: 11px;
-}
-
-.stat-item .stat-label {
-    color: var(--text3);
-    font-weight: 500;
-    text-transform: uppercase;
-    letter-spacing: .05em;
-    font-size: 10px;
-}
-
-.stat-item .stat-value {
-    font-family: var(--mono);
-    font-size: 12px;
-    color: var(--text);
-    font-weight: 600;
-    font-variant-numeric: tabular-nums;
-    transition: color 0.3s ease;
-}
-
-.stat-item .stat-value.updated {
-    color: var(--accent2);
-}
-
-/* =========================================
-   Brand / Header
-   ========================================= */
-
-.brand {
-    display: flex;
-    gap: 10px;
-    align-items: center;
-    min-width: 0;
-}
-
-.logo {
-    width: 28px;
-    height: 28px;
-    border-radius: 7px;
-    background: linear-gradient(135deg, #3b82f6, #6366f1);
-    position: relative;
-    flex-shrink: 0;
-    box-shadow: 0 0 20px rgba(59, 130, 246, .2);
-}
-
-.logo::after {
-    content: "";
-    position: absolute;
-    inset: 6px;
-    border: 1.5px solid rgba(255,255,255,.8);
-    border-radius: 3px;
-}
-
-.brand h1 {
-    font-size: 14px;
-    font-weight: 600;
-    letter-spacing: -.01em;
-    color: var(--text);
-}
-
-.brand .sub {
-    font-size: 11px;
-    color: var(--text3);
-    margin-top: 0;
-    line-height: 1.2;
-}
-
-.status-row {
-    display: flex;
-    gap: 8px;
-    align-items: center;
-}
-
-/* =========================================
-   Glass Pill / Indicators
-   ========================================= */
-
-.pill {
-    display: flex;
-    align-items: center;
-    gap: 7px;
-    padding: 5px 12px;
-    border-radius: var(--radius-md);
-    border: 1px solid var(--border2);
-    background: var(--surface);
-    backdrop-filter: var(--blur);
-    font-size: 12px;
-    color: var(--text2);
-    white-space: nowrap;
-    transition: all 0.3s ease;
-}
-
-.dot {
-    width: 6px;
-    height: 6px;
-    border-radius: 50%;
-    background: var(--success);
-    box-shadow: 0 0 8px rgba(52, 211, 153, .5);
-    flex-shrink: 0;
-    transition: all 0.4s ease;
-}
-
-.dot.warn {
-    background: var(--warning);
-    box-shadow: 0 0 8px rgba(251, 191, 36, .5);
-}
-
-.dot.bad {
-    background: var(--danger);
-    box-shadow: 0 0 8px rgba(248, 113, 113, .5);
-}
-
-/* Processing pulse on dot */
-.dot.processing {
-    animation: dotPulse 1.5s ease-in-out infinite;
-}
-
-@keyframes dotPulse {
-    0%, 100% { transform: scale(1); opacity: 1; }
-    50% { transform: scale(1.6); opacity: .6; }
-}
-
-.kbd {
-    font-family: var(--mono);
-    font-size: 10px;
-    font-weight: 600;
-    padding: 2px 6px;
-    border: 1px solid var(--border2);
-    background: rgba(255,255,255,.04);
-    border-radius: 4px;
-    color: var(--text2);
-}
-
-.badge {
-    display: inline-flex;
-    align-items: center;
-    gap: 5px;
-    padding: 3px 8px;
-    border-radius: var(--radius-sm);
-    border: 1px solid var(--border2);
-    background: var(--surface2);
-    font-family: var(--mono);
-    font-size: 11px;
-    color: var(--text2);
-}
-
-/* =========================================
-   Cards / Panels (Glass)
-   ========================================= */
-
-.card {
-    padding: 14px 16px;
-    border-bottom: 1px solid var(--border);
-    position: relative;
-}
-
-.card:last-child { border-bottom: none; }
-
-.card h2 {
-    font-size: 10px;
-    font-weight: 600;
-    letter-spacing: .08em;
-    text-transform: uppercase;
-    color: var(--text3);
-    margin-bottom: 2px;
-}
-
-.card small { color: var(--text2); }
-
-.card .hint {
-    color: var(--text3);
-    font-size: 11px;
-    line-height: 1.4;
-    margin-top: 5px;
-}
-
-.panel {
-    background: var(--glass);
-    backdrop-filter: var(--blur);
-    -webkit-backdrop-filter: var(--blur);
-    border: 1px solid var(--border);
-    border-radius: var(--radius-lg);
-    padding: 14px;
-    box-shadow: var(--shadow-md), var(--shadow-glow);
-    overflow: hidden;
-    position: relative;
-    transition: box-shadow 0.3s ease;
-}
-
-.panel:hover {
-    box-shadow: var(--shadow-lg), 0 0 60px rgba(59, 130, 246, .06);
-}
-
-.panel h3 {
-    margin: 0 0 10px;
-    font-size: 10px;
-    font-weight: 600;
-    letter-spacing: .08em;
-    text-transform: uppercase;
-    color: var(--text3);
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 8px;
-}
-
-.panel h3 .rightnote {
-    font-size: 11px;
-    color: var(--text3);
-    font-family: var(--mono);
-    letter-spacing: 0;
-    text-transform: none;
-    font-weight: 400;
-}
-
-.collapse-btn {
-    background: rgba(255,255,255,.04);
-    border: 1px solid var(--border2);
-    border-radius: var(--radius-sm);
-    padding: 4px 10px;
-    color: var(--text3);
-    cursor: pointer;
-    font-size: 11px;
-    font-family: var(--font);
-    font-weight: 500;
-    transition: all 0.2s ease;
-}
-
-.collapse-btn:hover {
-    background: rgba(255,255,255,.08);
-    color: var(--text2);
-    border-color: var(--border3);
-}
-
-/* =========================================
-   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;
-    font-weight: 500;
-    color: var(--text3);
-}
-
-input[type="range"] { width: 100%; }
-
-select,
-textarea,
-input[type="text"],
-input[type="number"] {
-    width: 100%;
-    background: rgba(255,255,255,.03);
-    border: 1px solid var(--border2);
-    border-radius: var(--radius-sm);
-    padding: 8px 10px;
-    color: var(--text);
-    outline: none;
-    font-family: var(--font);
-    font-size: 13px;
-    transition: all 0.2s ease;
-}
-
-select:focus,
-textarea:focus,
-input[type="text"]:focus,
-input[type="number"]:focus {
-    border-color: rgba(59, 130, 246, .5);
-    box-shadow: 0 0 0 3px rgba(59, 130, 246, .1), 0 0 20px rgba(59, 130, 246, .05);
-    background: rgba(255,255,255,.05);
-}
-
-textarea {
-    resize: vertical;
-    line-height: 1.4;
-}
-
-/* ---- Buttons ---- */
-.btn {
-    user-select: none;
-    cursor: pointer;
-    border: none;
-    border-radius: var(--radius-sm);
-    padding: 9px 16px;
-    font-weight: 600;
-    font-size: 12px;
-    font-family: var(--font);
-    letter-spacing: .01em;
-    color: #fff;
-    background: linear-gradient(135deg, #3b82f6, #2563eb);
-    box-shadow: 0 2px 8px rgba(59, 130, 246, .25), inset 0 1px 0 rgba(255,255,255,.1);
-    transition: all 0.2s cubic-bezier(.4, 0, .2, 1);
-    position: relative;
-    overflow: hidden;
-}
-
-.btn::after {
-    content: "";
-    position: absolute;
-    inset: 0;
-    background: linear-gradient(180deg, rgba(255,255,255,.08), transparent);
-    pointer-events: none;
-}
-
-.btn:hover {
-    transform: translateY(-1px);
-    box-shadow: 0 4px 16px rgba(59, 130, 246, .35), inset 0 1px 0 rgba(255,255,255,.15);
-}
-
-.btn:active {
-    transform: translateY(0);
-    box-shadow: 0 1px 4px rgba(59, 130, 246, .2);
-}
-
-.btn.secondary {
-    background: rgba(255,255,255,.05);
-    border: 1px solid var(--border2);
-    box-shadow: none;
-    color: var(--text2);
-    font-weight: 500;
-}
-
-.btn.secondary::after { display: none; }
-
-.btn.secondary:hover {
-    background: rgba(255,255,255,.08);
-    color: var(--text);
-    border-color: var(--border3);
-    transform: translateY(-1px);
-    box-shadow: var(--shadow-sm);
-}
-
-.btn.danger {
-    background: linear-gradient(135deg, #dc2626, #b91c1c);
-    box-shadow: 0 2px 8px rgba(220, 38, 38, .25);
-}
-
-.btn.danger:hover {
-    box-shadow: 0 4px 16px rgba(220, 38, 38, .35);
-}
-
-.btnrow {
-    display: flex;
-    gap: 6px;
-    margin-top: 10px;
-}
-
-.btnrow .btn { flex: 1; }
-
-/* =========================================
-   Tabs
-   ========================================= */
-
-.tabs {
-    display: flex;
-    gap: 2px;
-    padding: 8px 12px;
-    border-bottom: 1px solid var(--border);
-    background: var(--glass);
-}
-
-.tabbtn {
-    cursor: pointer;
-    border: none;
-    border-radius: var(--radius-sm);
-    padding: 6px 14px;
-    font-size: 12px;
-    font-family: var(--font);
-    font-weight: 500;
-    color: var(--text3);
-    background: transparent;
-    transition: all 0.2s ease;
-}
-
-.tabbtn:hover {
-    color: var(--text2);
-    background: rgba(255,255,255,.04);
-}
-
-.tabbtn.active {
-    color: var(--text);
-    background: rgba(255,255,255,.06);
-}
-
-.tab {
-    display: none;
-    flex: 1;
-    min-height: 0;
-    overflow: auto;
-    padding: 14px;
-}
-
-.tab.active { display: block; }
-
-/* =========================================
-   Video Viewport (Cinematic)
-   ========================================= */
-
-.viewbox {
-    position: relative;
-    border-radius: var(--radius-lg);
-    overflow: hidden;
-    background: #000;
-    border: 1px solid var(--border);
-    min-height: 360px;
-    box-shadow: var(--shadow-lg), 0 0 80px rgba(0,0,0,.4);
-    transition: box-shadow 0.4s ease;
-}
-
-/* Ambient glow behind video during processing */
-body.state-processing .viewbox {
-    box-shadow: var(--shadow-lg), 0 0 60px rgba(59, 130, 246, .12), 0 0 120px rgba(59, 130, 246, .06);
-}
-
-body.state-complete .viewbox {
-    box-shadow: var(--shadow-lg), 0 0 60px rgba(52, 211, 153, .08);
-}
-
-.viewbox canvas,
-.viewbox video {
-    width: 100%;
-    height: 100%;
-    display: block;
-    object-fit: contain;
-}
-
-#videoEngage { display: block; opacity: 1; }
-
-/* SVG overlay */
-#engageOverlay {
-    position: absolute;
-    top: 0; left: 0;
-    width: 100%; height: 100%;
-    pointer-events: auto;
-    cursor: crosshair;
-    z-index: 5;
-}
-
-#engageOverlay .track-box {
-    cursor: pointer;
-    transition: opacity 0.15s ease;
-}
-
-#engageOverlay .track-box:hover rect:first-child {
-    fill: rgba(59, 130, 246, 0.08);
-}
-
-/* ---- Watermark ---- */
-.viewbox .watermark {
-    position: absolute;
-    left: 10px; bottom: 10px;
-    font-family: var(--mono);
-    font-size: 10px;
-    color: rgba(255,255,255,.25);
-    background: rgba(0,0,0,.5);
-    backdrop-filter: blur(8px);
-    padding: 4px 10px;
-    border-radius: 6px;
-    letter-spacing: .04em;
-    border: 1px solid rgba(255,255,255,.06);
-}
-
-/* ---- Empty State ---- */
-.viewbox .empty {
-    position: absolute;
-    inset: 0;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    gap: 16px;
-    color: var(--text3);
-    text-align: center;
-    padding: 40px;
-}
-
-.viewbox .empty .big {
-    font-size: 16px;
-    font-weight: 500;
-    color: var(--text2);
-}
-
-.viewbox .empty .small {
-    color: var(--text3);
-    font-size: 13px;
-    max-width: 420px;
-    line-height: 1.6;
-}
-
-/* ---- Progress Ring (overlaid on video) ---- */
-.progress-ring-wrap {
-    position: absolute;
-    top: 50%; left: 50%;
-    transform: translate(-50%, -50%);
-    z-index: 20;
-    display: none;
-    flex-direction: column;
-    align-items: center;
-    gap: 12px;
-    pointer-events: none;
-}
-
-.progress-ring-wrap.visible {
-    display: flex;
-    animation: fadeInScale 0.4s cubic-bezier(.4, 0, .2, 1);
-}
-
-@keyframes fadeInScale {
-    from { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
-    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
-}
-
-.progress-ring-wrap svg {
-    width: 100px;
-    height: 100px;
-    transform: rotate(-90deg);
-    filter: drop-shadow(0 0 12px rgba(59, 130, 246, .3));
-}
-
-.progress-ring-bg {
-    fill: none;
-    stroke: rgba(255,255,255,.06);
-    stroke-width: 4;
-}
-
-.progress-ring-fg {
-    fill: none;
-    stroke: var(--accent);
-    stroke-width: 4;
-    stroke-linecap: round;
-    stroke-dasharray: 264;
-    stroke-dashoffset: 264;
-    transition: stroke-dashoffset 0.5s cubic-bezier(.4, 0, .2, 1);
-}
-
-.progress-ring-text {
-    font-family: var(--mono);
-    font-size: 13px;
-    font-weight: 600;
-    color: var(--text);
-    background: rgba(0,0,0,.5);
-    backdrop-filter: blur(8px);
-    padding: 4px 14px;
-    border-radius: 20px;
-    border: 1px solid var(--border2);
-    letter-spacing: .02em;
-}
-
-/* =========================================
-   Timeline
-   ========================================= */
-
-.timeline-wrap {
-    width: 100%;
-    margin-top: 8px;
-    border-radius: 4px;
-    overflow: hidden;
-    background: rgba(255,255,255,.03);
-    cursor: pointer;
-    position: relative;
-}
-
-.timeline-wrap canvas {
-    display: block;
-    width: 100%;
-    height: 14px;
-}
-
-/* =========================================
-   Track Cards (with animation)
-   ========================================= */
-
-.list {
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-    min-height: 160px;
-    max-height: none;
-    overflow-y: auto;
-    padding-right: 4px;
-}
-
-.obj {
-    padding: 10px 12px;
-    border-radius: var(--radius-sm);
-    border: 1px solid var(--border);
-    background: rgba(255,255,255,.02);
-    cursor: pointer;
-    transition: all 0.15s ease;
-}
-
-.obj:hover {
-    background: rgba(255,255,255,.05);
-    border-color: var(--border2);
-}
-
-.obj.active {
-    border-color: var(--accent);
-    box-shadow: inset 3px 0 0 var(--accent), 0 0 20px rgba(59,130,246,.06);
-    background: rgba(59, 130, 246, .04);
-}
-
-.obj .top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
-.obj .id { font-family: var(--mono); font-size: 12px; color: var(--text); }
-.obj .cls { font-size: 12px; color: var(--text2); }
-.obj .meta { margin-top: 4px; display: flex; gap: 10px; flex-wrap: wrap; font-size: 11px; color: var(--text3); }
-
-/* ---- Track Cards ---- */
-.track-card {
-    background: rgba(255,255,255,.02);
-    border: 1px solid var(--border);
-    border-radius: var(--radius-sm);
-    padding: 10px 12px;
-    cursor: pointer;
-    transition: all 0.2s cubic-bezier(.4, 0, .2, 1);
-    /* Staggered entrance */
-    opacity: 0;
-    transform: translateY(8px);
-    animation: cardEnter 0.35s cubic-bezier(.4, 0, .2, 1) forwards;
-}
-
-@keyframes cardEnter {
-    to { opacity: 1; transform: translateY(0); }
-}
-
-/* Stagger delays applied via JS: style="animation-delay: Xms" */
-
-.track-card:hover {
-    background: rgba(255,255,255,.05);
-    border-color: var(--border2);
-    transform: translateY(-1px);
-    box-shadow: var(--shadow-sm);
-}
-
-.track-card.active {
-    border-color: var(--accent);
-    background: rgba(59, 130, 246, .05);
-    box-shadow: inset 3px 0 0 var(--accent), 0 0 24px rgba(59, 130, 246, .06);
-    transform: translateY(0);
-}
-
-.track-card.inspected {
-    border-left-color: rgba(96, 165, 250, 0.8);
-    box-shadow: inset 3px 0 0 rgba(96, 165, 250, 0.8);
-}
-
-.track-card-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    font-weight: 600;
-    margin-bottom: 4px;
-    font-size: 13px;
-    color: var(--text);
-}
-
-.track-card-meta {
-    font-size: 11px;
-    font-family: var(--mono);
-    color: var(--text3);
-    margin-bottom: 6px;
-    letter-spacing: .02em;
-}
-
-.track-card-body {
-    font-size: 12px;
-    line-height: 1.45;
-    color: var(--text2);
-    background: rgba(0,0,0,.2);
-    padding: 8px 10px;
-    border-radius: var(--radius-sm);
-    border: 1px solid var(--border);
-}
-
-.badgemini {
-    font-size: 10px;
-    font-weight: 600;
-    padding: 2px 7px;
-    border-radius: 4px;
-    letter-spacing: .02em;
-    line-height: 1;
-}
-
-.track-card-features {
-    margin-top: 8px;
-    border-top: 1px solid var(--border);
-    padding-top: 8px;
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 3px 12px;
-}
-
-.track-card-features .feat-row {
-    display: flex;
-    justify-content: space-between;
-    align-items: baseline;
-    font-size: 11px;
-    padding: 2px 0;
-}
-
-.track-card-features .feat-key {
-    font-family: var(--mono);
-    color: var(--text3);
-    white-space: nowrap;
-    margin-right: 6px;
-}
-
-.track-card-features .feat-val {
-    color: var(--text);
-    text-align: right;
-    font-size: 11px;
-    font-variant-numeric: tabular-nums;
-}
-
-.gpt-badge {
-    color: var(--accent2);
-    font-size: 10px;
-    border: 1px solid rgba(59,130,246,.3);
-    border-radius: 3px;
-    padding: 1px 4px;
-    margin-left: 6px;
-}
-
-.gpt-text { color: var(--text2); }
-
-/* =========================================
-   Tables
-   ========================================= */
-
-.table {
-    width: 100%;
-    border-collapse: separate;
-    border-spacing: 0;
-    border-radius: var(--radius-md);
-    border: 1px solid var(--border);
-    overflow: hidden;
-}
-
-.table th, .table td {
-    padding: 8px 10px;
-    font-size: 12px;
-    border-bottom: 1px solid var(--border);
-    vertical-align: top;
-}
-
-.table th {
-    background: rgba(255,255,255,.03);
-    color: var(--text3);
-    letter-spacing: .04em;
-    text-transform: uppercase;
-    font-size: 10px;
-    font-weight: 600;
-}
-
-.table tr:last-child td { border-bottom: none; }
-
-.k { font-family: var(--mono); color: var(--text); }
-.mini { font-size: 11px; color: var(--text3); line-height: 1.4; }
-
-/* =========================================
-   Metrics & Log
-   ========================================= */
-
-.metricgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
-
-.metric {
-    border: 1px solid var(--border);
-    background: rgba(255,255,255,.02);
-    border-radius: var(--radius-md);
-    padding: 12px;
-}
-
-.metric .label {
-    font-size: 10px;
-    color: var(--text3);
-    font-weight: 600;
-    letter-spacing: .05em;
-    text-transform: uppercase;
-}
-
-.metric .value {
-    margin-top: 4px;
-    font-family: var(--mono);
-    font-size: 20px;
-    font-weight: 600;
-    color: var(--text);
-    font-variant-numeric: tabular-nums;
-}
-
-.metric .sub {
-    margin-top: 4px;
-    font-size: 11px;
-    color: var(--text3);
-}
-
-.log {
-    font-family: var(--mono);
-    font-size: 11px;
-    color: var(--text2);
-    line-height: 1.5;
-    background: rgba(0,0,0,.3);
-    border: 1px solid var(--border);
-    border-radius: var(--radius-sm);
-    padding: 10px;
-    height: 210px;
-    overflow: auto;
-    white-space: pre-wrap;
-}
-
-.log .t { color: var(--accent2); }
-.log .w { color: var(--warning); }
-.log .e { color: var(--danger); }
-.log .g { color: var(--success); }
-
-/* =========================================
-   Engage Grid
-   ========================================= */
-
-.engage-grid {
-    display: grid;
-    grid-template-columns: 1.6fr .9fr;
-    gap: 12px;
-    min-height: 0;
-    transition: grid-template-columns 0.4s cubic-bezier(.4, 0, .2, 1);
-}
-
-.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;
-}
-
-/* =========================================
-   Chips / Strip
-   ========================================= */
-
-.strip {
-    display: flex;
-    gap: 6px;
-    flex-wrap: wrap;
-    align-items: center;
-}
-
-.strip .chip {
-    padding: 4px 10px;
-    border-radius: 6px;
-    border: 1px solid var(--border);
-    background: rgba(255,255,255,.03);
-    font-family: var(--mono);
-    font-size: 11px;
-    color: var(--text2);
-    transition: all 0.2s ease;
-    cursor: default;
-}
-
-.strip .chip:hover {
-    background: rgba(255,255,255,.06);
-    border-color: var(--border2);
-}
-
-/* =========================================
-   Sidebar Checkbox
-   ========================================= */
-
-.checkbox-row {
-    grid-column: span 2;
-    margin-top: 8px;
-    border-top: 1px solid var(--border);
-    padding-top: 8px;
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    cursor: pointer;
-    font-size: 12px;
-}
-
-.checkbox-row input[type="checkbox"] {
-    width: auto;
-    margin: 0;
-    accent-color: var(--accent);
-}
-
-/* =========================================
-   Progress Bar
-   ========================================= */
-
-.bar {
-    height: 4px;
-    border-radius: 2px;
-    background: rgba(255,255,255,.04);
-    overflow: hidden;
-}
-
-.bar > div {
-    height: 100%;
-    width: 0%;
-    background: linear-gradient(90deg, var(--accent), var(--accent2));
-    transition: width .3s ease;
-    border-radius: 2px;
-}
-
-/* =========================================
-   Frame / Intel Grid
-   ========================================= */
-
-.frame-grid {
-    display: grid;
-    grid-template-columns: 1.6fr 0.9fr;
-    grid-template-rows: auto auto;
-    gap: 12px;
-    min-height: 0;
-}
-
-.frame-grid .panel-monitor { grid-column: 1; grid-row: 1 / 3; }
-.frame-grid .panel-summary  { grid-column: 2; grid-row: 1 / 3; }
-
-.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: var(--radius-sm);
-    border: 1px solid var(--border);
-    background: rgba(0,0,0,.2);
-}
-
-.intelbox {
-    font-size: 12px;
-    line-height: 1.45;
-    color: var(--text2);
-    background: rgba(0,0,0,.2);
-    border: 1px solid var(--border);
-    border-radius: var(--radius-sm);
-    padding: 10px;
-    min-height: 72px;
-}
-
-/* =========================================
-   Radar / Trade Space
-   ========================================= */
-
-.radar { height: 540px; display: flex; flex-direction: column; }
-.radar canvas { flex: 1; width: 100%; height: 100%; display: block; }
-
-.trade-grid {
-    display: grid;
-    grid-template-columns: 1.35fr .65fr;
-    gap: 12px;
-    min-height: 0;
-}
-
-.plot { height: 420px; }
-
-/* =========================================
-   Chat Panel (Glass)
-   ========================================= */
-
-.panel-chat {
-    grid-column: 2;
-    grid-row: 2;
-    max-height: 480px;
-    min-height: 320px;
-    display: flex;
-    flex-direction: column;
-}
-
-.panel-chat.collapsed .chat-container { display: none; }
-.panel-chat.collapsed { max-height: 44px; min-height: 0; }
-
-.chat-container {
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-    min-height: 0;
-    gap: 8px;
-}
-
-.chat-messages {
-    flex: 1;
-    overflow-y: auto;
-    background: rgba(0,0,0,.2);
-    border: 1px solid var(--border);
-    border-radius: var(--radius-sm);
-    padding: 10px;
-    display: flex;
-    flex-direction: column;
-    gap: 6px;
-    min-height: 100px;
-}
-
-.chat-message {
-    display: flex;
-    gap: 8px;
-    padding: 8px 12px;
-    border-radius: var(--radius-sm);
-    font-size: 13px;
-    line-height: 1.45;
-    animation: msgEnter 0.25s cubic-bezier(.4, 0, .2, 1);
-}
-
-@keyframes msgEnter {
-    from { opacity: 0; transform: translateY(6px); }
-    to   { opacity: 1; transform: translateY(0); }
-}
-
-.chat-message.chat-user {
-    background: rgba(59, 130, 246, .08);
-    border: 1px solid rgba(59, 130, 246, .15);
-    margin-left: 16px;
-}
-
-.chat-message.chat-assistant {
-    background: rgba(255,255,255,.03);
-    border: 1px solid var(--border);
-    margin-right: 16px;
-}
-
-.chat-message.chat-system {
-    background: rgba(251, 191, 36, .06);
-    border: 1px solid rgba(251, 191, 36, .12);
-    color: var(--warning);
-    font-size: 12px;
-}
-
-.chat-message.loading .chat-content::after {
-    content: "";
-    display: inline-block;
-    width: 12px; height: 12px;
-    border: 2px solid rgba(255,255,255,.1);
-    border-top-color: var(--accent);
-    border-radius: 50%;
-    animation: spin 0.7s linear infinite;
-    margin-left: 8px;
-    vertical-align: middle;
-}
-
-@keyframes spin { to { transform: rotate(360deg); } }
-
-.chat-icon {
-    flex-shrink: 0;
-    font-size: 11px;
-    font-weight: 600;
-    color: var(--text3);
-}
-
-.chat-content {
-    flex: 1;
-    color: var(--text);
-    word-break: break-word;
-}
-
-.chat-input-row {
-    display: flex;
-    gap: 6px;
-}
-
-.chat-input-row input {
-    flex: 1;
-    background: rgba(255,255,255,.03);
-    border: 1px solid var(--border2);
-    border-radius: var(--radius-sm);
-    padding: 10px 12px;
-    color: var(--text);
-    font-family: var(--font);
-    font-size: 13px;
-    outline: none;
-    transition: all 0.2s ease;
-}
-
-.chat-input-row input:focus {
-    border-color: rgba(59, 130, 246, .5);
-    box-shadow: 0 0 0 3px rgba(59, 130, 246, .1);
-    background: rgba(255,255,255,.05);
-}
-
-.chat-input-row input:disabled {
-    opacity: 0.3;
-    cursor: not-allowed;
-}
-
-.chat-input-row .btn {
-    padding: 10px 18px;
-    min-width: 70px;
-}
-
-/* Chat Context Header */
-.chat-context-header {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    padding: 6px 12px;
-    background: rgba(0,0,0,.25);
-    border-bottom: 1px solid var(--border);
-    flex-wrap: wrap;
-    flex-shrink: 0;
-}
-
-.chat-context-label {
-    color: var(--text3);
-    font-size: 10px;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-    flex-shrink: 0;
-}
-
-.chat-context-chips {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 4px;
-}
-
-.chat-context-chip {
-    display: inline-flex;
-    align-items: center;
-    gap: 4px;
-    background: rgba(255,255,255,.04);
-    border: 1px solid var(--border2);
-    color: var(--text);
-    padding: 2px 8px;
-    border-radius: 4px;
-    font-size: 11px;
-    font-family: var(--mono);
-    animation: msgEnter 0.2s ease;
-}
-
-.chat-context-chip .chip-label {
-    color: var(--text2);
-}
-
-.chat-context-chip .chip-status {
-    font-size: 9px;
-    line-height: 1;
-}
-
-.chat-context-chip .chip-status.match { color: #34d399; }
-.chat-context-chip .chip-status.no-match { color: #f87171; }
-.chat-context-chip .chip-status.unassessed { color: var(--text3); }
-
-/* Chat Suggestions */
-.chat-suggestions {
-    display: flex;
-    gap: 5px;
-    padding: 6px 12px;
-    border-bottom: 1px solid var(--border);
-    flex-wrap: wrap;
-    flex-shrink: 0;
-    overflow-x: auto;
-}
-
-.chat-suggestion-chip {
-    background: rgba(255,255,255,.03);
-    border: 1px solid var(--border2);
-    color: var(--text2);
-    padding: 3px 10px;
-    border-radius: 12px;
-    font-size: 10px;
-    cursor: pointer;
-    white-space: nowrap;
-    transition: all 0.15s ease;
-    animation: msgEnter 0.2s ease;
-}
-
-.chat-suggestion-chip:hover {
-    background: rgba(59, 130, 246, .1);
-    border-color: rgba(59, 130, 246, .3);
-    color: var(--text);
-}
-
-/* Chat context marker (join/leave) */
-.chat-message.chat-marker {
-    background: none;
-    border: none;
-    justify-content: center;
-    color: var(--text3);
-    font-size: 11px;
-    padding: 4px 0;
-    animation: msgEnter 0.2s ease;
-}
-
-/* =========================================
-   Inspection Panel — Quad View
-   ========================================= */
-
-.panel-inspection {
-    grid-column: 1;
-    grid-row: 2;
-    max-height: 520px;
-    min-height: 360px;
-    display: flex;
-    flex-direction: column;
-    animation: panelSlideUp 0.3s cubic-bezier(.4, 0, .2, 1);
-}
-
-@keyframes panelSlideUp {
-    from { opacity: 0; transform: translateY(12px); }
-    to   { opacity: 1; transform: translateY(0); }
-}
-
-/* --- Header --- */
-
-.inspection-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 10px 12px;
-    border-bottom: 1px solid rgba(255,255,255,0.04);
-}
-
-.inspection-header-left {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-}
-
-.inspection-obj-name {
-    font-size: 14px;
-    font-weight: 700;
-    color: #e2e8f0;
-    letter-spacing: 0.5px;
-    font-family: var(--mono);
-}
-
-.inspection-conf {
-    font-size: 10px;
-    color: #64748b;
-    font-family: var(--mono);
-}
-
-.inspection-status {
-    font-size: 8px;
-    padding: 2px 8px;
-    border-radius: 2px;
-    letter-spacing: 0.5px;
-    font-family: var(--mono);
-    font-weight: 600;
-}
-.inspection-status.match {
-    background: rgba(34,197,94,0.12);
-    border: 1px solid rgba(34,197,94,0.2);
-    color: #22c55e;
-}
-.inspection-status.no-match {
-    background: rgba(239,68,68,0.12);
-    border: 1px solid rgba(239,68,68,0.2);
-    color: #ef4444;
-}
-.inspection-status.pending {
-    background: rgba(255,255,255,0.05);
-    border: 1px solid rgba(255,255,255,0.08);
-    color: #64748b;
-}
-
-.inspection-header-right {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-}
-
-.inspection-frame {
-    font-size: 9px;
-    color: #64748b;
-    letter-spacing: 1px;
-    font-family: var(--mono);
-}
-
-/* --- Quad Grid --- */
-
-.inspection-quad {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    grid-template-rows: 1fr 1fr;
-    gap: 8px;
-    flex: 1;
-    min-height: 300px;
-    position: relative;
-    padding: 8px 12px;
-}
-
-.inspection-quadrant {
-    background: rgba(0,0,0,0.5);
-    border: 1px solid rgba(74,158,255,0.1);
-    border-radius: 5px;
-    position: relative;
-    overflow: hidden;
-    cursor: pointer;
-    transition: all 0.25s ease;
-}
-
-.inspection-quadrant:hover {
-    border-color: rgba(74,158,255,0.2);
-}
-
-.inspection-quadrant.expanded {
-    position: absolute;
-    inset: 8px;
-    z-index: 10;
-    border-radius: 5px;
-}
-
-/* --- Corner Brackets --- */
-
-.inspection-quadrant::before {
-    content: '';
-    position: absolute;
-    top: 6px;
-    right: 6px;
-    width: 14px;
-    height: 14px;
-    border-top: 1.5px solid rgba(74,158,255,0.25);
-    border-right: 1.5px solid rgba(74,158,255,0.25);
-    pointer-events: none;
-    z-index: 1;
-}
-
-.inspection-quadrant::after {
-    content: '';
-    position: absolute;
-    bottom: 6px;
-    left: 6px;
-    width: 14px;
-    height: 14px;
-    border-bottom: 1.5px solid rgba(74,158,255,0.25);
-    border-left: 1.5px solid rgba(74,158,255,0.25);
-    pointer-events: none;
-    z-index: 1;
-}
-
-#quadSeg::before, #quadSeg::after { border-color: rgba(74,158,255,0.25); }
-#quadEdge::before, #quadEdge::after { border-color: rgba(148,163,184,0.2); }
-#quadDepth::before, #quadDepth::after { border-color: rgba(245,158,11,0.2); }
-#quad3d::before, #quad3d::after { border-color: rgba(34,197,94,0.2); }
-
-/* --- Quadrant Labels & Metrics --- */
-
-.quad-label {
-    position: absolute;
-    top: 8px;
-    left: 10px;
-    z-index: 1;
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    font-size: 8px;
-    letter-spacing: 2px;
-    font-family: var(--mono);
-    pointer-events: none;
-}
-
-.quad-dot {
-    width: 5px;
-    height: 5px;
-    border-radius: 50%;
-}
-
-.quad-dot-seg  { background: #4a9eff; box-shadow: 0 0 4px rgba(74,158,255,0.5); }
-.quad-dot-edge { background: #94a3b8; box-shadow: 0 0 4px rgba(148,163,184,0.5); }
-.quad-dot-depth { background: #f59e0b; box-shadow: 0 0 4px rgba(245,158,11,0.5); }
-.quad-dot-3d   { background: #22c55e; box-shadow: 0 0 4px rgba(34,197,94,0.5); }
-
-#quadSeg .quad-label  { color: rgba(74,158,255,0.6); }
-#quadEdge .quad-label { color: rgba(148,163,184,0.6); }
-#quadDepth .quad-label { color: rgba(245,158,11,0.6); }
-#quad3d .quad-label   { color: rgba(34,197,94,0.6); }
-
-.quad-metric {
-    position: absolute;
-    bottom: 8px;
-    right: 10px;
-    font-size: 8px;
-    font-family: var(--mono);
-    pointer-events: none;
-}
-
-#quadSeg .quad-metric  { color: rgba(74,158,255,0.35); }
-#quadEdge .quad-metric { color: rgba(148,163,184,0.35); }
-#quadDepth .quad-metric { color: rgba(245,158,11,0.35); }
-#quad3d .quad-metric   { color: rgba(34,197,94,0.35); }
-
-.quad-canvas {
-    width: 100%;
-    height: 100%;
-    display: block;
-    object-fit: contain;
-}
-
-.quad-3d-container {
-    position: absolute;
-    inset: 0;
-    z-index: 2;
-}
-
-.quad-3d-container canvas {
-    width: 100% !important;
-    height: 100% !important;
-}
-
-/* --- 3D On-Demand Prompt --- */
-
-.quad-3d-prompt {
-    position: absolute;
-    inset: 0;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    gap: 8px;
-    z-index: 3;
-}
-
-.quad-3d-prompt-icon {
-    color: rgba(34,197,94,0.4);
-    margin-bottom: 4px;
-}
-
-.quad-3d-prompt-label {
-    font: 10px/1 var(--mono);
-    color: rgba(255,255,255,0.4);
-    letter-spacing: 1px;
-}
-
-.quad-3d-btn {
-    padding: 6px 16px;
-    border: 1px solid rgba(34,197,94,0.3);
-    border-radius: 4px;
-    background: rgba(34,197,94,0.08);
-    color: rgba(34,197,94,0.8);
-    font: bold 10px/1 var(--mono);
-    letter-spacing: 0.5px;
-    cursor: pointer;
-    transition: all 0.15s ease;
-}
-
-.quad-3d-btn:hover {
-    background: rgba(34,197,94,0.18);
-    border-color: rgba(34,197,94,0.5);
-    color: #22c55e;
-}
-
-.quad-3d-btn-gen {
-    border-color: rgba(168,85,247,0.3);
-    background: rgba(168,85,247,0.08);
-    color: rgba(168,85,247,0.7);
-}
-
-.quad-3d-btn-gen:hover {
-    background: rgba(168,85,247,0.18);
-    border-color: rgba(168,85,247,0.5);
-    color: #a855f7;
-}
-
-.quad-3d-prompt-hint {
-    font: 8px/1 var(--mono);
-    color: rgba(255,255,255,0.2);
-    margin-top: 2px;
-}
-
-.quad-3d-status {
-    position: absolute;
-    inset: 0;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    gap: 12px;
-    z-index: 3;
-}
-
-.quad-3d-status-text {
-    font: 10px/1.4 var(--mono);
-    color: rgba(255,255,255,0.5);
-    letter-spacing: 0.5px;
-}
-
-/* --- Per-Quadrant Loading/Error --- */
-
-.quad-loading {
-    position: absolute;
-    inset: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: rgba(0,0,0,0.5);
-    backdrop-filter: blur(2px);
-    z-index: 5;
-}
-
-.quad-error {
-    position: absolute;
-    inset: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: rgba(0,0,0,0.5);
-    z-index: 5;
-    color: var(--danger);
-    font-size: 10px;
-    font-family: var(--mono);
-    padding: 10px;
-    text-align: center;
-}
-
-/* --- Bottom Metrics Strip --- */
-
-.inspection-metrics {
-    display: flex;
-    gap: 24px;
-    padding: 8px 12px;
-    border-top: 1px solid rgba(255,255,255,0.04);
-    font-size: 9px;
-    color: #64748b;
-    font-family: var(--mono);
-}
-
-.inspection-metrics span {
-    color: #e2e8f0;
-}
-
-/* --- Retained --- */
-
-.inspection-spinner {
-    width: 20px; height: 20px;
-    border: 2px solid rgba(255,255,255,.08);
-    border-top-color: var(--accent);
-    border-radius: 50%;
-    animation: spin 0.7s linear infinite;
-}
-
-.inspection-empty {
-    position: absolute; inset: 0;
-    display: flex; align-items: center; justify-content: center;
-    color: var(--text3);
-    font-size: 12px;
-    text-align: center;
-    padding: 20px;
-}
-
-.engage-grid.sidebar-collapsed .panel-inspection { grid-column: 1; }
-.engage-grid.sidebar-collapsed .panel-chat { grid-column: 2; }
-
-/* =========================================
-   Toast Notification System
-   ========================================= */
-
-.toast-container {
-    position: fixed;
-    bottom: 56px;
-    right: 20px;
-    z-index: 9999;
-    display: flex;
-    flex-direction: column-reverse;
-    gap: 8px;
-    pointer-events: none;
-    max-width: 360px;
-}
-
-.toast {
-    pointer-events: auto;
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    padding: 10px 16px;
-    background: var(--glass);
-    backdrop-filter: var(--blur);
-    -webkit-backdrop-filter: var(--blur);
-    border: 1px solid var(--border2);
-    border-radius: var(--radius-md);
-    box-shadow: var(--shadow-lg);
-    font-size: 12px;
-    color: var(--text);
-    animation: toastIn 0.35s cubic-bezier(.4, 0, .2, 1);
-    transition: all 0.3s ease;
-    overflow: hidden;
-}
-
-.toast.exiting {
-    animation: toastOut 0.25s ease forwards;
-}
-
-@keyframes toastIn {
-    from { opacity: 0; transform: translateX(40px) scale(0.95); }
-    to   { opacity: 1; transform: translateX(0) scale(1); }
-}
-
-@keyframes toastOut {
-    to { opacity: 0; transform: translateX(40px) scale(0.95); }
-}
-
-.toast-icon {
-    width: 6px; height: 6px;
-    border-radius: 50%;
-    flex-shrink: 0;
-}
-
-.toast-icon.success { background: var(--success); box-shadow: 0 0 8px rgba(52,211,153,.5); }
-.toast-icon.warning { background: var(--warning); box-shadow: 0 0 8px rgba(251,191,36,.5); }
-.toast-icon.error   { background: var(--danger);  box-shadow: 0 0 8px rgba(248,113,113,.5); }
-.toast-icon.info    { background: var(--accent);   box-shadow: 0 0 8px rgba(59,130,246,.5); }
-
-.toast-text { flex: 1; line-height: 1.4; }
-
-.toast-progress {
-    position: absolute;
-    bottom: 0; left: 0;
-    height: 2px;
-    background: var(--accent);
-    border-radius: 0 0 0 var(--radius-md);
-    animation: toastProgress 4s linear forwards;
-}
-
-@keyframes toastProgress {
-    from { width: 100%; }
-    to   { width: 0; }
-}
-
-/* =========================================
-   Scrollbars
-   ========================================= */
-
-::-webkit-scrollbar { width: 5px; height: 5px; }
-::-webkit-scrollbar-track { background: transparent; }
-::-webkit-scrollbar-thumb { background: rgba(255,255,255,.06); border-radius: 3px; }
-::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.12); }
-
-/* =========================================
-   Utility
-   ========================================= */
-
-.mt-xs { margin-top: 4px; }
-.mt-sm { margin-top: 6px; }
-.mt-md { margin-top: 12px; }
-
-/* Skeleton loading shimmer */
-.skeleton {
-    background: linear-gradient(90deg, rgba(255,255,255,.03) 25%, rgba(255,255,255,.06) 50%, rgba(255,255,255,.03) 75%);
-    background-size: 200% 100%;
-    animation: shimmer 1.5s ease-in-out infinite;
-    border-radius: var(--radius-sm);
-}
-
-@keyframes shimmer {
-    0% { background-position: 200% 0; }
-    100% { background-position: -200% 0; }
-}
-
-/* Number transition for animated counters */
-.counter-value {
-    font-variant-numeric: tabular-nums;
-    transition: color 0.3s ease;
-    display: inline-block;
-}
-
-.counter-value.tick {
-    color: var(--accent2);
-}
-
-/* Focus visible ring */
-:focus-visible {
-    outline: 2px solid var(--accent);
-    outline-offset: 2px;
-}
-
-/* =========================================
-   Selection
-   ========================================= */
-
-::selection {
-    background: rgba(59, 130, 246, .25);
-    color: #fff;
-}
-
-/* ── Explainability Graph ─────────────────────────────────────── */
-
-.interpretability-graph {
-    position: relative;
-    width: 100%;
-    min-height: 60px;
-    background: #0a0e1a;
-    border-top: 1px solid #1e293b;
-    overflow: visible;
-}
-
-.explain-svg {
-    display: block;
-    width: 100%;
-    font-family: 'Inter', -apple-system, sans-serif;
-}
-
-.explain-svg text {
-    pointer-events: none;
-    user-select: none;
-}
-
-.explain-svg g {
-    cursor: pointer;
-}
-
-/* Loading state */
-.explain-loading {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 12px;
-    padding: 32px 16px;
-    color: #94a3b8;
-    font-size: 12px;
-}
-
-.explain-spinner {
-    width: 18px;
-    height: 18px;
-    border: 2px solid #334155;
-    border-top-color: #7c3aed;
-    border-radius: 50%;
-    animation: explain-spin 0.8s linear infinite;
-}
-
-@keyframes explain-spin {
-    to { transform: rotate(360deg); }
-}
-
-.explain-loading span {
-    animation: explain-pulse 2s ease-in-out infinite;
-}
-
-@keyframes explain-pulse {
-    0%, 100% { opacity: 0.6; }
-    50% { opacity: 1; }
-}
-
-/* Error state */
-.explain-error {
-    padding: 24px 16px;
-    color: #f87171;
-    font-size: 11px;
-    text-align: center;
-}
-
-/* Tooltip */
-.explain-tooltip {
-    position: absolute;
-    z-index: 1000;
-    background: #1e293b;
-    border: 1px solid #334155;
-    border-radius: 6px;
-    padding: 10px 12px;
-    max-width: 280px;
-    font-size: 11px;
-    color: #e2e8f0;
-    line-height: 1.5;
-    pointer-events: none;
-    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
-}
-
-.explain-tooltip strong {
-    color: #f8fafc;
-    font-size: 12px;
-}
-
-.tip-section {
-    margin-top: 6px;
-    padding-top: 4px;
-    border-top: 1px solid #334155;
-}
-
-.tip-label {
-    font-weight: 600;
-    color: #94a3b8;
-}
-
-.tip-agree .tip-label { color: #4ade80; }
-.tip-disagree .tip-label { color: #f87171; }

frontend/vendor/OrbitControls.js

@@ -1,1101 +0,0 @@
-( function () {
-
-	// This set of controls performs orbiting, dollying (zooming), and panning.
-	// Unlike TrackballControls, it maintains the "up" direction object.up (+Y by default).
-	//
-	//    Orbit - left mouse / touch: one-finger move
-	//    Zoom - middle mouse, or mousewheel / touch: two-finger spread or squish
-	//    Pan - right mouse, or left mouse + ctrl/meta/shiftKey, or arrow keys / touch: two-finger move
-
-	const _changeEvent = {
-		type: 'change'
-	};
-	const _startEvent = {
-		type: 'start'
-	};
-	const _endEvent = {
-		type: 'end'
-	};
-	class OrbitControls extends THREE.EventDispatcher {
-
-		constructor( object, domElement ) {
-
-			super();
-			this.object = object;
-			this.domElement = domElement;
-			this.domElement.style.touchAction = 'none'; // disable touch scroll
-
-			// Set to false to disable this control
-			this.enabled = true;
-
-			// "target" sets the location of focus, where the object orbits around
-			this.target = new THREE.Vector3();
-
-			// How far you can dolly in and out ( PerspectiveCamera only )
-			this.minDistance = 0;
-			this.maxDistance = Infinity;
-
-			// How far you can zoom in and out ( OrthographicCamera only )
-			this.minZoom = 0;
-			this.maxZoom = Infinity;
-
-			// How far you can orbit vertically, upper and lower limits.
-			// Range is 0 to Math.PI radians.
-			this.minPolarAngle = 0; // radians
-			this.maxPolarAngle = Math.PI; // radians
-
-			// How far you can orbit horizontally, upper and lower limits.
-			// If set, the interval [ min, max ] must be a sub-interval of [ - 2 PI, 2 PI ], with ( max - min < 2 PI )
-			this.minAzimuthAngle = - Infinity; // radians
-			this.maxAzimuthAngle = Infinity; // radians
-
-			// Set to true to enable damping (inertia)
-			// If damping is enabled, you must call controls.update() in your animation loop
-			this.enableDamping = false;
-			this.dampingFactor = 0.05;
-
-			// This option actually enables dollying in and out; left as "zoom" for backwards compatibility.
-			// Set to false to disable zooming
-			this.enableZoom = true;
-			this.zoomSpeed = 1.0;
-
-			// Set to false to disable rotating
-			this.enableRotate = true;
-			this.rotateSpeed = 1.0;
-
-			// Set to false to disable panning
-			this.enablePan = true;
-			this.panSpeed = 1.0;
-			this.screenSpacePanning = true; // if false, pan orthogonal to world-space direction camera.up
-			this.keyPanSpeed = 7.0; // pixels moved per arrow key push
-
-			// Set to true to automatically rotate around the target
-			// If auto-rotate is enabled, you must call controls.update() in your animation loop
-			this.autoRotate = false;
-			this.autoRotateSpeed = 2.0; // 30 seconds per orbit when fps is 60
-
-			// The four arrow keys
-			this.keys = {
-				LEFT: 'ArrowLeft',
-				UP: 'ArrowUp',
-				RIGHT: 'ArrowRight',
-				BOTTOM: 'ArrowDown'
-			};
-
-			// Mouse buttons
-			this.mouseButtons = {
-				LEFT: THREE.MOUSE.ROTATE,
-				MIDDLE: THREE.MOUSE.DOLLY,
-				RIGHT: THREE.MOUSE.PAN
-			};
-
-			// Touch fingers
-			this.touches = {
-				ONE: THREE.TOUCH.ROTATE,
-				TWO: THREE.TOUCH.DOLLY_PAN
-			};
-
-			// for reset
-			this.target0 = this.target.clone();
-			this.position0 = this.object.position.clone();
-			this.zoom0 = this.object.zoom;
-
-			// the target DOM element for key events
-			this._domElementKeyEvents = null;
-
-			//
-			// public methods
-			//
-
-			this.getPolarAngle = function () {
-
-				return spherical.phi;
-
-			};
-
-			this.getAzimuthalAngle = function () {
-
-				return spherical.theta;
-
-			};
-
-			this.getDistance = function () {
-
-				return this.object.position.distanceTo( this.target );
-
-			};
-
-			this.listenToKeyEvents = function ( domElement ) {
-
-				domElement.addEventListener( 'keydown', onKeyDown );
-				this._domElementKeyEvents = domElement;
-
-			};
-
-			this.saveState = function () {
-
-				scope.target0.copy( scope.target );
-				scope.position0.copy( scope.object.position );
-				scope.zoom0 = scope.object.zoom;
-
-			};
-
-			this.reset = function () {
-
-				scope.target.copy( scope.target0 );
-				scope.object.position.copy( scope.position0 );
-				scope.object.zoom = scope.zoom0;
-				scope.object.updateProjectionMatrix();
-				scope.dispatchEvent( _changeEvent );
-				scope.update();
-				state = STATE.NONE;
-
-			};
-
-			// this method is exposed, but perhaps it would be better if we can make it private...
-			this.update = function () {
-
-				const offset = new THREE.Vector3();
-
-				// so camera.up is the orbit axis
-				const quat = new THREE.Quaternion().setFromUnitVectors( object.up, new THREE.Vector3( 0, 1, 0 ) );
-				const quatInverse = quat.clone().invert();
-				const lastPosition = new THREE.Vector3();
-				const lastQuaternion = new THREE.Quaternion();
-				const twoPI = 2 * Math.PI;
-				return function update() {
-
-					const position = scope.object.position;
-					offset.copy( position ).sub( scope.target );
-
-					// rotate offset to "y-axis-is-up" space
-					offset.applyQuaternion( quat );
-
-					// angle from z-axis around y-axis
-					spherical.setFromVector3( offset );
-					if ( scope.autoRotate && state === STATE.NONE ) {
-
-						rotateLeft( getAutoRotationAngle() );
-
-					}
-
-					if ( scope.enableDamping ) {
-
-						spherical.theta += sphericalDelta.theta * scope.dampingFactor;
-						spherical.phi += sphericalDelta.phi * scope.dampingFactor;
-
-					} else {
-
-						spherical.theta += sphericalDelta.theta;
-						spherical.phi += sphericalDelta.phi;
-
-					}
-
-					// restrict theta to be between desired limits
-
-					let min = scope.minAzimuthAngle;
-					let max = scope.maxAzimuthAngle;
-					if ( isFinite( min ) && isFinite( max ) ) {
-
-						if ( min < - Math.PI ) min += twoPI; else if ( min > Math.PI ) min -= twoPI;
-						if ( max < - Math.PI ) max += twoPI; else if ( max > Math.PI ) max -= twoPI;
-						if ( min <= max ) {
-
-							spherical.theta = Math.max( min, Math.min( max, spherical.theta ) );
-
-						} else {
-
-							spherical.theta = spherical.theta > ( min + max ) / 2 ? Math.max( min, spherical.theta ) : Math.min( max, spherical.theta );
-
-						}
-
-					}
-
-					// restrict phi to be between desired limits
-					spherical.phi = Math.max( scope.minPolarAngle, Math.min( scope.maxPolarAngle, spherical.phi ) );
-					spherical.makeSafe();
-					spherical.radius *= scale;
-
-					// restrict radius to be between desired limits
-					spherical.radius = Math.max( scope.minDistance, Math.min( scope.maxDistance, spherical.radius ) );
-
-					// move target to panned location
-
-					if ( scope.enableDamping === true ) {
-
-						scope.target.addScaledVector( panOffset, scope.dampingFactor );
-
-					} else {
-
-						scope.target.add( panOffset );
-
-					}
-
-					offset.setFromSpherical( spherical );
-
-					// rotate offset back to "camera-up-vector-is-up" space
-					offset.applyQuaternion( quatInverse );
-					position.copy( scope.target ).add( offset );
-					scope.object.lookAt( scope.target );
-					if ( scope.enableDamping === true ) {
-
-						sphericalDelta.theta *= 1 - scope.dampingFactor;
-						sphericalDelta.phi *= 1 - scope.dampingFactor;
-						panOffset.multiplyScalar( 1 - scope.dampingFactor );
-
-					} else {
-
-						sphericalDelta.set( 0, 0, 0 );
-						panOffset.set( 0, 0, 0 );
-
-					}
-
-					scale = 1;
-
-					// update condition is:
-					// min(camera displacement, camera rotation in radians)^2 > EPS
-					// using small-angle approximation cos(x/2) = 1 - x^2 / 8
-
-					if ( zoomChanged || lastPosition.distanceToSquared( scope.object.position ) > EPS || 8 * ( 1 - lastQuaternion.dot( scope.object.quaternion ) ) > EPS ) {
-
-						scope.dispatchEvent( _changeEvent );
-						lastPosition.copy( scope.object.position );
-						lastQuaternion.copy( scope.object.quaternion );
-						zoomChanged = false;
-						return true;
-
-					}
-
-					return false;
-
-				};
-
-			}();
-			this.dispose = function () {
-
-				scope.domElement.removeEventListener( 'contextmenu', onContextMenu );
-				scope.domElement.removeEventListener( 'pointerdown', onPointerDown );
-				scope.domElement.removeEventListener( 'pointercancel', onPointerCancel );
-				scope.domElement.removeEventListener( 'wheel', onMouseWheel );
-				scope.domElement.removeEventListener( 'pointermove', onPointerMove );
-				scope.domElement.removeEventListener( 'pointerup', onPointerUp );
-				if ( scope._domElementKeyEvents !== null ) {
-
-					scope._domElementKeyEvents.removeEventListener( 'keydown', onKeyDown );
-
-				}
-
-				//scope.dispatchEvent( { type: 'dispose' } ); // should this be added here?
-
-			};
-
-			//
-			// internals
-			//
-
-			const scope = this;
-			const STATE = {
-				NONE: - 1,
-				ROTATE: 0,
-				DOLLY: 1,
-				PAN: 2,
-				TOUCH_ROTATE: 3,
-				TOUCH_PAN: 4,
-				TOUCH_DOLLY_PAN: 5,
-				TOUCH_DOLLY_ROTATE: 6
-			};
-			let state = STATE.NONE;
-			const EPS = 0.000001;
-
-			// current position in spherical coordinates
-			const spherical = new THREE.Spherical();
-			const sphericalDelta = new THREE.Spherical();
-			let scale = 1;
-			const panOffset = new THREE.Vector3();
-			let zoomChanged = false;
-			const rotateStart = new THREE.Vector2();
-			const rotateEnd = new THREE.Vector2();
-			const rotateDelta = new THREE.Vector2();
-			const panStart = new THREE.Vector2();
-			const panEnd = new THREE.Vector2();
-			const panDelta = new THREE.Vector2();
-			const dollyStart = new THREE.Vector2();
-			const dollyEnd = new THREE.Vector2();
-			const dollyDelta = new THREE.Vector2();
-			const pointers = [];
-			const pointerPositions = {};
-			function getAutoRotationAngle() {
-
-				return 2 * Math.PI / 60 / 60 * scope.autoRotateSpeed;
-
-			}
-
-			function getZoomScale() {
-
-				return Math.pow( 0.95, scope.zoomSpeed );
-
-			}
-
-			function rotateLeft( angle ) {
-
-				sphericalDelta.theta -= angle;
-
-			}
-
-			function rotateUp( angle ) {
-
-				sphericalDelta.phi -= angle;
-
-			}
-
-			const panLeft = function () {
-
-				const v = new THREE.Vector3();
-				return function panLeft( distance, objectMatrix ) {
-
-					v.setFromMatrixColumn( objectMatrix, 0 ); // get X column of objectMatrix
-					v.multiplyScalar( - distance );
-					panOffset.add( v );
-
-				};
-
-			}();
-			const panUp = function () {
-
-				const v = new THREE.Vector3();
-				return function panUp( distance, objectMatrix ) {
-
-					if ( scope.screenSpacePanning === true ) {
-
-						v.setFromMatrixColumn( objectMatrix, 1 );
-
-					} else {
-
-						v.setFromMatrixColumn( objectMatrix, 0 );
-						v.crossVectors( scope.object.up, v );
-
-					}
-
-					v.multiplyScalar( distance );
-					panOffset.add( v );
-
-				};
-
-			}();
-
-			// deltaX and deltaY are in pixels; right and down are positive
-			const pan = function () {
-
-				const offset = new THREE.Vector3();
-				return function pan( deltaX, deltaY ) {
-
-					const element = scope.domElement;
-					if ( scope.object.isPerspectiveCamera ) {
-
-						// perspective
-						const position = scope.object.position;
-						offset.copy( position ).sub( scope.target );
-						let targetDistance = offset.length();
-
-						// half of the fov is center to top of screen
-						targetDistance *= Math.tan( scope.object.fov / 2 * Math.PI / 180.0 );
-
-						// we use only clientHeight here so aspect ratio does not distort speed
-						panLeft( 2 * deltaX * targetDistance / element.clientHeight, scope.object.matrix );
-						panUp( 2 * deltaY * targetDistance / element.clientHeight, scope.object.matrix );
-
-					} else if ( scope.object.isOrthographicCamera ) {
-
-						// orthographic
-						panLeft( deltaX * ( scope.object.right - scope.object.left ) / scope.object.zoom / element.clientWidth, scope.object.matrix );
-						panUp( deltaY * ( scope.object.top - scope.object.bottom ) / scope.object.zoom / element.clientHeight, scope.object.matrix );
-
-					} else {
-
-						// camera neither orthographic nor perspective
-						console.warn( 'WARNING: OrbitControls.js encountered an unknown camera type - pan disabled.' );
-						scope.enablePan = false;
-
-					}
-
-				};
-
-			}();
-			function dollyOut( dollyScale ) {
-
-				if ( scope.object.isPerspectiveCamera ) {
-
-					scale /= dollyScale;
-
-				} else if ( scope.object.isOrthographicCamera ) {
-
-					scope.object.zoom = Math.max( scope.minZoom, Math.min( scope.maxZoom, scope.object.zoom * dollyScale ) );
-					scope.object.updateProjectionMatrix();
-					zoomChanged = true;
-
-				} else {
-
-					console.warn( 'WARNING: OrbitControls.js encountered an unknown camera type - dolly/zoom disabled.' );
-					scope.enableZoom = false;
-
-				}
-
-			}
-
-			function dollyIn( dollyScale ) {
-
-				if ( scope.object.isPerspectiveCamera ) {
-
-					scale *= dollyScale;
-
-				} else if ( scope.object.isOrthographicCamera ) {
-
-					scope.object.zoom = Math.max( scope.minZoom, Math.min( scope.maxZoom, scope.object.zoom / dollyScale ) );
-					scope.object.updateProjectionMatrix();
-					zoomChanged = true;
-
-				} else {
-
-					console.warn( 'WARNING: OrbitControls.js encountered an unknown camera type - dolly/zoom disabled.' );
-					scope.enableZoom = false;
-
-				}
-
-			}
-
-			//
-			// event callbacks - update the object state
-			//
-
-			function handleMouseDownRotate( event ) {
-
-				rotateStart.set( event.clientX, event.clientY );
-
-			}
-
-			function handleMouseDownDolly( event ) {
-
-				dollyStart.set( event.clientX, event.clientY );
-
-			}
-
-			function handleMouseDownPan( event ) {
-
-				panStart.set( event.clientX, event.clientY );
-
-			}
-
-			function handleMouseMoveRotate( event ) {
-
-				rotateEnd.set( event.clientX, event.clientY );
-				rotateDelta.subVectors( rotateEnd, rotateStart ).multiplyScalar( scope.rotateSpeed );
-				const element = scope.domElement;
-				rotateLeft( 2 * Math.PI * rotateDelta.x / element.clientHeight ); // yes, height
-
-				rotateUp( 2 * Math.PI * rotateDelta.y / element.clientHeight );
-				rotateStart.copy( rotateEnd );
-				scope.update();
-
-			}
-
-			function handleMouseMoveDolly( event ) {
-
-				dollyEnd.set( event.clientX, event.clientY );
-				dollyDelta.subVectors( dollyEnd, dollyStart );
-				if ( dollyDelta.y > 0 ) {
-
-					dollyOut( getZoomScale() );
-
-				} else if ( dollyDelta.y < 0 ) {
-
-					dollyIn( getZoomScale() );
-
-				}
-
-				dollyStart.copy( dollyEnd );
-				scope.update();
-
-			}
-
-			function handleMouseMovePan( event ) {
-
-				panEnd.set( event.clientX, event.clientY );
-				panDelta.subVectors( panEnd, panStart ).multiplyScalar( scope.panSpeed );
-				pan( panDelta.x, panDelta.y );
-				panStart.copy( panEnd );
-				scope.update();
-
-			}
-
-			function handleMouseWheel( event ) {
-
-				if ( event.deltaY < 0 ) {
-
-					dollyIn( getZoomScale() );
-
-				} else if ( event.deltaY > 0 ) {
-
-					dollyOut( getZoomScale() );
-
-				}
-
-				scope.update();
-
-			}
-
-			function handleKeyDown( event ) {
-
-				let needsUpdate = false;
-				switch ( event.code ) {
-
-					case scope.keys.UP:
-						if ( event.ctrlKey || event.metaKey || event.shiftKey ) {
-
-							rotateUp( 2 * Math.PI * scope.rotateSpeed / scope.domElement.clientHeight );
-
-						} else {
-
-							pan( 0, scope.keyPanSpeed );
-
-						}
-
-						needsUpdate = true;
-						break;
-					case scope.keys.BOTTOM:
-						if ( event.ctrlKey || event.metaKey || event.shiftKey ) {
-
-							rotateUp( - 2 * Math.PI * scope.rotateSpeed / scope.domElement.clientHeight );
-
-						} else {
-
-							pan( 0, - scope.keyPanSpeed );
-
-						}
-
-						needsUpdate = true;
-						break;
-					case scope.keys.LEFT:
-						if ( event.ctrlKey || event.metaKey || event.shiftKey ) {
-
-							rotateLeft( 2 * Math.PI * scope.rotateSpeed / scope.domElement.clientHeight );
-
-						} else {
-
-							pan( scope.keyPanSpeed, 0 );
-
-						}
-
-						needsUpdate = true;
-						break;
-					case scope.keys.RIGHT:
-						if ( event.ctrlKey || event.metaKey || event.shiftKey ) {
-
-							rotateLeft( - 2 * Math.PI * scope.rotateSpeed / scope.domElement.clientHeight );
-
-						} else {
-
-							pan( - scope.keyPanSpeed, 0 );
-
-						}
-
-						needsUpdate = true;
-						break;
-
-				}
-
-				if ( needsUpdate ) {
-
-					// prevent the browser from scrolling on cursor keys
-					event.preventDefault();
-					scope.update();
-
-				}
-
-			}
-
-			function handleTouchStartRotate() {
-
-				if ( pointers.length === 1 ) {
-
-					rotateStart.set( pointers[ 0 ].pageX, pointers[ 0 ].pageY );
-
-				} else {
-
-					const x = 0.5 * ( pointers[ 0 ].pageX + pointers[ 1 ].pageX );
-					const y = 0.5 * ( pointers[ 0 ].pageY + pointers[ 1 ].pageY );
-					rotateStart.set( x, y );
-
-				}
-
-			}
-
-			function handleTouchStartPan() {
-
-				if ( pointers.length === 1 ) {
-
-					panStart.set( pointers[ 0 ].pageX, pointers[ 0 ].pageY );
-
-				} else {
-
-					const x = 0.5 * ( pointers[ 0 ].pageX + pointers[ 1 ].pageX );
-					const y = 0.5 * ( pointers[ 0 ].pageY + pointers[ 1 ].pageY );
-					panStart.set( x, y );
-
-				}
-
-			}
-
-			function handleTouchStartDolly() {
-
-				const dx = pointers[ 0 ].pageX - pointers[ 1 ].pageX;
-				const dy = pointers[ 0 ].pageY - pointers[ 1 ].pageY;
-				const distance = Math.sqrt( dx * dx + dy * dy );
-				dollyStart.set( 0, distance );
-
-			}
-
-			function handleTouchStartDollyPan() {
-
-				if ( scope.enableZoom ) handleTouchStartDolly();
-				if ( scope.enablePan ) handleTouchStartPan();
-
-			}
-
-			function handleTouchStartDollyRotate() {
-
-				if ( scope.enableZoom ) handleTouchStartDolly();
-				if ( scope.enableRotate ) handleTouchStartRotate();
-
-			}
-
-			function handleTouchMoveRotate( event ) {
-
-				if ( pointers.length == 1 ) {
-
-					rotateEnd.set( event.pageX, event.pageY );
-
-				} else {
-
-					const position = getSecondPointerPosition( event );
-					const x = 0.5 * ( event.pageX + position.x );
-					const y = 0.5 * ( event.pageY + position.y );
-					rotateEnd.set( x, y );
-
-				}
-
-				rotateDelta.subVectors( rotateEnd, rotateStart ).multiplyScalar( scope.rotateSpeed );
-				const element = scope.domElement;
-				rotateLeft( 2 * Math.PI * rotateDelta.x / element.clientHeight ); // yes, height
-
-				rotateUp( 2 * Math.PI * rotateDelta.y / element.clientHeight );
-				rotateStart.copy( rotateEnd );
-
-			}
-
-			function handleTouchMovePan( event ) {
-
-				if ( pointers.length === 1 ) {
-
-					panEnd.set( event.pageX, event.pageY );
-
-				} else {
-
-					const position = getSecondPointerPosition( event );
-					const x = 0.5 * ( event.pageX + position.x );
-					const y = 0.5 * ( event.pageY + position.y );
-					panEnd.set( x, y );
-
-				}
-
-				panDelta.subVectors( panEnd, panStart ).multiplyScalar( scope.panSpeed );
-				pan( panDelta.x, panDelta.y );
-				panStart.copy( panEnd );
-
-			}
-
-			function handleTouchMoveDolly( event ) {
-
-				const position = getSecondPointerPosition( event );
-				const dx = event.pageX - position.x;
-				const dy = event.pageY - position.y;
-				const distance = Math.sqrt( dx * dx + dy * dy );
-				dollyEnd.set( 0, distance );
-				dollyDelta.set( 0, Math.pow( dollyEnd.y / dollyStart.y, scope.zoomSpeed ) );
-				dollyOut( dollyDelta.y );
-				dollyStart.copy( dollyEnd );
-
-			}
-
-			function handleTouchMoveDollyPan( event ) {
-
-				if ( scope.enableZoom ) handleTouchMoveDolly( event );
-				if ( scope.enablePan ) handleTouchMovePan( event );
-
-			}
-
-			function handleTouchMoveDollyRotate( event ) {
-
-				if ( scope.enableZoom ) handleTouchMoveDolly( event );
-				if ( scope.enableRotate ) handleTouchMoveRotate( event );
-
-			}
-
-			//
-			// event handlers - FSM: listen for events and reset state
-			//
-
-			function onPointerDown( event ) {
-
-				if ( scope.enabled === false ) return;
-				if ( pointers.length === 0 ) {
-
-					scope.domElement.setPointerCapture( event.pointerId );
-					scope.domElement.addEventListener( 'pointermove', onPointerMove );
-					scope.domElement.addEventListener( 'pointerup', onPointerUp );
-
-				}
-
-				//
-
-				addPointer( event );
-				if ( event.pointerType === 'touch' ) {
-
-					onTouchStart( event );
-
-				} else {
-
-					onMouseDown( event );
-
-				}
-
-			}
-
-			function onPointerMove( event ) {
-
-				if ( scope.enabled === false ) return;
-				if ( event.pointerType === 'touch' ) {
-
-					onTouchMove( event );
-
-				} else {
-
-					onMouseMove( event );
-
-				}
-
-			}
-
-			function onPointerUp( event ) {
-
-				removePointer( event );
-				if ( pointers.length === 0 ) {
-
-					scope.domElement.releasePointerCapture( event.pointerId );
-					scope.domElement.removeEventListener( 'pointermove', onPointerMove );
-					scope.domElement.removeEventListener( 'pointerup', onPointerUp );
-
-				}
-
-				scope.dispatchEvent( _endEvent );
-				state = STATE.NONE;
-
-			}
-
-			function onPointerCancel( event ) {
-
-				removePointer( event );
-
-			}
-
-			function onMouseDown( event ) {
-
-				let mouseAction;
-				switch ( event.button ) {
-
-					case 0:
-						mouseAction = scope.mouseButtons.LEFT;
-						break;
-					case 1:
-						mouseAction = scope.mouseButtons.MIDDLE;
-						break;
-					case 2:
-						mouseAction = scope.mouseButtons.RIGHT;
-						break;
-					default:
-						mouseAction = - 1;
-
-				}
-
-				switch ( mouseAction ) {
-
-					case THREE.MOUSE.DOLLY:
-						if ( scope.enableZoom === false ) return;
-						handleMouseDownDolly( event );
-						state = STATE.DOLLY;
-						break;
-					case THREE.MOUSE.ROTATE:
-						if ( event.ctrlKey || event.metaKey || event.shiftKey ) {
-
-							if ( scope.enablePan === false ) return;
-							handleMouseDownPan( event );
-							state = STATE.PAN;
-
-						} else {
-
-							if ( scope.enableRotate === false ) return;
-							handleMouseDownRotate( event );
-							state = STATE.ROTATE;
-
-						}
-
-						break;
-					case THREE.MOUSE.PAN:
-						if ( event.ctrlKey || event.metaKey || event.shiftKey ) {
-
-							if ( scope.enableRotate === false ) return;
-							handleMouseDownRotate( event );
-							state = STATE.ROTATE;
-
-						} else {
-
-							if ( scope.enablePan === false ) return;
-							handleMouseDownPan( event );
-							state = STATE.PAN;
-
-						}
-
-						break;
-					default:
-						state = STATE.NONE;
-
-				}
-
-				if ( state !== STATE.NONE ) {
-
-					scope.dispatchEvent( _startEvent );
-
-				}
-
-			}
-
-			function onMouseMove( event ) {
-
-				switch ( state ) {
-
-					case STATE.ROTATE:
-						if ( scope.enableRotate === false ) return;
-						handleMouseMoveRotate( event );
-						break;
-					case STATE.DOLLY:
-						if ( scope.enableZoom === false ) return;
-						handleMouseMoveDolly( event );
-						break;
-					case STATE.PAN:
-						if ( scope.enablePan === false ) return;
-						handleMouseMovePan( event );
-						break;
-
-				}
-
-			}
-
-			function onMouseWheel( event ) {
-
-				if ( scope.enabled === false || scope.enableZoom === false || state !== STATE.NONE ) return;
-				event.preventDefault();
-				scope.dispatchEvent( _startEvent );
-				handleMouseWheel( event );
-				scope.dispatchEvent( _endEvent );
-
-			}
-
-			function onKeyDown( event ) {
-
-				if ( scope.enabled === false || scope.enablePan === false ) return;
-				handleKeyDown( event );
-
-			}
-
-			function onTouchStart( event ) {
-
-				trackPointer( event );
-				switch ( pointers.length ) {
-
-					case 1:
-						switch ( scope.touches.ONE ) {
-
-							case THREE.TOUCH.ROTATE:
-								if ( scope.enableRotate === false ) return;
-								handleTouchStartRotate();
-								state = STATE.TOUCH_ROTATE;
-								break;
-							case THREE.TOUCH.PAN:
-								if ( scope.enablePan === false ) return;
-								handleTouchStartPan();
-								state = STATE.TOUCH_PAN;
-								break;
-							default:
-								state = STATE.NONE;
-
-						}
-
-						break;
-					case 2:
-						switch ( scope.touches.TWO ) {
-
-							case THREE.TOUCH.DOLLY_PAN:
-								if ( scope.enableZoom === false && scope.enablePan === false ) return;
-								handleTouchStartDollyPan();
-								state = STATE.TOUCH_DOLLY_PAN;
-								break;
-							case THREE.TOUCH.DOLLY_ROTATE:
-								if ( scope.enableZoom === false && scope.enableRotate === false ) return;
-								handleTouchStartDollyRotate();
-								state = STATE.TOUCH_DOLLY_ROTATE;
-								break;
-							default:
-								state = STATE.NONE;
-
-						}
-
-						break;
-					default:
-						state = STATE.NONE;
-
-				}
-
-				if ( state !== STATE.NONE ) {
-
-					scope.dispatchEvent( _startEvent );
-
-				}
-
-			}
-
-			function onTouchMove( event ) {
-
-				trackPointer( event );
-				switch ( state ) {
-
-					case STATE.TOUCH_ROTATE:
-						if ( scope.enableRotate === false ) return;
-						handleTouchMoveRotate( event );
-						scope.update();
-						break;
-					case STATE.TOUCH_PAN:
-						if ( scope.enablePan === false ) return;
-						handleTouchMovePan( event );
-						scope.update();
-						break;
-					case STATE.TOUCH_DOLLY_PAN:
-						if ( scope.enableZoom === false && scope.enablePan === false ) return;
-						handleTouchMoveDollyPan( event );
-						scope.update();
-						break;
-					case STATE.TOUCH_DOLLY_ROTATE:
-						if ( scope.enableZoom === false && scope.enableRotate === false ) return;
-						handleTouchMoveDollyRotate( event );
-						scope.update();
-						break;
-					default:
-						state = STATE.NONE;
-
-				}
-
-			}
-
-			function onContextMenu( event ) {
-
-				if ( scope.enabled === false ) return;
-				event.preventDefault();
-
-			}
-
-			function addPointer( event ) {
-
-				pointers.push( event );
-
-			}
-
-			function removePointer( event ) {
-
-				delete pointerPositions[ event.pointerId ];
-				for ( let i = 0; i < pointers.length; i ++ ) {
-
-					if ( pointers[ i ].pointerId == event.pointerId ) {
-
-						pointers.splice( i, 1 );
-						return;
-
-					}
-
-				}
-
-			}
-
-			function trackPointer( event ) {
-
-				let position = pointerPositions[ event.pointerId ];
-				if ( position === undefined ) {
-
-					position = new THREE.Vector2();
-					pointerPositions[ event.pointerId ] = position;
-
-				}
-
-				position.set( event.pageX, event.pageY );
-
-			}
-
-			function getSecondPointerPosition( event ) {
-
-				const pointer = event.pointerId === pointers[ 0 ].pointerId ? pointers[ 1 ] : pointers[ 0 ];
-				return pointerPositions[ pointer.pointerId ];
-
-			}
-
-			//
-
-			scope.domElement.addEventListener( 'contextmenu', onContextMenu );
-			scope.domElement.addEventListener( 'pointerdown', onPointerDown );
-			scope.domElement.addEventListener( 'pointercancel', onPointerCancel );
-			scope.domElement.addEventListener( 'wheel', onMouseWheel, {
-				passive: false
-			} );
-
-			// force an update at start
-
-			this.update();
-
-		}
-
-	}
-
-	// This set of controls performs orbiting, dollying (zooming), and panning.
-	// Unlike TrackballControls, it maintains the "up" direction object.up (+Y by default).
-	// This is very similar to OrbitControls, another set of touch behavior
-	//
-	//    Orbit - right mouse, or left mouse + ctrl/meta/shiftKey / touch: two-finger rotate
-	//    Zoom - middle mouse, or mousewheel / touch: two-finger spread or squish
-	//    Pan - left mouse, or arrow keys / touch: one-finger move
-
-	class MapControls extends OrbitControls {
-
-		constructor( object, domElement ) {
-
-			super( object, domElement );
-			this.screenSpacePanning = false; // pan orthogonal to world-space direction camera.up
-
-			this.mouseButtons.LEFT = THREE.MOUSE.PAN;
-			this.mouseButtons.RIGHT = THREE.MOUSE.ROTATE;
-			this.touches.ONE = THREE.TOUCH.PAN;
-			this.touches.TWO = THREE.TOUCH.DOLLY_ROTATE;
-
-		}
-
-	}
-
-	THREE.MapControls = MapControls;
-	THREE.OrbitControls = OrbitControls;
-
-} )();

frontend/vendor/d3-hierarchy.v3.min.js

@@ -1,2 +0,0 @@
-// https://d3js.org/d3-hierarchy/ v3.1.2 Copyright 2010-2021 Mike Bostock
-!function(n,r){"object"==typeof exports&&"undefined"!=typeof module?r(exports):"function"==typeof define&&define.amd?define(["exports"],r):r((n="undefined"!=typeof globalThis?globalThis:n||self).d3=n.d3||{})}(this,(function(n){"use strict";function r(n,r){return n.parent===r.parent?1:2}function t(n,r){return n+r.x}function e(n,r){return Math.max(n,r.y)}function i(n){var r=0,t=n.children,e=t&&t.length;if(e)for(;--e>=0;)r+=t[e].value;else r=1;n.value=r}function u(n,r){n instanceof Map?(n=[void 0,n],void 0===r&&(r=f)):void 0===r&&(r=o);for(var t,e,i,u,a,l=new h(n),p=[l];t=p.pop();)if((i=r(t.data))&&(a=(i=Array.from(i)).length))for(t.children=i,u=a-1;u>=0;--u)p.push(e=i[u]=new h(i[u])),e.parent=t,e.depth=t.depth+1;return l.eachBefore(c)}function o(n){return n.children}function f(n){return Array.isArray(n)?n[1]:null}function a(n){void 0!==n.data.value&&(n.value=n.data.value),n.data=n.data.data}function c(n){var r=0;do{n.height=r}while((n=n.parent)&&n.height<++r)}function h(n){this.data=n,this.depth=this.height=0,this.parent=null}function l(n){return null==n?null:p(n)}function p(n){if("function"!=typeof n)throw new Error;return n}function d(){return 0}function s(n){return function(){return n}}h.prototype=u.prototype={constructor:h,count:function(){return this.eachAfter(i)},each:function(n,r){let t=-1;for(const e of this)n.call(r,e,++t,this);return this},eachAfter:function(n,r){for(var t,e,i,u=this,o=[u],f=[],a=-1;u=o.pop();)if(f.push(u),t=u.children)for(e=0,i=t.length;e<i;++e)o.push(t[e]);for(;u=f.pop();)n.call(r,u,++a,this);return this},eachBefore:function(n,r){for(var t,e,i=this,u=[i],o=-1;i=u.pop();)if(n.call(r,i,++o,this),t=i.children)for(e=t.length-1;e>=0;--e)u.push(t[e]);return this},find:function(n,r){let t=-1;for(const e of this)if(n.call(r,e,++t,this))return e},sum:function(n){return this.eachAfter((function(r){for(var t=+n(r.data)||0,e=r.children,i=e&&e.length;--i>=0;)t+=e[i].value;r.value=t}))},sort:function(n){return this.eachBefore((function(r){r.children&&r.children.sort(n)}))},path:function(n){for(var r=this,t=function(n,r){if(n===r)return n;var t=n.ancestors(),e=r.ancestors(),i=null;n=t.pop(),r=e.pop();for(;n===r;)i=n,n=t.pop(),r=e.pop();return i}(r,n),e=[r];r!==t;)r=r.parent,e.push(r);for(var i=e.length;n!==t;)e.splice(i,0,n),n=n.parent;return e},ancestors:function(){for(var n=this,r=[n];n=n.parent;)r.push(n);return r},descendants:function(){return Array.from(this)},leaves:function(){var n=[];return this.eachBefore((function(r){r.children||n.push(r)})),n},links:function(){var n=this,r=[];return n.each((function(t){t!==n&&r.push({source:t.parent,target:t})})),r},copy:function(){return u(this).eachBefore(a)},[Symbol.iterator]:function*(){var n,r,t,e,i=this,u=[i];do{for(n=u.reverse(),u=[];i=n.pop();)if(yield i,r=i.children)for(t=0,e=r.length;t<e;++t)u.push(r[t])}while(u.length)}};const v=4294967296;function x(){let n=1;return()=>(n=(1664525*n+1013904223)%v)/v}function y(n,r){for(var t,e,i=0,u=(n=function(n,r){let t,e,i=n.length;for(;i;)e=r()*i--|0,t=n[i],n[i]=n[e],n[e]=t;return n}(Array.from(n),r)).length,o=[];i<u;)t=n[i],e&&w(e,t)?++i:(e=M(o=g(o,t)),i=0);return e}function g(n,r){var t,e;if(_(r,n))return[r];for(t=0;t<n.length;++t)if(m(r,n[t])&&_(z(n[t],r),n))return[n[t],r];for(t=0;t<n.length-1;++t)for(e=t+1;e<n.length;++e)if(m(z(n[t],n[e]),r)&&m(z(n[t],r),n[e])&&m(z(n[e],r),n[t])&&_(B(n[t],n[e],r),n))return[n[t],n[e],r];throw new Error}function m(n,r){var t=n.r-r.r,e=r.x-n.x,i=r.y-n.y;return t<0||t*t<e*e+i*i}function w(n,r){var t=n.r-r.r+1e-9*Math.max(n.r,r.r,1),e=r.x-n.x,i=r.y-n.y;return t>0&&t*t>e*e+i*i}function _(n,r){for(var t=0;t<r.length;++t)if(!w(n,r[t]))return!1;return!0}function M(n){switch(n.length){case 1:return function(n){return{x:n.x,y:n.y,r:n.r}}(n[0]);case 2:return z(n[0],n[1]);case 3:return B(n[0],n[1],n[2])}}function z(n,r){var t=n.x,e=n.y,i=n.r,u=r.x,o=r.y,f=r.r,a=u-t,c=o-e,h=f-i,l=Math.sqrt(a*a+c*c);return{x:(t+u+a/l*h)/2,y:(e+o+c/l*h)/2,r:(l+i+f)/2}}function B(n,r,t){var e=n.x,i=n.y,u=n.r,o=r.x,f=r.y,a=r.r,c=t.x,h=t.y,l=t.r,p=e-o,d=e-c,s=i-f,v=i-h,x=a-u,y=l-u,g=e*e+i*i-u*u,m=g-o*o-f*f+a*a,w=g-c*c-h*h+l*l,_=d*s-p*v,M=(s*w-v*m)/(2*_)-e,z=(v*x-s*y)/_,B=(d*m-p*w)/(2*_)-i,A=(p*y-d*x)/_,b=z*z+A*A-1,q=2*(u+M*z+B*A),E=M*M+B*B-u*u,S=-(Math.abs(b)>1e-6?(q+Math.sqrt(q*q-4*b*E))/(2*b):E/q);return{x:e+M+z*S,y:i+B+A*S,r:S}}function A(n,r,t){var e,i,u,o,f=n.x-r.x,a=n.y-r.y,c=f*f+a*a;c?(i=r.r+t.r,i*=i,o=n.r+t.r,i>(o*=o)?(e=(c+o-i)/(2*c),u=Math.sqrt(Math.max(0,o/c-e*e)),t.x=n.x-e*f-u*a,t.y=n.y-e*a+u*f):(e=(c+i-o)/(2*c),u=Math.sqrt(Math.max(0,i/c-e*e)),t.x=r.x+e*f-u*a,t.y=r.y+e*a+u*f)):(t.x=r.x+t.r,t.y=r.y)}function b(n,r){var t=n.r+r.r-1e-6,e=r.x-n.x,i=r.y-n.y;return t>0&&t*t>e*e+i*i}function q(n){var r=n._,t=n.next._,e=r.r+t.r,i=(r.x*t.r+t.x*r.r)/e,u=(r.y*t.r+t.y*r.r)/e;return i*i+u*u}function Node(n){this._=n,this.next=null,this.previous=null}function E(n,r){if(!(o=(t=n,n="object"==typeof t&&"length"in t?t:Array.from(t)).length))return 0;var t,e,i,u,o,f,a,c,h,l,p,d;if((e=n[0]).x=0,e.y=0,!(o>1))return e.r;if(i=n[1],e.x=-i.r,i.x=e.r,i.y=0,!(o>2))return e.r+i.r;A(i,e,u=n[2]),e=new Node(e),i=new Node(i),u=new Node(u),e.next=u.previous=i,i.next=e.previous=u,u.next=i.previous=e;n:for(c=3;c<o;++c){A(e._,i._,u=n[c]),u=new Node(u),h=i.next,l=e.previous,p=i._.r,d=e._.r;do{if(p<=d){if(b(h._,u._)){i=h,e.next=i,i.previous=e,--c;continue n}p+=h._.r,h=h.next}else{if(b(l._,u._)){(e=l).next=i,i.previous=e,--c;continue n}d+=l._.r,l=l.previous}}while(h!==l.next);for(u.previous=e,u.next=i,e.next=i.previous=i=u,f=q(e);(u=u.next)!==i;)(a=q(u))<f&&(e=u,f=a);i=e.next}for(e=[i._],u=i;(u=u.next)!==i;)e.push(u._);for(u=y(e,r),c=0;c<o;++c)(e=n[c]).x-=u.x,e.y-=u.y;return u.r}function S(n){return Math.sqrt(n.value)}function k(n){return function(r){r.children||(r.r=Math.max(0,+n(r)||0))}}function I(n,r,t){return function(e){if(i=e.children){var i,u,o,f=i.length,a=n(e)*r||0;if(a)for(u=0;u<f;++u)i[u].r+=a;if(o=E(i,t),a)for(u=0;u<f;++u)i[u].r-=a;e.r=o+a}}}function T(n){return function(r){var t=r.parent;r.r*=n,t&&(r.x=t.x+n*r.x,r.y=t.y+n*r.y)}}function j(n){n.x0=Math.round(n.x0),n.y0=Math.round(n.y0),n.x1=Math.round(n.x1),n.y1=Math.round(n.y1)}function O(n,r,t,e,i){for(var u,o=n.children,f=-1,a=o.length,c=n.value&&(e-r)/n.value;++f<a;)(u=o[f]).y0=t,u.y1=i,u.x0=r,u.x1=r+=u.value*c}var R={depth:-1},D={},L={};function $(n){return n.id}function N(n){return n.parentId}function P(n){let r=n.length;if(r<2)return"";for(;--r>1&&!C(n,r););return n.slice(0,r)}function C(n,r){if("/"===n[r]){let t=0;for(;r>0&&"\\"===n[--r];)++t;if(0==(1&t))return!0}return!1}function F(n,r){return n.parent===r.parent?1:2}function G(n){var r=n.children;return r?r[0]:n.t}function H(n){var r=n.children;return r?r[r.length-1]:n.t}function J(n,r,t){var e=t/(r.i-n.i);r.c-=e,r.s+=t,n.c+=e,r.z+=t,r.m+=t}function K(n,r,t){return n.a.parent===r.parent?n.a:t}function Q(n,r){this._=n,this.parent=null,this.children=null,this.A=null,this.a=this,this.z=0,this.m=0,this.c=0,this.s=0,this.t=null,this.i=r}function U(n,r,t,e,i){for(var u,o=n.children,f=-1,a=o.length,c=n.value&&(i-t)/n.value;++f<a;)(u=o[f]).x0=r,u.x1=e,u.y0=t,u.y1=t+=u.value*c}Q.prototype=Object.create(h.prototype);var V=(1+Math.sqrt(5))/2;function W(n,r,t,e,i,u){for(var o,f,a,c,h,l,p,d,s,v,x,y=[],g=r.children,m=0,w=0,_=g.length,M=r.value;m<_;){a=i-t,c=u-e;do{h=g[w++].value}while(!h&&w<_);for(l=p=h,x=h*h*(v=Math.max(c/a,a/c)/(M*n)),s=Math.max(p/x,x/l);w<_;++w){if(h+=f=g[w].value,f<l&&(l=f),f>p&&(p=f),x=h*h*v,(d=Math.max(p/x,x/l))>s){h-=f;break}s=d}y.push(o={value:h,dice:a<c,children:g.slice(m,w)}),o.dice?O(o,t,e,i,M?e+=c*h/M:u):U(o,t,e,M?t+=a*h/M:i,u),M-=h,m=w}return y}var X=function n(r){function t(n,t,e,i,u){W(r,n,t,e,i,u)}return t.ratio=function(r){return n((r=+r)>1?r:1)},t}(V);var Y=function n(r){function t(n,t,e,i,u){if((o=n._squarify)&&o.ratio===r)for(var o,f,a,c,h,l=-1,p=o.length,d=n.value;++l<p;){for(a=(f=o[l]).children,c=f.value=0,h=a.length;c<h;++c)f.value+=a[c].value;f.dice?O(f,t,e,i,d?e+=(u-e)*f.value/d:u):U(f,t,e,d?t+=(i-t)*f.value/d:i,u),d-=f.value}else n._squarify=o=W(r,n,t,e,i,u),o.ratio=r}return t.ratio=function(r){return n((r=+r)>1?r:1)},t}(V);n.Node=h,n.cluster=function(){var n=r,i=1,u=1,o=!1;function f(r){var f,a=0;r.eachAfter((function(r){var i=r.children;i?(r.x=function(n){return n.reduce(t,0)/n.length}(i),r.y=function(n){return 1+n.reduce(e,0)}(i)):(r.x=f?a+=n(r,f):0,r.y=0,f=r)}));var c=function(n){for(var r;r=n.children;)n=r[0];return n}(r),h=function(n){for(var r;r=n.children;)n=r[r.length-1];return n}(r),l=c.x-n(c,h)/2,p=h.x+n(h,c)/2;return r.eachAfter(o?function(n){n.x=(n.x-r.x)*i,n.y=(r.y-n.y)*u}:function(n){n.x=(n.x-l)/(p-l)*i,n.y=(1-(r.y?n.y/r.y:1))*u})}return f.separation=function(r){return arguments.length?(n=r,f):n},f.size=function(n){return arguments.length?(o=!1,i=+n[0],u=+n[1],f):o?null:[i,u]},f.nodeSize=function(n){return arguments.length?(o=!0,i=+n[0],u=+n[1],f):o?[i,u]:null},f},n.hierarchy=u,n.pack=function(){var n=null,r=1,t=1,e=d;function i(i){const u=x();return i.x=r/2,i.y=t/2,n?i.eachBefore(k(n)).eachAfter(I(e,.5,u)).eachBefore(T(1)):i.eachBefore(k(S)).eachAfter(I(d,1,u)).eachAfter(I(e,i.r/Math.min(r,t),u)).eachBefore(T(Math.min(r,t)/(2*i.r))),i}return i.radius=function(r){return arguments.length?(n=l(r),i):n},i.size=function(n){return arguments.length?(r=+n[0],t=+n[1],i):[r,t]},i.padding=function(n){return arguments.length?(e="function"==typeof n?n:s(+n),i):e},i},n.packEnclose=function(n){return y(n,x())},n.packSiblings=function(n){return E(n,x()),n},n.partition=function(){var n=1,r=1,t=0,e=!1;function i(i){var u=i.height+1;return i.x0=i.y0=t,i.x1=n,i.y1=r/u,i.eachBefore(function(n,r){return function(e){e.children&&O(e,e.x0,n*(e.depth+1)/r,e.x1,n*(e.depth+2)/r);var i=e.x0,u=e.y0,o=e.x1-t,f=e.y1-t;o<i&&(i=o=(i+o)/2),f<u&&(u=f=(u+f)/2),e.x0=i,e.y0=u,e.x1=o,e.y1=f}}(r,u)),e&&i.eachBefore(j),i}return i.round=function(n){return arguments.length?(e=!!n,i):e},i.size=function(t){return arguments.length?(n=+t[0],r=+t[1],i):[n,r]},i.padding=function(n){return arguments.length?(t=+n,i):t},i},n.stratify=function(){var n,r=$,t=N;function e(e){var i,u,o,f,a,l,p,d,s=Array.from(e),v=r,x=t,y=new Map;if(null!=n){const r=s.map(((r,t)=>function(n){let r=(n=`${n}`).length;C(n,r-1)&&!C(n,r-2)&&(n=n.slice(0,-1));return"/"===n[0]?n:`/${n}`}(n(r,t,e)))),t=r.map(P),i=new Set(r).add("");for(const n of t)i.has(n)||(i.add(n),r.push(n),t.push(P(n)),s.push(L));v=(n,t)=>r[t],x=(n,r)=>t[r]}for(o=0,i=s.length;o<i;++o)u=s[o],l=s[o]=new h(u),null!=(p=v(u,o,e))&&(p+="")&&(d=l.id=p,y.set(d,y.has(d)?D:l)),null!=(p=x(u,o,e))&&(p+="")&&(l.parent=p);for(o=0;o<i;++o)if(p=(l=s[o]).parent){if(!(a=y.get(p)))throw new Error("missing: "+p);if(a===D)throw new Error("ambiguous: "+p);a.children?a.children.push(l):a.children=[l],l.parent=a}else{if(f)throw new Error("multiple roots");f=l}if(!f)throw new Error("no root");if(null!=n){for(;f.data===L&&1===f.children.length;)f=f.children[0],--i;for(let n=s.length-1;n>=0&&(l=s[n],l.data===L);--n)l.data=null}if(f.parent=R,f.eachBefore((function(n){n.depth=n.parent.depth+1,--i})).eachBefore(c),f.parent=null,i>0)throw new Error("cycle");return f}return e.id=function(n){return arguments.length?(r=l(n),e):r},e.parentId=function(n){return arguments.length?(t=l(n),e):t},e.path=function(r){return arguments.length?(n=l(r),e):n},e},n.tree=function(){var n=F,r=1,t=1,e=null;function i(i){var a=function(n){for(var r,t,e,i,u,o=new Q(n,0),f=[o];r=f.pop();)if(e=r._.children)for(r.children=new Array(u=e.length),i=u-1;i>=0;--i)f.push(t=r.children[i]=new Q(e[i],i)),t.parent=r;return(o.parent=new Q(null,0)).children=[o],o}(i);if(a.eachAfter(u),a.parent.m=-a.z,a.eachBefore(o),e)i.eachBefore(f);else{var c=i,h=i,l=i;i.eachBefore((function(n){n.x<c.x&&(c=n),n.x>h.x&&(h=n),n.depth>l.depth&&(l=n)}));var p=c===h?1:n(c,h)/2,d=p-c.x,s=r/(h.x+p+d),v=t/(l.depth||1);i.eachBefore((function(n){n.x=(n.x+d)*s,n.y=n.depth*v}))}return i}function u(r){var t=r.children,e=r.parent.children,i=r.i?e[r.i-1]:null;if(t){!function(n){for(var r,t=0,e=0,i=n.children,u=i.length;--u>=0;)(r=i[u]).z+=t,r.m+=t,t+=r.s+(e+=r.c)}(r);var u=(t[0].z+t[t.length-1].z)/2;i?(r.z=i.z+n(r._,i._),r.m=r.z-u):r.z=u}else i&&(r.z=i.z+n(r._,i._));r.parent.A=function(r,t,e){if(t){for(var i,u=r,o=r,f=t,a=u.parent.children[0],c=u.m,h=o.m,l=f.m,p=a.m;f=H(f),u=G(u),f&&u;)a=G(a),(o=H(o)).a=r,(i=f.z+l-u.z-c+n(f._,u._))>0&&(J(K(f,r,e),r,i),c+=i,h+=i),l+=f.m,c+=u.m,p+=a.m,h+=o.m;f&&!H(o)&&(o.t=f,o.m+=l-h),u&&!G(a)&&(a.t=u,a.m+=c-p,e=r)}return e}(r,i,r.parent.A||e[0])}function o(n){n._.x=n.z+n.parent.m,n.m+=n.parent.m}function f(n){n.x*=r,n.y=n.depth*t}return i.separation=function(r){return arguments.length?(n=r,i):n},i.size=function(n){return arguments.length?(e=!1,r=+n[0],t=+n[1],i):e?null:[r,t]},i.nodeSize=function(n){return arguments.length?(e=!0,r=+n[0],t=+n[1],i):e?[r,t]:null},i},n.treemap=function(){var n=X,r=!1,t=1,e=1,i=[0],u=d,o=d,f=d,a=d,c=d;function h(n){return n.x0=n.y0=0,n.x1=t,n.y1=e,n.eachBefore(l),i=[0],r&&n.eachBefore(j),n}function l(r){var t=i[r.depth],e=r.x0+t,h=r.y0+t,l=r.x1-t,p=r.y1-t;l<e&&(e=l=(e+l)/2),p<h&&(h=p=(h+p)/2),r.x0=e,r.y0=h,r.x1=l,r.y1=p,r.children&&(t=i[r.depth+1]=u(r)/2,e+=c(r)-t,h+=o(r)-t,(l-=f(r)-t)<e&&(e=l=(e+l)/2),(p-=a(r)-t)<h&&(h=p=(h+p)/2),n(r,e,h,l,p))}return h.round=function(n){return arguments.length?(r=!!n,h):r},h.size=function(n){return arguments.length?(t=+n[0],e=+n[1],h):[t,e]},h.tile=function(r){return arguments.length?(n=p(r),h):n},h.padding=function(n){return arguments.length?h.paddingInner(n).paddingOuter(n):h.paddingInner()},h.paddingInner=function(n){return arguments.length?(u="function"==typeof n?n:s(+n),h):u},h.paddingOuter=function(n){return arguments.length?h.paddingTop(n).paddingRight(n).paddingBottom(n).paddingLeft(n):h.paddingTop()},h.paddingTop=function(n){return arguments.length?(o="function"==typeof n?n:s(+n),h):o},h.paddingRight=function(n){return arguments.length?(f="function"==typeof n?n:s(+n),h):f},h.paddingBottom=function(n){return arguments.length?(a="function"==typeof n?n:s(+n),h):a},h.paddingLeft=function(n){return arguments.length?(c="function"==typeof n?n:s(+n),h):c},h},n.treemapBinary=function(n,r,t,e,i){var u,o,f=n.children,a=f.length,c=new Array(a+1);for(c[0]=o=u=0;u<a;++u)c[u+1]=o+=f[u].value;!function n(r,t,e,i,u,o,a){if(r>=t-1){var h=f[r];return h.x0=i,h.y0=u,h.x1=o,void(h.y1=a)}var l=c[r],p=e/2+l,d=r+1,s=t-1;for(;d<s;){var v=d+s>>>1;c[v]<p?d=v+1:s=v}p-c[d-1]<c[d]-p&&r+1<d&&--d;var x=c[d]-l,y=e-x;if(o-i>a-u){var g=e?(i*y+o*x)/e:o;n(r,d,x,i,u,g,a),n(d,t,y,g,u,o,a)}else{var m=e?(u*y+a*x)/e:a;n(r,d,x,i,u,o,m),n(d,t,y,i,m,o,a)}}(0,a,n.value,r,t,e,i)},n.treemapDice=O,n.treemapResquarify=Y,n.treemapSlice=U,n.treemapSliceDice=function(n,r,t,e,i){(1&n.depth?U:O)(n,r,t,e,i)},n.treemapSquarify=X,Object.defineProperty(n,"__esModule",{value:!0})}));

frontend/vendor/d3-path.v3.min.js

@@ -1,2 +0,0 @@
-// https://d3js.org/d3-path/ v3.1.0 Copyright 2015-2022 Mike Bostock
-!function(t,i){"object"==typeof exports&&"undefined"!=typeof module?i(exports):"function"==typeof define&&define.amd?define(["exports"],i):i((t="undefined"!=typeof globalThis?globalThis:t||self).d3=t.d3||{})}(this,(function(t){"use strict";const i=Math.PI,s=2*i,h=1e-6,e=s-h;function n(t){this._+=t[0];for(let i=1,s=t.length;i<s;++i)this._+=arguments[i]+t[i]}class _{constructor(t){this._x0=this._y0=this._x1=this._y1=null,this._="",this._append=null==t?n:function(t){let i=Math.floor(t);if(!(i>=0))throw new Error(`invalid digits: ${t}`);if(i>15)return n;const s=10**i;return function(t){this._+=t[0];for(let i=1,h=t.length;i<h;++i)this._+=Math.round(arguments[i]*s)/s+t[i]}}(t)}moveTo(t,i){this._append`M${this._x0=this._x1=+t},${this._y0=this._y1=+i}`}closePath(){null!==this._x1&&(this._x1=this._x0,this._y1=this._y0,this._append`Z`)}lineTo(t,i){this._append`L${this._x1=+t},${this._y1=+i}`}quadraticCurveTo(t,i,s,h){this._append`Q${+t},${+i},${this._x1=+s},${this._y1=+h}`}bezierCurveTo(t,i,s,h,e,n){this._append`C${+t},${+i},${+s},${+h},${this._x1=+e},${this._y1=+n}`}arcTo(t,s,e,n,_){if(t=+t,s=+s,e=+e,n=+n,(_=+_)<0)throw new Error(`negative radius: ${_}`);let a=this._x1,$=this._y1,o=e-t,r=n-s,p=a-t,d=$-s,l=p*p+d*d;if(null===this._x1)this._append`M${this._x1=t},${this._y1=s}`;else if(l>h)if(Math.abs(d*o-r*p)>h&&_){let u=e-a,f=n-$,x=o*o+r*r,y=u*u+f*f,c=Math.sqrt(x),M=Math.sqrt(l),b=_*Math.tan((i-Math.acos((x+l-y)/(2*c*M)))/2),g=b/M,w=b/c;Math.abs(g-1)>h&&this._append`L${t+g*p},${s+g*d}`,this._append`A${_},${_},0,0,${+(d*u>p*f)},${this._x1=t+w*o},${this._y1=s+w*r}`}else this._append`L${this._x1=t},${this._y1=s}`;else;}arc(t,n,_,a,$,o){if(t=+t,n=+n,o=!!o,(_=+_)<0)throw new Error(`negative radius: ${_}`);let r=_*Math.cos(a),p=_*Math.sin(a),d=t+r,l=n+p,u=1^o,f=o?a-$:$-a;null===this._x1?this._append`M${d},${l}`:(Math.abs(this._x1-d)>h||Math.abs(this._y1-l)>h)&&this._append`L${d},${l}`,_&&(f<0&&(f=f%s+s),f>e?this._append`A${_},${_},0,1,${u},${t-r},${n-p}A${_},${_},0,1,${u},${this._x1=d},${this._y1=l}`:f>h&&this._append`A${_},${_},0,${+(f>=i)},${u},${this._x1=t+_*Math.cos($)},${this._y1=n+_*Math.sin($)}`)}rect(t,i,s,h){this._append`M${this._x0=this._x1=+t},${this._y0=this._y1=+i}h${s=+s}v${+h}h${-s}Z`}toString(){return this._}}function a(){return new _}a.prototype=_.prototype,t.Path=_,t.path=a,t.pathRound=function(t=3){return new _(+t)}}));

frontend/vendor/d3-shape.v3.min.js

@@ -1,2 +0,0 @@
-// https://d3js.org/d3-shape/ v3.2.0 Copyright 2010-2022 Mike Bostock
-!function(t,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("d3-path")):"function"==typeof define&&define.amd?define(["exports","d3-path"],n):n((t="undefined"!=typeof globalThis?globalThis:t||self).d3=t.d3||{},t.d3)}(this,(function(t,n){"use strict";function i(t){return function(){return t}}const e=Math.abs,s=Math.atan2,o=Math.cos,h=Math.max,_=Math.min,r=Math.sin,a=Math.sqrt,l=1e-12,c=Math.PI,u=c/2,f=2*c;function y(t){return t>1?0:t<-1?c:Math.acos(t)}function x(t){return t>=1?u:t<=-1?-u:Math.asin(t)}function p(t){let i=3;return t.digits=function(n){if(!arguments.length)return i;if(null==n)i=null;else{const t=Math.floor(n);if(!(t>=0))throw new RangeError(`invalid digits: ${n}`);i=t}return t},()=>new n.Path(i)}function v(t){return t.innerRadius}function d(t){return t.outerRadius}function T(t){return t.startAngle}function g(t){return t.endAngle}function m(t){return t&&t.padAngle}function b(t,n,i,e,s,o,h,_){var r=i-t,a=e-n,c=h-s,u=_-o,f=u*r-c*a;if(!(f*f<l))return[t+(f=(c*(n-o)-u*(t-s))/f)*r,n+f*a]}function w(t,n,i,e,s,o,_){var r=t-i,l=n-e,c=(_?o:-o)/a(r*r+l*l),u=c*l,f=-c*r,y=t+u,x=n+f,p=i+u,v=e+f,d=(y+p)/2,T=(x+v)/2,g=p-y,m=v-x,b=g*g+m*m,w=s-o,k=y*v-p*x,N=(m<0?-1:1)*a(h(0,w*w*b-k*k)),S=(k*m-g*N)/b,E=(-k*g-m*N)/b,A=(k*m+g*N)/b,P=(-k*g+m*N)/b,M=S-d,C=E-T,R=A-d,O=P-T;return M*M+C*C>R*R+O*O&&(S=A,E=P),{cx:S,cy:E,x01:-u,y01:-f,x11:S*(s/w-1),y11:E*(s/w-1)}}var k=Array.prototype.slice;function N(t){return"object"==typeof t&&"length"in t?t:Array.from(t)}function S(t){this._context=t}function E(t){return new S(t)}function A(t){return t[0]}function P(t){return t[1]}function M(t,n){var e=i(!0),s=null,o=E,h=null,_=p(r);function r(i){var r,a,l,c=(i=N(i)).length,u=!1;for(null==s&&(h=o(l=_())),r=0;r<=c;++r)!(r<c&&e(a=i[r],r,i))===u&&((u=!u)?h.lineStart():h.lineEnd()),u&&h.point(+t(a,r,i),+n(a,r,i));if(l)return h=null,l+""||null}return t="function"==typeof t?t:void 0===t?A:i(t),n="function"==typeof n?n:void 0===n?P:i(n),r.x=function(n){return arguments.length?(t="function"==typeof n?n:i(+n),r):t},r.y=function(t){return arguments.length?(n="function"==typeof t?t:i(+t),r):n},r.defined=function(t){return arguments.length?(e="function"==typeof t?t:i(!!t),r):e},r.curve=function(t){return arguments.length?(o=t,null!=s&&(h=o(s)),r):o},r.context=function(t){return arguments.length?(null==t?s=h=null:h=o(s=t),r):s},r}function C(t,n,e){var s=null,o=i(!0),h=null,_=E,r=null,a=p(l);function l(i){var l,c,u,f,y,x=(i=N(i)).length,p=!1,v=new Array(x),d=new Array(x);for(null==h&&(r=_(y=a())),l=0;l<=x;++l){if(!(l<x&&o(f=i[l],l,i))===p)if(p=!p)c=l,r.areaStart(),r.lineStart();else{for(r.lineEnd(),r.lineStart(),u=l-1;u>=c;--u)r.point(v[u],d[u]);r.lineEnd(),r.areaEnd()}p&&(v[l]=+t(f,l,i),d[l]=+n(f,l,i),r.point(s?+s(f,l,i):v[l],e?+e(f,l,i):d[l]))}if(y)return r=null,y+""||null}function c(){return M().defined(o).curve(_).context(h)}return t="function"==typeof t?t:void 0===t?A:i(+t),n="function"==typeof n?n:i(void 0===n?0:+n),e="function"==typeof e?e:void 0===e?P:i(+e),l.x=function(n){return arguments.length?(t="function"==typeof n?n:i(+n),s=null,l):t},l.x0=function(n){return arguments.length?(t="function"==typeof n?n:i(+n),l):t},l.x1=function(t){return arguments.length?(s=null==t?null:"function"==typeof t?t:i(+t),l):s},l.y=function(t){return arguments.length?(n="function"==typeof t?t:i(+t),e=null,l):n},l.y0=function(t){return arguments.length?(n="function"==typeof t?t:i(+t),l):n},l.y1=function(t){return arguments.length?(e=null==t?null:"function"==typeof t?t:i(+t),l):e},l.lineX0=l.lineY0=function(){return c().x(t).y(n)},l.lineY1=function(){return c().x(t).y(e)},l.lineX1=function(){return c().x(s).y(n)},l.defined=function(t){return arguments.length?(o="function"==typeof t?t:i(!!t),l):o},l.curve=function(t){return arguments.length?(_=t,null!=h&&(r=_(h)),l):_},l.context=function(t){return arguments.length?(null==t?h=r=null:r=_(h=t),l):h},l}function R(t,n){return n<t?-1:n>t?1:n>=t?0:NaN}function O(t){return t}S.prototype={areaStart:function(){this._line=0},areaEnd:function(){this._line=NaN},lineStart:function(){this._point=0},lineEnd:function(){(this._line||0!==this._line&&1===this._point)&&this._context.closePath(),this._line=1-this._line},point:function(t,n){switch(t=+t,n=+n,this._point){case 0:this._point=1,this._line?this._context.lineTo(t,n):this._context.moveTo(t,n);break;case 1:this._point=2;default:this._context.lineTo(t,n)}}};var z=Y(E);function X(t){this._curve=t}function Y(t){function n(n){return new X(t(n))}return n._curve=t,n}function q(t){var n=t.curve;return t.angle=t.x,delete t.x,t.radius=t.y,delete t.y,t.curve=function(t){return arguments.length?n(Y(t)):n()._curve},t}function B(){return q(M().curve(z))}function D(){var t=C().curve(z),n=t.curve,i=t.lineX0,e=t.lineX1,s=t.lineY0,o=t.lineY1;return t.angle=t.x,delete t.x,t.startAngle=t.x0,delete t.x0,t.endAngle=t.x1,delete t.x1,t.radius=t.y,delete t.y,t.innerRadius=t.y0,delete t.y0,t.outerRadius=t.y1,delete t.y1,t.lineStartAngle=function(){return q(i())},delete t.lineX0,t.lineEndAngle=function(){return q(e())},delete t.lineX1,t.lineInnerRadius=function(){return q(s())},delete t.lineY0,t.lineOuterRadius=function(){return q(o())},delete t.lineY1,t.curve=function(t){return arguments.length?n(Y(t)):n()._curve},t}function I(t,n){return[(n=+n)*Math.cos(t-=Math.PI/2),n*Math.sin(t)]}X.prototype={areaStart:function(){this._curve.areaStart()},areaEnd:function(){this._curve.areaEnd()},lineStart:function(){this._curve.lineStart()},lineEnd:function(){this._curve.lineEnd()},point:function(t,n){this._curve.point(n*Math.sin(t),n*-Math.cos(t))}};class j{constructor(t,n){this._context=t,this._x=n}areaStart(){this._line=0}areaEnd(){this._line=NaN}lineStart(){this._point=0}lineEnd(){(this._line||0!==this._line&&1===this._point)&&this._context.closePath(),this._line=1-this._line}point(t,n){switch(t=+t,n=+n,this._point){case 0:this._point=1,this._line?this._context.lineTo(t,n):this._context.moveTo(t,n);break;case 1:this._point=2;default:this._x?this._context.bezierCurveTo(this._x0=(this._x0+t)/2,this._y0,this._x0,n,t,n):this._context.bezierCurveTo(this._x0,this._y0=(this._y0+n)/2,t,this._y0,t,n)}this._x0=t,this._y0=n}}class L{constructor(t){this._context=t}lineStart(){this._point=0}lineEnd(){}point(t,n){if(t=+t,n=+n,0===this._point)this._point=1;else{const i=I(this._x0,this._y0),e=I(this._x0,this._y0=(this._y0+n)/2),s=I(t,this._y0),o=I(t,n);this._context.moveTo(...i),this._context.bezierCurveTo(...e,...s,...o)}this._x0=t,this._y0=n}}function V(t){return new j(t,!0)}function W(t){return new j(t,!1)}function F(t){return new L(t)}function H(t){return t.source}function $(t){return t.target}function G(t){let n=H,e=$,s=A,o=P,h=null,_=null,r=p(a);function a(){let i;const a=k.call(arguments),l=n.apply(this,a),c=e.apply(this,a);if(null==h&&(_=t(i=r())),_.lineStart(),a[0]=l,_.point(+s.apply(this,a),+o.apply(this,a)),a[0]=c,_.point(+s.apply(this,a),+o.apply(this,a)),_.lineEnd(),i)return _=null,i+""||null}return a.source=function(t){return arguments.length?(n=t,a):n},a.target=function(t){return arguments.length?(e=t,a):e},a.x=function(t){return arguments.length?(s="function"==typeof t?t:i(+t),a):s},a.y=function(t){return arguments.length?(o="function"==typeof t?t:i(+t),a):o},a.context=function(n){return arguments.length?(null==n?h=_=null:_=t(h=n),a):h},a}const J=a(3);var K={draw(t,n){const i=.59436*a(n+_(n/28,.75)),e=i/2,s=e*J;t.moveTo(0,i),t.lineTo(0,-i),t.moveTo(-s,-e),t.lineTo(s,e),t.moveTo(-s,e),t.lineTo(s,-e)}},Q={draw(t,n){const i=a(n/c);t.moveTo(i,0),t.arc(0,0,i,0,f)}},U={draw(t,n){const i=a(n/5)/2;t.moveTo(-3*i,-i),t.lineTo(-i,-i),t.lineTo(-i,-3*i),t.lineTo(i,-3*i),t.lineTo(i,-i),t.lineTo(3*i,-i),t.lineTo(3*i,i),t.lineTo(i,i),t.lineTo(i,3*i),t.lineTo(-i,3*i),t.lineTo(-i,i),t.lineTo(-3*i,i),t.closePath()}};const Z=a(1/3),tt=2*Z;var nt={draw(t,n){const i=a(n/tt),e=i*Z;t.moveTo(0,-i),t.lineTo(e,0),t.lineTo(0,i),t.lineTo(-e,0),t.closePath()}},it={draw(t,n){const i=.62625*a(n);t.moveTo(0,-i),t.lineTo(i,0),t.lineTo(0,i),t.lineTo(-i,0),t.closePath()}},et={draw(t,n){const i=.87559*a(n-_(n/7,2));t.moveTo(-i,0),t.lineTo(i,0),t.moveTo(0,i),t.lineTo(0,-i)}},st={draw(t,n){const i=a(n),e=-i/2;t.rect(e,e,i,i)}},ot={draw(t,n){const i=.4431*a(n);t.moveTo(i,i),t.lineTo(i,-i),t.lineTo(-i,-i),t.lineTo(-i,i),t.closePath()}};const ht=r(c/10)/r(7*c/10),_t=r(f/10)*ht,rt=-o(f/10)*ht;var at={draw(t,n){const i=a(.8908130915292852*n),e=_t*i,s=rt*i;t.moveTo(0,-i),t.lineTo(e,s);for(let n=1;n<5;++n){const h=f*n/5,_=o(h),a=r(h);t.lineTo(a*i,-_*i),t.lineTo(_*e-a*s,a*e+_*s)}t.closePath()}};const lt=a(3);var ct={draw(t,n){const i=-a(n/(3*lt));t.moveTo(0,2*i),t.lineTo(-lt*i,-i),t.lineTo(lt*i,-i),t.closePath()}};const ut=a(3);var ft={draw(t,n){const i=.6824*a(n),e=i/2,s=i*ut/2;t.moveTo(0,-i),t.lineTo(s,e),t.lineTo(-s,e),t.closePath()}};const yt=-.5,xt=a(3)/2,pt=1/a(12),vt=3*(pt/2+1);var dt={draw(t,n){const i=a(n/vt),e=i/2,s=i*pt,o=e,h=i*pt+i,_=-o,r=h;t.moveTo(e,s),t.lineTo(o,h),t.lineTo(_,r),t.lineTo(yt*e-xt*s,xt*e+yt*s),t.lineTo(yt*o-xt*h,xt*o+yt*h),t.lineTo(yt*_-xt*r,xt*_+yt*r),t.lineTo(yt*e+xt*s,yt*s-xt*e),t.lineTo(yt*o+xt*h,yt*h-xt*o),t.lineTo(yt*_+xt*r,yt*r-xt*_),t.closePath()}},Tt={draw(t,n){const i=.6189*a(n-_(n/6,1.7));t.moveTo(-i,-i),t.lineTo(i,i),t.moveTo(-i,i),t.lineTo(i,-i)}};const gt=[Q,U,nt,st,at,ct,dt],mt=[Q,et,Tt,ft,K,ot,it];function bt(){}function wt(t,n,i){t._context.bezierCurveTo((2*t._x0+t._x1)/3,(2*t._y0+t._y1)/3,(t._x0+2*t._x1)/3,(t._y0+2*t._y1)/3,(t._x0+4*t._x1+n)/6,(t._y0+4*t._y1+i)/6)}function kt(t){this._context=t}function Nt(t){this._context=t}function St(t){this._context=t}function Et(t,n){this._basis=new kt(t),this._beta=n}kt.prototype={areaStart:function(){this._line=0},areaEnd:function(){this._line=NaN},lineStart:function(){this._x0=this._x1=this._y0=this._y1=NaN,this._point=0},lineEnd:function(){switch(this._point){case 3:wt(this,this._x1,this._y1);case 2:this._context.lineTo(this._x1,this._y1)}(this._line||0!==this._line&&1===this._point)&&this._context.closePath(),this._line=1-this._line},point:function(t,n){switch(t=+t,n=+n,this._point){case 0:this._point=1,this._line?this._context.lineTo(t,n):this._context.moveTo(t,n);break;case 1:this._point=2;break;case 2:this._point=3,this._context.lineTo((5*this._x0+this._x1)/6,(5*this._y0+this._y1)/6);default:wt(this,t,n)}this._x0=this._x1,this._x1=t,this._y0=this._y1,this._y1=n}},Nt.prototype={areaStart:bt,areaEnd:bt,lineStart:function(){this._x0=this._x1=this._x2=this._x3=this._x4=this._y0=this._y1=this._y2=this._y3=this._y4=NaN,this._point=0},lineEnd:function(){switch(this._point){case 1:this._context.moveTo(this._x2,this._y2),this._context.closePath();break;case 2:this._context.moveTo((this._x2+2*this._x3)/3,(this._y2+2*this._y3)/3),this._context.lineTo((this._x3+2*this._x2)/3,(this._y3+2*this._y2)/3),this._context.closePath();break;case 3:this.point(this._x2,this._y2),this.point(this._x3,this._y3),this.point(this._x4,this._y4)}},point:function(t,n){switch(t=+t,n=+n,this._point){case 0:this._point=1,this._x2=t,this._y2=n;break;case 1:this._point=2,this._x3=t,this._y3=n;break;case 2:this._point=3,this._x4=t,this._y4=n,this._context.moveTo((this._x0+4*this._x1+t)/6,(this._y0+4*this._y1+n)/6);break;default:wt(this,t,n)}this._x0=this._x1,this._x1=t,this._y0=this._y1,this._y1=n}},St.prototype={areaStart:function(){this._line=0},areaEnd:function(){this._line=NaN},lineStart:function(){this._x0=this._x1=this._y0=this._y1=NaN,this._point=0},lineEnd:function(){(this._line||0!==this._line&&3===this._point)&&this._context.closePath(),this._line=1-this._line},point:function(t,n){switch(t=+t,n=+n,this._point){case 0:this._point=1;break;case 1:this._point=2;break;case 2:this._point=3;var i=(this._x0+4*this._x1+t)/6,e=(this._y0+4*this._y1+n)/6;this._line?this._context.lineTo(i,e):this._context.moveTo(i,e);break;case 3:this._point=4;default:wt(this,t,n)}this._x0=this._x1,this._x1=t,this._y0=this._y1,this._y1=n}},Et.prototype={lineStart:function(){this._x=[],this._y=[],this._basis.lineStart()},lineEnd:function(){var t=this._x,n=this._y,i=t.length-1;if(i>0)for(var e,s=t[0],o=n[0],h=t[i]-s,_=n[i]-o,r=-1;++r<=i;)e=r/i,this._basis.point(this._beta*t[r]+(1-this._beta)*(s+e*h),this._beta*n[r]+(1-this._beta)*(o+e*_));this._x=this._y=null,this._basis.lineEnd()},point:function(t,n){this._x.push(+t),this._y.push(+n)}};var At=function t(n){function i(t){return 1===n?new kt(t):new Et(t,n)}return i.beta=function(n){return t(+n)},i}(.85);function Pt(t,n,i){t._context.bezierCurveTo(t._x1+t._k*(t._x2-t._x0),t._y1+t._k*(t._y2-t._y0),t._x2+t._k*(t._x1-n),t._y2+t._k*(t._y1-i),t._x2,t._y2)}function Mt(t,n){this._context=t,this._k=(1-n)/6}Mt.prototype={areaStart:function(){this._line=0},areaEnd:function(){this._line=NaN},lineStart:function(){this._x0=this._x1=this._x2=this._y0=this._y1=this._y2=NaN,this._point=0},lineEnd:function(){switch(this._point){case 2:this._context.lineTo(this._x2,this._y2);break;case 3:Pt(this,this._x1,this._y1)}(this._line||0!==this._line&&1===this._point)&&this._context.closePath(),this._line=1-this._line},point:function(t,n){switch(t=+t,n=+n,this._point){case 0:this._point=1,this._line?this._context.lineTo(t,n):this._context.moveTo(t,n);break;case 1:this._point=2,this._x1=t,this._y1=n;break;case 2:this._point=3;default:Pt(this,t,n)}this._x0=this._x1,this._x1=this._x2,this._x2=t,this._y0=this._y1,this._y1=this._y2,this._y2=n}};var Ct=function t(n){function i(t){return new Mt(t,n)}return i.tension=function(n){return t(+n)},i}(0);function Rt(t,n){this._context=t,this._k=(1-n)/6}Rt.prototype={areaStart:bt,areaEnd:bt,lineStart:function(){this._x0=this._x1=this._x2=this._x3=this._x4=this._x5=this._y0=this._y1=this._y2=this._y3=this._y4=this._y5=NaN,this._point=0},lineEnd:function(){switch(this._point){case 1:this._context.moveTo(this._x3,this._y3),this._context.closePath();break;case 2:this._context.lineTo(this._x3,this._y3),this._context.closePath();break;case 3:this.point(this._x3,this._y3),this.point(this._x4,this._y4),this.point(this._x5,this._y5)}},point:function(t,n){switch(t=+t,n=+n,this._point){case 0:this._point=1,this._x3=t,this._y3=n;break;case 1:this._point=2,this._context.moveTo(this._x4=t,this._y4=n);break;case 2:this._point=3,this._x5=t,this._y5=n;break;default:Pt(this,t,n)}this._x0=this._x1,this._x1=this._x2,this._x2=t,this._y0=this._y1,this._y1=this._y2,this._y2=n}};var Ot=function t(n){function i(t){return new Rt(t,n)}return i.tension=function(n){return t(+n)},i}(0);function zt(t,n){this._context=t,this._k=(1-n)/6}zt.prototype={areaStart:function(){this._line=0},areaEnd:function(){this._line=NaN},lineStart:function(){this._x0=this._x1=this._x2=this._y0=this._y1=this._y2=NaN,this._point=0},lineEnd:function(){(this._line||0!==this._line&&3===this._point)&&this._context.closePath(),this._line=1-this._line},point:function(t,n){switch(t=+t,n=+n,this._point){case 0:this._point=1;break;case 1:this._point=2;break;case 2:this._point=3,this._line?this._context.lineTo(this._x2,this._y2):this._context.moveTo(this._x2,this._y2);break;case 3:this._point=4;default:Pt(this,t,n)}this._x0=this._x1,this._x1=this._x2,this._x2=t,this._y0=this._y1,this._y1=this._y2,this._y2=n}};var Xt=function t(n){function i(t){return new zt(t,n)}return i.tension=function(n){return t(+n)},i}(0);function Yt(t,n,i){var e=t._x1,s=t._y1,o=t._x2,h=t._y2;if(t._l01_a>l){var _=2*t._l01_2a+3*t._l01_a*t._l12_a+t._l12_2a,r=3*t._l01_a*(t._l01_a+t._l12_a);e=(e*_-t._x0*t._l12_2a+t._x2*t._l01_2a)/r,s=(s*_-t._y0*t._l12_2a+t._y2*t._l01_2a)/r}if(t._l23_a>l){var a=2*t._l23_2a+3*t._l23_a*t._l12_a+t._l12_2a,c=3*t._l23_a*(t._l23_a+t._l12_a);o=(o*a+t._x1*t._l23_2a-n*t._l12_2a)/c,h=(h*a+t._y1*t._l23_2a-i*t._l12_2a)/c}t._context.bezierCurveTo(e,s,o,h,t._x2,t._y2)}function qt(t,n){this._context=t,this._alpha=n}qt.prototype={areaStart:function(){this._line=0},areaEnd:function(){this._line=NaN},lineStart:function(){this._x0=this._x1=this._x2=this._y0=this._y1=this._y2=NaN,this._l01_a=this._l12_a=this._l23_a=this._l01_2a=this._l12_2a=this._l23_2a=this._point=0},lineEnd:function(){switch(this._point){case 2:this._context.lineTo(this._x2,this._y2);break;case 3:this.point(this._x2,this._y2)}(this._line||0!==this._line&&1===this._point)&&this._context.closePath(),this._line=1-this._line},point:function(t,n){if(t=+t,n=+n,this._point){var i=this._x2-t,e=this._y2-n;this._l23_a=Math.sqrt(this._l23_2a=Math.pow(i*i+e*e,this._alpha))}switch(this._point){case 0:this._point=1,this._line?this._context.lineTo(t,n):this._context.moveTo(t,n);break;case 1:this._point=2;break;case 2:this._point=3;default:Yt(this,t,n)}this._l01_a=this._l12_a,this._l12_a=this._l23_a,this._l01_2a=this._l12_2a,this._l12_2a=this._l23_2a,this._x0=this._x1,this._x1=this._x2,this._x2=t,this._y0=this._y1,this._y1=this._y2,this._y2=n}};var Bt=function t(n){function i(t){return n?new qt(t,n):new Mt(t,0)}return i.alpha=function(n){return t(+n)},i}(.5);function Dt(t,n){this._context=t,this._alpha=n}Dt.prototype={areaStart:bt,areaEnd:bt,lineStart:function(){this._x0=this._x1=this._x2=this._x3=this._x4=this._x5=this._y0=this._y1=this._y2=this._y3=this._y4=this._y5=NaN,this._l01_a=this._l12_a=this._l23_a=this._l01_2a=this._l12_2a=this._l23_2a=this._point=0},lineEnd:function(){switch(this._point){case 1:this._context.moveTo(this._x3,this._y3),this._context.closePath();break;case 2:this._context.lineTo(this._x3,this._y3),this._context.closePath();break;case 3:this.point(this._x3,this._y3),this.point(this._x4,this._y4),this.point(this._x5,this._y5)}},point:function(t,n){if(t=+t,n=+n,this._point){var i=this._x2-t,e=this._y2-n;this._l23_a=Math.sqrt(this._l23_2a=Math.pow(i*i+e*e,this._alpha))}switch(this._point){case 0:this._point=1,this._x3=t,this._y3=n;break;case 1:this._point=2,this._context.moveTo(this._x4=t,this._y4=n);break;case 2:this._point=3,this._x5=t,this._y5=n;break;default:Yt(this,t,n)}this._l01_a=this._l12_a,this._l12_a=this._l23_a,this._l01_2a=this._l12_2a,this._l12_2a=this._l23_2a,this._x0=this._x1,this._x1=this._x2,this._x2=t,this._y0=this._y1,this._y1=this._y2,this._y2=n}};var It=function t(n){function i(t){return n?new Dt(t,n):new Rt(t,0)}return i.alpha=function(n){return t(+n)},i}(.5);function jt(t,n){this._context=t,this._alpha=n}jt.prototype={areaStart:function(){this._line=0},areaEnd:function(){this._line=NaN},lineStart:function(){this._x0=this._x1=this._x2=this._y0=this._y1=this._y2=NaN,this._l01_a=this._l12_a=this._l23_a=this._l01_2a=this._l12_2a=this._l23_2a=this._point=0},lineEnd:function(){(this._line||0!==this._line&&3===this._point)&&this._context.closePath(),this._line=1-this._line},point:function(t,n){if(t=+t,n=+n,this._point){var i=this._x2-t,e=this._y2-n;this._l23_a=Math.sqrt(this._l23_2a=Math.pow(i*i+e*e,this._alpha))}switch(this._point){case 0:this._point=1;break;case 1:this._point=2;break;case 2:this._point=3,this._line?this._context.lineTo(this._x2,this._y2):this._context.moveTo(this._x2,this._y2);break;case 3:this._point=4;default:Yt(this,t,n)}this._l01_a=this._l12_a,this._l12_a=this._l23_a,this._l01_2a=this._l12_2a,this._l12_2a=this._l23_2a,this._x0=this._x1,this._x1=this._x2,this._x2=t,this._y0=this._y1,this._y1=this._y2,this._y2=n}};var Lt=function t(n){function i(t){return n?new jt(t,n):new zt(t,0)}return i.alpha=function(n){return t(+n)},i}(.5);function Vt(t){this._context=t}function Wt(t){return t<0?-1:1}function Ft(t,n,i){var e=t._x1-t._x0,s=n-t._x1,o=(t._y1-t._y0)/(e||s<0&&-0),h=(i-t._y1)/(s||e<0&&-0),_=(o*s+h*e)/(e+s);return(Wt(o)+Wt(h))*Math.min(Math.abs(o),Math.abs(h),.5*Math.abs(_))||0}function Ht(t,n){var i=t._x1-t._x0;return i?(3*(t._y1-t._y0)/i-n)/2:n}function $t(t,n,i){var e=t._x0,s=t._y0,o=t._x1,h=t._y1,_=(o-e)/3;t._context.bezierCurveTo(e+_,s+_*n,o-_,h-_*i,o,h)}function Gt(t){this._context=t}function Jt(t){this._context=new Kt(t)}function Kt(t){this._context=t}function Qt(t){this._context=t}function Ut(t){var n,i,e=t.length-1,s=new Array(e),o=new Array(e),h=new Array(e);for(s[0]=0,o[0]=2,h[0]=t[0]+2*t[1],n=1;n<e-1;++n)s[n]=1,o[n]=4,h[n]=4*t[n]+2*t[n+1];for(s[e-1]=2,o[e-1]=7,h[e-1]=8*t[e-1]+t[e],n=1;n<e;++n)i=s[n]/o[n-1],o[n]-=i,h[n]-=i*h[n-1];for(s[e-1]=h[e-1]/o[e-1],n=e-2;n>=0;--n)s[n]=(h[n]-s[n+1])/o[n];for(o[e-1]=(t[e]+s[e-1])/2,n=0;n<e-1;++n)o[n]=2*t[n+1]-s[n+1];return[s,o]}function Zt(t,n){this._context=t,this._t=n}function tn(t,n){if((s=t.length)>1)for(var i,e,s,o=1,h=t[n[0]],_=h.length;o<s;++o)for(e=h,h=t[n[o]],i=0;i<_;++i)h[i][1]+=h[i][0]=isNaN(e[i][1])?e[i][0]:e[i][1]}function nn(t){for(var n=t.length,i=new Array(n);--n>=0;)i[n]=n;return i}function en(t,n){return t[n]}function sn(t){const n=[];return n.key=t,n}function on(t){var n=t.map(hn);return nn(t).sort((function(t,i){return n[t]-n[i]}))}function hn(t){for(var n,i=-1,e=0,s=t.length,o=-1/0;++i<s;)(n=+t[i][1])>o&&(o=n,e=i);return e}function _n(t){var n=t.map(rn);return nn(t).sort((function(t,i){return n[t]-n[i]}))}function rn(t){for(var n,i=0,e=-1,s=t.length;++e<s;)(n=+t[e][1])&&(i+=n);return i}Vt.prototype={areaStart:bt,areaEnd:bt,lineStart:function(){this._point=0},lineEnd:function(){this._point&&this._context.closePath()},point:function(t,n){t=+t,n=+n,this._point?this._context.lineTo(t,n):(this._point=1,this._context.moveTo(t,n))}},Gt.prototype={areaStart:function(){this._line=0},areaEnd:function(){this._line=NaN},lineStart:function(){this._x0=this._x1=this._y0=this._y1=this._t0=NaN,this._point=0},lineEnd:function(){switch(this._point){case 2:this._context.lineTo(this._x1,this._y1);break;case 3:$t(this,this._t0,Ht(this,this._t0))}(this._line||0!==this._line&&1===this._point)&&this._context.closePath(),this._line=1-this._line},point:function(t,n){var i=NaN;if(n=+n,(t=+t)!==this._x1||n!==this._y1){switch(this._point){case 0:this._point=1,this._line?this._context.lineTo(t,n):this._context.moveTo(t,n);break;case 1:this._point=2;break;case 2:this._point=3,$t(this,Ht(this,i=Ft(this,t,n)),i);break;default:$t(this,this._t0,i=Ft(this,t,n))}this._x0=this._x1,this._x1=t,this._y0=this._y1,this._y1=n,this._t0=i}}},(Jt.prototype=Object.create(Gt.prototype)).point=function(t,n){Gt.prototype.point.call(this,n,t)},Kt.prototype={moveTo:function(t,n){this._context.moveTo(n,t)},closePath:function(){this._context.closePath()},lineTo:function(t,n){this._context.lineTo(n,t)},bezierCurveTo:function(t,n,i,e,s,o){this._context.bezierCurveTo(n,t,e,i,o,s)}},Qt.prototype={areaStart:function(){this._line=0},areaEnd:function(){this._line=NaN},lineStart:function(){this._x=[],this._y=[]},lineEnd:function(){var t=this._x,n=this._y,i=t.length;if(i)if(this._line?this._context.lineTo(t[0],n[0]):this._context.moveTo(t[0],n[0]),2===i)this._context.lineTo(t[1],n[1]);else for(var e=Ut(t),s=Ut(n),o=0,h=1;h<i;++o,++h)this._context.bezierCurveTo(e[0][o],s[0][o],e[1][o],s[1][o],t[h],n[h]);(this._line||0!==this._line&&1===i)&&this._context.closePath(),this._line=1-this._line,this._x=this._y=null},point:function(t,n){this._x.push(+t),this._y.push(+n)}},Zt.prototype={areaStart:function(){this._line=0},areaEnd:function(){this._line=NaN},lineStart:function(){this._x=this._y=NaN,this._point=0},lineEnd:function(){0<this._t&&this._t<1&&2===this._point&&this._context.lineTo(this._x,this._y),(this._line||0!==this._line&&1===this._point)&&this._context.closePath(),this._line>=0&&(this._t=1-this._t,this._line=1-this._line)},point:function(t,n){switch(t=+t,n=+n,this._point){case 0:this._point=1,this._line?this._context.lineTo(t,n):this._context.moveTo(t,n);break;case 1:this._point=2;default:if(this._t<=0)this._context.lineTo(this._x,n),this._context.lineTo(t,n);else{var i=this._x*(1-this._t)+t*this._t;this._context.lineTo(i,this._y),this._context.lineTo(i,n)}}this._x=t,this._y=n}},t.arc=function(){var t=v,n=d,h=i(0),k=null,N=T,S=g,E=m,A=null,P=p(M);function M(){var i,p,v=+t.apply(this,arguments),d=+n.apply(this,arguments),T=N.apply(this,arguments)-u,g=S.apply(this,arguments)-u,m=e(g-T),M=g>T;if(A||(A=i=P()),d<v&&(p=d,d=v,v=p),d>l)if(m>f-l)A.moveTo(d*o(T),d*r(T)),A.arc(0,0,d,T,g,!M),v>l&&(A.moveTo(v*o(g),v*r(g)),A.arc(0,0,v,g,T,M));else{var C,R,O=T,z=g,X=T,Y=g,q=m,B=m,D=E.apply(this,arguments)/2,I=D>l&&(k?+k.apply(this,arguments):a(v*v+d*d)),j=_(e(d-v)/2,+h.apply(this,arguments)),L=j,V=j;if(I>l){var W=x(I/v*r(D)),F=x(I/d*r(D));(q-=2*W)>l?(X+=W*=M?1:-1,Y-=W):(q=0,X=Y=(T+g)/2),(B-=2*F)>l?(O+=F*=M?1:-1,z-=F):(B=0,O=z=(T+g)/2)}var H=d*o(O),$=d*r(O),G=v*o(Y),J=v*r(Y);if(j>l){var K,Q=d*o(z),U=d*r(z),Z=v*o(X),tt=v*r(X);if(m<c)if(K=b(H,$,Z,tt,Q,U,G,J)){var nt=H-K[0],it=$-K[1],et=Q-K[0],st=U-K[1],ot=1/r(y((nt*et+it*st)/(a(nt*nt+it*it)*a(et*et+st*st)))/2),ht=a(K[0]*K[0]+K[1]*K[1]);L=_(j,(v-ht)/(ot-1)),V=_(j,(d-ht)/(ot+1))}else L=V=0}B>l?V>l?(C=w(Z,tt,H,$,d,V,M),R=w(Q,U,G,J,d,V,M),A.moveTo(C.cx+C.x01,C.cy+C.y01),V<j?A.arc(C.cx,C.cy,V,s(C.y01,C.x01),s(R.y01,R.x01),!M):(A.arc(C.cx,C.cy,V,s(C.y01,C.x01),s(C.y11,C.x11),!M),A.arc(0,0,d,s(C.cy+C.y11,C.cx+C.x11),s(R.cy+R.y11,R.cx+R.x11),!M),A.arc(R.cx,R.cy,V,s(R.y11,R.x11),s(R.y01,R.x01),!M))):(A.moveTo(H,$),A.arc(0,0,d,O,z,!M)):A.moveTo(H,$),v>l&&q>l?L>l?(C=w(G,J,Q,U,v,-L,M),R=w(H,$,Z,tt,v,-L,M),A.lineTo(C.cx+C.x01,C.cy+C.y01),L<j?A.arc(C.cx,C.cy,L,s(C.y01,C.x01),s(R.y01,R.x01),!M):(A.arc(C.cx,C.cy,L,s(C.y01,C.x01),s(C.y11,C.x11),!M),A.arc(0,0,v,s(C.cy+C.y11,C.cx+C.x11),s(R.cy+R.y11,R.cx+R.x11),M),A.arc(R.cx,R.cy,L,s(R.y11,R.x11),s(R.y01,R.x01),!M))):A.arc(0,0,v,Y,X,M):A.lineTo(G,J)}else A.moveTo(0,0);if(A.closePath(),i)return A=null,i+""||null}return M.centroid=function(){var i=(+t.apply(this,arguments)+ +n.apply(this,arguments))/2,e=(+N.apply(this,arguments)+ +S.apply(this,arguments))/2-c/2;return[o(e)*i,r(e)*i]},M.innerRadius=function(n){return arguments.length?(t="function"==typeof n?n:i(+n),M):t},M.outerRadius=function(t){return arguments.length?(n="function"==typeof t?t:i(+t),M):n},M.cornerRadius=function(t){return arguments.length?(h="function"==typeof t?t:i(+t),M):h},M.padRadius=function(t){return arguments.length?(k=null==t?null:"function"==typeof t?t:i(+t),M):k},M.startAngle=function(t){return arguments.length?(N="function"==typeof t?t:i(+t),M):N},M.endAngle=function(t){return arguments.length?(S="function"==typeof t?t:i(+t),M):S},M.padAngle=function(t){return arguments.length?(E="function"==typeof t?t:i(+t),M):E},M.context=function(t){return arguments.length?(A=null==t?null:t,M):A},M},t.area=C,t.areaRadial=D,t.curveBasis=function(t){return new kt(t)},t.curveBasisClosed=function(t){return new Nt(t)},t.curveBasisOpen=function(t){return new St(t)},t.curveBumpX=V,t.curveBumpY=W,t.curveBundle=At,t.curveCardinal=Ct,t.curveCardinalClosed=Ot,t.curveCardinalOpen=Xt,t.curveCatmullRom=Bt,t.curveCatmullRomClosed=It,t.curveCatmullRomOpen=Lt,t.curveLinear=E,t.curveLinearClosed=function(t){return new Vt(t)},t.curveMonotoneX=function(t){return new Gt(t)},t.curveMonotoneY=function(t){return new Jt(t)},t.curveNatural=function(t){return new Qt(t)},t.curveStep=function(t){return new Zt(t,.5)},t.curveStepAfter=function(t){return new Zt(t,1)},t.curveStepBefore=function(t){return new Zt(t,0)},t.line=M,t.lineRadial=B,t.link=G,t.linkHorizontal=function(){return G(V)},t.linkRadial=function(){const t=G(F);return t.angle=t.x,delete t.x,t.radius=t.y,delete t.y,t},t.linkVertical=function(){return G(W)},t.pie=function(){var t=O,n=R,e=null,s=i(0),o=i(f),h=i(0);function _(i){var _,r,a,l,c,u=(i=N(i)).length,y=0,x=new Array(u),p=new Array(u),v=+s.apply(this,arguments),d=Math.min(f,Math.max(-f,o.apply(this,arguments)-v)),T=Math.min(Math.abs(d)/u,h.apply(this,arguments)),g=T*(d<0?-1:1);for(_=0;_<u;++_)(c=p[x[_]=_]=+t(i[_],_,i))>0&&(y+=c);for(null!=n?x.sort((function(t,i){return n(p[t],p[i])})):null!=e&&x.sort((function(t,n){return e(i[t],i[n])})),_=0,a=y?(d-u*g)/y:0;_<u;++_,v=l)r=x[_],l=v+((c=p[r])>0?c*a:0)+g,p[r]={data:i[r],index:_,value:c,startAngle:v,endAngle:l,padAngle:T};return p}return _.value=function(n){return arguments.length?(t="function"==typeof n?n:i(+n),_):t},_.sortValues=function(t){return arguments.length?(n=t,e=null,_):n},_.sort=function(t){return arguments.length?(e=t,n=null,_):e},_.startAngle=function(t){return arguments.length?(s="function"==typeof t?t:i(+t),_):s},_.endAngle=function(t){return arguments.length?(o="function"==typeof t?t:i(+t),_):o},_.padAngle=function(t){return arguments.length?(h="function"==typeof t?t:i(+t),_):h},_},t.pointRadial=I,t.radialArea=D,t.radialLine=B,t.stack=function(){var t=i([]),n=nn,e=tn,s=en;function o(i){var o,h,_=Array.from(t.apply(this,arguments),sn),r=_.length,a=-1;for(const t of i)for(o=0,++a;o<r;++o)(_[o][a]=[0,+s(t,_[o].key,a,i)]).data=t;for(o=0,h=N(n(_));o<r;++o)_[h[o]].index=o;return e(_,h),_}return o.keys=function(n){return arguments.length?(t="function"==typeof n?n:i(Array.from(n)),o):t},o.value=function(t){return arguments.length?(s="function"==typeof t?t:i(+t),o):s},o.order=function(t){return arguments.length?(n=null==t?nn:"function"==typeof t?t:i(Array.from(t)),o):n},o.offset=function(t){return arguments.length?(e=null==t?tn:t,o):e},o},t.stackOffsetDiverging=function(t,n){if((_=t.length)>0)for(var i,e,s,o,h,_,r=0,a=t[n[0]].length;r<a;++r)for(o=h=0,i=0;i<_;++i)(s=(e=t[n[i]][r])[1]-e[0])>0?(e[0]=o,e[1]=o+=s):s<0?(e[1]=h,e[0]=h+=s):(e[0]=0,e[1]=s)},t.stackOffsetExpand=function(t,n){if((e=t.length)>0){for(var i,e,s,o=0,h=t[0].length;o<h;++o){for(s=i=0;i<e;++i)s+=t[i][o][1]||0;if(s)for(i=0;i<e;++i)t[i][o][1]/=s}tn(t,n)}},t.stackOffsetNone=tn,t.stackOffsetSilhouette=function(t,n){if((i=t.length)>0){for(var i,e=0,s=t[n[0]],o=s.length;e<o;++e){for(var h=0,_=0;h<i;++h)_+=t[h][e][1]||0;s[e][1]+=s[e][0]=-_/2}tn(t,n)}},t.stackOffsetWiggle=function(t,n){if((s=t.length)>0&&(e=(i=t[n[0]]).length)>0){for(var i,e,s,o=0,h=1;h<e;++h){for(var _=0,r=0,a=0;_<s;++_){for(var l=t[n[_]],c=l[h][1]||0,u=(c-(l[h-1][1]||0))/2,f=0;f<_;++f){var y=t[n[f]];u+=(y[h][1]||0)-(y[h-1][1]||0)}r+=c,a+=u*c}i[h-1][1]+=i[h-1][0]=o,r&&(o-=a/r)}i[h-1][1]+=i[h-1][0]=o,tn(t,n)}},t.stackOrderAppearance=on,t.stackOrderAscending=_n,t.stackOrderDescending=function(t){return _n(t).reverse()},t.stackOrderInsideOut=function(t){var n,i,e=t.length,s=t.map(rn),o=on(t),h=0,_=0,r=[],a=[];for(n=0;n<e;++n)i=o[n],h<_?(h+=s[i],r.push(i)):(_+=s[i],a.push(i));return a.reverse().concat(r)},t.stackOrderNone=nn,t.stackOrderReverse=function(t){return nn(t).reverse()},t.symbol=function(t,n){let e=null,s=p(o);function o(){let i;if(e||(e=i=s()),t.apply(this,arguments).draw(e,+n.apply(this,arguments)),i)return e=null,i+""||null}return t="function"==typeof t?t:i(t||Q),n="function"==typeof n?n:i(void 0===n?64:+n),o.type=function(n){return arguments.length?(t="function"==typeof n?n:i(n),o):t},o.size=function(t){return arguments.length?(n="function"==typeof t?t:i(+t),o):n},o.context=function(t){return arguments.length?(e=null==t?null:t,o):e},o},t.symbolAsterisk=K,t.symbolCircle=Q,t.symbolCross=U,t.symbolDiamond=nt,t.symbolDiamond2=it,t.symbolPlus=et,t.symbolSquare=st,t.symbolSquare2=ot,t.symbolStar=at,t.symbolTimes=Tt,t.symbolTriangle=ct,t.symbolTriangle2=ft,t.symbolWye=dt,t.symbolX=Tt,t.symbols=gt,t.symbolsFill=gt,t.symbolsStroke=mt}));