refactor(demo): split monolithic HTML into component files

Split demo/index.html from 6890 lines into 176-line shell + 22 files:

CSS (9 files in demo/styles/):
variables, layout, components, video, timeline,
inspect, explain, state, animations

JS (13 files in demo/js/):
state, cache, helpers, api, render, state-machine,
analysis, explain, inspect, timeline, ui, real-backend, init

Uses window.ISR namespace for cross-module communication.
No logic changes — purely structural reorganization.

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

demo/js/analysis.js

@@ -0,0 +1,275 @@
+window.ISR = window.ISR || {};
+
+/* ================================================================
+ *  TASK 8: Analysis State Entry
+ * ================================================================ */
+
+function enterAnalysisState() {
+  ISR.setState('analysis');
+
+  // Reset playhead to 0
+  ISR.STATE.playheadFrame = 0;
+  ISR.STATE.isPlaying = false;
+  ISR.lastFrameTime = 0;
+  ISR.updateFrameCounter();
+  ISR.updatePlayheadPosition();
+  ISR.updateTimeDisplay();
+  document.getElementById('playPauseBtn').innerHTML = '▶';
+
+  // Render full waveform
+  const waveformCanvas = document.getElementById('waveformCanvas');
+  if (waveformCanvas) ISR.renderWaveform(waveformCanvas, ISR.MOCK_DENSITY);
+
+  // Show full track list with interaction wiring
+  renderTrackListFull(ISR.MOCK_TRACKS, ISR.STATE.trackFilter);
+
+  // Render metrics panel
+  renderMetricsPanel();
+
+  ISR.showToast('Processing complete. 20 tracks detected across 1847 frames. Use timeline to review.', 6000);
+}
+
+function appendTrackCard(track, container) {
+  const card = document.createElement('div');
+  card.className = 'track-card';
+  card.dataset.trackId = track.id;
+  card.style.opacity = '0';
+  card.style.transform = 'translateY(8px)';
+  card.style.transition = 'opacity 0.3s ease, transform 0.3s ease';
+  card.innerHTML = `
+    <div class="track-dot" style="background: ${track.color}; box-shadow: 0 0 4px ${track.color};"></div>
+    <div class="track-info">
+      <div class="track-label">${track.label}</div>
+      <div class="track-meta">
+        <span>${track.speed.toFixed(1)} kph</span>
+        <span>${track.depth.toFixed(1)}m</span>
+        <span>${track.id}</span>
+      </div>
+    </div>
+    <span class="track-conf">${track.confidence.toFixed(2)}</span>
+  `;
+  wireTrackCard(card, track);
+  container.appendChild(card);
+
+  // Trigger animation
+  requestAnimationFrame(() => {
+    card.style.opacity = '1';
+    card.style.transform = 'translateY(0)';
+  });
+}
+
+function wireTrackCard(card, track) {
+  card.addEventListener('click', () => {
+    if (ISR.STATE.current === 'analysis' || ISR.STATE.current === 'playing') {
+      ISR.enterInspectState(track.id);
+    } else if (ISR.STATE.current === 'inspect') {
+      ISR.enterInspectState(track.id);
+    } else {
+      ISR.STATE.selectedTrackId = ISR.STATE.selectedTrackId === track.id ? null : track.id;
+      document.querySelectorAll('.track-card').forEach(c => {
+        c.classList.toggle('selected', c.dataset.trackId === ISR.STATE.selectedTrackId);
+      });
+    }
+  });
+
+  // Hover sync: card -> canvas (use shared helper)
+  card.addEventListener('mouseenter', () => ISR._updateTrackHighlight(track.id));
+  card.addEventListener('mouseleave', () => ISR._updateTrackHighlight(null));
+}
+
+function renderTrackListFull(tracks, filter) {
+  const panel = document.getElementById('tracksPanel');
+  panel.innerHTML = '';
+
+  const filtered = filter ? tracks.filter(t => t.type === filter) : tracks;
+
+  if (filtered.length === 0) {
+    panel.innerHTML = '<div style="color: var(--text-tertiary); font-size: 10px; text-align: center; padding: 20px;">No tracks match the current filter.</div>';
+    return;
+  }
+
+  // If there's a filter, add a clear filter button
+  if (filter) {
+    const clearBtn = document.createElement('button');
+    clearBtn.className = 'inspect-back-btn';
+    clearBtn.style.marginBottom = '8px';
+    clearBtn.style.width = '100%';
+    clearBtn.textContent = 'CLEAR FILTER — SHOW ALL';
+    clearBtn.addEventListener('click', () => {
+      ISR.STATE.trackFilter = null;
+      renderTrackListFull(ISR.MOCK_TRACKS, null);
+    });
+    panel.appendChild(clearBtn);
+  }
+
+  for (const t of filtered) {
+    const card = document.createElement('div');
+    card.className = 'track-card' + (ISR.STATE.selectedTrackId === t.id ? ' selected' : '');
+    card.dataset.trackId = t.id;
+    card.innerHTML = `
+      <div class="track-dot" style="background: ${t.color}; box-shadow: 0 0 4px ${t.color};"></div>
+      <div class="track-info">
+        <div class="track-label">${t.label}</div>
+        <div class="track-meta">
+          <span>${t.speed.toFixed(1)} kph</span>
+          <span>${t.depth.toFixed(1)}m</span>
+          <span>${t.id}</span>
+        </div>
+      </div>
+      <span class="track-conf">${t.confidence.toFixed(2)}</span>
+    `;
+    wireTrackCard(card, t);
+    panel.appendChild(card);
+  }
+}
+
+function renderMetricsPanel() {
+  return; // Replaced by explainability graph
+  const panel = document.getElementById('metricsPanel');
+  if (!panel) return;
+
+  const personCount = ISR.MOCK_TRACKS.filter(t => t.type === 'person').length;
+  const vehicleCount = ISR.MOCK_TRACKS.filter(t => t.type === 'vehicle').length;
+  const droneCount = ISR.MOCK_TRACKS.filter(t => t.type === 'drone').length;
+  const stationaryCount = ISR.MOCK_TRACKS.filter(t => t.type === 'stationary').length;
+  const totalCount = ISR.MOCK_TRACKS.length;
+  const avgConf = (ISR.MOCK_TRACKS.reduce((s, t) => s + t.confidence, 0) / totalCount).toFixed(2);
+
+  const breakdown = [
+    { label: 'Person', count: personCount, color: ISR.TYPE_COLORS.person },
+    { label: 'Vehicle', count: vehicleCount, color: ISR.TYPE_COLORS.vehicle },
+    { label: 'Drone', count: droneCount, color: ISR.TYPE_COLORS.drone },
+    { label: 'Stationary', count: stationaryCount, color: ISR.TYPE_COLORS.stationary },
+  ];
+  const maxCount = Math.max(...breakdown.map(b => b.count));
+
+  panel.innerHTML = `
+    <div class="metric-hero">
+      <div class="metric-big-number">${totalCount}</div>
+      <div class="label">TOTAL DETECTIONS</div>
+    </div>
+    <div class="metric-breakdown">
+      ${breakdown.map(b => `
+        <div class="metric-bar-row">
+          <span class="metric-bar-label">${b.label}</span>
+          <div class="metric-bar-track">
+            <div class="metric-bar-fill" style="width: ${maxCount > 0 ? (b.count / maxCount) * 100 : 0}%; background: ${b.color};"></div>
+          </div>
+          <span class="metric-bar-count" style="color: ${b.color};">${b.count}</span>
+        </div>
+      `).join('')}
+    </div>
+    <div class="metric-stats">
+      <div class="metric-stat-row"><span class="metric-stat-label">AVG CONFIDENCE</span><span class="metric-stat-value">${avgConf}</span></div>
+      <div class="metric-stat-row"><span class="metric-stat-label">PROCESSING FPS</span><span class="metric-stat-value">48</span></div>
+      <div class="metric-stat-row"><span class="metric-stat-label">GPU UTILIZATION</span><span class="metric-stat-value">94%</span></div>
+      <div class="metric-stat-row"><span class="metric-stat-label">TOTAL FRAMES</span><span class="metric-stat-value">${ISR.STATE.totalFrames}</span></div>
+      <div class="metric-stat-row"><span class="metric-stat-label">PROCESS TIME</span><span class="metric-stat-value">38.5s</span></div>
+    </div>
+  `;
+}
+
+/* ================================================================
+ *  TASK 9: Mission Report
+ * ================================================================ */
+
+function renderMissionReport() {
+  const panel = document.getElementById('tracksPanel');
+  panel.innerHTML = '';
+
+  const report = document.createElement('div');
+  report.className = 'mission-report';
+
+  const highPriorityEvents = ISR.MOCK_EVENTS.filter(e => e.priority === 'high');
+  const personCount = ISR.MOCK_TRACKS.filter(t => t.type === 'person').length;
+  const vehicleCount = ISR.MOCK_TRACKS.filter(t => t.type === 'vehicle').length;
+  const droneCount = ISR.MOCK_TRACKS.filter(t => t.type === 'drone').length;
+  const stationaryCount = ISR.MOCK_TRACKS.filter(t => t.type === 'stationary').length;
+
+  report.innerHTML = `
+    <div class="report-header">MISSION REPORT — ISR-2026-03-20</div>
+
+    <div class="report-section">
+      <div class="report-section-title">SUMMARY STATISTICS</div>
+      <div class="report-stat"><span class="report-stat-label">Duration</span><span class="report-stat-value">61.6s (1847 frames)</span></div>
+      <div class="report-stat"><span class="report-stat-label">Frame Rate</span><span class="report-stat-value">30 fps</span></div>
+      <div class="report-stat"><span class="report-stat-label">Total Tracks</span><span class="report-stat-value">${ISR.MOCK_TRACKS.length}</span></div>
+      <div class="report-stat"><span class="report-stat-label">Persons</span><span class="report-stat-value">${personCount}</span></div>
+      <div class="report-stat"><span class="report-stat-label">Vehicles</span><span class="report-stat-value">${vehicleCount}</span></div>
+      <div class="report-stat"><span class="report-stat-label">Drones</span><span class="report-stat-value" style="color: var(--danger);">${droneCount}</span></div>
+      <div class="report-stat"><span class="report-stat-label">Stationary</span><span class="report-stat-value">${stationaryCount}</span></div>
+      <div class="report-stat"><span class="report-stat-label">High-Priority Alerts</span><span class="report-stat-value" style="color: var(--danger);">${highPriorityEvents.length}</span></div>
+    </div>
+
+    <div class="report-section">
+      <div class="report-section-title">THREAT ASSESSMENT</div>
+      ${highPriorityEvents.map(evt => `
+        <div class="report-threat">
+          <span class="report-threat-time">${evt.time}</span>
+          <span class="report-threat-label">${evt.label} — ${evt.description}</span>
+        </div>
+      `).join('')}
+    </div>
+
+    <div class="report-section">
+      <div class="report-section-title">TACTICAL RECOMMENDATIONS</div>
+      <div class="report-rec">Deploy counter-UAS measures for aerial contacts D-001 and D-002. Erratic flight patterns suggest reconnaissance activity.</div>
+      <div class="report-rec">Establish speed enforcement at western approach. Vehicle Delta exceeded restricted zone speed limit by 3.5 kph.</div>
+      <div class="report-rec">Monitor crowd formation at grid 4-C. Five persons converging may indicate planned gathering.</div>
+      <div class="report-rec">Reinforce perimeter surveillance at sector where Drone Bravo approached restricted airspace.</div>
+      <div class="report-rec">Increase sensor coverage at FOV edges — two tracks lost due to exit from field of view.</div>
+    </div>
+  `;
+
+  // Back to tracks button
+  const backBtn = document.createElement('button');
+  backBtn.className = 'inspect-back-btn';
+  backBtn.style.marginTop = '8px';
+  backBtn.style.width = '100%';
+  backBtn.textContent = '\u2190 Back to Tracks';
+  backBtn.addEventListener('click', () => {
+    renderTrackListFull(ISR.MOCK_TRACKS, ISR.STATE.trackFilter);
+  });
+
+  panel.appendChild(report);
+  panel.appendChild(backBtn);
+}
+
+/* ================================================================
+ *  TASK 9: Command Bar Actions
+ * ================================================================ */
+
+function executeAction(action) {
+  if (action === 'filter-drones') {
+    ISR.STATE.trackFilter = 'drone';
+    renderTrackListFull(ISR.MOCK_TRACKS, 'drone');
+    // Highlight drone events on timeline
+    document.querySelectorAll('.event-marker').forEach(m => {
+      m.style.opacity = '0.3';
+    });
+    ISR.MOCK_EVENTS.forEach((evt, i) => {
+      if (evt.type === 'alert' || evt.label.toLowerCase().includes('drone')) {
+        const markers = document.querySelectorAll('.event-marker');
+        if (markers[i]) {
+          markers[i].style.opacity = '1';
+          markers[i].style.transform = 'translate(-50%, -50%) scale(1.4)';
+        }
+      }
+    });
+  } else if (action === 'show-report') {
+    renderMissionReport();
+    ISR.switchDrawerTab('tracks');
+  }
+}
+
+// ── Export to namespace ─────────────────────────────────────────
+
+Object.assign(window.ISR, {
+  enterAnalysisState,
+  appendTrackCard,
+  wireTrackCard,
+  renderTrackListFull,
+  renderMetricsPanel,
+  renderMissionReport,
+  executeAction,
+});

demo/js/api.js

@@ -0,0 +1,185 @@
+window.ISR = window.ISR || {};
+
+// ── API Base URL ──────────────────────────────────────────────────
+// Set to your HuggingFace Space URL for GPU access, or '' for same-origin
+const API_BASE = 'https://biaslab2025-isr.hf.space';
+
+// ── Async Data Functions (real backend API) ───────────────────────
+
+async function startDetection(videoFile, config) {
+  const form = new FormData();
+  form.append('video', videoFile);
+  form.append('mode', config.mode);
+  if (config.queries) form.append('queries', config.queries);
+  form.append('detector', config.detector);
+  form.append('segmenter', config.segmenter);
+  form.append('enable_depth', config.enableDepth ? 'true' : 'false');
+  if (config.mission) form.append('mission', config.mission);
+  const res = await fetch(`${API_BASE}/detect/async`, { method: 'POST', body: form });
+  if (!res.ok) throw new Error(`Detection failed: ${res.status}`);
+  return res.json();
+}
+
+async function pollStatus(jobId) {
+  const url = ISR.STATE._statusUrl || `${API_BASE}/detect/status/${jobId}`;
+  const res = await fetch(url, { cache: 'no-store' });
+  if (!res.ok) throw new Error(`Status poll failed: ${res.status}`);
+  return res.json();
+}
+
+async function fetchTracks(jobId, frameIdx) {
+  const cached = ISR.getCachedTracks(frameIdx);
+  if (cached) return cached;
+  try {
+    const res = await fetch(`${API_BASE}/detect/tracks/${jobId}/${frameIdx}`);
+    if (!res.ok) {
+      if (res.status === 404 && ISR.STATE._analysisStartTime && Date.now() - ISR.STATE._analysisStartTime > 3600000) {
+        ISR.showToast('Job expired — results are no longer available');
+        ISR.STATE.jobId = null;
+      }
+      return [];
+    }
+    const data = await res.json();
+    ISR.cacheTrackData(frameIdx, data);
+    return data;
+  } catch { return []; }
+}
+
+async function fetchTimelineSummary(jobId) {
+  const res = await fetch(`${API_BASE}/detect/tracks/${jobId}/summary`);
+  if (!res.ok) throw new Error('Summary fetch failed');
+  return res.json();
+}
+
+async function fetchFrame(jobId, frameIdx, trackId) {
+  if (trackId === undefined) trackId = null;
+  try {
+    let url = `${API_BASE}/inspect/frame/${jobId}/${frameIdx}`;
+    if (trackId) url += `?track_id=${encodeURIComponent(trackId)}&padding=0.20`;
+    const res = await fetch(url);
+    if (!res.ok) return null;
+    return res.blob();
+  } catch { return null; }
+}
+
+async function fetchMask(jobId, frameIdx, trackId) {
+  try {
+  const url = `${API_BASE}/inspect/mask/${jobId}/${frameIdx}/${encodeURIComponent(trackId)}`;
+  const res = await fetch(url);
+  if (res.status === 404) {
+    // No pre-computed mask — generate one on-demand via SAM2
+    try {
+      const gen = await fetch(`${API_BASE}/inspect/generate-mask/${jobId}/${frameIdx}/${encodeURIComponent(trackId)}`, {
+        method: 'POST', headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ sam2_size: 'large' })
+      });
+      if (!gen.ok) return null;
+      return await gen.json();
+    } catch { return null; }
+  }
+  if (!res.ok) return null;
+  return await res.json();
+  } catch { return null; }
+}
+
+async function fetchDepth(jobId, frameIdx, trackId) {
+  if (trackId === undefined) trackId = null;
+  try {
+  let url = `${API_BASE}/inspect/depth/${jobId}/${frameIdx}?format=raw`;
+  if (trackId) url += `&track_id=${encodeURIComponent(trackId)}`;
+  const res = await fetch(url);
+  if (!res.ok) return null;
+
+  const contentType = res.headers.get('content-type') || '';
+  if (contentType.includes('application/octet-stream')) {
+    // Binary float32 format with metadata in headers
+    const w = parseInt(res.headers.get('X-Depth-Width'), 10);
+    const h = parseInt(res.headers.get('X-Depth-Height'), 10);
+    const minD = parseFloat(res.headers.get('X-Depth-Min'));
+    const maxD = parseFloat(res.headers.get('X-Depth-Max'));
+    const buf = await res.arrayBuffer();
+    const data = new Float32Array(buf);
+    if (isNaN(w) || isNaN(h)) {
+      // CORS stripped headers — fall back to JSON format
+      return await _fetchDepthJson(jobId, frameIdx, trackId);
+    }
+    return { width: w, height: h, min: isNaN(minD) ? 0 : minD, max: isNaN(maxD) ? 1 : maxD, data };
+  } else {
+    // JSON + base64 format
+    const json = await res.json();
+    return ISR._decodeDepthJson(json);
+  }
+  } catch { return null; }
+}
+
+async function _fetchDepthJson(jobId, frameIdx, trackId) {
+  let url = `${API_BASE}/inspect/depth/${jobId}/${frameIdx}?format=json`;
+  if (trackId) url += `&track_id=${encodeURIComponent(trackId)}`;
+  const res = await fetch(url);
+  if (!res.ok) return null;
+  return ISR._decodeDepthJson(await res.json());
+}
+
+async function fetchPointCloud(jobId, frameIdx, trackId) {
+  try {
+    const res = await fetch(`${API_BASE}/inspect/pointcloud/${jobId}/${frameIdx}`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ track_id: String(trackId), max_points: 50000, render_mode: 'mesh' })
+    });
+    if (!res.ok) return null;
+    return res.json();
+  } catch { return null; }
+}
+
+async function askAI(question, trackContext) {
+  if (trackContext === undefined) trackContext = null;
+  const body = {
+    message: question,
+    mission: ISR.STATE.mission || '',
+    track_context: trackContext || null,
+    history: (ISR.STATE.chatHistory && ISR.STATE.chatHistory.length > 0) ? ISR.STATE.chatHistory.slice(-20) : []
+  };
+  try {
+    const res = await fetch(`${API_BASE}/chat`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(body)
+    });
+    if (!res.ok) throw new Error();
+    const data = await res.json();
+    ISR.STATE.chatHistory.push({ role: 'user', content: question });
+    ISR.STATE.chatHistory.push({ role: 'assistant', content: data.response });
+    return data;
+  } catch {
+    const fallback = ISR.matchAICommand(question);
+    return { response: fallback.text, action: fallback.action };
+  }
+}
+
+async function cancelJob(jobId) {
+  try { await fetch(`${API_BASE}/detect/job/${jobId}`, { method: 'DELETE' }); } catch {}
+}
+
+function resolveUrl(path) {
+  // If the path is already absolute, use it; otherwise prepend API_BASE
+  if (!path) return null;
+  return path.startsWith('http') ? path : `${API_BASE}${path}`;
+}
+
+// ── Export to namespace ─────────────────────────────────────────
+
+Object.assign(window.ISR, {
+  API_BASE,
+  startDetection,
+  pollStatus,
+  fetchTracks,
+  fetchTimelineSummary,
+  fetchFrame,
+  fetchMask,
+  fetchDepth,
+  fetchPointCloud,
+  askAI,
+  cancelJob,
+  resolveUrl,
+});

demo/js/cache.js

@@ -0,0 +1,74 @@
+window.ISR = window.ISR || {};
+
+// ── LRU Track Cache ──────────────────────────────────────────────
+
+const TRACK_CACHE = new Map();
+const TRACK_CACHE_MAX = 100;
+function cacheTrackData(frameIdx, data) {
+  if (TRACK_CACHE.size >= TRACK_CACHE_MAX) {
+    const oldest = TRACK_CACHE.keys().next().value;
+    TRACK_CACHE.delete(oldest);
+  }
+  TRACK_CACHE.set(frameIdx, data);
+}
+function getCachedTracks(frameIdx) {
+  if (!TRACK_CACHE.has(frameIdx)) return null;
+  const data = TRACK_CACHE.get(frameIdx);
+  TRACK_CACHE.delete(frameIdx);
+  TRACK_CACHE.set(frameIdx, data); // promote to most-recent
+  return data;
+}
+function clearTrackCache() { TRACK_CACHE.clear(); }
+
+// ── Assessment Cache ───────────────────────────────────────────────
+// Carries GPT assessment data forward across frames per track_id
+
+const ASSESSMENT_CACHE = {}; // track_id → {satisfies, reason, mission_relevant, features, gpt_raw, assessment_status}
+
+function cacheAssessment(trackId, data) {
+  if (!trackId) return;
+  if (!ASSESSMENT_CACHE[trackId]) ASSESSMENT_CACHE[trackId] = {};
+  const c = ASSESSMENT_CACHE[trackId];
+  if (data.gpt_raw !== undefined) c.gpt_raw = data.gpt_raw;
+  if (data.satisfies !== undefined) c.satisfies = data.satisfies;
+  if (data.reason !== undefined) c.reason = data.reason;
+  if (data.mission_relevant !== undefined) c.mission_relevant = data.mission_relevant;
+  if (data.features !== undefined) c.features = data.features;
+  if (data.assessment_status !== undefined) c.assessment_status = data.assessment_status;
+}
+
+function applyAssessmentCache(track) {
+  const tid = track.track_id !== undefined ? track.track_id : track.id;
+  // Cache new data if present (matches frontend tracker.js Phase 1)
+  if (track.gpt_raw || track.assessment_status === 'ASSESSED') {
+    cacheAssessment(tid, track);
+  }
+  // Apply cached data if track is missing gpt_raw (matches frontend tracker.js Phase 2)
+  if (track.gpt_raw) return track; // Already has assessment data, skip
+  const cached = ASSESSMENT_CACHE[tid];
+  if (!cached) return track;
+  track.gpt_raw = cached.gpt_raw;
+  if (cached.satisfies !== undefined) track.satisfies = cached.satisfies ?? track.satisfies;
+  track.reason = cached.reason || track.reason;
+  if (cached.mission_relevant !== undefined) track.mission_relevant = cached.mission_relevant ?? track.mission_relevant;
+  track.assessment_status = cached.assessment_status || 'ASSESSED';
+  if (cached.features && Object.keys(cached.features).length > 0) track.features = cached.features;
+  return track;
+}
+
+function clearAssessmentCache() {
+  for (const k of Object.keys(ASSESSMENT_CACHE)) delete ASSESSMENT_CACHE[k];
+}
+
+// ── Export to namespace ─────────────────────────────────────────
+
+Object.assign(window.ISR, {
+  TRACK_CACHE,
+  ASSESSMENT_CACHE,
+  cacheTrackData,
+  getCachedTracks,
+  clearTrackCache,
+  cacheAssessment,
+  applyAssessmentCache,
+  clearAssessmentCache,
+});

demo/js/explain.js

@@ -0,0 +1,447 @@
+window.ISR = window.ISR || {};
+
+/* ================================================================
+ *  Explainability Graph — Multi-LLM Interpretability Tree
+ * ================================================================ */
+
+const EXPLAIN_COLORS = {
+  Structure: '#3b82f6', Function: '#06b6d4', Material: '#f59e0b',
+  Color: '#ef4444', Size: '#10b981', Type: '#8b5cf6',
+  Motion: '#ec4899', Context: '#64748b', Shape: '#f97316', Markings: '#a855f7',
+};
+const LIGHTEN_MAP = {
+  '#3b82f6':'#93c5fd','#06b6d4':'#a5f3fc','#f59e0b':'#fde68a',
+  '#ef4444':'#fca5a5','#10b981':'#6ee7b7','#8b5cf6':'#c4b5fd',
+  '#ec4899':'#f9a8d4','#64748b':'#94a3b8','#f97316':'#fdba74','#a855f7':'#d8b4fe',
+};
+
+let _explainAbort = null;
+const _explainCache = {};
+
+async function loadExplainability(jobId, trackId) {
+  const panel = document.getElementById('explainPanel');
+  if (!panel) return;
+
+  // Check cache
+  if (_explainCache[trackId]) {
+    renderExplainGraph(_explainCache[trackId], panel);
+    return;
+  }
+
+  // Abort previous
+  if (_explainAbort) _explainAbort.abort();
+  _explainAbort = new AbortController();
+
+  panel.innerHTML = '<div class="explain-loading"><div class="explain-spinner"></div><span>Analyzing with GPT-4o, Claude, and Gemini...</span></div>';
+
+  try {
+    const resp = await fetch(`${ISR.API_BASE}/inspect/explain/${jobId}/${encodeURIComponent(trackId)}`, { signal: _explainAbort.signal });
+    if (!resp.ok) {
+      const body = await resp.json().catch(() => ({}));
+      throw new Error(body.detail || `Explain failed: ${resp.status}`);
+    }
+    const data = await resp.json();
+    _explainCache[trackId] = data;
+    renderExplainGraph(data, panel);
+  } catch (err) {
+    if (err.name === 'AbortError') return;
+    panel.innerHTML = `<div class="explain-error">${ISR.escHtml(err.message)}</div>`;
+  }
+}
+
+function renderExplainGraph(data, container) {
+  container.innerHTML = '';
+  if (!data || !data.categories || data.categories.length === 0) {
+    container.innerHTML = '<div class="explain-error">No explanation data available</div>';
+    return;
+  }
+
+  var confPct = Math.round((data.confidence || 0) * 100);
+  var circumf = 113;
+  var dashOff = circumf - (circumf * confPct / 100);
+  var tree = document.createElement('div');
+  tree.className = 'ex-tree';
+
+  // Controls
+  var ctrlHtml = '<div class="ex-controls">'
+    + '<button class="ex-ctrl-btn active" data-action="tree">Tree</button>'
+    + '<button class="ex-ctrl-btn" data-action="graph">Graph</button>'
+    + '<button class="ex-ctrl-btn" data-action="expand">Expand All</button>'
+    + '<button class="ex-ctrl-btn" data-action="collapse">Collapse All</button>'
+    + '</div>';
+
+  // Root node
+  var rootHtml = '<div class="ex-node-root">'
+    + '<svg class="ex-conf-ring" viewBox="0 0 44 44">'
+    + '<circle class="ring-bg" cx="22" cy="22" r="18"/>'
+    + '<circle class="ring-fill" cx="22" cy="22" r="18" stroke-dasharray="' + circumf + '" stroke-dashoffset="' + dashOff + '"/>'
+    + '<text class="ring-text" x="22" y="22">' + confPct + '%</text>'
+    + '</svg>'
+    + '<div class="ex-root-info">'
+    + '<div class="ex-root-label">' + ISR.escHtml((data.object || 'OBJECT').toUpperCase()) + '</div>'
+    + (data.reasoning_summary ? '<div class="ex-root-summary">' + ISR.escHtml(data.reasoning_summary) + '</div>' : '')
+    + (data.satisfies === true ? '<span class="ex-root-badge match">MISSION MATCH</span>'
+      : data.satisfies === false ? '<span class="ex-root-badge no-match">NO MATCH</span>' : '')
+    + '</div></div>';
+
+  var llmHtml = '<div class="ex-llm-strip">'
+    + '<span class="ex-llm-tag active">GPT-4o</span>'
+    + '<span class="ex-llm-tag' + (data.consensus_bar && data.consensus_bar.validators_available >= 1 ? ' active' : '') + '">Claude</span>'
+    + '<span class="ex-llm-tag' + (data.consensus_bar && data.consensus_bar.validators_available >= 2 ? ' active' : '') + '">Gemini</span>'
+    + '</div>';
+
+  // Trunk line
+  var trunkHtml = '<div class="ex-trunk"></div>';
+
+  tree.innerHTML = ctrlHtml + rootHtml + llmHtml + trunkHtml;
+  container.appendChild(tree);
+
+  // Category nodes with branch lines
+  var cats = data.categories || [];
+  cats.forEach(function(cat, ci) {
+    var color = cat.color || EXPLAIN_COLORS[cat.name] || '#64748b';
+    var features = cat.features || [];
+    var catEl = document.createElement('div');
+    catEl.className = 'ex-node-cat open';
+    catEl.style.cssText = '--cat-color:' + color + ';animation-delay:' + (ci * 0.07) + 's';
+
+    var featHtml = '';
+    features.forEach(function(f, fi) {
+      var vals = f.validators || {};
+      var chips = '';
+      Object.keys(vals).forEach(function(name) {
+        var v = vals[name];
+        var cls = v.agree ? 'agree' : 'disagree';
+        var icon = v.agree ? '✓' : '✗';
+        chips += '<span class="ex-val-chip ' + cls + '">' + icon + ' ' + ISR.escHtml(name) + '</span>';
+      });
+
+      featHtml += '<div class="ex-node-feat" style="animation-delay:' + (fi * 0.05) + 's">'
+        + '<div class="ex-feat-branch" style="background:' + color + ';opacity:0.4"></div>'
+        + '<div class="ex-feat-name">' + ISR.escHtml(f.name) + '</div>'
+        + (f.reasoning ? '<div class="ex-feat-reasoning">' + ISR.escHtml(f.reasoning) + '</div>' : '')
+        + (chips ? '<div class="ex-feat-validators">' + chips + '</div>' : '')
+        + '</div>';
+    });
+
+    catEl.innerHTML = '<div class="ex-cat-head">'
+      + '<div class="ex-cat-dot"></div>'
+      + '<span class="ex-cat-name">' + ISR.escHtml(cat.name) + '</span>'
+      + '<span class="ex-cat-count">' + features.length + '</span>'
+      + '<svg class="ex-cat-chevron" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 4l4 4-4 4"/></svg>'
+      + '</div>'
+      + '<div class="ex-features-wrap"><div class="ex-features-inner">'
+      + featHtml
+      + '</div></div>';
+
+    catEl.querySelector('.ex-cat-head').addEventListener('click', function() {
+      catEl.classList.toggle('open');
+    });
+
+    tree.appendChild(catEl);
+  });
+
+  // Consensus bar
+  if (data.consensus_bar) {
+    var bar = data.consensus_bar;
+    var pct = bar.total_features > 0 ? (bar.agreed / bar.total_features) * 100 : 0;
+    var consEl = document.createElement('div');
+    consEl.className = 'ex-consensus';
+    consEl.innerHTML = '<div class="ex-cons-bar-bg"><div class="ex-cons-bar-fill" style="width:0%"></div></div>'
+      + '<div class="ex-cons-labels">'
+      + '<span class="agreed">' + bar.agreed + '/' + bar.total_features + ' features agreed</span>'
+      + '<span>' + bar.validators_available + '/2 validators</span>'
+      + '</div>';
+    tree.appendChild(consEl);
+    requestAnimationFrame(function() {
+      requestAnimationFrame(function() {
+        consEl.querySelector('.ex-cons-bar-fill').style.width = pct + '%';
+      });
+    });
+  }
+
+  // Expand/Collapse all controls
+  tree.querySelector('[data-action="expand"]').addEventListener('click', function() {
+    tree.querySelectorAll('.ex-node-cat').forEach(function(c) { c.classList.add('open'); });
+  });
+  tree.querySelector('[data-action="collapse"]').addEventListener('click', function() {
+    tree.querySelectorAll('.ex-node-cat').forEach(function(c) { c.classList.remove('open'); });
+  });
+
+  // View toggle: Tree vs Graph
+  var treeBtn = tree.querySelector('[data-action="tree"]');
+  var graphBtn = tree.querySelector('[data-action="graph"]');
+  var treeContent = tree.querySelectorAll('.ex-node-root, .ex-llm-strip, .ex-trunk, .ex-node-cat, .ex-consensus');
+  var graphContainer = null;
+
+  treeBtn.addEventListener('click', function() {
+    treeBtn.classList.add('active'); graphBtn.classList.remove('active');
+    treeContent.forEach(function(el) { el.style.display = ''; });
+    if (graphContainer) graphContainer.style.display = 'none';
+    tree.querySelector('[data-action="expand"]').style.display = '';
+    tree.querySelector('[data-action="collapse"]').style.display = '';
+  });
+
+  graphBtn.addEventListener('click', function() {
+    graphBtn.classList.add('active'); treeBtn.classList.remove('active');
+    treeContent.forEach(function(el) { el.style.display = 'none'; });
+    tree.querySelector('[data-action="expand"]').style.display = 'none';
+    tree.querySelector('[data-action="collapse"]').style.display = 'none';
+    if (!graphContainer) {
+      graphContainer = document.createElement('div');
+      graphContainer.className = 'ex-graph-wrap';
+      tree.appendChild(graphContainer);
+      renderGraphNodes(data, graphContainer);
+    }
+    graphContainer.style.display = '';
+  });
+}
+
+function renderGraphNodes(data, wrap) {
+  wrap.innerHTML = '';
+  var cats = data.categories || [];
+  var allFeatures = [];
+  cats.forEach(function(c) { allFeatures = allFeatures.concat(c.features || []); });
+  var totalLeaves = Math.max(allFeatures.length, 1);
+
+  var nodeW = 96, nodeH = 28, catNodeW = 84, catNodeH = 24, featNodeW = 78, featNodeH = 20;
+  var padX = 50, padTop = 36, padBot = 50;
+  var levelGap = 80;
+  var leafSpacing = Math.max(featNodeW + 14, 90);
+  var svgW = Math.max(wrap.clientWidth || 340, totalLeaves * leafSpacing + padX * 2);
+  var svgH = 3 * levelGap + padTop + padBot;
+
+  var ns = 'http://www.w3.org/2000/svg';
+  var svg = document.createElementNS(ns, 'svg');
+  svg.setAttribute('width', svgW);
+  svg.setAttribute('height', svgH);
+  svg.setAttribute('class', 'ex-graph-svg');
+  wrap.appendChild(svg);
+
+  // Defs: glow filter + gradient
+  var defs = document.createElementNS(ns, 'defs');
+  defs.innerHTML = '<filter id="gnGlow"><feGaussianBlur stdDeviation="3" result="b"/>'
+    + '<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge></filter>';
+  svg.appendChild(defs);
+
+  // Layout positions
+  var rootX = svgW / 2, rootY = padTop;
+
+  // Compute leaf positions first, then center categories above their children
+  var leafIndex = 0;
+  var catPositions = [];
+  var featPositions = [];
+  var totalLeafWidth = totalLeaves * leafSpacing;
+  var leafStartX = (svgW - totalLeafWidth) / 2 + leafSpacing / 2;
+
+  cats.forEach(function(cat) {
+    var feats = cat.features || [];
+    var catFeats = [];
+    feats.forEach(function(f) {
+      var fx = leafStartX + leafIndex * leafSpacing;
+      var fy = padTop + 2 * levelGap;
+      catFeats.push({ x: fx, y: fy, feat: f, color: cat.color || EXPLAIN_COLORS[cat.name] || '#64748b' });
+      leafIndex++;
+    });
+    featPositions.push(catFeats);
+    // Category centered above its features
+    var cx = catFeats.length > 0
+      ? (catFeats[0].x + catFeats[catFeats.length - 1].x) / 2
+      : rootX;
+    catPositions.push({ x: cx, y: padTop + levelGap, cat: cat, color: cat.color || EXPLAIN_COLORS[cat.name] || '#64748b' });
+  });
+
+  // Draw edges: root → categories
+  catPositions.forEach(function(cp, i) {
+    var edge = document.createElementNS(ns, 'path');
+    var mx = rootX, my = (rootY + nodeH / 2 + cp.y - catNodeH / 2) / 2;
+    edge.setAttribute('d', 'M' + rootX + ',' + (rootY + nodeH / 2)
+      + ' C' + rootX + ',' + my + ' ' + cp.x + ',' + my + ' ' + cp.x + ',' + (cp.y - catNodeH / 2));
+    edge.setAttribute('stroke', cp.color);
+    edge.setAttribute('class', 'gn-edge');
+    edge.setAttribute('stroke-dasharray', '200');
+    edge.style.animationDelay = (i * 0.08) + 's';
+    edge.setAttribute('filter', 'url(#gnGlow)');
+    svg.appendChild(edge);
+  });
+
+  // Draw edges: categories → features
+  catPositions.forEach(function(cp, ci) {
+    var feats = featPositions[ci] || [];
+    feats.forEach(function(fp, fi) {
+      var edge = document.createElementNS(ns, 'path');
+      var my = (cp.y + catNodeH / 2 + fp.y - featNodeH / 2) / 2;
+      edge.setAttribute('d', 'M' + cp.x + ',' + (cp.y + catNodeH / 2)
+        + ' C' + cp.x + ',' + my + ' ' + fp.x + ',' + my + ' ' + fp.x + ',' + (fp.y - featNodeH / 2));
+      edge.setAttribute('stroke', fp.color);
+      edge.setAttribute('class', 'gn-edge');
+      edge.setAttribute('stroke-dasharray', '200');
+      edge.style.animationDelay = (ci * 0.08 + fi * 0.05 + 0.15) + 's';
+      edge.setAttribute('filter', 'url(#gnGlow)');
+      svg.appendChild(edge);
+    });
+  });
+
+  // Draw root node
+  var rootG = document.createElementNS(ns, 'g');
+  rootG.setAttribute('class', 'gn-node');
+  rootG.setAttribute('transform', 'translate(' + rootX + ',' + rootY + ')');
+  var rootRect = document.createElementNS(ns, 'rect');
+  rootRect.setAttribute('x', -nodeW / 2); rootRect.setAttribute('y', -nodeH / 2);
+  rootRect.setAttribute('width', nodeW); rootRect.setAttribute('height', nodeH);
+  rootRect.setAttribute('rx', 8); rootRect.setAttribute('fill', '#7c3aed');
+  rootRect.setAttribute('filter', 'url(#gnGlow)');
+  rootG.appendChild(rootRect);
+  var rootText = document.createElementNS(ns, 'text');
+  rootText.setAttribute('text-anchor', 'middle'); rootText.setAttribute('dy', '0.35em');
+  rootText.setAttribute('fill', 'white'); rootText.setAttribute('font-size', '10'); rootText.setAttribute('font-weight', '700');
+  rootText.textContent = (data.object || 'OBJECT').toUpperCase() + ' ' + Math.round((data.confidence || 0) * 100) + '%';
+  rootG.appendChild(rootText);
+  rootG.addEventListener('mouseenter', function(e) {
+    showGraphTip(wrap, e, '<strong>' + ISR.escHtml((data.object || '').toUpperCase()) + '</strong>'
+      + (data.reasoning_summary ? '<br>' + ISR.escHtml(data.reasoning_summary) : ''));
+  });
+  rootG.addEventListener('mouseleave', function() { hideGraphTip(wrap); });
+  svg.appendChild(rootG);
+
+  // Draw category nodes
+  catPositions.forEach(function(cp, ci) {
+    var cg = document.createElementNS(ns, 'g');
+    cg.setAttribute('class', 'gn-node');
+    cg.setAttribute('transform', 'translate(' + cp.x + ',' + cp.y + ')');
+    var cr = document.createElementNS(ns, 'rect');
+    cr.setAttribute('x', -catNodeW / 2); cr.setAttribute('y', -catNodeH / 2);
+    cr.setAttribute('width', catNodeW); cr.setAttribute('height', catNodeH);
+    cr.setAttribute('rx', 6); cr.setAttribute('fill', cp.color);
+    cr.setAttribute('opacity', '0.92'); cr.setAttribute('filter', 'url(#gnGlow)');
+    cg.appendChild(cr);
+    var ct = document.createElementNS(ns, 'text');
+    ct.setAttribute('text-anchor', 'middle'); ct.setAttribute('dy', '0.35em');
+    ct.setAttribute('fill', 'white'); ct.setAttribute('font-size', '9'); ct.setAttribute('font-weight', '600');
+    ct.textContent = cp.cat.name;
+    cg.appendChild(ct);
+    var feats = cp.cat.features || [];
+    var validated = feats.filter(function(f) {
+      var v = Object.values(f.validators || {});
+      return v.length > 0 && v.every(function(x) { return x.agree; });
+    }).length;
+    cg.addEventListener('mouseenter', function(e) {
+      showGraphTip(wrap, e, '<strong>' + ISR.escHtml(cp.cat.name) + '</strong><br>'
+        + feats.length + ' features, ' + validated + ' fully validated');
+    });
+    cg.addEventListener('mouseleave', function() { hideGraphTip(wrap); });
+    svg.appendChild(cg);
+  });
+
+  // Draw feature nodes
+  catPositions.forEach(function(cp, ci) {
+    var feats = featPositions[ci] || [];
+    feats.forEach(function(fp) {
+      var fg = document.createElementNS(ns, 'g');
+      fg.setAttribute('class', 'gn-node');
+      fg.setAttribute('transform', 'translate(' + fp.x + ',' + fp.y + ')');
+      var fr = document.createElementNS(ns, 'rect');
+      fr.setAttribute('x', -featNodeW / 2); fr.setAttribute('y', -featNodeH / 2);
+      fr.setAttribute('width', featNodeW); fr.setAttribute('height', featNodeH);
+      fr.setAttribute('rx', 5); fr.setAttribute('fill', '#0f172a');
+      fr.setAttribute('stroke', fp.color); fr.setAttribute('stroke-width', '1.5');
+      fg.appendChild(fr);
+      var ft = document.createElementNS(ns, 'text');
+      ft.setAttribute('text-anchor', 'middle'); ft.setAttribute('dy', '0.35em');
+      ft.setAttribute('fill', '#e2e8f0'); ft.setAttribute('font-size', '7.5');
+      var fname = fp.feat.name;
+      ft.textContent = fname.length > 12 ? fname.slice(0, 11) + '\u2026' : fname;
+      fg.appendChild(ft);
+
+      // Validator badge
+      var vals = fp.feat.validators || {};
+      var vkeys = Object.keys(vals);
+      if (vkeys.length > 0) {
+        var agreed = vkeys.filter(function(k) { return vals[k].agree; }).length;
+        var badge = document.createElementNS(ns, 'text');
+        badge.setAttribute('x', featNodeW / 2 - 2); badge.setAttribute('y', -featNodeH / 2 - 4);
+        badge.setAttribute('text-anchor', 'end'); badge.setAttribute('font-size', '7'); badge.setAttribute('font-weight', '600');
+        badge.setAttribute('fill', agreed === vkeys.length ? '#4ade80' : '#f87171');
+        badge.textContent = agreed + '/' + vkeys.length;
+        fg.appendChild(badge);
+      }
+
+      // Tooltip
+      fg.addEventListener('mouseenter', function(e) {
+        var html = '<strong>' + ISR.escHtml(fp.feat.name) + '</strong>';
+        if (fp.feat.reasoning) html += '<div class="gt-section"><span class="gt-label">GPT-4o:</span> ' + ISR.escHtml(fp.feat.reasoning) + '</div>';
+        Object.keys(vals).forEach(function(name) {
+          var v = vals[name];
+          var cls = v.agree ? 'gt-agree' : 'gt-disagree';
+          var icon = v.agree ? '✓' : '✗';
+          html += '<div class="gt-section"><span class="gt-label ' + cls + '">' + icon + ' ' + ISR.escHtml(name) + ':</span> ' + ISR.escHtml(v.note || '') + '</div>';
+        });
+        showGraphTip(wrap, e, html);
+      });
+      fg.addEventListener('mouseleave', function() { hideGraphTip(wrap); });
+      svg.appendChild(fg);
+    });
+  });
+
+  // Consensus bar as SVG at the bottom
+  if (data.consensus_bar) {
+    var bar = data.consensus_bar;
+    var barY = svgH - 28, barX = 24, barW = svgW - 48, barH = 5;
+    var ratio = bar.total_features > 0 ? bar.agreed / bar.total_features : 0;
+    var bg = document.createElementNS(ns, 'rect');
+    bg.setAttribute('x', barX); bg.setAttribute('y', barY);
+    bg.setAttribute('width', barW); bg.setAttribute('height', barH);
+    bg.setAttribute('rx', 2.5); bg.setAttribute('fill', 'rgba(255,255,255,0.06)');
+    svg.appendChild(bg);
+    var fill = document.createElementNS(ns, 'rect');
+    fill.setAttribute('x', barX); fill.setAttribute('y', barY);
+    fill.setAttribute('width', barW * ratio); fill.setAttribute('height', barH);
+    fill.setAttribute('rx', 2.5); fill.setAttribute('fill', '#7c3aed');
+    fill.setAttribute('filter', 'url(#gnGlow)');
+    svg.appendChild(fill);
+    var lbl = document.createElementNS(ns, 'text');
+    lbl.setAttribute('x', barX); lbl.setAttribute('y', barY + barH + 13);
+    lbl.setAttribute('fill', '#a78bfa'); lbl.setAttribute('font-size', '8.5');
+    lbl.textContent = bar.agreed + '/' + bar.total_features + ' features agreed';
+    svg.appendChild(lbl);
+    var vlbl = document.createElementNS(ns, 'text');
+    vlbl.setAttribute('x', barX + barW); vlbl.setAttribute('y', barY + barH + 13);
+    vlbl.setAttribute('text-anchor', 'end'); vlbl.setAttribute('fill', 'rgba(255,255,255,0.3)'); vlbl.setAttribute('font-size', '8.5');
+    vlbl.textContent = bar.validators_available + '/2 validators';
+    svg.appendChild(vlbl);
+  }
+}
+
+function showGraphTip(wrap, event, html) {
+  hideGraphTip(wrap);
+  var tip = document.createElement('div');
+  tip.className = 'ex-graph-tip';
+  tip.innerHTML = html;
+  var rect = event.target.closest('.gn-node').getBoundingClientRect();
+  var wr = wrap.getBoundingClientRect();
+  tip.style.left = (rect.left - wr.left + rect.width / 2) + 'px';
+  tip.style.top = (rect.top - wr.top - 6) + 'px';
+  tip.style.transform = 'translate(-50%, -100%)';
+  wrap.appendChild(tip);
+  // Clamp
+  var tr = tip.getBoundingClientRect();
+  if (tr.left < wr.left) tip.style.left = (parseFloat(tip.style.left) + wr.left - tr.left + 4) + 'px';
+  if (tr.right > wr.right) tip.style.left = (parseFloat(tip.style.left) - (tr.right - wr.right) - 4) + 'px';
+}
+
+function hideGraphTip(wrap) {
+  var old = wrap.querySelector('.ex-graph-tip');
+  if (old) old.remove();
+}
+
+// ── Export to namespace ─────────────────────────────────────────
+
+Object.assign(window.ISR, {
+  EXPLAIN_COLORS,
+  LIGHTEN_MAP,
+  loadExplainability,
+  renderExplainGraph,
+  renderGraphNodes,
+  showGraphTip,
+  hideGraphTip,
+});

demo/js/helpers.js

@@ -0,0 +1,241 @@
+window.ISR = window.ISR || {};
+
+// ── Build Features from gpt_raw ─────────────────────────────────────
+
+function buildFeatures(gptRaw) {
+  if (!gptRaw) return {};
+  const features = {};
+  for (const [key, value] of Object.entries(gptRaw)) {
+    if (key === 'satisfies' || key === 'reason') continue;
+    features[key] = String(value);
+  }
+  // Add Satisfies and Reason entries (matches frontend gptMapping.buildFeatures)
+  if (gptRaw.satisfies !== undefined) {
+    features['Satisfies'] = gptRaw.satisfies === true ? 'Yes' : gptRaw.satisfies === false ? 'No' : '\u2014';
+  }
+  if (gptRaw.reason) {
+    features['Reason'] = gptRaw.reason;
+  }
+  return features;
+}
+
+// ── Status Badge Helper ──────────────────────────────────────────────
+
+function getStatusBadgeHTML(track) {
+  if (track.satisfies === true) return '<span class="status-badge match">Match</span>';
+  if (track.satisfies === false) return '<span class="status-badge no-match">No Match</span>';
+  if (track.mission_relevant === true) return '<span class="status-badge relevant">Relevant</span>';
+  if (track.assessment_status === 'STALE') return '<span class="status-badge pending">Stale</span>';
+  if (track.mission_relevant === false) return '<span class="status-badge not-relevant">N/R</span>';
+  // Default: confidence percentage
+  const conf = track.score || track.confidence || 0;
+  return `<span class="track-conf">${(conf * 100).toFixed(0)}%</span>`;
+}
+
+// ── Helpers ────────────────────────────────────────────────────────
+
+function formatTime(seconds) {
+  const m = Math.floor(seconds / 60);
+  const s = (seconds % 60).toFixed(1);
+  return `${String(m).padStart(2, '0')}:${s.padStart(4, '0')}`;
+}
+
+function labelToType(label) {
+  const l = label.toLowerCase();
+  if (l.includes('drone') || l.includes('uav')) return 'drone';
+  if (l.includes('car') || l.includes('truck') || l.includes('vehicle') || l.includes('bus')) return 'vehicle';
+  if (l.includes('person') || l.includes('pedestrian')) return 'person';
+  return 'stationary';
+}
+
+function escHtml(str) {
+  const d = document.createElement('div');
+  d.textContent = str || '';
+  return d.innerHTML;
+}
+
+function _decodeDepthJson(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) };
+}
+
+// Decode COCO compressed RLE string to array of counts
+function _decodeRLEString(s) {
+  const counts = [];
+  let i = 0;
+  while (i < s.length) {
+    let more = true, shift = 0, val = 0;
+    while (more && i < s.length) {
+      const c = s.charCodeAt(i) - 48;
+      i++;
+      val |= (c & 0x1f) << shift;
+      more = (c & 0x20) !== 0;
+      shift += 5;
+    }
+    if (val & 1) val = -(val + 1) / 2;
+    else val = val / 2;
+    counts.push(val);
+  }
+  // Convert delta-encoded to absolute
+  for (let j = 1; j < counts.length; j++) counts[j] += counts[j - 1];
+  // Ensure positive values
+  return counts.map(c => Math.abs(c));
+}
+
+function applySobel(imageData) {
+  const { width, height, data } = imageData;
+  const gray = new Float32Array(width * height);
+  for (let i = 0; i < width * height; i++) {
+    gray[i] = data[i*4] * 0.299 + data[i*4+1] * 0.587 + data[i*4+2] * 0.114;
+  }
+  const output = new ImageData(width, height);
+  const gx = [-1,0,1,-2,0,2,-1,0,1];
+  const gy = [-1,-2,-1,0,0,0,1,2,1];
+  for (let y = 1; y < height - 1; y++) {
+    for (let x = 1; x < width - 1; x++) {
+      let sx = 0, sy = 0;
+      for (let ky = -1; ky <= 1; ky++) {
+        for (let kx = -1; kx <= 1; kx++) {
+          const idx = (y + ky) * width + (x + kx);
+          const ki = (ky + 1) * 3 + (kx + 1);
+          sx += gray[idx] * gx[ki];
+          sy += gray[idx] * gy[ki];
+        }
+      }
+      const mag = Math.min(255, Math.sqrt(sx*sx + sy*sy));
+      const oi = (y * width + x) * 4;
+      output.data[oi] = output.data[oi+1] = output.data[oi+2] = mag;
+      output.data[oi+3] = 255;
+    }
+  }
+  return output;
+}
+
+// Viridis-like colormap (matches frontend inspection-renders.js)
+function _viridis(t) {
+  // Simplified viridis: dark purple → teal → yellow
+  const r = Math.round(Math.max(0, Math.min(255, (-876.7 * t + 1625.9) * t * t + 75.1 * t + 67.6)));
+  const g = Math.round(Math.max(0, Math.min(255, ((-1392.1 * t + 1010.9) * t + 311.1) * t + 1.5)));
+  const b = Math.round(Math.max(0, Math.min(255, ((479.1 * t - 1264.5) * t + 471.0) * t + 84.1)));
+  return [r, g, b];
+}
+
+function roundRect(ctx, x, y, w, h, r) {
+  ctx.beginPath();
+  ctx.moveTo(x + r, y);
+  ctx.lineTo(x + w - r, y);
+  ctx.arcTo(x + w, y, x + w, y + r, r);
+  ctx.lineTo(x + w, y + h - r);
+  ctx.arcTo(x + w, y + h, x + w - r, y + h, r);
+  ctx.lineTo(x + r, y + h);
+  ctx.arcTo(x, y + h, x, y + h - r, r);
+  ctx.lineTo(x, y + r);
+  ctx.arcTo(x, y, x + r, y, r);
+  ctx.closePath();
+}
+
+// ── getTracksAtFrame — with linear bbox interpolation ───────────
+
+function getTracksAtFrame(frameIdx) {
+  const MOCK_TRACKS = ISR.MOCK_TRACKS;
+  const visible = [];
+
+  for (const track of MOCK_TRACKS) {
+    const kf = track.keyframes;
+    if (kf.length === 0) continue;
+
+    const firstFrame = kf[0].frame;
+    const lastFrame = kf[kf.length - 1].frame;
+
+    // Track not visible outside its keyframe range
+    if (frameIdx < firstFrame || frameIdx > lastFrame) continue;
+
+    // Find surrounding keyframes for interpolation
+    let before = null;
+    let after = null;
+
+    for (let i = 0; i < kf.length; i++) {
+      if (kf[i].frame <= frameIdx) {
+        before = kf[i];
+      }
+      if (kf[i].frame >= frameIdx && after === null) {
+        after = kf[i];
+      }
+    }
+
+    let bbox;
+    if (!before || !after || before.frame === after.frame) {
+      // Exact keyframe or edge case
+      bbox = { ...(before || after).bbox };
+    } else {
+      // Linear interpolation
+      const t = (frameIdx - before.frame) / (after.frame - before.frame);
+      bbox = {
+        x: before.bbox.x + (after.bbox.x - before.bbox.x) * t,
+        y: before.bbox.y + (after.bbox.y - before.bbox.y) * t,
+        w: before.bbox.w + (after.bbox.w - before.bbox.w) * t,
+        h: before.bbox.h + (after.bbox.h - before.bbox.h) * t,
+      };
+    }
+
+    visible.push({
+      ...track,
+      bbox,
+      interpolatedFrame: frameIdx,
+    });
+  }
+
+  return visible;
+}
+
+function prefetchTracksAround(jobId, frameIdx, range) {
+  if (range === undefined) range = 5;
+  const TRACK_CACHE = ISR.TRACK_CACHE;
+  const STATE = ISR.STATE;
+  for (let i = -range; i <= range; i++) {
+    const f = frameIdx + i;
+    if (f >= 0 && f < STATE.totalFrames && !TRACK_CACHE.has(f)) {
+      ISR.fetchTracks(jobId, f);
+    }
+  }
+}
+
+// ── AI Command Matching (fallback) ─────────────────────────────────
+
+function matchAICommand(question) {
+  const MOCK_AI_RESPONSES_FALLBACK = ISR.MOCK_AI_RESPONSES_FALLBACK;
+  const key = question.toLowerCase().trim();
+  if (MOCK_AI_RESPONSES_FALLBACK[key]) {
+    return MOCK_AI_RESPONSES_FALLBACK[key];
+  }
+  for (const [keyword, response] of Object.entries(MOCK_AI_RESPONSES_FALLBACK)) {
+    if (key.includes(keyword)) {
+      return response;
+    }
+  }
+  return {
+    text: 'Command not recognized. Try: threat assessment, show all drones, generate report, summarize mission, count vehicles',
+    action: null,
+  };
+}
+
+// ── Export to namespace ─────────────────────────────────────────
+
+Object.assign(window.ISR, {
+  buildFeatures,
+  getStatusBadgeHTML,
+  formatTime,
+  labelToType,
+  escHtml,
+  _decodeDepthJson,
+  _decodeRLEString,
+  applySobel,
+  _viridis,
+  roundRect,
+  getTracksAtFrame,
+  prefetchTracksAround,
+  matchAICommand,
+});

demo/js/init.js

@@ -0,0 +1,235 @@
+window.ISR = window.ISR || {};
+
+/* ================================================================
+ *  Initialization
+ * ================================================================ */
+
+// Wire SVG deselect handler ONCE (not on every render)
+(function() {
+  const svg = document.getElementById('detectionOverlay');
+  if (svg) {
+    svg.addEventListener('click', (e) => {
+      if (e.target === svg) {
+        ISR.STATE.selectedTrackId = null;
+        ISR.STATE.highlightTrackId = null;
+        document.dispatchEvent(new CustomEvent('track-selected', { detail: { id: null } }));
+        if (ISR.STATE._realTracks) ISR.renderTrackListFromData(ISR.STATE._realTracks);
+      }
+    });
+  }
+})();
+
+document.addEventListener('DOMContentLoaded', () => {
+  const {
+    STATE, initCanvases, resizeCanvases, mainRenderLoop, updateClock,
+    setState, startProcessingSimulation, startRealProcessing, startDetection,
+    showToast, cancelJob, resetToReady, togglePlayPause, switchDrawerTab,
+    renderWaveform, renderEventMarkers, wireEventMarkerTooltips,
+    renderTimelineLegend, initPlayheadDrag, updatePlayheadPosition,
+    handleKeyboardControls, handleCanvasMouseMove, handleCanvasClick,
+    handleCommand, showShortcutsHint, toggleEventLog,
+    MOCK_DENSITY, MOCK_EVENTS, renderRealDetections,
+    updateFrameCounter, updateTimeDisplay,
+  } = window.ISR;
+
+  // Task 8: Set initial state
+  setState('ready');
+
+  // Task 3: Clock
+  updateClock();
+  setInterval(updateClock, 1000);
+
+  // Task 4: Canvases + render loop
+  initCanvases();
+  window.addEventListener('resize', resizeCanvases);
+  requestAnimationFrame(mainRenderLoop);
+
+  // Task 3+4: Start button — real API if video file, mock fallback otherwise
+  document.getElementById('startBtn').addEventListener('click', async () => {
+    if (STATE.videoFile) {
+      // Gather config from controls
+      const activeMode = document.querySelector('#modeToggle .config-toggle-btn.active');
+      const mode = activeMode ? activeMode.dataset.mode : 'object_detection';
+      const config = {
+        mode: mode,
+        queries: document.getElementById('queriesInput').value || 'person,car,truck',
+        detector: document.getElementById('detectorSelect').value,
+        segmenter: document.getElementById('segmenterSelect').value,
+        enableDepth: document.getElementById('depthToggle').checked,
+        mission: document.getElementById('queriesInput').value || null,
+      };
+
+      STATE.jobConfig = config;
+      STATE.mission = config.mission;
+
+      try {
+        const result = await startDetection(STATE.videoFile, config);
+        const modelBadge = document.querySelector('#videoBadges .pill:first-child');
+        if (modelBadge && STATE.jobConfig) modelBadge.textContent = STATE.jobConfig.detector.toUpperCase();
+        startRealProcessing(result);
+      } catch (err) {
+        showToast('Failed to start detection: ' + err.message, 8000);
+      }
+    } else {
+      // Fallback to mock processing
+      startProcessingSimulation();
+    }
+  });
+
+  // Task 3: File upload handler
+  document.getElementById('videoInput').addEventListener('change', (e) => {
+    const file = e.target.files[0];
+    if (!file) return;
+    STATE.videoFile = file;
+    document.getElementById('fileName').textContent = file.name;
+    document.getElementById('fileUploadLabel').classList.add('has-file');
+    document.getElementById('startBtn').disabled = false;
+  });
+
+  // Task 4: Cancel button
+  document.getElementById('cancelBtn').addEventListener('click', () => {
+    if (STATE.jobId) {
+      cancelJob(STATE.jobId);
+    }
+  });
+
+  // Task 9: New Analysis button
+  document.getElementById('newAnalysisBtn').addEventListener('click', () => {
+    resetToReady();
+  });
+
+  // Play/Pause
+  document.getElementById('playPauseBtn').addEventListener('click', togglePlayPause);
+
+  // Speed
+  document.getElementById('speedSelect').addEventListener('change', (e) => {
+    ISR.playbackSpeed = parseFloat(e.target.value);
+    // Update video playback rate if playing real video
+    if (STATE.jobId) {
+      const processedVideo = document.getElementById('processedVideo');
+      if (processedVideo) processedVideo.playbackRate = ISR.playbackSpeed;
+    }
+  });
+
+  // Wire processedVideo timeupdate for real analysis — throttled to avoid flooding
+  let _lastTimeUpdate = 0;
+  let _renderInFlight = false;
+  document.getElementById('processedVideo').addEventListener('timeupdate', () => {
+    if (STATE.current !== 'analysis' && STATE.current !== 'playing' && STATE.current !== 'inspect') return;
+    const processedVideo = document.getElementById('processedVideo');
+    if (!processedVideo || !STATE.jobId) return;
+
+    const newFrame = Math.floor(processedVideo.currentTime * STATE.fps);
+    if (newFrame === STATE.playheadFrame) return; // same frame, skip
+
+    STATE.playheadFrame = newFrame;
+    ISR.updatePlayheadPosition();
+    updateTimeDisplay();
+    updateFrameCounter();
+
+    // Throttle detection rendering to max once per 333ms (matches frontend RAF sync interval)
+    const now = performance.now();
+    if (now - _lastTimeUpdate < 333 || _renderInFlight) return;
+    _lastTimeUpdate = now;
+    _renderInFlight = true;
+
+    const w = ISR.overlayCanvas.width;
+    const h = ISR.overlayCanvas.height;
+    renderRealDetections(ISR.overlayCtx, w, h).finally(() => { _renderInFlight = false; });
+  });
+
+  // Wire processedVideo ended event
+  document.getElementById('processedVideo').addEventListener('ended', () => {
+    if (!STATE.jobId) return;
+    STATE.isPlaying = false;
+    STATE.current = 'analysis';
+    document.body.setAttribute('data-state', 'analysis');
+    document.getElementById('playPauseBtn').innerHTML = '&#9654;';
+  });
+
+  // Task 5: Drawer tabs
+  document.querySelectorAll('.drawer-tab').forEach(tab => {
+    tab.addEventListener('click', () => {
+      // Respect state-driven tab restrictions via CSS pointer-events
+      switchDrawerTab(tab.dataset.tab);
+    });
+  });
+
+  // Task 3: Mode toggle with detector/segmenter visibility and default queries
+  document.querySelectorAll('#modeToggle .config-toggle-btn').forEach(btn => {
+    btn.addEventListener('click', () => {
+      document.querySelectorAll('#modeToggle .config-toggle-btn').forEach(b => b.classList.remove('active'));
+      btn.classList.add('active');
+
+      const mode = btn.dataset.mode;
+      const detectorGroup = document.getElementById('detectorGroup');
+      const segmenterGroup = document.getElementById('segmenterGroup');
+      const detectorSelect = document.getElementById('detectorSelect');
+      const queriesInput = document.getElementById('queriesInput');
+
+      if (mode === 'segmentation') {
+        detectorGroup.classList.add('hidden');
+        segmenterGroup.classList.remove('hidden');
+        queriesInput.value = 'object';
+      } else if (mode === 'drone_detection') {
+        detectorGroup.classList.remove('hidden');
+        segmenterGroup.classList.add('hidden');
+        detectorSelect.value = 'yolov8_visdrone';
+        queriesInput.value = 'drone';
+      } else {
+        // object_detection
+        detectorGroup.classList.remove('hidden');
+        segmenterGroup.classList.add('hidden');
+        queriesInput.value = 'person,car,truck';
+      }
+    });
+  });
+
+  // Init drawer to tracks tab
+  switchDrawerTab('tracks');
+
+  // Task 6: Timeline
+  const waveformCanvas = document.getElementById('waveformCanvas');
+  if (waveformCanvas) {
+    renderWaveform(waveformCanvas, MOCK_DENSITY);
+    window.addEventListener('resize', () => renderWaveform(waveformCanvas, MOCK_DENSITY));
+  }
+  renderEventMarkers(document.getElementById('eventMarkers'), MOCK_EVENTS);
+  wireEventMarkerTooltips();
+  renderTimelineLegend();
+  initPlayheadDrag();
+  updatePlayheadPosition();
+
+  // Event log toggle
+  document.getElementById('eventLogToggle').addEventListener('click', toggleEventLog);
+
+  // Task 7: Command bar — wired with executeAction support
+  const cmdInput = document.getElementById('commandInput');
+  cmdInput.addEventListener('keydown', (e) => {
+    if (e.key === 'Enter') {
+      const text = cmdInput.value.trim();
+      if (!text) return;
+      cmdInput.value = '';
+      handleCommand(text);
+    }
+  });
+
+  // Cmd+K / Ctrl+K shortcut with keyboard hints
+  document.addEventListener('keydown', (e) => {
+    if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+      e.preventDefault();
+      cmdInput.focus();
+      showShortcutsHint();
+    }
+  });
+
+  // Task 9: Keyboard controls
+  document.addEventListener('keydown', handleKeyboardControls);
+
+  // Task 9: Canvas mouse interactions (hover + click)
+  const overlayEl = document.getElementById('overlayCanvas');
+  overlayEl.addEventListener('mousemove', handleCanvasMouseMove);
+  overlayEl.addEventListener('click', handleCanvasClick);
+
+  console.log('[ISR Command Center] UI initialized. State:', STATE.current);
+});

demo/js/inspect.js

@@ -0,0 +1,767 @@
+window.ISR = window.ISR || {};
+
+/* ================================================================
+ *  TASK 10: Inspect State — 2x2 Quad View
+ * ================================================================ */
+
+let threeScene = null;
+let threeCamera = null;
+let threeRenderer = null;
+let threeMesh = null;
+let threeAnimId = null;
+
+function enterInspectState(trackId) {
+  // Clean up previous 3D viewer
+  destroy3DViewer();
+
+  ISR.STATE.selectedTrackId = trackId;
+  ISR.STATE.expandedQuadrant = null;
+  ISR.setState('inspect');
+
+  // Determine if we have real data
+  const hasRealData = !!(ISR.STATE.jobId);
+  let realTrack = null;
+  let mockTrack = null;
+
+  if (hasRealData && ISR.STATE._realTracks) {
+    realTrack = ISR.STATE._realTracks.find(t => t.track_id === trackId || t.track_id === String(trackId));
+  }
+  if (!realTrack) {
+    mockTrack = ISR.MOCK_TRACKS.find(t => t.id === trackId);
+  }
+
+  // If neither real nor mock track found, bail
+  const track = realTrack || mockTrack;
+  if (!track) return;
+
+  // Apply assessment cache to real track
+  if (realTrack) ISR.applyAssessmentCache(realTrack);
+
+  // Normalize track properties for display
+  const trackLabel = realTrack ? (realTrack.label || 'object').toUpperCase() : mockTrack.label.toUpperCase();
+  const trackColor = realTrack ? (realTrack.color || 'var(--accent)') : mockTrack.color;
+  const trackConf = realTrack ? (realTrack.score || 0).toFixed(2) : mockTrack.confidence.toFixed(2);
+
+  // Mission status badge for inspect header
+  let missionBadgeHTML = '';
+  if (realTrack) {
+    if (realTrack.satisfies === true) missionBadgeHTML = '<span class="status-badge match">MISSION MATCH</span>';
+    else if (realTrack.satisfies === false) missionBadgeHTML = '<span class="status-badge no-match">NO MATCH</span>';
+    else if (realTrack.assessment_status === 'PENDING_GPT') missionBadgeHTML = '<span class="status-badge pending">PENDING</span>';
+  }
+
+  // Reason text
+  const reasonText = realTrack && realTrack.reason ? realTrack.reason : '';
+
+  const panel = document.getElementById('inspectPanel');
+  panel.innerHTML = `
+    <div id="inspectHeader">
+      <button id="inspectBack">&larr; Back</button>
+      <span id="inspectLabel" style="color: ${trackColor};">${trackLabel}</span>
+      ${missionBadgeHTML}
+      <span id="inspectConf" class="value">${trackConf}</span>
+    </div>
+    ${reasonText ? `<div style="color: var(--text-secondary); font-size: 10px; margin-bottom: 8px; padding: 4px 0; line-height: 1.4; border-bottom: 1px solid var(--panel-border);">${reasonText}</div>` : ''}
+    <div id="quadGrid">
+      <div class="quadrant" data-quad="seg">
+        <div class="quad-label" style="color: var(--accent)">SEGMENTATION</div>
+        <canvas class="quad-canvas"></canvas>
+        <div class="quad-metric"></div>
+      </div>
+      <div class="quadrant" data-quad="edge">
+        <div class="quad-label" style="color: #94a3b8">EDGE</div>
+        <canvas class="quad-canvas"></canvas>
+      </div>
+      <div class="quadrant" data-quad="depth">
+        <div class="quad-label" style="color: var(--warning)">DEPTH</div>
+        <canvas class="quad-canvas"></canvas>
+        <div class="quad-metric"></div>
+      </div>
+      <div class="quadrant" data-quad="3d">
+        <div class="quad-label" style="color: var(--success)">3D MESH</div>
+        <div id="threeContainer"></div>
+        <div class="quad-metric"></div>
+      </div>
+    </div>
+    <div id="inspectMetrics"></div>
+  `;
+
+  // Render all 4 quadrants
+  requestAnimationFrame(() => {
+    const segCanvas = panel.querySelector('[data-quad="seg"] .quad-canvas');
+    const edgeCanvas = panel.querySelector('[data-quad="edge"] .quad-canvas');
+    const depthCanvas = panel.querySelector('[data-quad="depth"] .quad-canvas');
+    const threeContainer = document.getElementById('threeContainer');
+
+    if (hasRealData) {
+      // Real data: fetch from API in parallel
+      const frameIdx = ISR.STATE.playheadFrame || 0;
+      const tid = realTrack ? realTrack.track_id : trackId;
+      if (segCanvas) renderRealSegmentation(ISR.STATE.jobId, frameIdx, tid);
+      if (edgeCanvas) renderRealEdge(ISR.STATE.jobId, frameIdx, tid);
+      if (depthCanvas) renderRealDepth(ISR.STATE.jobId, frameIdx, tid);
+      if (threeContainer) renderReal3D(ISR.STATE.jobId, frameIdx, tid);
+    } else {
+      // Mock fallback
+      if (segCanvas) renderSegmentation(segCanvas, mockTrack);
+      if (edgeCanvas) renderEdgeDetection(edgeCanvas, mockTrack);
+      if (depthCanvas) renderDepthHeatmap(depthCanvas, mockTrack);
+      if (threeContainer) init3DViewer(threeContainer, mockTrack);
+
+      // Update quad metrics (mock)
+      const segMetric = panel.querySelector('[data-quad="seg"] .quad-metric');
+      const depthMetric = panel.querySelector('[data-quad="depth"] .quad-metric');
+      const meshMetric = panel.querySelector('[data-quad="3d"] .quad-metric');
+      if (segMetric) segMetric.textContent = `AREA ${mockTrack.area.toFixed(1)}%`;
+      if (depthMetric) depthMetric.textContent = `${mockTrack.depth.toFixed(1)}m`;
+      if (meshMetric) meshMetric.textContent = '12,847 pts';
+    }
+  });
+
+  // Inspect metrics strip
+  const metricsStrip = document.getElementById('inspectMetrics');
+  if (metricsStrip) {
+    if (hasRealData && realTrack) {
+      const speedStr = realTrack.speed_kph ? `${realTrack.speed_kph.toFixed(1)} kph` : '--';
+      const dirStr = realTrack.direction_clock ? `${realTrack.direction_clock}h` : '--';
+      const depthStr = realTrack.depth_est_m ? `${realTrack.depth_est_m.toFixed(1)}m` : '--';
+      const assessStr = realTrack.assessment_status || '--';
+      metricsStrip.innerHTML = `
+        <div class="inspect-metric-item"><div class="label">VELOCITY</div><div class="value">${speedStr}</div></div>
+        <div class="inspect-metric-item"><div class="label">CONFIDENCE</div><div class="value">${(realTrack.score || 0).toFixed(2)}</div></div>
+        <div class="inspect-metric-item"><div class="label">ID</div><div class="value">${realTrack.track_id}</div></div>
+        <div class="inspect-metric-item"><div class="label">DIRECTION</div><div class="value">${dirStr}</div></div>
+        <div class="inspect-metric-item"><div class="label">DEPTH</div><div class="value">${depthStr}</div></div>
+        <div class="inspect-metric-item"><div class="label">ASSESSMENT</div><div class="value">${assessStr}</div></div>
+      `;
+    } else if (mockTrack) {
+      metricsStrip.innerHTML = `
+        <div class="inspect-metric-item"><div class="label">VELOCITY</div><div class="value">${mockTrack.speed.toFixed(1)} kph</div></div>
+        <div class="inspect-metric-item"><div class="label">DEPTH</div><div class="value">${mockTrack.depth.toFixed(1)}m</div></div>
+        <div class="inspect-metric-item"><div class="label">AREA</div><div class="value">${mockTrack.area.toFixed(1)}%</div></div>
+        <div class="inspect-metric-item"><div class="label">CONFIDENCE</div><div class="value">${mockTrack.confidence.toFixed(2)}</div></div>
+      `;
+    }
+  }
+
+  // Force INSPECT tab when using real data
+  if (hasRealData) {
+    ISR.switchDrawerTab('inspect');
+  }
+
+  // Trigger explainability graph
+  if (hasRealData && ISR.STATE.jobId) {
+    const tid = realTrack ? realTrack.track_id : trackId;
+    ISR.loadExplainability(ISR.STATE.jobId, tid);
+    // Auto-switch to EXPLAIN tab after a brief delay so user sees it loading
+    setTimeout(() => ISR.switchDrawerTab('explain'), 300);
+  }
+
+  // Wire back button
+  document.getElementById('inspectBack').addEventListener('click', exitInspectState);
+
+  // Wire quadrant expand/collapse
+  panel.querySelectorAll('.quadrant').forEach(q => {
+    q.addEventListener('click', () => {
+      const quadName = q.dataset.quad;
+      if (ISR.STATE.expandedQuadrant === quadName) {
+        // Collapse
+        q.classList.remove('expanded');
+        ISR.STATE.expandedQuadrant = null;
+        // Show other quadrants
+        panel.querySelectorAll('.quadrant').forEach(oq => oq.style.display = '');
+      } else {
+        // Collapse any previous
+        panel.querySelectorAll('.quadrant.expanded').forEach(eq => eq.classList.remove('expanded'));
+        panel.querySelectorAll('.quadrant').forEach(oq => oq.style.display = '');
+        // Hide others, expand this one
+        panel.querySelectorAll('.quadrant').forEach(oq => {
+          if (oq.dataset.quad !== quadName) oq.style.display = 'none';
+        });
+        q.classList.add('expanded');
+        ISR.STATE.expandedQuadrant = quadName;
+      }
+      // Re-render canvases after layout change
+      requestAnimationFrame(() => {
+        if (hasRealData) {
+          const frameIdx = ISR.STATE.playheadFrame || 0;
+          const tid = realTrack ? realTrack.track_id : trackId;
+          const segC = panel.querySelector('[data-quad="seg"] .quad-canvas');
+          const edgeC = panel.querySelector('[data-quad="edge"] .quad-canvas');
+          const depthC = panel.querySelector('[data-quad="depth"] .quad-canvas');
+          if (segC && segC.offsetParent !== null) renderRealSegmentation(ISR.STATE.jobId, frameIdx, tid);
+          if (edgeC && edgeC.offsetParent !== null) renderRealEdge(ISR.STATE.jobId, frameIdx, tid);
+          if (depthC && depthC.offsetParent !== null) renderRealDepth(ISR.STATE.jobId, frameIdx, tid);
+        } else {
+          const segCanvas = panel.querySelector('[data-quad="seg"] .quad-canvas');
+          const edgeCanvas = panel.querySelector('[data-quad="edge"] .quad-canvas');
+          const depthCanvas = panel.querySelector('[data-quad="depth"] .quad-canvas');
+          if (segCanvas && segCanvas.offsetParent !== null) renderSegmentation(segCanvas, mockTrack);
+          if (edgeCanvas && edgeCanvas.offsetParent !== null) renderEdgeDetection(edgeCanvas, mockTrack);
+          if (depthCanvas && depthCanvas.offsetParent !== null) renderDepthHeatmap(depthCanvas, mockTrack);
+        }
+        // Resize 3D if visible
+        if (threeRenderer && document.getElementById('threeContainer') && document.getElementById('threeContainer').offsetParent !== null) {
+          const tc = document.getElementById('threeContainer');
+          threeRenderer.setSize(tc.clientWidth, tc.clientHeight);
+          if (threeCamera) {
+            threeCamera.aspect = tc.clientWidth / tc.clientHeight;
+            threeCamera.updateProjectionMatrix();
+          }
+        }
+      });
+    });
+  });
+
+  // Pause playback
+  ISR.STATE.isPlaying = false;
+  document.getElementById('playPauseBtn').innerHTML = '&#9654;';
+
+  if (hasRealData) {
+    // For real data, use current playhead frame
+    // Pause the processed video if playing
+    const processedVideo = document.getElementById('processedVideo');
+    if (processedVideo) processedVideo.pause();
+  } else if (mockTrack) {
+    // Jump to track midpoint for mock data
+    const midFrame = Math.round((mockTrack.keyframes[0].frame + mockTrack.keyframes[mockTrack.keyframes.length - 1].frame) / 2);
+    ISR.STATE.playheadFrame = midFrame;
+  }
+  ISR.updatePlayheadPosition();
+  ISR.updateFrameCounter();
+  ISR.updateTimeDisplay();
+}
+
+function exitInspectState() {
+  destroy3DViewer();
+  ISR.STATE.selectedTrackId = null;
+  ISR.STATE.expandedQuadrant = null;
+  ISR.setState('analysis');
+  ISR.switchDrawerTab('tracks');
+  // Use real tracks when jobId exists, otherwise mock
+  if (ISR.STATE.jobId && ISR.STATE._realTracks) {
+    ISR.renderTrackListFromData(ISR.STATE._realTracks);
+  } else {
+    ISR.renderTrackListFull(ISR.MOCK_TRACKS, ISR.STATE.trackFilter);
+  }
+}
+
+/* ── Segmentation Renderer ────────────────────────────────────── */
+
+function renderSegmentation(canvas, track) {
+  const parent = canvas.parentElement;
+  const rect = parent.getBoundingClientRect();
+  const dpr = window.devicePixelRatio || 1;
+  canvas.width = rect.width * dpr;
+  canvas.height = rect.height * dpr;
+  canvas.style.width = rect.width + 'px';
+  canvas.style.height = rect.height + 'px';
+  const ctx = canvas.getContext('2d');
+  ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+  const w = rect.width;
+  const h = rect.height;
+
+  // Dark background
+  ctx.fillStyle = '#0a0f1a';
+  ctx.fillRect(0, 0, w, h);
+
+  // Grid
+  ctx.strokeStyle = 'rgba(255,255,255,0.03)';
+  ctx.lineWidth = 0.5;
+  for (let x = 0; x < w; x += 20) { ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, h); ctx.stroke(); }
+  for (let y = 0; y < h; y += 20) { ctx.beginPath(); ctx.moveTo(0, y); ctx.lineTo(w, y); ctx.stroke(); }
+
+  // Draw mask silhouette based on type
+  const cx = w * 0.5;
+  const cy = h * 0.5;
+  ctx.beginPath();
+  if (track.type === 'person') {
+    // Organic blob for person
+    const s = Math.min(w, h) * 0.3;
+    ctx.moveTo(cx, cy - s);
+    ctx.bezierCurveTo(cx + s * 0.6, cy - s, cx + s * 0.7, cy - s * 0.3, cx + s * 0.5, cy);
+    ctx.bezierCurveTo(cx + s * 0.7, cy + s * 0.4, cx + s * 0.4, cy + s, cx, cy + s);
+    ctx.bezierCurveTo(cx - s * 0.4, cy + s, cx - s * 0.7, cy + s * 0.4, cx - s * 0.5, cy);
+    ctx.bezierCurveTo(cx - s * 0.7, cy - s * 0.3, cx - s * 0.6, cy - s, cx, cy - s);
+  } else if (track.type === 'vehicle') {
+    // Angular shape for vehicle
+    const sw = Math.min(w, h) * 0.4;
+    const sh = Math.min(w, h) * 0.25;
+    ctx.moveTo(cx - sw, cy - sh * 0.3);
+    ctx.lineTo(cx - sw * 0.6, cy - sh);
+    ctx.lineTo(cx + sw * 0.6, cy - sh);
+    ctx.lineTo(cx + sw, cy - sh * 0.3);
+    ctx.lineTo(cx + sw, cy + sh);
+    ctx.lineTo(cx - sw, cy + sh);
+  } else if (track.type === 'drone') {
+    // Triangular / cross shape for drone
+    const s = Math.min(w, h) * 0.25;
+    ctx.moveTo(cx, cy - s);
+    ctx.lineTo(cx + s * 1.2, cy + s * 0.3);
+    ctx.lineTo(cx + s * 0.3, cy + s * 0.1);
+    ctx.lineTo(cx, cy + s);
+    ctx.lineTo(cx - s * 0.3, cy + s * 0.1);
+    ctx.lineTo(cx - s * 1.2, cy + s * 0.3);
+  } else {
+    // Generic rectangle for stationary
+    const sw = Math.min(w, h) * 0.35;
+    const sh = Math.min(w, h) * 0.25;
+    ctx.rect(cx - sw, cy - sh, sw * 2, sh * 2);
+  }
+  ctx.closePath();
+
+  // Semi-transparent fill
+  ctx.fillStyle = 'rgba(59,130,246,0.3)';
+  ctx.fill();
+
+  // Glowing contour
+  ctx.shadowColor = '#3b82f6';
+  ctx.shadowBlur = 8;
+  ctx.strokeStyle = '#3b82f6';
+  ctx.lineWidth = 2;
+  ctx.stroke();
+  ctx.shadowBlur = 0;
+}
+
+/* ── Edge Detection Renderer ──────────────────────────────────── */
+
+function renderEdgeDetection(canvas, track) {
+  const parent = canvas.parentElement;
+  const rect = parent.getBoundingClientRect();
+  const dpr = window.devicePixelRatio || 1;
+  canvas.width = rect.width * dpr;
+  canvas.height = rect.height * dpr;
+  canvas.style.width = rect.width + 'px';
+  canvas.style.height = rect.height + 'px';
+  const ctx = canvas.getContext('2d');
+  ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+  const w = rect.width;
+  const h = rect.height;
+
+  // Black background
+  ctx.fillStyle = '#000';
+  ctx.fillRect(0, 0, w, h);
+
+  const cx = w * 0.5;
+  const cy = h * 0.5;
+
+  function drawSilhouette(lineWidth, opacity) {
+    ctx.beginPath();
+    if (track.type === 'person') {
+      const s = Math.min(w, h) * 0.3;
+      ctx.moveTo(cx, cy - s);
+      ctx.bezierCurveTo(cx + s * 0.6, cy - s, cx + s * 0.7, cy - s * 0.3, cx + s * 0.5, cy);
+      ctx.bezierCurveTo(cx + s * 0.7, cy + s * 0.4, cx + s * 0.4, cy + s, cx, cy + s);
+      ctx.bezierCurveTo(cx - s * 0.4, cy + s, cx - s * 0.7, cy + s * 0.4, cx - s * 0.5, cy);
+      ctx.bezierCurveTo(cx - s * 0.7, cy - s * 0.3, cx - s * 0.6, cy - s, cx, cy - s);
+    } else if (track.type === 'vehicle') {
+      const sw = Math.min(w, h) * 0.4;
+      const sh = Math.min(w, h) * 0.25;
+      ctx.moveTo(cx - sw, cy - sh * 0.3);
+      ctx.lineTo(cx - sw * 0.6, cy - sh);
+      ctx.lineTo(cx + sw * 0.6, cy - sh);
+      ctx.lineTo(cx + sw, cy - sh * 0.3);
+      ctx.lineTo(cx + sw, cy + sh);
+      ctx.lineTo(cx - sw, cy + sh);
+    } else if (track.type === 'drone') {
+      const s = Math.min(w, h) * 0.25;
+      ctx.moveTo(cx, cy - s);
+      ctx.lineTo(cx + s * 1.2, cy + s * 0.3);
+      ctx.lineTo(cx + s * 0.3, cy + s * 0.1);
+      ctx.lineTo(cx, cy + s);
+      ctx.lineTo(cx - s * 0.3, cy + s * 0.1);
+      ctx.lineTo(cx - s * 1.2, cy + s * 0.3);
+    } else {
+      const sw = Math.min(w, h) * 0.35;
+      const sh = Math.min(w, h) * 0.25;
+      ctx.rect(cx - sw, cy - sh, sw * 2, sh * 2);
+    }
+    ctx.closePath();
+    ctx.strokeStyle = `rgba(255,255,255,${opacity})`;
+    ctx.lineWidth = lineWidth;
+    ctx.stroke();
+  }
+
+  // Outer edge — strong
+  drawSilhouette(2.5, 0.9);
+  // Inner detail lines — weaker
+  drawSilhouette(1, 0.35);
+
+  // Secondary inner detail: offset slightly inward
+  ctx.save();
+  ctx.translate(0, 0);
+  ctx.scale(0.88, 0.88);
+  ctx.translate(w * 0.5 * (1 - 1/0.88), h * 0.5 * (1 - 1/0.88));
+  drawSilhouette(0.8, 0.2);
+  ctx.restore();
+}
+
+/* ── Depth Heatmap Renderer ───────────────────────────────────── */
+
+function renderDepthHeatmap(canvas, track) {
+  const parent = canvas.parentElement;
+  const rect = parent.getBoundingClientRect();
+  const dpr = window.devicePixelRatio || 1;
+  canvas.width = rect.width * dpr;
+  canvas.height = rect.height * dpr;
+  canvas.style.width = rect.width + 'px';
+  canvas.style.height = rect.height + 'px';
+  const ctx = canvas.getContext('2d');
+  ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+  const w = rect.width;
+  const h = rect.height;
+
+  // Viridis-style gradient background
+  const bgGrad = ctx.createLinearGradient(0, 0, w, h);
+  bgGrad.addColorStop(0, '#440154');    // deep purple
+  bgGrad.addColorStop(0.25, '#31688e'); // blue
+  bgGrad.addColorStop(0.5, '#35b779');  // green
+  bgGrad.addColorStop(0.75, '#90d743'); // lime
+  bgGrad.addColorStop(1, '#fde725');    // yellow
+  ctx.fillStyle = bgGrad;
+  ctx.fillRect(0, 0, w, h);
+
+  // Warm "closer" region at object center
+  const cx = w * 0.5;
+  const cy = h * 0.5;
+  const maxR = Math.min(w, h) * 0.45;
+
+  const radGrad = ctx.createRadialGradient(cx, cy, 0, cx, cy, maxR);
+  radGrad.addColorStop(0, 'rgba(253,231,37,0.7)');   // warm yellow
+  radGrad.addColorStop(0.3, 'rgba(253,231,37,0.4)');
+  radGrad.addColorStop(0.6, 'rgba(144,215,67,0.2)');
+  radGrad.addColorStop(1, 'rgba(68,1,84,0)');         // transparent at edges
+  ctx.fillStyle = radGrad;
+  ctx.fillRect(0, 0, w, h);
+
+  // Second warm spot offset
+  const ox = cx + w * 0.15;
+  const oy = cy - h * 0.1;
+  const rad2 = ctx.createRadialGradient(ox, oy, 0, ox, oy, maxR * 0.5);
+  rad2.addColorStop(0, 'rgba(253,231,37,0.35)');
+  rad2.addColorStop(1, 'rgba(68,1,84,0)');
+  ctx.fillStyle = rad2;
+  ctx.fillRect(0, 0, w, h);
+}
+
+/* ── 3D Mesh Viewer ───────────────────────────────────────────── */
+
+function init3DViewer(container, track) {
+  if (!window.THREE) return;
+
+  const w = container.clientWidth || 150;
+  const h = container.clientHeight || 120;
+
+  threeScene = new THREE.Scene();
+  threeScene.background = new THREE.Color('#0a0f1a');
+
+  threeCamera = new THREE.PerspectiveCamera(45, w / h, 0.1, 100);
+  threeCamera.position.set(3, 2, 3);
+  threeCamera.lookAt(0, 0, 0);
+
+  threeRenderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
+  threeRenderer.setSize(w, h);
+  threeRenderer.setPixelRatio(window.devicePixelRatio || 1);
+  container.appendChild(threeRenderer.domElement);
+
+  // Geometry by type
+  let geometry;
+  if (track.type === 'vehicle') {
+    geometry = new THREE.BoxGeometry(1.6, 0.8, 1);
+  } else if (track.type === 'person') {
+    geometry = new THREE.CylinderGeometry(0.4, 0.4, 1.6, 12);
+  } else if (track.type === 'drone') {
+    geometry = new THREE.ConeGeometry(0.6, 1.2, 6);
+  } else {
+    geometry = new THREE.BoxGeometry(1.2, 0.6, 1.2);
+  }
+
+  const color = new THREE.Color(track.color);
+  const material = new THREE.MeshBasicMaterial({
+    color: color,
+    wireframe: true,
+    transparent: true,
+    opacity: 0.7,
+  });
+
+  threeMesh = new THREE.Mesh(geometry, material);
+  threeScene.add(threeMesh);
+
+  // Lighting
+  const ambient = new THREE.AmbientLight(0x404040);
+  threeScene.add(ambient);
+  const point = new THREE.PointLight(0xffffff, 0.8, 50);
+  point.position.set(5, 5, 5);
+  threeScene.add(point);
+
+  // Auto-rotation animation
+  let angle = 0;
+  function animate() {
+    threeAnimId = requestAnimationFrame(animate);
+    angle += 0.01;
+    threeCamera.position.x = 3 * Math.cos(angle);
+    threeCamera.position.z = 3 * Math.sin(angle);
+    threeCamera.lookAt(0, 0, 0);
+    threeMesh.rotation.y += 0.005;
+    threeRenderer.render(threeScene, threeCamera);
+  }
+  animate();
+}
+
+function destroy3DViewer() {
+  if (threeAnimId) {
+    cancelAnimationFrame(threeAnimId);
+    threeAnimId = null;
+  }
+  if (threeRenderer) {
+    threeRenderer.dispose();
+    if (threeRenderer.domElement && threeRenderer.domElement.parentElement) {
+      threeRenderer.domElement.parentElement.removeChild(threeRenderer.domElement);
+    }
+    threeRenderer = null;
+  }
+  if (threeMesh) {
+    if (threeMesh.geometry) threeMesh.geometry.dispose();
+    if (threeMesh.material) threeMesh.material.dispose();
+    threeMesh = null;
+  }
+  threeScene = null;
+  threeCamera = null;
+}
+
+/* ── Real Inspect Renderers (API-backed) ──────────────────────── */
+
+function showQuadPlaceholder(ctx, canvas, text) {
+  ctx.fillStyle = '#111';
+  ctx.fillRect(0, 0, canvas.width, canvas.height);
+  ctx.fillStyle = 'rgba(255,255,255,0.2)';
+  ctx.font = '12px Inter, sans-serif';
+  ctx.textAlign = 'center';
+  ctx.fillText(text, canvas.width / 2, canvas.height / 2);
+}
+
+async function renderRealSegmentation(jobId, frameIdx, trackId) {
+  const canvas = document.querySelector('[data-quad="seg"] .quad-canvas');
+  if (!canvas) return;
+  const ctx = canvas.getContext('2d');
+  const metric = document.querySelector('[data-quad="seg"] .quad-metric');
+  const dpr = window.devicePixelRatio || 1;
+  canvas.width = canvas.offsetWidth * dpr;
+  canvas.height = canvas.offsetHeight * dpr;
+  try {
+    // Fetch the cropped frame image first (for overlay rendering)
+    const frameBlob = await ISR.fetchFrame(jobId, frameIdx, trackId);
+    const maskData = await ISR.fetchMask(jobId, frameIdx, trackId);
+    if (!maskData) { showQuadPlaceholder(ctx, canvas, 'MASK UNAVAILABLE'); if (metric) metric.textContent = '\u2014'; return; }
+
+    // If we have a frame, render mask overlay on it (like frontend)
+    if (frameBlob && maskData.rle) {
+      const frameImg = await createImageBitmap(frameBlob);
+      const w = canvas.width, h = canvas.height;
+
+      // Draw dimmed frame
+      ctx.drawImage(frameImg, 0, 0, w, h);
+      ctx.fillStyle = 'rgba(0, 0, 0, 0.45)';
+      ctx.fillRect(0, 0, w, h);
+
+      // Decode COCO RLE mask (column-major)
+      const rle = maskData.rle;
+      const maskH = rle.size[0], maskW = rle.size[1];
+      const mask = new Uint8Array(maskH * maskW);
+      let pos = 0, val = 0;
+      const counts = typeof rle.counts === 'string' ? ISR._decodeRLEString(rle.counts) : rle.counts;
+      for (const count of counts) {
+        for (let i = 0; i < count && pos < mask.length; i++) mask[pos++] = val;
+        val = 1 - val;
+      }
+
+      // Compute crop region matching backend's crop_frame(bbox, padding=0.20)
+      const padding = 0.20;
+      let crop = null;
+      if (maskData.bbox) {
+        const [bx1, by1, bx2, by2] = maskData.bbox;
+        const bw = bx2 - bx1, bh = by2 - by1;
+        const padX = Math.floor(bw * padding), padY = Math.floor(bh * padding);
+        crop = { cx1: Math.max(0, bx1 - padX), cy1: Math.max(0, by1 - padY),
+                 cx2: Math.min(maskW, bx2 + padX), cy2: Math.min(maskH, by2 + padY) };
+      }
+
+      const color = maskData.color || [59, 130, 246];
+      // Get frame pixel data for blending
+      const frameCanvas2 = document.createElement('canvas');
+      frameCanvas2.width = w; frameCanvas2.height = h;
+      const fctx = frameCanvas2.getContext('2d');
+      fctx.drawImage(frameImg, 0, 0, w, h);
+      const framePixels = fctx.getImageData(0, 0, w, h);
+
+      const outPixels = ctx.getImageData(0, 0, w, h);
+      const out = outPixels.data, fd = framePixels.data;
+
+      for (let py = 0; py < h; py++) {
+        for (let px = 0; px < w; px++) {
+          let mx, my;
+          if (crop) {
+            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);
+          }
+          const maskIdx = mx * maskH + my; // COCO RLE is column-major
+          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 (frameBlob) {
+      // Fallback: just draw the frame
+      const img = await createImageBitmap(frameBlob);
+      ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+    }
+    if (metric) metric.textContent = maskData.area ? `${maskData.area.toLocaleString()} px` : 'MASK';
+  } catch { showQuadPlaceholder(ctx, canvas, 'ERROR'); }
+}
+
+async function renderRealEdge(jobId, frameIdx, trackId) {
+  const canvas = document.querySelector('[data-quad="edge"] .quad-canvas');
+  if (!canvas) return;
+  const ctx = canvas.getContext('2d');
+  const dpr = window.devicePixelRatio || 1;
+  canvas.width = canvas.offsetWidth * dpr;
+  canvas.height = canvas.offsetHeight * dpr;
+  try {
+    const blob = await ISR.fetchFrame(jobId, frameIdx, trackId);
+    if (!blob) { showQuadPlaceholder(ctx, canvas, 'FRAME UNAVAILABLE'); return; }
+    const img = await createImageBitmap(blob);
+    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+    // Apply Sobel filter
+    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+    const sobelData = ISR.applySobel(imageData);
+    ctx.putImageData(sobelData, 0, 0);
+  } catch { showQuadPlaceholder(ctx, canvas, 'ERROR'); }
+}
+
+async function renderRealDepth(jobId, frameIdx, trackId) {
+  const canvas = document.querySelector('[data-quad="depth"] .quad-canvas');
+  if (!canvas) return;
+  const ctx = canvas.getContext('2d');
+  const metric = document.querySelector('[data-quad="depth"] .quad-metric');
+  const dpr = window.devicePixelRatio || 1;
+  canvas.width = canvas.offsetWidth * dpr;
+  canvas.height = canvas.offsetHeight * dpr;
+  try {
+    const depthData = await ISR.fetchDepth(jobId, frameIdx, trackId);
+    if (!depthData || !depthData.data) { showQuadPlaceholder(ctx, canvas, 'DEPTH UNAVAILABLE'); if (metric) metric.textContent = '\u2014'; return; }
+
+    // Render viridis-like colormap from float32 depth values
+    const dw = depthData.width, dh = depthData.height;
+    const dd = depthData.data;
+    const minD = depthData.min, 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];
+      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 = Math.max(0, Math.min(1, (val - minD) / range));
+      const rgb = ISR._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);
+    ctx.drawImage(depthCanvas, 0, 0, canvas.width, canvas.height);
+    if (metric) metric.textContent = `${minD.toFixed(1)}–${maxD.toFixed(1)}m`;
+  } catch { showQuadPlaceholder(ctx, canvas, 'ERROR'); }
+}
+
+async function renderReal3D(jobId, frameIdx, trackId) {
+  const container = document.getElementById('threeContainer');
+  if (!container) return;
+  const metric = document.querySelector('[data-quad="3d"] .quad-metric');
+  try {
+    const data = await ISR.fetchPointCloud(jobId, frameIdx, trackId);
+    if (!data) { if (metric) metric.textContent = 'UNAVAILABLE'; return; }
+    destroy3DViewer();
+
+    // Decode base64 to typed arrays
+    const positions = new Float32Array(Uint8Array.from(atob(data.positions), c => c.charCodeAt(0)).buffer);
+    const colors = new Uint8Array(Uint8Array.from(atob(data.colors), c => c.charCodeAt(0)).buffer);
+
+    const geometry = new THREE.BufferGeometry();
+    geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
+    // Convert uint8 colors to float [0,1]
+    const floatColors = new Float32Array(colors.length);
+    for (let i = 0; i < colors.length; i++) floatColors[i] = colors[i] / 255;
+    geometry.setAttribute('color', new THREE.BufferAttribute(floatColors, 3));
+
+    if (data.indices) {
+      const indices = new Uint32Array(Uint8Array.from(atob(data.indices), c => c.charCodeAt(0)).buffer);
+      geometry.setIndex(new THREE.BufferAttribute(indices, 1));
+    }
+    geometry.computeBoundingSphere();
+
+    const scene = new THREE.Scene();
+    scene.background = new THREE.Color(0x0a0f1a);
+    const material = data.indices
+      ? new THREE.MeshBasicMaterial({ vertexColors: true, wireframe: true, transparent: true, opacity: 0.7 })
+      : new THREE.PointsMaterial({ vertexColors: true, size: 0.02 });
+    const obj = data.indices ? new THREE.Mesh(geometry, material) : new THREE.Points(geometry, material);
+    scene.add(obj);
+
+    const center = geometry.boundingSphere.center.clone();
+    const radius = geometry.boundingSphere.radius || 2;
+    const camera = new THREE.PerspectiveCamera(45, container.offsetWidth / container.offsetHeight, 0.1, 1000);
+    camera.position.set(center.x + radius * 2, center.y + radius, center.z + radius * 2);
+    camera.lookAt(center);
+
+    const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
+    renderer.setSize(container.offsetWidth, container.offsetHeight);
+    renderer.setPixelRatio(window.devicePixelRatio);
+    container.innerHTML = '';
+    container.appendChild(renderer.domElement);
+
+    // Store for cleanup
+    threeRenderer = renderer;
+    threeScene = scene;
+    threeCamera = camera;
+
+    let angle = 0;
+    function animate() {
+      threeAnimId = requestAnimationFrame(animate);
+      angle += 0.01;
+      camera.position.x = center.x + Math.cos(angle) * radius * 2;
+      camera.position.z = center.z + Math.sin(angle) * radius * 2;
+      camera.lookAt(center);
+      renderer.render(scene, camera);
+    }
+    animate();
+    if (metric) metric.textContent = `${(data.num_vertices || 0).toLocaleString()} pts`;
+  } catch { if (metric) metric.textContent = 'ERROR'; }
+}
+
+// ── Export to namespace ─────────────────────────────────────────
+
+Object.assign(window.ISR, {
+  enterInspectState,
+  exitInspectState,
+  renderSegmentation,
+  renderEdgeDetection,
+  renderDepthHeatmap,
+  init3DViewer,
+  destroy3DViewer,
+  showQuadPlaceholder,
+  renderRealSegmentation,
+  renderRealEdge,
+  renderRealDepth,
+  renderReal3D,
+});

demo/js/real-backend.js

@@ -0,0 +1,1337 @@
+window.ISR = window.ISR || {};
+
+/* ================================================================
+ *  TASK 4: Real Processing — MJPEG Stream + Polling + Cancel
+ * ================================================================ */
+
+let pollingInterval = null;
+let pulseAnimId = null;
+
+function startRealProcessing(result) {
+  const jobId = result.job_id;
+  ISR.STATE.jobId = jobId;
+  // Store resolved URLs from the response (matches frontend pattern)
+  ISR.STATE._statusUrl = ISR.resolveUrl(result.status_url);
+  ISR.STATE._videoUrl = ISR.resolveUrl(result.video_url);
+  ISR.STATE._streamUrl = ISR.resolveUrl(result.stream_url);
+  ISR.STATE._depthVideoUrl = ISR.resolveUrl(result.depth_video_url);
+
+  // Fade out start button
+  const startBtn = document.getElementById('startBtn');
+  if (startBtn) startBtn.classList.add('fading-out');
+
+  // Clear box animation tracking
+  Object.keys(ISR.boxFirstSeen).forEach(k => delete ISR.boxFirstSeen[k]);
+
+  setTimeout(() => {
+    ISR.setState('processing');
+
+    // Hide detection overlay during processing (MJPEG already has boxes baked in)
+    const detOverlay = document.getElementById('detectionOverlay');
+    if (detOverlay) detOverlay.innerHTML = '';
+    const overlayCanvas = document.getElementById('overlayCanvas');
+    if (overlayCanvas) overlayCanvas.style.display = 'none';
+
+    // Clear timeline waveform and event markers (will be rebuilt from real data)
+    const waveformCanvas = document.getElementById('waveformCanvas');
+    if (waveformCanvas) {
+      const wCtx = waveformCanvas.getContext('2d');
+      if (wCtx) wCtx.clearRect(0, 0, waveformCanvas.width, waveformCanvas.height);
+    }
+    const eventMarkers = document.getElementById('eventMarkers');
+    if (eventMarkers) eventMarkers.innerHTML = '';
+    const timelineLegend = document.getElementById('timelineLegend');
+    if (timelineLegend) timelineLegend.innerHTML = '';
+    // Reset playhead to start
+    ISR.STATE.playheadFrame = 0;
+    ISR.updatePlayheadPosition();
+    const timeStart = document.getElementById('timeStart');
+    if (timeStart) timeStart.textContent = '00:00';
+    const timeEnd = document.getElementById('timeEnd');
+    if (timeEnd) timeEnd.textContent = '--:--';
+
+    // Show MJPEG stream
+    const mjpeg = document.getElementById('mjpegStream');
+    if (mjpeg) {
+      mjpeg.src = ISR.STATE._streamUrl || `${ISR.API_BASE}/detect/stream/${jobId}`;
+      mjpeg.classList.remove('hidden');
+      // Hide progress circle once MJPEG stream loads its first frame
+      mjpeg.onload = () => {
+        const progressOverlay = document.getElementById('progressOverlay');
+        if (progressOverlay) progressOverlay.classList.add('hidden');
+      };
+    }
+
+    // Show cancel button
+    const cancelBtn = document.getElementById('cancelBtn');
+    if (cancelBtn) cancelBtn.classList.remove('hidden');
+
+    // Indeterminate progress animation (pulsing ring) — shown initially, hidden when stream loads
+    const circle = document.getElementById('progressCircle');
+    const pctEl = document.getElementById('progressPct');
+    if (circle) circle.classList.add('indeterminate');
+    if (pctEl) pctEl.textContent = 'PROCESSING...';
+
+    // Top bar progress — indeterminate sweep
+    const topBarProgress = document.getElementById('topBarProgress');
+
+    let consecutiveErrors = 0;
+
+    // Poll status every 3000ms
+    pollingInterval = setInterval(async () => {
+      try {
+        const status = await ISR.pollStatus(jobId);
+        consecutiveErrors = 0; // reset on success
+
+        // Update progress if available
+        if (status.progress !== undefined && status.progress !== null) {
+          const pct = Math.round(status.progress * 100);
+          if (pctEl) pctEl.textContent = pct + '%';
+          if (circle) {
+            circle.classList.remove('indeterminate');
+            const circumference = 2 * Math.PI * 34;
+            circle.style.strokeDashoffset = circumference - (status.progress * circumference);
+          }
+          if (topBarProgress) topBarProgress.style.width = pct + '%';
+        }
+
+        // Update frame count if available
+        if (status.frames_processed !== undefined) {
+          ISR.STATE.playheadFrame = status.frames_processed;
+          ISR.updateFrameCounter();
+        }
+        if (status.total_frames !== undefined && status.total_frames > 0) {
+          ISR.STATE.totalFrames = status.total_frames;
+        }
+
+        if (status.status === 'completed') {
+          clearInterval(pollingInterval);
+          pollingInterval = null;
+          await enterRealAnalysis(jobId, status);
+        } else if (status.status === 'failed') {
+          clearInterval(pollingInterval);
+          pollingInterval = null;
+          ISR.showToast('Detection failed: ' + (status.error || 'Unknown error'), 8000);
+          resetToReady();
+        } else if (status.status === 'cancelled') {
+          clearInterval(pollingInterval);
+          pollingInterval = null;
+          ISR.showToast('Detection cancelled.', 5000);
+          resetToReady();
+        }
+      } catch (err) {
+        consecutiveErrors++;
+        console.warn('[ISR] Poll error:', err.message, `(${consecutiveErrors}/6)`);
+        if (consecutiveErrors >= 6) {
+          clearInterval(pollingInterval);
+          pollingInterval = null;
+          ISR.showToast('Lost connection to server. Returning to ready state.', 8000);
+          resetToReady();
+        }
+      }
+    }, 3000);
+  }, 300);
+}
+
+function cleanupProcessing() {
+  // Remove MJPEG src
+  const mjpeg = document.getElementById('mjpegStream');
+  if (mjpeg) {
+    mjpeg.src = '';
+    mjpeg.classList.add('hidden');
+  }
+
+  // Hide cancel button
+  const cancelBtn = document.getElementById('cancelBtn');
+  if (cancelBtn) cancelBtn.classList.add('hidden');
+
+  // Reset progress ring
+  const circle = document.getElementById('progressCircle');
+  const pctEl = document.getElementById('progressPct');
+  if (circle) {
+    circle.classList.remove('indeterminate');
+    circle.style.strokeDashoffset = 2 * Math.PI * 34;
+  }
+  if (pctEl) pctEl.textContent = '0%';
+
+  // Reset top bar progress
+  const topBarProgress = document.getElementById('topBarProgress');
+  if (topBarProgress) {
+    topBarProgress.style.width = '0%';
+    topBarProgress.style.opacity = '';
+  }
+
+  // Restore canvas opacity
+  const videoCanvas = document.getElementById('videoCanvas');
+  if (videoCanvas) videoCanvas.style.opacity = '';
+
+  // Clear polling
+  if (pollingInterval) {
+    clearInterval(pollingInterval);
+    pollingInterval = null;
+  }
+}
+
+function resetToReady() {
+  if (pollingInterval) { clearInterval(pollingInterval); pollingInterval = null; }
+  ISR.STATE.jobId = null;
+  ISR.STATE.jobStatus = null;
+  ISR.STATE._statusUrl = null;
+  ISR.STATE._videoUrl = null;
+  ISR.STATE._streamUrl = null;
+  ISR.STATE._depthVideoUrl = null;
+  ISR.STATE._realTracks = null;
+  ISR.STATE._realTrackIndex = null;
+  ISR.STATE._timelineSummary = null;
+  ISR.STATE._analysisStartTime = null;
+  ISR.STATE._lastRenderedFrame = -1;
+  ISR.STATE.chatHistory = [];
+  ISR.STATE.selectedTrackId = null;
+  ISR.STATE.highlightTrackId = null;
+  ISR.STATE.trackFilter = null;
+  ISR.STATE.isPlaying = false;
+  ISR.STATE._videoBlobUrl = null;
+  ISR.STATE._currentFrameTracks = null;
+  ISR.clearTrackCache();
+  ISR.clearAssessmentCache();
+
+  // Clear SVG overlay
+  const svgOverlay = document.getElementById('detectionOverlay');
+  if (svgOverlay) while (svgOverlay.firstChild) svgOverlay.removeChild(svgOverlay.firstChild);
+
+  // Stop MJPEG
+  const mjpeg = document.getElementById('mjpegStream');
+  if (mjpeg) { mjpeg.src = ''; mjpeg.classList.add('hidden'); }
+
+  // Stop and cleanup video
+  const video = document.getElementById('processedVideo');
+  if (video) {
+    video.pause();
+    if (video.src && video.src.startsWith('blob:')) URL.revokeObjectURL(video.src);
+    video.src = '';
+    video.classList.add('hidden');
+  }
+
+  // Cleanup 3D viewer
+  ISR.destroy3DViewer();
+
+  // Restore UI
+  document.getElementById('videoCanvas').style.opacity = '1';
+  const oc = document.getElementById('overlayCanvas');
+  if (oc) { oc.style.display = ''; oc.style.opacity = '0'; }
+  document.getElementById('progressOverlay').classList.add('hidden');
+  const cancelBtn = document.getElementById('cancelBtn');
+  if (cancelBtn) cancelBtn.classList.add('hidden');
+
+  // Reset start button
+  const startBtn = document.getElementById('startBtn');
+  if (startBtn) startBtn.classList.remove('fading-out');
+
+  // Reset progress ring
+  const circle = document.getElementById('progressCircle');
+  const pctEl = document.getElementById('progressPct');
+  if (circle) {
+    circle.classList.remove('indeterminate');
+    circle.style.strokeDashoffset = 2 * Math.PI * 34;
+  }
+  if (pctEl) pctEl.textContent = '0%';
+
+  // Reset top bar progress
+  const topBarProgress = document.getElementById('topBarProgress');
+  if (topBarProgress) {
+    topBarProgress.style.width = '0%';
+    topBarProgress.style.opacity = '';
+  }
+
+  ISR.setState('ready');
+}
+
+async function enterRealAnalysis(jobId, status) {
+  cleanupProcessing();
+
+  // 1. Stop MJPEG stream
+  const mjpeg = document.getElementById('mjpegStream');
+  if (mjpeg) { mjpeg.src = ''; mjpeg.classList.add('hidden'); }
+
+  // 2. Hide progress overlay and cancel button
+  const progressOverlay = document.getElementById('progressOverlay');
+  if (progressOverlay) progressOverlay.classList.add('hidden');
+  const cancelBtnEl = document.getElementById('cancelBtn');
+  if (cancelBtnEl) cancelBtnEl.classList.add('hidden');
+  const startBtn = document.getElementById('startBtn');
+  if (startBtn) startBtn.classList.remove('fading-out');
+
+  ISR.showToast('Detection complete! Loading video...', 4000);
+
+  // === PHASE 1: Load video + summary (FAST — 2 requests max) ===
+
+  // 3. Fetch processed video with retry
+  const processedVideo = document.getElementById('processedVideo');
+  let videoBlobUrl = null;
+  for (let attempt = 0; attempt < 10; attempt++) {
+    try {
+      const videoUrl = ISR.STATE._videoUrl || `${ISR.API_BASE}/detect/video/${jobId}`;
+      const res = await fetch(videoUrl, { cache: 'no-store' });
+      if (res.status === 410) { ISR.showToast('Job was cancelled.', 6000); resetToReady(); return; }
+      if (res.status === 202) { await new Promise(r => setTimeout(r, 1000)); continue; }
+      if (res.ok) {
+        const blob = await res.blob();
+        videoBlobUrl = URL.createObjectURL(blob);
+        ISR.STATE._videoBlobUrl = videoBlobUrl;
+        break;
+      }
+    } catch (err) {
+      console.warn('[ISR] Video fetch attempt', attempt, err);
+      await new Promise(r => setTimeout(r, 1000));
+    }
+  }
+
+  if (!videoBlobUrl) {
+    ISR.showToast('Failed to load processed video.', 6000);
+  }
+
+  // 4. Set video src and wait for canplay
+  if (videoBlobUrl && processedVideo) {
+    processedVideo.src = videoBlobUrl;
+    processedVideo.style.opacity = '0';
+    processedVideo.style.transition = 'opacity 0.3s ease';
+    processedVideo.classList.remove('hidden');
+    processedVideo.style.display = 'block';
+    await new Promise(resolve => {
+      const timeout = setTimeout(resolve, 5000); // safety timeout
+      processedVideo.addEventListener('canplay', () => { clearTimeout(timeout); resolve(); }, { once: true });
+      processedVideo.load();
+    });
+    processedVideo.style.opacity = '1';
+  }
+
+  // 5. Fetch timeline summary (1 request)
+  try {
+    const summary = await ISR.fetchTimelineSummary(jobId);
+    ISR.STATE._timelineSummary = summary;
+    if (summary.total_frames) ISR.STATE.totalFrames = summary.total_frames;
+    if (summary.fps) ISR.STATE.fps = summary.fps;
+
+    // Render waveform immediately from density data (no extra fetches)
+    const frames = summary.frames || {};
+    const frameCounts = Object.entries(frames).map(([k, v]) => [parseInt(k, 10), v]).sort((a, b) => a[0] - b[0]);
+    const segments = 100;
+    const segSize = ISR.STATE.totalFrames / segments;
+    const density = new Array(segments).fill(0);
+    for (const [fi, count] of frameCounts) {
+      const seg = Math.min(Math.floor(fi / segSize), segments - 1);
+      density[seg] += (typeof count === 'number' ? count : 0);
+    }
+    const maxD = Math.max(...density, 1);
+    const normalized = density.map(v => v / maxD);
+    const waveformCanvas = document.getElementById('waveformCanvas');
+    if (waveformCanvas) renderWaveformFromDensity(waveformCanvas, normalized);
+  } catch (err) {
+    console.warn('[ISR] Timeline summary fetch failed:', err);
+  }
+
+  // === PHASE 2: Transition to analysis state IMMEDIATELY ===
+
+  const overlayEl = document.getElementById('overlayCanvas');
+  if (overlayEl) { overlayEl.style.display = ''; overlayEl.style.opacity = '1'; }
+  const videoCanvasEl = document.getElementById('videoCanvas');
+  if (videoCanvasEl) videoCanvasEl.style.opacity = '0';
+
+  ISR.STATE.playheadFrame = 0;
+  ISR.STATE.isPlaying = false;
+  ISR.STATE._lastRenderedFrame = -1;
+  ISR.STATE._analysisStartTime = Date.now();
+  ISR.lastFrameTime = 0;
+  ISR.setState('analysis');
+
+  ISR.updateFrameCounter();
+  ISR.updatePlayheadPosition();
+  ISR.updateTimeDisplay();
+  document.getElementById('playPauseBtn').innerHTML = '&#9654;';
+
+  const timeEndEl = document.getElementById('timeEnd');
+  if (timeEndEl) timeEndEl.textContent = ISR.formatTime(ISR.STATE.totalFrames / ISR.STATE.fps);
+
+  ISR.showToast(`Analysis ready. ${ISR.STATE.totalFrames} frames at ${ISR.STATE.fps.toFixed(0)} fps. Loading tracks...`, 5000);
+
+  // === PHASE 3: Load track data in background (non-blocking) ===
+  // Fetch first frame tracks immediately for initial display
+  try {
+    const firstFrameTracks = await ISR.fetchTracks(jobId, 0);
+    if (firstFrameTracks.length > 0) {
+      const enriched = firstFrameTracks.map(t => {
+        const et = ISR.applyAssessmentCache({...t});
+        et.type = ISR.labelToType(et.label_name || et.label || '');
+        et.color = ISR.getColorForType(et.type);
+        return et;
+      });
+      ISR.STATE._realTracks = enriched;
+      ISR.STATE._realTrackIndex = null; // force rebuild on next merge
+      ISR.STATE._currentFrameTracks = enriched;
+      renderTrackListFromData(enriched);
+      renderSvgOverlay(enriched);
+    }
+  } catch (err) {
+    console.warn('[ISR] Initial track fetch failed:', err);
+  }
+
+  // Defer heavy operations — run in background without blocking UI
+  deferredAnalysisWork(jobId, status);
+}
+
+// Background work — runs after analysis state is active and interactive
+async function deferredAnalysisWork(jobId, status) {
+  // Build full track list from sampled keyframes (reuses cache)
+  try {
+    await renderRealTrackList(jobId);
+  } catch (err) { console.warn('[ISR] Deferred track list failed:', err); }
+
+  // Derive timeline events (uses cached track data from renderRealTrackList)
+  if (ISR.STATE._timelineSummary) {
+    try {
+      await buildRealTimeline(jobId, ISR.STATE._timelineSummary);
+    } catch (err) { console.warn('[ISR] Deferred timeline events failed:', err); }
+  }
+
+  // Compute metrics (uses cached track data)
+  try {
+    await computeRealMetrics(jobId, status, ISR.STATE._timelineSummary);
+  } catch (err) { console.warn('[ISR] Deferred metrics failed:', err); }
+}
+
+async function computeRealMetrics(jobId, status, summary) {
+  return; // Replaced by explainability graph
+  const metricsPanel = document.getElementById('metricsPanel');
+  if (!metricsPanel) return;
+
+  // Collect unique tracks from sampled keyframes (batch fetch, up to 30 frames)
+  const trackMap = new Map();
+  const framesToSample = getKeyframesToSample();
+  const sampleFrames = framesToSample.slice(0, 30);
+
+  for (let i = 0; i < sampleFrames.length; i += 10) {
+    const batch = sampleFrames.slice(i, i + 10);
+    const results = await Promise.all(batch.map(f => ISR.fetchTracks(jobId, f)));
+    for (const tracks of results) {
+      if (!tracks) continue;
+      for (const t of tracks) {
+        const tid = t.track_id !== undefined ? t.track_id : t.id;
+        if (tid === undefined) continue;
+        const existing = trackMap.get(tid);
+        if (!existing || (t.score || 0) > (existing.score || 0)) {
+          trackMap.set(tid, {
+            track_id: tid,
+            label: t.label_name || t.label || 'object',
+            score: t.score || t.confidence || 0,
+            type: ISR.labelToType(t.label_name || t.label || ''),
+          });
+        }
+      }
+    }
+  }
+
+  const allTracks = Array.from(trackMap.values());
+  const totalTracks = allTracks.length;
+
+  // Count by type
+  const typeCounts = {};
+  for (const t of allTracks) {
+    typeCounts[t.type] = (typeCounts[t.type] || 0) + 1;
+  }
+
+  // Avg confidence
+  const avgConf = totalTracks > 0
+    ? (allTracks.reduce((s, t) => s + t.score, 0) / totalTracks).toFixed(2)
+    : '0.00';
+
+  // Processing time and FPS from status timestamps
+  let processTime = '--';
+  let fps = '--';
+  const totalFrames = summary && summary.total_frames ? summary.total_frames : ISR.STATE.totalFrames;
+
+  if (status && status.created_at && status.completed_at) {
+    const startMs = new Date(status.created_at).getTime();
+    const endMs = new Date(status.completed_at).getTime();
+    const durationSec = (endMs - startMs) / 1000;
+    if (durationSec > 0) {
+      processTime = durationSec < 60
+        ? `${durationSec.toFixed(1)}s`
+        : `${Math.floor(durationSec / 60)}m ${(durationSec % 60).toFixed(0)}s`;
+      fps = (totalFrames / durationSec).toFixed(1);
+    }
+  }
+
+  // Build breakdown bars
+  const breakdownTypes = ['person', 'vehicle', 'drone', 'stationary'];
+  const maxCount = Math.max(1, ...breakdownTypes.map(t => typeCounts[t] || 0));
+  const bars = breakdownTypes.map(type => {
+    const count = typeCounts[type] || 0;
+    const color = ISR.TYPE_COLORS[type] || '#666';
+    const pct = maxCount > 0 ? (count / maxCount) * 100 : 0;
+    return `
+      <div class="metric-bar-row">
+        <span class="metric-bar-label">${type.charAt(0).toUpperCase() + type.slice(1)}</span>
+        <div class="metric-bar-track">
+          <div class="metric-bar-fill" style="width: ${pct}%; background: ${color};"></div>
+        </div>
+        <span class="metric-bar-count" style="color: ${color};">${count}</span>
+      </div>`;
+  }).join('');
+
+  metricsPanel.innerHTML = `
+    <div class="metric-hero">
+      <div class="metric-big-number">${totalTracks}</div>
+      <div class="label">TOTAL TRACKS</div>
+    </div>
+    <div class="metric-breakdown">
+      ${bars}
+    </div>
+    <div class="metric-stats">
+      <div class="metric-stat-row"><span class="metric-stat-label">AVG CONFIDENCE</span><span class="metric-stat-value">${avgConf}</span></div>
+      <div class="metric-stat-row"><span class="metric-stat-label">PROCESSING FPS</span><span class="metric-stat-value">${fps}</span></div>
+      <div class="metric-stat-row"><span class="metric-stat-label">TOTAL FRAMES</span><span class="metric-stat-value">${totalFrames}</span></div>
+      <div class="metric-stat-row"><span class="metric-stat-label">PROCESS TIME</span><span class="metric-stat-value">${processTime}</span></div>
+    </div>`;
+}
+
+/* ================================================================
+ *  TASK 5: Real Detection Rendering on Overlay Canvas
+ * ================================================================ */
+
+async function renderRealDetections(ctx, w, h) {
+  if (!ISR.STATE.jobId) return;
+  if (ISR.STATE.current !== 'analysis' && ISR.STATE.current !== 'playing' && ISR.STATE.current !== 'inspect') return;
+
+  const processedVideo = document.getElementById('processedVideo');
+  if (!processedVideo || !processedVideo.duration) return;
+
+  const frameIdx = Math.floor(processedVideo.currentTime * ISR.STATE.fps);
+
+  // Skip if same frame as last render
+  if (frameIdx === ISR.STATE._lastRenderedFrame) return;
+  ISR.STATE._lastRenderedFrame = frameIdx;
+
+  // Fetch tracks for this frame
+  const tracks = await ISR.fetchTracks(ISR.STATE.jobId, frameIdx);
+
+  // Prefetch nearby frames (only ±2 to avoid flooding)
+  ISR.prefetchTracksAround(ISR.STATE.jobId, frameIdx, 2);
+
+  // Clear overlay canvas (no longer rendering boxes on canvas)
+  ctx.clearRect(0, 0, w, h);
+
+  if (!tracks || tracks.length === 0) {
+    // Clear SVG overlay too
+    const svg = document.getElementById('detectionOverlay');
+    if (svg) while (svg.firstChild) svg.removeChild(svg.firstChild);
+    return;
+  }
+
+  // Apply assessment cache + enrich tracks
+  const enriched = tracks.map(t => {
+    const et = ISR.applyAssessmentCache({...t});
+    et.type = ISR.labelToType(et.label_name || et.label || '');
+    et.color = ISR.getColorForType(et.type);
+    return et;
+  });
+
+  // Store current frame tracks separately — don't replace the stable _realTracks list
+  ISR.STATE._currentFrameTracks = enriched;
+
+  // Merge new tracks into the stable list (accumulate, don't replace)
+  if (ISR.STATE._realTracks) {
+    // O(n) merge using index map instead of O(n²) findIndex loop
+    if (!ISR.STATE._realTrackIndex) {
+      ISR.STATE._realTrackIndex = new Map();
+      ISR.STATE._realTracks.forEach((t, i) => ISR.STATE._realTrackIndex.set(t.track_id, i));
+    }
+    const idx_map = ISR.STATE._realTrackIndex;
+    for (const t of enriched) {
+      const existingIdx = idx_map.get(t.track_id);
+      if (existingIdx !== undefined) {
+        ISR.STATE._realTracks[existingIdx] = t;
+      } else {
+        const newIdx = ISR.STATE._realTracks.length;
+        ISR.STATE._realTracks.push(t);
+        idx_map.set(t.track_id, newIdx);
+      }
+    }
+  } else {
+    ISR.STATE._realTracks = [...enriched];
+    ISR.STATE._realTrackIndex = new Map(enriched.map((t, i) => [t.track_id, i]));
+  }
+
+  // Render SVG overlay with CURRENT FRAME tracks only
+  renderSvgOverlay(enriched);
+}
+
+/* ================================================================
+ *  TASK 5: Real Track List Rendering
+ * ================================================================ */
+
+async function renderRealTrackList(jobId) {
+  // Collect unique tracks from sampled keyframes
+  const trackMap = new Map();
+
+  const framesToSample = getKeyframesToSample();
+  // Sample in batches of 10
+  for (let i = 0; i < framesToSample.length; i += 10) {
+    const batch = framesToSample.slice(i, i + 10);
+    const results = await Promise.all(batch.map(f => ISR.fetchTracks(jobId, f)));
+    for (const tracks of results) {
+      if (!tracks) continue;
+      for (const t of tracks) {
+        const tid = t.track_id !== undefined ? t.track_id : t.id;
+        if (tid === undefined) continue;
+        const existing = trackMap.get(tid);
+        if (!existing || (t.score || 0) > (existing.score || 0)) {
+          trackMap.set(tid, {
+            track_id: tid,
+            label: t.label_name || t.label || 'object',
+            score: t.score || t.confidence || 0,
+            speed_kph: t.speed_kph || 0,
+            direction_clock: t.direction_clock || null,
+            type: ISR.labelToType(t.label_name || t.label || ''),
+            color: ISR.getColorForType(ISR.labelToType(t.label_name || t.label || '')),
+            bbox: t.bbox || null,
+            satisfies: t.satisfies,
+            reason: t.reason,
+            mission_relevant: t.mission_relevant,
+            gpt_raw: t.gpt_raw,
+            features: t.features,
+            assessment_status: t.assessment_status,
+            depth_est_m: t.depth_est_m,
+          });
+        }
+        // Update assessment cache
+        if (t.gpt_raw || t.assessment_status === 'ASSESSED') {
+          ISR.cacheAssessment(tid, t);
+        }
+      }
+    }
+  }
+
+  ISR.STATE._realTracks = Array.from(trackMap.values());
+  ISR.STATE._realTrackIndex = null; // force rebuild on next merge
+  renderTrackListFromData(ISR.STATE._realTracks);
+}
+
+function getKeyframesToSample() {
+  if (!ISR.STATE._timelineSummary || !ISR.STATE._timelineSummary.frames) {
+    // Fallback: sample evenly across total frames
+    const samples = [];
+    const step = Math.max(1, Math.floor(ISR.STATE.totalFrames / 30));
+    for (let i = 0; i < ISR.STATE.totalFrames; i += step) {
+      samples.push(i);
+    }
+    return samples;
+  }
+  const allFrames = Object.keys(ISR.STATE._timelineSummary.frames)
+    .map(k => parseInt(k, 10))
+    .sort((a, b) => a - b);
+
+  if (allFrames.length <= 60) return allFrames;
+
+  // Subsample every Nth
+  const n = Math.ceil(allFrames.length / 60);
+  return allFrames.filter((_, i) => i % n === 0);
+}
+
+function renderTrackListFromData(tracks) {
+  const panel = document.getElementById('tracksPanel');
+  panel.innerHTML = '';
+
+  // Apply assessment cache to all tracks
+  const enriched = tracks.map(t => ISR.applyAssessmentCache({...t}));
+
+  const filtered = ISR.STATE.trackFilter ? enriched.filter(t => t.type === ISR.STATE.trackFilter) : enriched;
+
+  if (filtered.length === 0) {
+    panel.innerHTML = '<div style="color: var(--text-tertiary); font-size: 10px; text-align: center; padding: 20px;">No tracks detected.</div>';
+    return;
+  }
+
+  // Sort: mission-relevant first, then assessed before unassessed before stale, then by confidence descending
+  const _statusOrder = { 'ASSESSED': 0, 'UNASSESSED': 1, 'STALE': 2 };
+  filtered.sort((a, b) => {
+    const aMR = a.mission_relevant === true ? 0 : 1;
+    const bMR = b.mission_relevant === true ? 0 : 1;
+    if (aMR !== bMR) return aMR - bMR;
+    const aStatus = _statusOrder[a.assessment_status] ?? 1;
+    const bStatus = _statusOrder[b.assessment_status] ?? 1;
+    if (aStatus !== bStatus) return aStatus - bStatus;
+    return (b.score || 0) - (a.score || 0);
+  });
+
+  // If there's a filter, add a clear filter button
+  if (ISR.STATE.trackFilter) {
+    const clearBtn = document.createElement('button');
+    clearBtn.className = 'inspect-back-btn';
+    clearBtn.style.marginBottom = '8px';
+    clearBtn.style.width = '100%';
+    clearBtn.textContent = 'CLEAR FILTER — SHOW ALL';
+    clearBtn.addEventListener('click', () => {
+      ISR.STATE.trackFilter = null;
+      renderTrackListFromData(ISR.STATE._realTracks || []);
+    });
+    panel.appendChild(clearBtn);
+  }
+
+  filtered.forEach((t, idx) => {
+    const isSelected = ISR.STATE.selectedTrackId === t.track_id;
+    const isNotRelevant = t.mission_relevant === false;
+
+    const card = document.createElement('div');
+    card.className = 'track-card' + (isSelected ? ' active' : '') + (isNotRelevant ? ' not-relevant' : '');
+    card.dataset.trackId = t.track_id;
+    card.style.animation = `track-card-enter 0.3s ease ${idx * 30}ms both`;
+
+    const speedStr = t.speed_kph ? `${t.speed_kph.toFixed(1)} kph` : '--';
+    const dirStr = t.direction_clock ? `${t.direction_clock}h` : '';
+    const idStr = `ID:${t.track_id}`;
+
+    // Status badge
+    const badge = ISR.getStatusBadgeHTML(t);
+
+    // Reason text
+    const reasonHTML = t.reason ? `<div class="reason">${t.reason}</div>` : '';
+
+    // Features table (only visible when card is active/selected — matches frontend)
+    const features = ISR.buildFeatures(t.gpt_raw);
+    const featureEntries = Object.entries(features).slice(0, 12);
+    let featuresHTML = '';
+    if (isSelected && featureEntries.length > 0) {
+      featuresHTML = '<div class="features-table">' +
+        featureEntries.map(([k, v]) =>
+          `<span class="feat-key">${k.replace(/_/g, ' ')}</span><span class="feat-val">${v}</span>`
+        ).join('') +
+        '</div>';
+    }
+
+    card.innerHTML = `
+      <div class="track-dot" style="background: ${t.color}; box-shadow: 0 0 4px ${t.color};"></div>
+      <div class="track-info">
+        <div class="track-label" style="display:flex;align-items:center;gap:6px;">
+          <span>${t.label}</span>
+          ${badge}
+        </div>
+        <div class="track-meta">
+          <span>${speedStr}</span>
+          ${dirStr ? `<span>${dirStr}</span>` : ''}
+          <span>${idStr}</span>
+        </div>
+        ${reasonHTML}
+        ${featuresHTML}
+      </div>
+    `;
+
+    panel.appendChild(card);
+  });
+
+  // Attach event listeners via delegation on the panel (once, not per-card)
+  panel.onclick = (e) => {
+    const card = e.target.closest('.track-card');
+    if (!card) return;
+    const trackId = card.dataset.trackId;
+    ISR.STATE.selectedTrackId = trackId;
+    document.dispatchEvent(new CustomEvent('track-selected', { detail: { id: trackId } }));
+    if (ISR.STATE.current === 'analysis' || ISR.STATE.current === 'playing' || ISR.STATE.current === 'inspect') {
+      ISR.enterInspectState(trackId);
+    }
+    // Toggle active class without full re-render + remove old feature tables
+    panel.querySelectorAll('.track-card.active').forEach(c => {
+      c.classList.remove('active');
+      const oldTable = c.querySelector('.features-table');
+      if (oldTable) oldTable.remove();
+    });
+    card.classList.add('active');
+    // Expand features on newly active card (use Map index for O(1) lookup)
+    const trackIdx = ISR.STATE._realTrackIndex?.get(trackId);
+    const track = trackIdx !== undefined ? ISR.STATE._realTracks[trackIdx] : (ISR.STATE._realTracks || []).find(t => t.track_id === trackId);
+    const features = ISR.buildFeatures(track?.gpt_raw);
+    const featureEntries = Object.entries(features).slice(0, 12);
+    let existingTable = card.querySelector('.features-table');
+    if (!existingTable && featureEntries.length > 0) {
+      const tbl = document.createElement('div');
+      tbl.className = 'features-table';
+      tbl.style.display = 'grid';
+      tbl.innerHTML = featureEntries.map(([k, v]) =>
+        `<span class="feat-key">${k.replace(/_/g, ' ')}</span><span class="feat-val">${v}</span>`
+      ).join('');
+      card.querySelector('.track-info').appendChild(tbl);
+    }
+    // Update SVG overlay selection (targeted update, not full rebuild)
+    _updateSvgSelection(trackId);
+    card.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+  };
+  // Use assignment (not addEventListener) to avoid stacking on repeated calls
+  panel.onmouseover = (e) => {
+    const card = e.target.closest('.track-card');
+    if (!card) return;
+    ISR._updateTrackHighlight(card.dataset.trackId);
+  };
+  panel.onmouseout = (e) => {
+    const card = e.target.closest('.track-card');
+    if (!card) return;
+    ISR._updateTrackHighlight(null);
+  };
+
+  // Also update SVG overlay when track list re-renders
+  if (ISR.STATE.jobId && ISR.STATE._realTracks) {
+    renderSvgOverlay(enriched);
+  }
+}
+
+/* ================================================================
+ *  SVG Overlay — Mission-colored detection boxes
+ * ================================================================ */
+
+let _svgContainerCache = null;
+let _svgCacheTime = 0;
+
+function renderSvgOverlay(tracks) {
+  const svg = document.getElementById('detectionOverlay');
+  if (!svg) return;
+  // Use innerHTML for fastest clear (single reflow vs per-child removal)
+  svg.innerHTML = '';
+
+  if (!tracks || tracks.length === 0) return;
+
+  const processedVideo = document.getElementById('processedVideo');
+  if (!processedVideo || !processedVideo.videoWidth) return;
+
+  const videoW = processedVideo.videoWidth;
+  const videoH = processedVideo.videoHeight;
+
+  // Cache container rect (expensive getBoundingClientRect) — refresh every 500ms
+  const now = performance.now();
+  const container = document.getElementById('videoFeed');
+  if (!_svgContainerCache || now - _svgCacheTime > 500) {
+    _svgContainerCache = container.getBoundingClientRect();
+    _svgCacheTime = now;
+  }
+  const containerRect = _svgContainerCache;
+  const containerW = containerRect.width;
+  const containerH = containerRect.height;
+
+  const videoAspect = videoW / videoH;
+  const containerAspect = containerW / containerH;
+  let renderW, renderH, offsetX, offsetY;
+
+  if (videoAspect > containerAspect) {
+    renderW = containerW;
+    renderH = containerW / videoAspect;
+    offsetX = 0;
+    offsetY = (containerH - renderH) / 2;
+  } else {
+    renderH = containerH;
+    renderW = containerH * videoAspect;
+    offsetX = (containerW - renderW) / 2;
+    offsetY = 0;
+  }
+
+  // Position SVG to cover only the video rendered area (single write to avoid reflows)
+  svg.style.cssText = `position:absolute;top:${offsetY}px;left:${offsetX}px;width:${renderW}px;height:${renderH}px;z-index:3;pointer-events:all;`;
+
+  for (const t of tracks) {
+    const bbox = t.bbox; // [x1, y1, x2, y2] in pixels
+    if (!bbox || bbox.length < 4) continue;
+
+    // Normalize to 0-1 using video dimensions
+    const nx1 = bbox[0] / videoW;
+    const ny1 = bbox[1] / videoH;
+    const nx2 = bbox[2] / videoW;
+    const ny2 = bbox[3] / videoH;
+    const nw = nx2 - nx1;
+    const nh = ny2 - ny1;
+
+    // Determine color by mission status (matches frontend overlays.js)
+    let strokeColor = 'rgba(255, 255, 255, 0.3)';
+    if (t.satisfies === true) {
+      strokeColor = 'rgba(40, 167, 69, 0.8)';
+    } else if (t.satisfies === false) {
+      strokeColor = 'rgba(220, 53, 69, 0.8)';
+    }
+
+    const isSelected = ISR.STATE.selectedTrackId === t.track_id;
+    const isHighlighted = ISR.STATE.highlightTrackId === t.track_id;
+
+    const ns = 'http://www.w3.org/2000/svg';
+    const g = document.createElementNS(ns, 'g');
+    g.dataset.trackId = t.track_id;
+
+    const rect = document.createElementNS(ns, 'rect');
+    rect.setAttribute('x', nx1);
+    rect.setAttribute('y', ny1);
+    rect.setAttribute('width', nw);
+    rect.setAttribute('height', nh);
+    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', isSelected ? '0.003' : '0.002');
+    rect.setAttribute('vector-effect', 'non-scaling-stroke');
+    rect.dataset.baseStroke = strokeColor; // cached for targeted selection updates
+
+    g.appendChild(rect);
+
+    // Selected glow border (matches frontend)
+    if (isSelected) {
+      const glow = document.createElementNS(ns, 'rect');
+      glow.setAttribute('x', nx1);
+      glow.setAttribute('y', ny1);
+      glow.setAttribute('width', nw);
+      glow.setAttribute('height', nh);
+      glow.setAttribute('fill', 'none');
+      glow.setAttribute('stroke', 'rgba(96, 165, 250, 0.35)');
+      glow.setAttribute('stroke-width', '1');
+      glow.setAttribute('vector-effect', 'non-scaling-stroke');
+      glow.classList.add('selection-glow');
+      g.appendChild(glow);
+    }
+
+    // Click handler → inspect
+    g.addEventListener('click', (e) => {
+      e.stopPropagation();
+      ISR.STATE.selectedTrackId = t.track_id;
+      document.dispatchEvent(new CustomEvent('track-selected', { detail: { id: t.track_id } }));
+      ISR.enterInspectState(t.track_id);
+    });
+
+    // Hover → highlight via shared helper
+    g.addEventListener('mouseenter', () => ISR._updateTrackHighlight(t.track_id));
+    g.addEventListener('mouseleave', () => ISR._updateTrackHighlight(null));
+
+    svg.appendChild(g);
+  }
+}
+
+/** Update SVG selection styling without full rebuild. */
+function _updateSvgSelection(selectedId) {
+  const svg = document.getElementById('detectionOverlay');
+  if (!svg) return;
+  const ns = 'http://www.w3.org/2000/svg';
+  svg.querySelectorAll('g[data-track-id]').forEach(g => {
+    const tid = g.dataset.trackId;
+    const isSelected = tid === selectedId;
+    const rect = g.querySelector('rect');
+    if (!rect) return;
+    // Determine base stroke from data attribute (set during full render)
+    const baseStroke = rect.dataset.baseStroke || 'rgba(255, 255, 255, 0.3)';
+    rect.setAttribute('fill', isSelected ? 'rgba(59, 130, 246, 0.12)' : 'none');
+    rect.setAttribute('stroke', isSelected ? 'rgba(59, 130, 246, 0.7)' : baseStroke);
+    rect.setAttribute('stroke-width', isSelected ? '0.003' : '0.002');
+    // Handle glow rect (second child if exists)
+    const glow = g.querySelector('.selection-glow');
+    if (isSelected && !glow) {
+      const glowRect = document.createElementNS(ns, 'rect');
+      glowRect.setAttribute('x', rect.getAttribute('x'));
+      glowRect.setAttribute('y', rect.getAttribute('y'));
+      glowRect.setAttribute('width', rect.getAttribute('width'));
+      glowRect.setAttribute('height', rect.getAttribute('height'));
+      glowRect.setAttribute('fill', 'none');
+      glowRect.setAttribute('stroke', 'rgba(96, 165, 250, 0.35)');
+      glowRect.setAttribute('stroke-width', '1');
+      glowRect.setAttribute('vector-effect', 'non-scaling-stroke');
+      glowRect.classList.add('selection-glow');
+      g.appendChild(glowRect);
+    } else if (!isSelected && glow) {
+      glow.remove();
+    }
+  });
+}
+
+/* ================================================================
+ *  TASK 6: Timeline — Real Summary → Waveform + Event Derivation
+ * ================================================================ */
+
+async function buildRealTimeline(jobId, summary) {
+  // 1. Parse summary.frames
+  const frames = summary.frames || {};
+  const frameCounts = Object.entries(frames)
+    .map(([k, v]) => [parseInt(k, 10), v])
+    .sort((a, b) => a[0] - b[0]);
+
+  // 2. Build density array (100 segments)
+  const totalFrames = summary.total_frames || ISR.STATE.totalFrames;
+  const segments = 100;
+  const segSize = totalFrames / segments;
+  const density = new Array(segments).fill(0);
+
+  for (const [frameIdx, count] of frameCounts) {
+    const seg = Math.min(Math.floor(frameIdx / segSize), segments - 1);
+    density[seg] += (typeof count === 'number' ? count : (count.count || 0));
+  }
+
+  // Normalize 0-1
+  const maxDensity = Math.max(...density, 1);
+  const normalizedDensity = density.map(v => v / maxDensity);
+
+  // 3. Render waveform
+  const waveformCanvas = document.getElementById('waveformCanvas');
+  if (waveformCanvas) {
+    renderWaveformFromDensity(waveformCanvas, normalizedDensity);
+  }
+
+  // 4. Derive events (awaited so timeline is fully built before state transition)
+  try {
+    const events = await deriveTimelineEvents(jobId, summary, frameCounts);
+    // 5. Render event markers
+    renderEventMarkersFromData(events);
+
+    // 6. Render event log
+    ISR.STATE._derivedEvents = events;
+    if (ISR.STATE.eventLogOpen) renderEventLogFromData(events);
+
+    // 7. Render legend from track type counts
+    renderRealTimelineLegend(events);
+  } catch (err) {
+    console.warn('[ISR] Event derivation failed:', err);
+  }
+
+  // 8. Update time end display
+  const fps = summary.fps || ISR.STATE.fps;
+  const timeEndEl = document.getElementById('timeEnd');
+  if (timeEndEl) timeEndEl.textContent = ISR.formatTime(totalFrames / fps);
+}
+
+function renderWaveformFromDensity(canvas, densityData) {
+  const rect = canvas.parentElement.getBoundingClientRect();
+  const dpr = window.devicePixelRatio || 1;
+  canvas.width = rect.width * dpr;
+  canvas.height = rect.height * dpr;
+  canvas.style.width = rect.width + 'px';
+  canvas.style.height = rect.height + 'px';
+
+  const ctx = canvas.getContext('2d');
+  ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+
+  const w = rect.width;
+  const h = rect.height;
+  const barW = w / densityData.length;
+
+  ctx.clearRect(0, 0, w, h);
+
+  for (let i = 0; i < densityData.length; i++) {
+    const val = densityData[i];
+    const barH = val * h * 0.85;
+    const x = i * barW;
+    const y = h - barH;
+
+    // Color gradient based on density value
+    const hue = 220 - val * 180; // blue(220) → amber range
+    ctx.fillStyle = val > 0.7 ? '#f59e0b88' : val > 0.4 ? '#3b82f688' : '#22c55e88';
+    ctx.fillRect(x, y, Math.max(barW - 1, 1), barH);
+  }
+}
+
+async function deriveTimelineEvents(jobId, summary, frameCounts) {
+  const events = [];
+  const fps = summary.fps || ISR.STATE.fps;
+  const framesToSample = getKeyframesToSample();
+
+  const seenIds = new Set();
+  const seenTypes = new Set();
+  const trackSpeeds = new Map();
+  const lostTracks = new Map(); // trackId → frame when lost
+
+  // Fetch track data for sampled keyframes (batched in groups of 10)
+  let prevTracks = [];
+  let prevFrame = 0;
+
+  for (let i = 0; i < framesToSample.length; i += 10) {
+    const batch = framesToSample.slice(i, i + 10);
+    const results = await Promise.all(batch.map(f => ISR.fetchTracks(jobId, f)));
+
+    for (let j = 0; j < batch.length; j++) {
+      const frameIdx = batch[j];
+      const tracks = results[j] || [];
+      const currentIds = new Set();
+
+      for (const t of tracks) {
+        const tid = t.track_id !== undefined ? t.track_id : t.id;
+        if (tid === undefined) continue;
+        currentIds.add(tid);
+        const label = t.label_name || t.label || 'object';
+        const type = ISR.labelToType(label);
+        const time = ISR.formatTime(frameIdx / fps);
+
+        // New track
+        if (!seenIds.has(tid)) {
+          seenIds.add(tid);
+          events.push({
+            frame: frameIdx, time, type: 'detection',
+            label: `New ${label}`, description: `Track ${tid} first detected.`,
+            priority: 'normal',
+          });
+
+          // First of type
+          if (!seenTypes.has(type)) {
+            seenTypes.add(type);
+            events.push({
+              frame: frameIdx, time, type: 'detection',
+              label: `First ${type}`, description: `First ${type} class object detected.`,
+              priority: 'normal',
+            });
+          }
+        }
+
+        // Track reappeared (was lost)
+        if (lostTracks.has(tid)) {
+          lostTracks.delete(tid);
+          events.push({
+            frame: frameIdx, time, type: 'tracking',
+            label: `Track Reappeared`, description: `${label} (${tid}) re-identified after occlusion.`,
+            priority: 'low',
+          });
+        }
+
+        // Speed alerts
+        if (t.speed_kph !== undefined && t.speed_kph !== null) {
+          if (t.speed_kph > 60) {
+            events.push({
+              frame: frameIdx, time, type: 'alert',
+              label: `High Speed`, description: `${label} (${tid}) traveling at ${t.speed_kph.toFixed(1)} kph.`,
+              priority: 'high',
+            });
+          }
+
+          const prevSpeed = trackSpeeds.get(tid);
+          if (prevSpeed !== undefined && Math.abs(t.speed_kph - prevSpeed) > 20) {
+            events.push({
+              frame: frameIdx, time, type: 'alert',
+              label: `Speed Change`, description: `${label} (${tid}): ${prevSpeed.toFixed(0)} → ${t.speed_kph.toFixed(0)} kph.`,
+              priority: 'high',
+            });
+          }
+          trackSpeeds.set(tid, t.speed_kph);
+        }
+
+        // Mission relevance
+        if (t.mission_relevant !== undefined) {
+          if (t.mission_relevant === true) {
+            events.push({
+              frame: frameIdx, time, type: 'alert',
+              label: `MISSION MATCH`, description: `${label} (${tid}) matches mission criteria.`,
+              priority: 'critical',
+            });
+          } else if (t.mission_relevant === false) {
+            events.push({
+              frame: frameIdx, time, type: 'system',
+              label: `Assessed`, description: `${label} (${tid}) assessed — not relevant.`,
+              priority: 'normal',
+            });
+          }
+        }
+
+        // Features
+        if (t.features) {
+          const featureDesc = [];
+          if (t.features.posture) featureDesc.push(`posture: ${t.features.posture}`);
+          if (t.features.gait) featureDesc.push(`gait: ${t.features.gait}`);
+          if (t.features.clothing) featureDesc.push(`clothing: ${t.features.clothing}`);
+          if (featureDesc.length > 0) {
+            events.push({
+              frame: frameIdx, time, type: 'detection',
+              label: `Features`, description: `${label} (${tid}): ${featureDesc.join(', ')}`,
+              priority: 'low',
+            });
+          }
+        }
+      }
+
+      // Track lost: was in prev but not in current
+      for (const t of prevTracks) {
+        const tid = t.track_id !== undefined ? t.track_id : t.id;
+        if (tid !== undefined && !currentIds.has(tid) && !lostTracks.has(tid)) {
+          lostTracks.set(tid, frameIdx);
+          const label = t.label_name || t.label || 'object';
+          events.push({
+            frame: frameIdx, time: ISR.formatTime(frameIdx / fps), type: 'tracking',
+            label: `Track Lost`, description: `${label} (${tid}) lost from view.`,
+            priority: 'normal',
+          });
+        }
+      }
+
+      // Density events
+      if (frameCounts.length > 0) {
+        const fc = frameCounts.find(([f]) => f === frameIdx);
+        if (fc) {
+          const currentCount = typeof fc[1] === 'number' ? fc[1] : (fc[1].count || 0);
+          // Find previous count
+          const prevFcIdx = frameCounts.findIndex(([f]) => f === frameIdx);
+          if (prevFcIdx > 0) {
+            const prevCount = typeof frameCounts[prevFcIdx - 1][1] === 'number'
+              ? frameCounts[prevFcIdx - 1][1]
+              : (frameCounts[prevFcIdx - 1][1].count || 0);
+            // Surge: >2x previous
+            if (prevCount > 0 && currentCount > prevCount * 2) {
+              events.push({
+                frame: frameIdx, time: ISR.formatTime(frameIdx / fps), type: 'alert',
+                label: `Activity Surge`, description: `Detections surged from ${prevCount} to ${currentCount}.`,
+                priority: 'high',
+              });
+            }
+          }
+          // Activity gap: 0 detections for >2s worth of frames
+          if (currentCount === 0 && prevFcIdx > 0) {
+            const prevFrame2 = frameCounts[prevFcIdx - 1][0];
+            if (frameIdx - prevFrame2 > fps * 2) {
+              events.push({
+                frame: frameIdx, time: ISR.formatTime(frameIdx / fps), type: 'system',
+                label: `Activity Gap`, description: `No detections for ${((frameIdx - prevFrame2) / fps).toFixed(1)}s.`,
+                priority: 'low',
+              });
+            }
+          }
+        }
+      }
+
+      prevTracks = tracks;
+      prevFrame = frameIdx;
+    }
+  }
+
+  // Deduplicate events within 30 frames with same description
+  const deduped = [];
+  for (const evt of events) {
+    const isDupe = deduped.some(e =>
+      Math.abs(e.frame - evt.frame) < 30 && e.description === evt.description
+    );
+    if (!isDupe) deduped.push(evt);
+  }
+
+  // Sort by frame
+  deduped.sort((a, b) => a.frame - b.frame);
+
+  return deduped;
+}
+
+function renderEventMarkersFromData(events) {
+  const container = document.getElementById('eventMarkers');
+  if (!container) return;
+  container.innerHTML = '';
+
+  const PRIORITY_COLORS = {
+    critical: '#ef4444',
+    high: '#f59e0b',
+    normal: '#3b82f6',
+    low: '#22c55e',
+  };
+
+  for (const evt of events) {
+    const pct = (evt.frame / ISR.STATE.totalFrames) * 100;
+    const marker = document.createElement('div');
+    marker.className = 'event-marker';
+    marker.style.left = pct + '%';
+    marker.style.background = PRIORITY_COLORS[evt.priority] || PRIORITY_COLORS.normal;
+    if (evt.priority === 'critical' || evt.priority === 'high') {
+      marker.style.boxShadow = `0 0 4px ${PRIORITY_COLORS[evt.priority]}`;
+    }
+    marker.title = `${evt.time} — ${evt.label}`;
+
+    marker.addEventListener('click', () => {
+      ISR.STATE.playheadFrame = evt.frame;
+      ISR.updatePlayheadPosition();
+      ISR.updateFrameCounter();
+      ISR.updateTimeDisplay();
+      // Also seek video
+      const processedVideo = document.getElementById('processedVideo');
+      if (ISR.STATE.jobId && processedVideo) {
+        processedVideo.currentTime = evt.frame / ISR.STATE.fps;
+      }
+    });
+
+    // Tooltip on hover
+    marker.addEventListener('mouseenter', () => {
+      document.querySelectorAll('.event-marker-tooltip').forEach(t => t.remove());
+      const tooltip = document.createElement('div');
+      tooltip.className = 'event-marker-tooltip';
+      tooltip.textContent = `${evt.time} — ${evt.label}: ${evt.description}`;
+      marker.appendChild(tooltip);
+    });
+    marker.addEventListener('mouseleave', () => {
+      marker.querySelectorAll('.event-marker-tooltip').forEach(t => t.remove());
+    });
+
+    container.appendChild(marker);
+  }
+}
+
+function renderEventLogFromData(events) {
+  const log = document.getElementById('eventLog');
+  if (!log) return;
+
+  const PRIORITY_STYLES = {
+    critical: { bg: 'rgba(239,68,68,0.15)', color: '#ef4444' },
+    high: { bg: 'rgba(245,158,11,0.12)', color: '#f59e0b' },
+    normal: { bg: 'rgba(59,130,246,0.12)', color: '#3b82f6' },
+    low: { bg: 'rgba(34,197,94,0.12)', color: '#22c55e' },
+  };
+
+  log.innerHTML = events.map(evt => {
+    const ps = PRIORITY_STYLES[evt.priority] || PRIORITY_STYLES.normal;
+    return `
+      <div class="event-log-entry" data-frame="${evt.frame}">
+        <span class="event-log-time">${evt.time}</span>
+        <span class="event-log-type" style="background: ${ps.bg}; color: ${ps.color};">${evt.type}</span>
+        <span class="event-log-label">${evt.label}</span>
+        <span class="event-log-desc">${evt.description}</span>
+      </div>`;
+  }).join('');
+
+  log.querySelectorAll('.event-log-entry').forEach(entry => {
+    entry.addEventListener('click', () => {
+      const frame = parseInt(entry.dataset.frame, 10);
+      ISR.STATE.playheadFrame = frame;
+      ISR.updatePlayheadPosition();
+      ISR.updateFrameCounter();
+      ISR.updateTimeDisplay();
+      const processedVideo = document.getElementById('processedVideo');
+      if (ISR.STATE.jobId && processedVideo) {
+        processedVideo.currentTime = frame / ISR.STATE.fps;
+      }
+    });
+  });
+}
+
+function renderRealTimelineLegend(events) {
+  const legend = document.getElementById('timelineLegend');
+  if (!legend) return;
+
+  const typeCounts = {};
+  for (const evt of events) {
+    typeCounts[evt.type] = (typeCounts[evt.type] || 0) + 1;
+  }
+
+  const TYPE_COLORS = {
+    system: 'var(--text-tertiary)',
+    detection: 'var(--accent)',
+    tracking: 'var(--success)',
+    alert: 'var(--danger)',
+  };
+
+  legend.innerHTML = Object.entries(typeCounts).map(([type, count]) =>
+    `<span class="timeline-legend-item"><span class="dot" style="background: ${TYPE_COLORS[type] || 'var(--text-tertiary)'};"></span> ${type} (${count})</span>`
+  ).join('');
+}
+
+// ── Export to namespace ────────────────────────────────────────��
+
+Object.assign(window.ISR, {
+  startRealProcessing,
+  cleanupProcessing,
+  resetToReady,
+  enterRealAnalysis,
+  renderRealDetections,
+  renderRealTrackList,
+  getKeyframesToSample,
+  renderTrackListFromData,
+  renderSvgOverlay,
+  _updateSvgSelection,
+  buildRealTimeline,
+  deriveEventsFromTracks: deriveTimelineEvents,
+  renderWaveformFromDensity,
+  renderEventMarkersFromData,
+  renderEventLogFromData,
+  renderRealTimelineLegend,
+});

demo/js/render.js

@@ -0,0 +1,280 @@
+window.ISR = window.ISR || {};
+
+/* ================================================================
+ *  TASK 3: Top Bar — Clock
+ * ================================================================ */
+
+function updateClock() {
+  const el = document.getElementById('liveClock');
+  if (!el) return;
+  const now = new Date();
+  const h = String(now.getUTCHours()).padStart(2, '0');
+  const m = String(now.getUTCMinutes()).padStart(2, '0');
+  const s = String(now.getUTCSeconds()).padStart(2, '0');
+  el.textContent = `${h}:${m}:${s}Z`;
+}
+
+/* ================================================================
+ *  TASK 4: Video Feed — Rendering
+ * ================================================================ */
+
+let videoCanvas, videoCtx, overlayCanvas, overlayCtx;
+let scanLineY = 0;
+let animFrame = 0;
+let playbackSpeed = 1;
+let lastFrameTime = 0;
+
+function initCanvases() {
+  videoCanvas = document.getElementById('videoCanvas');
+  overlayCanvas = document.getElementById('overlayCanvas');
+  videoCtx = videoCanvas.getContext('2d');
+  overlayCtx = overlayCanvas.getContext('2d');
+  resizeCanvases();
+}
+
+function resizeCanvases() {
+  const container = document.getElementById('videoFeed');
+  const rect = container.getBoundingClientRect();
+  const dpr = window.devicePixelRatio || 1;
+  [videoCanvas, overlayCanvas].forEach(c => {
+    c.width = rect.width * dpr;
+    c.height = rect.height * dpr;
+    c.style.width = rect.width + 'px';
+    c.style.height = rect.height + 'px';
+    c.getContext('2d').setTransform(dpr, 0, 0, dpr, 0, 0);
+  });
+}
+
+function renderVideoBackground(ctx, w, h, frame) {
+  ctx.fillStyle = '#0a0f1a';
+  ctx.fillRect(0, 0, w, h);
+
+  // Grid lines
+  ctx.strokeStyle = 'rgba(255,255,255,0.02)';
+  ctx.lineWidth = 0.5;
+  for (let x = 0; x < w; x += 40) {
+    ctx.beginPath();
+    ctx.moveTo(x, 0);
+    ctx.lineTo(x, h);
+    ctx.stroke();
+  }
+  for (let y = 0; y < h; y += 40) {
+    ctx.beginPath();
+    ctx.moveTo(0, y);
+    ctx.lineTo(w, y);
+    ctx.stroke();
+  }
+
+  // Scan line — slow horizontal sweep
+  scanLineY = (scanLineY + 0.5) % h;
+  const scanGrad = ctx.createLinearGradient(0, scanLineY - 30, 0, scanLineY + 30);
+  scanGrad.addColorStop(0, 'rgba(255,255,255,0)');
+  scanGrad.addColorStop(0.5, 'rgba(255,255,255,0.015)');
+  scanGrad.addColorStop(1, 'rgba(255,255,255,0)');
+  ctx.fillStyle = scanGrad;
+  ctx.fillRect(0, scanLineY - 30, w, 60);
+
+  // Vignette effect — darker at edges
+  const vignetteGrad = ctx.createRadialGradient(w * 0.5, h * 0.5, Math.min(w, h) * 0.25, w * 0.5, h * 0.5, Math.max(w, h) * 0.75);
+  vignetteGrad.addColorStop(0, 'rgba(0,0,0,0)');
+  vignetteGrad.addColorStop(1, 'rgba(0,0,0,0.35)');
+  ctx.fillStyle = vignetteGrad;
+  ctx.fillRect(0, 0, w, h);
+
+  // Corner crosshair markers — military tactical HUD
+  const crossLen = 18;
+  const crossOff = 12;
+  ctx.strokeStyle = 'rgba(255,255,255,0.08)';
+  ctx.lineWidth = 1;
+
+  // Top-left
+  ctx.beginPath();
+  ctx.moveTo(crossOff, crossOff); ctx.lineTo(crossOff + crossLen, crossOff);
+  ctx.moveTo(crossOff, crossOff); ctx.lineTo(crossOff, crossOff + crossLen);
+  ctx.stroke();
+
+  // Top-right
+  ctx.beginPath();
+  ctx.moveTo(w - crossOff, crossOff); ctx.lineTo(w - crossOff - crossLen, crossOff);
+  ctx.moveTo(w - crossOff, crossOff); ctx.lineTo(w - crossOff, crossOff + crossLen);
+  ctx.stroke();
+
+  // Bottom-left
+  ctx.beginPath();
+  ctx.moveTo(crossOff, h - crossOff); ctx.lineTo(crossOff + crossLen, h - crossOff);
+  ctx.moveTo(crossOff, h - crossOff); ctx.lineTo(crossOff, h - crossOff - crossLen);
+  ctx.stroke();
+
+  // Bottom-right
+  ctx.beginPath();
+  ctx.moveTo(w - crossOff, h - crossOff); ctx.lineTo(w - crossOff - crossLen, h - crossOff);
+  ctx.moveTo(w - crossOff, h - crossOff); ctx.lineTo(w - crossOff, h - crossOff - crossLen);
+  ctx.stroke();
+}
+
+// Track which boxes have been seen, for fade-in animation
+const boxFirstSeen = {};
+let boxAnimTime = 0;
+
+function renderDetections(ctx, w, h, frame) {
+  const STATE = ISR.STATE;
+  ctx.clearRect(0, 0, w, h);
+  const tracks = ISR.getTracksAtFrame(frame);
+  boxAnimTime = performance.now();
+
+  for (const t of tracks) {
+    const bx = (t.bbox.x / 100) * w;
+    const by = (t.bbox.y / 100) * h;
+    const bw = (t.bbox.w / 100) * w;
+    const bh = (t.bbox.h / 100) * h;
+
+    // Fade-in: track when boxes first appear
+    if (!boxFirstSeen[t.id]) {
+      boxFirstSeen[t.id] = boxAnimTime;
+    }
+    const age = boxAnimTime - boxFirstSeen[t.id];
+    const fadeAlpha = Math.min(1, age / 300); // 300ms fade-in
+
+    const isSelected = (STATE.selectedTrackId === t.id);
+    const isHighlighted = (ISR.highlightedTrackId === t.id) || isSelected;
+    const lineWidth = isHighlighted ? 2.5 : 1.5;
+
+    ctx.globalAlpha = fadeAlpha;
+
+    // Pulsing glow for highlighted boxes
+    if (isHighlighted) {
+      const pulse = 0.6 + 0.4 * Math.sin(boxAnimTime / 300);
+      ctx.shadowColor = t.color;
+      ctx.shadowBlur = 8 + 8 * pulse;
+    }
+
+    // Selected box: animated dashed border
+    if (isSelected) {
+      ctx.setLineDash([6, 4]);
+      ctx.lineDashOffset = -(boxAnimTime / 50); // marching ants
+      ctx.strokeStyle = '#fff';
+      ctx.lineWidth = 2;
+      ISR.roundRect(ctx, bx, by, bw, bh, 3);
+      ctx.stroke();
+      ctx.setLineDash([]);
+      ctx.lineDashOffset = 0;
+    }
+
+    // Rounded rect border
+    ctx.strokeStyle = isHighlighted ? '#fff' : t.color;
+    ctx.lineWidth = lineWidth;
+    ISR.roundRect(ctx, bx, by, bw, bh, 3);
+    ctx.stroke();
+
+    ctx.shadowColor = 'transparent';
+    ctx.shadowBlur = 0;
+
+    // Faint fill
+    ctx.fillStyle = t.color + (isHighlighted ? '1A' : '0D');
+    ISR.roundRect(ctx, bx, by, bw, bh, 3);
+    ctx.fill();
+
+    // Label badge above
+    const labelText = `${t.label.split(' ').pop()} ${t.confidence.toFixed(2)}`;
+    ctx.font = '500 9px Inter, sans-serif';
+    const tm = ctx.measureText(labelText);
+    const lw = tm.width + 8;
+    const lh = 14;
+    const lx = bx;
+    const ly = by - lh - 3;
+
+    ctx.fillStyle = t.color + 'CC';
+    ISR.roundRect(ctx, lx, ly, lw, lh, 2);
+    ctx.fill();
+
+    ctx.fillStyle = '#fff';
+    ctx.textBaseline = 'middle';
+    ctx.fillText(labelText, lx + 4, ly + lh / 2);
+
+    ctx.globalAlpha = 1;
+  }
+}
+
+function updateFrameCounter() {
+  const STATE = ISR.STATE;
+  const el = document.getElementById('frameCounter');
+  if (el) el.textContent = `FRM ${STATE.playheadFrame} / ${STATE.totalFrames}`;
+}
+
+function mainRenderLoop(timestamp) {
+  const STATE = ISR.STATE;
+  if (!videoCanvas) { requestAnimationFrame(mainRenderLoop); return; }
+  const container = document.getElementById('videoFeed');
+  const rect = container.getBoundingClientRect();
+  const w = rect.width;
+  const h = rect.height;
+
+  renderVideoBackground(videoCtx, w, h, STATE.playheadFrame);
+
+  const svgOverlay = document.getElementById('detectionOverlay');
+  if (STATE.current !== 'ready') {
+    // Use real detection rendering when we have a jobId in analysis/inspect/playing
+    if (STATE.jobId && (STATE.current === 'analysis' || STATE.current === 'playing' || STATE.current === 'inspect')) {
+      // Real detection rendering is driven by video timeupdate, NOT the render loop
+      // Only update SVG pointer events here
+      if (svgOverlay) svgOverlay.style.pointerEvents = 'all';
+    } else {
+      renderDetections(overlayCtx, w, h, STATE.playheadFrame);
+      // Hide SVG overlay in mock mode
+      if (svgOverlay) {
+        while (svgOverlay.firstChild) svgOverlay.removeChild(svgOverlay.firstChild);
+        svgOverlay.style.pointerEvents = 'none';
+      }
+    }
+  } else {
+    overlayCtx.clearRect(0, 0, w, h);
+    // Clear and disable SVG overlay in ready state
+    if (svgOverlay) {
+      while (svgOverlay.firstChild) svgOverlay.removeChild(svgOverlay.firstChild);
+      svgOverlay.style.pointerEvents = 'none';
+    }
+  }
+
+  // Advance playhead if playing (mock playback only — video element handles real playback)
+  if (STATE.isPlaying && !STATE.jobId && (STATE.current === 'playing' || STATE.current === 'analysis')) {
+    if (!lastFrameTime) lastFrameTime = timestamp;
+    const elapsed = timestamp - lastFrameTime;
+    const framesPerMs = (STATE.fps * playbackSpeed) / 1000;
+    const framesToAdvance = Math.floor(elapsed * framesPerMs);
+    if (framesToAdvance > 0) {
+      STATE.playheadFrame = Math.min(STATE.playheadFrame + framesToAdvance, STATE.totalFrames);
+      lastFrameTime = timestamp;
+      updateFrameCounter();
+      ISR.updatePlayheadPosition();
+      ISR.updateTimeDisplay();
+      if (STATE.playheadFrame >= STATE.totalFrames) {
+        STATE.isPlaying = false;
+        STATE.playheadFrame = STATE.totalFrames;
+        document.getElementById('playPauseBtn').innerHTML = '&#9654;';
+      }
+    }
+  }
+
+  requestAnimationFrame(mainRenderLoop);
+}
+
+// ── Export to namespace ─────────────────────────────────────────
+
+Object.assign(window.ISR, {
+  updateClock,
+  initCanvases,
+  resizeCanvases,
+  renderVideoBackground,
+  renderDetections,
+  updateFrameCounter,
+  mainRenderLoop,
+  boxFirstSeen,
+  get videoCanvas() { return videoCanvas; },
+  get videoCtx() { return videoCtx; },
+  get overlayCanvas() { return overlayCanvas; },
+  get overlayCtx() { return overlayCtx; },
+  get playbackSpeed() { return playbackSpeed; },
+  set playbackSpeed(v) { playbackSpeed = v; },
+  get lastFrameTime() { return lastFrameTime; },
+  set lastFrameTime(v) { lastFrameTime = v; },
+});

demo/js/state-machine.js

@@ -0,0 +1,215 @@
+window.ISR = window.ISR || {};
+
+/* ================================================================
+ *  TASK 8: State Machine
+ * ================================================================ */
+
+let processingInterval = null;
+let playbackAnimFrame = null;
+let highlightedTrackId = null;
+
+/** Shared helper: update highlight state + toggle card CSS class. */
+let _tracksPanelEl = null;
+function _updateTrackHighlight(trackId) {
+  highlightedTrackId = trackId;
+  ISR.STATE.highlightTrackId = trackId;
+  if (!_tracksPanelEl || !_tracksPanelEl.isConnected) {
+    _tracksPanelEl = document.getElementById('tracksPanel');
+  }
+  const panel = _tracksPanelEl;
+  if (!panel) return;
+  const prev = panel.querySelector('.track-card.highlighted');
+  if (prev) prev.classList.remove('highlighted');
+  if (trackId) {
+    const next = panel.querySelector(`.track-card[data-track-id="${trackId}"]`);
+    if (next) next.classList.add('highlighted');
+  }
+}
+
+let _prevHighlightHit = null;
+
+function setState(newState) {
+  const prev = ISR.STATE.current;
+  ISR.STATE.current = newState;
+  _prevHighlightHit = null; // reset highlight cache on state transition
+  document.body.setAttribute('data-state', newState);
+  onStateChange(prev, newState);
+}
+
+function onStateChange(prev, newState) {
+  const topDot = document.querySelector('.topbar-left .dot');
+  const missionLabel = document.querySelector('.topbar-mission');
+
+  // Update top bar status
+  if (newState === 'ready') {
+    if (topDot) {
+      topDot.style.color = 'var(--accent)';
+      topDot.style.background = 'var(--accent)';
+      topDot.classList.remove('topbar-dot-processing');
+    }
+    if (missionLabel) missionLabel.textContent = 'MISSION ACTIVE';
+  } else if (newState === 'processing') {
+    if (topDot) {
+      topDot.style.color = 'var(--warning)';
+      topDot.style.background = 'var(--warning)';
+      topDot.classList.add('topbar-dot-processing');
+    }
+    if (missionLabel) {
+      missionLabel.style.color = 'var(--warning)';
+      missionLabel.textContent = 'PROCESSING';
+    }
+  } else if (newState === 'analysis' || newState === 'playing') {
+    if (topDot) {
+      topDot.style.color = 'var(--success)';
+      topDot.style.background = 'var(--success)';
+      topDot.classList.remove('topbar-dot-processing');
+    }
+    if (missionLabel) {
+      missionLabel.style.color = 'var(--success)';
+      missionLabel.textContent = 'ANALYSIS';
+    }
+  } else if (newState === 'inspect') {
+    if (topDot) {
+      topDot.style.color = 'var(--accent-light)';
+      topDot.style.background = 'var(--accent-light)';
+      topDot.classList.remove('topbar-dot-processing');
+    }
+    if (missionLabel) {
+      missionLabel.style.color = 'var(--accent-light)';
+      missionLabel.textContent = 'INSPECT';
+    }
+  }
+
+  // Drawer tab availability managed by CSS, but switch to appropriate tab
+  if (newState === 'ready') {
+    ISR.switchDrawerTab('tracks');
+  } else if (newState === 'processing') {
+    ISR.switchDrawerTab('tracks');
+  } else if (newState === 'analysis' || newState === 'playing') {
+    ISR.switchDrawerTab('tracks');
+  } else if (newState === 'inspect') {
+    ISR.switchDrawerTab('inspect');
+  }
+}
+
+/* ================================================================
+ *  TASK 8: Processing Simulation
+ * ================================================================ */
+
+function startProcessingSimulation() {
+  // Fade out start button before transitioning
+  const startBtn = document.getElementById('startBtn');
+  if (startBtn) startBtn.classList.add('fading-out');
+
+  // Clear box animation tracking for fresh detection appearances
+  Object.keys(ISR.boxFirstSeen).forEach(k => delete ISR.boxFirstSeen[k]);
+
+  setTimeout(() => {
+    setState('processing');
+
+    const circumference = 2 * Math.PI * 34;
+    const circle = document.getElementById('progressCircle');
+    const pctEl = document.getElementById('progressPct');
+    const waveformCanvas = document.getElementById('waveformCanvas');
+    const tracksPanel = document.getElementById('tracksPanel');
+    const topBarProgress = document.getElementById('topBarProgress');
+    const fpsDisplay = document.getElementById('fpsDisplay');
+
+    ISR.STATE.playheadFrame = 0;
+    let startTime = performance.now();
+    const duration = 10000; // 10 seconds
+    let lastTrackIndex = 0;
+    const trackStaggerInterval = 500; // one every 0.5s
+    let lastFpsFlicker = 0;
+
+    // Clear track list
+    tracksPanel.innerHTML = '';
+
+    processingInterval = setInterval(() => {
+      const elapsed = performance.now() - startTime;
+      const progress = Math.min(elapsed / duration, 1.0);
+
+      // Update playhead frame linearly
+      ISR.STATE.playheadFrame = Math.round(progress * ISR.STATE.totalFrames);
+      ISR.updateFrameCounter();
+      ISR.updatePlayheadPosition();
+
+      // Update time display
+      ISR.updateTimeDisplay();
+
+      // Update progress ring
+      const offset = circumference - progress * circumference;
+      circle.style.strokeDashoffset = offset;
+      pctEl.textContent = Math.round(progress * 100) + '%';
+
+      // Update top bar progress bar
+      if (topBarProgress) {
+        topBarProgress.style.width = (progress * 100) + '%';
+      }
+
+      // FPS flicker effect — every ~800ms
+      if (fpsDisplay && elapsed - lastFpsFlicker > 800) {
+        lastFpsFlicker = elapsed;
+        const fpsVal = 45 + Math.floor(Math.random() * 8);
+        fpsDisplay.textContent = fpsVal + ' FPS';
+        fpsDisplay.classList.add('fps-updating');
+        setTimeout(() => fpsDisplay.classList.remove('fps-updating'), 300);
+      }
+
+      // Progressively fill waveform — render partial density
+      if (waveformCanvas) {
+        const visibleBars = Math.round(progress * ISR.MOCK_DENSITY.length);
+        const partialDensity = ISR.MOCK_DENSITY.map((v, i) => i < visibleBars ? v : 0);
+        ISR.renderWaveform(waveformCanvas, partialDensity);
+      }
+
+      // Stagger track cards
+      const tracksToShow = Math.min(Math.floor(elapsed / trackStaggerInterval), ISR.MOCK_TRACKS.length);
+      while (lastTrackIndex < tracksToShow) {
+        ISR.appendTrackCard(ISR.MOCK_TRACKS[lastTrackIndex], tracksPanel);
+        lastTrackIndex++;
+      }
+
+      // Completion
+      if (progress >= 1.0) {
+        clearInterval(processingInterval);
+        processingInterval = null;
+
+        // Reset top bar progress
+        if (topBarProgress) {
+          topBarProgress.style.width = '100%';
+          setTimeout(() => {
+            topBarProgress.style.opacity = '0';
+            setTimeout(() => { topBarProgress.style.width = '0%'; }, 500);
+          }, 300);
+        }
+
+        // Reset start button state and FPS display
+        if (startBtn) startBtn.classList.remove('fading-out');
+        if (fpsDisplay) fpsDisplay.textContent = '48 FPS';
+
+        // Brief pause then transition to analysis
+        setTimeout(() => {
+          ISR.enterAnalysisState();
+        }, 400);
+      }
+    }, 1000 / 60); // ~60fps
+  }, 300); // Wait for start button fade
+}
+
+// ── Export to namespace ─────────────────────────────────────────
+
+Object.assign(window.ISR, {
+  get highlightedTrackId() { return highlightedTrackId; },
+  set highlightedTrackId(v) { highlightedTrackId = v; },
+  get processingInterval() { return processingInterval; },
+  set processingInterval(v) { processingInterval = v; },
+  get playbackAnimFrame() { return playbackAnimFrame; },
+  set playbackAnimFrame(v) { playbackAnimFrame = v; },
+  get _prevHighlightHit() { return _prevHighlightHit; },
+  set _prevHighlightHit(v) { _prevHighlightHit = v; },
+  _updateTrackHighlight,
+  setState,
+  onStateChange,
+  startProcessingSimulation,
+});

demo/js/state.js

@@ -0,0 +1,341 @@
+window.ISR = window.ISR || {};
+
+/* ================================================================
+ *  ISR COMMAND CENTER — Mock Data Layer
+ * ================================================================ */
+
+// ── State ───────────────────────────────────────────────────────
+
+const STATE = {
+  current: 'ready',
+  selectedTrackId: null,
+  expandedQuadrant: null,
+  playheadFrame: 0,
+  totalFrames: 1847,
+  fps: 30,
+  isPlaying: false,
+  drawerTab: 'config',
+  eventLogOpen: false,
+  trackFilter: null,
+  jobId: null,
+  mission: null,
+  videoFile: null,
+  chatHistory: [],
+  jobConfig: null,
+  jobStatus: null,
+  _realTracks: null,
+  _timelineSummary: null,
+  _analysisStartTime: null,
+  _lastRenderedFrame: -1,
+  _derivedEvents: null,
+  highlightTrackId: null,
+};
+
+// ── Color Map ───────────────────────────────────────────────────
+
+const TYPE_COLORS = {
+  person: '#3b82f6',
+  vehicle: '#f59e0b',
+  drone: '#ef4444',
+  stationary: '#22c55e',
+};
+
+function getColorForType(type) {
+  return TYPE_COLORS[type] || '#8b5cf6';
+}
+
+// ── Track Schema ────────────────────────────────────────────────
+
+function createTrack(id, label, type, confidence, speed, depth, area, keyframes) {
+  return {
+    id,
+    label,
+    type,
+    color: getColorForType(type),
+    confidence,
+    speed,       // kph
+    depth,       // meters
+    area,        // percentage of frame
+    keyframes,   // [{ frame, bbox: { x, y, w, h } }] — values as %
+    active: true,
+  };
+}
+
+// ── 20 Mock Tracks ──────────────────────────────────────────────
+
+const MOCK_TRACKS = [
+  // 8 persons
+  createTrack('P-001', 'Person Alpha', 'person', 0.94, 5.2, 12.4, 1.8, [
+    { frame: 0,    bbox: { x: 10, y: 30, w: 4, h: 10 } },
+    { frame: 400,  bbox: { x: 20, y: 32, w: 4, h: 10 } },
+    { frame: 800,  bbox: { x: 35, y: 34, w: 4.5, h: 11 } },
+    { frame: 1200, bbox: { x: 48, y: 33, w: 4, h: 10 } },
+    { frame: 1600, bbox: { x: 60, y: 31, w: 4, h: 10 } },
+  ]),
+  createTrack('P-002', 'Person Bravo', 'person', 0.91, 8.7, 18.1, 1.5, [
+    { frame: 100,  bbox: { x: 55, y: 45, w: 3.5, h: 9 } },
+    { frame: 500,  bbox: { x: 50, y: 43, w: 3.5, h: 9 } },
+    { frame: 900,  bbox: { x: 42, y: 40, w: 4, h: 10 } },
+    { frame: 1300, bbox: { x: 33, y: 38, w: 4, h: 10 } },
+    { frame: 1700, bbox: { x: 25, y: 36, w: 3.5, h: 9 } },
+  ]),
+  createTrack('P-003', 'Person Charlie', 'person', 0.88, 3.1, 8.5, 2.1, [
+    { frame: 200,  bbox: { x: 70, y: 55, w: 5, h: 12 } },
+    { frame: 600,  bbox: { x: 68, y: 54, w: 5, h: 12 } },
+    { frame: 1000, bbox: { x: 65, y: 52, w: 5, h: 12 } },
+    { frame: 1400, bbox: { x: 62, y: 50, w: 5, h: 12 } },
+  ]),
+  createTrack('P-004', 'Person Delta', 'person', 0.86, 12.4, 22.3, 1.2, [
+    { frame: 50,   bbox: { x: 15, y: 60, w: 3, h: 8 } },
+    { frame: 450,  bbox: { x: 25, y: 55, w: 3.5, h: 9 } },
+    { frame: 850,  bbox: { x: 40, y: 48, w: 4, h: 10 } },
+    { frame: 1250, bbox: { x: 55, y: 42, w: 4, h: 10 } },
+    { frame: 1650, bbox: { x: 70, y: 38, w: 3.5, h: 9 } },
+    { frame: 1847, bbox: { x: 80, y: 35, w: 3, h: 8 } },
+  ]),
+  createTrack('P-005', 'Person Echo', 'person', 0.92, 1.8, 6.2, 2.5, [
+    { frame: 300,  bbox: { x: 45, y: 70, w: 5.5, h: 13 } },
+    { frame: 700,  bbox: { x: 44, y: 69, w: 5.5, h: 13 } },
+    { frame: 1100, bbox: { x: 43, y: 68, w: 5.5, h: 13 } },
+    { frame: 1500, bbox: { x: 42, y: 67, w: 5.5, h: 13 } },
+  ]),
+  createTrack('P-006', 'Person Foxtrot', 'person', 0.79, 22.1, 30.5, 0.9, [
+    { frame: 0,    bbox: { x: 80, y: 25, w: 3, h: 7 } },
+    { frame: 350,  bbox: { x: 65, y: 30, w: 3.5, h: 8 } },
+    { frame: 700,  bbox: { x: 45, y: 38, w: 4, h: 10 } },
+    { frame: 1050, bbox: { x: 28, y: 44, w: 4, h: 10 } },
+    { frame: 1400, bbox: { x: 12, y: 50, w: 3.5, h: 8 } },
+  ]),
+  createTrack('P-007', 'Person Golf', 'person', 0.83, 6.5, 14.8, 1.6, [
+    { frame: 150,  bbox: { x: 30, y: 20, w: 4, h: 10 } },
+    { frame: 550,  bbox: { x: 35, y: 22, w: 4, h: 10 } },
+    { frame: 950,  bbox: { x: 38, y: 25, w: 4, h: 10 } },
+    { frame: 1350, bbox: { x: 40, y: 28, w: 4, h: 10 } },
+    { frame: 1750, bbox: { x: 42, y: 30, w: 4, h: 10 } },
+  ]),
+  createTrack('P-008', 'Person Hotel', 'person', 0.77, 15.3, 25.0, 1.1, [
+    { frame: 250,  bbox: { x: 88, y: 40, w: 3, h: 8 } },
+    { frame: 650,  bbox: { x: 75, y: 42, w: 3.5, h: 9 } },
+    { frame: 1050, bbox: { x: 58, y: 45, w: 4, h: 10 } },
+    { frame: 1450, bbox: { x: 40, y: 48, w: 4, h: 10 } },
+  ]),
+
+  // 5 vehicles
+  createTrack('V-001', 'Vehicle Alpha', 'vehicle', 0.96, 45.0, 35.2, 4.8, [
+    { frame: 0,    bbox: { x: 5, y: 50, w: 10, h: 8 } },
+    { frame: 400,  bbox: { x: 25, y: 48, w: 10, h: 8 } },
+    { frame: 800,  bbox: { x: 50, y: 46, w: 11, h: 9 } },
+    { frame: 1200, bbox: { x: 72, y: 44, w: 10, h: 8 } },
+    { frame: 1600, bbox: { x: 90, y: 42, w: 9, h: 7 } },
+  ]),
+  createTrack('V-002', 'Vehicle Bravo', 'vehicle', 0.93, 62.3, 42.1, 5.2, [
+    { frame: 200,  bbox: { x: 90, y: 55, w: 9, h: 7 } },
+    { frame: 550,  bbox: { x: 70, y: 53, w: 10, h: 8 } },
+    { frame: 900,  bbox: { x: 48, y: 50, w: 11, h: 9 } },
+    { frame: 1250, bbox: { x: 25, y: 48, w: 10, h: 8 } },
+    { frame: 1600, bbox: { x: 5, y: 46, w: 9, h: 7 } },
+  ]),
+  createTrack('V-003', 'Vehicle Charlie', 'vehicle', 0.89, 38.7, 28.9, 3.9, [
+    { frame: 100,  bbox: { x: 40, y: 62, w: 9, h: 7 } },
+    { frame: 500,  bbox: { x: 50, y: 60, w: 9.5, h: 7.5 } },
+    { frame: 900,  bbox: { x: 60, y: 58, w: 10, h: 8 } },
+    { frame: 1300, bbox: { x: 68, y: 56, w: 10, h: 8 } },
+    { frame: 1700, bbox: { x: 75, y: 54, w: 9, h: 7 } },
+  ]),
+  createTrack('V-004', 'Vehicle Delta', 'vehicle', 0.85, 78.5, 55.0, 3.2, [
+    { frame: 0,    bbox: { x: 92, y: 35, w: 7, h: 6 } },
+    { frame: 300,  bbox: { x: 68, y: 38, w: 8, h: 7 } },
+    { frame: 600,  bbox: { x: 42, y: 42, w: 10, h: 8 } },
+    { frame: 900,  bbox: { x: 18, y: 45, w: 10, h: 8 } },
+  ]),
+  createTrack('V-005', 'Vehicle Echo', 'vehicle', 0.91, 31.2, 20.7, 4.5, [
+    { frame: 500,  bbox: { x: 10, y: 68, w: 10, h: 8 } },
+    { frame: 900,  bbox: { x: 30, y: 65, w: 10.5, h: 8.5 } },
+    { frame: 1300, bbox: { x: 52, y: 62, w: 11, h: 9 } },
+    { frame: 1700, bbox: { x: 72, y: 60, w: 10, h: 8 } },
+  ]),
+
+  // 2 drones
+  createTrack('D-001', 'Drone Alpha', 'drone', 0.97, 42.0, 85.0, 0.6, [
+    { frame: 400,  bbox: { x: 60, y: 8, w: 2.5, h: 2 } },
+    { frame: 700,  bbox: { x: 50, y: 12, w: 3, h: 2.5 } },
+    { frame: 1000, bbox: { x: 38, y: 10, w: 3, h: 2.5 } },
+    { frame: 1300, bbox: { x: 28, y: 6, w: 2.5, h: 2 } },
+    { frame: 1600, bbox: { x: 18, y: 8, w: 2, h: 1.8 } },
+    { frame: 1847, bbox: { x: 10, y: 5, w: 2, h: 1.5 } },
+  ]),
+  createTrack('D-002', 'Drone Bravo', 'drone', 0.93, 55.8, 120.0, 0.4, [
+    { frame: 800,  bbox: { x: 20, y: 5, w: 2, h: 1.5 } },
+    { frame: 1050, bbox: { x: 35, y: 8, w: 2.5, h: 2 } },
+    { frame: 1300, bbox: { x: 52, y: 6, w: 2.5, h: 2 } },
+    { frame: 1550, bbox: { x: 68, y: 10, w: 3, h: 2.5 } },
+    { frame: 1800, bbox: { x: 82, y: 7, w: 2.5, h: 2 } },
+  ]),
+
+  // 5 stationary
+  createTrack('S-001', 'Stationary Alpha', 'stationary', 0.95, 0.0, 10.2, 3.8, [
+    { frame: 0,    bbox: { x: 75, y: 72, w: 8, h: 6 } },
+    { frame: 600,  bbox: { x: 75, y: 72, w: 8, h: 6 } },
+    { frame: 1200, bbox: { x: 75, y: 72, w: 8, h: 6 } },
+    { frame: 1847, bbox: { x: 75, y: 72, w: 8, h: 6 } },
+  ]),
+  createTrack('S-002', 'Stationary Bravo', 'stationary', 0.90, 0.2, 15.8, 5.1, [
+    { frame: 0,    bbox: { x: 22, y: 78, w: 10, h: 7 } },
+    { frame: 600,  bbox: { x: 22, y: 78, w: 10, h: 7 } },
+    { frame: 1200, bbox: { x: 22, y: 78, w: 10, h: 7 } },
+    { frame: 1847, bbox: { x: 22, y: 78, w: 10, h: 7 } },
+  ]),
+  createTrack('S-003', 'Stationary Charlie', 'stationary', 0.87, 0.1, 8.3, 2.4, [
+    { frame: 0,    bbox: { x: 50, y: 82, w: 6, h: 5 } },
+    { frame: 900,  bbox: { x: 50, y: 82, w: 6, h: 5 } },
+    { frame: 1847, bbox: { x: 50, y: 82, w: 6, h: 5 } },
+  ]),
+  createTrack('S-004', 'Stationary Delta', 'stationary', 0.82, 0.5, 22.1, 6.2, [
+    { frame: 0,    bbox: { x: 88, y: 65, w: 11, h: 8 } },
+    { frame: 500,  bbox: { x: 88, y: 65, w: 11, h: 8 } },
+    { frame: 1000, bbox: { x: 88, y: 65.5, w: 11, h: 8 } },
+    { frame: 1500, bbox: { x: 88, y: 65, w: 11, h: 8 } },
+    { frame: 1847, bbox: { x: 88, y: 65, w: 11, h: 8 } },
+  ]),
+  createTrack('S-005', 'Stationary Echo', 'stationary', 0.78, 0.3, 5.6, 1.9, [
+    { frame: 200,  bbox: { x: 35, y: 58, w: 5, h: 4 } },
+    { frame: 700,  bbox: { x: 35, y: 58, w: 5, h: 4 } },
+    { frame: 1200, bbox: { x: 35, y: 58, w: 5, h: 4 } },
+    { frame: 1700, bbox: { x: 35, y: 58, w: 5, h: 4 } },
+  ]),
+];
+
+// ── 18 Mock Timeline Events ─────────────────────────────────────
+
+const MOCK_EVENTS = [
+  { frame: 0,    time: '00:00:00', type: 'system',    label: 'Mission Start',           description: 'ISR feed initialized. All sensors nominal.',       priority: 'low' },
+  { frame: 85,   time: '00:00:03', type: 'detection', label: 'First Detection',         description: 'Person Alpha acquired at sector 2.',               priority: 'medium' },
+  { frame: 210,  time: '00:00:07', type: 'detection', label: 'Vehicle Spotted',          description: 'Vehicle Alpha entering FOV from west.',            priority: 'medium' },
+  { frame: 400,  time: '00:00:13', type: 'alert',     label: 'Drone Detected',           description: 'Drone Alpha detected at high altitude. Tracking.', priority: 'high' },
+  { frame: 520,  time: '00:00:17', type: 'tracking',  label: 'Track Merge',              description: 'Tracks P-003 and P-005 proximity alert.',          priority: 'low' },
+  { frame: 650,  time: '00:00:22', type: 'detection', label: 'New Vehicle',              description: 'Vehicle Delta — high speed approach detected.',     priority: 'medium' },
+  { frame: 780,  time: '00:00:26', type: 'alert',     label: 'Speed Warning',            description: 'Vehicle Delta exceeding 75 kph in restricted zone.', priority: 'high' },
+  { frame: 800,  time: '00:00:27', type: 'alert',     label: 'Second Drone',             description: 'Drone Bravo detected. Multiple aerial contacts.',  priority: 'high' },
+  { frame: 920,  time: '00:00:31', type: 'tracking',  label: 'Track Lost',               description: 'Vehicle Delta exited FOV at sector 1.',            priority: 'medium' },
+  { frame: 1050, time: '00:00:35', type: 'detection', label: 'Crowd Formation',          description: '5 persons converging at grid reference 4-C.',       priority: 'medium' },
+  { frame: 1180, time: '00:00:39', type: 'system',    label: 'Depth Map Update',         description: 'Depth estimation recalibrated. Accuracy +12%.',     priority: 'low' },
+  { frame: 1300, time: '00:00:43', type: 'alert',     label: 'Drone Maneuver',           description: 'Drone Alpha executing erratic flight pattern.',     priority: 'high' },
+  { frame: 1380, time: '00:00:46', type: 'tracking',  label: 'Re-ID Confirmed',          description: 'Person Hotel re-identified after occlusion.',       priority: 'low' },
+  { frame: 1450, time: '00:00:48', type: 'detection', label: 'Vehicle Convoy',           description: 'Vehicles Bravo and Echo moving in formation.',      priority: 'medium' },
+  { frame: 1550, time: '00:00:52', type: 'alert',     label: 'Perimeter Breach',         description: 'Drone Bravo approaching restricted airspace.',      priority: 'high' },
+  { frame: 1650, time: '00:00:55', type: 'tracking',  label: 'Person Foxtrot Exit',      description: 'Person Foxtrot exited FOV. Track archived.',        priority: 'low' },
+  { frame: 1750, time: '00:00:58', type: 'system',    label: 'Frame Drop Warning',       description: 'Processing latency spike: 45ms → 120ms.',          priority: 'medium' },
+  { frame: 1847, time: '00:01:02', type: 'system',    label: 'Mission Complete',         description: 'ISR feed terminated. 20 tracks catalogued.',        priority: 'low' },
+];
+
+// ── Mock Detection Density (100 values, 0-1) ────────────────────
+
+const MOCK_DENSITY = [];
+const DENSITY_TYPES = [];
+(function generateDensity() {
+  const segments = 100;
+  for (let i = 0; i < segments; i++) {
+    const t = i / segments;
+    // Base density with peaks at key event areas
+    let d = 0.15 + Math.random() * 0.15;
+    // Peak near frame 400 (drone entry)
+    d += 0.35 * Math.exp(-Math.pow((t - 0.22) / 0.05, 2));
+    // Peak near frame 800 (second drone + speed warning)
+    d += 0.45 * Math.exp(-Math.pow((t - 0.43) / 0.06, 2));
+    // Peak near frame 1050 (crowd)
+    d += 0.30 * Math.exp(-Math.pow((t - 0.57) / 0.04, 2));
+    // Peak near frame 1300-1550 (drone maneuver + perimeter breach)
+    d += 0.50 * Math.exp(-Math.pow((t - 0.75) / 0.08, 2));
+    // Gentle ramp at end
+    d += 0.10 * Math.exp(-Math.pow((t - 0.95) / 0.06, 2));
+
+    MOCK_DENSITY.push(Math.min(1.0, d));
+
+    // Dominant type per segment
+    if (t > 0.20 && t < 0.28) DENSITY_TYPES.push('drone');
+    else if (t > 0.40 && t < 0.48) DENSITY_TYPES.push('drone');
+    else if (t > 0.70 && t < 0.82) DENSITY_TYPES.push('drone');
+    else if (t > 0.30 && t < 0.38) DENSITY_TYPES.push('vehicle');
+    else if (t > 0.55 && t < 0.62) DENSITY_TYPES.push('person');
+    else DENSITY_TYPES.push(Math.random() > 0.6 ? 'vehicle' : 'person');
+  }
+})();
+
+// ── Mock Placeholder Data for Depth / Mask / PointCloud ─────────
+
+const MOCK_MASKS = {};
+MOCK_TRACKS.forEach(t => {
+  // Each mask is a placeholder canvas-like descriptor
+  MOCK_MASKS[t.id] = {
+    trackId: t.id,
+    type: 'binary-mask',
+    width: 640,
+    height: 480,
+    data: null, // would be Uint8Array in real impl
+  };
+});
+
+const MOCK_DEPTH = {
+  type: 'depth-map',
+  width: 640,
+  height: 480,
+  min: 0.5,
+  max: 150.0,
+  data: null, // would be Float32Array in real impl
+};
+
+const MOCK_POINTCLOUD = {
+  type: 'point-cloud',
+  numPoints: 12000,
+  bounds: { minX: -10, maxX: 10, minY: -5, maxY: 5, minZ: 0, maxZ: 50 },
+  positions: null, // would be Float32Array(numPoints * 3) in real impl
+  colors: null,    // would be Float32Array(numPoints * 3) in real impl
+};
+
+// ── Mock AI Responses ───────────────────────────────────────────
+
+const MOCK_AI_RESPONSES_FALLBACK = {
+  'threat assessment': {
+    text: 'THREAT ASSESSMENT — 2 aerial contacts (Drone Alpha, Drone Bravo) classified HIGH PRIORITY. Drone Alpha exhibiting erratic flight pattern near restricted airspace. Drone Bravo approaching perimeter. 1 ground vehicle (Vehicle Delta) flagged for excessive speed (78.5 kph) in restricted zone. Recommend immediate action on aerial contacts.',
+    action: null,
+  },
+  'show all drones': {
+    text: 'Filtering 2 drone tracks: Drone Alpha (D-001, confidence 0.97) and Drone Bravo (D-002, confidence 0.93). Both classified as HIGH PRIORITY aerial threats.',
+    action: 'filter-drones',
+  },
+  'generate report': {
+    text: 'Generating mission report... Report includes 20 tracked objects across 1847 frames (61.6 seconds). 5 high-priority alerts logged. Report ready for download.',
+    action: 'show-report',
+  },
+  'summarize mission': {
+    text: 'MISSION SUMMARY — Duration: 61.6s (1847 frames at 30fps). Total tracks: 20 (8 persons, 5 vehicles, 2 drones, 5 stationary). High-priority events: 5 (2 drone detections, 1 speed violation, 1 erratic maneuver, 1 perimeter breach). All tracks catalogued. Recommend review of aerial contact timeline.',
+    action: null,
+  },
+  'count vehicles': {
+    text: '5 vehicle tracks detected: Vehicle Alpha (45.0 kph), Vehicle Bravo (62.3 kph), Vehicle Charlie (38.7 kph), Vehicle Delta (78.5 kph), Vehicle Echo (31.2 kph). Average speed: 51.1 kph. Vehicle Delta flagged for excessive speed.',
+    action: null,
+  },
+};
+
+// ── Boot Log ────────────────────────────────────────────────────
+
+console.log('[ISR Command Center] Mock data layer initialized.');
+console.log(`  Tracks: ${MOCK_TRACKS.length}`);
+console.log(`  Events: ${MOCK_EVENTS.length}`);
+console.log(`  Density segments: ${MOCK_DENSITY.length}`);
+console.log(`  AI commands: ${Object.keys(MOCK_AI_RESPONSES_FALLBACK).length}`);
+
+// ── Export to namespace ─────────────────────────────────────────
+
+window.ISR.STATE = STATE;
+window.ISR.TYPE_COLORS = TYPE_COLORS;
+window.ISR.getColorForType = getColorForType;
+window.ISR.createTrack = createTrack;
+window.ISR.MOCK_TRACKS = MOCK_TRACKS;
+window.ISR.MOCK_EVENTS = MOCK_EVENTS;
+window.ISR.MOCK_DENSITY = MOCK_DENSITY;
+window.ISR.DENSITY_TYPES = DENSITY_TYPES;
+window.ISR.MOCK_MASKS = MOCK_MASKS;
+window.ISR.MOCK_DEPTH = MOCK_DEPTH;
+window.ISR.MOCK_POINTCLOUD = MOCK_POINTCLOUD;
+window.ISR.MOCK_AI_RESPONSES_FALLBACK = MOCK_AI_RESPONSES_FALLBACK;

demo/js/timeline.js

@@ -0,0 +1,242 @@
+window.ISR = window.ISR || {};
+
+/* ================================================================
+ *  TASK 6: Timeline — Waveform, Events, Playhead
+ * ================================================================ */
+
+function renderWaveform(canvas, densityData) {
+  const rect = canvas.parentElement.getBoundingClientRect();
+  const dpr = window.devicePixelRatio || 1;
+  canvas.width = rect.width * dpr;
+  canvas.height = rect.height * dpr;
+  canvas.style.width = rect.width + 'px';
+  canvas.style.height = rect.height + 'px';
+
+  const ctx = canvas.getContext('2d');
+  ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+
+  const w = rect.width;
+  const h = rect.height;
+  const barW = w / densityData.length;
+
+  ctx.clearRect(0, 0, w, h);
+
+  for (let i = 0; i < densityData.length; i++) {
+    const val = densityData[i];
+    const barH = val * h * 0.85;
+    const x = i * barW;
+    const y = h - barH;
+    const color = ISR.getColorForType(ISR.DENSITY_TYPES[i]);
+
+    ctx.fillStyle = color + '88';
+    ctx.fillRect(x, y, Math.max(barW - 1, 1), barH);
+  }
+}
+
+function renderEventMarkers(container, events) {
+  container.innerHTML = '';
+  const EVENT_TYPE_COLORS = {
+    system: 'var(--text-tertiary)',
+    detection: 'var(--accent)',
+    tracking: 'var(--success)',
+    alert: 'var(--danger)',
+  };
+
+  for (const evt of events) {
+    const pct = (evt.frame / ISR.STATE.totalFrames) * 100;
+    const marker = document.createElement('div');
+    marker.className = 'event-marker';
+    marker.style.left = pct + '%';
+    marker.style.background = EVENT_TYPE_COLORS[evt.type] || 'var(--text-tertiary)';
+    if (evt.priority === 'high') {
+      marker.style.boxShadow = `0 0 4px ${EVENT_TYPE_COLORS[evt.type]}`;
+    }
+    marker.title = `${evt.time} — ${evt.label}`;
+    marker.addEventListener('click', () => {
+      ISR.STATE.playheadFrame = evt.frame;
+      updatePlayheadPosition();
+      ISR.updateFrameCounter();
+      ISR.updateTimeDisplay();
+    });
+    container.appendChild(marker);
+  }
+}
+
+function updatePlayheadPosition() {
+  const playhead = document.getElementById('playhead');
+  if (!playhead) return;
+  const pct = (ISR.STATE.playheadFrame / ISR.STATE.totalFrames) * 100;
+  playhead.style.left = pct + '%';
+}
+
+function initPlayheadDrag() {
+  const wrap = document.querySelector('.timeline-waveform-wrap');
+  if (!wrap) return;
+  let dragging = false;
+
+  function setFrameFromX(clientX) {
+    const rect = wrap.getBoundingClientRect();
+    let pct = (clientX - rect.left) / rect.width;
+    pct = Math.max(0, Math.min(1, pct));
+    ISR.STATE.playheadFrame = Math.round(pct * ISR.STATE.totalFrames);
+    updatePlayheadPosition();
+    ISR.updateFrameCounter();
+    ISR.updateTimeDisplay();
+
+    // Seek video when jobId exists
+    if (ISR.STATE.jobId) {
+      const processedVideo = document.getElementById('processedVideo');
+      if (processedVideo) {
+        processedVideo.currentTime = ISR.STATE.playheadFrame / ISR.STATE.fps;
+      }
+    }
+  }
+
+  wrap.addEventListener('mousedown', (e) => {
+    dragging = true;
+    setFrameFromX(e.clientX);
+  });
+
+  document.addEventListener('mousemove', (e) => {
+    if (dragging) setFrameFromX(e.clientX);
+  });
+
+  document.addEventListener('mouseup', () => {
+    dragging = false;
+  });
+}
+
+function renderTimelineLegend() {
+  const legend = document.getElementById('timelineLegend');
+  if (!legend) return;
+  const counts = { system: 0, detection: 0, tracking: 0, alert: 0 };
+  const colors = {
+    system: 'var(--text-tertiary)',
+    detection: 'var(--accent)',
+    tracking: 'var(--success)',
+    alert: 'var(--danger)',
+  };
+  ISR.MOCK_EVENTS.forEach(e => { if (counts[e.type] !== undefined) counts[e.type]++; });
+
+  legend.innerHTML = Object.entries(counts).map(([type, count]) =>
+    `<span class="timeline-legend-item"><span class="dot" style="background: ${colors[type]};"></span> ${type} (${count})</span>`
+  ).join('');
+}
+
+function toggleEventLog() {
+  ISR.STATE.eventLogOpen = !ISR.STATE.eventLogOpen;
+  const log = document.getElementById('eventLog');
+  const toggle = document.getElementById('eventLogToggle');
+  if (ISR.STATE.eventLogOpen) {
+    log.classList.remove('hidden');
+    toggle.innerHTML = 'EVENT LOG &#9650;';
+    // Use real events if available, otherwise mock
+    if (ISR.STATE.jobId && ISR.STATE._derivedEvents) {
+      ISR.renderEventLogFromData(ISR.STATE._derivedEvents);
+    } else {
+      renderEventLog();
+    }
+  } else {
+    log.classList.add('hidden');
+    toggle.innerHTML = 'EVENT LOG &#9660;';
+  }
+}
+
+function renderEventLog() {
+  const log = document.getElementById('eventLog');
+  if (!log) return;
+
+  const EVENT_TYPE_COLORS = {
+    system: { bg: 'rgba(255,255,255,0.05)', color: 'var(--text-tertiary)' },
+    detection: { bg: 'rgba(59,130,246,0.12)', color: 'var(--accent-light)' },
+    tracking: { bg: 'rgba(34,197,94,0.12)', color: 'var(--success)' },
+    alert: { bg: 'rgba(239,68,68,0.12)', color: 'var(--danger)' },
+  };
+
+  log.innerHTML = ISR.MOCK_EVENTS.map(evt => {
+    const tc = EVENT_TYPE_COLORS[evt.type] || EVENT_TYPE_COLORS.system;
+    return `
+      <div class="event-log-entry" data-frame="${evt.frame}">
+        <span class="event-log-time">${evt.time}</span>
+        <span class="event-log-type" style="background: ${tc.bg}; color: ${tc.color};">${evt.type}</span>
+        <span class="event-log-label">${evt.label}</span>
+        <span class="event-log-desc">${evt.description}</span>
+      </div>`;
+  }).join('');
+
+  log.querySelectorAll('.event-log-entry').forEach(entry => {
+    entry.addEventListener('click', () => {
+      ISR.STATE.playheadFrame = parseInt(entry.dataset.frame, 10);
+      updatePlayheadPosition();
+      ISR.updateFrameCounter();
+      ISR.updateTimeDisplay();
+    });
+  });
+}
+
+/* ================================================================
+ *  TASK 12: Event Marker Tooltips
+ * ================================================================ */
+
+function wireEventMarkerTooltips() {
+  document.querySelectorAll('.event-marker').forEach((marker, idx) => {
+    const evt = ISR.MOCK_EVENTS[idx];
+    if (!evt) return;
+
+    marker.addEventListener('mouseenter', () => {
+      // Remove old tooltips
+      document.querySelectorAll('.event-marker-tooltip').forEach(t => t.remove());
+
+      const tooltip = document.createElement('div');
+      tooltip.className = 'event-marker-tooltip';
+      tooltip.textContent = `${evt.time} — ${evt.label}: ${evt.description}`;
+      marker.style.position = 'absolute'; // ensure positioning context
+      marker.appendChild(tooltip);
+    });
+
+    marker.addEventListener('mouseleave', () => {
+      marker.querySelectorAll('.event-marker-tooltip').forEach(t => t.remove());
+    });
+  });
+}
+
+/* ================================================================
+ *  TASK 12: Keyboard Shortcuts Hint
+ * ================================================================ */
+
+function showShortcutsHint() {
+  // Remove existing hint if any
+  const existing = document.getElementById('shortcutsHint');
+  if (existing) existing.remove();
+
+  const commandBar = document.getElementById('commandBar');
+  const hint = document.createElement('div');
+  hint.id = 'shortcutsHint';
+  hint.innerHTML = `
+    <span class="shortcut-item"><kbd>Space</kbd> Play/Pause</span>
+    <span class="shortcut-item"><kbd>&larr;</kbd><kbd>&rarr;</kbd> Seek 5s</span>
+    <span class="shortcut-item"><kbd>,</kbd><kbd>.</kbd> Frame step</span>
+    <span class="shortcut-item"><kbd>Esc</kbd> Back/Close</span>
+  `;
+  commandBar.style.position = 'relative';
+  commandBar.appendChild(hint);
+
+  // Remove after animation completes (3s)
+  setTimeout(() => {
+    if (hint.parentElement) hint.remove();
+  }, 3100);
+}
+
+// ── Export to namespace ─────────────────────────────────────────
+
+Object.assign(window.ISR, {
+  renderWaveform,
+  renderEventMarkers,
+  updatePlayheadPosition,
+  initPlayheadDrag,
+  renderTimelineLegend,
+  toggleEventLog,
+  renderEventLog,
+  wireEventMarkerTooltips,
+  showShortcutsHint,
+});

demo/js/ui.js

@@ -0,0 +1,292 @@
+window.ISR = window.ISR || {};
+
+/* ================================================================
+ *  TASK 8/9: Play/Pause + Keyboard Controls
+ * ================================================================ */
+
+function togglePlayPause() {
+  if (ISR.STATE.current === 'ready') return;
+  if (ISR.STATE.current === 'processing') return;
+  ISR.STATE.isPlaying = !ISR.STATE.isPlaying;
+  ISR.lastFrameTime = 0;
+  const btn = document.getElementById('playPauseBtn');
+  btn.innerHTML = ISR.STATE.isPlaying ? '▮▮' : '▶';
+
+  // When jobId exists, play/pause the <video> element
+  if (ISR.STATE.jobId) {
+    const processedVideo = document.getElementById('processedVideo');
+    if (processedVideo) {
+      if (ISR.STATE.isPlaying) {
+        // Check video is ready
+        if (processedVideo.readyState < 2) {
+          console.warn('[ISR] Video not ready (readyState:', processedVideo.readyState, ')');
+          ISR.showToast('Video still loading, please wait...', 3000);
+          ISR.STATE.isPlaying = false;
+          btn.innerHTML = '&#9654;';
+          return;
+        }
+        processedVideo.playbackRate = ISR.playbackSpeed;
+        if (processedVideo.currentTime >= processedVideo.duration - 0.1) {
+          processedVideo.currentTime = 0;
+        }
+        processedVideo.play().catch(err => {
+          console.error('[ISR] Video play failed:', err);
+          ISR.showToast('Video playback failed: ' + err.message, 5000);
+          ISR.STATE.isPlaying = false;
+          btn.innerHTML = '&#9654;';
+        });
+      } else {
+        processedVideo.pause();
+      }
+    } else {
+      console.error('[ISR] processedVideo element not found');
+      ISR.STATE.isPlaying = false;
+      btn.innerHTML = '&#9654;';
+    }
+  } else {
+    if (ISR.STATE.isPlaying && ISR.STATE.playheadFrame >= ISR.STATE.totalFrames) {
+      ISR.STATE.playheadFrame = 0;
+    }
+  }
+
+  // Ensure we're in a playable state
+  if (ISR.STATE.isPlaying && ISR.STATE.current === 'analysis') {
+    ISR.STATE.current = 'playing';
+    document.body.setAttribute('data-state', 'analysis'); // keep analysis CSS
+  }
+  if (!ISR.STATE.isPlaying && ISR.STATE.current === 'playing') {
+    ISR.STATE.current = 'analysis';
+    document.body.setAttribute('data-state', 'analysis');
+  }
+}
+
+function updateTimeDisplay() {
+  const totalSeconds = ISR.STATE.playheadFrame / ISR.STATE.fps;
+  const min = Math.floor(totalSeconds / 60);
+  const sec = Math.floor(totalSeconds % 60);
+  const el = document.getElementById('timeStart');
+  if (el) el.textContent = String(min).padStart(2, '0') + ':' + String(sec).padStart(2, '0');
+}
+
+function seekFrames(delta) {
+  if (ISR.STATE.current === 'ready' || ISR.STATE.current === 'processing') return;
+  ISR.STATE.playheadFrame = Math.max(0, Math.min(ISR.STATE.totalFrames, ISR.STATE.playheadFrame + delta));
+  ISR.updatePlayheadPosition();
+  ISR.updateFrameCounter();
+  updateTimeDisplay();
+
+  // Seek video when jobId exists
+  if (ISR.STATE.jobId) {
+    const processedVideo = document.getElementById('processedVideo');
+    if (processedVideo) {
+      processedVideo.currentTime = ISR.STATE.playheadFrame / ISR.STATE.fps;
+    }
+  }
+}
+
+function handleKeyboardControls(e) {
+  // Don't capture when typing in command bar or other inputs
+  if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA' || e.target.tagName === 'SELECT') return;
+
+  // Escape priority chain
+  if (e.code === 'Escape') {
+    e.preventDefault();
+    // 1. Expanded quadrant -> collapse
+    if (ISR.STATE.expandedQuadrant) {
+      const panel = document.getElementById('inspectPanel');
+      if (panel) {
+        panel.querySelectorAll('.quadrant.expanded').forEach(eq => eq.classList.remove('expanded'));
+        panel.querySelectorAll('.quadrant').forEach(oq => oq.style.display = '');
+      }
+      ISR.STATE.expandedQuadrant = null;
+      return;
+    }
+    // 2. Event log open -> close
+    if (ISR.STATE.eventLogOpen) {
+      ISR.toggleEventLog();
+      return;
+    }
+    // 3. In inspect state -> return to analysis
+    if (ISR.STATE.current === 'inspect') {
+      ISR.exitInspectState();
+      return;
+    }
+    return;
+  }
+
+  if (e.code === 'Space') {
+    e.preventDefault();
+    togglePlayPause();
+  } else if (e.code === 'ArrowRight') {
+    e.preventDefault();
+    seekFrames(ISR.STATE.fps * 5); // 5 seconds forward
+  } else if (e.code === 'ArrowLeft') {
+    e.preventDefault();
+    seekFrames(-ISR.STATE.fps * 5); // 5 seconds backward
+  } else if (e.code === 'Period') {
+    e.preventDefault();
+    seekFrames(1); // next frame
+  } else if (e.code === 'Comma') {
+    e.preventDefault();
+    seekFrames(-1); // previous frame
+  }
+}
+
+/* ================================================================
+ *  TASK 9: Canvas Hit-Testing + Hover Sync
+ * ================================================================ */
+
+function hitTestBoxes(clientX, clientY) {
+  const container = document.getElementById('videoFeed');
+  const rect = container.getBoundingClientRect();
+  const relX = clientX - rect.left;
+  const relY = clientY - rect.top;
+  const w = rect.width;
+  const h = rect.height;
+
+  const tracks = ISR.getTracksAtFrame(ISR.STATE.playheadFrame);
+
+  // Check in reverse order (top-most drawn last)
+  for (let i = tracks.length - 1; i >= 0; i--) {
+    const t = tracks[i];
+    const bx = (t.bbox.x / 100) * w;
+    const by = (t.bbox.y / 100) * h;
+    const bw = (t.bbox.w / 100) * w;
+    const bh = (t.bbox.h / 100) * h;
+
+    if (relX >= bx && relX <= bx + bw && relY >= by && relY <= by + bh) {
+      return t;
+    }
+  }
+  return null;
+}
+
+function handleCanvasMouseMove(e) {
+  if (ISR.STATE.current === 'ready' || ISR.STATE.current === 'processing') return;
+
+  const hit = hitTestBoxes(e.clientX, e.clientY);
+  const hitId = hit ? hit.id : null;
+
+  // Skip DOM work if highlight hasn't changed
+  if (hitId === ISR._prevHighlightHit) return;
+  ISR._prevHighlightHit = hitId;
+
+  const overlay = document.getElementById('overlayCanvas');
+  overlay.style.cursor = hit ? 'pointer' : 'default';
+  ISR._updateTrackHighlight(hitId);
+}
+
+function handleCanvasClick(e) {
+  if (ISR.STATE.current === 'ready' || ISR.STATE.current === 'processing') return;
+
+  const hit = hitTestBoxes(e.clientX, e.clientY);
+  if (hit) {
+    ISR.enterInspectState(hit.id);
+  }
+}
+
+/* ================================================================
+ *  TASK 5: Drawer — Tabs + Track List
+ * ================================================================ */
+
+function switchDrawerTab(tabName) {
+  ISR.STATE.drawerTab = tabName;
+  const tabs = document.querySelectorAll('.drawer-tab');
+  tabs.forEach(t => t.classList.toggle('active', t.dataset.tab === tabName));
+
+  // Hide all panels first
+  document.getElementById('configPanel').classList.add('hidden');
+  document.getElementById('tracksPanel').classList.add('hidden');
+  document.getElementById('inspectPanel').classList.add('hidden');
+  document.getElementById('explainPanel').classList.add('hidden');
+
+  if (tabName === 'tracks' || tabName === 'config') {
+    // Config panel only shows in ready state
+    if (ISR.STATE.current === 'ready') {
+      document.getElementById('configPanel').classList.remove('hidden');
+    }
+    document.getElementById('tracksPanel').classList.remove('hidden');
+  } else if (tabName === 'inspect') {
+    document.getElementById('inspectPanel').classList.remove('hidden');
+  } else if (tabName === 'explain') {
+    document.getElementById('explainPanel').classList.remove('hidden');
+  }
+}
+
+/* ================================================================
+ *  TASK 7: Command Bar + Toast System
+ * ================================================================ */
+
+function handleCommand(text) {
+  if (!text.trim()) return;
+
+  // Check for client-side action commands first
+  const localMatch = ISR.matchAICommand(text);
+  if (localMatch && localMatch.action) {
+    showToast(localMatch.text, 6000);
+    ISR.executeAction(localMatch.action);
+    return;
+  }
+
+  // Get selected track context from real tracks if available
+  let selectedTrack = null;
+  if (ISR.STATE.selectedTrackId && ISR.STATE._realTracks) {
+    selectedTrack = ISR.STATE._realTracks.find(t =>
+      t.track_id === ISR.STATE.selectedTrackId || t.track_id === String(ISR.STATE.selectedTrackId)
+    );
+  }
+
+  // Call askAI — handles fallback internally
+  ISR.askAI(text, selectedTrack).then(response => {
+    showToast(response.response || response.text || 'No response.');
+    if (response.action) {
+      ISR.executeAction(response.action);
+    }
+  });
+}
+
+function showToast(text, duration) {
+  if (duration === undefined) duration = 8000;
+  const container = document.getElementById('toastContainer');
+  const toast = document.createElement('div');
+  toast.className = 'toast';
+
+  const msg = document.createElement('span');
+  msg.style.flex = '1';
+  msg.textContent = text;
+
+  const close = document.createElement('button');
+  close.className = 'toast-close';
+  close.innerHTML = '&times;';
+  close.addEventListener('click', () => dismissToast(toast));
+
+  toast.appendChild(msg);
+  toast.appendChild(close);
+  container.appendChild(toast);
+
+  setTimeout(() => dismissToast(toast), duration);
+}
+
+function dismissToast(toast) {
+  if (!toast || !toast.parentElement) return;
+  toast.classList.add('toast-out');
+  toast.addEventListener('animationend', () => {
+    if (toast.parentElement) toast.parentElement.removeChild(toast);
+  });
+}
+
+// ── Export to namespace ─────────────────────────────────────────
+
+Object.assign(window.ISR, {
+  togglePlayPause,
+  updateTimeDisplay,
+  seekFrames,
+  handleKeyboardControls,
+  hitTestBoxes,
+  handleCanvasMouseMove,
+  handleCanvasClick,
+  switchDrawerTab,
+  handleCommand,
+  showToast,
+  dismissToast,
+});

demo/styles/animations.css

@@ -0,0 +1,374 @@
+    /* ── Keyframes ─────────────────────────────────────────────────── */
+
+    @keyframes pulse-dot {
+      0%, 100% { box-shadow: 0 0 4px currentColor, 0 0 8px currentColor; opacity: 1; }
+      50% { box-shadow: 0 0 8px currentColor, 0 0 18px currentColor; opacity: 0.7; }
+    }
+
+    @keyframes processing-pulse {
+      0%, 100% { box-shadow: 0 0 4px currentColor, 0 0 8px currentColor; opacity: 1; }
+      50% { box-shadow: 0 0 12px currentColor, 0 0 24px currentColor; opacity: 0.5; }
+    }
+
+    @keyframes drawer-fade-in {
+      from { opacity: 0; transform: translateY(10px); }
+      to   { opacity: 1; transform: translateY(0); }
+    }
+
+    @keyframes track-card-enter {
+      from { opacity: 0; transform: translateY(8px); }
+      to   { opacity: 1; transform: translateY(0); }
+    }
+
+    @keyframes toast-in {
+      from { opacity: 0; transform: translateY(20px); }
+      to   { opacity: 1; transform: translateY(0); }
+    }
+
+    @keyframes toast-out {
+      from { opacity: 1; transform: translateY(0); }
+      to   { opacity: 0; transform: translateY(12px); }
+    }
+
+    @keyframes box-dash-march {
+      to { stroke-dashoffset: -20; }
+    }
+
+    @keyframes box-pulse-glow {
+      0%, 100% { opacity: 0.6; }
+      50% { opacity: 1; }
+    }
+
+    @keyframes fps-flicker {
+      0%   { color: var(--text-secondary); }
+      50%  { color: var(--accent-light); }
+      100% { color: var(--text-secondary); }
+    }
+
+    @keyframes indeterminate-pulse {
+      0%, 100% { stroke-dashoffset: 213.628; opacity: 0.4; }
+      50% { stroke-dashoffset: 53.407; opacity: 1; }
+    }
+
+    @keyframes shortcuts-fade {
+      0%   { opacity: 0; transform: translateX(-50%) translateY(4px); }
+      10%  { opacity: 1; transform: translateX(-50%) translateY(0); }
+      80%  { opacity: 1; transform: translateX(-50%) translateY(0); }
+      100% { opacity: 0; transform: translateX(-50%) translateY(-4px); }
+    }
+
+    @keyframes exNodeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
+
+    /* ── Toast ────────────────────────────────────────────────────── */
+
+    #toastContainer {
+      position: fixed;
+      bottom: 80px;
+      right: 20px;
+      z-index: 100;
+      display: flex;
+      flex-direction: column-reverse;
+      gap: 8px;
+      pointer-events: none;
+    }
+
+    .toast {
+      background: rgba(2,6,23,0.92);
+      backdrop-filter: blur(12px);
+      -webkit-backdrop-filter: blur(12px);
+      border: 1px solid var(--panel-border);
+      border-radius: 8px;
+      padding: 10px 14px;
+      max-width: 400px;
+      font-size: 11px;
+      color: var(--text-primary);
+      line-height: 1.5;
+      pointer-events: auto;
+      display: flex;
+      align-items: flex-start;
+      gap: 8px;
+      animation: toast-in 0.3s ease forwards;
+    }
+
+    .toast-close {
+      background: none;
+      border: none;
+      color: var(--text-tertiary);
+      font-size: 14px;
+      cursor: pointer;
+      padding: 0;
+      line-height: 1;
+      flex-shrink: 0;
+    }
+
+    .toast-close:hover {
+      color: var(--text-primary);
+    }
+
+    .toast.toast-out {
+      animation: toast-out 0.25s ease forwards;
+    }
+
+    /* ── Polish: Drawer Content Transitions ───────────────────────── */
+
+    .drawer-section {
+      animation: drawer-fade-in 0.3s ease both;
+    }
+
+    /* ── Polish: Progress Overlay Fade ────────────────────────────── */
+
+    #progressOverlay {
+      transition: opacity 0.5s ease;
+    }
+
+    /* ── Polish: Start Button Fade Out ────────────────────────────── */
+
+    #startBtn.fading-out {
+      opacity: 0;
+      transform: translate(-50%, -50%) scale(0.95);
+      transition: opacity 0.3s ease, transform 0.3s ease;
+      pointer-events: none;
+    }
+
+    /* ── Polish: Track Card Hover ─────────────────────────────────── */
+
+    .track-card {
+      transition: background 0.15s ease, border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
+    }
+
+    .track-card:hover {
+      background: rgba(255,255,255,0.05);
+      border-color: rgba(255,255,255,0.08);
+      transform: scale(1.01);
+    }
+
+    .track-card.highlighted {
+      border-color: var(--accent-light) !important;
+      background: rgba(59,130,246,0.12) !important;
+      box-shadow: 0 0 8px rgba(59,130,246,0.15);
+      transform: scale(1.01);
+    }
+
+    /* Type-colored glow on hover */
+    .track-card:hover .track-dot {
+      transition: box-shadow 0.2s ease;
+    }
+
+    /* ── Polish: Quadrant Hover ─────────��─────────────────────────── */
+
+    .quadrant {
+      transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
+    }
+
+    .quadrant:hover {
+      border-color: rgba(255,255,255,0.15);
+      transform: scale(1.02);
+      box-shadow: 0 0 12px rgba(59,130,246,0.1);
+    }
+
+    .quadrant.expanded:hover {
+      transform: none;
+    }
+
+    /* ── Polish: Event Marker Hover Tooltip ────────────────────────── */
+
+    .event-marker {
+      transition: opacity 0.15s, transform 0.15s;
+      z-index: 2;
+    }
+
+    .event-marker:hover {
+      opacity: 1;
+      transform: translate(-50%, -50%) scale(1.5);
+      z-index: 3;
+    }
+
+    .event-marker-tooltip {
+      position: absolute;
+      bottom: calc(100% + 8px);
+      left: 50%;
+      transform: translateX(-50%);
+      background: rgba(2,6,23,0.95);
+      border: 1px solid var(--panel-border);
+      border-radius: 4px;
+      padding: 4px 8px;
+      font-size: 9px;
+      color: var(--text-primary);
+      white-space: nowrap;
+      pointer-events: none;
+      z-index: 20;
+      backdrop-filter: blur(8px);
+      -webkit-backdrop-filter: blur(8px);
+    }
+
+    /* ── Polish: Command Bar Focus ────────────────────────────────── */
+
+    #commandBar {
+      transition: border-color 0.2s ease, box-shadow 0.2s ease;
+    }
+
+    #commandBar:focus-within {
+      border-color: rgba(59,130,246,0.4);
+      box-shadow: inset 0 0 12px rgba(59,130,246,0.06);
+    }
+
+    /* ── Polish: Tab Button Underline Slide ────────────────────────── */
+
+    .drawer-tab {
+      position: relative;
+      border-bottom: 2px solid transparent;
+      transition: color 0.2s ease, border-color 0.3s ease;
+    }
+
+    .drawer-tab::after {
+      content: '';
+      position: absolute;
+      bottom: -2px;
+      left: 50%;
+      right: 50%;
+      height: 2px;
+      background: var(--accent);
+      transition: left 0.25s ease, right 0.25s ease;
+    }
+
+    .drawer-tab.active::after {
+      left: 0;
+      right: 0;
+    }
+
+    .drawer-tab.active {
+      border-bottom-color: transparent;
+    }
+
+    /* ── Polish: Button Lift on Hover ─────────────────────────────── */
+
+    .vc-btn:hover {
+      background: rgba(255,255,255,0.12);
+      transform: translateY(-1px);
+      box-shadow: 0 2px 8px rgba(0,0,0,0.3);
+    }
+
+    .inspect-back-btn:hover {
+      transform: translateY(-1px);
+    }
+
+    .config-toggle-btn {
+      transition: all 0.15s ease;
+    }
+
+    .config-toggle-btn:hover {
+      transform: translateY(-1px);
+    }
+
+    /* ── Polish: Detection Box Animations ─────────────────────────── */
+
+    /* (keyframes defined above) */
+
+    /* ── Polish: Top Bar Processing Progress Bar ──────────────────── */
+
+    #topBar {
+      position: relative;
+      overflow: hidden;
+    }
+
+    #topBarProgress {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      height: 2px;
+      width: 0%;
+      background: linear-gradient(90deg, var(--accent), var(--accent-light));
+      transition: width 0.3s ease;
+      z-index: 10;
+      opacity: 0;
+    }
+
+    /* FPS flicker */
+    .fps-updating {
+      animation: fps-flicker 0.3s ease;
+    }
+
+    /* Indeterminate progress */
+    .progress-ring__fg.indeterminate {
+      animation: indeterminate-pulse 2s ease-in-out infinite;
+    }
+
+    /* ── Polish: Keyboard Shortcuts Hint ──────────────────────────── */
+
+    #shortcutsHint {
+      position: absolute;
+      bottom: calc(100% + 8px);
+      left: 50%;
+      transform: translateX(-50%);
+      background: rgba(2,6,23,0.95);
+      backdrop-filter: blur(20px);
+      -webkit-backdrop-filter: blur(20px);
+      border: 1px solid var(--panel-border);
+      border-radius: 8px;
+      padding: 10px 14px;
+      z-index: 50;
+      display: flex;
+      gap: 16px;
+      font-size: 9px;
+      color: var(--text-secondary);
+      white-space: nowrap;
+      box-shadow: 0 4px 24px rgba(0,0,0,0.4);
+      opacity: 0;
+      animation: shortcuts-fade 3s ease forwards;
+      pointer-events: none;
+    }
+
+    #shortcutsHint .shortcut-item {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+    }
+
+    #shortcutsHint kbd {
+      font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
+      font-size: 8px;
+      background: rgba(255,255,255,0.06);
+      border: 1px solid var(--panel-border);
+      border-radius: 3px;
+      padding: 1px 4px;
+      color: var(--text-primary);
+    }
+
+    /* ── Polish: Glass Effect on Panels ───────────────────────────── */
+
+    #eventLog {
+      backdrop-filter: blur(20px);
+      -webkit-backdrop-filter: blur(20px);
+      box-shadow: 0 4px 24px rgba(0,0,0,0.3);
+    }
+
+    .toast {
+      backdrop-filter: blur(20px);
+      -webkit-backdrop-filter: blur(20px);
+      box-shadow: 0 4px 24px rgba(0,0,0,0.3);
+    }
+
+    #drawer {
+      box-shadow: 0 4px 24px rgba(0,0,0,0.15);
+    }
+
+    #timeline {
+      box-shadow: 0 2px 16px rgba(0,0,0,0.15);
+    }
+
+    /* ── Polish: z-index Stacking ─────────────────────────────────── */
+
+    #toastContainer { z-index: 100; }
+    #eventLog { z-index: 50; }
+    #progressOverlay { z-index: 5; }
+    #shortcutsHint { z-index: 60; }
+
+    /* ── Polish: Smooth Scroll ────────────────────────────────────── */
+
+    .drawer-section {
+      scroll-behavior: smooth;
+    }
+
+    #eventLog {
+      scroll-behavior: smooth;
+    }

demo/styles/components.css

@@ -0,0 +1,357 @@
+    /* ── Panel Base ────────────────────────────────────────────────── */
+
+    .panel {
+      background: var(--panel-bg);
+      border: 1px solid var(--panel-border);
+      border-radius: 10px;
+      transition: border-color 0.2s ease, background 0.2s ease;
+    }
+
+    .panel:hover {
+      border-color: rgba(255, 255, 255, 0.1);
+    }
+
+    /* ── Typography ────────────────────────────────────────────────── */
+
+    .label {
+      font-size: 8px;
+      text-transform: uppercase;
+      letter-spacing: 2px;
+      color: var(--text-tertiary);
+      font-weight: 500;
+    }
+
+    .value {
+      font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
+      font-size: 13px;
+      color: var(--text-primary);
+    }
+
+    .heading {
+      font-size: 13px;
+      font-weight: 600;
+      color: var(--text-primary);
+      letter-spacing: 0.3px;
+    }
+
+    /* ── Indicators ────────────────────────────────────────────────── */
+
+    .dot {
+      width: 6px;
+      height: 6px;
+      border-radius: 50%;
+      display: inline-block;
+      flex-shrink: 0;
+    }
+
+    .dot--lg {
+      width: 8px;
+      height: 8px;
+    }
+
+    .dot--glow {
+      box-shadow: 0 0 6px currentColor, 0 0 12px currentColor;
+    }
+
+    .pill {
+      font-size: 8px;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 1px;
+      padding: 2px 6px;
+      border-radius: 4px;
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+      line-height: 1;
+    }
+
+    /* ── Utility ───────────────────────────────────────────────────── */
+
+    .hidden {
+      display: none !important;
+    }
+
+    /* ── Transitions ───────────────────────────────────────────────── */
+
+    a, button, input, select, textarea {
+      transition: all 0.2s ease;
+    }
+
+    /* ── Buttons ───────────────────────────────────────────────────── */
+
+    .vc-btn {
+      background: rgba(255,255,255,0.06);
+      border: 1px solid var(--panel-border);
+      color: var(--text-primary);
+      width: 28px;
+      height: 28px;
+      border-radius: 6px;
+      cursor: pointer;
+      font-size: 12px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .vc-select {
+      background: rgba(255,255,255,0.06);
+      border: 1px solid var(--panel-border);
+      color: var(--text-primary);
+      font-size: 10px;
+      padding: 4px 6px;
+      border-radius: 6px;
+      cursor: pointer;
+      font-family: inherit;
+    }
+
+    .vc-select option {
+      background: #0a0f1a;
+    }
+
+    .config-toggle-btn {
+      flex: 1;
+      background: rgba(255,255,255,0.03);
+      border: 1px solid var(--panel-border);
+      color: var(--text-secondary);
+      font-family: inherit;
+      font-size: 9px;
+      font-weight: 600;
+      letter-spacing: 1px;
+      padding: 6px 0;
+      border-radius: 6px;
+      cursor: pointer;
+    }
+
+    .config-toggle-btn.active {
+      background: rgba(59,130,246,0.12);
+      border-color: var(--accent);
+      color: var(--accent-light);
+    }
+
+    .config-toggle-btn:hover:not(.active) {
+      background: rgba(255,255,255,0.06);
+    }
+
+    .inspect-back-btn {
+      background: none;
+      border: 1px solid var(--panel-border);
+      color: var(--text-secondary);
+      font-family: inherit;
+      font-size: 9px;
+      font-weight: 600;
+      letter-spacing: 1px;
+      padding: 4px 8px;
+      border-radius: 4px;
+      cursor: pointer;
+    }
+
+    .inspect-back-btn:hover {
+      background: rgba(255,255,255,0.06);
+      color: var(--text-primary);
+    }
+
+    /* ── Command Bar Internals ────────────────────────────────────── */
+
+    .cmd-icon {
+      color: var(--text-tertiary);
+      font-size: 16px;
+      flex-shrink: 0;
+    }
+
+    .cmd-input {
+      flex: 1;
+      background: none;
+      border: none;
+      color: var(--text-primary);
+      font-family: inherit;
+      font-size: 12px;
+      outline: none;
+    }
+
+    .cmd-input::placeholder {
+      color: var(--text-tertiary);
+    }
+
+    .cmd-badge {
+      font-size: 9px;
+      font-weight: 600;
+      color: var(--text-tertiary);
+      background: rgba(255,255,255,0.04);
+      border: 1px solid var(--panel-border);
+      padding: 2px 6px;
+      border-radius: 4px;
+      flex-shrink: 0;
+      font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
+    }
+
+    /* Config Panel */
+
+    #configPanel {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+    }
+
+    .config-group {
+      display: flex;
+      flex-direction: column;
+      gap: 5px;
+    }
+
+    .config-toggle {
+      display: flex;
+      gap: 4px;
+    }
+
+    .config-select, .config-input {
+      background: rgba(255,255,255,0.03);
+      border: 1px solid var(--panel-border);
+      color: var(--text-primary);
+      font-family: inherit;
+      font-size: 11px;
+      padding: 7px 10px;
+      border-radius: 6px;
+      outline: none;
+    }
+
+    .config-select option {
+      background: #0a0f1a;
+    }
+
+    .config-select:focus, .config-input:focus {
+      border-color: var(--accent);
+    }
+
+    .config-row {
+      flex-direction: row;
+      align-items: center;
+    }
+
+    .config-checkbox-label {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 11px;
+      color: var(--text-secondary);
+      cursor: pointer;
+    }
+
+    .config-checkbox-label input[type="checkbox"] {
+      accent-color: var(--accent);
+    }
+
+    /* ── File Upload ─────────────────────────────────────────────── */
+
+    .file-upload-label {
+      display: flex; align-items: center; gap: 8px;
+      padding: 8px 12px; border-radius: 6px; cursor: pointer;
+      background: rgba(255,255,255,0.03); border: 1px dashed var(--panel-border);
+      color: var(--text-secondary); font-size: 11px; transition: all 0.2s;
+    }
+    .file-upload-label:hover { border-color: var(--accent); color: var(--accent-light); }
+    .file-upload-label.has-file { border-style: solid; border-color: var(--success); color: var(--success); }
+
+    .config-toggle-group {
+      display: flex;
+      gap: 4px;
+    }
+
+    .config-select {
+      width: 100%; background: rgba(255,255,255,0.03); border: 1px solid var(--panel-border);
+      border-radius: 6px; color: var(--text-primary); padding: 6px 10px; font-size: 11px;
+      font-family: inherit;
+    }
+    .config-select:focus { border-color: var(--accent); outline: none; }
+    .config-select option { background: #0a0f1a; color: var(--text-primary); }
+
+    .config-checkbox {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 11px;
+      color: var(--text-secondary);
+      cursor: pointer;
+    }
+    .config-checkbox input[type="checkbox"] {
+      accent-color: var(--accent);
+    }
+
+    /* Track Cards */
+
+    .track-card {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 8px 10px;
+      border-radius: 6px;
+      background: rgba(255,255,255,0.02);
+      border: 1px solid rgba(255,255,255,0.04);
+      margin-bottom: 6px;
+      cursor: pointer;
+    }
+
+    .track-card.selected {
+      border-color: var(--accent);
+      background: rgba(59,130,246,0.06);
+    }
+
+    .track-dot {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      flex-shrink: 0;
+    }
+
+    .track-info {
+      flex: 1;
+      min-width: 0;
+    }
+
+    .track-label {
+      font-size: 11px;
+      font-weight: 500;
+      color: var(--text-primary);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .track-meta {
+      display: flex;
+      gap: 8px;
+      font-size: 9px;
+      color: var(--text-tertiary);
+      font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
+      margin-top: 2px;
+    }
+
+    .track-conf {
+      font-size: 10px;
+      font-weight: 600;
+      font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
+      color: var(--text-secondary);
+      flex-shrink: 0;
+    }
+
+    /* ── Track Card: GPT Assessment Variants ────────────────────────── */
+
+    .track-card.not-relevant { opacity: 0.4; }
+    .track-card.active { border-color: var(--accent); background: rgba(59,130,246,0.08); }
+    .track-card .reason { color: var(--text-secondary); font-size: 10px; margin-top: 4px; line-height: 1.4; }
+    .track-card .features-table { display: none; }
+    .track-card.active .features-table {
+      display: grid; grid-template-columns: 1fr 1fr; gap: 3px 12px;
+      margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--panel-border);
+    }
+    .features-table .feat-key { color: var(--text-tertiary); font-size: 8px; text-transform: uppercase; letter-spacing: 1px; }
+    .features-table .feat-val { color: var(--text-secondary); font-size: 10px; font-family: monospace; }
+    .status-badge {
+      font-size: 8px; padding: 2px 6px; border-radius: 3px; letter-spacing: 0.5px;
+      font-weight: 600; text-transform: uppercase;
+    }
+    .status-badge.match { background: rgba(52,211,153,0.15); color: #34d399; }
+    .status-badge.no-match { background: rgba(248,113,113,0.12); color: #f87171; }
+    .status-badge.relevant { background: rgba(59,130,246,0.12); color: #60a5fa; }
+    .status-badge.not-relevant { background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.4); }
+    .status-badge.pending { background: rgba(251,191,36,0.1); color: #fbbf24; }

demo/styles/explain.css

@@ -0,0 +1,273 @@
+    /* ── Explainability Graph ─────────────────────────────────────── */
+    #explainPanel {
+      overflow-y: auto;
+      padding: 0;
+      position: relative;
+    }
+
+    /* ── Loading / Error ─────────────────────────────────── */
+    .explain-loading {
+      display: flex; flex-direction: column; align-items: center; justify-content: center;
+      gap: 14px; padding: 48px 16px; color: var(--text-secondary); font-size: 11px;
+    }
+    .explain-spinner {
+      width: 28px; height: 28px;
+      border: 2px solid transparent;
+      border-top-color: #a78bfa; border-right-color: #7c3aed;
+      border-radius: 50%;
+      animation: exSpin 0.7s linear infinite;
+    }
+    @keyframes exSpin { to { transform: rotate(360deg); } }
+    .explain-loading span { animation: exPulse 2.5s ease-in-out infinite; letter-spacing: 0.5px; }
+    @keyframes exPulse { 0%,100% { opacity: 0.4; } 50% { opacity: 1; } }
+    .explain-error { padding: 24px 16px; color: var(--danger); font-size: 11px; text-align: center; }
+
+    /* ── Tree Container ──────────────────────────────────── */
+    .ex-tree {
+      padding: 16px 12px;
+      position: relative;
+    }
+
+    /* ── Root Node ────────────────────────────────────────── */
+    .ex-node-root {
+      position: relative;
+      display: flex; align-items: center; gap: 12px;
+      padding: 14px 16px;
+      background: linear-gradient(135deg, rgba(124,58,237,0.18), rgba(59,130,246,0.08));
+      border: 1px solid rgba(124,58,237,0.4);
+      border-radius: 10px;
+      animation: exNodeIn 0.5s ease-out;
+      overflow: hidden;
+    }
+    .ex-node-root::before {
+      content: ''; position: absolute; inset: 0;
+      background: radial-gradient(ellipse at 20% 30%, rgba(124,58,237,0.15) 0%, transparent 65%);
+      pointer-events: none;
+    }
+    .ex-conf-ring { width: 42px; height: 42px; flex-shrink: 0; }
+    .ex-conf-ring .ring-bg { fill: none; stroke: rgba(255,255,255,0.06); stroke-width: 3; }
+    .ex-conf-ring .ring-fill {
+      fill: none; stroke: #a78bfa; stroke-width: 3; stroke-linecap: round;
+      transform: rotate(-90deg); transform-origin: center;
+      animation: exRingDraw 1s ease-out forwards;
+    }
+    .ex-conf-ring .ring-text {
+      fill: #e9d5ff; font-size: 10px; font-weight: 700;
+      text-anchor: middle; dominant-baseline: central;
+    }
+    @keyframes exRingDraw { from { stroke-dashoffset: 113; } }
+    .ex-root-info { flex: 1; min-width: 0; }
+    .ex-root-label {
+      font-size: 13px; font-weight: 700; letter-spacing: 1.5px;
+      color: #e9d5ff; text-transform: uppercase;
+    }
+    .ex-root-summary {
+      font-size: 9.5px; color: var(--text-secondary); line-height: 1.5; margin-top: 3px;
+      display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
+    }
+    .ex-root-badge {
+      display: inline-block; margin-top: 5px; padding: 2px 8px;
+      border-radius: 4px; font-size: 8px; font-weight: 700; letter-spacing: 0.8px;
+    }
+    .ex-root-badge.match { background: rgba(34,197,94,0.15); color: #4ade80; border: 1px solid rgba(34,197,94,0.3); }
+    .ex-root-badge.no-match { background: rgba(239,68,68,0.15); color: #f87171; border: 1px solid rgba(239,68,68,0.3); }
+
+    /* ── Trunk Line (root → categories) ──────────────────── */
+    .ex-trunk {
+      width: 2px; height: 16px;
+      margin: 0 auto;
+      background: linear-gradient(180deg, rgba(124,58,237,0.6), rgba(124,58,237,0.2));
+    }
+
+    /* ── Category Node ───────────────────────────────────── */
+    .ex-node-cat {
+      position: relative;
+      margin-top: 2px;
+      animation: exNodeIn 0.4s ease-out both;
+    }
+    .ex-cat-head {
+      display: flex; align-items: center; gap: 8px;
+      padding: 8px 12px;
+      border-radius: 8px;
+      cursor: pointer;
+      border: 1px solid rgba(255,255,255,0.05);
+      background: rgba(255,255,255,0.02);
+      transition: all 0.25s;
+      user-select: none;
+      position: relative;
+    }
+    .ex-cat-head:hover { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); }
+    .ex-node-cat.open > .ex-cat-head { border-color: var(--cat-color, rgba(255,255,255,0.15)); }
+
+    /* Branch line from trunk */
+    .ex-cat-branch {
+      position: absolute; left: -14px; top: 50%;
+      width: 14px; height: 2px;
+      transform: translateY(-1px);
+    }
+    .ex-cat-dot {
+      width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
+      box-shadow: 0 0 8px var(--cat-color);
+      background: var(--cat-color);
+      transition: transform 0.2s;
+    }
+    .ex-node-cat.open > .ex-cat-head .ex-cat-dot { transform: scale(1.2); }
+    .ex-cat-name {
+      flex: 1; font-size: 11px; font-weight: 600;
+      letter-spacing: 0.5px; text-transform: uppercase;
+      color: var(--text-primary);
+    }
+    .ex-cat-chevron {
+      width: 14px; height: 14px; flex-shrink: 0;
+      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      color: var(--text-tertiary);
+    }
+    .ex-node-cat.open > .ex-cat-head .ex-cat-chevron { transform: rotate(90deg); color: var(--cat-color); }
+    .ex-cat-count {
+      font-size: 9px; color: var(--text-tertiary); font-weight: 500;
+      padding: 1px 6px; border-radius: 3px;
+      background: rgba(255,255,255,0.04);
+    }
+
+    /* Feature container with branch lines */
+    .ex-features-wrap {
+      max-height: 0; overflow: hidden;
+      transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+      margin-left: 16px;
+      border-left: 2px solid rgba(255,255,255,0.06);
+      position: relative;
+    }
+    .ex-node-cat.open > .ex-features-wrap {
+      max-height: 800px;
+      border-left-color: var(--cat-color, rgba(255,255,255,0.12));
+    }
+    .ex-features-inner { padding: 6px 0 8px 0; }
+
+    /* ── Feature Node ────────────────────────────────────── */
+    .ex-node-feat {
+      position: relative;
+      margin: 3px 0; margin-left: 12px;
+      padding: 7px 10px;
+      border-radius: 6px;
+      border: 1px solid rgba(255,255,255,0.04);
+      background: rgba(255,255,255,0.015);
+      transition: all 0.25s;
+      animation: exFeatIn 0.3s ease-out both;
+    }
+    .ex-node-feat:hover {
+      background: rgba(255,255,255,0.04);
+      border-color: rgba(255,255,255,0.1);
+      transform: translateX(2px);
+    }
+    @keyframes exFeatIn { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: translateX(0); } }
+
+    /* Branch line from category trunk to feature */
+    .ex-feat-branch {
+      position: absolute; left: -13px; top: 16px;
+      width: 12px; height: 2px;
+    }
+    .ex-feat-name {
+      font-size: 10.5px; font-weight: 600; color: var(--text-primary); line-height: 1.3;
+    }
+    .ex-feat-reasoning {
+      font-size: 9px; color: var(--text-secondary); line-height: 1.5; margin-top: 3px;
+    }
+    .ex-feat-validators { display: flex; gap: 6px; margin-top: 5px; flex-wrap: wrap; }
+    .ex-val-chip {
+      display: inline-flex; align-items: center; gap: 3px;
+      font-size: 8px; font-weight: 600; letter-spacing: 0.3px;
+      padding: 2px 6px; border-radius: 3px;
+    }
+    .ex-val-chip.agree { background: rgba(34,197,94,0.1); color: #4ade80; }
+    .ex-val-chip.disagree { background: rgba(239,68,68,0.1); color: #f87171; }
+
+    /* ── LLM Tags ────────────────────────────────────────── */
+    .ex-llm-strip { display: flex; gap: 5px; margin: 10px 0 6px; }
+    .ex-llm-tag {
+      font-size: 8px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase;
+      padding: 2px 7px; border-radius: 3px;
+      background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
+      color: var(--text-tertiary);
+    }
+    .ex-llm-tag.active { border-color: rgba(124,58,237,0.4); color: #c4b5fd; background: rgba(124,58,237,0.08); }
+
+    /* ── Consensus Bar ───────────────────────────────────── */
+    .ex-consensus {
+      margin-top: 12px; padding: 10px 12px;
+      background: rgba(255,255,255,0.02); border-radius: 8px;
+      animation: exNodeIn 0.5s ease-out 0.4s both;
+    }
+    .ex-cons-bar-bg {
+      height: 4px; border-radius: 2px;
+      background: rgba(255,255,255,0.06); overflow: hidden;
+    }
+    .ex-cons-bar-fill {
+      height: 100%; border-radius: 2px;
+      background: linear-gradient(90deg, #7c3aed, #a78bfa);
+      box-shadow: 0 0 8px rgba(124,58,237,0.5);
+      transition: width 1s cubic-bezier(0.4,0,0.2,1);
+    }
+    .ex-cons-labels {
+      display: flex; justify-content: space-between;
+      margin-top: 6px; font-size: 9px; color: var(--text-tertiary);
+    }
+    .ex-cons-labels .agreed { color: #a78bfa; }
+
+    /* ── Expand/Collapse All ─────────────────────────────── */
+    .ex-controls {
+      display: flex; justify-content: flex-end; gap: 6px;
+      margin-bottom: 8px;
+    }
+    .ex-ctrl-btn {
+      font-size: 8px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase;
+      padding: 3px 8px; border-radius: 4px; border: 1px solid rgba(255,255,255,0.08);
+      background: rgba(255,255,255,0.03); color: var(--text-secondary);
+      cursor: pointer; transition: all 0.2s;
+    }
+    .ex-ctrl-btn:hover { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.15); color: var(--text-primary); }
+    .ex-ctrl-btn.active { background: rgba(124,58,237,0.15); border-color: rgba(124,58,237,0.4); color: #c4b5fd; }
+
+    /* ─��� Graph Node View ─────────────────────────────────── */
+    .ex-graph-wrap {
+      position: relative;
+      overflow: auto;
+      border-radius: 8px;
+      background: radial-gradient(ellipse at 50% 30%, rgba(124,58,237,0.06) 0%, transparent 70%);
+      border: 1px solid rgba(255,255,255,0.04);
+      min-height: 260px;
+    }
+    .ex-graph-svg {
+      display: block;
+      font-family: 'Inter', -apple-system, sans-serif;
+    }
+    .ex-graph-svg text { pointer-events: none; user-select: none; }
+    .ex-graph-svg .gn-edge {
+      fill: none; stroke-width: 2; opacity: 0.45;
+      animation: exEdgeDraw 0.8s ease-out both;
+    }
+    @keyframes exEdgeDraw {
+      from { stroke-dashoffset: 200; }
+      to { stroke-dashoffset: 0; }
+    }
+    .ex-graph-svg .gn-node { cursor: default; }
+    .ex-graph-svg .gn-node:hover rect,
+    .ex-graph-svg .gn-node:hover circle { filter: brightness(1.3); }
+
+    /* Graph tooltip */
+    .ex-graph-tip {
+      position: absolute; z-index: 100;
+      background: rgba(15, 23, 42, 0.95);
+      border: 1px solid rgba(124,58,237,0.3);
+      border-radius: 6px; padding: 8px 10px;
+      max-width: 220px; font-size: 9.5px;
+      color: var(--text-primary); line-height: 1.5;
+      pointer-events: none;
+      box-shadow: 0 4px 16px rgba(0,0,0,0.6);
+      animation: exTipIn 0.15s ease-out;
+    }
+    @keyframes exTipIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
+    .ex-graph-tip strong { color: #e9d5ff; font-size: 10px; }
+    .ex-graph-tip .gt-section { margin-top: 4px; padding-top: 3px; border-top: 1px solid rgba(255,255,255,0.08); }
+    .ex-graph-tip .gt-agree { color: #4ade80; }
+    .ex-graph-tip .gt-disagree { color: #f87171; }
+    .ex-graph-tip .gt-label { font-weight: 600; color: var(--text-secondary); }

demo/styles/inspect.css

@@ -0,0 +1,383 @@
+    /* Inspect panel styling */
+    .inspect-header {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin-bottom: 12px;
+      padding-bottom: 10px;
+      border-bottom: 1px solid var(--panel-border);
+    }
+
+    .inspect-row {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 6px 0;
+      border-bottom: 1px solid rgba(255,255,255,0.03);
+    }
+
+    .inspect-label {
+      font-size: 8px;
+      text-transform: uppercase;
+      letter-spacing: 1.5px;
+      color: var(--text-tertiary);
+    }
+
+    /* ── Inspect Quad Grid ────────────────────────────────────────── */
+
+    #inspectPanel {
+      display: flex;
+      flex-direction: column;
+    }
+
+    #inspectPanel.hidden {
+      display: none !important;
+    }
+
+    #inspectHeader {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin-bottom: 8px;
+      padding-bottom: 8px;
+      border-bottom: 1px solid var(--panel-border);
+      flex-shrink: 0;
+    }
+
+    #inspectBack {
+      background: none;
+      border: 1px solid var(--panel-border);
+      color: var(--text-secondary);
+      font-family: inherit;
+      font-size: 9px;
+      font-weight: 600;
+      letter-spacing: 1px;
+      padding: 4px 8px;
+      border-radius: 4px;
+      cursor: pointer;
+      flex-shrink: 0;
+    }
+
+    #inspectBack:hover {
+      background: rgba(255,255,255,0.06);
+      color: var(--text-primary);
+    }
+
+    #inspectLabel {
+      font-size: 11px;
+      font-weight: 600;
+      letter-spacing: 1.5px;
+      color: var(--text-primary);
+      flex: 1;
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    #inspectConf {
+      font-size: 11px;
+      flex-shrink: 0;
+    }
+
+    #quadGrid {
+      display: grid;
+      grid-template: 1fr 1fr / 1fr 1fr;
+      gap: 6px;
+      flex: 1;
+      min-height: 0;
+    }
+
+    .quadrant {
+      position: relative;
+      border-radius: 8px;
+      overflow: hidden;
+      background: var(--panel-bg);
+      border: 1px solid var(--panel-border);
+      cursor: pointer;
+    }
+
+    .quad-label {
+      position: absolute;
+      top: 6px;
+      left: 8px;
+      font-size: 9px;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 1.5px;
+      z-index: 2;
+      pointer-events: none;
+    }
+
+    .quad-canvas {
+      width: 100%;
+      height: 100%;
+      display: block;
+    }
+
+    .quad-metric {
+      position: absolute;
+      bottom: 6px;
+      left: 8px;
+      font-size: 9px;
+      font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
+      color: var(--text-secondary);
+      z-index: 2;
+      pointer-events: none;
+    }
+
+    .quadrant.expanded {
+      grid-column: 1 / -1;
+      grid-row: 1 / -1;
+      z-index: 5;
+    }
+
+    #threeContainer {
+      width: 100%;
+      height: 100%;
+    }
+
+    #threeContainer canvas {
+      width: 100% !important;
+      height: 100% !important;
+    }
+
+    #inspectMetrics {
+      flex-shrink: 0;
+      display: flex;
+      flex-wrap: wrap;
+      gap: 6px;
+      padding-top: 8px;
+      border-top: 1px solid var(--panel-border);
+      margin-top: 8px;
+    }
+
+    .inspect-metric-item {
+      flex: 1 1 45%;
+      min-width: 0;
+    }
+
+    .inspect-metric-item .label {
+      font-size: 7px;
+    }
+
+    .inspect-metric-item .value {
+      font-size: 11px;
+    }
+
+    /* ── Metrics Mode ─────────────────────────────────────────────── */
+
+    .metric-hero {
+      text-align: center;
+      padding: 16px 0 12px;
+      border-bottom: 1px solid var(--panel-border);
+      margin-bottom: 12px;
+    }
+
+    .metric-big-number {
+      font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
+      font-size: 48px;
+      font-weight: 300;
+      color: var(--accent-light);
+      line-height: 1;
+    }
+
+    .metric-hero .label {
+      margin-top: 6px;
+    }
+
+    .metric-breakdown {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      margin-bottom: 14px;
+    }
+
+    .metric-bar-row {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .metric-bar-label {
+      font-size: 9px;
+      font-weight: 600;
+      letter-spacing: 1px;
+      text-transform: uppercase;
+      color: var(--text-secondary);
+      min-width: 72px;
+      text-align: right;
+    }
+
+    .metric-bar-track {
+      flex: 1;
+      height: 4px;
+      background: rgba(255,255,255,0.04);
+      border-radius: 2px;
+      overflow: hidden;
+    }
+
+    .metric-bar-fill {
+      height: 100%;
+      border-radius: 2px;
+      transition: width 0.6s ease;
+    }
+
+    .metric-bar-count {
+      font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
+      font-size: 10px;
+      color: var(--text-primary);
+      min-width: 16px;
+    }
+
+    .metric-stats {
+      display: flex;
+      flex-direction: column;
+      gap: 0;
+    }
+
+    .metric-stat-row {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 6px 0;
+      border-bottom: 1px solid rgba(255,255,255,0.03);
+    }
+
+    .metric-stat-row:last-child {
+      border-bottom: none;
+    }
+
+    .metric-stat-label {
+      font-size: 9px;
+      text-transform: uppercase;
+      letter-spacing: 1.2px;
+      color: var(--text-tertiary);
+    }
+
+    .metric-stat-value {
+      font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
+      font-size: 12px;
+      color: var(--text-primary);
+      font-weight: 500;
+    }
+
+    .inspect-value {
+      font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
+      font-size: 12px;
+      color: var(--text-primary);
+    }
+
+    /* Mission report styling */
+    .mission-report {
+      display: flex;
+      flex-direction: column;
+      gap: 14px;
+    }
+
+    .report-header {
+      font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
+      font-size: 11px;
+      font-weight: 700;
+      letter-spacing: 1.5px;
+      color: var(--accent-light);
+      padding-bottom: 8px;
+      border-bottom: 1px solid var(--panel-border);
+    }
+
+    .report-section {
+      background: rgba(255,255,255,0.02);
+      border: 1px solid rgba(255,255,255,0.04);
+      border-radius: 6px;
+      padding: 10px 12px;
+    }
+
+    .report-section-title {
+      font-size: 8px;
+      text-transform: uppercase;
+      letter-spacing: 2px;
+      color: var(--accent-light);
+      margin-bottom: 8px;
+      font-weight: 600;
+    }
+
+    .report-stat {
+      display: flex;
+      justify-content: space-between;
+      padding: 4px 0;
+      font-size: 11px;
+    }
+
+    .report-stat-label {
+      color: var(--text-tertiary);
+    }
+
+    .report-stat-value {
+      font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
+      color: var(--text-primary);
+      font-weight: 500;
+    }
+
+    .report-threat {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 6px 8px;
+      border-radius: 4px;
+      background: rgba(239,68,68,0.06);
+      border: 1px solid rgba(239,68,68,0.12);
+      margin-bottom: 6px;
+    }
+
+    .report-threat-time {
+      font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
+      font-size: 9px;
+      color: var(--text-tertiary);
+      flex-shrink: 0;
+    }
+
+    .report-threat-label {
+      font-size: 10px;
+      color: var(--danger);
+      font-weight: 500;
+    }
+
+    .report-rec {
+      font-size: 10px;
+      color: var(--text-secondary);
+      padding: 4px 0 4px 12px;
+      border-left: 2px solid var(--accent);
+      margin-bottom: 6px;
+      line-height: 1.5;
+    }
+
+    /* Metrics panel styling */
+    .metrics-grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 8px;
+      margin-bottom: 12px;
+    }
+
+    .metric-card {
+      background: rgba(255,255,255,0.02);
+      border: 1px solid rgba(255,255,255,0.04);
+      border-radius: 6px;
+      padding: 10px;
+      text-align: center;
+    }
+
+    .metric-value {
+      font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
+      font-size: 18px;
+      font-weight: 700;
+      color: var(--text-primary);
+    }
+
+    .metric-label {
+      font-size: 8px;
+      text-transform: uppercase;
+      letter-spacing: 1.5px;
+      color: var(--text-tertiary);
+      margin-top: 4px;
+    }

demo/styles/layout.css

@@ -0,0 +1,162 @@
+    /* ── Layout: Top Bar ───────────────────────────────────────────── */
+
+    #topBar {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0 20px;
+      border-bottom: 1px solid var(--panel-border);
+      background: rgba(2, 6, 23, 0.8);
+      backdrop-filter: blur(12px);
+      -webkit-backdrop-filter: blur(12px);
+    }
+
+    /* ── Layout: Main Area ─────────────────────────────────────────── */
+
+    #mainArea {
+      display: flex;
+      gap: 12px;
+      padding: 12px;
+      min-height: 0;
+      overflow: hidden;
+    }
+
+    #videoFeed {
+      flex: 7;
+      min-width: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: relative;
+      overflow: hidden;
+    }
+
+    #drawer {
+      flex: 3;
+      min-width: 0;
+      display: flex;
+      flex-direction: column;
+      align-items: stretch;
+      overflow: hidden;
+    }
+
+    /* ── Layout: Timeline ──────────────────────────────────────────── */
+
+    #timeline {
+      margin: 0 12px;
+      padding: 10px 16px;
+      display: flex;
+      flex-direction: column;
+      align-items: stretch;
+      gap: 6px;
+      min-height: 48px;
+      position: relative;
+    }
+
+    /* ── Layout: Command Bar ───────────────────────────────────────── */
+
+    #commandBar {
+      margin: 8px 12px 12px;
+      padding: 10px 16px;
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+      gap: 10px;
+      background: transparent;
+      border: 1px solid var(--panel-border);
+      border-radius: 10px;
+      min-height: 44px;
+    }
+
+    /* ── Top Bar Internals ────────────────────────────────────────── */
+
+    .topbar-left, .topbar-right {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+    }
+
+    .topbar-sep {
+      color: var(--text-tertiary);
+      font-weight: 300;
+      font-size: 16px;
+      margin: 0 2px;
+    }
+
+    .topbar-mission {
+      color: var(--success);
+      letter-spacing: 2.5px;
+    }
+
+    .topbar-pulse {
+      animation: pulse-dot 2s ease-in-out infinite;
+    }
+
+    .topbar-indicator {
+      font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
+      font-size: 10px;
+      color: var(--text-secondary);
+      letter-spacing: 0.5px;
+      display: inline-flex;
+      align-items: center;
+      gap: 5px;
+    }
+
+    .topbar-clock {
+      min-width: 72px;
+      text-align: right;
+    }
+
+    /* ── Placeholder Labels ────────────────────────────────────────── */
+
+    .placeholder-label {
+      color: var(--text-tertiary);
+      font-size: 11px;
+      letter-spacing: 1px;
+      text-transform: uppercase;
+      user-select: none;
+    }
+
+    /* ── Drawer ───────────────────────────────────────────────────── */
+
+    .drawer-tabs {
+      display: flex;
+      border-bottom: 1px solid var(--panel-border);
+      flex-shrink: 0;
+    }
+
+    .drawer-tab {
+      flex: 1;
+      background: none;
+      border: none;
+      color: var(--text-tertiary);
+      font-family: inherit;
+      font-size: 9px;
+      font-weight: 600;
+      letter-spacing: 1.5px;
+      text-transform: uppercase;
+      padding: 10px 0;
+      cursor: pointer;
+    }
+
+    .drawer-tab:hover {
+      color: var(--text-secondary);
+    }
+
+    .drawer-tab.active {
+      color: var(--accent-light);
+    }
+
+    .drawer-section {
+      flex: 1;
+      overflow-y: auto;
+      padding: 10px 12px;
+    }
+
+    /* ── Min Width Guard ───────────────────────────────────────────── */
+
+    @media (max-width: 1280px) {
+      body {
+        min-width: 1280px;
+      }
+    }

demo/styles/state.css

@@ -0,0 +1,69 @@
+    /* ── State-Driven Visibility ─────────────────────────────────── */
+
+    /* Start button: visible only in ready */
+    #startBtn { display: none; }
+    body[data-state="ready"] #startBtn { display: block; }
+
+    /* Progress overlay: visible only in processing */
+    #progressOverlay { display: none !important; }
+    body[data-state="processing"] #progressOverlay {
+      display: flex !important;
+      background: rgba(0,0,0,0.6);
+    }
+
+    /* Drawer tabs: hidden in ready (config panel shown instead) */
+    body[data-state="ready"] .drawer-tabs { display: none; }
+
+    /* Processing: only TRACKS tab available */
+    body[data-state="processing"] .drawer-tab[data-tab="inspect"],
+    body[data-state="processing"] .drawer-tab[data-tab="explain"] {
+      opacity: 0.3;
+      pointer-events: none;
+    }
+
+    /* Analysis: TRACKS + METRICS available, INSPECT disabled */
+    body[data-state="analysis"] .drawer-tab[data-tab="inspect"] {
+      opacity: 0.3;
+      pointer-events: none;
+    }
+
+    /* Inspect state: all tabs enabled, INSPECT forced active */
+    body[data-state="inspect"] .drawer-tab[data-tab="inspect"] {
+      opacity: 1;
+      pointer-events: auto;
+    }
+
+    /* Video controls: hidden in ready */
+    body[data-state="ready"] #videoControls { display: none; }
+    body[data-state="ready"] #videoBadges { display: none; }
+    body[data-state="ready"] #frameCounter { display: none; }
+
+    /* Processing pulse for top bar dot */
+    .topbar-dot-processing {
+      animation: processing-pulse 0.8s ease-in-out infinite !important;
+    }
+
+    /* Processing progress overlay fade */
+    body[data-state="processing"] #progressOverlay {
+      opacity: 1;
+    }
+
+    /* Top Bar Processing Progress Bar */
+    body[data-state="processing"] #topBarProgress {
+      opacity: 1;
+    }
+
+    /* New Analysis button visibility */
+    body[data-state="analysis"] #newAnalysisBtn { display: inline-flex; }
+    body[data-state="inspect"] #newAnalysisBtn { display: inline-flex; }
+    body[data-state="ready"] #newAnalysisBtn { display: none; }
+    body[data-state="processing"] #newAnalysisBtn { display: none; }
+
+    /* ── State-Driven MJPEG/Video/Cancel Visibility ──────────────── */
+
+    body[data-state="processing"] #mjpegStream { display: block; }
+    body[data-state="processing"] #cancelBtn { display: block; }
+    body[data-state="processing"] #videoCanvas { opacity: 0; }
+    body[data-state="ready"] #mjpegStream, body[data-state="analysis"] #mjpegStream, body[data-state="inspect"] #mjpegStream { display: none; }
+    body[data-state="ready"] #processedVideo, body[data-state="processing"] #processedVideo { display: none; }
+    body[data-state="ready"] #cancelBtn, body[data-state="analysis"] #cancelBtn, body[data-state="inspect"] #cancelBtn { display: none; }

demo/styles/timeline.css

@@ -0,0 +1,167 @@
+    /* ── Timeline Internals ───────────────────────────────────────── */
+
+    .timeline-bar {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      width: 100%;
+    }
+
+    .timeline-time {
+      font-size: 9px;
+      color: var(--text-tertiary);
+      flex-shrink: 0;
+      min-width: 32px;
+    }
+
+    .timeline-waveform-wrap {
+      flex: 1;
+      height: 32px;
+      position: relative;
+      cursor: pointer;
+    }
+
+    #waveformCanvas {
+      width: 100%;
+      height: 100%;
+      border-radius: 4px;
+    }
+
+    #playhead {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      width: 2px;
+      background: #fff;
+      left: 0;
+      z-index: 2;
+      pointer-events: auto;
+      cursor: ew-resize;
+    }
+
+    .playhead-handle {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      background: #fff;
+      position: absolute;
+      top: -4px;
+      left: -3px;
+      box-shadow: 0 0 4px rgba(255,255,255,0.4);
+    }
+
+    #eventMarkers {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      pointer-events: none;
+      z-index: 1;
+    }
+
+    .event-marker {
+      position: absolute;
+      width: 6px;
+      height: 6px;
+      border-radius: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      pointer-events: auto;
+      cursor: pointer;
+      opacity: 0.8;
+    }
+
+    .timeline-legend {
+      display: flex;
+      gap: 14px;
+      font-size: 9px;
+      color: var(--text-tertiary);
+      padding: 0 42px;
+    }
+
+    .timeline-legend-item {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+    }
+
+    .timeline-log-toggle {
+      background: none;
+      border: none;
+      color: var(--text-tertiary);
+      font-family: inherit;
+      font-size: 8px;
+      font-weight: 600;
+      letter-spacing: 1.5px;
+      text-transform: uppercase;
+      cursor: pointer;
+      padding: 2px 0;
+      align-self: flex-start;
+      margin-left: 42px;
+    }
+
+    .timeline-log-toggle:hover {
+      color: var(--text-secondary);
+    }
+
+    #eventLog {
+      position: absolute;
+      bottom: 100%;
+      left: 0;
+      right: 0;
+      max-height: 200px;
+      overflow-y: auto;
+      background: rgba(2,6,23,0.92);
+      backdrop-filter: blur(12px);
+      -webkit-backdrop-filter: blur(12px);
+      border: 1px solid var(--panel-border);
+      border-radius: 8px 8px 0 0;
+      padding: 8px;
+      z-index: 10;
+    }
+
+    .event-log-entry {
+      display: flex;
+      align-items: flex-start;
+      gap: 8px;
+      padding: 5px 6px;
+      border-radius: 4px;
+      font-size: 10px;
+      transition: background 0.15s;
+      cursor: pointer;
+    }
+
+    .event-log-entry:hover {
+      background: rgba(255,255,255,0.04);
+    }
+
+    .event-log-time {
+      font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
+      font-size: 9px;
+      color: var(--text-tertiary);
+      flex-shrink: 0;
+      min-width: 52px;
+    }
+
+    .event-log-type {
+      font-size: 8px;
+      font-weight: 600;
+      letter-spacing: 0.8px;
+      text-transform: uppercase;
+      padding: 1px 5px;
+      border-radius: 3px;
+      flex-shrink: 0;
+    }
+
+    .event-log-label {
+      color: var(--text-primary);
+      font-weight: 500;
+      flex-shrink: 0;
+    }
+
+    .event-log-desc {
+      color: var(--text-tertiary);
+      flex: 1;
+      min-width: 0;
+    }

demo/styles/variables.css

@@ -0,0 +1,92 @@
+    /* ── CSS Design System ─────────────────────────────────────────── */
+
+    :root {
+      --base: #020617;
+      --accent: #3b82f6;
+      --accent-light: #60a5fa;
+      --danger: #ef4444;
+      --warning: #f59e0b;
+      --success: #22c55e;
+      --text-primary: rgba(255, 255, 255, 0.92);
+      --text-secondary: rgba(255, 255, 255, 0.58);
+      --text-tertiary: rgba(255, 255, 255, 0.35);
+      --panel-bg: rgba(255, 255, 255, 0.02);
+      --panel-border: rgba(255, 255, 255, 0.06);
+    }
+
+    /* ── Reset ──────────────────────────────────────────────────────── */
+
+    *, *::before, *::after {
+      box-sizing: border-box;
+    }
+
+    body {
+      margin: 0;
+      padding: 0;
+      font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+      font-size: 13px;
+      color: var(--text-primary);
+      background: var(--base);
+      overflow: hidden;
+      width: 100vw;
+      height: 100vh;
+      display: grid;
+      grid-template-rows: 44px 1fr auto auto;
+      grid-template-columns: 1fr;
+      position: relative;
+    }
+
+    /* ── Ambient Background ────────────────────────────────────────── */
+
+    body::before {
+      content: '';
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background:
+        radial-gradient(ellipse 80% 50% at 20% 40%, rgba(59, 130, 246, 0.04) 0%, transparent 70%),
+        radial-gradient(ellipse 60% 60% at 80% 60%, rgba(96, 165, 250, 0.03) 0%, transparent 70%),
+        radial-gradient(ellipse 90% 40% at 50% 90%, rgba(59, 130, 246, 0.02) 0%, transparent 60%);
+      pointer-events: none;
+      z-index: 0;
+    }
+
+    body > * {
+      position: relative;
+      z-index: 1;
+    }
+
+    /* ── Scrollbar ─────────────────────────────────────────────────── */
+
+    ::-webkit-scrollbar {
+      width: 4px;
+      height: 4px;
+    }
+
+    ::-webkit-scrollbar-track {
+      background: rgba(255, 255, 255, 0.02);
+      border-radius: 2px;
+    }
+
+    ::-webkit-scrollbar-thumb {
+      background: var(--accent);
+      border-radius: 2px;
+      opacity: 0.5;
+    }
+
+    ::-webkit-scrollbar-thumb:hover {
+      background: var(--accent-light);
+    }
+
+    /* ── Polish: Global Text Rendering ────────────────────────────── */
+
+    * {
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+    }
+
+    ::selection {
+      background: rgba(59,130,246,0.3);
+    }

demo/styles/video.css

@@ -0,0 +1,154 @@
+    /* ── Video Feed ───────────────────────────────────────────────── */
+
+    #videoFeed {
+      position: relative;
+      background: #0a0f1a;
+    }
+
+    #videoCanvas, #overlayCanvas {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+    }
+
+    #overlayCanvas {
+      pointer-events: auto;
+    }
+
+    #videoBadges {
+      position: absolute;
+      top: 10px;
+      left: 10px;
+      display: flex;
+      gap: 6px;
+      z-index: 2;
+    }
+
+    #frameCounter {
+      position: absolute;
+      bottom: 10px;
+      left: 10px;
+      font-size: 10px;
+      color: var(--text-secondary);
+      z-index: 2;
+      background: rgba(0,0,0,0.45);
+      padding: 2px 6px;
+      border-radius: 4px;
+    }
+
+    #videoControls {
+      position: absolute;
+      bottom: 10px;
+      right: 10px;
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      z-index: 4;
+    }
+
+    /* Progress Overlay */
+
+    #progressOverlay {
+      position: absolute;
+      inset: 0;
+      background: rgba(2,6,23,0.75);
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      z-index: 5;
+      gap: 8px;
+    }
+
+    .progress-ring circle {
+      fill: none;
+      stroke-width: 3;
+    }
+
+    .progress-ring__bg {
+      stroke: rgba(255,255,255,0.06);
+    }
+
+    .progress-ring__fg {
+      stroke: var(--accent);
+      stroke-linecap: round;
+      stroke-dasharray: 213.628;
+      stroke-dashoffset: 213.628;
+      transform: rotate(-90deg);
+      transform-origin: center;
+      transition: stroke-dashoffset 0.3s ease;
+    }
+
+    .progress-pct {
+      font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
+      font-size: 14px;
+      font-weight: 600;
+      color: var(--text-primary);
+    }
+
+    /* Start Button */
+
+    #startBtn {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      z-index: 3;
+      padding: 14px 36px;
+      font-family: inherit;
+      font-size: 13px;
+      font-weight: 600;
+      letter-spacing: 1.5px;
+      text-transform: uppercase;
+      color: #fff;
+      background: linear-gradient(135deg, var(--accent), #2563eb);
+      border: none;
+      border-radius: 10px;
+      cursor: pointer;
+      box-shadow: 0 0 20px rgba(59,130,246,0.3), 0 4px 12px rgba(0,0,0,0.3);
+      transition: transform 0.15s ease, box-shadow 0.15s ease;
+    }
+
+    #startBtn:hover {
+      transform: translate(-50%, -50%) scale(1.04);
+      box-shadow: 0 0 30px rgba(59,130,246,0.45), 0 6px 16px rgba(0,0,0,0.35);
+    }
+
+    #startBtn:active {
+      transform: translate(-50%, -50%) scale(0.97);
+    }
+
+    #startBtn:disabled { opacity: 0.3; pointer-events: none; }
+
+    /* ── MJPEG Stream + Processed Video ──────────────────────────── */
+
+    #mjpegStream {
+      position: absolute; top: 0; left: 0; width: 100%; height: 100%;
+      object-fit: contain; z-index: 1; border-radius: 10px;
+    }
+    #processedVideo {
+      position: absolute; top: 0; left: 0; width: 100%; height: 100%;
+      object-fit: contain; z-index: 1; border-radius: 10px; background: #000;
+    }
+    .cancel-btn {
+      position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
+      z-index: 15; background: rgba(239,68,68,0.2); border: 1px solid rgba(239,68,68,0.4);
+      color: #ef4444; padding: 6px 20px; border-radius: 6px; font-family: inherit;
+      font-size: 10px; letter-spacing: 1px; text-transform: uppercase; cursor: pointer;
+    }
+    .cancel-btn:hover { background: rgba(239,68,68,0.3); }
+
+    #newAnalysisBtn {
+      position: absolute; top: 10px; right: 10px;
+      z-index: 15; background: rgba(59,130,246,0.15); border: 1px solid rgba(59,130,246,0.35);
+      color: var(--accent-light); padding: 5px 12px; border-radius: 6px; font-family: inherit;
+      font-size: 9px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; cursor: pointer;
+      display: none;
+    }
+    #newAnalysisBtn:hover { background: rgba(59,130,246,0.25); }
+
+    /* Mission-colored SVG overlay boxes */
+    #detectionOverlay rect { cursor: pointer; transition: opacity 0.15s; }
+    #detectionOverlay rect:hover { opacity: 1 !important; }