@skyhook-io/radar-app 1.10.0 → 1.12.2

package/src/components/traffic/TrafficFilterSidebar.tsx

@@ -17,15 +17,7 @@ import type { AddonMode } from './TrafficView'
 import { getNamespaceColor } from '../../utils/traffic-colors'
 import { Tooltip } from '../ui/Tooltip'
 import { Input } from '@skyhook-io/k8s-ui'
-
-// Connection threshold options
-const CONNECTION_THRESHOLDS = [
-  { value: 0, label: 'All traffic' },
-  { value: 100, label: '100+ connections' },
-  { value: 1000, label: '1K+ connections' },
-  { value: 10000, label: '10K+ connections' },
-  { value: 100000, label: '100K+ connections' },
-]
+import { volumeThresholds } from './trafficFilters'
 
 // Time range options
 const TIME_RANGES = [
@@ -63,7 +55,19 @@ interface TrafficFilterSidebarProps {
   setTimeRange: (v: string) => void
 
   // L7 filters (Hubble-only)
-  isHubble?: boolean
+  /** Whether the flows carry any L7 detail at all. Not "is this Hubble": Beyla and
+   *  Istio report L7 too, and gating on the source name hid these filters from them. */
+  showL7Filters?: boolean
+  /** Status buckets that can actually match. A source reporting no status
+   *  distribution still reports an error rate, so 5xx can be offered on the strength
+   *  of that while the others would match nothing. */
+  availableStatusRanges?: string[]
+  availableVerdicts?: string[]
+  hasDNSQueries?: boolean
+  availableHTTPMethods?: string[]
+  /** The active source measures rates rather than counting events, which changes
+   *  both the unit and the useful scale of the volume filter. */
+  isRateBased?: boolean
   l7Protocol: string // 'all' | 'HTTP' | 'DNS' | 'TCP'
   setL7Protocol: (v: string) => void
   l7Methods: Set<string>
@@ -154,7 +158,12 @@ export const TrafficFilterSidebar = memo(function TrafficFilterSidebar({
   setDetectServices,
   timeRange,
   setTimeRange,
-  isHubble,
+  showL7Filters,
+  availableStatusRanges = [],
+  availableVerdicts = [],
+  hasDNSQueries,
+  availableHTTPMethods = [],
+  isRateBased,
   l7Protocol,
   setL7Protocol,
   l7Methods,
@@ -209,7 +218,7 @@ export const TrafficFilterSidebar = memo(function TrafficFilterSidebar({
               onChange={(e) => setMinConnections(Number(e.target.value))}
               className="flex-1 bg-theme-elevated text-theme-text-primary text-xs rounded px-2 py-1.5 border border-theme-border focus:outline-none focus:ring-1 focus:ring-blue-500"
             >
-              {CONNECTION_THRESHOLDS.map(({ value, label }) => (
+              {volumeThresholds(isRateBased).map(({ value, label }) => (
                 <option key={value} value={value}>{label}</option>
               ))}
             </select>
@@ -316,8 +325,10 @@ export const TrafficFilterSidebar = memo(function TrafficFilterSidebar({
           </div>
         </div>
 
-        {/* L7 Filters (Hubble only) */}
-        {isHubble && (
+        {/* L7 filters, shown whenever the flows carry L7 detail. Every control below
+            is gated on data that exists, so the panel never offers one that cannot
+            return anything. */}
+        {showL7Filters && (
           <div className="space-y-2 px-3 py-2 border-t border-theme-border">
             <div className="flex items-center gap-1.5">
               <Filter className="w-3 h-3 text-theme-text-tertiary" />
@@ -346,12 +357,13 @@ export const TrafficFilterSidebar = memo(function TrafficFilterSidebar({
             </div>
 
             {/* HTTP sub-filters (visible when protocol is All or HTTP) */}
-            {(l7Protocol === 'all' || l7Protocol === 'HTTP') && (
+            {(l7Protocol === 'all' || l7Protocol === 'HTTP') && (availableHTTPMethods.length > 0 || availableStatusRanges.length > 0) && (
               <>
+                {availableHTTPMethods.length > 0 && (
                 <div>
                   <div className="text-[10px] text-theme-text-tertiary mb-1">HTTP Method</div>
                   <div className="flex flex-wrap gap-1">
-                    {['GET', 'POST', 'PUT', 'DELETE', 'PATCH'].map(method => (
+                    {availableHTTPMethods.map(method => (
                       <button
                         key={method}
                         onClick={() => onToggleL7Method(method)}
@@ -367,7 +379,9 @@ export const TrafficFilterSidebar = memo(function TrafficFilterSidebar({
                     ))}
                   </div>
                 </div>
+                )}
 
+                {availableStatusRanges.length > 0 && (
                 <div>
                   <div className="text-[10px] text-theme-text-tertiary mb-1">Status Code</div>
                   <div className="flex flex-wrap gap-1">
@@ -376,7 +390,7 @@ export const TrafficFilterSidebar = memo(function TrafficFilterSidebar({
                       { label: '3xx', active: SEVERITY_BADGE.info },
                       { label: '4xx', active: SEVERITY_BADGE.warning },
                       { label: '5xx', active: SEVERITY_BADGE.error },
-                    ] as const).map(({ label, active }) => (
+                    ] as const).filter(({ label }) => availableStatusRanges.includes(label)).map(({ label, active }) => (
                       <button
                         key={label}
                         onClick={() => onToggleL7StatusRange(label)}
@@ -392,11 +406,12 @@ export const TrafficFilterSidebar = memo(function TrafficFilterSidebar({
                     ))}
                   </div>
                 </div>
+                )}
               </>
             )}
 
             {/* DNS sub-filter (visible when protocol is All or DNS) */}
-            {(l7Protocol === 'all' || l7Protocol === 'DNS') && (
+            {(l7Protocol === 'all' || l7Protocol === 'DNS') && hasDNSQueries && (
               <div>
                 <div className="text-[10px] text-theme-text-tertiary mb-1">DNS Query</div>
                 <Input
@@ -408,7 +423,8 @@ export const TrafficFilterSidebar = memo(function TrafficFilterSidebar({
               </div>
             )}
 
-            {/* Verdict (always visible — applies to all protocols) */}
+            {/* Verdict, limited to the verdicts the data actually contains. */}
+            {availableVerdicts.length > 0 && (
             <div>
               <div className="text-[10px] text-theme-text-tertiary mb-1">Verdict</div>
               <div className="flex flex-wrap gap-1">
@@ -416,7 +432,7 @@ export const TrafficFilterSidebar = memo(function TrafficFilterSidebar({
                   { label: 'forwarded', active: SEVERITY_BADGE.success },
                   { label: 'dropped', active: SEVERITY_BADGE.error },
                   { label: 'error', active: SEVERITY_BADGE.warning },
-                ] as const).map(({ label, active }) => (
+                ] as const).filter(({ label }) => availableVerdicts.includes(label)).map(({ label, active }) => (
                   <button
                     key={label}
                     onClick={() => onToggleL7Verdict(label)}
@@ -432,6 +448,7 @@ export const TrafficFilterSidebar = memo(function TrafficFilterSidebar({
                 ))}
               </div>
             </div>
+            )}
           </div>
         )}
 

package/src/components/traffic/TrafficFlowList.tsx

@@ -181,10 +181,24 @@ export function TrafficFlowList({ flows }: TrafficFlowListProps) {
                   </span>
                   </Tooltip>
 
-                  {/* Destination */}
-                  <Tooltip content={flow.destination.namespace ? `${flow.destination.namespace}/${flow.destination.name}` : flow.destination.name} wrapperClassName="min-w-0">
+                  {/* Destination. An unoriented conversation has no caller and no
+                      callee — the two ends are ordered arbitrarily — so it is marked
+                      rather than presented as a direction the source established. */}
+                  <Tooltip
+                    content={
+                      flow.directionUnknown
+                        ? 'Direction unknown: this source could not determine which end opened the conversation'
+                        : flow.destination.namespace
+                          ? `${flow.destination.namespace}/${flow.destination.name}`
+                          : flow.destination.name
+                    }
+                    wrapperClassName="min-w-0"
+                  >
                   <span className="truncate text-theme-text-primary">
                     {flow.destination.name}
+                    {flow.directionUnknown && (
+                      <span className="ml-1 text-theme-text-tertiary">(direction unknown)</span>
+                    )}
                   </span>
                   </Tooltip>
 

package/src/components/traffic/TrafficGraph.tsx

@@ -23,6 +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 } from './trafficFilters'
 
 const elk = new ELK()
 
@@ -280,16 +281,21 @@ function TrafficNode({ data }: { data: TrafficNodeData }) {
               )}>
                 :{portInfo.port}
               </span>
-              <span className={clsx(
-                'truncate',
-                data.isHotPath
-                  ? 'text-orange-400'
-                  : (hasNamespaceColor || isAddonNode)
-                    ? 'text-white/60'
-                    : 'text-theme-text-tertiary'
-              )}>
-                {formatConnections(portInfo.connections)}
-              </span>
+              {/* A port serving traffic with no HTTP has no request rate to show, and
+                  "0" beside the port reads as an idle port rather than an unmeasured
+                  one. The port itself is still worth listing. */}
+              {portInfo.connections > 0 && (
+                <span className={clsx(
+                  'truncate',
+                  data.isHotPath
+                    ? 'text-orange-400'
+                    : (hasNamespaceColor || isAddonNode)
+                      ? 'text-white/60'
+                      : 'text-theme-text-tertiary'
+                )}>
+                  {formatConnections(portInfo.connections)}{data.connLabel === 'req/s' ? '/s' : ''}
+                </span>
+              )}
             </div>
           ))}
           {data.ports.filter(p => p.port !== 0).length > MAX_VISIBLE_PORTS && (
@@ -303,7 +309,7 @@ function TrafficNode({ data }: { data: TrafficNodeData }) {
         </div>
       )}
       {/* Total connections (only if no ports shown, or all ports are 0) */}
-      {(!data.ports || data.ports.filter(p => p.port !== 0).length === 0) && data.totalConnections && data.totalConnections > 0 && (
+      {(!data.ports || data.ports.filter(p => p.port !== 0).length === 0) && data.totalConnections != null && data.totalConnections > 0 && (
         <div className="mt-1">
           <span className={clsx(
             'text-xs truncate',
@@ -339,6 +345,19 @@ function TrafficLegend() {
           </svg>
           <span className="text-theme-text-secondary">HTTP / gRPC</span>
         </div>
+        <div className="flex items-center gap-2">
+          <svg width="24" height="8" className="shrink-0" aria-hidden="true">
+            <line x1="0" y1="4" x2="20" y2="4" stroke="currentColor" strokeWidth="2" className="text-theme-text-tertiary" />
+            <polygon points="20,1 24,4 20,7" className="fill-theme-text-tertiary" />
+          </svg>
+          <span className="text-theme-text-secondary">Arrow = who opened it</span>
+        </div>
+        <div className="flex items-center gap-2">
+          <svg width="24" height="8" className="shrink-0" aria-hidden="true">
+            <line x1="0" y1="4" x2="24" y2="4" stroke="currentColor" strokeWidth="2" className="text-theme-text-tertiary" />
+          </svg>
+          <span className="text-theme-text-secondary">No arrow = direction unknown</span>
+        </div>
         <div className="flex items-center gap-2">
           <svg width="24" height="8" className="shrink-0">
             <line x1="0" y1="4" x2="24" y2="4" stroke="#06b6d4" strokeWidth="2" />
@@ -402,12 +421,14 @@ function DetailsPanel({
   selection,
   onClose,
   flows,
-  isIstio,
+  isRateBased,
 }: {
   selection: Selection
   onClose: () => void
   flows: AggregatedFlow[]
-  isIstio: boolean
+  // True for sources that measure a rate rather than counting connections —
+  // Istio and Beyla both do. Changes the wording and the /s suffix.
+  isRateBased: boolean
 }) {
   if (!selection) return null
 
@@ -548,10 +569,10 @@ function DetailsPanel({
                   Service: <span className="text-theme-text-primary capitalize">{nodeData.serviceCategory}</span>
                 </div>
               )}
-              {nodeData.totalConnections && (
+              {nodeData.totalConnections != null && nodeData.totalConnections > 0 && (
                 <div className="text-xs text-theme-text-secondary">
-                  {isIstio ? 'Total request rate' : 'Total connections'}: <span className="text-theme-text-primary font-medium">
-                    {formatConnections(nodeData.totalConnections)}{isIstio ? '/s' : ''}
+                  {isRateBased ? 'Total request rate' : 'Total connections'}: <span className="text-theme-text-primary font-medium">
+                    {formatConnections(nodeData.totalConnections)}{isRateBased ? '/s' : ''}
                   </span>
                 </div>
               )}
@@ -605,7 +626,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)}</span>
+                            <span className="text-theme-text-tertiary">{formatConnections(count)}{isRateBased ? '/s' : ''}</span>
                           </span>
                         ))}
                     </div>
@@ -672,7 +693,15 @@ function DetailsPanel({
                         <span className="text-theme-text-primary truncate flex-1">
                           {flow.source.name}
                         </span>
-                        <ArrowRight className="h-3 w-3 text-theme-text-tertiary shrink-0" />
+                        {/* Same rule as the canvas and the edge panel: an edge nobody
+                            could orient is not drawn with an arrow. */}
+                        {flow.directionUnknown ? (
+                          <Tooltip content="Neither end was reported as the initiator">
+                            <span className="text-theme-text-tertiary shrink-0">&mdash;</span>
+                          </Tooltip>
+                        ) : (
+                          <ArrowRight className="h-3 w-3 text-theme-text-tertiary shrink-0" />
+                        )}
                         {flow.port !== 0 && (
                           <span className="text-blue-400 font-mono">:{flow.port}</span>
                         )}
@@ -681,17 +710,19 @@ function DetailsPanel({
                         <span className="px-1 py-0.5 rounded bg-theme-bg text-theme-text-tertiary uppercase">
                           {flow.protocol || 'tcp'}
                         </span>
-                        <span className="text-theme-text-secondary">
-                          {formatConnections(flow.connections)} {isIstio ? 'req/s' : 'conn'}
-                        </span>
+                        {flow.connections > 0 && (
+                          <span className="text-theme-text-secondary">
+                            {formatConnections(flow.connections)} {isRateBased ? 'req/s' : 'conn'}
+                          </span>
+                        )}
                         {(flow.bytesSent > 0 || flow.bytesRecv > 0) && (
                           <span className="text-theme-text-tertiary">
                             {formatBytes(flow.bytesSent + flow.bytesRecv)}
                           </span>
                         )}
-                        {flow.errorCount && flow.errorCount > 0 && (
+                        {flow.errorCount != null && flow.errorCount > 0 && (
                           <span className="text-red-400">
-                            {formatConnections(flow.errorCount)} err
+                            {formatConnections(flow.errorCount)} err{isRateBased ? '/s' : ''}
                           </span>
                         )}
                       </div>
@@ -713,7 +744,13 @@ function DetailsPanel({
                     .map((flow, i) => (
                     <div key={i} className="text-xs p-2 rounded bg-theme-elevated space-y-1">
                       <div className="flex items-center gap-1.5">
-                        <ArrowRight className="h-3 w-3 text-theme-text-tertiary shrink-0" />
+                        {flow.directionUnknown ? (
+                          <Tooltip content="Neither end was reported as the initiator">
+                            <span className="text-theme-text-tertiary shrink-0">&mdash;</span>
+                          </Tooltip>
+                        ) : (
+                          <ArrowRight className="h-3 w-3 text-theme-text-tertiary shrink-0" />
+                        )}
                         <span className="text-theme-text-primary truncate flex-1">
                           {flow.destination.name}
                         </span>
@@ -725,17 +762,19 @@ function DetailsPanel({
                         <span className="px-1 py-0.5 rounded bg-theme-bg text-theme-text-tertiary uppercase">
                           {flow.protocol || 'tcp'}
                         </span>
-                        <span className="text-theme-text-secondary">
-                          {formatConnections(flow.connections)} {isIstio ? 'req/s' : 'conn'}
-                        </span>
+                        {flow.connections > 0 && (
+                          <span className="text-theme-text-secondary">
+                            {formatConnections(flow.connections)} {isRateBased ? 'req/s' : 'conn'}
+                          </span>
+                        )}
                         {(flow.bytesSent > 0 || flow.bytesRecv > 0) && (
                           <span className="text-theme-text-tertiary">
                             {formatBytes(flow.bytesSent + flow.bytesRecv)}
                           </span>
                         )}
-                        {flow.errorCount && flow.errorCount > 0 && (
+                        {flow.errorCount != null && flow.errorCount > 0 && (
                           <span className="text-red-400">
-                            {formatConnections(flow.errorCount)} err
+                            {formatConnections(flow.errorCount)} err{isRateBased ? '/s' : ''}
                           </span>
                         )}
                       </div>
@@ -753,7 +792,16 @@ function DetailsPanel({
             <div className="space-y-2">
               <div className="flex items-center gap-2 text-sm">
                 <span className="text-theme-text-primary truncate">{edgeData.source.split('/').pop()}</span>
-                <ArrowRight className="h-4 w-4 text-theme-text-tertiary shrink-0" />
+                {edgeData.flow?.directionUnknown ? (
+                  // The graph omits the arrowhead on this edge because nothing
+                  // established which end opened the conversation. An arrow here
+                  // would assert exactly what the graph is declining to claim.
+                  <Tooltip content="Neither end was reported as the initiator">
+                    <span className="text-theme-text-tertiary shrink-0">&mdash;</span>
+                  </Tooltip>
+                ) : (
+                  <ArrowRight className="h-4 w-4 text-theme-text-tertiary shrink-0" />
+                )}
                 <span className="text-theme-text-primary truncate">{edgeData.target.split('/').pop()}</span>
               </div>
 
@@ -772,12 +820,17 @@ function DetailsPanel({
                       : edgeData.protocol}
                   </div>
                 </div>
-                <div className="p-2 rounded bg-theme-elevated">
-                  <div className="text-theme-text-tertiary">{isIstio ? 'Request Rate' : 'Connections'}</div>
-                  <div className="text-theme-text-primary font-medium">
-                    {formatConnections(edgeData.connections)}{isIstio ? '/s' : ''}
+                {(!isRateBased || edgeData.connections > 0) && (
+                  // A rate-based source reports no request rate for traffic with no
+                  // HTTP, and "0/s" beside a data figure in megabytes reads as "no
+                  // traffic" rather than "not measured".
+                  <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' : ''}
+                    </div>
                   </div>
-                </div>
+                )}
                 {edgeData.flow && (edgeData.flow.bytesSent > 0 || edgeData.flow.bytesRecv > 0) && (
                   <div className="p-2 rounded bg-theme-elevated">
                     <div className="text-theme-text-tertiary">Data</div>
@@ -786,7 +839,7 @@ function DetailsPanel({
                     </div>
                   </div>
                 )}
-                {edgeData.flow?.requestCount && edgeData.flow.requestCount > 0 && (
+                {edgeData.flow?.requestCount != null && edgeData.flow.requestCount > 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">
@@ -794,12 +847,12 @@ function DetailsPanel({
                     </div>
                   </div>
                 )}
-                {edgeData.flow?.errorCount && edgeData.flow.errorCount > 0 && (
+                {edgeData.flow?.errorCount != null && edgeData.flow.errorCount > 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 && edgeData.flow.requestCount > 0 && (
+                      {edgeData.flow.requestCount != null && edgeData.flow.requestCount > 0 && (
                         <span className="text-red-300 ml-1">
                           ({((edgeData.flow.errorCount / edgeData.flow.requestCount) * 100).toFixed(1)}%)
                         </span>
@@ -910,17 +963,23 @@ function DetailsPanel({
               {edgeData.flow && (
                 <div className="space-y-1 pt-2 border-t border-theme-border">
                   <div className="text-xs text-theme-text-secondary">
-                    Source: <span className="text-theme-text-primary">{edgeData.flow.source.name}</span>
+                    {edgeData.flow.directionUnknown ? 'Endpoint' : 'Source'}: <span className="text-theme-text-primary">{edgeData.flow.source.name}</span>
                     {edgeData.flow.source.namespace && (
                       <span className="text-theme-text-tertiary"> ({edgeData.flow.source.namespace})</span>
                     )}
                   </div>
                   <div className="text-xs text-theme-text-secondary">
-                    Destination: <span className="text-theme-text-primary">{edgeData.flow.destination.name}</span>
+                    {edgeData.flow.directionUnknown ? 'Endpoint' : 'Destination'}: <span className="text-theme-text-primary">{edgeData.flow.destination.name}</span>
                     {edgeData.flow.destination.namespace && (
                       <span className="text-theme-text-tertiary"> ({edgeData.flow.destination.namespace})</span>
                     )}
                   </div>
+                  {edgeData.flow.directionUnknown && (
+                    <div className="text-xs text-theme-text-tertiary mt-1">
+                      Which endpoint opened this conversation was not reported, so the
+                      two are listed in a fixed order rather than as caller and callee.
+                    </div>
+                  )}
                   {edgeData.flow.destination.kind.toLowerCase() === 'external' && (
                     <div className="text-xs text-yellow-400 mt-1">
                       External service
@@ -998,9 +1057,20 @@ function FitViewOnChange({
   return null
 }
 
+// A pair can carry both oriented and unoriented traffic at the same port, and the
+// backend keeps those as separate aggregates because no single answer about the
+// direction is right for both. Without the suffix they would share an edge id and
+// one would silently replace the other. Only unoriented edges are suffixed, so
+// every id a source that always orients its flows produces is unchanged.
+function trafficEdgeId(sourceId: string, destId: string, flow: AggregatedFlow): string {
+  return `${sourceId}->${destId}:${flow.port}${flow.directionUnknown ? ':unoriented' : ''}`
+}
+
 export function TrafficGraph({ flows, hotPathThreshold = 0, showNamespaceGroups = false, serviceCategories, addonMode = 'show', trafficSource = '', onSelectionChange }: TrafficGraphProps) {
-  const isIstio = trafficSource === 'istio'
-  const connLabel = isIstio ? 'req/s' : 'conn'
+  // Beyla is rate-based too: its Connections field carries requests per second,
+  // not a connection count, so it needs the same label Istio gets.
+  const isRateBased = isRateBasedSource(trafficSource)
+  const connLabel = isRateBased ? 'req/s' : 'conn'
   const [layoutedNodes, setLayoutedNodes] = useState<Node<TrafficNodeData>[]>([])
   const [layoutedEdges, setLayoutedEdges] = useState<Edge[]>([])
   const [selection, setSelection] = useState<Selection | null>(null)
@@ -1015,7 +1085,7 @@ export function TrafficGraph({ flows, hotPathThreshold = 0, showNamespaceGroups
       const destId = flow.destination.namespace
         ? `${flow.destination.namespace}/${flow.destination.name}`
         : flow.destination.name
-      const edgeId = `${sourceId}->${destId}:${flow.port}`
+      const edgeId = trafficEdgeId(sourceId, destId, flow)
       map.set(edgeId, flow)
     })
     return map
@@ -1198,7 +1268,7 @@ export function TrafficGraph({ flows, hotPathThreshold = 0, showNamespaceGroups
       }
 
       // Create edge with visual encoding (Phase 2.1, 2.2, 2.3)
-      const edgeId = `${sourceId}->${destId}:${flow.port}`
+      const edgeId = trafficEdgeId(sourceId, destId, flow)
       const isHotEdge = flow.connections >= hotPathThreshold && hotPathThreshold > 0
       const hasErrors = (flow.errorCount ?? 0) > 0
 
@@ -1218,20 +1288,34 @@ export function TrafficGraph({ flows, hotPathThreshold = 0, showNamespaceGroups
       const strokeWidth = getEdgeWidth(flow.connections)
 
       // Phase 2.2: Edge label - connection count with unit suffix + L7 details
-      const connStr = isIstio
+      const connStr = isRateBased
         ? `${formatConnections(flow.connections)}/s`
         : formatConnections(flow.connections)
       const l7Label = flow.l7Protocol ? `${flow.l7Protocol} · ` : ''
       const latencyLabel = flow.latencyP50Ms ? ` · ${formatLatency(flow.latencyP50Ms)}` : ''
+      // 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`
+        ? ` · ${formatConnections(flow.errorCount ?? 0)} err${isRateBased ? '/s' : ''}`
         : ''
-      const edgeLabel = `${l7Label}${connStr}${latencyLabel}${errorLabel}`
+      // 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
+      // "0/s" there reads as no traffic, on an edge that may be carrying megabytes.
+      const countLabel = isRateBased && !flow.connections ? '' : connStr
+      const edgeLabel = [l7Label + countLabel, latencyLabel, errorLabel]
+        .join('')
+        .replace(/^ · /, '')
 
       edgeList.push({
         id: edgeId,
         source: sourceId,
         target: destId,
+        // React Flow's default is "Edge from A to B", which states a direction this
+        // edge is deliberately drawn without. Assistive technology should hear the
+        // same uncertainty the missing arrowhead conveys.
+        ariaLabel: flow.directionUnknown
+          ? `Connection between ${sourceId} and ${destId}, direction unknown`
+          : `Edge from ${sourceId} to ${destId}`,
         type: 'smoothstep',
         animated: isHotEdge, // Animate hot paths
         label: edgeLabel,
@@ -1249,12 +1333,20 @@ export function TrafficGraph({ flows, hotPathThreshold = 0, showNamespaceGroups
           stroke: strokeColor,
           ...(hasDrops && { strokeDasharray: '6 3' }),
         },
-        markerEnd: {
-          type: MarkerType.ArrowClosed,
-          width: 16,
-          height: 16,
-          color: strokeColor,
-        },
+        // No arrowhead when the initiator is unknown. Beyla labels both halves of a
+        // UDP conversation the same way, so an arrow would be asserting something
+        // the data does not say; the edge still carries the traffic in both
+        // directions.
+        ...(flow.directionUnknown
+          ? {}
+          : {
+              markerEnd: {
+                type: MarkerType.ArrowClosed,
+                width: 16,
+                height: 16,
+                color: strokeColor,
+              },
+            }),
       })
     })
 
@@ -1264,7 +1356,7 @@ export function TrafficGraph({ flows, hotPathThreshold = 0, showNamespaceGroups
       addonGroupEdge, // Pass this for adding after group is created
       addonGroupOutEdge, // Pass this for adding group → kubernetes edge
     }
-  }, [flows, hotPathThreshold, showNamespaceGroups, serviceCategories, addonMode, isIstio, connLabel])
+  }, [flows, hotPathThreshold, showNamespaceGroups, serviceCategories, addonMode, isRateBased, connLabel])
 
   // Apply ELK layout
   const applyLayout = useCallback(async () => {
@@ -1389,7 +1481,7 @@ export function TrafficGraph({ flows, hotPathThreshold = 0, showNamespaceGroups
           target: 'addon-group',
           type: 'smoothstep',
           animated: isHotEdge,
-          label: formatConnections(connections),
+          label: isRateBased ? `${formatConnections(connections)}/s` : formatConnections(connections),
           labelBgStyle: {
             fill: '#581c87', // purple-900
             fillOpacity: 0.9,
@@ -1423,7 +1515,7 @@ export function TrafficGraph({ flows, hotPathThreshold = 0, showNamespaceGroups
           target: targetId,
           type: 'smoothstep',
           animated: isHotEdge,
-          label: formatConnections(connections),
+          label: isRateBased ? `${formatConnections(connections)}/s` : formatConnections(connections),
           labelBgStyle: {
             fill: '#581c87', // purple-900
             fillOpacity: 0.9,
@@ -1462,7 +1554,7 @@ export function TrafficGraph({ flows, hotPathThreshold = 0, showNamespaceGroups
       setLayoutedNodes(positionedNodes)
       setLayoutedEdges(rawEdges)
     }
-  }, [rawNodes, rawEdges, addonMode, addonGroupEdge, addonGroupOutEdge, hotPathThreshold])
+  }, [rawNodes, rawEdges, addonMode, addonGroupEdge, addonGroupOutEdge, hotPathThreshold, isRateBased])
 
   // Run layout when flows change
   useEffect(() => {
@@ -1556,7 +1648,7 @@ export function TrafficGraph({ flows, hotPathThreshold = 0, showNamespaceGroups
           selection={selection}
           onClose={() => setSelection(null)}
           flows={flows}
-          isIstio={isIstio}
+          isRateBased={isRateBased}
         />
       )}
     </div>