diff --git a/public/index.html b/public/index.html
index 111d04a..3b5f6cd 100644
--- a/public/index.html
+++ b/public/index.html
@@ -22,9 +22,9 @@
   <meta name="twitter:title" content="MeshCore Analyzer">
   <meta name="twitter:description" content="Real-time MeshCore LoRa mesh network analyzer — live packet visualization, node tracking, channel decryption, and route analysis.">
   <meta name="twitter:image" content="https://raw.githubusercontent.com/Kpa-clawbot/meshcore-analyzer/master/public/og-image.png">
-  <link rel="stylesheet" href="style.css?v=1774625000">
-  <link rel="stylesheet" href="home.css?v=1774625000">
-  <link rel="stylesheet" href="live.css?v=1774625000">
+  <link rel="stylesheet" href="style.css?v=1774627822">
+  <link rel="stylesheet" href="home.css?v=1774627822">
+  <link rel="stylesheet" href="live.css?v=1774627822">
   <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
     integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
     crossorigin="anonymous">
@@ -81,29 +81,29 @@
   <main id="app" role="main"></main>
 
   <script src="vendor/qrcode.js"></script>
-  <script src="roles.js?v=1774625000"></script>
-  <script src="customize.js?v=1774625000" onerror="console.error('Failed to load:', this.src)"></script>
-  <script src="region-filter.js?v=1774625000"></script>
-  <script src="hop-resolver.js?v=1774625000"></script>
-  <script src="hop-display.js?v=1774625000"></script>
-  <script src="app.js?v=1774625000"></script>
-  <script src="home.js?v=1774625000"></script>
-  <script src="packet-filter.js?v=1774625000"></script>
-  <script src="packets.js?v=1774625000"></script>
-  <script src="map.js?v=1774625000" onerror="console.error('Failed to load:', this.src)"></script>
-  <script src="channels.js?v=1774625000" onerror="console.error('Failed to load:', this.src)"></script>
-  <script src="nodes.js?v=1774625000" onerror="console.error('Failed to load:', this.src)"></script>
-  <script src="traces.js?v=1774625000" onerror="console.error('Failed to load:', this.src)"></script>
-  <script src="analytics.js?v=1774625000" onerror="console.error('Failed to load:', this.src)"></script>
-  <script src="audio.js?v=1774625000" onerror="console.error('Failed to load:', this.src)"></script>
-  <script src="audio-v1-constellation.js?v=1774625000" onerror="console.error('Failed to load:', this.src)"></script>
-  <script src="audio-v2-constellation.js?v=1774625000" onerror="console.error('Failed to load:', this.src)"></script>
-  <script src="audio-lab.js?v=1774625000" onerror="console.error('Failed to load:', this.src)"></script>
-  <script src="live.js?v=1774625000" onerror="console.error('Failed to load:', this.src)"></script>
-  <script src="observers.js?v=1774625000" onerror="console.error('Failed to load:', this.src)"></script>
-  <script src="observer-detail.js?v=1774625000" onerror="console.error('Failed to load:', this.src)"></script>
-  <script src="compare.js?v=1774625000" onerror="console.error('Failed to load:', this.src)"></script>
-  <script src="node-analytics.js?v=1774625000" onerror="console.error('Failed to load:', this.src)"></script>
-  <script src="perf.js?v=1774625000" onerror="console.error('Failed to load:', this.src)"></script>
+  <script src="roles.js?v=1774627822"></script>
+  <script src="customize.js?v=1774627822" onerror="console.error('Failed to load:', this.src)"></script>
+  <script src="region-filter.js?v=1774627822"></script>
+  <script src="hop-resolver.js?v=1774627822"></script>
+  <script src="hop-display.js?v=1774627822"></script>
+  <script src="app.js?v=1774627822"></script>
+  <script src="home.js?v=1774627822"></script>
+  <script src="packet-filter.js?v=1774627822"></script>
+  <script src="packets.js?v=1774627822"></script>
+  <script src="map.js?v=1774627822" onerror="console.error('Failed to load:', this.src)"></script>
+  <script src="channels.js?v=1774627822" onerror="console.error('Failed to load:', this.src)"></script>
+  <script src="nodes.js?v=1774627822" onerror="console.error('Failed to load:', this.src)"></script>
+  <script src="traces.js?v=1774627822" onerror="console.error('Failed to load:', this.src)"></script>
+  <script src="analytics.js?v=1774627822" onerror="console.error('Failed to load:', this.src)"></script>
+  <script src="audio.js?v=1774627822" onerror="console.error('Failed to load:', this.src)"></script>
+  <script src="audio-v1-constellation.js?v=1774627822" onerror="console.error('Failed to load:', this.src)"></script>
+  <script src="audio-v2-constellation.js?v=1774627822" onerror="console.error('Failed to load:', this.src)"></script>
+  <script src="audio-lab.js?v=1774627822" onerror="console.error('Failed to load:', this.src)"></script>
+  <script src="live.js?v=1774627822" onerror="console.error('Failed to load:', this.src)"></script>
+  <script src="observers.js?v=1774627822" onerror="console.error('Failed to load:', this.src)"></script>
+  <script src="observer-detail.js?v=1774627822" onerror="console.error('Failed to load:', this.src)"></script>
+  <script src="compare.js?v=1774627822" onerror="console.error('Failed to load:', this.src)"></script>
+  <script src="node-analytics.js?v=1774627822" onerror="console.error('Failed to load:', this.src)"></script>
+  <script src="perf.js?v=1774627822" onerror="console.error('Failed to load:', this.src)"></script>
 </body>
 </html>
diff --git a/public/packets.js b/public/packets.js
index d5fe6ec..06b7caf 100644
--- a/public/packets.js
+++ b/public/packets.js
@@ -180,7 +180,7 @@
         filters.node = routeParam;
       }
     }
-    app.innerHTML = `<div class="split-layout">
+    app.innerHTML = `<div class="split-layout detail-collapsed">
       <div class="panel-left" id="pktLeft"></div>
       <div class="panel-right empty" id="pktRight" aria-live="polite">
         <div class="panel-resize-handle" id="pktResizeHandle"></div>
diff --git a/test-frontend-helpers.js b/test-frontend-helpers.js
index 8bfd60a..b41a3ed 100644
--- a/test-frontend-helpers.js
+++ b/test-frontend-helpers.js
@@ -1116,6 +1116,30 @@ console.log('\n=== compare.js: comparePacketSets ===');
   });
 }
 
+// ===== Packets page: detail pane starts collapsed =====
+{
+  console.log('\nPackets page — detail pane initial state:');
+  const packetsSource = fs.readFileSync('public/packets.js', 'utf8');
+
+  test('split-layout starts with detail-collapsed class', () => {
+    // The template literal that creates the split-layout must include detail-collapsed
+    const match = packetsSource.match(/innerHTML\s*=\s*`<div class="split-layout([^"]*)">/);
+    assert.ok(match, 'should find split-layout innerHTML assignment');
+    assert.ok(match[1].includes('detail-collapsed'),
+      'split-layout initial class should include detail-collapsed, got: "split-layout' + match[1] + '"');
+  });
+
+  test('closeDetailPanel adds detail-collapsed', () => {
+    assert.ok(packetsSource.includes("classList.add('detail-collapsed')"),
+      'closeDetailPanel should add detail-collapsed class');
+  });
+
+  test('selectPacket removes detail-collapsed', () => {
+    assert.ok(packetsSource.includes("classList.remove('detail-collapsed')"),
+      'selectPacket should remove detail-collapsed class');
+  });
+}
+
 // ===== SUMMARY =====
 console.log(`\n${'═'.repeat(40)}`);
 console.log(`  Frontend helpers: ${passed} passed, ${failed} failed`);