@skyhook-io/k8s-ui 1.6.1 → 1.6.2

package/src/components/resources/index.ts

@@ -2,6 +2,7 @@ export * from './resource-utils'
 export * from './resource-utils-argo'
 export * from './resource-utils-certmanager'
 export * from './resource-utils-cnpg'
+export * from './resource-utils-crossplane'
 export * from './resource-utils-eso'
 export * from './resource-utils-flux'
 export * from './resource-utils-istio'

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

@@ -0,0 +1,233 @@
+import { clsx } from 'clsx'
+import { Layers, GitBranch, Box, ChevronRight, Pause } from 'lucide-react'
+import { Section, PropertyList, Property, ConditionsSection, AlertBanner, ResourceLink } from '../../ui/drawer-components'
+import { Tooltip } from '../../ui/Tooltip'
+import {
+  getCrossplaneStatus,
+  getCrossplaneStatusReason,
+  getCompositionRef,
+  getCompositionRevisionRef,
+  getCompositionUpdatePolicy,
+  getCrossplaneResourceRefs,
+  getBoundXRRef,
+  isClaim,
+  isCrossplanePaused,
+  type CrossplaneResourceRef,
+} from '../resource-utils-crossplane'
+import { kindToPlural } from '../../../utils/navigation'
+import type { StatusBadge } from '../resource-utils'
+
+/**
+ * Status of a composed resource, fetched by the host wrapper. The package
+ * renderer is pure — the host fans out per-ref queries (React Query) and
+ * passes the result down here.
+ *
+ * `missing` and `error` are split because they read differently to operators:
+ * `missing` (404) means the composed resource genuinely doesn't exist yet
+ * (reconciliation hasn't created it), which is a normal state for a
+ * freshly-applied Composite. Any other failure (401/403/500/network) means
+ * Radar can't tell the operator what they want to know, and "missing" would
+ * mislead them into thinking the resource is absent.
+ */
+export interface ComposedRefStatus {
+  ref: CrossplaneResourceRef
+  /** undefined means we haven't fetched yet (or the host doesn't support it) */
+  status?: StatusBadge
+  /** true while the fetch is in flight */
+  loading?: boolean
+  /** 404 — composed resource not created yet (normal during reconciliation) */
+  missing?: boolean
+  /** any non-404 fetch failure (auth, network, server error); message in errorMessage */
+  error?: boolean
+  errorMessage?: string
+}
+
+interface CompositeRendererProps {
+  data: any
+  onNavigate?: (ref: { kind: string; namespace: string; name: string; group?: string }) => void
+  /** Per-composed-ref status, indexed by `${apiVersion}/${kind}/${namespace}/${name}`.
+   * apiVersion is part of the key because two providers can ship CRDs with
+   * identical kind plurals across different groups — without it, the
+   * status of a Bucket from s3.aws.upbound.io would overwrite the status
+   * of an unrelated Bucket from another provider. Populated by the host
+   * wrapper. When absent, the renderer shows refs without status badges. */
+  composedRefStatuses?: Map<string, ComposedRefStatus>
+}
+
+function makeRefKey(ref: CrossplaneResourceRef): string {
+  return `${ref.apiVersion}/${ref.kind}/${ref.namespace ?? ''}/${ref.name}`
+}
+
+// Crossplane refs carry full apiVersion ("s3.aws.upbound.io/v1beta1"); the
+// renderer needs the group ("s3.aws.upbound.io") to disambiguate plurals
+// across providers.
+function groupFromApiVersion(apiVersion: string | undefined): string {
+  if (!apiVersion) return ''
+  const slash = apiVersion.indexOf('/')
+  return slash < 0 ? '' : apiVersion.slice(0, slash)
+}
+
+export function CompositeRenderer({ data, onNavigate, composedRefStatuses }: CompositeRendererProps) {
+  const status = getCrossplaneStatus(data)
+  const reason = getCrossplaneStatusReason(data)
+  const compositionRef = getCompositionRef(data)
+  const compositionRevisionRef = getCompositionRevisionRef(data)
+  const compositionUpdatePolicy = getCompositionUpdatePolicy(data)
+  const resourceRefs = getCrossplaneResourceRefs(data)
+  const claim = isClaim(data)
+  const boundXR = claim ? getBoundXRRef(data) : null
+  const paused = isCrossplanePaused(data)
+  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. Composed resources will not be reconciled until the annotation is removed."
+        />
+      )}
+
+      {alertVariant && reason && (
+        <AlertBanner
+          variant={alertVariant === 'unhealthy' ? 'error' : 'warning'}
+          title={status.text}
+          message={reason}
+        />
+      )}
+
+      <Section title={claim ? 'Claim' : 'Composite Resource'} icon={Layers} defaultExpanded>
+        <PropertyList>
+          {compositionRef && (
+            <Property
+              label="Composition"
+              value={
+                <ResourceLink
+                  name={compositionRef.name}
+                  kind="compositions"
+                  namespace=""
+                  onNavigate={onNavigate}
+                />
+              }
+            />
+          )}
+          {compositionRevisionRef && (
+            <Property
+              label="Composition Revision"
+              value={
+                <ResourceLink
+                  name={compositionRevisionRef.name}
+                  kind="compositionrevisions"
+                  namespace=""
+                  onNavigate={onNavigate}
+                />
+              }
+            />
+          )}
+          {compositionUpdatePolicy && (
+            <Property label="Update Policy" value={compositionUpdatePolicy} />
+          )}
+          {boundXR && (
+            <Property
+              label="Bound Composite"
+              value={
+                <ResourceLink
+                  name={boundXR.name}
+                  kind={kindToPlural(boundXR.kind)}
+                  namespace={boundXR.namespace || ''}
+                  group={groupFromApiVersion(boundXR.apiVersion) || undefined}
+                  onNavigate={onNavigate}
+                />
+              }
+            />
+          )}
+        </PropertyList>
+      </Section>
+
+      <Section
+        title={`Composed Resources${resourceRefs.length > 0 ? ` (${resourceRefs.length})` : ''}`}
+        icon={GitBranch}
+        defaultExpanded
+      >
+        {resourceRefs.length === 0 ? (
+          <div className="text-sm text-theme-text-tertiary py-2">
+            No composed resources yet — the composition has not produced any managed resources.
+          </div>
+        ) : (
+          <div className="space-y-1">
+            {resourceRefs.map((ref) => (
+              <ComposedRefRow
+                key={makeRefKey(ref)}
+                ref_={ref}
+                statusEntry={composedRefStatuses?.get(makeRefKey(ref))}
+                onNavigate={onNavigate}
+              />
+            ))}
+          </div>
+        )}
+      </Section>
+
+      <ConditionsSection conditions={data?.status?.conditions} />
+    </>
+  )
+}
+
+function ComposedRefRow({
+  ref_,
+  statusEntry,
+  onNavigate,
+}: {
+  ref_: CrossplaneResourceRef
+  statusEntry?: ComposedRefStatus
+  onNavigate?: (ref: { kind: string; namespace: string; name: string; group?: string }) => void
+}) {
+  const kindPlural = kindToPlural(ref_.kind)
+  const group = groupFromApiVersion(ref_.apiVersion)
+  return (
+    <div className="flex items-center gap-2 py-1 px-2 rounded hover:bg-theme-hover text-sm">
+      <Box className="w-3.5 h-3.5 text-theme-text-tertiary shrink-0" />
+      <span className="text-theme-text-tertiary font-mono shrink-0 w-32 truncate">{ref_.kind}</span>
+      <span className="flex-1 min-w-0 truncate">
+        <ResourceLink
+          name={ref_.name}
+          kind={kindPlural}
+          namespace={ref_.namespace || ''}
+          group={group || undefined}
+          onNavigate={onNavigate}
+        />
+      </span>
+      {ref_.namespace && (
+        <span className="text-xs text-theme-text-tertiary truncate w-32 text-right">{ref_.namespace}</span>
+      )}
+      <StatusCellInline statusEntry={statusEntry} />
+      <ChevronRight className="w-3.5 h-3.5 text-theme-text-tertiary shrink-0" />
+    </div>
+  )
+}
+
+function StatusCellInline({ statusEntry }: { statusEntry?: ComposedRefStatus }) {
+  if (!statusEntry || statusEntry.loading) {
+    return <span className="badge-sm bg-theme-elevated text-theme-text-tertiary w-20 text-center">…</span>
+  }
+  if (statusEntry.missing) {
+    return <span className="badge-sm bg-theme-elevated text-theme-text-tertiary w-20 text-center">missing</span>
+  }
+  if (statusEntry.error) {
+    const tip = statusEntry.errorMessage || 'Could not fetch composed resource status'
+    return (
+      <Tooltip content={tip}>
+        <span className="badge-sm status-unhealthy w-20 text-center">error</span>
+      </Tooltip>
+    )
+  }
+  if (!statusEntry.status) {
+    return <span className="badge-sm bg-theme-elevated text-theme-text-tertiary w-20 text-center">-</span>
+  }
+  return (
+    <span className={clsx('badge-sm w-24 text-center truncate', statusEntry.status.color)}>
+      {statusEntry.status.text}
+    </span>
+  )
+}

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

@@ -0,0 +1,218 @@
+import { clsx } from 'clsx'
+import { Layers, GitBranch, FileText, Boxes, ScrollText } from 'lucide-react'
+import { Section, PropertyList, Property, AlertBanner, ResourceLink } from '../../ui/drawer-components'
+import { CodeViewer } from '../../ui/CodeViewer'
+import { kindToPlural } from '../../../utils/navigation'
+
+interface CompositionRendererProps {
+  data: any
+  onNavigate?: (ref: { kind: string; namespace: string; name: string }) => void
+}
+
+function extractApiGroup(apiVersion?: string): string {
+  if (!apiVersion) return ''
+  const slash = apiVersion.indexOf('/')
+  return slash < 0 ? '' : apiVersion.slice(0, slash)
+}
+
+/** Used by both CompositionRenderer and CompositionRevisionRenderer — same shape. */
+function CompositionBody({ data, onNavigate, revision }: CompositionRendererProps & { revision?: number | null }) {
+  const spec = data?.spec ?? {}
+  const compositeTypeRef = spec.compositeTypeRef ?? {}
+  const xrdGroup = extractApiGroup(compositeTypeRef.apiVersion)
+  const xrdKind = compositeTypeRef.kind
+  const mode = spec.mode || 'Resources'
+  const pipeline: any[] = spec.pipeline ?? []
+  const resources: any[] = spec.resources ?? []
+  const writeConnNs = spec.writeConnectionSecretsToNamespace
+  const isPipeline = mode === 'Pipeline'
+  const hasNoSteps = isPipeline && pipeline.length === 0
+  const hasNoResources = !isPipeline && resources.length === 0
+
+  return (
+    <>
+      {hasNoSteps && (
+        <AlertBanner
+          variant="warning"
+          title="Empty pipeline"
+          message="This Composition runs in Pipeline mode but has no functions configured. It will produce no composed resources."
+        />
+      )}
+      {hasNoResources && (
+        <AlertBanner
+          variant="warning"
+          title="No composed resources"
+          message="This Composition has no resource templates and is not in Pipeline mode."
+        />
+      )}
+
+      <Section title="Composition" icon={Layers} defaultExpanded>
+        <PropertyList>
+          {revision != null && <Property label="Revision" value={`#${revision}`} />}
+          <Property label="Mode" value={
+            <span className={clsx('badge-sm', mode === 'Pipeline' ? 'status-violet' : 'status-neutral')}>
+              {mode}
+            </span>
+          } />
+          {xrdKind && (
+            <Property
+              label="Composite Kind"
+              value={<span className="font-mono text-theme-text-secondary">{xrdKind}</span>}
+            />
+          )}
+          {compositeTypeRef.apiVersion && (
+            <Property
+              label="API Version"
+              value={<span className="font-mono text-theme-text-tertiary text-xs">{compositeTypeRef.apiVersion}</span>}
+            />
+          )}
+          {writeConnNs && <Property label="Connection Secret Namespace" value={writeConnNs} />}
+        </PropertyList>
+        {xrdKind && (
+          <div className="mt-2 text-xs text-theme-text-secondary">
+            Backed by XRD:{' '}
+            <ResourceLink
+              name={`${kindToPlural(xrdKind)}.${xrdGroup}`}
+              kind="compositeresourcedefinitions"
+              namespace=""
+              onNavigate={onNavigate}
+              label={<span className="font-mono">{kindToPlural(xrdKind)}.{xrdGroup}</span>}
+            />
+          </div>
+        )}
+      </Section>
+
+      {isPipeline && pipeline.length > 0 && (
+        <Section title={`Pipeline (${pipeline.length} step${pipeline.length === 1 ? '' : 's'})`} icon={GitBranch} defaultExpanded>
+          <div className="space-y-3">
+            {pipeline.map((step: any, i: number) => {
+              const fnName = step?.functionRef?.name
+              const inputKind = step?.input?.kind
+              const inputApiVersion = step?.input?.apiVersion
+              return (
+                <div key={i} className="card-inner-lg">
+                  <div className="flex items-center gap-2 mb-2">
+                    <span className="badge-sm status-neutral font-mono">#{i + 1}</span>
+                    <span className="font-medium text-theme-text-primary">{step.step || '(unnamed step)'}</span>
+                  </div>
+                  <PropertyList>
+                    {fnName && (
+                      <Property
+                        label="Function"
+                        value={
+                          <ResourceLink
+                            name={fnName}
+                            kind="functions"
+                            namespace=""
+                            onNavigate={onNavigate}
+                          />
+                        }
+                      />
+                    )}
+                    {inputKind && (
+                      <Property
+                        label="Input Kind"
+                        value={<span className="font-mono">{inputKind}</span>}
+                      />
+                    )}
+                    {inputApiVersion && (
+                      <Property
+                        label="Input API"
+                        value={<span className="font-mono text-xs text-theme-text-tertiary">{inputApiVersion}</span>}
+                      />
+                    )}
+                  </PropertyList>
+                  {step.input && (
+                    <details className="mt-2">
+                      <summary className="text-xs text-theme-text-tertiary cursor-pointer hover:text-theme-text-secondary">
+                        Show input
+                      </summary>
+                      <div className="mt-1">
+                        <CodeViewer code={JSON.stringify(step.input, null, 2)} language="json" maxHeight="200px" />
+                      </div>
+                    </details>
+                  )}
+                </div>
+              )
+            })}
+          </div>
+        </Section>
+      )}
+
+      {!isPipeline && resources.length > 0 && (
+        <Section title={`Resources (${resources.length})`} icon={Boxes} defaultExpanded>
+          <div className="space-y-1">
+            {resources.map((res: any, i: number) => {
+              const baseKind = res?.base?.kind
+              const baseApiVersion = res?.base?.apiVersion
+              const patchCount = (res?.patches || []).length
+              return (
+                <div key={i} className="card-inner text-sm flex items-center gap-2 flex-wrap">
+                  <span className="badge-sm status-neutral">{baseKind || 'Unknown'}</span>
+                  <span className="font-mono text-theme-text-secondary break-all">{res.name || `resource-${i}`}</span>
+                  {baseApiVersion && (
+                    <span className="text-theme-text-tertiary text-xs">{baseApiVersion}</span>
+                  )}
+                  {patchCount > 0 && (
+                    <span className="ml-auto text-theme-text-tertiary text-xs">
+                      {patchCount} patch{patchCount === 1 ? '' : 'es'}
+                    </span>
+                  )}
+                </div>
+              )
+            })}
+          </div>
+        </Section>
+      )}
+
+      {spec.publishConnectionDetailsWithStoreConfigRef?.name && (
+        <Section title="Connection Store" icon={FileText} defaultExpanded={false}>
+          <PropertyList>
+            <Property label="StoreConfig" value={spec.publishConnectionDetailsWithStoreConfigRef.name} />
+          </PropertyList>
+        </Section>
+      )}
+    </>
+  )
+}
+
+export function CompositionRenderer({ data, onNavigate }: CompositionRendererProps) {
+  return <CompositionBody data={data} onNavigate={onNavigate} />
+}
+
+interface CompositionRevisionRendererProps {
+  data: any
+  onNavigate?: (ref: { kind: string; namespace: string; name: string }) => void
+}
+
+export function CompositionRevisionRenderer({ data, onNavigate }: CompositionRevisionRendererProps) {
+  const revision: number | null = data?.spec?.revision ?? null
+  const sourceCompositionName = data?.metadata?.labels?.['crossplane.io/composition-name']
+  // Crossplane labels active vs inactive revisions via spec.revision being the
+  // highest one; the package controller doesn't write a flag. Use ownerRefs as
+  // a stronger signal — the source Composition's UID controls the revision.
+
+  return (
+    <>
+      {sourceCompositionName && (
+        <Section title="Source Composition" icon={ScrollText} defaultExpanded>
+          <PropertyList>
+            <Property
+              label="Composition"
+              value={
+                <ResourceLink
+                  name={sourceCompositionName}
+                  kind="compositions"
+                  namespace=""
+                  onNavigate={onNavigate}
+                />
+              }
+            />
+            {revision != null && <Property label="Revision" value={`#${revision}`} />}
+          </PropertyList>
+        </Section>
+      )}
+      <CompositionBody data={data} onNavigate={onNavigate} revision={revision} />
+    </>
+  )
+}

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

@@ -0,0 +1,145 @@
+import { Package, Settings, ScrollText, Layers } from 'lucide-react'
+import { Section, PropertyList, Property, ConditionsSection, AlertBanner, ResourceLink } from '../../ui/drawer-components'
+import {
+  getProviderStatus,
+  getProviderPackage,
+  getProviderPackagePullPolicy,
+  getProviderCurrentRevision,
+} from '../resource-utils-crossplane'
+
+/**
+ * Shared renderer for Crossplane package kinds — Provider, Function, Configuration.
+ *
+ * All three share the same `pkg.crossplane.io` package machinery (spec.package,
+ * pull policy, revision history, currentRevision in status, Healthy/Installed
+ * conditions). The only material difference is that a Configuration's
+ * `status.objectRefs` lists the XRDs/Compositions/Functions it installed —
+ * surfaced as an extra section.
+ */
+interface CrossplanePackageRendererProps {
+  data: any
+  /** Human label for the section header (e.g. "Provider", "Function", "Configuration"). */
+  kindLabel: string
+  onNavigate?: (ref: { kind: string; namespace: string; name: string }) => void
+}
+
+export function CrossplanePackageRenderer({ data, kindLabel, onNavigate }: CrossplanePackageRendererProps) {
+  const status = getProviderStatus(data)
+  const pkg = getProviderPackage(data)
+  const pullPolicy = getProviderPackagePullPolicy(data)
+  const currentRevision = getProviderCurrentRevision(data)
+  const conditions = data?.status?.conditions || []
+
+  const installed = conditions.find((c: any) => c.type === 'Installed')
+  const healthy = conditions.find((c: any) => c.type === 'Healthy')
+  const objectRefs: any[] = data?.status?.objectRefs || []
+  const dependsOn: any[] = data?.spec?.dependsOn || []
+
+  return (
+    <>
+      {installed?.status === 'False' && (
+        <AlertBanner
+          variant="error"
+          title={`${kindLabel} install failed`}
+          message={installed.message || installed.reason || 'Package failed to install.'}
+        />
+      )}
+      {installed?.status === 'True' && healthy?.status === 'False' && (
+        <AlertBanner
+          variant="warning"
+          title={`${kindLabel} unhealthy`}
+          message={healthy.message || healthy.reason || `${kindLabel} package is installed but its controller is not healthy.`}
+        />
+      )}
+
+      <Section title={kindLabel} icon={Package} defaultExpanded>
+        <PropertyList>
+          <Property label="Package" value={<span className="font-mono break-all">{pkg}</span>} />
+          {pullPolicy && <Property label="Pull Policy" value={pullPolicy} />}
+          {data?.spec?.revisionActivationPolicy && (
+            <Property label="Revision Activation" value={data.spec.revisionActivationPolicy} />
+          )}
+          {typeof data?.spec?.revisionHistoryLimit === 'number' && (
+            <Property label="Revision History Limit" value={String(data.spec.revisionHistoryLimit)} />
+          )}
+          {data?.spec?.skipDependencyResolution !== undefined && (
+            <Property label="Skip Dependency Resolution" value={data.spec.skipDependencyResolution ? 'Yes' : 'No'} />
+          )}
+          <Property label="Status" value={status.text} />
+        </PropertyList>
+      </Section>
+
+      {(currentRevision || data?.status?.currentIdentifier) && (
+        <Section title="Revision" icon={ScrollText} defaultExpanded>
+          <PropertyList>
+            {currentRevision && (
+              <Property label="Current Revision" value={<span className="font-mono break-all">{currentRevision}</span>} />
+            )}
+            {data?.status?.currentIdentifier && (
+              <Property
+                label="Current Identifier"
+                value={<span className="font-mono break-all">{data.status.currentIdentifier}</span>}
+              />
+            )}
+          </PropertyList>
+        </Section>
+      )}
+
+      {data?.spec?.runtimeConfigRef?.name && (
+        <Section title="Runtime Config" icon={Settings} defaultExpanded>
+          <PropertyList>
+            <Property
+              label="Name"
+              value={
+                <ResourceLink
+                  name={data.spec.runtimeConfigRef.name}
+                  kind="deploymentruntimeconfigs"
+                  namespace=""
+                  onNavigate={onNavigate}
+                />
+              }
+            />
+          </PropertyList>
+        </Section>
+      )}
+
+      {dependsOn.length > 0 && (
+        <Section title={`Dependencies (${dependsOn.length})`} icon={Layers} defaultExpanded>
+          <div className="space-y-1">
+            {dependsOn.map((dep: any, i: number) => {
+              const ref = dep.provider || dep.function || dep.configuration
+              const depKind = dep.provider ? 'Provider' : dep.function ? 'Function' : dep.configuration ? 'Configuration' : 'Unknown'
+              return (
+                <div key={i} className="card-inner text-sm flex items-center gap-2 flex-wrap">
+                  <span className="badge-sm status-neutral">{depKind}</span>
+                  <span className="font-mono text-theme-text-secondary break-all">{ref || '-'}</span>
+                  {dep.version && (
+                    <span className="text-theme-text-tertiary text-xs">version: {dep.version}</span>
+                  )}
+                </div>
+              )
+            })}
+          </div>
+        </Section>
+      )}
+
+      {objectRefs.length > 0 && (
+        <Section title={`Installed Resources (${objectRefs.length})`} icon={Layers} defaultExpanded>
+          <div className="space-y-1">
+            {objectRefs.map((ref: any, i: number) => (
+              <div key={i} className="card-inner text-sm flex items-center gap-2 flex-wrap">
+                <span className="badge-sm status-neutral">{ref.kind || 'Unknown'}</span>
+                <span className="font-mono text-theme-text-secondary break-all">{ref.name}</span>
+                {ref.apiVersion && (
+                  <span className="text-theme-text-tertiary text-xs">{ref.apiVersion}</span>
+                )}
+              </div>
+            ))}
+          </div>
+        </Section>
+      )}
+
+      <ConditionsSection conditions={conditions} />
+    </>
+  )
+}

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

@@ -0,0 +1,71 @@
+import { KeyRound, Settings } from 'lucide-react'
+import { Section, PropertyList, Property, AlertBanner, ResourceLink } from '../../ui/drawer-components'
+import { CodeViewer } from '../../ui/CodeViewer'
+import { getProviderConfigStatus, getProviderConfigCredentialsSource } from '../resource-utils-crossplane'
+
+interface CrossplaneProviderConfigRendererProps {
+  data: any
+  onNavigate?: (ref: { kind: string; namespace: string; name: string }) => void
+}
+
+function extractApiGroup(apiVersion?: string): string {
+  if (!apiVersion) return ''
+  const slash = apiVersion.indexOf('/')
+  return slash < 0 ? '' : apiVersion.slice(0, slash)
+}
+
+export function CrossplaneProviderConfigRenderer({ data, onNavigate }: CrossplaneProviderConfigRendererProps) {
+  const status = getProviderConfigStatus(data)
+  const credentialsSource = getProviderConfigCredentialsSource(data)
+  const apiGroup = extractApiGroup(data?.apiVersion)
+  const secretRef = data?.spec?.credentials?.secretRef
+  const namespace = data?.metadata?.namespace || ''
+  const users = typeof data?.status?.users === 'number' ? data.status.users : null
+
+  return (
+    <>
+      {credentialsSource === 'None' && (
+        <AlertBanner
+          variant="info"
+          title="No credentials configured"
+          message="This ProviderConfig has credentials.source set to None — only useful for providers that auto-discover credentials (e.g. in-cluster K8s, IRSA)."
+        />
+      )}
+
+      <Section title="ProviderConfig" icon={Settings} defaultExpanded>
+        <PropertyList>
+          <Property label="API Group" value={apiGroup || '-'} />
+          <Property label="Credentials Source" value={credentialsSource} />
+          {users !== null && <Property label="In Use By" value={`${users} resource${users === 1 ? '' : 's'}`} />}
+          <Property label="Status" value={status.text} />
+        </PropertyList>
+      </Section>
+
+      {secretRef && (
+        <Section title="Credentials Secret" icon={KeyRound} defaultExpanded>
+          <PropertyList>
+            <Property
+              label="Secret"
+              value={
+                <ResourceLink
+                  name={secretRef.name}
+                  kind="secrets"
+                  namespace={secretRef.namespace || namespace}
+                  onNavigate={onNavigate}
+                />
+              }
+            />
+            {secretRef.namespace && <Property label="Namespace" value={secretRef.namespace} />}
+            {secretRef.key && <Property label="Key" value={<span className="font-mono">{secretRef.key}</span>} />}
+          </PropertyList>
+        </Section>
+      )}
+
+      {data?.spec && (
+        <Section title="Spec" icon={Settings} defaultExpanded={false}>
+          <CodeViewer code={JSON.stringify(data.spec, null, 2)} language="json" />
+        </Section>
+      )}
+    </>
+  )
+}