@skyhook-io/radar-app 1.14.6 → 1.16.0

package/src/components/traffic/TrafficGraph.tsx

@@ -23,7 +23,7 @@ import { isClusterAddon, type AddonMode } from './TrafficView'
 import { SEVERITY_BADGE, SEVERITY_DOT, SEVERITY_TEXT } from '@skyhook-io/k8s-ui/utils/badge-colors'
 import { getNamespaceColor } from '../../utils/traffic-colors'
 import { Tooltip } from '../ui/Tooltip'
-import { isRateBasedSource, isExternalKind } from './trafficFilters'
+import { isRateBasedSource, isExternalKind, requestRateOf, errorRateOf, formatRate, displayVolume, latencyWeightOf } from './trafficFilters'
 
 const elk = new ELK()
 
@@ -74,6 +74,12 @@ function formatConnections(count: number): string {
   return count.toString()
 }
 
+// A volume in the source's own unit: a rate to two significant places for a
+// rate-based source, a whole count otherwise.
+function formatVolume(volume: number, isRateBased: boolean): string {
+  return isRateBased ? formatRate(volume) : formatConnections(volume)
+}
+
 function formatLatency(ms: number): string {
   if (ms >= 1000) return `${(ms / 1000).toFixed(1)}s`
   if (ms >= 1) return `${ms.toFixed(1)}ms`
@@ -293,7 +299,7 @@ function TrafficNode({ data }: { data: TrafficNodeData }) {
                       ? 'text-white/60'
                       : 'text-theme-text-tertiary'
                 )}>
-                  {formatConnections(portInfo.connections)}{data.connLabel === 'req/s' ? '/s' : ''}
+                  {formatVolume(portInfo.connections, data.connLabel === 'req/s')}{data.connLabel === 'req/s' ? '/s' : ''}
                 </span>
               )}
             </div>
@@ -319,7 +325,7 @@ function TrafficNode({ data }: { data: TrafficNodeData }) {
                 ? 'text-white/70'
                 : 'text-theme-text-tertiary'
           )}>
-            {formatConnections(data.totalConnections)} {data.connLabel || 'conn'}
+            {formatVolume(data.totalConnections, data.connLabel === 'req/s')} {data.connLabel || 'conn'}
           </span>
         </div>
       )}
@@ -460,7 +466,7 @@ function DetailsPanel({
     totalBytes: relatedFlows.reduce((sum, f) => sum + f.bytesSent + f.bytesRecv, 0),
     protocols: relatedFlows.reduce((acc, f) => {
       const proto = f.protocol?.toUpperCase() || 'TCP'
-      acc[proto] = (acc[proto] || 0) + f.connections
+      acc[proto] = (acc[proto] || 0) + displayVolume(f, isRateBased)
       return acc
     }, {} as Record<string, number>),
     lastSeen: relatedFlows.reduce((latest, f) => {
@@ -468,22 +474,28 @@ function DetailsPanel({
       return !latest || f.lastSeen > latest ? f.lastSeen : latest
     }, null as string | null),
     flowCount: relatedFlows.reduce((sum, f) => sum + (f.flowCount || 1), 0),
-    totalRequests: relatedFlows.reduce((sum, f) => sum + (f.requestCount ?? 0), 0),
-    totalErrors: relatedFlows.reduce((sum, f) => sum + (f.errorCount ?? 0), 0),
+    totalRequests: relatedFlows.reduce((sum, f) => sum + requestRateOf(f), 0),
+    totalErrors: relatedFlows.reduce((sum, f) => sum + errorRateOf(f), 0),
     l7Protocols: relatedFlows.reduce((acc, f) => {
       if (f.l7Protocol) acc.add(f.l7Protocol)
       return acc
     }, new Set<string>()),
-    // Aggregate latency across edges (median of P50s, max of P95s)
-    latencyP50Ms: (() => {
-      const p50s = relatedFlows.map(f => f.latencyP50Ms).filter((v): v is number => v != null && v > 0)
-      if (p50s.length === 0) return undefined
-      p50s.sort((a, b) => a - b)
-      return p50s[Math.floor(p50s.length / 2)]
+    // Percentiles of separate edges do not combine into a node percentile, so
+    // the node shows the slowest edge's P95 as that edge's, named.
+    slowestP95: (() => {
+      let slowest: AggregatedFlow | undefined
+      for (const f of relatedFlows) {
+        if (f.latencyP95Ms && (!slowest || f.latencyP95Ms > slowest.latencyP95Ms!)) slowest = f
+      }
+      return slowest && { ms: slowest.latencyP95Ms!, edge: `${slowest.source.workload || slowest.source.name} → ${slowest.destination.workload || slowest.destination.name}` }
     })(),
-    latencyP95Ms: (() => {
-      const p95s = relatedFlows.map(f => f.latencyP95Ms).filter((v): v is number => v != null && v > 0)
-      return p95s.length > 0 ? Math.max(...p95s) : undefined
+    // A metric-based source reports only an average per edge. The node's is
+    // those averages weighted by the traffic each stands for, so a slow trickle
+    // does not stand for a node that answers almost everything quickly.
+    avgLatencyMs: (() => {
+      const total = relatedFlows.reduce((sum, f) => sum + latencyWeightOf(f), 0)
+      if (total === 0) return undefined
+      return relatedFlows.reduce((sum, f) => sum + (f.avgLatencyMs ?? 0) * latencyWeightOf(f), 0) / total
     })(),
     // Aggregate HTTP status distribution
     httpStatusCounts: relatedFlows.reduce((acc, f) => {
@@ -572,7 +584,7 @@ function DetailsPanel({
               {nodeData.totalConnections != null && nodeData.totalConnections > 0 && (
                 <div className="text-xs text-theme-text-secondary">
                   {isRateBased ? 'Total request rate' : 'Total connections'}: <span className="text-theme-text-primary font-medium">
-                    {formatConnections(nodeData.totalConnections)}{isRateBased ? '/s' : ''}
+                    {formatVolume(nodeData.totalConnections, isRateBased)}{isRateBased ? '/s' : ''}
                   </span>
                 </div>
               )}
@@ -596,14 +608,14 @@ function DetailsPanel({
                 {nodeStats.totalRequests > 0 && (
                   <div className="p-2 rounded bg-theme-elevated text-xs">
                     <div className="text-theme-text-tertiary">Requests</div>
-                    <div className="text-theme-text-primary font-medium">{formatConnections(nodeStats.totalRequests)}/s</div>
+                    <div className="text-theme-text-primary font-medium">{formatRate(nodeStats.totalRequests)}/s</div>
                   </div>
                 )}
                 {nodeStats.totalErrors > 0 && (
                   <div className="p-2 rounded bg-red-500/10 border border-red-500/30 text-xs">
                     <div className="text-red-400">Errors (5xx)</div>
                     <div className="text-red-400 font-medium">
-                      {formatConnections(nodeStats.totalErrors)}/s
+                      {formatRate(nodeStats.totalErrors)}/s
                       {nodeStats.totalRequests > 0 && (
                         <span className="text-red-300 ml-1">
                           ({((nodeStats.totalErrors / nodeStats.totalRequests) * 100).toFixed(1)}%)
@@ -626,7 +638,7 @@ function DetailsPanel({
                         .map(([proto, count]) => (
                           <span key={proto} className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded bg-theme-bg text-theme-text-secondary">
                             <span className="font-medium">{proto}</span>
-                            <span className="text-theme-text-tertiary">{formatConnections(count)}{isRateBased ? '/s' : ''}</span>
+                            <span className="text-theme-text-tertiary">{formatVolume(count, isRateBased)}{isRateBased ? '/s' : ''}</span>
                           </span>
                         ))}
                     </div>
@@ -636,16 +648,17 @@ function DetailsPanel({
             )}
 
             {/* Node latency */}
-            {nodeStats?.latencyP50Ms && (
+            {nodeStats?.avgLatencyMs && (
               <div className="pt-1">
-                <div className="text-[10px] text-theme-text-tertiary mb-1">Latency</div>
-                <div className="flex gap-2 text-xs">
-                  <span className={clsx('font-medium', latencyColor(nodeStats.latencyP50Ms))}>
-                    P50: {formatLatency(nodeStats.latencyP50Ms)}
+                <div className="text-[10px] text-theme-text-tertiary mb-1">Latency across its edges</div>
+                <div className="flex flex-col gap-0.5 text-xs">
+                  <span className={clsx('font-medium', latencyColor(nodeStats.avgLatencyMs))}>
+                    Avg: {formatLatency(nodeStats.avgLatencyMs)}
                   </span>
-                  {nodeStats.latencyP95Ms && (
-                    <span className={clsx('font-medium', latencyColor(nodeStats.latencyP95Ms))}>
-                      P95: {formatLatency(nodeStats.latencyP95Ms)}
+                  {nodeStats.slowestP95 && (
+                    <span className="text-theme-text-secondary min-w-0 truncate">
+                      Slowest edge P95: <span className={clsx('font-medium', latencyColor(nodeStats.slowestP95.ms))}>{formatLatency(nodeStats.slowestP95.ms)}</span>
+                      <span className="text-theme-text-tertiary"> ({nodeStats.slowestP95.edge})</span>
                     </span>
                   )}
                 </div>
@@ -712,7 +725,7 @@ function DetailsPanel({
                         </span>
                         {flow.connections > 0 && (
                           <span className="text-theme-text-secondary">
-                            {formatConnections(flow.connections)} {isRateBased ? 'req/s' : 'conn'}
+                            {formatVolume(displayVolume(flow, isRateBased), isRateBased)} {isRateBased ? 'req/s' : 'conn'}
                           </span>
                         )}
                         {(flow.bytesSent > 0 || flow.bytesRecv > 0) && (
@@ -722,7 +735,7 @@ function DetailsPanel({
                         )}
                         {flow.errorCount != null && flow.errorCount > 0 && (
                           <span className="text-red-400">
-                            {formatConnections(flow.errorCount)} err{isRateBased ? '/s' : ''}
+                            {isRateBased ? `${formatRate(errorRateOf(flow))} err/s` : `${formatConnections(flow.errorCount)} err`}
                           </span>
                         )}
                       </div>
@@ -764,7 +777,7 @@ function DetailsPanel({
                         </span>
                         {flow.connections > 0 && (
                           <span className="text-theme-text-secondary">
-                            {formatConnections(flow.connections)} {isRateBased ? 'req/s' : 'conn'}
+                            {formatVolume(displayVolume(flow, isRateBased), isRateBased)} {isRateBased ? 'req/s' : 'conn'}
                           </span>
                         )}
                         {(flow.bytesSent > 0 || flow.bytesRecv > 0) && (
@@ -774,7 +787,7 @@ function DetailsPanel({
                         )}
                         {flow.errorCount != null && flow.errorCount > 0 && (
                           <span className="text-red-400">
-                            {formatConnections(flow.errorCount)} err{isRateBased ? '/s' : ''}
+                            {isRateBased ? `${formatRate(errorRateOf(flow))} err/s` : `${formatConnections(flow.errorCount)} err`}
                           </span>
                         )}
                       </div>
@@ -827,7 +840,7 @@ function DetailsPanel({
                   <div className="p-2 rounded bg-theme-elevated">
                     <div className="text-theme-text-tertiary">{isRateBased ? 'Request Rate' : 'Connections'}</div>
                     <div className="text-theme-text-primary font-medium">
-                      {formatConnections(edgeData.connections)}{isRateBased ? '/s' : ''}
+                      {formatVolume(edgeData.flow ? displayVolume(edgeData.flow, isRateBased) : edgeData.connections, isRateBased)}{isRateBased ? '/s' : ''}
                     </div>
                   </div>
                 )}
@@ -839,22 +852,22 @@ function DetailsPanel({
                     </div>
                   </div>
                 )}
-                {edgeData.flow?.requestCount != null && edgeData.flow.requestCount > 0 && (
+                {edgeData.flow && requestRateOf(edgeData.flow) > 0 && (
                   <div className="p-2 rounded bg-theme-elevated">
                     <div className="text-theme-text-tertiary">Requests</div>
                     <div className="text-theme-text-primary font-medium">
-                      {formatConnections(edgeData.flow.requestCount)}/s
+                      {formatRate(requestRateOf(edgeData.flow))}/s
                     </div>
                   </div>
                 )}
-                {edgeData.flow?.errorCount != null && edgeData.flow.errorCount > 0 && (
+                {edgeData.flow && errorRateOf(edgeData.flow) > 0 && (
                   <div className="p-2 rounded bg-red-500/10 border border-red-500/30">
                     <div className="text-red-400">Errors (5xx)</div>
                     <div className="text-red-400 font-medium">
-                      {formatConnections(edgeData.flow.errorCount)}/s
-                      {edgeData.flow.requestCount != null && edgeData.flow.requestCount > 0 && (
+                      {formatRate(errorRateOf(edgeData.flow))}/s
+                      {requestRateOf(edgeData.flow) > 0 && (
                         <span className="text-red-300 ml-1">
-                          ({((edgeData.flow.errorCount / edgeData.flow.requestCount) * 100).toFixed(1)}%)
+                          ({((errorRateOf(edgeData.flow) / requestRateOf(edgeData.flow)) * 100).toFixed(1)}%)
                         </span>
                       )}
                     </div>
@@ -881,6 +894,21 @@ function DetailsPanel({
                     ))}
                   </div>
                 </div>
+              ) : edgeData.flow?.avgLatencyMs ? (
+                // The source measured an average, not a distribution: there is
+                // no P95 to show, and repeating the average under that label
+                // would present it as one.
+                <div className="pt-2 border-t border-theme-border">
+                  <div className="text-[10px] text-theme-text-tertiary mb-1.5">Latency</div>
+                  <div className="grid grid-cols-3 gap-1.5 text-xs">
+                    <div className="p-1.5 rounded bg-theme-elevated text-center">
+                      <div className="text-theme-text-tertiary text-[9px]">Avg</div>
+                      <div className={clsx('font-medium', latencyColor(edgeData.flow.avgLatencyMs))}>
+                        {formatLatency(edgeData.flow.avgLatencyMs)}
+                      </div>
+                    </div>
+                  </div>
+                </div>
               ) : null}
 
               {/* HTTP status distribution */}
@@ -1115,13 +1143,15 @@ export function TrafficGraph({ flows, hotPathThreshold = 0, showNamespaceGroups
       connectionCounts.set(destId, (connectionCounts.get(destId) || 0) + 1)
 
       // Sum total connections
-      totalConnections.set(sourceId, (totalConnections.get(sourceId) || 0) + flow.connections)
-      totalConnections.set(destId, (totalConnections.get(destId) || 0) + flow.connections)
+      // Display-only sums: the unrounded rate for a rate-based source.
+      const volume = displayVolume(flow, isRateBased)
+      totalConnections.set(sourceId, (totalConnections.get(sourceId) || 0) + volume)
+      totalConnections.set(destId, (totalConnections.get(destId) || 0) + volume)
 
       // Track ports for destination nodes
       if (!nodePorts.has(destId)) nodePorts.set(destId, new Map())
       const portCounts = nodePorts.get(destId)!
-      portCounts.set(flow.port, (portCounts.get(flow.port) || 0) + flow.connections)
+      portCounts.set(flow.port, (portCounts.get(flow.port) || 0) + volume)
 
       // Track hot path nodes (Phase 2.3)
       if (flow.connections >= hotPathThreshold && hotPathThreshold > 0) {
@@ -1289,14 +1319,15 @@ export function TrafficGraph({ flows, hotPathThreshold = 0, showNamespaceGroups
 
       // Phase 2.2: Edge label - connection count with unit suffix + L7 details
       const connStr = isRateBased
-        ? `${formatConnections(flow.connections)}/s`
+        ? `${formatRate(displayVolume(flow, isRateBased))}/s`
         : formatConnections(flow.connections)
       const l7Label = flow.l7Protocol ? `${flow.l7Protocol} · ` : ''
-      const latencyLabel = flow.latencyP50Ms ? ` · ${formatLatency(flow.latencyP50Ms)}` : ''
+      const edgeLatency = flow.latencyP50Ms || flow.avgLatencyMs
+      const latencyLabel = edgeLatency ? ` · ${formatLatency(edgeLatency)}` : ''
       // errorCount is a rate for a rate-based source, exactly like connections above.
       // Without the suffix a destination failing once a second reads as one error.
       const errorLabel = hasErrors
-        ? ` · ${formatConnections(flow.errorCount ?? 0)} err${isRateBased ? '/s' : ''}`
+        ? ` · ${isRateBased ? `${formatRate(errorRateOf(flow))} err/s` : `${formatConnections(flow.errorCount ?? 0)} err`}`
         : ''
       // A source that measures rates has no count for an edge with no requests on
       // it — a plain TCP conversation, or one whose direction is unknown. Printing
@@ -1471,7 +1502,7 @@ export function TrafficGraph({ flows, hotPathThreshold = 0, showNamespaceGroups
 
       // Add edge from addon-internet to addon-group if we have one
       if (addonMode === 'group' && groupEdgeInfo) {
-        const { connections } = groupEdgeInfo
+        const { connections, flow: groupFlow } = groupEdgeInfo
         const sourceId = 'addon-internet'
         const isHotEdge = connections >= hotPathThreshold && hotPathThreshold > 0
 
@@ -1481,7 +1512,7 @@ export function TrafficGraph({ flows, hotPathThreshold = 0, showNamespaceGroups
           target: 'addon-group',
           type: 'smoothstep',
           animated: isHotEdge,
-          label: isRateBased ? `${formatConnections(connections)}/s` : formatConnections(connections),
+          label: isRateBased ? `${formatRate(displayVolume(groupFlow, isRateBased))}/s` : formatConnections(connections),
           labelBgStyle: {
             fill: '#581c87', // purple-900
             fillOpacity: 0.9,
@@ -1506,7 +1537,7 @@ export function TrafficGraph({ flows, hotPathThreshold = 0, showNamespaceGroups
 
       // Add edge from addon-group to kubernetes if we have one
       if (addonMode === 'group' && groupOutEdgeInfo) {
-        const { connections, targetId } = groupOutEdgeInfo
+        const { connections, targetId, flow: groupFlow } = groupOutEdgeInfo
         const isHotEdge = connections >= hotPathThreshold && hotPathThreshold > 0
 
         finalEdges.push({
@@ -1515,7 +1546,7 @@ export function TrafficGraph({ flows, hotPathThreshold = 0, showNamespaceGroups
           target: targetId,
           type: 'smoothstep',
           animated: isHotEdge,
-          label: isRateBased ? `${formatConnections(connections)}/s` : formatConnections(connections),
+          label: isRateBased ? `${formatRate(displayVolume(groupFlow, isRateBased))}/s` : formatConnections(connections),
           labelBgStyle: {
             fill: '#581c87', // purple-900
             fillOpacity: 0.9,

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.