@skyhook-io/k8s-ui 1.17.0 → 1.17.1

package/src/components/shared/EditableYamlView.tsx

@@ -552,7 +552,7 @@ export function EditableYamlView({
           {!readOnly && (
             <button
               onClick={handleStartEdit}
-              className="flex items-center gap-1 px-2 py-1 text-xs text-blue-400 hover:text-blue-300 hover:bg-theme-elevated rounded"
+              className="flex items-center gap-1 px-2 py-1 text-xs text-accent-text hover:text-accent-light hover:bg-theme-elevated rounded"
             >
               <Pencil className="w-3.5 h-3.5" />
               Edit

package/src/components/shared/ResourceActionsBar.tsx

@@ -42,6 +42,7 @@ import { formatRelativeAgeTime } from '../../utils/format'
 
 interface ResourceActionsBarProps {
   resource: SelectedResource
+  leadingActions?: React.ReactNode
   data: any
   onClose?: () => void
   hideLogs?: boolean
@@ -80,6 +81,7 @@ interface ResourceActionsBarProps {
   cascadeDependents?: CascadeDependent[]
   cascadeLoading?: boolean
   cascadeRootResolved?: boolean
+  cascadePreviewFailed?: boolean
 
   // Workload restart
   onRestart?: (params: { kind: string; namespace: string; name: string }, callbacks?: { onSuccess?: () => void; onError?: (err: unknown) => void }) => void
@@ -155,13 +157,13 @@ interface ResourceActionsBarProps {
 }
 
 export function ResourceActionsBar({
-  resource, data, onClose, hideLogs, showYaml, onToggleYaml,
+  resource, data, leadingActions, onClose, hideLogs, showYaml, onToggleYaml,
   onCompareTo,
   onCompareAcrossClusters,
   canExec, canViewLogs, canPortForward,
   onOpenTerminal, onOpenLogs: openLogs, onOpenWorkloadLogs: openWorkloadLogs, onCopyCommand,
   renderPortForward,
-  onDelete, isDeleting, cascadeDependents, cascadeLoading, cascadeRootResolved,
+  onDelete, isDeleting, cascadeDependents, cascadeLoading, cascadeRootResolved, cascadePreviewFailed,
   onRestart, isRestarting,
   onLoadImages, onSetImages, isSettingImages, imageOwnership,
   revisions: revisionsList, revisionsLoading, revisionsError, onRollback, isRollingBack,
@@ -291,6 +293,8 @@ export function ResourceActionsBar({
 
   return (
     <div className="flex items-center gap-1.5 px-4 py-2 flex-wrap">
+      <div className="flex min-w-0 flex-wrap items-center gap-1.5 empty:hidden" data-action-group="object">
+      {leadingActions}
       {/* Kind-specific actions (left) */}
       {kind === 'pods' && (
         <>
@@ -586,8 +590,8 @@ export function ResourceActionsBar({
         </button>
       )}
 
-      {/* Spacer pushes universal actions to the right */}
-      <div className="flex-1" />
+      </div>
+      <div className="ml-auto flex flex-wrap items-center gap-1.5" data-action-group="utility">
 
       {/* Universal actions (right-aligned). The AI/Diagnose action is NOT here — it
           lives in the detail header chrome (see WorkloadView), set apart from these
@@ -673,6 +677,8 @@ export function ResourceActionsBar({
         </Tooltip>
       )}
 
+      </div>
+
       <ForceDeleteConfirmDialog
         open={showDeleteConfirm}
         onClose={() => setShowDeleteConfirm(false)}
@@ -684,6 +690,7 @@ export function ResourceActionsBar({
         cascadeDependents={cascadeDependents}
         cascadeLoading={cascadeLoading}
         cascadeRootResolved={cascadeRootResolved}
+        cascadePreviewFailed={cascadePreviewFailed}
       />
 
       {onLoadImages && onSetImages && (

package/src/components/shared/ResourceRendererDispatch.tsx

@@ -193,6 +193,7 @@ import {
   CNPGDatabaseRenderer,
   CNPGPublicationRenderer,
   CNPGSubscriptionRenderer,
+  CNPGDatabaseRoleRenderer,
   CNPGImageCatalogRenderer,
   KyvernoGlobalContextRenderer,
   KyvernoUpdateRequestRenderer,
@@ -454,7 +455,7 @@ const KNOWN_KINDS = new Set([
   'rollouts', 'analysisruns', 'analysistemplates', 'clusteranalysistemplates', 'experiments', 'certificates', 'workflows', 'persistentvolumes',
   'storageclasses', 'certificaterequests', 'clusterissuers', 'issuers',
   'orders', 'challenges',
-  'gateways', 'gatewayclasses', 'httproutes', 'grpcroutes', 'tcproutes', 'tlsroutes', 'sealedsecrets', 'workflowtemplates', 'clusterworkflowtemplates',
+  'gateways', 'gatewayclasses', 'httproutes', 'grpcroutes', 'tcproutes', 'tlsroutes', 'udproutes', 'sealedsecrets', 'workflowtemplates', 'clusterworkflowtemplates',
   'networkpolicies', 'networkpolicy',
   'globalnetworkpolicies', 'globalnetworkpolicy',
   'stagednetworkpolicies', 'stagednetworkpolicy',
@@ -494,7 +495,7 @@ const KNOWN_KINDS = new Set([
   'externalsecrets', 'clusterexternalsecrets', 'secretstores', 'clustersecretstores',
   'clusters', 'scheduledbackups', 'poolers', 'objectstores',
   'globalcontextentries', 'updaterequests', 'ephemeralreports', 'clusterephemeralreports',
-  'databases', 'publications', 'imagecatalogs', 'clusterimagecatalogs',
+  'databases', 'publications', 'imagecatalogs', 'clusterimagecatalogs', 'databaseroles',
   'virtualservices', 'destinationrules', 'serviceentries',
   'peerauthentications', 'authorizationpolicies',
   'mutatingwebhookconfigurations', 'validatingwebhookconfigurations',
@@ -702,7 +703,7 @@ export function ResourceRendererDispatch({
   const isGroupGatedKind =
     kind === 'clusters' || kind === 'backups' || kind === 'scheduledbackups' || kind === 'poolers'
     || kind === 'objectstores' || kind === 'databases' || kind === 'publications'
-    || kind === 'subscriptions' || kind === 'imagecatalogs' || kind === 'clusterimagecatalogs' || kind === 'jobsets'
+    || kind === 'subscriptions' || kind === 'imagecatalogs' || kind === 'clusterimagecatalogs' || kind === 'databaseroles' || kind === 'jobsets'
     || kind === 'policies' || kind === 'rollouts' || kind === 'experiments'
     || kind === 'rayjobs' || kind === 'rayclusters' || kind === 'rayservices' || kind === 'admissionchecks' || kind === 'provisioningrequests'
     || kind === 'machines' || kind === 'machinesets' || kind === 'workloads' || kind === 'localqueues' || kind === 'clusterqueues'
@@ -713,7 +714,7 @@ export function ResourceRendererDispatch({
     || ((kind === 'scheduledbackups' || kind === 'poolers') && isCNPGApiVersion)
     || (kind === 'objectstores' && isApiGroup(data?.apiVersion, 'barmancloud.cnpg.io'))
     || ((kind === 'databases' || kind === 'publications' || kind === 'imagecatalogs'
-      || kind === 'clusterimagecatalogs') && isCNPGApiVersion)
+      || kind === 'clusterimagecatalogs' || kind === 'databaseroles') && isCNPGApiVersion)
     || (kind === 'subscriptions'
       && (isCNPGApiVersion || isApiGroup(data?.apiVersion, 'messaging.knative.dev')))
     || (kind === 'policies' && isApiGroup(data?.apiVersion, 'kyverno.io'))
@@ -800,7 +801,7 @@ export function ResourceRendererDispatch({
       {kind !== 'events' && <EventsSection fullscreen={!!renderSidebar} events={events || []} updates={updates || []} isLoading={eventsLoading ?? false} eventsError={eventsError ?? null} updatesError={updatesError ?? null} hint={eventsHint} />}
       <LabelsSection data={data} />
       <AnnotationsSection data={data} />
-      <MetadataSection data={data} />
+      <MetadataSection data={data} onNavigate={onNavigate} />
     </>
   )
 
@@ -860,6 +861,7 @@ export function ResourceRendererDispatch({
         {kind === 'grpcroutes' && <GRPCRouteRenderer data={data} onNavigate={onNavigate} />}
         {kind === 'tcproutes' && <SimpleRouteRenderer data={data} kind="TCPRoute" onNavigate={onNavigate} />}
         {kind === 'tlsroutes' && <SimpleRouteRenderer data={data} kind="TLSRoute" onNavigate={onNavigate} />}
+        {kind === 'udproutes' && <SimpleRouteRenderer data={data} kind="UDPRoute" onNavigate={onNavigate} />}
         {kind === 'sealedsecrets' && <SealedSecretRenderer data={data} onNavigate={onNavigate} />}
         {(kind === 'workflowtemplates' || kind === 'clusterworkflowtemplates') && <WorkflowTemplateRenderer data={data} />}
         {isCoreNetworkPolicy && <NetworkPolicyRenderer data={data} />}
@@ -926,6 +928,7 @@ export function ResourceRendererDispatch({
         {kind === 'databases' && isApiGroup(data.apiVersion, CNPG_GROUP) && <CNPGDatabaseComp data={data} onNavigate={onNavigate} />}
         {kind === 'publications' && isApiGroup(data.apiVersion, CNPG_GROUP) && <CNPGPublicationComp data={data} onNavigate={onNavigate} />}
         {kind === 'subscriptions' && isApiGroup(data.apiVersion, CNPG_GROUP) && <CNPGSubscriptionComp data={data} onNavigate={onNavigate} />}
+        {kind === 'databaseroles' && isApiGroup(data.apiVersion, CNPG_GROUP) && <CNPGDatabaseRoleRenderer data={data} onNavigate={onNavigate} />}
         {(kind === 'imagecatalogs' || kind === 'clusterimagecatalogs') && isApiGroup(data.apiVersion, CNPG_GROUP) && <CNPGImageCatalogComp data={data} onNavigate={onNavigate} />}
         {kind === 'backups' && isApiGroup(data.apiVersion, CNPG_GROUP) && <CNPGBackupRenderer data={data} onNavigate={onNavigate} />}
         {kind === 'backups' && isApiGroup(data.apiVersion, 'velero.io') && <VeleroBackupComp data={data} onNavigate={onNavigate} />}
@@ -971,8 +974,8 @@ export function ResourceRendererDispatch({
         {kind === 'azuremanagedcontrolplanes' && <AzureManagedControlPlaneRenderer data={data} onNavigate={onNavigate} />}
         {kind === 'azuremanagedmachinepools' && <AzureManagedMachinePoolRenderer data={data} onNavigate={onNavigate} />}
         {kind === 'azuremachines' && <AzureMachineRenderer data={data} onNavigate={onNavigate} />}
-        {kind === 'virtualservices' && <IstioVirtualServiceRenderer data={data} onNavigate={onNavigate} />}
-        {kind === 'destinationrules' && <IstioDestinationRuleRenderer data={data} onNavigate={onNavigate} />}
+        {kind === 'virtualservices' && <IstioVirtualServiceRenderer data={data} onNavigate={onNavigate} serviceDomain={relationships?.istioServiceDomain} />}
+        {kind === 'destinationrules' && <IstioDestinationRuleRenderer data={data} onNavigate={onNavigate} serviceDomain={relationships?.istioServiceDomain} />}
         {kind === 'serviceentries' && <IstioServiceEntryRenderer data={data} />}
         {kind === 'peerauthentications' && <IstioPeerAuthenticationRenderer data={data} />}
         {kind === 'authorizationpolicies' && <IstioAuthorizationPolicyRenderer data={data} />}
@@ -1190,7 +1193,7 @@ export function getResourceStatus(kind: string, data: any): { text: string; colo
     return getGatewayStatus(data)
   }
   if (k === 'gatewayclasses') return getGatewayClassStatus(data)
-  if (k === 'httproutes' || k === 'grpcroutes' || k === 'tcproutes' || k === 'tlsroutes') return getRouteStatus(data)
+  if (k === 'httproutes' || k === 'grpcroutes' || k === 'tcproutes' || k === 'tlsroutes' || k === 'udproutes') return getRouteStatus(data)
   if (k === 'sealedsecrets') return getSealedSecretStatus(data)
   if (k === 'poddisruptionbudgets') return getPDBStatus(data)
   if (k === 'gitrepositories') return getGitRepositoryStatus(data)
@@ -1247,7 +1250,7 @@ export function getResourceStatus(kind: string, data: any): { text: string; colo
   }
   // Group-guarded for the same reason as the renderers: these plurals are
   // generic enough that another operator can serve them.
-  if ((k === 'databases' || k === 'publications' || k === 'subscriptions') && isApiGroup(data.apiVersion, CNPG_GROUP)) {
+  if ((k === 'databases' || k === 'publications' || k === 'subscriptions' || k === 'databaseroles') && isApiGroup(data.apiVersion, CNPG_GROUP)) {
     return getCNPGDeclarativeStatus(data)
   }
   if (k === 'globalcontextentries') return getKyvernoGlobalContextStatus(data)

package/src/components/shared/index.ts

@@ -11,3 +11,5 @@ export { CreateResourceDialog, type CreateResourceDialogProps, type ApplyResult
 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/TimelineSwimlanes.tsx

@@ -675,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,

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'
@@ -548,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(() => {
@@ -636,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)
+  })
+})

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

@@ -0,0 +1,55 @@
+import type { GroupingMode, TopologyEdge, TopologyNode } from '../../types'
+import { getGroupKey } from './layout'
+
+/**
+ * Splits the traffic view's single Internet node into one per group, so each
+ * namespace or app shows its own entry from outside. Every original Internet
+ * edge is kept, whatever kind its entrypoint is (Ingress, Gateway, Istio
+ * Gateway, Knative Service, Traefik route, Contour HTTPProxy); an entrypoint
+ * with no group stays connected to the original Internet node.
+ */
+export function splitInternetByGroup(
+  nodes: TopologyNode[],
+  edges: TopologyEdge[],
+  groupMode: GroupingMode,
+): { nodes: TopologyNode[]; edges: TopologyEdge[] } {
+  if (groupMode === 'none') return { nodes, edges }
+  const internetNode = nodes.find(n => n.kind === 'Internet')
+  if (!internetNode) return { nodes, edges }
+
+  const nodeById = new Map(nodes.map(n => [n.id, n]))
+  const groups = new Map<string, { entry: TopologyNode; edges: TopologyEdge[] }>()
+  const regrouped = new Set<TopologyEdge>()
+  for (const edge of edges) {
+    if (edge.source !== internetNode.id) continue
+    const target = nodeById.get(edge.target)
+    const groupKey = target ? getGroupKey(target, groupMode) : null
+    if (!target || !groupKey) continue
+    if (!groups.has(groupKey)) groups.set(groupKey, { entry: target, edges: [] })
+    groups.get(groupKey)!.edges.push(edge)
+    regrouped.add(edge)
+  }
+  if (groups.size === 0) return { nodes, edges }
+
+  const keepOriginal = edges.some(e => e.source === internetNode.id && !regrouped.has(e))
+  const newNodes = keepOriginal ? [...nodes] : nodes.filter(n => n.id !== internetNode.id)
+  const newEdges = edges.filter(e => !regrouped.has(e))
+  for (const [groupKey, group] of groups) {
+    const internetId = `internet-${groupMode}-${groupKey}`
+    newNodes.push({
+      id: internetId,
+      kind: 'Internet',
+      name: 'Internet',
+      status: 'healthy',
+      data: {
+        // Group metadata so the node lands inside its entrypoints' group.
+        namespace: groupMode === 'namespace' ? groupKey : group.entry.data?.namespace,
+        labels: groupMode === 'app' ? { 'app.kubernetes.io/name': groupKey } : {},
+      },
+    })
+    for (const edge of group.edges) {
+      newEdges.push({ ...edge, id: `${internetId}-to-${edge.target}`, source: internetId })
+    }
+  }
+  return { nodes: newNodes, edges: newEdges }
+}

package/src/components/topology/layout.ts

@@ -864,7 +864,7 @@ function computeWorkloadCards(
 const KIND_PRIORITY: Record<string, number> = {
   'Deployment': 1, 'Rollout': 1, 'StatefulSet': 2, 'DaemonSet': 3,
   'CronJob': 4, 'CronWorkflow': 4, 'Job': 5, 'Workflow': 5, 'Service': 6, 'Gateway': 7,
-  'HTTPRoute': 6, 'GRPCRoute': 6, 'TCPRoute': 6, 'TLSRoute': 6, 'Ingress': 7,
+  'HTTPRoute': 6, 'GRPCRoute': 6, 'TCPRoute': 6, 'TLSRoute': 6, 'UDPRoute': 6, 'Ingress': 7,
   'CalicoNetworkPolicy': 10, 'CalicoGlobalNetworkPolicy': 10,
   'CalicoStagedNetworkPolicy': 10, 'CalicoStagedGlobalNetworkPolicy': 10,
   'CalicoStagedKubernetesNetworkPolicy': 10,

package/src/components/ui/Badge.tsx

@@ -85,6 +85,7 @@ const KIND: Record<string, string> = {
   HTTPRoute:     'bg-purple-100 text-purple-700 border-purple-300 dark:bg-purple-950/50 dark:text-purple-400 dark:border-purple-700/40',
   GRPCRoute:     'bg-purple-100 text-purple-700 border-purple-300 dark:bg-purple-950/50 dark:text-purple-400 dark:border-purple-700/40',
   TCPRoute:      'bg-purple-100 text-purple-700 border-purple-300 dark:bg-purple-950/50 dark:text-purple-400 dark:border-purple-700/40',
+  UDPRoute:      'bg-purple-100 text-purple-700 border-purple-300 dark:bg-purple-950/50 dark:text-purple-400 dark:border-purple-700/40',
   TLSRoute:      'bg-purple-100 text-purple-700 border-purple-300 dark:bg-purple-950/50 dark:text-purple-400 dark:border-purple-700/40',
 
   // Config

package/src/components/ui/FoldSection.tsx

@@ -0,0 +1,68 @@
+import { useEffect, useState, type ReactNode } from 'react'
+import { clsx } from 'clsx'
+import { toneTextClass } from './status-tone'
+import { Collapse, CollapseChevron, useDisclosure } from './Collapse'
+
+/** A folded section's one-line summary, and whether it opens on its own. */
+export interface FoldSummary {
+  text: string
+  /** Something in the section needs a look: it opens itself. */
+  attention: boolean
+}
+
+export function SectionHeading({ children, hint }: { children: ReactNode; hint?: ReactNode }) {
+  return (
+    <div className="mb-2 mt-5 flex items-baseline gap-2 first:mt-0">
+      <h3 className="text-[11px] font-semibold uppercase tracking-wide text-theme-text-tertiary">{children}</h3>
+      {hint && <span className="text-[11px] text-theme-text-tertiary">{hint}</span>}
+    </div>
+  )
+}
+
+/**
+ * A section folded to one summary line. It opens itself when `attention`
+ * turns true (data arriving after the first render included), and stays as
+ * the reader left it otherwise.
+ */
+export function FoldSection({
+  title,
+  hint,
+  summary,
+  attention,
+  children,
+}: {
+  title: ReactNode
+  hint?: ReactNode
+  summary: ReactNode
+  attention: boolean
+  children: ReactNode
+}) {
+  const [open, setOpen] = useState(attention)
+  useEffect(() => {
+    if (attention) setOpen(true)
+  }, [attention])
+  const d = useDisclosure(open)
+  return (
+    <div className="mt-5 first:mt-0">
+      <h3>
+      <button
+        type="button"
+        {...d.buttonProps}
+        onClick={() => setOpen((v) => !v)}
+        className="flex w-full items-start gap-2 rounded text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent"
+      >
+        <CollapseChevron open={open} className="mt-1 h-3 w-3 shrink-0 text-theme-text-tertiary" />
+        {/* Wrapped parts line up under the title, not under the chevron. */}
+        <span className="flex min-w-0 flex-wrap items-baseline gap-x-2 gap-y-0.5">
+          <span className="text-[11px] font-semibold uppercase tracking-wide text-theme-text-tertiary">{title}</span>
+          {hint && <span className="text-[11px] text-theme-text-tertiary">{hint}</span>}
+          {!open && <span className={clsx('min-w-0 text-sm', attention ? toneTextClass('degraded') : 'text-theme-text-secondary')}>{summary}</span>}
+        </span>
+      </button>
+      </h3>
+      <Collapse open={open} id={d.panelId}>
+        <div className="pt-2">{children}</div>
+      </Collapse>
+    </div>
+  )
+}