@skyhook-io/radar-app 1.9.7 → 1.11.0

package/src/components/home/NetworkPolicyCoverageCard.tsx

@@ -1,6 +1,7 @@
 import type { DashboardNetworkPolicyCoverage } from '../../api/client'
 import { ShieldCheck, ArrowRight } from 'lucide-react'
 import { clsx } from 'clsx'
+import { Tooltip } from '../ui/Tooltip'
 
 interface NetworkPolicyCoverageCardProps {
   data: DashboardNetworkPolicyCoverage
@@ -8,9 +9,23 @@ interface NetworkPolicyCoverageCardProps {
 }
 
 export function NetworkPolicyCoverageCard({ data, onNavigate }: NetworkPolicyCoverageCardProps) {
+  const hasStagedPolicies = (data.stagedPolicies ?? 0) > 0
+  // A staged policy can stage a deletion, so the projected coverage is allowed
+  // to be lower than today's. Clamping it would hide exactly the case an
+  // operator most needs to see before promoting the staged set.
+  const coveredIfStaged = data.coveredWorkloadsIfStaged ?? data.coveredWorkloads
+  const stagedDelta = coveredIfStaged - data.coveredWorkloads
   const percentage = data.totalWorkloads > 0
     ? Math.round((data.coveredWorkloads / data.totalWorkloads) * 100)
     : 0
+  const percentageIfStaged = data.totalWorkloads > 0
+    ? Math.round((coveredIfStaged / data.totalWorkloads) * 100)
+    : 0
+  const enforcedPercentage = hasStagedPolicies ? Math.min(percentage, percentageIfStaged) : percentage
+  // Gated on the same condition as the segment that draws it, so the three
+  // widths always sum to the full track even for a host that supplies a
+  // projection without any staged policies.
+  const stagedDeltaPercentage = hasStagedPolicies ? Math.abs(percentageIfStaged - percentage) : 0
   const hasPolicies = data.totalPolicies > 0
   const accentColor = !hasPolicies
     ? 'text-theme-text-tertiary'
@@ -48,28 +63,56 @@ export function NetworkPolicyCoverageCard({ data, onNavigate }: NetworkPolicyCov
             <>
               <div className="flex items-center gap-3 w-full">
                 <div className="flex-1 h-3 rounded-full overflow-hidden bg-theme-hover flex">
-                  {data.coveredWorkloads > 0 && (
+                  {enforcedPercentage > 0 && (
                     <div
                       className="h-full bg-green-500"
-                      style={{ width: `${percentage}%` }}
+                      style={{ width: `${enforcedPercentage}%` }}
                     />
                   )}
-                  {data.totalWorkloads - data.coveredWorkloads > 0 && (
+                  {hasStagedPolicies && stagedDeltaPercentage > 0 && (
+                    // The width belongs on the flex child; the tooltip wrapper
+                    // inside it carries the hover target.
+                    <div className="h-full" style={{ width: `${stagedDeltaPercentage}%` }}>
+                      <Tooltip
+                        content={stagedDelta > 0
+                          ? `${stagedDelta} more workloads covered if staged policies are applied`
+                          : `${-stagedDelta} workloads lose coverage if staged policies are applied`}
+                        wrapperClassName="!block h-full w-full"
+                      >
+                        <div
+                          className={clsx('h-full w-full', stagedDelta > 0 ? 'text-yellow-500' : 'text-red-500')}
+                          style={{
+                            backgroundImage: 'repeating-linear-gradient(135deg, currentColor 0, currentColor 2px, transparent 2px, transparent 5px)',
+                          }}
+                        />
+                      </Tooltip>
+                    </div>
+                  )}
+                  {100 - enforcedPercentage - stagedDeltaPercentage > 0 && (
                     <div
                       className="h-full bg-theme-hover"
-                      style={{ width: `${100 - percentage}%` }}
+                      style={{ width: `${100 - enforcedPercentage - stagedDeltaPercentage}%` }}
                     />
                   )}
                 </div>
-                <span className={clsx('text-sm font-semibold tabular-nums', accentColor)}>
-                  {percentage}%
-                </span>
+                <div className="flex shrink-0 flex-col items-end tabular-nums">
+                  <span className={clsx('text-sm font-semibold', accentColor)}>{percentage}%</span>
+                  {hasStagedPolicies && (
+                    <span className="text-[10px] text-theme-text-tertiary">({percentageIfStaged}% if staged applied)</span>
+                  )}
+                </div>
               </div>
 
               <div className="grid grid-cols-1 gap-y-2 mt-4 w-full">
                 <StatRow label="Policies" value={data.totalPolicies} />
                 <StatRow label="Covered workloads" value={data.coveredWorkloads} total={data.totalWorkloads} />
+                {hasStagedPolicies && (
+                  <StatRow label="Covered if staged" value={coveredIfStaged} total={data.totalWorkloads} />
+                )}
                 <StatRow label="Uncovered workloads" value={data.totalWorkloads - data.coveredWorkloads} warn />
+                {hasStagedPolicies && (
+                  <StatRow label="Uncovered if staged" value={data.totalWorkloads - coveredIfStaged} warn />
+                )}
               </div>
             </>
           )}

package/src/components/home/TopologyPreview.tsx

@@ -1,12 +1,11 @@
 import { useMemo } from 'react'
 import type { Topology } from '../../types'
-import type { DashboardTopologySummary } from '../../api/client'
 import { Network, ArrowRight } from 'lucide-react'
 import { clsx } from 'clsx'
 
 interface TopologyPreviewProps {
   topology: Topology | null
-  summary: DashboardTopologySummary
+  namespaceSelected: boolean
   onNavigate: () => void
 }
 
@@ -133,9 +132,30 @@ const kindDotColors: Record<string, string> = {
   ReplicaSet: 'bg-green-400', HPA: 'bg-pink-500', PVC: 'bg-cyan-400',
 }
 
-export function TopologyPreview({ topology, summary, onNavigate }: TopologyPreviewProps) {
+export function TopologyPreview({ topology, namespaceSelected, onNavigate }: TopologyPreviewProps) {
   const stats = useTopologyStats(topology)
 
+  // A large cluster with no namespace filter gets an empty graph carrying this
+  // flag instead of a build. There is no graph to preview and there never will
+  // be until the user filters, so the card says that rather than counting a
+  // refusal as zero.
+  //
+  // With a pick already active the same flag means something else entirely: SSE
+  // only learns to filter server-side after a flagged frame arrives, so a
+  // cluster-wide refusal still reaches a viewer whose namespace is on its way
+  // to the server. That resolves on its own, and asking for what the viewer
+  // already chose is the wrong thing to say while it does.
+  const needsNamespaceFilter = topology?.requiresNamespaceFilter === true && !namespaceSelected
+
+  // The graph this card draws is the only source for its caption. Node count is
+  // not the test for whether a frame counts — the stream holds topology at null
+  // until one lands and resets it there on reconnect and context switch, so a
+  // delivered graph with no nodes is an empty scope and an honest zero.
+  const counts = useMemo(() => {
+    if (!topology || topology.requiresNamespaceFilter) return null
+    return { nodeCount: topology.nodes.length, edgeCount: topology.edges.length }
+  }, [topology])
+
   return (
     <button
       onClick={onNavigate}
@@ -147,13 +167,27 @@ export function TopologyPreview({ topology, summary, onNavigate }: TopologyPrevi
           <Network className="w-4 h-4 text-theme-text-tertiary" />
           <span className="text-xs font-semibold uppercase tracking-wider text-theme-text-secondary">Topology</span>
         </div>
-        <span className="text-[11px] text-theme-text-tertiary">
-          {summary.nodeCount} resources &middot; {summary.edgeCount} conn
-        </span>
+        {counts ? (
+          <span className="text-[11px] text-theme-text-tertiary">
+            {counts.nodeCount} resources &middot; {counts.edgeCount} conn
+          </span>
+        ) : needsNamespaceFilter ? null : (
+          <span className="h-3 w-28 rounded bg-theme-text-tertiary/20 animate-pulse" />
+        )}
       </div>
 
       {/* Stats (left) + Schematic (right) */}
       <div className="flex-1 flex items-stretch min-h-0 px-3 py-1.5 gap-2">
+        {needsNamespaceFilter ? (
+          <div className="flex-1 flex items-center justify-center px-4">
+            <p className="text-[11px] leading-relaxed text-theme-text-tertiary text-center">
+              This cluster is too large to graph every namespace.
+              <br />
+              <span className="text-theme-text-secondary font-medium">Select a namespace</span> to view the topology.
+            </p>
+          </div>
+        ) : (
+          <>
         {/* Left: compact stats */}
         <div className="flex flex-col justify-center gap-0.5 min-w-0 w-[105px] shrink-0">
           {stats ? (
@@ -187,16 +221,26 @@ export function TopologyPreview({ topology, summary, onNavigate }: TopologyPrevi
               )}
             </>
           ) : (
-            // Show summary-based placeholder while full topology loads via SSE
+            // No graph yet, or one with nothing in scope. Until a frame lands
+            // there is no honest number here — a zero would read as an empty
+            // cluster, so pulse instead.
             <div className="flex flex-col gap-0.5">
               <div className="flex items-center gap-1.5 text-[10px] leading-tight">
-                <span className="w-1.5 h-1.5 rounded-full bg-blue-400 shrink-0" />
-                <span className="text-theme-text-primary font-medium w-5 text-right tabular-nums">{summary.nodeCount}</span>
+                <span className={clsx('w-1.5 h-1.5 rounded-full shrink-0', counts ? 'bg-blue-400' : 'bg-theme-text-tertiary/30 animate-pulse')} />
+                {counts ? (
+                  <span className="text-theme-text-primary font-medium w-5 text-right tabular-nums">{counts.nodeCount}</span>
+                ) : (
+                  <span className="h-3 w-5 rounded bg-theme-text-tertiary/20 animate-pulse" />
+                )}
                 <span className="text-theme-text-tertiary">resources</span>
               </div>
               <div className="flex items-center gap-1.5 text-[10px] leading-tight">
-                <span className="w-1.5 h-1.5 rounded-full bg-theme-text-tertiary shrink-0" />
-                <span className="text-theme-text-primary font-medium w-5 text-right tabular-nums">{summary.edgeCount}</span>
+                <span className={clsx('w-1.5 h-1.5 rounded-full shrink-0', counts ? 'bg-theme-text-tertiary' : 'bg-theme-text-tertiary/30 animate-pulse')} />
+                {counts ? (
+                  <span className="text-theme-text-primary font-medium w-5 text-right tabular-nums">{counts.edgeCount}</span>
+                ) : (
+                  <span className="h-3 w-5 rounded bg-theme-text-tertiary/10 animate-pulse" />
+                )}
                 <span className="text-theme-text-tertiary">connections</span>
               </div>
             </div>
@@ -207,6 +251,8 @@ export function TopologyPreview({ topology, summary, onNavigate }: TopologyPrevi
         <div className="flex-1 flex items-center min-w-0">
           <TopologySchematic />
         </div>
+          </>
+        )}
       </div>
 
       <div className="px-4 py-1.5 border-t border-theme-border/50 flex items-center justify-end gap-1.5 text-[10px] font-semibold uppercase tracking-wider text-theme-text-secondary group-hover:text-theme-text-primary transition-colors">

package/src/components/home/mcpToolCatalog.ts

@@ -52,13 +52,13 @@ export const MCP_TOOL_CATALOG: MCPToolInfo[] = [
   },
   {
     name: 'get_resource',
-    desc: 'A single resource: minified spec/status/metadata plus resourceContext (relationships, refs, issue/audit/policy rollups). Optionally include heavier event/metrics data.',
+    desc: 'A single resource: minified spec/status/metadata plus resourceContext (relationships, refs, issue/audit/policy rollups). Optionally include heavier event/metrics/change/revision data.',
     params: [
       { arg: 'kind', required: true, desc: 'resource kind, e.g. pod, deployment, service' },
       { arg: 'name', required: true, desc: 'resource name' },
       { arg: 'namespace', desc: 'omit for cluster-scoped kinds (Node, ClusterRole, IngressClass, etc.)' },
       { arg: 'group', desc: 'API group when the kind is ambiguous (e.g. serving.knative.dev for Knative Service vs core Service)' },
-      { arg: 'include', desc: 'events, metrics' },
+      { arg: 'include', desc: 'events, metrics, changes, revisions (rollback targets for Deployment/StatefulSet/DaemonSet/Rollout)' },
       { arg: 'context', desc: 'resourceContext tier: basic (default) or none' },
     ],
   },
@@ -260,14 +260,24 @@ export const MCP_TOOL_CATALOG: MCPToolInfo[] = [
   {
     name: 'manage_workload',
     write: true,
-    desc: 'Operate on a workload: restart triggers a rolling restart, scale changes the replica count, rollback reverts to a previous revision.',
+    desc: 'Operate on a workload: restart triggers a rolling restart, scale changes the replica count, rollback reverts to a previous revision. Rollout rollback re-runs every canary step — pair it with manage_rollout promote-full, or abort instead.',
     params: [
       { arg: 'action', required: true, desc: 'restart, scale, or rollback' },
-      { arg: 'kind', required: true, desc: 'deployment, statefulset, or daemonset' },
+      { arg: 'kind', required: true, desc: 'deployment, statefulset, daemonset, or rollout' },
       { arg: 'namespace', required: true, desc: 'workload namespace' },
       { arg: 'name', required: true, desc: 'workload name' },
       { arg: 'replicas', desc: 'target replica count (for scale)' },
-      { arg: 'revision', desc: 'target revision (for rollback)' },
+      { arg: 'revision', desc: 'target revision (for rollback); list them with get_resource include=revisions' },
+    ],
+  },
+  {
+    name: 'manage_rollout',
+    write: true,
+    desc: 'Control an Argo Rollout progressive delivery: abort reverts traffic to the last stable version immediately, retry clears an abort, promote advances one step, promote-full skips all remaining steps/pauses/analysis, skip-step advances exactly one canary step. A Rollout paused on an inconclusive analysis names its AnalysisRun in status — read that first.',
+    params: [
+      { arg: 'action', required: true, desc: 'abort, retry, promote, promote-full, or skip-step' },
+      { arg: 'namespace', required: true, desc: 'rollout namespace' },
+      { arg: 'name', required: true, desc: 'rollout name' },
     ],
   },
   {

package/src/components/resources/CompositeRenderer.tsx

@@ -1,11 +1,14 @@
 import { useMemo } from 'react'
-import { useQueries } from '@tanstack/react-query'
+import { useQueries, useQuery } from '@tanstack/react-query'
 import {
   CompositeRenderer as BaseCompositeRenderer,
   type ComposedRefStatus,
+  type BoundXRStatus,
 } from '@skyhook-io/k8s-ui/components/resources/renderers/CompositeRenderer'
 import {
   getCrossplaneResourceRefs,
+  getBoundXRRef,
+  isClaim,
   type CrossplaneResourceRef,
 } from '@skyhook-io/k8s-ui/components/resources/resource-utils-crossplane'
 import { getResourceStatus } from '@skyhook-io/k8s-ui'
@@ -41,7 +44,53 @@ function groupFromApiVersion(apiVersion: string | undefined): string {
  * it yet) is a normal state for a freshly-applied Composite, not a failure.
  */
 export function CompositeRenderer({ data, onNavigate }: CompositeRendererProps) {
-  const refs = useMemo<CrossplaneResourceRef[]>(() => getCrossplaneResourceRefs(data), [data])
+  // A v1 Claim carries only a singular spec.resourceRef to its bound XR; the
+  // composed-resource refs live on that XR. Follow the ref, fetch the XR, and
+  // read its refs — otherwise the claim panel reads its own (absent) resourceRefs
+  // and shows "No composed resources" for a claim that has composed plenty.
+  const boundXRRef = useMemo(() => (isClaim(data) ? getBoundXRRef(data) : null), [data])
+  const boundXRQuery = useQuery({
+    queryKey: [
+      'bound-xr',
+      groupFromApiVersion(boundXRRef?.apiVersion),
+      boundXRRef?.kind ?? '',
+      boundXRRef?.namespace ?? '',
+      boundXRRef?.name ?? '',
+    ],
+    queryFn: async () => {
+      const ns = boundXRRef!.namespace || '_'
+      const plural = kindToPlural(boundXRRef!.kind)
+      const group = groupFromApiVersion(boundXRRef!.apiVersion)
+      const query = group ? `?group=${encodeURIComponent(group)}` : ''
+      return fetchJSON<{ resource: any }>(`/resources/${plural}/${ns}/${boundXRRef!.name}${query}`)
+    },
+    staleTime: 30000,
+    retry: false,
+    enabled: Boolean(boundXRRef?.kind && boundXRRef?.name),
+  })
+
+  const refs = useMemo<CrossplaneResourceRef[]>(() => {
+    // For a claim, refs come from the bound XR once it's fetched; for an XR/MR
+    // viewed directly, they're on `data` itself.
+    if (boundXRRef) return getCrossplaneResourceRefs(boundXRQuery.data?.resource)
+    return getCrossplaneResourceRefs(data)
+  }, [boundXRRef, boundXRQuery.data, data])
+
+  // Surface the bound-XR fetch state so the empty composed-resources branch can
+  // tell "XR still loading / unreadable" apart from "claim genuinely has none".
+  const boundXRStatus = useMemo<BoundXRStatus | undefined>(() => {
+    if (!boundXRRef) return undefined
+    if (boundXRQuery.isLoading) return { loading: true }
+    if (boundXRQuery.isError) {
+      if (boundXRQuery.error instanceof ApiError && boundXRQuery.error.status === 404) {
+        return { missing: true }
+      }
+      const message =
+        boundXRQuery.error instanceof Error ? boundXRQuery.error.message : 'Failed to fetch bound composite'
+      return { error: true, errorMessage: message }
+    }
+    return undefined
+  }, [boundXRRef, boundXRQuery.isLoading, boundXRQuery.isError, boundXRQuery.error])
 
   const queries = useQueries({
     queries: refs.map(ref => {
@@ -97,5 +146,13 @@ export function CompositeRenderer({ data, onNavigate }: CompositeRendererProps)
     return map
   }, [refs, queries])
 
-  return <BaseCompositeRenderer data={data} onNavigate={onNavigate} composedRefStatuses={composedRefStatuses} />
+  return (
+    <BaseCompositeRenderer
+      data={data}
+      onNavigate={onNavigate}
+      composedRefStatuses={composedRefStatuses}
+      composedRefs={refs}
+      boundXRStatus={boundXRStatus}
+    />
+  )
 }

package/src/components/resources/ResourcesView.tsx

@@ -49,6 +49,13 @@ const LARGE_RESOURCE_LIST_GUARD_KEYS = new Set([
   'apps/ReplicaSet',
   'discovery.k8s.io/EndpointSlice',
 ])
+// Kinds the server slims with ?include=summary: rows carry only the fields the
+// table reads (5–8x smaller for pods — a production pod is ~9–13KB raw,
+// ~1–2.5KB slimmed), so the browser holds far more rows before the guard must
+// block. The detail drawer is unaffected — row clicks always refetch the full
+// object.
+const SUMMARY_LIST_KINDS = new Set(['Pod', 'apps/ReplicaSet'])
+const SUMMARY_LIST_LIMIT = 50000
 
 const deniedWorkloadWrites: WorkloadWritePermissions = {
   deployments: false,
@@ -189,13 +196,17 @@ export function ResourcesView({ namespaces, selectedResource, onResourceClick, o
   const selectedCountKnown = selectedCountKey ? hasResourceCount(countsData?.counts, selectedCountKey) : false
   const selectedCountUnavailable = selectedCountKey ? countsData?.unavailable?.includes(selectedCountKey) ?? false : false
   const isSelectedKindGuarded = selectedCountKey !== '' && LARGE_RESOURCE_LIST_GUARD_KEYS.has(selectedCountKey)
+  const selectedKindSummaryServed = SUMMARY_LIST_KINDS.has(selectedCountKey)
+  const selectedKindRowLimit = selectedKindSummaryServed ? SUMMARY_LIST_LIMIT : LARGE_RESOURCE_LIST_LIMIT
   const waitingForGuardCount = isSelectedKindGuarded && !countsData && !countsIsError
-  const largeListBlocked = isSelectedKindGuarded && countsData != null && (selectedCountUnavailable || (selectedCountKnown && (selectedCount ?? 0) > LARGE_RESOURCE_LIST_LIMIT))
+  const largeListBlocked = isSelectedKindGuarded && countsData != null && (selectedCountUnavailable || (selectedCountKnown && (selectedCount ?? 0) > selectedKindRowLimit))
   const selectedKindQueryBlocked = waitingForGuardCount || largeListBlocked
   const podCount = countsData?.counts.Pod
   const podCountKnown = hasResourceCount(countsData?.counts, 'Pod')
   const podCountUnavailable = countsData?.unavailable?.includes('Pod') ?? false
-  const podCountAllowsBulkMetrics = countsData != null && podCountKnown && !podCountUnavailable && (podCount ?? 0) <= LARGE_RESOURCE_LIST_LIMIT
+  // Metrics rows are ~100B each (ns/name + cpu/mem), so they track the pods
+  // guard rather than the raw-list limit.
+  const podCountAllowsBulkMetrics = countsData != null && podCountKnown && !podCountUnavailable && (podCount ?? 0) <= SUMMARY_LIST_LIMIT
   const selectedKindName = selectedKind?.name.toLowerCase() ?? ''
   const topPodMetricsEnabled = selectedKindName === 'pods' && podCountAllowsBulkMetrics
   // Node metrics back the Nodes table and, for the Pods table, the pod-vs-node
@@ -210,7 +221,7 @@ export function ResourcesView({ namespaces, selectedResource, onResourceClick, o
         kind: selectedKind.name,
         count: selectedCountUnavailable ? undefined : selectedCount,
         reason: selectedCountUnavailable ? 'count-unavailable' as const : 'too-many' as const,
-        limit: LARGE_RESOURCE_LIST_LIMIT,
+        limit: selectedKindRowLimit,
         namespaces,
       }
     : null
@@ -223,6 +234,7 @@ export function ResourcesView({ namespaces, selectedResource, onResourceClick, o
       const params = new URLSearchParams()
       if (namespaces.length > 0) params.set('namespaces', namespacesParam)
       if (isSelectedCrd && selectedKind.group) params.set('group', selectedKind.group)
+      if (selectedKindSummaryServed) params.set('include', 'summary')
       const startedAt = performance.now()
       debugNamespaceLog('resources:selected-kind-fetch-start', {
         kind: selectedKind.name,

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

@@ -1 +1,116 @@
-export * from '@skyhook-io/k8s-ui/components/resources/renderers/CNPGClusterRenderer'
+import { Database } from 'lucide-react'
+import { CNPGClusterRenderer as BaseCNPGClusterRenderer } from '@skyhook-io/k8s-ui/components/resources/renderers/CNPGClusterRenderer'
+import { Section, RelationshipGroup, getCNPGDeclarativeStatus } from '@skyhook-io/k8s-ui'
+import { LookupFailureNote } from '@skyhook-io/k8s-ui/components/resources/renderers/LookupFailureNote'
+import type { ResourceRef } from '@skyhook-io/k8s-ui'
+import { useResources } from '../../../api/client'
+
+const CNPG_GROUP = 'postgresql.cnpg.io'
+
+/**
+ * Host wrapper adding the reverse lookup: which Databases, Publications and
+ * Subscriptions are declared against this cluster.
+ *
+ * Each of those objects links forward to its cluster. Without this the
+ * relationship is one-way, so an operator reading a cluster has no way to see
+ * that three databases were declared against it and one of them never applied.
+ */
+export function CNPGClusterRenderer({
+  data,
+  onNavigate,
+}: {
+  data: any
+  onNavigate?: (ref: ResourceRef) => void
+}) {
+  const namespace = data?.metadata?.namespace ?? ''
+  const name = data?.metadata?.name ?? ''
+  const enabled = !!namespace && !!name
+
+  const databases = useResources<any>('databases', namespace, CNPG_GROUP, { enabled })
+  const publications = useResources<any>('publications', namespace, CNPG_GROUP, { enabled })
+  const subscriptions = useResources<any>('subscriptions', namespace, CNPG_GROUP, { enabled })
+
+  const mine = (items: any[] | undefined) =>
+    (items ?? []).filter((o) => o?.spec?.cluster?.name === name)
+
+  const dbs = mine(databases.data)
+  const pubs = mine(publications.data)
+  const subs = mine(subscriptions.data)
+  const total = dbs.length + pubs.length + subs.length
+
+  const loading = databases.isLoading || publications.isLoading || subscriptions.isLoading
+  // Three independent lookups, so "it failed" is not all-or-nothing: two can
+  // return rows while the third does not, and every count below is then drawn
+  // from a population smaller than the real one.
+  const lookupErrors = [databases.error, publications.error, subscriptions.error]
+  const failed = lookupErrors.some(Boolean)
+
+  // Not applied is the state worth surfacing here: the manifest exists and
+  // PostgreSQL does not have the object. Counting it on the cluster is how an
+  // operator notices without opening each one.
+  const notApplied = [...dbs, ...pubs, ...subs].filter(
+    (o) => getCNPGDeclarativeStatus(o).level === 'unhealthy',
+  ).length
+
+  const refs = (items: any[], kind: string) =>
+    items.map((o) => ({
+      kind,
+      namespace: o?.metadata?.namespace ?? '',
+      name: o?.metadata?.name ?? '',
+      group: CNPG_GROUP,
+    }))
+
+  return (
+    <>
+      <BaseCNPGClusterRenderer
+        data={data}
+        onNavigate={onNavigate}
+        declared={
+          <Section title="Declared Objects" icon={Database} defaultExpanded={notApplied > 0}>
+            {loading ? (
+              <div className="text-sm text-theme-text-tertiary">Looking for declared objects…</div>
+            ) : total === 0 ? (
+              // "None declared" and "could not check" are different answers, and
+              // only one of them means the cluster has no declarative objects.
+              failed ? (
+                <LookupFailureNote
+                  errors={lookupErrors}
+                  what="which objects are declared against this cluster"
+                />
+              ) : (
+                <div className="text-sm text-theme-text-tertiary">
+                  No Database, Publication or Subscription is declared against this cluster.
+                </div>
+              )
+            ) : (
+              <div className="space-y-3">
+                {notApplied > 0 && (
+                  <div className="text-sm text-warning-text">
+                    {`${notApplied} of ${total} could not be applied to PostgreSQL — the manifest exists, the object does not.`}
+                  </div>
+                )}
+                {/* Rows arrived, so the failure is not "nothing found" — it is
+                    that both counts above are drawn from less than the cluster
+                    has, which is the reading they would otherwise invite. */}
+                <LookupFailureNote
+                  errors={lookupErrors}
+                  what="which objects are declared against this cluster"
+                  incomplete
+                />
+                {dbs.length > 0 && (
+                  <RelationshipGroup label="Databases" refs={refs(dbs, 'Database')} onNavigate={onNavigate} />
+                )}
+                {pubs.length > 0 && (
+                  <RelationshipGroup label="Publications" refs={refs(pubs, 'Publication')} onNavigate={onNavigate} />
+                )}
+                {subs.length > 0 && (
+                  <RelationshipGroup label="Subscriptions" refs={refs(subs, 'Subscription')} onNavigate={onNavigate} />
+                )}
+              </div>
+            )}
+          </Section>
+        }
+      />
+    </>
+  )
+}