@skyhook-io/radar-app 1.13.4 → 1.14.0

package/src/components/diagnose/InvestigationEvidencePane.tsx

@@ -2,6 +2,7 @@ import {
   createContext,
   useCallback,
   useContext,
+  useEffect,
   useId,
   useLayoutEffect,
   useRef,
@@ -9,25 +10,18 @@ import {
   type ReactNode,
 } from "react";
 import { clsx } from "clsx";
+import {
+  EVIDENCE_KIND_TRAITS,
+  evidenceKindIsFocused,
+} from "./investigationEvidenceKinds";
 import {
   Activity,
   AlertTriangle,
-  BellRing,
-  Boxes,
-  Bug,
-  CheckCircle2,
   CircleAlert,
-  Clock3,
   FileClock,
   FileSearch,
   Info,
-  KeyRound,
-  ListTree,
-  Network,
-  Package,
-  ScrollText,
   SearchCheck,
-  ShieldAlert,
   SquareArrowOutUpRight,
 } from "lucide-react";
 import {
@@ -40,12 +34,27 @@ import {
   defaultConditionTone,
   displayKind,
   formatRelativeAgeTime,
+  HPADiagnosisSummary,
   mapHealthToTone,
   ResourceLink,
   stripAnsi,
 } from "@skyhook-io/k8s-ui";
+import {
+  AreaChart,
+  SERIES_COLORS,
+  SeriesLegend,
+  formatMetricValue,
+  seriesDisplayLabels,
+  seriesFill,
+  type TimeSeries,
+} from "@skyhook-io/k8s-ui/components/charts";
 import { apiVersionToGroup } from "../../utils/navigation";
 import { parseLogLine } from "../../utils/log-format";
+import {
+  metricsChangeCoverage,
+  metricsDomain,
+  type MetricsChangeCoverage,
+} from "./investigationMetrics";
 import {
   evidenceDisplaySnapshot,
   groupEvidenceCoverage,
@@ -55,6 +64,7 @@ import {
 import {
   investigationEvidenceSubjectRef,
   investigationEvidenceSourceDomId,
+  investigationSourceArgs,
   type InvestigationEvidenceData,
   type InvestigationEvidenceGroup,
   type InvestigationEvidenceObservation,
@@ -63,12 +73,23 @@ import {
   type InvestigationEvidenceSource,
   type InvestigationEvidenceTier,
 } from "./investigationEvidence";
-import type { DiagnosisResourceRef } from "./diagnoseEvidenceTypes";
+import type {
+  DiagnosisResourceContext,
+  DiagnosisResourceRef,
+  DiagnosisScalerRef,
+} 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 { AgentClaimNote, AgentRoleChip } from "./AgentCase";
+import {
+  investigationCaseObservationKey,
+  type InvestigationCaseItem,
+  type InvestigationCaseResolution,
+} from "./investigationCase";
+import type { DiagnosisEvidenceRole } from "../../api/diagnose";
 
 import {
   investigationDisclosureSettleDelay,
@@ -96,12 +117,57 @@ const EvidenceNavigationContext = createContext<{
   expandedGroupIds?: ReadonlySet<string>;
   onGroupOpenChange?: (id: string, open: boolean) => void;
   citedOrderByGroup?: ReadonlyMap<string, number>;
+  /** Change markers for each metrics observation, keyed by its source id. */
+  metricsMarkersBySource?: ReadonlyMap<string, MetricsChangeCoverage>;
+  /** Card- and revision-placed agent items, keyed by group id. */
+  caseByGroup?: ReadonlyMap<string, InvestigationCaseItem[]>;
+  /** The hypothesis each `rules_out` item excludes, keyed by item. */
+  excludedByItem?: ReadonlyMap<string, string>;
 }>({});
 
+/** Item identity for the excluded-hypothesis lookup; index alone repeats across turns. */
+export function investigationCaseItemKey(item: InvestigationCaseItem): string {
+  return `${item.source.id}\u0000${item.index}`;
+}
+
+const EVIDENCE_ROLE_RANK: Readonly<Record<DiagnosisEvidenceRole, number>> = {
+  cause: 0,
+  symptom: 1,
+  // A ruled-out card keeps Radar's place in the list; the role only labels it.
+  rules_out: 2,
+  context: 3,
+  benign: 4,
+  demoted: 5,
+};
+const UNLABELLED_RANK = 2;
+
+function sourceNamesOneResource(source: InvestigationEvidenceSource): boolean {
+  const args = investigationSourceArgs(source);
+  return (
+    typeof args?.kind === "string" &&
+    args.kind !== "" &&
+    typeof args.name === "string" &&
+    args.name !== ""
+  );
+}
+
+export function investigationCaseByGroup(
+  investigationCase?: InvestigationCaseResolution,
+): Map<string, InvestigationCaseItem[]> {
+  const byGroup = new Map<string, InvestigationCaseItem[]>();
+  for (const item of investigationCase?.items ?? []) {
+    if (!item.groupId || item.placement === "source") continue;
+    const items = byGroup.get(item.groupId) ?? [];
+    items.push(item);
+    byGroup.set(item.groupId, items);
+  }
+  return byGroup;
+}
+
 function evidenceTypePrefersFullRow(
   type: InvestigationEvidenceData["type"],
 ): boolean {
-  return type === "logs" || type === "events" || type === "alerts";
+  return EVIDENCE_KIND_TRAITS[type].fullRow;
 }
 
 // Supporting evidence becomes a two-column grid when the pane is wide enough.
@@ -129,12 +195,31 @@ type EvidenceCollection = "main" | "workload" | "earlier";
 export function partitionInvestigationEvidence(
   groups: InvestigationEvidenceGroup[],
   resolution?: InvestigationRootCauseEvidenceResolution,
+  investigationCase?: InvestigationCaseResolution,
+  /**
+   * What a later turn cited, with the source that cited it. A follow-up adds
+   * to what the displayed assessment selected and never takes a selection
+   * away. The source travels with it because promoting a broader card needs
+   * one: an id alone selects the group but leaves the broader gate below
+   * unable to find who cited it, and the card stays withheld.
+   */
+  alsoSelected?: readonly {
+    groupId: string;
+    source: InvestigationEvidenceSource;
+  }[],
 ) {
-  const selected = new Set(
-    resolution?.status === "linked"
+  // Selection: legacy root-cause links plus every placed agent item, of any
+  // role (placement promotes a group into main the way a citation does; the
+  // role does not matter here). Ordering below is the only place roles act,
+  // and nothing the agent sends can remove a group from a collection.
+  const caseByGroup = investigationCaseByGroup(investigationCase);
+  const selected = new Set([
+    ...(resolution?.status === "linked"
       ? resolution.links.map((link) => link.originalGroupId)
-      : [],
-  );
+      : []),
+    ...caseByGroup.keys(),
+    ...(alsoSelected ?? []).map((entry) => entry.groupId),
+  ]);
   const collections: Record<EvidenceCollection, InvestigationEvidenceGroup[]> =
     {
       main: [],
@@ -148,26 +233,45 @@ export function partitionInvestigationEvidence(
   // withheld unless cited, and the pane says how many were withheld so a
   // reader knows the agent looked at things it did not build its case on.
   let hiddenBroader = 0;
+  // Broader metrics are facts about something other than the target. They are
+  // withheld unless cited, and the pane says how many were withheld so a
+  // reader knows the agent ran queries it did not build its case on.
+  let hiddenMetrics = 0;
   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 = FOCUSED_EVIDENCE_TYPES.includes(group.latest.data.type);
-      const sourceGroups = link
+    // An agent item names this observation when its subject does, or when the
+    // call it cites was itself scoped to one resource; a subject-less item on
+    // a broad query only proves the query returned one row and is gated like
+    // a citation of its source.
+    const namedByAgent = (caseByGroup.get(group.id) ?? []).some(
+      (item) => item.subject || sourceNamesOneResource(item.source),
+    );
+    if (broader && !namedByAgent) {
+      const citingSource =
+        resolution?.links.find((item) => item.originalGroupId === group.id)
+          ?.source ??
+        caseByGroup.get(group.id)?.[0]?.source ??
+        alsoSelected?.find((entry) => entry.groupId === group.id)?.source;
+      const focused = evidenceKindIsFocused(group.latest.data.type);
+      const sourceGroups = citingSource
         ? groups.filter(
             (candidate) =>
-              FOCUSED_EVIDENCE_TYPES.includes(candidate.latest.data.type) &&
+              evidenceKindIsFocused(candidate.latest.data.type) &&
               candidate.observations.some(
-                (observation) => observation.source.id === link.source.id,
+                (observation) => observation.source.id === citingSource.id,
               ),
           )
         : [];
       if (!selected.has(group.id) || !focused || sourceGroups.length !== 1) {
-        if (!group.historical) hiddenBroader += 1;
+        // The two counts head separate lines in the pane, so they have to be
+        // disjoint: a withheld chart announced by both would read as two
+        // withheld results.
+        if (!group.historical) {
+          if (group.latest.data.type === "metrics") hiddenMetrics += 1;
+          else hiddenBroader += 1;
+        }
         continue;
       }
     }
@@ -185,28 +289,53 @@ export function partitionInvestigationEvidence(
     collections[collection].push(group);
     collectionByGroup.set(group.id, collection);
   }
-  collections.main.sort(
-    (left, right) =>
+  // A group takes its strongest role (lowest rank); within one role the
+  // agent's own item order decides. Unlabelled and ruled-out groups keep
+  // Radar's order among themselves.
+  const roleOrder = (group: InvestigationEvidenceGroup) => {
+    let rank: number | undefined;
+    let itemIndex = Number.POSITIVE_INFINITY;
+    for (const item of caseByGroup.get(group.id) ?? []) {
+      const itemRank = EVIDENCE_ROLE_RANK[item.role];
+      if (rank === undefined || itemRank < rank) {
+        rank = itemRank;
+        itemIndex = item.index;
+      } else if (itemRank === rank) {
+        itemIndex = Math.min(itemIndex, item.index);
+      }
+    }
+    if (rank === undefined || rank === UNLABELLED_RANK) {
+      return { rank: UNLABELLED_RANK, itemIndex: Number.POSITIVE_INFINITY };
+    }
+    return { rank, itemIndex };
+  };
+  collections.main.sort((left, right) => {
+    const leftRole = roleOrder(left);
+    const rightRole = roleOrder(right);
+    const agentOrder =
+      Number.isFinite(leftRole.itemIndex) ||
+      Number.isFinite(rightRole.itemIndex)
+        ? leftRole.itemIndex - rightRole.itemIndex
+        : 0;
+    return (
+      leftRole.rank - rightRole.rank ||
+      agentOrder ||
       Number(right.latest.tier === "key") -
         Number(left.latest.tier === "key") ||
       Number(adverse(right)) - Number(adverse(left)) ||
-      left.firstOrder - right.firstOrder,
+      left.firstOrder - right.firstOrder
+    );
+  });
+  // A healthy workload's collection opens with several "nothing here"
+  // receipts; the cards that carry facts (its vitals above all) come first,
+  // and the receipts keep their order among themselves.
+  collections.workload.sort(
+    (left, right) =>
+      Number(left.kind === "receipt") - Number(right.kind === "receipt"),
   );
-  return { ...collections, collectionByGroup, hiddenBroader };
+  return { ...collections, collectionByGroup, hiddenBroader, hiddenMetrics };
 }
 
-// Kinds whose card is one unambiguous subject, so a citation of their source
-// can promote exactly that fact. A broad search (issues, inventory, events)
-// yields many rows per source; a citation cannot pick one of those.
-const FOCUSED_EVIDENCE_TYPES: readonly InvestigationEvidenceData["type"][] = [
-  "resource",
-  "logs",
-  "crash",
-  "helm",
-  "alerts",
-  "permissions",
-];
-
 export function investigationEvidenceRevealCollection(
   projection: InvestigationEvidenceProjection,
   sourceId: string,
@@ -229,6 +358,8 @@ export function investigationEvidenceRevealCollection(
 export function InvestigationEvidencePane({
   projection,
   rootCauseEvidence,
+  alsoSelectedGroupIds,
+  investigationCase,
   collecting,
   animateGroupIds,
   onViewSource,
@@ -242,6 +373,13 @@ export function InvestigationEvidencePane({
   projection: InvestigationEvidenceProjection;
   /** Server-validated links for the current root cause; absent without one. */
   rootCauseEvidence?: InvestigationRootCauseEvidenceResolution;
+  /** What a later turn cited; adds to the assessment's selection. */
+  alsoSelectedGroupIds?: readonly {
+    groupId: string;
+    source: InvestigationEvidenceSource;
+  }[];
+  /** The current assessment's agent case, resolved against this projection. */
+  investigationCase?: InvestigationCaseResolution;
   collecting: boolean;
   animateGroupIds: ReadonlySet<string>;
   onViewSource: (
@@ -280,9 +418,57 @@ export function InvestigationEvidencePane({
   const partition = partitionInvestigationEvidence(
     projection.groups,
     rootCauseEvidence,
+    investigationCase,
+    alsoSelectedGroupIds,
   );
   const hasCurrentEvidence =
     partition.main.length + partition.workload.length > 0;
+  // A "Ruled out" link is an in-pane navigation to the placed observation. It
+  // reuses the Activity → Findings reveal path (open the card, open history
+  // when the observation is a superseded revision) and yields to a newer
+  // request from the parent.
+  const [caseReveal, setCaseReveal] = useState<
+    { sourceId: string; requestId: number } | undefined
+  >(undefined);
+  // A ruled-out reveal belongs to the case that produced it; a new parent
+  // request or a new assessment's case supersedes it.
+  useEffect(() => {
+    setCaseReveal(undefined);
+  }, [revealRequest?.requestId, investigationCase]);
+  const collectionByGroup = partition.collectionByGroup;
+  // A placed item can still sit on a withheld broader card; a link to it
+  // would have nowhere to go.
+  const visibleRuledOut = (investigationCase?.ruledOut ?? []).filter(
+    (entry) => entry.item.groupId && collectionByGroup.has(entry.item.groupId),
+  );
+  const revealCaseItem = useCallback(
+    (item: InvestigationCaseItem) => {
+      const { groupId, observation } = item;
+      if (!groupId || !observation) return;
+      // A placed group is normally in main, but a historical one lives in the
+      // nested "Previous observations" collection; open the way to it first.
+      const collection = collectionByGroup.get(groupId);
+      let settle = 0;
+      if (collection === "workload" || collection === "earlier") {
+        setWorkloadOpen(true);
+        settle = investigationDisclosureSettleDelay(prefersReducedMotion());
+      }
+      if (collection === "earlier") setEarlierOpen(true);
+      onGroupOpenChange(groupId, true);
+      setCaseReveal({ sourceId: observation.source.id, requestId: Date.now() });
+      window.setTimeout(() => {
+        window.requestAnimationFrame(() => {
+          const element = document.getElementById(groupId);
+          element?.scrollIntoView({
+            block: "start",
+            behavior: prefersReducedMotion() ? "auto" : "smooth",
+          });
+          element?.focus({ preventScroll: true });
+        });
+      }, settle);
+    },
+    [onGroupOpenChange, collectionByGroup],
+  );
   const revealCollection = revealRequest
     ? investigationEvidenceRevealCollection(
         projection,
@@ -403,6 +589,13 @@ export function InvestigationEvidencePane({
           />
         ) : null}
 
+        {/* What the agent considered and rejected belongs with the conclusion
+            it argues for, not after the evidence list among the withheld
+            counts, where it read as bookkeeping. */}
+        {visibleRuledOut.length > 0 ? (
+          <RuledOutBlock entries={visibleRuledOut} onReveal={revealCaseItem} />
+        ) : null}
+
         <div className="grid items-start gap-2.5">
           {partition.main.map((group) => (
             <EvidenceCard
@@ -426,6 +619,17 @@ export function InvestigationEvidencePane({
           </p>
         ) : null}
 
+        {partition.hiddenMetrics > 0 ? (
+          <p
+            className="text-xs text-theme-text-tertiary"
+            data-testid="investigation-hidden-metrics"
+          >
+            {partition.hiddenMetrics === 1
+              ? "1 broader metric result is not shown; it appears here when the assessment cites it."
+              : `${partition.hiddenMetrics} broader metric results are not shown; they appear here when the assessment cites them.`}
+          </p>
+        ) : null}
+
         {!hasCurrentEvidence ? (
           <EmptyCollection
             collecting={collecting}
@@ -467,8 +671,29 @@ export function InvestigationEvidencePane({
         onOpenTimeline,
         expandedGroupIds,
         onGroupOpenChange,
-        revealSourceId: revealRequest?.sourceId,
-        revealRequestId: revealRequest?.requestId,
+        revealSourceId: caseReveal?.sourceId ?? revealRequest?.sourceId,
+        revealRequestId: caseReveal?.requestId ?? revealRequest?.requestId,
+        caseByGroup: investigationCaseByGroup(investigationCase),
+        excludedByItem: new Map(
+          (investigationCase?.ruledOut ?? []).map((entry) => [
+            investigationCaseItemKey(entry.item),
+            entry.hypothesis,
+          ]),
+        ),
+        metricsMarkersBySource: new Map(
+          projection.groups.flatMap((group) =>
+            group.observations.flatMap((observation) =>
+              observation.data.type === "metrics"
+                ? [
+                    [
+                      observation.source.id,
+                      metricsChangeCoverage(projection.groups, observation),
+                    ] as const,
+                  ]
+                : [],
+            ),
+          ),
+        ),
         citedOrderByGroup: new Map(
           rootCauseEvidence?.links.flatMap((link) =>
             link.originalGroupId
@@ -484,6 +709,63 @@ export function InvestigationEvidencePane({
   );
 }
 
+/**
+ * Hypotheses the agent dropped, each pointing at the Radar observation whose
+ * result contradicted it. Entries whose item could not be placed on an
+ * observation are filtered out by the resolver and never rendered here.
+ */
+function RuledOutBlock({
+  entries,
+  onReveal,
+}: {
+  entries: InvestigationCaseResolution["ruledOut"];
+  onReveal: (item: InvestigationCaseItem) => void;
+}) {
+  const headingId = useId();
+  return (
+    <section
+      aria-labelledby={headingId}
+      data-testid="investigation-ruled-out"
+      className="rounded-lg border border-theme-border/80 bg-theme-base/20 px-3 py-2.5"
+    >
+      <h3
+        id={headingId}
+        className="flex items-center gap-2 text-xs font-semibold text-theme-text-secondary"
+      >
+        Ruled out
+        <span className="text-[10px] font-semibold uppercase tracking-wide text-accent-text">
+          Agent
+        </span>
+      </h3>
+      <ul className="mt-1.5 space-y-1.5">
+        {entries.map((entry, position) => {
+          const observation = entry.item.observation!;
+          return (
+            <li
+              key={position}
+              className="flex min-w-0 flex-wrap items-baseline gap-x-2 gap-y-0.5 text-xs"
+            >
+              <span className="min-w-0 text-theme-text-secondary [overflow-wrap:anywhere]">
+                {entry.hypothesis}
+              </span>
+              <button
+                type="button"
+                onClick={() => onReveal(entry.item)}
+                className="shrink-0 rounded text-accent-text hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
+              >
+                See {observation.title}
+                {entry.item.placement === "revision"
+                  ? " (earlier observation)"
+                  : ""}
+              </button>
+            </li>
+          );
+        })}
+      </ul>
+    </section>
+  );
+}
+
 function AssessmentEvidenceQualification({
   resolution,
   onViewActivity,
@@ -925,14 +1207,25 @@ function CoverageGroupRow({
 function previousDifferentObservations(
   group: InvestigationEvidenceGroup,
   citedOrder?: number,
+  boundOrders: ReadonlySet<number> = new Set(),
 ) {
   const seen = new Set([evidenceDisplaySnapshot(group.latest)]);
+  const pinned = (observation: InvestigationEvidenceObservation) =>
+    observation.source.order === citedOrder ||
+    boundOrders.has(observation.source.order);
   return [...group.observations].reverse().filter((observation) => {
+    if (observation === group.latest) return false;
+    // An observation bound to an agent item always keeps its own row: display
+    // equivalence is a folding rule for unpinned rechecks, never a reason to
+    // move a claim onto different content.
+    if (boundOrders.has(observation.source.order)) return true;
+    // A pinned observation wins over an unpinned twin with the same display
+    // content.
     if (
-      observation.source.order !== citedOrder &&
+      !pinned(observation) &&
       group.observations.some(
         (other) =>
-          other.source.order === citedOrder &&
+          pinned(other) &&
           evidenceDisplaySnapshot(other) ===
             evidenceDisplaySnapshot(observation),
       )
@@ -948,6 +1241,8 @@ function previousDifferentObservations(
 export function investigationEvidenceShouldRevealHistory(
   group: InvestigationEvidenceGroup,
   sourceId?: string,
+  /** Sources whose observation carries an agent item and so always has a row. */
+  boundSourceIds: ReadonlySet<string> = new Set(),
 ): boolean {
   return (
     Boolean(sourceId) &&
@@ -955,8 +1250,9 @@ export function investigationEvidenceShouldRevealHistory(
     group.observations.some(
       (observation) =>
         observation.source.id === sourceId &&
-        evidenceDisplaySnapshot(observation) !==
-          evidenceDisplaySnapshot(group.latest),
+        (boundSourceIds.has(observation.source.id) ||
+          evidenceDisplaySnapshot(observation) !==
+            evidenceDisplaySnapshot(group.latest)),
     )
   );
 }
@@ -989,6 +1285,9 @@ function EvidenceCard({
     citedOrderByGroup,
     expandedGroupIds,
     onGroupOpenChange,
+    metricsMarkersBySource,
+    caseByGroup,
+    excludedByItem,
   } = useContext(EvidenceNavigationContext);
   const open = expandedGroupIds?.has(group.id) ?? false;
   const setOpen = useCallback(
@@ -1002,7 +1301,17 @@ function EvidenceCard({
       ? parseLogLine(observation.summary).content
       : observation.summary;
   const citedOrder = citedOrderByGroup?.get(group.id);
-  const previousObservations = previousDifferentObservations(group, citedOrder);
+  const caseItems = caseByGroup?.get(group.id) ?? [];
+  const cardItems = caseItems.filter((item) => item.placement === "card");
+  const revisionItems = caseItems.filter(
+    (item) => item.placement === "revision",
+  );
+  const agentCause = cardItems.some((item) => item.role === "cause");
+  const previousObservations = previousDifferentObservations(
+    group,
+    citedOrder,
+    new Set(revisionItems.map((item) => item.observation!.source.order)),
+  );
   const meaningfulHistory = previousObservations.length > 0;
   const citedObservation = group.observations.find(
     (item) => item.source.order === citedOrder,
@@ -1020,6 +1329,7 @@ function EvidenceCard({
   const revealHistory = investigationEvidenceShouldRevealHistory(
     group,
     revealSourceId,
+    new Set(revisionItems.map((item) => item.observation!.source.id)),
   );
   useLayoutEffect(() => {
     const destination = revealSourceId
@@ -1100,7 +1410,14 @@ function EvidenceCard({
       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",
+        "rounded-lg border",
+        // The card the agent calls the cause sorts first and is often the
+        // calmest thing on screen: a cause is frequently a Secret or a
+        // ConfigMap that Radar has no reason to colour, while every card
+        // echoing the failure below it carries red. Lifting the surface marks
+        // it without borrowing a severity hue, and without touching the left
+        // rule (Radar's severity) or the ring (the source you are viewing).
+        agentCause ? "bg-theme-elevated shadow-theme-sm" : "bg-theme-surface",
         toneBorder(observation.tone, observation.tier, prominence),
         wide && "@min-[760px]/evidence:col-span-2",
         animateArrival && "animate-transcript-enter",
@@ -1173,6 +1490,24 @@ function EvidenceCard({
           ) : null}
         </div>
       </div>
+      {cardItems.some((item) => item.claim || item.role) ? (
+        <div
+          className={clsx(
+            "space-y-1.5",
+            prominence === "primary" ? "px-3 pb-2.5" : "px-2.5 pb-2",
+          )}
+        >
+          {cardItems.map((item) => (
+            <AgentClaimNote
+              key={item.index}
+              claim={item.claim}
+              role={item.role}
+              excludes={excludedByItem?.get(investigationCaseItemKey(item))}
+              className="pt-1.5"
+            />
+          ))}
+        </div>
+      ) : null}
       {canExpand ? (
         <div id={bodyId}>
           <Collapse open={open}>
@@ -1186,12 +1521,16 @@ function EvidenceCard({
                 <EvidenceBody
                   data={observation.data}
                   cardSummary={observation.summary}
+                  changeCoverage={metricsMarkersBySource?.get(
+                    observation.source.id,
+                  )}
                 />
               ) : null}
               {meaningfulHistory ? (
                 <RevisionHistory
                   observations={previousObservations}
                   citedOrder={citedOrder}
+                  caseItems={revisionItems}
                   reveal={revealHistory}
                   revealRequestId={revealRequestId}
                   onViewSource={onViewSource}
@@ -1293,9 +1632,12 @@ function uniquePrimarySources(
 function EvidenceBody({
   data,
   cardSummary,
+  changeCoverage,
 }: {
   data: InvestigationEvidenceData;
   cardSummary?: string;
+  /** Change markers for a metrics chart; derived by the pane, never by data. */
+  changeCoverage?: MetricsChangeCoverage;
 }) {
   switch (data.type) {
     case "issue":
@@ -1323,15 +1665,20 @@ function EvidenceBody({
     case "inventory":
       return <InventoryBody data={data} />;
     case "receipt":
-      return (
+      // The title and the scope above it are the answer. A body appears only
+      // when it adds the reason or the limit, so an absent one renders nothing
+      // rather than an empty line.
+      return data.message ? (
         <p className="text-xs text-theme-text-secondary">{data.message}</p>
-      );
+      ) : null;
     case "alerts":
       return <AlertsBody data={data} />;
     case "helm":
       return <HelmBody data={data} />;
     case "permissions":
       return <PermissionsBody data={data} />;
+    case "metrics":
+      return <MetricsBody data={data} changeCoverage={changeCoverage} />;
   }
 }
 
@@ -1360,6 +1707,7 @@ function evidenceHasDetails(
         investigationResourceEvidenceHasDetails(data.resource) ||
         replicas?.desired !== undefined ||
         data.resourceContext?.statusSummary?.conditions?.length ||
+        diagnosedScalers(data.resourceContext).length ||
         data.gitOpsDiagnosis ||
         data.warnings.length,
       );
@@ -1495,6 +1843,7 @@ function ResourceBody({ data }: { data: EvidenceDataOf<"resource"> }) {
   const ready = replicas ? (replicas.ready ?? 0) : undefined;
   const shortfall =
     desired !== undefined && ready !== undefined && ready < desired;
+  const scalers = diagnosedScalers(data.resourceContext);
   return (
     <div className="space-y-3">
       <InvestigationResourceEvidence resource={data.resource} />
@@ -1550,6 +1899,12 @@ function ResourceBody({ data }: { data: EvidenceDataOf<"resource"> }) {
           </div>
         </div>
       ) : null}
+      {scalers.length > 0 ? (
+        <ScaledBySection
+          scalers={scalers}
+          allScalers={data.resourceContext?.scaledBy ?? []}
+        />
+      ) : null}
       {data.warnings.length > 0 ? (
         <ul className="space-y-1 text-xs text-theme-text-secondary">
           {data.warnings.map((warning) => (
@@ -1564,6 +1919,75 @@ function ResourceBody({ data }: { data: EvidenceDataOf<"resource"> }) {
   );
 }
 
+type DiagnosedScaler = DiagnosisScalerRef &
+  Required<Pick<DiagnosisScalerRef, "hpaSummary">>;
+
+function diagnosedScalers(
+  context: DiagnosisResourceContext | undefined,
+): DiagnosedScaler[] {
+  return (context?.scaledBy ?? []).filter(
+    (scaler): scaler is DiagnosedScaler => scaler.hpaSummary !== undefined,
+  );
+}
+
+function ScaledBySection({
+  scalers,
+  allScalers,
+}: {
+  scalers: DiagnosedScaler[];
+  allScalers: DiagnosisScalerRef[];
+}) {
+  const { onOpenResource } = useContext(EvidenceNavigationContext);
+  // The ScaledObject is only a link when Radar listed it as a scaler too; a
+  // name read off the HPA's owner reference alone is not a resource we hold.
+  const listedScaler = (ref: DiagnosisResourceRef) =>
+    allScalers.some(
+      (scaler) =>
+        scaler.kind === ref.kind &&
+        scaler.name === ref.name &&
+        (scaler.namespace ?? "") === (ref.namespace ?? ""),
+    );
+  return (
+    <div>
+      <div className="mb-1.5 text-xs font-semibold uppercase tracking-wide text-theme-text-tertiary">
+        Scaled by
+      </div>
+      <div className="space-y-2">
+        {scalers.map((scaler) => (
+          <HPADiagnosisSummary
+            key={`${scaler.namespace ?? ""}/${scaler.name}`}
+            diagnosis={scaler.hpaSummary}
+            variant="inline"
+            header={
+              <>
+                <span className="font-medium text-theme-text-primary">
+                  {displayKind(scaler.kind)} {scaler.name}
+                </span>
+                {scaler.managedBy ? (
+                  <span className="text-theme-text-tertiary">
+                    managed by KEDA {displayKind(scaler.managedBy.kind)}{" "}
+                    <ResourceLink
+                      name={scaler.managedBy.name}
+                      kind={scaler.managedBy.kind}
+                      namespace={scaler.managedBy.namespace ?? ""}
+                      group={scaler.managedBy.group}
+                      onNavigate={
+                        onOpenResource && listedScaler(scaler.managedBy)
+                          ? (ref) => onOpenResource(ref)
+                          : undefined
+                      }
+                    />
+                  </span>
+                ) : null}
+              </>
+            }
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
+
 function GitOpsStatusBody({
   status,
 }: {
@@ -2114,6 +2538,222 @@ function TopologyStat({ label, value }: { label: string; value: number }) {
   );
 }
 
+const METRICS_AXIS_LABEL_MAX_CHARS = 72;
+
+function finiteSamples(series: TimeSeries): TimeSeries["dataPoints"] {
+  return series.dataPoints.filter((point) => typeof point.value === "number");
+}
+
+function MetricsValueTable({
+  series,
+  labels,
+  unit,
+  withTime,
+}: {
+  series: TimeSeries[];
+  /** Display name per series, derived from the complete result. */
+  labels: string[];
+  unit: string;
+  withTime: boolean;
+}) {
+  return (
+    <table className="w-full text-xs">
+      <tbody>
+        {series.map((item, index) => {
+          const sample = finiteSamples(item).at(-1);
+          return (
+            <tr
+              key={`${labels[index]}-${index}`}
+              className="border-b border-theme-border/60 last:border-b-0"
+            >
+              <td className="py-1 pr-3 font-mono text-theme-text-secondary [overflow-wrap:anywhere]">
+                {labels[index]}
+              </td>
+              {withTime ? (
+                <td className="py-1 pr-3 text-right text-theme-text-tertiary tabular-nums">
+                  {sample
+                    ? new Date(sample.timestamp * 1000).toLocaleTimeString()
+                    : ""}
+                </td>
+              ) : null}
+              <td className="py-1 text-right font-mono tabular-nums text-theme-text-primary">
+                {sample && typeof sample.value === "number"
+                  ? formatMetricValue(sample.value, unit)
+                  : "no value"}
+              </td>
+            </tr>
+          );
+        })}
+      </tbody>
+    </table>
+  );
+}
+
+function MetricsBody({
+  data,
+  changeCoverage,
+}: {
+  data: EvidenceDataOf<"metrics">;
+  changeCoverage?: MetricsChangeCoverage;
+}) {
+  const annotations = changeCoverage?.markers;
+  const unit = data.unit ?? "";
+  const axisLabel = data.label ?? data.query;
+  const axisTruncated = axisLabel.length > METRICS_AXIS_LABEL_MAX_CHARS;
+  const axisText = axisTruncated
+    ? `${axisLabel.slice(0, METRICS_AXIS_LABEL_MAX_CHARS - 1)}…`
+    : axisLabel;
+  const domain = metricsDomain(data);
+  const windowText = domain
+    ? `${new Date(domain.start * 1000).toLocaleString()} to ${new Date(domain.end * 1000).toLocaleString()}`
+    : undefined;
+  if (data.series.length === 0) {
+    return (
+      <div className="space-y-2">
+        <p className="text-xs text-theme-text-secondary">
+          No series matched this query
+          {data.mode === "range" ? " in the window" : ""}.
+        </p>
+        <pre className="whitespace-pre-wrap break-all rounded-md border border-theme-border/70 bg-theme-base/30 p-2 font-mono text-xs text-theme-text-secondary">
+          {data.query}
+        </pre>
+        {data.note ? (
+          <p className="text-xs text-theme-text-tertiary">{data.note}</p>
+        ) : null}
+      </div>
+    );
+  }
+  if (data.mode === "instant") {
+    return (
+      <div className="space-y-2">
+        <MetricsValueTable
+          series={data.series}
+          labels={seriesDisplayLabels(data.series)}
+          unit={unit}
+          withTime={false}
+        />
+        <pre className="whitespace-pre-wrap break-all rounded-md border border-theme-border/70 bg-theme-base/30 p-2 font-mono text-xs text-theme-text-secondary">
+          {data.query}
+        </pre>
+        {data.note ? (
+          <p className="text-xs text-theme-text-tertiary">{data.note}</p>
+        ) : null}
+      </div>
+    );
+  }
+  // Names come from the whole result so two series that differ only by a
+  // label the chart would hide stay distinguishable wherever they are listed.
+  const labels = seriesDisplayLabels(data.series);
+  const indexed = data.series.map((item, index) => ({
+    item,
+    label: labels[index],
+    finite: finiteSamples(item).length,
+  }));
+  // A series with one finite sample has no line to draw, and one with none
+  // (Prometheus serializes NaN and infinities as gaps) has nothing to show.
+  // Listing both keeps what was captured readable and states what was not.
+  const charted = indexed.filter((entry) => entry.finite >= 2);
+  const single = indexed.filter((entry) => entry.finite === 1);
+  const empty = indexed.filter((entry) => entry.finite === 0);
+  return (
+    <div className="space-y-2">
+      <div className="flex min-w-0 flex-wrap items-baseline gap-x-2 gap-y-0.5 text-xs">
+        <Tooltip
+          content={axisLabel}
+          delay={200}
+          position="top"
+          disabled={!axisTruncated}
+        >
+          <span
+            className="min-w-0 truncate font-mono text-theme-text-secondary"
+            data-testid="investigation-metrics-axis-label"
+          >
+            {axisText}
+          </span>
+        </Tooltip>
+        {unit ? (
+          <span className="text-theme-text-tertiary">({unit})</span>
+        ) : null}
+        {windowText ? (
+          <span className="ml-auto text-theme-text-tertiary">{windowText}</span>
+        ) : null}
+      </div>
+      {charted.length > 0 ? (
+        <div className="space-y-1.5 rounded-md border border-theme-border/70 bg-theme-base/30 p-2">
+          <AreaChart
+            series={charted.map((entry) => entry.item)}
+            seriesLabels={charted.map((entry) => entry.label)}
+            color={SERIES_COLORS[0]}
+            fillColor={seriesFill(0, SERIES_COLORS[0])}
+            unit={unit}
+            annotations={annotations}
+            domain={domain}
+            layout="auto"
+          />
+          {charted.length > 1 ? (
+            <SeriesLegend
+              series={charted.map((entry) => entry.item)}
+              seriesLabels={charted.map((entry) => entry.label)}
+              color={SERIES_COLORS[0]}
+            />
+          ) : null}
+        </div>
+      ) : null}
+      {single.length > 0 ? (
+        <div
+          className="space-y-1"
+          data-testid="investigation-metrics-sparse-series"
+        >
+          <p className="text-xs text-theme-text-tertiary">
+            {single.length === 1
+              ? "1 series has a single sample in this window, listed with its time:"
+              : `${single.length} series have a single sample in this window, listed with their times:`}
+          </p>
+          <MetricsValueTable
+            series={single.map((entry) => entry.item)}
+            labels={single.map((entry) => entry.label)}
+            unit={unit}
+            withTime
+          />
+        </div>
+      ) : null}
+      {empty.length > 0 ? (
+        <p
+          className="text-xs text-theme-text-tertiary [overflow-wrap:anywhere]"
+          data-testid="investigation-metrics-empty-series"
+        >
+          {empty.length === 1
+            ? "1 series had no usable samples in this window: "
+            : `${empty.length} series had no usable samples in this window: `}
+          <span className="font-mono">
+            {empty.map((entry) => entry.label).join("; ")}
+          </span>
+        </p>
+      ) : null}
+      {changeCoverage?.checked && charted.length > 0 ? (
+        <p className="text-xs text-theme-text-tertiary">
+          {annotations?.length === 1
+            ? "1 change recorded in this window is marked on the chart."
+            : annotations?.length
+              ? `${annotations.length} changes recorded in this window are marked on the chart.`
+              : // Only that the changes Radar read miss this window — not that
+                // the window was fully covered. The change lookup has its own
+                // window, which need not span the chart's.
+                "None of the changes Radar read fall in this window."}
+        </p>
+      ) : null}
+      {axisTruncated ? (
+        <pre className="whitespace-pre-wrap break-all rounded-md border border-theme-border/70 bg-theme-base/30 p-2 font-mono text-xs text-theme-text-secondary">
+          {data.query}
+        </pre>
+      ) : null}
+      {data.note ? (
+        <p className="text-xs text-theme-text-tertiary">{data.note}</p>
+      ) : null}
+    </div>
+  );
+}
+
 function InventoryBody({ data }: { data: EvidenceDataOf<"inventory"> }) {
   return (
     <div className="max-h-72 overflow-y-auto rounded-md border border-theme-border">
@@ -2600,12 +3240,15 @@ function PermissionsBody({ data }: { data: EvidenceDataOf<"permissions"> }) {
 function RevisionHistory({
   observations,
   citedOrder,
+  caseItems = [],
   reveal,
   revealRequestId,
   onViewSource,
 }: {
   observations: InvestigationEvidenceObservation[];
   citedOrder?: number;
+  /** Agent items bound to a superseded observation of this group. */
+  caseItems?: InvestigationCaseItem[];
   reveal: boolean;
   revealRequestId?: number;
   onViewSource: (
@@ -2615,6 +3258,7 @@ function RevisionHistory({
 }) {
   const [open, setOpen] = useState(false);
   const regionId = useId();
+  const { metricsMarkersBySource } = useContext(EvidenceNavigationContext);
   const { elementRef, revealAfterToggle } =
     useDisclosureReveal<HTMLDivElement>();
   useLayoutEffect(() => {
@@ -2638,41 +3282,73 @@ function RevisionHistory({
       <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)}
+            {observations.map((observation) => {
+              const key = investigationCaseObservationKey(observation);
+              const rowItems = caseItems.filter(
+                (item) =>
+                  item.observation &&
+                  investigationCaseObservationKey(item.observation) === key,
+              );
+              const rowRoles = [...new Set(rowItems.map((item) => item.role))];
+              return (
+                <li
+                  key={`${observation.source.id}-${observation.revision}`}
+                  data-case-observation={rowItems.length > 0 ? key : undefined}
+                  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>
-                </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>
-            ))}
+                  <div className="min-w-0 flex-1 space-y-1 text-theme-text-secondary">
+                    {rowRoles.length > 0 ? (
+                      <p className="flex flex-wrap items-center gap-1.5">
+                        <span>{observation.summary || observation.title}</span>
+                        {rowRoles.map((role) => (
+                          <AgentRoleChip key={role} role={role} />
+                        ))}
+                      </p>
+                    ) : (
+                      <p>{observation.summary || observation.title}</p>
+                    )}
+                    {rowItems
+                      .filter((item) => item.claim)
+                      .map((item) => (
+                        <AgentClaimNote
+                          key={item.index}
+                          claim={item.claim}
+                          role={rowRoles.length > 1 ? item.role : undefined}
+                          className="pt-1"
+                        />
+                      ))}
+                    {evidenceHasDetails(
+                      observation.data,
+                      observation.summary,
+                    ) && (
+                      <EvidenceBody
+                        data={observation.data}
+                        cardSummary={observation.summary}
+                        changeCoverage={metricsMarkersBySource?.get(
+                          observation.source.id,
+                        )}
+                      />
+                    )}
+                  </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>
@@ -2681,11 +3357,9 @@ function RevisionHistory({
 }
 
 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") {
+  // Changes get a tooltip rather than a sentence because the wording depends
+  // on whether the reported age was collected with the change.
+  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." : ""}`}
@@ -2702,16 +3376,8 @@ function EvidenceCaveat({ data }: { data: InvestigationEvidenceData }) {
         </button>
       </Tooltip>
     );
-  } else if (data.type === "relationships" || data.type === "topology") {
-    text =
-      "This shows direct relationships Radar found, not an inferred blast radius.";
-  } else if (data.type === "alerts") {
-    text =
-      "Instances are matched to this investigation by their Prometheus labels; a firing rule alone does not establish the cause.";
-  } else if (data.type === "permissions") {
-    text =
-      "This is what RBAC grants the subject, not what the workload has exercised.";
   }
+  const text = EVIDENCE_KIND_TRAITS[data.type].caveat;
   if (!text) return null;
   return (
     <p className="flex items-start gap-1.5 text-xs leading-relaxed text-theme-text-tertiary">
@@ -2784,39 +3450,7 @@ function SourceButton({
 }
 
 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;
-    case "alerts":
-      return BellRing;
-    case "helm":
-      return Package;
-    case "permissions":
-      return KeyRound;
-  }
+  return EVIDENCE_KIND_TRAITS[type].icon;
 }
 
 function severityBadge(value: string) {
@@ -2850,6 +3484,13 @@ function toneBorder(
   prominence: "primary" | "supporting" | "secondary",
 ): string {
   if (prominence !== "primary") return "border-theme-border/70";
+  // A supporting adverse card is what the healthy-conflict banner points at,
+  // so it must be tellable from its neutral neighbours: a thin rule, lighter
+  // than the Key tier's.
+  if (tier === "supporting" && tone === "error")
+    return "border-l-2 border-l-semantic-error border-theme-border";
+  if (tier === "supporting" && (tone === "warning" || tone === "alert"))
+    return "border-l-2 border-l-semantic-warning border-theme-border";
   if (tier !== "key") return "border-theme-border";
   if (tone === "error")
     return "border-l-[3px] border-l-red-500 border-theme-border";