@skyhook-io/k8s-ui 1.0.0

package/src/components/ui/HealthRing.tsx

@@ -0,0 +1,72 @@
+interface Segment {
+  value: number
+  color: string
+}
+
+interface HealthRingProps {
+  segments: Segment[]
+  size?: number
+  strokeWidth?: number
+  label?: string
+}
+
+export function HealthRing({ segments, size = 48, strokeWidth = 5, label }: HealthRingProps) {
+  const total = segments.reduce((sum, s) => sum + s.value, 0)
+  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" />
+        {label && (
+          <text x="50" y="50" textAnchor="middle" dominantBaseline="central" className="fill-theme-text-tertiary text-[22px] font-semibold">
+            0
+          </text>
+        )}
+      </svg>
+    )
+  }
+
+  const radius = 40
+  const circumference = 2 * Math.PI * radius
+  let accumulatedOffset = 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 }
+    })
+
+  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" />
+      {/* 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 */}
+      {label && (
+        <text x="50" y="50" textAnchor="middle" dominantBaseline="central" className="fill-theme-text-primary text-[22px] font-semibold">
+          {label}
+        </text>
+      )}
+    </svg>
+  )
+}

package/src/components/ui/MetricsChart.tsx

@@ -0,0 +1,259 @@
+import { useMemo } from 'react'
+import { clsx } from 'clsx'
+import type { MetricsDataPoint } from '../../types/core'
+import { formatCPUNanocores, formatMemoryBytes, parseCPUToNanocores, parseMemoryToBytes } from '../../utils/format'
+
+/**
+ * Round up a value to a "nice" number for chart axes.
+ * Nice numbers are 1, 2, 5 multiplied by powers of 10.
+ */
+function niceRoundUp(value: number): number {
+  if (value <= 0) return 0
+
+  // Find the order of magnitude
+  const magnitude = Math.pow(10, Math.floor(Math.log10(value)))
+  const normalized = value / magnitude // Will be between 1 and 10
+
+  // Round up to nice intervals: 1, 2, 5, 10
+  let nice: number
+  if (normalized <= 1) {
+    nice = 1
+  } else if (normalized <= 2) {
+    nice = 2
+  } else if (normalized <= 5) {
+    nice = 5
+  } else {
+    nice = 10
+  }
+
+  return nice * magnitude
+}
+
+interface MetricsChartProps {
+  dataPoints: MetricsDataPoint[]
+  type: 'cpu' | 'memory'
+  height?: number
+  className?: string
+  showAxis?: boolean
+  /** K8s resource limit string (e.g., "500m", "1Gi") */
+  limit?: string
+  /** K8s resource request string (e.g., "100m", "256Mi") */
+  request?: string
+}
+
+export function MetricsChart({
+  dataPoints,
+  type,
+  height = 60,
+  className,
+  showAxis = true,
+  limit,
+  request,
+}: MetricsChartProps) {
+  // Parse limit and request to the same unit as data (nanocores or bytes)
+  const parseValue = type === 'cpu' ? parseCPUToNanocores : parseMemoryToBytes
+  const limitValue = limit ? parseValue(limit) : undefined
+  const requestValue = request ? parseValue(request) : undefined
+
+  const { values, chartMax, dataMax, current, timeRange } = useMemo(() => {
+    if (!dataPoints || dataPoints.length === 0) {
+      return { values: [], chartMax: 0, dataMax: 0, current: 0, timeRange: '' }
+    }
+
+    const vals = dataPoints.map(d => type === 'cpu' ? d.cpu : d.memory)
+    const maxVal = Math.max(...vals)
+    const currentVal = vals[vals.length - 1]
+
+    // Chart max should include limit if present and higher than data
+    let chartMaxVal = maxVal
+    if (limitValue && limitValue > chartMaxVal) {
+      chartMaxVal = limitValue
+    }
+    // Round up to a nice number for clean axis labels
+    chartMaxVal = niceRoundUp(chartMaxVal * 1.05) // Small padding before rounding
+
+    // Calculate time range
+    const firstTime = new Date(dataPoints[0].timestamp)
+    const lastTime = new Date(dataPoints[dataPoints.length - 1].timestamp)
+    const diffMinutes = Math.round((lastTime.getTime() - firstTime.getTime()) / 60000)
+    const range = diffMinutes > 60 ? `${Math.round(diffMinutes / 60)}h` : `${diffMinutes}m`
+
+    return {
+      values: vals,
+      chartMax: chartMaxVal,
+      dataMax: maxVal,
+      current: currentVal,
+      timeRange: range,
+    }
+  }, [dataPoints, type, limitValue])
+
+  if (values.length === 0) {
+    return (
+      <div className={clsx('flex items-center justify-center text-theme-text-tertiary text-xs', className)} style={{ height }}>
+        No metrics data yet
+      </div>
+    )
+  }
+
+  const color = type === 'cpu' ? 'bg-blue-500' : 'bg-purple-500'
+  const format = type === 'cpu' ? formatCPUNanocores : formatMemoryBytes
+
+  // Calculate line positions (from bottom, as percentage)
+  const limitPercent = limitValue && chartMax > 0 ? (limitValue / chartMax) * 100 : undefined
+  const requestPercent = requestValue && chartMax > 0 ? (requestValue / chartMax) * 100 : undefined
+
+  // Y-axis values
+  const yAxisMax = chartMax
+  const yAxisMid = chartMax / 2
+
+  return (
+    <div className={clsx('flex flex-col', className)}>
+      {/* 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 }}>
+          <span className="leading-none">{format(yAxisMax)}</span>
+          <span className="leading-none">{format(yAxisMid)}</span>
+          <span className="leading-none">0</span>
+        </div>
+
+        {/* Chart area */}
+        <div className="relative flex-1" style={{ height }}>
+          {/* Bars */}
+          <div className="absolute inset-0 flex items-end">
+            {values.map((value, i) => {
+              const normalizedHeight = chartMax > 0 ? (value / chartMax) * 100 : 0
+              const barHeight = Math.max((normalizedHeight / 100) * height, 2)
+              return (
+                <div
+                  key={i}
+                  className="flex-1 px-px flex items-end"
+                  title={`${format(value)} at ${new Date(dataPoints[i].timestamp).toLocaleTimeString()}`}
+                >
+                  <div
+                    className={clsx(color, 'w-full rounded-t-sm opacity-70 hover:opacity-100 transition-opacity')}
+                    style={{ height: barHeight }}
+                  />
+                </div>
+              )
+            })}
+          </div>
+
+          {/* Limit line */}
+          {limitPercent !== undefined && limitPercent <= 100 && (
+            <div
+              className="absolute left-0 right-0 border-t-2 border-red-500 border-dashed pointer-events-none"
+              style={{ bottom: `${limitPercent}%` }}
+              title={`Limit: ${limit}`}
+            />
+          )}
+
+          {/* Request line */}
+          {requestPercent !== undefined && requestPercent <= 100 && (
+            <div
+              className="absolute left-0 right-0 border-t-2 border-yellow-500 border-dashed pointer-events-none"
+              style={{ bottom: `${requestPercent}%` }}
+              title={`Request: ${request}`}
+            />
+          )}
+
+          {/* Grid lines */}
+          <div className="absolute inset-0 flex flex-col justify-between pointer-events-none">
+            <div className="border-b border-theme-border/20" />
+            <div className="border-b border-theme-border/20" />
+            <div className="border-b border-theme-border/10" />
+          </div>
+        </div>
+
+        {/* Right-side labels for limit/request */}
+        {(limitPercent !== undefined || requestPercent !== undefined) && (
+          <div className="relative w-8 pl-1" style={{ height }}>
+            {limitPercent !== undefined && limitPercent <= 100 && (
+              <span
+                className="absolute text-[9px] text-red-400 leading-none"
+                style={{ bottom: `${limitPercent}%`, transform: 'translateY(50%)' }}
+              >
+                limit
+              </span>
+            )}
+            {requestPercent !== undefined && requestPercent <= 100 && (
+              <span
+                className="absolute text-[9px] text-yellow-400 leading-none"
+                style={{ bottom: `${requestPercent}%`, transform: 'translateY(50%)' }}
+              >
+                req
+              </span>
+            )}
+          </div>
+        )}
+      </div>
+
+      {/* X-axis labels */}
+      {showAxis && (
+        <div className="flex justify-between text-[10px] text-theme-text-tertiary mt-1 ml-12 mr-8">
+          <span>{timeRange} ago</span>
+          <span>now</span>
+        </div>
+      )}
+
+      {/* Current value */}
+      <div className="flex items-baseline gap-2 mt-1 ml-12">
+        <span className={clsx(
+          'text-sm font-medium',
+          type === 'cpu' ? 'text-blue-400' : 'text-purple-400'
+        )}>
+          {format(current)}
+        </span>
+        <span className="text-[10px] text-theme-text-tertiary">
+          (max: {format(dataMax)})
+        </span>
+      </div>
+    </div>
+  )
+}
+
+// Compact sparkline version for inline use
+interface SparklineProps {
+  dataPoints: MetricsDataPoint[]
+  type: 'cpu' | 'memory'
+  width?: number
+  height?: number
+  className?: string
+}
+
+export function MetricsSparkline({
+  dataPoints,
+  type,
+  width = 80,
+  height = 24,
+  className,
+}: SparklineProps) {
+  const values = useMemo(() => {
+    if (!dataPoints || dataPoints.length === 0) return []
+    return dataPoints.map(d => type === 'cpu' ? d.cpu : d.memory)
+  }, [dataPoints, type])
+
+  if (values.length < 2) {
+    return null
+  }
+
+  const max = Math.max(...values)
+  const points = values.map((v, i) => {
+    const x = (i / (values.length - 1)) * width
+    const y = max > 0 ? height - (v / max) * height : height
+    return `${x},${y}`
+  }).join(' ')
+
+  const color = type === 'cpu' ? '#3b82f6' : '#a855f7'
+
+  return (
+    <svg width={width} height={height} className={className}>
+      <polyline
+        fill="none"
+        stroke={color}
+        strokeWidth="1.5"
+        points={points}
+      />
+    </svg>
+  )
+}

package/src/components/ui/ResourceBar.tsx

@@ -0,0 +1,68 @@
+import { clsx } from 'clsx'
+import { type ReactNode } from 'react'
+import { Tooltip } from './Tooltip'
+
+type ColorScheme = 'utilization' | 'count'
+
+interface ResourceBarProps {
+  /** Formatted usage string (e.g., "847m", "2.1Gi", "17") */
+  used: string
+  /** Formatted total/allocatable string (e.g., "1930m", "7.6Gi", "110") */
+  total: string
+  /** Usage percentage (0–100) */
+  percent: number
+  /** Color scheme: "utilization" (green/yellow/red) or "count" (blue/yellow) */
+  colorScheme?: ColorScheme
+  /** Optional marker line position (0–100), e.g., request as % of limit */
+  markerPercent?: number
+  /** Optional tooltip content shown on hover */
+  tooltip?: ReactNode
+}
+
+function getBarColor(percent: number, scheme: ColorScheme): string {
+  if (scheme === 'count') {
+    return percent > 90 ? 'bg-yellow-500' : 'bg-blue-500'
+  }
+  if (percent > 85) return 'bg-red-500'
+  if (percent > 60) return 'bg-yellow-500'
+  return 'bg-green-500'
+}
+
+export function ResourceBar({ used, total, percent, colorScheme = 'utilization', markerPercent, tooltip }: ResourceBarProps) {
+  const bar = (
+    <div className="flex flex-col gap-0.5 min-w-0">
+      <div className="flex items-baseline justify-between gap-1">
+        <span className="text-xs font-mono text-theme-text-secondary truncate">
+          {used} / {total}
+        </span>
+        <span className="text-[10px] font-mono text-theme-text-tertiary shrink-0">
+          {Math.round(percent)}%
+        </span>
+      </div>
+      <div className="relative">
+        <div className="h-1.5 rounded-full border border-theme-border bg-theme-bg-elevated overflow-hidden">
+          <div
+            className={clsx('h-full rounded-full transition-[width] duration-300 ease-out', getBarColor(percent, colorScheme))}
+            style={{ width: `${Math.min(percent, 100)}%` }}
+          />
+        </div>
+        {markerPercent != null && markerPercent > 0 && markerPercent <= 100 && (
+          <div
+            className="absolute -top-[1px] h-[calc(100%+2px)] w-[2px] bg-theme-text-primary/70"
+            style={{ left: `${markerPercent}%` }}
+          />
+        )}
+      </div>
+    </div>
+  )
+
+  if (tooltip) {
+    return (
+      <Tooltip content={tooltip} delay={200} position="top" wrapperClassName="w-full min-w-0">
+        {bar}
+      </Tooltip>
+    )
+  }
+
+  return bar
+}

package/src/components/ui/Toast.tsx

@@ -0,0 +1,225 @@
+import { createContext, useContext, useState, useCallback, ReactNode, useEffect } from 'react'
+import { DURATION_TOAST_EXIT } from '../../utils/animation'
+import { Check, Terminal, X, AlertTriangle } from 'lucide-react'
+import { clsx } from 'clsx'
+
+interface Toast {
+  id: string
+  message: string
+  detail?: string
+  command?: string
+  type?: 'success' | 'info' | 'warning' | 'error'
+  position?: { x: number; y: number }
+  dismissing?: boolean
+}
+
+interface ToastContextType {
+  showToast: (message: string, options?: { detail?: string; command?: string; type?: Toast['type']; position?: { x: number; y: number } }) => void
+  showCopied: (command: string, label?: string, event?: React.MouseEvent) => void
+  showError: (message: string, detail?: string) => void
+  showSuccess: (message: string, detail?: string) => void
+}
+
+const ToastContext = createContext<ToastContextType | null>(null)
+
+// Singleton pattern for showing toasts outside React components (e.g., in API error handlers)
+class ToastManager {
+  private static instance: ToastManager
+  private showErrorFn: ((message: string, detail?: string) => void) | null = null
+  private showSuccessFn: ((message: string, detail?: string) => void) | null = null
+
+  static getInstance(): ToastManager {
+    if (!ToastManager.instance) {
+      ToastManager.instance = new ToastManager()
+    }
+    return ToastManager.instance
+  }
+
+  register(showError: typeof this.showErrorFn, showSuccess: typeof this.showSuccessFn) {
+    this.showErrorFn = showError
+    this.showSuccessFn = showSuccess
+  }
+
+  unregister() {
+    this.showErrorFn = null
+    this.showSuccessFn = null
+  }
+
+  showError(message: string, detail?: string) {
+    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)
+  }
+}
+
+const toastManager = ToastManager.getInstance()
+
+export function showApiError(message: string, detail?: string) {
+  toastManager.showError(message, detail)
+}
+
+export function showApiSuccess(message: string, detail?: string) {
+  toastManager.showSuccess(message, detail)
+}
+
+export function useToast() {
+  const context = useContext(ToastContext)
+  if (!context) {
+    throw new Error('useToast must be used within ToastProvider')
+  }
+  return context
+}
+
+export function ToastProvider({ children }: { children: ReactNode }) {
+  const [toasts, setToasts] = useState<Toast[]>([])
+
+  const animateDismiss = useCallback((id: string) => {
+    setToasts(prev => prev.map(t => t.id === id ? { ...t, dismissing: true } : t))
+    setTimeout(() => {
+      setToasts(prev => prev.filter(t => t.id !== id))
+    }, DURATION_TOAST_EXIT)
+  }, [])
+
+  const showToast = useCallback((message: string, options?: { detail?: string; command?: string; type?: Toast['type']; position?: { x: number; y: number } }) => {
+    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
+    setTimeout(() => {
+      animateDismiss(id)
+    }, dismissTime)
+  }, [animateDismiss])
+
+  const showCopied = useCallback((command: string, label?: string, event?: React.MouseEvent) => {
+    navigator.clipboard.writeText(command)
+
+    // Get position from click event
+    let position: { x: number; y: number } | undefined
+    if (event) {
+      const rect = (event.currentTarget as HTMLElement).getBoundingClientRect()
+      position = { x: rect.left, y: rect.bottom + 8 }
+    }
+
+    showToast(label || 'Copied to clipboard', { command, type: 'success', position })
+  }, [showToast])
+
+  const showError = useCallback((message: string, detail?: string) => {
+    showToast(message, { detail, type: 'error' })
+  }, [showToast])
+
+  const showSuccess = useCallback((message: string, detail?: string) => {
+    showToast(message, { detail, type: 'success' })
+  }, [showToast])
+
+  const dismissToast = useCallback((id: string) => {
+    animateDismiss(id)
+  }, [animateDismiss])
+
+  // Wire up singleton for use outside React components
+  useEffect(() => {
+    toastManager.register(showError, showSuccess)
+    return () => toastManager.unregister()
+  }, [showError, showSuccess])
+
+  return (
+    <ToastContext.Provider value={{ showToast, showCopied, showError, showSuccess }}>
+      {children}
+
+      {/* Render toasts */}
+      {toasts.map(toast => (
+        <ToastItem key={toast.id} toast={toast} onDismiss={() => dismissToast(toast.id)} />
+      ))}
+    </ToastContext.Provider>
+  )
+}
+
+function ToastItem({ toast, onDismiss }: { toast: Toast; onDismiss: () => void }) {
+  // Calculate position - either near button or default to bottom-right
+  const style: React.CSSProperties = toast.position
+    ? {
+        position: 'fixed',
+        left: Math.min(toast.position.x, window.innerWidth - 420),
+        top: toast.position.y,
+        zIndex: 50,
+      }
+    : {
+        position: 'fixed',
+        bottom: 16,
+        right: 16,
+        zIndex: 50,
+      }
+
+  const isError = toast.type === 'error'
+  const isSuccess = toast.type === 'success'
+
+  return (
+    <div
+      className={clsx(
+        'flex items-start gap-3 p-3 rounded-lg shadow-2xl border',
+        'w-[400px] max-w-[calc(100vw-32px)]',
+        toast.dismissing ? 'animate-out' : 'animate-in',
+        isError
+          ? 'bg-red-950/90 border-red-800/50'
+          : isSuccess
+            ? 'bg-emerald-950/90 border-emerald-700/50 dark:bg-emerald-950/90 dark:border-emerald-700/50'
+            : 'bg-theme-surface border-theme-border'
+      )}
+      style={style}
+    >
+      {/* Icon */}
+      <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'
+      )}>
+        {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')} />
+        ) : (
+          <Check className="w-4 h-4 text-green-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-emerald-100' : 'text-theme-text-primary')}>
+            {toast.message}
+          </span>
+          {!isError && <Check className={clsx('w-3.5 h-3.5 shrink-0', isSuccess ? 'text-emerald-300' : 'text-green-400')} />}
+        </div>
+        {toast.detail && (
+          <p className={clsx('mt-1 text-xs', 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>
+        )}
+      </div>
+
+      {/* Dismiss button */}
+      <button
+        onClick={onDismiss}
+        className={clsx(
+          'p-1 rounded shrink-0',
+          isError
+            ? 'text-red-400 hover:text-red-300 hover:bg-red-900/50'
+            : isSuccess
+              ? 'text-emerald-400 hover:text-emerald-300 hover:bg-emerald-900/50'
+              : 'text-theme-text-tertiary hover:text-theme-text-primary hover:bg-theme-elevated'
+        )}
+      >
+        <X className="w-4 h-4" />
+      </button>
+    </div>
+  )
+}