Function bodies 125 total

function initEventStream() {
    // Close existing connection if any
    if (eventSource) {
        eventSource.close();
    }

    eventSource = new EventSource('/api/events');

    // Listen for specific event types
    eventSource.addEventListener('request', (event) => {
        const data = JSON.parse(event.data);
        handleTrafficEvent({ event_type: 'new_request', data: data.data });
    });

    eventSource.addEventListener('response', (event) => {
        const data = JSON.parse(event.data);
        handleTrafficEvent({ event_type: 'response_received', data: data.data });
    });

    eventSource.addEventListener('completed', (event) => {
        const data = JSON.parse(event.data);
        handleTrafficEvent({ event_type: 'completed', data: data.data });
    });

    eventSource.addEventListener('cleared', (event) => {
        handleTrafficEvent({ event_type: 'cleared', data: null });
    });

    eventSource.onerror = (error) => {
        console.error('EventSource error:'

function handleTrafficEvent(event) {
    const { event_type, data } = event;

    switch (event_type) {
        case 'new_request':
        case 'response_received':
        case 'completed':
            trafficEntries.set(data.id, data);
            updateTrafficRow(data);
            if (currentView === 'tree') {
                renderTreeView();
            }
            applyFilter();
            updateTrafficCount();
            break;
        case 'cleared':
            trafficEntries.clear();
            document.getElementById('traffic-body').innerHTML = '';
            document.getElementById('traffic-tree').innerHTML = '';
            updateTrafficCount();
            break;
    }
}

function updateTrafficRow(entry) {
    const tbody = document.getElementById('traffic-body');
    let row = document.getElementById(`row-${entry.id}`);

    if (!row) {
        row = document.createElement('tr');
        row.id = `row-${entry.id}`;
        row.onclick = () => showTrafficDetail(entry.id);
        tbody.insertBefore(row, tbody.firstChild);
    }

    const status = entry.response ? entry.response.status : '-';
    const statusClass = getStatusClass(status);
    const methodClass = `method-${entry.request.method.toLowerCase()}`;

    const contentType = entry.response?.headers['content-type'] || '-';
    const shortType = contentType.split(';')[0].split('/').pop();

    const size = entry.response ? formatSize(entry.response.body_size) : '-';
    const time = entry.timing.completed
        ? `${new Date(entry.timing.completed) - new Date(entry.timing.request_received)}ms`
        : '-';

    const modified = entry.response?.modified
        ? '<span class="tag tag-modifie

function getStatusClass(status) {
    if (status === '-') return 'status-pending';
    if (status >= 200 && status < 300) return 'status-2xx';
    if (status >= 300 && status < 400) return 'status-3xx';
    if (status >= 400 && status < 500) return 'status-4xx';
    return 'status-5xx';
}

function formatSize(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 parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
}

async function loadInitialData() {
    try {
        const response = await fetch('/api/traffic?limit=500');
        const data = await response.json();
        if (data.success && data.data) {
            data.data.forEach(entry => {
                trafficEntries.set(entry.id, entry);
                updateTrafficRow(entry);
            });
            renderTreeView();
            updateTrafficCount();
        }
    } catch (error) {
        console.error('Failed to load traffic:', error);
    }
}

function initEventListeners() {
    // Clear traffic
    document.getElementById('clear-btn').addEventListener('click', async () => {
        if (confirm('Clear all traffic?')) {
            await fetch('/api/traffic/clear', { method: 'POST' });
        }
    });

    // Real-time filter
    document.getElementById('search-input').addEventListener('input', (e) => {
        currentFilter = e.target.value.toLowerCase();
        applyFilter();
    });
}

function applyFilter() {
    if (currentView === 'list') {
        applyListFilter();
    } else {
        applyTreeFilter();
    }
    updateFilteredCount();
}

function applyListFilter() {
    const rows = document.querySelectorAll('#traffic-body tr');
    rows.forEach(row => {
        const id = row.id.replace('row-', '');
        const entry = trafficEntries.get(id);
        if (entry && matchesFilter(entry)) {
            row.classList.remove('hidden');
        } else {
            row.classList.add('hidden');
        }
    });
}

function applyTreeFilter() {
    if (!currentFilter) {
        // No filter - show everything
        document.querySelectorAll('.tree-host, .tree-node, .tree-leaf').forEach(el => {
            el.classList.remove('hidden');
        });
        return;
    }

    const hosts = document.querySelectorAll('.tree-host');
    hosts.forEach(hostEl => {
        const host = hostEl.dataset.host;
        let hostVisible = false;

        // Filter leaf nodes
        const leaves = hostEl.querySelectorAll('.tree-leaf');
        leaves.forEach(leaf => {
            const path = leaf.dataset.path;
            const fullPath = `${host}${path}`;

            // Check if any entry for this path matches the filter
            let hasMatch = false;
            trafficEntries.forEach(entry => {
                const entryPath = entry.request.path.split('?')[0];
                if (entry.request.host === host && entryPath === path.split('?')[0]) {
                    if (matchesFilter(entry)) {
         

function matchesFilter(entry) {
    if (!currentFilter) return true;

    const searchText = [
        entry.request.url,
        entry.request.host,
        entry.request.path,
        entry.request.method,
        entry.response?.status?.toString() || ''
    ].join(' ').toLowerCase();

    // Support simple regex or plain text
    try {
        const regex = new RegExp(currentFilter, 'i');
        return regex.test(searchText);
    } catch {
        return searchText.includes(currentFilter);
    }
}

function updateFilteredCount() {
    if (!currentFilter) {
        document.getElementById('traffic-count').textContent = trafficEntries.size;
        return;
    }

    let count = 0;
    trafficEntries.forEach(entry => {
        if (matchesFilter(entry)) count++;
    });
    document.getElementById('traffic-count').textContent = `${count}/${trafficEntries.size}`;
}

function buildPathTree(entries) {
    const tree = {};

    entries.forEach(entry => {
        const path = entry.request.path || '/';
        // Split path into segments, filter empty ones
        const segments = path.split('/').filter(s => s);

        let current = tree;
        let currentPath = '';

        segments.forEach((segment, index) => {
            currentPath += '/' + segment;
            if (!current[segment]) {
                current[segment] = {
                    _path: currentPath,
                    _entries: [],
                    _children: {}
                };
            }
            // If last segment, add the entry
            if (index === segments.length - 1) {
                current[segment]._entries.push(entry);
            }
            current = current[segment]._children;
        });

        // Handle root path requests
        if (segments.length === 0) {
            if (!tree['']) {
                tree[''] = { _path: '/', _entries: [], _chi

function countTreeEntries(node) {
    let count = node._entries ? node._entries.length : 0;
    if (node._children) {
        Object.values(node._children).forEach(child => {
            count += countTreeEntries(child);
        });
    }
    return count;
}

function renderTreeNode(name, node, hostKey, depth = 0) {
    const nodeKey = `${hostKey}:${node._path || '/'}`;
    const isExpanded = expandedNodes.has(nodeKey);
    const entries = node._entries || [];
    const children = node._children || {};
    const childKeys = Object.keys(children).sort();
    const totalCount = countTreeEntries(node);
    const hasChildren = childKeys.length > 0;
    const hasEntries = entries.length > 0;

    if (!hasChildren && !hasEntries) return '';

    const displayName = name || '/';
    const indent = depth * 16;

    // Render child nodes
    const childItems = childKeys.map(key =>
        renderTreeNode(key, children[key], hostKey, depth + 1)
    ).join('');

    // If this is a path segment node (not the implicit root)
    if (name !== null) {
        // Leaf node (no children) - clickable to show requests
        if (!hasChildren) {
            return `
                <div class="tree-leaf" data-path="${escapeHtml(node._path)}" data-host="${escap

function renderTreeView() {
    const treeContainer = document.getElementById('traffic-tree');

    // Group by host
    const hostGroups = new Map();
    trafficEntries.forEach(entry => {
        const host = entry.request.host;
        if (!hostGroups.has(host)) {
            hostGroups.set(host, []);
        }
        hostGroups.get(host).push(entry);
    });

    // Sort hosts alphabetically
    const sortedHosts = Array.from(hostGroups.keys()).sort();

    treeContainer.innerHTML = sortedHosts.map(host => {
        const entries = hostGroups.get(host);
        const hostKey = `host:${host}`;
        const isExpanded = expandedNodes.has(hostKey);

        // Build path tree for this host
        const pathTree = buildPathTree(entries);

        // Render path tree
        const pathItems = Object.keys(pathTree).sort().map(key =>
            renderTreeNode(key, pathTree[key], host, 1)
        ).join('');

        return `
            <div class="tree-host ${isExpanded ? 'expanded' :

function toggleTreeNode(nodeKey) {
    if (expandedNodes.has(nodeKey)) {
        expandedNodes.delete(nodeKey);
    } else {
        expandedNodes.add(nodeKey);
    }

    // Update DOM directly without full re-render
    const selector = `[data-key="${CSS.escape(nodeKey)}"]`;
    const el = document.querySelector(selector);
    if (el) {
        el.classList.toggle('expanded');
    }
}

function toggleTreeHost(hostEl) {
    const key = hostEl.dataset.key;
    if (key) {
        toggleTreeNode(key);
    }
}

function showTrafficDetail(id) {
    const entry = trafficEntries.get(id);
    if (!entry) return;

    const content = document.getElementById('detail-content');

    // Format headers
    const formatHeaders = (headers) => {
        return Object.entries(headers || {})
            .map(([k, v]) => `<div class="detail-row"><span class="detail-key">${k}:</span><span class="detail-value">${escapeHtml(v)}</span></div>`)
            .join('');
    };

    // Format body based on content-type
    const formatBody = (body, headers = {}) => {
        if (!body || body.length === 0) return '<em>No body</em>';

        // Check if content is compressed
        const encoding = headers['content-encoding'] || '';
        if (encoding === 'br' || encoding === 'gzip' || encoding === 'deflate') {
            return `<em>Compressed data (${encoding}, ${body.length} bytes)</em>`;
        }

        const contentType = (headers['content-type'] || '').toLowerCase();

        // Check if it's a known bi

function showPathRequests(host, path) {
    // Find all entries matching this host and path (ignoring query string)
    const pathWithoutQuery = path.split('?')[0];
    const matchingEntries = [];

    trafficEntries.forEach(entry => {
        const entryPath = entry.request.path.split('?')[0];
        if (entry.request.host === host && entryPath === pathWithoutQuery) {
            matchingEntries.push(entry);
        }
    });

    if (matchingEntries.length === 1) {
        // Single request - show detail directly
        showTrafficDetail(matchingEntries[0].id);
        return;
    }

    // Multiple requests - show list
    const content = document.getElementById('detail-content');
    const requestsList = matchingEntries.map(entry => {
        const status = entry.response ? entry.response.status : '-';
        const statusClass = getStatusClass(status);
        const method = entry.request.method;
        const methodClass = `method-${method.toLowerCase()}`;
        const time = 

async function loadRules() {
    try {
        const [mapRemote, mapLocal, header] = await Promise.all([
            fetch('/api/rules/map-remote').then(r => r.json()),
            fetch('/api/rules/map-local').then(r => r.json()),
            fetch('/api/rules/header').then(r => r.json())
        ]);

        renderRules('map-remote-rules', mapRemote.data || [], 'map-remote');
        renderRules('map-local-rules', mapLocal.data || [], 'map-local');
        renderRules('header-rules', header.data || [], 'header');
    } catch (error) {
        console.error('Failed to load rules:', error);
    }
}

function renderRules(containerId, rules, type) {
    const container = document.getElementById(containerId);
    if (rules.length === 0) {
        container.innerHTML = '<div class="rule-item"><em>No rules configured</em></div>';
        return;
    }

    container.innerHTML = rules.map(rule => `
        <div class="rule-item ${rule.enabled ? '' : 'disabled'}">
            <div>
                <span class="rule-name">${escapeHtml(rule.name)}</span>
                <div class="rule-pattern">${escapeHtml(rule.pattern || rule.url_pattern)}</div>
            </div>
            <div>
                ${type === 'map-remote' ? `→ ${escapeHtml(rule.target)}` : ''}
                ${type === 'map-local' ? `→ ${escapeHtml(rule.local_path)}` : ''}
            </div>
        </div>
    `).join('');
}

function showAddRuleModal(type) {
    currentRuleType = type;
    const title = {
        'map-remote': 'Add Map Remote Rule',
        'map-local': 'Add Map Local Rule',
        'header': 'Add Header Rule'
    }[type];

    document.getElementById('add-rule-title').textContent = title;

    const formContent = document.getElementById('rule-form-content');

    if (type === 'map-remote') {
        formContent.innerHTML = `
            <div class="form-group">
                <label>Rule Name</label>
                <input type="text" name="name" required>
            </div>
            <div class="form-group">
                <label>URL Pattern (regex)</label>
                <input type="text" name="pattern" placeholder="https://api\\.example\\.com/.*" required>
            </div>
            <div class="form-group">
                <label>Target URL</label>
                <input type="text" name="target" placeholder="https://staging.example.com" required>
            </div>
         

async function submitRule(event) {
    event.preventDefault();
    const form = event.target;
    const formData = new FormData(form);

    let endpoint, body;

    if (currentRuleType === 'map-remote') {
        endpoint = '/api/rules/map-remote';
        body = {
            name: formData.get('name'),
            enabled: true,
            pattern: formData.get('pattern'),
            target: formData.get('target'),
            preserve_path: formData.get('preserve_path') === 'on',
            preserve_query: formData.get('preserve_query') === 'on'
        };
    } else if (currentRuleType === 'map-local') {
        endpoint = '/api/rules/map-local';
        body = {
            name: formData.get('name'),
            enabled: true,
            pattern: formData.get('pattern'),
            local_path: formData.get('local_path'),
            mime_type: formData.get('mime_type') || null
        };
    } else if (currentRuleType === 'header') {
        endpoint = '/api/rules/header';
 

async function loadStats() {
    try {
        const response = await fetch('/api/stats');
        const data = await response.json();
        if (data.success && data.data) {
            document.getElementById('stat-traffic').textContent = data.data.traffic_count;
            document.getElementById('stat-certs').textContent = data.data.cert_cache_size;
            document.getElementById('stat-map-remote').textContent = data.data.map_remote_rules;
            document.getElementById('stat-map-local').textContent = data.data.map_local_rules;
            document.getElementById('stat-header').textContent = data.data.header_rules;
        }
    } catch (error) {
        console.error('Failed to load stats:', error);
    }
}