@skyhook-io/k8s-ui 1.0.0

package/src/types/gitops.ts

@@ -0,0 +1,458 @@
+// GitOps unified types and mappers for FluxCD and ArgoCD
+
+// ============================================================================
+// OPERATION RESPONSE TYPES
+// ============================================================================
+
+/** GitOps tool identifier */
+export type GitOpsTool = 'argocd' | 'fluxcd'
+
+/** GitOps operation types */
+export type GitOpsOperation = 'sync' | 'refresh' | 'terminate' | 'suspend' | 'resume' | 'reconcile'
+
+/** Reference to a GitOps resource */
+export interface GitOpsResourceRef {
+  kind: string
+  name: string
+  namespace: string
+}
+
+/**
+ * Standardized response format for all GitOps operations
+ * Returned by: sync, refresh, terminate, suspend, resume, reconcile endpoints
+ */
+export interface GitOpsOperationResponse {
+  message: string
+  operation: GitOpsOperation
+  tool: GitOpsTool
+  resource: GitOpsResourceRef
+  requestedAt?: string
+  source?: GitOpsResourceRef // For sync-with-source operations
+}
+
+// ============================================================================
+// STATUS TYPES
+// ============================================================================
+
+/**
+ * Unified sync status across GitOps tools
+ * - Synced: Resources match the desired state in git
+ * - OutOfSync: Resources differ from desired state
+ * - Reconciling: Sync operation in progress
+ * - Unknown: Status cannot be determined
+ */
+export type SyncStatus = 'Synced' | 'OutOfSync' | 'Reconciling' | 'Unknown'
+
+/**
+ * Unified health status across GitOps tools
+ * - Healthy: All resources are healthy
+ * - Progressing: Resources are being created/updated
+ * - Degraded: Some resources are unhealthy
+ * - Suspended: Reconciliation is paused
+ * - Missing: Expected resources don't exist
+ * - Unknown: Health cannot be determined
+ */
+export type GitOpsHealthStatus = 'Healthy' | 'Progressing' | 'Degraded' | 'Suspended' | 'Missing' | 'Unknown'
+
+/**
+ * Unified GitOps status combining sync and health information
+ */
+export interface GitOpsStatus {
+  sync: SyncStatus
+  health: GitOpsHealthStatus
+  message?: string
+  lastSyncTime?: string
+  suspended: boolean
+}
+
+/**
+ * A resource managed by a GitOps application/kustomization
+ */
+export interface ManagedResource {
+  group: string
+  kind: string
+  namespace: string
+  name: string
+  health?: GitOpsHealthStatus
+  sync?: SyncStatus
+}
+
+// ============================================================================
+// FLUX CONDITION TYPES
+// ============================================================================
+
+/** Known FluxCD condition types */
+export type FluxConditionType = 'Ready' | 'Reconciling' | 'Stalled' | 'Healthy'
+
+export interface FluxCondition {
+  type: FluxConditionType | string // Known types + allow unknown for forward compatibility
+  status: 'True' | 'False' | 'Unknown'
+  reason?: string
+  message?: string
+  lastTransitionTime?: string
+}
+
+// ============================================================================
+// FLUX STATUS MAPPER
+// ============================================================================
+
+/**
+ * Maps FluxCD conditions to unified GitOpsStatus
+ *
+ * FluxCD status patterns:
+ * - Ready=True: Synced and healthy
+ * - Ready=False + Stalled=True: Degraded
+ * - Ready=False + Reconciling=True: Reconciling
+ * - Ready=False (other): OutOfSync
+ * - Healthy=False: Deployed but unhealthy resources
+ * - spec.suspend=true: Suspended
+ */
+export function fluxConditionsToGitOpsStatus(
+  conditions: FluxCondition[],
+  suspended: boolean
+): GitOpsStatus {
+  const readyCondition = conditions.find(c => c.type === 'Ready')
+  const reconcilingCondition = conditions.find(c => c.type === 'Reconciling')
+  const stalledCondition = conditions.find(c => c.type === 'Stalled')
+  const healthyCondition = conditions.find(c => c.type === 'Healthy')
+
+  // Handle suspended state
+  if (suspended) {
+    return {
+      sync: readyCondition?.status === 'True' ? 'Synced' : 'Unknown',
+      health: 'Suspended',
+      message: 'Reconciliation is suspended',
+      lastSyncTime: readyCondition?.lastTransitionTime,
+      suspended: true,
+    }
+  }
+
+  // Handle reconciling state
+  if (reconcilingCondition?.status === 'True') {
+    return {
+      sync: 'Reconciling',
+      health: 'Progressing',
+      message: reconcilingCondition.message || 'Reconciliation in progress',
+      lastSyncTime: readyCondition?.lastTransitionTime,
+      suspended: false,
+    }
+  }
+
+  // Handle ready state
+  if (readyCondition?.status === 'True') {
+    // Check if deployed resources are healthy
+    const isHealthy = healthyCondition?.status !== 'False'
+    return {
+      sync: 'Synced',
+      health: isHealthy ? 'Healthy' : 'Degraded',
+      message: isHealthy ? undefined : healthyCondition?.message,
+      lastSyncTime: readyCondition.lastTransitionTime,
+      suspended: false,
+    }
+  }
+
+  // Handle stalled state (permanent failure)
+  if (stalledCondition?.status === 'True') {
+    return {
+      sync: 'OutOfSync',
+      health: 'Degraded',
+      message: stalledCondition.message || 'Reconciliation stalled',
+      lastSyncTime: readyCondition?.lastTransitionTime,
+      suspended: false,
+    }
+  }
+
+  // Handle not ready state
+  if (readyCondition?.status === 'False') {
+    const reason = readyCondition.reason || ''
+    const isTransient = reason.includes('Progress') || reason.includes('Retry') || reason.includes('Wait')
+
+    return {
+      sync: 'OutOfSync',
+      health: isTransient ? 'Progressing' : 'Degraded',
+      message: readyCondition.message,
+      lastSyncTime: readyCondition.lastTransitionTime,
+      suspended: false,
+    }
+  }
+
+  // Unknown state
+  return {
+    sync: 'Unknown',
+    health: 'Unknown',
+    message: 'Status cannot be determined',
+    suspended: false,
+  }
+}
+
+// ============================================================================
+// ARGO STATUS MAPPER
+// ============================================================================
+
+/** ArgoCD sync status values */
+export type ArgoSyncStatus = 'Synced' | 'OutOfSync' | 'Unknown'
+
+/** ArgoCD health status values */
+export type ArgoHealthStatus = 'Healthy' | 'Progressing' | 'Degraded' | 'Suspended' | 'Missing' | 'Unknown'
+
+/** ArgoCD operation phase values */
+export type ArgoOperationPhase = 'Running' | 'Succeeded' | 'Failed' | 'Error' | 'Terminating'
+
+/** ArgoCD sync result resource */
+export interface ArgoSyncResultResource {
+  group?: string
+  version?: string
+  kind: string
+  namespace?: string
+  name: string
+  status?: string
+  message?: string
+  hookPhase?: string
+}
+
+/** ArgoCD sync result source */
+export interface ArgoSyncResultSource {
+  repoURL?: string
+  path?: string
+  targetRevision?: string
+  chart?: string
+}
+
+export interface ArgoAppStatus {
+  sync?: {
+    status?: ArgoSyncStatus | string // Known types + allow unknown
+    revision?: string
+  }
+  health?: {
+    status?: ArgoHealthStatus | string // Known types + allow unknown
+    message?: string
+  }
+  operationState?: {
+    phase?: ArgoOperationPhase | string // Known types + allow unknown
+    message?: string
+    finishedAt?: string
+    syncResult?: {
+      revision?: string
+      source?: ArgoSyncResultSource
+      resources?: ArgoSyncResultResource[]
+    }
+  }
+  reconciledAt?: string
+}
+
+/**
+ * Maps ArgoCD Application status to unified GitOpsStatus
+ *
+ * ArgoCD status patterns:
+ * - sync.status: Synced, OutOfSync, Unknown
+ * - health.status: Healthy, Progressing, Degraded, Suspended, Missing, Unknown
+ * - operationState.phase: Running, Succeeded, Failed, Error
+ */
+export function argoStatusToGitOpsStatus(status: ArgoAppStatus): GitOpsStatus {
+  const syncStatus = status.sync?.status
+  const healthStatus = status.health?.status
+  const opPhase = status.operationState?.phase
+
+  // Map sync status
+  let sync: SyncStatus = 'Unknown'
+  if (syncStatus === 'Synced') {
+    sync = 'Synced'
+  } else if (syncStatus === 'OutOfSync') {
+    sync = 'OutOfSync'
+  } else if (opPhase === 'Running') {
+    sync = 'Reconciling'
+  }
+
+  // Map health status
+  let health: GitOpsHealthStatus = 'Unknown'
+  const suspended = healthStatus === 'Suspended'
+
+  if (suspended) {
+    health = 'Suspended'
+  } else if (healthStatus === 'Healthy') {
+    health = 'Healthy'
+  } else if (healthStatus === 'Progressing') {
+    health = 'Progressing'
+  } else if (healthStatus === 'Degraded') {
+    health = 'Degraded'
+  } else if (healthStatus === 'Missing') {
+    health = 'Missing'
+  }
+
+  // Override with operation state if active
+  if (opPhase === 'Running') {
+    health = 'Progressing'
+  } else if (opPhase === 'Failed' || opPhase === 'Error') {
+    health = 'Degraded'
+  }
+
+  return {
+    sync,
+    health,
+    message: status.health?.message || status.operationState?.message,
+    lastSyncTime: status.reconciledAt || status.operationState?.finishedAt,
+    suspended,
+  }
+}
+
+// ============================================================================
+// INVENTORY PARSERS
+// ============================================================================
+
+/**
+ * Parses Flux inventory entries into ManagedResource array
+ *
+ * Flux inventory format: "namespace_name_group_kind"
+ * Example: "default_my-config_core_ConfigMap" or "kube-system_coredns_apps_Deployment"
+ * Note: group can be empty for core resources (e.g., "default_my-config__ConfigMap")
+ *
+ * Malformed entries are filtered out rather than returning invalid resources.
+ */
+export function parseFluxInventory(entries: Array<{ id: string; v?: string }>): ManagedResource[] {
+  return entries
+    .map(entry => {
+      // Format: namespace_name_group_kind
+      // The challenge is that namespace, name, and group can all contain underscores
+      // But the format is always: ns_name_group_kind where kind is the last part
+      const id = entry.id || ''
+      const parts = id.split('_')
+
+      // Minimum: namespace_name_group_kind (4 parts, though name could be empty which is invalid)
+      if (parts.length < 4) {
+        return null // Filter out malformed entries
+      }
+
+      // Kind is always last, group is second-to-last
+      const kind = parts[parts.length - 1]
+      const group = parts[parts.length - 2]
+      // Namespace is first, name is everything in between
+      const namespace = parts[0]
+      const name = parts.slice(1, -2).join('_')
+
+      // Validate required fields
+      if (!kind || !name) {
+        return null // Filter out entries with missing required fields
+      }
+
+      return {
+        group: group || '',
+        kind,
+        namespace,
+        name,
+      }
+    })
+    .filter((r): r is ManagedResource => r !== null)
+}
+
+/**
+ * Parses ArgoCD resource tree into ManagedResource array
+ *
+ * ArgoCD format: Array of {group, kind, namespace, name, health, status}
+ */
+export interface ArgoResource {
+  group?: string
+  kind: string
+  namespace?: string
+  name: string
+  health?: {
+    status?: ArgoHealthStatus | string // Known types + allow unknown
+    message?: string
+  }
+  status?: ArgoSyncStatus | string // Known types + allow unknown
+}
+
+export function parseArgoResources(resources: ArgoResource[]): ManagedResource[] {
+  return resources.map(r => ({
+    group: r.group || '',
+    kind: r.kind,
+    namespace: r.namespace || '',
+    name: r.name,
+    health: mapArgoHealth(r.health?.status),
+    sync: r.status === 'Synced' ? 'Synced' : r.status === 'OutOfSync' ? 'OutOfSync' : undefined,
+  }))
+}
+
+/** Maps an ArgoCD health status string to the unified GitOpsHealthStatus type */
+export function mapArgoHealth(status?: string): GitOpsHealthStatus | undefined {
+  if (!status) return undefined
+  switch (status) {
+    case 'Healthy': return 'Healthy'
+    case 'Progressing': return 'Progressing'
+    case 'Degraded': return 'Degraded'
+    case 'Suspended': return 'Suspended'
+    case 'Missing': return 'Missing'
+    default: return 'Unknown'
+  }
+}
+
+// ============================================================================
+// UTILITY FUNCTIONS
+// ============================================================================
+
+/**
+ * Checks if a GitOps resource has issues (not synced or unhealthy)
+ */
+export function hasGitOpsIssues(status: GitOpsStatus): boolean {
+  return status.sync !== 'Synced' ||
+         (status.health !== 'Healthy' && status.health !== 'Suspended')
+}
+
+/**
+ * Gets a single-line summary of GitOps status
+ */
+export function getGitOpsStatusSummary(status: GitOpsStatus): string {
+  if (status.suspended) {
+    return 'Suspended'
+  }
+  if (status.sync === 'Reconciling') {
+    return 'Syncing...'
+  }
+  if (status.sync === 'Synced' && status.health === 'Healthy') {
+    return 'Synced'
+  }
+  if (status.health === 'Progressing') {
+    return 'Progressing'
+  }
+  if (status.sync === 'OutOfSync') {
+    return 'Out of Sync'
+  }
+  if (status.health === 'Degraded') {
+    return 'Degraded'
+  }
+  return status.sync
+}
+
+/**
+ * Gets the appropriate color class for a GitOps status
+ */
+export function getGitOpsStatusColor(status: GitOpsStatus): string {
+  if (status.suspended) {
+    return 'status-degraded'
+  }
+  if (status.sync === 'Synced' && status.health === 'Healthy') {
+    return 'status-healthy'
+  }
+  if (status.health === 'Degraded') {
+    return 'status-unhealthy'
+  }
+  if (status.sync === 'OutOfSync' || status.health === 'Progressing') {
+    return 'status-degraded'
+  }
+  return 'status-unknown'
+}
+
+/**
+ * Groups managed resources by kind for display
+ */
+export function groupManagedResourcesByKind(resources: ManagedResource[]): Map<string, ManagedResource[]> {
+  const grouped = new Map<string, ManagedResource[]>()
+
+  for (const resource of resources) {
+    const key = resource.kind
+    const existing = grouped.get(key) || []
+    existing.push(resource)
+    grouped.set(key, existing)
+  }
+
+  return grouped
+}

package/src/types/index.ts

@@ -0,0 +1,2 @@
+export * from './core'
+export * from './gitops'

package/src/utils/animation.ts

@@ -0,0 +1,40 @@
+/**
+ * Central animation presets for consistent motion across the UI.
+ *
+ * All animations use GPU-composited properties only (translate, scale, opacity)
+ * to guarantee 60fps. The iOS-like spring easing gives a fast-in, gentle-out feel.
+ */
+
+// -- Easing ------------------------------------------------------------------
+
+// Tailwind-safe easing (no spaces — Tailwind splits class strings on whitespace)
+const TW_EASE = 'ease-[cubic-bezier(0.32,0.72,0,1)]'
+
+/** Raw CSS easing for inline transition strings */
+export const CSS_EASE = 'cubic-bezier(0.32, 0.72, 0, 1)'
+
+// -- Durations (ms) ----------------------------------------------------------
+
+/** Standard UI transitions: overlays, panels, toasts */
+export const DURATION_NORMAL = 300
+/** Dock height, subtle layout shifts */
+export const DURATION_DOCK = 250
+/** Toast exit animation */
+export const DURATION_TOAST_EXIT = 200
+
+// -- Tailwind class presets ---------------------------------------------------
+// Reusable class fragments — import and spread into clsx() calls.
+
+/** Drawer slide from right — use with translate-x-0/translate-x-full + opacity.
+ *  Also handles expand/collapse (width) so a single transition covers both. */
+export const TRANSITION_DRAWER =
+  `transition-[translate,opacity,width] duration-300 ${TW_EASE} will-change-[transform,width]`
+
+
+/** Overlay backdrop fade */
+export const TRANSITION_BACKDROP =
+  'transition-opacity duration-200'
+
+/** Overlay panel scale + fade — use with scale-100/scale-[0.97] + opacity */
+export const TRANSITION_PANEL =
+  `transition-[translate,scale,opacity] duration-300 ${TW_EASE}`

package/src/utils/api-resources.ts

@@ -0,0 +1,185 @@
+import type { APIResource } from '../types'
+
+// Group resources by category for sidebar display
+export interface ResourceCategory {
+  name: string
+  resources: APIResource[]
+}
+
+// Known core resource categories
+const WORKLOAD_KINDS = ['Pod', 'Deployment', 'Rollout', 'DaemonSet', 'StatefulSet', 'ReplicaSet', 'Job', 'CronJob']
+const NETWORKING_KINDS = ['Service', 'Ingress', 'IngressClass', 'NetworkPolicy', 'Endpoints', 'EndpointSlice']
+const CONFIG_KINDS = ['ConfigMap', 'Secret', 'HorizontalPodAutoscaler', 'PodDisruptionBudget', 'LimitRange', 'ResourceQuota', 'PriorityClass', 'RuntimeClass', 'Lease', 'MutatingWebhookConfiguration', 'ValidatingWebhookConfiguration']
+const STORAGE_KINDS = ['PersistentVolumeClaim', 'PersistentVolume', 'StorageClass', 'VolumeAttachment']
+const ACCESS_CONTROL_KINDS = ['ServiceAccount', 'Role', 'ClusterRole', 'RoleBinding', 'ClusterRoleBinding']
+const CLUSTER_KINDS = ['Node', 'Namespace', 'Event']
+
+// Core resources that must always be present (fallback if API discovery misses them)
+export const CORE_RESOURCES: APIResource[] = [
+  { group: '', version: 'v1', kind: 'Pod', name: 'pods', namespaced: true, isCrd: false, verbs: ['list', 'get', 'watch'] },
+  { group: '', version: 'v1', kind: 'Service', name: 'services', namespaced: true, isCrd: false, verbs: ['list', 'get', 'watch'] },
+  { group: '', version: 'v1', kind: 'ConfigMap', name: 'configmaps', namespaced: true, isCrd: false, verbs: ['list', 'get', 'watch'] },
+  { group: '', version: 'v1', kind: 'Secret', name: 'secrets', namespaced: true, isCrd: false, verbs: ['list', 'get', 'watch'] },
+  { group: '', version: 'v1', kind: 'Node', name: 'nodes', namespaced: false, isCrd: false, verbs: ['list', 'get', 'watch'] },
+  { group: '', version: 'v1', kind: 'Namespace', name: 'namespaces', namespaced: false, isCrd: false, verbs: ['list', 'get', 'watch'] },
+  { group: '', version: 'v1', kind: 'ServiceAccount', name: 'serviceaccounts', namespaced: true, isCrd: false, verbs: ['list', 'get', 'watch'] },
+  { group: '', version: 'v1', kind: 'PersistentVolumeClaim', name: 'persistentvolumeclaims', namespaced: true, isCrd: false, verbs: ['list', 'get', 'watch'] },
+  { group: '', version: 'v1', kind: 'PersistentVolume', name: 'persistentvolumes', namespaced: false, isCrd: false, verbs: ['list', 'get', 'watch'] },
+  { group: 'apps', version: 'v1', kind: 'Deployment', name: 'deployments', namespaced: true, isCrd: false, verbs: ['list', 'get', 'watch'] },
+  { group: 'apps', version: 'v1', kind: 'DaemonSet', name: 'daemonsets', namespaced: true, isCrd: false, verbs: ['list', 'get', 'watch'] },
+  { group: 'apps', version: 'v1', kind: 'StatefulSet', name: 'statefulsets', namespaced: true, isCrd: false, verbs: ['list', 'get', 'watch'] },
+  { group: 'apps', version: 'v1', kind: 'ReplicaSet', name: 'replicasets', namespaced: true, isCrd: false, verbs: ['list', 'get', 'watch'] },
+  { group: 'batch', version: 'v1', kind: 'Job', name: 'jobs', namespaced: true, isCrd: false, verbs: ['list', 'get', 'watch'] },
+  { group: 'batch', version: 'v1', kind: 'CronJob', name: 'cronjobs', namespaced: true, isCrd: false, verbs: ['list', 'get', 'watch'] },
+  { group: 'networking.k8s.io', version: 'v1', kind: 'Ingress', name: 'ingresses', namespaced: true, isCrd: false, verbs: ['list', 'get', 'watch'] },
+  { group: 'networking.k8s.io', version: 'v1', kind: 'NetworkPolicy', name: 'networkpolicies', namespaced: true, isCrd: false, verbs: ['list', 'get', 'watch'] },
+  { group: 'autoscaling', version: 'v2', kind: 'HorizontalPodAutoscaler', name: 'horizontalpodautoscalers', namespaced: true, isCrd: false, verbs: ['list', 'get', 'watch'] },
+  { group: '', version: 'v1', kind: 'Event', name: 'events', namespaced: true, isCrd: false, verbs: ['list', 'get', 'watch'] },
+  { group: 'rbac.authorization.k8s.io', version: 'v1', kind: 'Role', name: 'roles', namespaced: true, isCrd: false, verbs: ['list', 'get', 'watch'] },
+  { group: 'rbac.authorization.k8s.io', version: 'v1', kind: 'ClusterRole', name: 'clusterroles', namespaced: false, isCrd: false, verbs: ['list', 'get', 'watch'] },
+  { group: 'rbac.authorization.k8s.io', version: 'v1', kind: 'RoleBinding', name: 'rolebindings', namespaced: true, isCrd: false, verbs: ['list', 'get', 'watch'] },
+  { group: 'rbac.authorization.k8s.io', version: 'v1', kind: 'ClusterRoleBinding', name: 'clusterrolebindings', namespaced: false, isCrd: false, verbs: ['list', 'get', 'watch'] },
+  { group: 'networking.k8s.io', version: 'v1', kind: 'IngressClass', name: 'ingressclasses', namespaced: false, isCrd: false, verbs: ['list', 'get', 'watch'] },
+  { group: 'admissionregistration.k8s.io', version: 'v1', kind: 'MutatingWebhookConfiguration', name: 'mutatingwebhookconfigurations', namespaced: false, isCrd: false, verbs: ['list', 'get', 'watch'] },
+  { group: 'admissionregistration.k8s.io', version: 'v1', kind: 'ValidatingWebhookConfiguration', name: 'validatingwebhookconfigurations', namespaced: false, isCrd: false, verbs: ['list', 'get', 'watch'] },
+  { group: 'scheduling.k8s.io', version: 'v1', kind: 'PriorityClass', name: 'priorityclasses', namespaced: false, isCrd: false, verbs: ['list', 'get', 'watch'] },
+  { group: 'node.k8s.io', version: 'v1', kind: 'RuntimeClass', name: 'runtimeclasses', namespaced: false, isCrd: false, verbs: ['list', 'get', 'watch'] },
+  { group: 'coordination.k8s.io', version: 'v1', kind: 'Lease', name: 'leases', namespaced: true, isCrd: false, verbs: ['list', 'get', 'watch'] },
+  { group: 'storage.k8s.io', version: 'v1', kind: 'VolumeAttachment', name: 'volumeattachments', namespaced: false, isCrd: false, verbs: ['list', 'get', 'watch'] },
+]
+
+// Resources that should be hidden from the sidebar
+const HIDDEN_KINDS = ['PodMetrics', 'NodeMetrics']
+
+export function categorizeResources(resources: APIResource[]): ResourceCategory[] {
+  const listableResources = resources.filter(r =>
+    r.verbs?.includes('list') && !HIDDEN_KINDS.includes(r.kind) &&
+    !(r.kind === 'Event' && r.group === 'events.k8s.io')
+  )
+
+  const seenKinds = new Map<string, APIResource>()
+  const dedupKey = (r: APIResource) => r.isCrd ? `${r.group}/${r.kind}` : r.kind
+
+  for (const resource of CORE_RESOURCES) {
+    seenKinds.set(dedupKey(resource), resource)
+  }
+  for (const resource of listableResources) {
+    seenKinds.set(dedupKey(resource), resource)
+  }
+  const uniqueResources = Array.from(seenKinds.values())
+
+  const categoryMap = new Map<string, APIResource[]>()
+  function addToCategory(name: string, items: APIResource[]) {
+    if (items.length === 0) return
+    const existing = categoryMap.get(name) || []
+    categoryMap.set(name, [...existing, ...items])
+  }
+
+  const coreResources = uniqueResources.filter(r => !r.isCrd)
+  const workloads = coreResources.filter(r => WORKLOAD_KINDS.includes(r.kind))
+  const networking = coreResources.filter(r => NETWORKING_KINDS.includes(r.kind))
+  const config = coreResources.filter(r => CONFIG_KINDS.includes(r.kind))
+  const storage = coreResources.filter(r => STORAGE_KINDS.includes(r.kind))
+  const accessControl = coreResources.filter(r => ACCESS_CONTROL_KINDS.includes(r.kind))
+  const cluster = coreResources.filter(r => CLUSTER_KINDS.includes(r.kind))
+
+  const crds = uniqueResources.filter(r => r.isCrd)
+  const crdGroups = new Map<string, APIResource[]>()
+  for (const crd of crds) {
+    const group = crd.group || 'custom'
+    if (!crdGroups.has(group)) crdGroups.set(group, [])
+    crdGroups.get(group)!.push(crd)
+  }
+
+  addToCategory('Workloads', workloads)
+  addToCategory('Networking', networking)
+  addToCategory('Configuration', config)
+  addToCategory('Storage', storage)
+  addToCategory('Access Control', accessControl)
+  addToCategory('Cluster', cluster)
+
+  for (const [group, groupResources] of crdGroups) {
+    addToCategory(formatGroupName(group), groupResources)
+  }
+
+  return Array.from(categoryMap.entries()).map(([name, items]) => ({
+    name,
+    resources: sortResources(items),
+  }))
+}
+
+export function formatGroupName(group: string): string {
+  const knownGroups: Record<string, string> = {
+    'argoproj.io': 'Argo',
+    'cert-manager.io': 'Cert Manager',
+    'acme.cert-manager.io': 'Cert Manager',
+    'istio.io': 'Istio',
+    'networking.istio.io': 'Istio',
+    'security.istio.io': 'Istio',
+    'telemetry.istio.io': 'Istio',
+    'monitoring.coreos.com': 'Prometheus',
+    'velero.io': 'Velero',
+    'external-secrets.io': 'External Secrets',
+    'keda.sh': 'KEDA',
+    'gateway.networking.k8s.io': 'Gateway API',
+    'traefik.io': 'Traefik',
+    'traefik.containo.us': 'Traefik',
+    'pkg.crossplane.io': 'Crossplane',
+    'apiextensions.crossplane.io': 'Crossplane',
+    'source.toolkit.fluxcd.io': 'Flux',
+    'helm.toolkit.fluxcd.io': 'Flux',
+    'kustomize.toolkit.fluxcd.io': 'Flux',
+    'notification.toolkit.fluxcd.io': 'Flux',
+    'image.toolkit.fluxcd.io': 'Flux',
+    'serving.knative.dev': 'Knative',
+    'eventing.knative.dev': 'Knative',
+    'messaging.knative.dev': 'Knative',
+    'sources.knative.dev': 'Knative',
+    'networking.internal.knative.dev': 'Knative',
+    'flows.knative.dev': 'Knative',
+    'kafka.strimzi.io': 'Strimzi',
+    'tekton.dev': 'Tekton',
+    'linkerd.io': 'Linkerd',
+    'policy.linkerd.io': 'Linkerd',
+    'cilium.io': 'Cilium',
+    'aquasecurity.github.io': 'Trivy',
+    'bitnami.com': 'Bitnami',
+    'elasticsearch.k8s.elastic.co': 'Elastic',
+    'kibana.k8s.elastic.co': 'Elastic',
+    'apm.k8s.elastic.co': 'Elastic',
+    'beat.k8s.elastic.co': 'Elastic',
+    'agent.k8s.elastic.co': 'Elastic',
+    'maps.k8s.elastic.co': 'Elastic',
+    'logstash.k8s.elastic.co': 'Elastic',
+    'jaegertracing.io': 'Jaeger',
+    'opentelemetry.io': 'OpenTelemetry',
+    'projectcalico.org': 'Calico',
+    'crd.projectcalico.org': 'Calico',
+    'projectcontour.io': 'Contour',
+    'ceph.rook.io': 'Rook',
+    'kyverno.io': 'Kyverno',
+    'k8s.nginx.org': 'NGINX',
+    'sparkoperator.k8s.io': 'Spark',
+    'kubeflow.org': 'Kubeflow',
+    'snapshot.storage.k8s.io': 'Snapshots',
+  }
+  return knownGroups[group] || group
+}
+
+export function shortenGroupName(group: string): string {
+  return group
+    .replace(/\.(io|com|org|dev|sh)$/, '')
+    .replace(/\.k8s$/, '')
+}
+
+function sortResources(resources: APIResource[]): APIResource[] {
+  return [...resources].sort((a, b) => a.kind.localeCompare(b.kind))
+}
+
+export function getKindLabel(kind: string): string {
+  return kind.replace(/([A-Z])/g, ' $1').trim()
+}
+
+export function getKindPlural(resource: APIResource): string {
+  return resource.name
+}