@skyhook-io/k8s-ui 1.7.6 → 1.7.8

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

@@ -229,6 +229,13 @@ const TAILWIND_WIDTH_TO_PX: Record<string, number> = {
   'w-48': 192, 'w-56': 224, 'w-64': 256,
 }
 
+const COMPARE_COLUMN_WIDTH = 36
+const COMPARE_COLUMN_STYLE: React.CSSProperties = {
+  width: COMPARE_COLUMN_WIDTH,
+  minWidth: COMPARE_COLUMN_WIDTH,
+  maxWidth: COMPARE_COLUMN_WIDTH,
+}
+
 function getColumnMinWidth(col: Column): number {
   if (col.minWidth) return col.minWidth
   if (!col.width) return 200 // Name column (no width class) gets wider minimum
@@ -249,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)' },
@@ -3367,6 +3374,18 @@ export function ResourcesView({
     return allColumns.filter(c => visibleColumns.has(c.key))
   }, [allColumns, visibleColumns])
 
+  // Fixed-width columns can consume the table's flexible space and collapse
+  // the required name column. Keep a real table minimum and let the container
+  // scroll horizontally when the viewport is too narrow.
+  const tableMinWidth = useMemo(() => {
+    const compareColumnWidth = compareMode ? COMPARE_COLUMN_WIDTH : 0
+    const baseMinWidth = columns.reduce((sum, col) => sum + (columnWidths[col.key] || getColumnMinWidth(col)), compareColumnWidth)
+    const flexibleNameColumn = columns.find(col => col.key === 'name' && !columnWidths[col.key])
+
+    if (!hasResizedColumns || !flexibleNameColumn) return baseMinWidth
+    return baseMinWidth + getColumnMinWidth(flexibleNameColumn)
+  }, [columns, columnWidths, compareMode, hasResizedColumns])
+
   // Stable virtuoso components — memoized to avoid remounting the table on every render
   const virtuosoComponents = useMemo(() => ({
     Table: React.forwardRef<HTMLTableElement, React.TableHTMLAttributes<HTMLTableElement>>(function VirtuosoTable(props, ref) {
@@ -3375,7 +3394,7 @@ export function ResourcesView({
           {...props}
           ref={ref}
           className="w-full"
-          style={{ ...props.style, tableLayout: 'fixed' }}
+          style={{ ...props.style, tableLayout: 'fixed', minWidth: tableMinWidth }}
         >
           <colgroup>
             {/*
@@ -3385,7 +3404,7 @@ export function ResourcesView({
               the missing entry by stealing width from a sized neighbour
               — typically blowing this narrow column out to ~200px.
             */}
-            {compareMode && <col style={{ width: 36 }} />}
+            {compareMode && <col style={{ width: COMPARE_COLUMN_WIDTH }} />}
             {columns.map(col => (
               <col
                 key={col.key}
@@ -3403,7 +3422,7 @@ export function ResourcesView({
       )
     }),
     TableRow: VirtuosoTableRow,
-  }), [columns, columnWidths, hasResizedColumns, compareMode])
+  }), [columns, columnWidths, hasResizedColumns, compareMode, tableMinWidth])
 
   // Calculate filter options with counts based on current resources (before filtering)
   const filterOptions = useMemo(() => {
@@ -3949,7 +3968,7 @@ export function ResourcesView({
 
         {/* Table */}
         <div
-          className="flex-1 overflow-y-auto overflow-x-hidden relative"
+          className="flex-1 overflow-auto relative"
           ref={tableContainerRef}
           onClick={(e) => {
             if (e.target === e.currentTarget && selectedResource) {
@@ -3977,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 */}
               {(() => {
@@ -4062,7 +4064,7 @@ export function ResourcesView({
                       // Inline px width — under `table-layout:fixed`,
                       // `w-9` is a hint the browser absorbs into leftover
                       // row width on an icon-only column.
-                      style={{ width: 36, minWidth: 36, maxWidth: 36 }}
+                      style={COMPARE_COLUMN_STYLE}
                       className="px-2 py-3 text-xs font-medium uppercase tracking-wide bg-theme-base border-b border-r-subtle border-theme-border text-center text-skyhook-400"
                       title="Compare mode"
                     >
@@ -4344,7 +4346,7 @@ function ResourceRowCells({ resource, kind, group, columns, extraColumnsByKey, h
         <td
           onClick={onClick}
           onMouseEnter={onMouseEnter}
-          style={{ width: 36, minWidth: 36, maxWidth: 36 }}
+          style={COMPARE_COLUMN_STYLE}
           className={clsx('px-2 py-3 border-b-subtle cursor-pointer text-center align-middle transition-colors', rowHighlight)}
         >
           {pickedSide ? (
@@ -4914,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/ArgoApplicationRenderer.tsx

@@ -1,4 +1,4 @@
-import { GitBranch, FolderTree, Settings, Target, XCircle, History, ListChecks } from 'lucide-react'
+import { GitBranch, FolderTree, Settings, Target, XCircle, History, ListChecks, ExternalLink } from 'lucide-react'
 import { clsx } from 'clsx'
 import { Section, PropertyList, Property, ConditionsSection, ProblemAlerts } from '../../ui/drawer-components'
 import { formatAge } from '../resource-utils'
@@ -10,6 +10,9 @@ import {
   type ArgoResource,
 } from '../../../types/gitops'
 import { BADGE_INACTIVE } from '../../../utils/badge-colors'
+import { buildRepoBrowseUrl, buildPathBrowseUrl } from '../../../utils/git-provider-urls'
+
+const REPO_LINK_CLASS = 'text-blue-400 hover:text-blue-300 hover:underline break-all'
 
 interface ArgoApplicationRendererProps {
   data: any
@@ -19,10 +22,51 @@ interface ArgoApplicationRendererProps {
 
 function SourceProperties({ source }: { source: any }) {
   if (!source) return null
+  // Helm chart sources point repoURL at a chart registry, not a browseable git repo.
+  const isHelmSource = !!source.chart
+  const repoHref = isHelmSource ? null : buildRepoBrowseUrl(source.repoURL)
+  const pathHref = isHelmSource ? null : buildPathBrowseUrl(source.repoURL, source.path, source.targetRevision)
   return (
     <>
-      <Property label="Repository" value={source.repoURL} />
-      {source.path && <Property label="Path" value={source.path} />}
+      <Property
+        label="Repository"
+        value={
+          repoHref ? (
+            <a
+              href={repoHref}
+              target="_blank"
+              rel="noopener noreferrer"
+              title={source.repoURL}
+              className={`${REPO_LINK_CLASS} inline-flex items-center gap-1`}
+            >
+              {source.repoURL}
+              <ExternalLink className="w-3 h-3 shrink-0" />
+            </a>
+          ) : (
+            source.repoURL
+          )
+        }
+      />
+      {source.path && (
+        <Property
+          label="Path"
+          value={
+            pathHref ? (
+              <a
+                href={pathHref}
+                target="_blank"
+                rel="noopener noreferrer"
+                title={source.path}
+                className={REPO_LINK_CLASS}
+              >
+                {source.path}
+              </a>
+            ) : (
+              source.path
+            )
+          }
+        />
+      )}
       {source.targetRevision && (
         <Property
           label="Target Revision"

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')
+  })
+})