@skyhook-io/radar-app 1.13.5 → 1.14.1

package/src/components/traffic/TrafficFlowList.tsx

@@ -1,11 +1,13 @@
 import { useState, useMemo } from 'react'
 import { Virtuoso } from 'react-virtuoso'
-import type { TrafficFlow } from '../../types'
+import type { TrafficFlow, TrafficEndpoint } from '../../types'
 import { clsx } from 'clsx'
 import { ChevronDown, ChevronUp, ShieldCheck } from 'lucide-react'
 import { SEVERITY_BADGE, SEVERITY_TEXT } from '@skyhook-io/k8s-ui/utils/badge-colors'
-import { pluralize } from '@skyhook-io/k8s-ui'
+import { pluralize, StatusDot } from '@skyhook-io/k8s-ui'
+import type { StatusTone } from '@skyhook-io/k8s-ui'
 import { useFlowSearch } from './TrafficFlowListContext'
+import { isPolicyDropReason } from './trafficFilters'
 import { useQuery } from '@tanstack/react-query'
 import { fetchJSON } from '../../api/client'
 import { Tooltip } from '../ui/Tooltip'
@@ -250,14 +252,14 @@ export function TrafficFlowList({ flows }: TrafficFlowListProps) {
                     <div className="grid grid-cols-2 gap-x-6 gap-y-1">
                       <div>
                         <span className="text-theme-text-tertiary">Source: </span>
-                        <span className="text-theme-text-primary">{flow.source.name}</span>
-                        {flow.source.namespace && <span className="text-theme-text-tertiary"> ({flow.source.namespace})</span>}
+                        <span className="text-theme-text-primary">{endpointLabel(flow.source)}</span>
+                        {endpointNote(flow.source) && <span className="text-theme-text-tertiary"> ({endpointNote(flow.source)})</span>}
                         {flow.sourceService && <span className="text-theme-text-tertiary"> via {flow.sourceService}</span>}
                       </div>
                       <div>
                         <span className="text-theme-text-tertiary">Destination: </span>
-                        <span className="text-theme-text-primary">{flow.destination.name}</span>
-                        {flow.destination.namespace && <span className="text-theme-text-tertiary"> ({flow.destination.namespace})</span>}
+                        <span className="text-theme-text-primary">{endpointLabel(flow.destination)}</span>
+                        {endpointNote(flow.destination) && <span className="text-theme-text-tertiary"> ({endpointNote(flow.destination)})</span>}
                         {flow.destService && <span className="text-theme-text-tertiary"> via {flow.destService}</span>}
                       </div>
                       <div>
@@ -334,7 +336,8 @@ export function TrafficFlowList({ flows }: TrafficFlowListProps) {
                     {/* Drop reason + policy correlation */}
                     {flow.dropReasonDesc && (
                       <div className="pt-1 border-t border-theme-border/50">
-                        <span className={SEVERITY_TEXT.error}>Drop reason: {flow.dropReasonDesc}</span>
+                        <span className={SEVERITY_TEXT.error}>Dropped: {describeDropReason(flow.dropReasonDesc)}</span>
+                        <span className="text-theme-text-tertiary font-mono text-[10px]"> · {flow.dropReasonDesc}</span>
                       </div>
                     )}
                     {flow.verdict === 'dropped' && (
@@ -357,88 +360,244 @@ export function TrafficFlowList({ flows }: TrafficFlowListProps) {
   )
 }
 
+type PolicyVerdictWord = 'admitted' | 'denied' | 'undecidable' | 'no-policy'
+
 interface PolicyEvaluation {
   selectingPolicies: { name: string; namespace?: string; kind: string; effect: string; reason: string }[]
-  verdict: string
+  verdict: PolicyVerdictWord
+  reason?: string
+  /** What Kubernetes NetworkPolicies alone said, when the verdict was capped
+   *  because policies of another kind also govern the pod. */
+  coreVerdict?: PolicyVerdictWord
+  evaluated?: { direction?: string; pod?: string; peer?: string; port?: number; protocol?: string }
+}
+
+function isPolicyDrop(flow: TrafficFlow): boolean {
+  return isPolicyDropReason(flow.dropReasonDesc, (flow.policyVerdict?.deniedBy?.length ?? 0) + (flow.policyVerdict?.withheld ?? 0))
+}
+
+const EFFECT_TONE: Record<string, StatusTone> = {
+  admits: 'healthy',
+  does_not_admit: 'neutral',
+  undecidable: 'unknown',
+}
+
+const EFFECT_LABEL: Record<string, string> = {
+  admits: 'allows this traffic',
+  does_not_admit: 'no matching allow rule',
+  undecidable: "can't evaluate",
+}
+
+/** Plain words for the drop reasons an operator meets most; anything else is
+ *  the code itself, humanized. The code stays beside it either way. */
+const DROP_REASON_TEXT: Record<string, string> = {
+  POLICY_DENIED: 'blocked by network policy — no rule allowed it',
+  POLICY_DENY: 'blocked by an explicit deny rule',
+  AUTH_REQUIRED: 'mutual authentication required and not established',
+  NO_CONFIGURATION_AVAILABLE_TO_PERFORM_POLICY_DECISION: 'policy not yet loaded for this endpoint',
+  STALE_OR_UNROUTABLE_IP: 'no route to the destination address',
+  UNSUPPORTED_L3_PROTOCOL: 'unsupported network protocol',
+  INVALID_SOURCE_IP: 'the source address is not valid here',
+  NO_TUNNEL_OR_ENCAPSULATION_ENDPOINT: 'no tunnel endpoint for the destination node',
+}
+
+function describeDropReason(code: string | undefined): string {
+  if (!code) return 'reason not reported'
+  return DROP_REASON_TEXT[code] ?? code.toLowerCase().replace(/_/g, ' ')
+}
+
+/** A pod is named; anything else is best identified by the address the user
+ *  can act on, with the classification as the note. */
+function endpointLabel(ep: TrafficEndpoint): string {
+  if (ep.kind === 'Pod' || ep.kind === 'Service' || !ep.ip) return ep.name
+  return ep.ip
+}
+
+function endpointNote(ep: TrafficEndpoint): string {
+  if (ep.kind === 'Pod' || ep.kind === 'Service') return ep.namespace ?? ''
+  if (ep.kind === 'External') return 'outside the cluster'
+  if (ep.kind === 'Host') return ep.name === 'kube-apiserver' ? 'the API server' : 'a node or the host network'
+  return ep.ip ? 'not identified' : ''
+}
+
+function policyRef(p: { kind: string; namespace?: string; name: string }): string {
+  return p.namespace ? `${p.namespace}/${p.name}` : p.name
 }
 
 function PolicyCorrelation({ flow }: { flow: TrafficFlow }) {
-  const destLabels = flow.destination?.labels
-  const srcLabels = flow.source?.labels
-  const destNs = flow.destination?.namespace || ''
-  const destName = flow.destination?.name || ''
-  const srcNs = flow.source?.namespace || ''
-  const srcName = flow.source?.name || ''
-
-  const labelsParam = destLabels ? Object.entries(destLabels).map(([k, v]) => `${k}=${v}`).join(',') : ''
-  const srcLabelsParam = srcLabels ? Object.entries(srcLabels).map(([k, v]) => `${k}=${v}`).join(',') : ''
-
-  const direction = flow.trafficDirection || 'ingress'
-  // For egress: the evaluated pod is the source. For ingress: the destination.
-  const evalNs = direction === 'egress' ? srcNs : destNs
-  const evalName = direction === 'egress' ? srcName : destName
-  const evalLabels = direction === 'egress' ? srcLabelsParam : labelsParam
-
-  // Need either labels or pod name to resolve the evaluated pod
-  const canQuery = !!evalNs && (!!evalLabels || !!evalName)
-
-  const { data, isLoading, isError } = useQuery<PolicyEvaluation>({
-    queryKey: ['policy-evaluate', destNs, destName, labelsParam, srcNs, srcName, srcLabelsParam, direction],
+  const src = flow.source
+  const dst = flow.destination
+  const direction = flow.trafficDirection === 'ingress' || flow.trafficDirection === 'egress' ? flow.trafficDirection : ''
+  const evaluated = direction === 'egress' ? src : dst
+  const evaluatedRef = evaluated ? `${evaluated.namespace}/${evaluated.name}` : ''
+  const intoOutOf = direction === 'egress' ? 'out of' : 'into'
+  const observed = flow.lastSeen ? new Date(flow.lastSeen).toLocaleTimeString() : ''
+
+  // Only a pod has policies applied to it; a drop at a node or an external
+  // endpoint is not a NetworkPolicy question.
+  const canQuery = isPolicyDrop(flow) && (!direction || (evaluated?.kind === 'Pod' && !!evaluated.namespace && !!evaluated.name))
+
+  const { data, isLoading, error, dataUpdatedAt } = useQuery<PolicyEvaluation, Error>({
+    queryKey: ['policy-evaluate', direction, dst?.namespace, dst?.name, dst?.kind, dst?.ip, src?.namespace, src?.name, src?.kind, src?.ip, flow.port, flow.protocol],
     queryFn: () => {
-      const params = new URLSearchParams({ namespace: destNs })
-      if (labelsParam) params.set('labels', labelsParam)
-      if (!labelsParam && destName) params.set('podName', destName)
-      if (srcNs) params.set('sourceNamespace', srcNs)
-      if (srcLabelsParam) params.set('sourceLabels', srcLabelsParam)
-      else if (srcName && srcNs) params.set('sourcePodName', srcName)
-      if (direction === 'egress') params.set('direction', 'egress')
+      const params = new URLSearchParams()
+      if (direction) params.set('direction', direction)
+      if (dst?.namespace) params.set('namespace', dst.namespace)
+      if (dst?.name) params.set('podName', dst.name)
+      if (dst?.kind) params.set('destinationKind', dst.kind)
+      if (dst?.ip) params.set('destinationIP', dst.ip)
+      if (src?.namespace) params.set('sourceNamespace', src.namespace)
+      if (src?.name) params.set('sourcePodName', src.name)
+      if (src?.kind) params.set('sourceKind', src.kind)
+      if (src?.ip) params.set('sourceIP', src.ip)
+      if (flow.port) params.set('port', String(flow.port))
+      if (flow.protocol) params.set('protocol', flow.protocol)
       return fetchJSON(`/network-policies/evaluate?${params}`)
     },
     enabled: canQuery,
     staleTime: 30000,
+    // "As they are now" has to stay true while the row is open.
+    refetchInterval: 30000,
   })
+  const checkedAt = dataUpdatedAt ? new Date(dataUpdatedAt).toLocaleTimeString() : ''
+
+  const hubble = flow.policyVerdict
+  const hubbleDenied = hubble?.deniedBy ?? []
+  const hubbleAllowed = hubble?.allowedBy ?? []
+  const withheld = hubble?.withheld ?? 0
+
+  if (!isPolicyDrop(flow)) {
+    return (
+      <div className="pt-1 border-t border-theme-border/50 text-[10px] text-theme-text-tertiary">
+        {flow.dropReasonDesc
+          ? `Radar checks NetworkPolicies only for drops the plugin reports as policy drops; this one was reported as ${flow.dropReasonDesc}`
+          : "The plugin did not report why this flow was dropped, so Radar can't tell whether a policy was involved"}
+      </div>
+    )
+  }
 
-  if (!canQuery) return null
-  if (isLoading) return (
-    <div className="pt-1 border-t border-theme-border/50 text-theme-text-tertiary text-[10px]">
-      Evaluating policies...
-    </div>
-  )
-  if (isError) return (
-    <div className="pt-1 border-t border-theme-border/50 text-theme-text-tertiary text-[10px]">
-      Unable to evaluate policies
-    </div>
-  )
-  if (!data || !data.selectingPolicies || data.selectingPolicies.length === 0) return (
-    <div className="pt-1 border-t border-theme-border/50">
-      <div className="flex items-center gap-1 text-theme-text-tertiary">
-        <ShieldCheck className="w-3 h-3" />
-        <span className="text-[10px]">No NetworkPolicy selects this destination</span>
+  // What the plugin recorded when the packet was dropped is the ground
+  // truth; the current-policy check below is a reading of the policies as
+  // they are now, and is presented as a note under it rather than as a
+  // second verdict.
+  //
+  // Only a named deny is the account of a drop. Hubble can also record an
+  // allow on a dropped flow — at another layer (L3 allowed, then dropped at
+  // L7) or at the other end — and that is not why the packet was dropped.
+  const attribution = hubbleDenied.length > 0
+    ? { text: `Blocked by ${hubbleDenied.map((p) => `${p.kind} ${policyRef(p)}`).join(', ')}`, tone: 'unhealthy' as StatusTone }
+    : withheld > 0
+      ? { text: `Blocked by ${withheld === 1 ? 'a policy' : `${withheld} policies`} you don't have permission to read`, tone: 'unhealthy' as StatusTone }
+      : null
+  const alsoAllowed = hubbleAllowed.length > 0
+    ? `The plugin also recorded ${hubbleAllowed.map((p) => `${p.kind} ${policyRef(p)}`).join(', ')} allowing this flow at another layer or at the other end — not the reason for the drop.`
+    : ''
+
+  if (!canQuery && !attribution) {
+    return (
+      <div className="pt-1 border-t border-theme-border/50 text-[10px] text-theme-text-tertiary">
+        {evaluated?.kind && evaluated.kind !== 'Pod'
+          ? `NetworkPolicies apply to pods, and the ${direction === 'egress' ? 'source' : 'destination'} here is ${endpointNote(evaluated) || 'not a pod'}`
+          : 'Not enough is known about this flow to check policies'}
       </div>
-    </div>
-  )
+    )
+  }
+
+  // The current check, scoped to what it can establish: which policies
+  // allow this traffic at the evaluated pod, now. Never "the connection
+  // works" — the flow was dropped, and policies may have changed since.
+  // When another policy kind governs the pod, the Kubernetes reading is
+  // still worth stating — as a reading, not a verdict.
+  const v = data?.verdict
+  const core = data?.coreVerdict
+  const capped = v === 'undecidable' && !!core && core !== 'undecidable'
+  const current = v === 'admitted'
+    ? { text: `A current NetworkPolicy allows this traffic ${intoOutOf} ${evaluatedRef}`, tone: 'healthy' as StatusTone,
+        note: "Policies may have changed since the drop; this doesn't confirm a new connection will succeed." }
+    : v === 'denied'
+      ? { text: `No current NetworkPolicy allows this traffic ${intoOutOf} ${evaluatedRef}`, tone: 'unhealthy' as StatusTone, note: '' }
+      : v === 'no-policy'
+        ? { text: `No NetworkPolicy selects ${evaluatedRef} for ${direction === 'egress' ? 'outgoing' : 'incoming'} traffic`, tone: 'neutral' as StatusTone, note: '' }
+        : capped
+          ? { text: core === 'admitted'
+                ? `Kubernetes NetworkPolicies alone would allow this traffic ${intoOutOf} ${evaluatedRef} — but another policy kind also applies and was not evaluated`
+                : core === 'denied'
+                  ? `No Kubernetes NetworkPolicy allows this traffic ${intoOutOf} ${evaluatedRef} — but another policy kind also applies and could`
+                  : `No Kubernetes NetworkPolicy selects ${evaluatedRef} — but another policy kind applies and was not evaluated`,
+              tone: 'unknown' as StatusTone, note: '' }
+          : v === 'undecidable'
+            ? { text: "Radar can't complete the current NetworkPolicy check", tone: 'unknown' as StatusTone, note: '' }
+            : null
+  const peerNote = data?.evaluated?.peer && data.evaluated.peer.includes('(') ? `Peer: ${data.evaluated.peer}.` : ''
+  const currentNote = [current?.note, data?.reason, peerNote].filter(Boolean).join(' ')
+  const checkedText = checkedAt ? ` · checked ${checkedAt}` : ''
+
+  const rows = data?.selectingPolicies ?? []
+  const explainAdditive = rows.length > 1 && rows.some((r) => r.effect === 'does_not_admit')
 
   return (
     <div className="pt-1 border-t border-theme-border/50 space-y-1">
-      <div className="flex items-center gap-1 text-theme-text-secondary">
-        <ShieldCheck className="w-3 h-3" />
-        <span className="text-[10px] font-medium">
-          {data.selectingPolicies.length} selecting {data.selectingPolicies.length === 1 ? 'policy' : 'policies'}
-        </span>
-      </div>
-      {data.selectingPolicies.map((p, i) => (
-        <div key={i} className="flex items-start gap-1.5 ml-4">
-          <span className={clsx(
-            'shrink-0 mt-0.5 w-1.5 h-1.5 rounded-full',
-            p.effect === 'allow' ? 'bg-green-500' : p.effect === 'unknown' ? 'bg-yellow-500' : 'bg-red-500',
-          )} />
-          <div className="min-w-0">
-            <span className="text-[10px] text-theme-text-primary font-medium">{p.name}</span>
-            <span className="text-[10px] text-theme-text-tertiary ml-1">({p.kind})</span>
-            <div className="text-[10px] text-theme-text-tertiary">{p.reason}</div>
+      {attribution && (
+        <div className="flex items-start gap-1.5">
+          <StatusDot tone={attribution.tone} className="mt-1 shrink-0" />
+          <div className="min-w-0 text-[10px]">
+            <span className="text-theme-text-primary font-medium">{attribution.text}</span>
+            <span className="text-theme-text-tertiary"> · reported by the network plugin when the packet was dropped</span>
+          </div>
+        </div>
+      )}
+      {alsoAllowed && (
+        <div className={clsx('text-[10px] text-theme-text-tertiary', attribution && 'ml-4')}>{alsoAllowed}</div>
+      )}
+      {canQuery && isLoading && (
+        <div className="text-[10px] text-theme-text-tertiary">Checking current NetworkPolicies…</div>
+      )}
+      {canQuery && error && (
+        <div className="text-[10px] text-theme-text-tertiary">Couldn't check current NetworkPolicies: {error.message}</div>
+      )}
+      {current && (attribution ? (
+        <div className="ml-4 text-[10px]">
+          <span className="text-theme-text-secondary">Current check: </span>
+          <span className="text-theme-text-primary">{current.text}</span>
+          <span className="text-theme-text-tertiary">{observed ? ` · flow seen ${observed}` : ''}{checkedText}</span>
+          {currentNote && <div className="text-theme-text-tertiary">{currentNote}</div>}
+        </div>
+      ) : (
+        <div className="flex items-start gap-1.5">
+          <StatusDot tone={current.tone} className="mt-1 shrink-0" />
+          <div className="min-w-0 text-[10px]">
+            <span className="text-theme-text-primary font-medium">{current.text}</span>
+            <span className="text-theme-text-tertiary"> · against policies as they are now{observed ? `, flow seen ${observed}` : ''}{checkedText}</span>
+            {currentNote && <div className="text-theme-text-tertiary">{currentNote}</div>}
           </div>
         </div>
       ))}
+      {rows.length > 0 && (
+        <div className="ml-4 space-y-1">
+          <div className="flex items-center gap-1 text-theme-text-secondary">
+            <ShieldCheck className="w-3 h-3" />
+            <span className="text-[10px] font-medium">
+              {rows.length} {rows.length === 1 ? 'policy applies' : 'policies apply'} to {evaluatedRef}
+            </span>
+          </div>
+          {explainAdditive && (
+            <div className="text-[10px] text-theme-text-tertiary">
+              NetworkPolicies combine their allow rules: a policy with no matching rule doesn't override another policy's allow.
+            </div>
+          )}
+          {rows.map((p, i) => (
+            <div key={i} className="flex items-start gap-1.5">
+              <StatusDot tone={EFFECT_TONE[p.effect] ?? 'unknown'} className="mt-1 shrink-0" />
+              <div className="min-w-0">
+                <span className="text-[10px] text-theme-text-primary font-medium">{p.name}</span>
+                <span className="text-[10px] text-theme-text-tertiary ml-1">({p.kind})</span>
+                <span className="text-[10px] text-theme-text-secondary ml-1">— {EFFECT_LABEL[p.effect] ?? p.effect}</span>
+                <div className="text-[10px] text-theme-text-tertiary">{p.reason}</div>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
     </div>
   )
 }

package/src/components/traffic/TrafficGraph.tsx

@@ -23,7 +23,7 @@ import { isClusterAddon, type AddonMode } from './TrafficView'
 import { SEVERITY_BADGE, SEVERITY_DOT, SEVERITY_TEXT } from '@skyhook-io/k8s-ui/utils/badge-colors'
 import { getNamespaceColor } from '../../utils/traffic-colors'
 import { Tooltip } from '../ui/Tooltip'
-import { isRateBasedSource } from './trafficFilters'
+import { isRateBasedSource, isExternalKind } from './trafficFilters'
 
 const elk = new ELK()
 
@@ -172,7 +172,7 @@ const MAX_VISIBLE_PORTS = 4 // Maximum ports to show before "+N more"
 
 // Custom node component
 function TrafficNode({ data }: { data: TrafficNodeData }) {
-  const isExternal = data.kind.toLowerCase() === 'external'
+  const isExternal = isExternalKind(data.kind)
   const isInternet = data.kind === 'Internet'
   const isAddonInternet = data.kind === 'AddonInternet' // Separate internet for addon traffic
   const isAddon = data.kind === 'Addon'
@@ -515,7 +515,7 @@ function DetailsPanel({
               <Globe className="h-4 w-4 text-sky-400" />
             ) : nodeData?.kind === 'Addon' ? (
               <Server className="h-4 w-4 text-purple-400" />
-            ) : nodeData?.kind.toLowerCase() === 'external' ? (
+            ) : nodeData && isExternalKind(nodeData.kind) ? (
               <Globe className="h-4 w-4 text-yellow-500" />
             ) : (
               <Server className="h-4 w-4 text-blue-500" />
@@ -554,7 +554,7 @@ function DetailsPanel({
                     ? 'bg-sky-500/20 text-sky-400'
                     : nodeData.kind === 'Addon'
                       ? 'bg-purple-500/20 text-purple-400'
-                      : nodeData.kind.toLowerCase() === 'external'
+                      : isExternalKind(nodeData.kind)
                         ? 'bg-yellow-500/20 text-yellow-400'
                         : 'bg-blue-500/20 text-blue-400'
                 )}>{nodeData.kind === 'Addon' ? 'Cluster Addons' : nodeData.kind}</span>
@@ -1192,7 +1192,7 @@ export function TrafficGraph({ flows, hotPathThreshold = 0, showNamespaceGroups
             namespaceColor: showNamespaceGroups && !sourceIsAddon ? getNamespaceColor(flow.source.namespace) : undefined,
             isHotPath: hotNodes.has(sourceId),
             isAddonNode: sourceIsAddon, // AddonInternet is NOT an addon node
-            serviceCategory: flow.source.kind.toLowerCase() === 'external' ? serviceCategories?.get(flow.source.name) : undefined,
+            serviceCategory: isExternalKind(flow.source.kind) ? serviceCategories?.get(flow.source.name) : undefined,
             nodeHeight: NODE_BASE_HEIGHT,
             connLabel,
           },
@@ -1254,7 +1254,7 @@ export function TrafficGraph({ flows, hotPathThreshold = 0, showNamespaceGroups
             namespaceColor: showNamespaceGroups && !destIsAddon ? getNamespaceColor(flow.destination.namespace) : undefined,
             isHotPath: hotNodes.has(destId),
             isAddonNode: destIsAddon,
-            serviceCategory: flow.destination.kind.toLowerCase() === 'external' ? serviceCategories?.get(flow.destination.name) : undefined,
+            serviceCategory: isExternalKind(flow.destination.kind) ? serviceCategories?.get(flow.destination.name) : undefined,
             ports: destPorts,
             nodeHeight: getNodeHeight(destPorts),
             connLabel,

package/src/components/traffic/TrafficView.tsx

@@ -13,7 +13,7 @@ import { useDock } from '../dock'
 import { AlertBanner, EmptyState, PaneLoader, FreshnessControl } from '@skyhook-io/k8s-ui'
 import { useConnection } from '../../context/ConnectionContext'
 import { Tooltip } from '../ui/Tooltip'
-import { matchesStatusRanges, bucketsFromCounts, bucketsFromStatus, isRateBasedSource, keepAvailable, effectiveThreshold, volumeUnit, type VolumeUnit } from './trafficFilters'
+import { matchesStatusRanges, bucketsFromCounts, bucketsFromStatus, isRateBasedSource, keepAvailable, effectiveThreshold, volumeUnit, type VolumeUnit, isExternalKind } from './trafficFilters'
 
 // Addon types for filtering
 export type AddonMode = 'show' | 'group' | 'hide'
@@ -271,8 +271,12 @@ function isSystemEndpoint(name: string, namespace: string | undefined, kind: str
     return true
   }
 
-  // Cilium reserved identities (show up as External kind with reserved names)
-  if (kind === 'External' && CILIUM_RESERVED_IDENTITIES.has(name)) {
+  // Cilium reserved identities: nodes and the host network arrive as Host;
+  // health, init and unmanaged endpoints carry no usable identity.
+  if (kind === 'Host') {
+    return true
+  }
+  if ((kind === 'External' || kind === 'Unknown') && CILIUM_RESERVED_IDENTITIES.has(name)) {
     return true
   }
 
@@ -330,10 +334,7 @@ function isSystemEndpoint(name: string, namespace: string | undefined, kind: str
   return false
 }
 
-// Helper to check if endpoint is external (case-insensitive)
-function isExternal(kind: string): boolean {
-  return kind.toLowerCase() === 'external'
-}
+const isExternal = isExternalKind
 
 interface TrafficViewProps {
   namespaces: string[]
@@ -988,14 +989,14 @@ export function TrafficView({ namespaces }: TrafficViewProps) {
 
     flows.forEach(flow => {
       // Count source nodes
-      if (flow.source.namespace && flow.source.kind.toLowerCase() !== 'external') {
+      if (flow.source.namespace && !isExternalKind(flow.source.kind)) {
         if (!nsCounts.has(flow.source.namespace)) {
           nsCounts.set(flow.source.namespace, new Set())
         }
         nsCounts.get(flow.source.namespace)!.add(flow.source.name)
       }
       // Count destination nodes
-      if (flow.destination.namespace && flow.destination.kind.toLowerCase() !== 'external') {
+      if (flow.destination.namespace && !isExternalKind(flow.destination.kind)) {
         if (!nsCounts.has(flow.destination.namespace)) {
           nsCounts.set(flow.destination.namespace, new Set())
         }

package/src/components/traffic/trafficFilters.test.ts

@@ -1,5 +1,5 @@
 import { describe, it, expect } from 'vitest'
-import { matchesStatusRanges, bucketsFromCounts, bucketsFromStatus, isRateBasedSource, keepAvailable, effectiveThreshold, volumeUnit } from './trafficFilters'
+import { matchesStatusRanges, bucketsFromCounts, bucketsFromStatus, isRateBasedSource, keepAvailable, effectiveThreshold, volumeUnit, isExternalKind, isPolicyDropReason } from './trafficFilters'
 
 describe('matchesStatusRanges', () => {
   it('does not filter when nothing is selected', () => {
@@ -101,3 +101,30 @@ describe('volumeUnit', () => {
     expect(volumeUnit(undefined)).toBe('connections')
   })
 })
+
+describe('isExternalKind', () => {
+  it('places the world, nodes and unidentified endpoints outside the workloads', () => {
+    expect(isExternalKind('External')).toBe(true)
+    expect(isExternalKind('Host')).toBe(true)
+    expect(isExternalKind('Unknown')).toBe(true)
+  })
+  it('keeps pods and services inside', () => {
+    expect(isExternalKind('Pod')).toBe(false)
+    expect(isExternalKind('Service')).toBe(false)
+  })
+})
+
+describe('isPolicyDropReason', () => {
+  it('recognises both of Hubble\'s policy drop codes', () => {
+    expect(isPolicyDropReason('POLICY_DENIED', 0)).toBe(true)
+    expect(isPolicyDropReason('POLICY_DENY', 0)).toBe(true)
+  })
+  it('takes the plugin naming a policy as evidence even without a code', () => {
+    expect(isPolicyDropReason(undefined, 1)).toBe(true)
+  })
+  it('does not assume policy for other or missing reasons', () => {
+    expect(isPolicyDropReason('STALE_OR_UNROUTABLE_IP', 0)).toBe(false)
+    expect(isPolicyDropReason(undefined, 0)).toBe(false)
+    expect(isPolicyDropReason('', 0)).toBe(false)
+  })
+})

package/src/components/traffic/trafficFilters.ts

@@ -115,3 +115,34 @@ export function volumeUnit(isRateBased: boolean | undefined): VolumeUnit {
 export function effectiveThreshold(value: number, chosenUnit: VolumeUnit, currentUnit: VolumeUnit): number {
   return chosenUnit === currentUnit ? value : 0
 }
+
+/**
+ * Is this endpoint kind drawn outside the cluster's workloads?
+ *
+ * "External" is what every source reports for the world outside; Hubble also
+ * tells nodes (`Host`) and endpoints it could not identify (`Unknown`) apart,
+ * because a policy evaluation treats each differently. The graph does not:
+ * none of them is a workload, so they take the external node's place and
+ * styling, and stay out of namespace counts.
+ */
+export function isExternalKind(kind: string): boolean {
+  const k = kind.toLowerCase()
+  return k === 'external' || k === 'host' || k === 'unknown'
+}
+
+/**
+ * Is a drop a NetworkPolicy question at all?
+ *
+ * Only on positive evidence: Hubble's two policy drop reasons — `POLICY_DENIED`
+ * (no rule allowed it) and `POLICY_DENY` (an explicit deny rule) — or the
+ * plugin naming the policy itself. A drop with no reported reason is not
+ * assumed to be one. The two codes are spelled differently enough that a
+ * substring test on either misses the other.
+ */
+export function isPolicyDropReason(dropReasonDesc: string | undefined, deniedByCount: number): boolean {
+  // deniedByCount includes references withheld for permissions: the plugin
+  // still named a policy.
+  if (deniedByCount > 0) return true
+  const code = (dropReasonDesc ?? '').toUpperCase()
+  return code === 'POLICY_DENIED' || code === 'POLICY_DENY'
+}

package/src/components/ui/CommandPalette.tsx

@@ -1,5 +1,5 @@
 import { useState, useMemo, useRef, useEffect, useCallback } from 'react'
-import { TRANSITION_BACKDROP, TRANSITION_PANEL } from '../../utils/animation'
+import { TRANSITION_BACKDROP, TRANSITION_PANEL, overlayTransitionStyle } from '../../utils/animation'
 import { Search, X, ChevronRight } from 'lucide-react'
 import { clsx } from 'clsx'
 import { useCommandItems, bestScore, type CommandItem, type CommandItemCallbacks } from './command-items'
@@ -130,15 +130,19 @@ export function CommandPalette({ onClose, isOpen = true, ...callbacks }: Command
           TRANSITION_BACKDROP,
           isOpen ? 'opacity-100' : 'opacity-0'
         )}
+        style={overlayTransitionStyle(isOpen, 'dialog')}
         onClick={onClose}
       />
 
       {/* Panel */}
-      <div className={clsx(
-        'relative w-full max-w-lg mx-4 dialog overflow-hidden',
-        TRANSITION_PANEL,
-        isOpen ? 'opacity-100 scale-100 translate-y-0' : 'opacity-0 scale-[0.97] translate-y-3'
-      )}>
+      <div
+        className={clsx(
+          'relative w-full max-w-lg mx-4 dialog overflow-hidden',
+          TRANSITION_PANEL,
+          isOpen ? 'opacity-100 scale-100 translate-y-0' : 'opacity-0 scale-[0.97] translate-y-3'
+        )}
+        style={overlayTransitionStyle(isOpen, 'dialog')}
+      >
         {/* Search input */}
         <div className="flex items-center gap-3 px-4 py-3 border-b border-theme-border">
           <Search className="w-5 h-5 text-theme-text-secondary shrink-0" />

package/src/components/ui/DiagnosticsOverlay.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState, useCallback } from 'react'
 import { X, Copy, Check, ExternalLink } from 'lucide-react'
 import { clsx } from 'clsx'
-import { TRANSITION_BACKDROP, TRANSITION_PANEL } from '../../utils/animation'
+import { TRANSITION_BACKDROP, TRANSITION_PANEL, overlayTransitionStyle } from '../../utils/animation'
 import { openExternal } from '../../utils/navigation'
 import { useDiagnostics } from '../../api/client'
 import type { DiagnosticsSnapshot, DiagEnvVar, DiagMetricsSourceHealth, DiagDropRecord, DiagErrorEntry, DiagCacheSyncStatus, DiagInformerSyncStatus, DiagSyncPhase, DiagSampleWindow } from '../../api/client'
@@ -72,15 +72,19 @@ export function DiagnosticsOverlay({ onClose, isOpen = true }: DiagnosticsOverla
           TRANSITION_BACKDROP,
           isOpen ? 'opacity-100' : 'opacity-0'
         )}
+        style={overlayTransitionStyle(isOpen, 'dialog')}
         onClick={onClose}
       />
 
       {/* Panel */}
-      <div className={clsx(
-        'relative w-full max-w-2xl mx-4 dialog overflow-hidden flex flex-col max-h-[84vh]',
-        TRANSITION_PANEL,
-        isOpen ? 'opacity-100 scale-100 translate-y-0' : 'opacity-0 scale-[0.97] translate-y-3'
-      )}>
+      <div
+        className={clsx(
+          'relative w-full max-w-2xl mx-4 dialog overflow-hidden flex flex-col max-h-[84vh]',
+          TRANSITION_PANEL,
+          isOpen ? 'opacity-100 scale-100 translate-y-0' : 'opacity-0 scale-[0.97] translate-y-3'
+        )}
+        style={overlayTransitionStyle(isOpen, 'dialog')}
+      >
         {/* Header */}
         <div className="flex items-center justify-between px-5 py-3.5 border-b border-theme-border shrink-0">
           <div className="flex items-center gap-3">