From f8faafe643b17e07ff4ae402277d785fc92f7a3d Mon Sep 17 00:00:00 2001
From: you <you@example.com>
Date: Sun, 22 Mar 2026 00:00:02 +0000
Subject: [PATCH] Polish filter bar: consistent sizing, logical grouping with
 separators, tooltips
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- All filter-bar controls now exactly 34px tall with line-height:1 and border-radius:6px
- col-toggle-btn matched to same height/font-size as other controls
- Controls grouped into 4 logical sections (Filters, Display, Sort, Columns) with vertical separators
- Added title attributes with helpful descriptions to all controls
- Added sort help icon (ⓘ) with detailed tooltip explaining each sort mode
- Mobile responsive: separators hidden on small screens
---
 public/index.html |  4 ++--
 public/packets.js | 47 ++++++++++++++++++++++++++++-------------------
 public/style.css  | 13 +++++++++----
 3 files changed, 39 insertions(+), 25 deletions(-)

diff --git a/public/index.html b/public/index.html
index 05b75ff..96000ea 100644
--- a/public/index.html
+++ b/public/index.html
@@ -22,7 +22,7 @@
   <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=1774137318">
+  <link rel="stylesheet" href="style.css?v=1774137602">
   <link rel="stylesheet" href="home.css">
   <link rel="stylesheet" href="live.css?v=1774058575">
   <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
@@ -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=1774137289"></script>
+  <script src="packets.js?v=1774137602"></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 c9216b9..96d3df9 100644
--- a/public/packets.js
+++ b/public/packets.js
@@ -405,26 +405,35 @@
       </div>
       <div class="filter-bar" id="pktFilters">
         <button class="btn filter-toggle-btn" id="filterToggleBtn">Filters ▾</button>
-        <input type="text" placeholder="Packet hash…" id="fHash" aria-label="Filter by packet hash">
-        <div class="node-filter-wrap" style="position:relative">
-          <input type="text" placeholder="Node name…" id="fNode" autocomplete="off" role="combobox" aria-expanded="false" aria-owns="fNodeDropdown" aria-activedescendant="" aria-autocomplete="list">
-          <div class="node-filter-dropdown hidden" id="fNodeDropdown" role="listbox"></div>
+        <div class="filter-group">
+          <input type="text" placeholder="Packet hash…" id="fHash" aria-label="Filter by packet hash" title="Filter packets by hex hash prefix">
+          <div class="node-filter-wrap" style="position:relative">
+            <input type="text" placeholder="Node name…" id="fNode" autocomplete="off" role="combobox" aria-expanded="false" aria-owns="fNodeDropdown" aria-activedescendant="" aria-autocomplete="list" title="Filter packets involving this node (sender or path)">
+            <div class="node-filter-dropdown hidden" id="fNodeDropdown" role="listbox"></div>
+          </div>
+          <select id="fObserver" aria-label="Filter by observer" title="Show only packets seen by this observer station"><option value="">All Observers</option></select>
+          <div id="packetsRegionFilter" class="region-filter-container" style="display:inline-block;vertical-align:middle"></div>
+          <select id="fType" aria-label="Filter by packet type" title="Filter by packet type (Advert, Channel Msg, etc.)"><option value="">All Types</option></select>
         </div>
-        <select id="fObserver" aria-label="Filter by observer"><option value="">All Observers</option></select>
-        <div id="packetsRegionFilter" class="region-filter-container" style="display:inline-block;vertical-align:middle"></div>
-        <select id="fType" aria-label="Filter by packet type"><option value="">All Types</option></select>
-        <button class="btn ${groupByHash ? 'active' : ''}" id="fGroup">Group by Hash</button>
-        <button class="btn" id="fMyNodes" title="Show only packets from claimed/favorited nodes">★ My Nodes</button>
-        <select id="fObsSort" aria-label="Observation sort order" title="Sort order for expanded observations">
-          <option value="observer">Sort: Observer</option>
-          <option value="path-asc">Sort: Path ↑ (shortest)</option>
-          <option value="path-desc">Sort: Path ↓ (longest)</option>
-          <option value="chrono-asc">Sort: Time ↑ (earliest)</option>
-          <option value="chrono-desc">Sort: Time ↓ (latest)</option>
-        </select>
-        <div class="col-toggle-wrap">
-          <button class="col-toggle-btn" id="colToggleBtn">Columns ▾</button>
-          <div class="col-toggle-menu" id="colToggleMenu"></div>
+        <div class="filter-group">
+          <button class="btn ${groupByHash ? 'active' : ''}" id="fGroup" title="Collapse duplicate observations of the same packet into expandable groups">Group by Hash</button>
+          <button class="btn" id="fMyNodes" title="Show only packets from your favorited/claimed nodes">★ My Nodes</button>
+        </div>
+        <div class="filter-group">
+          <select id="fObsSort" aria-label="Observation sort order" title="Controls how observations are ordered within packet groups and which observation appears in the header row. Observer: Groups by observer station, earliest first. Path: Orders by hop count. Time: Orders by observation timestamp.">
+            <option value="observer">Sort: Observer</option>
+            <option value="path-asc">Sort: Path ↑ (shortest)</option>
+            <option value="path-desc">Sort: Path ↓ (longest)</option>
+            <option value="chrono-asc">Sort: Time ↑ (earliest)</option>
+            <option value="chrono-desc">Sort: Time ↓ (latest)</option>
+          </select>
+          <span class="sort-help" title="Sort controls how observations within a packet group are ordered, and which observation's data (observer, path) appears in the header row.\n\nObserver — Groups observations by observer station. Earliest observer appears first. Within each observer, sorted by time.\n\nPath ↑ (shortest) — Shortest paths first, then alphabetical by observer.\nPath ↓ (longest) — Longest paths first.\n\nTime ↑ (earliest) — Chronological order, first observation at top.\nTime ↓ (latest) — Reverse chronological, most recent first.">ⓘ</span>
+        </div>
+        <div class="filter-group">
+          <div class="col-toggle-wrap">
+            <button class="col-toggle-btn" id="colToggleBtn" title="Show/hide table columns">Columns ▾</button>
+            <div class="col-toggle-menu" id="colToggleMenu"></div>
+          </div>
         </div>
       </div>
       <table class="data-table" id="pktTable">
diff --git a/public/style.css b/public/style.css
index 7b2d033..b09bb65 100644
--- a/public/style.css
+++ b/public/style.css
@@ -190,15 +190,18 @@ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible
 .filter-bar input, .filter-bar select {
   padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px;
   font-size: 13px; background: var(--input-bg); color: var(--text); font-family: var(--font);
-  height: 34px; box-sizing: border-box;
+  height: 34px; box-sizing: border-box; line-height: 1;
 }
 .filter-bar input { width: 120px; }
 .filter-bar select { min-width: 90px; }
 .filter-bar .btn {
   padding: 6px 14px; border: 1px solid var(--border); border-radius: 6px;
   background: var(--input-bg); cursor: pointer; font-size: 13px; transition: all .15s;
-  font-family: var(--font); color: var(--text); height: 34px; box-sizing: border-box;
+  font-family: var(--font); color: var(--text); height: 34px; box-sizing: border-box; line-height: 1;
 }
+.filter-group { display: flex; gap: 6px; align-items: center; }
+.filter-group + .filter-group { border-left: 1px solid var(--border); padding-left: 12px; margin-left: 6px; }
+.sort-help { cursor: help; font-size: 14px; color: var(--text-muted, #888); }
 .filter-bar .btn:hover { background: var(--row-hover); }
 .filter-bar .btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
 
@@ -853,6 +856,8 @@ button.ch-item.selected { background: var(--selected-bg); }
   .filter-bar.filters-expanded > .col-toggle-wrap { display: inline-block; }
   .filter-bar.filters-expanded input { width: 100%; }
   .filter-bar.filters-expanded select { width: 100%; }
+  .filter-group { flex-wrap: wrap; }
+  .filter-group + .filter-group { border-left: none; padding-left: 0; margin-left: 0; }
   .filter-bar .btn { min-height: 36px; }
   .node-filter-wrap { width: 100%; }
 
@@ -1271,7 +1276,7 @@ tr[data-hops]:hover { background: rgba(59,130,246,0.1); }
 
 /* #71 — Column visibility toggle */
 .col-toggle-wrap { position: relative; display: inline-block; }
-.col-toggle-btn { font-size: .8rem; padding: 4px 8px; cursor: pointer; background: var(--input-bg); border: 1px solid var(--border); border-radius: 4px; color: var(--text); }
+.col-toggle-btn { font-size: 13px; padding: 6px 10px; cursor: pointer; background: var(--input-bg); border: 1px solid var(--border); border-radius: 6px; color: var(--text); height: 34px; box-sizing: border-box; line-height: 1; }
 .col-toggle-menu { display: none; position: absolute; top: 100%; left: 0; z-index: 50; background: var(--card-bg); border: 1px solid var(--border); border-radius: 6px; padding: 6px 0; min-width: 150px; box-shadow: 0 4px 12px rgba(0,0,0,.15); }
 .col-toggle-menu.open { display: block; }
 .col-toggle-menu label { display: flex; align-items: center; gap: 6px; padding: 4px 12px; font-size: .82rem; cursor: pointer; color: var(--text); }
@@ -1471,7 +1476,7 @@ tr[data-hops]:hover { background: rgba(59,130,246,0.1); }
   display: inline-flex; align-items: center; padding: 6px 10px; border-radius: 6px;
   font-size: 13px; font-weight: 500; cursor: pointer; border: 1px solid var(--border);
   background: var(--input-bg); color: var(--text); transition: all 0.15s;
-  height: 34px; box-sizing: border-box; white-space: nowrap;
+  height: 34px; box-sizing: border-box; white-space: nowrap; line-height: 1;
 }
 .region-dropdown-trigger:hover { border-color: var(--accent); color: var(--accent); }
 .region-dropdown-menu {