From 33be7a9522d75c03e70630c15f72e0d684555dc2 Mon Sep 17 00:00:00 2001
From: Jason Staack <jason@staack.com>
Date: Wed, 18 Mar 2026 11:14:27 -0500
Subject: [PATCH] feat(map): make device hostname clickable in map popup

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 frontend/src/components/map/DeviceMarker.tsx | 12 ++++--------
 1 file changed, 4 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/map/DeviceMarker.tsx b/frontend/src/components/map/DeviceMarker.tsx
index 50fe04b..bbfd1a5 100644
--- a/frontend/src/components/map/DeviceMarker.tsx
+++ b/frontend/src/components/map/DeviceMarker.tsx
@@ -2,6 +2,7 @@ import { Marker, Popup } from 'react-leaflet'
 import L from 'leaflet'
 import { Link } from '@tanstack/react-router'
 import type { FleetDevice } from '@/lib/api'
+import { DeviceLink } from '@/components/ui/device-link'
 import { formatUptime } from '@/lib/utils'
 
 interface DeviceMarkerProps {
@@ -57,7 +58,9 @@ export function DeviceMarker({ device, tenantId }: DeviceMarkerProps) {
     <Marker position={[device.latitude, device.longitude]} icon={icon}>
       <Popup>
         <div className="min-w-[200px] text-sm font-sans">
-          <div className="font-semibold text-base mb-1">{device.hostname}</div>
+          <DeviceLink tenantId={resolvedTenantId} deviceId={device.id} className="font-semibold text-base">
+            {device.hostname}
+          </DeviceLink>
           <div className="text-text-secondary space-y-0.5">
             <div>IP: {device.ip_address}</div>
             {device.model && <div>Model: {device.model}</div>}
@@ -72,13 +75,6 @@ export function DeviceMarker({ device, tenantId }: DeviceMarkerProps) {
             </div>
           </div>
           <div className="flex gap-3 mt-2 pt-2 border-t border-border">
-            <Link
-              to="/tenants/$tenantId/devices/$deviceId"
-              params={{ tenantId: resolvedTenantId, deviceId: device.id }}
-              className="text-info hover:text-accent text-xs font-medium"
-            >
-              View Details &rarr;
-            </Link>
             <Link
               to="/config-editor"
               className="text-info hover:text-accent text-xs font-medium"