@crvouga/atlas 0.10.2 → 0.12.0

package/packages/visualizer/src/evidence/snapshot.tsx

@@ -1,16 +1,13 @@
 import { PHONE_H, PHONE_W } from '@crvouga/atlas/reports/phone';
 import type { ReportSnapshotBlob, ReportStepHit } from '@crvouga/atlas/reports/report-types';
 import { createSnapshotHost, paintSnapshotHost, type HitResult } from '@crvouga/atlas/reports/snapshot-surface';
+import { Accordion, Anchor, Box, Button, Code, Image, Stack, Text } from '@mantine/core';
 import { useQuery } from '@tanstack/react-query';
 import { useEffect, useRef, useState } from 'react';
-
 import { reportAssetUrl, reportResponse } from './api';
-import styles from './recording.module.css';
-import { traceStates } from './quint';
 import { ModelTrace } from './model-trace';
-
+import { traceStates } from './quint';
 const SCALE = 0.72;
-
 async function readBlob(url: string, blob: ReportSnapshotBlob, signal: AbortSignal) {
   const response = await reportResponse(url, signal);
   if (blob.media !== 'png' && blob.media !== 'bytes') return response.text();
@@ -19,12 +16,23 @@ async function readBlob(url: string, blob: ReportSnapshotBlob, signal: AbortSign
   for (let i = 0; i < bytes.length; i += 32768) binary += String.fromCharCode(...bytes.subarray(i, i + 32768));
   return `data:${response.headers.get('content-type') ?? 'application/octet-stream'};base64,${btoa(binary)}`;
 }
-
 /**
  * A captured page, placed in this page as it was recorded. It sits in a shadow tree so its
  * stylesheet and the viewer's never restyle each other; there is no frame to load.
  */
-export function SnapshotPicture({ file, html, css, hit, who }: { file: string; html: string; css: string; hit: ReportStepHit | null; who: string }) {
+export function SnapshotPicture({
+  file,
+  html,
+  css,
+  hit,
+  who
+}: {
+  file: string;
+  html: string;
+  css: string;
+  hit: ReportStepHit | null;
+  who: string;
+}) {
   const frame = useRef<HTMLDivElement>(null);
   const [found, setFound] = useState<HitResult>('none');
   useEffect(() => {
@@ -37,73 +45,121 @@ export function SnapshotPicture({ file, html, css, hit, who }: { file: string; h
   }, [file, html, css, hit]);
   return (
     <>
-      <div ref={frame} className={styles.phone} role="img" aria-label={`Recorded ${who}`} style={{ width: PHONE_W * SCALE, height: PHONE_H * SCALE }} />
-      {found === 'missing' && <p className={styles.quietLine}>The recorded control cannot be found in this picture.</p>}
+      <Stack ref={frame} role="img" aria-label={`Recorded ${who}`} w={PHONE_W * SCALE} h={PHONE_H * SCALE} maw="100%" gap="sm" />
+      {found === 'missing' && (
+        <Text component="div" c="dimmed">
+          The recorded control cannot be found in this picture.
+        </Text>
+      )}
     </>
   );
 }
-
 /** 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), enabled: blob.media !== 'video', retry: false });
+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),
+    enabled: blob.media !== 'video',
+    retry: false
+  });
   const who = blob.nodeId ?? blob.name;
   const picture = blob.media === 'html' || blob.media === 'png' || blob.media === 'video';
   return (
-    <figure className={styles.snapshot} data-picture={picture || undefined}>
-      <figcaption>
-        <strong>{who}</strong>
-        {blob.nodeId && blob.name !== blob.nodeId && <span>{blob.name}</span>}
-        {earlier && <span className={styles.earlier}>Earlier picture</span>}
-      </figcaption>
-      {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>}
+    <Box data-picture={picture || undefined} component="figure" m={0}>
+      <Box component="figcaption">
+        <Text span inherit fw={600}>
+          {who}
+        </Text>
+        {blob.nodeId && blob.name !== blob.nodeId && (
+          <Text span inherit>
+            {blob.name}
+          </Text>
+        )}
+        {earlier && (
+          <Text span inherit>
+            Earlier picture
+          </Text>
+        )}
+      </Box>
+      {blob.media === 'video' && (
+        <Box src={reportAssetUrl(url)} controls playsInline aria-label={`Recorded ${who}`} component="video" maw="100%" w="100%" />
+      )}
+      {blob.media !== 'video' && content.isPending && (
+        <Text role="status" component="div" c="dimmed">
+          Loading…
+        </Text>
+      )}
       {content.isError && (
-        <p role="alert" className={styles.quietLine}>
+        <Text role="alert" component="div" c="dimmed">
           {content.error.message}{' '}
-          <button type="button" className={styles.link} onClick={() => void content.refetch()}>Try again</button>
-        </p>
+          <Button type="button" onClick={() => void content.refetch()} variant="subtle">
+            Try again
+          </Button>
+        </Text>
+      )}
+      {content.data !== undefined && blob.media === 'html' && (
+        <SnapshotPicture file={blob.file} html={content.data} css={css} hit={hit} who={who} />
+      )}
+      {content.data !== undefined && blob.media === 'png' && <Image alt={`Recorded ${who}`} src={content.data} fit="contain" maw="100%" />}
+      {content.data !== undefined && blob.media === 'bytes' && (
+        <Anchor download={blob.file.split('/').at(-1)} href={content.data}>
+          Download captured data
+        </Anchor>
       )}
-      {content.data !== undefined && blob.media === 'html' && <SnapshotPicture file={blob.file} html={content.data} css={css} hit={hit} who={who} />}
-      {content.data !== undefined && blob.media === 'png' && <img className={styles.image} alt={`Recorded ${who}`} src={content.data} />}
-      {content.data !== undefined && blob.media === 'bytes' && <a download={blob.file.split('/').at(-1)} href={content.data}>Download captured data</a>}
       {content.data !== undefined && (blob.media === 'json' || blob.media === 'text') && <SnapshotData text={content.data} />}
-    </figure>
+    </Box>
   );
 }
-
 /** A recorded value: a model trace when it is one, otherwise its fields. */
 export function SnapshotData({ text }: { text: string }) {
   let value: unknown;
   try {
     value = JSON.parse(text);
   } catch {
-    return <pre className={styles.pre}>{text}</pre>;
+    return <Code block>{text}</Code>;
   }
   const states = traceStates(value);
   return states ? <ModelTrace states={states} /> : <DataValue value={value} />;
 }
-
 function DataValue({ value }: { value: unknown }) {
-  if (value === null || typeof value !== 'object') return <code>{JSON.stringify(value)}</code>;
+  if (value === null || typeof value !== 'object') return <Code>{JSON.stringify(value)}</Code>;
   const entries = Object.entries(value);
-  if (!entries.length) return <code>{Array.isArray(value) ? '[]' : '{}'}</code>;
+  if (!entries.length) return <Code>{Array.isArray(value) ? '[]' : '{}'}</Code>;
   return (
-    <dl className={styles.data}>
+    <Box component="dl">
       {entries.map(([key, item]) => (
-        <div key={key}>
-          <dt>{key}</dt>
-          <dd>
+        <Stack key={key} gap="sm">
+          <Box component="dt">{key}</Box>
+          <Box component="dd" m={0}>
             {item !== null && typeof item === 'object' ? (
-              <details>
-                <summary>{Array.isArray(item) ? `${item.length} items` : `${Object.keys(item).length} fields`}</summary>
-                <DataValue value={item} />
-              </details>
+              <Accordion variant="separated" my="sm">
+                <Accordion.Item value="content">
+                  <Accordion.Control>
+                    {Array.isArray(item) ? `${item.length} items` : `${Object.keys(item).length} fields`}
+                  </Accordion.Control>
+                  <Accordion.Panel>
+                    <DataValue value={item} />
+                  </Accordion.Panel>
+                </Accordion.Item>
+              </Accordion>
             ) : (
               <DataValue value={item} />
             )}
-          </dd>
-        </div>
+          </Box>
+        </Stack>
       ))}
-    </dl>
+    </Box>
   );
 }

package/packages/visualizer/src/evidence/source-text.tsx

@@ -0,0 +1,33 @@
+import { CodeHighlightAdapterProvider, CodeHighlightTabs } from '@mantine/code-highlight';
+import { Box, Button, Group, Text, Title } from '@mantine/core';
+import { specHighlightAdapter, specLanguage } from '../ui/highlight';
+
+/** The written specification is primary: complete, expanded and highlighted, with Mantine code controls. */
+export function SourceText({ text, file, withResults = false }: { text: string; file: string; withResults?: boolean }) {
+  return (
+    <Box component="section" data-source aria-label={`Source of ${file}`} mb="lg" miw={0}>
+      <Group justify="space-between" mb="sm">
+        <Title order={2}>Source</Title>
+        {withResults && (
+          <Button
+            variant="subtle"
+            onClick={() => {
+              const results = document.getElementById('spec-results');
+              results?.scrollIntoView({ block: 'start' });
+              results?.focus({ preventScroll: true });
+            }}
+          >
+            Recorded results
+          </Button>
+        )}
+      </Group>
+      {text ? (
+        <CodeHighlightAdapterProvider adapter={specHighlightAdapter}>
+          <CodeHighlightTabs code={[{ fileName: file, code: text, language: specLanguage(file) }]} copyLabel={`Copy ${file}`} />
+        </CodeHighlightAdapterProvider>
+      ) : (
+        <Text c="dimmed">This source file is empty.</Text>
+      )}
+    </Box>
+  );
+}

package/packages/visualizer/src/evidence/sources-panel.tsx

@@ -1,39 +1,39 @@
 import type { LayerHeader } from '@crvouga/atlas/reports/evidence-types';
-import { ALL_SOURCES, branchOf, contributes, sourceFacets, sourceSelection, type SourceFacet, type SourceSelection } from '@crvouga/atlas/reports/evidence-view';
+import {
+  ALL_SOURCES,
+  branchOf,
+  contributes,
+  sourceFacets,
+  sourceSelection,
+  type SourceFacet,
+  type SourceSelection
+} from '@crvouga/atlas/reports/evidence-view';
 import { environmentLabel } from '@crvouga/atlas/reports/layer-axes';
-import * as Dialog from '@radix-ui/react-dialog';
+import { Alert, Button, Checkbox, Drawer, Group, List, Stack, Text, Title } from '@mantine/core';
 import { useMemo } from 'react';
-
-import { CloseIcon } from '../components/icons';
 import { useUiStore } from '../state/ui-store';
 import { useEvidence } from './evidence-context';
-import { ago, exactTime, plural, shortSha, useNow } from './format';
+import { ago, plural, shortSha, useNow } from './format';
 import { Bounded } from './marks';
-import styles from './sources.module.css';
-
 function toggled(list: readonly string[], id: string) {
   return list.includes(id) ? list.filter((entry) => entry !== id) : [...list, id];
 }
-
 function counts(layer: LayerHeader) {
   const { passed, failed, running } = layer.counts;
-  return [failed ? `${failed} failed` : '', passed ? `${passed} passed` : '', running ? `${running} running` : ''].filter(Boolean).join(', ') || 'nothing completed';
+  return (
+    [failed ? `${failed} failed` : '', passed ? `${passed} passed` : '', running ? `${running} running` : ''].filter(Boolean).join(', ') ||
+    'nothing completed'
+  );
 }
-
-/** How many sources are switched off, for the button that opens the panel. */
+/** Number of disabled source facets, including individually excluded layers. */
 export function excludedCount(excluded: Partial<SourceSelection>) {
-  const selection = sourceSelection(excluded);
-  return selection.backends.length + selection.branches.length + selection.versions.length + selection.environments.length + selection.layers.length;
+  const s = sourceSelection(excluded);
+  return s.backends.length + s.branches.length + s.versions.length + s.environments.length + s.layers.length;
 }
-
 function versionLabel(id: string) {
   return id === 'unknown' ? 'Unknown version' : id.slice(0, 7);
 }
-
-/**
- * Where the combined report comes from. Every backend, environment, branch, version and layer
- * contributes unless it is switched off here, which is also how an earlier result is brought back.
- */
+/** Every backend, environment, branch, version and layer contributes unless switched off here. */
 export function SourcesPanel() {
   const evidence = useEvidence();
   const { layers, backends, setExcluded, notices, retry } = evidence;
@@ -45,114 +45,109 @@ export function SourcesPanel() {
   const contributing = layers.filter((layer) => contributes(layer, excluded)).length;
   const layerCount = (id: string) => facets.backends.find((facet) => facet.id === id)?.layers ?? 0;
   return (
-    <Dialog.Root open={open} onOpenChange={setOpen}>
-      <Dialog.Portal>
-        <Dialog.Overlay className={styles.overlay} />
-        <Dialog.Content className={styles.sheet} aria-describedby={undefined}>
-          <div className={styles.head}>
-            <Dialog.Title className={styles.title}>Sources</Dialog.Title>
-            <Dialog.Close className={styles.close} aria-label="Close">
-              <CloseIcon size={16} />
-            </Dialog.Close>
-          </div>
-          <p className={styles.lead}>
-            {contributing} of {plural(layers.length, 'layer', 'layers')} contribute. For each check and environment, the newest completed result is shown. A layer fills only the checks it ran, so the rest of the report stays in place. Switch a source off to see an earlier result.
-          </p>
-          {excludedCount(excluded) > 0 && (
-            <button type="button" className={styles.reset} onClick={() => setExcluded(ALL_SOURCES)}>
-              Use every source
-            </button>
-          )}
-          {notices.map((notice) => (
-            <p key={notice} className={styles.notice} role="status">
-              {notice}{' '}
-              <button type="button" className={styles.link} onClick={retry}>Try again</button>
-            </p>
+    <Drawer opened={open} onClose={() => setOpen(false)} title="Sources" closeButtonProps={{ 'aria-label': 'Close sources' }}>
+      <Stack gap="lg">
+        <Text c="dimmed">
+          {contributing} of {plural(layers.length, 'layer', 'layers')} contribute. For each check and environment, the newest completed
+          result is shown. A layer fills only the checks it ran, so the rest of the report stays in place. Switch a source off to see an
+          earlier result.
+        </Text>
+        {excludedCount(excluded) > 0 && <Button onClick={() => setExcluded(ALL_SOURCES)}>Use every source</Button>}
+        {notices.map((notice) => (
+          <Alert key={notice} role="status">
+            {notice}{' '}
+            <Button variant="subtle" onClick={retry}>
+              Try again
+            </Button>
+          </Alert>
+        ))}
+        <Stack gap="sm">
+          <Title order={3}>Backends</Title>
+          {!backends.length && <Text c="dimmed">No report store is configured.</Text>}
+          {backends.map((backend) => (
+            <Checkbox
+              key={backend.id}
+              label={backend.label}
+              description={backend.available ? plural(layerCount(backend.id), 'layer', 'layers') : 'Unavailable'}
+              checked={!excluded.backends.includes(backend.id)}
+              onChange={() => setExcluded({ ...excluded, backends: toggled(excluded.backends, backend.id) })}
+            />
           ))}
-
-          <section className={styles.group}>
-            <h3>Backends</h3>
-            {backends.length === 0 && <p className={styles.empty}>No report store is configured.</p>}
-            <ul>
-              {backends.map((backend) => (
-                <li key={backend.id}>
-                  <label className={styles.option}>
-                    <input type="checkbox" checked={!excluded.backends.includes(backend.id)} onChange={() => setExcluded({ ...excluded, backends: toggled(excluded.backends, backend.id) })} />
-                    <span className={styles.optionName}>{backend.label}</span>
-                    <span className={styles.optionMeta}>{backend.available ? plural(layerCount(backend.id), 'layer', 'layers') : 'Unavailable'}</span>
-                  </label>
-                </li>
-              ))}
-            </ul>
-          </section>
-
-          <FacetGroup
-            title="Environments"
-            facets={facets.environments.filter((facet) => facets.environments.length > 1 || facet.id !== 'unspecified')}
-            excluded={excluded.environments}
-            label={(id) => environmentLabel(id === 'unspecified' ? null : id)}
-            empty={null}
-            now={now}
-            onToggle={(id) => setExcluded({ ...excluded, environments: toggled(excluded.environments, id) })}
-            onOnly={(id) => setExcluded({ ...excluded, environments: facets.environments.map((facet) => facet.id).filter((facet) => facet !== id) })}
-          />
-
-          <FacetGroup
-            title="Branches"
-            facets={facets.branches}
-            excluded={excluded.branches}
-            label={(id) => id}
-            empty="No layers yet."
-            now={now}
-            onToggle={(id) => setExcluded({ ...excluded, branches: toggled(excluded.branches, id) })}
-            onOnly={(id) => setExcluded({ ...excluded, branches: facets.branches.map((facet) => facet.id).filter((facet) => facet !== id) })}
-          />
-
-          <FacetGroup
-            title="Versions"
-            facets={facets.versions}
-            excluded={excluded.versions}
-            label={versionLabel}
-            empty={null}
-            now={now}
-            onToggle={(id) => setExcluded({ ...excluded, versions: toggled(excluded.versions, id) })}
-            onOnly={(id) => setExcluded({ ...excluded, versions: facets.versions.map((facet) => facet.id).filter((facet) => facet !== id) })}
-          />
-
-          <section className={styles.group}>
-            <h3>Layers</h3>
-            <ul>
-              <Bounded items={layers} size={40} more="Earlier layers">
-                {(layer) => {
-                  const off = !contributes(layer, { ...excluded, layers: [] });
-                  return (
-                    <li key={`${layer.backend}|${layer.id}`}>
-                      <label className={styles.option} data-off={off || undefined}>
-                        <input type="checkbox" disabled={off} checked={!off && !excluded.layers.includes(layer.id)} onChange={() => setExcluded({ ...excluded, layers: toggled(excluded.layers, layer.id) })} />
-                        <span className={styles.optionName}>
-                          {layer.packageDir ?? layer.producer}
-                          <span className={styles.run}>
-                            {layer.live ? 'Running now' : <time title={exactTime(layer.recordedAtMs)}>{ago(layer.recordedAtMs, now)}</time>} · {branchOf(layer)}
-                            {layer.environment && <> · {environmentLabel(layer.environment)}</>}
-                            {shortSha(layer.sha) && <> · <code>{shortSha(layer.sha)}</code></>}
-                            {layer.freshness === 'modified' && ' · local changes'}
-                          </span>
-                        </span>
-                        <span className={styles.optionMeta} data-failed={layer.counts.failed > 0 || undefined}>{counts(layer)}</span>
-                      </label>
-                    </li>
-                  );
-                }}
-              </Bounded>
-            </ul>
-          </section>
-        </Dialog.Content>
-      </Dialog.Portal>
-    </Dialog.Root>
+        </Stack>
+        <FacetGroup
+          title="Environments"
+          facets={facets.environments.filter((facet) => facets.environments.length > 1 || facet.id !== 'unspecified')}
+          excluded={excluded.environments}
+          label={(id) => environmentLabel(id === 'unspecified' ? null : id)}
+          empty={null}
+          now={now}
+          onToggle={(id) => setExcluded({ ...excluded, environments: toggled(excluded.environments, id) })}
+          onOnly={(id) =>
+            setExcluded({ ...excluded, environments: facets.environments.map((facet) => facet.id).filter((facet) => facet !== id) })
+          }
+        />
+        <FacetGroup
+          title="Branches"
+          facets={facets.branches}
+          excluded={excluded.branches}
+          label={(id) => id}
+          empty="No layers yet."
+          now={now}
+          onToggle={(id) => setExcluded({ ...excluded, branches: toggled(excluded.branches, id) })}
+          onOnly={(id) => setExcluded({ ...excluded, branches: facets.branches.map((facet) => facet.id).filter((facet) => facet !== id) })}
+        />
+        <FacetGroup
+          title="Versions"
+          facets={facets.versions}
+          excluded={excluded.versions}
+          label={versionLabel}
+          empty={null}
+          now={now}
+          onToggle={(id) => setExcluded({ ...excluded, versions: toggled(excluded.versions, id) })}
+          onOnly={(id) => setExcluded({ ...excluded, versions: facets.versions.map((facet) => facet.id).filter((facet) => facet !== id) })}
+        />
+        <Stack gap="sm">
+          <Title order={3}>Layers</Title>
+          <List spacing="md" listStyleType="none">
+            <Bounded items={layers} size={40} more="Earlier layers">
+              {(layer) => {
+                const off = !contributes(layer, { ...excluded, layers: [] });
+                return (
+                  <List.Item key={`${layer.backend}|${layer.id}`}>
+                    <Checkbox
+                      disabled={off}
+                      checked={!off && !excluded.layers.includes(layer.id)}
+                      onChange={() => setExcluded({ ...excluded, layers: toggled(excluded.layers, layer.id) })}
+                      label={layer.packageDir ?? layer.producer}
+                      description={
+                        <>
+                          {layer.live ? 'Running now' : ago(layer.recordedAtMs, now)} · {branchOf(layer)}
+                          {layer.environment && ` · ${environmentLabel(layer.environment)}`}
+                          {shortSha(layer.sha) && ` · ${shortSha(layer.sha)}`}
+                          {layer.freshness === 'modified' && ' · local changes'} · {counts(layer)}
+                        </>
+                      }
+                    />
+                  </List.Item>
+                );
+              }}
+            </Bounded>
+          </List>
+        </Stack>
+      </Stack>
+    </Drawer>
   );
 }
-
-function FacetGroup({ title, facets, excluded, label, empty, now, onToggle, onOnly }: {
+function FacetGroup({
+  title,
+  facets,
+  excluded,
+  label,
+  empty,
+  now,
+  onToggle,
+  onOnly
+}: {
   title: string;
   facets: readonly SourceFacet[];
   excluded: readonly string[];
@@ -164,25 +159,24 @@ function FacetGroup({ title, facets, excluded, label, empty, now, onToggle, onOn
 }) {
   if (!facets.length && empty === null) return null;
   return (
-    <section className={styles.group}>
-      <h3>{title}</h3>
-      {facets.length === 0 && <p className={styles.empty}>{empty}</p>}
-      <ul>
-        {facets.map((facet) => (
-          <li key={facet.id}>
-            <label className={styles.option}>
-              <input type="checkbox" checked={!excluded.includes(facet.id)} onChange={() => onToggle(facet.id)} />
-              <span className={styles.optionName} title={facet.id}>{label(facet.id)}</span>
-              <span className={styles.optionMeta}>
-                {plural(facet.layers, 'layer', 'layers')} · {ago(facet.latestAtMs, now)}
-              </span>
-            </label>
-            {facets.length > 1 && (
-              <button type="button" className={styles.only} onClick={() => onOnly(facet.id)}>Only</button>
-            )}
-          </li>
-        ))}
-      </ul>
-    </section>
+    <Stack gap="sm">
+      <Title order={3}>{title}</Title>
+      {!facets.length && <Text c="dimmed">{empty}</Text>}
+      {facets.map((facet) => (
+        <Group key={facet.id} justify="space-between" wrap="nowrap">
+          <Checkbox
+            label={label(facet.id)}
+            description={`${plural(facet.layers, 'layer', 'layers')} · ${ago(facet.latestAtMs, now)}`}
+            checked={!excluded.includes(facet.id)}
+            onChange={() => onToggle(facet.id)}
+          />
+          {facets.length > 1 && (
+            <Button variant="subtle" onClick={() => onOnly(facet.id)}>
+              Only
+            </Button>
+          )}
+        </Group>
+      ))}
+    </Stack>
   );
 }