@skyhook-io/k8s-ui 1.15.0 → 1.16.1

package/src/components/resources/renderers/PodRenderer.tsx

@@ -23,6 +23,8 @@ import type {
   RBACPolicyRule,
 } from '../../../types'
 import { Tooltip } from '../../ui/Tooltip'
+import { RadarUpgradeNote } from '../../ui/RadarUpgradeNote'
+import { getRadarUpgradeRequirement, type RadarUpgradeRequirement } from '../../../types/fetch-error'
 import { MetricsChart } from '../../ui/MetricsChart'
 import { MetricsUnavailableNotice } from './MetricsUnavailableNotice'
 import { ContainerEnvironmentSection } from './ContainerEnvironmentSection'
@@ -191,10 +193,12 @@ function EnvVarsSection({
   initContainers,
   containers,
   resolvedEnvFrom,
+  upgrade,
 }: {
   initContainers: any[]
   containers: any[]
   resolvedEnvFrom?: ResolvedEnvFrom
+  upgrade?: RadarUpgradeRequirement | null
 }) {
   const allContainers = [...initContainers, ...containers]
   const containersWithEnv = allContainers.filter((c: any) => c.env?.length > 0 || c.envFrom?.length > 0)
@@ -205,6 +209,7 @@ function EnvVarsSection({
   return (
     <Section title={`Environment Variables  ·  ${subtitle}`} icon={List} defaultExpanded={false}>
       <div className="space-y-4">
+        {upgrade && <RadarUpgradeNote requirement={upgrade} />}
         {allContainers.map((container: any) => {
           const envVars: any[] = container.env || []
           const envFrom: any[] = container.envFrom || []
@@ -312,6 +317,8 @@ export function PodRenderer({
   const hasResolvedEnvironmentRows = environment?.containers.some(
     container => container.rows.length > 0 || container.truncated,
   ) ?? false
+  // An older Radar can't resolve variable sources; fall back to the spec view.
+  const environmentUpgrade = getRadarUpgradeRequirement(environmentError)
 
   const namespace = data.metadata?.namespace
   const podName = data.metadata?.name
@@ -792,7 +799,7 @@ export function PodRenderer({
           <div className="text-xs text-theme-text-tertiary">Loading variable sources…</div>
         </Section>
       )}
-      {hasEnvironmentDeclarations && environmentError && !environment && (
+      {hasEnvironmentDeclarations && environmentError && !environment && !environmentUpgrade && (
         <Section title="Environment Variables" icon={List} defaultExpanded={false}>
           <div className="space-y-2 text-xs">
             <p className="text-theme-text-secondary">Variable sources could not be loaded.</p>
@@ -800,11 +807,12 @@ export function PodRenderer({
           </div>
         </Section>
       )}
-      {(!environment || !hasResolvedEnvironmentRows) && !environmentLoading && !environmentError && hasEnvironmentDeclarations && (
+      {(!environment || !hasResolvedEnvironmentRows) && !environmentLoading && (!environmentError || environmentUpgrade) && hasEnvironmentDeclarations && (
         <EnvVarsSection
           initContainers={initContainers}
           containers={containers}
           resolvedEnvFrom={resolvedEnvFrom}
+          upgrade={environmentUpgrade}
         />
       )}
 

package/src/components/resources/renderers/PolicySection.test.tsx

@@ -1,6 +1,7 @@
 import { describe, expect, it } from 'vitest'
 import { renderToString } from 'react-dom/server'
 import { PolicySection } from './PolicySection'
+import { RadarUpgradeContext } from '../../ui/RadarUpgradeNote'
 import type { PolicyResourceResponse } from '../../../types/policy'
 
 const base: PolicyResourceResponse = {
@@ -157,3 +158,44 @@ describe('when results were withheld from this caller', () => {
     expect(html).not.toContain('not shown here')
   })
 })
+
+// An older in-cluster Radar behind a newer frontend (Radar Hub) has no policy
+// endpoint. That is an expected state, so it gets an upgrade prompt, not red.
+describe('PolicySection — connected Radar predates policy results', () => {
+  const unsupported = Object.assign(new Error('Policy results need Radar v1.10.0 or newer'), {
+    radarUpgrade: { feature: 'Policy results', minimumVersion: 'v1.10.0', currentVersion: 'v1.7.2' },
+  })
+
+  it('prompts an upgrade instead of reporting a failure', () => {
+    const html = renderToString(<PolicySection data={null} error={unsupported} />)
+    expect(html).toContain('Policy results')
+    expect(html).toContain('need Radar v1.10 or newer on this cluster. It runs v1.7.2.')
+    expect(html).not.toContain('Could not load policy results')
+    expect(html).not.toContain('text-red-400')
+  })
+
+  it('hands the upgrade to the host when it offers a flow', () => {
+    const html = renderToString(
+      <RadarUpgradeContext.Provider value={{ onRequestUpgrade: () => undefined }}>
+        <PolicySection data={null} error={unsupported} />
+      </RadarUpgradeContext.Provider>,
+    )
+    expect(html).toContain('<button')
+    expect(html).toContain('Upgrade Radar')
+  })
+
+  it('links to instructions when the host has no flow', () => {
+    const html = renderToString(
+      <RadarUpgradeContext.Provider value={{ upgradeHref: 'https://radarhq.io/docs/configuration/in-cluster' }}>
+        <PolicySection data={null} error={unsupported} />
+      </RadarUpgradeContext.Provider>,
+    )
+    expect(html).toContain('href="https://radarhq.io/docs/configuration/in-cluster"')
+    expect(html).toContain('How to upgrade')
+  })
+
+  it('keeps a genuine failure red', () => {
+    const html = renderToString(<PolicySection data={null} error={new Error('HTTP 502 (Bad Gateway)')} />)
+    expect(html).toContain('Could not load policy results: HTTP 502 (Bad Gateway)')
+  })
+})

package/src/components/resources/renderers/PolicySection.tsx

@@ -2,7 +2,8 @@ import { ShieldCheck, ShieldAlert, ShieldQuestion } from 'lucide-react'
 import { clsx } from 'clsx'
 import { Section } from '../../ui/drawer-components'
 import { SEVERITY_BADGE } from '../../../utils/badge-colors'
-import { isForbiddenError } from '../../../types/fetch-error'
+import { RadarUpgradeNote } from '../../ui/RadarUpgradeNote'
+import { getRadarUpgradeRequirement, isForbiddenError } from '../../../types/fetch-error'
 import type { PolicyResourceResponse, PolicyResourceFinding } from '../../../types/policy'
 
 interface PolicySectionProps {
@@ -61,6 +62,14 @@ export function PolicySection({ data, loading, error }: PolicySectionProps) {
         </Section>
       )
     }
+    const upgrade = getRadarUpgradeRequirement(error)
+    if (upgrade) {
+      return (
+        <Section title={TITLE} icon={ShieldQuestion}>
+          <RadarUpgradeNote requirement={upgrade} />
+        </Section>
+      )
+    }
     return (
       <Section title={TITLE} icon={ShieldAlert}>
         <div className="text-sm text-red-400">{`Could not load policy results: ${error.message}`}</div>

package/src/components/shared/DrainPlanDialog.test.tsx

@@ -88,6 +88,16 @@ describe('DrainPlanContent', () => {
     )
   }
 
+  it('says a drain plan needs a newer Radar when the cluster predates it', () => {
+    const html = render({
+      planSupported: false,
+      planUpgrade: { feature: 'Drain plans', minimumVersion: 'v1.14.0', currentVersion: 'v1.13.1' },
+    })
+    expect(html).toContain('Drain plans')
+    expect(html).toContain('need Radar v1.14 or newer on this cluster.')
+    expect(html).not.toContain('Computing the plan')
+  })
+
   it('shows per-pod outcomes with reasons and calls the result an estimate', () => {
     const html = render({ plan: plan([pod('web', 'may-block', { pdb: 'shop/web', reason: 'PodDisruptionBudget shop/web currently allows no disruptions' }), pod('agent', 'skip')]) })
     expect(html).toContain('may block')

package/src/components/shared/DrainPlanDialog.tsx

@@ -3,6 +3,8 @@ import { ConfirmDialog } from '../ui/ConfirmDialog'
 import { Badge, type BadgeSeverity } from '../ui/Badge'
 import { AlertBanner } from '../ui/drawer-components'
 import { Tooltip } from '../ui/Tooltip'
+import { RadarUpgradeNote } from '../ui/RadarUpgradeNote'
+import type { RadarUpgradeRequirement } from '../../types/fetch-error'
 import { pluralize } from '../../utils/pluralize'
 
 // Shapes returned by POST /api/nodes/{name}/drain-plan.
@@ -102,6 +104,8 @@ interface DrainPlanContentProps {
   options: DrainDialogOptions
   onOptionsChange: (options: DrainDialogOptions) => void
   planSupported: boolean
+  /** Why there is no plan, when the connected Radar predates drain plans. */
+  planUpgrade?: RadarUpgradeRequirement | null
   /** Recompute the plan with the current options; also the retry after a failed plan. */
   onRefreshPlan?: () => void
 }
@@ -112,7 +116,7 @@ interface DrainPlanContentProps {
  * react-dom/server); the enclosing dialog owns the confirm gating.
  */
 export function DrainPlanContent({
-  nodeName, plan, loading, error, options, onOptionsChange, planSupported, onRefreshPlan,
+  nodeName, plan, loading, error, options, onOptionsChange, planSupported, planUpgrade, onRefreshPlan,
 }: DrainPlanContentProps) {
   const current = planMatches(plan, nodeName, options) ? plan : null
   const atRisk = current ? emptyDirPodsAtRisk(current) : []
@@ -140,6 +144,8 @@ export function DrainPlanContent({
         </label>
       </div>
 
+      {!planSupported && planUpgrade && <RadarUpgradeNote requirement={planUpgrade} />}
+
       {planSupported && loading && (
         <div className="flex items-center gap-2 text-theme-text-secondary">
           <Loader2 className="w-4 h-4 animate-spin" /> Computing the plan…
@@ -259,12 +265,14 @@ interface DrainPlanDialogProps {
   isDraining: boolean
   /** Whether the host can compute plans. Without it the dialog confirms without one. */
   planSupported: boolean
+  /** Why there is no plan, when the connected Radar predates drain plans. */
+  planUpgrade?: RadarUpgradeRequirement | null
   /** Recompute the plan with the current options; also the retry after a failed plan. */
   onRefreshPlan?: () => void
 }
 
 export function DrainPlanDialog({
-  open, nodeName, plan, loading, error, options, onOptionsChange, onConfirm, onClose, isDraining, planSupported, onRefreshPlan,
+  open, nodeName, plan, loading, error, options, onOptionsChange, onConfirm, onClose, isDraining, planSupported, planUpgrade, onRefreshPlan,
 }: DrainPlanDialogProps) {
   const confirmEnabled = canConfirmDrain({ plan, nodeName, options, loading, error, planSupported })
 
@@ -274,7 +282,9 @@ export function DrainPlanDialog({
       onClose={onClose}
       onConfirm={() => onConfirm(options)}
       title="Drain Node"
-      message={`Cordon "${nodeName}" and evict the pods listed below. The list is an estimate: the drain re-lists live state when it runs.`}
+      message={planSupported
+        ? `Cordon "${nodeName}" and evict the pods listed below. The list is an estimate: the drain re-lists live state when it runs.`
+        : `Cordon "${nodeName}" and evict its pods.`}
       confirmLabel={isDraining ? 'Draining...' : 'Drain'}
       variant="danger"
       isLoading={isDraining}
@@ -290,6 +300,7 @@ export function DrainPlanDialog({
         options={options}
         onOptionsChange={onOptionsChange}
         planSupported={planSupported}
+        planUpgrade={planUpgrade}
         onRefreshPlan={onRefreshPlan}
       />
     </ConfirmDialog>

package/src/components/shared/ResourceActionsBar.tsx

@@ -25,6 +25,7 @@ import { ConfirmDialog } from '../ui/ConfirmDialog'
 import { AlertBanner } from '../ui/drawer-components'
 import { DialogPortal } from '../ui/DialogPortal'
 import type { SelectedResource, WorkloadRevision } from '../../types'
+import type { RadarUpgradeRequirement } from '../../types/fetch-error'
 import { displayKindName } from '../ui/drawer-components'
 import { getDefaultContainerName } from '../resources/resource-utils'
 import { SetImageDialog, type ManagedImageSource } from './SetImageDialog'
@@ -143,10 +144,12 @@ interface ResourceActionsBarProps {
   drainPlan?: DrainPlan | null
   isPlanningDrain?: boolean
   drainPlanError?: string | null
-  // The connected backend has no drain-plan endpoint (version skew, e.g. a newer
-  // frontend against an older radar). The dialog falls back to the plan-less
-  // acknowledgement-only mode instead of keeping Drain disabled on a dead request.
-  drainPlanUnsupported?: boolean
+  // The connected Radar predates the drain-plan endpoint (a newer frontend
+  // against an older Radar). The dialog falls back to the plan-less
+  // acknowledgement-only mode instead of keeping Drain disabled on a dead
+  // request, and names the Radar version that serves plans so the user knows a
+  // preview exists.
+  drainPlanUpgrade?: RadarUpgradeRequirement | null
 }
 
 export function ResourceActionsBar({
@@ -177,7 +180,7 @@ export function ResourceActionsBar({
   onCordonNode, isCordoningNode,
   onUncordonNode, isUncordoningNode,
   onDrainNode, isDrainingNode,
-  onPlanDrain, onPlanDrainReset, drainPlan, isPlanningDrain, drainPlanError, drainPlanUnsupported,
+  onPlanDrain, onPlanDrainReset, drainPlan, isPlanningDrain, drainPlanError, drainPlanUpgrade,
 }: ResourceActionsBarProps) {
   const kind = resource.kind.toLowerCase()
   const coreBatchJob = isCoreBatchJob(kind, resource.group)
@@ -202,13 +205,14 @@ export function ResourceActionsBar({
   // open: the host reports it through a mutation error, which the next request clears,
   // so without latching every option change would refire a request known to 404 and
   // bounce the dialog out of its fallback mode.
-  const [planUnsupported, setPlanUnsupported] = useState(false)
+  const [planUpgrade, setPlanUpgrade] = useState<RadarUpgradeRequirement | null>(null)
   useEffect(() => {
-    if (drainPlanUnsupported) setPlanUnsupported(true)
-  }, [drainPlanUnsupported])
+    if (drainPlanUpgrade) setPlanUpgrade(drainPlanUpgrade)
+  }, [drainPlanUpgrade])
   useEffect(() => {
-    if (!showDrainConfirm) setPlanUnsupported(false)
+    if (!showDrainConfirm) setPlanUpgrade(null)
   }, [showDrainConfirm])
+  const planUnsupported = planUpgrade !== null
   const planSupported = Boolean(onPlanDrain) && !planUnsupported
 
   // Fetch (and refetch on option changes) the read-only plan while the drain dialog is open.
@@ -719,6 +723,7 @@ export function ResourceActionsBar({
         options={drainOptions}
         onOptionsChange={setDrainOptions}
         planSupported={planSupported}
+        planUpgrade={planUpgrade}
         onRefreshPlan={planSupported ? () => onPlanDrain?.({ name: resource.name, options: drainOptions }) : undefined}
         isDraining={Boolean(isDrainingNode)}
         onClose={() => {

package/src/components/ui/FilterPill.tsx

@@ -52,7 +52,7 @@ const TONE_ACTIVE: Record<FilterPillTone, string> = {
   high:    'bg-orange-500/15 border-orange-500/40 text-orange-800 dark:text-orange-300',
   medium:  'bg-yellow-500/15 border-yellow-500/40 text-yellow-800 dark:text-yellow-300',
   ok:      'bg-emerald-500/15 border-emerald-500/40 text-emerald-700 dark:text-emerald-300',
-  brand:   'bg-[var(--color-brand-50)] border-[var(--color-radar-accent)] text-theme-text-primary dark:bg-[var(--color-brand-950)]',
+  brand:   'bg-[var(--color-brand-50,var(--accent-muted))] border-[var(--color-radar-accent,var(--accent))] text-theme-text-primary dark:bg-[var(--color-brand-950,var(--accent-muted))]',
 }
 
 const INACTIVE = 'border-theme-border-light text-theme-text-secondary hover:border-theme-border hover:text-theme-text-primary hover:bg-theme-hover/50'

package/src/components/ui/RadarUpgradeNote.click.test.tsx

@@ -0,0 +1,24 @@
+// @vitest-environment jsdom
+import { act } from 'react'
+import { createRoot } from 'react-dom/client'
+import { expect, it, vi } from 'vitest'
+import { RadarUpgradeContext, RadarUpgradeNote } from './RadarUpgradeNote'
+
+vi.stubGlobal('IS_REACT_ACT_ENVIRONMENT', true)
+
+it('hands the whole requirement to the host when the user asks to upgrade', async () => {
+  const onRequestUpgrade = vi.fn()
+  const requirement = { feature: 'Policy results', minimumVersion: 'v1.10.0', currentVersion: 'v1.7.2', latestVersion: 'v1.16.0' }
+  const element = document.createElement('div')
+  const root = createRoot(element)
+  await act(async () => {
+    root.render(
+      <RadarUpgradeContext.Provider value={{ onRequestUpgrade }}>
+        <RadarUpgradeNote requirement={requirement} />
+      </RadarUpgradeContext.Provider>,
+    )
+  })
+  await act(async () => { element.querySelector('button')!.click() })
+  expect(onRequestUpgrade).toHaveBeenCalledWith(requirement)
+  await act(async () => root.unmount())
+})

package/src/components/ui/RadarUpgradeNote.test.tsx

@@ -0,0 +1,66 @@
+import { describe, expect, it } from 'vitest'
+import { renderToString } from 'react-dom/server'
+import { formatRadarVersion, radarUpgradeDetail, radarUpgradeHeadline, RadarUpgradeNote } from './RadarUpgradeNote'
+import { getRadarUpgradeRequirement } from '../../types/fetch-error'
+
+describe('radarUpgradeHeadline', () => {
+  it('says the cluster is behind, not the UI', () => {
+    expect(radarUpgradeHeadline('Capacity')).toBe('Capacity needs a newer Radar on this cluster')
+  })
+})
+
+describe('radarUpgradeDetail', () => {
+  it('quotes the minimum and a real current version', () => {
+    expect(radarUpgradeDetail({ feature: 'Policy results', minimumVersion: 'v1.10.0', currentVersion: '1.7.2' }))
+      .toBe('Available from Radar v1.10. This cluster runs v1.7.2.')
+  })
+
+  it('leaves out a current version that is not a version', () => {
+    expect(radarUpgradeDetail({ feature: 'Policy results', minimumVersion: 'v1.10.0', currentVersion: 'dev' }))
+      .toBe('Available from Radar v1.10.')
+    expect(radarUpgradeDetail({ feature: 'Policy results', minimumVersion: 'v1.10.0' }))
+      .toBe('Available from Radar v1.10.')
+  })
+})
+
+describe('radarUpgradeDetail without a known first release', () => {
+  const unknownSince = { feature: 'Drift alerts', currentVersion: 'v1.7.2' }
+
+  it('asks for the latest release when it is newer than the running one', () => {
+    expect(radarUpgradeDetail({ ...unknownSince, latestVersion: '1.16.0' }))
+      .toBe('Available in the latest Radar, v1.16. This cluster runs v1.7.2.')
+  })
+
+  it('only names the running version when no target release is known', () => {
+    expect(radarUpgradeDetail(unknownSince)).toBe('This cluster runs v1.7.2.')
+    expect(radarUpgradeDetail({ ...unknownSince, currentVersion: 'v1.16.0', latestVersion: 'v1.16.0' }))
+      .toBe('This cluster runs v1.16.')
+  })
+
+  it('reads the same way inline', () => {
+    const html = renderToString(<RadarUpgradeNote requirement={{ ...unknownSince, latestVersion: 'v1.16.0' }} />)
+    expect(html).toContain('need the latest Radar (v1.16) on this cluster. It runs v1.7.2.')
+  })
+})
+
+describe('formatRadarVersion', () => {
+  it('drops a zero patch and adds the v', () => {
+    expect(formatRadarVersion('v1.14.0')).toBe('v1.14')
+    expect(formatRadarVersion('1.7.2')).toBe('v1.7.2')
+    expect(formatRadarVersion('v1.7.2-dirty')).toBe('v1.7.2-dirty')
+  })
+})
+
+describe('getRadarUpgradeRequirement', () => {
+  it('reads the requirement off any error that carries one', () => {
+    const error = Object.assign(new Error('x'), { radarUpgrade: { feature: 'Drain plans', minimumVersion: 'v1.14.0' } })
+    expect(getRadarUpgradeRequirement(error)).toEqual({ feature: 'Drain plans', minimumVersion: 'v1.14.0' })
+  })
+
+  it('ignores plain errors and malformed requirements', () => {
+    expect(getRadarUpgradeRequirement(new Error('HTTP 404 (Not Found)'))).toBeNull()
+    expect(getRadarUpgradeRequirement({ radarUpgrade: { minimumVersion: 'v1.9.0' } })).toBeNull()
+    expect(getRadarUpgradeRequirement({ radarUpgrade: { feature: 'x', minimumVersion: 9 } })).toBeNull()
+    expect(getRadarUpgradeRequirement(null)).toBeNull()
+  })
+})

package/src/components/ui/RadarUpgradeNote.tsx

@@ -0,0 +1,129 @@
+import { createContext, useContext } from 'react'
+import { clsx } from 'clsx'
+import { ArrowUpCircle, ExternalLink } from 'lucide-react'
+import type { RadarUpgradeRequirement } from '../../types/fetch-error'
+
+export interface RadarUpgradeActions {
+  /** Hands the upgrade to the host, e.g. Radar Cloud's role-aware upgrade flow. */
+  onRequestUpgrade?: (requirement: RadarUpgradeRequirement) => void
+  /** Used when there is no handler: a page with upgrade instructions. */
+  upgradeHref?: string
+}
+
+export const RadarUpgradeContext = createContext<RadarUpgradeActions>({})
+
+/** "v1.10.0" → "v1.10", "1.7.2" → "v1.7.2". Anything else is shown as given. */
+export function formatRadarVersion(version: string): string {
+  const match = /^v?(\d+)\.(\d+)\.(\d+)$/.exec(version.trim())
+  if (!match) return version
+  const [, major, minor, patch] = match
+  return patch === '0' ? `v${major}.${minor}` : `v${major}.${minor}.${patch}`
+}
+
+function parseVersion(version: string | undefined): number[] | null {
+  const match = /^v?(\d+)\.(\d+)\.(\d+)/.exec(version?.trim() ?? '')
+  return match ? match.slice(1).map(Number) : null
+}
+
+function isNewer(a: number[], b: number[]): boolean {
+  for (let i = 0; i < 3; i++) if (a[i] !== b[i]) return a[i] > b[i]
+  return false
+}
+
+/**
+ * Which Radar to ask for. The release that introduced the feature when it is
+ * known; otherwise the latest release, which serves everything this UI calls;
+ * otherwise just "a newer Radar".
+ */
+function target(requirement: RadarUpgradeRequirement): { since?: string; latest?: string } {
+  if (requirement.minimumVersion) return { since: formatRadarVersion(requirement.minimumVersion) }
+  const { latestVersion } = requirement
+  const latest = parseVersion(latestVersion)
+  const current = parseVersion(requirement.currentVersion)
+  if (latestVersion && latest && (!current || isNewer(latest, current))) {
+    return { latest: formatRadarVersion(latestVersion) }
+  }
+  return {}
+}
+
+// The Radar that is behind is the cluster's, not the UI the user is looking
+// at, so the copy names the cluster. "It runs dev." says nothing useful, so
+// only a real version is quoted.
+function clusterVersion(requirement: RadarUpgradeRequirement): string | undefined {
+  const current = requirement.currentVersion?.trim()
+  return current && /^v?\d+\.\d+/.test(current) ? formatRadarVersion(current) : undefined
+}
+
+/** Headline for a full-page state: "Capacity needs a newer Radar on this cluster". */
+export function radarUpgradeHeadline(feature: string): string {
+  return `${feature} needs a newer Radar on this cluster`
+}
+
+/** Detail under that headline: "Available from Radar v1.9. This cluster runs v1.7.2." */
+export function radarUpgradeDetail(requirement: RadarUpgradeRequirement): string {
+  const { since, latest } = target(requirement)
+  const current = clusterVersion(requirement)
+  return [
+    since ? `Available from Radar ${since}.` : latest ? `Available in the latest Radar, ${latest}.` : '',
+    current ? `This cluster runs ${current}.` : '',
+  ].filter(Boolean).join(' ')
+}
+
+/** Follows the feature name in an inline note: "need Radar v1.10 or newer on this cluster. It runs v1.7.2." */
+function radarUpgradeNeed(requirement: RadarUpgradeRequirement): string {
+  const { since, latest } = target(requirement)
+  const current = clusterVersion(requirement)
+  const need = since
+    ? `need Radar ${since} or newer on this cluster.`
+    : latest
+      ? `need the latest Radar (${latest}) on this cluster.`
+      : 'need a newer Radar on this cluster.'
+  return current ? `${need} It runs ${current}.` : need
+}
+
+/** The upgrade call to action, or nothing when the host offers no way to upgrade. */
+export function RadarUpgradeAction({ requirement }: { requirement: RadarUpgradeRequirement }) {
+  const { onRequestUpgrade, upgradeHref } = useContext(RadarUpgradeContext)
+  const className = 'inline-flex items-center gap-1 font-medium text-accent-text hover:underline'
+  if (onRequestUpgrade) {
+    return (
+      <button type="button" className={className} onClick={() => onRequestUpgrade(requirement)}>
+        Upgrade Radar
+      </button>
+    )
+  }
+  if (upgradeHref) {
+    return (
+      <a href={upgradeHref} target="_blank" rel="noopener noreferrer" className={className}>
+        How to upgrade
+        <ExternalLink className="h-3 w-3" aria-hidden />
+      </a>
+    )
+  }
+  return null
+}
+
+/**
+ * Inline note for a feature the connected Radar is too old to serve. Calm on
+ * purpose: nothing failed, the cluster just runs an older Radar than this UI.
+ */
+export function RadarUpgradeNote({
+  requirement,
+  className,
+}: {
+  requirement: RadarUpgradeRequirement
+  className?: string
+}) {
+  return (
+    <div className={clsx('flex items-start gap-2 text-xs text-theme-text-secondary', className)}>
+      <ArrowUpCircle className="mt-px h-3.5 w-3.5 shrink-0 text-accent-text" aria-hidden />
+      <p className="min-w-0">
+        <span className="font-medium text-theme-text-primary">{requirement.feature}</span>
+        {' '}
+        {radarUpgradeNeed(requirement)}
+        {' '}
+        <RadarUpgradeAction requirement={requirement} />
+      </p>
+    </div>
+  )
+}

package/src/components/ui/ResourceBar.tsx

@@ -60,7 +60,7 @@ export function ResourceBar({
   label,
 }: ResourceBarProps) {
   const track = (
-    <div className={clsx('relative', layout === 'inline' && 'min-w-0 flex-1')}>
+    <div className={clsx('relative', layout === 'inline' && 'min-w-16 flex-1')}>
       <div className={clsx('rounded-full border border-theme-border bg-theme-elevated overflow-hidden', layout === 'inline' ? 'h-1' : 'h-1.5')}>
         <div
           className={clsx('h-full rounded-full transition-[width] duration-300 ease-out', getBarColor(percent, colorScheme))}
@@ -78,7 +78,7 @@ export function ResourceBar({
 
   const bar =
     layout === 'inline' ? (
-      <div className="flex items-center gap-1.5 min-w-0">
+      <div className={clsx('flex items-center gap-1.5 min-w-0', tooltip && 'w-full')}>
         <span className="w-7 shrink-0 text-[10px] font-medium uppercase tracking-wide text-theme-text-tertiary">{label}</span>
         {track}
         <span className="w-8 shrink-0 text-right text-[10.5px] font-mono tabular-nums text-theme-text-secondary">
@@ -86,7 +86,7 @@ export function ResourceBar({
         </span>
       </div>
     ) : (
-      <div className="flex flex-col gap-0.5 min-w-0">
+      <div className={clsx('flex flex-col gap-0.5 min-w-0', tooltip && 'w-full')}>
         <div className="flex items-baseline justify-between gap-1">
           <span className="text-xs font-mono text-theme-text-secondary truncate">
             {used} / {total}
@@ -99,11 +99,17 @@ export function ResourceBar({
       </div>
     )
 
+  // Tooltip's wrapper is inline-flex: it sizes the row to its content (hence
+  // w-full on the row, or the track collapses to the labels' width) and it is
+  // inline-level, so the block div keeps sibling bars stacked instead of
+  // sharing one line.
   if (tooltip) {
     return (
-      <Tooltip content={tooltip} delay={200} position="top" wrapperClassName="w-full min-w-0">
-        {bar}
-      </Tooltip>
+      <div className="min-w-0">
+        <Tooltip content={tooltip} delay={200} position="top" wrapperClassName="w-full min-w-0">
+          {bar}
+        </Tooltip>
+      </div>
     )
   }