@skyhook-io/k8s-ui 1.8.8 → 1.8.10

package/src/filter-state/filter-state-core.test.ts

@@ -0,0 +1,98 @@
+import { describe, it, expect } from 'vitest'
+import {
+  decodeFilters,
+  defineFilterSchema,
+  withField,
+  withToggle,
+  withCleared,
+  isFilterActive,
+} from './filter-state-core'
+
+const schema = defineFilterSchema({
+  ns: { param: 'namespace', type: 'set' },
+  sev: { param: 'severity', type: 'set' },
+  q: { param: 'q', type: 'text' },
+  group: { param: 'group', type: 'single', default: 'none' },
+  managed: { param: 'managed', type: 'boolean' },
+})
+
+const p = (s = '') => new URLSearchParams(s)
+
+describe('filter-state core', () => {
+  it('decodes params by type', () => {
+    const v = decodeFilters(schema, p('namespace=argocd,default&severity=high&q=foo&managed=1'))
+    expect([...v.ns]).toEqual(['argocd', 'default'])
+    expect([...v.sev]).toEqual(['high'])
+    expect(v.q).toBe('foo')
+    expect(v.managed).toBe(true)
+  })
+
+  it('applies string defaults when the param is absent', () => {
+    const v = decodeFilters(schema, p(''))
+    expect(v.group).toBe('none')
+    expect(v.q).toBe('')
+    expect(v.managed).toBe(false)
+    expect(v.ns.size).toBe(0)
+  })
+
+  it('toggles a set member and omits the param when empty (empty = all)', () => {
+    const added = withToggle(schema, p(''), 'ns', 'argocd')
+    expect(added.toString()).toBe('namespace=argocd')
+    const removed = withToggle(schema, added, 'ns', 'argocd')
+    expect(removed.toString()).toBe('')
+  })
+
+  it('composes successive toggles (each sees the previous result)', () => {
+    let params = p('')
+    params = withToggle(schema, params, 'ns', 'a')
+    params = withToggle(schema, params, 'ns', 'b')
+    expect([...decodeFilters(schema, params).ns].sort()).toEqual(['a', 'b'])
+  })
+
+  it('withField replaces a set wholesale and clears when empty', () => {
+    const set = withField(schema, p('namespace=x'), 'ns', new Set(['a', 'b']))
+    expect([...decodeFilters(schema, set).ns]).toEqual(['a', 'b'])
+    expect(withField(schema, set, 'ns', new Set<string>()).toString()).toBe('')
+  })
+
+  it('omits a string param when equal to its default', () => {
+    expect(withField(schema, p(''), 'group', 'namespace').toString()).toBe('group=namespace')
+    expect(withField(schema, p('group=namespace'), 'group', 'none').toString()).toBe('')
+  })
+
+  it('encodes a boolean as =1 and omits false', () => {
+    expect(withField(schema, p(''), 'managed', true).toString()).toBe('managed=1')
+    expect(withField(schema, p('managed=1'), 'managed', false).toString()).toBe('')
+  })
+
+  it('clears one field or all schema fields, leaving unrelated params', () => {
+    const one = withCleared(schema, p('namespace=a&severity=high&keep=yes'), ['ns'])
+    const oneV = decodeFilters(schema, one)
+    expect(oneV.ns.size).toBe(0)
+    expect(oneV.sev.size).toBe(1)
+    expect(one.get('keep')).toBe('yes')
+    expect(withCleared(schema, p('namespace=a&severity=high&keep=yes')).toString()).toBe('keep=yes')
+  })
+
+  it('isFilterActive is true only when a field diverges from its default', () => {
+    expect(isFilterActive(schema, decodeFilters(schema, p('q=foo')))).toBe(true)
+    expect(isFilterActive(schema, decodeFilters(schema, p('group=none')))).toBe(false)
+    expect(isFilterActive(schema, decodeFilters(schema, p('')))).toBe(false)
+  })
+
+  it('writes set values sorted, so the URL is canonical regardless of order', () => {
+    const a = withToggle(schema, withToggle(schema, p(''), 'ns', 'zebra'), 'ns', 'alpha')
+    expect(a.get('namespace')).toBe('alpha,zebra')
+  })
+
+  it('decodes an empty string param (?group=) as the default', () => {
+    expect(decodeFilters(schema, p('group=')).group).toBe('none')
+    expect(decodeFilters(schema, p('q=')).q).toBe('')
+  })
+
+  it('defineFilterSchema rejects duplicate URL params', () => {
+    expect(() =>
+      defineFilterSchema({ a: { param: 'x', type: 'set' }, b: { param: 'x', type: 'set' } }),
+    ).toThrow(/duplicate/)
+  })
+})

package/src/filter-state/filter-state-core.ts

@@ -0,0 +1,138 @@
+// Pure URL <-> filter-state transforms. No React, no router, no window — just
+// URLSearchParams in, URLSearchParams / typed values out. This is the behavioral
+// contract every list view shares; keeping it pure makes it exhaustively
+// testable and keeps the React hook a thin wrapper.
+
+export interface FilterFieldDef {
+  /** URL query-param name. Stable — this is a durable, shareable public API. */
+  param: string
+  /**
+   * - 'set'     multi-select; comma-list. Empty ⇒ param omitted ⇒ "all" (no
+   *             narrowing). Values must not contain commas (k8s identifiers and
+   *             controlled enums never do). Written sorted, so the URL is
+   *             canonical regardless of selection order. Value: Set<string>.
+   * - 'text'    free-text search; written with history `replace` (no entry per
+   *             keystroke). Omitted when empty / equal to `default`. Value: string.
+   * - 'single'  single choice (enum / dropdown, incl. tri-state all|yes|no);
+   *             pushes a history entry. Omitted when equal to `default`. Value:
+   *             string.
+   * - 'boolean' two-state flag; `param=1` when true, omitted when false. For
+   *             three states use 'single' with an enum default. Value: boolean.
+   */
+  type: 'set' | 'text' | 'single' | 'boolean'
+  /** Default for 'text'/'single' (omitted from the URL when the value equals it). */
+  default?: string
+}
+
+export type FilterSchema = Record<string, FilterFieldDef>
+
+type FieldValue<F extends FilterFieldDef> = F['type'] extends 'set'
+  ? Set<string>
+  : F['type'] extends 'boolean'
+    ? boolean
+    : string
+
+export type FilterValues<S extends FilterSchema> = { [K in keyof S]: FieldValue<S[K]> }
+
+/** Keys of a schema whose field is one of the given kinds — for type-safe setters. */
+export type FieldKeysOfType<S extends FilterSchema, T extends FilterFieldDef['type']> = {
+  [K in keyof S]: S[K]['type'] extends T ? K : never
+}[keyof S]
+
+/**
+ * Identity helper that preserves literal types (so `values.x` is precisely typed)
+ * and validates the schema — duplicate URL params would silently clobber each
+ * other, so we fail loudly at module load.
+ */
+export function defineFilterSchema<const S extends FilterSchema>(schema: S): S {
+  const seen = new Set<string>()
+  for (const key in schema) {
+    const { param } = schema[key]
+    if (seen.has(param)) throw new Error(`defineFilterSchema: duplicate URL param "${param}"`)
+    seen.add(param)
+  }
+  return schema
+}
+
+export function decodeFilters<S extends FilterSchema>(schema: S, params: URLSearchParams): FilterValues<S> {
+  const out = {} as FilterValues<S>
+  for (const key in schema) {
+    const def = schema[key]
+    const raw = params.get(def.param)
+    if (def.type === 'set') {
+      ;(out[key] as Set<string>) = new Set((raw ?? '').split(',').filter(Boolean))
+    } else if (def.type === 'boolean') {
+      ;(out[key] as boolean) = raw === '1'
+    } else {
+      // text / single: an empty param (?f=) reads as the default, same as omission.
+      ;(out[key] as string) = raw ? raw : (def.default ?? '')
+    }
+  }
+  return out
+}
+
+/** Write one field into `params` in place. Read (decode) and write agree exactly. */
+function writeField(params: URLSearchParams, def: FilterFieldDef, value: Set<string> | string | boolean): void {
+  if (def.type === 'set') {
+    const set = value as Set<string>
+    if (set.size === 0) params.delete(def.param)
+    else params.set(def.param, [...set].sort().join(','))
+  } else if (def.type === 'boolean') {
+    if (value) params.set(def.param, '1')
+    else params.delete(def.param)
+  } else {
+    const str = value as string
+    if (!str || str === (def.default ?? '')) params.delete(def.param)
+    else params.set(def.param, str)
+  }
+}
+
+/** Return new params with one field set to `value`. */
+export function withField<S extends FilterSchema>(
+  schema: S,
+  params: URLSearchParams,
+  key: keyof S,
+  value: Set<string> | string | boolean,
+): URLSearchParams {
+  const next = new URLSearchParams(params)
+  writeField(next, schema[key], value)
+  return next
+}
+
+/** Return new params with one member added to / removed from a 'set' field. */
+export function withToggle<S extends FilterSchema>(
+  schema: S,
+  params: URLSearchParams,
+  key: keyof S,
+  value: string,
+): URLSearchParams {
+  const next = new URLSearchParams(params)
+  const cur = new Set((next.get(schema[key].param) ?? '').split(',').filter(Boolean))
+  if (cur.has(value)) cur.delete(value)
+  else cur.add(value)
+  writeField(next, schema[key], cur)
+  return next
+}
+
+/** Default (empty) value for a field, used to reset it. */
+export function emptyValue(def: FilterFieldDef): Set<string> | string | boolean {
+  return def.type === 'set' ? new Set<string>() : def.type === 'boolean' ? false : (def.default ?? '')
+}
+
+/** Return new params with the given schema fields cleared (all of them if omitted). */
+export function withCleared<S extends FilterSchema>(schema: S, params: URLSearchParams, keys?: (keyof S)[]): URLSearchParams {
+  const next = new URLSearchParams(params)
+  for (const key of keys ?? (Object.keys(schema) as (keyof S)[])) next.delete(schema[key].param)
+  return next
+}
+
+export function isFilterActive<S extends FilterSchema>(schema: S, values: FilterValues<S>): boolean {
+  for (const key in schema) {
+    const def = schema[key]
+    const v = values[key]
+    if (def.type === 'set' && (v as Set<string>).size > 0) return true
+    if (def.type === 'boolean' && (v as boolean)) return true
+    if ((def.type === 'text' || def.type === 'single') && (v as string) !== (def.default ?? '')) return true
+  }
+  return false
+}

package/src/filter-state/filter-state.tsx

@@ -0,0 +1,127 @@
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, type ReactNode } from 'react'
+import {
+  decodeFilters,
+  isFilterActive,
+  withCleared,
+  withField,
+  withToggle,
+  emptyValue,
+  type FieldKeysOfType,
+  type FilterSchema,
+  type FilterValues,
+} from './filter-state-core'
+
+// Shared filter-state contract for Radar's list views (OSS + Hub).
+//
+// The consolidation center is BEHAVIOR, not components: one place owns how a
+// view's filters serialize to the URL, what "cleared" means, and how defaults
+// encode — so every list view is shareable/bookmarkable and behaves the same,
+// whether it renders as a facet sidebar or a compact bar.
+//
+// URL is the single source of truth (no localStorage of filter values — that
+// goes stale across clusters/orgs). Router-agnostic + app-agnostic: this never
+// imports react-router or reads window; the host injects a FilterLocation
+// adapter over its own router. All transforms live in ./filter-state-core (pure,
+// exhaustively tested); this file is only the React glue.
+
+/** A reactive view of the URL query string, injected by the host app. */
+export interface FilterLocation {
+  /** Current query params — reactive (sourced from the app's router hook). */
+  searchParams: URLSearchParams
+  /**
+   * Apply an update. The updater receives the LATEST params (not a captured
+   * snapshot), so rapid successive toggles compose instead of clobbering.
+   * `replace` avoids a history entry per keystroke (used for text fields).
+   */
+  update: (updater: (prev: URLSearchParams) => URLSearchParams, opts?: { replace?: boolean }) => void
+}
+
+const FilterLocationContext = createContext<FilterLocation | null>(null)
+
+/**
+ * Wrap the app subtree once with the host's router adapter, e.g.
+ *   const [searchParams, setSearchParams] = useSearchParams()
+ *   <FilterLocationProvider value={{ searchParams, update: setSearchParams }}>
+ */
+export function FilterLocationProvider({ value, children }: { value: FilterLocation; children: ReactNode }) {
+  return <FilterLocationContext.Provider value={value}>{children}</FilterLocationContext.Provider>
+}
+
+export function useFilterLocation(): FilterLocation {
+  const ctx = useContext(FilterLocationContext)
+  if (!ctx) throw new Error('useFilterState requires a <FilterLocationProvider> ancestor')
+  return ctx
+}
+
+export interface FilterState<S extends FilterSchema> {
+  values: FilterValues<S>
+  /** Any field diverges from its default (⇒ show a "Clear all" affordance). */
+  isActive: boolean
+  /** Add/remove one value in a 'set' field. */
+  toggle: (key: FieldKeysOfType<S, 'set'>, value: string) => void
+  /** Replace a 'set' field wholesale. */
+  setSet: (key: FieldKeysOfType<S, 'set'>, values: string[]) => void
+  /** Set a 'text' or 'single' field. 'text' replaces history; 'single' pushes it. */
+  setString: (key: FieldKeysOfType<S, 'text' | 'single'>, value: string) => void
+  setBoolean: (key: FieldKeysOfType<S, 'boolean'>, value: boolean) => void
+  /** Reset one field to its default. */
+  clear: (key: keyof S) => void
+  /** Reset every field in the schema (leaves unrelated params untouched). */
+  clearAll: () => void
+}
+
+export function useFilterState<S extends FilterSchema>(schema: S): FilterState<S> {
+  const ctx = useContext(FilterLocationContext)
+
+  // Graceful fallback: without a provider, keep filter state locally (still
+  // works, just not URL-synced). This lets a shared view adopt the contract
+  // before every host has wired a FilterLocationBridge — a host that hasn't
+  // (e.g. Radar Hub, until it picks up a published build) keeps its prior local
+  // behavior instead of crashing. A one-time warning flags the missing wiring.
+  const [localParams, setLocalParams] = useState(() => new URLSearchParams())
+  const warned = useRef(false)
+  useEffect(() => {
+    if (!ctx && !warned.current) {
+      warned.current = true
+      console.warn('[k8s-ui] useFilterState: no <FilterLocationProvider> ancestor — filters are local, not URL-synced.')
+    }
+  }, [ctx])
+  const fallback = useMemo<FilterLocation>(
+    () => ({ searchParams: localParams, update: (u) => setLocalParams((prev) => u(new URLSearchParams(prev))) }),
+    [localParams],
+  )
+  const { searchParams, update } = ctx ?? fallback
+
+  // Depend on the serialized string, not the URLSearchParams object identity, so
+  // a router adapter that returns a mutated/unstable instance can't stale the memo.
+  const paramsKey = searchParams.toString()
+  const values = useMemo(() => decodeFilters(schema, new URLSearchParams(paramsKey)), [schema, paramsKey])
+  const isActive = useMemo(() => isFilterActive(schema, values), [schema, values])
+
+  const toggle = useCallback(
+    (key: FieldKeysOfType<S, 'set'>, value: string) => update((prev) => withToggle(schema, prev, key, value)),
+    [schema, update],
+  )
+  const setSet = useCallback(
+    (key: FieldKeysOfType<S, 'set'>, vals: string[]) => update((prev) => withField(schema, prev, key, new Set(vals))),
+    [schema, update],
+  )
+  const setString = useCallback(
+    (key: FieldKeysOfType<S, 'text' | 'single'>, v: string) =>
+      // Typing into a search box shouldn't spam history; picking an enum should be
+      // a real back-step. 'text' replaces, 'single' pushes.
+      update((prev) => withField(schema, prev, key, v), { replace: schema[key].type === 'text' }),
+    [schema, update],
+  )
+  const setBoolean = useCallback(
+    (key: FieldKeysOfType<S, 'boolean'>, v: boolean) => update((prev) => withField(schema, prev, key, v)),
+    [schema, update],
+  )
+  const clear = useCallback(
+    (key: keyof S) => update((prev) => withField(schema, prev, key, emptyValue(schema[key]))),
+    [schema, update],
+  )
+  const clearAll = useCallback(() => update((prev) => withCleared(schema, prev)), [schema, update])
+
+  return { values, isActive, toggle, setSet, setString, setBoolean, clear, clearAll }
+}

package/src/filter-state/index.ts

@@ -0,0 +1,16 @@
+export {
+  FilterLocationProvider,
+  useFilterLocation,
+  useFilterState,
+} from './filter-state'
+export type { FilterLocation, FilterState } from './filter-state'
+export {
+  defineFilterSchema,
+  decodeFilters,
+  withField,
+  withToggle,
+  withCleared,
+  emptyValue,
+  isFilterActive,
+} from './filter-state-core'
+export type { FilterFieldDef, FilterSchema, FilterValues, FieldKeysOfType } from './filter-state-core'

package/src/index.ts

@@ -61,6 +61,10 @@ export * from './components/namespace-switcher'
 // segments into one unit (OSS header + Radar Hub cluster top bar)
 export * from './components/scope-pill'
 
+// Filter-state contract — shared URL-synced filter state for list views (OSS +
+// Hub), router-agnostic via an injected FilterLocation adapter
+export * from './filter-state'
+
 // Applications (shared host-agnostic list + detail shell for the deployable-
 // software surface; OSS renders single-cluster, Cloud adds the fleet layer)
 export * from './components/applications'

package/src/theme/variables.css

@@ -54,6 +54,10 @@
   --border-default: light-dark(#D8E0EE, #222840);
   --border-light: light-dark(#CDD6E8, #2C324A);
   --border-subtle: light-dark(rgba(74, 100, 180, 0.07), rgba(255, 255, 255, 0.04));
+  /* Emphasis edge for the focused/expanded card in a queue — must read clearly
+     against sibling cards' --border-default, unlike --border-light's one-notch
+     step. */
+  --border-emphasis: light-dark(#96A8CA, rgba(255, 255, 255, 0.22));
   --border-focus: var(--color-brand);
 
   /* ── Accent ── */
@@ -108,6 +112,16 @@
   --group-icon-app: light-dark(#059669, #34d399);
   --group-icon-label: light-dark(#d97706, #fbbf24);
 
+  /* ── Terminal / console surface (intentionally dark in BOTH themes — it's a
+     console, not chrome). The outer border darkens on a light page and lightens
+     on a dark one so the block stays defined; the inner divider and text stay
+     light because the surface is always dark. ── */
+  --terminal-bg: #0F172A;
+  --terminal-border: light-dark(#1E293B, rgba(255, 255, 255, 0.10));
+  --terminal-divider: rgba(255, 255, 255, 0.10);
+  --terminal-label: #94A3B8;
+  --terminal-text: #CBD5E1;
+
   /* ── ANSI terminal colors (theme-aware for log viewer) ── */
   --ansi-black:   light-dark(#3b3b3b, #4c4c4c);
   --ansi-red:     light-dark(#cd3131, #cd3131);

package/src/utils/api-resources.test.ts

@@ -0,0 +1,54 @@
+import { describe, expect, it } from 'vitest'
+import { categorizeResources, formatGroupName, shortenGroupName } from './api-resources'
+
+describe('formatGroupName', () => {
+  it('uses friendly names for common CRD groups seen in clusters', () => {
+    expect(formatGroupName('policies.kyverno.io')).toBe('Kyverno')
+    expect(formatGroupName('networking.gke.io')).toBe('GKE Networking')
+    expect(formatGroupName('apiregistration.k8s.io')).toBe('API Registration')
+    expect(formatGroupName('monitoring.googleapis.com')).toBe('Google Cloud Monitoring')
+    expect(formatGroupName('sql.cnrm.cloud.google.com')).toBe('Config Connector')
+    expect(formatGroupName('crd.k8s.amazonaws.com')).toBe('AWS VPC CNI')
+    expect(formatGroupName('acid.zalan.do')).toBe('Zalando Postgres')
+  })
+
+  it('formats unmapped API groups without exposing raw domain strings', () => {
+    expect(formatGroupName('widgets.example.io')).toBe('Example Widgets')
+    expect(formatGroupName('api.my-company.dev')).toBe('My Company API')
+    expect(formatGroupName('dns.gke.example.io')).toBe('Example DNS GKE')
+    expect(formatGroupName('widgets.example.io')).not.toMatch(/\./)
+  })
+
+  it('does not promote Kubernetes domain-family suffixes into visible labels', () => {
+    expect(formatGroupName('flowcontrol.apiserver.k8s.io')).toBe('Apiserver Flowcontrol')
+    expect(formatGroupName('addons.cluster.x-k8s.io')).toBe('Cluster API')
+    expect(formatGroupName('ipam.cluster.x-k8s.io')).toBe('Cluster API')
+    expect(formatGroupName('nfd.k8s-sigs.io')).toBe('NFD')
+  })
+
+  it('keeps unmapped CRD groups separate from core categories', () => {
+    expect(formatGroupName('networking.io')).toBe('Networking APIs')
+    expect(formatGroupName('storage.io')).toBe('Storage APIs')
+  })
+
+  it('keeps shortenGroupName as the legacy suffix-stripping helper', () => {
+    expect(shortenGroupName('networking.gke.io')).toBe('networking.gke')
+    expect(shortenGroupName('rbac.authorization.k8s.io')).toBe('rbac.authorization')
+    expect(shortenGroupName('widgets.example.dev')).toBe('widgets.example')
+  })
+})
+
+describe('categorizeResources', () => {
+  it('does not merge unmapped CRDs into matching core categories', () => {
+    const categories = categorizeResources([
+      { group: 'networking.io', version: 'v1', kind: 'WidgetRoute', name: 'widgetroutes', namespaced: true, isCrd: true, verbs: ['list'] },
+    ])
+
+    const networking = categories.find(c => c.name === 'Networking')
+    const networkingAPIs = categories.find(c => c.name === 'Networking APIs')
+
+    expect(networking?.resources.some(r => r.kind === 'Service')).toBe(true)
+    expect(networking?.resources.some(r => r.kind === 'WidgetRoute')).toBe(false)
+    expect(networkingAPIs?.resources.map(r => r.kind)).toEqual(['WidgetRoute'])
+  })
+})

package/src/utils/api-resources.ts

@@ -13,6 +13,7 @@ const CONFIG_KINDS = ['ConfigMap', 'Secret', 'HorizontalPodAutoscaler', 'PodDisr
 const STORAGE_KINDS = ['PersistentVolumeClaim', 'PersistentVolume', 'StorageClass', 'VolumeAttachment']
 const ACCESS_CONTROL_KINDS = ['ServiceAccount', 'Role', 'ClusterRole', 'RoleBinding', 'ClusterRoleBinding']
 const CLUSTER_KINDS = ['Node', 'Namespace', 'Event']
+const CORE_CATEGORY_NAMES = new Set(['Workloads', 'Networking', 'Configuration', 'Storage', 'Access Control', 'Cluster'])
 
 // Core resources that must always be present (fallback if API discovery misses them)
 export const CORE_RESOURCES: APIResource[] = [
@@ -112,6 +113,7 @@ export function categorizeResources(resources: APIResource[]): ResourceCategory[
 export function formatGroupName(group: string): string {
   const knownGroups: Record<string, string> = {
     'argoproj.io': 'Argo',
+    'apiregistration.k8s.io': 'API Registration',
     'cert-manager.io': 'Cert Manager',
     'acme.cert-manager.io': 'Cert Manager',
     'istio.io': 'Istio',
@@ -119,10 +121,12 @@ export function formatGroupName(group: string): string {
     'security.istio.io': 'Istio',
     'telemetry.istio.io': 'Istio',
     'monitoring.coreos.com': 'Prometheus',
+    'monitoring.googleapis.com': 'Google Cloud Monitoring',
     'velero.io': 'Velero',
     'external-secrets.io': 'External Secrets',
     'keda.sh': 'KEDA',
     'gateway.networking.k8s.io': 'Gateway API',
+    'gateway.envoyproxy.io': 'Envoy Gateway',
     'traefik.io': 'Traefik',
     'traefik.containo.us': 'Traefik',
     'crossplane.io': 'Crossplane',
@@ -166,7 +170,11 @@ export function formatGroupName(group: string): string {
     'infrastructure.cluster.x-k8s.io': 'Cluster API',
     'ceph.rook.io': 'Rook',
     'kyverno.io': 'Kyverno',
+    'policies.kyverno.io': 'Kyverno',
     'k8s.nginx.org': 'NGINX',
+    'networking.gke.io': 'GKE Networking',
+    'warden.gke.io': 'GKE Warden',
+    'cloud.google.com': 'Google Cloud',
     'sparkoperator.k8s.io': 'Spark',
     'kubeflow.org': 'Kubeflow',
     'snapshot.storage.k8s.io': 'Snapshots',
@@ -177,6 +185,12 @@ export function formatGroupName(group: string): string {
     'resource.k8s.io': 'Dynamic Resource Allocation',
     'kueue.x-k8s.io': 'Kueue',
     'autoscaling.x-k8s.io': 'Cluster Autoscaler',
+    'crd.k8s.amazonaws.com': 'AWS VPC CNI',
+    'vpcresources.k8s.aws': 'AWS VPC CNI',
+    'elbv2.k8s.aws': 'AWS Load Balancer',
+    'eks.amazonaws.com': 'EKS',
+    'networking.k8s.aws': 'AWS Networking',
+    'acid.zalan.do': 'Zalando Postgres',
     'serving.kserve.io': 'KServe',
     'ray.io': 'KubeRay',
     'leaderworkerset.x-k8s.io': 'LeaderWorkerSet',
@@ -197,7 +211,10 @@ export function formatGroupName(group: string): string {
   // their own per-service groups like s3.aws.upbound.io, compute.gcp.upbound.io).
   if (group.endsWith('.upbound.io')) return 'Crossplane'
   if (group.endsWith('.crossplane.io')) return 'Crossplane'
-  return group
+  if (group === 'cluster.x-k8s.io' || group.endsWith('.cluster.x-k8s.io')) return 'Cluster API'
+  if (group.endsWith('.cnrm.cloud.google.com')) return 'Config Connector'
+  if (group.endsWith('.openshift.io')) return 'OpenShift'
+  return formatUnmappedGroupName(group)
 }
 
 export function shortenGroupName(group: string): string {
@@ -206,6 +223,56 @@ export function shortenGroupName(group: string): string {
     .replace(/\.k8s$/, '')
 }
 
+const GROUP_SUFFIX_LABELS = new Set([
+  'io', 'com', 'org', 'dev', 'sh', 'net', 'do', 'ai', 'cloud', 'co', 'app',
+  'k8s', 'x-k8s', 'k8s-sigs', 'sigs',
+])
+const GROUP_ACRONYMS: Record<string, string> = {
+  api: 'API',
+  aws: 'AWS',
+  amazonaws: 'AWS',
+  cnrm: 'CNRM',
+  crd: 'CRD',
+  csi: 'CSI',
+  dns: 'DNS',
+  gcp: 'GCP',
+  gke: 'GKE',
+  gpu: 'GPU',
+  hpa: 'HPA',
+  ipam: 'IPAM',
+  k8s: 'K8s',
+  nfd: 'NFD',
+  tcp: 'TCP',
+  tls: 'TLS',
+  udp: 'UDP',
+}
+
+function formatUnmappedGroupName(group: string): string {
+  const labels = group
+    .split('.')
+    .map(label => label.trim().toLowerCase())
+    .filter(label => label && !GROUP_SUFFIX_LABELS.has(label))
+
+  if (labels.length === 0) return group
+  if (labels.length === 1) return avoidCoreCategoryCollision(formatGroupToken(labels[0]))
+
+  const owner = labels[labels.length - 1]
+  const descriptors = labels.slice(0, -1)
+  return avoidCoreCategoryCollision([owner, ...descriptors].map(formatGroupToken).join(' '))
+}
+
+function avoidCoreCategoryCollision(label: string): string {
+  return CORE_CATEGORY_NAMES.has(label) ? `${label} APIs` : label
+}
+
+function formatGroupToken(token: string): string {
+  return token
+    .split(/[-_]/)
+    .filter(Boolean)
+    .map(part => GROUP_ACRONYMS[part] ?? part.charAt(0).toUpperCase() + part.slice(1))
+    .join(' ')
+}
+
 function sortResources(resources: APIResource[]): APIResource[] {
   return [...resources].sort((a, b) => a.kind.localeCompare(b.kind))
 }

package/tsconfig.json

@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
-    "target": "ES2020",
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "target": "ES2022",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
     "module": "ESNext",
     "moduleResolution": "bundler",
     "allowImportingTsExtensions": true,