@crvouga/atlas 0.10.1 → 0.11.0

package/packages/visualizer/src/ui/grammars/quint.json

@@ -0,0 +1,152 @@
+{
+  "$schema": "https://raw.githubusercontent.com/martinring/tmlanguage/master/tmlanguage.json",
+  "name": "quint",
+  "patterns": [
+    {
+      "include": "#hashbangLine"
+    },
+    {
+      "include": "#docComments"
+    },
+    {
+      "include": "#lineComments"
+    },
+    {
+      "include": "#blockComments"
+    },
+    {
+      "include": "#keywords"
+    },
+    {
+      "include": "#storage"
+    },
+    {
+      "include": "#constants"
+    },
+    {
+      "include": "#punctuation"
+    },
+    {
+      "include": "#operators"
+    },
+    {
+      "include": "#identifiers"
+    },
+    {
+      "include": "#strings"
+    },
+    {
+      "include": "#numbers"
+    }
+  ],
+  "repository": {
+    "identifiers": {
+      "patterns": [
+        {
+          "name": "meta.quint",
+          "match": "[a-zA-Z_]([a-zA-Z0-9_])*"
+        }
+      ]
+    },
+    "keywords": {
+      "patterns": [
+        {
+          "name": "keyword.control.quint",
+          "match": "\\b(module|import|from|export|as|if|else|match|not|or|and|implies|iff|all|any|leadsTo|strongFair|weakFair)\\b"
+        }
+      ]
+    },
+    "storage": {
+      "patterns": [
+        {
+          "name": "storage.modifier.quint",
+          "match": "\\b(type|assume|const|var|val|nondet|def|pure|action|temporal|run)\\b"
+        },
+        {
+          "name": "storage.type.quint",
+          "match": "\\b(Set|List|int|str|bool)\\b"
+        },
+        {
+          "name": "support.type.quint",
+          "match": "\\b(Map|Tup|Rec)\\b"
+        }
+      ]
+    },
+    "operators": {
+      "patterns": [
+        {
+          "name": "keyword.operator.quint",
+          "match": "(=>|->|<=|>|<|=|!=|'|\\.|\\*|\\+|-|/|%|\\^)"
+        }
+      ]
+    },
+    "strings": {
+      "name": "string.quoted.double.quint",
+      "begin": "\"",
+      "end": "\""
+    },
+    "numbers": {
+      "patterns": [
+        {
+          "name": "constant.numeric.quint",
+          "match": "-?(0x[0-9a-fA-F]([0-9a-fA-F]|_[0-9a-fA-F])*|0|[1-9]([0-9]|_[0-9])*)"
+        }
+      ]
+    },
+    "constants": {
+      "patterns": [
+        {
+          "name": "constant.language.quint",
+          "match": "\\b(false|true|Bool|Int|Nat)\\b"
+        }
+      ]
+    },
+    "hashbangLine": {
+      "patterns": [
+        {
+          "name": "comment.line.hashbang.quint",
+          "match": "\\A#!.*$"
+        }
+      ]
+    },
+    "docComments": {
+      "patterns": [
+        {
+          "name": "comment.block.documentation.quint",
+          "match": "///.*$"
+        }
+      ]
+    },
+    "punctuation": {
+      "patterns": [
+        {
+          "name": "keyword.operator.spread.quint",
+          "match": "\\.\\.\\."
+        },
+        {
+          "name": "punctuation.accessor.quint",
+          "match": "::"
+        },
+        {
+          "name": "punctuation.separator.quint",
+          "match": "\\|"
+        }
+      ]
+    },
+    "lineComments": {
+      "patterns": [
+        {
+          "name": "comment.line.double-slash.quint",
+          "match": "//.*$"
+        }
+      ]
+    },
+    "blockComments": {
+      "name": "comment.block.quint",
+      "begin": "/\\*",
+      "end": "\\*/",
+      "patterns": []
+    }
+  },
+  "scopeName": "source.quint"
+}

package/packages/visualizer/src/ui/highlight.ts

@@ -0,0 +1,50 @@
+import { createShikiAdapter } from '@mantine/code-highlight';
+import type { HighlighterCore, LanguageInput, LanguageRegistration } from 'shiki/core';
+
+const grammars: Record<string, () => Promise<LanguageInput>> = {
+  gherkin: () => import('shiki/langs/gherkin.mjs').then((module) => module.default),
+  yaml: () => import('shiki/langs/yaml.mjs').then((module) => module.default),
+  xml: () => import('shiki/langs/xml.mjs').then((module) => module.default),
+  json: () => import('shiki/langs/json.mjs').then((module) => module.default),
+  quint: () => import('./grammars/quint.json').then((module) => module.default as unknown as LanguageRegistration),
+  alloy: () => import('./grammars/alloy.json').then((module) => module.default as unknown as LanguageRegistration)
+};
+
+async function createContext() {
+  const [{ createHighlighterCore }, { createJavaScriptRegexEngine }] = await Promise.all([
+    import('shiki/core'),
+    import('shiki/engine/javascript')
+  ]);
+  const highlighter = await createHighlighterCore({ langs: [], themes: [], engine: createJavaScriptRegexEngine() });
+  return {
+    getLoadedLanguages: () => highlighter.getLoadedLanguages(),
+    loadLanguage: (...languages: Parameters<HighlighterCore['loadLanguage']>) => highlighter.loadLanguage(...languages),
+    codeToHtml: (code: string, options: Parameters<HighlighterCore['codeToHtml']>[1]) =>
+      highlighter.codeToHtml(code, {
+        ...options,
+        transformers: [
+          {
+            line(node, line) {
+              node.properties.id = `line-${line}`;
+            }
+          }
+        ]
+      })
+  };
+}
+let context: ReturnType<typeof createContext> | undefined;
+/** One lazy, cached syntax engine; only a viewed file's grammar is downloaded. */
+export const specHighlightAdapter = createShikiAdapter(() => (context ??= createContext()), {
+  resolveLanguage: (language) => grammars[language]
+});
+
+/** Choose the actual notation, never a visually similar language. */
+export function specLanguage(file: string): string {
+  if (/\.feature$/i.test(file)) return 'gherkin';
+  if (/\.qnt$/i.test(file)) return 'quint';
+  if (/\.als$/i.test(file)) return 'alloy';
+  if (/\.(dmn|scxml|xml)$/i.test(file)) return 'xml';
+  if (/\.ya?ml$/i.test(file)) return 'yaml';
+  if (/\.json$/i.test(file)) return 'json';
+  return 'text';
+}

package/packages/visualizer/src/ui/theme.tsx

@@ -0,0 +1,109 @@
+/** @module Viewer design system
+ * The sole Mantine theme and provider for the report viewer and server settings.
+ */
+import { CodeHighlight, CodeHighlightTabs } from '@mantine/code-highlight';
+import {
+  ActionIcon,
+  DEFAULT_THEME,
+  darken,
+  type MantineColorsTuple,
+  type CSSVariablesResolver,
+  Anchor,
+  Badge,
+  Button,
+  Card,
+  createTheme,
+  Drawer,
+  InputWrapper,
+  List,
+  MantineProvider,
+  Modal,
+  NativeSelect,
+  Paper,
+  Table,
+  Text,
+  Title,
+  Tooltip
+} from '@mantine/core';
+import type { ReactNode } from 'react';
+// Retain Mantine's scales while making small outcome labels readable on light surfaces.
+const readableScale = (scale: MantineColorsTuple) =>
+  scale.map((color, index) => (index >= 6 ? darken(color, 0.25) : color)) as unknown as MantineColorsTuple;
+const cssVariablesResolver: CSSVariablesResolver = () => ({
+  variables: {},
+  light: { '--mantine-color-dimmed': 'var(--mantine-color-gray-7)' },
+  dark: {}
+});
+
+/** Atlas uses Mantine's blue scale for navigation and standard outcome colors for evidence. */
+export const theme = createTheme({
+  primaryColor: 'blue',
+  primaryShade: 8,
+  autoContrast: true,
+  colors: {
+    green: readableScale(DEFAULT_THEME.colors.green),
+    red: readableScale(DEFAULT_THEME.colors.red),
+    orange: readableScale(DEFAULT_THEME.colors.orange)
+  },
+  defaultRadius: 'md',
+  fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+  fontFamilyMonospace: 'ui-monospace, SFMono-Regular, Menlo, monospace',
+  headings: { fontWeight: '650', sizes: { h1: { fontSize: '1.75rem' }, h2: { fontSize: '1.25rem' }, h3: { fontSize: '1rem' } } },
+  respectReducedMotion: true,
+  focusRing: 'auto',
+  components: {
+    CodeHighlight: CodeHighlight.extend({
+      defaultProps: { withLineNumbers: true, withFirstLineIndentation: true, defaultExpanded: true, withBorder: true, radius: 'md' }
+    }),
+    CodeHighlightTabs: CodeHighlightTabs.extend({
+      defaultProps: {
+        withLineNumbers: true,
+        withFirstLineIndentation: true,
+        defaultExpanded: true,
+        withBorder: true,
+        radius: 'md',
+        withExpandButton: true,
+        maxCollapsedHeight: '70vh'
+      }
+    }),
+    // Mantine List wraps labels in inline-flex; report rows need the available width.
+    // Keep this single supported Styles API adjustment here, not in each feature.
+    List: List.extend({ styles: { itemWrapper: { display: 'flex' }, itemLabel: { flex: 1, minWidth: 0, width: '100%' } } }),
+    Button: Button.extend({ defaultProps: { size: 'sm', variant: 'light' } }),
+    ActionIcon: ActionIcon.extend({ defaultProps: { size: 'lg', variant: 'subtle' } }),
+    Anchor: Anchor.extend({ defaultProps: { size: 'sm', underline: 'hover' } }),
+    Badge: Badge.extend({ defaultProps: { variant: 'light', tt: 'none' } }),
+    Paper: Paper.extend({ defaultProps: { p: 'md' } }),
+    Card: Card.extend({ defaultProps: { withBorder: true, padding: 'md' } }),
+    Text: Text.extend({ defaultProps: { size: 'sm' } }),
+    Title: Title.extend({ defaultProps: { textWrap: 'pretty' } }),
+    InputWrapper: InputWrapper.extend({ defaultProps: { size: 'sm' } }),
+    NativeSelect: NativeSelect.extend({ defaultProps: { size: 'sm' } }),
+    Modal: Modal.extend({
+      defaultProps: { centered: true, size: 'lg', overlayProps: { backgroundOpacity: 0.35 }, transitionProps: { duration: 120 } }
+    }),
+    Drawer: Drawer.extend({ defaultProps: { position: 'right', size: 'lg', padding: 'lg', transitionProps: { duration: 120 } } }),
+    Table: Table.extend({ defaultProps: { verticalSpacing: 'sm', horizontalSpacing: 'sm', highlightOnHover: true, tabularNums: true } }),
+    Tooltip: Tooltip.extend({ defaultProps: { openDelay: 300, withArrow: true } })
+  }
+});
+/** Use this provider at every UI root; the viewer currently has a light visual identity. */
+export function AtlasThemeProvider({ children, env }: { children: ReactNode; env?: 'test' }) {
+  return (
+    <MantineProvider env={env} theme={theme} cssVariablesResolver={cssVariablesResolver} forceColorScheme="light">
+      {children}
+    </MantineProvider>
+  );
+}
+/** Outcome colors shared by report badges, progress bars, and the graph. Unknown outcomes stay gray. */
+export function statusColor(status: string): string {
+  return status === 'passed'
+    ? 'green'
+    : status === 'failed'
+      ? 'red'
+      : status === 'flaky'
+        ? 'orange'
+        : status === 'running'
+          ? 'blue'
+          : 'gray';
+}

package/packages/visualizer/src/views/ChartPage.tsx

@@ -1,26 +1,32 @@
+import { Anchor, Container, Flex, Stack, Text, Title } from '@mantine/core';
 import { Link, useParams, useSearch } from '@tanstack/react-router';
-
 import { useAtlas } from '../app/atlas-context';
 import { mapFrame } from '../layout/graph';
 import { ChartMap } from '../map/ChartMap';
-import { SidePanel } from './SidePanel';
-import styles from './views.module.css';
 import { ChartTests } from './ChartTests';
-
+import { ChartSource } from '../evidence/chart-source';
+import { SidePanel } from './SidePanel';
 export function ChartPage() {
   const { chartId } = useParams({ from: '/chart/$chartId' });
   const search = useSearch({ from: '/chart/$chartId' });
   const { view } = useAtlas();
-  if (!view) return <div className={styles.plateScroll} role="status">Loading the spec…</div>;
+  if (!view)
+    return (
+      <Container role="status" component="article" size="xl" w="100%" py="xl">
+        Loading the spec…
+      </Container>
+    );
   if (!view.charts.has(chartId)) {
     return (
-      <div className={styles.plateScroll}>
-        <h1 className={styles.plateTitle}>This chart isn’t in the spec</h1>
-        <p className={styles.lead}>It may have been renamed or removed since this link was shared.</p>
-        <Link to="/" search={(prev) => ({ run: prev.run })} className={styles.button}>
-          Back to the product map
-        </Link>
-      </div>
+      <Container component="article" size="xl" w="100%" py="xl">
+        <Title order={1} mb="sm">
+          This chart isn’t in the spec
+        </Title>
+        <Text component="div" c="dimmed">
+          It may have been renamed or removed since this link was shared.
+        </Text>
+        <Anchor renderRoot={(props) => <Link {...props} to="/" search={(prev) => ({ run: prev.run })} />}>Back to the product map</Anchor>
+      </Container>
     );
   }
   const selection = { screen: search.screen, event: search.event, journey: search.journey };
@@ -30,25 +36,39 @@ export function ChartPage() {
   const frame = mapFrame(view, chartId, search.group ?? null);
   const homeFocus = mapFrame(view, chartId, null).focus;
   return (
-    <div className={styles.mapPlate}>
-      <div className={styles.mapHeading}>
-        <h1>{chart.name}</h1>
-        {chart.description && <p>{chart.description}</p>}
+    <Stack gap="sm" p="md">
+      <Flex gap="xs" align="center" wrap="wrap">
+        <Title order={1} mb="sm">
+          {chart.name}
+        </Title>
+        {chart.description && <Text component="div">{chart.description}</Text>}
         {frame.focus && (
-          <p className={styles.mapScope}>
-            <span>{frame.focus}</span>
+          <Text component="div">
+            <Text span inherit>
+              {frame.focus}
+            </Text>
             {frame.wider && (
-              <Link to="/chart/$chartId" params={{ chartId }} search={(prev) => ({ run: prev.run, group: frame.wider && frame.wider !== homeFocus ? frame.wider : undefined })}>
+              <Anchor
+                renderRoot={(props) => (
+                  <Link
+                    {...props}
+                    to="/chart/$chartId"
+                    params={{ chartId }}
+                    search={(prev) => ({ run: prev.run, group: frame.wider && frame.wider !== homeFocus ? frame.wider : undefined })}
+                  />
+                )}
+              >
                 Wider map
-              </Link>
+              </Anchor>
             )}
-          </p>
+          </Text>
         )}
-      </div>
-      <div className={styles.mapArea}>
+      </Flex>
+      <ChartSource file={chart.file} />
+      <Stack gap="sm">
         <ChartMap key={`${chartId}:${search.group ?? ''}`} view={view} chartId={chartId} selection={selection} group={search.group} />
-      </div>
-      <ChartTests view={view} chartId={chartId} compact />
-    </div>
+      </Stack>
+      <ChartTests view={view} chartId={chartId} />
+    </Stack>
   );
 }

package/packages/visualizer/src/views/ChartTests.tsx

@@ -1,14 +1,12 @@
+import { Box, List, Title } from '@mantine/core';
 import { lazy, Suspense, useState } from 'react';
 import type { AtlasView } from '../data/model';
-import { useEvidence } from '../evidence/evidence-context';
 import { CheckDetail, ResultRow, type CheckSelection } from '../evidence/check-detail';
-import { TestFilter, useRunningFilter } from '../evidence/test-filter';
+import { useEvidence } from '../evidence/evidence-context';
 import { Bounded } from '../evidence/marks';
+import { TestFilter, useRunningFilter } from '../evidence/test-filter';
 import { outlinePath } from '../spec-kind';
-import styles from '../evidence/evidence.module.css';
-
-const RecordingPage = lazy(() => import('../evidence/recording-page').then(module => ({ default: module.RecordingPage })));
-
+const RecordingPage = lazy(() => import('../evidence/recording-page').then((module) => ({ default: module.RecordingPage })));
 /** Statechart test reports stay in the chart, including while their recordings are still arriving. */
 export function ChartTests({ view, chartId, compact = false }: { view: AtlasView; chartId: string; compact?: boolean }) {
   const evidence = useEvidence();
@@ -23,21 +21,60 @@ export function ChartTests({ view, chartId, compact = false }: { view: AtlasView
     files.add(outlinePath(chart.file));
     chart = chart.parent ? view.charts.get(chart.parent.chartId) : undefined;
   }
-  const slots = [...files].flatMap(file => evidence.view.specs.get(file)?.slots ?? []);
-  const visible = slots.filter(slot => !runningOnly || slot.status === 'running');
+  const slots = [...files].flatMap((file) => evidence.view.specs.get(file)?.slots ?? []);
+  const visible = slots.filter((slot) => !runningOnly || slot.status === 'running');
   if (!slots.length) return null;
-  return <section aria-label="Chart tests" className={styles.block} style={compact ? { maxHeight: '40vh', overflowY: 'auto', flexShrink: 0 } : undefined}>
-    <h3 className={styles.blockTitle}>Tests</h3>
-    <TestFilter slots={slots} />
-    <ul className={styles.results}><Bounded items={visible} size={40} more="More tests">{slot =>
-      <ResultRow key={slot.key} label={slot.title} slot={slot} open={selectedKey === slot.key}
-        onToggle={() => { setSelectedKey(selectedKey === slot.key ? null : slot.key); setSelection({ check: slot.id }); setRecording(false); setMoment(null); }}>
-        {recording ? <Suspense fallback={<p role="status">Loading the recording…</p>}><RecordingPage slot={slot} layerId={selection.layer} label={slot.title} back="Test report" moment={moment} onMoment={setMoment} onClose={() => setRecording(false)} /></Suspense>
-          : <CheckDetail slot={slot} layerId={selection.layer} reads="steps" select={patch => {
-            setSelection({ check: patch.check ?? slot.id, layer: patch.layer ?? undefined });
-            if (patch.view === 'recording') { setRecording(true); setMoment(null); }
-          }} />}
-      </ResultRow>
-    }</Bounded></ul>
-  </section>;
+  return (
+    <Box aria-label="Chart tests" mah={compact ? '40vh' : undefined} p="md" component="section" mb="lg">
+      <Title order={3} mb="sm">
+        Tests
+      </Title>
+      <TestFilter slots={slots} />
+      <List spacing="xs" listStyleType="none">
+        <Bounded items={visible} size={40} more="More tests">
+          {(slot) => (
+            <ResultRow
+              key={slot.key}
+              label={slot.title}
+              slot={slot}
+              open={selectedKey === slot.key}
+              onToggle={() => {
+                setSelectedKey(selectedKey === slot.key ? null : slot.key);
+                setSelection({ check: slot.id });
+                setRecording(false);
+                setMoment(null);
+              }}
+            >
+              {recording ? (
+                <Suspense fallback={<p role="status">Loading the recording…</p>}>
+                  <RecordingPage
+                    slot={slot}
+                    layerId={selection.layer}
+                    label={slot.title}
+                    back="Test report"
+                    moment={moment}
+                    onMoment={setMoment}
+                    onClose={() => setRecording(false)}
+                  />
+                </Suspense>
+              ) : (
+                <CheckDetail
+                  slot={slot}
+                  layerId={selection.layer}
+                  reads="steps"
+                  select={(patch) => {
+                    setSelection({ check: patch.check ?? slot.id, layer: patch.layer ?? undefined });
+                    if (patch.view === 'recording') {
+                      setRecording(true);
+                      setMoment(null);
+                    }
+                  }}
+                />
+              )}
+            </ResultRow>
+          )}
+        </Bounded>
+      </List>
+    </Box>
+  );
 }

package/packages/visualizer/src/views/ProductPage.tsx

@@ -1,35 +1,36 @@
+import { Container, Text, Title } from '@mantine/core';
 import { Navigate, useSearch } from '@tanstack/react-router';
-
 import { useAtlas } from '../app/atlas-context';
 import type { AtlasView } from '../data/model';
-import styles from './views.module.css';
-
 function openingPlace(view: AtlasView) {
   const screens = [...view.states.values()].filter((state) => state.kind === 'screen' || state.kind === 'final');
   const withFailedEvent = screens.find((state) => state.outgoing.some((id) => view.transitions.get(id)?.status === 'failed'));
   return withFailedEvent ?? screens.find((state) => state.status === 'failed') ?? screens[0] ?? null;
 }
-
 export function ProductPage() {
   const { view } = useAtlas();
   const search = useSearch({ strict: false });
   const run = typeof search.run === 'string' ? search.run : undefined;
-  if (!view) return <div className={styles.plateScroll} role="status">Loading the spec…</div>;
+  if (!view)
+    return (
+      <Container role="status" component="article" size="xl" w="100%" py="xl">
+        Loading the spec…
+      </Container>
+    );
   const place = openingPlace(view);
   if (!place) {
     return (
-      <article className={styles.plateScroll}>
-        <h1 className={styles.plateTitle}>{view.title}</h1>
-        <p className={styles.lead}>This spec has no screens yet.</p>
-      </article>
+      <Container component="article" size="xl" w="100%" py="xl">
+        <Title order={1} mb="sm">
+          {view.title}
+        </Title>
+        <Text component="div" c="dimmed">
+          This spec has no screens yet.
+        </Text>
+      </Container>
     );
   }
   return (
-    <Navigate
-      to="/chart/$chartId"
-      params={{ chartId: place.chartId }}
-      search={{ ...(run ? { run } : {}), screen: place.name }}
-      replace
-    />
+    <Navigate to="/chart/$chartId" params={{ chartId: place.chartId }} search={{ ...(run ? { run } : {}), screen: place.name }} replace />
   );
 }