@skyhook-io/radar-app 1.10.0 → 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/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>
+        }
+      />
+    </>
+  )
+}

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

@@ -0,0 +1,227 @@
+import { Share2 } from 'lucide-react'
+import {
+  CNPGDatabaseRenderer as BaseDatabase,
+  CNPGPublicationRenderer as BasePublication,
+  CNPGSubscriptionRenderer as BaseSubscription,
+} from '@skyhook-io/k8s-ui/components/resources/renderers/CNPGDeclarativeRenderer'
+import { ResourceLink, Section, RelationshipGroup } 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'
+import { splitCNPGDeclarativeByApplied } from '../resource-utils-cnpg'
+
+const CNPG_GROUP = 'postgresql.cnpg.io'
+
+/**
+ * Resolves a PostgreSQL-side name back to the CR that declares it.
+ *
+ * A Publication says it lives in database `demo_app`; the Database CR is called
+ * `demo-app` and carries `spec.name: demo_app`. The two are not the same string,
+ * so the page can name the database and still leave the reader with no way to
+ * open it — the dead end this exists to close.
+ *
+ * Returns undefined when nothing matches, and the caller falls back to plain
+ * text: an unresolved name is still the truth, it just isn't a link.
+ */
+function useDeclaredRef(
+  plural: 'databases' | 'publications',
+  namespace: string,
+  cluster: string | undefined,
+  pgName: string | undefined,
+  onNavigate?: (ref: ResourceRef) => void,
+) {
+  const enabled = !!namespace && !!cluster && !!pgName
+  const { data } = useResources<any>(plural, namespace, CNPG_GROUP, { enabled })
+  if (!enabled) return undefined
+  const match = (data ?? []).find(
+    (o: any) => o?.spec?.cluster?.name === cluster && o?.spec?.name === pgName,
+  )
+  if (!match) return undefined
+  return (
+    <ResourceLink
+      name={pgName as string}
+      kind={plural}
+      namespace={match?.metadata?.namespace ?? namespace}
+      group={CNPG_GROUP}
+      label={pgName}
+      onNavigate={
+        onNavigate
+          ? () =>
+              onNavigate({
+                kind: plural === 'databases' ? 'Database' : 'Publication',
+                namespace: match?.metadata?.namespace ?? namespace,
+                name: match?.metadata?.name ?? '',
+                group: CNPG_GROUP,
+              })
+          : undefined
+      }
+    />
+  )
+}
+
+/**
+ * Database, with the objects that replicate out of it.
+ *
+ * The link only exists in one direction in the API: a Publication names its
+ * database, a Database names nothing. Without this, "what publishes from here"
+ * has no answer on the page that raises the question.
+ */
+export function CNPGDatabaseRenderer({
+  data,
+  onNavigate,
+}: {
+  data: any
+  onNavigate?: (ref: ResourceRef) => void
+}) {
+  const ns = data?.metadata?.namespace ?? ''
+  const cluster = data?.spec?.cluster?.name
+  const dbname = data?.spec?.name
+  const enabled = !!ns && !!cluster && !!dbname
+
+  const publications = useResources<any>('publications', ns, CNPG_GROUP, { enabled })
+  const subscriptions = useResources<any>('subscriptions', ns, CNPG_GROUP, { enabled })
+
+  const inThisDatabase = (o: any) =>
+    o?.spec?.cluster?.name === cluster && o?.spec?.dbname === dbname
+  const pubs = (publications.data ?? []).filter(inThisDatabase)
+  const subs = (subscriptions.data ?? []).filter(inThisDatabase)
+
+  const toRef = (kind: 'Publication' | 'Subscription') => (o: any) => ({
+    kind,
+    namespace: o?.metadata?.namespace ?? ns,
+    name: o?.metadata?.name ?? '',
+    group: CNPG_GROUP,
+  })
+
+  // Three states, not two — the same distinction the status badge and the issue
+  // detector make. Applied is replicating. `applied: false` is a failed apply
+  // the operator can explain. ABSENT is not yet reconciled, and calling that
+  // "exists in Kubernetes and not in PostgreSQL" condemns every object in its
+  // first seconds.
+  const p = splitCNPGDeclarativeByApplied(pubs)
+  const sub = splitCNPGDeclarativeByApplied(subs)
+  const tagged = (list: any[], kind: 'Publication' | 'Subscription') =>
+    list.map((o: any) => ({ o, kind }))
+  const livePubs = p.applied
+  const liveSubs = sub.applied
+  const notApplied = [...tagged(p.notApplied, 'Publication'), ...tagged(sub.notApplied, 'Subscription')]
+  const pending = [...tagged(p.pending, 'Publication'), ...tagged(sub.pending, 'Subscription')]
+
+  const loading = publications.isLoading || subscriptions.isLoading
+  // Two independent lookups: one can return rows while the other does not, and
+  // the groups below would then describe half the replication as all of it.
+  const lookupErrors = [publications.error, subscriptions.error]
+  const failed = lookupErrors.some(Boolean)
+
+  return (
+    <BaseDatabase
+      data={data}
+      onNavigate={onNavigate}
+      usedBy={
+        <Section title="Replication" icon={Share2} defaultExpanded>
+          {loading ? (
+            <div className="text-sm text-theme-text-tertiary">Looking for publications…</div>
+          ) : pubs.length === 0 && subs.length === 0 ? (
+            failed ? (
+              <LookupFailureNote
+                errors={lookupErrors}
+                what="what replicates out of this database"
+              />
+            ) : (
+              <div className="text-sm text-theme-text-tertiary">
+                Nothing publishes from or subscribes to this database.
+              </div>
+            )
+          ) : (
+            <div className="space-y-3">
+              {/* Rows are showing, so the failure means this list is short —
+                  not that nothing replicates. */}
+              <LookupFailureNote
+                errors={lookupErrors}
+                what="what replicates out of this database"
+                incomplete
+              />
+              {livePubs.length > 0 && (
+                <RelationshipGroup
+                  label="Publishes from here"
+                  refs={livePubs.map(toRef('Publication'))}
+                  onNavigate={onNavigate}
+                />
+              )}
+              {liveSubs.length > 0 && (
+                <RelationshipGroup
+                  label="Subscribes into here"
+                  refs={liveSubs.map(toRef('Subscription'))}
+                  onNavigate={onNavigate}
+                />
+              )}
+              {notApplied.length > 0 && (
+                <div className="space-y-1.5">
+                  <RelationshipGroup
+                    label="Declared, but not replicating"
+                    refs={notApplied.map(({ o, kind }) => toRef(kind)(o))}
+                    onNavigate={onNavigate}
+                  />
+                  <div className="text-xs text-warning-text">
+                    {notApplied.length === 1
+                      ? 'This exists in Kubernetes and not in PostgreSQL, so no data moves through it. Open it for the operator’s reason.'
+                      : 'These exist in Kubernetes and not in PostgreSQL, so no data moves through them. Open one for the operator’s reason.'}
+                  </div>
+                </div>
+              )}
+              {pending.length > 0 && (
+                <div className="space-y-1.5">
+                  <RelationshipGroup
+                    label="Not reconciled yet"
+                    refs={pending.map(({ o, kind }) => toRef(kind)(o))}
+                    onNavigate={onNavigate}
+                  />
+                  <div className="text-xs text-theme-text-secondary">
+                    The operator has not reported on these yet. They have not failed.
+                  </div>
+                </div>
+              )}
+            </div>
+          )}
+        </Section>
+      }
+    />
+  )
+}
+
+export function CNPGPublicationRenderer({
+  data,
+  onNavigate,
+}: {
+  data: any
+  onNavigate?: (ref: ResourceRef) => void
+}) {
+  const ns = data?.metadata?.namespace ?? ''
+  const cluster = data?.spec?.cluster?.name
+  const database = useDeclaredRef('databases', ns, cluster, data?.spec?.dbname, onNavigate)
+  return <BasePublication data={data} onNavigate={onNavigate} links={{ database }} />
+}
+
+export function CNPGSubscriptionRenderer({
+  data,
+  onNavigate,
+}: {
+  data: any
+  onNavigate?: (ref: ResourceRef) => void
+}) {
+  const ns = data?.metadata?.namespace ?? ''
+  const cluster = data?.spec?.cluster?.name
+  const database = useDeclaredRef('databases', ns, cluster, data?.spec?.dbname, onNavigate)
+  // The publication a subscription reads from lives on the *upstream* cluster in
+  // a real topology. Resolving locally is right for the single-cluster demo and
+  // simply finds nothing otherwise, which falls back to plain text rather than
+  // linking to the wrong object.
+  const publication = useDeclaredRef(
+    'publications',
+    ns,
+    cluster,
+    data?.spec?.publicationName,
+    onNavigate,
+  )
+  return <BaseSubscription data={data} onNavigate={onNavigate} links={{ database, publication }} />
+}