@crvouga/atlas 0.0.0-stage → 0.2.0

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

@@ -0,0 +1,197 @@
+import { flattenSteps, neighborFailure, orderedUiBlobs, selectedFrame, testFrames } from '@crvouga/atlas/reports/frames';
+import { performanceFrameIndex, performanceRows, type PerformanceRow } from '@crvouga/atlas/reports/performance';
+import type { ReportStep, RunReport } from '@crvouga/atlas/reports/report-types';
+import { useEffect, useMemo, useRef, useState } from 'react';
+
+import { duration } from './format';
+import { StatusMark } from './marks';
+import styles from './recording.module.css';
+import { Snapshot, SnapshotData } from './snapshot';
+
+type Props = {
+  report: RunReport;
+  /** Where a captured file of this test is read from. */
+  fileUrl: (file: string) => string;
+  css: string;
+  /** The moment the address names, counted from one. Without it the recording opens at its first failure, or its end. */
+  moment: number | null;
+  onMoment: (moment: number, replace: boolean) => void;
+};
+
+/** A recorded test, one captured moment at a time. */
+export function Timeline({ report, fileUrl, css, moment, onMoment }: Props) {
+  const [playing, setPlaying] = useState(false);
+  const [actor, setActor] = useState('all');
+  const [tab, setTab] = useState<'moments' | 'timing'>('moments');
+  const test = useMemo(() => ({ report, blobs: {} }), [report]);
+  const frames = useMemo(() => testFrames(test), [test]);
+  const frame = selectedFrame(frames, { view: 'test', testId: report.meta.testId, params: { frame: moment === null ? '' : String(moment) } });
+  const index = frame?.index ?? 0;
+  const last = frames.length - 1;
+  const go = (target: number) => {
+    if (frames.length) onMoment(Math.max(0, Math.min(last, target)) + 1, true);
+  };
+  // Timers and key handlers outlive a render; they always move from the moment on screen.
+  const goNow = useRef(go);
+  goNow.current = go;
+  const steps = useMemo(() => flattenSteps(report.steps).filter((entry) => entry.step.kind !== 'quint'), [report.steps]);
+  const rows = useMemo(() => performanceRows(report.steps, report.meta.performance?.slowStepMs ?? 50), [report]);
+  const byStep = useMemo(() => performanceFrameIndex(rows, frames), [rows, frames]);
+  const jump = (step: ReportStep) => {
+    const target = byStep.get(step);
+    if (!target) return;
+    setPlaying(false);
+    setTab('moments');
+    go(target.index);
+  };
+
+  const pause = frame?.frame.durationMs;
+  useEffect(() => {
+    if (!playing) return;
+    if (index >= last) {
+      setPlaying(false);
+      return;
+    }
+    const timer = setTimeout(() => goNow.current(index + 1), Math.max(100, Math.min(pause ?? 500, 2000)));
+    return () => clearTimeout(timer);
+  }, [playing, index, last, pause]);
+
+  useEffect(() => {
+    const onKey = (event: KeyboardEvent) => {
+      if (event.altKey || event.ctrlKey || event.metaKey || !frames.length) return;
+      if (event.target instanceof HTMLElement && (event.target.isContentEditable || event.target.closest('input, textarea, select, button'))) return;
+      const target = event.key === 'ArrowRight' ? index + 1 : event.key === 'ArrowLeft' ? index - 1 : event.key === 'Home' ? 0 : event.key === 'End' ? last : null;
+      if (target === null) return;
+      event.preventDefault();
+      setPlaying(false);
+      goNow.current(target);
+    };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [index, last, frames.length]);
+
+  const ui = frame ? orderedUiBlobs(frame, test) : [];
+  const pictures = ui.filter((entry) => entry.blob && (actor === 'all' || entry.nodeId === actor));
+  const absent = ui.filter((entry) => !entry.blob && (actor === 'all' || entry.nodeId === actor));
+  const observations = frame?.frame.snapshots.filter((blob) => blob.media !== 'html' && blob.media !== 'png' && (actor === 'all' || !blob.nodeId || blob.nodeId === actor)) ?? [];
+  const nextFailure = () => {
+    const failure = neighborFailure(frames, index, 1);
+    if (failure) go(failure.index);
+  };
+
+  return (
+    <div className={styles.recording}>
+      {report.meta.error && (
+        <div className={styles.error} role="alert">
+          {report.meta.error}
+          {report.meta.errorStack && (
+            <details>
+              <summary>Where it failed</summary>
+              {report.meta.errorStack}
+            </details>
+          )}
+        </div>
+      )}
+      <div className={styles.tabs} role="tablist" aria-label="Recording">
+        <button type="button" role="tab" aria-selected={tab === 'moments'} onClick={() => setTab('moments')}>Moments</button>
+        <button type="button" role="tab" aria-selected={tab === 'timing'} onClick={() => setTab('timing')}>Timing</button>
+      </div>
+      {tab === 'timing' ? (
+        <Timing rows={rows} canOpen={(step) => byStep.has(step)} open={jump} />
+      ) : (
+        <div className={styles.split}>
+          <ol className={styles.steps} aria-label="Recorded steps">
+            {steps.map((entry) => {
+              const current = frame?.step === entry.step;
+              return (
+                <li key={entry.index} style={{ paddingLeft: entry.depth * 14 }}>
+                  <button type="button" data-status={entry.step.status} aria-current={current ? 'step' : undefined} disabled={!byStep.has(entry.step)} onClick={() => jump(entry.step)}>
+                    <StatusMark status={entry.step.status} size={14} />
+                    <span className={styles.stepTitle}>{entry.step.title}</span>
+                    <span className={styles.stepTime}>{duration(entry.step.durationMs)}</span>
+                  </button>
+                </li>
+              );
+            })}
+          </ol>
+          <section className={styles.stage} aria-label="Recorded moment">
+            <div className={styles.transport}>
+              <button type="button" className={styles.control} disabled={!frames.length} onClick={() => { if (!playing && index === last) go(0); setPlaying((value) => !value); }}>
+                {playing ? 'Pause' : 'Play'}
+              </button>
+              <button type="button" className={styles.control} aria-label="Previous moment" disabled={index === 0} onClick={() => go(index - 1)}>‹</button>
+              <button type="button" className={styles.control} aria-label="Next moment" disabled={index >= last} onClick={() => go(index + 1)}>›</button>
+              <input className={styles.scrub} type="range" aria-label="Recorded moment" min={0} max={Math.max(0, last)} value={index} disabled={frames.length < 2} onChange={(event) => { setPlaying(false); go(Number(event.target.value)); }} />
+              <span className={styles.position}>{frames.length ? `Moment ${index + 1} of ${frames.length}` : 'No recorded moments'}</span>
+              <button type="button" className={styles.control} disabled={!frames.some((entry) => entry.step.status === 'failed')} onClick={nextFailure}>Next failure</button>
+              {report.meta.actorIds.length > 1 && (
+                <label className={styles.actor}>
+                  <span className="sr-only">Person</span>
+                  <select value={actor} onChange={(event) => setActor(event.target.value)}>
+                    <option value="all">Everyone</option>
+                    {report.meta.actorIds.map((id) => (
+                      <option key={id}>{id}</option>
+                    ))}
+                  </select>
+                </label>
+              )}
+            </div>
+            {!frame && <p className={styles.quietLine}>This test recorded no moments. Its steps and outcome are on the left.</p>}
+            {frame && (
+              <>
+                <h3 className={styles.momentTitle} data-status={frame.step.status}>{frame.step.title}</h3>
+                <p className={styles.quietLine}>
+                  {frame.step.status === 'failed' ? 'Failed' : 'Passed'} · at {duration(Math.max(0, frame.frame.capturedAtMs - report.meta.startedAtMs)) || '0 ms'}
+                  {frame.frame.hit && <> · acted on {frame.frame.hit.path.join(' › ')}</>}
+                </p>
+                {frame.step.error && <pre className={styles.error} role="alert">{frame.step.error}</pre>}
+                {frame.step.detail && (
+                  <div className={styles.observed}>
+                    <SnapshotData text={frame.step.detail} />
+                  </div>
+                )}
+                <div className={styles.pictures} aria-label="Recorded snapshots">
+                  {pictures.map((entry) => (
+                    <Snapshot key={entry.blob!.file} url={fileUrl(entry.blob!.file)} blob={entry.blob!} css={css} hit={entry.stale ? null : frame.frame.hit ?? null} earlier={entry.stale} />
+                  ))}
+                  {absent.map((entry) => (
+                    <p key={entry.nodeId} className={styles.quietLine}>No picture of {entry.nodeId} had been recorded by this moment.</p>
+                  ))}
+                  {observations.map((blob) => (
+                    <Snapshot key={blob.file} url={fileUrl(blob.file)} blob={blob} css={css} hit={null} />
+                  ))}
+                </div>
+              </>
+            )}
+          </section>
+        </div>
+      )}
+    </div>
+  );
+}
+
+/** Where the recorded time went. A step without a measurement is never shown as quick. */
+function Timing({ rows, canOpen, open }: { rows: readonly PerformanceRow[]; canOpen: (step: ReportStep) => boolean; open: (step: ReportStep) => void }) {
+  const measured = rows.filter((row) => row.band !== 'unmeasured');
+  if (!measured.length) return <p className={styles.quietLine}>Measurements are unavailable for this recording.</p>;
+  const longest = Math.max(...measured.map((row) => row.step.performance?.selfMs ?? 0), 1);
+  return (
+    <ol className={styles.timing} aria-label="Recorded time per step">
+      {rows.map((row) => {
+        const own = row.step.performance?.selfMs;
+        return (
+          <li key={row.index} data-band={row.band}>
+            <button type="button" disabled={!canOpen(row.step)} onClick={() => open(row.step)} style={{ paddingLeft: 8 + row.depth * 14 }}>
+              <span className={styles.stepTitle}>{row.step.title}</span>
+              {row.band === 'slow' && <span className={styles.slow}>Slow</span>}
+              <span className={styles.bar} aria-hidden="true">
+                <span style={{ width: `${own === undefined ? 0 : Math.max(2, (own / longest) * 100)}%` }} />
+              </span>
+              <span className={styles.stepTime}>{own === undefined ? 'Not measured' : `${own.toFixed(1)} ms`}</span>
+            </button>
+          </li>
+        );
+      })}
+    </ol>
+  );
+}

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

@@ -0,0 +1,108 @@
+import { PHONE_H, PHONE_W } from '@crvouga/atlas/reports/phone';
+import type { ReportSnapshotBlob, ReportStepHit } from '@crvouga/atlas/reports/report-types';
+import { createSnapshotHost, paintSnapshotHost, type HitResult } from '@crvouga/atlas/reports/snapshot-surface';
+import { useQuery } from '@tanstack/react-query';
+import { useEffect, useRef, useState } from 'react';
+
+import { reportResponse } from './api';
+import styles from './recording.module.css';
+import { traceStates } from './quint';
+import { ModelTrace } from './model-trace';
+
+const SCALE = 0.72;
+
+async function readBlob(url: string, blob: ReportSnapshotBlob, signal: AbortSignal) {
+  const response = await reportResponse(url, signal);
+  if (blob.media !== 'png' && blob.media !== 'bytes') return response.text();
+  const bytes = new Uint8Array(await response.arrayBuffer());
+  let binary = '';
+  for (let i = 0; i < bytes.length; i += 32768) binary += String.fromCharCode(...bytes.subarray(i, i + 32768));
+  return `data:${response.headers.get('content-type') ?? 'application/octet-stream'};base64,${btoa(binary)}`;
+}
+
+/**
+ * A captured page, placed in this page as it was recorded. It sits in a shadow tree so its
+ * stylesheet and the viewer's never restyle each other; there is no frame to load.
+ */
+export function SnapshotPicture({ file, html, css, hit, who }: { file: string; html: string; css: string; hit: ReportStepHit | null; who: string }) {
+  const frame = useRef<HTMLDivElement>(null);
+  const [found, setFound] = useState<HitResult>('none');
+  useEffect(() => {
+    const parent = frame.current;
+    if (!parent) return;
+    const host = parent.querySelector<HTMLDivElement>(':scope > .sr-snap') ?? parent.appendChild(createSnapshotHost());
+    host.style.transform = `scale(${SCALE})`;
+    host.style.transformOrigin = 'top left';
+    setFound(paintSnapshotHost(host, { key: file, html, css }, hit));
+  }, [file, html, css, hit]);
+  return (
+    <>
+      <div ref={frame} className={styles.phone} role="img" aria-label={`Recorded ${who}`} style={{ width: PHONE_W * SCALE, height: PHONE_H * SCALE }} />
+      {found === 'missing' && <p className={styles.quietLine}>The recorded control cannot be found in this picture.</p>}
+    </>
+  );
+}
+
+/** One captured picture or value, exactly as recorded. */
+export function Snapshot({ url, blob, css, hit, earlier = false }: { url: string; blob: ReportSnapshotBlob; css: string; hit: ReportStepHit | null; earlier?: boolean }) {
+  const content = useQuery({ queryKey: ['evidence-blob', url], queryFn: ({ signal }) => readBlob(url, blob, signal), retry: false });
+  const who = blob.nodeId ?? blob.name;
+  const picture = blob.media === 'html' || blob.media === 'png';
+  return (
+    <figure className={styles.snapshot} data-picture={picture || undefined}>
+      <figcaption>
+        <strong>{who}</strong>
+        {blob.nodeId && blob.name !== blob.nodeId && <span>{blob.name}</span>}
+        {earlier && <span className={styles.earlier}>Earlier picture</span>}
+      </figcaption>
+      {content.isPending && <p className={styles.quietLine} role="status">Loading…</p>}
+      {content.isError && (
+        <p role="alert" className={styles.quietLine}>
+          {content.error.message}{' '}
+          <button type="button" className={styles.link} onClick={() => void content.refetch()}>Try again</button>
+        </p>
+      )}
+      {content.data !== undefined && blob.media === 'html' && <SnapshotPicture file={blob.file} html={content.data} css={css} hit={hit} who={who} />}
+      {content.data !== undefined && blob.media === 'png' && <img className={styles.image} alt={`Recorded ${who}`} src={content.data} />}
+      {content.data !== undefined && blob.media === 'bytes' && <a download={blob.file.split('/').at(-1)} href={content.data}>Download captured data</a>}
+      {content.data !== undefined && (blob.media === 'json' || blob.media === 'text') && <SnapshotData text={content.data} />}
+    </figure>
+  );
+}
+
+/** A recorded value: a model trace when it is one, otherwise its fields. */
+export function SnapshotData({ text }: { text: string }) {
+  let value: unknown;
+  try {
+    value = JSON.parse(text);
+  } catch {
+    return <pre className={styles.pre}>{text}</pre>;
+  }
+  const states = traceStates(value);
+  return states ? <ModelTrace states={states} /> : <DataValue value={value} />;
+}
+
+function DataValue({ value }: { value: unknown }) {
+  if (value === null || typeof value !== 'object') return <code>{JSON.stringify(value)}</code>;
+  const entries = Object.entries(value);
+  if (!entries.length) return <code>{Array.isArray(value) ? '[]' : '{}'}</code>;
+  return (
+    <dl className={styles.data}>
+      {entries.map(([key, item]) => (
+        <div key={key}>
+          <dt>{key}</dt>
+          <dd>
+            {item !== null && typeof item === 'object' ? (
+              <details>
+                <summary>{Array.isArray(item) ? `${item.length} items` : `${Object.keys(item).length} fields`}</summary>
+                <DataValue value={item} />
+              </details>
+            ) : (
+              <DataValue value={item} />
+            )}
+          </dd>
+        </div>
+      ))}
+    </dl>
+  );
+}

package/packages/visualizer/src/evidence/sources-panel.tsx

@@ -0,0 +1,134 @@
+import type { LayerHeader } from '@crvouga/atlas/reports/evidence-types';
+import { branchOf, contributes, sourceFacets, type SourceSelection } from '@crvouga/atlas/reports/evidence-view';
+import * as Dialog from '@radix-ui/react-dialog';
+import { useMemo } from 'react';
+
+import { CloseIcon } from '../components/icons';
+import { useUiStore } from '../state/ui-store';
+import { useEvidence } from './evidence-context';
+import { ago, exactTime, plural, shortSha, useNow } from './format';
+import { Bounded } from './marks';
+import styles from './sources.module.css';
+
+function toggled(list: readonly string[], id: string) {
+  return list.includes(id) ? list.filter((entry) => entry !== id) : [...list, id];
+}
+
+function counts(layer: LayerHeader) {
+  const { passed, failed, running } = layer.counts;
+  return [failed ? `${failed} failed` : '', passed ? `${passed} passed` : '', running ? `${running} running` : ''].filter(Boolean).join(', ') || 'nothing completed';
+}
+
+/** How many sources are switched off, for the button that opens the panel. */
+export function excludedCount(excluded: SourceSelection) {
+  return excluded.backends.length + excluded.branches.length + excluded.layers.length;
+}
+
+/**
+ * Where the combined report comes from. Every backend, branch and run contributes unless it is
+ * switched off here, which is also how an earlier result is brought back into view.
+ */
+export function SourcesPanel() {
+  const { layers, backends, excluded, setExcluded, notices, retry } = useEvidence();
+  const open = useUiStore((s) => s.sourcesOpen);
+  const setOpen = useUiStore((s) => s.setSourcesOpen);
+  const now = useNow();
+  const facets = useMemo(() => sourceFacets(layers), [layers]);
+  const contributing = layers.filter((layer) => contributes(layer, excluded)).length;
+  const layerCount = (id: string) => facets.backends.find((facet) => facet.id === id)?.layers ?? 0;
+  return (
+    <Dialog.Root open={open} onOpenChange={setOpen}>
+      <Dialog.Portal>
+        <Dialog.Overlay className={styles.overlay} />
+        <Dialog.Content className={styles.sheet} aria-describedby={undefined}>
+          <div className={styles.head}>
+            <Dialog.Title className={styles.title}>Sources</Dialog.Title>
+            <Dialog.Close className={styles.close} aria-label="Close">
+              <CloseIcon size={16} />
+            </Dialog.Close>
+          </div>
+          <p className={styles.lead}>
+            {contributing} of {plural(layers.length, 'run', 'runs')} contribute. For each check the newest completed result is shown. Switch a source off to see what earlier runs recorded.
+          </p>
+          {excludedCount(excluded) > 0 && (
+            <button type="button" className={styles.reset} onClick={() => setExcluded({ backends: [], branches: [], layers: [] })}>
+              Use every source
+            </button>
+          )}
+          {notices.map((notice) => (
+            <p key={notice} className={styles.notice} role="status">
+              {notice}{' '}
+              <button type="button" className={styles.link} onClick={retry}>Try again</button>
+            </p>
+          ))}
+
+          <section className={styles.group}>
+            <h3>Backends</h3>
+            {backends.length === 0 && <p className={styles.empty}>No report store is configured.</p>}
+            <ul>
+              {backends.map((backend) => (
+                <li key={backend.id}>
+                  <label className={styles.option}>
+                    <input type="checkbox" checked={!excluded.backends.includes(backend.id)} onChange={() => setExcluded({ ...excluded, backends: toggled(excluded.backends, backend.id) })} />
+                    <span className={styles.optionName}>{backend.label}</span>
+                    <span className={styles.optionMeta}>{backend.available ? plural(layerCount(backend.id), 'run', 'runs') : 'Unavailable'}</span>
+                  </label>
+                </li>
+              ))}
+            </ul>
+          </section>
+
+          <section className={styles.group}>
+            <h3>Branches</h3>
+            {facets.branches.length === 0 && <p className={styles.empty}>No runs yet.</p>}
+            <ul>
+              {facets.branches.map((branch) => (
+                <li key={branch.id}>
+                  <label className={styles.option}>
+                    <input type="checkbox" checked={!excluded.branches.includes(branch.id)} onChange={() => setExcluded({ ...excluded, branches: toggled(excluded.branches, branch.id) })} />
+                    <span className={styles.optionName}>{branch.id}</span>
+                    <span className={styles.optionMeta}>
+                      {plural(branch.layers, 'run', 'runs')} · {ago(branch.latestAtMs, now)}
+                    </span>
+                  </label>
+                  {facets.branches.length > 1 && (
+                    <button type="button" className={styles.only} onClick={() => setExcluded({ ...excluded, branches: facets.branches.map((facet) => facet.id).filter((id) => id !== branch.id) })}>
+                      Only
+                    </button>
+                  )}
+                </li>
+              ))}
+            </ul>
+          </section>
+
+          <section className={styles.group}>
+            <h3>Runs</h3>
+            <ul>
+              <Bounded items={layers} size={40} more="Earlier runs">
+                {(layer) => {
+                  const off = excluded.backends.includes(layer.backend) || excluded.branches.includes(branchOf(layer));
+                  return (
+                    <li key={`${layer.backend}|${layer.id}`}>
+                      <label className={styles.option} data-off={off || undefined}>
+                        <input type="checkbox" disabled={off} checked={!off && !excluded.layers.includes(layer.id)} onChange={() => setExcluded({ ...excluded, layers: toggled(excluded.layers, layer.id) })} />
+                        <span className={styles.optionName}>
+                          {layer.packageDir ?? layer.producer}
+                          <span className={styles.run}>
+                            {layer.live ? 'Running now' : <time title={exactTime(layer.recordedAtMs)}>{ago(layer.recordedAtMs, now)}</time>} · {branchOf(layer)}
+                            {shortSha(layer.sha) && <> · <code>{shortSha(layer.sha)}</code></>}
+                            {layer.freshness === 'modified' && ' · local changes'}
+                          </span>
+                        </span>
+                        <span className={styles.optionMeta} data-failed={layer.counts.failed > 0 || undefined}>{counts(layer)}</span>
+                      </label>
+                    </li>
+                  );
+                }}
+              </Bounded>
+            </ul>
+          </section>
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}

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

@@ -0,0 +1,168 @@
+.overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 60;
+  background: rgba(15, 20, 25, 0.25);
+}
+
+.sheet {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 61;
+  width: min(30rem, 100vw);
+  padding: 18px 20px 40px;
+  overflow: auto;
+  background: var(--bg);
+  box-shadow: var(--shadow-pop);
+}
+
+.head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.title {
+  margin: 0;
+  font-size: 1.125rem;
+  font-weight: 650;
+}
+
+.close {
+  display: inline-flex;
+  padding: 8px;
+  border: 0;
+  border-radius: 50%;
+  background: none;
+  color: var(--ink-3);
+  cursor: pointer;
+}
+
+.close:hover {
+  background: var(--bg-2);
+}
+
+.lead {
+  margin: 8px 0 12px;
+  color: var(--ink-3);
+  font-size: 0.875rem;
+}
+
+.reset {
+  padding: 5px 12px;
+  border: 1px solid var(--place);
+  border-radius: var(--pill);
+  background: var(--bg);
+  color: var(--place);
+  font-size: 0.8125rem;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.notice {
+  margin: 12px 0 0;
+  padding: 10px 12px;
+  border-radius: 8px;
+  background: var(--bg-2);
+  font-size: 0.8125rem;
+}
+
+.link,
+.only {
+  padding: 0;
+  border: 0;
+  background: none;
+  color: var(--place);
+  font-size: 0.8125rem;
+  font-weight: 500;
+  cursor: pointer;
+}
+
+.group {
+  margin-top: 22px;
+}
+
+.group h3 {
+  margin: 0 0 4px;
+  color: var(--ink-3);
+  font-size: 0.75rem;
+  font-weight: 600;
+}
+
+.group ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.group li {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  border-bottom: 1px solid var(--line);
+}
+
+.group li > button:not(.only) {
+  padding: 8px 0;
+  border: 0;
+  background: none;
+  color: var(--place);
+  font-size: 0.8125rem;
+  cursor: pointer;
+}
+
+.empty {
+  margin: 4px 0;
+  color: var(--ink-3);
+  font-size: 0.875rem;
+}
+
+.option {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+  padding: 8px 0;
+  font-size: 0.875rem;
+  cursor: pointer;
+}
+
+.option input {
+  flex: none;
+  width: 1rem;
+  height: 1rem;
+  accent-color: var(--place);
+}
+
+.option[data-off] {
+  color: var(--faint);
+  cursor: default;
+}
+
+.optionName {
+  flex: 1;
+  min-width: 0;
+  font-weight: 500;
+  overflow-wrap: anywhere;
+}
+
+.run {
+  display: block;
+  color: var(--ink-3);
+  font-size: 0.75rem;
+  font-weight: 400;
+}
+
+.optionMeta {
+  flex: none;
+  color: var(--ink-3);
+  font-size: 0.75rem;
+  text-align: right;
+}
+
+.optionMeta[data-failed] {
+  color: var(--failed);
+}

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

@@ -0,0 +1,64 @@
+import type { SpecEvidence } from '@crvouga/atlas/reports/evidence-view';
+import { NO_EVIDENCE } from '@crvouga/atlas/reports/evidence-view';
+import type { ReactNode } from 'react';
+
+import type { SpecKind } from '../spec-kind';
+import { useEvidence } from './evidence-context';
+import styles from './evidence.module.css';
+import { useNow } from './format';
+import { CountLine, Meter, Origin } from './marks';
+
+/** A spec's name, where it lives, and what the combined report holds for it. */
+export function SpecHeader({ title, file, kind, entry, planned, children }: { title: string; file: string; kind: SpecKind; entry: SpecEvidence | undefined; planned?: number; children?: ReactNode }) {
+  const { backends, ready, unavailable, pending } = useEvidence();
+  const now = useNow();
+  const summary = entry?.summary ?? NO_EVIDENCE;
+  const newest = entry?.slots.flatMap((slot) => slot.outcomes).reduce<(typeof entry.slots)[number]['outcomes'][number] | null>((best, result) => (!best || result.layer.recordedAtMs > best.layer.recordedAtMs ? result : best), null);
+  const missing = planned === undefined ? 0 : Math.max(0, planned - summary.total);
+  return (
+    <header className={styles.specHead}>
+      <p className={styles.path}>specs/{file}</p>
+      <h1 className={styles.title}>{title}</h1>
+      {children}
+      <div className={styles.summary}>
+        <Meter counts={summary.counts} missing={missing} />
+        <p className={styles.summaryLine}>
+          {unavailable ? (
+            <span>Recorded results are unavailable.</span>
+          ) : !ready ? (
+            <span role="status">Loading recorded results…</span>
+          ) : summary.status === 'none' ? (
+            <span>{pending > 0 ? 'Loading recorded results…' : `No completed test report for this ${kind.one} yet.`}</span>
+          ) : (
+            <>
+              <CountLine summary={summary} noun={kind.check} nouns={`${kind.check}s`} />
+              {missing > 0 && <span>{missing} without a result</span>}
+            </>
+          )}
+        </p>
+        {newest && (
+          <p className={styles.summaryOrigin}>
+            Latest from <Origin layer={newest.layer} backends={backends} now={now} />
+          </p>
+        )}
+      </div>
+    </header>
+  );
+}
+
+/** The document as written, folded away under what was understood from it. */
+export function SourceText({ text, label = 'Source', open = false }: { text: string; label?: string; open?: boolean }) {
+  return (
+    <details className={styles.source} open={open}>
+      <summary>{label}</summary>
+      <pre className={styles.code}>
+        {text.split('\n').map((line, index) => (
+          <span id={`line-${index + 1}`} key={index}>
+            {line}
+            {'\n'}
+          </span>
+        ))}
+      </pre>
+    </details>
+  );
+}