@skyhook-io/radar-app 1.16.1 → 1.16.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/radar-app",
-  "version": "1.16.1",
+  "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.
@@ -529,8 +540,8 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix, onClusterL
     navigate(withCrossViewParams(path, location.search))
   }, [location.search, navigate])
 
-  // The standalone rail expresses intent to leave the full-width investigation
-  // workspace. Close it before routing so the destination is immediately visible;
+  // The standalone rail expresses intent to leave the full-width investigations
+  // page. Close it before routing so the destination is immediately visible;
   // docked investigations stay open across views as a persistent side panel.
   const handlePrimaryNavigate = useCallback((view: ExtendedMainView) => {
     navigateFromPrimaryRail(
@@ -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>
@@ -1890,11 +1912,12 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix, onClusterL
 
           {/* Local terminal */}
           {capabilities.localTerminal && (
-            <Tooltip content="Open local terminal">
+            <Tooltip content={connection.context || connection.state === 'disconnected' ? 'Open local terminal' : 'Waiting for a context to open a terminal'}>
             <button
               onClick={() => openLocalTerminal()}
+              disabled={!connection.context && connection.state !== 'disconnected'}
               aria-label="Open local terminal"
-              className="p-1.5 rounded-md bg-theme-elevated hover:bg-theme-hover text-theme-text-secondary hover:text-theme-text-primary transition-colors"
+              className="p-1.5 rounded-md bg-theme-elevated enabled:hover:bg-theme-hover text-theme-text-secondary enabled:hover:text-theme-text-primary disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
             >
               <SquareTerminal className="w-4 h-4" />
             </button>
@@ -2009,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
@@ -2301,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
@@ -2368,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/RadarApp.tsx

@@ -34,6 +34,7 @@ import {
 } from "./components/ui/Toast";
 import { setApiBase, setBasename } from "./api/config";
 import { shouldRetryRadarQuery } from "./api/radarFeatures";
+import { isShownInline } from "./api/httpErrors";
 import { NavCustomizationProvider } from "./context/NavCustomization";
 import { FilterLocationBridge } from "./filter/FilterLocationBridge";
 import type { NavCustomization } from "./context/NavCustomization";
@@ -49,6 +50,7 @@ import { DiagnoseCustomizationProvider } from "./context/DiagnoseCustomization";
 import type {
   RenderDiagnoseAction,
   RenderInvestigationRunActions,
+  RenderInvestigationRefusalAction,
   DiagnoseConsentCopy,
 } from "./context/DiagnoseCustomization";
 import { defaultDiagnoseAction } from "./components/diagnose/LocalDiagnoseAction";
@@ -132,6 +134,10 @@ export interface RadarAppProps {
   renderDiagnoseAction?: RenderDiagnoseAction;
   /** Host-owned controls for the focused investigation; absent in standalone Radar. */
   renderInvestigationRunActions?: RenderInvestigationRunActions;
+  /** Host action beside a refused investigation start or follow-up, e.g. Radar
+   *  Cloud's "Upgrade" when the organization has used its investigations.
+   *  Absent in standalone Radar, whose backend sends no refusal details. */
+  renderInvestigationRefusalAction?: RenderInvestigationRefusalAction;
   /**
    * Replaces the first-run consent card's trust copy. REQUIRED of any host whose
    * backend runs the agent somewhere other than the user's own machine — the
@@ -179,7 +185,7 @@ export interface RadarAppProps {
 // Default QueryClient with the same shape Radar's standalone binary uses.
 // Extracted so both standalone + library consumers get identical
 // toast-on-error / toast-on-success behavior.
-function makeDefaultQueryClient(): QueryClient {
+export function makeDefaultQueryClient(): QueryClient {
   return new QueryClient({
     defaultOptions: {
       queries: {
@@ -190,7 +196,7 @@ function makeDefaultQueryClient(): QueryClient {
     mutationCache: new MutationCache({
       onError: (error, _variables, _context, mutation) => {
         const message = mutation.options.meta?.errorMessage;
-        if (message) showApiError(message, (error as Error).message);
+        if (message && !isShownInline(error)) showApiError(message, (error as Error).message);
       },
       onSuccess: (_data, _variables, _context, mutation) => {
         const message = mutation.options.meta?.successMessage;
@@ -224,6 +230,7 @@ export function RadarApp({
   documentTitleSuffix,
   renderDiagnoseAction,
   renderInvestigationRunActions,
+  renderInvestigationRefusalAction,
   diagnoseConsent,
   initialPath,
   onClusterLoadStateChange,
@@ -263,6 +270,7 @@ export function RadarApp({
                     value={renderDiagnoseAction ?? defaultDiagnoseAction}
                     consentCopy={diagnoseConsent}
                     renderRunActions={renderInvestigationRunActions}
+                    renderRefusalAction={renderInvestigationRefusalAction}
                   >
                     <DiagnoseProvider
                       browserURLState={router !== "memory"}

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,
@@ -59,7 +59,7 @@ import type {
 } from '../types'
 import type { GitOpsOperationResponse } from '../types/gitops'
 import { apiUrl, getApiBase, getAuthHeaders, getCredentialsMode, getBasename, routePath, stripBasename } from './config'
-import { httpStatusMessage, readErrorBody, readErrorResponse } from './httpErrors'
+import { httpStatusMessage, markShownInline, readErrorBody, readErrorResponse } from './httpErrors'
 import {
   RadarFeatureUnsupportedError,
   guardRadarFeature,
@@ -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…" };
-  }
-  if (!canAtLeast("member")) {
-    return {
-      allowed: false,
-      reason: `Your Radar Cloud role (${role ?? "unknown"}) cannot run Helm operations. Ask a member or owner.`,
-    };
+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 (!helmWrite) {
+  if (canHelmWrite) return { allowed: true };
+  if (authEnabled) {
     return {
       allowed: false,
-      reason:
-        "Helm write permissions required. Set rbac.helm=true in the Radar Helm chart values.",
+      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.",
     };
   }
-  return { allowed: true };
+  return {
+    allowed: false,
+    reason: "Helm write permissions required. Set rbac.helm=true in the Radar Helm chart values.",
+  };
 }
 
 // Namespaces
@@ -4092,7 +4102,13 @@ export function useUpdateResource() {
       });
       if (!response.ok) {
         const error = await readErrorBody(response);
-        throw new Error(error.error || `HTTP ${response.status}`);
+        const failure = new Error(error.error || `HTTP ${response.status}`);
+        // A reviewed apply's failure is shown in the review itself (the
+        // changed-after-review notice, or the error), so it gets no toast.
+        if (reviewedResourceVersion !== undefined || reviewedContext !== undefined) {
+          markShownInline(failure);
+        }
+        throw failure;
       }
       return response.json();
     },
@@ -5451,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>({
@@ -5473,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,
@@ -5499,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/client.updateResource.test.tsx

@@ -0,0 +1,58 @@
+// @vitest-environment jsdom
+//
+// A reviewed YAML apply shows its failure in the review itself, so the global
+// "Failed to update resource" toast would say the same thing twice.
+import { act } from 'react'
+import { createRoot } from 'react-dom/client'
+import { QueryClientProvider } from '@tanstack/react-query'
+import { afterEach, expect, it, vi } from 'vitest'
+
+const toasts = vi.hoisted(() => ({ errors: [] as string[] }))
+vi.mock('@skyhook-io/k8s-ui', async (importOriginal) => ({
+  ...(await importOriginal<typeof import('@skyhook-io/k8s-ui')>()),
+  showApiError: (title: string) => toasts.errors.push(title),
+}))
+
+const { makeDefaultQueryClient } = await import('../RadarApp')
+const { useUpdateResource } = await import('./client')
+
+vi.stubGlobal('IS_REACT_ACT_ENVIRONMENT', true)
+afterEach(() => {
+  vi.unstubAllGlobals()
+  vi.stubGlobal('IS_REACT_ACT_ENVIRONMENT', true)
+  toasts.errors = []
+})
+
+async function save(reviewed: boolean) {
+  vi.stubGlobal('fetch', vi.fn(async () => new Response(
+    JSON.stringify({ error: 'resource changed after review; review the latest version before applying' }),
+    { status: 409, headers: { 'Content-Type': 'application/json' } },
+  )))
+  let mutate: ReturnType<typeof useUpdateResource>['mutateAsync'] | undefined
+  function Probe() {
+    mutate = useUpdateResource().mutateAsync
+    return null
+  }
+  const host = document.createElement('div')
+  const root = createRoot(host)
+  await act(async () => {
+    root.render(<QueryClientProvider client={makeDefaultQueryClient()}><Probe /></QueryClientProvider>)
+  })
+  await act(async () => {
+    await mutate!({
+      kind: 'configmaps', namespace: 'shop', name: 'app', yaml: 'kind: ConfigMap',
+      ...(reviewed ? { reviewedResourceVersion: '42', reviewedContext: 'kind-a' } : {}),
+    }).catch(() => {})
+  })
+  act(() => root.unmount())
+}
+
+it('does not toast a reviewed apply, whose review shows the failure', async () => {
+  await save(true)
+  expect(toasts.errors).toEqual([])
+})
+
+it('still toasts a save that did not come from a review', async () => {
+  await save(false)
+  expect(toasts.errors).toEqual(['Failed to update resource'])
+})

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/diagnose.ts

@@ -310,6 +310,32 @@ export class DiagnoseError extends Error {
   }
 }
 
+/** A host's refusal of an investigation request, with what would unblock it. */
+export interface InvestigationRefusal {
+  status: number;
+  /** The sentence shown to the user. */
+  message: string;
+  code?: string;
+  reason?: string;
+  action?: string;
+}
+
+/** The refusal a DiagnoseError carries, or null when the host sent none
+ * (Radar's own backend never does). */
+export function investigationRefusal(
+  error: unknown,
+): InvestigationRefusal | null {
+  if (!(error instanceof DiagnoseError)) return null;
+  if (!error.code && !error.reason && !error.action) return null;
+  return {
+    status: error.status,
+    message: error.message,
+    code: error.code,
+    reason: error.reason,
+    action: error.action,
+  };
+}
+
 const RUNS = () => `${getApiBase()}/diagnose/runs`;
 
 // createRun starts a server-side investigation (or focuses a live one for the same