@crvouga/atlas 0.2.0 → 0.4.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/state/ui-store.ts

@@ -11,7 +11,7 @@ type UiState = {
   issuesOpen: boolean;
   sourcesOpen: boolean;
   resultFilter: ResultFilter;
-  /** Backends, branches and layers left out of the combined report. */
+  /** Backends, branches, versions, environments and layers left out of the combined report. */
   excluded: SourceSelection;
   saveViewport: (chartId: string, viewport: Viewport) => void;
   setIssuesOpen: (open: boolean) => void;
@@ -38,7 +38,11 @@ export const useUiStore = create<UiState>()(
     {
       name: 'atlas-ui',
       storage: createJSONStorage(() => sessionStorage),
-      partialize: (s) => ({ viewports: s.viewports, excluded: s.excluded, resultFilter: s.resultFilter })
+      partialize: (s) => ({ viewports: s.viewports, excluded: s.excluded, resultFilter: s.resultFilter }),
+      merge: (persisted, current) => {
+        const saved = (persisted ?? {}) as Partial<UiState>;
+        return { ...current, ...saved, excluded: { ...ALL_SOURCES, ...saved.excluded } };
+      }
     }
   )
 );