fix(packets): prevent route and scope overlap

docs/translations.md

@@ -9,10 +9,17 @@ region/theme controls, connection/retry labels, lazy-page loading, shared
 analytics section/range controls and chart states, and Traffic, RF / Signal, Paths & Hashes, Scopes and Clock Drift
 (headings, legends, descriptive chart labels, explanations and exact tables).
 Shared Timestamp labels and their relative tooltips also follow the selected
-language. Other feature pages and general dialogs remain follow-up work. Measurement units
+language. Packet reception-evidence controls and path-map controls explain retained
+reports, intended TRACE routes, unavailable selections and ambiguous/missing map
+locations in both languages. Packet bytes, identifiers and routing values stay unchanged. Other feature pages and general dialogs remain follow-up work. Measurement units
 and existing UTC/date/number formatting, including automatic chart time labels,
 are unchanged; selecting French does not mean every screen is translated yet.
 
+The channel message panel also translates scope labels, evidence help, retained-history/key
+availability states, pagination and packet-inspection actions. Scope names, hashes and message
+bodies remain unchanged. The channel directory and its existing search controls are separate
+translation follow-ups.
+
 ## Add a language
 
 1. Copy `src/i18n/locales/en.json` to a language-tag filename such as `de.json`.

src/api/client.ts

@@ -1,6 +1,6 @@
 import { API_BASE, DEFAULT_PAGE_SIZE } from "../lib/constants";
 import { noteRateLimited, noteRequestOk, parseRetryAfter } from "./rate-limit";
-import type { CursorPage, PacketSummary, PacketDetail, IataCode, RegionSummary, Region, BrokerStatus, KnownRoute, CrossIATARoute, TraceTagSummary, TraceType, TraceDetail } from "../types/api";
+import type { CursorPage, PacketSummary, PacketDetail, IataCode, RegionSummary, Region, BrokerStatus, RouteEvidence, KnownRoute, CrossIATARoute, TraceTagSummary, TraceType, TraceDetail } from "../types/api";
 import type { ChannelPage, ChannelMessage } from "../features/channels/types";
 import type { ObserverSummary, Observer, AdvertObservation } from "../features/observers/types";
 import type { NodeSummary, Node, NodeObservation, NodeNeighbor } from "../features/nodes/types";
@@ -142,14 +142,16 @@ export function getChannels(params?: { iatas?: string[]; limit?: number; cursor?
 // a CursorPage so MessagePanel can load older history on demand via useInfiniteQuery.
 export async function getChannelMessagesPage(
   channelId: number,
-  params?: { iatas?: string[]; cursor?: number; limit?: number },
+  params?: { iatas?: string[]; cursor?: number; limit?: number; scope?: string },
 ): Promise<CursorPage<ChannelMessage>> {
   const limit = params?.limit ?? DEFAULT_PAGE_SIZE;
-  const page = await request<{ items: ChannelMessage[] }>(`/channels/${channelId}/messages`, {
+  const page = await request<{ items: ChannelMessage[]; nextCursor?: number | null; hasMore?: boolean }>(`/channels/${channelId}/messages`, {
     iatas: iatasParam(params?.iatas),
     cursor: params?.cursor,
     limit,
+    scope: params?.scope || undefined,
   });
+  if (typeof page.hasMore === "boolean") return { items: page.items, nextCursor: page.nextCursor ?? null, hasMore: page.hasMore };
   return toCursorPage(page.items, limit, (m) => m.id);
 }
 
@@ -187,6 +189,10 @@ export async function getKnownRoutesPage(
   return toCursorPage(items, limit, (r) => r.lastSeen);
 }
 
+export function getRouteEvidence(iata: string, pathKey: string, params: { range?: string; since?: number; until?: number; pageCursor?: string; limit?: number }, signal?: AbortSignal): Promise<RouteEvidence> {
+  return request(`/routes/${encodeURIComponent(iata)}/${encodeURIComponent(pathKey)}/observations`, params, signal);
+}
+
 // Search known routes for a path between two node hash prefixes within a single IATA. All three params
 // are required by the server.
 export function searchKnownRoutes(iata: string, from: string, to: string): Promise<KnownRoute[]> {
@@ -225,8 +231,15 @@ export function getTraceDetail(tag: string): Promise<TraceDetail> {
   return request(`/traces/${tag}`);
 }
 
-export function getObserver(observerId: string): Promise<Observer> {
-  return request(`/observers/${observerId}`);
+export async function getObserver(observerId: string): Promise<Observer> {
+  const observer = await request<Observer>(`/observers/${observerId}`);
+  // Older servers marshal the stored JSON byte slice as base64 instead of an object.
+  let metadata: unknown = observer.statusMetadata;
+  if (typeof metadata === "string") {
+    try { metadata = JSON.parse(new TextDecoder().decode(Uint8Array.from(atob(metadata), c => c.charCodeAt(0)))); }
+    catch { metadata = undefined; }
+  }
+  return { ...observer, statusMetadata: metadata && typeof metadata === "object" && !Array.isArray(metadata) ? metadata as Record<string, unknown> : undefined };
 }
 
 export function getObserverAdverts(
@@ -368,8 +381,8 @@ export function getObserverTelemetry(
   return request(`/observers/${observerId}/telemetry`, { range, interval, afterId });
 }
 
-export function getObserverActivity(observerId: string, range: string, interval: string): Promise<ObserverActivity> {
-  return request(`/observers/${observerId}/activity`, { range, interval });
+export function getObserverActivity(observerId: string, range: string, interval: string, until?: number): Promise<ObserverActivity> {
+  return request(`/observers/${observerId}/activity`, { range, interval, until });
 }
 
 // Lets a caller hide a feature the server doesn't have rather than show it as failed.

src/components/CopyLinkButton.tsx

@@ -10,16 +10,19 @@ export function CopyLinkButton({
   label = "Copy Link",
   copiedLabel = "Copied",
   ariaLabel,
+  preserveParams,
 }: {
   params: Record<string, string> | (() => Record<string, string | null>);
   label?: string;
   copiedLabel?: string;
   ariaLabel?: string;
+  preserveParams?: readonly string[];
 }) {
   const [copied, setCopied] = useState(false);
 
   const handleCopy = useCallback(() => {
     const url = new URL(window.location.href);
+    if (preserveParams) for (const key of [...url.searchParams.keys()]) if (!preserveParams.includes(key)) url.searchParams.delete(key);
     const resolved = typeof params === "function" ? params() : params;
     for (const [key, value] of Object.entries(resolved)) {
       if (value === null) url.searchParams.delete(key);
@@ -28,7 +31,7 @@ export function CopyLinkButton({
     navigator.clipboard.writeText(url.toString());
     setCopied(true);
     setTimeout(() => setCopied(false), 1500);
-  }, [params]);
+  }, [params, preserveParams]);
 
   return (
     <button

src/components/DetailPanel.tsx

@@ -37,6 +37,7 @@ function MinimizeButton({ collapsed, onToggle }: { collapsed: boolean; onToggle:
 interface DetailPanelProps {
   title: string;
   onClose: () => void;
+  closeLabel?: string;
   // mobile-only: adds a minimize toggle that collapses to a bottom bar without deselecting, so the
   // map underneath (and its neighbor lines) stays visible. No effect at md+ (the panel is a sidebar).
   collapsible?: boolean;
@@ -49,7 +50,7 @@ interface DetailPanelProps {
   children: ReactNode;
 }
 
-export function DetailPanel({ title, onClose, collapsible, isLoading, notFound, notFoundIcon, notFoundLabel = "Not found", headerAction, children }: DetailPanelProps) {
+export function DetailPanel({ title, onClose, closeLabel = "Close detail panel", collapsible, isLoading, notFound, notFoundIcon, notFoundLabel = "Not found", headerAction, children }: DetailPanelProps) {
   const [collapsed, setCollapsed] = useState(false);
   // collapse only touches the mobile overlay: shrink to a bottom bar and hide the body. The md:*
   // classes below always win at desktop width, so a lingering collapsed state never hides the sidebar.
@@ -62,7 +63,7 @@ export function DetailPanel({ title, onClose, collapsible, isLoading, notFound,
           {headerAction}
           <div className="flex items-center gap-0.5">
             {collapsible && <MinimizeButton collapsed={collapsed} onToggle={() => setCollapsed((v) => !v)} />}
-            <CloseButton onClose={onClose} label="Close detail panel" />
+            <CloseButton onClose={onClose} label={closeLabel} />
           </div>
         </div>
       </div>

src/components/LoadingPill.tsx

@@ -3,12 +3,13 @@ interface LoadingPillProps {
   error?: boolean;
   count: number; // rows loaded so far
   noun: string; // plural entity name, e.g. "nodes" / "observers"
+  label?: string; // optional complete localized phrase
   position?: string; // corner placement (the parent must be `relative`)
 }
 
 // Small floating status pill shared by the map and the entity tables: a muted "Loading … (N)" while
 // pages stream in, a danger-toned message if a fetch fails. Renders nothing when idle.
-export function LoadingPill({ loading, error, count, noun, position = "bottom-3 left-3" }: LoadingPillProps) {
+export function LoadingPill({ loading, error, count, noun, label, position = "bottom-3 left-3" }: LoadingPillProps) {
   if (!loading && !error) return null;
   const tone = loading ? "text-text-muted" : "text-danger";
   const dot = loading ? "bg-primary animate-pulse" : "bg-danger";
@@ -18,11 +19,11 @@ export function LoadingPill({ loading, error, count, noun, position = "bottom-3
       className={`absolute ${position} z-10 flex items-center gap-2 px-2.5 py-1 bg-bg-surface border border-border-subtle rounded-md font-mono text-[11px] ${tone} shadow-lg`}
     >
       <span className={`size-1.5 rounded-full ${dot}`} aria-hidden />
-      {loading
+      {label ?? (loading
         ? `Loading ${noun}… (${count})`
         : count > 0
           ? `Some ${noun} failed to load (${count} shown)`
-          : `Failed to load ${noun}`}
+          : `Failed to load ${noun}`)}
     </div>
   );
 }

src/components/ModalOverlay.tsx

@@ -3,7 +3,7 @@ import { useFocusTrap } from "../hooks/useFocusTrap";
 
 // Right-anchored modal: dims the surface, focuses and traps keyboard focus within the panel, and
 // closes on a backdrop click — only when the press started there, so releasing a text selection over
-// the backdrop doesn't close. Escape is left to the caller (some callers gate it on nested state).
+// the backdrop doesn't close. Escape closes only this active layer and stops before parent handlers.
 // Pass `inactive` when another overlay is stacked on top so this one steps out of the modal/a11y
 // path — it stops being an active modal and is hidden from assistive tech, while staying mounted so
 // focus can return into it when the overlay above closes.
@@ -26,8 +26,15 @@ export function ModalOverlay({ label, onClose, inactive = false, children }: {
       aria-label={label}
       aria-hidden={inactive || undefined}
       tabIndex={-1}
+      onKeyDown={(e) => {
+        if (e.key === "Escape" && !inactive) {
+          e.preventDefault();
+          e.stopPropagation();
+          onClose();
+        }
+      }}
       onMouseDown={(e) => { pressedBackdrop.current = e.target === e.currentTarget; }}
-      onClick={() => { if (pressedBackdrop.current) onClose(); }}
+      onClick={() => { if (!inactive && pressedBackdrop.current) onClose(); }}
     >
       <div className="h-full flex shadow-2xl" onClick={(e) => e.stopPropagation()}>
         {children}

src/features/InvestigationPanels.tsx

@@ -0,0 +1,48 @@
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { ModalOverlay } from "../components/ModalOverlay";
+import { NodeDetailPanel } from "./nodes/NodeDetailPanel";
+import { ObserverDetailPanel } from "./observers/ObserverDetailPanel";
+import { PacketAnalyzerDrawer } from "./packets/PacketAnalyzerDrawer";
+import { usePacketDetail } from "./packets/usePacketDetail";
+import { PacketPathMapModal } from "./map/PacketPathMapModal";
+import type { PacketDetail } from "../types/api";
+
+export type InvestigationTarget =
+  | { kind: "node"; id: string }
+  | { kind: "observer"; id: string }
+  | { kind: "packet"; hash: string; observationId?: number }
+  | { kind: "path"; detail: PacketDetail; selectedKey?: string };
+
+export interface Investigation {
+  key: string;
+  target: InvestigationTarget;
+}
+
+// Each panel stays mounted underneath the next one so its selection, scroll and trigger survive.
+export function InvestigationPanel({ target, inactive, onClose, onOpen, onObserverDashboard }: {
+  target: InvestigationTarget; inactive: boolean; onClose: () => void;
+  onOpen: (target: InvestigationTarget) => void; onObserverDashboard: (id: string) => void;
+}) {
+  const { t } = useTranslation();
+  const { data: detail, isLoading } = usePacketDetail(target.kind === "packet" ? target.hash : null);
+  const [selected, setSelected] = useState<number | null>(target.kind === "packet" ? target.observationId ?? null : null);
+  const observer = (id: string) => onOpen({ kind: "observer", id });
+  const node = (id: string) => onOpen({ kind: "node", id });
+  const packet = (hash: string, observationId?: number) => onOpen({ kind: "packet", hash, observationId });
+  if (target.kind === "path") return <PacketPathMapModal detail={target.detail} initialSelectedKey={target.selectedKey} inactive={inactive} onClose={onClose} />;
+  return <ModalOverlay label={t(target.kind === "observer" ? "tabs.Observers" : target.kind === "node" ? "investigation.nodeDialog" : "investigation.packetDialog")} inactive={inactive} onClose={onClose}>
+    {target.kind === "observer" ? (
+      <ObserverDetailPanel observerId={target.id} onClose={onClose} onViewStats={onObserverDashboard} onAnalyzePacket={packet} />
+    ) : target.kind === "node" ? (
+      <NodeDetailPanel nodeId={target.id} onClose={onClose} onViewObserver={observer} onViewNode={node} onAnalyzePacket={packet} />
+    ) : (
+      <PacketAnalyzerDrawer
+        detail={detail} loading={isLoading} selectedObservationId={selected} onSelectObservation={setSelected}
+        requireSelectedObservation={target.observationId !== undefined} syncUrl={false}
+        onClose={onClose} onViewObserver={observer} onViewNode={node}
+        onViewPath={key => { if (detail) onOpen({ kind: "path", detail, selectedKey: key }); }}
+      />
+    )}
+  </ModalOverlay>;
+}