@skyhook-io/k8s-ui 1.8.10 → 1.8.12

package/src/components/gitops/insights/index.ts

@@ -4,3 +4,4 @@ export {
   GitOpsIssuesBand,
   GitOpsStatusStrip,
 } from './GitOpsInsightViews'
+export { ArgoResourceDiff } from './ArgoResourceDiff'

package/src/components/gitops/insights/insights-helpers.test.ts

@@ -1,6 +1,23 @@
 import { describe, it, expect } from 'vitest'
 import { SEVERITY_DOT } from '../../../utils/badge-colors'
-import { compactSource, entryTone, gitopsToSeverity, messageToPhase, phaseToTone } from './insights-helpers'
+import type { GitOpsChange } from '../../../types'
+import {
+  changeMatchesFacets,
+  changeMatchesSearch,
+  compactSource,
+  entryTone,
+  gitopsToSeverity,
+  healthStatusRank,
+  isArgoResourceSyncEligible,
+  messageToPhase,
+  phaseToTone,
+  resourceStatusCounts,
+  syncStatusRank,
+} from './insights-helpers'
+
+function change(partial: Partial<GitOpsChange> & { ref: GitOpsChange['ref'] }): GitOpsChange {
+  return { category: 'Unknown', hasDesired: true, hasLive: true, partial: false, ...partial }
+}
 
 describe('gitopsToSeverity', () => {
   it.each([
@@ -96,3 +113,87 @@ describe('compactSource', () => {
     expect(compactSource('')).toBe('')
   })
 })
+
+describe('changeMatchesSearch', () => {
+  const c = change({ ref: { kind: 'Deployment', name: 'guestbook-ui', namespace: 'demo', group: 'apps' } })
+  it('matches on kind, name, namespace, and group (case-insensitive)', () => {
+    expect(changeMatchesSearch(c, 'deploy')).toBe(true)
+    expect(changeMatchesSearch(c, 'GUESTBOOK')).toBe(true)
+    expect(changeMatchesSearch(c, 'demo')).toBe(true)
+    expect(changeMatchesSearch(c, 'apps')).toBe(true)
+  })
+  it('empty/whitespace query matches everything', () => {
+    expect(changeMatchesSearch(c, '')).toBe(true)
+    expect(changeMatchesSearch(c, '   ')).toBe(true)
+  })
+  it('non-matching query is filtered out', () => {
+    expect(changeMatchesSearch(c, 'nomatch')).toBe(false)
+  })
+})
+
+describe('changeMatchesFacets', () => {
+  const outOfSync = change({ ref: { kind: 'Service', name: 'a' }, sync: 'OutOfSync', health: 'Healthy' })
+  const degraded = change({ ref: { kind: 'Deployment', name: 'b' }, sync: 'Synced', health: 'Degraded' })
+  const missing = change({ ref: { kind: 'Secret', name: 'c' }, sync: 'OutOfSync', health: 'Missing' })
+  const healthy = change({ ref: { kind: 'ConfigMap', name: 'd' }, sync: 'Synced', health: 'Healthy' })
+
+  it('empty facet set matches everything', () => {
+    const none = new Set<never>()
+    expect(changeMatchesFacets(outOfSync, none)).toBe(true)
+    expect(changeMatchesFacets(healthy, none)).toBe(true)
+  })
+  it('outOfSync keys off sync status', () => {
+    const f = new Set(['outOfSync'] as const)
+    expect(changeMatchesFacets(outOfSync, f)).toBe(true)
+    expect(changeMatchesFacets(degraded, f)).toBe(false)
+  })
+  it('degraded/missing key off health status', () => {
+    expect(changeMatchesFacets(degraded, new Set(['degraded'] as const))).toBe(true)
+    expect(changeMatchesFacets(missing, new Set(['missing'] as const))).toBe(true)
+    expect(changeMatchesFacets(healthy, new Set(['degraded'] as const))).toBe(false)
+  })
+  it('multiple facets union (OR)', () => {
+    const f = new Set(['degraded', 'missing'] as const)
+    expect(changeMatchesFacets(degraded, f)).toBe(true)
+    expect(changeMatchesFacets(missing, f)).toBe(true)
+    expect(changeMatchesFacets(outOfSync, f)).toBe(false)
+  })
+})
+
+describe('resourceStatusCounts', () => {
+  it('counts each facet independently (a resource can be both OutOfSync and Missing)', () => {
+    const counts = resourceStatusCounts([
+      change({ ref: { kind: 'Service', name: 'a' }, sync: 'OutOfSync', health: 'Healthy' }),
+      change({ ref: { kind: 'Secret', name: 'c' }, sync: 'OutOfSync', health: 'Missing' }),
+      change({ ref: { kind: 'Deployment', name: 'b' }, sync: 'Synced', health: 'Degraded' }),
+      change({ ref: { kind: 'ConfigMap', name: 'd' }, sync: 'Synced', health: 'Healthy' }),
+    ])
+    expect(counts).toEqual({ outOfSync: 2, degraded: 1, missing: 1 })
+  })
+})
+
+describe('isArgoResourceSyncEligible', () => {
+  const outOfSync = change({ ref: { group: 'apps', kind: 'Deployment', namespace: 'demo', name: 'web' }, sync: 'OutOfSync' })
+
+  it('allows declared OutOfSync and Missing resources', () => {
+    expect(isArgoResourceSyncEligible(outOfSync, true)).toBe(true)
+    expect(isArgoResourceSyncEligible(change({ ref: { kind: 'Service', name: 'missing' }, health: 'Missing' }), true)).toBe(true)
+  })
+
+  it('excludes generated, hook, and already-synced resources', () => {
+    expect(isArgoResourceSyncEligible(outOfSync, false)).toBe(false)
+    expect(isArgoResourceSyncEligible(outOfSync, true, 'PreSync')).toBe(false)
+    expect(isArgoResourceSyncEligible(change({ ref: { kind: 'Service', name: 'ready' }, sync: 'Synced', health: 'Healthy' }), true)).toBe(false)
+  })
+})
+
+describe('syncStatusRank / healthStatusRank', () => {
+  it('ascending sync rank surfaces OutOfSync before Synced', () => {
+    expect(syncStatusRank('OutOfSync')).toBeLessThan(syncStatusRank('Synced'))
+    expect(syncStatusRank('OutOfSync')).toBeLessThan(syncStatusRank('Unknown'))
+  })
+  it('ascending health rank surfaces Missing/Degraded before Healthy', () => {
+    expect(healthStatusRank('Missing')).toBeLessThan(healthStatusRank('Degraded'))
+    expect(healthStatusRank('Degraded')).toBeLessThan(healthStatusRank('Healthy'))
+  })
+})

package/src/components/gitops/insights/insights-helpers.ts

@@ -2,7 +2,7 @@
 // GitOpsInsightViews.tsx so they can be unit-tested without importing JSX.
 
 import { SEVERITY_DOT, type Severity } from '../../../utils/badge-colors'
-import type { GitOpsHistoryItem } from '../../../types'
+import type { GitOpsChange, GitOpsHistoryItem } from '../../../types'
 import type { SyncStatus, GitOpsHealthStatus } from '../../../types/gitops'
 
 const SYNC_STATUS_SET = new Set<SyncStatus>(['Synced', 'OutOfSync', 'Reconciling', 'Unknown'])
@@ -23,6 +23,79 @@ export function normalizeHealthStatus(value: string | undefined | null): GitOpsH
   return 'Unknown'
 }
 
+// --- Resources table: filtering + sorting -------------------------------
+// Pure predicates + rank functions backing the Resources list's search box,
+// status facets, and sortable columns. Kept here (not inline in the view) so
+// the sort/filter behavior is unit-testable without rendering.
+
+// The status facets an operator filters the Resources list by — the three
+// states worth isolating on a broadly-drifted app. (These replaced the
+// per-resource OutOfSync "issues" that used to restate the whole table.)
+export type ResourceStatusFacet = 'outOfSync' | 'degraded' | 'missing'
+
+export type ResourceSortKey = 'order' | 'name' | 'sync' | 'health'
+
+// changeSync/changeHealth normalize a change's raw backend strings onto the
+// badge unions. `sync` falls back to `category` to match how ChangeRow and
+// the sync badge resolve it.
+export function changeSync(change: GitOpsChange): SyncStatus {
+  return normalizeSyncStatus(change.sync ?? change.category)
+}
+
+export function changeHealth(change: GitOpsChange): GitOpsHealthStatus {
+  return normalizeHealthStatus(change.health)
+}
+
+export function isArgoResourceSyncEligible(change: GitOpsChange, declared: boolean, hook?: string): boolean {
+  if (!declared || hook || change.hookPhase) return false
+  return changeSync(change) === 'OutOfSync' || changeHealth(change) === 'Missing' || change.category === 'Missing'
+}
+
+// Rank sync/health so an ascending sort surfaces the states an operator cares
+// about first (drift, then failures). Mirrors the GitOps application table's
+// syncRank/healthRank so the two tables order status the same way.
+export function syncStatusRank(sync: SyncStatus): number {
+  return ({ OutOfSync: 0, Reconciling: 1, Unknown: 2, Synced: 3 } as Record<SyncStatus, number>)[sync]
+}
+
+export function healthStatusRank(health: GitOpsHealthStatus): number {
+  return ({ Missing: 0, Degraded: 1, Progressing: 2, Unknown: 3, Suspended: 4, Healthy: 5 } as Record<GitOpsHealthStatus, number>)[health]
+}
+
+export function changeMatchesSearch(change: GitOpsChange, query: string): boolean {
+  const q = query.trim().toLowerCase()
+  if (!q) return true
+  const { kind, name, namespace, group } = change.ref
+  return [kind, name, namespace, group].some((s) => s?.toLowerCase().includes(q))
+}
+
+// Union match: a change passes when it satisfies ANY active facet (empty set
+// = no filter). OutOfSync keys off sync status; Degraded/Missing off health.
+export function changeMatchesFacets(change: GitOpsChange, facets: Set<ResourceStatusFacet>): boolean {
+  if (facets.size === 0) return true
+  if (facets.has('outOfSync') && changeSync(change) === 'OutOfSync') return true
+  if (facets.has('degraded') && changeHealth(change) === 'Degraded') return true
+  if (facets.has('missing') && changeHealth(change) === 'Missing') return true
+  return false
+}
+
+export interface ResourceStatusCounts {
+  outOfSync: number
+  degraded: number
+  missing: number
+}
+
+export function resourceStatusCounts(changes: GitOpsChange[]): ResourceStatusCounts {
+  const counts: ResourceStatusCounts = { outOfSync: 0, degraded: 0, missing: 0 }
+  for (const c of changes) {
+    if (changeSync(c) === 'OutOfSync') counts.outOfSync++
+    const health = changeHealth(c)
+    if (health === 'Degraded') counts.degraded++
+    if (health === 'Missing') counts.missing++
+  }
+  return counts
+}
+
 // Map GitOps-flavored vocabulary (Argo/Flux phase strings, insight Issue
 // severities) onto the canonical Severity tokens used by SEVERITY_BADGE /
 // SEVERITY_TEXT / SEVERITY_DOT. Centralizing this keeps call sites from

package/src/components/gitops/tree/GitOpsTreeGraph.tsx

@@ -17,12 +17,14 @@ import {
 import '@xyflow/react/dist/style.css'
 import { AlertTriangle, ChevronRight, Maximize, Search, X } from 'lucide-react'
 import { PaneLoader } from '../../ui/PaneLoader'
+import { Input } from '../../ui/Input'
 import { clsx } from 'clsx'
 
 import type { GitOpsResourceTree, GitOpsTreeNode, GitOpsTreeRef, HealthStatus } from '../../../types'
 import { displayKind } from '../../../types'
 import { healthToSeverity, SEVERITY_DOT } from '../../../utils/badge-colors'
 import { formatCompactAge } from '../../../utils/format'
+import { getTopologyIcon } from '../../../utils/resource-icons'
 import { Tooltip } from '../../ui/Tooltip'
 import { hasGitOpsTreeFilters, matchesGitOpsTreeFilters, type GitOpsTreeFilters } from './tree-helpers'
 
@@ -252,7 +254,7 @@ function GitOpsTreeToolbar({
       </div>
       <div className="flex items-center gap-1 rounded-lg border border-theme-border bg-theme-surface/90 px-2 py-1.5 backdrop-blur">
         <Search className="h-3.5 w-3.5 text-theme-text-tertiary" />
-        <input
+        <Input
           value={query}
           onChange={(event) => onQueryChange(event.target.value)}
           placeholder="Find node..."
@@ -549,6 +551,7 @@ const GitOpsResourceNode = memo(function GitOpsResourceNode({ data }: NodeProps<
   const gitopsTool = gitopsToolForNode(node)
   const chips = buildChips(node)
   const dim = getNodeDimensions(node)
+  const KindIcon = getTopologyIcon(kind)
 
   return (
     <>
@@ -584,7 +587,7 @@ const GitOpsResourceNode = memo(function GitOpsResourceNode({ data }: NodeProps<
       >
         <div className="px-3 py-2.5">
           <div className="mb-1 flex items-center gap-1.5">
-            <span className={`topology-icon topology-icon-${kind.toLowerCase()}`} />
+            <KindIcon className="h-3.5 w-3.5 shrink-0 text-theme-text-tertiary" aria-hidden />
             <span className="truncate text-[10px] font-medium uppercase tracking-wide text-theme-text-tertiary">
               {node.role === 'group' ? displayKind((node.data?.groupedKind as string) || kind) : displayKind(kind)}
             </span>
@@ -655,6 +658,11 @@ function isNodeTerminating(node: GitOpsTreeNode): boolean {
 // treatment around them (tool icon overlay, "→" affordance, stronger
 // border) advertises that they're not just leaves.
 function gitopsToolForNode(node: GitOpsTreeNode): 'argocd' | 'fluxcd' | undefined {
+  // The root node IS the resource this detail page is already showing — it is
+  // the subject, not a portal to another page. Never give it the portal
+  // treatment (tool badge, chevron, click-to-dive ring): clicking the thing
+  // you're already viewing would just stack an identical page onto itself.
+  if (node.role === 'root') return undefined
   const t = node.data?.gitopsTool
   if (t === 'argocd' || t === 'fluxcd') return t
   return undefined

package/src/components/issues/IssuesView.tsx

@@ -1,8 +1,10 @@
 import { useEffect, useMemo, useState, type ComponentType, type ReactNode } from 'react';
 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,
@@ -60,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);
@@ -104,6 +109,7 @@ export function IssuesView({ issues, anyData, resourceHref, onResourceClick, clu
             onToggle={() => setOpenId((cur) => (cur === rowKey ? null : rowKey))}
             resourceHref={resourceHref}
             onResourceClick={onResourceClick}
+            renderActions={renderActions}
           />
         );
       })}
@@ -126,6 +132,10 @@ export interface IssueRowProps {
   as?: 'li' | 'div';
   className?: string;
   dimmed?: boolean;
+  /** Suppress the "Subject" deep-link in the expanded body — set by hosts that
+   *  embed the row under the very resource that IS the subject (the drawer header
+   *  already names it), so it doesn't echo back redundantly. */
+  hideSubject?: boolean;
   renderBadges?: (ctx: IssueRowSlotContext) => ReactNode;
   renderMeta?: (ctx: IssueRowSlotContext) => ReactNode;
   renderActions?: (ctx: IssueRowSlotContext) => ReactNode;
@@ -142,6 +152,7 @@ export function IssueRow({
   as = 'li',
   className,
   dimmed,
+  hideSubject,
   renderBadges,
   renderMeta,
   renderActions,
@@ -155,6 +166,37 @@ export function IssueRow({
   const severity = normalizeIssueSeverity(issue.severity);
   const SeverityIcon = ISSUE_SEVERITY_ICON[severity];
   const slotCtx = { issue, open };
+  const timing = issueTiming(issue);
+
+  // Severity pill + age + timing chip. Rendered in two positions the container
+  // query toggles: inline at the row's right edge on a wide container, and on a
+  // line of its own below the resource line once the row is too narrow to hold
+  // it beside the title — so the title never has to truncate to make room.
+  const metaChips = (wrapperClass: string) => (
+    <div className={`items-center gap-3 ${wrapperClass}`}>
+      <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>
+      {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}
+    </div>
+  );
 
   useEffect(() => {
     if (open) {
@@ -199,13 +241,13 @@ export function IssueRow({
             onToggle();
           }
         }}
-        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]}`}
+        className={`group @container/issue 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]}`}
       >
         <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="min-w-0 truncate text-sm font-medium text-theme-text-primary">{categoryLabel(issue.category)}</span>
             <span className={`shrink-0 self-center ${groupBadgeClass(issue.category_group)}`}>{groupLabel(issue.category_group)}</span>
             {renderBadges?.(slotCtx)}
             {/* The detector reason rides the title row while COLLAPSED so the
@@ -248,35 +290,26 @@ 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>
+          {/* Narrow container: the meta chips drop to their own line here rather
+              than stealing width from the title on the row above. Hidden once the
+              row is wide enough to hold them inline in the right cluster. */}
+          {metaChips('flex @2xl/issue:hidden')}
         </div>
 
-        {/* Right cluster — severity pill THEN age, vertically centered as a group. */}
+        {/* Right cluster — the always-visible affordances (per-row action +
+            chevron) plus, on a wide container, the inline meta chips. */}
         <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}
+          {metaChips('hidden @2xl/issue:flex')}
           {renderActions?.(slotCtx)}
           <ChevronRight className={`h-4 w-4 shrink-0 text-theme-text-tertiary transition-transform duration-200 ${open ? 'rotate-90' : ''}`} />
         </div>
@@ -302,9 +335,11 @@ export function IssueRow({
                     <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">
@@ -313,7 +348,7 @@ export function IssueRow({
                   </section>
                 ) : null}
                 <DiagnosticContext issue={issue} resourceHref={resourceHref} onResourceClick={onResourceClick} ResourceLinkIcon={ResourceLinkIcon} />
-                <AffectedResources issue={issue} resourceHref={resourceHref} onResourceClick={onResourceClick} ResourceLinkIcon={ResourceLinkIcon} />
+                <AffectedResources issue={issue} hideSubject={hideSubject} resourceHref={resourceHref} onResourceClick={onResourceClick} ResourceLinkIcon={ResourceLinkIcon} />
               </div>
             </div>
           </div>
@@ -343,6 +378,7 @@ function Diagnosis({ issue }: { issue: Issue }) {
   // present, else headline+detail) rather than a string that may never appear.
   const visibleMessage = [headline, detail].filter(Boolean).join(' ');
   const shownText = issue.cause ?? visibleMessage;
+  const timing = issueTiming(issue);
   const rawError = [
     ...new Set(
       [issue.raw_message ?? (issue.cause ? issue.message : undefined), detail].filter(
@@ -359,15 +395,13 @@ function Diagnosis({ issue }: { issue: Issue }) {
   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) {
-    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.last_seen && timing?.kind !== 'creation') meta.push(`last seen ${formatRelativeAgeTime(issue.last_seen)}`);
   }
   if (issue.change_context) meta.push(changeContextText(issue.change_context));
 
@@ -448,12 +482,11 @@ function DiagnosticContext({
             <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>
@@ -496,11 +529,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');
@@ -508,11 +538,13 @@ function ageTitle(issue: Issue): string {
 
 function AffectedResources({
   issue,
+  hideSubject,
   resourceHref,
   onResourceClick,
   ResourceLinkIcon,
 }: {
   issue: Issue;
+  hideSubject?: boolean;
   resourceHref?: (ref: IssueResourceRef) => string;
   onResourceClick?: (ref: IssueResourceRef) => void;
   ResourceLinkIcon: ComponentType<{ className?: string }>;
@@ -521,14 +553,19 @@ function AffectedResources({
   // count is the backend fan-out size (members, subject excluded — see
   // grouping.go); fall back to the inline member count, not +1.
   const total = issue.count ?? members.length;
+  // With the subject suppressed and no fanned-out members, this section has
+  // nothing to show — return null so the divider row above it doesn't render empty.
+  if (hideSubject && members.length === 0) return null;
   return (
     <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" compact refForLink={subjectRef(issue)} resourceHref={resourceHref} onResourceClick={onResourceClick} ResourceLinkIcon={ResourceLinkIcon} />
-      </ul>
+      {!hideSubject && (
+        <ul className="flex flex-col gap-px">
+          <ResourceLine label="Subject" compact refForLink={subjectRef(issue)} resourceHref={resourceHref} onResourceClick={onResourceClick} ResourceLinkIcon={ResourceLinkIcon} />
+        </ul>
+      )}
       {members.length > 0 && (
         <CardSection icon={Layers} label="Affected resources" labelExtra={`· ${total}`}>
           <ul className="flex flex-col gap-px">
@@ -589,7 +626,9 @@ function ResourceLine({
         {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" />}
     </>

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

@@ -1,6 +1,7 @@
 import { describe, expect, it } from 'vitest'
 import { renderToString } from 'react-dom/server'
-import { ResourceIssuesSection } from './ResourceIssuesSection'
+import { ResourceIssuesSection, sameResource } from './ResourceIssuesSection'
+import { IssueRow } from './IssuesView'
 import type { Issue } from './types'
 
 const issue: Issue = {
@@ -28,12 +29,44 @@ const issue: Issue = {
 }
 
 describe('ResourceIssuesSection', () => {
-  it('keeps drawer context facts but omits the role badge', () => {
+  it('uses the Issues row treatment and defaults collapsed', () => {
     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')
+    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')
+  })
+
+  it('shows the Subject deep-link by default', () => {
+    const html = renderToString(<IssueRow issue={issue} open onToggle={() => {}} onResourceClick={() => {}} />)
+    expect(html).toContain('Subject')
+  })
+
+  it('suppresses the Subject deep-link when the issue subject is the embedding resource', () => {
+    // apiKind (plural) must still resolve to the same identity as the wire kind.
+    const html = renderToString(<IssueRow issue={issue} open onToggle={() => {}} onResourceClick={() => {}} hideSubject />)
+    expect(html).not.toContain('Subject')
+  })
+})
+
+describe('sameResource', () => {
+  const subject = { kind: 'PersistentVolumeClaim', namespace: 'demo', name: 'data' }
+
+  it('matches across singular kind vs plural API name', () => {
+    expect(sameResource(subject, { kind: 'persistentvolumeclaims', namespace: 'demo', name: 'data' })).toBe(true)
+  })
+
+  it('treats a missing namespace as empty', () => {
+    expect(sameResource({ kind: 'Node', name: 'n1' }, { kind: 'nodes', namespace: '', name: 'n1' })).toBe(true)
+  })
+
+  it('does not match a different name', () => {
+    expect(sameResource(subject, { kind: 'persistentvolumeclaims', namespace: 'demo', name: 'other' })).toBe(false)
+  })
+
+  it('does not match a different kind', () => {
+    expect(sameResource(subject, { kind: 'configmaps', namespace: 'demo', name: 'data' })).toBe(false)
   })
 })