@skyhook-io/radar-app 1.9.7 → 1.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/radar-app",
-  "version": "1.9.7",
+  "version": "1.11.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",
@@ -37,11 +37,11 @@
     "react-markdown": "^10.1.0",
     "react-virtuoso": "^4.18.11",
     "remark-gfm": "^4.0.1",
-    "shiki": "^4.2.0",
+    "shiki": "^4.4.2",
     "yaml": "^2.9.0"
   },
   "peerDependencies": {
-    "@skyhook-io/k8s-ui": ">=1.11.0",
+    "@skyhook-io/k8s-ui": ">=1.13.0",
     "@tanstack/react-query": ">=5",
     "@xyflow/react": ">=12.0.0",
     "clsx": ">=2",
@@ -59,7 +59,7 @@
     "@tailwindcss/typography": "^0.5.20",
     "@tailwindcss/vite": "^4.3.3",
     "@tanstack/react-query": "^5.101.4",
-    "@types/node": "^26.1.1",
+    "@types/node": "^26.2.0",
     "@types/react": "^19.2.18",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^6.0.4",
@@ -70,7 +70,7 @@
     "eslint-plugin-react-hooks": "^7.1.1",
     "eslint-plugin-react-refresh": "^0.5.3",
     "globals": "^17.9.0",
-    "lucide-react": "^1.28.0",
+    "lucide-react": "^1.30.0",
     "postcss": "^8.5.25",
     "prettier": "^3.9.5",
     "react": "^19.2.8",
@@ -80,7 +80,7 @@
     "tailwindcss": "^4.3.3",
     "typescript": "^6.0.2",
     "typescript-eslint": "^8.62.0",
-    "vite": "^8.1.5"
+    "vite": "^8.2.1"
   },
   "sideEffects": [
     "*.css"

package/src/App.tsx

@@ -65,6 +65,7 @@ import { LargeClusterNamespacePicker } from './components/shared/LargeClusterNam
 import { SettingsDialog, type SettingsSectionId } from './components/settings/SettingsDialog'
 import type { APIResource, TopologyNode, GroupingMode, MainView, SelectedResource, SelectedHelmRelease, NodeKind, TopologyMode, Topology, K8sEvent } from './types'
 import { kindToPlural, pluralToKind, openExternal, apiVersionToGroup, relatedResourcePath, searchHitToSelectedResource } from './utils/navigation'
+import { findSelectedTopologyNode } from './utils/topology-selection'
 import { type OmnibarHandle } from './components/ui/Omnibar'
 import { RadarOmnibar } from './components/ui/RadarOmnibar'
 import type { ContextSwitcherHandle } from './components/ContextSwitcher'
@@ -1605,12 +1606,7 @@ function AppInner({ manageDocumentTitle = false, documentTitleSuffix, onClusterL
   // collisions — rebuilding the string can't match those reliably.
   const selectedNodeId = useMemo(() => {
     if (!selectedResource) return undefined
-    const ns = selectedResource.namespace || ''
-    const match = topology?.nodes.find(n =>
-      ((n.data.namespace as string) || '') === ns &&
-      n.name === selectedResource.name &&
-      (kindToPlural(n.kind) === selectedResource.kind || n.kind === selectedResource.kind)
-    )
+    const match = findSelectedTopologyNode(topology, selectedResource)
     return match?.id
   }, [selectedResource, topology])
 

package/src/api/client.ts

@@ -373,11 +373,6 @@ export interface DashboardChange {
   timestamp: string;
 }
 
-export interface DashboardTopologySummary {
-  nodeCount: number;
-  edgeCount: number;
-}
-
 export interface DashboardTopFlow {
   src: string;
   dst: string;
@@ -508,7 +503,9 @@ export interface DashboardCertificateHealth {
 
 export interface DashboardNetworkPolicyCoverage {
   totalPolicies: number;
+  stagedPolicies?: number;
   coveredWorkloads: number;
+  coveredWorkloadsIfStaged?: number;
   totalWorkloads: number;
 }
 
@@ -543,7 +540,6 @@ export interface DashboardResponse {
   problems: DashboardProblem[]
   resourceCounts: DashboardResourceCounts
   recentChanges: DashboardChange[]
-  topologySummary: DashboardTopologySummary
   trafficSummary: DashboardTrafficSummary | null
   metrics: DashboardMetrics | null
   metricsServerAvailable: boolean
@@ -4388,6 +4384,10 @@ export interface WorkloadRevision {
   isCurrent: boolean;
   replicas: number;
   template?: string; // Pod template spec as YAML (for revision diff)
+  // Argo Rollouts only: mid-canary isCurrent (rolling out) and isStable
+  // (serving traffic, what an abort reverts to) are different revisions.
+  isStable?: boolean;
+  podHash?: string;
 }
 
 export function useWorkloadRevisions(
@@ -4463,6 +4463,119 @@ export function useRollbackWorkload() {
   });
 }
 
+// ============================================================================
+// Argo Rollouts progressive-delivery control plane
+// ============================================================================
+
+export type RolloutAction =
+  | "abort"
+  | "retry"
+  | "promote"
+  | "promote-full"
+  | "skip-step";
+
+export interface RolloutCapabilities {
+  abort: boolean;
+  retry: boolean;
+  promote: boolean;
+  promoteFull: boolean;
+  skipStep: boolean;
+  rollback: boolean;
+  restart: boolean;
+  strategy: string;
+  terminating: boolean;
+}
+
+export function useRolloutCapabilities(
+  namespace: string,
+  name: string,
+  enabled = true,
+) {
+  return useQuery<RolloutCapabilities>({
+    queryKey: ["rollout-capabilities", namespace, name],
+    queryFn: () => fetchJSON(`/rollouts/${namespace}/${name}/capabilities`),
+    enabled: Boolean(namespace && name && enabled),
+  });
+}
+
+const ROLLOUT_ACTION_MESSAGES: Record<
+  RolloutAction,
+  { errorMessage: string; successMessage: string }
+> = {
+  abort: {
+    errorMessage: "Failed to abort rollout",
+    successMessage: "Rollout aborted — traffic reverted to the stable version",
+  },
+  retry: {
+    errorMessage: "Failed to retry rollout",
+    successMessage: "Rollout retried",
+  },
+  promote: {
+    errorMessage: "Failed to promote rollout",
+    successMessage: "Rollout promoted",
+  },
+  "promote-full": {
+    errorMessage: "Failed to promote rollout",
+    successMessage: "Rollout promoted to full — remaining steps skipped",
+  },
+  "skip-step": {
+    errorMessage: "Failed to skip step",
+    successMessage: "Skipped to the next step",
+  },
+};
+
+export function useRolloutAction() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async ({
+      action,
+      namespace,
+      name,
+    }: {
+      action: RolloutAction;
+      namespace: string;
+      name: string;
+    }) => {
+      const response = await apiFetch(
+        `${getApiBase()}/rollouts/${namespace}/${name}/${action}`,
+        { method: "POST" },
+      );
+      if (!response.ok) {
+        const error = await response
+          .json()
+          .catch(() => ({ error: "Unknown error" }));
+        throw new Error(error.error || `HTTP ${response.status}`);
+      }
+      return response.json();
+    },
+    // meta is static, so per-action success wording goes through onSuccess.
+    meta: { errorMessage: "Rollout action failed" },
+    onSuccess: (_, variables) => {
+      showApiSuccess(ROLLOUT_ACTION_MESSAGES[variables.action].successMessage);
+      queryClient.invalidateQueries({ queryKey: ["resources", "rollouts"] });
+      queryClient.invalidateQueries({
+        queryKey: ["resource", "rollouts", variables.namespace, variables.name],
+      });
+      queryClient.invalidateQueries({
+        queryKey: [
+          "rollout-capabilities",
+          variables.namespace,
+          variables.name,
+        ],
+      });
+      queryClient.invalidateQueries({
+        queryKey: [
+          "workload-revisions",
+          "rollouts",
+          variables.namespace,
+          variables.name,
+        ],
+      });
+      queryClient.invalidateQueries({ queryKey: ["topology"] });
+    },
+  });
+}
+
 // ============================================================================
 // Node operations (cordon, uncordon, drain)
 // ============================================================================
@@ -6213,6 +6326,14 @@ export interface DiagErrorEntry {
   level: string;
 }
 
+export interface DiagEnvVar {
+  key: string;
+  value: string;
+  /** Whether the variable exists at all. An empty value with set=true is a
+   *  distinct state — it suppresses the desktop app's own WebKit defaults. */
+  set: boolean;
+}
+
 export type DiagSyncPhase =
   "not_started" | "syncing_critical" | "syncing_deferred" | "complete";
 
@@ -6362,6 +6483,17 @@ export interface DiagnosticsSnapshot {
     connectedClients: number;
   };
   perf?: DiagPerfSnapshot;
+  /** Desktop app on Linux only — the host rendering environment. */
+  desktop?: {
+    sessionType?: string;
+    desktopEnvironment?: string;
+    displayServer?: string;
+    /** Every override key, including ones the host never set. */
+    renderOverrides?: DiagEnvVar[];
+    sandbox?: DiagEnvVar[];
+    webkitLibrary?: string;
+    gpuPolicy?: string;
+  };
   runtime?: {
     heapMB: number;
     heapObjectsK: number;

package/src/api/policy.test.ts

@@ -0,0 +1,38 @@
+import { describe, expect, it } from 'vitest'
+import { isSameCoverageSubject } from './policy'
+
+/**
+ * The drawer reuses one query observer as it opens different policies, so
+ * keeping the previous result unconditionally renders policy A's resources and
+ * counts under policy B's name — with no loading state to suggest otherwise.
+ * Only a changed `limit` may reuse it.
+ */
+const key = (policy: string, ns: string, limit: number, view: string) =>
+  ['policy', 'coverage', policy, ns, limit, view] as const
+
+describe('reusing a cached coverage result', () => {
+  it('reuses it when only the limit changed', () => {
+    expect(isSameCoverageSubject(key('require-limits', '', 0, ''), 'require-limits', '', '')).toBe(true)
+    expect(isSameCoverageSubject(key('require-limits', '', 5000, ''), 'require-limits', '', '')).toBe(true)
+  })
+
+  it('refuses it for a different policy', () => {
+    expect(isSameCoverageSubject(key('policy-a', '', 0, ''), 'policy-b', '', '')).toBe(false)
+  })
+
+  // Kyverno allows a namespaced Policy and a ClusterPolicy to share a name, so
+  // the namespace is what separates two same-named subjects.
+  it('refuses it for the same name in a different namespace', () => {
+    expect(isSameCoverageSubject(key('shared', 'team-a', 0, ''), 'shared', 'team-b', '')).toBe(false)
+    expect(isSameCoverageSubject(key('shared', 'team-a', 0, ''), 'shared', '', '')).toBe(false)
+  })
+
+  it('refuses it when the namespace view changed', () => {
+    expect(isSameCoverageSubject(key('p', '', 0, '?namespaces=app'), 'p', '', '?namespaces=other')).toBe(false)
+  })
+
+  it('refuses it when there is no previous query', () => {
+    expect(isSameCoverageSubject(undefined, 'p', '', '')).toBe(false)
+    expect(isSameCoverageSubject(['policy', 'coverage'], 'p', '', '')).toBe(false)
+  })
+})

package/src/api/policy.ts

@@ -0,0 +1,187 @@
+import { useMutation, useQuery } from '@tanstack/react-query'
+import type {
+  PolicyResourceResponse,
+  PolicyCoverageResponse,
+  PolicyQueuedResponse,
+  CNPGCatalogUsersResponse,
+  VeleroStoredBackupsResponse,
+  VeleroRunMessagesResponse,
+} from '@skyhook-io/k8s-ui'
+import { fetchJSON } from './client'
+
+// /api/policy/resource/{kind}/{namespace}/{name}
+//
+// Policy results change when the engine rescans rather than on every render, so
+// a short stale window keeps drawer navigation instant without going stale in a
+// way an operator would notice.
+export function usePolicyResource(kind: string, namespace: string, name: string, enabled = true) {
+  return useQuery<PolicyResourceResponse>({
+    queryKey: ['policy', 'resource', kind, namespace, name],
+    queryFn: () =>
+      fetchJSON<PolicyResourceResponse>(
+        `/policy/resource/${encodeURIComponent(kind)}/${encodeURIComponent(namespace)}/${encodeURIComponent(name)}`,
+      ),
+    enabled: enabled && !!kind && !!namespace && !!name,
+    staleTime: 15000,
+    // A 403 is a settled answer about this identity, not a blip — retrying
+    // would just repeat the denial on every drawer open.
+    retry: false,
+  })
+}
+
+// /api/policy/policies/{policy}
+//
+// The inverse lookup: every resource one policy recorded an outcome for. A
+// namespaced Kyverno Policy reports as "namespace/name", so the namespace is
+// passed through and the server tries both shapes.
+/**
+ * Whether a cached coverage result describes the same thing the caller is asking
+ * about now — same policy, namespace and view — so only a changed `limit`
+ * separates them. Exported for tests: the alternative is showing one policy's
+ * findings on another policy's page.
+ */
+export function isSameCoverageSubject(
+  prevKey: readonly unknown[] | undefined,
+  policy: string,
+  namespace: string,
+  viewFilter: string,
+): boolean {
+  if (!prevKey || prevKey.length < 6) return false
+  return prevKey[2] === policy && prevKey[3] === namespace && prevKey[5] === viewFilter
+}
+
+// `limit` raises the per-rule subject bound. It is part of the query key so
+// asking for more is a separate fetch rather than a mutation of the cached one,
+// and the default response stays cached for every other drawer open.
+export function usePolicyCoverage(
+  policy: string,
+  namespace?: string,
+  enabled = true,
+  limit?: number,
+  /**
+   * Whatever identifies the caller's current namespace view. The server applies
+   * that filter from session state, so it changes the response body without
+   * changing the URL — it has to be in the key or the cache serves the previous
+   * scope's answer under the new scope's heading.
+   */
+  viewFilter = '',
+) {
+  return useQuery<PolicyCoverageResponse>({
+    queryKey: ['policy', 'coverage', policy, namespace ?? '', limit ?? 0, viewFilter],
+    queryFn: () => {
+      const params = new URLSearchParams()
+      if (namespace) params.set('namespace', namespace)
+      if (limit) params.set('limit', String(limit))
+      const qs = params.toString()
+      return fetchJSON<PolicyCoverageResponse>(
+        `/policy/policies/${encodeURIComponent(policy)}${qs ? `?${qs}` : ''}`,
+      )
+    },
+    enabled: enabled && !!policy,
+    staleTime: 15000,
+    retry: false,
+    // Raising the limit is a new query key, and without this the section would
+    // fall back to its full loading state — asking to see MORE resources would
+    // briefly remove the ones already on screen.
+    //
+    // Only across a limit change, though. The drawer reuses this observer when
+    // it opens a different policy, so reusing unconditionally renders one
+    // policy's resources and counts under another's name, with no loading state
+    // to suggest they are not its own.
+    placeholderData: (prev, prevQuery) =>
+      isSameCoverageSubject(prevQuery?.queryKey, policy, namespace ?? '', viewFilter)
+        ? prev
+        : undefined,
+  })
+}
+
+// /api/policy/policies/{policy}/queued
+//
+// Kyverno records UpdateRequests in its own namespace whatever namespace the
+// policy lives in, so this cannot be a client-side list: omitting the namespace
+// on the generic resources endpoint means "apply the caller's namespace view
+// filter", and a reader narrowed to their own namespace would be answered for
+// the wrong scope. The server reads cluster-wide, gated on the caller's ability
+// to list the kind — the same shape as the RBAC reverse lookups.
+//
+// No view filter in the key: the answer does not depend on one.
+export function usePolicyQueued(policy: string, namespace = '', enabled = true) {
+  return useQuery<PolicyQueuedResponse>({
+    queryKey: ['policy', 'queued', policy, namespace],
+    queryFn: () =>
+      fetchJSON<PolicyQueuedResponse>(
+        `/policy/policies/${encodeURIComponent(policy)}/queued${
+          namespace ? `?namespace=${encodeURIComponent(namespace)}` : ''
+        }`,
+      ),
+    enabled: enabled && !!policy,
+    // These live for seconds, so a long stale window would describe a queue that
+    // has already drained.
+    staleTime: 5000,
+    retry: false,
+  })
+}
+
+// /api/cnpg/{imagecatalogs/{namespace}|clusterimagecatalogs}/{name}/clusters
+//
+// A ClusterImageCatalog is cluster-scoped and referenceable from any namespace,
+// so the answer's scope is not the subject's. Asking the generic resources
+// endpoint without a namespace inherits the caller's namespace view filter and
+// would report "nothing uses this" on the strength of whichever namespaces they
+// happen to be showing — an all-clear before an edit, derived from a browsing
+// preference. Read server-side, gated on listing Clusters.
+export function useCNPGCatalogUsers(name: string, namespace = '', enabled = true) {
+  const path = namespace
+    ? `/cnpg/imagecatalogs/${encodeURIComponent(namespace)}/${encodeURIComponent(name)}/clusters`
+    : `/cnpg/clusterimagecatalogs/${encodeURIComponent(name)}/clusters`
+  return useQuery<CNPGCatalogUsersResponse>({
+    queryKey: ['cnpg', 'catalog-users', namespace, name],
+    queryFn: () => fetchJSON<CNPGCatalogUsersResponse>(path),
+    enabled: enabled && !!name,
+    staleTime: 15000,
+    retry: false,
+  })
+}
+
+// /api/velero/backupstoragelocations/{namespace}/{name}/backups
+//
+// The inverse of the location a Backup names. Server-side and RBAC-gated for the
+// same reason as the other reverse lookups: "this location holds nothing" is a
+// sentence someone reads before deciding whether they can still restore, and it
+// must not come from a browsing filter or a lookup that failed.
+export function useVeleroStoredBackups(namespace: string, name: string, enabled = true) {
+  return useQuery<VeleroStoredBackupsResponse>({
+    queryKey: ['velero', 'stored-backups', namespace, name],
+    queryFn: () =>
+      fetchJSON<VeleroStoredBackupsResponse>(
+        `/velero/backupstoragelocations/${encodeURIComponent(namespace)}/${encodeURIComponent(name)}/backups`,
+      ),
+    enabled: enabled && !!namespace && !!name,
+    staleTime: 15000,
+    retry: false,
+  })
+}
+
+// POST /api/velero/{kind}/{namespace}/{name}/messages
+//
+// A mutation, like useRevealPodEnvironment — the closest thing this project
+// already has: data that is deliberately not on the object, fetched only when
+// someone asks for it. Reading a run's warnings makes Velero create a
+// DownloadRequest and pulls an object out of storage, which is not work to do on
+// every drawer open. The counts are already there to answer "is anything wrong".
+//
+// Mutation state is not keyed, so it is only correct while the drawer remounts
+// the renderer as the selected resource changes. It does — verified by
+// collapsing the cache key and watching the data still not leak across a switch.
+export function useVeleroRunMessages(kind: 'backups' | 'restores', namespace: string, name: string) {
+  return useMutation<VeleroRunMessagesResponse, Error, void>({
+    mutationFn: () =>
+      fetchJSON<VeleroRunMessagesResponse>(
+        `/velero/${kind}/${encodeURIComponent(namespace)}/${encodeURIComponent(name)}/messages`,
+        { method: 'POST' },
+      ),
+    // No meta.errorMessage: the failures here are the interesting part — a
+    // stopped controller, a denial, unreachable storage — and each is rendered
+    // in place next to the counts rather than thrown away in a toast.
+  })
+}

package/src/components/home/HomeView.tsx

@@ -14,6 +14,7 @@ import { GitOpsControllersCard } from './GitOpsControllersCard'
 import { CapacityCard } from './CapacityCard'
 import { useCapabilitiesContext } from '../../contexts/CapabilitiesContext'
 import { Tooltip } from '../ui/Tooltip'
+import { getNetworkPolicyResourceTarget } from '../../utils/navigation'
 import {
   AuditCard,
   FreshnessControl,
@@ -73,8 +74,13 @@ export function HomeView({ namespaces, topology, fallbackClusterLoadState, onNav
     })
     const nodeIds = new Set(nodes.map(n => n.id))
     const edges = topology.edges.filter(e => nodeIds.has(e.source) && nodeIds.has(e.target))
-    return { nodes, edges }
+    // Carry the frame's own flags through the filter. A large cluster serves an
+    // empty graph flagged requiresNamespaceFilter until SSE picks the pick up
+    // server-side, and a consumer that sees only nodes/edges reads that
+    // declined build as a namespace holding nothing.
+    return { ...topology, nodes, edges }
   }, [topology, namespaces])
+  const networkPolicyTarget = getNetworkPolicyResourceTarget(scopedTopology)
   // CRDs and Helm load lazily after main dashboard to keep initial load fast
   const { data: crdsData } = useDashboardCRDs(namespaces)
   const { data: helmData } = useDashboardHelm(namespaces)
@@ -150,7 +156,7 @@ export function HomeView({ namespaces, topology, fallbackClusterLoadState, onNav
             <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
               <TopologyPreview
                 topology={scopedTopology}
-                summary={data.topologySummary}
+                namespaceSelected={namespaces.length > 0}
                 onNavigate={() => onNavigateToView('topology')}
               />
               <ActivitySummary
@@ -198,7 +204,13 @@ export function HomeView({ namespaces, topology, fallbackClusterLoadState, onNav
                   <BandItem>
                     <NetworkPolicyCoverageCard
                       data={data.networkPolicyCoverage}
-                      onNavigate={() => onNavigateToResourceKind('networkpolicies', 'networking.k8s.io')}
+                      onNavigate={() => {
+                        if (networkPolicyTarget) {
+                          onNavigateToResourceKind(networkPolicyTarget.kind, networkPolicyTarget.group)
+                        } else {
+                          onNavigateToView('resources')
+                        }
+                      }}
                     />
                   </BandItem>
                 )}

package/src/components/home/NetworkPolicyCoverageCard.test.tsx

@@ -0,0 +1,81 @@
+import type React from "react";
+import { renderToString } from "react-dom/server";
+import { describe, expect, it } from "vitest";
+import { NetworkPolicyCoverageCard } from "./NetworkPolicyCoverageCard";
+
+// React separates adjacent text nodes with comment markers. Strip them so an
+// assertion matches the text a reader sees instead of a style-attribute value
+// that happens to contain the same characters.
+const render = (element: React.ReactElement) =>
+  renderToString(element).replaceAll("<!-- -->", "");
+
+// The card's own accent turns red at low coverage, so an assertion has to look
+// at the striped staged segment rather than at the whole card.
+const stagedSegmentClass = (html: string) => {
+  const match = html.match(/class="([^"]*)"[^>]*repeating-linear-gradient/);
+  if (!match) throw new Error("no staged segment rendered");
+  return match[1];
+};
+
+describe("NetworkPolicyCoverageCard", () => {
+  it("shows enforced and staged preview coverage separately", () => {
+    const html = render(
+      <NetworkPolicyCoverageCard
+        data={{
+          totalPolicies: 6,
+          stagedPolicies: 2,
+          coveredWorkloads: 3,
+          coveredWorkloadsIfStaged: 5,
+          totalWorkloads: 10,
+        }}
+        onNavigate={() => {}}
+      />,
+    );
+
+    expect(html).toContain("30%");
+    expect(html).toContain("(50% if staged applied)");
+    expect(html).toContain("Covered workloads");
+    expect(html).toContain("Covered if staged");
+    expect(html).toContain("Uncovered workloads");
+    expect(html).toContain("Uncovered if staged");
+    // The delta segment's tone carries the direction: amber for coverage the
+    // staged set would add. Its wording lives in a Tooltip portal, which server
+    // rendering does not emit, so the class is what an assertion can reach.
+    expect(stagedSegmentClass(html)).toContain("text-yellow-500");
+  });
+
+  it("shows coverage going down when a staged policy stages a deletion", () => {
+    const html = render(
+      <NetworkPolicyCoverageCard
+        data={{
+          totalPolicies: 6,
+          stagedPolicies: 1,
+          coveredWorkloads: 8,
+          coveredWorkloadsIfStaged: 5,
+          totalWorkloads: 10,
+        }}
+        onNavigate={() => {}}
+      />,
+    );
+
+    expect(html).toContain("80%");
+    expect(html).toContain("(50% if staged applied)");
+    // Red, not amber: this staged set takes coverage away.
+    expect(stagedSegmentClass(html)).toContain("text-red-500");
+    // The projected figure must not be clamped up to today's coverage.
+    expect(html).toContain("5/10");
+  });
+
+  it("keeps the original enforced-only presentation without staged policies", () => {
+    const html = render(
+      <NetworkPolicyCoverageCard
+        data={{ totalPolicies: 2, coveredWorkloads: 2, totalWorkloads: 4 }}
+        onNavigate={() => {}}
+      />,
+    );
+
+    expect(html).toContain("50%");
+    expect(html).not.toContain("if staged");
+    expect(html).not.toContain("repeating-linear-gradient");
+  });
+});