feat(demo): unified mission-status color scheme across all UI elements

Redesigned colors around three mission states:
- Match (satisfies=true): #34d399 emerald green
- No Match (satisfies=false): #f87171 soft red
- Unassessed (no verdict): #64748b slate gray

Unified across:
- CSS variables (--mission-match/nomatch/unassessed)
- Track card dots (was type-based color, now mission status)
- SVG overlay strokes (was hardcoded rgba, now MISSION_COLORS)
- Status badges (now reference CSS vars)
- Timeline event markers (critical=match green, low=nomatch red)
- Event log entries (same mapping)
- Waveform density bars (green=high activity, gray=low)
- Inspect panel header label color
- Timeline legend dots

Added MISSION_COLORS constant + getMissionColor(track) helper in
helpers.js as single source of truth.

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

demo/js/helpers.js

@@ -19,6 +19,22 @@ function buildFeatures(gptRaw) {
   return features;
 }
 
+// ── Mission Status Color Helper ──────────────────────────────────────
+// Single source of truth for mission-status-based colors.
+// Used by track card dots, SVG overlays, timeline events, etc.
+
+const MISSION_COLORS = {
+  match:      { solid: '#34d399', bg: 'rgba(52, 211, 153, 0.15)', stroke: 'rgba(52, 211, 153, 0.8)' },
+  nomatch:    { solid: '#f87171', bg: 'rgba(248, 113, 113, 0.12)', stroke: 'rgba(248, 113, 113, 0.8)' },
+  unassessed: { solid: '#64748b', bg: 'rgba(100, 116, 139, 0.12)', stroke: 'rgba(100, 116, 139, 0.5)' },
+};
+
+function getMissionColor(track) {
+  if (track.satisfies === true) return MISSION_COLORS.match;
+  if (track.satisfies === false) return MISSION_COLORS.nomatch;
+  return MISSION_COLORS.unassessed;
+}
+
 // ── Status Badge Helper ──────────────────────────────────────────────
 
 function getStatusBadgeHTML(track) {
@@ -225,6 +241,8 @@ function matchAICommand(question) {
 // ── Export to namespace ─────────────────────────────────────────
 
 Object.assign(window.ISR, {
+  MISSION_COLORS,
+  getMissionColor,
   buildFeatures,
   getStatusBadgeHTML,
   formatTime,

demo/js/inspect.js

@@ -39,7 +39,7 @@ function enterInspectState(trackId) {
 
   // 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 trackColor = realTrack ? ISR.getMissionColor(realTrack).solid : mockTrack.color;
   const trackConf = realTrack ? (realTrack.score || 0).toFixed(2) : mockTrack.confidence.toFixed(2);
 
   // Mission status badge for inspect header

demo/js/real-backend.js

@@ -772,8 +772,9 @@ function renderTrackListFromData(tracks) {
         '</div>';
     }
 
+    const mc = ISR.getMissionColor(t);
     card.innerHTML = `
-      <div class="track-dot" style="background: ${t.color}; box-shadow: 0 0 4px ${t.color};"></div>
+      <div class="track-dot" style="background: ${mc.solid}; box-shadow: 0 0 4px ${mc.solid};"></div>
       <div class="track-info">
         <div class="track-label" style="display:flex;align-items:center;gap:6px;">
           <span>${t.label}</span>
@@ -913,13 +914,9 @@ function renderSvgOverlay(tracks) {
     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)';
-    }
+    // Determine color by mission status — uses unified MISSION_COLORS
+    const _mc = ISR.getMissionColor(t);
+    const strokeColor = _mc.stroke;
 
     const isSelected = ISR.STATE.selectedTrackId === t.track_id;
     const isHighlighted = ISR.STATE.highlightTrackId === t.track_id;
@@ -1086,7 +1083,8 @@ function renderWaveformFromDensity(canvas, densityData) {
 
     // 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';
+    // Waveform density: high activity = match green, medium = unassessed gray, low = dim
+    ctx.fillStyle = val > 0.6 ? '#34d39988' : val > 0.3 ? '#64748b88' : '#64748b44';
     ctx.fillRect(x, y, Math.max(barW - 1, 1), barH);
   }
 }
@@ -1211,10 +1209,10 @@ function renderEventMarkersFromData(events) {
   container.innerHTML = '';
 
   const PRIORITY_COLORS = {
-    critical: '#ef4444',
-    high: '#f59e0b',
-    normal: '#3b82f6',
-    low: '#22c55e',
+    critical: ISR.MISSION_COLORS.match.solid,     // mission match events
+    high: '#f59e0b',                               // speed alerts
+    normal: ISR.MISSION_COLORS.unassessed.solid,   // detection/tracking events
+    low: ISR.MISSION_COLORS.nomatch.solid,         // no match / dismissed
   };
 
   for (const evt of events) {
@@ -1261,10 +1259,10 @@ function renderEventLogFromData(events) {
   if (!log) return;
 
   const PRIORITY_STYLES = {
-    critical: { bg: 'rgba(239,68,68,0.15)', color: '#ef4444' },
+    critical: { bg: ISR.MISSION_COLORS.match.bg, color: ISR.MISSION_COLORS.match.solid },
     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' },
+    normal: { bg: ISR.MISSION_COLORS.unassessed.bg, color: ISR.MISSION_COLORS.unassessed.solid },
+    low: { bg: ISR.MISSION_COLORS.nomatch.bg, color: ISR.MISSION_COLORS.nomatch.solid },
   };
 
   log.innerHTML = events.map(evt => {
@@ -1303,10 +1301,10 @@ function renderRealTimelineLegend(events) {
   }
 
   const TYPE_COLORS = {
-    system: 'var(--text-tertiary)',
-    detection: 'var(--accent)',
-    tracking: 'var(--success)',
-    alert: 'var(--danger)',
+    system: ISR.MISSION_COLORS.unassessed.solid,
+    detection: ISR.MISSION_COLORS.unassessed.solid,
+    tracking: ISR.MISSION_COLORS.unassessed.solid,
+    alert: ISR.MISSION_COLORS.match.solid,
   };
 
   legend.innerHTML = Object.entries(typeCounts).map(([type, count]) =>

demo/styles/components.css

@@ -350,8 +350,8 @@
       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; }
+    .status-badge.match { background: var(--mission-match-bg); color: var(--mission-match); }
+    .status-badge.no-match { background: var(--mission-nomatch-bg); color: var(--mission-nomatch); }
+    .status-badge.relevant { background: var(--mission-match-bg); color: var(--mission-match); }
+    .status-badge.not-relevant { background: var(--mission-nomatch-bg); color: var(--mission-nomatch); opacity: 0.6; }
+    .status-badge.pending { background: var(--mission-unassessed-bg); color: var(--mission-unassessed); }

demo/styles/variables.css

@@ -12,6 +12,17 @@
       --text-tertiary: rgba(255, 255, 255, 0.35);
       --panel-bg: rgba(255, 255, 255, 0.02);
       --panel-border: rgba(255, 255, 255, 0.06);
+
+      /* Mission status colors — single source of truth */
+      --mission-match: #34d399;
+      --mission-match-bg: rgba(52, 211, 153, 0.15);
+      --mission-match-stroke: rgba(52, 211, 153, 0.8);
+      --mission-nomatch: #f87171;
+      --mission-nomatch-bg: rgba(248, 113, 113, 0.12);
+      --mission-nomatch-stroke: rgba(248, 113, 113, 0.8);
+      --mission-unassessed: #64748b;
+      --mission-unassessed-bg: rgba(100, 116, 139, 0.12);
+      --mission-unassessed-stroke: rgba(100, 116, 139, 0.5);
     }
 
     /* ── Reset ──────────────────────────────────────────────────────── */