@skyhook-io/radar-app 1.15.0 → 1.16.0

package/src/components/traffic/TrafficView.tsx

@@ -6,14 +6,17 @@ import { TrafficWizard } from './TrafficWizard'
 import { TrafficGraph, type TrafficGraphSelection } from './TrafficGraph'
 import { TrafficFilterSidebar } from './TrafficFilterSidebar'
 import { TrafficFlowListProvider } from './TrafficFlowListContext'
-import { Loader2, Filter, Plug, ChevronDown, List, Activity, AlertTriangle } from 'lucide-react'
+import { Loader2, Filter, Plug, ChevronDown, List, Activity, AlertTriangle, Clock } from 'lucide-react'
 import { clsx } from 'clsx'
 import { useQueryClient } from '@tanstack/react-query'
 import { useDock } from '../dock'
 import { AlertBanner, EmptyState, PaneLoader, FreshnessControl } from '@skyhook-io/k8s-ui'
 import { useConnection } from '../../context/ConnectionContext'
 import { Tooltip } from '../ui/Tooltip'
-import { matchesStatusRanges, bucketsFromCounts, bucketsFromStatus, isRateBasedSource, keepAvailable, effectiveThreshold, volumeUnit, type VolumeUnit, isExternalKind } from './trafficFilters'
+import { matchesStatusRanges, bucketsFromCounts, bucketsFromStatus, isRateBasedSource, keepAvailable, effectiveThreshold, volumeUnit, type VolumeUnit, isExternalKind, mergeFlowVolume, coverageLabel } from './trafficFilters'
+
+// Consecutive 2s retries of an empty result that came with a transient warning.
+const MAX_EMPTY_RETRIES = 5
 
 // Addon types for filtering
 export type AddonMode = 'show' | 'group' | 'hide'
@@ -442,19 +445,34 @@ export function TrafficView({ namespaces }: TrafficViewProps) {
   // an attribute it does not export, traffic it cannot orient. Retrying returns
   // the same answer, so retrying forever is all cost and no progress.
   const warningIsPermanent = flowsData?.warningKind === 'partial'
-
-  // Auto-retry when flows return with warning but no data (e.g., port-forward not ready yet)
+  const coverage = coverageLabel(flowsData?.coveredSince, flowsData?.timestamp)
+  // An 'incomplete' one is a fetch that worked but could not see everything
+  // (events lost, nodes unreachable). Not a failure, so not retried at once.
+  const warningIsIncomplete = flowsData?.warningKind === 'incomplete'
+
+  // Auto-retry when flows return with warning but no data (e.g., port-forward not
+  // ready yet). Bounded: a warning that keeps coming back — a node the relay
+  // cannot reach, a query that keeps failing — is the answer rather than a hiccup,
+  // and polling it every 2s forever costs the source a burst of queries each time.
+  const emptyRetriesRef = useRef(0)
+  // A different question gets its own retries.
+  useEffect(() => {
+    emptyRetriesRef.current = 0
+  }, [namespaces, timeRange])
   useEffect(() => {
-    if (
-      flowsData?.warning &&
-      !warningIsPermanent &&
-      (!flowsData.aggregated || flowsData.aggregated.length === 0) &&
-      !flowsFetching
-    ) {
-      const timer = setTimeout(() => refetchFlowsRaw(), 2000)
+    const empty = !flowsData?.aggregated || flowsData.aggregated.length === 0
+    if (!flowsData?.warning || !empty) {
+      emptyRetriesRef.current = 0
+      return
+    }
+    if (!warningIsPermanent && !warningIsIncomplete && !flowsFetching && emptyRetriesRef.current < MAX_EMPTY_RETRIES) {
+      const timer = setTimeout(() => {
+        emptyRetriesRef.current += 1
+        refetchFlowsRaw()
+      }, 2000)
       return () => clearTimeout(timer)
     }
-  }, [flowsData, warningIsPermanent, flowsFetching, refetchFlowsRaw])
+  }, [flowsData, warningIsPermanent, warningIsIncomplete, flowsFetching, refetchFlowsRaw])
 
   // Filter flows based on user preferences
   // Note: namespace filtering is done server-side via the global namespace selector
@@ -765,17 +783,7 @@ export function TrafficView({ namespaces }: TrafficViewProps) {
 
       const existing = aggregatedMap.get(key)
       if (existing) {
-        // Merge connections and bytes
-        existing.connections += flow.connections
-        existing.bytesSent += flow.bytesSent
-        existing.bytesRecv += flow.bytesRecv
-        existing.flowCount += flow.flowCount
-        if (flow.requestCount) {
-          existing.requestCount = (existing.requestCount || 0) + flow.requestCount
-        }
-        if (flow.errorCount) {
-          existing.errorCount = (existing.errorCount || 0) + flow.errorCount
-        }
+        mergeFlowVolume(existing, flow)
         // Everything merged here shares the key's direction-known state, so the
         // flag is already correct on the entry that was created first.
       } else {
@@ -819,11 +827,7 @@ export function TrafficView({ namespaces }: TrafficViewProps) {
 
         const existing = internetFlowsMap.get(destKey)
         if (existing) {
-          // Merge into existing "Internet" flow
-          existing.connections += flow.connections
-          existing.bytesSent += flow.bytesSent
-          existing.bytesRecv += flow.bytesRecv
-          existing.flowCount += flow.flowCount
+          mergeFlowVolume(existing, flow)
         } else {
           // Create new "Internet" → destination flow
           internetFlowsMap.set(destKey, {
@@ -852,6 +856,8 @@ export function TrafficView({ namespaces }: TrafficViewProps) {
     // Track totals for aggregated edges
     let addonInternetTotal = 0
     let addonToK8sTotal = 0
+    let addonInternetRate = 0
+    let addonToK8sRate = 0
     const processedFlows: AggregatedFlow[] = []
 
     // Check if destination is the kubernetes API server
@@ -868,6 +874,7 @@ export function TrafficView({ namespaces }: TrafficViewProps) {
       // Internet → Addon: aggregate into single edge to group
       if (sourceIsInternet && destIsAddon) {
         addonInternetTotal += flow.connections
+        addonInternetRate += flow.requestRate ?? 0
         processedFlows.push({
           ...flow,
           source: {
@@ -880,6 +887,7 @@ export function TrafficView({ namespaces }: TrafficViewProps) {
       // Addon → Kubernetes API: aggregate into single edge from group
       else if (sourceIsAddon && destIsK8sAPI) {
         addonToK8sTotal += flow.connections
+        addonToK8sRate += flow.requestRate ?? 0
         processedFlows.push({
           ...flow,
           destination: {
@@ -909,6 +917,7 @@ export function TrafficView({ namespaces }: TrafficViewProps) {
         protocol: 'tcp',
         port: 0,
         connections: addonInternetTotal,
+        ...(addonInternetRate > 0 && { requestRate: addonInternetRate }),
         bytesSent: 0,
         bytesRecv: 0,
         flowCount: 1,
@@ -932,6 +941,7 @@ export function TrafficView({ namespaces }: TrafficViewProps) {
         protocol: 'tcp',
         port: 443,
         connections: addonToK8sTotal,
+        ...(addonToK8sRate > 0 && { requestRate: addonToK8sRate }),
         bytesSent: 0,
         bytesRecv: 0,
         flowCount: 1,
@@ -1079,7 +1089,7 @@ export function TrafficView({ namespaces }: TrafficViewProps) {
   }
 
   return (
-    <TrafficFlowListProvider flows={listFlows} graphSelection={graphSelection} clearSelection={() => setGraphSelection(null)}>
+    <TrafficFlowListProvider flows={listFlows} responsesCallerOriented={flowsData?.l7ResponsesCallerOriented === true} graphSelection={graphSelection} clearSelection={() => setGraphSelection(null)}>
     <div className="flex h-full w-full">
       {/* Sidebar */}
       <TrafficFilterSidebar
@@ -1207,6 +1217,15 @@ export function TrafficView({ namespaces }: TrafficViewProps) {
                     </button>
                     </Tooltip>
                   )}
+                  {coverage && (
+                    // Not a warning: a busy cluster reaches the limit on every
+                    // fetch. It says which part of the window the map shows.
+                    <Tooltip content={`Radar reads at most ${(flowsData?.nodeFlowLimit ?? 0).toLocaleString()} of the newest flows from each node. At least one node reached that limit before the start of the ${timeRange} window, so its earlier traffic is not included. Other nodes may still show older flows.`}>
+                      <div className="flex items-center gap-1 px-2 py-1 rounded-lg bg-theme-surface/90 backdrop-blur border border-theme-border text-[10px] text-theme-text-secondary tabular-nums">
+                        <Clock className="w-3 h-3" /> {coverage} of {timeRange}
+                      </div>
+                    </Tooltip>
+                  )}
                   <div className="flex items-center px-2 py-1 rounded-lg bg-theme-surface/90 backdrop-blur border border-theme-border text-[10px] text-theme-text-tertiary tabular-nums">
                     {flowStats.shown}/{flowStats.total}
                   </div>
@@ -1233,7 +1252,7 @@ export function TrafficView({ namespaces }: TrafficViewProps) {
             />
           ) : finalFlows.length > 0 ? (
             <>
-              {flowsData?.warning && warningIsPermanent && (
+              {flowsData?.warning && (
                 // Sits below the two chip rows (both top-3) rather than beside
                 // them: centred at that height it would cover the flow count and
                 // the refresh control at common widths. role/aria-live because it
@@ -1245,12 +1264,15 @@ export function TrafficView({ namespaces }: TrafficViewProps) {
                 >
                   <AlertBanner
                     variant="warning"
-                    // Not "incomplete": every warning that reaches here is about a
-                    // value on an edge that is shown being wrong or absent — a port
-                    // reported as 0, UDP reported as TCP, received bytes understated.
-                    // "Incomplete" sends the reader looking for workloads that are
-                    // missing, which is the one thing none of these mean.
-                    title="Some values on this map are unreliable"
+                    // The title follows the kind. A partial warning is about values
+                    // on edges that are shown — a port reported as 0, UDP as TCP, a
+                    // 5xx rate that failed to load — so it says "unreliable", not
+                    // "incomplete", which would send the reader looking for missing
+                    // workloads. An incomplete or transient one beside flows is
+                    // exactly that: a stream cut short, events lost, a node the
+                    // relay could not reach, a TCP query that failed — edges may
+                    // be missing from what is drawn.
+                    title={warningIsPermanent ? 'Some values on this map are unreliable' : 'Some traffic may be missing from this map'}
                     message={flowsData.warning}
                   />
                 </div>
@@ -1324,7 +1346,9 @@ export function TrafficView({ namespaces }: TrafficViewProps) {
                   headline={
                     warningIsPermanent
                       ? 'No traffic Radar can place on the map'
-                      : 'Unable to fetch traffic data'
+                      : warningIsIncomplete
+                        ? 'No traffic seen, but some may be missing'
+                        : 'Unable to fetch traffic data'
                   }
                   body={flowsData.warning}
                   className="max-w-md"

package/src/components/traffic/TrafficWizard.tsx

@@ -288,8 +288,10 @@ export function TrafficWizard({
               </div>
             )}
 
-            {/* No recommendation */}
-            {!recommendation && (
+            {/* No recommendation. Not when a source is installed but unusable:
+                its banner above is the answer, and "install Cilium with Hubble"
+                would tell the user to install what they already have. */}
+            {!recommendation && !sourcesData?.detected.some(s => s.status === 'not_found') && (
               <div className="border border-theme-border rounded-lg p-4 space-y-3">
                 <p className="text-sm text-theme-text-secondary">
                   No traffic source detected. Install Cilium with Hubble for traffic visibility.

package/src/components/traffic/trafficFilters.test.ts

@@ -1,5 +1,6 @@
 import { describe, it, expect } from 'vitest'
-import { matchesStatusRanges, bucketsFromCounts, bucketsFromStatus, isRateBasedSource, keepAvailable, effectiveThreshold, volumeUnit, isExternalKind, isPolicyDropReason } from './trafficFilters'
+import type { AggregatedFlow, TrafficFlow } from '../../types'
+import { matchesStatusRanges, bucketsFromCounts, bucketsFromStatus, isRateBasedSource, keepAvailable, effectiveThreshold, volumeUnit, isExternalKind, isPolicyDropReason, requestRateOf, errorRateOf, formatRate, displayVolume, mergeFlowVolume, dedupeHTTPPairs, coverageLabel, latencyWeightOf } from './trafficFilters'
 
 describe('matchesStatusRanges', () => {
   it('does not filter when nothing is selected', () => {
@@ -128,3 +129,155 @@ describe('isPolicyDropReason', () => {
     expect(isPolicyDropReason('', 0)).toBe(false)
   })
 })
+
+describe('edge rates', () => {
+  it('reads the unrounded rates, so a trickle of errors is not a 100% error rate', () => {
+    const flow = { requestRate: 0.3, requestCount: 1, errorRate: 0.01, errorCount: 1 }
+    expect(errorRateOf(flow) / requestRateOf(flow)).toBeCloseTo(0.0333, 3)
+  })
+
+  it('falls back to the rounded counts from a server that sends no rates', () => {
+    expect(requestRateOf({ requestCount: 7 })).toBe(7)
+    expect(errorRateOf({ errorCount: 2 })).toBe(2)
+    expect(requestRateOf({})).toBe(0)
+  })
+
+  it('shows the unrounded rate for a rate-based edge, and the connection count otherwise', () => {
+    expect(displayVolume({ requestRate: 0.3, connections: 1 }, true)).toBe(0.3)
+    expect(displayVolume({ connections: 4 }, true)).toBe(4)
+    expect(displayVolume({ requestRate: 0.3, connections: 12 }, false)).toBe(12)
+  })
+
+  it('formats a rate without rounding a trickle away', () => {
+    expect(formatRate(0)).toBe('0')
+    expect(formatRate(0.004)).toBe('<0.01')
+    expect(formatRate(0.3)).toBe('0.30')
+    expect(formatRate(2.46)).toBe('2.5')
+    expect(formatRate(12.4)).toBe('12')
+    expect(formatRate(1530)).toBe('1.5K')
+  })
+})
+
+describe('mergeFlowVolume', () => {
+  it('sums every figure the graph displays, not only connections and bytes', () => {
+    const base = { source: { name: 'a', namespace: '', kind: 'External' }, destination: { name: 'web', namespace: 'shop', kind: 'Pod' }, protocol: 'tcp', port: 80, lastSeen: '' }
+    const into = { ...base, flowCount: 1, bytesSent: 10, bytesRecv: 20, connections: 2, requestCount: 2, requestRate: 2, errorRate: 0.5, errorCount: 1 }
+    mergeFlowVolume(into, { ...base, flowCount: 1, bytesSent: 5, bytesRecv: 5, connections: 8, requestCount: 8, requestRate: 8 })
+    expect(into).toMatchObject({ connections: 10, bytesSent: 15, bytesRecv: 25, flowCount: 2, requestCount: 10, requestRate: 10, errorRate: 0.5, errorCount: 1 })
+  })
+})
+
+describe('mergeFlowVolume latency', () => {
+  const base: AggregatedFlow = { source: { name: 'a', namespace: 'shop', kind: 'Pod' }, destination: { name: 'web', namespace: 'shop', kind: 'Pod' }, protocol: 'tcp', port: 80, lastSeen: '', flowCount: 1, bytesSent: 0, bytesRecv: 0, connections: 1 }
+
+  it('weights average latency by request rate, whatever the order', () => {
+    const fast = { ...base, requestRate: 100, avgLatencyMs: 10 }
+    const slow = { ...base, requestRate: 1, avgLatencyMs: 1000 }
+    const a = { ...fast }
+    mergeFlowVolume(a, slow)
+    const b = { ...slow }
+    mergeFlowVolume(b, fast)
+    expect(a.avgLatencyMs).toBeCloseTo(19.8, 1)
+    expect(b.avgLatencyMs).toBeCloseTo(19.8, 1)
+  })
+
+  it('ignores traffic that had no latency measured, in any merge order', () => {
+    const a = { ...base, requestRate: 1, avgLatencyMs: 10 }
+    const b = { ...base, requestRate: 100 }
+    const c = { ...base, requestRate: 1, avgLatencyMs: 1000 }
+    for (const order of [[a, b, c], [c, b, a], [a, c, b], [b, a, c]]) {
+      const into = { ...order[0] }
+      for (const f of order.slice(1)) mergeFlowVolume(into, f)
+      expect(into.avgLatencyMs).toBeCloseTo(505, 6)
+    }
+  })
+
+  it('keeps the weight through a copy of a merged edge', () => {
+    const into = { ...base, requestRate: 1, avgLatencyMs: 1000 }
+    mergeFlowVolume(into, { ...base, requestRate: 100 })
+    const collapsed = { ...into, source: { name: 'Internet', namespace: '', kind: 'Internet' } }
+    mergeFlowVolume(collapsed, { ...base, requestRate: 1, avgLatencyMs: 10 })
+    expect(collapsed.avgLatencyMs).toBeCloseTo(505, 6)
+  })
+
+  it('averages edges without rates equally, however many are merged', () => {
+    const into = { ...base, avgLatencyMs: 10 }
+    mergeFlowVolume(into, { ...base, avgLatencyMs: 20 })
+    mergeFlowVolume(into, { ...base, avgLatencyMs: 30 })
+    expect(into.avgLatencyMs).toBeCloseTo(20, 6)
+  })
+
+  it('takes the only latency there is', () => {
+    const into = { ...base }
+    mergeFlowVolume(into, { ...base, avgLatencyMs: 7 })
+    expect(into.avgLatencyMs).toBe(7)
+  })
+})
+
+describe('dedupeHTTPPairs', () => {
+  const ep = (name: string) => ({ name, namespace: 'shop', kind: 'Pod' })
+  const rec = (from: string, to: string, l7Type: string, port = 80): TrafficFlow => ({
+    source: ep(from), destination: ep(to), protocol: 'tcp', port, l7Protocol: 'HTTP', l7Type,
+    httpMethod: 'GET', httpPath: '/orders', bytesSent: 0, bytesRecv: 0, connections: 1, verdict: 'forwarded', lastSeen: '',
+  } as TrafficFlow)
+  const rows = (fs: TrafficFlow[]) => fs.map(f => `${f.source.name}>${f.destination.name}:${f.port}:${f.l7Type}`)
+
+  describe('from a server whose responses run caller → callee', () => {
+    it('pairs a response with its request', () => {
+      expect(rows(dedupeHTTPPairs([rec('a', 'b', 'REQUEST'), rec('a', 'b', 'RESPONSE')], true))).toEqual(['a>b:80:RESPONSE'])
+    })
+    it('keeps an unanswered call the other way on the same route', () => {
+      expect(rows(dedupeHTTPPairs([rec('a', 'b', 'RESPONSE'), rec('b', 'a', 'REQUEST')], true))).toEqual(['a>b:80:RESPONSE', 'b>a:80:REQUEST'])
+    })
+    it('keeps an unanswered call on another port', () => {
+      expect(rows(dedupeHTTPPairs([rec('a', 'b', 'REQUEST'), rec('a', 'b', 'RESPONSE'), rec('a', 'b', 'REQUEST', 8080)], true)))
+        .toEqual(['a>b:80:RESPONSE', 'a>b:8080:REQUEST'])
+    })
+  })
+
+  describe('from an older server whose responses run server → client', () => {
+    it('pairs the reversed response with its request', () => {
+      expect(rows(dedupeHTTPPairs([rec('a', 'b', 'REQUEST'), rec('b', 'a', 'RESPONSE', 41732)], false))).toEqual(['b>a:41732:RESPONSE'])
+    })
+  })
+
+  it('keeps a request that got no response', () => {
+    expect(rows(dedupeHTTPPairs([rec('a', 'b', 'REQUEST')], true))).toEqual(['a>b:80:REQUEST'])
+  })
+})
+
+describe('merged latency', () => {
+  const base: AggregatedFlow = { source: { name: 'a', namespace: 'shop', kind: 'Pod' }, destination: { name: 'web', namespace: 'shop', kind: 'Pod' }, protocol: 'tcp', port: 80, lastSeen: '', flowCount: 1, bytesSent: 0, bytesRecv: 0, connections: 1 }
+
+  it('drops percentiles once two edges with latency are merged', () => {
+    const into = { ...base, avgLatencyMs: 10, latencySamples: 90, latencyP50Ms: 9, latencyP95Ms: 30, latencyP99Ms: 40 }
+    mergeFlowVolume(into, { ...base, avgLatencyMs: 100, latencySamples: 10, latencyP50Ms: 90, latencyP95Ms: 300, latencyP99Ms: 400 })
+    expect(into.latencyP50Ms).toBeUndefined()
+    expect(into.latencyP95Ms).toBeUndefined()
+    expect(into.avgLatencyMs).toBeCloseTo(19, 6)
+  })
+
+  it('keeps the percentiles of the only edge that had latency', () => {
+    const into = { ...base }
+    mergeFlowVolume(into, { ...base, avgLatencyMs: 10, latencySamples: 5, latencyP95Ms: 30 })
+    expect(into.latencyP95Ms).toBe(30)
+    mergeFlowVolume(into, { ...base })
+    expect(into.latencyP95Ms).toBe(30)
+  })
+
+  it('weights a response-level edge by its samples', () => {
+    expect(latencyWeightOf({ ...base, avgLatencyMs: 5, latencySamples: 42 })).toBe(42)
+    expect(latencyWeightOf({ ...base, avgLatencyMs: 5, requestRate: 3, latencySamples: 42 })).toBe(3)
+    expect(latencyWeightOf({ ...base })).toBe(0)
+  })
+})
+
+describe('coverageLabel', () => {
+  it('says how far back the flows reach from when they were collected', () => {
+    expect(coverageLabel('2026-09-30T08:37:24Z', '2026-09-30T08:39:04Z')).toBe('last 1m 40s')
+    expect(coverageLabel('2026-09-30T08:38:59Z', '2026-09-30T08:39:04Z')).toBe('last 5s')
+  })
+  it('is empty when the window is fully covered', () => {
+    expect(coverageLabel(undefined, '2026-09-30T08:39:04Z')).toBeNull()
+  })
+})

package/src/components/traffic/trafficFilters.ts

@@ -1,3 +1,5 @@
+import type { AggregatedFlow, TrafficFlow } from '../../types'
+
 /**
  * Does a flow fall into one of the selected HTTP status ranges?
  *
@@ -51,6 +53,115 @@ export function isRateBasedSource(source: string | undefined): boolean {
   return source === 'istio' || source === 'beyla'
 }
 
+/**
+ * The request and 5xx rates of an edge from a rate-based source, unrounded.
+ *
+ * requestCount / errorCount carry the same figures rounded with a floor of one,
+ * which keeps a trickle visible but makes their ratio meaningless at low rates:
+ * 0.3 req/s with 0.01 err/s rounds to one of each, a 100% error rate. The counts
+ * are only read when the rates are absent — Radar Hub renders clusters whose
+ * Radar predates requestRate / errorRate, and for those they are all there is.
+ */
+export function requestRateOf(flow: Pick<AggregatedFlow, 'requestRate' | 'requestCount'>): number {
+  return flow.requestRate ?? flow.requestCount ?? 0
+}
+export function errorRateOf(flow: Pick<AggregatedFlow, 'errorRate' | 'errorCount'>): number {
+  return flow.errorRate ?? flow.errorCount ?? 0
+}
+
+/**
+ * The volume shown for an edge. For a rate-based source `connections` is its
+ * request rate rounded with a floor of one — the graph sizes, sorts and filters
+ * on that integer — so what is printed is the unrounded rate where the edge has
+ * one. An edge with no HTTP rate (plain TCP) keeps its connection figure.
+ */
+export function displayVolume(flow: Pick<AggregatedFlow, 'requestRate' | 'connections'>, isRateBased: boolean): number {
+  return isRateBased && flow.requestRate ? flow.requestRate : flow.connections
+}
+
+/**
+ * A merged edge records the weight behind its average latency on itself, so a
+ * later `{...flow}` copy — the Internet collapse, addon grouping — carries it.
+ * Client-only: the server never sends it.
+ */
+type LatencyWeighted = AggregatedFlow & { latencyWeight?: number }
+
+/**
+ * How much traffic an edge's average latency stands for: its request rate, or
+ * one for an edge with no rate, summed through merges. Zero when it has none.
+ * Used to average latencies so a slow trickle does not stand for a busy path.
+ */
+export function latencyWeightOf(flow: AggregatedFlow): number {
+  const merged = (flow as LatencyWeighted).latencyWeight
+  if (merged !== undefined) return merged
+  return flow.avgLatencyMs ? (flow.requestRate || flow.latencySamples || 1) : 0
+}
+
+/**
+ * Fold one aggregated flow's volume into another's, for the client-side merges
+ * that collapse several edges into one. Every figure displayVolume or the error
+ * rate reads has to be summed here: a field left out keeps only the first
+ * merged edge's value.
+ */
+export function mergeFlowVolume(into: AggregatedFlow, flow: AggregatedFlow): void {
+  // A metric-based source reports only an average latency per edge, so the
+  // merged edge's is theirs weighted by request rate. The weight behind a merged
+  // average is carried apart from the edge's request rate, which also counts
+  // traffic that had no latency measured: weighting by that would make the
+  // result depend on the order the edges arrived in.
+  const wInto = latencyWeightOf(into)
+  const wFlow = latencyWeightOf(flow)
+  if (wFlow > 0) {
+    if (wInto > 0) {
+      into.avgLatencyMs = (into.avgLatencyMs! * wInto + flow.avgLatencyMs! * wFlow) / (wInto + wFlow)
+      // Percentiles of two edges cannot be combined into a percentile of both,
+      // so a merged edge that had latency on both sides keeps only the average.
+      delete into.latencyP50Ms
+      delete into.latencyP95Ms
+      delete into.latencyP99Ms
+    } else {
+      into.avgLatencyMs = flow.avgLatencyMs
+      into.latencyP50Ms = flow.latencyP50Ms
+      into.latencyP95Ms = flow.latencyP95Ms
+      into.latencyP99Ms = flow.latencyP99Ms
+    }
+  }
+  const weighted: LatencyWeighted = into
+  weighted.latencyWeight = wInto + wFlow
+  into.connections += flow.connections
+  into.bytesSent += flow.bytesSent
+  into.bytesRecv += flow.bytesRecv
+  into.flowCount += flow.flowCount
+  if (flow.requestCount) into.requestCount = (into.requestCount || 0) + flow.requestCount
+  if (flow.errorCount) into.errorCount = (into.errorCount || 0) + flow.errorCount
+  if (flow.requestRate) into.requestRate = (into.requestRate || 0) + flow.requestRate
+  if (flow.errorRate) into.errorRate = (into.errorRate || 0) + flow.errorRate
+}
+
+/**
+ * How much of the requested window the flows cover, as a short label: "last
+ * 1m 40s". Null when the whole window is covered. Measured back from when the
+ * data was collected, not from now.
+ */
+export function coverageLabel(coveredSince: string | undefined, collectedAt: string | undefined): string | null {
+  if (!coveredSince || !collectedAt) return null
+  const seconds = Math.max(0, Math.round((Date.parse(collectedAt) - Date.parse(coveredSince)) / 1000))
+  if (!Number.isFinite(seconds)) return null
+  const m = Math.floor(seconds / 60)
+  const s = seconds % 60
+  return `last ${m > 0 ? `${m}m ${s}s` : `${s}s`}`
+}
+
+/** A per-second rate, precise enough to tell a trickle from nothing: 0.30, 12, 1.2K. */
+export function formatRate(rate: number): string {
+  if (rate >= 1000) return `${(rate / 1000).toFixed(1)}K`
+  if (rate >= 10) return rate.toFixed(0)
+  if (rate >= 1) return rate.toFixed(1)
+  if (rate >= 0.01) return rate.toFixed(2)
+  if (rate > 0) return '<0.01'
+  return '0'
+}
+
 /**
  * Narrow a set of chosen filter values to the ones still offered.
  *
@@ -146,3 +257,33 @@ export function isPolicyDropReason(dropReasonDesc: string | undefined, deniedByC
   const code = (dropReasonDesc ?? '').toUpperCase()
   return code === 'POLICY_DENIED' || code === 'POLICY_DENY'
 }
+
+/**
+ * Drop each HTTP REQUEST record that has a matching RESPONSE: the response
+ * carries the status and latency, so it stands for the call. A request with no
+ * response stays, because a missing response is worth seeing.
+ *
+ * `callerOriented` is the server saying its responses run caller → callee on
+ * the server's port, like their requests, so they match on endpoints, route and
+ * port exactly. Without it the server is a Radar that predates that — Radar Hub
+ * renders clusters running such builds — whose responses run server → client on
+ * the client's ephemeral port, so they match reversed and without the port.
+ * The orientation is taken from the server, never inferred from which records
+ * happen to be in the window.
+ */
+export function dedupeHTTPPairs(flows: TrafficFlow[], callerOriented: boolean): TrafficFlow[] {
+  const isHTTP = (f: TrafficFlow, type: string) => f.l7Protocol === 'HTTP' && f.l7Type === type
+  const call = (from: string, to: string, f: TrafficFlow) =>
+    callerOriented
+      ? `${from}|${to}|${f.httpMethod}|${f.httpPath}|${f.port}`
+      : `${from}|${to}|${f.httpMethod}|${f.httpPath}`
+
+  const answered = new Set<string>()
+  for (const f of flows) {
+    if (!isHTTP(f, 'RESPONSE')) continue
+    answered.add(callerOriented
+      ? call(f.source.name, f.destination.name, f)
+      : call(f.destination.name, f.source.name, f))
+  }
+  return flows.filter(f => !(isHTTP(f, 'REQUEST') && answered.has(call(f.source.name, f.destination.name, f))))
+}

package/src/components/ui/Omnibar.tsx

@@ -543,7 +543,7 @@ export const Omnibar = forwardRef<OmnibarHandle, OmnibarProps>(function Omnibar(
     >
       <SearchPillInput
         className={hero
-          ? `min-h-14 px-5 rounded-2xl bg-theme-surface border border-theme-border shadow-theme-sm transition-[color,background-color,border-color,box-shadow] duration-[140ms] ${TW_EASE_UI} focus-within:border-[var(--color-brand-500)] focus-within:shadow-[0_0_0_4px_color-mix(in_srgb,var(--color-brand-500)_15%,transparent)]`
+          ? `min-h-14 px-5 rounded-2xl bg-theme-surface border border-theme-border shadow-theme-sm transition-[color,background-color,border-color,box-shadow] duration-[140ms] ${TW_EASE_UI} focus-within:border-[var(--color-brand-500,var(--accent))] focus-within:shadow-[0_0_0_4px_color-mix(in_srgb,var(--color-brand-500,var(--accent))_15%,transparent)]`
           : `min-h-8 px-2.5 rounded-md bg-theme-elevated border border-transparent focus-within:border-theme-border focus-within:bg-theme-surface transition-[color,background-color,border-color] duration-[140ms] ${TW_EASE_UI}`}
         inputClassName={hero ? 'text-lg py-4' : undefined}
         text={text}