@skyhook-io/k8s-ui 1.14.5 → 1.14.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/k8s-ui",
-  "version": "1.14.5",
+  "version": "1.14.6",
   "repository": {
     "type": "git",
     "url": "https://github.com/skyhook-io/radar",
@@ -89,8 +89,8 @@
   },
   "devDependencies": {
     "@types/node": "^26.2.0",
-    "@types/react": "^19.2.18",
-    "@types/react-dom": "^19.2.3",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
     "@xterm/addon-fit": "^0.11.0",
     "@xterm/addon-web-links": "^0.12.0",
     "@xterm/xterm": "^6.0.0",
@@ -100,8 +100,8 @@
     "elkjs": "^0.11.1",
     "lucide-react": "^1.37.0",
     "monaco-editor": "0.55.1",
-    "react": "^19.2.8",
-    "react-dom": "^19.2.8",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0",
     "typescript": "^6.0.2",
     "vitest": "^4.1.11",
     "yaml": "^2.9.0"

package/src/components/audit/AuditCard.tsx

@@ -1,9 +1,10 @@
-import { ClipboardCheck, ArrowRight, Check } from 'lucide-react'
+import { ClipboardCheck, ArrowRight, Check, AlertTriangle } from 'lucide-react'
 import { clsx } from 'clsx'
 import { SEVERITY_TEXT, SEVERITY_DOT } from '../../utils/badge-colors'
 import { SEVERITY_FILL_CLASS, SEVERITY_TEXT_CLASS } from '../checks/severity'
 
 export interface AuditCardData {
+  missingInputs?: string[]
   passing: number
   /** Raw compatibility counts; warning renders as Medium and danger as High. */
   warning: number
@@ -17,16 +18,17 @@ interface AuditCardProps {
   onNavigate: () => void
 }
 
-type SeverityLevel = 'success' | 'high' | 'medium'
+type SeverityLevel = 'success' | 'high' | 'medium' | 'neutral'
 
 function getSeverityLevel(data: AuditCardData): SeverityLevel {
-  if (data.warning + data.danger === 0) return 'success'
+  if (data.warning + data.danger === 0) return data.missingInputs?.length || data.passing === 0 ? 'neutral' : 'success'
   const highRatio = data.danger / (data.warning + data.danger)
   if (highRatio > 0.2) return 'high'
   return 'medium'
 }
 
 const ACCENT_BG: Record<SeverityLevel, string> = {
+  neutral: 'bg-theme-elevated',
   success: 'bg-green-500/10',
   high: 'bg-orange-500/10',
   medium: 'bg-yellow-500/10',
@@ -35,9 +37,10 @@ const ACCENT_BG: Record<SeverityLevel, string> = {
 export function AuditCard({ data, onNavigate }: AuditCardProps) {
   const total = data.passing + data.warning + data.danger
   const issueCount = data.warning + data.danger
-  const allPassing = issueCount === 0
+  const incomplete = (data.missingInputs?.length ?? 0) > 0
+  const allPassing = issueCount === 0 && total > 0 && !incomplete
   const level = getSeverityLevel(data)
-  const accentColor = level === 'success' ? SEVERITY_TEXT.success : SEVERITY_TEXT_CLASS[level]
+  const accentColor = level === 'neutral' ? 'text-theme-text-secondary' : level === 'success' ? SEVERITY_TEXT.success : SEVERITY_TEXT_CLASS[level]
   const accentBg = ACCENT_BG[level]
 
   return (
@@ -56,7 +59,7 @@ export function AuditCard({ data, onNavigate }: AuditCardProps) {
               </span>
             ) : (
               <span className={clsx('badge-sm', accentBg, accentColor)}>
-                <Check className="w-3 h-3" />
+                {allPassing ? <Check className="w-3 h-3" /> : <ClipboardCheck className="w-3 h-3" />}
               </span>
             )}
           </div>
@@ -71,6 +74,12 @@ export function AuditCard({ data, onNavigate }: AuditCardProps) {
                 <span className="text-xs text-theme-text-tertiary">{total} checks across {Object.keys(data.categories).length} categories</span>
               )}
             </div>
+          ) : issueCount === 0 ? (
+            <div className="flex flex-col items-center gap-2 text-center">
+              {incomplete ? <AlertTriangle className="w-8 h-8 text-warning-text" /> : <ClipboardCheck className="w-8 h-8 text-theme-text-tertiary" />}
+              <span className="text-sm font-medium text-theme-text-primary">{incomplete ? 'Some checks could not run' : 'No resources evaluated'}</span>
+              <span className="text-xs text-theme-text-secondary">{incomplete ? 'No findings in the available data.' : 'Check the selected scope and check settings.'}</span>
+            </div>
           ) : (
             <>
               {/* Distribution bar — only show when we have passing data for context */}
@@ -107,7 +116,7 @@ export function AuditCard({ data, onNavigate }: AuditCardProps) {
                           )}
                         </div>
                       ) : (
-                        <span className={clsx('text-xs font-semibold', SEVERITY_TEXT.success)}>All passing</span>
+                        <span className={clsx('text-xs font-semibold', incomplete ? 'text-theme-text-secondary' : SEVERITY_TEXT.success)}>{incomplete ? 'No findings' : 'All passing'}</span>
                       )}
                     </div>
                   )
@@ -117,6 +126,8 @@ export function AuditCard({ data, onNavigate }: AuditCardProps) {
           )}
         </div>
 
+        {incomplete && issueCount > 0 && <p className="px-4 pb-2 text-xs text-warning-text">Some checks could not run.</p>}
+
         <div className="px-4 py-1.5 border-t border-theme-border/50 flex items-center justify-end">
           <span className={clsx(
             'flex items-center gap-1.5 text-[10px] font-semibold uppercase tracking-wider transition-colors',

package/src/components/audit/AuditCoveragePresentation.test.tsx

@@ -0,0 +1,45 @@
+import { describe, expect, it } from 'vitest'
+import { renderToString } from 'react-dom/server'
+import { AuditCard } from './AuditCard'
+import { ChecksView } from '../checks/ChecksView'
+import { FilterLocationProvider } from '../../filter-state'
+
+describe('audit coverage presentation', () => {
+  for (const [passing, missingInputs, expected] of [
+    [0, [], 'No resources evaluated'],
+    [0, ['secrets'], 'Some checks could not run'],
+    [4, ['secrets'], 'Some checks could not run'],
+    [4, [], 'All checks passing'],
+  ] as const) {
+    it(`shows ${expected} with ${passing} passing and ${missingInputs.length} unavailable inputs`, () => {
+      const html = renderToString(<AuditCard data={{ passing, missingInputs: [...missingInputs], warning: 0, danger: 0, categories: {} }} onNavigate={() => {}} />)
+      expect(html).toContain(expected)
+      if (missingInputs.length || passing === 0) expect(html).not.toContain('All checks passing')
+    })
+  }
+  it('keeps a coverage warning alongside real findings', () => {
+    const html = renderToString(<AuditCard data={{ passing: 1, missingInputs: ['secrets'], warning: 1, danger: 0, categories: { Security: { passing: 1, warning: 0, danger: 0 } } }} onNavigate={() => {}} />)
+    expect(html).toContain('Some checks could not run')
+    expect(html).not.toContain('All passing')
+  })
+  for (const [evaluated, missingInputs, expected] of [
+    [0, [], 'No resources evaluated'],
+    [0, ['secrets'], 'No findings in the available data'],
+    [4, ['secrets'], 'No findings in the available data'],
+    [4, [], 'Every audited resource passed'],
+  ] as const) {
+    it(`Checks: ${expected}`, () => {
+      const html = renderToString(
+        <FilterLocationProvider value={{ searchParams: new URLSearchParams(), update: () => {} }}>
+          <ChecksView checks={[]} catalog={{}} anyData evaluated={evaluated} missingInputs={[...missingInputs]} />
+        </FilterLocationProvider>,
+      )
+      expect(html).toContain(expected)
+      if (missingInputs.length) {
+        expect(html).toContain('Unavailable inputs:')
+        expect(html).toContain('secrets')
+        expect(html).not.toContain('Every audited resource passed')
+      }
+    })
+  }
+})

package/src/components/charts/AreaChart.test.tsx

@@ -102,6 +102,19 @@ describe('AreaChart domain and axes', () => {
     expect(attrs(render({ series: [series([[0, 1], [3600, 5]])] }), 'path', 'fill').filter(fill => fill === 'none')).toHaveLength(1)
   })
 
+  it('breaks omitted evaluations only when the caller supplies the interval', () => {
+    const sparse = [series([[0, 1], [15, 2], [105, 3], [120, 4]])]
+    const paths = (stepSeconds?: number) => attrs(render({ series: sparse, stepSeconds }), 'path', 'fill').filter(fill => fill === 'none')
+    expect(paths(15)).toHaveLength(2)
+    expect(paths()).toHaveLength(1)
+  })
+
+  it('preserves explicit gaps, zeros and isolated-sample behavior with a known interval', () => {
+    const gaps = [series([[0, 0], [15, 0], [30, null], [45, 1], [60, 2]])]
+    expect(attrs(render({ series: gaps, stepSeconds: 15 }), 'path', 'fill').filter(fill => fill === 'none')).toHaveLength(2)
+    expect(attrs(render({ series: [series([[0, 1]])], stepSeconds: 15 }), 'path', 'fill')).toHaveLength(0)
+  })
+
   it('renders nothing for an empty series list', () => {
     expect(render({ series: [] })).toBe('')
   })

package/src/components/charts/AreaChart.tsx

@@ -5,6 +5,7 @@ import { formatMetricValue, formatTimestamp } from './format'
 import { layoutAnnotations } from './annotations'
 import { chartLayout, integerAxisTop, isCountUnit, yAxisValues } from './axis'
 import type { TimeSeries, ReferenceLine, ChartAnnotation } from './types'
+import { nearestSample } from './nearestSample'
 
 // Below this rendered width the annotation label pills would cover most of the
 // plot once the 1000-unit viewBox is scaled down; the lines stay and the label
@@ -12,7 +13,7 @@ import type { TimeSeries, ReferenceLine, ChartAnnotation } from './types'
 export const ANNOTATION_LABEL_MIN_WIDTH_PX = 420
 const ANNOTATION_HOVER_TOLERANCE = 8
 
-export function AreaChart({ series, color, fillColor, unit, referenceLines, annotations, domain, seriesLabels, layout = 'full' }: {
+export function AreaChart({ series, color, fillColor, unit, referenceLines, annotations, domain, seriesLabels, stepSeconds, layout = 'full' }: {
   series: TimeSeries[]
   color: string
   fillColor: string
@@ -22,6 +23,8 @@ export function AreaChart({ series, color, fillColor, unit, referenceLines, anno
   annotations?: ChartAnnotation[]
   /** X axis window in unix seconds. Defaults to the sample extent. */
   domain?: { start: number; end: number }
+  /** Expected positive sample interval; omitted evaluations break paths and cannot supply hover values. */
+  stepSeconds?: number
   /**
    * Display name per series, parallel to `series`. Pass it when the chart
    * shows a subset of a larger result so names stay distinguishable across
@@ -32,16 +35,18 @@ export function AreaChart({ series, color, fillColor, unit, referenceLines, anno
    * 'full' is the fixed wide layout every existing caller gets. 'auto' switches
    * to the compact layout (two ticks per axis, larger text, taller plot) when
    * the rendered chart is narrower than ANNOTATION_LABEL_MIN_WIDTH_PX;
-   * 'compact' forces it.
+   * 'compact' forces it. 'dashboard' uses readable, medium-width axes and
+   * keeps text and plot height stable as its container resizes.
    */
-  layout?: 'full' | 'auto' | 'compact'
+  layout?: 'full' | 'auto' | 'compact' | 'dashboard'
 }) {
   const svgRef = useRef<SVGSVGElement>(null)
   const wrapperRef = useRef<HTMLDivElement>(null)
   const [hoverX, setHoverX] = useState<number | null>(null)
   const [labelsFit, setLabelsFit] = useState(true)
+  const [renderedWidth, setRenderedWidth] = useState(0)
   const multiSeries = series.length > 1
-  const compact = layout === 'compact' || (layout === 'auto' && !labelsFit)
+  const compact = layout === 'compact' || (layout === 'auto' && !labelsFit) || (layout === 'dashboard' && renderedWidth > 0 && renderedWidth < 300)
   const countAxis = isCountUnit(unit)
 
   const chartData = useMemo(() => {
@@ -91,14 +96,14 @@ export function AreaChart({ series, color, fillColor, unit, referenceLines, anno
   // Layout constants. marginLeft sized for the widest expected Y-tick label
   // ("422.4 MiB" etc.) — narrow grid panels squeeze the X axis so labels
   // need extra viewBox-space to survive the down-scale.
-  const base = chartLayout(compact)
+  const base = chartLayout(compact, layout === 'dashboard', renderedWidth)
   const { width, height, marginRight, marginTop, marginBottom, fontSize, yIntervals, xIntervals } = base
   const yValues = chartData ? yAxisValues(chartData.yMin, chartData.yMax, yIntervals, countAxis) : []
   const yLabels = yValues.map(val => formatMetricValue(val, unit))
   // The compact layout's larger text makes a label like "161.5 MiB" wider
   // than the fixed margin, and SVG clips it; grow the margin to the widest
   // label there. The full layout keeps its fixed margin for existing callers.
-  const marginLeft = compact
+  const marginLeft = compact || layout === 'dashboard'
     ? Math.max(base.marginLeft, Math.ceil(Math.max(0, ...yLabels.map(label => label.length)) * fontSize * 0.62 + 12))
     : base.marginLeft
   const plotWidth = width - marginLeft - marginRight
@@ -128,10 +133,10 @@ export function AreaChart({ series, color, fillColor, unit, referenceLines, anno
       const ts = minTs + ((maxTs - minTs) / xIntervals) * i
       // In the compact layout the two labels sit at the plot edges and would
       // otherwise spill past the viewBox.
-      const anchor: 'start' | 'middle' | 'end' = !compact ? 'middle' : i === 0 ? 'start' : 'end'
+      const anchor: 'start' | 'middle' | 'end' = !(compact || layout === 'dashboard') ? 'middle' : i === 0 ? 'start' : i === xIntervals ? 'end' : 'middle'
       return { ts, x: toX(ts), label: formatTimestamp(ts), anchor }
     })
-  }, [chartData, xIntervals, compact])
+  }, [chartData, xIntervals, compact, layout, marginLeft, plotWidth])
 
   const paths = useMemo(() => {
     if (!chartData) return []
@@ -155,6 +160,7 @@ export function AreaChart({ series, color, fillColor, unit, referenceLines, anno
       // rather than bridging across missing data or dropping to y=0. Each run
       // becomes its own path segment; a run needs >=2 points to render a line.
       let run: { x: number; y: number }[] = []
+      let previousTimestamp: number | undefined
       let runIdx = 0
       const flush = () => {
         if (run.length >= 2) {
@@ -177,15 +183,18 @@ export function AreaChart({ series, color, fillColor, unit, referenceLines, anno
       for (const dp of s.dataPoints) {
         if (dp.value == null) {
           flush()
+          previousTimestamp = undefined
           continue
         }
+        if (stepSeconds !== undefined && previousTimestamp !== undefined && dp.timestamp - previousTimestamp > stepSeconds * 1.5) flush()
         run.push({ x: toX(dp.timestamp), y: toY(dp.value) })
+        previousTimestamp = dp.timestamp
       }
       flush()
     })
 
     return segments
-  }, [chartData])
+  }, [chartData, marginLeft, plotWidth, marginTop, plotHeight, multiSeries, color, fillColor, stepSeconds])
 
   const placedAnnotations = useMemo(() => {
     if (!chartData || !annotations?.length) return []
@@ -195,12 +204,16 @@ export function AreaChart({ series, color, fillColor, unit, referenceLines, anno
       { minTs: chartData.minTs, maxTs: chartData.maxTs },
       { left: marginLeft, right: width - marginRight },
     )
-  }, [chartData, annotations])
+  }, [chartData, annotations, width, marginLeft, marginRight])
 
   useEffect(() => {
     const el = wrapperRef.current
-    if (!el || (placedAnnotations.length === 0 && layout !== 'auto') || typeof ResizeObserver === 'undefined') return
-    const update = () => setLabelsFit(el.getBoundingClientRect().width >= ANNOTATION_LABEL_MIN_WIDTH_PX)
+    if (!el || (placedAnnotations.length === 0 && layout !== 'auto' && layout !== 'dashboard') || typeof ResizeObserver === 'undefined') return
+    const update = () => {
+      const measuredWidth = el.getBoundingClientRect().width
+      setLabelsFit(measuredWidth >= ANNOTATION_LABEL_MIN_WIDTH_PX)
+      if (layout === 'dashboard') setRenderedWidth(measuredWidth)
+    }
     update()
     const observer = new ResizeObserver(update)
     observer.observe(el)
@@ -236,18 +249,7 @@ export function AreaChart({ series, color, fillColor, unit, referenceLines, anno
       if (ts < seriesMin - tolerance || ts > seriesMax + tolerance) {
         return null
       }
-      // Only snap to finite points — a gap (undefined value) has no value to
-      // show and would render NaN in the tooltip / a dot at y=NaN.
-      let closest: { timestamp: number; value: number } | null = null
-      let closestDist = Infinity
-      for (const dp of dps) {
-        if (dp.value == null) continue
-        const dist = Math.abs(dp.timestamp - ts)
-        if (dist < closestDist) {
-          closestDist = dist
-          closest = { timestamp: dp.timestamp, value: dp.value }
-        }
-      }
+      const closest = nearestSample(dps, ts, stepSeconds)
       if (!closest) return null
       return {
         label: shortLabels[vi],
@@ -263,7 +265,7 @@ export function AreaChart({ series, color, fillColor, unit, referenceLines, anno
     )
 
     return { ts, x: clampedX, points, nearbyAnnotations }
-  }, [hoverX, chartData, placedAnnotations, seriesLabels])
+  }, [hoverX, chartData, placedAnnotations, seriesLabels, marginLeft, plotWidth, marginTop, plotHeight, multiSeries, color, stepSeconds])
 
   const handleMouseMove = useCallback((e: React.MouseEvent<SVGRectElement>) => {
     const svg = svgRef.current
@@ -286,6 +288,7 @@ export function AreaChart({ series, color, fillColor, unit, referenceLines, anno
         ref={svgRef}
         viewBox={`0 0 ${width} ${height}`}
         className="w-full h-full"
+        style={layout === 'dashboard' ? { height: 240 } : undefined}
         preserveAspectRatio="xMidYMid meet"
         data-chart-layout={compact ? 'compact' : 'full'}
       >

package/src/components/charts/PrometheusChartsView.tsx

@@ -157,6 +157,8 @@ export interface PrometheusChartsViewProps {
   statusError?: string;
   onConnect: () => void;
   connecting: boolean;
+  /** Discovery is running server-side (not triggered by this view); show progress, not the CTA. */
+  discovering?: boolean;
   // Selection (controlled by host)
   category: PrometheusMetricCategory;
   onCategoryChange: (c: PrometheusMetricCategory) => void;
@@ -177,6 +179,7 @@ export function PrometheusChartsView({
   statusError,
   onConnect,
   connecting,
+  discovering = false,
   category,
   onCategoryChange,
   range,
@@ -208,6 +211,15 @@ export function PrometheusChartsView({
     if (!metricsLoading && !metricsError && !series.length) return null;
   }
 
+  if (!isConnected && discovering) {
+    return (
+      <div className="flex items-center justify-center py-12 text-theme-text-tertiary">
+        <Loader2 className="mr-2 h-5 w-5 animate-spin" />
+        Discovering Prometheus…
+      </div>
+    );
+  }
+
   if (!isConnected) {
     return (
       <div className="flex flex-col items-center justify-center gap-4 py-12">

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

@@ -29,4 +29,20 @@ describe('integer axes', () => {
     expect(compact.fontSize).toBeGreaterThan(full.fontSize)
     expect(compact.height / compact.width).toBeGreaterThan(full.height / full.width)
   })
+
+  it('keeps dashboard axes readable without changing existing layouts', () => {
+    const dashboard = chartLayout(false, true)
+    expect([dashboard.width, dashboard.height, dashboard.fontSize]).toEqual([600, 240, 14])
+    expect(chartLayout(true, true)).toEqual(chartLayout(true))
+    expect(chartLayout(false).width).toBe(1000)
+  })
+  it('fits dashboard plots to their container without scaling text or height', () => {
+    for (const width of [280, 380, 550, 1050]) {
+      const layout = chartLayout(width < 420, true, width)
+      expect(layout.width).toBe(width)
+      expect(layout.height).toBe(240)
+      expect(layout.fontSize).toBe(12)
+    }
+    expect(chartLayout(false, false, 500)).toEqual(chartLayout(false))
+  })
 })

package/src/components/charts/axis.ts

@@ -18,7 +18,9 @@ export interface ChartLayout {
 // The compact layout trades tick density for legible text: a 400-unit
 // viewBox scaled into a ~280px pane keeps 14-unit text near 10px, where the
 // full layout's 11-unit text in a 1000-unit viewBox would be 3px.
-export function chartLayout(compact: boolean): ChartLayout {
+export function chartLayout(compact: boolean, dashboard = false, renderedWidth = 0): ChartLayout {
+  if (dashboard && renderedWidth > 0) return { width: renderedWidth, height: 240, marginLeft: 60, marginRight: 14, marginTop: 12, marginBottom: 28, fontSize: 12, yIntervals: compact ? 1 : 2, xIntervals: compact ? 1 : renderedWidth >= 760 ? 4 : 2 }
+  if (dashboard && !compact) return { width: 600, height: 240, marginLeft: 90, marginRight: 24, marginTop: 12, marginBottom: 28, fontSize: 14, yIntervals: 2, xIntervals: 2 }
   return compact
     ? { width: 400, height: 260, marginLeft: 60, marginRight: 14, marginTop: 12, marginBottom: 28, fontSize: 14, yIntervals: 1, xIntervals: 1 }
     : { width: 1000, height: 300, marginLeft: 84, marginRight: 40, marginTop: 10, marginBottom: 30, fontSize: 11, yIntervals: 4, xIntervals: 6 }

package/src/components/charts/format.ts

@@ -7,6 +7,10 @@ export function formatMetricValue(value: number, unit: string): string {
   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`

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/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}