@crvouga/atlas 0.5.0 → 0.6.0

package/packages/visualizer/src/data/queries.ts

@@ -1,3 +1,4 @@
+import { liveInvalidator } from '../live/live-query';
 import type { DataIssue } from '@crvouga/atlas/schema';
 import { useContext, useEffect, useMemo } from 'react';
 import { isStatechartFile, RunsIndexSchema, SpecIndexSchema } from '@crvouga/atlas/schema';
@@ -71,28 +72,34 @@ export function useLiveUpdates(enabled = true) {
   useEffect(() => {
     if (!enabled) return;
     const unsubscribe: (() => void)[] = [];
+    const refreshers = new Map<string, ReturnType<typeof liveInvalidator>>();
+    const refresh = (key: readonly string[]) => {
+      const id = JSON.stringify(key);
+      let reread = refreshers.get(id);
+      if (!reread) { reread = liveInvalidator(client, key); refreshers.set(id, reread); }
+      reread();
+    };
     if (adapter.subscribe)
       unsubscribe.push(
         adapter.subscribe((change) => {
           if (change.scope !== 'specs') return;
-          void client.invalidateQueries({ queryKey: keys.specIndex(specKey(adapter)) });
-          if (!change.files.length) void client.invalidateQueries({ queryKey: ['spec', specKey(adapter)] });
-          for (const file of change.files) void client.invalidateQueries({ queryKey: keys.specFile(specKey(adapter), file) });
+          refresh(keys.specIndex(specKey(adapter)));
+          if (!change.files.length) refresh(['spec', specKey(adapter)]);
+          for (const file of change.files) refresh(keys.specFile(specKey(adapter), file));
         })
       );
     for (const { backend, enabled: active } of entries) {
       if (!active || !backend.subscribe) continue;
       unsubscribe.push(
         backend.subscribe((change) => {
-          if (change.scope !== 'runs') return;
-          void client.invalidateQueries({ queryKey: keys.runsIndex(backend.cacheKey) });
-          if (!change.runIds.length) void client.invalidateQueries({ queryKey: keys.manifests(backend.cacheKey) });
-          for (const id of change.runIds) void client.invalidateQueries({ queryKey: keys.manifest(backend.cacheKey, id) });
+          if (change.scope !== 'runs' || change.liveRunId) return;
+          refresh(['reports', backend.cacheKey]);
         })
       );
     }
     return () => {
       for (const stop of unsubscribe) stop();
+      for (const refresh of refreshers.values()) refresh.cancel();
     };
   }, [adapter, entries, client, enabled]);
 }

package/packages/visualizer/src/evidence/api.ts

@@ -33,7 +33,8 @@ function explain(status: number) {
 
 /** A captured file's address in the browser. Pictures and video use it directly; fetches use the same address. */
 export function reportAssetUrl(path: string): string {
-  return staticEvidence ? `${reportsBase}/${evidenceFile(path).split('/').map(encodeURIComponent).join('/')}` : `${reportsBase}${path}`;
+  const base = runtime()?.reportsUrl?.replace(/\/$/, '') ?? reportsBase;
+  return staticEvidence ? `${base}/${evidenceFile(path).split('/').map(encodeURIComponent).join('/')}` : `${base}${path}`;
 }
 
 export async function reportResponse(path: string, signal?: AbortSignal) {

package/packages/visualizer/src/evidence/check-detail.tsx

@@ -16,6 +16,7 @@ import type { FeatureExamples, FeatureStep } from './gherkin';
 import { Bounded, Origin, StatusMark } from './marks';
 import { ModelTrace } from './model-trace';
 import { recordedModelStates } from './quint';
+import { TestProgress, useTestProgress } from '../live/test-progress';
 
 /** What the address says is open: a check, and optionally one particular layer's record of it. */
 export type CheckSelection = { readonly check?: string; readonly layer?: string };
@@ -59,8 +60,11 @@ function outcomeName(outcome: EvidenceResult) {
 
 export function ResultRow({ label, slot, open, onToggle, children }: { label: string; slot: CheckSlot | null; open: boolean; onToggle: () => void; children: ReactNode }) {
   const now = useNow();
+  const progress = useTestProgress(slot);
+  const current = progress.tests.find(({ run, check }) => run.status === 'running' && check.status === 'running');
+  const interrupted = !current && progress.tests.find(({ run, check }) => run.status === 'interrupted' && check.status === 'not-run');
   const newest = slot?.outcomes[0];
-  const marks = slot ? environmentMarks(slot) : [];
+  const marks = slot && !current ? environmentMarks(slot) : [];
   const failure = slot?.status === 'failed' ? slot.outcomes.find((outcome) => outcome.row.status === 'failed')?.row.detail.split('\n')[0] : '';
   return (
     <li className={styles.result} data-status={slot?.status ?? 'none'} data-open={open || undefined}>
@@ -77,12 +81,15 @@ export function ResultRow({ label, slot, open, onToggle, children }: { label: st
           )}
         </span>
         {slot?.live && <span className={styles.liveTag}>Running now</span>}
+        {interrupted && <span className={styles.liveTag}>Interrupted</span>}
         <span className={styles.resultAside}>
-          {newest ? [newest.row.evidence?.attachments ? plural(newest.row.evidence.attachments, 'attachment', 'attachments') : '', duration(newest.row.durationMs), slot.live ? '' : ago(slot.latestAtMs, now)].filter(Boolean).join(' · ') : 'No result'}
+          {current ? duration(current.check.durationMs ?? null) || 'In progress' : interrupted ? 'No completed result' : newest ? [newest.row.evidence?.attachments ? plural(newest.row.evidence.attachments, 'attachment', 'attachments') : '', duration(newest.row.durationMs), slot.live ? '' : ago(slot.latestAtMs, now)].filter(Boolean).join(' · ') : 'No result'}
         </span>
         <span className={styles.chevron} aria-hidden="true" />
       </button>
-      {!open && failure && <p className={styles.excerpt}>{failure}</p>}
+      {!open && current && <p className={styles.excerpt} data-progress="true" role="status">{current.check.detail || current.check.steps?.at(-1)?.name || 'Test in progress…'}{progress.error ? ` · ${progress.error}` : ''}</p>}
+      {!open && interrupted && <p className={styles.excerpt} data-progress="true" role="status">{interrupted.run.reason ?? 'The test run was interrupted.'}</p>}
+      {!open && !current && failure && <p className={styles.excerpt}>{failure}</p>}
       {open && <div className={styles.resultBody}>{children}</div>}
     </li>
   );
@@ -197,7 +204,15 @@ type Props = {
 };
 
 /** Everything recorded for one check: the chosen result, how it went, and every other run of it. */
-export function CheckDetail({ slot, layerId, select, reads, written }: Props) {
+export function CheckDetail(props: Props) {
+  const progress = useTestProgress(props.slot);
+  const inProgress = progress.tests.some(({ run, check }) => check.status === 'running' && run.status === 'running' || check.status === 'not-run' && run.status === 'interrupted');
+  return <><TestProgress {...progress} />{props.slot.outcomes.length > 0
+    ? inProgress && !props.layerId ? <details className={styles.actions}><summary>Previous recorded result</summary><RecordedCheckDetail {...props} /></details> : <RecordedCheckDetail {...props} />
+    : props.written}</>;
+}
+
+function RecordedCheckDetail({ slot, layerId, select, reads, written }: Props) {
   const { evidence, backends } = useEvidence();
   const now = useNow();
   const [variant, setVariant] = useState(0);

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

@@ -7,23 +7,27 @@ import styles from './evidence.module.css';
 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 };
 
 /** A decision table, structure or objective: what it says, and each check recorded against it. */
 export function DocumentPage({ file, text, kind, entry, selection, select }: Props) {
   const slots = entry?.slots ?? [];
+  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 name = file.split('/').at(-1)!.replace(/\.[^.]+$/, '').replace(/\.openslo$/, '');
   return (
     <article className={styles.page}>
       <SpecHeader title={name} file={file} kind={kind} entry={entry} />
       <SpecSnapshot title={name} text={text} kind={kind.one} />
-      {slots.length > 0 && (
+      <TestFilter slots={slots} />
+      {visible.length > 0 && (
         <section className={styles.block}>
           <h2 className={styles.blockTitle}>Checks</h2>
           <ul className={styles.results}>
-            <Bounded items={slots} size={40} more="More checks">
+            <Bounded items={visible} size={40} more="More checks">
               {(slot) => (
                 <ResultRow key={slot.key} 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="steps" />

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

@@ -10,7 +10,10 @@ import { useInfiniteQuery, useQueries, useQuery, useQueryClient } from '@tanstac
 import { createContext, useContext, useEffect, useMemo, useRef, type ReactNode } from 'react';
 
 import { keys, specKey, useAdapter } from '../data/queries';
-import { eventsAddress, listenLive, throttled, useLiveStatus } from '../live/live-stream';
+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 { effectiveEvidence, reportJson, staticEvidence } from './api';
@@ -92,22 +95,19 @@ export function EvidenceProvider({ children }: { children: ReactNode }) {
     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 reread = throttled(() => {
-      void client.invalidateQueries({ queryKey: ['evidence-effective'] });
-      void client.invalidateQueries({ queryKey: ['evidence-index'] });
-    }, LIVE_REREAD_MS);
-    const reoutline = throttled(() => {
-      void client.invalidateQueries({ queryKey: ['evidence-outline'] });
-      void client.invalidateQueries({ queryKey: ['evidence-effective'] });
-    }, LIVE_REREAD_MS);
+    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(); reread.cancel(); reoutline.cancel(); };
-  }, [client]);
+    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(() => {
@@ -129,6 +129,8 @@ export function EvidenceProvider({ children }: { children: ReactNode }) {
     },
     enabled: effective,
     staleTime: 0,
+    refetchOnWindowFocus: 'always',
+    refetchOnReconnect: 'always',
     retry: false,
     refetchInterval: streaming ? LIVE_SAFETY_POLL_MS : EFFECTIVE_POLL_MS
   });
@@ -140,6 +142,8 @@ export function EvidenceProvider({ children }: { children: ReactNode }) {
     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 : streaming ? LIVE_SAFETY_POLL_MS : query.state.data?.pages[0]?.active.length ? LIVE_POLL_MS : IDLE_POLL_MS)
   });
@@ -186,7 +190,8 @@ export function EvidenceProvider({ children }: { children: ReactNode }) {
   }, [wanted, rows.stamp]);
 
   const shown = effective ? overview.data?.layers ?? NONE : evidence;
-  const view = useMemo(() => evidenceView(combineEvidence(outline, shown)), [outline, shown]);
+  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]);
 

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/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/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);
+}

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

@@ -1,4 +1,4 @@
-import { AtlasChangeSchema, type AtlasChange } from '@crvouga/atlas/schema';
+import { AtlasChangeSchema, LiveRunSchema, type LiveRun, type AtlasChange } from '@crvouga/atlas/schema';
 import { useSyncExternalStore } from 'react';
 
 import { runtimeConfig, runtimeUrl } from '../runtime';
@@ -6,6 +6,8 @@ import { runtimeConfig, runtimeUrl } from '../runtime';
 /** What the server tells a viewer as it happens. */
 export type LiveEvent =
   | { readonly type: 'open' }
+  | { readonly type: 'run'; readonly run: LiveRun }
+  | { readonly type: 'projects' }
   | { readonly type: 'report'; readonly report: ReportAnnouncement }
   | { readonly type: 'change'; readonly change: AtlasChange };
 
@@ -74,31 +76,45 @@ function connect(stream: Stream) {
   stream.timer = null;
   const source = new EventSource(stream.url);
   stream.source = source;
+  let silenceMs = SILENCE_MS;
+  const on = (name: string, handler: (event: Event) => void) => source.addEventListener(name, event => {
+    if (stream.source === source) handler(event);
+  });
   const heard = () => {
     if (stream.watchdog) clearTimeout(stream.watchdog);
-    stream.watchdog = setTimeout(() => lose(stream), SILENCE_MS);
+    stream.watchdog = setTimeout(() => lose(stream), silenceMs);
   };
-  source.addEventListener('open', () => {
+  on('open', () => {
     heard();
     stream.attempts = 0;
     setStatus(stream, 'live');
     // Anything may have happened while the stream was away, so a (re)connection reads everything again.
     emit(stream, { type: 'open' });
   });
-  source.addEventListener('hello', heard);
-  source.addEventListener('ping', heard);
-  source.addEventListener('report', (event) => {
+  on('hello', event => {
+    const hello = parse((event as MessageEvent<string>).data) as { heartbeatMs?: unknown } | null;
+    if (typeof hello?.heartbeatMs === 'number' && Number.isFinite(hello.heartbeatMs) && hello.heartbeatMs > 0) silenceMs = Math.max(SILENCE_MS, hello.heartbeatMs * 3);
+    heard();
+  });
+  on('ping', heard);
+  on('report', (event) => {
     heard();
     const report = parse((event as MessageEvent<string>).data) as ReportAnnouncement | null;
     if (report && typeof report.version === 'string') emit(stream, { type: 'report', report: { ...report, added: Array.isArray(report.added) ? report.added : [] } });
   });
-  source.addEventListener('atlas:change', (event) => {
+  on('run', event => {
+    heard();
+    const run = LiveRunSchema.safeParse(parse((event as MessageEvent<string>).data));
+    if (run.success) emit(stream, { type: 'run', run: run.data });
+  });
+  on('projects', () => { heard(); emit(stream, { type: 'projects' }); });
+  on('atlas:change', (event) => {
     heard();
     const change = AtlasChangeSchema.safeParse(parse((event as MessageEvent<string>).data));
     if (change.success) emit(stream, { type: 'change', change: change.data });
   });
   // The server's heartbeat is a named `ping` event, so a quiet server is told apart from a dead connection.
-  source.addEventListener('error', () => {
+  on('error', () => {
     setStatus(stream, stream.attempts === 0 && stream.status === 'connecting' ? 'connecting' : 'reconnecting');
     // The browser retries a dropped stream by itself. A refused one (401, 503) it gives up on: retry that here, slowly.
     if (source.readyState === EventSource.CLOSED) lose(stream);
@@ -124,6 +140,7 @@ function release(stream: Stream) {
   if (stream.timer) clearTimeout(stream.timer);
   if (stream.watchdog) clearTimeout(stream.watchdog);
   stream.source?.close();
+  stream.source = null;
   streams.delete(stream.url);
   setStatus(stream, 'off');
 }
@@ -155,7 +172,11 @@ export function listenChanges(url: string, onChange: (change: AtlasChange) => vo
   return listenLive(url, (event) => {
     if (event.type === 'change') onChange(event.change);
     // A fresh connection may have missed changes while it was away.
-    if (event.type === 'open') onChange({ scope: 'runs', files: [], runIds: [] });
+    if (event.type === 'open') {
+      onChange({ scope: 'specs', files: [], runIds: [] });
+      onChange({ scope: 'runs', files: [], runIds: [] });
+    }
+    if (event.type === 'report') onChange({ scope: 'runs', files: [], runIds: [] });
   });
 }