@crvouga/atlas 1.1.0 → 1.3.0

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

@@ -1,5 +1,6 @@
 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';
@@ -8,7 +9,8 @@ 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 { 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,16 +35,6 @@ 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;
-  }
-}
 function TextValue({ attachment, path }: { attachment: Attachment; path: string | null }) {
   const stored = useQuery({
     queryKey: ['artifact-text', path ?? ''],
@@ -146,8 +138,12 @@ 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 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)}>
+      {scoped && <ScopeNotice scope={scope} name={attachment.name} />}
       {body}
       <Box component="figcaption">
         <Text span inherit fw={600}>
@@ -300,7 +296,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 +308,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 +369,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 +406,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 +415,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/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>
+  );
+}

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

@@ -12,6 +12,7 @@ import {
   Flex,
   Group,
   List,
+  MultiSelect,
   NativeSelect,
   Paper,
   SimpleGrid,
@@ -53,8 +54,9 @@ import { useRunDetail, useTestCatalog } from './catalog';
 import { groupTests, tally, type TestGroupView } from './groups';
 import { patched, useExplorerNavigate, useExplorerSearch } from './navigate';
 import { Badges, EnvironmentChips, projectTitle, runName } from './parts';
+import { ArtifactsView } from './ArtifactsView';
 import { RunsView } from './RunsView';
-import { narrowed, queryOf, TEST_GROUPS, toggled, values, type ExplorerSearch, type TestGroup } from './search';
+import { joined, narrowed, queryOf, TEST_GROUPS, toggled, values, type ExplorerSearch, type TestGroup } from './search';
 import { TestDetail } from './TestDetail';
 /** Groups start closed when there are more of them than this, unless the list is short. */
 const OPEN_GROUPS = 40;
@@ -132,7 +134,7 @@ export function Explorer() {
   const model = catalog.model;
   const selected = search.test ? (model?.byKey.get(search.test) ?? null) : null;
   const empty = model !== null && model.tests.length === 0;
-  const split = !!search.test && search.tab !== 'runs';
+  const split = !!search.test && search.tab !== 'runs' && search.tab !== 'artifacts';
   return (
     <Container size="xl" py="xl">
       <Box aria-label="Test explorer" component="article" miw={0}>
@@ -143,7 +145,7 @@ export function Explorer() {
           {model && model.tests.length > 0 && (
             <Tabs
               value={search.tab ?? 'tests'}
-              onChange={(value) => go({ tab: value === 'runs' ? 'runs' : undefined, test: undefined, openRun: undefined, layer: undefined })}
+              onChange={(value) => go({ tab: value === 'runs' || value === 'artifacts' ? value : undefined, test: undefined, openRun: undefined, layer: undefined })}
             >
               <Tabs.List aria-label="Explorer view">
                 <Tabs.Tab
@@ -166,6 +168,7 @@ export function Explorer() {
                 >
                   Runs
                 </Tabs.Tab>
+                <Tabs.Tab value="artifacts">Artifacts</Tabs.Tab>
               </Tabs.List>
             </Tabs>
           )}
@@ -224,6 +227,8 @@ export function Explorer() {
           listing &&
           (search.tab === 'runs' ? (
             <RunsView />
+          ) : search.tab === 'artifacts' ? (
+            <ArtifactsView />
           ) : (
             <>
               <InsightStrip model={model} scope={listing.scope} search={search} />
@@ -506,6 +511,8 @@ 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 } }] : [])
   ];
   return (
@@ -614,6 +621,23 @@ function Toolbar({
             </NativeSelect>
           </Box>
         )}
+        {((model.facets.artifactTags?.length ?? 0) > 0 || values(search.artifactTag).length > 0) && (
+          <MultiSelect
+            aria-label="Artifact tag"
+            placeholder={values(search.artifactTag).length ? undefined : 'Any artifact tag'}
+            data={[
+              ...(model.facets.artifactTags ?? []).map(({ value, count }) => ({ value, label: `#${value} (${count})` })),
+              ...values(search.artifactTag)
+                .filter((tag) => !model.facets.artifactTags?.some((facet) => facet.value === tag))
+                .map((tag) => ({ value: tag, label: `#${tag} (0)` }))
+            ]}
+            value={values(search.artifactTag)}
+            searchable
+            clearable
+            nothingFoundMessage="Nothing found"
+            onChange={(next) => go({ artifactTag: joined(next) })}
+          />
+        )}
         {model.facets.domains.length > 1 && (
           <Box component="label">
             <VisuallyHidden>Domain</VisuallyHidden>
@@ -631,6 +655,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>
@@ -659,6 +700,9 @@ function Toolbar({
                 domain: undefined,
                 spec: undefined,
                 tag: undefined,
+                scope: undefined,
+                artifactTag: undefined,
+                inherited: undefined,
                 inRun: undefined
               });
             }}

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

@@ -12,14 +12,17 @@ import { Alert, Anchor, Box, Button, Code, Flex, Group, List, Stack, Table, Text
 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 type { FilterName } from '@crvouga/atlas/reports/artifact-query';
 import { formatMs, type RunResult, type RunSummary } from '@crvouga/atlas/reports/test-catalog';
 import { Link } from '@tanstack/react-router';
 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 { FilterBar } from './filters';
 import { patched, useExplorerNavigate, useExplorerSearch } from './navigate';
 import { runName } from './parts';
+import { filtered, filterOf, NO_FILTERS } from './search';
 const RUN_ROWS = 50;
 const RESULT_ROWS = 200;
 /** The Runs tab: the run list, or the run opened in it. */
@@ -118,11 +121,25 @@ function HasVideo({ count, pressed, noun, onToggle }: { count: number; pressed:
     </Button>
   );
 }
+/** What a filter is called when a page says a server could not apply it. */
+const FILTER_WORDS: Partial<Record<FilterName, string>> = { artifactTag: 'tag', type: 'media type', label: 'label', domain: 'domain', spec: 'spec' };
+/** Says which filters the list is not narrowed by, because the server that answered ignored them. */
+export function NotApplied({ names, noun }: { names: readonly FilterName[]; noun: string }) {
+  if (!names.length) return null;
+  return (
+    <Alert role="status" color="blue" my="sm" data-not-applied>
+      This server cannot filter {noun} by {names.map((name) => FILTER_WORDS[name] ?? name).join(', ')}, so the list below is not narrowed by {names.length > 1 ? 'them' : 'it'}. Update the server to use{' '}
+      {names.length > 1 ? 'these filters' : 'this filter'}.
+    </Alert>
+  );
+}
 function RunTable() {
   const search = useExplorerSearch();
   const go = useExplorerNavigate();
   const video = search.video === true;
-  const runs = useRunList(true, video);
+  const filter = useMemo(() => filterOf(search), [search]);
+  const narrow = filtered(search);
+  const runs = useRunList(true, filter);
   const now = useNow();
   const [shown, setShown] = useState(RUN_ROWS);
   if (runs.isPending)
@@ -139,29 +156,34 @@ function RunTable() {
     );
   const list = runs.data.runs;
   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' : '';
+  const noun = narrow ? 'matching' : '';
   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')} ${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 && (
+      {(narrow || list.length > 0) && <FilterBar facets={runs.data.facets} search={search} tab="runs" extra={withVideo !== undefined || video ? <HasVideo count={withVideo ?? list.length} pressed={video} noun={['run', 'runs']} onToggle={() => go({ video: video ? undefined : true })} /> : undefined} />}
+      <NotApplied names={runs.data.notApplied} noun="runs" />
+      {!list.length && !narrow && (
         <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.'}
+          No runs recorded yet.
+        </Text>
+      )}
+      {list.length > 0 && (
+        <Text role="status" component="div">
+          {runs.data.total > list.length
+            ? `The newest ${list.length} of ${plural(runs.data.total, 'run', 'runs')} ${noun}`.trim()
+            : `${plural(list.length, 'run', 'runs')} ${noun}`.trim()}
         </Text>
       )}
+      {!list.length && narrow && (
+        <Stack gap="xs" align="flex-start" role="status" data-no-match>
+          <Text component="div" c="dimmed">
+            No run matches these filters.
+            {video && withVideo === undefined && ' This server does not report which runs have recordings.'}
+          </Text>
+          <Button type="button" variant="light" onClick={() => go(NO_FILTERS)}>
+            Clear filters
+          </Button>
+        </Stack>
+      )}
       <Table.ScrollContainer minWidth={600}>
         <Table data-runs>
           <Table.Thead>
@@ -174,6 +196,7 @@ function RunTable() {
               <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">Tags</Table.Th>
               <Table.Th scope="col">
                 <VisuallyHidden>CI run</VisuallyHidden>
               </Table.Th>
@@ -215,6 +238,7 @@ function RunTable() {
                 <Table.Td>
                   <RunVideos run={run} />
                 </Table.Td>
+                <Table.Td data-tags>{run.artifactTags?.map((tag) => `#${tag}`).join(' ') || '—'}</Table.Td>
                 <Table.Td>
                   {run.runUrl ? (
                     <Anchor href={run.runUrl} target="_blank" rel="noreferrer">