@skyhook-io/k8s-ui 1.2.4 → 1.3.1

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>
       )}

package/src/components/ui/MetricsChart.tsx

@@ -111,7 +111,7 @@ export function MetricsChart({
       {/* Chart with Y-axis */}
       <div className="flex">
         {/* Y-axis labels */}
-        <div className="flex flex-col justify-between text-[9px] text-theme-text-tertiary pr-1 w-12 text-right" style={{ height }}>
+        <div className="flex flex-col justify-between text-[9px] text-theme-text-tertiary pr-1 w-12 text-right font-mono" style={{ height }}>
           <span className="leading-none">{format(yAxisMax)}</span>
           <span className="leading-none">{format(yAxisMid)}</span>
           <span className="leading-none">0</span>
@@ -197,7 +197,7 @@ export function MetricsChart({
       )}
 
       {/* Current value */}
-      <div className="flex items-baseline gap-2 mt-1 ml-12">
+      <div className="flex items-baseline gap-2 mt-1 ml-12 font-mono">
         <span className={clsx(
           'text-sm font-medium',
           type === 'cpu' ? 'text-blue-400' : 'text-purple-400'

package/src/components/ui/Toast.tsx

@@ -11,13 +11,22 @@ interface Toast {
   type?: 'success' | 'info' | 'warning' | 'error'
   position?: { x: number; y: number }
   dismissing?: boolean
+  action?: { label: string; icon?: ReactNode; onClick: () => void }
+  onDetailClick?: () => void
 }
 
 interface ToastContextType {
-  showToast: (message: string, options?: { detail?: string; command?: string; type?: Toast['type']; position?: { x: number; y: number } }) => void
+  showToast: (message: string, options?: {
+    detail?: string
+    command?: string
+    type?: Toast['type']
+    position?: { x: number; y: number }
+    action?: Toast['action']
+    onDetailClick?: () => void
+  }) => void
   showCopied: (command: string, label?: string, event?: React.MouseEvent) => void
   showError: (message: string, detail?: string) => void
-  showSuccess: (message: string, detail?: string) => void
+  showSuccess: (message: string, detail?: string, action?: Toast['action'], onDetailClick?: () => void) => void
 }
 
 const ToastContext = createContext<ToastContextType | null>(null)
@@ -26,7 +35,7 @@ const ToastContext = createContext<ToastContextType | null>(null)
 class ToastManager {
   private static instance: ToastManager
   private showErrorFn: ((message: string, detail?: string) => void) | null = null
-  private showSuccessFn: ((message: string, detail?: string) => void) | null = null
+  private showSuccessFn: ((message: string, detail?: string, action?: Toast['action'], onDetailClick?: () => void) => void) | null = null
 
   static getInstance(): ToastManager {
     if (!ToastManager.instance) {
@@ -49,8 +58,8 @@ class ToastManager {
     this.showErrorFn ? this.showErrorFn(message, detail) : console.error('[Toast]', message, detail)
   }
 
-  showSuccess(message: string, detail?: string) {
-    this.showSuccessFn ? this.showSuccessFn(message, detail) : console.log('[Toast]', message, detail)
+  showSuccess(message: string, detail?: string, action?: Toast['action'], onDetailClick?: () => void) {
+    this.showSuccessFn ? this.showSuccessFn(message, detail, action, onDetailClick) : console.log('[Toast]', message, detail)
   }
 }
 
@@ -60,8 +69,8 @@ export function showApiError(message: string, detail?: string) {
   toastManager.showError(message, detail)
 }
 
-export function showApiSuccess(message: string, detail?: string) {
-  toastManager.showSuccess(message, detail)
+export function showApiSuccess(message: string, detail?: string, action?: Toast['action'], onDetailClick?: () => void) {
+  toastManager.showSuccess(message, detail, action, onDetailClick)
 }
 
 export function useToast() {
@@ -82,14 +91,21 @@ export function ToastProvider({ children }: { children: ReactNode }) {
     }, DURATION_TOAST_EXIT)
   }, [])
 
-  const showToast = useCallback((message: string, options?: { detail?: string; command?: string; type?: Toast['type']; position?: { x: number; y: number } }) => {
+  const showToast = useCallback((message: string, options?: {
+    detail?: string
+    command?: string
+    type?: Toast['type']
+    position?: { x: number; y: number }
+    action?: Toast['action']
+    onDetailClick?: () => void
+  }) => {
     const id = Math.random().toString(36).slice(2)
     const toast: Toast = { id, message, ...options }
 
     setToasts(prev => [...prev, toast])
 
-    // Auto-dismiss: errors stay longer (8s), others 5s
-    const dismissTime = options?.type === 'error' ? 8000 : 5000
+    // Auto-dismiss: errors stay longer (10s), others 7s
+    const dismissTime = options?.type === 'error' ? 10000 : 7000
     setTimeout(() => {
       animateDismiss(id)
     }, dismissTime)
@@ -112,8 +128,8 @@ export function ToastProvider({ children }: { children: ReactNode }) {
     showToast(message, { detail, type: 'error' })
   }, [showToast])
 
-  const showSuccess = useCallback((message: string, detail?: string) => {
-    showToast(message, { detail, type: 'success' })
+  const showSuccess = useCallback((message: string, detail?: string, action?: Toast['action'], onDetailClick?: () => void) => {
+    showToast(message, { detail, type: 'success', action, onDetailClick })
   }, [showToast])
 
   const dismissToast = useCallback((id: string) => {
@@ -143,7 +159,7 @@ function ToastItem({ toast, onDismiss }: { toast: Toast; onDismiss: () => void }
   const style: React.CSSProperties = toast.position
     ? {
         position: 'fixed',
-        left: Math.min(toast.position.x, window.innerWidth - 420),
+        left: Math.min(toast.position.x, window.innerWidth - 520),
         top: toast.position.y,
         zIndex: 50,
       }
@@ -160,13 +176,13 @@ function ToastItem({ toast, onDismiss }: { toast: Toast; onDismiss: () => void }
   return (
     <div
       className={clsx(
-        'flex items-start gap-3 p-3 rounded-lg shadow-2xl border',
-        'w-[400px] max-w-[calc(100vw-32px)]',
+        'flex items-start gap-3 p-4 rounded-lg shadow-2xl border backdrop-blur-sm',
+        'w-[480px] max-w-[calc(100vw-32px)]',
         toast.dismissing ? 'animate-out' : 'animate-in',
         isError
-          ? 'bg-red-950/90 border-red-800/50'
+          ? 'bg-red-950 border-red-800/60'
           : isSuccess
-            ? 'bg-green-950/90 border-green-700/50'
+            ? 'bg-emerald-950 border-emerald-800/50'
             : 'bg-theme-surface border-theme-border'
       )}
       style={style}
@@ -175,46 +191,77 @@ function ToastItem({ toast, onDismiss }: { toast: Toast; onDismiss: () => void }
       <div className={clsx(
         'w-8 h-8 rounded-full flex items-center justify-center shrink-0',
         isError ? 'bg-red-500/20' :
-        isSuccess ? 'bg-green-500/20' : 'bg-blue-500/20'
+        isSuccess ? 'bg-emerald-500/20' : 'bg-blue-500/20'
       )}>
         {isError ? (
           <AlertTriangle className="w-4 h-4 text-red-400" />
         ) : toast.command ? (
-          <Terminal className={clsx('w-4 h-4', isSuccess ? 'text-green-400' : 'text-blue-400')} />
+          <Terminal className={clsx('w-4 h-4', isSuccess ? 'text-emerald-400' : 'text-blue-400')} />
         ) : (
-          <Check className="w-4 h-4 text-green-400" />
+          <Check className="w-4 h-4 text-emerald-400" />
         )}
       </div>
 
       {/* Content */}
       <div className="flex-1 min-w-0">
         <div className="flex items-center gap-2">
-          <span className={clsx('text-sm font-medium', isError ? 'text-red-200' : isSuccess ? 'text-green-100' : 'text-theme-text-primary')}>
+          <span className={clsx('text-sm font-medium', isError ? 'text-red-200' : isSuccess ? 'text-emerald-50' : 'text-theme-text-primary')}>
             {toast.message}
           </span>
-          {!isError && <Check className={clsx('w-3.5 h-3.5 shrink-0', isSuccess ? 'text-green-300' : 'text-green-400')} />}
+          {!isError && !toast.action && <Check className={clsx('w-3.5 h-3.5 shrink-0', isSuccess ? 'text-emerald-400' : 'text-green-400')} />}
         </div>
         {toast.detail && (
-          <p className={clsx('mt-1 text-xs', isError ? 'text-red-300/80' : isSuccess ? 'text-green-300/80' : 'text-theme-text-secondary')}>
-            {toast.detail}
-          </p>
+          toast.onDetailClick ? (
+            <button
+              onClick={toast.onDetailClick}
+              className={clsx(
+                'mt-1.5 block text-xs font-mono break-all text-left rounded px-1.5 py-1 -ml-1.5 transition-colors',
+                isError
+                  ? 'text-red-300 hover:bg-red-900/50'
+                  : isSuccess
+                    ? 'text-emerald-300/90 hover:text-emerald-200 hover:bg-emerald-900/50'
+                    : 'text-theme-text-secondary hover:bg-theme-elevated'
+              )}
+              title="Click to open file"
+            >
+              {toast.detail}
+            </button>
+          ) : (
+            <p className={clsx('mt-1 text-xs break-all', isError ? 'text-red-300/80' : isSuccess ? 'text-emerald-300/80' : 'text-theme-text-secondary')}>
+              {toast.detail}
+            </p>
+          )
         )}
         {toast.command && (
           <code className="block mt-1.5 text-xs text-theme-text-secondary font-mono bg-theme-base rounded px-2 py-1.5 whitespace-pre-wrap break-all">
             {toast.command}
           </code>
         )}
+        {toast.action && (
+          <button
+            onClick={toast.action.onClick}
+            className={clsx(
+              'mt-2.5 inline-flex items-center gap-1.5 text-xs font-medium px-3 py-1.5 rounded transition-colors',
+              isSuccess
+                ? 'text-emerald-100 bg-emerald-800/50 hover:bg-emerald-700/50 border border-emerald-700/40'
+                : 'text-theme-text-secondary bg-theme-elevated hover:bg-theme-surface border border-theme-border'
+            )}
+          >
+            {toast.action.icon}
+            {toast.action.label}
+          </button>
+        )}
       </div>
 
       {/* Dismiss button */}
       <button
         onClick={onDismiss}
         className={clsx(
-          'p-1 rounded shrink-0',
+          'p-1 rounded shrink-0 transition-colors',
           isError
             ? 'text-red-400 hover:text-red-300 hover:bg-red-900/50'
             : isSuccess
-              ? 'text-green-400 hover:text-green-300 hover:bg-green-900/50'
+              ? 'text-emerald-500 hover:text-emerald-300 hover:bg-emerald-900/50'
               : 'text-theme-text-tertiary hover:text-theme-text-primary hover:bg-theme-elevated'
         )}
       >

package/src/components/ui/drawer-components.tsx

@@ -3,6 +3,7 @@ import { ChevronRight, Copy, Check, Tag, AlertTriangle, CheckCircle, ExternalLin
 import { clsx } from 'clsx'
 import { formatAge } from '../resources/resource-utils'
 import { Tooltip } from './Tooltip'
+import { getKindColorClass } from '../ui/Badge'
 
 // ============================================================================
 // UI COMPONENTS
@@ -10,7 +11,7 @@ import { Tooltip } from './Tooltip'
 
 export function KeyValueBadge({ k, v }: { k: string; v: string }) {
   return (
-    <span className="px-2 py-0.5 bg-theme-elevated rounded text-xs text-theme-text-secondary">
+    <span className="badge bg-theme-elevated text-theme-text-secondary">
       {k}={v}
     </span>
   )
@@ -164,10 +165,10 @@ export function ConditionsSection({ conditions }: { conditions?: any[] }) {
 // ============================================================================
 
 const ALERT_COLORS = {
-  error:   { bg: 'bg-red-500/10', border: 'border-red-500/30', title: 'text-red-700 dark:text-red-400', message: 'text-red-600/80 dark:text-red-400/80', list: 'text-red-600 dark:text-red-400', bullet: 'text-red-500/60 dark:text-red-400/60' },
-  warning: { bg: 'bg-yellow-500/10', border: 'border-yellow-500/30', title: 'text-yellow-700 dark:text-yellow-400', message: 'text-yellow-600/80 dark:text-yellow-400/80', list: 'text-yellow-600 dark:text-yellow-400', bullet: 'text-yellow-500/60 dark:text-yellow-400/60' },
-  info:    { bg: 'bg-blue-500/10', border: 'border-blue-500/30', title: 'text-blue-700 dark:text-blue-400', message: 'text-blue-600/80 dark:text-blue-400/80', list: 'text-blue-600 dark:text-blue-400', bullet: 'text-blue-500/60 dark:text-blue-400/60' },
-  success: { bg: 'bg-green-500/10', border: 'border-green-500/30', title: 'text-green-700 dark:text-green-400', message: 'text-green-600/80 dark:text-green-400/80', list: 'text-green-600 dark:text-green-400', bullet: 'text-green-500/60 dark:text-green-400/60' },
+  error:   { bg: 'bg-red-50 dark:bg-red-950/30', border: 'border-red-200 dark:border-red-800/30', title: 'text-red-700 dark:text-red-300', message: 'text-red-600/80 dark:text-red-300/70', list: 'text-red-600 dark:text-red-400', bullet: 'text-red-400/60 dark:text-red-400/50' },
+  warning: { bg: 'bg-amber-50 dark:bg-amber-950/30', border: 'border-amber-200 dark:border-amber-800/30', title: 'text-amber-700 dark:text-amber-300', message: 'text-amber-600/80 dark:text-amber-300/70', list: 'text-amber-600 dark:text-amber-400', bullet: 'text-amber-400/60 dark:text-amber-400/50' },
+  info:    { bg: 'bg-sky-50 dark:bg-sky-950/30', border: 'border-sky-200 dark:border-sky-800/30', title: 'text-sky-700 dark:text-sky-300', message: 'text-sky-600/80 dark:text-sky-300/70', list: 'text-sky-600 dark:text-sky-400', bullet: 'text-sky-400/60 dark:text-sky-400/50' },
+  success: { bg: 'bg-emerald-50 dark:bg-emerald-950/30', border: 'border-emerald-200 dark:border-emerald-800/30', title: 'text-emerald-700 dark:text-emerald-300', message: 'text-emerald-600/80 dark:text-emerald-300/70', list: 'text-emerald-600 dark:text-emerald-400', bullet: 'text-emerald-400/60 dark:text-emerald-400/50' },
 } as const
 
 const DEFAULT_ICONS: Record<string, React.ComponentType<{ className?: string }>> = {
@@ -313,7 +314,7 @@ export function PodTemplateSection({ template }: { template: any }) {
         <>
           <div className="text-xs text-theme-text-tertiary font-medium uppercase tracking-wide">Init Containers</div>
           {initContainers.map((c: any) => (
-            <div key={c.name} className="bg-theme-elevated/30 rounded p-2 text-sm border-l-2 border-yellow-500/40">
+            <div key={c.name} className="card-inner text-sm border-l-2 border-yellow-500/40">
               <div className="font-medium text-theme-text-primary">{c.name}</div>
               <div className="text-xs text-theme-text-secondary truncate" title={c.image}>{c.image}</div>
               {(c.command || c.args) && (
@@ -327,7 +328,7 @@ export function PodTemplateSection({ template }: { template: any }) {
         </>
       )}
       {containers.map((c: any) => (
-        <div key={c.name} className="bg-theme-elevated/30 rounded p-2 text-sm">
+        <div key={c.name} className="card-inner text-sm">
           <div className="font-medium text-theme-text-primary">{c.name}</div>
           <div className="text-xs text-theme-text-secondary truncate" title={c.image}>{c.image}</div>
           {c.ports && (
@@ -450,29 +451,9 @@ export function AppInfoSection({ data }: { data: any }) {
 // HELPERS
 // ============================================================================
 
+/** Get kind badge color — delegates to Badge.tsx's static color lookup */
 export function getKindColor(kind: string): string {
-  const k = kind.toLowerCase()
-  // Use darker text for light mode contrast, brighter for dark mode
-  if (k.includes('pod')) return 'bg-lime-500/20 text-lime-700 dark:text-lime-400 border-lime-500/30'
-  if (k.includes('deployment')) return 'bg-emerald-500/20 text-emerald-700 dark:text-emerald-400 border-emerald-500/30'
-  if (k.includes('service')) return 'bg-blue-500/20 text-blue-700 dark:text-blue-400 border-blue-500/30'
-  if (k.includes('gateway')) return 'bg-violet-500/20 text-violet-700 dark:text-violet-400 border-violet-500/30'
-  if (k.includes('route')) return 'bg-purple-500/20 text-purple-700 dark:text-purple-400 border-purple-500/30'
-  if (k.includes('ingress')) return 'bg-violet-500/20 text-violet-700 dark:text-violet-400 border-violet-500/30'
-  if (k.includes('configmap')) return 'bg-amber-500/20 text-amber-700 dark:text-amber-400 border-amber-500/30'
-  if (k.endsWith('report')) return 'bg-rose-500/20 text-rose-700 dark:text-rose-400 border-rose-500/30'
-  if (k.includes('secret')) return 'bg-red-500/20 text-red-700 dark:text-red-400 border-red-500/30'
-  if (k.includes('daemonset')) return 'bg-teal-500/20 text-teal-700 dark:text-teal-400 border-teal-500/30'
-  if (k.includes('statefulset')) return 'bg-cyan-500/20 text-cyan-700 dark:text-cyan-400 border-cyan-500/30'
-  if (k.includes('replicaset')) return 'bg-green-500/20 text-green-700 dark:text-green-400 border-green-500/30'
-  if (k.includes('hpa') || k.includes('horizontalpodautoscaler')) return 'bg-pink-500/20 text-pink-700 dark:text-pink-400 border-pink-500/30'
-  if (k.includes('cronjob')) return 'bg-orange-500/20 text-orange-700 dark:text-orange-400 border-orange-500/30'
-  if (k.includes('job')) return 'bg-orange-500/20 text-orange-700 dark:text-orange-400 border-orange-500/30'
-  if (k.includes('node')) return 'bg-gray-500/20 text-gray-700 dark:text-gray-400 border-gray-500/30'
-  if (k.includes('namespace')) return 'bg-blue-500/20 text-blue-700 dark:text-blue-400 border-blue-500/30'
-  if (k.includes('persistentvolume')) return 'bg-purple-500/20 text-purple-700 dark:text-purple-400 border-purple-500/30'
-  // Default color for CRDs
-  return 'bg-fuchsia-500/20 text-fuchsia-700 dark:text-fuchsia-300 border-fuchsia-500/30'
+  return getKindColorClass(kind)
 }
 
 export function formatKindName(kind: string): string {
@@ -648,7 +629,7 @@ export function ResourceRefBadge({ resourceRef, onClick }: ResourceRefBadgeProps
       <button
         onClick={() => onClick(resourceRef)}
         className={clsx(
-          'px-2 py-0.5 text-xs rounded border transition-colors hover:brightness-125',
+          'badge hover:brightness-[0.92] dark:hover:brightness-125 transition-[filter]',
           kindClass
         )}
         title={`${resourceRef.kind}: ${resourceRef.namespace}/${resourceRef.name}`}
@@ -661,7 +642,7 @@ export function ResourceRefBadge({ resourceRef, onClick }: ResourceRefBadgeProps
 
   return (
     <span
-      className={clsx('px-2 py-0.5 text-xs rounded border', kindClass)}
+      className={clsx('badge', kindClass)}
       title={`${resourceRef.kind}: ${resourceRef.namespace}/${resourceRef.name}`}
     >
       <span className="opacity-60">{kindName}/</span>