@skyhook-io/k8s-ui 1.14.4 → 1.14.6

package/src/components/charts/format.ts

@@ -4,8 +4,13 @@
 
 export function formatMetricValue(value: number, unit: string): string {
   if (value === 0) return '0'
+  if (value < 0) return `-${formatMetricValue(-value, unit)}`
 
   switch (unit) {
+    case 'percent':
+      return `${value.toFixed(value < 1 ? 2 : 1)}%`
+    case 'requests/s':
+      return `${value.toFixed(value < 1 ? 3 : 1)} req/s`
     case 'cores': {
       if (value < 0.0001) return '< 0.1m'
       if (value < 0.001) return `${(value * 1000).toFixed(1)}m`
@@ -26,12 +31,27 @@ export function formatMetricValue(value: number, unit: string): string {
       if (value < 1024 * 1024 * 1024) return `${(value / (1024 * 1024)).toFixed(1)} MiB/s`
       return `${(value / (1024 * 1024 * 1024)).toFixed(2)} GiB/s`
     }
+    case 'count':
+    case 'restarts': {
+      if (value < 10000) return value.toFixed(0)
+      if (value < 1e6) return `${(value / 1e3).toFixed(1)}k`
+      return `${(value / 1e6).toFixed(1)}M`
+    }
+    case 'seconds': {
+      if (value < 0.001) return `${(value * 1_000_000).toFixed(0)}µs`
+      if (value < 1) return `${(value * 1000).toFixed(value < 0.01 ? 2 : 0)}ms`
+      if (value < 60) return `${value.toFixed(value < 10 ? 2 : 1)}s`
+      if (value < 3600) return `${(value / 60).toFixed(1)}m`
+      return `${(value / 3600).toFixed(1)}h`
+    }
     default:
       if (value < 0.01) return value.toExponential(1)
       if (value < 1) return value.toFixed(3)
       if (value < 100) return value.toFixed(2)
       if (value < 10000) return value.toFixed(0)
-      return `${(value / 1000).toFixed(1)}k`
+      if (value < 1e6) return `${(value / 1e3).toFixed(1)}k`
+      if (value < 1e9) return `${(value / 1e6).toFixed(1)}M`
+      return `${(value / 1e9).toFixed(2)}G`
   }
 }
 

package/src/components/charts/index.ts

@@ -6,6 +6,7 @@ export {
   WORKLOAD_METRIC_CATEGORIES,
   NODE_METRIC_CATEGORIES,
   METRIC_TIME_RANGES,
+  describePodCoverage,
 } from './PrometheusChartsView'
 export type {
   PrometheusChartsViewProps,
@@ -14,13 +15,14 @@ export type {
   MetricCategoryDef,
   PrometheusResourceMetricsResult,
 } from './PrometheusChartsView'
-export { SERIES_COLORS, seriesColor, seriesFill, computeShortLabels } from './colors'
+export { SERIES_COLORS, seriesColor, seriesFill, computeShortLabels, seriesDisplayLabels } from './colors'
 export { formatMetricValue, formatTimestamp } from './format'
 export { computeSaturation } from './saturation'
 export type {
   TimeSeriesPoint,
   TimeSeries,
   ReferenceLine,
+  ChartAnnotation,
   // Deprecated Prom-prefixed aliases — see types.ts.
   PrometheusDataPoint,
   PrometheusSeries,

package/src/components/charts/nearestSample.test.ts

@@ -0,0 +1,31 @@
+import { describe, expect, it } from 'vitest'
+import { nearestSample } from './nearestSample'
+
+const points = [
+  { timestamp: 0, value: 0 },
+  { timestamp: 15, value: 2 },
+  { timestamp: 105, value: 3 },
+  { timestamp: 120, value: 4 },
+]
+
+describe('nearestSample', () => {
+  it('withholds hover values inside missing evaluations, including a single missing slot', () => {
+    expect(nearestSample(points, 60, 15)).toBeNull()
+    expect(nearestSample([{ timestamp: 0, value: 1 }, { timestamp: 30, value: 2 }], 15, 15)).toBeNull()
+    expect(nearestSample([...points, { timestamp: 135, value: null }], 135, 15)).toBeNull()
+  })
+
+  it('keeps measured zero and only snaps within half an evaluation interval', () => {
+    expect(nearestSample(points, 0, 15)).toEqual(points[0])
+    expect(nearestSample(points, 110, 15)).toEqual(points[2])
+    expect(nearestSample(points, -8, 15)).toBeNull()
+    expect(nearestSample(points, 128, 15)).toBeNull()
+  })
+
+  it('preserves unrestricted nearest-finite behavior for generic charts', () => {
+    expect(nearestSample(points, 60)).toEqual(points[1])
+    expect(nearestSample([...points, { timestamp: 135, value: null }], 135)).toEqual(points[3])
+    expect(nearestSample([], 0)).toBeNull()
+    expect(nearestSample([{ timestamp: 0, value: null }], 0)).toBeNull()
+  })
+})

package/src/components/charts/nearestSample.ts

@@ -0,0 +1,15 @@
+import type { TimeSeriesPoint } from './types'
+
+export function nearestSample(points: TimeSeriesPoint[], timestamp: number, stepSeconds?: number): { timestamp: number; value: number } | null {
+  let closest: { timestamp: number; value: number } | null = null
+  let distance = Infinity
+  for (const point of points) {
+    if (point.value == null) continue
+    const candidateDistance = Math.abs(point.timestamp - timestamp)
+    if (candidateDistance < distance) {
+      distance = candidateDistance
+      closest = { timestamp: point.timestamp, value: point.value }
+    }
+  }
+  return stepSeconds !== undefined && distance > stepSeconds / 2 ? null : closest
+}

package/src/components/charts/types.ts

@@ -35,3 +35,15 @@ export interface ReferenceLine {
   label: string
   kind: 'request' | 'limit'
 }
+
+/**
+ * Vertical marker on a chart at one instant. `kind` names what Radar recorded
+ * there; the chart draws the marker and its label and never implies that the
+ * marked instant explains the series around it.
+ */
+export interface ChartAnnotation {
+  /** Unix seconds, the same clock as {@link TimeSeriesPoint.timestamp}. */
+  timestamp: number
+  label: string
+  kind: 'change'
+}

package/src/components/checks/ChecksView.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useMemo, useRef, useState, type ComponentType, type ReactNode } from 'react'
 import { createPortal } from 'react-dom'
 import { AlertCircle, AlertOctagon, AlertTriangle, ChevronDown, ChevronRight, ExternalLink, EyeOff, Info, Layers, MoreHorizontal, Search, ShieldCheck, Wrench, X } from 'lucide-react'
-import { CardBody, CardSection, ClusterName, EmptyState, FilterPill, DistributionBar, DistributionLegendChip, Input, NEUTRAL_CHIP_CLASS, renderProse } from '../ui'
+import { AlertBanner, CardBody, CardSection, ClusterName, EmptyState, FilterPill, DistributionBar, DistributionLegendChip, Input, NEUTRAL_CHIP_CLASS, renderProse } from '../ui'
 import { useFilterState, defineFilterSchema } from '../../filter-state'
 import type { CheckMeta, CheckReference } from '../audit'
 import { CHECK_SEVERITIES, CHECK_SEVERITY_RANK, type Check, type CheckSeverity, type EffectiveCheckFinding, type CheckResourceRef } from './types'
@@ -56,6 +56,9 @@ export interface ChecksViewProps {
   catalog: Record<string, CheckMeta>
   /** True when at least one source returned audit data. */
   anyData: boolean
+  /** Evaluations and unavailable inputs for the scope supplied by the host. */
+  evaluated?: number
+  missingInputs?: string[]
   /** Deep-link href for a resource (host routing). Omit for non-link text. */
   resourceHref?: (ref: CheckResourceRef) => string
   /** In-app resource navigation (client-side). Takes precedence over href. */
@@ -106,7 +109,7 @@ const CHECKS_FILTER_SCHEMA = defineFilterSchema({
   q: { param: 'q', type: 'text' },
 })
 
-export function ChecksView({ checks, catalog, anyData, resourceHref, onResourceClick, clusterLabel, clusterLabelById, clusterFilter: clusterFilterProp, onClusterFilterChange, emptyAction, onHideCheck, onHideCategory }: ChecksViewProps) {
+export function ChecksView({ checks, catalog, anyData, evaluated, missingInputs = [], resourceHref, onResourceClick, clusterLabel, clusterLabelById, clusterFilter: clusterFilterProp, onClusterFilterChange, emptyAction, onHideCheck, onHideCategory }: ChecksViewProps) {
   // Severity / category / framework / search live in the URL (shareable,
   // bookmarkable audit links) via the shared filter-state contract. The cluster
   // facet is deliberately NOT here — it's a host-controlled seam (see
@@ -345,6 +348,14 @@ export function ChecksView({ checks, catalog, anyData, resourceHref, onResourceC
         </div>
       </div>
 
+      {missingInputs.length > 0 && (
+        <AlertBanner
+          variant="warning"
+          title="Some checks could not run"
+          message={<>Findings cover only available inputs. Unavailable inputs: {missingInputs.join(', ')}.</>}
+        />
+      )}
+
       {fleetChecks.length === 0 ? (
         hasFilters ? (
           <EmptyState
@@ -362,6 +373,13 @@ export function ChecksView({ checks, catalog, anyData, resourceHref, onResourceC
               </button>
             }
           />
+        ) : missingInputs.length > 0 ? (
+          <EmptyState
+            headline="No findings in the available data"
+            body="The audit is incomplete. This does not mean all checks passed."
+          />
+        ) : evaluated === 0 ? (
+          <EmptyState headline="No resources evaluated" body="No resources were evaluated with the current scope and check settings." />
         ) : anyData ? (
           <EmptyState
             tone="healthy"

package/src/components/gitops/GitOpsDetailLayout.tsx

@@ -4,6 +4,7 @@ import { PaneLoader } from '../ui/PaneLoader'
 
 import { HealthStatusBadge, SyncStatusBadge } from './GitOpsStatusBadge'
 import { GitOpsIssuesBand, GitOpsStatusStrip } from './insights'
+import { GitOpsHealthSourceNotice } from './GitOpsHealthSourceNotice'
 import { Tooltip } from '../ui/Tooltip'
 import type { GitOpsHealthStatus, GitOpsInsight, GitOpsIssue, GitOpsRemediation, SyncStatus } from '../../types'
 
@@ -138,6 +139,14 @@ export interface GitOpsDetailLayoutProps {
   // on the OSS-specific CodeViewer component.
   helmValuesContent?: ReactNode
 
+  // GitOpsHealthSourceNotice inputs: where its "Why?" link goes, and what
+  // (if anything) to say after the remote-destination sentence. Both are
+  // host decisions; the notice itself keys off `insight.summary`.
+  healthDocsUrl?: string
+  remoteDestinationHint?: ReactNode
+  // Opens the host's Argo CD settings, when it has such a place.
+  onOpenSettings?: () => void
+
   // Action buttons — Argo + Flux. Exactly one applies for any given CR.
   isArgoApp: boolean
   isFlux: boolean
@@ -222,6 +231,9 @@ export function GitOpsDetailLayout(props: GitOpsDetailLayoutProps) {
     helmValuesOpen,
     onToggleHelmValues,
     helmValuesContent,
+    healthDocsUrl,
+    remoteDestinationHint,
+    onOpenSettings,
     isArgoApp,
     isFlux,
     isFluxWorkload,
@@ -458,6 +470,7 @@ export function GitOpsDetailLayout(props: GitOpsDetailLayoutProps) {
       {!fullscreen && (
         <>
           <GitOpsStatusStrip insight={insight ?? undefined} loading={insightLoading} renderRevisionMeta={renderRevisionMeta} />
+          <GitOpsHealthSourceNotice summary={insight?.summary} changes={insight?.changes} docsUrl={healthDocsUrl} remoteDestinationHint={remoteDestinationHint} onOpenSettings={onOpenSettings} />
           <GitOpsIssuesBand
             issues={insight?.issues}
             terminating={terminating}

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">