@skyhook-io/k8s-ui 1.6.1 → 1.6.2

package/src/components/shared/ResourceRendererDispatch.tsx

@@ -105,6 +105,7 @@ import {
   ClusterNetworkPolicyRenderer,
   PodDisruptionBudgetRenderer,
   ServiceAccountRenderer,
+  NamespaceRenderer,
   RoleRenderer,
   RoleBindingRenderer,
   WebhookConfigRenderer,
@@ -199,7 +200,23 @@ import {
   AzureManagedControlPlaneRenderer,
   AzureManagedMachinePoolRenderer,
   AzureMachineRenderer,
+  ManagedResourceRenderer,
+  CompositeRenderer,
+  CrossplanePackageRenderer,
+  CrossplaneProviderConfigRenderer,
+  CompositionRenderer,
+  CompositionRevisionRenderer,
+  XRDRenderer,
 } from '../resources/renderers'
+import type { ComposedRefStatus } from '../resources/renderers/CompositeRenderer'
+import {
+  getCrossplaneStatus,
+  getProviderStatus,
+  getProviderConfigStatus,
+  isManagedResource,
+  isComposite,
+  isClaim,
+} from '../resources/resource-utils-crossplane'
 import type { SelectedResource, Relationships, ResourceRef, SecretCertificateInfo, ResolvedEnvFrom, TimelineEvent } from '../../types'
 import type { CopyHandler } from '../ui/drawer-components'
 import { AlertBanner } from '../ui/drawer-components'
@@ -229,6 +246,51 @@ export interface RendererOverrides {
     kind: string; data: any
     onNavigate?: (ref: ResourceRef) => void
   }>
+  // Optional override for Crossplane Composite / Claim — host wraps the
+  // package renderer to fan out per-composed-ref status fetches via React Query.
+  CompositeRenderer?: React.ComponentType<{
+    data: any
+    onNavigate?: (ref: ResourceRef) => void
+    composedRefStatuses?: Map<string, ComposedRefStatus>
+  }>
+  // ServiceAccount reverse-lookup: the host fetches /api/rbac/subject/... and
+  // feeds the result into the base renderer via this wrapper.
+  ServiceAccountRenderer?: React.ComponentType<{
+    data: any
+    onNavigate?: (ref: ResourceRef) => void
+  }>
+  // Role / ClusterRole reverse-lookup: host fetches /api/rbac/role/... so the
+  // detail page can show "who is bound to this role".
+  RoleRenderer?: React.ComponentType<{
+    data: any
+    onNavigate?: (ref: ResourceRef) => void
+  }>
+  // RoleBinding inline rules preview: host fetches the referenced Role/
+  // ClusterRole's rules so the binding view can show what's granted without
+  // a navigation step.
+  RoleBindingRenderer?: React.ComponentType<{
+    data: any
+    onNavigate?: (ref: ResourceRef) => void
+  }>
+  // Namespace RBAC summary: host fetches /api/rbac/namespace/{ns} so the
+  // namespace page can show bindings configured here without falling
+  // through to GenericRenderer.
+  NamespaceRenderer?: React.ComponentType<{
+    data: any
+    onNavigate?: (ref: ResourceRef) => void
+  }>
+  // HPA: host wraps the base renderer to add Prometheus-backed replicas /
+  // metric charts below the static spec data.
+  HPARenderer?: React.ComponentType<{
+    data: any
+    onNavigate?: (ref: ResourceRef) => void
+  }>
+  // PVC: host wraps the base renderer to add a kubelet-derived usage gauge
+  // when Prometheus is scraping kubelet endpoints.
+  PVCRenderer?: React.ComponentType<{
+    data: any
+    onNavigate?: (ref: ResourceRef) => void
+  }>
 }
 
 // Known resource types with specific renderers (module-level to avoid re-allocation)
@@ -243,7 +305,7 @@ const KNOWN_KINDS = new Set([
   'networkpolicies', 'networkpolicy',
   'ciliumnetworkpolicies', 'ciliumnetworkpolicy', 'ciliumclusterwidenetworkpolicies', 'ciliumclusterwidenetworkpolicy',
   'clusternetworkpolicies', 'clusternetworkpolicy',
-  'poddisruptionbudgets', 'serviceaccounts',
+  'poddisruptionbudgets', 'serviceaccounts', 'namespaces',
   'roles', 'clusterroles', 'rolebindings', 'clusterrolebindings',
   'events', 'gitrepositories', 'ocirepositories', 'helmrepositories',
   'kustomizations', 'helmreleases', 'alerts', 'applications',
@@ -282,6 +344,12 @@ const KNOWN_KINDS = new Set([
   // Azure CAPI Infrastructure Provider
   'azuremanagedcontrolplanes', 'azuremanagedmachinepools', 'azuremachines',
   'azuremachinetemplates', 'azuremanagedclusters',
+  // Crossplane core (Managed Resources, Composites, and Claims are detected
+  // dynamically by spec shape — their plurals are unbounded so they're handled
+  // via fall-through, not enumerated in KNOWN_KINDS).
+  'providers', 'providerconfigs',
+  'compositeresourcedefinitions', 'compositions', 'compositionrevisions',
+  'functions', 'configurations',
 ])
 
 // ============================================================================
@@ -355,12 +423,47 @@ export function ResourceRendererDispatch({
 }: ResourceRendererDispatchProps) {
   const kind = resource.kind.toLowerCase()
 
-  const isKnownKind = KNOWN_KINDS.has(kind)
+  // Crossplane Managed Resources / Composites / Claims are detected by spec
+  // shape because their plurals are unbounded (one CRD kind per provider
+  // service). These flags suppress the GenericRenderer fall-through and route
+  // to the right Crossplane renderer below.
+  const isCrossplaneMR = isManagedResource(data)
+  const isCrossplaneClaim = !isCrossplaneMR && isClaim(data)
+  const isCrossplaneXR = !isCrossplaneMR && !isCrossplaneClaim && isComposite(data)
+
+  // Crossplane plurals that collide with foreign CRDs — `configurations`
+  // overlaps Knative serving.knative.dev/Configuration, `functions` could
+  // collide with OpenFaaS, `compositions` is in this list because its
+  // render line is apiVersion-gated. We add these to KNOWN_KINDS so the
+  // Crossplane renderer wins on apiVersion match, but a foreign CR with
+  // the same plural needs to fall through to GenericRenderer — otherwise
+  // it renders blank (no Crossplane match + isKnownKind suppresses
+  // generic). Only kinds whose render lines are apiVersion-gated belong
+  // here; `providerconfigs`/`compositionrevisions`/`compositeresource-
+  // definitions` are Crossplane-specific plurals with no realistic
+  // collision and unguarded render lines, so including them would risk
+  // double-render for foreign CRDs we'll never see.
+  const isCollisionGatedKind =
+    kind === 'providers' || kind === 'functions' || kind === 'configurations' || kind === 'compositions'
+  const crossplaneApiVersionMatched = isCollisionGatedKind && (
+    data?.apiVersion?.startsWith('pkg.crossplane.io/')
+    || data?.apiVersion?.startsWith('apiextensions.crossplane.io/')
+  )
+  const crossplaneCollisionFallthrough = isCollisionGatedKind && !crossplaneApiVersionMatched
+
+  const isKnownKind = KNOWN_KINDS.has(kind) || isCrossplaneMR || isCrossplaneClaim || isCrossplaneXR
 
   const PodComp = rendererOverrides?.PodRenderer ?? PodRenderer
   const WorkloadComp = rendererOverrides?.WorkloadRenderer ?? WorkloadRenderer
   const NodeComp = rendererOverrides?.NodeRenderer ?? NodeRenderer
   const ServiceComp = rendererOverrides?.ServiceRenderer ?? ServiceRenderer
+  const CompositeComp = rendererOverrides?.CompositeRenderer ?? CompositeRenderer
+  const ServiceAccountComp = rendererOverrides?.ServiceAccountRenderer ?? ServiceAccountRenderer
+  const RoleComp = rendererOverrides?.RoleRenderer ?? RoleRenderer
+  const RoleBindingComp = rendererOverrides?.RoleBindingRenderer ?? RoleBindingRenderer
+  const NamespaceComp = rendererOverrides?.NamespaceRenderer ?? NamespaceRenderer
+  const HPAComp = rendererOverrides?.HPARenderer ?? HPARenderer
+  const PVCComp = rendererOverrides?.PVCRenderer ?? PVCRenderer
 
   const sidebarContent = showCommonSections && (
     <>
@@ -385,9 +488,9 @@ export function ResourceRendererDispatch({
         {kind === 'secrets' && <SecretRenderer data={data} certificateInfo={certificateInfo} resourceData={data} onSaveSecretValue={onSaveSecretValue} isSaving={isSavingSecret} />}
         {kind === 'jobs' && <JobRenderer data={data} />}
         {kind === 'cronjobs' && <CronJobRenderer data={data} onNavigate={onNavigate} />}
-        {(kind === 'hpas' || kind === 'horizontalpodautoscalers') && <HPARenderer data={data} onNavigate={onNavigate} />}
+        {(kind === 'hpas' || kind === 'horizontalpodautoscalers') && <HPAComp data={data} onNavigate={onNavigate} />}
         {kind === 'nodes' && <NodeComp data={data} relationships={relationships} />}
-        {kind === 'persistentvolumeclaims' && <PVCRenderer data={data} onNavigate={onNavigate} />}
+        {kind === 'persistentvolumeclaims' && <PVCComp data={data} onNavigate={onNavigate} />}
         {kind === 'rollouts' && <RolloutRenderer data={data} />}
         {kind === 'certificates' && !data?.apiVersion?.includes('networking.internal.knative.dev') && <CertificateRenderer data={data} />}
         {kind === 'workflows' && <WorkflowRenderer data={data} />}
@@ -410,9 +513,10 @@ export function ResourceRendererDispatch({
         {(kind === 'ciliumnetworkpolicies' || kind === 'ciliumnetworkpolicy' || kind === 'ciliumclusterwidenetworkpolicies' || kind === 'ciliumclusterwidenetworkpolicy') && <CiliumNetworkPolicyRenderer data={data} />}
         {(kind === 'clusternetworkpolicies' || kind === 'clusternetworkpolicy') && <ClusterNetworkPolicyRenderer data={data} />}
         {kind === 'poddisruptionbudgets' && <PodDisruptionBudgetRenderer data={data} />}
-        {kind === 'serviceaccounts' && <ServiceAccountRenderer data={data} />}
-        {(kind === 'roles' || kind === 'clusterroles') && <RoleRenderer data={data} />}
-        {(kind === 'rolebindings' || kind === 'clusterrolebindings') && <RoleBindingRenderer data={data} onNavigate={onNavigate} />}
+        {kind === 'serviceaccounts' && <ServiceAccountComp data={data} onNavigate={onNavigate} />}
+        {kind === 'namespaces' && <NamespaceComp data={data} onNavigate={onNavigate} />}
+        {(kind === 'roles' || kind === 'clusterroles') && <RoleComp data={data} onNavigate={onNavigate} />}
+        {(kind === 'rolebindings' || kind === 'clusterrolebindings') && <RoleBindingComp data={data} onNavigate={onNavigate} />}
         {kind === 'events' && <EventRenderer data={data} onNavigate={onNavigate} />}
         {kind === 'gitrepositories' && <GitRepositoryRenderer data={data} />}
         {kind === 'ocirepositories' && <OCIRepositoryRenderer data={data} />}
@@ -525,8 +629,23 @@ export function ResourceRendererDispatch({
         {/* Contour */}
         {kind === 'httpproxies' && <ContourHTTPProxyRenderer data={data} onNavigate={onNavigate} />}
 
-        {/* Generic renderer for CRDs and unknown resource types */}
-        {!isKnownKind && <GenericRenderer data={data} />}
+        {/* Crossplane — kind-dispatched for the static package/config kinds, spec-shape
+            detected for MR/XR/Claim (their plurals are unbounded). */}
+        {kind === 'providers' && data?.apiVersion?.startsWith('pkg.crossplane.io/') && <CrossplanePackageRenderer data={data} kindLabel="Provider" onNavigate={onNavigate} />}
+        {kind === 'functions' && data?.apiVersion?.startsWith('pkg.crossplane.io/') && <CrossplanePackageRenderer data={data} kindLabel="Function" onNavigate={onNavigate} />}
+        {kind === 'configurations' && data?.apiVersion?.startsWith('pkg.crossplane.io/') && <CrossplanePackageRenderer data={data} kindLabel="Configuration" onNavigate={onNavigate} />}
+        {kind === 'providerconfigs' && <CrossplaneProviderConfigRenderer data={data} onNavigate={onNavigate} />}
+        {kind === 'compositeresourcedefinitions' && <XRDRenderer data={data} onNavigate={onNavigate} />}
+        {kind === 'compositions' && data?.apiVersion?.startsWith('apiextensions.crossplane.io/') && <CompositionRenderer data={data} onNavigate={onNavigate} />}
+        {kind === 'compositionrevisions' && <CompositionRevisionRenderer data={data} onNavigate={onNavigate} />}
+        {isCrossplaneMR && <ManagedResourceRenderer data={data} onNavigate={onNavigate} />}
+        {(isCrossplaneXR || isCrossplaneClaim) && <CompositeComp data={data} onNavigate={onNavigate} />}
+
+        {/* Generic renderer for CRDs and unknown resource types — also fires
+            for known-plural collisions where no apiVersion-gated renderer
+            matched (e.g. a Knative Configuration sharing the `configurations`
+            plural with Crossplane Configuration). */}
+        {(!isKnownKind || crossplaneCollisionFallthrough) && <GenericRenderer data={data} />}
 
         {/* Common sections - can be disabled when parent handles them separately */}
         {showCommonSections && (
@@ -662,6 +781,16 @@ export function getResourceStatus(kind: string, data: any): { text: string; colo
   if (k === 'peerauthentications') return getPeerAuthenticationStatus(data)
   if (k === 'authorizationpolicies') return getAuthorizationPolicyStatus(data)
 
+  // Crossplane — Provider/Function/Configuration share package conditions;
+  // ProviderConfig has its own; MR/XR/Claim detected by spec shape.
+  if ((k === 'providers' || k === 'functions' || k === 'configurations') && data?.apiVersion?.startsWith('pkg.crossplane.io/')) {
+    return getProviderStatus(data)
+  }
+  if (k === 'providerconfigs') return getProviderConfigStatus(data)
+  if (isManagedResource(data) || isComposite(data) || isClaim(data)) {
+    return getCrossplaneStatus(data)
+  }
+
   // Contour HTTPProxy
   if (k === 'httpproxies') {
     const s = getHTTPProxyStatus(data)

package/src/components/ui/YamlEditor.tsx

@@ -1,5 +1,6 @@
 import { useRef, useCallback, useEffect } from 'react'
-import Editor, { OnMount, OnChange, type Monaco } from '@monaco-editor/react'
+import Editor, { DiffEditor, OnMount, OnChange, type Monaco } from '@monaco-editor/react'
+import { PaneLoader } from './PaneLoader'
 import type { editor } from 'monaco-editor'
 
 interface YamlEditorProps {
@@ -240,40 +241,52 @@ export function YamlEditor({
   )
 }
 
-// Diff editor for showing changes before apply
 interface YamlDiffEditorProps {
   original: string
   modified: string
   height?: string | number
+  /** When true, render unified (single column) instead of side-by-side. */
+  unified?: boolean
+  /** When true, only diff regions stay rendered — unchanged sections collapse. */
+  hideUnchanged?: boolean
+  /** Caller-controlled theme. Defaults to dark to match YamlEditor. */
+  theme?: 'vs-dark' | 'vs'
+  /** When true, drops the rounded border so the editor reaches its container's edges. */
+  bleed?: boolean
 }
 
 export function YamlDiffEditor({
-  original: _original,
+  original,
   modified,
   height = '100%',
+  unified = false,
+  hideUnchanged = false,
+  theme = 'vs-dark',
+  bleed = false,
 }: YamlDiffEditorProps) {
-  // TODO: Use Monaco DiffEditor to show actual diff
-  void _original
   return (
-    <div className="rounded-lg overflow-hidden border border-theme-border" style={{ height }}>
-      <Editor
-        defaultLanguage="yaml"
-        value={modified}
-        theme="vs-dark"
+    <div className={bleed ? 'overflow-hidden' : 'rounded-lg overflow-hidden border border-theme-border'} style={{ height }}>
+      <DiffEditor
+        original={original}
+        modified={modified}
+        language="yaml"
+        theme={theme}
         options={{
           readOnly: true,
+          renderSideBySide: !unified,
+          hideUnchangedRegions: { enabled: hideUnchanged },
           minimap: { enabled: false },
           lineNumbers: 'on',
           scrollBeyondLastLine: false,
+          wordWrap: 'on',
           fontSize: 13,
           fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace',
           padding: { top: 12, bottom: 12 },
+          renderOverviewRuler: true,
+          ignoreTrimWhitespace: false,
+          automaticLayout: true,
         }}
-        loading={
-          <div className="flex items-center justify-center h-full bg-theme-surface text-theme-text-secondary">
-            Loading diff...
-          </div>
-        }
+        loading={<PaneLoader label="Loading resources…" className="h-full" />}
       />
     </div>
   )

package/src/components/workload/ResourceDetailDrawer.tsx

@@ -37,7 +37,7 @@ interface ResourceDetailDrawerProps {
   }) => ReactNode
 }
 
-const MIN_WIDTH = 400
+const MIN_WIDTH = 520
 const MAX_WIDTH_PERCENT = 0.7
 const DEFAULT_WIDTH = 550
 const WIDE_WIDTH = 750

package/src/index.ts

@@ -42,3 +42,6 @@ export * from './components/audit'
 
 // Cluster switcher (shared trigger+dropdown for OSS Radar and Radar Hub)
 export * from './components/cluster-switcher'
+
+// Compare (ResourceCompareView, CompareResourcePicker, normalize utilities)
+export * from './components/compare'

package/src/types/index.ts

@@ -2,3 +2,4 @@ export * from './core'
 export * from './gitops'
 export * from './gitops-tree'
 export * from './gitops-insights'
+export * from './rbac'

package/src/types/rbac.ts

@@ -0,0 +1,99 @@
+// Wire types for the /api/rbac/* endpoints, kept in the shared package so
+// both the host (which fetches) and the renderers (which display) agree on
+// the shape. Mirrors the Go types in internal/server/rbac_handlers.go and
+// pkg/rbac/index.go.
+
+export interface RBACSubject {
+  kind: string // "ServiceAccount" | "User" | "Group"
+  namespace: string // empty for User/Group
+  name: string
+}
+
+export interface RBACRoleRef {
+  kind: string // "Role" | "ClusterRole"
+  namespace: string // empty for ClusterRole
+  name: string
+}
+
+export interface RBACBindingRef {
+  kind: string // "RoleBinding" | "ClusterRoleBinding"
+  namespace: string // empty for ClusterRoleBinding
+  name: string
+  roleRef: RBACRoleRef
+}
+
+export interface RBACPolicyRule {
+  verbs?: string[]
+  apiGroups?: string[]
+  resources?: string[]
+  resourceNames?: string[]
+  nonResourceURLs?: string[]
+}
+
+export interface RBACBindingRules {
+  binding: RBACBindingRef
+  role: RBACRoleRef
+  rules: RBACPolicyRule[]
+  /** Populated when a RoleBinding references a ClusterRole — rules apply
+   *  only in this namespace. */
+  scopeNamespace?: string
+}
+
+export interface RBACInheritedGroup {
+  groupName: string // e.g. "system:authenticated"
+  bindings: RBACBindingRules[]
+}
+
+export interface RBACSubjectResponse {
+  subject: RBACSubject
+  direct: RBACBindingRules[]
+  inheritedFromGroups: RBACInheritedGroup[]
+  flat: RBACPolicyRule[]
+  truncated: boolean
+  /** Pods whose spec.serviceAccountName references this SA. Populated only
+   *  for ServiceAccount subjects; undefined or empty for User/Group. */
+  usedByPods?: RBACPodRef[]
+}
+
+export interface RBACPodRef {
+  namespace: string
+  name: string
+}
+
+export interface RBACNamespaceResponse {
+  namespace: string
+  roleBindings: RBACBindingWithSubjects[]
+  /** ClusterRoleBindings with at least one subject in this namespace. */
+  clusterRoleBindingsWithLocalSubject: RBACBindingWithSubjects[]
+  serviceAccountCount: number
+}
+
+export interface RBACBindingWithSubjects {
+  binding: RBACBindingRef
+  subjects: RBACSubject[]
+}
+
+export interface RBACRoleResponse {
+  role: RBACRoleRef
+  bindings: RBACBindingWithSubjects[]
+}
+
+export interface RBACResourceRule {
+  verbs: string[]
+  apiGroups?: string[]
+  resources?: string[]
+  resourceNames?: string[]
+}
+
+export interface RBACNonResourceRule {
+  verbs: string[]
+  nonResourceURLs?: string[]
+}
+
+export interface RBACWhoamiResponse {
+  namespace: string
+  resourceRules: RBACResourceRule[]
+  nonResourceRules: RBACNonResourceRule[]
+  incomplete: boolean
+  evaluationError?: string
+}

package/src/utils/api-resources.ts

@@ -124,8 +124,11 @@ export function formatGroupName(group: string): string {
     'gateway.networking.k8s.io': 'Gateway API',
     'traefik.io': 'Traefik',
     'traefik.containo.us': 'Traefik',
+    'crossplane.io': 'Crossplane',
     'pkg.crossplane.io': 'Crossplane',
     'apiextensions.crossplane.io': 'Crossplane',
+    'helm.crossplane.io': 'Crossplane',
+    'kubernetes.crossplane.io': 'Crossplane',
     'source.toolkit.fluxcd.io': 'Flux',
     'helm.toolkit.fluxcd.io': 'Flux',
     'kustomize.toolkit.fluxcd.io': 'Flux',
@@ -167,7 +170,12 @@ export function formatGroupName(group: string): string {
     'kubeflow.org': 'Kubeflow',
     'snapshot.storage.k8s.io': 'Snapshots',
   }
-  return knownGroups[group] || group
+  if (knownGroups[group]) return knownGroups[group]
+  // Suffix rules — for unbounded provider group sets (Crossplane providers ship
+  // 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
 }
 
 export function shortenGroupName(group: string): string {

package/src/utils/index.ts

@@ -16,3 +16,4 @@ export * from './view-transition'
 export * from './validators'
 export * from './gitops-owner'
 export * from './gitops-route'
+export * from './rbac-badges'

package/src/utils/rbac-badges.ts

@@ -0,0 +1,61 @@
+// Theme-aware badge classes for RBAC display (verbs, resources, API groups).
+// Reuses the same light/dark pairs as Badge.tsx's SEVERITY/KIND maps so the
+// RBAC views read with the same contrast as the rest of the app — the
+// inherited `text-*-400` foreground without a light counterpart was washing
+// out on light backgrounds.
+//
+// Centralized here so SA / Pod / RoleBinding renderers and the
+// MyPermissions dialog all stay in sync; previous duplicate copies drifted.
+
+import { BADGE_SEVERITY_COLORS, BADGE_KIND_COLORS } from '../components/ui/Badge'
+import {
+  RBAC_BLAST_READ_VERBS,
+  RBAC_BLAST_WRITE_VERBS,
+  RBAC_BLAST_DELETE_VERBS,
+  RBAC_BLAST_ESCALATION_VERBS,
+} from './rbac-blast-radius'
+
+/** Theme-aware classes for an RBAC verb chip. */
+export function rbacVerbBadgeClass(verb: string): string {
+  if (verb === '*') return BADGE_SEVERITY_COLORS.error
+  if (RBAC_BLAST_ESCALATION_VERBS.has(verb)) return BADGE_SEVERITY_COLORS.error
+  if (RBAC_BLAST_DELETE_VERBS.has(verb)) return BADGE_SEVERITY_COLORS.error
+  if (RBAC_BLAST_WRITE_VERBS.has(verb)) return BADGE_SEVERITY_COLORS.warning
+  if (RBAC_BLAST_READ_VERBS.has(verb)) return BADGE_SEVERITY_COLORS.success
+  return BADGE_SEVERITY_COLORS.info
+}
+
+/** Theme-aware classes for an RBAC resource chip (pods, configmaps, …). */
+export const rbacResourceBadgeClass: string =
+  BADGE_KIND_COLORS.HTTPRoute // purple-100/-700 in light, purple-950/-400 in dark
+
+/**
+ * Theme-aware kind badge for the four RBAC kinds. We can't put these in
+ * Badge.tsx's KIND map without churn there, so reuse the closest existing
+ * palette entry: blue/info for namespaced (Role/RoleBinding), purple for
+ * cluster-scoped (ClusterRole/ClusterRoleBinding).
+ */
+export function rbacKindBadgeClass(kind: string): string {
+  switch (kind) {
+    case 'Role':
+    case 'RoleBinding':
+      return BADGE_KIND_COLORS.Service // blue-100/-700 light, blue-950/-400 dark
+    case 'ClusterRole':
+    case 'ClusterRoleBinding':
+      return BADGE_KIND_COLORS.HelmRelease // purple-100/-700 light, purple-950/-400 dark
+    default:
+      return BADGE_KIND_COLORS.HelmRelease
+  }
+}
+
+/** Theme-aware classes for an API group chip (notification.toolkit.fluxcd.io, …). */
+export const rbacApiGroupBadgeClass: string =
+  'bg-theme-hover/60 text-theme-text-secondary border-theme-border'
+
+/** Theme-aware classes for a resourceName chip (rare — `resourceNames: [...]`). */
+export const rbacResourceNameBadgeClass: string =
+  BADGE_KIND_COLORS.PersistentVolumeClaim // cyan, distinct from resources
+
+/** Theme-aware classes for a non-resource URL chip (/healthz etc). */
+export const rbacNonResourceUrlBadgeClass: string =
+  BADGE_KIND_COLORS.Application // orange, distinct from everything above

package/src/utils/rbac-blast-radius.test.ts

@@ -0,0 +1,137 @@
+import { describe, it, expect } from 'vitest'
+import { detectBlastRadius, rulePermissivenessScore } from './rbac-blast-radius'
+import type { RBACBindingRules, RBACSubjectResponse } from '../types/rbac'
+
+// Skeleton helpers — keep fixtures terse so each test reads as a contract.
+function binding(over: Partial<RBACBindingRules> = {}): RBACBindingRules {
+  return {
+    binding: { kind: 'RoleBinding', namespace: 'default', name: 'b', roleRef: { kind: 'Role', namespace: 'default', name: 'r' } },
+    role: { kind: 'Role', namespace: 'default', name: 'r' },
+    rules: [],
+    ...over,
+  }
+}
+
+function subject(direct: RBACBindingRules[] = [], inherited: { groupName: string; bindings: RBACBindingRules[] }[] = []): RBACSubjectResponse {
+  return {
+    subject: { kind: 'ServiceAccount', namespace: 'default', name: 'app-sa' },
+    direct,
+    inheritedFromGroups: inherited,
+    flat: [],
+    truncated: false,
+  }
+}
+
+describe('detectBlastRadius', () => {
+  // The five documented triggers; each is a security-UX invariant the PR
+  // description and inline comments call load-bearing. If any of these
+  // silently regresses, the Pod blast-radius banner stops alarming on the
+  // exact scenarios it was added for.
+
+  it('flags cluster-admin role-name match', () => {
+    const b = binding({ role: { kind: 'ClusterRole', name: 'cluster-admin', namespace: '' } })
+    const reasons = detectBlastRadius(subject([b]))
+    expect(reasons).toHaveLength(1)
+    expect(reasons[0].reason).toMatch(/cluster-admin/)
+  })
+
+  it('flags verb wildcards', () => {
+    const b = binding({
+      rules: [{ verbs: ['*'], resources: ['pods'], apiGroups: [''] }],
+    })
+    const reasons = detectBlastRadius(subject([b]))
+    expect(reasons).toHaveLength(1)
+    expect(reasons[0].reason).toMatch(/verb wildcard/)
+  })
+
+  it('flags escalation verbs', () => {
+    const b = binding({
+      rules: [{ verbs: ['escalate'], resources: ['roles'], apiGroups: ['rbac.authorization.k8s.io'] }],
+    })
+    const reasons = detectBlastRadius(subject([b]))
+    expect(reasons).toHaveLength(1)
+    expect(reasons[0].reason).toMatch(/escalate/)
+  })
+
+  it('flags impersonate and bind too', () => {
+    const b1 = binding({ binding: { kind: 'RoleBinding', namespace: 'default', name: 'b1', roleRef: { kind: 'Role', namespace: 'default', name: 'r' } }, rules: [{ verbs: ['impersonate'], resources: ['users'], apiGroups: [''] }] })
+    const b2 = binding({ binding: { kind: 'RoleBinding', namespace: 'default', name: 'b2', roleRef: { kind: 'Role', namespace: 'default', name: 'r' } }, rules: [{ verbs: ['bind'], resources: ['roles'], apiGroups: ['rbac.authorization.k8s.io'] }] })
+    const reasons = detectBlastRadius(subject([b1, b2]))
+    expect(reasons).toHaveLength(2)
+    expect(reasons[0].reason).toMatch(/impersonate/)
+    expect(reasons[1].reason).toMatch(/bind/)
+  })
+
+  it('flags cluster-wide "create pods" but NOT namespace-scoped "create pods"', () => {
+    // The cluster-wide form is the lateral-movement vector — a Pod with
+    // namespace-scoped pod-create can only move within its namespace.
+    const cluster = binding({
+      binding: { kind: 'ClusterRoleBinding', namespace: '', name: 'cluster-b', roleRef: { kind: 'ClusterRole', namespace: '', name: 'r' } },
+      rules: [{ verbs: ['create'], resources: ['pods'], apiGroups: [''] }],
+    })
+    const namespaced = binding({
+      binding: { kind: 'RoleBinding', namespace: 'default', name: 'ns-b', roleRef: { kind: 'Role', namespace: 'default', name: 'r' } },
+      rules: [{ verbs: ['create'], resources: ['pods'], apiGroups: [''] }],
+    })
+    expect(detectBlastRadius(subject([cluster]))).toHaveLength(1)
+    expect(detectBlastRadius(subject([namespaced]))).toHaveLength(0)
+  })
+
+  it('does NOT flag resource-only wildcards', () => {
+    // The `view` ClusterRole grants get/list/watch on `*` resources in
+    // every fluxcd CRD. Flagging this would alarm on every authenticated
+    // SA — calibration call documented in the source.
+    const b = binding({
+      rules: [{ verbs: ['get', 'list', 'watch'], resources: ['*'], apiGroups: ['source.toolkit.fluxcd.io'] }],
+    })
+    expect(detectBlastRadius(subject([b]))).toHaveLength(0)
+  })
+
+  it('dedupes by binding identity when multiple risky rules match', () => {
+    const b = binding({
+      rules: [
+        { verbs: ['*'], resources: ['pods'], apiGroups: [''] },
+        { verbs: ['escalate'], resources: ['roles'], apiGroups: ['rbac.authorization.k8s.io'] },
+      ],
+    })
+    const reasons = detectBlastRadius(subject([b]))
+    expect(reasons).toHaveLength(1)
+  })
+
+  it('includes inherited-from-group bindings, not just direct', () => {
+    const b = binding({
+      binding: { kind: 'ClusterRoleBinding', namespace: '', name: 'inherited', roleRef: { kind: 'ClusterRole', namespace: '', name: 'r' } },
+      rules: [{ verbs: ['*'], resources: ['secrets'], apiGroups: [''] }],
+    })
+    const reasons = detectBlastRadius(subject([], [{ groupName: 'system:authenticated', bindings: [b] }]))
+    expect(reasons).toHaveLength(1)
+    expect(reasons[0].reason).toMatch(/verb wildcard/)
+  })
+
+  it('returns empty for benign bindings', () => {
+    const b = binding({
+      rules: [{ verbs: ['get', 'list'], resources: ['configmaps'], apiGroups: [''] }],
+    })
+    expect(detectBlastRadius(subject([b]))).toHaveLength(0)
+  })
+})
+
+describe('rulePermissivenessScore', () => {
+  it('scores wildcards highest', () => {
+    const wildcard = rulePermissivenessScore({ verbs: ['*'], resources: ['*'], apiGroups: ['*'] })
+    const benign = rulePermissivenessScore({ verbs: ['get'], resources: ['configmaps'], apiGroups: [''] })
+    expect(wildcard).toBeGreaterThan(benign)
+  })
+
+  it('boosts cluster-wide "create pods"', () => {
+    const createPods = rulePermissivenessScore({ verbs: ['create'], resources: ['pods'], apiGroups: [''] })
+    const createOthers = rulePermissivenessScore({ verbs: ['create'], resources: ['configmaps'], apiGroups: [''] })
+    expect(createPods).toBeGreaterThan(createOthers)
+  })
+
+  it('scores escalation verbs higher than plain writes', () => {
+    const escalate = rulePermissivenessScore({ verbs: ['escalate'], resources: ['roles'], apiGroups: ['rbac.authorization.k8s.io'] })
+    const patch = rulePermissivenessScore({ verbs: ['patch'], resources: ['configmaps'], apiGroups: [''] })
+    expect(escalate).toBeGreaterThan(patch)
+  })
+})