@skyhook-io/radar-app 1.15.0 → 1.16.1

package/src/components/settings/currency-options.test.ts

@@ -9,7 +9,7 @@ describe('currency options', () => {
   it('offers Auto followed by named ISO 4217 currencies', () => {
     expect(CURRENCY_OPTIONS[0]).toEqual({
       value: '',
-      label: 'Auto (detect from OpenCost/Kubecost)',
+      label: 'Automatic (from the cost source)',
     })
     expect(CURRENCY_OPTIONS).toContainEqual({
       value: 'EUR',

package/src/components/settings/currency-options.ts

@@ -19,7 +19,7 @@ const currencyCodes = [
 ]
 
 export const CURRENCY_OPTIONS: SelectMenuOption[] = [
-  { value: '', label: 'Auto (detect from OpenCost/Kubecost)' },
+  { value: '', label: 'Automatic (from the cost source)' },
   ...currencyCodes
     .filter((code) => code !== 'XTS' && code !== 'XXX')
     .map((code) => {

package/src/components/settings/settings-state.test.ts

@@ -2,7 +2,7 @@ import { describe, expect, it } from "vitest";
 import {
   costSourceApplyLabel,
   prometheusHeadersFromRows,
-  shouldOfferCostReview,
+  pendingSections,
   shouldShowSettingsFooter,
 } from "./settings-state";
 
@@ -23,35 +23,42 @@ describe("Prometheus header edits", () => {
   });
 });
 
-describe("Cost settings state", () => {
-  it("keeps source drafts inline while the Cost section is open", () => {
-    expect(shouldOfferCostReview(true, "cost")).toBe(false);
+describe("Integration settings state", () => {
+  it.each(['prometheus', 'cost', 'argocd'] as const)("offers discard for a %s draft", (section) => {
+    expect(pendingSections({ prometheus: false, cost: false, argocd: false, ai: false, [section]: true })).toEqual([section]);
     expect(
       shouldShowSettingsFooter({
         canEditConfig: true,
         confirmingClose: false,
         configDirty: false,
-        costIntegrationDirty: true,
-        section: "cost",
+        integrationDirty: true,
+        aiDirtyElsewhere: false,
         hasSaveMessage: false,
       }),
-    ).toBe(false);
+    ).toBe(true);
   });
 
   it("offers review from other sections and retains the close guard", () => {
-    expect(shouldOfferCostReview(true, "overview")).toBe(true);
+    expect(pendingSections({ prometheus: true, cost: true, argocd: true, ai: true })).toEqual(['prometheus', 'cost', 'argocd', 'ai']);
     expect(
       shouldShowSettingsFooter({
         canEditConfig: true,
         confirmingClose: true,
         configDirty: false,
-        costIntegrationDirty: true,
-        section: "cost",
+        integrationDirty: true,
+        aiDirtyElsewhere: false,
         hasSaveMessage: false,
       }),
     ).toBe(true);
   });
 
+  it("shows an AI draft to users without owner access, but not their startup or integration drafts", () => {
+    const base = { canEditConfig: false, confirmingClose: false, configDirty: true, integrationDirty: true, aiDirtyElsewhere: false, hasSaveMessage: true };
+    expect(shouldShowSettingsFooter(base)).toBe(false);
+    expect(shouldShowSettingsFooter({ ...base, aiDirtyElsewhere: true })).toBe(true);
+    expect(shouldShowSettingsFooter({ ...base, confirmingClose: true })).toBe(true);
+  });
+
   it("only claims to test sources that the backend probes", () => {
     expect(costSourceApplyLabel("auto")).toBe("Test & apply source");
     expect(costSourceApplyLabel("kubecost")).toBe("Test & apply source");

package/src/components/settings/settings-state.ts

@@ -9,27 +9,35 @@ export type SettingsSectionId =
   | 'advanced'
   | 'privacy'
 
-export function shouldOfferCostReview(
-  costIntegrationDirty: boolean,
-  section: SettingsSectionId,
-): boolean {
-  return costIntegrationDirty && section !== 'cost'
+export type IntegrationSectionId = 'prometheus' | 'cost' | 'argocd'
+// Tabs whose drafts save through their own form, not the startup footer.
+export type PendingSectionId = IntegrationSectionId | 'ai'
+
+export const pendingSectionLabels: Record<PendingSectionId, string> = {
+  prometheus: 'Metrics', cost: 'Cost', argocd: 'Argo CD', ai: 'AI investigations',
+}
+
+export function pendingSections(dirty: Record<PendingSectionId, boolean>): PendingSectionId[] {
+  return (['prometheus', 'cost', 'argocd', 'ai'] as const).filter(section => dirty[section])
 }
 
+// AI preferences are open to every user, so an AI draft pending in another tab
+// shows the footer even without owner access.
 export function shouldShowSettingsFooter(input: {
   canEditConfig: boolean
   confirmingClose: boolean
   configDirty: boolean
-  costIntegrationDirty: boolean
-  section: SettingsSectionId
+  integrationDirty: boolean
+  aiDirtyElsewhere: boolean
   hasSaveMessage: boolean
 }): boolean {
   return (
-    input.canEditConfig &&
-    (input.confirmingClose ||
-      input.configDirty ||
-      shouldOfferCostReview(input.costIntegrationDirty, input.section) ||
-      input.hasSaveMessage)
+    input.confirmingClose ||
+    input.aiDirtyElsewhere ||
+    (input.canEditConfig &&
+      (input.configDirty ||
+        input.integrationDirty ||
+        input.hasSaveMessage))
   )
 }
 

package/src/components/timeline/TimelineList.test.ts

@@ -0,0 +1,56 @@
+import { describe, expect, it } from 'vitest'
+import { applyClientFilters } from '../../api/timelineSource'
+import type { TimelineEvent } from '../../types'
+import { listIncludesManaged } from './TimelineList'
+
+function ev(over: Partial<TimelineEvent> & { id: string }): TimelineEvent {
+  return {
+    timestamp: '2024-01-01T00:00:00.000Z',
+    source: 'informer',
+    kind: 'Deployment',
+    namespace: 'ns-a',
+    name: over.id,
+    eventType: 'update',
+    ...over,
+  }
+}
+
+// Mirrors the host: the source filter runs first, then the UI keeps the selected kinds.
+function listRows(events: TimelineEvent[], kinds: string[]): string[] {
+  return applyClientFilters(events, { includeManaged: listIncludesManaged(false, kinds) })
+    .filter((e) => kinds.length === 0 || kinds.includes(e.kind))
+    .map((e) => e.id)
+}
+
+describe('listIncludesManaged', () => {
+  it('includes managed rows when app-scoped or when any kind is selected', () => {
+    expect(listIncludesManaged(true, [])).toBe(true)
+    expect(listIncludesManaged(false, ['Pod'])).toBe(true)
+    expect(listIncludesManaged(false, ['Job'])).toBe(true)
+  })
+
+  it('keeps hiding managed rows for the unfiltered list', () => {
+    expect(listIncludesManaged(false, [])).toBe(false)
+  })
+})
+
+describe('timeline list rows', () => {
+  const events = [
+    ev({ id: 'dep', kind: 'Deployment' }),
+    ev({ id: 'pod', kind: 'Pod' }),
+    ev({ id: 'job', kind: 'Job' }),
+    ev({ id: 'cron-job', kind: 'Job', owner: { kind: 'CronJob', name: 'nightly' } }),
+  ]
+
+  it('lists pod rows for a Pod selection', () => {
+    expect(listRows(events, ['Pod'])).toEqual(['pod'])
+  })
+
+  it('lists owned rows of an unmanaged kind for that kind', () => {
+    expect(listRows(events, ['Job']).sort()).toEqual(['cron-job', 'job'])
+  })
+
+  it('hides pod and owned rows when no kind is selected', () => {
+    expect(listRows(events, []).sort()).toEqual(['dep', 'job'])
+  })
+})

package/src/components/timeline/TimelineList.tsx

@@ -24,6 +24,12 @@ export type { ActivityTypeFilter, ActivityFilterKey }
 const LIST_FETCH_LIMIT = 2000
 const APP_SCOPED_FETCH_LIMIT = 10000
 
+// The source drops managed rows (Pod, ReplicaSet, Event, or any owned row) before
+// the kind filter runs, so an explicit kind selection must keep them or it lists nothing.
+export function listIncludesManaged(appScoped: boolean, kinds: string[]): boolean {
+  return appScoped || kinds.length > 0
+}
+
 interface TimelineListProps {
   namespaces: string[]
   onViewChange?: (view: 'list' | 'swimlane') => void
@@ -76,7 +82,7 @@ export function TimelineList({ namespaces, onViewChange, currentView, onResource
     kinds: queryParams.kinds,
     timeRange: queryParams.timeRange,
     includeK8sEvents: true,
-    includeManaged: appScoped,
+    includeManaged: listIncludesManaged(appScoped, queryParams.kinds),
     includeDeleted: showDeleted,
     limit: fetchLimit,
     fromMs: selectionWindow?.fromMs,

package/src/components/traffic/TrafficFlowList.tsx

@@ -2,6 +2,7 @@ import { useState, useMemo } from 'react'
 import { Virtuoso } from 'react-virtuoso'
 import type { TrafficFlow, TrafficEndpoint } from '../../types'
 import { clsx } from 'clsx'
+import { dedupeHTTPPairs } from './trafficFilters'
 import { ChevronDown, ChevronUp, ShieldCheck } from 'lucide-react'
 import { SEVERITY_BADGE, SEVERITY_TEXT } from '@skyhook-io/k8s-ui/utils/badge-colors'
 import { pluralize, StatusDot } from '@skyhook-io/k8s-ui'
@@ -53,9 +54,11 @@ type SortDir = 'asc' | 'desc'
 
 interface TrafficFlowListProps {
   flows: TrafficFlow[]
+  /** The server said its L7 responses run caller → callee; see dedupeHTTPPairs. */
+  responsesCallerOriented: boolean
 }
 
-export function TrafficFlowList({ flows }: TrafficFlowListProps) {
+export function TrafficFlowList({ flows, responsesCallerOriented }: TrafficFlowListProps) {
   const [search] = useFlowSearch()
   const [sortField, setSortField] = useState<SortField>('time')
   const [sortDir, setSortDir] = useState<SortDir>('desc')
@@ -70,26 +73,7 @@ export function TrafficFlowList({ flows }: TrafficFlowListProps) {
     }
   }
 
-  // Deduplicate HTTP REQUEST/RESPONSE pairs: prefer RESPONSE (has status + latency).
-  // Keep orphan REQUESTs (no matching RESPONSE) as they indicate missing responses.
-  // Deduplicate HTTP REQUEST/RESPONSE pairs: prefer RESPONSE (has status + latency).
-  // REQUEST goes client→server, RESPONSE goes server→client (src/dst swapped).
-  const deduped = useMemo(() => {
-    // RESPONSE goes server→client, REQUEST goes client→server (src/dst swapped).
-    // Normalize key: always client|server|method|path
-    const responseKeys = new Set<string>()
-    for (const f of flows) {
-      if (f.l7Protocol === 'HTTP' && f.l7Type === 'RESPONSE') {
-        responseKeys.add(`${f.destination.name}|${f.source.name}|${f.httpMethod}|${f.httpPath}`)
-      }
-    }
-    return flows.filter(f => {
-      if (f.l7Protocol === 'HTTP' && f.l7Type === 'REQUEST') {
-        return !responseKeys.has(`${f.source.name}|${f.destination.name}|${f.httpMethod}|${f.httpPath}`)
-      }
-      return true
-    })
-  }, [flows])
+  const deduped = useMemo(() => dedupeHTTPPairs(flows, responsesCallerOriented), [flows, responsesCallerOriented])
 
   const filtered = useMemo(() => {
     if (!search) return deduped

package/src/components/traffic/TrafficFlowListContext.tsx

@@ -4,12 +4,13 @@ import type { TrafficGraphSelection } from './TrafficGraph'
 
 interface TrafficFlowListContextValue {
   flows: TrafficFlow[]
+  responsesCallerOriented: boolean
   graphSelection: TrafficGraphSelection | null
   clearSelection: () => void
 }
 
 // Module-level store — TrafficView writes, dock tab reads.
-let currentValue: TrafficFlowListContextValue = { flows: [], graphSelection: null, clearSelection: () => {} }
+let currentValue: TrafficFlowListContextValue = { flows: [], responsesCallerOriented: false, graphSelection: null, clearSelection: () => {} }
 const listeners = new Set<() => void>()
 
 function setValue(val: TrafficFlowListContextValue) {
@@ -49,17 +50,18 @@ export function useFlowSearch(): [string, (val: string) => void] {
 // Provider — call this from TrafficView to publish flow data
 export function TrafficFlowListProvider({
   flows,
+  responsesCallerOriented,
   graphSelection,
   clearSelection,
   children,
 }: TrafficFlowListContextValue & { children: ReactNode }) {
   useEffect(() => {
-    setValue({ flows, graphSelection, clearSelection })
-  }, [flows, graphSelection, clearSelection])
+    setValue({ flows, responsesCallerOriented, graphSelection, clearSelection })
+  }, [flows, responsesCallerOriented, graphSelection, clearSelection])
 
   useEffect(() => {
     return () => {
-      setValue({ flows: [], graphSelection: null, clearSelection: () => {} })
+      setValue({ flows: [], responsesCallerOriented: false, graphSelection: null, clearSelection: () => {} })
       setFlowSearch('')
     }
   }, [])

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,