@skyhook-io/radar-app 1.13.1 → 1.13.3

package/src/components/diagnose/InvestigationEvidencePane.tsx

@@ -0,0 +1,2253 @@
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useId,
+  useLayoutEffect,
+  useRef,
+  useState,
+  type ReactNode,
+} from "react";
+import { clsx } from "clsx";
+import {
+  Activity,
+  AlertTriangle,
+  Boxes,
+  Bug,
+  CheckCircle2,
+  CircleAlert,
+  Clock3,
+  FileClock,
+  FileSearch,
+  Info,
+  ListTree,
+  Network,
+  ScrollText,
+  SearchCheck,
+  ShieldAlert,
+  SquareArrowOutUpRight,
+} from "lucide-react";
+import {
+  Badge,
+  Collapse,
+  CollapseChevron,
+  DiffViewer,
+  StatusDot,
+  TerminalBlock,
+  defaultConditionTone,
+  displayKind,
+  formatRelativeAgeTime,
+  mapHealthToTone,
+  ResourceLink,
+  stripAnsi,
+} from "@skyhook-io/k8s-ui";
+import { apiVersionToGroup } from "../../utils/navigation";
+import { parseLogLine } from "../../utils/log-format";
+import {
+  evidenceDisplaySnapshot,
+  groupEvidenceCoverage,
+  type EvidenceCoverageGroup,
+} from "./investigationEvidencePresentation";
+
+import {
+  investigationEvidenceSubjectRef,
+  investigationEvidenceSourceDomId,
+  type InvestigationEvidenceData,
+  type InvestigationEvidenceGroup,
+  type InvestigationEvidenceObservation,
+  type InvestigationEvidenceProjection,
+  type InvestigationRootCauseEvidenceResolution,
+  type InvestigationEvidenceSource,
+  type InvestigationEvidenceTier,
+} from "./investigationEvidence";
+import type { DiagnosisResourceRef } from "./diagnoseEvidenceTypes";
+import { InvestigationResourceEvidence } from "./InvestigationResourceEvidence";
+import { investigationResourceEvidenceHasDetails } from "./investigationResourceEvidenceModel";
+import type { InvestigationSourceExcerpt } from "./investigationSourceFocus";
+import { evidenceSourceExcerpt } from "./investigationSourceFocus";
+import { Tooltip } from "../ui/Tooltip";
+
+import {
+  investigationDisclosureSettleDelay,
+  prefersReducedMotion,
+  useDisclosureReveal,
+} from "./useDisclosureReveal";
+export {
+  INVESTIGATION_DISCLOSURE_SETTLE_MS,
+  investigationDisclosureSettleDelay,
+  investigationDisclosureScrollTop,
+} from "./useDisclosureReveal";
+export const VISIBLE_LOG_EVIDENCE_LINES = 12;
+
+const EvidenceNavigationContext = createContext<{
+  onOpenResource?: (ref: DiagnosisResourceRef) => void;
+  revealSourceId?: string;
+  revealRequestId?: number;
+  expandedGroupIds?: ReadonlySet<string>;
+  onGroupOpenChange?: (id: string, open: boolean) => void;
+  citedOrderByGroup?: ReadonlyMap<string, number>;
+}>({});
+
+function evidenceTypePrefersFullRow(
+  type: InvestigationEvidenceData["type"],
+): boolean {
+  return type === "logs" || type === "events";
+}
+
+// Supporting evidence becomes a two-column grid when the pane is wide enough.
+// Keep compact cards paired only with an adjacent compact card. Otherwise a
+// full-row card between them strands a conspicuous empty half-row (and makes the
+// visual order look accidental), as does an odd card at the end of a run.
+export function investigationEvidenceFullRowFlags(
+  types: readonly InvestigationEvidenceData["type"][],
+): boolean[] {
+  const fullRow = types.map(evidenceTypePrefersFullRow);
+  let compactRunStart = 0;
+
+  for (let index = 0; index <= types.length; index += 1) {
+    if (index < types.length && !fullRow[index]) continue;
+    const compactRunLength = index - compactRunStart;
+    if (compactRunLength % 2 === 1) fullRow[index - 1] = true;
+    compactRunStart = index + 1;
+  }
+
+  return fullRow;
+}
+
+type EvidenceCollection = "main" | "workload" | "earlier";
+
+export function partitionInvestigationEvidence(
+  groups: InvestigationEvidenceGroup[],
+  resolution?: InvestigationRootCauseEvidenceResolution,
+) {
+  const selected = new Set(
+    resolution?.status === "linked"
+      ? resolution.links.map((link) => link.originalGroupId)
+      : [],
+  );
+  const collections: Record<EvidenceCollection, InvestigationEvidenceGroup[]> =
+    {
+      main: [],
+      workload: [],
+      earlier: [],
+    };
+  const collectionByGroup = new Map<string, EvidenceCollection>();
+  const adverse = (group: InvestigationEvidenceGroup) =>
+    ["error", "alert", "warning"].includes(group.latest.tone);
+  for (const group of groups) {
+    const broader = group.latest.relevance === "broader";
+    // Citations select tool results, not individual rows in a broad search.
+    // Only a focused, unambiguous fact can be promoted by a source citation.
+    if (broader) {
+      const link = resolution?.links.find(
+        (item) => item.originalGroupId === group.id,
+      );
+      const focused = ["resource", "logs", "crash"].includes(
+        group.latest.data.type,
+      );
+      const sourceGroups = link
+        ? groups.filter(
+            (candidate) =>
+              ["resource", "logs", "crash"].includes(
+                candidate.latest.data.type,
+              ) &&
+              candidate.observations.some(
+                (observation) => observation.source.id === link.source.id,
+              ),
+          )
+        : [];
+      if (!selected.has(group.id) || !focused || sourceGroups.length !== 1)
+        continue;
+    }
+    const main =
+      !group.historical &&
+      (selected.has(group.id) ||
+        (!broader &&
+          (group.latest.tier === "key" ||
+            (group.latest.tier === "supporting" && adverse(group)))));
+    const collection = main
+      ? "main"
+      : group.historical
+        ? "earlier"
+        : "workload";
+    collections[collection].push(group);
+    collectionByGroup.set(group.id, collection);
+  }
+  collections.main.sort(
+    (left, right) =>
+      Number(right.latest.tier === "key") -
+        Number(left.latest.tier === "key") ||
+      Number(adverse(right)) - Number(adverse(left)) ||
+      left.firstOrder - right.firstOrder,
+  );
+  return { ...collections, collectionByGroup };
+}
+
+export function investigationEvidenceRevealCollection(
+  projection: InvestigationEvidenceProjection,
+  sourceId: string,
+  partition = partitionInvestigationEvidence(projection.groups),
+): Exclude<EvidenceCollection, "main"> | "coverage" | undefined {
+  const source = projection.sources.find((item) => item.id === sourceId);
+  const collection = source?.primaryGroupId
+    ? partition.collectionByGroup.get(source.primaryGroupId)
+    : undefined;
+  if (collection) return collection === "main" ? undefined : collection;
+  if (
+    projection.limitations.some((limitation) =>
+      limitation.sources.some((source) => source.id === sourceId),
+    )
+  )
+    return "coverage";
+  return undefined;
+}
+
+export function InvestigationEvidencePane({
+  projection,
+  rootCauseEvidence,
+  collecting,
+  animateGroupIds,
+  onViewSource,
+  onViewActivity,
+  onOpenResource,
+  afterEvidence,
+  revealRequest,
+  onRevealReady,
+}: {
+  projection: InvestigationEvidenceProjection;
+  /** Server-validated links for the current root cause; absent without one. */
+  rootCauseEvidence?: InvestigationRootCauseEvidenceResolution;
+  collecting: boolean;
+  animateGroupIds: ReadonlySet<string>;
+  onViewSource: (
+    sourceId: string,
+    excerpt?: InvestigationSourceExcerpt,
+  ) => void;
+  /** Opens the Activity record when no exact result can be identified. */
+  onViewActivity: () => void;
+  /** Opens an evidence subject in Radar when the producer identified it exactly. */
+  onOpenResource?: (ref: DiagnosisResourceRef) => void;
+  /** Actions follow the complete evidence section, including its disclosures. */
+  afterEvidence?: ReactNode;
+  /** Explicit Activity → Findings navigation, including repeat clicks. */
+  revealRequest?: { sourceId: string; requestId: number };
+  onRevealReady?: (sourceId: string) => void;
+}) {
+  const [expandedGroupIds, setExpandedGroupIds] = useState<ReadonlySet<string>>(
+    new Set(),
+  );
+  const onGroupOpenChange = useCallback((id: string, open: boolean) => {
+    setExpandedGroupIds((previous) => {
+      if (previous.has(id) === open) return previous;
+      const next = new Set(previous);
+      if (open) next.add(id);
+      else next.delete(id);
+      return next;
+    });
+  }, []);
+  const [coverageOpen, setCoverageOpen] = useState(false);
+  const [workloadOpen, setWorkloadOpen] = useState(false);
+  const [earlierOpen, setEarlierOpen] = useState(false);
+  const handledRevealRequestRef = useRef<number | undefined>(undefined);
+  const openingForRevealRequestRef = useRef<number | undefined>(undefined);
+  const partition = partitionInvestigationEvidence(
+    projection.groups,
+    rootCauseEvidence,
+  );
+  const hasCurrentEvidence =
+    partition.main.length + partition.workload.length > 0;
+  const revealCollection = revealRequest
+    ? investigationEvidenceRevealCollection(
+        projection,
+        revealRequest.sourceId,
+        partition,
+      )
+    : undefined;
+
+  // A source link is a navigation request, not a disclosure preference. Open
+  // whichever collection owns the source first, then tell the workspace that
+  // its double-rAF focus/scroll can safely run outside an inert subtree.
+  useLayoutEffect(() => {
+    if (
+      !revealRequest ||
+      handledRevealRequestRef.current === revealRequest.requestId
+    ) {
+      return;
+    }
+    const { sourceId, requestId } = revealRequest;
+    if (
+      (revealCollection === "workload" || revealCollection === "earlier") &&
+      !workloadOpen
+    ) {
+      openingForRevealRequestRef.current = requestId;
+      setWorkloadOpen(true);
+      return;
+    }
+    if (revealCollection === "earlier" && !earlierOpen) {
+      openingForRevealRequestRef.current = requestId;
+      setEarlierOpen(true);
+      return;
+    }
+    if (revealCollection === "coverage" && !coverageOpen) {
+      openingForRevealRequestRef.current = requestId;
+      setCoverageOpen(true);
+      return;
+    }
+    const finishReveal = () => {
+      if (handledRevealRequestRef.current === requestId) return;
+      handledRevealRequestRef.current = requestId;
+      openingForRevealRequestRef.current = undefined;
+      onRevealReady?.(sourceId);
+    };
+    if (openingForRevealRequestRef.current !== requestId) {
+      finishReveal();
+      return;
+    }
+
+    // Two animation frames alone can target an item that is still moving. Wait
+    // through the shared Collapse transition only when motion is enabled.
+    const settleDelay = investigationDisclosureSettleDelay(
+      prefersReducedMotion(),
+    );
+    if (settleDelay === 0) {
+      finishReveal();
+      return;
+    }
+    const timer = window.setTimeout(finishReveal, settleDelay);
+    return () => window.clearTimeout(timer);
+  }, [
+    revealRequest,
+    revealCollection,
+    onRevealReady,
+    earlierOpen,
+    coverageOpen,
+    workloadOpen,
+  ]);
+
+  const coverageGroups = groupEvidenceCoverage(projection.limitations);
+  const limitationSummary = coverageGroups
+    .map((group) => `${group.label}: ${group.summary}`)
+    .join(" · ");
+  const content = (
+    <section
+      aria-labelledby="investigation-radar-evidence"
+      className="investigation-evidence @container/evidence space-y-4 rounded-xl border p-4"
+    >
+      <span className="sr-only" role="status" aria-live="polite">
+        {projection.limitations.length > 0
+          ? `Evidence coverage update: ${limitationSummary}`
+          : ""}
+      </span>
+      <div className="flex min-w-0 items-start justify-between gap-3">
+        <div className="min-w-0">
+          <div className="flex items-center gap-2">
+            <h2
+              id="investigation-radar-evidence"
+              className="text-lg font-semibold text-theme-text-primary"
+            >
+              Evidence
+            </h2>
+            {collecting ? (
+              <span className="inline-flex items-center gap-1.5 text-xs text-accent-text">
+                <span className="h-1.5 w-1.5 animate-pulse rounded-full bg-accent" />
+                collecting
+              </span>
+            ) : null}
+          </div>
+        </div>
+      </div>
+
+      {projection.limitations.length > 0 ? (
+        <CoverageStrip
+          groups={coverageGroups}
+          visibleGroupIds={new Set(partition.collectionByGroup.keys())}
+          summary={limitationSummary}
+          onViewSource={onViewSource}
+          open={coverageOpen}
+          onOpenChange={setCoverageOpen}
+        />
+      ) : null}
+
+      <div className="space-y-4">
+        {rootCauseEvidence && rootCauseEvidence.status !== "linked" ? (
+          <AssessmentEvidenceQualification
+            resolution={rootCauseEvidence}
+            onViewActivity={onViewActivity}
+          />
+        ) : null}
+
+        <div className="grid items-start gap-2.5">
+          {partition.main.map((group) => (
+            <EvidenceCard
+              key={group.id}
+              group={group}
+              spanFullRow
+              animateArrival={animateGroupIds.has(group.id)}
+              onViewSource={onViewSource}
+            />
+          ))}
+        </div>
+
+        {!hasCurrentEvidence ? (
+          <EmptyCollection
+            collecting={collecting}
+            hasEarlierEvidence={partition.earlier.length > 0}
+            onViewActivity={onViewActivity}
+          />
+        ) : null}
+
+        <CollapsedEvidenceCollection
+          id="investigation-workload-evidence"
+          title="More evidence about this workload"
+          description=""
+          groups={partition.workload}
+          totalCount={partition.workload.length + partition.earlier.length}
+          animateGroupIds={animateGroupIds}
+          onViewSource={onViewSource}
+          open={workloadOpen}
+          onOpenChange={setWorkloadOpen}
+        >
+          <CollapsedEvidenceCollection
+            id="investigation-earlier-evidence"
+            title="Previous observations"
+            description="Earlier does not mean resolved."
+            groups={partition.earlier}
+            animateGroupIds={animateGroupIds}
+            onViewSource={onViewSource}
+            open={earlierOpen}
+            onOpenChange={setEarlierOpen}
+          />
+        </CollapsedEvidenceCollection>
+      </div>
+    </section>
+  );
+
+  return (
+    <EvidenceNavigationContext.Provider
+      value={{
+        onOpenResource,
+        expandedGroupIds,
+        onGroupOpenChange,
+        revealSourceId: revealRequest?.sourceId,
+        revealRequestId: revealRequest?.requestId,
+        citedOrderByGroup: new Map(
+          rootCauseEvidence?.links.flatMap((link) =>
+            link.originalGroupId
+              ? [[link.originalGroupId, link.source.order] as const]
+              : [],
+          ) ?? [],
+        ),
+      }}
+    >
+      {content}
+      {afterEvidence}
+    </EvidenceNavigationContext.Provider>
+  );
+}
+
+function AssessmentEvidenceQualification({
+  resolution,
+  onViewActivity,
+}: {
+  resolution: InvestigationRootCauseEvidenceResolution;
+  onViewActivity: () => void;
+}) {
+  return (
+    <div className="flex items-start gap-2 rounded-lg border border-amber-500/30 bg-amber-500/5 px-3 py-2.5">
+      <AlertTriangle
+        className="mt-0.5 h-4 w-4 shrink-0 text-amber-500"
+        aria-hidden
+      />
+      <div className="min-w-0 flex-1">
+        <p className="text-xs font-medium text-theme-text-primary">
+          {resolution.status === "invalid"
+            ? "Assessment references could not be matched"
+            : "Assessment does not cite specific Radar evidence"}
+        </p>
+        <p className="mt-0.5 text-xs leading-relaxed text-theme-text-tertiary">
+          {resolution.status === "invalid"
+            ? "Radar could not match the assessment’s references to this investigation. Review Activity before acting."
+            : "Review Activity and the Radar evidence below before acting on the agent’s conclusion."}
+        </p>
+      </div>
+      <button
+        type="button"
+        onClick={onViewActivity}
+        className="shrink-0 rounded-md px-2 py-1 text-xs font-medium text-accent-text hover:bg-theme-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
+      >
+        View Activity
+      </button>
+    </div>
+  );
+}
+
+function EmptyCollection({
+  collecting,
+  hasEarlierEvidence,
+  onViewActivity,
+}: {
+  collecting: boolean;
+  hasEarlierEvidence: boolean;
+  onViewActivity: () => void;
+}) {
+  return (
+    <div className="rounded-lg border border-dashed border-theme-border px-4 py-5 text-center">
+      {collecting ? (
+        <Activity className="mx-auto h-5 w-5 text-accent" aria-hidden />
+      ) : (
+        <SearchCheck
+          className="mx-auto h-5 w-5 text-theme-text-tertiary"
+          aria-hidden
+        />
+      )}
+      <p className="mt-2 text-sm font-medium text-theme-text-secondary">
+        {collecting
+          ? "Evidence will appear here"
+          : hasEarlierEvidence
+            ? "No current evidence was captured during verification"
+            : "No relevant evidence to show yet"}
+      </p>
+      <p className="mx-auto mt-1 max-w-md text-xs leading-relaxed text-theme-text-tertiary">
+        {collecting
+          ? "The Activity pane remains the live record while the agent investigates."
+          : hasEarlierEvidence
+            ? "Earlier observations remain below. This does not prove that those conditions resolved."
+            : "Investigation details are still available in Activity. This does not mean the resource is healthy."}
+      </p>
+      <button
+        type="button"
+        onClick={onViewActivity}
+        className="mt-2 rounded-md px-2 py-1 text-xs font-medium text-accent-text hover:bg-theme-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
+      >
+        View Activity
+      </button>
+    </div>
+  );
+}
+
+function CollapsedEvidenceCollection({
+  id,
+  title,
+  description,
+  groups,
+  animateGroupIds,
+  onViewSource,
+  open,
+  onOpenChange,
+  totalCount = groups.length,
+  children,
+}: {
+  id: string;
+  title: string;
+  description: string;
+  groups: InvestigationEvidenceGroup[];
+  animateGroupIds: ReadonlySet<string>;
+  onViewSource: (
+    sourceId: string,
+    excerpt?: InvestigationSourceExcerpt,
+  ) => void;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  totalCount?: number;
+  children?: ReactNode;
+}) {
+  const { elementRef, revealAfterToggle } = useDisclosureReveal<HTMLElement>();
+  if (totalCount === 0) return null;
+  const fullRowFlags = investigationEvidenceFullRowFlags(
+    groups.map((group) => group.latest.data.type),
+  );
+  return (
+    <section
+      ref={elementRef}
+      className="overflow-hidden rounded-lg border border-theme-border/80 bg-theme-base/20"
+    >
+      <button
+        type="button"
+        aria-expanded={open}
+        aria-controls={id}
+        onClick={() => {
+          onOpenChange(!open);
+          revealAfterToggle(!open);
+        }}
+        className="flex w-full min-w-0 items-center gap-2 px-3 py-2.5 text-left hover:bg-theme-hover/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
+      >
+        <span className="min-w-0 flex-1">
+          <span className="block text-xs font-semibold text-theme-text-secondary">
+            {title}
+          </span>
+          {description ? (
+            <span className="block text-xs text-theme-text-tertiary">
+              {description}
+            </span>
+          ) : null}
+        </span>
+        <span className="shrink-0 font-mono text-xs text-theme-text-tertiary">
+          {totalCount}
+        </span>
+        <CollapseChevron open={open} className="h-4 w-4" />
+      </button>
+      <div id={id}>
+        <Collapse open={open}>
+          <div
+            className={clsx(
+              "grid items-start gap-2.5 @min-[760px]/evidence:grid-cols-2",
+              "border-t border-theme-border/60 p-2.5",
+            )}
+          >
+            {groups.map((group, index) => (
+              <EvidenceCard
+                key={group.id}
+                group={group}
+
+                animateArrival={animateGroupIds.has(group.id)}
+                onViewSource={onViewSource}
+                spanFullRow={fullRowFlags[index]}
+                prominence="secondary"
+              />
+            ))}
+            {children ? <div className="col-span-full">{children}</div> : null}
+          </div>
+        </Collapse>
+      </div>
+    </section>
+  );
+}
+
+function CoverageStrip({
+  groups,
+  visibleGroupIds,
+  summary,
+  onViewSource,
+  open,
+  onOpenChange,
+}: {
+  groups: EvidenceCoverageGroup[];
+  visibleGroupIds: ReadonlySet<string>;
+  summary: string;
+  onViewSource: (
+    sourceId: string,
+    excerpt?: InvestigationSourceExcerpt,
+  ) => void;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}) {
+  const hasError = groups.some((group) => group.hasError);
+  const historyOnly = groups.every((group) => group.historyOnly);
+  const { elementRef, revealAfterToggle } =
+    useDisclosureReveal<HTMLDivElement>();
+  const regionId = "investigation-evidence-coverage";
+  const anchoredSources = new Set<string>();
+  return (
+    <div
+      ref={elementRef}
+      className="overflow-hidden rounded-lg border border-theme-border/80 bg-theme-base/20"
+    >
+      <button
+        type="button"
+        aria-expanded={open}
+        aria-controls={regionId}
+        onClick={() => {
+          onOpenChange(!open);
+          revealAfterToggle(!open);
+        }}
+        className="flex w-full min-w-0 items-center gap-2 px-3 py-2 text-left hover:bg-theme-hover/50"
+      >
+        {historyOnly ? (
+          <Info
+            className="h-4 w-4 shrink-0 text-theme-text-tertiary"
+            aria-hidden
+          />
+        ) : hasError ? (
+          <CircleAlert className="h-4 w-4 shrink-0 text-red-400" aria-hidden />
+        ) : (
+          <AlertTriangle
+            className="h-4 w-4 shrink-0 text-amber-500"
+            aria-hidden
+          />
+        )}
+        <span className="min-w-0 flex-1">
+          <span
+            className={clsx(
+              "block text-xs",
+              historyOnly
+                ? "font-medium text-theme-text-secondary"
+                : "font-semibold text-theme-text-primary",
+            )}
+          >
+            {historyOnly
+              ? "Change history is limited"
+              : "Evidence coverage is incomplete"}
+          </span>
+          {!historyOnly && !open ? (
+            <span className="line-clamp-2 text-xs text-theme-text-tertiary [overflow-wrap:anywhere]">
+              {summary}
+            </span>
+          ) : null}
+        </span>
+        <CollapseChevron open={open} className="h-4 w-4" />
+      </button>
+      <div id={regionId}>
+        <Collapse open={open}>
+          <div className="divide-y divide-theme-border/60 border-t border-theme-border/60">
+            {groups.map((group) => {
+              const sourceIds = group.limitations
+                .flatMap((item) => item.sources)
+                .filter((source) => {
+                  if (
+                    (source.primaryGroupId &&
+                      visibleGroupIds.has(source.primaryGroupId)) ||
+                    anchoredSources.has(source.id)
+                  )
+                    return false;
+                  anchoredSources.add(source.id);
+                  return true;
+                })
+                .map((source) => source.id);
+              return (
+                <CoverageGroupRow
+                  key={group.label}
+                  group={group}
+                  sourceIds={sourceIds}
+                  onViewSource={onViewSource}
+                />
+              );
+            })}
+          </div>
+        </Collapse>
+      </div>
+    </div>
+  );
+}
+
+function CoverageGroupRow({
+  group,
+  sourceIds,
+  onViewSource,
+}: {
+  group: EvidenceCoverageGroup;
+  sourceIds: string[];
+  onViewSource: (
+    sourceId: string,
+    excerpt?: InvestigationSourceExcerpt,
+  ) => void;
+}) {
+  const [open, setOpen] = useState(false);
+  const regionId = useId();
+  const { elementRef, revealAfterToggle } =
+    useDisclosureReveal<HTMLDivElement>();
+  return (
+    <div
+      ref={elementRef}
+      data-evidence-source-container
+      tabIndex={-1}
+      aria-label={`Evidence limitation for ${group.label}: ${group.summary}`}
+      className="outline-none focus:ring-2 focus:ring-accent/40"
+    >
+      {sourceIds.map((id) => (
+        <span
+          key={id}
+          id={investigationEvidenceSourceDomId(id)}
+          className="sr-only scroll-mt-14"
+          aria-hidden
+        />
+      ))}
+      <button
+        type="button"
+        aria-expanded={open}
+        aria-controls={regionId}
+        onClick={() => {
+          setOpen(!open);
+          revealAfterToggle(!open);
+        }}
+        className="flex w-full items-center gap-2 px-3 py-2.5 text-left text-xs hover:bg-theme-hover/50"
+      >
+        {group.hasError ? (
+          <CircleAlert
+            className="h-3.5 w-3.5 shrink-0 text-red-400"
+            aria-hidden
+          />
+        ) : (
+          <Info
+            className="h-3.5 w-3.5 shrink-0 text-theme-text-tertiary"
+            aria-hidden
+          />
+        )}
+        <span className="min-w-0 flex-1 leading-relaxed text-theme-text-secondary">
+          <span className="font-medium text-theme-text-primary">
+            {group.label}:{" "}
+          </span>
+          {group.summary}
+        </span>
+        <CollapseChevron open={open} className="h-3.5 w-3.5 shrink-0" />
+      </button>
+      <div id={regionId}>
+        <Collapse open={open}>
+          <ul className="space-y-2 border-t border-theme-border/60 px-3 py-2.5">
+            {group.limitations.map((limitation, index) => (
+              <li
+                key={index}
+                className="flex min-w-0 items-start gap-2 text-xs"
+              >
+                {limitation.kind === "error" ? (
+                  <CircleAlert
+                    className="mt-0.5 h-3.5 w-3.5 shrink-0 text-red-400"
+                    aria-hidden
+                  />
+                ) : limitation.kind === "truncated" ? (
+                  <AlertTriangle
+                    className="mt-0.5 h-3.5 w-3.5 shrink-0 text-amber-500"
+                    aria-hidden
+                  />
+                ) : (
+                  <Info
+                    className="mt-0.5 h-3.5 w-3.5 shrink-0 text-theme-text-tertiary"
+                    aria-hidden
+                  />
+                )}
+                <p className="min-w-0 flex-1 leading-relaxed text-theme-text-secondary">
+                  <span className="font-medium text-theme-text-primary">
+                    {limitation.source}:
+                  </span>{" "}
+                  {limitation.message}
+                </p>
+                {limitation.sources.at(-1) ? (
+                  <SourceButton
+                    ariaLabel={`View source for ${limitation.source}`}
+                    buttonLabel={
+                      limitation.sources.length > 1
+                        ? "View latest in Activity"
+                        : undefined
+                    }
+                    onClick={() => onViewSource(limitation.sources.at(-1)!.id)}
+                  />
+                ) : null}
+              </li>
+            ))}
+          </ul>
+        </Collapse>
+      </div>
+    </div>
+  );
+}
+
+function previousDifferentObservations(
+  group: InvestigationEvidenceGroup,
+  citedOrder?: number,
+) {
+  const seen = new Set([evidenceDisplaySnapshot(group.latest)]);
+  return [...group.observations].reverse().filter((observation) => {
+    if (
+      observation.source.order !== citedOrder &&
+      group.observations.some(
+        (other) =>
+          other.source.order === citedOrder &&
+          evidenceDisplaySnapshot(other) ===
+            evidenceDisplaySnapshot(observation),
+      )
+    )
+      return false;
+    const snapshot = evidenceDisplaySnapshot(observation);
+    if (seen.has(snapshot)) return false;
+    seen.add(snapshot);
+    return true;
+  });
+}
+
+export function investigationEvidenceShouldRevealHistory(
+  group: InvestigationEvidenceGroup,
+  sourceId?: string,
+): boolean {
+  return (
+    Boolean(sourceId) &&
+    group.latest.source.id !== sourceId &&
+    group.observations.some(
+      (observation) =>
+        observation.source.id === sourceId &&
+        evidenceDisplaySnapshot(observation) !==
+          evidenceDisplaySnapshot(group.latest),
+    )
+  );
+}
+
+function EvidenceCard({
+  group,
+  domId = group.id,
+  animateArrival,
+  onViewSource,
+  spanFullRow = false,
+  prominence = "primary",
+}: {
+  group: InvestigationEvidenceGroup;
+  /** Stable layout/scroll identity when an existing card changes section. */
+  domId?: string;
+  animateArrival: boolean;
+  onViewSource: (
+    sourceId: string,
+    excerpt?: InvestigationSourceExcerpt,
+  ) => void;
+  /** Fill both columns when this card has no compact row partner. */
+  spanFullRow?: boolean;
+  prominence?: "primary" | "supporting" | "secondary";
+}) {
+  const {
+    onOpenResource,
+    revealSourceId,
+    revealRequestId,
+    citedOrderByGroup,
+    expandedGroupIds,
+    onGroupOpenChange,
+  } = useContext(EvidenceNavigationContext);
+  const open = expandedGroupIds?.has(group.id) ?? false;
+  const setOpen = useCallback(
+    (value: boolean) => onGroupOpenChange?.(group.id, value),
+    [onGroupOpenChange, group.id],
+  );
+  const { elementRef, revealAfterToggle } = useDisclosureReveal<HTMLElement>();
+  const observation = group.latest;
+  const displaySummary =
+    observation.data.type === "crash" && observation.summary
+      ? parseLogLine(observation.summary).content
+      : observation.summary;
+  const citedOrder = citedOrderByGroup?.get(group.id);
+  const previousObservations = previousDifferentObservations(group, citedOrder);
+  const meaningfulHistory = previousObservations.length > 0;
+  const citedObservation = group.observations.find(
+    (item) => item.source.order === citedOrder,
+  );
+  const differsFromAssessment =
+    citedObservation &&
+    evidenceDisplaySnapshot(citedObservation) !==
+      evidenceDisplaySnapshot(observation);
+  const bodyId = `${domId}-body`;
+  const hasEvidenceDetails = evidenceHasDetails(
+    observation.data,
+    observation.summary,
+  );
+  const canExpand = hasEvidenceDetails || meaningfulHistory;
+  const revealHistory = investigationEvidenceShouldRevealHistory(
+    group,
+    revealSourceId,
+  );
+  useLayoutEffect(() => {
+    const destination = revealSourceId
+      ? document.getElementById(
+          investigationEvidenceSourceDomId(revealSourceId),
+        )
+      : null;
+    if (
+      revealHistory ||
+      (destination && elementRef.current?.contains(destination))
+    )
+      setOpen(true);
+  }, [revealHistory, revealSourceId, revealRequestId, elementRef, setOpen]);
+  const wide = spanFullRow || evidenceTypePrefersFullRow(observation.data.type);
+  const resourceRef = investigationEvidenceSubjectRef(observation.data);
+  const resourceIdentity = resourceRef
+    ? `${resourceRef.namespace ? `${resourceRef.namespace}/` : ""}${resourceRef.name}`
+    : undefined;
+  const primarySources = uniquePrimarySources(group);
+  const inlineSecretKeys =
+    observation.data.type === "resource" &&
+    observation.data.resource.kind.toLowerCase() === "secret" &&
+    !canExpand;
+  const headerContent = (
+    <>
+      <EvidenceIcon observation={observation} prominence={prominence} />
+      <span className="min-w-0 flex-1">
+        <span className="flex flex-wrap items-center gap-1.5">
+          <span className="text-sm font-semibold leading-snug text-theme-text-primary">
+            {observation.title}
+          </span>
+        </span>
+        {observation.relevance === "broader" &&
+        resourceRef &&
+        resourceIdentity &&
+        !observation.title.includes(resourceIdentity) ? (
+          <span className="mt-0.5 block text-xs text-theme-text-secondary">
+            {resourceIdentity} · {resourceRef.kind}
+          </span>
+        ) : null}
+        {displaySummary ? (
+          <span
+            className={clsx(
+              "mt-0.5 block text-xs leading-relaxed text-theme-text-secondary",
+              !open && !inlineSecretKeys && "line-clamp-2",
+              "[overflow-wrap:anywhere]",
+            )}
+          >
+            {displaySummary}
+          </span>
+        ) : null}
+        {group.historical ? (
+          <span className="mt-0.5 block text-xs text-theme-text-tertiary">
+            Previous observation · not confirmed by the latest check
+          </span>
+        ) : differsFromAssessment &&
+          citedOrder != null &&
+          observation.source.order !== citedOrder ? (
+          <span className="mt-0.5 block text-xs text-theme-text-tertiary">
+            {observation.source.order > citedOrder
+              ? "Observed after the assessment’s source"
+              : "Earlier observation retained from a more direct source"}
+          </span>
+        ) : null}
+      </span>
+      {canExpand ? (
+        <CollapseChevron open={open} className="h-4 w-4 self-center" />
+      ) : null}
+    </>
+  );
+  return (
+    <article
+      data-evidence-source={observation.source.id}
+      ref={elementRef}
+      id={domId}
+      data-evidence-card
+      tabIndex={-1}
+      aria-label={`${observation.title} evidence`}
+      className={clsx(
+        "@container/card scroll-mt-14 overflow-hidden outline-none focus:ring-2 focus:ring-accent/50 data-[source-related]:ring-2 data-[source-related]:ring-accent/35",
+        "rounded-lg border bg-theme-surface",
+        toneBorder(observation.tone, observation.tier, prominence),
+        wide && "@min-[760px]/evidence:col-span-2",
+        animateArrival && "animate-transcript-enter",
+      )}
+    >
+      {primarySources.map((source) => (
+        <span
+          key={source.id}
+          id={investigationEvidenceSourceDomId(source.id)}
+          className="block scroll-mt-14"
+          aria-hidden
+        />
+      ))}
+      <div className="flex min-w-0 items-stretch">
+        {canExpand ? (
+          <button
+            type="button"
+            aria-expanded={open}
+            aria-controls={bodyId}
+            onClick={() => {
+              const opening = !open;
+              setOpen(opening);
+              revealAfterToggle(opening);
+            }}
+            className={clsx(
+              "flex min-w-0 flex-1 items-start text-left hover:bg-theme-hover/60",
+              prominence === "primary"
+                ? "gap-2.5 px-3 py-2.5"
+                : "gap-2 px-2.5 py-2",
+            )}
+          >
+            {headerContent}
+          </button>
+        ) : (
+          <div
+            className={clsx(
+              "flex min-w-0 flex-1 items-start text-left",
+              prominence === "primary"
+                ? "gap-2.5 px-3 py-2.5"
+                : "gap-2 px-2.5 py-2",
+            )}
+          >
+            {headerContent}
+          </div>
+        )}
+        <div className="flex shrink-0 items-center gap-0.5 px-2">
+          {observation.data.type === "changes" ? (
+            <EvidenceCaveat data={observation.data} />
+          ) : null}
+          <SourceButton
+            ariaLabel={`View source for ${observation.title}`}
+            compact
+            onClick={() =>
+              onViewSource(
+                observation.source.id,
+                evidenceSourceExcerpt(observation.data),
+              )
+            }
+          />
+          <OpenResourceButton
+            resourceRef={resourceRef}
+            onOpenResource={onOpenResource}
+            compact
+          />
+        </div>
+      </div>
+      {canExpand ? (
+        <div id={bodyId}>
+          <Collapse open={open}>
+            <div
+              className={clsx(
+                "space-y-3 border-t border-theme-border/60",
+                prominence === "primary" ? "px-3 py-3" : "px-2.5 py-2.5",
+              )}
+            >
+              {hasEvidenceDetails ? (
+                <EvidenceBody
+                  data={observation.data}
+                  cardSummary={observation.summary}
+                />
+              ) : null}
+              {meaningfulHistory ? (
+                <RevisionHistory
+                  observations={previousObservations}
+                  citedOrder={citedOrder}
+                  reveal={revealHistory}
+                  revealRequestId={revealRequestId}
+                  onViewSource={onViewSource}
+                />
+              ) : null}
+              {observation.data.type !== "changes" ? (
+                <EvidenceCaveat data={observation.data} />
+              ) : null}
+            </div>
+          </Collapse>
+        </div>
+      ) : null}
+    </article>
+  );
+}
+
+function OpenResourceButton({
+  resourceRef,
+  onOpenResource,
+  compact = false,
+}: {
+  resourceRef?: DiagnosisResourceRef;
+  onOpenResource?: (ref: DiagnosisResourceRef) => void;
+  compact?: boolean;
+}) {
+  if (!resourceRef || !onOpenResource) return null;
+  const identity = `${resourceRef.namespace ? `${resourceRef.namespace}/` : ""}${resourceRef.name}`;
+  const label = `Open current ${displayKind(resourceRef.kind)} ${identity} in Radar`;
+  return (
+    <Tooltip
+      content={label}
+      delay={350}
+      position="left"
+      wrapperClassName="flex shrink-0"
+    >
+      <button
+        type="button"
+        aria-label={label}
+        onClick={() => onOpenResource(resourceRef)}
+        className={clsx(
+          "flex h-7 shrink-0 items-center justify-center rounded text-theme-text-tertiary transition-colors hover:bg-theme-hover hover:text-accent-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent",
+          "gap-1 px-2 text-xs font-medium",
+        )}
+      >
+        {compact ? null : (
+          <span>Open current {displayKind(resourceRef.kind)}</span>
+        )}
+        <SquareArrowOutUpRight className="h-3.5 w-3.5" aria-hidden />
+      </button>
+    </Tooltip>
+  );
+}
+
+function uniquePrimarySources(
+  group: InvestigationEvidenceGroup,
+): InvestigationEvidenceSource[] {
+  // One tool call can contribute repeated revisions to the same semantic group.
+  // It still owns one navigation destination, and DOM ids must remain unique.
+  const sources = new Map<string, InvestigationEvidenceSource>();
+  for (const observation of group.observations) {
+    const { source } = observation;
+    if (source.primaryGroupId === group.id && !sources.has(source.id)) {
+      sources.set(source.id, source);
+    }
+  }
+  return [...sources.values()];
+}
+
+function EvidenceBody({
+  data,
+  cardSummary,
+}: {
+  data: InvestigationEvidenceData;
+  cardSummary?: string;
+}) {
+  switch (data.type) {
+    case "issue":
+      return <IssueBody data={data} cardSummary={cardSummary} />;
+    case "startup":
+      return <StartupBody data={data} />;
+    case "crash":
+      return <CrashBody data={data} />;
+    case "resource":
+      return <ResourceBody data={data} />;
+    case "logs":
+      return <LogsBody data={data} />;
+    case "events":
+      return <EventsBody data={data} />;
+    case "changes":
+      return <ChangesBody data={data} />;
+    case "dns":
+      return <DNSBody data={data} />;
+    case "network":
+      return <NetworkBody data={data} />;
+    case "relationships":
+      return <RelationshipsBody data={data} />;
+    case "topology":
+      return <TopologyBody data={data} />;
+    case "inventory":
+      return <InventoryBody data={data} />;
+    case "receipt":
+      return (
+        <p className="text-xs text-theme-text-secondary">{data.message}</p>
+      );
+  }
+}
+
+function evidenceHasDetails(
+  data: InvestigationEvidenceData,
+  cardSummary?: string,
+): boolean {
+  switch (data.type) {
+    case "issue": {
+      const summary = cardSummary?.trim();
+      const cause = data.issue.cause?.trim();
+      const message = data.issue.message?.trim();
+      return Boolean(
+        (cause && cause !== summary) ||
+        (message && message !== summary && message !== cause),
+      );
+    }
+    case "startup":
+    case "receipt":
+      return false;
+    case "resource": {
+      const replicas = data.resourceContext?.workloadSummary?.replicas;
+      return Boolean(
+        investigationResourceEvidenceHasDetails(data.resource) ||
+        replicas?.desired !== undefined ||
+        data.resourceContext?.statusSummary?.conditions?.length ||
+        data.gitOpsDiagnosis ||
+        data.warnings.length,
+      );
+    }
+    case "logs":
+      return (data.logs?.lines?.length ?? 0) > 0 || Boolean(data.error);
+    case "changes":
+      return data.changes.length > 0 || Boolean(data.changeContext?.evidence);
+    default:
+      return true;
+  }
+}
+
+type EvidenceDataOf<T extends InvestigationEvidenceData["type"]> = Extract<
+  InvestigationEvidenceData,
+  { type: T }
+>;
+
+function IssueBody({
+  data,
+  cardSummary,
+}: {
+  data: EvidenceDataOf<"issue">;
+  cardSummary?: string;
+}) {
+  const issue = data.issue;
+  const showCause =
+    Boolean(issue.cause) && issue.cause?.trim() !== cardSummary?.trim();
+  const showMessage =
+    Boolean(issue.message) &&
+    issue.message?.trim() !== cardSummary?.trim() &&
+    issue.message?.trim() !== issue.cause?.trim();
+  return (
+    <div className="space-y-2">
+      <div className="flex flex-wrap gap-1.5">
+        <Badge
+          severity={issue.severity === "critical" ? "error" : "warning"}
+          size="sm"
+        >
+          {issue.severity}
+        </Badge>
+        <Badge tone="structural" size="sm">
+          {issue.kind}
+        </Badge>
+        <Badge tone="structural" size="sm">
+          {issue.namespace ? `${issue.namespace}/` : ""}
+          {issue.name}
+        </Badge>
+      </div>
+      {showCause ? (
+        <p className="text-sm font-medium leading-relaxed text-theme-text-primary">
+          {issue.cause}
+        </p>
+      ) : null}
+      {showMessage ? (
+        <p className="text-xs leading-relaxed text-theme-text-secondary">
+          {issue.message}
+        </p>
+      ) : null}
+    </div>
+  );
+}
+
+function StartupBody({ data }: { data: EvidenceDataOf<"startup"> }) {
+  const blocker = data.blocker;
+  return (
+    <div className="space-y-2">
+      <div className="flex flex-wrap gap-1.5">
+        <Badge tone="structural" size="sm">
+          {blocker.kind}
+        </Badge>
+        <Badge tone="structural" size="sm">
+          {blocker.name}
+        </Badge>
+        <Badge severity={severityBadge(blocker.severity)} size="sm">
+          {blocker.severity}
+        </Badge>
+      </div>
+      <p className="text-sm leading-relaxed text-theme-text-primary">
+        {blocker.message}
+      </p>
+    </div>
+  );
+}
+
+function CrashBody({ data }: { data: EvidenceDataOf<"crash"> }) {
+  const crash = data.crash;
+  return (
+    <div className="space-y-2.5">
+      <div className="flex flex-wrap gap-1.5">
+        <Badge severity="error" size="sm">
+          {crash.reason || crash.state}
+        </Badge>
+        <Badge tone="structural" size="sm">
+          exit {crash.exitCode}
+        </Badge>
+        <Badge tone="structural" size="sm">
+          {crash.container}
+        </Badge>
+      </div>
+      <p className="text-xs text-theme-text-tertiary">
+        {crash.pods.join(", ")} · {crash.logSource.replaceAll("_", " ")}
+      </p>
+      <TerminalBlock label="Selected crash line">{crash.logLine}</TerminalBlock>
+    </div>
+  );
+}
+
+function ResourceBody({ data }: { data: EvidenceDataOf<"resource"> }) {
+  const replicas = data.resourceContext?.workloadSummary?.replicas;
+  // SealedSecret's dedicated body renders the resource's conditions beside
+  // its controller state, so repeating the derived summary here adds noise.
+  const conditions =
+    data.resource.kind.toLowerCase() === "sealedsecret"
+      ? []
+      : (data.resourceContext?.statusSummary?.conditions ?? []);
+  const desired = replicas?.desired;
+  const ready = replicas ? (replicas.ready ?? 0) : undefined;
+  const shortfall =
+    desired !== undefined && ready !== undefined && ready < desired;
+  return (
+    <div className="space-y-3">
+      <InvestigationResourceEvidence resource={data.resource} />
+      {data.gitOpsDiagnosis ? (
+        <GitOpsStatusBody status={data.gitOpsDiagnosis} />
+      ) : null}
+      {desired !== undefined && ready !== undefined ? (
+        <dl className="flex flex-wrap gap-x-6 gap-y-2 text-xs">
+          <div>
+            <dt className="text-theme-text-tertiary">Ready replicas</dt>
+            <dd
+              className={clsx(
+                "font-mono font-semibold tabular-nums",
+                shortfall ? "text-warning-text" : "text-theme-text-primary",
+              )}
+            >
+              {ready}/{desired}
+            </dd>
+          </div>
+          <ResourceFact label="Available" value={replicas?.available} />
+          <ResourceFact label="Updated" value={replicas?.updated} />
+          <ResourceFact label="Unavailable" value={replicas?.unavailable} />
+          <ResourceFact
+            label="Phase"
+            value={data.resourceContext?.statusSummary?.phase}
+          />
+        </dl>
+      ) : null}
+      {conditions.length > 0 ? (
+        <div>
+          <div className="mb-1.5 text-xs font-semibold uppercase tracking-wide text-theme-text-tertiary">
+            Conditions
+          </div>
+          <div className="max-h-52 space-y-1.5 overflow-y-auto pr-1">
+            {conditions.map((condition) => (
+              <div
+                key={`${condition.type}-${condition.status}-${condition.reason ?? ""}`}
+                className="flex min-w-0 items-start gap-2 text-xs"
+              >
+                <StatusDot
+                  tone={conditionStatusTone(condition)}
+                  className="mt-1 shrink-0"
+                />
+                <p className="min-w-0 text-theme-text-secondary">
+                  <span className="font-medium text-theme-text-primary">
+                    {condition.type}={condition.status}
+                  </span>
+                  {condition.reason ? ` · ${condition.reason}` : ""}
+                  {condition.message ? ` — ${condition.message}` : ""}
+                </p>
+              </div>
+            ))}
+          </div>
+        </div>
+      ) : null}
+      {data.warnings.length > 0 ? (
+        <ul className="space-y-1 text-xs text-theme-text-secondary">
+          {data.warnings.map((warning) => (
+            <li key={warning} className="flex items-start gap-1.5">
+              <Info className="mt-0.5 h-3.5 w-3.5 shrink-0 text-theme-text-tertiary" />
+              <span>{warning}</span>
+            </li>
+          ))}
+        </ul>
+      ) : null}
+    </div>
+  );
+}
+
+function GitOpsStatusBody({
+  status,
+}: {
+  status: NonNullable<EvidenceDataOf<"resource">["gitOpsDiagnosis"]>;
+}) {
+  const fields = [
+    ["Sync", status.sync],
+    ["Health", status.health],
+    ["Operation", status.operationPhase],
+    ["Ready", status.ready],
+  ] as const;
+  return (
+    <div className="rounded-md border border-theme-border bg-theme-base/40 p-2.5">
+      <div className="mb-2 flex flex-wrap items-center gap-1.5">
+        <span className="text-xs font-semibold uppercase tracking-wide text-theme-text-tertiary">
+          GitOps controller status
+        </span>
+        <Badge tone="note" size="sm">
+          {status.tool === "argocd" ? "Argo CD" : "Flux"}
+        </Badge>
+        {status.suspended ? (
+          <Badge severity="info" size="sm">
+            Suspended
+          </Badge>
+        ) : null}
+      </div>
+      <div className="flex flex-wrap gap-1.5">
+        {fields.map(([label, value]) =>
+          value ? (
+            <Badge
+              key={label}
+              severity={gitOpsValueSeverity(label, value)}
+              size="sm"
+            >
+              {label}: {value}
+            </Badge>
+          ) : null,
+        )}
+        {status.appliedRevision ? (
+          <Badge tone="structural" size="sm">
+            {status.appliedRevision}
+          </Badge>
+        ) : null}
+      </div>
+    </div>
+  );
+}
+
+function gitOpsValueSeverity(label: string, value: string) {
+  const normalized = value.toLowerCase();
+  if (
+    normalized === "healthy" ||
+    normalized === "synced" ||
+    normalized === "succeeded" ||
+    (label === "Ready" && normalized.startsWith("true"))
+  ) {
+    return "success" as const;
+  }
+  if (
+    normalized === "degraded" ||
+    normalized === "missing" ||
+    normalized === "failed" ||
+    normalized === "error" ||
+    (label === "Ready" && normalized.startsWith("false"))
+  ) {
+    return "error" as const;
+  }
+  if (normalized === "outofsync") return "warning" as const;
+  if (normalized === "progressing" || normalized === "running")
+    return "info" as const;
+  return "neutral" as const;
+}
+
+function ResourceFact({ label, value }: { label: string; value: unknown }) {
+  if (value === undefined || value === null || value === "") return null;
+  return (
+    <div className="flex justify-between gap-2 @min-[560px]/evidence:block">
+      <dt className="text-theme-text-tertiary">{label}</dt>
+      <dd className="font-mono font-medium text-theme-text-primary">
+        {String(value)}
+      </dd>
+    </div>
+  );
+}
+
+function conditionStatusTone(condition: {
+  type: string;
+  status: string;
+}): "healthy" | "degraded" | "unhealthy" | "unknown" {
+  switch (defaultConditionTone(condition)) {
+    case "ok":
+      return "healthy";
+    case "warning":
+      return "degraded";
+    case "fail":
+      return "unhealthy";
+    case "unknown":
+      return "unknown";
+  }
+}
+
+function LogsBody({ data }: { data: EvidenceDataOf<"logs"> }) {
+  const lines = data.logs?.lines ?? [];
+  const visibleLines = lines
+    .slice(-VISIBLE_LOG_EVIDENCE_LINES)
+    .map((line) => stripAnsi(line));
+  const omittedLines = lines.length - visibleLines.length;
+  return (
+    <div className="space-y-2">
+      <div className="flex flex-wrap items-center gap-1.5">
+        <Badge tone="structural" size="sm">
+          {data.pod} / {data.container}
+        </Badge>
+        <Badge severity="neutral" size="sm">
+          {data.previous ? "previous instance" : "current instance"}
+        </Badge>
+        {data.logs?.fallback ? (
+          <Badge severity="warning" size="sm">
+            Unfiltered log tail
+          </Badge>
+        ) : null}
+        {data.logs ? (
+          <span className="text-xs text-theme-text-tertiary">
+            {data.logs.matchedLines} matching lines · {data.logs.totalLines}{" "}
+            processed from the requested log tail
+          </span>
+        ) : null}
+      </div>
+      {visibleLines.length > 0 ? (
+        <TerminalBlock
+          label={
+            omittedLines > 0
+              ? `Selected log excerpt · last ${visibleLines.length} of ${lines.length} lines`
+              : "Selected log excerpt"
+          }
+        >
+          {visibleLines.join("\n")}
+        </TerminalBlock>
+      ) : (
+        <p className="text-xs italic text-theme-text-tertiary">
+          No lines were captured from this stream.
+        </p>
+      )}
+      {data.error ? (
+        <p className="text-xs leading-relaxed text-red-400">{data.error}</p>
+      ) : null}
+      {data.warnings.map((warning) => (
+        <p key={warning} className="text-xs text-warning-text">
+          {warning}
+        </p>
+      ))}
+    </div>
+  );
+}
+
+function EventsBody({ data }: { data: EvidenceDataOf<"events"> }) {
+  return (
+    <div>
+      <p className="mb-2 text-xs text-theme-text-tertiary">{data.scope}</p>
+      <ol className="max-h-[28rem] space-y-0 overflow-y-auto pr-1">
+        {data.events.map((event, index) => (
+          <li
+            key={`${event.reason}-${event.lastTimestamp}-${index}`}
+            className="relative flex gap-3 pb-3 last:pb-0"
+          >
+            {index < data.events.length - 1 ? (
+              <span className="absolute bottom-0 left-[5px] top-3 w-px bg-theme-border" />
+            ) : null}
+            <span className="relative mt-1.5 h-2.5 w-2.5 shrink-0 rounded-full border-2 border-amber-500 bg-theme-surface" />
+            <div className="min-w-0 flex-1">
+              <div className="flex flex-wrap items-baseline justify-between gap-x-3 gap-y-0.5">
+                <span className="text-xs font-semibold text-theme-text-primary">
+                  {event.reason}
+                  {event.count > 1 ? ` ×${event.count}` : ""}
+                </span>
+                <Tooltip
+                  content={new Date(event.lastTimestamp).toLocaleString()}
+                  delay={150}
+                  position="left"
+                >
+                  <time
+                    dateTime={event.lastTimestamp}
+                    className="text-xs text-theme-text-tertiary"
+                  >
+                    {formatRelativeAgeTime(event.lastTimestamp)}
+                  </time>
+                </Tooltip>
+              </div>
+              <p className="mt-0.5 text-xs leading-relaxed text-theme-text-secondary">
+                {event.message}
+              </p>
+            </div>
+          </li>
+        ))}
+      </ol>
+    </div>
+  );
+}
+
+function ChangesBody({ data }: { data: EvidenceDataOf<"changes"> }) {
+  const { onOpenResource } = useContext(EvidenceNavigationContext);
+  return (
+    <div className="space-y-2.5">
+      {data.changeContext?.evidence ? (
+        <p className="text-xs leading-relaxed text-theme-text-secondary [overflow-wrap:anywhere]">
+          {data.changeContext.evidence}
+        </p>
+      ) : null}
+      {data.changes.map((change, index) => (
+        <div
+          key={`${change.kind}-${change.namespace ?? ""}-${change.name}-${change.timestamp}-${index}`}
+          className="rounded-md border border-theme-border/70 bg-theme-base/30 p-2.5"
+        >
+          <div className="flex flex-wrap items-center gap-1.5">
+            <Badge tone="structural" size="sm">
+              {change.kind}
+            </Badge>
+            <span className="font-mono text-xs">
+              <ResourceLink
+                name={change.name}
+                kind={change.kind}
+                namespace={change.namespace ?? ""}
+                group={
+                  change.apiVersion
+                    ? apiVersionToGroup(change.apiVersion)
+                    : undefined
+                }
+                label={`${change.namespace ? `${change.namespace}/` : ""}${change.name}`}
+                onNavigate={
+                  change.apiVersion && onOpenResource
+                    ? (ref) => onOpenResource(ref)
+                    : undefined
+                }
+              />
+            </span>
+            <Badge tone="note" size="sm">
+              {change.changeType.replaceAll("_", " ")}
+            </Badge>
+            <Tooltip
+              content={new Date(change.timestamp).toLocaleString()}
+              delay={150}
+              position="left"
+              wrapperClassName="ml-auto"
+            >
+              <time
+                dateTime={change.timestamp}
+                className="text-xs text-theme-text-tertiary"
+              >
+                {formatRelativeAgeTime(change.timestamp)}
+              </time>
+            </Tooltip>
+          </div>
+          {change.summary ? (
+            <p className="mt-1.5 text-xs text-theme-text-secondary">
+              {change.summary}
+            </p>
+          ) : null}
+          {change.fields?.length ? (
+            <div className="mt-2">
+              <DiffViewer
+                diff={{
+                  summary: `${change.fields.length} changed ${change.fields.length === 1 ? "field" : "fields"}`,
+                  fields: change.fields.map((field) => ({
+                    path: field.path,
+                    oldValue: field.oldValue ?? null,
+                    newValue: field.newValue ?? null,
+                  })),
+                }}
+              />
+            </div>
+          ) : null}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function DNSBody({ data }: { data: EvidenceDataOf<"dns"> }) {
+  const { onOpenResource } = useContext(EvidenceNavigationContext);
+  return (
+    <div className="space-y-2">
+      {(data.dns.signals ?? []).map((signal) => (
+        <p
+          key={signal}
+          className="text-xs leading-relaxed text-theme-text-secondary"
+        >
+          {signal}
+        </p>
+      ))}
+      {(data.dns.coreDNSFindings ?? []).map((finding) => (
+        <div
+          key={`${finding.kind}-${finding.namespace}-${finding.name}-${finding.reason}`}
+          className="rounded-md border border-theme-border bg-theme-base/40 p-2"
+        >
+          <div className="flex flex-wrap gap-1.5">
+            <Badge tone="structural" size="sm">
+              {finding.kind}
+            </Badge>
+            <span className="font-mono text-xs">
+              <ResourceLink
+                name={finding.name}
+                kind={finding.kind}
+                namespace={finding.namespace}
+                group=""
+                label={`${finding.namespace}/${finding.name}`}
+                onNavigate={
+                  finding.kind.toLowerCase() === "configmap" && onOpenResource
+                    ? (ref) => onOpenResource(ref)
+                    : undefined
+                }
+              />
+            </span>
+            <Badge severity={severityBadge(finding.severity)} size="sm">
+              {finding.severity}
+            </Badge>
+          </div>
+          <p className="mt-1 text-xs text-theme-text-secondary">
+            {finding.reason}
+            {finding.message ? ` — ${finding.message}` : ""}
+          </p>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function NetworkBody({ data }: { data: EvidenceDataOf<"network"> }) {
+  const { network } = data;
+  const stats = [
+    ["Tested", network.summary.tested],
+    ["Passed", network.summary.passed],
+    ["Failed", network.summary.failed],
+    ["Inferred", network.summary.derived ?? 0],
+    ["Skipped", network.summary.skipped],
+  ] as const;
+  return (
+    <div className="space-y-3">
+      <div className="grid grid-cols-3 gap-1.5 @min-[620px]/evidence:grid-cols-5">
+        {stats.map(([label, value]) => (
+          <div
+            key={label}
+            className="rounded-md border border-theme-border bg-theme-base/40 px-2 py-1.5 text-center"
+          >
+            <div className="font-mono text-sm font-semibold text-theme-text-primary">
+              {value}
+            </div>
+            <div className="text-xs uppercase tracking-wide text-theme-text-tertiary">
+              {label}
+            </div>
+          </div>
+        ))}
+      </div>
+      {network.diagnosis ? (
+        <div className="rounded-md border border-theme-border bg-theme-base/40 px-2.5 py-2">
+          <p className="text-xs font-medium leading-relaxed text-theme-text-primary">
+            {network.diagnosis.summary}
+          </p>
+          {network.diagnosis.nextAction ? (
+            <p className="mt-1 border-l-2 border-accent/50 pl-2 text-xs leading-relaxed text-theme-text-secondary">
+              Next check: {network.diagnosis.nextAction}
+            </p>
+          ) : null}
+        </div>
+      ) : (
+        <p className="text-xs leading-relaxed text-theme-text-secondary">
+          {network.summary.headline}
+        </p>
+      )}
+      {network.routes.length > 0 ? (
+        <ol className="max-h-64 space-y-1.5 overflow-y-auto pr-1">
+          {network.routes.map((route, index) => (
+            <li
+              key={`${route.route}-${route.target ?? ""}-${index}`}
+              className="flex min-w-0 items-start gap-2 rounded-md border border-theme-border/70 bg-theme-base/30 px-2.5 py-2"
+            >
+              <StatusDot
+                tone={networkOutcomeTone(route.outcome, route.benign)}
+                className="mt-1 shrink-0"
+              />
+              <span className="min-w-0 flex-1">
+                <span className="block truncate font-mono text-xs text-theme-text-primary">
+                  {route.route}
+                  {route.target ? ` → ${route.target}` : ""}
+                </span>
+                {route.evidence ? (
+                  <span className="mt-0.5 block text-xs leading-relaxed text-theme-text-secondary">
+                    {route.evidence}
+                  </span>
+                ) : null}
+              </span>
+              <Badge
+                severity={networkOutcomeSeverity(route.outcome, route.benign)}
+                size="sm"
+              >
+                {route.benign
+                  ? "intentional"
+                  : route.outcome.replaceAll("_", " ")}
+              </Badge>
+            </li>
+          ))}
+        </ol>
+      ) : null}
+    </div>
+  );
+}
+
+function networkOutcomeTone(
+  outcome: string,
+  benign?: boolean,
+): "healthy" | "degraded" | "unhealthy" | "unknown" {
+  if (benign) return "degraded";
+  const normalized = outcome.toLowerCase();
+  if (normalized.includes("verified") || normalized.includes("reached"))
+    return "healthy";
+  if (normalized.includes("fail") || normalized.includes("unreachable"))
+    return "unhealthy";
+  if (normalized.includes("skip") || normalized.includes("not"))
+    return "unknown";
+  return "degraded";
+}
+
+function networkOutcomeSeverity(outcome: string, benign?: boolean) {
+  switch (networkOutcomeTone(outcome, benign)) {
+    case "healthy":
+      return "success" as const;
+    case "degraded":
+      return "warning" as const;
+    case "unhealthy":
+      return "error" as const;
+    case "unknown":
+      return "neutral" as const;
+  }
+}
+
+function RelationshipsBody({
+  data,
+}: {
+  data: EvidenceDataOf<"relationships">;
+}) {
+  return (
+    <div className="space-y-2.5">
+      <div className="flex flex-wrap items-center gap-1.5">
+        <Badge tone="structural" size="sm">
+          {data.root.kind}
+        </Badge>
+        <span className="font-mono text-xs text-theme-text-secondary">
+          {data.root.namespace ? `${data.root.namespace}/` : ""}
+          {data.root.name}
+        </span>
+        <span className="text-xs text-theme-text-tertiary">
+          {data.nodes.length} resources · {data.edges.length} direct
+          relationships
+        </span>
+      </div>
+      <div className="max-h-44 overflow-y-auto pr-1">
+        <div className="flex flex-wrap gap-1.5">
+          {data.nodes.map((node) => (
+            <span
+              key={node.id}
+              className="inline-flex items-center gap-1 rounded-md border border-theme-border bg-theme-base px-2 py-1 text-xs"
+            >
+              <Badge tone="structural" size="sm">
+                {node.kind}
+              </Badge>
+              <span className="font-mono text-theme-text-secondary">
+                {node.name}
+              </span>
+            </span>
+          ))}
+        </div>
+      </div>
+      {data.edges.length > 0 ? (
+        <div className="grid max-h-52 gap-1 overflow-y-auto pr-1 @min-[680px]/evidence:grid-cols-2">
+          {data.edges.map((edge, index) => (
+            <div
+              key={
+                edge.id ?? `${edge.source}-${edge.target}-${edge.type}-${index}`
+              }
+              className="flex min-w-0 items-center gap-1.5 rounded bg-theme-base/50 px-2 py-1.5 font-mono text-xs text-theme-text-secondary"
+            >
+              <span className="truncate">{edge.source}</span>
+              <span className="shrink-0 text-theme-text-tertiary">→</span>
+              <span className="truncate">{edge.target}</span>
+              <Badge tone="structural" size="sm">
+                {edge.label || edge.type}
+              </Badge>
+            </div>
+          ))}
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+function TopologyBody({ data }: { data: EvidenceDataOf<"topology"> }) {
+  return (
+    <div className="space-y-2.5">
+      <div className="grid grid-cols-2 gap-2">
+        <TopologyStat label="Nodes" value={data.stats.nodes} />
+        <TopologyStat label="Relationships" value={data.stats.edges} />
+      </div>
+      {data.problems.map((problem) => (
+        <p
+          key={problem}
+          className="flex items-start gap-1.5 text-xs text-warning-text"
+        >
+          <AlertTriangle className="mt-0.5 h-3.5 w-3.5 shrink-0" />
+          {problem}
+        </p>
+      ))}
+      <div className="max-h-64 space-y-2 overflow-y-auto pr-1">
+        {data.namespaces.map((namespace) => (
+          <div key={namespace.namespace}>
+            <div className="text-xs font-semibold uppercase tracking-wide text-theme-text-tertiary">
+              {namespace.namespace || "cluster-scoped"}
+            </div>
+            <ul className="mt-1 space-y-1 font-mono text-xs text-theme-text-secondary">
+              {namespace.chains.map((chain) => (
+                <li key={chain}>{chain}</li>
+              ))}
+            </ul>
+          </div>
+        ))}
+      </div>
+      {data.warnings.map((warning) => (
+        <p key={warning} className="text-xs text-warning-text">
+          {warning}
+        </p>
+      ))}
+    </div>
+  );
+}
+
+function TopologyStat({ label, value }: { label: string; value: number }) {
+  return (
+    <div className="rounded-md border border-theme-border bg-theme-base/40 px-3 py-2">
+      <div className="font-mono text-lg font-semibold text-theme-text-primary">
+        {value}
+      </div>
+      <div className="text-xs uppercase tracking-wide text-theme-text-tertiary">
+        {label}
+      </div>
+    </div>
+  );
+}
+
+function InventoryBody({ data }: { data: EvidenceDataOf<"inventory"> }) {
+  return (
+    <div className="max-h-72 overflow-y-auto rounded-md border border-theme-border">
+      {data.resources.map((resource, index) => (
+        <div
+          key={`${resource.kind}-${resource.namespace ?? ""}-${resource.name}`}
+          className={clsx(
+            "flex min-w-0 items-center gap-2 px-2.5 py-1.5",
+            index > 0 && "border-t border-theme-border/60",
+          )}
+        >
+          <StatusDot
+            tone={mapHealthToTone(resource.summaryContext?.health ?? "")}
+            className="shrink-0"
+          />
+          <Badge tone="structural" size="sm">
+            {resource.kind}
+          </Badge>
+          <span className="min-w-0 flex-1">
+            <span className="block truncate font-mono text-xs text-theme-text-secondary">
+              {resource.namespace ? `${resource.namespace}/` : ""}
+              {resource.name}
+            </span>
+            {resource.issue ? (
+              <span className="block truncate text-xs text-warning-text">
+                {resource.issue}
+              </span>
+            ) : null}
+          </span>
+          {resource.ready || resource.status ? (
+            <span className="ml-auto shrink-0 font-mono text-xs text-theme-text-tertiary">
+              {resource.ready || resource.status}
+            </span>
+          ) : null}
+          {(resource.summaryContext?.issueCount ?? 0) > 0 ? (
+            <Badge severity="warning" size="sm">
+              {resource.summaryContext?.issueCount} issues
+            </Badge>
+          ) : null}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function RevisionHistory({
+  observations,
+  citedOrder,
+  reveal,
+  revealRequestId,
+  onViewSource,
+}: {
+  observations: InvestigationEvidenceObservation[];
+  citedOrder?: number;
+  reveal: boolean;
+  revealRequestId?: number;
+  onViewSource: (
+    sourceId: string,
+    excerpt?: InvestigationSourceExcerpt,
+  ) => void;
+}) {
+  const [open, setOpen] = useState(false);
+  const regionId = useId();
+  const { elementRef, revealAfterToggle } =
+    useDisclosureReveal<HTMLDivElement>();
+  useLayoutEffect(() => {
+    if (reveal) setOpen(true);
+  }, [reveal, revealRequestId]);
+  return (
+    <div>
+      <button
+        type="button"
+        aria-expanded={open}
+        aria-controls={regionId}
+        onClick={() => {
+          setOpen(!open);
+          revealAfterToggle(!open);
+        }}
+        className="flex items-center gap-1.5 rounded-md px-1 py-1 text-xs text-theme-text-tertiary hover:bg-theme-hover hover:text-theme-text-secondary"
+      >
+        <CollapseChevron open={open} className="h-3.5 w-3.5" />
+        Previous observations · {observations.length}
+      </button>
+      <div id={regionId} ref={elementRef}>
+        <Collapse open={open}>
+          <ol className="space-y-3 pt-2">
+            {observations.map((observation) => (
+              <li
+                key={`${observation.source.id}-${observation.revision}`}
+                className="flex min-w-0 items-start gap-2 text-xs"
+              >
+                <span className="mt-0.5 shrink-0 text-theme-text-tertiary">
+                  <span className="font-medium text-theme-text-secondary">
+                    {observation.source.order === citedOrder
+                      ? "Used for assessment"
+                      : phaseLabel(observation.source.phase)}
+                  </span>
+                </span>
+                <div className="min-w-0 flex-1 space-y-1 text-theme-text-secondary">
+                  <p>{observation.summary || observation.title}</p>
+                  {evidenceHasDetails(
+                    observation.data,
+                    observation.summary,
+                  ) && (
+                    <EvidenceBody
+                      data={observation.data}
+                      cardSummary={observation.summary}
+                    />
+                  )}
+                </div>
+                <SourceButton
+                  ariaLabel={`View source for ${phaseLabel(observation.source.phase).toLowerCase()} observation of ${observation.title}`}
+                  onClick={() =>
+                    onViewSource(
+                      observation.source.id,
+                      evidenceSourceExcerpt(observation.data),
+                    )
+                  }
+                />
+              </li>
+            ))}
+          </ol>
+        </Collapse>
+      </div>
+    </div>
+  );
+}
+
+function EvidenceCaveat({ data }: { data: InvestigationEvidenceData }) {
+  let text: string | undefined;
+  if (data.type === "events") {
+    text =
+      "Events support the timeline; proximity alone does not establish cause.";
+  } else if (data.type === "changes") {
+    return (
+      <Tooltip
+        content={`A change alone does not establish the cause.${data.changeContext?.when ? " The reported age is as of collection." : ""}`}
+        position="left"
+        className="pointer-events-none"
+        wrapperClassName="flex shrink-0"
+      >
+        <button
+          type="button"
+          aria-label="About change evidence"
+          className="flex h-7 w-7 items-center justify-center rounded-md text-theme-text-tertiary hover:bg-theme-hover hover:text-theme-text-secondary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
+        >
+          <Info className="h-3.5 w-3.5" aria-hidden />
+        </button>
+      </Tooltip>
+    );
+  } else if (data.type === "relationships" || data.type === "topology") {
+    text =
+      "This shows direct relationships Radar found, not an inferred blast radius.";
+  }
+  if (!text) return null;
+  return (
+    <p className="flex items-start gap-1.5 text-xs leading-relaxed text-theme-text-tertiary">
+      <Info className="mt-0.5 h-3 w-3 shrink-0" aria-hidden />
+      {text}
+    </p>
+  );
+}
+
+function EvidenceIcon({
+  observation,
+  prominence,
+}: {
+  observation: InvestigationEvidenceObservation;
+  prominence: "primary" | "supporting" | "secondary";
+}) {
+  const Icon = evidenceIcon(observation.data.type);
+  return (
+    <span
+      className={clsx(
+        "flex shrink-0 items-center justify-center text-theme-text-tertiary",
+        prominence === "primary" ? "h-7 w-7" : "h-6 w-6",
+      )}
+    >
+      <Icon
+        className={prominence === "primary" ? "h-4 w-4" : "h-3.5 w-3.5"}
+        aria-hidden
+      />
+    </span>
+  );
+}
+
+function SourceButton({
+  ariaLabel,
+  buttonLabel = "View source",
+  compact = false,
+  onClick,
+}: {
+  ariaLabel?: string;
+  buttonLabel?: string;
+  compact?: boolean;
+  onClick: () => void;
+}) {
+  const tooltip = "Open the original tool result";
+  return (
+    <Tooltip
+      content={tooltip}
+      delay={350}
+      position="left"
+      wrapperClassName="flex shrink-0"
+    >
+      <button
+        type="button"
+        aria-label={ariaLabel ?? tooltip}
+        onClick={onClick}
+        className={clsx(
+          "flex h-7 shrink-0 items-center justify-center rounded-md text-theme-text-tertiary hover:bg-theme-hover hover:text-accent-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50",
+          "gap-1 px-2 text-xs font-medium",
+        )}
+      >
+        <FileSearch className="h-3.5 w-3.5" aria-hidden />
+        <span
+          className={compact ? "hidden @min-[540px]/card:inline" : undefined}
+        >
+          {buttonLabel}
+        </span>
+      </button>
+    </Tooltip>
+  );
+}
+
+function evidenceIcon(type: InvestigationEvidenceData["type"]) {
+  switch (type) {
+    case "issue":
+      return CircleAlert;
+    case "startup":
+      return ShieldAlert;
+    case "crash":
+      return Bug;
+    case "resource":
+      return Boxes;
+    case "logs":
+      return ScrollText;
+    case "events":
+      return Clock3;
+    case "changes":
+      return FileClock;
+    case "dns":
+      return Activity;
+    case "network":
+      return Network;
+    case "relationships":
+    case "topology":
+      return Network;
+    case "inventory":
+      return ListTree;
+    case "receipt":
+      return CheckCircle2;
+  }
+}
+
+function severityBadge(value: string) {
+  const tone = value.toLowerCase();
+  if (tone === "error" || tone === "critical" || tone === "failed")
+    return "error" as const;
+  if (tone === "alert" || tone === "high") return "alert" as const;
+  if (tone === "warning" || tone === "medium") return "warning" as const;
+  if (tone === "info" || tone === "low") return "info" as const;
+  return "neutral" as const;
+}
+
+function phaseLabel(
+  phase: InvestigationEvidenceObservation["source"]["phase"],
+): string {
+  switch (phase) {
+    case "initial":
+      return "Initial";
+    case "followup":
+      return "Follow-up";
+    case "verification":
+      return "Verification";
+    case "apply":
+      return "Apply";
+  }
+}
+
+function toneBorder(
+  tone: InvestigationEvidenceObservation["tone"],
+  tier: InvestigationEvidenceTier,
+  prominence: "primary" | "supporting" | "secondary",
+): string {
+  if (prominence !== "primary") return "border-theme-border/70";
+  if (tier !== "key") return "border-theme-border";
+  if (tone === "error")
+    return "border-l-[3px] border-l-red-500 border-theme-border";
+  if (tone === "alert")
+    return "border-l-[3px] border-l-orange-500 border-theme-border";
+  return "border-l-[3px] border-l-amber-500 border-theme-border";
+}