@skyhook-io/k8s-ui 1.16.3 → 1.17.1

package/src/components/shared/SetImageDialog.tsx

@@ -1,11 +1,5 @@
 import { useEffect, useMemo, useRef, useState, useId } from 'react'
-import {
-  AlertTriangle,
-  ExternalLink,
-  Loader2,
-  RefreshCw,
-  X,
-} from 'lucide-react'
+import { Loader2, RefreshCw, X } from 'lucide-react'
 import { clsx } from 'clsx'
 
 import type {
@@ -16,11 +10,33 @@ import type {
 } from '../../types/core'
 import { DialogPortal } from '../ui/DialogPortal'
 import { Badge } from '../ui/Badge'
+import {
+  canConfirmGitOpsWrite,
+  gitOpsWriteGuardKey,
+  type GitOpsWrite,
+  type GitOpsWriteGuard,
+} from '../../utils/gitops-write-guard'
+import { GitOpsWriteWarning } from './GitOpsWriteWarning'
 
-export interface ManagedImageSource {
-  type: 'GitOps' | 'Helm'
-  label: string
-  onOpen?: () => void
+/** The GitOps write guard for the object whose Pod template the dialog
+ *  writes, evaluated by the host: for {@link SET_IMAGE_WRITES} until the
+ *  containers are known, then for {@link setImageWrites} of the containers
+ *  {@link onSelectionChange} reports. */
+export interface SetImageOwnership {
+  guard: GitOpsWriteGuard
+  onOpenOwner?: () => void
+  /** The containers the dialog lists and the ones being changed, so the
+   *  guard can judge exactly those (null until the containers load). */
+  onSelectionChange?: (selection: SetImageSelection | null) => void
+  /** {@link setImageSelectionKey} of the selection `guard` was evaluated
+   *  for. When set, Update waits until it matches the dialog's current
+   *  selection. */
+  selectionKey?: string
+}
+
+export interface SetImageSelection {
+  containers: Pick<WorkloadContainerImage, 'type' | 'name'>[]
+  changed: Pick<WorkloadContainerImage, 'type' | 'name'>[]
 }
 
 export interface SetImageDialogProps {
@@ -28,7 +44,8 @@ export interface SetImageDialogProps {
   workloadLabel: string
   workloadName: string
   workloadResource: string
-  managedSources?: ManagedImageSource[]
+  /** Undefined while the host can't verify ownership; the dialog then blocks. */
+  ownership?: SetImageOwnership
   pending?: boolean
   onClose: () => void
   onLoad: () => Promise<WorkloadImageInventory>
@@ -83,31 +100,49 @@ export function reconcileRefreshedImageDrafts(
   return { drafts: nextDrafts, changedCurrentKeys }
 }
 
+export function setImageSelectionKey(selection: SetImageSelection | null): string {
+  if (!selection) return ''
+  const rows = (refs: SetImageSelection['containers']) => refs.map((c) => [c.type, c.name])
+  return JSON.stringify([rows(selection.containers), rows(selection.changed)])
+}
+
+/** One write per container, by name: the guard's verdict for exactly the
+ *  images being changed. */
+export function setImageWrites(containers: Pick<WorkloadContainerImage, 'type' | 'name'>[]): GitOpsWrite[] {
+  return containers.map((container) => ({
+    scope: 'spec',
+    paths: [`spec.template.spec.${container.type === 'initContainer' ? 'initContainers' : 'containers'}[name=${container.name}].image`],
+    description: container.name,
+  }))
+}
+
+// Before the containers load, the guard covers every container image.
+export const SET_IMAGE_WRITES: GitOpsWrite[] = [
+  {
+    scope: 'spec',
+    paths: [
+      'spec.template.spec.containers[*].image',
+      'spec.template.spec.initContainers[*].image',
+    ],
+    description: 'Container images',
+  },
+]
+
 export function canSubmitImageUpdates({
   updateCount,
   hasEmptyImage,
-  managed,
-  ownershipResolved,
-  acknowledged,
+  ownershipConfirmable,
   busy,
   loadFailed = false,
 }: {
   updateCount: number
   hasEmptyImage: boolean
-  managed: boolean
-  ownershipResolved: boolean
-  acknowledged: boolean
+  /** Ownership resolved and, when it's managed, acknowledged. */
+  ownershipConfirmable: boolean
   busy: boolean
   loadFailed?: boolean
 }): boolean {
-  return (
-    updateCount > 0 &&
-    !hasEmptyImage &&
-    ownershipResolved &&
-    (!managed || acknowledged) &&
-    !busy &&
-    !loadFailed
-  )
+  return updateCount > 0 && !hasEmptyImage && ownershipConfirmable && !busy && !loadFailed
 }
 
 export function describeImageUpdateBehavior(
@@ -140,7 +175,7 @@ export function SetImageDialog({
   workloadLabel,
   workloadName,
   workloadResource,
-  managedSources,
+  ownership,
   pending = false,
   onClose,
   onLoad,
@@ -155,7 +190,9 @@ export function SetImageDialog({
   const [submitting, setSubmitting] = useState(false)
   const [loadError, setLoadError] = useState<string | null>(null)
   const [submitError, setSubmitError] = useState<string | null>(null)
-  const [acknowledged, setAcknowledged] = useState(false)
+  // The guard key the acknowledgment was given for: a different verdict
+  // (fresh evidence, other containers, a changed policy) asks again.
+  const [ackedKey, setAckedKey] = useState('')
   const [changedCurrentKeys, setChangedCurrentKeys] = useState<string[]>([])
   const onLoadRef = useRef(onLoad)
   const loadRequestRef = useRef(0)
@@ -216,7 +253,7 @@ export function SetImageDialog({
     setDrafts({})
     setChangedCurrentKeys([])
     setSubmitError(null)
-    setAcknowledged(false)
+    setAckedKey('')
     void loadInventory()
   }, [open, workloadLabel, workloadName, workloadResource])
 
@@ -229,13 +266,27 @@ export function SetImageDialog({
       (container) => !(drafts[containerKey(container)] ?? '').trim(),
     ) ?? false
   const busy = pending || submitting
-  const ownershipResolved = managedSources !== undefined
+  const ownershipResolved = ownership !== undefined
+  const onSelectionChange = ownership?.onSelectionChange
+  const selectionKey = setImageSelectionKey(
+    inventory ? { containers: inventory.containers, changed: updates } : null,
+  )
+  useEffect(() => {
+    if (!onSelectionChange) return
+    const [containers, changed] = selectionKey ? (JSON.parse(selectionKey) as [string[][], string[][]]) : [null, null]
+    const toRefs = (rows: string[][]) => rows.map(([type, name]) => ({ type: type as WorkloadContainerImage['type'], name }))
+    onSelectionChange(containers && changed ? { containers: toRefs(containers), changed: toRefs(changed) } : null)
+  }, [onSelectionChange, selectionKey])
+  const guard = ownership?.guard
+  // The host evaluates the guard after it hears of an edit; until then the
+  // verdict on screen is for other containers.
+  const guardCurrent = ownership?.selectionKey === undefined || ownership.selectionKey === selectionKey
+  const guardKey = gitOpsWriteGuardKey(guard)
+  const acknowledged = Boolean(guardKey) && ackedKey === guardKey
   const canSubmit = canSubmitImageUpdates({
     updateCount: updates.length,
     hasEmptyImage,
-    managed: (managedSources?.length ?? 0) > 0,
-    ownershipResolved,
-    acknowledged,
+    ownershipConfirmable: guardCurrent && canConfirmGitOpsWrite(guard, acknowledged),
     busy,
     loadFailed: Boolean(loadError),
   })
@@ -378,57 +429,14 @@ export function SetImageDialog({
               {describeImageUpdateBehavior(inventory.behavior)}
             </div>
 
-            {managedSources && managedSources.length > 0 && (
-              <div className="rounded-md border border-amber-500/40 bg-amber-500/10 px-3 py-3">
-                <div className="flex items-start gap-2">
-                  <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0 text-amber-600 dark:text-amber-400" />
-                  <div className="min-w-0 flex-1">
-                    <p className="text-xs font-medium text-amber-800 dark:text-amber-300">
-                      The declared source may overwrite this live change
-                    </p>
-                    <p className="mt-1 text-xs text-theme-text-secondary">
-                      Managed by{' '}
-                      {managedSources
-                        .map((source) => `${source.type} ${source.label}`)
-                        .join(' and ')}
-                      . Update the declared source for a durable change; use
-                      this action only as a break-glass operation.
-                    </p>
-                    <div className="mt-2 flex flex-wrap gap-2">
-                      {managedSources
-                        .filter((source) => source.onOpen)
-                        .map((source) => (
-                          <button
-                            key={`${source.type}-${source.label}`}
-                            type="button"
-                            onClick={source.onOpen}
-                            className="inline-flex items-center gap-1 text-xs font-medium text-skyhook-600 hover:underline dark:text-skyhook-400"
-                          >
-                            {source.type === 'GitOps'
-                              ? 'View GitOps owner'
-                              : 'View Helm release'}
-                            <ExternalLink className="h-3 w-3" />
-                          </button>
-                        ))}
-                    </div>
-                    <label className="mt-3 flex cursor-pointer items-start gap-2 text-xs text-theme-text-primary">
-                      <input
-                        type="checkbox"
-                        checked={acknowledged}
-                        onChange={(event) =>
-                          setAcknowledged(event.target.checked)
-                        }
-                        disabled={busy}
-                        className="mt-0.5 h-3.5 w-3.5 accent-skyhook-500"
-                      />
-                      <span>
-                        I understand the declared source may overwrite this live
-                        change.
-                      </span>
-                    </label>
-                  </div>
-                </div>
-              </div>
+            {guard && (
+              <GitOpsWriteWarning
+                guard={guard}
+                acknowledged={acknowledged}
+                onAcknowledgedChange={(value) => setAckedKey(value ? guardKey : '')}
+                onOpenOwner={ownership?.onOpenOwner}
+                disabled={busy}
+              />
             )}
 
             <ContainerImageGroup

package/src/components/shared/index.ts

@@ -5,8 +5,11 @@ export {
   DrainPlanDialog, DrainPlanContent, canConfirmDrain, planMatches, emptyDirPodsAtRisk, DEFAULT_DRAIN_DIALOG_OPTIONS,
   type DrainPlan, type DrainPlanPod, type DrainOutcome, type DrainDialogOptions,
 } from './DrainPlanDialog'
-export { SetImageDialog, type ManagedImageSource, type SetImageDialogProps } from './SetImageDialog'
+export { SetImageDialog, SET_IMAGE_WRITES, setImageWrites, setImageSelectionKey, type SetImageOwnership, type SetImageSelection, type SetImageDialogProps } from './SetImageDialog'
+export { GitOpsWriteWarning, type GitOpsWriteWarningProps } from './GitOpsWriteWarning'
 export { CreateResourceDialog, type CreateResourceDialogProps, type ApplyResult } from './CreateResourceDialog'
 export { HelmManagedByChip, ManagedByChip, type HelmOwnerRef } from './ManagedByChip'
 export { DetailShell, type DetailShellProps, type DetailShellTab } from './DetailShell'
 export { classifyDiffLine, hasDiffBodyChange, DiffLine } from './UnifiedDiff'
+
+export { ActionConfirmDialog, type ActionConfirmDialogProps, type ActionConfirmResult, type ActionWrite } from './ActionConfirmDialog'

package/src/components/timeline/TimelineList.tsx

@@ -35,20 +35,7 @@ import type { NavigateToResource } from '../../utils/navigation'
 import { builtinGroupForKind } from '../../utils/api-resources'
 import { kindToPluralWithGroup, refToSelectedResource, apiVersionToGroup } from '../../utils/navigation'
 import { pluralize } from '../../utils/pluralize'
-
-/** Format resource age (e.g., "3d", "5h", "10m") */
-function formatResourceAge(createdAt: string): string {
-  const diff = Date.now() - new Date(createdAt).getTime()
-  const mins = Math.floor(diff / 60000)
-  if (mins < 1) return '<1m'
-  if (mins < 60) return `${mins}m`
-  const hours = Math.floor(mins / 60)
-  if (hours < 24) return `${hours}h`
-  const days = Math.floor(hours / 24)
-  if (days < 30) return `${days}d`
-  const months = Math.floor(days / 30)
-  return `${months}mo`
-}
+import { formatCompactAge } from '../../utils/format'
 
 export type { ActivityTypeFilter, ActivityFilterKey }
 
@@ -736,7 +723,7 @@ function ActivityCard({ item, expanded, onToggle, onResourceClick, compact, sele
               {item.createdAt && (
                 <Tooltip content={`Created: ${new Date(item.createdAt).toLocaleString()}`}>
                   <span className="text-xs text-theme-text-quaternary">
-                    • {formatResourceAge(item.createdAt)} old
+                    • {formatCompactAge(item.createdAt)} old
                   </span>
                 </Tooltip>
               )}

package/src/components/timeline/TimelineSwimlanes.tsx

@@ -62,6 +62,7 @@ import {
 } from './shared'
 import { useRegisterShortcut } from '../../hooks/useKeyboardShortcuts'
 import { clampLensToSelection, formatLensDuration, MIN_WINDOW_MS, type ScrubberRange } from './scrubber-math'
+import { formatRelativeAgeTime } from '../../utils/format'
 
 // Predefined zoom levels (window widths in hours): 15m, 30m, 1h, 2h, 4h, 8h,
 // 12h, 1d, 2d, 3d, 7d. Hoisted so the controlled-window adapter can size the
@@ -674,7 +675,7 @@ function calculateInterestingnessWithBreakdown(lane: ResourceLane): ScoreBreakdo
     // Core workloads
     Deployment: 50, Rollout: 50, StatefulSet: 50, DaemonSet: 50,
     Service: 45, Ingress: 45, Gateway: 45,
-    HTTPRoute: 42, GRPCRoute: 42, TCPRoute: 42, TLSRoute: 42,
+    HTTPRoute: 42, GRPCRoute: 42, TCPRoute: 42, TLSRoute: 42, UDPRoute: 42,
     Job: 40, CronJob: 40, Workflow: 40, CronWorkflow: 40,
     Pod: 30,
     HorizontalPodAutoscaler: 25,
@@ -2884,15 +2885,6 @@ function EventMarker({ event, x, selected, onClick, dimmed, small }: EventMarker
   const markerClasses = getMarkerStyle()
 
   // Build tooltip text - focus on what happened, explain the color meaning
-  const getRelativeTime = (timestamp: string) => {
-    const diff = Date.now() - new Date(timestamp).getTime()
-    const mins = Math.floor(diff / 60000)
-    if (mins < 1) return 'just now'
-    if (mins < 60) return `${mins}m ago`
-    const hours = Math.floor(mins / 60)
-    if (hours < 24) return `${hours}h ago`
-    return `${Math.floor(hours / 24)}d ago`
-  }
 
   // Get human-readable operation label with color indicator
   const getOperationLabel = () => {
@@ -2922,7 +2914,7 @@ function EventMarker({ event, x, selected, onClick, dimmed, small }: EventMarker
     const msg = event.message.length > 110 ? event.message.slice(0, 110) + '…' : event.message
     tooltipLines.push(msg)
   }
-  tooltipLines.push(getRelativeTime(event.timestamp))
+  tooltipLines.push(formatRelativeAgeTime(event.timestamp))
   if (isHistoricalEvent(event)) tooltipLines.push('(from metadata)')
 
   const tooltipText = tooltipLines.join(' · ')

package/src/components/timeline/timeline-filters.ts

@@ -172,6 +172,7 @@ export const TIMELINE_RESOURCE_KINDS = [
   'HTTPRoute',
   'GRPCRoute',
   'TCPRoute',
+  'UDPRoute',
   'TLSRoute',
   'ReplicaSet',
   'DaemonSet',

package/src/components/topology/K8sResourceNode.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest'
-import { baseSubtitle } from './K8sResourceNode'
+import { baseSubtitle, knativeDomainsTooltipLines } from './K8sResourceNode'
 
 describe('baseSubtitle', () => {
   it('describes workflow templates without dropping newer topology kinds', () => {
@@ -18,6 +18,23 @@ describe('baseSubtitle', () => {
     })).toBe('ClusterIP :80 +2 more')
   })
 
+  it('describes a domain-mapped Knative Service by its custom domain', () => {
+    expect(baseSubtitle('KnativeService', { url: 'http://api.team.svc.cluster.local' })).toBe('api.team.svc.cluster.local')
+    expect(baseSubtitle('KnativeService', { url: 'http://api.team.svc.cluster.local', mappedDomains: ['api.example.com'] })).toBe('api.example.com')
+    expect(baseSubtitle('KnativeService', { mappedDomains: ['a.example.com', 'b.example.com'] })).toBe('a.example.com +1')
+  })
+
+  it('labels a mapped Knative Service URL by what it is', () => {
+    const text = (data: Record<string, unknown>) => knativeDomainsTooltipLines(data).map((l) => l.text)
+    // Private: the Service URL is the internal address, shown once.
+    expect(text({ mappedDomains: ['api.example.com'], url: 'http://api.team.svc.cluster.local', internalUrl: 'http://api.team.svc.cluster.local' }))
+      .toEqual(['api.example.com', 'Internal: http://api.team.svc.cluster.local'])
+    // Public: its own URL isn't internal.
+    expect(text({ mappedDomains: ['shop.example.com'], url: 'https://shop.team.example.org', internalUrl: 'http://shop.team.svc.cluster.local' }))
+      .toEqual(['shop.example.com', 'Service URL: https://shop.team.example.org', 'Internal: http://shop.team.svc.cluster.local'])
+    expect(text({ url: 'https://shop.team.example.org' })).toEqual([])
+  })
+
   it('describes a Calico staged deletion as a removal, not as selecting everything', () => {
     // A staged deletion carries no selector, because the Calico API forbids one.
     // Falling through to the empty-selector default would label the broadest

package/src/components/topology/K8sResourceNode.tsx

@@ -200,6 +200,32 @@ export function servicePortsTooltip(ports: ServicePortEntry[]): React.ReactNode
 }
 
 // Default dimensions for unknown CRD kinds
+// A domain-mapped Knative Service shows its custom domain as the subtitle; the
+// tooltip lists every mapped domain, then the Service's own URL when it is
+// public, and its cluster-internal address.
+export function knativeDomainsTooltipLines(nodeData: Record<string, unknown>): { text: string; secondary?: boolean }[] {
+  const mapped = (nodeData.mappedDomains as string[] | undefined) || [];
+  if (mapped.length === 0) return [];
+  const url = nodeData.url as string | undefined;
+  const internalUrl = nodeData.internalUrl as string | undefined;
+  const lines: { text: string; secondary?: boolean }[] = mapped.map((domain) => ({ text: domain }));
+  if (url && url !== internalUrl) lines.push({ text: `Service URL: ${url}`, secondary: true });
+  if (internalUrl) lines.push({ text: `Internal: ${internalUrl}`, secondary: true });
+  return lines;
+}
+
+function knativeDomainsTooltip(nodeData: Record<string, unknown>): React.ReactNode | null {
+  const lines = knativeDomainsTooltipLines(nodeData);
+  if (lines.length === 0) return null;
+  return (
+    <div className="space-y-0.5">
+      {lines.map((line) => (
+        <div key={line.text} className={line.secondary ? 'text-theme-text-tertiary' : undefined}>{line.text}</div>
+      ))}
+    </div>
+  );
+}
+
 export const DEFAULT_NODE_DIMENSIONS = { width: 260, height: 84 };
 
 const NODE_NAME_LENGTH_LIMITS: Partial<Record<NodeKind, number>> = {
@@ -218,6 +244,7 @@ export const NODE_DIMENSIONS: Record<
   HTTPRoute: { width: 300, height: 84 },
   GRPCRoute: { width: 300, height: 84 },
   TCPRoute: { width: 300, height: 84 },
+  UDPRoute: { width: 300, height: 84 },
   TLSRoute: { width: 300, height: 84 },
   Service: { width: 260, height: 84 },
   Deployment: { width: 280, height: 84 },
@@ -440,7 +467,8 @@ export function baseSubtitle(kind: NodeKind, nodeData: Record<string, unknown>):
     case "HTTPRoute":
     case "GRPCRoute":
     case "TCPRoute":
-    case "TLSRoute": {
+    case "TLSRoute":
+    case "UDPRoute": {
       const hostnames = nodeData.hostnames as string[];
       const rulesCount = (nodeData.rulesCount as number) || 0;
       const host = hostnames?.length ? hostnames[0] : "";
@@ -488,6 +516,10 @@ export function baseSubtitle(kind: NodeKind, nodeData: Record<string, unknown>):
       return `${count} pods (${healthy} healthy)`;
     }
     case "KnativeService": {
+      const mapped = (nodeData.mappedDomains as string[] | undefined) || [];
+      if (mapped.length > 0) {
+        return mapped.length > 1 ? `${mapped[0]} +${mapped.length - 1}` : mapped[0];
+      }
       const url = nodeData.url as string;
       if (url) {
         // Show just the hostname from the URL for compactness
@@ -558,7 +590,10 @@ export const K8sResourceNode = memo(function K8sResourceNode({
   const subtitle = getSubtitle(kind, nodeData)
   const portsTooltip = kind === 'Service'
     ? servicePortsTooltip((nodeData.ports as ServicePortEntry[] | undefined) || [])
-    : null
+    : kind === 'KnativeService'
+      ? knativeDomainsTooltip(nodeData)
+      : null
+  const clusterLocal = kind === 'KnativeService' && nodeData.visibility === 'cluster-local'
   const isInternet = kind === 'Internet'
   const isPodGroup = kind === 'PodGroup'
   const isSmallNode = kind === 'ConfigMap' || kind === 'Secret' || kind === 'ServiceAccount' || kind === 'SealedSecret' || kind === 'ServiceMonitor' || kind === 'PodMonitor' || kind === 'HorizontalPodAutoscaler'
@@ -664,6 +699,13 @@ export const K8sResourceNode = memo(function K8sResourceNode({
                   </span>
                 </Tooltip>
               )}
+              {clusterLocal && (
+                <Tooltip content="Reachable only inside the cluster, so it has no Internet edge" position="right">
+                  <Badge tone="note" size="sm" className="!text-[9px] !px-1 !py-0.5 normal-case tracking-normal cursor-help">
+                    Cluster-local
+                  </Badge>
+                </Tooltip>
+              )}
               {trafficRole && (
                 <Badge
                   tone={trafficRole === 'canary' || trafficRole === 'preview' ? 'accent1' : 'accent2'}

package/src/components/topology/TopologyFilterSidebar.tsx

@@ -33,6 +33,7 @@ const RESOURCE_KINDS: {
   { kind: 'GRPCRoute', label: 'GRPCRoute', icon: getTopologyIcon('GRPCRoute'), color: 'text-purple-300', category: 'networking' },
   { kind: 'TCPRoute', label: 'TCPRoute', icon: getTopologyIcon('TCPRoute'), color: 'text-purple-300', category: 'networking' },
   { kind: 'TLSRoute', label: 'TLSRoute', icon: getTopologyIcon('TLSRoute'), color: 'text-purple-300', category: 'networking' },
+  { kind: 'UDPRoute', label: 'UDPRoute', icon: getTopologyIcon('UDPRoute'), color: 'text-purple-300', category: 'networking' },
   { kind: 'Service', label: 'Service', icon: getTopologyIcon('Service'), color: 'text-blue-400', category: 'networking' },
   { kind: 'CalicoNetworkPolicy', label: 'Calico NetworkPolicy', icon: getTopologyIcon('CalicoNetworkPolicy'), color: 'text-teal-400', category: 'custom' },
   { kind: 'CalicoGlobalNetworkPolicy', label: 'Calico GlobalNetworkPolicy', icon: getTopologyIcon('CalicoGlobalNetworkPolicy'), color: 'text-teal-400', category: 'custom' },

package/src/components/topology/TopologyGraph.tsx

@@ -32,6 +32,7 @@ import { useRegisterShortcuts } from '../../hooks/useKeyboardShortcuts'
 
 import { K8sResourceNode } from './K8sResourceNode'
 import { GroupNode } from './GroupNode'
+import { splitInternetByGroup } from './internet-groups'
 import { NEUTRAL_OWNER, type WorkloadFocus } from '../../utils/workload-colors'
 import { ownershipOf } from '../../utils/topology-neighborhood'
 import { buildHierarchicalElkGraph, applyHierarchicalLayout, getGroupKey, isGroupEffectivelyCollapsed, type GroupDisplayLevel } from './layout'
@@ -46,7 +47,8 @@ const EDGE_COLORS = {
   'exposes': '#3b82f6',    // Blue for service exposure
   'manages': '#64748b',    // Gray for management relationships
   'configures': '#f59e0b', // Amber for config
-  'uses': '#ec4899',       // Pink for HPA
+  'uses': '#ec4899',       // Pink: autoscalers, mounted claims, dependencies
+  'protects': '#8b5cf6',   // Violet for policies and disruption budgets
 } as const
 
 function getEdgeColor(type: string, isTrafficView: boolean): string {
@@ -59,10 +61,11 @@ function getEdgeColor(type: string, isTrafficView: boolean): string {
 
 // Human-readable edge legend for the resources view (traffic view is all-green).
 const EDGE_LEGEND: { label: string; color: string }[] = [
-  { label: 'owns', color: EDGE_COLORS['manages'] },
+  { label: 'manages', color: EDGE_COLORS['manages'] },
   { label: 'exposes', color: EDGE_COLORS['exposes'] },
   { label: 'configures', color: EDGE_COLORS['configures'] },
-  { label: 'scales', color: EDGE_COLORS['uses'] },
+  { label: 'uses', color: EDGE_COLORS['uses'] },
+  { label: 'protects', color: EDGE_COLORS['protects'] },
   { label: 'routes to', color: EDGE_COLORS['routes-to'] },
 ]
 
@@ -546,75 +549,6 @@ export function TopologyGraph({
     return { nodes: newNodes, edges: newEdges }
   }, [])
 
-  // Transform to per-group Internet nodes in traffic view with grouping
-  const createPerGroupInternetNodes = useCallback((
-    nodes: TopologyNode[],
-    edges: TopologyEdge[],
-    groupMode: GroupingMode
-  ): { nodes: TopologyNode[]; edges: TopologyEdge[] } => {
-    if (groupMode === 'none') {
-      return { nodes, edges }
-    }
-
-    // Find the single Internet node
-    const internetNode = nodes.find(n => n.kind === 'Internet')
-    if (!internetNode) {
-      return { nodes, edges }
-    }
-
-    // Find all ingresses/gateways and group them
-    const ingresses = nodes.filter(n => n.kind === 'Ingress' || n.kind === 'Gateway')
-    const groupsWithIngresses = new Map<string, TopologyNode[]>()
-
-    for (const ingress of ingresses) {
-      const groupKey = getGroupKey(ingress, groupMode)
-      if (groupKey) {
-        if (!groupsWithIngresses.has(groupKey)) {
-          groupsWithIngresses.set(groupKey, [])
-        }
-        groupsWithIngresses.get(groupKey)!.push(ingress)
-      }
-    }
-
-    // If no groups with ingresses, keep original
-    if (groupsWithIngresses.size === 0) {
-      return { nodes, edges }
-    }
-
-    // Remove original Internet node and its edges
-    const newNodes = nodes.filter(n => n.id !== internetNode.id)
-    const newEdges = edges.filter(e => e.source !== internetNode.id)
-
-    // Create per-group Internet nodes
-    for (const [groupKey, groupIngresses] of groupsWithIngresses) {
-      const internetId = `internet-${groupMode}-${groupKey}`
-
-      // Add Internet node for this group with group metadata
-      newNodes.push({
-        id: internetId,
-        kind: 'Internet',
-        name: 'Internet',
-        status: 'healthy',
-        data: {
-          // Add group metadata so it gets grouped with its ingresses
-          namespace: groupMode === 'namespace' ? groupKey : groupIngresses[0]?.data?.namespace,
-          labels: groupMode === 'app' ? { 'app.kubernetes.io/name': groupKey } : {},
-        },
-      })
-
-      // Add edges from this Internet node to its ingresses
-      for (const ingress of groupIngresses) {
-        newEdges.push({
-          id: `${internetId}-to-${ingress.id}`,
-          source: internetId,
-          target: ingress.id,
-          type: 'routes-to',
-        })
-      }
-    }
-
-    return { nodes: newNodes, edges: newEdges }
-  }, [])
 
   // Prepare topology data with expanded pod groups
   const { workingNodes, workingEdges } = useMemo(() => {
@@ -634,13 +568,13 @@ export function TopologyGraph({
 
     // In traffic view with grouping, create per-group Internet nodes
     if (isTrafficView && groupingMode !== 'none') {
-      const result = createPerGroupInternetNodes(nodes, edges, groupingMode)
+      const result = splitInternetByGroup(nodes, edges, groupingMode)
       nodes = result.nodes
       edges = result.edges
     }
 
     return { workingNodes: nodes, workingEdges: edges }
-  }, [topology, expandedPodGroups, expandPodGroup, isTrafficView, groupingMode, createPerGroupInternetNodes])
+  }, [topology, expandedPodGroups, expandPodGroup, isTrafficView, groupingMode])
 
   // Handle card click in card-grid view — find the topology node and open drawer
   const handleCardClick = useCallback((nodeId: string) => {

package/src/components/topology/TopologySearch.tsx

@@ -48,6 +48,7 @@ function getKindColor(kind: string): string {
     case 'GRPCRoute':
     case 'TCPRoute':
     case 'TLSRoute':
+    case 'UDPRoute':
       return 'text-purple-300'
     case 'Service':
       return 'text-blue-400'

package/src/components/topology/internet-groups.test.ts

@@ -0,0 +1,35 @@
+import { describe, expect, it } from 'vitest'
+import type { TopologyEdge, TopologyNode } from '../../types'
+import { splitInternetByGroup } from './internet-groups'
+
+const node = (id: string, kind: string, namespace?: string): TopologyNode =>
+  ({ id, kind, name: id, status: 'healthy', data: namespace ? { namespace } : {} }) as TopologyNode
+const fromInternet = (target: string): TopologyEdge => ({ id: `internet-to-${target}`, source: 'internet', target, type: 'routes-to' })
+
+describe('splitInternetByGroup', () => {
+  it('keeps every entrypoint connected, not only Ingresses and Gateways', () => {
+    const nodes = [
+      node('internet', 'Internet'),
+      node('ingress/shop/web', 'Ingress', 'shop'),
+      node('knativeservice/shop/api', 'KnativeService', 'shop'),
+      node('ingressroute/edge/dash', 'IngressRoute', 'edge'),
+    ]
+    const edges = nodes.slice(1).map(n => fromInternet(n.id))
+    const out = splitInternetByGroup(nodes, edges, 'namespace')
+
+    const reached = out.edges.filter(e => out.nodes.find(n => n.id === e.source)?.kind === 'Internet').map(e => `${e.source} -> ${e.target}`)
+    expect(reached.sort()).toEqual([
+      'internet-namespace-edge -> ingressroute/edge/dash',
+      'internet-namespace-shop -> ingress/shop/web',
+      'internet-namespace-shop -> knativeservice/shop/api',
+    ])
+    expect(out.nodes.some(n => n.id === 'internet')).toBe(false)
+  })
+
+  it('leaves an ungrouped entrypoint on the original Internet node', () => {
+    const nodes = [node('internet', 'Internet'), node('ingress/shop/web', 'Ingress', 'shop'), node('gateway//shared', 'Gateway')]
+    const out = splitInternetByGroup(nodes, nodes.slice(1).map(n => fromInternet(n.id)), 'namespace')
+    expect(out.edges.some(e => e.source === 'internet' && e.target === 'gateway//shared')).toBe(true)
+    expect(out.nodes.some(n => n.id === 'internet')).toBe(true)
+  })
+})