@crvouga/atlas 0.4.0 → 0.6.0

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

@@ -1,20 +1,32 @@
 import type { ActiveRun, BackendInfo, EvidencePage, LayerEvidence, LayerHeader, LayerRows } from '@crvouga/atlas/reports/evidence-types';
+import { applyEffectiveDelta, isEffectiveDelta, type EffectiveDelta } from '@crvouga/atlas/reports/effective-delta';
+import type { EffectiveEvidence } from '@crvouga/atlas/reports/report-index';
 import { contributes, evidenceView, type EvidenceView, type SourceSelection } from '@crvouga/atlas/reports/evidence-view';
 import type { SpecEntry } from '@crvouga/atlas/reports/explorer-types';
 import { combineEvidence, distinctHeaders } from '@crvouga/atlas/reports/layer-merge';
 import type { ReportOutline } from '@crvouga/atlas/reports/layer-types';
 import { SpecIndexSchema } from '@crvouga/atlas/schema';
-import { useInfiniteQuery, useQueries, useQuery } from '@tanstack/react-query';
+import { useInfiniteQuery, useQueries, useQuery, useQueryClient } from '@tanstack/react-query';
 import { createContext, useContext, useEffect, useMemo, useRef, type ReactNode } from 'react';
 
 import { keys, specKey, useAdapter } from '../data/queries';
+import { eventsAddress, listenLive, useLiveStatus } from '../live/live-stream';
+import { liveInvalidator } from '../live/live-query';
+import { useLiveTests } from '../live/live-runs';
+import { withLiveProgress } from '../live/report-progress';
 import { fileName, folderOf, kindOfFile, outlinePath } from '../spec-kind';
 import { useUiStore } from '../state/ui-store';
-import { reportJson, staticEvidence } from './api';
+import { effectiveEvidence, reportJson, staticEvidence } from './api';
 
 /** How often the layer list is asked for while a spec run is writing results, and while nothing is. */
 const LIVE_POLL_MS = 2_000;
 const IDLE_POLL_MS = 15_000;
+/** The effective report is revalidated with its ETag, so asking often costs one small answer. */
+const EFFECTIVE_POLL_MS = 5_000;
+/** While the server's stream is open it says when to read again; this is only the safety net behind it. */
+const LIVE_SAFETY_POLL_MS = 60_000;
+/** At most this often is the report read again because the server said it changed. */
+const LIVE_REREAD_MS = 250;
 
 export type EvidenceState = {
   /** The layer list has been read at least once. */
@@ -63,26 +75,77 @@ function outlineOf(files: readonly string[]): ReportOutline {
   return { specs, sha: null, changedFiles: [] };
 }
 
+const NONE: readonly LayerEvidence[] = [];
+
+function hasExclusions(excluded: SourceSelection): boolean {
+  return Object.values(excluded).some((list) => list.length > 0);
+}
+
 export function EvidenceProvider({ children }: { children: ReactNode }) {
   const adapter = useAdapter();
   const source = specKey(adapter);
   const excluded = useUiStore((s) => s.excluded);
   const setExcluded = useUiStore((s) => s.setExcluded);
 
+  const client = useQueryClient();
+  const stream = useLiveStatus();
+  const streaming = stream === 'live';
+  // The server says when results arrive: read the report again then, not on a timer.
+  useEffect(() => {
+    const url = eventsAddress();
+    if (!url) return;
+    // A burst of results (a CI run finishing, many shards at once) is read once, not once for each.
+    const reads = [liveInvalidator(client, ['evidence-effective'], LIVE_REREAD_MS), liveInvalidator(client, ['evidence-index'], LIVE_REREAD_MS)];
+    const outlines = [liveInvalidator(client, ['evidence-outline'], LIVE_REREAD_MS), liveInvalidator(client, ['spec', source], LIVE_REREAD_MS)];
+    const reread = () => reads.forEach(refresh => refresh());
+    const reoutline = () => { outlines.forEach(refresh => refresh()); reread(); };
+    const stop = listenLive(url, (event) => {
+      if (event.type === 'change' && event.change.scope === 'specs') return reoutline();
+      if (event.type === 'change' && event.change.scope === 'runs' && !event.change.liveRunId) return reread();
+      if (event.type !== 'report' && event.type !== 'open') return;
+      reread();
+      if (event.type === 'open') reoutline();
+    });
+    return () => { stop(); [...reads, ...outlines].forEach(refresh => refresh.cancel()); };
+  }, [client, source]);
+
   const specIndex = useQuery({ queryKey: keys.specIndex(source), queryFn: adapter.specIndex, retry: false });
   const files = useMemo(() => {
     const parsed = SpecIndexSchema.safeParse(specIndex.data);
     return parsed.success ? parsed.data.files : [];
   }, [specIndex.data]);
 
+  // The node answers with only what the report shows, in one request. Leaving a source out needs the
+  // history it hides, so that one case reads every layer, as a store without a node always does.
+  const effective = effectiveEvidence() && !staticEvidence && !hasExclusions(excluded);
+  const overview = useQuery({
+    queryKey: ['evidence-effective'],
+    // Holding a report, ask only for what changed since it; the server answers with all of it when it cannot.
+    queryFn: async ({ signal }) => {
+      const held = client.getQueryData<EffectiveEvidence>(['evidence-effective']);
+      const answer = await reportJson<EffectiveEvidence | EffectiveDelta>(held ? `/evidence/effective?since=${encodeURIComponent(held.version)}` : '/evidence/effective', signal);
+      if (!isEffectiveDelta(answer)) return answer;
+      return (held && applyEffectiveDelta(held, answer)) ?? reportJson<EffectiveEvidence>('/evidence/effective', signal);
+    },
+    enabled: effective,
+    staleTime: 0,
+    refetchOnWindowFocus: 'always',
+    refetchOnReconnect: 'always',
+    retry: false,
+    refetchInterval: streaming ? LIVE_SAFETY_POLL_MS : EFFECTIVE_POLL_MS
+  });
+
   const index = useInfiniteQuery({
     queryKey: ['evidence-index'],
+    enabled: !effective,
     initialPageParam: null as string | null,
     queryFn: ({ pageParam, signal }) => reportJson<EvidencePage>(`/evidence${pageParam ? `?cursor=${encodeURIComponent(pageParam)}` : ''}`, signal),
     getNextPageParam: (page) => page.cursor,
     staleTime: 0,
+    refetchOnWindowFocus: 'always',
+    refetchOnReconnect: 'always',
     retry: false,
-    refetchInterval: (query) => (staticEvidence ? false : query.state.data?.pages[0]?.active.length ? LIVE_POLL_MS : IDLE_POLL_MS)
+    refetchInterval: (query) => (staticEvidence ? false : streaming ? LIVE_SAFETY_POLL_MS : query.state.data?.pages[0]?.active.length ? LIVE_POLL_MS : IDLE_POLL_MS)
   });
   // Show the newest layers at once, then read the older pages behind them.
   const { hasNextPage, isFetching, isError, fetchNextPage } = index;
@@ -98,7 +161,7 @@ export function EvidenceProvider({ children }: { children: ReactNode }) {
   const serverOutline = useQuery({ queryKey: ['evidence-outline'], queryFn: ({ signal }) => reportJson<ReportOutline>('/outline', signal), staleTime: 30_000, retry: false });
   const outline = useMemo(() => serverOutline.data ?? outlineOf(files), [serverOutline.data, files]);
 
-  const wanted = useMemo(() => layers.filter((layer) => contributes(layer, excluded)), [layers, excluded]);
+  const wanted = useMemo(() => (effective ? [] : layers.filter((layer) => contributes(layer, excluded))), [layers, excluded, effective]);
   const rows = useQueries({
     queries: wanted.map((layer) => ({
       queryKey: rowsKey(layer),
@@ -126,23 +189,27 @@ export function EvidenceProvider({ children }: { children: ReactNode }) {
     // `stamp` changes exactly when a layer's rows do.
   }, [wanted, rows.stamp]);
 
-  const view = useMemo(() => evidenceView(combineEvidence(outline, evidence)), [outline, evidence]);
+  const shown = effective ? overview.data?.layers ?? NONE : evidence;
+  const { tests: liveTests } = useLiveTests();
+  const view = useMemo(() => withLiveProgress(evidenceView(combineEvidence(outline, shown)), liveTests), [outline, shown, liveTests]);
   const titles = useMemo(() => new Map(outline.specs.map((spec) => [spec.path, spec.title])), [outline]);
+  const effectiveHeaders = useMemo(() => (overview.data?.layers ?? NONE).map((entry) => entry.layer), [overview.data]);
 
   const state: EvidenceState = {
-    ready: pages !== undefined,
-    unavailable: pages === undefined && index.error ? index.error.message : null,
+    ready: effective ? overview.data !== undefined : pages !== undefined,
+    unavailable: effective ? (overview.data === undefined && overview.error ? overview.error.message : null) : pages === undefined && index.error ? index.error.message : null,
     retry: () => {
+      if (effective) { void Promise.all([overview.refetch(), serverOutline.refetch()]); return; }
       void reportJson<EvidencePage>('/evidence?retry=1')
         .catch(() => null)
         .then(() => Promise.all([index.refetch(), serverOutline.refetch()]));
     },
     pending: wanted.length - evidence.length,
-    layers,
-    evidence,
-    backends: first?.backends ?? [],
-    active: first?.active ?? [],
-    notices,
+    layers: effective ? effectiveHeaders : layers,
+    evidence: shown,
+    backends: effective ? overview.data?.backends ?? [] : first?.backends ?? [],
+    active: effective ? [] : first?.active ?? [],
+    notices: effective ? overview.data?.notices ?? [] : notices,
     view,
     files,
     filesPending: specIndex.isPending,

package/packages/visualizer/src/evidence/evidence.module.css

@@ -15,7 +15,8 @@
 
 .mark[data-status='running'] {
   color: var(--place);
-  animation: turn 0.9s linear infinite;
+  animation: turn 1.8s linear infinite;
+  opacity: .8;
 }
 
 @keyframes turn {
@@ -509,6 +510,11 @@
   transform: rotate(-135deg);
 }
 
+.excerpt[data-progress] {
+  color: var(--ink-3);
+  font-family: inherit;
+}
+
 .excerpt {
   margin: -4px 14px 10px 40px;
   overflow: hidden;
@@ -895,3 +901,7 @@ a.listRow:hover {
     display: none;
   }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .mark[data-status='running'] { animation: none; }
+}

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

@@ -8,6 +8,7 @@ import { featureModel, scenarioLabel, slotsByScenario, type FeatureModel, type F
 import { Bounded } from './marks';
 import { SourceText, SpecHeader } from './spec-header';
 import { SpecSnapshot } from './spec-snapshot';
+import { TestFilter, useRunningFilter } from './test-filter';
 
 type Props = { file: string; text: string; kind: SpecKind; entry: SpecEvidence | undefined; selection: CheckSelection; select: SelectCheck };
 
@@ -23,6 +24,7 @@ function parse(text: string): { feature: FeatureModel | null; error: string | nu
 export function FeaturePage({ file, text, kind, entry, selection, select }: Props) {
   const { feature, error } = useMemo(() => parse(text), [text]);
   const slots = entry?.slots ?? [];
+  const runningOnly = useRunningFilter();
   const filed = useMemo(() => (feature ? slotsByScenario(feature, slots) : { byScenario: new Map<string, CheckSlot[]>(), leftOver: slots }), [feature, slots]);
   const scenarios = feature?.rules.flatMap((rule) => rule.scenarios.filter((scenario) => !scenario.background)) ?? [];
   const planned = scenarios.reduce((count, scenario) => count + Math.max(1, filed.byScenario.get(scenario.name)?.length ?? 0), 0) + filed.leftOver.length;
@@ -30,8 +32,9 @@ export function FeaturePage({ file, text, kind, entry, selection, select }: Prop
 
   const rows = (scenario: FeatureScenario) => {
     const written = <PlainSteps steps={scenario.steps} examples={scenario.examples} />;
-    const recorded = filed.byScenario.get(scenario.name) ?? [];
+    const recorded = (filed.byScenario.get(scenario.name) ?? []).filter(slot => !runningOnly || slot.status === 'running');
     if (!recorded.length) {
+      if (runningOnly) return null;
       const id = `scenario:${scenario.name}`;
       return (
         <ResultRow key={id} label={scenario.name} slot={null} open={selection.check === id} onToggle={() => toggle(id)}>
@@ -53,6 +56,7 @@ export function FeaturePage({ file, text, kind, entry, selection, select }: Prop
         {feature?.description && <p className={styles.lead}>{feature.description}</p>}
       </SpecHeader>
       <SpecSnapshot title={feature?.name || file.split('/').at(-1)!} text={text} kind={kind.one} />
+      <TestFilter slots={slots} />
       {error && <p role="alert" className={styles.notice}>This feature could not be parsed: {error}</p>}
       {feature?.rules.map((rule, index) => (
         <section key={index} className={styles.block}>
@@ -67,12 +71,12 @@ export function FeaturePage({ file, text, kind, entry, selection, select }: Prop
           <ul className={styles.results}>{rule.scenarios.filter((scenario) => !scenario.background).map(rows)}</ul>
         </section>
       ))}
-      {filed.leftOver.length > 0 && (
+      {filed.leftOver.some(slot => !runningOnly || slot.status === 'running') && (
         <section className={styles.block}>
           <h2 className={styles.blockTitle}>{feature ? 'Other recorded results' : 'Recorded results'}</h2>
           {feature && <p className={styles.blockLead}>Recorded against this file under a name no scenario has now.</p>}
           <ul className={styles.results}>
-            <Bounded items={filed.leftOver} size={40} more="More results">
+            <Bounded items={filed.leftOver.filter(slot => !runningOnly || slot.status === 'running')} size={40} more="More results">
               {(slot) => (
                 <ResultRow key={slot.key} label={feature ? scenarioLabel(feature.name, slot.title) : slot.title} slot={slot} open={selection.check === slot.id} onToggle={() => toggle(slot.id)}>
                   <CheckDetail slot={slot} layerId={selection.check === slot.id ? selection.layer : undefined} select={(patch) => select({ check: slot.id, ...patch })} reads="steps" />

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

@@ -8,6 +8,7 @@ import { Bounded } from './marks';
 import { QUINT_GROUPS, quintOutline } from './quint';
 import { SourceText, SpecHeader } from './spec-header';
 import { SpecSnapshot } from './spec-snapshot';
+import { TestFilter, useRunningFilter } from './test-filter';
 
 type Props = { file: string; text: string; kind: SpecKind; entry: SpecEvidence | undefined; selection: CheckSelection; select: SelectCheck };
 
@@ -16,17 +17,20 @@ export function ModelPage({ file, text, kind, entry, selection, select }: Props)
   const items = useMemo(() => quintOutline(text), [text]);
   const moduleName = items.find((item) => item.kind === 'module')?.name;
   const slots = useMemo(() => [...(entry?.slots ?? [])].sort((a, b) => a.title.localeCompare(b.title, undefined, { numeric: true })), [entry]);
+  const runningOnly = useRunningFilter();
+  const visible = slots.filter(slot => !runningOnly || slot.status === 'running');
   const toggle = (id: string) => select({ check: selection.check === id ? null : id, layer: null });
   const label = (title: string) => (moduleName && title.startsWith(`${moduleName} · `) ? title.slice(moduleName.length + 3) : title);
   return (
     <article className={styles.page}>
       <SpecHeader title={moduleName ?? file.split('/').at(-1)!} file={file} kind={kind} entry={entry} />
       <SpecSnapshot title={moduleName ?? file.split('/').at(-1)!} text={text} kind={kind.one} />
-      {slots.length > 0 && (
+      <TestFilter slots={slots} />
+      {visible.length > 0 && (
         <section className={styles.block}>
           <h2 className={styles.blockTitle}>Traces</h2>
           <ul className={styles.results}>
-            <Bounded items={slots} size={40} more="More traces">
+            <Bounded items={visible} size={40} more="More traces">
               {(slot) => (
                 <ResultRow key={slot.key} label={label(slot.title)} slot={slot} open={selection.check === slot.id} onToggle={() => toggle(slot.id)}>
                   <CheckDetail slot={slot} layerId={selection.check === slot.id ? selection.layer : undefined} select={(patch) => select({ check: slot.id, ...patch })} reads="trace" />

package/packages/visualizer/src/evidence/project-home.tsx

@@ -0,0 +1,45 @@
+import { Link } from '@tanstack/react-router';
+import { lazy, Suspense, useState } from 'react';
+import { isStatechartFile } from '@crvouga/atlas/schema';
+import { useEvidence } from './evidence-context';
+import { CheckDetail, ResultRow, type CheckSelection } from './check-detail';
+import { TestFilter, useRunningFilter } from './test-filter';
+import { Bounded } from './marks';
+import { SPEC_KINDS, kindOfFile } from '../spec-kind';
+import { currentProject } from '../runtime';
+import styles from './evidence.module.css';
+const RecordingPage = lazy(() => import('./recording-page').then(module => ({ default: module.RecordingPage })));
+
+/** A project can contain any test runner or spec notation; statecharts are optional. */
+export function ProjectHome() {
+  const evidence = useEvidence();
+  const runningOnly = useRunningFilter();
+  const [selection, setSelection] = useState<CheckSelection>({});
+  const [selectedKey, setSelectedKey] = useState<string | null>(null);
+  const [recording, setRecording] = useState(false);
+  const [moment, setMoment] = useState<number | null>(null);
+  const kinds = SPEC_KINDS.map(kind => ({ kind, files: evidence.files.filter(kind.accepts) })).filter(entry => entry.files.length);
+  const checks = [...evidence.view.unassigned, ...[...evidence.view.specs].filter(([file]) => !kindOfFile(file) && !isStatechartFile(file)).flatMap(([, entry]) => entry.slots)];
+  const visible = checks.filter(slot => !runningOnly || slot.status === 'running');
+  return <article className={styles.page}>
+    <header className={styles.specHead}><h1 className={styles.title}>{currentProject()?.split('-').map(word => word[0]?.toUpperCase() + word.slice(1)).join(' ') || 'Project reports'}</h1></header>
+    {evidence.unavailable && <p role="alert" className={styles.notice}>{evidence.unavailable}</p>}
+    {kinds.length > 0 && <section className={styles.block}><h2 className={styles.blockTitle}>Specs</h2><ul className={styles.list}>{kinds.map(({ kind, files }) => <li key={kind.id}>
+      <Link className={styles.listRow} to="/specs/$kind" params={{ kind: kind.id }} search={{}}><strong>{kind.label}</strong><span>{files.length} {files.length === 1 ? kind.one : kind.many}</span></Link>
+    </li>)}</ul></section>}
+    {checks.length > 0 && <section className={styles.block}><h2 className={styles.blockTitle}>Tests</h2><TestFilter slots={checks} /><ul className={styles.results}>
+      <Bounded items={visible} size={40} more="More tests">{slot => <ResultRow key={slot.key} label={slot.title} slot={slot} open={selectedKey === slot.key} onToggle={() => { setSelectedKey(selectedKey === slot.key ? null : slot.key); setSelection({ check: slot.id }); setRecording(false); }}>
+        {recording ? <Suspense fallback={<p role="status">Loading the recording…</p>}><RecordingPage slot={slot} layerId={selection.layer} label={slot.title} back="Test report" moment={moment} onMoment={setMoment} onClose={() => setRecording(false)} /></Suspense>
+          : <CheckDetail slot={slot} layerId={selection.layer} reads="steps" select={patch => { setSelection({ check: patch.check ?? slot.id, layer: patch.layer ?? undefined }); if (patch.view === 'recording') { setRecording(true); setMoment(null); } }} />}
+      </ResultRow>}</Bounded>
+    </ul></section>}
+    {!kinds.length && !checks.length && <p className={styles.aside}>No reports yet. Publish tests and specs to this project to populate its report.</p>}
+  </article>;
+}
+
+export function ProjectSpecIndex() {
+  const { files } = useEvidence();
+  return <nav className={styles.index} aria-label="Project specs"><h2>Specs</h2><ul>{SPEC_KINDS.filter(kind => files.some(kind.accepts)).map(kind => <li key={kind.id}>
+    <Link className={styles.indexRow} to="/specs/$kind" params={{ kind: kind.id }} search={{}}>{kind.label}</Link>
+  </li>)}</ul></nav>;
+}

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

@@ -10,6 +10,7 @@ import styles from './evidence.module.css';
 import { duration, statusWord, useNow } from './format';
 import { Origin, StatusMark } from './marks';
 import { Timeline } from './recording';
+import { TestProgress, useTestProgress } from '../live/test-progress';
 
 type Props = {
   /** The check whose recording is open, once the combined report holds it. */
@@ -39,6 +40,7 @@ function needsStylesheet(report: RunReport | undefined): boolean {
 
 /** One recorded test, opened in place of its spec. */
 export function RecordingPage({ slot, layerId, label, back, moment, onMoment, onClose }: Props) {
+  const progress = useTestProgress(slot ?? null);
   const { evidence, backends, pending, ready, unavailable } = useEvidence();
   const now = useNow();
   const history = useMemo(() => (slot ? checkHistory(evidence, slot.specPath, slot.id) : []), [evidence, slot]);
@@ -64,8 +66,9 @@ export function RecordingPage({ slot, layerId, label, back, moment, onMoment, on
           </p>
         )}
       </header>
+      <TestProgress {...progress} />
       {waiting && <p className={styles.aside} role="status">Loading the recording…</p>}
-      {!chosen && !waiting && <p className={styles.notice}>{unavailable ?? 'This result is not in the combined report any more. A newer run may have replaced it, or its source is switched off.'}</p>}
+      {!chosen && !waiting && !progress.tests.length && <p className={styles.notice}>{unavailable ?? 'This result is not in the combined report any more. A newer run may have replaced it, or its source is switched off.'}</p>}
       {chosen && !paths && <p className={styles.notice}>This result has an outcome and no recorded timeline.</p>}
       {report.isLoading && <p className={styles.aside} role="status">Loading the recording…</p>}
       {report.isError && (

package/packages/visualizer/src/evidence/spec-index.tsx

@@ -11,6 +11,7 @@ import { StatusMark, Tally } from './marks';
 const FILTERS: readonly { readonly id: ResultFilter; readonly label: string; readonly keeps: (summary: SpecSummary) => boolean }[] = [
   { id: 'all', label: 'All', keeps: () => true },
   { id: 'results', label: 'Results', keeps: (summary) => summary.status !== 'none' },
+  { id: 'running', label: 'Running', keeps: (summary) => summary.counts.running > 0 },
   { id: 'failed', label: 'Failing', keeps: (summary) => summary.counts.failed > 0 },
   { id: 'none', label: 'None', keeps: (summary) => summary.status === 'none' }
 ];
@@ -47,7 +48,7 @@ export function SpecIndex({ kind }: { kind: SpecKind }) {
       {evidence.filesError && <p className={styles.indexNote}>The file list could not be loaded.</p>}
       {!evidence.filesPending && !evidence.filesError && visible.length === 0 && (
         <p className={styles.indexNote}>
-          {rows.length === 0 ? `No ${kind.many} in this spec set.` : filter === 'failed' ? `No failing ${kind.many}.` : filter === 'results' ? `No ${kind.many} with results yet.` : `Every ${kind.one} has results.`}
+          {rows.length === 0 ? `No ${kind.many} in this spec set.` : filter === 'running' ? `No running ${kind.many}.` : filter === 'failed' ? `No failing ${kind.many}.` : filter === 'results' ? `No ${kind.many} with results yet.` : `Every ${kind.one} has results.`}
         </p>
       )}
       {groups.map(([folder, entries]) => (

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

@@ -1,16 +1,23 @@
 import { useQuery } from '@tanstack/react-query';
 import { useNavigate, useParams, useSearch } from '@tanstack/react-router';
+import { lazy, Suspense } from 'react';
 
 import { keys, specKey, useAdapter } from '../data/queries';
 import { outlinePath, specFile, specKind } from '../spec-kind';
 import type { SelectCheck } from './check-detail';
-import { DocumentPage } from './document-page';
 import { useEvidence } from './evidence-context';
 import styles from './evidence.module.css';
-import { FeaturePage } from './feature-page';
-import { ModelPage } from './model-page';
 import { Overview } from './overview';
-import { RecordingPage } from './recording-page';
+
+// Each kind of spec has a page with a parser of its own (Gherkin, Quint, DMN); a page loads only the one it shows.
+const DocumentPage = lazy(() => import('./document-page').then((m) => ({ default: m.DocumentPage })));
+const FeaturePage = lazy(() => import('./feature-page').then((m) => ({ default: m.FeaturePage })));
+const ModelPage = lazy(() => import('./model-page').then((m) => ({ default: m.ModelPage })));
+const RecordingPage = lazy(() => import('./recording-page').then((m) => ({ default: m.RecordingPage })));
+
+function Loading({ children }: { children: React.ReactNode }) {
+  return <Suspense fallback={<article className={styles.page}><p className={styles.aside} role="status">Loading…</p></article>}>{children}</Suspense>;
+}
 
 /** One spec tab: its overview, one of its documents, or a recording opened from that document. */
 export function SpecPage() {
@@ -63,15 +70,17 @@ export function SpecPage() {
     const spec = `${evidence.titleOf(file)}: `;
     const label = slot ? (slot.title.startsWith(spec) ? slot.title.slice(spec.length) : slot.title) : 'Recorded test';
     return (
-      <RecordingPage
-        slot={slot}
-        layerId={search.layer}
-        label={label}
-        back={evidence.titleOf(file)}
-        moment={search.moment ?? null}
-        onMoment={(moment, replace) => void navigate({ search: (prev) => ({ ...prev, moment }), replace })}
-        onClose={() => select({ view: null })}
-      />
+      <Loading>
+        <RecordingPage
+          slot={slot}
+          layerId={search.layer}
+          label={label}
+          back={evidence.titleOf(file)}
+          moment={search.moment ?? null}
+          onMoment={(moment, replace) => void navigate({ search: (prev) => ({ ...prev, moment }), replace })}
+          onClose={() => select({ view: null })}
+        />
+      </Loading>
     );
   }
   if (text.isPending) return <article className={styles.page}><p className={styles.aside} role="status">Loading the {kind.one}…</p></article>;
@@ -86,7 +95,5 @@ export function SpecPage() {
     );
   }
   const page = { file, text: text.data, kind, entry, selection: { check: search.check, layer: search.layer }, select };
-  if (kind.id === 'gherkin') return <FeaturePage {...page} />;
-  if (kind.id === 'quint') return <ModelPage {...page} />;
-  return <DocumentPage {...page} />;
+  return <Loading>{kind.id === 'gherkin' ? <FeaturePage {...page} /> : kind.id === 'quint' ? <ModelPage {...page} /> : <DocumentPage {...page} />}</Loading>;
 }

package/packages/visualizer/src/evidence/test-filter.tsx

@@ -0,0 +1,21 @@
+import type { CheckSlot } from '@crvouga/atlas/reports/evidence-view';
+import { useUiStore } from '../state/ui-store';
+import styles from './evidence.module.css';
+
+/** Filter actual test rows as well as the spec index. Counts always describe the whole document. */
+export function TestFilter({ slots }: { slots: readonly CheckSlot[] }) {
+  const filter = useUiStore(s => s.resultFilter);
+  const setFilter = useUiStore(s => s.setResultFilter);
+  const running = slots.filter(slot => slot.status === 'running').length;
+  return <>
+    <div className={styles.filters} role="group" aria-label="Test status">
+      <button type="button" aria-pressed={filter !== 'running'} onClick={() => setFilter('all')}>All tests <span>{slots.length}</span></button>
+      <button type="button" aria-pressed={filter === 'running'} onClick={() => setFilter('running')}>Running <span>{running}</span></button>
+    </div>
+    {filter === 'running' && running === 0 && <p className={styles.aside} role="status">No running tests.</p>}
+  </>;
+}
+
+export function useRunningFilter() {
+  return useUiStore(s => s.resultFilter === 'running');
+}

package/packages/visualizer/src/find/Finder.tsx

@@ -9,7 +9,7 @@ import { StatusMark } from '../evidence/marks';
 import { useEvidence } from '../evidence/evidence-context';
 import { kindOfFile } from '../spec-kind';
 import { corpusFrom } from './corpus';
-import { setFinderOpen, setHelpOpen, toggleFinder, useFinderOpen, useHelpOpen, isHelpOpen } from './open';
+import { commandKey, setFinderOpen, setHelpOpen, toggleFinder, useFinderOpen, useHelpOpen, isHelpOpen } from './open';
 import { FIND_GROUPS, indexCorpus, notationOf, rankIndex, splitQuery, type FindDoc, type FindKind, type FindTarget, type Ranked } from './rank';
 import { applySemantic, createWorkerEmbedder, embeddingsAvailable, embedText, textHash, type Embedder } from './semantic';
 import styles from './Finder.module.css';
@@ -36,10 +36,6 @@ const SHORTCUTS: readonly { readonly keys: string; readonly does: string }[] = [
   { keys: 'Home  End', does: 'Start and end of a recording' }
 ];
 
-function commandKey() {
-  return typeof navigator !== 'undefined' && /Mac|iPhone|iPad/.test(navigator.userAgent) ? '⌘K' : 'Ctrl+K';
-}
-
 function isTypingTarget(target: EventTarget | null) {
   if (!(target instanceof HTMLElement)) return false;
   const tag = target.tagName;
@@ -299,5 +295,3 @@ function Row({ hit }: { hit: Ranked }) {
     </>
   );
 }
-
-export { commandKey };

package/packages/visualizer/src/find/open.ts

@@ -49,3 +49,7 @@ export function useFinderOpen() {
 export function useHelpOpen() {
   return useSyncExternalStore(subscribeFinder, isHelpOpen, () => false);
 }
+
+export function commandKey() {
+  return typeof navigator !== 'undefined' && /Mac|iPhone|iPad/.test(navigator.userAgent) ? '⌘K' : 'Ctrl+K';
+}

package/packages/visualizer/src/live/live-query.ts

@@ -0,0 +1,21 @@
+import type { QueryClient, QueryKey } from '@tanstack/react-query';
+import { throttled } from './live-stream';
+
+/** Coalesce bursts without cancelling useful work; an event during a fetch guarantees one trailing read. */
+export function liveInvalidator(client: QueryClient, queryKey: QueryKey, ms = 150) {
+  let dirty = false;
+  let reading = false;
+  let stopped = false;
+  const drain = throttled(() => {
+    if (stopped || reading || !dirty) return;
+    dirty = false;
+    reading = true;
+    void client.invalidateQueries({ queryKey }, { cancelRefetch: false }).finally(() => {
+      reading = false;
+      if (dirty && !stopped) drain();
+    });
+  }, ms);
+  const refresh = () => { if (!stopped) { dirty = true; drain(); } };
+  refresh.cancel = () => { stopped = true; dirty = false; drain.cancel(); };
+  return refresh;
+}

package/packages/visualizer/src/live/live-runs.tsx

@@ -0,0 +1,69 @@
+import { createContext, useContext, useEffect, useMemo, type ReactNode } from 'react';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import type { LiveRun } from '@crvouga/atlas/schema';
+import { runtimeConfig, runtimeUrl } from '../runtime';
+import { eventsAddress, listenLive, useLiveStatus } from './live-stream';
+import { liveInvalidator } from './live-query';
+import type { LiveCheck } from '@crvouga/atlas/schema';
+import { useUiStore } from '../state/ui-store';
+import { indexLiveTests } from './report-progress';
+
+export type LiveTest = { run: LiveRun; check: LiveCheck };
+type LiveState = { tests: readonly LiveTest[]; index: ReturnType<typeof indexLiveTests>; error: string | null };
+const EMPTY: LiveState = { tests: [], index: new Map(), error: null };
+const LiveContext = createContext<LiveState>(EMPTY);
+
+/** One subscription shared by report rows; leases never rewrite historical report results. */
+export function LiveRunsProvider({ children, enabled = true }: { children: ReactNode; enabled?: boolean }) {
+  const client = useQueryClient();
+  const streaming = useLiveStatus() === 'live';
+  const excluded = useUiStore(s => s.excluded);
+  const api = runtimeUrl(runtimeConfig()?.api);
+  const url = api && enabled ? `${api.replace(/\/$/, '')}/live` : undefined;
+  const key = ['live-runs', url] as const;
+  const query = useQuery({ queryKey: key, enabled: !!url, retry: false, staleTime: 0, refetchOnWindowFocus: 'always', refetchOnReconnect: 'always',
+    queryFn: async ({ signal }) => {
+      const response = await fetch(url!, { signal, cache: 'no-store' });
+      if (!response.ok) throw new Error(`Live feed unavailable (${response.status}). Last received results may be stale.`);
+      const fetched = (await response.json()) as { runs: LiveRun[] };
+      // An event can arrive while this HTTP snapshot is in flight. Keep its newer progress,
+      // while still loading the other runs from the snapshot rather than cancelling it.
+      const held = client.getQueryData<{ runs: LiveRun[] }>(key);
+      const runs = new Map(fetched.runs.map(run => [run.id, run]));
+      for (const run of held?.runs ?? []) {
+        const read = runs.get(run.id);
+        if (!read || run.sequence > read.sequence || (run.sequence === read.sequence &&
+          ((run.status !== 'running' && read.status === 'running') || run.lastHeartbeatAtMs > read.lastHeartbeatAtMs))) runs.set(run.id, run);
+      }
+      return { runs: [...runs.values()].sort((a, b) => b.startedAtMs - a.startedAtMs || a.id.localeCompare(b.id)).slice(0, 50) };
+    }, refetchInterval: streaming ? 60_000 : 2000, refetchIntervalInBackground: true });
+  useEffect(() => {
+    const address = eventsAddress();
+    if (!address || !url) return;
+    const refresh = liveInvalidator(client, ['live-runs', url]);
+    const stop = listenLive(address, event => {
+      if (event.type === 'run') {
+        client.setQueryData<{ runs: LiveRun[] }>(['live-runs', url], held => ({ runs: [event.run, ...(held?.runs ?? []).filter(run => run.id !== event.run.id)]
+          .sort((a, b) => b.startedAtMs - a.startedAtMs || a.id.localeCompare(b.id)).slice(0, 50) }));
+      }
+      if (event.type === 'open' || (event.type === 'change' && event.change.scope === 'runs' && !event.change.liveRunId)) refresh();
+    });
+    return () => { stop(); refresh.cancel(); };
+  }, [client, url]);
+  const value = useMemo(() => {
+    const tests: LiveTest[] = [];
+    for (const run of [...(query.data?.runs ?? [])].sort((a, b) => b.startedAtMs - a.startedAtMs)) {
+      if (excluded.branches.includes(run.branch ?? 'Unknown branch') || excluded.versions.includes(run.sha ?? 'unknown') ||
+        excluded.environments.includes(run.environment || 'unspecified') || excluded.backends.length > 0) continue;
+      const checks = new Map([...run.recent, ...run.current].map(check => [check.id, check]));
+      for (const check of checks.values()) tests.push({ run, check: run.status !== 'running' && check.status === 'running'
+        ? { ...check, status: 'not-run', detail: run.reason ?? 'Run ended before this test completed.' } : check });
+    }
+    return { tests, index: indexLiveTests(tests), error: query.error?.message ?? null };
+  }, [query.data, query.error, excluded]);
+  return <LiveContext.Provider value={url ? value : EMPTY}>{children}</LiveContext.Provider>;
+}
+
+export function useLiveTests() {
+  return useContext(LiveContext);
+}