@skyhook-io/k8s-ui 1.8.9 → 1.8.10

package/src/components/issues/IssuesView.tsx

@@ -1,12 +1,15 @@
 import { useEffect, useMemo, useState, type ComponentType, type ReactNode } from 'react';
-import { ChevronRight, CircleCheck, Clock, ExternalLink } from 'lucide-react';
-import { ClusterName, EmptyState } from '../ui';
+import { AlertOctagon, AlertTriangle, ArrowRight, ChevronRight, CircleCheck, Clock, ExternalLink, Layers, Terminal, Workflow } from 'lucide-react';
+import { CardBody, CardSection, ClusterName, EmptyState, KIND_CHIP_CLASS, TerminalBlock } from '../ui';
 import { formatCompactAge, formatRelativeAgeTime } from '../../utils/format';
 import { diagnosticRoleLabel, diagnosticFactLabel, confidenceTitle, incidentParentLabel } from './diagnostic';
 import {
   ISSUE_SEVERITY_BADGE_CLASS,
+  ISSUE_SEVERITY_HEADER_BAND_CLASS,
   ISSUE_SEVERITY_LABEL,
   ISSUE_SEVERITY_RAIL_CLASS,
+  ISSUE_SEVERITY_SOLID_CLASS,
+  ISSUE_SEVERITY_TEXT_CLASS,
   categoryLabel,
   groupBadgeClass,
   groupLabel,
@@ -19,8 +22,25 @@ import {
   type Issue,
   type IssueAffected,
   type IssueResourceRef,
+  type IssueSeverity,
 } from './types';
 
+// Leading severity glyph — the at-a-glance severity cue on every row: critical =
+// octagon (stop), warning = triangle.
+const ISSUE_SEVERITY_ICON: Record<IssueSeverity, ComponentType<{ className?: string }>> = {
+  critical: AlertOctagon,
+  warning: AlertTriangle,
+};
+
+// An out-of-contract severity the backend might emit is coerced to this tier
+// once, up front (normalizeIssueSeverity), so the icon AND every color map
+// (text/rail/band/pill) resolve together — a raw miss would crash the icon and
+// silently drop the tint everywhere else.
+const ISSUE_SEVERITY_FALLBACK: IssueSeverity = 'warning';
+// Object.hasOwn (not `in`) so inherited keys like "toString" don't slip past.
+const normalizeIssueSeverity = (s: IssueSeverity): IssueSeverity =>
+  Object.hasOwn(ISSUE_SEVERITY_ICON, s) ? s : ISSUE_SEVERITY_FALLBACK;
+
 export interface IssuesViewProps {
   /** Grouped live issues — one row per subject+category. Typically flattened
    *  across the fleet by the host (the hub) or a single cluster (OSS). */
@@ -132,6 +152,8 @@ export function IssueRow({
   const { headline } = issueMessageParts(issue);
   const [renderDetails, setRenderDetails] = useState(open);
   const Container = as;
+  const severity = normalizeIssueSeverity(issue.severity);
+  const SeverityIcon = ISSUE_SEVERITY_ICON[severity];
   const slotCtx = { issue, open };
 
   useEffect(() => {
@@ -148,15 +170,23 @@ export function IssueRow({
   return (
     <Container
       className={[
-        'overflow-hidden rounded-xl border border-theme-border bg-theme-surface shadow-theme-sm',
+        'overflow-hidden rounded-xl border bg-theme-surface transition-[border-color,box-shadow] duration-200',
+        // The open card lifts via elevation — heavier shadow + a bright
+        // emphasis edge that clearly separates it from sibling cards. Severity
+        // stays rationed to the band + pill; separation is depth, not more color.
+        // ring-1 widens the edge to 2px without the layout shift a border-2
+        // swap would cause on expand.
+        open ? 'border-[var(--border-emphasis)] ring-1 ring-[var(--border-emphasis)] shadow-theme-md' : 'border-theme-border 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
-          open/closed indicator, not a separate action. Deep-links live in the
-          expanded body (a link nested in a button would be invalid). */}
+      {/* The whole header is the single toggle target. The leading severity
+          icon is the at-a-glance cue; a trailing chevron shows open/closed.
+          Deep-links live in the expanded body (a link nested in a button would
+          be invalid). Collapsed: neutral row + rail. Expanded: severity-tinted
+          band + solid pill — the tint is a focus signal, not per-row alarm. */}
       <div
         role="button"
         tabIndex={0}
@@ -169,28 +199,32 @@ export function IssueRow({
             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 ${ISSUE_SEVERITY_RAIL_CLASS[issue.severity]}`}
+        className={`group flex cursor-pointer items-center gap-3 border-l-[3px] py-3 pl-3 pr-4 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-radar-accent)]/40 ${open ? ISSUE_SEVERITY_HEADER_BAND_CLASS[severity] : ISSUE_SEVERITY_RAIL_CLASS[severity]}`}
       >
-        <ChevronRight className={`h-4 w-4 shrink-0 text-theme-text-tertiary transition-transform duration-200 ${open ? 'rotate-90' : ''}`} />
+        <SeverityIcon className={`h-[18px] w-[18px] shrink-0 ${ISSUE_SEVERITY_TEXT_CLASS[severity]}`} aria-hidden />
 
         <div className="flex min-w-0 flex-1 flex-col gap-1">
           <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>
+            <span className={`shrink-0 self-center ${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
-                badge. Full text (plus crash context) stays in the body. */}
+            {/* The detector reason rides the title row while COLLAPSED so the
+                key triage signal shows without expanding. When open, the full
+                cause lives in the WHAT'S WRONG section below, so it fades out
+                here (stays mounted — it's the flex-1 filler, so unmounting
+                wouldn't reflow anything, but fading avoids the pop). */}
             {issue.reason ? (
-              <span className="min-w-0 flex-1 truncate text-xs text-theme-text-tertiary">
+              <span
+                aria-hidden={open || undefined}
+                className={`min-w-0 flex-1 truncate text-xs text-theme-text-tertiary transition-opacity duration-200 ${open ? 'opacity-0' : 'opacity-100'}`}
+              >
                 <span className="font-medium text-theme-text-secondary">{issue.reason}</span>
                 {headline ? <span> — {headline}</span> : null}
               </span>
             ) : null}
           </div>
           <div className="flex min-w-0 items-center gap-1.5 text-xs text-theme-text-tertiary">
-            <span className="shrink-0 font-mono uppercase tracking-wide">{issue.kind}</span>
+            <span className={KIND_CHIP_CLASS}>{issue.kind}</span>
             <span className="min-w-0 truncate font-medium text-theme-text-secondary">
               {issue.namespace ? `${issue.namespace} / ` : ''}
               {issue.name}
@@ -224,27 +258,28 @@ export function IssueRow({
           </div>
         </div>
 
-        {/* Age chip: chronic-vs-acute signal. When issue_timing is
-            started_at_resource_creation, swap the raw age for "since deploy" —
-            the raw age is misleading (it reads as urgency, but this issue has
-            been present since the resource was first created). */}
-        {issue.first_seen ? (
-          <time
-            dateTime={issue.first_seen}
-            title={ageTitle(issue)}
-            className="flex shrink-0 items-center gap-1 text-xs tabular-nums text-theme-text-tertiary"
-          >
-            <Clock className="h-3 w-3" aria-hidden />
-            {issue.issue_timing === 'started_at_resource_creation'
-              ? 'since deploy'
-              : formatCompactAge(issue.first_seen)}
-          </time>
-        ) : null}
-
-        <span className={`badge-sm shrink-0 text-[10px] font-semibold ${ISSUE_SEVERITY_BADGE_CLASS[issue.severity]}`}>
-          {ISSUE_SEVERITY_LABEL[issue.severity]}
-        </span>
-        {renderActions?.(slotCtx)}
+        {/* Right cluster — severity pill THEN age, vertically centered as a group. */}
+        <div className="flex shrink-0 items-center gap-3">
+          <span className={`badge-sm shrink-0 px-2.5 py-0.5 text-xs font-semibold ${open ? ISSUE_SEVERITY_SOLID_CLASS[severity] : ISSUE_SEVERITY_BADGE_CLASS[severity]}`}>
+            {ISSUE_SEVERITY_LABEL[severity]}
+          </span>
+          {/* Age chip: keep recency visible; the deployment-start signal rides as a secondary tag. */}
+          {issue.first_seen ? (
+            <time
+              dateTime={issue.first_seen}
+              title={ageTitle(issue)}
+              className="flex shrink-0 items-center gap-1 text-xs tabular-nums text-theme-text-tertiary"
+            >
+              <Clock className="h-3 w-3" aria-hidden />
+              {formatCompactAge(issue.first_seen)}
+              {issue.issue_timing === 'started_at_resource_creation' ? (
+                <span className="badge-sm ml-1 text-[10px] text-theme-text-secondary">since deploy</span>
+              ) : null}
+            </time>
+          ) : null}
+          {renderActions?.(slotCtx)}
+          <ChevronRight className={`h-4 w-4 shrink-0 text-theme-text-tertiary transition-transform duration-200 ${open ? 'rotate-90' : ''}`} />
+        </div>
       </div>
 
       {renderDetails ? (
@@ -257,8 +292,10 @@ export function IssueRow({
           }}
         >
           <div className="overflow-hidden">
-            <div className="border-t border-theme-border bg-theme-base/40 px-4 py-4 pl-11">
-              <div className="flex flex-col gap-4">
+            {/* Body sits on the card surface (not a recessed grey panel) so its
+                text keeps enough contrast. */}
+            <div className="border-t border-theme-border bg-theme-surface py-4 pl-6 pr-4">
+              <div className="flex flex-col divide-y divide-theme-border/70 [&>*]:py-4 [&>*:first-child]:pt-0 [&>*:last-child]:pb-0">
                 <Diagnosis issue={issue} />
                 {issue.incident_parent ? (
                   <section className="flex flex-col gap-1">
@@ -276,9 +313,7 @@ export function IssueRow({
                   </section>
                 ) : null}
                 <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} ResourceLinkIcon={ResourceLinkIcon} />
-                </div>
+                <AffectedResources issue={issue} resourceHref={resourceHref} onResourceClick={onResourceClick} ResourceLinkIcon={ResourceLinkIcon} />
               </div>
             </div>
           </div>
@@ -288,8 +323,9 @@ export function IssueRow({
   );
 }
 
-// What's-wrong block: the specific detector reason + message, plus pod crash
-// context when present (the "chronic vs acute" signal).
+// Diagnosis: WHAT'S WRONG (amber) → NEXT STEP (emerald) → RAW ERROR (monochrome
+// terminal block). Status/timing facts share one muted meta line under the
+// diagnosis so the body reads as three beats rather than a stack of one-liners.
 function Diagnosis({ issue }: { issue: Issue }) {
   const crash =
     issue.restart_count || issue.last_terminated_reason
@@ -298,71 +334,85 @@ function Diagnosis({ issue }: { issue: Issue }) {
           .join(' · ')
       : null;
   const { headline, detail } = issueMessageParts(issue);
-  // When the issue carries a parsed plain-English cause, lead with it. The raw
-  // detector message is kept below as de-emphasized detail.
+  // Raw detector text → terminal block. Two independent sources: the explicit
+  // raw_message (or, for a derived cause, the original message it came from) and
+  // the precise kubelet/containerd `detail` a short image-pull headline replaced
+  // — both surface when distinct, so setting raw_message never hides the CRI
+  // detail. Each is kept only when it adds something the prose above doesn't
+  // already show, compared against what's actually rendered (the cause when
+  // present, else headline+detail) rather than a string that may never appear.
   const visibleMessage = [headline, detail].filter(Boolean).join(' ');
-  const rawMessage = issue.raw_message ?? (issue.cause ? issue.message ?? '' : '');
-  const shouldShowRawMessage = issue.cause
-    ? Boolean(rawMessage)
-    : Boolean(issue.raw_message && issue.raw_message !== visibleMessage);
+  const shownText = issue.cause ?? visibleMessage;
+  const rawError = [
+    ...new Set(
+      [issue.raw_message ?? (issue.cause ? issue.message : undefined), detail].filter(
+        (s): s is string => !!s && s !== shownText,
+      ),
+    ),
+  ].join('\n');
+
+  // One muted line — stuck/retry · crash · timing · change. A retrying-but-not-
+  // yet-stuck operation leads with "Retrying"; once it's declared stuck, "Stuck"
+  // takes over.
+  const meta: string[] = [];
+  if (issue.stuck) meta.push('Stuck');
+  else if (issue.operation_retry_count) meta.push('Retrying');
+  if (issue.operation_retry_count) meta.push(`retried ${issue.operation_retry_count}×`);
+  if (crash) meta.push(crash);
+  if (issue.first_seen) {
+    meta.push(
+      issue.issue_timing === 'started_at_resource_creation'
+        ? 'present since deployment'
+        : issue.issue_timing === 'started_after_resource_was_healthy'
+          ? `started ${formatRelativeAgeTime(issue.first_seen)} · was previously healthy`
+          : `started ${formatRelativeAgeTime(issue.first_seen)}`,
+    );
+    if (issue.last_seen && issue.issue_timing !== 'started_at_resource_creation') meta.push(`last seen ${formatRelativeAgeTime(issue.last_seen)}`);
+  }
+  if (issue.change_context) meta.push(changeContextText(issue.change_context));
+
+  const hasNextStep = !!issue.action || (issue.remediation_kind === 'create-namespace' && !!issue.remediation_target);
+
   return (
-    <section className="flex flex-col gap-1">
-      <h4 className="text-[11px] font-semibold uppercase tracking-wide text-theme-text-tertiary">What's wrong</h4>
-      {issue.cause ? (
-        <p className="text-sm leading-relaxed text-theme-text-primary">{issue.cause}</p>
-      ) : (
-        <p className="text-sm leading-relaxed text-theme-text-primary">
-          <span className="font-medium">{issue.reason}</span>
-          {headline ? <span className="text-theme-text-secondary"> — {headline}</span> : null}
-        </p>
-      )}
-      {/* For non-cause issues whose message was normalized to a short headline
-          (e.g. image-pull), keep the precise raw kubelet/containerd detail. The
-          cause branch shows its own raw block below. */}
-      {!issue.cause && detail ? (
-        <p className="break-words font-mono text-xs leading-relaxed text-theme-text-tertiary">{detail}</p>
-      ) : null}
-      {issue.action ? (
-        <p className="text-sm leading-relaxed text-theme-text-secondary">
-          <span className="font-medium text-theme-text-primary">Next step: </span>
-          {issue.action}
-        </p>
-      ) : null}
-      {issue.remediation_kind === 'create-namespace' && issue.remediation_target ? (
-        <p className="text-xs text-theme-text-tertiary">
-          Suggested fix: create namespace <code className="rounded bg-theme-elevated px-1 font-mono">{issue.remediation_target}</code> — apply it from the GitOps detail page.
-        </p>
-      ) : null}
-      {issue.stuck || issue.operation_retry_count ? (
-        <p className="text-xs text-theme-text-tertiary tabular-nums">
-          {issue.stuck ? 'Stuck' : 'Retrying'}
-          {issue.operation_retry_count ? ` · retried ${issue.operation_retry_count}×` : ''}
-        </p>
-      ) : null}
-      {/* Raw detector message, de-emphasized so precise controller/kubelet text
-          remains available without leading the diagnosis. */}
-      {shouldShowRawMessage ? (
-        <p className="break-words font-mono text-[11px] leading-relaxed text-theme-text-tertiary">{rawMessage}</p>
-      ) : null}
-      {crash ? <p className="text-xs text-theme-text-tertiary tabular-nums">{crash}</p> : null}
-      {issue.change_context ? (
-        <p className="text-xs text-theme-text-tertiary">
-          {changeContextText(issue.change_context)}
-        </p>
+    <div className="flex flex-col divide-y divide-theme-border/70 [&>*]:py-4 [&>*:first-child]:pt-0 [&>*:last-child]:pb-0">
+      {/* When a parsed cause replaces the detector text, the terse reason code
+          (CrashLoopBackOff, FailedMount…) rides the eyebrow — it's the greppable
+          identifier operators anchor on, and the collapsed header drops it while
+          open. The non-cause branch already leads with it in the prose. */}
+      <CardSection
+        icon={AlertTriangle}
+        label="What's wrong"
+        tone="warn"
+        labelExtra={issue.cause && issue.reason ? `· ${issue.reason}` : undefined}
+      >
+        {issue.cause ? (
+          <p className="text-sm leading-relaxed text-theme-text-primary">{issue.cause}</p>
+        ) : (
+          <p className="text-sm leading-relaxed text-theme-text-primary">
+            <span className="font-medium">{issue.reason}</span>
+            {headline ? <span className="text-theme-text-secondary"> — {headline}</span> : null}
+          </p>
+        )}
+        {meta.length > 0 ? <p className="text-xs leading-relaxed text-theme-text-tertiary tabular-nums">{meta.join(' · ')}</p> : null}
+      </CardSection>
+
+      {hasNextStep ? (
+        <CardSection icon={ArrowRight} label="Next step" tone="fix">
+          {issue.action ? <CardBody>{issue.action}</CardBody> : null}
+          {issue.remediation_kind === 'create-namespace' && issue.remediation_target ? (
+            <p className="text-xs text-theme-text-tertiary">
+              Suggested fix: create namespace <code className="inline-code">{issue.remediation_target}</code> — apply it from the GitOps detail page.
+            </p>
+          ) : null}
+        </CardSection>
       ) : null}
-      {issue.first_seen ? (
-        <p className="text-xs text-theme-text-tertiary tabular-nums">
-          {issue.issue_timing === 'started_at_resource_creation'
-            ? 'Present since deployment'
-            : issue.issue_timing === 'started_after_resource_was_healthy'
-              ? `Started ${formatRelativeAgeTime(issue.first_seen)} · was previously healthy`
-              : `Started ${formatRelativeAgeTime(issue.first_seen)}`}
-          {issue.last_seen && issue.issue_timing !== 'started_at_resource_creation'
-            ? ` · last seen ${formatRelativeAgeTime(issue.last_seen)}`
-            : ''}
-        </p>
+
+      {rawError ? (
+        <CardSection icon={Terminal} label="Raw error">
+          <TerminalBlock>{rawError}</TerminalBlock>
+        </CardSection>
       ) : null}
-    </section>
+    </div>
   );
 }
 
@@ -387,11 +437,11 @@ function DiagnosticContext({
   if (!ctx || facts.length === 0) return null;
 
   return (
-    <section className="flex flex-col gap-2">
-      <div className="flex items-center gap-2">
-        <h4 className="text-[11px] font-semibold uppercase tracking-wide text-theme-text-tertiary">Context</h4>
-        {ctx.role ? <span className="badge-sm text-[10px] text-theme-text-secondary">{diagnosticRoleLabel(ctx.role)}</span> : null}
-      </div>
+    <CardSection
+      icon={Workflow}
+      label="Context"
+      labelExtra={ctx.role ? diagnosticRoleLabel(ctx.role) : undefined}
+    >
       <ul className="flex flex-col gap-2">
         {facts.map((fact, idx) => (
           <li key={`${fact.type}-${idx}`} className="flex flex-col gap-1.5 rounded-md border border-theme-border/70 px-2.5 py-2">
@@ -438,7 +488,7 @@ function DiagnosticContext({
           </li>
         ))}
       </ul>
-    </section>
+    </CardSection>
   );
 }
 
@@ -472,18 +522,15 @@ function AffectedResources({
   // grouping.go); fall back to the inline member count, not +1.
   const total = issue.count ?? members.length;
   return (
-    <section className="flex flex-col gap-1.5">
+    <section className="flex flex-col gap-3">
       {/* The subject (the grouped thing — e.g. the Deployment) is always the
           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} ResourceLinkIcon={ResourceLinkIcon} />
+        <ResourceLine label="Subject" compact refForLink={subjectRef(issue)} resourceHref={resourceHref} onResourceClick={onResourceClick} ResourceLinkIcon={ResourceLinkIcon} />
       </ul>
       {members.length > 0 && (
-        <>
-          <h4 className="mt-1.5 text-[11px] font-semibold uppercase tracking-wide text-theme-text-tertiary">
-            Affected resources <span className="tabular-nums">({total})</span>
-          </h4>
+        <CardSection icon={Layers} label="Affected resources" labelExtra={`· ${total}`}>
           <ul className="flex flex-col gap-px">
             {members.map((m, i) => (
               <ResourceLine
@@ -496,11 +543,11 @@ function AffectedResources({
             ))}
           </ul>
           {issue.members_truncated && (
-            <p className="mt-0.5 text-xs text-theme-text-tertiary">
+            <p className="text-xs text-theme-text-tertiary">
               Showing {members.length} of {total} — open the subject to see the rest.
             </p>
           )}
-        </>
+        </CardSection>
       )}
     </section>
   );
@@ -513,6 +560,7 @@ function ResourceLine({
   resourceHref,
   onResourceClick,
   ResourceLinkIcon,
+  compact,
 }: {
   label?: string;
   refForLink: IssueResourceRef;
@@ -520,14 +568,23 @@ function ResourceLine({
   resourceHref?: (ref: IssueResourceRef) => string;
   onResourceClick?: (ref: IssueResourceRef) => void;
   ResourceLinkIcon: ComponentType<{ className?: string }>;
+  // Footer variant (the Subject row): renders the kind as a grey mono chip and
+  // a slightly bolder name, distinguishing the subject from the affected-members
+  // list below it.
+  compact?: boolean;
 }) {
   const r = refForLink;
   const linkable = !!(onResourceClick || resourceHref);
   const body = (
     <>
-      {label ? <span className="shrink-0 text-[10px] font-semibold uppercase tracking-wide text-theme-text-tertiary">{label}</span> : null}
-      <span className="shrink-0 font-mono text-[11px] uppercase tracking-wide text-theme-text-tertiary">{r.kind}</span>
-      <span className={`min-w-0 truncate font-medium ${linkable ? 'text-[var(--color-radar-accent)]' : 'text-theme-text-primary'}`}>
+      {label ? <span className="shrink-0 text-[11px] font-semibold uppercase tracking-[0.06em] text-theme-text-tertiary">{label}</span> : null}
+      {/* Footer (compact): the kind is a grey mono chip; member rows keep plain mono. */}
+      {compact ? (
+        <span className={KIND_CHIP_CLASS}>{r.kind}</span>
+      ) : (
+        <span className="shrink-0 font-mono text-[11px] uppercase tracking-wide text-theme-text-tertiary">{r.kind}</span>
+      )}
+      <span className={`min-w-0 truncate text-sm ${linkable ? `${compact ? 'font-semibold' : 'font-medium'} text-[var(--color-radar-accent)]` : 'font-medium text-theme-text-primary'}`}>
         {r.namespace ? `${r.namespace} / ` : ''}
         {r.name}
       </span>
@@ -537,7 +594,13 @@ function ResourceLine({
       {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';
+  // compact = Subject row; default = the affected-members list. Both get the
+  // padded, rounded hover hit-box so the Subject reads as clickable like the
+  // members below it. items-baseline so the label + kind chip sit on the same
+  // baseline as the larger resource name.
+  const cls = compact
+    ? 'group/r flex w-full items-baseline gap-2 rounded-md px-2 py-1 text-left transition-colors hover:bg-theme-hover/60'
+    : 'group/r flex w-full items-baseline gap-2 rounded-md px-2 py-1 text-left text-sm transition-colors hover:bg-theme-hover/60';
   return (
     <li>
       {onResourceClick ? (
@@ -549,7 +612,7 @@ function ResourceLine({
           {body}
         </a>
       ) : (
-        <span className="flex items-center gap-2 rounded-md px-2 py-1 text-sm">{body}</span>
+        <span className={compact ? 'flex items-baseline gap-2 rounded-md px-2 py-1' : 'flex items-baseline gap-2 rounded-md px-2 py-1 text-sm'}>{body}</span>
       )}
     </li>
   );

package/src/components/issues/ResourceIssuesSection.test.tsx

@@ -0,0 +1,39 @@
+import { describe, expect, it } from 'vitest'
+import { renderToString } from 'react-dom/server'
+import { ResourceIssuesSection } from './ResourceIssuesSection'
+import type { Issue } from './types'
+
+const issue: Issue = {
+  id: 'pvc-root',
+  severity: 'critical',
+  source: 'missing_ref',
+  category: 'pvc_pending',
+  category_group: 'storage',
+  grouping_scope: 'pvc',
+  kind: 'PersistentVolumeClaim',
+  namespace: 'demo',
+  name: 'data',
+  reason: 'StorageClassMissing',
+  cause: 'PVC demo/data references a StorageClass that does not exist.',
+  diagnostic_context: {
+    role: 'candidate',
+    facts: [
+      {
+        type: 'pvc_blast_radius',
+        confidence: 'high',
+        message: 'Blocks pods that mount this claim.',
+      },
+    ],
+  },
+}
+
+describe('ResourceIssuesSection', () => {
+  it('keeps drawer context facts but omits the role badge', () => {
+    const html = renderToString(<ResourceIssuesSection issues={[issue]} />)
+
+    expect(html).toContain('Context')
+    expect(html).toContain('Blocked pods')
+    expect(html).toContain('high<!-- --> confidence')
+    expect(html).not.toContain('Possible cause')
+  })
+})

package/src/components/issues/ResourceIssuesSection.tsx

@@ -3,7 +3,7 @@ import { Section } from '../ui/drawer-components'
 import { Badge } from '../ui/Badge'
 import type { Issue, IssueResourceRef } from './types'
 import { categoryLabel } from './severity'
-import { diagnosticRoleLabel, diagnosticFactLabel, confidenceTitle } from './diagnostic'
+import { diagnosticFactLabel, confidenceTitle, incidentParentLabel } from './diagnostic'
 
 /**
  * ResourceIssuesSection — the compact "Operational Issues" block for the resource
@@ -14,7 +14,7 @@ import { diagnosticRoleLabel, diagnosticFactLabel, confidenceTitle } from './dia
  *
  * Header mirrors the queue: the plain `categoryLabel` is the operator-facing
  * headline and the raw `reason` rides alongside as a muted signal (so the K8s
- * jargon is available but not the lead). Body is intentionally just the plain
+ * jargon is available but not the lead). Body is primarily the plain
  * `cause` (which names the offending object) + the `Next step` — the diagnosis
  * and the fix. The raw `message`/evidence stays in the queue + MCP where the
  * locator detail is wanted; inline it mostly restated the cause or the category,
@@ -34,6 +34,7 @@ export function ResourceIssuesSection({
     <Section title={`Operational Issues (${issues.length})`} icon={AlertTriangle} defaultExpanded>
       <div className="space-y-3">
         {issues.map((issue) => {
+          const parent = issue.incident_parent
           return (
             <div key={issue.id} className="card-inner">
               <div className="mb-1 flex min-w-0 items-baseline gap-2">
@@ -65,6 +66,24 @@ export function ResourceIssuesSection({
                   <code className="rounded bg-theme-elevated px-1 font-mono">{issue.remediation_target}</code> — apply it from the GitOps detail page.
                 </p>
               ) : null}
+              {parent ? (
+                <p className="mt-1 text-xs text-theme-text-tertiary">
+                  {incidentParentLabel(parent.fact_type, parent.confidence)}:{' '}
+                  {onResourceClick ? (
+                    <button
+                      type="button"
+                      onClick={() => onResourceClick(parent.ref)}
+                      className="group inline-flex items-center gap-1 text-left font-mono hover:text-theme-text-secondary"
+                      title={confidenceTitle(parent.confidence ?? '')}
+                    >
+                      {parent.ref.kind} / {parent.ref.name}
+                      <ExternalLink className="h-3 w-3 opacity-0 group-hover:opacity-100" />
+                    </button>
+                  ) : (
+                    <span className="font-mono">{parent.ref.kind} / {parent.ref.name}</span>
+                  )}
+                </p>
+              ) : null}
               <CausalContext issue={issue} onResourceClick={onResourceClick} />
             </div>
           )
@@ -89,7 +108,6 @@ function CausalContext({ issue, onResourceClick }: { issue: Issue; onResourceCli
     <div className="mt-2 border-t border-theme-border/60 pt-2">
       <div className="mb-1 flex items-center gap-2">
         <span className="text-[10px] font-semibold uppercase tracking-wide text-theme-text-tertiary">Context</span>
-        {ctx.role ? <span className="badge-sm text-[10px] text-theme-text-secondary">{diagnosticRoleLabel(ctx.role)}</span> : null}
       </div>
       <ul className="space-y-1.5">
         {links.map((fact, idx) => (

package/src/components/issues/index.ts

@@ -16,10 +16,8 @@ export type { Issue, IssueSeverity, IssueAffected, IssueResourceRef, IssueDiagno
 export {
   ISSUE_SEVERITY_LABEL,
   ISSUE_SEVERITY_BADGE_CLASS,
-  ISSUE_SEVERITY_FILL_CLASS,
   ISSUE_SEVERITY_TEXT_CLASS,
   ISSUE_SEVERITY_RAIL_CLASS,
-  groupBadgeClass,
   categoryLabel,
   groupLabel,
 } from './severity';