@crvouga/atlas 1.5.0 → 1.7.0

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

@@ -1,5 +1,5 @@
 import { SpecLogo } from '../components/SpecLogo';
-import { IconX } from '@tabler/icons-react';
+import { IconVideo, IconX } from '@tabler/icons-react';
 import {
   Accordion,
   Alert,
@@ -37,11 +37,9 @@ import {
   durationStats,
   formatMs,
   matchesQuery,
-  TEST_SORTS,
   testCatalog,
   type CatalogModel,
   type TestQuery,
-  type TestSort,
   type TestSummary
 } from '@crvouga/atlas/reports/test-catalog';
 import { Link } from '@tanstack/react-router';
@@ -50,13 +48,18 @@ import { useEvidence } from '../evidence/evidence-context';
 import { ago, plural, useNow } from '../evidence/format';
 import { Meter, StatusMark } from '../evidence/marks';
 import { SPEC_KINDS } from '../spec-kind';
+import { behaviorDocs, behaviorId, describeHit, testHasVideo } from '../find/behaviors';
+import { useDocSearch } from '../find/doc-search';
+import { hasFilters, passesFilters, withoutToken, type FilterKey, type ParsedSearch } from '../find/query';
+import type { FindDoc, Ranked } from '../find/rank';
 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 { joined, narrowed, queryOf, TEST_GROUPS, toggled, values, type ExplorerSearch, type TestGroup } from './search';
+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';
 import { TestDetail } from './TestDetail';
 /** Groups start closed when there are more of them than this, unless the list is short. */
 const OPEN_GROUPS = 40;
@@ -71,7 +74,8 @@ const GROUP_LABEL: Record<TestGroup, string> = {
   producer: 'Producer',
   none: 'None'
 };
-const SORT_LABEL: Record<TestSort, string> = {
+const SORT_LABEL: Record<ExplorerSort, string> = {
+  relevance: 'Best match',
   spec: 'Spec',
   title: 'Title',
   recent: 'Most recent',
@@ -91,30 +95,59 @@ const STATUS_FILTERS = [
 function percent(rate: number | null): string {
   return rate === null ? '—' : `${Math.round(rate * 100)}%`;
 }
-/** What the explorer lists for an address: the tests shown, and the scope the insight strip and filter counts describe. */
+const NO_STRUCTURE: ReadonlySet<FilterKey> = new Set();
+const WITHOUT_STATUS_AND_ENVIRONMENT: ReadonlySet<FilterKey> = new Set<FilterKey>(['status', 'env']);
+const WITHOUT_STATUS: ReadonlySet<FilterKey> = new Set<FilterKey>(['status']);
+const WITHOUT_ENVIRONMENT: ReadonlySet<FilterKey> = new Set<FilterKey>(['env']);
+const WITHOUT_VIDEO: ReadonlySet<FilterKey> = new Set<FilterKey>(['video']);
+/**
+ * What the explorer lists for an address: the tests shown, and the scope the insight strip and filter counts describe.
+ * The words, quoted phrases and filters typed in the search box are read by the shared search (`find/`), over every
+ * test, before anything is counted or ordered; nothing is cut to a page here.
+ */
 function useListing(model: CatalogModel | null, search: ExplorerSearch, q: string | undefined) {
   const run = useRunDetail(search.inRun);
   const inRun = useMemo(
     () => (search.inRun ? new Set(run.data?.results.map((result) => result.key) ?? []) : null),
     [search.inRun, run.data]
   );
-  return useMemo(() => {
+  const docs = useMemo(() => ((q || search.video) && model ? behaviorDocs(model.tests) : new Map<string, FindDoc>()), [q, search.video, model?.tests]);
+  const list = useMemo(() => [...docs.values()], [docs]);
+  const found = useDocSearch(list, q);
+  const sort = sortOf(search);
+  const listing = useMemo(() => {
     if (!model) return null;
-    const query: TestQuery = { ...queryOf(search), ...(q ? { q } : { q: undefined }) };
-    const shown = testCatalog(model, { ...query, limit: 20000 }).tests.filter((test) => !inRun || inRun.has(test.key));
+    const query: TestQuery = { ...queryOf(search), q: undefined };
+    // `has:video` typed in the box and the Has video button are the same filter.
+    const operator = { ...found.parsed.filters, video: found.parsed.filters.video || search.video === true };
+    const structured = hasFilters(operator);
+    const hits = found.hits;
+    const passes = (test: TestSummary, omit: ReadonlySet<FilterKey>) =>
+      (!hits || hits.has(behaviorId(test.key))) && (!structured || passesFilters(docs.get(test.key)?.facets, operator, omit));
+    let shown = testCatalog(model, { ...query, limit: 20000 }).tests.filter((test) => (!inRun || inRun.has(test.key)) && passes(test, NO_STRUCTURE));
+    if (sort === 'relevance' && hits) {
+      const order = new Map([...hits.keys()].map((id, at) => [id, at] as const));
+      shown = [...shown].sort((a, b) => (order.get(behaviorId(a.key)) ?? 0) - (order.get(behaviorId(b.key)) ?? 0));
+    }
     // The strip and the status and environment counts describe what the other filters leave.
-    const scope = model.tests.filter((test) => matchesQuery(model, test, { ...query, status: [], environment: [] }, inRun));
-    const byEnvironment = scope.filter((test) => matchesQuery(model, test, { environment: query.environment }));
-    const byStatus = scope.filter((test) => matchesQuery(model, test, { status: query.status }));
+    const scope = model.tests.filter((test) => matchesQuery(model, test, { ...query, status: [], environment: [] }, inRun) && passes(test, WITHOUT_STATUS_AND_ENVIRONMENT));
+    const byEnvironment = scope.filter((test) => matchesQuery(model, test, { environment: query.environment }) && passes(test, WITHOUT_STATUS));
+    const byStatus = scope.filter((test) => matchesQuery(model, test, { status: query.status }) && passes(test, WITHOUT_ENVIRONMENT));
+    const videoScope = model.tests.filter((test) => matchesQuery(model, test, query, inRun) && passes(test, WITHOUT_VIDEO));
     return {
       shown,
+      withVideo: videoScope.filter((test) => docs.get(test.key)?.facets?.video ?? testHasVideo(test)).length,
       scope,
       byEnvironment,
       byStatus,
+      hits: hits as ReadonlyMap<string, Ranked> | null,
+      parsed: found.parsed,
+      semantic: found.status,
       runPending: !!search.inRun && run.isPending,
       runMissing: !!search.inRun && run.isSuccess && run.data === null
     };
-  }, [model, search, q, inRun, run.isPending, run.isSuccess, run.data]);
+  }, [model, search, found, docs, sort, inRun, run.isPending, run.isSuccess, run.data]);
+  return listing;
 }
 /** The project home: the published spec kinds, the insight strip, the toolbar, the grouped list and the open test. */
 export function Explorer() {
@@ -252,7 +285,7 @@ export function Explorer() {
                   That run is not in the report any more.
                 </Alert>
               )}
-              <TestList tests={listing.shown} search={search} total={model.tests.length} />
+              <TestList tests={listing.shown} search={search} total={model.tests.length} hits={listing.hits} sort={search.sort ?? (listing.hits ? 'relevance' : 'spec')} />
             </>
           ))}
       </Box>
@@ -496,6 +529,9 @@ function Toolbar({
   onSearch: (value: string) => void;
 }) {
   const go = useExplorerNavigate();
+  // Best match is the order of a search with words; without words the list is in spec order.
+  const defaultSort: ExplorerSort = listing.hits ? 'relevance' : 'spec';
+  const sort: ExplorerSort = search.sort ?? defaultSort;
   const [draft, setDraft] = useState(search.q ?? '');
   // The address may change from elsewhere (a link, the index, back): follow it.
   useEffect(() => setDraft((current) => (current.trim() === (search.q ?? '').trim() ? current : (search.q ?? ''))), [search.q]);
@@ -527,7 +563,7 @@ function Toolbar({
           miw={{ base: '100%', sm: '15rem' }}
           type="search"
           aria-label="Search tests"
-          placeholder="Search titles, specs, domains, tags, environments…"
+          placeholder='Search titles, specs, tags… or filter: status:failed has:video "exact phrase"'
           value={draft}
           onChange={(event) => {
             setDraft(event.target.value);
@@ -556,12 +592,12 @@ function Toolbar({
           </Text>
           <NativeSelect
             aria-label="Sort"
-            value={search.sort ?? 'spec'}
-            onChange={(event) => go({ sort: event.target.value === 'spec' ? undefined : (event.target.value as TestSort) })}
+            value={sort}
+            onChange={(event) => go({ sort: event.target.value === defaultSort ? undefined : (event.target.value as ExplorerSort) })}
           >
-            {TEST_SORTS.map((sort) => (
-              <option key={sort} value={sort}>
-                {SORT_LABEL[sort]}
+            {EXPLORER_SORTS.filter((option) => option !== 'relevance' || listing.hits !== null || sort === 'relevance').map((option) => (
+              <option key={option} value={option}>
+                {SORT_LABEL[option]}
               </option>
             ))}
           </NativeSelect>
@@ -608,6 +644,26 @@ function Toolbar({
             ))}
           </Flex>
         )}
+        <Button
+          type="button"
+          aria-pressed={search.video === true || listing.parsed.filters.video}
+          aria-label={`Has video: ${plural(listing.withVideo, 'test', 'tests')}`}
+          onClick={() => {
+            if (listing.parsed.filters.video) {
+              const token = listing.parsed.tokens.find((item) => item.key === 'video')!;
+              const next = withoutToken(draft, token);
+              setDraft(next);
+              onSearch(next);
+            } else go({ video: search.video ? undefined : true });
+          }}
+          variant={search.video === true || listing.parsed.filters.video ? 'light' : 'subtle'}
+          leftSection={<IconVideo size={16} aria-hidden="true" />}
+        >
+          Has video{' '}
+          <Text span inherit>
+            {listing.withVideo.toLocaleString()}
+          </Text>
+        </Button>
         {model.facets.producers.length > 1 && (
           <Box component="label">
             <VisuallyHidden>Producer</VisuallyHidden>
@@ -683,6 +739,14 @@ function Toolbar({
             ? plural(model.tests.length, 'test', 'tests')
             : `${listing.shown.length.toLocaleString()} of ${plural(model.tests.length, 'test', 'tests')}`}
         </Text>
+        <TypedFilters
+          parsed={listing.parsed}
+          query={draft}
+          onChange={(next) => {
+            setDraft(next);
+            onSearch(next);
+          }}
+        />
         {chips.map((chip) => (
           <Button key={chip.label} type="button" onClick={() => go(chip.clear)} aria-label={`Remove ${chip.label}`} variant="light">
             {chip.label}{' '}
@@ -707,7 +771,8 @@ function Toolbar({
                 scope: undefined,
                 artifactTag: undefined,
                 inherited: undefined,
-                inRun: undefined
+                inRun: undefined,
+                video: undefined
               });
             }}
             variant="subtle"
@@ -716,12 +781,13 @@ function Toolbar({
           </Button>
         )}
       </Flex>
+      <SearchNotes issues={listing.parsed.issues} semantic={listing.semantic} />
     </Box>
   );
 }
-function TestList({ tests, search, total }: { tests: readonly TestSummary[]; search: ExplorerSearch; total: number }) {
+function TestList({ tests, search, total, hits, sort }: { tests: readonly TestSummary[]; search: ExplorerSearch; total: number; hits: ReadonlyMap<string, Ranked> | null; sort: ExplorerSort }) {
   const by = search.group ?? 'spec';
-  const groups = useMemo(() => groupTests(tests, by, (search.sort ?? 'spec') === 'spec'), [tests, by, search.sort]);
+  const groups = useMemo(() => groupTests(tests, by, sort === 'spec'), [tests, by, sort]);
   const [overrides, setOverrides] = useState<ReadonlyMap<string, boolean>>(new Map());
   const defaultOpen = groups.length <= OPEN_GROUPS || tests.length <= OPEN_TESTS;
   const isOpen = (group: TestGroupView) => by === 'none' || (overrides.get(`${by}|${group.key}`) ?? defaultOpen);
@@ -781,6 +847,7 @@ function TestList({ tests, search, total }: { tests: readonly TestSummary[]; sea
               by={by}
               open={isOpen(group)}
               selected={search.test}
+              hits={hits}
               onToggle={() => setOverrides(new Map(overrides).set(`${by}|${group.key}`, !isOpen(group)))}
             />
           </Stack>
@@ -794,12 +861,14 @@ function TestGroupSection({
   by,
   open,
   selected,
+  hits,
   onToggle
 }: {
   group: TestGroupView;
   by: TestGroup;
   open: boolean;
   selected: string | undefined;
+  hits: ReadonlyMap<string, Ranked> | null;
   onToggle: () => void;
 }) {
   const [shown, setShown] = useState(by === 'none' ? 100 : GROUP_ROWS);
@@ -807,7 +876,7 @@ function TestGroupSection({
   const rows = (
     <List spacing="xs" listStyleType="none">
       {group.tests.slice(0, shown).map((test) => (
-        <TestRow key={test.key} test={test} selected={selected === test.key} now={now} />
+        <TestRow key={test.key} test={test} selected={selected === test.key} now={now} hit={hits?.get(behaviorId(test.key))} />
       ))}
       {group.tests.length > shown && (
         <List.Item>
@@ -852,7 +921,8 @@ function TestGroupSection({
     </Box>
   );
 }
-function TestRow({ test, selected, now }: { test: TestSummary; selected: boolean; now: number }) {
+function TestRow({ test, selected, now, hit }: { test: TestSummary; selected: boolean; now: number; hit: Ranked | undefined }) {
+  const why = hit ? describeHit(hit) : '';
   const failure = test.status === 'failed' ? test.outcomes.find((outcome) => outcome.status === 'failed')?.detail.split('\n')[0] : '';
   return (
     <List.Item data-status={test.status}>
@@ -886,6 +956,16 @@ function TestRow({ test, selected, now }: { test: TestSummary; selected: boolean
                 {failure}
               </Text>
             )}
+            {why && (
+              <Text size="xs" c="dimmed" data-why>
+                {hit?.exact && (
+                  <Badge component="span" color="blue" mr="xs">
+                    Exact
+                  </Badge>
+                )}
+                {why}
+              </Text>
+            )}
           </Stack>
           <Group gap="md" visibleFrom="sm">
             <Text title="Average duration" size="xs" c="dimmed">

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

@@ -1,5 +1,5 @@
 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';
+import { Alert, Anchor, Badge, Box, Button, Code, Flex, Group, List, NativeSelect, Stack, Table, Text, TextInput, Title, VisuallyHidden } from '@mantine/core';
 /**
  * @module Runs view
  *
@@ -16,16 +16,22 @@ 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 { useEffect, useMemo, useState } from 'react';
+import { behaviorDocs, behaviorId, describeHit, forRuns, resultDoc, runDoc } from '../find/behaviors';
+import { useDocSearch } from '../find/doc-search';
+import { hasFilters, passesFilters, type ParsedSearch, type SearchFilters } from '../find/query';
+import type { FindDoc, Ranked } from '../find/rank';
 import { ago, exactTime, plural, shortSha, statusWord, useNow } from '../evidence/format';
 import { Meter, StatusMark } from '../evidence/marks';
-import { useRunDetail, useRunList } from './catalog';
+import { useRunDetail, useRunList, useTestCatalog } from './catalog';
 import { RunArtifacts } from './RunArtifacts';
 import { FilterBar } from './filters';
+import { SearchNotes, TypedFilters } from './search-notes';
 import { patched, useExplorerNavigate, useExplorerSearch } from './navigate';
 import { runName } from './parts';
 import { filtered, filterOf, NO_FILTERS } from './search';
 const RUN_ROWS = 50;
+const NO_RESULTS: readonly RunResult[] = [];
 const RESULT_ROWS = 200;
 /** The Runs tab: the run list, or the run opened in it. */
 export function RunsView() {
@@ -151,6 +157,56 @@ function HasVideo({ count, pressed, noun, onToggle }: { count: number; pressed:
     </Button>
   );
 }
+/** The search box of the Runs tab and of an opened run: one query in the address, so a link reproduces it. */
+function SearchBox({ label, placeholder, parsed, onSearch }: { label: string; placeholder: string; parsed: ParsedSearch; onSearch: (value: string) => void }) {
+  const search = useExplorerSearch();
+  const [draft, setDraft] = useState(search.q ?? '');
+  // The address may change from elsewhere (a link, back, a chip): follow it.
+  useEffect(() => setDraft((current) => (current.trim() === (search.q ?? '').trim() ? current : (search.q ?? ''))), [search.q]);
+  return (
+    <Flex gap="xs" align="center" wrap="wrap">
+      <TextInput
+        type="search"
+        aria-label={label}
+        placeholder={placeholder}
+        value={draft}
+        miw={{ base: '100%', sm: '20rem' }}
+        onChange={(event) => {
+          setDraft(event.target.value);
+          onSearch(event.target.value.trim());
+        }}
+      />
+      <TypedFilters
+        parsed={parsed}
+        query={draft}
+        onChange={(next) => {
+          setDraft(next);
+          onSearch(next);
+        }}
+      />
+    </Flex>
+  );
+}
+/** Why a result is in the list, beside it: exact, or the fields the words were found in. */
+function WhyMatched({ hit }: { hit: Ranked | undefined }) {
+  const why = hit ? describeHit(hit) : '';
+  if (!hit || !why) return null;
+  return (
+    <Text size="xs" c="dimmed" data-why>
+      {hit.exact && (
+        <Badge component="span" color="blue" mr="xs">
+          Exact
+        </Badge>
+      )}
+      {why}
+    </Text>
+  );
+}
+const RUN_SORTS = [
+  { id: 'recent', label: 'Newest' },
+  { id: 'failures', label: 'Most failures' },
+  { id: 'relevance', label: 'Best match' }
+] as const;
 /** 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. */
@@ -167,11 +223,32 @@ function RunTable() {
   const search = useExplorerSearch();
   const go = useExplorerNavigate();
   const video = search.video === true;
-  const filter = useMemo(() => filterOf(search), [search]);
+  const searching = !!search.q;
+  // The structured filters of the address narrow the runs on the server; the words are matched here by the shared search,
+  // over every run, so the Runs tab judges "savde answer" as the finder and the test list do.
+  const filter = useMemo(() => {
+    const { q: _words, ...rest } = filterOf(search);
+    return rest;
+  }, [search]);
   const narrow = filtered(search);
-  const runs = useRunList(true, filter);
+  const runs = useRunList(true, filter, searching);
   const now = useNow();
   const [shown, setShown] = useState(RUN_ROWS);
+  const docs = useMemo(() => (runs.data?.runs ?? []).map((run) => runDoc(run, runLabel(run))), [runs.data]);
+  const found = useDocSearch(docs, search.q);
+  const parsed = useMemo(() => forRuns(found.parsed), [found.parsed]);
+  const sortValue = search.sort === 'failures' ? 'failures' : (search.sort === 'relevance' || !search.sort) && found.hits ? 'relevance' : 'recent';
+  const visible = useMemo(() => {
+    const runsOf = runs.data?.runs ?? [];
+    const order = found.hits ? new Map([...found.hits.keys()].map((id, at) => [id, at] as const)) : null;
+    const kept = runsOf.filter((run, at) => {
+      const doc = docs[at]!;
+      return (!found.hits || found.hits.has(doc.id)) && passesFilters(doc.facets, parsed.filters);
+    });
+    if (sortValue === 'failures') return [...kept].sort((a, b) => b.counts.failed - a.counts.failed || b.endedAtMs - a.endedAtMs);
+    if (sortValue === 'relevance' && order) return [...kept].sort((a, b) => (order.get(`runs:${a.key}`) ?? 0) - (order.get(`runs:${b.key}`) ?? 0));
+    return kept;
+  }, [runs.data, docs, found.hits, parsed.filters, sortValue]);
   if (runs.isPending)
     return (
       <Text role="status" component="div" c="dimmed">
@@ -184,24 +261,60 @@ function RunTable() {
         The runs could not be read. {runs.error.message}
       </Alert>
     );
-  const list = runs.data.runs;
+  const everything = runs.data.runs;
+  const list = visible;
   const withVideo = runs.data.withVideo;
   const noun = narrow ? 'matching' : '';
+  const hasVideoNow = video || parsed.filters.video;
   return (
     <Box aria-label="Runs" component="section" mb="lg">
-      {(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} />}
+      {(narrow || everything.length > 0) && (
+        <FilterBar
+          facets={runs.data.facets}
+          search={search}
+          tab="runs"
+          extra={
+            withVideo !== undefined || video ? (
+              <HasVideo count={withVideo ?? list.length} pressed={hasVideoNow} noun={['run', 'runs']} onToggle={() => go({ video: video ? undefined : true })} />
+            ) : undefined
+          }
+        />
+      )}
       <NotApplied names={runs.data.notApplied} noun="runs" />
-      {!list.length && !narrow && (
+      {(parsed.tokens.length > 0 || parsed.issues.length > 0 || found.status !== 'idle') && (
+        <>
+          <Flex gap="xs" align="center" wrap="wrap">
+            <TypedFilters parsed={parsed} query={search.q ?? ''} onChange={(next) => go({ q: next || undefined }, { replace: true })} />
+          </Flex>
+          <SearchNotes issues={parsed.issues} semantic={found.status} />
+        </>
+      )}
+      {!everything.length && !narrow && (
         <Text component="div" c="dimmed">
           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>
+      {everything.length > 0 && (
+        <Flex gap="xs" align="center" wrap="wrap" role="status">
+          <Text span inherit>
+            {runs.data.total > everything.length
+              ? `The newest ${everything.length} of ${plural(runs.data.total, 'run', 'runs')} ${noun}`.trim()
+              : searching || list.length !== everything.length
+                ? `${list.length.toLocaleString()} of ${plural(everything.length, 'run', 'runs')} ${noun}`.trim()
+                : `${plural(list.length, 'run', 'runs')} ${noun}`.trim()}
+          </Text>
+          <NativeSelect
+            aria-label="Sort runs"
+            value={sortValue}
+            onChange={(event) => go({ sort: event.target.value === (found.hits ? 'relevance' : 'recent') ? undefined : (event.target.value as 'recent' | 'failures' | 'relevance') })}
+          >
+            {RUN_SORTS.filter((option) => option.id !== 'relevance' || found.hits !== null).map((option) => (
+              <option key={option.id} value={option.id}>
+                {option.label}
+              </option>
+            ))}
+          </NativeSelect>
+        </Flex>
       )}
       {!list.length && narrow && (
         <Stack gap="xs" align="flex-start" role="status" data-no-match>
@@ -249,6 +362,7 @@ function RunTable() {
                       {run.title}
                     </Text>
                   )}
+                  <WhyMatched hit={found.hits?.get(`runs:${run.key}`)} />
                 </Table.Td>
                 <Table.Td title={run.branch ?? ''} c="dimmed">
                   {run.branch ?? '—'}
@@ -322,20 +436,39 @@ function RunDetailView({ runKey }: { runKey: string }) {
   const detail = useRunDetail(runKey);
   const now = useNow();
   const [status, setStatus] = useState('');
-  const [words, setWords] = useState('');
   const [shown, setShown] = useState(RESULT_ROWS);
-  const results = detail.data?.results ?? [];
-  const filtered = useMemo(() => {
-    const terms = words.toLowerCase().split(/\s+/).filter(Boolean);
-    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, video]);
+  const catalog = useTestCatalog();
+  const model = catalog.model;
+  const results = detail.data?.results ?? NO_RESULTS;
+  // The words are judged against every behavior of the report, as in the test list, so the same words make the same
+  // behaviors eligible; the run's results are then the ones of those behaviors it recorded.
+  const docs = useMemo<readonly FindDoc[]>(() => {
+    if (!search.q) return [];
+    const base = model ? behaviorDocs(model.tests) : new Map<string, FindDoc>();
+    const extra = new Map<string, FindDoc>();
+    for (const result of results) if (!base.has(result.key) && !extra.has(result.key)) extra.set(result.key, resultDoc(result, undefined));
+    return [...base.values(), ...extra.values()];
+  }, [search.q, model, results]);
+  const found = useDocSearch(docs, search.q);
+  const resultDocs = useMemo(() => results.map((result) => resultDoc(result, model?.byKey.get(result.key))), [results, model]);
+  const narrowedResults = useMemo(
+    () =>
+      results.filter(
+        (result, at) =>
+          (!found.hits || found.hits.has(behaviorId(result.key))) &&
+          (!video || (videoCounts(result.videos)?.recordings ?? 0) > 0) &&
+          passesFilters(resultDocs[at]!.facets, { ...found.parsed.filters, status: [] })
+      ),
+    [results, resultDocs, found, video]
+  );
+  const statusFilters = found.parsed.filters.status;
+  const filtered = useMemo(
+    () =>
+      narrowedResults.filter(
+        (result) => (!status || result.status === status) && (!statusFilters.length || statusFilters.some((wanted) => (wanted === 'flaky' ? model?.byKey.get(result.key)?.stats.flaky === true : result.status === wanted)))
+      ),
+    [narrowedResults, status, statusFilters, model]
+  );
   const bySpec = useMemo(() => {
     const groups = new Map<string, RunResult[]>();
     for (const result of filtered.slice(0, shown)) {
@@ -458,14 +591,19 @@ function RunDetailView({ runKey }: { runKey: string }) {
         )}
       </Flex>
       <Flex gap="xs" align="center" wrap="wrap">
-        <TextInput
-          type="search"
-          aria-label="Search this run"
-          placeholder="Search this run…"
-          value={words}
-          onChange={(event) => setWords(event.target.value)}
+        <SearchBox
+          label="Search this run"
+          placeholder='Search this run… or filter: status:failed has:video "exact phrase"'
+          parsed={found.parsed}
+          onSearch={(value) => go({ q: value || undefined }, { replace: true })}
         />
       </Flex>
+      <SearchNotes issues={found.parsed.issues} semantic={found.status} />
+      {(search.q || found.parsed.tokens.length > 0) && (
+        <Text role="status" size="sm" c="dimmed">
+          {filtered.length.toLocaleString()} of {plural(results.length, 'result', 'results')} match
+        </Text>
+      )}
       <Flex role="group" aria-label="Result status" gap="xs" align="center" wrap="wrap">
         {RESULT_FILTERS.map((filter) => (
           <Button
@@ -478,7 +616,7 @@ function RunDetailView({ runKey }: { runKey: string }) {
           >
             {filter.label}{' '}
             <Text span inherit>
-              {filter.id ? results.filter((result) => result.status === filter.id).length : results.length}
+              {filter.id ? narrowedResults.filter((result) => result.status === filter.id).length : narrowedResults.length}
             </Text>
           </Button>
         ))}
@@ -487,7 +625,7 @@ function RunDetailView({ runKey }: { runKey: string }) {
         <Flex gap="xs" align="center" wrap="wrap">
           <HasVideo
             count={results.filter((result) => (videoCounts(result.videos)?.recordings ?? 0) > 0).length}
-            pressed={video}
+            pressed={video || found.parsed.filters.video}
             noun={['result', 'results']}
             onToggle={() => go({ video: video ? undefined : true })}
           />

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

@@ -17,6 +17,7 @@ import { CheckDetail } from '../evidence/check-detail';
 import { ago, exactTime, plural, shortSha, statusWord, useNow } from '../evidence/format';
 import { useEvidence } from '../evidence/evidence-context';
 import { Origin, StatusMark } from '../evidence/marks';
+import { outcomeHeadline, selectedResult } from '../evidence/outcome';
 import { useTestHistory } from './catalog';
 import { patched, useExplorerNavigate, useExplorerSearch } from './navigate';
 import { Badges, runName } from './parts';
@@ -126,7 +127,7 @@ function Scope({ pinned, slot }: { pinned: PinnedResult; slot: CheckSlot | undef
 export function TestDetail({ test, slot }: { test: TestSummary; slot: CheckSlot | undefined }) {
   const now = useNow();
   const history = useTestHistory(test.key);
-  const { layer } = useExplorerSearch();
+  const { layer, source } = useExplorerSearch();
   const go = useExplorerNavigate();
   const pinned = usePinnedResult(layer, test.key);
   const [recording, setRecording] = useState(false);
@@ -134,6 +135,7 @@ export function TestDetail({ test, slot }: { test: TestSummary; slot: CheckSlot
   const [moment, setMoment] = useState<number | null>(null);
   const [rows, setRows] = useState(HISTORY_ROWS);
   const entries = history.data?.history ?? [];
+  const selected = slot && (!layer || pinned.state === 'ready') ? selectedResult(slot, pinned.state === 'ready' ? pinned.entry : undefined, source) : undefined;
   const stats = test.stats;
   const d = stats.durations;
   if (recording && slot) {
@@ -211,6 +213,9 @@ export function TestDetail({ test, slot }: { test: TestSummary; slot: CheckSlot
           <Text data-status={test.status} span inherit fw={600}>
             {statusWord(test.status)}
           </Text>
+          <Text span inherit c="dimmed">
+            worst current result of {plural(test.outcomes.length, 'source', 'sources')}
+          </Text>
           {stats.flaky && (
             <Text title={stats.flakyReason} span inherit>
               Flaky: {stats.flakyReason}
@@ -218,6 +223,11 @@ export function TestDetail({ test, slot }: { test: TestSummary; slot: CheckSlot
           )}
           <Badges test={test} />
         </Flex>
+        {selected && slot && (
+          <Text component="p" role="status" fw={600} data-outcome-headline>
+            {outcomeHeadline(selected, slot).text}
+          </Text>
+        )}
         {test.spec && <Code c="dimmed">{test.spec!.path}</Code>}
         <Code title="Check id" c="dimmed">
           {test.id}
@@ -425,6 +435,18 @@ export function TestDetail({ test, slot }: { test: TestSummary; slot: CheckSlot
             layerId={layer}
             {...(pinned.state === 'ready' ? { pinned: pinned.entry, pin: true } : {})}
             reads="steps"
+            headline={false}
+            records={entries.map((entry) => ({
+              layer: entry.layer,
+              kind: entry.kind,
+              status: entry.status,
+              at: entry.at,
+              sha: entry.sha,
+              producer: entry.producer,
+              environment: entry.environment,
+              parameters: entry.parameters
+            }))}
+            {...(layer ? {} : { source, onSource: (next: string | null) => go({ source: next ?? undefined }) })}
             select={(patch) => {
               if (patch.view === 'recording') {
                 setRecordingLayer(patch.layer ?? undefined);