@crvouga/atlas 0.1.0 → 0.3.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/spec-index.tsx

@@ -2,7 +2,6 @@ import { addSummaries, NO_EVIDENCE, type SpecSummary } from '@crvouga/atlas/repo
 import { Link, useSearch } from '@tanstack/react-router';
 import { useMemo } from 'react';
 
-import { useSearchQuery } from '../app/search-query';
 import { folderOf, outlinePath, specFile, type SpecKind } from '../spec-kind';
 import { useUiStore, type ResultFilter } from '../state/ui-store';
 import { useEvidence } from './evidence-context';
@@ -16,15 +15,9 @@ const FILTERS: readonly { readonly id: ResultFilter; readonly label: string; rea
   { id: 'none', label: 'None', keeps: (summary) => summary.status === 'none' }
 ];
 
-function hit(query: string, text: string) {
-  const needle = query.trim().toLowerCase();
-  return needle.length === 0 || text.toLowerCase().includes(needle);
-}
-
 /** Every spec of one kind, grouped by folder, each with what the combined report holds for it. */
 export function SpecIndex({ kind }: { kind: SpecKind }) {
   const evidence = useEvidence();
-  const { query } = useSearchQuery();
   const search = useSearch({ strict: false });
   const filter = useUiStore((s) => s.resultFilter);
   const setFilter = useUiStore((s) => s.setResultFilter);
@@ -34,9 +27,8 @@ export function SpecIndex({ kind }: { kind: SpecKind }) {
     // `titleOf` reads the outline the view was built from.
     [evidence.files, evidence.view, kind]
   );
-  const searched = rows.filter((row) => hit(query, `${row.title} ${row.file}`));
   const keeps = FILTERS.find((entry) => entry.id === filter)!.keeps;
-  const visible = searched.filter((row) => keeps(row.summary));
+  const visible = rows.filter((row) => keeps(row.summary));
   const groups = useMemo(() => {
     const byFolder = new Map<string, typeof visible>();
     for (const row of visible) byFolder.set(folderOf(row.file), [...(byFolder.get(folderOf(row.file)) ?? []), row]);
@@ -47,7 +39,7 @@ export function SpecIndex({ kind }: { kind: SpecKind }) {
       <div className={styles.filters} role="group" aria-label="Show">
         {FILTERS.map((entry) => (
           <button key={entry.id} type="button" aria-pressed={filter === entry.id} onClick={() => setFilter(entry.id)}>
-            {entry.label} <span>{searched.filter((row) => entry.keeps(row.summary)).length}</span>
+            {entry.label} <span>{rows.filter((row) => entry.keeps(row.summary)).length}</span>
           </button>
         ))}
       </div>
@@ -55,7 +47,7 @@ export function SpecIndex({ kind }: { kind: SpecKind }) {
       {evidence.filesError && <p className={styles.indexNote}>The file list could not be loaded.</p>}
       {!evidence.filesPending && !evidence.filesError && visible.length === 0 && (
         <p className={styles.indexNote}>
-          {rows.length === 0 ? `No ${kind.many} in this spec set.` : query.trim() ? 'Nothing matches.' : filter === 'failed' ? `No failing ${kind.many}.` : filter === 'results' ? `No ${kind.many} with results yet.` : `Every ${kind.one} has results.`}
+          {rows.length === 0 ? `No ${kind.many} in this spec set.` : filter === 'failed' ? `No failing ${kind.many}.` : filter === 'results' ? `No ${kind.many} with results yet.` : `Every ${kind.one} has results.`}
         </p>
       )}
       {groups.map(([folder, entries]) => (

package/packages/visualizer/src/find/Finder.module.css

@@ -0,0 +1,168 @@
+.overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 40;
+  background: rgba(15, 20, 25, 0.28);
+}
+
+.content {
+  position: fixed;
+  z-index: 41;
+  top: 12vh;
+  left: 50%;
+  width: min(40rem, calc(100vw - 1.5rem));
+  transform: translateX(-50%);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-lg);
+  background: var(--bg);
+  box-shadow: var(--shadow-pop);
+  overflow: hidden;
+}
+
+.command {
+  display: flex;
+  flex-direction: column;
+  max-height: min(32rem, 70vh);
+}
+
+.input {
+  width: 100%;
+  height: 3.25rem;
+  padding: 0 1rem;
+  border: 0;
+  border-bottom: 1px solid var(--line);
+  background: transparent;
+  font-size: 1rem;
+}
+
+.input:focus {
+  outline: none;
+}
+
+.list {
+  min-height: 0;
+  overflow: auto;
+  padding: 0.35rem;
+}
+
+.empty {
+  margin: 0;
+  padding: 1.25rem 0.75rem;
+  color: var(--ink-3);
+}
+
+.item {
+  display: flex;
+  align-items: center;
+  gap: 0.65rem;
+  width: 100%;
+  padding: 0.45rem 0.6rem;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+}
+
+.item[data-selected='true'] {
+  background: var(--place-soft);
+}
+
+.text {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  flex: 1;
+}
+
+.title {
+  overflow: hidden;
+  color: var(--ink);
+  font-weight: 600;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.snippet {
+  overflow: hidden;
+  color: var(--ink-3);
+  font-size: 0.8125rem;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.meta {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex: none;
+  max-width: 45%;
+  color: var(--ink-3);
+  font-size: 0.75rem;
+}
+
+.subtitle {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.kind {
+  flex: none;
+  font-weight: 600;
+}
+
+.footer {
+  display: flex;
+  gap: 1rem;
+  padding: 0.45rem 0.9rem;
+  border-top: 1px solid var(--line);
+  color: var(--ink-3);
+  font-size: 0.75rem;
+}
+
+.help {
+  position: fixed;
+  z-index: 42;
+  top: 18vh;
+  left: 50%;
+  width: min(26rem, calc(100vw - 1.5rem));
+  transform: translateX(-50%);
+  padding: 1.25rem 1.35rem 1rem;
+  border: 1px solid var(--line);
+  border-radius: var(--radius-lg);
+  background: var(--bg);
+  box-shadow: var(--shadow-pop);
+}
+
+.help h2 {
+  margin: 0 0 0.75rem;
+  font-size: 1rem;
+}
+
+.help ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.help li {
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 0.35rem 0;
+  border-top: 1px solid var(--line);
+}
+
+.help kbd {
+  color: var(--ink);
+  font-family: var(--font);
+  font-weight: 600;
+}
+
+.help button {
+  margin-top: 0.85rem;
+  padding: 0.35rem 0.8rem;
+  border: 1px solid var(--line-2);
+  border-radius: var(--pill);
+  background: var(--bg);
+  font-weight: 600;
+  cursor: pointer;
+}