@crvouga/atlas 1.3.0 → 1.5.0

package/packages/visualizer/src/evidence/feature-page.tsx

@@ -1,8 +1,11 @@
 import type { CheckSlot, SpecEvidence } from '@crvouga/atlas/reports/evidence-view';
 import { Alert, Box, Container, List, Stack, Text, Title } from '@mantine/core';
 import { useMemo } from 'react';
-import type { SpecKind } from '../spec-kind';
+import { outlinePath, type SpecKind } from '../spec-kind';
 import { CheckDetail, PlainSteps, ResultRow, type CheckSelection, type SelectCheck } from './check-detail';
+import { behaviorOf, coverageCounts, scenarioBehaviors, type Behavior, type RevisionSource } from './behavior';
+import { BehaviorPanel, CoverageBadge, CoverageSummary } from './behavior-panel';
+import { useEvidence } from './evidence-context';
 import { featureModel, scenarioLabel, slotsByScenario, type FeatureModel, type FeatureScenario } from './gherkin';
 import { Bounded } from './marks';
 import { SpecHeader } from './spec-header';
@@ -23,7 +26,10 @@ function parse(text: string): {
   try {
     return { feature: featureModel(text), error: null };
   } catch (error) {
-    return { feature: null, error: error instanceof Error ? error.message : String(error) };
+    return {
+      feature: null,
+      error: error instanceof Error ? error.message : String(error)
+    };
   }
 }
 /** A feature read as its rules and scenarios, each scenario with what was recorded when it ran. */
@@ -35,43 +41,81 @@ export function FeaturePage({ file, text, kind, entry, selection, select }: Prop
     () => (feature ? slotsByScenario(feature, slots) : { byScenario: new Map<string, CheckSlot[]>(), leftOver: slots }),
     [feature, slots]
   );
-  const scenarios = feature?.rules.flatMap((rule) => rule.scenarios.filter((scenario) => !scenario.background)) ?? [];
-  const planned =
-    scenarios.reduce((count, scenario) => count + Math.max(1, filed.byScenario.get(scenario.name)?.length ?? 0), 0) + filed.leftOver.length;
+  const { specs, evidence } = useEvidence();
+  const specPath = outlinePath(file);
+  const revisions = useMemo<RevisionSource>(() => {
+    const recorded = new Map(evidence.map((layer) => [layer.layer.id, layer.fingerprints[specPath]]));
+    return {
+      current: specs.find((spec) => spec.path === specPath)?.fingerprint ?? null,
+      recorded: (id) => recorded.get(id)
+    };
+  }, [specs, evidence, specPath]);
+  const behaviors = useMemo(() => {
+    const byScenario = new Map<FeatureScenario, Behavior[]>();
+    for (const scenario of feature?.rules.flatMap((rule) => rule.scenarios.filter((each) => !each.background)) ?? []) {
+      byScenario.set(scenario, scenarioBehaviors(scenario, filed.byScenario.get(scenario.name) ?? [], feature!.name, revisions));
+    }
+    // A result no scenario claims is still a behavior that was checked, so it is counted.
+    const stray: FeatureScenario = {
+      keyword: 'Scenario',
+      name: '',
+      description: '',
+      background: false,
+      tags: [],
+      steps: [],
+      examples: []
+    };
+    const other = filed.leftOver.map((slot) => behaviorOf({ ...stray, name: slot.title }, slot, null, revisions, slot.key));
+    return { byScenario, all: [...[...byScenario.values()].flat(), ...other] };
+  }, [feature, filed, revisions]);
+  const counts = useMemo(() => coverageCounts(behaviors.all), [behaviors]);
+  const planned = behaviors.all.length;
   const toggle = (id: string) => select({ check: selection.check === id ? null : id, layer: null });
-  const rows = (scenario: FeatureScenario) => {
-    const written = <PlainSteps steps={scenario.steps} examples={scenario.examples} />;
-    const recorded = (filed.byScenario.get(scenario.name) ?? []).filter((slot) => !runningOnly || slot.status === 'running');
-    if (!recorded.length) {
-      if (runningOnly) return null;
-      const id = `scenario:${scenario.name}`;
+  const rows = (scenario: FeatureScenario) =>
+    (behaviors.byScenario.get(scenario) ?? []).map((behavior) => {
+      if (runningOnly && behavior.slot?.status !== 'running') return null;
+      const { slot } = behavior;
+      const written = <PlainSteps steps={scenario.steps} examples={scenario.examples} />;
+      const id = slot ? slot.id : `scenario:${scenario.name}${behavior.example ? `:${behavior.example}` : ''}`;
+      const label = slot
+        ? scenarioLabel(feature!.name, slot.title)
+        : behavior.example
+          ? `${scenario.name} — ${behavior.example}`
+          : scenario.name;
       return (
-        <ResultRow key={id} label={scenario.name} slot={null} open={selection.check === id} onToggle={() => toggle(id)}>
-          <Text component="div" c="dimmed">
-            No completed test report for this scenario yet.
-          </Text>
-          {written}
+        <ResultRow
+          key={id}
+          label={label}
+          slot={slot}
+          badge={<CoverageBadge state={behavior.state} />}
+          open={selection.check === id}
+          onToggle={() => toggle(id)}
+        >
+          <BehaviorPanel
+            behavior={behavior}
+            start={selection.check === id && selection.layer ? 'inspect' : undefined}
+            inspect={
+              slot ? (
+                <CheckDetail
+                  slot={slot}
+                  layerId={selection.check === id ? selection.layer : undefined}
+                  select={(patch) => select({ check: id, ...patch })}
+                  reads="steps"
+                  written={written}
+                />
+              ) : (
+                <>
+                  <Text component="div" c="dimmed">
+                    No completed test report for this scenario yet.
+                  </Text>
+                  {written}
+                </>
+              )
+            }
+          />
         </ResultRow>
       );
-    }
-    return recorded.map((slot) => (
-      <ResultRow
-        key={slot.key}
-        label={scenarioLabel(feature!.name, slot.title)}
-        slot={slot}
-        open={selection.check === slot.id}
-        onToggle={() => toggle(slot.id)}
-      >
-        <CheckDetail
-          slot={slot}
-          layerId={selection.check === slot.id ? selection.layer : undefined}
-          select={(patch) => select({ check: slot.id, ...patch })}
-          reads="steps"
-          written={written}
-        />
-      </ResultRow>
-    ));
-  };
+    });
   return (
     <Container component="article" size="xl" w="100%" py="xl">
       <SpecHeader
@@ -87,6 +131,7 @@ export function FeaturePage({ file, text, kind, entry, selection, select }: Prop
           </Text>
         )}
       </SpecHeader>
+      <CoverageSummary counts={counts} total={behaviors.all.length} />
       <SourceText text={text} file={file} withResults />
       <Box component="section" id="spec-results" aria-label="Recorded results" tabIndex={-1}>
         <TestFilter slots={slots} />
@@ -112,7 +157,8 @@ export function FeaturePage({ file, text, kind, entry, selection, select }: Prop
               .map((scenario, at) => (
                 <Stack key={at} gap="sm" miw={0}>
                   <Text component="div" c="dimmed">
-                    Before each scenario{scenario.name ? `: ${scenario.name}` : ''}
+                    Before each scenario
+                    {scenario.name ? `: ${scenario.name}` : ''}
                   </Text>
                   <PlainSteps steps={scenario.steps} />
                 </Stack>

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

@@ -13,6 +13,8 @@ export type FeatureScenario = {
   readonly name: string;
   readonly description: string;
   readonly background: boolean;
+  /** The scenario's own tags, without the `@` (a parked or skipped scenario says so here). */
+  readonly tags: readonly string[];
   readonly steps: readonly FeatureStep[];
   readonly examples: readonly FeatureExamples[];
 };
@@ -50,13 +52,14 @@ export function featureModel(text: string): FeatureModel | null {
     for (const entry of child.rule ? child.rule.children : [child]) {
       const background = entry.background;
       const scenario = entry.scenario;
-      if (background) group.scenarios.push({ keyword: background.keyword, name: background.name, description: prose(background.description), background: true, steps: steps(background.steps), examples: [] });
+      if (background) group.scenarios.push({ keyword: background.keyword, name: background.name, description: prose(background.description), background: true, tags: [], steps: steps(background.steps), examples: [] });
       if (scenario) {
         group.scenarios.push({
           keyword: scenario.keyword,
           name: scenario.name,
           description: prose(scenario.description),
           background: false,
+          tags: [...new Set([...feature.tags, ...(child.rule?.tags ?? []), ...scenario.tags].map((tag) => tag.name.replace(/^@/, '')))],
           steps: steps(scenario.steps),
           examples: scenario.examples.map((example) => ({ name: example.name, header: cells(example.tableHeader), rows: example.tableBody.map(cells) }))
         });
@@ -96,3 +99,30 @@ export function slotsByScenario(feature: FeatureModel, slots: readonly CheckSlot
   }
   return { byScenario, leftOver };
 }
+
+/** The rows of an outline's examples, each with the names of its columns. */
+export function exampleRows(scenario: Pick<FeatureScenario, 'examples'>): { readonly header: readonly string[]; readonly row: readonly string[] }[] {
+  return scenario.examples.flatMap((example) => example.rows.map((row) => ({ header: example.header, row })));
+}
+
+/** Whether a recorded example label (what follows `Scenario — `) names one row: by its cells, joined, or by `column=value` pairs. */
+function namesRow(label: string, entry: { readonly header: readonly string[]; readonly row: readonly string[] }) {
+  const joined = [entry.row.join(', '), entry.row.join(' '), entry.row.join(' | '), entry.header.map((name, at) => `${name}=${entry.row[at] ?? ''}`).join(', ')];
+  return joined.includes(label) || entry.row.includes(label);
+}
+
+/** The index (in {@link exampleRows}) of the row a recorded label stands for, or -1 when the label names no single row (the producer worded it its own way, or two rows read alike). */
+export function exampleIndexFor(scenario: Pick<FeatureScenario, 'examples'>, label: string): number {
+  const rows = exampleRows(scenario);
+  const found = rows.flatMap((entry, at) => (namesRow(label, entry) ? [at] : []));
+  return found.length === 1 ? found[0]! : -1;
+}
+
+/** The steps of a scenario with one example's values put in for its `<column>` placeholders, so the concrete inputs read as written. */
+export function fillExample(steps: readonly FeatureStep[], entry: { readonly header: readonly string[]; readonly row: readonly string[] }): FeatureStep[] {
+  const fill = (text: string) => text.replace(/<([^<>]+)>/g, (whole, name: string) => {
+    const at = entry.header.indexOf(name);
+    return at < 0 ? whole : (entry.row[at] ?? whole);
+  });
+  return steps.map((step) => ({ ...step, text: fill(step.text), docString: step.docString === null ? null : fill(step.docString), table: step.table.map((row) => row.map(fill)) }));
+}

package/packages/visualizer/src/evidence/spec-index.tsx

@@ -1,7 +1,7 @@
 import { addSummaries, NO_EVIDENCE, type SpecSummary } from '@crvouga/atlas/reports/evidence-view';
-import { Box, Button, Group, NavLink, Stack, Text, Title } from '@mantine/core';
+import { Box, Button, Group, NavLink, SegmentedControl, Stack, Text, TextInput, Title } from '@mantine/core';
 import { Link, useSearch } from '@tanstack/react-router';
-import { useMemo } from 'react';
+import { useMemo, useState } from 'react';
 import { folderOf, outlinePath, specFile, type SpecKind } from '../spec-kind';
 import { useUiStore, type ResultFilter } from '../state/ui-store';
 import { useEvidence } from './evidence-context';
@@ -17,30 +17,42 @@ const FILTERS: readonly {
   { id: 'failed', label: 'Failing', keeps: (summary) => summary.counts.failed > 0 },
   { id: 'none', label: 'None', keeps: (summary) => summary.status === 'none' }
 ];
+const NO_DOMAIN = 'No domain declared';
 /** Every spec of one kind, grouped by folder, each with what the combined report holds for it. */
 export function SpecIndex({ kind }: { kind: SpecKind }) {
   const evidence = useEvidence();
   const search = useSearch({ strict: false });
   const filter = useUiStore((s) => s.resultFilter);
   const setFilter = useUiStore((s) => s.setResultFilter);
+  const [query, setQuery] = useState('');
+  const [grouping, setGrouping] = useState<'folder' | 'domain'>('folder');
   const open = typeof search.spec === 'string' ? specFile(search.spec) : '';
+  // The domain a spec declares in its metadata is used as given; a spec that declares none is not given one.
+  const domains = useMemo(() => new Map(evidence.specs.map((spec) => [spec.path, spec.domain])), [evidence.specs]);
   const rows = useMemo(
     () =>
       evidence.files.filter(kind.accepts).map((file) => ({
         file,
         title: evidence.titleOf(file),
+        domain: domains.get(outlinePath(file)) || '',
         summary: evidence.view.specs.get(outlinePath(file))?.summary ?? NO_EVIDENCE
       })),
     // `titleOf` reads the outline the view was built from.
-    [evidence.files, evidence.view, kind]
+    [evidence.files, evidence.view, kind, domains]
   );
   const keeps = FILTERS.find((entry) => entry.id === filter)!.keeps;
-  const visible = rows.filter((row) => keeps(row.summary));
+  const needle = query.trim().toLowerCase();
+  const visible = rows.filter(
+    (row) => keeps(row.summary) && (!needle || `${row.title} ${row.file} ${row.domain}`.toLowerCase().includes(needle))
+  );
   const groups = useMemo(() => {
-    const byFolder = new Map<string, typeof visible>();
-    for (const row of visible) byFolder.set(folderOf(row.file), [...(byFolder.get(folderOf(row.file)) ?? []), row]);
-    return [...byFolder];
-  }, [visible]);
+    const byGroup = new Map<string, typeof visible>();
+    for (const row of visible) {
+      const group = grouping === 'domain' ? row.domain || NO_DOMAIN : folderOf(row.file);
+      byGroup.set(group, [...(byGroup.get(group) ?? []), row]);
+    }
+    return [...byGroup];
+  }, [visible, grouping]);
   return (
     <Box aria-label={`${kind.label} ${kind.many}`} component="nav" p="md">
       <Group role="group" aria-label="Show" gap="xs" mb="md">
@@ -59,19 +71,40 @@ export function SpecIndex({ kind }: { kind: SpecKind }) {
           </Button>
         ))}
       </Group>
+      <Group gap="md" align="end" mb="md">
+        <TextInput
+          label={`Search ${kind.many}`}
+          type="search"
+          value={query}
+          onChange={(event) => setQuery(event.currentTarget.value)}
+          flex={1}
+          miw="12rem"
+        />
+        <SegmentedControl
+          aria-label="Group by"
+          value={grouping}
+          onChange={(value) => setGrouping(value === 'domain' ? 'domain' : 'folder')}
+          data={[
+            { label: 'Folder', value: 'folder' },
+            { label: 'Domain', value: 'domain' }
+          ]}
+        />
+      </Group>
       {evidence.filesPending && <Text component="div">Loading…</Text>}
       {evidence.filesError && <Text component="div">The file list could not be loaded.</Text>}
       {!evidence.filesPending && !evidence.filesError && visible.length === 0 && (
         <Text component="div">
           {rows.length === 0
             ? `No ${kind.many} in this spec set.`
-            : filter === 'running'
-              ? `No running ${kind.many}.`
-              : filter === 'failed'
-                ? `No failing ${kind.many}.`
-                : filter === 'results'
-                  ? `No ${kind.many} with results yet.`
-                  : `Every ${kind.one} has results.`}
+            : needle
+              ? `No ${kind.many} match "${query.trim()}".`
+              : filter === 'running'
+                ? `No running ${kind.many}.`
+                : filter === 'failed'
+                  ? `No failing ${kind.many}.`
+                  : filter === 'results'
+                    ? `No ${kind.many} with results yet.`
+                    : `Every ${kind.one} has results.`}
         </Text>
       )}
       {groups.map(([folder, entries]) => (

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

@@ -142,10 +142,10 @@ export function Explorer() {
           <Title order={1} mb="sm">
             {projectTitle()}
           </Title>
-          {model && model.tests.length > 0 && (
+          {model && (model.tests.length > 0 || model.summary.runs > 0) && (
             <Tabs
               value={search.tab ?? 'tests'}
-              onChange={(value) => go({ tab: value === 'runs' || value === 'artifacts' ? value : undefined, test: undefined, openRun: undefined, layer: undefined })}
+              onChange={(value) => go({ tab: value === 'runs' || value === 'artifacts' ? value : undefined, test: undefined, openRun: undefined, layer: undefined, artifact: undefined })}
             >
               <Tabs.List aria-label="Explorer view">
                 <Tabs.Tab
@@ -212,7 +212,12 @@ export function Explorer() {
             Loading tests…
           </Text>
         )}
-        {empty && !kinds.length && (
+        {empty && model && model.summary.runs > 0 && search.tab !== 'runs' && (
+          <Text component="div" c="dimmed">
+            No test results recorded, but {model.summary.runs === 1 ? '1 run carries' : `${model.summary.runs} runs carry`} files. Open the Runs tab to see them.
+          </Text>
+        )}
+        {empty && !kinds.length && !(model && model.summary.runs > 0) && (
           <Text component="div" c="dimmed">
             No reports yet. Publish tests and specs to this project to populate its report.
           </Text>
@@ -223,13 +228,12 @@ export function Explorer() {
           </Text>
         )}
         {model &&
-          !empty &&
           listing &&
           (search.tab === 'runs' ? (
             <RunsView />
           ) : search.tab === 'artifacts' ? (
             <ArtifactsView />
-          ) : (
+          ) : empty ? null : (
             <>
               <InsightStrip model={model} scope={listing.scope} search={search} />
               <Toolbar

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

@@ -0,0 +1,246 @@
+/**
+ * @module Run artifacts
+ *
+ * The files a run carries, without opening a test: for each layer of the run, who recorded it and how many checks it
+ * holds (a layer of none is evidence only and is never shown as a pass), then the files it carries as a whole (review
+ * movies, archives, summaries) played or shown in place; and the recordings its tests reference, listed once however
+ * many tests share the same bytes. Each run-level file has an address of its own (`openRun`, `layer`, `artifact`) that
+ * selects that exact file of that immutable layer, whatever runs arrive later. Files are shown exactly as everywhere
+ * else: by `ArtifactCard`, so sandboxing, content types and safe downloads are the same.
+ */
+import { artifactRef } from '@crvouga/atlas/reports/artifact-tags';
+import { attachmentIdentity, type EvidenceHolder, type PartEvidence } from '@crvouga/atlas/reports/evidence-detail';
+import { environmentLabel } from '@crvouga/atlas/reports/layer-axes';
+import type { RunDetail, RunLayer, RunResult } from '@crvouga/atlas/reports/test-catalog';
+import type { Attachment } from '@crvouga/atlas/schema';
+import { Alert, Anchor, Badge, Box, Button, Group, List, Stack, Text, Title } from '@mantine/core';
+import { IconAlertTriangle, IconVideo } from '@tabler/icons-react';
+import { useQueries } from '@tanstack/react-query';
+import { Link } from '@tanstack/react-router';
+import { useMemo } from 'react';
+
+import { reportJson } from '../evidence/api';
+import { ArtifactCard } from '../evidence/artifacts';
+import { exactTime, plural } from '../evidence/format';
+import { Bounded } from '../evidence/marks';
+import { patched, useExplorerSearch } from './navigate';
+
+/** Files shown per group before "more". */
+const SHOWN = 12;
+/** Tests named in a recording's sentence before "and N more". */
+const TESTS_NAMED = 5;
+
+/** What a layer carries as a whole, as `GET /evidence/detail/{backend}/{id}` answers without a check. */
+type LayerFiles = { readonly layer: string; readonly run: EvidenceHolder; readonly parts?: readonly PartEvidence[] };
+
+/** A group of files one holder of a layer carries: the layer itself or one of its parts. */
+type Holding = { readonly owner: string; readonly attachments: readonly Attachment[] };
+
+function holdings(files: LayerFiles): Holding[] {
+  return [
+    { owner: 'the layer', attachments: files.run.attachments ?? [] },
+    ...(files.parts ?? []).map((part) => ({ owner: `${part.title || part.id} (${part.kind})`, attachments: part.attachments ?? [] }))
+  ].filter((holding) => holding.attachments.length > 0);
+}
+
+/** The tests that reference each recording, by what identifies its bytes. */
+function recordingsOf(results: readonly RunResult[]) {
+  const byBytes = new Map<string, { name: string; tests: Map<string, RunResult>; references: number }>();
+  let unavailable = 0;
+  for (const result of results)
+    for (const video of result.videos ?? []) {
+      if (!video.available || video.recording === undefined) {
+        unavailable += 1;
+        continue;
+      }
+      const held = byBytes.get(video.recording) ?? { name: video.name, tests: new Map<string, RunResult>(), references: 0 };
+      held.references += 1;
+      held.tests.set(result.key, held.tests.get(result.key) ?? result);
+      byBytes.set(video.recording, held);
+    }
+  return { byBytes, unavailable };
+}
+
+/** The tests of a recording as links that open each test pinned to this run's record of it. */
+function TestLinks({ tests }: { tests: readonly RunResult[] }) {
+  return (
+    <>
+      {tests.slice(0, TESTS_NAMED).map((result, index) => (
+        <Text span inherit key={result.key}>
+          {index > 0 && ', '}
+          <Anchor renderRoot={(props) => <Link {...props} to="/" search={patched({ tab: undefined, openRun: undefined, artifact: undefined, test: result.key, layer: result.layer })} resetScroll={false} activeOptions={{ exact: true }} />}>
+            {result.title}
+          </Anchor>
+        </Text>
+      ))}
+      {tests.length > TESTS_NAMED && ` and ${tests.length - TESTS_NAMED} more`}
+    </>
+  );
+}
+
+/** Where the run's layer is from, for a person: the producer, environment and when it was recorded. */
+function provenance(layer: RunLayer): string {
+  return [layer.producer, layer.environment ? environmentLabel(layer.environment) : '', `recorded ${exactTime(layer.recordedAtMs)}`].filter(Boolean).join(' · ');
+}
+
+function LayerBlock({ runKey, layer, files, selected, shared }: { runKey: string; layer: RunLayer; files: { isPending: boolean; isError: boolean; refetch: () => unknown; data: LayerFiles | undefined }; selected: string | undefined; shared: (attachment: Attachment) => RunResult[] }) {
+  const groups = files.data ? holdings(files.data) : [];
+  return (
+    <Box component="section" aria-label={`Layer ${layer.producer}`} data-layer={layer.id} mb="lg">
+      <Title order={4}>{provenance(layer)}</Title>
+      <Text c="dimmed" data-layer-checks={layer.checks}>
+        {layer.checks > 0
+          ? `${plural(layer.checks, 'check', 'checks')} recorded in this layer.`
+          : 'No checks in this layer: it carries files only, so it says nothing about whether anything passed.'}{' '}
+        {plural(layer.attachments, 'file', 'files')} of its own.
+      </Text>
+      {files.isPending && (
+        <Text role="status" component="div" c="dimmed">
+          Reading the files of this layer…
+        </Text>
+      )}
+      {files.isError && (
+        <Alert role="alert" color="red" my="sm" title="The files of this layer could not be read">
+          <Button variant="light" onClick={() => void files.refetch()}>
+            Try again
+          </Button>
+        </Alert>
+      )}
+      {groups.map((group) => (
+        <Stack key={group.owner} gap="xs" mt="sm">
+          {groups.length > 1 || group.owner !== 'the layer' ? <Text c="dimmed">From {group.owner}</Text> : null}
+          <List spacing="xs" listStyleType="none">
+            <Bounded items={group.attachments} size={SHOWN} more="More files">
+              {(attachment, index) => {
+                const tests = shared(attachment);
+                const ref = artifactRef(attachment);
+                return (
+                  <ArtifactCard
+                    key={`${ref}:${index}`}
+                    attachment={attachment}
+                    layer={layer.id}
+                    selected={selected === `${layer.id}\u0000${ref}`}
+                    link={
+                      <Anchor
+                        aria-label={`Link to ${attachment.name}`}
+                        renderRoot={(props) => (
+                          <Link {...props} to="/" search={patched({ tab: 'runs', openRun: runKey, layer: layer.id, artifact: ref, test: undefined, video: undefined })} resetScroll={false} activeOptions={{ exact: true }} />
+                        )}
+                      >
+                        Link to this file
+                      </Anchor>
+                    }
+                    note={
+                      tests.length > 0 ? (
+                        <Text component="div" c="dimmed" data-shared>
+                          The same bytes are also referenced by {plural(tests.length, 'test', 'tests')} (<TestLinks tests={tests} />
+                          ). That is one recording, not {tests.length + 1}.
+                        </Text>
+                      ) : undefined
+                    }
+                  />
+                );
+              }}
+            </Bounded>
+          </List>
+        </Stack>
+      ))}
+    </Box>
+  );
+}
+
+/**
+ * The artifacts of one run: every layer's files, then the recordings its tests share. The selected file comes from the
+ * address (`layer` and `artifact`); one that cannot be found is said so, never silently replaced by another.
+ */
+export function RunArtifacts({ detail }: { detail: RunDetail }) {
+  const search = useExplorerSearch();
+  const { run, results } = detail;
+  const layers = detail.layers ?? [];
+  const carrying = layers.filter((layer) => layer.attachments > 0);
+  const queries = useQueries({
+    queries: carrying.map((layer) => ({
+      queryKey: ['run-files', layer.backend, layer.id],
+      queryFn: ({ signal }: { signal: AbortSignal }) => reportJson<LayerFiles>(`/evidence/detail/${encodeURIComponent(layer.backend)}/${encodeURIComponent(layer.id)}`, signal),
+      enabled: /^[0-9a-f]{64}$/.test(layer.id),
+      staleTime: Number.POSITIVE_INFINITY,
+      retry: false
+    }))
+  });
+  const { byBytes, unavailable } = useMemo(() => recordingsOf(results), [results]);
+  const loaded = queries.map((query) => query.data);
+  // What identifies the bytes of each run-level file, so a recording a test also references is one thing.
+  const runLevel = new Set<string>();
+  for (const files of loaded)
+    for (const group of files ? holdings(files) : [])
+      for (const attachment of group.attachments) {
+        const identity = attachmentIdentity(attachment);
+        if (identity) runLevel.add(identity);
+      }
+  const sharedWith = (attachment: Attachment): RunResult[] => {
+    const identity = attachmentIdentity(attachment);
+    return identity ? [...(byBytes.get(identity)?.tests.values() ?? [])] : [];
+  };
+  const inTests = [...byBytes.entries()].filter(([identity]) => !runLevel.has(identity));
+  const wanted = search.layer && search.artifact ? `${search.layer}\u0000${search.artifact}` : undefined;
+  const everyRead = queries.every((query) => !query.isPending);
+  const found = wanted
+    ? loaded.some((files, index) => files && carrying[index]!.id === search.layer && holdings(files).some((group) => group.attachments.some((attachment) => artifactRef(attachment) === search.artifact)))
+    : true;
+  const wantedLayer = layers.find((layer) => layer.id === search.layer);
+  const nothing = !carrying.length && !inTests.length && !unavailable;
+  return (
+    <Box aria-label="Run artifacts" component="section" mb="lg" data-run-artifacts>
+      <Title order={3} mb="sm">
+        Artifacts
+      </Title>
+      {wanted && everyRead && !found && (
+        <Alert role="alert" color="orange" my="sm" icon={<IconAlertTriangle size={16} aria-hidden="true" />} title="That file is not in this run">
+          {wantedLayer
+            ? 'The layer the link names is in this run, but it no longer lists that file. It is not shown as another file.'
+            : 'The link names a layer that is not part of this run (it may belong to another project or have been removed). It is not shown as another file.'}
+        </Alert>
+      )}
+      {nothing && (
+        <Text component="div" c="dimmed">
+          This run carries no files of its own and none of its tests references a recording.
+        </Text>
+      )}
+      {carrying.map((layer, index) => (
+        <LayerBlock key={layer.id} runKey={run.key} layer={layer} files={queries[index]!} selected={wanted} shared={sharedWith} />
+      ))}
+      {(inTests.length > 0 || unavailable > 0) && (
+        <Box aria-label="Recordings in tests" component="section" data-test-recordings>
+          <Title order={4}>Recordings in tests</Title>
+          <Text c="dimmed">
+            A recording that several tests reference is listed once. Open a test to watch it.
+          </Text>
+          <List spacing="xs" listStyleType="none">
+            <Bounded items={inTests} size={SHOWN} more="More recordings">
+              {([identity, held]) => (
+                <List.Item key={identity} data-recording>
+                  <Group gap="xs">
+                    <IconVideo size={16} aria-hidden="true" />
+                    <Text span inherit fw={600}>
+                      {held.name}
+                    </Text>
+                    {held.tests.size > 1 && <Badge variant="light">shared by {held.tests.size} tests</Badge>}
+                  </Group>
+                  <Text component="div" c="dimmed">
+                    {held.references > 1 ? `${plural(held.references, 'reference', 'references')} to the same recording, in ` : 'In '}
+                    <TestLinks tests={[...held.tests.values()]} />
+                  </Text>
+                </List.Item>
+              )}
+            </Bounded>
+          </List>
+          {unavailable > 0 && (
+            <Text component="div" c="dimmed" data-video-unavailable>
+              <IconAlertTriangle size={16} aria-hidden="true" /> {plural(unavailable, 'video reference', 'video references')} name no stored file, so they cannot be played.
+            </Text>
+          )}
+        </Box>
+      )}
+    </Box>
+  );
+}