@skyhook-io/k8s-ui 1.1.0 → 1.2.0

package/src/utils/badge-colors.ts

@@ -4,186 +4,192 @@
 // Kind badge colors - for K8s resource type badges
 export const KIND_BADGE_COLORS: Record<string, string> = {
   // Workload controllers
-  Deployment: 'bg-emerald-500/15 text-emerald-700 dark:bg-emerald-900/50 dark:text-emerald-300',
-  StatefulSet: 'bg-cyan-500/15 text-cyan-700 dark:bg-cyan-900/50 dark:text-cyan-300',
-  DaemonSet: 'bg-teal-500/15 text-teal-700 dark:bg-teal-900/50 dark:text-teal-300',
-  ReplicaSet: 'bg-green-500/15 text-green-700 dark:bg-green-900/50 dark:text-green-300',
-  Pod: 'bg-lime-500/15 text-lime-700 dark:bg-lime-900/50 dark:text-lime-300',
+  Deployment: 'bg-emerald-500/15 text-emerald-700 dark:bg-emerald-900/50 dark:text-emerald-400',
+  StatefulSet: 'bg-cyan-500/15 text-cyan-700 dark:bg-cyan-900/50 dark:text-cyan-400',
+  DaemonSet: 'bg-teal-500/15 text-teal-700 dark:bg-teal-900/50 dark:text-teal-400',
+  ReplicaSet: 'bg-green-500/15 text-green-700 dark:bg-green-900/50 dark:text-green-400',
+  Pod: 'bg-lime-500/15 text-lime-700 dark:bg-lime-900/50 dark:text-lime-400',
 
   // Networking
-  Service: 'bg-blue-500/15 text-blue-700 dark:bg-blue-900/50 dark:text-blue-300',
-  Ingress: 'bg-violet-500/15 text-violet-700 dark:bg-violet-900/50 dark:text-violet-300',
-  Gateway: 'bg-violet-500/15 text-violet-700 dark:bg-violet-900/50 dark:text-violet-300',
-  HTTPRoute: 'bg-purple-500/15 text-purple-700 dark:bg-purple-900/50 dark:text-purple-300',
-  GRPCRoute: 'bg-purple-500/15 text-purple-700 dark:bg-purple-900/50 dark:text-purple-300',
-  TCPRoute: 'bg-purple-500/15 text-purple-700 dark:bg-purple-900/50 dark:text-purple-300',
-  TLSRoute: 'bg-purple-500/15 text-purple-700 dark:bg-purple-900/50 dark:text-purple-300',
+  Service: 'bg-blue-500/15 text-blue-700 dark:bg-blue-900/50 dark:text-blue-400',
+  Ingress: 'bg-violet-500/15 text-violet-700 dark:bg-violet-900/50 dark:text-violet-400',
+  Gateway: 'bg-violet-500/15 text-violet-700 dark:bg-violet-900/50 dark:text-violet-400',
+  HTTPRoute: 'bg-purple-500/15 text-purple-700 dark:bg-purple-900/50 dark:text-purple-400',
+  GRPCRoute: 'bg-purple-500/15 text-purple-700 dark:bg-purple-900/50 dark:text-purple-400',
+  TCPRoute: 'bg-purple-500/15 text-purple-700 dark:bg-purple-900/50 dark:text-purple-400',
+  TLSRoute: 'bg-purple-500/15 text-purple-700 dark:bg-purple-900/50 dark:text-purple-400',
 
   // Config
-  ConfigMap: 'bg-amber-500/15 text-amber-700 dark:bg-amber-900/50 dark:text-amber-300',
-  Secret: 'bg-red-500/15 text-red-700 dark:bg-red-900/50 dark:text-red-300',
+  ConfigMap: 'bg-amber-500/15 text-amber-700 dark:bg-amber-900/50 dark:text-amber-400',
+  Secret: 'bg-red-500/15 text-red-800 dark:bg-red-900/50 dark:text-red-400',
 
   // Jobs
-  Job: 'bg-purple-500/15 text-purple-700 dark:bg-purple-900/50 dark:text-purple-300',
-  CronJob: 'bg-purple-500/15 text-purple-700 dark:bg-purple-900/50 dark:text-purple-300',
+  Job: 'bg-purple-500/15 text-purple-700 dark:bg-purple-900/50 dark:text-purple-400',
+  CronJob: 'bg-purple-500/15 text-purple-700 dark:bg-purple-900/50 dark:text-purple-400',
 
   // Autoscaling & Storage
-  HorizontalPodAutoscaler: 'bg-pink-500/15 text-pink-700 dark:bg-pink-900/50 dark:text-pink-300',
-  PersistentVolumeClaim: 'bg-cyan-500/15 text-cyan-700 dark:bg-cyan-900/50 dark:text-cyan-300',
+  HorizontalPodAutoscaler: 'bg-pink-500/15 text-pink-700 dark:bg-pink-900/50 dark:text-pink-400',
+  PersistentVolumeClaim: 'bg-cyan-500/15 text-cyan-700 dark:bg-cyan-900/50 dark:text-cyan-400',
 
   // Argo Rollouts
-  Rollout: 'bg-emerald-500/15 text-emerald-700 dark:bg-emerald-900/50 dark:text-emerald-300',
+  Rollout: 'bg-emerald-500/15 text-emerald-700 dark:bg-emerald-900/50 dark:text-emerald-400',
 
   // GitOps
-  Application: 'bg-orange-500/15 text-orange-700 dark:bg-orange-900/50 dark:text-orange-300',
-  Kustomization: 'bg-indigo-500/15 text-indigo-700 dark:bg-indigo-900/50 dark:text-indigo-300',
-  GitRepository: 'bg-indigo-500/15 text-indigo-700 dark:bg-indigo-900/50 dark:text-indigo-300',
+  Application: 'bg-orange-500/15 text-orange-700 dark:bg-orange-900/50 dark:text-orange-400',
+  Kustomization: 'bg-indigo-500/15 text-indigo-700 dark:bg-indigo-900/50 dark:text-indigo-400',
+  GitRepository: 'bg-indigo-500/15 text-indigo-700 dark:bg-indigo-900/50 dark:text-indigo-400',
 
   // Cluster-scoped
-  Node: 'bg-sky-500/15 text-sky-700 dark:bg-sky-900/50 dark:text-sky-300',
-  Namespace: 'bg-gray-500/15 text-gray-700 dark:bg-gray-900/50 dark:text-gray-300',
+  Node: 'bg-sky-500/15 text-sky-700 dark:bg-sky-900/50 dark:text-sky-400',
+  Namespace: 'bg-gray-500/15 text-gray-700 dark:bg-gray-900/50 dark:text-gray-400',
 
   // Knative Serving
-  KnativeService: 'bg-fuchsia-500/15 text-fuchsia-700 dark:bg-fuchsia-900/50 dark:text-fuchsia-300',
-  KnativeConfiguration: 'bg-fuchsia-500/15 text-fuchsia-700 dark:bg-fuchsia-900/50 dark:text-fuchsia-300',
-  KnativeRevision: 'bg-fuchsia-500/15 text-fuchsia-700 dark:bg-fuchsia-900/50 dark:text-fuchsia-300',
-  KnativeRoute: 'bg-fuchsia-500/15 text-fuchsia-700 dark:bg-fuchsia-900/50 dark:text-fuchsia-300',
+  KnativeService: 'bg-fuchsia-500/15 text-fuchsia-700 dark:bg-fuchsia-900/50 dark:text-fuchsia-400',
+  KnativeConfiguration: 'bg-fuchsia-500/15 text-fuchsia-700 dark:bg-fuchsia-900/50 dark:text-fuchsia-400',
+  KnativeRevision: 'bg-fuchsia-500/15 text-fuchsia-700 dark:bg-fuchsia-900/50 dark:text-fuchsia-400',
+  KnativeRoute: 'bg-fuchsia-500/15 text-fuchsia-700 dark:bg-fuchsia-900/50 dark:text-fuchsia-400',
 
   // Knative Eventing
-  Broker: 'bg-fuchsia-500/15 text-fuchsia-700 dark:bg-fuchsia-900/50 dark:text-fuchsia-300',
-  Trigger: 'bg-fuchsia-500/15 text-fuchsia-700 dark:bg-fuchsia-900/50 dark:text-fuchsia-300',
+  Broker: 'bg-fuchsia-500/15 text-fuchsia-700 dark:bg-fuchsia-900/50 dark:text-fuchsia-400',
+  Trigger: 'bg-fuchsia-500/15 text-fuchsia-700 dark:bg-fuchsia-900/50 dark:text-fuchsia-400',
 
   // Knative Sources
-  PingSource: 'bg-fuchsia-500/15 text-fuchsia-700 dark:bg-fuchsia-900/50 dark:text-fuchsia-300',
-  ApiServerSource: 'bg-fuchsia-500/15 text-fuchsia-700 dark:bg-fuchsia-900/50 dark:text-fuchsia-300',
-  ContainerSource: 'bg-fuchsia-500/15 text-fuchsia-700 dark:bg-fuchsia-900/50 dark:text-fuchsia-300',
-  SinkBinding: 'bg-fuchsia-500/15 text-fuchsia-700 dark:bg-fuchsia-900/50 dark:text-fuchsia-300',
-  Channel: 'bg-fuchsia-500/15 text-fuchsia-700 dark:bg-fuchsia-900/50 dark:text-fuchsia-300',
+  PingSource: 'bg-fuchsia-500/15 text-fuchsia-700 dark:bg-fuchsia-900/50 dark:text-fuchsia-400',
+  ApiServerSource: 'bg-fuchsia-500/15 text-fuchsia-700 dark:bg-fuchsia-900/50 dark:text-fuchsia-400',
+  ContainerSource: 'bg-fuchsia-500/15 text-fuchsia-700 dark:bg-fuchsia-900/50 dark:text-fuchsia-400',
+  SinkBinding: 'bg-fuchsia-500/15 text-fuchsia-700 dark:bg-fuchsia-900/50 dark:text-fuchsia-400',
+  Channel: 'bg-fuchsia-500/15 text-fuchsia-700 dark:bg-fuchsia-900/50 dark:text-fuchsia-400',
 
   // Traefik
-  IngressRoute: 'bg-cyan-500/15 text-cyan-700 dark:bg-cyan-900/50 dark:text-cyan-300',
-  IngressRouteTCP: 'bg-cyan-500/15 text-cyan-700 dark:bg-cyan-900/50 dark:text-cyan-300',
-  IngressRouteUDP: 'bg-cyan-500/15 text-cyan-700 dark:bg-cyan-900/50 dark:text-cyan-300',
-  Middleware: 'bg-cyan-500/15 text-cyan-700 dark:bg-cyan-900/50 dark:text-cyan-300',
-  MiddlewareTCP: 'bg-cyan-500/15 text-cyan-700 dark:bg-cyan-900/50 dark:text-cyan-300',
-  TraefikService: 'bg-cyan-500/15 text-cyan-700 dark:bg-cyan-900/50 dark:text-cyan-300',
-  ServersTransport: 'bg-cyan-500/15 text-cyan-700 dark:bg-cyan-900/50 dark:text-cyan-300',
-  ServersTransportTCP: 'bg-cyan-500/15 text-cyan-700 dark:bg-cyan-900/50 dark:text-cyan-300',
-  TLSOption: 'bg-cyan-500/15 text-cyan-700 dark:bg-cyan-900/50 dark:text-cyan-300',
-  TLSStore: 'bg-cyan-500/15 text-cyan-700 dark:bg-cyan-900/50 dark:text-cyan-300',
+  IngressRoute: 'bg-cyan-500/15 text-cyan-700 dark:bg-cyan-900/50 dark:text-cyan-400',
+  IngressRouteTCP: 'bg-cyan-500/15 text-cyan-700 dark:bg-cyan-900/50 dark:text-cyan-400',
+  IngressRouteUDP: 'bg-cyan-500/15 text-cyan-700 dark:bg-cyan-900/50 dark:text-cyan-400',
+  Middleware: 'bg-cyan-500/15 text-cyan-700 dark:bg-cyan-900/50 dark:text-cyan-400',
+  MiddlewareTCP: 'bg-cyan-500/15 text-cyan-700 dark:bg-cyan-900/50 dark:text-cyan-400',
+  TraefikService: 'bg-cyan-500/15 text-cyan-700 dark:bg-cyan-900/50 dark:text-cyan-400',
+  ServersTransport: 'bg-cyan-500/15 text-cyan-700 dark:bg-cyan-900/50 dark:text-cyan-400',
+  ServersTransportTCP: 'bg-cyan-500/15 text-cyan-700 dark:bg-cyan-900/50 dark:text-cyan-400',
+  TLSOption: 'bg-cyan-500/15 text-cyan-700 dark:bg-cyan-900/50 dark:text-cyan-400',
+  TLSStore: 'bg-cyan-500/15 text-cyan-700 dark:bg-cyan-900/50 dark:text-cyan-400',
+
+  // Contour
+  HTTPProxy: 'bg-violet-500/15 text-violet-700 dark:bg-violet-900/50 dark:text-violet-400',
 
   // Special
-  HelmRelease: 'bg-purple-500/20 text-purple-700 dark:text-purple-300',
-  Event: 'bg-slate-500/15 text-slate-700 dark:bg-slate-900/50 dark:text-slate-300',
+  HelmRelease: 'bg-purple-500/20 text-purple-700 dark:text-purple-400',
+  Event: 'bg-slate-500/15 text-slate-700 dark:bg-slate-900/50 dark:text-slate-400',
 }
 
 // Kind badge colors with border - for prominent badges in drawers/modals
 export const KIND_BADGE_BORDERED: Record<string, string> = {
   // Workload controllers
-  Deployment: 'bg-emerald-500/20 text-emerald-700 dark:text-emerald-300 border border-emerald-500/30',
-  StatefulSet: 'bg-cyan-500/20 text-cyan-700 dark:text-cyan-300 border border-cyan-500/30',
-  DaemonSet: 'bg-teal-500/20 text-teal-700 dark:text-teal-300 border border-teal-500/30',
-  ReplicaSet: 'bg-green-500/20 text-green-700 dark:text-green-300 border border-green-500/30',
-  Pod: 'bg-lime-500/20 text-lime-700 dark:text-lime-300 border border-lime-500/30',
-  PodGroup: 'bg-lime-500/20 text-lime-700 dark:text-lime-300 border border-lime-500/30',
+  Deployment: 'bg-emerald-500/20 text-emerald-700 dark:text-emerald-400 border border-emerald-500/30',
+  StatefulSet: 'bg-cyan-500/20 text-cyan-700 dark:text-cyan-400 border border-cyan-500/30',
+  DaemonSet: 'bg-teal-500/20 text-teal-700 dark:text-teal-400 border border-teal-500/30',
+  ReplicaSet: 'bg-green-500/20 text-green-700 dark:text-green-400 border border-green-500/30',
+  Pod: 'bg-lime-500/20 text-lime-700 dark:text-lime-400 border border-lime-500/30',
+  PodGroup: 'bg-lime-500/20 text-lime-700 dark:text-lime-400 border border-lime-500/30',
 
   // Networking
-  Internet: 'bg-blue-500/20 text-blue-700 dark:text-blue-300 border border-blue-500/30',
-  Service: 'bg-blue-500/20 text-blue-700 dark:text-blue-300 border border-blue-500/30',
-  Ingress: 'bg-violet-500/20 text-violet-700 dark:text-violet-300 border border-violet-500/30',
-  Gateway: 'bg-violet-500/20 text-violet-700 dark:text-violet-300 border border-violet-500/30',
-  HTTPRoute: 'bg-purple-500/20 text-purple-700 dark:text-purple-300 border border-purple-500/30',
-  GRPCRoute: 'bg-purple-500/20 text-purple-700 dark:text-purple-300 border border-purple-500/30',
-  TCPRoute: 'bg-purple-500/20 text-purple-700 dark:text-purple-300 border border-purple-500/30',
-  TLSRoute: 'bg-purple-500/20 text-purple-700 dark:text-purple-300 border border-purple-500/30',
+  Internet: 'bg-blue-500/20 text-blue-700 dark:text-blue-400 border border-blue-500/30',
+  Service: 'bg-blue-500/20 text-blue-700 dark:text-blue-400 border border-blue-500/30',
+  Ingress: 'bg-violet-500/20 text-violet-700 dark:text-violet-400 border border-violet-500/30',
+  Gateway: 'bg-violet-500/20 text-violet-700 dark:text-violet-400 border border-violet-500/30',
+  HTTPRoute: 'bg-purple-500/20 text-purple-700 dark:text-purple-400 border border-purple-500/30',
+  GRPCRoute: 'bg-purple-500/20 text-purple-700 dark:text-purple-400 border border-purple-500/30',
+  TCPRoute: 'bg-purple-500/20 text-purple-700 dark:text-purple-400 border border-purple-500/30',
+  TLSRoute: 'bg-purple-500/20 text-purple-700 dark:text-purple-400 border border-purple-500/30',
 
   // Config
-  ConfigMap: 'bg-amber-500/20 text-amber-700 dark:text-amber-300 border border-amber-500/30',
-  Secret: 'bg-red-500/20 text-red-700 dark:text-red-300 border border-red-500/30',
+  ConfigMap: 'bg-amber-500/20 text-amber-700 dark:text-amber-400 border border-amber-500/30',
+  Secret: 'bg-red-500/20 text-red-800 dark:text-red-400 border border-red-500/30',
 
   // Jobs
-  Job: 'bg-purple-500/20 text-purple-700 dark:text-purple-300 border border-purple-500/30',
-  CronJob: 'bg-purple-500/20 text-purple-700 dark:text-purple-300 border border-purple-500/30',
+  Job: 'bg-purple-500/20 text-purple-700 dark:text-purple-400 border border-purple-500/30',
+  CronJob: 'bg-purple-500/20 text-purple-700 dark:text-purple-400 border border-purple-500/30',
 
   // Autoscaling & Storage
-  HorizontalPodAutoscaler: 'bg-pink-500/20 text-pink-700 dark:text-pink-300 border border-pink-500/30',
-  PersistentVolumeClaim: 'bg-cyan-500/20 text-cyan-700 dark:text-cyan-300 border border-cyan-500/30',
+  HorizontalPodAutoscaler: 'bg-pink-500/20 text-pink-700 dark:text-pink-400 border border-pink-500/30',
+  PersistentVolumeClaim: 'bg-cyan-500/20 text-cyan-700 dark:text-cyan-400 border border-cyan-500/30',
 
   // Argo Rollouts
-  Rollout: 'bg-emerald-500/20 text-emerald-700 dark:text-emerald-300 border border-emerald-500/30',
+  Rollout: 'bg-emerald-500/20 text-emerald-700 dark:text-emerald-400 border border-emerald-500/30',
 
   // GitOps
-  Application: 'bg-orange-500/20 text-orange-700 dark:text-orange-300 border border-orange-500/30',
-  Kustomization: 'bg-indigo-500/20 text-indigo-700 dark:text-indigo-300 border border-indigo-500/30',
-  GitRepository: 'bg-indigo-500/20 text-indigo-700 dark:text-indigo-300 border border-indigo-500/30',
+  Application: 'bg-orange-500/20 text-orange-700 dark:text-orange-400 border border-orange-500/30',
+  Kustomization: 'bg-indigo-500/20 text-indigo-700 dark:text-indigo-400 border border-indigo-500/30',
+  GitRepository: 'bg-indigo-500/20 text-indigo-700 dark:text-indigo-400 border border-indigo-500/30',
 
   // Cluster-scoped
-  Node: 'bg-sky-500/20 text-sky-700 dark:text-sky-300 border border-sky-500/30',
-  Namespace: 'bg-gray-500/20 text-gray-700 dark:text-gray-300 border border-gray-500/30',
+  Node: 'bg-sky-500/20 text-sky-700 dark:text-sky-400 border border-sky-500/30',
+  Namespace: 'bg-gray-500/20 text-gray-700 dark:text-gray-400 border border-gray-500/30',
 
   // Knative
-  KnativeService: 'bg-fuchsia-500/20 text-fuchsia-700 dark:text-fuchsia-300 border border-fuchsia-500/30',
-  KnativeConfiguration: 'bg-fuchsia-500/20 text-fuchsia-700 dark:text-fuchsia-300 border border-fuchsia-500/30',
-  KnativeRevision: 'bg-fuchsia-500/20 text-fuchsia-700 dark:text-fuchsia-300 border border-fuchsia-500/30',
-  KnativeRoute: 'bg-fuchsia-500/20 text-fuchsia-700 dark:text-fuchsia-300 border border-fuchsia-500/30',
-  Broker: 'bg-fuchsia-500/20 text-fuchsia-700 dark:text-fuchsia-300 border border-fuchsia-500/30',
-  Trigger: 'bg-fuchsia-500/20 text-fuchsia-700 dark:text-fuchsia-300 border border-fuchsia-500/30',
-  PingSource: 'bg-fuchsia-500/20 text-fuchsia-700 dark:text-fuchsia-300 border border-fuchsia-500/30',
-  ApiServerSource: 'bg-fuchsia-500/20 text-fuchsia-700 dark:text-fuchsia-300 border border-fuchsia-500/30',
-  ContainerSource: 'bg-fuchsia-500/20 text-fuchsia-700 dark:text-fuchsia-300 border border-fuchsia-500/30',
-  SinkBinding: 'bg-fuchsia-500/20 text-fuchsia-700 dark:text-fuchsia-300 border border-fuchsia-500/30',
-  Channel: 'bg-fuchsia-500/20 text-fuchsia-700 dark:text-fuchsia-300 border border-fuchsia-500/30',
+  KnativeService: 'bg-fuchsia-500/20 text-fuchsia-700 dark:text-fuchsia-400 border border-fuchsia-500/30',
+  KnativeConfiguration: 'bg-fuchsia-500/20 text-fuchsia-700 dark:text-fuchsia-400 border border-fuchsia-500/30',
+  KnativeRevision: 'bg-fuchsia-500/20 text-fuchsia-700 dark:text-fuchsia-400 border border-fuchsia-500/30',
+  KnativeRoute: 'bg-fuchsia-500/20 text-fuchsia-700 dark:text-fuchsia-400 border border-fuchsia-500/30',
+  Broker: 'bg-fuchsia-500/20 text-fuchsia-700 dark:text-fuchsia-400 border border-fuchsia-500/30',
+  Trigger: 'bg-fuchsia-500/20 text-fuchsia-700 dark:text-fuchsia-400 border border-fuchsia-500/30',
+  PingSource: 'bg-fuchsia-500/20 text-fuchsia-700 dark:text-fuchsia-400 border border-fuchsia-500/30',
+  ApiServerSource: 'bg-fuchsia-500/20 text-fuchsia-700 dark:text-fuchsia-400 border border-fuchsia-500/30',
+  ContainerSource: 'bg-fuchsia-500/20 text-fuchsia-700 dark:text-fuchsia-400 border border-fuchsia-500/30',
+  SinkBinding: 'bg-fuchsia-500/20 text-fuchsia-700 dark:text-fuchsia-400 border border-fuchsia-500/30',
+  Channel: 'bg-fuchsia-500/20 text-fuchsia-700 dark:text-fuchsia-400 border border-fuchsia-500/30',
 
   // Traefik
-  IngressRoute: 'bg-cyan-500/20 text-cyan-700 dark:text-cyan-300 border border-cyan-500/30',
-  IngressRouteTCP: 'bg-cyan-500/20 text-cyan-700 dark:text-cyan-300 border border-cyan-500/30',
-  IngressRouteUDP: 'bg-cyan-500/20 text-cyan-700 dark:text-cyan-300 border border-cyan-500/30',
-  Middleware: 'bg-cyan-500/20 text-cyan-700 dark:text-cyan-300 border border-cyan-500/30',
-  MiddlewareTCP: 'bg-cyan-500/20 text-cyan-700 dark:text-cyan-300 border border-cyan-500/30',
-  TraefikService: 'bg-cyan-500/20 text-cyan-700 dark:text-cyan-300 border border-cyan-500/30',
-  ServersTransport: 'bg-cyan-500/20 text-cyan-700 dark:text-cyan-300 border border-cyan-500/30',
-  ServersTransportTCP: 'bg-cyan-500/20 text-cyan-700 dark:text-cyan-300 border border-cyan-500/30',
-  TLSOption: 'bg-cyan-500/20 text-cyan-700 dark:text-cyan-300 border border-cyan-500/30',
-  TLSStore: 'bg-cyan-500/20 text-cyan-700 dark:text-cyan-300 border border-cyan-500/30',
+  IngressRoute: 'bg-cyan-500/20 text-cyan-700 dark:text-cyan-400 border border-cyan-500/30',
+  IngressRouteTCP: 'bg-cyan-500/20 text-cyan-700 dark:text-cyan-400 border border-cyan-500/30',
+  IngressRouteUDP: 'bg-cyan-500/20 text-cyan-700 dark:text-cyan-400 border border-cyan-500/30',
+  Middleware: 'bg-cyan-500/20 text-cyan-700 dark:text-cyan-400 border border-cyan-500/30',
+  MiddlewareTCP: 'bg-cyan-500/20 text-cyan-700 dark:text-cyan-400 border border-cyan-500/30',
+  TraefikService: 'bg-cyan-500/20 text-cyan-700 dark:text-cyan-400 border border-cyan-500/30',
+  ServersTransport: 'bg-cyan-500/20 text-cyan-700 dark:text-cyan-400 border border-cyan-500/30',
+  ServersTransportTCP: 'bg-cyan-500/20 text-cyan-700 dark:text-cyan-400 border border-cyan-500/30',
+  TLSOption: 'bg-cyan-500/20 text-cyan-700 dark:text-cyan-400 border border-cyan-500/30',
+  TLSStore: 'bg-cyan-500/20 text-cyan-700 dark:text-cyan-400 border border-cyan-500/30',
+
+  // Contour
+  HTTPProxy: 'bg-violet-500/20 text-violet-700 dark:text-violet-400 border border-violet-500/30',
 }
 
 // Event type colors - for K8s event types (Normal, Warning)
 export const EVENT_TYPE_COLORS: Record<string, string> = {
-  Warning: 'bg-amber-500/20 text-amber-700 dark:text-amber-300',
-  Normal: 'bg-green-500/20 text-green-700 dark:text-green-300',
+  Warning: 'bg-amber-500/20 text-amber-700 dark:text-amber-400',
+  Normal: 'bg-green-500/20 text-green-700 dark:text-green-400',
 }
 
 // Operation colors - for change events (add, update, delete)
 export const OPERATION_COLORS: Record<string, string> = {
-  add: 'text-green-700 dark:text-green-300',
-  update: 'text-blue-700 dark:text-blue-300',
-  delete: 'text-red-700 dark:text-red-300',
+  add: 'text-green-700 dark:text-green-400',
+  update: 'text-blue-700 dark:text-blue-400',
+  delete: 'text-red-800 dark:text-red-400',
 }
 
 // Operation background colors - for badges with background
 export const OPERATION_BADGE_COLORS: Record<string, string> = {
-  add: 'bg-green-500/20 text-green-700 dark:text-green-300',
-  update: 'bg-blue-500/20 text-blue-700 dark:text-blue-300',
-  delete: 'bg-red-500/20 text-red-700 dark:text-red-300',
+  add: 'bg-green-500/20 text-green-700 dark:text-green-400',
+  update: 'bg-blue-500/20 text-blue-700 dark:text-blue-400',
+  delete: 'bg-red-500/20 text-red-800 dark:text-red-400',
 }
 
 // Health badge colors - for health state indicators
 export const HEALTH_BADGE_COLORS: Record<string, string> = {
-  healthy: 'bg-green-500/20 text-green-700 dark:text-green-300',
-  degraded: 'bg-yellow-500/20 text-yellow-700 dark:text-yellow-300',
-  unhealthy: 'bg-red-500/20 text-red-700 dark:text-red-300',
+  healthy: 'bg-green-500/20 text-green-700 dark:text-green-400',
+  degraded: 'bg-yellow-500/20 text-yellow-700 dark:text-yellow-400',
+  unhealthy: 'bg-red-500/20 text-red-800 dark:text-red-400',
   unknown: 'bg-theme-hover/50 text-theme-text-secondary',
 }
 
 // Helm release status colors
 export const HELM_STATUS_COLORS: Record<string, string> = {
-  deployed: 'bg-green-500/20 text-green-700 dark:text-green-300',
+  deployed: 'bg-green-500/20 text-green-700 dark:text-green-400',
   superseded: 'bg-theme-hover/50 text-theme-text-secondary',
-  failed: 'bg-red-500/20 text-red-700 dark:text-red-300',
-  'pending-install': 'bg-yellow-500/20 text-yellow-700 dark:text-yellow-300',
-  'pending-upgrade': 'bg-yellow-500/20 text-yellow-700 dark:text-yellow-300',
-  'pending-rollback': 'bg-yellow-500/20 text-yellow-700 dark:text-yellow-300',
-  uninstalling: 'bg-orange-500/20 text-orange-700 dark:text-orange-300',
+  failed: 'bg-red-500/20 text-red-800 dark:text-red-400',
+  'pending-install': 'bg-yellow-500/20 text-yellow-700 dark:text-yellow-400',
+  'pending-upgrade': 'bg-yellow-500/20 text-yellow-700 dark:text-yellow-400',
+  'pending-rollback': 'bg-yellow-500/20 text-yellow-700 dark:text-yellow-400',
+  uninstalling: 'bg-orange-500/20 text-orange-700 dark:text-orange-400',
   uninstalled: 'bg-theme-hover/50 text-theme-text-secondary',
 }
 
@@ -196,19 +202,19 @@ export const DEFAULT_BADGE_COLOR = 'bg-theme-elevated text-theme-text-secondary'
 
 // Severity badge colors - with background (for badges, pills, tags)
 export const SEVERITY_BADGE = {
-  success: 'bg-green-500/20 text-green-700 dark:text-green-300',
-  warning: 'bg-amber-500/20 text-amber-700 dark:text-amber-300',
-  error: 'bg-red-500/20 text-red-700 dark:text-red-300',
-  info: 'bg-blue-500/20 text-blue-700 dark:text-blue-300',
+  success: 'bg-green-500/20 text-green-700 dark:text-green-400',
+  warning: 'bg-amber-500/20 text-amber-700 dark:text-amber-400',
+  error: 'bg-red-500/20 text-red-800 dark:text-red-400',
+  info: 'bg-blue-500/20 text-blue-700 dark:text-blue-400',
   neutral: 'bg-theme-hover/50 text-theme-text-secondary',
 } as const
 
 // Severity text colors - without background (for inline text, icons)
 export const SEVERITY_TEXT = {
-  success: 'text-green-700 dark:text-green-300',
-  warning: 'text-amber-700 dark:text-amber-300',
-  error: 'text-red-700 dark:text-red-300',
-  info: 'text-blue-700 dark:text-blue-300',
+  success: 'text-green-700 dark:text-green-400',
+  warning: 'text-amber-700 dark:text-amber-400',
+  error: 'text-red-800 dark:text-red-400',
+  info: 'text-blue-700 dark:text-blue-400',
   neutral: 'text-theme-text-secondary',
 } as const
 
@@ -232,10 +238,11 @@ export const SEVERITY_BORDER = {
 
 // Combined severity styles - badge with border (for prominent indicators)
 export const SEVERITY_BADGE_BORDERED = {
-  success: 'bg-green-500/20 text-green-700 dark:text-green-300 border border-green-500/30',
-  warning: 'bg-amber-500/20 text-amber-700 dark:text-amber-300 border border-amber-500/30',
-  error: 'bg-red-500/20 text-red-700 dark:text-red-300 border border-red-500/30',
-  info: 'bg-blue-500/20 text-blue-700 dark:text-blue-300 border border-blue-500/30',
+  success: 'bg-green-500/20 text-green-700 dark:text-green-400 border border-green-500/30',
+  warning: 'bg-amber-500/20 text-amber-700 dark:text-amber-400 border border-amber-500/30',
+  error: 'bg-red-500/20 text-red-800 dark:text-red-400 border border-red-500/30',
+  info: 'bg-blue-500/20 text-blue-700 dark:text-blue-400 border border-blue-500/30',
+  debug: 'bg-gray-500/15 text-gray-600 dark:text-gray-400 border border-gray-400/30 dark:border-gray-500/30',
   neutral: 'bg-theme-hover/50 text-theme-text-secondary border border-theme-border',
 } as const
 
@@ -397,3 +404,31 @@ export function getHelmStatusColor(status: string): string {
   const statusLower = status.toLowerCase()
   return HELM_STATUS_COLORS[statusLower] || 'bg-theme-hover/50 text-theme-text-secondary'
 }
+
+// =============================================================================
+// VULNERABILITY SEVERITY COLORS - for Trivy and other security scanners
+// =============================================================================
+
+export const VULN_SEVERITY_BADGE: Record<string, string> = {
+  CRITICAL: 'bg-red-500/20 text-red-800 dark:text-red-400',
+  HIGH: 'bg-orange-500/20 text-orange-700 dark:text-orange-400',
+  MEDIUM: 'bg-yellow-500/20 text-yellow-700 dark:text-yellow-400',
+  LOW: 'bg-blue-500/20 text-blue-700 dark:text-blue-400',
+  UNKNOWN: 'bg-gray-500/20 text-gray-600 dark:text-gray-400',
+}
+
+export const VULN_SEVERITY_BAR: Record<string, string> = {
+  CRITICAL: 'bg-red-500',
+  HIGH: 'bg-orange-500',
+  MEDIUM: 'bg-yellow-500',
+  LOW: 'bg-blue-500',
+  UNKNOWN: 'bg-gray-500',
+}
+
+export const VULN_SEVERITY_TEXT: Record<string, string> = {
+  CRITICAL: 'text-red-800 dark:text-red-400',
+  HIGH: 'text-orange-700 dark:text-orange-400',
+  MEDIUM: 'text-yellow-700 dark:text-yellow-400',
+  LOW: 'text-blue-700 dark:text-blue-400',
+  UNKNOWN: 'text-gray-600 dark:text-gray-400',
+}

package/src/utils/log-format.ts

@@ -105,50 +105,56 @@ const ANSI_256_COLORS: string[] = (() => {
 })()
 
 // ANSI SGR (Select Graphic Rendition) code → CSS style mapping.
-// Colors are chosen to be legible on a dark background (terminal-standard palette).
+// Uses CSS custom properties from variables.css for theme-aware light/dark colors.
 const SGR_STYLES: Record<number, string> = {
   1: 'font-weight:bold',
   2: 'opacity:0.6',
   3: 'font-style:italic',
   4: 'text-decoration:underline',
   // Standard foreground colors (30-37)
-  30: 'color:#4c4c4c',
-  31: 'color:#cd3131',
-  32: 'color:#0dbc79',
-  33: 'color:#e5e510',
-  34: 'color:#2472c8',
-  35: 'color:#bc3fbc',
-  36: 'color:#11a8cd',
-  37: 'color:#e5e5e5',
+  30: 'color:var(--ansi-black)',
+  31: 'color:var(--ansi-red)',
+  32: 'color:var(--ansi-green)',
+  33: 'color:var(--ansi-yellow)',
+  34: 'color:var(--ansi-blue)',
+  35: 'color:var(--ansi-magenta)',
+  36: 'color:var(--ansi-cyan)',
+  37: 'color:var(--ansi-white)',
   // Standard background colors (40-47)
-  40: 'background-color:#4c4c4c',
-  41: 'background-color:#cd3131',
-  42: 'background-color:#0dbc79',
-  43: 'background-color:#e5e510',
-  44: 'background-color:#2472c8',
-  45: 'background-color:#bc3fbc',
-  46: 'background-color:#11a8cd',
-  47: 'background-color:#e5e5e5',
+  40: 'background-color:var(--ansi-black)',
+  41: 'background-color:var(--ansi-red)',
+  42: 'background-color:var(--ansi-green)',
+  43: 'background-color:var(--ansi-yellow)',
+  44: 'background-color:var(--ansi-blue)',
+  45: 'background-color:var(--ansi-magenta)',
+  46: 'background-color:var(--ansi-cyan)',
+  47: 'background-color:var(--ansi-white)',
   // Bright foreground colors (90-97)
-  90: 'color:#767676',
-  91: 'color:#f14c4c',
-  92: 'color:#23d18b',
-  93: 'color:#f5f543',
-  94: 'color:#3b8eea',
-  95: 'color:#d670d6',
-  96: 'color:#29b8db',
-  97: 'color:#e5e5e5',
+  90: 'color:var(--ansi-bright-black)',
+  91: 'color:var(--ansi-bright-red)',
+  92: 'color:var(--ansi-bright-green)',
+  93: 'color:var(--ansi-bright-yellow)',
+  94: 'color:var(--ansi-bright-blue)',
+  95: 'color:var(--ansi-bright-magenta)',
+  96: 'color:var(--ansi-bright-cyan)',
+  97: 'color:var(--ansi-bright-white)',
   // Bright background colors (100-107)
-  100: 'background-color:#767676',
-  101: 'background-color:#f14c4c',
-  102: 'background-color:#23d18b',
-  103: 'background-color:#f5f543',
-  104: 'background-color:#3b8eea',
-  105: 'background-color:#d670d6',
-  106: 'background-color:#29b8db',
-  107: 'background-color:#e5e5e5',
+  100: 'background-color:var(--ansi-bright-black)',
+  101: 'background-color:var(--ansi-bright-red)',
+  102: 'background-color:var(--ansi-bright-green)',
+  103: 'background-color:var(--ansi-bright-yellow)',
+  104: 'background-color:var(--ansi-bright-blue)',
+  105: 'background-color:var(--ansi-bright-magenta)',
+  106: 'background-color:var(--ansi-bright-cyan)',
+  107: 'background-color:var(--ansi-bright-white)',
 }
 
+// Maps 256-color palette indices 0-15 to CSS variable names for theme-aware rendering
+const ANSI_16_NAMES = [
+  'black', 'red', 'green', 'yellow', 'blue', 'magenta', 'cyan', 'white',
+  'bright-black', 'bright-red', 'bright-green', 'bright-yellow', 'bright-blue', 'bright-magenta', 'bright-cyan', 'bright-white',
+]
+
 /**
  * Resolve an array of SGR codes to a CSS style string.
  * Handles 256-color (38;5;N / 48;5;N) sequences.
@@ -174,7 +180,10 @@ function resolveSgrStyles(codes: number[]): string {
     // 256-color foreground: 38;5;N
     if (codes[i] === 38 && codes[i + 1] === 5 && codes[i + 2] !== undefined) {
       const colorIdx = codes[i + 2]
-      if (colorIdx >= 0 && colorIdx < 256) {
+      if (colorIdx >= 0 && colorIdx < 16) {
+        // Map 256-color indices 0-15 to theme-aware CSS variables
+        parts.push(`color:var(--ansi-${ANSI_16_NAMES[colorIdx]})`)
+      } else if (colorIdx < 256) {
         parts.push(`color:${ANSI_256_COLORS[colorIdx]}`)
       }
       i += 3
@@ -183,7 +192,9 @@ function resolveSgrStyles(codes: number[]): string {
     // 256-color background: 48;5;N
     if (codes[i] === 48 && codes[i + 1] === 5 && codes[i + 2] !== undefined) {
       const colorIdx = codes[i + 2]
-      if (colorIdx >= 0 && colorIdx < 256) {
+      if (colorIdx >= 0 && colorIdx < 16) {
+        parts.push(`background-color:var(--ansi-${ANSI_16_NAMES[colorIdx]})`)
+      } else if (colorIdx < 256) {
         parts.push(`background-color:${ANSI_256_COLORS[colorIdx]}`)
       }
       i += 3
@@ -280,6 +291,87 @@ export function parseLogRange(logRange: string): { tailLines?: number; sinceSeco
   return { tailLines: Number(logRange) }
 }
 
+// Syntax highlight colors shared between JSON and logfmt rendering
+export const SYNTAX_COLOR_KEY = '#7cacf8'
+export const SYNTAX_COLOR_STRING = '#73c991'
+const SYNTAX_COLOR_NUMBER = '#e5c07b'
+const SYNTAX_COLOR_BOOLEAN = '#c678dd'
+const SYNTAX_COLOR_NULL = '#808080'
+
+/**
+ * Syntax-highlight a pretty-printed JSON string for HTML display.
+ * Wraps keys, string values, numbers, booleans, and null in colored spans.
+ * Applies HTML escaping internally — do not pre-escape the input.
+ */
+export function highlightJson(json: string): string {
+  const escaped = escapeHtml(json)
+  // Single-pass tokenizer: matches all JSON tokens at once so content inside strings
+  // is consumed and can't be re-matched by number/boolean/null patterns.
+  const tokenRe = /("(?:\\.|[^"\\])*")\s*:|("(?:\\.|[^"\\])*")|(-?\b\d+(?:\.\d+)?(?:[eE][+-]?\d+)?\b)|\b(true|false)\b|\b(null)\b/g
+  return escaped.replace(tokenRe, (match, key, str, num, bool, nil) => {
+    if (key) return `<span style="color:${SYNTAX_COLOR_KEY}">${key}</span>:`
+    if (str) return `<span style="color:${SYNTAX_COLOR_STRING}">${str}</span>`
+    if (num) return `<span style="color:${SYNTAX_COLOR_NUMBER}">${num}</span>`
+    if (bool) return `<span style="color:${SYNTAX_COLOR_BOOLEAN}">${bool}</span>`
+    if (nil) return `<span style="color:${SYNTAX_COLOR_NULL}">${nil}</span>`
+    return match
+  })
+}
+
+/**
+ * Unescape common escape sequences within JSON string values.
+ * Converts literal \n, \t, \r\n in pretty-printed JSON to real whitespace,
+ * making stack traces and multi-line messages readable in the expanded view.
+ */
+export function unescapeJsonStrings(text: string): string {
+  return text.replace(/"(?:[^"\\]|\\.)*"/g, (match) => {
+    return match
+      .replace(/\\r\\n/g, '\r\n')
+      .replace(/\\n/g, '\n')
+      .replace(/\\t/g, '\t')
+  })
+}
+
+// logfmt detection and parsing
+
+const LOGFMT_PAIR_RE = /(?:^|\s)([a-zA-Z_][\w.]*)=((?:"(?:[^"\\]|\\.)*")|(?:[^\s]*))/g
+
+/**
+ * Detect if a log line is in logfmt format (key=value pairs).
+ * Requires at least 3 pairs AND that the matched pairs cover most of the line,
+ * to avoid false positives on prose text that happens to contain a few key=value fragments.
+ */
+export function isLogfmt(content: string): boolean {
+  const trimmed = content.trimStart()
+  if (trimmed[0] === '{') return false
+  const matches = trimmed.match(LOGFMT_PAIR_RE)
+  if (!matches || matches.length < 3) return false
+  // Check that key=value pairs cover at least 60% of the line length
+  const matchedLength = matches.reduce((sum, m) => sum + m.trim().length, 0)
+  return matchedLength / trimmed.length >= 0.6
+}
+
+/**
+ * Parse a logfmt line into a key-value record.
+ * Handles quoted values with escape sequences.
+ */
+export function parseLogfmt(content: string): Record<string, string> | null {
+  const result: Record<string, string> = {}
+  let count = 0
+  let match: RegExpExecArray | null
+  const re = new RegExp(LOGFMT_PAIR_RE.source, 'g')
+  while ((match = re.exec(content)) !== null) {
+    const key = match[1]
+    let val = match[2]
+    if (val.startsWith('"') && val.endsWith('"')) {
+      val = val.slice(1, -1).replace(/\\"/g, '"').replace(/\\n/g, '\n').replace(/\\t/g, '\t')
+    }
+    result[key] = val
+    count++
+  }
+  return count >= 2 ? result : null
+}
+
 /**
  * Handle SSE error events from log streams.
  * Parses server-sent error data and logs it, then calls onClose.