@skyhook-io/k8s-ui 1.7.13 → 1.7.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/k8s-ui",
-  "version": "1.7.13",
+  "version": "1.7.14",
   "repository": {
     "type": "git",
     "url": "https://github.com/skyhook-io/radar",

package/src/components/audit/index.ts

@@ -1,3 +1,3 @@
 export { AuditCard, type AuditCardData } from './AuditCard'
 export { AuditAlerts, type AuditFinding } from './AuditAlerts'
-export { AuditFindingsTable, type AuditFindingsTableProps, type ResourceGroup, type CheckMeta } from './AuditFindingsTable'
+export { AuditFindingsTable, type AuditFindingsTableProps, type ResourceGroup, type CheckMeta, type CheckReference } from './AuditFindingsTable'

package/src/components/checks/ChecksView.tsx

@@ -2,7 +2,7 @@ import { useEffect, useMemo, useRef, useState, type ReactNode } from 'react'
 import { createPortal } from 'react-dom'
 import { ChevronDown, ChevronRight, ExternalLink, EyeOff, MoreHorizontal, Search, ShieldCheck, Wrench, X } from 'lucide-react'
 import { ClusterName, EmptyState, FilterPill } from '../ui'
-import type { CheckMeta } from '../audit'
+import type { CheckMeta, CheckReference } from '../audit'
 import { CHECK_SEVERITIES, CHECK_SEVERITY_RANK, type Check, type CheckSeverity, type EffectiveCheckFinding, type CheckResourceRef } from './types'
 import {
   SEVERITY_BADGE_CLASS,
@@ -255,11 +255,11 @@ export function ChecksView({ checks, catalog, anyData, resourceHref, onResourceC
           </div>
         </div>
 
-        <SeverityBar totals={totals} />
+        <CheckSeverityBar totals={totals} />
 
         <div className="flex flex-wrap items-center gap-1.5">
           {CHECK_SEVERITIES.map((s) => (
-            <SeverityChip key={s} severity={s} count={totals[s]} active={severityFilter.has(s)} onClick={() => toggle(setSeverityFilter, s)} />
+            <CheckSeverityChip key={s} severity={s} count={totals[s]} active={severityFilter.has(s)} onClick={() => toggle(setSeverityFilter, s)} />
           ))}
           <span className="mx-1.5 h-5 w-px bg-theme-border" />
           {CATEGORIES.map((c) => (
@@ -366,7 +366,7 @@ export function ChecksView({ checks, catalog, anyData, resourceHref, onResourceC
   )
 }
 
-function SeverityBar({ totals }: { totals: Record<CheckSeverity, number> }) {
+export function CheckSeverityBar({ totals }: { totals: Record<CheckSeverity, number> }) {
   const sum = CHECK_SEVERITIES.reduce((n, s) => n + totals[s], 0)
   return (
     <div className="flex h-1.5 overflow-hidden rounded-full bg-theme-elevated" role="img" aria-label="Severity distribution">
@@ -381,7 +381,7 @@ function SeverityBar({ totals }: { totals: Record<CheckSeverity, number> }) {
   )
 }
 
-function SeverityChip({ severity, count, active, onClick }: { severity: CheckSeverity; count: number; active: boolean; onClick: () => void }) {
+export function CheckSeverityChip({ severity, count, active, onClick }: { severity: CheckSeverity; count: number; active: boolean; onClick: () => void }) {
   return (
     <button
       type="button"
@@ -399,36 +399,117 @@ function SeverityChip({ severity, count, active, onClick }: { severity: CheckSev
   )
 }
 
-function FleetCheckRow({
-  fc,
-  meta,
-  clusterLabel,
-  open,
-  onToggle,
-  resourceHref,
-  onResourceClick,
-  onHideCheck,
-  onHideCategory,
-}: {
-  fc: FleetCheck
-  meta?: CheckMeta
-  clusterLabel?: (check: Check) => string | undefined
+// Re-export the audit CheckReference (single source of truth) — CheckMeta.references
+// is typed against this same shape, so the two must not drift apart.
+export type { CheckReference }
+
+export interface CheckRemediationBlockProps {
+  description?: string
+  remediation?: string
+  references?: CheckReference[]
+  layout?: 'columns' | 'stack'
+}
+
+export function CheckRemediationBlock({ description, remediation, references, layout = 'columns' }: CheckRemediationBlockProps) {
+  if (!description && !remediation && (!references || references.length === 0)) return null
+
+  if (layout === 'stack') {
+    return (
+      <div className="flex flex-col gap-2">
+        {description && <p className="text-[13px] leading-relaxed text-theme-text-secondary">{description}</p>}
+        {remediation && (
+          <div>
+            <div className="text-[11px] uppercase tracking-wider text-theme-text-tertiary">How to fix</div>
+            <p className="mt-0.5 text-[13px] leading-relaxed text-theme-text-secondary">{remediation}</p>
+          </div>
+        )}
+        {references && references.length > 0 && <CheckReferenceLinks references={references} />}
+      </div>
+    )
+  }
+
+  return (
+    <>
+      <div className="flex flex-col gap-4 md:flex-row md:gap-8">
+        {remediation && (
+          <section className="md:flex-1">
+            <h4 className="mb-1 flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wide text-[var(--color-radar-accent)]">
+              <Wrench className="h-3.5 w-3.5" /> How to fix
+            </h4>
+            <p className="text-sm leading-relaxed text-theme-text-primary">{remediation}</p>
+          </section>
+        )}
+        {description && (
+          <section className="md:flex-1">
+            <h4 className="mb-1 text-[11px] font-semibold uppercase tracking-wide text-theme-text-tertiary">What this checks</h4>
+            <p className="text-sm leading-relaxed text-theme-text-secondary">{description}</p>
+          </section>
+        )}
+      </div>
+      {references && references.length > 0 && <CheckReferenceLinks references={references} />}
+    </>
+  )
+}
+
+function CheckReferenceLinks({ references }: { references: CheckReference[] }) {
+  return (
+    <div className="flex flex-wrap items-center gap-x-4 gap-y-1.5">
+      {references.map((r) => (
+        <a
+          key={r.url}
+          href={r.url}
+          target="_blank"
+          rel="noreferrer"
+          className="inline-flex items-center gap-1 text-xs font-medium text-[var(--color-radar-accent)] hover:underline"
+        >
+          {r.label}
+          <ExternalLink className="h-3 w-3" />
+        </a>
+      ))}
+    </div>
+  )
+}
+
+export interface CheckCardShellProps {
+  title: ReactNode
+  category: string
+  severity: CheckSeverity
   open: boolean
   onToggle: () => void
-  resourceHref?: (ref: CheckResourceRef) => string
-  onResourceClick?: (ref: CheckResourceRef) => void
-  onHideCheck?: (checkID: string, title: string) => void
-  onHideCategory?: (category: string) => void
-}) {
-  const clusterCount = fc.clusters.length
-  const single = clusterCount <= 1
-
-  const menuItems: { label: string; onClick: () => void }[] = []
-  if (onHideCheck) menuItems.push({ label: `Hide "${fc.title}" check`, onClick: () => onHideCheck(fc.checkID, fc.title) })
-  if (onHideCategory) menuItems.push({ label: `Hide all ${fc.category} checks`, onClick: () => onHideCategory(fc.category) })
+  summary?: ReactNode
+  description?: ReactNode
+  renderActions?: () => ReactNode
+  children?: ReactNode
+  as?: 'li' | 'div'
+  className?: string
+  dimmed?: boolean
+}
 
+export function CheckCardShell({
+  title,
+  category,
+  severity,
+  open,
+  onToggle,
+  summary,
+  description,
+  renderActions,
+  children,
+  as = 'li',
+  className,
+  dimmed,
+}: CheckCardShellProps) {
+  const Container = as
   return (
-    <li className="overflow-hidden rounded-xl border border-theme-border bg-theme-surface shadow-theme-sm">
+    <Container
+      className={[
+        'overflow-hidden rounded-xl border border-theme-border bg-theme-surface shadow-theme-sm',
+        dimmed ? 'opacity-60' : '',
+        className ?? '',
+      ]
+        .filter(Boolean)
+        .join(' ')}
+    >
       <div
         role="button"
         tabIndex={0}
@@ -441,158 +522,100 @@ function FleetCheckRow({
             onToggle()
           }
         }}
-        className={`group flex cursor-pointer items-center gap-3 border-l-2 py-3 pl-3 pr-4 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-radar-accent)]/40 ${SEVERITY_RAIL_CLASS[fc.severity]}`}
+        className={`group flex cursor-pointer items-start gap-3 border-l-2 py-3 pl-3 pr-4 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-radar-accent)]/40 ${SEVERITY_RAIL_CLASS[severity]}`}
       >
-        <ChevronRight className={`h-4 w-4 shrink-0 text-theme-text-tertiary transition-transform duration-200 ${open ? 'rotate-90' : ''}`} />
+        <ChevronRight className={`mt-0.5 h-4 w-4 shrink-0 text-theme-text-tertiary transition-transform duration-200 ${open ? 'rotate-90' : ''}`} />
 
-        <div className="flex min-w-0 flex-1 flex-col gap-1">
-          <div className="flex items-center gap-2">
-            <span className="truncate text-sm font-medium text-theme-text-primary">{fc.title}</span>
-            <span className={`badge-sm shrink-0 text-[10px] ${categoryBadgeClass(fc.category)}`}>{fc.category}</span>
-          </div>
-          <div className="flex min-w-0 items-center gap-1.5 text-xs text-theme-text-tertiary">
-            <span className="shrink-0 font-medium text-theme-text-secondary tabular-nums">
-              {fc.totalResources} {fc.totalResources === 1 ? 'resource' : 'resources'}
-            </span>
-            {clusterCount > 1 && (
-              <>
-                <span aria-hidden>·</span>
-                <span className="shrink-0 tabular-nums">{clusterCount} clusters</span>
-              </>
-            )}
+        <div className="flex min-w-0 flex-1 flex-col gap-1.5">
+          <div className="flex flex-wrap items-center gap-2">
+            <span className="truncate text-sm font-semibold text-theme-text-primary">{title}</span>
+            <span className={`badge-sm shrink-0 text-[10px] ${categoryBadgeClass(category)}`}>{category}</span>
           </div>
+          {description}
+          {summary}
         </div>
 
-        <span className={`badge-sm shrink-0 text-[10px] font-semibold ${SEVERITY_BADGE_CLASS[fc.severity]}`}>{SEVERITY_LABEL[fc.severity]}</span>
-        {menuItems.length > 0 && <RowMenu items={menuItems} />}
+        <span className={`badge-sm mt-0.5 shrink-0 text-[10px] font-semibold ${SEVERITY_BADGE_CLASS[severity]}`}>
+          {SEVERITY_LABEL[severity]}
+        </span>
+        {renderActions?.()}
       </div>
 
       {/* Kept mounted (not `open &&`) so the grid-rows transition animates the
-          collapse too; inert when closed so SR + tab skip the clipped content. */}
+          collapse too, matching IssueRow; inert when closed so SR + tab skip
+          the clipped content. */}
       <div className="grid transition-[grid-template-rows] duration-200 ease-out" style={{ gridTemplateRows: open ? '1fr' : '0fr' }}>
         <div className="overflow-hidden" inert={!open || undefined}>
-          <div className="border-t border-theme-border bg-theme-base/40 px-4 py-4 pl-11">
-            <div className="flex flex-col gap-4">
-              <div className="flex flex-col gap-4 md:flex-row md:gap-8">
-                {meta?.remediation && (
-                  <section className="md:flex-1">
-                    <h4 className="mb-1 flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wide text-[var(--color-radar-accent)]">
-                      <Wrench className="h-3.5 w-3.5" /> How to fix
-                    </h4>
-                    <p className="text-sm leading-relaxed text-theme-text-primary">{meta.remediation}</p>
-                  </section>
-                )}
-                {meta?.description && (
-                  <section className="md:flex-1">
-                    <h4 className="mb-1 text-[11px] font-semibold uppercase tracking-wide text-theme-text-tertiary">What this checks</h4>
-                    <p className="text-sm leading-relaxed text-theme-text-secondary">{meta.description}</p>
-                  </section>
-                )}
-              </div>
-
-              {meta?.references && meta.references.length > 0 && (
-                <div className="flex flex-wrap items-center gap-x-4 gap-y-1.5">
-                  {meta.references.map((r) => (
-                    <a
-                      key={r.url}
-                      href={r.url}
-                      target="_blank"
-                      rel="noreferrer"
-                      className="inline-flex items-center gap-1 text-xs font-medium text-[var(--color-radar-accent)] hover:underline"
-                    >
-                      {r.label}
-                      <ExternalLink className="h-3 w-3" />
-                    </a>
-                  ))}
-                </div>
-              )}
-
-              <div className="border-t border-theme-border/70 pt-3">
-                {single ? (
-                  <ResourceList
-                    label={`Affected resources (${fc.totalResources})`}
-                    check={fc.clusters[0]}
-                    resourceHref={resourceHref}
-                    onResourceClick={onResourceClick}
-                  />
-                ) : (
-                  <ClusterBreakdown fc={fc} clusterLabel={clusterLabel} resourceHref={resourceHref} onResourceClick={onResourceClick} />
-                )}
-              </div>
-            </div>
-          </div>
+          <div className="flex flex-col gap-4 border-t border-theme-border bg-theme-base/40 px-4 py-4 pl-11">{children}</div>
         </div>
       </div>
-    </li>
+    </Container>
   )
 }
 
-// Per-cluster sub-groups for a check that spans the fleet. Each cluster is a
-// collapsible row ("cluster · K resources"); open it for that cluster's
-// resources. Caps the cluster list so a check across hundreds of clusters
-// stays scannable.
-function ClusterBreakdown({
-  fc,
-  clusterLabel,
-  resourceHref,
-  onResourceClick,
-}: {
-  fc: FleetCheck
-  clusterLabel?: (check: Check) => string | undefined
-  resourceHref?: (ref: CheckResourceRef) => string
-  onResourceClick?: (ref: CheckResourceRef) => void
-}) {
+export interface CheckClusterBreakdownGroup {
+  id: string
+  label: ReactNode
+  environment?: string
+  count: ReactNode
+}
+
+export interface CheckClusterBreakdownShellProps<T extends CheckClusterBreakdownGroup> {
+  heading: ReactNode
+  groups: T[]
+  renderGroupBody: (group: T) => ReactNode
+  clusterCap?: number
+  autoExpandLimit?: number
+}
+
+export function CheckClusterBreakdownShell<T extends CheckClusterBreakdownGroup>({
+  heading,
+  groups,
+  renderGroupBody,
+  clusterCap = CLUSTER_CAP,
+  autoExpandLimit = AUTO_EXPAND_CLUSTERS,
+}: CheckClusterBreakdownShellProps<T>) {
   const [openClusters, setOpenClusters] = useState<Set<string>>(
-    () => new Set(fc.clusters.length <= AUTO_EXPAND_CLUSTERS ? fc.clusters.map((c) => c.subject.cluster_id) : []),
+    () => new Set(groups.length <= autoExpandLimit ? groups.map((g) => g.id) : []),
   )
   const [showAllClusters, setShowAllClusters] = useState(false)
-  const shown = showAllClusters ? fc.clusters : fc.clusters.slice(0, CLUSTER_CAP)
-  const hiddenClusters = fc.clusters.length - shown.length
+  const shown = showAllClusters ? groups : groups.slice(0, clusterCap)
+  const hiddenClusters = groups.length - shown.length
 
   return (
     <section className="flex flex-col gap-1.5">
-      <h4 className="text-[11px] font-semibold uppercase tracking-wide text-theme-text-tertiary">
-        Affected resources <span className="tabular-nums">({fc.totalResources})</span> · {fc.clusters.length} clusters
-      </h4>
+      <h4 className="text-[11px] font-semibold uppercase tracking-wide text-theme-text-tertiary">{heading}</h4>
       <ul className="flex flex-col gap-1">
-        {shown.map((c) => {
-          const id = c.subject.cluster_id
-          const isOpen = openClusters.has(id)
-          const env = c.environment
+        {shown.map((group) => {
+          const isOpen = openClusters.has(group.id)
           return (
-            <li key={id} className="rounded-lg border border-theme-border/70 bg-theme-surface">
+            <li key={group.id} className="rounded-lg border border-theme-border/70 bg-theme-surface">
               <button
                 type="button"
                 aria-expanded={isOpen}
                 onClick={() =>
                   setOpenClusters((prev) => {
                     const next = new Set(prev)
-                    if (next.has(id)) next.delete(id)
-                    else next.add(id)
+                    if (next.has(group.id)) next.delete(group.id)
+                    else next.add(group.id)
                     return next
                   })
                 }
                 className="flex w-full items-center gap-2 rounded-lg px-2.5 py-1.5 text-left transition-colors hover:bg-theme-hover/50"
               >
                 <ChevronDown className={`h-3.5 w-3.5 shrink-0 text-theme-text-tertiary transition-transform duration-200 ${isOpen ? '' : '-rotate-90'}`} />
-                <span className="min-w-0 max-w-[260px] truncate text-sm font-medium text-theme-text-primary">
-                  <ClusterName name={clusterLabel?.(c) || id} />
-                </span>
-                {env && (
+                <span className="min-w-0 max-w-[260px] truncate text-sm font-medium text-theme-text-primary">{group.label}</span>
+                {group.environment && (
                   <span className="shrink-0 rounded bg-theme-elevated px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide text-theme-text-secondary ring-1 ring-theme-border">
-                    {env}
+                    {group.environment}
                   </span>
                 )}
                 <span className="flex-1" />
-                <span className="shrink-0 text-xs tabular-nums text-theme-text-secondary">
-                  {c.affectedResources} {c.affectedResources === 1 ? 'resource' : 'resources'}
-                </span>
+                <span className="shrink-0 text-xs tabular-nums text-theme-text-secondary">{group.count}</span>
               </button>
               <div className="grid transition-[grid-template-rows] duration-200 ease-out" style={{ gridTemplateRows: isOpen ? '1fr' : '0fr' }}>
                 <div className="overflow-hidden" inert={!isOpen || undefined}>
-                  <div className="px-2.5 pb-2 pl-7">
-                    <ResourceList check={c} resourceHref={resourceHref} onResourceClick={onResourceClick} />
-                  </div>
+                  <div className="px-2.5 pb-2 pl-7">{renderGroupBody(group)}</div>
                 </div>
               </div>
             </li>
@@ -605,13 +628,117 @@ function ClusterBreakdown({
           onClick={() => setShowAllClusters(true)}
           className="mt-0.5 inline-flex w-fit items-center gap-1 rounded px-2 py-1 text-xs font-medium text-[var(--color-radar-accent)] hover:underline"
         >
-          View all {fc.clusters.length} clusters →
+          View all {groups.length} clusters →
         </button>
       )}
     </section>
   )
 }
 
+function FleetCheckRow({
+  fc,
+  meta,
+  clusterLabel,
+  open,
+  onToggle,
+  resourceHref,
+  onResourceClick,
+  onHideCheck,
+  onHideCategory,
+}: {
+  fc: FleetCheck
+  meta?: CheckMeta
+  clusterLabel?: (check: Check) => string | undefined
+  open: boolean
+  onToggle: () => void
+  resourceHref?: (ref: CheckResourceRef) => string
+  onResourceClick?: (ref: CheckResourceRef) => void
+  onHideCheck?: (checkID: string, title: string) => void
+  onHideCategory?: (category: string) => void
+}) {
+  const clusterCount = fc.clusters.length
+  const single = clusterCount <= 1
+
+  const menuItems: { label: string; onClick: () => void }[] = []
+  if (onHideCheck) menuItems.push({ label: `Hide "${fc.title}" check`, onClick: () => onHideCheck(fc.checkID, fc.title) })
+  if (onHideCategory) menuItems.push({ label: `Hide all ${fc.category} checks`, onClick: () => onHideCategory(fc.category) })
+
+  return (
+    <CheckCardShell
+      title={fc.title}
+      category={fc.category}
+      severity={fc.severity}
+      open={open}
+      onToggle={onToggle}
+      summary={
+        <div className="flex min-w-0 items-center gap-1.5 text-xs text-theme-text-tertiary">
+          <span className="shrink-0 font-medium text-theme-text-secondary tabular-nums">
+            {fc.totalResources} {fc.totalResources === 1 ? 'resource' : 'resources'}
+          </span>
+          {clusterCount > 1 && (
+            <>
+              <span aria-hidden>·</span>
+              <span className="shrink-0 tabular-nums">{clusterCount} clusters</span>
+            </>
+          )}
+        </div>
+      }
+      renderActions={() => (menuItems.length > 0 ? <RowMenu items={menuItems} /> : null)}
+    >
+      <CheckRemediationBlock description={meta?.description} remediation={meta?.remediation} references={meta?.references} />
+
+      <div className="border-t border-theme-border/70 pt-3">
+        {single ? (
+          <ResourceList
+            label={`Affected resources (${fc.totalResources})`}
+            check={fc.clusters[0]}
+            resourceHref={resourceHref}
+            onResourceClick={onResourceClick}
+          />
+        ) : (
+          <ClusterBreakdown fc={fc} clusterLabel={clusterLabel} resourceHref={resourceHref} onResourceClick={onResourceClick} />
+        )}
+      </div>
+    </CheckCardShell>
+  )
+}
+
+// Per-cluster sub-groups for a check that spans the fleet. Each cluster is a
+// collapsible row ("cluster · K resources"); open it for that cluster's
+// resources. Caps the cluster list so a check across hundreds of clusters
+// stays scannable.
+function ClusterBreakdown({
+  fc,
+  clusterLabel,
+  resourceHref,
+  onResourceClick,
+}: {
+  fc: FleetCheck
+  clusterLabel?: (check: Check) => string | undefined
+  resourceHref?: (ref: CheckResourceRef) => string
+  onResourceClick?: (ref: CheckResourceRef) => void
+}) {
+  return (
+    <CheckClusterBreakdownShell
+      heading={
+        <>
+          Affected resources <span className="tabular-nums">({fc.totalResources})</span> · {fc.clusters.length} clusters
+        </>
+      }
+      groups={fc.clusters.map((c) => ({
+        id: c.subject.cluster_id,
+        label: <ClusterName name={clusterLabel?.(c) || c.subject.cluster_id} />,
+        environment: c.environment,
+        count: `${c.affectedResources} ${c.affectedResources === 1 ? 'resource' : 'resources'}`,
+        check: c,
+      }))}
+      renderGroupBody={(group) => (
+        <ResourceList check={group.check} resourceHref={resourceHref} onResourceClick={onResourceClick} />
+      )}
+    />
+  )
+}
+
 // The resource lines for one cluster's check. `label` (set in the single-cluster
 // case) renders a section heading; in the cluster-breakdown case the cluster row
 // already provides the heading, so it's omitted.

package/src/components/checks/index.ts

@@ -1,3 +1,16 @@
-export { ChecksView, type ChecksViewProps } from './ChecksView'
+export {
+  CheckCardShell,
+  CheckClusterBreakdownShell,
+  CheckRemediationBlock,
+  CheckSeverityBar,
+  CheckSeverityChip,
+  ChecksView,
+  type CheckCardShellProps,
+  type CheckClusterBreakdownGroup,
+  type CheckClusterBreakdownShellProps,
+  type CheckReference,
+  type CheckRemediationBlockProps,
+  type ChecksViewProps,
+} from './ChecksView'
 export * from './types'
 export * from './severity'

package/src/components/issues/IssuesView.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState, type ReactNode } from 'react';
+import { useEffect, useMemo, useState, type ComponentType, type ReactNode } from 'react';
 import { ChevronRight, CircleCheck, Clock, ExternalLink } from 'lucide-react';
 import { ClusterName, EmptyState } from '../ui';
 import { formatCompactAge, formatRelativeAgeTime } from '../../utils/format';
@@ -90,25 +90,48 @@ export function IssuesView({ issues, anyData, resourceHref, onResourceClick, clu
   );
 }
 
-function IssueRow({
-  issue,
-  clusterLabel,
-  open,
-  onToggle,
-  resourceHref,
-  onResourceClick,
-}: {
+export interface IssueRowSlotContext {
+  issue: Issue;
+  open: boolean;
+}
+
+export interface IssueRowProps {
   issue: Issue;
   clusterLabel?: (issue: Issue) => string | undefined;
   open: boolean;
   onToggle: () => void;
   resourceHref?: (ref: IssueResourceRef) => string;
   onResourceClick?: (ref: IssueResourceRef) => void;
-}) {
+  as?: 'li' | 'div';
+  className?: string;
+  dimmed?: boolean;
+  renderBadges?: (ctx: IssueRowSlotContext) => ReactNode;
+  renderMeta?: (ctx: IssueRowSlotContext) => ReactNode;
+  renderActions?: (ctx: IssueRowSlotContext) => ReactNode;
+  ResourceLinkIcon?: ComponentType<{ className?: string }>;
+}
+
+export function IssueRow({
+  issue,
+  clusterLabel,
+  open,
+  onToggle,
+  resourceHref,
+  onResourceClick,
+  as = 'li',
+  className,
+  dimmed,
+  renderBadges,
+  renderMeta,
+  renderActions,
+  ResourceLinkIcon = ExternalLink,
+}: IssueRowProps) {
   const cluster = clusterLabel?.(issue);
   const affected = affectedSummary(issue.affected);
   const { headline } = issueMessageParts(issue);
   const [renderDetails, setRenderDetails] = useState(open);
+  const Container = as;
+  const slotCtx = { issue, open };
 
   useEffect(() => {
     if (open) {
@@ -122,8 +145,12 @@ function IssueRow({
   }, [open, renderDetails]);
 
   return (
-    <li
-      className="overflow-hidden rounded-xl border border-theme-border bg-theme-surface shadow-theme-sm"
+    <Container
+      className={[
+        'overflow-hidden rounded-xl border border-theme-border bg-theme-surface shadow-theme-sm',
+        dimmed ? 'opacity-60' : '',
+        className ?? '',
+      ].filter(Boolean).join(' ')}
       style={{ contentVisibility: 'auto', containIntrinsicSize: 'auto 72px' }}
     >
       {/* The whole header is the single toggle target — chevron is just the
@@ -149,6 +176,7 @@ function IssueRow({
           <div className="flex min-w-0 items-baseline gap-2">
             <span className="shrink-0 text-sm font-medium text-theme-text-primary">{categoryLabel(issue.category)}</span>
             <span className={`badge-sm shrink-0 self-center text-[10px] ${groupBadgeClass(issue.category_group)}`}>{groupLabel(issue.category_group)}</span>
+            {renderBadges?.(slotCtx)}
             {/* The detector reason/message rides the title row so the most
                 useful triage signal is visible without expanding — it fills
                 the otherwise-empty band between the title and the severity
@@ -180,6 +208,7 @@ function IssueRow({
                 <span className="shrink-0 tabular-nums">{affected}</span>
               </>
             ) : null}
+            {renderMeta?.(slotCtx)}
           </div>
         </div>
 
@@ -203,6 +232,7 @@ function IssueRow({
         <span className={`badge-sm shrink-0 text-[10px] font-semibold ${ISSUE_SEVERITY_BADGE_CLASS[issue.severity]}`}>
           {ISSUE_SEVERITY_LABEL[issue.severity]}
         </span>
+        {renderActions?.(slotCtx)}
       </div>
 
       {renderDetails ? (
@@ -218,16 +248,16 @@ function IssueRow({
             <div className="border-t border-theme-border bg-theme-base/40 px-4 py-4 pl-11">
               <div className="flex flex-col gap-4">
                 <Diagnosis issue={issue} />
-                <DiagnosticContext issue={issue} resourceHref={resourceHref} onResourceClick={onResourceClick} />
+                <DiagnosticContext issue={issue} resourceHref={resourceHref} onResourceClick={onResourceClick} ResourceLinkIcon={ResourceLinkIcon} />
                 <div className="border-t border-theme-border/70 pt-3">
-                  <AffectedResources issue={issue} resourceHref={resourceHref} onResourceClick={onResourceClick} />
+                  <AffectedResources issue={issue} resourceHref={resourceHref} onResourceClick={onResourceClick} ResourceLinkIcon={ResourceLinkIcon} />
                 </div>
               </div>
             </div>
           </div>
         </div>
       ) : null}
-    </li>
+    </Container>
   );
 }
 
@@ -316,10 +346,12 @@ function DiagnosticContext({
   issue,
   resourceHref,
   onResourceClick,
+  ResourceLinkIcon,
 }: {
   issue: Issue;
   resourceHref?: (ref: IssueResourceRef) => string;
   onResourceClick?: (ref: IssueResourceRef) => void;
+  ResourceLinkIcon: ComponentType<{ className?: string }>;
 }) {
   const ctx = issue.diagnostic_context;
   const facts = ctx?.facts?.filter((fact) => fact.message || fact.refs?.length || fact.related_issues?.length) ?? [];
@@ -347,6 +379,7 @@ function DiagnosticContext({
                     refForLink={memberRef(issue, related.ref)}
                     resourceHref={resourceHref}
                     onResourceClick={onResourceClick}
+                    ResourceLinkIcon={ResourceLinkIcon}
                   />
                 ))}
               </ul>
@@ -359,6 +392,7 @@ function DiagnosticContext({
                     refForLink={memberRef(issue, ref)}
                     resourceHref={resourceHref}
                     onResourceClick={onResourceClick}
+                    ResourceLinkIcon={ResourceLinkIcon}
                   />
                 ))}
               </ul>
@@ -424,10 +458,12 @@ function AffectedResources({
   issue,
   resourceHref,
   onResourceClick,
+  ResourceLinkIcon,
 }: {
   issue: Issue;
   resourceHref?: (ref: IssueResourceRef) => string;
   onResourceClick?: (ref: IssueResourceRef) => void;
+  ResourceLinkIcon: ComponentType<{ className?: string }>;
 }) {
   const members = issue.members ?? [];
   // count is the backend fan-out size (members, subject excluded — see
@@ -439,7 +475,7 @@ function AffectedResources({
           first deep-link; members (the folded pods) follow. ResourceLine emits
           an <li>, so it needs a list parent of its own. */}
       <ul className="flex flex-col gap-px">
-        <ResourceLine label="Subject" refForLink={subjectRef(issue)} resourceHref={resourceHref} onResourceClick={onResourceClick} />
+        <ResourceLine label="Subject" refForLink={subjectRef(issue)} resourceHref={resourceHref} onResourceClick={onResourceClick} ResourceLinkIcon={ResourceLinkIcon} />
       </ul>
       {members.length > 0 && (
         <>
@@ -453,6 +489,7 @@ function AffectedResources({
                 refForLink={memberRef(issue, m)}
                 resourceHref={resourceHref}
                 onResourceClick={onResourceClick}
+                ResourceLinkIcon={ResourceLinkIcon}
               />
             ))}
           </ul>
@@ -472,11 +509,13 @@ function ResourceLine({
   refForLink,
   resourceHref,
   onResourceClick,
+  ResourceLinkIcon,
 }: {
   label?: string;
   refForLink: IssueResourceRef;
   resourceHref?: (ref: IssueResourceRef) => string;
   onResourceClick?: (ref: IssueResourceRef) => void;
+  ResourceLinkIcon: ComponentType<{ className?: string }>;
 }) {
   const r = refForLink;
   const linkable = !!(onResourceClick || resourceHref);
@@ -488,7 +527,7 @@ function ResourceLine({
         {r.namespace ? `${r.namespace} / ` : ''}
         {r.name}
       </span>
-      {linkable && <ExternalLink className="h-3 w-3 shrink-0 text-theme-text-tertiary opacity-0 transition-opacity group-hover/r:opacity-100" />}
+      {linkable && <ResourceLinkIcon className="h-3 w-3 shrink-0 text-theme-text-tertiary opacity-0 transition-opacity group-hover/r:opacity-100" />}
     </>
   );
   const cls = 'group/r flex w-full items-center gap-2 rounded-md px-2 py-1 text-left text-sm transition-colors hover:bg-theme-hover/60';

package/src/components/issues/index.ts

@@ -2,8 +2,8 @@
 // module-internal and don't collide at the top-level barrel with the Checks
 // queue's identically-named helpers when both land. Issue-prefixed public
 // names are safe to surface.
-export { IssuesView } from './IssuesView';
-export type { IssuesViewProps } from './IssuesView';
+export { IssueRow, IssuesView } from './IssuesView';
+export type { IssueRowProps, IssueRowSlotContext, IssuesViewProps } from './IssuesView';
 export {
   ISSUE_SEVERITIES,
   ISSUE_SEVERITY_RANK,

package/src/components/issues/issues.test.ts

@@ -28,6 +28,13 @@ describe('compareIssues', () => {
     expect([older, newer].sort(compareIssues).map((i) => i.id)).toEqual(['n', 'o'])
   })
 
+  it('orders direct startup blockers before generic problem rows at same severity', () => {
+    const generic = mk({ id: 'generic', source: 'problem', first_seen: '2026-05-01T00:00:00Z' })
+    const blocker = mk({ id: 'blocker', source: 'scheduling', first_seen: '2026-01-01T00:00:00Z' })
+    const missing = mk({ id: 'missing', source: 'missing_ref', first_seen: '2026-03-01T00:00:00Z' })
+    expect([generic, blocker, missing].sort(compareIssues).map((i) => i.id)).toEqual(['blocker', 'missing', 'generic'])
+  })
+
   it('does NOT reshuffle same-severity rows when only last_seen changes (anti-churn)', () => {
     // Two same-severity rows, same first_seen — order is the deterministic name tiebreak.
     const a = mk({ id: 'id-a', name: 'a', first_seen: '2026-01-01T00:00:00Z', last_seen: '2026-05-01T00:00:00Z' })

package/src/components/issues/types.ts

@@ -24,6 +24,13 @@ export const ISSUE_SEVERITY_RANK: Record<IssueSeverity, number> = {
   warning: 1,
 };
 
+const ISSUE_SOURCE_RANK: Record<string, number> = {
+  scheduling: 4,
+  missing_ref: 3,
+  condition: 2,
+  problem: 1,
+};
+
 export function isIssueSeverity(s: string): s is IssueSeverity {
   return s === 'critical' || s === 'warning';
 }
@@ -209,15 +216,18 @@ export function memberRef(issue: Issue, member: IssueResourceRef): IssueResource
 
 /**
  * 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.
+ * it can be unit-tested). Severity first (critical before warning), then
+ * direct-blocker source priority, 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 sr = (ISSUE_SOURCE_RANK[b.source] ?? 0) - (ISSUE_SOURCE_RANK[a.source] ?? 0);
+  if (sr !== 0) return sr;
   const fa = a.first_seen ?? '';
   const fb = b.first_seen ?? '';
   if (fa !== fb) return fb.localeCompare(fa);

package/src/components/shared/ResourceActionsBar.tsx

@@ -23,7 +23,7 @@ import { ForceDeleteConfirmDialog, type CascadeDependent } from '../ui/ForceDele
 import { ConfirmDialog } from '../ui/ConfirmDialog'
 import { DialogPortal } from '../ui/DialogPortal'
 import type { SelectedResource, WorkloadRevision } from '../../types'
-import { formatKindName } from '../ui/drawer-components'
+import { displayKindName } from '../ui/drawer-components'
 import { getDefaultContainerName } from '../resources/resource-utils'
 
 // ============================================================================
@@ -517,20 +517,20 @@ export function ResourceActionsBar({
           <Tooltip
             content={
               onCompareTo && onCompareAcrossClusters
-                ? `Compare ${formatKindName(resource.kind).toLowerCase()}`
+                ? `Compare ${displayKindName(resource.kind, data?.kind).toLowerCase()}`
                 : onCompareAcrossClusters
                   ? `Compare across clusters`
-                  : `Compare to another ${formatKindName(resource.kind).toLowerCase()}`
+                  : `Compare to another ${displayKindName(resource.kind, data?.kind).toLowerCase()}`
             }
           >
             <button
               onClick={onCompareTo ?? onCompareAcrossClusters}
               aria-label={
                 onCompareTo && onCompareAcrossClusters
-                  ? `Compare ${formatKindName(resource.kind).toLowerCase()}`
+                  ? `Compare ${displayKindName(resource.kind, data?.kind).toLowerCase()}`
                   : onCompareAcrossClusters
                     ? `Compare across clusters`
-                    : `Compare to another ${formatKindName(resource.kind).toLowerCase()}`
+                    : `Compare to another ${displayKindName(resource.kind, data?.kind).toLowerCase()}`
               }
               className="p-1.5 text-theme-text-secondary border border-theme-border-light rounded-lg hover:text-theme-text-primary hover:bg-theme-elevated transition-colors flex items-center"
             >
@@ -577,7 +577,7 @@ export function ResourceActionsBar({
         onClose={() => setShowDeleteConfirm(false)}
         onConfirm={handleDeleteConfirm}
         resourceName={resource.name}
-        resourceKind={formatKindName(resource.kind)}
+        resourceKind={displayKindName(resource.kind, data?.kind)}
         namespaceName={resource.namespace}
         isLoading={isDeleting ?? false}
         cascadeDependents={cascadeDependents}

package/src/components/ui/ForceDeleteConfirmDialog.tsx

@@ -1,7 +1,6 @@
 import { useState, useMemo } from 'react'
 import { ChevronDown, ChevronRight, Loader2 } from 'lucide-react'
 import { ConfirmDialog } from './ConfirmDialog'
-import { formatKindName } from './drawer-components'
 import { pluralize } from '../../utils/pluralize'
 
 export interface CascadeDependent {
@@ -115,7 +114,7 @@ function CascadeDependentsList({ dependents }: { dependents: CascadeDependent[]
         <div className="px-3 pb-2.5 space-y-1.5">
           {grouped.map(([kind, names]) => (
             <div key={kind} className="text-xs">
-              <span className="font-medium text-theme-text-primary">{formatKindName(kind)}</span>
+              <span className="font-medium text-theme-text-primary">{kind}</span>
               <span className="text-theme-text-tertiary ml-1">({names.length})</span>
               <div className="ml-3 mt-0.5 text-theme-text-secondary font-mono break-all">
                 {names.slice(0, MAX_NAMES_PER_KIND).join(', ')}

package/src/components/ui/drawer-components.tsx

@@ -701,6 +701,14 @@ export function formatKindName(kind: string): string {
   return kind
 }
 
+// Resolve the display label for a kind chip. The fetched resource's `dataKind`
+// is the authoritative PascalCase kind and is correct for every CRD; prefer it.
+// Before data loads, fall back to deriving from the URL plural — which is only
+// reliable for the core kinds in formatKindName's map.
+export function displayKindName(urlPlural: string, dataKind?: string): string {
+  return dataKind || formatKindName(urlPlural)
+}
+
 // Type for copy handler
 export type CopyHandler = (text: string, key: string) => void
 

package/src/components/workload/WorkloadView.tsx

@@ -51,7 +51,7 @@ import { EditableYamlView, SaveSuccessAnimation } from '../shared/EditableYamlVi
 import { ResourceRendererDispatch, getResourceStatus, type RendererOverrides } from '../shared/ResourceRendererDispatch'
 import { DetailShell, type DetailShellTab } from '../shared/DetailShell'
 import { HelmManagedByChip, ManagedByChip, type HelmOwnerRef } from '../shared/ManagedByChip'
-import { getKindColorOutline, formatKindName } from '../ui/drawer-components'
+import { getKindColorOutline, displayKindName } from '../ui/drawer-components'
 import { midTruncate } from '../../utils/format'
 
 export type WorkloadTabType = 'overview' | 'topology' | 'timeline' | 'logs' | 'metrics' | 'yaml'
@@ -555,7 +555,7 @@ export function WorkloadView({
           <div className="flex items-center justify-between px-4 pt-3 pb-2">
             <div className="flex items-center gap-2 flex-wrap">
               <span className={clsx('badge', getKindColorOutline(apiKind))}>
-                {formatKindName(apiKind)}
+                {displayKindName(apiKind, resource?.kind)}
               </span>
               {status && (
                 <span className={clsx('badge', status.color)}>
@@ -706,7 +706,7 @@ export function WorkloadView({
           </div>
           <div className="flex items-center gap-3 text-sm text-theme-text-secondary">
             <span className={clsx('badge', getKindColorOutline(apiKind))}>
-              {formatKindName(apiKind)}
+              {displayKindName(apiKind, resource?.kind)}
             </span>
             {status && (
               <span className={clsx('badge', status.color)}>
@@ -860,7 +860,7 @@ export function WorkloadView({
                       )}
                     >
                       <span className="truncate text-xs font-medium text-theme-text-primary">{midTruncate(o.name, 26)}</span>
-                      <span className="text-[10px] uppercase tracking-wide text-theme-text-tertiary">{formatKindName(o.kind)}</span>
+                      <span className="text-[10px] uppercase tracking-wide text-theme-text-tertiary">{o.kind}</span>
                     </button>
                   )
                 })}