@skyhook-io/radar-app 1.9.2 → 1.9.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/radar-app",
-  "version": "1.9.2",
+  "version": "1.9.4",
   "description": "Radar's full web UI as a reusable React component. Used by Radar's own binary and by external consumers like Radar Cloud.",
   "repository": {
     "type": "git",

package/src/App.tsx

@@ -145,6 +145,8 @@ function getViewFromPath(pathname: string): ExtendedMainView {
 //     breakdown; a filter would only hide rows).
 //   - A GitOps detail tree spans namespaces — its controller lives in one
 //     namespace but manages workloads across many.
+//   - Upgrade impact evaluates the full readable cluster scope rather than a
+//     browsing filter.
 //   - A cluster-scoped resource kind (Nodes, PVs, ClusterRoles…) has no
 //     namespace at all.
 // The pick itself is preserved so it re-applies when the user returns to a
@@ -170,6 +172,12 @@ function namespaceFilterDisabled(
       tooltip: 'Capacity is reported across the cluster — the namespace filter doesn’t apply here.',
     }
   }
+  if (view === 'checks' && pathname.startsWith('/checks/upgrade')) {
+    return {
+      disabled: true,
+      tooltip: 'Upgrade impact scans every namespace you can access — the namespace filter doesn’t apply.',
+    }
+  }
   const segments = pathname.replace(/^\//, '').split('/')
   if (view === 'gitops' && segments[1] === 'detail') {
     return {
@@ -233,6 +241,8 @@ function radarPageTitle(pathname: string, search = '', apiResources?: APIResourc
     return slash >= 0 && slash < decoded.length - 1 ? decoded.slice(slash + 1) : decoded
   }
 
+  if (view === 'checks' && pathSegments[1] === 'upgrade') return 'Upgrade impact'
+
   // The landing view reads "Overview" rather than "Home" in the tab.
   if (view === 'capacity') {
     if (pathSegments[1] === 'pools') return decode(pathSegments[2] ?? '') || 'Capacity'
@@ -401,6 +411,7 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix, onClusterL
 
   // Get mainView from URL path
   const mainView = getViewFromPath(location.pathname)
+  const upgradeReadinessRoute = location.pathname.startsWith('/checks/upgrade')
 
   // Initialize the kind→plural discovery map app-wide (not just on ResourcesView
   // mount) so the omnibar can open a CRD hit with an irregular plural from any
@@ -485,7 +496,7 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix, onClusterL
   // The host's URL for the CURRENT view, if taken over. Drives the redirect
   // effect and the "Opening…" splash.
   const viewTakeoverHref =
-    mainView === 'issues' || mainView === 'gitops' || mainView === 'checks'
+    (mainView === 'issues' || mainView === 'gitops' || mainView === 'checks') && !upgradeReadinessRoute
       ? takeover[mainView]
       : undefined
   useEffect(() => {
@@ -698,6 +709,7 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix, onClusterL
     newParams.delete('kind')
     newParams.delete('mode')
     newParams.delete('group')
+    newParams.delete('target')
     // Open as a normal drawer — never inherit a stale ?full=1/tab from an
     // expanded view we're navigating away from (only expand/drill set those).
     newParams.delete('full')
@@ -2285,9 +2297,9 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix, onClusterL
           />
         )}
 
-        {/* Best practices detail view (inline only when the host hasn't taken
-            Checks over — standalone OSS, or Cloud without a checks takeover). */}
-        {mainView === 'checks' && !isViewTakenOver('checks') && (
+        {/* Checks detail view. Cloud can take over fleet best practices while
+            the target-specific upgrade route continues to render locally. */}
+        {mainView === 'checks' && (!isViewTakenOver('checks') || upgradeReadinessRoute) && (
           <AuditView
             namespaces={namespaces}
             onNavigateToResource={navigateToResourceList}

package/src/api/client.ts

@@ -391,6 +391,61 @@ export interface AuditResponse {
   groupedChecks?: Check[];
 }
 
+export type UpgradeReadinessVerdict = 'blocked' | 'warning' | 'review' | 'no_known_blockers' | 'unknown'
+export type UpgradeReadinessLevel = 'blocker' | 'warning' | 'review'
+export type UpgradeReadinessCheckStatus = 'passed' | 'blocked' | 'warning' | 'review' | 'unknown' | 'not_applicable'
+
+export interface UpgradeReadinessResourceRef {
+  group?: string
+  kind: string
+  namespace: string
+  name: string
+}
+
+export interface UpgradeReadinessFinding {
+  ruleID: string
+  title: string
+  level: UpgradeReadinessLevel
+  resource?: UpgradeReadinessResourceRef
+  managedBy?: UpgradeReadinessResourceRef
+  evidence: { source: string; path: string; detail?: string }
+  appliesFrom?: string
+  impact: string
+  remediation: string
+  references: { title: string; url: string }[]
+}
+
+export interface UpgradeReadinessCheck {
+  id: string
+  category: string
+  title: string
+  status: UpgradeReadinessCheckStatus
+  summary: string
+  evidenceNote?: string
+  caveat?: string
+  scope: string
+  inspected?: number
+  appliesFrom?: string
+  findings: UpgradeReadinessFinding[]
+  references?: { title: string; url: string }[]
+}
+
+export interface UpgradeReadinessResponse {
+  currentVersion: string
+  targetVersion: string
+  reviewedThrough: string
+  verdict: UpgradeReadinessVerdict
+  summary: { blocked: number; warnings: number; reviews: number; passed: number; unknown: number; notApplicable: number; findings: number }
+  checks: UpgradeReadinessCheck[]
+  coverage: {
+    source: 'live'
+    state: 'complete' | 'partial' | 'no_access'
+    unavailableKinds?: string[]
+    scopedNamespaces?: string[]
+    scopedKinds?: Record<string, string[]>
+  }
+}
+
 export interface DashboardCertificateHealth {
   total: number;
   healthy: number;
@@ -486,6 +541,18 @@ export function useAudit(namespaces: string[] = []) {
   });
 }
 
+export function useUpgradeReadiness(target?: string) {
+  const params = new URLSearchParams()
+  if (target) params.set('target', target)
+  const query = params.toString()
+  return useQuery<UpgradeReadinessResponse>({
+    queryKey: ['upgrade-readiness', target ?? 'next'],
+    queryFn: ({ signal }) => fetchJSON(`/upgrade-readiness${query ? `?${query}` : ''}`, signal),
+    staleTime: 30000,
+    placeholderData: (previous) => previous,
+  })
+}
+
 // Live cluster Issues — the grouped triage queue (radar's /api/issues =
 // internal/issues.Compose+Classify+Group). Single-cluster here; the Hub fleet
 // view fans the same shape across clusters. Do not carry old data across query

package/src/components/audit/AuditView.tsx

@@ -1,4 +1,5 @@
 import { useState, useCallback } from 'react'
+import { useLocation } from 'react-router-dom'
 import { useAudit, useAuditSettings, useUpdateAuditSettings, useCloudRole } from '../../api/client'
 import type { SelectedResource } from '../../types'
 import { ChecksView, PaneLoader, PageHeader, FreshnessControl, type CheckResourceRef } from '@skyhook-io/k8s-ui'
@@ -6,6 +7,8 @@ import { ShieldCheck, Settings } from 'lucide-react'
 import { AuditSettingsDialog } from './AuditSettingsDialog'
 import { Tooltip } from '../ui/Tooltip'
 import { useConnection } from '../../context/ConnectionContext'
+import { ChecksViewTabs } from './ChecksViewTabs'
+import { UpgradeReadinessView } from './UpgradeReadinessView'
 
 interface AuditViewProps {
   namespaces: string[]
@@ -19,6 +22,14 @@ interface AuditViewProps {
 // ~/.radar settings are this cluster's "policy" and the row hide-menu writes to
 // them.
 export function AuditView({ namespaces, onNavigateToResource }: AuditViewProps) {
+  const { pathname } = useLocation()
+  if (pathname.startsWith('/checks/upgrade')) {
+    return <UpgradeReadinessView namespaces={namespaces} onNavigateToResource={onNavigateToResource} />
+  }
+  return <BestPracticesView namespaces={namespaces} onNavigateToResource={onNavigateToResource} />
+}
+
+function BestPracticesView({ namespaces, onNavigateToResource }: AuditViewProps) {
   const { data, isLoading, error, dataUpdatedAt, refetch } = useAudit(namespaces)
   const { data: auditSettings } = useAuditSettings()
   const updateSettings = useUpdateAuditSettings()
@@ -104,6 +115,8 @@ export function AuditView({ namespaces, onNavigateToResource }: AuditViewProps)
         }
       />
 
+      <ChecksViewTabs />
+
       <ChecksView
         checks={data.groupedChecks ?? []}
         catalog={data.checks ?? {}}

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

@@ -0,0 +1,20 @@
+import { renderToStaticMarkup } from 'react-dom/server'
+import { MemoryRouter } from 'react-router-dom'
+import { describe, expect, it } from 'vitest'
+import { ChecksViewTabs } from './ChecksViewTabs'
+
+describe('ChecksViewTabs', () => {
+  it('keeps browsing scope across tabs without leaking upgrade-only target state', () => {
+    const html = renderToStaticMarkup(
+      <MemoryRouter initialEntries={['/checks/upgrade?namespaces=shop%2Cprod&target=1.36&resource=shop%2Fapi']}>
+        <ChecksViewTabs />
+      </MemoryRouter>,
+    )
+
+    expect(html).toContain('href="/checks?namespaces=shop%2Cprod"')
+    expect(html).toContain('href="/checks/upgrade?namespaces=shop%2Cprod&amp;target=1.36"')
+    expect(html).not.toContain('resource=')
+    expect(html).toContain('aria-current="page"')
+    expect(html).not.toContain('role="tab"')
+  })
+})

package/src/components/audit/ChecksViewTabs.tsx

@@ -0,0 +1,43 @@
+import { clsx } from 'clsx'
+import { Link, useLocation, type To } from 'react-router-dom'
+
+export function ChecksViewTabs() {
+  const { pathname, search } = useLocation()
+  const upgrade = pathname.startsWith('/checks/upgrade')
+  const current = new URLSearchParams(search)
+  const browsing = new URLSearchParams()
+  for (const key of ['namespace', 'namespaces']) {
+    const value = current.get(key)
+    if (value) browsing.set(key, value)
+  }
+  const upgradeSearch = new URLSearchParams(browsing)
+  const target = current.get('target')
+  if (target) upgradeSearch.set('target', target)
+
+  return (
+    <nav className="flex items-center gap-1 border-b border-theme-border" aria-label="Check views">
+      <ChecksTab to={{ pathname: '/checks', search: browsing.toString() }} active={!upgrade}>
+        Best practices
+      </ChecksTab>
+      <ChecksTab to={{ pathname: '/checks/upgrade', search: upgradeSearch.toString() }} active={upgrade}>
+        Upgrade impact
+      </ChecksTab>
+    </nav>
+  )
+}
+
+function ChecksTab({ to, active, children }: { to: To; active: boolean; children: React.ReactNode }) {
+  return (
+    <Link
+      to={to}
+      aria-current={active ? 'page' : undefined}
+      className={clsx(
+        'relative px-3 py-2 text-sm font-medium transition-colors',
+        active ? 'text-theme-text-primary' : 'text-theme-text-tertiary hover:text-theme-text-secondary',
+      )}
+    >
+      {children}
+      {active && <span className="absolute inset-x-2 bottom-0 h-0.5 rounded-full bg-accent" />}
+    </Link>
+  )
+}

package/src/components/audit/UpgradeReadinessView.test.ts

@@ -0,0 +1,130 @@
+import { describe, expect, it } from 'vitest'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { ApiError } from '../../api/client'
+import { UPGRADE_IMPACT_DOCS_URL, UPGRADE_IMPACT_MIN_RADAR_VERSION, UpgradeReadinessError, groupFindings, incompleteUpgradeCheckCount, issueSpecificReferences, summaryMeta, upgradeEvaluationSummary } from './UpgradeReadinessView'
+
+describe('UpgradeReadinessError', () => {
+  it('maps an unmatched endpoint 404 to the v1.9 upgrade message', () => {
+    const html = renderToStaticMarkup(UpgradeReadinessError({ error: new ApiError('Unknown error', 404) }))
+
+    expect(html).toContain('Upgrade impact needs a newer Radar')
+    expect(html).toContain(UPGRADE_IMPACT_MIN_RADAR_VERSION)
+    expect(html).toContain('Upgrade the in-cluster Radar to enable it')
+    expect(html).not.toContain('Unable to analyze upgrade impact')
+  })
+
+  it('keeps a real resource 404 on the generic error state', () => {
+    const html = renderToStaticMarkup(UpgradeReadinessError({ error: new ApiError('Cluster not found', 404) }))
+
+    expect(html).toContain('Unable to analyze upgrade impact')
+    expect(html).toContain('Cluster not found')
+    expect(html).not.toContain('needs a newer Radar')
+  })
+
+  it('keeps ordinary failures on the generic error state', () => {
+    const html = renderToStaticMarkup(UpgradeReadinessError({ error: new ApiError('boom', 500) }))
+
+    expect(html).toContain('Unable to analyze upgrade impact')
+    expect(html).toContain('boom')
+    expect(html).not.toContain('needs a newer Radar')
+  })
+})
+
+describe('upgradeEvaluationSummary', () => {
+  it('distinguishes applicable, incomplete, and not-applicable checks', () => {
+    expect(upgradeEvaluationSummary(18, {
+      blocked: 1,
+      warnings: 0,
+      reviews: 0,
+      passed: 14,
+      unknown: 1,
+      notApplicable: 2,
+      findings: 1,
+    })).toBe('18 evaluated · 16 applicable · 1 with partial evidence · 2 not applicable')
+  })
+
+  it('does not imply incomplete coverage when every applicable check completed', () => {
+    expect(upgradeEvaluationSummary(10, {
+      blocked: 0,
+      warnings: 0,
+      reviews: 0,
+      passed: 10,
+      unknown: 0,
+      notApplicable: 0,
+      findings: 0,
+    })).toBe('10 evaluated · 10 applicable · 0 not applicable')
+  })
+
+  it('links to the documented catalog rather than inventing a second catalog in the UI', () => {
+    expect(UPGRADE_IMPACT_DOCS_URL).toContain('/features/upgrade-impact')
+  })
+
+  it('counts incomplete evidence even when a blocker takes status precedence', () => {
+    expect(incompleteUpgradeCheckCount([
+      { status: 'blocked', caveat: 'one PDB has stale status' },
+      { status: 'unknown' },
+      { status: 'passed' },
+    ])).toBe(2)
+  })
+})
+
+describe('groupFindings', () => {
+  it('groups repeated remediation inside a check without merging distinct action levels', () => {
+    const base = {
+      ruleID: 'admission-webhook-readiness',
+      title: 'Backend unavailable',
+      resource: { kind: 'ValidatingWebhookConfiguration', namespace: '', name: 'policy' },
+      evidence: { source: 'live', path: 'webhooks[0].clientConfig.service' },
+      impact: 'Admission is unavailable.',
+      remediation: 'Restore the backend.',
+      references: [],
+    }
+    const groups = groupFindings([
+      { ...base, level: 'blocker', evidence: { ...base.evidence, detail: 'default/a' } },
+      { ...base, level: 'blocker', evidence: { ...base.evidence, detail: 'default/b' } },
+      { ...base, level: 'warning', evidence: { ...base.evidence, detail: 'default/c' } },
+    ])
+    expect(groups.map((group) => group.total)).toEqual([2, 1])
+  })
+
+  it('counts findings even when multiple findings do not map one-to-one to resources', () => {
+    const base = {
+      ruleID: 'renamed-control-plane-metrics',
+      title: 'Metric renamed',
+      level: 'review' as const,
+      evidence: { source: 'PrometheusRule', path: 'spec.groups' },
+      impact: 'A query stops matching.',
+      remediation: 'Update the query.',
+      references: [],
+    }
+    const groups = groupFindings([
+      { ...base, evidence: { ...base.evidence, detail: 'old_a' } },
+      { ...base, evidence: { ...base.evidence, detail: 'old_b' } },
+    ])
+    expect(groups[0].total).toBe(2)
+  })
+})
+
+describe('summaryMeta', () => {
+  it('keeps partial coverage explicit even when a confirmed blocker takes precedence', () => {
+    const meta = summaryMeta('blocked', '1.36', '1.36', {
+      blocked: 1,
+      warnings: 0,
+      reviews: 0,
+      unknown: 2,
+    }, 'partial')
+    expect(meta.body).toContain('Evidence coverage is also incomplete')
+  })
+})
+
+describe('issueSpecificReferences', () => {
+  it('keeps check-wide sources at the parent while preserving issue-specific sources', () => {
+    const checkReferences = [{ title: 'Admission webhook good practices', url: 'https://example.com/admission' }]
+    const findingReferences = [
+      ...checkReferences,
+      { title: 'Matching requests: matchPolicy', url: 'https://example.com/admission#match-policy' },
+    ]
+
+    expect(issueSpecificReferences(checkReferences, findingReferences)).toEqual([findingReferences[1]])
+  })
+})

package/src/components/audit/UpgradeReadinessView.tsx

@@ -0,0 +1,699 @@
+import { useMemo, useState } from 'react'
+import { useLocation, useNavigate } from 'react-router-dom'
+import { clsx } from 'clsx'
+import {
+  AlertCircle,
+  AlertTriangle,
+  BookOpen,
+  CheckCircle2,
+  CircleDashed,
+  CircleMinus,
+  ExternalLink,
+  FileSearch,
+  ShieldAlert,
+  Wrench,
+} from 'lucide-react'
+import {
+  Badge,
+  Collapse,
+  CollapseChevron,
+  EmptyState,
+  FreshnessControl,
+  PageHeader,
+  PaneLoader,
+  SelectMenu,
+} from '@skyhook-io/k8s-ui'
+import {
+  ApiError,
+  useUpgradeReadiness,
+  type UpgradeReadinessCheck,
+  type UpgradeReadinessCheckStatus,
+  type UpgradeReadinessFinding,
+  type UpgradeReadinessResponse,
+  type UpgradeReadinessVerdict,
+} from '../../api/client'
+import type { SelectedResource } from '../../types'
+import { useConnection } from '../../context/ConnectionContext'
+import { ChecksViewTabs } from './ChecksViewTabs'
+
+interface UpgradeReadinessViewProps {
+  namespaces: string[]
+  onNavigateToResource: (resource: SelectedResource) => void
+}
+
+const FINDING_CAP = 8
+export const UPGRADE_IMPACT_DOCS_URL = 'https://radarhq.io/docs/features/upgrade-impact'
+export const UPGRADE_IMPACT_MIN_RADAR_VERSION = 'v1.9.0'
+
+const statusMeta: Record<UpgradeReadinessCheckStatus, {
+  label: string
+  icon: typeof CheckCircle2
+  iconClass: string
+  badgeSeverity: 'error' | 'warning' | 'info' | 'success' | 'neutral'
+}> = {
+  blocked: { label: 'Blocked', icon: AlertCircle, iconClass: 'text-red-600 dark:text-red-400', badgeSeverity: 'error' },
+  warning: { label: 'Warning', icon: AlertTriangle, iconClass: 'text-amber-600 dark:text-amber-400', badgeSeverity: 'warning' },
+  review: { label: 'Review', icon: FileSearch, iconClass: 'text-blue-600 dark:text-blue-400', badgeSeverity: 'info' },
+  unknown: { label: 'Incomplete', icon: CircleDashed, iconClass: 'text-theme-text-tertiary', badgeSeverity: 'neutral' },
+  passed: { label: 'Passed', icon: CheckCircle2, iconClass: 'text-emerald-600 dark:text-emerald-400', badgeSeverity: 'success' },
+  not_applicable: { label: 'Not applicable', icon: CircleMinus, iconClass: 'text-theme-text-disabled', badgeSeverity: 'neutral' },
+}
+
+const statusOrder: Record<UpgradeReadinessCheckStatus, number> = {
+  blocked: 0,
+  warning: 1,
+  review: 2,
+  unknown: 3,
+  passed: 4,
+  not_applicable: 5,
+}
+
+const checkPriority: Record<string, number> = {
+  'control-plane-upgrade-path': 0,
+}
+
+export function UpgradeReadinessView({ namespaces, onNavigateToResource }: UpgradeReadinessViewProps) {
+  const location = useLocation()
+  const navigate = useNavigate()
+  const requestedTarget = new URLSearchParams(location.search).get('target') ?? undefined
+  const { data, isLoading, isFetching, isPlaceholderData, error, dataUpdatedAt, refetch } = useUpgradeReadiness(requestedTarget)
+  const { connection } = useConnection()
+  const targetOptions = useMemo(
+    () => buildTargetOptions(data?.currentVersion, data?.reviewedThrough, requestedTarget ?? data?.targetVersion),
+    [data?.currentVersion, data?.reviewedThrough, data?.targetVersion, requestedTarget],
+  )
+  const sortedChecks = useMemo(
+    () => [...(data?.checks ?? [])].sort((a, b) =>
+      statusOrder[a.status] - statusOrder[b.status]
+      || (checkPriority[a.id] ?? 1) - (checkPriority[b.id] ?? 1)
+      || a.category.localeCompare(b.category)
+      || a.title.localeCompare(b.title),
+    ),
+    [data?.checks],
+  )
+  const resetTarget = () => {
+    const params = new URLSearchParams(location.search)
+    params.delete('target')
+    navigate({ pathname: location.pathname, search: params.toString() }, { replace: true })
+  }
+
+  if (isLoading) {
+    return (
+      <div className="flex-1 flex flex-col min-h-0 p-4 gap-4">
+        <ChecksViewTabs />
+        <PaneLoader label="Analyzing upgrade impact…" className="flex-1" />
+      </div>
+    )
+  }
+  if (error || !data) {
+    return (
+      <div className="flex-1 flex flex-col min-h-0 p-4 gap-4">
+        <ChecksViewTabs />
+        <div className="flex flex-1 items-center justify-center">
+          <UpgradeReadinessError error={error} onResetTarget={resetTarget} />
+        </div>
+      </div>
+    )
+  }
+
+  const setTarget = (target: string) => {
+    const params = new URLSearchParams(location.search)
+    params.set('target', target)
+    navigate({ pathname: location.pathname, search: params.toString() })
+  }
+  const unsupportedTarget = compareMinor(data.targetVersion, data.reviewedThrough) > 0
+  const scopedKinds = Object.entries(data.coverage.scopedKinds ?? {})
+  const showingPreviousTarget = Boolean(isPlaceholderData && requestedTarget && requestedTarget !== data.targetVersion)
+
+  return (
+    <div aria-busy={isFetching} className="flex-1 flex flex-col min-h-0 p-4 gap-4 overflow-auto">
+      <PageHeader
+        icon={ShieldAlert}
+        title="Upgrade impact"
+        description={`Find configuration and compatibility changes before upgrading Kubernetes ${data.currentVersion} → ${data.targetVersion}.`}
+        actions={
+          <>
+            {data.coverage.state !== 'no_access' && (
+              <div className="flex items-center gap-2">
+                <span className="text-xs text-theme-text-tertiary">Target</span>
+                {targetOptions.length > 1 ? (
+                  <SelectMenu
+                    value={requestedTarget ?? data.targetVersion}
+                    options={targetOptions}
+                    onChange={setTarget}
+                    ariaLabel="Target Kubernetes version"
+                    className="w-24"
+                  />
+                ) : (
+                  <span className="rounded-md bg-theme-elevated px-2.5 py-1.5 text-xs font-medium tabular-nums text-theme-text-primary">
+                    {data.targetVersion}
+                  </span>
+                )}
+              </div>
+            )}
+            <FreshnessControl
+              mode="snapshot"
+              dataUpdatedAt={dataUpdatedAt}
+              onRefresh={() => refetch()}
+              connectionState={connection.state}
+              isFetching={isFetching}
+            />
+          </>
+        }
+      />
+
+      <ChecksViewTabs />
+
+      {showingPreviousTarget && (
+        <CoverageNotice
+          headline={`Analyzing Kubernetes ${requestedTarget}`}
+          body={`Results for Kubernetes ${data.targetVersion} remain visible until the new scan completes.`}
+        />
+      )}
+
+      {data.coverage.state !== 'no_access' && (
+        <UpgradeSummary
+          verdict={data.verdict}
+          target={data.targetVersion}
+          reviewedThrough={data.reviewedThrough}
+          summary={data.summary}
+          coverageState={data.coverage.state}
+        />
+      )}
+
+      {unsupportedTarget && data.coverage.state !== 'no_access' && (
+        <CoverageNotice
+          headline={`Coverage ends at Kubernetes ${data.reviewedThrough}`}
+          body={`Known results are shown, but checks added after ${data.reviewedThrough} are not included for ${data.targetVersion}. Update Radar when a release with ${data.targetVersion} coverage is available, then run this scan again.`}
+        />
+      )}
+      {data.coverage.state !== 'no_access' && (data.coverage.scopedNamespaces?.length ?? 0) > 0 && (
+        <CoverageNotice
+          headline={`Scoped to ${data.coverage.scopedNamespaces!.length} ${data.coverage.scopedNamespaces!.length === 1 ? 'namespace' : 'namespaces'}`}
+          body={`Results do not cover namespaced configuration outside ${formatNamespaceScope(data.coverage.scopedNamespaces!)}.`}
+        />
+      )}
+      {namespaces.length > 0 && !data.coverage.scopedNamespaces?.length && scopedKinds.length === 0 && data.coverage.state !== 'no_access' && (
+        <CoverageNotice
+          headline="Cluster-wide upgrade scan"
+          body="The current namespace browsing filter does not limit upgrade checks. Radar evaluates every namespace your identity can read."
+        />
+      )}
+      {data.coverage.state !== 'no_access' && (data.coverage.unavailableKinds?.length ?? 0) > 0 && (
+        <CoverageNotice
+          headline="Some live resources were unavailable"
+          body={`Radar could not inspect: ${(data.coverage.unavailableKinds ?? []).join(', ')}. Affected checks are marked incomplete.`}
+        />
+      )}
+      {data.coverage.state !== 'no_access' && scopedKinds.length > 0 && (
+        <CoverageNotice
+          headline={`${scopedKinds.length} cached ${scopedKinds.length === 1 ? 'resource kind has' : 'resource kinds have'} narrower coverage`}
+          body={`Informer evidence is namespace-limited for ${formatScopedKinds(scopedKinds)}. Radar does not treat absence outside those per-kind scopes as proof.`}
+        />
+      )}
+      {data.coverage.state === 'partial' && !data.coverage.scopedNamespaces?.length && !data.coverage.unavailableKinds?.length && scopedKinds.length === 0 && (
+        <CoverageNotice headline="Some evidence is incomplete" body="Rows marked Partial evidence explain what Radar could not verify." />
+      )}
+      {data.coverage.state === 'no_access' ? (
+        <section className="shrink-0">
+          <EmptyState
+            tone="neutral"
+            icon={FileSearch}
+            headline="Upgrade checks need namespace access"
+            body="Radar cannot inspect workload configuration in this cluster for your current identity. Ask a cluster administrator for read access, then refresh this page."
+          />
+        </section>
+      ) : (
+        <section className="shrink-0 overflow-hidden rounded-xl border border-theme-border bg-theme-surface shadow-theme-sm">
+          <div className="flex items-center justify-between border-b-subtle px-4 py-3">
+            <div>
+              <h2 className="text-sm font-semibold text-theme-text-primary">Checks for Kubernetes {data.targetVersion}</h2>
+              <p className="mt-0.5 text-xs text-theme-text-tertiary">Results are ordered by required action. Expand a row for evidence and remediation.</p>
+            </div>
+            <span className="text-right text-xs tabular-nums text-theme-text-tertiary">{upgradeEvaluationSummary(data.checks.length, data.summary, incompleteUpgradeCheckCount(data.checks))}</span>
+          </div>
+          <CoverageMethodology data={data} />
+          <div className="hidden grid-cols-[minmax(230px,0.9fr)_minmax(320px,1.6fr)_160px] gap-4 border-b-subtle bg-theme-elevated px-4 py-2 text-[11px] font-medium uppercase tracking-wide text-theme-text-tertiary md:grid">
+            <span>Check</span>
+            <span>Result</span>
+            <span>Status</span>
+          </div>
+          <div className="divide-y divide-theme-border">
+            {sortedChecks.map((check) => (
+              <CheckRow key={check.id} check={check} onNavigateToResource={onNavigateToResource} />
+            ))}
+          </div>
+        </section>
+      )}
+    </div>
+  )
+}
+
+export function UpgradeReadinessError({ error, onResetTarget }: { error: unknown; onResetTarget?: () => void }) {
+  const missingEndpoint = error instanceof ApiError
+    && error.status === 404
+    && error.message === 'Unknown error'
+  if (missingEndpoint) {
+    return (
+      <EmptyState
+        tone="neutral"
+        icon={ShieldAlert}
+        headline="Upgrade impact needs a newer Radar"
+        body={
+          <>
+            This cluster&rsquo;s Radar predates Upgrade impact (added in Radar {UPGRADE_IMPACT_MIN_RADAR_VERSION}).
+            <br />
+            Upgrade the in-cluster Radar to enable it.
+          </>
+        }
+      />
+    )
+  }
+
+  return (
+    <EmptyState
+      tone="neutral"
+      icon={AlertTriangle}
+      headline="Unable to analyze upgrade impact"
+      body={error instanceof ApiError ? error.message : 'Failed to analyze upgrade impact.'}
+      action={error instanceof ApiError && error.status === 400 && onResetTarget ? (
+        <button type="button" onClick={onResetTarget} className="btn-brand px-3 py-1.5 text-xs font-medium">
+          Use next Kubernetes version
+        </button>
+      ) : undefined}
+    />
+  )
+}
+
+export function incompleteUpgradeCheckCount(checks: Pick<UpgradeReadinessCheck, 'status' | 'caveat'>[]) {
+  return checks.filter((check) => check.status === 'unknown' || Boolean(check.caveat)).length
+}
+
+export function upgradeEvaluationSummary(total: number, summary: UpgradeReadinessResponse['summary'], incomplete = summary.unknown) {
+  const applicable = Math.max(0, total - summary.notApplicable)
+  const partialEvidenceLabel = incomplete > 0 ? ` · ${incomplete} with partial evidence` : ''
+  return `${total} evaluated · ${applicable} applicable${partialEvidenceLabel} · ${summary.notApplicable} not applicable`
+}
+
+function CoverageMethodology({ data }: { data: UpgradeReadinessResponse }) {
+  const [open, setOpen] = useState(false)
+  const unavailable = data.coverage.unavailableKinds ?? []
+  const scopedKinds = Object.entries(data.coverage.scopedKinds ?? {})
+  return (
+    <div className="border-b-subtle bg-theme-base/30">
+      <button
+        type="button"
+        aria-expanded={open}
+        onClick={() => setOpen((value) => !value)}
+        className="flex w-full items-center justify-between gap-4 px-4 py-2.5 text-left transition-colors hover:bg-theme-hover/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-theme-text-primary/20"
+      >
+        <span className="inline-flex min-w-0 items-center gap-2 text-xs font-medium text-theme-text-secondary">
+          <FileSearch className="h-3.5 w-3.5 shrink-0 text-theme-text-tertiary" />
+          Coverage and methodology
+        </span>
+        <span className="flex min-w-0 items-center gap-2 text-xs text-theme-text-tertiary">
+          <span className="hidden truncate sm:inline">Reviewed through Kubernetes {data.reviewedThrough}</span>
+          <CollapseChevron open={open} className="h-3.5 w-3.5 shrink-0" />
+        </span>
+      </button>
+      <Collapse open={open} mountLazily>
+        <div id="upgrade-coverage-methodology" className="space-y-2 border-t border-theme-border px-4 py-3 text-xs leading-5 text-theme-text-secondary">
+          <p>
+            Radar evaluated the checks relevant to Kubernetes {data.currentVersion} → {data.targetVersion}. Release-specific checks outside this upgrade path are excluded instead of being counted as passed or not applicable.
+          </p>
+          <p>
+            Results use live cluster resources and the row-specific evidence scope shown below. {unavailable.length > 0
+              ? `Radar could not inspect ${unavailable.join(', ')}; affected checks are marked incomplete.`
+              : scopedKinds.length > 0
+                ? `Cached evidence has per-kind namespace ceilings for ${formatScopedKinds(scopedKinds)}.`
+              : data.coverage.state === 'complete'
+                ? 'Every required evidence source for the displayed checks was readable.'
+                : 'Coverage is partial; affected rows explain which evidence was missing, unreadable, or outside the scan scope.'}
+          </p>
+          <a
+            href={UPGRADE_IMPACT_DOCS_URL}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="inline-flex items-center gap-1 text-accent-text hover:underline"
+          >
+            View the complete check catalog and evidence model <ExternalLink className="h-3 w-3" />
+          </a>
+        </div>
+      </Collapse>
+    </div>
+  )
+}
+
+function UpgradeSummary({ verdict, target, reviewedThrough, summary, coverageState }: {
+  verdict: UpgradeReadinessVerdict
+  target: string
+  reviewedThrough: string
+  summary: { blocked: number; warnings: number; reviews: number; passed: number; unknown: number; notApplicable: number }
+  coverageState: 'complete' | 'partial'
+}) {
+  const meta = summaryMeta(verdict, target, reviewedThrough, summary, coverageState)
+  const Icon = meta.icon
+  return (
+    <div className={clsx('flex flex-col gap-3 rounded-xl border px-4 py-3 sm:flex-row sm:items-center sm:justify-between', meta.className)}>
+      <div className="flex min-w-0 items-center gap-3">
+        <div className="rounded-full bg-theme-surface p-2 shadow-theme-sm"><Icon className={clsx('h-5 w-5', meta.iconClass)} /></div>
+        <div className="min-w-0">
+          <h2 className="text-sm font-semibold text-theme-text-primary">{meta.headline}</h2>
+          <p className="mt-0.5 text-xs text-theme-text-secondary">{meta.body}</p>
+        </div>
+      </div>
+      <div className="flex flex-wrap items-center gap-x-4 gap-y-1 pl-11 text-xs tabular-nums text-theme-text-secondary sm:pl-0">
+        {summary.blocked > 0 && <SummaryCount tone="error" value={summary.blocked} label="blocked" />}
+        {summary.warnings > 0 && <SummaryCount tone="warning" value={summary.warnings} label="warning" />}
+        {summary.reviews > 0 && <SummaryCount tone="info" value={summary.reviews} label="review" />}
+        {summary.passed > 0 && <SummaryCount tone="success" value={summary.passed} label="passed" />}
+        {summary.unknown > 0 && <SummaryCount tone="neutral" value={summary.unknown} label="incomplete" />}
+        {summary.notApplicable > 0 && <span>{summary.notApplicable} not applicable</span>}
+      </div>
+    </div>
+  )
+}
+
+function SummaryCount({ tone, value, label }: { tone: 'error' | 'warning' | 'info' | 'success' | 'neutral'; value: number; label: string }) {
+  const dot = { error: 'bg-red-500', warning: 'bg-amber-500', info: 'bg-blue-500', success: 'bg-emerald-500', neutral: 'bg-theme-text-tertiary' }[tone]
+  return <span className="inline-flex items-center gap-1.5"><span className={clsx('h-1.5 w-1.5 rounded-full', dot)} />{value} {label}</span>
+}
+
+export function summaryMeta(
+  verdict: UpgradeReadinessVerdict,
+  target: string,
+  reviewedThrough: string,
+  summary: { blocked: number; warnings: number; reviews: number; unknown: number },
+  coverageState: 'complete' | 'partial',
+) {
+  if (verdict === 'blocked') return {
+    headline: `${summary.blocked} upgrade ${summary.blocked === 1 ? 'blocker' : 'blockers'} found`,
+    body: `Resolve blocked checks before moving the control plane to Kubernetes ${target}.${coverageState === 'partial' ? ' Evidence coverage is also incomplete.' : ''}`,
+    icon: AlertCircle, iconClass: 'text-red-600 dark:text-red-400', className: 'border-red-500/30 bg-red-500/5',
+  }
+  if (verdict === 'warning') return {
+    headline: `${summary.warnings} upgrade ${summary.warnings === 1 ? 'warning needs' : 'warnings need'} attention`,
+    body: `Resolve or explicitly accept these risks before scheduling Kubernetes ${target}.${coverageState === 'partial' ? ' Evidence coverage is also incomplete.' : ''}`,
+    icon: AlertTriangle, iconClass: 'text-amber-600 dark:text-amber-400', className: 'border-amber-500/30 bg-amber-500/5',
+  }
+  if (verdict === 'review') return {
+    headline: `${summary.reviews} upgrade ${summary.reviews === 1 ? 'item needs' : 'items need'} review`,
+    body: `Verify the affected configuration before scheduling Kubernetes ${target}.${coverageState === 'partial' ? ' Evidence coverage is also incomplete.' : ''}`,
+    icon: FileSearch, iconClass: 'text-blue-600 dark:text-blue-400', className: 'border-blue-500/30 bg-blue-500/5',
+  }
+  if (verdict === 'unknown') return {
+    headline: 'Upgrade evidence is incomplete',
+    body: summary.unknown > 0
+      ? `${summary.unknown} ${summary.unknown === 1 ? 'check is' : 'checks are'} incomplete, so this is not a readiness guarantee.`
+      : coverageState !== 'complete'
+        ? 'No blocker was found in the evidence Radar could inspect; this is not a cluster-wide readiness guarantee.'
+        : `Checks are reviewed through Kubernetes ${reviewedThrough}, not ${target}.`,
+    icon: CircleDashed, iconClass: 'text-theme-text-tertiary', className: 'border-theme-border bg-theme-elevated',
+  }
+  return {
+    headline: `No blockers found for Kubernetes ${target}`,
+    body: 'Every applicable reviewed check passed. This result covers the evidence sources listed below.',
+    icon: CheckCircle2, iconClass: 'text-emerald-600 dark:text-emerald-400', className: 'border-emerald-500/30 bg-emerald-500/5',
+  }
+}
+
+function CoverageNotice({ headline, body }: { headline: string; body: string }) {
+  return (
+    <div className="flex items-start gap-2 rounded-lg border border-theme-border bg-theme-elevated px-3 py-2 text-xs">
+      <FileSearch className="mt-0.5 h-4 w-4 shrink-0 text-theme-text-tertiary" />
+      <div><span className="font-medium text-theme-text-secondary">{headline}.</span> <span className="text-theme-text-tertiary">{body}</span></div>
+    </div>
+  )
+}
+
+function CheckRow({ check, onNavigateToResource }: { check: UpgradeReadinessCheck; onNavigateToResource: (resource: SelectedResource) => void }) {
+  const meta = statusMeta[check.status]
+  const Icon = meta.icon
+  const [open, setOpen] = useState(false)
+  const detailID = `upgrade-check-${check.id}`
+  const findingGroups = groupFindings(check.findings)
+  const label = evidenceLabel(check)
+  const checkReferences = check.references ?? []
+  return (
+    <div>
+      <button
+        type="button"
+        aria-expanded={open}
+        onClick={() => setOpen((value) => !value)}
+        className="grid w-full cursor-pointer items-center gap-3 px-4 py-3 text-left transition-colors hover:bg-theme-hover/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-theme-text-primary/20 md:grid-cols-[minmax(230px,0.9fr)_minmax(320px,1.6fr)_160px] md:gap-4"
+      >
+        <div className="flex min-w-0 items-center gap-2.5">
+          <Icon className={clsx('h-4 w-4 shrink-0', meta.iconClass)} />
+          <div className="min-w-0">
+            <div className="truncate text-sm font-medium text-theme-text-primary">{check.title}</div>
+            <div className="text-[11px] text-theme-text-tertiary">{check.category}</div>
+          </div>
+        </div>
+        <div className="min-w-0 pl-6 md:pl-0">
+          <div className="text-xs leading-5 text-theme-text-secondary">{check.summary}</div>
+        </div>
+        <div className="flex min-w-0 items-center justify-between gap-2 pl-6 md:pl-0">
+          <div className="min-w-0">
+            <Badge severity={meta.badgeSeverity}>{meta.label}</Badge>
+            {label && <div className="mt-1 text-[11px] text-theme-text-tertiary">{label}</div>}
+            {check.caveat && (
+              <div className="mt-1 inline-flex items-center gap-1 text-[11px] font-medium text-amber-700 dark:text-amber-300">
+                <AlertTriangle className="h-3 w-3 shrink-0" />
+                Partial evidence
+              </div>
+            )}
+          </div>
+          <CollapseChevron open={open} className="h-4 w-4" />
+        </div>
+      </button>
+      <Collapse open={open} mountLazily>
+        <div id={detailID} className="border-t border-theme-border bg-theme-base/40 px-4 py-3">
+          {check.findings.length > 0 && (
+            <div>
+              <div className="mb-2 flex flex-wrap items-center justify-between gap-2 text-[11px] text-theme-text-tertiary">
+                <span className="font-medium uppercase tracking-wide">Issue types</span>
+                <span>{findingGroups.length} {findingGroups.length === 1 ? 'type' : 'types'} · {check.findings.length} {check.findings.length === 1 ? 'finding' : 'findings'}</span>
+              </div>
+              <div className="divide-y divide-theme-border overflow-hidden rounded-lg border border-theme-border bg-theme-surface">
+                {findingGroups.map((group, index) => (
+                  <FindingGroupRow
+                    key={group.key}
+                    id={`${detailID}-issue-${index}`}
+                    group={group}
+                    checkReferences={checkReferences}
+                    onNavigateToResource={onNavigateToResource}
+                  />
+                ))}
+              </div>
+            </div>
+          )}
+          <div className={clsx('flex flex-wrap items-center gap-x-4 gap-y-2 text-xs text-theme-text-tertiary', check.findings.length > 0 && 'mt-3 border-t-subtle pt-3')}>
+            {check.caveat && <span className="inline-flex items-start gap-1.5 text-amber-700 dark:text-amber-300"><AlertTriangle className="mt-0.5 h-3.5 w-3.5 shrink-0" />Coverage note: {check.caveat}</span>}
+            {check.evidenceNote && <span className="inline-flex items-start gap-1.5"><FileSearch className="mt-0.5 h-3.5 w-3.5 shrink-0" />Evidence scope: {check.evidenceNote}</span>}
+            <span className="inline-flex items-center gap-1.5"><FileSearch className="h-3.5 w-3.5" />Check scope: {check.scope}</span>
+            {checkReferences.map((reference) => <ReferenceLink key={reference.url} reference={reference} />)}
+          </div>
+        </div>
+      </Collapse>
+    </div>
+  )
+}
+
+export function groupFindings(findings: UpgradeReadinessFinding[]) {
+  const groups = new Map<string, UpgradeReadinessFinding[]>()
+  for (const finding of findings) {
+    const key = findingGroupKey(finding)
+    const grouped = groups.get(key)
+    if (grouped) grouped.push(finding)
+    else groups.set(key, [finding])
+  }
+  return [...groups.entries()].map(([key, grouped]) => ({ key, findings: grouped, total: grouped.length }))
+}
+
+function FindingGroupRow({ id, group, checkReferences, onNavigateToResource }: {
+  id: string
+  group: ReturnType<typeof groupFindings>[number]
+  checkReferences: NonNullable<UpgradeReadinessCheck['references']>
+  onNavigateToResource: (resource: SelectedResource) => void
+}) {
+  const [open, setOpen] = useState(false)
+  const [showAll, setShowAll] = useState(false)
+  const finding = group.findings[0]
+  const references = issueSpecificReferences(checkReferences, finding.references)
+  const level = findingLevelMeta(finding.level)
+  const preview = group.findings.slice(0, FINDING_CAP)
+  const remaining = group.findings.slice(FINDING_CAP)
+  return (
+    <article>
+      <button
+        type="button"
+        aria-expanded={open}
+        onClick={() => setOpen((value) => !value)}
+        className="flex w-full items-center justify-between gap-3 px-3 py-2.5 text-left transition-colors hover:bg-theme-hover/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-theme-text-primary/20"
+      >
+        <span className="flex min-w-0 flex-wrap items-center gap-2">
+          <Badge severity={level.severity}>{level.label}</Badge>
+          <span className="truncate text-xs font-medium text-theme-text-primary">{finding.title}</span>
+        </span>
+        <span className="flex shrink-0 items-center gap-2 text-[11px] text-theme-text-tertiary">
+          {group.total} {group.total === 1 ? 'finding' : 'findings'}
+          <CollapseChevron open={open} className="h-3.5 w-3.5" />
+        </span>
+      </button>
+      <Collapse open={open} mountLazily>
+        <div id={id} className="border-t border-theme-border bg-theme-base/30 px-3 py-3">
+          <div className="grid gap-3 lg:grid-cols-2">
+            <FindingDetail icon={AlertTriangle} label="Impact">{finding.impact}</FindingDetail>
+            <FindingDetail icon={Wrench} label="Remediation">{finding.remediation}</FindingDetail>
+          </div>
+          {(finding.appliesFrom || references.length > 0) && (
+            <div className="mt-3 flex flex-wrap items-center gap-x-4 gap-y-1 border-t-subtle pt-2 text-[11px] text-theme-text-tertiary">
+              {finding.appliesFrom && <span>Applies from Kubernetes {finding.appliesFrom}</span>}
+              {references.map((reference) => <ReferenceLink key={reference.url} reference={reference} />)}
+            </div>
+          )}
+          <div className="mt-3 divide-y divide-theme-border/70 border-t-subtle">
+            {preview.map((item, index) => (
+              <CompactFindingRow key={findingKey(item, index)} finding={item} onNavigateToResource={onNavigateToResource} />
+            ))}
+            {remaining.length > 0 && (
+              <Collapse open={showAll} mountLazily>
+                <div id={`${id}-remaining`} className="divide-y divide-theme-border/70">
+                  {remaining.map((item, index) => (
+                    <CompactFindingRow key={findingKey(item, index + FINDING_CAP)} finding={item} onNavigateToResource={onNavigateToResource} />
+                  ))}
+                </div>
+              </Collapse>
+            )}
+          </div>
+          {remaining.length > 0 && (
+            <button
+              type="button"
+              aria-expanded={showAll}
+              onClick={() => setShowAll((value) => !value)}
+              className="mt-2 inline-flex w-fit items-center gap-1 rounded px-1 py-1 text-xs font-medium text-accent-text hover:underline"
+            >
+              {showAll ? 'Show fewer findings' : `Show all ${group.total} findings`}
+            </button>
+          )}
+        </div>
+      </Collapse>
+    </article>
+  )
+}
+
+export function issueSpecificReferences(
+  checkReferences: NonNullable<UpgradeReadinessCheck['references']>,
+  findingReferences: UpgradeReadinessFinding['references'],
+) {
+  const checkReferenceURLs = new Set(checkReferences.map((reference) => reference.url))
+  return findingReferences.filter((reference) => !checkReferenceURLs.has(reference.url))
+}
+
+function CompactFindingRow({ finding, onNavigateToResource }: {
+  finding: UpgradeReadinessFinding
+  onNavigateToResource: (resource: SelectedResource) => void
+}) {
+  const resourceLabel = finding.resource && `${finding.resource.namespace ? `${finding.resource.namespace}/` : ''}${finding.resource.name}`
+  return (
+    <div className="flex flex-wrap items-center gap-x-3 gap-y-1 py-2 text-[11px] text-theme-text-tertiary">
+      {finding.resource && (
+        <button
+          type="button"
+          onClick={() => onNavigateToResource({ ...finding.resource!, group: finding.resource!.group ?? '' })}
+          className="flex min-w-0 items-center gap-1.5 rounded px-1 py-0.5 text-left transition-colors hover:bg-theme-hover"
+        >
+          <Badge kind={finding.resource.kind} size="sm">{finding.resource.kind}</Badge>
+          <span className="max-w-[280px] truncate text-xs font-medium text-accent-text">{resourceLabel}</span>
+        </button>
+      )}
+      <span className="inline-flex min-w-0 items-center gap-1"><FileSearch className="h-3 w-3 shrink-0" /><code className="truncate">{finding.evidence.path}</code>{finding.evidence.detail ? ` · ${finding.evidence.detail}` : ''}</span>
+      {finding.managedBy && <span>Managed by {finding.managedBy.kind} {finding.managedBy.namespace ? `${finding.managedBy.namespace}/` : ''}{finding.managedBy.name}</span>}
+    </div>
+  )
+}
+
+function formatNamespaceScope(namespaces: string[]) {
+  if (namespaces.length <= 3) return namespaces.join(', ')
+  return `${namespaces.slice(0, 3).join(', ')} and ${namespaces.length - 3} more`
+}
+
+function formatScopedKinds(entries: [string, string[]][]) {
+  const labels = entries
+    .sort(([a], [b]) => a.localeCompare(b))
+    .map(([kind, namespaces]) => `${kind} (${formatNamespaceScope(namespaces)})`)
+  if (labels.length <= 3) return labels.join(', ')
+  return `${labels.slice(0, 3).join(', ')} and ${labels.length - 3} more`
+}
+
+function evidenceLabel(check: UpgradeReadinessCheck) {
+  if (check.findings.length > 0) return `${check.findings.length} ${check.findings.length === 1 ? 'finding' : 'findings'}`
+  if (check.inspected !== undefined && check.inspected > 0) return `${check.inspected} inspected`
+  return undefined
+}
+
+function FindingDetail({ icon: Icon, label, children }: { icon: typeof AlertTriangle; label: string; children: React.ReactNode }) {
+  return (
+    <div className="flex gap-2">
+      <Icon className="mt-0.5 h-3.5 w-3.5 shrink-0 text-theme-text-tertiary" />
+      <div><div className="text-[11px] font-medium uppercase tracking-wide text-theme-text-tertiary">{label}</div><p className="mt-0.5 text-xs leading-5 text-theme-text-secondary">{children}</p></div>
+    </div>
+  )
+}
+
+function ReferenceLink({ reference }: { reference: { title: string; url: string } }) {
+  return <a href={reference.url} target="_blank" rel="noreferrer" className="inline-flex items-center gap-1 text-accent-text hover:underline"><BookOpen className="h-3 w-3" />{reference.title}<ExternalLink className="h-2.5 w-2.5" /></a>
+}
+
+function findingKey(finding: UpgradeReadinessFinding, index: number) {
+  const resource = finding.resource
+  return `${finding.ruleID}:${resource?.group ?? ''}:${resource?.kind ?? ''}:${resource?.namespace ?? ''}:${resource?.name ?? ''}:${finding.evidence.path}:${index}`
+}
+
+function findingGroupKey(finding: UpgradeReadinessFinding) {
+  return JSON.stringify([
+    finding.ruleID,
+    finding.title,
+    finding.level,
+    finding.impact,
+    finding.remediation,
+    finding.appliesFrom,
+    finding.references,
+  ])
+}
+
+function findingLevelMeta(level: UpgradeReadinessFinding['level']) {
+  switch (level) {
+    case 'blocker':
+      return { label: 'Blocker', severity: 'error' as const }
+    case 'warning':
+      return { label: 'Warning', severity: 'warning' as const }
+    default:
+      return { label: 'Review', severity: 'info' as const }
+  }
+}
+
+function buildTargetOptions(current?: string, reviewed?: string, selected?: string) {
+  const values = new Set<string>()
+  const currentParts = parseMinor(current)
+  const reviewedParts = parseMinor(reviewed)
+  if (currentParts && reviewedParts && currentParts.major === reviewedParts.major) {
+    for (let minor = currentParts.minor + 1; minor <= reviewedParts.minor && minor <= currentParts.minor + 20; minor++) {
+      values.add(`${currentParts.major}.${minor}`)
+    }
+  }
+  if (selected) values.add(selected)
+  return [...values].sort(compareMinor).map((value) => ({ value, label: value }))
+}
+
+function parseMinor(value?: string) {
+  const match = value?.match(/^v?(\d+)\.(\d+)/)
+  return match ? { major: Number(match[1]), minor: Number(match[2]) } : undefined
+}
+
+function compareMinor(a: string, b: string) {
+  const av = parseMinor(a)
+  const bv = parseMinor(b)
+  if (!av || !bv) return a.localeCompare(b)
+  return av.major === bv.major ? av.minor - bv.minor : av.major - bv.major
+}

package/src/components/capacity/CapacityView.test.tsx

@@ -24,6 +24,8 @@ import type {
 } from "@skyhook-io/k8s-ui";
 import { CapacityView } from "./CapacityView";
 import { updateDemandSearchParam } from "./CapacityDemand";
+import { integrationBlock } from "./shared";
+import { ApiError } from "../../api/client";
 
 vi.mock("../../context/ConnectionContext", () => ({
   useConnection: () => ({ connection: { state: "connected" } }),
@@ -2285,3 +2287,22 @@ describe("CapacityView activity", () => {
     expect(html).not.toContain("All · ≥3");
   });
 });
+
+describe("integrationBlock version skew", () => {
+  it("maps a top-level 404 to the pre-v1.9.0 upgrade message, never 'Unknown error'", () => {
+    const html = renderToString(
+      <>{integrationBlock(undefined, new ApiError("404 page not found", 404), false, "Loading")}</>,
+    );
+    expect(html).toContain("Capacity needs a newer Radar");
+    expect(html).toContain("v1.9.0");
+    expect(html).not.toContain("Capacity unavailable");
+  });
+
+  it("keeps ordinary failures on the generic error state", () => {
+    const html = renderToString(
+      <>{integrationBlock(undefined, new ApiError("boom", 500), false, "Loading")}</>,
+    );
+    expect(html).toContain("Capacity unavailable");
+    expect(html).not.toContain("needs a newer Radar");
+  });
+});

package/src/components/capacity/shared.tsx

@@ -51,6 +51,7 @@ import {
 import {
   isCapacityCursorInvalidError,
   isForbiddenError,
+  isNotFoundError,
   useCapacityPools,
 } from "../../api/client";
 import type { SelectedResource } from "../../types";
@@ -1340,7 +1341,7 @@ export function EmptyState({
 }: {
   icon: ComponentType<{ className?: string }>;
   title: string;
-  detail: string;
+  detail: ReactNode;
   action?: ReactNode;
 }) {
   return (
@@ -1517,9 +1518,27 @@ export function integrationBlock(
   if (!response && isLoading)
     return <PaneLoader label={loadingLabel} className="min-h-0 flex-1" />;
   if (!response && error) {
-    return isForbiddenError(error) ? (
-      <DeniedCapacityState detail={errorMessage(error)} />
-    ) : (
+    if (isForbiddenError(error))
+      return <DeniedCapacityState detail={errorMessage(error)} />;
+    // A 404 on the top-level capacity routes means the route doesn't exist on
+    // this Radar — a pre-v1.9.0 binary behind a version-skewed host (Radar
+    // Cloud), not a failure. The embedded OSS binary can never hit this.
+    if (isNotFoundError(error))
+      return (
+        <EmptyState
+          icon={Gauge}
+          title="Capacity needs a newer Radar"
+          detail={
+            <>
+              This cluster&rsquo;s Radar predates the Capacity view (added in
+              Radar v1.9.0).
+              <br />
+              Upgrade the in-cluster Radar to enable it.
+            </>
+          }
+        />
+      );
+    return (
       <EmptyState
         icon={AlertTriangle}
         title="Capacity unavailable"

package/src/components/settings/SettingsDialog.tsx

@@ -964,8 +964,10 @@ function AIUnavailableNotice() {
     <div className="rounded-md border border-theme-border bg-theme-elevated/50 p-3">
       <p className="text-sm font-medium text-theme-text-primary">No supported agent CLI found</p>
       <p className="mt-1 text-xs text-theme-text-tertiary">
-        Install <span className="text-theme-text-secondary">Claude Code</span> or{' '}
-        <span className="text-theme-text-secondary">Codex</span>, then restart Radar — this tab
+        Install <span className="text-theme-text-secondary">Claude Code</span>,{' '}
+        <span className="text-theme-text-secondary">Codex</span>, or{' '}
+        <span className="text-theme-text-secondary">Cursor</span> (
+        <span className="font-mono">cursor-agent</span>), then restart Radar — this tab
         will show the agent, model, and effort controls.
       </p>
     </div>