@skyhook-io/k8s-ui 1.8.4 → 1.8.6

package/src/components/topology/layout-elk-graph.test.ts

@@ -0,0 +1,222 @@
+import { describe, it, expect, beforeAll } from 'vitest'
+import { buildHierarchicalElkGraph, applyHierarchicalLayout, buildInterGroupEdges, setLayoutEngine, type GroupDisplayLevel } from './layout'
+import type { TopologyNode, TopologyEdge } from '../../types'
+
+// Collect every id ELK will see as a layoutable shape: top-level children plus
+// the members of expanded groups. An edge endpoint outside this set is exactly
+// what makes ELK throw "Referenced shape does not exist".
+function validEndpointIds(elkGraph: { children: Array<{ id: string; children?: Array<{ id: string }> }> }): Set<string> {
+  const ids = new Set<string>()
+  for (const child of elkGraph.children) {
+    ids.add(child.id)
+    for (const c of child.children ?? []) ids.add(c.id)
+  }
+  return ids
+}
+
+function deployment(ns: string, name: string): TopologyNode {
+  return {
+    id: `deployment/${ns}/${name}`,
+    kind: 'Deployment',
+    name,
+    status: 'healthy',
+    data: { namespace: ns },
+  }
+}
+
+describe('buildHierarchicalElkGraph — collapse predicate consistency', () => {
+  // Reproduces the Resources→Traffic crash: smart-default chipped the namespaces
+  // present at the time (app1), then a view switch surfaced a namespace
+  // (skyhook-gateway) with no groupLevels entry. Node placement hid its members
+  // (treated as collapsed) but the old edge-redirect only fired for groups in
+  // collapsedGroups — leaving an edge pointed at a hidden plain node id.
+  it('redirects edges into a late-arriving (no-level) group so no edge dangles', () => {
+    const nodes: TopologyNode[] = [
+      deployment('app1', 'web'),
+      deployment('skyhook-gateway', 'skyhook-frpc'),
+    ]
+    const edges: TopologyEdge[] = [
+      { id: 'e1', source: 'deployment/app1/web', target: 'deployment/skyhook-gateway/skyhook-frpc', type: 'routes-to' },
+    ]
+
+    // Smart default chipped app1 only; skyhook-gateway appeared later → no entry.
+    const groupLevels = new Map<string, GroupDisplayLevel>([['group-namespace-app1', 'chip']])
+    // collapsedGroups mirrors TopologyGraph: only explicit non-'topology' levels.
+    const collapsedGroups = new Set<string>(['group-namespace-app1'])
+
+    // smartDefaultActive=true: the large-cluster chip pass ran, so the
+    // late-arriving skyhook-gateway defaults to collapsed.
+    const { elkGraph } = buildHierarchicalElkGraph(nodes, edges, 'namespace', collapsedGroups, groupLevels, true)
+
+    const valid = validEndpointIds(elkGraph)
+    for (const edge of elkGraph.edges) {
+      expect(valid.has(edge.sources[0]), `source ${edge.sources[0]} must exist`).toBe(true)
+      expect(valid.has(edge.targets[0]), `target ${edge.targets[0]} must exist`).toBe(true)
+    }
+
+    // The plain hidden member id must never survive as an endpoint.
+    const endpoints = elkGraph.edges.flatMap(e => [...e.sources, ...e.targets])
+    expect(endpoints).not.toContain('deployment/skyhook-gateway/skyhook-frpc')
+    expect(endpoints).toContain('group-namespace-skyhook-gateway')
+  })
+
+  // Without smart-default (small clusters, manual toggles), collapsing one group
+  // must NOT cascade-collapse untouched no-entry groups. app2 has no level entry;
+  // since smartDefaultActive is false it stays expanded and its member renders.
+  it('does not cascade-collapse no-entry groups when smart-default is inactive', () => {
+    const nodes: TopologyNode[] = [
+      deployment('app1', 'web'),
+      deployment('app2', 'api'),
+    ]
+    const edges: TopologyEdge[] = [
+      { id: 'e1', source: 'deployment/app1/web', target: 'deployment/app2/api', type: 'routes-to' },
+    ]
+    // User collapsed only app1; app2 untouched (no entry).
+    const groupLevels = new Map<string, GroupDisplayLevel>([['group-namespace-app1', 'chip']])
+    const collapsedGroups = new Set<string>(['group-namespace-app1'])
+
+    const { elkGraph } = buildHierarchicalElkGraph(nodes, edges, 'namespace', collapsedGroups, groupLevels, false)
+
+    // app2 stays expanded with its member as a child.
+    const app2 = elkGraph.children.find(c => c.id === 'group-namespace-app2')
+    expect(app2?.children?.some(c => c.id === 'deployment/app2/api')).toBe(true)
+
+    // Edge stays valid: app1 redirected to its chip, app2 member kept (it exists).
+    const valid = validEndpointIds(elkGraph)
+    for (const edge of elkGraph.edges) {
+      expect(valid.has(edge.sources[0])).toBe(true)
+      expect(valid.has(edge.targets[0])).toBe(true)
+    }
+    const endpoints = elkGraph.edges.flatMap(e => [...e.sources, ...e.targets])
+    expect(endpoints).toContain('group-namespace-app1')
+    expect(endpoints).toContain('deployment/app2/api')
+  })
+
+  it('keeps edges between expanded groups referencing plain member ids', () => {
+    const nodes: TopologyNode[] = [
+      deployment('app1', 'web'),
+      deployment('app2', 'api'),
+    ]
+    const edges: TopologyEdge[] = [
+      { id: 'e1', source: 'deployment/app1/web', target: 'deployment/app2/api', type: 'routes-to' },
+    ]
+    // Both groups explicitly expanded.
+    const groupLevels = new Map<string, GroupDisplayLevel>([
+      ['group-namespace-app1', 'topology'],
+      ['group-namespace-app2', 'topology'],
+    ])
+
+    const { elkGraph } = buildHierarchicalElkGraph(nodes, edges, 'namespace', new Set(), groupLevels)
+
+    const valid = validEndpointIds(elkGraph)
+    for (const edge of elkGraph.edges) {
+      expect(valid.has(edge.sources[0])).toBe(true)
+      expect(valid.has(edge.targets[0])).toBe(true)
+    }
+    const endpoints = elkGraph.edges.flatMap(e => [...e.sources, ...e.targets])
+    expect(endpoints).toContain('deployment/app1/web')
+    expect(endpoints).toContain('deployment/app2/api')
+  })
+
+  it('produces no dangling endpoints with no grouping', () => {
+    const nodes: TopologyNode[] = [deployment('app1', 'web'), deployment('app1', 'api')]
+    const edges: TopologyEdge[] = [
+      { id: 'e1', source: 'deployment/app1/web', target: 'deployment/app1/api', type: 'routes-to' },
+    ]
+    const { elkGraph } = buildHierarchicalElkGraph(nodes, edges, 'none', new Set(), new Map())
+    const valid = validEndpointIds(elkGraph)
+    for (const edge of elkGraph.edges) {
+      expect(valid.has(edge.sources[0])).toBe(true)
+      expect(valid.has(edge.targets[0])).toBe(true)
+    }
+  })
+})
+
+// Phase-2 meta layout: edges that position groups relative to each other must
+// survive even when both endpoints are already meta nodes (two collapsed chips, or
+// a chip and an ungrouped node). The old branching dropped those, so connected
+// chips weren't pulled together.
+describe('buildInterGroupEdges — meta-graph connectivity', () => {
+  const edge = (id: string, source: string, target: string) => ({ id, sources: [source], targets: [target] })
+
+  it('keeps chip↔chip edges (both endpoints already meta nodes)', () => {
+    const metaIds = new Set(['group-namespace-app1', 'group-namespace-app2'])
+    // Neither endpoint is an expanded-group member, so nodeToGroup is empty.
+    const out = buildInterGroupEdges([edge('e1', 'group-namespace-app1', 'group-namespace-app2')], new Map(), metaIds)
+    expect(out).toHaveLength(1)
+    expect(out[0]).toMatchObject({ sources: ['group-namespace-app1'], targets: ['group-namespace-app2'] })
+  })
+
+  it('keeps chip↔ungrouped edges', () => {
+    const metaIds = new Set(['group-namespace-app1', 'orphan-node'])
+    const out = buildInterGroupEdges([edge('e1', 'group-namespace-app1', 'orphan-node')], new Map(), metaIds)
+    expect(out).toHaveLength(1)
+  })
+
+  it('normalizes expanded-group members to their group', () => {
+    const nodeToGroup = new Map([
+      ['deployment/app1/web', 'group-namespace-app1'],
+      ['deployment/app2/api', 'group-namespace-app2'],
+    ])
+    const metaIds = new Set(['group-namespace-app1', 'group-namespace-app2'])
+    const out = buildInterGroupEdges([edge('e1', 'deployment/app1/web', 'deployment/app2/api')], nodeToGroup, metaIds)
+    expect(out[0]).toMatchObject({ sources: ['group-namespace-app1'], targets: ['group-namespace-app2'] })
+  })
+
+  it('drops intra-group edges and endpoints absent from the meta graph', () => {
+    const nodeToGroup = new Map([
+      ['deployment/app1/web', 'group-namespace-app1'],
+      ['deployment/app1/api', 'group-namespace-app1'],
+    ])
+    const metaIds = new Set(['group-namespace-app1'])
+    // Same group on both ends → intra, skip. And an edge to a non-meta id → skip.
+    const out = buildInterGroupEdges([
+      edge('e1', 'deployment/app1/web', 'deployment/app1/api'),
+      edge('e2', 'group-namespace-app1', 'ghost-node'),
+    ], nodeToGroup, metaIds)
+    expect(out).toHaveLength(0)
+  })
+
+  it('dedupes edges collapsing to the same meta pair', () => {
+    const nodeToGroup = new Map([
+      ['deployment/app1/web', 'group-namespace-app1'],
+      ['deployment/app1/api', 'group-namespace-app1'],
+      ['deployment/app2/x', 'group-namespace-app2'],
+    ])
+    const metaIds = new Set(['group-namespace-app1', 'group-namespace-app2'])
+    const out = buildInterGroupEdges([
+      edge('e1', 'deployment/app1/web', 'deployment/app2/x'),
+      edge('e2', 'deployment/app1/api', 'deployment/app2/x'),
+    ], nodeToGroup, metaIds)
+    expect(out).toHaveLength(1)
+  })
+})
+
+// Render layer: the GroupNode's displayLevel must agree with ELK placement, or a
+// chip renders over its own laid-out children. group.isCollapsed (from the layout
+// engine) is the single source of truth.
+describe('applyHierarchicalLayout — rendered displayLevel matches placement', () => {
+  beforeAll(() => setLayoutEngine('main-thread'))
+
+  const noop = () => {}
+  const callbacks = { onSetLevel: noop, onCardClick: noop }
+
+  it('renders an untouched no-entry group as topology (not chip) on manual collapse', async () => {
+    const nodes: TopologyNode[] = [deployment('app1', 'web'), deployment('app2', 'api')]
+    const edges: TopologyEdge[] = [
+      { id: 'e1', source: 'deployment/app1/web', target: 'deployment/app2/api', type: 'routes-to' },
+    ]
+    // Small cluster, smart-default inactive: user collapsed only app1.
+    const groupLevels = new Map<string, GroupDisplayLevel>([['group-namespace-app1', 'chip']])
+    const collapsedGroups = new Set<string>(['group-namespace-app1'])
+
+    const { elkGraph, groupMap } = buildHierarchicalElkGraph(nodes, edges, 'namespace', collapsedGroups, groupLevels, false)
+    const { nodes: rendered } = await applyHierarchicalLayout(
+      elkGraph, nodes, edges, groupMap, 'namespace', collapsedGroups, callbacks, false, groupLevels,
+    )
+
+    const groupNode = (id: string) => rendered.find(n => n.id === id && n.type === 'group')
+    expect(groupNode('group-namespace-app1')?.data.displayLevel).toBe('chip')
+    expect(groupNode('group-namespace-app2')?.data.displayLevel).toBe('topology')
+  })
+})

package/src/components/topology/layout.ts

@@ -245,19 +245,11 @@ async function runLayoutOnMainThread(
 
   // Phase 2: Build meta-graph and position groups based on inter-group edges
   // (nodeToGroup was built once above).
-  const interGroupEdges: ElkEdge[] = []
-  const seen = new Set<string>()
-  for (const edge of elkGraph.edges) {
-    const sg = nodeToGroup.get(edge.sources[0])
-    const tg = nodeToGroup.get(edge.targets[0])
-    if (sg && tg && sg !== tg) {
-      const key = `${sg}->${tg}`
-      if (!seen.has(key)) { seen.add(key); interGroupEdges.push({ id: `inter-${key}`, sources: [sg], targets: [tg] }) }
-    } else if ((!sg && tg) || (sg && !tg)) {
-      const s = sg || edge.sources[0], t = tg || edge.targets[0], key = `${s}->${t}`
-      if (!seen.has(key)) { seen.add(key); interGroupEdges.push({ id: `inter-${key}`, sources: [s], targets: [t] }) }
-    }
-  }
+  const metaIds = new Set<string>([
+    ...groupLayouts.map(g => g.groupId),
+    ...ungroupedNodes.map(n => n.id),
+  ])
+  const interGroupEdges = buildInterGroupEdges(elkGraph.edges, nodeToGroup, metaIds)
 
   const metaResult = await elk.layout({
     id: 'meta-root',
@@ -323,6 +315,36 @@ interface ElkGraph {
   edges: ElkEdge[]
 }
 
+/**
+ * Build the meta-graph edges that position groups relative to each other (Phase 2).
+ * Each endpoint is normalized to its meta node: an expanded group's member maps to
+ * its group (via nodeToGroup); a collapsed-group chip id or an ungrouped node id is
+ * ALREADY a meta node and is used as-is. Edges between two already-meta nodes
+ * (chip↔chip, chip↔ungrouped) must still be included — dropping them loses the
+ * connectivity ELK uses to place connected groups near each other. Endpoints absent
+ * from metaIds are skipped (defensive — keeps the meta graph importable).
+ *
+ * Mirrored inline in layout.worker.ts, which is intentionally self-contained.
+ */
+export function buildInterGroupEdges(
+  edges: ElkEdge[],
+  nodeToGroup: Map<string, string>,
+  metaIds: Set<string>,
+): ElkEdge[] {
+  const out: ElkEdge[] = []
+  const seen = new Set<string>()
+  for (const edge of edges) {
+    const s = nodeToGroup.get(edge.sources[0]) ?? edge.sources[0]
+    const t = nodeToGroup.get(edge.targets[0]) ?? edge.targets[0]
+    if (s === t || !metaIds.has(s) || !metaIds.has(t)) continue
+    const key = `${s}->${t}`
+    if (seen.has(key)) continue
+    seen.add(key)
+    out.push({ id: `inter-${key}`, sources: [s], targets: [t] })
+  }
+  return out
+}
+
 // Get app label from a node (if it has one)
 function getAppLabel(node: TopologyNode): string | null {
   const labels = (node.data.labels as Record<string, string>) || {}
@@ -459,13 +481,41 @@ function pickGroupName(nodes: TopologyNode[]): string {
   return sorted[0].name
 }
 
+/**
+ * Whether a group renders as a single collapsed chip/card (members hidden) vs an
+ * expanded container. This is the ONE predicate that node placement, ELK edge
+ * redirect, and ReactFlow edge building must all agree on — if they diverge, an
+ * edge can reference a member hidden inside a chip, which either crashes ELK
+ * ("Referenced shape does not exist") or silently drops the rendered edge.
+ *
+ * - Explicit chip/cardGrid levels are always collapsed (they're in collapsedGroups).
+ * - When the smart-default chip pass is active (large clusters), a group with no
+ *   level entry is a late arrival and defaults to collapsed — e.g. a namespace
+ *   that only surfaces after switching Resources↔Traffic. When it is NOT active
+ *   (small clusters, manual per-group toggles), a no-entry group stays expanded,
+ *   so collapsing one group never cascades to untouched groups.
+ */
+export function isGroupEffectivelyCollapsed(
+  groupId: string,
+  collapsedGroups: Set<string>,
+  groupLevels: Map<string, GroupDisplayLevel> | undefined,
+  smartDefaultActive: boolean,
+): boolean {
+  if (collapsedGroups.has(groupId)) return true
+  if (smartDefaultActive && groupLevels?.get(groupId) !== 'topology') return true
+  return false
+}
+
 // Build hierarchical ELK graph with groups containing children
 export function buildHierarchicalElkGraph(
   topologyNodes: TopologyNode[],
   edges: Array<{ id: string; source: string; target: string; type: string }>,
   groupingMode: GroupingMode,
   collapsedGroups: Set<string>,
-  groupLevels?: Map<string, GroupDisplayLevel>
+  groupLevels?: Map<string, GroupDisplayLevel>,
+  /** True when the large-cluster smart-default chip pass has materialized levels;
+   *  makes no-entry groups default to collapsed (see isGroupEffectivelyCollapsed). */
+  smartDefaultActive = false,
 ): { elkGraph: ElkGraph; groupMap: Map<string, string[]>; nodeToGroup: Map<string, string> } {
   const groupMap = new Map<string, string[]>()
   const nodeToGroup = new Map<string, string>()
@@ -496,6 +546,11 @@ export function buildHierarchicalElkGraph(
     }
   }
 
+  // Node placement and edge redirect MUST share this predicate — see
+  // isGroupEffectivelyCollapsed for why.
+  const isGroupCollapsed = (groupId: string): boolean =>
+    isGroupEffectivelyCollapsed(groupId, collapsedGroups, groupLevels, smartDefaultActive)
+
   const children: ElkNode[] = []
   const processedNodes = new Set<string>()
 
@@ -516,16 +571,7 @@ export function buildHierarchicalElkGraph(
     // Create group nodes with children
     for (const [groupKey, memberIds] of groupMap) {
       const groupId = `group-${groupingMode}-${groupKey}`
-      // When groupLevels has entries for the CURRENT grouping mode, any group without
-      // an explicit 'topology' level is collapsed. This prevents late-arriving namespaces
-      // from defaulting to expanded and overlapping with collapsed chips.
-      // Only apply when levels exist for the same grouping prefix — don't let namespace
-      // levels leak into app/label grouping contexts.
-      const groupPrefix = `group-${groupingMode}-`
-      const hasLevelsForCurrentMode = groupLevels && groupLevels.size > 0 &&
-        [...groupLevels.keys()].some(k => k.startsWith(groupPrefix))
-      const isCollapsed = collapsedGroups.has(groupId) ||
-        (hasLevelsForCurrentMode && groupLevels!.get(groupId) !== 'topology')
+      const isCollapsed = isGroupCollapsed(groupId)
 
       if (isCollapsed) {
         const displayLevel = groupLevels?.get(groupId) || 'chip'
@@ -623,6 +669,18 @@ export function buildHierarchicalElkGraph(
     }
   }
 
+  // Every ELK edge endpoint must reference a node present in the graph (a
+  // top-level child, or a member of an expanded group). A single dangling
+  // reference makes ELK reject the whole import, blanking the topology — so we
+  // drop the stray edge instead. With the unified isGroupCollapsed predicate
+  // this should never fire; it's insurance against future placement/redirect
+  // drift.
+  const validEndpointIds = new Set<string>()
+  for (const child of children) {
+    validEndpointIds.add(child.id)
+    if (child.children) for (const c of child.children) validEndpointIds.add(c.id)
+  }
+
   // Build edges, redirecting to groups when collapsed
   const elkEdges: ElkEdge[] = []
   const seenEdges = new Set<string>()
@@ -631,17 +689,21 @@ export function buildHierarchicalElkGraph(
     let source = edge.source
     let target = edge.target
 
-    // Redirect edges to collapsed groups
+    // Redirect edges to collapsed groups — same predicate as node placement so
+    // an edge never references a member hidden inside a chip.
     const sourceGroup = nodeToGroup.get(source)
-    if (sourceGroup && collapsedGroups.has(sourceGroup)) {
+    if (sourceGroup && isGroupCollapsed(sourceGroup)) {
       source = sourceGroup
     }
 
     const targetGroup = nodeToGroup.get(target)
-    if (targetGroup && collapsedGroups.has(targetGroup)) {
+    if (targetGroup && isGroupCollapsed(targetGroup)) {
       target = targetGroup
     }
 
+    // Drop edges whose endpoints aren't in the graph (see validEndpointIds)
+    if (!validEndpointIds.has(source) || !validEndpointIds.has(target)) continue
+
     // Skip self-loops
     if (source === target) continue
 
@@ -865,12 +927,13 @@ export async function applyHierarchicalLayout(
       positions.set(group.groupId, pos)
 
       const { worstStatus, unhealthyCount } = computeGroupHealth(memberIds, nodeMap)
-      // Default to 'chip' when groupLevels has entries for the current grouping mode,
-      // so late-arriving namespaces don't render as expanded topology and overlap with chips.
-      const hasLevelsForMode = groupLevels && groupLevels.size > 0 &&
-        [...groupLevels.keys()].some(k => k.startsWith(`group-${groupingMode}-`))
-      const defaultLevel: GroupDisplayLevel = hasLevelsForMode ? 'chip' : 'topology'
-      const displayLevel: GroupDisplayLevel = groupLevels?.get(group.groupId) || (group.isCollapsed ? 'chip' : defaultLevel)
+      // Display level derives from the SAME source of truth as ELK node placement:
+      // group.isCollapsed reflects buildHierarchicalElkGraph's isGroupEffectivelyCollapsed
+      // decision (an expanded group was laid out with its children). Recomputing a
+      // separate "default" here would let the rendered chip disagree with the laid-out
+      // children — e.g. a manual single collapse rendering untouched groups as chips
+      // while their children are still placed. An explicit level (e.g. cardGrid) wins.
+      const displayLevel: GroupDisplayLevel = groupLevels?.get(group.groupId) || (group.isCollapsed ? 'chip' : 'topology')
 
       // Compute kind breakdown for collapsed chips
       const kindCounts: Record<string, number> = {}

package/src/components/topology/layout.worker.ts

@@ -198,44 +198,28 @@ self.onmessage = async (e: MessageEvent<LayoutRequest>) => {
     }
 
     // Phase 2: Build meta-graph and position groups (nodeToGroup built once above).
-    // Find inter-group edges
-    const interGroupEdges: ElkEdge[] = []
-    const seenInterGroupEdges = new Set<string>()
-
-    for (const edge of elkGraph.edges) {
-      const sourceGroup = nodeToGroup.get(edge.sources[0])
-      const targetGroup = nodeToGroup.get(edge.targets[0])
-
-      if (sourceGroup && targetGroup && sourceGroup !== targetGroup) {
-        const edgeKey = `${sourceGroup}->${targetGroup}`
-        if (!seenInterGroupEdges.has(edgeKey)) {
-          seenInterGroupEdges.add(edgeKey)
-          interGroupEdges.push({
-            id: `inter-${edgeKey}`,
-            sources: [sourceGroup],
-            targets: [targetGroup],
-          })
-        }
-      } else if ((!sourceGroup && targetGroup) || (sourceGroup && !targetGroup)) {
-        const source = sourceGroup || edge.sources[0]
-        const target = targetGroup || edge.targets[0]
-        const edgeKey = `${source}->${target}`
-        if (!seenInterGroupEdges.has(edgeKey)) {
-          seenInterGroupEdges.add(edgeKey)
-          interGroupEdges.push({
-            id: `inter-${edgeKey}`,
-            sources: [source],
-            targets: [target],
-          })
-        }
-      }
-    }
-
-    // Build and layout meta-graph
+    // Canonical version: buildInterGroupEdges in layout.ts — kept inline here because
+    // the worker is intentionally self-contained. Normalize each endpoint to its meta
+    // node (expanded member → its group; a chip id or ungrouped id is already a meta
+    // node) and keep edges between two already-meta nodes (chip↔chip, chip↔ungrouped),
+    // which the old branching dropped — losing the connectivity used to place groups.
     const metaChildren: ElkNode[] = [
       ...groupLayouts.map(g => ({ id: g.groupId, width: g.width, height: g.height })),
       ...ungroupedNodes.map(n => ({ id: n.id, width: n.width, height: n.height })),
     ]
+    const metaIds = new Set<string>(metaChildren.map(c => c.id))
+
+    const interGroupEdges: ElkEdge[] = []
+    const seenInterGroupEdges = new Set<string>()
+    for (const edge of elkGraph.edges) {
+      const source = nodeToGroup.get(edge.sources[0]) ?? edge.sources[0]
+      const target = nodeToGroup.get(edge.targets[0]) ?? edge.targets[0]
+      if (source === target || !metaIds.has(source) || !metaIds.has(target)) continue
+      const edgeKey = `${source}->${target}`
+      if (seenInterGroupEdges.has(edgeKey)) continue
+      seenInterGroupEdges.add(edgeKey)
+      interGroupEdges.push({ id: `inter-${edgeKey}`, sources: [source], targets: [target] })
+    }
 
     const metaGraph: ElkGraph = {
       id: 'meta-root',

package/src/components/ui/Badge.tsx

@@ -9,11 +9,31 @@ import type { ReactNode } from 'react'
 export type BadgeSeverity = 'success' | 'warning' | 'alert' | 'error' | 'info' | 'neutral'
 export type BadgeSize = 'sm' | 'default'
 
+// Intent tokens beyond severity/kind. Named by PURPOSE, not hue: two tokens may
+// share a color value today yet stay separate names so a future retune moves
+// exactly the right ones. See DESIGN.md "Badge decision tree".
+//
+// - protocol: transport/scheme tags (HTTP/TCP/UDP/…). Its OWN family because it
+//   is a recurring, meaningful axis and must NOT collide with severity hues
+//   (e.g. a green "HTTPS" must not read as "success").
+// - note:     neutral attention/FYI markers (cross-namespace, wildcard, default,
+//   immutable). Distinct from severity-info — it flags "noteworthy", not a status.
+// - accent1/2/3: LOCAL categorical distinction (rw/ro, spot/on-demand,
+//   control-plane/worker) where the hue carries no cross-screen meaning — just
+//   "tell these sibling options apart". The only place sharing is intended.
+// - structural: ports/paths/hosts/weights/names — neutral data fragments, not a
+//   status. Its own name so it can diverge from severity-neutral later.
+export type BadgeTone = 'note' | 'accent1' | 'accent2' | 'accent3' | 'structural'
+
 interface BadgeProps {
   /** Severity-based coloring (status badges) */
   severity?: BadgeSeverity
   /** K8s resource kind coloring (kind badges) */
   kind?: string
+  /** Transport protocol/scheme tag (http/https/tls/tcp/udp/grpc/h2) */
+  protocol?: string
+  /** Categorical/accent intent tone (see BadgeTone) */
+  tone?: BadgeTone
   /** Explicit color class override (bypasses severity/kind lookup) */
   colorClass?: string
   /** Size variant */
@@ -135,12 +155,49 @@ const KIND: Record<string, string> = {
 
 const DEFAULT_KIND_COLOR = 'bg-fuchsia-50 text-fuchsia-700 border-fuchsia-200 dark:bg-fuchsia-950/40 dark:text-fuchsia-400 dark:border-fuchsia-800/40'
 
+// ---------------------------------------------------------------------------
+// PROTOCOL COLORS — transport/scheme tags. Deliberately avoid severity hues
+// (emerald/amber/orange/red/sky) so a protocol never reads as a status.
+// ---------------------------------------------------------------------------
+const PROTOCOL: Record<string, string> = {
+  http:  'bg-blue-100 text-blue-700 border-blue-300 dark:bg-blue-950/50 dark:text-blue-400 dark:border-blue-700/40',
+  http2: 'bg-blue-100 text-blue-700 border-blue-300 dark:bg-blue-950/50 dark:text-blue-400 dark:border-blue-700/40',
+  h2:    'bg-blue-100 text-blue-700 border-blue-300 dark:bg-blue-950/50 dark:text-blue-400 dark:border-blue-700/40',
+  h2c:   'bg-blue-100 text-blue-700 border-blue-300 dark:bg-blue-950/50 dark:text-blue-400 dark:border-blue-700/40',
+  https: 'bg-teal-100 text-teal-800 border-teal-300 dark:bg-teal-950/50 dark:text-teal-400 dark:border-teal-700/40',
+  tls:   'bg-teal-100 text-teal-800 border-teal-300 dark:bg-teal-950/50 dark:text-teal-400 dark:border-teal-700/40',
+  tcp:   'bg-indigo-100 text-indigo-700 border-indigo-300 dark:bg-indigo-950/50 dark:text-indigo-400 dark:border-indigo-700/40',
+  udp:   'bg-violet-100 text-violet-700 border-violet-300 dark:bg-violet-950/50 dark:text-violet-400 dark:border-violet-700/40',
+  grpc:  'bg-fuchsia-100 text-fuchsia-700 border-fuchsia-300 dark:bg-fuchsia-950/50 dark:text-fuchsia-400 dark:border-fuchsia-700/40',
+  'grpc-web': 'bg-fuchsia-100 text-fuchsia-700 border-fuchsia-300 dark:bg-fuchsia-950/50 dark:text-fuchsia-400 dark:border-fuchsia-700/40',
+}
+const DEFAULT_PROTOCOL_COLOR = 'bg-slate-100 text-slate-700 border-slate-300 dark:bg-slate-950/50 dark:text-slate-400 dark:border-slate-700/40'
+
+// ---------------------------------------------------------------------------
+// TONE COLORS — note / local-categorical accents / structural.
+// ---------------------------------------------------------------------------
+const TONE: Record<BadgeTone, string> = {
+  // attention/FYI — distinct from severity so it doesn't read as warning/info
+  note:       'bg-violet-100 text-violet-700 border-violet-300 dark:bg-violet-950/50 dark:text-violet-400 dark:border-violet-700/40',
+  // three visually-distinct accents for local "tell siblings apart" use
+  accent1:    'bg-blue-100 text-blue-700 border-blue-300 dark:bg-blue-950/50 dark:text-blue-400 dark:border-blue-700/40',
+  accent2:    'bg-fuchsia-100 text-fuchsia-700 border-fuchsia-300 dark:bg-fuchsia-950/50 dark:text-fuchsia-400 dark:border-fuchsia-700/40',
+  accent3:    'bg-teal-100 text-teal-800 border-teal-300 dark:bg-teal-950/50 dark:text-teal-400 dark:border-teal-700/40',
+  // neutral data fragment (ports/paths/hosts/names)
+  structural: 'bg-theme-elevated text-theme-text-secondary border-theme-border',
+}
+
 // Structure classes
 const SIZE_CLASSES: Record<BadgeSize, string> = {
   default: 'badge',
   sm: 'badge-sm',
 }
 
+/** Resolve a protocol/scheme label (case-insensitive) to its color class. */
+export function getProtocolColorClass(protocol: string): string {
+  return PROTOCOL[protocol.toLowerCase().trim()] ?? DEFAULT_PROTOCOL_COLOR
+}
+
 /** Resolve kind color with fuzzy matching for plural/lowercase forms */
 export function getKindColorClass(kind: string): string {
   // Direct match
@@ -185,8 +242,14 @@ export function getSeverityColorClass(severity: BadgeSeverity): string {
  * Badge component — the ONE source of truth for badge rendering.
  * Use severity for status badges, kind for resource type badges, or colorClass for custom.
  */
-export function Badge({ severity, kind, colorClass, size = 'default', className, onClick, title, children }: BadgeProps) {
-  const color = colorClass ?? (severity ? SEVERITY[severity] : kind ? getKindColorClass(kind) : '')
+export function Badge({ severity, kind, protocol, tone, colorClass, size = 'default', className, onClick, title, children }: BadgeProps) {
+  const color =
+    colorClass ??
+    (severity ? SEVERITY[severity]
+      : protocol ? getProtocolColorClass(protocol)
+      : tone ? TONE[tone]
+      : kind ? getKindColorClass(kind)
+      : '')
   const cls = clsx(SIZE_CLASSES[size], color, className)
 
   if (onClick) {
@@ -196,4 +259,4 @@ export function Badge({ severity, kind, colorClass, size = 'default', className,
 }
 
 // Re-export the raw color maps for backwards compat (used by badge-colors.ts consumers)
-export { SEVERITY as BADGE_SEVERITY_COLORS, KIND as BADGE_KIND_COLORS }
+export { SEVERITY as BADGE_SEVERITY_COLORS, KIND as BADGE_KIND_COLORS, PROTOCOL as BADGE_PROTOCOL_COLORS, TONE as BADGE_TONE_COLORS }

package/src/components/ui/ClusterName.tsx

@@ -3,10 +3,18 @@ import { MiddleEllipsis } from './MiddleEllipsis'
 import { Tooltip } from './Tooltip'
 import { parseContextName } from '../../utils/context-name'
 import type { ParsedContextName } from '../../utils/context-name'
-import awsLogo from './provider-logos/aws.png'
-import awsLogoDark from './provider-logos/aws-dark.png'
-import gcpLogo from './provider-logos/gcp.png'
-import azureLogo from './provider-logos/azure.svg'
+import { assetUrl } from '../../utils/asset-url'
+import awsLogoAsset from './provider-logos/aws.png'
+import awsLogoDarkAsset from './provider-logos/aws-dark.png'
+import gcpLogoAsset from './provider-logos/gcp.png'
+import azureLogoAsset from './provider-logos/azure.svg'
+
+// assetUrl normalizes the bundler-specific asset-import type (string under Vite,
+// StaticImageData under webpack/Next) to a URL string usable in `<img src>`.
+const awsLogo = assetUrl(awsLogoAsset)
+const awsLogoDark = assetUrl(awsLogoDarkAsset)
+const gcpLogo = assetUrl(gcpLogoAsset)
+const azureLogo = assetUrl(azureLogoAsset)
 
 // ClusterName renders a kubectl context string with the meaningful
 // cluster identity surfaced as primary text and provider/region pushed

package/src/components/ui/CodeViewer.tsx

@@ -391,7 +391,7 @@ export function CodeViewer({
         style={{ maxHeight }}
       >
         {highlighting ? (
-          <div className="p-4 text-theme-text-tertiary text-sm font-mono">Loading...</div>
+          <div className="p-4 text-theme-text-tertiary text-sm font-mono">Loading…</div>
         ) : (
           <div
             ref={contentRef}

package/src/components/ui/PaneLoader.tsx

@@ -1,4 +1,9 @@
-import radarLoadingIcon from '../../assets/radar/radar-icon-loading.svg'
+import { assetUrl } from '../../utils/asset-url'
+import radarLoadingIconAsset from '../../assets/radar/radar-icon-loading.svg'
+
+// assetUrl normalizes the bundler-specific asset-import type (string under Vite,
+// StaticImageData under webpack/Next) to a URL string usable in `<img src>`.
+const radarLoadingIcon = assetUrl(radarLoadingIconAsset)
 
 // PaneLoader — center-of-pane loading state. Animated radar icon stacked
 // above a label so swapping the label across the loading chain doesn't