@crvouga/atlas 0.14.0 → 0.16.0

package/packages/visualizer/src/evidence/artifact-tags.tsx

@@ -0,0 +1,285 @@
+import {
+  artifactRef,
+  artifactTagsOf,
+  displayTag,
+  foldArtifactTags,
+  hasArtifactTag,
+  normalizeTag,
+  normalizeTags,
+  targetKey,
+  type ArtifactTag,
+  type ArtifactTagEntry,
+  type ReviewerTag
+} from '@crvouga/atlas/reports/artifact-tags';
+import type { EvidenceHolder } from '@crvouga/atlas/reports/evidence-detail';
+import type { Attachment } from '@crvouga/atlas/schema';
+import { Alert, Badge, Button, Chip, CloseButton, Group, PasswordInput, Popover, Stack, Switch, Text, TextInput } from '@mantine/core';
+import { IconTag } from '@tabler/icons-react';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { createContext, useContext, useMemo, useState, type FormEvent, type ReactNode } from 'react';
+import { reportAssetUrl, reportJson, staticEvidence } from './api';
+import { exactTime } from './format';
+
+/** What the tags of attachments are filtered by: a tag, and whether tags inherited from the check and run count. */
+type TagFilter = { readonly tag: string; readonly inherited: boolean };
+
+type TagChange = { readonly add?: readonly string[]; readonly remove?: readonly string[] };
+
+type TagsContext = {
+  readonly layer: string;
+  readonly check: string;
+  readonly kind: string;
+  readonly inherited: readonly string[];
+  readonly reviewer: ReadonlyMap<string, readonly ReviewerTag[]>;
+  /** True when the server records reviewer tags. Whether this visitor may is decided by the server when they try. */
+  readonly editable: boolean;
+  readonly filter: TagFilter | null;
+  readonly setFilter: (filter: TagFilter | null) => void;
+  readonly token: string;
+  readonly setToken: (token: string) => void;
+  readonly edit: (attachment: Attachment, change: TagChange) => Promise<void>;
+};
+
+const Tags = createContext<TagsContext | null>(null);
+
+/** The tags an attachment shows here: its producer's, its reviewers' and those inherited from its check and run. */
+function shownTags(attachment: Attachment, context: TagsContext | null): ArtifactTag[] {
+  if (!context) return artifactTagsOf(attachment);
+  const target = { layer: context.layer, check: context.check, kind: context.kind, artifact: artifactRef(attachment) };
+  return artifactTagsOf(attachment, { reviewer: context.reviewer.get(targetKey(target)) ?? [], inherited: context.inherited });
+}
+
+/** Every attachment a holder carries, on its steps and attempts too. */
+function everyAttachment(holder: EvidenceHolder): Attachment[] {
+  const out: Attachment[] = [...(holder.attachments ?? [])];
+  for (const step of holder.steps ?? []) out.push(...(step.attachments ?? []));
+  for (const attempt of holder.attempts ?? []) {
+    out.push(...(attempt.attachments ?? []));
+    for (const step of attempt.steps ?? []) out.push(...(step.attachments ?? []));
+  }
+  return out;
+}
+
+async function readProblem(response: Response): Promise<string> {
+  try {
+    const body = (await response.json()) as { detail?: string; error?: string };
+    return body.detail ?? body.error ?? `The server refused the change (${response.status}).`;
+  } catch {
+    return `The server refused the change (${response.status}).`;
+  }
+}
+
+/**
+ * Makes the tags of the attachments of one result live: reviewers' tags read from the server (when it has them),
+ * the tags a result's attachments inherit from their check and run, the filter chosen by selecting a tag, and
+ * the edit that records a reviewer's tag. Without this around them, attachments still show their producer's tags.
+ */
+export function ArtifactTagsProvider({ layer, kind, check, holders, children }: { layer: string; kind: string; check: string; holders: readonly EvidenceHolder[]; children: ReactNode }) {
+  const client = useQueryClient();
+  const [filter, setFilter] = useState<TagFilter | null>(null);
+  const [token, setToken] = useState('');
+  const overlay = useQuery({
+    queryKey: ['artifact-tags'],
+    queryFn: ({ signal }) => reportJson<{ entries: ArtifactTagEntry[] }>('/artifact-tags', signal),
+    enabled: !staticEvidence,
+    staleTime: 5000,
+    retry: false
+  });
+  const reviewer = useMemo(() => foldArtifactTags(overlay.data?.entries ?? []), [overlay.data]);
+  const inherited = useMemo(() => normalizeTags(holders.flatMap((holder) => holder.tags ?? [])), [holders]);
+  const value = useMemo<TagsContext>(
+    () => ({
+      layer,
+      check,
+      kind,
+      inherited,
+      reviewer,
+      editable: overlay.isSuccess,
+      filter,
+      setFilter,
+      token,
+      setToken,
+      edit: async (attachment, change) => {
+        const response = await fetch(reportAssetUrl('/artifact-tags'), {
+          method: 'POST',
+          headers: { 'content-type': 'application/json', ...(token ? { authorization: `Bearer ${token}` } : {}) },
+          body: JSON.stringify({ target: { layer, check, kind, artifact: artifactRef(attachment) }, ...change })
+        });
+        if (!response.ok) throw new Error(await readProblem(response));
+        await client.invalidateQueries({ queryKey: ['artifact-tags'] });
+      }
+    }),
+    [layer, check, kind, inherited, reviewer, overlay.isSuccess, filter, token, client]
+  );
+  return <Tags.Provider value={value}>{children}</Tags.Provider>;
+}
+
+/** The attachments that pass the chosen tag filter, or all of them when there is none. */
+export function useFilteredAttachments(attachments: readonly Attachment[]): readonly Attachment[] {
+  const context = useContext(Tags);
+  const filter = context?.filter;
+  if (!context || !filter) return attachments;
+  return attachments.filter((attachment) => hasArtifactTag(shownTags(attachment, context), filter.tag, { inherited: filter.inherited }));
+}
+
+/** Says which tag the evidence is filtered by, how many attachments match, whether inherited tags count, and clears the filter. Nothing when no tag is chosen. */
+export function TagFilterBar({ holders }: { holders: readonly EvidenceHolder[] }) {
+  const context = useContext(Tags);
+  const filter = context?.filter;
+  if (!context || !filter) return null;
+  const all = holders.flatMap(everyAttachment);
+  const matching = all.filter((attachment) => hasArtifactTag(shownTags(attachment, context), filter.tag, { inherited: filter.inherited })).length;
+  return (
+    <Group aria-label="Tag filter" role="group" gap="sm" align="center">
+      <Text role="status" component="div">
+        {matching} of {all.length} {all.length === 1 ? 'attachment' : 'attachments'} tagged {displayTag(filter.tag)}
+      </Text>
+      <Switch
+        label="Include tags inherited from the check and run"
+        checked={filter.inherited}
+        onChange={(event) => context.setFilter({ tag: filter.tag, inherited: event.currentTarget.checked })}
+      />
+      <Button type="button" variant="subtle" onClick={() => context.setFilter(null)}>
+        Clear filter
+      </Button>
+    </Group>
+  );
+}
+
+function Provenance({ tag }: { tag: ArtifactTag }) {
+  if (tag.source === 'inherited')
+    return (
+      <Text span inherit c="dimmed">
+        {' '}
+        inherited
+      </Text>
+    );
+  if (tag.source === 'reviewer')
+    return (
+      <Text span inherit c="dimmed">
+        {' '}
+        added by {tag.by}
+        {tag.atMs !== undefined ? `, ${exactTime(tag.atMs)}` : ''}
+      </Text>
+    );
+  return null;
+}
+
+function TagEditor({ attachment }: { attachment: Attachment }) {
+  const context = useContext(Tags)!;
+  const [opened, setOpened] = useState(false);
+  const [text, setText] = useState('');
+  const [error, setError] = useState('');
+  const [busy, setBusy] = useState(false);
+  const normalized = normalizeTag(text);
+  const submit = async (event: FormEvent) => {
+    event.preventDefault();
+    if (normalized === null || busy) return;
+    setBusy(true);
+    setError('');
+    try {
+      await context.edit(attachment, { add: [normalized] });
+      setText('');
+      setOpened(false);
+    } catch (problem) {
+      setError(problem instanceof Error ? problem.message : 'The tag could not be saved.');
+    } finally {
+      setBusy(false);
+    }
+  };
+  return (
+    <Popover opened={opened} onChange={setOpened} position="bottom-start" trapFocus withArrow>
+      <Popover.Target>
+        <Button type="button" variant="subtle" size="compact-sm" leftSection={<IconTag size={16} aria-hidden="true" />} onClick={() => setOpened((now) => !now)}>
+          Add tag
+        </Button>
+      </Popover.Target>
+      <Popover.Dropdown>
+        <form onSubmit={submit} aria-label={`Add a tag to ${attachment.name}`}>
+          <Stack gap="sm">
+            <TextInput
+              label="Tag"
+              description="demo and #demo are the same tag."
+              value={text}
+              onChange={(event) => setText(event.currentTarget.value)}
+              data-autofocus
+            />
+            <PasswordInput
+              label="Token"
+              description="A token that may publish. Kept only in this tab. Not needed on a server without tokens."
+              value={context.token}
+              onChange={(event) => context.setToken(event.currentTarget.value)}
+              autoComplete="off"
+            />
+            {error && (
+              <Alert color="red" role="alert">
+                {error}
+              </Alert>
+            )}
+            <Group>
+              <Button type="submit" variant="filled" loading={busy} disabled={normalized === null}>
+                Save tag
+              </Button>
+            </Group>
+          </Stack>
+        </form>
+      </Popover.Dropdown>
+    </Popover>
+  );
+}
+
+/**
+ * The tags of one attachment, as chips under its card: `#demo` from its producer, from a reviewer (with who and
+ * when) or inherited from its check and run (said so). Selecting a chip filters the evidence to the attachments
+ * with that tag. A reviewer's tag can be removed, and any attachment tagged, when the server records reviewer tags.
+ */
+export function ArtifactTagList({ attachment }: { attachment: Attachment }) {
+  const context = useContext(Tags);
+  const error = useRemovalError();
+  const tags = shownTags(attachment, context);
+  if (!tags.length && !context?.editable) return null;
+  return (
+    <Stack gap="xs" aria-label={`Tags of ${attachment.name}`}>
+      <Group gap="xs" align="center">
+        {tags.map((tag) =>
+          context ? (
+            <Group key={tag.tag} gap={0} wrap="nowrap">
+              <Chip
+                size="xs"
+                variant="light"
+                checked={context.filter?.tag === tag.tag}
+                onChange={() => context.setFilter(context.filter?.tag === tag.tag ? null : { tag: tag.tag, inherited: tag.source === 'inherited' })}
+              >
+                {displayTag(tag.tag)}
+                <Provenance tag={tag} />
+              </Chip>
+              {tag.source === 'reviewer' && context.editable && (
+                <CloseButton
+                  size="sm"
+                  aria-label={`Remove ${displayTag(tag.tag)} from ${attachment.name}`}
+                  onClick={() => void context.edit(attachment, { remove: [tag.tag] }).catch((problem: unknown) => error.set(problem instanceof Error ? problem.message : 'The tag could not be removed.'))}
+                />
+              )}
+            </Group>
+          ) : (
+            <Badge key={tag.tag} variant="light" tt="none">
+              {displayTag(tag.tag)}
+              <Provenance tag={tag} />
+            </Badge>
+          )
+        )}
+        {context?.editable && <TagEditor attachment={attachment} />}
+      </Group>
+      {error.message && (
+        <Alert color="red" role="alert">
+          {error.message}
+        </Alert>
+      )}
+    </Stack>
+  );
+}
+
+function useRemovalError() {
+  const [message, set] = useState('');
+  return { message, set };
+}

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

@@ -6,6 +6,7 @@ import type { Annotation, Attachment, Attempt, Step } from '@crvouga/atlas/schem
 import { Accordion, Alert, Anchor, Box, Code, Flex, Image, List, Stack, Text, Title } from '@mantine/core';
 import { useQuery } from '@tanstack/react-query';
 import { useMemo, type ReactNode } from 'react';
+import { ArtifactTagList, ArtifactTagsProvider, TagFilterBar, useFilteredAttachments } from './artifact-tags';
 import { reportAssetUrl, reportJson, reportText } from './api';
 import { duration, plural } from './format';
 import { StatusMark } from './marks';
@@ -171,10 +172,12 @@ function Artifact({ attachment, layer }: { attachment: Attachment; layer: string
           </Text>
         )}
       </Box>
+      <ArtifactTagList attachment={attachment} />
     </List.Item>
   );
 }
-export function Attachments({ attachments, layer }: { attachments: readonly Attachment[]; layer: string }) {
+export function Attachments({ attachments: all, layer }: { attachments: readonly Attachment[]; layer: string }) {
+  const attachments = useFilteredAttachments(all);
   if (!attachments.length) return null;
   return (
     <Box aria-label="Attachments" component="section" mb="lg">
@@ -410,16 +413,19 @@ export function ResultEvidence({ layer, row }: { layer: LayerHeader; row: LayerR
     Array.isArray(value) ? value.length > 0 : value && typeof value === 'object' ? Object.keys(value).length > 0 : false
   );
   return (
-    <Stack aria-label="Evidence" gap="sm" miw={0}>
-      <Evidence holder={check} layer={layer.id} steps />
-      {hasRun && (
-        <Box aria-label="From the run" component="section" mb="lg">
-          <Title order={4} mb="sm">
-            From the run
-          </Title>
-          <Evidence holder={run} layer={layer.id} />
-        </Box>
-      )}
-    </Stack>
+    <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 />
+        {hasRun && (
+          <Box aria-label="From the run" component="section" mb="lg">
+            <Title order={4} mb="sm">
+              From the run
+            </Title>
+            <Evidence holder={run} layer={layer.id} />
+          </Box>
+        )}
+      </Stack>
+    </ArtifactTagsProvider>
   );
 }

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

@@ -1,12 +1,16 @@
-import { IconArrowLeft } from '@tabler/icons-react';
+import { IconAlertTriangle, IconArrowLeft, IconVideo } from '@tabler/icons-react';
 import { Alert, Anchor, Box, Button, Code, Flex, Group, List, Stack, Table, Text, TextInput, Title, VisuallyHidden } from '@mantine/core';
 /**
  * @module Runs view
  *
  * The CI runs that produced the report, newest first: when, on which branch and commit, which environments, how many
- * tests and how they went, how long it took, and a link to the run. Opening one lists every test it ran, filterable,
- * with a way to show exactly those tests in the explorer.
+ * tests and how they went, how long it took, whether it has recordings to watch, and a link to the run. Opening one lists
+ * every test it ran, filterable, with a way to show exactly those tests in the explorer. Videos are counted as
+ * references (every mention) and as distinct playable recordings (identical bytes are one), and a reference whose file
+ * was never stored is shown as unavailable, never as a recording.
  */
+import { videoCounts } from '@crvouga/atlas/reports/evidence-detail';
+import type { VideoCounts, VideoRef } from '@crvouga/atlas/reports/evidence-types';
 import { environmentLabel } from '@crvouga/atlas/reports/layer-axes';
 import { formatMs, type RunResult, type RunSummary } from '@crvouga/atlas/reports/test-catalog';
 import { Link } from '@tanstack/react-router';
@@ -14,7 +18,7 @@ import { useMemo, useState } from 'react';
 import { ago, exactTime, plural, shortSha, statusWord, useNow } from '../evidence/format';
 import { Meter, StatusMark } from '../evidence/marks';
 import { useRunDetail, useRunList } from './catalog';
-import { patched, useExplorerSearch } from './navigate';
+import { patched, useExplorerNavigate, useExplorerSearch } from './navigate';
 import { runName } from './parts';
 const RUN_ROWS = 50;
 const RESULT_ROWS = 200;
@@ -60,8 +64,65 @@ function Counts({ run }: { run: RunSummary }) {
     </Text>
   );
 }
+/** Who holds a video, for a person: the test, one of its tries, or a step (in a try). */
+function ownerText(video: VideoRef): string {
+  const attempt = video.attempt === undefined ? '' : `try ${video.attempt + 1}`;
+  if (video.owner === 'layer') return 'the run';
+  if (video.owner === 'step') return `step “${video.step ?? ''}”${attempt ? `, ${attempt}` : ''}`;
+  if (video.owner === 'attempt') return attempt || 'a try';
+  return 'the test';
+}
+const UNAVAILABLE = 'Listed in the report, but its file was never stored, so it cannot be played.';
+/** The unavailable references of a video summary and why they cannot be watched. */
+function Unavailable({ videos }: { videos: VideoCounts }) {
+  if (!videos.unavailable) return null;
+  return (
+    <Text component="div" size="xs" c="dimmed" data-video-unavailable>
+      <IconAlertTriangle size={16} aria-hidden="true" /> {plural(videos.unavailable, 'video', 'videos')} unavailable. {UNAVAILABLE}
+    </Text>
+  );
+}
+/** A run's videos in its row: a link to the recordings, how many references they come from, and what cannot be played. */
+function RunVideos({ run }: { run: RunSummary }) {
+  const videos = run.videos;
+  if (!videos) return <Text span inherit c="dimmed" data-video="none">No video</Text>;
+  return (
+    <Stack gap={0} data-video={videos.recordings > 0 ? 'available' : 'unavailable'}>
+      {videos.recordings > 0 && (
+        <Anchor
+          aria-label={`Watch ${plural(videos.recordings, 'recording', 'recordings')} in run ${runName(run.key)}`}
+          renderRoot={(props) => (
+            <Link {...props} to="/" search={patched({ openRun: run.key, video: true })} resetScroll={false} activeOptions={{ exact: true }} />
+          )}
+        >
+          <IconVideo size={16} aria-hidden="true" /> {plural(videos.recordings, 'video', 'videos')}
+        </Anchor>
+      )}
+      {videos.references !== videos.recordings + videos.unavailable && (
+        <Text component="div" size="xs" c="dimmed">
+          {plural(videos.references, 'reference', 'references')}
+        </Text>
+      )}
+      <Unavailable videos={videos} />
+    </Stack>
+  );
+}
+/** The Has video filter: a toggle named by its meaning and the count of what it matches. */
+function HasVideo({ count, pressed, noun, onToggle }: { count: number; pressed: boolean; noun: [string, string]; onToggle: () => void }) {
+  return (
+    <Button type="button" aria-pressed={pressed} aria-label={`Has video: ${plural(count, noun[0], noun[1])}`} onClick={onToggle} variant="light" leftSection={<IconVideo size={16} aria-hidden="true" />}>
+      Has video{' '}
+      <Text span inherit>
+        {count}
+      </Text>
+    </Button>
+  );
+}
 function RunTable() {
-  const runs = useRunList();
+  const search = useExplorerSearch();
+  const go = useExplorerNavigate();
+  const video = search.video === true;
+  const runs = useRunList(true, video);
   const now = useNow();
   const [shown, setShown] = useState(RUN_ROWS);
   if (runs.isPending)
@@ -77,19 +138,30 @@ function RunTable() {
       </Alert>
     );
   const list = runs.data.runs;
-  if (!list.length)
+  const withVideo = runs.data.withVideo;
+  if (!list.length && !video)
     return (
       <Text component="div" c="dimmed">
         No runs recorded yet.
       </Text>
     );
+  const noun = video ? 'with a video' : '';
   return (
     <Box aria-label="Runs" component="section" mb="lg">
       <Flex gap="xs" align="center" wrap="wrap">
         {runs.data.total > list.length
-          ? `The newest ${list.length} of ${plural(runs.data.total, 'run', 'runs')}`
-          : plural(list.length, 'run', 'runs')}
+          ? `The newest ${list.length} of ${plural(runs.data.total, 'run', 'runs')} ${noun}`.trim()
+          : `${plural(list.length, 'run', 'runs')} ${noun}`.trim()}
+        {(withVideo !== undefined || video) && (
+          <HasVideo count={withVideo ?? list.length} pressed={video} noun={['run', 'runs']} onToggle={() => go({ video: video ? undefined : true })} />
+        )}
       </Flex>
+      {!list.length && (
+        <Text component="div" c="dimmed">
+          No run has a playable video recording.{' '}
+          {runs.data.withVideo === undefined && 'This server does not report which runs have recordings.'}
+        </Text>
+      )}
       <Table.ScrollContainer minWidth={600}>
         <Table data-runs>
           <Table.Thead>
@@ -101,6 +173,7 @@ function RunTable() {
               <Table.Th scope="col">Tests</Table.Th>
               <Table.Th scope="col">Outcomes</Table.Th>
               <Table.Th scope="col">Span</Table.Th>
+              <Table.Th scope="col">Video</Table.Th>
               <Table.Th scope="col">
                 <VisuallyHidden>CI run</VisuallyHidden>
               </Table.Th>
@@ -113,7 +186,7 @@ function RunTable() {
                   <Anchor
                     aria-label={`Open run ${runLabel(run)}`}
                     renderRoot={(props) => (
-                      <Link {...props} to="/" search={patched({ openRun: run.key })} resetScroll={false} activeOptions={{ exact: true }} />
+                      <Link {...props} to="/" search={patched({ openRun: run.key, video: undefined })} resetScroll={false} activeOptions={{ exact: true }} />
                     )}
                   >
                     {ago(run.endedAtMs, now)}
@@ -139,6 +212,9 @@ function RunTable() {
                   <Counts run={run} />
                 </Table.Td>
                 <Table.Td>{formatMs(run.spanMs)}</Table.Td>
+                <Table.Td>
+                  <RunVideos run={run} />
+                </Table.Td>
                 <Table.Td>
                   {run.runUrl ? (
                     <Anchor href={run.runUrl} target="_blank" rel="noreferrer">
@@ -159,6 +235,26 @@ function RunTable() {
     </Box>
   );
 }
+/** The videos of one result and who holds them, as text (the whole row is one link, so nothing here is interactive). */
+function ResultVideos({ videos }: { videos: readonly VideoRef[] | undefined }) {
+  const counts = videoCounts(videos);
+  if (!counts || !videos) return null;
+  const owners = [...new Set(videos.filter((item) => item.available).map(ownerText))];
+  return (
+    <>
+      {counts.recordings > 0 && (
+        <Text span inherit data-video="available">
+          <IconVideo size={16} aria-hidden="true" /> {plural(counts.recordings, 'video', 'videos')} ({owners.join('; ')})
+        </Text>
+      )}
+      {counts.unavailable > 0 && (
+        <Text span inherit data-video-unavailable>
+          <IconAlertTriangle size={16} aria-hidden="true" /> {plural(counts.unavailable, 'video', 'videos')} unavailable
+        </Text>
+      )}
+    </>
+  );
+}
 const RESULT_FILTERS = [
   { id: '', label: 'All' },
   { id: 'failed', label: 'Failed' },
@@ -166,6 +262,9 @@ const RESULT_FILTERS = [
   { id: 'not-run', label: 'Not run' }
 ] as const;
 function RunDetailView({ runKey }: { runKey: string }) {
+  const search = useExplorerSearch();
+  const go = useExplorerNavigate();
+  const video = search.video === true;
   const detail = useRunDetail(runKey);
   const now = useNow();
   const [status, setStatus] = useState('');
@@ -177,11 +276,12 @@ function RunDetailView({ runKey }: { runKey: string }) {
     return results.filter(
       (result) =>
         (!status || result.status === status) &&
+        (!video || (videoCounts(result.videos)?.recordings ?? 0) > 0) &&
         terms.every((term) =>
           `${result.title}\n${result.specPath ?? ''}\n${result.environment ?? ''}\n${result.producer}`.toLowerCase().includes(term)
         )
     );
-  }, [results, status, words]);
+  }, [results, status, words, video]);
   const bySpec = useMemo(() => {
     const groups = new Map<string, RunResult[]>();
     for (const result of filtered.slice(0, shown)) {
@@ -275,6 +375,13 @@ function RunDetailView({ runKey }: { runKey: string }) {
         </Text>
         <Counts run={run} />
       </Stack>
+      {run.videos && (
+        <Text component="div" data-run-videos>
+          <IconVideo size={16} aria-hidden="true" /> {plural(run.videos.recordings, 'video', 'videos')}
+          {run.videos.references !== run.videos.recordings + run.videos.unavailable && ` from ${plural(run.videos.references, 'reference', 'references')}`}
+          <Unavailable videos={run.videos} />
+        </Text>
+      )}
       <Flex gap="xs" align="center" wrap="wrap">
         <Anchor
           renderRoot={(props) => (
@@ -321,6 +428,16 @@ function RunDetailView({ runKey }: { runKey: string }) {
           </Button>
         ))}
       </Flex>
+      {(run.videos || video) && (
+        <Flex gap="xs" align="center" wrap="wrap">
+          <HasVideo
+            count={results.filter((result) => (videoCounts(result.videos)?.recordings ?? 0) > 0).length}
+            pressed={video}
+            noun={['result', 'results']}
+            onToggle={() => go({ video: video ? undefined : true })}
+          />
+        </Flex>
+      )}
       {!filtered.length && (
         <Text component="div" c="dimmed">
           No result matches.
@@ -368,6 +485,7 @@ function RunDetailView({ runKey }: { runKey: string }) {
                       <Text span inherit>
                         {statusWord(result.status)}
                       </Text>
+                      <ResultVideos videos={result.videos} />
                     </Flex>
                     {result.status === 'failed' && result.detail && (
                       <Text span inherit c="red.7" size="xs" lineClamp={2}>

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

@@ -19,6 +19,7 @@ import type { CheckSlot, EvidenceView } from '@crvouga/atlas/reports/evidence-vi
 import {
   catalogModel,
   haystackOf,
+  hasVideo,
   runDetail,
   runList,
   testHistory,
@@ -233,15 +234,24 @@ export function useTestHistory(key: string | undefined) {
   });
 }
 
-/** CI runs, newest first. */
-export function useRunList(enabled = true) {
+/**
+ * CI runs, newest first. With `video`, only the runs that have a playable video recording: the server filters every run
+ * before it pages them, so the count is the whole dataset's. A server that does not know the parameter answers with
+ * every run (and no video information), which is filtered here.
+ */
+export function useRunList(enabled = true, video = false) {
   const catalog = useTestCatalog();
   return useQuery({
-    queryKey: ['test-runs', catalog.version],
-    queryFn: ({ signal }): Promise<RunList> | RunList => {
-      if (catalog.source === 'server') return reportJson<RunList>(`/runs?limit=${RUNS_SHOWN}`, signal);
+    queryKey: ['test-runs', catalog.version, video],
+    queryFn: async ({ signal }): Promise<RunList> => {
+      if (catalog.source === 'server') {
+        const list = await reportJson<RunList>(`/runs?limit=${RUNS_SHOWN}${video ? '&video=true' : ''}`, signal);
+        if (!video || list.withVideo !== undefined) return list;
+        const runs = list.runs.filter(hasVideo);
+        return { ...list, total: runs.length, runs };
+      }
       const history = catalog.model?.history;
-      return history ? runList(history, catalog.version, RUNS_SHOWN) : { schemaVersion: 1, version: catalog.version, total: 0, runs: [] };
+      return history ? runList(history, catalog.version, RUNS_SHOWN, { video }) : { schemaVersion: 1, version: catalog.version, total: 0, runs: [] };
     },
     enabled: enabled && catalog.model !== null,
     placeholderData: keepPreviousData,

package/packages/visualizer/src/explorer/search.ts

@@ -38,7 +38,9 @@ export const ExplorerSearchFields = {
   /** The run opened in the Runs tab. */
   openRun: text,
   /** Pins the open test's detail to one exact layer (a run's record of it), instead of the latest combined evidence. */
-  layer: text
+  layer: text,
+  /** Only the runs, and the results of an opened run, that have a playable video recording. */
+  video: z.preprocess((value) => (value === 'true' ? true : value), z.literal(true)).optional().catch(undefined)
 };
 
 /** The explorer's search parameters as the route holds them. */
@@ -57,6 +59,7 @@ export type ExplorerSearch = {
   readonly tab?: 'runs';
   readonly openRun?: string;
   readonly layer?: string;
+  readonly video?: true;
 };
 
 /** The values of a comma-separated filter, empty when it is not set. */