@skyhook-io/radar-app 1.1.1 → 1.1.2

package/src/components/resources/CompositeRenderer.tsx

@@ -0,0 +1,101 @@
+import { useMemo } from 'react'
+import { useQueries } from '@tanstack/react-query'
+import {
+  CompositeRenderer as BaseCompositeRenderer,
+  type ComposedRefStatus,
+} from '@skyhook-io/k8s-ui/components/resources/renderers/CompositeRenderer'
+import {
+  getCrossplaneResourceRefs,
+  type CrossplaneResourceRef,
+} from '@skyhook-io/k8s-ui/components/resources/resource-utils-crossplane'
+import { getResourceStatus } from '@skyhook-io/k8s-ui'
+import { kindToPlural } from '@skyhook-io/k8s-ui/utils/navigation'
+import type { ResourceRef as NavRef } from '../../types'
+import { fetchJSON, ApiError } from '../../api/client'
+
+interface CompositeRendererProps {
+  data: any
+  onNavigate?: (ref: NavRef) => void
+}
+
+function makeRefKey(ref: CrossplaneResourceRef): string {
+  return `${ref.apiVersion}/${ref.kind}/${ref.namespace ?? ''}/${ref.name}`
+}
+
+// Crossplane refs carry full apiVersion (e.g. "s3.aws.upbound.io/v1beta1")
+// because plural collisions across provider groups are real — two providers
+// can ship CRDs with the same kind. Drop the version, keep the group.
+function groupFromApiVersion(apiVersion: string | undefined): string {
+  if (!apiVersion) return ''
+  const slash = apiVersion.indexOf('/')
+  return slash < 0 ? '' : apiVersion.slice(0, slash)
+}
+
+/**
+ * Host wrapper for the package's CompositeRenderer: fans out a React Query
+ * lookup per composed resource ref so each row in the composed-resources
+ * list can show a live status badge.
+ *
+ * Errors are folded into the per-ref status entry rather than thrown — a
+ * missing composed resource (e.g. 404 because reconciliation hasn't created
+ * it yet) is a normal state for a freshly-applied Composite, not a failure.
+ */
+export function CompositeRenderer({ data, onNavigate }: CompositeRendererProps) {
+  const refs = useMemo<CrossplaneResourceRef[]>(() => getCrossplaneResourceRefs(data), [data])
+
+  const queries = useQueries({
+    queries: refs.map(ref => {
+      const group = groupFromApiVersion(ref.apiVersion)
+      return {
+        queryKey: ['composed-ref', group, ref.kind, ref.namespace ?? '', ref.name],
+        queryFn: async () => {
+          const ns = ref.namespace || '_'
+          const plural = kindToPlural(ref.kind)
+          const query = group ? `?group=${encodeURIComponent(group)}` : ''
+          return fetchJSON<{ resource: any }>(`/resources/${plural}/${ns}/${ref.name}${query}`)
+        },
+        staleTime: 30000,
+        retry: false,
+        enabled: Boolean(ref.kind && ref.name),
+      }
+    }),
+  })
+
+  const composedRefStatuses = useMemo<Map<string, ComposedRefStatus>>(() => {
+    const map = new Map<string, ComposedRefStatus>()
+    refs.forEach((ref, i) => {
+      const q = queries[i]
+      const key = makeRefKey(ref)
+      if (q.isLoading) {
+        map.set(key, { ref, loading: true })
+        return
+      }
+      if (q.isError) {
+        // 404 = the composed resource genuinely doesn't exist yet (normal
+        // during reconciliation). Any other failure (401/403/500/network)
+        // means we can't tell the operator the resource's status — render
+        // it distinctly so they don't read "missing" and think the resource
+        // is absent when they've actually just lost permission to read it.
+        if (q.error instanceof ApiError && q.error.status === 404) {
+          map.set(key, { ref, missing: true })
+        } else {
+          const message = q.error instanceof Error ? q.error.message : 'Failed to fetch composed resource'
+          map.set(key, { ref, error: true, errorMessage: message })
+        }
+        return
+      }
+      if (!q.data) {
+        map.set(key, { ref, missing: true })
+        return
+      }
+      const status = getResourceStatus(kindToPlural(ref.kind), q.data.resource) ?? undefined
+      map.set(key, {
+        ref,
+        status: status ? { ...status, level: (status as any).level ?? 'unknown' } : undefined,
+      })
+    })
+    return map
+  }, [refs, queries])
+
+  return <BaseCompositeRenderer data={data} onNavigate={onNavigate} composedRefStatuses={composedRefStatuses} />
+}

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

@@ -1 +1,17 @@
-export * from '@skyhook-io/k8s-ui/components/resources/renderers/HPARenderer'
+import { HPARenderer as BaseHPARenderer } from '@skyhook-io/k8s-ui/components/resources/renderers/HPARenderer'
+import { HPACharts } from '../../resource/HPACharts'
+
+interface HPARendererProps {
+  data: any
+  onNavigate?: (ref: { kind: string; namespace: string; name: string }) => void
+}
+
+export function HPARenderer({ data, onNavigate }: HPARendererProps) {
+  return (
+    <BaseHPARenderer
+      data={data}
+      onNavigate={onNavigate}
+      extraSections={<HPACharts data={data} />}
+    />
+  )
+}

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

@@ -0,0 +1,22 @@
+import { NamespaceRenderer as BaseNamespaceRenderer } from '@skyhook-io/k8s-ui/components/resources/renderers/NamespaceRenderer'
+import type { ResourceRef } from '@skyhook-io/k8s-ui'
+import { useRBACNamespace } from '../../../api/rbac'
+
+interface NamespaceRendererProps {
+  data: any
+  onNavigate?: (ref: ResourceRef) => void
+}
+
+export function NamespaceRenderer({ data, onNavigate }: NamespaceRendererProps) {
+  const name = data?.metadata?.name ?? ''
+  const { data: rbacData, isLoading, error } = useRBACNamespace(name, !!name)
+  return (
+    <BaseNamespaceRenderer
+      data={data}
+      rbacData={rbacData ?? null}
+      rbacLoading={isLoading}
+      rbacError={error as Error | null}
+      onNavigate={onNavigate}
+    />
+  )
+}

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

@@ -1 +1,19 @@
-export * from '@skyhook-io/k8s-ui/components/resources/renderers/PVCRenderer'
+import { PVCRenderer as BasePVCRenderer } from '@skyhook-io/k8s-ui/components/resources/renderers/PVCRenderer'
+import { PVCUsageBar } from '../../resource/PVCUsageBar'
+
+interface PVCRendererProps {
+  data: any
+  onNavigate?: (ref: { kind: string; namespace: string; name: string }) => void
+}
+
+export function PVCRenderer({ data, onNavigate }: PVCRendererProps) {
+  const namespace = data?.metadata?.namespace ?? ''
+  const name = data?.metadata?.name ?? ''
+  return (
+    <BasePVCRenderer
+      data={data}
+      onNavigate={onNavigate}
+      extraSections={namespace && name ? <PVCUsageBar namespace={namespace} name={name} /> : undefined}
+    />
+  )
+}

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

@@ -4,6 +4,7 @@ import type { ResolvedEnvFrom } from '@skyhook-io/k8s-ui'
 import { useOpenTerminal, useOpenLogs } from '../../dock'
 import { useNamespacedCapabilities } from '../../../contexts/CapabilitiesContext'
 import { usePodMetrics, usePodMetricsHistory, usePrometheusResourceMetrics, usePrometheusStatus } from '../../../api/client'
+import { useRBACSubject } from '../../../api/rbac'
 import { PortForwardInlineButton } from '../../portforward/PortForwardButton'
 import { ImageFilesystemModal } from '../ImageFilesystemModal'
 import { PodFilesystemModal } from '../PodFilesystemModal'
@@ -42,6 +43,15 @@ export function PodRenderer({ data, onCopy, copied, onNavigate, onOpenLogs, reso
   ) ?? false)
   const hideMetricsServer = prometheusHasCPU || (prometheusConnected && prometheusCPULoading)
 
+  // RBAC reverse-lookup for the Pod's ServiceAccount. Defaults to "default" —
+  // that's the SA every Pod uses when spec.serviceAccountName is unset, which
+  // is itself a useful signal (operators often don't realize "default" still
+  // has whatever permissions the namespace's defaults grant).
+  const saName = data.spec?.serviceAccountName || 'default'
+  const { data: rbacData, isLoading: rbacLoading, error: rbacError } = useRBACSubject(
+    'ServiceAccount', namespace ?? '', saName, !!namespace,
+  )
+
   return (
     <BasePodRenderer
       data={data}
@@ -50,6 +60,9 @@ export function PodRenderer({ data, onCopy, copied, onNavigate, onOpenLogs, reso
       onNavigate={onNavigate}
       onOpenLogs={onOpenLogs}
       resolvedEnvFrom={resolvedEnvFrom}
+      rbacData={rbacData ?? null}
+      rbacLoading={rbacLoading}
+      rbacError={rbacError as Error | null}
       canExec={canExec}
       canViewLogs={canViewLogs}
       canPortForward={canPortForward}

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

@@ -1 +1,43 @@
-export * from '@skyhook-io/k8s-ui/components/resources/renderers/RoleBindingRenderer'
+import { RoleBindingRenderer as BaseRoleBindingRenderer } from '@skyhook-io/k8s-ui/components/resources/renderers/RoleBindingRenderer'
+import type { ResourceRef } from '@skyhook-io/k8s-ui'
+import { useResource } from '../../../api/client'
+
+interface RoleBindingRendererProps {
+  data: any
+  onNavigate?: (ref: ResourceRef) => void
+}
+
+// Reuses the generic resource endpoint to fetch the referenced Role/ClusterRole
+// so the base renderer can show an inline rules preview. A dedicated /api/rbac
+// "rules-only" endpoint would be tighter, but the generic one is already
+// cached and respects per-user RBAC the same way.
+export function RoleBindingRenderer({ data, onNavigate }: RoleBindingRendererProps) {
+  const roleRef = data?.roleRef ?? {}
+  const isClusterRole = roleRef.kind === 'ClusterRole'
+  const kind = isClusterRole ? 'clusterroles' : 'roles'
+  // For ClusterRole the namespace is cluster-scoped (empty); for Role the
+  // binding's namespace is the role's namespace (Roles are namespaced and
+  // RoleBindings can only reference Roles in their own namespace).
+  const namespace = isClusterRole ? '' : (data?.metadata?.namespace ?? '')
+  const name = roleRef.name ?? ''
+
+  const { data: role, isLoading } = useResource<any>(kind, namespace, name)
+  // `role` is undefined while loading, then the resource, then potentially
+  // null on 404. Pass [] for "loaded but no rules" so the base renderer's
+  // `rules === null` branch fires only on outright fetch failure (orphan).
+  const rules =
+    isLoading
+      ? undefined
+      : role
+        ? (role.rules ?? [])
+        : null
+
+  return (
+    <BaseRoleBindingRenderer
+      data={data}
+      onNavigate={onNavigate}
+      roleRules={rules ?? null}
+      roleRulesLoading={isLoading}
+    />
+  )
+}

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

@@ -1 +1,27 @@
-export * from '@skyhook-io/k8s-ui/components/resources/renderers/RoleRenderer'
+import { RoleRenderer as BaseRoleRenderer } from '@skyhook-io/k8s-ui/components/resources/renderers/RoleRenderer'
+import type { ResourceRef } from '@skyhook-io/k8s-ui'
+import { useRBACRole } from '../../../api/rbac'
+
+interface RoleRendererProps {
+  data: any
+  onNavigate?: (ref: ResourceRef) => void
+}
+
+export function RoleRenderer({ data, onNavigate }: RoleRendererProps) {
+  // ClusterRole has no namespace; Role does. The kind in the manifest is
+  // authoritative — RoleRenderer is shared between both kinds via the
+  // dispatch, so checking it here is the only way to know which we are.
+  const kind: 'Role' | 'ClusterRole' = data?.kind === 'ClusterRole' ? 'ClusterRole' : 'Role'
+  const namespace = data?.metadata?.namespace ?? ''
+  const name = data?.metadata?.name ?? ''
+  const { data: rbacRoleData, isLoading, error } = useRBACRole(kind, namespace, name, !!name)
+  return (
+    <BaseRoleRenderer
+      data={data}
+      rbacRoleData={rbacRoleData ?? null}
+      rbacRoleLoading={isLoading}
+      rbacRoleError={error as Error | null}
+      onNavigate={onNavigate}
+    />
+  )
+}

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

@@ -1 +1,28 @@
-export * from '@skyhook-io/k8s-ui/components/resources/renderers/ServiceAccountRenderer'
+import { ServiceAccountRenderer as BaseServiceAccountRenderer } from '@skyhook-io/k8s-ui/components/resources/renderers/ServiceAccountRenderer'
+import type { ResourceRef } from '@skyhook-io/k8s-ui'
+import { useRBACSubject } from '../../../api/rbac'
+
+interface ServiceAccountRendererProps {
+  data: any
+  onNavigate?: (ref: ResourceRef) => void
+}
+
+export function ServiceAccountRenderer({ data, onNavigate }: ServiceAccountRendererProps) {
+  const namespace = data?.metadata?.namespace ?? ''
+  const name = data?.metadata?.name ?? ''
+  const { data: rbacData, isLoading, error } = useRBACSubject(
+    'ServiceAccount',
+    namespace,
+    name,
+    !!name,
+  )
+  return (
+    <BaseServiceAccountRenderer
+      data={data}
+      rbacData={rbacData ?? null}
+      rbacLoading={isLoading}
+      rbacError={error as Error | null}
+      onNavigate={onNavigate}
+    />
+  )
+}

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

@@ -1,6 +1,7 @@
 import { WorkloadRenderer as BaseWorkloadRenderer } from '@skyhook-io/k8s-ui/components/resources/renderers/WorkloadRenderer'
 import { useNavigate } from 'react-router-dom'
 import { useScaleWorkload } from '../../../api/client'
+import { useRBACSubject } from '../../../api/rbac'
 import { useQueryClient } from '@tanstack/react-query'
 
 // Map plural lowercase kind to singular PascalCase for ownerReferences matching
@@ -29,12 +30,23 @@ export function WorkloadRenderer({ kind, data, onNavigate }: WorkloadRendererPro
   const metadata = data.metadata || {}
   const viewPodsUrl = `/resources/pods?ownerKind=${encodeURIComponent(getOwnerKind(kind))}&ownerName=${encodeURIComponent(metadata.name || '')}&namespace=${encodeURIComponent(metadata.namespace || '')}`
 
+  // SA reverse-lookup for the workload's pod template. "default" when unset
+  // (matches PodRenderer's semantics — the SA every Pod uses by default).
+  const saName = data?.spec?.template?.spec?.serviceAccountName || 'default'
+  const namespace = metadata.namespace ?? ''
+  const { data: rbacData, isLoading: rbacLoading, error: rbacError } = useRBACSubject(
+    'ServiceAccount', namespace, saName, !!namespace,
+  )
+
   return (
     <BaseWorkloadRenderer
       kind={kind}
       data={data}
       onNavigate={onNavigate}
       onViewPods={() => navigate(viewPodsUrl)}
+      rbacData={rbacData ?? null}
+      rbacLoading={rbacLoading}
+      rbacError={rbacError as Error | null}
       onScale={async (replicas) => {
         await scaleMutation.mutateAsync({
           kind,

package/src/components/resources/renderers/index.ts

@@ -28,6 +28,7 @@ export { WorkflowTemplateRenderer } from './WorkflowTemplateRenderer'
 export { NetworkPolicyRenderer } from './NetworkPolicyRenderer'
 export { PodDisruptionBudgetRenderer } from './PodDisruptionBudgetRenderer'
 export { ServiceAccountRenderer } from './ServiceAccountRenderer'
+export { NamespaceRenderer } from './NamespaceRenderer'
 export { RoleRenderer } from './RoleRenderer'
 export { RoleBindingRenderer } from './RoleBindingRenderer'
 export { EventRenderer } from './EventRenderer'

package/src/components/settings/MyPermissionsDialog.tsx

@@ -0,0 +1,231 @@
+import { useState, useEffect, useRef } from 'react'
+import { createPortal } from 'react-dom'
+import { Shield, X, Loader2 } from 'lucide-react'
+import { clsx } from 'clsx'
+import {
+  rbacVerbBadgeClass,
+  rbacResourceBadgeClass,
+  rbacApiGroupBadgeClass,
+  rbacResourceNameBadgeClass,
+  rbacNonResourceUrlBadgeClass,
+} from '@skyhook-io/k8s-ui'
+import { useAnimatedUnmount } from '../../hooks/useAnimatedUnmount'
+import { TRANSITION_BACKDROP, TRANSITION_PANEL } from '../../utils/animation'
+import { useNamespaces, useAuthMe } from '../../api/client'
+import { useRBACWhoami } from '../../api/rbac'
+
+interface MyPermissionsDialogProps {
+  open: boolean
+  onClose: () => void
+}
+
+export function MyPermissionsDialog({ open, onClose }: MyPermissionsDialogProps) {
+  const dialogRef = useRef<HTMLDivElement>(null)
+  const { shouldRender, isOpen } = useAnimatedUnmount(open, 200)
+  const [namespace, setNamespace] = useState('default')
+
+  const { data: authMe } = useAuthMe()
+  const { data: namespaces } = useNamespaces()
+  const { data: whoami, isLoading, error } = useRBACWhoami(namespace, open)
+
+  // ESC + focus
+  useEffect(() => {
+    if (!open) return
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        e.stopPropagation()
+        onClose()
+      }
+    }
+    document.addEventListener('keydown', handler, true)
+    return () => document.removeEventListener('keydown', handler, true)
+  }, [open, onClose])
+  useEffect(() => {
+    if (open && dialogRef.current) dialogRef.current.focus()
+  }, [open])
+
+  if (!shouldRender) return null
+
+  return createPortal(
+    <div className="fixed inset-0 z-50 flex items-center justify-center">
+      <div
+        className={clsx(
+          'absolute inset-0 bg-black/60 backdrop-blur-sm',
+          TRANSITION_BACKDROP,
+          isOpen ? 'opacity-100' : 'opacity-0',
+        )}
+        onClick={onClose}
+      />
+      <div
+        ref={dialogRef}
+        tabIndex={-1}
+        className={clsx(
+          'relative bg-theme-surface border border-theme-border shadow-theme-lg w-full outline-none flex flex-col',
+          'max-sm:inset-0 max-sm:absolute max-sm:rounded-none max-sm:max-h-full max-sm:border-0',
+          'sm:rounded-xl sm:max-w-3xl sm:mx-4 sm:max-h-[85vh]',
+          TRANSITION_PANEL,
+          isOpen ? 'opacity-100 scale-100' : 'opacity-0 scale-95',
+        )}
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between p-4 border-b border-theme-border shrink-0">
+          <div className="flex items-center gap-2">
+            <Shield className="w-5 h-5 text-theme-text-secondary" />
+            <h2 className="text-lg font-semibold text-theme-text-primary">My Permissions</h2>
+          </div>
+          <button
+            onClick={onClose}
+            className="p-1 text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-elevated rounded"
+          >
+            <X className="w-5 h-5" />
+          </button>
+        </div>
+
+        <div className="overflow-y-auto p-4 flex-1 space-y-4">
+          {/* Identity + namespace selector */}
+          <div className="flex flex-wrap items-end gap-3">
+            <div className="flex-1 min-w-[180px]">
+              <label className="block text-xs text-theme-text-tertiary mb-1">Identity</label>
+              <div className="px-2 py-1.5 text-sm bg-theme-elevated rounded border border-theme-border text-theme-text-primary truncate">
+                {authMe?.username || '(current kubeconfig user)'}
+              </div>
+            </div>
+            <div className="flex-1 min-w-[180px]">
+              <label className="block text-xs text-theme-text-tertiary mb-1">Namespace</label>
+              <select
+                value={namespace}
+                onChange={(e) => setNamespace(e.target.value)}
+                className="w-full px-2 py-1.5 text-sm bg-theme-elevated border border-theme-border rounded text-theme-text-primary focus:outline-none focus:border-blue-500"
+              >
+                {namespaces?.map((ns) => (
+                  <option key={ns.name} value={ns.name}>{ns.name}</option>
+                ))}
+                {!namespaces?.some((ns) => ns.name === namespace) && (
+                  <option value={namespace}>{namespace}</option>
+                )}
+              </select>
+            </div>
+          </div>
+
+          <p className="text-xs text-theme-text-tertiary">
+            Computed by the Kubernetes API via{' '}
+            <code className="bg-theme-elevated px-1 rounded">SelfSubjectRulesReview</code>.
+            Shows what you can do in <span className="text-theme-text-secondary">{namespace}</span>,
+            plus any cluster-scoped rules that apply everywhere.
+          </p>
+
+          {whoami?.incomplete && (
+            <div className="px-2.5 py-1.5 text-xs bg-amber-500/10 border border-amber-500/20 rounded">
+              The apiserver returned an incomplete rule set
+              {whoami.evaluationError ? ` (${whoami.evaluationError})` : ''}.
+              The list below may understate your actual permissions.
+            </div>
+          )}
+
+          {isLoading ? (
+            <div className="flex items-center gap-2 text-sm text-theme-text-tertiary">
+              <Loader2 className="w-3.5 h-3.5 animate-spin" />
+              Querying apiserver…
+            </div>
+          ) : error ? (
+            <div className="text-sm text-red-400">
+              Failed to load: {(error as Error).message}
+            </div>
+          ) : whoami ? (
+            <PermissionsTable whoami={whoami} />
+          ) : null}
+        </div>
+      </div>
+    </div>,
+    document.body,
+  )
+}
+
+function PermissionsTable({ whoami }: { whoami: { resourceRules: any[]; nonResourceRules: any[] } }) {
+  const resourceRules = whoami.resourceRules ?? []
+  const nonResourceRules = whoami.nonResourceRules ?? []
+
+  return (
+    <div className="space-y-4">
+      <div>
+        <div className="text-xs font-medium text-theme-text-secondary uppercase tracking-wider mb-2">
+          Resource permissions ({resourceRules.length})
+        </div>
+        {resourceRules.length === 0 ? (
+          <div className="text-sm text-theme-text-tertiary">
+            No resource permissions in this namespace.
+          </div>
+        ) : (
+          <div className="space-y-2">
+            {resourceRules.map((r, i) => (
+              <ResourceRuleRow key={i} rule={r} />
+            ))}
+          </div>
+        )}
+      </div>
+
+      {nonResourceRules.length > 0 && (
+        <div>
+          <div className="text-xs font-medium text-theme-text-secondary uppercase tracking-wider mb-2">
+            Non-resource permissions ({nonResourceRules.length})
+          </div>
+          <div className="space-y-1 text-xs">
+            {nonResourceRules.map((r, i) => (
+              <div key={i} className="flex items-center gap-1 flex-wrap">
+                {(r.verbs ?? []).map((v: string) => (
+                  <span key={v} className={clsx('badge', rbacVerbBadgeClass(v))}>{v}</span>
+                ))}
+                <span className="text-theme-text-secondary">on</span>
+                {(r.nonResourceURLs ?? []).map((u: string) => (
+                  <span key={u} className={clsx('badge', rbacNonResourceUrlBadgeClass)}>{u}</span>
+                ))}
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+function ResourceRuleRow({ rule }: { rule: { verbs?: string[]; apiGroups?: string[]; resources?: string[]; resourceNames?: string[] } }) {
+  const verbs = rule.verbs ?? []
+  const resources = rule.resources ?? []
+  const groups = rule.apiGroups ?? []
+  const resourceNames = rule.resourceNames ?? []
+  return (
+    <div className="card-inner text-xs flex items-center gap-1 flex-wrap">
+      {verbs.map((v) => (
+        <span key={v} className={clsx('badge', rbacVerbBadgeClass(v))}>{v}</span>
+      ))}
+      <span className="text-theme-text-secondary">on</span>
+      {resources.length === 0 ? (
+        <span className="text-theme-text-secondary italic">(no resources)</span>
+      ) : (
+        resources.map((r) => (
+          <span key={r} className={clsx('badge', rbacResourceBadgeClass)}>
+            {r === '*' ? '*' : r}
+          </span>
+        ))
+      )}
+      {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>
+          ))}
+        </>
+      )}
+      {resourceNames.length > 0 && (
+        <>
+          <span className="text-theme-text-secondary">named</span>
+          {resourceNames.map((n) => (
+            <span key={n} className={clsx('badge', rbacResourceNameBadgeClass)}>{n}</span>
+          ))}
+        </>
+      )}
+    </div>
+  )
+}

package/src/components/ui/DiagnosticsOverlay.tsx

@@ -484,6 +484,7 @@ function ConfigSection({ data }: { data: DiagnosticsSnapshot }) {
       <Row label="History Limit" value={cfg.historyLimit.toLocaleString()} />
       <Row label="MCP Enabled" value={cfg.mcpEnabled ? 'Yes' : 'No'} />
       <Row label="Prometheus URL" value={cfg.hasPrometheusURL ? 'Set' : 'Auto-discover'} />
+      <Row label="Prometheus Headers" value={cfg.hasPrometheusHeaders ? 'Set' : 'None'} />
     </Section>
   )
 }