@skyhook-io/radar-app 1.15.0 → 1.16.1

package/src/api/client.ts

@@ -59,6 +59,15 @@ 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 {
+  RadarFeatureUnsupportedError,
+  guardRadarFeature,
+  radarFeatureSupport,
+  shouldRetryRadarQuery,
+  type RadarFeature,
+} from './radarFeatures'
+import { useRadarUpgradeHost } from '../context/RadarUpgradeHost'
 import { apiVersionToGroup } from '../utils/navigation'
 import type { DeploymentMode } from '../types'
 
@@ -195,11 +204,19 @@ export function apiFetch(
 export class ApiError extends Error {
   status: number;
   data?: Record<string, unknown>;
-  constructor(message: string, status: number, data?: Record<string, unknown>) {
+  /** The router has no such route: chi's own 404, not a handler's. See isUnknownRouteResponse. */
+  unknownRoute: boolean;
+  constructor(
+    message: string,
+    status: number,
+    data?: Record<string, unknown>,
+    options?: { unknownRoute?: boolean },
+  ) {
     super(message);
     this.name = "ApiError";
     this.status = status;
     this.data = data;
+    this.unknownRoute = options?.unknownRoute ?? false;
   }
 }
 
@@ -222,6 +239,7 @@ export function shouldRetryCapacityQuery(
   failureCount: number,
   error: unknown,
 ): boolean {
+  if (error instanceof RadarFeatureUnsupportedError) return false;
   if (
     error instanceof ApiError &&
     (error.status === 400 || error.status === 403 || error.status === 404)
@@ -336,13 +354,12 @@ export async function fetchJSON<T>(
   const requestInit = init instanceof AbortSignal ? { signal: init } : init;
   const response = await apiFetch(`${getApiBase()}${path}`, requestInit);
   if (!response.ok) {
-    const errorData = await response
-      .json()
-      .catch(() => ({ error: "Unknown error" }));
+    const { body, unknownRoute } = await readErrorResponse(response);
     throw new ApiError(
-      errorData.error || `HTTP ${response.status}`,
+      body.error || httpStatusMessage(response.status, response.statusText),
       response.status,
-      errorData,
+      body,
+      { unknownRoute },
     );
   }
   return response.json();
@@ -669,16 +686,18 @@ export function useUpgradeReadiness(target?: string) {
   // refetches read that memo; only the explicit manual refresh passes
   // refresh=true to force a fresh live scan (e.g. after fixing a finding).
   const forceRefresh = useRef(false)
+  const { guard, gatedKey } = useRadarFeature('upgradeReadiness')
   const query = useQuery<UpgradeReadinessResponse>({
-    queryKey: ['upgrade-readiness', target ?? 'next'],
+    queryKey: ['upgrade-readiness', target ?? 'next', ...gatedKey],
     queryFn: ({ signal }) => {
       const params = new URLSearchParams()
       if (target) params.set('target', target)
       if (forceRefresh.current) params.set('refresh', 'true')
       forceRefresh.current = false
       const qs = params.toString()
-      return fetchJSON(`/upgrade-readiness${qs ? `?${qs}` : ''}`, signal)
+      return guard(() => fetchJSON<UpgradeReadinessResponse>(`/upgrade-readiness${qs ? `?${qs}` : ''}`, signal))
     },
+    retry: shouldRetryRadarQuery,
     staleTime: 30000,
     placeholderData: (previous) => previous,
   })
@@ -756,9 +775,13 @@ export function useResourceIssues(
   if (group) params.set("group", group);
   const path = `/issues/resource/${encodeURIComponent(kind)}/${pathNs}/${encodeURIComponent(name)}`;
   const qs = params.toString();
+  // An older Radar without the endpoint settles as unsupported, so the
+  // renderers fall back to their own status-derived problem banners.
+  const { guard, gatedKey } = useRadarFeature("resourceIssues");
   return useQuery<Issue[]>({
-    queryKey: ["issues", "resource", kind, group ?? "", namespace, name],
-    queryFn: () => fetchJSON(`${path}${qs ? `?${qs}` : ""}`),
+    queryKey: ["issues", "resource", kind, group ?? "", namespace, name, ...gatedKey],
+    queryFn: () => guard(() => fetchJSON<Issue[]>(`${path}${qs ? `?${qs}` : ""}`)),
+    retry: shouldRetryRadarQuery,
     // No refetchInterval: a drawer doesn't need to poll; staleTime keeps it fresh
     // on reopen without re-running an uncapped Compose every 30s.
     staleTime: 30000,
@@ -832,13 +855,14 @@ export async function runInClusterMerged(kind: string, namespace: string, name:
     headers: { 'Content-Type': 'application/json' },
     body: JSON.stringify({ path: path ?? '/' }),
   })
-  // A gateway/proxy failure (chi's 60s timeout, a Hub ingress 502) returns
-  // HTML - an unguarded .json() surfaced "Unexpected token <" instead of the
-  // status. Mirror fetchJSON's tolerant parse.
-  const body = await response.json().catch(() => undefined)
-  if (!response.ok || body?.error) {
-    throw new Error(body?.error || `In-cluster test failed (${response.status})`)
+  // A gateway/proxy failure (chi's 60s timeout, a Hub ingress 502) answers in
+  // HTML or plain text, so a failure reads its body tolerantly.
+  if (!response.ok) {
+    const error = await readErrorBody(response)
+    throw new Error(error.error || `In-cluster test failed (${response.status})`)
   }
+  const body = await response.json().catch(() => undefined)
+  if (body?.error) throw new Error(body.error)
   if (body === undefined) {
     throw new Error('In-cluster test returned an unreadable response')
   }
@@ -869,9 +893,7 @@ export function useUpdateAuditSettings() {
         body: JSON.stringify(settings),
       });
       if (!resp.ok) {
-        const body = await resp
-          .json()
-          .catch(() => ({ error: "Unknown error" }));
+        const body = await readErrorBody(resp);
         throw new Error(body.error || `HTTP ${resp.status}`);
       }
       return resp.json();
@@ -957,6 +979,8 @@ export type CostUnavailableReason =
   | "authentication_error"
   | "configuration_mismatch"
   | "deployment_configuration_error"
+  | "metrics_settings_error"
+  | "cost_settings_error"
   | "history_unsupported"
   | "insufficient_history";
 
@@ -1009,10 +1033,11 @@ function costRefetchInterval(
   };
 }
 
-export function useOpenCostSummary() {
+export function useOpenCostSummary(enabled = true) {
   const clusterInfo = useClusterInfo();
   return useQuery<OpenCostSummary>({
     queryKey: ["opencost-summary"],
+    enabled,
     queryFn: () => fetchJSON("/opencost/summary"),
     refetchInterval: costRefetchInterval(
       COST_REFRESH_INTERVAL_MS,
@@ -1383,11 +1408,12 @@ export function capacityRefetchInterval(
   enabled: boolean,
   cursor?: string,
 ) {
-  return (query: { state: { data?: unknown } }): number | false => {
+  return (query: { state: { data?: unknown; error?: unknown } }): number | false => {
     // A held cursor means the user deliberately paged forward — background
     // polling there races membership changes and yanks them back to page 1.
     if (cursor) return false;
     if (!enabled) return false;
+    if (query.state.error instanceof RadarFeatureUnsupportedError) return false;
     // Syncing is a transient bootstrap state (context switch, informer
     // startup). At the normal cadence the syncing screen can sit for a full
     // interval looking stuck — poll fast until the server settles.
@@ -1399,12 +1425,15 @@ export function capacityRefetchInterval(
 
 export function useCapacityOverview(options?: CapacityQueryOptions) {
   const enabled = options?.enabled ?? true;
+  const { guard, gatedKey } = useRadarFeature("capacity");
   return useQuery<CapacityOverviewResponse>({
-    queryKey: ["capacity", "overview"],
+    queryKey: ["capacity", "overview", ...gatedKey],
     queryFn: ({ signal }) =>
-      fetchJSON<CapacityOverviewResponse>(
-        `/capacity${capacityPageQuery(options)}`,
-        signal,
+      guard(() =>
+        fetchJSON<CapacityOverviewResponse>(
+          `/capacity${capacityPageQuery(options)}`,
+          signal,
+        ),
       ),
     enabled,
     staleTime: 15_000,
@@ -1418,12 +1447,15 @@ export function useCapacityPools(options?: CapacityPageQueryOptions) {
   const limit = options?.limit;
   const cursor = options?.cursor;
   const queryKey = ["capacity", "pools", limit, cursor];
+  const { guard, gatedKey } = useRadarFeature("capacity");
   return useQuery<CapacityPoolListResponse>({
-    queryKey,
+    queryKey: [...queryKey, ...gatedKey],
     queryFn: ({ signal }) =>
-      fetchJSON<CapacityPoolListResponse>(
-        `/capacity/pools${capacityPageQuery(options)}`,
-        signal,
+      guard(() =>
+        fetchJSON<CapacityPoolListResponse>(
+          `/capacity/pools${capacityPageQuery(options)}`,
+          signal,
+        ),
       ),
     enabled,
     staleTime: 15_000,
@@ -1441,12 +1473,15 @@ export function useCapacityPoolDetail(
   options?: CapacityQueryOptions,
 ) {
   const enabled = Boolean(name) && (options?.enabled ?? true);
+  const { guard, gatedKey } = useRadarFeature("capacity");
   return useQuery<CapacityPoolDetailResponse>({
-    queryKey: ["capacity", "pool", name],
+    queryKey: ["capacity", "pool", name, ...gatedKey],
     queryFn: ({ signal }) =>
-      fetchJSON<CapacityPoolDetailResponse>(
-        `/capacity/pools/${encodeURIComponent(name ?? "")}${capacityPageQuery(options)}`,
-        signal,
+      guard(() =>
+        fetchJSON<CapacityPoolDetailResponse>(
+          `/capacity/pools/${encodeURIComponent(name ?? "")}${capacityPageQuery(options)}`,
+          signal,
+        ),
       ),
     enabled,
     staleTime: 15_000,
@@ -1470,12 +1505,15 @@ export function useCapacityPoolMembers(
   const pageQuery = capacityPageQuery(options);
   const separator = pageQuery ? "&" : "?";
   const queryKey = ["capacity", "pool", name, "members", type, limit, cursor];
+  const { guard, gatedKey } = useRadarFeature("capacity");
   return useQuery<CapacityMemberListResponse>({
-    queryKey,
+    queryKey: [...queryKey, ...gatedKey],
     queryFn: ({ signal }) =>
-      fetchJSON<CapacityMemberListResponse>(
-        `/capacity/pools/${encodeURIComponent(name ?? "")}/members${pageQuery}${separator}type=${encodeURIComponent(type)}`,
-        signal,
+      guard(() =>
+        fetchJSON<CapacityMemberListResponse>(
+          `/capacity/pools/${encodeURIComponent(name ?? "")}/members${pageQuery}${separator}type=${encodeURIComponent(type)}`,
+          signal,
+        ),
       ),
     enabled,
     staleTime: 15_000,
@@ -1525,12 +1563,15 @@ export function useCapacityDemand(options?: CapacityDemandQueryOptions) {
     options?.owner,
     options?.pod,
   ];
+  const { guard, gatedKey } = useRadarFeature("capacity");
   return useQuery<CapacityDemandResponse>({
-    queryKey,
+    queryKey: [...queryKey, ...gatedKey],
     queryFn: ({ signal }) =>
-      fetchJSON<CapacityDemandResponse>(
-        `/capacity/demand${query ? `?${query}` : ""}`,
-        signal,
+      guard(() =>
+        fetchJSON<CapacityDemandResponse>(
+          `/capacity/demand${query ? `?${query}` : ""}`,
+          signal,
+        ),
       ),
     enabled,
     staleTime: 15_000,
@@ -1570,12 +1611,15 @@ export function useCapacityActivity(options?: CapacityActivityQueryOptions) {
     options?.node,
     options?.type,
   ];
+  const { guard, gatedKey } = useRadarFeature("capacity");
   return useQuery<CapacityActivityResponse>({
-    queryKey,
+    queryKey: [...queryKey, ...gatedKey],
     queryFn: ({ signal }) =>
-      fetchJSON<CapacityActivityResponse>(
-        `/capacity/activity${query ? `?${query}` : ""}`,
-        signal,
+      guard(() =>
+        fetchJSON<CapacityActivityResponse>(
+          `/capacity/activity${query ? `?${query}` : ""}`,
+          signal,
+        ),
       ),
     enabled,
     staleTime: 15_000,
@@ -1689,6 +1733,15 @@ export async function triggerDailyUpdateCheck(
   })
 }
 
+function versionCheckQueryOptions(apiBase: string) {
+  return {
+    queryKey: ["version-check", apiBase],
+    queryFn: () => fetchJSON<VersionInfo>('/version-check'),
+    staleTime: 60 * 60 * 1000, // 1 hour
+    retry: false, // Don't retry on failure
+  };
+}
+
 export function useVersionCheck() {
   const capabilities = useCapabilities()
   const apiBase = getApiBase()
@@ -1696,12 +1749,7 @@ export function useVersionCheck() {
     ? (capabilities.data.deployment?.mode ?? 'local')
     : undefined
 
-  const query = useQuery<VersionInfo>({
-    queryKey: ["version-check", apiBase],
-    queryFn: () => fetchJSON('/version-check'),
-    staleTime: 60 * 60 * 1000, // 1 hour
-    retry: false, // Don't retry on failure
-  });
+  const query = useQuery<VersionInfo>(versionCheckQueryOptions(apiBase));
 
   useEffect(() => {
     if (query.isSuccess) void triggerDailyUpdateCheck(deploymentMode).catch(() => {})
@@ -1710,6 +1758,37 @@ export function useVersionCheck() {
   return query;
 }
 
+/**
+ * Guards a fetch for an endpoint the connected Radar may predate (see
+ * radarFeatures.ts). A Radar known to be too old is never asked; one whose
+ * version is unknown is asked, and chi's unknown-route 404 is read as the same
+ * answer. Either way the caller gets a RadarFeatureUnsupportedError, which the
+ * sections render as an upgrade note instead of an error.
+ *
+ * Nothing waits on /version-check: an agent that advertises the feature flag
+ * is fetched immediately, and an unknown version falls through to the fetch.
+ *
+ * Spread `gatedKey` into the query key. A gate decided from early information
+ * (a host-supplied version before /capabilities answers) can lift later, and
+ * the key change is what makes the query fetch for real; ungated keys are
+ * unchanged.
+ */
+export function useRadarFeature(feature: RadarFeature) {
+  const { data: capabilities } = useCapabilities()
+  const { data: versionInfo } = useQuery<VersionInfo>(versionCheckQueryOptions(getApiBase()))
+  const { radarVersion } = useRadarUpgradeHost()
+  const currentVersion = versionInfo?.currentVersion || radarVersion
+  const latestVersion = versionInfo?.latestVersion
+  const support = radarFeatureSupport(feature, capabilities, currentVersion)
+
+  return {
+    support,
+    gatedKey: support === 'unsupported' ? ['radar-feature-unsupported'] : [],
+    guard: <T,>(request: () => Promise<T>): Promise<T> =>
+      guardRadarFeature(feature, support, { currentVersion, latestVersion }, request),
+  }
+}
+
 // ============================================================================
 // Desktop Update API hooks
 // ============================================================================
@@ -1731,9 +1810,7 @@ export function useStartDesktopUpdate() {
         method: "POST",
       });
       if (!response.ok) {
-        const error = await response
-          .json()
-          .catch(() => ({ error: "Unknown error" }));
+        const error = await readErrorBody(response);
         throw new Error(error.error || `HTTP ${response.status}`);
       }
       return response.json();
@@ -1761,9 +1838,7 @@ export function useApplyDesktopUpdate() {
         method: "POST",
       });
       if (!response.ok) {
-        const error = await response
-          .json()
-          .catch(() => ({ error: "Unknown error" }));
+        const error = await readErrorBody(response);
         throw new Error(error.error || `HTTP ${response.status}`);
       }
       return response.json();
@@ -2320,15 +2395,24 @@ export function useApplications(
   const queryString = params.toString();
 
   const enabled = options?.enabled !== false;
+  const { guard, gatedKey } = useRadarFeature("applications");
   return useQuery<{ applications: AppRow[] }>({
-    queryKey: ["applications", namespaces],
+    queryKey: ["applications", namespaces, ...gatedKey],
     queryFn: () =>
-      fetchJSON(`/applications${queryString ? `?${queryString}` : ""}`),
+      guard(() =>
+        fetchJSON<{ applications: AppRow[] }>(
+          `/applications${queryString ? `?${queryString}` : ""}`,
+        ),
+      ),
     staleTime: 30_000,
+    retry: shouldRetryRadarQuery,
     // Only poll while a consumer needs the index; gated off it must not keep the
-    // background refetch alive.
+    // background refetch alive. A Radar that predates the endpoint never will.
     enabled,
-    refetchInterval: enabled ? APPLICATIONS_REFRESH_INTERVAL_MS : false,
+    refetchInterval: (query) =>
+      enabled && !(query.state.error instanceof RadarFeatureUnsupportedError)
+        ? APPLICATIONS_REFRESH_INTERVAL_MS
+        : false,
   });
 }
 
@@ -2520,7 +2604,7 @@ export function useResource<T>(
     retry: (failureCount, error) => {
       if (isStillLoadingError(error)) return true;
       if (isKindSyncFailed(error)) return false;
-      return failureCount < 1; // matches the QueryClient default (retry: 1)
+      return failureCount < 1; // one retry, 4xx included, unlike the QueryClient default
     },
     retryDelay: (failureCount, error) =>
       isStillLoadingError(error) ? 2000 : Math.min(1000 * 2 ** failureCount, 30000),
@@ -2552,7 +2636,7 @@ export function useResourceWithRelationships<T>(
     retry: (failureCount, error) => {
       if (isStillLoadingError(error)) return true;
       if (isKindSyncFailed(error)) return false;
-      return failureCount < 1; // matches the QueryClient default (retry: 1)
+      return failureCount < 1; // one retry, 4xx included, unlike the QueryClient default
     },
     retryDelay: (failureCount, error) =>
       isStillLoadingError(error) ? 2000 : Math.min(1000 * 2 ** failureCount, 30000),
@@ -2584,7 +2668,7 @@ export function useResources<T>(
     retry: (failureCount, error) => {
       if (isStillLoadingError(error)) return true;
       if (isKindSyncFailed(error)) return false;
-      return failureCount < 1; // matches the QueryClient default (retry: 1)
+      return failureCount < 1; // one retry, 4xx included, unlike the QueryClient default
     },
     retryDelay: (failureCount, error) =>
       isStillLoadingError(error) ? 2000 : Math.min(1000 * 2 ** failureCount, 30000),
@@ -2652,9 +2736,7 @@ async function fetchChangesPage(
     signal ? { signal } : undefined,
   );
   if (!response.ok) {
-    const errorData = await response
-      .json()
-      .catch(() => ({ error: "Unknown error" }));
+    const errorData = await readErrorBody(response);
     throw new ApiError(
       errorData.error || `HTTP ${response.status}`,
       response.status,
@@ -2846,6 +2928,53 @@ export function useChanges(options: UseChangesOptions = {}) {
   });
 }
 
+export interface WorkloadHistoryPage {
+  events: TimelineEvent[];
+  truncated: boolean;
+  nextBeforeSeq?: number;
+  /** The workload has more related resources than the history follows. */
+  incomplete?: boolean;
+}
+
+function workloadHistoryPath(kind: string, namespace: string, name: string, group?: string, beforeSeq?: number): string {
+  const params = new URLSearchParams();
+  if (group) params.set("group", group);
+  if (beforeSeq) params.set("before_seq", String(beforeSeq));
+  const query = params.toString();
+  return `/workloads/${encodeURIComponent(kind)}/${encodeURIComponent(namespace)}/${encodeURIComponent(name)}/history${query ? `?${query}` : ""}`;
+}
+
+// The newest page of one workload's history: the workload, what it owns, K8s
+// Events about those, and the resources attached to it. Keyed under
+// "changes" so the live-update invalidation refreshes it.
+// A Radar that predates the scoped history endpoint settles as unsupported;
+// WorkloadView then falls back to the namespace's changes.
+export function useWorkloadHistory(kind: string, namespace: string, name: string, group?: string, enabled = true) {
+  const { guard, gatedKey, support } = useRadarFeature("workloadHistory");
+  const query = useQuery<WorkloadHistoryPage>({
+    queryKey: ["changes", "workload-history", kind, namespace, name, group ?? "", ...gatedKey],
+    queryFn: ({ signal }) =>
+      guard(() => fetchJSON<WorkloadHistoryPage>(workloadHistoryPath(kind, namespace, name, group), signal)),
+    staleTime: 5000,
+    retry: shouldRetryRadarQuery,
+    refetchInterval: (query) =>
+      query.state.error instanceof RadarFeatureUnsupportedError ? false : CHANGES_REFRESH_INTERVAL_MS,
+    enabled,
+  });
+  // A probe answered by an older Radar settles as unsupported and stops
+  // polling; once /capabilities confirms the feature (the agent was upgraded),
+  // ask again rather than staying on the fallback.
+  const { error, refetch } = query;
+  useEffect(() => {
+    if (support === "supported" && error instanceof RadarFeatureUnsupportedError) void refetch();
+  }, [support, error, refetch]);
+  return query;
+}
+
+export function fetchWorkloadHistoryPage(kind: string, namespace: string, name: string, group: string | undefined, beforeSeq: number): Promise<WorkloadHistoryPage> {
+  return fetchJSON(workloadHistoryPath(kind, namespace, name, group, beforeSeq));
+}
+
 export interface ResourceEventsResult {
   k8sEvents: TimelineEvent[];
   updates: TimelineEvent[];
@@ -2995,11 +3124,13 @@ export function usePodMetrics(
 }
 
 export function usePodEnvironment(namespace: string, podName: string, enabled = true) {
+  const { guard, gatedKey } = useRadarFeature('podEnvironment')
   return useQuery<PodEnvironmentResponse>({
-    queryKey: ['pod-environment', namespace, podName],
-    queryFn: () => fetchJSON(
+    queryKey: ['pod-environment', namespace, podName, ...gatedKey],
+    queryFn: () => guard(() => fetchJSON<PodEnvironmentResponse>(
       `/pods/${encodeURIComponent(namespace)}/${encodeURIComponent(podName)}/environment`,
-    ),
+    )),
+    retry: shouldRetryRadarQuery,
     enabled: enabled && Boolean(namespace && podName),
     staleTime: 10000,
   })
@@ -3423,9 +3554,10 @@ export function prometheusStatusRefetchInterval(
 }
 
 // Check Prometheus availability
-export function usePrometheusStatus() {
+export function usePrometheusStatus(enabled = true) {
   return useQuery<PrometheusStatus>({
     queryKey: ["prometheus-status"],
+    enabled,
     queryFn: () => fetchJSON("/prometheus/status"),
     staleTime: 30000,
     refetchInterval: (query) =>
@@ -3464,9 +3596,7 @@ export function usePrometheusConnect() {
         method: "POST",
       });
       if (!resp.ok) {
-        const body = await resp
-          .json()
-          .catch(() => ({ error: "Unknown error" }));
+        const body = await readErrorBody(resp);
         throw new Error(body.error || `HTTP ${resp.status}`);
       }
       return resp.json() as Promise<PrometheusStatus>;
@@ -3961,9 +4091,7 @@ export function useUpdateResource() {
         body: yaml,
       });
       if (!response.ok) {
-        const error = await response
-          .json()
-          .catch(() => ({ error: "Unknown error" }));
+        const error = await readErrorBody(response);
         throw new Error(error.error || `HTTP ${response.status}`);
       }
       return response.json();
@@ -4075,9 +4203,7 @@ export function useDeleteResource() {
         method: "DELETE",
       });
       if (!response.ok) {
-        const error = await response
-          .json()
-          .catch(() => ({ error: "Unknown error" }));
+        const error = await readErrorBody(response);
         throw new Error(error.error || `HTTP ${response.status}`);
       }
       // DELETE returns 204 No Content, no body to parse
@@ -4122,9 +4248,7 @@ export function useBulkDeleteResources() {
           if (force) url.searchParams.set("force", "true");
           const response = await apiFetch(url.toString(), { method: "DELETE" });
           if (!response.ok) {
-            const error = await response
-              .json()
-              .catch(() => ({ error: "Unknown error" }));
+            const error = await readErrorBody(response);
             throw new Error(
               error.error || `Failed to delete ${namespace}/${name}`,
             );
@@ -4206,9 +4330,7 @@ export function useBulkRestartWorkloads() {
             },
           );
           if (!response.ok) {
-            const error = await response
-              .json()
-              .catch(() => ({ error: "Unknown error" }));
+            const error = await readErrorBody(response);
             throw new Error(
               `${namespace}/${name}: ${error.error || `HTTP ${response.status}`}`,
             );
@@ -4278,9 +4400,7 @@ export function useBulkScaleWorkloads() {
             },
           );
           if (!response.ok) {
-            const error = await response
-              .json()
-              .catch(() => ({ error: "Unknown error" }));
+            const error = await readErrorBody(response);
             throw new Error(
               `${namespace}/${name}: ${error.error || `HTTP ${response.status}`}`,
             );
@@ -4464,7 +4584,7 @@ export function usePreviewResources() {
         body: JSON.stringify(request),
       })
       if (!response.ok) {
-        const error = await response.json().catch(() => ({ error: 'Preview failed' }))
+        const error = await readErrorBody(response)
         throw new Error(error.error || `HTTP ${response.status}`)
       }
       return response.json() as Promise<YamlPreviewResponse>
@@ -4514,9 +4634,7 @@ export function useApplyResource() {
         body: yaml,
       });
       if (!response.ok) {
-        const error = (await response
-          .json()
-          .catch(() => ({ error: 'Unknown error' }))) as ApplyResourceErrorResponse
+        const error = (await readErrorBody(response)) as ApplyResourceErrorResponse
         throw new ApplyResourceError(error, response.status)
       }
       return response.json() as Promise<ApplyResourceResult[]>;
@@ -4572,9 +4690,7 @@ export function useTriggerCronJob() {
         },
       );
       if (!response.ok) {
-        const error = await response
-          .json()
-          .catch(() => ({ error: "Unknown error" }));
+        const error = await readErrorBody(response);
         throw new Error(error.error || `HTTP ${response.status}`);
       }
       return response.json();
@@ -4612,9 +4728,7 @@ export function useSuspendCronJob() {
         },
       );
       if (!response.ok) {
-        const error = await response
-          .json()
-          .catch(() => ({ error: "Unknown error" }));
+        const error = await readErrorBody(response);
         throw new Error(error.error || `HTTP ${response.status}`);
       }
       return response.json();
@@ -4652,9 +4766,7 @@ export function useResumeCronJob() {
         },
       );
       if (!response.ok) {
-        const error = await response
-          .json()
-          .catch(() => ({ error: "Unknown error" }));
+        const error = await readErrorBody(response);
         throw new Error(error.error || `HTTP ${response.status}`);
       }
       return response.json();
@@ -4698,9 +4810,7 @@ export function useRestartWorkload() {
         },
       );
       if (!response.ok) {
-        const error = await response
-          .json()
-          .catch(() => ({ error: "Unknown error" }));
+        const error = await readErrorBody(response);
         throw new Error(error.error || `HTTP ${response.status}`);
       }
       return response.json();
@@ -4827,9 +4937,7 @@ export function useScaleWorkload() {
         },
       );
       if (!response.ok) {
-        const error = await response
-          .json()
-          .catch(() => ({ error: "Unknown error" }));
+        const error = await readErrorBody(response);
         throw new Error(error.error || `HTTP ${response.status}`);
       }
       return response.json();
@@ -4910,9 +5018,7 @@ export function useRollbackWorkload() {
         },
       );
       if (!response.ok) {
-        const error = await response
-          .json()
-          .catch(() => ({ error: "Unknown error" }));
+        const error = await readErrorBody(response);
         throw new Error(error.error || `HTTP ${response.status}`);
       }
       return response.json();
@@ -5052,9 +5158,7 @@ export function useRolloutAction(options?: { reportErrors?: boolean }) {
         { method: "POST" },
       );
       if (!response.ok) {
-        const error = await response
-          .json()
-          .catch(() => ({ error: "Unknown error" }));
+        const error = await readErrorBody(response);
         // The code, not the status, says whether retrying can help: a lost cluster
         // connection answers 503 on this route too.
         throw new ApiError(
@@ -5112,9 +5216,7 @@ export function useCordonNode() {
         method: "POST",
       });
       if (!response.ok) {
-        const error = await response
-          .json()
-          .catch(() => ({ error: "Unknown error" }));
+        const error = await readErrorBody(response);
         throw new Error(error.error || `HTTP ${response.status}`);
       }
       return response.json();
@@ -5145,9 +5247,7 @@ export function useUncordonNode() {
         },
       );
       if (!response.ok) {
-        const error = await response
-          .json()
-          .catch(() => ({ error: "Unknown error" }));
+        const error = await readErrorBody(response);
         throw new Error(error.error || `HTTP ${response.status}`);
       }
       return response.json();
@@ -5189,51 +5289,27 @@ export function drainPlanBody(options: DrainPlanRequestOptions): string {
   });
 }
 
-/**
- * The connected radar predates the drain-plan endpoint. Distinguished from a
- * node-not-found 404 by the body: handlers answer with a JSON error envelope,
- * while an unknown route gets the router's plain-text 404. Hosts serving a newer
- * frontend against an older radar (Radar Hub) use this to fall back to the
- * plan-less drain dialog instead of leaving Drain permanently disabled.
- */
-export class DrainPlanUnsupportedError extends Error {
-  constructor() {
-    super("This radar does not support drain plans");
-    this.name = "DrainPlanUnsupportedError";
-  }
-}
-
-export function drainPlanFetchError(
-  status: number,
-  body: { error?: string } | null,
-): Error {
-  if (status === 404 && body === null) {
-    return new DrainPlanUnsupportedError();
-  }
-  return new Error(body?.error || `HTTP ${status}`);
-}
-
 // Read-only drain plan: what a drain with these options would do to each pod on the node.
 // Modelled as a mutation because it is a POST with a body and is fetched on demand
 // while the drain dialog is open; it performs no cluster mutation.
+// An older Radar without the endpoint fails with RadarFeatureUnsupportedError,
+// which hosts (Radar Hub) use to fall back to the plan-less drain dialog
+// instead of leaving Drain permanently disabled.
 export function useDrainPlan() {
+  const { guard } = useRadarFeature("drainPlan");
   return useMutation<
     DrainPlan,
     Error,
     { name: string; options: DrainPlanRequestOptions }
   >({
-    mutationFn: async ({ name, options }) => {
-      const response = await apiFetch(apiUrl(drainPlanPath(name)), {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: drainPlanBody(options),
-      });
-      if (!response.ok) {
-        const body = await response.json().catch(() => null);
-        throw drainPlanFetchError(response.status, body);
-      }
-      return response.json();
-    },
+    mutationFn: ({ name, options }) =>
+      guard(() =>
+        fetchJSON<DrainPlan>(drainPlanPath(name), {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: drainPlanBody(options),
+        }),
+      ),
     // Deliberately no meta toast keys: the plan is fetched only from the drain dialog, which
     // renders a failure inline and keeps Drain disabled while it shows; a global toast would
     // report the same failure twice.
@@ -5257,9 +5333,7 @@ export function useDrainNode() {
         body: options ? JSON.stringify(options) : undefined,
       });
       if (!response.ok) {
-        const error = await response
-          .json()
-          .catch(() => ({ error: "Unknown error" }));
+        const error = await readErrorBody(response);
         throw new Error(error.error || `HTTP ${response.status}`);
       }
       return response.json();
@@ -5394,9 +5468,7 @@ export function useHelmManifest(
         `${getApiBase()}/helm/releases/${namespace}/${name}/manifest${params}`,
       );
       if (!response.ok) {
-        const error = await response
-          .json()
-          .catch(() => ({ error: "Unknown error" }));
+        const error = await readErrorBody(response);
         throw new Error(error.error || `HTTP ${response.status}`);
       }
       return response.text();
@@ -5640,9 +5712,7 @@ export function useHelmRollback() {
         },
       );
       if (!response.ok) {
-        const error = await response
-          .json()
-          .catch(() => ({ error: "Unknown error" }));
+        const error = await readErrorBody(response);
         throw new Error(error.error || `HTTP ${response.status}`);
       }
       return response.json();
@@ -5679,9 +5749,7 @@ export function useHelmUninstall() {
         },
       );
       if (!response.ok) {
-        const error = await response
-          .json()
-          .catch(() => ({ error: "Unknown error" }));
+        const error = await readErrorBody(response);
         throw new Error(error.error || `HTTP ${response.status}`);
       }
       return response.json();
@@ -5713,9 +5781,7 @@ function streamHelmProgress(
     fetch(url, { credentials: getCredentialsMode(), ...options, headers })
       .then(async (response) => {
         if (!response.ok) {
-          const error = await response
-            .json()
-            .catch(() => ({ error: "Unknown error" }));
+          const error = await readErrorBody(response);
           reject(new Error(error.error || `HTTP ${response.status}`));
           return;
         }
@@ -5835,9 +5901,7 @@ export function useHelmPreviewValues() {
         },
       );
       if (!response.ok) {
-        const error = await response
-          .json()
-          .catch(() => ({ error: "Unknown error" }));
+        const error = await readErrorBody(response);
         throw new Error(error.error || `HTTP ${response.status}`);
       }
       return response.json();
@@ -5868,9 +5932,7 @@ export function useHelmApplyValues() {
         },
       );
       if (!response.ok) {
-        const error = await response
-          .json()
-          .catch(() => ({ error: "Unknown error" }));
+        const error = await readErrorBody(response);
         throw new Error(error.error || `HTTP ${response.status}`);
       }
       return response.json();
@@ -5915,9 +5977,7 @@ async function updateRepositoryFn(repoName: string): Promise<unknown> {
     },
   );
   if (!response.ok) {
-    const error = await response
-      .json()
-      .catch(() => ({ error: "Unknown error" }));
+    const error = await readErrorBody(response);
     throw new Error(error.error || `HTTP ${response.status}`);
   }
   return response.json();
@@ -5975,9 +6035,7 @@ async function mutateOCISource(
     body: JSON.stringify({ source }),
   });
   if (!response.ok) {
-    const error = await response
-      .json()
-      .catch(() => ({ error: "Unknown error" }));
+    const error = await readErrorBody(response);
     throw new Error(error.error || `HTTP ${response.status}`);
   }
   return response.json();
@@ -6066,9 +6124,7 @@ export function useInstallChart() {
         body: JSON.stringify(req),
       });
       if (!response.ok) {
-        const error = await response
-          .json()
-          .catch(() => ({ error: "Unknown error" }));
+        const error = await readErrorBody(response);
         throw new Error(error.error || `HTTP ${response.status}`);
       }
       return response.json() as Promise<HelmRelease>;
@@ -6211,9 +6267,7 @@ function createGitOpsMutation<TVariables>(
           },
         );
         if (!response.ok) {
-          const error = await response
-            .json()
-            .catch(() => ({ error: "Unknown error" }));
+          const error = await readErrorBody(response);
           throw new Error(error.error || `HTTP ${response.status}`);
         }
         return response.json() as Promise<GitOpsOperationResponse>;
@@ -6394,9 +6448,7 @@ export function useArgoResourceValidation() {
         },
       );
       if (!response.ok) {
-        const error = await response
-          .json()
-          .catch(() => ({ error: "Unknown error" }));
+        const error = await readErrorBody(response);
         throw new Error(error.error || `HTTP ${response.status}`);
       }
       return response.json() as Promise<ArgoResourceValidationResult>;
@@ -6460,9 +6512,7 @@ export function useArgoRefresh() {
         },
       );
       if (!response.ok) {
-        const error = await response
-          .json()
-          .catch(() => ({ error: "Unknown error" }));
+        const error = await readErrorBody(response);
         throw new Error(error.error || `HTTP ${response.status}`);
       }
       return response.json();
@@ -6546,9 +6596,7 @@ export function useSwitchContext() {
         clearTimeout(timeoutId);
 
         if (!response.ok) {
-          const error = await response
-            .json()
-            .catch(() => ({ error: "Unknown error" }));
+          const error = await readErrorBody(response);
           throw new Error(error.error || `HTTP ${response.status}`);
         }
         return response.json();
@@ -6675,9 +6723,7 @@ export function useSetActiveNamespace() {
           durationMs: Math.round(performance.now() - startedAt),
         });
         if (!response.ok) {
-          const error = await response
-            .json()
-            .catch(() => ({ error: "Unknown error" }));
+          const error = await readErrorBody(response);
           throw new Error(error.error || `HTTP ${response.status}`);
         }
         return response.json();