@skyhook-io/radar-app 1.13.4 → 1.14.0

package/src/components/resource/PrometheusChartsGrid.tsx

@@ -1,12 +1,18 @@
-import { useMemo, useState } from 'react'
-import { Loader2, Wifi, WifiOff } from 'lucide-react'
+import { useMemo } from "react";
+import { useSearchParams } from "react-router-dom";
+import { Loader2, Wifi, WifiOff } from "lucide-react";
 import {
   AreaChart,
   SeriesLegend,
   computeSaturation,
+  describePodCoverage,
   type ReferenceLine,
-} from '@skyhook-io/k8s-ui/components/charts'
-import { SEVERITY_BADGE, SEVERITY_TEXT, type Severity } from '@skyhook-io/k8s-ui/utils/badge-colors'
+} from "@skyhook-io/k8s-ui/components/charts";
+import {
+  SEVERITY_BADGE,
+  SEVERITY_TEXT,
+  type Severity,
+} from "@skyhook-io/k8s-ui/utils/badge-colors";
 import {
   usePrometheusStatus,
   usePrometheusConnect,
@@ -14,7 +20,7 @@ import {
   useAutoPromConnect,
   type PrometheusMetricCategory,
   type PrometheusTimeRange,
-} from '../../api/client'
+} from "../../api/client";
 import {
   MetricsSummary,
   TIME_RANGES,
@@ -22,24 +28,34 @@ import {
   NODE_CATEGORIES,
   computeRequestLimitLines,
   type CategoryDef,
-} from './PrometheusCharts'
-import { RestartEventLane } from './RestartChart'
-import { Tooltip } from '../ui/Tooltip'
+} from "./PrometheusCharts";
+import { RestartEventLane } from "./RestartChart";
+import { Tooltip } from "../ui/Tooltip";
+import { WorkloadMetricsSection } from "./WorkloadMetricsSection";
+import { RightsizingStrip } from "./RightsizingStrip";
+import { useNavCustomization } from "../../context/NavCustomization";
 
 // Used when MetricsTabContent is in expanded (full-screen) mode. Drawer mode
 // uses the single-chart tabbed `PrometheusCharts` instead — drawer width
 // can't fit the grid cleanly.
 export interface PrometheusChartsGridProps {
-  kind: string
-  namespace: string
-  name: string
+  kind: string;
+  namespace: string;
+  name: string;
   /** Optional full K8s resource for request/limit overlay derivation. */
-  resource?: any
+  resource?: any;
 }
 
 const SUPPORTED_KINDS = new Set([
-  'Pod', 'Deployment', 'StatefulSet', 'DaemonSet', 'ReplicaSet', 'Job', 'CronJob', 'Node',
-])
+  "Pod",
+  "Deployment",
+  "StatefulSet",
+  "DaemonSet",
+  "ReplicaSet",
+  "Job",
+  "CronJob",
+  "Node",
+]);
 
 export function PrometheusChartsGrid({
   kind,
@@ -47,29 +63,34 @@ export function PrometheusChartsGrid({
   name,
   resource,
 }: PrometheusChartsGridProps) {
-  useAutoPromConnect()
-  const { data: status, isLoading: statusLoading } = usePrometheusStatus()
-  const connectMutation = usePrometheusConnect()
-  const isConnected = status?.connected === true
-  const isSupported = SUPPORTED_KINDS.has(kind)
-  const showRestartLane = isSupported && kind !== 'Node'
+  useAutoPromConnect();
+  const { data: status, isLoading: statusLoading } = usePrometheusStatus();
+  const connectMutation = usePrometheusConnect();
+  const isConnected = status?.connected === true;
+  const isSupported = SUPPORTED_KINDS.has(kind);
+  const isWorkload = ["Deployment", "StatefulSet", "DaemonSet"].includes(kind);
+  const showRestartLane = isSupported && kind !== "Node";
 
-  const [timeRange, setTimeRange] = useState<PrometheusTimeRange>('1h')
+  const settingsAvailable = !useNavCustomization().embedded;
+  const [searchParams, setSearchParams] = useSearchParams();
+  const timeRange = TIME_RANGES.find((range) => range.value === searchParams.get("metricsRange"))?.value ?? "1h";
 
-  const categories = kind === 'Node' ? NODE_CATEGORIES : WORKLOAD_CATEGORIES
+  const categories = kind === "Node" ? NODE_CATEGORIES : WORKLOAD_CATEGORIES;
 
   // CPU + memory get reference-line overlays when a resource is provided.
   // Computed once at the parent so each panel can stay otherwise generic.
   const cpuRefLines = useMemo<ReferenceLine[] | undefined>(
-    () => (resource ? computeRequestLimitLines(resource, kind, 'cpu') : undefined),
+    () =>
+      resource ? computeRequestLimitLines(resource, kind, "cpu") : undefined,
     [resource, kind],
-  )
+  );
   const memRefLines = useMemo<ReferenceLine[] | undefined>(
-    () => (resource ? computeRequestLimitLines(resource, kind, 'memory') : undefined),
+    () =>
+      resource ? computeRequestLimitLines(resource, kind, "memory") : undefined,
     [resource, kind],
-  )
+  );
 
-  if (!isSupported) return null
+  if (!isSupported) return null;
 
   if (statusLoading) {
     return (
@@ -77,7 +98,16 @@ export function PrometheusChartsGrid({
         <Loader2 className="w-5 h-5 animate-spin mr-2" />
         Checking Prometheus availability...
       </div>
-    )
+    );
+  }
+
+  if (!isConnected && status?.discovering) {
+    return (
+      <div className="flex items-center justify-center py-12 text-theme-text-tertiary">
+        <Loader2 className="w-5 h-5 animate-spin mr-2" />
+        Discovering Prometheus…
+      </div>
+    );
   }
 
   if (!isConnected) {
@@ -85,10 +115,14 @@ export function PrometheusChartsGrid({
       <div className="flex flex-col items-center justify-center py-12 gap-4">
         <WifiOff className="w-10 h-10 text-theme-text-quaternary" />
         <div className="text-center">
-          <p className="text-sm text-theme-text-secondary mb-1">Prometheus not connected</p>
+          <p className="text-sm text-theme-text-secondary mb-1">
+            Prometheus not connected
+          </p>
           <p className="text-xs text-theme-text-tertiary mb-4">
-            {status?.error || 'Connect to view historical CPU, memory, and network metrics'}
+            {status?.error ||
+              "Connect to view historical CPU, memory, and network metrics"}
           </p>
+          <div className="flex flex-wrap items-center justify-center gap-3">
           <button
             onClick={() => connectMutation.mutate()}
             disabled={connectMutation.isPending}
@@ -101,107 +135,193 @@ export function PrometheusChartsGrid({
             )}
             Discover Prometheus
           </button>
+          {settingsAvailable && <button
+            type="button"
+            className="text-sm text-accent hover:underline"
+            onClick={() => window.dispatchEvent(new CustomEvent('radar:open-settings', { detail: { section: 'prometheus' } }))}
+          >Configure metrics</button>}
+          </div>
+          {!settingsAvailable && <p className="mt-3 text-xs text-theme-text-tertiary">Ask your operator to configure the metrics connection for this cluster.</p>}
+          {isWorkload && <a className="mt-3 inline-block text-xs text-accent hover:underline" href="https://github.com/skyhook-io/radar/blob/main/docs/workload-metrics.md#what-each-chart-needs" target="_blank" rel="noopener noreferrer">What each chart needs</a>}
         </div>
       </div>
-    )
+    );
   }
 
-  const findCategory = (key: PrometheusMetricCategory): CategoryDef | undefined =>
-    categories.find(c => c.key === key)
+  const findCategory = (
+    key: PrometheusMetricCategory,
+  ): CategoryDef | undefined => categories.find((c) => c.key === key);
 
-  const primaryCats: { def: CategoryDef; refLines?: ReferenceLine[] }[] = []
-  const cpu = findCategory('cpu')
-  if (cpu) primaryCats.push({ def: cpu, refLines: cpuRefLines })
-  const mem = findCategory('memory')
-  if (mem) primaryCats.push({ def: mem, refLines: memRefLines })
-  if (kind !== 'Node') {
-    const rx = findCategory('network_rx')
-    if (rx) primaryCats.push({ def: rx })
-    const tx = findCategory('network_tx')
-    if (tx) primaryCats.push({ def: tx })
+  const primaryCats: { def: CategoryDef; refLines?: ReferenceLine[] }[] = [];
+  const cpu = findCategory("cpu");
+  if (cpu) primaryCats.push({ def: cpu, refLines: cpuRefLines });
+  const mem = findCategory("memory");
+  if (mem) primaryCats.push({ def: mem, refLines: memRefLines });
+  if (kind !== "Node") {
+    const rx = findCategory("network_rx");
+    if (rx) primaryCats.push({ def: rx });
+    const tx = findCategory("network_tx");
+    if (tx) primaryCats.push({ def: tx });
   }
-  const disk = findCategory('filesystem')
-  const chartPanels = disk ? [...primaryCats, { def: disk }] : primaryCats
+  const disk = findCategory("filesystem");
+  const chartPanels = disk ? [...primaryCats, { def: disk }] : primaryCats;
+  const renderPanel = ({ def, refLines }: { def: CategoryDef; refLines?: ReferenceLine[] }) => (
+    <MetricsPanel key={def.key} category={def} kind={kind} namespace={namespace} name={name} timeRange={timeRange} referenceLines={refLines} />
+  );
 
-  return (
-    <div className="flex flex-col h-full overflow-auto">
-      <div className="flex shrink-0 justify-end px-4 pt-3">
-        <select
+  const rangeControl = <select
           aria-label="Metrics time range"
           value={timeRange}
-          onChange={e => setTimeRange(e.target.value as PrometheusTimeRange)}
-          className="rounded-md border border-theme-border bg-theme-elevated px-2 py-1 text-xs text-theme-text-secondary shadow-theme-sm focus:outline-none focus:ring-1 focus:ring-accent/50"
+          onChange={(e) => {
+            const next = new URLSearchParams(searchParams);
+            next.set("metricsRange", e.target.value);
+            setSearchParams(next, { replace: true });
+          }}
+          className="ml-auto rounded-md border border-theme-border bg-theme-elevated px-2 py-1 text-xs text-theme-text-secondary shadow-theme-sm focus:outline-none focus:ring-1 focus:ring-accent/50"
         >
-          {TIME_RANGES.map(tr => (
-            <option key={tr.value} value={tr.value}>{tr.label}</option>
+          {TIME_RANGES.map((tr) => (
+            <option key={tr.value} value={tr.value}>
+              {tr.label}
+            </option>
           ))}
-        </select>
-      </div>
+        </select>;
+
+  return (
+    <div className="flex flex-col min-w-0 w-full h-full overflow-auto">
+      {!isWorkload && <div className="flex shrink-0 items-center justify-between gap-3 px-4 pt-3">{rangeControl}</div>}
+
+      {isWorkload && (
+        <WorkloadMetricsSection key={`${kind}/${namespace}/${name}`} kind={kind} namespace={namespace} name={name} range={timeRange}
+          controls={rangeControl}
+          cpuReferenceLines={cpuRefLines} memoryReferenceLines={memRefLines}
+          nameMatchedCharts={{ cpu: cpu && renderPanel({ def: cpu }), memory: mem && renderPanel({ def: mem }) }}
+          restartLane={showRestartLane && <div className="mb-3"><RestartEventLane kind={kind} namespace={namespace} name={name} range={timeRange} /></div>} />
+      )}
 
       {/* Restart lane sits above the grid so its markers visually align with
           the time axis of the charts below. */}
-      {showRestartLane && (
+      {showRestartLane && !isWorkload && (
         <div className="px-4 pt-3">
-          <RestartEventLane kind={kind} namespace={namespace} name={name} range={timeRange} />
-        </div>
-      )}
-
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-3 p-4">
-        {chartPanels.map(({ def, refLines }) => (
-          <MetricsPanel
-            key={def.key}
-            category={def}
+          <RestartEventLane
             kind={kind}
             namespace={namespace}
             name={name}
-            timeRange={timeRange}
-            referenceLines={refLines}
+            range={timeRange}
           />
-        ))}
+        </div>
+      )}
+
+      <div className="metrics-layout min-w-0 px-4 pt-4">
+        {isWorkload && <h3 className="mb-2 text-sm font-semibold text-theme-text-primary">Network and storage</h3>}
+        {isWorkload && <details className="mb-2 text-xs text-theme-text-secondary">
+          <summary className="cursor-pointer">Pod-name matched · identity unverified</summary>
+          <p className="mt-2 max-w-2xl text-sm leading-relaxed">These charts match current Pod names, independently of the identity-checked charts above. Matching names in a shared backend may include another cluster.</p>
+        </details>}
+        <div className="metrics-chart-grid">
+          {chartPanels.filter(({ def }) => !isWorkload || (def.key !== "cpu" && def.key !== "memory")).map(renderPanel)}
+        </div>
       </div>
+
+      <PodCoverageNote
+        kind={kind}
+        namespace={namespace}
+        name={name}
+        timeRange={timeRange}
+        category={isWorkload ? "network_rx" : "cpu"}
+      />
+      {["Deployment", "StatefulSet", "DaemonSet"].includes(kind) && (
+        <div className="px-4 pb-4"><RightsizingStrip kind={kind} namespace={namespace} name={name} /></div>
+      )}
     </div>
-  )
+  );
+}
+
+function PodCoverageNote({
+  kind,
+  namespace,
+  name,
+  timeRange,
+  category,
+}: {
+  kind: string;
+  namespace: string;
+  name: string;
+  timeRange: PrometheusTimeRange;
+  category: PrometheusMetricCategory;
+}) {
+  const { data } = usePrometheusResourceMetrics(
+    kind,
+    namespace,
+    name,
+    category,
+    timeRange,
+    true,
+  );
+  const note = data ? describePodCoverage(data) : undefined;
+  if (!note) return null;
+  return <p className="px-4 pb-4 text-xs text-theme-text-tertiary">{note}</p>;
 }
 
 interface MetricsPanelProps {
-  category: CategoryDef
-  kind: string
-  namespace: string
-  name: string
-  timeRange: PrometheusTimeRange
-  referenceLines?: ReferenceLine[]
+  category: CategoryDef;
+  kind: string;
+  namespace: string;
+  name: string;
+  timeRange: PrometheusTimeRange;
+  referenceLines?: ReferenceLine[];
 }
 
-function MetricsPanel({ category, kind, namespace, name, timeRange, referenceLines }: MetricsPanelProps) {
-  const { data: metrics, isLoading, error } = usePrometheusResourceMetrics(
-    kind, namespace, name, category.key, timeRange, true,
-  )
+function MetricsPanel({
+  category,
+  kind,
+  namespace,
+  name,
+  timeRange,
+  referenceLines,
+}: MetricsPanelProps) {
+  const {
+    data: metrics,
+    isLoading,
+    error,
+  } = usePrometheusResourceMetrics(
+    kind,
+    namespace,
+    name,
+    category.key,
+    timeRange,
+    true,
+  );
 
-  const series = metrics?.result?.series
-  const hasData = (series?.length ?? 0) > 0
+  const series = metrics?.result?.series;
+  const hasData = (series?.length ?? 0) > 0;
 
   // "% of limit / request" derived from current peak vs reference lines.
   // Without this, a low-utilization workload with a high limit looks like
   // an empty chart — the user can't tell healthy from starved at a glance.
-  const saturation = hasData && series && referenceLines
-    ? computeSaturation(series, referenceLines)
-    : undefined
+  const saturation =
+    hasData && series && referenceLines
+      ? computeSaturation(series, referenceLines)
+      : undefined;
 
   return (
-    <section className="rounded-lg border border-theme-border bg-theme-surface/30 p-3 flex flex-col min-h-[260px]">
-      <header className="flex items-center justify-between mb-2 gap-3">
-        <div className="flex items-center gap-2">
+    <section className="metrics-chart rounded-lg border border-theme-border bg-theme-surface/30 p-3 flex flex-col min-w-0">
+      <header className="flex flex-wrap items-center justify-between mb-2 gap-3">
+        <div className="flex flex-wrap items-center gap-2">
           <h3 className="text-xs font-medium text-theme-text-secondary uppercase tracking-wide">
             {category.label}
           </h3>
           {saturation && <SaturationChip {...saturation} />}
         </div>
         {hasData && series && (
-          <MetricsSummary series={series} category={category} unit={metrics!.unit} />
+          <MetricsSummary
+            series={series}
+            category={category}
+            unit={metrics!.unit}
+          />
         )}
       </header>
 
-      <div className="flex-1 min-h-[200px]">
+      <div className="min-w-0">
         {isLoading ? (
           <PanelLoading />
         ) : error ? (
@@ -214,6 +334,7 @@ function MetricsPanel({ category, kind, namespace, name, timeRange, referenceLin
               fillColor={category.fillColor}
               unit={metrics!.unit}
               referenceLines={referenceLines}
+              layout="dashboard"
             />
             {series.length > 1 && (
               <div className="mt-1.5">
@@ -226,45 +347,66 @@ function MetricsPanel({ category, kind, namespace, name, timeRange, referenceLin
         )}
       </div>
     </section>
-  )
+  );
 }
 
-function SaturationChip({ ratio, against }: { ratio: number; against: 'limit' | 'request' }) {
+function SaturationChip({
+  ratio,
+  against,
+}: {
+  ratio: number;
+  against: "limit" | "request";
+}) {
   // Thresholds match the rightsizing tone vocabulary: amber from 75% (start
   // watching), red at 90% (the same OOM-risk boundary the backend uses for
   // memory in classifyRightsizing).
-  const tone: Severity = ratio >= 0.9 ? 'error' : ratio >= 0.75 ? 'warning' : ratio < 0.05 ? 'info' : 'neutral'
-  const label = `${(ratio * 100).toFixed(ratio < 0.1 ? 1 : 0)}% of ${against}`
-  return <span className={`badge badge-sm ${SEVERITY_BADGE[tone]}`}>{label}</span>
+  const tone: Severity =
+    ratio >= 0.9
+      ? "error"
+      : ratio >= 0.75
+        ? "warning"
+        : ratio < 0.05
+          ? "info"
+          : "neutral";
+  const label = `${(ratio * 100).toFixed(ratio < 0.1 ? 1 : 0)}% of ${against}`;
+  return (
+    <span className={`badge badge-sm ${SEVERITY_BADGE[tone]}`}>{label}</span>
+  );
 }
 
 function PanelLoading() {
   return (
-    <div className="flex items-center justify-center h-full min-h-[160px] text-theme-text-tertiary text-xs">
+    <div className="flex items-center justify-center h-[240px] text-theme-text-tertiary text-xs">
       <Loader2 className="w-4 h-4 animate-spin mr-2" />
       Loading…
     </div>
-  )
+  );
 }
 
 function PanelError({ message }: { message: string }) {
   return (
-    <div className={`flex flex-col items-center justify-center h-full min-h-[160px] ${SEVERITY_TEXT.warning} text-xs px-3 text-center`}>
+    <div
+      className={`flex flex-col items-center justify-center h-[240px] ${SEVERITY_TEXT.warning} text-xs px-3 text-center`}
+    >
       Query failed
       <Tooltip content={message} wrapperClassName="!block w-full">
-      <span className="text-theme-text-quaternary mt-0.5 line-clamp-2">{message}</span>
+        <span className="text-theme-text-quaternary mt-0.5 line-clamp-2">
+          {message}
+        </span>
       </Tooltip>
     </div>
-  )
+  );
 }
 
 function PanelNoData({ hint }: { hint?: string }) {
   return (
-    <div className="flex flex-col items-center justify-center h-full min-h-[160px] text-theme-text-tertiary text-xs px-3 text-center">
+    <div className="flex flex-col items-center justify-center h-[240px] text-theme-text-tertiary text-xs px-3 text-center">
       No data
-      {hint && <span className="text-theme-text-quaternary mt-1 max-w-xs">{hint}</span>}
+      {hint && (
+        <span className="text-theme-text-quaternary mt-1 max-w-xs">{hint}</span>
+      )}
     </div>
-  )
+  );
 }
 
-export { isPrometheusSupported } from './PrometheusCharts'
+export { isPrometheusSupported } from "./PrometheusCharts";

package/src/components/resource/RightsizingStrip.test.ts

@@ -107,3 +107,41 @@ describe('rightsizing presentation', () => {
     expect(RIGHTSIZING_DOCS_URL).toContain('/features/rightsizing')
   })
 })
+
+describe('live pod inventory', () => {
+  it('qualifies a memory row when the pod list could not be read', () => {
+    const explanation = getRightsizingExplanation(
+      row({ resource: 'memory', liveInventoryUnavailable: true }),
+    )
+    expect(explanation).toContain('could not read')
+    expect(explanation).toContain('out-of-memory restarts')
+  })
+
+  it('adds the caveat to a suppression reason instead of replacing it', () => {
+    const explanation = getRightsizingExplanation(
+      row({ resource: 'memory', recommendationReason: 'oom_evidence', liveInventoryUnavailable: true }),
+    )
+    expect(explanation).toContain('OOM evidence exists')
+    expect(explanation).toContain('could not read')
+  })
+
+  it('keeps the caveat on a staged reduction, where an unchecked pod matters most', () => {
+    const explanation = getRightsizingExplanation(
+      row({
+        resource: 'memory',
+        liveInventoryUnavailable: true,
+        reductionLimited: true,
+        calculatedRequest: '256Mi',
+        recommendedRequest: '384Mi',
+      }),
+    )
+    expect(explanation).toContain('conservative next step')
+    expect(explanation).toContain('could not read')
+  })
+
+  it('says nothing when the pods were read', () => {
+    expect(getRightsizingExplanation(row({ resource: 'memory' })) ?? '').not.toContain(
+      'could not read',
+    )
+  })
+})

package/src/components/resource/RightsizingStrip.tsx

@@ -328,16 +328,28 @@ export function getRightsizingExplanation(row: RightsizingRow): string | undefin
     recommended_request_exceeds_limit:
       'The evidence-based request would exceed the current limit; review the limit first.',
   }
+  // A denied pod read leaves currentPodOOM unknown rather than false, so it
+  // qualifies whatever else is said instead of replacing it — including a
+  // staged reduction, which is exactly where an unchecked pod matters most.
+  const inventoryNote =
+    row.liveInventoryUnavailable && row.resource === 'memory'
+      ? "Radar could not read this workload's pods, so it could not check them for out-of-memory restarts."
+      : undefined
+  const qualified = (base: string) => (inventoryNote ? `${base} ${inventoryNote}` : base)
   if (row.reductionLimited && row.calculatedRequest && row.recommendedRequest) {
     const burstNote = row.bursty && row.peak ? ` CPU P99 reached ${row.peak.formatted}.` : ''
-    return `Demand-based target: ${row.calculatedRequest}. Radar suggests ${row.recommendedRequest} as a conservative next step; observe another full window before reducing further.${burstNote}`
+    return qualified(
+      `Demand-based target: ${row.calculatedRequest}. Radar suggests ${row.recommendedRequest} as a conservative next step; observe another full window before reducing further.${burstNote}`,
+    )
   }
   const message = row.queryError
     ? `Partial result: ${row.queryError}.`
     : messages[row.recommendationReason ?? '']
   const throttleUnavailable = row.resource === 'cpu' && !row.throttleAvailable
-  if (!message && !throttleUnavailable) return undefined
-  return message ?? 'CPU throttling metrics are unavailable; no throttling conclusion was drawn.'
+  if (!message && !throttleUnavailable) return inventoryNote
+  return qualified(
+    message ?? 'CPU throttling metrics are unavailable; no throttling conclusion was drawn.',
+  )
 }
 
 function confidenceLabel(row: RightsizingRow) {

package/src/components/resource/WorkloadMetricsHelpDialog.test.tsx

@@ -0,0 +1,79 @@
+import { describe, expect, it } from 'vitest'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { WorkloadMetricsHelpContent } from './WorkloadMetricsHelpDialog'
+import type { WorkloadMetrics } from '../../api/workloadMetrics'
+
+const data = (attribution: Record<string, string>): WorkloadMetrics => ({
+  attribution, state: 'available', sources: [], history: {}, comparison: {}, panels: {},
+  pods: 2, podsTotal: 2, start: 100, end: 160, stepSeconds: 60, rateWindowSeconds: 300,
+})
+
+describe('Metrics help', () => {
+  it('groups only identical resource evidence, not HTTP observers or different methods', () => {
+    const html = renderToStaticMarkup(<WorkloadMetricsHelpContent pending={false} data={data({
+      cpu: 'UID match', memory: 'UID match', throttling: 'Label match', beyla: 'UID match', istio: 'No observations',
+    })} />)
+    expect(html).toContain('CPU / Memory')
+    expect(html).not.toContain('CPU / Memory / Throttling')
+    expect(html).toContain('Beyla · HTTP requests')
+    expect(html).toContain('Istio · HTTP requests')
+    expect(html.match(/UID match/g)).toHaveLength(2)
+    expect(html).toContain('Label match')
+    expect(html).toContain('No observations')
+  })
+  it('separates asserted scope and history from current-Pod matching', () => {
+    const html = renderToStaticMarkup(<WorkloadMetricsHelpContent pending={false} data={data({ scope: 'Operator assertion', history: 'Retained ownership' })} />)
+    expect(html).toContain('Operator-asserted scope')
+    expect(html).toContain('Historical ownership')
+    expect(html).not.toContain('<table')
+    expect(html).not.toContain('No current-Pod matching evidence')
+    expect(html).toContain('Each chart’s history label')
+  })
+  it('keeps operator overrides collapsed and explains their limits', () => {
+    const html = renderToStaticMarkup(<WorkloadMetricsHelpContent pending={false} data={data({})} />)
+    expect(html).toContain('Troubleshooting identity matching')
+    expect(html).toContain('--prometheus-single-cluster')
+    expect(html).toContain('they do not add missing metrics')
+    expect(html).toContain('Leave both unset for automatic matching')
+    expect(html).toContain('it does not scope rightsizing')
+    expect(html).toContain('Standalone CLI:')
+    expect(html).toContain('when starting Radar')
+    expect(html).toContain('traffic.prometheusSingleCluster')
+    expect(html).toContain('traffic.prometheusClusterLabels')
+    expect(html).toContain('In-cluster OSS or Radar Cloud:')
+    expect(html).toContain('not viewer preferences')
+    expect(html).toContain('Desktop does not expose these overrides yet')
+    expect(html).toContain('only alongside a verified scope override')
+    expect(html).not.toMatch(/<details[^>]*\bopen[=> ]/)
+  })
+  it('distinguishes loading, failed refresh and absent evidence', () => {
+    const pending = renderToStaticMarkup(<WorkloadMetricsHelpContent pending />)
+    expect(pending).toContain('Checking the selected metrics')
+    expect(pending).not.toContain('No current-Pod matching evidence')
+    const failed = renderToStaticMarkup(<WorkloadMetricsHelpContent pending={false} error={new Error('Query failed')} data={data({ cpu: 'Previous evidence' })} />)
+    expect(failed).toContain('Query failed')
+    expect(failed).toContain('Evidence below is from the previous response')
+    const empty = renderToStaticMarkup(<WorkloadMetricsHelpContent pending={false} />)
+    expect(empty).toContain('No current-Pod matching evidence is available yet')
+  })
+  it('does not deny historical evidence when there are no current-Pod matches', () => {
+    const html = renderToStaticMarkup(<WorkloadMetricsHelpContent pending={false} data={data({ history: 'Retained ownership is available' })} />)
+    expect(html).toContain('No current-Pod matching evidence')
+    expect(html).toContain('Retained ownership is available')
+  })
+  it.each(['detecting', 'error'] as const)('shows %s comparison independently of usable history', (state) => {
+    const response = data({ history: 'Historical ownership is available' })
+    response.reason = 'History follows retained workload ownership'
+    response.comparison = { cpu: { state, reason: 'Current identity status', unit: 'cores', series: [] } }
+    const html = renderToStaticMarkup(<WorkloadMetricsHelpContent pending={false} data={response} />)
+    expect(html).toContain('Current identity status')
+    expect(html).toContain('Historical ownership is available')
+    expect(html).not.toContain(response.reason)
+    expect(html).not.toContain('No current-Pod matching evidence')
+  })
+  it('describes a first-load failure without implying previous evidence', () => {
+    const html = renderToStaticMarkup(<WorkloadMetricsHelpContent pending={false} error={new Error('Query failed')} />)
+    expect(html).toContain('could not be loaded')
+    expect(html).not.toContain('refreshed')
+  })
+})