feat: change workload traffic sorting to prioritize recent flows over volume with fallback to bytes

Update summarizeTraffic to sort flows by observedAt timestamp (newest first) instead of bytes, add fallback to bytes when timestamps are equal/invalid/missing, modify TrafficBars to re-sort top 5 flows by bytes for volume-based visualization while preserving timestamp-based ordering in main traffic list

frontend/src/pages/Workloads.tsx

@@ -122,7 +122,20 @@ function summarizeTraffic(traffic: Array<Record<string, unknown>>) {
       matchingPolicies,
     });
   }
-  return Array.from(summaries.values()).sort((left, right) => right.bytes - left.bytes);
+  return Array.from(summaries.values()).sort((left, right) => {
+    const leftTime = Date.parse(left.observedAt || "");
+    const rightTime = Date.parse(right.observedAt || "");
+    if (Number.isFinite(leftTime) && Number.isFinite(rightTime) && leftTime !== rightTime) {
+      return rightTime - leftTime;
+    }
+    if (Number.isFinite(rightTime) && !Number.isFinite(leftTime)) {
+      return 1;
+    }
+    if (Number.isFinite(leftTime) && !Number.isFinite(rightTime)) {
+      return -1;
+    }
+    return right.bytes - left.bytes;
+  });
 }
 
 function endpointText(flow: TrafficSummary) {
@@ -138,7 +151,7 @@ function uniqueValues(values: string[]) {
 }
 
 function TrafficBars({ traffic }: { traffic: TrafficSummary[] }) {
-  const top = traffic.slice(0, 5);
+  const top = [...traffic].sort((left, right) => right.bytes - left.bytes).slice(0, 5);
   const max = Math.max(...top.map((flow) => flow.bytes), 1);
   if (!top.length) {
     return <div className="rounded-md border border-border p-3 text-xs text-slate-500">No traffic data yet.</div>;