@crvouga/atlas 0.2.0 → 0.4.0

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

@@ -1,5 +1,7 @@
 import { recordingPaths } from '@crvouga/atlas/reports/evidence-types';
 import { checkHistory, type CheckSlot, type HistoryEntry } from '@crvouga/atlas/reports/evidence-view';
+import { environmentLabel } from '@crvouga/atlas/reports/layer-axes';
+import type { EvidenceResult } from '@crvouga/atlas/reports/layer-merge';
 import { flattenFrames } from '@crvouga/atlas/reports/frames';
 import type { ReportStep, RunReport } from '@crvouga/atlas/reports/report-types';
 import { useQuery } from '@tanstack/react-query';
@@ -34,15 +36,45 @@ export function useRecordedReport(entry: HistoryEntry | null, enabled = true) {
 }
 
 /** One check in a list: its outcome at a glance, and everything recorded for it when opened. */
+const ENV_RANK = { passed: 0, 'not-run': 1, running: 2, failed: 3 } as const;
+
+/** One mark per client when the same check was recorded on more than one. */
+function environmentMarks(slot: CheckSlot) {
+  const seen = new Map<string, CheckSlot['status']>();
+  for (const outcome of slot.outcomes) {
+    const id = outcome.layer.environment ?? '';
+    const prior = seen.get(id);
+    if (prior === undefined || ENV_RANK[outcome.row.status] > ENV_RANK[prior]) seen.set(id, outcome.row.status);
+  }
+  if (seen.size < 2) return [];
+  return [...seen].map(([id, status]) => ({ id, status }));
+}
+
+function outcomeName(outcome: EvidenceResult) {
+  const environment = outcome.layer.environment ? environmentLabel(outcome.layer.environment) : '';
+  const parameters = Object.entries(outcome.parameters).map(([name, value]) => `${name}: ${value}`).join(', ');
+  return [environment, parameters].filter(Boolean).join(' · ') || outcome.layer.producer;
+}
+
 export function ResultRow({ label, slot, open, onToggle, children }: { label: string; slot: CheckSlot | null; open: boolean; onToggle: () => void; children: ReactNode }) {
   const now = useNow();
   const newest = slot?.outcomes[0];
+  const marks = slot ? 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}>
       <button type="button" className={styles.resultHead} aria-expanded={open} onClick={onToggle}>
         <StatusMark status={slot?.status ?? 'none'} />
-        <span className={styles.resultName}>{label}</span>
+        <span className={styles.resultName}>
+          {label}
+          {marks.length > 0 && (
+            <span className={styles.envMarks}>
+              {marks.map((mark) => (
+                <span key={mark.id || 'unspecified'} data-status={mark.status}>{environmentLabel(mark.id || null)}</span>
+              ))}
+            </span>
+          )}
+        </span>
         {slot?.live && <span className={styles.liveTag}>Running now</span>}
         <span className={styles.resultAside}>
           {newest ? [duration(newest.row.durationMs), slot.live ? '' : ago(slot.latestAtMs, now)].filter(Boolean).join(' · ') : 'No result'}
@@ -185,11 +217,11 @@ export function CheckDetail({ slot, layerId, select, reads, written }: Props) {
   return (
     <div className={styles.detail}>
       {slot.outcomes.length > 1 && !earlier && (
-        <div className={styles.variants} role="group" aria-label="Parameter sets">
+        <div className={styles.variants} role="group" aria-label="Environments">
           {slot.outcomes.map((outcome, index) => (
             <button key={outcome.key} type="button" aria-pressed={index === variant} onClick={() => setVariant(index)}>
               <StatusMark status={outcome.row.status} size={12} />
-              {Object.entries(outcome.layer.parameters).map(([name, value]) => `${name}: ${value}`).join(', ') || outcome.layer.producer}
+              {outcomeName(outcome)}
             </button>
           ))}
         </div>

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

@@ -455,11 +455,31 @@
 }
 
 .resultName {
+  display: flex;
   flex: 1;
+  flex-direction: column;
   min-width: 0;
   font-weight: 500;
 }
 
+.envMarks {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 2px;
+  color: var(--ink-3);
+  font-size: 0.75rem;
+  font-weight: 400;
+}
+
+.envMarks span[data-status='passed'] {
+  color: var(--passed-ink);
+}
+
+.envMarks span[data-status='failed'] {
+  color: var(--failed-ink);
+}
+
 .result[data-status='none'] .resultName {
   color: var(--ink-3);
   font-weight: 400;

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

@@ -1,5 +1,6 @@
 import type { BackendInfo, LayerHeader, StatusCounts } from '@crvouga/atlas/reports/evidence-types';
 import type { SpecStatus, SpecSummary } from '@crvouga/atlas/reports/evidence-view';
+import { environmentLabel } from '@crvouga/atlas/reports/layer-axes';
 import { useState, type ReactNode } from 'react';
 
 import styles from './evidence.module.css';
@@ -89,6 +90,7 @@ export function Origin({ layer, backends, now }: { layer: LayerHeader; backends:
       {layer.live && <span className={styles.liveTag}>Running now</span>}
       <span>{backendLabel(backends, layer.backend)}</span>
       {layer.branch && <span>{layer.branch}</span>}
+      {layer.environment && <span>{environmentLabel(layer.environment)}</span>}
       {sha && <code>{sha}</code>}
       {layer.freshness === 'modified' && <span>with local changes</span>}
       {layer.freshness === 'unknown' && <span>origin not captured</span>}

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

@@ -67,7 +67,7 @@ export function Overview({ kind }: { kind: SpecKind }) {
         </p>
       ))}
       {!evidence.ready && !evidence.unavailable && <p className={styles.aside} role="status">Loading recorded results…</p>}
-      {evidence.ready && evidence.pending > 0 && <p className={styles.aside} role="status">Reading {plural(evidence.pending, 'more run', 'more runs')}…</p>}
+      {evidence.ready && evidence.pending > 0 && <p className={styles.aside} role="status">Reading {plural(evidence.pending, 'more layer', 'more layers')}…</p>}
 
       {evidence.active.length > 0 && (
         <section className={styles.block}>
@@ -111,13 +111,13 @@ export function Overview({ kind }: { kind: SpecKind }) {
         <p className={styles.aside}>
           {evidence.layers.length === 0
             ? `Nothing has been recorded yet. Results appear here as a spec run finishes each test.`
-            : `None of the ${plural(evidence.layers.length, 'run', 'runs')} in the combined report checked a ${kind.one}.`}
+            : `None of the ${plural(evidence.layers.length, 'layer', 'layers')} in the combined report checked a ${kind.one}.`}
         </p>
       )}
 
       {evidence.ready && (
         <p className={styles.footLine}>
-          {plural(evidence.layers.length, 'run', 'runs')} from {evidence.backends.filter((backend) => backend.available).map((backend) => backendLabel(evidence.backends, backend.id)).join(' and ') || 'no report store'}.{' '}
+          {plural(evidence.layers.length, 'layer', 'layers')} from {evidence.backends.filter((backend) => backend.available).map((backend) => backendLabel(evidence.backends, backend.id)).join(' and ') || 'no report store'}.{' '}
           <button type="button" className={styles.link} onClick={() => setSourcesOpen(true)}>Choose sources</button>
           {empty > 0 && (
             <>

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

@@ -1,4 +1,5 @@
 import { checkHistory, type CheckSlot, type HistoryEntry } from '@crvouga/atlas/reports/evidence-view';
+import type { RunReport } from '@crvouga/atlas/reports/report-types';
 import { useQuery } from '@tanstack/react-query';
 import { useMemo } from 'react';
 
@@ -21,6 +22,21 @@ type Props = {
   onClose: () => void;
 };
 
+/** HTML snapshots are the only pictures that paint with the run's stylesheet. */
+function needsStylesheet(report: RunReport | undefined): boolean {
+  if (!report) return false;
+  const visit = (steps: RunReport['steps']): boolean => {
+    for (const step of steps) {
+      for (const frame of step.frames) {
+        if (frame.snapshots.some((blob) => blob.media === 'html')) return true;
+      }
+      if (visit(step.steps)) return true;
+    }
+    return false;
+  };
+  return visit(report.steps) || (report.artifacts ?? []).some((artifact) => artifact.media === 'html');
+}
+
 /** One recorded test, opened in place of its spec. */
 export function RecordingPage({ slot, layerId, label, back, moment, onMoment, onClose }: Props) {
   const { evidence, backends, pending, ready, unavailable } = useEvidence();
@@ -29,7 +45,8 @@ export function RecordingPage({ slot, layerId, label, back, moment, onMoment, on
   const winner = slot?.outcomes[0];
   const chosen: HistoryEntry | null = (layerId ? history.find((entry) => entry.layer.id === layerId) : undefined) ?? (winner ? { layer: winner.layer, row: winner.row } : null);
   const { paths, report } = useRecordedReport(chosen);
-  const css = useQuery({ queryKey: ['evidence-css', paths?.css ?? ''], queryFn: ({ signal }) => reportText(paths!.css, signal), enabled: paths !== null, staleTime: Number.POSITIVE_INFINITY, retry: false });
+  const wantsCss = needsStylesheet(report.data);
+  const css = useQuery({ queryKey: ['evidence-css', paths?.css ?? ''], queryFn: ({ signal }) => reportText(paths!.css, signal), enabled: paths !== null && wantsCss, staleTime: Number.POSITIVE_INFINITY, retry: false });
   const waiting = !chosen && !unavailable && (!ready || pending > 0);
   return (
     <article className={styles.page} data-wide="true" aria-label="Recorded test">
@@ -57,7 +74,7 @@ export function RecordingPage({ slot, layerId, label, back, moment, onMoment, on
           <button type="button" className={styles.link} onClick={() => void report.refetch()}>Try again</button>
         </p>
       )}
-      {css.isError && (
+      {wantsCss && css.isError && (
         <p className={styles.notice} role="alert">
           The recorded stylesheet could not be read, so pictures appear unstyled.{' '}
           <button type="button" className={styles.link} onClick={() => void css.refetch()}>Try again</button>

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

@@ -214,10 +214,8 @@
   display: flex;
   flex-wrap: wrap;
   align-content: flex-start;
+  justify-content: center;
   gap: 20px;
-  height: 29rem;
-  overflow: auto;
-  scrollbar-gutter: stable;
 }
 
 .snapshot {
@@ -265,17 +263,15 @@
 .image {
   display: block;
   width: 100%;
-  height: 13rem;
+  height: auto;
+  max-height: min(68vh, 640px);
   object-fit: contain;
-  aspect-ratio: 9 / 16;
-  background: #fff;
-  max-width: 100%;
+  background: var(--bg-2);
   border: 1px solid var(--line-2);
   border-radius: 12px;
 }
 
 @media (max-width: 800px) {
-  .pictures { height: 24rem; }
   .snapshot { flex-basis: min(270px, 100%); width: min(270px, 100%); }
 }
 

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

@@ -1,8 +1,11 @@
 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 { useMemo, useState } from 'react';
 
+import { reportLooks } from '../looks/collect';
+import { Stage, type LookMode } from '../looks/Stage';
+import { reportAssetUrl } from './api';
 import { duration } from './format';
 import { StatusMark } from './marks';
 import styles from './recording.module.css';
@@ -20,63 +23,35 @@ type Props = {
 
 /** 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 [mode, setMode] = useState<LookMode | null>(null);
   const test = useMemo(() => ({ report, blobs: {} }), [report]);
   const frames = useMemo(() => testFrames(test), [test]);
+  const looks = useMemo(() => reportLooks(report, (file) => reportAssetUrl(fileUrl(file))), [report, fileUrl]);
+  const extras = (report.artifacts ?? []).filter((artifact) => artifact.media !== 'png' && artifact.media !== 'video');
   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);
+    setMode('timeline');
     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);
+    if (failure) {
+      setMode('timeline');
+      go(failure.index);
+    }
   };
 
   return (
@@ -115,53 +90,69 @@ export function Timeline({ report, fileUrl, css, moment, onMoment }: Props) {
             })}
           </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>
+            {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>
                   ))}
-                  {observations.map((blob) => (
-                    <Snapshot key={blob.file} url={fileUrl(blob.file)} blob={blob} css={css} hit={null} />
-                  ))}
-                </div>
-              </>
+                </select>
+              </label>
+            )}
+            <Stage
+              looks={looks}
+              prefer="timeline"
+              mode={mode}
+              onMode={setMode}
+              moment={frames.length ? index : undefined}
+              onMoment={go}
+              failure={frames.some((entry) => entry.step.status === 'failed')}
+              onFailure={nextFailure}
+              empty={extras.length > 0
+                ? <p className={styles.quietLine}>This runner attached files instead of a step-by-step timeline. They are below.</p>
+                : <p className={styles.quietLine}>This test recorded no picture, video, or timeline. Its steps and outcome are on the left.</p>}
+              renderMoment={(at) => {
+                const current = frames[at];
+                if (!current) return null;
+                const ui = orderedUiBlobs(current, test);
+                const pictures = ui.filter((entry) => entry.blob && entry.blob.media !== 'video' && (actor === 'all' || entry.nodeId === actor));
+                const absent = ui.filter((entry) => !entry.blob && (actor === 'all' || !entry.nodeId || entry.nodeId === actor));
+                const observations = current.frame.snapshots.filter((blob) => blob.media !== 'html' && blob.media !== 'png' && blob.media !== 'video' && (actor === 'all' || !blob.nodeId || blob.nodeId === actor));
+                return (
+                  <>
+                    <p className={styles.quietLine}>
+                      {current.step.status === 'failed' ? 'Failed' : 'Passed'} · at {duration(Math.max(0, current.frame.capturedAtMs - report.meta.startedAtMs)) || '0 ms'}
+                      {current.frame.hit && <> · acted on {current.frame.hit.path.join(' › ')}</>}
+                    </p>
+                    {current.step.error && <pre className={styles.error} role="alert">{current.step.error}</pre>}
+                    {current.step.detail && (
+                      <div className={styles.observed}>
+                        <SnapshotData text={current.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 : current.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>
+                  </>
+                );
+              }}
+            />
+            {extras.length > 0 && (
+              <div className={styles.pictures} aria-label="Other attachments">
+                {extras.map((artifact) => (
+                  <Snapshot key={artifact.file} url={fileUrl(artifact.file)} blob={{ name: artifact.name, media: artifact.media, file: artifact.file }} css={css} hit={null} />
+                ))}
+              </div>
             )}
           </section>
         </div>

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

@@ -4,7 +4,7 @@ import { createSnapshotHost, paintSnapshotHost, type HitResult } from '@crvouga/
 import { useQuery } from '@tanstack/react-query';
 import { useEffect, useRef, useState } from 'react';
 
-import { reportResponse } from './api';
+import { reportAssetUrl, reportResponse } from './api';
 import styles from './recording.module.css';
 import { traceStates } from './quint';
 import { ModelTrace } from './model-trace';
@@ -45,9 +45,9 @@ export function SnapshotPicture({ file, html, css, hit, who }: { file: string; h
 
 /** 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 content = useQuery({ queryKey: ['evidence-blob', url], queryFn: ({ signal }) => readBlob(url, blob, signal), enabled: blob.media !== 'video', retry: false });
   const who = blob.nodeId ?? blob.name;
-  const picture = blob.media === 'html' || blob.media === 'png';
+  const picture = blob.media === 'html' || blob.media === 'png' || blob.media === 'video';
   return (
     <figure className={styles.snapshot} data-picture={picture || undefined}>
       <figcaption>
@@ -55,7 +55,8 @@ export function Snapshot({ url, blob, css, hit, earlier = false }: { url: string
         {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>}
+      {blob.media === 'video' && <video className={styles.image} src={reportAssetUrl(url)} controls playsInline aria-label={`Recorded ${who}`} />}
+      {blob.media !== 'video' && content.isPending && <p className={styles.quietLine} role="status">Loading…</p>}
       {content.isError && (
         <p role="alert" className={styles.quietLine}>
           {content.error.message}{' '}

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

@@ -1,5 +1,6 @@
 import type { LayerHeader } from '@crvouga/atlas/reports/evidence-types';
-import { branchOf, contributes, sourceFacets, type SourceSelection } from '@crvouga/atlas/reports/evidence-view';
+import { ALL_SOURCES, branchOf, contributes, sourceFacets, sourceSelection, type SourceFacet, type SourceSelection } from '@crvouga/atlas/reports/evidence-view';
+import { environmentLabel } from '@crvouga/atlas/reports/layer-axes';
 import * as Dialog from '@radix-ui/react-dialog';
 import { useMemo } from 'react';
 
@@ -20,16 +21,23 @@ function counts(layer: LayerHeader) {
 }
 
 /** 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;
+export function excludedCount(excluded: Partial<SourceSelection>) {
+  const selection = sourceSelection(excluded);
+  return selection.backends.length + selection.branches.length + selection.versions.length + selection.environments.length + selection.layers.length;
+}
+
+function versionLabel(id: string) {
+  return id === 'unknown' ? 'Unknown version' : id.slice(0, 7);
 }
 
 /**
- * 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.
+ * Where the combined report comes from. Every backend, environment, branch, version and layer
+ * contributes unless it is switched off here, which is also how an earlier result is brought back.
  */
 export function SourcesPanel() {
-  const { layers, backends, excluded, setExcluded, notices, retry } = useEvidence();
+  const evidence = useEvidence();
+  const { layers, backends, setExcluded, notices, retry } = evidence;
+  const excluded = sourceSelection(evidence.excluded);
   const open = useUiStore((s) => s.sourcesOpen);
   const setOpen = useUiStore((s) => s.setSourcesOpen);
   const now = useNow();
@@ -48,10 +56,10 @@ export function SourcesPanel() {
             </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.
+            {contributing} of {plural(layers.length, 'layer', 'layers')} contribute. For each check and environment, the newest completed result is shown. A layer fills only the checks it ran, so the rest of the report stays in place. Switch a source off to see an earlier result.
           </p>
           {excludedCount(excluded) > 0 && (
-            <button type="button" className={styles.reset} onClick={() => setExcluded({ backends: [], branches: [], layers: [] })}>
+            <button type="button" className={styles.reset} onClick={() => setExcluded(ALL_SOURCES)}>
               Use every source
             </button>
           )}
@@ -71,42 +79,52 @@ export function SourcesPanel() {
                   <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>
+                    <span className={styles.optionMeta}>{backend.available ? plural(layerCount(backend.id), 'layer', 'layers') : '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>
+          <FacetGroup
+            title="Environments"
+            facets={facets.environments.filter((facet) => facets.environments.length > 1 || facet.id !== 'unspecified')}
+            excluded={excluded.environments}
+            label={(id) => environmentLabel(id === 'unspecified' ? null : id)}
+            empty={null}
+            now={now}
+            onToggle={(id) => setExcluded({ ...excluded, environments: toggled(excluded.environments, id) })}
+            onOnly={(id) => setExcluded({ ...excluded, environments: facets.environments.map((facet) => facet.id).filter((facet) => facet !== id) })}
+          />
+
+          <FacetGroup
+            title="Branches"
+            facets={facets.branches}
+            excluded={excluded.branches}
+            label={(id) => id}
+            empty="No layers yet."
+            now={now}
+            onToggle={(id) => setExcluded({ ...excluded, branches: toggled(excluded.branches, id) })}
+            onOnly={(id) => setExcluded({ ...excluded, branches: facets.branches.map((facet) => facet.id).filter((facet) => facet !== id) })}
+          />
+
+          <FacetGroup
+            title="Versions"
+            facets={facets.versions}
+            excluded={excluded.versions}
+            label={versionLabel}
+            empty={null}
+            now={now}
+            onToggle={(id) => setExcluded({ ...excluded, versions: toggled(excluded.versions, id) })}
+            onOnly={(id) => setExcluded({ ...excluded, versions: facets.versions.map((facet) => facet.id).filter((facet) => facet !== id) })}
+          />
 
           <section className={styles.group}>
-            <h3>Runs</h3>
+            <h3>Layers</h3>
             <ul>
-              <Bounded items={layers} size={40} more="Earlier runs">
+              <Bounded items={layers} size={40} more="Earlier layers">
                 {(layer) => {
-                  const off = excluded.backends.includes(layer.backend) || excluded.branches.includes(branchOf(layer));
+                  const off = !contributes(layer, { ...excluded, layers: [] });
                   return (
                     <li key={`${layer.backend}|${layer.id}`}>
                       <label className={styles.option} data-off={off || undefined}>
@@ -115,6 +133,7 @@ export function SourcesPanel() {
                           {layer.packageDir ?? layer.producer}
                           <span className={styles.run}>
                             {layer.live ? 'Running now' : <time title={exactTime(layer.recordedAtMs)}>{ago(layer.recordedAtMs, now)}</time>} · {branchOf(layer)}
+                            {layer.environment && <> · {environmentLabel(layer.environment)}</>}
                             {shortSha(layer.sha) && <> · <code>{shortSha(layer.sha)}</code></>}
                             {layer.freshness === 'modified' && ' · local changes'}
                           </span>
@@ -132,3 +151,38 @@ export function SourcesPanel() {
     </Dialog.Root>
   );
 }
+
+function FacetGroup({ title, facets, excluded, label, empty, now, onToggle, onOnly }: {
+  title: string;
+  facets: readonly SourceFacet[];
+  excluded: readonly string[];
+  label: (id: string) => string;
+  empty: string | null;
+  now: number;
+  onToggle: (id: string) => void;
+  onOnly: (id: string) => void;
+}) {
+  if (!facets.length && empty === null) return null;
+  return (
+    <section className={styles.group}>
+      <h3>{title}</h3>
+      {facets.length === 0 && <p className={styles.empty}>{empty}</p>}
+      <ul>
+        {facets.map((facet) => (
+          <li key={facet.id}>
+            <label className={styles.option}>
+              <input type="checkbox" checked={!excluded.includes(facet.id)} onChange={() => onToggle(facet.id)} />
+              <span className={styles.optionName} title={facet.id}>{label(facet.id)}</span>
+              <span className={styles.optionMeta}>
+                {plural(facet.layers, 'layer', 'layers')} · {ago(facet.latestAtMs, now)}
+              </span>
+            </label>
+            {facets.length > 1 && (
+              <button type="button" className={styles.only} onClick={() => onOnly(facet.id)}>Only</button>
+            )}
+          </li>
+        ))}
+      </ul>
+    </section>
+  );
+}