@skyhook-io/radar-app 1.16.3 → 1.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/radar-app",
-  "version": "1.16.3",
+  "version": "1.17.0",
   "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",
@@ -42,7 +42,7 @@
     "yaml": "^2.9.0"
   },
   "peerDependencies": {
-    "@skyhook-io/k8s-ui": ">=1.16.3",
+    "@skyhook-io/k8s-ui": ">=1.17.0",
     "@tanstack/react-query": ">=5",
     "@xyflow/react": ">=12.0.0",
     "clsx": ">=2",

package/src/App.tsx

@@ -60,7 +60,7 @@ import { UsageDataPrompt } from './components/usage-data/UsageDataPrompt'
 import { ShortcutHelpOverlay } from './components/ui/ShortcutHelpOverlay'
 import { DiagnosticsOverlay } from './components/ui/DiagnosticsOverlay'
 import { useEventSource } from './hooks/useEventSource'
-import { debugNamespaceLog, useNamespaces, useNamespaceScope, useSetActiveNamespace, useSwitchContext, useAuthMe, useAudit } from './api/client'
+import { debugNamespaceLog, refetchOnResourceEvents, resourceEventKey, useNamespaces, useNamespaceScope, useSetActiveNamespace, useSwitchContext, useAuthMe, useAudit } from './api/client'
 import { buildAuditSeverityMap } from './utils/auditBadges'
 import { isInNamespaceScope, scopeNodesToNamespaces } from './utils/topology-namespace'
 import { routePath, apiUrl, getAuthHeaders, getCredentialsMode, stripBasename } from './api/config'
@@ -1069,12 +1069,13 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix, onClusterL
   //     update that arrived *after* the fast structural flush already ran.
   const fastInvalidationRef = useRef<{
     changedKinds: Set<string>   // every changed kind (any op) → detail drawer
+    changedObjects: Set<string> // resourceEventKey of every event → detail views that got a 404
     structuralKinds: Set<string> // add/delete kinds → list membership + counts + dashboard
     environmentNamespaces: Set<string>
     environmentPods: Map<string, Set<string>>
     secretsChanged: boolean
     timer: number | null
-  }>({ changedKinds: new Set(), structuralKinds: new Set(), environmentNamespaces: new Set(), environmentPods: new Map(), secretsChanged: false, timer: null })
+  }>({ changedKinds: new Set(), changedObjects: 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
@@ -1111,6 +1112,7 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix, onClusterL
 
     const fast = fastInvalidationRef.current
     fast.changedKinds.add(kind)
+    fast.changedObjects.add(resourceEventKey(kind, event.namespace ?? '', event.name))
     if (structural) fast.structuralKinds.add(kind)
     if (kind === 'secrets') fast.secretsChanged = true
     if ((kind === 'configmaps' || kind === 'secrets') && event.namespace) fast.environmentNamespaces.add(event.namespace)
@@ -1128,7 +1130,12 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix, onClusterL
       fast.timer = window.setTimeout(() => {
         const f = fastInvalidationRef.current
         for (const k of f.changedKinds) {
-          queryClient.invalidateQueries({ queryKey: ['resource', k] }) // open detail drawer stays live
+          // Open detail drawers stay live; a deleted one is left alone unless
+          // an event names it.
+          queryClient.invalidateQueries({
+            queryKey: ['resource', k],
+            predicate: (q) => refetchOnResourceEvents(q, k, f.changedObjects),
+          })
         }
         for (const k of f.structuralKinds) {
           queryClient.invalidateQueries({ queryKey: ['resources', k] }) // list membership changed
@@ -1156,7 +1163,7 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix, onClusterL
           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 }
+        fastInvalidationRef.current = { changedKinds: new Set(), changedObjects: new Set(), structuralKinds: new Set(), environmentNamespaces: new Set(), environmentPods: new Map(), secretsChanged: false, timer: null }
       }, 3000)
     }
 
@@ -1185,7 +1192,7 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix, onClusterL
     if (fastInvalidationRef.current.timer !== null) clearTimeout(fastInvalidationRef.current.timer)
     if (slowInvalidationRef.current.timer !== null) clearTimeout(slowInvalidationRef.current.timer)
     if (timelineInvalidationRef.current.timer !== null) clearTimeout(timelineInvalidationRef.current.timer)
-    fastInvalidationRef.current = { changedKinds: new Set(), structuralKinds: new Set(), environmentNamespaces: new Set(), environmentPods: new Map(), secretsChanged: false, timer: null }
+    fastInvalidationRef.current = { changedKinds: new Set(), changedObjects: new Set(), structuralKinds: new Set(), environmentNamespaces: new Set(), environmentPods: new Map(), secretsChanged: false, timer: null }
     slowInvalidationRef.current = { updatedKinds: new Set(), timer: null }
     timelineInvalidationRef.current = { timer: null }
   }, [])
@@ -1208,7 +1215,7 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix, onClusterL
       if (fastInvalidationRef.current.timer !== null) clearTimeout(fastInvalidationRef.current.timer)
       if (slowInvalidationRef.current.timer !== null) clearTimeout(slowInvalidationRef.current.timer)
       if (timelineInvalidationRef.current.timer !== null) clearTimeout(timelineInvalidationRef.current.timer)
-      fastInvalidationRef.current = { changedKinds: new Set(), structuralKinds: new Set(), environmentNamespaces: new Set(), environmentPods: new Map(), secretsChanged: false, timer: null }
+      fastInvalidationRef.current = { changedKinds: new Set(), changedObjects: new Set(), structuralKinds: new Set(), environmentNamespaces: new Set(), environmentPods: new Map(), secretsChanged: false, timer: null }
       slowInvalidationRef.current = { updatedKinds: new Set(), timer: null }
       timelineInvalidationRef.current = { timer: null }
 
@@ -2313,7 +2320,7 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix, onClusterL
 
         {/* Traffic view */}
         {!viewsSyncGated && mainView === 'traffic' && (
-          <TrafficView namespaces={namespaces} />
+          <TrafficView namespaces={namespaces} onSetNamespaces={(ns) => { setNamespaces(ns); setActiveNamespace.mutate({ namespaces: ns }) }} />
         )}
 
         {/* Cost detail view */}

package/src/RadarApp.tsx

@@ -46,6 +46,7 @@ import type {
 import type { ClusterLoadState } from "./types/clusterLoadState";
 import { TimelineSourceProvider } from "./context/TimelineSource";
 import type { TimelineSourceConfig } from "./api/timelineSource";
+import { TimelineRetentionNoteProvider } from "./context/TimelineCustomization";
 import { DiagnoseCustomizationProvider } from "./context/DiagnoseCustomization";
 import type {
   RenderDiagnoseAction,
@@ -180,6 +181,12 @@ export interface RadarAppProps {
    * React hook-order violation). Set it once at mount when possible.
    */
   timelineSource?: TimelineSourceConfig;
+  /**
+   * A note shown above the timeline and the Applications history, saying how
+   * far back history goes. Omitted → no note. Set it only when the timeline server
+   * actually limits history, or the note misstates what is shown.
+   */
+  timelineRetentionNote?: React.ReactNode;
 }
 
 // Default QueryClient with the same shape Radar's standalone binary uses.
@@ -236,6 +243,7 @@ export function RadarApp({
   onClusterLoadStateChange,
   onInvestigationFocus,
   timelineSource,
+  timelineRetentionNote,
 }: RadarAppProps): React.ReactElement {
   // Apply runtime config during render so module-level singletons are set
   // before children construct URLs. getApiBase() / getAuthHeaders() /
@@ -266,24 +274,26 @@ export function RadarApp({
             <RadarUpgradeHostProvider value={upgradeHost}>
               <FilterLocationBridge>
                 <TimelineSourceProvider config={timelineSource}>
-                  <DiagnoseCustomizationProvider
-                    value={renderDiagnoseAction ?? defaultDiagnoseAction}
-                    consentCopy={diagnoseConsent}
-                    renderRunActions={renderInvestigationRunActions}
-                    renderRefusalAction={renderInvestigationRefusalAction}
-                  >
-                    <DiagnoseProvider
-                      browserURLState={router !== "memory"}
-                      forceRouterURLState={router === "memory"}
-                      onFocusedRun={onInvestigationFocus}
+                  <TimelineRetentionNoteProvider value={timelineRetentionNote}>
+                    <DiagnoseCustomizationProvider
+                      value={renderDiagnoseAction ?? defaultDiagnoseAction}
+                      consentCopy={diagnoseConsent}
+                      renderRunActions={renderInvestigationRunActions}
+                      renderRefusalAction={renderInvestigationRefusalAction}
                     >
-                      <App
-                        manageDocumentTitle={manageDocumentTitle}
-                        documentTitleSuffix={documentTitleSuffix}
-                        onClusterLoadStateChange={onClusterLoadStateChange}
-                      />
-                    </DiagnoseProvider>
-                  </DiagnoseCustomizationProvider>
+                      <DiagnoseProvider
+                        browserURLState={router !== "memory"}
+                        forceRouterURLState={router === "memory"}
+                        onFocusedRun={onInvestigationFocus}
+                      >
+                        <App
+                          manageDocumentTitle={manageDocumentTitle}
+                          documentTitleSuffix={documentTitleSuffix}
+                          onClusterLoadStateChange={onClusterLoadStateChange}
+                        />
+                      </DiagnoseProvider>
+                    </DiagnoseCustomizationProvider>
+                  </TimelineRetentionNoteProvider>
                 </TimelineSourceProvider>
               </FilterLocationBridge>
             </RadarUpgradeHostProvider>

package/src/api/client.goneResource.test.ts

@@ -0,0 +1,49 @@
+import { describe, expect, it } from "vitest";
+import { ApiError, goneRecheckInterval, refetchOnResourceEvents, resourceEventKey } from "./client";
+
+const notFound = new ApiError('pods "web-1" not found', 404);
+const detail = (namespace: string, name: string, error: unknown) => ({
+  queryKey: ["resource", "pods", namespace, name, undefined],
+  state: { error },
+});
+
+describe("refetchOnResourceEvents", () => {
+  it("refetches a live detail view on any change to its kind", () => {
+    expect(refetchOnResourceEvents(detail("shop", "web-1", null), "pods", new Set())).toBe(true);
+  });
+
+  it("refetches a detail view that failed for a reason other than 404", () => {
+    const failed = detail("shop", "web-1", new ApiError("unavailable", 503));
+    expect(refetchOnResourceEvents(failed, "pods", new Set())).toBe(true);
+  });
+
+  it("leaves a deleted object alone when other objects of its kind change", () => {
+    // The production shape: pods churning next to an open view of a deleted
+    // pod refetched it, 404 every time, for as long as the view stayed open.
+    const named = new Set([resourceEventKey("pods", "shop", "web-2")]);
+    expect(refetchOnResourceEvents(detail("shop", "web-1", notFound), "pods", named)).toBe(false);
+  });
+
+  it("refetches a deleted object as soon as an event names it", () => {
+    // A StatefulSet recreates its pod under the same name.
+    const named = new Set([resourceEventKey("pods", "shop", "web-1")]);
+    expect(refetchOnResourceEvents(detail("shop", "web-1", notFound), "pods", named)).toBe(true);
+  });
+
+  it("matches a cluster-scoped object, whose namespace is empty", () => {
+    const query = { queryKey: ["resource", "nodes", "", "node-a", undefined], state: { error: notFound } };
+    expect(refetchOnResourceEvents(query, "nodes", new Set([resourceEventKey("nodes", "", "node-a")]))).toBe(true);
+  });
+});
+
+describe("goneRecheckInterval", () => {
+  it("re-checks a deleted object once a minute", () => {
+    expect(goneRecheckInterval({ state: { error: notFound } }, undefined)).toBe(60_000);
+    expect(goneRecheckInterval({ state: { error: notFound } }, 5_000)).toBe(60_000);
+  });
+
+  it("keeps the caller's interval otherwise", () => {
+    expect(goneRecheckInterval({ state: { error: null } }, 5_000)).toBe(5_000);
+    expect(goneRecheckInterval({ state: { error: new ApiError("unavailable", 503) } }, undefined)).toBeUndefined();
+  });
+});

package/src/api/client.ts

@@ -2,6 +2,7 @@ import { canonicalResourceGroup } from '@skyhook-io/k8s-ui/utils/api-resources'
 import { knownKindForPluralWithGroup, pluralToKind } from '@skyhook-io/k8s-ui/utils/navigation'
 import { useEffect, useRef } from 'react'
 import type { KueueAdmissionResponse } from '@skyhook-io/k8s-ui/types/scheduling'
+import type { GitOpsWriteEvidence } from '@skyhook-io/k8s-ui/utils/gitops-write-guard'
 import type {
   AppHistory,
   AppRow,
@@ -439,7 +440,7 @@ export interface DashboardResourceCounts {
   ingresses: number;
   gateways?: number;
   routes?: number;
-  nodes: { total: number; ready: number; notReady: number; cordoned: number };
+  nodes: { total: number; ready: number; notReady: number; cordoned: number; removing?: number; removingUnhealthy?: number };
   namespaces: number;
   jobs: { total: number; active: number; succeeded: number; failed: number };
   cronJobs: { total: number; active: number; suspended: number };
@@ -2508,6 +2509,24 @@ export function useGitOpsInsights(
   });
 }
 
+// Field-level evidence behind the GitOps write guard: whether each path is in
+// the object's last client-side apply or owned by its GitOps controller, plus
+// the owner's sync policy. Read server-side because Radar's caches strip both.
+export function fetchGitOpsWriteEvidence(body: {
+  kind: string;
+  group: string;
+  namespace: string;
+  name: string;
+  paths: string[];
+  owner?: { kind: string; group: string; namespace: string; name: string };
+}): Promise<GitOpsWriteEvidence> {
+  return fetchJSON<GitOpsWriteEvidence>("/gitops/write-evidence", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(body),
+  });
+}
+
 // Full Git-rendered desired-vs-live diff for one Argo CD managed resource.
 // ns/name identify the Application; the ref identifies the managed resource.
 // Fetched on demand — the caller mounts this only when the user opens "Full
@@ -2597,18 +2616,55 @@ export function fetchResourceWithRelationships<T>(
   );
 }
 
+/**
+ * How often an open detail view re-checks a resource the server said is gone.
+ * Watch events stop refetching it (see refetchOnResourceEvents), so this is
+ * what finds one recreated under the same name when no event names it, such
+ * as a ConfigMap: the server streams adds only for pods.
+ */
+const GONE_RECHECK_MS = 60_000;
+
+export function goneRecheckInterval(
+  query: { state: { error: unknown } },
+  otherwise: number | false | undefined,
+): number | false | undefined {
+  return isNotFoundError(query.state.error) ? GONE_RECHECK_MS : otherwise;
+}
+
+export function resourceEventKey(kind: string, namespace: string, name: string): string {
+  return `${kind}/${namespace}/${name}`;
+}
+
+/**
+ * Whether a batch of watch events for `kind` refetches this ['resource', kind,
+ * namespace, name, group] query. One the server answered 404 for is refetched
+ * only when an event in the batch names its object; otherwise every change to
+ * the kind would ask again for something that is gone.
+ */
+export function refetchOnResourceEvents(
+  query: { queryKey: readonly unknown[]; state: { error: unknown } },
+  kind: string,
+  namedObjects: ReadonlySet<string>,
+): boolean {
+  if (!isNotFoundError(query.state.error)) return true;
+  const [, , namespace, name] = query.queryKey;
+  return namedObjects.has(resourceEventKey(kind, String(namespace ?? ""), String(name ?? "")));
+}
+
+// `cacheScope` keeps a caller's copy apart from the shared one, for hosts
+// that point one QueryClient at several clusters (see useGitOpsWriteGuard).
 export function useResource<T>(
   kind: string,
   namespace: string,
   name: string,
   group?: string,
-  options?: { enabled?: boolean; refetchInterval?: number | false },
+  options?: { enabled?: boolean; refetchInterval?: number | false; cacheScope?: string },
 ) {
   const query = useQuery<ResourceWithRelationships<T>>({
-    queryKey: ["resource", kind, namespace, name, group],
+    queryKey: ["resource", kind, namespace, name, group, ...(options?.cacheScope ? [options.cacheScope] : [])],
     queryFn: () => fetchResourceWithRelationships<T>(kind, namespace, name, group),
     enabled: (options?.enabled ?? true) && Boolean(kind && name), // namespace can be empty for cluster-scoped resources
-    refetchInterval: options?.refetchInterval,
+    refetchInterval: (query) => goneRecheckInterval(query, options?.refetchInterval),
     // Kind still completing its initial sync: stay in loading and poll until
     // it becomes readable instead of erroring out (deep links during startup).
     retry: (failureCount, error) => {
@@ -2636,11 +2692,13 @@ export function useResourceWithRelationships<T>(
   namespace: string,
   name: string,
   group?: string,
+  options?: { cacheScope?: string },
 ) {
   return useQuery<ResourceWithRelationships<T>>({
-    queryKey: ["resource", kind, namespace, name, group],
+    queryKey: ["resource", kind, namespace, name, group, ...(options?.cacheScope ? [options.cacheScope] : [])],
     queryFn: () => fetchResourceWithRelationships<T>(kind, namespace, name, group),
     enabled: Boolean(kind && name),
+    refetchInterval: (query) => goneRecheckInterval(query, undefined),
     // Deep-linked detail views can mount while the kind's informer is still
     // completing its initial sync: keep polling instead of erroring out.
     retry: (failureCount, error) => {
@@ -2658,7 +2716,7 @@ export function useResources<T>(
   kind: string,
   namespace?: string,
   group?: string,
-  options?: { enabled?: boolean; refetchInterval?: number | false },
+  options?: { enabled?: boolean; refetchInterval?: number | false; cacheScope?: string },
 ) {
   const params = new URLSearchParams();
   if (namespace) params.set("namespace", namespace);
@@ -2666,7 +2724,7 @@ export function useResources<T>(
   const queryString = params.toString();
 
   return useQuery<T[]>({
-    queryKey: ["resources", kind, group, namespace],
+    queryKey: ["resources", kind, group, namespace, ...(options?.cacheScope ? [options.cacheScope] : [])],
     queryFn: () =>
       fetchJSON(`/resources/${kind}${queryString ? `?${queryString}` : ""}`),
     enabled: (options?.enabled ?? true) && Boolean(kind),
@@ -2981,6 +3039,38 @@ export function useWorkloadHistory(kind: string, namespace: string, name: string
   return query;
 }
 
+export interface ServiceEndpointSlicesResult {
+  items: any[];
+  /** More slices are labeled for the Service than the server returns in one page. */
+  truncated: boolean;
+}
+
+// The EndpointSlices published for one Service, selected server-side by the
+// kubernetes.io/service-name label. A Radar that predates the endpoint settles
+// as unsupported; ServiceRenderer then falls back to the namespace list.
+export function useServiceEndpointSlices(namespace: string, name: string, enabled = true) {
+  const { guard, gatedKey, support } = useRadarFeature("serviceEndpointSlices");
+  const query = useQuery<ServiceEndpointSlicesResult>({
+    queryKey: ["service-endpointslices", namespace, name, ...gatedKey],
+    queryFn: ({ signal }) =>
+      guard(() =>
+        fetchJSON<ServiceEndpointSlicesResult>(
+          `/services/${encodeURIComponent(namespace)}/${encodeURIComponent(name)}/endpointslices`,
+          signal,
+        ),
+      ),
+    retry: shouldRetryRadarQuery,
+    refetchInterval: (query) =>
+      query.state.error instanceof RadarFeatureUnsupportedError ? false : 30000,
+    enabled,
+  });
+  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));
 }
@@ -4102,7 +4192,7 @@ export function useUpdateResource() {
       });
       if (!response.ok) {
         const error = await readErrorBody(response);
-        const failure = new Error(error.error || `HTTP ${response.status}`);
+        const failure = new ApiError(error.error || `HTTP ${response.status}`, response.status, error);
         // 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) {
@@ -5332,6 +5422,23 @@ export function useDrainPlan() {
   });
 }
 
+export function useNodeRemovalPlan(name: string | undefined, enabled: boolean) {
+  const { guard, gatedKey } = useRadarFeature('drainPlan')
+  return useQuery<DrainPlan>({
+    queryKey: ['resources', 'node-removal-plan', name, ...gatedKey],
+    queryFn: ({ signal }) => guard(() => fetchJSON<DrainPlan>(drainPlanPath(name!), {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: drainPlanBody({ force: true, deleteEmptyDirData: true }),
+      signal,
+    })),
+    enabled: enabled && Boolean(name),
+    staleTime: ISSUES_REFRESH_INTERVAL_MS,
+    refetchInterval: (query) => query.state.error instanceof RadarFeatureUnsupportedError ? false : ISSUES_REFRESH_INTERVAL_MS,
+    retry: shouldRetryRadarQuery,
+  })
+}
+
 export function useDrainNode() {
   const queryClient = useQueryClient();
 

package/src/api/diagnose.test.ts

@@ -3,6 +3,7 @@ import {
   addTurn,
   createRun,
   DiagnoseError,
+  fetchAgents,
   subscribeRun,
   type DiagnoseStreamEvent,
 } from "./diagnose";
@@ -367,3 +368,42 @@ describe("refused requests", () => {
     expect((await startError()).message).toBe(message);
   });
 });
+
+describe("fetchAgents agents normalisation", () => {
+  const withFetch = async (body: unknown) => {
+    const original = globalThis.fetch;
+    globalThis.fetch = (async () =>
+      new Response(JSON.stringify(body), {
+        status: 200,
+        headers: { "content-type": "application/json" },
+      })) as typeof fetch;
+    try {
+      return await fetchAgents();
+    } finally {
+      globalThis.fetch = original;
+    }
+  };
+
+  it("turns the server's null agent list into an empty array", async () => {
+    // Older servers send null for a machine with no CLI installed, the case
+    // callers most need to survive.
+    const r = await withFetch({
+      agents: null,
+      enabled: false,
+      eligible: true,
+      consented: {},
+    });
+    expect(r.agents).toEqual([]);
+    expect(r.eligible).toBe(true);
+  });
+
+  it("leaves a populated list alone", async () => {
+    const r = await withFetch({
+      agents: [{ name: "claude", label: "Claude Code", supported: true }],
+      enabled: true,
+      eligible: true,
+      consented: {},
+    });
+    expect(r.agents.map((a) => a.name)).toEqual(["claude"]);
+  });
+});

package/src/api/diagnose.ts

@@ -29,6 +29,10 @@ export interface AgentsResponse {
   // "install an agent to enable this" (eligible && !enabled) apart from "not
   // available here" (auth/cloud/--no-mcp). Absent on older servers / embed hosts.
   eligible?: boolean;
+  // cliOverride: RADAR_AI_CLI_BIN is set, pinning the engine to one CLI. With
+  // CLIs detected and investigations still off, that variable is what's broken.
+  // Absent on older servers and embed hosts.
+  cliOverride?: boolean;
   // Machine-scoped consent per disclosure surface, recorded server-side
   // (~/.radar) — one acknowledgment covers the web panel and the CLI.
   consented?: Record<string, boolean>;
@@ -257,7 +261,14 @@ export async function fetchAgents(
     signal,
   });
   if (!res.ok) throw new Error(`agents: ${res.status}`);
-  return res.json();
+  const body = (await res.json()) as AgentsResponse & {
+    agents: AgentInfo[] | null;
+  };
+  // Older Radar servers send "no agent found" as JSON null, not []. This client
+  // also runs against servers of other versions, and that is the single most
+  // common response on a machine with no CLI, so normalise here rather than in
+  // every caller that reaches for .filter.
+  return { ...body, agents: body.agents ?? [] };
 }
 
 /**

package/src/api/radarFeatures.render.test.tsx

@@ -4,7 +4,7 @@ import { createRoot } from 'react-dom/client'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { afterEach, beforeEach, expect, it, vi } from 'vitest'
 import { getRadarUpgradeRequirement } from '@skyhook-io/k8s-ui'
-import { ApiError, isNotFoundError, useApplications, useCapacityPoolDetail, useDrainPlan, usePodEnvironment, useWorkloadHistory } from './client'
+import { ApiError, isNotFoundError, useApplications, useCapacityPoolDetail, useDrainPlan, useNodeRemovalPlan, usePodEnvironment, useWorkloadHistory } from './client'
 import { getApiBase } from './config'
 import { usePolicyResource } from './policy'
 import { isRadarFeatureUnsupported } from './radarFeatures'
@@ -153,6 +153,24 @@ function DrainPlanProbe() {
   return null
 }
 
+function RemovalPlanProbe() {
+  const { error } = useNodeRemovalPlan('worker-1', true)
+  return <span>{getRadarUpgradeRequirement(error) ? 'upgrade' : 'pending'}</span>
+}
+
+it('does not poll an old Radar for removal details', async () => {
+  host.radarVersion = 'v1.13.1'
+  await render(<RemovalPlanProbe />)
+  expect(element.textContent).toBe('upgrade')
+  expect(asked('/drain-plan')).toBe(false)
+})
+
+it('requests removal details once the drain-plan feature is supported', async () => {
+  client.setQueryData(['capabilities'], { features: { resourceIssues: true } })
+  await render(<RemovalPlanProbe />)
+  expect(asked('/drain-plan')).toBe(true)
+})
+
 it('never asks a Radar older than v1.14 for a drain plan', async () => {
   host.radarVersion = 'v1.13.1'
   await render(<DrainPlanProbe />)

package/src/api/radarFeatures.ts

@@ -35,6 +35,9 @@ export const RADAR_FEATURES = {
   drainPlan: { label: 'Drain plans', minimumVersion: 'v1.14.0' },
   applications: { label: 'Applications', minimumVersion: 'v1.7.7' },
   workloadHistory: { label: 'Workload history', flag: 'workloadHistory', flagShippedWithEndpoint: true },
+  serviceEndpointSlices: { label: 'Service EndpointSlice inventories', flag: 'serviceEndpointSlices', flagShippedWithEndpoint: true },
+  trafficRecords: { label: 'Flow records for a graph selection', flag: 'trafficRecords', flagShippedWithEndpoint: true },
+  gitopsWriteEvidence: { label: 'GitOps revert warnings', flag: 'gitopsWriteEvidence', flagShippedWithEndpoint: true },
 } as const satisfies Record<string, RadarFeatureSpec>
 
 export type RadarFeature = keyof typeof RADAR_FEATURES

package/src/api/traffic.sources.test.ts

@@ -0,0 +1,55 @@
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { QueryClient } from '@tanstack/react-query'
+import { detectTrafficSourcesAgain, fetchTrafficSources } from './traffic'
+
+const found = { detected: [{ name: 'hubble', status: 'available' }], notDetected: [] }
+const none = { detected: [], notDetected: [{ name: 'hubble', status: 'not_found' }] }
+
+function serve(responses: Record<string, unknown>, delays: Record<string, number> = {}) {
+  const calls: string[] = []
+  vi.stubGlobal('fetch', vi.fn(async (url: string, init?: RequestInit) => {
+    const path = url.slice(url.indexOf('/traffic/'))
+    calls.push(path)
+    if (delays[path]) {
+      await new Promise((resolve, reject) => {
+        const timer = setTimeout(resolve, delays[path])
+        init?.signal?.addEventListener('abort', () => { clearTimeout(timer); reject(new DOMException('aborted', 'AbortError')) })
+      })
+    }
+    return new Response(JSON.stringify(responses[path]), { status: 200 })
+  }))
+  return calls
+}
+
+afterEach(() => vi.unstubAllGlobals())
+
+describe('fetchTrafficSources', () => {
+  it('reuses a recent detection that found a source', async () => {
+    const calls = serve({ '/traffic/sources?recent=1': found })
+    const sources = await fetchTrafficSources(new QueryClient(), false)
+    expect(sources).toEqual(found)
+    expect(calls).toEqual(['/traffic/sources?recent=1'])
+  })
+
+  it('detects afresh before showing a recent detection that found none', async () => {
+    const calls = serve({ '/traffic/sources?recent=1': none, '/traffic/sources': found })
+    const sources = await fetchTrafficSources(new QueryClient(), false)
+    expect(sources).toEqual(found)
+    expect(calls).toEqual(['/traffic/sources?recent=1', '/traffic/sources'])
+  })
+})
+
+describe('detectTrafficSourcesAgain', () => {
+  it('detects afresh even while a recent detection is being fetched', async () => {
+    const calls = serve({ '/traffic/sources?recent=1': found, '/traffic/sources': none }, { '/traffic/sources?recent=1': 50 })
+    const client = new QueryClient()
+    void client.fetchQuery({ queryKey: ['traffic-sources'], queryFn: ({ signal }) => fetchTrafficSources(client, false, signal) }).catch(() => {})
+    const sources = await detectTrafficSourcesAgain(client)
+    expect(sources).toEqual(none)
+    expect(calls).toContain('/traffic/sources')
+    // The abandoned recent detection must not land afterwards.
+    await new Promise(resolve => setTimeout(resolve, 80))
+    expect(client.getQueryData(['traffic-sources'])).toEqual(none)
+    expect(client.getQueryData(['traffic-sources', 'recent'])).toEqual(none)
+  })
+})