@skyhook-io/k8s-ui 1.14.5 → 1.14.6

package/src/components/gitops/GitOpsHealthSourceNotice.tsx

@@ -0,0 +1,141 @@
+import { Info } from 'lucide-react'
+import type { ReactNode } from 'react'
+import type { GitOpsChange, GitOpsInsightSummary } from '../../types'
+
+// One quiet line above the Issues band for the two cases where per-resource
+// health on this page is not the controller's own verdict:
+//
+//  - Argo CD keeps per-resource health outside the Application object (its
+//    3.0+ default). Radar then reads the live resources itself, and every
+//    problem below is Radar's finding — the "Radar" markers say so per row;
+//    this line says so once.
+//  - The Application deploys to another cluster. Radar can't read its
+//    resources from here at all, so nothing is derived. A standalone Radar
+//    may add a pointer to Radar Cloud (the host passes it; embedded hosts
+//    pass nothing).
+//
+// Copy stays in plain words; the field names live behind the docs link.
+
+export const APP_TREE_HEALTH_NOTICE =
+  'Argo CD 3 no longer records health for each resource on the application. Rows marked "Found by Radar" are problems Radar detected by looking at the resources itself.'
+// Same situation, but Radar's own look found nothing to mark: the app is
+// Degraded by Argo's reckoning and nothing here says which resource. What
+// follows the sentence is the way out — the host's connect hint when it
+// has one, and the Argo knob either way.
+export const APP_TREE_NO_FINDINGS_NOTICE =
+  "Argo CD 3 no longer records health for each resource on the application, and Radar didn't find a problem on its own."
+export const APP_TREE_PERSIST_REMEDY =
+  'set controller.resource.health.persist to "true" in argocd-cmd-params-cm.'
+// The integration is set up and still didn't deliver: lead with that and
+// why — the user who configured it doesn't need the Argo CD 3 history
+// first — then say what the rows below are meanwhile.
+export const APP_TREE_API_ERROR_NOTICE = "Radar couldn't read Argo's per-resource health from your Argo CD server"
+export const APP_TREE_API_ERROR_FINDINGS = 'Meanwhile, rows marked "Found by Radar" are problems Radar detected by looking at the resources itself.'
+export const APP_TREE_API_ERROR_NO_FINDINGS = "Radar didn't find a problem on its own."
+
+export const REMOTE_DESTINATION_NOTICE =
+  "This application deploys to a different cluster, so its resources aren't visible from here."
+
+export type HealthSourceNoticeSummary = Pick<GitOpsInsightSummary, 'tool' | 'health' | 'resourceHealthMode' | 'remoteDestination' | 'resourceHealthFromApi' | 'resourceHealthApiError'>
+
+// The appTree notice explains problems Radar found on its own; on an app
+// Argo calls Healthy nothing is derived (the host doesn't run the overlay
+// there), and when the host read Argo's verdicts from its API server there
+// is nothing of Radar's to explain either.
+export function healthSourceNoticeKind(summary: HealthSourceNoticeSummary | undefined): 'remote' | 'appTree' | null {
+  if (!summary || summary.tool !== 'argocd') return null
+  if (summary.remoteDestination) return 'remote'
+  if (summary.resourceHealthMode === 'appTree' && !summary.resourceHealthFromApi && summary.health !== 'Healthy') return 'appTree'
+  return null
+}
+
+// Reads the same rows the "Found by Radar" markers read, so the sentence
+// and the markers can't disagree — an Issue can be suppressed (an operation
+// failure already names the resource) while the row still carries Radar's
+// health.
+export function hasRadarFinding(changes: GitOpsChange[] | undefined): boolean {
+  return (changes ?? []).some((c) => c.healthSource === 'radar' && (c.health === 'Degraded' || c.health === 'Missing'))
+}
+
+export function GitOpsHealthSourceNotice({
+  summary,
+  changes,
+  docsUrl,
+  remoteDestinationHint,
+  onOpenSettings,
+}: {
+  summary: HealthSourceNoticeSummary | undefined
+  // Decides between the two appTree sentences: with a Radar-sourced
+  // problem row the notice explains the markers; without one it says so
+  // and names the way out.
+  changes?: GitOpsChange[]
+  // Where "Why?" goes for the appTree case. Omitted → no link.
+  docsUrl?: string
+  // Rendered after the remote-destination sentence. The host decides
+  // whether there is anything to say (standalone Radar points at Radar
+  // Cloud; an embedded host passes nothing).
+  remoteDestinationHint?: ReactNode
+  // Opens the host's Argo CD settings. Only a host that has such a place
+  // passes it; the notice then offers connecting Radar to argocd-server as
+  // the first way out, and "check Settings" when a configured connection
+  // didn't deliver. Without it, only the Argo-side knob is named.
+  onOpenSettings?: () => void
+}) {
+  const kind = healthSourceNoticeKind(summary)
+  if (!kind) return null
+  // With nothing marked, the sentence only earns its place on an app Argo
+  // calls Degraded: that is the badge it explains. A Progressing or Missing
+  // app with no Radar finding has nothing here to attribute.
+  const radarFinding = hasRadarFinding(changes)
+  const apiError = summary?.resourceHealthApiError
+  if (kind === 'appTree' && !radarFinding && !apiError && summary?.health !== 'Degraded') return null
+  const settingsLink = (label: string) =>
+    onOpenSettings ? (
+      <button type="button" onClick={onOpenSettings} className="underline decoration-theme-border underline-offset-2 hover:text-theme-text-primary">
+        {label}
+      </button>
+    ) : null
+  return (
+    <div className="flex shrink-0 items-start gap-2 border-b border-theme-border bg-theme-base px-4 py-2 text-xs text-theme-text-secondary" role="note">
+      <Info className="mt-px h-3.5 w-3.5 shrink-0 text-theme-text-tertiary" />
+      <span className="min-w-0">
+        {kind === 'remote' ? (
+          <>
+            {REMOTE_DESTINATION_NOTICE}
+            {remoteDestinationHint ? <> {remoteDestinationHint}</> : null}
+          </>
+        ) : (
+          <>
+            {apiError ? (
+              <>
+                {APP_TREE_API_ERROR_NOTICE}: {apiError}.
+                {onOpenSettings && <> {settingsLink('Check Argo CD in Settings')}.</>}
+                {' '}
+                {radarFinding ? APP_TREE_API_ERROR_FINDINGS : APP_TREE_API_ERROR_NO_FINDINGS}
+              </>
+            ) : (
+              <>
+                {radarFinding ? APP_TREE_HEALTH_NOTICE : APP_TREE_NO_FINDINGS_NOTICE}
+                {!radarFinding && (
+                  <>
+                    {' '}
+                    To see Argo's per-resource health here, {onOpenSettings && <>{settingsLink('connect Radar to your Argo CD server')}, or </>}
+                    {APP_TREE_PERSIST_REMEDY}
+                  </>
+                )}
+              </>
+            )}
+            {docsUrl && (
+              <>
+                {' '}
+                <a href={docsUrl} target="_blank" rel="noreferrer" className="underline decoration-theme-border underline-offset-2 hover:text-theme-text-primary">
+                  Why?
+                </a>
+              </>
+            )}
+          </>
+        )}
+      </span>
+    </div>
+  )
+}

package/src/components/gitops/health-provenance.test.ts

@@ -0,0 +1,54 @@
+import { describe, expect, test } from 'vitest'
+
+import { RADAR_HEALTH_NOTE, radarHealthNote } from './health-provenance'
+import { APP_TREE_API_ERROR_NOTICE, APP_TREE_HEALTH_NOTICE, APP_TREE_NO_FINDINGS_NOTICE, APP_TREE_PERSIST_REMEDY, REMOTE_DESTINATION_NOTICE, hasRadarFinding, healthSourceNoticeKind } from './GitOpsHealthSourceNotice'
+
+describe('radarHealthNote', () => {
+  test('marks only Radar-sourced problems', () => {
+    expect(radarHealthNote({ health: 'Degraded', healthSource: 'radar' })).toBe(RADAR_HEALTH_NOTE)
+    expect(radarHealthNote({ health: 'Missing', healthSource: 'radar', healthMessage: 'not in cluster' })).toBe(`${RADAR_HEALTH_NOTE} not in cluster`)
+  })
+  test('is silent for the controller, for healthy values, and for unknown sources', () => {
+    expect(radarHealthNote({ health: 'Degraded', healthSource: 'controller' })).toBe('')
+    expect(radarHealthNote({ health: 'Degraded', healthSource: 'controllerApi' })).toBe('')
+    expect(radarHealthNote({ health: 'Healthy', healthSource: 'radar' })).toBe('')
+    expect(radarHealthNote({ health: 'Degraded' })).toBe('')
+    expect(radarHealthNote({ health: 'Degraded', healthSource: 'something-newer' })).toBe('')
+  })
+  test('copy stays in plain words', () => {
+    for (const copy of [RADAR_HEALTH_NOTE, APP_TREE_HEALTH_NOTICE, REMOTE_DESTINATION_NOTICE]) {
+      expect(copy).not.toMatch(/appTree|resourceHealthSource|persist|Tier|overlay/i)
+    }
+    // The remedy deliberately names the one Argo knob the user can turn;
+    // it must still avoid Radar's internal vocabulary. Radar's own Settings
+    // are the host's to name — an embedded host may have no such place.
+    for (const copy of [APP_TREE_NO_FINDINGS_NOTICE, APP_TREE_PERSIST_REMEDY, APP_TREE_API_ERROR_NOTICE]) {
+      expect(copy).not.toMatch(/appTree|Tier|overlay|Settings/i)
+    }
+    expect(APP_TREE_PERSIST_REMEDY).toContain('controller.resource.health.persist')
+  })
+
+  test('hasRadarFinding reads the rows the markers read', () => {
+    const row = (health: string, healthSource?: string) =>
+      ({ ref: { kind: 'Deployment', namespace: 'p', name: 'w' }, category: 'Unknown', health, healthSource, hasDesired: false, hasLive: true }) as const
+    expect(hasRadarFinding(undefined)).toBe(false)
+    expect(hasRadarFinding([row('Degraded', 'controller')])).toBe(false)
+    expect(hasRadarFinding([row('Healthy', 'radar')])).toBe(false)
+    expect(hasRadarFinding([row('Degraded', 'radar')])).toBe(true)
+    expect(hasRadarFinding([row('Missing', 'radar')])).toBe(true)
+  })
+})
+
+describe('healthSourceNoticeKind', () => {
+  test('remote destination wins over appTree, Flux never notices', () => {
+    expect(healthSourceNoticeKind({ tool: 'argocd', resourceHealthMode: 'appTree', remoteDestination: true })).toBe('remote')
+    expect(healthSourceNoticeKind({ tool: 'argocd', resourceHealthMode: 'appTree', health: 'Degraded' })).toBe('appTree')
+    expect(healthSourceNoticeKind({ tool: 'argocd', resourceHealthMode: 'appTree' })).toBe('appTree')
+    expect(healthSourceNoticeKind({ tool: 'argocd', resourceHealthMode: 'appTree', health: 'Healthy' })).toBeNull()
+    expect(healthSourceNoticeKind({ tool: 'argocd', resourceHealthMode: 'appTree', health: 'Degraded', resourceHealthFromApi: true })).toBeNull()
+    expect(healthSourceNoticeKind({ tool: 'argocd', resourceHealthMode: 'inline' })).toBeNull()
+    expect(healthSourceNoticeKind({ tool: 'argocd' })).toBeNull()
+    expect(healthSourceNoticeKind({ tool: 'fluxcd', resourceHealthMode: 'appTree' })).toBeNull()
+    expect(healthSourceNoticeKind(undefined)).toBeNull()
+  })
+})

package/src/components/gitops/health-provenance.ts

@@ -0,0 +1,24 @@
+// Copy and predicate for the "Radar" marker shown beside a problem the
+// GitOps controller did not assess itself — Argo CD 3 keeps per-resource
+// health out of the Application object, so Radar reads the live resource
+// instead and must say so. Shared by the tree node card and the Changes
+// table so the two never drift.
+
+// One sentence in plain words; the engine's own message follows it when
+// there is one.
+export const RADAR_HEALTH_NOTE = "Found by Radar. Argo CD's own health for this resource isn't available."
+
+export interface RadarHealthSubject {
+  health?: string
+  healthSource?: string
+  healthMessage?: string
+}
+
+// radarHealthNote returns the marker tooltip for a row/node whose problem
+// came from Radar rather than the controller, or '' when there is no
+// problem to mark or the controller assessed it.
+export function radarHealthNote(subject: RadarHealthSubject): string {
+  if (subject.healthSource !== 'radar') return ''
+  if (subject.health !== 'Degraded' && subject.health !== 'Missing') return ''
+  return subject.healthMessage ? `${RADAR_HEALTH_NOTE} ${subject.healthMessage}` : RADAR_HEALTH_NOTE
+}

package/src/components/gitops/index.ts

@@ -59,3 +59,5 @@ export type {
   FluxActionHandlers,
   GitOpsHelmValuesData,
 } from './GitOpsDetailLayout'
+export { GitOpsHealthSourceNotice, healthSourceNoticeKind, hasRadarFinding, APP_TREE_HEALTH_NOTICE, APP_TREE_NO_FINDINGS_NOTICE, REMOTE_DESTINATION_NOTICE } from './GitOpsHealthSourceNotice'
+export { radarHealthNote, RADAR_HEALTH_NOTE } from './health-provenance'

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

@@ -4,6 +4,7 @@ import { clsx } from 'clsx'
 import { Fragment, useEffect, useRef, useState, type ReactNode } from 'react'
 import type { GitOpsChange, GitOpsHistoryItem, GitOpsInsight, GitOpsInsightRef, GitOpsIssue, GitOpsPlanItem, GitOpsRemediation, GitOpsResourceTree, GitOpsTreeNode } from '../../../types'
 import { HealthStatusBadge, SyncStatusBadge } from '../GitOpsStatusBadge'
+import { radarHealthNote } from '../health-provenance'
 import { SEVERITY_BADGE, SEVERITY_TEXT } from '../../../utils/badge-colors'
 import { formatRelativeAgeTime } from '../../../utils/format'
 import { Tooltip } from '../../ui/Tooltip'
@@ -604,31 +605,36 @@ function GitOpsCompactIssueStack({ issues, onSelectIssue }: { issues: GitOpsIssu
         }}
         disabled={headlineAction === 'none'}
         className={clsx(
-          'group flex w-full items-center gap-2 px-4 py-2 text-left text-xs transition-colors',
+          'group flex w-full flex-col gap-0.5 px-4 py-2 text-left text-xs transition-colors',
           headlineAction !== 'none' ? 'hover:bg-theme-hover/50' : 'cursor-default',
         )}
         aria-expanded={canExpand ? expanded : undefined}
       >
-        {tone.icon}
-        <span className={clsx('shrink-0 font-semibold', tone.text)}>{headline.reason}</span>
-        <span className="min-w-0 flex-1 truncate text-theme-text-secondary">{headline.message}</span>
-        {/* Inline count when there are more issues behind the headline.
-            Lightweight text — pairs with the chevron as a single disclosure
-            unit instead of a separator-bordered count button. */}
-        {remaining > 0 && (
-          <span className="shrink-0 text-[11px] text-theme-text-tertiary">
-            +{remaining} more
-          </span>
-        )}
-        {/* Open-resource pill: only shown when the row's action IS to open
-            (single-issue case). When the row expands, the per-row Open
-            pills live inside the expanded section, scoped to each item. */}
-        {headlineAction === 'open' && headlineRef && (
-          <span className="shrink-0 text-[11px] font-medium text-theme-text-secondary opacity-70 transition-opacity group-hover:opacity-100">
-            Open {refText(headlineRef)} →
-          </span>
+        <div className="flex w-full items-center gap-2">
+          {tone.icon}
+          <span className={clsx('shrink-0 font-semibold', tone.text)}>{headline.reason}</span>
+          <span className="min-w-0 flex-1 truncate text-theme-text-secondary">{headline.message}</span>
+          {/* Inline count when there are more issues behind the headline.
+              Lightweight text — pairs with the chevron as a single disclosure
+              unit instead of a separator-bordered count button. */}
+          {remaining > 0 && (
+            <span className="shrink-0 text-[11px] text-theme-text-tertiary">
+              +{remaining} more
+            </span>
+          )}
+          {/* Open-resource pill: only shown when the row's action IS to open
+              (single-issue case). When the row expands, the per-row Open
+              pills live inside the expanded section, scoped to each item. */}
+          {headlineAction === 'open' && headlineRef && (
+            <span className="shrink-0 text-[11px] font-medium text-theme-text-secondary opacity-70 transition-opacity group-hover:opacity-100">
+              Open {refText(headlineRef)} →
+            </span>
+          )}
+          {canExpand && <CollapseChevron open={expanded} className="h-3.5 w-3.5" />}
+        </div>
+        {headline.cause && (
+          <p className="truncate pl-[22px] text-[11px] text-theme-text-tertiary">{headline.cause}</p>
         )}
-        {canExpand && <CollapseChevron open={expanded} className="h-3.5 w-3.5" />}
       </button>
       {canExpand && (
         <Collapse open={expanded}>
@@ -1225,6 +1231,9 @@ function buildTreeExtras(nodes: GitOpsTreeNode[], declared: GitOpsChange[]): Git
       category: 'Unknown',
       sync: n.sync,
       health: n.health,
+      // No healthSource: generated rows are always Radar's read and never
+      // had a controller verdict to be distinguished from.
+      message: n.healthMessage,
       hasDesired: false,
       hasLive: true,
       partial: true,
@@ -1347,6 +1356,7 @@ function ChangeRow({
   // 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 handleRowClick = () => {
     if (expandable) {
       setExpanded((v) => !v)
@@ -1453,7 +1463,16 @@ function ChangeRow({
             <SyncStatusBadge sync={normalizeSyncStatus(change.sync ?? change.category)} />
           )}
         </div>
-        <div className="self-start"><HealthStatusBadge health={normalizeHealthStatus(change.health)} /></div>
+        <div className="flex flex-col items-start gap-1 self-start">
+          <HealthStatusBadge health={normalizeHealthStatus(change.health)} />
+          {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">
+                Found by Radar
+              </span>
+            </Tooltip>
+          )}
+        </div>
         <div className="self-start space-y-1.5">
           {syncResourceButton && syncResourceDisabledReason ? (
             <Tooltip content={syncResourceDisabledReason} delay={200} wrapperClassName="block">

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

@@ -20,10 +20,11 @@ import { PaneLoader } from '../../ui/PaneLoader'
 import { Input } from '../../ui/Input'
 import { clsx } from 'clsx'
 
-import type { GitOpsResourceTree, GitOpsTreeNode, GitOpsTreeRef, HealthStatus } from '../../../types'
+import type { GitOpsIssue, GitOpsResourceTree, GitOpsTreeNode, GitOpsTreeRef, HealthStatus } from '../../../types'
 import { displayKind } from '../../../types'
 import { healthToSeverity, SEVERITY_DOT } from '../../../utils/badge-colors'
 import { formatCompactAge } from '../../../utils/format'
+import { radarHealthNote } from '../health-provenance'
 import { getTopologyIcon } from '../../../utils/resource-icons'
 import { Tooltip } from '../../ui/Tooltip'
 import { hasGitOpsTreeFilters, matchesGitOpsTreeFilters, type GitOpsTreeFilters } from './tree-helpers'
@@ -64,6 +65,22 @@ interface GitOpsTreeGraphProps {
   onQueryChange?: (query: string) => void
   filters?: GitOpsTreeFilters
   showToolbar?: boolean
+  // Root-cause issues from the same detail page's insights fetch (already
+  // loaded alongside the tree — no extra request). Matched onto tree nodes
+  // by ref so an unhealthy node's hover reveals WHY, not just THAT.
+  issues?: GitOpsIssue[]
+}
+
+// refKey builds a stable lookup key from either a tree ref or an insight
+// ref. Namespace is omitted for cluster-scoped resources on both sides, so
+// normalize the missing case the same way instead of using `undefined` vs
+// `''` as accidentally distinct keys. Group is included for the same
+// reason CLAUDE.md calls out elsewhere (Knative Service vs core Service,
+// CNPG Cluster vs CAPI Cluster) — kind+namespace+name alone collides across
+// a real, documented class of same-plural CRDs, which would show one
+// resource's cause/tooltip on a completely unrelated node.
+function refKey(ref: { group?: string; kind: string; namespace?: string; name: string }): string {
+  return `${ref.group ?? ''}/${ref.kind}/${ref.namespace ?? ''}/${ref.name}`
 }
 
 export function GitOpsTreeGraph(props: GitOpsTreeGraphProps) {
@@ -85,6 +102,7 @@ function GitOpsTreeGraphInner({
   onQueryChange,
   filters,
   showToolbar = true,
+  issues,
 }: GitOpsTreeGraphProps) {
   const [internalPreset, setInternalPreset] = useState<GitOpsTreePreset>('compact')
   const [internalQuery, setInternalQuery] = useState('')
@@ -104,7 +122,20 @@ function GitOpsTreeGraphInner({
   useEffect(() => {
     if (preset !== 'compact') setExpandedGroups(new Set())
   }, [preset])
-  const { nodes, edges } = useMemo(() => buildFlowGraph(tree, preset, query, filters, expandedGroups), [tree, preset, query, filters, expandedGroups])
+  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 { nodes, edges } = useMemo(() => buildFlowGraph(tree, preset, query, filters, expandedGroups, causeByRef), [tree, preset, query, filters, expandedGroups, causeByRef])
 
   useEffect(() => {
     if (nodes.length === 0) return
@@ -297,7 +328,7 @@ function getEdgeColor(type: string): string {
   }
 }
 
-function buildFlowGraph(tree: GitOpsResourceTree | null, preset: GitOpsTreePreset, query: string, filters?: GitOpsTreeFilters, expandedGroups?: Set<string>): { nodes: Node[]; edges: Edge[] } {
+function buildFlowGraph(tree: GitOpsResourceTree | null, preset: GitOpsTreePreset, query: string, filters?: GitOpsTreeFilters, expandedGroups?: Set<string>, causeByRef?: Map<string, string>): { 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]))
@@ -321,6 +352,7 @@ function buildFlowGraph(tree: GitOpsResourceTree | null, preset: GitOpsTreePrese
       data: {
         node,
         highlighted: normalizedQuery !== '' && matchesQuery(node, normalizedQuery),
+        cause: causeByRef?.get(refKey(node.ref)),
       },
     }
   })
@@ -543,7 +575,7 @@ function positionRanks(ranks: Map<number, string[]>, nodes: Map<string, GitOpsTr
   return positioned
 }
 
-const GitOpsResourceNode = memo(function GitOpsResourceNode({ data }: NodeProps<Node<{ node: GitOpsTreeNode; highlighted?: boolean }>>) {
+const GitOpsResourceNode = memo(function GitOpsResourceNode({ data }: NodeProps<Node<{ node: GitOpsTreeNode; highlighted?: boolean; cause?: string }>>) {
   const node = data.node
   const kind = normalizeDisplayKind(node)
   const status = normalizeHealth(node.topologyStatus)
@@ -552,10 +584,16 @@ const GitOpsResourceNode = memo(function GitOpsResourceNode({ data }: NodeProps<
   const chips = buildChips(node)
   const dim = getNodeDimensions(node)
   const KindIcon = getTopologyIcon(kind)
-
-  return (
-    <>
-      <Handle type="target" position={Position.Left} className="!h-0 !w-0 !border-0 !bg-transparent" />
+  // 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 = status === 'unhealthy' || status === 'degraded' ? data.cause : undefined
+  // Only declared resources can carry the controller's verdict, so only
+  // there does "this one is Radar's" mean anything. Generated children
+  // (ReplicaSets, Pods) are always Radar's read; marking each would be
+  // noise.
+  const radarNote = node.role === 'declared' ? radarHealthNote(node) : ''
+
+  const card = (
       <div
         className={clsx(
           'relative overflow-hidden rounded-lg border bg-theme-surface shadow-md transition-colors',
@@ -636,10 +674,23 @@ const GitOpsResourceNode = memo(function GitOpsResourceNode({ data }: NodeProps<
                   {chip.label ? `${chip.label}: ` : ''}{chip.value}
                 </span>
               ))}
+              {radarNote && (
+                <Tooltip content={radarNote} delay={200}>
+                  <span className="rounded border border-theme-border bg-theme-elevated/70 px-1.5 py-0.5 text-[10px] leading-3 text-theme-text-tertiary">
+                    Found by Radar
+                  </span>
+                </Tooltip>
+              )}
             </div>
           )}
         </div>
       </div>
+  )
+
+  return (
+    <>
+      <Handle type="target" position={Position.Left} className="!h-0 !w-0 !border-0 !bg-transparent" />
+      {cause ? <Tooltip content={cause} delay={200}>{card}</Tooltip> : card}
       <Handle type="source" position={Position.Right} className="!h-0 !w-0 !border-0 !bg-transparent" />
     </>
   )

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

@@ -41,6 +41,40 @@ function destNode(
 }
 
 describe('mergeGitOpsTrees', () => {
+  // Health provenance follows the health value: when the destination's live
+  // health replaces the controller's, its source/reason/message come along;
+  // a destination node with no health leaves the controller's provenance.
+  test('health provenance travels with whichever health wins', () => {
+    const controller: GitOpsResourceTree = {
+      root: ctrlNode('app1', 'Application', 'app1', 'argocd', { role: 'root' }),
+      nodes: [
+        ctrlNode('app1', 'Application', 'app1', 'argocd', { role: 'root' }),
+        ctrlNode('dep1', 'Deployment', 'web', 'prod', { health: 'Healthy', healthSource: 'controller' }),
+        ctrlNode('css1', 'ClusterSecretStore', 'platform', '', { health: 'Degraded', healthSource: 'radar', healthReason: 'Ready: Bad', healthMessage: 'no route' }),
+      ],
+      edges: [],
+    }
+    const destination: GitOpsResourceTree = {
+      root: destNode('dest-root', 'Application', 'app1', 'argocd', { role: 'root' }),
+      nodes: [
+        destNode('dest-root', 'Application', 'app1', 'argocd', { role: 'root' }),
+        destNode('dest-dep1', 'Deployment', 'web', 'prod', { health: 'Degraded', healthSource: 'radar', healthReason: 'CrashLoopBackOff', healthMessage: 'back-off' }),
+        destNode('dest-css1', 'ClusterSecretStore', 'platform', ''),
+      ],
+      edges: [],
+    }
+    const merged = mergeGitOpsTrees(controller, destination)
+    const dep = merged.nodes.find((n) => n.ref.kind === 'Deployment')!
+    expect(dep.health).toBe('Degraded')
+    expect(dep.healthSource).toBe('radar')
+    expect(dep.healthReason).toBe('CrashLoopBackOff')
+    expect(dep.healthMessage).toBe('back-off')
+    const css = merged.nodes.find((n) => n.ref.kind === 'ClusterSecretStore')!
+    expect(css.health).toBe('Degraded')
+    expect(css.healthSource).toBe('radar')
+    expect(css.healthReason).toBe('Ready: Bad')
+  })
+
   // The classic in-cluster case — caller didn't fetch a destination tree
   // (single-cluster app) so destination is null. Returning the controller
   // tree unchanged is what preserves Argo's status + summary tile counts

package/src/components/gitops/tree/merge.ts

@@ -85,10 +85,17 @@ export function mergeGitOpsTrees(
   // resource-viewer routing.
   const nodes: GitOpsTreeNode[] = controller.nodes.map((n) => {
     const dest = destByKey.get(refKey(n.ref))
+    // Health provenance travels with the health it describes: when the
+    // destination's live health wins, so do its source/reason/message.
+    const healthFrom = dest?.health ? dest : n
     const merged = dest
       ? {
           ...n,
           health: dest.health ?? n.health,
+          healthSource: healthFrom.healthSource,
+          healthReason: healthFrom.healthReason,
+          healthMessage: healthFrom.healthMessage,
+          healthSeverity: healthFrom.healthSeverity,
           info: dest.info ?? n.info,
           topologyStatus: dest.topologyStatus ?? n.topologyStatus,
         }