From c96af6918968121bbd124bbeca50ff5e69231ff9 Mon Sep 17 00:00:00 2001
From: Paul Payne <paul@payne.io>
Date: Thu, 9 Jul 2026 23:36:47 +0000
Subject: [PATCH] =?UTF-8?q?fix:=20TLS=20status=20dot=20colors=20=E2=80=94?=
 =?UTF-8?q?=20grey/red/green?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- na (passthrough, Central doesn't handle TLS): grey checkmark
- error (terminate but cert missing): red alert icon
- ok (terminate and cert exists): green checkmark

Previously passthrough showed green (wrong — Central isn't doing
anything) and missing certs showed amber (should be red — broken).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 web/src/components/ServicesComponent.tsx | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/web/src/components/ServicesComponent.tsx b/web/src/components/ServicesComponent.tsx
index b28a932..e1cee43 100644
--- a/web/src/components/ServicesComponent.tsx
+++ b/web/src/components/ServicesComponent.tsx
@@ -21,20 +21,22 @@ import { usePageHelp } from '../hooks/usePageHelp';
 import type { RegisteredService } from '../services/api/networking';
 import { servicesApi, haproxyApi } from '../services/api/networking';
 
-function StatusDot({ status, label }: { status: 'ok' | 'warning' | 'na'; label: string }) {
+function StatusDot({ status, label }: { status: 'ok' | 'error' | 'na'; label: string }) {
   return (
     <span className="inline-flex items-center gap-1 text-xs">
       {status === 'ok' && <CheckCircle className="h-3.5 w-3.5 text-green-500" />}
-      {status === 'warning' && <AlertCircle className="h-3.5 w-3.5 text-amber-500" />}
-      {status === 'na' && <span className="h-3.5 w-3.5 text-muted-foreground inline-flex items-center justify-center">&mdash;</span>}
+      {status === 'error' && <AlertCircle className="h-3.5 w-3.5 text-red-500" />}
+      {status === 'na' && <CheckCircle className="h-3.5 w-3.5 text-muted-foreground" />}
       <span className="text-muted-foreground">{label}</span>
     </span>
   );
 }
 
-function getTlsStatus(service: RegisteredService, certDomains: Set<string>): 'ok' | 'warning' | 'na' {
-  if (service.tls === 'passthrough' || service.backend.type === 'tcp-passthrough') return 'ok';
-  return certDomains.has(service.domain) ? 'ok' : 'warning';
+function getTlsStatus(service: RegisteredService, certDomains: Set<string>): 'ok' | 'error' | 'na' {
+  // Passthrough: Central doesn't handle TLS — grey (not applicable)
+  if (service.tls === 'passthrough' || service.backend.type === 'tcp-passthrough') return 'na';
+  // Terminate: Central handles TLS — green if cert exists, red if missing
+  return certDomains.has(service.domain) ? 'ok' : 'error';
 }
 
 function getProxyLabel(service: RegisteredService): string {