@skyhook-io/k8s-ui 1.3.2 → 1.4.0

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

@@ -0,0 +1,228 @@
+import { Shield, ArrowDownToLine, ArrowUpFromLine, Ban } from 'lucide-react'
+import { Section, PropertyList, Property } from '../../ui/drawer-components'
+
+interface CiliumNetworkPolicyRendererProps {
+  data: any
+}
+
+export function CiliumNetworkPolicyRenderer({ data }: CiliumNetworkPolicyRendererProps) {
+  const spec = data.spec || data.specs || {}
+  const endpointSelector = spec.endpointSelector || {}
+  const matchLabels = endpointSelector.matchLabels || {}
+  const hasMatchLabels = Object.keys(matchLabels).length > 0
+  const ingress: any[] | undefined = spec.ingress
+  const ingressDeny: any[] | undefined = spec.ingressDeny
+  const egress: any[] | undefined = spec.egress
+  const egressDeny: any[] | undefined = spec.egressDeny
+  const description = spec.description || ''
+
+  return (
+    <>
+      <Section title="Target" icon={Shield}>
+        {description && (
+          <p className="text-xs text-theme-text-secondary mb-2">{description}</p>
+        )}
+        <PropertyList>
+          <Property
+            label="Endpoint Selector"
+            value={hasMatchLabels ? undefined : 'All endpoints in namespace'}
+          />
+        </PropertyList>
+        {hasMatchLabels && (
+          <div className="mt-2">
+            <div className="text-xs text-theme-text-tertiary mb-1">Endpoint Selector</div>
+            <div className="flex flex-wrap gap-1">
+              {Object.entries(matchLabels).map(([k, v]) => (
+                <span key={k} className="badge bg-theme-elevated text-theme-text-secondary">
+                  {k}={String(v)}
+                </span>
+              ))}
+            </div>
+          </div>
+        )}
+        {spec.nodeSelector && (
+          <div className="mt-2">
+            <div className="text-xs text-theme-text-tertiary mb-1">Node Selector</div>
+            <div className="flex flex-wrap gap-1">
+              {Object.entries(spec.nodeSelector.matchLabels || {}).map(([k, v]) => (
+                <span key={k} className="badge bg-theme-elevated text-theme-text-secondary">
+                  {k}={String(v)}
+                </span>
+              ))}
+            </div>
+          </div>
+        )}
+      </Section>
+
+      {ingress && ingress.length > 0 && (
+        <Section title="Ingress Allow" icon={ArrowDownToLine} defaultExpanded>
+          <div className="space-y-3">
+            {ingress.map((rule: any, i: number) => (
+              <CiliumRuleCard key={i} rule={rule} />
+            ))}
+          </div>
+        </Section>
+      )}
+
+      {ingressDeny && ingressDeny.length > 0 && (
+        <Section title="Ingress Deny" icon={Ban} defaultExpanded>
+          <div className="space-y-3">
+            {ingressDeny.map((rule: any, i: number) => (
+              <CiliumRuleCard key={i} rule={rule} />
+            ))}
+          </div>
+        </Section>
+      )}
+
+      {egress && egress.length > 0 && (
+        <Section title="Egress Allow" icon={ArrowUpFromLine} defaultExpanded>
+          <div className="space-y-3">
+            {egress.map((rule: any, i: number) => (
+              <CiliumRuleCard key={i} rule={rule} />
+            ))}
+          </div>
+        </Section>
+      )}
+
+      {egressDeny && egressDeny.length > 0 && (
+        <Section title="Egress Deny" icon={Ban} defaultExpanded>
+          <div className="space-y-3">
+            {egressDeny.map((rule: any, i: number) => (
+              <CiliumRuleCard key={i} rule={rule} />
+            ))}
+          </div>
+        </Section>
+      )}
+    </>
+  )
+}
+
+function CiliumRuleCard({ rule }: { rule: any }) {
+  const fromEndpoints: any[] = rule.fromEndpoints || []
+  const fromEntities: string[] = rule.fromEntities || []
+  const fromCIDR: string[] = rule.fromCIDR || []
+  const fromCIDRSet: any[] = rule.fromCIDRSet || []
+  const toEndpoints: any[] = rule.toEndpoints || []
+  const toEntities: string[] = rule.toEntities || []
+  const toCIDR: string[] = rule.toCIDR || []
+  const toCIDRSet: any[] = rule.toCIDRSet || []
+  const toPorts: any[] = rule.toPorts || []
+
+  return (
+    <div className="card-inner-lg">
+      {fromEndpoints.length > 0 && (
+        <div className="mb-2">
+          <div className="text-xs text-theme-text-tertiary mb-1">From Endpoints</div>
+          <div className="space-y-1">
+            {fromEndpoints.map((ep: any, j: number) => (
+              <SelectorEntry key={j} selector={ep} />
+            ))}
+          </div>
+        </div>
+      )}
+
+      {fromEntities.length > 0 && (
+        <div className="mb-2">
+          <div className="text-xs text-theme-text-tertiary mb-1">From Entities</div>
+          <div className="flex flex-wrap gap-1">
+            {fromEntities.map((e, j) => (
+              <span key={j} className="badge bg-purple-500/20 text-purple-400 border-purple-500/30">{e}</span>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {(fromCIDR.length > 0 || fromCIDRSet.length > 0) && (
+        <div className="mb-2">
+          <div className="text-xs text-theme-text-tertiary mb-1">From CIDR</div>
+          <div className="flex flex-wrap gap-1">
+            {fromCIDR.map((c, j) => (
+              <span key={j} className="badge bg-theme-elevated text-theme-text-secondary">{c}</span>
+            ))}
+            {fromCIDRSet.map((cs: any, j: number) => (
+              <span key={`set-${j}`} className="badge bg-theme-elevated text-theme-text-secondary">{cs.cidr}</span>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {toEndpoints.length > 0 && (
+        <div className="mb-2">
+          <div className="text-xs text-theme-text-tertiary mb-1">To Endpoints</div>
+          <div className="space-y-1">
+            {toEndpoints.map((ep: any, j: number) => (
+              <SelectorEntry key={j} selector={ep} />
+            ))}
+          </div>
+        </div>
+      )}
+
+      {toEntities.length > 0 && (
+        <div className="mb-2">
+          <div className="text-xs text-theme-text-tertiary mb-1">To Entities</div>
+          <div className="flex flex-wrap gap-1">
+            {toEntities.map((e, j) => (
+              <span key={j} className="badge bg-purple-500/20 text-purple-400 border-purple-500/30">{e}</span>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {(toCIDR.length > 0 || toCIDRSet.length > 0) && (
+        <div className="mb-2">
+          <div className="text-xs text-theme-text-tertiary mb-1">To CIDR</div>
+          <div className="flex flex-wrap gap-1">
+            {toCIDR.map((c, j) => (
+              <span key={j} className="badge bg-theme-elevated text-theme-text-secondary">{c}</span>
+            ))}
+            {toCIDRSet.map((cs: any, j: number) => (
+              <span key={`set-${j}`} className="badge bg-theme-elevated text-theme-text-secondary">{cs.cidr}</span>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {toPorts.length > 0 && (
+        <div>
+          <div className="text-xs text-theme-text-tertiary mb-1">Ports</div>
+          <div className="flex flex-wrap gap-1">
+            {toPorts.map((p: any, j: number) => {
+              const ports = p.ports || []
+              return ports.map((port: any, k: number) => (
+                <span key={`${j}-${k}`} className="badge bg-theme-elevated text-theme-text-secondary">
+                  {port.protocol || 'TCP'}/{port.port}
+                </span>
+              ))
+            })}
+          </div>
+        </div>
+      )}
+
+      {fromEndpoints.length === 0 && fromEntities.length === 0 && fromCIDR.length === 0 && fromCIDRSet.length === 0 &&
+       toEndpoints.length === 0 && toEntities.length === 0 && toCIDR.length === 0 && toCIDRSet.length === 0 &&
+       toPorts.length === 0 && (
+        <div className="text-xs text-theme-text-tertiary">Allow all</div>
+      )}
+    </div>
+  )
+}
+
+function SelectorEntry({ selector }: { selector: any }) {
+  const matchLabels = selector.matchLabels || {}
+  const hasLabels = Object.keys(matchLabels).length > 0
+  return (
+    <div className="text-sm">
+      {hasLabels ? (
+        <span className="inline-flex flex-wrap gap-1 align-middle">
+          {Object.entries(matchLabels).map(([k, v]) => (
+            <span key={k} className="badge bg-theme-elevated text-theme-text-secondary">
+              {k}={String(v)}
+            </span>
+          ))}
+        </span>
+      ) : (
+        <span className="text-xs text-theme-text-tertiary">all endpoints</span>
+      )}
+    </div>
+  )
+}

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

@@ -0,0 +1,174 @@
+import { Shield, ArrowDownToLine, ArrowUpFromLine } from 'lucide-react'
+import { clsx } from 'clsx'
+import { Section, PropertyList, Property } from '../../ui/drawer-components'
+
+interface ClusterNetworkPolicyRendererProps {
+  data: any
+}
+
+export function ClusterNetworkPolicyRenderer({ data }: ClusterNetworkPolicyRendererProps) {
+  const spec = data.spec || {}
+  const subject = spec.subject || {}
+  const priority = spec.priority
+  const ingress: any[] | undefined = spec.ingress
+  const egress: any[] | undefined = spec.egress
+
+  return (
+    <>
+      <Section title="Subject" icon={Shield}>
+        <PropertyList>
+          {priority !== undefined && (
+            <Property label="Priority" value={String(priority)} />
+          )}
+        </PropertyList>
+        {subject.namespaces && (
+          <div className="mt-2">
+            <div className="text-xs text-theme-text-tertiary mb-1">Namespace Selector</div>
+            <SelectorBadges selector={subject.namespaces} />
+          </div>
+        )}
+        {subject.pods && (
+          <div className="mt-2">
+            <div className="text-xs text-theme-text-tertiary mb-1">Pod Selector</div>
+            {subject.pods.namespaceSelector && (
+              <div className="mb-1">
+                <span className="text-xs text-theme-text-secondary">namespaces: </span>
+                <SelectorBadges selector={subject.pods.namespaceSelector} />
+              </div>
+            )}
+            {subject.pods.podSelector && (
+              <div>
+                <span className="text-xs text-theme-text-secondary">pods: </span>
+                <SelectorBadges selector={subject.pods.podSelector} />
+              </div>
+            )}
+          </div>
+        )}
+      </Section>
+
+      {ingress && ingress.length > 0 && (
+        <Section title={`Ingress Rules (${ingress.length})`} icon={ArrowDownToLine} defaultExpanded>
+          <div className="space-y-3">
+            {ingress.map((rule: any, i: number) => (
+              <AdminRuleCard key={i} rule={rule} direction="from" />
+            ))}
+          </div>
+        </Section>
+      )}
+
+      {egress && egress.length > 0 && (
+        <Section title={`Egress Rules (${egress.length})`} icon={ArrowUpFromLine} defaultExpanded>
+          <div className="space-y-3">
+            {egress.map((rule: any, i: number) => (
+              <AdminRuleCard key={i} rule={rule} direction="to" />
+            ))}
+          </div>
+        </Section>
+      )}
+    </>
+  )
+}
+
+function AdminRuleCard({ rule, direction }: { rule: any; direction: 'from' | 'to' }) {
+  const action = rule.action || 'Allow'
+  const name = rule.name || ''
+  const peers: any[] = rule[direction] || []
+  const ports: any[] = rule.ports || []
+
+  const actionColor = action === 'Deny'
+    ? 'bg-red-500/20 text-red-400 border-red-500/30'
+    : action === 'Pass'
+      ? 'bg-yellow-500/20 text-yellow-400 border-yellow-500/30'
+      : 'bg-green-500/20 text-green-400 border-green-500/30'
+
+  return (
+    <div className="card-inner-lg">
+      <div className="flex items-center gap-2 mb-2">
+        <span className={clsx('badge', actionColor)}>{action}</span>
+        {name && <span className="text-xs text-theme-text-secondary">{name}</span>}
+      </div>
+
+      {peers.length > 0 && (
+        <div className="mb-2">
+          <div className="text-xs text-theme-text-tertiary mb-1 capitalize">{direction}</div>
+          <div className="space-y-1.5">
+            {peers.map((peer: any, j: number) => (
+              <AdminPeerEntry key={j} peer={peer} />
+            ))}
+          </div>
+        </div>
+      )}
+
+      {ports.length > 0 && (
+        <div>
+          <div className="text-xs text-theme-text-tertiary mb-1">Ports</div>
+          <div className="flex flex-wrap gap-1">
+            {ports.map((port: any, j: number) => (
+              <span key={j} className="badge bg-theme-elevated text-theme-text-secondary">
+                {port.portNumber?.protocol || 'TCP'}/{port.portNumber?.port || port.portRange?.start || '*'}
+                {port.portRange && `-${port.portRange.end}`}
+              </span>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+function AdminPeerEntry({ peer }: { peer: any }) {
+  if (peer.namespaces) {
+    return (
+      <div className="text-sm">
+        <span className="text-theme-text-secondary text-xs">namespaces: </span>
+        <SelectorBadges selector={peer.namespaces} />
+      </div>
+    )
+  }
+  if (peer.pods) {
+    return (
+      <div className="text-sm space-y-0.5">
+        {peer.pods.namespaceSelector && (
+          <div>
+            <span className="text-theme-text-secondary text-xs">namespaces: </span>
+            <SelectorBadges selector={peer.pods.namespaceSelector} />
+          </div>
+        )}
+        {peer.pods.podSelector && (
+          <div>
+            <span className="text-theme-text-secondary text-xs">pods: </span>
+            <SelectorBadges selector={peer.pods.podSelector} />
+          </div>
+        )}
+      </div>
+    )
+  }
+  if (peer.networks) {
+    return (
+      <div className="text-sm">
+        <span className="text-theme-text-secondary text-xs">networks: </span>
+        <span className="inline-flex flex-wrap gap-1">
+          {peer.networks.map((n: string, i: number) => (
+            <span key={i} className="badge bg-theme-elevated text-theme-text-secondary">{n}</span>
+          ))}
+        </span>
+      </div>
+    )
+  }
+  return null
+}
+
+function SelectorBadges({ selector }: { selector: any }) {
+  const matchLabels = selector?.matchLabels || {}
+  const hasLabels = Object.keys(matchLabels).length > 0
+  if (!hasLabels) return <span className="text-xs text-theme-text-tertiary">all</span>
+  return (
+    <span className="inline-flex flex-wrap gap-1 align-middle">
+      {Object.entries(matchLabels).map(([k, v]) => (
+        <span key={k} className="badge bg-theme-elevated text-theme-text-secondary">
+          {k}={String(v)}
+        </span>
+      ))}
+    </span>
+  )
+}

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

@@ -358,7 +358,7 @@ function NestedObjectViewer({ name, value, depth = 0 }: NestedObjectViewerProps)
           <div className="ml-5 mt-1 space-y-1">
             {simpleEntries.map(([k, v]) => (
               <div key={k} className="flex items-start gap-2 text-xs">
-                <span className="text-theme-text-tertiary w-28 shrink-0">{formatFieldName(k)}</span>
+                <span className="text-theme-text-tertiary w-40 shrink-0">{formatFieldName(k)}</span>
                 <span className="text-theme-text-secondary break-all">{formatValue(v)}</span>
               </div>
             ))}

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

@@ -0,0 +1,277 @@
+import { clsx } from 'clsx'
+import { Tooltip } from '../../ui/Tooltip'
+
+interface NetworkPolicyDiagramProps {
+  spec: any
+}
+
+/**
+ * Visual flow diagram for a NetworkPolicy.
+ * Three-column layout: Sources -> Target -> Destinations
+ * Each rule is a horizontal band. Peers within a rule are OR'd (stacked).
+ * Pure CSS/SVG — no ReactFlow needed for this static diagram.
+ */
+export function NetworkPolicyDiagram({ spec }: NetworkPolicyDiagramProps) {
+  const podSelector = spec.podSelector || {}
+  const matchLabels = podSelector.matchLabels || {}
+  const policyTypes: string[] = spec.policyTypes || []
+  const ingress: any[] | undefined = spec.ingress
+  const egress: any[] | undefined = spec.egress
+
+  const hasIngress = policyTypes.includes('Ingress')
+  const hasEgress = policyTypes.includes('Egress')
+  const targetLabel = Object.keys(matchLabels).length > 0
+    ? Object.entries(matchLabels).map(([k, v]) => `${k}=${v}`).join(', ')
+    : 'All pods'
+
+  const ingressDenied = hasIngress && (!ingress || ingress.length === 0)
+  const egressDenied = hasEgress && (!egress || egress.length === 0)
+
+  return (
+    <div className="card-inner-lg space-y-3">
+      {/* Ingress flows */}
+      {hasIngress && (
+        <div className="space-y-2">
+          <div className="flex items-center gap-1.5">
+            <span className="w-1.5 h-1.5 rounded-full bg-blue-500" />
+            <span className="text-[10px] font-semibold uppercase tracking-wider text-blue-400">Ingress</span>
+          </div>
+          {ingressDenied ? (
+            <FlowRow
+              sources={[{ label: 'All traffic', type: 'deny' as const }]}
+              target={targetLabel}
+              ports={[]}
+              direction="ingress"
+              denied
+            />
+          ) : (
+            ingress?.map((rule, i) => (
+              <FlowRow
+                key={i}
+                sources={extractPeers(rule.from)}
+                target={targetLabel}
+                ports={extractPorts(rule.ports)}
+                direction="ingress"
+              />
+            ))
+          )}
+        </div>
+      )}
+
+      {/* Egress flows */}
+      {hasEgress && (
+        <div className="space-y-2">
+          <div className="flex items-center gap-1.5">
+            <span className="w-1.5 h-1.5 rounded-full bg-purple-500" />
+            <span className="text-[10px] font-semibold uppercase tracking-wider text-purple-400">Egress</span>
+          </div>
+          {egressDenied ? (
+            <FlowRow
+              sources={[{ label: 'All traffic', type: 'deny' as const }]}
+              target={targetLabel}
+              ports={[]}
+              direction="egress"
+              denied
+            />
+          ) : (
+            egress?.map((rule, i) => (
+              <FlowRow
+                key={i}
+                sources={extractPeers(rule.to)}
+                target={targetLabel}
+                ports={extractPorts(rule.ports)}
+                direction="egress"
+              />
+            ))
+          )}
+        </div>
+      )}
+
+      {!hasIngress && !hasEgress && (
+        <div className="text-xs text-theme-text-tertiary text-center py-2">No policy types specified</div>
+      )}
+    </div>
+  )
+}
+
+interface PeerInfo {
+  label: string
+  sublabel?: string
+  type: 'pod' | 'namespace' | 'cidr' | 'all' | 'deny' | 'combined'
+}
+
+function extractPeers(peers: any[] | undefined): PeerInfo[] {
+  if (!peers || peers.length === 0) {
+    return [{ label: 'Any source', type: 'all' }]
+  }
+  return peers.map(peer => {
+    const hasPodSel = peer.podSelector !== undefined
+    const hasNsSel = peer.namespaceSelector !== undefined
+    const hasIpBlock = peer.ipBlock !== undefined
+
+    if (hasPodSel && hasNsSel) {
+      // AND: both must match
+      const podLabels = formatSelector(peer.podSelector)
+      const nsLabels = formatSelector(peer.namespaceSelector)
+      return {
+        label: podLabels,
+        sublabel: `in ${nsLabels === 'all' ? 'any namespace' : nsLabels}`,
+        type: 'combined' as const,
+      }
+    }
+    if (hasPodSel) {
+      return { label: formatSelector(peer.podSelector), type: 'pod' as const }
+    }
+    if (hasNsSel) {
+      const nsLabels = formatSelector(peer.namespaceSelector)
+      return { label: nsLabels === 'all' ? 'All namespaces' : nsLabels, type: 'namespace' as const }
+    }
+    if (hasIpBlock) {
+      const cidr = peer.ipBlock.cidr || '?'
+      const except = peer.ipBlock.except
+      return {
+        label: cidr,
+        sublabel: except?.length ? `except ${except.join(', ')}` : undefined,
+        type: 'cidr' as const,
+      }
+    }
+    return { label: '?', type: 'all' as const }
+  })
+}
+
+function extractPorts(ports: any[] | undefined): string[] {
+  if (!ports || ports.length === 0) return []
+  return ports.map((p: any) => {
+    const proto = p.protocol || 'TCP'
+    const port = p.port || '*'
+    const endPort = p.endPort
+    return endPort ? `${proto}/${port}-${endPort}` : `${proto}/${port}`
+  })
+}
+
+function formatSelector(selector: any): string {
+  const labels = selector?.matchLabels || {}
+  if (Object.keys(labels).length === 0) return 'all'
+  return Object.entries(labels).map(([k, v]) => `${k}=${v}`).join(', ')
+}
+
+// Color coding for peer types
+const PEER_STYLES = {
+  pod: 'border-emerald-500/30 bg-emerald-500/8',
+  namespace: 'border-sky-500/30 bg-sky-500/8',
+  cidr: 'border-amber-500/30 bg-amber-500/8',
+  combined: 'border-emerald-500/30 bg-emerald-500/8',
+  all: 'border-theme-border bg-theme-elevated/50',
+  deny: 'border-red-500/30 bg-red-500/8',
+} as const
+
+const PEER_DOT = {
+  pod: 'bg-emerald-500',
+  namespace: 'bg-sky-500',
+  cidr: 'bg-amber-500',
+  combined: 'bg-emerald-500',
+  all: 'bg-theme-text-tertiary',
+  deny: 'bg-red-500',
+} as const
+
+function FlowRow({
+  sources,
+  target,
+  ports,
+  direction,
+  denied = false,
+}: {
+  sources: PeerInfo[]
+  target: string
+  ports: string[]
+  direction: 'ingress' | 'egress'
+  denied?: boolean
+}) {
+  const isIngress = direction === 'ingress'
+
+  const sourceNodes = (
+    <div className="flex-1 min-w-0 space-y-1">
+      {sources.map((peer, i) => (
+        <div key={i}>
+          {i > 0 && (
+            <div className="text-[9px] text-theme-text-tertiary uppercase tracking-widest text-center my-0.5">or</div>
+          )}
+          <Tooltip content={peer.sublabel ? `${peer.label}\n${peer.sublabel}` : peer.label} position="top">
+            <div
+              className={clsx(
+                'rounded-md border px-2 py-1.5',
+                PEER_STYLES[peer.type],
+              )}
+            >
+              <div className="flex items-center gap-1.5">
+                <span className={clsx('w-1.5 h-1.5 rounded-full shrink-0', PEER_DOT[peer.type])} />
+                <span className={clsx('text-[11px] font-medium truncate', denied && 'line-through text-red-400')}>
+                  {peer.label}
+                </span>
+              </div>
+              {peer.sublabel && (
+                <div className="text-[10px] text-theme-text-tertiary ml-3 truncate">{peer.sublabel}</div>
+              )}
+            </div>
+          </Tooltip>
+        </div>
+      ))}
+    </div>
+  )
+
+  const targetNode = (
+    <Tooltip content={target} position="top">
+      <div className="rounded-md border border-indigo-500/30 bg-indigo-500/8 px-2 py-1.5 flex-1 min-w-0">
+        <div className="flex items-center gap-1.5">
+          <span className="w-1.5 h-1.5 rounded-full shrink-0 bg-indigo-500" />
+          <span className="text-[11px] font-medium truncate">{target}</span>
+        </div>
+      </div>
+    </Tooltip>
+  )
+
+  const arrow = (
+    <div className="flex flex-col items-center justify-center shrink-0 w-10">
+      {/* Arrow line with optional port label */}
+      <svg width="40" height="20" viewBox="0 0 40 20" className="overflow-visible">
+        <defs>
+          <marker id={`arrow-${direction}-${denied ? 'denied' : 'ok'}`} markerWidth="6" markerHeight="6" refX="5" refY="3" orient="auto">
+            <path d="M0,0 L6,3 L0,6" fill="none" stroke={denied ? '#ef4444' : direction === 'ingress' ? '#3b82f6' : '#a855f7'} strokeWidth="1.5" />
+          </marker>
+        </defs>
+        <line
+          x1="2" y1="10" x2="32" y2="10"
+          stroke={denied ? '#ef4444' : direction === 'ingress' ? '#3b82f6' : '#a855f7'}
+          strokeWidth="1.5"
+          strokeDasharray={denied ? '3 2' : undefined}
+          markerEnd={`url(#arrow-${direction}-${denied ? 'denied' : 'ok'})`}
+        />
+      </svg>
+      {ports.length > 0 && (
+        <div className="flex flex-wrap justify-center gap-0.5 mt-0.5">
+          {ports.map((p, i) => (
+            <span key={i} className="text-[8px] text-theme-text-tertiary font-mono leading-none">{p}</span>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+
+  return (
+    <div className="flex items-center gap-1">
+      {isIngress ? (
+        <>
+          {sourceNodes}
+          {arrow}
+          {targetNode}
+        </>
+      ) : (
+        <>
+          {targetNode}
+          {arrow}
+          {sourceNodes}
+        </>
+      )}
+    </div>
+  )
+}