Phase 5: Frontend path rendering

frontend/src/components/ContactInfoPane.tsx

@@ -1,7 +1,12 @@
 import { useEffect, useState } from 'react';
 import { api } from '../api';
 import { formatTime } from '../utils/messageParser';
-import { isValidLocation, calculateDistance, formatDistance } from '../utils/pathUtils';
+import {
+  isValidLocation,
+  calculateDistance,
+  formatDistance,
+  parsePathHops,
+} from '../utils/pathUtils';
 import { getMapFocusHash } from '../utils/urlHash';
 import { isFavorite } from '../utils/favorites';
 import { handleKeyboardActivate } from '../utils/a11y';
@@ -413,7 +418,7 @@ export function ContactInfoPane({
                       className="flex justify-between items-center text-sm"
                     >
                       <span className="font-mono text-xs truncate">
-                        {p.path ? p.path.match(/.{2}/g)!.join(' → ') : '(direct)'}
+                        {p.path ? parsePathHops(p.path, p.path_len).join(' → ') : '(direct)'}
                       </span>
                       <span className="text-xs text-muted-foreground flex-shrink-0 ml-2">
                         {p.heard_count}x · {formatTime(p.last_seen)}

frontend/src/components/PathModal.tsx

@@ -52,7 +52,7 @@ export function PathModal({
   const resolvedPaths = hasPaths
     ? paths.map((p) => ({
         ...p,
-        resolved: resolvePath(p.path, senderInfo, contacts, config),
+        resolved: resolvePath(p.path, senderInfo, contacts, config, p.path_len),
       }))
     : [];
 
@@ -90,7 +90,7 @@ export function PathModal({
             {/* Raw path summary */}
             <div className="text-sm">
               {paths.map((p, index) => {
-                const hops = parsePathHops(p.path);
+                const hops = parsePathHops(p.path, p.path_len);
                 const rawPath = hops.length > 0 ? hops.join('->') : 'direct';
                 return (
                   <div key={index}>