..標題：TCPDump 視覺化工具
.. slug：tcpdump-視覺化工具
..日期：2026-01-14 15:00:00 世界標準時間
..標籤：網路、tcpdump、資料包、視覺化、工具
..類別：乙太網路和IP工具
..連結：
.. 描述：透過梯形圖、流程表和網路流量分析視覺化 tcpdump 封包捕獲
..類型：文字
<style>
    .tcpdump-visualizer-container {
        max-width: 1400px;
        margin: 20px auto;
        padding: 20px;
    }

    .tool-header {
        margin-bottom: 30px;
        padding: 25px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-radius: 12px;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        color: white;
    }

    .tool-header h2 {
        margin-top: 0;
        color: white;
        font-size: 28px;
        margin-bottom: 10px;
    }

    .tool-header p {
        margin: 10px 0;
        opacity: 0.95;
        font-size: 15px;
    }

    .section {
        background: white;
        border-radius: 8px;
        padding: 25px;
        margin-bottom: 20px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        border: 1px solid #e0e0e0;
    }

    .section-title {
        font-size: 18px;
        margin-bottom: 15px;
        color: #333;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 15px 20px;
        background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
        color: white;
        border-radius: 8px;
        margin: -25px -25px 20px -25px;
    }

    .input-area {
        margin-bottom: 20px;
    }

    label {
        display: block;
        font-weight: 600;
        margin-bottom: 8px;
        color: #333;
    }

    textarea {
        width: 100%;
        min-height: 200px;
        padding: 12px;
        border: 2px solid #e0e0e0;
        border-radius: 6px;
        font-family: 'Courier New', monospace;
        font-size: 13px;
        resize: vertical;
        transition: border-color 0.2s;
        background: #f9f9f9;
    }

    textarea:focus {
        outline: none;
        border-color: #667eea;
        background: white;
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    }

    .controls {
        display: flex;
        gap: 15px;
        flex-wrap: wrap;
        align-items: center;
        margin-bottom: 20px;
    }

    .control-group {
        display: flex;
        flex-direction: column;
        gap: 5px;
    }

    .control-group label {
        font-size: 0.9em;
        margin-bottom: 0;
    }

    select, input[type="text"] {
        padding: 10px 15px;
        border: 2px solid #e0e0e0;
        border-radius: 6px;
        font-size: 14px;
        background: white;
        transition: border-color 0.2s;
    }

    select:focus, input[type="text"]:focus {
        outline: none;
        border-color: #667eea;
    }

    .btn {
        padding: 10px 20px;
        border: none;
        border-radius: 6px;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }

    .btn-primary {
        background: #4CAF50;
        color: white;
    }

    .btn-primary:hover {
        background: #45a049;
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    }

    .btn-secondary {
        background: #f44336;
        color: white;
    }

    .btn-secondary:hover {
        background: #da190b;
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    }

    .btn-success {
        background: #4CAF50;
        color: white;
    }

    .btn-success:hover {
        background: #45a049;
    }

    .visualization-container {
        background: #fafafa;
        border: 2px solid #e0e0e0;
        border-radius: 8px;
        padding: 20px;
        min-height: 400px;
        position: relative;
        overflow: hidden;
    }

    #canvas-container {
        overflow: auto;
        max-height: 800px;
        position: relative;
    }

    #ladder-canvas {
        border: 1px solid #e0e0e0;
        background: white;
        cursor: grab;
    }

    #ladder-canvas:active {
        cursor: grabbing;
    }

    .stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 15px;
        margin-top: 15px;
    }

    .stat-card {
        background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
        padding: 15px;
        border-radius: 6px;
        border-left: 4px solid #667eea;
    }

    .stat-card h4 {
        color: #666;
        font-size: 0.9em;
        margin-bottom: 5px;
    }

    .stat-card .value {
        font-size: 1.8em;
        font-weight: 700;
        color: #667eea;
    }

    table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 15px;
    }

    th, td {
        padding: 12px;
        text-align: left;
        border-bottom: 1px solid #e0e0e0;
    }

    th {
        background: #f8fafc;
        font-weight: 600;
        color: #333;
        cursor: pointer;
        user-select: none;
    }

    th:hover {
        background: #e2e8f0;
    }

    th.sortable::after {
        content: ' ↕';
        opacity: 0.3;
    }

    th.sorted-asc::after {
        content: ' ↑';
        opacity: 1;
    }

    th.sorted-desc::after {
        content: ' ↓';
        opacity: 1;
    }

    tr:hover {
        background: #f8fafc;
    }

    .flow-row {
        cursor: pointer;
    }

    .flow-row.selected {
        background: #dbeafe !important;
    }

    .protocol-badge {
        display: inline-block;
        padding: 3px 8px;
        border-radius: 4px;
        font-size: 0.85em;
        font-weight: 600;
    }

    .protocol-tcp {
        background: #dbeafe;
        color: #1e40af;
    }

    .protocol-udp {
        background: #fef3c7;
        color: #92400e;
    }

    .protocol-icmp {
        background: #fee2e2;
        color: #991b1b;
    }

    .protocol-other {
        background: #f3f4f6;
        color: #374151;
    }

    .help-section {
        background: #fffbeb;
        border-left: 4px solid #f59e0b;
        padding: 15px;
        margin-top: 15px;
        border-radius: 4px;
    }

    .help-section h4 {
        color: #92400e;
        margin-bottom: 10px;
    }

    .help-section code {
        background: white;
        padding: 2px 6px;
        border-radius: 3px;
        font-family: 'Courier New', monospace;
        font-size: 0.9em;
        border: 1px solid #fde68a;
    }

    .help-section ul {
        margin-left: 20px;
        margin-top: 10px;
    }

    .help-section li {
        margin-bottom: 5px;
    }

    .status-message {
        padding: 12px 15px;
        border-radius: 6px;
        margin-bottom: 15px;
        display: none;
    }

    .status-message.info {
        background: #dbeafe;
        color: #1e40af;
        border-left: 4px solid #2563eb;
    }

    .status-message.error {
        background: #fee2e2;
        color: #991b1b;
        border-left: 4px solid #ef4444;
    }

    .status-message.success {
        background: #d1fae5;
        color: #065f46;
        border-left: 4px solid #10b981;
    }

    .tooltip {
        position: absolute;
        background: rgba(0, 0, 0, 0.9);
        color: white;
        padding: 10px 15px;
        border-radius: 6px;
        font-size: 13px;
        pointer-events: none;
        z-index: 1000;
        max-width: 400px;
        box-shadow: 0 4px 8px rgba(0,0,0,0.3);
        display: none;
    }

    .tooltip-header {
        font-weight: 600;
        margin-bottom: 5px;
        padding-bottom: 5px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    }

    .tooltip-body {
        font-size: 12px;
        line-height: 1.4;
    }

    .timeline-svg {
        width: 100%;
        height: 200px;
        border: 1px solid #e0e0e0;
        background: white;
    }

    .pagination {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
        margin-top: 20px;
    }

    .pagination button {
        padding: 8px 15px;
    }

    .pagination span {
        font-weight: 600;
        color: #666;
    }

    .zoom-controls {
        position: absolute;
        top: 10px;
        right: 10px;
        display: flex;
        gap: 5px;
        background: white;
        padding: 5px;
        border-radius: 6px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        border: 1px solid #e0e0e0;
    }

    .zoom-controls button {
        padding: 5px 10px;
        font-size: 12px;
    }

    .filter-section {
        display: flex;
        gap: 15px;
        flex-wrap: wrap;
        margin-bottom: 15px;
        padding: 15px;
        background: #f8fafc;
        border-radius: 6px;
    }

    .legend {
        display: flex;
        gap: 20px;
        flex-wrap: wrap;
        margin-top: 15px;
        padding: 15px;
        background: #f8fafc;
        border-radius: 6px;
    }

    .legend-item {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .legend-color {
        width: 20px;
        height: 20px;
        border-radius: 3px;
        border: 1px solid #e0e0e0;
    }

    @media (max-width: 768px) {
        .controls {
            flex-direction: column;
            align-items: stretch;
        }

        .stats-grid {
            grid-template-columns: 1fr;
        }

        .tool-header h2 {
            font-size: 1.5em;
        }
    }

    .loading {
        display: none;
        text-align: center;
        padding: 20px;
        color: #666;
    }

    .loading::after {
        content: '...';
        animation: dots 1.5s infinite;
    }

    @keyframes dots {
        0%, 20% { content: '.'; }
        40% { content: '..'; }
        60%, 100% { content: '...'; }
    }

    .empty-state {
        text-align: center;
        padding: 60px 20px;
        color: #666;
    }

    .empty-state svg {
        width: 100px;
        height: 100px;
        margin-bottom: 20px;
        opacity: 0.3;
    }

    .sunburst-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 20px;
    }

    .sunburst-controls {
        display: flex;
        gap: 10px;
        margin-bottom: 20px;
        align-items: center;
    }

    .metric-btn {
        padding: 8px 16px;
        border: 2px solid #e0e0e0;
        background: white;
        border-radius: 4px;
        cursor: pointer;
        transition: all 0.3s;
        font-size: 14px;
        font-weight: 600;
    }

    .metric-btn.active {
        background: #4CAF50;
        color: white;
        border-color: #4CAF50;
    }

    .metric-btn:hover:not(.active) {
        background: #f0f0f0;
        border-color: #4CAF50;
    }

    .sunburst-svg {
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        background: white;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }

    .sunburst-tooltip {
        position: absolute;
        background: rgba(0, 0, 0, 0.85);
        color: white;
        padding: 10px;
        border-radius: 4px;
        font-size: 12px;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.2s;
        z-index: 2000;
        max-width: 300px;
    }

    .sunburst-arc {
        stroke: #fff;
        stroke-width: 1px;
        cursor: pointer;
        transition: opacity 0.2s;
    }

    .sunburst-arc:hover {
        opacity: 0.8;
    }

    .sunburst-center-text {
        font-size: 14px;
        font-weight: bold;
        text-anchor: middle;
        pointer-events: none;
        fill: #333;
    }

    .sunburst-center-label {
        font-size: 12px;
        text-anchor: middle;
        pointer-events: none;
        fill: #666;
    }

    .sunburst-legend {
        margin-top: 20px;
        display: flex;
        gap: 20px;
        flex-wrap: wrap;
        justify-content: center;
        padding: 15px;
        background: #f8fafc;
        border-radius: 6px;
    }
</style>
<script src="https://d3js.org/d3.v7.min.js"></script>
<div class="tcpdump-visualizer-container">
<div class="tool-header">
<h2>tcpdump 視覺化工具</h2>
<p>用於 tcpdump 輸出的高階網路流量分析和視覺化工具</p>
</div>
<div class="section">
<h2 class="section-title">輸入資料</h2>
<div class="status-message" id="status-message"></div>
<div class="input-area">
<label for="tcpdump-input">將 tcpdump 輸出貼到下面：</label>
<textarea id="tcpdump-input" placeholder="Paste your tcpdump output here...

Example:
14:23:45.123456 IP 192.168.1.100.51234 &gt; 93.184.216.34.80: Flags [S], seq 123456789, win 65535, length 0
14:23:45.234567 IP 93.184.216.34.80 &gt; 192.168.1.100.51234: Flags [S.], seq 987654321, ack 123456790, win 65535, length 0
14:23:45.345678 IP 192.168.1.100.51234 &gt; 93.184.216.34.80: Flags [.], ack 1, win 65535, length 0"></textarea>
</div>
<div class="controls">
<button class="btn btn-primary" id="parse-btn" onclick="parseAndVisualize()">
<span>🔍</span>解析與視覺化</button>
<button class="btn btn-success" id="sample-btn" onclick="loadSampleData()">
<span>📋</span>載入樣本數據</button>
<button class="btn btn-secondary" id="clear-btn" onclick="clearAll()">
<span>🗑️</span>全部清除</button>
</div>
<div class="help-section">
<h4>快速入門指南</h4>
<ul>
<li><strong>將 pcap 轉換為文字：</strong> <code>tcpdump -r capture.pcap</code></li>
<li><strong>捕捉細節：</strong> <code>sudo tcpdump -i eth0 -v</code></li>
<li><strong>帶時間戳：</strong> <code>sudo tcpdump -i eth0 -tttt</code></li>
<li><strong>寫入檔案：</strong> <code>sudo tcpdump -i eth0 -w capture.pcap</code></li>
<li>支援具有各種時間戳樣式的標準、-v 和 -vv 格式</li>
</ul>
</div>
</div>
<div class="section" id="visualization-section" style="display: none;">
<h2 class="section-title">視覺化</h2>
<div class="controls">
<div class="control-group">
<label for="viz-type">可視化類型：</label>
<select id="viz-type" onchange="switchVisualization()">
<option value="ladder">梯形圖</option>
<option value="flow-table">流量表</option>
<option value="statistics">統計數據</option>
<option value="timeline">時間軸視圖</option>
<option value="sunburst">旭日圖</option>
</select>
</div>
<div class="control-group" id="filter-control">
<label for="flow-filter">按流量過濾：</label>
<select id="flow-filter" onchange="applyFilter()">
<option value="">所有流程</option>
</select>
</div>
<div class="control-group" id="protocol-filter-control">
<label for="protocol-filter">按協議過濾：</label>
<select id="protocol-filter" onchange="applyFilter()">
<option value="">所有協議</option>
<option value="TCP">傳輸控制協定</option>
<option value="UDP">UDP協定</option>
<option value="ICMP">ICMP</option>
</select>
</div>
</div>
<div class="sunburst-controls" style="display: none;">
<label>尺寸依據：</label>
<button class="metric-btn active" data-metric="packets" onclick="switchSunburstMetric('packets')">資料包計數</button>
<button class="metric-btn" data-metric="bytes" onclick="switchSunburstMetric('bytes')">位元組</button>
</div>
<div class="visualization-container" id="viz-container">
<div class="loading" id="loading">渲染視覺化</div>
<div class="empty-state" id="empty-state">
<svg fill="none" stroke="currentColor" viewbox="0 0 24 24">
<path d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
</svg>
<p>尚無可可視化的數據。解析 tcpdump 輸出以開始。</p>
</div>
</div>
<div class="pagination" id="pagination" style="display: none;">
<button class="btn btn-secondary" onclick="previousPage()">← 上一頁</button>
<span id="page-info">第 1 頁，共 1 頁</span>
<button class="btn btn-secondary" onclick="nextPage()">下一頁 →</button>
</div>
</div>
<div class="tooltip" id="tooltip">
<div class="tooltip-header" id="tooltip-header"></div>
<div class="tooltip-body" id="tooltip-body"></div>
</div>
</div>
<script>
    'use strict';

    // Global state management
    const state = {
        packets: [],
        flows: [],
        statistics: {},
        currentView: 'ladder',
        currentFilter: { flow: '', protocol: '' },
        currentPage: 1,
        itemsPerPage: 50,
        zoom: 1,
        panOffset: { x: 0, y: 0 },
        isDragging: false,
        dragStart: { x: 0, y: 0 },
        sunburstRenderer: null
    };

    // Packet parser with support for multiple tcpdump formats
    class TcpdumpParser {
        constructor() {
            // Comprehensive regex patterns for different tcpdump formats
            this.patterns = {
                // Standard format: timestamp IP src > dst: flags...
                standard: /^(\d{2}:\d{2}:\d{2}\.\d+)\s+IP\s+([^\s]+)\s+>\s+([^\s:]+)(?::|\s)(.*)$/,
                // With date: 2024-01-14 timestamp
                withDate: /^(\d{4}-\d{2}-\d{2}\s+\d{2}:\d{2}:\d{2}\.\d+)\s+IP\s+([^\s]+)\s+>\s+([^\s:]+)(?::|\s)(.*)$/,
                // Epoch timestamp
                epoch: /^(\d{10}\.\d+)\s+IP\s+([^\s]+)\s+>\s+([^\s:]+)(?::|\s)(.*)$/,
                // TCP flags pattern
                flags: /Flags\s+\[([^\]]+)\]/,
                // Sequence numbers
                seq: /seq\s+(\d+)/,
                ack: /ack\s+(\d+)/,
                // Window size
                win: /win\s+(\d+)/,
                // Length
                length: /length\s+(\d+)/,
                // Protocol
                protocol: /IP6?|TCP|UDP|ICMP/
            };
        }

        parse(text) {
            const lines = text.split('\n').filter(line => line.trim().length > 0);
            const packets = [];
            let lineNumber = 0;

            for (const line of lines) {
                lineNumber++;
                try {
                    const packet = this.parseLine(line, lineNumber);
                    if (packet) {
                        packets.push(packet);
                    }
                } catch (error) {
                    console.warn(`Failed to parse line ${lineNumber}: ${line}`, error);
                }
            }

            return packets;
        }

        parseLine(line, lineNumber) {
            // Try different timestamp formats
            let match = line.match(this.patterns.standard) ||
                       line.match(this.patterns.withDate) ||
                       line.match(this.patterns.epoch);

            if (!match) {
                return null;
            }

            const [, timestamp, source, destination, details] = match;

            // Parse source and destination (handle IP:port format)
            const srcParts = this.parseAddress(source);
            const dstParts = this.parseAddress(destination);

            // Determine protocol
            const protocol = this.detectProtocol(line, details);

            // Parse TCP flags if present
            const flagsMatch = details.match(this.patterns.flags);
            const flags = flagsMatch ? this.parseFlags(flagsMatch[1]) : [];

            // Parse sequence and acknowledgment numbers
            const seqMatch = details.match(this.patterns.seq);
            const ackMatch = details.match(this.patterns.ack);
            const winMatch = details.match(this.patterns.win);
            const lengthMatch = details.match(this.patterns.length);

            return {
                lineNumber,
                timestamp: this.normalizeTimestamp(timestamp),
                rawTimestamp: timestamp,
                protocol,
                srcIp: srcParts.ip,
                srcPort: srcParts.port,
                dstIp: dstParts.ip,
                dstPort: dstParts.port,
                flags,
                seq: seqMatch ? parseInt(seqMatch[1]) : null,
                ack: ackMatch ? parseInt(ackMatch[1]) : null,
                win: winMatch ? parseInt(winMatch[1]) : null,
                length: lengthMatch ? parseInt(lengthMatch[1]) : 0,
                raw: line,
                details
            };
        }

        parseAddress(addr) {
            // Handle IPv4:port, IPv6.port, or just IP
            const parts = addr.match(/^(.+?)\.(\d+)$/) || addr.match(/^(.+):(\d+)$/);
            if (parts) {
                return { ip: parts[1], port: parseInt(parts[2]) };
            }
            return { ip: addr, port: null };
        }

        detectProtocol(line, details) {
            if (line.includes('IP6')) return 'IPv6';
            if (details.includes('Flags [') || details.includes('tcp')) return 'TCP';
            if (details.includes('UDP') || details.includes('udp')) return 'UDP';
            if (details.includes('ICMP') || details.includes('icmp')) return 'ICMP';
            return 'IP';
        }

        parseFlags(flagStr) {
            const flagMap = {
                'S': 'SYN',
                'F': 'FIN',
                'R': 'RST',
                'P': 'PSH',
                '.': 'ACK'
            };

            return flagStr.split('').map(f => flagMap[f] || f).filter(f => f !== 'ACK' || flagStr === '.');
        }

        normalizeTimestamp(ts) {
            // Convert various timestamp formats to milliseconds
            if (ts.match(/^\d{10}\.\d+$/)) {
                // Epoch timestamp
                return parseFloat(ts) * 1000;
            }

            // For HH:MM:SS.microseconds, create a pseudo-timestamp
            const timeMatch = ts.match(/(\d{2}):(\d{2}):(\d{2})\.(\d+)/);
            if (timeMatch) {
                const [, h, m, s, us] = timeMatch;
                return (parseInt(h) * 3600 + parseInt(m) * 60 + parseInt(s)) * 1000 + parseInt(us) / 1000;
            }

            // For full date format
            const date = new Date(ts);
            return isNaN(date.getTime()) ? Date.now() : date.getTime();
        }
    }

    // Flow analyzer - groups packets into conversations
    class FlowAnalyzer {
        constructor(packets) {
            this.packets = packets;
            this.flows = new Map();
        }

        analyze() {
            for (const packet of this.packets) {
                const flowKey = this.getFlowKey(packet);

                if (!this.flows.has(flowKey)) {
                    this.flows.set(flowKey, {
                        key: flowKey,
                        srcIp: packet.srcIp,
                        srcPort: packet.srcPort,
                        dstIp: packet.dstIp,
                        dstPort: packet.dstPort,
                        protocol: packet.protocol,
                        packets: [],
                        packetCount: 0,
                        totalBytes: 0,
                        startTime: packet.timestamp,
                        endTime: packet.timestamp,
                        states: new Set()
                    });
                }

                const flow = this.flows.get(flowKey);
                flow.packets.push(packet);
                flow.packetCount++;
                flow.totalBytes += packet.length || 0;
                flow.endTime = packet.timestamp;

                // Track TCP states
                if (packet.flags) {
                    packet.flags.forEach(flag => flow.states.add(flag));
                }
            }

            return Array.from(this.flows.values());
        }

        getFlowKey(packet) {
            // Create bidirectional flow key
            const addr1 = `${packet.srcIp}:${packet.srcPort || ''}`;
            const addr2 = `${packet.dstIp}:${packet.dstPort || ''}`;
            return addr1 < addr2 ? `${addr1}<->${addr2}` : `${addr2}<->${addr1}`;
        }
    }

    // Statistics calculator
    class StatisticsCalculator {
        constructor(packets, flows) {
            this.packets = packets;
            this.flows = flows;
        }

        calculate() {
            const stats = {
                totalPackets: this.packets.length,
                totalFlows: this.flows.length,
                totalBytes: 0,
                protocols: {},
                tcpStates: {},
                averagePacketSize: 0,
                duration: 0,
                packetsPerSecond: 0,
                retransmissions: 0,
                uniqueHosts: new Set()
            };

            // Calculate protocol distribution and other metrics
            for (const packet of this.packets) {
                stats.totalBytes += packet.length || 0;
                stats.protocols[packet.protocol] = (stats.protocols[packet.protocol] || 0) + 1;
                stats.uniqueHosts.add(packet.srcIp);
                stats.uniqueHosts.add(packet.dstIp);

                // Count TCP states
                if (packet.flags) {
                    packet.flags.forEach(flag => {
                        stats.tcpStates[flag] = (stats.tcpStates[flag] || 0) + 1;
                    });
                }
            }

            // Calculate derived metrics
            stats.averagePacketSize = stats.totalBytes / stats.totalPackets || 0;

            if (this.packets.length > 1) {
                const startTime = this.packets[0].timestamp;
                const endTime = this.packets[this.packets.length - 1].timestamp;
                stats.duration = (endTime - startTime) / 1000; // seconds
                stats.packetsPerSecond = stats.totalPackets / stats.duration || 0;
            }

            stats.uniqueHostCount = stats.uniqueHosts.size;
            delete stats.uniqueHosts; // Remove Set for JSON compatibility

            // Detect retransmissions (simplified)
            stats.retransmissions = this.detectRetransmissions();

            return stats;
        }

        detectRetransmissions() {
            const seqNumbers = new Map();
            let retransmissions = 0;

            for (const packet of this.packets) {
                if (packet.protocol === 'TCP' && packet.seq !== null) {
                    const key = `${packet.srcIp}:${packet.srcPort}->${packet.dstIp}:${packet.dstPort}`;
                    const seqKey = `${key}-${packet.seq}`;

                    if (seqNumbers.has(seqKey)) {
                        retransmissions++;
                    } else {
                        seqNumbers.set(seqKey, true);
                    }
                }
            }

            return retransmissions;
        }
    }

    // Protocol color mapping for sunburst
    const PROTOCOL_COLORS = {
        'UDP': '#2196F3',     // Blue
        'TCP': '#4CAF50',     // Green
        'ICMP': '#FF9800',    // Orange
        'ICMP6': '#FF9800',   // Orange
        'IPv6': '#9C27B0',    // Purple
        'ARP': '#FFC107',     // Amber
        'IP': '#03A9F4',      // Light Blue
        'OTHER': '#9E9E9E'    // Grey
    };

    // Build hierarchical data for sunburst
    function buildSunburstData(packets) {
        const hierarchy = {
            name: 'All Traffic',
            children: []
        };

        // Group by protocol -> flow -> port
        const protocolMap = new Map();

        for (const packet of packets) {
            const protocol = packet.protocol || 'OTHER';
            const flowKey = `${packet.srcIp} → ${packet.dstIp}`;
            const port = packet.dstPort !== null ? packet.dstPort.toString() : 'N/A';

            // Get or create protocol node
            if (!protocolMap.has(protocol)) {
                protocolMap.set(protocol, {
                    name: protocol,
                    protocol: protocol,
                    children: [],
                    packets: 0,
                    bytes: 0
                });
            }

            const protocolNode = protocolMap.get(protocol);
            protocolNode.packets++;
            protocolNode.bytes += packet.length || 0;

            // Get or create flow node
            let flowNode = protocolNode.children.find(f => f.name === flowKey);
            if (!flowNode) {
                flowNode = {
                    name: flowKey,
                    protocol: protocol,
                    children: [],
                    packets: 0,
                    bytes: 0,
                    details: `${packet.srcIp} → ${packet.dstIp}`
                };
                protocolNode.children.push(flowNode);
            }

            flowNode.packets++;
            flowNode.bytes += packet.length || 0;

            // Get or create port node
            let portNode = flowNode.children.find(p => p.name === port);
            if (!portNode) {
                portNode = {
                    name: port,
                    protocol: protocol,
                    packets: 0,
                    bytes: 0,
                    details: `Port: ${port}`
                };
                flowNode.children.push(portNode);
            }

            portNode.packets++;
            portNode.bytes += packet.length || 0;
        }

        // Convert map to array and set values
        hierarchy.children = Array.from(protocolMap.values());

        // Set value property based on current metric
        const setValues = (node, metric) => {
            node.value = node[metric] || 0;
            if (node.children) {
                node.children.forEach(child => setValues(child, metric));
            }
        };

        setValues(hierarchy, 'packets');

        return hierarchy;
    }

    // Sunburst diagram renderer
    class SunburstRenderer {
        constructor(containerId) {
            this.container = document.getElementById(containerId);
            this.width = 800;
            this.height = 800;
            this.radius = Math.min(this.width, this.height) / 2;
            this.metric = 'packets';
            this.currentData = null;
            this.currentRoot = null;
        }

        render(packets) {
            // Clear container
            this.container.innerHTML = '';

            // Build hierarchy data
            const data = buildSunburstData(packets);
            this.currentData = packets;

            // Create container
            const sunburstDiv = document.createElement('div');
            sunburstDiv.className = 'sunburst-container';

            // Create SVG
            const svg = d3.create('svg')
                .attr('class', 'sunburst-svg')
                .attr('viewBox', [-this.width / 2, -this.height / 2, this.width, this.height])
                .attr('width', this.width)
                .attr('height', this.height);

            // Create hierarchy
            const root = d3.hierarchy(data)
                .sum(d => d.value)
                .sort((a, b) => b.value - a.value);

            this.currentRoot = root;

            // Create partition layout
            const partition = d3.partition()
                .size([2 * Math.PI, root.height + 1]);

            partition(root);

            // Create arc generator
            const arc = d3.arc()
                .startAngle(d => d.x0)
                .endAngle(d => d.x1)
                .padAngle(d => Math.min((d.x1 - d.x0) / 2, 0.005))
                .padRadius(this.radius * 1.5)
                .innerRadius(d => d.y0 * this.radius)
                .outerRadius(d => Math.max(d.y0 * this.radius, d.y1 * this.radius - 1));

            // Create tooltip
            const tooltip = d3.select('body').append('div')
                .attr('class', 'sunburst-tooltip')
                .style('opacity', 0);

            // Store current focus
            let focus = root;

            // Draw arcs
            const g = svg.append('g');

            const path = g.selectAll('path')
                .data(root.descendants().slice(1))
                .join('path')
                .attr('class', 'sunburst-arc')
                .attr('fill', d => {
                    const protocol = d.data.protocol || 'OTHER';
                    const baseColor = PROTOCOL_COLORS[protocol] || PROTOCOL_COLORS.OTHER;

                    // Opacity gradient: inner rings darker, outer rings lighter
                    const depth = d.depth;
                    const maxDepth = 3;
                    const opacity = 0.6 + (depth / maxDepth) * 0.4;

                    return this.adjustColorOpacity(baseColor, opacity);
                })
                .attr('d', arc)
                .style('cursor', 'pointer');

            // Add interactivity
            path.on('click', (event, d) => {
                event.stopPropagation();
                focus = focus === d ? root : d;
                this.zoomTo(g, path, arc, focus, centerText, centerLabel);
            });

            path.on('mouseover', (event, d) => {
                tooltip.transition()
                    .duration(200)
                    .style('opacity', 0.9);

                const totalPackets = root.value;
                const percentage = ((d.value / totalPackets) * 100).toFixed(1);

                let tooltipContent = `<strong>${d.data.name}</strong><br/>`;

                if (d.depth === 1) {
                    tooltipContent += `Protocol: ${d.data.protocol}<br/>`;
                } else if (d.depth === 2) {
                    tooltipContent += `Flow: ${d.data.details}<br/>`;
                } else if (d.depth === 3) {
                    tooltipContent += `${d.data.details}<br/>`;
                }

                tooltipContent += `Packets: ${d.data.packets.toLocaleString()} (${percentage}%)<br/>`;
                tooltipContent += `Bytes: ${formatBytes(d.data.bytes)}`;

                tooltip.html(tooltipContent)
                    .style('left', (event.pageX + 10) + 'px')
                    .style('top', (event.pageY - 28) + 'px');
            });

            path.on('mouseout', () => {
                tooltip.transition()
                    .duration(500)
                    .style('opacity', 0);
            });

            // Add center circle for reset
            const centerCircle = svg.append('circle')
                .attr('r', this.radius * 0.15)
                .attr('fill', '#f8fafc')
                .attr('stroke', '#cbd5e1')
                .attr('stroke-width', 2)
                .style('cursor', 'pointer')
                .on('click', () => {
                    focus = root;
                    this.zoomTo(g, path, arc, focus, centerText, centerLabel);
                });

            // Add center text
            const centerText = svg.append('text')
                .attr('class', 'sunburst-center-text')
                .attr('y', -5)
                .text('All Traffic');

            const centerLabel = svg.append('text')
                .attr('class', 'sunburst-center-label')
                .attr('y', 10)
                .text(`${root.value.toLocaleString()} packets`);

            // Append SVG to container
            sunburstDiv.appendChild(svg.node());

            // Add legend
            this.addLegend(sunburstDiv);

            this.container.appendChild(sunburstDiv);

            // Store references for metric switching
            this.svgElements = { g, path, arc, centerText, centerLabel, focus: root };
        }

        zoomTo(g, path, arc, d, centerText, centerLabel) {
            // Update center text
            centerText.text(d.data.name);
            centerLabel.text(`${d.value.toLocaleString()} ${this.metric === 'packets' ? 'packets' : 'bytes'}`);

            const transition = g.transition()
                .duration(750)
                .tween('scale', () => {
                    const xd = d3.interpolate(this.currentRoot.x0, d.x0);
                    const yd = d3.interpolate(this.currentRoot.y0, d.y0);
                    return t => {
                        this.currentRoot.x0 = xd(t);
                        this.currentRoot.y0 = yd(t);
                    };
                });

            transition.selectAll('path')
                .attrTween('d', node => () => arc(node));

            this.svgElements.focus = d;
        }

        adjustColorOpacity(color, opacity) {
            // Convert hex to rgba
            const r = parseInt(color.slice(1, 3), 16);
            const g = parseInt(color.slice(3, 5), 16);
            const b = parseInt(color.slice(5, 7), 16);
            return `rgba(${r}, ${g}, ${b}, ${opacity})`;
        }

        addLegend(container) {
            const legend = document.createElement('div');
            legend.className = 'sunburst-legend';

            const protocols = Object.keys(PROTOCOL_COLORS).filter(p => p !== 'OTHER');

            protocols.forEach(protocol => {
                const item = document.createElement('div');
                item.className = 'legend-item';

                const colorBox = document.createElement('div');
                colorBox.className = 'legend-color';
                colorBox.style.background = PROTOCOL_COLORS[protocol];

                const label = document.createElement('span');
                label.textContent = protocol;

                item.appendChild(colorBox);
                item.appendChild(label);
                legend.appendChild(item);
            });

            container.appendChild(legend);
        }

        setMetric(metric) {
            if (!this.currentData) return;

            this.metric = metric;

            // Rebuild data with new metric
            const data = buildSunburstData(this.currentData);

            // Set values based on metric
            const setValues = (node, metric) => {
                node.value = node[metric] || 0;
                if (node.children) {
                    node.children.forEach(child => setValues(child, metric));
                }
            };

            setValues(data, metric);

            // Re-render
            this.render(this.currentData);
        }
    }

    // Ladder diagram renderer
    class LadderDiagramRenderer {
        constructor(canvas, packets, flows) {
            this.canvas = canvas;
            this.ctx = canvas.getContext('2d');
            this.packets = packets;
            this.flows = flows;

            // Layout constants
            this.padding = { top: 80, bottom: 40, left: 150, right: 150 };
            this.rowHeight = 40;
            this.arrowHeight = 20;

            // Colors
            this.colors = {
                SYN: '#3b82f6',      // Blue
                ACK: '#10b981',      // Green
                FIN: '#f59e0b',      // Orange
                RST: '#ef4444',      // Red
                PSH: '#8b5cf6',      // Purple
                default: '#64748b'   // Gray
            };

            this.setupCanvas();
        }

        setupCanvas() {
            const height = this.padding.top + this.padding.bottom +
                          (this.packets.length * this.rowHeight);
            this.canvas.height = Math.max(height, 400);
            this.canvas.width = this.canvas.parentElement.clientWidth;
        }

        render() {
            this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);

            // Apply zoom and pan
            this.ctx.save();
            this.ctx.translate(state.panOffset.x, state.panOffset.y);
            this.ctx.scale(state.zoom, state.zoom);

            this.drawEndpoints();
            this.drawPackets();
            this.drawLegend();

            this.ctx.restore();
        }

        drawEndpoints() {
            const ctx = this.ctx;
            const hosts = this.getUniqueHosts();
            const columnWidth = (this.canvas.width - this.padding.left - this.padding.right) / (hosts.length - 1);

            ctx.font = 'bold 14px sans-serif';
            ctx.textAlign = 'center';
            ctx.fillStyle = '#0f172a';

            hosts.forEach((host, index) => {
                const x = this.padding.left + (index * columnWidth);
                const y = this.padding.top;

                // Draw vertical line
                ctx.strokeStyle = '#cbd5e1';
                ctx.lineWidth = 2;
                ctx.beginPath();
                ctx.moveTo(x, y);
                ctx.lineTo(x, this.canvas.height - this.padding.bottom);
                ctx.stroke();

                // Draw host label
                ctx.fillStyle = '#ffffff';
                ctx.fillRect(x - 70, y - 40, 140, 30);
                ctx.strokeStyle = '#2563eb';
                ctx.lineWidth = 2;
                ctx.strokeRect(x - 70, y - 40, 140, 30);

                ctx.fillStyle = '#0f172a';
                ctx.fillText(host, x, y - 20);
            });
        }

        drawPackets() {
            const ctx = this.ctx;
            const hosts = this.getUniqueHosts();
            const columnWidth = (this.canvas.width - this.padding.left - this.padding.right) / (hosts.length - 1);

            this.packets.forEach((packet, index) => {
                const srcIndex = hosts.indexOf(`${packet.srcIp}:${packet.srcPort || ''}`);
                const dstIndex = hosts.indexOf(`${packet.dstIp}:${packet.dstPort || ''}`);

                if (srcIndex === -1 || dstIndex === -1) return;

                const srcX = this.padding.left + (srcIndex * columnWidth);
                const dstX = this.padding.left + (dstIndex * columnWidth);
                const y = this.padding.top + (index * this.rowHeight);

                // Determine arrow color based on flags
                const color = this.getArrowColor(packet);

                // Draw arrow
                this.drawArrow(srcX, y, dstX, y, color, packet);
            });
        }

        drawArrow(x1, y1, x2, y2, color, packet) {
            const ctx = this.ctx;
            const headLength = 10;
            const angle = Math.atan2(y2 - y1, x2 - x1);

            // Draw line
            ctx.strokeStyle = color;
            ctx.lineWidth = 2;
            ctx.beginPath();
            ctx.moveTo(x1, y1);
            ctx.lineTo(x2, y2);
            ctx.stroke();

            // Draw arrowhead
            ctx.fillStyle = color;
            ctx.beginPath();
            ctx.moveTo(x2, y2);
            ctx.lineTo(
                x2 - headLength * Math.cos(angle - Math.PI / 6),
                y2 - headLength * Math.sin(angle - Math.PI / 6)
            );
            ctx.lineTo(
                x2 - headLength * Math.cos(angle + Math.PI / 6),
                y2 - headLength * Math.sin(angle + Math.PI / 6)
            );
            ctx.closePath();
            ctx.fill();

            // Draw label
            const midX = (x1 + x2) / 2;
            const midY = y1 - 5;

            ctx.font = '11px sans-serif';
            ctx.fillStyle = '#ffffff';
            const label = this.getPacketLabel(packet);
            const labelWidth = ctx.measureText(label).width + 10;
            ctx.fillRect(midX - labelWidth / 2, midY - 10, labelWidth, 15);

            ctx.fillStyle = color;
            ctx.textAlign = 'center';
            ctx.fillText(label, midX, midY);

            // Store packet position for tooltips
            packet._renderPos = { x1, y1, x2, y2, midX, midY };
        }

        getArrowColor(packet) {
            if (packet.flags && packet.flags.length > 0) {
                const primaryFlag = packet.flags[0];
                return this.colors[primaryFlag] || this.colors.default;
            }
            return this.colors.default;
        }

        getPacketLabel(packet) {
            const parts = [];

            if (packet.flags && packet.flags.length > 0) {
                parts.push(packet.flags.join(','));
            }

            if (packet.seq !== null) {
                parts.push(`seq:${packet.seq}`);
            }

            if (packet.ack !== null) {
                parts.push(`ack:${packet.ack}`);
            }

            if (packet.length > 0) {
                parts.push(`len:${packet.length}`);
            }

            return parts.join(' ') || packet.protocol;
        }

        getUniqueHosts() {
            const hostsSet = new Set();
            this.packets.forEach(p => {
                hostsSet.add(`${p.srcIp}:${p.srcPort || ''}`);
                hostsSet.add(`${p.dstIp}:${p.dstPort || ''}`);
            });
            return Array.from(hostsSet);
        }

        drawLegend() {
            const ctx = this.ctx;
            const legendItems = [
                { label: 'SYN', color: this.colors.SYN },
                { label: 'ACK', color: this.colors.ACK },
                { label: 'FIN', color: this.colors.FIN },
                { label: 'RST', color: this.colors.RST },
                { label: 'PSH', color: this.colors.PSH }
            ];

            const startX = 20;
            let x = startX;
            const y = 20;

            ctx.font = '12px sans-serif';
            ctx.textAlign = 'left';

            legendItems.forEach(item => {
                ctx.fillStyle = item.color;
                ctx.fillRect(x, y, 15, 15);
                ctx.strokeStyle = '#cbd5e1';
                ctx.strokeRect(x, y, 15, 15);

                ctx.fillStyle = '#0f172a';
                ctx.fillText(item.label, x + 20, y + 12);

                x += ctx.measureText(item.label).width + 45;
            });
        }

        findPacketAt(x, y) {
            // Adjust for zoom and pan
            const adjustedX = (x - state.panOffset.x) / state.zoom;
            const adjustedY = (y - state.panOffset.y) / state.zoom;

            for (const packet of this.packets) {
                if (!packet._renderPos) continue;

                const { x1, y1, x2, y2 } = packet._renderPos;
                const threshold = 10;

                // Check if point is near the arrow line
                const dist = this.pointToLineDistance(adjustedX, adjustedY, x1, y1, x2, y2);
                if (dist < threshold) {
                    return packet;
                }
            }

            return null;
        }

        pointToLineDistance(px, py, x1, y1, x2, y2) {
            const A = px - x1;
            const B = py - y1;
            const C = x2 - x1;
            const D = y2 - y1;

            const dot = A * C + B * D;
            const lenSq = C * C + D * D;
            let param = -1;

            if (lenSq !== 0) param = dot / lenSq;

            let xx, yy;

            if (param < 0) {
                xx = x1;
                yy = y1;
            } else if (param > 1) {
                xx = x2;
                yy = y2;
            } else {
                xx = x1 + param * C;
                yy = y1 + param * D;
            }

            const dx = px - xx;
            const dy = py - yy;
            return Math.sqrt(dx * dx + dy * dy);
        }
    }

    // Main parsing and visualization function
    function parseAndVisualize() {
        const input = document.getElementById('tcpdump-input').value.trim();

        if (!input) {
            showStatus('Please paste tcpdump output first.', 'error');
            return;
        }

        showStatus('Parsing tcpdump output...', 'info');
        document.getElementById('loading').style.display = 'block';

        // Use setTimeout to allow UI to update
        setTimeout(() => {
            try {
                const parser = new TcpdumpParser();
                state.packets = parser.parse(input);

                if (state.packets.length === 0) {
                    throw new Error('No valid packets found. Please check the tcpdump format.');
                }

                const analyzer = new FlowAnalyzer(state.packets);
                state.flows = analyzer.analyze();

                const calculator = new StatisticsCalculator(state.packets, state.flows);
                state.statistics = calculator.calculate();

                // Reset pagination
                state.currentPage = 1;

                // Populate flow filter
                populateFlowFilter();

                // Show visualization section
                document.getElementById('visualization-section').style.display = 'block';
                document.getElementById('empty-state').style.display = 'none';

                showStatus(`Successfully parsed ${state.packets.length} packets into ${state.flows.length} flows.`, 'success');

                // Render default view
                switchVisualization();

            } catch (error) {
                showStatus(`Error: ${error.message}`, 'error');
                console.error('Parse error:', error);
            } finally {
                document.getElementById('loading').style.display = 'none';
            }
        }, 100);
    }

    // Visualization switcher
    function switchVisualization() {
        const vizType = document.getElementById('viz-type').value;
        state.currentView = vizType;

        const container = document.getElementById('viz-container');
        container.innerHTML = '';

        // Hide/show sunburst controls
        const sunburstControls = document.querySelector('.sunburst-controls');
        if (vizType === 'sunburst') {
            sunburstControls.style.display = 'flex';
        } else {
            sunburstControls.style.display = 'none';
        }

        switch (vizType) {
            case 'ladder':
                renderLadderDiagram();
                break;
            case 'flow-table':
                renderFlowTable();
                break;
            case 'statistics':
                renderStatistics();
                break;
            case 'timeline':
                renderTimeline();
                break;
            case 'sunburst':
                renderSunburst();
                break;
        }
    }

    // Render ladder diagram
    function renderLadderDiagram() {
        const container = document.getElementById('viz-container');

        // Create canvas container with zoom controls
        const canvasWrapper = document.createElement('div');
        canvasWrapper.id = 'canvas-container';

        const zoomControls = document.createElement('div');
        zoomControls.className = 'zoom-controls';
        zoomControls.innerHTML = `
            <button onclick="zoomIn()" class="btn btn-secondary">+</button>
            <button onclick="zoomOut()" class="btn btn-secondary">−</button>
            <button onclick="resetZoom()" class="btn btn-secondary">Reset</button>
        `;

        const canvas = document.createElement('canvas');
        canvas.id = 'ladder-canvas';

        canvasWrapper.appendChild(zoomControls);
        canvasWrapper.appendChild(canvas);
        container.appendChild(canvasWrapper);

        // Apply filters
        const filteredPackets = applyCurrentFilters();

        // Render diagram
        const renderer = new LadderDiagramRenderer(canvas, filteredPackets, state.flows);
        renderer.render();

        // Setup interactions
        setupCanvasInteractions(canvas, renderer);

        // Show pagination if needed
        updatePagination(filteredPackets.length);
    }

    // Render flow table
    function renderFlowTable() {
        const container = document.getElementById('viz-container');
        const filteredFlows = applyCurrentFilters(true);

        const table = document.createElement('table');
        table.innerHTML = `
            <thead>
                <tr>
                    <th class="sortable" onclick="sortTable(0)">Source</th>
                    <th class="sortable" onclick="sortTable(1)">Destination</th>
                    <th class="sortable" onclick="sortTable(2)">Protocol</th>
                    <th class="sortable" onclick="sortTable(3)">Packets</th>
                    <th class="sortable" onclick="sortTable(4)">Bytes</th>
                    <th class="sortable" onclick="sortTable(5)">Duration (s)</th>
                    <th>Flags</th>
                </tr>
            </thead>
            <tbody id="flow-table-body"></tbody>
        `;

        container.appendChild(table);

        const tbody = document.getElementById('flow-table-body');
        filteredFlows.forEach(flow => {
            const duration = ((flow.endTime - flow.startTime) / 1000).toFixed(3);
            const flags = Array.from(flow.states).join(', ');

            const row = tbody.insertRow();
            row.className = 'flow-row';
            row.onclick = () => selectFlow(flow);

            row.innerHTML = `
                <td>${flow.srcIp}:${flow.srcPort || ''}</td>
                <td>${flow.dstIp}:${flow.dstPort || ''}</td>
                <td><span class="protocol-badge protocol-${flow.protocol.toLowerCase()}">${flow.protocol}</span></td>
                <td>${flow.packetCount}</td>
                <td>${formatBytes(flow.totalBytes)}</td>
                <td>${duration}</td>
                <td>${flags}</td>
            `;
        });
    }

    // Render statistics
    function renderStatistics() {
        const container = document.getElementById('viz-container');
        const stats = state.statistics;

        const statsHTML = `
            <div class="stats-grid">
                <div class="stat-card">
                    <h4>Total Packets</h4>
                    <div class="value">${stats.totalPackets.toLocaleString()}</div>
                </div>
                <div class="stat-card">
                    <h4>Total Flows</h4>
                    <div class="value">${stats.totalFlows.toLocaleString()}</div>
                </div>
                <div class="stat-card">
                    <h4>Total Bytes</h4>
                    <div class="value">${formatBytes(stats.totalBytes)}</div>
                </div>
                <div class="stat-card">
                    <h4>Unique Hosts</h4>
                    <div class="value">${stats.uniqueHostCount}</div>
                </div>
                <div class="stat-card">
                    <h4>Duration</h4>
                    <div class="value">${stats.duration.toFixed(2)}s</div>
                </div>
                <div class="stat-card">
                    <h4>Packets/Second</h4>
                    <div class="value">${stats.packetsPerSecond.toFixed(1)}</div>
                </div>
                <div class="stat-card">
                    <h4>Avg Packet Size</h4>
                    <div class="value">${formatBytes(stats.averagePacketSize)}</div>
                </div>
                <div class="stat-card">
                    <h4>Retransmissions</h4>
                    <div class="value">${stats.retransmissions}</div>
                </div>
            </div>

            <h3 style="margin-top: 30px; margin-bottom: 15px;">Protocol Distribution</h3>
            <table>
                <thead>
                    <tr>
                        <th>Protocol</th>
                        <th>Packets</th>
                        <th>Percentage</th>
                    </tr>
                </thead>
                <tbody>
                    ${Object.entries(stats.protocols).map(([proto, count]) => `
                        <tr>
                            <td><span class="protocol-badge protocol-${proto.toLowerCase()}">${proto}</span></td>
                            <td>${count}</td>
                            <td>${((count / stats.totalPackets) * 100).toFixed(1)}%</td>
                        </tr>
                    `).join('')}
                </tbody>
            </table>

            ${Object.keys(stats.tcpStates).length > 0 ? `
                <h3 style="margin-top: 30px; margin-bottom: 15px;">TCP Flags Distribution</h3>
                <table>
                    <thead>
                        <tr>
                            <th>Flag</th>
                            <th>Count</th>
                            <th>Percentage</th>
                        </tr>
                    </thead>
                    <tbody>
                        ${Object.entries(stats.tcpStates).map(([flag, count]) => `
                            <tr>
                                <td><strong>${flag}</strong></td>
                                <td>${count}</td>
                                <td>${((count / stats.totalPackets) * 100).toFixed(1)}%</td>
                            </tr>
                        `).join('')}
                    </tbody>
                </table>
            ` : ''}
        `;

        container.innerHTML = statsHTML;
    }

    // Render sunburst diagram
    function renderSunburst() {
        const container = document.getElementById('viz-container');
        container.style.overflow = 'visible';

        // Apply filters
        const filteredPackets = applyCurrentFilters();

        if (filteredPackets.length === 0) {
            container.innerHTML = '<p>No packets to display in sunburst diagram.</p>';
            return;
        }

        // Create and render sunburst
        const renderer = new SunburstRenderer('viz-container');
        renderer.render(filteredPackets);

        // Store renderer for metric switching
        state.sunburstRenderer = renderer;
    }

    // Switch sunburst metric
    function switchSunburstMetric(metric) {
        if (!state.sunburstRenderer) return;

        // Update button states
        document.querySelectorAll('.metric-btn').forEach(btn => {
            if (btn.dataset.metric === metric) {
                btn.classList.add('active');
            } else {
                btn.classList.remove('active');
            }
        });

        // Update renderer
        state.sunburstRenderer.setMetric(metric);
    }

    // Render timeline
    function renderTimeline() {
        const container = document.getElementById('viz-container');
        const filteredPackets = applyCurrentFilters();

        if (filteredPackets.length === 0) {
            container.innerHTML = '<p>No packets to display in timeline.</p>';
            return;
        }

        const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
        svg.setAttribute('class', 'timeline-svg');
        svg.setAttribute('width', '100%');
        svg.setAttribute('height', '300');

        const width = container.clientWidth - 40;
        const height = 250;
        const padding = { top: 20, bottom: 40, left: 60, right: 20 };

        const minTime = filteredPackets[0].timestamp;
        const maxTime = filteredPackets[filteredPackets.length - 1].timestamp;
        const timeRange = maxTime - minTime || 1;

        // Count packets in time buckets
        const bucketCount = 50;
        const buckets = new Array(bucketCount).fill(0);
        const bucketSize = timeRange / bucketCount;

        filteredPackets.forEach(packet => {
            const bucketIndex = Math.floor((packet.timestamp - minTime) / bucketSize);
            const index = Math.min(bucketIndex, bucketCount - 1);
            buckets[index]++;
        });

        const maxCount = Math.max(...buckets);
        const barWidth = (width - padding.left - padding.right) / bucketCount;

        // Draw bars
        buckets.forEach((count, index) => {
            const x = padding.left + (index * barWidth);
            const barHeight = (count / maxCount) * (height - padding.top - padding.bottom);
            const y = height - padding.bottom - barHeight;

            const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
            rect.setAttribute('x', x);
            rect.setAttribute('y', y);
            rect.setAttribute('width', barWidth - 1);
            rect.setAttribute('height', barHeight);
            rect.setAttribute('fill', '#3b82f6');
            rect.setAttribute('opacity', '0.7');

            const title = document.createElementNS('http://www.w3.org/2000/svg', 'title');
            title.textContent = `${count} packets`;
            rect.appendChild(title);

            svg.appendChild(rect);
        });

        // Draw axes
        const axisColor = '#64748b';

        // Y-axis
        const yAxis = document.createElementNS('http://www.w3.org/2000/svg', 'line');
        yAxis.setAttribute('x1', padding.left);
        yAxis.setAttribute('y1', padding.top);
        yAxis.setAttribute('x2', padding.left);
        yAxis.setAttribute('y2', height - padding.bottom);
        yAxis.setAttribute('stroke', axisColor);
        yAxis.setAttribute('stroke-width', '2');
        svg.appendChild(yAxis);

        // X-axis
        const xAxis = document.createElementNS('http://www.w3.org/2000/svg', 'line');
        xAxis.setAttribute('x1', padding.left);
        xAxis.setAttribute('y1', height - padding.bottom);
        xAxis.setAttribute('x2', width - padding.right);
        xAxis.setAttribute('y2', height - padding.bottom);
        xAxis.setAttribute('stroke', axisColor);
        xAxis.setAttribute('stroke-width', '2');
        svg.appendChild(xAxis);

        // Labels
        const yLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text');
        yLabel.setAttribute('x', 10);
        yLabel.setAttribute('y', padding.top);
        yLabel.setAttribute('fill', axisColor);
        yLabel.setAttribute('font-size', '12');
        yLabel.textContent = 'Packets';
        svg.appendChild(yLabel);

        const xLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text');
        xLabel.setAttribute('x', width / 2);
        xLabel.setAttribute('y', height - 5);
        xLabel.setAttribute('fill', axisColor);
        xLabel.setAttribute('font-size', '12');
        xLabel.setAttribute('text-anchor', 'middle');
        xLabel.textContent = 'Time';
        svg.appendChild(xLabel);

        container.appendChild(svg);

        // Add legend
        const legend = document.createElement('div');
        legend.className = 'legend';
        legend.innerHTML = `
            <div class="legend-item">
                <div class="legend-color" style="background: #3b82f6;"></div>
                <span>Packet Count Distribution Over Time</span>
            </div>
        `;
        container.appendChild(legend);
    }

    // Filter functions
    function populateFlowFilter() {
        const select = document.getElementById('flow-filter');
        select.innerHTML = '<option value="">All Flows</option>';

        state.flows.forEach((flow, index) => {
            const option = document.createElement('option');
            option.value = flow.key;
            option.textContent = `${flow.srcIp}:${flow.srcPort || ''} ↔ ${flow.dstIp}:${flow.dstPort || ''}`;
            select.appendChild(option);
        });
    }

    function applyFilter() {
        state.currentFilter.flow = document.getElementById('flow-filter').value;
        state.currentFilter.protocol = document.getElementById('protocol-filter').value;
        state.currentPage = 1;
        switchVisualization();
    }

    function applyCurrentFilters(forFlows = false) {
        if (forFlows) {
            let filtered = [...state.flows];

            if (state.currentFilter.flow) {
                filtered = filtered.filter(f => f.key === state.currentFilter.flow);
            }

            if (state.currentFilter.protocol) {
                filtered = filtered.filter(f => f.protocol === state.currentFilter.protocol);
            }

            return filtered;
        } else {
            let filtered = [...state.packets];

            if (state.currentFilter.flow) {
                const flow = state.flows.find(f => f.key === state.currentFilter.flow);
                if (flow) {
                    filtered = flow.packets;
                }
            }

            if (state.currentFilter.protocol) {
                filtered = filtered.filter(p => p.protocol === state.currentFilter.protocol);
            }

            // Apply pagination
            const start = (state.currentPage - 1) * state.itemsPerPage;
            const end = start + state.itemsPerPage;
            return filtered.slice(start, end);
        }
    }

    // Zoom and pan functions
    function zoomIn() {
        state.zoom = Math.min(state.zoom * 1.2, 5);
        switchVisualization();
    }

    function zoomOut() {
        state.zoom = Math.max(state.zoom / 1.2, 0.5);
        switchVisualization();
    }

    function resetZoom() {
        state.zoom = 1;
        state.panOffset = { x: 0, y: 0 };
        switchVisualization();
    }

    function setupCanvasInteractions(canvas, renderer) {
        // Mouse move for tooltips
        canvas.addEventListener('mousemove', (e) => {
            const rect = canvas.getBoundingClientRect();
            const x = e.clientX - rect.left;
            const y = e.clientY - rect.top;

            const packet = renderer.findPacketAt(x, y);

            if (packet) {
                showTooltip(e.clientX, e.clientY, packet);
            } else {
                hideTooltip();
            }
        });

        canvas.addEventListener('mouseleave', hideTooltip);

        // Pan functionality
        canvas.addEventListener('mousedown', (e) => {
            state.isDragging = true;
            state.dragStart = { x: e.clientX - state.panOffset.x, y: e.clientY - state.panOffset.y };
        });

        canvas.addEventListener('mousemove', (e) => {
            if (state.isDragging) {
                state.panOffset.x = e.clientX - state.dragStart.x;
                state.panOffset.y = e.clientY - state.dragStart.y;
                renderer.render();
            }
        });

        canvas.addEventListener('mouseup', () => {
            state.isDragging = false;
        });

        // Wheel zoom
        canvas.addEventListener('wheel', (e) => {
            e.preventDefault();
            const delta = e.deltaY > 0 ? 0.9 : 1.1;
            state.zoom = Math.max(0.5, Math.min(5, state.zoom * delta));
            renderer.render();
        });
    }

    // Tooltip functions
    function showTooltip(x, y, packet) {
        const tooltip = document.getElementById('tooltip');
        const header = document.getElementById('tooltip-header');
        const body = document.getElementById('tooltip-body');

        header.textContent = `Packet #${packet.lineNumber}`;

        const details = [];
        details.push(`<strong>Time:</strong> ${packet.rawTimestamp}`);
        details.push(`<strong>Protocol:</strong> ${packet.protocol}`);
        details.push(`<strong>Source:</strong> ${packet.srcIp}:${packet.srcPort || 'N/A'}`);
        details.push(`<strong>Destination:</strong> ${packet.dstIp}:${packet.dstPort || 'N/A'}`);

        if (packet.flags && packet.flags.length > 0) {
            details.push(`<strong>Flags:</strong> ${packet.flags.join(', ')}`);
        }

        if (packet.seq !== null) {
            details.push(`<strong>Sequence:</strong> ${packet.seq}`);
        }

        if (packet.ack !== null) {
            details.push(`<strong>Acknowledgment:</strong> ${packet.ack}`);
        }

        if (packet.win !== null) {
            details.push(`<strong>Window:</strong> ${packet.win}`);
        }

        if (packet.length > 0) {
            details.push(`<strong>Length:</strong> ${packet.length} bytes`);
        }

        body.innerHTML = details.join('<br>');

        tooltip.style.display = 'block';
        tooltip.style.left = `${x + 15}px`;
        tooltip.style.top = `${y + 15}px`;
    }

    function hideTooltip() {
        document.getElementById('tooltip').style.display = 'none';
    }

    // Pagination functions
    function updatePagination(totalItems) {
        const totalPages = Math.ceil(totalItems / state.itemsPerPage);
        const pagination = document.getElementById('pagination');

        if (totalPages > 1) {
            pagination.style.display = 'flex';
            document.getElementById('page-info').textContent =
                `Page ${state.currentPage} of ${totalPages} (${totalItems} packets)`;
        } else {
            pagination.style.display = 'none';
        }
    }

    function previousPage() {
        if (state.currentPage > 1) {
            state.currentPage--;
            switchVisualization();
        }
    }

    function nextPage() {
        const totalItems = state.currentFilter.flow || state.currentFilter.protocol ?
            applyCurrentFilters().length : state.packets.length;
        const totalPages = Math.ceil(totalItems / state.itemsPerPage);

        if (state.currentPage < totalPages) {
            state.currentPage++;
            switchVisualization();
        }
    }

    // Utility functions
    function formatBytes(bytes) {
        if (bytes === 0) return '0 B';
        const k = 1024;
        const sizes = ['B', 'KB', 'MB', 'GB'];
        const i = Math.floor(Math.log(bytes) / Math.log(k));
        return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + ' ' + sizes[i];
    }

    function showStatus(message, type) {
        const statusEl = document.getElementById('status-message');
        statusEl.textContent = message;
        statusEl.className = `status-message ${type}`;
        statusEl.style.display = 'block';

        if (type === 'success' || type === 'info') {
            setTimeout(() => {
                statusEl.style.display = 'none';
            }, 5000);
        }
    }

    function selectFlow(flow) {
        document.getElementById('flow-filter').value = flow.key;
        applyFilter();
        document.getElementById('viz-type').value = 'ladder';
        switchVisualization();
    }

    function sortTable(column) {
        // Table sorting implementation would go here
        console.log('Sort by column:', column);
    }

    function loadSampleData() {
        const sampleData = `14:23:45.123456 IP 206-247-12.zoom.us.8801 > 192.168.1.96.65455: UDP, length 1316
14:23:45.125789 IP 206-247-12.zoom.us.8801 > 192.168.1.96.65455: UDP, length 892
14:23:45.128234 IP 206-247-12.zoom.us.8801 > 192.168.1.96.65455: UDP, length 1148
14:23:45.130567 IP 192.168.1.96.65455 > 206-247-12.zoom.us.8801: UDP, length 245
14:23:45.132890 IP 206-247-12.zoom.us.8801 > 192.168.1.96.65455: UDP, length 1316
14:23:45.135123 IP 206-247-12.zoom.us.8801 > 192.168.1.96.65455: UDP, length 892
14:23:45.137456 IP 206-247-12.zoom.us.8801 > 192.168.1.96.54321: UDP, length 156
14:23:45.139789 IP 192.168.1.96.54321 > 206-247-12.zoom.us.8801: UDP, length 128
14:23:45.142012 IP 206-247-12.zoom.us.8801 > 192.168.1.96.65455: UDP, length 1316
14:23:45.144345 IP 206-247-12.zoom.us.8801 > 192.168.1.96.65455: UDP, length 892
14:23:45.146678 IP 206-247-12.zoom.us.8802 > 192.168.1.96.49876: UDP, length 724
14:23:45.149001 IP 192.168.1.96.49876 > 206-247-12.zoom.us.8802: UDP, length 186
14:23:45.151234 IP 206-247-12.zoom.us.8802 > 192.168.1.96.49876: UDP, length 1316
14:23:45.153567 IP 206-247-12.zoom.us.8802 > 192.168.1.96.49876: UDP, length 892
14:23:45.155890 IP 192.168.1.96.49876 > 206-247-12.zoom.us.8802: UDP, length 245
14:23:45.158123 IP 206-247-12.zoom.us.8801 > 192.168.1.96.65455: UDP, length 1148
14:23:45.160456 IP 206-247-12.zoom.us.8801 > 192.168.1.96.65455: UDP, length 892
14:23:45.162789 IP 192.168.1.96.65455 > 206-247-12.zoom.us.8801: UDP, length 324
14:23:45.165012 IP 206-247-12.zoom.us.8801 > 192.168.1.96.65455: UDP, length 1316
14:23:45.167345 IP 206-247-12.zoom.us.8801 > 192.168.1.96.65455: UDP, length 1148
14:23:45.234567 IP 192.168.1.96.51234 > 13.107.42.14.443: Flags [S], seq 1234567890, win 65535, length 0
14:23:45.345678 IP 13.107.42.14.443 > 192.168.1.96.51234: Flags [S.], seq 987654321, ack 1234567891, win 65535, length 0
14:23:45.456789 IP 192.168.1.96.51234 > 13.107.42.14.443: Flags [.], ack 1, win 65535, length 0
14:23:45.567890 IP 192.168.1.96.51234 > 13.107.42.14.443: Flags [P.], seq 1:517, ack 1, win 65535, length 517
14:23:45.678901 IP 13.107.42.14.443 > 192.168.1.96.51234: Flags [.], ack 517, win 65535, length 0
14:23:46.789012 IP 192.168.1.96.51235 > 8.8.8.8.53: UDP, length 42
14:23:46.890123 IP 8.8.8.8.53 > 192.168.1.96.51235: UDP, length 76
14:23:47.901234 IP6 2001:db8::1.54123 > 2606:4700:4700::1111.53: UDP, length 32
14:23:48.012345 IP6 2606:4700:4700::1111.53 > 2001:db8::1.54123: UDP, length 64
14:23:48.123456 IP 206-247-12.zoom.us.8801 > 192.168.1.96.65455: UDP, length 1316
14:23:48.234567 IP 206-247-12.zoom.us.8801 > 192.168.1.96.65455: UDP, length 892
14:23:48.345678 IP 192.168.1.96.65455 > 206-247-12.zoom.us.8801: UDP, length 245
14:23:48.456789 IP 206-247-12.zoom.us.8801 > 192.168.1.96.65455: UDP, length 1148
14:23:48.567890 IP 206-247-12.zoom.us.8802 > 192.168.1.96.49876: UDP, length 724
14:23:48.678901 IP 192.168.1.96.49876 > 206-247-12.zoom.us.8802: UDP, length 186
14:23:48.789012 IP 206-247-12.zoom.us.8801 > 192.168.1.96.65455: UDP, length 1316
14:23:48.890123 IP 206-247-12.zoom.us.8801 > 192.168.1.96.65455: UDP, length 892
14:23:49.901234 IP 192.168.1.96.65455 > 206-247-12.zoom.us.8801: UDP, length 324
14:23:50.012345 IP 206-247-12.zoom.us.8801 > 192.168.1.96.54321: UDP, length 156
14:23:50.123456 IP 192.168.1.96.54321 > 206-247-12.zoom.us.8801: UDP, length 128`;

        document.getElementById('tcpdump-input').value = sampleData;
        showStatus('Sample Zoom traffic data loaded. Click "Parse & Visualize" to continue.', 'info');
    }

    function clearAll() {
        document.getElementById('tcpdump-input').value = '';
        document.getElementById('visualization-section').style.display = 'none';
        document.getElementById('status-message').style.display = 'none';
        document.querySelector('.sunburst-controls').style.display = 'none';
        state.packets = [];
        state.flows = [];
        state.statistics = {};
        state.currentPage = 1;
        state.zoom = 1;
        state.panOffset = { x: 0, y: 0 };
        state.sunburstRenderer = null;
    }

    // Initialize on page load
    document.addEventListener('DOMContentLoaded', () => {
        console.log('tcpdump Visualizer initialized');
    });
</script>