@crvouga/atlas 0.2.0 → 0.3.0

package/CHANGELOG.md

@@ -1,6 +1,12 @@
 # Changelog: @crvouga/atlas
 
-## 0.2.0 (2026-10-13)
+## 0.3.0 (2026-10-13)
+
+### Features
+
+- run the todo specs, find them in plain language, and play their evidence (#5) ([caa0df8](https://github.com/crvouga/atlas/commit/caa0df8fec96aa8e910dae53afc59ae705707359))
+
+## 0.2.0 (2026-10-12)
 
 ### Features
 

package/README.md

@@ -81,6 +81,10 @@ served by a small Node server) specified as two charts:
 - `specs/getting-started.machine.yaml`, the child chart in XState YAML. Its two final states hand
   back to the parent through `meta.doneEvent`.
 - `specs/journeys.yaml`, four curated journeys.
+- `specs/getting-started.feature` and `specs/working-the-list.feature`, the same stories in Gherkin.
+- `specs/todo.qnt`, the list, its sync, and its actions as a Quint model.
+
+The visualizer lists the features under Gherkin and the model under Quint.
 
 It has every kind of event: user events (taps and typing), a **system** event ("Sync fails", which
 the test triggers through a real HTTP endpoint on the example server), a **time** event ("Retry
@@ -98,7 +102,7 @@ bunx playwright install chromium
 bun run example:lint   # pure, reachable, no undocumented dead ends, journeys replay, everything implemented
 bun run example:plan   # 4 journeys + 1 generated path cover all 14 transitions
 bun run example:fast   # run every path quickly
-bun run example:run    # showcase mode: paced, with a touch overlay, screenshots and a clip per transition
+bun run example:run    # statechart showcase, then the Gherkin features and the Quint model
 bun test examples      # the same spec against an in-memory model, as a test suite
 
 bun run example:clients      # clients/: one chart across a phone, a desktop and the sync server at once
@@ -110,7 +114,7 @@ visualizer updates when a run finishes.
 
 ```sh
 bun run atlas:run   # example:clients, then example:run: every chart of the example, in showcase mode
-bun run atlas:viz   # the example's specs and those runs, in the visualizer
+bun run atlas:viz   # the example's specs, chart runs, Gherkin features, and Quint model
 ```
 
 Each config writes its own run and the visualizer shows one run at a time: the latest is the
@@ -124,6 +128,8 @@ Transitions 14/14 passed, 0 failed, 0 not reached
 Manifest: examples/todo/atlas-runs/<run-id>/manifest.json
 ```
 
+`example:run` then runs the Gherkin features in a browser and the Quint model. `atlas:viz` shows those results on the scenario and trace rows.
+
 `bun test examples` runs [`model.test.ts`](examples/todo/model.test.ts): the same charts and journeys
 against `TodoModel`, a plain class, through `functionDriver` and `describeAtlas`. Only the driver
 and the implementation differ, which is the point: the spec belongs to the product, not to one

package/dist/reports/src/export-evidence.js

@@ -2,6 +2,7 @@ import { eachLimited } from './completion-order.js';
 import { recordingPaths } from './evidence-types.js';
 import { distinctHeaders } from './layer-merge.js';
 import { writeUtf8 } from './object-io.js';
+import { capturedFiles } from './frames.js';
 export function evidenceFile(path) {
     const url = new URL(path || '/', 'http://atlas');
     if (url.pathname === '/')
@@ -76,19 +77,10 @@ export async function exportEvidence(args) {
                 const raw = await copy(paths.report);
                 if (!raw)
                     continue;
-                await eachLimited([...frameFiles(JSON.parse(raw).steps)], 4, file => copy(paths.file(file)).then(() => { }));
+                await eachLimited(capturedFiles(JSON.parse(raw)), 4, file => copy(paths.file(file)).then(() => { }));
             }
         });
         await writeUtf8(args.target, evidenceFile(path), JSON.stringify(exported), 'application/json');
     }
     return { revisions: revisions.size, layers, missing };
 }
-function frameFiles(steps, files = new Set()) {
-    for (const step of steps) {
-        for (const frame of step.frames)
-            for (const blob of frame.snapshots)
-                files.add(blob.file);
-        frameFiles(step.steps, files);
-    }
-    return files;
-}

package/dist/reports/src/frames.d.ts

@@ -1,5 +1,5 @@
 import type { HtmlReportTest } from './recording-bundle.js';
-import type { ReportFrame, ReportSnapshotBlob, ReportStep } from './report-types.js';
+import type { ReportFrame, ReportSnapshotBlob, ReportStep, RunReport } from './report-types.js';
 import type { Route } from './hash.js';
 export type FlatFrame = {
     step: ReportStep;
@@ -28,6 +28,8 @@ export declare function testFrames(test: HtmlReportTest): FlatFrame[];
 /** Return UI snapshots in one stable actor order, including empty slots. */
 export declare function orderedUiBlobs(frame: FlatFrame | null, test: HtmlReportTest): OrderedUiBlob[];
 export declare function selectedFrame(frames: readonly FlatFrame[], route: Route): FlatFrame | null;
+/** Every file a report names: step snapshots, and files attached to the test as a whole. */
+export declare function capturedFiles(report: Pick<RunReport, 'steps' | 'artifacts'>): string[];
 export declare function isUi(b: ReportSnapshotBlob): boolean;
 export declare function uiBlobs(frame: FlatFrame | null): ReportSnapshotBlob[];
 export declare function stageBlobs(frame: FlatFrame | null): ReportSnapshotBlob[];

package/dist/reports/src/frames.js

@@ -137,6 +137,27 @@ export function selectedFrame(frames, route) {
     }
     return frames[frames.length - 1] ?? null;
 }
+/** Every file a report names: step snapshots, and files attached to the test as a whole. */
+export function capturedFiles(report) {
+    const files = new Set();
+    const visit = (steps) => {
+        for (const step of steps) {
+            for (const frame of step.frames)
+                for (const blob of frame.snapshots)
+                    files.add(blob.file);
+            visit(step.steps);
+        }
+    };
+    visit(report.steps);
+    for (const artifact of report.artifacts ?? []) {
+        files.add(artifact.file);
+        if (artifact.poster)
+            files.add(artifact.poster);
+        if (artifact.captions)
+            files.add(artifact.captions);
+    }
+    return [...files];
+}
 export function isUi(b) {
     return b.media === 'html' || b.media === 'png';
 }

package/dist/reports/src/publish.js

@@ -3,6 +3,7 @@ import { performancePart } from './performance-part.js';
 import { applyJunitOutcomes, parseJunit, } from './junit.js';
 import { testFrameKey, testPrefix, testReportKey, } from './recording-keys.js';
 import { suiteStatus } from './status.js';
+import { capturedFiles } from './frames.js';
 import { readUtf8, writeUtf8 } from './object-io.js';
 import { bundleIndexKey, writeBundle } from './bundle.js';
 import { eachLimited } from './completion-order.js';
@@ -67,20 +68,10 @@ async function readTests(bucket, runId) {
         ...applyJunitOutcomes({ runId, status: 'passed', updatedAtMs: 0, tests }, parseJunit(junit)).tests,
     ];
 }
-function frameFiles(steps, out) {
-    for (const step of steps) {
-        for (const frame of step.frames) {
-            for (const blob of frame.snapshots)
-                out.add(blob.file);
-        }
-        frameFiles(step.steps, out);
-    }
-}
 async function publishSnapshots(store, args, tests, contentPrefix) {
     const runId = args.runId ?? SPEC_RUN_ID;
     await eachLimited(tests, 8, async ({ report }) => {
-        const files = new Set();
-        frameFiles(report.steps, files);
+        const files = new Set(capturedFiles(report));
         await publishSnapshotBundle({
             local: args.local,
             remote: store,

package/dist/reports/src/recording-keys.js

@@ -28,6 +28,8 @@ export function mediaExtension(media) {
             return 'txt';
         case 'bytes':
             return 'bin';
+        case 'video':
+            return 'mp4';
         default:
             return 'bin';
     }
@@ -44,6 +46,8 @@ export function contentTypeForMedia(media) {
             return 'text/plain; charset=utf-8';
         case 'bytes':
             return 'application/octet-stream';
+        case 'video':
+            return 'video/mp4';
         default:
             return 'application/octet-stream';
     }

package/dist/reports/src/report-types.d.ts

@@ -18,8 +18,12 @@ export type ReportPerformanceOptions = {
     /** Diagnostic threshold, not a portable CPU or paint-time assertion. */
     readonly slowStepMs: number;
 };
-/** How a captured value is encoded on disk and rendered in the report. */
-export type SnapshotMedia = 'json' | 'html' | 'png' | 'text' | 'bytes';
+/**
+ * How a captured value is encoded on disk and rendered in the report.
+ * `png` is a still, `html` is a page snapshot, and `video` is an mp4 of the moment or the whole test.
+ * A runner may record any mix. The viewer treats a still, a video, and a timeline of frames as the same kind of evidence.
+ */
+export type SnapshotMedia = 'json' | 'html' | 'png' | 'text' | 'bytes' | 'video';
 export type ReportStepStatus = 'passed' | 'failed';
 /** Test outcome after the harness (e.g. the test runner) has weighed in. */
 export type ReportTestStatus = 'passed' | 'failed' | 'skipped';
@@ -102,10 +106,23 @@ export type RunReportMeta = {
     readonly error?: string;
     readonly errorStack?: string;
 };
+/**
+ * A file attached to the whole test. A runner that can capture each step puts stills and page
+ * snapshots on `steps[].frames` instead, and the viewer builds a timeline from those. This list
+ * is for what the runner can attach when it cannot: a video of the test, a few screenshots, a log.
+ */
+export type ReportArtifact = {
+    readonly name: string;
+    readonly media: SnapshotMedia;
+    readonly file: string;
+    readonly poster?: string;
+    readonly captions?: string;
+};
 /** In-memory / persisted timeline for one test run. */
 export type RunReport = {
     readonly meta: RunReportMeta;
     readonly steps: readonly ReportStep[];
+    readonly artifacts?: readonly ReportArtifact[];
 };
 export type SuiteTestSummary = {
     readonly testId: string;

package/dist/reports/src/source-entries.js

@@ -1,15 +1,7 @@
 import { testFrameKey } from './recording-keys.js';
+import { capturedFiles } from './frames.js';
 import { remoteTestFileKey, remoteTestReportKey } from './keys.js';
 const JSON_TYPE = 'application/json; charset=utf-8';
-function frameFiles(steps, out) {
-    for (const step of steps) {
-        for (const frame of step.frames) {
-            for (const blob of frame.snapshots)
-                out.add(blob.file);
-        }
-        frameFiles(step.steps, out);
-    }
-}
 export async function* sourceEntries(args, source, tests, runId) {
     for (const { report } of [...tests].sort((a, b) => a.report.meta.testId < b.report.meta.testId ? -1 : 1)) {
         const { testId } = report.meta;
@@ -18,9 +10,7 @@ export async function* sourceEntries(args, source, tests, runId) {
             bytes: new TextEncoder().encode(JSON.stringify(report)),
             contentType: JSON_TYPE,
         };
-        const files = new Set();
-        frameFiles(report.steps, files);
-        for (const file of [...files].sort()) {
+        for (const file of capturedFiles(report).sort()) {
             const obj = await args.local.get(testFrameKey(runId, testId, file));
             if (obj === null)
                 throw new Error(`Missing report snapshot: ${file}`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crvouga/atlas",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Atlas: executable statecharts. Spec a product's flows as statecharts, run them against the real app with any driver, and browse what happened.",
   "license": "MIT",
   "type": "module",
@@ -115,11 +115,11 @@
     "example:lint": "bun --cwd examples/todo ../../packages/core/bin/atlas.mjs lint --require-implementations",
     "example:plan": "bun --cwd examples/todo ../../packages/core/bin/atlas.mjs plan",
     "example:fast": "bun --cwd examples/todo ../../packages/core/bin/atlas.mjs run --mode fast",
-    "example:run": "bun --cwd examples/todo ../../packages/core/bin/atlas.mjs run --mode showcase",
+    "example:run": "bun examples/todo/run-all.ts",
     "example:clients": "bun --cwd examples/todo ../../packages/core/bin/atlas.mjs run --config clients/atlas.config.ts --mode showcase",
     "example:clients:bun": "ATLAS_DESKTOP=bun bun --cwd examples/todo ../../packages/core/bin/atlas.mjs run --config clients/atlas.config.ts --mode showcase",
     "atlas:run": "status=0; bun run example:clients || status=$?; bun run example:run || status=$?; exit $status",
-    "atlas:viz": "bun packages/visualizer/bin/atlas-visualizer.mjs dev --specs examples/todo/specs --runs examples/todo/atlas-runs",
+    "atlas:viz": "ATLAS_REPORTS_MODULE=\"$(pwd)/examples/todo/reports-dev.ts\" bun packages/visualizer/bin/atlas-visualizer.mjs dev --specs examples/todo/specs --runs examples/todo/atlas-runs",
     "release:plan": "bun scripts/release/plan.ts",
     "release:publish": "bun scripts/release/publish.ts",
     "release:smoke": "bun scripts/release/consumer-smoke.ts",
@@ -171,6 +171,7 @@
   "devDependencies": {
     "@commitlint/cli": "19.8.1",
     "@commitlint/config-conventional": "19.8.1",
+    "@informalsystems/quint": "^0.33.0",
     "@types/bun": "1.4.3",
     "@types/node": "^22.20.3",
     "@types/react": "19.2.7",

package/packages/visualizer/README.md

@@ -11,7 +11,9 @@ reads two independent sources and works with whatever exists:
 
 The explorer is one header, an open index and one plate. The index lists every place and journey of
 the product; each kind of spec (Gherkin, Quint, DMN, Alloy, OpenSLO) has its own tab, with the
-recorded result of every spec in its index. Local directories, published HTTP files and HTTP APIs
+recorded result of every spec in its index. The header finds a flow in ordinary language across
+charts, specs and recorded runs. ⌘K (Ctrl+K on other keyboards) opens it, and `/` does the same
+when you are not already typing. Local directories, published HTTP files and HTTP APIs
 can supply reports simultaneously. Reports update through file watching, polling or server events.
 Latest includes running reports; one unavailable backend leaves the others usable.
 

package/packages/visualizer/src/app/AppShell.tsx

@@ -6,9 +6,9 @@ import { SourcesPanel } from '../evidence/sources-panel';
 import { SpecIndex } from '../evidence/spec-index';
 import { kindOfAddress } from '../spec-kind';
 import styles from '../views/views.module.css';
+import { Finder } from '../find/Finder';
 import { AtlasProvider, useAtlas } from './atlas-context';
 import { Gazetteer } from './gazetteer';
-import { SearchQueryProvider } from './search-query';
 
 function Index() {
   const { pathname } = useLocation();
@@ -38,18 +38,17 @@ export function AppShell() {
   return (
     <AtlasProvider run={run}>
       <EvidenceProvider>
-        <SearchQueryProvider>
-          <div className={styles.app}>
-            <Header />
-            <div className={styles.frame}>
-              <Index />
-              <main className={styles.main}>
-                <Body />
-              </main>
-            </div>
-            <SourcesPanel />
+        <div className={styles.app}>
+          <Header />
+          <div className={styles.frame}>
+            <Index />
+            <main className={styles.main}>
+              <Body />
+            </main>
           </div>
-        </SearchQueryProvider>
+          <SourcesPanel />
+          <Finder />
+        </div>
       </EvidenceProvider>
     </AtlasProvider>
   );

package/packages/visualizer/src/app/gazetteer.module.css

@@ -29,8 +29,8 @@
 .row {
   display: flex;
   justify-content: space-between;
-  align-items: baseline;
-  gap: 12px;
+  align-items: center;
+  gap: 10px;
   padding: 6px 10px;
   border-radius: 8px;
   color: inherit;
@@ -38,6 +38,16 @@
   text-decoration: none;
 }
 
+.thumb {
+  flex: none;
+  width: 28px;
+}
+
+.name {
+  flex: 1;
+  min-width: 0;
+}
+
 .chart {
   color: var(--ink-2);
   font-weight: 600;

package/packages/visualizer/src/app/gazetteer.tsx

@@ -1,13 +1,17 @@
 import { Link, useLocation, useParams, useSearch } from '@tanstack/react-router';
 
+import { ScreenImage } from '../components/Screen';
 import { STATUS_LABEL, type AtlasView, type StateView } from '../data/model';
 import { useAtlas } from './atlas-context';
-import { useSearchQuery } from './search-query';
 import styles from './gazetteer.module.css';
 
-function hit(query: string, text: string) {
-  const needle = query.trim().toLowerCase();
-  return needle.length === 0 || text.toLowerCase().includes(needle);
+function openingScreen(view: AtlasView, steps: readonly { transitionIds: readonly string[] }[]) {
+  for (const step of steps) {
+    const transition = view.transitions.get(step.transitionIds[0] ?? '');
+    const landing = transition?.target ? view.states.get(transition.target) : undefined;
+    if (landing && (landing.kind === 'screen' || landing.kind === 'final')) return landing;
+  }
+  return undefined;
 }
 
 function screensOf(view: AtlasView, chartId: string) {
@@ -19,7 +23,6 @@ function screensOf(view: AtlasView, chartId: string) {
 }
 
 export function Gazetteer() {
-  const { query } = useSearchQuery();
   const { view } = useAtlas();
   const params = useParams({ strict: false });
   const search = useSearch({ strict: false });
@@ -27,7 +30,7 @@ export function Gazetteer() {
   const screen = typeof search.screen === 'string' ? search.screen : undefined;
   const journeyId = typeof search.journey === 'string' ? search.journey : undefined;
   const group = typeof search.group === 'string' ? search.group : undefined;
-  const journeys = (view?.journeys ?? []).filter((journey) => journey.chartIds.length > 0 && hit(query, journey.name));
+  const journeys = (view?.journeys ?? []).filter((journey) => journey.chartIds.length > 0);
   return (
     <nav className={styles.index} aria-label="Places">
       <h2>Places</h2>
@@ -38,9 +41,7 @@ export function Gazetteer() {
           {context.chartIds.map((chartId) => {
             const chart = view.charts.get(chartId);
             if (!chart) return null;
-            const screens = screensOf(view, chartId).filter((state) => hit(query, `${state.name} ${chart.name} ${context.name}`));
-            const chartHit = hit(query, `${chart.name} ${context.name}`);
-            if (query.trim() && screens.length === 0 && !chartHit) return null;
+            const screens = screensOf(view, chartId);
             return (
               <div key={chartId}>
                 <Link className={styles.chart} to="/chart/$chartId" params={{ chartId }} search={(prev) => ({ run: prev.run, screen: undefined, journey: undefined, group: undefined })} activeOptions={{ includeSearch: true, explicitUndefined: true }} aria-current={params.chartId === chartId && !screen && !journeyId && !group ? 'page' : undefined}>
@@ -57,7 +58,10 @@ export function Gazetteer() {
                         search={(prev) => ({ run: prev.run, screen: state.name, journey: prev.journey })}
                         aria-current={params.chartId === chartId && screen === state.name ? 'page' : undefined}
                       >
-                        <span>{state.name}</span>
+                        <span className={styles.thumb} aria-hidden="true">
+                          <ScreenImage state={state} size="thumb" description={false} lines={false} caption={false} />
+                        </span>
+                        <span className={styles.name}>{state.name}</span>
                         <span className={styles.status}>{STATUS_LABEL[state.status]}</span>
                       </Link>
                     </li>
@@ -72,21 +76,29 @@ export function Gazetteer() {
         <section>
           <h3>Journeys</h3>
           <ul>
-            {journeys.map((journey) => (
-              <li key={journey.id}>
-                <Link
-                  className={styles.row}
-                  data-status={journey.status}
-                  to="/chart/$chartId"
-                  params={{ chartId: journey.chartIds[0] ?? '' }}
-                  search={(prev) => ({ run: prev.run, journey: journey.id })}
-                  aria-current={journeyId === journey.id && pathname.startsWith('/chart') ? 'page' : undefined}
-                >
-                  <span>{journey.name}</span>
-                  <span className={styles.status}>{STATUS_LABEL[journey.status]}</span>
-                </Link>
-              </li>
-            ))}
+            {journeys.map((journey) => {
+              const opening = view ? openingScreen(view, journey.steps) : undefined;
+              return (
+                <li key={journey.id}>
+                  <Link
+                    className={styles.row}
+                    data-status={journey.status}
+                    to="/chart/$chartId"
+                    params={{ chartId: journey.chartIds[0] ?? '' }}
+                    search={(prev) => ({ run: prev.run, journey: journey.id })}
+                    aria-current={journeyId === journey.id && pathname.startsWith('/chart') ? 'page' : undefined}
+                  >
+                    {opening && (
+                      <span className={styles.thumb} aria-hidden="true">
+                        <ScreenImage state={opening} size="thumb" description={false} lines={false} caption={false} />
+                      </span>
+                    )}
+                    <span className={styles.name}>{journey.name}</span>
+                    <span className={styles.status}>{STATUS_LABEL[journey.status]}</span>
+                  </Link>
+                </li>
+              );
+            })}
           </ul>
         </section>
       )}
@@ -94,7 +106,7 @@ export function Gazetteer() {
         <section>
           <h2>Not in the spec yet</h2>
           <ul>
-            {view.excluded.filter((item) => hit(query, item)).map((item) => (
+            {view.excluded.map((item) => (
               <li key={item} className={styles.excluded}>{item}</li>
             ))}
           </ul>

package/packages/visualizer/src/components/Header.module.css

@@ -137,23 +137,39 @@
 }
 
 .search {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
   width: min(15rem, 28vw);
   height: 2.125rem;
-  padding: 0 14px;
+  padding: 0 8px 0 14px;
   border: 1px solid transparent;
   border-radius: var(--pill);
   background: var(--bg-2);
+  color: var(--ink-3);
   font-size: 0.875rem;
+  font-weight: 500;
+  text-align: left;
+  cursor: pointer;
 }
 
-.search::placeholder {
+.search kbd {
+  margin-left: auto;
+  padding: 0 0.35rem;
+  border: 1px solid var(--line-2);
+  border-radius: 0.35rem;
   color: var(--ink-3);
+  font-family: var(--font);
+  font-size: 0.75rem;
+  font-weight: 600;
+  line-height: 1.35rem;
 }
 
-.search:focus {
+.search:hover,
+.search:focus-visible {
   border-color: var(--place);
   background: var(--bg);
-  outline: none;
+  color: var(--ink);
 }
 
 @media (max-width: 760px) {

package/packages/visualizer/src/components/Header.tsx

@@ -2,7 +2,8 @@ import { Link, useLocation, useNavigate, useSearch } from '@tanstack/react-route
 import { useEffect, useMemo } from 'react';
 
 import { useAtlas } from '../app/atlas-context';
-import { useSearchQuery } from '../app/search-query';
+import { commandKey } from '../find/Finder';
+import { setFinderOpen } from '../find/open';
 import type { AtlasView } from '../data/model';
 import { LATEST } from '../data/queries';
 import { useEvidence } from '../evidence/evidence-context';
@@ -85,7 +86,6 @@ export function Header() {
   const { view } = useAtlas();
   const evidence = useEvidence();
   const { pathname } = useLocation();
-  const { query, setQuery } = useSearchQuery();
   const kind = kindOfAddress(pathname);
   const product = productName(view?.title);
   useEffect(() => {
@@ -120,7 +120,10 @@ export function Header() {
         {!kind && view && <RunPicker view={view} />}
         {!kind && view && <DataIssues issues={view.issues} />}
         <SourcesButton />
-        <input className={styles.search} type="search" value={query} aria-label="Find" placeholder={kind ? `Find a ${kind.one}` : 'Find a place'} onChange={(event) => setQuery(event.target.value)} />
+        <button type="button" className={styles.search} aria-keyshortcuts="Meta+K Control+K" onClick={() => setFinderOpen(true)}>
+          Find a flow
+          <kbd>{commandKey()}</kbd>
+        </button>
       </div>
     </header>
   );

package/packages/visualizer/src/data/model/build.ts

@@ -108,12 +108,24 @@ export function buildAtlasView(input: BuildInput): AtlasView {
 
   const processing = input.runProgress === 'running' || run?.info.finishedAt === null;
   const itemStatus = (status: ItemStatus | undefined) => processing && status === 'not-reached' ? 'not-yet-run' : status ?? unrun;
+  const shotOf = (img: { png: string; webp?: string | undefined; client?: string | undefined }) => {
+    const full = input.resolveMedia(run!.id, img.png) || null;
+    const thumb = img.webp ? input.resolveMedia(run!.id, img.webp) || full : full;
+    if (!full && !thumb) return null;
+    return { client: img.client ?? null, thumb, full };
+  };
   const image = (img: Image | null | undefined, marked: string | undefined): ImageMedia => {
-    if (!run || !img) return { state: marked === 'processing' || processing ? 'processing' : 'missing', thumb: null, full: null };
-    if (marked === 'processing') return { state: 'processing', thumb: null, full: null };
-    const full = input.resolveMedia(run.id, img.png) || null;
-    const thumb = img.webp ? input.resolveMedia(run.id, img.webp) || full : full;
-    return { state: full || thumb ? 'available' : 'missing', thumb, full };
+    const empty = (state: ImageMedia['state']): ImageMedia => ({ state, thumb: null, full: null, client: img?.client ?? null, also: [] });
+    if (!run || !img) return empty(marked === 'processing' || processing ? 'processing' : 'missing');
+    if (marked === 'processing') return empty('processing');
+    const main = shotOf(img);
+    const also = (img.also ?? []).flatMap((extra) => {
+      if (!extra.png) return [];
+      const shot = shotOf({ png: extra.png, webp: extra.webp, client: extra.client });
+      return shot ? [shot] : [];
+    });
+    if (!main) return { state: 'missing', thumb: null, full: null, client: img.client ?? null, also };
+    return { state: 'available', thumb: main.thumb, full: main.full, client: main.client, also };
   };
   const pathRef = (id: string): PathRef => ({ id, name: run?.paths.find((p) => p.id === id)?.name ?? id });
 

package/packages/visualizer/src/data/model/types.ts

@@ -25,7 +25,16 @@ export type SpecChange = 'same' | 'added' | 'removed' | 'changed';
 
 export type MediaState = 'available' | 'missing' | 'processing';
 
-export type ImageMedia = { state: MediaState; thumb: string | null; full: string | null };
+/** One client's still of a screen. `also` on ImageMedia holds the other clients at the same moment. */
+export type ImageShot = { client: string | null; thumb: string | null; full: string | null };
+
+export type ImageMedia = {
+  state: MediaState;
+  thumb: string | null;
+  full: string | null;
+  client: string | null;
+  also: ImageShot[];
+};
 
 export type VideoMedia = {
   state: MediaState;

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

@@ -19,8 +19,13 @@ function explain(status: number) {
   return `Evidence could not be read (${status}).`;
 }
 
+/** 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}`;
+}
+
 export async function reportResponse(path: string, signal?: AbortSignal) {
-  const url = staticEvidence ? `${reportsBase}/${evidenceFile(path).split('/').map(encodeURIComponent).join('/')}` : `${reportsBase}${path}`;
+  const url = reportAssetUrl(path);
   let response: Response;
   try {
     response = await fetch(url, { signal });