Timeline · feed ↔ events
t = {Math.floor(t)}s / {duration}s
{
const r = e.currentTarget.getBoundingClientRect();
setT(((e.clientX - r.left) / r.width) * duration);
}}>
{events.map((ev, i) => (
))}
{[0, 0.25, 0.5, 0.75, 1].map(p => (
{Math.floor(p*duration)}s
))}
{events.slice(0, 5).map((ev, i) => (
{Math.floor(ev.at)}s
{ev.sev}
{ev.title}
))}
);
}
// ─── Drone dispatch ─────────────────────────────────────────────────
function DroneDispatch({ onDispatch, dispatched, originXY, targetXY, targetCity }) {
const drones = [
{ id: "FR-01", role: "survey", battery: 92, eta: "0:48", payload: "visual + thermal" },
{ id: "FR-02", role: "overwatch", battery: 76, eta: "1:12", payload: "visual" },
{ id: "FR-03", role: "relay", battery: 64, eta: "0:54", payload: "comms relay" },
];
return (
Flight response
Target: {targetCity} · range 2.4 km
{drones.map(d => {
const out = dispatched.includes(d.id);
return (
{d.id}
{d.role} · {d.payload}
50 ? "var(--success)" : "var(--warning)" }}/>
ETA {d.eta}
);
})}
);
}
// ─── LRAD control ──────────────────────────────────────────────────
function LRADControl() {
const [bearing, setBearing] = useState(72);
const [range, setRange] = useState(280);
const [mode, setMode] = useState("voice");
const [armed, setArmed] = useState(false);
return (
Deterrent · directional
{[0,45,90,135,180,225,270,315].map(deg => (
))}
N
E
S
W
);
}
// ─── Ground unit & geofence quick actions ───────────────────────────
function QuickActions() {
return (
Ground response
Ground team G-2
2 responders · 4.2 km · ETA 6:30
on-call
Geofence GF-417
polygon · 14 vertices · 1.8 ha
active
);
}
// ─── Tactical map (Leaflet mini-map showing drone flights in real geo) ──
function TacticalMap({ target, origin, flights }) {
const ref = useRef(null);
const mapRef = useRef(null);
const droneMarkersRef = useRef({});
// Init
useEffect(() => {
if (!ref.current || mapRef.current) return;
const map = L.map(ref.current, {
center: [target.lat, target.lng],
zoom: 8, minZoom: 2, maxZoom: 14,
zoomControl: false, attributionControl: false,
preferCanvas: true, fadeAnimation: false,
});
const dk = document.documentElement.classList.contains("dark");
L.tileLayer("https://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_" + (dk ? "Dark" : "Light") + "_Gray_Base/MapServer/tile/{z}/{y}/{x}", {
maxZoom: 16,
}).addTo(map);
mapRef.current = map;
return () => { map.remove(); mapRef.current = null; droneMarkersRef.current = {}; };
}, []);
// Re-render static overlays (target, origin, trails) on flight change
useEffect(() => {
if (!mapRef.current) return;
const map = mapRef.current;
// Strip non-tile, non-drone layers
map.eachLayer(l => {
if (l instanceof L.TileLayer) return;
const drone = Object.values(droneMarkersRef.current).includes(l);
if (!drone) map.removeLayer(l);
});
// Target marker
L.marker([target.lat, target.lng], {
icon: L.divIcon({
className: "lat-marker-wrap",
html: `
${target.city}
`,
iconSize: [14, 14], iconAnchor: [7, 7],
}),
}).addTo(map);
// Origin (drone base)
L.marker([origin.lat, origin.lng], {
icon: L.divIcon({
className: "lat-marker-wrap",
html: `
BASE
`,
iconSize: [14, 14], iconAnchor: [7, 7],
}),
}).addTo(map);
// Trails
flights.forEach(f => {
L.polyline([[f.from[1], f.from[0]], [f.to[1], f.to[0]]], {
color: "#fbbf24", weight: 1.4, opacity: 0.7, dashArray: "3 4",
}).addTo(map);
});
// Fit bounds
const pts = [[target.lat, target.lng], [origin.lat, origin.lng]];
flights.forEach(f => { pts.push([f.from[1], f.from[0]]); pts.push([f.to[1], f.to[0]]); });
const bounds = L.latLngBounds(pts);
try { map.invalidateSize(false); const s = map.getSize(); if (s.x && s.y) map.fitBounds(bounds, { padding: [30, 30], maxZoom: 10, animate: false }); } catch {}
}, [target, origin, flights]);
// Manage drone markers (add new, remove gone)
useEffect(() => {
if (!mapRef.current) return;
const map = mapRef.current;
// Add markers for new flights
flights.forEach(f => {
if (droneMarkersRef.current[f.id]) return;
const m = L.marker([f.from[1], f.from[0]], {
icon: L.divIcon({
className: "lat-drone-wrap",
html: `
▲
${f.drone.id.slice(-2)}
`,
iconSize: [14, 14], iconAnchor: [7, 7],
}),
}).addTo(map);
droneMarkersRef.current[f.id] = m;
});
// Remove markers for gone flights
Object.keys(droneMarkersRef.current).forEach(id => {
if (!flights.find(f => f.id === id)) {
map.removeLayer(droneMarkersRef.current[id]);
delete droneMarkersRef.current[id];
}
});
}, [flights]);
// Animate
useEffect(() => {
if (!mapRef.current || flights.length === 0) return;
let raf;
const tick = () => {
flights.forEach(f => {
const m = droneMarkersRef.current[f.id]; if (!m) return;
const p = Math.min(1, (Date.now() - f.startedAt) / 8000);
const lng = f.from[0] + (f.to[0] - f.from[0]) * p;
const lat = f.from[1] + (f.to[1] - f.from[1]) * p;
m.setLatLng([lat, lng]);
const bearing = Math.atan2(f.to[0] - f.from[0], f.to[1] - f.from[1]) * 180 / Math.PI;
const el = m.getElement()?.querySelector(".lat-drone__icon");
if (el) el.style.transform = `translate(-50%, -50%) rotate(${bearing}deg)`;
});
raf = requestAnimationFrame(tick);
};
raf = requestAnimationFrame(tick);
return () => cancelAnimationFrame(raf);
}, [flights]);
return (
Tactical view · {target.city}
{flights.length} in flight
);
}
// ─── Main Incident screen ──────────────────────────────────────────
function Incident({ incident, onClose, onDispatchDrone, dispatched, flights = [], tick }) {
const [t, setT] = useState(38);
const [cam, setCam] = useState("visual");
// Auto-advance timeline
useEffect(() => {
const i = setInterval(() => setT(v => (v + 0.5) % 120), 500);
return () => clearInterval(i);
}, []);
// Esc to close
useEffect(() => {
const fn = (e) => { if (e.key === "Escape") onClose(); };
window.addEventListener("keydown", fn);
return () => window.removeEventListener("keydown", fn);
}, [onClose]);
const events = [
{ at: 0, sev: "info", title: "perimeter sensor armed" },
{ at: 18, sev: "info", title: "radar ping · 0.42 RCS at 220m" },
{ at: 26, sev: "warn", title: "RF emitter detected · 433 MHz" },
{ at: 34, sev: "warn", title: "visual motion · GF-417 zone B" },
{ at: 38, sev: "crit", title: "geofence breach · unclassified object" },
{ at: 42, sev: "crit", title: "fusion confirmed · confidence 0.81" },
{ at: 46, sev: "info", title: "auto-escalated to operator" },
];
const targetNode = incident.node || { id: "LAT-AF-02", city: "Nairobi", lng: 36.82, lat: -1.29 };
const originNode = { id: "BASE-AF-CENTRAL", city: "Nakuru base", lng: 36.07, lat: -0.30 };
const timestamp = () => {
const now = new Date();
const hh = String(now.getUTCHours()).padStart(2, "0");
const mm = String(now.getUTCMinutes()).padStart(2, "0");
const ss = String(now.getUTCSeconds()).padStart(2, "0");
return `${hh}:${mm}:${ss}Z`;
};
return (
{ if (e.target === e.currentTarget) onClose(); }}>
INC-AF02-2026.05.15.{Math.floor(11_42 + tick / 6)}
Geofence breach · {targetNode.city}
CRIT · 0.81
4m 17s elapsed
onDispatchDrone(d, [originNode.lng, originNode.lat], [targetNode.lng, targetNode.lat])}
dispatched={dispatched}
targetCity={targetNode.city}
originXY={[originNode.lng, originNode.lat]}
targetXY={[targetNode.lng, targetNode.lat]}
/>
);
}
Object.assign(window, { Incident, VideoFeed, FusionStack, Timeline, DroneDispatch, LRADControl, QuickActions, TacticalMap });