@skyhook-io/radar-app 1.12.2 → 1.13.0

package/src/components/helm/OwnedResources.tsx

@@ -4,7 +4,7 @@ import { getResourceIcon } from '../../utils/resource-icons'
 import { clsx } from 'clsx'
 import type { HelmOwnedResource } from '../../types'
 import type { NavigateToResource } from '../../utils/navigation'
-import { kindToPlural, apiVersionToGroup } from '../../utils/navigation'
+import { kindToPluralWithGroup, apiVersionToGroup } from '../../utils/navigation'
 import { getResourceStatusColor, SEVERITY_BADGE } from '../../utils/badge-colors'
 import { useQueryClient } from '@tanstack/react-query'
 import { useOpenTerminal, useOpenLogs } from '../dock'
@@ -207,7 +207,15 @@ function ResourceItem({ resource, onNavigate }: ResourceItemProps) {
 
   const handleClick = () => {
     if (onNavigate) {
-      onNavigate({ kind: kindToPlural(resource.kind), namespace: resource.namespace, name: resource.name, group: apiVersionToGroup(resource.apiVersion) })
+      onNavigate({
+        kind: kindToPluralWithGroup(
+          resource.kind,
+          apiVersionToGroup(resource.apiVersion),
+        ),
+        namespace: resource.namespace,
+        name: resource.name,
+        group: apiVersionToGroup(resource.apiVersion),
+      })
     }
   }
 

package/src/components/home/ClusterHealthCard.test.ts

@@ -0,0 +1,31 @@
+import { describe, expect, it } from "vitest";
+import { minorsBehind } from "./ClusterHealthCard";
+
+describe("minorsBehind", () => {
+  it("counts minors between plain versions", () => {
+    expect(minorsBehind("1.33", "1.37")).toBe(4);
+    expect(minorsBehind("1.36", "1.37")).toBe(1);
+  });
+
+  it("returns 0 when current matches or exceeds the catalog", () => {
+    expect(minorsBehind("1.37", "1.37")).toBe(0);
+    expect(minorsBehind("1.38", "1.37")).toBe(0);
+  });
+
+  it("handles distribution version suffixes", () => {
+    expect(minorsBehind("v1.33.6+k3s1", "1.37")).toBe(4);
+    expect(minorsBehind("1.31.5-gke.1023000", "1.37")).toBe(6);
+    expect(minorsBehind("v1.32.4-eks-abc123", "1.37")).toBe(5);
+  });
+
+  it("stays quiet on cross-major or unparseable input", () => {
+    expect(minorsBehind("2.0.0", "1.37")).toBe(0);
+    expect(minorsBehind("unknown", "1.37")).toBe(0);
+    expect(minorsBehind("", "1.37")).toBe(0);
+  });
+
+  it("stays quiet when the catalog version is missing", () => {
+    expect(minorsBehind("1.33", undefined)).toBe(0);
+    expect(minorsBehind("1.33", "")).toBe(0);
+  });
+});

package/src/components/home/ClusterHealthCard.tsx

@@ -13,6 +13,7 @@ import { MCPSetupDialog } from './MCPSetupDialog'
 import { assetUrl, pluralize, parseContextName } from '@skyhook-io/k8s-ui'
 import { Tooltip } from '../ui/Tooltip'
 import { routePath } from '../../api/config'
+import { parseMajorMinor } from '../../utils/version'
 import gkeIcon from '../../assets/platform-icons/google_kubernetes_engine.png'
 import eksIcon from '../../assets/platform-icons/aws_eks.png'
 import aksIcon from '../../assets/platform-icons/azure-aks.svg'
@@ -33,11 +34,14 @@ interface ClusterHealthCardProps {
   nodeVersionSkew: DashboardResponse['nodeVersionSkew']
   onNavigateToKind: (kind: string, group?: string) => void
   onNavigateToView: () => void
+  // Left unset in Cloud takeover mode, where /checks is owned by the host.
+  onNavigateToUpgradeImpact?: () => void
   onWarningEventsClick?: () => void
   onIssuesClick?: () => void
   // Freshness/refresh control for the dashboard poll — rendered under the
   // cluster metadata so the overview carries a freshness signal without a band.
   freshness?: ReactNode
+  radarVersion?: ReactNode
 }
 
 function getMetricsInstallHint(platform: string): string {
@@ -130,9 +134,11 @@ export function ClusterHealthCard({
   nodeVersionSkew,
   onNavigateToKind,
   onNavigateToView,
+  onNavigateToUpgradeImpact,
   onWarningEventsClick,
   onIssuesClick,
   freshness,
+  radarVersion,
 }: ClusterHealthCardProps) {
   void _topCRDs // Reserved for future CRD display
 
@@ -251,8 +257,13 @@ export function ClusterHealthCard({
                 </Tooltip>
               )}
               {cluster.version && (
-                <span>Kubernetes {cluster.version}</span>
+                <KubernetesVersionLine
+                  version={cluster.version}
+                  reviewedThrough={cluster.upgradeReviewedThrough}
+                  onNavigate={onNavigateToUpgradeImpact}
+                />
               )}
+              {radarVersion}
               <span><span className="font-mono">{counts.namespaces}</span> namespaces</span>
               {/* Show raw kubeconfig context as muted metadata only when
                   it differs from the headline AND we're in local mode
@@ -519,6 +530,54 @@ export function ClusterHealthCard({
   )
 }
 
+// How many minors the running version trails the newest one the upgrade-impact
+// catalog covers. Cross-major comparisons return 0 — better a missing hint than
+// a wrong count on an exotic version string.
+export function minorsBehind(current: string, reviewedThrough?: string): number {
+  const cur = parseMajorMinor(current)
+  const latest = reviewedThrough ? parseMajorMinor(reviewedThrough) : null
+  if (!cur || !latest || latest.major !== cur.major) return 0
+  return Math.max(0, latest.minor - cur.minor)
+}
+
+function KubernetesVersionLine({
+  version,
+  reviewedThrough,
+  onNavigate,
+}: {
+  version: string
+  reviewedThrough?: string
+  onNavigate?: () => void
+}) {
+  if (!onNavigate) {
+    return <span>Kubernetes {version}</span>
+  }
+
+  const behind = minorsBehind(version, reviewedThrough)
+
+  return (
+    <Tooltip
+      content={
+        behind > 0
+          ? `Radar's upgrade checks cover Kubernetes through ${reviewedThrough}. Click to assess the next minor upgrade.`
+          : 'Assess the next minor Kubernetes upgrade.'
+      }
+      wrapperClassName="w-fit"
+    >
+      <button
+        onClick={onNavigate}
+        className="group flex items-center gap-1 hover:text-theme-text-secondary transition-colors"
+      >
+        <span>Kubernetes {version}</span>
+        {behind > 0 && (
+          <span>· Upgrade impact</span>
+        )}
+        <ArrowRight className="w-3 h-3 opacity-0 group-hover:opacity-100 transition-opacity" />
+      </button>
+    </Tooltip>
+  )
+}
+
 function RestrictedRing({ label }: { label: string }) {
   const radius = 36
   const circumference = 2 * Math.PI * radius

package/src/components/home/CostCard.tsx

@@ -8,6 +8,7 @@ import {
   formatProjectedMonthlyCost,
   formatProjectedMonthlyRate,
 } from '../cost/format'
+import { costFreshnessLabel } from '../cost/source'
 
 export function CostCard({ onNavigate }: { onNavigate?: () => void }) {
   const { data } = useOpenCostSummary()
@@ -87,13 +88,13 @@ function CostCardContent({ data, onNavigate }: { data: OpenCostSummary; onNaviga
 
         <div className="px-4 py-1.5 border-t border-theme-border/50 flex items-center justify-between">
           <span className="text-[10px] text-theme-text-tertiary">
-            {currency} &middot; projected monthly from {data.window ?? '1h'} window
+            {currency} &middot; projected from {costFreshnessLabel(data.source, data.window, data.dataThrough)}
             {currency !== DEFAULT_COST_CURRENCY && (
               <> &middot; no conversion</>
             )}
           </span>
           <span className="flex items-center gap-1.5 text-[10px] font-semibold uppercase tracking-wider text-accent-text">
-            OpenCost
+            {data.source === 'kubecost' ? 'Kubecost' : 'OpenCost'}
           </span>
         </div>
       </div>

package/src/components/home/HomeView.tsx

@@ -1,5 +1,5 @@
 import { useMemo, type ReactNode } from 'react'
-import { useDashboard, useDashboardCRDs, useDashboardHelm, useIssues, type IssuesResponse } from '../../api/client'
+import { useCloudConnectSelf, useDashboard, useDashboardCRDs, useDashboardHelm, useIssues, useVersionCheck, type IssuesResponse } from '../../api/client'
 import { useConnection } from '../../context/ConnectionContext'
 import type { ClusterLoadState } from '../../types/clusterLoadState'
 import type { ExtendedMainView, Topology, SelectedResource } from '../../types'
@@ -22,7 +22,8 @@ import {
   StatusDot,
   categoryLabel,
   groupLabel,
-  issueTiming,
+  issueFirstSeenTitle,
+  issueTimingForDisplay,
   subjectRef,
   type Issue,
 } from '@skyhook-io/k8s-ui'
@@ -30,6 +31,8 @@ import { formatCompactAge } from '@skyhook-io/k8s-ui/utils/format'
 import { ClusterHealthCard } from './ClusterHealthCard'
 import { AlertTriangle, CheckCircle, Loader2, Shield } from 'lucide-react'
 import { clsx } from 'clsx'
+import { getVersionUpdateStatus } from '../../utils/version'
+import { RadarVersionLine } from './RadarVersionLine'
 
 interface HomeViewProps {
   namespaces: string[]
@@ -45,14 +48,19 @@ interface HomeViewProps {
    * standalone OSS → the card drills into secrets as before.
    */
   onNavigateToCerts?: () => void
+  // Omitted when an embedded host owns /checks, leaving the version as plain text.
+  onNavigateToUpgradeImpact?: () => void
+  onNavigateToHelmRelease?: (namespace: string, release: string) => void
+  onNavigateToManagerPath?: (path: string) => void
 }
 
-export function HomeView({ namespaces, topology, fallbackClusterLoadState, onNavigateToView, onNavigateToResourceKind, onNavigateToResource, onNavigateToCerts }: HomeViewProps) {
+export function HomeView({ namespaces, topology, fallbackClusterLoadState, onNavigateToView, onNavigateToResourceKind, onNavigateToResource, onNavigateToCerts, onNavigateToUpgradeImpact, onNavigateToHelmRelease, onNavigateToManagerPath }: HomeViewProps) {
   // The card itself decides whether the cluster has a capacity story
   // (available, softened-denied, or karpenterless-with-managers/groups) and
   // returns null otherwise — the outer gate only excludes states with nothing
   // to fetch against.
-  const karpenterState = useCapabilitiesContext().karpenter?.state
+  const capabilities = useCapabilitiesContext()
+  const karpenterState = capabilities.karpenter?.state
   const capacityCardPossible =
     karpenterState === 'available' || karpenterState === 'denied' || karpenterState === 'not_detected'
   const { data, isLoading, error, dataUpdatedAt, refetch } = useDashboard(namespaces)
@@ -61,6 +69,12 @@ export function HomeView({ namespaces, topology, fallbackClusterLoadState, onNav
   const issues = issuesData?.issues ?? []
   const issueCount = issuesData?.total_matched ?? issuesData?.total ?? issues.length
   const hasCriticalIssues = issues.some((issue) => issue.severity === 'critical')
+  const deploymentMode = capabilities.deployment?.mode ?? 'local'
+  const { data: versionInfo } = useVersionCheck()
+  const showHomeUpgrade = deploymentMode === 'in-cluster'
+    && !!versionInfo?.updateAvailable
+    && getVersionUpdateStatus(versionInfo.currentVersion, versionInfo.latestVersion).tier !== 'none'
+  const { data: installationManager, isLoading: installationManagerLoading } = useCloudConnectSelf(showHomeUpgrade)
 
   // SSE is cluster-wide on small/medium clusters; the picker only narrows the
   // dashboard summary, so re-apply the filter here or the legend disagrees.
@@ -124,6 +138,15 @@ export function HomeView({ namespaces, topology, fallbackClusterLoadState, onNav
         )}
         {/* Row 1: Cluster Health Card (combined health + resource counts) */}
         <ClusterHealthCard
+          radarVersion={deploymentMode === 'in-cluster' && versionInfo ? (
+            <RadarVersionLine
+              version={versionInfo}
+              manager={installationManager}
+              managerLoading={installationManagerLoading}
+              onNavigateToHelmRelease={onNavigateToHelmRelease}
+              onNavigateToGitOps={onNavigateToManagerPath}
+            />
+          ) : undefined}
           freshness={
             <FreshnessControl
               mode="auto"
@@ -143,6 +166,7 @@ export function HomeView({ namespaces, topology, fallbackClusterLoadState, onNav
           nodeVersionSkew={data.nodeVersionSkew}
           onNavigateToKind={onNavigateToResourceKind}
           onNavigateToView={() => onNavigateToView('resources')}
+          onNavigateToUpgradeImpact={onNavigateToUpgradeImpact}
           onWarningEventsClick={() => onNavigateToView('timeline', { view: 'list', filter: 'warnings', time: 'all' })}
           onIssuesClick={() => onNavigateToView('issues')}
         />
@@ -383,8 +407,10 @@ function ProblemsPanel({
               <div className="divide-y divide-theme-border">
                 {issues.map((issue) => {
                   const ref = subjectRef(issue)
-                  const age = issue.first_seen ? formatCompactAge(issue.first_seen) : ''
-                  const timing = issueTiming(issue)
+                  const partialUnknown = issue.onset_coverage?.unknown ?? 0
+                  const partialOnset = Boolean(issue.first_seen && partialUnknown > 0)
+                  const age = issue.first_seen ? `${partialOnset ? '≥' : ''}${formatCompactAge(issue.first_seen)}` : ''
+                  const timing = issueTimingForDisplay(issue)
 
                   return (
                     <button
@@ -402,12 +428,11 @@ function ProblemsPanel({
                         <div className="flex items-center gap-1.5">
                           <span className="text-[10px] text-theme-text-tertiary bg-theme-elevated px-1 py-0.5 rounded">{issue.kind}</span>
                           <span className="text-xs text-theme-text-primary truncate font-medium">{issue.name}</span>
-                          {(age || timing || issue.onset_unknown) && (
+                          {(age || timing) && (
                             <span className="ml-auto flex shrink-0 items-center gap-1">
-                              {age && <span className="text-[10px] text-theme-text-tertiary tabular-nums">{age}</span>}
-                              {issue.onset_unknown && (
-                                <Tooltip content="Radar can confirm this issue is active, but current Kubernetes state does not reveal when it began." delay={100}>
-                                  <span className="text-[10px] text-theme-text-tertiary">Onset unknown</span>
+                              {age && (
+                                <Tooltip content={issueFirstSeenTitle(issue)} delay={100}>
+                                  <span className="text-[10px] text-theme-text-tertiary tabular-nums">{age}</span>
                                 </Tooltip>
                               )}
                               {timing && (

package/src/components/home/MCPSetupDialog.tsx

@@ -204,16 +204,17 @@ export function MCPSetupDialog({ open, onClose, mcpUrl }: MCPSetupDialogProps) {
               <a href="https://modelcontextprotocol.io" target="_blank" rel="noopener noreferrer" className="text-purple-400 hover:text-purple-300 underline underline-offset-2">
                 Model Context Protocol
               </a>{' '}
-              (MCP) server that lets AI agents query your cluster through Radar.
+              (MCP) server that lets AI agents inspect, diagnose, and operate your cluster through Radar.
               Unlike raw kubectl access, Radar gives your AI pre-processed, enriched data —
               topology graphs, health assessments, deduplicated events, filtered logs — so it
               can understand your cluster state quickly without burning through context on
               verbose YAML output.
             </p>
             <p className="text-sm text-theme-text-secondary leading-relaxed">
-              Read tools are strictly read-only. Write tools (restart, scale, sync, apply,
-              node drain) are annotated as destructive so your AI client can flag them and
-              prompt before running.
+              Most read tools do not change cluster state. Live route diagnosis can create up
+              to five self-deleting probe pods when explicitly requested. Write tools (restart,
+              scale, sync, apply, node drain) are annotated as destructive so your AI client
+              can flag them and prompt before running.
             </p>
           </div>
 

package/src/components/home/RadarVersionLine.test.tsx

@@ -0,0 +1,145 @@
+import { renderToString } from 'react-dom/server'
+import { describe, expect, it } from 'vitest'
+import type { VersionInfo } from '../../api/client'
+import { RadarVersionLine } from './RadarVersionLine'
+
+const version: VersionInfo = {
+  currentVersion: '1.2.3',
+  latestVersion: '1.3.0',
+  updateAvailable: true,
+  installMethod: 'direct',
+  releaseUrl: 'https://github.com/skyhook-io/radar/releases/tag/v1.3.0',
+}
+
+describe('RadarVersionLine', () => {
+  it('shows the running version without an upgrade affordance when up to date', () => {
+    const html = renderToString(
+      <RadarVersionLine version={{ ...version, latestVersion: '1.2.3', updateAvailable: false }} />,
+    )
+    expect(html).toContain('Radar')
+    expect(html).toContain('v1.2.3')
+    expect(html).not.toContain('available')
+  })
+
+  it('shows patch upgrades with the quiet treatment', () => {
+    const html = renderToString(
+      <RadarVersionLine version={{ ...version, latestVersion: '1.2.4' }} />,
+    )
+    expect(html).toContain('v1.2.3')
+    expect(html).toContain('v1.2.4')
+    expect(html).toContain('available')
+    expect(html).toContain('text-accent-text hover:text-accent')
+  })
+
+  it('makes minor upgrades more prominent', () => {
+    const html = renderToString(<RadarVersionLine version={version} />)
+    expect(html).toContain('font-medium text-accent hover:text-accent-light')
+    expect(html).not.toContain('minor releases behind')
+  })
+
+  it('uses warning emphasis and explains when an installation is three minor releases behind', () => {
+    const html = renderToString(
+      <RadarVersionLine version={{ ...version, currentVersion: '1.0.9', latestVersion: '1.3.0' }} />,
+    )
+    expect(html).toContain('font-medium text-warning-text hover:opacity-80')
+    expect(html).toContain('This installation is 3 minor releases behind')
+  })
+
+  it('uses warning emphasis for a major upgrade', () => {
+    const html = renderToString(
+      <RadarVersionLine version={{ ...version, currentVersion: '0.12.0', latestVersion: '1.3.0' }} />,
+    )
+    expect(html).toContain('font-medium text-warning-text hover:opacity-80')
+    expect(html).toContain('A major Radar upgrade is available')
+  })
+
+  it('does not claim manager discovery has failed while it is loading', () => {
+    const html = renderToString(<RadarVersionLine version={version} managerLoading />)
+    expect(html).toContain('v1.3.0')
+    expect(html).toContain('available')
+    expect(html).toContain('lucide-circle-arrow-up')
+    expect(html).toContain('Checking how this installation is managed')
+    expect(html).not.toContain('could not be confirmed')
+    expect(html).not.toContain('<a')
+    expect(html).not.toContain('<button')
+    expect(html).toContain('class="sr-only"')
+    expect(html).not.toContain('aria-label=')
+  })
+
+  it('opens actionable upgrade instructions when the installation manager is unknown', () => {
+    const html = renderToString(<RadarVersionLine version={version} />)
+    expect(html).toContain('https://radarhq.io/docs/configuration/in-cluster')
+    expect(html).not.toContain('#upgrading')
+    expect(html).toContain('Open the in-cluster upgrade instructions')
+    expect(html).not.toContain(version.releaseUrl)
+    expect(html).toContain('font-medium text-accent hover:text-accent-light')
+  })
+
+  it('keeps the visible upgrade label in the accessible name', () => {
+    const html = renderToString(<RadarVersionLine version={version} />)
+    expect(html).toContain('aria-label="v1.3.0 available —')
+  })
+
+  it('deep-links exact Helm ownership when the host supports it', () => {
+    const html = renderToString(
+      <RadarVersionLine
+        version={version}
+        manager={{ ownership: 'helm', namespace: 'radar-system', release: 'radar' }}
+        onNavigateToHelmRelease={() => {}}
+      />,
+    )
+    expect(html).toContain('Managed by Helm release radar-system/radar')
+    expect(html).toContain('Open the release to upgrade')
+  })
+
+  it('describes the docs fallback when a Helm navigation callback is unavailable', () => {
+    const html = renderToString(
+      <RadarVersionLine
+        version={version}
+        manager={{ ownership: 'helm', namespace: 'radar-system', release: 'radar' }}
+      />,
+    )
+    expect(html).toContain('https://radarhq.io/docs/configuration/in-cluster')
+    expect(html).toContain('Managed by Helm release radar-system/radar')
+    expect(html).toContain('Open the in-cluster upgrade instructions')
+    expect(html).not.toContain('Open the release to upgrade')
+  })
+
+  it('deep-links verified GitOps ownership', () => {
+    const controllerRef = { group: 'kustomize.toolkit.fluxcd.io', kind: 'Kustomization', namespace: 'flux-system', name: 'radar' }
+    const verified = renderToString(
+      <RadarVersionLine
+        version={version}
+        manager={{ ownership: 'gitops', controller: 'Kustomization flux-system/radar', controllerRef }}
+        onNavigateToGitOps={() => {}}
+      />,
+    )
+    expect(verified).toContain('Managed by Kustomization flux-system/radar')
+    expect(verified).toContain('Open it to upgrade through GitOps')
+
+    const suspected = renderToString(
+      <RadarVersionLine
+        version={version}
+        manager={{ ownership: 'gitops', controller: 'Kustomization flux-system/radar' }}
+        onNavigateToGitOps={() => {}}
+      />,
+    )
+    expect(suspected).toContain('appears to be managed through GitOps (Kustomization flux-system/radar)')
+    expect(suspected).toContain('Open the upgrade instructions')
+    expect(suspected).not.toContain('Managed by Kustomization')
+  })
+
+  it('describes the docs fallback when a GitOps navigation callback is unavailable', () => {
+    const controllerRef = { group: 'kustomize.toolkit.fluxcd.io', kind: 'Kustomization', namespace: 'flux-system', name: 'radar' }
+    const html = renderToString(
+      <RadarVersionLine
+        version={version}
+        manager={{ ownership: 'gitops', controller: 'Kustomization flux-system/radar', controllerRef }}
+      />,
+    )
+    expect(html).toContain('https://radarhq.io/docs/configuration/in-cluster')
+    expect(html).toContain('Managed by Kustomization flux-system/radar')
+    expect(html).toContain('Open the in-cluster upgrade instructions and apply the change through GitOps')
+    expect(html).not.toContain('Open it to upgrade through GitOps')
+  })
+})

package/src/components/home/RadarVersionLine.tsx

@@ -0,0 +1,137 @@
+import { ArrowUpCircle } from 'lucide-react'
+import { gitOpsRouteForResource } from '@skyhook-io/k8s-ui'
+import type { CloudConnectSelf, VersionInfo } from '../../api/client'
+import {
+  getVersionUpdateStatus,
+  IN_CLUSTER_UPGRADE_URL,
+  type VersionUpdateTier,
+} from '../../utils/version'
+import { Tooltip } from '../ui/Tooltip'
+
+interface RadarVersionLineProps {
+  version: VersionInfo
+  manager?: CloudConnectSelf
+  managerLoading?: boolean
+  onNavigateToHelmRelease?: (namespace: string, release: string) => void
+  onNavigateToGitOps?: (path: string) => void
+}
+
+function displayVersion(version: string): string {
+  return version === 'dev' || version.startsWith('v') ? version : `v${version}`
+}
+
+export function RadarVersionLine({
+  version,
+  manager,
+  managerLoading = false,
+  onNavigateToHelmRelease,
+  onNavigateToGitOps,
+}: RadarVersionLineProps) {
+  const latestVersion = version.latestVersion
+  const updateStatus = getVersionUpdateStatus(version.currentVersion, latestVersion)
+  const showUpgrade = version.updateAvailable && !!latestVersion && updateStatus.tier !== 'none'
+
+  if (!showUpgrade) {
+    return <span>Radar <span className="font-mono">{displayVersion(version.currentVersion)}</span></span>
+  }
+
+  const controller = manager?.controllerRef
+  const gitOpsPath = controller
+    ? gitOpsRouteForResource({
+        apiVersion: controller.group ? `${controller.group}/v1` : undefined,
+        kind: controller.kind,
+        metadata: { namespace: controller.namespace, name: controller.name },
+      })
+    : null
+
+  let detail = managerLoading
+    ? 'Checking how this installation is managed.'
+    : 'The installation manager could not be confirmed. Open the in-cluster upgrade instructions.'
+  let onClick: (() => void) | undefined
+  const actionClassName = `inline-flex items-center gap-1 transition-colors ${upgradeActionClassName(updateStatus.tier)}`
+
+  if (manager?.ownership === 'helm' && manager.namespace && manager.release) {
+    if (onNavigateToHelmRelease) {
+      detail = `Managed by Helm release ${manager.namespace}/${manager.release}. Open the release to upgrade.`
+      onClick = () => onNavigateToHelmRelease(manager.namespace!, manager.release!)
+    } else {
+      detail = `Managed by Helm release ${manager.namespace}/${manager.release}. Open the in-cluster upgrade instructions.`
+    }
+  } else if (controller && gitOpsPath) {
+    const objectName = `${controller.namespace ? `${controller.namespace}/` : ''}${controller.name}`
+    if (onNavigateToGitOps) {
+      detail = `Managed by ${controller.kind} ${objectName}. Open it to upgrade through GitOps.`
+      onClick = () => onNavigateToGitOps(gitOpsPath)
+    } else {
+      detail = `Managed by ${controller.kind} ${objectName}. Open the in-cluster upgrade instructions and apply the change through GitOps.`
+    }
+  } else if (manager?.ownership === 'gitops') {
+    detail = manager.controller
+      ? `This installation appears to be managed through GitOps (${manager.controller}). Open the upgrade instructions and apply the change through its source of truth.`
+      : 'This installation appears to be managed through GitOps. Open the upgrade instructions and apply the change through its source of truth.'
+  }
+
+  const ageDetail = updateAgeDetail(updateStatus)
+  const accessibleLabel = `${displayVersion(latestVersion)} available${ageDetail ? `. ${ageDetail}` : ''} — ${detail}`
+  const action = managerLoading ? (
+    <span className={actionClassName}>
+      <UpgradeLabel version={latestVersion} />
+      <span className="sr-only">{detail}</span>
+    </span>
+  ) : onClick ? (
+    <button
+      type="button"
+      className={actionClassName}
+      onClick={onClick}
+      aria-label={accessibleLabel}
+    >
+      <UpgradeLabel version={latestVersion} />
+    </button>
+  ) : (
+    <a
+      href={IN_CLUSTER_UPGRADE_URL}
+      target="_blank"
+      rel="noreferrer"
+      className={actionClassName}
+      aria-label={accessibleLabel}
+    >
+      <UpgradeLabel version={latestVersion} />
+    </a>
+  )
+
+  return (
+    <span className="inline-flex flex-wrap items-center gap-x-1">
+      <span>Radar <span className="font-mono">{displayVersion(version.currentVersion)}</span></span>
+      <span className="inline-flex items-center gap-1">
+        <span aria-hidden>·</span>
+        <Tooltip
+          content={accessibleLabel}
+          className="!whitespace-normal !max-w-sm"
+        >
+          {action}
+        </Tooltip>
+      </span>
+    </span>
+  )
+}
+
+function upgradeActionClassName(tier: VersionUpdateTier): string {
+  if (tier === 'patch') return 'text-accent-text hover:text-accent'
+  if (tier === 'minor') return 'font-medium text-accent hover:text-accent-light'
+  return 'font-medium text-warning-text hover:opacity-80'
+}
+
+function updateAgeDetail(status: ReturnType<typeof getVersionUpdateStatus>): string | undefined {
+  if (status.majorVersionBehind) return 'A major Radar upgrade is available.'
+  if (status.tier !== 'stale' || !status.minorVersionsBehind) return undefined
+  return `This installation is ${status.minorVersionsBehind} minor releases behind.`
+}
+
+function UpgradeLabel({ version }: { version: string }) {
+  return (
+    <>
+      <ArrowUpCircle className="h-3.5 w-3.5 shrink-0" aria-hidden />
+      <span><span className="font-mono">{displayVersion(version)}</span> available</span>
+    </>
+  )
+}