app.js.before-issue5

        // State
        const allEvents = [];
        let timeRange = { start: 0, end: 0 };
        let isLive = true;
        let currentTime = Date.now() * 1_000_000;
        let ws = null;
        let reconnectTimeout = null;
        let isDragging = false;
        let filterText = '';
        let selectedEvent = null;
        let hoveredEvent = null;  // Event currently being hovered for peer highlighting
        let highlightedPeers = new Set();
        let selectedPeerId = null;  // For filtering events by peer
        let selectedTxId = null;    // For filtering events by transaction
        let gatewayPeerId = null;   // Gateway peer ID
        let yourPeerId = null;      // User's own peer ID
        let yourIpHash = null;      // User's IP hash
        let youArePeer = false;     // Whether user's IP matches a network peer
        let yourName = null;        // User's peer name (if set)
        let peerNames = {};         // ip_hash -> name for all peers
        let contractData = {};  // contract_key -> contract data (subscriptions, states, etc.)
        let contractStates = {};  // contract_key -> {peer_id -> {hash, timestamp}}
        let propagationData = {};  // contract_key -> {hash, first_seen, propagation_ms, peer_count, timeline}
        let selectedContract = null; // Currently selected contract
        let contractSearchText = '';  // Search filter for contracts
        let opStats = null;  // Operation statistics
        let displayedEvents = [];  // Events currently shown in the events panel
        let allTransactions = [];  // Transactions for timeline lanes
        const transactionMap = new Map();  // tx_id -> index in allTransactions for quick lookup
        let selectedTransaction = null;  // Currently selected transaction for detail view
        let initialStatePeers = [];  // Peers from initial state message
        let initialStateConnections = [];  // Connections from initial state message
        let peerLifecycle = null;  // Peer lifecycle data (version, arch, OS)
        let peerPresence = [];  // Peer presence timeline for historical reconstruction

        // Performance: RAF-based update batching (max 60fps)
        let updateScheduled = false;
        let pendingTimelineMarkers = [];  // Queue timeline markers for batch insertion

        // Performance: Cache state to avoid unnecessary rebuilds
        let lastSvgState = null;  // Serialized state for comparison
        let lastEventsState = null;  // Cache for events panel
        let lastSvgRebuildTime = 0;  // Throttle SVG rebuilds (expensive)
        const SVG_REBUILD_INTERVAL_MS = 1000;  // Max 1 SVG rebuild per second (topology doesn't change fast)

        // Performance: Cache filtered events (avoid filtering 28k events every frame)
        let cachedNearbyEvents = [];
        let cachedFilterKey = null;

        // Performance: Cache detail timeline state
        let lastDetailTimelineKey = null;

        // Performance: Canvas overlay for lightweight hover effects (separate from heavy SVG)
        let hoverCanvas = null;
        let hoverCtx = null;
        let lastHoverState = null;

        const SVG_SIZE = 450;
        const SVG_WIDTH = 530;  // Extra width for chart
        const CENTER = SVG_SIZE / 2;
        const RADIUS = 175;

        // Performance: Track last update time for throttling
        let lastUpdateTime = 0;
        const MIN_UPDATE_INTERVAL_MS = 100;  // Max 10 updates per second for background updates

        // Schedule an update via requestAnimationFrame (batches multiple updates per frame)
        function scheduleUpdate(isUserInteraction = false) {
            if (updateScheduled) return;

            // Throttle background updates (new events) to 10fps max
            // User interactions (hover, click) get immediate updates
            if (!isUserInteraction) {
                const now = performance.now();
                if (now - lastUpdateTime < MIN_UPDATE_INTERVAL_MS) {
                    // Schedule a delayed update instead
                    setTimeout(() => {
                        updateScheduled = false;
                        scheduleUpdate(false);
                    }, MIN_UPDATE_INTERVAL_MS);
                    updateScheduled = true;
                    return;
                }
            }

            updateScheduled = true;
            requestAnimationFrame(() => {
                updateScheduled = false;
                lastUpdateTime = performance.now();
                // Flush pending timeline markers in batch
                flushTimelineMarkers();
                updateView();
            });
        }

        // Batch insert timeline markers (avoid per-event DOM manipulation)
        const MAX_TIMELINE_MARKERS = 500;  // Limit DOM nodes in timeline

        function flushTimelineMarkers() {
            if (pendingTimelineMarkers.length === 0) return;
            const container = document.getElementById('timeline-events');
            if (!container) return;

            const fragment = document.createDocumentFragment();
            const duration = timeRange.end - timeRange.start;
            if (duration <= 0) {
                pendingTimelineMarkers.length = 0;
                return;
            }

            for (const data of pendingTimelineMarkers) {
                const pos = (data.timestamp - timeRange.start) / duration;
                if (pos < 0 || pos > 1) continue;

                const marker = document.createElement('div');
                marker.className = `timeline-marker ${getEventClass(data.event_type)}`;
                marker.style.left = `${pos * 100}%`;
                marker.style.height = '20px';
                marker.style.top = '30px';
                marker.title = `${data.time_str} - ${data.event_type}`;
                fragment.appendChild(marker);
            }

            container.appendChild(fragment);
            pendingTimelineMarkers.length = 0;

            // Limit total markers to prevent DOM bloat
            const markers = container.querySelectorAll('.timeline-marker');
            if (markers.length > MAX_TIMELINE_MARKERS) {
                const toRemove = markers.length - MAX_TIMELINE_MARKERS;
                for (let i = 0; i < toRemove; i++) {
                    markers[i].remove();
                }
            }
        }

        function getEventClass(eventType) {
            if (!eventType) return 'other';
            // Handle specific connect event types
            if (eventType.includes('connect') || eventType === 'start_connection' || eventType === 'finished') return 'connect';
            if (eventType.includes('put')) return 'put';
            if (eventType.includes('get')) return 'get';
            if (eventType.includes('update') || eventType.includes('broadcast')) return 'update';
            if (eventType.includes('subscrib')) return 'subscribe';
            return 'other';
        }

        function getEventLabel(eventType) {
            // Return user-friendly labels for event types
            const labels = {
                'start_connection': 'connecting',
                'connected': 'connected',
                'finished': 'conn done',
                'put_request': 'put req',
                'put_success': 'put ok',
                'get_request': 'get req',
                'get_success': 'get ok',
                'get_not_found': 'get 404',
                'update_request': 'update req',
                'update_success': 'update ok',
                'subscribe_request': 'sub req',
                'subscribed': 'subscribed',
                'broadcast_emitted': 'broadcast',
                'broadcast_applied': 'applied',
            };
            return labels[eventType] || eventType;
        }

        function locationToXY(location) {
            const angle = location * 2 * Math.PI - Math.PI / 2;
            return { x: CENTER + RADIUS * Math.cos(angle), y: CENTER + RADIUS * Math.sin(angle) };
        }

        // Initialize hover overlay canvas (lightweight updates separate from heavy SVG)
        function initHoverCanvas() {
            const container = document.getElementById('ring-container');
            if (!container || hoverCanvas) return;

            hoverCanvas = document.createElement('canvas');
            hoverCanvas.width = SVG_WIDTH;
            hoverCanvas.height = SVG_SIZE;
            hoverCanvas.style.cssText = 'position:absolute;top:0;left:0;pointer-events:none;z-index:10;';
            hoverCtx = hoverCanvas.getContext('2d');
            container.style.position = 'relative';
            container.appendChild(hoverCanvas);
        }

        // Update hover highlights on canvas (very fast, no DOM manipulation)
        function updateHoverCanvas(peers) {
            if (!hoverCtx || !hoveredEvent) {
                if (hoverCtx) hoverCtx.clearRect(0, 0, SVG_WIDTH, SVG_SIZE);
                return;
            }

            // Build set of peers to highlight
            const highlightSet = new Set();
            if (hoveredEvent.peer_id) highlightSet.add(hoveredEvent.peer_id);
            if (hoveredEvent.from_peer) highlightSet.add(hoveredEvent.from_peer);
            if (hoveredEvent.to_peer) highlightSet.add(hoveredEvent.to_peer);
            if (hoveredEvent.connection) {
                highlightSet.add(hoveredEvent.connection[0]);
                highlightSet.add(hoveredEvent.connection[1]);
            }

            // Check if we need to redraw
            const hoverState = Array.from(highlightSet).sort().join(',');
            if (hoverState === lastHoverState) return;
            lastHoverState = hoverState;

            // Clear and redraw highlights
            hoverCtx.clearRect(0, 0, SVG_WIDTH, SVG_SIZE);

            peers.forEach((peer, id) => {
                if (!highlightSet.has(id)) return;

                const pos = locationToXY(peer.location);

                // Glow effect
                hoverCtx.beginPath();
                hoverCtx.arc(pos.x, pos.y, 12, 0, Math.PI * 2);
                hoverCtx.fillStyle = 'rgba(251, 191, 36, 0.4)';
                hoverCtx.fill();

                // Highlight circle
                hoverCtx.beginPath();
                hoverCtx.arc(pos.x, pos.y, 6, 0, Math.PI * 2);
                hoverCtx.fillStyle = '#fbbf24';
                hoverCtx.fill();

                // Draw radial label for hovered peers
                const peerName = peer.ip_hash ? peerNames[peer.ip_hash] : null;
                const hoverLabel = peerName || (peer.ip_hash ? `#${peer.ip_hash}` : id.substring(0, 10));
                const angle = peer.location * 2 * Math.PI - Math.PI / 2;
                const labelR = RADIUS + 18;
                const lx = CENTER + labelR * Math.cos(angle);
                const ly = CENTER + labelR * Math.sin(angle);
                const onLeft = Math.cos(angle) < 0;
                const rotation = onLeft ? angle + Math.PI : angle;

                hoverCtx.save();
                hoverCtx.translate(lx, ly);
                hoverCtx.rotate(rotation);
                hoverCtx.font = 'bold 10px JetBrains Mono, monospace';
                hoverCtx.fillStyle = '#fbbf24';
                hoverCtx.textAlign = onLeft ? 'end' : 'start';
                hoverCtx.textBaseline = 'middle';
                hoverCtx.fillText(hoverLabel, 0, 0);
                hoverCtx.restore();
            });

            // Draw message flow arrow if from/to peers exist
            if (hoveredEvent.from_peer && hoveredEvent.to_peer && hoveredEvent.from_peer !== hoveredEvent.to_peer) {
                const fromPeer = peers.get(hoveredEvent.from_peer);
                const toPeer = peers.get(hoveredEvent.to_peer);

                const fromLoc = fromPeer?.location ?? hoveredEvent.from_location;
                const toLoc = toPeer?.location ?? hoveredEvent.to_location;

                if (fromLoc != null && toLoc != null) {
                    const fromPos = locationToXY(fromLoc);
                    const toPos = locationToXY(toLoc);

                    // Shorten arrow to not overlap nodes
                    const dx = toPos.x - fromPos.x;
                    const dy = toPos.y - fromPos.y;
                    const dist = Math.sqrt(dx*dx + dy*dy);
                    if (dist > 20) {
                        const x1 = fromPos.x + dx * (15/dist);
                        const y1 = fromPos.y + dy * (15/dist);
                        const x2 = fromPos.x + dx * (1 - 20/dist);
                        const y2 = fromPos.y + dy * (1 - 20/dist);

                        hoverCtx.beginPath();
                        hoverCtx.moveTo(x1, y1);
                        hoverCtx.lineTo(x2, y2);
                        hoverCtx.strokeStyle = '#fbbf24';
                        hoverCtx.lineWidth = 2;
                        hoverCtx.stroke();

                        // Arrow head
                        const angle = Math.atan2(dy, dx);
                        hoverCtx.beginPath();
                        hoverCtx.moveTo(x2, y2);
                        hoverCtx.lineTo(x2 - 8*Math.cos(angle - 0.4), y2 - 8*Math.sin(angle - 0.4));
                        hoverCtx.lineTo(x2 - 8*Math.cos(angle + 0.4), y2 - 8*Math.sin(angle + 0.4));
                        hoverCtx.closePath();
                        hoverCtx.fillStyle = '#fbbf24';
                        hoverCtx.fill();
                    }
                }
            }
        }

        // Convert state hash to deterministic HSL color
        function hashToColor(hash) {
            if (!hash) return null;
            // Use first 6 chars of hash for hue (0-360)
            const hue = parseInt(hash.substring(0, 6), 16) % 360;
            return {
                fill: `hsl(${hue}, 70%, 50%)`,
                glow: `hsla(${hue}, 70%, 50%, 0.3)`
            };
        }

        // Base58 alphabet (Bitcoin style)
        const BASE58_ALPHABET = '123456789ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnopqrstuvwxyz';

        // Decode Base58 string to byte array
        function decodeBase58(str) {
            const bytes = [];
            for (let i = 0; i < str.length; i++) {
                const c = str[i];
                const charIndex = BASE58_ALPHABET.indexOf(c);
                if (charIndex === -1) continue; // Skip invalid chars

                let carry = charIndex;
                for (let j = 0; j < bytes.length; j++) {
                    carry += bytes[j] * 58;
                    bytes[j] = carry & 0xff;
                    carry >>= 8;
                }
                while (carry > 0) {
                    bytes.push(carry & 0xff);
                    carry >>= 8;
                }
            }
            // Handle leading '1's (zeros in Base58)
            for (let i = 0; i < str.length && str[i] === '1'; i++) {
                bytes.push(0);
            }
            return bytes.reverse();
        }

        // Convert contract key to ring location (matches Rust implementation)
        function contractKeyToLocation(contractKey) {
            if (!contractKey) return null;
            const bytes = decodeBase58(contractKey);
            if (bytes.length === 0) return null;

            let value = 0.0;
            let divisor = 256.0;
            for (const byte of bytes) {
                value += byte / divisor;
                divisor *= 256.0;
            }
            return Math.min(Math.max(value, 0.0), 1.0);
        }

        // Calculate contract activity stats from events
        function getContractActivity(contractKey) {
            const contractEvents = allEvents.filter(e =>
                e.contract_full === contractKey &&
                (e.event_type === 'update_success' || e.event_type === 'update_broadcast_received' ||
                 e.event_type === 'put_success' || e.event_type === 'put_broadcast_received')
            );

            if (contractEvents.length === 0) {
                return { lastUpdate: null, totalUpdates: 0, recentUpdates: 0 };
            }

            // Sort by timestamp descending to get latest
            contractEvents.sort((a, b) => b.timestamp - a.timestamp);
            const lastUpdate = contractEvents[0].timestamp;
            const totalUpdates = contractEvents.length;

            // Count recent updates (within 1 hour)
            const oneHourAgo = Date.now() * 1_000_000 - (60 * 60 * 1000 * 1_000_000);
            const recentUpdates = contractEvents.filter(e => e.timestamp > oneHourAgo).length;

            return { lastUpdate, totalUpdates, recentUpdates };
        }

        // Compute proximity links: connected peers that both have the contract
        // but may not be in the subscription tree (they can still exchange updates)
        function computeProximityLinks(contractKey, peers, connections) {
            if (!contractKey || !contractData[contractKey]) return [];

            const subData = contractData[contractKey];
            const peerStates = subData.peer_states || [];

            // Build set of peer_ids that have this contract
            const peersWithContract = new Set();
            peerStates.forEach(ps => {
                if (ps.peer_id) peersWithContract.add(ps.peer_id);
            });

            // Build set of subscription tree edges (for exclusion)
            const subscriptionEdges = new Set();
            const tree = subData.tree || {};
            Object.entries(tree).forEach(([fromId, toIds]) => {
                toIds.forEach(toId => {
                    // Store both directions since we check undirected
                    subscriptionEdges.add(`${fromId}|${toId}`);
                    subscriptionEdges.add(`${toId}|${fromId}`);
                });
            });

            // Find proximity links: connections where both peers have the contract
            // but aren't connected via subscription tree
            const proximityLinks = [];
            connections.forEach(connKey => {
                const [id1, id2] = connKey.split('|');
                const peer1 = peers.get(id1);
                const peer2 = peers.get(id2);
                if (!peer1 || !peer2) return;

                // Check if both peers have the contract (using peer_id from topology)
                const p1HasContract = peer1.peer_id && peersWithContract.has(peer1.peer_id);
                const p2HasContract = peer2.peer_id && peersWithContract.has(peer2.peer_id);

                if (p1HasContract && p2HasContract) {
                    // Check if this isn't already a subscription edge
                    // Need to map topology IDs to peer_ids for comparison
                    const edgeKey1 = `${peer1.peer_id}|${peer2.peer_id}`;
                    const edgeKey2 = `${peer2.peer_id}|${peer1.peer_id}`;

                    if (!subscriptionEdges.has(edgeKey1) && !subscriptionEdges.has(edgeKey2)) {
                        proximityLinks.push({ from: id1, to: id2, fromPeerId: peer1.peer_id, toPeerId: peer2.peer_id });
                    }
                }
            });

            return proximityLinks;
        }

        // Check if subscription tree is connected using BFS
        function checkTreeConnectivity(contractKey, peers) {
            if (!contractKey || !contractData[contractKey]) {
                return { connected: true, segments: 1, nodes: 0 };
            }

            const subData = contractData[contractKey];
            const peerStates = subData.peer_states || [];
            const tree = subData.tree || {};

            if (peerStates.length === 0) {
                return { connected: true, segments: 0, nodes: 0 };
            }

            // Build adjacency list (undirected) from subscription tree
            const adjacency = new Map();
            const allNodes = new Set();

            // Add all peers with this contract as nodes
            peerStates.forEach(ps => {
                if (ps.peer_id) {
                    allNodes.add(ps.peer_id);
                    if (!adjacency.has(ps.peer_id)) adjacency.set(ps.peer_id, new Set());
                }
            });

            // Add edges from tree (bidirectional)
            Object.entries(tree).forEach(([fromId, toIds]) => {
                if (!adjacency.has(fromId)) adjacency.set(fromId, new Set());
                toIds.forEach(toId => {
                    if (!adjacency.has(toId)) adjacency.set(toId, new Set());
                    adjacency.get(fromId).add(toId);
                    adjacency.get(toId).add(fromId);
                    allNodes.add(fromId);
                    allNodes.add(toId);
                });
            });

            if (allNodes.size === 0) {
                return { connected: true, segments: 0, nodes: 0 };
            }

            // BFS to find connected components
            const visited = new Set();
            let segments = 0;
            const segmentSizes = [];

            for (const startNode of allNodes) {
                if (visited.has(startNode)) continue;

                segments++;
                let segmentSize = 0;
                const queue = [startNode];

                while (queue.length > 0) {
                    const node = queue.shift();
                    if (visited.has(node)) continue;
                    visited.add(node);
                    segmentSize++;

                    const neighbors = adjacency.get(node) || new Set();
                    for (const neighbor of neighbors) {
                        if (!visited.has(neighbor)) {
                            queue.push(neighbor);
                        }
                    }
                }
                segmentSizes.push(segmentSize);
            }

            return {
                connected: segments <= 1,
                segments: segments,
                nodes: allNodes.size,
                segmentSizes: segmentSizes
            };
        }

        // Get comprehensive subscription tree info for UI display
        function getSubscriptionTreeInfo(contractKey, peers, connections) {
            const connectivity = checkTreeConnectivity(contractKey, peers);
            const proximityLinks = computeProximityLinks(contractKey, peers, connections);

            // Check if proximity links bridge the segments
            let bridged = false;
            if (!connectivity.connected && proximityLinks.length > 0) {
                // Simplified check: if there are proximity links and tree is fragmented,
                // assume they might bridge (full check would require segment analysis)
                bridged = true;
            }

            return {
                ...connectivity,
                proximityLinks: proximityLinks,
                bridgedByProximity: bridged
            };
        }

        function formatRelativeTime(tsNano) {
            if (!tsNano) return null;
            const now = Date.now();
            const then = tsNano / 1_000_000;
            const diffMs = now - then;

            if (diffMs < 60000) return 'just now';
            if (diffMs < 3600000) return `${Math.floor(diffMs / 60000)}m ago`;
            if (diffMs < 86400000) return `${Math.floor(diffMs / 3600000)}h ago`;
            return `${Math.floor(diffMs / 86400000)}d ago`;
        }

        function formatTime(tsNano) {
            return new Date(tsNano / 1_000_000).toLocaleTimeString();
        }

        function formatDate(tsNano) {
            return new Date(tsNano / 1_000_000).toLocaleDateString(undefined, {
                month: 'short', day: 'numeric'
            });
        }

        /**
         * Render a small SVG sparkline showing propagation timeline.
         * @param {Array} timeline - Array of {t: ms_offset, peers: count}
         * @param {number} maxPeers - Total peer count at end
         * @returns {string} SVG markup
         */
        function renderPropagationSparkline(timeline, maxPeers) {
            if (!timeline || timeline.length === 0) return '';

            const width = 50;
            const height = 14;
            const padding = 1;

            // Normalize timeline to fit in the sparkline
            const maxT = Math.max(timeline[timeline.length - 1].t, 1);
            const maxP = Math.max(maxPeers, 1);

            // Build SVG path
            const points = timeline.map(pt => {
                const x = padding + (pt.t / maxT) * (width - 2 * padding);
                const y = height - padding - (pt.peers / maxP) * (height - 2 * padding);
                return `${x},${y}`;
            });

            // Create step function (horizontal then vertical for each point)
            let pathD = `M ${points[0]}`;
            for (let i = 1; i < points.length; i++) {
                const [prevX, prevY] = points[i - 1].split(',').map(Number);
                const [x, y] = points[i].split(',').map(Number);
                // Step: horizontal to new x, then vertical to new y
                pathD += ` H ${x} V ${y}`;
            }
            // Extend to the end if propagation finished before max time
            const lastX = padding + (width - 2 * padding);
            pathD += ` H ${lastX}`;

            // Fill area under the curve
            const fillPath = pathD + ` V ${height - padding} H ${padding} Z`;

            return `
                <svg class="sparkline-svg" viewBox="0 0 ${width} ${height}" preserveAspectRatio="none">
                    <path d="${fillPath}" class="sparkline-fill"/>
                    <path d="${pathD}" class="sparkline-line"/>
                </svg>
            `;
        }

        function renderRuler() {
            const ruler = document.getElementById('timeline-ruler');
            ruler.innerHTML = '';

            if (timeRange.end <= timeRange.start) return;

            const duration = timeRange.end - timeRange.start;
            const durationMs = duration / 1_000_000;
            const durationMin = durationMs / 60000;

            // Determine appropriate tick interval
            let tickInterval;
            if (durationMin <= 10) tickInterval = 60000;       // 1 min
            else if (durationMin <= 30) tickInterval = 300000;  // 5 min
            else if (durationMin <= 60) tickInterval = 600000;  // 10 min
            else if (durationMin <= 120) tickInterval = 900000; // 15 min
            else tickInterval = 1800000;                        // 30 min

            const startMs = Math.ceil((timeRange.start / 1_000_000) / tickInterval) * tickInterval;
            const endMs = timeRange.end / 1_000_000;

            for (let ms = startMs; ms <= endMs; ms += tickInterval) {
                const pos = ((ms * 1_000_000) - timeRange.start) / duration;
                if (pos < 0 || pos > 1) continue;

                const tick = document.createElement('div');
                tick.className = 'timeline-tick' + ((ms % (tickInterval * 2) === 0) ? ' major' : '');
                tick.style.position = 'absolute';
                tick.style.left = `${pos * 100}%`;
                tick.style.transform = 'translateX(-50%)';

                const time = new Date(ms);
                tick.textContent = time.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'});

                ruler.appendChild(tick);
            }
        }

        function showTransactionDetail(tx) {
            // Toggle: clicking same transaction clears the filter
            if (selectedTxId === tx.tx_id) {
                selectedTxId = null;
                selectedTransaction = null;
                highlightedPeers.clear();
            } else {
                selectedTransaction = tx;
                selectedTxId = tx.tx_id;
                // Highlight all peers involved in this transaction
                highlightedPeers.clear();
                const events = tx.events || [];
                events.forEach(evt => {
                    if (evt.peer_id) highlightedPeers.add(evt.peer_id);
                    if (evt.from_peer) highlightedPeers.add(evt.from_peer);
                    if (evt.to_peer) highlightedPeers.add(evt.to_peer);
                });
                // Switch to Events tab to show filtered events
                switchTab('events');
            }
            updateFilterBar();
            updateView();  // Refresh events list with filter
            updateURL();
            return;  // Events box now shows transaction details, no popup needed

            const container = document.getElementById('tx-detail-container');
            const titleEl = document.getElementById('tx-detail-title');
            const ganttEl = document.getElementById('tx-detail-gantt');

            // Update title with op badge
            const opClass = tx.op || 'other';
            titleEl.innerHTML = `<span class="op-badge ${opClass}">${(tx.op || 'unknown').toUpperCase()}</span>` +
                `<span>Transaction ${tx.tx_id.substring(0, 8)}...</span>`;

            // Build summary
            const duration = tx.duration_ms ? `${tx.duration_ms.toFixed(1)}ms` : 'pending';
            const events = tx.events || [];
            let summaryHtml = `<div class="tx-detail-summary">
                <span>Duration: <strong>${duration}</strong></span>
                <span>Events: <strong>${events.length}</strong></span>
                <span>Status: <strong>${tx.status || 'unknown'}</strong></span>
                ${tx.contract ? `<span>Contract: <strong>${tx.contract}</strong></span>` : ''}
            </div>`;

            // Build Gantt chart of events
            if (events.length === 0) {
                ganttEl.innerHTML = summaryHtml + '<div style="color:var(--text-muted);padding:12px;">No event details available</div>';
            } else {
                // Sort events by timestamp
                const sortedEvents = [...events].sort((a, b) => a.timestamp - b.timestamp);
                const txStart = sortedEvents[0].timestamp;
                const txEnd = sortedEvents[sortedEvents.length - 1].timestamp;
                const txDuration = Math.max(txEnd - txStart, 1); // Avoid division by zero

                let eventsHtml = '';
                // Use transaction's operation type for dot color
                const opType = tx.op || 'other';
                sortedEvents.forEach((evt, idx) => {
                    const relativeTime = (evt.timestamp - txStart) / 1_000_000; // Convert to ms

                    // Determine dot color: use op type, but mark failures red
                    let dotClass = opType;
                    if (evt.event_type.includes('fail') || evt.event_type.includes('error')) {
                        dotClass = 'failed';
                    }

                    // Create descriptive label based on operation type and event
                    let eventLabel = evt.event_type.replace(/_/g, ' ');
                    if (opType === 'connect') {
                        if (idx === 0 && !evt.peer_id) {
                            eventLabel = 'Initiated';
                        } else if (evt.peer_id) {
                            eventLabel = `→ ${evt.peer_id.substring(0, 12)}`;
                        }
                    } else if (opType === 'put') {
                        if (evt.event_type === 'put_request') eventLabel = 'Request sent';
                        else if (evt.event_type === 'put_success') eventLabel = 'Stored ✓';
                        else if (evt.event_type.includes('fail')) eventLabel = 'Failed ✗';
                    } else if (opType === 'get') {
                        if (evt.event_type === 'get_request') eventLabel = 'Request sent';
                        else if (evt.event_type === 'get_success') eventLabel = 'Retrieved ✓';
                        else if (evt.event_type === 'get_not_found') eventLabel = 'Not found';
                        else if (evt.event_type.includes('fail')) eventLabel = 'Failed ✗';
                    } else if (opType === 'update') {
                        if (evt.event_type === 'update_request') eventLabel = 'Update sent';
                        else if (evt.event_type === 'update_success') eventLabel = 'Updated ✓';
                        else if (evt.event_type.includes('broadcast')) eventLabel = 'Broadcast';
                    } else if (opType === 'subscribe') {
                        if (evt.event_type === 'subscribe_request') eventLabel = 'Subscribe sent';
                        else if (evt.event_type === 'subscribed') eventLabel = 'Subscribed ✓';
                    }

                    // For non-connect ops, show peer if available
                    const showPeer = opType !== 'connect' && evt.peer_id;
                    const peerInfo = showPeer ? `<span class="tx-event-peer">${evt.peer_id.substring(0, 12)}</span>` : '';

                    eventsHtml += `<div class="tx-event-row">
                        <span class="tx-event-time">+${relativeTime.toFixed(1)}ms</span>
                        <span class="tx-event-dot ${dotClass}"></span>
                        <span class="tx-event-type">${eventLabel}</span>
                        ${peerInfo}
                    </div>`;
                });

                ganttEl.innerHTML = summaryHtml + eventsHtml;
            }

            container.classList.add('visible');
        }

        function closeTransactionDetail() {
            selectedTransaction = null;
            selectedTxId = null;
            document.getElementById('tx-detail-container').classList.remove('visible');
            updateFilterBar();
            updateView();
        }

        // Peer naming prompt
        function showPeerNamingPrompt() {
            // Create modal overlay
            const overlay = document.createElement('div');
            overlay.id = 'peer-name-overlay';
            overlay.className = 'peer-name-overlay';
            overlay.innerHTML = `
                <div class="peer-name-modal">
                    <div class="peer-name-header">Name Your Peer</div>
                    <div class="peer-name-body">
                        <p>You're running a Freenet peer! Give it a name that others will see on the network dashboard.</p>
                        <input type="text" id="peer-name-input" class="peer-name-input" placeholder="e.g., SpaceCowboy, Node42, PizzaNode" maxlength="20" autofocus>
                        <div class="peer-name-hint">Max 20 characters. Keep it friendly!</div>
                    </div>
                    <div class="peer-name-footer">
                        <button class="peer-name-btn secondary" onclick="closePeerNamingPrompt()">Maybe Later</button>
                        <button class="peer-name-btn primary" onclick="submitPeerName()">Set Name</button>
                    </div>
                </div>
            `;
            document.body.appendChild(overlay);

            // Focus input and handle enter key
            const input = document.getElementById('peer-name-input');
            input.focus();
            input.addEventListener('keydown', (e) => {
                if (e.key === 'Enter') submitPeerName();
                if (e.key === 'Escape') closePeerNamingPrompt();
            });
        }

        function closePeerNamingPrompt() {
            const overlay = document.getElementById('peer-name-overlay');
            if (overlay) overlay.remove();
        }

        function submitPeerName() {
            const input = document.getElementById('peer-name-input');
            const name = input?.value?.trim();
            if (!name) return;

            // Send to server
            if (ws && ws.readyState === WebSocket.OPEN) {
                ws.send(JSON.stringify({ type: 'set_peer_name', name }));
            }
            closePeerNamingPrompt();
        }

        function renderDetailTimeline() {
            const windowSize = timeWindowNs * 2;
            let windowStart = currentTime - timeWindowNs;
            let windowEnd = currentTime + timeWindowNs;
            if (windowStart < timeRange.start) { windowStart = timeRange.start; windowEnd = Math.min(timeRange.end, timeRange.start + windowSize); }
            if (windowEnd > timeRange.end) { windowEnd = timeRange.end; windowStart = Math.max(timeRange.start, timeRange.end - windowSize); }
            const windowDuration = windowEnd - windowStart;
            if (windowDuration <= 0) return;

            // Performance: Cache key for detail timeline (quantized to 1-second buckets)
            const timelineBucket = Math.floor(windowStart / 1_000_000_000);
            const detailKey = `${timelineBucket}|${allTransactions.length}|${selectedTransaction?.tx_id || ''}`;
            if (detailKey === lastDetailTimelineKey) {
                return;  // No changes, skip expensive rebuild
            }
            lastDetailTimelineKey = detailKey;

            // Update range label
            const fmt = { hour: '2-digit', minute: '2-digit', second: '2-digit' };
            document.getElementById('detail-range').textContent =
                `${new Date(windowStart / 1_000_000).toLocaleTimeString([], fmt)} to ${new Date(windowEnd / 1_000_000).toLocaleTimeString([], fmt)}`;

            // Render ruler
            const detailRuler = document.getElementById('detail-ruler');
            detailRuler.innerHTML = '';
            const durationSec = windowDuration / 1_000_000_000;
            let tickIntervalMs = durationSec <= 60 ? 10000 : durationSec <= 300 ? 30000 : durationSec <= 600 ? 60000 : 120000;
            const startMs = Math.ceil((windowStart / 1_000_000) / tickIntervalMs) * tickIntervalMs;
            for (let ms = startMs; ms <= windowEnd / 1_000_000; ms += tickIntervalMs) {
                const pos = ((ms * 1_000_000) - windowStart) / windowDuration;
                if (pos < 0 || pos > 1) continue;
                const tick = document.createElement('div');
                tick.className = 'timeline-tick';
                tick.style.cssText = `position:absolute;left:${pos*100}%;transform:translateX(-50%)`;
                tick.textContent = new Date(ms).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' });
                detailRuler.appendChild(tick);
            }

            // Filter transactions with events in window
            const windowTx = allTransactions.filter(tx =>
                tx.end_ns >= windowStart && tx.start_ns <= windowEnd && tx.events && tx.events.length > 0
            );

            // Organize by operation type to match main timeline lanes: PUT, GET, UPD, SUB, CONN
            const opOrder = ['put', 'get', 'update', 'subscribe', 'connect'];
            const lanesByOp = { put: [], get: [], update: [], subscribe: [], connect: [], other: [] };
            windowTx.forEach(tx => {
                const op = tx.op || 'other';
                const targetLane = lanesByOp[op] || lanesByOp.other;
                targetLane.push(tx);
            });

            const lanesContainer = document.getElementById('timeline-lanes');
            lanesContainer.innerHTML = '';
            const laneHeight = 18;
            let currentTop = 0;

            opOrder.forEach(op => {
                const txList = lanesByOp[op];
                if (txList.length === 0) return;

                const laneDiv = document.createElement('div');
                laneDiv.className = 'tx-lane';
                laneDiv.style.top = `${currentTop}px`;
                currentTop += laneHeight;

                txList.forEach(tx => {
                    const events = tx.events || [];
                    if (events.length === 0) return;

                    // Calculate transaction position and width
                    const txStart = Math.max(windowStart, tx.start_ns);
                    const txEnd = Math.min(windowEnd, tx.end_ns || tx.start_ns);
                    const startPos = (txStart - windowStart) / windowDuration;
                    const endPos = (txEnd - windowStart) / windowDuration;

                    const opClass = tx.op || 'other';
                    const statusClass = tx.status === 'pending' ? ' pending' : tx.status === 'failed' ? ' failed' : '';
                    const duration = tx.duration_ms ? `${tx.duration_ms.toFixed(1)}ms` : 'pending';
                    const tooltip = `${tx.op}: ${tx.contract || 'no contract'}\nDuration: ${duration}\nEvents: ${events.length}`;

                    // Create container for the transaction
                    const txContainer = document.createElement('div');
                    txContainer.className = `tx-container ${opClass}${statusClass}`;
                    txContainer.style.cssText = `left:${startPos * 100}%;width:${(endPos - startPos) * 100}%;`;
                    txContainer.title = tooltip;
                    txContainer.onclick = (e) => { e.stopPropagation(); showTransactionDetail(tx); };

                    // Thin line showing transaction duration
                    const txLine = document.createElement('div');
                    txLine.className = `tx-line ${opClass}`;
                    txContainer.appendChild(txLine);

                    // Event pills positioned along the transaction
                    events.forEach(evt => {
                        const evtTime = evt.timestamp;  // Already in nanoseconds
                        if (!evtTime || evtTime < windowStart || evtTime > windowEnd) return;

                        // Position within the transaction container (0-100%)
                        const txDuration = txEnd - txStart;
                        const evtPos = txDuration > 0 ? ((evtTime - txStart) / txDuration) * 100 : 50;

                        const pill = document.createElement('div');
                        pill.className = `tx-pill ${opClass}`;
                        pill.style.left = `${Math.max(0, Math.min(100, evtPos))}%`;
                        txContainer.appendChild(pill);
                    });

                    laneDiv.appendChild(txContainer);
                });
                lanesContainer.appendChild(laneDiv);
            });
        }

        function selectEvent(event) {
            highlightedPeers.clear();

            // Toggle: clicking same event deselects it
            if (selectedEvent === event) {
                selectedEvent = null;
                selectedContract = null;  // Also clear contract selection
                goLive();  // Return to live view when deselecting
                return;
            }

            selectedEvent = event;

            if (event) {
                // Move playhead to event time
                goToTime(event.timestamp);

                // Highlight the event's peer
                if (event.peer_id) {
                    highlightedPeers.add(event.peer_id);
                }

                // Also highlight connection peers
                if (event.connection) {
                    highlightedPeers.add(event.connection[0]);
                    highlightedPeers.add(event.connection[1]);
                }

                // If event has a contract with subscription tree, select it to show the tree
                if (event.contract_full && contractData[event.contract_full]) {
                    selectedContract = event.contract_full;
                } else {
                    selectedContract = null;  // Clear if no contract
                }
            }

            updateView();
        }

        function selectPeer(peerId) {
            if (selectedPeerId === peerId) {
                // Clicking same peer clears selection
                selectedPeerId = null;
            } else {
                selectedPeerId = peerId;
            }
            updateFilterBar();
            updateView();
            updateURL();
        }

        function togglePeerFilter(peerId) {
            if (selectedPeerId === peerId) {
                selectedPeerId = null;
            } else {
                selectedPeerId = peerId;
            }
            updateFilterBar();
            updateView();
            updateURL();
        }

        function toggleTxFilter(txId) {
            if (selectedTxId === txId) {
                selectedTxId = null;
            } else {
                selectedTxId = txId;
            }
            updateFilterBar();
            updateView();
            updateURL();
        }

        function clearPeerSelection() {
            selectedPeerId = null;
            updateView();
        }

        let contractDropdownOpen = false;

        function toggleContractDropdown() {
            contractDropdownOpen = !contractDropdownOpen;
            document.getElementById('contract-menu').classList.toggle('open', contractDropdownOpen);
        }

        // Close dropdown when clicking outside
        document.addEventListener('click', (e) => {
            if (!e.target.closest('#contract-dropdown') && contractDropdownOpen) {
                contractDropdownOpen = false;
                document.getElementById('contract-menu').classList.remove('open');
            }
        });

        function selectContract(contractKey) {
            // Toggle selection if clicking the same contract
            if (selectedContract === contractKey) {
                selectedContract = null;
            } else {
                selectedContract = contractKey || null;
            }

            // Close dropdown
            contractDropdownOpen = false;
            document.getElementById('contract-menu').classList.remove('open');

            // Update filter bar
            updateFilterBar();
            updateView();
            updateURL();
        }

        function updateFilterBar() {
            const chipsContainer = document.getElementById('filter-chips');
            const noFilters = document.getElementById('no-filters');
            const clearAllBtn = document.getElementById('clear-all-btn');

            let chips = [];

            if (selectedPeerId) {
                chips.push(`<span class="filter-chip peer">Peer: ${selectedPeerId.substring(0, 12)}...<button class="filter-chip-close" onclick="clearPeerFilter()">×</button></span>`);
            }

            if (selectedTxId) {
                chips.push(`<span class="filter-chip tx">Tx: ${selectedTxId.substring(0, 8)}...<button class="filter-chip-close" onclick="clearTxFilter()">×</button></span>`);
            }

            if (selectedContract && contractData[selectedContract]) {
                const shortKey = contractData[selectedContract].short_key;
                chips.push(`<span class="filter-chip contract">Contract: ${shortKey}<button class="filter-chip-close" onclick="clearContractFilter()">×</button></span>`);
            }

            chipsContainer.innerHTML = chips.join('');

            const hasFilters = chips.length > 0 || filterText;
            noFilters.style.display = hasFilters ? 'none' : 'inline';
            clearAllBtn.style.display = hasFilters ? 'inline-block' : 'none';
        }

        function clearPeerFilter() {
            selectedPeerId = null;
            updateFilterBar();
            updateView();
            updateURL();
        }

        function clearTxFilter() {
            selectedTxId = null;
            updateFilterBar();
            updateView();
            updateURL();
        }

        function clearContractFilter() {
            selectedContract = null;
            updateFilterBar();
            updateView();
            updateURL();
        }

        function clearAllFilters() {
            selectedPeerId = null;
            selectedTxId = null;
            selectedContract = null;
            filterText = '';
            updateFilterBar();
            updateView();
            updateURL();
        }

        // URL state encoding - allows sharing dashboard state via URL
        let urlLoaded = false;

        function updateURL() {
            if (!urlLoaded) return;  // Don't update URL before initial load completes

            const params = new URLSearchParams();

            if (selectedContract) {
                // Use first 16 chars of contract key for URL brevity
                params.set('contract', selectedContract.substring(0, 16));
            }
            if (selectedPeerId) {
                params.set('peer', selectedPeerId.substring(0, 16));
            }
            if (selectedTxId) {
                params.set('tx', selectedTxId.substring(0, 12));
            }
            if (activeTab !== 'events') {
                params.set('tab', activeTab);
            }
            if (!isLive && currentTime) {
                // Store time as ISO string for readability
                params.set('time', new Date(currentTime / 1_000_000).toISOString());
            }

            const queryString = params.toString();
            const newUrl = queryString ? `?${queryString}` : window.location.pathname;
            history.replaceState(null, '', newUrl);
        }

        function loadFromURL() {
            const params = new URLSearchParams(window.location.search);

            // Restore contract selection (match partial key)
            const contractParam = params.get('contract');
            if (contractParam && contractData) {
                const match = Object.keys(contractData).find(k => k.startsWith(contractParam));
                if (match) {
                    selectedContract = match;
                    console.log('Restored contract from URL:', match.substring(0, 16));
                }
            }

            // Restore peer selection (match partial ID)
            const peerParam = params.get('peer');
            if (peerParam && initialStatePeers) {
                const match = initialStatePeers.find(p => p.id && p.id.startsWith(peerParam));
                if (match) {
                    selectedPeerId = match.id;
                    console.log('Restored peer from URL:', match.id.substring(0, 16));
                }
            }

            // Restore transaction filter (match partial ID)
            const txParam = params.get('tx');
            if (txParam && allTransactions) {
                const match = allTransactions.find(t => t.tx_id && t.tx_id.startsWith(txParam));
                if (match) {
                    selectedTxId = match.tx_id;
                    console.log('Restored tx from URL:', match.tx_id.substring(0, 12));
                }
            }

            // Restore tab
            const tabParam = params.get('tab');
            if (tabParam && ['events', 'contracts', 'transactions', 'peers'].includes(tabParam)) {
                switchTab(tabParam);
            }

            // Restore time (pauses live mode)
            const timeParam = params.get('time');
            if (timeParam) {
                try {
                    const timestamp = new Date(timeParam).getTime() * 1_000_000;
                    if (!isNaN(timestamp) && timestamp > 0) {
                        currentTime = timestamp;
                        isLive = false;
                        document.getElementById('live-btn').classList.remove('active');
                        console.log('Restored time from URL:', timeParam);
                    }
                } catch (e) {
                    console.warn('Invalid time in URL:', timeParam);
                }
            }

            urlLoaded = true;
            updateFilterBar();
            updateView();
        }

        // Tab switching
        let activeTab = 'contracts';

        function switchTab(tabName) {
            activeTab = tabName;

            // Update tab buttons
            document.querySelectorAll('.panel-tab').forEach(tab => {
                tab.classList.toggle('active', tab.id === `tab-${tabName}`);
            });

            // Update tab content
            document.querySelectorAll('.tab-content').forEach(content => {
                content.classList.toggle('active', content.id === `tab-content-${tabName}`);
            });

            // Render contracts if switching to that tab
            if (tabName === 'contracts') {
                renderContractsList();
            }

            updateURL();
        }

        function renderContractsList() {
            const list = document.getElementById('contracts-list');
            const allContracts = Object.keys(contractData);

            // Show all contracts, only filtered by search text
            let filteredContracts = allContracts;
            if (contractSearchText) {
                const searchLower = contractSearchText.toLowerCase();
                filteredContracts = allContracts.filter(key =>
                    key.toLowerCase().startsWith(searchLower)
                );
            }

            // Update tab count
            const countLabel = document.getElementById('contract-tab-count');
            if (filteredContracts.length === allContracts.length) {
                countLabel.textContent = allContracts.length;
            } else {
                countLabel.textContent = `${filteredContracts.length}/${allContracts.length}`;
            }

            if (filteredContracts.length === 0) {
                list.innerHTML = `
                    <div class="empty-state">
                        <div class="empty-state-icon">&#128230;</div>
                        <div>${contractSearchText ? 'No matching contracts' : 'No contracts tracked'}</div>
                    </div>
                `;
                return;
            }

            // Sort contracts by activity (most active first)
            const sortedContracts = filteredContracts.sort((a, b) => {
                const aData = contractData[a];
                const bData = contractData[b];
                const aActivity = getContractActivity(a);
                const bActivity = getContractActivity(b);
                // Score: recent updates (high weight), seeding, then network stats
                const aScore = (aActivity.recentUpdates * 5) + (aActivity.totalUpdates) +
                    (aData.any_seeding ? 10 : 0) + (aData.total_downstream || 0);
                const bScore = (bActivity.recentUpdates * 5) + (bActivity.totalUpdates) +
                    (bData.any_seeding ? 10 : 0) + (bData.total_downstream || 0);
                return bScore - aScore;
            });

            list.innerHTML = sortedContracts.map(key => {
                const data = contractData[key];
                const isSelected = selectedContract === key;
                const peerStates = data.peer_states || [];
                const totalDownstream = data.total_downstream || 0;
                const anySeeding = data.any_seeding || false;

                // Get propagation data for this contract
                const prop = propagationData[key];
                const states = contractStates[key] || {};
                const peerStateHashes = Object.entries(states);

                // Count seeding peers
                const seedingPeers = peerStates.filter(p => p.is_seeding).length;

                // Get activity stats from events
                const activity = getContractActivity(key);

                // Build stats display - two rows
                let statsRow1 = [];
                let statsRow2 = [];

                // Row 1: Propagation visualization
                if (prop && prop.timeline && prop.timeline.length > 0) {
                    const sparkline = renderPropagationSparkline(prop.timeline, prop.peer_count);
                    const propagationMs = prop.propagation_ms;
                    const propagationStr = propagationMs < 1000
                        ? `${propagationMs}ms`
                        : `${(propagationMs / 1000).toFixed(1)}s`;
                    const timeAgo = formatRelativeTime(prop.first_seen * 1000);
                    const shortHash = prop.hash.substring(0, 6);

                    statsRow1.push(`
                        <span class="propagation-info" title="State ${prop.hash}&#10;Changed: ${timeAgo}&#10;Spread to ${prop.peer_count} peers in ${propagationStr}">
                            <span class="propagation-sparkline">${sparkline}</span>
                            <span class="propagation-stats">${prop.peer_count} peers · ${propagationStr}</span>
                            <span class="state-hash">[${shortHash}]</span>
                        </span>
                    `);

                    if (timeAgo) {
                        statsRow1.push(`<span class="contract-stat last-update" title="State last changed">&#128337; ${timeAgo}</span>`);
                    }
                } else if (peerStateHashes.length > 0) {
                    // Fallback to old display if no propagation data
                    const latestHash = peerStateHashes.sort((a, b) => b[1].timestamp - a[1].timestamp)[0][1].hash;
                    const shortHash = latestHash.substring(0, 6);
                    statsRow1.push(`<span class="state-hash" title="Full state hash: ${latestHash}">[${shortHash}]</span>`);
                }

                // Row 2: Network stats - simplified subscription info
                const totalSubscribed = peerStates.length;

                if (totalSubscribed > 0) {
                    // Show total subscribed peers
                    const subTooltip = `${totalSubscribed} peer${totalSubscribed > 1 ? 's' : ''} subscribed to this contract`;
                    statsRow2.push(`<span class="contract-stat" title="${subTooltip}"><span class="contract-stat-icon subscribe">&#9733;</span> ${totalSubscribed} subscribed</span>`);
                }

                if (seedingPeers > 0) {
                    const tooltip = seedingPeers === 1
                        ? 'Peer hosting original contract data'
                        : `${seedingPeers} peers hosting original contract data`;
                    statsRow2.push(`<span class="contract-stat" title="${tooltip}"><span class="contract-stat-icon seeding">&#9679;</span> ${seedingPeers} seeder${seedingPeers > 1 ? 's' : ''}</span>`);
                }

                // Activity stats
                if (activity.recentUpdates > 0) {
                    statsRow2.push(`<span class="contract-stat activity" title="Updates received in the last hour">&#9889; ${activity.recentUpdates} updates/hr</span>`);
                }

                const allStats = statsRow1.concat(statsRow2);

                return `
                    <div class="contract-item ${isSelected ? 'selected' : ''}" onclick="selectContract('${key}')">
                        <div class="contract-key">${data.short_key}</div>
                        <div class="contract-stats">${allStats.join('') || '<span style="color:var(--text-muted)">No activity</span>'}</div>
                    </div>
                `;
            }).join('');
        }

        function selectContract(contractKey) {
            // Toggle selection
            if (selectedContract === contractKey) {
                selectedContract = null;
            } else {
                selectedContract = contractKey;
            }

            // Update visuals
            renderContractsList();
            updateFilterBar();
            updateView();
            updateURL();
        }

        function formatLatency(ms) {
            if (ms === null || ms === undefined) return '-';
            if (ms < 1000) return Math.round(ms) + 'ms';
            return (ms / 1000).toFixed(1) + 's';
        }

        // Track a transaction from an incoming event (frontend-side transaction tracking)
        function trackTransactionFromEvent(event) {
            const txId = event.tx_id;
            if (!txId || txId === '00000000000000000000000000') return;

            const eventType = event.event_type || '';
            const timestamp = event.timestamp;

            // Determine operation type and status from event type
            let op = 'other';
            let isStart = false;
            let isEnd = false;
            let status = null;

            if (eventType.startsWith('put_')) {
                op = 'put';
                if (eventType === 'put_request') isStart = true;
                else if (eventType === 'put_success') { isEnd = true; status = 'success'; }
            } else if (eventType.startsWith('get_')) {
                op = 'get';
                if (eventType === 'get_request') isStart = true;
                else if (eventType === 'get_success') { isEnd = true; status = 'success'; }
                else if (eventType === 'get_not_found') { isEnd = true; status = 'not_found'; }
            } else if (eventType.startsWith('update_')) {
                op = 'update';
                if (eventType === 'update_request') isStart = true;
                else if (eventType === 'update_success') { isEnd = true; status = 'success'; }
            } else if (eventType.startsWith('subscribe')) {
                op = 'subscribe';
                if (eventType === 'subscribe_request') isStart = true;
                else if (eventType === 'subscribed') { isEnd = true; status = 'success'; }
            } else if (eventType.includes('connect')) {
                op = 'connect';
                if (eventType === 'connect_request_sent') isStart = true;
                else if (eventType === 'connect_connected') { isEnd = true; status = 'success'; }
            } else if (eventType === 'disconnect') {
                op = 'disconnect';
                isStart = true; isEnd = true; status = 'complete';
            }

            // Check if transaction already exists
            if (transactionMap.has(txId)) {
                const idx = transactionMap.get(txId);
                const tx = allTransactions[idx];

                // Add event to transaction
                tx.events.push({
                    event_type: eventType,
                    timestamp: timestamp,
                    peer_id: event.peer_id
                });
                tx.event_count = tx.events.length;

                // Update end time and status
                if (timestamp > tx.end_ns) {
                    tx.end_ns = timestamp;
                }
                if (isEnd && status) {
                    tx.status = status;
                    tx.duration_ms = (tx.end_ns - tx.start_ns) / 1_000_000;
                }
            } else {
                // Create new transaction
                const newTx = {
                    tx_id: txId,
                    op: op,
                    contract: event.contract_full ? event.contract_full.substring(0, 12) + '...' : null,
                    contract_full: event.contract_full || null,
                    start_ns: timestamp,
                    end_ns: timestamp,
                    duration_ms: null,
                    status: (isStart && !isEnd) ? 'pending' : (status || 'complete'),
                    event_count: 1,
                    events: [{
                        event_type: eventType,
                        timestamp: timestamp,
                        peer_id: event.peer_id
                    }]
                };
                transactionMap.set(txId, allTransactions.length);
                allTransactions.push(newTx);

                // Prune old transactions to prevent unbounded memory growth
                const MAX_TRANSACTIONS = 5000;
                if (allTransactions.length > MAX_TRANSACTIONS * 1.1) {
                    const removeCount = allTransactions.length - MAX_TRANSACTIONS;
                    // Remove oldest transactions and rebuild index map
                    const removed = allTransactions.splice(0, removeCount);
                    removed.forEach(tx => transactionMap.delete(tx.tx_id));
                    // Rebuild index map (splice shifts indices)
                    transactionMap.clear();
                    allTransactions.forEach((tx, idx) => transactionMap.set(tx.tx_id, idx));
                }
            }
        }

        function getRateClass(rate) {
            if (rate === null || rate === undefined) return '';
            if (rate >= 90) return 'good';
            if (rate >= 50) return 'warn';
            return 'bad';
        }

        function updateOpStats() {
            if (!opStats) return;

            // PUT
            const put = opStats.put;
            document.getElementById('put-rate').textContent = put.success_rate !== null ? put.success_rate + '%' : '-';
            document.getElementById('put-rate').className = 'op-stat-rate ' + getRateClass(put.success_rate);
            document.getElementById('put-total').textContent = put.total || 0;
            document.getElementById('put-p50').textContent = formatLatency(put.latency?.p50);

            // GET
            const get = opStats.get;
            document.getElementById('get-rate').textContent = get.success_rate !== null ? get.success_rate + '%' : '-';
            document.getElementById('get-rate').className = 'op-stat-rate ' + getRateClass(get.success_rate);
            document.getElementById('get-total').textContent = get.total || 0;
            document.getElementById('get-miss').textContent = get.not_found || 0;

            // UPDATE
            const update = opStats.update;
            document.getElementById('update-rate').textContent = update.success_rate !== null ? update.success_rate + '%' : '-';
            document.getElementById('update-rate').className = 'op-stat-rate ' + getRateClass(update.success_rate);
            document.getElementById('update-total').textContent = update.total || 0;
            document.getElementById('update-bcast').textContent = update.broadcasts || 0;

            // SUBSCRIBE
            const sub = opStats.subscribe;
            document.getElementById('sub-total').textContent = sub.total || 0;
        }

        function updatePeerLifecycleStats() {
            if (!peerLifecycle) return;

            // Log version distribution for debugging
            console.log('Version distribution:', peerLifecycle.versions);

            // Could add UI elements to display this info later
            // For now, the data is available in the peerLifecycle global
        }

        function updateContractDropdown() {
            // Contract dropdown has been replaced by Subscriptions tab
            // This function is kept for compatibility but is now a no-op
        }

        function reconstructStateAtTime(targetTime) {
            const peers = new Map();
            const connections = new Set();

            // Activity window: ±5 minutes around target time
            const ACTIVITY_WINDOW_NS = 5 * 60 * 1_000_000_000;
            const windowStart = targetTime - ACTIVITY_WINDOW_NS;
            const windowEnd = targetTime + ACTIVITY_WINDOW_NS;

            // Find peers active near target time (have events within window)
            // Also build peer info map from peer_presence for location data
            const peerInfo = new Map();
            for (const p of peerPresence) {
                peerInfo.set(p.id, {
                    location: p.location,
                    ip_hash: p.ip_hash,
                    peer_id: p.peer_id  // Real peer_id for lifecycle lookup
                });
            }

            // Scan events to find active peers and connections
            // We need to scan ALL events up to targetTime to track connection lifecycle
            for (const event of allEvents) {
                // Stop scanning once past the window (for peer activity)
                // but we still need to process connection/disconnection up to targetTime
                if (event.timestamp > windowEnd) break;

                // Check if event is within activity window for peer tracking
                const inWindow = event.timestamp >= windowStart && event.timestamp <= windowEnd;

                if (inWindow && event.peer_id) {
                    const info = peerInfo.get(event.peer_id);
                    if (info) {
                        // Use info which has the real peer_id from peer_presence
                        peers.set(event.peer_id, info);
                    } else if (event.location !== undefined) {
                        peers.set(event.peer_id, {
                            location: event.location,
                            ip_hash: event.peer_ip_hash
                            // Note: no peer_id available without peer_presence data
                        });
                    }
                }

                // Track connection lifecycle up to target time
                if (event.timestamp <= targetTime) {
                    // Add connections when connected
                    if (event.connection) {
                        const key = [event.connection[0], event.connection[1]].sort().join('|');
                        connections.add(key);
                    }
                    // Remove connections when disconnected
                    if (event.disconnection) {
                        const key = [event.disconnection[0], event.disconnection[1]].sort().join('|');
                        connections.delete(key);
                    }
                }
            }

            return { peers, connections };
        }

        function updateRingSVG(peers, connections, subscriberPeerIds = new Set()) {
            // Cache peers for hover canvas updates
            cachedPeersMap = peers;

            // Initialize hover canvas overlay (lazy init)
            initHoverCanvas();

            // Performance: Throttle SVG rebuilds to max 1/second (topology changes are slow to perceive)
            const now = performance.now();
            const timeSinceLastRebuild = now - lastSvgRebuildTime;

            // Performance: Skip rebuild if state hasn't changed
            // Note: hoveredEvent handled by Canvas overlay, not included in state comparison
            const currentState = JSON.stringify({
                peers: Array.from(peers.entries()).map(([id, p]) => [id, p.location]),
                connections: Array.from(connections).sort(),
                subscribers: Array.from(subscriberPeerIds).sort(),
                selectedContract,
                selectedPeerId,
                selectedEvent: selectedEvent?.timestamp,
                highlightedPeers: Array.from(highlightedPeers).sort()
            });

            if (currentState === lastSvgState) {
                // Still update hover canvas even if SVG unchanged
                updateHoverCanvas(peers);
                return;  // No changes, skip expensive SVG rebuild
            }

            // Throttle: skip if we rebuilt recently (unless user interaction changed state)
            const isUserInteraction = selectedPeerId !== null || selectedContract !== null ||
                                      selectedEvent !== null;
            if (!isUserInteraction && timeSinceLastRebuild < SVG_REBUILD_INTERVAL_MS) {
                updateHoverCanvas(peers);
                return;  // Skip - will catch up on next scheduled update
            }

            lastSvgState = currentState;
            lastSvgRebuildTime = now;

            const container = document.getElementById('ring-container');
            const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
            svg.setAttribute('viewBox', `0 0 ${SVG_WIDTH} ${SVG_SIZE}`);
            svg.setAttribute('width', SVG_WIDTH);
            svg.setAttribute('height', SVG_SIZE);

            // Defs for glow effect and arrow markers
            const defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs');
            defs.innerHTML = `
                <filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
                    <feGaussianBlur stdDeviation="3" result="coloredBlur"/>
                    <feMerge>
                        <feMergeNode in="coloredBlur"/>
                        <feMergeNode in="SourceGraphic"/>
                    </feMerge>
                </filter>
                <linearGradient id="ringGrad" x1="0%" y1="0%" x2="100%" y2="100%">
                    <stop offset="0%" style="stop-color:#1a2a2a;stop-opacity:1" />
                    <stop offset="100%" style="stop-color:#0a1515;stop-opacity:1" />
                </linearGradient>
                <marker id="arrow-connect" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto">
                    <polygon points="0 0, 8 3, 0 6" fill="#7ecfef"/>
                </marker>
                <marker id="arrow-put" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto">
                    <polygon points="0 0, 8 3, 0 6" fill="#fbbf24"/>
                </marker>
                <marker id="arrow-get" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto">
                    <polygon points="0 0, 8 3, 0 6" fill="#34d399"/>
                </marker>
                <marker id="arrow-update" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto">
                    <polygon points="0 0, 8 3, 0 6" fill="#a78bfa"/>
                </marker>
                <marker id="arrow-subscribe" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto">
                    <polygon points="0 0, 8 3, 0 6" fill="#f472b6"/>
                </marker>
                <marker id="arrow-other" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto">
                    <polygon points="0 0, 8 3, 0 6" fill="#8b949e"/>
                </marker>
            `;
            svg.appendChild(defs);

            // Outer glow ring
            const glowRing = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
            glowRing.setAttribute('cx', CENTER);
            glowRing.setAttribute('cy', CENTER);
            glowRing.setAttribute('r', RADIUS + 5);
            glowRing.setAttribute('fill', 'none');
            glowRing.setAttribute('stroke', 'rgba(0, 212, 170, 0.1)');
            glowRing.setAttribute('stroke-width', '20');
            svg.appendChild(glowRing);

            // Background ring
            const ring = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
            ring.setAttribute('cx', CENTER);
            ring.setAttribute('cy', CENTER);
            ring.setAttribute('r', RADIUS);
            ring.setAttribute('fill', 'none');
            ring.setAttribute('stroke', '#1a2a2a');
            ring.setAttribute('stroke-width', '3');
            svg.appendChild(ring);

            // Inner reference circles
            [0.6, 0.3].forEach((scale, i) => {
                const inner = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
                inner.setAttribute('cx', CENTER);
                inner.setAttribute('cy', CENTER);
                inner.setAttribute('r', RADIUS * scale);
                inner.setAttribute('fill', 'none');
                inner.setAttribute('stroke', 'rgba(255,255,255,0.03)');
                inner.setAttribute('stroke-width', '1');
                inner.setAttribute('stroke-dasharray', '4,8');
                svg.appendChild(inner);
            });

            // Location markers
            [0, 0.25, 0.5, 0.75].forEach(loc => {
                const angle = loc * 2 * Math.PI - Math.PI / 2;
                const x = CENTER + (RADIUS + 25) * Math.cos(angle);
                const y = CENTER + (RADIUS + 25) * Math.sin(angle);

                const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
                text.setAttribute('x', x);
                text.setAttribute('y', y);
                text.setAttribute('fill', '#484f58');
                text.setAttribute('font-size', '12');
                text.setAttribute('font-family', 'JetBrains Mono, monospace');
                text.setAttribute('text-anchor', 'middle');
                text.setAttribute('dominant-baseline', 'middle');
                text.textContent = loc.toFixed(2);
                svg.appendChild(text);
            });

            // Draw contract location indicator when a contract is selected
            if (selectedContract) {
                const contractLocation = contractKeyToLocation(selectedContract);
                if (contractLocation !== null) {
                    const angle = contractLocation * 2 * Math.PI - Math.PI / 2;

                    // Draw diamond marker centered on the ring
                    const ringX = CENTER + RADIUS * Math.cos(angle);
                    const ringY = CENTER + RADIUS * Math.sin(angle);
                    const diamond = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
                    const size = 7;
                    diamond.setAttribute('points', `${ringX},${ringY-size} ${ringX+size},${ringY} ${ringX},${ringY+size} ${ringX-size},${ringY}`);
                    diamond.setAttribute('fill', '#f472b6');
                    diamond.setAttribute('stroke', '#fff');
                    diamond.setAttribute('stroke-width', '1.5');
                    diamond.setAttribute('style', 'cursor: pointer;');

                    // Add tooltip with contract info
                    const title = document.createElementNS('http://www.w3.org/2000/svg', 'title');
                    const shortKey = selectedContract.substring(0, 12) + '...';
                    title.textContent = `Location of contract ${shortKey}\n@ ${contractLocation.toFixed(4)}`;
                    diamond.appendChild(title);

                    svg.appendChild(diamond);
                }
            }

            // Draw connections and collect distances for mini-chart
            const connectionDistances = [];
            const CONN_HIDE_THRESHOLD = 50;  // Hide all connections above this peer count
            const CONN_ANIM_THRESHOLD = 30;  // Disable CSS animations above this peer count
            const showAllConnections = peers.size <= CONN_HIDE_THRESHOLD;
            const animateConnections = peers.size <= CONN_ANIM_THRESHOLD;

            // Determine which connections to draw:
            // - Small networks: all connections
            // - Large networks: only connections for clicked/selected peer
            // (hover not used here - it's handled by canvas overlay for performance)
            const focusPeerId = selectedPeerId || null;

            connections.forEach(connKey => {
                const [id1, id2] = connKey.split('|');
                const peer1 = peers.get(id1);
                const peer2 = peers.get(id2);
                if (peer1 && peer2) {
                    // Always calculate distances for the chart
                    const rawDist = Math.abs(peer1.location - peer2.location);
                    const distance = Math.min(rawDist, 1 - rawDist);
                    connectionDistances.push(distance);

                    // Decide whether to draw this connection
                    const isFocusConn = focusPeerId && (id1 === focusPeerId || id2 === focusPeerId);
                    if (!showAllConnections && !isFocusConn) return;

                    const pos1 = locationToXY(peer1.location);
                    const pos2 = locationToXY(peer2.location);

                    // Create group for line + hit area
                    const lineGroup = document.createElementNS("http://www.w3.org/2000/svg", "g");

                    const line = document.createElementNS("http://www.w3.org/2000/svg", "line");
                    line.setAttribute('x1', pos1.x);
                    line.setAttribute('y1', pos1.y);
                    line.setAttribute('x2', pos2.x);
                    line.setAttribute('y2', pos2.y);
                    line.setAttribute('class', animateConnections ? 'connection-line animated' : 'connection-line');
                    if (isFocusConn && !showAllConnections) {
                        line.setAttribute('stroke-opacity', '0.6');
                    }

                    // Add tooltip showing peer IDs and distance
                    const connTitle = document.createElementNS('http://www.w3.org/2000/svg', 'title');
                    connTitle.textContent = 'Network connection: ' + id1.substring(0,8) + ' ↔ ' + id2.substring(0,8) + ' (dist: ' + distance.toFixed(3) + ')';
                    line.appendChild(connTitle);

                    // Add invisible wider hit area for easier tooltip triggering
                    const hitArea = document.createElementNS("http://www.w3.org/2000/svg", "line");
                    hitArea.setAttribute("x1", pos1.x);
                    hitArea.setAttribute("y1", pos1.y);
                    hitArea.setAttribute("x2", pos2.x);
                    hitArea.setAttribute("y2", pos2.y);
                    hitArea.setAttribute("stroke", "transparent");
                    hitArea.setAttribute("stroke-width", "12");
                    hitArea.appendChild(connTitle.cloneNode(true));

                    lineGroup.appendChild(line);
                    lineGroup.appendChild(hitArea);
                    svg.appendChild(lineGroup);
                }
            });
            // Draw distance distribution mini-chart (vertical, on right side)
            if (connectionDistances.length > 0) {
                const chartW = 55;   // Narrow
                const chartH = 180;  // Tall
                const chartX = SVG_SIZE + 15;  // In the extra space to the right of ring
                const chartY = (SVG_SIZE - chartH) / 2;  // Vertically centered
                const plotW = 35;    // Width for dots
                const plotX = chartX + 16;  // After labels

                // Background
                const chartBg = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
                chartBg.setAttribute('x', chartX);
                chartBg.setAttribute('y', chartY);
                chartBg.setAttribute('width', chartW);
                chartBg.setAttribute('height', chartH);
                chartBg.setAttribute('rx', '4');
                chartBg.setAttribute('fill', 'rgba(15, 20, 25, 0.85)');
                chartBg.setAttribute('stroke', 'rgba(255,255,255,0.1)');
                chartBg.setAttribute('stroke-width', '1');
                const chartTooltip = document.createElementNS('http://www.w3.org/2000/svg', 'title');
                chartTooltip.textContent = 'Connection distance distribution. Dots show actual peer connections. Curve shows expected 1/d small-world distribution where closer peers connect more often.';
                chartBg.appendChild(chartTooltip);
                svg.appendChild(chartBg);

                // Title at top
                const chartTitle = document.createElementNS('http://www.w3.org/2000/svg', 'text');
                chartTitle.setAttribute('x', chartX + chartW / 2);
                chartTitle.setAttribute('y', chartY - 4);
                chartTitle.setAttribute('fill', '#8b949e');
                chartTitle.setAttribute('font-size', '9');
                chartTitle.setAttribute('font-family', 'JetBrains Mono, monospace');
                chartTitle.setAttribute('text-anchor', 'middle');
                chartTitle.textContent = 'dist';
                svg.appendChild(chartTitle);

                // Stats text (avg distance) at bottom
                const avgDist = connectionDistances.reduce((a, b) => a + b, 0) / connectionDistances.length;
                const statsText = document.createElementNS('http://www.w3.org/2000/svg', 'text');
                statsText.setAttribute('x', chartX + chartW / 2);
                statsText.setAttribute('y', chartY + chartH + 12);
                statsText.setAttribute('fill', '#6e7681');
                statsText.setAttribute('font-size', '8');
                statsText.setAttribute('font-family', 'JetBrains Mono, monospace');
                statsText.setAttribute('text-anchor', 'middle');
                statsText.textContent = 'avg=' + avgDist.toFixed(2);
                svg.appendChild(statsText);

                // Draw 1/d expected density curve (faint background)
                const curvePoints = [];
                const curveSteps = 30;
                const minDist = 0.02;
                for (let i = 0; i <= curveSteps; i++) {
                    const d = minDist + (0.5 - minDist) * (i / curveSteps);
                    const y = chartY + 4 + (d / 0.5) * (chartH - 8);
                    // 1/d curve, scaled to fit horizontally
                    const density = 1 / d;
                    const maxDensity = 1 / minDist;
                    const x = plotX + (density / maxDensity) * (plotW - 4);
                    curvePoints.push((i === 0 ? 'M' : 'L') + ' ' + x + ' ' + y);
                }
                const curve = document.createElementNS('http://www.w3.org/2000/svg', 'path');
                curve.setAttribute('d', curvePoints.join(' '));
                curve.setAttribute('fill', 'none');
                curve.setAttribute('stroke', 'rgba(0, 212, 170, 0.25)');
                curve.setAttribute('stroke-width', '1.5');
                svg.appendChild(curve);

                // Vertical axis line
                const axisLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');
                axisLine.setAttribute('x1', plotX);
                axisLine.setAttribute('y1', chartY + 4);
                axisLine.setAttribute('x2', plotX);
                axisLine.setAttribute('y2', chartY + chartH - 4);
                axisLine.setAttribute('stroke', 'rgba(255,255,255,0.2)');
                axisLine.setAttribute('stroke-width', '1');
                svg.appendChild(axisLine);

                // Axis labels (vertical)
                ['0', '.25', '.5'].forEach((label, i) => {
                    const ly = chartY + 6 + (i / 2) * (chartH - 12);
                    const axisLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text');
                    axisLabel.setAttribute('x', chartX + 4);
                    axisLabel.setAttribute('y', ly + 3);
                    axisLabel.setAttribute('fill', '#484f58');
                    axisLabel.setAttribute('font-size', '8');
                    axisLabel.setAttribute('font-family', 'JetBrains Mono, monospace');
                    axisLabel.setAttribute('text-anchor', 'start');
                    axisLabel.textContent = label;
                    svg.appendChild(axisLabel);
                });

                // Draw histogram bars instead of per-connection dots (scales to 1000+ connections)
                const numBins = 20;
                const binSize = 0.5 / numBins;
                const bins = new Array(numBins).fill(0);
                connectionDistances.forEach(d => {
                    const binIdx = Math.min(Math.floor(d / binSize), numBins - 1);
                    bins[binIdx]++;
                });
                const maxBinCount = Math.max(...bins, 1);

                bins.forEach((count, i) => {
                    if (count === 0) return;
                    const y = chartY + 4 + (i / numBins) * (chartH - 8);
                    const barH = Math.max(2, ((chartH - 8) / numBins) - 1);
                    const barW = (count / maxBinCount) * (plotW - 4);

                    const bar = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
                    bar.setAttribute('x', plotX + 2);
                    bar.setAttribute('y', y);
                    bar.setAttribute('width', barW);
                    bar.setAttribute('height', barH);
                    bar.setAttribute('fill', '#a78bfa');
                    bar.setAttribute('opacity', '0.75');
                    bar.setAttribute('rx', '1');

                    const barTitle = document.createElementNS('http://www.w3.org/2000/svg', 'title');
                    const binStart = (i * binSize).toFixed(3);
                    const binEnd = ((i + 1) * binSize).toFixed(3);
                    barTitle.textContent = `Distance ${binStart}-${binEnd}: ${count} connections`;
                    bar.appendChild(barTitle);

                    svg.appendChild(bar);
                });
            }
            // Draw highlighted connection for hovered event (from_peer -> to_peer)
            if (hoveredEvent) {
                const fromPeer = hoveredEvent.from_peer || hoveredEvent.peer_id;
                const toPeer = hoveredEvent.to_peer;
                if (fromPeer && toPeer && fromPeer !== toPeer) {
                    // Find peer positions
                    let fromPos = null, toPos = null;
                    peers.forEach((peer, id) => {
                        if (id === fromPeer || peer.peer_id === fromPeer) {
                            fromPos = locationToXY(peer.location);
                        }
                        if (id === toPeer || peer.peer_id === toPeer) {
                            toPos = locationToXY(peer.location);
                        }
                    });
                    if (fromPos && toPos) {
                        // Create group for line + hit area
                    const lineGroup = document.createElementNS("http://www.w3.org/2000/svg", "g");

                    const line = document.createElementNS("http://www.w3.org/2000/svg", "line");
                        line.setAttribute('x1', fromPos.x);
                        line.setAttribute('y1', fromPos.y);
                        line.setAttribute('x2', toPos.x);
                        line.setAttribute('y2', toPos.y);
                        line.setAttribute('stroke', '#fbbf24');
                        line.setAttribute('stroke-width', '3');
                        line.setAttribute('stroke-opacity', '0.8');
                        // Add invisible wider hit area for easier tooltip triggering
                    const hitArea = document.createElementNS("http://www.w3.org/2000/svg", "line");
                    hitArea.setAttribute("x1", pos1.x);
                    hitArea.setAttribute("y1", pos1.y);
                    hitArea.setAttribute("x2", pos2.x);
                    hitArea.setAttribute("y2", pos2.y);
                    hitArea.setAttribute("stroke", "transparent");
                    hitArea.setAttribute("stroke-width", "12");
                    hitArea.appendChild(connTitle.cloneNode(true));

                    lineGroup.appendChild(line);
                    lineGroup.appendChild(hitArea);
                    svg.appendChild(lineGroup);
                    }
                }
            }

            // Build set of peers connected to the selected peer (for smart label display)
            const connectedToSelected = new Set();
            if (selectedPeerId) {
                connections.forEach(connKey => {
                    const [id1, id2] = connKey.split('|');
                    if (id1 === selectedPeerId) connectedToSelected.add(id2);
                    if (id2 === selectedPeerId) connectedToSelected.add(id1);
                });
            }

            // Collect labels in first pass, render with collision avoidance after
            const pendingLabels = [];
            const MIN_LABEL_ANGLE_GAP = 0.08; // Minimum gap in location units (0-1) between labels (~29 degrees)
            const MAX_LABELS = 12; // Cap total labels to avoid clutter
            const usedLabelSlots = []; // Track locations of rendered labels

            // Draw peers
            peers.forEach((peer, id) => {
                const pos = locationToXY(peer.location);
                // Check both anonymized ID (id) and telemetry ID (peer.peer_id) for highlighting
                const isHighlighted = highlightedPeers.has(id) || highlightedPeers.has(peer.peer_id);
                const isEventSelected = selectedEvent && (selectedEvent.peer_id === id || selectedEvent.peer_id === peer.peer_id);
                const isPeerSelected = selectedPeerId === id;
                // Check if peer is part of the hovered event (from or to)
                const isEventHovered = hoveredEvent && (
                    (hoveredEvent.from_peer === id || hoveredEvent.from_peer === peer.peer_id) ||
                    (hoveredEvent.to_peer === id || hoveredEvent.to_peer === peer.peer_id) ||
                    (hoveredEvent.peer_id === id || hoveredEvent.peer_id === peer.peer_id)
                );
                // Check if peer is a gateway by multiple methods:
                // 1. Direct is_gateway flag from server state (most reliable)
                // 2. Lifecycle data lookup
                // 3. Legacy gatewayPeerId match
                const lifecyclePeer = peerLifecycle?.peers?.find(p => p.peer_id === peer.peer_id);
                const isGateway = peer.is_gateway || lifecyclePeer?.is_gateway || id === gatewayPeerId;
                const isYou = id === yourPeerId;
                const isSubscriber = subscriberPeerIds.has(id);

                // Determine colors based on peer type
                let fillColor = '#007FFF';  // Default peer blue
                let glowColor = 'rgba(0, 127, 255, 0.2)';
                let label = '';
                let peerStateHash = null;
                let isNonSubscriber = false;  // Track if peer is not a subscriber (for hollow rendering)

                // When a contract is selected, show subscribers prominently
                if (selectedContract) {
                    if (isSubscriber) {
                        // Subscriber - get state hash for inner indicator circle
                        // contractStates is keyed by telemetry peer ID (peer.peer_id)
                        if (contractStates[selectedContract] && peer.peer_id) {
                            const peerState = contractStates[selectedContract][peer.peer_id];
                            if (peerState && peerState.hash) {
                                peerStateHash = peerState.hash;
                            }
                        }
                        // Subscriber base color is pink (state shown via inner circle)
                        fillColor = '#f472b6';
                        glowColor = 'rgba(244, 114, 182, 0.3)';
                    } else {
                        // Not a subscriber - show as dimmed but visible (not hollow)
                        isNonSubscriber = true;
                        fillColor = '#3a4550';  // Dimmed gray-blue
                        glowColor = 'rgba(58, 69, 80, 0.15)';
                    }
                }

                // Check for peer name first
                const peerName = peer.ip_hash ? peerNames[peer.ip_hash] : null;

                if (isGateway) {
                    if (!selectedContract || isSubscriber) {
                        fillColor = '#f59e0b';  // Amber for gateway
                        glowColor = 'rgba(245, 158, 11, 0.3)';
                    } else if (isNonSubscriber) {
                        fillColor = '#6b5a30';  // Dimmed amber for non-subscriber gateway
                        glowColor = 'rgba(107, 90, 48, 0.2)';
                    }
                    label = peerName || 'GW';
                } else if (isYou) {
                    if (!selectedContract || isSubscriber) {
                        fillColor = '#10b981';  // Emerald for you
                        glowColor = 'rgba(16, 185, 129, 0.3)';
                    } else if (isNonSubscriber) {
                        fillColor = '#2d5a4a';  // Dimmed emerald for non-subscriber you
                        glowColor = 'rgba(45, 90, 74, 0.2)';
                    }
                    label = peerName || 'YOU';
                } else if (peerName) {
                    // Named peer - show the name
                    label = peerName;
                } else if (isSubscriber && !selectedContract) {
                    fillColor = '#f472b6';  // Pink for subscriber
                    glowColor = 'rgba(244, 114, 182, 0.3)';
                }

                // Override colors for selection states
                if (isEventSelected) {
                    fillColor = '#f87171';
                    glowColor = 'rgba(248, 113, 113, 0.3)';
                } else if (isPeerSelected) {
                    fillColor = '#7ecfef';
                    glowColor = 'rgba(126, 207, 239, 0.4)';
                } else if (isEventHovered) {
                    fillColor = '#fbbf24';  // Amber for hovered peers
                    glowColor = 'rgba(251, 191, 36, 0.5)';
                } else if (isHighlighted) {
                    fillColor = '#fbbf24';
                    glowColor = 'rgba(251, 191, 36, 0.3)';
                }

                const isLargeNetwork = peers.size > 50;
                const isSpecial = isEventHovered || isHighlighted || isPeerSelected || isGateway || isYou;
                const nodeSize = (isSpecial || isSubscriber) ? 5 : (isLargeNetwork ? 3 : 4);
                const glowSize = isSpecial ? 9 : (isLargeNetwork ? 4 : 7);

                // Outer glow
                const glow = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
                glow.setAttribute('cx', pos.x);
                glow.setAttribute('cy', pos.y);
                glow.setAttribute('r', glowSize);
                glow.setAttribute('fill', glowColor);
                svg.appendChild(glow);

                // Click target (larger invisible circle for easier clicking)
                const clickTarget = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
                clickTarget.setAttribute('cx', pos.x);
                clickTarget.setAttribute('cy', pos.y);
                clickTarget.setAttribute('r', '20');
                clickTarget.setAttribute('fill', 'transparent');
                clickTarget.setAttribute('style', 'cursor: pointer;');
                clickTarget.onclick = () => {
                    if (isYou && youArePeer && !peerName) {
                        // Clicking your own peer (without a name) opens the naming dialog
                        showPeerNamingPrompt();
                    } else {
                        selectPeer(id);
                    }
                };
                svg.appendChild(clickTarget);

                // Main circle
                const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
                circle.setAttribute('cx', pos.x);
                circle.setAttribute('cy', pos.y);
                circle.setAttribute('r', nodeSize);
                circle.setAttribute('fill', fillColor);
                circle.setAttribute('class', 'peer-node');
                if (!isNonSubscriber) {
                    circle.setAttribute('filter', 'url(#glow)');
                }
                circle.setAttribute('style', 'pointer-events: none;');

                // Non-subscribers get a subtle outline when contract is selected
                if (isNonSubscriber) {
                    circle.setAttribute('stroke', '#2a2f35');
                    circle.setAttribute('stroke-width', '1');
                }

                const peerType = isGateway ? ' (Gateway)' : isYou ? ' (You)' : '';
                const title = document.createElementNS('http://www.w3.org/2000/svg', 'title');
                const peerIdentifier = peerName || (peer.ip_hash ? `#${peer.ip_hash}` : '');
                let tooltipText = `${id}${peerType}\n${peerIdentifier}\nLocation: ${peer.location.toFixed(4)}`;

                // Add OS/version info from peer lifecycle data
                // Try peer.peer_id first, then fall back to topology's peer_id for this anonymized ID
                if (peerLifecycle && peerLifecycle.peers) {
                    let lifecycleData = null;

                    // First try the peer's own peer_id (from presence or live state)
                    if (peer.peer_id) {
                        lifecycleData = peerLifecycle.peers.find(p => p.peer_id === peer.peer_id);
                    }

                    // If not found, try looking up by anonymized ID in topology (for historical mode)
                    if (!lifecycleData) {
                        const topoPeer = initialStatePeers.find(p => p.id === id);
                        if (topoPeer && topoPeer.peer_id) {
                            lifecycleData = peerLifecycle.peers.find(p => p.peer_id === topoPeer.peer_id);
                        }
                    }

                    if (lifecycleData) {
                        if (lifecycleData.version) {
                            tooltipText += `\nVersion: ${lifecycleData.version}`;
                        }
                        if (lifecycleData.os) {
                            let osInfo = lifecycleData.os;
                            if (lifecycleData.arch) {
                                osInfo += ` (${lifecycleData.arch})`;
                            }
                            tooltipText += `\nOS: ${osInfo}`;
                        }
                    }
                }

                if (peerStateHash) {
                    tooltipText += `\nState: [${peerStateHash.substring(0, 8)}]`;
                }
                tooltipText += '\nClick to filter events';
                title.textContent = tooltipText;
                clickTarget.appendChild(title);
                svg.appendChild(circle);

                // Inner state indicator square (when contract selected and peer has state)
                // Rendered AFTER circle so it appears on top
                if (peerStateHash && selectedContract) {
                    const stateColors = hashToColor(peerStateHash);
                    const squareSize = nodeSize * 0.7;  // 70% of peer node size

                    // White border for contrast
                    const borderRect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
                    borderRect.setAttribute('x', pos.x - squareSize/2 - 1);
                    borderRect.setAttribute('y', pos.y - squareSize/2 - 1);
                    borderRect.setAttribute('width', squareSize + 2);
                    borderRect.setAttribute('height', squareSize + 2);
                    borderRect.setAttribute('fill', 'white');
                    borderRect.setAttribute('rx', '2');
                    borderRect.setAttribute('style', 'pointer-events: none;');
                    svg.appendChild(borderRect);

                    // Colored state indicator square
                    const stateRect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
                    stateRect.setAttribute('x', pos.x - squareSize/2);
                    stateRect.setAttribute('y', pos.y - squareSize/2);
                    stateRect.setAttribute('width', squareSize);
                    stateRect.setAttribute('height', squareSize);
                    stateRect.setAttribute('fill', stateColors.fill);
                    stateRect.setAttribute('rx', '1');
                    stateRect.setAttribute('style', 'pointer-events: none;');
                    svg.appendChild(stateRect);
                }

                // Smart label rendering: collect candidates for deferred collision-aware rendering
                const labelContent = label || (peers.size <= 12 ? (peerName || `#${peer.ip_hash || id.substring(5, 11)}`) : null);

                const isConnectedToSelectedPeer = selectedPeerId && connectedToSelected.has(id);
                const showLabel = labelContent && (
                    // Always show GW and YOU
                    isGateway || isYou ||
                    // Show selected peer's name
                    isPeerSelected ||
                    // Show names of peers connected to selected peer
                    isConnectedToSelectedPeer ||
                    // Show all named peers when network is small
                    (peers.size <= 30 && label) ||
                    // Show all labels (including hashes) when very small
                    peers.size <= 12
                );

                if (showLabel) {
                    // Priority: higher = more important = rendered first and wins collision
                    const priority = (isGateway || isYou) ? 3 : isPeerSelected ? 3 : isConnectedToSelectedPeer ? 1 : 2;
                    pendingLabels.push({
                        location: peer.location,
                        text: labelContent,
                        fillColor,
                        priority,
                        isSpecial: isGateway || isYou || isPeerSelected,
                        isConnected: isConnectedToSelectedPeer,
                        isYouWithName: isYou && youArePeer && peerName
                    });
                }
            });

            // Render collected labels with collision avoidance
            // Sort by priority (high first) so important labels win collision slots
            pendingLabels.sort((a, b) => b.priority - a.priority);
            let labelCount = 0;
            pendingLabels.forEach(lbl => {
                if (labelCount >= MAX_LABELS) return; // Cap total labels

                // Check if this label would overlap with an already-rendered one
                const tooClose = usedLabelSlots.some(usedLoc => {
                    const dist = Math.abs(lbl.location - usedLoc);
                    const wrapDist = Math.min(dist, 1 - dist);
                    return wrapDist < MIN_LABEL_ANGLE_GAP;
                });
                if (tooClose) return; // Skip — would overlap
                usedLabelSlots.push(lbl.location);
                labelCount++;

                const angle = lbl.location * 2 * Math.PI - Math.PI / 2;
                const labelRadius = RADIUS + 18;
                const lx = CENTER + labelRadius * Math.cos(angle);
                const ly = CENTER + labelRadius * Math.sin(angle);

                const angleDeg = angle * 180 / Math.PI;
                const onLeftSide = Math.cos(angle) < 0;
                const rotation = onLeftSide ? angleDeg + 180 : angleDeg;
                const anchor = onLeftSide ? 'end' : 'start';

                const radialLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text');
                radialLabel.setAttribute('x', lx);
                radialLabel.setAttribute('y', ly);
                radialLabel.setAttribute('transform', `rotate(${rotation}, ${lx}, ${ly})`);
                radialLabel.setAttribute('fill', lbl.fillColor);
                radialLabel.setAttribute('font-size', lbl.isSpecial ? '10' : '9');
                radialLabel.setAttribute('font-family', 'JetBrains Mono, monospace');
                radialLabel.setAttribute('font-weight', lbl.isSpecial ? '700' : '500');
                radialLabel.setAttribute('text-anchor', anchor);
                radialLabel.setAttribute('dominant-baseline', 'middle');
                radialLabel.setAttribute('opacity', lbl.isConnected ? '0.8' : '1');
                radialLabel.textContent = lbl.text;

                if (lbl.isYouWithName) {
                    radialLabel.setAttribute('style', 'cursor: pointer; text-decoration: underline; text-decoration-style: dotted;');
                    radialLabel.onclick = (e) => { e.stopPropagation(); showPeerNamingPrompt(); };
                }
                svg.appendChild(radialLabel);
            });

            // Center stats
            const centerGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g');

            // When contract selected, show subscriber count; otherwise show peer count
            const visibleSubscribers = selectedContract ? [...subscriberPeerIds].filter(id => peers.has(id)).length : 0;
            const displayCount = selectedContract ? visibleSubscribers : peers.size;
            const displayLabel = selectedContract
                ? (visibleSubscribers > 0 ? 'SUBSCRIBERS' : 'PEERS')
                : 'PEERS';

            const countText = document.createElementNS('http://www.w3.org/2000/svg', 'text');
            countText.setAttribute('x', CENTER);
            countText.setAttribute('y', CENTER - 8);
            countText.setAttribute('fill', selectedContract && visibleSubscribers === 0 ? '#484f58' : '#00d4aa');
            countText.setAttribute('font-size', '36');
            countText.setAttribute('font-family', 'JetBrains Mono, monospace');
            countText.setAttribute('font-weight', '300');
            countText.setAttribute('text-anchor', 'middle');
            countText.textContent = displayCount;
            centerGroup.appendChild(countText);

            const labelText = document.createElementNS('http://www.w3.org/2000/svg', 'text');
            labelText.setAttribute('x', CENTER);
            labelText.setAttribute('y', CENTER + 18);
            labelText.setAttribute('fill', '#484f58');
            labelText.setAttribute('font-size', '11');
            labelText.setAttribute('font-family', 'JetBrains Mono, monospace');
            labelText.setAttribute('text-anchor', 'middle');
            labelText.setAttribute('text-transform', 'uppercase');
            labelText.setAttribute('letter-spacing', '2');
            labelText.textContent = displayLabel;
            centerGroup.appendChild(labelText);

            svg.appendChild(centerGroup);

            // Draw message flow arrows for displayed events (only in event mode, not subscription mode)
            if (!selectedContract && displayedEvents && displayedEvents.length > 0) {
                displayedEvents.forEach((event, idx) => {
                    // Need both from and to peer with locations
                    if (!event.from_peer || !event.to_peer) return;
                    if (event.from_peer === event.to_peer) return;

                    const fromPeer = peers.get(event.from_peer);
                    const toPeer = peers.get(event.to_peer);

                    // Use location from event if peer not in current state
                    const fromLoc = fromPeer?.location ?? event.from_location;
                    const toLoc = toPeer?.location ?? event.to_location;

                    if (fromLoc === null || fromLoc === undefined || toLoc === null || toLoc === undefined) return;

                    const fromPos = locationToXY(fromLoc);
                    const toPos = locationToXY(toLoc);

                    // Calculate shorter line (don't overlap nodes)
                    const dx = toPos.x - fromPos.x;
                    const dy = toPos.y - fromPos.y;
                    const dist = Math.sqrt(dx*dx + dy*dy);
                    if (dist < 20) return;  // Too close

                    const offsetStart = 15 / dist;
                    const offsetEnd = 22 / dist;

                    const x1 = fromPos.x + dx * offsetStart;
                    const y1 = fromPos.y + dy * offsetStart;
                    const x2 = fromPos.x + dx * (1 - offsetEnd);
                    const y2 = fromPos.y + dy * (1 - offsetEnd);

                    const eventClass = getEventClass(event.event_type);
                    const isSelected = selectedEvent && selectedEvent.timestamp === event.timestamp;

                    const arrow = document.createElementNS('http://www.w3.org/2000/svg', 'line');
                    arrow.setAttribute('x1', x1);
                    arrow.setAttribute('y1', y1);
                    arrow.setAttribute('x2', x2);
                    arrow.setAttribute('y2', y2);
                    arrow.setAttribute('class', `message-flow-arrow ${eventClass} animated`);
                    arrow.setAttribute('style', `opacity: ${isSelected ? 1 : 0.6 - idx * 0.05}`);
                    svg.appendChild(arrow);
                });
            }

            // Draw subscription tree links and proximity links if a contract is selected
            if (selectedContract && contractData[selectedContract]) {
                const subData = contractData[selectedContract];
                const tree = subData.tree || {};

                // First, draw proximity links (dashed cyan lines)
                // These are connections between peers that both have the contract
                // but aren't in the subscription tree - updates flow via proximity
                const proximityLinks = computeProximityLinks(selectedContract, peers, connections);
                proximityLinks.forEach(link => {
                    const fromPeer = peers.get(link.from);
                    const toPeer = peers.get(link.to);
                    if (!fromPeer || !toPeer) return;

                    const fromPos = locationToXY(fromPeer.location);
                    const toPos = locationToXY(toPeer.location);

                    const dx = toPos.x - fromPos.x;
                    const dy = toPos.y - fromPos.y;
                    const dist = Math.sqrt(dx*dx + dy*dy);
                    if (dist < 1) return;
                    const offset = 12 / dist;

                    const x1 = fromPos.x + dx * offset;
                    const y1 = fromPos.y + dy * offset;
                    const x2 = toPos.x - dx * offset;
                    const y2 = toPos.y - dy * offset;

                    // Create group for line + hit area
                    const lineGroup = document.createElementNS("http://www.w3.org/2000/svg", "g");

                    const line = document.createElementNS("http://www.w3.org/2000/svg", "line");
                    line.setAttribute('x1', x1);
                    line.setAttribute('y1', y1);
                    line.setAttribute('x2', x2);
                    line.setAttribute('y2', y2);
                    line.setAttribute('class', 'proximity-link');
                    line.setAttribute('stroke', '#22d3ee');  // Cyan
                    line.setAttribute('stroke-width', '2');
                    line.setAttribute('stroke-dasharray', '4,3');
                    line.setAttribute('opacity', '0.7');

                    const title = document.createElementNS('http://www.w3.org/2000/svg', 'title');
                    title.textContent = 'Proximity link: connected peers share updates directly';
                    line.appendChild(title);

                    // Add invisible wider hit area for easier tooltip triggering
                    const hitArea = document.createElementNS("http://www.w3.org/2000/svg", "line");
                    hitArea.setAttribute("x1", pos1.x);
                    hitArea.setAttribute("y1", pos1.y);
                    hitArea.setAttribute("x2", pos2.x);
                    hitArea.setAttribute("y2", pos2.y);
                    hitArea.setAttribute("stroke", "transparent");
                    hitArea.setAttribute("stroke-width", "12");
                    hitArea.appendChild(connTitle.cloneNode(true));

                    lineGroup.appendChild(line);
                    lineGroup.appendChild(hitArea);
                    svg.appendChild(lineGroup);
                });

                // Draw subscription tree links (solid pink lines, no arrows)
                // Updates flow bidirectionally through these connections
                Object.entries(tree).forEach(([fromId, toIds]) => {
                    const fromPeer = peers.get(fromId);
                    if (!fromPeer) return;

                    toIds.forEach(toId => {
                        const toPeer = peers.get(toId);
                        if (!toPeer) return;

                        const fromPos = locationToXY(fromPeer.location);
                        const toPos = locationToXY(toPeer.location);

                        // Calculate shorter line (don't overlap nodes)
                        const dx = toPos.x - fromPos.x;
                        const dy = toPos.y - fromPos.y;
                        const dist = Math.sqrt(dx*dx + dy*dy);
                        if (dist < 1) return;
                        const offset = 12 / dist;

                        const x1 = fromPos.x + dx * offset;
                        const y1 = fromPos.y + dy * offset;
                        const x2 = toPos.x - dx * offset;
                        const y2 = toPos.y - dy * offset;

                        // Create group for line + hit area
                    const lineGroup = document.createElementNS("http://www.w3.org/2000/svg", "g");

                    const line = document.createElementNS("http://www.w3.org/2000/svg", "line");
                        line.setAttribute('x1', x1);
                        line.setAttribute('y1', y1);
                        line.setAttribute('x2', x2);
                        line.setAttribute('y2', y2);
                        line.setAttribute('class', 'subscription-link');
                        line.setAttribute('stroke', '#f472b6');  // Pink
                        line.setAttribute('stroke-width', '2.5');
                        line.setAttribute('opacity', '0.9');

                        const title = document.createElementNS('http://www.w3.org/2000/svg', 'title');
                        title.textContent = 'Subscription link: updates flow through this connection';
                        line.appendChild(title);

                        // Add invisible wider hit area for easier tooltip triggering
                    const hitArea = document.createElementNS("http://www.w3.org/2000/svg", "line");
                    hitArea.setAttribute("x1", pos1.x);
                    hitArea.setAttribute("y1", pos1.y);
                    hitArea.setAttribute("x2", pos2.x);
                    hitArea.setAttribute("y2", pos2.y);
                    hitArea.setAttribute("stroke", "transparent");
                    hitArea.setAttribute("stroke-width", "12");
                    hitArea.appendChild(connTitle.cloneNode(true));

                    lineGroup.appendChild(line);
                    lineGroup.appendChild(hitArea);
                    svg.appendChild(lineGroup);
                    });
                });
            }

            // Clear container but preserve hover canvas
            const existingCanvas = container.querySelector('canvas');
            container.innerHTML = '';
            container.appendChild(svg);
            if (existingCanvas) {
                container.appendChild(existingCanvas);
            }

            // Update hover overlay
            updateHoverCanvas(peers);
        }

        function renderTimeline() {
            const container = document.getElementById('timeline-events');
            container.innerHTML = '';

            if (allEvents.length === 0 || timeRange.end <= timeRange.start) return;

            const duration = timeRange.end - timeRange.start;

            // Define lanes: each operation type gets a row
            const lanes = {
                put: { color: 'var(--color-put)', row: 0, label: 'PUT' },
                get: { color: 'var(--color-get)', row: 1, label: 'GET' },
                update: { color: 'var(--color-update)', row: 2, label: 'UPD' },
                subscribe: { color: 'var(--color-subscribe)', row: 3, label: 'SUB' },
                connect: { color: 'var(--color-connect)', row: 4, label: 'CONN' },
            };
            const laneHeight = 13;
            const laneGap = 2;
            const totalHeight = Object.keys(lanes).length * (laneHeight + laneGap);

            // Create lane backgrounds and labels
            Object.entries(lanes).forEach(([type, lane]) => {
                const bg = document.createElement('div');
                bg.className = 'timeline-lane-bg';
                bg.style.cssText = `position:absolute;left:0;right:0;top:${lane.row * (laneHeight + laneGap)}px;height:${laneHeight}px;background:rgba(255,255,255,0.02);border-radius:2px;`;
                container.appendChild(bg);
            });

            // Group events into time buckets per lane
            const buckets = {};
            allEvents.forEach(event => {
                const bucket = Math.round((event.timestamp - timeRange.start) / duration * 400);
                const type = event.event_type;

                // Determine which lane
                let laneType = 'connect';
                if (type.includes('put')) laneType = 'put';
                else if (type.includes('get')) laneType = 'get';
                else if (type.includes('update') || type.includes('broadcast')) laneType = 'update';
                else if (type.includes('subscrib')) laneType = 'subscribe';
                else if (!type.includes('connect')) return; // Skip other events

                const key = `${bucket}-${laneType}`;
                if (!buckets[key]) buckets[key] = { bucket, laneType, events: [], hasResponse: false };
                buckets[key].events.push(event);

                // Track if this bucket has a response/success
                if (type.includes('success') || type.includes('subscribed')) {
                    buckets[key].hasResponse = true;
                }
            });

            // Render markers
            Object.values(buckets).forEach(data => {
                const posPercent = data.bucket / 4; // 400 buckets -> 100%
                if (posPercent < 0 || posPercent > 100) return;

                const lane = lanes[data.laneType];
                const marker = document.createElement('div');

                // Brighter if has response/success, dimmer if just request
                const opacity = data.hasResponse ? 1 : 0.5;
                const width = Math.min(6, 2 + data.events.length);

                marker.className = 'timeline-lane-marker';
                marker.style.cssText = `
                    position:absolute;
                    left:${posPercent}%;
                    top:${lane.row * (laneHeight + laneGap)}px;
                    width:${width}px;
                    height:${laneHeight}px;
                    background:${lane.color};
                    opacity:${opacity};
                    border-radius:1px;
                    cursor:pointer;
                    transform:translateX(-50%);
                `;

                const evtTypes = [...new Set(data.events.map(e => e.event_type))].join(', ');
                marker.title = `${data.events.length} ${data.laneType} event(s)\n${evtTypes}`;
                marker.onclick = (e) => {
                    e.stopPropagation();
                    goToTime(data.events[0].timestamp);
                };
                container.appendChild(marker);
            });

            document.getElementById('timeline-start').textContent = formatTime(timeRange.start);
        }

        // Time window for events display (default 5 minutes each side = 10 min total)
        let timeWindowNs = 5 * 60 * 1_000_000_000;
        const MIN_TIME_WINDOW_NS = 1 * 60 * 1_000_000_000;  // 1 minute minimum
        const MAX_TIME_WINDOW_NS = 60 * 60 * 1_000_000_000; // 60 minutes maximum
        const MIN_PLAYHEAD_WIDTH_PX = 40;

        function updatePlayhead() {
            if (timeRange.end <= timeRange.start) return;

            const duration = timeRange.end - timeRange.start;
            const timeline = document.getElementById('timeline');
            // Events area: left: 50px, right: 16px, so width = timeline.offsetWidth - 66
            const eventsAreaWidth = timeline.offsetWidth - 66;

            // Calculate window width as percentage of time range
            const windowDuration = timeWindowNs * 2; // total window size
            let windowWidthPercent = (windowDuration / duration) * 100;

            // Ensure minimum width
            const minWidthPercent = (MIN_PLAYHEAD_WIDTH_PX / eventsAreaWidth) * 100;
            windowWidthPercent = Math.max(windowWidthPercent, minWidthPercent);

            // Cap at 100%
            windowWidthPercent = Math.min(windowWidthPercent, 100);

            // Calculate center position
            const centerPos = (currentTime - timeRange.start) / duration;
            const clampedCenter = Math.min(Math.max(centerPos, 0), 1);

            // Calculate left edge (center - half width)
            let leftPos = clampedCenter * 100 - windowWidthPercent / 2;
            leftPos = Math.max(0, Math.min(leftPos, 100 - windowWidthPercent));

            // Convert to pixels relative to the events area (which starts at 50px)
            const playhead = document.getElementById('playhead');
            const leftPx = (leftPos / 100) * eventsAreaWidth + 50;
            const widthPx = (windowWidthPercent / 100) * eventsAreaWidth;
            playhead.style.left = `${leftPx}px`;
            playhead.style.width = `${widthPx}px`;

            document.getElementById('playhead-time').textContent = formatTime(currentTime);
            document.getElementById('playhead-date').textContent = formatDate(currentTime);
            document.getElementById('time-display').textContent = formatTime(currentTime).split(' ')[0];

            // Update topology time label
            const topoLabel = document.getElementById('topology-time-label');
            if (isLive) {
                topoLabel.textContent = 'Live';
                topoLabel.classList.add('live');
            } else {
                const timeStr = new Date(currentTime / 1_000_000).toLocaleTimeString([], {hour: '2-digit', minute: '2-digit'});
                topoLabel.textContent = `at ${timeStr}`;
                topoLabel.classList.remove('live');
            }

            renderDetailTimeline();
        }

        function updateView() {
            let peers = new Map();
            let connections = new Set();

            // For live view, use direct state data (most accurate)
            // For historical view (time scrubbing), reconstruct from events
            if (isLive && initialStatePeers.length > 0) {
                // Live mode: use current network state directly
                for (const p of initialStatePeers) {
                    peers.set(p.id, {
                        location: p.location,
                        ip_hash: p.ip_hash,
                        peer_id: p.peer_id  // Include for contract state lookup
                    });
                }
                for (const conn of initialStateConnections) {
                    const key = [conn[0], conn[1]].sort().join('|');
                    connections.add(key);
                }
            } else {
                // Historical mode: reconstruct from events
                const reconstructed = reconstructStateAtTime(currentTime);
                peers = reconstructed.peers;
                connections = reconstructed.connections;
            }

            // Get subscription subscribers for highlighting (if contract selected)
            // Need to map telemetry peer_ids from peer_states to topology anonymized IDs
            let subscriberPeerIds = new Set();
            if (selectedContract && contractData[selectedContract]) {
                const subData = contractData[selectedContract];
                // Add from old subscribers list (IP-based IDs)
                if (subData.subscribers) {
                    subData.subscribers.forEach(id => subscriberPeerIds.add(id));
                }
                // Add from new peer_states (telemetry peer_ids) - map to topology IDs
                if (subData.peer_states) {
                    subData.peer_states.forEach(ps => {
                        // Find topology peer with matching telemetry peer_id
                        for (const [topoId, topoPeer] of peers) {
                            if (topoPeer.peer_id === ps.peer_id) {
                                subscriberPeerIds.add(topoId);
                                break;
                            }
                        }
                    });
                }
            }

            updateRingSVG(peers, connections, subscriberPeerIds);

            document.getElementById('peer-count').textContent = peers.size;
            document.getElementById('connection-count').textContent = connections.size;

            // Update topology subtitle with connectivity info
            const topoSubtitle = document.querySelector('.panel-subtitle');
            if (topoSubtitle) {
                if (selectedContract && contractData[selectedContract]) {
                    const subData = contractData[selectedContract];
                    const peerStates = subData.peer_states || [];
                    const totalSubs = peerStates.length;
                    const visibleSubs = [...subscriberPeerIds].filter(id => peers.has(id)).length;

                    // Get connectivity info
                    const treeInfo = getSubscriptionTreeInfo(selectedContract, peers, connections);
                    const proximityCount = treeInfo.proximityLinks.length;

                    if (totalSubs === 0) {
                        topoSubtitle.textContent = 'No peers subscribed to this contract.';
                    } else {
                        // Build subtitle parts
                        let parts = [`${visibleSubs} subscribed (pink)`];

                        // Add link info
                        const linkParts = [];
                        if (treeInfo.nodes > 0) {
                            linkParts.push('pink = subscription');
                        }
                        if (proximityCount > 0) {
                            linkParts.push('cyan = proximity');
                        }
                        if (linkParts.length > 0) {
                            parts.push(`Links: ${linkParts.join(', ')}`);
                        }

                        topoSubtitle.textContent = parts.join(' · ');
                    }
                } else {
                    topoSubtitle.textContent = 'Peers arranged by their network location (0.0-1.0). Click a peer to filter events.';
                }
            }

            // Performance: Cache filtered events (avoid filtering 28k events every frame)
            // Quantize currentTime to 1-second buckets for cache key (events don't change that fast)
            const timeWindowBucket = Math.floor(currentTime / 1_000_000_000);  // 1 second buckets
            const filterKey = `${timeWindowBucket}|${selectedPeerId || ''}|${selectedTxId || ''}|${filterText || ''}|${selectedContract || ''}|${allEvents.length}`;

            let nearbyEvents;
            if (filterKey === cachedFilterKey) {
                nearbyEvents = cachedNearbyEvents;
            } else {
                // Filter events within the time window
                nearbyEvents = allEvents.filter(e =>
                    Math.abs(e.timestamp - currentTime) < timeWindowNs
                );

                // Filter by selected peer (check peer_id, from_peer, to_peer, and connection)
                if (selectedPeerId) {
                    nearbyEvents = nearbyEvents.filter(e =>
                        e.peer_id === selectedPeerId ||
                        e.from_peer === selectedPeerId ||
                        e.to_peer === selectedPeerId ||
                        (e.connection && (e.connection[0] === selectedPeerId || e.connection[1] === selectedPeerId))
                    );
                }

                // Filter by selected transaction
                if (selectedTxId) {
                    nearbyEvents = nearbyEvents.filter(e => e.tx_id === selectedTxId);
                }

                // Filter by text input
                if (filterText) {
                    const filter = filterText.toLowerCase();
                    nearbyEvents = nearbyEvents.filter(e =>
                        (e.event_type && e.event_type.toLowerCase().includes(filter)) ||
                        (e.peer_id && e.peer_id.toLowerCase().includes(filter)) ||
                        (e.contract && e.contract.toLowerCase().includes(filter))
                    );
                }

                // Filter by selected contract (show all events for this contract)
                if (selectedContract) {
                    nearbyEvents = nearbyEvents.filter(e => e.contract_full === selectedContract);
                }

                nearbyEvents = nearbyEvents.slice(-30);
                cachedNearbyEvents = nearbyEvents;
                cachedFilterKey = filterKey;
            }

            // Performance: Cache events state to skip expensive DOM rebuild
            const eventsStateKey = JSON.stringify({
                events: nearbyEvents.map(e => e.timestamp),
                selectedEvent: selectedEvent?.timestamp,
                selectedPeerId,
                selectedTxId,
                selectedContract
            });

            // Update events title based on filtering (lightweight)
            const eventsTitle = document.getElementById('events-title');
            if (selectedContract && contractData[selectedContract]) {
                eventsTitle.textContent = `Events for ${contractData[selectedContract].short_key}`;
            } else if (selectedPeerId) {
                eventsTitle.textContent = `Events for ${selectedPeerId.substring(0, 12)}...`;
            } else {
                eventsTitle.textContent = 'Events';
            }

            // Skip events panel rebuild if nothing changed
            if (eventsStateKey === lastEventsState) {
                // Still update displayedEvents for hover handling
                displayedEvents = nearbyEvents;
            } else {
                lastEventsState = eventsStateKey;

            const eventsPanel = document.getElementById('events-panel');
            if (nearbyEvents.length === 0) {
                displayedEvents = [];
                const emptyMsg = selectedContract
                    ? 'No subscription events in this time range'
                    : 'No events in this time range';
                eventsPanel.innerHTML = `
                    <div class="empty-state">
                        <div class="empty-state-icon">&#8709;</div>
                        <div>${emptyMsg}</div>
                    </div>
                `;
            } else {
                // Add sticky header row
                const headerHtml = `
                    <div class="events-header">
                        <span class="header-time">Time</span>
                        <span class="header-type">Type</span>
                        <span class="header-peers">Peers (from → to)</span>
                        <span class="header-tx">Tx</span>
                    </div>
                `;

                const eventsHtml = nearbyEvents.map((e, idx) => {
                    const isSelected = selectedEvent && selectedEvent.timestamp === e.timestamp && selectedEvent.peer_id === e.peer_id;
                    const classes = ['event-item'];
                    if (isSelected) classes.push('selected');

                    // Build peer display: from_peer → to_peer or just peer_id
                    let peersHtml = '';
                    const fromPeer = e.from_peer || e.peer_id;
                    const toPeer = e.to_peer;
                    const fromActive = selectedPeerId === fromPeer ? ' active' : '';
                    const toActive = toPeer && selectedPeerId === toPeer ? ' active' : '';

                    if (toPeer && toPeer !== fromPeer) {
                        peersHtml = `
                            <span class="event-filter-link${fromActive}" onclick="event.stopPropagation(); togglePeerFilter('${fromPeer}')">${fromPeer.substring(0, 12)}</span>
                            <span class="event-arrow">→</span>
                            <span class="event-filter-link${toActive}" onclick="event.stopPropagation(); togglePeerFilter('${toPeer}')">${toPeer.substring(0, 12)}</span>
                        `;
                    } else {
                        peersHtml = `<span class="event-filter-link${fromActive}" onclick="event.stopPropagation(); togglePeerFilter('${fromPeer}')">${fromPeer.substring(0, 12)}</span>`;
                    }

                    // Transaction ID (shortened)
                    const txActive = e.tx_id && selectedTxId === e.tx_id ? ' active' : '';
                    const txHtml = e.tx_id ? `<span class="event-tx event-filter-link${txActive}" onclick="event.stopPropagation(); toggleTxFilter('${e.tx_id}')">${e.tx_id.substring(0, 8)}</span>` : '';

                    // State hash display
                    let stateHashHtml = '';
                    if (e.state_hash_before && e.state_hash_after) {
                        // Update event: show before→after
                        stateHashHtml = `<span class="state-hash">[${e.state_hash_before.substring(0, 4)}→${e.state_hash_after.substring(0, 4)}]</span>`;
                    } else if (e.state_hash) {
                        // Single state hash
                        stateHashHtml = `<span class="state-hash">[${e.state_hash.substring(0, 4)}]</span>`;
                    }

                    return `
                        <div class="${classes.join(' ')}" data-event-idx="${idx}" onclick="handleEventClick(${idx})" onmouseenter="handleEventHover(${idx})" onmouseleave="handleEventHover(null)">
                            <span class="event-time">${e.time_str}</span>
                            <span class="event-badge ${getEventClass(e.event_type)}">${getEventLabel(e.event_type)}</span>
                            <div class="event-peers">${peersHtml}</div>
                            ${stateHashHtml}
                            ${txHtml}
                        </div>
                    `;
                }).reverse().join('');

                eventsPanel.innerHTML = headerHtml + eventsHtml;

                // Store events for click handler and topology visualization
                displayedEvents = nearbyEvents;
            }
            }  // End of events state cache check

            document.getElementById('event-count').textContent = allEvents.filter(e => e.timestamp <= currentTime).length;
            updatePlayhead();

            // Update subscriptions list if that tab is active (time-window filtering)
            if (activeTab === 'contracts') {
                renderContractsList();
            }
        }

        function handleEventClick(idx) {
            if (displayedEvents && displayedEvents[idx]) {
                selectEvent(displayedEvents[idx]);
            }
        }

        function handleEventHover(idx) {
            const prevHovered = hoveredEvent;
            if (idx === null) {
                hoveredEvent = null;
            } else if (displayedEvents && displayedEvents[idx]) {
                hoveredEvent = displayedEvents[idx];
            }

            // Use lightweight Canvas overlay for hover effects (no SVG rebuild needed)
            if (hoverCanvas && cachedPeersMap) {
                updateHoverCanvas(cachedPeersMap);
            } else {
                // Fallback to full update if canvas not ready
                scheduleUpdate(true);
            }
        }

        // Cache peers map for hover canvas updates
        let cachedPeersMap = null;

        function goLive() {
            isLive = true;
            currentTime = Date.now() * 1_000_000;
            selectedEvent = null;
            selectedPeerId = null;
            selectedContract = null;  // Clear contract selection when going live
            highlightedPeers.clear();
            document.getElementById('mode-button').className = 'timeline-mode live';
            document.getElementById('mode-button').textContent = 'LIVE';
            document.getElementById('status-dot').className = 'status-dot live';
            document.getElementById('status-text').textContent = 'Live';
            document.getElementById('events-title').textContent = 'Events';
            updateView();
            updateURL();
        }

        function goToTime(time) {
            isLive = false;
            currentTime = time;
            document.getElementById('mode-button').className = 'timeline-mode historical';
            document.getElementById('mode-button').textContent = 'HISTORICAL';
            document.getElementById('status-dot').className = 'status-dot historical';
            document.getElementById('status-text').textContent = 'Time Travel';
            document.getElementById('events-title').textContent = 'Events at ' + formatTime(time);
            updateView();
            updateURL();
        }

        function updateWindowLabel() {
            const totalMinutes = Math.round(timeWindowNs * 2 / 60_000_000_000);
            let label;
            if (totalMinutes >= 60) {
                label = `${Math.round(totalMinutes / 60)} hr`;
            } else {
                label = `${totalMinutes} min`;
            }
            document.getElementById('window-label').textContent = label;
        }

        function setupTimeline() {
            const timeline = document.getElementById('timeline');

            function getTimeFromX(clientX) {
                const rect = timeline.getBoundingClientRect();
                // Events area starts at 50px from left, width = rect.width - 66
                const pos = Math.max(0, Math.min(1, (clientX - rect.left - 50) / (rect.width - 66)));
                return timeRange.start + pos * (timeRange.end - timeRange.start);
            }

            // Click on timeline background to jump
            let justDragged = false;
            timeline.addEventListener('click', (e) => {
                if (justDragged) { justDragged = false; return; }
                if (e.target.closest('.timeline-playhead')) return;
                if (e.target.classList.contains('timeline-marker')) return;
                goToTime(getTimeFromX(e.clientX));
            });

            // Drag states
            let dragMode = null, dragStartX = 0, dragStartLeft = 0, dragStartRight = 0;
            const playhead = document.getElementById('playhead');
            const resizeLeft = document.getElementById('resize-left');
            const resizeRight = document.getElementById('resize-right');

            function getWindowEdges() {
                const windowSize = timeWindowNs * 2;
                let left = currentTime - timeWindowNs, right = currentTime + timeWindowNs;
                if (left < timeRange.start) { left = timeRange.start; right = Math.min(timeRange.end, timeRange.start + windowSize); }
                if (right > timeRange.end) { right = timeRange.end; left = Math.max(timeRange.start, timeRange.end - windowSize); }
                return { left, right };
            }

            // Helper to get clientX from mouse or touch event
            function getClientX(e) {
                return e.touches ? e.touches[0].clientX : e.clientX;
            }

            function startResizeLeft(e) {
                dragMode = 'resize-left'; dragStartX = getClientX(e);
                const edges = getWindowEdges(); dragStartLeft = edges.left; dragStartRight = edges.right;
                e.preventDefault(); e.stopPropagation();
            }
            resizeLeft.addEventListener('mousedown', startResizeLeft);
            resizeLeft.addEventListener('touchstart', startResizeLeft, { passive: false });

            function startResizeRight(e) {
                dragMode = 'resize-right'; dragStartX = getClientX(e);
                const edges = getWindowEdges(); dragStartLeft = edges.left; dragStartRight = edges.right;
                e.preventDefault(); e.stopPropagation();
            }
            resizeRight.addEventListener('mousedown', startResizeRight);
            resizeRight.addEventListener('touchstart', startResizeRight, { passive: false });

            function startMove(e) {
                if (e.target === resizeLeft || e.target === resizeRight) return;
                dragMode = 'move'; dragStartX = getClientX(e);
                const edges = getWindowEdges(); dragStartLeft = edges.left; dragStartRight = edges.right;
                playhead.style.cursor = 'grabbing';
                e.preventDefault(); e.stopPropagation();
            }
            playhead.addEventListener('mousedown', startMove);
            playhead.addEventListener('touchstart', startMove, { passive: false });

            playhead.addEventListener('click', (e) => e.stopPropagation());

            function handleDragMove(e) {
                if (!dragMode) return;
                // Prevent scroll during drag on touch devices
                if (e.cancelable) e.preventDefault();
                const clientX = getClientX(e);
                const rect = timeline.getBoundingClientRect();
                // Events area: left: 50px, right: 16px, so width = rect.width - 66
                const eventsAreaWidth = rect.width - 66;
                const duration = timeRange.end - timeRange.start;
                const deltaX = clientX - dragStartX;
                const deltaNs = (deltaX / eventsAreaWidth) * duration;

                if (dragMode === 'move') {
                    const windowSize = dragStartRight - dragStartLeft;
                    let newLeft = dragStartLeft + deltaNs, newRight = dragStartRight + deltaNs;
                    if (newLeft < timeRange.start) { newLeft = timeRange.start; newRight = timeRange.start + windowSize; }
                    if (newRight > timeRange.end) { newRight = timeRange.end; newLeft = timeRange.end - windowSize; }
                    currentTime = (newLeft + newRight) / 2;
                    isLive = false; updatePlayhead(); updateView();
                } else if (dragMode === 'resize-left') {
                    const newLeft = dragStartLeft + deltaNs;
                    const newHalfWindow = (dragStartRight - newLeft) / 2;
                    if (newHalfWindow >= MIN_TIME_WINDOW_NS && newHalfWindow <= MAX_TIME_WINDOW_NS && newLeft >= timeRange.start) {
                        timeWindowNs = newHalfWindow; currentTime = (newLeft + dragStartRight) / 2;
                        isLive = false; updateWindowLabel(); updatePlayhead(); updateView();
                    }
                } else if (dragMode === 'resize-right') {
                    const newRight = dragStartRight + deltaNs;
                    const newHalfWindow = (newRight - dragStartLeft) / 2;
                    if (newHalfWindow >= MIN_TIME_WINDOW_NS && newHalfWindow <= MAX_TIME_WINDOW_NS && newRight <= timeRange.end) {
                        timeWindowNs = newHalfWindow; currentTime = (dragStartLeft + newRight) / 2;
                        isLive = false; updateWindowLabel(); updatePlayhead(); updateView();
                    }
                }
            }
            document.addEventListener('mousemove', handleDragMove);
            document.addEventListener('touchmove', handleDragMove, { passive: false });

            function handleDragEnd() {
                if (dragMode) {
                    justDragged = true;
                    if (dragMode === 'move') playhead.style.cursor = 'grab';
                    dragMode = null;
                    setTimeout(() => { justDragged = false; }, 100);
                }
            }
            document.addEventListener('mouseup', handleDragEnd);
            document.addEventListener('touchend', handleDragEnd);
            document.addEventListener('touchcancel', handleDragEnd);

            // Initialize window label
            updateWindowLabel();

            // Keyboard shortcuts
            document.addEventListener('keydown', (e) => {
                if (e.target.tagName === 'INPUT') return;

                const step = (timeRange.end - timeRange.start) / 100;

                if (e.key === 'ArrowLeft') {
                    goToTime(Math.max(timeRange.start, currentTime - step));
                } else if (e.key === 'ArrowRight') {
                    goToTime(Math.min(timeRange.end, currentTime + step));
                } else if (e.key === 'l' || e.key === 'L') {
                    goLive();
                }
            });

            // Contract search input
            const contractSearch = document.getElementById('contract-search');
            if (contractSearch) {
                contractSearch.addEventListener('input', (e) => {
                    contractSearchText = e.target.value;
                    renderContractsList();
                });
            }

        }

        function handleMessage(data) {
            if (data.type === 'state') {
                console.log('Received initial state');

                // Extract gateway and user identification
                if (data.gateway_peer_id) {
                    gatewayPeerId = data.gateway_peer_id;
                    console.log('Gateway:', gatewayPeerId);
                }
                if (data.your_peer_id) {
                    yourPeerId = data.your_peer_id;
                    yourIpHash = data.your_ip_hash;
                    youArePeer = data.you_are_peer || false;
                    yourName = data.your_name || null;
                    console.log('You:', yourPeerId, '#' + yourIpHash, youArePeer ? '(peer)' : '', yourName || '');

                    // Update legend (if elements exist)
                    const legendYou = document.getElementById('legend-you');
                    const yourHash = document.getElementById('your-hash');
                    if (legendYou) legendYou.style.display = 'flex';
                    if (yourHash) yourHash.textContent = '#' + yourIpHash;

                    // If user is a peer without a name, show naming prompt after a short delay
                    if (youArePeer && !yourName) {
                        setTimeout(() => showPeerNamingPrompt(), 2000);
                    }
                }

                // Store peer names
                if (data.peer_names) {
                    peerNames = data.peer_names;
                    console.log('Peer names:', Object.keys(peerNames).length);
                }

                // Show legend
                const topoLegend = document.getElementById('topology-legend');
                if (topoLegend) topoLegend.style.display = 'flex';

                // Store contract/subscription data
                if (data.subscriptions) {
                    contractData = data.subscriptions;
                    updateContractDropdown();
                    // Update contracts tab count
                    const countEl = document.getElementById('contract-tab-count');
                    if (countEl) countEl.textContent = Object.keys(contractData).length;
                    console.log('Contracts:', Object.keys(contractData).length);
                }

                // Store contract state hashes
                if (data.contract_states) {
                    contractStates = data.contract_states;
                    console.log('Contract states:', Object.keys(contractStates).length);
                }

                // Store propagation timeline data
                if (data.propagation) {
                    propagationData = data.propagation;
                    console.log('Propagation data:', Object.keys(propagationData).length);
                }

                // Store and display operation stats
                if (data.op_stats) {
                    opStats = data.op_stats;
                    updateOpStats();
                    console.log('Op stats loaded');
                }

                // Store peer and connection data from state
                if (data.peers) {
                    initialStatePeers = data.peers;
                    console.log('Peers from state:', initialStatePeers.length);
                }
                if (data.connections) {
                    initialStateConnections = data.connections;
                    console.log('Connections from state:', initialStateConnections.length);
                }

                // Store peer lifecycle data
                if (data.peer_lifecycle) {
                    peerLifecycle = data.peer_lifecycle;
                    console.log('Peer lifecycle:', peerLifecycle.active_count, 'active,',
                                peerLifecycle.gateway_count, 'gateways');
                    updatePeerLifecycleStats();
                }

                // Trigger initial view update if we have peers
                if (initialStatePeers.length > 0) {
                    updateView();
                }

            } else if (data.type === 'history') {
                allEvents.length = 0;
                allEvents.push(...data.events);
                timeRange = data.time_range;
                timeRange.end = Date.now() * 1_000_000;
                currentTime = timeRange.end;

                if (data.transactions) {
                    allTransactions = data.transactions;
                    // Build transaction map for quick lookup
                    transactionMap.clear();
                    allTransactions.forEach((tx, idx) => transactionMap.set(tx.tx_id, idx));
                    // Debug: show transaction time range
                    if (allTransactions.length > 0) {
                        const txTimes = allTransactions.map(t => t.start_ns).filter(t => t);
                        const minTx = new Date(Math.min(...txTimes) / 1_000_000);
                        const maxTx = new Date(Math.max(...txTimes) / 1_000_000);
                        console.log(`Loaded ${allTransactions.length} transactions from ${minTx.toLocaleTimeString()} to ${maxTx.toLocaleTimeString()}`);
                    }
                }

                // Store peer presence for historical reconstruction
                if (data.peer_presence) {
                    peerPresence = data.peer_presence;
                    console.log(`Loaded ${peerPresence.length} peer presence records`);
                }

                // Debug: show event time range
                if (allEvents.length > 0) {
                    const evtTimes = allEvents.map(e => e.timestamp).filter(t => t);
                    const minEvt = new Date(Math.min(...evtTimes) / 1_000_000);
                    const maxEvt = new Date(Math.max(...evtTimes) / 1_000_000);
                    console.log(`Loaded ${allEvents.length} events from ${minEvt.toLocaleTimeString()} to ${maxEvt.toLocaleTimeString()}`);
                }

                renderTimeline();
                renderRuler();
                updateView();

                // Restore state from URL after initial load
                if (!urlLoaded) {
                    loadFromURL();
                }

            } else if (data.type === 'event') {
                // Performance: Limit event history to prevent memory growth
                const MAX_EVENTS = 10000;
                if (allEvents.length >= MAX_EVENTS) {
                    // Remove oldest 10% to avoid frequent array shifts
                    allEvents.splice(0, MAX_EVENTS * 0.1);
                    cachedFilterKey = null;  // Invalidate filter cache
                }
                allEvents.push(data);
                timeRange.end = data.timestamp;

                // Track transaction from this event
                trackTransactionFromEvent(data);

                // Queue timeline marker for batch insertion (perf optimization)
                if (timeRange.end > timeRange.start) {
                    pendingTimelineMarkers.push({
                        timestamp: data.timestamp,
                        event_type: data.event_type,
                        time_str: data.time_str
                    });
                }

                if (isLive) {
                    currentTime = data.timestamp;
                    scheduleUpdate();  // Use RAF batching instead of direct updateView()
                }
            } else if (data.type === 'event_batch') {
                // Server-side batched events (performance optimization)
                const events = data.events || [];
                const MAX_EVENTS = 10000;

                // Process all events in batch
                for (const event of events) {
                    if (allEvents.length >= MAX_EVENTS) {
                        allEvents.splice(0, MAX_EVENTS * 0.1);
                        cachedFilterKey = null;
                    }
                    allEvents.push(event);

                    // Track transaction
                    trackTransactionFromEvent(event);

                    // Queue timeline marker
                    pendingTimelineMarkers.push({
                        timestamp: event.timestamp,
                        event_type: event.event_type,
                        time_str: event.time_str
                    });
                }

                // Update time range from last event in batch
                if (events.length > 0) {
                    timeRange.end = events[events.length - 1].timestamp;
                    if (isLive) {
                        currentTime = timeRange.end;
                        scheduleUpdate();  // Single update for entire batch
                    }
                }
            } else if (data.type === 'peer_name_update') {
                // Another peer set their name
                peerNames[data.ip_hash] = data.name;
                console.log(`Peer ${data.ip_hash} named: ${data.name}${data.was_modified ? ' (adjusted)' : ''}`);
                scheduleUpdate();  // Refresh topology to show new name
            } else if (data.type === 'name_set_result') {
                if (data.success) {
                    yourName = data.name;
                    peerNames[yourIpHash] = data.name;
                    if (data.was_modified) {
                        console.log(`Your name was adjusted to: ${data.name}`);
                    }
                    scheduleUpdate();
                } else {
                    console.error('Failed to set name:', data.error);
                }
            }
        }

        function connect() {
            // Use same host/port as the page, proxied through Caddy
            const wsProtocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
            const wsUrl = `${wsProtocol}//${window.location.host}/ws`;
            ws = new WebSocket(wsUrl);

            ws.onopen = () => {
                document.getElementById('status-dot').className = 'status-dot live';
                document.getElementById('status-text').textContent = 'Live';
                if (reconnectTimeout) { clearTimeout(reconnectTimeout); reconnectTimeout = null; }
            };

            ws.onmessage = (event) => {
                try { handleMessage(JSON.parse(event.data)); }
                catch (e) { console.error('Parse error:', e); }
            };

            ws.onclose = () => {
                document.getElementById('status-dot').className = 'status-dot disconnected';
                document.getElementById('status-text').textContent = 'Reconnecting...';
                reconnectTimeout = setTimeout(connect, 3000);
            };

            ws.onerror = () => ws.close();
        }

        // Initialize
        setupTimeline();
        connect();