v1.3.0

src/App.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useCallback, useRef, lazy, Suspense } from "react";
 import { BrowserRouter, useSearchParams } from "react-router-dom";
-import { QueryClient, QueryClientProvider, useQuery } from "@tanstack/react-query";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { RegionProvider, useRegion, useRegionSelection } from "./hooks/useRegion";
 import {
   ALL_REGIONS,
@@ -18,6 +18,7 @@ import { SplashScreen } from "./components/SplashScreen";
 import { PacketList } from "./features/packets/PacketList";
 import { PacketAnalyzerDrawer } from "./features/packets/PacketAnalyzerDrawer";
 import { PacketAnalyzerOverlay } from "./features/packets/PacketAnalyzerOverlay";
+import { PacketPathMapModal } from "./features/map/PacketPathMapModal";
 import { NodeTable } from "./features/nodes/NodeTable";
 import { NodeDetailPanel } from "./features/nodes/NodeDetailPanel";
 import { NodeDetailOverlay } from "./features/nodes/NodeDetailOverlay";
@@ -26,9 +27,10 @@ import { RouteTable } from "./features/routes/RouteTable";
 import { TraceList } from "./features/traces/TraceList";
 import { ChannelList } from "./features/channels/ChannelList";
 import { EmptyState } from "./components/EmptyState";
-import { getPacketDetail } from "./api/client";
+import { usePacketDetail } from "./features/packets/usePacketDetail";
 import { WsManager } from "./api/ws-manager";
 import { WS_URL, ENABLED_TABS } from "./lib/constants";
+import type { PacketDetail } from "./types/api";
 
 // Map is the only heavy tab (maplibre-gl is ~1MB), so lazy-load it — its chunk is fetched the
 // first time someone opens the Map tab instead of bloating the initial bundle.
@@ -96,6 +98,29 @@ function RegionUrlSync() {
   return null;
 }
 
+// Restores a shared "?path" link once its detail arrives. A copied path link carries ?hash without
+// ?analyze (PacketPathMapModal's Copy Link strips it), so this can't reuse the analyzer drawer's fetch
+// and needs its own — sharing usePacketDetail's query cache means that costs nothing extra when both
+// params are present.
+export function PathLinkRestore({ initialPath, hash, analyzerDetail, onRestore }: {
+  initialPath: string | null;
+  hash: string | null;
+  analyzerDetail: PacketDetail | undefined;
+  onRestore: (detail: PacketDetail, key: string) => void;
+}) {
+  const { data: pathLinkDetail } = usePacketDetail(initialPath ? hash : null);
+  const handledRef = useRef(false);
+
+  useEffect(() => {
+    const detail = analyzerDetail ?? pathLinkDetail;
+    if (!initialPath || !detail || handledRef.current) return;
+    handledRef.current = true;
+    onRestore(detail, initialPath);
+  }, [initialPath, analyzerDetail, pathLinkDetail, onRestore]);
+
+  return null;
+}
+
 // Drop the shared node/observer selection when the user changes region, so a detail panel doesn't keep
 // showing an entity that's no longer in the re-queried map/table. Watches the raw selection rather than
 // the resolved regionKey: the async slug→IATA expansion on load bumps regionKey without any user action,
@@ -127,8 +152,9 @@ function AppInner() {
   // Resolve the starting selection once from URL → storage → legacy key (see computeInitialSelection).
   const [initialSelection] = useState(() => computeInitialSelection(searchParams));
 
-  // ?hash / ?node / ?observer restore a shared deep link on load (see each panel's Copy Link button)
-  const [analyzerHash, setAnalyzerHash] = useState<string | null>(() => searchParams.get("hash"));
+  // ?node / ?observer restore a shared deep link on load (see each panel's Copy Link button)
+  // ?analyze=1 is a boolean flag; the hash always lives in ?hash, so ?analyze alone opens nothing
+  const analyzerHash = searchParams.get("analyze") === "1" ? searchParams.get("hash") : null;
   const [selectedObservationId, setSelectedObservationId] = useState<number | null>(null);
   const [selectedNodeId, setSelectedNodeId] = useState<string | null>(() => searchParams.get("node"));
   // lifted (like selectedNodeId) so a node's "View observer" link can select it before the tab mounts
@@ -137,42 +163,53 @@ function AppInner() {
   const [overlayNodeId, setOverlayNodeId] = useState<string | null>(null);
   // packet analyzer shown as a modal over the node panel (clicking a node's observation row)
   const [overlayPacketHash, setOverlayPacketHash] = useState<string | null>(null);
+  // packet path popup shown as a modal over the analyzer drawer/overlay ("View path on map")
+  const [pathMapDetail, setPathMapDetail] = useState<PacketDetail | null>(null);
+  // Frozen together: the restore must fetch the hash the link asked for, even if the user clicks a
+  // different row before it resolves.
+  const [pathLink] = useState(() => ({ path: searchParams.get("path"), hash: searchParams.get("hash") }));
+  const [pathMapInitialKey, setPathMapInitialKey] = useState<string | null>(null);
+
+  const { data: analyzerDetail, isLoading: analyzerLoading } = usePacketDetail(analyzerHash);
+  const { data: overlayPacketDetail, isLoading: overlayPacketLoading } = usePacketDetail(overlayPacketHash);
+
+  const handlePathLinkRestore = useCallback((detail: PacketDetail, key: string) => {
+    setPathMapDetail(detail);
+    setPathMapInitialKey(key);
+  }, []);
 
-  // short staleTime: observations keep accruing, so reopening the analyzer should show them
-  // instead of a snapshot frozen at first open
-  const { data: analyzerDetail, isLoading: analyzerLoading } = useQuery({
-    queryKey: ["packet-detail", analyzerHash],
-    queryFn: () => getPacketDetail(analyzerHash!),
-    enabled: !!analyzerHash,
-    staleTime: 30_000,
-  });
-
-  const { data: overlayPacketDetail, isLoading: overlayPacketLoading } = useQuery({
-    queryKey: ["packet-detail", overlayPacketHash],
-    queryFn: () => getPacketDetail(overlayPacketHash!),
-    enabled: !!overlayPacketHash,
-    staleTime: 30_000,
-  });
+  // "View path on map" from anywhere that already holds a detail — no key, so the modal picks its own
+  const handleViewPath = useCallback((detail: PacketDetail) => {
+    setPathMapDetail(detail);
+    setPathMapInitialKey(null);
+  }, []);
 
   const handleAnalyze = useCallback((hash: string | null) => {
-    setAnalyzerHash(hash);
-    setSelectedObservationId(null);
-  }, []);
+    // No reset: observation ids are globally unique, so a pick inside an expanded row survives into the drawer.
+    setSearchParams((p) => {
+      const n = new URLSearchParams(p);
+      if (hash) { n.set("hash", hash); n.set("analyze", "1"); n.delete("path"); }
+      else n.delete("analyze");
+      return n;
+    }, { replace: true });
+  }, [setSearchParams]);
 
   const handleTabChange = (tab: string) => {
     setOverlayNodeId(null);
     setOverlayPacketHash(null);
-    // On mobile a detail panel fills the screen, so leaving its tab must close it; desktop side
-    // panels persist across tabs. Cross-nav (onViewObserver) re-sets its selection after this.
+    setPathMapDetail(null);
+    // On mobile a detail panel (and the analyzer) fills the screen, so leaving its tab must close it;
+    // desktop side panels persist across tabs. Cross-nav (onViewObserver) re-sets its selection after this.
     if (isMobile) {
-      setAnalyzerHash(null);
       setSelectedObservationId(null);
       setSelectedNodeId(null);
       setSelectedObserverId(null);
     }
     setSearchParams((prev) => {
       const next = new URLSearchParams(prev);
       next.set("tab", tab);
+      // the analyzer is URL-backed, so its mobile close lives here rather than above
+      if (isMobile) next.delete("analyze");
       // stats sub-state shouldn't haunt the URL on other tabs
       if (tab !== "Analytics") {
         next.delete("statsTab");
@@ -188,10 +225,11 @@ function AppInner() {
     setOverlayNodeId(null);
     setOverlayPacketHash(null);
     setSelectedObserverId(null);
+    setPathMapDetail(null);
   }, []);
 
   // Closing a detail panel drops its deep-link param so a reload can't reopen it (mirrors the packet
-  // analyzer's ?hash cleanup). Selecting a different node/observer doesn't touch the URL — the panel's
+  // analyzer's ?analyze cleanup). Selecting a different node/observer doesn't touch the URL — the panel's
   // Copy Link button rebuilds a fresh link on demand.
   const dropSelectionParam = useCallback((key: "node" | "observer") => {
     setSearchParams((prev) => {
@@ -236,7 +274,15 @@ function AppInner() {
   }, []);
 
   const tabContent: Record<string, React.ReactNode> = {
-    Packets: <PacketList wsManager={wsManager} onAnalyze={handleAnalyze} />,
+    Packets: (
+      <PacketList
+        wsManager={wsManager}
+        onAnalyze={handleAnalyze}
+        onViewPath={handleViewPath}
+        selectedObservationId={selectedObservationId}
+        onSelectObservation={setSelectedObservationId}
+      />
+    ),
     Nodes: <NodeTable wsManager={wsManager} selectedNodeId={selectedNodeId} onSelectNode={setSelectedNodeId} />,
     Observers: <ObserverTable wsManager={wsManager} selectedObserverId={selectedObserverId} onSelectObserver={handleSelectObserver} onAnalyzePacket={setOverlayPacketHash} onViewStats={handleViewObserverStats} />,
     Routes: <RouteTable />,
@@ -253,6 +299,12 @@ function AppInner() {
       <RegionWatcher wsManager={wsManager} />
       <RegionUrlSync />
       <SelectionResetOnRegion onRegionChange={clearSelection} />
+      <PathLinkRestore
+        initialPath={pathLink.path}
+        hash={pathLink.hash}
+        analyzerDetail={analyzerDetail}
+        onRestore={handlePathLinkRestore}
+      />
       <AppShell activeTab={activeTab} onTabChange={handleTabChange} wsManager={wsManager}>
         <div className="relative flex flex-1 min-h-0">
           <div key={activeTab} className="flex flex-1 min-h-0 fade-in">
@@ -268,6 +320,7 @@ function AppInner() {
               onSelectObservation={setSelectedObservationId}
               onClose={() => handleAnalyze(null)}
               onViewNode={setOverlayNodeId}
+              onViewPath={() => { if (analyzerDetail) handleViewPath(analyzerDetail); }}
             />
           )}
           {(activeTab === "Map" || activeTab === "Nodes") && selectedNodeId && (
@@ -302,6 +355,18 @@ function AppInner() {
                 handleTabChange("Observers");
                 setSelectedObserverId(observerId);
               }}
+              onViewPath={() => { if (overlayPacketDetail) handleViewPath(overlayPacketDetail); }}
+              inactive={!!pathMapDetail}
+            />
+          )}
+          {pathMapDetail && (
+            <PacketPathMapModal
+              detail={pathMapDetail}
+              initialSelectedKey={pathMapInitialKey}
+              onClose={() => {
+                setPathMapDetail(null);
+                setSearchParams((prev) => { const n = new URLSearchParams(prev); n.delete("path"); return n; }, { replace: true });
+              }}
             />
           )}
         </div>

src/api/client.ts

@@ -9,11 +9,17 @@ import type {
   PayloadBreakdownItem,
   TopNode,
   TopObserver,
+  TopAdvertiser,
+  TopTalker,
   RadioPreset,
   ScopeStats,
   ObserverTelemetry,
   NodeTypeCount,
+  ClockDriftEntry,
 } from "../features/stats/types";
+import type { Feature, Polygon, MultiPolygon } from "geojson";
+
+export type IataBorder = Feature<Polygon | MultiPolygon>;
 
 // typed fetch wrapper with query params
 
@@ -58,15 +64,15 @@ function iatasParam(iatas?: string[]): string | undefined {
 
 export function getPackets(
   iatas: string[] | undefined,
-  params?: { cursor?: number; limit?: number; payloadType?: number; routeType?: number; scope?: string },
+  params?: { cursor?: number; limit?: number; payloadTypes?: number[]; routeTypes?: number[]; scopes?: string[] },
 ): Promise<CursorPage<PacketSummary>> {
   return request("/packets", {
     iatas: iatasParam(iatas),
     cursor: params?.cursor,
     limit: params?.limit ?? DEFAULT_PAGE_SIZE,
-    payloadType: params?.payloadType,
-    routeType: params?.routeType,
-    scope: params?.scope,
+    payloadTypes: params?.payloadTypes?.length ? params.payloadTypes.join(",") : undefined,
+    routeTypes: params?.routeTypes?.length ? params.routeTypes.join(",") : undefined,
+    scopes: params?.scopes?.length ? params.scopes.join(",") : undefined,
   });
 }
 
@@ -78,6 +84,17 @@ export function getIatas(): Promise<IataCode[]> {
   return request("/iatas");
 }
 
+// An IATA's GeoJSON border, or null when none is configured. Can't use request(): the endpoint
+// answers 204 (empty body) or a literal `null` for "no border", and request() always parses JSON.
+export async function getIataBorder(iata: string): Promise<IataBorder | null> {
+  const url = new URL(`${API_BASE}/iatas/${iata}/border`, window.location.origin);
+  const res = await fetch(url.toString());
+  if (res.status === 204) return null;
+  if (!res.ok) throw new ApiError(res.status, "unknown", res.statusText);
+  const body = await res.json();
+  return (body ?? null) as IataBorder | null;
+}
+
 export function getRegions(): Promise<RegionSummary[]> {
   return request("/regions");
 }
@@ -209,6 +226,7 @@ export function getNodesPage(
     limit?: number;
     type?: string;
     name?: string;
+    pubkeyPrefix?: string; // case-insensitive hex prefix; server matches and validates
     supportsMultibytePaths?: "true" | "false";
     supportsMultibyteTraces?: "true" | "false";
     neighbors?: boolean; // include each node's neighborIds (?neighbors=true)
@@ -220,6 +238,7 @@ export function getNodesPage(
     limit: params?.limit ?? DEFAULT_PAGE_SIZE,
     typeName: params?.type,
     name: params?.name,
+    pubkeyPrefix: params?.pubkeyPrefix,
     supportsMultibytePaths: params?.supportsMultibytePaths,
     supportsMultibyteTraces: params?.supportsMultibyteTraces,
     neighbors: params?.neighbors ? "true" : undefined,
@@ -282,6 +301,14 @@ export function getTopObservers(iatas?: string[], since?: number, limit = 10): P
   return request("/stats/top-observers", { iatas: iatasParam(iatas), since, limit });
 }
 
+export function getTopAdvertisers(iatas?: string[], since?: number, limit = 10): Promise<TopAdvertiser[]> {
+  return request("/stats/top-advertisers", { iatas: iatasParam(iatas), since, limit });
+}
+
+export function getTopTalkers(iatas?: string[], since?: number, limit = 10): Promise<TopTalker[]> {
+  return request("/stats/top-talkers", { iatas: iatasParam(iatas), since, limit });
+}
+
 export function getRadioPresets(iatas?: string[]): Promise<RadioPreset[]> {
   return request("/stats/radio-presets", { iatas: iatasParam(iatas) });
 }
@@ -290,6 +317,12 @@ export function getStatsNodeTypes(iatas?: string[]): Promise<NodeTypeCount[]> {
   return request("/stats/node-types", { iatas: iatasParam(iatas) });
 }
 
+// Repeaters/room servers whose clock has drifted past the server threshold, worst-first. Not
+// time-windowed and top-N only (no cursor), so callers pass a generous limit and page client-side.
+export function getClockDrift(iatas?: string[], limit = 100): Promise<ClockDriftEntry[]> {
+  return request("/stats/clock-drift", { iatas: iatasParam(iatas), limit });
+}
+
 // renamed from getScopes to avoid colliding with the /scopes name list; this is the /stats/scopes
 // aggregate (packet/observer/node counts), reported globally regardless of the active region.
 export function getStatsScopes(): Promise<ScopeStats[]> {