mirror of
https://github.com/BigBodyCobain/Shadowbroker.git
synced 2026-07-04 03:17:57 +02:00
feat: Telegram OSINT map layer, Osiris intel ports, and maritime settings
Add Telegram OSINT with hourly incremental t.me scraping, metro geocoding separate from news centroids, threat-intercept popup UI with inline media, and HTML markers above alert boxes so pins stay clickable. Expose GFW_API_TOKEN in onboarding and Settings Maritime; harden GFW/CCTV/geo fetchers. Port Osiris- derived recon, SCM, entity graph, malware/cyber feeds, sanctions, and submarine cable layers with tests and documentation. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
BigBodyCobain
@@ -0,0 +1,165 @@
|
||||
'use client';
|
||||
|
||||
import React, { useCallback, useEffect, useState } from 'react';
|
||||
import { Loader2, Minus, Network, Plus, X } from 'lucide-react';
|
||||
import { API_BASE } from '@/lib/api';
|
||||
import { isEntityGraphEligible, mapEntityToGraphType } from '@/lib/entityGraph';
|
||||
import type { SelectedEntity } from '@/types/dashboard';
|
||||
|
||||
interface GraphNode {
|
||||
id: string;
|
||||
label: string;
|
||||
type: string;
|
||||
properties?: Record<string, unknown>;
|
||||
}
|
||||
|
||||
interface GraphLink {
|
||||
source: string;
|
||||
target: string;
|
||||
label: string;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
entity: SelectedEntity | null;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
const TYPE_COLORS: Record<string, string> = {
|
||||
aircraft: 'text-cyan-300',
|
||||
vessel: 'text-cyan-400',
|
||||
company: 'text-amber-300',
|
||||
person: 'text-violet-300',
|
||||
country: 'text-emerald-300',
|
||||
sanction: 'text-red-300',
|
||||
ip: 'text-orange-300',
|
||||
event: 'text-yellow-300',
|
||||
};
|
||||
|
||||
export default function EntityGraphPanel({ entity, onClose }: Props) {
|
||||
const [isMinimized, setIsMinimized] = useState(false);
|
||||
const [nodes, setNodes] = useState<GraphNode[]>([]);
|
||||
const [links, setLinks] = useState<GraphLink[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const loadGraph = useCallback(async () => {
|
||||
if (!entity || !isEntityGraphEligible(entity)) return;
|
||||
const type = mapEntityToGraphType(entity.type);
|
||||
if (!type) return;
|
||||
const id = String(entity.name || entity.extra?.callsign || entity.extra?.registration || entity.id);
|
||||
const params = new URLSearchParams({ type, id });
|
||||
if (entity.extra?.registration) params.set('registration', String(entity.extra.registration));
|
||||
if (entity.extra?.icao24) params.set('icao24', String(entity.extra.icao24));
|
||||
if (entity.extra?.model) params.set('model', String(entity.extra.model));
|
||||
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const res = await fetch(`${API_BASE}/api/entity/expand?${params}`);
|
||||
const data = await res.json();
|
||||
if (!res.ok) throw new Error(data.detail || data.error || 'Expand failed');
|
||||
setNodes(data.nodes || []);
|
||||
setLinks(data.links || []);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Graph unavailable');
|
||||
setNodes([]);
|
||||
setLinks([]);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [entity]);
|
||||
|
||||
useEffect(() => {
|
||||
if (entity) loadGraph();
|
||||
else {
|
||||
setNodes([]);
|
||||
setLinks([]);
|
||||
}
|
||||
}, [entity, loadGraph]);
|
||||
|
||||
if (!entity || !isEntityGraphEligible(entity)) return null;
|
||||
|
||||
return (
|
||||
<div className="fixed bottom-4 right-4 z-[250] w-80 max-h-[50vh] pointer-events-auto flex flex-col border border-cyan-700/40 bg-black/85 backdrop-blur-sm shadow-[0_0_24px_rgba(34,211,238,0.12)]">
|
||||
<div
|
||||
className="flex items-center justify-between border-b border-cyan-700/30 bg-cyan-950/25 px-3 py-2.5 cursor-pointer hover:bg-cyan-950/40 transition-colors"
|
||||
onClick={() => setIsMinimized((prev) => !prev)}
|
||||
>
|
||||
<div className="flex items-center gap-2 min-w-0">
|
||||
<Network size={16} className="text-cyan-400 shrink-0" />
|
||||
<span className="text-[12px] font-mono font-bold tracking-widest text-cyan-400 truncate">
|
||||
ENTITY GRAPH
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 shrink-0">
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onClose();
|
||||
}}
|
||||
className="text-cyan-600 hover:text-cyan-300 transition-colors"
|
||||
title="Close"
|
||||
>
|
||||
<X size={14} />
|
||||
</button>
|
||||
{isMinimized ? (
|
||||
<Plus size={16} className="text-cyan-400" />
|
||||
) : (
|
||||
<Minus size={16} className="text-cyan-400" />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{!isMinimized && (
|
||||
<div className="px-3 py-2 overflow-y-auto styled-scrollbar flex-1 space-y-2">
|
||||
<div className="text-[10px] font-mono tracking-wider text-cyan-600 truncate">
|
||||
{entity.type.toUpperCase()} · {entity.name || entity.id}
|
||||
</div>
|
||||
|
||||
{loading && (
|
||||
<div className="flex items-center gap-2 text-[11px] font-mono text-cyan-500 tracking-wider">
|
||||
<Loader2 size={12} className="animate-spin" />
|
||||
RESOLVING…
|
||||
</div>
|
||||
)}
|
||||
|
||||
{error && (
|
||||
<div className="border border-red-500/30 bg-red-950/20 px-2 py-1.5 text-[11px] font-mono text-red-400">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!loading && !error && (
|
||||
<>
|
||||
<div className="space-y-1">
|
||||
{nodes.map((n) => (
|
||||
<div
|
||||
key={n.id}
|
||||
className="border border-cyan-900/40 bg-black/50 px-2 py-1.5"
|
||||
>
|
||||
<div className={`text-[9px] font-mono tracking-[0.2em] uppercase opacity-70 ${TYPE_COLORS[n.type] || 'text-cyan-500'}`}>
|
||||
{n.type}
|
||||
</div>
|
||||
<div className="text-[11px] font-mono text-cyan-200 leading-snug">{n.label}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{links.length > 0 && (
|
||||
<div className="border-t border-cyan-900/40 pt-2">
|
||||
<div className="text-[10px] font-mono tracking-[0.2em] text-cyan-600 mb-1">RELATIONSHIPS</div>
|
||||
{links.slice(0, 24).map((l, i) => (
|
||||
<div key={`${l.source}-${l.target}-${i}`} className="text-[10px] font-mono text-cyan-500/90 truncate leading-relaxed">
|
||||
{l.label}: {l.source.split(':').pop()} → {l.target.split(':').pop()}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user