@skyhook-io/k8s-ui 1.8.9 → 1.8.11

package/src/components/issues/IssuesView.tsx

@@ -1,12 +1,17 @@
 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 { Tooltip } from '../ui/Tooltip';
 import { formatCompactAge, formatRelativeAgeTime } from '../../utils/format';
 import { diagnosticRoleLabel, diagnosticFactLabel, confidenceTitle, incidentParentLabel } from './diagnostic';
+import { issueTiming } from './issue-timing';
 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 +24,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). */
@@ -40,12 +62,15 @@ export interface IssuesViewProps {
   clusterLabel?: (issue: Issue) => string | undefined;
   /** Empty-state CTA shown when there's no data. */
   emptyAction?: ReactNode;
+  /** Per-row trailing action, rendered after the severity badge — e.g. the
+   *  "Diagnose with AI" button in OSS. Omit to render no per-row action. */
+  renderActions?: (ctx: IssueRowSlotContext) => ReactNode;
 }
 
 // The queue list. Filtering/faceting is the host page's job (FleetPageShell on
 // the hub, a thin wrapper in OSS) — this renders the rows + the healthy /
 // no-data terminal states only.
-export function IssuesView({ issues, anyData, resourceHref, onResourceClick, clusterLabel, emptyAction }: IssuesViewProps) {
+export function IssuesView({ issues, anyData, resourceHref, onResourceClick, clusterLabel, emptyAction, renderActions }: IssuesViewProps) {
   // Single-open accordion: opening a row collapses the previous one, so the
   // queue stays scannable and you never lose your place to a wall of expansions.
   const [openId, setOpenId] = useState<string | null>(null);
@@ -84,6 +109,7 @@ export function IssuesView({ issues, anyData, resourceHref, onResourceClick, clu
             onToggle={() => setOpenId((cur) => (cur === rowKey ? null : rowKey))}
             resourceHref={resourceHref}
             onResourceClick={onResourceClick}
+            renderActions={renderActions}
           />
         );
       })}
@@ -132,7 +158,10 @@ 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 };
+  const timing = issueTiming(issue);
 
   useEffect(() => {
     if (open) {
@@ -148,15 +177,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 +206,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}
@@ -214,37 +255,45 @@ export function IssueRow({
                 <span aria-hidden>·</span>
                 {/* Non-interactive signal (the header is the toggle — a nested
                     button would be invalid); the clickable link lives in the body. */}
-                <span className="min-w-0 truncate text-theme-text-tertiary" title={confidenceTitle(issue.incident_parent.confidence ?? '')}>
-                  ↳ {incidentParentLabel(issue.incident_parent.fact_type, issue.incident_parent.confidence)}{' '}
-                  <span className="font-medium text-theme-text-secondary">{issue.incident_parent.ref.kind} / {issue.incident_parent.ref.name}</span>
-                </span>
+                <Tooltip content={confidenceTitle(issue.incident_parent.confidence ?? '')} delay={200} wrapperClassName="min-w-0">
+                  <span className="truncate text-theme-text-tertiary">
+                    ↳ {incidentParentLabel(issue.incident_parent.fact_type, issue.incident_parent.confidence)}{' '}
+                    <span className="font-medium text-theme-text-secondary">{issue.incident_parent.ref.kind} / {issue.incident_parent.ref.name}</span>
+                  </span>
+                </Tooltip>
               </>
             ) : null}
             {renderMeta?.(slotCtx)}
           </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 ? (
+            <>
+              <Tooltip content={ageTitle(issue)} delay={200} wrapperClassName="shrink-0">
+                <time
+                  dateTime={issue.first_seen}
+                  className="flex items-center gap-1 text-xs tabular-nums text-theme-text-tertiary"
+                >
+                  <Clock className="h-3 w-3" aria-hidden />
+                  {formatCompactAge(issue.first_seen)}
+                </time>
+              </Tooltip>
+              {timing ? (
+                <Tooltip content={timing.tooltip} delay={200}>
+                  <span className="badge-sm text-[10px] text-theme-text-secondary">{timing.chip}</span>
+                </Tooltip>
+              ) : null}
+            </>
+          ) : 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,17 +306,21 @@ 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">
                     <h4 className="text-[11px] font-semibold uppercase tracking-wide text-theme-text-tertiary">
                       {incidentParentLabel(issue.incident_parent.fact_type, issue.incident_parent.confidence)}
                       {issue.incident_parent.confidence ? (
-                        <span className="ml-2 badge-sm text-[10px] font-normal text-theme-text-tertiary" title={confidenceTitle(issue.incident_parent.confidence)}>
-                          {issue.incident_parent.confidence} confidence
-                        </span>
+                        <Tooltip content={confidenceTitle(issue.incident_parent.confidence)} delay={200}>
+                          <span className="ml-2 badge-sm text-[10px] font-normal text-theme-text-tertiary">
+                            {issue.incident_parent.confidence} confidence
+                          </span>
+                        </Tooltip>
                       ) : null}
                     </h4>
                     <ul className="flex flex-col gap-px">
@@ -276,9 +329,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 +339,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 +350,84 @@ 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 timing = issueTiming(issue);
+  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 (timing) {
+    meta.push(timing.meta);
+  } else if (issue.first_seen) {
+    meta.push(`started ${formatRelativeAgeTime(issue.first_seen)}`);
+  }
+  if (issue.first_seen) {
+    if (issue.last_seen && timing?.kind !== '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,23 +452,22 @@ 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">
             <div className="flex min-w-0 items-baseline gap-2">
               <span className="shrink-0 text-xs font-medium text-theme-text-secondary">{diagnosticFactLabel(fact.type)}</span>
               {fact.confidence ? (
-                <span
-                  className="shrink-0 badge-sm text-[10px] text-theme-text-tertiary"
-                  title={confidenceTitle(fact.confidence)}
-                >
-                  {fact.confidence} confidence
-                </span>
+                <Tooltip content={confidenceTitle(fact.confidence)} delay={200}>
+                  <span className="shrink-0 badge-sm text-[10px] text-theme-text-tertiary">
+                    {fact.confidence} confidence
+                  </span>
+                </Tooltip>
               ) : null}
               {fact.message ? <span className="min-w-0 break-words text-xs leading-relaxed text-theme-text-tertiary">{fact.message}</span> : null}
             </div>
@@ -438,7 +502,7 @@ function DiagnosticContext({
           </li>
         ))}
       </ul>
-    </section>
+    </CardSection>
   );
 }
 
@@ -446,11 +510,8 @@ function DiagnosticContext({
 // freshness, the two facts the compact "2h" hides.
 function ageTitle(issue: Issue): string {
   const parts: string[] = [];
-  if (issue.issue_timing === 'started_at_resource_creation') {
-    parts.push('Present since deployment — treat as baseline');
-  } else if (issue.issue_timing === 'started_after_resource_was_healthy') {
-    parts.push('Resource was previously healthy');
-  }
+  const timing = issueTiming(issue);
+  if (timing) parts.push(timing.tooltip);
   if (issue.first_seen) parts.push(`First seen ${new Date(issue.first_seen).toLocaleString()}`);
   if (issue.last_seen) parts.push(`Last seen ${formatRelativeAgeTime(issue.last_seen)}`);
   return parts.join('\n');
@@ -472,18 +533,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 +554,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 +571,7 @@ function ResourceLine({
   resourceHref,
   onResourceClick,
   ResourceLinkIcon,
+  compact,
 }: {
   label?: string;
   refForLink: IssueResourceRef;
@@ -520,24 +579,41 @@ 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>
       {count && count > 1 ? (
-        <span className="shrink-0 text-[10px] text-theme-text-tertiary tabular-nums" title={`${count} affected resources grouped under this issue`}>{count} affected</span>
+        <Tooltip content={`${count} affected resources grouped under this issue`} delay={200}>
+          <span className="shrink-0 text-[10px] text-theme-text-tertiary tabular-nums">{count} affected</span>
+        </Tooltip>
       ) : null}
       {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 +625,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,40 @@
+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('uses the Issues row treatment and defaults collapsed', () => {
+    const html = renderToString(<ResourceIssuesSection issues={[issue]} />)
+
+    expect(html).toContain('Operational issues')
+    expect(html).toContain('StorageClassMissing')
+    expect(html).not.toContain('What&#x27;s wrong')
+    expect(html).not.toContain('Context')
+    expect(html).not.toContain('Blocked pods')
+  })
+})