Add traffic group sorting controls

test/web/live-traffic-contract.test.js

@@ -7,6 +7,7 @@ import { assertLiveTrafficSnapshot } from '../../.test-dist/src/shared/liveTraff
 import {
   groupTrafficConnections,
   reconcileTrafficGroups,
+  sortTrafficGroups,
   trafficGroupMatches,
 } from '../../.test-dist/src/web/features/traffic/trafficRows.js';
 
@@ -254,6 +255,40 @@ test('traffic groups combine compatible UUIDs with exact byte sums and whole-gro
   assert.equal(trafficGroupMatches(groups[0], '', 'direct', 'all'), false);
 });
 
+test('traffic groups sort by bounded frequency or latest start without changing the groups', () => {
+  const groups = groupTrafficConnections([
+    trafficConnection('latest', {
+      startedAt: '2026-08-31T09:59:00.000Z',
+      destination: { domain: 'latest.test' },
+    }),
+    ...['a', 'b', 'c'].map((id, index) => trafficConnection(`popular-${id}`, {
+      startedAt: `2026-08-31T09:0${index}:00.000Z`,
+      destination: { domain: 'popular.test' },
+    })),
+    ...['a', 'b'].map((id) => trafficConnection(`frequent-recent-${id}`, {
+      startedAt: '2026-08-31T09:59:00.000Z',
+      destination: { domain: 'frequent-recent.test' },
+    })),
+  ]);
+  const original = groups.map(({ label }) => label);
+
+  assert.deepEqual(sortTrafficGroups(groups, 'popular').map(({ label }) => label), [
+    'popular.test',
+    'frequent-recent.test',
+    'latest.test',
+  ]);
+  assert.deepEqual(sortTrafficGroups(groups, 'recent').map(({ label }) => label), [
+    'frequent-recent.test',
+    'latest.test',
+    'popular.test',
+  ]);
+  assert.deepEqual(groups.map(({ label }) => label), original);
+  assert.match(feature, /const \[sortMode, setSortMode\] = useState<TrafficSort>\('popular'\)/);
+  assert.match(feature, /role="group" aria-label="Сортировка соединений"/);
+  assert.match(feature, /\['popular', 'Популярные'\][\s\S]*\['recent', 'Последние'\]/);
+  assert.match(feature, /aria-pressed=\{sortMode === value\}/);
+});
+
 test('traffic grouping keeps incompatible and unknown destinations separate', () => {
   const base = trafficConnection('base', { destination: { domain: 'example.com', ip: '203.0.113.1' } });
   const same = trafficConnection('same', { destination: { domain: 'Example.COM', ip: '203.0.113.2' } });