From e835819db3f4c91c3598fdaeeddc7552ffc9b8ae Mon Sep 17 00:00:00 2001
From: efiten <erwin.fiten@gmail.com>
Date: Sat, 28 Mar 2026 16:48:33 +0100
Subject: [PATCH] feat: add hash bytes (HB) column to packets table

Shows the hop hash size in bytes (1-4) decoded from the path byte
of each packet's raw hex. Displayed as 'HB', hidden on small screens.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 public/packets.js | 4 ++++
 public/style.css  | 3 ++-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/public/packets.js b/public/packets.js
index b379b97..825490e 100644
--- a/public/packets.js
+++ b/public/packets.js
@@ -561,6 +561,7 @@
       <table class="data-table" id="pktTable">
         <thead><tr>
           <th scope="col"></th><th scope="col" class="col-region">Region</th><th scope="col" class="col-time">Time</th><th scope="col" class="col-hash">Hash</th><th scope="col" class="col-size">Size</th>
+          <th scope="col" class="col-hashsize">HB</th>
           <th scope="col" class="col-type">Type</th><th scope="col" class="col-observer">Observer</th><th scope="col" class="col-path">Path</th><th scope="col" class="col-rpt">Rpt</th><th scope="col" class="col-details">Details</th>
         </tr></thead>
         <tbody id="pktBody"></tbody>
@@ -1076,6 +1077,8 @@
       const typeName = payloadTypeName(p.payload_type);
       const typeClass = payloadTypeColor(p.payload_type);
       const size = p.raw_hex ? Math.floor(p.raw_hex.length / 2) : 0;
+      const rawPathByte = p.raw_hex ? parseInt(p.raw_hex.slice(2, 4), 16) : NaN;
+      const hashBytes = isNaN(rawPathByte) ? null : ((rawPathByte >> 6) + 1);
       const pathStr = renderPath(pathHops, p.observer_id);      const detail = getDetailPreview(decoded);
 
       return `<tr data-id="${p.id}" data-hash="${p.hash || ''}" data-action="select-hash" data-value="${p.hash || p.id}" tabindex="0" role="row" class="${selectedId === p.id ? 'selected' : ''}">
@@ -1083,6 +1086,7 @@
         <td class="col-time">${timeAgo(p.timestamp)}</td>
         <td class="mono col-hash">${truncate(p.hash || String(p.id), 8)}</td>
         <td class="col-size">${size}B</td>
+        <td class="col-hashsize mono">${hashBytes !== null ? hashBytes : '—'}</td>
         <td class="col-type"><span class="badge badge-${typeClass}">${typeName}</span></td>
         <td class="col-observer">${truncate(obsName(p.observer_id), 16)}</td>
         <td class="col-path"><span class="path-hops">${pathStr}</span></td>
diff --git a/public/style.css b/public/style.css
index e30c5a7..4593c11 100644
--- a/public/style.css
+++ b/public/style.css
@@ -1205,7 +1205,7 @@ button.ch-item.ch-item-encrypted .ch-badge { filter: grayscale(0.6); }
 
 /* Hide low-value columns on mobile */
 @media (max-width: 640px) {
-  .col-region, .col-rpt, .col-size, .col-pubkey { display: none; }
+  .col-region, .col-rpt, .col-size, .col-hashsize, .col-pubkey { display: none; }
 }
 
 /* Clickable hop links */
@@ -1351,6 +1351,7 @@ tr[data-hops]:hover { background: rgba(59,130,246,0.1); }
 .hide-col-observer .col-observer,
 .hide-col-path .col-path,
 .hide-col-rpt .col-rpt,
+.hide-col-hashsize .col-hashsize,
 .hide-col-details .col-details { display: none; }
 
 /* === Home page fixes === */