fix: hide packet detail pane on fresh page load

Add detail-collapsed class to split-layout initial HTML so the empty
right panel is hidden before any packet is selected. The class is
already removed when a packet row is clicked and re-added when the
close button is pressed.

Add 3 tests verifying the detail pane starts collapsed and that
open/close toggling is wired correctly.

Bump cache busters.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
Kpa-clawbot
2026-03-27 09:10:51 -07:00
parent afe16db960
commit bad023ccad
3 changed files with 52 additions and 28 deletions

View File

@@ -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>

View File

@@ -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>

View File

@@ -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`);