@skyhook-io/k8s-ui 1.17.1 → 1.18.1

package/src/components/gitops/insights/GitOpsInsightViews.tsx

@@ -23,7 +23,7 @@ import {
   healthStatusRank,
   isArgoResourceSyncEligible,
   messageToPhase,
-  normalizeHealthStatus,
+  missingResourceMessage,
   normalizeSyncStatus,
   resourceStatusCounts,
   syncStatusRank,
@@ -237,7 +237,8 @@ function buildHealthSummary(allChanges: GitOpsChange[]): { text: string; tone: s
     // Count HEALTH, not sync — a Synced resource can still be Degraded, so check
     // degraded/missing FIRST and never let a Synced sync-state mask it. A Synced
     // resource with no assessed health (ConfigMaps etc.) still reads as fine.
-    if (c.health === 'Degraded' || c.category === 'Degraded') degraded++
+    if (c.missing) missing++
+    else if (c.health === 'Degraded' || c.category === 'Degraded') degraded++
     else if (c.health === 'Missing' || c.category === 'Missing') missing++
     else if (c.health === 'Healthy' || c.category === 'Synced') healthy++
     else if (c.category === 'OutOfSync') outOfSync++
@@ -1096,9 +1097,11 @@ export function GitOpsChangesView({ insight, error, onOpenResource, onSyncResour
                 const waveSet = !!planItem?.waveSet
                 const rowKey = refKey(change.ref)
                 const focused = focusKey === rowKey
-                const explanation = !change.syncError && !change.message
-                  ? explainChangeStatus(change.sync, change.health, insight.summary)
-                  : ''
+                const explanation = change.missing
+                  ? missingResourceMessage(change.sync)
+                  : !change.syncError && !change.message
+                    ? explainChangeStatus(change.sync, change.health, insight.summary)
+                    : ''
                 const hasInlineDetail = !!(
                   (change.drift && change.drift.entries.length > 0) ||
                   (change.recentEvents && change.recentEvents.length > 0)
@@ -1245,7 +1248,8 @@ function buildTreeExtras(nodes: GitOpsTreeNode[], declared: GitOpsChange[]): Git
       // had a controller verdict to be distinguished from.
       message: n.healthMessage,
       hasDesired: false,
-      hasLive: true,
+      hasLive: !n.missing,
+      missing: n.missing,
       partial: true,
       partialNote: 'Generated resource — not directly tracked by the GitOps controller (no drift / event diagnostics).',
     })
@@ -1365,8 +1369,10 @@ function ChangeRow({
   // differently: hide the Open pill, suppress the drawer-open click path,
   // and offer "View in Git →" instead so the operator can read the
   // declared source instead of a non-existent live object.
-  const isAbsent = change.health === 'Missing' && !change.hasLive
-  const radarNote = radarHealthNote({ health: change.health, healthSource: change.healthSource, healthMessage: change.message })
+  const isAbsent = change.missing || (change.health === 'Missing' && !change.hasLive)
+  const radarNote = change.missing
+    ? 'Radar confirmed that this resource is not present in the cluster.'
+    : radarHealthNote({ health: change.health, healthSource: change.healthSource, healthMessage: change.message })
   const handleRowClick = () => {
     if (expandable) {
       setExpanded((v) => !v)
@@ -1463,7 +1469,7 @@ function ChangeRow({
             </Tooltip>
           )}
           {change.message && !change.syncError && <div className="ml-[18px] mt-1 line-clamp-2 text-xs text-theme-text-secondary">{change.message}</div>}
-          {!change.syncError && !change.message && explanation && (
+          {!change.syncError && (change.missing || !change.message) && explanation && (
             <div className="ml-[18px] mt-1 text-xs text-theme-text-tertiary">{explanation}</div>
           )}
         </button>
@@ -1477,7 +1483,7 @@ function ChangeRow({
           )}
         </div>
         <div className="flex flex-col items-start gap-1 self-start">
-          <HealthStatusBadge health={normalizeHealthStatus(change.health)} />
+          <HealthStatusBadge health={changeHealth(change)} />
           {radarNote && (
             <Tooltip content={radarNote} delay={200} wrapperClassName="inline-flex">
               <span className="cursor-help select-none rounded border border-theme-border bg-theme-elevated/70 px-1.5 py-0.5 text-[10px] leading-3 text-theme-text-tertiary">

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

@@ -3,6 +3,7 @@ import { SEVERITY_DOT } from '../../../utils/badge-colors'
 import type { GitOpsChange } from '../../../types'
 import {
   changeMatchesFacets,
+  changeHealth,
   changeMatchesSearch,
   compactSource,
   entryTone,
@@ -10,6 +11,7 @@ import {
   healthStatusRank,
   isArgoResourceSyncEligible,
   messageToPhase,
+  missingResourceMessage,
   phaseToTone,
   resourceStatusCounts,
   syncStatusRank,
@@ -19,6 +21,22 @@ function change(partial: Partial<GitOpsChange> & { ref: GitOpsChange['ref'] }):
   return { category: 'Unknown', hasDesired: true, hasLive: true, partial: false, ...partial }
 }
 
+describe('confirmed missing resources', () => {
+  it('counts, filters and enables sync independently of stale health and sync', () => {
+    const item = change({ ref: { kind: 'Secret', name: 'values' }, missing: true, hasLive: false, health: 'Healthy', sync: 'Synced' })
+    expect(changeHealth(item)).toBe('Missing')
+    expect(resourceStatusCounts([item]).missing).toBe(1)
+    expect(changeMatchesFacets(item, new Set(['missing']))).toBe(true)
+    expect(isArgoResourceSyncEligible(item, true)).toBe(true)
+  })
+
+  it('asks for a refresh when Argo still reports Synced', () => {
+    expect(missingResourceMessage('Synced')).toContain('Refresh')
+    expect(missingResourceMessage('Synced')).not.toContain('Sync the application')
+    expect(missingResourceMessage('OutOfSync')).toContain('Sync the application')
+  })
+})
+
 describe('gitopsToSeverity', () => {
   it.each([
     ['critical', 'error'],

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

@@ -43,9 +43,16 @@ export function changeSync(change: GitOpsChange): SyncStatus {
 }
 
 export function changeHealth(change: GitOpsChange): GitOpsHealthStatus {
+  if (change.missing) return 'Missing'
   return normalizeHealthStatus(change.health)
 }
 
+export function missingResourceMessage(sync?: string): string {
+  return sync === 'Synced'
+    ? 'Argo reports this resource as synced, but it is not present in the cluster. Refresh the application to check its status.'
+    : 'Not present in the cluster. Sync the application to create it.'
+}
+
 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'

package/src/components/gitops/tree/GitOpsTreeGraph.test.ts

@@ -1,7 +1,7 @@
 import { describe, expect, it } from 'vitest'
 
-import { getSubtitle, nodeCause } from './GitOpsTreeGraph'
-import type { GitOpsTreeNode } from '../../../types'
+import { buildCauseByRef, getSubtitle, nodeCause } from './GitOpsTreeGraph'
+import type { GitOpsIssue, GitOpsTreeNode } from '../../../types'
 
 function node(extras: Partial<GitOpsTreeNode> = {}): GitOpsTreeNode {
   return {
@@ -14,6 +14,9 @@ function node(extras: Partial<GitOpsTreeNode> = {}): GitOpsTreeNode {
 }
 
 describe('getSubtitle', () => {
+  it('shows confirmed absence even when controller health is unknown or stale', () => {
+    expect(getSubtitle(node({ tool: 'argocd', missing: true, sync: 'OutOfSync', health: 'Healthy' }))).toBe('OutOfSync • Not found in cluster')
+  })
   it('shows what a healthy resource exposes, not that it is healthy', () => {
     // The status dot and the left border stripe already paint a healthy node
     // green, so the word adds nothing and the ports are the only thing here the
@@ -95,23 +98,84 @@ describe('nodeCause', () => {
   // Shapes as the tree API sends them: the Go side maps Argo's Degraded and
   // Missing to topologyStatus 'unhealthy', Progressing and Suspended to
   // 'degraded' (pkg/gitops/tree healthToTopology).
-  const CAUSE = 'Back-off restarting failed container main'
+  const FAILURE = { text: 'Back-off restarting failed container main', lead: false }
+  const LEAD = { text: 'Elasticsearch cluster health degraded', lead: true }
 
   it('shows the cause on a node the controller calls Degraded', () => {
-    expect(nodeCause(node({ health: 'Degraded', healthSource: 'controller', topologyStatus: 'unhealthy' }), CAUSE)).toBe(CAUSE)
+    expect(nodeCause(node({ health: 'Degraded', healthSource: 'controller', topologyStatus: 'unhealthy' }), FAILURE)).toBe(FAILURE.text)
   })
 
-  it('hides it on a Progressing node, even when an issue matched it', () => {
+  it('hides a failure verdict on a Progressing node, even when an issue matched it', () => {
     // A rollout in flight is not broken; a cause tooltip on it says it is.
-    expect(nodeCause(node({ health: 'Progressing', healthSource: 'controller', topologyStatus: 'degraded' }), CAUSE)).toBeUndefined()
-    expect(nodeCause(node({ health: 'Progressing', healthSource: 'radar', topologyStatus: 'degraded' }), CAUSE)).toBeUndefined()
+    expect(nodeCause(node({ health: 'Progressing', healthSource: 'controller', topologyStatus: 'degraded' }), FAILURE)).toBeUndefined()
+    expect(nodeCause(node({ health: 'Progressing', healthSource: 'radar', topologyStatus: 'degraded' }), FAILURE)).toBeUndefined()
   })
 
   it('hides it on a Suspended node, even when an issue matched it', () => {
-    expect(nodeCause(node({ health: 'Suspended', healthSource: 'controller', topologyStatus: 'degraded' }), CAUSE)).toBeUndefined()
+    expect(nodeCause(node({ health: 'Suspended', healthSource: 'controller', topologyStatus: 'degraded' }), FAILURE)).toBeUndefined()
+    expect(nodeCause(node({ health: 'Suspended', healthSource: 'controller', topologyStatus: 'degraded' }), LEAD)).toBeUndefined()
   })
 
   it('never shows it on a healthy node', () => {
-    expect(nodeCause(node({ health: 'Healthy', healthSource: 'controller', topologyStatus: 'healthy' }), CAUSE)).toBeUndefined()
+    expect(nodeCause(node({ health: 'Healthy', healthSource: 'controller', topologyStatus: 'healthy' }), FAILURE)).toBeUndefined()
+    expect(nodeCause(node({ health: 'Healthy', healthSource: 'radar', topologyStatus: 'healthy' }), LEAD)).toBeUndefined()
+  })
+
+  it('shows a lead on a node that is not failing, framed as possible', () => {
+    // Argo CD 3 does not persist per-resource health, so an Argo-Degraded app
+    // can have every node read Progressing or unknown by Radar. The events
+    // lead is then the only pointer, and it lands on one of those nodes.
+    expect(nodeCause(node({ health: 'Progressing', healthSource: 'radar', topologyStatus: 'degraded' }), LEAD))
+      .toBe('Possible cause: Elasticsearch cluster health degraded')
+    expect(nodeCause(node({ ref: { group: 'elasticsearch.k8s.elastic.co', kind: 'Elasticsearch', name: 'logs', namespace: 'search' }, topologyStatus: 'unknown' }), LEAD))
+      .toBe('Possible cause: Elasticsearch cluster health degraded')
+  })
+
+  it('shows a Flux source fetch error on the source while Flux retries it', () => {
+    const source = node({
+      ref: { group: 'source.toolkit.fluxcd.io', kind: 'GitRepository', name: 'podinfo', namespace: 'flux-system' },
+      health: 'Progressing',
+      topologyStatus: 'degraded',
+    })
+    // Keyed like the tree's own nodes, so the issue's ref finds this node.
+    const cause = buildCauseByRef([{
+      severity: 'warning',
+      scope: 'tree',
+      reason: 'SourceNotReady',
+      message: 'GitRepository flux-system/podinfo can\'t fetch updates.',
+      cause: 'authentication required',
+      refs: [{ group: 'source.toolkit.fluxcd.io', kind: 'GitRepository', namespace: 'flux-system', name: 'podinfo' }],
+    }]).get('source.toolkit.fluxcd.io/GitRepository/flux-system/podinfo')
+    expect(nodeCause(source, cause)).toBe('Possible cause: authentication required')
+  })
+
+  it('shows a lead as is on a failing node', () => {
+    expect(nodeCause(node({ health: 'Degraded', topologyStatus: 'unhealthy' }), LEAD)).toBe(LEAD.text)
+  })
+})
+
+describe('buildCauseByRef', () => {
+  const ref = { group: 'apps', kind: 'Deployment', namespace: 'demo', name: 'web' }
+  function issue(extras: Partial<GitOpsIssue>): GitOpsIssue {
+    return { severity: 'critical', scope: 'resource', reason: 'Degraded', message: 'Deployment web is Degraded', cause: 'crashloop', refs: [ref], ...extras }
+  }
+
+  it('marks the Warning-event lead and the Flux blockers as leads, and nothing else', () => {
+    const lead = (reason: string) => [...buildCauseByRef([issue({ reason })]).values()][0]?.lead
+    expect(lead('PossibleCause')).toBe(true)
+    expect(lead('SourceNotReady')).toBe(true)
+    expect(lead('ArtifactFailed')).toBe(true)
+    expect(lead('DependencyNotReady')).toBe(true)
+    expect(lead('Degraded')).toBe(false)
+    expect(lead('Failed')).toBe(false)
+  })
+
+  it('keeps the first, most severe cause for a node', () => {
+    const map = buildCauseByRef([issue({ cause: 'crashloop' }), issue({ severity: 'warning', reason: 'PossibleCause', cause: 'probe failed' })])
+    expect([...map.values()]).toEqual([{ text: 'crashloop', lead: false }])
+  })
+
+  it('skips issues without a cause or a ref', () => {
+    expect(buildCauseByRef([issue({ cause: undefined }), issue({ refs: [] })]).size).toBe(0)
   })
 })

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

@@ -28,7 +28,7 @@ import { radarHealthNote } from '../health-provenance'
 import { servicePortsTooltip, type ServicePortEntry } from '../../topology/K8sResourceNode'
 import { getTopologyIcon } from '../../../utils/resource-icons'
 import { Tooltip } from '../../ui/Tooltip'
-import { hasGitOpsTreeFilters, matchesGitOpsTreeFilters, type GitOpsTreeFilters } from './tree-helpers'
+import { hasGitOpsTreeFilters, matchesGitOpsTreeFilters, treeNodeHealth, type GitOpsTreeFilters } from './tree-helpers'
 import { rankTree, renderedEdge, shortcutEdges, upstreamClosure, upstreamEdges } from './layout'
 
 export type GitOpsTreePreset = 'full' | 'compact' | 'workloads' | 'app'
@@ -124,19 +124,7 @@ function GitOpsTreeGraphInner({
   useEffect(() => {
     if (preset !== 'compact') setExpandedGroups(new Set())
   }, [preset])
-  const causeByRef = useMemo(() => {
-    const map = new Map<string, string>()
-    for (const issue of issues ?? []) {
-      const cause = issue.cause
-      const ref = issue.refs?.[0]
-      if (!cause || !ref) continue
-      const key = refKey(ref)
-      // First match wins — issues arrive ranked by severity, so a node
-      // that's the subject of multiple issues keeps its most severe cause.
-      if (!map.has(key)) map.set(key, cause)
-    }
-    return map
-  }, [issues])
+  const causeByRef = useMemo(() => buildCauseByRef(issues), [issues])
   const { nodes, edges } = useMemo(() => buildFlowGraph(tree, preset, query, filters, expandedGroups, causeByRef), [tree, preset, query, filters, expandedGroups, causeByRef])
 
   useEffect(() => {
@@ -330,7 +318,7 @@ function getEdgeColor(type: string): string {
   }
 }
 
-function buildFlowGraph(tree: GitOpsResourceTree | null, preset: GitOpsTreePreset, query: string, filters?: GitOpsTreeFilters, expandedGroups?: Set<string>, causeByRef?: Map<string, string>): { nodes: Node[]; edges: Edge[] } {
+function buildFlowGraph(tree: GitOpsResourceTree | null, preset: GitOpsTreePreset, query: string, filters?: GitOpsTreeFilters, expandedGroups?: Set<string>, causeByRef?: Map<string, NodeCause>): { nodes: Node[]; edges: Edge[] } {
   if (!tree) return { nodes: [], edges: [] }
   const visibleTree = applyGraphFilters(applyPreset(tree, preset, expandedGroups), filters)
   const byID = new Map(visibleTree.nodes.map(node => [node.id, node]))
@@ -550,17 +538,15 @@ function positionRanks(ranks: Map<number, string[]>, nodes: Map<string, GitOpsTr
   return positioned
 }
 
-const GitOpsResourceNode = memo(function GitOpsResourceNode({ data }: NodeProps<Node<{ node: GitOpsTreeNode; highlighted?: boolean; cause?: string }>>) {
+const GitOpsResourceNode = memo(function GitOpsResourceNode({ data }: NodeProps<Node<{ node: GitOpsTreeNode; highlighted?: boolean; cause?: NodeCause }>>) {
   const node = data.node
   const kind = normalizeDisplayKind(node)
-  const status = normalizeHealth(node.topologyStatus)
+  const status = node.missing ? 'unhealthy' : normalizeHealth(node.topologyStatus)
   const terminating = isNodeTerminating(node)
   const gitopsTool = gitopsToolForNode(node)
   const chips = buildChips(node)
   const dim = getNodeDimensions(node)
   const KindIcon = getTopologyIcon(kind)
-  // Only unhealthy nodes carry a cause worth surfacing — a healthy node
-  // matched by a stale/unrelated issue ref shouldn't show a tooltip.
   const cause = nodeCause(node, data.cause)
   // Only declared resources can carry the controller's verdict, so only
   // there does "this one is Radar's" mean anything. Generated children
@@ -741,17 +727,47 @@ function buildChips(node: GitOpsTreeNode): Array<{ label?: string; value: string
   const relationship = stringData(data.relationship)
   if (relationship) chips.push({ value: relationship })
   if (node.sync === 'OutOfSync') chips.push({ value: 'OutOfSync', tone: 'warning' })
-  if (node.health === 'Degraded' || node.health === 'Missing') chips.push({ value: node.health, tone: 'danger' })
+  const health = treeNodeHealth(node)
+  if (health === 'Degraded' || health === 'Missing') chips.push({ value: health, tone: 'danger' })
   return chips
 }
 
-// nodeCause returns the matched issue's cause when the node's hover should
-// show it: only on a node that is actually failing (Degraded or Missing,
-// topology 'unhealthy'). 'degraded' is also where Progressing and Suspended
-// land, and a cause there reads as "this is broken" on a rollout in flight
-// or a deliberate pause.
-export function nodeCause(node: GitOpsTreeNode, cause?: string): string | undefined {
-  return normalizeHealth(node.topologyStatus) === 'unhealthy' ? cause : undefined
+export interface NodeCause {
+  text: string
+  // An issue that names a resource as a lead without saying it failed: Argo's
+  // Warning-event lead (Go: degradedResourceFromEvents) and the Flux
+  // source/dependency blockers (Go: attachFluxBlocker, fluxSourceWarnings).
+  lead: boolean
+}
+
+const LEAD_REASONS = new Set(['PossibleCause', 'SourceNotReady', 'ArtifactFailed', 'DependencyNotReady'])
+
+export function buildCauseByRef(issues?: GitOpsIssue[]): Map<string, NodeCause> {
+  const map = new Map<string, NodeCause>()
+  for (const issue of issues ?? []) {
+    const cause = issue.cause
+    const ref = issue.refs?.[0]
+    if (!cause || !ref) continue
+    const key = refKey(ref)
+    // First match wins — issues arrive ranked by severity, so a node
+    // that's the subject of multiple issues keeps its most severe cause.
+    if (!map.has(key)) map.set(key, { text: cause, lead: LEAD_REASONS.has(issue.reason) })
+  }
+  return map
+}
+
+// A failing node (topology 'unhealthy') shows any cause as is. A failure
+// verdict on a Progressing node would read as "this is broken" on a rollout
+// in flight, so elsewhere only a lead shows, framed as possible. That is where
+// leads land: the Warning-event lead is only emitted when no resource reads
+// as failing, and a Flux source mid-retry reads Progressing while its fetch
+// error is still the answer. Healthy and Suspended nodes show nothing.
+export function nodeCause(node: GitOpsTreeNode, cause?: NodeCause): string | undefined {
+  if (!cause) return undefined
+  const status = normalizeHealth(node.topologyStatus)
+  if (status === 'unhealthy') return cause.text
+  if (!cause.lead || status === 'healthy' || node.health === 'Suspended') return undefined
+  return `Possible cause: ${cause.text}`
 }
 
 // The subtitle is the node's one line of prose, and sync, health and the
@@ -774,6 +790,7 @@ export function getSubtitle(node: GitOpsTreeNode): string {
     // a state description, not an affordance.
     return 'Click to expand'
   }
+  if (node.missing) return `${node.sync ? `${node.sync} • ` : ''}Not found in cluster`
   if (isNodeTerminating(node)) {
     return 'Pending deletion'
   }
@@ -810,7 +827,7 @@ function matchesQuery(node: GitOpsTreeNode, query: string): boolean {
     node.ref.namespace,
     node.ref.group,
     node.sync,
-    node.health,
+    treeNodeHealth(node),
   ].some(value => String(value ?? '').toLowerCase().includes(query))
 }
 

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

@@ -6,6 +6,12 @@ import type { GitOpsResourceTree, GitOpsTreeNode } from '../../../types'
 const node = (group: string): GitOpsTreeNode => ({ id: group, ref: { kind: 'Service', group, name: 'same', namespace: 'team' }, role: 'generated', tool: 'fluxcd' })
 
 describe('GitOps kind filter contract', () => {
+  it('uses confirmed absence in health facets rather than stale health', () => {
+    const missing = { ...node(''), missing: true, health: 'Healthy' as const }
+    expect(matchesGitOpsTreeFilters(missing, { health: ['Missing'] })).toBe(true)
+    expect(matchesGitOpsTreeFilters(missing, { health: ['Healthy'] })).toBe(false)
+    expect(buildTreeFacets({ nodes: [missing] } as GitOpsResourceTree).health).toEqual([{ name: 'Missing', count: 1 }])
+  })
   it('uses bare Kubernetes kinds across API groups', () => {
     const nodes = [node(''), node('serving.knative.dev')]
     expect(buildTreeFacets({ nodes } as GitOpsResourceTree).kinds).toEqual([{ name: 'Service', count: 2 }])

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

@@ -20,6 +20,10 @@ export function treeNodeFilterRole(node: GitOpsTreeNode): string {
   return node.dependency ? 'dependency' : node.role
 }
 
+export function treeNodeHealth(node: GitOpsTreeNode): string {
+  return node.missing ? 'Missing' : node.health || 'Unknown'
+}
+
 export function matchesGitOpsTreeFilters(node: GitOpsTreeNode, filters?: GitOpsTreeFilters): boolean {
   if (!filters) return true
   const kinds = gitOpsFilterSet(filters.kinds)
@@ -31,7 +35,7 @@ export function matchesGitOpsTreeFilters(node: GitOpsTreeNode, filters?: GitOpsT
   if (kinds && !kinds.has(node.ref.kind)) return false
   if (namespaces && !namespaces.has(node.ref.namespace || '(cluster)')) return false
   if (sync && !sync.has(node.sync || 'Unknown')) return false
-  if (health && !health.has(node.health || 'Unknown')) return false
+  if (health && !health.has(treeNodeHealth(node))) return false
   if (roles && !roles.has(treeNodeFilterRole(node))) return false
   return true
 }

package/src/components/issues/IssuesView.tsx

@@ -288,13 +288,16 @@ export function IssueRow({
             onToggle();
           }
         }}
-        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,var(--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 phone:flex-wrap phone:gap-y-2 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,var(--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="min-w-0 truncate text-sm font-medium text-theme-text-primary">{issueTitle(issue)}</span>
+        {/* Phones: the title takes its own line with the badge and reason
+            under it, and the severity, actions and chevron get a last line
+            (the right cluster below wraps under the text). */}
+        <div className="flex min-w-0 flex-1 flex-col gap-1 phone:basis-[calc(100%-30px)]">
+          <div className="flex min-w-0 items-baseline gap-2 phone:flex-wrap phone:gap-y-1">
+            <span className="min-w-0 truncate text-sm font-medium text-theme-text-primary phone:basis-full">{issueTitle(issue)}</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
@@ -351,15 +354,17 @@ export function IssueRow({
           {/* 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')}
+          {metaChips('flex @2xl/issue:hidden phone:hidden')}
         </div>
 
         {/* 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">
-          {metaChips('hidden @2xl/issue:flex')}
-          {renderActions?.(slotCtx)}
-          <CollapseChevron open={open} className="h-4 w-4" />
+        <div className="flex shrink-0 items-center gap-3 phone:basis-full phone:pl-[30px]">
+          {metaChips('hidden @2xl/issue:flex phone:flex')}
+          <div className="contents phone:ml-auto phone:flex phone:items-center phone:gap-3">
+            {renderActions?.(slotCtx)}
+            <CollapseChevron open={open} className="h-4 w-4" />
+          </div>
         </div>
       </div>
 
@@ -435,9 +440,12 @@ function Diagnosis({ issue, source }: { issue: Issue; source?: IssueDiagnosisSou
   const partialUnknown = issue.onset_coverage?.unknown ?? 0;
   const partialOnset = Boolean(issue.first_seen && partialUnknown > 0);
   const timing = issueTimingForDisplay(issue);
+  // A message Radar wrote itself is not raw output, so it never lands in the
+  // terminal block; its cause carries the same facts.
+  const messageIsRaw = issue.message_source !== 'radar';
   const rawError = [
     ...new Set(
-      [issue.raw_message ?? (issue.cause ? issue.message : undefined), detail].filter(
+      [issue.raw_message ?? (issue.cause && messageIsRaw ? issue.message : undefined), detail].filter(
         (s): s is string => !!s && s !== shownText,
       ),
     ),

package/src/components/issues/ResourceIssuesSection.tsx

@@ -1,7 +1,7 @@
-import { useMemo, useState } from 'react'
+import { useMemo, useState, type ReactNode } from 'react'
 import { AlertTriangle } from 'lucide-react'
 import { kindToPluralWithGroup } from '../../utils/navigation'
-import { IssueRow } from './IssuesView'
+import { IssueRow, type IssueRowSlotContext } from './IssuesView'
 import { compareIssues, subjectRef, type Issue, type IssueResourceRef } from './types'
 
 export function ResourceIssuesSection({
@@ -9,8 +9,10 @@ export function ResourceIssuesSection({
   onResourceClick,
   subjectResource,
   compact,
+  renderDetailSection,
 }: {
   compact?: boolean
+  renderDetailSection?: (ctx: IssueRowSlotContext) => ReactNode
   issues: Issue[] | undefined
   /** When provided, related resources in a causal link become clickable. */
   onResourceClick?: (ref: IssueResourceRef) => void
@@ -39,6 +41,7 @@ export function ResourceIssuesSection({
               key={key}
               issue={issue}
               compact={compact}
+              renderDetailSection={renderDetailSection}
               open={openId === key}
               onToggle={() => setOpenId((cur) => (cur === key ? null : key))}
               onResourceClick={onResourceClick}

package/src/components/issues/diagnostic.ts

@@ -52,6 +52,8 @@ export function diagnosticFactLabel(type: string): string {
       return 'Dependent pods';
     case 'admission_webhook_backend':
       return 'Admission dependency';
+    case 'network_policy_isolates':
+      return 'Affected resources';
     default:
       return type.replace(/_/g, ' ');
   }

package/src/components/issues/index.ts

@@ -16,7 +16,7 @@ export {
   issueSortAnchor,
   compareIssueSortAnchors,
 } from './types';
-export type { Issue, IssueConditionalCleanup, IssueFinalizerRemoval, IssueSeverity, IssueAffected, IssueResourceRef, IssueDiagnosticContext, IssueDiagnosticFact, IssueDiagnosticConfidence, IssueDiagnosticIssueRef, IssueDiagnosticRole, IssueIncidentParent, IssueChangeContext, IssueRecentChange, IssueRecentChangeField } from './types';
+export type { Issue, IssueConditionalCleanup, IssueFinalizerRemoval, IssueSeverity, IssueAffected, IssueResourceRef, IssueDiagnosticContext, IssueDiagnosticFact, IssueDiagnosticConfidence, IssueDiagnosticIssueRef, IssueDiagnosticRole, IssueIncidentParent, IssueChangeContext, IssueRecentChange, IssueRecentChangeField, IssueRunningPreviousValue, IssueWithheld } from './types';
 export {
   ISSUE_SEVERITY_LABEL,
   ISSUE_SEVERITY_BADGE_CLASS,

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

@@ -537,4 +537,30 @@ describe('IssueRow diagnosis raw messages', () => {
     expect(html).toContain('app path does not exist')
     expect(html).toContain('rpc error: code = Unknown desc = app path does not exist')
   })
+
+  it("doesn't present Radar's own summary as a raw error", () => {
+    const base = {
+      category: 'network_policy_denied',
+      category_group: 'networking',
+      severity: 'warning' as const,
+      reason: 'NetworkPolicy denies all ingress',
+      message: 'Would block all inbound traffic to the 2 pods behind Service recommendation',
+      cause: 'NetworkPolicy deny-all leaves the 2 pods behind Service recommendation with no allowed inbound traffic.',
+    }
+    const radar = renderToString(createElement(IssueRow, {
+      issue: mk({
+        ...base,
+        message_source: 'radar',
+        diagnostic_context: { role: 'candidate', facts: [{ type: 'network_policy_isolates', confidence: 'high', refs: [{ kind: 'Service', namespace: 'shop', name: 'recommendation' }] }] },
+      }),
+      open: true, onToggle: () => undefined, as: 'div',
+    }))
+    expect(radar).not.toContain('Raw error')
+    expect(radar).toContain('leaves the 2 pods behind Service recommendation')
+    expect(radar).toContain('Affected resources')
+
+    // Without the marker the message is still treated as detector output.
+    const unmarked = renderToString(createElement(IssueRow, { issue: mk(base), open: true, onToggle: () => undefined, as: 'div' }))
+    expect(unmarked).toContain('Raw error')
+  })
 })

package/src/components/issues/severity.ts

@@ -70,13 +70,14 @@ const CATEGORY_LABEL: Record<string, string> = {
   pdb_blocks_evictions: 'Evictions blocked',
   secret_sync_failed: 'Secret sync failed',
   service_no_endpoints: 'No endpoints',
+  service_mixed_backends: 'Mixed Service backends',
   ingress_backend_missing: 'Ingress backend missing',
   ingress_class_missing: 'Ingress class missing',
   load_balancer_pending: 'Load balancer pending',
   gateway_not_ready: 'Gateway not ready',
   gateway_route_invalid: 'Gateway route invalid',
   dns_failure: 'DNS failure',
-  network_policy_block: 'Network policy block',
+  network_policy_denied: 'Traffic denied by NetworkPolicy',
   pvc_pending: 'PVC pending',
   pvc_lost: 'PVC lost',
   pv_failed: 'PV failed',
@@ -87,7 +88,7 @@ const CATEGORY_LABEL: Record<string, string> = {
   backup_target_unavailable: 'Backup target unavailable',
   backup_stalled: 'Backup not progressing',
   job_failed: 'Job failed',
-  cronjob_failed: 'CronJob failed',
+  cronjob_failed: 'CronJob needs attention',
   rollout_stalled: 'Rollout stalled',
   hpa_limited_or_failed: 'Autoscaling limited',
   rbac_forbidden: 'Permission denied',
@@ -139,6 +140,12 @@ export function categoryLabel(category: string): string {
 // Reasons filed under a category whose label names a different operation:
 // CNPG archiving and an unanswered scheduled run sit under backup_failed.
 const REASON_TITLE: Record<string, string> = {
+  InvalidSchedule: 'Scheduling error reported',
+  UnparseableSchedule: 'Scheduling error reported',
+  UnParseableCronJobSchedule: 'Scheduling error reported',
+  UnknownTimeZone: 'Time zone error reported',
+  MissSchedule: 'Missed schedule reported',
+  TooManyMissedTimes: 'Missed schedules reported',
   CNPGWALArchivingFailing: "WAL archiving failing",
   CNPGLastBackupFailed: "Latest backup failed",
   CNPGScheduleDestinationMissing: "Backup schedule has no destination",