Update L4 to L7 & PCAP Viewer page with flow/conn/L7 hierarchy

[alongir]

Description

The "L4 to L7 & PCAP Viewer" page (src/pages/en/v2/l4_to_l7.md, last updated 2026-02-05) needs to be updated to reflect the current three-level hierarchy between L4 flows, L4 connections, and L7 objects, along with PCAP viewing and download capabilities.

Current State of the Page

The page currently explains a two-level relationship: L4 connections map to L7 API calls, with PCAP viewing at the connection level. It does not reflect the three-level hierarchy that now exists in the product.

What Changed

A pivotal rename occurred in the hub (hub commit ef7b245): what was previously called "flow" became "conn" (connection), and what was "full_flow" became "flow." This established the current three-level hierarchy:

L4 Flow (top level — aggregate stream between two peers)
  │
  ├── L4 Connection(s) (individual TCP/UDP connections within the flow)
  │     │
  │     ├── L7 Entry/API Call(s) (dissected application-layer transactions)
  │     │
  │     └── PCAP data (raw packets, viewable + downloadable)
  │
  └── Flow-level statistics (bytes, packets, PPS, BPS)

What the Page Should Cover

1. The three-level hierarchy — clearly explain how flows, connections, and L7 entries relate:

   • L4 Flow (tcp-flow / udp-flow): A bidirectional L4 communication stream between two peers. Contains flow_id, flow-level statistics (bytes, packets, PPS, BPS), and a derivedEntries array pointing to child connections and L7 entries.
   • L4 Connection (tcp-conn / udp-conn): An individual TCP connection or UDP "connection" within a flow. Identified by conn_id. Contains per-connection PCAP data and connection-level stats (state, local/remote pkts/bytes).
   • L7 Entry: A fully dissected application-layer transaction (HTTP, gRPC, Kafka, DNS, etc.). Mapped to exactly one connection (via conn_id) and one flow (via flow_id).

2. Navigation between levels — how clicking on an L4 flow expands to show its connections and L7 entries; how clicking on an L7 entry shows its parent flow and connection. The FocusedFlowBar component displays three status chips (flow state, connection count, L7 entry count).

3. PCAP capabilities:

   • PCAP data is attached at the L4 Connection level
   • Built-in PCAP Viewer (HexViewer): frame-by-frame navigation, hex + ASCII view, search
   • PCAP Download: download connection PCAP files for analysis in Wireshark or other tools
   • Available via the PcapButton on L4 Flow and L4 Connection entries

4. Two complementary L4 systems (clarify the distinction):

   • L4 Flows (eBPF/flowtracer): Lightweight, real-time socket-level flow tracking via eBPF. No packet capture required. Provides TCP handshake RTT percentiles (P50/P90/P99). Negligible overhead.
   • L4 Connections (packet-level): Part of the dissection pipeline. Each connection holds raw PCAP data. These are the connections within the three-level hierarchy.

5. KFL filters for navigating the hierarchy:

   • conn && flow_id == <id> — find all connections in a flow
   • !flow && !conn && flow_id == <id> — find all L7 entries in a flow
   • tcp_flow, udp_flow, tcp_conn, udp_conn — protocol-specific filters
   • has_pcap — entries with associated PCAP data

Why Is This Needed

The page is 5 weeks behind the current product. Users encountering the three-level hierarchy in the UI have no documentation explaining the relationship between flows, connections, and L7 entries. The PCAP download capability and the distinction between eBPF flows and packet-level connections are also not clearly documented.