Add route discovery

frontend/src/components/ChatHeader.tsx

@@ -1,14 +1,22 @@
 import { useEffect, useRef, useState } from 'react';
-import { Bell, Globe2, Info, Star, Trash2 } from 'lucide-react';
+import { Bell, Globe2, Info, Route, Star, Trash2 } from 'lucide-react';
 import { toast } from './ui/sonner';
 import { DirectTraceIcon } from './DirectTraceIcon';
+import { ContactPathDiscoveryModal } from './ContactPathDiscoveryModal';
 import { isFavorite } from '../utils/favorites';
 import { handleKeyboardActivate } from '../utils/a11y';
 import { stripRegionScopePrefix } from '../utils/regionScope';
 import { isPrefixOnlyContact } from '../utils/pubkey';
 import { ContactAvatar } from './ContactAvatar';
 import { ContactStatusInfo } from './ContactStatusInfo';
-import type { Channel, Contact, Conversation, Favorite, RadioConfig } from '../types';
+import type {
+  Channel,
+  Contact,
+  Conversation,
+  Favorite,
+  PathDiscoveryResponse,
+  RadioConfig,
+} from '../types';
 
 interface ChatHeaderProps {
   conversation: Conversation;
@@ -20,6 +28,7 @@ interface ChatHeaderProps {
   notificationsEnabled: boolean;
   notificationsPermission: NotificationPermission | 'unsupported';
   onTrace: () => void;
+  onPathDiscovery: (publicKey: string) => Promise<PathDiscoveryResponse>;
   onToggleNotifications: () => void;
   onToggleFavorite: (type: 'channel' | 'contact', id: string) => void;
   onSetChannelFloodScopeOverride?: (key: string, floodScopeOverride: string) => void;
@@ -39,6 +48,7 @@ export function ChatHeader({
   notificationsEnabled,
   notificationsPermission,
   onTrace,
+  onPathDiscovery,
   onToggleNotifications,
   onToggleFavorite,
   onSetChannelFloodScopeOverride,
@@ -49,10 +59,12 @@ export function ChatHeader({
 }: ChatHeaderProps) {
   const [showKey, setShowKey] = useState(false);
   const [contactStatusInline, setContactStatusInline] = useState(true);
+  const [pathDiscoveryOpen, setPathDiscoveryOpen] = useState(false);
   const keyTextRef = useRef<HTMLSpanElement | null>(null);
 
   useEffect(() => {
     setShowKey(false);
+    setPathDiscoveryOpen(false);
   }, [conversation.id]);
 
   const activeChannel =
@@ -272,6 +284,21 @@ export function ChatHeader({
         </span>
       </span>
       <div className="flex items-center justify-end gap-0.5 flex-shrink-0">
+        {conversation.type === 'contact' && (
+          <button
+            className="p-1 rounded hover:bg-accent text-lg leading-none transition-colors disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            onClick={() => setPathDiscoveryOpen(true)}
+            title={
+              activeContactIsPrefixOnly
+                ? 'Path Discovery unavailable until the full contact key is known'
+                : 'Path Discovery. Send a routed probe and inspect the forward and return paths'
+            }
+            aria-label="Path Discovery"
+            disabled={activeContactIsPrefixOnly}
+          >
+            <Route className="h-4 w-4 text-muted-foreground" aria-hidden="true" />
+          </button>
+        )}
         {conversation.type === 'contact' && (
           <button
             className="p-1 rounded hover:bg-accent text-lg leading-none transition-colors disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
@@ -279,7 +306,7 @@ export function ChatHeader({
             title={
               activeContactIsPrefixOnly
                 ? 'Direct Trace unavailable until the full contact key is known'
-                : 'Direct Trace'
+                : 'Direct Trace. Send a zero-hop packet to thie contact and display out and back SNR'
             }
             aria-label="Direct Trace"
             disabled={activeContactIsPrefixOnly}
@@ -371,6 +398,16 @@ export function ChatHeader({
           </button>
         )}
       </div>
+      {conversation.type === 'contact' && activeContact && (
+        <ContactPathDiscoveryModal
+          open={pathDiscoveryOpen}
+          onClose={() => setPathDiscoveryOpen(false)}
+          contact={activeContact}
+          contacts={contacts}
+          radioName={config?.name ?? null}
+          onDiscover={onPathDiscovery}
+        />
+      )}
     </header>
   );
 }

frontend/src/components/ContactPathDiscoveryModal.tsx

@@ -0,0 +1,213 @@
+import { useMemo, useState } from 'react';
+
+import type { Contact, PathDiscoveryResponse, PathDiscoveryRoute } from '../types';
+import {
+  findContactsByPrefix,
+  formatRouteLabel,
+  getEffectiveContactRoute,
+  hasRoutingOverride,
+  parsePathHops,
+} from '../utils/pathUtils';
+import { Button } from './ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from './ui/dialog';
+
+interface ContactPathDiscoveryModalProps {
+  open: boolean;
+  onClose: () => void;
+  contact: Contact;
+  contacts: Contact[];
+  radioName: string | null;
+  onDiscover: (publicKey: string) => Promise<PathDiscoveryResponse>;
+}
+
+function formatPathHashMode(mode: number): string {
+  if (mode === 0) return '1-byte hops';
+  if (mode === 1) return '2-byte hops';
+  if (mode === 2) return '3-byte hops';
+  return 'Unknown hop width';
+}
+
+function renderRouteNodes(
+  route: PathDiscoveryRoute,
+  startLabel: string,
+  endLabel: string,
+  contacts: Contact[]
+): string {
+  if (route.path_len <= 0 || !route.path) {
+    return `${startLabel} -> ${endLabel}`;
+  }
+
+  const hops = parsePathHops(route.path, route.path_len).map((prefix) => {
+    const matches = findContactsByPrefix(prefix, contacts, true);
+    if (matches.length === 1) {
+      return matches[0].name || `${matches[0].public_key.slice(0, prefix.length)}…`;
+    }
+    if (matches.length > 1) {
+      return `${prefix}…?`;
+    }
+    return `${prefix}…`;
+  });
+
+  return [startLabel, ...hops, endLabel].join(' -> ');
+}
+
+function RouteCard({
+  label,
+  route,
+  chain,
+}: {
+  label: string;
+  route: PathDiscoveryRoute;
+  chain: string;
+}) {
+  const rawPath = parsePathHops(route.path, route.path_len).join(' -> ') || 'direct';
+
+  return (
+    <div className="rounded-md border border-border bg-muted/20 p-3">
+      <div className="flex items-center justify-between gap-3">
+        <h4 className="text-sm font-semibold">{label}</h4>
+        <span className="text-[11px] text-muted-foreground">
+          {formatRouteLabel(route.path_len, true)}
+        </span>
+      </div>
+      <p className="mt-2 text-sm">{chain}</p>
+      <div className="mt-2 flex flex-wrap gap-x-3 gap-y-1 text-[11px] text-muted-foreground">
+        <span>Raw: {rawPath}</span>
+        <span>{formatPathHashMode(route.path_hash_mode)}</span>
+      </div>
+    </div>
+  );
+}
+
+export function ContactPathDiscoveryModal({
+  open,
+  onClose,
+  contact,
+  contacts,
+  radioName,
+  onDiscover,
+}: ContactPathDiscoveryModalProps) {
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [result, setResult] = useState<PathDiscoveryResponse | null>(null);
+
+  const effectiveRoute = useMemo(() => getEffectiveContactRoute(contact), [contact]);
+  const hasForcedRoute = hasRoutingOverride(contact);
+  const learnedRouteSummary = useMemo(() => {
+    if (contact.last_path_len === -1) {
+      return 'Flood';
+    }
+    const hops = parsePathHops(contact.last_path, contact.last_path_len);
+    return hops.length > 0
+      ? `${formatRouteLabel(contact.last_path_len, true)} (${hops.join(' -> ')})`
+      : formatRouteLabel(contact.last_path_len, true);
+  }, [contact.last_path, contact.last_path_len]);
+  const forcedRouteSummary = useMemo(() => {
+    if (!hasForcedRoute) {
+      return null;
+    }
+    if (effectiveRoute.pathLen === -1) {
+      return 'Flood';
+    }
+    const hops = parsePathHops(effectiveRoute.path, effectiveRoute.pathLen);
+    return hops.length > 0
+      ? `${formatRouteLabel(effectiveRoute.pathLen, true)} (${hops.join(' -> ')})`
+      : formatRouteLabel(effectiveRoute.pathLen, true);
+  }, [effectiveRoute, hasForcedRoute]);
+
+  const forwardChain = result
+    ? renderRouteNodes(
+        result.forward_path,
+        radioName || 'Local radio',
+        contact.name || contact.public_key.slice(0, 12),
+        contacts
+      )
+    : null;
+  const returnChain = result
+    ? renderRouteNodes(
+        result.return_path,
+        contact.name || contact.public_key.slice(0, 12),
+        radioName || 'Local radio',
+        contacts
+      )
+    : null;
+
+  const handleDiscover = async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const discovered = await onDiscover(contact.public_key);
+      setResult(discovered);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Unknown error');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={(isOpen) => !isOpen && onClose()}>
+      <DialogContent className="sm:max-w-[560px]">
+        <DialogHeader>
+          <DialogTitle>Path Discovery</DialogTitle>
+          <DialogDescription>
+            Send a routed probe to this contact and wait for the round-trip path response. The
+            learned forward route will be saved back onto the contact if a response comes back.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4">
+          <div className="rounded-md border border-border bg-muted/20 p-3 text-sm">
+            <div className="font-medium">{contact.name || contact.public_key.slice(0, 12)}</div>
+            <div className="mt-1 text-muted-foreground">
+              Current learned route: {learnedRouteSummary}
+            </div>
+            {forcedRouteSummary && (
+              <div className="mt-1 text-destructive">
+                Current forced route: {forcedRouteSummary}
+              </div>
+            )}
+          </div>
+
+          {hasForcedRoute && (
+            <div className="rounded-md border border-warning/30 bg-warning/10 px-3 py-2 text-sm text-warning">
+              A forced route override is currently set for this contact. Path discovery will update
+              the learned route data, but it will not replace the forced path. Clearing the forced
+              route afterward is enough to make the newly discovered learned path take effect. You
+              only need to rerun path discovery if you want a fresher route sample.
+            </div>
+          )}
+
+          {error && (
+            <div className="rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive">
+              {error}
+            </div>
+          )}
+
+          {result && forwardChain && returnChain && (
+            <div className="space-y-3">
+              <RouteCard label="Forward Path" route={result.forward_path} chain={forwardChain} />
+              <RouteCard label="Return Path" route={result.return_path} chain={returnChain} />
+            </div>
+          )}
+        </div>
+
+        <DialogFooter className="gap-2 sm:justify-between">
+          <Button variant="secondary" onClick={onClose}>
+            Close
+          </Button>
+          <Button onClick={handleDiscover} disabled={loading}>
+            {loading ? 'Running...' : 'Run path discovery'}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

frontend/src/components/ConversationPane.tsx

@@ -11,6 +11,7 @@ import type {
   Favorite,
   HealthStatus,
   Message,
+  PathDiscoveryResponse,
   RawPacket,
   RadioConfig,
 } from '../types';
@@ -46,6 +47,7 @@ interface ConversationPaneProps {
   loadingNewer: boolean;
   messageInputRef: Ref<MessageInputHandle>;
   onTrace: () => Promise<void>;
+  onPathDiscovery: (publicKey: string) => Promise<PathDiscoveryResponse>;
   onToggleFavorite: (type: 'channel' | 'contact', id: string) => Promise<void>;
   onDeleteContact: (publicKey: string) => Promise<void>;
   onDeleteChannel: (key: string) => Promise<void>;
@@ -109,6 +111,7 @@ export function ConversationPane({
   loadingNewer,
   messageInputRef,
   onTrace,
+  onPathDiscovery,
   onToggleFavorite,
   onDeleteContact,
   onDeleteChannel,
@@ -205,6 +208,7 @@ export function ConversationPane({
           radioLon={config?.lon ?? null}
           radioName={config?.name ?? null}
           onTrace={onTrace}
+          onPathDiscovery={onPathDiscovery}
           onToggleNotifications={onToggleNotifications}
           onToggleFavorite={onToggleFavorite}
           onDeleteContact={onDeleteContact}
@@ -225,6 +229,7 @@ export function ConversationPane({
         notificationsEnabled={notificationsEnabled}
         notificationsPermission={notificationsPermission}
         onTrace={onTrace}
+        onPathDiscovery={onPathDiscovery}
         onToggleNotifications={onToggleNotifications}
         onToggleFavorite={onToggleFavorite}
         onSetChannelFloodScopeOverride={onSetChannelFloodScopeOverride}

frontend/src/components/RepeaterDashboard.tsx

@@ -1,13 +1,15 @@
+import { useState } from 'react';
+
 import { toast } from './ui/sonner';
 import { Button } from './ui/button';
-import { Bell, Star, Trash2 } from 'lucide-react';
+import { Bell, Route, Star, Trash2 } from 'lucide-react';
 import { DirectTraceIcon } from './DirectTraceIcon';
 import { RepeaterLogin } from './RepeaterLogin';
 import { useRepeaterDashboard } from '../hooks/useRepeaterDashboard';
 import { isFavorite } from '../utils/favorites';
 import { handleKeyboardActivate } from '../utils/a11y';
 import { ContactStatusInfo } from './ContactStatusInfo';
-import type { Contact, Conversation, Favorite } from '../types';
+import type { Contact, Conversation, Favorite, PathDiscoveryResponse } from '../types';
 import { TelemetryPane } from './repeater/RepeaterTelemetryPane';
 import { NeighborsPane } from './repeater/RepeaterNeighborsPane';
 import { AclPane } from './repeater/RepeaterAclPane';
@@ -17,6 +19,7 @@ import { LppTelemetryPane } from './repeater/RepeaterLppTelemetryPane';
 import { OwnerInfoPane } from './repeater/RepeaterOwnerInfoPane';
 import { ActionsPane } from './repeater/RepeaterActionsPane';
 import { ConsolePane } from './repeater/RepeaterConsolePane';
+import { ContactPathDiscoveryModal } from './ContactPathDiscoveryModal';
 
 // Re-export for backwards compatibility (used by repeaterFormatters.test.ts)
 export { formatDuration, formatClockDrift } from './repeater/repeaterPaneShared';
@@ -34,6 +37,7 @@ interface RepeaterDashboardProps {
   radioLon: number | null;
   radioName: string | null;
   onTrace: () => void;
+  onPathDiscovery: (publicKey: string) => Promise<PathDiscoveryResponse>;
   onToggleNotifications: () => void;
   onToggleFavorite: (type: 'channel' | 'contact', id: string) => void;
   onDeleteContact: (publicKey: string) => void;
@@ -48,12 +52,14 @@ export function RepeaterDashboard({
   notificationsPermission,
   radioLat,
   radioLon,
-  radioName: _radioName,
+  radioName,
   onTrace,
+  onPathDiscovery,
   onToggleNotifications,
   onToggleFavorite,
   onDeleteContact,
 }: RepeaterDashboardProps) {
+  const [pathDiscoveryOpen, setPathDiscoveryOpen] = useState(false);
   const {
     loggedIn,
     loginLoading,
@@ -122,6 +128,16 @@ export function RepeaterDashboard({
               {anyLoading ? 'Loading...' : 'Load All'}
             </Button>
           )}
+          {contact && (
+            <button
+              className="p-1 rounded hover:bg-accent text-lg leading-none transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              onClick={() => setPathDiscoveryOpen(true)}
+              title="Path Discovery. Send a routed probe and inspect the forward and return paths"
+              aria-label="Path Discovery"
+            >
+              <Route className="h-4 w-4 text-muted-foreground" aria-hidden="true" />
+            </button>
+          )}
           <button
             className="p-1 rounded hover:bg-accent text-lg leading-none transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
             onClick={onTrace}
@@ -184,6 +200,16 @@ export function RepeaterDashboard({
             <Trash2 className="h-4 w-4" aria-hidden="true" />
           </button>
         </div>
+        {contact && (
+          <ContactPathDiscoveryModal
+            open={pathDiscoveryOpen}
+            onClose={() => setPathDiscoveryOpen(false)}
+            contact={contact}
+            contacts={contacts}
+            radioName={radioName}
+            onDiscover={onPathDiscovery}
+          />
+        )}
       </header>
 
       {/* Body */}