@crvouga/atlas 0.10.2 → 0.11.0

package/packages/visualizer/src/evidence/decision-table.tsx

@@ -1,10 +1,7 @@
+import { Alert, Box, Table, Text, Title } from '@mantine/core';
 import { XMLParser, XMLValidator } from 'fast-xml-parser';
-
-import styles from './evidence.module.css';
-
 type Xml = Record<string, unknown>;
 const array = (value: unknown): Xml[] => (Array.isArray(value) ? value : value ? [value] : []) as Xml[];
-
 export function decisionTables(text: string) {
   if (XMLValidator.validate(text) !== true) throw new Error('Invalid decision-table XML');
   const doc = new XMLParser({ ignoreAttributes: false, removeNSPrefix: true, parseTagValue: false }).parse(text) as Xml;
@@ -21,47 +18,59 @@ export function decisionTables(text: string) {
     id: String(table['@_id'] ?? 'Decision table'),
     policy: String(table['@_hitPolicy'] ?? 'UNIQUE'),
     inputs: array(table.input).length,
-    columns: [...array(table.input), ...array(table.output)].map((column) => String(column['@_label'] ?? column['@_name'] ?? (column.inputExpression as Xml | undefined)?.text ?? 'Condition')),
+    columns: [...array(table.input), ...array(table.output)].map((column) =>
+      String(column['@_label'] ?? column['@_name'] ?? (column.inputExpression as Xml | undefined)?.text ?? 'Condition')
+    ),
     rows: array(table.rule).map((rule) => [...array(rule.inputEntry), ...array(rule.outputEntry)].map((entry) => String(entry.text ?? '')))
   }));
 }
-
 /** Each decision as its conditions and the outcomes they lead to, side by side. */
 export function DecisionTables({ text }: { text: string }) {
   let tables: ReturnType<typeof decisionTables>;
   try {
     tables = decisionTables(text);
   } catch (error) {
-    return <p role="alert" className={styles.notice}>This decision table could not be read: {error instanceof Error ? error.message : String(error)}</p>;
+    return (
+      <Alert role="alert" color={'red'} my="sm">
+        This decision table could not be read: {error instanceof Error ? error.message : String(error)}
+      </Alert>
+    );
   }
   return (
     <>
       {tables.map((table) => (
-        <section key={table.id} className={styles.block}>
-          <h2 className={styles.blockTitle}>
-            {table.id} <span className={styles.aside}>Hit policy {table.policy.toLowerCase()}</span>
-          </h2>
-          <div className={styles.tableScroll}>
-            <table className={styles.table}>
-              <thead>
-                <tr>
+        <Box key={table.id} component="section" mb="lg">
+          <Title order={2} mb="sm">
+            {table.id}{' '}
+            <Text span inherit c="dimmed">
+              Hit policy {table.policy.toLowerCase()}
+            </Text>
+          </Title>
+          <Table.ScrollContainer minWidth={600}>
+            <Table>
+              <Table.Thead>
+                <Table.Tr>
                   {table.columns.map((column, index) => (
-                    <th key={index} scope="col" data-output={index >= table.inputs || undefined}>{column}</th>
+                    <Table.Th key={index} scope="col" data-output={index >= table.inputs || undefined}>
+                      {column}
+                    </Table.Th>
                   ))}
-                </tr>
-              </thead>
-              <tbody>
+                </Table.Tr>
+              </Table.Thead>
+              <Table.Tbody>
                 {table.rows.map((row, index) => (
-                  <tr key={index}>
+                  <Table.Tr key={index}>
                     {row.map((cell, at) => (
-                      <td key={at} data-output={at >= table.inputs || undefined}>{cell || '—'}</td>
+                      <Table.Td key={at} data-output={at >= table.inputs || undefined}>
+                        {cell || '—'}
+                      </Table.Td>
                     ))}
-                  </tr>
+                  </Table.Tr>
                 ))}
-              </tbody>
-            </table>
-          </div>
-        </section>
+              </Table.Tbody>
+            </Table>
+          </Table.ScrollContainer>
+        </Box>
       ))}
     </>
   );

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

@@ -1,44 +1,66 @@
 import type { SpecEvidence } from '@crvouga/atlas/reports/evidence-view';
-
+import { Box, Container, List, Title } from '@mantine/core';
 import type { SpecKind } from '../spec-kind';
 import { CheckDetail, ResultRow, type CheckSelection, type SelectCheck } from './check-detail';
 import { DecisionTables } from './decision-table';
-import styles from './evidence.module.css';
 import { Bounded } from './marks';
-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 decision table, structure or objective: what it says, and each check recorded against it. */
 export function DocumentPage({ file, text, kind, entry, selection, select }: Props) {
   const slots = entry?.slots ?? [];
   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 name = file.split('/').at(-1)!.replace(/\.[^.]+$/, '').replace(/\.openslo$/, '');
+  const name = file
+    .split('/')
+    .at(-1)!
+    .replace(/\.[^.]+$/, '')
+    .replace(/\.openslo$/, '');
   return (
-    <article className={styles.page}>
+    <Container component="article" size="xl" w="100%" py="xl">
       <SpecHeader title={name} file={file} kind={kind} entry={entry} />
-      <SpecSnapshot title={name} text={text} kind={kind.one} />
-      <TestFilter slots={slots} />
-      {visible.length > 0 && (
-        <section className={styles.block}>
-          <h2 className={styles.blockTitle}>Checks</h2>
-          <ul className={styles.results}>
-            <Bounded items={visible} size={40} more="More checks">
-              {(slot) => (
-                <ResultRow key={slot.key} 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="steps" />
-                </ResultRow>
-              )}
-            </Bounded>
-          </ul>
-        </section>
-      )}
-      {kind.id === 'dmn' && <DecisionTables text={text} />}
-      <SourceText text={text} open={kind.id !== 'dmn'} />
-    </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">
+              Checks
+            </Title>
+            <List spacing="xs" listStyleType="none">
+              <Bounded items={visible} size={40} more="More checks">
+                {(slot) => (
+                  <ResultRow
+                    key={slot.key}
+                    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="steps"
+                    />
+                  </ResultRow>
+                )}
+              </Bounded>
+            </List>
+          </Box>
+        )}
+        {kind.id === 'dmn' && <DecisionTables text={text} />}
+      </Box>
+    </Container>
   );
 }

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

@@ -1,92 +1,160 @@
 import type { CheckSlot, SpecEvidence } from '@crvouga/atlas/reports/evidence-view';
+import { Alert, Box, Container, List, Stack, Text, Title } from '@mantine/core';
 import { useMemo } from 'react';
-
 import type { SpecKind } from '../spec-kind';
 import { CheckDetail, PlainSteps, ResultRow, type CheckSelection, type SelectCheck } from './check-detail';
-import styles from './evidence.module.css';
 import { featureModel, scenarioLabel, slotsByScenario, type FeatureModel, type FeatureScenario } from './gherkin';
 import { Bounded } from './marks';
-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 };
-
-function parse(text: string): { feature: FeatureModel | null; error: string | null } {
+type Props = {
+  file: string;
+  text: string;
+  kind: SpecKind;
+  entry: SpecEvidence | undefined;
+  selection: CheckSelection;
+  select: SelectCheck;
+};
+function parse(text: string): {
+  feature: FeatureModel | null;
+  error: string | null;
+} {
   try {
     return { feature: featureModel(text), error: null };
   } catch (error) {
     return { feature: null, error: error instanceof Error ? error.message : String(error) };
   }
 }
-
 /** A feature read as its rules and scenarios, each scenario with what was recorded when it ran. */
 export function FeaturePage({ file, text, kind, entry, selection, select }: Props) {
   const { feature, error } = useMemo(() => parse(text), [text]);
   const slots = entry?.slots ?? [];
   const runningOnly = useRunningFilter();
-  const filed = useMemo(() => (feature ? slotsByScenario(feature, slots) : { byScenario: new Map<string, CheckSlot[]>(), leftOver: slots }), [feature, slots]);
+  const filed = useMemo(
+    () => (feature ? slotsByScenario(feature, slots) : { byScenario: new Map<string, CheckSlot[]>(), leftOver: slots }),
+    [feature, slots]
+  );
   const scenarios = feature?.rules.flatMap((rule) => rule.scenarios.filter((scenario) => !scenario.background)) ?? [];
-  const planned = scenarios.reduce((count, scenario) => count + Math.max(1, filed.byScenario.get(scenario.name)?.length ?? 0), 0) + filed.leftOver.length;
+  const planned =
+    scenarios.reduce((count, scenario) => count + Math.max(1, filed.byScenario.get(scenario.name)?.length ?? 0), 0) + filed.leftOver.length;
   const toggle = (id: string) => select({ check: selection.check === id ? null : id, layer: null });
-
   const rows = (scenario: FeatureScenario) => {
     const written = <PlainSteps steps={scenario.steps} examples={scenario.examples} />;
-    const recorded = (filed.byScenario.get(scenario.name) ?? []).filter(slot => !runningOnly || slot.status === 'running');
+    const recorded = (filed.byScenario.get(scenario.name) ?? []).filter((slot) => !runningOnly || slot.status === 'running');
     if (!recorded.length) {
       if (runningOnly) return null;
       const id = `scenario:${scenario.name}`;
       return (
         <ResultRow key={id} label={scenario.name} slot={null} open={selection.check === id} onToggle={() => toggle(id)}>
-          <p className={styles.aside}>No completed test report for this scenario yet.</p>
+          <Text component="div" c="dimmed">
+            No completed test report for this scenario yet.
+          </Text>
           {written}
         </ResultRow>
       );
     }
     return recorded.map((slot) => (
-      <ResultRow key={slot.key} label={scenarioLabel(feature!.name, 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="steps" written={written} />
+      <ResultRow
+        key={slot.key}
+        label={scenarioLabel(feature!.name, 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="steps"
+          written={written}
+        />
       </ResultRow>
     ));
   };
-
   return (
-    <article className={styles.page}>
-      <SpecHeader title={feature?.name || file.split('/').at(-1)!} file={file} kind={kind} entry={entry} planned={feature ? planned : undefined}>
-        {feature?.description && <p className={styles.lead}>{feature.description}</p>}
+    <Container component="article" size="xl" w="100%" py="xl">
+      <SpecHeader
+        title={feature?.name || file.split('/').at(-1)!}
+        file={file}
+        kind={kind}
+        entry={entry}
+        planned={feature ? planned : undefined}
+      >
+        {feature?.description && (
+          <Text component="div" c="dimmed">
+            {feature.description}
+          </Text>
+        )}
       </SpecHeader>
-      <SpecSnapshot title={feature?.name || file.split('/').at(-1)!} text={text} kind={kind.one} />
-      <TestFilter slots={slots} />
-      {error && <p role="alert" className={styles.notice}>This feature could not be parsed: {error}</p>}
-      {feature?.rules.map((rule, index) => (
-        <section key={index} className={styles.block}>
-          {rule.name !== null && <h2 className={styles.blockTitle}>{rule.name}</h2>}
-          {rule.description && <p className={styles.blockLead}>{rule.description}</p>}
-          {rule.scenarios.filter((scenario) => scenario.background).map((scenario, at) => (
-            <div key={at} className={styles.background}>
-              <p className={styles.aside}>Before each scenario{scenario.name ? `: ${scenario.name}` : ''}</p>
-              <PlainSteps steps={scenario.steps} />
-            </div>
-          ))}
-          <ul className={styles.results}>{rule.scenarios.filter((scenario) => !scenario.background).map(rows)}</ul>
-        </section>
-      ))}
-      {filed.leftOver.some(slot => !runningOnly || slot.status === 'running') && (
-        <section className={styles.block}>
-          <h2 className={styles.blockTitle}>{feature ? 'Other recorded results' : 'Recorded results'}</h2>
-          {feature && <p className={styles.blockLead}>Recorded against this file under a name no scenario has now.</p>}
-          <ul className={styles.results}>
-            <Bounded items={filed.leftOver.filter(slot => !runningOnly || slot.status === 'running')} size={40} more="More results">
-              {(slot) => (
-                <ResultRow key={slot.key} label={feature ? scenarioLabel(feature.name, slot.title) : 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="steps" />
-                </ResultRow>
-              )}
-            </Bounded>
-          </ul>
-        </section>
-      )}
-      <SourceText text={text} label="Feature source" open={!feature} />
-    </article>
+      <SourceText text={text} file={file} withResults />
+      <Box component="section" id="spec-results" aria-label="Recorded results" tabIndex={-1}>
+        <TestFilter slots={slots} />
+        {error && (
+          <Alert role="alert" color={'red'} my="sm">
+            This feature could not be parsed: {error}
+          </Alert>
+        )}
+        {feature?.rules.map((rule, index) => (
+          <Box key={index} component="section" mb="lg">
+            {rule.name !== null && (
+              <Title order={2} mb="sm">
+                {rule.name}
+              </Title>
+            )}
+            {rule.description && (
+              <Text component="div" c="dimmed">
+                {rule.description}
+              </Text>
+            )}
+            {rule.scenarios
+              .filter((scenario) => scenario.background)
+              .map((scenario, at) => (
+                <Stack key={at} gap="sm" miw={0}>
+                  <Text component="div" c="dimmed">
+                    Before each scenario{scenario.name ? `: ${scenario.name}` : ''}
+                  </Text>
+                  <PlainSteps steps={scenario.steps} />
+                </Stack>
+              ))}
+            <List spacing="xs" listStyleType="none">
+              {rule.scenarios.filter((scenario) => !scenario.background).map(rows)}
+            </List>
+          </Box>
+        ))}
+        {filed.leftOver.some((slot) => !runningOnly || slot.status === 'running') && (
+          <Box component="section" mb="lg">
+            <Title order={2} mb="sm">
+              {feature ? 'Other recorded results' : 'Recorded results'}
+            </Title>
+            {feature && (
+              <Text component="div" c="dimmed">
+                Recorded against this file under a name no scenario has now.
+              </Text>
+            )}
+            <List spacing="xs" listStyleType="none">
+              <Bounded items={filed.leftOver.filter((slot) => !runningOnly || slot.status === 'running')} size={40} more="More results">
+                {(slot) => (
+                  <ResultRow
+                    key={slot.key}
+                    label={feature ? scenarioLabel(feature.name, slot.title) : 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="steps"
+                    />
+                  </ResultRow>
+                )}
+              </Bounded>
+            </List>
+          </Box>
+        )}
+      </Box>
+    </Container>
   );
 }

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

@@ -1,119 +1,152 @@
+import { IconCheck, IconX, IconCircle } from '@tabler/icons-react';
 import type { BackendInfo, LayerHeader, StatusCounts } from '@crvouga/atlas/reports/evidence-types';
 import type { SpecStatus, SpecSummary } from '@crvouga/atlas/reports/evidence-view';
 import { environmentLabel } from '@crvouga/atlas/reports/layer-axes';
+import { Badge, Box, Button, Flex, List, Loader, Progress, Text, ThemeIcon } from '@mantine/core';
 import { useState, type ReactNode } from 'react';
-
-import styles from './evidence.module.css';
+import { statusColor } from '../ui/theme';
 import { ago, exactTime, plural, shortSha, statusWord } from './format';
-
-/** The outcome as a small mark. Its word is always available to a screen reader. */
+/** A named outcome mark; color is always accompanied by a distinct symbol and accessible text. */
 export function StatusMark({ status, size = 16 }: { status: SpecStatus; size?: number }) {
-  const common = { width: size, height: size, viewBox: '0 0 16 16', className: styles.mark, 'data-status': status, role: 'img', 'aria-label': statusWord(status) } as const;
-  if (status === 'passed') {
-    return (
-      <svg {...common}>
-        <circle cx="8" cy="8" r="7" fill="currentColor" />
-        <path d="M4.7 8.3l2.2 2.2 4.4-4.7" fill="none" stroke="#fff" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" />
-      </svg>
-    );
-  }
-  if (status === 'failed') {
-    return (
-      <svg {...common}>
-        <circle cx="8" cy="8" r="7" fill="currentColor" />
-        <path d="M5.4 5.4l5.2 5.2M10.6 5.4l-5.2 5.2" fill="none" stroke="#fff" strokeWidth="1.7" strokeLinecap="round" />
-      </svg>
-    );
-  }
-  if (status === 'running') {
-    return (
-      <svg {...common}>
-        <circle cx="8" cy="8" r="6" fill="none" stroke="currentColor" strokeOpacity="0.25" strokeWidth="2" />
-        <path d="M8 2a6 6 0 0 1 6 6" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
-      </svg>
-    );
-  }
+  if (status === 'running') return <Loader size={size} role="img" aria-label={statusWord(status)} />;
   return (
-    <svg {...common}>
-      <circle cx="8" cy="8" r="6" fill="none" stroke="currentColor" strokeWidth="1.5" strokeDasharray={status === 'none' ? '2.2 2.2' : undefined} />
-    </svg>
+    <ThemeIcon
+      size={size}
+      radius="xl"
+      variant={status === 'none' ? 'outline' : 'light'}
+      color={statusColor(status)}
+      role="img"
+      aria-label={statusWord(status)}
+    >
+      {status === 'passed' ? (
+        <IconCheck size={size} aria-hidden="true" />
+      ) : status === 'failed' ? (
+        <IconX size={size} aria-hidden="true" />
+      ) : (
+        <IconCircle size={size} aria-hidden="true" />
+      )}
+    </ThemeIcon>
   );
 }
-
-/** What was recorded for a spec, short enough for an index row. */
+/** An index row's outcome, with the exact recorded count. */
 export function Tally({ summary }: { summary: SpecSummary }) {
-  if (summary.status === 'none') return <span className={styles.tally} data-status="none">No results</span>;
-  if (summary.counts.failed) return <span className={styles.tally} data-status="failed">{summary.counts.failed} failed</span>;
-  if (summary.counts.running) return <span className={styles.tally} data-status="running">Running</span>;
-  if (!summary.counts.passed) return <span className={styles.tally} data-status="not-run">Not run</span>;
-  return <span className={styles.tally} data-status="passed">{summary.counts.passed === summary.total ? `${summary.total} passed` : `${summary.counts.passed}/${summary.total}`}</span>;
+  const label =
+    summary.status === 'none'
+      ? 'No results'
+      : summary.counts.failed
+        ? `${summary.counts.failed} failed`
+        : summary.counts.running
+          ? 'Running'
+          : !summary.counts.passed
+            ? 'Not run'
+            : summary.counts.passed === summary.total
+              ? `${summary.total} passed`
+              : `${summary.counts.passed}/${summary.total}`;
+  return (
+    <Badge color={statusColor(summary.status)} size="sm">
+      {label}
+    </Badge>
+  );
 }
-
 const SEGMENTS = ['failed', 'running', 'passed', 'not-run'] as const;
-
-/** Proportions of the recorded outcomes. With nothing recorded it is an empty track. */
+/** Recorded outcome proportions. Missing evidence remains an unfilled gray segment. */
 export function Meter({ counts, missing = 0 }: { counts: StatusCounts; missing?: number }) {
   const total = SEGMENTS.reduce((sum, status) => sum + counts[status], 0) + missing;
   return (
-    <span className={styles.meter} aria-hidden="true">
-      {total > 0 && SEGMENTS.map((status) => counts[status] > 0 && <span key={status} data-status={status} style={{ flexGrow: counts[status] }} />)}
-      {total > 0 && missing > 0 && <span data-status="none" style={{ flexGrow: missing }} />}
-    </span>
+    <Progress.Root size="sm" w="100%" miw="4rem" aria-hidden="true">
+      {total > 0 &&
+        SEGMENTS.map(
+          (status) =>
+            counts[status] > 0 && <Progress.Section key={status} value={(counts[status] / total) * 100} color={statusColor(status)} />
+        )}
+      {total > 0 && missing > 0 && <Progress.Section value={(missing / total) * 100} color="gray.3" />}
+    </Progress.Root>
   );
 }
-
 export function CountLine({ summary, noun, nouns }: { summary: SpecSummary; noun: string; nouns: string }) {
-  if (summary.status === 'none') return <span>No {nouns} recorded yet</span>;
-  const parts = [
-    summary.counts.failed ? <strong key="failed" className={styles.failedText}>{summary.counts.failed} failed</strong> : null,
-    summary.counts.passed ? <span key="passed">{summary.counts.passed} passed</span> : null,
-    summary.counts.running ? <span key="running">{summary.counts.running} running</span> : null,
-    summary.counts['not-run'] ? <span key="not-run">{summary.counts['not-run']} not run</span> : null
-  ].filter(Boolean);
+  if (summary.status === 'none') return <Text span>No {nouns} recorded yet</Text>;
   return (
-    <span className={styles.countLine}>
-      <span>{plural(summary.total, noun, nouns)}</span>
-      {parts}
-    </span>
+    <Flex component="span" display="inline-flex" wrap="wrap" gap="xs">
+      <Text span>{plural(summary.total, noun, nouns)}</Text>
+      {SEGMENTS.map(
+        (status) =>
+          summary.counts[status] > 0 && (
+            <Text span key={status} c={statusColor(status)}>
+              {summary.counts[status]} {status === 'not-run' ? 'not run' : status}
+            </Text>
+          )
+      )}
+    </Flex>
   );
 }
-
 export function backendLabel(backends: readonly BackendInfo[], id: string) {
   return backends.find((backend) => backend.id === id)?.label ?? id;
 }
-
-/** Where and when a result was recorded. A modified checkout is stated, not raised as an alarm. */
+/** A result's provenance; incomplete origin data is stated explicitly. */
 export function Origin({ layer, backends, now }: { layer: LayerHeader; backends: readonly BackendInfo[]; now: number }) {
   const sha = shortSha(layer.sha);
   return (
-    <span className={styles.origin}>
-      {layer.live && <span className={styles.liveTag}>Running now</span>}
-      <span>{backendLabel(backends, layer.backend)}</span>
-      {layer.branch && <span>{layer.branch}</span>}
-      {layer.environment && <span>{environmentLabel(layer.environment)}</span>}
-      {sha && <code>{sha}</code>}
-      {layer.freshness === 'modified' && <span>with local changes</span>}
-      {layer.freshness === 'unknown' && <span>origin not captured</span>}
-      {!layer.live && <time dateTime={new Date(layer.recordedAtMs).toISOString()} title={exactTime(layer.recordedAtMs)}>{ago(layer.recordedAtMs, now)}</time>}
+    <Flex component="span" display="inline-flex" wrap="wrap" gap="xs" align="center" c="dimmed" fz="xs">
+      {layer.live && <Badge size="sm">Running now</Badge>}
+      <Text span inherit>
+        {backendLabel(backends, layer.backend)}
+      </Text>
+      {layer.branch && (
+        <Text span inherit>
+          {layer.branch}
+        </Text>
+      )}
+      {layer.environment && (
+        <Text span inherit>
+          {environmentLabel(layer.environment)}
+        </Text>
+      )}
+      {sha && <Box component="code">{sha}</Box>}
+      {layer.freshness === 'modified' && (
+        <Text span inherit>
+          with local changes
+        </Text>
+      )}
+      {layer.freshness === 'unknown' && (
+        <Text span inherit>
+          origin not captured
+        </Text>
+      )}
+      {!layer.live && (
+        <time dateTime={new Date(layer.recordedAtMs).toISOString()} title={exactTime(layer.recordedAtMs)}>
+          {ago(layer.recordedAtMs, now)}
+        </time>
+      )}
       {Object.entries(layer.parameters).map(([name, value]) => (
-        <span key={name} className={styles.param}>{name}: {value}</span>
+        <Text span inherit key={name}>
+          {name}: {value}
+        </Text>
       ))}
-    </span>
+    </Flex>
   );
 }
-
-/** A long list in pages, so the page stays light however much has been recorded. */
-export function Bounded<T>({ items, size, more, children }: { items: readonly T[]; size: number; more: string; children: (item: T, index: number) => ReactNode }) {
+/** Bound long report lists without losing access to earlier evidence. */
+export function Bounded<T>({
+  items,
+  size,
+  more,
+  children
+}: {
+  items: readonly T[];
+  size: number;
+  more: string;
+  children: (item: T, index: number) => ReactNode;
+}) {
   const [shown, setShown] = useState(size);
   return (
     <>
       {items.slice(0, shown).map(children)}
       {items.length > shown && (
-        <li className={styles.moreRow}>
-          <button type="button" className={styles.quiet} onClick={() => setShown(shown + size)}>
+        <List.Item>
+          <Button variant="subtle" onClick={() => setShown(shown + size)}>
             {more} ({items.length - shown} more)
-          </button>
-        </li>
+          </Button>
+        </List.Item>
       )}
     </>
   );