@crvouga/atlas 0.2.0 → 0.3.0

package/packages/visualizer/src/looks/collect.ts

@@ -0,0 +1,245 @@
+import { testFrames } from '@crvouga/atlas/reports/frames';
+import type { RunReport } from '@crvouga/atlas/reports/report-types';
+
+import type { AtlasView, ImageMedia, StateView, TransitionView } from '../data/model';
+
+/**
+ * What a run captured of the product, in the three shapes any runner can fill.
+ * A still, a video, and a timeline of moments are peers: a runner may record one of them or all three.
+ */
+export type PictureLook = {
+  readonly id: string;
+  readonly label: string;
+  readonly alt: string;
+  readonly src: string;
+  readonly thumb: string | null;
+};
+
+export type FilmChapter = { readonly atMs: number; readonly label: string };
+
+export type FilmLook = {
+  readonly id: string;
+  readonly label: string;
+  readonly src: string;
+  readonly poster: string | null;
+  readonly captions: string | null;
+  readonly durationMs: number | null;
+  readonly chapters: readonly FilmChapter[];
+};
+
+export type MomentLook = {
+  readonly id: string;
+  readonly label: string;
+  readonly caption: string | null;
+  readonly status: 'passed' | 'failed' | null;
+  readonly thumb: string | null;
+  /** A point in the still, in the still's own pixels, such as where someone tapped. */
+  readonly point?: { readonly x: number; readonly y: number } | null;
+  readonly pauseMs: number | null;
+};
+
+export type Looks = {
+  readonly pictures: readonly PictureLook[];
+  readonly films: readonly FilmLook[];
+  readonly moments: readonly MomentLook[];
+};
+
+export const EMPTY_LOOKS: Looks = { pictures: [], films: [], moments: [] };
+
+function ready(image: ImageMedia | null | undefined): image is ImageMedia {
+  return Boolean(image && image.state === 'available' && (image.full || image.thumb));
+}
+
+/** Every still in one capture: the client's own screen, then the other clients at that moment. */
+export function picturesOf(image: ImageMedia | null | undefined, id: string, label: string, alt: string): PictureLook[] {
+  if (!ready(image)) return [];
+  const src = image.full ?? image.thumb!;
+  const shots: PictureLook[] = [
+    {
+      id,
+      label: image.client ? `${label} · ${image.client}` : label,
+      alt: image.client ? `${alt}, ${image.client}` : alt,
+      src,
+      thumb: image.thumb
+    }
+  ];
+  image.also.forEach((extra, index) => {
+    const extraSrc = extra.full ?? extra.thumb;
+    if (!extraSrc) return;
+    const who = extra.client ?? `Screen ${index + 2}`;
+    shots.push({ id: `${id}:${who}`, label: `${label} · ${who}`, alt: `${alt}, ${who}`, src: extraSrc, thumb: extra.thumb });
+  });
+  return shots;
+}
+
+const MOMENT_KIND: Record<string, string> = {
+  tap: 'Tap',
+  type: 'Typing',
+  system: 'System',
+  screen: 'Screen',
+  toast: 'Toast',
+  note: 'Note',
+  time: 'Time',
+  notification: 'Notification'
+};
+
+/** The full still of a state. Tap points are recorded in that still's pixels, so the timeline uses it rather than a smaller preview. */
+function stillOf(state: StateView | undefined): string | null {
+  if (!state) return null;
+  const shot = picturesOf(state.result?.screenshot, state.key, state.name, state.name)[0];
+  return shot?.src ?? shot?.thumb ?? null;
+}
+
+function unique(shots: readonly PictureLook[]): PictureLook[] {
+  const seen = new Set<string>();
+  return shots.filter((shot) => {
+    if (seen.has(shot.src)) return false;
+    seen.add(shot.src);
+    return true;
+  });
+}
+
+/** Stills of one state: the screen, each client, and each path that captured it differently. */
+export function stateLooks(state: StateView): Looks {
+  const pictures = unique([
+    ...picturesOf(state.result?.screenshot, state.key, state.name, `Screenshot of ${state.name}`),
+    ...(state.result?.screenshotsByPath ?? []).flatMap((extra) =>
+      picturesOf(extra.image, `${state.key}:${extra.path.id}`, extra.path.name, `Screenshot of ${state.name} along ${extra.path.name}`)
+    )
+  ]);
+  return { pictures, films: [], moments: [] };
+}
+
+/** A transition's video, the screens on either side, and the timeline of what the run did. */
+export function eventLooks(view: AtlasView, transition: TransitionView): Looks {
+  const from = view.states.get(transition.source);
+  const to = transition.target ? view.states.get(transition.target) : undefined;
+  const side = (state: StateView | undefined, which: 'Before' | 'After') =>
+    state ? stateLooks(state).pictures.map((shot) => ({ ...shot, id: `${which.toLowerCase()}:${shot.id}`, label: `${which} · ${shot.label}`, alt: `${which}: ${shot.alt}` })) : [];
+  const pictures = unique([...side(from, 'Before'), ...side(to, 'After')]);
+  const entries = transition.result?.timeline ?? [];
+  const chapters = entries.map((entry) => ({ atMs: entry.atMs, label: entry.label }));
+  const clip = transition.result?.clip;
+  const films: FilmLook[] =
+    clip?.state === 'available' && clip.src
+      ? [{ id: transition.id, label: transition.event, src: clip.src, poster: clip.poster, captions: clip.captions, durationMs: clip.durationMs, chapters }]
+      : [];
+  let shown = stillOf(from);
+  const moments: MomentLook[] = entries.map((entry, index) => {
+    if (entry.kind === 'screen') shown = stillOf(to) ?? shown;
+    const kind = MOMENT_KIND[entry.kind] ?? entry.kind;
+    return {
+      id: `${transition.id}:${index}`,
+      label: entry.label,
+      caption: entry.client ? `${kind} · ${entry.client}` : kind,
+      status: null,
+      thumb: shown,
+      point: entry.x !== undefined && entry.y !== undefined ? { x: entry.x, y: entry.y } : null,
+      pauseMs: null
+    };
+  });
+  return { pictures, films, moments };
+}
+
+/** The journey as a sequence of landing screens, plus a video for each step that recorded one. */
+export function journeyLooks(view: AtlasView, journeyId: string): Looks {
+  const journey = view.journeys.find((item) => item.id === journeyId);
+  if (!journey) return EMPTY_LOOKS;
+  const pictures: PictureLook[] = [];
+  const films: FilmLook[] = [];
+  const moments: MomentLook[] = [];
+  const seen = new Set<string>();
+  journey.steps.forEach((step, index) => {
+    const transition = view.transitions.get(step.transitionIds[0] ?? '');
+    if (!transition) return;
+    const landing = transition.target ? view.states.get(transition.target) : undefined;
+    const origin = view.states.get(transition.source);
+    const landingShot = landing ? picturesOf(landing.result?.screenshot, landing.key, landing.name, `Screenshot of ${landing.name}`)[0] : undefined;
+    const originShot = origin ? picturesOf(origin.result?.screenshot, origin.key, origin.name, `Screenshot of ${origin.name}`)[0] : undefined;
+    // The screen they arrived on. When that screen was not captured, the screen they left is still what the step looked like.
+    const shot = landingShot ?? originShot;
+    if (shot && !seen.has(shot.src)) {
+      seen.add(shot.src);
+      pictures.push(shot);
+    }
+    const film = eventLooks(view, transition).films[0];
+    if (film) films.push({ ...film, id: `${transition.id}:film`, label: transition.event });
+    moments.push({
+      id: `${journeyId}:${index}`,
+      label: transition.event,
+      caption: (landingShot ? landing?.name : origin?.name) ?? null,
+      status: transition.status === 'failed' ? 'failed' : transition.status === 'passed' ? 'passed' : null,
+      thumb: shot?.src ?? shot?.thumb ?? null,
+      point: null,
+      pauseMs: film?.durationMs ?? null
+    });
+  });
+  return { pictures, films, moments };
+}
+
+function chaptersOf(report: RunReport): FilmChapter[] {
+  const chapters: FilmChapter[] = [];
+  const visit = (steps: RunReport['steps']) => {
+    for (const step of steps) {
+      if (step.title) chapters.push({ atMs: Math.max(0, step.startedAtMs - report.meta.startedAtMs), label: step.title });
+      visit(step.steps);
+    }
+  };
+  visit(report.steps);
+  return chapters.some((chapter) => chapter.atMs > 0) ? chapters : [];
+}
+
+/** Stills, videos, and the frame timeline published by any runner's report. */
+export function reportLooks(report: RunReport, fileUrl: (file: string) => string): Looks {
+  const frames = testFrames({ report, blobs: {} });
+  const pictures: PictureLook[] = [];
+  const films: FilmLook[] = [];
+  const seen = new Set<string>();
+  const visit = (steps: RunReport['steps']) => {
+    for (const step of steps) {
+      for (const frame of step.frames) {
+        for (const blob of frame.snapshots) {
+          if (seen.has(blob.file)) continue;
+          if (blob.media !== 'png' && blob.media !== 'video') continue;
+          seen.add(blob.file);
+          const url = fileUrl(blob.file);
+          const who = blob.nodeId ?? blob.name;
+          if (blob.media === 'png') pictures.push({ id: blob.file, label: `${step.title} · ${who}`, alt: `Recorded ${who}`, src: url, thumb: url });
+          else films.push({ id: blob.file, label: who || step.title, src: url, poster: null, captions: null, durationMs: null, chapters: [] });
+        }
+      }
+      visit(step.steps);
+    }
+  };
+  visit(report.steps);
+  const chapters = chaptersOf(report);
+  for (const artifact of report.artifacts ?? []) {
+    if (seen.has(artifact.file)) continue;
+    if (artifact.media !== 'png' && artifact.media !== 'video') continue;
+    seen.add(artifact.file);
+    const url = fileUrl(artifact.file);
+    if (artifact.media === 'png') pictures.push({ id: artifact.file, label: artifact.name, alt: artifact.name, src: url, thumb: url });
+    else films.push({
+      id: artifact.file,
+      label: artifact.name,
+      src: url,
+      poster: artifact.poster ? fileUrl(artifact.poster) : null,
+      captions: artifact.captions ? fileUrl(artifact.captions) : null,
+      durationMs: null,
+      chapters
+    });
+  }
+  const moments: MomentLook[] = frames.map((frame) => {
+    const png = frame.frame.snapshots.find((blob) => blob.media === 'png');
+    return {
+      id: `frame:${frame.index}`,
+      label: frame.step.title,
+      caption: frame.step.kind,
+      status: frame.step.status,
+      thumb: png ? fileUrl(png.file) : null,
+      point: null,
+      pauseMs: frame.frame.durationMs ?? null
+    };
+  });
+  return { pictures, films, moments };
+}

package/packages/visualizer/src/looks/stage.module.css

@@ -0,0 +1,300 @@
+.stage {
+  --look-h: min(58vh, 620px);
+  display: grid;
+  gap: 12px;
+  min-width: 0;
+  margin: 4px 0 8px;
+}
+
+.modes {
+  display: flex;
+  gap: 4px;
+  border-bottom: 1px solid var(--line);
+}
+
+.modes button {
+  padding: 8px 12px;
+  border: 0;
+  background: none;
+  color: var(--ink-3);
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+}
+
+.modes button[aria-selected='true'] {
+  color: var(--ink);
+  font-weight: 600;
+  box-shadow: inset 0 -2px 0 var(--place);
+}
+
+.viewport {
+  display: grid;
+  justify-items: center;
+  align-content: start;
+  gap: 10px;
+  min-height: 12rem;
+  padding: 16px;
+  border: 1px solid var(--line);
+  border-radius: 16px;
+  background:
+    linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 100%);
+}
+
+.viewport:has(.moment) {
+  min-height: 0;
+  padding: 28px 20px;
+}
+
+.shot,
+.film {
+  display: block;
+  max-width: 100%;
+  max-height: var(--look-h);
+  object-fit: contain;
+  border-radius: 12px;
+  background: #fff;
+  box-shadow: var(--shadow-raised);
+}
+
+.film {
+  /* Phone clips stay phone-shaped. A wide clip uses the width of the plate. --ar is width / height, set once the file is known. */
+  --ar: 0.462;
+  width: min(100%, calc(var(--look-h) * var(--ar)));
+  height: auto;
+  background: #0e1216;
+}
+
+.shotFrame {
+  position: relative;
+  display: inline-block;
+  max-width: 100%;
+  line-height: 0;
+}
+
+.mark {
+  position: absolute;
+  width: 28px;
+  height: 28px;
+  margin: -14px 0 0 -14px;
+  border: 2px solid #fff;
+  border-radius: 50%;
+  background: color-mix(in srgb, var(--place) 72%, transparent);
+  box-shadow:
+    0 0 0 7px color-mix(in srgb, var(--place) 28%, transparent),
+    var(--shadow-raised);
+  pointer-events: none;
+}
+
+.caption {
+  margin: 0;
+  color: var(--ink-2);
+  font-size: 0.8125rem;
+  text-align: center;
+}
+
+.caption[data-status='failed'] {
+  color: var(--failed-ink);
+  font-weight: 600;
+}
+
+.moment {
+  width: min(100%, 36rem);
+  margin: 0;
+  padding: 20px 22px;
+  border-radius: 12px;
+  background: var(--bg);
+  box-shadow: var(--shadow-raised);
+}
+
+.moment p {
+  margin: 0 0 6px;
+  color: var(--ink-3);
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+}
+
+.moment h3 {
+  margin: 0;
+  font-size: 1.25rem;
+  font-weight: 650;
+  letter-spacing: -0.01em;
+  line-height: 1.3;
+}
+
+.story {
+  display: grid;
+  justify-items: center;
+  gap: 10px;
+  width: 100%;
+  margin: 0;
+}
+
+.storyCaption {
+  display: grid;
+  justify-items: center;
+  gap: 2px;
+  margin: 0;
+  text-align: center;
+}
+
+.storyCaption span {
+  color: var(--ink-3);
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.storyCaption strong {
+  color: var(--ink);
+  font-size: 1rem;
+  font-weight: 650;
+  letter-spacing: -0.01em;
+}
+
+.storyCaption[data-status='failed'] strong {
+  color: var(--failed-ink);
+}
+
+.moment[data-status='failed'] h3 {
+  color: var(--failed-ink);
+}
+
+.body {
+  width: 100%;
+  min-width: 0;
+}
+
+.transport {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+}
+
+.control {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 2rem;
+  padding: 0 12px;
+  border: 1px solid var(--line-2);
+  border-radius: var(--pill);
+  background: var(--bg);
+  color: var(--ink);
+  font-size: 0.8125rem;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.stepper {
+  width: 2rem;
+  padding: 0;
+}
+
+.back {
+  transform: rotate(180deg);
+}
+
+.control:hover:enabled {
+  background: var(--bg-2);
+}
+
+.control:disabled {
+  opacity: 0.45;
+  cursor: default;
+}
+
+.scrub {
+  flex: 1;
+  min-width: 8rem;
+  accent-color: var(--place);
+}
+
+.position {
+  color: var(--ink-3);
+  font-size: 0.8125rem;
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+}
+
+.strip,
+.chapters {
+  display: flex;
+  gap: 8px;
+  margin: 0;
+  padding: 2px;
+  overflow-x: auto;
+  list-style: none;
+  scroll-snap-type: x mandatory;
+}
+
+.strip button,
+.chapters button {
+  flex: none;
+  padding: 0;
+  border: 2px solid transparent;
+  border-radius: 10px;
+  background: var(--bg);
+  cursor: pointer;
+  scroll-snap-align: start;
+}
+
+.strip button {
+  width: 76px;
+  overflow: hidden;
+}
+
+.strip button[aria-current='true'],
+.chapters button[aria-current='true'] {
+  border-color: var(--place);
+}
+
+.strip img {
+  display: block;
+  width: 100%;
+  height: 96px;
+  object-fit: contain;
+  background: var(--bg-2);
+}
+
+.chip {
+  display: block;
+  height: 64px;
+  padding: 8px;
+  overflow: hidden;
+  color: var(--ink-2);
+  font-size: 0.6875rem;
+  font-weight: 600;
+  line-height: 1.3;
+  text-align: left;
+}
+
+.chapters button {
+  max-width: 16rem;
+  padding: 6px 10px;
+  border-width: 1px;
+  border-color: var(--line-2);
+  border-radius: var(--pill);
+  color: var(--ink-2);
+  font-size: 0.75rem;
+  text-align: left;
+}
+
+.chapters button:hover {
+  background: var(--bg-2);
+}
+
+.notice,
+.quiet {
+  margin: 0;
+  color: var(--ink-3);
+  font-size: 0.8125rem;
+}
+
+.empty {
+  width: min(100%, 20rem);
+}

package/packages/visualizer/src/reachable.test.ts

@@ -5,7 +5,7 @@ import { expect, it } from 'bun:test';
 
 const SRC = path.dirname(fileURLToPath(import.meta.url));
 const ENTRY = path.join(SRC, 'main.tsx');
-const SPECIFIER = /(?:\bfrom\s*|\bimport\s*\(?\s*|@import\s+(?:url\(\s*)?|\burl\(\s*)['"]([^'"]+)['"]/g;
+const SPECIFIER = /(?:\bfrom\s*|\bimport\s*\(?\s*|@import\s+(?:url\(\s*)?|\burl\(\s*|new URL\(\s*)['"]([^'"]+)['"]/g;
 const SUFFIXES = ['', '.ts', '.tsx', '.css', '/index.ts', '/index.tsx'];
 
 function filesUnder(dir: string): string[] {

package/packages/visualizer/src/views/SidePanel.tsx

@@ -5,8 +5,10 @@ import type { ReactNode } from 'react';
 import { statusNote, type AtlasView, type StateView, type TransitionView } from '../data/model';
 import { ChevronIcon } from '../components/icons';
 import { KIND_LABEL } from '../components/labels';
-import { ScreenImage, placeholderReason } from '../components/Screen';
+import { ScreenImage } from '../components/Screen';
 import { StatusBadge, StatusDot } from '../components/Status';
+import { eventLooks, journeyLooks, stateLooks } from '../looks/collect';
+import { Stage } from '../looks/Stage';
 import { mapScope } from '../layout/graph';
 import type { MapSelection } from '../map/ChartMap';
 import styles from './views.module.css';
@@ -87,9 +89,8 @@ function Questions({ view, ids }: { view: AtlasView; ids: string[] }) {
 function ScreenDetails({ view, state }: { view: AtlasView; state: StateView }) {
   const checks = state.result?.checks.length ? state.result.checks : state.specChecks.map((check) => ({ check, passed: null as boolean | null, expected: undefined, actual: undefined }));
   const note = statusNote(state.status);
-  const picture = placeholderReason(state.status, state.result?.screenshot ?? null);
-  const showPictureCaption = picture !== 'not-run' && picture !== 'not-reached';
   const events = state.result?.businessEvents;
+  const screen = state.kind === 'screen' || state.kind === 'final';
   const incoming = state.incoming.map((id) => view.transitions.get(id)).filter((t): t is TransitionView => Boolean(t) && !t!.carriedBy);
   const outgoing = state.outgoing.map((id) => view.transitions.get(id)).filter((t): t is TransitionView => Boolean(t));
   return (
@@ -101,24 +102,30 @@ function ScreenDetails({ view, state }: { view: AtlasView; state: StateView }) {
       </div>
       {state.description && <p className={styles.lead}>{state.description}</p>}
       {note && <p className={styles.statusNote}>{note}</p>}
-      <div className={styles.plateSplit}>
-        {(state.kind === 'screen' || state.kind === 'final') && (
-          <div className={styles.bigShot}>
-            <ScreenImage key={state.name} state={state} size="full" description={false} lines={state.hints.length > 0} caption={showPictureCaption} />
-          </div>
-        )}
-        <div>
-          <h3 className={styles.sectionTitle}>Where they go next</h3>
-          {outgoing.length > 0 ? (
-            <div className={styles.eventList}>
-              {outgoing.map((transition) => (
-                <EventLink key={transition.id} t={transition} view={view} direction="out" />
-              ))}
+      <Stage
+        looks={stateLooks(state)}
+        prefer="pictures"
+        empty={
+          screen ? (
+            <div className={styles.bigShot}>
+              <ScreenImage key={state.name} state={state} size="full" description={false} lines={state.hints.length > 0} />
             </div>
           ) : (
-            <p className={styles.lead}>{state.deadEnd ? `This is where the journey stops: ${state.deadEnd}` : 'Nothing leaves this screen.'}</p>
-          )}
-        </div>
+            <p className={styles.lead}>This part of the chart has no screen of its own.</p>
+          )
+        }
+      />
+      <div>
+        <h3 className={styles.sectionTitle}>Where they go next</h3>
+        {outgoing.length > 0 ? (
+          <div className={styles.eventList}>
+            {outgoing.map((transition) => (
+              <EventLink key={transition.id} t={transition} view={view} direction="out" />
+            ))}
+          </div>
+        ) : (
+          <p className={styles.lead}>{state.deadEnd ? `This is where the journey stops: ${state.deadEnd}` : 'Nothing leaves this screen.'}</p>
+        )}
       </div>
       {checks.length > 0 && (
         <Section title="What should be on the screen">
@@ -213,21 +220,6 @@ function ScreenDetails({ view, state }: { view: AtlasView; state: StateView }) {
   );
 }
 
-/** The run's recording of the event, with the steps it took as captions when the run wrote them. */
-function Clip({ t }: { t: TransitionView }) {
-  const clip = t.result?.clip;
-  if (!clip || clip.state === 'missing') return null;
-  if (clip.state === 'processing' || !clip.src) return <p className={styles.clipPending}>The video of this event is still processing.</p>;
-  return (
-    <figure className={styles.clip}>
-      <video key={clip.src} className={styles.video} src={clip.src} poster={clip.poster ?? undefined} controls preload="metadata" playsInline>
-        {clip.captions && <track kind="captions" src={clip.captions} srcLang="en" label="Steps" default />}
-      </video>
-      <figcaption>What the run did{clip.captions ? ', step by step in the captions' : ''}.</figcaption>
-    </figure>
-  );
-}
-
 function EventDetails({ view, t }: { view: AtlasView; t: TransitionView }) {
   const from = view.states.get(t.source);
   const to = t.target ? view.states.get(t.target) : undefined;
@@ -243,21 +235,12 @@ function EventDetails({ view, t }: { view: AtlasView; t: TransitionView }) {
         From <strong>{from?.name ?? t.source}</strong> to <strong>{to?.name ?? 'a screen not in the spec'}</strong>.
       </p>
       {note && <p className={styles.statusNote}>{note}</p>}
-      <Clip t={t} />
-      <div className={styles.beforeAfter}>
-        {from && (
-          <figure>
-            <ScreenImage state={from} size="full" />
-            <figcaption>Before: {from.name}</figcaption>
-          </figure>
-        )}
-        {to && (
-          <figure>
-            <ScreenImage state={to} size="full" />
-            <figcaption>After: {to.name}</figcaption>
-          </figure>
-        )}
-      </div>
+      <Stage
+        looks={eventLooks(view, t)}
+        prefer="film"
+        notice={t.result?.clip.state === 'processing' ? 'The video of this event is still processing.' : null}
+        empty={<p className={styles.lead}>This event has no picture, video, or timeline in this run.</p>}
+      />
       <Questions view={view} ids={t.questionIds} />
       <Developer
         rows={[
@@ -270,6 +253,12 @@ function EventDetails({ view, t }: { view: AtlasView; t: TransitionView }) {
   );
 }
 
+function JourneyLooks({ view, journeyId }: { view: AtlasView; journeyId: string }) {
+  const looks = journeyLooks(view, journeyId);
+  if (looks.pictures.length === 0 && looks.films.length === 0 && !looks.moments.some((moment) => moment.thumb)) return null;
+  return <Stage looks={looks} prefer="timeline" />;
+}
+
 function JourneyDetails({ view, journeyId, chartId }: { view: AtlasView; journeyId: string; chartId: string }) {
   const j = view.journeys.find((x) => x.id === journeyId);
   if (!j) return <p className={styles.lead}>This journey isn’t in the spec.</p>;
@@ -281,6 +270,7 @@ function JourneyDetails({ view, journeyId, chartId }: { view: AtlasView; journey
       </div>
       {j.description && <p className={styles.lead}>{j.description}</p>}
       {!j.replay.ok && <p className={styles.warn}>The chart can’t follow this journey past “{j.replay.failedAt ?? j.replay.missingEnds.join(', ')}”.</p>}
+      <JourneyLooks view={view} journeyId={j.id} />
       <ol className={styles.steps}>
         {j.steps.map((step, i) => {
           const t = view.transitions.get(step.transitionIds[0] ?? '');