From 81b109f9814b2dc4ad5c77bbfb8bf9da24404eb6 Mon Sep 17 00:00:00 2001
From: findthelorax <findthelorax@gmial.com>
Date: Sun, 19 Apr 2026 10:08:09 -0400
Subject: [PATCH] feat: make IP Address clickable in detail panel

- Display IP as a clickable link that opens http://<ip> in a new tab
- Match the existing Hostname link styling and behavior
- Add external link icon to indicate it's clickable
---
 frontend/src/components/panels/DetailPanel.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/panels/DetailPanel.tsx b/frontend/src/components/panels/DetailPanel.tsx
index 1c9d82b..1e846c7 100644
--- a/frontend/src/components/panels/DetailPanel.tsx
+++ b/frontend/src/components/panels/DetailPanel.tsx
@@ -202,7 +202,14 @@ export function DetailPanel({ onEdit }: DetailPanelProps) {
             </a>
           </div>
         )}
-        {data.ip && <DetailRow label="IP Address" value={data.ip} mono />}
+        {data.ip && (
+          <div className="flex justify-between gap-2 items-baseline">
+            <span className="text-muted-foreground text-xs shrink-0">IP Address</span>
+            <a href={`http://${data.ip}`} target="_blank" rel="noopener noreferrer" className="text-xs font-mono text-[#00d4ff] hover:underline truncate flex items-center gap-1" title={data.ip}>
+              {data.ip}<ExternalLink size={10} className="shrink-0" />
+            </a>
+          </div>
+        )}
         {data.mac && <DetailRow label="MAC" value={data.mac} mono />}
         {data.os && <DetailRow label="OS" value={data.os} />}
         {data.check_method && <DetailRow label="Check" value={data.check_method} mono />}