X-Ray — explorer

The whole flow in one screen: the topology view shows adjacency + a live prefix trace; click any node and its inside-the-router detail (Routing / BGP / Best-Path + the figure) opens on the right — exactly what a containerlab / vscode-containerlab "Node Properties" tab would show. Drag nodes to rearrange; break a link and watch the path re-route.

Scenario Theme

Topology view — adjacency & forwarding trace

Inside — — click a node to open

Two drop-in modules, composed by the host in a few lines:

XrayTopoOverlay.render(graphEl, {states,positions}, { onSelect: n => XrayNodePanel.render(detailEl, states[n], {figure:true, positions}) })

.
The overlay fires onSelect(name,state) on click; the panel draws that node's control plane. Same clab-collect.js states feed both. Colours are CSS variables on .xto-root / .xnp-root.