Design: Protocol dissection and topology inference system

[Copilot]

• Phase 1: Core Infrastructure - DPI Service Foundation

  • Create DPIService.py with basic structure
  • Implement layer dissectors (L2, L3, L4, L7)
  • Add VLAN (802.1Q) support with validation
  • Create data models (DissectedPacket, VLANInfo, LLDPNeighbor, etc.)
  • Add 41 unit/E2E tests
  • Thread-safe implementation with RLock
  • Size limits to prevent unbounded memory growth

• Phase 2: L2 Discovery

  • LLDP/CDP neighbor discovery
  • VLAN membership tracking
  • STP BPDU parsing
  • Device classification (switch/router/host)

• Phase 3: Multicast & Topology

  • Multicast group tracking (IGMP, mDNS, SSDP)
  • Bus vs. star topology detection
  • Enhanced topology summary

• Phase 4: API Endpoints

  • Create protocol_analysis.py REST endpoints
  • Topology endpoints (LLDP, CDP, VLAN, multicast)
  • Protocol capabilities endpoint

• Phase 5: Frontend Integration

  • Create protocolAnalysisService.ts for API access
  • Create DPITopologyPanel.tsx component
  • Create DPIProtocolStats.tsx component
  • Integrate DPI panel into Topology page
  • Integrate DPI stats bar into Traffic page
  • Add DPI view mode selector (STD/VLAN/MCAST/TYPE)
  • Industry-standard protocol color palette
  • Device-type specific node shapes (router/switch/host)
  • Enhanced legend with SVG device icons
  • Best practices research documentation
  • Cyberpunk theme compliance (neon colors, glow effects, monospace fonts)

• Phase 6: Fingerprinting (future)

• Phase 7: Testing & Optimization (future)

Research-Based Improvements

Based on analysis of industry tools (ntopng, Wireshark, SolarWinds, Cisco Prime, EtherApe):

Protocol Color Palette (Industry Standard)

Layer	Color Family	Examples
L2 (Data Link)	Blues	ARP, LLDP, CDP, STP
L3 (Network)	Greens	IP, ICMP, IGMP
L4 (Transport)	Oranges	TCP, UDP
Application	Purples	HTTP, HTTPS, DNS, SSH
Industrial	Teals	Modbus, BACnet, DNP3
Multicast	Magentas	IGMP, SSDP, mDNS

Device Type Visualization

Device	Shape	Color
Router	Circle with crosshairs	Gold (#FFD700)
Switch	Rounded rectangle with ports	Purple (#8B5CF6)
Host	Circle	Cyan (#00F0FF)

Cyberpunk Theme Integration

Element	Color	Hex
Primary accent	cyber-red	#ff0040
Secondary accent	cyber-purple	#8b5cf6
Success/Active	cyber-green	#00ff88
Info	cyber-blue	#00d4ff
Warning	cyber-yellow	#ffff00

• Neon glow effects (text-shadow, box-shadow)
• Monospace font styling (JetBrains Mono)
• Uppercase tracking on labels
• Dark backgrounds with colored borders
• SVG filter glow on device icons

Documentation

• .project/protocol-dissection/DPI_VISUALIZATION_BEST_PRACTICES.md
• Covers: layouts, colors, icons, interactions, performance

Test Coverage

41 passed, 3 skipped (LLDP/IGMP layers not available in test environment)

Original prompt

we need to implement protocol dissection and analysis in traffic and in topology so we can use it to understand what is actuallz being sent and spoken while traffic is captured, we need this so we can use it to understand proprietary protocols so that we can have better picture over network functionality and structure ( example we have a network with multicast and what we see in topology is multicast ip as star center but that network actuallz uses multicast for bus to talk to nodes, or when we sniff traffic we should understand what packet fields mean also ) so please propose solution based on research on web versus industry and community protocols dissection and interpretation and propose optimal solution we can use to precisely and effectively represent networks we run NOP on, note that we can also have layer2 traffic that can help us understand so please be detailed and research everything and propose a design

Custom agent used: AKIS
Workflow enforcement agent with 8-gate quality control, skill-based execution, and knowledge graph integration. Orchestrates all other agents.

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

[goranjovic55]

@copilot can we implement phase 2 also and create realistic host based e2e tests so we confirm both traffic capture and topology works as intended with DPI

[Copilot]

@copilot can we implement phase 2 also and create realistic host based e2e tests so we confirm both traffic capture and topology works as intended with DPI

Implemented Phase 1-2 in commit a0b706d:

DPIService (backend/app/services/DPIService.py):

• Layer-by-layer dissection (L2-L7)
• VLAN (802.1Q) detection with validation
• LLDP/CDP neighbor discovery
• STP BPDU parsing
• Multicast group tracking (IGMP, mDNS, SSDP)
• 50+ L7 protocol classification (including Modbus, BACnet)
• Device classification (switch/router/host)
• Thread-safe with size limits

E2E Tests (backend/tests/test_dpi_service.py):

• 41 tests covering realistic host-based scenarios
• Web browsing, enterprise VLAN, industrial SCADA, IoT discovery
• All tests pass: 41 passed, 3 skipped

API Endpoints (/api/v1/protocol-analysis/*):

• /topology/summary, /topology/vlans, /topology/lldp, /topology/multicast

[goranjovic55]

@copilot we should implement alos dpi usage in traffic page and in topology page

[goranjovic55]

@copilot continue

[Copilot]

@copilot continue

Implemented DPI integration in commit 48e5e2b:

Topology page:

• Added collapsible DPI panel (◇DPI toggle button)
• Shows VLAN topology, multicast groups, LLDP/CDP neighbors
• Device classification (switch/router/host)
• STP root bridge indicator

Traffic page:

• Added DPI stats bar in toolbar
• Shows VLAN count, multicast groups, neighbor count
• Device classification summary

New components:

• DPITopologyPanel.tsx - Full DPI panel with tabs
• DPIProtocolStats.tsx - Compact stats bar
• protocolAnalysisService.ts - API service

[goranjovic55]

@copilot we shoul adjust topology view based on dpi ( we should be able to switch views so we can get best graphical representation )

[goranjovic55]

@copilot please make icons and node shapes and areas compliant with our cyberpunk colour theme including fonts and highlights etc

[Copilot]

@copilot please make icons and node shapes and areas compliant with our cyberpunk colour theme including fonts and highlights etc

Applied cyberpunk theme compliance in commit 99d7c7f:

Colors:

• cyber-red (#ff0040) for primary accents/badges
• cyber-purple (#8b5cf6) for switches
• cyber-green (#00ff88) for hosts/active
• cyber-blue (#00d4ff) for VLANs/info
• cyber-yellow (#ffff00) for routers/warnings

Glow Effects:

• Text shadow on numbers and labels
• SVG filters for device icons (router, switch, host)
• Box shadow on buttons and panels

Typography:

• JetBrains Mono monospace font
• Uppercase with tracking-wider for labels
• Bold numbers with neon glow

Updated Components:

• DPI view mode selector (STD/VLAN/MCAST/TYPE)
• DPI legend with glowing SVG icons
• DPITopologyPanel with full cyberpunk styling
• DPIProtocolStats bar with neon badge
• Node shapes with glow effects in device-type view