{/* LEFT PANEL - DATA LAYERS */}
- setSettingsOpen(true)} onLegendClick={() => setLegendOpen(true)} gibsDate={gibsDate} setGibsDate={setGibsDate} gibsOpacity={gibsOpacity} setGibsOpacity={setGibsOpacity} />
+ setSettingsOpen(true)} onLegendClick={() => setLegendOpen(true)} gibsDate={gibsDate} setGibsDate={setGibsDate} gibsOpacity={gibsOpacity} setGibsOpacity={setGibsOpacity} onEntityClick={setSelectedEntity} onFlyTo={(lat, lng) => setFlyToLocation({ lat, lng, ts: Date.now() })} />
{/* LEFT BOTTOM - DISPLAY CONFIG */}
(trackedOperators);
for (const f of data?.tracked_flights || []) {
if (f.alert_operator) ops.add(f.alert_operator);
- if (f.alert_tag1) ops.add(f.alert_tag1);
- if (f.alert_tag2) ops.add(f.alert_tag2);
+ if (f.alert_tags) ops.add(f.alert_tags);
}
return Array.from(ops).sort();
}, [data?.tracked_flights]);
diff --git a/frontend/src/components/MapLegend.tsx b/frontend/src/components/MapLegend.tsx
index bd4f801..2b901d3 100644
--- a/frontend/src/components/MapLegend.tsx
+++ b/frontend/src/components/MapLegend.tsx
@@ -101,10 +101,23 @@ const LEGEND: LegendCategory[] = [
name: "TRACKED AIRCRAFT (ALERT)",
color: "text-pink-400 border-pink-500/30",
items: [
- { svg: airliner("#FF1493"), label: "Alert — Low Priority (pink)" },
- { svg: airliner("#FF2020"), label: "Alert — High Priority (red)" },
- { svg: airliner("#1A3A8A"), label: "Alert — Government (navy)" },
- { svg: airliner("white"), label: "Alert — General (white)" },
+ { svg: airliner("#FF1493"), label: "VIP / Celebrity / Bizjet (hot pink)" },
+ { svg: airliner("#FF2020"), label: "Dictator / Oligarch (red)" },
+ { svg: airliner("#3b82f6"), label: "Government / Police / Customs (blue)" },
+ { svg: heli("#32CD32"), label: "Medical / Fire / Rescue (lime)" },
+ { svg: airliner("yellow"), label: "Military / Intelligence (yellow)" },
+ { svg: airliner("#222"), label: "PIA — Privacy / Stealth (black)" },
+ { svg: airliner("#FF8C00"), label: "Private Flights / Joe Cool (orange)" },
+ { svg: airliner("white"), label: "Climate Crisis (white)" },
+ { svg: airliner("#9B59B6"), label: "Private Jets / Historic / Other (purple)" },
+ ],
+ },
+ {
+ name: "POTUS FLEET",
+ color: "text-yellow-400 border-yellow-500/30",
+ items: [
+ { svg: ``, label: "Air Force One / Two (gold ring)" },
+ { svg: ``, label: "Marine One (gold ring + heli)" },
],
},
{
@@ -138,7 +151,15 @@ const LEGEND: LegendCategory[] = [
name: "GEOPHYSICAL",
color: "text-orange-400 border-orange-500/30",
items: [
- { svg: circle("#ff6600"), label: "Earthquake (size = magnitude)" },
+ { svg: circle("#ffcc00"), label: "Earthquake (yellow blob, size = magnitude)" },
+ ],
+ },
+ {
+ name: "WILDFIRES",
+ color: "text-red-400 border-red-500/30",
+ items: [
+ { svg: ``, label: "Active wildfire / hotspot" },
+ { svg: clusterCircle("#cc0000", "#ff3300"), label: "Fire cluster (grouped hotspots)" },
],
},
{
@@ -166,6 +187,14 @@ const LEGEND: LegendCategory[] = [
{ svg: ``, label: "Low severity (25-50% degraded)" },
],
},
+ {
+ name: "INFRASTRUCTURE",
+ color: "text-purple-400 border-purple-500/30",
+ items: [
+ { svg: ``, label: "Data Center" },
+ { svg: circle("#888"), label: "Internet Outage Zone (grey)" },
+ ],
+ },
{
name: "SURVEILLANCE / CCTV",
color: "text-green-400 border-green-500/30",
diff --git a/frontend/src/components/MaplibreViewer.tsx b/frontend/src/components/MaplibreViewer.tsx
index 94cbb27..206d802 100644
--- a/frontend/src/components/MaplibreViewer.tsx
+++ b/frontend/src/components/MaplibreViewer.tsx
@@ -26,10 +26,12 @@ const svgPlanePink = `data:image/svg+xml;utf8,${encodeURIComponent(``)}`;
const svgPlaneDarkBlue = `data:image/svg+xml;utf8,${encodeURIComponent(``)}`;
const svgPlaneWhiteAlert = `data:image/svg+xml;utf8,${encodeURIComponent(``)}`;
-const svgHeliPink = `data:image/svg+xml;utf8,${encodeURIComponent(``)}`;
+const svgHeliPink = `data:image/svg+xml;utf8,${encodeURIComponent(``)}`;
const svgHeliAlertRed = `data:image/svg+xml;utf8,${encodeURIComponent(``)}`;
const svgHeliDarkBlue = `data:image/svg+xml;utf8,${encodeURIComponent(``)}`;
-const svgHeliWhiteAlert = `data:image/svg+xml;utf8,${encodeURIComponent(``)}`;
+const svgHeliBlue = `data:image/svg+xml;utf8,${encodeURIComponent(``)}`;
+const svgHeliLime = `data:image/svg+xml;utf8,${encodeURIComponent(``)}`;
+const svgHeliWhiteAlert = `data:image/svg+xml;utf8,${encodeURIComponent(``)}`;
const svgPlaneBlack = `data:image/svg+xml;utf8,${encodeURIComponent(``)}`;
const svgHeliBlack = `data:image/svg+xml;utf8,${encodeURIComponent(``)}`;
const svgDrone = `data:image/svg+xml;utf8,${encodeURIComponent(``)}`;
@@ -88,6 +90,13 @@ function makeAircraftSvg(type: 'airliner' | 'turboprop' | 'bizjet' | 'generic',
return `data:image/svg+xml;utf8,${encodeURIComponent(``)}`;
}
+// POTUS fleet — oversized hot pink with yellow halo ring
+const svgPotusPlane = `data:image/svg+xml;utf8,${encodeURIComponent(``)}`;
+const svgPotusHeli = `data:image/svg+xml;utf8,${encodeURIComponent(``)}`;
+
+// POTUS fleet ICAO hex codes (verified FAA registry)
+const POTUS_ICAOS = new Set(['ADFDF8','ADFDF9','AE0865','AE5E76','AE5E77','AE5E79']);
+
// Pre-built aircraft SVGs by type & color
const svgAirlinerCyan = makeAircraftSvg('airliner', 'cyan');
const svgAirlinerOrange = makeAircraftSvg('airliner', '#FF8C00');
@@ -96,7 +105,10 @@ const svgAirlinerYellow = makeAircraftSvg('airliner', 'yellow');
const svgAirlinerPink = makeAircraftSvg('airliner', '#FF1493', 'black', 22);
const svgAirlinerRed = makeAircraftSvg('airliner', '#FF2020', 'black', 22);
const svgAirlinerDarkBlue = makeAircraftSvg('airliner', '#1A3A8A', '#4A80D0', 22);
-const svgAirlinerWhite = makeAircraftSvg('airliner', 'white', '#ff0000', 22);
+const svgAirlinerBlue = makeAircraftSvg('airliner', '#3b82f6', 'black', 22);
+const svgAirlinerLime = makeAircraftSvg('airliner', '#32CD32', 'black', 22);
+const svgAirlinerBlack = makeAircraftSvg('airliner', '#222', '#555', 22);
+const svgAirlinerWhite = makeAircraftSvg('airliner', 'white', '#666', 22);
const svgTurbopropCyan = makeAircraftSvg('turboprop', 'cyan');
const svgTurbopropOrange = makeAircraftSvg('turboprop', '#FF8C00');
@@ -105,7 +117,10 @@ const svgTurbopropYellow = makeAircraftSvg('turboprop', 'yellow');
const svgTurbopropPink = makeAircraftSvg('turboprop', '#FF1493', 'black', 22);
const svgTurbopropRed = makeAircraftSvg('turboprop', '#FF2020', 'black', 22);
const svgTurbopropDarkBlue = makeAircraftSvg('turboprop', '#1A3A8A', '#4A80D0', 22);
-const svgTurbopropWhite = makeAircraftSvg('turboprop', 'white', '#ff0000', 22);
+const svgTurbopropBlue = makeAircraftSvg('turboprop', '#3b82f6', 'black', 22);
+const svgTurbopropLime = makeAircraftSvg('turboprop', '#32CD32', 'black', 22);
+const svgTurbopropBlack = makeAircraftSvg('turboprop', '#222', '#555', 22);
+const svgTurbopropWhite = makeAircraftSvg('turboprop', 'white', '#666', 22);
const svgBizjetCyan = makeAircraftSvg('bizjet', 'cyan');
const svgBizjetOrange = makeAircraftSvg('bizjet', '#FF8C00');
@@ -114,7 +129,10 @@ const svgBizjetYellow = makeAircraftSvg('bizjet', 'yellow');
const svgBizjetPink = makeAircraftSvg('bizjet', '#FF1493', 'black', 22);
const svgBizjetRed = makeAircraftSvg('bizjet', '#FF2020', 'black', 22);
const svgBizjetDarkBlue = makeAircraftSvg('bizjet', '#1A3A8A', '#4A80D0', 22);
-const svgBizjetWhite = makeAircraftSvg('bizjet', 'white', '#ff0000', 22);
+const svgBizjetBlue = makeAircraftSvg('bizjet', '#3b82f6', 'black', 22);
+const svgBizjetLime = makeAircraftSvg('bizjet', '#32CD32', 'black', 22);
+const svgBizjetBlack = makeAircraftSvg('bizjet', '#222', '#555', 22);
+const svgBizjetWhite = makeAircraftSvg('bizjet', 'white', '#666', 22);
// Grey variants for grounded/parked aircraft (altitude 0)
const svgAirlinerGrey = makeAircraftSvg('airliner', '#555', '#333');
@@ -125,6 +143,13 @@ const svgHeliGrey = `data:image/svg+xml;utf8,${encodeURIComponent(`
@@ -2643,64 +2723,209 @@ const MaplibreViewer = ({ data, activeLayers, onEntityClick, flyToLocation, sele
)}
- {/* SENTINEL-2 IMAGERY — floating intel card on map near right-click */}
- {selectedEntity?.type === 'region_dossier' && selectedEntity.extra && regionDossier?.sentinel2 && !regionDossierLoading && (
-
- {/* Header bar */}
-
-
-
- SENTINEL-2 IMAGERY
+ {/* SENTINEL-2 IMAGERY — fullscreen overlay modal */}
+ {selectedEntity?.type === 'region_dossier' && selectedEntity.extra && regionDossier?.sentinel2 && !regionDossierLoading && (() => {
+ const s2 = regionDossier.sentinel2;
+ const imgUrl = s2.fullres_url || s2.thumbnail_url;
+ return (
+ = {
- 'pink': 'text-pink-400', 'red': 'text-red-400',
- 'darkblue': 'text-blue-400', 'white': 'text-white'
+ '#ff1493': 'text-[#ff1493]', pink: 'text-[#ff1493]', red: 'text-red-400', yellow: 'text-yellow-400',
+ blue: 'text-blue-400', orange: 'text-orange-400', '#32cd32': 'text-[#32cd32]', purple: 'text-purple-400',
+ black: 'text-gray-400', white: 'text-white'
};
const alertBorderMap: Record = {
- 'pink': 'border-pink-500/30', 'red': 'border-red-500/30',
- 'darkblue': 'border-blue-500/30', 'white': 'border-[var(--border-primary)]/30'
+ '#ff1493': 'border-[#ff1493]/30', pink: 'border-[#ff1493]/30', red: 'border-red-500/30', yellow: 'border-yellow-500/30',
+ blue: 'border-blue-500/30', orange: 'border-orange-500/30', '#32cd32': 'border-[#32cd32]/30', purple: 'border-purple-500/30',
+ black: 'border-gray-500/30', white: 'border-[var(--border-primary)]/30'
};
const alertBgMap: Record = {
- 'pink': 'bg-pink-950/40', 'red': 'bg-red-950/40',
- 'darkblue': 'bg-blue-950/40', 'white': 'bg-[var(--bg-panel)]'
+ '#ff1493': 'bg-[#ff1493]/10', pink: 'bg-[#ff1493]/10', red: 'bg-red-950/40', yellow: 'bg-yellow-950/40',
+ blue: 'bg-blue-950/40', orange: 'bg-orange-950/40', '#32cd32': 'bg-lime-950/40', purple: 'bg-purple-950/40',
+ black: 'bg-gray-900/40', white: 'bg-[var(--bg-panel)]'
};
const ac = flight.alert_color || 'white';
const headerColor = alertColorMap[ac] || 'text-white';
const borderColor = alertBorderMap[ac] || 'border-[var(--border-primary)]/30';
const bgColor = alertBgMap[ac] || 'bg-[var(--bg-panel)]';
+ const shadowColor = (ac === 'pink' || ac === '#ff1493') ? 'rgba(255,20,147,0.4)'
+ : ac === 'red' ? 'rgba(255,32,32,0.2)'
+ : ac === 'yellow' ? 'rgba(255,255,0,0.2)'
+ : ac === 'blue' ? 'rgba(59,130,246,0.2)'
+ : ac === 'orange' ? 'rgba(255,140,0,0.3)'
+ : ac === '#32cd32' ? 'rgba(50,205,50,0.2)'
+ : ac === 'purple' ? 'rgba(155,89,182,0.2)'
+ : 'rgba(255,255,255,0.1)';
+
return (
@@ -293,31 +305,39 @@ function NewsFeedInner({ data, selectedEntity, regionDossier, regionDossierLoadi
)}
diff --git a/frontend/src/lib/api.ts b/frontend/src/lib/api.ts
index 7eb166c..015f350 100644
--- a/frontend/src/lib/api.ts
+++ b/frontend/src/lib/api.ts
@@ -1,6 +1,7 @@
// All API calls use relative paths (e.g. /api/flights).
-// Next.js rewrites them at the server level to BACKEND_URL (set in docker-compose
-// or .env.local for dev). This means:
+// The catch-all route handler at src/app/api/[...path]/route.ts proxies them
+// to BACKEND_URL at runtime (set in docker-compose or .env.local for dev).
+// This means:
// - No build-time baking of the backend URL into the client bundle
// - BACKEND_URL=http://backend:8000 works via Docker internal networking
// - Only port 3000 needs to be exposed externally
{ if (e.target === e.currentTarget) onEntityClick(null); }}
+ onKeyDown={(e: any) => { if (e.key === 'Escape') onEntityClick(null); }}
+ tabIndex={-1}
+ ref={(el) => el?.focus()}
+ >
+ 
-
- ) : (
-
-
- )}
+ );
+ })()}
{/* MEASUREMENT LINES */}
{measurePoints && measurePoints.length >= 2 && (
diff --git a/frontend/src/components/NewsFeed.tsx b/frontend/src/components/NewsFeed.tsx
index 56fb67f..e423c45 100644
--- a/frontend/src/components/NewsFeed.tsx
+++ b/frontend/src/components/NewsFeed.tsx
@@ -260,28 +260,40 @@ function NewsFeedInner({ data, selectedEntity, regionDossier, regionDossierLoadi
if (flight) {
const callsign = flight.callsign || "UNKNOWN";
const alertColorMap: Record
+ {/* Header bar */}
+
-
- {regionDossier.sentinel2.found ? (
- <>
- {/* Metadata row */}
-
+
- {selectedEntity.extra.lat.toFixed(3)}, {selectedEntity.extra.lng.toFixed(3)}
+
+ {s2.found ? (
+ <>
+ {/* Metadata row */}
+
+
+
+ SENTINEL-2 IMAGERY
+
+
+
+
+ {selectedEntity.extra.lat.toFixed(4)}, {selectedEntity.extra.lng.toFixed(4)}
+
+
+
+ {s2.platform}
+ {s2.datetime?.slice(0, 10)}
+ {s2.cloud_cover?.toFixed(0)}% cloud
+
+
+ {/* Image */}
+ {imgUrl ? (
+
+ 
+
+ ) : (
+
+
+ Scene found — no preview available
+
+ )}
+
+ {/* Action buttons */}
+ {imgUrl && (
+
+
+ ⬇ DOWNLOAD
+
+
+
+ ↗ OPEN FULL RES
+
+
+ )}
+
+ ) : (
+
+ No clear imagery in last 30 days
+
+ )}
- {regionDossier.sentinel2.platform}
- {regionDossier.sentinel2.datetime?.slice(0, 10)}
- {regionDossier.sentinel2.cloud_cover?.toFixed(0)}% cloud
-
-
- {/* Thumbnail */}
- {regionDossier.sentinel2.thumbnail_url ? (
-
- Scene found — no preview available
- )}
-
- {/* Footer */}
-
- CLICK IMAGE TO OPEN FULL RESOLUTION
-
-
- ) : (
-
- No clear imagery in last 30 days
-
- )}
@@ -293,31 +305,39 @@ function NewsFeedInner({ data, selectedEntity, regionDossier, regionDossierLoadi
OPERATOR
- {flight.alert_operator && flight.alert_operator !== "UNKNOWN" ? (
-
- {flight.alert_operator}
-
- ) : (
+ {flight.alert_operator && flight.alert_operator !== "UNKNOWN" ? (() => {
+ const wikiSlug = flight.alert_wiki || flight.alert_operator.replace(/\s*\(.*?\)\s*/g, '').trim().replace(/ /g, '_');
+ const wikiHref = `https://en.wikipedia.org/wiki/${encodeURIComponent(wikiSlug)}`;
+ return (
+
+ {flight.alert_operator}
+
+ );
+ })() : (
UNKNOWN
)}
{/* Owner/Operator Wikipedia photo */}
- {flight.alert_operator && flight.alert_operator !== "UNKNOWN" && (
-
- { itemRefs.current[idx] = el; }}
- initial={{ opacity: 0, x: -10 }}
+ initial={idx < 15 ? { opacity: 0, x: -10 } : { opacity: 1, x: 0 }}
animate={{ opacity: 1, x: 0 }}
- transition={{ delay: 0.1 + (idx * 0.05) }}
+ transition={idx < 15 ? { delay: 0.1 + (idx * 0.05) } : { duration: 0 }}
className={`p-2 rounded-sm border-l-[2px] border-r border-t border-b ${bgClass} flex flex-col gap-1 relative group shrink-0`}
>
diff --git a/frontend/src/components/WorldviewLeftPanel.tsx b/frontend/src/components/WorldviewLeftPanel.tsx
index b180d05..2fdfaee 100644
--- a/frontend/src/components/WorldviewLeftPanel.tsx
+++ b/frontend/src/components/WorldviewLeftPanel.tsx
@@ -1,8 +1,8 @@
"use client";
-import React, { useState, useEffect, useRef } from "react";
+import React, { useState, useEffect, useRef, useMemo } from "react";
import { motion, AnimatePresence } from "framer-motion";
-import { Plane, AlertTriangle, Activity, Satellite, Cctv, ChevronDown, ChevronUp, Ship, Eye, Anchor, Settings, Sun, Moon, BookOpen, Radio, Play, Pause, Globe, Flame, Wifi, Server } from "lucide-react";
+import { Plane, AlertTriangle, Activity, Satellite, Cctv, ChevronDown, ChevronUp, Ship, Eye, Anchor, Settings, Sun, Moon, BookOpen, Radio, Play, Pause, Globe, Flame, Wifi, Server, Shield } from "lucide-react";
import { useTheme } from "@/lib/ThemeContext";
function relativeTime(iso: string | undefined): string {
@@ -40,7 +40,25 @@ const FRESHNESS_MAP: Record = {
datacenters: "datacenters",
};
-const WorldviewLeftPanel = React.memo(function WorldviewLeftPanel({ data, activeLayers, setActiveLayers, onSettingsClick, onLegendClick, gibsDate, setGibsDate, gibsOpacity, setGibsOpacity }: { data: any; activeLayers: any; setActiveLayers: any; onSettingsClick?: () => void; onLegendClick?: () => void; gibsDate?: string; setGibsDate?: (d: string) => void; gibsOpacity?: number; setGibsOpacity?: (o: number) => void }) {
+// POTUS fleet ICAO hex codes for client-side filtering
+const POTUS_ICAOS: Record = {
+ 'ADFDF8': { label: 'Air Force One (82-8000)', type: 'AF1' },
+ 'ADFDF9': { label: 'Air Force One (92-9000)', type: 'AF1' },
+ 'ADFEB7': { label: 'Air Force Two (98-0001)', type: 'AF2' },
+ 'ADFEB8': { label: 'Air Force Two (98-0002)', type: 'AF2' },
+ 'ADFEB9': { label: 'Air Force Two (99-0003)', type: 'AF2' },
+ 'ADFEBA': { label: 'Air Force Two (99-0004)', type: 'AF2' },
+ 'AE4AE6': { label: 'Air Force Two (09-0015)', type: 'AF2' },
+ 'AE4AE8': { label: 'Air Force Two (09-0016)', type: 'AF2' },
+ 'AE4AEA': { label: 'Air Force Two (09-0017)', type: 'AF2' },
+ 'AE4AEC': { label: 'Air Force Two (19-0018)', type: 'AF2' },
+ 'AE0865': { label: 'Marine One (VH-3D)', type: 'M1' },
+ 'AE5E76': { label: 'Marine One (VH-92A)', type: 'M1' },
+ 'AE5E77': { label: 'Marine One (VH-92A)', type: 'M1' },
+ 'AE5E79': { label: 'Marine One (VH-92A)', type: 'M1' },
+};
+
+const WorldviewLeftPanel = React.memo(function WorldviewLeftPanel({ data, activeLayers, setActiveLayers, onSettingsClick, onLegendClick, gibsDate, setGibsDate, gibsOpacity, setGibsOpacity, onEntityClick, onFlyTo }: { data: any; activeLayers: any; setActiveLayers: any; onSettingsClick?: () => void; onLegendClick?: () => void; gibsDate?: string; setGibsDate?: (d: string) => void; gibsOpacity?: number; setGibsOpacity?: (o: number) => void; onEntityClick?: (entity: { type: string; id: number; extra?: any }) => void; onFlyTo?: (lat: number, lng: number) => void }) {
const [isMinimized, setIsMinimized] = useState(false);
const { theme, toggleTheme } = useTheme();
const [gibsPlaying, setGibsPlaying] = useState(false);
@@ -70,10 +88,34 @@ const WorldviewLeftPanel = React.memo(function WorldviewLeftPanel({ data, active
return () => { if (gibsIntervalRef.current) clearInterval(gibsIntervalRef.current); };
}, [gibsPlaying, gibsDate, setGibsDate]);
- // Compute ship category counts
- const importantShipCount = data?.ships?.filter((s: any) => ['carrier', 'military_vessel', 'tanker', 'cargo'].includes(s.type))?.length || 0;
- const passengerShipCount = data?.ships?.filter((s: any) => s.type === 'passenger')?.length || 0;
- const civilianShipCount = data?.ships?.filter((s: any) => !['carrier', 'military_vessel', 'tanker', 'cargo', 'passenger'].includes(s.type))?.length || 0;
+ // Compute ship category counts (memoized — ships array can be 1000+ items)
+ const { importantShipCount, passengerShipCount, civilianShipCount } = useMemo(() => {
+ const ships = data?.ships;
+ if (!ships || !ships.length) return { importantShipCount: 0, passengerShipCount: 0, civilianShipCount: 0 };
+ let important = 0, passenger = 0, civilian = 0;
+ for (const s of ships) {
+ const t = s.type;
+ if (t === 'carrier' || t === 'military_vessel' || t === 'tanker' || t === 'cargo') important++;
+ else if (t === 'passenger') passenger++;
+ else civilian++;
+ }
+ return { importantShipCount: important, passengerShipCount: passenger, civilianShipCount: civilian };
+ }, [data?.ships]);
+
+ // Find POTUS fleet planes currently airborne from tracked flights
+ const potusFlights = useMemo(() => {
+ const tracked = data?.tracked_flights;
+ if (!tracked) return [];
+ const results: { index: number; flight: any; meta: { label: string; type: string } }[] = [];
+ for (let i = 0; i < tracked.length; i++) {
+ const f = tracked[i];
+ const icao = (f.icao24 || '').toUpperCase();
+ if (POTUS_ICAOS[icao]) {
+ results.push({ index: i, flight: f, meta: POTUS_ICAOS[icao] });
+ }
+ }
+ return results;
+ }, [data?.tracked_flights]);
const layers = [
{ id: "flights", name: "Commercial Flights", source: "adsb.lol", count: data?.commercial_flights?.length || 0, icon: Plane },
@@ -251,6 +293,58 @@ const WorldviewLeftPanel = React.memo(function WorldviewLeftPanel({ data, active
)
})}
+
+ {/* POTUS Fleet Tracker */}
+
+
+
OPERATOR
- {flight.alert_operator && flight.alert_operator !== "UNKNOWN" ? (
-
- {flight.alert_operator}
-
- ) : (
+ {flight.alert_operator && flight.alert_operator !== "UNKNOWN" ? (() => {
+ const wikiSlug = flight.alert_wiki || flight.alert_operator.replace(/\s*\(.*?\)\s*/g, '').trim().replace(/ /g, '_');
+ const wikiHref = `https://en.wikipedia.org/wiki/${encodeURIComponent(wikiSlug)}`;
+ return (
+
+ {flight.alert_operator}
+
+ );
+ })() : (
UNKNOWN
)}
{/* Owner/Operator Wikipedia photo */}
- {flight.alert_operator && flight.alert_operator !== "UNKNOWN" && (
-
-
- )}
+ {flight.alert_operator && flight.alert_operator !== "UNKNOWN" && (() => {
+ const wikiSlug = flight.alert_wiki || flight.alert_operator.replace(/\s*\(.*?\)\s*/g, '').trim().replace(/ /g, '_');
+ const wikiHref = `https://en.wikipedia.org/wiki/${encodeURIComponent(wikiSlug)}`;
+ return (
+
+
+ );
+ })()}
{/* Aircraft model Wikipedia photo */}
{aircraftImgUrl && (
@@ -348,22 +368,10 @@ function NewsFeedInner({ data, selectedEntity, regionDossier, regionDossierLoadi
REGISTRATION
{flight.registration || "N/A"}
- {flight.alert_tag1 && (
+ {flight.alert_tags && (
- INTEL TAG
- {flight.alert_tag1}
-
- )}
- {flight.alert_tag2 && (
-
- SECONDARY
- {flight.alert_tag2}
-
- )}
- {flight.alert_tag3 && (
-
- DETAIL
- {flight.alert_tag3}
+ INTEL TAGS
+ {flight.alert_tags}
)}
@@ -667,10 +675,34 @@ function NewsFeedInner({ data, selectedEntity, regionDossier, regionDossierLoadi
LATEST REPORTS:
-
+
+ {(() => {
+ const urls: string[] = props._urls_list || [];
+ const headlines: string[] = props._headlines_list || [];
+ if (urls.length === 0) return No articles available.;
+ return urls.map((url: string, idx: number) => {
+ const headline = headlines[idx] || '';
+ let domain = '';
+ try { domain = new URL(url).hostname.replace('www.', ''); } catch { domain = ''; }
+ return (
+
+
+ {headline || domain || 'View Article'}
+
+ {headline && domain && (
+ {domain}
+ )}
+
+ );
+ });
+ })()}
+
diff --git a/frontend/src/components/WorldviewLeftPanel.tsx b/frontend/src/components/WorldviewLeftPanel.tsx
index b180d05..2fdfaee 100644
--- a/frontend/src/components/WorldviewLeftPanel.tsx
+++ b/frontend/src/components/WorldviewLeftPanel.tsx
@@ -1,8 +1,8 @@
"use client";
-import React, { useState, useEffect, useRef } from "react";
+import React, { useState, useEffect, useRef, useMemo } from "react";
import { motion, AnimatePresence } from "framer-motion";
-import { Plane, AlertTriangle, Activity, Satellite, Cctv, ChevronDown, ChevronUp, Ship, Eye, Anchor, Settings, Sun, Moon, BookOpen, Radio, Play, Pause, Globe, Flame, Wifi, Server } from "lucide-react";
+import { Plane, AlertTriangle, Activity, Satellite, Cctv, ChevronDown, ChevronUp, Ship, Eye, Anchor, Settings, Sun, Moon, BookOpen, Radio, Play, Pause, Globe, Flame, Wifi, Server, Shield } from "lucide-react";
import { useTheme } from "@/lib/ThemeContext";
function relativeTime(iso: string | undefined): string {
@@ -40,7 +40,25 @@ const FRESHNESS_MAP: Record = {
datacenters: "datacenters",
};
-const WorldviewLeftPanel = React.memo(function WorldviewLeftPanel({ data, activeLayers, setActiveLayers, onSettingsClick, onLegendClick, gibsDate, setGibsDate, gibsOpacity, setGibsOpacity }: { data: any; activeLayers: any; setActiveLayers: any; onSettingsClick?: () => void; onLegendClick?: () => void; gibsDate?: string; setGibsDate?: (d: string) => void; gibsOpacity?: number; setGibsOpacity?: (o: number) => void }) {
+// POTUS fleet ICAO hex codes for client-side filtering
+const POTUS_ICAOS: Record = {
+ 'ADFDF8': { label: 'Air Force One (82-8000)', type: 'AF1' },
+ 'ADFDF9': { label: 'Air Force One (92-9000)', type: 'AF1' },
+ 'ADFEB7': { label: 'Air Force Two (98-0001)', type: 'AF2' },
+ 'ADFEB8': { label: 'Air Force Two (98-0002)', type: 'AF2' },
+ 'ADFEB9': { label: 'Air Force Two (99-0003)', type: 'AF2' },
+ 'ADFEBA': { label: 'Air Force Two (99-0004)', type: 'AF2' },
+ 'AE4AE6': { label: 'Air Force Two (09-0015)', type: 'AF2' },
+ 'AE4AE8': { label: 'Air Force Two (09-0016)', type: 'AF2' },
+ 'AE4AEA': { label: 'Air Force Two (09-0017)', type: 'AF2' },
+ 'AE4AEC': { label: 'Air Force Two (19-0018)', type: 'AF2' },
+ 'AE0865': { label: 'Marine One (VH-3D)', type: 'M1' },
+ 'AE5E76': { label: 'Marine One (VH-92A)', type: 'M1' },
+ 'AE5E77': { label: 'Marine One (VH-92A)', type: 'M1' },
+ 'AE5E79': { label: 'Marine One (VH-92A)', type: 'M1' },
+};
+
+const WorldviewLeftPanel = React.memo(function WorldviewLeftPanel({ data, activeLayers, setActiveLayers, onSettingsClick, onLegendClick, gibsDate, setGibsDate, gibsOpacity, setGibsOpacity, onEntityClick, onFlyTo }: { data: any; activeLayers: any; setActiveLayers: any; onSettingsClick?: () => void; onLegendClick?: () => void; gibsDate?: string; setGibsDate?: (d: string) => void; gibsOpacity?: number; setGibsOpacity?: (o: number) => void; onEntityClick?: (entity: { type: string; id: number; extra?: any }) => void; onFlyTo?: (lat: number, lng: number) => void }) {
const [isMinimized, setIsMinimized] = useState(false);
const { theme, toggleTheme } = useTheme();
const [gibsPlaying, setGibsPlaying] = useState(false);
@@ -70,10 +88,34 @@ const WorldviewLeftPanel = React.memo(function WorldviewLeftPanel({ data, active
return () => { if (gibsIntervalRef.current) clearInterval(gibsIntervalRef.current); };
}, [gibsPlaying, gibsDate, setGibsDate]);
- // Compute ship category counts
- const importantShipCount = data?.ships?.filter((s: any) => ['carrier', 'military_vessel', 'tanker', 'cargo'].includes(s.type))?.length || 0;
- const passengerShipCount = data?.ships?.filter((s: any) => s.type === 'passenger')?.length || 0;
- const civilianShipCount = data?.ships?.filter((s: any) => !['carrier', 'military_vessel', 'tanker', 'cargo', 'passenger'].includes(s.type))?.length || 0;
+ // Compute ship category counts (memoized — ships array can be 1000+ items)
+ const { importantShipCount, passengerShipCount, civilianShipCount } = useMemo(() => {
+ const ships = data?.ships;
+ if (!ships || !ships.length) return { importantShipCount: 0, passengerShipCount: 0, civilianShipCount: 0 };
+ let important = 0, passenger = 0, civilian = 0;
+ for (const s of ships) {
+ const t = s.type;
+ if (t === 'carrier' || t === 'military_vessel' || t === 'tanker' || t === 'cargo') important++;
+ else if (t === 'passenger') passenger++;
+ else civilian++;
+ }
+ return { importantShipCount: important, passengerShipCount: passenger, civilianShipCount: civilian };
+ }, [data?.ships]);
+
+ // Find POTUS fleet planes currently airborne from tracked flights
+ const potusFlights = useMemo(() => {
+ const tracked = data?.tracked_flights;
+ if (!tracked) return [];
+ const results: { index: number; flight: any; meta: { label: string; type: string } }[] = [];
+ for (let i = 0; i < tracked.length; i++) {
+ const f = tracked[i];
+ const icao = (f.icao24 || '').toUpperCase();
+ if (POTUS_ICAOS[icao]) {
+ results.push({ index: i, flight: f, meta: POTUS_ICAOS[icao] });
+ }
+ }
+ return results;
+ }, [data?.tracked_flights]);
const layers = [
{ id: "flights", name: "Commercial Flights", source: "adsb.lol", count: data?.commercial_flights?.length || 0, icon: Plane },
@@ -251,6 +293,58 @@ const WorldviewLeftPanel = React.memo(function WorldviewLeftPanel({ data, active
)
})}
+
+ {/* POTUS Fleet Tracker */}
+
+
+
+ {potusFlights.length === 0 ? (
+
+ No POTUS fleet aircraft currently airborne
+
+ ) : (
+
+ {potusFlights.map((pf) => {
+ const color = pf.meta.type === 'AF1' ? '#ff1493' : pf.meta.type === 'M1' ? '#ff1493' : '#3b82f6';
+ const alt = pf.flight.alt_baro || pf.flight.alt || 0;
+ const speed = pf.flight.gs || pf.flight.speed || 0;
+ return (
+
+ )}
+ {
+ if (onFlyTo && pf.flight.lat != null && pf.flight.lng != null) {
+ onFlyTo(pf.flight.lat, pf.flight.lng);
+ }
+ if (onEntityClick) {
+ onEntityClick({ type: 'tracked_flight', id: pf.index });
+ }
+ }}
+ >
+
+ );
+ })}
+
+ {pf.meta.label}
+
+ {alt > 0 ? `${Math.round(alt).toLocaleString()} ft` : 'GND'} · {speed > 0 ? `${Math.round(speed)} kts` : 'STATIC'}
+
+
+
+
+ TRACK
+
+