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' } });

test/web/style-boundaries.test.js

@@ -59,7 +59,7 @@ const acceptedLedger = {
     ruleDeclarationSequences: '6226141f0ff66b775008149ccf7d7a55e952c3f5d75961e275f0509ee352a4d6',
     selectors: '3a165769801a80e9bee5082728a58f38bb427a19ac2c764de8586a5831c9ec87',
     variableReferences: 'bdae48e482697d7cff6fdc434860cdacf19c8e3cee24b35574e461c3cff73a51',
-    witnesses: 'aa6334ad87124e5c0dc56af0f8927523aad3002444395adb1c50c0b8a36601bb',
+    witnesses: '94e1f95de681072ed27f7c576e682893faf55c7489e6a35abb78a5c0d1c62cfb',
   },
 };
 
@@ -212,7 +212,7 @@ test('client typography uses the shared semantic scale outside the token owner',
 
 test('accepted stylesheet has pinned declaration, selector, keyframe, variable, and cascade ledgers', () => {
   const witnesses = readStyleWitnesses(root);
-  assert.equal(witnesses.length, 1281);
+  assert.equal(witnesses.length, 1285);
   assert.equal(witnesses.filter((witness) => witness.unknown || witness.ancestorUnknown).length, 0);
   const ledger = createStyleLedger(readStyleSource(root), { witnesses });
   assert.deepEqual(ledger.counts, acceptedLedger.counts);