fix eth type and db

frontend/src/components/PacketViewer.tsx

@@ -85,17 +85,19 @@ function colorForName(name: string) {
 }
 
 function packetKey(packet: PacketRow) {
-  return String(packet.packet_uid ?? packet.id ?? `${packet.iface ?? 'if'}:${packet.timestamp ?? ''}`);
+  return String(packet.packet_uid ?? packet.id ?? `${packet.ingress_if ?? 'if'}:${packet.timestamp ?? ''}`);
 }
 
-function parseIfaces(ifaceField?: string | string[] | null, observedIfaces?: string[] | null) {
-  if (Array.isArray(observedIfaces) && observedIfaces.length > 0) return observedIfaces;
-  if (!ifaceField) return [];
-  if (Array.isArray(ifaceField)) return ifaceField;
-  return String(ifaceField)
-    .split(/[,\|;]+/)
-    .map((s) => s.trim())
-    .filter(Boolean);
+function formatEthType(packet: PacketRow) {
+  if (packet.eth_type) return String(packet.eth_type);
+  if (typeof packet.eth_type_raw === 'number') return `0x${packet.eth_type_raw.toString(16)}`;
+  return '-';
+}
+
+function formatIpProto(packet: PacketRow) {
+  if (packet.ip_proto) return String(packet.ip_proto);
+  if (typeof packet.ip_proto_raw === 'number') return String(packet.ip_proto_raw);
+  return '-';
 }
 
 /** Format timestamp to European locale with ms */
@@ -206,7 +208,7 @@ export default function PacketViewer(): ReactElement {
           } else {
             pushNew(data.packets as PacketRow[]);
           }
-        } else if (data && (data.iface || data.raw_b64 || data.id || data.timestamp)) {
+        } else if (data && (data.packet_uid || data.raw_b64 || data.id || data.timestamp)) {
           if (paused) {
             queuedDuringPause.current.unshift(data as PacketRow);
           } else {
@@ -300,37 +302,32 @@ export default function PacketViewer(): ReactElement {
         width: 120,
         render: (val: any) => <Text>{formatTimestamp(val)}</Text>,
       },
-      {
-        title: 'Ifaces',
-        dataIndex: 'iface',
-        key: 'iface',
-        width: 100,
-        render: (_: any, rec: PacketRow) => {
-          const ifaces = parseIfaces(rec.iface, rec.observed_ifaces);
-          if (ifaces.length === 0) return <Text type="secondary">-</Text>;
-          return (
-            <Space wrap size={[6, 6]}>
-              {ifaces.map((name) => {
-                const { background, color } = colorForName(name);
-                // tag style: use background and computed text color for accessibility
-                return (
-                  <Tooltip key={name} title={name}>
-                    <Tag style={{ background, color, fontWeight: 600, borderRadius: 6, fontSize: 15 }}>{name}</Tag>
-                  </Tooltip>
-                );
-              })}
-            </Space>
-          );
-        },
-      },
       {
         title: 'Path',
         key: 'path',
         width: 150,
         render: (_: any, rec: PacketRow) => (
-          <Space direction="vertical" size={0}>
-            <Text>{rec.ingress_if ?? '-'}</Text>
-            <Text type="secondary">{rec.egress_if ?? '-'}</Text>
+          <Space wrap size={[6, 6]}>
+            {[rec.ingress_if, rec.egress_if].filter(Boolean).length > 0 ? (
+              <>
+                {rec.ingress_if && (
+                  <Tooltip title={`ingress: ${rec.ingress_if}`}>
+                    <Tag style={{ ...colorForName(rec.ingress_if), fontWeight: 600, borderRadius: 6, fontSize: 15 }}>
+                      {rec.ingress_if}
+                    </Tag>
+                  </Tooltip>
+                )}
+                {rec.egress_if && (
+                  <Tooltip title={`egress: ${rec.egress_if}`}>
+                    <Tag style={{ ...colorForName(rec.egress_if), fontWeight: 600, borderRadius: 6, fontSize: 15 }}>
+                      {rec.egress_if}
+                    </Tag>
+                  </Tooltip>
+                )}
+              </>
+            ) : (
+              <Text type="secondary">-</Text>
+            )}
           </Space>
         ),
       },
@@ -366,12 +363,18 @@ export default function PacketViewer(): ReactElement {
           </div>
         ),
       },
+      {
+        title: 'L2',
+        key: 'eth_type',
+        width: 100,
+        render: (_: any, rec: PacketRow) => <Text>{formatEthType(rec)}</Text>,
+      },
       {
         title: 'Protocol',
         dataIndex: 'ip_proto',
         key: 'ip_proto',
         width: 110,
-        render: (v: any) => <Text>{v ?? '-'}</Text>,
+        render: (_: any, rec: PacketRow) => <Text>{formatIpProto(rec)}</Text>,
       },
       {
         title: 'App',