@crvouga/atlas 1.5.0 → 1.7.0

package/CHANGELOG.md

@@ -1,6 +1,18 @@
 # Changelog: @crvouga/atlas
 
-## 1.5.0 (2026-10-29)
+## 1.7.0 (2026-10-29)
+
+### Features
+
+- explain selected, aggregate and historical outcomes without contradictory summaries ([018d2fe](https://github.com/crvouga/atlas/commit/018d2fe91a9c17cbefa8f9d24ad6f3d70550c5d1))
+
+## 1.6.0 (2026-10-28)
+
+### Features
+
+- unify fuzzy semantic search with complete filterable sortable results ([3b0b90e](https://github.com/crvouga/atlas/commit/3b0b90e4960dcbcbcfee924f33aca4ce02beaaec))
+
+## 1.5.0 (2026-10-28)
 
 ### Features
 

package/docs/extending.md

@@ -104,6 +104,23 @@ every kind of evidence and values from the future) and `layer-extensibility.test
 fields survive at every level, malformed evidence is dropped without losing the result, and a reader of the
 first version of the format still reads it all.
 
+### Saying what failed
+
+A failed check or step may declare the expectation it broke under the `atlas.failure` extension, so a reviewer sees
+it before the raw log. Every field is optional, and the declaration never changes the result.
+
+```json
+{
+  "name": "The list includes tea", "kind": "then", "status": "failed",
+  "extensions": { "atlas.failure": { "expected": "tea in the list", "actual": "the list is empty", "attribution": "product" } }
+}
+```
+
+`expected` and `actual` are shown as written. `attribution` is `product`, `test-harness` or `environment`; leave it out
+when you do not know, and the viewer says the cause is unknown. It is never inferred from the message. Whether setup
+failed before the behavior started comes from the failed step's `kind`: `hook`, `setup`, `fixture`, `before`,
+`beforeAll`, `beforeEach` or `given` mean preparation; `when`, `then`, `assertion` or `expect` mean the behavior.
+
 ## Attach evidence
 
 ### From the command line

package/docs/ui.md

@@ -87,6 +87,20 @@ when Watch is on screen.
 - The spec index searches titles, paths and declared domains, and can group by the domain from spec metadata (specs with
   none are listed under "No domain declared"; the Tests view reports domain problems).
 
+## Outcome summary
+
+A test or behavior detail states what the **selected** result says apart from what the other current sources say
+(`evidence/outcome.ts`, `outcome-summary.tsx`). The heading is the selected source's outcome first ("Selected result
+passed; another scoped source failed"), never the combined status; the combined status is labelled as the worst current
+result. Each other current source is one click away, and sources that share an environment are told apart by status,
+time, revision and their place among them. A failure leads with whether the behavior was reached (decided only by the
+recorded step `kind`: a `hook`, `setup`, `fixture`, `before*` or `given` step failing is "Behavior not verified: setup
+failed", `when`, `then`, `assertion` or `expect` is "Expectation not met", anything else is unknown), then the expected
+and observed values and the closest step and video, then the original output. The cause (product, test harness,
+environment) is unknown unless the producer declared it under the `atlas.failure` extension; it is never read from error
+wording. Records of one source whose outcome changed are listed oldest first, and a later pass is never called a fix.
+In the explorer the chosen source is the `source` search parameter (a layer id; unlike `layer` it does not pin a run).
+
 ## Icons and notation marks
 
 Use named imports from `@tabler/icons-react` for all UI glyphs. The icon package supplies SVG paths;
@@ -101,6 +115,16 @@ visible notation label; marks are decorative. Sources, licenses and the DMN nota
 and update this mapping when adding a format. Brand artwork preserves upstream colors independently of
 Atlas's theme. SVG data plots and statechart arrow markers are geometry, not handcrafted UI icons.
 
+## Search
+
+All search boxes (finder, test list, Runs tab, an opened run) use `src/find/query.ts` for the query language and
+`src/find/rank.ts` for matching; do not add a second matcher or filter on `includes`. Build documents from
+`src/find/behaviors.ts` so a behavior has the same fields and facets everywhere. Match first, then count, filter and sort
+the whole set, then page. Show filters typed in the box as removable chips, show what was not understood
+(`SearchNotes`), show why a result matched and mark exact ones, and say when matching is words only (no embedder, or
+a failed one). A bounded list says it is bounded and offers all results. Selection follows result identity, never a
+position, when results change. The query, filters and sort stay in the address.
+
 ## Accessibility and responsive behavior
 
 The shell collapses its index below Mantine's `md` breakpoint; its named Burger toggles mobile navigation.
@@ -151,7 +175,7 @@ The narrowly scoped exceptions are:
 | Statecharts | Graph, screen/event/journey details, developer metadata, chart test results | Mantine cards/navigation and product compositions; graph exception above |
 | Evidence | Steps, retries, annotations, facts, unknown extensions, safe downloads and previews | List, Badge, Accordion, Code, Image, native media |
 | Recordings | Pictures/video/timeline, actor selection, moments, failure jumps, timing, model-state differences | Tabs, Slider, Button, ScrollArea, Table, Progress |
-| Search/help | Ranked and semantic search, shortcut help, recording shortcuts | Spotlight, Modal, Kbd |
+| Search/help | Ranked, filterable and semantic search across behaviors, runs and results; complete results; shortcut help, recording shortcuts | Spotlight, TextInput, NativeSelect, Button chips, Alert, Modal, Kbd |
 | Administration | Token access, S3 storage notice, garbage collection policy (saved in S3), live timeouts, report rules, limits, raw JSON, conflicts | Same provider/theme, Fieldset, Mantine inputs, Accordion, Alert |
 
 The hash routes (`/`, `/chart/$chartId`, `/specs/$kind`), query contracts, project scoping, streaming,

package/llms-full.txt

@@ -2900,6 +2900,23 @@ every kind of evidence and values from the future) and `layer-extensibility.test
 fields survive at every level, malformed evidence is dropped without losing the result, and a reader of the
 first version of the format still reads it all.
 
+### Saying what failed
+
+A failed check or step may declare the expectation it broke under the `atlas.failure` extension, so a reviewer sees
+it before the raw log. Every field is optional, and the declaration never changes the result.
+
+```json
+{
+  "name": "The list includes tea", "kind": "then", "status": "failed",
+  "extensions": { "atlas.failure": { "expected": "tea in the list", "actual": "the list is empty", "attribution": "product" } }
+}
+```
+
+`expected` and `actual` are shown as written. `attribution` is `product`, `test-harness` or `environment`; leave it out
+when you do not know, and the viewer says the cause is unknown. It is never inferred from the message. Whether setup
+failed before the behavior started comes from the failed step's `kind`: `hook`, `setup`, `fixture`, `before`,
+`beforeAll`, `beforeEach` or `given` mean preparation; `when`, `then`, `assertion` or `expect` mean the behavior.
+
 ## Attach evidence
 
 ### From the command line
@@ -3919,6 +3936,20 @@ when Watch is on screen.
 - The spec index searches titles, paths and declared domains, and can group by the domain from spec metadata (specs with
   none are listed under "No domain declared"; the Tests view reports domain problems).
 
+## Outcome summary
+
+A test or behavior detail states what the **selected** result says apart from what the other current sources say
+(`evidence/outcome.ts`, `outcome-summary.tsx`). The heading is the selected source's outcome first ("Selected result
+passed; another scoped source failed"), never the combined status; the combined status is labelled as the worst current
+result. Each other current source is one click away, and sources that share an environment are told apart by status,
+time, revision and their place among them. A failure leads with whether the behavior was reached (decided only by the
+recorded step `kind`: a `hook`, `setup`, `fixture`, `before*` or `given` step failing is "Behavior not verified: setup
+failed", `when`, `then`, `assertion` or `expect` is "Expectation not met", anything else is unknown), then the expected
+and observed values and the closest step and video, then the original output. The cause (product, test harness,
+environment) is unknown unless the producer declared it under the `atlas.failure` extension; it is never read from error
+wording. Records of one source whose outcome changed are listed oldest first, and a later pass is never called a fix.
+In the explorer the chosen source is the `source` search parameter (a layer id; unlike `layer` it does not pin a run).
+
 ## Icons and notation marks
 
 Use named imports from `@tabler/icons-react` for all UI glyphs. The icon package supplies SVG paths;
@@ -3933,6 +3964,16 @@ visible notation label; marks are decorative. Sources, licenses and the DMN nota
 and update this mapping when adding a format. Brand artwork preserves upstream colors independently of
 Atlas's theme. SVG data plots and statechart arrow markers are geometry, not handcrafted UI icons.
 
+## Search
+
+All search boxes (finder, test list, Runs tab, an opened run) use `src/find/query.ts` for the query language and
+`src/find/rank.ts` for matching; do not add a second matcher or filter on `includes`. Build documents from
+`src/find/behaviors.ts` so a behavior has the same fields and facets everywhere. Match first, then count, filter and sort
+the whole set, then page. Show filters typed in the box as removable chips, show what was not understood
+(`SearchNotes`), show why a result matched and mark exact ones, and say when matching is words only (no embedder, or
+a failed one). A bounded list says it is bounded and offers all results. Selection follows result identity, never a
+position, when results change. The query, filters and sort stay in the address.
+
 ## Accessibility and responsive behavior
 
 The shell collapses its index below Mantine's `md` breakpoint; its named Burger toggles mobile navigation.
@@ -3983,7 +4024,7 @@ The narrowly scoped exceptions are:
 | Statecharts | Graph, screen/event/journey details, developer metadata, chart test results | Mantine cards/navigation and product compositions; graph exception above |
 | Evidence | Steps, retries, annotations, facts, unknown extensions, safe downloads and previews | List, Badge, Accordion, Code, Image, native media |
 | Recordings | Pictures/video/timeline, actor selection, moments, failure jumps, timing, model-state differences | Tabs, Slider, Button, ScrollArea, Table, Progress |
-| Search/help | Ranked and semantic search, shortcut help, recording shortcuts | Spotlight, Modal, Kbd |
+| Search/help | Ranked, filterable and semantic search across behaviors, runs and results; complete results; shortcut help, recording shortcuts | Spotlight, TextInput, NativeSelect, Button chips, Alert, Modal, Kbd |
 | Administration | Token access, S3 storage notice, garbage collection policy (saved in S3), live timeouts, report rules, limits, raw JSON, conflicts | Same provider/theme, Fieldset, Mantine inputs, Accordion, Alert |
 
 The hash routes (`/`, `/chart/$chartId`, `/specs/$kind`), query contracts, project scoping, streaming,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crvouga/atlas",
-  "version": "1.5.0",
+  "version": "1.7.0",
   "description": "Atlas: specs of any kind, reported as layered evidence. Publish checks from any runner (JUnit, CTRF, a script), combine them across nodes, branches, environments and backends, gate CI on the result, and run statecharts against the real app.",
   "license": "MIT",
   "type": "module",

package/packages/visualizer/README.md

@@ -154,6 +154,34 @@ Components read only the view model (`AtlasView`), never raw files.
   its own worker. Positions are cached under a hash of the chart's structure only, so new results
   never move anything.
 
+## Searching behaviors, runs and recordings
+
+Every search box (the finder opened with `Ctrl+K` or `/`, the test list, the Runs tab and the results of an opened
+run) reads one query language and matches with one engine (`src/find/query.ts`, `src/find/rank.ts`), so the same words
+make the same behaviors eligible everywhere.
+
+- **Words** match titles, steps, descriptions, specs, tags, environments and failure messages by stem, everyday synonym
+  and close spelling (`savde answer` finds "Keep a saved answer"), and the start of a longer word while it is typed.
+  Every distinctive word must be found; a word present in most behaviors is optional. When an embedder is available the
+  results are also re-ranked by meaning and a paraphrase with no word in common is added (`Similar meaning`); when none
+  is, or it fails, the box says it is matching words and spellings only.
+- **Exact matches.** `"a quoted phrase"` and identifiers with `/`, `_` or `.` (`memory/keep`) must appear as written, are
+  marked `Exact` and are listed first.
+- **Filters** narrow by structure instead of matching words: `status:failed` (`passed`, `failed`, `flaky`, `not-run`,
+  `running`), `env:ios` (also `platform:`, `environment:`, `device:`), `producer:`, `domain:`, `spec:`, `tag:`, `branch:`
+  and `has:video` (a playable recording, not the word). Values of one field are alternatives (`status:failed,flaky`);
+  different fields all hold. Each shows as a removable chip, and the status, environment and Has video buttons are the
+  same filters without the syntax.
+- **Nothing is dropped silently.** An unknown operator, an unknown status, an unclosed quote, or a filter a list does not
+  have (`domain:` on runs) is listed under the box with what to type instead.
+- **Complete results.** Counts, filters and sorting (including Best match, offered with words to match) apply to the whole
+  dataset before anything is shown in pages. The finder shows its first 40 results, says so, and opens all of them
+  (`Shift+Enter`, or the explorer's list for the same query). The query, filters and sort are in the address, so a link
+  and the back button restore them. Results that change under the cursor keep the highlighted result highlighted by
+  identity, and say so when it is no longer listed.
+
+The standing rules are in [the UI conventions](../../docs/ui.md#search).
+
 ## Fixtures
 
 `fixtures/` holds seven scenarios generated by `scripts/make-fixtures.ts` from `example/specs`, a

package/packages/visualizer/src/evidence/behavior-panel.tsx

@@ -6,12 +6,9 @@
  * record: run, environment, source, attempts). Also the coverage summary of the whole feature. A recording is always
  * labelled as illustrative evidence with its own status, provenance and revision; it never stands for approval.
  */
-import type { EvidenceHolder } from '@crvouga/atlas/reports/evidence-detail';
-import { isVideoAttachment } from '@crvouga/atlas/reports/evidence-detail';
 import { effectiveScope } from '@crvouga/atlas/reports/evidence-scope';
 import type { EvidenceResult } from '@crvouga/atlas/reports/layer-merge';
 import { environmentLabel } from '@crvouga/atlas/reports/layer-axes';
-import type { Attachment } from '@crvouga/atlas/schema';
 import { Alert, Badge, Box, Group, List, Paper, Stack, Tabs, Text, Title } from '@mantine/core';
 import { useMemo, type ReactNode } from 'react';
 
@@ -23,6 +20,7 @@ import { ScopeNotice } from './evidence-scope';
 import { plural, statusWord, useNow } from './format';
 import { exampleIndexFor, exampleRows, fillExample, type FeatureStep } from './gherkin';
 import { Origin, StatusMark } from './marks';
+import { outcomeHeadline, videosIn } from './outcome';
 
 /** The short, readable form of a spec fingerprint (`<length>:<hash>:<hash>`): its length and the start of its hash. */
 export function shortRevision(fingerprint: string): string {
@@ -80,19 +78,6 @@ function expectedSteps(steps: readonly FeatureStep[]): FeatureStep[] {
   return at < 0 ? [] : steps.slice(at);
 }
 
-function videosIn(holder: EvidenceHolder | undefined): Attachment[] {
-  if (!holder) return [];
-  const own = (holder.attachments ?? []).filter(isVideoAttachment);
-  return [
-    ...own,
-    ...(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 recording of one result, read only when this is on screen. */
 function Player({ result }: { result: EvidenceResult }) {
   const detail = useCheckDetail(result.layer, result.row);
@@ -171,6 +156,13 @@ export function BehaviorPanel({
   const steps = useMemo(() => (entry ? fillExample(scenario.steps, entry) : scenario.steps), [scenario, entry]);
   const expected = expectedSteps(steps);
   const named = example !== null && entry === null;
+  // The coverage state is the check's combined status; this says what the recording or result shown here recorded, apart from it.
+  const outcome =
+    subject && behavior.slot ? (
+      <Text component="div" fw={600} data-outcome-headline>
+        {outcomeHeadline({ layer: subject.layer, row: subject.row }, behavior.slot).text}
+      </Text>
+    ) : null;
   return (
     <Tabs
       defaultValue={start ?? (demo ? 'watch' : state === 'running' || behavior.slot?.live ? 'inspect' : 'read')}
@@ -190,6 +182,7 @@ export function BehaviorPanel({
               {COVERAGE[state].meaning}
             </Text>
           </Group>
+          {outcome}
           {example !== null && (
             <Text component="div" c="dimmed">
               Example: {example}
@@ -209,6 +202,7 @@ export function BehaviorPanel({
             <CoverageBadge state={state} />
             {behavior.representative && <Badge variant="outline">Representative demo</Badge>}
           </Group>
+          {outcome}
           {expected.length > 0 && (
             <Box component="section" aria-label="Expected outcome">
               <Title order={4} mb="xs">

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

@@ -9,12 +9,14 @@ import { useQuery } from '@tanstack/react-query';
 import { useMemo, useState, type ReactNode } from 'react';
 import { TestProgress, useTestProgress } from '../live/test-progress';
 import { reportJson } from './api';
-import { ResultEvidence } from './artifacts';
+import { ResultEvidence, useCheckDetail } from './artifacts';
 import { useEvidence } from './evidence-context';
 import { ago, duration, plural, statusWord, useNow } from './format';
 import type { FeatureExamples, FeatureStep } from './gherkin';
 import { Bounded, Origin, StatusMark } from './marks';
 import { ModelTrace } from './model-trace';
+import { OutcomeSummary } from './outcome-summary';
+import { failedReportStep, failedStep, recordOf, sourceLabels, type ResultRecord } from './outcome';
 import { recordedModelStates } from './quint';
 /** What the address says is open: a check, and optionally one particular layer's record of it. */
 export type CheckSelection = {
@@ -49,13 +51,6 @@ function environmentMarks(slot: CheckSlot) {
   if (seen.size < 2) return [];
   return [...seen].map(([id, status]) => ({ id, status }));
 }
-function outcomeName(outcome: EvidenceResult) {
-  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;
-}
 export function ResultRow({
   label,
   slot,
@@ -93,7 +88,7 @@ export function ResultRow({
                   <Flex component="span" display="inline-flex" gap="xs" align="center" wrap="wrap">
                     {marks.map((mark) => (
                       <Text key={mark.id || 'unspecified'} data-status={mark.status} span inherit>
-                        {environmentLabel(mark.id || null)}
+                        {environmentLabel(mark.id || null)} {statusWord(mark.status).toLowerCase()}
                       </Text>
                     ))}
                   </Flex>
@@ -276,6 +271,14 @@ type Props = {
   pinned?: HistoryEntry;
   /** Choosing a run in the history always names its layer, even when that result is a current one, so the choice stays pinned. */
   pin?: boolean;
+  /** The layer id of the current source the address selected (without pinning a run). Used with `onSource`; otherwise the choice is local. */
+  source?: string;
+  /** Called with the layer id when a source is chosen (null for the newest), so the page can keep the choice in its address. */
+  onSource?: (layerId: string | null) => void;
+  /** Whether the outcome summary states its own heading. False when the page already shows it. */
+  headline?: boolean;
+  /** Every record of this check the page knows (a node's history of it), when the layers held here are only the winners. */
+  records?: readonly ResultRecord[];
 };
 /** Everything recorded for one check: the chosen result, how it went, and every other run of it. */
 export function CheckDetail(props: Props) {
@@ -306,16 +309,28 @@ export function CheckDetail(props: Props) {
     </>
   );
 }
-function RecordedCheckDetail({ slot, layerId, select, reads, written, pinned, pin }: Props) {
+function RecordedCheckDetail({ slot, layerId, select, reads, written, pinned, pin, source, onSource, headline = true, records }: Props) {
   const { evidence, backends, ready, pending } = useEvidence();
   const now = useNow();
   const [variant, setVariant] = useState(0);
   const history = useMemo(() => checkHistory(evidence, slot.specPath, slot.id), [evidence, slot.specPath, slot.id]);
-  const winner = slot.outcomes[Math.min(variant, slot.outcomes.length - 1)]!;
+  const sourceAt = onSource && source ? slot.outcomes.findIndex((outcome) => outcome.layer.id === source) : -1;
+  const index = Math.min(onSource ? Math.max(sourceAt, 0) : variant, slot.outcomes.length - 1);
+  const winner = slot.outcomes[index]!;
   const earlier = pinned ?? (layerId ? history.find((entry) => entry.layer.id === layerId) : undefined);
   const chosen: HistoryEntry = earlier ?? { layer: winner.layer, row: winner.row };
   const superseded = !slot.outcomes.some((outcome) => outcome.layer.id === chosen.layer.id);
   const { paths, report } = useRecordedReport(chosen);
+  const recorded = useCheckDetail(chosen.layer, chosen.row);
+  const point = useMemo(
+    () => (chosen.row.status === 'failed' ? (failedStep(recorded.data?.check.steps) ?? failedReportStep(report.data)) : undefined),
+    [chosen.row.status, recorded.data, report.data]
+  );
+  const labels = sourceLabels(slot.outcomes, now);
+  const choose = (at: number) => {
+    setVariant(at);
+    onSource?.(at === 0 ? null : slot.outcomes[at]!.layer.id);
+  };
   const moments = report.data ? flattenFrames(report.data.steps).length : 0;
   const timings = superseded ? [] : slot.diagnostics.filter((entry) => entry.layer.id === chosen.layer.id || slot.diagnostics.length === 1);
   const note = superseded ? 'An earlier result. A newer run replaced it in the combined report.' : qualification(winner.warning);
@@ -328,12 +343,32 @@ function RecordedCheckDetail({ slot, layerId, select, reads, written, pinned, pi
       : '';
   return (
     <Stack gap="sm" miw={0}>
+      <OutcomeSummary
+        slot={slot}
+        selected={chosen}
+        history={records && records.length > history.length ? records : history.map(recordOf)}
+        point={point}
+        detail={recorded.data}
+        now={now}
+        showHeadline={headline}
+        choose={(layer) => {
+          const at = slot.outcomes.findIndex((outcome) => outcome.layer.id === layer);
+          if (at >= 0) choose(at);
+          else select({ layer });
+        }}
+      />
       {slot.outcomes.length > 1 && !earlier && (
         <Flex role="group" aria-label="Environments" gap="xs" align="center" wrap="wrap">
-          {slot.outcomes.map((outcome, index) => (
-            <Button key={outcome.key} type="button" aria-pressed={index === variant} onClick={() => setVariant(index)} variant="light">
+          {slot.outcomes.map((outcome, at) => (
+            <Button
+              key={outcome.key}
+              type="button"
+              aria-pressed={at === index}
+              onClick={() => choose(at)}
+              variant="light"
+            >
               <StatusMark status={outcome.row.status} size={12} />
-              {outcomeName(outcome)}
+              {labels[at]!.text}
             </Button>
           ))}
         </Flex>
@@ -410,7 +445,7 @@ function RecordedCheckDetail({ slot, layerId, select, reads, written, pinned, pi
           {moments > 0 && (
             <Button
               type="button"
-              onClick={() => select({ view: 'recording', check: slot.id, layer: earlier || variant > 0 ? chosen.layer.id : null })}
+              onClick={() => select({ view: 'recording', check: slot.id, layer: earlier || index > 0 ? chosen.layer.id : null })}
               variant="filled"
             >
               Open recording{' '}

package/packages/visualizer/src/evidence/outcome-summary.tsx

@@ -0,0 +1,208 @@
+/**
+ * @module Outcome summary
+ *
+ * What the selected result says, stated apart from the other current sources, and the failure explained before its
+ * raw output: the heading names the selected source's outcome and what the other scoped sources recorded (each one
+ * click away), whether the behavior was reached, the recorded expected and observed values, the closest video and
+ * step, the chronology of the source, and who is to blame, which stays unknown unless the producer declared it. The
+ * original diagnostics remain below, untouched.
+ */
+import type { CheckSlot, HistoryEntry } from '@crvouga/atlas/reports/evidence-view';
+import type { CheckDetail } from '@crvouga/atlas/reports/evidence-detail';
+import { effectiveScope, scopeBadges } from '@crvouga/atlas/reports/evidence-scope';
+import { Badge, Box, Button, Flex, List, Paper, Stack, Text, Title } from '@mantine/core';
+
+import { ago, duration, shortSha, statusWord } from './format';
+import { StatusMark } from './marks';
+import {
+  chronology,
+  failureNote,
+  outcomeHeadline,
+  passedAfterFailure,
+  recordOf,
+  type ResultRecord,
+  reachOf,
+  sourceLabels,
+  videosIn,
+  type FailurePoint
+} from './outcome';
+
+const BLAME: Record<string, string> = {
+  product: 'the product',
+  'test-harness': 'the test harness',
+  environment: 'the environment'
+};
+
+/**
+ * The outcome of the selected result in words, the other current sources beside it, and, for a failure, where and
+ * how it failed. `point` is the failed step found in the recording (undefined when none was recorded); `detail` is the
+ * check's full record, for its videos and scope. `choose` selects one of the other current sources; `showHeadline`
+ * is false when the page already shows the heading.
+ */
+export function OutcomeSummary({
+  slot,
+  selected,
+  history,
+  point,
+  detail,
+  now,
+  choose,
+  showHeadline = true
+}: {
+  slot: CheckSlot;
+  selected: HistoryEntry;
+  history: readonly ResultRecord[];
+  point: FailurePoint | undefined;
+  detail: CheckDetail | undefined;
+  now: number;
+  choose: (layerId: string) => void;
+  showHeadline?: boolean;
+}) {
+  const headline = outcomeHeadline(selected, slot);
+  const failed = selected.row.status === 'failed';
+  const reach = failed ? reachOf(point) : undefined;
+  const note = point?.note ?? failureNote(detail?.check.extensions);
+  const every = sourceLabels(slot.outcomes, now);
+  const labels = headline.others.map((outcome) => every[slot.outcomes.indexOf(outcome)]!);
+  const video = point?.videos[0] ?? videosIn(detail?.check)[0];
+  const scope = video ? effectiveScope(video.scope, detail?.check.scope, detail?.inheritedScope) : undefined;
+  const timeline = chronology(recordOf(selected), history);
+  return (
+    <Paper component="section" aria-label="Outcome summary" data-outcome={selected.row.status} withBorder p="md">
+      <Stack gap="sm" miw={0}>
+        {showHeadline && (
+          <Title order={3} data-outcome-headline>
+            {headline.text}
+          </Title>
+        )}
+        {headline.others.length > 0 && (
+          <Stack gap="xs" component="section" aria-label="Other current sources">
+            <Text component="div" c="dimmed">
+              Other current sources of this check
+            </Text>
+            <List listStyleType="none" spacing="xs">
+              {headline.others.map((outcome, index) => (
+                <List.Item key={outcome.key}>
+                  <Button type="button" variant="light" onClick={() => choose(outcome.layer.id)} aria-label={`Open ${labels[index]!.text}`}>
+                    <StatusMark status={outcome.row.status} size={12} />
+                    <Text span inherit>
+                      {labels[index]!.text}
+                    </Text>
+                  </Button>
+                </List.Item>
+              ))}
+            </List>
+          </Stack>
+        )}
+        {reach && (
+          <Flex gap="xs" align="center" wrap="wrap" data-reach={reach.state}>
+            <Badge variant={reach.state === 'setup-failed' ? 'filled' : 'light'} color={reach.state === 'unknown' ? 'gray' : 'red'}>
+              {reach.state === 'setup-failed'
+                ? 'Behavior not verified'
+                : reach.state === 'expectation-failed'
+                  ? 'Expectation not met'
+                  : 'Failure point unknown'}
+            </Badge>
+            <Text span inherit>
+              {reach.text}
+            </Text>
+          </Flex>
+        )}
+        {failed && (note?.expected !== undefined || note?.actual !== undefined) && (
+          <Box component="dl" aria-label="Expected and observed" m={0}>
+            {note?.expected !== undefined && (
+              <>
+                <Text component="dt" fw={600}>
+                  Expected
+                </Text>
+                <Text component="dd" m={0}>
+                  {note.expected}
+                </Text>
+              </>
+            )}
+            {note?.actual !== undefined && (
+              <>
+                <Text component="dt" fw={600}>
+                  Observed
+                </Text>
+                <Text component="dd" m={0}>
+                  {note.actual}
+                </Text>
+              </>
+            )}
+          </Box>
+        )}
+        {failed && (point || video) && (
+          <Stack gap="xs" component="section" aria-label="Closest evidence">
+            {point && (
+              <Text component="div">
+                Closest step:{' '}
+                <Text span inherit fw={600}>
+                  {point.name}
+                </Text>
+                {point.offsetMs !== undefined && (
+                  <Text span inherit c="dimmed">
+                    {' '}
+                    at {duration(point.offsetMs) || '0 ms'} into the check
+                  </Text>
+                )}
+              </Text>
+            )}
+            {video && (
+              <Text component="div">
+                Closest video:{' '}
+                <Text span inherit fw={600}>
+                  {video.description ?? video.name}
+                </Text>
+                <Text span inherit c="dimmed">
+                  {' '}
+                  {point?.videos.length ? 'attached to that step' : 'recorded for the whole check'}
+                  {' · '}
+                  {scopeBadges(scope)
+                    .map((badge) => badge.text)
+                    .join(', ')}
+                </Text>
+              </Text>
+            )}
+          </Stack>
+        )}
+        {failed && (
+          <Text component="div" c="dimmed" data-attribution={note?.attribution ?? 'unknown'}>
+            Cause:{' '}
+            {note?.attribution
+              ? `${BLAME[note.attribution]}, as declared by the producer`
+              : 'unknown. Nothing recorded says whether the product, the test harness or the environment is at fault.'}
+          </Text>
+        )}
+        {timeline.length > 0 && (
+          <Stack gap="xs" component="section" aria-label="Chronology of this source">
+            <Text component="div" c="dimmed">
+              Records of this source, oldest first
+            </Text>
+            <List listStyleType="none" spacing="xs" type="ordered">
+              {timeline.map(({ record, selected: current }) => (
+                <List.Item key={`${record.layer}|${record.kind}`} aria-current={current || undefined} data-status={record.status}>
+                  <Flex gap="xs" align="center" wrap="wrap">
+                    <StatusMark status={record.status} size={12} />
+                    <Text span inherit fw={current ? 600 : undefined}>
+                      {statusWord(record.status)}
+                    </Text>
+                    <Text span inherit c="dimmed">
+                      {ago(record.at, now)} · {shortSha(record.sha) ?? 'revision not recorded'}
+                      {current ? ' · selected' : ''}
+                    </Text>
+                  </Flex>
+                </List.Item>
+              ))}
+            </List>
+            {passedAfterFailure(timeline) && (
+              <Text component="div" role="status">
+                The latest run passed after an earlier failure. Nothing recorded shows that the failure was fixed or why it passed.
+              </Text>
+            )}
+          </Stack>
+        )}
+      </Stack>
+    </Paper>
+  );
+}