From 26e3c90523e4cbee10594fcf027e59c87e23fa10 Mon Sep 17 00:00:00 2001
From: Jason Staack <jason@staack.com>
Date: Wed, 18 Mar 2026 11:23:40 -0500
Subject: [PATCH] feat(vpn): make device hostnames clickable in VPN page

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 frontend/src/components/vpn/VpnPage.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/vpn/VpnPage.tsx b/frontend/src/components/vpn/VpnPage.tsx
index b28934f..d0548d9 100644
--- a/frontend/src/components/vpn/VpnPage.tsx
+++ b/frontend/src/components/vpn/VpnPage.tsx
@@ -47,6 +47,7 @@ import { toast } from '@/components/ui/toast'
 import { cn } from '@/lib/utils'
 import { EmptyState } from '@/components/ui/empty-state'
 import { TableSkeleton } from '@/components/ui/page-skeleton'
+import { DeviceLink } from '@/components/ui/device-link'
 
 export function VpnPage() {
   const { user } = useAuth()
@@ -338,7 +339,13 @@ export function VpnPage() {
               {peers.map((peer) => (
                 <tr key={peer.id} className="hover:bg-elevated/30 transition-colors">
                   <td className="px-4 py-3">
-                    <div className="font-medium text-sm text-text-primary">{peer.device_hostname}</div>
+                    <div className="font-medium text-sm text-text-primary">
+                      {peer.device_id ? (
+                        <DeviceLink tenantId={tenantId} deviceId={peer.device_id}>
+                          {peer.device_hostname}
+                        </DeviceLink>
+                      ) : peer.device_hostname}
+                    </div>
                     <div className="text-xs text-text-muted">{peer.device_ip}</div>
                   </td>
                   <td className="px-4 py-3">