@skyhook-io/radar-app 1.9.5 → 1.9.7

package/src/components/workload/WorkloadView.tsx

@@ -1,13 +1,14 @@
-import { useMemo, useEffect, useCallback, useState } from 'react'
+import { useMemo, useEffect, useCallback, useRef, useState } from 'react'
 import { useQueries, useQueryClient } from '@tanstack/react-query'
 import { useNavigate, useLocation, useSearchParams } from 'react-router-dom'
 import { workloadPodAwaitsScheduling } from '../capacity/podDemandGate'
 import { clsx } from 'clsx'
-import { Terminal } from 'lucide-react'
+import { Terminal, Stethoscope } from 'lucide-react'
 import {
   WorkloadView as BaseWorkloadView,
   EditableYamlView,
   FetchResult,
+  Section,
   type WorkloadTabType,
   type RendererOverrides,
   type GitOpsOwnerRef,
@@ -20,6 +21,7 @@ import {
   gitOpsRouteForOwner,
   gitOpsOwnerFromRelationships,
   getGitOpsResourceStatus,
+  isDiagnoseKind,
 } from '@skyhook-io/k8s-ui'
 import type { ServicePortRenderProps } from '@skyhook-io/k8s-ui/components/resources/renderers/ServiceRenderer'
 import type { SelectedResource, ResourceRef, Relationships } from '../../types'
@@ -27,6 +29,7 @@ import {
   kindToPlural,
   pluralToKind,
   relatedResourcePath,
+  buildWorkloadPath,
   type NavigateToResource,
 } from '../../utils/navigation'
 import {
@@ -69,8 +72,8 @@ import { RestartEventLane } from '../resource/RestartChart'
 import { RightsizingPanel, RightsizingStrip } from '../resource/RightsizingStrip'
 import { WorkloadCostTab } from '../cost/WorkloadCostTab'
 import { isOpenCostWorkloadKind } from '../cost/kinds'
-import { useResourceAudit, useResourceIssues, useResources } from '../../api/client'
-import { AuditAlerts, ResourceIssuesSection } from '@skyhook-io/k8s-ui'
+import { useResourceAudit, useResourceIssues, useResources, useTrace, fetchTraceWithProbes, fetchInClusterCapability, runInClusterMerged } from '../../api/client'
+import { AuditAlerts, ResourceIssuesSection, ReachabilityView, TraceSummary, InClusterConsentDialog, traceFingerprint, staticPollUnreliable, summarizeInClusterTests, type Trace as NetworkTrace, type InClusterCapability, inClusterConsentGiven, consentRequestRows } from '@skyhook-io/k8s-ui'
 import { WorkloadLogsViewer } from '../logs/WorkloadLogsViewer'
 import { ScheduledWorkloadLogsViewer } from '../logs/ScheduledWorkloadLogsViewer'
 import { LogsViewer } from '../logs/LogsViewer'
@@ -245,7 +248,13 @@ interface WorkloadViewProps {
   pushTabHistory?: boolean
 }
 
-function useActionsBarProps(kind: string, namespace: string, name: string) {
+function useActionsBarProps(
+  kind: string,
+  namespace: string,
+  name: string,
+  group: string | undefined,
+  cascadeEnabled: boolean,
+) {
   const { showCopied } = useToast()
   const openTerminal = useOpenTerminal()
   const openLogs = useOpenLogs()
@@ -281,11 +290,16 @@ function useActionsBarProps(kind: string, namespace: string, name: string) {
   const argoSuspendMutation = useArgoSuspend()
   const argoResumeMutation = useArgoResume()
 
-  const { data: cascadePreview, isLoading: cascadeLoading } = useCascadeDeletePreview(
+  const {
+    data: cascadePreview,
+    isLoading: cascadeLoading,
+    isError: cascadeError,
+  } = useCascadeDeletePreview(
     kind,
     namespace,
     name,
-    true,
+    group,
+    cascadeEnabled,
   )
 
   const canNodeWrite = useCanNodeWrite()
@@ -324,6 +338,7 @@ function useActionsBarProps(kind: string, namespace: string, name: string) {
     isDeleting: deleteMutation.isPending,
     cascadeDependents: cascadePreview?.dependents,
     cascadeLoading,
+    cascadeRootResolved: cascadeError ? false : cascadePreview?.rootResolved,
     onRestart: (params: Parameters<typeof restartWorkloadMutation.mutate>[0]) =>
       restartWorkloadMutation.mutate(params),
     isRestarting: restartWorkloadMutation.isPending,
@@ -400,7 +415,9 @@ export function WorkloadView({
       ? 'overview'
       : rawTab === 'events'
         ? 'timeline'
-        : (rawTab as TabType) || 'overview'
+        : rawTab === 'diagnose'
+          ? 'reachability' // the network tab was renamed Reachability
+          : (rawTab as TabType) || 'overview'
 
   const handleTabChange = useCallback(
     (tab: TabType, opts?: { replace?: boolean }) => {
@@ -446,6 +463,24 @@ export function WorkloadView({
   } = useResourceWithRelationships<any>(apiKind, namespace, name, rest.group)
   const resource = resourceResponse?.resource
   const relationships = resourceResponse?.relationships
+  const resourceGroup = useMemo(
+    () => (resource?.apiVersion ? apiVersionToGroup(resource.apiVersion) : undefined),
+    [resource?.apiVersion],
+  )
+  // The URL group arrives as '' when ?apiGroup is absent, which fails
+  // isDiagnoseKind's group check for Gateway-API kinds (HTTPRoute/GRPCRoute/
+  // Gateway) - an HTTPRoute page would then trace its serving Service instead
+  // of itself. Fall back to the group derived from the fetched resource, then
+  // to undefined (which the gate treats as "group unknown → allow").
+  const effectiveGroup = rest.group || resourceGroup || undefined
+  // Reachability for a workload IS the reachability of the Services in front of
+  // it - a Deployment has no address of its own. Empty for a workload nothing
+  // selects, which correctly leaves the tab hidden: there is no path to trace.
+  // Entry kinds trace themselves and ignore this.
+  const servingServices = useMemo(
+    () => (isDiagnoseKind(apiKind, effectiveGroup) ? [] : (relationships?.services ?? [])),
+    [apiKind, effectiveGroup, relationships],
+  )
   const refetchResourceAndRuns = useCallback(async () => {
     await Promise.all([
       refetchResource(),
@@ -652,13 +687,15 @@ export function WorkloadView({
   )
   const updateResource = useUpdateResource()
   const previewResources = usePreviewResources()
-  const baseActionsBarProps = useActionsBarProps(apiKind, namespace, name)
+  const baseActionsBarProps = useActionsBarProps(
+    apiKind,
+    namespace,
+    name,
+    effectiveGroup,
+    !resourceLoading && Boolean(resource),
+  )
   const desktopDownload = useDesktopDownload()
 
-  const resourceGroup = useMemo(
-    () => (resource?.apiVersion ? apiVersionToGroup(resource.apiVersion) : undefined),
-    [resource?.apiVersion],
-  )
   // Live Operational Issues for this resource. Fetched here (not inside the lead
   // render-prop) so the count also gates `hasOperationalIssues` — which tells the
   // renderers to suppress their own status-derived problems and avoid duplicates.
@@ -681,7 +718,7 @@ export function WorkloadView({
     // Prefer the URL-supplied group so Compare works even before the resource
     // fetch completes; fall back to the derived group for callers that don't
     // pass one.
-    group: rest.group || resourceGroup || undefined,
+    group: effectiveGroup,
   })
   const actionsBarProps = useMemo(
     () => ({ ...baseActionsBarProps, onCompareTo, onCompareAcrossClusters }),
@@ -717,6 +754,17 @@ export function WorkloadView({
     (path: string) => navigateRouter(path),
     [navigateRouter],
   )
+  // Drawer TraceSummary CTA → open the full resource view ON the Reachability tab.
+  // The generic onExpand navigates to the workload path but drops the query, so we
+  // navigate directly to that path WITH ?tab=reachability - the deeplink the
+  // expanded view reads to land on the right tab.
+  const openReachability = useCallback(() => {
+    const base = buildWorkloadPath({ kind: kindProp, namespace, name, group: rest.group })
+    // autorun=1 tells the expanded view to immediately run the (proxy) reachability
+    // test - the operator clicked "Open Reachability" to SEE results, not to land on
+    // a static page and click Run again.
+    navigateRouter(`${base}${base.includes('?') ? '&' : '?'}tab=reachability&autorun=1`)
+  }, [navigateRouter, kindProp, namespace, name, rest.group])
   const handleOpenHelmRelease = useCallback(
     (ref: HelmOwnerRef) => {
       const params = new URLSearchParams()
@@ -805,6 +853,7 @@ export function WorkloadView({
         name={name}
         expanded={expanded}
         {...rest}
+        group={effectiveGroup}
         // Data
         resource={resource}
         relationships={relationships}
@@ -895,6 +944,27 @@ export function WorkloadView({
             <WorkloadCostTab kind={kind} namespace={ns} name={n} />
           </div>
         )}
+        reachableVia={servingServices}
+        renderDiagnoseTab={({ namespace: ns, name: n }) => (
+          // Key by resource identity so the tab REMOUNTS on A→B navigation - without
+          // this, the first render with B's identity but A's still-set probeTrace
+          // paints A's verdict under B for one commit before the reset effect runs.
+          //
+          // The kind comes from the loaded resource, else the URL's own singular
+          // PascalCase kind - NEVER the base view's re-derived one: before the
+          // resource (or CRD discovery) loads, de-pluralizing "httproutes" guessed
+          // "Httproute", which fired the auto-probes once under the guessed kind
+          // and again under the real one - two live probe runs per tab open.
+          <WorkloadReachabilityTab
+            key={`${resource?.kind ?? kindProp}/${ns}/${n}`}
+            kind={resource?.kind ?? kindProp}
+            namespace={ns}
+            name={n}
+            group={effectiveGroup}
+            servingServices={servingServices}
+            onNavigate={rest.onNavigateToResource}
+          />
+        )}
         isMetricsAvailable={(kind, res) =>
           isPrometheusSupported(kind) && !(kind === 'Pod' && res?.status?.phase === 'Pending')
         }
@@ -903,15 +973,31 @@ export function WorkloadView({
         onDownload={desktopDownload}
         actionsBarProps={actionsBarProps}
         rendererOverrides={rendererOverrides}
-        renderOverviewExtra={({ kind: k, namespace: ns, name: n }) => (
+        renderOverviewExtra={({ kind: k, namespace: ns, name: n, group: g, context }) => {
+          // Network entry kinds (Service/Ingress/Route/Gateway) ARE the diagnosis
+          // target: DiagnoseInlineSection renders in the drawer, no hint. Workload
+          // kinds lead with DiagnoseFromWorkloadHint so a developer who opened a
+          // failing workload finds the diagnose entry. The group disambiguates a CRD
+          // sharing a core kind name (Knative Service, Istio Gateway).
+          const isNetworkKind = isDiagnoseKind(k, g)
+          const diagnoseInline = context === 'drawer' && isNetworkKind ? (
+            <DiagnoseInlineSection kind={k} namespace={ns} name={n} group={g} onOpenReachability={openReachability} />
+          ) : null
+          const diagnoseHint = context === 'drawer' && !isNetworkKind ? (
+            <DiagnoseFromWorkloadHint services={servingServices} onOpenReachability={openReachability} />
+          ) : null
+          return (
           <>
+            {diagnoseInline}
+            {diagnoseHint}
             <FluxSourceConsumersSection kind={k} namespace={ns} name={n} />
             <AuditOverviewSection
               findings={auditFindings ?? []}
               onViewAll={() => navigateRouter('/checks')}
             />
           </>
-        )}
+          )
+        }}
         renderOverviewLead={() => (
           <ResourceIssuesSection
             issues={liveIssues}
@@ -1410,6 +1496,484 @@ function AuditOverviewSection({
   return <AuditAlerts findings={findings} onViewAll={onViewAll} />
 }
 
+// DiagnoseFromWorkloadHint surfaces the Diagnose entry point for app
+// developers who open a failing workload (Deployment, StatefulSet, Pod,
+// etc.) and don't know that diagnosis lives on the fronting Service.
+// Without this card the operator has to navigate the topology themselves
+// to find the right Service. Renders only when the workload has at
+// least one Service in its relationships; on isolated workloads (no
+// Service in front) the card stays hidden because no entry-point exists
+// to link to. Services are handed down from the drawer's own relationships
+// fetch rather than re-fetched here: re-fetching by singular Kind missed
+// both the plural and the API group, which 404s for a CRD whose plural
+// collides with another CRD's (CNPG vs CAPI `clusters`).
+function DiagnoseFromWorkloadHint({
+  services,
+  onOpenReachability,
+}: {
+  services: ResourceRef[]
+  onOpenReachability: () => void
+}) {
+  if (services.length === 0) return null
+  return (
+    <Section title="Diagnose network path">
+      <div className="flex items-start gap-2 text-xs text-theme-text-secondary">
+        <Stethoscope className="w-4 h-4 mt-0.5 shrink-0 text-theme-text-tertiary" aria-hidden />
+        <div className="flex-1 min-w-0">
+          {services.length === 1 ? 'Exposed by Service ' : 'Exposed by Services '}
+          {services.map((svc, i) => (
+            <span key={`${svc.namespace ?? ''}/${svc.name}`}>
+              <span className="font-medium text-theme-text-primary">{svc.name}</span>
+              {i < services.length - 1 ? <span className="text-theme-text-tertiary">{', '}</span> : null}
+            </span>
+          ))}
+          {/* Opens the workload's OWN Reachability tab, which traces that
+              Service in place. Linking to the Service instead made the operator
+              navigate away and restart the investigation somewhere else. */}
+          <span className="text-theme-text-tertiary">. </span>
+          <button type="button" onClick={onOpenReachability} className="font-medium text-accent-text hover:underline">
+            Trace the traffic path →
+          </button>
+        </div>
+      </div>
+    </Section>
+  )
+}
+
+// DiagnoseTabContent binds the static-trace polling hook + the one-shot probe
+// fetch to the presentational ReachabilityView. Probe results are held in local
+// state and keep showing until the resource or the tested path changes - or
+// until a static poll reports that the underlying cluster state changed since
+// the test ran, at which point the staleness mask below drops them (with a
+// notice) so a frozen snapshot is never presented as current truth.
+// useProbeRun owns the one-shot reachability-probe state for a focused
+// resource. A per-resource token guards every async resolution: navigating to
+// a different resource (props change) does NOT unmount this component, so an
+// aliveRef-only guard would let an in-flight probe for resource A resolve and
+// paint A's verdict onto resource B - a confident-wrong verdict on the wrong
+// resource. The token is bumped on every resource change (and unmount); a late
+// then/catch whose captured token no longer matches simply bails.
+function useProbeRun(kind: string, namespace: string, name: string) {
+  const [probeTrace, setProbeTrace] = useState<NetworkTrace | undefined>(undefined)
+  const [probeError, setProbeError] = useState<Error | null>(null)
+  const [running, setRunning] = useState(false)
+  const tokenRef = useRef(0)
+  // runningRef mirrors `running` so runProbes' in-flight guard reads LIVE state, not a
+  // value captured at render. applyProbePath calls resetProbe() then runProbes()
+  // synchronously; the closed-over `running` would still be true and bail the new run,
+  // whereas resetProbe clears runningRef immediately so the guard sees it's free.
+  const runningRef = useRef(false)
+  useEffect(() => {
+    tokenRef.current += 1
+    setProbeTrace(undefined)
+    setProbeError(null)
+    runningRef.current = false
+    setRunning(false)
+  }, [kind, namespace, name])
+  useEffect(() => () => { tokenRef.current += 1 }, [])
+  const runProbes = useCallback((path?: string) => {
+    if (runningRef.current) return
+    const token = tokenRef.current
+    runningRef.current = true
+    setRunning(true)
+    setProbeError(null)
+    fetchTraceWithProbes(kind, namespace, name, path)
+      .then((result) => { if (tokenRef.current === token) setProbeTrace(result) })
+      .catch((e: unknown) => { if (tokenRef.current === token) setProbeError(e instanceof Error ? e : new Error(String(e))) })
+      .finally(() => { if (tokenRef.current === token) { runningRef.current = false; setRunning(false) } })
+  }, [kind, namespace, name])
+  // resetProbe drops the current probe trace AND bumps the token so an in-flight
+  // probe for the OLD path can't resolve and repaint. Used when the tested path
+  // changes: the prior path's verdict must not linger under the new path's label.
+  const resetProbe = useCallback(() => {
+    tokenRef.current += 1
+    setProbeTrace(undefined)
+    setProbeError(null)
+    runningRef.current = false
+    setRunning(false)
+  }, [])
+  return { probeTrace, probeError, running, runProbes, resetProbe }
+}
+
+// useInClusterTest runs the WHOLE-subject in-cluster test in one click. The server
+// runs every route's live probe and folds them in via the canonical
+// trace.ApplyInClusterResults, returning the FINALIZED trace - so this hook just
+// displays it, never reimplementing a weaker merge that could falsely confirm a
+// sibling route or leave stale diagnosis/netpol beside a live-verified route. The
+// result resets whenever the base trace changes (a fresh proxy run), so stale
+// in-cluster data never lingers.
+function useInClusterTest(base: NetworkTrace | undefined, kind: string, namespace: string, name: string) {
+  const [running, setRunning] = useState(false)
+  // undefined = the capability SSAR has not answered yet. Starting at `false`
+  // made the in-cluster capsule claim "not permitted" for the first frames of
+  // every load - a definitive denial for a check still in flight, which is the
+  // one thing this view must never do. Consumers gate on `=== false`, so an
+  // unknown answer now reads as unknown.
+  const [allowed, setAllowed] = useState<boolean | undefined>(undefined)
+  const [cap, setCap] = useState<InClusterCapability | undefined>(undefined)
+  const [merged, setMerged] = useState<NetworkTrace | undefined>(undefined)
+  const [error, setError] = useState<string | undefined>(undefined)
+  const [fallback, setFallback] = useState<string | undefined>(undefined)
+  const [partial, setPartial] = useState(false)
+  const [evidenceOnly, setEvidenceOnly] = useState(false)
+  const [evidence, setEvidence] = useState<string | undefined>(undefined)
+  // Per-resource token: bumped whenever the base trace changes (navigation / fresh
+  // proxy run) and on unmount, so an in-flight run that resolves AFTER the operator
+  // navigated to another resource never paints resource A's verdict onto resource B.
+  const tokenRef = useRef(0)
+  useEffect(() => {
+    let alive = true
+    // A fetch ERROR is not a denial: `false` is reserved for the server
+    // definitively saying no, and consumers render `=== false` as "not
+    // permitted". A 503 while the cache warms or a network blip must leave the
+    // answer unknown, not paint a permanent RBAC denial.
+    fetchInClusterCapability(kind, namespace, name).then((c) => { if (alive) { setAllowed(!!c.allowed); setCap(c) } }).catch(() => {})
+    return () => { alive = false }
+  }, [kind, namespace, name])
+  useEffect(() => {
+    tokenRef.current++
+    setMerged(undefined); setError(undefined); setFallback(undefined); setPartial(false); setEvidenceOnly(false); setEvidence(undefined); setRunning(false)
+  }, [base])
+  // Invalidate an in-flight run on unmount. Kept as a separate []-effect: bumping
+  // the ref in a deps-driven cleanup trips react-hooks/exhaustive-deps (the ref
+  // changes between re-runs), and the base-change case is already covered by the
+  // body bump above.
+  useEffect(() => () => { tokenRef.current++ }, [])
+  const run = useCallback(async (path: string = '/') => {
+    if (!base || running) return
+    const token = tokenRef.current
+    setRunning(true)
+    setError(undefined)
+    setFallback(undefined)
+    try {
+      const { trace, inClusterTests } = await runInClusterMerged(kind, namespace, name, path)
+      if (tokenRef.current !== token) return // navigated away / base changed mid-run
+      setMerged(trace)
+      // A per-route in-cluster failure (Job couldn't start, timed out, RBAC) comes
+      // back as HTTP 200 with an error status + a fallback command inside
+      // inClusterTests. A row can also carry a message with NO fallback command -
+      // nothing eligible to test (e.g. a Gateway subject), the per-call pod cap,
+      // or an exhausted request time budget. Surface both - otherwise the run
+      // vanishes as if nothing happened - and mark whether OTHER rows still
+      // produced results, so the banner can say "partially completed" instead of
+      // the false "couldn't run" over a merged trace that folded live results.
+      const summary = summarizeInClusterTests(inClusterTests)
+      setError(summary.error)
+      setFallback(summary.fallback)
+      setPartial(summary.partial)
+      setEvidenceOnly(summary.evidenceOnly)
+      setEvidence(summary.evidence)
+    } catch (e: unknown) {
+      if (tokenRef.current !== token) return
+      setError(e instanceof Error ? e.message : String(e))
+      setFallback(undefined)
+      setPartial(false)
+      setEvidenceOnly(false)
+      setEvidence(undefined)
+    } finally {
+      if (tokenRef.current === token) setRunning(false)
+    }
+  }, [base, running, kind, namespace, name])
+  return { run, running, allowed, cap, merged, error, fallback, partial, evidenceOnly, evidence }
+}
+
+/**
+ * Reachability for a resource that has no address of its own.
+ *
+ * A Deployment cannot be dialled; what can be dialled is the Service in front of
+ * it, so this traces that Service while keeping the workload as the thing the
+ * operator opened. Previously a workload offered only a link to the Service,
+ * which meant navigating away and restarting the investigation - the workload
+ * half of "Service/workload reachability" did not exist as a journey.
+ *
+ * An entry kind traces itself and never reaches the picker below.
+ */
+function WorkloadReachabilityTab({
+  kind,
+  namespace,
+  name,
+  group,
+  servingServices,
+  onNavigate,
+}: {
+  kind: string
+  namespace: string
+  name: string
+  group?: string
+  servingServices: ResourceRef[]
+  onNavigate?: NavigateToResource
+}) {
+  const tracesItself = isDiagnoseKind(kind, group)
+  const [pick, setPick] = useState(0)
+  if (tracesItself) {
+    return <DiagnoseTabContent kind={kind} namespace={namespace} name={name} onNavigate={onNavigate} />
+  }
+  const svc = servingServices[pick] ?? servingServices[0]
+  if (!svc) return null
+  return (
+    <div className="flex h-full min-h-0 flex-col gap-2">
+      {/* Only when there is a CHOICE to make. A full-width band to say "this
+          Deployment has no address" spent a row of height on a sentence, and the
+          workload now names the Pods at the end of the path in the graph itself -
+          which is where the reader is already looking. */}
+      {servingServices.length > 1 && (
+        <div className="flex flex-wrap items-center gap-2 px-1 text-[11.5px] text-theme-text-tertiary">
+          <span>Reached through:</span>
+          {servingServices.map((s, i) => (
+            <button
+              key={`${s.namespace ?? ''}/${s.name}`}
+              type="button"
+              onClick={() => setPick(i)}
+              className={`rounded px-1.5 py-0.5 font-mono text-[11px] ${
+                i === pick ? 'bg-theme-hover font-semibold text-theme-text-primary' : 'text-accent-text hover:underline'
+              }`}
+            >
+              {s.name}
+            </button>
+          ))}
+        </div>
+      )}
+      <div className="min-h-0 flex-1">
+        <DiagnoseTabContent
+          key={`${svc.namespace ?? namespace}/${svc.name}`}
+          kind="Service"
+          namespace={svc.namespace ?? namespace}
+          name={svc.name}
+          onNavigate={onNavigate}
+        />
+      </div>
+    </div>
+  )
+}
+
+function DiagnoseTabContent({
+  kind,
+  namespace,
+  name,
+  onNavigate,
+}: {
+  kind: string
+  namespace: string
+  name: string
+  onNavigate?: NavigateToResource
+}) {
+  const { data: staticTrace, isLoading, error, refetch } = useTrace(kind, namespace, name)
+  const { probeTrace, probeError, running, runProbes, resetProbe } = useProbeRun(kind, namespace, name)
+  const baseTrace = probeTrace ?? staticTrace
+  const { run: runInClusterTest, running: inClusterRunning, allowed: inClusterAllowed, cap: inClusterCap, merged: inClusterTrace, error: inClusterError, fallback: inClusterFallback, partial: inClusterPartial, evidenceOnly: inClusterEvidenceOnly, evidence: inClusterEvidenceNote } = useInClusterTest(baseTrace, kind, namespace, name)
+  // Gate the merged in-cluster trace on a live probe trace: when the staleness
+  // mask below clears probeTrace, useInClusterTest resets `merged` one effect
+  // pass later - without the gate that pass would still paint the stale
+  // in-cluster verdict for a frame.
+  const displayTrace = (probeTrace !== undefined ? inClusterTrace : undefined) ?? baseTrace
+  // Staleness mask for the probe snapshot: probe/in-cluster results are a
+  // snapshot of the moment they ran, while the static trace keeps polling
+  // underneath. The baseline is the fingerprint of THE RESULT TRACE ITSELF:
+  // a ?probe=true response (and the in-cluster merged trace) embeds the same
+  // static-derived content the probes actually ran against, and
+  // traceFingerprint covers only probe-invariant fields - so it exists at the
+  // instant of adoption (no race with the separate static query: a probe that
+  // beats the static fetch, or a cluster change mid-run, can't baseline on
+  // post-change state). When a later static poll fingerprints DIFFERENTLY,
+  // drop the snapshot (the view falls back to the live static trace) and say
+  // why - keeping the old verdict up would present stale evidence as current
+  // truth. An adopted in-cluster merged trace re-baselines: it reflects the
+  // (possibly newer) state its run observed.
+  const staticFp = useMemo(() => (staticTrace ? traceFingerprint(staticTrace) : undefined), [staticTrace])
+  // Only a FULLY-BUILT, healthy static poll is trustworthy staleness evidence. A
+  // budget-timeout partial (fewer hops) or a transient pod-lister failure
+  // (endpointSource=unknown) still returns HTTP 200 but fingerprints DIFFERENTLY -
+  // comparing against it would drop a good snapshot and cry "cluster changed" though
+  // nothing did. Skip the comparison for such polls; a poll we couldn't fully build
+  // is not evidence of change.
+  const staticPollDegraded = useMemo(() => (staticTrace ? staticPollUnreliable(staticTrace) : false), [staticTrace])
+  const resultsTrace = inClusterTrace ?? probeTrace
+  const snapshotFp = useRef<string | undefined>(undefined)
+  const snapshotOf = useRef<NetworkTrace | undefined>(undefined)
+  const [clusterChanged, setClusterChanged] = useState(false)
+  useEffect(() => { setClusterChanged(false) }, [kind, namespace, name])
+  useEffect(() => {
+    if (resultsTrace === undefined) {
+      snapshotOf.current = undefined
+      snapshotFp.current = undefined
+      return
+    }
+    if (resultsTrace !== snapshotOf.current) {
+      // A run just adopted results: baseline on the state embedded in the
+      // result itself.
+      snapshotOf.current = resultsTrace
+      snapshotFp.current = traceFingerprint(resultsTrace)
+      setClusterChanged(false)
+      return
+    }
+    if (staticFp !== undefined && staticFp !== snapshotFp.current) {
+      // A partial/degraded poll fingerprints differently for reasons that aren't a
+      // real cluster change - keep the snapshot rather than fire a false banner.
+      if (staticPollDegraded) return
+      resetProbe()
+      setClusterChanged(true)
+    }
+  }, [resultsTrace, staticFp, staticPollDegraded, resetProbe])
+  // Consent gate for the mutating in-cluster test: it spawns a Job/pod, so the first
+  // run per cluster asks the operator to confirm - naming the cluster it lands in -
+  // unless they chose "don't ask again" for that cluster. Permission is already
+  // enforced upstream (the button only renders when the capability SSAR allows), so
+  // this is a safety confirm, not an authz check.
+  const [pendingRunPath, setPendingRunPath] = useState<string | null>(null)
+  const requestInClusterRun = useCallback((path: string) => {
+    if (inClusterConsentGiven(inClusterCap?.cluster)) runInClusterTest(path)
+    else setPendingRunPath(path)
+  }, [inClusterCap, runInClusterTest])
+  const confirmInClusterRun = useCallback(() => {
+    const path = pendingRunPath ?? '/'
+    setPendingRunPath(null)
+    runInClusterTest(path)
+  }, [pendingRunPath, runInClusterTest])
+  // The HTTP path the probes request (default "/"). Editable via the "what to
+  // test" menu; the buttons re-run with the current path, the form applies a new
+  // one. Applies to BOTH the reachability and in-cluster tests.
+  const [probePath, setProbePath] = useState('/')
+  // When the tested path actually changes, drop the prior path's probe trace
+  // BEFORE re-running so displayTrace falls back to the static trace (config-only)
+  // during the probe window - never the old path's verdict under the new label.
+  const applyProbePath = useCallback((p: string) => {
+    // Reset synchronously BEFORE runProbes - a reset inside the setProbePath updater is
+    // deferred to the next render, so it would bump the token AFTER runProbes captured
+    // the old one (dropping the result) and leave the stale running-guard set.
+    if (p !== probePath) resetProbe()
+    setProbePath(p)
+    runProbes(p)
+  }, [probePath, runProbes, resetProbe])
+  // Bump a nonce every time a run produces a new result object (proxy or in-cluster),
+  // so the view can flash "updated just now" even when the values are unchanged.
+  // testedAt dates the displayed results ("tested HH:MM:SS") so even a kept
+  // snapshot is honestly dated; it clears when the results do.
+  const [runNonce, setRunNonce] = useState(0)
+  const [testedAt, setTestedAt] = useState<Date | undefined>(undefined)
+  // Bump ONLY when a NEW result is adopted (a fresh object reference), never when a
+  // result is DROPPED. Without this, a mask-driven resetProbe() clears probeTrace
+  // while inClusterTrace is still (transiently) truthy, so `probeTrace||inClusterTrace`
+  // stays true and the effect would re-date testedAt + flash "updated just now" at the
+  // exact moment results are being thrown away, beside "Cluster state changed".
+  const prevResultsRef = useRef<{ probe?: NetworkTrace; inCluster?: NetworkTrace }>({})
+  useEffect(() => {
+    const prev = prevResultsRef.current
+    const adopted = (probeTrace !== undefined && probeTrace !== prev.probe) || (inClusterTrace !== undefined && inClusterTrace !== prev.inCluster)
+    prevResultsRef.current = { probe: probeTrace, inCluster: inClusterTrace }
+    if (adopted) {
+      setRunNonce((n) => n + 1)
+      setTestedAt(new Date())
+    } else if (!probeTrace && !inClusterTrace) {
+      setTestedAt(undefined)
+    }
+  }, [probeTrace, inClusterTrace])
+  // Auto-run the (proxy) reachability test once per resource when the tab loads - the
+  // operator opened Reachability to SEE results, not a static page they must click Run
+  // on. Only the proxy test auto-runs; the in-cluster test (which spawns a Job) stays a
+  // deliberate manual action. Keyed by resource so navigating to a new one re-runs; the
+  // stale ?autorun=1 deeplink flag (now redundant) is stripped to keep the URL clean.
+  const [searchParams, setSearchParams] = useSearchParams()
+  const autorunKey = useRef<string>('')
+  useEffect(() => {
+    const key = `${kind}/${namespace}/${name}`
+    if (autorunKey.current === key) return
+    autorunKey.current = key
+    runProbes()
+    if (searchParams.get('autorun')) {
+      const next = new URLSearchParams(searchParams)
+      next.delete('autorun')
+      setSearchParams(next, { replace: true })
+    }
+  }, [kind, namespace, name, runProbes, searchParams, setSearchParams])
+  // What the in-cluster job will ACTUALLY send, mirroring the server: a bare "/"
+  // is the untouched default, so each route keeps its OWN declared path
+  // (internal/server/reachability_run.go) - anything else overrides every route.
+  // The consent dialog previously showed a single "GET /", which was wrong in
+  // precisely the default case, and counted only `routes`, omitting the declared
+  // paths that landed in `notTested`.
+  const pendingPath = pendingRunPath ?? probePath
+  const override = pendingPath && pendingPath !== '/' ? pendingPath : ''
+  const consentRequests = useMemo(
+    () => consentRequestRows(displayTrace?.routes ?? [], override),
+    [displayTrace, override],
+  )
+  const consentUntestedCount = useMemo(() => {
+    const derivable = new Set((displayTrace?.routes ?? []).filter((r) => r.inClusterRequest).map((r) => r.route))
+    const declared = new Set<string>([
+      ...(displayTrace?.routes ?? []).map((r) => r.route),
+      ...(displayTrace?.notTested ?? []).map((s) => s.route).filter((x): x is string => !!x),
+    ])
+    return [...declared].filter((r) => !derivable.has(r)).length
+  }, [displayTrace])
+  // The full-view Reachability tab fills its pane: the shell supplies the
+  // padding and this stays a full-height flex column so the board's three
+  // panes can scroll independently instead of the whole page scrolling.
+  return (
+    <div className="flex h-full min-h-0 flex-col">
+      <ReachabilityView
+        trace={displayTrace}
+        isLoading={isLoading || running}
+        error={error as Error | null}
+        probeError={probeError}
+        onRefresh={() => void refetch()}
+        probeRequested={running}
+        probed={probeTrace !== undefined || inClusterTrace !== undefined}
+        onRunProbes={() => runProbes(probePath)}
+        onRunInCluster={() => requestInClusterRun(probePath)}
+        inClusterRunning={inClusterRunning}
+        // Permission only - never fold readiness in: `allowed && !probeTrace`
+        // evaluated to false, which every consumer renders as a definitive
+        // "not permitted". A missing base trace (probe failed, re-run in
+        // flight, staleness mask) is not a denial; run() already no-ops
+        // harmlessly until the base exists.
+        inClusterAllowed={inClusterAllowed}
+        inClusterDeniedReason={inClusterCap?.reason}
+        inClusterError={inClusterError}
+        inClusterPartial={inClusterPartial}
+        inClusterFallback={inClusterFallback}
+        inClusterEvidenceOnly={inClusterEvidenceOnly}
+        inClusterEvidenceNote={inClusterEvidenceNote}
+        probePath={probePath}
+        onApplyProbePath={applyProbePath}
+        runNonce={runNonce}
+        testedAt={testedAt}
+        clusterChangedSinceTest={clusterChanged}
+        onNavigateToResource={onNavigate ? (ref) => onNavigate({ kind: kindToPlural(ref.kind), namespace: ref.namespace ?? '', name: ref.name, group: ref.group ?? '' }) : undefined}
+      />
+      <InClusterConsentDialog
+        open={pendingRunPath !== null}
+        cluster={inClusterCap?.cluster}
+        namespace={inClusterCap?.namespace ?? namespace}
+        requests={consentRequests}
+        untestedCount={consentUntestedCount}
+        maxProbes={inClusterCap?.maxProbes}
+        onClose={() => setPendingRunPath(null)}
+        onConfirm={confirmInClusterRun}
+      />
+    </div>
+  )
+}
+
+// DiagnoseInlineSection is the drawer-mode glance: a passive TraceSummary, NOT the
+// full panel. The full route matrix, active probes, per-route localization, path
+// topology and the in-cluster test all live on the Reachability tab - reached via
+// the "Open Reachability →" CTA, which deeplinks to ?tab=reachability and expands.
+// The useTrace hook is gated on enabled so non-traceable kinds short-circuit.
+function DiagnoseInlineSection({ kind, namespace, name, group, onOpenReachability }: { kind: string; namespace: string; name: string; group?: string; onOpenReachability: () => void }) {
+  // Gate on (kind, group) so a CRD sharing a core kind name (Knative Service,
+  // Istio Gateway) never enables the trace against the wrong (core) object.
+  const enabled = isDiagnoseKind(kind, group)
+  const { data: staticTrace } = useTrace(kind, namespace, name, enabled)
+  if (!enabled || !staticTrace) return null
+  // Wrap in Section so the surface matches the rest of the drawer (Ports /
+  // Selector / Related Resources / Metadata) - chevron, title, divider.
+  return (
+    <Section title="Reachability · Network Path">
+      <TraceSummary trace={staticTrace} onOpenReachability={onOpenReachability} />
+    </Section>
+  )
+}
+
 // FluxSourceConsumersSection lists the reconcilers (Kustomization, HelmRelease)
 // that reference this Flux source CR — the inverse of `spec.sourceRef`. Renders
 // only when the focused resource is a Flux source kind; otherwise null. Sources