@crvouga/atlas 0.0.0-stage → 0.2.0

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

@@ -0,0 +1,69 @@
+import { checkHistory, type CheckSlot, type HistoryEntry } from '@crvouga/atlas/reports/evidence-view';
+import { useQuery } from '@tanstack/react-query';
+import { useMemo } from 'react';
+
+import { reportText } from './api';
+import { useRecordedReport } from './check-detail';
+import { useEvidence } from './evidence-context';
+import styles from './evidence.module.css';
+import { duration, statusWord, useNow } from './format';
+import { Origin, StatusMark } from './marks';
+import { Timeline } from './recording';
+
+type Props = {
+  /** The check whose recording is open, once the combined report holds it. */
+  slot: CheckSlot | undefined;
+  layerId: string | undefined;
+  label: string;
+  back: string;
+  moment: number | null;
+  onMoment: (moment: number, replace: boolean) => void;
+  onClose: () => void;
+};
+
+/** 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();
+  const now = useNow();
+  const history = useMemo(() => (slot ? checkHistory(evidence, slot.specPath, slot.id) : []), [evidence, slot]);
+  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 waiting = !chosen && !unavailable && (!ready || pending > 0);
+  return (
+    <article className={styles.page} data-wide="true" aria-label="Recorded test">
+      <button type="button" className={styles.back} onClick={onClose}>
+        <span aria-hidden="true">←</span> {back}
+      </button>
+      <header className={styles.specHead}>
+        <h1 className={styles.title}>{label}</h1>
+        {chosen && (
+          <p className={styles.detailMeta}>
+            <StatusMark status={chosen.row.status} />
+            <strong data-status={chosen.row.status}>{statusWord(chosen.row.status)}</strong>
+            {chosen.row.durationMs !== null && <span>{duration(chosen.row.durationMs)}</span>}
+            <Origin layer={chosen.layer} backends={backends} now={now} />
+          </p>
+        )}
+      </header>
+      {waiting && <p className={styles.aside} role="status">Loading the recording…</p>}
+      {!chosen && !waiting && <p className={styles.notice}>{unavailable ?? 'This result is not in the combined report any more. A newer run may have replaced it, or its source is switched off.'}</p>}
+      {chosen && !paths && <p className={styles.notice}>This result has an outcome and no recorded timeline.</p>}
+      {report.isLoading && <p className={styles.aside} role="status">Loading the recording…</p>}
+      {report.isError && (
+        <p className={styles.notice} role="alert">
+          The recording could not be read. {report.error.message}{' '}
+          <button type="button" className={styles.link} onClick={() => void report.refetch()}>Try again</button>
+        </p>
+      )}
+      {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>
+        </p>
+      )}
+      {report.data && paths && <Timeline report={report.data} fileUrl={paths.file} css={css.data ?? ''} moment={moment} onMoment={onMoment} />}
+    </article>
+  );
+}

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

@@ -0,0 +1,464 @@
+.recording {
+  display: grid;
+  gap: 14px;
+}
+
+.quietLine {
+  margin: 0;
+  color: var(--ink-3);
+  font-size: 0.8125rem;
+}
+
+.link {
+  padding: 0;
+  border: 0;
+  background: none;
+  color: var(--place);
+  font-weight: 500;
+  cursor: pointer;
+}
+
+.error,
+.pre {
+  margin: 0;
+  padding: 10px 12px;
+  border-radius: 8px;
+  overflow: auto;
+  max-height: 18rem;
+  font-size: 0.75rem;
+  line-height: 1.5;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.error {
+  border-left: 3px solid var(--failed);
+  background: var(--failed-soft);
+  color: var(--failed-ink);
+  font-family: var(--mono);
+}
+
+.error summary {
+  margin-top: 6px;
+  font-family: var(--font);
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.pre {
+  background: var(--bg-2);
+}
+
+.tabs {
+  display: flex;
+  gap: 4px;
+  border-bottom: 1px solid var(--line);
+}
+
+.tabs button {
+  padding: 8px 12px;
+  border: 0;
+  background: none;
+  color: var(--ink-3);
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+}
+
+.tabs button[aria-selected='true'] {
+  color: var(--ink);
+  font-weight: 600;
+  box-shadow: inset 0 -2px 0 var(--place);
+}
+
+.split {
+  display: grid;
+  grid-template-columns: minmax(15rem, 22rem) minmax(0, 1fr);
+  gap: 28px;
+  align-items: start;
+}
+
+.steps,
+.timing {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.steps {
+  position: sticky;
+  top: 0;
+  max-height: calc(100vh - 13rem);
+  overflow: auto;
+}
+
+.steps button,
+.timing button {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 6px 8px;
+  border: 0;
+  border-radius: 6px;
+  background: none;
+  font-size: 0.8125rem;
+  text-align: left;
+  cursor: pointer;
+}
+
+.steps button:hover:enabled,
+.timing button:hover:enabled {
+  background: var(--bg-2);
+}
+
+/* A step that captured no moment has nothing to open. */
+.steps button:disabled,
+.timing button:disabled {
+  color: var(--ink-3);
+  cursor: default;
+}
+
+.steps button[data-status='failed'] {
+  color: var(--failed-ink);
+  font-weight: 600;
+}
+
+.steps button[aria-current='step'] {
+  background: var(--place-soft);
+  color: var(--ink);
+  font-weight: 600;
+}
+
+.stepTitle {
+  flex: 1;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.stepTime {
+  flex: none;
+  color: var(--faint);
+  font-size: 0.75rem;
+  font-weight: 400;
+  font-variant-numeric: tabular-nums;
+}
+
+.stage {
+  display: grid;
+  gap: 12px;
+  min-width: 0;
+}
+
+.transport {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+}
+
+.control,
+.actor select {
+  height: 2rem;
+  padding: 0 12px;
+  border: 1px solid var(--line-2);
+  border-radius: var(--pill);
+  background: var(--bg);
+  font-size: 0.8125rem;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.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;
+}
+
+.momentTitle {
+  margin: 6px 0 0;
+  font-size: 1.125rem;
+  font-weight: 600;
+  line-height: 1.3;
+}
+
+.momentTitle[data-status='failed'] {
+  color: var(--failed-ink);
+}
+
+.observed {
+  padding: 10px 12px;
+  border-radius: 8px;
+  background: var(--bg-2);
+  overflow: auto;
+  font-size: 0.8125rem;
+}
+
+.pictures {
+  display: flex;
+  flex-wrap: wrap;
+  align-content: flex-start;
+  gap: 20px;
+  height: 29rem;
+  overflow: auto;
+  scrollbar-gutter: stable;
+}
+
+.snapshot {
+  flex: 0 0 270px;
+  width: 270px;
+  margin: 0;
+  min-width: 0;
+}
+
+.snapshot[data-picture] { min-height: 14rem; }
+
+.snapshot:not([data-picture]) {
+  padding: 10px 12px;
+  border-radius: 8px;
+  background: var(--bg-2);
+  overflow: auto;
+  font-size: 0.8125rem;
+}
+
+.snapshot figcaption {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0 8px;
+  margin-bottom: 6px;
+  color: var(--ink-3);
+  font-size: 0.8125rem;
+}
+
+.snapshot figcaption strong {
+  color: var(--ink);
+}
+
+.earlier {
+  color: var(--flaky-ink);
+}
+
+.phone {
+  border: 1px solid var(--line-2);
+  border-radius: 20px;
+  overflow: hidden;
+  background: #fff;
+}
+
+
+.image {
+  display: block;
+  width: 100%;
+  height: 13rem;
+  object-fit: contain;
+  aspect-ratio: 9 / 16;
+  background: #fff;
+  max-width: 100%;
+  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%); }
+}
+
+.data {
+  margin: 0;
+}
+
+.data > div {
+  display: grid;
+  grid-template-columns: minmax(6rem, max-content) minmax(0, 1fr);
+  gap: 0 12px;
+  padding: 2px 0;
+}
+
+.data dt {
+  color: var(--ink-3);
+}
+
+.data dd {
+  margin: 0;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.data summary {
+  color: var(--ink-3);
+  cursor: pointer;
+}
+
+/* Timing */
+
+.timing li + li {
+  border-top: 1px solid var(--line);
+}
+
+.timing button {
+  border-radius: 0;
+}
+
+.bar {
+  flex: none;
+  width: 9rem;
+  height: 6px;
+  border-radius: var(--pill);
+  background: var(--unrun);
+  overflow: hidden;
+}
+
+.bar span {
+  display: block;
+  height: 100%;
+  border-radius: var(--pill);
+  background: var(--not-reached);
+}
+
+.timing li[data-band='warm'] .bar span {
+  background: var(--ink-3);
+}
+
+.timing li[data-band='slow'] .bar span {
+  background: var(--flaky);
+}
+
+.timing .stepTime {
+  width: 6rem;
+  text-align: right;
+}
+
+.slow {
+  flex: none;
+  padding: 0 6px;
+  border-radius: 4px;
+  background: var(--flaky-soft);
+  color: var(--flaky-ink);
+  font-size: 0.6875rem;
+  font-weight: 600;
+}
+
+/* Model trace */
+
+.trace {
+  display: grid;
+  grid-template-columns: minmax(10rem, 16rem) minmax(0, 1fr);
+  gap: 16px;
+  align-items: start;
+}
+
+.traceStates {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  max-height: 24rem;
+  overflow: auto;
+}
+
+.traceStates button {
+  display: flex;
+  gap: 8px;
+  width: 100%;
+  padding: 5px 8px;
+  border: 0;
+  border-radius: 6px;
+  background: none;
+  font-size: 0.8125rem;
+  text-align: left;
+  cursor: pointer;
+  overflow-wrap: anywhere;
+}
+
+.traceStates button:hover {
+  background: var(--bg-2);
+}
+
+.traceStates button[aria-pressed='true'] {
+  background: var(--place-soft);
+  font-weight: 600;
+}
+
+.traceNo {
+  flex: none;
+  width: 1.5rem;
+  color: var(--ink-3);
+  font-variant-numeric: tabular-nums;
+}
+
+.tableScroll {
+  overflow-x: auto;
+}
+
+.traceTable {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.8125rem;
+}
+
+.traceTable th,
+.traceTable td {
+  padding: 6px 10px;
+  border-bottom: 1px solid var(--line);
+  text-align: left;
+  vertical-align: top;
+}
+
+.traceTable thead th {
+  color: var(--ink-3);
+  font-size: 0.75rem;
+  font-weight: 600;
+}
+
+.traceTable tbody th {
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+.traceTable pre {
+  margin: 0;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.traceTable tr[data-changed] td:last-child {
+  background: var(--place-soft);
+}
+
+.changed {
+  display: block;
+  color: var(--place);
+  font-size: 0.6875rem;
+  font-weight: 600;
+}
+
+@media (max-width: 800px) {
+  .split,
+  .trace {
+    grid-template-columns: 1fr;
+  }
+
+  .steps {
+    position: static;
+    max-height: 16rem;
+  }
+
+  .bar {
+    width: 4rem;
+  }
+}