@skyhook-io/k8s-ui 1.2.4 → 1.3.0

package/src/components/shared/ResourceRendererDispatch.tsx

@@ -1,4 +1,5 @@
 import { clsx } from 'clsx'
+import { SEVERITY_BADGE } from '../../utils/badge-colors'
 import {
   getPodStatus,
   getWorkloadStatus,
@@ -550,9 +551,9 @@ export function getResourceStatus(kind: string, data: any): { text: string; colo
   // Contour HTTPProxy
   if (k === 'httpproxies') {
     const s = getHTTPProxyStatus(data)
-    if (s.status === 'healthy') return { text: s.label, color: 'bg-green-500/20 text-green-400' }
-    if (s.status === 'unhealthy') return { text: s.label, color: 'bg-red-500/20 text-red-400' }
-    if (s.status === 'degraded') return { text: s.label, color: 'bg-yellow-500/20 text-yellow-400' }
+    if (s.status === 'healthy') return { text: s.label, color: SEVERITY_BADGE.success }
+    if (s.status === 'unhealthy') return { text: s.label, color: SEVERITY_BADGE.error }
+    if (s.status === 'degraded') return { text: s.label, color: SEVERITY_BADGE.warning }
     return null
   }
 
@@ -587,9 +588,9 @@ export function getResourceStatus(kind: string, data: any): { text: string; colo
       const isWarning = warningPhases.includes(phase)
       return {
         text: phase,
-        color: isHealthy ? 'bg-green-500/20 text-green-400' :
-               isWarning ? 'bg-yellow-500/20 text-yellow-400' :
-               'bg-red-500/20 text-red-400'
+        color: isHealthy ? SEVERITY_BADGE.success :
+               isWarning ? SEVERITY_BADGE.warning :
+               SEVERITY_BADGE.error
       }
     }
 
@@ -601,7 +602,7 @@ export function getResourceStatus(kind: string, data: any): { text: string; colo
         const isReady = readyCondition.status === 'True'
         return {
           text: isReady ? 'Ready' : 'Not Ready',
-          color: isReady ? 'bg-green-500/20 text-green-400' : 'bg-yellow-500/20 text-yellow-400'
+          color: isReady ? SEVERITY_BADGE.success : SEVERITY_BADGE.warning
         }
       }
     }

package/src/components/topology/K8sResourceNode.tsx

@@ -317,13 +317,13 @@ export const K8sResourceNode = memo(function K8sResourceNode({
         <div
           className={clsx(
             'flex items-center gap-2 px-4 py-2 rounded-full',
-            'bg-blue-500/10 border border-blue-500/30',
-            'shadow-lg shadow-blue-500/20',
-            selected && 'ring-2 ring-blue-400'
+            'selection border border-skyhook-500/30',
+            'shadow-lg shadow-skyhook-500/20',
+            selected && 'ring-2 ring-skyhook-400'
           )}
         >
           <span className="topology-icon topology-icon-internet" style={{ width: 20, height: 20 }} />
-          <span className="text-sm font-medium text-blue-300">Internet</span>
+          <span className="text-sm font-medium text-skyhook-300">Internet</span>
           <span className="w-2 h-2 rounded-full bg-green-500" />
         </div>
         <Handle
@@ -347,7 +347,7 @@ export const K8sResourceNode = memo(function K8sResourceNode({
         className={clsx(
           'relative rounded-lg overflow-hidden',
           'bg-theme-surface topology-node-card',
-          selected && 'ring-2 ring-blue-400',
+          selected && 'ring-2 ring-skyhook-400',
           isSmallNode && 'opacity-90',
           // Status bar via CSS pseudo-element (defined in index.css)
           (status === 'healthy' || status === 'unknown') && 'topology-node-status-bar',

package/src/components/topology/TopologyControls.tsx

@@ -40,7 +40,7 @@ export function TopologyControls({
           onClick={() => onViewModeChange('resources')}
           className={`px-2.5 py-1 text-xs rounded-md transition-colors ${
             viewMode === 'resources'
-              ? 'bg-blue-500 text-theme-text-primary'
+              ? 'bg-skyhook-600 text-white'
               : 'text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-elevated'
           }`}
         >
@@ -50,7 +50,7 @@ export function TopologyControls({
           onClick={() => onViewModeChange('traffic')}
           className={`px-2.5 py-1 text-xs rounded-md transition-colors ${
             viewMode === 'traffic'
-              ? 'bg-blue-500 text-theme-text-primary'
+              ? 'bg-skyhook-600 text-white'
               : 'text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-elevated'
           }`}
         >

package/src/components/topology/TopologyGraph.tsx

@@ -12,6 +12,7 @@ import {
   type Node,
   type Edge,
   type NodeTypes,
+  type NodeChange,
   type Viewport,
   BackgroundVariant,
   MarkerType,
@@ -19,7 +20,7 @@ import {
 import '@xyflow/react/dist/style.css'
 import { toCanvas } from 'html-to-image'
 
-import { AlertTriangle, Download, Loader2, RotateCw, Shield } from 'lucide-react'
+import { AlertTriangle, Download, Loader2, Pause, Play, RotateCw, Shield } from 'lucide-react'
 import { useToast } from '../ui/Toast'
 import { useRegisterShortcuts } from '../../hooks/useKeyboardShortcuts'
 
@@ -156,6 +157,8 @@ interface TopologyGraphProps {
   selectedNodeId?: string
   /** Show image export button in controls. Default: true */
   showExportButton?: boolean
+  paused?: boolean
+  onTogglePause?: () => void
 }
 
 export function TopologyGraph({
@@ -166,10 +169,22 @@ export function TopologyGraph({
   onNodeClick,
   selectedNodeId,
   showExportButton = true,
+  paused = false,
+  onTogglePause,
 }: TopologyGraphProps) {
   const isTrafficView = viewMode === 'traffic'
-  const [nodes, setNodes, onNodesChange] = useNodesState([] as Node[])
+  const [nodes, setNodes, onNodesChangeBase] = useNodesState([] as Node[])
   const [edges, setEdges, onEdgesChange] = useEdgesState([] as Edge[])
+
+  // Wrap onNodesChange to track user-dragged positions so they survive re-layouts.
+  const onNodesChange = useCallback((changes: NodeChange<Node>[]) => {
+    onNodesChangeBase(changes)
+    for (const change of changes) {
+      if (change.type === 'position' && change.position) {
+        savedPositionsRef.current.set(change.id, change.position)
+      }
+    }
+  }, [onNodesChangeBase])
   const [collapsedGroups, setCollapsedGroups] = useState<Set<string>>(new Set())
   const [expandedPodGroups, setExpandedPodGroups] = useState<Set<string>>(new Set())
   const [layoutError, setLayoutError] = useState<string | null>(null)
@@ -177,6 +192,10 @@ export function TopologyGraph({
   const [isExporting, setIsExporting] = useState(false)
   const prevStructureRef = useRef<string>('')
   const layoutVersionRef = useRef(0) // Used to invalidate stale layout results
+  // Saved node positions for preservation across topology updates.
+  // Prevents every cluster change from re-running a full ELK layout (which shifts all nodes).
+  const savedPositionsRef = useRef<Map<string, { x: number; y: number }>>(new Map())
+  const prevRetryCountRef = useRef(0)
 
   // Toggle group collapse
   const handleToggleCollapse = useCallback((groupId: string) => {
@@ -373,6 +392,7 @@ export function TopologyGraph({
       setNodes([])
       setEdges([])
       prevStructureRef.current = ''
+      savedPositionsRef.current.clear() // Clear on context switch / topology reset
       return
     }
 
@@ -382,6 +402,20 @@ export function TopologyGraph({
       return
     }
 
+    // Detect explicit re-layout request (Retry button) — clear saved positions so
+    // ELK computes a fresh layout from scratch instead of preserving old positions.
+    const isRetry = layoutRetryCount !== prevRetryCountRef.current
+    if (isRetry) {
+      prevRetryCountRef.current = layoutRetryCount
+      savedPositionsRef.current.clear()
+    }
+
+    // For the initial layout (no saved positions yet) run ELK for all nodes.
+    // For subsequent updates, preserve existing positions — only new nodes get
+    // ELK-computed positions. This prevents the whole graph from shifting every
+    // time the cluster adds a new resource.
+    const isInitialLayout = savedPositionsRef.current.size === 0
+
     prevStructureRef.current = structureKey
 
     // Increment version to invalidate any previous in-flight layout
@@ -418,8 +452,29 @@ export function TopologyGraph({
       }
       setLayoutError(null)
 
+      // Preserve positions for nodes that already have a saved position (i.e. were
+      // present in a previous layout). New nodes use the ELK-computed position.
+      // This prevents the whole graph from shifting every time the topology changes.
+      // isInitialLayout is captured in the outer effect scope.
+      const positionedNodes = isInitialLayout
+        ? layoutedNodes
+        : layoutedNodes.map(node => {
+            const saved = savedPositionsRef.current.get(node.id)
+            return saved ? { ...node, position: saved } : node
+          })
+
+      // Update saved positions: add/overwrite with positions from this layout run.
+      // Remove stale entries for nodes no longer in the topology.
+      const currentIds = new Set(positionedNodes.map(n => n.id))
+      for (const id of savedPositionsRef.current.keys()) {
+        if (!currentIds.has(id)) savedPositionsRef.current.delete(id)
+      }
+      for (const node of positionedNodes) {
+        savedPositionsRef.current.set(node.id, node.position)
+      }
+
       // Add expand/collapse handlers to pod-related nodes
-      const nodesWithHandlers = layoutedNodes.map(node => {
+      const nodesWithHandlers = positionedNodes.map(node => {
         const isPodGroup = node.data?.kind === 'PodGroup'
         const nodeData = node.data?.nodeData as Record<string, unknown> | undefined
         const expandedFromGroup = nodeData?.expandedFromGroup as string | undefined
@@ -622,8 +677,17 @@ export function TopologyGraph({
           showInteractive={false}
         >
           {showExportButton && <ExportImageButton onExportingChange={setIsExporting} />}
+          {onTogglePause && (
+            <button
+              className={`react-flow__controls-button ${paused ? 'text-amber-400' : ''}`}
+              onClick={onTogglePause}
+              title={paused ? 'Resume live updates' : 'Pause live updates'}
+            >
+              {paused ? <Play className="w-3 h-3" /> : <Pause className="w-3 h-3" />}
+            </button>
+          )}
         </Controls>
-        <ViewportController structureKey={structureKey} />
+        <ViewportController viewMode={viewMode} layoutRetryCount={layoutRetryCount} />
       </ReactFlow>
     </ReactFlowProvider>
   )
@@ -818,7 +882,7 @@ function ExportImageButton({ onExportingChange }: { onExportingChange: (v: boole
               <button
                 key={mode}
                 onClick={() => setCaptureMode(mode)}
-                className={`flex-1 px-2 py-1.5 text-xs rounded transition-colors ${captureMode === mode ? 'bg-blue-600 text-white' : 'bg-theme-base text-theme-text-secondary hover:text-theme-text-primary border border-theme-border'}`}
+                className={`flex-1 px-2 py-1.5 text-xs rounded transition-colors ${captureMode === mode ? 'btn-brand' : 'bg-theme-base text-theme-text-secondary hover:text-theme-text-primary border border-theme-border'}`}
               >
                 {mode === 'full' ? 'Entire graph' : 'Visible area'}
               </button>
@@ -832,7 +896,7 @@ function ExportImageButton({ onExportingChange }: { onExportingChange: (v: boole
                   <button
                     key={f}
                     onClick={() => setFormat(f)}
-                    className={`flex-1 px-2 py-1.5 text-xs rounded transition-colors ${format === f ? 'bg-blue-600 text-white' : 'bg-theme-base text-theme-text-secondary hover:text-theme-text-primary border border-theme-border'}`}
+                    className={`flex-1 px-2 py-1.5 text-xs rounded transition-colors ${format === f ? 'btn-brand' : 'bg-theme-base text-theme-text-secondary hover:text-theme-text-primary border border-theme-border'}`}
                   >
                     {FORMAT_LABELS[f]}
                   </button>
@@ -880,7 +944,7 @@ function ExportImageButton({ onExportingChange }: { onExportingChange: (v: boole
             <button
               onClick={doExport}
               disabled={exporting}
-              className="flex-1 px-3 py-1.5 text-sm font-medium bg-blue-600 hover:bg-blue-700 text-white rounded transition-colors disabled:opacity-50 flex items-center justify-center gap-1.5"
+              className="flex-1 px-3 py-1.5 text-sm font-medium btn-brand rounded flex items-center justify-center gap-1.5"
             >
               {exporting ? <Loader2 className="w-3 h-3 animate-spin" /> : <Download className="w-3 h-3" />}
               Export
@@ -904,10 +968,17 @@ const VIEWPORT_ANIMATION_DURATION = 400
 
 // Inner component to handle animated viewport transitions and zoom-based CSS variables
 // Must be inside ReactFlow to use useReactFlow hook
-function ViewportController({ structureKey }: { structureKey: string }) {
+function ViewportController({
+  viewMode,
+  layoutRetryCount,
+}: {
+  viewMode: string
+  layoutRetryCount: number
+}) {
   const { fitView, zoomIn, zoomOut, setViewport, getViewport } = useReactFlow()
   const nodes = useNodes() // Reactive hook to watch node changes
-  const prevStructureKeyRef = useRef<string>('')
+  const prevViewModeRef = useRef<string>(viewMode)
+  const prevRetryCountRef = useRef(layoutRetryCount)
   const prevNodesLengthRef = useRef(0)
 
   // Topology keyboard shortcuts
@@ -978,34 +1049,29 @@ function ViewportController({ structureKey }: { structureKey: string }) {
     updateZoomOffset(getViewport())
   }, [updateZoomOffset, getViewport])
 
-  // Fit view when nodes become available or structure changes
-  // This handles both initial mount and view switching scenarios
+  // Fit view only on intentional changes: initial load, namespace/view switch, explicit retry.
+  // Background topology updates (new pods, status changes) must NOT trigger fitView —
+  // doing so would cause the viewport to zoom/pan every few seconds in active clusters.
   useEffect(() => {
-    const structureChanged = structureKey !== prevStructureKeyRef.current
     const nodesJustPopulated = prevNodesLengthRef.current === 0 && nodes.length > 0
+    const viewModeChanged = viewMode !== prevViewModeRef.current
+    const retryRequested = layoutRetryCount !== prevRetryCountRef.current
 
-    // Update refs
     prevNodesLengthRef.current = nodes.length
-    if (structureChanged) {
-      prevStructureKeyRef.current = structureKey
-    }
+    prevViewModeRef.current = viewMode
+    prevRetryCountRef.current = layoutRetryCount
 
-    // Fit view when:
-    // 1. Nodes just became available (were 0, now > 0) - handles initial mount/view switch
-    // 2. Structure changed AND nodes already exist - handles topology changes
-    if (nodesJustPopulated || (structureChanged && nodes.length > 0)) {
-      // Small delay to ensure DOM is updated
+    if (nodesJustPopulated || viewModeChanged || retryRequested) {
       const timeoutId = setTimeout(() => {
         fitView({
           padding: 0.15,
-          // No animation when nodes first appear, animate on subsequent structure changes
           duration: nodesJustPopulated ? 0 : VIEWPORT_ANIMATION_DURATION,
         })
       }, 10)
 
       return () => clearTimeout(timeoutId)
     }
-  }, [structureKey, nodes.length, fitView])
+  }, [viewMode, layoutRetryCount, nodes.length, fitView])
 
   return null
 }

package/src/components/topology/topology.css

@@ -14,7 +14,7 @@
 
 /* Topology node card styling */
 .topology-node-card {
-  border: 1px solid var(--topology-node-border);
+  border: 0.5px solid var(--topology-node-border);
   box-shadow: var(--topology-node-shadow);
 }
 

package/src/components/ui/Badge.tsx

@@ -0,0 +1,178 @@
+import { clsx } from 'clsx'
+import type { ReactNode } from 'react'
+
+// =============================================================================
+// BADGE COMPONENT — single source of truth for all badge rendering
+// All class names are STATIC STRINGS (required for Tailwind content scanning)
+// =============================================================================
+
+export type BadgeSeverity = 'success' | 'warning' | 'error' | 'info' | 'neutral'
+export type BadgeSize = 'sm' | 'default'
+
+interface BadgeProps {
+  /** Severity-based coloring (status badges) */
+  severity?: BadgeSeverity
+  /** K8s resource kind coloring (kind badges) */
+  kind?: string
+  /** Explicit color class override (bypasses severity/kind lookup) */
+  colorClass?: string
+  /** Size variant */
+  size?: BadgeSize
+  /** Additional classes */
+  className?: string
+  /** Click handler (renders as button) */
+  onClick?: () => void
+  /** Title/tooltip */
+  title?: string
+  children: ReactNode
+}
+
+// ---------------------------------------------------------------------------
+// SEVERITY COLORS — static strings for Tailwind scanning
+// ---------------------------------------------------------------------------
+const SEVERITY: Record<BadgeSeverity, string> = {
+  success: 'bg-emerald-100 text-emerald-700 border-emerald-300 dark:bg-emerald-950/50 dark:text-emerald-400 dark:border-emerald-700/40',
+  warning: 'bg-amber-100 text-amber-800 border-amber-300 dark:bg-amber-950/50 dark:text-amber-400 dark:border-amber-700/40',
+  error:   'bg-red-100 text-red-700 border-red-300 dark:bg-red-950/50 dark:text-red-400 dark:border-red-700/40',
+  info:    'bg-sky-100 text-sky-700 border-sky-300 dark:bg-sky-950/50 dark:text-sky-400 dark:border-sky-700/40',
+  neutral: 'bg-theme-hover/50 text-theme-text-secondary border-theme-border',
+}
+
+// ---------------------------------------------------------------------------
+// KIND COLORS — static strings, every K8s resource type
+// ---------------------------------------------------------------------------
+const KIND: Record<string, string> = {
+  // Workloads
+  Deployment:    'bg-emerald-100 text-emerald-700 border-emerald-300 dark:bg-emerald-950/50 dark:text-emerald-400 dark:border-emerald-700/40',
+  StatefulSet:   'bg-cyan-100 text-cyan-800 border-cyan-300 dark:bg-cyan-950/50 dark:text-cyan-400 dark:border-cyan-700/40',
+  DaemonSet:     'bg-teal-100 text-teal-800 border-teal-300 dark:bg-teal-950/50 dark:text-teal-400 dark:border-teal-700/40',
+  ReplicaSet:    'bg-green-100 text-green-800 border-green-300 dark:bg-green-950/50 dark:text-green-400 dark:border-green-700/40',
+  Pod:           'bg-lime-100 text-lime-800 border-lime-300 dark:bg-lime-950/50 dark:text-lime-300 dark:border-lime-700/40',
+  PodGroup:      'bg-lime-100 text-lime-800 border-lime-300 dark:bg-lime-950/50 dark:text-lime-300 dark:border-lime-700/40',
+  Rollout:       'bg-emerald-100 text-emerald-700 border-emerald-300 dark:bg-emerald-950/50 dark:text-emerald-400 dark:border-emerald-700/40',
+
+  // Networking
+  Service:       'bg-blue-100 text-blue-700 border-blue-300 dark:bg-blue-950/50 dark:text-blue-400 dark:border-blue-700/40',
+  Internet:      'bg-blue-100 text-blue-700 border-blue-300 dark:bg-blue-950/50 dark:text-blue-400 dark:border-blue-700/40',
+  Ingress:       'bg-violet-100 text-violet-700 border-violet-300 dark:bg-violet-950/50 dark:text-violet-400 dark:border-violet-700/40',
+  Gateway:       'bg-violet-100 text-violet-700 border-violet-300 dark:bg-violet-950/50 dark:text-violet-400 dark:border-violet-700/40',
+  HTTPRoute:     'bg-purple-100 text-purple-700 border-purple-300 dark:bg-purple-950/50 dark:text-purple-400 dark:border-purple-700/40',
+  GRPCRoute:     'bg-purple-100 text-purple-700 border-purple-300 dark:bg-purple-950/50 dark:text-purple-400 dark:border-purple-700/40',
+  TCPRoute:      'bg-purple-100 text-purple-700 border-purple-300 dark:bg-purple-950/50 dark:text-purple-400 dark:border-purple-700/40',
+  TLSRoute:      'bg-purple-100 text-purple-700 border-purple-300 dark:bg-purple-950/50 dark:text-purple-400 dark:border-purple-700/40',
+
+  // Config
+  ConfigMap:     'bg-amber-100 text-amber-800 border-amber-300 dark:bg-amber-950/50 dark:text-amber-300 dark:border-amber-700/40',
+  Secret:        'bg-red-100 text-red-700 border-red-300 dark:bg-red-950/50 dark:text-red-400 dark:border-red-700/40',
+
+  // Jobs
+  Job:           'bg-purple-100 text-purple-700 border-purple-300 dark:bg-purple-950/50 dark:text-purple-400 dark:border-purple-700/40',
+  CronJob:       'bg-purple-100 text-purple-700 border-purple-300 dark:bg-purple-950/50 dark:text-purple-400 dark:border-purple-700/40',
+
+  // Scaling & Storage
+  HorizontalPodAutoscaler: 'bg-pink-100 text-pink-800 border-pink-300 dark:bg-pink-950/50 dark:text-pink-300 dark:border-pink-700/40',
+  PersistentVolumeClaim:   'bg-cyan-100 text-cyan-800 border-cyan-300 dark:bg-cyan-950/50 dark:text-cyan-400 dark:border-cyan-700/40',
+  PodDisruptionBudget:     'bg-orange-100 text-orange-800 border-orange-300 dark:bg-orange-950/50 dark:text-orange-300 dark:border-orange-700/40',
+
+  // Cluster-scoped
+  Node:          'bg-sky-100 text-sky-700 border-sky-300 dark:bg-sky-950/50 dark:text-sky-400 dark:border-sky-700/40',
+  Namespace:     'bg-gray-100 text-gray-700 border-gray-300 dark:bg-gray-950/50 dark:text-gray-400 dark:border-gray-700/40',
+
+  // GitOps
+  Application:   'bg-orange-100 text-orange-800 border-orange-300 dark:bg-orange-950/50 dark:text-orange-300 dark:border-orange-700/40',
+  Kustomization: 'bg-indigo-100 text-indigo-700 border-indigo-300 dark:bg-indigo-950/50 dark:text-indigo-400 dark:border-indigo-700/40',
+  GitRepository: 'bg-indigo-100 text-indigo-700 border-indigo-300 dark:bg-indigo-950/50 dark:text-indigo-400 dark:border-indigo-700/40',
+  HelmRelease:   'bg-purple-100 text-purple-700 border-purple-300 dark:bg-purple-950/50 dark:text-purple-400 dark:border-purple-700/40',
+
+  // Knative
+  KnativeService:       'bg-fuchsia-100 text-fuchsia-700 border-fuchsia-300 dark:bg-fuchsia-950/50 dark:text-fuchsia-400 dark:border-fuchsia-700/40',
+  KnativeConfiguration: 'bg-fuchsia-100 text-fuchsia-700 border-fuchsia-300 dark:bg-fuchsia-950/50 dark:text-fuchsia-400 dark:border-fuchsia-700/40',
+  KnativeRevision:      'bg-fuchsia-100 text-fuchsia-700 border-fuchsia-300 dark:bg-fuchsia-950/50 dark:text-fuchsia-400 dark:border-fuchsia-700/40',
+  KnativeRoute:         'bg-fuchsia-100 text-fuchsia-700 border-fuchsia-300 dark:bg-fuchsia-950/50 dark:text-fuchsia-400 dark:border-fuchsia-700/40',
+  Broker:               'bg-fuchsia-100 text-fuchsia-700 border-fuchsia-300 dark:bg-fuchsia-950/50 dark:text-fuchsia-400 dark:border-fuchsia-700/40',
+  Trigger:              'bg-fuchsia-100 text-fuchsia-700 border-fuchsia-300 dark:bg-fuchsia-950/50 dark:text-fuchsia-400 dark:border-fuchsia-700/40',
+  PingSource:           'bg-fuchsia-100 text-fuchsia-700 border-fuchsia-300 dark:bg-fuchsia-950/50 dark:text-fuchsia-400 dark:border-fuchsia-700/40',
+  ApiServerSource:      'bg-fuchsia-100 text-fuchsia-700 border-fuchsia-300 dark:bg-fuchsia-950/50 dark:text-fuchsia-400 dark:border-fuchsia-700/40',
+  ContainerSource:      'bg-fuchsia-100 text-fuchsia-700 border-fuchsia-300 dark:bg-fuchsia-950/50 dark:text-fuchsia-400 dark:border-fuchsia-700/40',
+  SinkBinding:          'bg-fuchsia-100 text-fuchsia-700 border-fuchsia-300 dark:bg-fuchsia-950/50 dark:text-fuchsia-400 dark:border-fuchsia-700/40',
+  Channel:              'bg-fuchsia-100 text-fuchsia-700 border-fuchsia-300 dark:bg-fuchsia-950/50 dark:text-fuchsia-400 dark:border-fuchsia-700/40',
+
+  // Traefik
+  IngressRoute:         'bg-cyan-100 text-cyan-800 border-cyan-300 dark:bg-cyan-950/50 dark:text-cyan-400 dark:border-cyan-700/40',
+  IngressRouteTCP:      'bg-cyan-100 text-cyan-800 border-cyan-300 dark:bg-cyan-950/50 dark:text-cyan-400 dark:border-cyan-700/40',
+  IngressRouteUDP:      'bg-cyan-100 text-cyan-800 border-cyan-300 dark:bg-cyan-950/50 dark:text-cyan-400 dark:border-cyan-700/40',
+  Middleware:           'bg-cyan-100 text-cyan-800 border-cyan-300 dark:bg-cyan-950/50 dark:text-cyan-400 dark:border-cyan-700/40',
+  MiddlewareTCP:        'bg-cyan-100 text-cyan-800 border-cyan-300 dark:bg-cyan-950/50 dark:text-cyan-400 dark:border-cyan-700/40',
+  TraefikService:       'bg-cyan-100 text-cyan-800 border-cyan-300 dark:bg-cyan-950/50 dark:text-cyan-400 dark:border-cyan-700/40',
+  ServersTransport:     'bg-cyan-100 text-cyan-800 border-cyan-300 dark:bg-cyan-950/50 dark:text-cyan-400 dark:border-cyan-700/40',
+  ServersTransportTCP:  'bg-cyan-100 text-cyan-800 border-cyan-300 dark:bg-cyan-950/50 dark:text-cyan-400 dark:border-cyan-700/40',
+  TLSOption:            'bg-cyan-100 text-cyan-800 border-cyan-300 dark:bg-cyan-950/50 dark:text-cyan-400 dark:border-cyan-700/40',
+  TLSStore:             'bg-cyan-100 text-cyan-800 border-cyan-300 dark:bg-cyan-950/50 dark:text-cyan-400 dark:border-cyan-700/40',
+
+  // Contour
+  HTTPProxy:            'bg-violet-100 text-violet-700 border-violet-300 dark:bg-violet-950/50 dark:text-violet-400 dark:border-violet-700/40',
+
+  // Events
+  Event:                'bg-slate-100 text-slate-700 border-slate-300 dark:bg-slate-950/50 dark:text-slate-400 dark:border-slate-700/40',
+}
+
+const DEFAULT_KIND_COLOR = 'bg-fuchsia-50 text-fuchsia-700 border-fuchsia-200 dark:bg-fuchsia-950/40 dark:text-fuchsia-400 dark:border-fuchsia-800/40'
+
+// Structure classes
+const SIZE_CLASSES: Record<BadgeSize, string> = {
+  default: 'badge',
+  sm: 'badge-sm',
+}
+
+/** Resolve kind color with fuzzy matching for plural/lowercase forms */
+export function getKindColorClass(kind: string): string {
+  // Direct match
+  if (KIND[kind]) return KIND[kind]
+
+  // Fuzzy: try capitalizing
+  const capitalized = kind.charAt(0).toUpperCase() + kind.slice(1)
+  if (KIND[capitalized]) return KIND[capitalized]
+
+  // Fuzzy: strip trailing 's' for plural
+  const singular = kind.endsWith('s') && !kind.endsWith('ss') ? kind.slice(0, -1) : kind
+  const singularCap = singular.charAt(0).toUpperCase() + singular.slice(1)
+  if (KIND[singularCap]) return KIND[singularCap]
+
+  // Fuzzy: known plurals
+  const pluralMap: Record<string, string> = {
+    pods: 'Pod', deployments: 'Deployment', services: 'Service', ingresses: 'Ingress',
+    gateways: 'Gateway', configmaps: 'ConfigMap', secrets: 'Secret',
+    daemonsets: 'DaemonSet', statefulsets: 'StatefulSet', replicasets: 'ReplicaSet',
+    jobs: 'Job', cronjobs: 'CronJob', nodes: 'Node', namespaces: 'Namespace',
+    horizontalpodautoscalers: 'HorizontalPodAutoscaler',
+    persistentvolumeclaims: 'PersistentVolumeClaim',
+    poddisruptionbudgets: 'PodDisruptionBudget',
+    rollouts: 'Rollout', httproutes: 'HTTPRoute', grpcroutes: 'GRPCRoute',
+    events: 'Event', helmreleases: 'HelmRelease',
+  }
+  const mapped = pluralMap[kind.toLowerCase()]
+  if (mapped && KIND[mapped]) return KIND[mapped]
+
+  return DEFAULT_KIND_COLOR
+}
+
+export function getSeverityColorClass(severity: BadgeSeverity): string {
+  return SEVERITY[severity]
+}
+
+/**
+ * Badge component — the ONE source of truth for badge rendering.
+ * Use severity for status badges, kind for resource type badges, or colorClass for custom.
+ */
+export function Badge({ severity, kind, colorClass, size = 'default', className, onClick, title, children }: BadgeProps) {
+  const color = colorClass ?? (severity ? SEVERITY[severity] : kind ? getKindColorClass(kind) : '')
+  const cls = clsx(SIZE_CLASSES[size], color, className)
+
+  if (onClick) {
+    return <button onClick={onClick} className={cls} title={title}>{children}</button>
+  }
+  return <span className={cls} title={title}>{children}</span>
+}
+
+// Re-export the raw color maps for backwards compat (used by badge-colors.ts consumers)
+export { SEVERITY as BADGE_SEVERITY_COLORS, KIND as BADGE_KIND_COLORS }

package/src/components/ui/HealthRing.tsx

@@ -1,3 +1,5 @@
+import { useId } from 'react'
+
 interface Segment {
   value: number
   color: string
@@ -11,13 +13,29 @@ interface HealthRingProps {
 }
 
 export function HealthRing({ segments, size = 48, strokeWidth = 5, label }: HealthRingProps) {
+  const filterId = useId()
   const total = segments.reduce((sum, s) => sum + s.value, 0)
+
+  const radius = 40
+  const circumference = 2 * Math.PI * radius
+  // 270° arc = 75% of circumference
+  const arcLength = 0.75 * circumference
+  const gapLength = circumference - arcLength
+
   if (total === 0) {
     return (
       <svg width={size} height={size} viewBox="0 0 100 100" className="shrink-0">
-        <circle cx="50" cy="50" r="40" fill="none" stroke="currentColor" strokeWidth={strokeWidth} className="text-theme-border" />
+        {/* Background track (270° arc) */}
+        <circle
+          cx="50" cy="50" r={radius}
+          fill="none" stroke="currentColor" strokeWidth={strokeWidth}
+          strokeDasharray={`${arcLength} ${gapLength}`}
+          strokeLinecap="round"
+          transform="rotate(135 50 50)"
+          className="text-theme-border"
+        />
         {label && (
-          <text x="50" y="50" textAnchor="middle" dominantBaseline="central" className="fill-theme-text-tertiary text-[22px] font-semibold">
+          <text x="50" y="48" textAnchor="middle" dominantBaseline="central" className="fill-theme-text-tertiary text-[22px] font-semibold font-mono">
             0
           </text>
         )}
@@ -25,45 +43,62 @@ export function HealthRing({ segments, size = 48, strokeWidth = 5, label }: Heal
     )
   }
 
-  const radius = 40
-  const circumference = 2 * Math.PI * radius
-  let accumulatedOffset = 0
+  let accumulatedFraction = 0
 
-  // Rotate -90deg so arcs start at 12 o'clock
-  const arcs = segments
-    .filter(s => s.value > 0)
-    .map((seg) => {
-      const fraction = seg.value / total
-      const dashLength = fraction * circumference
-      const gapLength = circumference - dashLength
-      const offset = -accumulatedOffset * circumference
-      accumulatedOffset += fraction
-      return { color: seg.color, dashLength, gapLength, offset }
-    })
+  const visibleSegments = segments.filter(s => s.value > 0)
+  const arcs = visibleSegments.map((seg, i) => {
+    const fraction = seg.value / total
+    // Scale to 270° arc (75% of circumference)
+    const dashLength = fraction * arcLength
+    // Offset within the 270° arc range
+    const offset = -accumulatedFraction * arcLength
+    const isFirst = i === 0
+    const isLast = i === visibleSegments.length - 1
+    accumulatedFraction += fraction
+    return { color: seg.color, dashLength, offset, isFirst, isLast }
+  })
 
   return (
     <svg width={size} height={size} viewBox="0 0 100 100" className="shrink-0">
-      {/* Background ring */}
-      <circle cx="50" cy="50" r={radius} fill="none" stroke="currentColor" strokeWidth={strokeWidth} className="text-theme-border opacity-30" />
+      <defs>
+        <filter id={`arcglow-${filterId}`}>
+          <feGaussianBlur stdDeviation="2.5" result="blur"/>
+          <feMerge>
+            <feMergeNode in="blur"/>
+            <feMergeNode in="SourceGraphic"/>
+          </feMerge>
+        </filter>
+      </defs>
+      {/* Background track (270° arc) */}
+      <circle
+        cx="50" cy="50" r={radius}
+        fill="none" stroke="currentColor" strokeWidth={strokeWidth}
+        strokeDasharray={`${arcLength} ${gapLength}`}
+        strokeLinecap="round"
+        transform="rotate(135 50 50)"
+        className="text-theme-border opacity-30"
+      />
       {/* Segments */}
-      {arcs.map((arc, i) => (
-        <circle
-          key={i}
-          cx="50"
-          cy="50"
-          r={radius}
-          fill="none"
-          stroke={arc.color}
-          strokeWidth={strokeWidth}
-          strokeDasharray={`${arc.dashLength} ${arc.gapLength}`}
-          strokeDashoffset={arc.offset}
-          strokeLinecap="butt"
-          transform="rotate(-90 50 50)"
-        />
-      ))}
-      {/* Center label */}
+      <g filter={`url(#arcglow-${filterId})`}>
+        {arcs.map((arc, i) => (
+          <circle
+            key={i}
+            cx="50"
+            cy="50"
+            r={radius}
+            fill="none"
+            stroke={arc.color}
+            strokeWidth={strokeWidth}
+            strokeDasharray={`${arc.dashLength} ${circumference - arc.dashLength}`}
+            strokeDashoffset={arc.offset}
+            strokeLinecap={arc.isFirst || arc.isLast ? 'round' : 'butt'}
+            transform="rotate(135 50 50)"
+          />
+        ))}
+      </g>
+      {/* Center label — nudged up slightly for visual centering in 270° arc */}
       {label && (
-        <text x="50" y="50" textAnchor="middle" dominantBaseline="central" className="fill-theme-text-primary text-[22px] font-semibold">
+        <text x="50" y="48" textAnchor="middle" dominantBaseline="central" className="fill-theme-text-primary text-[22px] font-semibold font-mono">
           {label}
         </text>
       )}