Add Gateway connectivity diagnostics and traffic chart improvements

src/web/utils/format.js

@@ -37,18 +37,13 @@ export function positiveByteDelta(previous, current) {
   return after > before ? formatByteString((after - before).toString()) : '';
 }
 
-export function trafficSampleMetrics(gatewayValue, proxyValue, maxValue, scale = 'linear') {
-  const gateway = byteString(gatewayValue);
-  const proxy = byteString(proxyValue);
-  const total = gateway + proxy;
+export function trafficScaleRatio(value, maxValue, scale = 'linear') {
+  const current = byteString(value);
   const max = byteString(maxValue);
-  const ratio = scale === 'log'
-    ? Math.log1p(Number(total)) / Math.log1p(Number(max))
-    : Number(total * 100n / (max || 1n)) / 100;
-  return {
-    height: max && total ? Math.max(10, Math.min(100, Math.round(ratio * 100))) : 0,
-    gatewayShare: total ? Number(gateway * 100n / total) : 0,
-  };
+  if (!current || !max) return 0;
+  return scale === 'log'
+    ? Math.log1p(Number(current)) / Math.log1p(Number(max))
+    : Number(current * 10_000n / max) / 10_000;
 }
 
 export function trafficAxisMid(maxValue, scale = 'linear') {
@@ -77,6 +72,21 @@ export function sortDevicesByTraffic(devices, direction = 'desc') {
     .map(({ device }) => device);
 }
 
+export function stabilizeDevicesByTraffic(devices, direction, previousIds = []) {
+  const ranked = sortDevicesByTraffic(devices, direction);
+  const byId = new Map(ranked.map((device) => [device.id, device]));
+  const ids = previousIds.filter((id) => byId.has(id));
+  const seen = new Set(ids);
+  for (const { id } of ranked) {
+    if (seen.has(id)) continue;
+    ids.push(id);
+    seen.add(id);
+  }
+  const ordered = ids.map((id) => byId.get(id));
+  const stable = [...ordered.filter(({ pinned }) => pinned), ...ordered.filter(({ pinned }) => !pinned)];
+  return { devices: stable, ids: stable.map(({ id }) => id) };
+}
+
 export function formatRelative(iso) {
   if (!iso) return "";
   const ts = new Date(iso).getTime();