feat(meshcore): packet-flow mini map in route popup + accessible detail modals (#4277)

* feat(meshcore): packet-flow mini map in route popup + accessible detail modals

Route-detail popup: when every relay hop resolves to a positioned contact,
a small BaseMap-composed map traces the packet's geospatial flow with a
dashed polyline and numbered, permanently-labeled hop markers (#1 Name);
the sender and local node are added as endpoints when positioned. If any
hop is unknown or unpositioned the map is omitted (a partial line would
misrepresent the path). Powered by a new resolveRoute() in meshcorePath.ts
that surfaces the chosen candidate's position/match count; the
{ROUTE_NAMES} token's resolveRouteNames() is now a thin wrapper over it.

Accessibility (#4276 review follow-up): new shared useDialogA11y hook
(Escape-to-close, focus-on-mount + focus restore, Tab focus trap —
mirroring common/Modal) applied to the MeshCore route-detail, MeshCore
packet-decode, and MQTT packet-detail modals, all now marked up with
role=dialog/aria-modal.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018e4dtLyWeYJYJ7SbgFvGG1

* fix(meshcore): review follow-ups — empty-prefix sender guard, scroll lock, aria-labelledby

- Flow map: don't adopt an arbitrary contact as the sender when
  fromPublicKey is empty (startsWith('') matches every key)
- useDialogA11y: lock body scroll while the dialog is open, matching
  common/Modal's contract
- All three detail modals: aria-labelledby referencing the visible title
  instead of a duplicated aria-label

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018e4dtLyWeYJYJ7SbgFvGG1

---------

Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>

Author: Yeraze

CHANGELOG.md

@@ -9,10 +9,12 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 ### Added
 - **MeshCore: `{ROUTE_NAMES}` and `{HASH_SIZE}` automation reply tokens** — `{ROUTE_NAMES}` expands the relay-hash chain like `{ROUTE}` but resolves each hop to the matching repeater/room-server name from the contact list (unknown hashes stay raw hex; when several repeaters share a hash prefix, the one closest to the neighbouring hops' positions is picked as a best guess). `{HASH_SIZE}` reports the per-hop path-hash width in bytes (1–3) that the original sender stamped into the packet. Available in Auto-Acknowledge and Auto-Responder templates.
 - **MeshCore: clickable message route with repeater names** — the relay-hash chain on a received channel/DM message is now clickable and opens a route-detail popup showing the message's reception details and the route expanded per hop into repeater/room-server names, using the same resolution (and collision best-guess) as the `{ROUTE_NAMES}` token.
+- **MeshCore: packet-flow mini map in the route popup** — when every relay hop resolves to a positioned contact, the route-detail popup adds a small map tracing the packet's geospatial flow across the relays with numbered, labeled hop markers; the sender and local node are included as endpoints when their positions are known. (#4276 follow-up)
 - **Map Analysis: Terrain Link Profile tool** — pick two points (nodes or arbitrary map locations) to get a terrain elevation profile, line-of-sight, and Fresnel-zone chart, plus a full RF link budget (FSPL, antenna gains/heights, cable loss, RX sensitivity) with a clear/marginal/obstructed verdict, comparable to site.meshtastic.org's link-planning view. Frequency and RX sensitivity auto-fill per source (Meshtastic region/modem-preset, MeshCore radio config) with a "from <source>" provenance hint, always overridable by hand; the picked link on the map recolors to match the verdict once computed. (#4111, #4143, #4147)
 - **Elevation source settings** — a new admin-only **Elevation / Terrain** settings section enables/disables the Link Profile tool's terrain data and lets you point it at a custom DEM source (tile-template or Open-Topo-Data-compatible JSON API), with a Test button reporting the detected source type, sample elevation, and latency. Defaults to the public AWS Terrarium (SRTM-derived) tile set; all fetches happen server-side through the existing SSRF-guarded outbound path. (#4111)
 
 ### Changed
+- **Packet/route detail modals are now accessible dialogs** — the MeshCore packet-decode, MQTT packet-detail, and MeshCore route-detail modals gained `role="dialog"`/`aria-modal` semantics, Escape-to-close, a Tab focus trap, and focus restore to the triggering element (shared `useDialogA11y` hook, mirroring `common/Modal`). (#4276 follow-up)
 - **Protobufs: submodule pinned to a 2.8-preview commit (develop@ba16bfc)** — unlocks implementing Meshtastic 2.8 features (MeshBeacon, XEdDSA signing display, warm-tier NodeDB) ahead of the stable protobufs tag. Fully backward compatible for 2.7 users: the one breaking upstream change in the range (removal of the v2.7.x `TrafficManagementConfig` bool-toggle fields) is neutralized by a load-time schema patch that restores those fields, keeping Traffic Management encode/decode byte-for-byte identical to v2.7.26 against shipping 2.7-alpha firmware (regression-tested at the wire level). The pin will be retargeted to the official 2.8 tag when it lands. (#3548, #3854, #3923)
 - **Maps: obscured-GPS marker offset now scales with cell crowding and is distance-capped** — refines the within-cell declutter offset for low-precision (`precision_bits`) markers. The jitter magnitude now grows *logarithmically* with how many nodes share a precision cell (a busier cell spreads wider; a barely-shared one nudges only slightly), and is capped at the size of a 15-bit cell (~1,456 m). Previously the offset scaled to the node's own cell, so a very coarse-precision node (bits 1–14) could be flung kilometers — or, at the extreme, continent-scale — from the point it reported. Markers at 15+ bits are unchanged, and the drawn accuracy rectangle stays honest (only the marker offset is bounded, so it still lands inside the square). Because a node is only offset when it shares a cell with others of the *same* precision, two overlapping but differently-sized accuracy regions are never pushed closer together than their true centers. (#4155)
 

docs/features/meshcore.md

@@ -165,6 +165,8 @@ Received channel and DM messages show a route line beneath the body, derived fro
 
 **Clicking the hash chain** opens a route-detail popup with the message's reception details (sender, time, hops, scope, text) and the route expanded per hop into **repeater / room-server names** from the contact list. Only relay infrastructure ever appears in a MeshCore path — each forwarder appends the leading bytes of its public key at the hash width the original sender chose (1–3 bytes) — so matching is limited to those contacts. Unknown hashes stay as raw hex; when several repeaters share a hash prefix, the popup best-guesses the one closest to the neighbouring hops' positions and labels it as such.
 
+When **every** relay hop resolves to a contact with a known position, the popup also shows a **Packet flow** mini map: a dashed line tracing the packet geospatially across the relays, each hop marked and labeled (`#1 Hilltop`, `#2 Downtown`, …). The sender and your local node are added as endpoints when their positions are known. If any hop is unknown or unpositioned the map is omitted entirely — a partial line would misrepresent the path.
+
 Room-server posts and messages with no recoverable path show no route line.
 
 ### Send bar

src/components/MQTT/MqttPacketDetailModal.tsx

@@ -10,6 +10,7 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useCsrfFetch } from '../../hooks/useCsrfFetch';
+import { useDialogA11y } from '../../hooks/useDialogA11y';
 import type { MqttGroupedPacket, MqttReception } from './mqttPacketTypes';
 
 interface Props {
@@ -55,6 +56,8 @@ function formatHeard(ts: number): string {
 
 const MqttPacketDetailModal: React.FC<Props> = ({ packet, prefix, csrfFetch, nodeName, onClose }) => {
   const { t } = useTranslation();
+  // Escape / focus-trap / focus-restore + dialog semantics (shared a11y hook).
+  const { contentRef, onKeyDown } = useDialogA11y(onClose);
 
   const [receptions, setReceptions] = useState<MqttReception[]>([]);
   const [loadingReceptions, setLoadingReceptions] = useState(false);
@@ -94,16 +97,6 @@ const MqttPacketDetailModal: React.FC<Props> = ({ packet, prefix, csrfFetch, nod
     return () => { cancelled = true; };
   }, [canFetch, packet.packetId, packet.fromNode, csrfFetch, prefix]);
 
-  // Close on Escape, matching the MeshCore modal's overlay-click-to-close
-  // behavior plus keyboard dismissal.
-  useEffect(() => {
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') onClose();
-    };
-    document.addEventListener('keydown', handleKeyDown);
-    return () => document.removeEventListener('keydown', handleKeyDown);
-  }, [onClose]);
-
   const renderNodeRef = useCallback((n: number | null, id: string | null): string => {
     if (n === BROADCAST_NODE_NUM || id === '!ffffffff') return t('common.broadcast', 'Broadcast');
     const name = nodeName(n);
@@ -114,10 +107,19 @@ const MqttPacketDetailModal: React.FC<Props> = ({ packet, prefix, csrfFetch, nod
   const showOutcomeBadge = packet.encrypted && !packet.portnumName && ENCRYPTED_OUTCOME_BADGES.has(packet.ingestOutcome);
 
   return (
-    <div className="mqpm-modal" onClick={onClose}>
-      <div className="mqpm-modal-content" onClick={(e) => e.stopPropagation()}>
+    <div className="mqpm-modal" onClick={onClose} role="presentation">
+      <div
+        className="mqpm-modal-content"
+        ref={contentRef}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="mqpm-detail-title"
+        tabIndex={-1}
+        onKeyDown={onKeyDown}
+        onClick={(e) => e.stopPropagation()}
+      >
         <div className="mqpm-modal-header">
-          <h4>{t('mqtt.packets.detailTitle', 'Packet Detail')}</h4>
+          <h4 id="mqpm-detail-title">{t('mqtt.packets.detailTitle', 'Packet Detail')}</h4>
           <button className="mqpm-modal-close" onClick={onClose} aria-label={t('common.close', 'Close')}>×</button>
         </div>
 

src/components/MeshCore/MeshCoreMessageRouteModal.test.tsx

@@ -5,8 +5,11 @@
  * relay-hash chain opens this popup, which shows message details and expands
  * each relay hash to the matching repeater / room-server name (mirroring the
  * {ROUTE_NAMES} automation token — unknown hashes stay raw, collisions are
- * annotated as a best guess).
+ * annotated as a best guess). When every hop resolves to a positioned
+ * contact, a mini map traces the packet flow with labeled hop markers
+ * (BaseMap/react-leaflet stubbed — mirrors the MeshCoreMap.test.tsx style).
  */
+import type { ReactNode } from 'react';
 import { describe, it, expect, vi } from 'vitest';
 import { render, screen, fireEvent } from '@testing-library/react';
 
@@ -21,6 +24,17 @@ vi.mock('react-i18next', () => ({
   initReactI18next: { type: '3rdParty', init: () => {} },
 }));
 
+vi.mock('../map/BaseMap', () => ({
+  BaseMap: ({ children }: { children?: ReactNode }) => <div data-testid="base-map">{children}</div>,
+}));
+
+vi.mock('react-leaflet', () => ({
+  CircleMarker: ({ children }: { children?: ReactNode }) => <div data-testid="flow-marker">{children}</div>,
+  Polyline: () => <div data-testid="flow-line" />,
+  Tooltip: ({ children }: { children?: ReactNode }) => <span data-testid="flow-label">{children}</span>,
+  useMap: () => ({ setView: vi.fn(), fitBounds: vi.fn() }),
+}));
+
 import MeshCoreMessageRouteModal from './MeshCoreMessageRouteModal';
 import type { MeshCoreMessage } from './hooks/useMeshCore';
 import type { MeshCoreContact } from '../../utils/meshcoreHelpers';
@@ -114,4 +128,93 @@ describe('MeshCoreMessageRouteModal', () => {
     fireEvent.click(container.querySelector('.mcpm-modal')!);
     expect(onClose).toHaveBeenCalledTimes(2);
   });
+
+  it('is an accessible dialog: role/aria set, focused on mount, Escape closes', () => {
+    const onClose = vi.fn();
+    const { container } = render(
+      <MeshCoreMessageRouteModal
+        message={msg()}
+        fromLabel="Sender"
+        contacts={contacts}
+        onClose={onClose}
+      />,
+    );
+    const content = container.querySelector('.mcpm-modal-content')!;
+    expect(content.getAttribute('role')).toBe('dialog');
+    expect(content.getAttribute('aria-modal')).toBe('true');
+    expect(document.activeElement).toBe(content);
+    fireEvent.keyDown(document, { key: 'Escape' });
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  describe('packet-flow map', () => {
+    const positioned: MeshCoreContact[] = [
+      { publicKey: 'a3' + 'b'.repeat(62), advType: 2, advName: 'Hilltop', latitude: 30.0, longitude: -90.0 },
+      { publicKey: '7f' + 'c'.repeat(62), advType: 3, advName: 'Downtown Room', latitude: 30.0, longitude: -89.9 },
+    ];
+
+    it('renders the flow map with numbered hop labels when all hops have positions', () => {
+      render(
+        <MeshCoreMessageRouteModal
+          message={msg()}
+          fromLabel="Sender"
+          contacts={positioned}
+          onClose={() => {}}
+        />,
+      );
+      expect(screen.getByTestId('base-map')).toBeTruthy();
+      expect(screen.getByTestId('flow-line')).toBeTruthy();
+      const labels = screen.getAllByTestId('flow-label').map((el) => el.textContent);
+      expect(labels).toContain('#1 Hilltop');
+      expect(labels).toContain('#2 Downtown Room');
+    });
+
+    it('prepends the sender and appends the local node when they have positions', () => {
+      const withEndpoints: MeshCoreContact[] = [
+        ...positioned,
+        { publicKey: 'deadbeefcafe' + 'e'.repeat(52), advType: 1, advName: 'Sender Node', latitude: 30.0, longitude: -90.1 },
+        { publicKey: '99' + 'f'.repeat(62), advType: 1, advName: 'Base (local)', latitude: 30.0, longitude: -89.8 },
+      ];
+      render(
+        <MeshCoreMessageRouteModal
+          message={msg()}
+          fromLabel="Sender"
+          contacts={withEndpoints}
+          onClose={() => {}}
+        />,
+      );
+      const labels = screen.getAllByTestId('flow-label').map((el) => el.textContent);
+      expect(labels[0]).toBe('Sender');
+      expect(labels[labels.length - 1]).toBe('You');
+      expect(labels).toHaveLength(4);
+    });
+
+    it('shows no map when any hop lacks a position', () => {
+      const partial: MeshCoreContact[] = [
+        { publicKey: 'a3' + 'b'.repeat(62), advType: 2, advName: 'Hilltop', latitude: 30.0, longitude: -90.0 },
+        { publicKey: '7f' + 'c'.repeat(62), advType: 3, advName: 'Downtown Room' }, // no position
+      ];
+      render(
+        <MeshCoreMessageRouteModal
+          message={msg()}
+          fromLabel="Sender"
+          contacts={partial}
+          onClose={() => {}}
+        />,
+      );
+      expect(screen.queryByTestId('base-map')).toBeNull();
+    });
+
+    it('shows no map when a hop is unknown, even if others are positioned', () => {
+      render(
+        <MeshCoreMessageRouteModal
+          message={msg({ routePath: 'a3,ff' })}
+          fromLabel="Sender"
+          contacts={positioned}
+          onClose={() => {}}
+        />,
+      );
+      expect(screen.queryByTestId('base-map')).toBeNull();
+    });
+  });
 });