@crvouga/atlas 1.0.0 → 1.2.0

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

@@ -303,7 +303,7 @@ export function CheckDetail(props: Props) {
   );
 }
 function RecordedCheckDetail({ slot, layerId, select, reads, written, pinned, pin }: Props) {
-  const { evidence, backends } = useEvidence();
+  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]);
@@ -350,6 +350,11 @@ function RecordedCheckDetail({ slot, layerId, select, reads, written, pinned, pi
           {note}
         </Alert>
       )}
+      {layerId && !earlier && ready && pending === 0 && (
+        <Alert role="status" color={'blue'} my="sm">
+          The layer this link names is not among the results held for this check. Showing the current result instead.
+        </Alert>
+      )}
       {failure && (
         <Code block c="red.7">
           {failure}

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

@@ -36,6 +36,8 @@ export type EvidenceState = {
   readonly retry: () => void;
   /** Layers whose checks are still arriving. */
   readonly pending: number;
+  /** Layers whose checks could not be read. The report shown leaves them out, so it may be incomplete. */
+  readonly failed: readonly LayerHeader[];
   /** Every distinct layer, whether or not it contributes. */
   readonly layers: readonly LayerHeader[];
   /** The layers that contribute, with their checks, once read. */
@@ -175,7 +177,7 @@ export function EvidenceProvider({ children }: { children: ReactNode }) {
       staleTime: Number.POSITIVE_INFINITY,
       retry: 1
     })),
-    combine: (results) => ({ data: results.map((result) => result.data), stamp: results.map((result) => result.dataUpdatedAt).join(',') })
+    combine: (results) => ({ data: results.map((result) => result.data), failed: results.map((result) => result.isError && result.data === undefined), stamp: results.map((result) => result.dataUpdatedAt).join(',') })
   });
 
   // A running suite's layer is re-read as tests finish. Its last read stays on screen meanwhile.
@@ -195,6 +197,8 @@ export function EvidenceProvider({ children }: { children: ReactNode }) {
     // `stamp` changes exactly when a layer's rows do.
   }, [wanted, rows.stamp]);
 
+  const failed = useMemo(() => wanted.filter((_, i) => rows.failed[i]), [wanted, rows.failed]);
+
   const shown = effective ? overview.data?.layers ?? NONE : evidence;
   const { tests: liveTests } = useLiveTests();
   const view = useMemo(() => withLiveProgress(evidenceView(combineEvidence(outline, shown)), liveTests), [outline, shown, liveTests]);
@@ -206,11 +210,14 @@ export function EvidenceProvider({ children }: { children: ReactNode }) {
     unavailable: effective ? (overview.data === undefined && overview.error ? overview.error.message : null) : pages === undefined && index.error ? index.error.message : null,
     retry: () => {
       if (effective) { void Promise.all([overview.refetch(), serverOutline.refetch()]); return; }
+      // A layer whose rows could not be read is asked for again alone, so the layers already read stay on screen.
+      void client.refetchQueries({ queryKey: ['evidence-rows'], predicate: (query) => query.state.status === 'error' });
       void reportJson<EvidencePage>('/evidence?retry=1')
         .catch(() => null)
         .then(() => Promise.all([index.refetch(), serverOutline.refetch()]));
     },
-    pending: wanted.length - evidence.length,
+    pending: Math.max(0, wanted.length - evidence.length - failed.length),
+    failed,
     layers: effective ? effectiveHeaders : layers,
     evidence: shown,
     backends: effective ? overview.data?.backends ?? [] : first?.backends ?? [],

package/packages/visualizer/src/evidence/load-state.tsx

@@ -0,0 +1,65 @@
+import { Alert, Button, Group, Text } from '@mantine/core';
+import { useEffect, useState } from 'react';
+import { LoadError } from '../data/adapters';
+import { useEvidence } from './evidence-context';
+import { plural } from './format';
+import { ReportsError } from './api';
+
+/**
+ * How long a read may take before the page says so. Waiting is never silent past this: the page names what is
+ * affected, keeps whatever else is readable, and offers another attempt. A test shortens it.
+ */
+export const loadingPolicy = { stallMs: 10_000 };
+
+/** True once `active` has stayed true for the loading policy's bound. It starts over when `active` or `scope` changes. */
+export function useStalled(active: boolean, scope = ''): boolean {
+  const [stalled, setStalled] = useState(false);
+  useEffect(() => {
+    setStalled(false);
+    if (!active) return;
+    const timer = setTimeout(() => setStalled(true), loadingPolicy.stallMs);
+    return () => clearTimeout(timer);
+  }, [active, scope]);
+  return active && stalled;
+}
+
+/** Is this error the server saying the thing is not there, as opposed to it failing to answer? */
+export function isMissing(error: unknown): boolean {
+  return (error instanceof LoadError || error instanceof ReportsError) && error.status === 404;
+}
+
+/** Recorded results are still arriving. After the loading policy's bound it says so and offers another attempt. */
+export function EvidenceWaiting({ label = 'Loading recorded results…', usable }: { label?: string; usable?: string }) {
+  const { retry } = useEvidence();
+  const stalled = useStalled(true);
+  return stalled ? (
+    <Alert role="status" color="orange" my="sm" title="Recorded results are taking longer than expected">
+      <Group gap="sm">
+        <Text span inherit>
+          {usable ? `${usable} ` : ''}Results will appear here when they arrive.
+        </Text>
+        <Button type="button" onClick={retry} variant="subtle">
+          Try again
+        </Button>
+      </Group>
+    </Alert>
+  ) : (
+    <Text role="status" component="div" c="dimmed">
+      {label}
+    </Text>
+  );
+}
+
+/** Says when some layers could not be read, so counts and results are not taken for the whole report. */
+export function EvidenceIncomplete() {
+  const { failed, retry } = useEvidence();
+  if (failed.length === 0) return null;
+  return (
+    <Alert role="status" color="orange" my="sm">
+      {plural(failed.length, 'layer', 'layers')} could not be read, so the results shown here may be incomplete.{' '}
+      <Button type="button" onClick={retry} variant="subtle">
+        Try again
+      </Button>
+    </Alert>
+  );
+}

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

@@ -7,6 +7,7 @@ import { folderOf, outlinePath, type SpecKind } from '../spec-kind';
 import { useUiStore } from '../state/ui-store';
 import { useEvidence } from './evidence-context';
 import { ago, plural, useNow } from './format';
+import { EvidenceIncomplete, EvidenceWaiting } from './load-state';
 import { backendLabel, Bounded, CountLine, Meter, StatusMark, Tally } from './marks';
 /** A kind's specs at a glance: how many have results, which are failing, and what just ran. */
 export function Overview({ kind }: { kind: SpecKind }) {
@@ -104,11 +105,8 @@ export function Overview({ kind }: { kind: SpecKind }) {
           </Button>
         </Alert>
       ))}
-      {!evidence.ready && !evidence.unavailable && (
-        <Text role="status" component="div" c="dimmed">
-          Loading recorded results…
-        </Text>
-      )}
+      {!evidence.ready && !evidence.unavailable && <EvidenceWaiting usable={`The list of ${kind.many} is readable.`} />}
+      {evidence.ready && <EvidenceIncomplete />}
       {evidence.ready && evidence.pending > 0 && (
         <Text role="status" component="div" c="dimmed">
           Reading {plural(evidence.pending, 'more layer', 'more layers')}…
@@ -168,7 +166,7 @@ export function Overview({ kind }: { kind: SpecKind }) {
         </Box>
       )}
 
-      {evidence.ready && evidence.pending === 0 && withResults.length === 0 && !evidence.unavailable && (
+      {evidence.ready && evidence.pending === 0 && evidence.failed.length === 0 && withResults.length === 0 && !evidence.unavailable && (
         <Text component="div" c="dimmed">
           {evidence.layers.length === 0
             ? `Nothing has been recorded yet. Results appear here as a spec run finishes each test.`

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

@@ -10,6 +10,7 @@ import { useRecordedReport } from './check-detail';
 import { useEvidence } from './evidence-context';
 import { duration, statusWord, useNow } from './format';
 import { Origin, StatusMark } from './marks';
+import { EvidenceIncomplete, EvidenceWaiting } from './load-state';
 import { Timeline } from './recording';
 type Props = {
   /** The check whose recording is open, once the combined report holds it. */
@@ -40,7 +41,7 @@ function needsStylesheet(report: RunReport | undefined): boolean {
 /** One recorded test, opened in place of its spec. */
 export function RecordingPage({ slot, layerId, entry, label, back, moment, onMoment, onClose }: Props) {
   const progress = useTestProgress(slot ?? null);
-  const { evidence, backends, pending, ready, unavailable } = useEvidence();
+  const { evidence, backends, pending, ready, unavailable, failed, retry } = useEvidence();
   const now = useNow();
   const history = useMemo(() => (slot ? checkHistory(evidence, slot.specPath, slot.id) : []), [evidence, slot]);
   const winner = slot?.outcomes[0];
@@ -86,17 +87,26 @@ export function RecordingPage({ slot, layerId, entry, label, back, moment, onMom
         )}
       </Box>
       <TestProgress {...progress} />
-      {waiting && (
-        <Text role="status" component="div" c="dimmed">
-          Loading the recording…
-        </Text>
-      )}
+      {waiting && <EvidenceWaiting label="Loading the recording…" usable="The way back to the spec is available." />}
       {!chosen && !waiting && !progress.tests.length && (
         <Alert color={'blue'} my="sm">
           {unavailable ??
-            'This result is not in the combined report any more. A newer run may have replaced it, or its source is switched off.'}
+            (failed.length > 0
+              ? 'This result was not found in the layers that could be read, and some layers could not be read.'
+              : 'This result is not in the combined report any more. A newer run may have replaced it, or its source is switched off.')}{' '}
+          {(unavailable || failed.length > 0) && (
+            <Button type="button" onClick={retry} variant="subtle">
+              Try again
+            </Button>
+          )}
+        </Alert>
+      )}
+      {chosen && layerId && !entry && chosen.layer.id !== layerId && ready && pending === 0 && (
+        <Alert role="status" color={'blue'} my="sm">
+          The layer this link names is not among the results held for this test. Showing the current result instead.
         </Alert>
       )}
+      {ready && !chosen && <EvidenceIncomplete />}
       {chosen && !paths && (
         <Alert color={'blue'} my="sm">
           This result has an outcome and no recorded timeline.

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

@@ -6,6 +6,7 @@ import type { ReactNode } from 'react';
 import type { SpecKind } from '../spec-kind';
 import { useEvidence } from './evidence-context';
 import { useNow } from './format';
+import { EvidenceIncomplete, EvidenceWaiting } from './load-state';
 import { CountLine, Meter, Origin } from './marks';
 /** A spec's name, where it lives, and what the combined report holds for it. */
 export function SpecHeader({
@@ -23,7 +24,7 @@ export function SpecHeader({
   planned?: number;
   children?: ReactNode;
 }) {
-  const { backends, ready, unavailable, pending } = useEvidence();
+  const { backends, ready, unavailable, pending, failed } = useEvidence();
   const now = useNow();
   const summary = entry?.summary ?? NO_EVIDENCE;
   const newest = entry?.slots
@@ -50,13 +51,13 @@ export function SpecHeader({
             <Text span inherit>
               Recorded results are unavailable.
             </Text>
-          ) : !ready ? (
-            <Text role="status" span inherit>
-              Loading recorded results…
-            </Text>
+          ) : !ready || (summary.status === 'none' && pending > 0) ? (
+            <EvidenceWaiting usable={`The ${kind.one} below is readable.`} />
           ) : summary.status === 'none' ? (
             <Text span inherit>
-              {pending > 0 ? 'Loading recorded results…' : `No completed test report for this ${kind.one} yet.`}
+              {failed.length > 0
+                ? `No completed test report for this ${kind.one} in the layers that could be read.`
+                : `No completed test report for this ${kind.one} yet.`}
             </Text>
           ) : (
             <>
@@ -69,6 +70,7 @@ export function SpecHeader({
             </>
           )}
         </Flex>
+        {ready && <EvidenceIncomplete />}
         {newest && (
           <Flex gap="xs" align="center" wrap="wrap" c="dimmed">
             Latest from <Origin layer={newest.layer} backends={backends} now={now} />

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

@@ -1,11 +1,13 @@
-import { Alert, Button, Container, Text, Title } from '@mantine/core';
-import { useQuery } from '@tanstack/react-query';
-import { useNavigate, useParams, useSearch } from '@tanstack/react-router';
+import { Alert, Anchor, Button, Container, Group, List, Stack, Text, Title } from '@mantine/core';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { Link, useNavigate, useParams, useSearch } from '@tanstack/react-router';
 import { lazy, Suspense } from 'react';
 import { keys, specKey, useAdapter } from '../data/queries';
-import { outlinePath, specFile, specKind } from '../spec-kind';
+import { outlinePath, resolveSpec, similarSpecs, specFile, specKind, type SpecKind } from '../spec-kind';
 import type { SelectCheck } from './check-detail';
 import { useEvidence } from './evidence-context';
+import { isMissing, useStalled } from './load-state';
+import { SpecHeader } from './spec-header';
 import { Overview } from './overview';
 // Each kind of spec has a page with a parser of its own (Gherkin, Quint, DMN); a page loads only the one it shows.
 const DocumentPage = lazy(() => import('./document-page').then((m) => ({ default: m.DocumentPage })));
@@ -27,6 +29,63 @@ function Loading({ children }: { children: React.ReactNode }) {
     </Suspense>
   );
 }
+/** What a spec that cannot be shown still says: where it was looked for, what is recorded for it, and the ways on. */
+function SpecUnavailable({
+  kind,
+  file,
+  missing,
+  detail,
+  retry,
+  run
+}: {
+  kind: SpecKind;
+  file: string;
+  missing: boolean;
+  detail: string;
+  retry: () => void;
+  run: string | undefined;
+}) {
+  const evidence = useEvidence();
+  const listed = evidence.files.filter(kind.accepts);
+  const similar = similarSpecs(file, listed);
+  const entry = evidence.view.specs.get(outlinePath(file));
+  return (
+    <Container component="article" size="xl" w="100%" py="xl">
+      <SpecHeader title={file.split('/').at(-1)!} file={file} kind={kind} entry={entry}>
+        <Alert role={missing ? 'status' : 'alert'} color={missing ? 'orange' : 'red'} my="sm" title={missing ? `This ${kind.one} is not available` : `The ${kind.one} could not be read`}>
+          <Stack gap="sm">
+            <Text component="div">
+              {missing ? `specs/${file} is not in this spec set. ` : ''}
+              {detail}
+              {evidence.filesPending || evidence.filesError ? '' : ` ${listed.length} ${listed.length === 1 ? kind.one : kind.many} are listed.`}
+              {entry && entry.slots.length > 0 ? ' Results recorded against it are shown above.' : ''}
+            </Text>
+            {similar.length > 0 && (
+              <>
+                <Text component="div">Did you mean:</Text>
+                <List listStyleType="none">
+                  {similar.map((candidate) => (
+                    <List.Item key={candidate}>
+                      <Anchor renderRoot={(props) => <Link {...props} to="/specs/$kind" params={{ kind: kind.id }} search={{ run, spec: candidate }} />}>{candidate}</Anchor>
+                    </List.Item>
+                  ))}
+                </List>
+              </>
+            )}
+            <Group gap="sm">
+              <Button type="button" onClick={retry} variant="light">
+                Try again
+              </Button>
+              <Button variant="subtle" renderRoot={(props) => <Link {...props} to="/specs/$kind" params={{ kind: kind.id }} search={{ run }} />}>
+                Back to {kind.label}
+              </Button>
+            </Group>
+          </Stack>
+        </Alert>
+      </SpecHeader>
+    </Container>
+  );
+}
 /** One spec tab: its overview, one of its documents, or a recording opened from that document. */
 export function SpecPage() {
   const params = useParams({ from: '/specs/$kind' });
@@ -35,7 +94,8 @@ export function SpecPage() {
   const adapter = useAdapter();
   const evidence = useEvidence();
   const kind = specKind(params.kind);
-  const file = search.spec ? specFile(search.spec) : '';
+  // A link may name a spec by another form of its path (with the folder, in other letter case): the listed one is shown.
+  const file = search.spec ? resolveSpec(specFile(search.spec), evidence.files) : '';
   const readable = kind !== null && file.length > 0 && kind.accepts(file);
   const text = useQuery({
     queryKey: keys.specFile(specKey(adapter), file),
@@ -43,6 +103,12 @@ export function SpecPage() {
     enabled: readable,
     retry: false
   });
+  const stalled = useStalled(text.isLoading, file);
+  const client = useQueryClient();
+  // A read that has not answered is dropped before asking again; asking again beside it would only wait for the same answer.
+  const retryText = () => {
+    void client.cancelQueries({ queryKey: keys.specFile(specKey(adapter), file) }).then(() => text.refetch());
+  };
   if (!kind) {
     return (
       <Container component="article" size="xl" w="100%" py="xl">
@@ -101,24 +167,41 @@ export function SpecPage() {
       </Loading>
     );
   }
-  if (text.isPending)
+  if (text.isPending || (text.isError && evidence.filesPending))
     return (
       <Container component="article" size="xl" w="100%" py="xl">
         <Text role="status" component="div" c="dimmed">
-          Loading the {kind.one}…
+          Loading specs/{file}…
         </Text>
+        {stalled && (
+          <Alert role="status" color="orange" my="sm" title={`Reading the ${kind.one} is taking longer than expected`}>
+            <Group gap="sm">
+              <Text span inherit>
+                specs/{file} has not arrived yet. Recorded results for other specs are not affected.
+              </Text>
+              <Button type="button" onClick={retryText} variant="light">
+                Try again
+              </Button>
+              <Button variant="subtle" renderRoot={(props) => <Link {...props} to="/specs/$kind" params={{ kind: kind.id }} search={{ run: search.run }} />}>
+                Back to {kind.label}
+              </Button>
+            </Group>
+          </Alert>
+        )}
       </Container>
     );
   if (text.isError) {
+    const listedElsewhere = !evidence.filesPending && !evidence.filesError && !evidence.files.includes(file);
+    const missing = isMissing(text.error) || listedElsewhere;
     return (
-      <Container component="article" size="xl" w="100%" py="xl">
-        <Alert role="alert" color={'red'} my="sm">
-          The {kind.one} could not be read.{' '}
-          <Button type="button" onClick={() => void text.refetch()} variant="subtle">
-            Try again
-          </Button>
-        </Alert>
-      </Container>
+      <SpecUnavailable
+        kind={kind}
+        file={file}
+        missing={missing}
+        detail={text.error instanceof Error ? text.error.message : ''}
+        retry={retryText}
+        run={search.run}
+      />
     );
   }
   const page = { file, text: text.data, kind, entry, selection: { check: search.check, layer: search.layer }, select };

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

@@ -0,0 +1,162 @@
+/**
+ * @module Artifacts view
+ *
+ * Every recorded result that carries evidence (recordings, screenshots, traces) across the project's history, newest first,
+ * found by artifact tag, media type, label, feature, environment, branch, outcome and time. A result is listed with the
+ * run, commit and status it was recorded with, so a recording tagged `demo` is found even when a later attempt is
+ * untagged. Each row opens that exact result in the test detail. An empty answer for a filter says nothing matches and
+ * offers to clear it; it never says the project has nothing recorded.
+ */
+import { IconVideo } from '@tabler/icons-react';
+import { Alert, Anchor, Box, Button, Code, Stack, Table, Text } from '@mantine/core';
+import { videoCounts } from '@crvouga/atlas/reports/evidence-detail';
+import { environmentLabel } from '@crvouga/atlas/reports/layer-axes';
+import { Link } from '@tanstack/react-router';
+import { useMemo, useState } from 'react';
+
+import { ago, exactTime, plural, shortSha, statusWord, useNow } from '../evidence/format';
+import { StatusMark } from '../evidence/marks';
+import { useArtifactList } from './catalog';
+import { FilterBar } from './filters';
+import { patched, useExplorerNavigate, useExplorerSearch } from './navigate';
+import { runName } from './parts';
+import { filtered, filterOf, NO_FILTERS } from './search';
+
+const ARTIFACT_ROWS = 50;
+
+/** The Artifacts tab: recorded results that carry evidence, filtered by the address. */
+export function ArtifactsView() {
+  const search = useExplorerSearch();
+  const go = useExplorerNavigate();
+  const filter = useMemo(() => filterOf(search), [search]);
+  const narrow = filtered(search);
+  const answer = useArtifactList(filter);
+  const now = useNow();
+  const [shown, setShown] = useState(ARTIFACT_ROWS);
+  if (answer.isPending)
+    return (
+      <Text role="status" component="div" c="dimmed">
+        Reading the artifacts…
+      </Text>
+    );
+  if (answer.isError)
+    return (
+      <Alert role="alert" color="red" my="sm">
+        The artifacts could not be read. {answer.error.message}
+      </Alert>
+    );
+  if (answer.data.unsupported)
+    return (
+      <Alert role="status" color="blue" my="sm" data-unsupported>
+        This server cannot search artifacts, so nothing is shown here rather than a list that looks narrowed. Update the server to find recordings by tag, type and label; the Tests tab still filters by artifact tag.
+      </Alert>
+    );
+  const { list } = answer.data;
+  return (
+    <Box aria-label="Artifacts" component="section" mb="lg">
+      {(narrow || list.results.length > 0) && <FilterBar facets={list.facets} search={search} tab="artifacts" />}
+      {!list.results.length && !narrow && (
+        <Text component="div" c="dimmed">
+          No recorded result carries evidence yet. Recordings, screenshots and traces published with a result are listed here.
+        </Text>
+      )}
+      {list.results.length > 0 && (
+        <Text role="status" component="div">
+          {list.total > list.results.length
+            ? `The newest ${list.results.length} of ${plural(list.total, 'result', 'results')}${narrow ? ' matching' : ''}`
+            : `${plural(list.results.length, 'result', 'results')}${narrow ? ' matching' : ''}`}
+        </Text>
+      )}
+      {!list.results.length && narrow && (
+        <Stack gap="xs" align="flex-start" role="status" data-no-match>
+          <Text component="div" c="dimmed">
+            Nothing matches these filters.
+          </Text>
+          <Button type="button" variant="light" onClick={() => go(NO_FILTERS)}>
+            Clear filters
+          </Button>
+        </Stack>
+      )}
+      {list.results.length > 0 && (
+        <Table.ScrollContainer minWidth={700}>
+          <Table data-artifacts>
+            <Table.Thead>
+              <Table.Tr>
+                <Table.Th scope="col">Recorded</Table.Th>
+                <Table.Th scope="col">Test</Table.Th>
+                <Table.Th scope="col">Outcome</Table.Th>
+                <Table.Th scope="col">Environment</Table.Th>
+                <Table.Th scope="col">Branch</Table.Th>
+                <Table.Th scope="col">Commit</Table.Th>
+                <Table.Th scope="col">Run</Table.Th>
+                <Table.Th scope="col">Evidence</Table.Th>
+                <Table.Th scope="col">Tags</Table.Th>
+              </Table.Tr>
+            </Table.Thead>
+            <Table.Tbody>
+              {list.results.slice(0, shown).map((result) => {
+                const videos = videoCounts(result.videos);
+                return (
+                  <Table.Tr key={`${result.layer}|${result.key}|${result.kind}|${result.producer}|${result.environment}`} data-status={result.status}>
+                    <Table.Td title={exactTime(result.at)}>{ago(result.at, now)}</Table.Td>
+                    <Table.Td>
+                      <Anchor
+                        aria-label={`Open ${result.title} as recorded in run ${runName(result.run)}`}
+                        renderRoot={(props) => (
+                          <Link
+                            {...props}
+                            to="/"
+                            search={patched({ tab: undefined, openRun: undefined, test: result.key, layer: result.layer })}
+                            resetScroll={false}
+                            activeOptions={{ exact: true }}
+                          />
+                        )}
+                      >
+                        {result.title}
+                      </Anchor>
+                      <Text c="dimmed" fz="xs">
+                        {result.producer}
+                      </Text>
+                    </Table.Td>
+                    <Table.Td>
+                      <StatusMark status={result.status} size={14} /> {statusWord(result.status)}
+                    </Table.Td>
+                    <Table.Td>{environmentLabel(result.environment)}</Table.Td>
+                    <Table.Td c="dimmed">{result.branch ?? '—'}</Table.Td>
+                    <Table.Td>
+                      <Code>{shortSha(result.sha) ?? '—'}</Code>
+                    </Table.Td>
+                    <Table.Td>
+                      <Anchor
+                        aria-label={`Open run ${runName(result.run)}`}
+                        renderRoot={(props) => (
+                          <Link {...props} to="/" search={patched({ tab: 'runs', openRun: result.run, test: undefined, layer: undefined, video: undefined })} resetScroll={false} activeOptions={{ exact: true }} />
+                        )}
+                      >
+                        {runName(result.run)}
+                      </Anchor>
+                    </Table.Td>
+                    <Table.Td>
+                      {result.types.join(', ') || '—'}
+                      {videos && videos.recordings > 0 && (
+                        <Text component="div" size="xs" c="dimmed" data-video="available">
+                          <IconVideo size={16} aria-hidden="true" /> {plural(videos.recordings, 'video', 'videos')}
+                        </Text>
+                      )}
+                    </Table.Td>
+                    <Table.Td data-tags>{result.artifactTags.map((tag) => `#${tag}`).join(' ') || '—'}</Table.Td>
+                  </Table.Tr>
+                );
+              })}
+            </Table.Tbody>
+          </Table>
+        </Table.ScrollContainer>
+      )}
+      {list.results.length > shown && (
+        <Button type="button" onClick={() => setShown(shown + ARTIFACT_ROWS)} variant="subtle">
+          Show more ({list.results.length - shown} more)
+        </Button>
+      )}
+    </Box>
+  );
+}