@crvouga/atlas 0.10.2 → 0.12.0

package/packages/visualizer/src/evidence/spec-header.tsx

@@ -1,64 +1,80 @@
+import { SpecLogo } from '../components/SpecLogo';
 import type { SpecEvidence } from '@crvouga/atlas/reports/evidence-view';
 import { NO_EVIDENCE } from '@crvouga/atlas/reports/evidence-view';
+import { Box, Flex, Group, Stack, Text, Title } from '@mantine/core';
 import type { ReactNode } from 'react';
-
 import type { SpecKind } from '../spec-kind';
 import { useEvidence } from './evidence-context';
-import styles from './evidence.module.css';
 import { useNow } from './format';
 import { CountLine, Meter, Origin } from './marks';
-
 /** A spec's name, where it lives, and what the combined report holds for it. */
-export function SpecHeader({ title, file, kind, entry, planned, children }: { title: string; file: string; kind: SpecKind; entry: SpecEvidence | undefined; planned?: number; children?: ReactNode }) {
+export function SpecHeader({
+  title,
+  file,
+  kind,
+  entry,
+  planned,
+  children
+}: {
+  title: string;
+  file: string;
+  kind: SpecKind;
+  entry: SpecEvidence | undefined;
+  planned?: number;
+  children?: ReactNode;
+}) {
   const { backends, ready, unavailable, pending } = useEvidence();
   const now = useNow();
   const summary = entry?.summary ?? NO_EVIDENCE;
-  const newest = entry?.slots.flatMap((slot) => slot.outcomes).reduce<(typeof entry.slots)[number]['outcomes'][number] | null>((best, result) => (!best || result.layer.recordedAtMs > best.layer.recordedAtMs ? result : best), null);
+  const newest = entry?.slots
+    .flatMap((slot) => slot.outcomes)
+    .reduce<(typeof entry.slots)[number]['outcomes'][number] | null>(
+      (best, result) => (!best || result.layer.recordedAtMs > best.layer.recordedAtMs ? result : best),
+      null
+    );
   const missing = planned === undefined ? 0 : Math.max(0, planned - summary.total);
   return (
-    <header className={styles.specHead}>
-      <p className={styles.path}>specs/{file}</p>
-      <h1 className={styles.title}>{title}</h1>
+    <Box component="header" mb="lg">
+      <Text component="div" c="dimmed">
+        specs/{file}
+      </Text>
+      <Group gap="sm" mb="sm" wrap="nowrap">
+        <SpecLogo kind={kind} />
+        <Title order={1}>{title}</Title>
+      </Group>
       {children}
-      <div className={styles.summary}>
+      <Stack gap="sm" miw={0}>
         <Meter counts={summary.counts} missing={missing} />
-        <p className={styles.summaryLine}>
+        <Flex gap="xs" align="center" wrap="wrap">
           {unavailable ? (
-            <span>Recorded results are unavailable.</span>
+            <Text span inherit>
+              Recorded results are unavailable.
+            </Text>
           ) : !ready ? (
-            <span role="status">Loading recorded results…</span>
+            <Text role="status" span inherit>
+              Loading recorded results…
+            </Text>
           ) : summary.status === 'none' ? (
-            <span>{pending > 0 ? 'Loading recorded results…' : `No completed test report for this ${kind.one} yet.`}</span>
+            <Text span inherit>
+              {pending > 0 ? 'Loading recorded results…' : `No completed test report for this ${kind.one} yet.`}
+            </Text>
           ) : (
             <>
               <CountLine summary={summary} noun={kind.check} nouns={`${kind.check}s`} />
-              {missing > 0 && <span>{missing} without a result</span>}
+              {missing > 0 && (
+                <Text span inherit>
+                  {missing} without a result
+                </Text>
+              )}
             </>
           )}
-        </p>
+        </Flex>
         {newest && (
-          <p className={styles.summaryOrigin}>
+          <Flex gap="xs" align="center" wrap="wrap" c="dimmed">
             Latest from <Origin layer={newest.layer} backends={backends} now={now} />
-          </p>
+          </Flex>
         )}
-      </div>
-    </header>
-  );
-}
-
-/** The document as written, folded away under what was understood from it. */
-export function SourceText({ text, label = 'Source', open = false }: { text: string; label?: string; open?: boolean }) {
-  return (
-    <details className={styles.source} open={open}>
-      <summary>{label}</summary>
-      <pre className={styles.code}>
-        {text.split('\n').map((line, index) => (
-          <span id={`line-${index + 1}`} key={index}>
-            {line}
-            {'\n'}
-          </span>
-        ))}
-      </pre>
-    </details>
+      </Stack>
+    </Box>
   );
 }

package/packages/visualizer/src/evidence/spec-index.tsx

@@ -1,21 +1,22 @@
 import { addSummaries, NO_EVIDENCE, type SpecSummary } from '@crvouga/atlas/reports/evidence-view';
+import { Box, Button, Group, NavLink, Stack, Text, Title } from '@mantine/core';
 import { Link, useSearch } from '@tanstack/react-router';
 import { useMemo } from 'react';
-
 import { folderOf, outlinePath, specFile, type SpecKind } from '../spec-kind';
 import { useUiStore, type ResultFilter } from '../state/ui-store';
 import { useEvidence } from './evidence-context';
-import styles from './evidence.module.css';
 import { StatusMark, Tally } from './marks';
-
-const FILTERS: readonly { readonly id: ResultFilter; readonly label: string; readonly keeps: (summary: SpecSummary) => boolean }[] = [
+const FILTERS: readonly {
+  readonly id: ResultFilter;
+  readonly label: string;
+  readonly keeps: (summary: SpecSummary) => boolean;
+}[] = [
   { id: 'all', label: 'All', keeps: () => true },
   { id: 'results', label: 'Results', keeps: (summary) => summary.status !== 'none' },
   { id: 'running', label: 'Running', keeps: (summary) => summary.counts.running > 0 },
   { id: 'failed', label: 'Failing', keeps: (summary) => summary.counts.failed > 0 },
   { id: 'none', label: 'None', keeps: (summary) => summary.status === 'none' }
 ];
-
 /** 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();
@@ -24,7 +25,12 @@ export function SpecIndex({ kind }: { kind: SpecKind }) {
   const setFilter = useUiStore((s) => s.setResultFilter);
   const open = typeof search.spec === 'string' ? specFile(search.spec) : '';
   const rows = useMemo(
-    () => evidence.files.filter(kind.accepts).map((file) => ({ file, title: evidence.titleOf(file), summary: evidence.view.specs.get(outlinePath(file))?.summary ?? NO_EVIDENCE })),
+    () =>
+      evidence.files.filter(kind.accepts).map((file) => ({
+        file,
+        title: evidence.titleOf(file),
+        summary: evidence.view.specs.get(outlinePath(file))?.summary ?? NO_EVIDENCE
+      })),
     // `titleOf` reads the outline the view was built from.
     [evidence.files, evidence.view, kind]
   );
@@ -36,40 +42,63 @@ export function SpecIndex({ kind }: { kind: SpecKind }) {
     return [...byFolder];
   }, [visible]);
   return (
-    <nav className={styles.index} aria-label={`${kind.label} ${kind.many}`}>
-      <div className={styles.filters} role="group" aria-label="Show">
+    <Box aria-label={`${kind.label} ${kind.many}`} component="nav" p="md">
+      <Group role="group" aria-label="Show" gap="xs" mb="md">
         {FILTERS.map((entry) => (
-          <button key={entry.id} type="button" aria-pressed={filter === entry.id} onClick={() => setFilter(entry.id)}>
-            {entry.label} <span>{rows.filter((row) => entry.keeps(row.summary)).length}</span>
-          </button>
+          <Button
+            key={entry.id}
+            type="button"
+            aria-pressed={filter === entry.id}
+            onClick={() => setFilter(entry.id)}
+            variant={filter === entry.id ? 'light' : 'subtle'}
+          >
+            {entry.label}{' '}
+            <Text span inherit>
+              {rows.filter((row) => entry.keeps(row.summary)).length}
+            </Text>
+          </Button>
         ))}
-      </div>
-      {evidence.filesPending && <p className={styles.indexNote}>Loading…</p>}
-      {evidence.filesError && <p className={styles.indexNote}>The file list could not be loaded.</p>}
+      </Group>
+      {evidence.filesPending && <Text component="div">Loading…</Text>}
+      {evidence.filesError && <Text component="div">The file list could not be loaded.</Text>}
       {!evidence.filesPending && !evidence.filesError && visible.length === 0 && (
-        <p className={styles.indexNote}>
-          {rows.length === 0 ? `No ${kind.many} in this spec set.` : filter === 'running' ? `No running ${kind.many}.` : filter === 'failed' ? `No failing ${kind.many}.` : filter === 'results' ? `No ${kind.many} with results yet.` : `Every ${kind.one} has results.`}
-        </p>
+        <Text component="div">
+          {rows.length === 0
+            ? `No ${kind.many} in this spec set.`
+            : filter === 'running'
+              ? `No running ${kind.many}.`
+              : filter === 'failed'
+                ? `No failing ${kind.many}.`
+                : filter === 'results'
+                  ? `No ${kind.many} with results yet.`
+                  : `Every ${kind.one} has results.`}
+        </Text>
       )}
       {groups.map(([folder, entries]) => (
-        <section key={folder || kind.id}>
-          <h3>
-            <span>{folder || kind.label}</span>
+        <Box key={folder || kind.id} component="section" mb="lg">
+          <Title order={3} mb="sm">
+            <Text span inherit>
+              {folder || kind.label}
+            </Text>
             <Tally summary={addSummaries(entries.map((row) => row.summary))} />
-          </h3>
-          <ul>
+          </Title>
+          <Stack gap="xs">
             {entries.map((row) => (
-              <li key={row.file}>
-                <Link className={styles.indexRow} to="/specs/$kind" params={{ kind: kind.id }} search={{ spec: row.file }} title={row.file} aria-current={open === row.file ? 'page' : undefined} data-result={row.summary.status}>
-                  <StatusMark status={row.summary.status} size={14} />
-                  <span className={styles.indexName}>{row.title}</span>
-                  {row.summary.status !== 'none' && <Tally summary={row.summary} />}
-                </Link>
-              </li>
+              <NavLink
+                key={row.file}
+                label={row.title}
+                title={row.file}
+                active={open === row.file}
+                leftSection={<StatusMark status={row.summary.status} size={14} />}
+                rightSection={row.summary.status !== 'none' ? <Tally summary={row.summary} /> : undefined}
+                data-result={row.summary.status}
+                aria-current={open === row.file ? 'page' : undefined}
+                renderRoot={(props) => <Link {...props} to="/specs/$kind" params={{ kind: kind.id }} search={{ spec: row.file }} />}
+              />
             ))}
-          </ul>
-        </section>
+          </Stack>
+        </Box>
       ))}
-    </nav>
+    </Box>
   );
 }

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

@@ -1,24 +1,32 @@
+import { Alert, Button, Container, Text, Title } from '@mantine/core';
 import { useQuery } from '@tanstack/react-query';
 import { useNavigate, useParams, useSearch } from '@tanstack/react-router';
 import { lazy, Suspense } from 'react';
-
 import { keys, specKey, useAdapter } from '../data/queries';
 import { outlinePath, specFile, specKind } from '../spec-kind';
 import type { SelectCheck } from './check-detail';
 import { useEvidence } from './evidence-context';
-import styles from './evidence.module.css';
 import { Overview } from './overview';
-
 // Each kind of spec has a page with a parser of its own (Gherkin, Quint, DMN); a page loads only the one it shows.
 const DocumentPage = lazy(() => import('./document-page').then((m) => ({ default: m.DocumentPage })));
 const FeaturePage = lazy(() => import('./feature-page').then((m) => ({ default: m.FeaturePage })));
 const ModelPage = lazy(() => import('./model-page').then((m) => ({ default: m.ModelPage })));
 const RecordingPage = lazy(() => import('./recording-page').then((m) => ({ default: m.RecordingPage })));
-
 function Loading({ children }: { children: React.ReactNode }) {
-  return <Suspense fallback={<article className={styles.page}><p className={styles.aside} role="status">Loading…</p></article>}>{children}</Suspense>;
+  return (
+    <Suspense
+      fallback={
+        <Container>
+          <Text role="status" c="dimmed">
+            Loading…
+          </Text>
+        </Container>
+      }
+    >
+      {children}
+    </Suspense>
+  );
 }
-
 /** One spec tab: its overview, one of its documents, or a recording opened from that document. */
 export function SpecPage() {
   const params = useParams({ from: '/specs/$kind' });
@@ -29,26 +37,37 @@ export function SpecPage() {
   const kind = specKind(params.kind);
   const file = search.spec ? specFile(search.spec) : '';
   const readable = kind !== null && file.length > 0 && kind.accepts(file);
-  const text = useQuery({ queryKey: keys.specFile(specKey(adapter), file), queryFn: () => adapter.specFile(file), enabled: readable, retry: false });
-
+  const text = useQuery({
+    queryKey: keys.specFile(specKey(adapter), file),
+    queryFn: () => adapter.specFile(file),
+    enabled: readable,
+    retry: false
+  });
   if (!kind) {
     return (
-      <article className={styles.page}>
-        <h1 className={styles.title}>No such kind of spec</h1>
-        <p className={styles.aside}>Pick a tab above.</p>
-      </article>
+      <Container component="article" size="xl" w="100%" py="xl">
+        <Title order={1} mb="sm">
+          No such kind of spec
+        </Title>
+        <Text component="div" c="dimmed">
+          Pick a tab above.
+        </Text>
+      </Container>
     );
   }
   if (!file) return <Overview kind={kind} />;
   if (!readable) {
     return (
-      <article className={styles.page}>
-        <h1 className={styles.title}>{kind.label}</h1>
-        <p className={styles.aside}>This file is not a {kind.one}.</p>
-      </article>
+      <Container component="article" size="xl" w="100%" py="xl">
+        <Title order={1} mb="sm">
+          {kind.label}
+        </Title>
+        <Text component="div" c="dimmed">
+          This file is not a {kind.one}.
+        </Text>
+      </Container>
     );
   }
-
   const entry = evidence.view.specs.get(outlinePath(file));
   const select: SelectCheck = (patch) => {
     const value = <T,>(next: T | null | undefined, current: T | undefined) => (next === undefined ? current : (next ?? undefined));
@@ -63,7 +82,6 @@ export function SpecPage() {
       })
     });
   };
-
   if (search.view === 'recording' && search.check) {
     const slot = entry?.slots.find((candidate) => candidate.id === search.check);
     // The way back already names the spec; the heading is the check itself.
@@ -83,17 +101,30 @@ export function SpecPage() {
       </Loading>
     );
   }
-  if (text.isPending) return <article className={styles.page}><p className={styles.aside} role="status">Loading the {kind.one}…</p></article>;
+  if (text.isPending)
+    return (
+      <Container component="article" size="xl" w="100%" py="xl">
+        <Text role="status" component="div" c="dimmed">
+          Loading the {kind.one}…
+        </Text>
+      </Container>
+    );
   if (text.isError) {
     return (
-      <article className={styles.page}>
-        <p className={styles.notice} role="alert">
+      <Container component="article" size="xl" w="100%" py="xl">
+        <Alert role="alert" color={'red'} my="sm">
           The {kind.one} could not be read.{' '}
-          <button type="button" className={styles.link} onClick={() => void text.refetch()}>Try again</button>
-        </p>
-      </article>
+          <Button type="button" onClick={() => void text.refetch()} variant="subtle">
+            Try again
+          </Button>
+        </Alert>
+      </Container>
     );
   }
   const page = { file, text: text.data, kind, entry, selection: { check: search.check, layer: search.layer }, select };
-  return <Loading>{kind.id === 'gherkin' ? <FeaturePage {...page} /> : kind.id === 'quint' ? <ModelPage {...page} /> : <DocumentPage {...page} />}</Loading>;
+  return (
+    <Loading>
+      {kind.id === 'gherkin' ? <FeaturePage {...page} /> : kind.id === 'quint' ? <ModelPage {...page} /> : <DocumentPage {...page} />}
+    </Loading>
+  );
 }

package/packages/visualizer/src/evidence/test-filter.tsx

@@ -1,21 +1,45 @@
 import type { CheckSlot } from '@crvouga/atlas/reports/evidence-view';
+import { Button, Group, Text } from '@mantine/core';
 import { useUiStore } from '../state/ui-store';
-import styles from './evidence.module.css';
-
 /** Filter actual test rows as well as the spec index. Counts always describe the whole document. */
 export function TestFilter({ slots }: { slots: readonly CheckSlot[] }) {
-  const filter = useUiStore(s => s.resultFilter);
-  const setFilter = useUiStore(s => s.setResultFilter);
-  const running = slots.filter(slot => slot.status === 'running').length;
-  return <>
-    <div className={styles.filters} role="group" aria-label="Test status">
-      <button type="button" aria-pressed={filter !== 'running'} onClick={() => setFilter('all')}>All tests <span>{slots.length}</span></button>
-      <button type="button" aria-pressed={filter === 'running'} onClick={() => setFilter('running')}>Running <span>{running}</span></button>
-    </div>
-    {filter === 'running' && running === 0 && <p className={styles.aside} role="status">No running tests.</p>}
-  </>;
+  const filter = useUiStore((s) => s.resultFilter);
+  const setFilter = useUiStore((s) => s.setResultFilter);
+  const running = slots.filter((slot) => slot.status === 'running').length;
+  return (
+    <>
+      <Group role="group" aria-label="Test status" gap="sm" my="md">
+        <Button
+          type="button"
+          aria-pressed={filter !== 'running'}
+          onClick={() => setFilter('all')}
+          variant={filter !== 'running' ? 'light' : 'subtle'}
+        >
+          All tests{' '}
+          <Text span inherit>
+            {slots.length}
+          </Text>
+        </Button>
+        <Button
+          type="button"
+          aria-pressed={filter === 'running'}
+          onClick={() => setFilter('running')}
+          variant={filter === 'running' ? 'light' : 'subtle'}
+        >
+          Running{' '}
+          <Text span inherit>
+            {running}
+          </Text>
+        </Button>
+      </Group>
+      {filter === 'running' && running === 0 && (
+        <Text role="status" component="div" c="dimmed">
+          No running tests.
+        </Text>
+      )}
+    </>
+  );
 }
-
 export function useRunningFilter() {
-  return useUiStore(s => s.resultFilter === 'running');
+  return useUiStore((s) => s.resultFilter === 'running');
 }