From 657653dd3b6b0113476a659245cf219fde4cdb8f Mon Sep 17 00:00:00 2001
From: you <you@example.com>
Date: Sun, 22 Mar 2026 04:45:04 +0000
Subject: [PATCH] fix: pause button crash killed WS handler registration

getElementById('pktPauseBtn') was null because button is rendered by
loadPackets() which runs async. Crash at line 218 prevented wsHandler
from being registered at line 260. Moved to data-action event delegation
which works regardless of render timing.
---
 public/index.html |  2 +-
 public/packets.js | 21 ++++++++++-----------
 2 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/public/index.html b/public/index.html
index 801c9166..65144d1a 100644
--- a/public/index.html
+++ b/public/index.html
@@ -84,7 +84,7 @@
   <script src="hop-resolver.js?v=1774126708"></script>
   <script src="app.js?v=1774126708"></script>
   <script src="home.js?v=1774042199"></script>
-  <script src="packets.js?v=1774154561"></script>
+  <script src="packets.js?v=1774154704"></script>
   <script src="map.js?v=1774126708" onerror="console.error('Failed to load:', this.src)"></script>
   <script src="channels.js?v=1774331200" onerror="console.error('Failed to load:', this.src)"></script>
   <script src="nodes.js?v=1774126708" onerror="console.error('Failed to load:', this.src)"></script>
diff --git a/public/packets.js b/public/packets.js
index 1c969f0b..0ff64aab 100644
--- a/public/packets.js
+++ b/public/packets.js
@@ -213,16 +213,15 @@
       if (!btn) return;
       if (btn.dataset.action === 'pkt-refresh') loadPackets();
       else if (btn.dataset.action === 'pkt-byop') showBYOP();
-    });
-
-    document.getElementById('pktPauseBtn').addEventListener('click', function() {
-      packetsPaused = !packetsPaused;
-      this.textContent = packetsPaused ? '▶' : '⏸';
-      this.title = packetsPaused ? 'Resume live updates' : 'Pause live updates';
-      this.classList.toggle('active', packetsPaused);
-      if (!packetsPaused && pauseBuffer.length) {
-        pauseBuffer.forEach(msg => wsHandler(msg));
-        pauseBuffer = [];
+      else if (btn.dataset.action === 'pkt-pause') {
+        packetsPaused = !packetsPaused;
+        btn.textContent = packetsPaused ? '▶' : '⏸';
+        btn.title = packetsPaused ? 'Resume live updates' : 'Pause live updates';
+        btn.classList.toggle('active', packetsPaused);
+        if (!packetsPaused && pauseBuffer.length) {
+          pauseBuffer.forEach(msg => wsHandler(msg));
+          pauseBuffer = [];
+        }
       }
     });
 
@@ -456,7 +455,7 @@
         <h2>Latest Packets <span class="count">(${totalCount})</span></h2>
         <div>
           <button class="btn-icon" data-action="pkt-refresh" title="Refresh">🔄</button>
-          <button class="btn-icon" id="pktPauseBtn" title="Pause live updates">⏸</button>
+          <button class="btn-icon" id="pktPauseBtn" data-action="pkt-pause" title="Pause live updates">⏸</button>
           <button class="btn-icon" data-action="pkt-byop" title="Bring Your Own Packet" aria-label="Bring Your Own Packet - paste raw packet hex for analysis" aria-haspopup="dialog">📦 BYOP</button>
         </div>
       </div>