@skyhook-io/k8s-ui 1.4.0 → 1.4.2

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

@@ -1,4 +1,4 @@
-import { GitBranch, FolderTree, Settings, Target, XCircle } from 'lucide-react'
+import { GitBranch, FolderTree, Settings, Target, XCircle, History, ListChecks } from 'lucide-react'
 import { clsx } from 'clsx'
 import { Section, PropertyList, Property, ConditionsSection, ProblemAlerts } from '../../ui/drawer-components'
 import { formatAge } from '../resource-utils'
@@ -16,6 +16,62 @@ interface ArgoApplicationRendererProps {
   isTerminating?: boolean
 }
 
+function SourceProperties({ source }: { source: any }) {
+  if (!source) return null
+  return (
+    <>
+      <Property label="Repository" value={source.repoURL} />
+      {source.path && <Property label="Path" value={source.path} />}
+      {source.targetRevision && (
+        <Property
+          label="Target Revision"
+          value={
+            <span className="flex items-center gap-1">
+              <GitBranch className="w-3.5 h-3.5" />
+              {source.targetRevision}
+            </span>
+          }
+        />
+      )}
+      {source.chart && <Property label="Helm Chart" value={source.chart} />}
+      {source.helm?.valueFiles && source.helm.valueFiles.length > 0 && (
+        <Property label="Value Files" value={source.helm.valueFiles.join(', ')} />
+      )}
+      {source.helm?.parameters && source.helm.parameters.length > 0 && (
+        <Property
+          label="Helm Parameters"
+          value={
+            <div className="flex flex-wrap gap-1">
+              {source.helm.parameters.filter(Boolean).map((p: { name: string; value: string }, i: number) => (
+                <span key={i} className="badge-sm bg-theme-elevated text-theme-text-secondary font-mono">
+                  {p.name ?? '?'}={p.value ?? ''}
+                </span>
+              ))}
+            </div>
+          }
+        />
+      )}
+      {source.kustomize?.namePrefix && (
+        <Property label="Kustomize Prefix" value={source.kustomize.namePrefix} />
+      )}
+    </>
+  )
+}
+
+function isSyncResourceFailed(res: any): boolean {
+  return res.status === 'SyncFailed' || res.hookPhase === 'Failed' || res.hookPhase === 'Error'
+}
+
+function getSyncResourceBadgeClass(status: string, hookPhase?: string): string {
+  if (status === 'SyncFailed' || hookPhase === 'Failed' || hookPhase === 'Error') {
+    return 'status-unhealthy'
+  }
+  if (status === 'Synced') return 'status-healthy'
+  if (status === 'Pruned') return 'status-neutral'
+  if (status === 'PruneSkipped') return 'status-degraded'
+  return 'status-unknown'
+}
+
 export function ArgoApplicationRenderer({ data, onTerminate, isTerminating }: ArgoApplicationRendererProps) {
   const status = (data.status || {}) as ArgoAppStatus & {
     resources?: ArgoResource[]
@@ -47,8 +103,9 @@ export function ArgoApplicationRenderer({ data, onTerminate, isTerminating }: Ar
     problems.push({ color: 'yellow', message: 'Application is out of sync with git' })
   }
 
-  // Extract source info
-  const source = spec.source || {}
+  // Extract source info — support both spec.source (single) and spec.sources (multi, ArgoCD 2.6+)
+  const sources: any[] = (spec.sources && spec.sources.length > 0) ? spec.sources : (spec.source ? [spec.source] : [])
+  const isMultiSource = Array.isArray(spec.sources) && spec.sources.length > 0
   const destination = spec.destination || {}
   const syncPolicy = spec.syncPolicy || {}
   const operationState = status.operationState
@@ -56,6 +113,12 @@ export function ArgoApplicationRenderer({ data, onTerminate, isTerminating }: Ar
   // Check if sync is in progress
   const isSyncing = operationState?.phase === 'Running'
 
+  // Extract sync result resources for per-resource failure details
+  const syncResultResources: any[] = operationState?.syncResult?.resources || []
+  const failedSyncResources = syncResultResources.filter(isSyncResourceFailed)
+  const otherSyncResources = syncResultResources.filter((r: any) => !isSyncResourceFailed(r))
+  const sortedSyncResources = [...failedSyncResources, ...otherSyncResources]
+
   return (
     <>
       <ProblemAlerts problems={problems} />
@@ -90,31 +153,27 @@ export function ArgoApplicationRenderer({ data, onTerminate, isTerminating }: Ar
         </div>
       </Section>
 
-      {/* Source section */}
-      <Section title="Source" icon={FolderTree}>
-        <PropertyList>
-          <Property label="Repository" value={source.repoURL} />
-          {source.path && <Property label="Path" value={source.path} />}
-          {source.targetRevision && (
-            <Property
-              label="Target Revision"
-              value={
-                <span className="flex items-center gap-1">
-                  <GitBranch className="w-3.5 h-3.5" />
-                  {source.targetRevision}
-                </span>
-              }
-            />
-          )}
-          {source.chart && <Property label="Helm Chart" value={source.chart} />}
-          {source.helm?.valueFiles && source.helm.valueFiles.length > 0 && (
-            <Property label="Value Files" value={source.helm.valueFiles.join(', ')} />
-          )}
-          {source.kustomize?.namePrefix && (
-            <Property label="Kustomize Prefix" value={source.kustomize.namePrefix} />
-          )}
-        </PropertyList>
-      </Section>
+      {/* Source section — renders each source for multi-source apps */}
+      {isMultiSource ? (
+        <Section title={`Sources (${sources.length})`} icon={FolderTree}>
+          <div className="space-y-3">
+            {sources.map((src: any, idx: number) => (
+              <div key={idx} className="card-inner">
+                <div className="text-xs font-medium text-theme-text-tertiary mb-1.5">Source {idx + 1}</div>
+                <PropertyList>
+                  <SourceProperties source={src} />
+                </PropertyList>
+              </div>
+            ))}
+          </div>
+        </Section>
+      ) : sources.length > 0 ? (
+        <Section title="Source" icon={FolderTree}>
+          <PropertyList>
+            <SourceProperties source={sources[0]} />
+          </PropertyList>
+        </Section>
+      ) : null}
 
       {/* Destination section */}
       <Section title="Destination" icon={Target}>
@@ -192,9 +251,22 @@ export function ArgoApplicationRenderer({ data, onTerminate, isTerminating }: Ar
             {operationState.message && (
               <Property label="Message" value={operationState.message} />
             )}
+            {operationState.startedAt && (
+              <Property label="Started" value={formatAge(operationState.startedAt)} />
+            )}
             {operationState.finishedAt && (
               <Property label="Finished" value={formatAge(operationState.finishedAt)} />
             )}
+            {operationState.retryCount != null && (
+              <Property
+                label="Retries"
+                value={
+                  syncPolicy.retry?.limit
+                    ? `${operationState.retryCount}/${syncPolicy.retry.limit}`
+                    : String(operationState.retryCount)
+                }
+              />
+            )}
             {operationState.syncResult?.revision && (
               <Property label="Revision" value={operationState.syncResult.revision} />
             )}
@@ -202,6 +274,55 @@ export function ArgoApplicationRenderer({ data, onTerminate, isTerminating }: Ar
         </Section>
       )}
 
+      {/* Sync Result Resources — per-resource sync status with failure details */}
+      {sortedSyncResources.length > 0 && (
+        <Section
+          title={`Sync Result Resources (${sortedSyncResources.length})`}
+          icon={ListChecks}
+          defaultExpanded={failedSyncResources.length > 0}
+        >
+          <div className="space-y-1.5">
+            {sortedSyncResources.map((res: any, idx: number) => {
+              const isFailed = isSyncResourceFailed(res)
+              return (
+                <div
+                  key={`${res.kind}-${res.namespace}-${res.name}-${idx}`}
+                  className={clsx(
+                    'card-inner px-3 py-2',
+                    isFailed && 'border-l-2 border-red-500'
+                  )}
+                >
+                  <div className="flex items-center gap-2 text-sm">
+                    <span className={clsx('badge badge-sm', getSyncResourceBadgeClass(res.status, res.hookPhase))}>
+                      {res.status || res.hookPhase || 'Unknown'}
+                    </span>
+                    <span className="text-theme-text-primary">
+                      {res.kind}/{res.name}
+                    </span>
+                    {res.namespace && (
+                      <span className="text-theme-text-tertiary text-xs">({res.namespace})</span>
+                    )}
+                  </div>
+                  {res.message && (
+                    <div className={clsx(
+                      'text-xs mt-1 break-all',
+                      isFailed ? 'text-red-400' : 'text-theme-text-secondary'
+                    )}>
+                      {res.message}
+                    </div>
+                  )}
+                  {res.hookPhase && res.hookPhase !== res.status && (
+                    <div className="text-xs text-theme-text-tertiary mt-0.5">
+                      Hook: {res.hookPhase}
+                    </div>
+                  )}
+                </div>
+              )
+            })}
+          </div>
+        </Section>
+      )}
+
       {/* Managed Resources */}
       {managedResources.length > 0 && (
         <ManagedResourcesList
@@ -210,6 +331,47 @@ export function ArgoApplicationRenderer({ data, onTerminate, isTerminating }: Ar
         />
       )}
 
+      {/* Revision History */}
+      {status.history && status.history.length > 0 && (
+        <Section title={`Revision History (${status.history.length})`} icon={History} defaultExpanded={false}>
+          <div className="space-y-2 max-h-48 overflow-y-auto">
+            {status.history
+              .slice(0, 10)
+              .map((entry, idx) => (
+                <div
+                  key={entry.id ?? idx}
+                  className={clsx(
+                    'p-2 rounded text-sm',
+                    idx === 0
+                      ? 'bg-green-500/10 border border-green-500/30'
+                      : 'bg-theme-elevated/30'
+                  )}
+                >
+                  <div className="flex items-center justify-between">
+                    <span className="font-medium text-theme-text-primary font-mono text-xs">
+                      {entry.revision
+                        ? entry.revision.length > 12
+                          ? entry.revision.slice(0, 12)
+                          : entry.revision
+                        : '-'}
+                    </span>
+                    {entry.deployedAt && (
+                      <span className="text-xs text-theme-text-tertiary">
+                        {formatAge(entry.deployedAt)}
+                      </span>
+                    )}
+                  </div>
+                  {entry.source?.path && (
+                    <div className="text-xs text-theme-text-secondary mt-0.5 truncate" title={entry.source.path}>
+                      {entry.source.path}
+                    </div>
+                  )}
+                </div>
+              ))}
+          </div>
+        </Section>
+      )}
+
       {/* Revision Info */}
       {(status.sync?.revision || status.reconciledAt) && (
         <Section title="Revision Info" defaultExpanded={false}>

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

@@ -25,6 +25,13 @@ export function CNPGBackupRenderer({ data, onNavigate }: CNPGBackupRendererProps
   const target = getCNPGBackupTarget(data)
   const clusterName = getCNPGBackupCluster(data)
 
+  // WAL range fields
+  const beginWal = data.status?.beginWal
+  const endWal = data.status?.endWal
+  const beginLSN = data.status?.beginLSN
+  const endLSN = data.status?.endLSN
+  const hasWalRange = beginWal || endWal || beginLSN || endLSN
+
   return (
     <>
       {/* Problem alerts */}
@@ -43,6 +50,9 @@ export function CNPGBackupRenderer({ data, onNavigate }: CNPGBackupRendererProps
           <Property label="Method" value={getCNPGBackupMethod(data)} />
           <Property label="Duration" value={getCNPGBackupDuration(data)} />
           <Property label="Backup Name" value={getCNPGBackupName(data)} />
+          {data.status?.instanceID?.podName && (
+            <Property label="Instance" value={data.status.instanceID.podName} />
+          )}
         </PropertyList>
         {data.status?.startedAt && (
           <div className="mt-2 pt-2 border-t border-theme-border">
@@ -76,6 +86,18 @@ export function CNPGBackupRenderer({ data, onNavigate }: CNPGBackupRendererProps
         </PropertyList>
       </Section>
 
+      {/* WAL Range */}
+      {hasWalRange && (
+        <Section title="WAL Range" defaultExpanded>
+          <PropertyList>
+            {beginWal && <Property label="Begin WAL" value={beginWal} />}
+            {endWal && <Property label="End WAL" value={endWal} />}
+            {beginLSN && <Property label="Begin LSN" value={beginLSN} />}
+            {endLSN && <Property label="End LSN" value={endLSN} />}
+          </PropertyList>
+        </Section>
+      )}
+
       {/* Target - for PITR backups */}
       {target !== '-' && (
         <Section title="Target" defaultExpanded>

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

@@ -1,8 +1,7 @@
-import { Database, HardDrive, Activity, Clock, Shield } from 'lucide-react'
+import { Database, HardDrive, Activity, Clock, Shield, KeyRound } from 'lucide-react'
 import { Section, PropertyList, Property, ConditionsSection, AlertBanner, ResourceLink } from '../../ui/drawer-components'
 import {
   getCNPGClusterInstances,
-  getCNPGClusterPrimary,
   getCNPGClusterPhase,
   getCNPGClusterImage,
   getCNPGClusterStorage,
@@ -16,6 +15,8 @@ import {
   getCNPGClusterReplicaSource,
   getCNPGClusterInstanceNames,
   getCNPGClusterPostgresParams,
+  getCNPGClusterInstancesReportedState,
+  getCNPGClusterCertificateExpirations,
 } from '../resource-utils-cnpg'
 
 interface CNPGClusterRendererProps {
@@ -35,15 +36,49 @@ export function CNPGClusterRenderer({ data, onNavigate }: CNPGClusterRendererPro
   const postgresParams = getCNPGClusterPostgresParams(data)
   const instanceNames = getCNPGClusterInstanceNames(data)
   const bootstrapMethod = getCNPGClusterBootstrapMethod(data)
+  const reportedState = getCNPGClusterInstancesReportedState(data)
+  const certExpirations = getCNPGClusterCertificateExpirations(data)
+
+  // Primary mismatch detection
+  const targetPrimary = data.status?.targetPrimary
+  const currentPrimary = data.status?.currentPrimary
+  const primaryMismatch = targetPrimary && currentPrimary && targetPrimary !== currentPrimary
+
+  // Split-brain detection: multiple instances report isPrimary
+  const primariesReported = reportedState.filter(i => i.isPrimary)
+  const hasSplitBrain = primariesReported.length > 1
+
+  // Certificate expiry warnings
+  const expiredCerts = certExpirations.filter(c => c.daysUntilExpiry < 0)
+  const criticalCerts = certExpirations.filter(c => c.daysUntilExpiry >= 0 && c.daysUntilExpiry <= 7)
+  const warningCerts = certExpirations.filter(c => c.daysUntilExpiry > 7 && c.daysUntilExpiry <= 30)
+
+  // Last failed backup
+  const lastFailedBackup = data.status?.lastFailedBackup
 
   // Problem detection
-  const isDegraded = instances > 0 && readyInstances < instances
+  const isDown = instances > 0 && readyInstances === 0
+  const isDegraded = instances > 0 && readyInstances < instances && readyInstances > 0
   const isFailover = phase.toLowerCase().includes('failing over')
   const isSwitchover = phase.toLowerCase().includes('switchover')
 
   return (
     <>
       {/* Problem alerts */}
+      {hasSplitBrain && (
+        <AlertBanner
+          variant="error"
+          title="Potential Split-Brain Detected"
+          message={`Multiple instances report as primary: ${primariesReported.map(i => i.podName).join(', ')}. Immediate investigation required.`}
+        />
+      )}
+      {isDown && (
+        <AlertBanner
+          variant="error"
+          title="Cluster Down"
+          message={`All ${instances} instances are not ready.`}
+        />
+      )}
       {isDegraded && (
         <AlertBanner
           variant="warning"
@@ -65,15 +100,76 @@ export function CNPGClusterRenderer({ data, onNavigate }: CNPGClusterRendererPro
           message={`Cluster is performing a switchover. Current phase: ${phase}`}
         />
       )}
+      {primaryMismatch && (
+        <AlertBanner
+          variant="warning"
+          title="Switchover Pending"
+          message={`Target primary is ${targetPrimary} but current primary is ${currentPrimary}.`}
+        />
+      )}
+      {lastFailedBackup && (
+        <AlertBanner
+          variant="error"
+          title="Last Backup Failed"
+          message={`Last backup failed at ${lastFailedBackup}. WAL archiving may be impacted and RPO is growing.`}
+        />
+      )}
+      {expiredCerts.length > 0 && (
+        <AlertBanner
+          variant="error"
+          title="Certificate Expired"
+          items={expiredCerts.map(c => `${c.secretName} expired ${Math.abs(c.daysUntilExpiry)} day${Math.abs(c.daysUntilExpiry) === 1 ? '' : 's'} ago (${c.expiryDate})`)}
+        />
+      )}
+      {criticalCerts.length > 0 && (
+        <AlertBanner
+          variant="error"
+          title="Certificate Expiring Soon"
+          items={criticalCerts.map(c => `${c.secretName} expires in ${c.daysUntilExpiry} day${c.daysUntilExpiry === 1 ? '' : 's'} (${c.expiryDate})`)}
+        />
+      )}
+      {warningCerts.length > 0 && (
+        <AlertBanner
+          variant="warning"
+          title="Certificate Expiry Warning"
+          items={warningCerts.map(c => `${c.secretName} expires in ${c.daysUntilExpiry} days (${c.expiryDate})`)}
+        />
+      )}
 
       {/* Cluster Overview */}
       <Section title="Cluster Overview" icon={Database} defaultExpanded>
         <PropertyList>
           <Property label="Phase" value={phase} />
           <Property label="Instances" value={getCNPGClusterInstances(data)} />
-          <Property label="Current Primary" value={getCNPGClusterPrimary(data)} />
+          <Property label="Current Primary" value={currentPrimary || '-'} />
+          {targetPrimary && targetPrimary !== currentPrimary && (
+            <Property label="Target Primary" value={targetPrimary} />
+          )}
           <Property label="Image" value={getCNPGClusterImage(data)} />
           <Property label="Update Strategy" value={getCNPGClusterUpdateStrategy(data)} />
+          {data.status?.writeService && (
+            <Property label="Write Service" value={
+              <ResourceLink name={data.status.writeService} kind="Service" namespace={data.metadata?.namespace || ''} onNavigate={onNavigate} />
+            } />
+          )}
+          {data.status?.readService && (
+            <Property label="Read Service" value={
+              <ResourceLink name={data.status.readService} kind="Service" namespace={data.metadata?.namespace || ''} onNavigate={onNavigate} />
+            } />
+          )}
+          {data.spec?.enableSuperuserAccess !== undefined && (
+            <Property label="Superuser Access" value={
+              <span className={`badge-sm ${data.spec.enableSuperuserAccess ? 'bg-green-500/20 text-green-400' : 'bg-theme-hover text-theme-text-secondary'}`}>
+                {data.spec.enableSuperuserAccess ? 'Enabled' : 'Disabled'}
+              </span>
+            } />
+          )}
+          {(data.spec?.minSyncReplicas !== undefined || data.spec?.maxSyncReplicas !== undefined) && (
+            <Property
+              label="Sync Replicas"
+              value={`Min: ${data.spec?.minSyncReplicas ?? '-'} / Max: ${data.spec?.maxSyncReplicas ?? '-'}`}
+            />
+          )}
         </PropertyList>
         {instanceNames.length > 0 && (
           <div className="mt-2 pt-2 border-t border-theme-border">
@@ -92,6 +188,29 @@ export function CNPGClusterRenderer({ data, onNavigate }: CNPGClusterRendererPro
         )}
       </Section>
 
+      {/* Replication State */}
+      {reportedState.length > 0 && (
+        <Section title="Replication" icon={Activity} defaultExpanded>
+          <div className="space-y-1.5">
+            {reportedState.map((instance) => (
+              <div key={instance.podName} className="flex items-center gap-2 text-sm">
+                <span className="text-theme-text-primary font-mono flex-1 break-all">{instance.podName}</span>
+                <span className={
+                  instance.isPrimary
+                    ? 'badge-sm bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-300'
+                    : 'badge-sm bg-theme-elevated text-theme-text-secondary'
+                }>
+                  {instance.isPrimary ? 'Primary' : 'Replica'}
+                </span>
+                {instance.timelineID != null && (
+                  <span className="text-xs text-theme-text-tertiary">TL {instance.timelineID}</span>
+                )}
+              </div>
+            ))}
+          </div>
+        </Section>
+      )}
+
       {/* Storage */}
       <Section title="Storage" icon={HardDrive} defaultExpanded>
         <PropertyList>
@@ -131,6 +250,9 @@ export function CNPGClusterRenderer({ data, onNavigate }: CNPGClusterRendererPro
             {backupConfig.lastSuccessfulBackup && (
               <Property label="Last Successful" value={backupConfig.lastSuccessfulBackup} />
             )}
+            {lastFailedBackup && (
+              <Property label="Last Failed" value={lastFailedBackup} />
+            )}
             {backupConfig.firstRecoverabilityPoint && (
               <Property label="First Recoverability" value={backupConfig.firstRecoverabilityPoint} />
             )}
@@ -138,6 +260,35 @@ export function CNPGClusterRenderer({ data, onNavigate }: CNPGClusterRendererPro
         </Section>
       )}
 
+      {/* Certificates */}
+      {certExpirations.length > 0 && (
+        <Section title="Certificates" icon={KeyRound} defaultExpanded>
+          <div className="space-y-1.5">
+            {certExpirations.map((cert) => (
+              <div key={cert.secretName} className="flex items-center gap-2 text-sm">
+                <span className="text-theme-text-primary font-mono flex-1 break-all">{cert.secretName}</span>
+                <span className="text-xs text-theme-text-tertiary">{cert.expiryDate}</span>
+                {cert.daysUntilExpiry <= 7 && (
+                  <span className="badge-sm bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300">
+                    {cert.daysUntilExpiry}d
+                  </span>
+                )}
+                {cert.daysUntilExpiry > 7 && cert.daysUntilExpiry <= 30 && (
+                  <span className="badge-sm bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-300">
+                    {cert.daysUntilExpiry}d
+                  </span>
+                )}
+                {cert.daysUntilExpiry > 30 && (
+                  <span className="badge-sm bg-theme-elevated text-theme-text-secondary">
+                    {cert.daysUntilExpiry}d
+                  </span>
+                )}
+              </div>
+            ))}
+          </div>
+        </Section>
+      )}
+
       {/* Monitoring */}
       {(monitoring.podMonitorEnabled || (monitoring.customQueriesConfigMap && monitoring.customQueriesConfigMap.length > 0)) && (
         <Section title="Monitoring" icon={Activity} defaultExpanded>
@@ -165,7 +316,7 @@ export function CNPGClusterRenderer({ data, onNavigate }: CNPGClusterRendererPro
 
       {/* Replication - only if this is a replica cluster */}
       {isReplica && (
-        <Section title="Replication" icon={Shield} defaultExpanded>
+        <Section title="Replica Cluster" icon={Shield} defaultExpanded>
           <PropertyList>
             <Property label="Role" value="Replica" />
             <Property label="Source" value={getCNPGClusterReplicaSource(data)} />

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

@@ -1,4 +1,4 @@
-import { Users, Database } from 'lucide-react'
+import { Users, Database, KeyRound } from 'lucide-react'
 import { Section, PropertyList, Property, AlertBanner, ResourceLink } from '../../ui/drawer-components'
 import {
   getCNPGPoolerCluster,
@@ -6,6 +6,8 @@ import {
   getCNPGPoolerMode,
   getCNPGPoolerInstances,
   getCNPGPoolerParameters,
+  getCNPGPoolerAuthQuery,
+  getCNPGPoolerAuthQuerySecret,
 } from '../resource-utils-cnpg'
 
 interface CNPGPoolerRendererProps {
@@ -19,6 +21,8 @@ export function CNPGPoolerRenderer({ data, onNavigate }: CNPGPoolerRendererProps
   const isDegraded = desired > 0 && ready < desired
   const clusterName = getCNPGPoolerCluster(data)
   const parameters = getCNPGPoolerParameters(data)
+  const authQuery = getCNPGPoolerAuthQuery(data)
+  const authQuerySecret = getCNPGPoolerAuthQuerySecret(data)
 
   return (
     <>
@@ -40,6 +44,29 @@ export function CNPGPoolerRenderer({ data, onNavigate }: CNPGPoolerRendererProps
         </PropertyList>
       </Section>
 
+      {/* Authentication */}
+      {(authQuery || authQuerySecret) && (
+        <Section title="Authentication" icon={KeyRound} defaultExpanded>
+          <PropertyList>
+            {authQuery && (
+              <Property label="Auth Query" value={
+                <code className="text-xs font-mono bg-theme-elevated px-1.5 py-0.5 rounded break-all">{authQuery}</code>
+              } />
+            )}
+            {authQuerySecret && (
+              <Property label="Auth Query Secret" value={
+                <ResourceLink
+                  name={authQuerySecret.name}
+                  kind="secrets"
+                  namespace={data.metadata?.namespace || ''}
+                  onNavigate={onNavigate}
+                />
+              } />
+            )}
+          </PropertyList>
+        </Section>
+      )}
+
       {/* Cluster Reference */}
       <Section title="Cluster" icon={Database} defaultExpanded>
         <PropertyList>