@skyhook-io/k8s-ui 1.7.7 → 1.7.8

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

@@ -0,0 +1,53 @@
+import { describe, expect, it } from 'vitest'
+import { renderToString } from 'react-dom/server'
+import { PodRenderer } from './PodRenderer'
+import { resolvedEnvFromKey } from '../../../utils/env-from'
+import type { ResolvedEnvFrom } from '../../../types'
+
+const pod = {
+  metadata: { name: 'api', namespace: 'default' },
+  spec: {
+    containers: [{
+      name: 'api',
+      image: 'example/api:latest',
+      envFrom: [
+        { configMapRef: { name: 'shared' } },
+        { secretRef: { name: 'shared' } },
+      ],
+    }],
+  },
+  status: { phase: 'Running' },
+}
+
+describe('PodRenderer envFrom expansion', () => {
+  it('keeps same-name ConfigMap and Secret values separate', () => {
+    const resolvedEnvFrom: ResolvedEnvFrom = {
+      [resolvedEnvFromKey('configmap', 'shared')]: {
+        keys: ['PUBLIC_URL'],
+        values: { PUBLIC_URL: 'https://example.com' },
+        isSecret: false,
+      },
+      [resolvedEnvFromKey('secret', 'shared')]: {
+        keys: ['API_TOKEN'],
+        values: { API_TOKEN: 'secret-value' },
+        isSecret: true,
+      },
+    }
+
+    const html = renderToString(
+      <PodRenderer
+        data={pod}
+        onCopy={() => undefined}
+        copied={null}
+        resolvedEnvFrom={resolvedEnvFrom}
+      />,
+    )
+
+    expect(html).toContain('ConfigMap')
+    expect(html).toContain('PUBLIC_URL')
+    expect(html).toContain('https://example.com')
+    expect(html).toContain('Secret')
+    expect(html).toContain('API_TOKEN')
+    expect(html).not.toContain('PUBLIC_URL<!-- -->=')
+  })
+})

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

@@ -9,6 +9,7 @@ import {
   rbacResourceBadgeClass,
   rbacApiGroupBadgeClass,
 } from '../../../utils/rbac-badges'
+import { resolvedEnvFromKey } from '../../../utils/env-from'
 import { detectBlastRadius, rulePermissivenessScore } from '../../../utils/rbac-blast-radius'
 import { RBACErrorSection, isRBACUnavailable } from './RBACErrorSection'
 import type { ResolvedEnvFrom, RBACSubjectResponse, RBACPolicyRule } from '../../../types'
@@ -195,7 +196,12 @@ function EnvVarsSection({
                   const isSecret = !!ef.secretRef
                   const sourceName = ef.configMapRef?.name ?? ef.secretRef?.name ?? 'unknown'
                   const prefix = ef.configMapRef ? 'ConfigMap' : ef.secretRef ? 'Secret' : 'Source'
-                  const resolved = resolvedEnvFrom?.[sourceName]
+                  const sourceKey = ef.configMapRef
+                    ? resolvedEnvFromKey('configmap', sourceName)
+                    : ef.secretRef
+                      ? resolvedEnvFromKey('secret', sourceName)
+                      : undefined
+                  const resolved = sourceKey ? resolvedEnvFrom?.[sourceKey] : undefined
                   return (
                     <div key={i} className="mb-1">
                       <div className="flex items-center gap-1.5 text-xs font-mono py-0.5">

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

@@ -161,7 +161,7 @@ export function VeleroBackupRenderer({ data }: VeleroBackupRendererProps) {
             )}
             {data.spec?.labelSelector && (
               <Property label="Label Selector" value={
-                <span className="text-sm font-mono text-theme-text-secondary break-all">
+                <span className="inline-code break-all">
                   {JSON.stringify(data.spec.labelSelector)}
                 </span>
               } />

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

@@ -0,0 +1,41 @@
+import { describe, expect, it } from 'vitest'
+import { renderToString } from 'react-dom/server'
+import { WorkloadRenderer } from './WorkloadRenderer'
+
+const deployment = {
+  metadata: { name: 'api', namespace: 'prod' },
+  spec: { replicas: 3 },
+  status: { readyReplicas: 3, availableReplicas: 3, updatedReplicas: 3 },
+}
+
+describe('WorkloadRenderer', () => {
+  it('enables manual scaling when no replica controller targets the workload', () => {
+    const html = renderToString(
+      <WorkloadRenderer kind="deployments" data={deployment} onScale={async () => {}} />,
+    )
+
+    expect(html).toContain('Scale')
+    expect(html).not.toContain('disabled=""')
+    expect(html).not.toContain('Manual scaling is disabled')
+  })
+
+  it('disables manual scaling when an HPA or KEDA ScaledObject owns replicas', () => {
+    const html = renderToString(
+      <WorkloadRenderer
+        kind="deployments"
+        data={deployment}
+        onScale={async () => {}}
+        scaleBlockedBy={[
+          { kind: 'HorizontalPodAutoscaler', namespace: 'prod', name: 'api' },
+          { kind: 'ScaledObject', namespace: 'prod', name: 'api-queue' },
+        ]}
+      />,
+    )
+
+    expect(html).toContain('disabled=""')
+    expect(html).toContain('Manual scaling is disabled')
+    expect(html).toContain('Controlled by')
+    expect(html).toContain('HorizontalPodAutoscaler prod/api')
+    expect(html).toContain('ScaledObject prod/api-queue')
+  })
+})

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

@@ -1,9 +1,10 @@
 import { useState, useEffect } from 'react'
 import { Server, ExternalLink, Scale, Minus, Plus, Loader2, Shield } from 'lucide-react'
 import { clsx } from 'clsx'
-import { Section, PropertyList, Property, ConditionsSection, PodTemplateSection, AlertBanner, ResourceLink } from '../../ui/drawer-components'
+import { Section, PropertyList, Property, ConditionsSection, PodTemplateSection, AlertBanner, ResourceLink, ResourceRefBadge } from '../../ui/drawer-components'
 import { DialogPortal } from '../../ui/DialogPortal'
-import type { RBACSubjectResponse, RBACPolicyRule } from '../../../types'
+import { Tooltip } from '../../ui/Tooltip'
+import type { RBACSubjectResponse, RBACPolicyRule, ResourceRef } from '../../../types'
 import { detectBlastRadius, rulePermissivenessScore } from '../../../utils/rbac-blast-radius'
 import { RBACErrorSection, isRBACUnavailable } from './RBACErrorSection'
 import {
@@ -19,6 +20,7 @@ interface WorkloadRendererProps {
   onViewPods?: () => void
   onScale?: (replicas: number) => Promise<void>
   isScalePending?: boolean
+  scaleBlockedBy?: ResourceRef[]
   onRequestRefresh?: () => void
   /**
    * RBAC reverse-lookup for the workload's pod-template ServiceAccount.
@@ -103,14 +105,23 @@ function getWorkloadProgress(status: any, spec: any, kind: string): string | nul
   return null
 }
 
-export function WorkloadRenderer({ kind, data, onNavigate, onViewPods, onScale, isScalePending, onRequestRefresh, rbacData, rbacLoading, rbacError }: WorkloadRendererProps) {
+function formatScalerLabel(ref: ResourceRef): string {
+  const prefix = ref.namespace ? `${ref.namespace}/` : ''
+  return `${ref.kind} ${prefix}${ref.name}`
+}
+
+export function WorkloadRenderer({ kind, data, onNavigate, onViewPods, onScale, isScalePending, scaleBlockedBy, onRequestRefresh, rbacData, rbacLoading, rbacError }: WorkloadRendererProps) {
   const status = data.status || {}
   const spec = data.spec || {}
   const metadata = data.metadata || {}
 
   const isDaemonSet = kind === 'daemonsets'
   const isStatefulSet = kind === 'statefulsets'
-  const isScalable = (kind === 'deployments' || kind === 'statefulsets') && !!onScale
+  const isScalableKind = kind === 'deployments' || kind === 'statefulsets'
+  const isScaleBlocked = !!scaleBlockedBy?.length
+  const isScalable = isScalableKind && !!onScale && !isScaleBlocked
+  const scaleBlockedLabel = scaleBlockedBy?.map(formatScalerLabel).join(', ')
+  const scaleBlockedReason = `Manual scaling is disabled because replicas are controlled by ${scaleBlockedLabel}. Manage scaling there instead.`
 
   // Scale dialog state
   const [showScaleDialog, setShowScaleDialog] = useState(false)
@@ -139,8 +150,14 @@ export function WorkloadRenderer({ kind, data, onNavigate, onViewPods, onScale,
     return () => clearInterval(interval)
   }, [isScaling, onRequestRefresh])
 
+  useEffect(() => {
+    if (isScaleBlocked) {
+      setShowScaleDialog(false)
+    }
+  }, [isScaleBlocked])
+
   const handleScale = async () => {
-    if (!onScale) return
+    if (!onScale || isScaleBlocked) return
     try {
       await onScale(targetReplicas)
       setScaledTo(targetReplicas)
@@ -202,6 +219,18 @@ export function WorkloadRenderer({ kind, data, onNavigate, onViewPods, onScale,
           ) : (
             <>
               <Property label="Replicas" value={`${status.readyReplicas || 0}/${spec.replicas || 0}`} />
+              {scaleBlockedBy && scaleBlockedBy.length > 0 && (
+                <Property
+                  label="Controlled by"
+                  value={
+                    <div className="flex flex-wrap gap-1">
+                      {scaleBlockedBy.map((ref) => (
+                        <ResourceRefBadge key={`${ref.kind}/${ref.namespace}/${ref.name}`} resourceRef={ref} onClick={onNavigate} />
+                      ))}
+                    </div>
+                  }
+                />
+              )}
               <Property label="Updated" value={status.updatedReplicas} />
               <Property label="Available" value={status.availableReplicas} />
               <Property label="Unavailable" value={status.unavailableReplicas} />
@@ -218,7 +247,7 @@ export function WorkloadRenderer({ kind, data, onNavigate, onViewPods, onScale,
               View Managed Pods
             </button>
           )}
-          {isScalable && (
+          {isScalable ? (
             <button
               onClick={openScaleDialog}
               className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-emerald-400 hover:text-emerald-300 bg-emerald-500/10 hover:bg-emerald-500/20 border border-emerald-500/30 rounded transition-colors"
@@ -226,7 +255,20 @@ export function WorkloadRenderer({ kind, data, onNavigate, onViewPods, onScale,
               <Scale className="w-3 h-3" />
               Scale
             </button>
-          )}
+          ) : isScalableKind && !!onScale && isScaleBlocked ? (
+            <Tooltip content={scaleBlockedReason}>
+              <button
+                type="button"
+                disabled
+                title={scaleBlockedReason}
+                aria-label={scaleBlockedReason}
+                className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-theme-text-tertiary bg-theme-elevated border border-theme-border rounded cursor-not-allowed"
+              >
+                <Scale className="w-3 h-3" />
+                Scale
+              </button>
+            </Tooltip>
+          ) : null}
         </div>
       </Section>
 

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

@@ -51,9 +51,9 @@ export function XRDRenderer({ data, onNavigate }: XRDRendererProps) {
             <Property label="Singular" value={<span className="font-mono">{names.singular}</span>} />
           )}
           {names.listKind && (
-            <Property label="List Kind" value={<span className="font-mono">{names.listKind}</span>} />
+            <Property label="List Kind" value={<span className="inline-code">{names.listKind}</span>} />
           )}
-          <Property label="Group" value={<span className="font-mono break-all">{group}</span>} />
+          <Property label="Group" value={<span className="inline-code break-all">{group}</span>} />
           {scope && (
             <Property
               label="Scope"

package/src/components/shared/DetailShell.tsx

@@ -0,0 +1,107 @@
+import type { ReactNode } from 'react'
+import { clsx } from 'clsx'
+
+// Shared tabbed detail chrome. Hosts provide all data-aware pieces; this owns
+// only the header, tab strip, optional controls, overlay, and content frame.
+export interface DetailShellTab<TId extends string = string> {
+  id: TId
+  label: string
+  icon?: ReactNode
+  /** Trailing adornment after the label, e.g. an event count badge. */
+  badge?: ReactNode
+  /** Omit the tab from the strip without disturbing the others' identity. */
+  hidden?: boolean
+}
+
+export interface DetailShellProps<TId extends string = string> {
+  /**
+   * A thin breadcrumb line above the identity header (the parent path —
+   * ends at the current entity's parent, since the identity title already
+   * names the entity). Hosted surfaces use this instead of `nav`.
+   */
+  breadcrumb?: ReactNode
+  /** Inline leading control on the identity row — a back button in standalone Radar. */
+  nav?: ReactNode
+  identity: ReactNode
+  headerActions?: ReactNode
+  scopeControls?: ReactNode
+  tabs: DetailShellTab<TId>[]
+  activeTab: TId
+  onTabChange: (id: TId) => void
+  tabStripEnd?: ReactNode
+  overlay?: ReactNode
+  children: ReactNode
+}
+
+export function DetailShell<TId extends string = string>({
+  breadcrumb,
+  nav,
+  identity,
+  headerActions,
+  scopeControls,
+  tabs,
+  activeTab,
+  onTabChange,
+  tabStripEnd,
+  overlay,
+  children,
+}: DetailShellProps<TId>) {
+  const visibleTabs = tabs.filter((t) => !t.hidden)
+
+  return (
+    <div className="flex flex-col h-full w-full bg-theme-surface">
+      {/* Header */}
+      <div className="shrink-0 border-b border-theme-border bg-theme-surface">
+        {breadcrumb && <div className="px-6 pt-2.5">{breadcrumb}</div>}
+        <div className={clsx('px-6 flex items-start gap-4', breadcrumb ? 'pb-3 pt-1.5' : 'py-3')}>
+          {nav}
+          <div className="flex-1 min-w-0">{identity}</div>
+          {headerActions}
+        </div>
+
+        {/* Tabs (left) + scope controls / actions (right) */}
+        <div className="px-6 flex items-center border-t border-theme-border">
+          <div className="flex gap-1" role="tablist">
+            {visibleTabs.map((t) => (
+              <DetailShellTabButton key={t.id} active={activeTab === t.id} onClick={() => onTabChange(t.id)}>
+                {t.icon}
+                {t.label}
+                {t.badge}
+              </DetailShellTabButton>
+            ))}
+          </div>
+          {(scopeControls || tabStripEnd) && (
+            <div className="ml-auto flex items-center gap-2">
+              {scopeControls}
+              {tabStripEnd}
+            </div>
+          )}
+        </div>
+      </div>
+
+      {overlay}
+
+      {/* Tab content */}
+      <div className="flex-1 overflow-hidden relative">{children}</div>
+    </div>
+  )
+}
+
+function DetailShellTabButton({ active, onClick, children }: { active: boolean; onClick: () => void; children: ReactNode }) {
+  return (
+    <button
+      type="button"
+      role="tab"
+      aria-selected={active}
+      onClick={onClick}
+      className={clsx(
+        'flex items-center gap-1.5 px-3 py-2 text-sm font-medium border-b-2 transition-colors',
+        active
+          ? 'text-theme-text-primary border-skyhook-500'
+          : 'text-theme-text-secondary border-transparent hover:text-theme-text-primary hover:border-theme-border-light',
+      )}
+    >
+      {children}
+    </button>
+  )
+}

package/src/components/shared/ManagedByChip.tsx

@@ -1,6 +1,14 @@
-import { GitBranch } from 'lucide-react'
+import { GitBranch, Package } from 'lucide-react'
 import { clsx } from 'clsx'
 import type { GitOpsOwnerRef } from '../../utils/gitops-owner'
+import type { GitOpsStatus } from '../../types/gitops'
+import { StatusDot, type StatusTone } from '../ui/status-tone'
+import { Tooltip } from '../ui/Tooltip'
+
+export type HelmOwnerRef = {
+  namespace: string
+  name: string
+}
 
 // ManagedByChip renders the "Managed by <ArgoCD/FluxCD app>" affordance for
 // resources detected (via labels/annotations) to be GitOps-managed. The chip
@@ -13,33 +21,158 @@ import type { GitOpsOwnerRef } from '../../utils/gitops-owner'
 //   - block: starts a new line with mt-1 spacing, used in WorkloadView title strip
 export function ManagedByChip({
   owner,
+  status,
   onOpen,
+  verified = true,
+  pending = false,
+  source,
   variant = 'inline',
 }: {
   owner: GitOpsOwnerRef
+  status?: GitOpsStatus | null
   onOpen?: (ref: GitOpsOwnerRef) => void
+  verified?: boolean
+  pending?: boolean
+  source?: string | null
   variant?: 'inline' | 'block'
 }) {
   const toolLabel = owner.tool === 'argocd' ? 'ArgoCD' : 'FluxCD'
+  const ownerKindLabel = gitOpsOwnerKindLabel(owner)
   const label = owner.namespace ? `${owner.namespace}/${owner.name}` : owner.name
-  const title = `Managed by ${toolLabel} · ${label}`
+  const statusLabel = status ? gitOpsStatusLabel(status) : null
+  const prefix = pending ? 'Resolving' : verified ? 'Managed by' : 'Tracked by'
+  const tooltipContent = (
+    <span className="flex flex-col gap-1">
+      <span>
+        {pending ? (
+          <>
+            Looking up matching {ownerKindLabel} <TooltipCode>{label}</TooltipCode> in this cluster.
+          </>
+        ) : verified ? (
+          <>
+            Managed by {toolLabel} · <TooltipCode>{label}</TooltipCode>
+            {statusLabel && <> · {statusLabel}{status?.message ? `: ${status.message}` : ''}</>}
+          </>
+        ) : (
+          <>
+            {toolLabel} tracking metadata references <TooltipCode>{label}</TooltipCode>, but the matching {ownerKindLabel} is not visible in this cluster.
+          </>
+        )}
+      </span>
+      {source && (
+        <span>
+          Inferred from <TooltipCode>{source}</TooltipCode>.
+        </span>
+      )}
+    </span>
+  )
   const interactive = !!onOpen
   const Wrapper = interactive ? 'button' : 'span'
   return (
-    <Wrapper
-      {...(interactive
-        ? { type: 'button' as const, onClick: () => onOpen?.(owner) }
-        : {})}
-      title={title}
-      className={clsx(
-        'inline-flex items-center gap-1 rounded border border-theme-border bg-theme-elevated px-1.5 py-0.5 text-[11px] text-theme-text-secondary',
-        variant === 'block' && 'mt-1',
-        interactive && 'hover:border-skyhook-500/60 hover:text-skyhook-500 transition-colors',
+    <Tooltip content={tooltipContent} delay={500} position="bottom" wrapperClassName={variant === 'block' ? 'mt-1' : undefined}>
+      <Wrapper
+        {...(interactive
+          ? { type: 'button' as const, onClick: () => onOpen?.(owner) }
+          : {})}
+        className={clsx(
+          'inline-flex min-w-0 items-center gap-1 rounded border border-theme-border bg-theme-elevated px-1.5 py-0.5 text-[11px] text-theme-text-secondary',
+          interactive && 'hover:border-skyhook-500/60 hover:text-skyhook-500 transition-colors',
+        )}
+      >
+        <GitBranch className="h-3 w-3 shrink-0" />
+        <span className="shrink-0 text-theme-text-tertiary">{prefix}</span>
+        <span className="truncate max-w-[180px]">{label}</span>
+        {statusLabel && (
+          <>
+            <span className="mx-0.5 h-3 w-px shrink-0 bg-theme-border" aria-hidden />
+            <span className="inline-flex shrink-0 items-center gap-1 text-theme-text-tertiary">
+              <StatusDot tone={gitOpsStatusTone(status!)} size="xs" />
+              <span>{statusLabel}</span>
+            </span>
+          </>
+        )}
+      </Wrapper>
+    </Tooltip>
+  )
+}
+
+export function HelmManagedByChip({
+  owner,
+  onOpen,
+  source,
+  variant = 'inline',
+}: {
+  owner: HelmOwnerRef
+  onOpen?: (ref: HelmOwnerRef) => void
+  source?: string | null
+  variant?: 'inline' | 'block'
+}) {
+  const label = owner.namespace ? `${owner.namespace}/${owner.name}` : owner.name
+  const tooltipContent = (
+    <span className="flex flex-col gap-1">
+      <span>
+        Managed by Helm release <TooltipCode>{label}</TooltipCode>.
+      </span>
+      {source && (
+        <span>
+          Inferred from <TooltipCode>{source}</TooltipCode>.
+        </span>
       )}
-    >
-      <GitBranch className="h-3 w-3 shrink-0" />
-      <span className="shrink-0 text-theme-text-tertiary">Managed by</span>
-      <span className="truncate max-w-[180px]">{label}</span>
-    </Wrapper>
+    </span>
   )
+  const interactive = !!onOpen
+  const Wrapper = interactive ? 'button' : 'span'
+  return (
+    <Tooltip content={tooltipContent} delay={500} position="bottom" wrapperClassName={variant === 'block' ? 'mt-1' : undefined}>
+      <Wrapper
+        {...(interactive
+          ? { type: 'button' as const, onClick: () => onOpen?.(owner) }
+          : {})}
+        className={clsx(
+          'inline-flex min-w-0 items-center gap-1 rounded border border-theme-border bg-theme-elevated px-1.5 py-0.5 text-[11px] text-theme-text-secondary',
+          interactive && 'hover:border-skyhook-500/60 hover:text-skyhook-500 transition-colors',
+        )}
+      >
+        <Package className="h-3 w-3 shrink-0" />
+        <span className="shrink-0 text-theme-text-tertiary">Managed by Helm</span>
+        <span className="truncate max-w-[180px]">{label}</span>
+      </Wrapper>
+    </Tooltip>
+  )
+}
+
+function gitOpsOwnerKindLabel(owner: GitOpsOwnerRef): string {
+  if (owner.tool === 'argocd') return 'Application'
+  if (owner.kind === 'helmreleases') return 'HelmRelease'
+  if (owner.kind === 'kustomizations') return 'Kustomization'
+  return 'GitOps resource'
+}
+
+function TooltipCode({ children }: { children: string }) {
+  return (
+    <code className="inline-code break-all">
+      {children}
+    </code>
+  )
+}
+
+function gitOpsStatusLabel(status: GitOpsStatus): string {
+  if (status.suspended) return 'Suspended'
+  if (status.sync === 'Reconciling') return 'Syncing'
+  if (status.health === 'Degraded') return 'Degraded'
+  if (status.health === 'Missing') return 'Missing'
+  if (status.sync === 'OutOfSync') return 'OutOfSync'
+  if (status.health === 'Progressing') return 'Progressing'
+  if (status.sync === 'Synced' && status.health === 'Healthy') return 'Synced'
+  if (status.sync !== 'Unknown') return status.sync
+  return status.health
+}
+
+function gitOpsStatusTone(status: GitOpsStatus): StatusTone {
+  if (status.suspended) return 'degraded'
+  if (status.sync === 'Synced' && status.health === 'Healthy') return 'healthy'
+  if (status.health === 'Degraded' || status.health === 'Missing') return 'unhealthy'
+  if (status.sync === 'OutOfSync') return 'degraded'
+  if (status.sync === 'Reconciling' || status.health === 'Progressing') return 'neutral'
+  return 'unknown'
 }

package/src/components/shared/ResourceRendererDispatch.test.tsx

@@ -0,0 +1,45 @@
+import { describe, expect, it } from 'vitest'
+import { renderToString } from 'react-dom/server'
+import { ResourceRendererDispatch, type RendererOverrides } from './ResourceRendererDispatch'
+import type { ResourceRef } from '../../types'
+
+function renderWithScalers(scalers: ResourceRef[]): string {
+  const overrides: RendererOverrides = {
+    WorkloadRenderer: ({ scaleBlockedBy }) => (
+      <span>{scaleBlockedBy?.map((ref) => ref.kind).join(',') || 'none'}</span>
+    ),
+  }
+
+  return renderToString(
+    <ResourceRendererDispatch
+      resource={{ kind: 'deployments', namespace: 'prod', name: 'api' }}
+      data={{ metadata: { name: 'api', namespace: 'prod' } }}
+      relationships={{ scalers }}
+      onCopy={() => {}}
+      copied={null}
+      rendererOverrides={overrides}
+      showCommonSections={false}
+    />,
+  )
+}
+
+describe('ResourceRendererDispatch', () => {
+  it('blocks manual replica scaling for HPA and KEDA ScaledObject scalers only', () => {
+    const html = renderWithScalers([
+      { kind: 'VerticalPodAutoscaler', namespace: 'prod', name: 'api-vpa' },
+      { kind: 'HorizontalPodAutoscaler', namespace: 'prod', name: 'api-hpa' },
+      { kind: 'ScaledObject', namespace: 'prod', name: 'api-keda' },
+    ])
+
+    expect(html).toContain('HorizontalPodAutoscaler,ScaledObject')
+    expect(html).not.toContain('VerticalPodAutoscaler')
+  })
+
+  it('does not block manual replica scaling for VPA-only relationships', () => {
+    const html = renderWithScalers([
+      { kind: 'VerticalPodAutoscaler', namespace: 'prod', name: 'api-vpa' },
+    ])
+
+    expect(html).toContain('none')
+  })
+})

package/src/components/shared/ResourceRendererDispatch.tsx

@@ -220,6 +220,7 @@ import {
 import type { SelectedResource, Relationships, ResourceRef, SecretCertificateInfo, ResolvedEnvFrom, TimelineEvent } from '../../types'
 import type { CopyHandler } from '../ui/drawer-components'
 import { AlertBanner } from '../ui/drawer-components'
+import { replicaScalers } from '../../utils/replica-scalers'
 
 /**
  * Override map letting each platform consumer swap in its own renderer components.
@@ -245,6 +246,8 @@ export interface RendererOverrides {
   WorkloadRenderer?: React.ComponentType<{
     kind: string; data: any
     onNavigate?: (ref: ResourceRef) => void
+    relationships?: Relationships
+    scaleBlockedBy?: ResourceRef[]
   }>
   // Optional override for Crossplane Composite / Claim — host wraps the
   // package renderer to fan out per-composed-ref status fetches via React Query.
@@ -464,6 +467,7 @@ export function ResourceRendererDispatch({
   const NamespaceComp = rendererOverrides?.NamespaceRenderer ?? NamespaceRenderer
   const HPAComp = rendererOverrides?.HPARenderer ?? HPARenderer
   const PVCComp = rendererOverrides?.PVCRenderer ?? PVCRenderer
+  const scaleBlockedBy = replicaScalers(relationships?.scalers)
 
   const sidebarContent = showCommonSections && (
     <>
@@ -480,7 +484,15 @@ export function ResourceRendererDispatch({
       <div className={clsx('p-4 space-y-4', renderSidebar && 'lg:flex-1 lg:min-w-0')}>
         {/* Kind-specific content - delegates to modular renderers */}
         {kind === 'pods' && <PodComp data={data} onCopy={onCopy} copied={copied} onNavigate={onNavigate} onOpenLogs={onOpenLogs} resolvedEnvFrom={resolvedEnvFrom} />}
-        {['deployments', 'statefulsets', 'daemonsets'].includes(kind) && <WorkloadComp kind={kind} data={data} onNavigate={onNavigate} />}
+        {['deployments', 'statefulsets', 'daemonsets'].includes(kind) && (
+          <WorkloadComp
+            kind={kind}
+            data={data}
+            onNavigate={onNavigate}
+            relationships={relationships}
+            scaleBlockedBy={scaleBlockedBy}
+          />
+        )}
         {kind === 'replicasets' && <ReplicaSetRenderer data={data} />}
         {kind === 'services' && !data?.apiVersion?.includes('serving.knative.dev') && <ServiceComp data={data} onCopy={onCopy} copied={copied} />}
         {kind === 'ingresses' && !data?.apiVersion?.includes('networking.internal.knative.dev') && <IngressRenderer data={data} onNavigate={onNavigate} />}

package/src/components/shared/index.ts

@@ -2,4 +2,5 @@ export { ResourceRendererDispatch, getResourceStatus, type RendererOverrides } f
 export { EditableYamlView, SaveSuccessAnimation } from './EditableYamlView'
 export { ResourceActionsBar, RevisionHistoryDialog } from './ResourceActionsBar'
 export { CreateResourceDialog, type CreateResourceDialogProps, type ApplyResult } from './CreateResourceDialog'
-export { ManagedByChip } from './ManagedByChip'
+export { HelmManagedByChip, ManagedByChip, type HelmOwnerRef } from './ManagedByChip'
+export { DetailShell, type DetailShellProps, type DetailShellTab } from './DetailShell'