@skyhook-io/radar-app 1.13.3 → 1.13.5

package/src/components/diagnose/InvestigationEvidencePane.tsx

@@ -2,6 +2,7 @@ import {
   createContext,
   useCallback,
   useContext,
+  useEffect,
   useId,
   useLayoutEffect,
   useRef,
@@ -9,22 +10,18 @@ import {
   type ReactNode,
 } from "react";
 import { clsx } from "clsx";
+import {
+  EVIDENCE_KIND_TRAITS,
+  evidenceKindIsFocused,
+} from "./investigationEvidenceKinds";
 import {
   Activity,
   AlertTriangle,
-  Boxes,
-  Bug,
-  CheckCircle2,
   CircleAlert,
-  Clock3,
   FileClock,
   FileSearch,
   Info,
-  ListTree,
-  Network,
-  ScrollText,
   SearchCheck,
-  ShieldAlert,
   SquareArrowOutUpRight,
 } from "lucide-react";
 import {
@@ -37,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,
@@ -52,6 +64,7 @@ import {
 import {
   investigationEvidenceSubjectRef,
   investigationEvidenceSourceDomId,
+  investigationSourceArgs,
   type InvestigationEvidenceData,
   type InvestigationEvidenceGroup,
   type InvestigationEvidenceObservation,
@@ -60,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,
@@ -79,19 +103,71 @@ export {
 } from "./useDisclosureReveal";
 export const VISIBLE_LOG_EVIDENCE_LINES = 12;
 
+/** The Timeline scope a changes card can open: one resource name in one namespace. */
+export interface InvestigationTimelineScope {
+  namespace?: string;
+  name: string;
+}
+
 const EvidenceNavigationContext = createContext<{
   onOpenResource?: (ref: DiagnosisResourceRef) => void;
+  onOpenTimeline?: (scope: InvestigationTimelineScope) => void;
   revealSourceId?: string;
   revealRequestId?: number;
   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";
+  return EVIDENCE_KIND_TRAITS[type].fullRow;
 }
 
 // Supporting evidence becomes a two-column grid when the pane is wide enough.
@@ -119,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: [],
@@ -134,30 +229,51 @@ export function partitionInvestigationEvidence(
   const collectionByGroup = new Map<string, EvidenceCollection>();
   const adverse = (group: InvestigationEvidenceGroup) =>
     ["error", "alert", "warning"].includes(group.latest.tone);
+  // Broader cards 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 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 = ["resource", "logs", "crash"].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) =>
-              ["resource", "logs", "crash"].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 (!selected.has(group.id) || !focused || sourceGroups.length !== 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;
+      }
     }
     const main =
       !group.historical &&
@@ -173,14 +289,51 @@ 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 };
+  return { ...collections, collectionByGroup, hiddenBroader, hiddenMetrics };
 }
 
 export function investigationEvidenceRevealCollection(
@@ -205,11 +358,14 @@ export function investigationEvidenceRevealCollection(
 export function InvestigationEvidencePane({
   projection,
   rootCauseEvidence,
+  alsoSelectedGroupIds,
+  investigationCase,
   collecting,
   animateGroupIds,
   onViewSource,
   onViewActivity,
   onOpenResource,
+  onOpenTimeline,
   afterEvidence,
   revealRequest,
   onRevealReady,
@@ -217,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: (
@@ -227,6 +390,8 @@ export function InvestigationEvidencePane({
   onViewActivity: () => void;
   /** Opens an evidence subject in Radar when the producer identified it exactly. */
   onOpenResource?: (ref: DiagnosisResourceRef) => void;
+  /** Opens Radar's Timeline filtered to the resource a changes card is about. */
+  onOpenTimeline?: (scope: InvestigationTimelineScope) => void;
   /** Actions follow the complete evidence section, including its disclosures. */
   afterEvidence?: ReactNode;
   /** Explicit Activity → Findings navigation, including repeat clicks. */
@@ -253,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,
@@ -376,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
@@ -388,6 +608,28 @@ export function InvestigationEvidencePane({
           ))}
         </div>
 
+        {partition.hiddenBroader > 0 ? (
+          <p
+            className="text-xs text-theme-text-tertiary"
+            data-testid="investigation-hidden-evidence"
+          >
+            {partition.hiddenBroader === 1
+              ? "1 result about another resource is not shown; it appears here when the assessment cites it."
+              : `${partition.hiddenBroader} results about other resources are not shown; they appear here when the assessment cites them.`}
+          </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}
@@ -426,10 +668,32 @@ export function InvestigationEvidencePane({
     <EvidenceNavigationContext.Provider
       value={{
         onOpenResource,
+        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
@@ -445,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,
@@ -633,6 +954,7 @@ function CoverageStrip({
 }) {
   const hasError = groups.some((group) => group.hasError);
   const historyOnly = groups.every((group) => group.historyOnly);
+  const quiet = historyOnly;
   const { elementRef, revealAfterToggle } =
     useDisclosureReveal<HTMLDivElement>();
   const regionId = "investigation-evidence-coverage";
@@ -652,7 +974,7 @@ function CoverageStrip({
         }}
         className="flex w-full min-w-0 items-center gap-2 px-3 py-2 text-left hover:bg-theme-hover/50"
       >
-        {historyOnly ? (
+        {quiet ? (
           <Info
             className="h-4 w-4 shrink-0 text-theme-text-tertiary"
             aria-hidden
@@ -669,7 +991,7 @@ function CoverageStrip({
           <span
             className={clsx(
               "block text-xs",
-              historyOnly
+              quiet
                 ? "font-medium text-theme-text-secondary"
                 : "font-semibold text-theme-text-primary",
             )}
@@ -735,6 +1057,65 @@ function CoverageGroupRow({
   const regionId = useId();
   const { elementRef, revealAfterToggle } =
     useDisclosureReveal<HTMLDivElement>();
+  // One limitation whose message is the whole summary would repeat itself as
+  // its own detail row; show its source link on the summary row instead.
+  const single =
+    group.limitations.length === 1 &&
+    group.limitations[0].message === group.summary
+      ? group.limitations[0]
+      : undefined;
+  const anchors = sourceIds.map((id) => (
+    <span
+      key={id}
+      id={investigationEvidenceSourceDomId(id)}
+      className="sr-only scroll-mt-14"
+      aria-hidden
+    />
+  ));
+  if (single) {
+    return (
+      <div
+        ref={elementRef}
+        data-evidence-source-container
+        tabIndex={-1}
+        aria-label={`Evidence limitation for ${group.label}: ${group.summary}`}
+        className="flex items-center gap-2 px-3 py-2.5 text-xs outline-none focus:ring-2 focus:ring-accent/40"
+      >
+        {anchors}
+        {group.hasError ? (
+          <CircleAlert
+            className="h-3.5 w-3.5 shrink-0 text-red-400"
+            aria-hidden
+          />
+        ) : single.kind === "truncated" ? (
+          <AlertTriangle
+            className="h-3.5 w-3.5 shrink-0 text-amber-500"
+            aria-hidden
+          />
+        ) : (
+          <Info
+            className="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">
+            {group.label}:
+          </span>{" "}
+          {group.summary}
+        </p>
+        {single.sources.at(-1) ? (
+          <SourceButton
+            ariaLabel={`View source for ${group.label}`}
+            buttonLabel={
+              single.sources.length > 1 ? "View latest in Activity" : undefined
+            }
+            onClick={() => onViewSource(single.sources.at(-1)!.id)}
+          />
+        ) : null}
+      </div>
+    );
+  }
   return (
     <div
       ref={elementRef}
@@ -743,14 +1124,7 @@ function CoverageGroupRow({
       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
-        />
-      ))}
+      {anchors}
       <button
         type="button"
         aria-expanded={open}
@@ -833,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),
       )
@@ -856,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) &&
@@ -863,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)),
     )
   );
 }
@@ -891,11 +1279,15 @@ function EvidenceCard({
 }) {
   const {
     onOpenResource,
+    onOpenTimeline,
     revealSourceId,
     revealRequestId,
     citedOrderByGroup,
     expandedGroupIds,
     onGroupOpenChange,
+    metricsMarkersBySource,
+    caseByGroup,
+    excludedByItem,
   } = useContext(EvidenceNavigationContext);
   const open = expandedGroupIds?.has(group.id) ?? false;
   const setOpen = useCallback(
@@ -909,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,
@@ -927,6 +1329,7 @@ function EvidenceCard({
   const revealHistory = investigationEvidenceShouldRevealHistory(
     group,
     revealSourceId,
+    new Set(revisionItems.map((item) => item.observation!.source.id)),
   );
   useLayoutEffect(() => {
     const destination = revealSourceId
@@ -1007,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",
@@ -1072,8 +1482,32 @@ function EvidenceCard({
             onOpenResource={onOpenResource}
             compact
           />
+          {observation.data.type === "changes" && observation.data.subject ? (
+            <OpenTimelineButton
+              scope={observation.data.subject}
+              onOpenTimeline={onOpenTimeline}
+            />
+          ) : 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}>
@@ -1087,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}
@@ -1146,6 +1584,36 @@ function OpenResourceButton({
   );
 }
 
+function OpenTimelineButton({
+  scope,
+  onOpenTimeline,
+}: {
+  scope: InvestigationTimelineScope;
+  onOpenTimeline?: (scope: InvestigationTimelineScope) => void;
+}) {
+  if (!onOpenTimeline) return null;
+  const identity = `${scope.namespace ? `${scope.namespace}/` : ""}${scope.name}`;
+  const label = `Open the Timeline for ${identity}`;
+  return (
+    <Tooltip
+      content={label}
+      delay={350}
+      position="left"
+      wrapperClassName="flex shrink-0"
+    >
+      <button
+        type="button"
+        aria-label={label}
+        onClick={() => onOpenTimeline(scope)}
+        className="flex h-7 shrink-0 items-center justify-center gap-1 rounded px-2 text-xs font-medium 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"
+      >
+        <FileClock className="h-3.5 w-3.5" aria-hidden />
+        <span className="hidden @min-[540px]/card:inline">Timeline</span>
+      </button>
+    </Tooltip>
+  );
+}
+
 function uniquePrimarySources(
   group: InvestigationEvidenceGroup,
 ): InvestigationEvidenceSource[] {
@@ -1164,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":
@@ -1194,9 +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} />;
   }
 }
 
@@ -1211,10 +1693,12 @@ function evidenceHasDetails(
       const message = data.issue.message?.trim();
       return Boolean(
         (cause && cause !== summary) ||
-        (message && message !== summary && message !== cause),
+        (message && message !== summary && message !== cause) ||
+        data.pods?.length,
       );
     }
     case "startup":
+      return (data.pods?.length ?? 0) > 1;
     case "receipt":
       return false;
     case "resource": {
@@ -1223,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,
       );
@@ -1271,6 +1756,18 @@ function IssueBody({
           {issue.namespace ? `${issue.namespace}/` : ""}
           {issue.name}
         </Badge>
+        {data.pods && data.pods.length > 0 ? (
+          <>
+            <Badge tone="structural" size="sm">
+              {data.pods.length === 1 ? "1 Pod" : `${data.pods.length} Pods`}
+            </Badge>
+            {data.pods.map((pod) => (
+              <Badge key={pod} tone="structural" size="sm">
+                {pod}
+              </Badge>
+            ))}
+          </>
+        ) : null}
       </div>
       {showCause ? (
         <p className="text-sm font-medium leading-relaxed text-theme-text-primary">
@@ -1288,15 +1785,18 @@ function IssueBody({
 
 function StartupBody({ data }: { data: EvidenceDataOf<"startup"> }) {
   const blocker = data.blocker;
+  const pods = data.pods && data.pods.length > 1 ? data.pods : [blocker.name];
   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}
+          {pods.length > 1 ? `${pods.length} ${blocker.kind}s` : blocker.kind}
         </Badge>
+        {pods.map((pod) => (
+          <Badge key={pod} tone="structural" size="sm">
+            {pod}
+          </Badge>
+        ))}
         <Badge severity={severityBadge(blocker.severity)} size="sm">
           {blocker.severity}
         </Badge>
@@ -1343,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} />
@@ -1398,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) => (
@@ -1412,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,
 }: {
@@ -1585,7 +2161,11 @@ function EventsBody({ data }: { data: EvidenceDataOf<"events"> }) {
               <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}` : ""}
+                  {event.count > 1 ? (
+                    <span className="ml-1.5 font-mono text-[11px] font-normal text-theme-text-tertiary">
+                      ×{event.count}
+                    </span>
+                  ) : null}
                 </span>
                 <Tooltip
                   content={new Date(event.lastTimestamp).toLocaleString()}
@@ -1958,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">
@@ -2003,15 +2799,456 @@ function InventoryBody({ data }: { data: EvidenceDataOf<"inventory"> }) {
   );
 }
 
+const VISIBLE_ALERT_LABELS = 6;
+
+function alertStateSeverity(state: string | undefined) {
+  switch ((state ?? "").toLowerCase()) {
+    case "firing":
+      return "error" as const;
+    case "pending":
+      return "warning" as const;
+    case "inactive":
+      return "success" as const;
+    default:
+      return "neutral" as const;
+  }
+}
+
+function AlertsBody({ data }: { data: EvidenceDataOf<"alerts"> }) {
+  const { rule, instances, annotations } = data;
+  const health = rule.health?.toLowerCase();
+  // Target instances lead; the rest stay visible in producer order.
+  const ordered = [...instances].sort(
+    (left, right) => Number(right.namesTarget) - Number(left.namesTarget),
+  );
+  const annotationEntries = Object.entries(annotations);
+  return (
+    <div className="space-y-2.5">
+      <div className="flex flex-wrap items-center gap-1.5">
+        {rule.state ? (
+          <Badge severity={alertStateSeverity(rule.state)} size="sm">
+            {rule.state}
+          </Badge>
+        ) : null}
+        {rule.labels.severity ? (
+          <Badge severity={severityBadge(rule.labels.severity)} size="sm">
+            severity {rule.labels.severity}
+          </Badge>
+        ) : null}
+        <Badge tone="structural" size="sm">
+          {rule.group}
+        </Badge>
+        {health && health !== "ok" ? (
+          <Badge severity={health === "err" ? "error" : "neutral"} size="sm">
+            health {health}
+          </Badge>
+        ) : null}
+      </div>
+      {ordered.length > 0 ? (
+        <ol className="max-h-64 space-y-1.5 overflow-y-auto pr-1">
+          {ordered.map((instance, index) => {
+            const labels = Object.entries(instance.labels).filter(
+              ([key]) => key !== "alertname" && key !== "severity",
+            );
+            const hidden = labels.length - VISIBLE_ALERT_LABELS;
+            return (
+              <li
+                key={`${instance.state}-${index}-${labels.map(([k, v]) => `${k}=${v}`).join(",")}`}
+                className="rounded-md border border-theme-border/70 bg-theme-base/30 px-2.5 py-2"
+              >
+                <div className="flex flex-wrap items-center gap-1.5">
+                  <Badge
+                    severity={alertStateSeverity(instance.state)}
+                    size="sm"
+                  >
+                    {instance.state}
+                  </Badge>
+                  {instance.namesTarget ? (
+                    <Badge severity="info" size="sm">
+                      names this resource
+                    </Badge>
+                  ) : null}
+                  {instance.value ? (
+                    <span className="font-mono text-xs text-theme-text-secondary">
+                      value {instance.value}
+                    </span>
+                  ) : null}
+                  {instance.activeAt ? (
+                    <Tooltip
+                      content={new Date(instance.activeAt).toLocaleString()}
+                      delay={150}
+                      position="left"
+                      wrapperClassName="ml-auto"
+                    >
+                      <time
+                        dateTime={instance.activeAt}
+                        className="text-xs text-theme-text-tertiary"
+                      >
+                        active {formatRelativeAgeTime(instance.activeAt)}
+                      </time>
+                    </Tooltip>
+                  ) : null}
+                </div>
+                {labels.length > 0 ? (
+                  <div className="mt-1.5 flex flex-wrap gap-1 font-mono text-[11px] text-theme-text-secondary">
+                    {labels
+                      .slice(0, VISIBLE_ALERT_LABELS)
+                      .map(([key, value]) => (
+                        <span
+                          key={key}
+                          className="rounded bg-theme-base px-1.5 py-0.5 [overflow-wrap:anywhere]"
+                        >
+                          {key}={value}
+                        </span>
+                      ))}
+                    {hidden > 0 ? (
+                      <span className="px-1 py-0.5 text-theme-text-tertiary">
+                        +{hidden} more
+                      </span>
+                    ) : null}
+                  </div>
+                ) : null}
+              </li>
+            );
+          })}
+        </ol>
+      ) : (
+        <p className="text-xs italic text-theme-text-tertiary">
+          No active instances were reported for this rule.
+        </p>
+      )}
+      {annotationEntries.length > 0 ? (
+        <dl className="space-y-1 text-xs">
+          {annotationEntries.map(([key, value]) => (
+            <div key={key} className="flex min-w-0 gap-2">
+              <dt className="shrink-0 text-theme-text-tertiary">{key}</dt>
+              <dd className="min-w-0 leading-relaxed text-theme-text-secondary [overflow-wrap:anywhere]">
+                {value}
+              </dd>
+            </div>
+          ))}
+        </dl>
+      ) : null}
+      {rule.query ? (
+        <TerminalBlock label="Rule expression">{rule.query}</TerminalBlock>
+      ) : null}
+    </div>
+  );
+}
+
+function helmStatusSeverity(status: string) {
+  const normalized = status.toLowerCase();
+  if (normalized === "deployed") return "success" as const;
+  if (normalized.includes("failed")) return "error" as const;
+  if (normalized.startsWith("pending") || normalized === "uninstalling")
+    return "info" as const;
+  return "warning" as const;
+}
+
+function HelmBody({ data }: { data: EvidenceDataOf<"helm"> }) {
+  const { onOpenResource } = useContext(EvidenceNavigationContext);
+  const { release } = data;
+  const operation = release.lastOperation;
+  return (
+    <div className="space-y-3">
+      <div className="flex flex-wrap items-center gap-1.5">
+        <Badge severity={helmStatusSeverity(release.status)} size="sm">
+          {release.status}
+        </Badge>
+        <Badge tone="structural" size="sm">
+          {release.chart}
+          {release.chartVersion ? ` ${release.chartVersion}` : ""}
+        </Badge>
+        <Badge tone="structural" size="sm">
+          revision {release.revision}
+        </Badge>
+        {release.appVersion ? (
+          <Badge tone="note" size="sm">
+            app {release.appVersion}
+          </Badge>
+        ) : null}
+        {release.resourceHealth ? (
+          <Badge
+            severity={
+              mapHealthToTone(release.resourceHealth) === "healthy"
+                ? "success"
+                : mapHealthToTone(release.resourceHealth) === "unhealthy"
+                  ? "error"
+                  : "warning"
+            }
+            size="sm"
+          >
+            resources {release.resourceHealth}
+          </Badge>
+        ) : null}
+        <Tooltip
+          content={new Date(release.updated).toLocaleString()}
+          delay={150}
+          position="left"
+          wrapperClassName="ml-auto"
+        >
+          <time
+            dateTime={release.updated}
+            className="text-xs text-theme-text-tertiary"
+          >
+            updated {formatRelativeAgeTime(release.updated)}
+          </time>
+        </Tooltip>
+      </div>
+      {release.healthIssue ? (
+        <p className="text-xs leading-relaxed text-warning-text">
+          {release.healthIssue}
+        </p>
+      ) : null}
+      {release.healthSummary &&
+      release.healthSummary !== release.healthIssue ? (
+        <p className="text-xs leading-relaxed text-theme-text-secondary">
+          {release.healthSummary}
+        </p>
+      ) : null}
+      {operation ? (
+        <div className="rounded-md border border-theme-border bg-theme-base/40 px-2.5 py-2">
+          <div className="flex flex-wrap items-center gap-1.5">
+            <span className="text-xs font-semibold uppercase tracking-wide text-theme-text-tertiary">
+              Last operation
+            </span>
+            <Badge tone="note" size="sm">
+              {operation.kind.replaceAll("_", " ")}
+            </Badge>
+            <Badge
+              severity={
+                operation.status === "completed"
+                  ? "success"
+                  : operation.status === "failed"
+                    ? "error"
+                    : "warning"
+              }
+              size="sm"
+            >
+              {operation.status.replaceAll("_", " ")}
+            </Badge>
+          </div>
+          {operation.message ? (
+            <p className="mt-1 text-xs leading-relaxed text-theme-text-secondary [overflow-wrap:anywhere]">
+              {operation.message}
+            </p>
+          ) : null}
+        </div>
+      ) : null}
+      {release.description ? (
+        <p className="text-xs text-theme-text-tertiary [overflow-wrap:anywhere]">
+          {release.description}
+        </p>
+      ) : null}
+      {release.storageNamespace &&
+      release.storageNamespace !== release.namespace ? (
+        <p className="text-xs text-theme-text-tertiary">
+          Release metadata stored in namespace {release.storageNamespace}
+        </p>
+      ) : null}
+      {release.managedByFluxHelmRelease ? (
+        <p className="text-xs text-theme-text-tertiary">
+          Managed by Flux HelmRelease {release.managedByFluxHelmRelease}
+        </p>
+      ) : null}
+      {release.resources.length > 0 ? (
+        <div className="max-h-52 overflow-y-auto rounded-md border border-theme-border">
+          {release.resources.map((owned, index) => (
+            <div
+              key={`${owned.kind}-${owned.namespace}-${owned.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(
+                  owned.issue ? "unhealthy" : (owned.status ?? ""),
+                )}
+                className="shrink-0"
+              />
+              <Badge tone="structural" size="sm">
+                {owned.kind}
+              </Badge>
+              <span className="min-w-0 flex-1">
+                <span className="block truncate font-mono text-xs">
+                  <ResourceLink
+                    name={owned.name}
+                    kind={owned.kind}
+                    namespace={owned.namespace}
+                    group={
+                      owned.apiVersion
+                        ? apiVersionToGroup(owned.apiVersion)
+                        : undefined
+                    }
+                    label={`${owned.namespace ? `${owned.namespace}/` : ""}${owned.name}`}
+                    onNavigate={
+                      owned.apiVersion && onOpenResource
+                        ? (ref) => onOpenResource(ref)
+                        : undefined
+                    }
+                  />
+                </span>
+                {owned.issue ? (
+                  <span className="block truncate text-xs text-warning-text">
+                    {owned.issue}
+                  </span>
+                ) : owned.summary || owned.message ? (
+                  <span className="block truncate text-xs text-theme-text-tertiary">
+                    {owned.summary || owned.message}
+                  </span>
+                ) : null}
+              </span>
+              {owned.ready || owned.status ? (
+                <span className="ml-auto shrink-0 font-mono text-xs text-theme-text-tertiary">
+                  {owned.ready || owned.status}
+                </span>
+              ) : null}
+            </div>
+          ))}
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+function PermissionsBody({ data }: { data: EvidenceDataOf<"permissions"> }) {
+  const { subject, accessCheck } = data;
+  const subjectBadges = (
+    <>
+      <Badge tone="structural" size="sm">
+        {subject.kind}
+      </Badge>
+      <span className="font-mono text-xs text-theme-text-secondary">
+        {subject.namespace ? `${subject.namespace}/` : ""}
+        {subject.name}
+      </span>
+    </>
+  );
+  if (accessCheck) {
+    const facts = [
+      ["Verb", accessCheck.verb],
+      ["Resource", accessCheck.resource],
+      ["Subresource", accessCheck.subresource],
+      ["API group", accessCheck.group || "core"],
+      ["Namespace", accessCheck.namespace || "cluster-wide"],
+      ["Name", accessCheck.resourceName],
+    ] as const;
+    return (
+      <div className="space-y-2.5">
+        <div className="flex flex-wrap items-center gap-1.5">
+          {subjectBadges}
+          <Badge
+            severity={accessCheck.allowed ? "success" : "warning"}
+            size="sm"
+          >
+            {accessCheck.allowed
+              ? "allowed"
+              : accessCheck.denied
+                ? "denied"
+                : "not allowed"}
+          </Badge>
+        </div>
+        <dl className="flex flex-wrap gap-x-6 gap-y-2 text-xs">
+          {facts.map(([label, value]) => (
+            <ResourceFact key={label} label={label} value={value} />
+          ))}
+        </dl>
+        {accessCheck.reason ? (
+          <p className="text-xs leading-relaxed text-theme-text-secondary [overflow-wrap:anywhere]">
+            {accessCheck.reason}
+          </p>
+        ) : null}
+        {accessCheck.evaluationError ? (
+          <p className="text-xs leading-relaxed text-semantic-error">
+            {accessCheck.evaluationError}
+          </p>
+        ) : null}
+      </div>
+    );
+  }
+  const bindings = data.bindings ?? [];
+  const usedByPods = data.usedByPods ?? [];
+  return (
+    <div className="space-y-2.5">
+      <div className="flex flex-wrap items-center gap-1.5">
+        {subjectBadges}
+        <Badge tone="note" size="sm">
+          {data.flatRulesCount ?? 0}
+          {data.truncated ? "+" : ""} effective rules
+        </Badge>
+        {data.truncated ? (
+          <Badge severity="warning" size="sm">
+            rule list truncated
+          </Badge>
+        ) : null}
+      </div>
+      {bindings.length > 0 ? (
+        <div className="max-h-52 overflow-y-auto rounded-md border border-theme-border">
+          {bindings.map((binding, index) => (
+            <div
+              key={`${binding.bindingKind}-${binding.bindingNamespace ?? ""}-${binding.bindingName}`}
+              className={clsx(
+                "flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1 px-2.5 py-1.5 text-xs",
+                index > 0 && "border-t border-theme-border/60",
+              )}
+            >
+              <Badge tone="structural" size="sm">
+                {binding.bindingKind}
+              </Badge>
+              <span className="min-w-0 truncate font-mono text-theme-text-secondary">
+                {binding.bindingNamespace ? `${binding.bindingNamespace}/` : ""}
+                {binding.bindingName}
+              </span>
+              <span className="text-theme-text-tertiary">→</span>
+              <Badge tone="structural" size="sm">
+                {binding.roleKind}
+              </Badge>
+              <span className="min-w-0 truncate font-mono text-theme-text-primary">
+                {binding.roleNamespace ? `${binding.roleNamespace}/` : ""}
+                {binding.roleName}
+              </span>
+              <span className="ml-auto shrink-0 font-mono text-theme-text-tertiary">
+                {binding.rulesCount} rule{binding.rulesCount === 1 ? "" : "s"}
+              </span>
+              {binding.inheritedFromGroup ? (
+                <Badge tone="note" size="sm">
+                  via {binding.inheritedFromGroup}
+                </Badge>
+              ) : null}
+            </div>
+          ))}
+        </div>
+      ) : (
+        <p className="text-xs italic text-theme-text-tertiary">
+          No RoleBinding or ClusterRoleBinding grants this subject anything.
+        </p>
+      )}
+      {usedByPods.length > 0 ? (
+        <p className="text-xs leading-relaxed text-theme-text-secondary [overflow-wrap:anywhere]">
+          <span className="text-theme-text-tertiary">Used by pods: </span>
+          <span className="font-mono">{usedByPods.join(", ")}</span>
+          {data.podsTotal && data.podsTotal > usedByPods.length
+            ? ` and ${data.podsTotal - usedByPods.length} more`
+            : ""}
+        </p>
+      ) : null}
+    </div>
+  );
+}
+
 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: (
@@ -2021,6 +3258,7 @@ function RevisionHistory({
 }) {
   const [open, setOpen] = useState(false);
   const regionId = useId();
+  const { metricsMarkersBySource } = useContext(EvidenceNavigationContext);
   const { elementRef, revealAfterToggle } =
     useDisclosureReveal<HTMLDivElement>();
   useLayoutEffect(() => {
@@ -2044,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>
@@ -2087,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." : ""}`}
@@ -2108,10 +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.";
   }
+  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">
@@ -2184,33 +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;
-  }
+  return EVIDENCE_KIND_TRAITS[type].icon;
 }
 
 function severityBadge(value: string) {
@@ -2244,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";