From a259891007b05386d0d71f69c7b42c2d8cdddefe Mon Sep 17 00:00:00 2001
From: you <you@example.com>
Date: Sat, 21 Mar 2026 23:32:05 +0000
Subject: [PATCH] feat: add Chronological sort mode for expanded packet groups
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Pure timestamp order, no grouping — shows propagation sequence.
---
 public/index.html |  2 +-
 public/packets.js | 11 +++++++++--
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/public/index.html b/public/index.html
index c954721e..ea1a5655 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=1774135881"></script>
+  <script src="packets.js?v=1774135925"></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 dba51322..315e600c 100644
--- a/public/packets.js
+++ b/public/packets.js
@@ -702,7 +702,8 @@
           const sortMode = groupSortModes[p.hash] || SORT_OBSERVER;
           const obsLabel = sortMode === SORT_OBSERVER ? '<strong>Observer</strong>' : 'Observer';
           const pathLabel = sortMode === SORT_PATH_LENGTH ? '<strong>Path length</strong>' : 'Path length';
-          html += `<tr class="group-sort-bar"><td colspan="10" style="padding:2px 8px;font-size:0.8em;color:var(--text-muted)">Sort: <a href="#" data-action="sort-group" data-value="${p.hash}" data-sort="${SORT_OBSERVER}" style="color:var(--primary);cursor:pointer">${obsLabel}</a> · <a href="#" data-action="sort-group" data-value="${p.hash}" data-sort="${SORT_PATH_LENGTH}" style="color:var(--primary);cursor:pointer">${pathLabel}</a></td></tr>`;
+          const chronoLabel = sortMode === SORT_CHRONO ? '<strong>Chronological</strong>' : 'Chronological';
+          html += `<tr class="group-sort-bar"><td colspan="10" style="padding:2px 8px;font-size:0.8em;color:var(--text-muted)">Sort: <a href="#" data-action="sort-group" data-value="${p.hash}" data-sort="${SORT_OBSERVER}" style="color:var(--primary);cursor:pointer">${obsLabel}</a> · <a href="#" data-action="sort-group" data-value="${p.hash}" data-sort="${SORT_PATH_LENGTH}" style="color:var(--primary);cursor:pointer">${pathLabel}</a> · <a href="#" data-action="sort-group" data-value="${p.hash}" data-sort="${SORT_CHRONO}" style="color:var(--primary);cursor:pointer">${chronoLabel}</a></td></tr>`;
           for (const c of p._children) {
             const typeName = payloadTypeName(c.payload_type);
             const typeClass = payloadTypeColor(c.payload_type);
@@ -1251,6 +1252,7 @@
   // Observation sort modes
   const SORT_OBSERVER = 'observer';
   const SORT_PATH_LENGTH = 'path';
+  const SORT_CHRONO = 'chrono';
   const groupSortModes = {}; // hash → sort mode
 
   function getPathHopCount(c) {
@@ -1261,7 +1263,12 @@
     if (!group || !group._children) return;
     const mode = groupSortModes[group.hash] || SORT_OBSERVER;
 
-    if (mode === SORT_PATH_LENGTH) {
+    if (mode === SORT_CHRONO) {
+      group._children.sort((a, b) => {
+        const tA = a.timestamp || '', tB = b.timestamp || '';
+        return tA < tB ? -1 : tA > tB ? 1 : 0;
+      });
+    } else if (mode === SORT_PATH_LENGTH) {
       group._children.sort((a, b) => {
         const lenA = getPathHopCount(a), lenB = getPathHopCount(b);
         if (lenA !== lenB) return lenA - lenB;