@skyhook-io/k8s-ui 1.7.7 → 1.7.9

package/src/components/issues/types.ts

@@ -0,0 +1,194 @@
+// Shared Issues identity contract + data shapes for the live-issues queue.
+//
+// k8s-ui owns these because the Issues queue presentation (IssuesView) is
+// host-agnostic: Radar Hub feeds it fleet-resolved grouped issues, and OSS
+// Radar feeds a single-cluster ("fleet of one") set. Hosts map their wire
+// payloads onto these types; the component renders against them.
+//
+// Mirrors the grouped Issue model radar emits (internal/issues.GroupIssues →
+// /api/issues, and the hub's /api/fleet/issues). IssueResourceRef intentionally
+// matches the Checks queue's contract (components/checks/types.ts) and
+// radar/pkg/audit.ResourceKey — so Issues and Checks share deep-links rather
+// than forking a second convention.
+
+/** Operational severity for live issues — distinct from the Checks 4-tier
+ *  posture ladder on purpose (operational urgency vs compliance risk are
+ *  separate axes). Matches radar's issues.Severity. */
+export type IssueSeverity = 'critical' | 'warning';
+
+/** Ordered worst→least. */
+export const ISSUE_SEVERITIES: IssueSeverity[] = ['critical', 'warning'];
+
+export const ISSUE_SEVERITY_RANK: Record<IssueSeverity, number> = {
+  critical: 2,
+  warning: 1,
+};
+
+export function isIssueSeverity(s: string): s is IssueSeverity {
+  return s === 'critical' || s === 'warning';
+}
+
+/**
+ * Canonical resource identity. `group` is '' for the core API group;
+ * `namespace` is '' for cluster-scoped resources. `cluster_id` scopes the ref
+ * to its source cluster (the hub injects it; single-cluster OSS leaves it
+ * undefined). Same shape as Checks' CheckResourceRef so deep-link plumbing is
+ * shared.
+ */
+export interface IssueResourceRef {
+  cluster_id?: string;
+  // group/namespace are optional to match the Go wire (omitempty): a
+  // cluster-scoped or core-group member (Node, a core/v1 object) arrives
+  // without them. Consumers default to '' (subjectRef/memberRef do this).
+  group?: string;
+  kind: string;
+  namespace?: string;
+  name: string;
+}
+
+/** Rollup of the underlying resources folded into a grouped issue, by kind
+ *  bucket. Empty for single-resource issues (no fan-out). Mirrors the Go
+ *  issues.Affected struct. */
+export interface IssueAffected {
+  pods?: number;
+  workloads?: number;
+  services?: number;
+  pvcs?: number;
+  nodes?: number;
+}
+
+/**
+ * A grouped live issue — one row of the triage queue. Subject (kind/group/
+ * namespace/name) is the topmost owner when the rows folded under a workload,
+ * else the resource itself; `members` are the folded underlying resources
+ * (the fan-out), bounded inline with `members_truncated`. Mirrors the Go
+ * issues.Issue after GroupIssues.
+ */
+export interface Issue {
+  id: string;
+  severity: IssueSeverity;
+  /** Detection channel (problem|missing_ref|scheduling|condition) — an output
+   *  label, not the triage axis. */
+  source: string;
+  /** Symptom taxonomy (image_pull_failed, crashloop, …) — the triage axis. */
+  category: string;
+  /** Coarse rollup of category (startup|runtime|networking|…). Server-emitted
+   *  so the UI never needs its own category→group map. */
+  category_group: string;
+  /** Subject kind bucket (workload|service|pvc|ingress|node|unknown). */
+  grouping_scope: string;
+
+  // Subject identity (the grouped thing). group is omitted for the core API
+  // group, namespace for cluster-scoped subjects — both optional to match the
+  // wire (radar emits them omitempty).
+  cluster_id?: string;
+  cluster_name?: string;
+  group?: string;
+  kind: string;
+  namespace?: string;
+  name: string;
+
+  reason: string;
+  message?: string;
+  first_seen?: string;
+  last_seen?: string;
+  /** Affected-resource fan-out, EXCLUDING the subject (the row header).
+   *  0/omitted for a single-resource issue; e.g. 50 for one Deployment's
+   *  50 crashlooping pods. Exposed to API/MCP/CEL consumers, not just here. */
+  count?: number;
+
+  affected?: IssueAffected;
+  members?: IssueResourceRef[];
+  members_truncated?: boolean;
+
+  // Pod crash context carried from the representative member.
+  restart_count?: number;
+  last_terminated_reason?: string;
+}
+
+/** subjectRef builds a deep-linkable ref for an issue's subject — the row's
+ *  cluster_id threaded onto its group/kind/namespace/name. */
+export function subjectRef(issue: Issue): IssueResourceRef {
+  return {
+    cluster_id: issue.cluster_id,
+    group: issue.group ?? '',
+    kind: issue.kind,
+    namespace: issue.namespace ?? '',
+    name: issue.name,
+  };
+}
+
+/** memberRef threads the issue's cluster_id onto a member ref (members carry
+ *  no cluster_id of their own — every member shares the issue's cluster). */
+export function memberRef(issue: Issue, member: IssueResourceRef): IssueResourceRef {
+  // Normalize the same wire-omitted optionals subjectRef does: Go's Ref.Group /
+  // Ref.Namespace are omitempty, so core-API members (Pods) arrive with group /
+  // namespace undefined — left raw they'd interpolate "undefined" into host
+  // deep-links / React keys and break callbacks that assume a string.
+  return {
+    ...member,
+    group: member.group ?? '',
+    namespace: member.namespace ?? '',
+    cluster_id: issue.cluster_id,
+  };
+}
+
+/**
+ * compareIssues is the queue's stable sort order (extracted from IssuesView so
+ * it can be unit-tested). Severity first (critical before warning), then ONSET
+ * — first_seen DESC, deliberately NOT last_seen: last_seen bumps to compose-time
+ * on every poll, so sorting by it would reshuffle same-severity rows on each
+ * refetch. The remaining keys (cluster → namespace → name → id) are a fully
+ * deterministic tiebreak so the order never churns under auto-refresh.
+ */
+export function compareIssues(a: Issue, b: Issue): number {
+  const r = ISSUE_SEVERITY_RANK[b.severity] - ISSUE_SEVERITY_RANK[a.severity];
+  if (r !== 0) return r;
+  const fa = a.first_seen ?? '';
+  const fb = b.first_seen ?? '';
+  if (fa !== fb) return fb.localeCompare(fa);
+  const c = (a.cluster_name ?? '').localeCompare(b.cluster_name ?? '');
+  if (c !== 0) return c;
+  const ns = (a.namespace ?? '').localeCompare(b.namespace ?? '');
+  if (ns !== 0) return ns;
+  const nm = a.name.localeCompare(b.name);
+  if (nm !== 0) return nm;
+  return a.id.localeCompare(b.id);
+}
+
+/**
+ * normalizeImagePullMessage turns a raw containerd/CRI image-pull error — which
+ * is verbose and re-quotes the image ref at every wrapped layer ("Back-off
+ * pulling image X: ErrImagePull: rpc error: code = NotFound desc = failed to
+ * pull and unpack image X: failed to resolve reference X: X: not found") — into
+ * a short headline: cause + the image ref once. Returns null for shapes it
+ * doesn't recognize, so the caller falls back to the raw string.
+ */
+export function normalizeImagePullMessage(raw: string): string | null {
+  if (!raw) return null;
+  const ref = raw.match(/image "([^"]+)"/)?.[1];
+  const lower = raw.toLowerCase();
+  let cause: string | null = null;
+  if (/not\s*found|manifest\s*unknown|no such (image|manifest)/.test(lower)) cause = 'Image not found';
+  else if (/unauthorized|forbidden|denied|\b401\b|\b403\b|authentication required/.test(lower)) cause = 'Not authorized to pull image';
+  else if (/no such host|i\/o timeout|\btimeout\b|connection refused|dial tcp/.test(lower)) cause = 'Registry unreachable';
+  else if (/toomanyrequests|too many requests|rate limit/.test(lower)) cause = 'Registry rate-limited';
+  if (!cause) return null;
+  return ref ? `${cause}: ${ref}` : cause;
+}
+
+/**
+ * issueMessageParts splits an issue's message into the inline headline and the
+ * raw secondary detail. For image-pull issues the headline is a normalized
+ * one-liner and detail holds the original CRI string; for every other issue the
+ * headline IS the (already concise) message and detail is empty — no
+ * duplication. Gated on image-pull so a generic "not found" in, say, a
+ * missing_config_ref message ('secret "x" not found') is never mislabeled.
+ */
+export function issueMessageParts(issue: Issue): { headline: string; detail: string } {
+  const raw = issue.message ?? '';
+  const isImagePull = issue.category === 'image_pull_failed' || /ImagePull|ErrImage|InvalidImageName|ImageInspect/i.test(issue.reason ?? '');
+  const normalized = isImagePull ? normalizeImagePullMessage(raw) : null;
+  if (normalized && normalized !== raw) return { headline: normalized, detail: raw };
+  return { headline: raw, detail: '' };
+}

package/src/components/resources/ResourcesView.tsx

@@ -256,7 +256,7 @@ const KNOWN_COLUMNS: Record<string, Column[]> = {
   pods: [
     { key: 'name', label: 'Name' },
     { key: 'namespace', label: 'Namespace', width: 'w-48' },
-    { key: 'containers', label: 'Containers', width: 'w-32' },
+    { key: 'containers', label: 'Containers', width: 'w-32', tooltip: 'Container readiness; hover each square for name and state' },
     { key: 'status', label: 'Status', width: 'w-40' },
     { key: 'cpu', label: 'CPU', width: 'w-40', tooltip: 'CPU usage / limit (marker = request)' },
     { key: 'memory', label: 'Memory', width: 'w-40', tooltip: 'Memory usage / limit (marker = request)' },
@@ -3996,23 +3996,6 @@ export function ResourcesView({
                   <X className="w-3.5 h-3.5" />
                 </button>
               )}
-              {/*
-                The sidebar's count badge shows the cluster-wide
-                total for the selected kind (from resourceCounts) and
-                deliberately stays unfiltered. When a search yields
-                zero results the user can think the badge is lying.
-                Spell out that the badge is the cluster total, not
-                the filtered count.
-              */}
-              {searchTerm && (() => {
-                const totalForKind = counts[selectedKind.group ? `${selectedKind.group}/${selectedKind.kind}` : selectedKind.kind] ?? 0
-                if (totalForKind === 0) return null
-                return (
-                  <p className="text-xs mt-1 text-theme-text-disabled">
-                    The sidebar shows {pluralize(totalForKind, selectedKind.kind)} in the cluster — the count is unfiltered.
-                  </p>
-                )
-              })()}
               {namespaces.length > 0 && <p className="text-sm mt-1 text-theme-text-disabled">Searching in {namespaces.length === 1 ? `namespace: ${namespaces[0]}` : `${namespaces.length} namespaces`}</p>}
               {/* Show active filters as dismissible badges so user can clear them */}
               {(() => {
@@ -4933,7 +4916,7 @@ function PodCell({ resource, column }: { resource: any; column: string }) {
       const squares = getContainerSquareStates(resource)
       const hasInit = squares.some(s => s.isInit)
       return (
-        <div className="flex items-center gap-1">
+        <div className="flex w-full items-center justify-center gap-1">
           {squares.map((sq, i) => {
             const showSeparator = hasInit && i > 0 && sq.isInit !== squares[i - 1].isInit
             const bgClass =

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

@@ -115,7 +115,7 @@ export function CAPIKubeadmControlPlaneRenderer({ data, onNavigate }: Props) {
 
       {/* Owned Machines hint */}
       <div className="px-3 py-1.5 text-xs text-theme-text-tertiary">
-        Machines with label <code className="bg-theme-surface px-1 py-0.5 rounded text-[10px] font-mono select-all">cluster.x-k8s.io/control-plane-name={data.metadata?.name}</code>
+        Machines with label <code className="inline-code text-[10px] select-all">cluster.x-k8s.io/control-plane-name={data.metadata?.name}</code>
       </div>
 
       <ConditionsSection conditions={conditions} />

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

@@ -119,7 +119,7 @@ export function CAPIMachineDeploymentRenderer({ data, onNavigate }: Props) {
 
       {/* Owned Machines hint */}
       <div className="px-3 py-1.5 text-xs text-theme-text-tertiary">
-        Machines with label <code className="bg-theme-surface px-1 py-0.5 rounded text-[10px] font-mono select-all">cluster.x-k8s.io/deployment-name={data.metadata?.name}</code>
+        Machines with label <code className="inline-code text-[10px] select-all">cluster.x-k8s.io/deployment-name={data.metadata?.name}</code>
       </div>
 
       <ConditionsSection conditions={conditions} />

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

@@ -92,7 +92,7 @@ export function CAPIMachineSetRenderer({ data, onNavigate }: Props) {
 
       {/* Owned Machines hint */}
       <div className="px-3 py-1.5 text-xs text-theme-text-tertiary">
-        Machines with label <code className="bg-theme-surface px-1 py-0.5 rounded text-[10px] font-mono select-all">cluster.x-k8s.io/set-name={data.metadata?.name}</code>
+        Machines with label <code className="inline-code text-[10px] select-all">cluster.x-k8s.io/set-name={data.metadata?.name}</code>
       </div>
 
       <ConditionsSection conditions={conditions} />

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

@@ -50,7 +50,7 @@ export function CNPGPoolerRenderer({ data, onNavigate }: CNPGPoolerRendererProps
           <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>
+                <code className="inline-code text-xs break-all">{authQuery}</code>
               } />
             )}
             {authQuerySecret && (

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

@@ -57,13 +57,13 @@ function CompositionBody({ data, onNavigate, revision }: CompositionRendererProp
           {xrdKind && (
             <Property
               label="Composite Kind"
-              value={<span className="font-mono text-theme-text-secondary">{xrdKind}</span>}
+              value={<span className="inline-code">{xrdKind}</span>}
             />
           )}
           {compositeTypeRef.apiVersion && (
             <Property
               label="API Version"
-              value={<span className="font-mono text-theme-text-tertiary text-xs">{compositeTypeRef.apiVersion}</span>}
+              value={<span className="inline-code text-xs">{compositeTypeRef.apiVersion}</span>}
             />
           )}
           {writeConnNs && <Property label="Connection Secret Namespace" value={writeConnNs} />}
@@ -149,7 +149,7 @@ function CompositionBody({ data, onNavigate, revision }: CompositionRendererProp
               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>
+                  <span className="inline-code break-all">{res.name || `resource-${i}`}</span>
                   {baseApiVersion && (
                     <span className="text-theme-text-tertiary text-xs">{baseApiVersion}</span>
                   )}

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

@@ -54,7 +54,7 @@ export function CrossplanePackageRenderer({ data, kindLabel, onNavigate }: Cross
 
       <Section title={kindLabel} icon={Package} defaultExpanded>
         <PropertyList>
-          <Property label="Package" value={<span className="font-mono break-all">{pkg}</span>} />
+          <Property label="Package" value={<span className="inline-code break-all">{pkg}</span>} />
           {pullPolicy && <Property label="Pull Policy" value={pullPolicy} />}
           {data?.spec?.revisionActivationPolicy && (
             <Property label="Revision Activation" value={data.spec.revisionActivationPolicy} />
@@ -73,12 +73,12 @@ export function CrossplanePackageRenderer({ data, kindLabel, onNavigate }: Cross
         <Section title="Revision" icon={ScrollText} defaultExpanded>
           <PropertyList>
             {currentRevision && (
-              <Property label="Current Revision" value={<span className="font-mono break-all">{currentRevision}</span>} />
+              <Property label="Current Revision" value={<span className="inline-code break-all">{currentRevision}</span>} />
             )}
             {data?.status?.currentIdentifier && (
               <Property
                 label="Current Identifier"
-                value={<span className="font-mono break-all">{data.status.currentIdentifier}</span>}
+                value={<span className="inline-code break-all">{data.status.currentIdentifier}</span>}
               />
             )}
           </PropertyList>
@@ -112,7 +112,7 @@ export function CrossplanePackageRenderer({ data, kindLabel, onNavigate }: Cross
               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>
+                  <span className="inline-code break-all">{ref || '-'}</span>
                   {dep.version && (
                     <span className="text-theme-text-tertiary text-xs">version: {dep.version}</span>
                   )}
@@ -129,7 +129,7 @@ export function CrossplanePackageRenderer({ data, kindLabel, onNavigate }: Cross
             {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>
+                <span className="inline-code break-all">{ref.name}</span>
                 {ref.apiVersion && (
                   <span className="text-theme-text-tertiary text-xs">{ref.apiVersion}</span>
                 )}

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

@@ -56,7 +56,7 @@ export function CrossplaneProviderConfigRenderer({ data, onNavigate }: Crossplan
               }
             />
             {secretRef.namespace && <Property label="Namespace" value={secretRef.namespace} />}
-            {secretRef.key && <Property label="Key" value={<span className="font-mono">{secretRef.key}</span>} />}
+            {secretRef.key && <Property label="Key" value={<span className="inline-code">{secretRef.key}</span>} />}
           </PropertyList>
         </Section>
       )}

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

@@ -58,7 +58,7 @@ export function PingSourceRenderer({ data, onNavigate }: RendererProps) {
           <Property label="Timezone" value={spec.timezone} />
           <Property label="Content Type" value={spec.contentType} />
           <Property label="Data" value={spec.data ? (
-            <span className="font-mono text-xs break-all">{spec.data.length > 200 ? spec.data.slice(0, 200) + '...' : spec.data}</span>
+            <span className="inline-code text-xs break-all">{spec.data.length > 200 ? spec.data.slice(0, 200) + '...' : spec.data}</span>
           ) : undefined} />
           <SinkProperty sink={spec.sink} ns={ns} onNavigate={onNavigate} />
         </PropertyList>

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"