@skyhook-io/k8s-ui 1.1.0 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/k8s-ui",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/skyhook-io/radar",
@@ -19,10 +19,15 @@
     "./resources": "./src/components/resources/index.ts",
     "./logs": "./src/components/logs/index.ts",
     "./timeline": "./src/components/timeline/index.ts",
-    "./topology": "./src/components/topology/index.ts"
+    "./topology": "./src/components/topology/index.ts",
+    "./theme/variables.css": "./src/theme/variables.css",
+    "./theme/tailwind-theme.css": "./src/theme/tailwind-theme.css",
+    "./theme": "./src/theme/index.ts",
+    "./topology.css": "./src/components/topology/topology.css"
   },
   "scripts": {
     "tsc": "tsc --noEmit",
+    "test": "vitest run",
     "format": "prettier --write \"src/**/*.{ts,tsx}\""
   },
   "dependencies": {
@@ -59,6 +64,7 @@
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "typescript": "^5.9.3",
+    "vitest": "^4.0.18",
     "yaml": "^2.7.1"
   }
 }

package/src/components/dock/BottomDock.tsx

@@ -86,8 +86,8 @@ export function BottomDock({ renderTabContent, leftOffset = 0 }: BottomDockProps
 
   return (
     <div
-      className="fixed bottom-0 right-0 bg-theme-base border-t border-theme-border flex flex-col z-40"
-      style={{ height: effectiveHeight, left: leftOffset, transition: `height ${DURATION_DOCK}ms ease-out, left ${DURATION_DOCK}ms ease-out` }}
+      className="fixed bottom-0 right-0 bg-theme-base border-t border-theme-border flex flex-col z-40 overflow-hidden"
+      style={{ height: effectiveHeight, left: leftOffset, transition: `height ${DURATION_DOCK}ms cubic-bezier(0.4, 0, 0.2, 1), left ${DURATION_DOCK}ms ease-out` }}
     >
       {isExpanded && !isMaximized && (
         <div
@@ -149,18 +149,16 @@ export function BottomDock({ renderTabContent, leftOffset = 0 }: BottomDockProps
         </div>
       </div>
 
-      {isExpanded && (
-        <div className="flex-1 overflow-hidden w-full relative">
-          {tabs.map(tab => (
-            <div
-              key={tab.id}
-              className={tab.id === activeTabId ? 'absolute inset-0' : 'absolute inset-0 invisible'}
-            >
-              {renderTabContent(tab, tab.id === activeTabId)}
-            </div>
-          ))}
-        </div>
-      )}
+      <div className="flex-1 overflow-hidden w-full relative">
+        {tabs.map(tab => (
+          <div
+            key={tab.id}
+            className={tab.id === activeTabId ? 'absolute inset-0' : 'absolute inset-0 invisible'}
+          >
+            {renderTabContent(tab, tab.id === activeTabId)}
+          </div>
+        ))}
+      </div>
     </div>
   )
 }
@@ -176,7 +174,8 @@ function TabButton({
   onSelect: () => void
   onClose: () => void
 }) {
-  const Icon = tab.type === 'terminal' ? Terminal : tab.type === 'workload-logs' ? Layers : FileText
+  const Icon = tab.type === 'terminal' || tab.type === 'node-terminal' || tab.type === 'local-terminal'
+    ? Terminal : tab.type === 'workload-logs' ? Layers : FileText
 
   return (
     <div

package/src/components/dock/DockContext.tsx

@@ -1,6 +1,6 @@
 import { createContext, useContext, useState, useCallback, useRef, useEffect, ReactNode } from 'react'
 
-export type DockTabType = 'terminal' | 'logs' | 'workload-logs'
+export type DockTabType = 'terminal' | 'logs' | 'workload-logs' | 'node-terminal' | 'local-terminal'
 
 export interface DockTab {
   id: string
@@ -18,6 +18,8 @@ export interface DockTab {
   // Workload logs props
   workloadKind?: string
   workloadName?: string
+  // Node terminal props
+  nodeName?: string
 }
 
 export interface DockContextValue {
@@ -54,6 +56,12 @@ export function DockProvider({ children }: { children: ReactNode }) {
                t.workloadKind === tabData.workloadKind &&
                t.workloadName === tabData.workloadName
       }
+      if (t.type === 'node-terminal') {
+        return t.nodeName === tabData.nodeName
+      }
+      if (t.type === 'local-terminal') {
+        return false // Allow multiple local terminals
+      }
       return t.namespace === tabData.namespace &&
              t.podName === tabData.podName &&
              t.containerName === tabData.containerName
@@ -210,3 +218,34 @@ export function useOpenWorkloadLogs() {
     })
   }
 }
+
+export function useOpenNodeTerminal() {
+  const { addTab } = useDock()
+
+  return (opts: {
+    nodeName: string
+    orgId?: string
+    clusterId?: string
+    clusterName?: string
+  }) => {
+    addTab({
+      type: 'node-terminal',
+      title: `node: ${opts.nodeName}`,
+      nodeName: opts.nodeName,
+      orgId: opts.orgId,
+      clusterId: opts.clusterId,
+      clusterName: opts.clusterName,
+    })
+  }
+}
+
+export function useOpenLocalTerminal() {
+  const { addTab } = useDock()
+
+  return () => {
+    addTab({
+      type: 'local-terminal',
+      title: 'Terminal',
+    })
+  }
+}

package/src/components/dock/LocalTerminalTab.tsx

@@ -0,0 +1,241 @@
+import { useEffect, useLayoutEffect, useRef, useCallback, useState } from 'react'
+import { Terminal as XTerm } from '@xterm/xterm'
+import { FitAddon } from '@xterm/addon-fit'
+import { WebLinksAddon } from '@xterm/addon-web-links'
+import '@xterm/xterm/css/xterm.css'
+import { RefreshCw } from 'lucide-react'
+import { clsx } from 'clsx'
+
+export interface LocalTerminalTabProps {
+  isActive?: boolean
+  /** Returns the WebSocket URL for the local terminal session */
+  createSession: () => Promise<{ wsUrl: string }>
+}
+
+export function LocalTerminalTab({
+  isActive = true,
+  createSession,
+}: LocalTerminalTabProps) {
+  const terminalRef = useRef<HTMLDivElement>(null)
+  const xtermRef = useRef<XTerm | null>(null)
+  const fitAddonRef = useRef<FitAddon | null>(null)
+  const wsRef = useRef<WebSocket | null>(null)
+  const cleanupRef = useRef<(() => void) | undefined>(undefined)
+  const cancelledRef = useRef(false)
+  const createSessionRef = useRef(createSession)
+  useLayoutEffect(() => { createSessionRef.current = createSession }, [createSession])
+  const [isConnected, setIsConnected] = useState(false)
+  const [isConnecting, setIsConnecting] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  const connect = useCallback(() => {
+    if (!terminalRef.current) return
+
+    cancelledRef.current = false
+    setIsConnecting(true)
+    setError(null)
+
+    // Clean up existing terminal and connection
+    cleanupRef.current?.()
+    xtermRef.current?.dispose()
+    wsRef.current?.close()
+
+    const xterm = new XTerm({
+      cursorBlink: true,
+      fontFamily: 'JetBrains Mono, Menlo, Monaco, monospace',
+      fontSize: 13,
+      lineHeight: 1.2,
+      theme: {
+        background: '#0f172a',
+        foreground: '#e2e8f0',
+        cursor: '#60a5fa',
+        cursorAccent: '#0f172a',
+        selectionBackground: '#3b82f680',
+        black: '#1e293b',
+        red: '#f87171',
+        green: '#4ade80',
+        yellow: '#facc15',
+        blue: '#60a5fa',
+        magenta: '#c084fc',
+        cyan: '#22d3ee',
+        white: '#f1f5f9',
+        brightBlack: '#475569',
+        brightRed: '#fca5a5',
+        brightGreen: '#86efac',
+        brightYellow: '#fde047',
+        brightBlue: '#93c5fd',
+        brightMagenta: '#d8b4fe',
+        brightCyan: '#67e8f9',
+        brightWhite: '#f8fafc',
+      },
+    })
+
+    const fitAddon = new FitAddon()
+    const webLinksAddon = new WebLinksAddon()
+    xterm.loadAddon(fitAddon)
+    xterm.loadAddon(webLinksAddon)
+    xterm.open(terminalRef.current)
+
+    xtermRef.current = xterm
+    fitAddonRef.current = fitAddon
+
+    const doFit = (ws?: WebSocket) => {
+      const dims = fitAddon.proposeDimensions()
+      if (dims) xterm.resize(dims.cols, dims.rows)
+      const conn = ws ?? wsRef.current
+      if (conn?.readyState === WebSocket.OPEN) {
+        conn.send(JSON.stringify({ type: 'resize', rows: xterm.rows, cols: xterm.cols }))
+      }
+    }
+
+    requestAnimationFrame(() => {
+      doFit()
+      setTimeout(doFit, 100)
+    })
+
+    createSessionRef.current()
+      .then(({ wsUrl }) => {
+        if (cancelledRef.current) return
+        const ws = new WebSocket(wsUrl)
+        wsRef.current = ws
+
+        ws.onopen = () => {
+          setIsConnected(true)
+          setIsConnecting(false)
+          doFit(ws)
+          xterm.focus()
+        }
+
+        ws.onmessage = (event) => {
+          let msg: Record<string, string> | null = null
+          try {
+            msg = JSON.parse(event.data as string) as Record<string, string>
+          } catch {
+            xterm.write(event.data as string)
+            return
+          }
+          if (msg.type === 'output' && msg.data) {
+            xterm.write(msg.data)
+          } else if (msg.type === 'exit') {
+            xterm.write('\r\n\x1b[2m[Process exited]\x1b[0m\r\n')
+          } else if (msg.type === 'error' && msg.data) {
+            setError(msg.data)
+            setIsConnected(false)
+          }
+        }
+
+        ws.onerror = () => {
+          setError((prev) => prev || 'Connection error')
+          setIsConnected(false)
+          setIsConnecting(false)
+        }
+
+        ws.onclose = () => {
+          setIsConnected(false)
+          setIsConnecting(false)
+          xterm.write('\r\n\x1b[31mConnection closed\x1b[0m\r\n')
+        }
+
+        xterm.onData((data: string) => {
+          if (ws.readyState === WebSocket.OPEN) {
+            ws.send(JSON.stringify({ type: 'input', data }))
+          }
+        })
+
+        // Debounced resize
+        let resizeTimeout: ReturnType<typeof setTimeout> | null = null
+        let lastWidth = 0
+        let lastHeight = 0
+        const resizeObserver = new ResizeObserver((entries) => {
+          const entry = entries[0]
+          if (!entry) return
+          const { width, height } = entry.contentRect
+          if (Math.abs(width - lastWidth) < 5 && Math.abs(height - lastHeight) < 5) return
+          lastWidth = width
+          lastHeight = height
+          if (resizeTimeout) clearTimeout(resizeTimeout)
+          resizeTimeout = setTimeout(() => {
+            if (fitAddonRef.current && xtermRef.current) {
+              const dims = fitAddonRef.current.proposeDimensions()
+              if (dims) xtermRef.current.resize(dims.cols, dims.rows)
+              if (ws.readyState === WebSocket.OPEN) {
+                ws.send(JSON.stringify({ type: 'resize', rows: xtermRef.current.rows, cols: xtermRef.current.cols }))
+              }
+            }
+          }, 100)
+        })
+        if (terminalRef.current) {
+          resizeObserver.observe(terminalRef.current)
+          cleanupRef.current = () => resizeObserver.disconnect()
+        } else {
+          resizeObserver.disconnect()
+        }
+      })
+      .catch((err) => {
+        setError(err instanceof Error ? err.message : 'Failed to connect')
+        setIsConnecting(false)
+      })
+  }, [])
+
+  useEffect(() => {
+    connect()
+    return () => {
+      cancelledRef.current = true
+      cleanupRef.current?.()
+      wsRef.current?.close()
+      xtermRef.current?.dispose()
+    }
+  }, [connect])
+
+  // Refit when tab becomes active
+  useEffect(() => {
+    if (isActive && fitAddonRef.current && xtermRef.current) {
+      const dims = fitAddonRef.current.proposeDimensions()
+      if (dims) xtermRef.current.resize(dims.cols, dims.rows)
+      xtermRef.current.focus()
+    }
+  }, [isActive])
+
+  return (
+    <div className="relative h-full w-full bg-theme-base overflow-hidden">
+      {/* Mini toolbar */}
+      <div className="h-8 flex items-center gap-2 px-2 bg-theme-surface/50 border-b border-theme-border/50">
+        <span
+          title={isConnected ? 'Connected' : isConnecting ? 'Connecting...' : 'Disconnected'}
+          className={clsx(
+            'w-2 h-2 rounded-full',
+            isConnected ? 'bg-green-500' : isConnecting ? 'bg-yellow-500 animate-pulse' : 'bg-red-500'
+          )}
+        />
+        <span className="text-xs text-theme-text-tertiary">Local Terminal</span>
+
+        {!isConnected && !isConnecting && (
+          <button
+            onClick={connect}
+            className="flex items-center gap-1 px-2 py-0.5 text-xs text-theme-text-tertiary hover:text-theme-text-primary hover:bg-theme-elevated rounded"
+          >
+            <RefreshCw className="w-3 h-3" />
+            Reconnect
+          </button>
+        )}
+      </div>
+
+      {/* Terminal or error */}
+      {error ? (
+        <div key="error" className="absolute top-8 left-0 right-0 bottom-0 flex flex-col items-center justify-center p-4 text-center bg-slate-900">
+          <div className="text-red-400 mb-2 text-sm">Failed to connect</div>
+          <div className="text-xs text-theme-text-disabled mb-3">{error}</div>
+          <button
+            onClick={connect}
+            className="flex items-center gap-2 px-3 py-1.5 bg-blue-600 text-white text-xs rounded hover:bg-blue-700"
+          >
+            <RefreshCw className="w-3 h-3" />
+            Retry
+          </button>
+        </div>
+      ) : (
+        <div key="terminal" ref={terminalRef} className="absolute top-8 left-0 right-0 bottom-0 bg-[#0f172a] [&_.xterm-viewport]:!bg-[#0f172a]" />
+      )}
+    </div>
+  )
+}

package/src/components/dock/NodeTerminalTab.tsx

@@ -0,0 +1,129 @@
+import { useEffect, useRef, useState, useCallback } from 'react'
+import { Loader2, AlertCircle, RefreshCw } from 'lucide-react'
+import { TerminalTab } from './TerminalTab'
+
+export interface NodeTerminalTabProps {
+  nodeName: string
+  isActive?: boolean
+  /** Create a debug pod on the node, returns pod coordinates for exec */
+  createNodeDebugPod: (nodeName: string) => Promise<{
+    podName: string
+    namespace: string
+    containerName: string
+  }>
+  /** Clean up debug pod(s) for this node */
+  cleanupNodeDebugPod: (nodeName: string) => Promise<void>
+  /** Return WebSocket URL for exec into a pod container */
+  createSession: (namespace: string, podName: string, containerName: string) => Promise<{ wsUrl: string }>
+}
+
+export function NodeTerminalTab({
+  nodeName,
+  isActive,
+  createNodeDebugPod,
+  cleanupNodeDebugPod,
+  createSession,
+}: NodeTerminalTabProps) {
+  const [debugPod, setDebugPod] = useState<{
+    podName: string
+    namespace: string
+    containerName: string
+  } | null>(null)
+  const [error, setError] = useState<string | null>(null)
+  const [isCreating, setIsCreating] = useState(true)
+  const cleanupDoneRef = useRef(false)
+  // Stable refs for callbacks
+  const createNodeDebugPodRef = useRef(createNodeDebugPod)
+  const cleanupNodeDebugPodRef = useRef(cleanupNodeDebugPod)
+  const createSessionRef = useRef(createSession)
+  useEffect(() => { createNodeDebugPodRef.current = createNodeDebugPod }, [createNodeDebugPod])
+  useEffect(() => { cleanupNodeDebugPodRef.current = cleanupNodeDebugPod }, [cleanupNodeDebugPod])
+  useEffect(() => { createSessionRef.current = createSession }, [createSession])
+
+  const createPod = useCallback(async () => {
+    cleanupDoneRef.current = false
+    setIsCreating(true)
+    setError(null)
+    try {
+      const result = await createNodeDebugPodRef.current(nodeName)
+      setDebugPod(result)
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to create debug pod')
+    } finally {
+      setIsCreating(false)
+    }
+  }, [nodeName])
+
+  useEffect(() => {
+    createPod()
+    return () => {
+      if (!cleanupDoneRef.current) {
+        cleanupDoneRef.current = true
+        cleanupNodeDebugPodRef.current(nodeName).catch((err) => {
+          console.warn('[NodeTerminal] Cleanup on unmount failed:', err)
+        })
+      }
+    }
+  }, [nodeName, createPod])
+
+  // Best-effort cleanup on page unload — uses keepalive so the browser
+  // does not cancel the request when the page navigates away.
+  useEffect(() => {
+    const handleUnload = () => {
+      if (!cleanupDoneRef.current) {
+        cleanupDoneRef.current = true
+        cleanupNodeDebugPodRef.current(nodeName).catch(() => {})
+      }
+    }
+    window.addEventListener('beforeunload', handleUnload)
+    return () => window.removeEventListener('beforeunload', handleUnload)
+  }, [nodeName])
+
+  if (isCreating) {
+    return (
+      <div className="h-full w-full flex flex-col items-center justify-center gap-3 bg-theme-base">
+        <Loader2 className="w-6 h-6 text-blue-400 animate-spin" />
+        <div className="text-sm text-theme-text-secondary">
+          Creating debug pod on <span className="text-theme-text-primary font-medium">{nodeName}</span>...
+        </div>
+        <div className="text-xs text-theme-text-tertiary">
+          This may take a moment while the pod starts
+        </div>
+      </div>
+    )
+  }
+
+  if (error) {
+    return (
+      <div className="h-full w-full flex flex-col items-center justify-center gap-3 bg-theme-base p-4">
+        <AlertCircle className="w-6 h-6 text-red-400" />
+        <div className="text-sm text-red-400">Failed to create debug shell</div>
+        <div className="text-xs text-theme-text-tertiary text-center max-w-md break-all">{error}</div>
+        <button
+          onClick={createPod}
+          className="flex items-center gap-2 px-3 py-1.5 bg-blue-600 text-white text-xs rounded hover:bg-blue-700"
+        >
+          <RefreshCw className="w-3 h-3" />
+          Retry
+        </button>
+      </div>
+    )
+  }
+
+  if (!debugPod) return null
+
+  // Wrap createSession to bind the debug pod's namespace/podName
+  const boundCreateSession = (containerName: string) =>
+    createSessionRef.current(debugPod.namespace, debugPod.podName, containerName)
+
+  return (
+    <TerminalTab
+      namespace={debugPod.namespace}
+      podName={debugPod.podName}
+      containerName={debugPod.containerName}
+      containers={[debugPod.containerName]}
+      isActive={isActive}
+      createSession={boundCreateSession}
+    />
+  )
+}

package/src/components/dock/TerminalTab.tsx

@@ -326,7 +326,7 @@ export function TerminalTab({
           )}
         </div>
       ) : (
-        <div key="terminal" ref={terminalRef} className="absolute top-8 left-0 right-0 bottom-0" />
+        <div key="terminal" ref={terminalRef} className="absolute top-8 left-0 right-0 bottom-0 bg-[#0f172a] [&_.xterm-viewport]:!bg-[#0f172a]" />
       )}
     </div>
   )

package/src/components/dock/index.ts

@@ -1,3 +1,5 @@
 export * from './DockContext'
 export * from './BottomDock'
 export * from './TerminalTab'
+export * from './NodeTerminalTab'
+export * from './LocalTerminalTab'

package/src/components/gitops/GitOpsStatusBadge.tsx

@@ -1,6 +1,7 @@
 import { clsx } from 'clsx'
 import { CheckCircle2, AlertCircle, Loader2, Pause, HelpCircle, XCircle } from 'lucide-react'
 import type { GitOpsStatus, SyncStatus, GitOpsHealthStatus } from '../../types/gitops'
+import { SEVERITY_BADGE_BORDERED, SEVERITY_BADGE } from '../../utils/badge-colors'
 
 interface GitOpsStatusBadgeProps {
   status: GitOpsStatus
@@ -66,22 +67,12 @@ function getStatusIcon(status: GitOpsStatus) {
 }
 
 function getStatusColorClass(status: GitOpsStatus): string {
-  if (status.suspended) {
-    return 'bg-yellow-500/20 text-yellow-400 border border-yellow-500/30'
-  }
-  if (status.sync === 'Synced' && status.health === 'Healthy') {
-    return 'bg-green-500/20 text-green-400 border border-green-500/30'
-  }
-  if (status.health === 'Degraded') {
-    return 'bg-red-500/20 text-red-400 border border-red-500/30'
-  }
-  if (status.sync === 'OutOfSync') {
-    return 'bg-orange-500/20 text-orange-400 border border-orange-500/30'
-  }
-  if (status.sync === 'Reconciling' || status.health === 'Progressing') {
-    return 'bg-blue-500/20 text-blue-400 border border-blue-500/30'
-  }
-  return 'bg-gray-500/20 text-gray-400 border border-gray-500/30'
+  if (status.suspended) return SEVERITY_BADGE_BORDERED.warning
+  if (status.sync === 'Synced' && status.health === 'Healthy') return SEVERITY_BADGE_BORDERED.success
+  if (status.health === 'Degraded') return SEVERITY_BADGE_BORDERED.error
+  if (status.sync === 'OutOfSync') return SEVERITY_BADGE_BORDERED.warning
+  if (status.sync === 'Reconciling' || status.health === 'Progressing') return SEVERITY_BADGE_BORDERED.info
+  return SEVERITY_BADGE_BORDERED.neutral
 }
 
 function getStatusLabel(status: GitOpsStatus): string {
@@ -115,41 +106,17 @@ function HealthIndicator({ health }: HealthIndicatorProps) {
 function getHealthInfo(health: GitOpsHealthStatus) {
   switch (health) {
     case 'Healthy':
-      return {
-        icon: CheckCircle2,
-        color: 'bg-green-500/10 text-green-400',
-        label: 'Healthy',
-      }
+      return { icon: CheckCircle2, color: SEVERITY_BADGE.success, label: 'Healthy' }
     case 'Progressing':
-      return {
-        icon: Loader2,
-        color: 'bg-blue-500/10 text-blue-400',
-        label: 'Progressing',
-      }
+      return { icon: Loader2, color: SEVERITY_BADGE.info, label: 'Progressing' }
     case 'Degraded':
-      return {
-        icon: XCircle,
-        color: 'bg-red-500/10 text-red-400',
-        label: 'Degraded',
-      }
+      return { icon: XCircle, color: SEVERITY_BADGE.error, label: 'Degraded' }
     case 'Suspended':
-      return {
-        icon: Pause,
-        color: 'bg-yellow-500/10 text-yellow-400',
-        label: 'Suspended',
-      }
+      return { icon: Pause, color: SEVERITY_BADGE.warning, label: 'Suspended' }
     case 'Missing':
-      return {
-        icon: AlertCircle,
-        color: 'bg-orange-500/10 text-orange-400',
-        label: 'Missing',
-      }
+      return { icon: AlertCircle, color: SEVERITY_BADGE.warning, label: 'Missing' }
     default:
-      return {
-        icon: HelpCircle,
-        color: 'bg-gray-500/10 text-gray-400',
-        label: 'Unknown',
-      }
+      return { icon: HelpCircle, color: SEVERITY_BADGE.neutral, label: 'Unknown' }
   }
 }
 
@@ -159,7 +126,7 @@ function getHealthInfo(health: GitOpsHealthStatus) {
 export function SyncStatusBadge({ sync, suspended }: { sync: SyncStatus; suspended?: boolean }) {
   if (suspended) {
     return (
-      <span className="px-2 py-0.5 rounded text-xs font-medium bg-yellow-500/20 text-yellow-400 border border-yellow-500/30 inline-flex items-center gap-1">
+      <span className={clsx('px-2 py-0.5 rounded text-xs font-medium inline-flex items-center gap-1', SEVERITY_BADGE_BORDERED.warning)}>
         <Pause className="w-3 h-3" />
         Suspended
       </span>
@@ -180,29 +147,13 @@ export function SyncStatusBadge({ sync, suspended }: { sync: SyncStatus; suspend
 function getSyncConfig(sync: SyncStatus) {
   switch (sync) {
     case 'Synced':
-      return {
-        icon: CheckCircle2,
-        color: 'bg-green-500/20 text-green-400 border border-green-500/30',
-        label: 'Synced',
-      }
+      return { icon: CheckCircle2, color: SEVERITY_BADGE_BORDERED.success, label: 'Synced' }
     case 'OutOfSync':
-      return {
-        icon: AlertCircle,
-        color: 'bg-orange-500/20 text-orange-400 border border-orange-500/30',
-        label: 'OutOfSync',
-      }
+      return { icon: AlertCircle, color: SEVERITY_BADGE_BORDERED.warning, label: 'OutOfSync' }
     case 'Reconciling':
-      return {
-        icon: Loader2,
-        color: 'bg-blue-500/20 text-blue-400 border border-blue-500/30',
-        label: 'Syncing',
-      }
+      return { icon: Loader2, color: SEVERITY_BADGE_BORDERED.info, label: 'Syncing' }
     default:
-      return {
-        icon: HelpCircle,
-        color: 'bg-gray-500/20 text-gray-400 border border-gray-500/30',
-        label: 'Unknown',
-      }
+      return { icon: HelpCircle, color: SEVERITY_BADGE_BORDERED.neutral, label: 'Unknown' }
   }
 }