@crvouga/atlas 1.20.0 → 1.22.0

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

@@ -18,7 +18,8 @@ import { useDocSearch } from '../find/doc-search';
 import { passesFilters } from '../find/query';
 import type { BehaviorsSearch } from '../app/router';
 import { specKind } from '../spec-kind';
-import { ApplicabilitySummary } from './applicability-view';
+import { needsAttention, type ReleaseIdentity } from './applicability';
+import { ApplicabilityControls, ApplicabilitySummary, useApplicabilityState, type ApplicabilityState } from './applicability-view';
 import { behaviorDoc, indexBehaviors, type IndexedBehavior } from './behavior-index';
 import { BehaviorPanel, behaviorSteps, CoverageBadge, Player, Provenance, RevisionLine } from './behavior-panel';
 import { forgetReturn, recallReturn, rememberReturn, scopeKey } from './behavior-return';
@@ -36,29 +37,29 @@ const PAGE = 40;
 const NO_DOMAIN = 'No domain declared';
 
 /** Reads every feature and files its behaviors; `pending` while features are still being read. */
-function useBehaviorIndex() {
+function useBehaviorIndex(release: ReleaseIdentity) {
   const evidence = useEvidence();
   const gherkin = specKind('gherkin')!;
   const files = useMemo(() => evidence.files.filter(gherkin.accepts), [evidence.files, gherkin]);
   const { texts, pending } = useSpecTexts(files, true, false);
   const index = useMemo(
-    () => indexBehaviors({ files, texts, specs: evidence.specs, view: evidence.view, evidence: evidence.evidence }),
-    [files, texts, evidence.specs, evidence.view, evidence.evidence]
+    () => indexBehaviors({ files, texts, specs: evidence.specs, view: evidence.view, evidence: evidence.evidence, release }),
+    [files, texts, evidence.specs, evidence.view, evidence.evidence, release]
   );
   return { index, pending: pending || evidence.filesPending, filesError: evidence.filesError };
 }
 
 /** What the search and coverage filter leave of the project's behaviors, best match first when words were typed. */
-function useListing(entries: readonly IndexedBehavior[], search: BehaviorsSearch) {
+function useListing(entries: readonly IndexedBehavior[], search: BehaviorsSearch, onlyStale: boolean) {
   const docs = useMemo(() => new Map(entries.map((entry) => [entry.id, behaviorDoc(entry)] as const)), [entries]);
   const list = useMemo(() => [...docs.values()], [docs]);
   const found = useDocSearch(list, useDeferredValue(search.q));
   const scoped = useMemo(() => {
-    const kept = entries.filter((entry) => (!found.hits || found.hits.has(entry.id)) && passesFilters(docs.get(entry.id)?.facets, found.parsed.filters));
+    const kept = entries.filter((entry) => (!found.hits || found.hits.has(entry.id)) && (!onlyStale || needsAttention(entry.assessment)) && passesFilters(docs.get(entry.id)?.facets, found.parsed.filters));
     if (!found.hits) return kept;
     const order = new Map([...found.hits.keys()].map((id, at) => [id, at] as const));
     return [...kept].sort((a, b) => (order.get(a.id) ?? 0) - (order.get(b.id) ?? 0));
-  }, [entries, docs, found.hits, found.parsed]);
+  }, [entries, docs, found.hits, found.parsed, onlyStale]);
   const counts = useMemo(() => coverageCounts(scoped.map((entry) => entry.behavior)), [scoped]);
   const shown = useMemo(() => (search.coverage ? scoped.filter((entry) => entry.behavior.state === search.coverage) : scoped), [scoped, search.coverage]);
   return { found, scoped, shown, counts, ranked: found.hits !== null };
@@ -216,7 +217,7 @@ function BehaviorList({ listing, selected, limit, onMore }: { listing: Listing;
 }
 
 /** The index: search, coverage filter, the list, and beside it the Read / Watch / Inspect panel of the selected behavior. */
-function Index({ listing, search, index, pending, filesError }: { listing: Listing; search: BehaviorsSearch; index: ReturnType<typeof useBehaviorIndex>['index']; pending: boolean; filesError: boolean }) {
+function Index({ listing, search, index, pending, filesError, applicability }: { listing: Listing; search: BehaviorsSearch; index: ReturnType<typeof useBehaviorIndex>['index']; pending: boolean; filesError: boolean; applicability: ApplicabilityState }) {
   const navigate = useNavigate({ from: '/behaviors' });
   const scope = scopeKey(search);
   const [draft, setDraft] = useState(search.q ?? '');
@@ -250,6 +251,10 @@ function Index({ listing, search, index, pending, filesError }: { listing: Listi
           <Text component="div" c="dimmed">
             Everything the project's features say should happen, found by its words. Read what should happen, watch a recording of it, and inspect the record behind it.
           </Text>
+          <Group component="nav" aria-label="Where the evidence is" gap="md" mt="xs">
+            <Anchor renderRoot={(props) => <Link {...props} to="/" search={{ tab: 'runs' } as never} />}>Runs</Anchor>
+            <Anchor renderRoot={(props) => <Link {...props} to="/" search={{ tab: 'artifacts' } as never} />}>Videos and artifacts</Anchor>
+          </Group>
         </Box>
         <TextInput
           type="search"
@@ -273,6 +278,7 @@ function Index({ listing, search, index, pending, filesError }: { listing: Listi
         </Group>
         <SearchNotes issues={listing.found.parsed.issues} semantic={listing.found.status} />
         <CoverageFilter listing={listing} coverage={search.coverage} />
+        <ApplicabilityControls state={applicability} stale={index.entries.filter((entry) => needsAttention(entry.assessment)).length} total={index.entries.length} />
         <Disclosure unread={index.unread} features={index.features} unreadable={index.unreadable} pending={pending} error={filesError} />
         {selected && (
           <Group gap="sm" wrap="wrap" role="group" aria-label="Selected behavior">
@@ -316,7 +322,7 @@ function Index({ listing, search, index, pending, filesError }: { listing: Listi
                       {' · '}
                       <Anchor renderRoot={(props) => <Link {...props} to="/specs/$kind" params={{ kind: 'gherkin' }} search={{ spec: selected.file, check: selected.behavior.slot?.id }} />}>Open the feature</Anchor>
                     </Text>
-                    <BehaviorPanel key={selected.id} behavior={selected.behavior} applicability={selected.assessment} inspect={<Inspect entry={selected} />} />
+                    <BehaviorPanel key={selected.id} behavior={selected.behavior} applicability={selected.assessment} release={applicability.release} inspect={<Inspect entry={selected} />} />
                   </Stack>
                 </Paper>
               ) : search.behavior ? (
@@ -337,7 +343,7 @@ function Index({ listing, search, index, pending, filesError }: { listing: Listi
 }
 
 /** The dedicated workspace: what should happen beside its recording, the scoped summary, and the record behind a disclosure. */
-function Workspace({ entry, listing }: { entry: IndexedBehavior; listing: Listing }) {
+function Workspace({ entry, listing, release }: { entry: IndexedBehavior; listing: Listing; release: ReleaseIdentity }) {
   const heading = useRef<HTMLHeadingElement>(null);
   const [inspecting, setInspecting] = useState<string | null>(null);
   const { behavior } = entry;
@@ -420,7 +426,7 @@ function Workspace({ entry, listing }: { entry: IndexedBehavior; listing: Listin
             )}
             {behavior.subject && <Provenance subject={behavior.subject} />}
             <RevisionLine revision={behavior.revision} />
-            <ApplicabilitySummary assessment={entry.assessment} release={{}} />
+            <ApplicabilitySummary assessment={entry.assessment} release={release} />
           </Stack>
         </SimpleGrid>
         <ScopedSummary behavior={behavior} />
@@ -455,11 +461,12 @@ function WorkspaceMissing({ pending }: { pending: boolean }) {
 /** The behaviors route: the project-wide index, or the workspace when one behavior is expanded. */
 export function BehaviorsPage() {
   const search = useSearch({ from: '/behaviors' });
-  const { index, pending, filesError } = useBehaviorIndex();
-  const listing = useListing(index.entries, search);
+  const applicability = useApplicabilityState();
+  const { index, pending, filesError } = useBehaviorIndex(applicability.release);
+  const listing = useListing(index.entries, search, applicability.onlyStale);
   if (search.workspace) {
     const entry = index.entries.find((candidate) => candidate.id === search.behavior);
-    return entry ? <Workspace entry={entry} listing={listing} /> : <WorkspaceMissing pending={pending} />;
+    return entry ? <Workspace entry={entry} listing={listing} release={applicability.release} /> : <WorkspaceMissing pending={pending} />;
   }
-  return <Index listing={listing} search={search} index={index} pending={pending} filesError={filesError} />;
+  return <Index listing={listing} search={search} index={index} pending={pending} filesError={filesError} applicability={applicability} />;
 }

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

@@ -73,7 +73,8 @@ function immutable(id: string) {
   return /^[0-9a-f]{64}$/.test(id);
 }
 
-function rowsKey(layer: LayerHeader) {
+/** The cache key of one layer's rows, shared by everything that reads them so a layer is read once. */
+export function rowsKey(layer: LayerHeader) {
   return ['evidence-rows', layer.backend, layer.id, immutable(layer.id) ? '' : layer.execution] as const;
 }
 

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

@@ -264,6 +264,11 @@ export function Explorer() {
             <Anchor mt="xs" display="inline-block" size="sm" renderRoot={(props) => <Link {...props} to="/" search={patched({ tab: 'health', test: undefined })} resetScroll={false} activeOptions={{ exact: true }} />}>
               Why do these counts differ from the Tests?
             </Anchor>
+            {kinds.some(({ kind }) => kind.id === 'gherkin') && (
+              <Anchor ml="md" mt="xs" display="inline-block" size="sm" renderRoot={(props) => <Link {...props} to="/behaviors" search={{}} />}>
+                Behaviors: read what the project promises, then watch it
+              </Anchor>
+            )}
           </Box>
         )}
         {!model && !evidence.unavailable && (

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

@@ -23,7 +23,7 @@ import { outcomeHeadline, selectedResult } from '../evidence/outcome';
 import { useTestHistory } from './catalog';
 import { releaseOf } from './applicability';
 import { patched, useExplorerNavigate, useExplorerSearch } from './navigate';
-import { Badges, runName } from './parts';
+import { Badges, ReadPromise, runName } from './parts';
 import { Reliability } from './Reliability';
 import { ProductLatency } from './ProductLatency';
 import { usePinnedResult, type PinnedResult } from './pinned';
@@ -237,6 +237,9 @@ export function TestDetail({ test, slot }: { test: TestSummary; slot: CheckSlot
           </Text>
         )}
         {test.spec && <Code c="dimmed">{test.spec!.path}</Code>}
+        <Box>
+          <ReadPromise specPath={test.spec?.path ?? null} check={test.id} />
+        </Box>
         <Code title="Check id" c="dimmed">
           {test.id}
         </Code>

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

@@ -1,4 +1,4 @@
-import { Badge, Flex } from '@mantine/core';
+import { Anchor, Badge, Flex } from '@mantine/core';
 import { statusColor } from '../ui/theme';
 /**
  * @module Explorer parts
@@ -11,6 +11,8 @@ import type { TestSummary } from '@crvouga/atlas/reports/test-catalog';
 import { plural } from '../evidence/format';
 import { StatusMark } from '../evidence/marks';
 import { currentProject } from '../runtime';
+import { kindOfFile, specFile } from '../spec-kind';
+import { Link } from '@tanstack/react-router';
 import { environmentStatuses } from './groups';
 /** The project's name for its title: `?project=geviti-app` reads "Geviti App". */
 export function projectTitle(): string {
@@ -80,3 +82,19 @@ export function EnvironmentChips({ test }: { test: TestSummary }) {
     </Flex>
   );
 }
+
+/**
+ * "Read the promise": the written spec of a result, opened on that exact check (its scenario and examples) in the spec's own page,
+ * where Read, Watch and Inspect sit together. It names the check and no run, so it shows the promise as written now; the run a
+ * recording came from stays one click away in the test detail. Nothing is rendered for a result without a spec of a known kind.
+ */
+export function ReadPromise({ specPath, check }: { specPath: string | null; check: string }) {
+  const file = specPath ? specFile(specPath) : null;
+  const kind = file ? kindOfFile(file) : null;
+  if (!file || !kind) return null;
+  return (
+    <Anchor renderRoot={(props) => <Link {...props} to="/specs/$kind" params={{ kind: kind.id }} search={{ spec: file, check }} />}>
+      Read the promise
+    </Anchor>
+  );
+}

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

@@ -31,6 +31,7 @@ import { MomentBar, MomentPlayback, SeekStep, stepsOfRecording, useIsPlaying, us
 import { duration, exactTime, plural, statusWord } from '../evidence/format';
 import { StatusMark } from '../evidence/marks';
 import { patched } from './navigate';
+import { ReadPromise } from './parts';
 import { clock, TEXT_KIND_WORD, type RecordingFocus } from './recording-text';
 import { clipHints, playableVideo, playlistCounts, RECORDING_STATE_TEXT, recordingState, stepFrom, type PlaylistEntry } from './playlist-entries';
 
@@ -276,13 +277,16 @@ function Clip({
   };
 
   const developer = (
-    <Anchor
-      renderRoot={(props) => (
-        <Link {...props} to="/" search={patched({ tab: undefined, openRun: undefined, artifact: undefined, watch: undefined, watchClip: undefined, test: entry.key, layer: entry.layer })} resetScroll={false} activeOptions={{ exact: true }} onClick={onClose} />
-      )}
-    >
-      Developer details
-    </Anchor>
+    <Group gap="md" wrap="wrap">
+      <ReadPromise specPath={entry.specPath} check={entry.check} />
+      <Anchor
+        renderRoot={(props) => (
+          <Link {...props} to="/" search={patched({ tab: undefined, openRun: undefined, artifact: undefined, watch: undefined, watchClip: undefined, test: entry.key, layer: entry.layer })} resetScroll={false} activeOptions={{ exact: true }} onClick={onClose} />
+        )}
+      >
+        Developer details
+      </Anchor>
+    </Group>
   );
 
   let body;