@crvouga/atlas 1.2.0 → 1.4.0

package/packages/visualizer/src/evidence/artifacts.tsx

@@ -1,14 +1,16 @@
 import type { CheckDetail, EvidenceHolder } from '@crvouga/atlas/reports/evidence-detail';
-import { roleOfType } from '@crvouga/atlas/reports/evidence-detail';
+import { isVideoAttachment, roleOfType } from '@crvouga/atlas/reports/evidence-detail';
+import { effectiveScope } from '@crvouga/atlas/reports/evidence-scope';
 import type { LayerHeader, LayerRow } from '@crvouga/atlas/reports/evidence-types';
 import { contentTypeOf } from '@crvouga/atlas/reports/media-types';
 import type { Annotation, Attachment, Attempt, Step } from '@crvouga/atlas/schema';
-import { Accordion, Alert, Anchor, Box, Code, Flex, Image, List, Stack, Text, Title } from '@mantine/core';
+import { Accordion, Alert, Anchor, Badge, Box, Code, Flex, Image, List, Stack, Text, Title } from '@mantine/core';
 import { useQuery } from '@tanstack/react-query';
-import { useMemo, type ReactNode } from 'react';
+import { useEffect, useMemo, useRef, useState, type ReactNode } from 'react';
 import { ArtifactTagList, ArtifactTagsProvider, TagFilterBar, useFilteredAttachments } from './artifact-tags';
 import { reportAssetUrl, reportJson, reportText } from './api';
-import { duration, plural } from './format';
+import { ScopeNotice, ScopeProvider, useScope } from './evidence-scope';
+import { duration, plural, safeUri } from './format';
 import { StatusMark } from './marks';
 /**
  * How one kind of attachment is shown. The first renderer that matches wins, so a new kind of artifact (a
@@ -33,15 +35,22 @@ export type ArtifactRenderer = {
 const mediaType = (attachment: Attachment) =>
   (attachment.contentType ?? contentTypeOf(attachment.name)).split(';')[0]!.trim().toLowerCase();
 const label = (attachment: Attachment) => attachment.description ?? attachment.name;
-/** Only addresses a browser may follow: never `javascript:` or `data:` from a producer. */
-function safeUri(uri: string | undefined): string | null {
-  if (!uri) return null;
-  try {
-    const url = new URL(uri, 'https://atlas.invalid/');
-    return url.protocol === 'http:' || url.protocol === 'https:' ? uri : null;
-  } catch {
-    return null;
-  }
+/** A video that plays inline; when the file cannot be loaded or this browser cannot play it, it says so and offers the file, instead of an empty player. */
+function VideoPlayer({ attachment, url }: { attachment: Attachment; url: string }) {
+  const [failed, setFailed] = useState(false);
+  if (failed)
+    return (
+      <Alert role="alert" color="orange" title="This video cannot be played">
+        <Text component="div">
+          {label(attachment)} could not be loaded, or this browser cannot play its format. Nothing is wrong with the report: the file may be missing from the
+          store or in an unsupported codec.{' '}
+          <Anchor href={url} download={attachment.name} target="_blank" rel="noreferrer">
+            Download {attachment.name}
+          </Anchor>
+        </Text>
+      </Alert>
+    );
+  return <Box src={url} controls preload="metadata" aria-label={label(attachment)} component="video" maw="100%" w="100%" onError={() => setFailed(true)} />;
 }
 function TextValue({ attachment, path }: { attachment: Attachment; path: string | null }) {
   const stored = useQuery({
@@ -100,8 +109,7 @@ export const artifactRenderers: ArtifactRenderer[] = [
     id: 'video',
     wide: true,
     matches: (_, type) => type.startsWith('video/'),
-    render: (a, { url }) =>
-      url ? <Box src={url} controls preload="metadata" aria-label={label(a)} component="video" maw="100%" w="100%" /> : null
+    render: (a, { url }) => (url ? <VideoPlayer attachment={a} url={url} /> : null)
   },
   {
     id: 'audio',
@@ -138,7 +146,13 @@ function sizeOf(bytes: number | undefined) {
   if (bytes < 1024) return `${bytes} B`;
   return bytes < 1024 * 1024 ? `${(bytes / 1024).toFixed(0)} KiB` : `${(bytes / 1024 / 1024).toFixed(1)} MiB`;
 }
-function Artifact({ attachment, layer }: { attachment: Attachment; layer: string }) {
+/**
+ * One attachment as a card: it plays or shows itself when it can, and always says what it is (name, role, type, size,
+ * duration, tags) and how to get it. A file that has no address, has an address that is not a web address, or that
+ * nothing can preview says so in words. Pass `link` for a control that opens this one artifact, `note` for how it
+ * relates to the rest of the report, and `selected` to mark the one a link pointed at (it scrolls into view).
+ */
+export function ArtifactCard({ attachment, layer, link, note, selected }: { attachment: Attachment; layer: string; link?: ReactNode; note?: ReactNode; selected?: boolean }) {
   const type = mediaType(attachment);
   const path = attachment.bundleKey
     ? `/layers/${encodeURIComponent(layer)}/blobs/${attachment.bundleKey.split('/').map(encodeURIComponent).join('/')}`
@@ -146,13 +160,28 @@ function Artifact({ attachment, layer }: { attachment: Attachment; layer: string
   const url = path ? reportAssetUrl(path) : safeUri(attachment.uri);
   const renderer = artifactRenderers.find((candidate) => candidate.matches(attachment, type));
   const body = renderer?.render(attachment, { url, path, type });
+  const item = useRef<HTMLLIElement>(null);
+  useEffect(() => {
+    if (selected) item.current?.scrollIntoView?.({ block: 'center' });
+  }, [selected]);
+  const scope = effectiveScope(attachment.scope, useScope());
+  // A recording says what it shows before it is played; evidence that declared a scope of its own says so too.
+  const scoped = isVideoAttachment(attachment) || attachment.scope !== undefined;
   return (
-    <List.Item data-wide={renderer?.wide || undefined} data-role={attachment.role ?? roleOfType(type)}>
+    <List.Item
+      ref={item}
+      data-wide={renderer?.wide || undefined}
+      data-role={attachment.role ?? roleOfType(type)}
+      data-selected={selected || undefined}
+      {...(selected ? { bg: 'blue.0', p: 'sm', bd: '2px solid var(--mantine-color-blue-6)' } : {})}
+    >
+      {scoped && <ScopeNotice scope={scope} name={attachment.name} />}
       {body}
       <Box component="figcaption">
         <Text span inherit fw={600}>
           {attachment.name}
         </Text>
+        {selected && <Badge variant="light">Selected</Badge>}
         {attachment.role && (
           <Text span inherit>
             {attachment.role}
@@ -166,12 +195,21 @@ function Artifact({ attachment, layer }: { attachment: Attachment; layer: string
             {body ? 'Download' : 'Open'}
           </Anchor>
         )}
-        {!url && attachment.text === undefined && (
-          <Text span inherit>
-            No file to show
-          </Text>
-        )}
+        {link}
       </Box>
+      {!url && attachment.text === undefined && (
+        <Alert role={selected ? 'alert' : undefined} color="orange" data-unavailable my="xs">
+          {attachment.uri
+            ? 'No file to show. This file is only given by an address that is not a web address, so Atlas will not follow it. Ask the producer for a web address or to upload the file.'
+            : 'No file to show. The report lists this file, but it was never stored, so it cannot be shown or downloaded. Publish it again with the file attached.'}
+        </Alert>
+      )}
+      {url && !renderer && (
+        <Text component="div" c="dimmed" data-no-preview>
+          Atlas has no preview for this kind of file. Open or download it to inspect it.
+        </Text>
+      )}
+      {note}
       <ArtifactTagList attachment={attachment} />
     </List.Item>
   );
@@ -186,7 +224,7 @@ export function Attachments({ attachments: all, layer }: { attachments: readonly
       </Title>
       <List spacing="xs" listStyleType="none">
         {attachments.map((attachment, index) => (
-          <Artifact key={`${attachment.id ?? attachment.name}:${index}`} attachment={attachment} layer={layer} />
+          <ArtifactCard key={`${attachment.id ?? attachment.name}:${index}`} attachment={attachment} layer={layer} />
         ))}
       </List>
     </Box>
@@ -300,7 +338,7 @@ function Tries({ attempts, layer }: { attempts: readonly Attempt[]; layer: strin
       </Title>
       <List spacing="xs" listStyleType="none" type="ordered">
         {attempts.map((attempt) => (
-          <List.Item key={attempt.index}>
+          <List.Item key={attempt.index} data-attempt={attempt.index}>
             <Flex gap="xs" align="center" wrap="wrap">
               <StatusMark status={attempt.status} size={14} />
               <Text span inherit>
@@ -312,7 +350,9 @@ function Tries({ attempts, layer }: { attempts: readonly Attempt[]; layer: strin
               </Text>
             </Flex>
             {attempt.detail && <Text component="div">{attempt.detail}</Text>}
-            {attempt.attachments && <Attachments attachments={attempt.attachments} layer={layer} />}
+            <ScopeProvider scope={attempt.scope}>
+              {attempt.attachments && <Attachments attachments={attempt.attachments} layer={layer} />}
+            </ScopeProvider>
           </List.Item>
         ))}
       </List>
@@ -371,14 +411,14 @@ function Facts({ holder }: { holder: EvidenceHolder }) {
 }
 function Evidence({ holder, layer, steps }: { holder: EvidenceHolder; layer: string; steps?: boolean }) {
   return (
-    <>
+    <ScopeProvider scope={holder.scope}>
       <Facts holder={holder} />
       {holder.annotations && <Notes notes={holder.annotations} />}
       {steps && holder.steps && holder.steps.length > 0 && <Timeline steps={holder.steps} layer={layer} />}
       {holder.attempts && holder.attempts.length > 1 && <Tries attempts={holder.attempts} layer={layer} />}
       {holder.attachments && <Attachments attachments={holder.attachments} layer={layer} />}
       {holder.extensions && <Raw extensions={holder.extensions} />}
-    </>
+    </ScopeProvider>
   );
 }
 /** Everything one result carries beyond its outcome, read when it is opened, and what the run around it carried. */
@@ -408,7 +448,8 @@ export function ResultEvidence({ layer, row }: { layer: LayerHeader; row: LayerR
         What this result carries could not be read.
       </Text>
     );
-  const { check, run } = detail.data;
+  const { check, run, inheritedScope } = detail.data;
+  const declared = effectiveScope(check.scope, inheritedScope);
   const hasRun = Object.values(run).some((value) =>
     Array.isArray(value) ? value.length > 0 : value && typeof value === 'object' ? Object.keys(value).length > 0 : false
   );
@@ -416,7 +457,14 @@ export function ResultEvidence({ layer, row }: { layer: LayerHeader; row: LayerR
     <ArtifactTagsProvider layer={layer.id} kind={row.kind} check={row.id} holders={[check, run]}>
       <Stack aria-label="Evidence" gap="sm" miw={0}>
         <TagFilterBar holders={[check, run]} />
-        <Evidence holder={check} layer={layer.id} steps />
+        {declared && (
+          <Box aria-label="Scope of this result" component="section">
+            <ScopeNotice scope={declared} name={row.title} />
+          </Box>
+        )}
+        <ScopeProvider scope={inheritedScope}>
+          <Evidence holder={check} layer={layer.id} steps />
+        </ScopeProvider>
         {hasRun && (
           <Box aria-label="From the run" component="section" mb="lg">
             <Title order={4} mb="sm">

package/packages/visualizer/src/evidence/evidence-scope.tsx

@@ -0,0 +1,106 @@
+import { scopeBadges, scopeCaveats, scopeFacts, type ScopeBasis } from '@crvouga/atlas/reports/evidence-scope';
+import type { EvidenceScope } from '@crvouga/atlas/schema';
+import { Accordion, Anchor, Badge, Group, List, Stack, Table, Text } from '@mantine/core';
+import { createContext, useContext, type ReactNode } from 'react';
+import { safeUri } from './format';
+
+/** The scope declared by the nearest holder around an attachment: its attempt, its check, or the run. */
+const Around = createContext<EvidenceScope | undefined>(undefined);
+
+/**
+ * Makes `scope` the one that applies to the attachments inside, unless it is undefined, in which case the scope
+ * declared further out still applies. The nearest declaration wins as a whole and is never mixed with another.
+ */
+export function ScopeProvider({ scope, children }: { scope: EvidenceScope | undefined; children: ReactNode }) {
+  const outer = useContext(Around);
+  return <Around.Provider value={scope ?? outer}>{children}</Around.Provider>;
+}
+
+/** The scope in effect here, undefined when none was declared. */
+export function useScope(): EvidenceScope | undefined {
+  return useContext(Around);
+}
+
+const BASIS_WORD: Record<ScopeBasis, string> = { verified: 'Verified', declared: 'Declared', undeclared: 'Not declared' };
+
+/**
+ * What a recording does and does not show, in the producer's declaration: concise badges that are visible before it
+ * is played, and the exact declaration, caveats and provenance on demand. A recording that declared nothing says its
+ * scope is unknown. `scope` is the declaration that applies to this one source (see `effectiveScope`).
+ */
+export function ScopeNotice({ scope, name }: { scope: EvidenceScope | undefined; name: string }) {
+  const badges = scopeBadges(scope);
+  const unknown = badges[0]?.dimension === 'unknown';
+  const links = (scope?.provenance ?? []).flatMap((link) => {
+    const url = safeUri(link.url);
+    return url ? [{ url, label: link.name ?? link.rel ?? link.url }] : [];
+  });
+  return (
+    <Stack gap="xs" aria-label={`Evidence scope of ${name}`} data-scope={unknown ? 'unknown' : 'declared'} mb="xs">
+      <Group gap="xs" role="list" aria-label="Scope badges">
+        {badges.map((badge) => (
+          <Badge
+            key={badge.text}
+            role="listitem"
+            variant={badge.basis === 'verified' ? 'filled' : 'light'}
+            color={unknown ? 'gray' : undefined}
+            tt="none"
+            data-basis={badge.basis}
+          >
+            {badge.text}
+            {badge.basis === 'verified' ? ' (verified)' : ''}
+          </Badge>
+        ))}
+      </Group>
+      <Accordion variant="separated">
+        <Accordion.Item value="scope">
+          <Accordion.Control>Scope details</Accordion.Control>
+          <Accordion.Panel>
+            <Stack gap="sm">
+              <Table.ScrollContainer minWidth={280}>
+                <Table aria-label="Declared scope">
+                  <Table.Thead>
+                    <Table.Tr>
+                      <Table.Th>Dimension</Table.Th>
+                      <Table.Th>Value</Table.Th>
+                      <Table.Th>Basis</Table.Th>
+                    </Table.Tr>
+                  </Table.Thead>
+                  <Table.Tbody>
+                    {scopeFacts(scope).map((fact) => (
+                      <Table.Tr key={fact.dimension}>
+                        <Table.Td>{fact.label}</Table.Td>
+                        <Table.Td>{fact.value}</Table.Td>
+                        <Table.Td>{BASIS_WORD[fact.basis]}</Table.Td>
+                      </Table.Tr>
+                    ))}
+                  </Table.Tbody>
+                </Table>
+              </Table.ScrollContainer>
+              <Text component="div">
+                {unknown ? 'The producer declared no scope for this recording. ' : scope?.declaredBy ? `Declared by ${scope.declaredBy}. ` : 'The producer declared this; Atlas did not check it. '}
+                {scope?.verified?.length ? `Verified by ${scope.verifiedBy ?? 'something independent of the producer'}: ${scope.verified.join(', ')}.` : ''}
+              </Text>
+              <List aria-label="What this does not show" spacing="xs">
+                {scopeCaveats(scope).map((caveat) => (
+                  <List.Item key={caveat}>{caveat}</List.Item>
+                ))}
+              </List>
+              {links.length > 0 && (
+                <List aria-label="Provenance" spacing="xs">
+                  {links.map((link) => (
+                    <List.Item key={link.url}>
+                      <Anchor href={link.url} target="_blank" rel="noreferrer">
+                        {link.label}
+                      </Anchor>
+                    </List.Item>
+                  ))}
+                </List>
+              )}
+            </Stack>
+          </Accordion.Panel>
+        </Accordion.Item>
+      </Accordion>
+    </Stack>
+  );
+}

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

@@ -54,3 +54,14 @@ export function useNow(everyMs = 30_000) {
   }, [everyMs]);
   return now;
 }
+
+/** Only addresses a browser may follow: never `javascript:` or `data:` from a producer. */
+export function safeUri(uri: string | undefined): string | null {
+  if (!uri) return null;
+  try {
+    const url = new URL(uri, 'https://atlas.invalid/');
+    return url.protocol === 'http:' || url.protocol === 'https:' ? uri : null;
+  } catch {
+    return null;
+  }
+}

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
@@ -511,6 +515,7 @@ function Toolbar({
   const chips = [
     ...values(search.spec).map((path) => ({ label: `Spec: ${specTitle(path)}`, clear: { spec: toggled(search.spec, path) } })),
     ...values(search.tag).map((tag) => ({ label: `Tag: ${tag}`, clear: { tag: toggled(search.tag, tag) } })),
+    ...values(search.scope).map((token) => ({ label: `Scope: ${token}`, clear: { scope: toggled(search.scope, token) } })),
     ...values(search.artifactTag).map((tag) => ({ label: `Artifact tag: #${tag}`, clear: { artifactTag: toggled(search.artifactTag, tag) } })),
     ...(search.inRun ? [{ label: `Run: ${runName(search.inRun)}`, clear: { inRun: undefined } }] : [])
   ];
@@ -654,6 +659,23 @@ function Toolbar({
             </NativeSelect>
           </Box>
         )}
+        {(model.facets.scopes?.length ?? 0) > 0 && (
+          <Box component="label">
+            <VisuallyHidden>Recording scope</VisuallyHidden>
+            <NativeSelect
+              aria-label="Recording scope"
+              value=""
+              onChange={(event) => event.target.value && go({ scope: toggled(search.scope, event.target.value) })}
+            >
+              <option value="">Any recording scope</option>
+              {model.facets.scopes!.filter(({ value }) => !values(search.scope).includes(value)).map(({ value, count }) => (
+                <option key={value} value={value}>
+                  {value === 'unknown' ? 'Scope unknown' : value} ({count})
+                </option>
+              ))}
+            </NativeSelect>
+          </Box>
+        )}
       </Flex>
       <Flex role="status" gap="xs" align="center" wrap="wrap">
         <Text span inherit>
@@ -682,6 +704,7 @@ function Toolbar({
                 domain: undefined,
                 spec: undefined,
                 tag: undefined,
+                scope: undefined,
                 artifactTag: undefined,
                 inherited: undefined,
                 inRun: undefined

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>
+  );
+}