@crvouga/atlas 0.10.1 → 0.11.0

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

@@ -1,64 +1,95 @@
 import type { SpecEvidence } from '@crvouga/atlas/reports/evidence-view';
+import { Anchor, Box, Code, Container, List, Title } from '@mantine/core';
 import { useMemo } from 'react';
-
 import type { SpecKind } from '../spec-kind';
 import { CheckDetail, ResultRow, type CheckSelection, type SelectCheck } from './check-detail';
-import styles from './evidence.module.css';
 import { Bounded } from './marks';
 import { QUINT_GROUPS, quintOutline } from './quint';
-import { SourceText, SpecHeader } from './spec-header';
-import { SpecSnapshot } from './spec-snapshot';
+import { SpecHeader } from './spec-header';
+import { SourceText } from './source-text';
 import { TestFilter, useRunningFilter } from './test-filter';
-
-type Props = { file: string; text: string; kind: SpecKind; entry: SpecEvidence | undefined; selection: CheckSelection; select: SelectCheck };
-
+type Props = {
+  file: string;
+  text: string;
+  kind: SpecKind;
+  entry: SpecEvidence | undefined;
+  selection: CheckSelection;
+  select: SelectCheck;
+};
 /** A model read as its state and actions, with every trace that was replayed against the app. */
 export function ModelPage({ file, text, kind, entry, selection, select }: Props) {
   const items = useMemo(() => quintOutline(text), [text]);
   const moduleName = items.find((item) => item.kind === 'module')?.name;
-  const slots = useMemo(() => [...(entry?.slots ?? [])].sort((a, b) => a.title.localeCompare(b.title, undefined, { numeric: true })), [entry]);
+  const slots = useMemo(
+    () => [...(entry?.slots ?? [])].sort((a, b) => a.title.localeCompare(b.title, undefined, { numeric: true })),
+    [entry]
+  );
   const runningOnly = useRunningFilter();
-  const visible = slots.filter(slot => !runningOnly || slot.status === 'running');
+  const visible = slots.filter((slot) => !runningOnly || slot.status === 'running');
   const toggle = (id: string) => select({ check: selection.check === id ? null : id, layer: null });
   const label = (title: string) => (moduleName && title.startsWith(`${moduleName} · `) ? title.slice(moduleName.length + 3) : title);
   return (
-    <article className={styles.page}>
+    <Container component="article" size="xl" w="100%" py="xl">
       <SpecHeader title={moduleName ?? file.split('/').at(-1)!} file={file} kind={kind} entry={entry} />
-      <SpecSnapshot title={moduleName ?? file.split('/').at(-1)!} text={text} kind={kind.one} />
-      <TestFilter slots={slots} />
-      {visible.length > 0 && (
-        <section className={styles.block}>
-          <h2 className={styles.blockTitle}>Traces</h2>
-          <ul className={styles.results}>
-            <Bounded items={visible} size={40} more="More traces">
-              {(slot) => (
-                <ResultRow key={slot.key} label={label(slot.title)} slot={slot} open={selection.check === slot.id} onToggle={() => toggle(slot.id)}>
-                  <CheckDetail slot={slot} layerId={selection.check === slot.id ? selection.layer : undefined} select={(patch) => select({ check: slot.id, ...patch })} reads="trace" />
-                </ResultRow>
-              )}
-            </Bounded>
-          </ul>
-        </section>
-      )}
-      {QUINT_GROUPS.map((group) => {
-        const declared = items.filter((item) => item.kind === group.kind);
-        if (!declared.length) return null;
-        return (
-          <section key={group.kind} className={styles.block}>
-            <h2 className={styles.blockTitle}>{group.label}</h2>
-            <ul className={styles.declarations}>
-              {declared.map((item) => (
-                <li key={item.line}>
-                  <a href={`#line-${item.line}`} onClick={(event) => { event.preventDefault(); const line = document.getElementById(`line-${item.line}`); line?.closest('details')?.setAttribute('open', ''); line?.scrollIntoView({ block: 'center' }); }}>
-                    <code>{item.text}</code>
-                  </a>
-                </li>
-              ))}
-            </ul>
-          </section>
-        );
-      })}
-      <SourceText text={text} label="Model source" open={items.length === 0} />
-    </article>
+      <SourceText text={text} file={file} withResults />
+      <Box component="section" id="spec-results" aria-label="Recorded results" tabIndex={-1}>
+        <TestFilter slots={slots} />
+        {visible.length > 0 && (
+          <Box component="section" mb="lg">
+            <Title order={2} mb="sm">
+              Traces
+            </Title>
+            <List spacing="xs" listStyleType="none">
+              <Bounded items={visible} size={40} more="More traces">
+                {(slot) => (
+                  <ResultRow
+                    key={slot.key}
+                    label={label(slot.title)}
+                    slot={slot}
+                    open={selection.check === slot.id}
+                    onToggle={() => toggle(slot.id)}
+                  >
+                    <CheckDetail
+                      slot={slot}
+                      layerId={selection.check === slot.id ? selection.layer : undefined}
+                      select={(patch) => select({ check: slot.id, ...patch })}
+                      reads="trace"
+                    />
+                  </ResultRow>
+                )}
+              </Bounded>
+            </List>
+          </Box>
+        )}
+        {QUINT_GROUPS.map((group) => {
+          const declared = items.filter((item) => item.kind === group.kind);
+          if (!declared.length) return null;
+          return (
+            <Box key={group.kind} component="section" mb="lg">
+              <Title order={2} mb="sm">
+                {group.label}
+              </Title>
+              <List spacing="xs" listStyleType="none">
+                {declared.map((item) => (
+                  <List.Item key={item.line}>
+                    <Anchor
+                      href={`#line-${item.line}`}
+                      onClick={(event) => {
+                        event.preventDefault();
+                        const leading = (text.match(/^(?:[^\S\r\n]*\r?\n)+/)?.[0].match(/\n/g) ?? []).length;
+                        const line = document.getElementById(`line-${item.line - leading}`) ?? document.querySelector('[data-source]');
+                        line?.scrollIntoView({ block: 'center' });
+                      }}
+                    >
+                      <Code>{item.text}</Code>
+                    </Anchor>
+                  </List.Item>
+                ))}
+              </List>
+            </Box>
+          );
+        })}
+      </Box>
+    </Container>
   );
 }

package/packages/visualizer/src/evidence/model-trace.tsx

@@ -1,57 +1,77 @@
+import { Button, Code, List, Stack, Table, Text } from '@mantine/core';
 import { useState } from 'react';
-
 import type { ModelState } from './quint';
-import styles from './recording.module.css';
-
 function shown(value: unknown) {
   if (value === undefined) return '—';
   return typeof value === 'string' ? value : JSON.stringify(value, null, 2);
 }
-
 /** The states a model run went through, one at a time, with what each step changed. */
 export function ModelTrace({ states }: { states: readonly ModelState[] }) {
   const [selected, setSelected] = useState(0);
-  if (!states.length) return <p className={styles.quietLine}>No model states were recorded.</p>;
+  if (!states.length)
+    return (
+      <Text component="div" c="dimmed">
+        No model states were recorded.
+      </Text>
+    );
   const at = Math.min(selected, states.length - 1);
   const state = states[at]!;
   const previous = states[at - 1];
   const variables = [...new Set([...Object.keys(previous ?? {}), ...Object.keys(state)])].filter((name) => !name.startsWith('#'));
   const changed = (name: string) => previous !== undefined && JSON.stringify(previous[name]) !== JSON.stringify(state[name]);
   return (
-    <div className={styles.trace}>
-      <ol className={styles.traceStates} aria-label="Model trace states">
+    <Stack gap="sm" miw={0}>
+      <List aria-label="Model trace states" spacing="xs" listStyleType="none" type="ordered">
         {states.map((entry, index) => (
-          <li key={index}>
-            <button type="button" aria-label={`State ${index + 1}`} aria-pressed={at === index} onClick={() => setSelected(index)}>
-              <span className={styles.traceNo}>{index + 1}</span>
-              <span>{typeof entry['#action'] === 'string' ? entry['#action'] : index === 0 ? 'Start' : 'Step'}</span>
-            </button>
-          </li>
+          <List.Item key={index}>
+            <Button
+              type="button"
+              aria-label={`State ${index + 1}`}
+              aria-pressed={at === index}
+              onClick={() => setSelected(index)}
+              variant="light"
+            >
+              <Text span inherit>
+                {index + 1}
+              </Text>
+              <Text span inherit>
+                {typeof entry['#action'] === 'string' ? entry['#action'] : index === 0 ? 'Start' : 'Step'}
+              </Text>
+            </Button>
+          </List.Item>
         ))}
-      </ol>
-      <div className={styles.tableScroll}>
-        <table className={styles.traceTable}>
-          <thead>
-            <tr>
-              <th scope="col">Variable</th>
-              <th scope="col">Before</th>
-              <th scope="col">State {at + 1}</th>
-            </tr>
-          </thead>
-          <tbody>
+      </List>
+      <Table.ScrollContainer minWidth={600}>
+        <Table>
+          <Table.Thead>
+            <Table.Tr>
+              <Table.Th scope="col">Variable</Table.Th>
+              <Table.Th scope="col">Before</Table.Th>
+              <Table.Th scope="col">State {at + 1}</Table.Th>
+            </Table.Tr>
+          </Table.Thead>
+          <Table.Tbody>
             {variables.map((name) => (
-              <tr key={name} data-changed={changed(name) || undefined}>
-                <th scope="row">
+              <Table.Tr key={name} data-changed={changed(name) || undefined}>
+                <Table.Th scope="row">
                   {name}
-                  {changed(name) && <span className={styles.changed}>Changed</span>}
-                </th>
-                <td><pre>{previous ? shown(previous[name]) : '—'}</pre></td>
-                <td><pre>{shown(state[name])}</pre></td>
-              </tr>
+                  {changed(name) && (
+                    <Text span inherit>
+                      Changed
+                    </Text>
+                  )}
+                </Table.Th>
+                <Table.Td>
+                  <Code block>{previous ? shown(previous[name]) : '—'}</Code>
+                </Table.Td>
+                <Table.Td>
+                  <Code block>{shown(state[name])}</Code>
+                </Table.Td>
+              </Table.Tr>
             ))}
-          </tbody>
-        </table>
-      </div>
-    </div>
+          </Table.Tbody>
+        </Table>
+      </Table.ScrollContainer>
+    </Stack>
   );
 }

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

@@ -1,14 +1,13 @@
+import { SpecLogo } from '../components/SpecLogo';
 import { addSummaries, NO_EVIDENCE, type SpecSummary } from '@crvouga/atlas/reports/evidence-view';
+import { Alert, Anchor, Box, Button, Container, Flex, Group, List, Stack, Text, Title } from '@mantine/core';
 import { Link } from '@tanstack/react-router';
 import { useMemo } from 'react';
-
 import { folderOf, outlinePath, type SpecKind } from '../spec-kind';
 import { useUiStore } from '../state/ui-store';
 import { useEvidence } from './evidence-context';
-import styles from './evidence.module.css';
 import { ago, plural, useNow } from './format';
 import { backendLabel, Bounded, CountLine, Meter, StatusMark, Tally } from './marks';
-
 /** A kind's specs at a glance: how many have results, which are failing, and what just ran. */
 export function Overview({ kind }: { kind: SpecKind }) {
   const evidence = useEvidence();
@@ -16,119 +15,188 @@ export function Overview({ kind }: { kind: SpecKind }) {
   const setFilter = useUiStore((s) => s.setResultFilter);
   const setSourcesOpen = useUiStore((s) => s.setSourcesOpen);
   const files = useMemo(() => evidence.files.filter(kind.accepts), [evidence.files, kind]);
-  const rows = useMemo(() => files.map((file) => ({ file, summary: evidence.view.specs.get(outlinePath(file))?.summary ?? NO_EVIDENCE })), [files, evidence.view]);
+  const rows = useMemo(
+    () => files.map((file) => ({ file, summary: evidence.view.specs.get(outlinePath(file))?.summary ?? NO_EVIDENCE })),
+    [files, evidence.view]
+  );
   const total = useMemo(() => addSummaries(rows.map((row) => row.summary)), [rows]);
   const withResults = rows.filter((row) => row.summary.status !== 'none');
   const failing = rows.filter((row) => row.summary.counts.failed > 0).sort((a, b) => b.summary.counts.failed - a.summary.counts.failed);
   const recent = [...withResults].sort((a, b) => (b.summary.latestAtMs ?? 0) - (a.summary.latestAtMs ?? 0)).slice(0, 8);
   const empty = rows.length - withResults.length;
   const specRow = (row: { file: string; summary: SpecSummary }) => (
-    <li key={row.file}>
-      <Link to="/specs/$kind" params={{ kind: kind.id }} search={{ spec: row.file }} className={styles.listRow}>
-        <StatusMark status={row.summary.status} />
-        <span className={styles.listName}>
-          {evidence.titleOf(row.file)}
-          <span className={styles.listPath}>{folderOf(row.file)}</span>
-        </span>
-        <Tally summary={row.summary} />
-        {row.summary.latestAtMs !== null && <span className={styles.listTime}>{ago(row.summary.latestAtMs, now)}</span>}
-      </Link>
-    </li>
+    <List.Item key={row.file}>
+      <Anchor
+        display="block"
+        p="sm"
+        underline="never"
+        renderRoot={(props) => <Link {...props} to="/specs/$kind" params={{ kind: kind.id }} search={{ spec: row.file }} />}
+      >
+        <Group gap="md" align="center" wrap="nowrap">
+          <StatusMark status={row.summary.status} />
+          <Stack gap={0} flex={1} miw={0}>
+            <Text span inherit fw={500} truncate title={evidence.titleOf(row.file)}>
+              {evidence.titleOf(row.file)}
+            </Text>
+            {folderOf(row.file) && (
+              <Text span inherit c="dimmed" truncate title={folderOf(row.file)}>
+                {folderOf(row.file)}
+              </Text>
+            )}
+          </Stack>
+          <Flex direction={{ base: 'column', sm: 'row' }} align={{ base: 'flex-end', sm: 'center' }} gap={{ base: 'xs', sm: 'md' }}>
+            <Tally summary={row.summary} />
+            {row.summary.latestAtMs !== null && (
+              <Text span inherit c="dimmed" textWrap="nowrap">
+                {ago(row.summary.latestAtMs, now)}
+              </Text>
+            )}
+          </Flex>
+        </Group>
+      </Anchor>
+    </List.Item>
   );
   return (
-    <article className={styles.page}>
-      <header className={styles.specHead}>
-        <h1 className={styles.title}>{kind.label}</h1>
-        <div className={styles.summary}>
+    <Container component="article" size="xl" w="100%" py="xl">
+      <Box component="header" mb="lg">
+        <Flex gap="sm" align="center" mb="sm">
+          <SpecLogo kind={kind} />
+          <Title order={1}>{kind.label}</Title>
+        </Flex>
+        <Stack gap="sm" miw={0}>
           <Meter counts={total.counts} />
-          <p className={styles.summaryLine}>
-            <span>{plural(files.length, kind.one, kind.many)}</span>
-            {evidence.ready && <span>{withResults.length} with results</span>}
-            {evidence.ready && empty > 0 && <span>{empty} without</span>}
-          </p>
+          <Flex gap="xs" align="center" wrap="wrap">
+            <Text span inherit>
+              {plural(files.length, kind.one, kind.many)}
+            </Text>
+            {evidence.ready && (
+              <Text span inherit>
+                {withResults.length} with results
+              </Text>
+            )}
+            {evidence.ready && empty > 0 && (
+              <Text span inherit>
+                {empty} without
+              </Text>
+            )}
+          </Flex>
           {total.status !== 'none' && (
-            <p className={styles.summaryLine}>
+            <Flex gap="xs" align="center" wrap="wrap">
               <CountLine summary={total} noun={kind.check} nouns={`${kind.check}s`} />
-            </p>
+            </Flex>
           )}
-        </div>
-      </header>
+        </Stack>
+      </Box>
 
       {evidence.unavailable && (
-        <p className={styles.notice} role="alert">
+        <Alert role="alert" color={'red'} my="sm">
           Recorded results are unavailable. {evidence.unavailable}{' '}
-          <button type="button" className={styles.link} onClick={evidence.retry}>Try again</button>
-        </p>
+          <Button type="button" onClick={evidence.retry} variant="subtle">
+            Try again
+          </Button>
+        </Alert>
       )}
       {evidence.notices.map((notice) => (
-        <p key={notice} className={styles.notice} role="status">
+        <Alert key={notice} role="status" color={'blue'} my="sm">
           {notice}{' '}
-          <button type="button" className={styles.link} onClick={evidence.retry}>Try again</button>
-        </p>
+          <Button type="button" onClick={evidence.retry} variant="subtle">
+            Try again
+          </Button>
+        </Alert>
       ))}
-      {!evidence.ready && !evidence.unavailable && <p className={styles.aside} role="status">Loading recorded results…</p>}
-      {evidence.ready && evidence.pending > 0 && <p className={styles.aside} role="status">Reading {plural(evidence.pending, 'more layer', 'more layers')}…</p>}
+      {!evidence.ready && !evidence.unavailable && (
+        <Text role="status" component="div" c="dimmed">
+          Loading recorded results…
+        </Text>
+      )}
+      {evidence.ready && evidence.pending > 0 && (
+        <Text role="status" component="div" c="dimmed">
+          Reading {plural(evidence.pending, 'more layer', 'more layers')}…
+        </Text>
+      )}
 
       {evidence.active.length > 0 && (
-        <section className={styles.block}>
-          <h2 className={styles.blockTitle}>Running now</h2>
-          <ul className={styles.list}>
+        <Box component="section" mb="lg">
+          <Title order={2} mb="sm">
+            Running now
+          </Title>
+          <List spacing="xs" listStyleType="none">
             {evidence.active.map((run) => (
-              <li key={run.source} className={styles.listRow}>
-                <StatusMark status="running" />
-                <span className={styles.listName}>{run.packageDir}</span>
-                <span className={styles.tally} data-status={run.failed ? 'failed' : 'running'}>
-                  {plural(run.completed, 'result', 'results')} so far{run.failed ? `, ${run.failed} failed` : ''}
-                </span>
-                <span className={styles.listTime}>started {ago(run.startedAtMs, now)}</span>
-              </li>
+              <List.Item key={run.source}>
+                <Group gap="md" align="center">
+                  <StatusMark status="running" />
+                  <Text span inherit>
+                    {run.packageDir}
+                  </Text>
+                  <Text data-status={run.failed ? 'failed' : 'running'} span inherit>
+                    {plural(run.completed, 'result', 'results')} so far{run.failed ? `, ${run.failed} failed` : ''}
+                  </Text>
+                  <Text span inherit c="dimmed">
+                    started {ago(run.startedAtMs, now)}
+                  </Text>
+                </Group>
+              </List.Item>
             ))}
-          </ul>
-        </section>
+          </List>
+        </Box>
       )}
 
       {failing.length > 0 && (
-        <section className={styles.block}>
-          <h2 className={styles.blockTitle}>
-            Failing <span className={styles.aside}>{plural(failing.length, kind.one, kind.many)}</span>
-          </h2>
-          <ul className={styles.list}>
+        <Box component="section" mb="lg">
+          <Title order={2} mb="sm">
+            Failing{' '}
+            <Text span inherit c="dimmed">
+              {plural(failing.length, kind.one, kind.many)}
+            </Text>
+          </Title>
+          <List spacing="xs" listStyleType="none">
             <Bounded items={failing} size={12} more="More failing">
               {specRow}
             </Bounded>
-          </ul>
-        </section>
+          </List>
+        </Box>
       )}
 
       {recent.length > 0 && (
-        <section className={styles.block}>
-          <h2 className={styles.blockTitle}>Latest results</h2>
-          <ul className={styles.list}>{recent.map(specRow)}</ul>
-        </section>
+        <Box component="section" mb="lg">
+          <Title order={2} mb="sm">
+            Latest results
+          </Title>
+          <List spacing="xs" listStyleType="none">
+            {recent.map(specRow)}
+          </List>
+        </Box>
       )}
 
       {evidence.ready && evidence.pending === 0 && withResults.length === 0 && !evidence.unavailable && (
-        <p className={styles.aside}>
+        <Text component="div" c="dimmed">
           {evidence.layers.length === 0
             ? `Nothing has been recorded yet. Results appear here as a spec run finishes each test.`
             : `None of the ${plural(evidence.layers.length, 'layer', 'layers')} in the combined report checked a ${kind.one}.`}
-        </p>
+        </Text>
       )}
 
       {evidence.ready && (
-        <p className={styles.footLine}>
-          {plural(evidence.layers.length, 'layer', 'layers')} from {evidence.backends.filter((backend) => backend.available).map((backend) => backendLabel(evidence.backends, backend.id)).join(' and ') || 'no report store'}.{' '}
-          <button type="button" className={styles.link} onClick={() => setSourcesOpen(true)}>Choose sources</button>
+        <Text component="div" c="dimmed">
+          {plural(evidence.layers.length, 'layer', 'layers')} from{' '}
+          {evidence.backends
+            .filter((backend) => backend.available)
+            .map((backend) => backendLabel(evidence.backends, backend.id))
+            .join(' and ') || 'no report store'}
+          .{' '}
+          <Button type="button" onClick={() => setSourcesOpen(true)} variant="subtle">
+            Choose sources
+          </Button>
           {empty > 0 && (
             <>
               {' · '}
-              <button type="button" className={styles.link} onClick={() => setFilter('none')}>
+              <Button type="button" onClick={() => setFilter('none')} variant="subtle">
                 Show the {empty} without results
-              </button>
+              </Button>
             </>
           )}
-        </p>
+        </Text>
       )}
-    </article>
+    </Container>
   );
 }