@crvouga/atlas 0.0.0-stage → 0.2.0

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

@@ -0,0 +1,88 @@
+import type { CheckSlot, SpecEvidence } from '@crvouga/atlas/reports/evidence-view';
+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';
+
+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 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 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) ?? [];
+    if (!recorded.length) {
+      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>
+          {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>
+    ));
+  };
+
+  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>}
+      </SpecHeader>
+      <SpecSnapshot title={feature?.name || file.split('/').at(-1)!} text={text} kind={kind.one} />
+      {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.length > 0 && (
+        <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} 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>
+  );
+}

package/packages/visualizer/src/evidence/format.ts

@@ -0,0 +1,56 @@
+import type { EvidenceStatus } from '@crvouga/atlas/reports/explorer-types';
+import type { SpecStatus } from '@crvouga/atlas/reports/evidence-view';
+import { useEffect, useState } from 'react';
+
+export const STATUS_WORD: Record<SpecStatus, string> = {
+  passed: 'Passed',
+  failed: 'Failed',
+  running: 'Running',
+  'not-run': 'Not run',
+  none: 'No results'
+};
+
+export function statusWord(status: EvidenceStatus | SpecStatus) {
+  return STATUS_WORD[status];
+}
+
+const UNITS: readonly [number, string][] = [[86_400_000, 'd'], [3_600_000, 'h'], [60_000, 'min']];
+
+/** How long ago something was recorded, in the largest whole unit. */
+export function ago(atMs: number, nowMs: number) {
+  const elapsed = Math.max(0, nowMs - atMs);
+  for (const [size, unit] of UNITS) if (elapsed >= size) return `${Math.floor(elapsed / size)} ${unit} ago`;
+  return 'just now';
+}
+
+const dateTime = new Intl.DateTimeFormat(undefined, { month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit' });
+
+export function exactTime(atMs: number) {
+  return Number.isFinite(atMs) ? dateTime.format(new Date(atMs)) : 'Unknown time';
+}
+
+export function duration(ms: number | null | undefined) {
+  if (ms === null || ms === undefined || !Number.isFinite(ms)) return '';
+  if (ms < 1) return '<1 ms';
+  if (ms < 1_000) return `${Math.round(ms)} ms`;
+  if (ms < 60_000) return `${(ms / 1_000).toFixed(ms < 10_000 ? 1 : 0)} s`;
+  return `${Math.floor(ms / 60_000)} min ${Math.round((ms % 60_000) / 1_000)} s`;
+}
+
+export function shortSha(sha: string | null) {
+  return sha ? sha.slice(0, 7) : null;
+}
+
+export function plural(count: number, one: string, many: string) {
+  return `${count} ${count === 1 ? one : many}`;
+}
+
+/** The current time, refreshed often enough for "3 min ago" to stay true. */
+export function useNow(everyMs = 30_000) {
+  const [now, setNow] = useState(() => Date.now());
+  useEffect(() => {
+    const timer = setInterval(() => setNow(Date.now()), everyMs);
+    return () => clearInterval(timer);
+  }, [everyMs]);
+  return now;
+}

package/packages/visualizer/src/evidence/gherkin.ts

@@ -0,0 +1,98 @@
+import { AstBuilder, GherkinClassicTokenMatcher, Parser } from '@cucumber/gherkin';
+import { IdGenerator, type Step, type TableRow } from '@cucumber/messages';
+import type { CheckSlot } from '@crvouga/atlas/reports/evidence-view';
+
+export function parseFeature(text: string) {
+  return new Parser(new AstBuilder(IdGenerator.incrementing()), new GherkinClassicTokenMatcher()).parse(text);
+}
+
+export type FeatureStep = { readonly keyword: string; readonly text: string; readonly docString: string | null; readonly table: readonly (readonly string[])[] };
+export type FeatureExamples = { readonly name: string; readonly header: readonly string[]; readonly rows: readonly (readonly string[])[] };
+export type FeatureScenario = {
+  readonly keyword: string;
+  readonly name: string;
+  readonly description: string;
+  readonly background: boolean;
+  readonly steps: readonly FeatureStep[];
+  readonly examples: readonly FeatureExamples[];
+};
+export type FeatureRule = { readonly name: string | null; readonly description: string; readonly scenarios: readonly FeatureScenario[] };
+export type FeatureModel = { readonly name: string; readonly description: string; readonly rules: readonly FeatureRule[] };
+
+/** Prose as paragraphs: a feature file wraps its lines by hand, a page wraps them itself. */
+function prose(text: string) {
+  return text.trim().split(/\n\s*\n/).map((paragraph) => paragraph.replace(/\s*\n\s*/g, ' ').trim()).filter(Boolean).join('\n\n');
+}
+
+function cells(row: TableRow | undefined) {
+  return row?.cells.map((cell) => cell.value) ?? [];
+}
+
+function steps(list: readonly Step[]): FeatureStep[] {
+  return list.map((step) => ({ keyword: step.keyword.trim(), text: step.text, docString: step.docString?.content ?? null, table: step.dataTable?.rows.map(cells) ?? [] }));
+}
+
+/** A feature as rules holding scenarios. Scenarios outside a rule share one unnamed group. */
+export function featureModel(text: string): FeatureModel | null {
+  const feature = parseFeature(text).feature;
+  if (!feature) return null;
+  const rules: { name: string | null; description: string; scenarios: FeatureScenario[] }[] = [];
+  const loose = () => {
+    const last = rules.at(-1);
+    if (last && last.name === null) return last;
+    const group = { name: null, description: '', scenarios: [] as FeatureScenario[] };
+    rules.push(group);
+    return group;
+  };
+  for (const child of feature.children) {
+    const group = child.rule ? { name: child.rule.name, description: prose(child.rule.description), scenarios: [] as FeatureScenario[] } : loose();
+    if (child.rule) rules.push(group);
+    for (const entry of child.rule ? child.rule.children : [child]) {
+      const background = entry.background;
+      const scenario = entry.scenario;
+      if (background) group.scenarios.push({ keyword: background.keyword, name: background.name, description: prose(background.description), background: true, steps: steps(background.steps), examples: [] });
+      if (scenario) {
+        group.scenarios.push({
+          keyword: scenario.keyword,
+          name: scenario.name,
+          description: prose(scenario.description),
+          background: false,
+          steps: steps(scenario.steps),
+          examples: scenario.examples.map((example) => ({ name: example.name, header: cells(example.tableHeader), rows: example.tableBody.map(cells) }))
+        });
+      }
+    }
+  }
+  return { name: feature.name, description: prose(feature.description), rules };
+}
+
+/** What a recorded check is called without the feature in front: the scenario, then the example. */
+export function scenarioLabel(feature: string, title: string) {
+  const head = `${feature}: `;
+  return title.startsWith(head) ? title.slice(head.length) : title;
+}
+
+/** The example a result ran, when its scenario has several. */
+export function exampleLabel(scenario: string, label: string) {
+  return label.startsWith(`${scenario} — `) ? label.slice(scenario.length + 3) : null;
+}
+
+/**
+ * File each recorded check under the scenario it ran. An outline has one result per example. A
+ * result no scenario claims (the scenario was renamed, or the check is not a scenario) is returned
+ * as left over, never dropped.
+ */
+export function slotsByScenario(feature: FeatureModel, slots: readonly CheckSlot[]) {
+  const names = feature.rules.flatMap((rule) => rule.scenarios.filter((scenario) => !scenario.background).map((scenario) => scenario.name));
+  // The longest name wins, so "Join" never claims "Join — again" from a scenario called that.
+  const longestFirst = [...new Set(names)].sort((a, b) => b.length - a.length);
+  const byScenario = new Map<string, CheckSlot[]>();
+  const leftOver: CheckSlot[] = [];
+  for (const slot of slots) {
+    const label = scenarioLabel(feature.name, slot.title);
+    const owner = longestFirst.find((name) => label === name || label.startsWith(`${name} — `));
+    if (owner === undefined) leftOver.push(slot);
+    else byScenario.set(owner, [...(byScenario.get(owner) ?? []), slot]);
+  }
+  return { byScenario, leftOver };
+}

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

@@ -0,0 +1,118 @@
+import type { BackendInfo, LayerHeader, StatusCounts } from '@crvouga/atlas/reports/evidence-types';
+import type { SpecStatus, SpecSummary } from '@crvouga/atlas/reports/evidence-view';
+import { useState, type ReactNode } from 'react';
+
+import styles from './evidence.module.css';
+import { ago, exactTime, plural, shortSha, statusWord } from './format';
+
+/** The outcome as a small mark. Its word is always available to a screen reader. */
+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>
+    );
+  }
+  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>
+  );
+}
+
+/** What was recorded for a spec, short enough for an index row. */
+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 SEGMENTS = ['failed', 'running', 'passed', 'not-run'] as const;
+
+/** Proportions of the recorded outcomes. With nothing recorded it is an empty track. */
+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>
+  );
+}
+
+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);
+  return (
+    <span className={styles.countLine}>
+      <span>{plural(summary.total, noun, nouns)}</span>
+      {parts}
+    </span>
+  );
+}
+
+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. */
+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>}
+      {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>}
+      {Object.entries(layer.parameters).map(([name, value]) => (
+        <span key={name} className={styles.param}>{name}: {value}</span>
+      ))}
+    </span>
+  );
+}
+
+/** 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 }) {
+  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)}>
+            {more} ({items.length - shown} more)
+          </button>
+        </li>
+      )}
+    </>
+  );
+}

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

@@ -0,0 +1,60 @@
+import type { SpecEvidence } from '@crvouga/atlas/reports/evidence-view';
+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';
+
+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 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}>
+      <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} />
+      {slots.length > 0 && (
+        <section className={styles.block}>
+          <h2 className={styles.blockTitle}>Traces</h2>
+          <ul className={styles.results}>
+            <Bounded items={slots} 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>
+  );
+}

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

@@ -0,0 +1,57 @@
+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>;
+  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">
+        {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>
+        ))}
+      </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>
+            {variables.map((name) => (
+              <tr key={name} data-changed={changed(name) || undefined}>
+                <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>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,134 @@
+import { addSummaries, NO_EVIDENCE, type SpecSummary } from '@crvouga/atlas/reports/evidence-view';
+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();
+  const now = useNow();
+  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 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>
+  );
+  return (
+    <article className={styles.page}>
+      <header className={styles.specHead}>
+        <h1 className={styles.title}>{kind.label}</h1>
+        <div className={styles.summary}>
+          <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>
+          {total.status !== 'none' && (
+            <p className={styles.summaryLine}>
+              <CountLine summary={total} noun={kind.check} nouns={`${kind.check}s`} />
+            </p>
+          )}
+        </div>
+      </header>
+
+      {evidence.unavailable && (
+        <p className={styles.notice} role="alert">
+          Recorded results are unavailable. {evidence.unavailable}{' '}
+          <button type="button" className={styles.link} onClick={evidence.retry}>Try again</button>
+        </p>
+      )}
+      {evidence.notices.map((notice) => (
+        <p key={notice} className={styles.notice} role="status">
+          {notice}{' '}
+          <button type="button" className={styles.link} onClick={evidence.retry}>Try again</button>
+        </p>
+      ))}
+      {!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 run', 'more runs')}…</p>}
+
+      {evidence.active.length > 0 && (
+        <section className={styles.block}>
+          <h2 className={styles.blockTitle}>Running now</h2>
+          <ul className={styles.list}>
+            {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>
+            ))}
+          </ul>
+        </section>
+      )}
+
+      {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}>
+            <Bounded items={failing} size={12} more="More failing">
+              {specRow}
+            </Bounded>
+          </ul>
+        </section>
+      )}
+
+      {recent.length > 0 && (
+        <section className={styles.block}>
+          <h2 className={styles.blockTitle}>Latest results</h2>
+          <ul className={styles.list}>{recent.map(specRow)}</ul>
+        </section>
+      )}
+
+      {evidence.ready && evidence.pending === 0 && withResults.length === 0 && !evidence.unavailable && (
+        <p className={styles.aside}>
+          {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, 'run', 'runs')} in the combined report checked a ${kind.one}.`}
+        </p>
+      )}
+
+      {evidence.ready && (
+        <p className={styles.footLine}>
+          {plural(evidence.layers.length, 'run', 'runs')} 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>
+          {empty > 0 && (
+            <>
+              {' · '}
+              <button type="button" className={styles.link} onClick={() => setFilter('none')}>
+                Show the {empty} without results
+              </button>
+            </>
+          )}
+        </p>
+      )}
+    </article>
+  );
+}

package/packages/visualizer/src/evidence/quint.ts

@@ -0,0 +1,45 @@
+import { flattenSteps } from '@crvouga/atlas/reports/frames';
+import type { ReportStep } from '@crvouga/atlas/reports/report-types';
+
+export const QUINT_GROUPS: readonly { readonly kind: string; readonly label: string }[] = [
+  { kind: 'var', label: 'State' },
+  { kind: 'action', label: 'Actions' },
+  { kind: 'val', label: 'Values' },
+  { kind: 'pure val', label: 'Pure values' },
+  { kind: 'def', label: 'Definitions' },
+  { kind: 'pure def', label: 'Pure definitions' },
+  { kind: 'type', label: 'Types' },
+  { kind: 'const', label: 'Constants' },
+  { kind: 'import', label: 'Imports' }
+];
+
+export type QuintItem = { readonly kind: string; readonly name: string; readonly line: number; readonly text: string };
+
+/** Declarations in source order. The rest of a line is the declaration, not an execution trace. */
+export function quintOutline(text: string): QuintItem[] {
+  return text.split('\n').flatMap((line, index) => {
+    const match = /^\s*(module|import|var|const|type|action|val|def|pure val|pure def)\s+(\w+(?:::\w+)*)/.exec(line);
+    return match ? [{ kind: match[1]!, name: match[2]!, line: index + 1, text: line.trim() }] : [];
+  });
+}
+
+export type ModelState = Readonly<Record<string, unknown>>;
+
+export function traceStates(value: unknown): ModelState[] | null {
+  if (!value || typeof value !== 'object' || !('states' in value) || !Array.isArray(value.states)) return null;
+  if (!value.states.every((state) => state !== null && typeof state === 'object' && !Array.isArray(state))) return null;
+  return value.states as ModelState[];
+}
+
+/** Read recorded assignment text without evaluating Quint or inventing states. */
+export function recordedModelStates(steps: readonly ReportStep[]) {
+  return flattenSteps(steps)
+    .filter(({ step }) => step.kind === 'quint' && step.detail)
+    .map(({ step }) => {
+      const state: Record<string, unknown> = { '#action': step.title };
+      const assignments = [...step.detail!.matchAll(/^([A-Za-z_]\w*) = ([\s\S]*?)(?=^[A-Za-z_]\w* = |$(?![\s\S]))/gm)];
+      for (const match of assignments) state[match[1]!] = match[2]!.trimEnd();
+      return { step, state };
+    })
+    .filter(({ state }) => Object.keys(state).length > 1);
+}