@skyhook-io/k8s-ui 1.10.5 → 1.12.0

package/src/components/trace/ReachabilityView.tsx

@@ -6,10 +6,10 @@ import { PaneLoader } from '../ui/PaneLoader'
 import { ReachabilityGraph, MarkGlyph } from './ReachabilityGraph'
 import { Activity, ChevronRight } from 'lucide-react'
 import { Tooltip } from '../ui/Tooltip'
-import { buildGraph } from './reachGraphModel'
+import { buildGraph, noteHeadline } from './reachGraphModel'
 import { buildOrigins, defaultOrigin, probeCheckStats, type Origin, type OriginId } from './reachOrigins'
 import { buildSidebar, buildVerdict, type Sidebar, type HopReport, type InspectorCTA, type Selection } from './reachInspector'
-import { markStyle, glyphStyle, markHelp, scenariosFor, routeTone, routeChip, routeIdentity, traceInClusterRunnable, SEV_COLOR, SEV_BADGE, type Scenario } from './reachMarks'
+import { markStyle, glyphStyle, markHelp, scenariosFor, routeTone, routeChip, routeIdentity, routeForOrigin, traceInClusterRunnable, SEV_COLOR, SEV_BADGE, type Scenario } from './reachMarks'
 import { evidenceBannerTitle } from './inClusterSummary'
 import { DEV_STATES, devTrace, type DevState } from './reachFixtures'
 
@@ -190,6 +190,9 @@ function ReachabilityBoard(props: BoardProps) {
   const selectedOriginRunning = running && origin?.id === 'incluster'
 
   const [selection, setSelection] = useState<Selection>(undefined)
+  // The entry-problem rows point at a node from outside the graph: hovering one
+  // rings it, so "where is it?" is answered before a click is spent.
+  const [hoveredNodeId, setHoveredNodeId] = useState<string | undefined>(undefined)
 
   const model = useMemo(
     () => buildGraph({ trace, route, origin, origins, stale, running }),
@@ -216,14 +219,21 @@ function ReachabilityBoard(props: BoardProps) {
         running: selectedOriginRunning,
         multiPath,
         httpPath: props.probePath,
+        canRunInCluster: !!onRunInCluster && inClusterAllowed !== false,
       }),
-    [selection, trace, route, origin, origins, model, stale, selectedOriginRunning, multiPath, props.probePath],
+    [selection, trace, route, origin, origins, model, stale, selectedOriginRunning, multiPath, props.probePath, onRunInCluster, inClusterAllowed],
   )
   const verdict = useMemo(
     () => buildVerdict(trace, route, { stale, running: selectedOriginRunning, originId: origin?.id, originName: origin?.name, pathLabel: multiPath ? scenario?.primary.target || scenario?.label : undefined }),
     [trace, route, origins, stale, running, multiPath, scenario, origin],
   )
 
+  const problems = useMemo(
+    () => problemRows(trace, origins, new Set(model.nodes.map((n) => n.id))),
+    // Deliberately NOT keyed on the selection: the header is the resource.
+    [trace, origins, model],
+  )
+
   const onCTA = (cta: InspectorCTA) => {
     if (cta.disabledReason) return
     if (cta.action === 'run-in-cluster') onRunInCluster?.()
@@ -243,6 +253,20 @@ function ReachabilityBoard(props: BoardProps) {
         verdict={verdict}
         trace={trace}
         runNonce={runNonce}
+        problems={problems}
+        onEntryHover={setHoveredNodeId}
+        onEntrySelect={(id) => {
+          // A pointer row addresses a VANTAGE capsule; everything else a
+          // resource node. Selecting the capsule re-routes the whole board to
+          // that vantage, which is what "show me what it saw" means.
+          const originId = id.startsWith('origin:') ? (id.slice('origin:'.length) as OriginId) : undefined
+          if (originId) {
+            setOriginId(originId)
+            setSelection(undefined)
+            return
+          }
+          setSelection(id)
+        }}
         actions={
           <ReachActions
             {...props}
@@ -295,6 +319,7 @@ function ReachabilityBoard(props: BoardProps) {
               running={running}
             />
           )}
+          <ViewingStrip verdict={verdict} scenario={scenario} multiPath={multiPath} />
           <ReachabilityGraph
             model={model}
             onAction={(a) => {
@@ -308,6 +333,7 @@ function ReachabilityBoard(props: BoardProps) {
               onRunInCluster?.()
             }}
             selected={selection}
+            hovered={hoveredNodeId}
             onSelect={(id) => {
               // An origin capsule selects the VANTAGE - the rest of the graph
               // and the inspector re-route to it. Any other node selects the
@@ -457,16 +483,202 @@ function ScenarioPicker({
 
 const LAYER_ORDER = ['dns', 'tcp', 'tls', 'http']
 
+/**
+ * One row in the header's problem list.
+ *
+ * The list is deliberately VANTAGE-INVARIANT: everything in it is true no
+ * matter which capsule is selected, so a fault can never hide behind a click.
+ * Faults read off cluster state (a dead entry, a promoted finding) say what is
+ * wrong; a pointer row says another vantage saw something and takes you there.
+ * What a vantage saw stays on the board and in the inspector.
+ */
+interface ProblemRow {
+  key: string
+  scope: string
+  subject: string
+  text: string
+  detail?: string
+  /** Graph node to ring on hover and select on click - a resource node, or an
+   *  origin capsule (`origin:<id>`) for a pointer row. */
+  nodeId: string
+  severity: 'critical' | 'warning'
+}
+
+const SEV_RANK: Record<ProblemRow['severity'], number> = { critical: 0, warning: 1 }
+
+/** Merges every vantage-invariant problem into ONE ranked list: the promoted
+ *  diagnosis, the declared entries that cannot carry traffic, and a pointer to
+ *  anything only another vantage saw. Two separate bands read as two separate
+ *  problems when they were often the same one. */
+export function problemRows(
+  trace: Trace,
+  origins: Origin[],
+  knownNodeIds: ReadonlySet<string>,
+): ProblemRow[] {
+  const rows: ProblemRow[] = []
+  const seen = new Set<string>()
+  const push = (r: ProblemRow) => {
+    const k = `${r.subject}\u0000${r.text}`
+    if (seen.has(k)) return
+    // Never address a node the graph does not draw: a Pod culprit resolves to
+    // the aggregate Pods node it lives in, and anything still unknown drops its
+    // pointer rather than offering a hover that rings nothing and a click that
+    // selects a section no inspector can resolve.
+    if (r.nodeId && !knownNodeIds.has(r.nodeId)) {
+      const pods = [...knownNodeIds].find((id) => id.startsWith('n:Pods/'))
+      if (r.nodeId.startsWith('n:Pod/') && pods) r = { ...r, nodeId: pods }
+      else r = { ...r, nodeId: '' }
+    }
+    seen.add(k)
+    // The caller's key names the row FAMILY and is not unique on its own - one
+    // entry can carry several findings, and one origin several failed routes.
+    // `k` is what `seen` just proved unique, so pairing them is what makes the
+    // React key safe rather than each caller having to get it right.
+    rows.push({ ...r, key: `${r.key}${k}` })
+  }
+  const refNode = (r?: ResourceRef) => (r ? `n:${r.kind}/${r.namespace ?? ''}/${r.name || 'pods'}` : '')
+
+  // The promoted fault. A COVERAGE-class diagnosis is not a fault - it restates
+  // the headline, which is generated from the same coverage state.
+  const d = trace.diagnosis
+  if (d?.summary && d.class !== 'coverage') {
+    const ref = d.culpritResource
+    push({
+      key: 'diagnosis',
+      scope: ref ? ref.kind.toUpperCase() : 'PATH',
+      subject: ref ? `${ref.kind} ${ref.name}` : trace.subject.name,
+      text: noteHeadline(d.summary),
+      detail: [d.summary, d.nextAction].filter(Boolean).join(' — '),
+      nodeId: refNode(ref) || refNode(trace.subject),
+      // The detector's own severity. Assuming critical turned every warning-tier
+      // prediction into a red it had not earned.
+      severity: d.severity === 'critical' ? 'critical' : 'warning',
+    })
+  }
+
+  for (const p of trace.entryProblems ?? []) {
+    push({
+      key: `entry-${p.resource.kind}-${p.resource.name}`,
+      scope: 'ENTRY',
+      subject: `${p.resource.kind} ${p.resource.name}`,
+      text: noteHeadline(p.summary),
+      detail: [p.summary, p.detail, p.action].filter(Boolean).filter((v, i, a) => a.indexOf(v) === i).join(' — '),
+      nodeId: refNode(p.resource),
+      severity: p.severity === 'critical' ? 'critical' : 'warning',
+    })
+  }
+
+  // A fault some vantage hit, on ANY declared path. Deliberately independent of
+  // what is selected: the header is the resource, so a row that appears or
+  // vanishes as you click capsules would hide exactly the fault the reader has
+  // not thought to look for.
+  for (const o of origins) {
+    if (o.unsupported) continue
+    for (const r of trace.routes ?? []) {
+      const own = routeForOrigin(r, o.id, trace.runVantage)
+      if (!own || (own.outcome !== 'unreachable' && own.outcome !== 'server-error')) continue
+      push({
+        key: `vantage-${o.id}-${r.route}`,
+        scope: 'SEEN FROM',
+        subject: o.name,
+        text: own.evidence ? noteHeadline(own.evidence) : `could not get through to ${r.target || r.route}`,
+        detail: [own.evidence, `path: ${r.route}`].filter(Boolean).join(' — '),
+        nodeId: `origin:${o.id}`,
+        severity: 'warning',
+      })
+    }
+  }
+
+  return rows.sort((a, b) => SEV_RANK[a.severity] - SEV_RANK[b.severity])
+}
+
+/** The header's problem list. Hover names the fault in full and rings it on the
+ *  board; click focuses it there. */
+/**
+ * What you are currently looking at, stated ON the board that changes. Keeping
+ * it here rather than in the header is the whole redesign: the header is the
+ * resource and never moves, this strip is the selection and always does, and
+ * the spatial split says so without anyone having to read a label.
+ */
+function ViewingStrip({ verdict, scenario, multiPath }: { verdict: ReturnType<typeof buildVerdict>; scenario?: Scenario; multiPath: boolean }) {
+  const path = multiPath ? scenario?.primary.target || scenario?.label : undefined
+  return (
+    <div className="pointer-events-none absolute left-3 top-2 z-10 flex max-w-[50%] flex-wrap items-center gap-x-2 gap-y-1">
+      <span className="text-[9.5px] font-bold tracking-[0.07em] text-theme-text-tertiary">VIEWING</span>
+      {path && <span className="truncate font-mono text-[11px] font-semibold text-theme-text-secondary">{path}</span>}
+      {path && <span className="text-theme-border">·</span>}
+      <span className="truncate font-mono text-[11px] font-semibold text-theme-text-secondary">{verdict.originName ?? 'this resource'}</span>
+      <span className={`badge-sm whitespace-nowrap ${SEV_BADGE[verdict.tone]}`}>{verdict.chipText}</span>
+    </div>
+  )
+}
+
+function ProblemList({
+  rows,
+  onHover,
+  onSelect,
+}: {
+  rows: ProblemRow[]
+  onHover?: (nodeId?: string) => void
+  onSelect?: (nodeId: string) => void
+}) {
+  if (rows.length === 0) return null
+  const shown = rows.slice(0, 3)
+  const rest = rows.length - shown.length
+  return (
+    <div className="mt-1.5 flex flex-col gap-1">
+      {shown.map((p) => (
+        <Tooltip key={p.key} content={p.detail || p.text} wrapperClassName="block">
+          <button
+            type="button"
+            onMouseEnter={() => onHover?.(p.nodeId)}
+            onMouseLeave={() => onHover?.(undefined)}
+            onFocus={() => onHover?.(p.nodeId)}
+            onBlur={() => onHover?.(undefined)}
+            onClick={() => onSelect?.(p.nodeId)}
+            aria-label={`${p.subject} — ${p.text}. Show it on the path.`}
+            className="flex w-full max-w-[92ch] cursor-pointer items-start gap-1.5 rounded-md px-2 py-1.5 text-left text-xs leading-relaxed text-pretty transition-colors hover:bg-theme-hover"
+            style={{
+              border: `1px solid var(${p.severity === 'critical' ? '--color-error' : '--color-warning'})`,
+              background: `color-mix(in srgb, var(${p.severity === 'critical' ? '--color-error' : '--color-warning'}) 10%, transparent)`,
+            }}
+          >
+            <span className="shrink-0" style={{ color: `var(${p.severity === 'critical' ? '--color-error-dark' : '--color-warning-dark'})` }}>▲</span>
+            <span className="min-w-0 flex-1 text-theme-text-primary">
+              <span className="text-[9.5px] font-bold tracking-[0.07em] text-theme-text-tertiary">{p.scope} </span>
+              <span className="font-mono font-semibold">{p.subject}</span> — <span className="line-clamp-2">{p.text}</span>
+            </span>
+          </button>
+        </Tooltip>
+      ))}
+      {rest > 0 && <div className="text-[11px] text-theme-text-tertiary">+{rest} more problem{rest > 1 ? 's' : ''} — see the path below</div>}
+    </div>
+  )
+}
+
+/**
+ * The header. Everything in it describes THE RESOURCE and never changes when a
+ * vantage or path is selected - which is the whole point: the reader can learn
+ * once that this block is static and the board below is what moves. Anything
+ * scoped to the current selection lives on the board (the viewing strip and the
+ * capsules) and in the inspector.
+ */
 function VerdictBand({
   verdict,
   trace,
   actions,
   runNonce,
+  problems,
+  onEntryHover,
+  onEntrySelect,
 }: {
   verdict: ReturnType<typeof buildVerdict>
   trace: Trace
   actions: React.ReactNode
   runNonce?: number
+  problems: ProblemRow[]
+  onEntryHover?: (nodeId?: string) => void
+  onEntrySelect?: (nodeId: string) => void
 }) {
   // The check volume lives HERE, not only in the footer ledger: the band is
   // the one line everyone reads, and a verdict with no visible work behind it
@@ -489,15 +701,9 @@ function VerdictBand({
         )}
         <div className="flex flex-wrap items-baseline gap-2">
           <span className="text-[14.5px] font-semibold text-theme-text-primary">{verdict.title}</span>
-          {!verdict.chipScope && <span className={`badge-sm whitespace-nowrap ${SEV_BADGE[verdict.tone]}`}>{verdict.chipText}</span>}
           <JustTestedNote nonce={runNonce} />
         </div>
-        {verdict.chipScope && (
-          <div className="mt-1 flex flex-wrap items-center gap-2">
-            <span className="text-[9.5px] font-bold tracking-[0.07em] text-theme-text-tertiary">{verdict.chipScope.toUpperCase()}</span>
-            <span className={`badge-sm whitespace-nowrap ${SEV_BADGE[verdict.tone]}`}>{verdict.chipText}</span>
-          </div>
-        )}
+
         {stats.checks > 0 && (
           <Tooltip
             content={`${layerBreakdown}${stats.vantages > 1 ? ` — from ${stats.vantages} vantages` : ''}. Every check is a real dial; skipped ones are listed with their reasons, never counted. Each check waits up to ~1s, inside a 3s budget per run — a slow backend can time out and read as not tested.`}
@@ -514,16 +720,9 @@ function VerdictBand({
             </span>
           </Tooltip>
         )}
-        {verdict.problem && (
-          <div
-            className="mt-1.5 flex max-w-[92ch] items-start gap-1.5 rounded-md px-2 py-1.5 text-xs leading-relaxed text-pretty"
-            style={{ border: '1px solid var(--color-warning)', background: 'color-mix(in srgb, var(--color-warning) 10%, transparent)' }}
-          >
-            <span className="shrink-0" style={{ color: 'var(--color-warning-dark)' }}>▲</span>
-            <span className="text-theme-text-primary">{verdict.problem}</span>
-          </div>
-        )}
+
         {verdict.body && <div className="mt-1 max-w-[76ch] text-xs leading-relaxed text-theme-text-secondary text-pretty">{verdict.body}</div>}
+        <ProblemList rows={problems} onHover={onEntryHover} onSelect={onEntrySelect} />
       </div>
       <div className="flex flex-none gap-2">{actions}</div>
     </div>
@@ -681,6 +880,41 @@ function InspectorPanel({
         </Disclosure>
       )}
 
+      {/* The action sits with the sentence that explains why it is offered. As
+          its own block at the very bottom it repeated that sentence, and put
+          the button a scroll away from the reason for it. */}
+      {(path.next.body || path.next.ctas.length > 0) && (
+        <div className={path.next.header ? 'rounded-md px-2.5 py-2' : ''} style={path.next.header ? { border: '1px solid var(--accent)', background: 'var(--accent-muted)' } : undefined}>
+          {path.next.header && (
+            <div className="mb-1 text-[9.5px] font-bold tracking-[0.05em]" style={{ color: 'var(--accent-text)' }}>
+              {path.next.header}
+            </div>
+          )}
+          {path.next.body && <div className="text-[11.5px] leading-snug text-theme-text-secondary text-pretty">{path.next.body}</div>}
+          {path.next.blocked && <div className="mt-1.5 text-[10.5px] leading-snug text-theme-text-tertiary">{path.next.blocked}</div>}
+          {path.next.ctas.length > 0 && (
+            <div className={`flex flex-wrap gap-1.5 ${path.next.body || path.next.header ? 'mt-2' : 'mt-1'}`}>
+              {path.next.ctas.map((c, i) => (
+                <Tooltip key={i} content={c.disabledReason ?? ''} wrapperClassName="cursor-help">
+                  <button
+                    type="button"
+                    onClick={() => onCTA(c)}
+                    disabled={!!c.disabledReason}
+                    className={
+                      c.primary && !c.disabledReason
+                        ? 'btn-brand cursor-pointer whitespace-nowrap rounded-md px-2.5 py-1.5 text-[11px] font-semibold'
+                        : 'cursor-pointer whitespace-nowrap rounded-md border border-theme-border bg-theme-base px-2.5 py-1.5 text-[11px] font-semibold text-theme-text-secondary disabled:cursor-not-allowed disabled:opacity-60'
+                    }
+                  >
+                    {c.text}
+                  </button>
+                </Tooltip>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+
       {path.evidence.length > 0 && (
         <div>
           {/* Same count idiom as TEST DETAILS: the number of distinct
@@ -722,39 +956,6 @@ function InspectorPanel({
       )}
       <Caveats items={path.notProve} />
 
-      {/* The terminal "nothing to do" state renders as one quiet line - the
-          callout styling is reserved for states that carry an actual next move. */}
-      <div
-        className={path.next.quiet ? 'border-t border-theme-border pt-2.5' : 'rounded-md px-2.5 py-2.5'}
-        style={path.next.quiet ? undefined : { border: '1px solid var(--accent)', background: 'var(--accent-muted)' }}
-      >
-        <div className="text-[9.5px] font-bold tracking-[0.05em]" style={{ color: path.next.quiet ? 'var(--text-tertiary)' : 'var(--accent-text)' }}>
-          {path.next.header}
-        </div>
-        <div className="mt-1 text-[11.5px] leading-snug text-theme-text-secondary text-pretty">{path.next.body}</div>
-        {path.next.blocked && <div className="mt-1.5 text-[10.5px] leading-snug text-theme-text-tertiary">{path.next.blocked}</div>}
-        {path.next.ctas.length > 0 && (
-          <div className="mt-2 flex flex-wrap gap-1.5">
-            {path.next.ctas.map((c, i) => (
-              <Tooltip key={i} content={c.disabledReason ?? ''} wrapperClassName="cursor-help">
-              <button
-                type="button"
-                onClick={() => onCTA(c)}
-                disabled={!!c.disabledReason}
-                className={
-                  c.primary && !c.disabledReason
-                    ? 'btn-brand cursor-pointer whitespace-nowrap rounded-md px-2.5 py-1.5 text-[11px] font-semibold'
-                    : 'cursor-pointer whitespace-nowrap rounded-md border border-theme-border bg-theme-base px-2.5 py-1.5 text-[11px] font-semibold text-theme-text-secondary disabled:cursor-not-allowed disabled:opacity-60'
-                }
-              >
-                {c.text}
-              </button>
-              </Tooltip>
-            ))}
-          </div>
-        )}
-      </div>
-
     </div>
   )
 }

package/src/components/trace/problemRows.test.ts

@@ -0,0 +1,107 @@
+import { describe, it, expect } from 'vitest'
+import { problemRows } from './ReachabilityView'
+import { buildOrigins } from './reachOrigins'
+import { buildGraph } from './reachGraphModel'
+import type { Trace, RouteResult } from './types'
+
+const base = (): Trace => ({
+  subject: { kind: 'Service', name: 'shop', namespace: 'store' },
+  verdict: 'degraded', brokenAt: -1,
+  upstreams: [{ resource: { kind: 'HTTPRoute', name: 'shop', namespace: 'store' }, edge: 'httproute->service', findings: [] }],
+  downstream: [
+    { resource: { kind: 'Service', name: 'shop', namespace: 'store' }, edge: 'service', findings: [] },
+    { resource: { kind: 'Pods', name: '', namespace: 'store' }, edge: 'service->pods', findings: [], config: { pods: [{ name: 'shop-1', ready: true, ip: '10.0.0.1' }], podTotal: 1 } },
+  ],
+  routes: [],
+} as never)
+
+/** The ids the graph actually draws, which is what a header row may address. */
+const nodesOf = (t: Trace, r?: RouteResult) => {
+  const origins = buildOrigins(t)
+  // Pass every origin, as the app does - the capsules ARE nodes a header row
+  // may address.
+  const g = buildGraph({ trace: t, route: r ?? ({ route: 'shop', target: 'shop:80', outcome: 'reached' } as never), origin: origins.find((o) => o.id === 'apiserver')!, origins })
+  return new Set(g.nodes.map((n) => n.id))
+}
+
+describe('the header problem list', () => {
+  it('drops a coverage-class diagnosis - the headline already says it', () => {
+    const t = base()
+    t.diagnosis = { class: 'coverage', summary: 'reachable via API server - the real-traffic path was not confirmed from here' } as never
+    expect(problemRows(t, buildOrigins(t), nodesOf(t))).toHaveLength(0)
+  })
+
+  it('renders the severity the detector assigned, never inventing critical', () => {
+    const t = base()
+    t.diagnosis = { summary: 'a network rule would block traffic', severity: 'warning' } as never
+    expect(problemRows(t, buildOrigins(t), nodesOf(t))[0].severity).toBe('warning')
+    t.diagnosis = { summary: 'container is crashlooping', severity: 'critical' } as never
+    expect(problemRows(t, buildOrigins(t), nodesOf(t))[0].severity).toBe('critical')
+  })
+
+  it('ranks critical above warning', () => {
+    const t = base()
+    t.diagnosis = { summary: 'container is crashlooping', severity: 'critical' } as never
+    t.entryProblems = [{ resource: { kind: 'HTTPRoute', name: 'shop', namespace: 'store' }, summary: 'Not attached: no listener matches its hosts', severity: 'warning' }] as never
+    expect(problemRows(t, buildOrigins(t), nodesOf(t)).map((r) => r.severity)).toEqual(['critical', 'warning'])
+  })
+
+  it('is INDEPENDENT of what is selected - the header is the resource', () => {
+    const t = base()
+    const r: RouteResult = {
+      route: 'shop', target: 'shop:80', outcome: 'reached', confidence: 'indirect',
+      byVantage: [{ vantage: 'in-cluster', path: 'data', source: 'probe-job', outcome: 'unreachable', confidence: 'real', evidence: 'connection refused' }],
+    } as never
+    t.routes = [r]
+    const rows = problemRows(t, buildOrigins(t), nodesOf(t, r))
+    const ptr = rows.find((x) => x.scope === 'SEEN FROM')
+    expect(ptr, 'a fault a vantage saw must be listed however the reader is browsing').toBeTruthy()
+    expect(ptr!.nodeId).toBe('origin:incluster')
+    // the same rows regardless of which vantage the reader has open
+    expect(problemRows(t, buildOrigins(t), nodesOf(t, r))).toEqual(rows)
+  })
+
+  it('never addresses a node the graph does not draw', () => {
+    const t = base()
+    // A Pod culprit: the graph aggregates Pods, so an individual Pod node does not exist.
+    t.diagnosis = { summary: 'container is crashlooping', severity: 'critical', culpritResource: { kind: 'Pod', name: 'shop-1', namespace: 'store' } } as never
+    const known = nodesOf(t)
+    const row = problemRows(t, buildOrigins(t), known)[0]
+    expect(row.nodeId === '' || known.has(row.nodeId)).toBe(true)
+  })
+
+  it('says nothing when nothing is wrong', () => {
+    const t = base()
+    expect(problemRows(t, buildOrigins(t), nodesOf(t))).toHaveLength(0)
+  })
+})
+
+// One entry can carry several findings, and one origin several failed routes,
+// so a key built from the subject alone collides. React silently mis-renders or
+// drops rows on duplicate keys - which would hide a fault in the list whose
+// whole job is to surface faults.
+describe('every row can be told apart', () => {
+  it('gives two findings on ONE entry distinct keys, and keeps both rows', () => {
+    const t = base()
+    const ref = { kind: 'HTTPRoute', name: 'shop', namespace: 'store' }
+    t.entryProblems = [
+      { resource: ref, summary: 'Not attached: no listener matches its hosts', severity: 'warning' },
+      { resource: ref, summary: 'Backend service port 8080 does not exist', severity: 'critical' },
+    ] as never
+    const rows = problemRows(t, buildOrigins(t), nodesOf(t))
+    expect(rows).toHaveLength(2)
+    expect(new Set(rows.map((r) => r.key)).size).toBe(2)
+  })
+
+  it('keeps keys unique across the whole list, whatever the mix', () => {
+    const t = base()
+    t.diagnosis = { summary: 'container is crashlooping', severity: 'critical' } as never
+    t.entryProblems = [
+      { resource: { kind: 'HTTPRoute', name: 'shop', namespace: 'store' }, summary: 'Not attached', severity: 'warning' },
+      { resource: { kind: 'HTTPRoute', name: 'shop', namespace: 'store' }, summary: 'Backend port missing', severity: 'warning' },
+    ] as never
+    const rows = problemRows(t, buildOrigins(t), nodesOf(t))
+    expect(rows.length).toBeGreaterThan(1)
+    expect(new Set(rows.map((r) => r.key)).size).toBe(rows.length)
+  })
+})

package/src/components/trace/reachGraphModel.test.ts

@@ -1405,3 +1405,19 @@ describe('an all-skipped origin never claims a network verdict', () => {
     expect(originNoEvidenceLabel({ id: 'incluster', mark: 'blocked', unavailable: 'image pull failed' } as never)).toBe('test couldn’t run')
   })
 })
+
+describe('entry-problem rows can address a graph node', () => {
+  it('the node id an EntryProblem resolves to matches the graph upstream node id', () => {
+    const t = {
+      subject: { kind: 'Service', name: 'shop', namespace: 'store' },
+      verdict: 'degraded', brokenAt: -1,
+      upstreams: [{ resource: { kind: 'HTTPRoute', name: 'shop', namespace: 'store' }, edge: 'httproute->service', findings: [] }],
+      downstream: [{ resource: { kind: 'Service', name: 'shop', namespace: 'store' }, edge: 'service', findings: [] }],
+      routes: [{ route: 'shop', target: 'shop:80', outcome: 'reached', confidence: 'real' }],
+    } as never
+    const g = buildGraph({ trace: t, route: route({ target: 'shop:80', outcome: 'reached' }), origin: buildOrigins(t).find((o) => o.id === 'apiserver')! })
+    // Mirrors the id the EntryProblems row builds from EntryProblem.resource.
+    const fromProblem = 'n:HTTPRoute/store/shop'
+    expect(g.nodes.some((n) => n.id === fromProblem)).toBe(true)
+  })
+})