@crvouga/atlas 1.6.0 → 1.8.0

package/packages/visualizer/src/evidence/outcome.ts

@@ -0,0 +1,309 @@
+/**
+ * @module Outcome explanation
+ *
+ * Pure reading of what one selected result says, set beside everything else recorded for the same check, so a
+ * detail never leads with a summary that contradicts its evidence. The selected source's outcome, the other current
+ * sources, where a failure happened, whether the behavior was reached, and the chronology of one source are all
+ * stated separately. Nothing here changes a status or a winner: it only words what was recorded, and anything that
+ * was not recorded stays unknown. In particular a failure is never attributed to the product, the test harness or
+ * the environment from the wording of its message; only a producer's own `atlas.failure` declaration is shown.
+ */
+import type { HistoryEntry, CheckSlot } from '@crvouga/atlas/reports/evidence-view';
+import { isVideoAttachment, type EvidenceHolder } from '@crvouga/atlas/reports/evidence-detail';
+import { environmentLabel } from '@crvouga/atlas/reports/layer-axes';
+import type { EvidenceResult } from '@crvouga/atlas/reports/layer-merge';
+import type { ReportStep, RunReport } from '@crvouga/atlas/reports/report-types';
+import type { Attachment, Step } from '@crvouga/atlas/schema';
+import { ago, shortSha, statusWord } from './format';
+
+/** The extension key under which a producer may declare why and where a check failed. */
+export const FAILURE_EXTENSION = 'atlas.failure';
+
+/** Who a producer declared a failure to be the fault of. Absent is unknown, never inferred. */
+export type Attribution = 'product' | 'test-harness' | 'environment';
+
+const ATTRIBUTIONS: readonly string[] = ['product', 'test-harness', 'environment'];
+
+/** What a producer declared about a failure: the expectation, what was observed, and optionally whose fault it was. */
+export type FailureNote = {
+  readonly expected?: string;
+  readonly actual?: string;
+  readonly attribution?: Attribution;
+};
+
+/** Whether the failed step belongs to getting ready for the behavior, to the behavior itself, or is not known to be either. */
+export type Phase = 'setup' | 'behavior' | 'unspecified';
+
+/** Step kinds (an open vocabulary) that are preparation, not the behavior under test. */
+const SETUP_KINDS = new Set(['hook', 'setup', 'fixture', 'before', 'beforeall', 'beforeeach', 'given']);
+/** Step kinds that are the behavior being exercised or an expectation about it. */
+const BEHAVIOR_KINDS = new Set(['when', 'then', 'assertion', 'expect']);
+
+/**
+ * Which phase a step of this `kind` belongs to. Decided by the recorded kind only, never by a step's name or message;
+ * a kind that is not recognized, or none, is `unspecified`.
+ */
+export function phaseOf(kind: string | undefined): Phase {
+  const key = kind?.toLowerCase();
+  if (!key) return 'unspecified';
+  return SETUP_KINDS.has(key) ? 'setup' : BEHAVIOR_KINDS.has(key) ? 'behavior' : 'unspecified';
+}
+
+/** The step at which a result failed, as far as the recording says. */
+export type FailurePoint = {
+  readonly name: string;
+  readonly kind: string | undefined;
+  readonly phase: Phase;
+  /** The step's own message, as recorded. */
+  readonly detail: string | undefined;
+  /** How long after the check started it began, when recorded. */
+  readonly offsetMs: number | undefined;
+  readonly note: FailureNote | undefined;
+  /** The videos on the step itself, if it has any. */
+  readonly videos: readonly Attachment[];
+};
+
+function text(value: unknown): string | undefined {
+  if (value === undefined || value === null) return undefined;
+  if (typeof value === 'string') return value;
+  if (typeof value === 'number' || typeof value === 'boolean') return String(value);
+  return JSON.stringify(value);
+}
+
+/**
+ * The failure a producer declared under {@link FAILURE_EXTENSION} in `extensions`: `expected`, `actual` and an
+ * `attribution` of `product`, `test-harness` or `environment`. Anything else is ignored; undefined when nothing usable is there.
+ */
+export function failureNote(extensions: Readonly<Record<string, unknown>> | undefined): FailureNote | undefined {
+  const raw = extensions?.[FAILURE_EXTENSION];
+  if (!raw || typeof raw !== 'object' || Array.isArray(raw)) return undefined;
+  const { expected, actual, attribution } = raw as Record<string, unknown>;
+  const note: { expected?: string; actual?: string; attribution?: Attribution } = {};
+  const e = text(expected);
+  const a = text(actual);
+  if (e !== undefined) note.expected = e;
+  if (a !== undefined) note.actual = a;
+  if (typeof attribution === 'string' && ATTRIBUTIONS.includes(attribution)) note.attribution = attribution as Attribution;
+  return Object.keys(note).length ? note : undefined;
+}
+
+/**
+ * The first failed step of a recorded check, preferring the innermost one (a failed action inside a failed group is
+ * the action). Steps are ordered by their start offset, else by their position. Undefined when no step failed or none
+ * was recorded.
+ */
+export function failedStep(steps: readonly Step[] | undefined): FailurePoint | undefined {
+  if (!steps?.length) return undefined;
+  const failedParents = new Set(steps.filter((step) => step.status === 'failed' && step.parentId).map((step) => step.parentId));
+  const order = steps.map((step, index) => ({ step, index }));
+  order.sort((a, b) => (a.step.offsetMs ?? 0) - (b.step.offsetMs ?? 0) || a.index - b.index);
+  const found = order.find(({ step }) => step.status === 'failed' && !(step.id !== undefined && failedParents.has(step.id)))?.step;
+  if (!found) return undefined;
+  return {
+    name: found.name,
+    kind: found.kind,
+    phase: phaseOf(found.kind),
+    detail: found.detail,
+    offsetMs: found.offsetMs,
+    note: failureNote(found.extensions),
+    videos: (found.attachments ?? []).filter(isVideoAttachment)
+  };
+}
+
+/** The first innermost failed step of an Atlas run's own timeline (see {@link failedStep}). */
+export function failedReportStep(report: RunReport | undefined): FailurePoint | undefined {
+  if (!report) return undefined;
+  const walk = (steps: readonly ReportStep[]): ReportStep | undefined => {
+    for (const step of steps) {
+      if (step.status !== 'failed') continue;
+      return walk(step.steps) ?? step;
+    }
+    return undefined;
+  };
+  const found = walk(report.steps);
+  if (!found) return undefined;
+  return {
+    name: found.title,
+    kind: found.kind,
+    phase: phaseOf(found.kind),
+    detail: found.error,
+    offsetMs: Math.max(0, found.startedAtMs - report.meta.startedAtMs),
+    note: undefined,
+    videos: []
+  };
+}
+
+/** The recorded videos a holder carries on itself, its steps and its attempts. */
+export function videosIn(holder: EvidenceHolder | undefined): Attachment[] {
+  if (!holder) return [];
+  return [
+    ...(holder.attachments ?? []).filter(isVideoAttachment),
+    ...(holder.steps ?? []).flatMap((step) => (step.attachments ?? []).filter(isVideoAttachment)),
+    ...(holder.attempts ?? []).flatMap((attempt) => [
+      ...(attempt.attachments ?? []).filter(isVideoAttachment),
+      ...(attempt.steps ?? []).flatMap((step) => (step.attachments ?? []).filter(isVideoAttachment))
+    ])
+  ];
+}
+
+/** The one-line statement of what the failure point says about the behavior. */
+export function reachOf(point: FailurePoint | undefined): { readonly state: 'setup-failed' | 'expectation-failed' | 'unknown'; readonly text: string } {
+  if (!point) return { state: 'unknown', text: 'Where it failed was not recorded, so whether the behavior was reached is unknown.' };
+  if (point.phase === 'setup')
+    return { state: 'setup-failed', text: `Behavior not verified: setup failed at “${point.name}”. The execution is still recorded as failed.` };
+  if (point.phase === 'behavior')
+    return { state: 'expectation-failed', text: `The behavior was reached and an expectation was not met at “${point.name}”.` };
+  return { state: 'unknown', text: `Failed at “${point.name}”. Whether the behavior was reached is not recorded.` };
+}
+
+const WORD = { passed: 'passed', failed: 'failed', running: 'is still running', 'not-run': 'was not run' } as const;
+
+/** Counts of results by status, in words: `1 passed, 2 failed`. */
+function tally(results: readonly EvidenceResult[]): string {
+  const counts = new Map<string, number>();
+  for (const { row } of results) counts.set(row.status, (counts.get(row.status) ?? 0) + 1);
+  return (['passed', 'failed', 'running', 'not-run'] as const)
+    .filter((status) => counts.has(status))
+    .map((status) => `${counts.get(status)} ${status === 'not-run' ? 'not run' : status}`)
+    .join(', ');
+}
+
+/** What the selected result says, and the current results of the other sources it must be read beside. */
+export type Headline = {
+  readonly text: string;
+  /** The current results from other sources than the selected one, newest first. */
+  readonly others: readonly EvidenceResult[];
+  /** False when the selected result is an earlier one that a newer run has replaced in the combined report. */
+  readonly current: boolean;
+};
+
+/**
+ * The heading for a selected result: its own outcome first, then what the other current sources recorded. A passing
+ * selection beside a failing source says both; an earlier result says it is earlier and names the combined status.
+ * Never reads the selected outcome as the check's status.
+ */
+export function outcomeHeadline(selected: HistoryEntry, slot: CheckSlot): Headline {
+  const current = slot.outcomes.some((outcome) => outcome.layer.id === selected.layer.id);
+  const others = slot.outcomes.filter((outcome) => outcome.layer.id !== selected.layer.id);
+  const own = WORD[selected.row.status];
+  if (!current) {
+    return {
+      current,
+      others,
+      text: `This earlier result ${own}; the combined report now shows ${statusWord(slot.status).toLowerCase()} across ${others.length === 1 ? 'its current source' : `its ${others.length} current sources`}`
+    };
+  }
+  const failed = others.filter((outcome) => outcome.row.status === 'failed').length;
+  let text = `Selected result ${own}`;
+  if (selected.row.status === 'passed' && failed > 0) text += `; ${failed === 1 ? 'another scoped source' : `${failed} other scoped sources`} failed`;
+  else if (others.length > 0) text += `; ${others.length === 1 ? 'the other scoped source' : 'other scoped sources'}: ${tally(others)}`;
+  return { current, others, text };
+}
+
+/**
+ * The result a detail shows: the run the address pins, else the current result of the source it names, else the newest.
+ * Undefined only for a check with no result.
+ */
+export function selectedResult(slot: CheckSlot, pinned?: HistoryEntry, source?: string): HistoryEntry | undefined {
+  if (pinned) return pinned;
+  const found = (source ? slot.outcomes.find((outcome) => outcome.layer.id === source) : undefined) ?? slot.outcomes[0];
+  return found ? { layer: found.layer, row: found.row } : undefined;
+}
+
+/** How a choosable source is told apart from its siblings without reading opaque producer ids. */
+export type SourceLabel = {
+  /** The environment and parameters, or the producer when neither is named. */
+  readonly name: string;
+  /** Status in words. */
+  readonly status: string;
+  /** When it was recorded, relative. */
+  readonly when: string;
+  /** The commit, or the branch, or `revision not recorded`. */
+  readonly revision: string;
+  /** Present when other sources share the same name: its place among them, newest first, and its producer. */
+  readonly attempt: string | undefined;
+  /** All of the above in one line. */
+  readonly text: string;
+};
+
+/**
+ * Labels for the current results of a check so each can be told from the others by status, time, revision and,
+ * when several share a name, its place among them. `now` is epoch milliseconds.
+ */
+export function sourceLabels(outcomes: readonly EvidenceResult[], now: number): SourceLabel[] {
+  const names = outcomes.map((outcome) => {
+    const environment = outcome.layer.environment ? environmentLabel(outcome.layer.environment) : '';
+    const parameters = Object.entries(outcome.parameters)
+      .map(([name, value]) => `${name}: ${value}`)
+      .join(', ');
+    return [environment, parameters].filter(Boolean).join(' · ') || outcome.layer.producer;
+  });
+  return outcomes.map((outcome, index) => {
+    const name = names[index]!;
+    const siblings = names.flatMap((each, at) => (each === name ? [at] : []));
+    const attempt =
+      siblings.length > 1 ? `result ${siblings.indexOf(index) + 1} of ${siblings.length} from ${outcome.layer.producer}` : undefined;
+    const revision = shortSha(outcome.layer.sha) ?? outcome.layer.branch ?? 'revision not recorded';
+    const status = statusWord(outcome.row.status);
+    const when = ago(outcome.layer.recordedAtMs, now);
+    return { name, status, when, revision, attempt, text: [name, status, when, revision, attempt].filter(Boolean).join(' · ') };
+  });
+}
+
+/** What the chronology needs to know of one recorded result, whether it came from the held layers or from a test's history. */
+export type ResultRecord = {
+  /** The id of the layer that recorded it. */
+  readonly layer: string;
+  readonly kind: string;
+  readonly status: HistoryEntry['row']['status'];
+  readonly at: number;
+  readonly sha: string | null;
+  readonly producer: string;
+  readonly environment: string | null;
+  readonly parameters: Readonly<Record<string, string>>;
+};
+
+/** The record of a layer's result. */
+export function recordOf(entry: HistoryEntry): ResultRecord {
+  const { layer, row } = entry;
+  return {
+    layer: layer.id,
+    kind: row.kind,
+    status: row.status,
+    at: layer.recordedAtMs,
+    sha: layer.sha,
+    producer: layer.producer,
+    environment: layer.environment,
+    parameters: layer.parameters
+  };
+}
+
+/** One record of the selected result's own source, for the chronology. */
+export type ChronologyEntry = { readonly record: ResultRecord; readonly selected: boolean };
+
+function samePlace(a: ResultRecord, b: ResultRecord): boolean {
+  return (
+    a.producer === b.producer &&
+    a.environment === b.environment &&
+    JSON.stringify(Object.entries(a.parameters).sort()) === JSON.stringify(Object.entries(b.parameters).sort())
+  );
+}
+
+/**
+ * The records of the selected result's own source (same producer, environment and parameters), oldest first, one per
+ * layer. Empty when there is only one, or when they all have the same outcome, so there is no chronology to tell.
+ */
+export function chronology(selected: ResultRecord, history: readonly ResultRecord[]): ChronologyEntry[] {
+  const seen = new Set<string>();
+  const own = history
+    .filter((record) => samePlace(record, selected) && !seen.has(`${record.layer}|${record.kind}`) && seen.add(`${record.layer}|${record.kind}`))
+    .sort((a, b) => a.at - b.at);
+  if (own.length < 2 || new Set(own.map((record) => record.status)).size < 2) return [];
+  return own.map((record) => ({ record, selected: record.layer === selected.layer && record.kind === selected.kind }));
+}
+
+/** Whether the newest record of a chronology passed after an earlier one failed. */
+export function passedAfterFailure(entries: readonly ChronologyEntry[]): boolean {
+  const last = entries.at(-1);
+  return last !== undefined && last.record.status === 'passed' && entries.slice(0, -1).some((each) => each.record.status === 'failed');
+}

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/TestDetail.tsx

@@ -17,9 +17,11 @@ import { CheckDetail } from '../evidence/check-detail';
 import { ago, exactTime, plural, shortSha, statusWord, useNow } from '../evidence/format';
 import { useEvidence } from '../evidence/evidence-context';
 import { Origin, StatusMark } from '../evidence/marks';
+import { outcomeHeadline, selectedResult } from '../evidence/outcome';
 import { useTestHistory } from './catalog';
 import { patched, useExplorerNavigate, useExplorerSearch } from './navigate';
 import { Badges, runName } from './parts';
+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". */
@@ -126,7 +128,7 @@ function Scope({ pinned, slot }: { pinned: PinnedResult; slot: CheckSlot | undef
 export function TestDetail({ test, slot }: { test: TestSummary; slot: CheckSlot | undefined }) {
   const now = useNow();
   const history = useTestHistory(test.key);
-  const { layer } = useExplorerSearch();
+  const { layer, source } = useExplorerSearch();
   const go = useExplorerNavigate();
   const pinned = usePinnedResult(layer, test.key);
   const [recording, setRecording] = useState(false);
@@ -134,6 +136,7 @@ export function TestDetail({ test, slot }: { test: TestSummary; slot: CheckSlot
   const [moment, setMoment] = useState<number | null>(null);
   const [rows, setRows] = useState(HISTORY_ROWS);
   const entries = history.data?.history ?? [];
+  const selected = slot && (!layer || pinned.state === 'ready') ? selectedResult(slot, pinned.state === 'ready' ? pinned.entry : undefined, source) : undefined;
   const stats = test.stats;
   const d = stats.durations;
   if (recording && slot) {
@@ -211,6 +214,9 @@ export function TestDetail({ test, slot }: { test: TestSummary; slot: CheckSlot
           <Text data-status={test.status} span inherit fw={600}>
             {statusWord(test.status)}
           </Text>
+          <Text span inherit c="dimmed">
+            worst current result of {plural(test.outcomes.length, 'source', 'sources')}
+          </Text>
           {stats.flaky && (
             <Text title={stats.flakyReason} span inherit>
               Flaky: {stats.flakyReason}
@@ -218,6 +224,11 @@ export function TestDetail({ test, slot }: { test: TestSummary; slot: CheckSlot
           )}
           <Badges test={test} />
         </Flex>
+        {selected && slot && (
+          <Text component="p" role="status" fw={600} data-outcome-headline>
+            {outcomeHeadline(selected, slot).text}
+          </Text>
+        )}
         {test.spec && <Code c="dimmed">{test.spec!.path}</Code>}
         <Code title="Check id" c="dimmed">
           {test.id}
@@ -300,6 +311,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>
@@ -384,12 +399,14 @@ 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>
 
+      <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">
@@ -425,6 +442,18 @@ export function TestDetail({ test, slot }: { test: TestSummary; slot: CheckSlot
             layerId={layer}
             {...(pinned.state === 'ready' ? { pinned: pinned.entry, pin: true } : {})}
             reads="steps"
+            headline={false}
+            records={entries.map((entry) => ({
+              layer: entry.layer,
+              kind: entry.kind,
+              status: entry.status,
+              at: entry.at,
+              sha: entry.sha,
+              producer: entry.producer,
+              environment: entry.environment,
+              parameters: entry.parameters
+            }))}
+            {...(layer ? {} : { source, onSource: (next: string | null) => go({ source: next ?? undefined }) })}
             select={(patch) => {
               if (patch.view === 'recording') {
                 setRecordingLayer(patch.layer ?? undefined);
@@ -555,7 +584,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/search.ts

@@ -67,6 +67,8 @@ export const ExplorerSearchFields = {
   openRun: text,
   /** Pins the open test's detail to one exact layer (a run's record of it), instead of the latest combined evidence. With `openRun` and `artifact` it names the layer the file is in. */
   layer: text,
+  /** Which current source (a layer id) of the open test the detail's outcome summary, media and failure describe, without pinning a run. Unknown or absent: the newest. */
+  source: text,
   /** With `openRun` and `layer`: the one file of that layer (an `artifactRef`: `id:…`, `key:…` or `name:…`) the run's Artifacts select. */
   artifact: text,
   /** Only the runs, and the results of an opened run, that have a playable video recording. */
@@ -98,6 +100,7 @@ export type ExplorerSearch = {
   readonly tab?: 'runs' | 'artifacts';
   readonly openRun?: string;
   readonly layer?: string;
+  readonly source?: string;
   readonly artifact?: string;
   readonly video?: true;
 };