From f7c60fc667531df820978016b2fad041d03e6549 Mon Sep 17 00:00:00 2001
From: Yves Gugger <guggeryves@hotmail.com>
Date: Fri, 12 Dec 2025 22:20:24 +0100
Subject: [PATCH] Health modal: clearer check display with explicit status

---
 frontend/src/app/terminal/watchlist/page.tsx | 80 +++++++++++++++-----
 1 file changed, 63 insertions(+), 17 deletions(-)

diff --git a/frontend/src/app/terminal/watchlist/page.tsx b/frontend/src/app/terminal/watchlist/page.tsx
index 03bc6ec..ac6746c 100755
--- a/frontend/src/app/terminal/watchlist/page.tsx
+++ b/frontend/src/app/terminal/watchlist/page.tsx
@@ -479,27 +479,73 @@ export default function WatchlistPage() {
               
               {/* Checks */}
               {selectedHealth ? (
-                <div className="space-y-1 mb-6">
-                  {[
-                    { label: 'DNS Resolution', value: selectedHealth.dns?.has_a ?? selectedHealth.dns?.has_ns },
-                    { label: 'HTTP Reachable', value: selectedHealth.http?.is_reachable },
-                    { label: 'SSL Certificate', value: selectedHealth.ssl?.has_certificate },
-                    { label: 'Not Parked', value: !(selectedHealth.dns?.is_parked || selectedHealth.http?.is_parked) },
-                  ].map((check) => (
-                    <div key={check.label} className="flex items-center justify-between py-2.5 border-b border-white/[0.05]">
-                      <span className="text-sm text-white/60">{check.label}</span>
-                      {check.value ? (
+                <div className="space-y-0 mb-6 border border-white/[0.06] divide-y divide-white/[0.06]">
+                  {/* DNS */}
+                  <div className="flex items-center justify-between px-4 py-3 bg-white/[0.01]">
+                    <span className="text-sm text-white/70">DNS Resolution</span>
+                    {selectedHealth.dns?.has_a || selectedHealth.dns?.has_ns ? (
+                      <div className="flex items-center gap-2">
                         <CheckCircle2 className="w-5 h-5 text-accent" />
-                      ) : check.value === false ? (
+                        <span className="text-xs text-accent">OK</span>
+                      </div>
+                    ) : (
+                      <div className="flex items-center gap-2">
                         <XCircle className="w-5 h-5 text-rose-400" />
-                      ) : (
-                        <span className="text-xs text-white/30">Unknown</span>
-                      )}
-                    </div>
-                  ))}
+                        <span className="text-xs text-rose-400">Failed</span>
+                      </div>
+                    )}
+                  </div>
+                  
+                  {/* HTTP */}
+                  <div className="flex items-center justify-between px-4 py-3 bg-white/[0.01]">
+                    <span className="text-sm text-white/70">HTTP Reachable</span>
+                    {selectedHealth.http?.is_reachable ? (
+                      <div className="flex items-center gap-2">
+                        <CheckCircle2 className="w-5 h-5 text-accent" />
+                        <span className="text-xs text-accent">OK</span>
+                      </div>
+                    ) : (
+                      <div className="flex items-center gap-2">
+                        <XCircle className="w-5 h-5 text-rose-400" />
+                        <span className="text-xs text-rose-400">Failed</span>
+                      </div>
+                    )}
+                  </div>
+                  
+                  {/* SSL */}
+                  <div className="flex items-center justify-between px-4 py-3 bg-white/[0.01]">
+                    <span className="text-sm text-white/70">SSL Certificate</span>
+                    {selectedHealth.ssl?.has_certificate ? (
+                      <div className="flex items-center gap-2">
+                        <CheckCircle2 className="w-5 h-5 text-accent" />
+                        <span className="text-xs text-accent">Valid</span>
+                      </div>
+                    ) : (
+                      <div className="flex items-center gap-2">
+                        <XCircle className="w-5 h-5 text-rose-400" />
+                        <span className="text-xs text-rose-400">Missing</span>
+                      </div>
+                    )}
+                  </div>
+                  
+                  {/* Parked */}
+                  <div className="flex items-center justify-between px-4 py-3 bg-white/[0.01]">
+                    <span className="text-sm text-white/70">Not Parked</span>
+                    {!selectedHealth.dns?.is_parked && !selectedHealth.http?.is_parked ? (
+                      <div className="flex items-center gap-2">
+                        <CheckCircle2 className="w-5 h-5 text-accent" />
+                        <span className="text-xs text-accent">OK</span>
+                      </div>
+                    ) : (
+                      <div className="flex items-center gap-2">
+                        <XCircle className="w-5 h-5 text-amber-400" />
+                        <span className="text-xs text-amber-400">Parked</span>
+                      </div>
+                    )}
+                  </div>
                 </div>
               ) : (
-                <div className="py-6 text-center text-white/30 text-sm mb-6">
+                <div className="py-8 text-center text-white/30 text-sm mb-6 border border-white/[0.06] bg-white/[0.01]">
                   Click the button below to run a health check
                 </div>
               )}