@skyhook-io/radar-app 1.16.3 → 1.17.1

package/src/components/cnpg/CNPGOverview.tsx

@@ -1,9 +1,11 @@
 import { useMemo } from 'react'
-import { useNavigate } from 'react-router-dom'
 import { clsx } from 'clsx'
-import { ArrowRight, Database, FileText, Search } from 'lucide-react'
+import { ArrowRight, Database, FileText, Plus, Search } from 'lucide-react'
 import {
   CNPG_PROBLEM_CATEGORIES,
+  CNPG_PROBLEM_TONE,
+  cnpgDimensions,
+  cnpgReadyInstances,
   FactValue,
   StatusDot,
   Tooltip,
@@ -13,43 +15,175 @@ import {
 } from '@skyhook-io/k8s-ui'
 import type { SelectedResource } from '../../types'
 import { useConnection } from '../../context/ConnectionContext'
-import { EmptyState, ROW_HOVER, TABLE_HEAD, TABLE_WRAP, TBODY, TD, TH } from '../capacity/shared'
-import { CNPGWorkspaceHeader, CoverageNotice, FilterChips, type CNPGScreenProps } from './shared'
-import { cnpgClusterFullPath, currentPageLabel } from './paths'
-import { sameResource } from './routes'
+import { getApiBase } from '../../api/config'
+import { CNPGWorkspaceHeader, CoverageNotice, coverageEmpty, type CNPGScreenProps } from './shared'
+import { cnpgClusterFullPath, cnpgClusterProblemsPath } from './paths'
+import { currentPageLabel } from '../../utils/page-links'
+import { CNPGOperatorBanner } from './CNPGOperatorBanner'
+import { cnpgInstancePillLabel, cnpgPillsToShow, cnpgRowStatus } from './fleetStatus'
+import { BreakText, FilterChips, ScreenEmptyState } from '../workspace/layout'
+import { ROW_HOVER, TABLE_HEAD, TABLE_WRAP, TBODY, TD, TH } from '../workspace/table'
+import { sameSelectedResource } from '../../utils/drawer-trail'
+import { useCNPGNavigate } from './useCNPGNavigate'
+import { useCNPGOperations } from './operations/store'
+import { latestCNPGOperation } from './operations/presentation'
+import { CNPGFleetOperation } from './operations/CNPGFleetOperation'
 
 type Filter = 'attention' | 'all'
 
+// Headers may wrap: at a 1280px window the columns are narrower than their labels.
+const TH_WRAP = TH.replace('whitespace-nowrap', '')
+
+// Five pills fit the Ready column; the rest are counted, listed on hover.
+const MAX_PILLS = 5
+
 function InstancePills({ row }: { row: CNPGFleetRow }) {
   if (row.pods.length === 0) return null
+  const { shown, hidden } = cnpgPillsToShow(row.pods, MAX_PILLS)
   return (
-    <div className="mt-1 flex flex-wrap gap-1">
-      {row.pods.map((p) => {
+    <div className="mt-1 flex flex-nowrap items-center gap-0.5 font-sans">
+      {shown.map((p) => {
         const tone = p.ready === true ? 'healthy' : p.ready === false ? 'unhealthy' : 'unknown'
         return (
-          <Tooltip key={p.name} content={`${p.name} · ${p.role} · ${p.ready === true ? 'ready' : p.ready === false ? 'not ready' : 'readiness unknown'}`}>
-            <span className="inline-flex items-center gap-1 rounded border border-theme-border bg-theme-base px-1 text-[10.5px] font-mono text-theme-text-secondary">
+          <Tooltip key={p.name} content={cnpgInstancePillLabel(p)}>
+            <span
+              aria-label={cnpgInstancePillLabel(p)}
+              className="inline-flex items-center gap-0.5 rounded border border-theme-border bg-theme-base px-0.5 font-mono text-[10.5px] text-theme-text-secondary"
+            >
               <StatusDot tone={tone} size="xs" />
               {p.role === 'primary' ? 'P' : p.role === 'replica' ? 'R' : '?'}
             </span>
           </Tooltip>
         )
       })}
+      {hidden.length > 0 && (
+        <Tooltip
+          content={
+            <ul className="space-y-0.5">
+              {hidden.map((p) => (
+                <li key={p.name}>{cnpgInstancePillLabel(p)}</li>
+              ))}
+            </ul>
+          }
+        >
+          <span aria-label={`${hidden.length} more instances`} className="px-0.5 text-[10.5px] text-theme-text-tertiary">
+            +{hidden.length}
+          </span>
+        </Tooltip>
+      )}
     </div>
   )
 }
 
-function AttentionCell({ row }: { row: CNPGFleetRow }) {
+function ReadyCell({ row }: { row: CNPGFleetRow }) {
+  const r = cnpgReadyInstances(row)
+  return (
+    <>
+      {r.note ? (
+        <Tooltip content={r.note}>
+          <span className={clsx('underline decoration-dotted underline-offset-2', toneTextClass(r.tone ?? 'unknown'))}>{r.text} Pods</span>
+        </Tooltip>
+      ) : (
+        r.text
+      )}
+      {r.podText && <span className="block text-xs text-theme-text-secondary">{r.podText}</span>}
+      <InstancePills row={row} />
+    </>
+  )
+}
+
+// The Storage cell is the same assessment as the Cluster page's Storage chip:
+// measured usage, or the WAL an inactive slot holds, or why neither is known.
+function storageFact(row: CNPGFleetRow) {
+  const d = cnpgDimensions({ row }).find((x) => x.id === 'storage')!
+  return { text: d.text, tone: d.tone, source: d.source }
+}
+
+/** The one reason no cluster's volume usage is measured, when that is so; the column then says it once. */
+function cnpgStorageUnmeasured(rows: CNPGFleetRow[]): string | null {
+  if (rows.length === 0 || rows.some((r) => !r.disk || r.disk.tone !== 'unknown')) return null
+  const reasons = new Set(rows.map((r) => (r.disk?.source ?? r.disk?.text ?? '').replace(/this cluster's/g, 'their').replace(/this cluster/g, 'them')))
+  return reasons.size === 1 ? [...reasons][0] || 'no measurement' : 'no measurement'
+}
+
+function StorageCell({ row, quiet }: { row: CNPGFleetRow; quiet: boolean }) {
+  const fact = storageFact(row)
+  if (quiet && fact.tone === 'unknown') {
+    return (
+      <Tooltip content={fact.source ?? 'Volume usage not measured'}>
+        <span className="text-theme-text-tertiary">—</span>
+      </Tooltip>
+    )
+  }
+  return (
+    <>
+      <FactValue fact={fact} />
+      {row.diskGrowth && <div className="text-xs"><FactValue fact={row.diskGrowth} className="text-theme-text-tertiary" /></div>}
+    </>
+  )
+}
+
+function RowStatusDot({ row }: { row: CNPGFleetRow }) {
+  const status = cnpgRowStatus(row)
+  return (
+    <Tooltip content={status.label}>
+      <span role="img" aria-label={status.label} className="inline-flex">
+        <StatusDot tone={status.tone} />
+      </span>
+    </Tooltip>
+  )
+}
+
+// A token this long cannot wrap at a word boundary within the cell.
+const UNBREAKABLE_TOKEN = 24
+
+// A measured problem names what measured it, so a qualified match stays qualified in the fleet.
+function problemTip(p: CNPGFleetRow['problems'][number]): string {
+  return p.source === 'measurement' && p.measuredBy ? `${p.title} (measured by ${p.measuredBy})` : p.title
+}
+
+function AttentionCell({ row, onOpenAll }: { row: CNPGFleetRow; onOpenAll: () => void }) {
   const top = row.problems.find((p) => p.severity !== 'posture') ?? row.problems[0]
   if (!top) return <span className="text-theme-text-tertiary">—</span>
-  const tone = top.severity === 'critical' ? 'unhealthy' : top.severity === 'warning' ? 'degraded' : 'neutral'
-  const more = row.problems.length - 1
+  const others = row.problems.filter((p) => p !== top)
+  const headline = top.shortTitle ?? top.title
+  const unbreakable = headline.split(/\s+/).some((w) => w.length > UNBREAKABLE_TOKEN)
   return (
     <div className="min-w-0">
-      <Tooltip content={top.title} wrapperClassName="block">
-        <div className={clsx('line-clamp-2 break-words', toneTextClass(tone))}>{top.title}</div>
+      <Tooltip content={problemTip(top)} wrapperClassName="w-full">
+        <div className={clsx('[overflow-wrap:normal]', unbreakable ? 'truncate' : 'line-clamp-3', toneTextClass(CNPG_PROBLEM_TONE[top.severity]))}>{headline}</div>
       </Tooltip>
-      {more > 0 && <div className="text-xs text-theme-text-tertiary">+{more} more</div>}
+      {top.unverifiedMatch && (
+        <div className="text-[11px] text-theme-text-tertiary">measured by {top.measuredBy}</div>
+      )}
+      {others.length > 0 && (
+        <Tooltip
+          content={
+            <ul className="space-y-1">
+              {others.map((p) => (
+                <li key={p.id} className="flex items-start gap-1.5">
+                  <span className="mt-1 shrink-0">
+                    <StatusDot tone={CNPG_PROBLEM_TONE[p.severity]} size="xs" />
+                  </span>
+                  <span>{problemTip(p)}</span>
+                </li>
+              ))}
+            </ul>
+          }
+        >
+          <button
+            type="button"
+            onClick={(e) => {
+              e.stopPropagation()
+              onOpenAll()
+            }}
+            aria-label={`${others.length} more problems: open ${row.name} with every problem listed`}
+            className="rounded text-xs text-accent-text hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent"
+          >
+            +{others.length} more
+          </button>
+        </Tooltip>
+      )}
     </div>
   )
 }
@@ -63,13 +197,17 @@ export function CNPGOverview({
   onInspect,
   inspected,
   onClearNamespaces,
+  onCreate,
 }: CNPGScreenProps) {
-  const navigate = useNavigate()
+  const navigate = useCNPGNavigate()
   const { connection } = useConnection()
+  const operations = useCNPGOperations()
+  const apiBase = getApiBase()
   const q = searchParams.get('q') ?? ''
   const cat = (searchParams.get('cat') as CNPGProblemCategory | null) ?? null
   const rawFilter = searchParams.get('filter') as Filter | null
-  const filter: Filter = rawFilter ?? (fleet.attentionCount > 0 ? 'attention' : 'all')
+  // The view is the list of clusters: all of them unless asked for less.
+  const filter: Filter = rawFilter === 'attention' ? 'attention' : 'all'
 
   const rows = useMemo(() => {
     let list = fleet.rows
@@ -85,6 +223,14 @@ export function CNPGOverview({
   const clustersCov = data.coverage.clusters
   const total = fleet.rows.length
   const context = connection.context || data.context
+  // Some namespaces were not read: the count is a floor, not the cluster's total.
+  const totalText = `${clustersCov?.state === 'partial' ? '≥' : ''}${total}`
+  const createAction = onCreate ? (
+    <button type="button" onClick={onCreate} className="btn-secondary inline-flex items-center gap-1.5 px-3 py-1.5 text-sm">
+      <Plus className="h-3.5 w-3.5" />
+      Create
+    </button>
+  ) : undefined
 
   if (total === 0) {
     const state = clustersCov?.state ?? 'notInstalled'
@@ -95,15 +241,15 @@ export function CNPGOverview({
           ? { title: 'Loading PostgreSQL clusters', detail: 'Radar is still syncing CloudNativePG Clusters from the API server.' }
           : state === 'error'
             ? { title: 'PostgreSQL clusters could not be read', detail: 'Reading CloudNativePG Clusters failed; see the Radar server log.' }
-            : state === 'partial'
-              ? { title: 'No visible PostgreSQL clusters', detail: 'None in the namespaces you can read. Clusters in namespaces you cannot list are not shown.' }
+            : state === 'partial' || state === 'uncached'
+              ? { title: 'No visible PostgreSQL clusters', detail: coverageEmpty(clustersCov, 'PostgreSQL clusters') }
               : namespaces.length > 0
-                ? { title: `No PostgreSQL clusters in ${context}`, detail: `None in namespace ${namespaces.join(', ')}. Clear the namespace filter to see the whole cluster.` }
+                ? { title: 'No PostgreSQL clusters in the selected namespaces', detail: `None in ${namespaces.join(', ')} in ${context}. Clear the namespace filter to see the whole cluster.` }
                 : { title: `No PostgreSQL clusters in ${context}`, detail: 'The CloudNativePG CRDs are installed. Clusters, backups and declarations appear here once they exist.' }
     return (
       <div className="flex min-h-0 flex-1 flex-col">
-        <CNPGWorkspaceHeader title="Overview" />
-        <EmptyState
+        <CNPGWorkspaceHeader title="Clusters" actions={createAction} />
+        <ScreenEmptyState
           icon={Database}
           title={empty.title}
           detail={empty.detail}
@@ -124,7 +270,7 @@ export function CNPGOverview({
   if (q) chips.push({ label: `Search: ${q}`, onClear: () => onSetParams({ q: null }) })
   if (namespaces.length > 0) chips.push({ label: `Namespace: ${namespaces.join(', ')}`, onClear: onClearNamespaces })
 
-  const segment = (id: Filter, label: string, n: number) => {
+  const segment = (id: Filter, label: string, n: number | string) => {
     const on = filter === id
     return (
       <button
@@ -132,7 +278,7 @@ export function CNPGOverview({
         type="button"
         role="tab"
         aria-selected={on}
-        onClick={() => onSetParams({ filter: id })}
+        onClick={() => onSetParams({ filter: id === 'all' ? null : 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',
@@ -145,27 +291,30 @@ export function CNPGOverview({
   }
 
   const lowerBound = fleet.incompleteKinds.length > 0
+  const attentionText = lowerBound ? fleet.attentionCount > 0 ? `≥${fleet.attentionCount}` : 'Unknown' : String(fleet.attentionCount)
+  const storageUnmeasured = cnpgStorageUnmeasured(fleet.rows)
 
   return (
     <div className="flex min-h-0 flex-1 flex-col">
       <CNPGWorkspaceHeader
-        title="Overview"
+        title="Clusters"
         subtitle={
           <>
-            {total} PostgreSQL {total === 1 ? 'cluster' : 'clusters'} · {fleet.attentionCount}
-            {lowerBound ? '+' : ''} need attention
+            {totalText} PostgreSQL {total === 1 ? 'cluster' : 'clusters'} · {lowerBound && fleet.attentionCount === 0 ? 'Needs attention: unknown' : `${attentionText} need attention`}
             <span className="text-theme-text-tertiary"> · {context}</span>
           </>
         }
+        actions={createAction}
       />
       <div className="min-h-0 flex-1 overflow-y-auto [scrollbar-gutter:stable]">
         <div className="space-y-3 px-5 pb-6 pt-3 xl:px-7">
-          <CoverageNotice fleet={fleet} data={data} />
+          <CoverageNotice fleet={fleet} data={data} kinds={['clusters', 'pods', 'backups', 'scheduledBackups', 'objectStores', 'poolers', 'databases', 'databaseRoles', 'publications', 'subscriptions']} includeJobs />
+          <CNPGOperatorBanner namespaces={fleet.rows.map((r) => r.namespace)} className="" />
 
           <div className="flex flex-wrap items-center gap-2">
             <div role="tablist" aria-label="Clusters" className="inline-flex rounded-lg bg-theme-elevated p-0.5">
-              {segment('attention', 'Needs attention', fleet.attentionCount)}
-              {segment('all', 'All clusters', total)}
+              {segment('all', 'All clusters', totalText)}
+              {segment('attention', 'Needs attention', attentionText)}
             </div>
             {CNPG_PROBLEM_CATEGORIES.filter((c) => fleet.categoryCounts[c.id] > 0).map((c) => {
               const on = cat === c.id
@@ -181,7 +330,7 @@ export function CNPGOverview({
                   )}
                 >
                   {c.label}
-                  <span className="font-mono">{fleet.categoryCounts[c.id]}</span>
+                  <span className="font-mono">{lowerBound ? '≥' : ''}{fleet.categoryCounts[c.id]}</span>
                 </button>
               )
             })}
@@ -198,36 +347,40 @@ export function CNPGOverview({
           </div>
 
           <FilterChips chips={chips} />
+          {storageUnmeasured && (
+            <div className="text-xs text-theme-text-tertiary">
+              Storage: volume usage is not measured for any cluster here ({storageUnmeasured}). Retained WAL and resize state are on each cluster’s Storage tab.
+            </div>
+          )}
 
           <div className="overflow-hidden rounded-xl border border-theme-border bg-theme-surface shadow-theme-sm">
             <div className={TABLE_WRAP}>
-              <table className="w-full min-w-[980px] table-fixed">
+              {/* Fits an ~850px content area (a 1280px window) without scrolling: the
+                  two fixed columns take 16rem and the percentages stay under the rest. */}
+              <table className="w-full min-w-[780px] table-fixed">
                 <colgroup>
                   <col className="w-[22%]" />
-                  <col className="w-[7%]" />
+                  <col className="w-[18%]" />
+                  <col className="w-[13%]" />
                   <col className="w-[15%]" />
-                  <col className="w-[15%]" />
-                  <col className="w-[12%]" />
-                  <col className="w-[5%]" />
-                  <col className="w-[14%]" />
-                  <col className="w-[10%]" />
+                  <col />
+                  <col className="w-[7.5rem]" />
                 </colgroup>
                 <thead className={TABLE_HEAD}>
                   <tr>
-                    <th className={TH}>Cluster</th>
-                    <th className={TH}>Ready</th>
-                    <th className={TH}>Replication</th>
-                    <th className={TH}>Protection</th>
-                    <th className={TH}>Declarations</th>
-                    <th className={TH}>PG</th>
-                    <th className={TH}>Needs attention</th>
-                    <th className={TH}><span className="sr-only">Actions</span></th>
+                    <th className={TH_WRAP}>Cluster</th>
+                    <th className={TH_WRAP}>Replication</th>
+                    <th className={TH_WRAP}>Storage</th>
+                    <th className={TH_WRAP}>Backups</th>
+                    <th className={TH_WRAP}>Needs attention</th>
+                    <th className={TH_WRAP}><span className="sr-only">Actions</span></th>
                   </tr>
                 </thead>
                 <tbody className={TBODY}>
                   {rows.map((row) => {
                     const ref: SelectedResource = { kind: 'clusters', group: 'postgresql.cnpg.io', namespace: row.namespace, name: row.name }
-                    const active = sameResource(inspected, ref)
+                    const active = sameSelectedResource(inspected, ref)
+                    const operation = latestCNPGOperation(operations, { apiBase, context, namespace: row.namespace, name: row.name, uid: row.cluster.metadata.uid })
                     return (
                       <tr
                         key={row.key}
@@ -236,23 +389,44 @@ export function CNPGOverview({
                         aria-selected={active}
                       >
                         <td className={TD}>
-                          <div className="flex items-center gap-2 min-w-0">
-                            <StatusDot tone={row.attention ? (row.problems.some((p) => p.severity === 'critical') ? 'unhealthy' : 'degraded') : row.controllerStatus.level} />
-                            <Tooltip content={row.name} wrapperClassName="min-w-0"><span className="block truncate font-medium">{row.name}</span></Tooltip>
+                          <div className="flex min-w-0 items-start gap-2">
+                            <span className="mt-1.5 shrink-0"><RowStatusDot row={row} /></span>
+                            <div className="min-w-0">
+                              <BreakText value={row.name} after="-" className="font-medium" />
+                              {operation && <CNPGFleetOperation op={operation} onFollow={() => navigate(cnpgClusterFullPath(row.namespace, row.name, context))} />}
+                              <div className="flex min-w-0 items-baseline text-xs text-theme-text-tertiary">
+                                <Tooltip content={`Namespace ${row.namespace}`} wrapperClassName="min-w-0">
+                                  <span className="block truncate">{row.namespace}</span>
+                                </Tooltip>
+                                {row.pgVersion && (
+                                  <span className="shrink-0 whitespace-pre">
+                                    {' · '}
+                                    <Tooltip content="PostgreSQL version"><span>PG {row.pgVersion}</span></Tooltip>
+                                  </span>
+                                )}
+                              </div>
+                              <div className="mt-0.5 font-mono text-xs">
+                                <ReadyCell row={row} />
+                              </div>
+                            </div>
                           </div>
-                          <div className="truncate pl-4 text-xs text-theme-text-tertiary">{row.namespace}</div>
-                          <div className="pl-4"><InstancePills row={row} /></div>
-                        </td>
-                        <td className={clsx(TD, 'font-mono')}>
-                          {row.instances.ready ?? '–'}/{row.instances.desired ?? '–'}
                         </td>
                         <td className={TD}><FactValue fact={row.replication} /></td>
+                        <td className={TD}><StorageCell row={row} quiet={!!storageUnmeasured} /></td>
                         <td className={TD}><FactValue fact={row.protection.summary} /></td>
-                        <td className={TD}><FactValue fact={row.declarations.summary} /></td>
-                        <td className={clsx(TD, 'font-mono')}>{row.pgVersion ?? '—'}</td>
-                        <td className={TD}><AttentionCell row={row} /></td>
+                        <td className={clsx(TD, 'overflow-hidden')}>
+                          <AttentionCell
+                            row={row}
+                            onOpenAll={() =>
+                              navigate(cnpgClusterProblemsPath(row.namespace, row.name, connection.context || undefined), {
+                                state: { returnLabel: currentPageLabel(), returnCtx: connection.context },
+                              })
+                            }
+                          />
+                        </td>
                         <td className={clsx(TD, 'text-right')}>
-                          <div className="flex items-center justify-end gap-1">
+                          <div className="flex items-center justify-end gap-0.5">
+                            <Tooltip content="Logs from every instance">
                             <button
                               type="button"
                               aria-label={`Logs from every instance of ${row.name}`}
@@ -264,10 +438,11 @@ export function CNPGOverview({
                                   state: { returnLabel: currentPageLabel(), returnCtx: connection.context },
                                 })
                               }}
-                              className="inline-flex items-center gap-1 whitespace-nowrap rounded-md px-2 py-1 text-xs font-medium text-theme-text-secondary hover:bg-theme-hover hover:text-theme-text-primary"
+                              className="inline-flex items-center rounded-md p-1.5 text-theme-text-secondary hover:bg-theme-hover hover:text-theme-text-primary"
                             >
-                              <FileText className="h-3 w-3" /> Logs
+                              <FileText className="h-3.5 w-3.5" />
                             </button>
+                            </Tooltip>
                             <button
                               type="button"
                               aria-label={`Open ${row.name}`}
@@ -292,7 +467,7 @@ export function CNPGOverview({
             {rows.length === 0 && (
               <div className="px-4 py-6 text-sm text-theme-text-tertiary">
                 {filter === 'attention' && !cat && !q
-                  ? 'No clusters need attention.'
+                  ? lowerBound ? 'No attention findings in the readable data; other data was not read.' : 'No clusters need attention.'
                   : 'No clusters match these filters.'}{' '}
                 <button type="button" onClick={() => onSetParams({ filter: 'all', cat: null, q: null })} className="font-medium text-accent-text hover:underline">
                   Show all clusters

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

@@ -0,0 +1,51 @@
+import { renderToStaticMarkup } from 'react-dom/server'
+import { expect, it } from 'vitest'
+import { toneTextClass } from '@skyhook-io/k8s-ui'
+import { ParameterRow, cnpgParameterBoolean } from './CNPGParametersInEffect'
+import { cnpgParametersView } from './inspectModel'
+import type { CNPGParametersResponse } from '../../api/cnpg-inspect'
+
+function render(values: string[]) {
+  const reports = values.map((value, i) => ({ pod: `orders-${i + 1}`, value }))
+  const response: CNPGParametersResponse = { cluster: { name: 'orders', namespace: 'db', uid: 'u' }, sampledAt: '', permission: { exec: 'allowed' }, state: 'ok', declared: [{ name: 'max_connections', value: '100' }], instances: reports.map(({ pod, value }) => ({ pod, role: 'replica', state: 'ok', settings: [{ name: 'max_connections', value, source: 'configuration file', context: 'postmaster', pendingRestart: false, setByClient: false }] })) }
+  const row = cnpgParametersView(response).rows[0]
+  return renderToStaticMarkup(<table><tbody><ParameterRow row={row} reports={reports} readPods={reports.map((p) => p.pod)} unreadText="Not reported" /></tbody></table>)
+}
+it('renders an agreed value once without repeating the summary read set', () => {
+  const html = render(['100', '100', '100'])
+  expect(html).toContain('font-mono text-theme-text-primary">100</span>')
+  expect(html).not.toContain('on orders-1, orders-2, orders-3')
+  expect(html).not.toContain('orders-1: 100')
+})
+it('retains the per-instance list when reported values differ', () => {
+  const html = render(['100', '200'])
+  expect(html).toContain('orders-1: 100 · orders-2: 200')
+  expect(html).toContain(toneTextClass('degraded'))
+})
+
+it.each(['on', 'ON', 'true', 't', 'yes', 'y', '1'])('accepts PostgreSQL true spelling %s', (value) => expect(cnpgParameterBoolean(value)).toBe(true))
+it.each(['off', 'false', 'f', 'no', 'n', '0'])('accepts PostgreSQL false spelling %s', (value) => expect(cnpgParameterBoolean(value)).toBe(false))
+it.each(['o', '', 'truth', '10', 'ofx'])('does not treat %s as a boolean', (value) => expect(cnpgParameterBoolean(value)).toBeUndefined())
+it('hints equivalent booleans without inferring drift from different text', () => {
+  const row = { name: 'log_truncate_on_rotation', declared: 'false', value: 'off', takesEffect: 'reload', setByClient: false, pendingRestart: [], unreported: [] }
+  const renderRow = () => renderToStaticMarkup(<table><tbody><ParameterRow row={row} reports={[{ pod: 'orders-1', value: row.value }]} readPods={['orders-1']} unreadText="Not reported" /></tbody></table>)
+  expect(renderRow()).toContain('same as declared')
+  row.declared = 'off'
+  expect(renderRow()).not.toContain('same as declared')
+  row.declared = 'false'
+  row.value = 'on'
+  expect(renderRow()).not.toContain('same as declared')
+  expect(renderRow()).not.toContain('mismatch')
+  row.declared = '0'; row.value = '0'
+  expect(renderRow()).not.toContain('same as declared')
+  row.declared = '1024MB'; row.value = '1GB'
+  expect(renderRow()).not.toContain('mismatch')
+})
+it('names reporting subsets and restart exceptions in the row', () => {
+  const row = { name: 'work_mem', declared: '8MB', value: '8MB', takesEffect: 'reload', setByClient: false, pendingRestart: [], unreported: ['orders-2'] }
+  const html = renderToStaticMarkup(<table><tbody><ParameterRow row={row} reports={[{ pod: 'orders-1', value: '8MB' }]} readPods={['orders-1', 'orders-2']} unreadText="Not reported" /></tbody></table>)
+  expect(html).toContain('on orders-1')
+  expect(html).toContain('Not reported by orders-2')
+  row.unreported = []; row.pendingRestart = ['orders-1'] as never[]
+  expect(renderToStaticMarkup(<table><tbody><ParameterRow row={row} reports={[{ pod: 'orders-1', value: '8MB' }]} readPods={['orders-1']} unreadText="Not reported" /></tbody></table>)).toContain('Restart pending on orders-1')
+})

package/src/components/cnpg/CNPGParametersInEffect.tsx

@@ -0,0 +1,120 @@
+import { SectionHeading, formatAge, formatGrant, toneTextClass } from '@skyhook-io/k8s-ui'
+import { useCNPGParameters } from '../../api/cnpg-inspect'
+import { cnpgParametersView, type CNPGParameterRow } from './inspectModel'
+import { RefreshFailedNotice } from '../workspace/layout'
+
+/**
+ * The parameters the Cluster declares beside what each instance's PostgreSQL
+ * reports: whether a change took effect, and whether it waits for a restart.
+ * Observation only — changes go through the Cluster spec.
+ */
+export function CNPGParametersInEffect({ namespace, name, declared, scope }: { namespace: string; name: string; declared: Record<string, string>; scope?: { declaredInstances?: number; expectedInstances?: string[] } }) {
+  const q = useCNPGParameters(namespace, name)
+  const d = q.data
+  const declarations = Object.entries(declared).sort(([a], [b]) => a.localeCompare(b)).map(([name, value]) => ({ name, value }))
+  const view = cnpgParametersView(d ?? {
+    cluster: { namespace, name, uid: '' }, sampledAt: '', permission: { exec: 'unknown' }, state: 'error', instances: [],
+    declared: declarations,
+  }, declarations, scope)
+  const unavailable = !d && q.error instanceof Error
+    ? `Not read: ${q.error.message}`
+    : !d ? (q.isLoading ? 'Not read: reading each instance…' : 'Not read: instance values unavailable')
+      : d.state === 'denied' ? `Reading instance values needs ${formatGrant(d.permission.grant) ?? `create pods/exec in namespace ${namespace}`}.`
+        : d.error ? `Not read: ${d.error}` : null
+  const content = (
+    <>
+      <RefreshFailedNotice queries={[q]} className="mb-2" />
+      {unavailable && <p className="mb-2 text-sm text-theme-text-tertiary">{unavailable}</p>}
+      {d && !unavailable && declarations.length > 0 && <p className={`mb-2 text-sm ${toneTextClass(view.summary.tone)}`}>{view.summary.text}</p>}
+      {declarations.length === 0 && <p className="text-sm text-theme-text-tertiary">No parameters declared in spec.postgresql.parameters.</p>}
+      {declarations.length > 0 && (
+      <div className="overflow-x-auto">
+        <table className="w-full text-sm">
+          <thead>
+            <tr className="border-b border-theme-border text-left text-[11px] uppercase tracking-wide text-theme-text-tertiary">
+              <th className="py-1.5 pr-4 font-medium">Parameter</th>
+              <th className="py-1.5 pr-4 font-medium">Declared</th>
+              <th className="py-1.5 pr-4 font-medium">Reported by instance</th>
+              <th className="py-1.5 font-medium">A change applies on</th>
+            </tr>
+          </thead>
+          <tbody>
+            {view.rows.map((r) => view.read.length === 0 ? (
+              <tr key={r.name} className="border-b border-theme-border/60 align-top last:border-0">
+                <td className="py-1.5 pr-4 font-mono text-xs text-theme-text-primary">{r.name}</td>
+                <td className="py-1.5 pr-4 font-mono text-xs text-theme-text-secondary">{r.declared === '' ? <span className="text-theme-text-tertiary">(empty)</span> : r.declared}</td>
+                <td /><td />
+              </tr>
+            ) : (
+              <ParameterRow key={r.name} row={r} readPods={view.read.map((i) => i.pod)}
+                unreadText={d?.skipped?.includes(r.name) ? 'Not read: not a parameter name'
+                  : !d ? (q.isLoading ? 'Not read: loading' : 'Not read: request failed')
+                    : d.state === 'denied' ? 'Not read: pods/exec denied'
+                      : !d.declared.some((p) => p.name.toLowerCase() === r.name.toLowerCase()) ? 'Not sampled'
+                        : view.read.length === 0 ? (d.instances.length === 0 ? 'Not read: no instance Pod' : 'Not read: no instance answered')
+                          : 'Not reported'}
+                reports={view.read.flatMap((i) => {
+                const setting = i.settings!.find((s) => s.name.toLowerCase() === r.name.toLowerCase())
+                return setting?.value != null ? [{ pod: i.pod, value: setting.value }] : []
+              })} />
+            ))}
+          </tbody>
+        </table>
+      </div>
+      )}
+      {d && view.read.length > 0 && <p className="mt-2 text-[11.5px] text-theme-text-tertiary">
+        Read {d.sampledAt ? `${formatAge(d.sampledAt)} ago` : 'just now'} from a new Radar session on each of {view.read.map((i) => i.pod).join(', ')}. A role, database or
+        client can set its own value for a parameter a session can change. PostgreSQL normalizes units and boolean spellings (such as false to off), so different text alone does not mean a different value.
+      </p>}
+      {d?.skipped && d.skipped.length > 0 && <p className="mt-1 text-xs text-theme-text-tertiary">Not read (not a parameter name): {d.skipped.join(', ')}.</p>}
+      {!!d?.omitted && <p className="mt-1 text-xs text-theme-text-tertiary">{d.omitted} declaration{d.omitted === 1 ? ' was' : 's were'} not sampled.</p>}
+      {view.unread.length > 0 && (
+        <p className={`mt-1 text-xs ${toneTextClass('unknown')}`}>
+          Not read on {view.unread.map((i) => `${i.pod} (${i.error ?? i.state})`).join(', ')}.
+        </p>
+      )}
+    </>
+  )
+  return <><SectionHeading hint="spec.postgresql.parameters">PostgreSQL parameters</SectionHeading>{content}</>
+}
+
+export function ParameterRow({ row, reports, unreadText, readPods }: { row: CNPGParameterRow; reports: { pod: string; value: string }[]; unreadText: string; readPods: string[] }) {
+  const namesNeeded = !!row.perInstance || row.pendingRestart.length > 0 || row.unreported.length > 0 || reports.length !== readPods.length || reports.some((p) => !readPods.includes(p.pod))
+  const declaredBoolean = cnpgParameterBoolean(row.declared)
+  const sameBoolean = declaredBoolean !== undefined && reports.length > 0 && reports.some((p) => p.value !== row.declared) && reports.every((p) => ['on', 'off'].includes(p.value.trim().toLowerCase()) && cnpgParameterBoolean(p.value) === declaredBoolean)
+
+  return (
+    <tr className="border-b border-theme-border/60 align-top last:border-0">
+      <td className="py-1.5 pr-4 font-mono text-xs text-theme-text-primary">{row.name}</td>
+      <td className="py-1.5 pr-4 font-mono text-xs text-theme-text-secondary">{row.declared === '' ? <span className="text-theme-text-tertiary">(empty)</span> : row.declared}</td>
+      <td className="py-1.5 pr-4 text-xs">
+        {reports.length > 0 ? (
+          row.perInstance
+            ? <span className={toneTextClass('degraded')}>{reports.map((p) => `${p.pod}: ${p.value === '' ? '(empty)' : p.value}`).join(' · ')}</span>
+            : <><span className="font-mono text-theme-text-primary">{row.value === '' ? '(empty)' : row.value}</span>{namesNeeded && <div className="text-theme-text-tertiary">on {reports.map((p) => p.pod).join(', ')}</div>}</>
+        ) : row.setByClient ? (
+          <span className="text-theme-text-tertiary">Set by each connection, so not readable here</span>
+        ) : (
+          <span className="text-theme-text-tertiary">{unreadText}</span>
+        )}
+        {sameBoolean && <span className="ml-1.5 text-theme-text-tertiary">same as declared</span>}
+        {row.source && row.source !== 'configuration file' && !row.setByClient && <span className="ml-1.5 text-theme-text-tertiary">source: {row.source}</span>}
+        {row.pendingRestart.length > 0 && <div className={toneTextClass('degraded')}>Restart pending on {row.pendingRestart.join(', ')}</div>}
+        {row.unreported.length > 0 && unreadText === 'Not reported' && (
+          <div className="text-theme-text-tertiary">Not reported by {row.unreported.join(', ')}</div>
+        )}
+      </td>
+      <td className="py-1.5 text-xs text-theme-text-secondary">{row.takesEffect}</td>
+    </tr>
+  )
+}
+
+export function cnpgParameterBoolean(value: string): boolean | undefined {
+  const normalized = value.trim().toLowerCase()
+  if (normalized === '1') return true
+  if (normalized === '0') return false
+  if (!normalized) return undefined
+  const matches = ['on', 'off', 'true', 'false', 'yes', 'no'].filter((spelling) => spelling.startsWith(normalized))
+  if (matches.length !== 1) return undefined
+  return ['on', 'true', 'yes'].includes(matches[0])
+}