@skyhook-io/k8s-ui 1.16.2 → 1.17.0

package/src/components/cnpg/CNPGObjectSummary.test.tsx

@@ -0,0 +1,236 @@
+import { describe, expect, it } from 'vitest'
+import { renderToString } from 'react-dom/server'
+import { CNPGBackupSummary, CNPGScheduledBackupSummary } from './CNPGBackupSummary'
+import { CNPGObjectStoreSummary } from './CNPGObjectStoreSummary'
+import { CNPGDatabaseSummary } from './CNPGDeclarativeSummary'
+import { CNPGPoolerSummary } from './CNPGPoolerSummary'
+import { CNPGImageCatalogSummary } from './CNPGImageCatalogSummary'
+import { CNPG_WORKSPACE_KEYS, type CNPGWorkspaceKey, type CNPGWorkspaceResponse } from './workspace'
+
+const PG = 'postgresql.cnpg.io/v1'
+const PLUGIN = 'barman-cloud.cloudnative-pg.io'
+const nav = () => {}
+
+function ws(objects: Partial<Record<CNPGWorkspaceKey, any[]>>, over: Partial<CNPGWorkspaceResponse> = {}): CNPGWorkspaceResponse {
+  const coverage: CNPGWorkspaceResponse['coverage'] = {}
+  for (const k of CNPG_WORKSPACE_KEYS) coverage[k] = { state: 'full' }
+  return {
+    installed: true,
+    context: 'c',
+    namespaces: ['pg'],
+    coverage: { ...coverage, ...(over.coverage ?? {}) },
+    objects,
+    issues: over.issues ?? [],
+    audit: [],
+    backupsOmitted: over.backupsOmitted ?? 0,
+  }
+}
+
+function text(html: string): string {
+  return html
+    .split(/<[^>]*>/)
+    .join('')
+    .split('&#x27;').join("'")
+    .split('&quot;').join('"')
+    .split('&amp;').join('&')
+}
+
+const mainCluster = {
+  apiVersion: PG,
+  kind: 'Cluster',
+  metadata: { name: 'main', namespace: 'pg' },
+  spec: { plugins: [{ name: PLUGIN, parameters: { barmanObjectName: 'store' } }], managed: { roles: [{ name: 'reporting' }] } },
+  status: { conditions: [{ type: 'ContinuousArchiving', status: 'False', message: 'upload failed' }] },
+}
+
+describe('CNPGBackupSummary', () => {
+  const b = {
+    apiVersion: PG,
+    kind: 'Backup',
+    metadata: { name: 'main-20260901', namespace: 'pg', labels: { 'cnpg.io/scheduled-backup': 'nightly' } },
+    spec: { cluster: { name: 'main' }, method: 'plugin', pluginConfiguration: { name: PLUGIN } },
+    status: {
+      phase: 'failed',
+      startedAt: '2026-09-01T00:00:00Z',
+      stoppedAt: '2026-09-01T00:02:30Z',
+      instanceID: { podName: 'main-2' },
+      error: 'can not upload',
+    },
+  }
+
+  it('shows the outcome and relationships from the same status fields', () => {
+    const html = renderToString(<CNPGBackupSummary resource={b} workspace={ws({ clusters: [mainCluster] })} onNavigate={nav} />)
+    const t = text(html)
+    expect(t).toContain('Failed')
+    expect(t).toContain('took 2m 30s')
+    expect(t).toContain('main-2')
+    expect(t).toContain('can not upload')
+    expect(t).toContain('ScheduledBackup nightly')
+    expect(t).toContain("ObjectStore store · from the Cluster's current configuration")
+    expect(t).not.toContain('On demand')
+  })
+
+  it('does not link a same-name schedule that replaced the one that took the backup', () => {
+    const owned = { ...b, metadata: { ...b.metadata, ownerReferences: [{ apiVersion: PG, kind: 'ScheduledBackup', name: 'nightly', uid: 'old' }] } }
+    const sched = { apiVersion: PG, kind: 'ScheduledBackup', metadata: { name: 'nightly', namespace: 'pg', uid: 'new' } }
+    const t = text(renderToString(<CNPGBackupSummary resource={owned} workspace={ws({ clusters: [mainCluster], scheduledBackups: [sched] })} onNavigate={nav} />))
+    expect(t).toContain('an earlier schedule of that name')
+  })
+
+  it('shows its own issues on top', () => {
+    const issues = [
+      { id: 'i1', severity: 'critical' as const, kind: 'Backup', group: 'postgresql.cnpg.io', namespace: 'pg', name: 'main-20260901', reason: 'CNPGBackupFailed', message: 'Backup failed' },
+      { id: 'i2', severity: 'critical' as const, kind: 'Backup', group: 'velero.io', namespace: 'pg', name: 'main-20260901', reason: 'VeleroBackupFailed', message: 'Velero backup failed' },
+    ]
+    const t = text(renderToString(<CNPGBackupSummary resource={b} workspace={ws({ clusters: [mainCluster] }, { issues })} onNavigate={nav} />))
+    expect(t).toContain('Backup failed')
+    expect(t).not.toContain('Velero backup failed')
+  })
+})
+
+describe('CNPGScheduledBackupSummary', () => {
+  it('lists owned runs and notes omitted history', () => {
+    const sched = { apiVersion: PG, kind: 'ScheduledBackup', metadata: { name: 'nightly', namespace: 'pg' }, spec: { cluster: { name: 'main' }, schedule: '0 0 0 * * *' } }
+    const run = { apiVersion: PG, kind: 'Backup', metadata: { name: 'run-1', namespace: 'pg', labels: { 'cnpg.io/scheduled-backup': 'nightly' } }, status: { phase: 'completed', startedAt: '2026-09-01T00:00:00Z' } }
+    const t = text(renderToString(<CNPGScheduledBackupSummary resource={sched} workspace={ws({ backups: [run] }, { backupsOmitted: 3 })} onNavigate={nav} />))
+    expect(t).toContain('0 0 0 * * *')
+    expect(t).toContain('seconds first')
+    expect(t).not.toContain('Daily')
+    expect(t).toContain('run-1')
+    expect(t).toContain('Completed')
+    expect(t).toContain('Backups older than 7 days are not listed')
+  })
+
+  it('says when Backups are not readable instead of listing none', () => {
+    const sched = { apiVersion: PG, kind: 'ScheduledBackup', metadata: { name: 'nightly', namespace: 'pg' }, spec: { cluster: { name: 'main' } } }
+    const t = text(renderToString(<CNPGScheduledBackupSummary resource={sched} workspace={ws({}, { coverage: { backups: { state: 'denied' } } })} />))
+    expect(t).toContain('No access to Backups')
+    expect(t).not.toContain('No Backups from this schedule')
+  })
+})
+
+describe('CNPGObjectStoreSummary', () => {
+  const store = {
+    apiVersion: 'barmancloud.cnpg.io/v1',
+    kind: 'ObjectStore',
+    metadata: { name: 'store', namespace: 'pg' },
+    spec: {
+      configuration: {
+        destinationPath: 's3://bucket/pg',
+        s3Credentials: { accessKeyId: { name: 's3-creds', key: 'ACCESS_KEY_ID' }, secretAccessKey: { name: 's3-creds', key: 'SECRET' } },
+      },
+      retentionPolicy: '30d',
+    },
+    status: {
+      serverRecoveryWindow: {
+        main: { firstRecoverabilityPoint: '2026-09-01T00:00:00Z', lastSuccessfulBackupTime: '2026-09-02T00:00:00Z', lastFailedBackupTime: '2026-09-03T00:00:00Z' },
+      },
+    },
+  }
+
+  it('labels upload health as inferred and explains the stalled window', () => {
+    const t = text(renderToString(<CNPGObjectStoreSummary resource={store} workspace={ws({ clusters: [mainCluster] })} onNavigate={nav} />))
+    expect(t).toContain('inferred')
+    expect(t).toContain("Inferred from 1 cluster's WAL archiving and backup results — ObjectStore has no health status")
+    expect(t).toContain('Uploads failing')
+    expect(t).toContain('A backup failed after the last recorded success.')
+    expect(t).not.toContain('restorable')
+    expect(t).toContain('s3-creds')
+    expect(t).toContain('s3://bucket/pg')
+  })
+
+  it('never renders credential keys or Secret contents', () => {
+    const html = renderToString(<CNPGObjectStoreSummary resource={store} workspace={ws({ clusters: [mainCluster] })} onNavigate={nav} />)
+    expect(html).not.toContain('ACCESS_KEY_ID')
+    expect(html).not.toContain('SECRET')
+  })
+
+  it('records a failure with no success without claiming a recovery point', () => {
+    const failing = { ...store, status: { serverRecoveryWindow: { main: { lastFailedBackupTime: '2026-09-03T00:00:00Z' } } } }
+    const t = text(renderToString(<CNPGObjectStoreSummary resource={failing} workspace={ws({ clusters: [mainCluster] })} />))
+    expect(t).toContain('No successful backup recorded.')
+    expect(t).not.toContain('restorable')
+  })
+
+  it('says when no visible cluster uses the store', () => {
+    const t = text(renderToString(<CNPGObjectStoreSummary resource={store} workspace={ws({ clusters: [] })} />))
+    expect(t).toContain('No visible cluster uses this store')
+    expect(t).not.toContain('Inferred from')
+  })
+})
+
+describe('CNPGDatabaseSummary', () => {
+  const db = (status: any) => ({
+    apiVersion: PG,
+    kind: 'Database',
+    metadata: { name: 'app-db', namespace: 'pg', generation: 2 },
+    spec: { cluster: { name: 'main' }, name: 'app', owner: 'app', databaseReclaimPolicy: 'delete' },
+    status,
+  })
+
+  it('reports an unreconciled database as pending, not failed', () => {
+    const t = text(renderToString(<CNPGDatabaseSummary resource={db({})} workspace={ws({ clusters: [mainCluster] })} onNavigate={nav} />))
+    expect(t).toContain('Pending')
+    expect(t).not.toContain('Not applied')
+    expect(t).toContain('drops it from PostgreSQL')
+    expect(t).toContain('GitOps source not recorded')
+    expect(t).not.toContain('Applied directly')
+  })
+
+  it('reports a failure and the missing managed role beside it', () => {
+    const t = text(
+      renderToString(
+        <CNPGDatabaseSummary
+          resource={db({ applied: false, observedGeneration: 2, message: 'role "app" does not exist' })}
+          workspace={ws({ clusters: [mainCluster] })}
+          onNavigate={nav}
+        />,
+      ),
+    )
+    expect(t).toContain('Not applied')
+    expect(t).toContain('“app” is not among main\'s managed roles')
+  })
+})
+
+describe('CNPGPoolerSummary', () => {
+  it('reports unknown scheduled count and unmeasured pressure', () => {
+    const pooler = { apiVersion: PG, kind: 'Pooler', metadata: { name: 'main-rw', namespace: 'pg' }, spec: { cluster: { name: 'main' }, type: 'rw', instances: 2 } }
+    const t = text(renderToString(<CNPGPoolerSummary resource={pooler} workspace={ws({})} onNavigate={nav} />))
+    expect(t).toContain('Scheduled count not reported')
+    expect(t).toContain('Not measured')
+    expect(t).toContain('main-rw')
+  })
+})
+
+describe('CNPGImageCatalogSummary', () => {
+  it('lists users and flags a major the catalog lacks', () => {
+    const catalog = { apiVersion: PG, kind: 'ClusterImageCatalog', metadata: { name: 'pg' }, spec: { images: [{ major: 16, image: 'ghcr.io/cnpg/postgresql:16' }] } }
+    const clusters = [
+      { apiVersion: PG, kind: 'Cluster', metadata: { name: 'a', namespace: 'x' }, spec: { imageCatalogRef: { kind: 'ClusterImageCatalog', name: 'pg', major: 16 } } },
+      { apiVersion: PG, kind: 'Cluster', metadata: { name: 'b', namespace: 'y' }, spec: { imageCatalogRef: { kind: 'ClusterImageCatalog', name: 'pg', major: 17 } } },
+    ]
+    const t = text(renderToString(<CNPGImageCatalogSummary resource={catalog} workspace={ws({ clusters })} onNavigate={nav} />))
+    expect(t).toContain('x/a')
+    expect(t).toContain('Requests PostgreSQL 17 · not in this catalog')
+    expect(t).toContain('clusters in namespaces you cannot read are not listed')
+  })
+
+  it('keeps known users when cluster coverage is partial', () => {
+    const catalog = { apiVersion: PG, kind: 'ClusterImageCatalog', metadata: { name: 'pg' }, spec: { images: [{ major: 16, image: 'img:16' }] } }
+    const clusters = [{ apiVersion: PG, kind: 'Cluster', metadata: { name: 'a', namespace: 'x' }, spec: { imageCatalogRef: { kind: 'ClusterImageCatalog', name: 'pg', major: 16 } } }]
+    const t = text(
+      renderToString(
+        <CNPGImageCatalogSummary resource={catalog} workspace={ws({ clusters }, { coverage: { clusters: { state: 'partial', deniedNamespaces: ['y'] } } })} />,
+      ),
+    )
+    expect(t).toContain('x/a')
+    expect(t).toContain('Only clusters in namespaces you can read are listed.')
+    expect(t).not.toContain('No access to Clusters')
+  })
+
+  it('reserves the unavailable text for denied coverage', () => {
+    const catalog = { apiVersion: PG, kind: 'ClusterImageCatalog', metadata: { name: 'pg' }, spec: {} }
+    const t = text(renderToString(<CNPGImageCatalogSummary resource={catalog} workspace={ws({}, { coverage: { clusters: { state: 'denied' } } })} />))
+    expect(t).toContain('No access to Clusters')
+  })
+})

package/src/components/cnpg/CNPGPoolerSummary.tsx

@@ -0,0 +1,70 @@
+import { getCNPGPoolerDeploymentName, getCNPGPoolerMode, getCNPGPoolerStatus, isCNPGPoolerPaused } from '../resources/resource-utils-cnpg'
+import type { CNPGWorkspaceResponse } from './workspace'
+import { FactGrid, FactRow, FactValue, RefLink, SummaryHeading, type CNPGNavigate } from './primitives'
+import { ClusterLink, NotReported, Note, ObjectProblems, PhaseBadge, SummaryShell } from './CNPGSharedSummary'
+import { refOf } from './relations'
+
+const TYPE_LABEL: Record<string, string> = {
+  rw: 'rw · routes to the primary',
+  ro: 'ro · routes to replicas',
+  r: 'r · routes to any instance',
+}
+
+export function CNPGPoolerSummary({
+  resource,
+  workspace,
+  onNavigate,
+}: {
+  resource: any
+  workspace: CNPGWorkspaceResponse | null
+  onNavigate?: CNPGNavigate
+}) {
+  const ns = resource?.metadata?.namespace ?? ''
+  const type = resource?.spec?.type
+  const desired = resource?.spec?.instances
+  const scheduled = resource?.status?.instances
+  const deployment = getCNPGPoolerDeploymentName(resource)
+
+  return (
+    <SummaryShell>
+      <ObjectProblems issues={workspace?.issues} subject={refOf(resource, 'Pooler')} onNavigate={onNavigate} />
+
+      <SummaryHeading>State</SummaryHeading>
+      <FactGrid>
+        <FactRow label="Status">
+          <PhaseBadge status={getCNPGPoolerStatus(resource)} />
+          {isCNPGPoolerPaused(resource) && <Note>PgBouncer is paused: it holds client connections instead of serving them.</Note>}
+        </FactRow>
+        <FactRow label="Instances">
+          <span>
+            {typeof scheduled === 'number' ? `${scheduled} scheduled` : <NotReported text="Scheduled count not reported" />}
+            <span className="text-theme-text-secondary">
+              {' · '}
+              {typeof desired === 'number' ? `${desired} desired` : 'desired not set'}
+            </span>
+          </span>
+          <Note>The Pooler counts scheduled pods, not ready ones; readiness is on its Deployment.</Note>
+        </FactRow>
+        <FactRow label="Deployment">
+          {deployment ? (
+            <RefLink refTo={{ kind: 'Deployment', group: 'apps', namespace: ns, name: deployment }} onNavigate={onNavigate} mono />
+          ) : (
+            <NotReported />
+          )}
+        </FactRow>
+        <FactRow label="Connection pressure">
+          <FactValue fact={{ text: 'Not measured — needs PgBouncer metrics, which Radar does not read yet', tone: 'unknown' }} />
+        </FactRow>
+      </FactGrid>
+
+      <SummaryHeading>Routing</SummaryHeading>
+      <FactGrid>
+        <FactRow label="Cluster">
+          <ClusterLink resource={resource} workspace={workspace} onNavigate={onNavigate} />
+        </FactRow>
+        <FactRow label="Type">{type ? TYPE_LABEL[type] ?? type : <NotReported text="Not set" />}</FactRow>
+        <FactRow label="Pool mode">{getCNPGPoolerMode(resource)}</FactRow>
+      </FactGrid>
+    </SummaryShell>
+  )
+}

package/src/components/cnpg/CNPGSharedSummary.tsx

@@ -0,0 +1,88 @@
+import type { ReactNode } from 'react'
+import { Badge } from '../ui/Badge'
+import type { StatusBadge as StatusBadgeValue } from '../resources/resource-utils'
+import { CNPG_GROUP } from '../resources/resource-utils-cnpg'
+import type { CNPGWorkspaceIssue, CNPGWorkspaceResponse } from './workspace'
+import { FactValue, ProblemCallout, RefLink, type CNPGNavigate } from './primitives'
+import { clustersIn, healthSeverity, problemsForObject, relationUnavailable, targetCluster, type CNPGObjectRef } from './relations'
+
+const MAX_PROBLEMS = 3
+
+export function SummaryShell({ children }: { children: ReactNode }) {
+  return <div className="px-4 py-4">{children}</div>
+}
+
+/** The object's own Radar issues, most severe first. */
+export function ObjectProblems({
+  issues,
+  subject,
+  onNavigate,
+}: {
+  issues: CNPGWorkspaceIssue[] | undefined
+  subject: CNPGObjectRef
+  onNavigate?: CNPGNavigate
+}) {
+  const problems = problemsForObject(issues, subject)
+  if (problems.length === 0) return null
+  const shown = problems.slice(0, MAX_PROBLEMS)
+  const rest = problems.length - shown.length
+  return (
+    <div className="mb-4 space-y-2">
+      {shown.map((p, i) => (
+        <ProblemCallout
+          key={p.id}
+          problem={p}
+          onNavigate={onNavigate}
+          subjectIsSelf
+          more={i === shown.length - 1 && rest > 0 ? <span>+{rest} more</span> : null}
+        />
+      ))}
+    </div>
+  )
+}
+
+export function PhaseBadge({ status }: { status: StatusBadgeValue }) {
+  return (
+    <Badge severity={healthSeverity(status.level)} size="sm">
+      {status.text}
+    </Badge>
+  )
+}
+
+export function NotReported({ text = 'Not reported' }: { text?: string }) {
+  return <span className="text-theme-text-tertiary">{text}</span>
+}
+
+/** A timestamp as an age, with the absolute time on hover. */
+export function TimeAgo({ at, missing }: { at: unknown; missing?: string }) {
+  if (typeof at !== 'string' || !at || !Number.isFinite(Date.parse(at))) return <NotReported text={missing} />
+  return <FactValue fact={{ text: '', tone: 'neutral', at }} />
+}
+
+export function Note({ children }: { children: ReactNode }) {
+  return <div className="mt-0.5 text-[11.5px] text-theme-text-tertiary">{children}</div>
+}
+
+/** The Cluster an object declares itself against, linked. */
+export function ClusterLink({
+  resource,
+  workspace,
+  onNavigate,
+}: {
+  resource: any
+  workspace: CNPGWorkspaceResponse | null
+  onNavigate?: CNPGNavigate
+}) {
+  const name = resource?.spec?.cluster?.name
+  if (!name) return <NotReported text="Not set" />
+  const ns = resource?.metadata?.namespace ?? ''
+  const visible = !!targetCluster(resource, clustersIn(workspace))
+  return (
+    <span>
+      <RefLink refTo={{ kind: 'Cluster', group: CNPG_GROUP, namespace: ns, name }} onNavigate={onNavigate} mono />
+      {workspace && !visible && !relationUnavailable(workspace, 'clusters', ns, 'Clusters') && (
+        <span className="text-theme-text-tertiary"> · not found in this namespace</span>
+      )}
+    </span>
+  )
+}

package/src/components/cnpg/index.ts

@@ -0,0 +1,14 @@
+export * from './workspace'
+export * from './primitives'
+export * from './CNPGClusterSummary'
+export * from './CNPGBackupSummary'
+export * from './CNPGObjectStoreSummary'
+export * from './CNPGDeclarativeSummary'
+export * from './CNPGPoolerSummary'
+export * from './CNPGImageCatalogSummary'
+export {
+  inferredObjectStoreHealth,
+  usersOfObjectStore,
+  type CNPGObjectStoreHealth,
+  type CNPGObjectStoreUser,
+} from './relations'

package/src/components/cnpg/primitives.tsx

@@ -0,0 +1,134 @@
+import type { ReactNode } from 'react'
+import { clsx } from 'clsx'
+import type { HealthLevel } from '../resources/resource-utils'
+import { StatusDot } from '../ui/status-tone'
+import { Tooltip } from '../ui/Tooltip'
+import { AlertBanner } from '../ui/drawer-components'
+import { TONE_TEXT_CLASS } from '../ui/severity-tone'
+import type { CNPGFact, CNPGProblem } from './workspace'
+import { formatRelativeAgeTime } from '../../utils/format'
+
+export interface CNPGRef {
+  kind: string
+  group?: string
+  namespace: string
+  name: string
+}
+
+export type CNPGNavigate = (ref: CNPGRef) => void
+
+const TONE_TEXT: Record<HealthLevel, string> = {
+  healthy: 'text-theme-text-primary',
+  degraded: TONE_TEXT_CLASS.amber,
+  alert: TONE_TEXT_CLASS.orange,
+  unhealthy: TONE_TEXT_CLASS.red,
+  unknown: 'text-theme-text-tertiary',
+  neutral: 'text-theme-text-secondary',
+}
+
+export const CNPG_PRIMARY_BUTTON = 'btn-brand inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium'
+export const CNPG_SECONDARY_BUTTON =
+  'inline-flex items-center gap-1.5 rounded-lg border border-theme-border bg-theme-surface px-3 py-1.5 text-sm text-theme-text-primary transition-colors hover:bg-theme-hover'
+
+export function toneTextClass(tone: HealthLevel): string {
+  return TONE_TEXT[tone]
+}
+
+export function FactValue({ fact, className }: { fact: CNPGFact; className?: string }) {
+  const when = fact.at ? formatRelativeAgeTime(fact.at) : null
+  const body = (
+    <span className={clsx(toneTextClass(fact.tone), className)}>
+      {fact.text}
+      {when && <span className="text-theme-text-secondary">{fact.text ? ' · ' : ''}{when}</span>}
+    </span>
+  )
+  if (!fact.source && !fact.at) return body
+  return (
+    <Tooltip content={[fact.at ? new Date(fact.at).toUTCString() : null, fact.source].filter(Boolean).join(' · ')} position="top">
+      {body}
+    </Tooltip>
+  )
+}
+
+export function FactSource({ fact }: { fact: CNPGFact }) {
+  if (!fact.source) return null
+  return <div className="mt-0.5 text-[11.5px] text-theme-text-tertiary">{fact.source}</div>
+}
+
+export function FactGrid({ children }: { children: ReactNode }) {
+  return <dl className="grid grid-cols-[9.5rem_minmax(0,1fr)] gap-x-4 gap-y-2 text-sm">{children}</dl>
+}
+
+export function FactRow({ label, children }: { label: ReactNode; children: ReactNode }) {
+  return (
+    <>
+      <dt className="text-theme-text-tertiary">{label}</dt>
+      <dd className="min-w-0 break-words text-theme-text-primary">{children}</dd>
+    </>
+  )
+}
+
+export function SummaryHeading({ children, hint }: { children: ReactNode; hint?: ReactNode }) {
+  return (
+    <div className="mb-2 mt-5 flex items-baseline gap-2 first:mt-0">
+      <h3 className="text-[11px] font-semibold uppercase tracking-wide text-theme-text-tertiary">{children}</h3>
+      {hint && <span className="text-[11px] text-theme-text-tertiary">{hint}</span>}
+    </div>
+  )
+}
+
+export function RefLink({ refTo, onNavigate, children, mono }: { refTo: CNPGRef; onNavigate?: CNPGNavigate; children?: ReactNode; mono?: boolean }) {
+  const label = children ?? refTo.name
+  if (!onNavigate) return <span className={clsx(mono && 'font-mono')}>{label}</span>
+  return (
+    <button
+      type="button"
+      onClick={() => onNavigate(refTo)}
+      className={clsx('text-accent-text hover:underline text-left break-all', mono && 'font-mono')}
+    >
+      {label}
+    </button>
+  )
+}
+
+const PROBLEM_VARIANT: Record<CNPGProblem['severity'], 'error' | 'warning' | 'info'> = {
+  critical: 'error',
+  warning: 'warning',
+  posture: 'info',
+}
+
+export function ProblemCallout({
+  problem,
+  more,
+  onNavigate,
+  action,
+  subjectIsSelf,
+}: {
+  problem: CNPGProblem
+  more?: ReactNode
+  onNavigate?: CNPGNavigate
+  action?: ReactNode
+  /** The callout sits on the subject's own page, so linking to it would loop. */
+  subjectIsSelf?: boolean
+}) {
+  const aboutChild = !subjectIsSelf && problem.subject.kind !== 'Cluster'
+  return (
+    <AlertBanner variant={PROBLEM_VARIANT[problem.severity]} title={problem.title} message={problem.detail}>
+      <div className="mt-1.5 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-theme-text-tertiary">
+        {aboutChild && (
+          <span>
+            {problem.subject.kind}{' '}
+            <RefLink refTo={problem.subject} onNavigate={onNavigate} mono />
+          </span>
+        )}
+        <span>{problem.source === 'audit' ? 'Radar check' : 'Radar issue'}</span>
+        {action}
+        {more}
+      </div>
+    </AlertBanner>
+  )
+}
+
+export function ToneDot({ tone }: { tone: HealthLevel }) {
+  return <StatusDot tone={tone} size="sm" />
+}