@skyhook-io/k8s-ui 1.3.2 → 1.4.0

package/src/components/resources/renderers/NetworkPolicyRenderer.tsx

@@ -1,6 +1,7 @@
-import { Shield, ArrowDownToLine, ArrowUpFromLine } from 'lucide-react'
+import { Shield, ArrowDownToLine, ArrowUpFromLine, GitFork } from 'lucide-react'
 import { clsx } from 'clsx'
 import { Section, PropertyList, Property } from '../../ui/drawer-components'
+import { NetworkPolicyDiagram } from './NetworkPolicyDiagram'
 
 interface NetworkPolicyRendererProps {
   data: any
@@ -18,8 +19,16 @@ export function NetworkPolicyRenderer({ data }: NetworkPolicyRendererProps) {
   const hasIngress = policyTypes.includes('Ingress')
   const hasEgress = policyTypes.includes('Egress')
 
+  const hasDiagramContent = hasIngress || hasEgress
+
   return (
     <>
+      {hasDiagramContent && (
+        <Section title="Policy Flow" icon={GitFork} defaultExpanded>
+          <NetworkPolicyDiagram spec={spec} />
+        </Section>
+      )}
+
       <Section title="Target" icon={Shield}>
         <PropertyList>
           <Property

package/src/components/resources/renderers/ServiceRenderer.tsx

@@ -16,11 +16,10 @@ export function ServiceRenderer({ data, onCopy, copied, renderPortAction }: Serv
   const namespace = data.metadata?.namespace
   const serviceName = data.metadata?.name
 
-  // Check for issues
   const isLoadBalancer = spec.type === 'LoadBalancer'
+  const isExternalName = spec.type === 'ExternalName'
   const lbPending = isLoadBalancer && lbIngress.length === 0
   const hasNoSelector = !spec.selector || Object.keys(spec.selector).length === 0
-  const isExternalName = spec.type === 'ExternalName'
 
   return (
     <>
@@ -46,47 +45,60 @@ export function ServiceRenderer({ data, onCopy, copied, renderPortAction }: Serv
       <Section title="Service" icon={Globe}>
         <PropertyList>
           <Property label="Type" value={spec.type || 'ClusterIP'} />
-          <Property label="Cluster IP" value={spec.clusterIP} copyable onCopy={onCopy} copied={copied} />
+          {isExternalName ? (
+            <Property label="External Name" value={spec.externalName} copyable onCopy={onCopy} copied={copied} />
+          ) : (
+            <Property label="Cluster IP" value={spec.clusterIP} copyable onCopy={onCopy} copied={copied} />
+          )}
           {spec.externalIPs?.length > 0 && (
             <Property label="External IPs" value={spec.externalIPs.join(', ')} copyable onCopy={onCopy} copied={copied} />
           )}
-          {lbIngress.length > 0 && (
+          {lbIngress.map((ing: any, i: number) => (
             <Property
-              label="Load Balancer"
-              value={lbIngress[0].ip || lbIngress[0].hostname}
+              key={i}
+              label={lbIngress.length > 1 ? `Load Balancer ${i + 1}` : 'Load Balancer'}
+              value={ing.ip || ing.hostname}
               copyable
               onCopy={onCopy}
               copied={copied}
             />
-          )}
+          ))}
           <Property label="Session Affinity" value={spec.sessionAffinity} />
           <Property label="External Traffic" value={spec.externalTrafficPolicy} />
+          <Property label="Internal Traffic" value={spec.internalTrafficPolicy} />
+          {spec.ipFamilyPolicy && <Property label="IP Family Policy" value={spec.ipFamilyPolicy} />}
+          {spec.ipFamilies?.length > 0 && <Property label="IP Families" value={spec.ipFamilies.join(', ')} />}
         </PropertyList>
       </Section>
 
-      <Section title="Ports" defaultExpanded>
-        <div className="space-y-2">
-          {ports.map((port: any, i: number) => (
-            <div key={`${port.port}-${port.protocol || 'TCP'}`} className="card-inner text-sm">
-              <div className="flex items-center justify-between">
-                <span className="text-theme-text-primary font-medium">{port.name || `port-${i + 1}`}</span>
-                <div className="flex items-center gap-2">
-                  {renderPortAction?.({
-                    namespace,
-                    serviceName,
-                    port: port.port,
-                    protocol: port.protocol || 'TCP',
-                  })}
+      {ports.length > 0 && (
+        <Section title="Ports" defaultExpanded>
+          <div className="space-y-2">
+            {ports.map((port: any, i: number) => (
+              <div key={`${port.port}-${port.protocol || 'TCP'}`} className="card-inner text-sm">
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-2">
+                    <span className="text-theme-text-primary font-medium">{port.name || `port-${i + 1}`}</span>
+                    <span className="text-xs text-theme-text-tertiary">{port.protocol || 'TCP'}</span>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    {renderPortAction?.({
+                      namespace,
+                      serviceName,
+                      port: port.port,
+                      protocol: port.protocol || 'TCP',
+                    })}
+                  </div>
+                </div>
+                <div className="text-xs text-theme-text-secondary mt-1">
+                  {port.port}{port.targetPort != null && port.targetPort !== port.port ? ` → ${port.targetPort}` : ''}
+                  {port.nodePort ? ` (NodePort: ${port.nodePort})` : ''}
                 </div>
               </div>
-              <div className="text-xs text-theme-text-secondary mt-1">
-                {port.port} {port.targetPort !== port.port && `→ ${port.targetPort}`}
-                {port.nodePort && ` (NodePort: ${port.nodePort})`}
-              </div>
-            </div>
-          ))}
-        </div>
-      </Section>
+            ))}
+          </div>
+        </Section>
+      )}
 
       {spec.selector && (
         <Section title="Selector">

package/src/components/resources/renderers/index.ts

@@ -62,6 +62,9 @@ export * from './kyverno-cells'
 export * from './KyvernoPolicyReportRenderer'
 export * from './LeaseRenderer'
 export * from './NetworkPolicyRenderer'
+export * from './NetworkPolicyDiagram'
+export * from './CiliumNetworkPolicyRenderer'
+export * from './ClusterNetworkPolicyRenderer'
 export * from './NodeRenderer'
 export * from './OCIRepositoryRenderer'
 export * from './OrderRenderer'

package/src/components/shared/CreateResourceDialog.tsx

@@ -0,0 +1,236 @@
+import { useState, useCallback, useEffect } from 'react'
+import { X, Loader2, Check, AlertTriangle, ChevronDown, ChevronRight } from 'lucide-react'
+import { DialogPortal } from '../ui/DialogPortal'
+import { YamlEditor } from '../ui/YamlEditor'
+import { Tooltip } from '../ui/Tooltip'
+import { formatApplyError } from '../../utils/k8s-errors'
+
+export interface ApplyResult {
+  name: string
+  namespace: string
+  kind: string
+  created: boolean
+}
+
+export interface CreateResourceDialogProps {
+  open: boolean
+  onClose: () => void
+  initialYaml?: string
+  title?: string
+  // Injected by platform (decouples from data-fetching hooks)
+  onApply: (params: { yaml: string; mode: 'apply' | 'create'; dryRun: boolean }) => Promise<ApplyResult[]>
+  isApplying: boolean
+  /** Called after a successful non-dry-run apply with the first created resource */
+  onCreated?: (result: ApplyResult) => void
+}
+
+export function CreateResourceDialog({ open, onClose, initialYaml = '', title, onApply, isApplying, onCreated }: CreateResourceDialogProps) {
+  const [yaml, setYaml] = useState(initialYaml)
+  const [mode, setMode] = useState<'apply' | 'create'>('apply')
+  const [dryRun, setDryRun] = useState(false)
+  const [yamlValid, setYamlValid] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [success, setSuccess] = useState<string | null>(null)
+
+  // Reset state when dialog opens or initialYaml changes
+  useEffect(() => {
+    if (open) {
+      setYaml(initialYaml)
+      setMode('apply')
+      setDryRun(false)
+      setError(null)
+      setSuccess(null)
+    }
+  }, [open, initialYaml])
+
+  const handleClose = useCallback(() => {
+    if (isApplying) return
+    setError(null)
+    setSuccess(null)
+    setYaml('')
+    onClose()
+  }, [onClose, isApplying])
+
+  const handleValidate = useCallback((_isValid: boolean, errors: string[]) => {
+    setYamlValid(errors.length === 0)
+  }, [])
+
+  const handleSubmit = useCallback(async () => {
+    if (!yaml.trim()) {
+      setError('YAML content is required')
+      return
+    }
+    setError(null)
+    setSuccess(null)
+
+    try {
+      const results = await onApply({ yaml, mode, dryRun })
+      const action = mode === 'create' ? 'Created' : 'Applied'
+      const dryRunLabel = dryRun ? ' (dry run)' : ''
+
+      if (results.length === 1) {
+        const r = results[0]
+        setSuccess(`${action} ${r.kind} ${r.namespace ? r.namespace + '/' : ''}${r.name}${dryRunLabel}`)
+      } else {
+        setSuccess(`${action} ${results.length} resources${dryRunLabel}`)
+      }
+
+      if (!dryRun) {
+        if (onCreated && results.length > 0) {
+          // Close immediately and navigate to the created resource
+          handleClose()
+          onCreated(results[0])
+        } else {
+          setTimeout(handleClose, 1200)
+        }
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Unknown error')
+    }
+  }, [yaml, mode, dryRun, onApply, onCreated, handleClose])
+
+  const dialogTitle = title || 'Create Resource'
+  const submitLabel = mode === 'create' ? 'Create' : 'Apply'
+
+  return (
+    <DialogPortal open={open} onClose={handleClose} closable={!isApplying} className="w-[700px] max-h-[85vh] flex flex-col">
+      {/* Header */}
+      <div className="flex items-center justify-between px-5 py-3.5 border-b border-theme-border shrink-0">
+        <h2 className="text-sm font-semibold text-theme-text-primary">{dialogTitle}</h2>
+        <Tooltip content="Close">
+          <button
+            onClick={handleClose}
+            className="p-1 rounded hover:bg-theme-hover text-theme-text-secondary transition-colors"
+          >
+            <X className="w-4 h-4" />
+          </button>
+        </Tooltip>
+      </div>
+
+      {/* Editor */}
+      <div className="flex-1 min-h-0 px-5 py-3">
+        <YamlEditor
+          value={yaml}
+          onChange={setYaml}
+          height="400px"
+          onValidate={handleValidate}
+        />
+      </div>
+
+      {/* Status messages — single location for feedback (no toast) */}
+      {error && <ApplyErrorBanner error={error} />}
+      {success && (
+        <div className="mx-5 mb-2 px-3 py-2 rounded-md bg-emerald-500/10 border border-emerald-500/30 text-emerald-400 text-xs flex items-center gap-2">
+          <Check className="w-3.5 h-3.5 shrink-0" />
+          <span>{success}</span>
+        </div>
+      )}
+
+      {/* Footer */}
+      <div className="flex items-center justify-between px-5 py-3 border-t border-theme-border shrink-0">
+        <div className="flex items-center gap-3">
+          {/* Mode toggle — pill segmented control */}
+          <Tooltip content="Apply: create or update (idempotent). Create: fail if exists." position="bottom">
+            <div className="flex items-center rounded-md bg-theme-base border border-theme-border p-0.5" role="radiogroup" aria-label="Apply mode">
+              <button
+                onClick={() => setMode('apply')}
+                role="radio"
+                aria-checked={mode === 'apply'}
+                className={`px-2.5 py-1 rounded text-xs font-medium transition-colors ${
+                  mode === 'apply'
+                    ? 'bg-theme-elevated text-theme-text-primary shadow-sm'
+                    : 'text-theme-text-tertiary hover:text-theme-text-secondary'
+                }`}
+              >
+                Apply
+              </button>
+              <button
+                onClick={() => setMode('create')}
+                role="radio"
+                aria-checked={mode === 'create'}
+                className={`px-2.5 py-1 rounded text-xs font-medium transition-colors ${
+                  mode === 'create'
+                    ? 'bg-theme-elevated text-theme-text-primary shadow-sm'
+                    : 'text-theme-text-tertiary hover:text-theme-text-secondary'
+                }`}
+              >
+                Create
+              </button>
+            </div>
+          </Tooltip>
+
+          {/* Dry run checkbox */}
+          <Tooltip content="Validate against the cluster without persisting changes" position="bottom">
+            <label className="flex items-center gap-1.5 text-xs text-theme-text-secondary cursor-pointer">
+            <input
+              type="checkbox"
+              checked={dryRun}
+              onChange={(e) => setDryRun(e.target.checked)}
+              className="w-3.5 h-3.5 rounded border-theme-border bg-theme-base"
+            />
+            Dry run
+          </label>
+          </Tooltip>
+        </div>
+
+        <div className="flex items-center gap-2">
+          <button
+            onClick={handleClose}
+            className="px-3 py-1.5 text-xs rounded-lg hover:bg-theme-hover text-theme-text-secondary transition-colors"
+          >
+            Cancel
+          </button>
+          <button
+            onClick={handleSubmit}
+            disabled={isApplying || !yaml.trim() || !yamlValid}
+            className="px-4 py-1.5 text-xs rounded-lg btn-brand font-medium disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-1.5"
+          >
+            {isApplying ? (
+              <>
+                <Loader2 className="w-3.5 h-3.5 animate-spin" />
+                {submitLabel === 'Apply' ? 'Applying...' : 'Creating...'}
+              </>
+            ) : (
+              submitLabel
+            )}
+          </button>
+        </div>
+      </div>
+    </DialogPortal>
+  )
+}
+
+function ApplyErrorBanner({ error }: { error: string }) {
+  const [expanded, setExpanded] = useState(false)
+  const parsed = formatApplyError(error)
+  const hasFriendly = !!parsed.suggestion
+
+  return (
+    <div className="mx-5 mb-2 rounded-md bg-red-500/10 border border-red-500/30 text-xs">
+      <div className="px-3 py-2 flex items-start gap-2 text-red-400">
+        <AlertTriangle className="w-3.5 h-3.5 mt-0.5 shrink-0" />
+        <div className="min-w-0 flex-1">
+          <span className="font-medium">{parsed.summary}</span>
+          {parsed.suggestion && (
+            <p className="mt-1 text-red-400/80">{parsed.suggestion}</p>
+          )}
+        </div>
+      </div>
+      {hasFriendly && (
+        <button
+          type="button"
+          onClick={() => setExpanded(!expanded)}
+          className="flex items-center gap-1 px-3 pb-2 text-red-400/60 hover:text-red-400/80 transition-colors"
+        >
+          {expanded ? <ChevronDown className="w-3 h-3" /> : <ChevronRight className="w-3 h-3" />}
+          <span>Details</span>
+        </button>
+      )}
+      {(expanded || !hasFriendly) && hasFriendly && (
+        <div className="px-3 pb-2 text-red-400/60 break-all font-mono leading-relaxed">
+          {parsed.raw}
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/shared/EditableYamlView.tsx

@@ -1,6 +1,7 @@
 import { useState, useCallback } from 'react'
 import {
   Copy,
+  CopyPlus,
   Check,
   RefreshCw,
   Pencil,
@@ -11,6 +12,7 @@ import {
 import { stringify as yamlStringify } from 'yaml'
 import { CodeViewer } from '../ui/CodeViewer'
 import { YamlEditor } from '../ui/YamlEditor'
+import { Tooltip } from '../ui/Tooltip'
 import type { SelectedResource } from '../../types'
 
 // ============================================================================
@@ -102,9 +104,11 @@ interface EditableYamlViewProps {
   isSaving?: boolean
   /** Error message from the last save attempt */
   saveError?: string | null
+  /** Duplicate handler — opens create dialog with this resource's YAML */
+  onDuplicate?: (params: { kind: string; namespace: string; name: string; yaml: string }) => void
 }
 
-export function EditableYamlView({ resource, data, onCopy, copied, onSaved, onSave, isSaving, saveError }: EditableYamlViewProps) {
+export function EditableYamlView({ resource, data, onCopy, copied, onSaved, onSave, isSaving, saveError, onDuplicate }: EditableYamlViewProps) {
   const [isEditing, setIsEditing] = useState(false)
   const [editedYaml, setEditedYaml] = useState('')
   const [yamlErrors, setYamlErrors] = useState<string[]>([])
@@ -289,6 +293,17 @@ export function EditableYamlView({ resource, data, onCopy, copied, onSaved, onSa
             {copied ? <Check className="w-3.5 h-3.5 text-green-400" /> : <Copy className="w-3.5 h-3.5" />}
             Copy
           </button>
+          {onDuplicate && (
+            <Tooltip content="Duplicate as new resource">
+              <button
+                onClick={() => onDuplicate({ kind: resource.kind, namespace: resource.namespace, name: resource.name, yaml: yamlContent })}
+                className="flex items-center gap-1 px-2 py-1 text-xs text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-elevated rounded"
+              >
+                <CopyPlus className="w-3.5 h-3.5" />
+                Duplicate
+              </button>
+            </Tooltip>
+          )}
         </div>
       </div>
       <CodeViewer

package/src/components/shared/ResourceActionsBar.tsx

@@ -18,6 +18,7 @@ import {
 } from 'lucide-react'
 import { createTwoFilesPatch } from 'diff'
 import { clsx } from 'clsx'
+import { Tooltip } from '../ui/Tooltip'
 import { ForceDeleteConfirmDialog, type CascadeDependent } from '../ui/ForceDeleteConfirmDialog'
 import { ConfirmDialog } from '../ui/ConfirmDialog'
 import { DialogPortal } from '../ui/DialogPortal'
@@ -483,13 +484,14 @@ export function ResourceActionsBar({
       )}
 
       {onDelete && (
-        <button
-          onClick={() => setShowDeleteConfirm(true)}
-          className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-red-400 hover:text-white hover:bg-red-600 border border-red-400/50 hover:border-red-600 rounded-lg transition-colors"
-        >
-          <Trash2 className="w-3.5 h-3.5" />
-          Delete
-        </button>
+        <Tooltip content="Delete resource">
+          <button
+            onClick={() => setShowDeleteConfirm(true)}
+            className="p-1.5 text-theme-text-secondary border border-theme-border-light rounded-lg hover:text-red-400 hover:border-red-400/50 hover:bg-red-500/10 transition-colors"
+          >
+            <Trash2 className="w-3.5 h-3.5" />
+          </button>
+        </Tooltip>
       )}
 
       <ForceDeleteConfirmDialog

package/src/components/shared/ResourceRendererDispatch.tsx

@@ -97,6 +97,8 @@ import {
   SealedSecretRenderer,
   WorkflowTemplateRenderer,
   NetworkPolicyRenderer,
+  CiliumNetworkPolicyRenderer,
+  ClusterNetworkPolicyRenderer,
   PodDisruptionBudgetRenderer,
   ServiceAccountRenderer,
   RoleRenderer,
@@ -212,7 +214,10 @@ const KNOWN_KINDS = new Set([
   'storageclasses', 'certificaterequests', 'clusterissuers', 'issuers',
   'orders', 'challenges',
   'gateways', 'gatewayclasses', 'httproutes', 'grpcroutes', 'tcproutes', 'tlsroutes', 'sealedsecrets', 'workflowtemplates',
-  'networkpolicies', 'poddisruptionbudgets', 'serviceaccounts',
+  'networkpolicies', 'networkpolicy',
+  'ciliumnetworkpolicies', 'ciliumnetworkpolicy', 'ciliumclusterwidenetworkpolicies', 'ciliumclusterwidenetworkpolicy',
+  'clusternetworkpolicies', 'clusternetworkpolicy',
+  'poddisruptionbudgets', 'serviceaccounts',
   'roles', 'clusterroles', 'rolebindings', 'clusterrolebindings',
   'events', 'gitrepositories', 'ocirepositories', 'helmrepositories',
   'kustomizations', 'helmreleases', 'alerts', 'applications',
@@ -350,7 +355,9 @@ export function ResourceRendererDispatch({
         {kind === 'tlsroutes' && <SimpleRouteRenderer data={data} kind="TLSRoute" onNavigate={onNavigate} />}
         {kind === 'sealedsecrets' && <SealedSecretRenderer data={data} />}
         {kind === 'workflowtemplates' && <WorkflowTemplateRenderer data={data} />}
-        {kind === 'networkpolicies' && <NetworkPolicyRenderer data={data} />}
+        {(kind === 'networkpolicies' || kind === 'networkpolicy') && <NetworkPolicyRenderer data={data} />}
+        {(kind === 'ciliumnetworkpolicies' || kind === 'ciliumnetworkpolicy' || kind === 'ciliumclusterwidenetworkpolicies' || kind === 'ciliumclusterwidenetworkpolicy') && <CiliumNetworkPolicyRenderer data={data} />}
+        {(kind === 'clusternetworkpolicies' || kind === 'clusternetworkpolicy') && <ClusterNetworkPolicyRenderer data={data} />}
         {kind === 'poddisruptionbudgets' && <PodDisruptionBudgetRenderer data={data} />}
         {kind === 'serviceaccounts' && <ServiceAccountRenderer data={data} />}
         {(kind === 'roles' || kind === 'clusterroles') && <RoleRenderer data={data} />}

package/src/components/shared/index.ts

@@ -1,3 +1,4 @@
 export { ResourceRendererDispatch, getResourceStatus, type RendererOverrides } from './ResourceRendererDispatch'
 export { EditableYamlView, SaveSuccessAnimation } from './EditableYamlView'
 export { ResourceActionsBar, RevisionHistoryDialog } from './ResourceActionsBar'
+export { CreateResourceDialog, type CreateResourceDialogProps, type ApplyResult } from './CreateResourceDialog'

package/src/components/topology/K8sResourceNode.tsx

@@ -302,6 +302,7 @@ export const K8sResourceNode = memo(function K8sResourceNode({
   const canCollapse = isPodGroup && onCollapse && isExpanded
   const statusIssue = nodeData.statusIssue as string | undefined
   const issueTooltip = getIssueTooltip(statusIssue)
+  const policyStatus = nodeData.policyStatus as string | undefined
 
   // CSS class for icon (replaces Lucide SVG - saves ~5 DOM elements per node)
   const iconClass = `topology-icon topology-icon-${kind.toLowerCase()}`
@@ -417,6 +418,20 @@ export const K8sResourceNode = memo(function K8sResourceNode({
             )}
           </div>
 
+          {/* Network Policy coverage indicator */}
+          {policyStatus && (
+            <Tooltip content={policyStatus === 'protected' ? 'Protected by NetworkPolicy' : 'No NetworkPolicy coverage'} position="right">
+              <span className={clsx(
+                'inline-flex items-center justify-center w-3.5 h-3.5 rounded-sm text-[8px] font-bold cursor-help',
+                policyStatus === 'protected'
+                  ? 'bg-green-500/20 text-green-500 border border-green-500/30'
+                  : 'bg-yellow-500/20 text-yellow-500 border border-yellow-500/30',
+              )}>
+                {policyStatus === 'protected' ? '✓' : '!'}
+              </span>
+            </Tooltip>
+          )}
+
           {/* Name */}
           <div className="text-sm font-medium text-theme-text-primary truncate pr-1">
             {name}

package/src/components/topology/TopologyControls.tsx

@@ -1,4 +1,4 @@
-import { FolderTree } from 'lucide-react'
+import { FolderTree, ShieldCheck } from 'lucide-react'
 import type { TopologyMode, GroupingMode } from '../../types/core'
 
 interface TopologyControlsProps {
@@ -7,6 +7,8 @@ interface TopologyControlsProps {
   groupingMode: GroupingMode
   onGroupingModeChange: (mode: GroupingMode) => void
   showNoGrouping?: boolean
+  showPolicyEffect?: boolean
+  onShowPolicyEffectChange?: (show: boolean) => void
 }
 
 export function TopologyControls({
@@ -15,9 +17,27 @@ export function TopologyControls({
   groupingMode,
   onGroupingModeChange,
   showNoGrouping = true,
+  showPolicyEffect = false,
+  onShowPolicyEffectChange,
 }: TopologyControlsProps) {
   return (
     <div className="absolute top-4 right-4 z-10 flex items-center gap-2">
+      {/* Policy effect toggle */}
+      {onShowPolicyEffectChange && (
+        <button
+          onClick={() => onShowPolicyEffectChange(!showPolicyEffect)}
+          className={`flex items-center gap-1.5 px-2.5 py-1.5 text-xs rounded-lg border transition-colors ${
+            showPolicyEffect
+              ? 'bg-indigo-600 text-white border-indigo-600'
+              : 'bg-theme-surface/90 backdrop-blur text-theme-text-secondary border-theme-border hover:text-theme-text-primary'
+          }`}
+          title="Show NetworkPolicy effects on edges"
+        >
+          <ShieldCheck className="w-3.5 h-3.5" />
+          Policies
+        </button>
+      )}
+
       {/* Grouping selector */}
       <div className="flex items-center gap-1.5 px-2 py-1.5 bg-theme-surface/90 backdrop-blur border border-theme-border rounded-lg">
         <FolderTree className="w-3.5 h-3.5 text-theme-text-secondary" />

package/src/components/topology/TopologyGraph.tsx

@@ -73,7 +73,7 @@ const LARGE_CLUSTER_NS_THRESHOLD = 5
 
 // Build edges, handling collapsed groups
 function buildEdges(
-  topologyEdges: { id: string; source: string; target: string; type: string }[],
+  topologyEdges: TopologyEdge[],
   collapsedGroups: Set<string>,
   groupMap: Map<string, string[]>,
   groupingMode: GroupingMode,

package/src/components/ui/Badge.tsx

@@ -73,6 +73,10 @@ const KIND: Record<string, string> = {
   HorizontalPodAutoscaler: 'bg-pink-100 text-pink-800 border-pink-300 dark:bg-pink-950/50 dark:text-pink-300 dark:border-pink-700/40',
   PersistentVolumeClaim:   'bg-cyan-100 text-cyan-800 border-cyan-300 dark:bg-cyan-950/50 dark:text-cyan-400 dark:border-cyan-700/40',
   PodDisruptionBudget:     'bg-orange-100 text-orange-800 border-orange-300 dark:bg-orange-950/50 dark:text-orange-300 dark:border-orange-700/40',
+  NetworkPolicy:                      'bg-indigo-100 text-indigo-800 border-indigo-300 dark:bg-indigo-950/50 dark:text-indigo-300 dark:border-indigo-700/40',
+  CiliumNetworkPolicy:                'bg-indigo-100 text-indigo-800 border-indigo-300 dark:bg-indigo-950/50 dark:text-indigo-300 dark:border-indigo-700/40',
+  CiliumClusterwideNetworkPolicy:     'bg-indigo-100 text-indigo-800 border-indigo-300 dark:bg-indigo-950/50 dark:text-indigo-300 dark:border-indigo-700/40',
+  ClusterNetworkPolicy:               'bg-violet-100 text-violet-800 border-violet-300 dark:bg-violet-950/50 dark:text-violet-300 dark:border-violet-700/40',
 
   // Cluster-scoped
   Node:          'bg-sky-100 text-sky-700 border-sky-300 dark:bg-sky-950/50 dark:text-sky-400 dark:border-sky-700/40',
@@ -147,6 +151,10 @@ export function getKindColorClass(kind: string): string {
     horizontalpodautoscalers: 'HorizontalPodAutoscaler',
     persistentvolumeclaims: 'PersistentVolumeClaim',
     poddisruptionbudgets: 'PodDisruptionBudget',
+    networkpolicies: 'NetworkPolicy',
+    ciliumnetworkpolicies: 'CiliumNetworkPolicy',
+    ciliumclusterwidenetworkpolicies: 'CiliumClusterwideNetworkPolicy',
+    clusternetworkpolicies: 'ClusterNetworkPolicy',
     rollouts: 'Rollout', httproutes: 'HTTPRoute', grpcroutes: 'GRPCRoute',
     events: 'Event', helmreleases: 'HelmRelease',
   }

package/src/components/ui/drawer-components.tsx

@@ -117,7 +117,7 @@ export function Property({ label, value, copyable, onCopy, copied }: PropertyPro
 
   return (
     <div className="flex items-start gap-2 text-sm">
-      <span className="text-theme-text-tertiary w-28 shrink-0">{label}</span>
+      <span className="text-theme-text-tertiary w-40 shrink-0">{label}</span>
       <span className="text-theme-text-primary break-all flex-1">{displayValue}</span>
       {copyable && onCopy && !isReactElement(value) && (
         <button
@@ -568,9 +568,25 @@ export function RelatedResourcesSection({ relationships, onNavigate }: RelatedRe
         {relationships.scalers && relationships.scalers.length > 0 && (
           <RelationshipGroup label="Autoscaler" refs={dedupeRefs(relationships.scalers)} onNavigate={onNavigate} />
         )}
-        {relationships.policies && relationships.policies.length > 0 && (
-          <RelationshipGroup label="Disruption Budget" refs={dedupeRefs(relationships.policies)} onNavigate={onNavigate} />
-        )}
+        {relationships.policies && relationships.policies.length > 0 && (() => {
+          const policyKinds = new Set(['NetworkPolicy', 'CiliumNetworkPolicy', 'CiliumClusterwideNetworkPolicy', 'ClusterNetworkPolicy'])
+          const pdbs = relationships.policies.filter(r => r.kind === 'PodDisruptionBudget')
+          const netpols = relationships.policies.filter(r => policyKinds.has(r.kind))
+          const other = relationships.policies.filter(r => r.kind !== 'PodDisruptionBudget' && !policyKinds.has(r.kind))
+          return (
+            <>
+              {pdbs.length > 0 && (
+                <RelationshipGroup label="Disruption Budget" refs={dedupeRefs(pdbs)} onNavigate={onNavigate} />
+              )}
+              {netpols.length > 0 && (
+                <RelationshipGroup label="Network Policies" refs={dedupeRefs(netpols)} onNavigate={onNavigate} />
+              )}
+              {other.length > 0 && (
+                <RelationshipGroup label="Policies" refs={dedupeRefs(other)} onNavigate={onNavigate} />
+              )}
+            </>
+          )
+        })()}
         {relationships.scaleTarget && (
           <RelationshipGroup label="Scale Target" refs={[relationships.scaleTarget]} onNavigate={onNavigate} />
         )}