@skyhook-io/k8s-ui 1.4.0 → 1.4.1

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

@@ -1,6 +1,6 @@
 import { Shield, ArrowDownToLine, ArrowUpFromLine } from 'lucide-react'
 import { clsx } from 'clsx'
-import { Section, PropertyList, Property } from '../../ui/drawer-components'
+import { Section, PropertyList, Property, LabelSelectorDisplay } from '../../ui/drawer-components'
 
 interface ClusterNetworkPolicyRendererProps {
   data: any
@@ -24,7 +24,7 @@ export function ClusterNetworkPolicyRenderer({ data }: ClusterNetworkPolicyRende
         {subject.namespaces && (
           <div className="mt-2">
             <div className="text-xs text-theme-text-tertiary mb-1">Namespace Selector</div>
-            <SelectorBadges selector={subject.namespaces} />
+            <LabelSelectorDisplay selector={subject.namespaces} />
           </div>
         )}
         {subject.pods && (
@@ -33,13 +33,13 @@ export function ClusterNetworkPolicyRenderer({ data }: ClusterNetworkPolicyRende
             {subject.pods.namespaceSelector && (
               <div className="mb-1">
                 <span className="text-xs text-theme-text-secondary">namespaces: </span>
-                <SelectorBadges selector={subject.pods.namespaceSelector} />
+                <LabelSelectorDisplay selector={subject.pods.namespaceSelector} inline />
               </div>
             )}
             {subject.pods.podSelector && (
               <div>
                 <span className="text-xs text-theme-text-secondary">pods: </span>
-                <SelectorBadges selector={subject.pods.podSelector} />
+                <LabelSelectorDisplay selector={subject.pods.podSelector} inline />
               </div>
             )}
           </div>
@@ -121,7 +121,7 @@ function AdminPeerEntry({ peer }: { peer: any }) {
     return (
       <div className="text-sm">
         <span className="text-theme-text-secondary text-xs">namespaces: </span>
-        <SelectorBadges selector={peer.namespaces} />
+        <LabelSelectorDisplay selector={peer.namespaces} inline />
       </div>
     )
   }
@@ -131,13 +131,13 @@ function AdminPeerEntry({ peer }: { peer: any }) {
         {peer.pods.namespaceSelector && (
           <div>
             <span className="text-theme-text-secondary text-xs">namespaces: </span>
-            <SelectorBadges selector={peer.pods.namespaceSelector} />
+            <LabelSelectorDisplay selector={peer.pods.namespaceSelector} inline />
           </div>
         )}
         {peer.pods.podSelector && (
           <div>
             <span className="text-theme-text-secondary text-xs">pods: </span>
-            <SelectorBadges selector={peer.pods.podSelector} />
+            <LabelSelectorDisplay selector={peer.pods.podSelector} inline />
           </div>
         )}
       </div>
@@ -158,17 +158,3 @@ function AdminPeerEntry({ peer }: { peer: any }) {
   return null
 }
 
-function SelectorBadges({ selector }: { selector: any }) {
-  const matchLabels = selector?.matchLabels || {}
-  const hasLabels = Object.keys(matchLabels).length > 0
-  if (!hasLabels) return <span className="text-xs text-theme-text-tertiary">all</span>
-  return (
-    <span className="inline-flex flex-wrap gap-1 align-middle">
-      {Object.entries(matchLabels).map(([k, v]) => (
-        <span key={k} className="badge bg-theme-elevated text-theme-text-secondary">
-          {k}={String(v)}
-        </span>
-      ))}
-    </span>
-  )
-}

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

@@ -76,14 +76,12 @@ export function ExternalSecretRenderer({ data, onNavigate }: ExternalSecretRende
         <PropertyList>
           <Property label="Store Name" value={(() => {
             if (store.name && store.name !== '-') {
-              const storeKind = store.kind === 'ClusterSecretStore'
-                ? 'clustersecretstores'
-                : 'secretstores'
+              const storeKindSingular = store.kind || 'SecretStore'
               return (
                 <ResourceLink
                   name={store.name}
-                  kind={storeKind}
-                  namespace={store.kind === 'ClusterSecretStore' ? '' : (data.metadata?.namespace || '')}
+                  kind={storeKindSingular}
+                  namespace={storeKindSingular === 'ClusterSecretStore' ? '' : (data.metadata?.namespace || '')}
                   onNavigate={onNavigate}
                 />
               )

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

@@ -1,15 +1,16 @@
-import { Package, Settings, CheckCircle2, History } from 'lucide-react'
+import { Package, Settings, CheckCircle2, History, FileCode2, GitBranch } from 'lucide-react'
 import { clsx } from 'clsx'
-import { Section, PropertyList, Property, ConditionsSection, ProblemAlerts } from '../../ui/drawer-components'
+import { Section, PropertyList, Property, ConditionsSection, ProblemAlerts, ResourceLink } from '../../ui/drawer-components'
 import { formatAge } from '../resource-utils'
 import { GitOpsStatusBadge, SyncCountdown } from '../../gitops'
 import { fluxConditionsToGitOpsStatus, type FluxCondition } from '../../../types/gitops'
 
 interface FluxHelmReleaseRendererProps {
   data: any
+  onNavigate?: (ref: { kind: string; namespace: string; name: string }) => void
 }
 
-export function FluxHelmReleaseRenderer({ data }: FluxHelmReleaseRendererProps) {
+export function FluxHelmReleaseRenderer({ data, onNavigate }: FluxHelmReleaseRendererProps) {
   const status = data.status || {}
   const spec = data.spec || {}
   const conditions = (status.conditions || []) as FluxCondition[]
@@ -40,6 +41,28 @@ export function FluxHelmReleaseRenderer({ data }: FluxHelmReleaseRendererProps)
     })
   }
 
+  // Revision mismatch detection — only flag when Ready=False to avoid false positives during active reconciliation
+  const isReadyFalse = conditions.find((c: any) => c.type === 'Ready')?.status === 'False'
+  if (
+    isReadyFalse &&
+    status.lastAppliedRevision &&
+    status.lastAttemptedRevision &&
+    status.lastAppliedRevision !== status.lastAttemptedRevision
+  ) {
+    problems.push({
+      color: 'red',
+      message: `Revision mismatch: attempted ${status.lastAttemptedRevision} but applied ${status.lastAppliedRevision} — the latest reconciliation failed.`,
+    })
+  }
+
+  // Values info
+  const valuesFrom = spec.valuesFrom || []
+  const values = spec.values || {}
+  const valueKeys = Object.keys(values)
+
+  // Dependencies
+  const dependsOn: Array<{ name: string; namespace?: string }> = spec.dependsOn || []
+
   // Chart reference
   const chartRef = spec.chart?.spec || {}
   const sourceRef = chartRef.sourceRef || {}
@@ -97,6 +120,71 @@ export function FluxHelmReleaseRenderer({ data }: FluxHelmReleaseRendererProps)
         </PropertyList>
       </Section>
 
+      {/* Dependencies */}
+      {dependsOn.length > 0 && (
+        <Section title={`Dependencies (${dependsOn.length})`} icon={GitBranch}>
+          <div className="flex flex-wrap gap-1">
+            {dependsOn.map((dep, idx) => (
+              <ResourceLink
+                key={idx}
+                name={dep.name}
+                kind="helmreleases"
+                namespace={dep.namespace || data.metadata?.namespace || ''}
+                onNavigate={onNavigate}
+              />
+            ))}
+          </div>
+        </Section>
+      )}
+
+      {/* Values */}
+      {(valuesFrom.length > 0 || valueKeys.length > 0) && (
+        <Section title="Values" icon={FileCode2} defaultExpanded={valuesFrom.length > 0}>
+          {valuesFrom.length > 0 && (
+            <div className="mb-3">
+              <div className="text-xs font-medium text-theme-text-secondary uppercase tracking-wider mb-1.5">
+                Values From
+              </div>
+              <div className="space-y-1">
+                {valuesFrom.map((ref: any, idx: number) => (
+                  <div key={idx} className="card-inner text-sm flex items-center gap-2 flex-wrap">
+                    <span className="badge-sm status-neutral">{ref.kind || 'ConfigMap'}</span>
+                    <ResourceLink
+                      name={ref.name}
+                      kind={ref.kind === 'Secret' ? 'secrets' : 'configmaps'}
+                      namespace={data.metadata?.namespace || ''}
+                      onNavigate={onNavigate}
+                    />
+                    {ref.valuesKey && (
+                      <span className="text-theme-text-tertiary text-xs">
+                        key: {ref.valuesKey}
+                      </span>
+                    )}
+                    {ref.targetPath && (
+                      <span className="text-theme-text-tertiary text-xs">
+                        path: {ref.targetPath}
+                      </span>
+                    )}
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+          {valueKeys.length > 0 && (
+            <div>
+              <div className="text-xs font-medium text-theme-text-secondary uppercase tracking-wider mb-1.5">
+                Inline Overrides ({valueKeys.length} {valueKeys.length === 1 ? 'key' : 'keys'})
+              </div>
+              <Section title={`${valueKeys.length} value ${valueKeys.length === 1 ? 'override' : 'overrides'}`} defaultExpanded={false}>
+                <pre className="text-xs text-theme-text-secondary font-mono bg-theme-elevated rounded-md p-2 overflow-x-auto max-h-48">
+                  {JSON.stringify(values, null, 2)}
+                </pre>
+              </Section>
+            </div>
+          )}
+        </Section>
+      )}
+
       {/* Install/Upgrade settings */}
       {(spec.install || spec.upgrade) && (
         <Section title="Install/Upgrade Settings" defaultExpanded={false}>

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

@@ -1,6 +1,5 @@
-import { GitBranch, AlertTriangle, FolderGit, CheckCircle2 } from 'lucide-react'
-import { clsx } from 'clsx'
-import { Section, PropertyList, Property, ConditionsSection } from '../../ui/drawer-components'
+import { GitBranch, FolderGit, CheckCircle2 } from 'lucide-react'
+import { Section, PropertyList, Property, ConditionsSection, ProblemAlerts } from '../../ui/drawer-components'
 import { formatAge } from '../resource-utils'
 import { formatBytes } from '../../../utils/format'
 import { GitOpsStatusBadge, SyncCountdown } from '../../gitops'
@@ -37,45 +36,7 @@ export function GitRepositoryRenderer({ data }: GitRepositoryRendererProps) {
 
   return (
     <>
-      {/* Problem alerts */}
-      {problems.map((problem, i) => (
-        <div
-          key={i}
-          className={clsx(
-            'mb-4 p-3 border rounded-lg',
-            problem.color === 'red'
-              ? 'bg-red-500/10 border-red-500/30'
-              : 'bg-yellow-500/10 border-yellow-500/30'
-          )}
-        >
-          <div className="flex items-start gap-2">
-            <AlertTriangle
-              className={clsx(
-                'w-4 h-4 mt-0.5 shrink-0',
-                problem.color === 'red' ? 'text-red-400' : 'text-yellow-400'
-              )}
-            />
-            <div className="flex-1 min-w-0">
-              <div
-                className={clsx(
-                  'text-sm font-medium',
-                  problem.color === 'red' ? 'text-red-400' : 'text-yellow-400'
-                )}
-              >
-                {problem.color === 'red' ? 'Issue Detected' : 'Warning'}
-              </div>
-              <div
-                className={clsx(
-                  'text-xs mt-1',
-                  problem.color === 'red' ? 'text-red-300/80' : 'text-yellow-300/80'
-                )}
-              >
-                {problem.message}
-              </div>
-            </div>
-          </div>
-        </div>
-      ))}
+      <ProblemAlerts problems={problems} />
 
       {/* Status section */}
       <Section title="Status">

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

@@ -1,6 +1,6 @@
-import { Database, AlertTriangle, CheckCircle2, Shield } from 'lucide-react'
+import { Database, CheckCircle2, Shield } from 'lucide-react'
 import { clsx } from 'clsx'
-import { Section, PropertyList, Property, ConditionsSection } from '../../ui/drawer-components'
+import { Section, PropertyList, Property, ConditionsSection, ProblemAlerts } from '../../ui/drawer-components'
 import { formatAge } from '../resource-utils'
 import { formatBytes } from '../../../utils/format'
 import { GitOpsStatusBadge, SyncCountdown } from '../../gitops'
@@ -35,45 +35,7 @@ export function HelmRepositoryRenderer({ data }: HelmRepositoryRendererProps) {
 
   return (
     <>
-      {/* Problem alerts */}
-      {problems.map((problem, i) => (
-        <div
-          key={i}
-          className={clsx(
-            'mb-4 p-3 border rounded-lg',
-            problem.color === 'red'
-              ? 'bg-red-500/10 border-red-500/30'
-              : 'bg-yellow-500/10 border-yellow-500/30'
-          )}
-        >
-          <div className="flex items-start gap-2">
-            <AlertTriangle
-              className={clsx(
-                'w-4 h-4 mt-0.5 shrink-0',
-                problem.color === 'red' ? 'text-red-400' : 'text-yellow-400'
-              )}
-            />
-            <div className="flex-1 min-w-0">
-              <div
-                className={clsx(
-                  'text-sm font-medium',
-                  problem.color === 'red' ? 'text-red-400' : 'text-yellow-400'
-                )}
-              >
-                {problem.color === 'red' ? 'Issue Detected' : 'Warning'}
-              </div>
-              <div
-                className={clsx(
-                  'text-xs mt-1',
-                  problem.color === 'red' ? 'text-red-300/80' : 'text-yellow-300/80'
-                )}
-              >
-                {problem.message}
-              </div>
-            </div>
-          </div>
-        </div>
-      ))}
+      <ProblemAlerts problems={problems} />
 
       {/* Status section */}
       <Section title="Status">

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

@@ -1,5 +1,5 @@
-import { Server, HardDrive, Shield, Network } from 'lucide-react'
-import { Section, PropertyList, Property, ConditionsSection, AlertBanner } from '../../ui/drawer-components'
+import { Server, HardDrive, Shield, Network, Tag, Image } from 'lucide-react'
+import { Section, PropertyList, Property, ConditionsSection, AlertBanner, KeyValueBadgeList } from '../../ui/drawer-components'
 import { getEC2NodeClassStatus } from '../resource-utils-karpenter'
 
 interface KarpenterEC2NodeClassRendererProps {
@@ -20,6 +20,11 @@ export function KarpenterEC2NodeClassRenderer({ data }: KarpenterEC2NodeClassRen
   const subnetTerms = spec.subnetSelectorTerms || []
   const sgTerms = spec.securityGroupSelectorTerms || []
   const metadataOptions = spec.metadataOptions
+  const statusAMIs = status.amis || []
+  const statusSubnets = status.subnets || []
+  const statusSecurityGroups = status.securityGroups || []
+  const specTags = spec.tags || {}
+  const instanceProfile = status.instanceProfile
 
   return (
     <>
@@ -42,6 +47,7 @@ export function KarpenterEC2NodeClassRenderer({ data }: KarpenterEC2NodeClassRen
             />
           )}
           {spec.amiFamily && <Property label="AMI Family" value={spec.amiFamily} />}
+          {instanceProfile && <Property label="Instance Profile" value={instanceProfile} />}
         </PropertyList>
       </Section>
 
@@ -151,6 +157,64 @@ export function KarpenterEC2NodeClassRenderer({ data }: KarpenterEC2NodeClassRen
         </Section>
       )}
 
+      {/* Resolved AMIs from status */}
+      {statusAMIs.length > 0 && (
+        <Section title={`Resolved AMIs (${statusAMIs.length})`} icon={Image} defaultExpanded>
+          <div className="space-y-2">
+            {statusAMIs.map((ami: any, i: number) => (
+              <div key={i} className="card-inner">
+                <div className="text-sm font-medium text-theme-text-primary mb-1">{ami.id || '(unknown AMI)'}</div>
+                {ami.name && (
+                  <div className="text-xs text-theme-text-tertiary mb-1">{ami.name}</div>
+                )}
+                {ami.requirements && ami.requirements.length > 0 && (
+                  <div className="flex flex-wrap gap-1">
+                    {ami.requirements.map((req: any, ri: number) => (
+                      <span key={ri} className="badge-sm bg-theme-hover text-theme-text-secondary">
+                        {req.key}: {req.values?.join(', ') || req.operator}
+                      </span>
+                    ))}
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+        </Section>
+      )}
+
+      {/* Resolved Subnets from status */}
+      {statusSubnets.length > 0 && (
+        <Section title={`Resolved Subnets (${statusSubnets.length})`} icon={Network} defaultExpanded>
+          <div className="flex flex-wrap gap-1">
+            {statusSubnets.map((subnet: any, i: number) => (
+              <span key={i} className="badge-sm bg-theme-hover text-theme-text-secondary">
+                {subnet.id}{subnet.zone ? ` (${subnet.zone})` : ''}
+              </span>
+            ))}
+          </div>
+        </Section>
+      )}
+
+      {/* Resolved Security Groups from status */}
+      {statusSecurityGroups.length > 0 && (
+        <Section title={`Resolved Security Groups (${statusSecurityGroups.length})`} icon={Shield} defaultExpanded>
+          <div className="flex flex-wrap gap-1">
+            {statusSecurityGroups.map((sg: any, i: number) => (
+              <span key={i} className="badge-sm bg-theme-hover text-theme-text-secondary">
+                {sg.id}{sg.name ? ` (${sg.name})` : ''}
+              </span>
+            ))}
+          </div>
+        </Section>
+      )}
+
+      {/* EC2 Tags */}
+      {Object.keys(specTags).length > 0 && (
+        <Section title={`EC2 Tags (${Object.keys(specTags).length})`} icon={Tag} defaultExpanded>
+          <KeyValueBadgeList items={specTags} />
+        </Section>
+      )}
+
       <ConditionsSection conditions={conditions} />
     </>
   )

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

@@ -3,6 +3,7 @@ import { clsx } from 'clsx'
 import { Section, PropertyList, Property, ConditionsSection, AlertBanner, ResourceLink } from '../../ui/drawer-components'
 import { kindToPlural } from '../../../utils/navigation'
 import {
+  CAPACITY_TYPE_BADGE,
   getNodeClaimStatus,
   getNodeClaimInstanceType,
   getNodeClaimNodeName,
@@ -35,6 +36,8 @@ export function KarpenterNodeClaimRenderer({ data, onNavigate }: KarpenterNodeCl
   const status = data.status || {}
   const conditions = status.conditions || []
 
+  const labels = data.metadata?.labels || {}
+
   const claimStatus = getNodeClaimStatus(data)
   const isNotReady = claimStatus.level === 'unhealthy'
   const readyCond = conditions.find((c: any) => c.type === 'Ready')
@@ -42,6 +45,10 @@ export function KarpenterNodeClaimRenderer({ data, onNavigate }: KarpenterNodeCl
   const requirements = getNodeClaimRequirements(data)
   const nodeClassRef = getNodeClaimNodeClassRef(data)
   const expireAfter = getNodeClaimExpireAfter(data)
+  const capacityType = labels['karpenter.sh/capacity-type'] || ''
+  const zone = labels['topology.kubernetes.io/zone'] || ''
+  const arch = labels['kubernetes.io/arch'] || ''
+  const nodeName = getNodeClaimNodeName(data)
 
   // Provisioning steps for timeline
   const steps = [
@@ -66,7 +73,30 @@ export function KarpenterNodeClaimRenderer({ data, onNavigate }: KarpenterNodeCl
       <Section title="Instance" icon={Server}>
         <PropertyList>
           <Property label="Instance Type" value={getNodeClaimInstanceType(data)} />
-          <Property label="Node Name" value={getNodeClaimNodeName(data)} />
+          {capacityType && (
+            <Property
+              label="Capacity Type"
+              value={
+                <span className={clsx('badge-sm', CAPACITY_TYPE_BADGE[capacityType] || '')}>
+                  {capacityType}
+                </span>
+              }
+            />
+          )}
+          <Property
+            label="Node Name"
+            value={nodeName !== '-' ? (
+              <ResourceLink
+                name={nodeName}
+                kind="Node"
+                namespace=""
+                label={nodeName}
+                onNavigate={onNavigate}
+              />
+            ) : '-'}
+          />
+          {zone && <Property label="Zone" value={zone} />}
+          {arch && <Property label="Architecture" value={arch} />}
           <Property label="NodePool" value={getNodeClaimNodePoolRef(data)} />
           {nodeClassRef && (
             <Property

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

@@ -1,4 +1,4 @@
-import { Server, Settings, Shield, Cpu, Tag } from 'lucide-react'
+import { Server, Settings, Shield, Cpu, Tag, BarChart3 } from 'lucide-react'
 import { Section, PropertyList, Property, ConditionsSection, AlertBanner, ResourceLink } from '../../ui/drawer-components'
 import { kindToPlural } from '../../../utils/navigation'
 import {
@@ -9,6 +9,16 @@ import {
   getNodePoolWeight,
 } from '../resource-utils-karpenter'
 
+function formatCpuCores(value: string): string {
+  // Karpenter status.resources CPU is typically in millicores (e.g. "12000m") or cores (e.g. "12")
+  if (value.endsWith('m')) {
+    const millis = parseInt(value, 10)
+    if (!isNaN(millis)) return String(millis / 1000)
+  }
+  return value
+}
+
+
 interface KarpenterNodePoolRendererProps {
   data: any
   onNavigate?: (ref: { kind: string; namespace: string; name: string; group?: string }) => void
@@ -28,6 +38,9 @@ export function KarpenterNodePoolRenderer({ data, onNavigate }: KarpenterNodePoo
   const templateLabels = spec.template?.metadata?.labels || {}
   const templateExpireAfter = spec.template?.spec?.expireAfter
   const nodeClassRef = spec.template?.spec?.nodeClassRef
+  const templateTaints = spec.template?.spec?.taints || []
+  const templateStartupTaints = spec.template?.spec?.startupTaints || []
+  const statusResources = status.resources || {}
 
   return (
     <>
@@ -77,6 +90,26 @@ export function KarpenterNodePoolRenderer({ data, onNavigate }: KarpenterNodePoo
         </PropertyList>
       </Section>
 
+      {/* Resource Usage — from status.resources vs spec.limits */}
+      {(statusResources.cpu || statusResources.memory) && (
+        <Section title="Resource Usage" icon={BarChart3} defaultExpanded>
+          <PropertyList>
+            {statusResources.cpu && (
+              <Property
+                label="CPU"
+                value={`${formatCpuCores(statusResources.cpu)}${spec.limits?.cpu ? ` / ${formatCpuCores(spec.limits.cpu)}` : ''}`}
+              />
+            )}
+            {statusResources.memory && (
+              <Property
+                label="Memory"
+                value={`${statusResources.memory}${spec.limits?.memory ? ` / ${spec.limits.memory}` : ''}`}
+              />
+            )}
+          </PropertyList>
+        </Section>
+      )}
+
       {/* Disruption */}
       <Section title="Disruption" icon={Shield}>
         <PropertyList>
@@ -118,6 +151,38 @@ export function KarpenterNodePoolRenderer({ data, onNavigate }: KarpenterNodePoo
         </Section>
       )}
 
+      {/* Template Taints */}
+      {templateTaints.length > 0 && (
+        <Section title={`Template Taints (${templateTaints.length})`} icon={Shield} defaultExpanded>
+          <div className="flex flex-wrap gap-1">
+            {templateTaints.map((taint: any, i: number) => (
+              <span
+                key={i}
+                className="badge-sm bg-theme-hover text-theme-text-secondary"
+              >
+                {taint.key}={taint.value || ''}:{taint.effect || ''}
+              </span>
+            ))}
+          </div>
+        </Section>
+      )}
+
+      {/* Template Startup Taints */}
+      {templateStartupTaints.length > 0 && (
+        <Section title={`Startup Taints (${templateStartupTaints.length})`} icon={Shield} defaultExpanded>
+          <div className="flex flex-wrap gap-1">
+            {templateStartupTaints.map((taint: any, i: number) => (
+              <span
+                key={i}
+                className="badge-sm bg-theme-hover text-theme-text-secondary"
+              >
+                {taint.key}={taint.value || ''}:{taint.effect || ''}
+              </span>
+            ))}
+          </div>
+        </Section>
+      )}
+
       {/* Requirements */}
       {requirements.length > 0 && (
         <Section title={`Requirements (${requirements.length})`} icon={Settings} defaultExpanded>

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

@@ -46,6 +46,9 @@ export function KedaScaledJobRenderer({ data }: KedaScaledJobRendererProps) {
           {spec.failedJobsHistoryLimit !== undefined && (
             <Property label="Failure History" value={String(spec.failedJobsHistoryLimit)} />
           )}
+          {spec.minReplicaCount !== undefined && (
+            <Property label="Min Replicas" value={String(spec.minReplicaCount)} />
+          )}
           {spec.maxReplicaCount !== undefined && (
             <Property label="Max Replicas" value={String(spec.maxReplicaCount)} />
           )}

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

@@ -1,4 +1,4 @@
-import { Cpu } from 'lucide-react'
+import { Cpu, Settings } from 'lucide-react'
 import { Section, PropertyList, Property, ConditionsSection, AlertBanner, ResourceLink } from '../../ui/drawer-components'
 import { kindToPlural } from '../../../utils/navigation'
 import {
@@ -12,6 +12,16 @@ import {
   getScaledObjectCooldownPeriod,
 } from '../resource-utils-keda'
 
+function summarizeScalingPolicies(policies: any[] | undefined, periodSeconds?: number): string {
+  if (!policies || policies.length === 0) return '-'
+  return policies.map((p: any) => {
+    const value = p.value ?? '?'
+    const type = p.type === 'Percent' ? '%' : ` pod${value !== 1 ? 's' : ''}`
+    const period = p.periodSeconds ?? periodSeconds ?? '?'
+    return `max ${value}${type}/${period}s`
+  }).join(', ')
+}
+
 interface KedaScaledObjectRendererProps {
   data: any
   onNavigate?: (ref: { kind: string; namespace: string; name: string }) => void
@@ -131,6 +141,50 @@ export function KedaScaledObjectRenderer({ data, onNavigate }: KedaScaledObjectR
         </Section>
       )}
 
+      {/* Advanced section */}
+      {data.spec?.advanced && (
+        <Section title="Advanced" icon={Settings} defaultExpanded={false}>
+          <PropertyList>
+            {data.spec.advanced.restoreToOriginalReplicaCount != null && (
+              <Property
+                label="Restore Original Replicas"
+                value={data.spec.advanced.restoreToOriginalReplicaCount ? 'Yes' : 'No'}
+              />
+            )}
+            {data.spec.advanced.horizontalPodAutoscalerConfig?.behavior?.scaleUp && (
+              <Property
+                label="Scale Up"
+                value={summarizeScalingPolicies(
+                  data.spec.advanced.horizontalPodAutoscalerConfig.behavior.scaleUp.policies,
+                  data.spec.advanced.horizontalPodAutoscalerConfig.behavior.scaleUp.stabilizationWindowSeconds
+                )}
+              />
+            )}
+            {data.spec.advanced.horizontalPodAutoscalerConfig?.behavior?.scaleDown && (
+              <Property
+                label="Scale Down"
+                value={summarizeScalingPolicies(
+                  data.spec.advanced.horizontalPodAutoscalerConfig.behavior.scaleDown.policies,
+                  data.spec.advanced.horizontalPodAutoscalerConfig.behavior.scaleDown.stabilizationWindowSeconds
+                )}
+              />
+            )}
+            {data.spec.advanced.horizontalPodAutoscalerConfig?.behavior?.scaleUp?.stabilizationWindowSeconds != null && (
+              <Property
+                label="Scale Up Stabilization"
+                value={`${data.spec.advanced.horizontalPodAutoscalerConfig.behavior.scaleUp.stabilizationWindowSeconds}s`}
+              />
+            )}
+            {data.spec.advanced.horizontalPodAutoscalerConfig?.behavior?.scaleDown?.stabilizationWindowSeconds != null && (
+              <Property
+                label="Scale Down Stabilization"
+                value={`${data.spec.advanced.horizontalPodAutoscalerConfig.behavior.scaleDown.stabilizationWindowSeconds}s`}
+              />
+            )}
+          </PropertyList>
+        </Section>
+      )}
+
       <ConditionsSection conditions={conditions} />
     </>
   )