@crvouga/atlas 0.4.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

@@ -1,8 +1,20 @@
 import { evidenceFile } from '@crvouga/atlas/reports/export-evidence';
 
+import { runtimeConfig } from '../runtime';
+
+/**
+ * An Atlas server writes its address book into the page it serves (`atlas serve`, and `atlas dev` through
+ * Vite), so one build of the viewer works for every project. A build can instead be pointed at a reports
+ * API when it is made.
+ */
+const runtime = runtimeConfig;
+
 /** A built site without a reports API reads the evidence exported beside it. */
-export const staticEvidence = !import.meta.env.DEV && !import.meta.env.VITE_ATLAS_REPORTS_URL;
-export const reportsBase = (import.meta.env.VITE_ATLAS_REPORTS_URL as string | undefined)?.replace(/\/$/, '') ?? (staticEvidence ? './data/evidence' : '/api/reports');
+export const staticEvidence = !import.meta.env.DEV && !import.meta.env.VITE_ATLAS_REPORTS_URL && !runtime()?.reportsUrl;
+export const reportsBase = (import.meta.env.VITE_ATLAS_REPORTS_URL as string | undefined)?.replace(/\/$/, '') ?? runtime()?.reportsUrl?.replace(/\/$/, '') ?? (staticEvidence ? './data/evidence' : '/api/reports');
+
+/** Does the server answer `/evidence/effective`: the whole report in one request, without per-layer history? */
+export const effectiveEvidence = () => runtime()?.effective === true;
 
 export class ReportsError extends Error {
   constructor(
@@ -21,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/artifacts.module.css

@@ -0,0 +1,213 @@
+.panel {
+  display: grid;
+  gap: 14px;
+  margin: 12px 0;
+}
+
+.panel h4 {
+  margin: 0 0 6px;
+  font-size: 0.78rem;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--faint);
+}
+
+.chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.chip {
+  display: inline-flex;
+  gap: 4px;
+  padding: 2px 8px;
+  border-radius: var(--pill);
+  background: var(--unrun);
+  color: var(--ink-3);
+  font-size: 0.78rem;
+}
+
+.chip b {
+  font-weight: 600;
+  color: var(--ink-2, inherit);
+}
+
+.links a {
+  font-size: 0.85rem;
+}
+
+.gallery {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  gap: 12px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.figure {
+  display: grid;
+  gap: 4px;
+  margin: 0;
+  min-width: 0;
+}
+
+.figure[data-wide] {
+  grid-column: 1 / -1;
+}
+
+.figure img,
+.figure video {
+  width: 100%;
+  max-height: 420px;
+  object-fit: contain;
+  border: 1px solid var(--line, #dfe3e8);
+  border-radius: 6px;
+  background: #f6f7f9;
+}
+
+.figure iframe {
+  width: 100%;
+  height: 360px;
+  border: 1px solid var(--line, #dfe3e8);
+  border-radius: 6px;
+  background: #fff;
+}
+
+.figure audio {
+  width: 100%;
+}
+
+.figure figcaption {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  align-items: baseline;
+  font-size: 0.8rem;
+  color: var(--ink-3);
+}
+
+.figure figcaption strong {
+  font-weight: 600;
+  overflow-wrap: anywhere;
+}
+
+.role {
+  padding: 0 6px;
+  border-radius: var(--pill);
+  background: var(--unrun);
+  font-size: 0.72rem;
+}
+
+.text {
+  max-height: 260px;
+  margin: 0;
+  padding: 8px 10px;
+  overflow: auto;
+  border: 1px solid var(--line, #dfe3e8);
+  border-radius: 6px;
+  background: #f6f7f9;
+  font: 0.78rem/1.45 ui-monospace, SFMono-Regular, Menlo, monospace;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.timeline,
+.timeline ol {
+  display: grid;
+  gap: 4px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.timeline ol {
+  margin-left: 18px;
+  padding-left: 8px;
+  border-left: 1px solid var(--line, #dfe3e8);
+}
+
+.step {
+  display: grid;
+  gap: 4px;
+}
+
+.stepRow {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  font-size: 0.9rem;
+}
+
+.stepRow .spacer {
+  flex: 1;
+}
+
+.stepKind,
+.stepTime {
+  font-size: 0.75rem;
+  color: var(--faint);
+}
+
+.step[data-status='failed'] > .stepRow .stepName {
+  color: var(--failed);
+}
+
+.stepDetail {
+  margin: 0 0 0 24px;
+  font-size: 0.82rem;
+  color: var(--ink-3);
+  white-space: pre-wrap;
+}
+
+.notes {
+  display: grid;
+  gap: 6px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.note {
+  display: flex;
+  gap: 8px;
+  align-items: baseline;
+  font-size: 0.88rem;
+}
+
+.level {
+  flex: none;
+  padding: 0 7px;
+  border-radius: var(--pill);
+  background: var(--unrun);
+  color: var(--ink-3);
+  font-size: 0.72rem;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.level[data-level='warning'] {
+  background: #fff4d6;
+  color: #7a5200;
+}
+
+.level[data-level='error'] {
+  background: #fde4e4;
+  color: var(--failed);
+}
+
+.where {
+  color: var(--faint);
+  font-size: 0.78rem;
+}
+
+.raw summary {
+  cursor: pointer;
+  font-size: 0.82rem;
+  color: var(--ink-3);
+}

package/packages/visualizer/src/evidence/artifacts.tsx

@@ -0,0 +1,272 @@
+import type { LayerHeader, LayerRow } from '@crvouga/atlas/reports/evidence-types';
+import type { CheckDetail, EvidenceHolder } from '@crvouga/atlas/reports/evidence-detail';
+import { roleOfType } from '@crvouga/atlas/reports/evidence-detail';
+import { contentTypeOf } from '@crvouga/atlas/reports/media-types';
+import type { Annotation, Attachment, Attempt, Step } from '@crvouga/atlas/schema';
+import { useQuery } from '@tanstack/react-query';
+import { useMemo, type ReactNode } from 'react';
+
+import { reportAssetUrl, reportJson, reportText } from './api';
+import styles from './artifacts.module.css';
+import { duration, plural } from './format';
+import { StatusMark } from './marks';
+
+/**
+ * How one kind of attachment is shown. The first renderer that matches wins, so a new kind of artifact (a
+ * flame graph, a HAR, a coverage map) is one more entry, and an attachment nobody has a renderer for is still
+ * listed, with its name, what it is and a way to download it. Nothing here fails on what it does not know.
+ */
+export type ArtifactRenderer = {
+  readonly id: string;
+  readonly matches: (attachment: Attachment, type: string) => boolean;
+  /** `url` is where the bytes are, if they are anywhere a browser can reach; `path` is the report API path of a stored file. */
+  readonly render: (attachment: Attachment, context: { url: string | null; path: string | null; type: string }) => ReactNode;
+  /** Wide renderers take a whole row of the gallery. */
+  readonly wide?: boolean;
+};
+
+const mediaType = (attachment: Attachment) => (attachment.contentType ?? contentTypeOf(attachment.name)).split(';')[0]!.trim().toLowerCase();
+const label = (attachment: Attachment) => attachment.description ?? attachment.name;
+
+/** Only addresses a browser may follow: never `javascript:` or `data:` from a producer. */
+function safeUri(uri: string | undefined): string | null {
+  if (!uri) return null;
+  try {
+    const url = new URL(uri, 'https://atlas.invalid/');
+    return url.protocol === 'http:' || url.protocol === 'https:' ? uri : null;
+  } catch {
+    return null;
+  }
+}
+
+function TextValue({ attachment, path }: { attachment: Attachment; path: string | null }) {
+  const stored = useQuery({ queryKey: ['artifact-text', path ?? ''], queryFn: ({ signal }) => reportText(path!, signal), enabled: attachment.text === undefined && path !== null, staleTime: Number.POSITIVE_INFINITY, retry: false });
+  const raw = attachment.text ?? stored.data;
+  if (raw === undefined) return <p className={styles.where}>{stored.isError ? 'Could not be read.' : 'Loading…'}</p>;
+  const shown = raw.length > 200_000 ? raw.slice(0, 200_000) : raw;
+  const pretty = /json/.test(mediaType(attachment)) ? tryPretty(shown) : shown;
+  return (
+    <>
+      <pre className={styles.text}>{pretty}</pre>
+      {shown.length < raw.length && <p className={styles.where}>Showing the first 200 000 characters.</p>}
+    </>
+  );
+}
+
+function tryPretty(text: string) {
+  try {
+    return JSON.stringify(JSON.parse(text), null, 2);
+  } catch {
+    return text;
+  }
+}
+
+/** In order: the first that matches. Add to the front with {@link registerArtifactRenderer}. */
+export const artifactRenderers: ArtifactRenderer[] = [
+  { id: 'image', matches: (_, type) => type.startsWith('image/') && type !== 'image/svg+xml', render: (a, { url }) => (url ? <a href={url} target="_blank" rel="noreferrer"><img src={url} alt={label(a)} loading="lazy" width={a.width} height={a.height} /></a> : null) },
+  // SVG can carry script: shown as a picture only, never inlined.
+  { id: 'svg', matches: (_, type) => type === 'image/svg+xml', render: (a, { url }) => (url ? <img src={url} alt={label(a)} loading="lazy" /> : null) },
+  { id: 'video', wide: true, matches: (_, type) => type.startsWith('video/'), render: (a, { url }) => (url ? <video src={url} controls preload="metadata" aria-label={label(a)} /> : null) },
+  { id: 'audio', matches: (_, type) => type.startsWith('audio/'), render: (a, { url }) => (url ? <audio src={url} controls preload="none" aria-label={label(a)} /> : null) },
+  // A page snapshot runs nothing: the frame has no permissions and the file is served sandboxed.
+  { id: 'snapshot', wide: true, matches: (_, type) => type === 'text/html' || type === 'application/xhtml+xml', render: (a, { url }) => (url ? <iframe sandbox="" src={url} title={label(a)} loading="lazy" /> : null) },
+  { id: 'pdf', wide: true, matches: (_, type) => type === 'application/pdf', render: (a, { url }) => (url ? <iframe sandbox="" src={url} title={label(a)} loading="lazy" /> : null) },
+  { id: 'text', wide: true, matches: (a, type) => a.text !== undefined || type.startsWith('text/') || /(json|xml|yaml|x-ndjson|x-diff)/.test(type), render: (a, { path }) => <TextValue attachment={a} path={path} /> }
+];
+
+export function registerArtifactRenderer(renderer: ArtifactRenderer) {
+  artifactRenderers.unshift(renderer);
+}
+
+function sizeOf(bytes: number | undefined) {
+  if (bytes === undefined) return '';
+  if (bytes < 1024) return `${bytes} B`;
+  return bytes < 1024 * 1024 ? `${(bytes / 1024).toFixed(0)} KiB` : `${(bytes / 1024 / 1024).toFixed(1)} MiB`;
+}
+
+function Artifact({ attachment, layer }: { attachment: Attachment; layer: string }) {
+  const type = mediaType(attachment);
+  const path = attachment.bundleKey ? `/layers/${encodeURIComponent(layer)}/blobs/${attachment.bundleKey.split('/').map(encodeURIComponent).join('/')}` : null;
+  const url = path ? reportAssetUrl(path) : safeUri(attachment.uri);
+  const renderer = artifactRenderers.find((candidate) => candidate.matches(attachment, type));
+  const body = renderer?.render(attachment, { url, path, type });
+  return (
+    <li className={styles.figure} data-wide={renderer?.wide || undefined} data-role={attachment.role ?? roleOfType(type)}>
+      {body}
+      <figcaption>
+        <strong>{attachment.name}</strong>
+        {attachment.role && <span className={styles.role}>{attachment.role}</span>}
+        <span>{[type, sizeOf(attachment.bytes), attachment.durationMs ? duration(attachment.durationMs) : ''].filter(Boolean).join(' · ')}</span>
+        {url && <a href={url} download={attachment.name} target="_blank" rel="noreferrer">{body ? 'Download' : 'Open'}</a>}
+        {!url && attachment.text === undefined && <span>No file to show</span>}
+      </figcaption>
+    </li>
+  );
+}
+
+export function Attachments({ attachments, layer }: { attachments: readonly Attachment[]; layer: string }) {
+  if (!attachments.length) return null;
+  return (
+    <section aria-label="Attachments">
+      <h4>{plural(attachments.length, 'attachment', 'attachments')}</h4>
+      <ul className={styles.gallery}>
+        {attachments.map((attachment, index) => <Artifact key={`${attachment.id ?? attachment.name}:${index}`} attachment={attachment} layer={layer} />)}
+      </ul>
+    </section>
+  );
+}
+
+const STEP_STATUS: Record<string, 'passed' | 'failed' | 'running' | 'not-run'> = { passed: 'passed', pass: 'passed', ok: 'passed', failed: 'failed', fail: 'failed', error: 'failed', running: 'running', skipped: 'not-run', 'not-run': 'not-run', 'not-reached': 'not-run', pending: 'not-run' };
+
+/** The timeline: ordered by when each step started, nested by `parentId`. A step whose parent is missing is shown at the top. */
+export function Timeline({ steps, layer }: { steps: readonly Step[]; layer: string }) {
+  const tree = useMemo(() => {
+    const ids = new Set(steps.flatMap((step) => (step.id ? [step.id] : [])));
+    const children = new Map<string | null, Step[]>();
+    for (const step of steps) {
+      const parent = step.parentId && ids.has(step.parentId) ? step.parentId : null;
+      children.set(parent, [...(children.get(parent) ?? []), step]);
+    }
+    for (const list of children.values()) list.sort((a, b) => (a.offsetMs ?? 0) - (b.offsetMs ?? 0));
+    return children;
+  }, [steps]);
+  const render = (parent: string | null): ReactNode => (
+    <ol>
+      {(tree.get(parent) ?? []).map((step, index) => {
+        const status = STEP_STATUS[(step.status ?? '').toLowerCase()];
+        return (
+          <li key={`${step.id ?? step.name}:${index}`} className={styles.step} data-status={status ?? step.status ?? 'none'}>
+            <div className={styles.stepRow}>
+              <StatusMark status={status ?? 'none'} size={14} />
+              <span className={styles.stepName}>{step.name}</span>
+              {step.kind && <span className={styles.stepKind}>{step.kind}</span>}
+              {step.status && !status && <span className={styles.stepKind}>{step.status}</span>}
+              <span className={styles.spacer} />
+              <span className={styles.stepTime}>{[step.offsetMs !== undefined ? `+${duration(step.offsetMs)}` : '', duration(step.durationMs)].filter(Boolean).join(' · ')}</span>
+            </div>
+            {step.detail && <p className={styles.stepDetail}>{step.detail}</p>}
+            {step.annotations && <Notes notes={step.annotations} />}
+            {step.attachments && <Attachments attachments={step.attachments} layer={layer} />}
+            {step.id && tree.has(step.id) && render(step.id)}
+          </li>
+        );
+      })}
+    </ol>
+  );
+  return (
+    <section aria-label="Timeline" className={styles.timeline}>
+      <h4>{plural(steps.length, 'step', 'steps')}</h4>
+      {render(null)}
+    </section>
+  );
+}
+
+export function Notes({ notes }: { notes: readonly Annotation[] }) {
+  if (!notes.length) return null;
+  return (
+    <ul className={styles.notes} aria-label="Annotations">
+      {notes.map((note, index) => (
+        <li key={index} className={styles.note}>
+          <span className={styles.level} data-level={note.level ?? 'info'}>{note.level && ['info', 'warning', 'error'].includes(note.level) ? note.level : note.type}</span>
+          <span>
+            {note.message}
+            {note.source?.file && <span className={styles.where}> {note.source.file}{note.source.line ? `:${note.source.line}` : ''}</span>}
+            {note.level && !['info', 'warning', 'error'].includes(note.level) && <span className={styles.where}> ({note.level})</span>}
+          </span>
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+function Tries({ attempts, layer }: { attempts: readonly Attempt[]; layer: string }) {
+  if (!attempts.length) return null;
+  return (
+    <section aria-label="Tries">
+      <h4>{plural(attempts.length, 'try', 'tries')}</h4>
+      <ol className={styles.timeline}>
+        {attempts.map((attempt) => (
+          <li key={attempt.index} className={styles.step}>
+            <div className={styles.stepRow}>
+              <StatusMark status={attempt.status} size={14} />
+              <span className={styles.stepName}>Try {attempt.index + 1}</span>
+              <span className={styles.spacer} />
+              <span className={styles.stepTime}>{duration(attempt.durationMs)}</span>
+            </div>
+            {attempt.detail && <p className={styles.stepDetail}>{attempt.detail}</p>}
+            {attempt.attachments && <Attachments attachments={attempt.attachments} layer={layer} />}
+          </li>
+        ))}
+      </ol>
+    </section>
+  );
+}
+
+/** What is not known: kept, and shown as it is, so nothing a tool recorded is out of reach. */
+function Raw({ extensions }: { extensions: Readonly<Record<string, unknown>> }) {
+  const names = Object.keys(extensions);
+  if (!names.length) return null;
+  return (
+    <details className={styles.raw}>
+      <summary>{plural(names.length, 'extension', 'extensions')}: {names.join(', ')}</summary>
+      <pre className={styles.text}>{JSON.stringify(extensions, null, 2)}</pre>
+    </details>
+  );
+}
+
+function Facts({ holder }: { holder: EvidenceHolder }) {
+  const labels = Object.entries(holder.labels ?? {});
+  const tags = holder.tags ?? [];
+  const links = (holder.links ?? []).flatMap((link) => { const url = safeUri(link.url); return url ? [{ ...link, url }] : []; });
+  if (!labels.length && !tags.length && !links.length) return null;
+  return (
+    <div>
+      <ul className={styles.chips} aria-label="Facts">
+        {tags.map((tag) => <li key={`t:${tag}`} className={styles.chip}>{tag}</li>)}
+        {labels.map(([name, value]) => <li key={`l:${name}`} className={styles.chip}>{name}<b>{value}</b></li>)}
+        {links.map((link) => <li key={`k:${link.url}`} className={styles.chip}><a href={link.url} target="_blank" rel="noreferrer">{link.name ?? link.rel ?? link.url}</a></li>)}
+      </ul>
+    </div>
+  );
+}
+
+function Evidence({ holder, layer, steps }: { holder: EvidenceHolder; layer: string; steps?: boolean }) {
+  return (
+    <>
+      <Facts holder={holder} />
+      {holder.annotations && <Notes notes={holder.annotations} />}
+      {steps && holder.steps && holder.steps.length > 0 && <Timeline steps={holder.steps} layer={layer} />}
+      {holder.attempts && holder.attempts.length > 1 && <Tries attempts={holder.attempts} layer={layer} />}
+      {holder.attachments && <Attachments attachments={holder.attachments} layer={layer} />}
+      {holder.extensions && <Raw extensions={holder.extensions} />}
+    </>
+  );
+}
+
+/** Everything one result carries beyond its outcome, read when it is opened, and what the run around it carried. */
+export function ResultEvidence({ layer, row }: { layer: LayerHeader; row: LayerRow }) {
+  const wanted = row.evidence !== undefined || layer.evidence !== undefined;
+  const detail = useQuery({
+    queryKey: ['evidence-detail', layer.backend, layer.id, row.kind, row.id],
+    queryFn: ({ signal }) => reportJson<CheckDetail>(`/evidence/detail/${encodeURIComponent(layer.backend)}/${encodeURIComponent(layer.id)}?check=${encodeURIComponent(row.id)}&kind=${encodeURIComponent(row.kind)}`, signal),
+    enabled: wanted && /^[0-9a-f]{64}$/.test(layer.id),
+    staleTime: Number.POSITIVE_INFINITY,
+    retry: false
+  });
+  if (!wanted) return null;
+  if (detail.isLoading) return <p className={styles.where} role="status">Loading what this result carries…</p>;
+  if (detail.isError || !detail.data) return <p className={styles.where} role="alert">What this result carries could not be read.</p>;
+  const { check, run } = detail.data;
+  const hasRun = Object.values(run).some((value) => (Array.isArray(value) ? value.length > 0 : value && typeof value === 'object' ? Object.keys(value).length > 0 : false));
+  return (
+    <div className={styles.panel} aria-label="Evidence">
+      <Evidence holder={check} layer={layer.id} steps />
+      {hasRun && (
+        <section aria-label="From the run">
+          <h4>From the run</h4>
+          <Evidence holder={run} layer={layer.id} />
+        </section>
+      )}
+    </div>
+  );
+}

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

@@ -8,6 +8,7 @@ import { useQuery } from '@tanstack/react-query';
 import { useMemo, useState, type ReactNode } from 'react';
 
 import { reportJson } from './api';
+import { ResultEvidence } from './artifacts';
 import { useEvidence } from './evidence-context';
 import styles from './evidence.module.css';
 import { ago, duration, plural, statusWord, useNow } from './format';
@@ -15,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 };
@@ -58,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}>
@@ -76,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 ? [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>
   );
@@ -196,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);
@@ -253,6 +269,7 @@ export function CheckDetail({ slot, layerId, select, reads, written }: Props) {
           </p>
         );
       }))}
+      <ResultEvidence layer={chosen.layer} row={chosen.row} />
       {(moments > 0 || chosen.layer.runUrl) && (
         <p className={styles.actionsLine}>
           {moments > 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" />