@crvouga/atlas 1.9.0 → 1.11.0

package/packages/visualizer/src/evidence/behavior-panel.tsx

@@ -12,6 +12,8 @@ import { environmentLabel } from '@crvouga/atlas/reports/layer-axes';
 import { Alert, Badge, Box, Group, List, Paper, Stack, Tabs, Text, Title } from '@mantine/core';
 import { useMemo, type ReactNode } from 'react';
 
+import type { Assessment, ReleaseIdentity } from './applicability';
+import { ApplicabilitySummary } from './applicability-view';
 import { attachmentSource, useCheckDetail } from './artifacts';
 import { COVERAGE, COVERAGE_ORDER, type Behavior, type CoverageCounts, type CoverageState, type Revision } from './behavior';
 import { PlainSteps } from './check-detail';
@@ -141,10 +143,16 @@ function Player({ result }: { result: EvidenceResult }) {
 export function BehaviorPanel({
   behavior,
   inspect,
-  start
+  start,
+  applicability,
+  release = {}
 }: {
   behavior: Behavior;
   inspect: ReactNode;
+  /** How the evidence applies to the promise and the named release, shown with the recording and under Inspect. */
+  applicability?: Assessment;
+  /** The release the reader named, if any. */
+  release?: ReleaseIdentity;
   /** The tab to open on; by default Watch when there is something to watch, Inspect while a run is in progress (its progress lives there), else Read. */ start?:
     'read' | 'watch' | 'inspect';
 }) {
@@ -236,11 +244,13 @@ export function BehaviorPanel({
             </Group>
           )}
           <RevisionLine revision={revision} />
+          {applicability && <ApplicabilitySummary assessment={applicability} release={release} />}
         </Stack>
       </Tabs.Panel>
       <Tabs.Panel value="inspect">
         <Stack gap="sm" miw={0}>
           <RevisionLine revision={revision} />
+          {applicability && <ApplicabilitySummary assessment={applicability} release={release} />}
           {inspect}
         </Stack>
       </Tabs.Panel>

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

@@ -1,8 +1,10 @@
 import type { CheckSlot, SpecEvidence } from '@crvouga/atlas/reports/evidence-view';
-import { Alert, Box, Container, List, Stack, Text, Title } from '@mantine/core';
+import { Alert, Box, Container, Group, List, Stack, Text, Title } from '@mantine/core';
 import { useMemo } from 'react';
 import { outlinePath, type SpecKind } from '../spec-kind';
 import { CheckDetail, PlainSteps, ResultRow, type CheckSelection, type SelectCheck } from './check-detail';
+import { assessBehavior, hasRelease, needsAttention, type Assessment } from './applicability';
+import { ApplicabilityControls, useApplicabilityState, VerdictBadge } from './applicability-view';
 import { behaviorOf, coverageCounts, scenarioBehaviors, type Behavior, type RevisionSource } from './behavior';
 import { BehaviorPanel, CoverageBadge, CoverageSummary } from './behavior-panel';
 import { useEvidence } from './evidence-context';
@@ -69,12 +71,23 @@ export function FeaturePage({ file, text, kind, entry, selection, select }: Prop
     return { byScenario, all: [...[...byScenario.values()].flat(), ...other] };
   }, [feature, filed, revisions]);
   const counts = useMemo(() => coverageCounts(behaviors.all), [behaviors]);
+  const applicability = useApplicabilityState();
+  const { release, onlyStale } = applicability;
+  const assessments = useMemo(
+    () => new Map<string, Assessment>(behaviors.all.map((behavior) => [behavior.key, assessBehavior(behavior, revisions, release)] as const)),
+    [behaviors, revisions, release]
+  );
+  const staleCount = useMemo(() => [...assessments.values()].filter(needsAttention).length, [assessments]);
+  const hidden = (key: string) => onlyStale && assessments.get(key) !== undefined && !needsAttention(assessments.get(key)!);
   const planned = behaviors.all.length;
+  const leftOver = filed.leftOver.filter((slot) => (!runningOnly || slot.status === 'running') && !hidden(slot.key));
   const toggle = (id: string) => select({ check: selection.check === id ? null : id, layer: null });
   const rows = (scenario: FeatureScenario) =>
     (behaviors.byScenario.get(scenario) ?? []).map((behavior) => {
       if (runningOnly && behavior.slot?.status !== 'running') return null;
+      if (hidden(behavior.key)) return null;
       const { slot } = behavior;
+      const assessed = assessments.get(behavior.key);
       const written = <PlainSteps steps={scenario.steps} examples={scenario.examples} />;
       const id = slot ? slot.id : `scenario:${scenario.name}${behavior.example ? `:${behavior.example}` : ''}`;
       const label = slot
@@ -87,12 +100,19 @@ export function FeaturePage({ file, text, kind, entry, selection, select }: Prop
           key={id}
           label={label}
           slot={slot}
-          badge={<CoverageBadge state={behavior.state} />}
+          badge={
+            <Group gap="xs" wrap="wrap">
+              <CoverageBadge state={behavior.state} />
+              {assessed && (assessed.verdict === 'stale' || (assessed.verdict === 'unknown' && hasRelease(release))) && <VerdictBadge verdict={assessed.verdict} />}
+            </Group>
+          }
           open={selection.check === id}
           onToggle={() => toggle(id)}
         >
           <BehaviorPanel
             behavior={behavior}
+            applicability={assessed}
+            release={release}
             start={selection.check === id && selection.layer ? 'inspect' : undefined}
             inspect={
               slot ? (
@@ -132,6 +152,7 @@ export function FeaturePage({ file, text, kind, entry, selection, select }: Prop
         )}
       </SpecHeader>
       <CoverageSummary counts={counts} total={behaviors.all.length} />
+      {behaviors.all.length > 0 && <ApplicabilityControls state={applicability} stale={staleCount} total={behaviors.all.length} />}
       <SourceText text={text} file={file} withResults />
       <Box component="section" id="spec-results" aria-label="Recorded results" tabIndex={-1}>
         <TestFilter slots={slots} />
@@ -168,7 +189,7 @@ export function FeaturePage({ file, text, kind, entry, selection, select }: Prop
             </List>
           </Box>
         ))}
-        {filed.leftOver.some((slot) => !runningOnly || slot.status === 'running') && (
+        {leftOver.length > 0 && (
           <Box component="section" mb="lg">
             <Title order={2} mb="sm">
               {feature ? 'Other recorded results' : 'Recorded results'}
@@ -179,7 +200,7 @@ export function FeaturePage({ file, text, kind, entry, selection, select }: Prop
               </Text>
             )}
             <List spacing="xs" listStyleType="none">
-              <Bounded items={filed.leftOver.filter((slot) => !runningOnly || slot.status === 'running')} size={40} more="More results">
+              <Bounded items={leftOver} size={40} more="More results">
                 {(slot) => (
                   <ResultRow
                     key={slot.key}

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

@@ -7,20 +7,26 @@
  * 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 { IconLock, IconPlayerPlay, IconVideo } from '@tabler/icons-react';
+import { Alert, Anchor, Box, Button, Code, Group, 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 { staticEvidence } from '../evidence/api';
 import { ago, exactTime, plural, shortSha, statusWord, useNow } from '../evidence/format';
 import { StatusMark } from '../evidence/marks';
 import { useArtifactList } from './catalog';
+import { FreezeCollection } from './collections';
 import { FilterBar } from './filters';
 import { patched, useExplorerNavigate, useExplorerSearch } from './navigate';
 import { runName } from './parts';
+import { entriesFromArtifacts } from './playlist-entries';
+import { WatchPlaylist } from './playlist';
+import { RecordingTextSearch } from './RecordingTextSearch';
 import { filtered, filterOf, NO_FILTERS } from './search';
+import { filterParams } from '@crvouga/atlas/reports/artifact-query';
 
 const ARTIFACT_ROWS = 50;
 
@@ -33,6 +39,9 @@ export function ArtifactsView() {
   const answer = useArtifactList(filter);
   const now = useNow();
   const [shown, setShown] = useState(ARTIFACT_ROWS);
+  const [watching, setWatching] = useState(false);
+  const [freezing, setFreezing] = useState(false);
+  const entries = useMemo(() => (answer.data && !answer.data.unsupported ? entriesFromArtifacts(answer.data.list.results) : []), [answer.data]);
   if (answer.isPending)
     return (
       <Text role="status" component="div" c="dimmed">
@@ -77,6 +86,21 @@ export function ArtifactsView() {
           </Button>
         </Stack>
       )}
+      {list.results.length > 0 && (
+        <Group my="sm" gap="sm">
+          <Button type="button" variant="filled" leftSection={<IconPlayerPlay size={16} aria-hidden="true" />} onClick={() => setWatching(true)}>
+            Watch these {plural(list.results.length, 'result', 'results')}
+          </Button>
+          {!staticEvidence && (
+            <Button type="button" leftSection={<IconLock size={16} aria-hidden="true" />} onClick={() => setFreezing(true)}>
+              Freeze as review collection
+            </Button>
+          )}
+        </Group>
+      )}
+      {watching && <WatchPlaylist entries={entries} total={list.total} onClose={() => setWatching(false)} />}
+      {freezing && <FreezeCollection results={list.results} total={list.total} filterQuery={filterParams(filter).toString()} onClose={() => setFreezing(false)} />}
+      {list.results.length > 0 && <RecordingTextSearch entries={entries} total={list.total} />}
       {list.results.length > 0 && (
         <Table.ScrollContainer minWidth={700}>
           <Table data-artifacts>

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

@@ -44,6 +44,7 @@ import {
 } from '@crvouga/atlas/reports/test-catalog';
 import { Link } from '@tanstack/react-router';
 import { useDeferredValue, useEffect, useMemo, useState } from 'react';
+import { staticEvidence } from '../evidence/api';
 import { useEvidence } from '../evidence/evidence-context';
 import { ago, plural, useNow } from '../evidence/format';
 import { Meter, StatusMark } from '../evidence/marks';
@@ -57,6 +58,7 @@ 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 { CollectionsView } from './collections';
 import { RunsView } from './RunsView';
 import { SearchNotes, TypedFilters } from './search-notes';
 import { EXPLORER_SORTS, joined, narrowed, queryOf, sortOf, TEST_GROUPS, toggled, values, type ExplorerSearch, type ExplorerSort, type TestGroup } from './search';
@@ -167,7 +169,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' && search.tab !== 'artifacts';
+  const split = !!search.test && search.tab !== 'runs' && search.tab !== 'artifacts' && search.tab !== 'collections';
   return (
     <Container size="xl" py="xl">
       <Box aria-label="Test explorer" component="article" miw={0}>
@@ -178,7 +180,7 @@ export function Explorer() {
           {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, artifact: undefined })}
+              onChange={(value) => go({ tab: value === 'runs' || value === 'artifacts' || value === 'collections' ? value : undefined, test: undefined, openRun: undefined, layer: undefined, artifact: undefined, collection: undefined, rev: undefined })}
             >
               <Tabs.List aria-label="Explorer view">
                 <Tabs.Tab
@@ -202,6 +204,7 @@ export function Explorer() {
                   Runs
                 </Tabs.Tab>
                 <Tabs.Tab value="artifacts">Artifacts</Tabs.Tab>
+                {!staticEvidence && <Tabs.Tab value="collections">Collections</Tabs.Tab>}
               </Tabs.List>
             </Tabs>
           )}
@@ -266,6 +269,8 @@ export function Explorer() {
             <RunsView />
           ) : search.tab === 'artifacts' ? (
             <ArtifactsView />
+          ) : search.tab === 'collections' ? (
+            <CollectionsView />
           ) : empty ? null : (
             <>
               <InsightStrip model={model} scope={listing.scope} search={search} />

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

@@ -0,0 +1,355 @@
+/**
+ * @module Search inside recordings
+ *
+ * Finds words that were spoken or shown on screen in the recordings of the Artifacts tab, from the text their producers
+ * supplied (WebVTT, SubRip, timed JSON, a transcript; see `recording-text.ts`). It is the shared search (`find/`) applied
+ * to the indexed segments, so phrases, misspellings, filters typed in the box and meaning-based matches behave as in every
+ * other search box, and a result always shows the words as indexed, never a reworded quotation.
+ *
+ * Nothing is read until words are typed. Then, a few at a time, each listed result's evidence is read through the same
+ * report API that plays its recording, and so under the same access rules: a file the viewer may not read is never
+ * indexed, appears in no snippet or count, and is reported as a recording that could not be searched. The index lives
+ * in this page only; there is no stored or cross-project index. "No match" is said only about recordings whose text was
+ * searched: recordings with no text, silent ones and unreadable text are listed apart, each in its own words. A
+ * match finds a moment; it says nothing about whether the behavior passed, and the result's own outcome stays beside it.
+ */
+import { Accordion, Alert, Anchor, Badge, Button, Group, Highlight, List, Stack, Table, Text, TextInput, Title } from '@mantine/core';
+import { IconPlayerPlay } from '@tabler/icons-react';
+import { useQueryClient } from '@tanstack/react-query';
+import { Link } from '@tanstack/react-router';
+import { useEffect, useMemo, useRef, useState } from 'react';
+
+import { ReportsError, reportText } from '../evidence/api';
+import { attachmentSource } from '../evidence/artifacts';
+import { plural, statusWord } from '../evidence/format';
+import { StatusMark } from '../evidence/marks';
+import { useDocSearch } from '../find/doc-search';
+import { passesFilters } from '../find/query';
+import type { Ranked } from '../find/rank';
+import { patched, useExplorerNavigate, useExplorerSearch } from './navigate';
+import { entryDetailQuery, WatchPlaylist } from './playlist';
+import { recordingState, type PlaylistEntry } from './playlist-entries';
+import {
+  coverageCounts,
+  coverageOf,
+  focusOf,
+  indexTrack,
+  rangeWord,
+  segmentDoc,
+  segmentsOf,
+  TEXT_KIND_WORD,
+  tracksOf,
+  trackReadable,
+  uncertaintyWord,
+  unreadTrack,
+  type IndexedSegment,
+  type RecordingFocus,
+  type TrackResult,
+  type VideoCoverage
+} from './recording-text';
+import { SearchNotes, TypedFilters } from './search-notes';
+import type { CheckDetail } from '@crvouga/atlas/reports/evidence-detail';
+
+/** Results listed before "more". */
+const LISTED = 10;
+/** Results read at once. */
+const READERS = 4;
+
+/** What was learned about one result's recordings. */
+type Read =
+  | { readonly state: 'read'; readonly videos: readonly VideoCoverage[]; readonly segments: readonly IndexedSegment[] }
+  | { readonly state: 'unreadable'; readonly reason: string };
+
+function problem(error: unknown): string {
+  if (error instanceof ReportsError) {
+    if (error.status === 401 || error.status === 403) return 'You are not permitted to read this, so it is not searched.';
+    if (error.status === 404) return 'It is not in the report store, so it is not searched.';
+  }
+  return error instanceof Error ? error.message : 'It could not be read.';
+}
+
+/**
+ * Reads, once `enabled`, the text tracks of each result that has a recording, a few results at a time. What is read lands
+ * as it arrives; `read` of `total` say how far it is.
+ */
+function useRecordingText(entries: readonly PlaylistEntry[], enabled: boolean) {
+  const client = useQueryClient();
+  const cache = useRef(new Map<string, Read>());
+  const [reads, setReads] = useState<ReadonlyMap<string, Read>>(() => new Map());
+  const playable = useMemo(() => entries.filter((entry) => recordingState(entry) === 'playable' && entryDetailQuery(entry) !== null), [entries]);
+  const key = playable.map((entry) => entry.id).join('\n');
+  useEffect(() => {
+    if (!enabled) return;
+    let cancelled = false;
+    const wanted = playable.filter((entry) => !cache.current.has(entry.id));
+    let cursor = 0;
+    const readTrack = async (entry: PlaylistEntry, track: ReturnType<typeof tracksOf>[number]): Promise<TrackResult> => {
+      const readable = trackReadable(track);
+      if (!readable.readable) return { track, state: readable.state, reason: readable.reason, segments: [], timing: 'absent', truncated: false };
+      const attachment = track.attachment;
+      if (attachment.text !== undefined) return indexTrack(track, attachment.text);
+      const path = attachmentSource(attachment, entry.layer).path;
+      if (!path) return unreadTrack(track, 'The text names no stored file.');
+      try {
+        return indexTrack(track, await client.fetchQuery({ queryKey: ['artifact-text', path], queryFn: ({ signal }) => reportText(path, signal), staleTime: Number.POSITIVE_INFINITY, retry: false }));
+      } catch (error) {
+        return unreadTrack(track, problem(error));
+      }
+    };
+    const readEntry = async (entry: PlaylistEntry): Promise<Read> => {
+      let detail: CheckDetail;
+      try {
+        detail = await client.fetchQuery(entryDetailQuery(entry)!);
+      } catch (error) {
+        return { state: 'unreadable', reason: `Its evidence could not be read. ${problem(error)}` };
+      }
+      const results: TrackResult[] = [];
+      for (const track of tracksOf(detail)) results.push(await readTrack(entry, track));
+      const videos = coverageOf(detail, results);
+      return { state: 'read', videos, segments: segmentsOf(entry, detail, results, videos) };
+    };
+    const pull = async () => {
+      for (;;) {
+        const entry = wanted[cursor++];
+        if (entry === undefined || cancelled) return;
+        const done = await readEntry(entry);
+        if (cancelled) return;
+        cache.current.set(entry.id, done);
+        setReads(new Map(cache.current));
+      }
+    };
+    void Promise.all(Array.from({ length: READERS }, pull));
+    return () => {
+      cancelled = true;
+    };
+  }, [client, enabled, key, playable]);
+  const read = useMemo(() => playable.filter((entry) => reads.has(entry.id)).length, [playable, reads]);
+  return { reads, playable, read, total: playable.length };
+}
+
+/** Why a segment is in the results, in words that do not claim more than was matched. */
+function why(hit: Ranked): string {
+  if (hit.exact && hit.literals?.length) return `Exact: ${hit.literals.map((literal) => `“${literal}”`).join(', ')}`;
+  if (hit.semantic) return 'Similar meaning to the indexed words';
+  if (hit.fuzzy) return 'Close spelling of the indexed words';
+  if (hit.partial) return 'Some of the words are in the indexed text';
+  return 'The words are in the indexed text';
+}
+
+const COVERAGE_WORD = { 'not-indexed': 'Not indexed', unsupported: 'Unsupported', failed: 'Failed', searched: 'Searched' } as const;
+const COVERAGE_COLOR = { 'not-indexed': 'gray', unsupported: 'orange', failed: 'red', searched: 'green' } as const;
+
+/** A recording that was not searched, and why. */
+type Unsearched = { readonly key: string; readonly entry: PlaylistEntry; readonly name: string | null; readonly attempt: string; readonly state: 'not-indexed' | 'unsupported' | 'failed'; readonly reason: string };
+
+/** The Artifacts tab's search of the words in its recordings. `entries` are the listed results; `total` how many matched the filters. */
+export function RecordingTextSearch({ entries, total }: { entries: readonly PlaylistEntry[]; total: number }) {
+  const search = useExplorerSearch();
+  const go = useExplorerNavigate();
+  const [draft, setDraft] = useState(search.inside ?? '');
+  useEffect(() => setDraft((current) => (current.trim() === (search.inside ?? '').trim() ? current : (search.inside ?? ''))), [search.inside]);
+  const [shown, setShown] = useState(LISTED);
+  const [opened, setOpened] = useState<RecordingFocus | null>(null);
+  const query = search.inside;
+  const { reads, playable, read, total: readable } = useRecordingText(entries, !!query);
+  const items = useMemo(() => [...reads.values()].flatMap((item) => (item.state === 'read' ? item.segments : [])), [reads]);
+  const docs = useMemo(() => items.map(segmentDoc), [items]);
+  const byId = useMemo(() => new Map(items.map((item) => [item.id, item] as const)), [items]);
+  const found = useDocSearch(docs, query);
+  const matches = useMemo(() => (found.hits ? [...found.hits.values()].filter((hit) => passesFilters(hit.doc.facets, found.parsed.filters)) : null), [found.hits, found.parsed.filters]);
+  const unsearched = useMemo<Unsearched[]>(() => {
+    const out: Unsearched[] = [];
+    for (const entry of playable) {
+      const item = reads.get(entry.id);
+      if (!item) continue;
+      if (item.state === 'unreadable') out.push({ key: entry.id, entry, name: null, attempt: '', state: 'failed', reason: item.reason });
+      else
+        for (const video of item.videos)
+          if (video.state !== 'searched') out.push({ key: `${entry.id}|${video.name}|${video.attempt}`, entry, name: video.name, attempt: video.attempt === null ? '' : `Attempt ${video.attempt + 1}`, state: video.state, reason: video.reason });
+      // A recording the evidence lists no video for, though the catalog does, is counted as not indexed.
+      if (item.state === 'read' && item.videos.length === 0) out.push({ key: `${entry.id}|none`, entry, name: null, attempt: '', state: 'not-indexed', reason: 'The recording could not be matched to any text.' });
+    }
+    return out;
+  }, [playable, reads]);
+  const videos = useMemo(() => [...reads.values()].flatMap((item) => (item.state === 'read' ? item.videos : [])), [reads]);
+  const counts = useMemo(() => coverageCounts(videos), [videos]);
+  const waiting = !!query && read < readable;
+  const noRecording = entries.length - playable.length;
+  const results = matches?.slice(0, shown) ?? [];
+  const resultEntries = new Set((matches ?? []).map((hit) => byId.get(hit.doc.id)?.entry.id));
+  const set = (value: string) => {
+    setDraft(value);
+    setShown(LISTED);
+    go({ inside: value.trim() || undefined }, { replace: true });
+  };
+  return (
+    <Stack component="section" aria-label="Search inside recordings" gap="xs" my="md" data-recording-text>
+      <Title order={2}>Search inside recordings</Title>
+      <Text c="dimmed">
+        Find words that were spoken or shown on screen, from the transcripts, captions and screen text that producers supplied with the recordings listed here. A match finds a moment; it does not show that the behavior
+        passed.
+      </Text>
+      <Group gap="xs" align="center" wrap="wrap">
+        <TextInput type="search" aria-label="Words spoken or shown" placeholder="delivery address" value={draft} miw={{ base: '100%', sm: '20rem' }} onChange={(event) => set(event.target.value)} />
+        <TypedFilters parsed={found.parsed} query={draft} onChange={set} />
+      </Group>
+      <SearchNotes issues={found.parsed.issues} semantic={found.status} />
+      {!query && (
+        <Text component="div" c="dimmed">
+          Type words to search. Nothing is read from the recordings until you do, and only the text supplied with them is read, never the video.
+        </Text>
+      )}
+      {query && (
+        <Stack gap="xs">
+          <Text role="status" component="div" data-reading>
+            {waiting
+              ? `Reading the text of recordings: ${read} of ${readable}.`
+              : `Searched the text of ${plural(counts.searched, 'recording', 'recordings')}.`}
+            {total > entries.length ? ` Only the newest ${entries.length} of ${total.toLocaleString()} results are listed, so only they are searched.` : ''}
+            {noRecording > 0 ? ` ${plural(noRecording, 'result has', 'results have')} no playable recording and ${noRecording === 1 ? 'is' : 'are'} not searched.` : ''}
+          </Text>
+          <Group gap="xs" aria-label="Coverage" role="group" data-coverage>
+            {(['searched', 'not-indexed', 'unsupported', 'failed'] as const).map((state) => (
+              <Badge key={state} color={COVERAGE_COLOR[state]} variant="light" data-coverage-state={state}>
+                {COVERAGE_WORD[state]}: {counts[state] + (state === 'failed' ? unsearched.filter((item) => item.name === null && item.state === 'failed').length : 0)}
+              </Badge>
+            ))}
+          </Group>
+        </Stack>
+      )}
+      {query && matches === null && (
+        <Text component="div" c="dimmed">
+          Add words to search for. Filters alone do not match any text.
+        </Text>
+      )}
+      {query && matches && matches.length === 0 && (
+        <Alert role="status" color={waiting ? 'blue' : 'gray'} data-no-match={waiting ? undefined : true}>
+          {waiting
+            ? 'No match yet. Some recordings are still being read, so this is not the final answer.'
+            : counts.searched === 0
+              ? 'Nothing was searched: no listed recording has text that can be searched. Recordings without it are listed below.'
+              : `No indexed text matches. ${plural(counts.searched, 'recording was', 'recordings were')} searched.${unsearched.length > 0 ? ` ${plural(unsearched.length, 'recording was', 'recordings were')} not searched (listed below), so this says nothing about ${unsearched.length === 1 ? 'it' : 'them'}.` : ''}`}
+        </Alert>
+      )}
+      {matches && matches.length > 0 && (
+        <Stack gap="xs">
+          <Text role="status" component="div" data-match-count>
+            {plural(matches.length, 'match', 'matches')} in {plural(resultEntries.size, 'result', 'results')}. The outcome is the result&apos;s own; a match does not change it.
+          </Text>
+          <Table.ScrollContainer minWidth={760}>
+            <Table data-recording-matches>
+              <Table.Thead>
+                <Table.Tr>
+                  <Table.Th scope="col">Indexed text</Table.Th>
+                  <Table.Th scope="col">Source</Table.Th>
+                  <Table.Th scope="col">Time</Table.Th>
+                  <Table.Th scope="col">Result</Table.Th>
+                  <Table.Th scope="col">Outcome</Table.Th>
+                  <Table.Th scope="col">Open</Table.Th>
+                </Table.Tr>
+              </Table.Thead>
+              <Table.Tbody>
+                {results.map((hit) => {
+                  const item = byId.get(hit.doc.id);
+                  if (!item) return null;
+                  return (
+                    <Table.Tr key={hit.doc.id} data-match={hit.doc.id} data-source-kind={item.kind} data-status={item.entry.status}>
+                      <Table.Td maw="28rem">
+                        <Highlight highlight={[...found.parsed.words, ...found.parsed.phrases]} component="div">
+                          {item.segment.text}
+                        </Highlight>
+                        <Text c="dimmed" size="xs" data-why>
+                          {why(hit)}
+                        </Text>
+                      </Table.Td>
+                      <Table.Td>
+                        <Text component="div">{TEXT_KIND_WORD[item.kind]}</Text>
+                        {item.generated && (
+                          <Text c="orange.8" size="xs" component="div" data-generated>
+                            {uncertaintyWord(item)}
+                          </Text>
+                        )}
+                        {!item.generated && item.segment.confidence !== undefined && (
+                          <Text c="dimmed" size="xs" component="div">
+                            Confidence {Math.round(item.segment.confidence * 100)}%
+                          </Text>
+                        )}
+                      </Table.Td>
+                      <Table.Td data-time>{rangeWord(item)}</Table.Td>
+                      <Table.Td>
+                        <Anchor
+                          aria-label={`Open ${item.entry.title} as recorded`}
+                          renderRoot={(props) => (
+                            <Link {...props} to="/" search={patched({ tab: undefined, openRun: undefined, test: item.entry.key, layer: item.entry.layer })} resetScroll={false} activeOptions={{ exact: true }} />
+                          )}
+                        >
+                          {item.entry.title}
+                        </Anchor>
+                        <Text c="dimmed" size="xs" component="div">
+                          {[item.entry.producer, item.videoName, item.attemptLabel].filter(Boolean).join(' · ')}
+                        </Text>
+                      </Table.Td>
+                      <Table.Td>
+                        <StatusMark status={item.entry.status} size={14} /> {statusWord(item.entry.status)}
+                      </Table.Td>
+                      <Table.Td>
+                        <Button
+                          type="button"
+                          size="compact-sm"
+                          variant="light"
+                          leftSection={<IconPlayerPlay size={16} aria-hidden="true" />}
+                          aria-label={`Open the recording of ${item.entry.title}${item.attemptLabel ? `, ${item.attemptLabel}` : ''} at ${rangeWord(item)}`}
+                          onClick={() => setOpened(focusOf(item))}
+                        >
+                          {item.segment.startMs === null ? 'Open recording' : 'Open here'}
+                        </Button>
+                      </Table.Td>
+                    </Table.Tr>
+                  );
+                })}
+              </Table.Tbody>
+            </Table>
+          </Table.ScrollContainer>
+          {matches.length > results.length && (
+            <Button type="button" variant="subtle" onClick={() => setShown(shown + LISTED)}>
+              Show more ({matches.length - results.length} more)
+            </Button>
+          )}
+        </Stack>
+      )}
+      {query && unsearched.length > 0 && (
+        <Accordion variant="separated">
+          <Accordion.Item value="unsearched">
+            <Accordion.Control>Recordings that were not searched ({unsearched.length})</Accordion.Control>
+            <Accordion.Panel>
+              <Text c="dimmed" mb="xs">
+                These are not &quot;no match&quot;: their words were never searched.
+              </Text>
+              <List spacing="xs" listStyleType="none" aria-label="Recordings that were not searched">
+                {unsearched.map((item) => (
+                  <List.Item key={item.key} data-unsearched={item.state}>
+                    <Group gap="xs" wrap="wrap">
+                      <Badge color={COVERAGE_COLOR[item.state]} variant="light">
+                        {COVERAGE_WORD[item.state]}
+                      </Badge>
+                      <Text span inherit fw={600}>
+                        {item.entry.title}
+                      </Text>
+                      <Text span inherit c="dimmed">
+                        {[item.name, item.attempt].filter(Boolean).join(' · ')}
+                      </Text>
+                    </Group>
+                    <Text c="dimmed" size="sm">
+                      {item.reason}
+                    </Text>
+                  </List.Item>
+                ))}
+              </List>
+            </Accordion.Panel>
+          </Accordion.Item>
+        </Accordion>
+      )}
+      {opened && <WatchPlaylist entries={entries} total={total} focus={opened} onClose={() => setOpened(null)} />}
+    </Stack>
+  );
+}

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

@@ -1,4 +1,4 @@
-import { IconAlertTriangle, IconArrowLeft, IconVideo } from '@tabler/icons-react';
+import { IconAlertTriangle, IconArrowLeft, IconPlayerPlay, IconVideo } from '@tabler/icons-react';
 import { Alert, Anchor, Badge, Box, Button, Code, Flex, Group, List, NativeSelect, Stack, Table, Text, TextInput, Title, VisuallyHidden } from '@mantine/core';
 /**
  * @module Runs view
@@ -25,6 +25,8 @@ import { ago, exactTime, plural, shortSha, statusWord, useNow } from '../evidenc
 import { Meter, StatusMark } from '../evidence/marks';
 import { useRunDetail, useRunList, useTestCatalog } from './catalog';
 import { RunArtifacts } from './RunArtifacts';
+import { entriesFromRun } from './playlist-entries';
+import { WatchPlaylist } from './playlist';
 import { FilterBar } from './filters';
 import { SearchNotes, TypedFilters } from './search-notes';
 import { patched, useExplorerNavigate, useExplorerSearch } from './navigate';
@@ -469,6 +471,8 @@ function RunDetailView({ runKey }: { runKey: string }) {
       ),
     [narrowedResults, status, statusFilters, model]
   );
+  const [watching, setWatching] = useState(false);
+  const playlist = useMemo(() => entriesFromRun(filtered, detail.data?.layers), [filtered, detail.data]);
   const bySpec = useMemo(() => {
     const groups = new Map<string, RunResult[]>();
     for (const result of filtered.slice(0, shown)) {
@@ -636,6 +640,12 @@ function RunDetailView({ runKey }: { runKey: string }) {
           No result matches.
         </Text>
       )}
+      {filtered.length > 0 && (
+        <Button type="button" variant="filled" my="sm" leftSection={<IconPlayerPlay size={16} aria-hidden="true" />} onClick={() => setWatching(true)}>
+          Watch these {plural(filtered.length, 'result', 'results')}
+        </Button>
+      )}
+      {watching && <WatchPlaylist entries={playlist} onClose={() => setWatching(false)} />}
       {bySpec.map(([spec, list]) => (
         <Box key={spec} data-open aria-label={spec || 'No spec'} component="section" mb="lg">
           <Button data-static variant="default" fullWidth h="auto" py="sm" justify="flex-start">