@crvouga/atlas 1.7.0 → 1.9.0

package/packages/visualizer/src/evidence/check-detail.tsx

@@ -2,6 +2,7 @@ import { recordingPaths } from '@crvouga/atlas/reports/evidence-types';
 import { checkHistory, type CheckSlot, type HistoryEntry } from '@crvouga/atlas/reports/evidence-view';
 import { flattenFrames } from '@crvouga/atlas/reports/frames';
 import { environmentLabel } from '@crvouga/atlas/reports/layer-axes';
+import { boundaryOf, isProductLatency } from '@crvouga/atlas/reports/latency';
 import type { EvidenceResult } from '@crvouga/atlas/reports/layer-merge';
 import type { ReportStep, RunReport } from '@crvouga/atlas/reports/report-types';
 import { Accordion, Alert, Anchor, Box, Button, Code, Flex, Group, List, Stack, Table, Text, Title } from '@mantine/core';
@@ -435,6 +436,14 @@ function RecordedCheckDetail({ slot, layerId, select, reads, written, pinned, pi
                   against an allowance of {measurement.limit} {measurement.unit}
                 </Text>
               )}
+              {isProductLatency(measurement) && (
+                <Text span inherit c="dimmed">
+                  {' '}
+                  · product latency, {boundaryOf(measurement).label}
+                  {boundaryOf(measurement).state === 'partial' && ` (partial: not ${boundaryOf(measurement).intended})`}
+                  {measurement.outcome !== undefined && measurement.outcome !== 'observed' && ` · ${measurement.outcome}: waited at least this long`}
+                </Text>
+              )}
             </Text>
           );
         })

package/packages/visualizer/src/explorer/ProductLatency.tsx

@@ -0,0 +1,214 @@
+/**
+ * @module Product latency view
+ *
+ * How quickly the product responded to a user, apart from how long the test took. It reads only the measurements a
+ * producer named as product latency (see `@crvouga/atlas/reports/latency`) and shows, for each, its boundaries, unit,
+ * source, group (device, build or day), sample count, budget and breaches, p50 and p95 when enough observations
+ * support them, and a comparison with a chosen baseline that names every difference in instrumentation or
+ * conditions. What the evidence cannot support is withheld with the reason. A test with no named measurement says its
+ * product latency is unknown; its execution time is never shown here.
+ */
+import {
+  compareLatency, formatLatency, latencyReview, LATENCY_GROUPINGS, type LatencyChange, type LatencyGrouping, type LatencyReview, type LatencySummary
+} from '@crvouga/atlas/reports/latency';
+import type { TestResultEntry } from '@crvouga/atlas/reports/test-catalog';
+import { Badge, Box, Code, Flex, List, NativeSelect, Stack, Table, Text, Title } from '@mantine/core';
+import { useMemo, useState } from 'react';
+
+import { plural } from '../evidence/format';
+
+const GROUPING_LABEL: Record<LatencyGrouping, string> = { none: 'Not grouped', device: 'Device', build: 'Build', window: 'Day recorded' };
+
+const sign = (value: number) => (value > 0 ? '+' : value < 0 ? '−' : '');
+
+/** A change as words: `+100 ms (+25%) in p50`. */
+function changeText(change: LatencyChange, unit: string): string {
+  const delta = change.p50 ?? change.p95 ?? change.last;
+  if (!change.comparable || !delta) return 'Not compared';
+  const relative = delta.relative === null ? 'baseline was 0' : `${sign(delta.relative)}${Math.abs(Math.round(delta.relative * 1000) / 10)}%`;
+  const basis = change.basis === 'last' ? 'in the newest observation, not a percentile' : `in ${change.basis}`;
+  return `${sign(delta.absolute)}${formatLatency(Math.abs(delta.absolute), unit)} (${relative}) ${basis}`;
+}
+
+function Figure({ value, unit, summary }: { value: number | undefined; unit: string; summary: LatencySummary }) {
+  return value === undefined ? (
+    <Text span inherit c="dimmed">
+      Withheld{summary.claim ? '' : ' (no boundaries)'}
+    </Text>
+  ) : (
+    <>
+      {summary.lowerBound ? '≥ ' : ''}
+      {formatLatency(value, unit)}
+    </>
+  );
+}
+
+function MetricTable({ summaries, baseline }: { summaries: readonly LatencySummary[]; baseline: LatencySummary | undefined }) {
+  const unit = summaries[0]!.metric.unit;
+  const changes = new Map(summaries.map((summary) => [summary.group, baseline && summary !== baseline ? compareLatency(baseline, summary) : undefined]));
+  return (
+    <Table.ScrollContainer minWidth={560}>
+      <Table>
+        <Table.Thead>
+          <Table.Tr>
+            <Table.Th scope="col">Group</Table.Th>
+            <Table.Th scope="col">Observations</Table.Th>
+            <Table.Th scope="col">p50</Table.Th>
+            <Table.Th scope="col">p95</Table.Th>
+            <Table.Th scope="col">Budget</Table.Th>
+            <Table.Th scope="col">Over budget</Table.Th>
+            {baseline && <Table.Th scope="col">Against baseline</Table.Th>}
+          </Table.Tr>
+        </Table.Thead>
+        <Table.Tbody>
+          {summaries.map((summary) => {
+            const change = changes.get(summary.group);
+            return (
+              <Table.Tr key={summary.group}>
+                <Table.Th scope="row">{summary.group}</Table.Th>
+                <Table.Td>
+                  {summary.samples}
+                  {summary.timeouts + summary.failures > 0 && (
+                    <Text span inherit c="dimmed">
+                      {' '}
+                      ({summary.timeouts + summary.failures} did not complete)
+                    </Text>
+                  )}
+                </Table.Td>
+                <Table.Td>
+                  <Figure value={summary.p50} unit={unit} summary={summary} />
+                </Table.Td>
+                <Table.Td>
+                  <Figure value={summary.p95} unit={unit} summary={summary} />
+                </Table.Td>
+                <Table.Td>{summary.budget === undefined ? <Text span inherit c="dimmed">None set</Text> : formatLatency(summary.budget, unit)}</Table.Td>
+                <Table.Td>
+                  {summary.budget === undefined ? (
+                    '—'
+                  ) : summary.breaches > 0 ? (
+                    <Badge color="red" variant="light">
+                      {summary.breaches} of {summary.samples} over
+                    </Badge>
+                  ) : (
+                    `0 of ${summary.samples}`
+                  )}
+                </Table.Td>
+                {baseline && <Table.Td>{summary === baseline ? 'Baseline' : change ? changeText(change, unit) : '—'}</Table.Td>}
+              </Table.Tr>
+            );
+          })}
+        </Table.Tbody>
+      </Table>
+    </Table.ScrollContainer>
+  );
+}
+
+/** What a reader must not assume, per group and per comparison, as one list. */
+function Notes({ summaries, baseline }: { summaries: readonly LatencySummary[]; baseline: LatencySummary | undefined }) {
+  const lines: string[] = [];
+  for (const summary of summaries) {
+    const name = summaries.length > 1 ? `${summary.group}: ` : '';
+    for (const line of [...summary.gaps, ...summary.withheld]) lines.push(`${name}${line}`);
+    if (baseline && summary !== baseline) {
+      const change = compareLatency(baseline, summary);
+      for (const reason of change.reasons) lines.push(`${summary.group} against ${baseline.group}: ${reason}`);
+      for (const disclosure of change.disclosures) lines.push(`${summary.group} against ${baseline.group}: ${disclosure}`);
+    }
+  }
+  if (!lines.length) return null;
+  return (
+    <List aria-label="What these figures do not show" size="sm" c="dimmed">
+      {lines.map((line, index) => (
+        <List.Item key={index}>{line}</List.Item>
+      ))}
+    </List>
+  );
+}
+
+function Metric({ metric, groups, baselineGroup }: { metric: LatencyReview['metrics'][number]['metric']; groups: readonly LatencySummary[]; baselineGroup: string | undefined }) {
+  const baseline = groups.length > 1 ? (groups.find((summary) => summary.group === baselineGroup) ?? groups[1]) : undefined;
+  const first = groups[0]!;
+  const source = [...new Set(groups.map((summary) => summary.metric.boundary.label))];
+  return (
+    <Stack gap="xs" aria-label={metric.name} role="group">
+      <Flex gap="xs" align="center" wrap="wrap">
+        <Text span inherit fw={600}>
+          {metric.name}
+        </Text>
+        <Text span inherit c="dimmed">
+          {source.join(', ')} · {metric.unit}
+        </Text>
+        {metric.boundary.state === 'partial' && <Badge color="orange" variant="light">Partial interval</Badge>}
+        {metric.boundary.state === 'undeclared' && <Badge color="gray" variant="light">Boundaries not declared</Badge>}
+        {first.lowerBound && <Badge color="orange" variant="light">Includes timeouts or failures</Badge>}
+      </Flex>
+      <MetricTable summaries={groups} baseline={baseline} />
+      <Notes summaries={groups} baseline={baseline} />
+    </Stack>
+  );
+}
+
+/**
+ * The product latency of one test, from its recorded results (newest first, as the history lists them). Grouping and
+ * the baseline are the viewer's own choices and are not saved. With nothing recorded it says product latency is
+ * unknown and how a producer records it.
+ */
+export function ProductLatency({ entries }: { entries: readonly TestResultEntry[] }) {
+  const [by, setBy] = useState<LatencyGrouping>('none');
+  const [baseline, setBaseline] = useState<string | undefined>(undefined);
+  const review = useMemo(() => latencyReview(entries, by), [entries, by]);
+  const groups = [...new Set(review.metrics.flatMap((item) => item.groups.map((summary) => summary.group)))];
+  return (
+    <Box aria-label="Product latency" component="section" mb="lg">
+      <Title order={3} mb="sm" c="dimmed">
+        Product latency
+      </Title>
+      <Text component="div" c="dimmed" mb="sm">
+        How quickly the product responded to a user, between two events the producer named. It is not the test's duration, which includes setup,
+        waits, retries and any demo pacing.
+      </Text>
+      {review.metrics.length === 0 ? (
+        <Text component="div" role="status">
+          No product latency was recorded for this test, so it is unknown, not fast. A producer records one as a measurement with{' '}
+          <Code>kind: "product-latency"</Code>, a <Code>from</Code> and a <Code>to</Code>, and optionally a <Code>limit</Code> as the budget.
+        </Text>
+      ) : (
+        <Stack gap="md">
+          <Flex gap="md" wrap="wrap" align="flex-end">
+            <NativeSelect
+              label="Group latency by"
+              value={by}
+              onChange={(event) => {
+                setBy(event.target.value as LatencyGrouping);
+                setBaseline(undefined);
+              }}
+            >
+              {LATENCY_GROUPINGS.map((option) => (
+                <option key={option} value={option}>
+                  {GROUPING_LABEL[option]}
+                </option>
+              ))}
+            </NativeSelect>
+            {groups.length > 1 && (
+              <NativeSelect label="Baseline to compare against" value={baseline ?? ''} onChange={(event) => setBaseline(event.target.value || undefined)}>
+                <option value="">Second newest group</option>
+                {groups.map((group) => (
+                  <option key={group} value={group}>
+                    {group}
+                  </option>
+                ))}
+              </NativeSelect>
+            )}
+          </Flex>
+          {review.metrics.map(({ metric, groups: summaries }) => (
+            <Metric key={metric.key} metric={metric} groups={summaries} baselineGroup={baseline} />
+          ))}
+          <Text component="div" c="dimmed">
+            {plural(review.measured, 'recorded result carries', 'recorded results carry')} product latency
+            {review.unmeasured > 0 ? `; ${plural(review.unmeasured, 'result records', 'results record')} none, which is unknown, not fast` : ''}.
+          </Text>
+        </Stack>
+      )}
+    </Box>
+  );
+}

package/packages/visualizer/src/explorer/Reliability.tsx

@@ -0,0 +1,337 @@
+/**
+ * @module Reliability of a test
+ *
+ * The open test's reliability, qualified: how many independent executions it rests on (not snapshots, not tries), for
+ * which environment, branch, spec revision and time window, how often it passed first time and in the end, and why the
+ * figure may not be what it looks like (a small sample, pooled environments, failed cases published again, bounded
+ * history). The scope is in the address and the executions behind the figure (its denominator) open in place, so a link
+ * shows the same figure and the same executions. It is worked out from the history the page already holds
+ * (`reliability` in the reports library), so it needs no further request.
+ */
+import { Accordion, Alert, Anchor, Badge, Box, Button, Checkbox, Code, CopyButton, Flex, List, MultiSelect, SimpleGrid, Stack, Table, Text, TextInput, Title, VisuallyHidden } from '@mantine/core';
+import { IconLink } from '@tabler/icons-react';
+import { environmentLabel } from '@crvouga/atlas/reports/layer-axes';
+import { reliability, type ReliabilityExecution } from '@crvouga/atlas/reports/reliability';
+import type { TestResultEntry } from '@crvouga/atlas/reports/test-catalog';
+import { Link } from '@tanstack/react-router';
+import { useMemo } from 'react';
+import { exactTime, plural, shortSha, STATUS_WORD } from '../evidence/format';
+import { StatusMark } from '../evidence/marks';
+import { joined, reliabilityScopeOf, values } from './search';
+import { patched, useExplorerNavigate, useExplorerSearch } from './navigate';
+
+/** A recorded status as a mark and a word; one this viewer does not know is shown by its own name and as unknown, never as a pass. */
+const known = (status: string) => (Object.hasOwn(STATUS_WORD, status) && status !== 'none' ? (status as keyof typeof STATUS_WORD) : 'none');
+const word = (status: string) => (known(status) === 'none' ? status : STATUS_WORD[known(status)]);
+const percent = (rate: number | null) => (rate === null ? 'no rate' : `${Math.round(rate * 1000) / 10}%`);
+const outOf = (passed: number, executions: number) => `${passed} of ${plural(executions, 'execution', 'executions')} passed`;
+const REASONS: Record<string, string> = {
+  'not-run': 'Did not run',
+  unfinished: 'Not finished',
+  'unknown-status': 'Status not understood',
+  'historical-revision': 'Earlier spec revision',
+  'revision-not-recorded': 'Spec revision not recorded'
+};
+
+function Choice({ label, param, options, chosen }: { label: string; param: 'relEnv' | 'relProducer' | 'relBranch' | 'relParam'; options: readonly { value: string; label: string }[]; chosen: string[] }) {
+  const go = useExplorerNavigate();
+  if (options.length < 2 && !chosen.length) return null;
+  return (
+    <MultiSelect
+      label={label}
+      data={options as { value: string; label: string }[]}
+      value={chosen}
+      searchable
+      clearable
+      placeholder={chosen.length ? undefined : `Any ${label.toLowerCase()}`}
+      nothingFoundMessage="Nothing found"
+      onChange={(next) => go({ [param]: joined(next) } as never, { replace: true })}
+    />
+  );
+}
+
+function Denominator({ executions, layer }: { executions: readonly ReliabilityExecution[]; layer: string | undefined }) {
+  return (
+    <Table.ScrollContainer minWidth={760}>
+      <Table>
+        <Table.Caption>Independent executions of this test in the scope, newest first. Snapshots of one execution are one row.</Table.Caption>
+        <Table.Thead>
+          <Table.Tr>
+            <Table.Th scope="col">Recorded</Table.Th>
+            <Table.Th scope="col">Environment</Table.Th>
+            <Table.Th scope="col">Status</Table.Th>
+            <Table.Th scope="col">Tries</Table.Th>
+            <Table.Th scope="col">Snapshots</Table.Th>
+            <Table.Th scope="col">Branch</Table.Th>
+            <Table.Th scope="col">Commit</Table.Th>
+            <Table.Th scope="col">Counted</Table.Th>
+            <Table.Th scope="col">
+              <VisuallyHidden>Evidence</VisuallyHidden>
+            </Table.Th>
+          </Table.Tr>
+        </Table.Thead>
+        <Table.Tbody>
+          {executions.map((execution) => (
+            <Table.Tr key={`${execution.layer}|${execution.kind}|${execution.producer}|${execution.environment}|${JSON.stringify(execution.parameters)}`} data-status={execution.status} data-counted={execution.counted}>
+              <Table.Td title={exactTime(execution.at)}>{exactTime(execution.at)}</Table.Td>
+              <Table.Td>
+                {environmentLabel(execution.environment)}
+                {Object.entries(execution.parameters).map(([name, value]) => (
+                  <Text key={name} span inherit c="dimmed">
+                    {' '}
+                    {name}: {value}
+                  </Text>
+                ))}
+              </Table.Td>
+              <Table.Td>
+                <Flex component="span" display="inline-flex" gap="xs" align="center" wrap="wrap">
+                  <StatusMark status={known(execution.status)} size={12} />
+                  {word(execution.status)}
+                </Flex>
+              </Table.Td>
+              <Table.Td>{execution.attempts ? execution.attempts.map(word).join(' → ') : 'Not recorded'}</Table.Td>
+              <Table.Td>
+                {execution.snapshots}
+                {execution.republished && (
+                  <Text span inherit c="dimmed">
+                    {' '}
+                    (published again after a failure)
+                  </Text>
+                )}
+              </Table.Td>
+              <Table.Td c="dimmed">{execution.branch ?? '—'}</Table.Td>
+              <Table.Td>
+                <Code>{shortSha(execution.sha) ?? '—'}</Code>
+              </Table.Td>
+              <Table.Td>{execution.counted ? 'Yes' : `No: ${REASONS[execution.excluded ?? ''] ?? execution.excluded}`}</Table.Td>
+              <Table.Td>
+                <Anchor
+                  aria-label={`Open the ${word(execution.status)} result recorded ${exactTime(execution.at)} in ${environmentLabel(execution.environment)}`}
+                  aria-current={execution.layer === layer ? 'true' : undefined}
+                  renderRoot={(props) => <Link {...props} to="/" search={patched({ layer: execution.layer })} resetScroll={false} activeOptions={{ exact: true }} />}
+                >
+                  Open this result
+                </Anchor>
+              </Table.Td>
+            </Table.Tr>
+          ))}
+        </Table.Tbody>
+      </Table>
+    </Table.ScrollContainer>
+  );
+}
+
+/**
+ * The reliability section of an open test: scope choices, the qualified figures, why they may mislead, and the
+ * executions they count. `entries` is every recorded result of the test the page holds, newest first; while it is
+ * `undefined` the history is still being read.
+ */
+export function Reliability({ testKey, entries }: { testKey: string; entries: readonly TestResultEntry[] | undefined }) {
+  const search = useExplorerSearch();
+  const go = useExplorerNavigate();
+  const scope = useMemo(() => reliabilityScopeOf(search), [search]);
+  const document = useMemo(() => (entries ? reliability(testKey, entries, scope) : null), [testKey, entries, scope]);
+  const parameters = useMemo(() => {
+    const counts = new Map<string, number>();
+    for (const entry of entries ?? []) for (const [name, value] of Object.entries(entry.parameters)) counts.set(`${name}=${value}`, (counts.get(`${name}=${value}`) ?? 0) + 1);
+    return [...counts].map(([value, count]) => ({ value, label: `${value} (${count})` }));
+  }, [entries]);
+  if (!document)
+    return (
+      <Box aria-label="Reliability" component="section" mb="lg">
+        <Title order={3} mb="sm" c="dimmed">
+          Reliability
+        </Title>
+        <Text role="status" component="div" c="dimmed">
+          Reading the history…
+        </Text>
+      </Box>
+    );
+  const { eventual, firstAttempt } = document;
+  const label = (list: readonly { value: string; count: number }[], format: (value: string) => string = (value) => value) => list.map(({ value, count }) => ({ value, label: `${format(value)} (${count})` }));
+  const warnings = document.notes.filter((note) => note.severity === 'warning');
+  const infos = document.notes.filter((note) => note.severity === 'info');
+  const scoped = Object.keys(scope).length > 0;
+  return (
+    <Box aria-label="Reliability" component="section" mb="lg">
+      <Title order={3} mb="sm" c="dimmed">
+        Reliability
+      </Title>
+      <Text component="div" c="dimmed" mb="sm">
+        Counted over independent executions: the snapshots one run recorded for one environment are one execution, and a retry is a try of it, not another
+        execution. This describes the checks Atlas holds, not how often the product fails in production.
+      </Text>
+      <Stack gap="sm" mb="md">
+        <SimpleGrid cols={{ base: 1, sm: 2, md: 3 }}>
+          <Choice label="Environment" param="relEnv" options={label(document.available.environments, environmentLabel)} chosen={values(search.relEnv)} />
+          <Choice label="Producer" param="relProducer" options={label(document.available.producers)} chosen={values(search.relProducer)} />
+          <Choice label="Branch" param="relBranch" options={label(document.available.branches)} chosen={values(search.relBranch)} />
+          <Choice label="Parameters" param="relParam" options={parameters} chosen={values(search.relParam)} />
+          <TextInput type="date" label="Executions from" value={search.relSince ?? ''} onChange={(event) => go({ relSince: event.target.value || undefined }, { replace: true })} />
+          <TextInput type="date" label="Executions until" value={search.relUntil ?? ''} onChange={(event) => go({ relUntil: event.target.value || undefined }, { replace: true })} />
+        </SimpleGrid>
+        {document.available.specRevisions.length > 0 && (
+          <Checkbox
+            label="Include earlier revisions of the spec"
+            description={document.currentRevision ? 'Off: only executions of the newest recorded spec revision count; earlier ones are shown as context.' : 'On: every revision is pooled, though the behavior may have changed between them.'}
+            checked={search.relRevision === 'any'}
+            onChange={(event) => go({ relRevision: event.currentTarget.checked ? 'any' : undefined }, { replace: true })}
+          />
+        )}
+      </Stack>
+
+      <Flex gap="xs" align="center" wrap="wrap" mb="sm" role="status" aria-label="Reliability sample">
+        <Badge color={document.sample === 'sufficient' ? 'gray' : 'orange'} variant="light">
+          {document.sample === 'none' ? 'No independent executions' : document.sample === 'insufficient' ? 'Insufficient evidence' : 'Sample large enough to read as a rate'}
+        </Badge>
+        <Text span inherit fw={600}>
+          {plural(eventual.executions, 'independent execution', 'independent executions')}
+        </Text>
+        <Text span inherit c="dimmed">
+          {scoped ? 'in this scope' : 'in all recorded history'}
+          {document.sample === 'insufficient' ? `; at least ${document.minimumExecutions} are needed before a rate means much` : ''}
+        </Text>
+      </Flex>
+
+      <SimpleGrid component="dl" cols={{ base: 1, sm: 2, md: 3 }}>
+        <Stack gap="sm">
+          <Box component="dt">Eventual success</Box>
+          <Box component="dd" m={0}>
+            {eventual.executions ? `${outOf(eventual.passed, eventual.executions)} (${percent(eventual.rate)})` : 'No rate: nothing completed in this scope'}
+          </Box>
+        </Stack>
+        <Stack gap="sm">
+          <Box component="dt">First-try success</Box>
+          <Box component="dd" m={0}>
+            {firstAttempt.executions ? `${outOf(firstAttempt.passed, firstAttempt.executions)} first time (${percent(firstAttempt.rate)})` : 'Unknown: no tries recorded'}
+            {document.unrecordedAttempts > 0 && firstAttempt.executions > 0 && (
+              <Text span inherit c="dimmed">
+                {' '}
+                · {document.unrecordedAttempts} recorded no tries
+              </Text>
+            )}
+          </Box>
+        </Stack>
+        <Stack gap="sm">
+          <Box component="dt">Tries</Box>
+          <Box component="dd" m={0}>
+            {document.attempts.total
+              ? `${document.attempts.total} recorded; ${plural(document.attempts.retried, 'execution', 'executions')} retried, ${document.attempts.recovered} failed first and passed after`
+              : 'None recorded'}
+          </Box>
+        </Stack>
+        <Stack gap="sm">
+          <Box component="dt">Interval (95%)</Box>
+          <Box component="dd" m={0} title={document.interval?.assumptions}>
+            {document.interval ? `${percent(document.interval.lower)} to ${percent(document.interval.upper)} (Wilson)` : '—'}
+          </Box>
+        </Stack>
+        <Stack gap="sm">
+          <Box component="dt">Recorded snapshots</Box>
+          <Box component="dd" m={0}>
+            {document.snapshots} behind the counted {plural(eventual.executions, 'execution', 'executions')}
+          </Box>
+        </Stack>
+        <Stack gap="sm">
+          <Box component="dt">Not counted</Box>
+          <Box component="dd" m={0}>
+            {document.outsideScope} outside the scope
+            {Object.entries(document.excluded)
+              .filter(([, count]) => count > 0)
+              .map(([reason, count]) => `, ${count} ${(REASONS[reason] ?? reason).toLowerCase()}`)
+              .join('')}
+          </Box>
+        </Stack>
+      </SimpleGrid>
+
+      {warnings.length > 0 && (
+        <Alert color="orange" title="Read this figure with care" mt="sm">
+          <List>
+            {warnings.map((note) => (
+              <List.Item key={note.code}>{note.message}</List.Item>
+            ))}
+          </List>
+        </Alert>
+      )}
+      {infos.length > 0 && (
+        <List mt="sm" c="dimmed">
+          {infos.map((note) => (
+            <List.Item key={note.code}>{note.message}</List.Item>
+          ))}
+        </List>
+      )}
+      {document.interval && (
+        <Text component="div" c="dimmed" mt="sm">
+          Interval assumes: {document.interval.assumptions}
+        </Text>
+      )}
+      {document.historical.executions > 0 && (
+        <Text component="div" c="dimmed" mt="sm">
+          Earlier spec revisions, shown as context and not counted: {outOf(document.historical.passed, document.historical.executions)}.
+        </Text>
+      )}
+
+      {document.cohorts.length > 1 && (
+        <Table.ScrollContainer minWidth={500} mt="sm">
+          <Table>
+            <Table.Caption>Each environment, producer and parameter set on its own</Table.Caption>
+            <Table.Thead>
+              <Table.Tr>
+                <Table.Th scope="col">Environment</Table.Th>
+                <Table.Th scope="col">Producer</Table.Th>
+                <Table.Th scope="col">Executions</Table.Th>
+                <Table.Th scope="col">Passed</Table.Th>
+              </Table.Tr>
+            </Table.Thead>
+            <Table.Tbody>
+              {document.cohorts.map((cohort) => (
+                <Table.Tr key={JSON.stringify([cohort.environment, cohort.producer, cohort.parameters])}>
+                  <Table.Td>
+                    {environmentLabel(cohort.environment)}
+                    {Object.entries(cohort.parameters).map(([name, value]) => (
+                      <Text key={name} span inherit c="dimmed">
+                        {' '}
+                        {name}: {value}
+                      </Text>
+                    ))}
+                  </Table.Td>
+                  <Table.Td>{cohort.producer}</Table.Td>
+                  <Table.Td>{cohort.executions}</Table.Td>
+                  <Table.Td>
+                    {cohort.passed} ({percent(cohort.rate)})
+                  </Table.Td>
+                </Table.Tr>
+              ))}
+            </Table.Tbody>
+          </Table>
+        </Table.ScrollContainer>
+      )}
+
+      <Accordion variant="separated" mt="sm" value={search.relOpen ? 'denominator' : null} onChange={(value) => go({ relOpen: value ? true : undefined }, { replace: true })}>
+        <Accordion.Item value="denominator">
+          <Accordion.Control>
+            Executions behind this figure: {document.executions.filter((execution) => execution.counted).length} counted
+            {document.executions.some((execution) => !execution.counted) ? `, ${document.executions.filter((execution) => !execution.counted).length} not counted` : ''}
+          </Accordion.Control>
+          <Accordion.Panel>
+            <Stack gap="sm">
+              <Flex gap="xs" align="center" wrap="wrap">
+                <CopyButton value={typeof window === 'undefined' ? '' : window.location.href}>
+                  {({ copied, copy }) => (
+                    <Button type="button" variant="default" onClick={copy} leftSection={<IconLink size={16} aria-hidden="true" />}>
+                      {copied ? 'Link copied' : 'Copy link to this scope'}
+                    </Button>
+                  )}
+                </CopyButton>
+                <Text span inherit c="dimmed">
+                  The link opens this scope and these executions.
+                </Text>
+              </Flex>
+              {document.executions.length > 0 ? <Denominator executions={document.executions} layer={search.layer} /> : <Text c="dimmed">No execution of this test matches the scope.</Text>}
+            </Stack>
+          </Accordion.Panel>
+        </Accordion.Item>
+      </Accordion>
+    </Box>
+  );
+}

package/packages/visualizer/src/explorer/TestDetail.tsx

@@ -21,6 +21,8 @@ import { outcomeHeadline, selectedResult } from '../evidence/outcome';
 import { useTestHistory } from './catalog';
 import { patched, useExplorerNavigate, useExplorerSearch } from './navigate';
 import { Badges, runName } from './parts';
+import { Reliability } from './Reliability';
+import { ProductLatency } from './ProductLatency';
 import { usePinnedResult, type PinnedResult } from './pinned';
 const RecordingPage = lazy(() => import('../evidence/recording-page').then((module) => ({ default: module.RecordingPage })));
 /** Results the history table shows before "Show more". */
@@ -310,6 +312,10 @@ export function TestDetail({ test, slot }: { test: TestSummary; slot: CheckSlot
         <Title order={3} mb="sm" c="dimmed">
           How it has gone
         </Title>
+        <Text component="div" c="dimmed" mb="sm">
+          Durations here are test execution time: setup, waits, retries and any demo pacing included. They do not say how quickly the product
+          responded; see Product latency.
+        </Text>
         <SimpleGrid component="dl" cols={{ base: 2, sm: 3 }}>
           <Stack gap="sm">
             <Box component="dt">Pass rate</Box>
@@ -394,12 +400,16 @@ export function TestDetail({ test, slot }: { test: TestSummary; slot: CheckSlot
         )}
         {!d && (
           <Text component="div" c="dimmed">
-            No duration recorded. Producers can send <Code>durationMs</Code> with each check.
+            No test duration recorded. Producers can send <Code>durationMs</Code> with each check.
           </Text>
         )}
         {entries.length > 1 && <Trend entries={entries} />}
       </Box>
 
+      {!history.isError && <Reliability testKey={test.key} entries={history.data === null ? [] : history.data?.history} />}
+
+      <ProductLatency entries={entries} />
+
       {(test.tags.length > 0 || Object.keys(test.labels).length > 0) && (
         <Box aria-label="Tags and labels" component="section" mb="lg">
           <Title order={3} mb="sm" c="dimmed">
@@ -577,7 +587,7 @@ function Trend({ entries }: { entries: readonly TestResultEntry[] }) {
       {timed.length > 1 && (
         <Box component="figure" m={0}>
           <Box component="figcaption">
-            Duration over the last {plural(timed.length, 'result', 'results')} · max {formatMs(max)}
+            Test duration over the last {plural(timed.length, 'result', 'results')} · max {formatMs(max)}
           </Box>
           <svg
             viewBox={`0 0 ${width} ${height}`}

package/packages/visualizer/src/explorer/catalog.tsx

@@ -180,7 +180,7 @@ function usePageHistory(layers: readonly LayerEvidence[] | null): PageHistory |
       const key = `${entry.layer.backend}|${entry.layer.id}`;
       if (current.rows.has(key)) continue;
       current.rows.set(key, entry.rows);
-      current.history.add(entry.layer, entry.rows, [], entry.layer.backend);
+      current.history.add(entry.layer, entry.rows, [], entry.layer.backend, entry.fingerprints);
     }
     return { history: current.history, stamp: `page:${current.gen}:${current.history.rev}` };
   }, [layers]);