@skyhook-io/k8s-ui 1.6.1 → 1.6.2

package/src/components/resources/renderers/HPARenderer.tsx

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react'
 import { Cpu, AlertTriangle } from 'lucide-react'
 import { clsx } from 'clsx'
 import { Section, PropertyList, Property, ConditionsSection, ResourceLink } from '../../ui/drawer-components'
@@ -7,6 +8,8 @@ import { formatAge } from '../resource-utils'
 interface HPARendererProps {
   data: any
   onNavigate?: (ref: { kind: string; namespace: string; name: string }) => void
+  /** Optional host-provided section rendered after Conditions — used to inject Prometheus-backed charts. */
+  extraSections?: ReactNode
 }
 
 // Extract problems from HPA conditions
@@ -53,7 +56,7 @@ function getHPAProblems(data: any): string[] {
   return problems
 }
 
-export function HPARenderer({ data, onNavigate }: HPARendererProps) {
+export function HPARenderer({ data, onNavigate, extraSections }: HPARendererProps) {
   const status = data.status || {}
   const spec = data.spec || {}
   const metrics = status.currentMetrics || []
@@ -160,6 +163,8 @@ export function HPARenderer({ data, onNavigate }: HPARendererProps) {
       )}
 
       <ConditionsSection conditions={status.conditions} />
+
+      {extraSections}
     </>
   )
 }

package/src/components/resources/renderers/ManagedResourceRenderer.tsx

@@ -0,0 +1,131 @@
+import { Box, Settings, Cloud, ScrollText, Pause, Layers } from 'lucide-react'
+import { Section, PropertyList, Property, ConditionsSection, AlertBanner, ResourceLink } from '../../ui/drawer-components'
+import { CodeViewer } from '../../ui/CodeViewer'
+import {
+  getCrossplaneStatus,
+  getCrossplaneStatusReason,
+  getProviderConfigRef,
+  getExternalName,
+  getManagementPolicies,
+  getDeletionPolicy,
+  isCrossplanePaused,
+  getComposingXRRef,
+} from '../resource-utils-crossplane'
+import { kindToPlural } from '../../../utils/navigation'
+
+interface ManagedResourceRendererProps {
+  data: any
+  onNavigate?: (ref: { kind: string; namespace: string; name: string; group?: string }) => void
+}
+
+function extractApiGroup(apiVersion?: string): string {
+  if (!apiVersion) return ''
+  const slash = apiVersion.indexOf('/')
+  return slash < 0 ? '' : apiVersion.slice(0, slash)
+}
+
+
+export function ManagedResourceRenderer({ data, onNavigate }: ManagedResourceRendererProps) {
+  const status = getCrossplaneStatus(data)
+  const statusReason = getCrossplaneStatusReason(data)
+  const providerConfigRef = getProviderConfigRef(data)
+  const externalName = getExternalName(data)
+  const managementPolicies = getManagementPolicies(data)
+  const deletionPolicy = getDeletionPolicy(data)
+  const apiGroup = extractApiGroup(data?.apiVersion)
+  const namespace = data?.metadata?.namespace || ''
+  const paused = isCrossplanePaused(data)
+  const composingXR = getComposingXRRef(data)
+
+  const forProvider = data?.spec?.forProvider
+  const atProvider = data?.status?.atProvider
+
+  const alertVariant = status.level === 'unhealthy' || status.level === 'alert' ? status.level : null
+
+  return (
+    <>
+      {paused && (
+        <AlertBanner
+          variant="warning"
+          icon={Pause}
+          title="Reconciliation paused"
+          message="The crossplane.io/paused annotation is set. The provider will not reconcile this resource until the annotation is removed."
+        />
+      )}
+
+      {alertVariant && statusReason && (
+        <AlertBanner
+          variant={alertVariant === 'unhealthy' ? 'error' : 'warning'}
+          title={status.text}
+          message={statusReason}
+        />
+      )}
+
+      <Section title="Managed Resource" icon={Box} defaultExpanded>
+        <PropertyList>
+          <Property label="Kind" value={data?.kind || '-'} />
+          <Property label="API Group" value={apiGroup || '-'} />
+          {externalName && <Property label="External Name" value={externalName} />}
+          {managementPolicies && managementPolicies.length > 0 && (
+            <Property label="Management Policies" value={managementPolicies.join(', ')} />
+          )}
+          {deletionPolicy && <Property label="Deletion Policy" value={deletionPolicy} />}
+        </PropertyList>
+      </Section>
+
+      {composingXR && (
+        <Section title="Composed By" icon={Layers} defaultExpanded>
+          <PropertyList>
+            <Property
+              label={composingXR.kind}
+              value={
+                <ResourceLink
+                  name={composingXR.name}
+                  kind={kindToPlural(composingXR.kind)}
+                  namespace={namespace}
+                  group={extractApiGroup(composingXR.apiVersion) || undefined}
+                  onNavigate={onNavigate}
+                />
+              }
+            />
+            {composingXR.apiVersion && <Property label="API Version" value={composingXR.apiVersion} />}
+          </PropertyList>
+        </Section>
+      )}
+
+      {providerConfigRef && (
+        <Section title="Provider" icon={Cloud} defaultExpanded>
+          <PropertyList>
+            <Property
+              label="ProviderConfig"
+              value={
+                <ResourceLink
+                  name={providerConfigRef.name}
+                  kind="providerconfigs"
+                  namespace={namespace}
+                  group={extractApiGroup(providerConfigRef.apiVersion) || undefined}
+                  onNavigate={onNavigate}
+                />
+              }
+            />
+            {providerConfigRef.kind && <Property label="Kind" value={providerConfigRef.kind} />}
+          </PropertyList>
+        </Section>
+      )}
+
+      {forProvider && (
+        <Section title="Spec — forProvider" icon={Settings} defaultExpanded={false}>
+          <CodeViewer code={JSON.stringify(forProvider, null, 2)} language="json" />
+        </Section>
+      )}
+
+      {atProvider && (
+        <Section title="Status — atProvider" icon={ScrollText} defaultExpanded={false}>
+          <CodeViewer code={JSON.stringify(atProvider, null, 2)} language="json" />
+        </Section>
+      )}
+
+      <ConditionsSection conditions={data?.status?.conditions} />
+    </>
+  )
+}

package/src/components/resources/renderers/NamespaceRenderer.tsx

@@ -0,0 +1,223 @@
+import { Shield, Box, Users } from 'lucide-react'
+import { clsx } from 'clsx'
+import { Section, PropertyList, Property, ResourceLink } from '../../ui/drawer-components'
+import type { RBACNamespaceResponse, RBACBindingWithSubjects, RBACSubject, ResourceRef } from '../../../types'
+import { rbacKindBadgeClass } from '../../../utils/rbac-badges'
+
+interface NamespaceRendererProps {
+  data: any
+  /**
+   * RBAC summary for this namespace fetched from /api/rbac/namespace/{ns}.
+   * Undefined when the host hasn't wired the fetch (RBAC section omitted).
+   * Null when the fetch failed; section shows a tactful note.
+   */
+  rbacData?: RBACNamespaceResponse | null
+  rbacLoading?: boolean
+  rbacError?: Error | null
+  onNavigate?: (ref: ResourceRef) => void
+}
+
+export function NamespaceRenderer({ data, rbacData, rbacLoading, rbacError, onNavigate }: NamespaceRendererProps) {
+  const metadata = data.metadata || {}
+  const status = data.status || {}
+  const phase = status.phase
+  const labels = metadata.labels || {}
+
+  // Common signal labels: control-plane / cluster-wide / managed-by-* markers.
+  // We surface them as a quick read since the generic labels section is
+  // collapsed in the sidebar.
+  const istioInjection = labels['istio-injection']
+  const linkerdInjection = labels['linkerd.io/inject']
+  const managedBy = labels['app.kubernetes.io/managed-by']
+
+  return (
+    <>
+      <Section title="Status" icon={Box}>
+        <PropertyList>
+          <Property label="Phase" value={
+            phase ? (
+              <span className={clsx(
+                phase === 'Active' && 'text-emerald-700 dark:text-emerald-400',
+                phase === 'Terminating' && 'text-orange-700 dark:text-orange-400',
+              )}>{phase}</span>
+            ) : undefined
+          } />
+          {istioInjection && <Property label="Istio injection" value={istioInjection} />}
+          {linkerdInjection && <Property label="Linkerd injection" value={linkerdInjection} />}
+          {managedBy && <Property label="Managed by" value={managedBy} />}
+        </PropertyList>
+      </Section>
+
+      {/* RBAC summary — only when host wired the fetch. */}
+      {rbacData !== undefined && (
+        <NamespaceRBACSection
+          rbacData={rbacData}
+          loading={!!rbacLoading}
+          error={rbacError ?? null}
+          onNavigate={onNavigate}
+        />
+      )}
+    </>
+  )
+}
+
+// ============================================================================
+// NAMESPACE RBAC SECTION
+// ============================================================================
+// Answers "what RBAC is configured here" without forcing operators to pivot
+// through individual SAs. We show two slices:
+//   1. RoleBindings whose own namespace is this namespace (the most direct
+//      "configured here" answer).
+//   2. ClusterRoleBindings with at least one ServiceAccount subject in this
+//      namespace (cluster-wide grants whose blast radius touches the
+//      namespace — what an attacker compromising a workload here would
+//      inherit beyond the local bindings).
+// Cluster-wide bindings to wide groups (system:authenticated etc.) are
+// excluded from #2 because they touch *every* namespace and would be noise.
+
+function NamespaceRBACSection({
+  rbacData,
+  loading,
+  error,
+  onNavigate,
+}: {
+  rbacData: RBACNamespaceResponse | null
+  loading: boolean
+  error: Error | null
+  onNavigate?: (ref: ResourceRef) => void
+}) {
+  if (loading) {
+    return (
+      <Section title="RBAC" icon={Shield}>
+        <div className="text-sm text-theme-text-secondary">Loading RBAC summary…</div>
+      </Section>
+    )
+  }
+  if (error) {
+    return (
+      <Section title="RBAC" icon={Shield}>
+        <div className="text-sm text-red-400">Could not load RBAC summary: {error.message}</div>
+      </Section>
+    )
+  }
+  if (!rbacData) return null
+
+  const localBindings = rbacData.roleBindings ?? []
+  const clusterBindings = rbacData.clusterRoleBindingsWithLocalSubject ?? []
+  const totalBindings = localBindings.length + clusterBindings.length
+
+  return (
+    <>
+      <Section title="RBAC" icon={Shield} defaultExpanded>
+        <PropertyList>
+          <Property label="ServiceAccounts" value={rbacData.serviceAccountCount} />
+          <Property label="Bindings touching this namespace" value={totalBindings} />
+        </PropertyList>
+      </Section>
+
+      <Section title={`RoleBindings (${localBindings.length})`} icon={Users} defaultExpanded={localBindings.length > 0}>
+        {localBindings.length === 0 ? (
+          <div className="text-sm text-theme-text-secondary">
+            No RoleBindings are defined in this namespace.
+          </div>
+        ) : (
+          <div className="space-y-2">
+            {localBindings.map((b) => (
+              <BindingSummaryRow key={b.binding.kind + '/' + b.binding.namespace + '/' + b.binding.name} entry={b} onNavigate={onNavigate} />
+            ))}
+          </div>
+        )}
+      </Section>
+
+      {clusterBindings.length > 0 && (
+        <Section
+          title={`ClusterRoleBindings touching this namespace (${clusterBindings.length})`}
+          icon={Users}
+        >
+          <div className="space-y-2">
+            {clusterBindings.map((b) => (
+              <BindingSummaryRow key={b.binding.kind + '/' + b.binding.namespace + '/' + b.binding.name} entry={b} onNavigate={onNavigate} />
+            ))}
+          </div>
+        </Section>
+      )}
+    </>
+  )
+}
+
+function BindingSummaryRow({
+  entry,
+  onNavigate,
+}: {
+  entry: RBACBindingWithSubjects
+  onNavigate?: (ref: ResourceRef) => void
+}) {
+  const bindingKindPlural =
+    entry.binding.kind === 'RoleBinding' ? 'rolebindings' : 'clusterrolebindings'
+  const roleKindPlural =
+    entry.binding.roleRef.kind === 'Role' ? 'roles' : 'clusterroles'
+
+  return (
+    <div className="card-inner">
+      <div className="flex items-center gap-2 flex-wrap text-xs mb-1.5">
+        <span className={clsx('badge', rbacKindBadgeClass(entry.binding.kind))}>
+          {entry.binding.kind}
+        </span>
+        <ResourceLink
+          kind={bindingKindPlural}
+          namespace={entry.binding.namespace}
+          name={entry.binding.name}
+          onNavigate={onNavigate}
+        />
+        <span className="text-theme-text-secondary">→</span>
+        <span className={clsx('badge', rbacKindBadgeClass(entry.binding.roleRef.kind))}>
+          {entry.binding.roleRef.kind}
+        </span>
+        <ResourceLink
+          kind={roleKindPlural}
+          namespace={entry.binding.roleRef.namespace}
+          name={entry.binding.roleRef.name}
+          onNavigate={onNavigate}
+        />
+      </div>
+      {entry.subjects.length > 0 && (
+        <div className="text-xs text-theme-text-secondary">
+          {entry.subjects.length} subject{entry.subjects.length === 1 ? '' : 's'}:{' '}
+          <SubjectsInline subjects={entry.subjects} onNavigate={onNavigate} />
+        </div>
+      )}
+    </div>
+  )
+}
+
+function SubjectsInline({
+  subjects,
+  onNavigate,
+}: {
+  subjects: RBACSubject[]
+  onNavigate?: (ref: ResourceRef) => void
+}) {
+  const shown = subjects.slice(0, 3)
+  const hidden = subjects.length - shown.length
+  return (
+    <span className="inline-flex items-center gap-1.5 flex-wrap">
+      {shown.map((s, i) => (
+        <span key={i} className="inline-flex items-center gap-1">
+          <span className="text-theme-text-tertiary">{s.kind.toLowerCase()}:</span>
+          {s.kind === 'ServiceAccount' ? (
+            <ResourceLink
+              kind="serviceaccounts"
+              namespace={s.namespace}
+              name={s.name}
+              onNavigate={onNavigate}
+            />
+          ) : (
+            <span className="text-theme-text-primary">{s.name}</span>
+          )}
+          {i < shown.length - 1 && <span className="text-theme-text-tertiary">,</span>}
+        </span>
+      ))}
+      {hidden > 0 && <span className="text-theme-text-tertiary">+{hidden} more</span>}
+    </span>
+  )
+}

package/src/components/resources/renderers/PVCRenderer.tsx

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react'
 import { HardDrive } from 'lucide-react'
 import { clsx } from 'clsx'
 import { Section, PropertyList, Property, ConditionsSection, AlertBanner, ResourceLink } from '../../ui/drawer-components'
@@ -5,6 +6,8 @@ import { Section, PropertyList, Property, ConditionsSection, AlertBanner, Resour
 interface PVCRendererProps {
   data: any
   onNavigate?: (ref: { kind: string; namespace: string; name: string }) => void
+  /** Optional host-provided section, used for a Prometheus-derived usage gauge. */
+  extraSections?: ReactNode
 }
 
 const accessModeShorthand: Record<string, string> = {
@@ -19,7 +22,7 @@ function formatAccessModes(modes: string[] | undefined): string | undefined {
   return modes.map(m => accessModeShorthand[m] || m).join(', ')
 }
 
-export function PVCRenderer({ data, onNavigate }: PVCRendererProps) {
+export function PVCRenderer({ data, onNavigate, extraSections }: PVCRendererProps) {
   const status = data.status || {}
   const spec = data.spec || {}
   const annotations = data.metadata?.annotations || {}
@@ -92,6 +95,8 @@ export function PVCRenderer({ data, onNavigate }: PVCRendererProps) {
         </Section>
       )}
 
+      {extraSections}
+
       <ConditionsSection conditions={status.conditions} />
     </>
   )

package/src/components/resources/renderers/PodRenderer.tsx

@@ -1,10 +1,16 @@
 import { useState, type ReactNode, type JSX } from 'react'
-import { Server, HardDrive, Terminal as TerminalIcon, FileText, Activity, CirclePlay, FolderOpen, List, Eye, EyeOff } from 'lucide-react'
+import { Server, HardDrive, Terminal as TerminalIcon, FileText, Activity, CirclePlay, FolderOpen, List, Eye, EyeOff, Shield } from 'lucide-react'
 import { clsx } from 'clsx'
 import { Section, PropertyList, Property, ConditionsSection, CopyHandler, AlertBanner, ResourceLink } from '../../ui/drawer-components'
 import { formatResources, formatDuration, getPodProblems, getPodPhaseDisplay, healthColors, SEVERITY_DOT_COLOR } from '../resource-utils'
 import { getResourceStatusColor, SEVERITY_BADGE_BORDERED } from '../../../utils/badge-colors'
-import type { ResolvedEnvFrom } from '../../../types'
+import {
+  rbacVerbBadgeClass,
+  rbacResourceBadgeClass,
+  rbacApiGroupBadgeClass,
+} from '../../../utils/rbac-badges'
+import { detectBlastRadius, rulePermissivenessScore } from '../../../utils/rbac-blast-radius'
+import type { ResolvedEnvFrom, RBACSubjectResponse, RBACPolicyRule } from '../../../types'
 import { Tooltip } from '../../ui/Tooltip'
 import { MetricsChart } from '../../ui/MetricsChart'
 
@@ -75,6 +81,14 @@ interface PodRendererProps {
    * When provided, expands ConfigMap/Secret keys inline instead of showing "(all keys)".
    */
   resolvedEnvFrom?: ResolvedEnvFrom
+  /**
+   * RBAC reverse-lookup for the Pod's ServiceAccount. Undefined means the host
+   * didn't wire the fetch (Permissions section is omitted). Null means the
+   * fetch failed; the section renders an inline error.
+   */
+  rbacData?: RBACSubjectResponse | null
+  rbacLoading?: boolean
+  rbacError?: Error | null
 }
 
 // ── Env vars section — extracted to use hooks (useState for reveal) ──────────
@@ -240,6 +254,9 @@ export function PodRenderer({
   renderImageBrowser,
   renderPodBrowser,
   resolvedEnvFrom,
+  rbacData,
+  rbacLoading,
+  rbacError,
 }: PodRendererProps) {
   const containerStatuses = data.status?.containerStatuses || []
   const containers = data.spec?.containers || []
@@ -771,6 +788,22 @@ export function PodRenderer({
       {/* Conditions */}
       <ConditionsSection conditions={data.status?.conditions} />
 
+      {/* Permissions (via ServiceAccount) — placed below the diagnostic-
+       *  signal sections (status, containers, resource usage, conditions)
+       *  because it answers an incident/audit question ("if this Pod is
+       *  compromised, what does the attacker get?"), not a daily-browsing
+       *  one. Only renders when the host wired the RBAC fetch. */}
+      {rbacData !== undefined && (
+        <PodPermissionsSection
+          saName={data.spec?.serviceAccountName || 'default'}
+          namespace={data.metadata?.namespace || ''}
+          rbacData={rbacData}
+          loading={!!rbacLoading}
+          error={rbacError ?? null}
+          onNavigate={onNavigate}
+        />
+      )}
+
       {/* Image Filesystem Modal (via render prop) */}
       {selectedImage && renderImageBrowser && renderImageBrowser({
         image: selectedImage,
@@ -801,3 +834,175 @@ export function PodRenderer({
     </>
   )
 }
+
+// ============================================================================
+// POD PERMISSIONS SECTION (via ServiceAccount)
+// ============================================================================
+// Frames the SA's permissions in attacker terms — "if this Pod is compromised,
+// here's what the attacker gets". No OSS dashboard surfaces this view cleanly
+// today; the goal is to make blast radius legible without leaving the Pod page.
+
+interface PodPermissionsSectionProps {
+  saName: string
+  namespace: string
+  rbacData: RBACSubjectResponse | null
+  loading: boolean
+  error: Error | null
+  onNavigate?: (ref: { kind: string; namespace: string; name: string }) => void
+}
+
+// Verb categorization for the permissiveness scorer + blast-radius detector.
+// Badge colors come from the shared rbacVerbBadgeClass (theme-aware).
+// Blast-radius detection and scoring shared with Workload / ServiceAccount
+// renderers — see utils/rbac-blast-radius.ts.
+
+function PodPermissionsSection({
+  saName,
+  namespace,
+  rbacData,
+  loading,
+  error,
+  onNavigate,
+}: PodPermissionsSectionProps) {
+  const title = `Permissions via ServiceAccount: ${saName}`
+
+  if (loading) {
+    return (
+      <Section title={title} icon={Shield}>
+        <div className="text-sm text-theme-text-tertiary">Loading RBAC graph…</div>
+      </Section>
+    )
+  }
+  if (error) {
+    return (
+      <Section title={title} icon={Shield}>
+        <div className="text-sm text-red-400">
+          Could not load permissions: {error.message}
+        </div>
+      </Section>
+    )
+  }
+  if (!rbacData) return null
+
+  const direct = rbacData.direct ?? []
+  const inheritedAll = (rbacData.inheritedFromGroups ?? []).flatMap((g) => g.bindings)
+  const inheritedCount = inheritedAll.length
+  const directCount = direct.length
+  const ruleCount = rbacData.flat?.length ?? 0
+
+  const blastReasons = detectBlastRadius(rbacData)
+
+  // Top-5 most-permissive rules across the full flat set.
+  const sortedRules = [...(rbacData.flat ?? [])].sort(
+    (a, b) => rulePermissivenessScore(b) - rulePermissivenessScore(a),
+  )
+  const previewRules = sortedRules.slice(0, 5)
+  const moreCount = Math.max(0, sortedRules.length - previewRules.length)
+
+  // Default collapsed: most operators opening a Pod want Status / Containers
+  // / Resource Usage / Events, not "what could this Pod do if compromised".
+  // That's an incident-response question, not daily-browsing. Auto-expand
+  // when something *is* risky so the page still shouts when it should.
+  const hasBlastRadius = blastReasons.length > 0
+  return (
+    <Section title={title} icon={Shield} defaultExpanded={hasBlastRadius}>
+      {/* Blast-radius alert — only when something risky was detected. */}
+      {blastReasons.length > 0 && (
+        <AlertBanner variant="warning" title="Blast radius">
+          <div className="text-xs">
+            If this Pod is compromised, the attacker inherits the
+            ServiceAccount's permissions, which include:
+          </div>
+          <ul className="mt-1.5 text-xs space-y-1">
+            {blastReasons.map((r, i) => (
+              <li key={i}>
+                <span className="text-theme-text-secondary">
+                  {r.binding.binding.kind} <span className="font-medium">{r.binding.binding.name}</span>
+                </span>{' '}
+                <span className="text-theme-text-tertiary">{r.reason}</span>
+              </li>
+            ))}
+          </ul>
+        </AlertBanner>
+      )}
+
+      {/* One-line summary */}
+      <div className="text-xs text-theme-text-tertiary mb-3">
+        {directCount} direct binding{directCount === 1 ? '' : 's'} ·{' '}
+        {inheritedCount} inherited via group
+        {inheritedCount === 1 ? '' : 's'} ·{' '}
+        {ruleCount} distinct rule{ruleCount === 1 ? '' : 's'}
+        {rbacData.truncated && <span className="text-orange-400"> (truncated)</span>}
+      </div>
+
+      {/* Top-N most-permissive rules. When the SA has zero permissions,
+       *  call that out explicitly — silence would look like a fetch error. */}
+      {previewRules.length === 0 ? (
+        <div className="text-sm text-theme-text-tertiary">
+          This ServiceAccount has no effective permissions in the cluster.
+        </div>
+      ) : (
+        <div className="space-y-1">
+          {previewRules.map((r, i) => (
+            <PodRulePreviewLine key={i} rule={r} />
+          ))}
+          {moreCount > 0 && (
+            <div className="text-xs text-theme-text-tertiary">
+              +{moreCount} more rule{moreCount === 1 ? '' : 's'} — open the
+              ServiceAccount to see the full grant.
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Footer link to the SA detail page where Effective Permissions
+       *  has the per-binding provenance + full rules. */}
+      <div className="mt-3 text-xs">
+        <ResourceLink
+          name={saName}
+          kind="serviceaccounts"
+          namespace={namespace}
+          label="View full permissions →"
+          onNavigate={onNavigate}
+        />
+      </div>
+    </Section>
+  )
+}
+
+function PodRulePreviewLine({ rule }: { rule: RBACPolicyRule }) {
+  const verbs = rule.verbs ?? []
+  const resources = rule.resources ?? []
+  const nonResourceURLs = rule.nonResourceURLs ?? []
+  const groups = rule.apiGroups ?? []
+  const isNonResource = resources.length === 0 && nonResourceURLs.length > 0
+  return (
+    <div className="flex items-center gap-1 flex-wrap text-xs">
+      {verbs.map((v) => (
+        <span key={v} className={clsx('badge', rbacVerbBadgeClass(v))}>{v}</span>
+      ))}
+      <span className="text-theme-text-secondary">on</span>
+      {isNonResource ? (
+        nonResourceURLs.map((u) => (
+          <span key={u} className="badge font-mono bg-theme-elevated text-theme-text-secondary">{u}</span>
+        ))
+      ) : (
+        resources.map((r) => (
+          <span key={r} className={clsx('badge', rbacResourceBadgeClass)}>
+            {r === '*' ? '*' : r}
+          </span>
+        ))
+      )}
+      {!isNonResource && groups.length > 0 && groups.some((g) => g !== '') && (
+        <>
+          <span className="text-theme-text-secondary">in</span>
+          {groups.map((g) => (
+            <span key={g} className={clsx('badge', rbacApiGroupBadgeClass)}>
+              {g === '' ? 'core' : g}
+            </span>
+          ))}
+        </>
+      )}
+    </div>
+  )
+}