@skyhook-io/radar-app 1.16.2 → 1.16.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/radar-app",
-  "version": "1.16.2",
+  "version": "1.16.3",
   "description": "Radar's full web UI as a reusable React component. Used by Radar's own binary and by external consumers like Radar Cloud.",
   "repository": {
     "type": "git",
@@ -36,13 +36,13 @@
     "diff": "^9.0.0",
     "monaco-editor": "0.55.1",
     "react-markdown": "^10.1.0",
-    "react-virtuoso": "^4.18.13",
+    "react-virtuoso": "^4.18.16",
     "remark-gfm": "^4.0.1",
     "shiki": "^4.4.2",
     "yaml": "^2.9.0"
   },
   "peerDependencies": {
-    "@skyhook-io/k8s-ui": ">=1.16.1",
+    "@skyhook-io/k8s-ui": ">=1.16.3",
     "@tanstack/react-query": ">=5",
     "@xyflow/react": ">=12.0.0",
     "clsx": ">=2",
@@ -73,14 +73,14 @@
     "globals": "^17.11.0",
     "lucide-react": "^1.48.0",
     "postcss": "^8.5.28",
-    "prettier": "^3.9.8",
+    "prettier": "^3.9.9",
     "react": "^19.3.0",
     "react-dom": "^19.3.0",
     "react-router-dom": "^7.18.4",
     "tailwind-merge": "^3.7.0",
     "tailwindcss": "^4.3.3",
     "typescript": "^6.0.2",
-    "typescript-eslint": "^8.70.0",
+    "typescript-eslint": "^8.71.0",
     "vite": "^8.3.1"
   },
   "sideEffects": [

package/src/App.tsx

@@ -38,6 +38,9 @@ import { CloudFunnelButton } from './components/CloudFunnelButton'
 import { useNavCustomization } from './context/NavCustomization'
 import type { FleetTakeoverTarget } from './context/NavCustomization'
 import { PrimaryNavRail } from './components/nav/PrimaryNavRail'
+import { CNPGView } from './components/cnpg/CNPGView'
+import { CNPG_SCREENS, cnpgDetailKindFor, cnpgDetailPath, parseCNPGRoute } from './components/cnpg/routes'
+import { currentPageLabel } from './components/cnpg/paths'
 import { navigateFromPrimaryRail } from './components/nav/navigation'
 import { useNavRailPinned } from './hooks/useNavRailPinned'
 import { useMediaQuery } from './hooks/useMediaQuery'
@@ -45,6 +48,7 @@ import { ContextSwitchProvider, useContextSwitch } from './context/ContextSwitch
 import { ConnectionProvider, useConnection } from './context/ConnectionContext'
 import { ConnectionErrorView } from './components/ConnectionErrorView'
 import { SyncProgressPanel } from './components/SyncProgressPanel'
+import { NoClusterAccessBanner } from './components/NoClusterAccessBanner'
 import { CapabilitiesProvider, useCapabilitiesContext } from './contexts/CapabilitiesContext'
 import { RadarUpgradeProvider } from './context/RadarUpgrade'
 import { UserMenu } from './components/UserMenu'
@@ -124,7 +128,7 @@ const FLEET_MODE_KINDS = new Set<NodeKind>([
 
 // Convert API resource name back to topology node ID prefix
 // Extended MainView type that includes traffic and cost
-type ExtendedMainView = MainView | 'traffic' | 'cost' | 'capacity' | 'workload' | 'checks' | 'gitops' | 'compare' | 'helmCompare' | 'issues' | 'applications' | 'investigations'
+type ExtendedMainView = MainView | 'traffic' | 'cost' | 'capacity' | 'cnpg' | 'workload' | 'checks' | 'gitops' | 'compare' | 'helmCompare' | 'issues' | 'applications' | 'investigations'
 
 // Extract view from URL path
 function getViewFromPath(pathname: string): ExtendedMainView {
@@ -138,6 +142,7 @@ function getViewFromPath(pathname: string): ExtendedMainView {
   if (path === 'traffic') return 'traffic'
   if (path === 'cost') return 'cost'
   if (path === 'capacity') return 'capacity'
+  if (path === 'cnpg') return 'cnpg'
   if (path === 'workload') return 'workload'
   if (path === 'checks' || path === 'audit') return 'checks'  // /audit = legacy → checks
   if (path === 'gitops') return 'gitops'
@@ -165,7 +170,7 @@ function usageView(pathname: string, view: ExtendedMainView, upgrade: boolean):
 const CRASH_LABELS: Record<ExtendedMainView, string> = {
   home: 'Home', topology: 'Topology', resources: 'Resources', timeline: 'Timeline',
   issues: 'Issues', helm: 'Helm', helmCompare: 'HelmCompare', traffic: 'Traffic',
-  cost: 'Cost', capacity: 'Capacity', checks: 'Checks', gitops: 'GitOps',
+  cost: 'Cost', capacity: 'Capacity', cnpg: 'CloudNativePG', checks: 'Checks', gitops: 'GitOps',
   applications: 'Applications', workload: 'Workload', compare: 'Compare',
   investigations: 'Investigations',
 }
@@ -282,6 +287,12 @@ function radarPageTitle(pathname: string, search = '', apiResources?: APIResourc
     if (pathSegments[1] === 'activity') return 'Capacity Activity'
   }
 
+  if (view === 'cnpg') {
+    const route = parseCNPGRoute(pathname)
+    if (route.detail) return route.detail.name
+    const screen = CNPG_SCREENS.find((s) => s.id === route.screen)
+    return `CloudNativePG ${screen?.label ?? 'Overview'}`
+  }
   if (view === 'home') return 'Overview'
   // Every other view's label is its id capitalized — getViewFromPath has already
   // normalized aliases (e.g. /audit → 'checks'), so no lookup table is needed.
@@ -875,7 +886,7 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix, onClusterL
     gitops: 'g o', checks: 'g u', cost: 'g c', capacity: 'g p',
     // Non-rail views (reachable via deep links / actions, not the rail) get no
     // dedicated mnemonic — listed for exhaustiveness so the type stays total.
-    workload: '', compare: '', helmCompare: '', investigations: '',
+    workload: '', compare: '', helmCompare: '', investigations: '', cnpg: '',
   }
   const views = Object.keys(VIEW_SHORTCUT_KEYS).filter(
     (v): v is ExtendedMainView => VIEW_SHORTCUT_KEYS[v as ExtendedMainView] !== '',
@@ -1064,6 +1075,7 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix, onClusterL
     secretsChanged: boolean
     timer: number | null
   }>({ changedKinds: new Set(), structuralKinds: new Set(), environmentNamespaces: new Set(), environmentPods: new Map(), secretsChanged: false, timer: null })
+  const cnpgInvalidationPendingRef = useRef(false)
   const slowInvalidationRef = useRef<{
     updatedKinds: Set<string>    // update-only churn → throttled list + dashboard
     timer: number | null
@@ -1095,6 +1107,8 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix, onClusterL
     const structural = event.operation === 'add' || event.operation === 'delete'
     const applicationWorkload = ['deployments', 'statefulsets', 'daemonsets', 'rollouts'].includes(kind)
 
+    if (event.group?.endsWith('.cnpg.io')) cnpgInvalidationPendingRef.current = true
+
     const fast = fastInvalidationRef.current
     fast.changedKinds.add(kind)
     if (structural) fast.structuralKinds.add(kind)
@@ -1138,6 +1152,10 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix, onClusterL
         // GitOps view is mounted (Phase 2 will make this relevance-aware).
         queryClient.invalidateQueries({ queryKey: ['gitops-tree'] })
         queryClient.invalidateQueries({ queryKey: ['gitops-insights'] })
+        if (cnpgInvalidationPendingRef.current) {
+          cnpgInvalidationPendingRef.current = false
+          queryClient.invalidateQueries({ queryKey: ['cnpg', 'workspace'] })
+        }
         fastInvalidationRef.current = { changedKinds: new Set(), structuralKinds: new Set(), environmentNamespaces: new Set(), environmentPods: new Map(), secretsChanged: false, timer: null }
       }, 3000)
     }
@@ -1223,6 +1241,10 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix, onClusterL
         const nextParams = new URLSearchParams()
         const diagnoseRun = new URLSearchParams(location.search).get('ai-run')
         if (diagnoseRun) nextParams.set('ai-run', diagnoseRun)
+        // A CNPG detail keeps the context it belongs to, so it can say it is
+        // not in the new one instead of loading a same-named object.
+        const pinnedCtx = new URLSearchParams(location.search).get('ctx')
+        if (pinnedCtx && location.pathname.startsWith('/cnpg/')) nextParams.set('ctx', pinnedCtx)
         navigate(
           { pathname: location.pathname, search: nextParams.toString() },
           { replace: true, state: location.state },
@@ -1749,7 +1771,7 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix, onClusterL
     setVisibleKinds(new Set())
   }, [])
 
-  const navActiveView = mainView === 'helmCompare' ? 'helm' : mainView
+  const navActiveView = mainView === 'helmCompare' ? 'helm' : mainView === 'cnpg' ? 'resources' : mainView
 
   return (
     <PortForwardProvider>
@@ -2010,6 +2032,7 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix, onClusterL
         </PaneLoader>
       )}
 
+      {contentReady && <NoClusterAccessBanner />}
       {/* Main content - only show when connected and authenticated */}
       {/* inert while a fullscreen detail overlay covers the views — keeps the
           retained background list out of the focus order + a11y tree (the visual
@@ -2302,6 +2325,16 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix, onClusterL
           <CapacityView onOpenResource={navigateToResource} />
         )}
 
+        {!viewsSyncGated && mainView === 'cnpg' && (
+          <CNPGView
+            namespaces={namespaces}
+            selectedResource={routeSelectedResource}
+            onOpenResource={navigateToResource}
+            onCloseResource={() => setSelectedResource(null)}
+            onClearNamespaces={clearAllNamespaces}
+          />
+        )}
+
         {/* Takeover splash. When the host claims the current view via
             fleetTakeoverHref, the redirect effect above is mid-flight — render a
             brief splash instead of the inline view (which would flash + fire its
@@ -2369,7 +2402,15 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix, onClusterL
           onClose={closeDrawer}
           onNavigate={(res) => navigateToResource(res)}
           canCollapseToDrawer={!isMobile}
-          onExpand={(_res, opts) => {
+          onExpand={(res, opts) => {
+            const cnpgPlural = cnpgDetailKindFor(res.kind, res.group)
+            if (cnpgPlural) {
+              navigate(
+                cnpgDetailPath({ plural: cnpgPlural, namespace: res.namespace, name: res.name }, connection.context || undefined, opts?.yaml ? 'yaml' : undefined),
+                { state: { returnLabel: currentPageLabel(), returnCtx: connection.context } },
+              )
+              return
+            }
             // Grow the peek into a fullscreen overlay (?full=1, pushed so Back
             // collapses) over whatever view is underneath — list, topology graph,
             // GitOps, Applications — which stays mounted. Carry the YAML tab when

package/src/api/client.ts

@@ -22,7 +22,7 @@ import type {
 } from '@skyhook-io/k8s-ui'
 import { useQuery, useMutation, useQueryClient, skipToken } from '@tanstack/react-query'
 import { showApiError, showApiSuccess } from '../components/ui/Toast'
-import { useCanHelmWrite } from '../contexts/CapabilitiesContext'
+import { useIsAuthEnabled, useNamespacedCapabilities } from '../contexts/CapabilitiesContext'
 import type {
   Topology,
   ClusterInfo,
@@ -2256,6 +2256,9 @@ export interface AuthMe {
    *  When false, logout clears Radar's cookie but the proxy may re-auth
    *  the same user on the next request. */
   proxyLogoutConfigured?: boolean;
+  /** Connected and the user's access is known: true when their RBAC allows
+   *  reading no namespace at all. Absent when access couldn't be determined. */
+  noNamespaceAccess?: boolean;
 }
 
 export function useAuthMe() {
@@ -2266,6 +2269,24 @@ export function useAuthMe() {
   });
 }
 
+/**
+ * useNamespaceAccess asks the server to run namespace discovery for the caller,
+ * so the answer never depends on whether the permission cache happens to hold
+ * an entry. A user with no access is waiting on an admin; re-check every
+ * minute so the banner clears once a binding lands.
+ */
+export function useNamespaceAccess(enabled: boolean) {
+  return useQuery<AuthMe>({
+    queryKey: ["namespace-access"],
+    queryFn: () => fetchJSON("/auth/me?check=namespaces"),
+    enabled,
+    staleTime: 60000,
+    // Stop only on an explicit false: an absent field means discovery couldn't
+    // answer this time, which says nothing about the user's access.
+    refetchInterval: (query) => (query.state.data?.noNamespaceAccess === false ? false : 60000),
+  });
+}
+
 // Tier ordering for Cloud-role gates. Mirrors radar OSS pkg/auth
 // CloudRole.AtLeast — the frontend must agree with the backend on what
 // "member-or-higher" means; otherwise we'd hide a button the
@@ -2282,16 +2303,12 @@ const CLOUD_ROLE_RANK: Record<string, number> = {
  * present (OSS, OIDC, no role group, OR auth/me is still loading),
  * `canAtLeast` returns true — the gate is strictly additive for
  * Cloud-attributed users, mirroring the backend's `requireCloudRole`
- * semantics. Use for passive content gating (panels, sections); use
- * `useCanHelmAct` (or similar) for *click-prone* surfaces where you
- * need fail-closed behavior during the auth/me round-trip to prevent
- * a viewer from clicking through during the loading window.
+ * semantics. It gates Radar's own features (settings, integrations), never
+ * operations that run as the user, which Kubernetes RBAC decides.
  *
- * Why optimistic during load: the gated empty state ("Your role can't
- * view…") rendered briefly to OSS / kubectl-plugin users before
- * auth/me resolves is a worse regression than a Cloud viewer seeing
- * a content tab populate for a tick before being gated out. Click-
- * prevention belongs in the action-button hook, not here.
+ * Why optimistic during load: a gated empty state rendered briefly to
+ * OSS / kubectl-plugin users before auth/me resolves is a worse regression
+ * than a Cloud viewer seeing content for a tick before being gated out.
  */
 export function useCloudRole() {
   const { data, isLoading } = useAuthMe();
@@ -2308,42 +2325,35 @@ export function useCloudRole() {
 }
 
 /**
- * useCanHelmAct combines the K8s capability gate (rbac.helm=true) and
- * the Cloud role gate (member+) into a single answer for any Helm
- * write or sensitive-read button. Returns { allowed, reason } so the
- * tooltip can explain which gate failed.
- *
- * Cloud role check runs FIRST so the message is actionable for Cloud
- * users — telling them "Helm write permissions required" is wrong if
- * the chart is fine and the actual gate is their viewer role.
+ * useCanHelmAct answers whether Helm write buttons are usable for a release in
+ * `namespace`. With auth on, Helm runs as the signed-in user, so the check is
+ * the user's own Kubernetes RBAC in that namespace (Helm writes each release as
+ * a Secret there); the Cloud role says nothing about cluster access when IdP
+ * groups grant it. Without auth, Helm runs as Radar's ServiceAccount, which
+ * needs the chart's rbac.helm=true.
  */
-export function useCanHelmAct(): { allowed: boolean; reason?: string } {
-  const helmWrite = useCanHelmWrite();
-  const { role, canAtLeast, isLoading } = useCloudRole();
-  // Fail-closed for action buttons during the auth/me round-trip:
-  // a Cloud viewer who clicks during loading would otherwise fire a
-  // real request that gets 403'd. For OSS / kubectl-plugin the
-  // round-trip is sub-ms so this is imperceptible; for Cloud it
-  // prevents the click-through window. Distinct from useCloudRole's
-  // canAtLeast (which is optimistic during loading) because passive
-  // content gates don't have a click-handler to misfire.
-  if (isLoading) {
-    return { allowed: false, reason: "Loading permissions…" };
+export function useCanHelmAct(namespace?: string): { allowed: boolean; reason?: string } {
+  const { canHelmWrite, helmWriteUnknown } = useNamespacedCapabilities(namespace);
+  const authEnabled = useIsAuthEnabled();
+  // Without a namespace answer (still loading, or the check failed) the global
+  // value only says the user can create Secrets somewhere, which would enable
+  // actions the server then refuses.
+  if (authEnabled && helmWriteUnknown) {
+    return { allowed: false, reason: `Couldn't confirm your permissions in ${namespace} yet.` };
   }
-  if (!canAtLeast("member")) {
+  if (canHelmWrite) return { allowed: true };
+  if (authEnabled) {
     return {
       allowed: false,
-      reason: `Your Radar Cloud role (${role ?? "unknown"}) cannot run Helm operations. Ask a member or owner.`,
+      reason: namespace
+        ? `Your Kubernetes permissions don't allow managing Helm releases in ${namespace} (creating Secrets there).`
+        : "Your Kubernetes permissions don't allow managing Helm releases.",
     };
   }
-  if (!helmWrite) {
-    return {
-      allowed: false,
-      reason:
-        "Helm write permissions required. Set rbac.helm=true in the Radar Helm chart values.",
-    };
-  }
-  return { allowed: true };
+  return {
+    allowed: false,
+    reason: "Helm write permissions required. Set rbac.helm=true in the Radar Helm chart values.",
+  };
 }
 
 // Namespaces
@@ -5457,14 +5467,10 @@ export function useHelmRelease(
 }
 
 // Get manifest for a Helm release (optionally at a specific revision).
-// `enabled` lets callers skip the query when the user's Cloud role
-// would 403 the read — saves a round-trip and avoids a transient
-// "error" state that the role-gated empty panel doesn't need.
 export function useHelmManifest(
   namespace: string,
   name: string,
   revision?: number,
-  enabled = true,
 ) {
   const params = revision ? `?revision=${revision}` : "";
   return useQuery<string>({
@@ -5479,12 +5485,12 @@ export function useHelmManifest(
       }
       return response.text();
     },
-    enabled: Boolean(namespace && name && enabled),
+    enabled: Boolean(namespace && name),
     staleTime: 60000, // 1 minute
   });
 }
 
-// Get values for a Helm release. `enabled` see useHelmManifest.
+// Get values for a Helm release.
 export function useHelmValues(
   namespace: string,
   name: string,
@@ -5505,7 +5511,7 @@ export function useHelmValues(
   });
 }
 
-// Get diff between two revisions. `enabled` see useHelmManifest.
+// Get diff between two revisions.
 export function useHelmManifestDiff(
   namespace: string,
   name: string,

package/src/api/cnpg.ts

@@ -0,0 +1,95 @@
+import { useQuery } from '@tanstack/react-query'
+import type { CNPGWorkspaceResponse, TimelineEvent } from '@skyhook-io/k8s-ui'
+import { fetchJSON } from './client'
+
+// /api/cnpg/workspace
+//
+// Every CloudNativePG object the caller may read, with per-kind coverage, the
+// CNPG issues on them and the no-schedule audit finding. One query feeds the
+// workspace screens, the Resources sidebar counts and the composed summaries,
+// so they can never disagree about what they count.
+export function useCNPGWorkspace(namespaces: string[], options?: { enabled?: boolean }) {
+  const ns = [...namespaces].sort().join(',')
+  return useQuery<CNPGWorkspaceResponse>({
+    queryKey: ['cnpg', 'workspace', ns],
+    queryFn: ({ signal }) => fetchJSON<CNPGWorkspaceResponse>(`/cnpg/workspace${ns ? `?namespaces=${encodeURIComponent(ns)}` : ''}`, signal),
+    enabled: options?.enabled ?? true,
+    staleTime: 10_000,
+    refetchInterval: 30_000,
+    placeholderData: (prev) => prev,
+  })
+}
+
+export interface CNPGOperatorCoverage {
+  state: 'full' | 'partial' | 'denied' | 'syncing' | 'error'
+  deniedNamespaces?: string[]
+}
+
+export interface CNPGOperatorComponent {
+  role: 'operator' | 'plugin'
+  pluginName?: string
+  namespace: string
+  deployment: string
+  image?: string
+  version?: string
+  readyReplicas: number | null
+  replicas: number | null
+}
+
+export interface CNPGOperatorConfig {
+  kind: 'ConfigMap' | 'Secret'
+  namespace: string
+  name: string
+  purpose: 'operator' | 'monitoring'
+  exists?: boolean | null
+  readable?: boolean
+  reason?: string
+  data?: Record<string, string>
+}
+
+export interface CNPGOperatorResponse {
+  coverage: { deployments: CNPGOperatorCoverage; services: CNPGOperatorCoverage }
+  components: CNPGOperatorComponent[]
+  config: CNPGOperatorConfig[]
+}
+
+// /api/cnpg/operator
+//
+// Operator and plugin workloads plus where the operator's configuration lives.
+// Deliberately not filtered by the namespace view filter: the operator runs in
+// its own namespace, which users rarely have selected.
+export function useCNPGOperator(options?: { enabled?: boolean }) {
+  return useQuery<CNPGOperatorResponse>({
+    queryKey: ['cnpg', 'operator'],
+    queryFn: ({ signal }) => fetchJSON<CNPGOperatorResponse>('/cnpg/operator', signal),
+    enabled: options?.enabled ?? true,
+    staleTime: 30_000,
+    refetchInterval: 60_000,
+  })
+}
+
+export interface CNPGClusterActivityResponse {
+  events: TimelineEvent[]
+  oldest: string | null
+  attributionSince: string | null
+  truncated: boolean
+}
+
+// /api/cnpg/clusters/{ns}/{name}/activity
+//
+// The Cluster's history together with its instance Pods and every CNPG object
+// attributed to it, including ones since deleted.
+export function useCNPGClusterActivity(namespace: string, name: string, sinceHours = 24) {
+  return useQuery<CNPGClusterActivityResponse>({
+    queryKey: ['cnpg', 'activity', namespace, name, sinceHours],
+    queryFn: ({ signal }) => {
+      const since = new Date(Date.now() - sinceHours * 3600_000).toISOString()
+      return fetchJSON<CNPGClusterActivityResponse>(
+        `/cnpg/clusters/${encodeURIComponent(namespace)}/${encodeURIComponent(name)}/activity?since=${encodeURIComponent(since)}&limit=500`,
+        signal,
+      )
+    },
+    staleTime: 10_000,
+    refetchInterval: 30_000,
+  })
+}

package/src/api/timelineSource.ts

@@ -423,7 +423,7 @@ export async function fetchRetainedDelta(
 // Mirrors the Go store's TimelineEvent.IsManaged (pkg/timeline/types.go):
 // a resource managed by another — owned, or one of the churn kinds. Keep the
 // two predicates in lockstep.
-function isManagedTimelineEvent(e: TimelineEvent): boolean {
+export function isManagedTimelineEvent(e: TimelineEvent): boolean {
   return e.owner != null || e.kind === 'ReplicaSet' || e.kind === 'Pod' || e.kind === 'Event'
 }
 

package/src/components/NoClusterAccessBanner.tsx

@@ -0,0 +1,68 @@
+import { useEffect, useState } from 'react'
+import { ShieldAlert } from 'lucide-react'
+import { AlertBanner, Badge, Collapse, CollapseChevron, useDisclosure } from '@skyhook-io/k8s-ui'
+import { useAuthMe, useNamespaceAccess } from '../api/client'
+
+// Every read is filtered to the user's namespaces, so someone bound to none
+// sees empty lists in every view and reads it as an empty cluster. Stated in
+// terms of the user's own access, not how the cluster is meant to be set up:
+// Radar can't know whether an org intends hub roles or IdP groups here.
+export function NoClusterAccessBanner() {
+  const { data: auth } = useAuthMe()
+  // Mounted once content is ready (and again after a context switch), so the
+  // cluster is connected by the time this asks.
+  const { data } = useNamespaceAccess(Boolean(auth?.authEnabled))
+  // Keep the last definite answer through a check that couldn't decide, so a
+  // transient discovery failure doesn't hide the banner from a user without access.
+  const [me, setMe] = useState<typeof data>()
+  useEffect(() => {
+    if (data && typeof data.noNamespaceAccess === 'boolean') setMe(data)
+  }, [data])
+  const [groupsOpen, setGroupsOpen] = useState(false)
+  const groupsDisclosure = useDisclosure(groupsOpen)
+
+  // The remembered answer only counts for the person signed in now.
+  if (!me?.noNamespaceAccess || me.username !== auth?.username) return null
+
+  const groups = me.groups ?? []
+  return (
+    <div className="px-4 pt-3">
+      <AlertBanner
+        variant="warning"
+        icon={ShieldAlert}
+        title="You can't read any namespace in this cluster"
+        message={
+          <>
+            Radar is connected, but your Kubernetes permissions don't allow reading any namespace, so
+            every view looks empty. Signed in as <span className="font-mono">{me.username}</span>.
+          </>
+        }
+      >
+        {groups.length > 0 && (
+          // ph-no-capture: group IDs name the customer's directory structure.
+          // Radar Cloud embeds this view with session replay on, and its text
+          // mask only catches credential-shaped values. A no-op without PostHog.
+          <div className="ph-no-capture mt-2">
+            <button
+              {...groupsDisclosure.buttonProps}
+              onClick={() => setGroupsOpen((v) => !v)}
+              className="flex items-center gap-1.5 text-xs text-theme-text-secondary hover:text-theme-text-primary transition-colors"
+            >
+              <CollapseChevron open={groupsOpen} className="w-3.5 h-3.5" />
+              Your groups ({groups.length})
+            </button>
+            <Collapse open={groupsOpen} id={groupsDisclosure.panelId}>
+              <div className="mt-2 flex max-h-32 max-w-4xl flex-wrap gap-1.5 overflow-y-auto">
+                {groups.map((g) => (
+                  <Badge key={g} tone="structural" size="sm" className="font-mono">
+                    {g}
+                  </Badge>
+                ))}
+              </div>
+            </Collapse>
+          </div>
+        )}
+      </AlertBanner>
+    </div>
+  )
+}

package/src/components/cnpg/CNPGClusterActivity.tsx

@@ -0,0 +1,49 @@
+import { useState } from 'react'
+import { PaneLoader, TimelineList, formatAge, type NavigateToResource } from '@skyhook-io/k8s-ui'
+import { useCNPGClusterActivity } from '../../api/cnpg'
+import { Notice } from '../capacity/shared'
+import { Segments } from './shared'
+
+const RANGES = [
+  { id: '6', label: '6 h' },
+  { id: '24', label: '24 h' },
+  { id: '168', label: '7 d' },
+] as const
+
+/**
+ * Kubernetes events and changes for the Cluster, its instance Pods and the
+ * CNPG objects attributed to it — including Backups and declarations deleted
+ * since. Attribution of child objects relies on a label Radar records at
+ * ingestion, so history older than that is marked incomplete.
+ */
+export function CNPGClusterActivity({ namespace, name, onNavigate }: { namespace: string; name: string; onNavigate?: NavigateToResource }) {
+  const [hours, setHours] = useState<string>('24')
+  const q = useCNPGClusterActivity(namespace, name, Number(hours))
+
+  return (
+    <div className="flex h-full min-h-0 flex-col gap-3 p-4">
+      <div className="flex flex-wrap items-center gap-3">
+        <Segments label="Range" value={hours} onChange={setHours} options={RANGES.map((r) => ({ id: r.id, label: r.label }))} />
+        <span className="text-xs text-theme-text-tertiary">
+          Kubernetes events and changes for the Cluster, its instances, Backups, Poolers and declarations.
+        </span>
+      </div>
+      <div className="text-xs text-theme-text-tertiary">
+        {q.data?.attributionSince
+          ? `The earliest recorded event linking a Backup, Pooler or declaration to this cluster is ${formatAge(q.data.attributionSince)} old. Deleted child objects from before Radar recorded that link are not shown.`
+          : 'Radar has not recorded any Backup, Pooler or declaration events linked to this cluster yet, so deleted child objects may be missing.'}
+        {' '}Events for kinds you cannot list are omitted.
+      </div>
+      {q.data?.truncated && <Notice>Showing the most recent events only; narrow the range to see all of them.</Notice>}
+      {q.error && !q.data ? (
+        <Notice>Activity could not be loaded: {q.error instanceof Error ? q.error.message : 'unknown error'}</Notice>
+      ) : !q.data ? (
+        <PaneLoader label="Loading activity…" className="h-40" />
+      ) : (
+        <div className="min-h-0 flex-1">
+          <TimelineList events={q.data.events} isLoading={q.isFetching && !q.data} onResourceClick={onNavigate} compact hideRangeSelector />
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/cnpg/CNPGClusterLogs.tsx

@@ -0,0 +1,62 @@
+import { useCallback } from 'react'
+import { useSearchParams } from 'react-router-dom'
+import { WorkloadLogsViewer, type WorkloadLogsFetchParams, type WorkloadLogsResult } from '@skyhook-io/k8s-ui'
+import { fetchJSON } from '../../api/client'
+import { getApiBase, getCredentialsMode } from '../../api/config'
+import { useDesktopDownload } from '../../hooks/useDesktopDownload'
+import { useTheme } from '../../context/ThemeContext'
+
+function logsPath(namespace: string, name: string) {
+  return `/cnpg/clusters/${encodeURIComponent(namespace)}/${encodeURIComponent(name)}/logs`
+}
+
+function query(params: WorkloadLogsFetchParams, tailDefault?: number) {
+  const q = new URLSearchParams()
+  if (params.container) q.set('container', params.container)
+  const tail = params.tailLines ?? tailDefault
+  if (tail) q.set('tailLines', String(tail))
+  if (params.sinceSeconds) q.set('sinceSeconds', String(params.sinceSeconds))
+  const s = q.toString()
+  return s ? `?${s}` : ''
+}
+
+/**
+ * Logs merged from every instance Pod of a CloudNativePG Cluster. `?pod=`
+ * preselects one instance (the fleet's "Logs" action and "Open instance logs").
+ */
+export function CNPGClusterLogs({ namespace, name }: { namespace: string; name: string }) {
+  const [searchParams] = useSearchParams()
+  const pod = searchParams.get('pod')
+  const desktopDownload = useDesktopDownload()
+  const { theme } = useTheme()
+
+  const fetchAll = useCallback(
+    (params: WorkloadLogsFetchParams) =>
+      fetchJSON<WorkloadLogsResult>(`${logsPath(namespace, name)}${query(params)}`, { signal: params.signal }),
+    [namespace, name],
+  )
+  const createStream = useCallback(
+    (params: WorkloadLogsFetchParams) =>
+      new EventSource(`${getApiBase()}${logsPath(namespace, name)}/stream${query(params, 50)}`, {
+        withCredentials: getCredentialsMode() === 'include',
+      }),
+    [namespace, name],
+  )
+
+  return (
+    <div className="h-full">
+      <WorkloadLogsViewer
+        key={pod ?? ''}
+        name={name}
+        fetchAll={fetchAll}
+        createStream={createStream}
+        overrideDownload={desktopDownload}
+        forceDark={theme === 'dark' ? true : undefined}
+        // Light logs on a dark app are never wanted: dark theme pins the palette,
+        // light theme only sets where it starts and leaves the toggle available.
+        defaultDark={false}
+        initialPods={pod ? [pod] : undefined}
+      />
+    </div>
+  )
+}