@skyhook-io/radar-app 1.16.2 → 1.17.0

package/src/components/cnpg/routes.test.ts

@@ -0,0 +1,60 @@
+import { describe, expect, it } from 'vitest'
+import { cnpgDetailKindFor, cnpgDetailPath, decodeDrawerTrail, encodeDrawerTrail, parseCNPGRoute, sameResource } from './routes'
+
+describe('CNPG routes', () => {
+  it('parses workspace screens and falls back to Overview for unknown or unavailable ones', () => {
+    expect(parseCNPGRoute('/cnpg').screen).toBe('overview')
+    expect(parseCNPGRoute('/cnpg/').screen).toBe('overview')
+    expect(parseCNPGRoute('/cnpg/nope').screen).toBe('overview')
+    expect(parseCNPGRoute('/cnpg/protection').screen).toBe('protection')
+    expect(parseCNPGRoute('/cnpg/operator').screen).toBe('operator')
+  })
+
+  it('round-trips a drawer trail and keeps the API group', () => {
+    const trail = [
+      { kind: 'backups', group: 'postgresql.cnpg.io', namespace: 'payments', name: 'pg-billing-20260928020000' },
+      { kind: 'objectstores', group: 'barmancloud.cnpg.io', namespace: 'payments', name: 's3-billing' },
+      { kind: 'clusterimagecatalogs', group: 'postgresql.cnpg.io', namespace: '', name: 'postgresql-standard' },
+    ]
+    const encoded = encodeDrawerTrail(trail)
+    expect(decodeDrawerTrail(encoded)).toEqual(trail)
+  })
+
+  it('drops malformed entries instead of opening a guessed object', () => {
+    expect(decodeDrawerTrail('clusters:postgresql.cnpg.io:payments:pg-orders~garbage')).toEqual([
+      { kind: 'clusters', group: 'postgresql.cnpg.io', namespace: 'payments', name: 'pg-orders' },
+    ])
+    expect(decodeDrawerTrail(null)).toEqual([])
+  })
+
+  it('distinguishes same-named kinds from different groups', () => {
+    const cnpg = { kind: 'clusters', group: 'postgresql.cnpg.io', namespace: 'a', name: 'x' }
+    const capi = { kind: 'clusters', group: 'cluster.x-k8s.io', namespace: 'a', name: 'x' }
+    expect(sameResource(cnpg, capi)).toBe(false)
+    expect(sameResource(cnpg, { ...cnpg })).toBe(true)
+  })
+
+  it('parses full-detail routes for every CNPG kind and the cluster-scoped placeholder', () => {
+    expect(parseCNPGRoute('/cnpg/clusters/payments/pg-orders')).toEqual({
+      screen: 'overview',
+      detail: { plural: 'clusters', group: 'postgresql.cnpg.io', namespace: 'payments', name: 'pg-orders' },
+    })
+    expect(parseCNPGRoute('/cnpg/objectstores/payments/s3-billing').screen).toBe('protection')
+    expect(parseCNPGRoute('/cnpg/objectstores/payments/s3-billing').detail?.group).toBe('barmancloud.cnpg.io')
+    expect(parseCNPGRoute('/cnpg/clusterimagecatalogs/_/postgresql-standard').detail?.namespace).toBe('')
+    expect(parseCNPGRoute('/cnpg/clusters/payments').detail).toBeUndefined()
+  })
+
+  it('builds detail paths carrying the context', () => {
+    expect(cnpgDetailPath({ plural: 'clusters', namespace: 'payments', name: 'pg-orders' }, 'prod', 'logs')).toBe(
+      '/cnpg/clusters/payments/pg-orders?ctx=prod&tab=logs',
+    )
+    expect(cnpgDetailPath({ plural: 'clusterimagecatalogs', namespace: '', name: 'std' })).toBe('/cnpg/clusterimagecatalogs/_/std')
+  })
+
+  it('only claims CNPG kinds from the CNPG groups', () => {
+    expect(cnpgDetailKindFor('clusters', 'postgresql.cnpg.io')).toBe('clusters')
+    expect(cnpgDetailKindFor('clusters', 'cluster.x-k8s.io')).toBeNull()
+    expect(cnpgDetailKindFor('backups', 'velero.io')).toBeNull()
+  })
+})

package/src/components/cnpg/routes.ts

@@ -0,0 +1,112 @@
+import type { SelectedResource } from '../../types'
+
+export type CNPGScreen = 'overview' | 'protection' | 'declarations' | 'pooling' | 'operator'
+
+export const CNPG_SCREENS: { id: CNPGScreen; label: string; path: string }[] = [
+  { id: 'overview', label: 'Overview', path: '/cnpg' },
+  { id: 'protection', label: 'Protection', path: '/cnpg/protection' },
+  { id: 'declarations', label: 'Declarations', path: '/cnpg/declarations' },
+  { id: 'pooling', label: 'Pooling', path: '/cnpg/pooling' },
+  { id: 'operator', label: 'Operator', path: '/cnpg/operator' },
+]
+
+export interface CNPGDetailTarget {
+  plural: string
+  group: string
+  namespace: string
+  name: string
+}
+
+export interface CNPGRoute {
+  screen: CNPGScreen
+  detail?: CNPGDetailTarget
+}
+
+// The CNPG kinds that have a CNPG-framed full detail, with the workspace
+// destination each one lives under.
+export const CNPG_DETAIL_KINDS: Record<string, { group: string; kind: string; home: CNPGScreen; clusterScoped?: boolean }> = {
+  clusters: { group: 'postgresql.cnpg.io', kind: 'Cluster', home: 'overview' },
+  backups: { group: 'postgresql.cnpg.io', kind: 'Backup', home: 'protection' },
+  scheduledbackups: { group: 'postgresql.cnpg.io', kind: 'ScheduledBackup', home: 'protection' },
+  objectstores: { group: 'barmancloud.cnpg.io', kind: 'ObjectStore', home: 'protection' },
+  databases: { group: 'postgresql.cnpg.io', kind: 'Database', home: 'declarations' },
+  publications: { group: 'postgresql.cnpg.io', kind: 'Publication', home: 'declarations' },
+  subscriptions: { group: 'postgresql.cnpg.io', kind: 'Subscription', home: 'declarations' },
+  poolers: { group: 'postgresql.cnpg.io', kind: 'Pooler', home: 'pooling' },
+  imagecatalogs: { group: 'postgresql.cnpg.io', kind: 'ImageCatalog', home: 'operator' },
+  clusterimagecatalogs: { group: 'postgresql.cnpg.io', kind: 'ClusterImageCatalog', home: 'operator', clusterScoped: true },
+}
+
+export function cnpgDetailKindFor(plural: string, group: string | undefined): string | null {
+  const p = plural.toLowerCase()
+  const spec = CNPG_DETAIL_KINDS[p]
+  return spec && spec.group === (group ?? '') ? p : null
+}
+
+export function parseCNPGRoute(pathname: string): CNPGRoute {
+  const seg = pathname.replace(/^\/+/, '').split('/').map((s) => {
+    try {
+      return decodeURIComponent(s)
+    } catch {
+      return s
+    }
+  })
+  if (seg[0] !== 'cnpg') return { screen: 'overview' }
+  const s = seg[1] ?? ''
+  const detailSpec = CNPG_DETAIL_KINDS[s]
+  if (detailSpec && seg[2] && seg[3]) {
+    return {
+      screen: detailSpec.home,
+      detail: { plural: s, group: detailSpec.group, namespace: seg[2] === '_' ? '' : seg[2], name: seg[3] },
+    }
+  }
+  const match = CNPG_SCREENS.find((x) => x.id === s)
+  if (match) return { screen: match.id }
+  return { screen: 'overview' }
+}
+
+/** Full detail path; `ctx` pins the Kubernetes context the object belongs to. */
+export function cnpgDetailPath(target: Omit<CNPGDetailTarget, 'group'>, ctx?: string, tab?: string): string {
+  const params = new URLSearchParams()
+  if (ctx) params.set('ctx', ctx)
+  if (tab) params.set('tab', tab)
+  const qs = params.toString()
+  return `/cnpg/${target.plural}/${encodeURIComponent(target.namespace || '_')}/${encodeURIComponent(target.name)}${qs ? `?${qs}` : ''}`
+}
+
+export function cnpgScreenPath(screen: CNPGScreen): string {
+  return CNPG_SCREENS.find((s) => s.id === screen)?.path ?? '/cnpg'
+}
+
+// Drawer identity in the URL: kind:group:namespace:name, chained with "~" for
+// the in-drawer trail (last entry is the one shown). Kubernetes names and API
+// groups cannot contain ":" or "~", and the group is mandatory — CNPG's Cluster
+// and Backup collide with CAPI, KubeBlocks and Velero kinds.
+export function encodeDrawerRef(r: SelectedResource): string {
+  return [r.kind, r.group ?? '', r.namespace ?? '', r.name].join(':')
+}
+
+export function decodeDrawerRef(s: string): SelectedResource | null {
+  const parts = s.split(':')
+  if (parts.length !== 4 || !parts[0] || !parts[3]) return null
+  return { kind: parts[0], group: parts[1], namespace: parts[2], name: parts[3] }
+}
+
+export function decodeDrawerTrail(param: string | null): SelectedResource[] {
+  if (!param) return []
+  return param.split('~').map(decodeDrawerRef).filter((r): r is SelectedResource => r !== null)
+}
+
+export function encodeDrawerTrail(trail: SelectedResource[]): string {
+  return trail.map(encodeDrawerRef).join('~')
+}
+
+export function sameResource(a: SelectedResource | null | undefined, b: SelectedResource | null | undefined): boolean {
+  if (!a || !b) return false
+  return (
+    a.kind.toLowerCase() === b.kind.toLowerCase() &&
+    (a.group ?? '') === (b.group ?? '') &&
+    (a.namespace ?? '') === (b.namespace ?? '') &&
+    a.name === b.name
+  )
+}

package/src/components/cnpg/shared.tsx

@@ -0,0 +1,290 @@
+import type { ReactNode } from 'react'
+import type { UseQueryResult } from '@tanstack/react-query'
+import { clsx } from 'clsx'
+import { Database, X } from 'lucide-react'
+import {
+  CNPG_KIND_BY_KEY,
+  PaneLoader,
+  type CNPGFleet,
+  type CNPGKindCoverage,
+  type CNPGWorkspaceResponse,
+} from '@skyhook-io/k8s-ui'
+import type { SelectedResource } from '../../types'
+import { useConnection } from '../../context/ConnectionContext'
+import { EmptyState, Notice, ROW_HOVER, TABLE_HEAD, TABLE_WRAP, TBODY, TD, TH } from '../capacity/shared'
+import { sameResource } from './routes'
+
+export interface CNPGScreenProps {
+  data: CNPGWorkspaceResponse
+  fleet: CNPGFleet
+  namespaces: string[]
+  searchParams: URLSearchParams
+  onSetParams: (update: Record<string, string | null>) => void
+  onInspect: (resource: SelectedResource) => void
+  inspected: SelectedResource | null
+  onClearNamespaces: () => void
+}
+
+const COVERAGE_LABEL: Record<string, string> = {
+  denied: 'no access',
+  partial: 'no access in some namespaces',
+  syncing: 'still loading',
+  error: 'could not be read',
+}
+
+export function CNPGWorkspaceHeader({ title, subtitle, actions }: { title: string; subtitle?: ReactNode; actions?: ReactNode }) {
+  return (
+    <div className="px-5 pt-4 xl:px-7">
+      <div className="flex items-center gap-2 text-xs text-theme-text-tertiary">
+        <Database className="h-3.5 w-3.5" />
+        <span>CloudNativePG</span>
+      </div>
+      <div className="mt-1 flex flex-wrap items-end justify-between gap-x-4 gap-y-2">
+        <div className="min-w-0">
+          <h1 className="text-lg font-semibold text-theme-text-primary">{title}</h1>
+          {subtitle && <div className="mt-0.5 text-sm text-theme-text-secondary">{subtitle}</div>}
+        </div>
+        {actions}
+      </div>
+    </div>
+  )
+}
+
+export function CoverageNotice({ fleet, data }: { fleet: CNPGFleet; data: CNPGWorkspaceResponse }) {
+  if (fleet.incompleteKinds.length === 0) return null
+  const parts = fleet.incompleteKinds.map((k) => {
+    const cov = data.coverage[k]
+    const label = COVERAGE_LABEL[cov?.state ?? ''] ?? cov?.state
+    return `${CNPG_KIND_BY_KEY[k].kind} (${label})`
+  })
+  return (
+    <Notice>
+      Some CloudNativePG data is not readable: {parts.join(', ')}. Facts built on it read “No access” or “unknown” rather than none, and counts are lower bounds.
+    </Notice>
+  )
+}
+
+/**
+ * Loading, error and not-installed states every workspace screen shares.
+ * Renders the screen only once there is workspace data to render.
+ */
+export function CNPGScreenGate({
+  query,
+  fleet,
+  children,
+}: {
+  query: UseQueryResult<CNPGWorkspaceResponse>
+  fleet: CNPGFleet | null
+  children: (data: CNPGWorkspaceResponse, fleet: CNPGFleet) => ReactNode
+}) {
+  const { connection } = useConnection()
+  const data = query.data
+  if (!data && query.isLoading) return <PaneLoader label="Loading CloudNativePG…" className="flex-1" />
+  if (!data) {
+    return (
+      <EmptyState
+        icon={Database}
+        title="CloudNativePG workspace unavailable"
+        detail={query.error instanceof Error ? query.error.message : 'The workspace could not be loaded.'}
+      />
+    )
+  }
+  if (!data.installed || !fleet) {
+    return (
+      <EmptyState
+        icon={Database}
+        title="CloudNativePG is not installed"
+        detail={`No postgresql.cnpg.io resources are served in ${connection.context || 'this cluster'}.`}
+      />
+    )
+  }
+  return <>{children(data, fleet)}</>
+}
+
+export function ScreenBody({ children }: { children: ReactNode }) {
+  return (
+    <div className="min-h-0 flex-1 overflow-y-auto [scrollbar-gutter:stable]">
+      <div className="space-y-5 px-5 pb-6 pt-3 xl:px-7">{children}</div>
+    </div>
+  )
+}
+
+export function FilterChips({ chips }: { chips: { label: string; onClear: () => void }[] }) {
+  if (chips.length === 0) return null
+  return (
+    <div className="flex flex-wrap gap-1.5">
+      {chips.map((c) => (
+        <span key={c.label} className="inline-flex items-center gap-1 rounded-full bg-theme-elevated px-2.5 py-0.5 text-xs text-theme-text-secondary">
+          {c.label}
+          <button type="button" onClick={c.onClear} aria-label={`Remove ${c.label}`} className="rounded-full p-0.5 hover:bg-theme-hover">
+            <X className="h-3 w-3" />
+          </button>
+        </span>
+      ))}
+    </div>
+  )
+}
+
+export function namespaceChip(namespaces: string[], onClear: () => void) {
+  return namespaces.length > 0 ? [{ label: `Namespace: ${namespaces.join(', ')}`, onClear }] : []
+}
+
+export function Segments<T extends string>({
+  value,
+  options,
+  onChange,
+  label,
+}: {
+  value: T
+  options: { id: T; label: string; count?: number }[]
+  onChange: (id: T) => void
+  label: string
+}) {
+  return (
+    <div role="tablist" aria-label={label} className="inline-flex rounded-lg bg-theme-elevated p-0.5">
+      {options.map((o) => {
+        const on = o.id === value
+        return (
+          <button
+            key={o.id}
+            type="button"
+            role="tab"
+            aria-selected={on}
+            onClick={() => onChange(o.id)}
+            className={clsx(
+              'inline-flex items-center gap-1.5 rounded-md px-3 py-1 text-sm font-medium transition-colors',
+              on ? 'bg-theme-surface text-theme-text-primary shadow-theme-sm' : 'text-theme-text-secondary hover:text-theme-text-primary',
+            )}
+          >
+            {o.label}
+            {o.count !== undefined && <span className="font-mono text-xs text-theme-text-tertiary">{o.count}</span>}
+          </button>
+        )
+      })}
+    </div>
+  )
+}
+
+export interface TableColumn<T> {
+  header: ReactNode
+  width?: string
+  cell: (row: T) => ReactNode
+  className?: string
+}
+
+/** A workspace table. Rows inspect in the drawer; the inspected row is highlighted. */
+export function SectionTable<T>({
+  title,
+  subtitle,
+  columns,
+  rows,
+  rowKey,
+  rowResource,
+  onInspect,
+  inspected,
+  empty,
+  minWidth = 760,
+  footer,
+}: {
+  title: ReactNode
+  subtitle?: ReactNode
+  columns: TableColumn<T>[]
+  rows: T[]
+  rowKey: (row: T) => string
+  rowResource?: (row: T) => SelectedResource | null
+  onInspect?: (resource: SelectedResource) => void
+  inspected?: SelectedResource | null
+  empty: ReactNode
+  minWidth?: number
+  footer?: ReactNode
+}) {
+  return (
+    <section>
+      <div className="mb-2 flex flex-wrap items-baseline gap-x-2.5 gap-y-1">
+        <h2 className="text-sm font-semibold text-theme-text-primary">{title}</h2>
+        {subtitle && <span className="text-xs text-theme-text-tertiary">{subtitle}</span>}
+      </div>
+      <div className="overflow-hidden rounded-xl border border-theme-border bg-theme-surface shadow-theme-sm">
+        {rows.length === 0 ? (
+          <div className="px-4 py-5 text-sm text-theme-text-tertiary">{empty}</div>
+        ) : (
+          <div className={TABLE_WRAP}>
+            <table className="w-full table-fixed" style={{ minWidth }}>
+              <colgroup>
+                {columns.map((c, i) => (
+                  <col key={i} style={c.width ? { width: c.width } : undefined} />
+                ))}
+              </colgroup>
+              <thead className={TABLE_HEAD}>
+                <tr>
+                  {columns.map((c, i) => (
+                    <th key={i} className={TH}>{c.header}</th>
+                  ))}
+                </tr>
+              </thead>
+              <tbody className={TBODY}>
+                {rows.map((row) => {
+                  const res = rowResource?.(row) ?? null
+                  const active = !!res && sameResource(inspected, res)
+                  return (
+                    <tr
+                      key={rowKey(row)}
+                      onClick={res && onInspect ? () => onInspect(res) : undefined}
+                      className={clsx(res && onInspect && 'cursor-pointer', ROW_HOVER, active && 'selection')}
+                      aria-selected={res ? active : undefined}
+                    >
+                      {columns.map((c, i) => (
+                        <td key={i} className={clsx(TD, c.className)}>{c.cell(row)}</td>
+                      ))}
+                    </tr>
+                  )
+                })}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </div>
+      {footer && <div className="mt-1.5 text-xs text-theme-text-tertiary">{footer}</div>}
+    </section>
+  )
+}
+
+/** Empty-state text for a collection, derived from how much of it was readable. */
+export function coverageEmpty(cov: CNPGKindCoverage | undefined, noun: string): string {
+  switch (cov?.state) {
+    case 'full':
+      return `No ${noun} in this scope.`
+    case 'partial':
+      return `No ${noun} visible. Some namespaces are not readable with your access.`
+    case 'denied':
+      return `No access to ${noun}.`
+    case 'syncing':
+      return `${noun[0].toUpperCase()}${noun.slice(1)} are still loading.`
+    case 'error':
+      return `${noun[0].toUpperCase()}${noun.slice(1)} could not be read.`
+    default:
+      return `This kind is not installed.`
+  }
+}
+
+/** The less complete of two coverages, for collections built from several kinds. */
+export function worstCoverage(...covs: (CNPGKindCoverage | undefined)[]): CNPGKindCoverage | undefined {
+  const rank: Record<string, number> = { error: 0, denied: 1, syncing: 2, partial: 3, full: 4, notInstalled: 5 }
+  return covs.filter(Boolean).sort((a, b) => (rank[a!.state] ?? 9) - (rank[b!.state] ?? 9))[0]
+}
+
+export function Mono({ children }: { children: ReactNode }) {
+  return <span className="font-mono text-[12.5px] break-all">{children}</span>
+}
+
+export function Sub({ children }: { children: ReactNode }) {
+  return <div className="mt-0.5 text-xs text-theme-text-tertiary break-words">{children}</div>
+}
+
+export function clusterResource(namespace: string, name: string): SelectedResource {
+  return { kind: 'clusters', group: 'postgresql.cnpg.io', namespace, name }
+}
+
+export function cnpgResource(plural: string, namespace: string, name: string, group = 'postgresql.cnpg.io'): SelectedResource {
+  return { kind: plural, group, namespace, name }
+}

package/src/components/cnpg/useCNPGSidebarWorkspace.ts

@@ -0,0 +1,88 @@
+import { useMemo } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { Database, FileCheck2, Settings2, ShieldCheck, Waypoints } from 'lucide-react'
+import { buildCNPGFleet, type CNPGFleet, type SidebarCategoryWorkspace } from '@skyhook-io/k8s-ui'
+import type { APIResource } from '../../types'
+import { useCNPGWorkspace } from '../../api/cnpg'
+import { CNPG_SCREENS, type CNPGScreen } from './routes'
+
+export const CNPG_SIDEBAR_CATEGORY = 'CloudNativePG'
+
+const ICONS: Record<CNPGScreen, SidebarCategoryWorkspace['destinations'][number]['icon']> = {
+  overview: Database,
+  protection: ShieldCheck,
+  declarations: FileCheck2,
+  pooling: Waypoints,
+  operator: Settings2,
+}
+
+export function cnpgDiscovered(apiResources: APIResource[] | undefined): boolean {
+  return !!apiResources?.some((r) => r.group === 'postgresql.cnpg.io')
+}
+
+export function useCNPGFleet(namespaces: string[], enabled = true) {
+  const query = useCNPGWorkspace(namespaces, { enabled })
+  const fleet = useMemo<CNPGFleet | null>(() => (query.data?.installed ? buildCNPGFleet(query.data) : null), [query.data])
+  return { query, fleet }
+}
+
+function destinationCount(screen: CNPGScreen, fleet: CNPGFleet | null): { count?: number | null; title?: string } {
+  if (!fleet) return {}
+  const lowerBound = fleet.incompleteKinds.length > 0 ? ' Some CloudNativePG data is not readable, so this is a lower bound.' : ''
+  switch (screen) {
+    case 'overview':
+      return { count: fleet.attentionCount, title: `${fleet.attentionCount} clusters need attention.${lowerBound}` }
+    case 'protection':
+      return { count: fleet.categoryCounts.protection, title: `${fleet.categoryCounts.protection} clusters with failing backups or WAL archiving.${lowerBound}` }
+    case 'declarations':
+      return { count: fleet.categoryCounts.declarations, title: `${fleet.categoryCounts.declarations} clusters with declarations that are not reconciled.${lowerBound}` }
+    case 'pooling':
+      return { count: fleet.categoryCounts.pooling, title: `${fleet.categoryCounts.pooling} clusters with Pooler problems.${lowerBound}` }
+    default:
+      return {}
+  }
+}
+
+/**
+ * The CloudNativePG workspace entries for the Resources sidebar. Returns
+ * undefined when CNPG is not discovered, so clusters without the operator see
+ * an unchanged sidebar.
+ */
+export function useCNPGSidebarWorkspace({
+  apiResources,
+  namespaces,
+  active,
+}: {
+  apiResources: APIResource[] | undefined
+  namespaces: string[]
+  active?: { screen: CNPGScreen; child?: { label: string; title?: string } }
+}): Record<string, SidebarCategoryWorkspace> | undefined {
+  const navigate = useNavigate()
+  const discovered = cnpgDiscovered(apiResources)
+  const { fleet } = useCNPGFleet(namespaces, discovered)
+  const nsKey = namespaces.join(',')
+
+  return useMemo(() => {
+    if (!discovered) return undefined
+    const destinations = CNPG_SCREENS.map((s) => {
+      const { count, title } = destinationCount(s.id, fleet)
+      return {
+        id: s.id,
+        label: s.label,
+        icon: ICONS[s.id],
+        count,
+        countTitle: title,
+        active: active?.screen === s.id,
+        child: active?.screen === s.id ? active.child : undefined,
+        onSelect: () => navigate(s.path),
+      }
+    })
+    return {
+      [CNPG_SIDEBAR_CATEGORY]: {
+        destinations,
+        defaultKindsCollapsed: !!active,
+        scopeNote: nsKey ? `Counts for namespace ${nsKey.split(',').join(', ')}` : undefined,
+      },
+    }
+  }, [discovered, fleet, active?.screen, active?.child?.label, active?.child?.title, navigate, nsKey]) // eslint-disable-line react-hooks/exhaustive-deps
+}

package/src/components/diagnose/AgentSetupNotice.test.tsx

@@ -0,0 +1,58 @@
+import { describe, expect, it } from "vitest";
+import { renderToStaticMarkup } from "react-dom/server";
+import { AgentSetupNotice } from "./AgentSetupNotice";
+import type { DiagnoseSetup } from "./DiagnoseContext";
+
+const render = (
+  setupState: DiagnoseSetup,
+  { checkingAgents = false, cliOverride = false } = {},
+) =>
+  renderToStaticMarkup(
+    <AgentSetupNotice
+      setupState={setupState}
+      cliOverride={cliOverride}
+      checkingAgents={checkingAgents}
+      agentsCheckFailed={false}
+      recheckAgents={async () => {}}
+    />,
+  );
+
+describe("AgentSetupNotice", () => {
+  it("offers installs and a re-check, never a restart, when no CLI is found", () => {
+    const html = render("needs-install");
+    expect(html).toContain("Claude Code");
+    expect(html).toContain("OpenCode");
+    expect(html).toContain("Check again");
+    expect(html).not.toMatch(/restart/i);
+    // A desktop user can't set an environment variable for a Dock launch.
+    expect(html).not.toContain("RADAR_AI_CLI_BIN");
+  });
+
+  it("shows the check in progress", () => {
+    const html = render("needs-install", { checkingAgents: true });
+    expect(html).toContain("Checking…");
+    expect(html).toContain("disabled");
+  });
+
+  it("names the override only when the server says it is set", () => {
+    for (const state of ["needs-restart", "needs-install"] as const) {
+      const html = render(state, { cliOverride: true });
+      expect(html).toContain("RADAR_AI_CLI_BIN");
+      expect(html).toContain("restart Radar");
+      // Detection is off while the variable is set, so an install can't help.
+      expect(html).not.toContain("Install one of these");
+      // A working file put back at the pinned path is picked up without one.
+      expect(html).toContain("Check again");
+    }
+  });
+
+  it("says nothing it can't know when an agent is reported but off", () => {
+    // Radar Hub reports a hosted agent that is supported but not enabled when
+    // its own runner is down: no CLI, no startup output, no override.
+    const html = render("needs-restart");
+    expect(html).toContain("aren&#x27;t available right now");
+    expect(html).not.toMatch(/RADAR_AI_CLI_BIN|agent CLI|startup output/);
+    expect(html).not.toContain("Install one of these");
+    expect(html).toContain("Check again");
+  });
+});