@crvouga/atlas 0.0.0-stage → 0.2.0

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

@@ -0,0 +1,82 @@
+import { addSummaries, NO_EVIDENCE, type SpecSummary } from '@crvouga/atlas/reports/evidence-view';
+import { Link, useSearch } from '@tanstack/react-router';
+import { useMemo } from 'react';
+
+import { useSearchQuery } from '../app/search-query';
+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 }[] = [
+  { id: 'all', label: 'All', keeps: () => true },
+  { id: 'results', label: 'Results', keeps: (summary) => summary.status !== 'none' },
+  { id: 'failed', label: 'Failing', keeps: (summary) => summary.counts.failed > 0 },
+  { id: 'none', label: 'None', keeps: (summary) => summary.status === 'none' }
+];
+
+function hit(query: string, text: string) {
+  const needle = query.trim().toLowerCase();
+  return needle.length === 0 || text.toLowerCase().includes(needle);
+}
+
+/** 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();
+  const { query } = useSearchQuery();
+  const search = useSearch({ strict: false });
+  const filter = useUiStore((s) => s.resultFilter);
+  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 })),
+    // `titleOf` reads the outline the view was built from.
+    [evidence.files, evidence.view, kind]
+  );
+  const searched = rows.filter((row) => hit(query, `${row.title} ${row.file}`));
+  const keeps = FILTERS.find((entry) => entry.id === filter)!.keeps;
+  const visible = searched.filter((row) => keeps(row.summary));
+  const groups = useMemo(() => {
+    const byFolder = new Map<string, typeof visible>();
+    for (const row of visible) byFolder.set(folderOf(row.file), [...(byFolder.get(folderOf(row.file)) ?? []), row]);
+    return [...byFolder];
+  }, [visible]);
+  return (
+    <nav className={styles.index} aria-label={`${kind.label} ${kind.many}`}>
+      <div className={styles.filters} role="group" aria-label="Show">
+        {FILTERS.map((entry) => (
+          <button key={entry.id} type="button" aria-pressed={filter === entry.id} onClick={() => setFilter(entry.id)}>
+            {entry.label} <span>{searched.filter((row) => entry.keeps(row.summary)).length}</span>
+          </button>
+        ))}
+      </div>
+      {evidence.filesPending && <p className={styles.indexNote}>Loading…</p>}
+      {evidence.filesError && <p className={styles.indexNote}>The file list could not be loaded.</p>}
+      {!evidence.filesPending && !evidence.filesError && visible.length === 0 && (
+        <p className={styles.indexNote}>
+          {rows.length === 0 ? `No ${kind.many} in this spec set.` : query.trim() ? 'Nothing matches.' : filter === 'failed' ? `No failing ${kind.many}.` : filter === 'results' ? `No ${kind.many} with results yet.` : `Every ${kind.one} has results.`}
+        </p>
+      )}
+      {groups.map(([folder, entries]) => (
+        <section key={folder || kind.id}>
+          <h3>
+            <span>{folder || kind.label}</span>
+            <Tally summary={addSummaries(entries.map((row) => row.summary))} />
+          </h3>
+          <ul>
+            {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>
+            ))}
+          </ul>
+        </section>
+      ))}
+    </nav>
+  );
+}

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

@@ -0,0 +1,92 @@
+import { useQuery } from '@tanstack/react-query';
+import { useNavigate, useParams, useSearch } from '@tanstack/react-router';
+
+import { keys, specKey, useAdapter } from '../data/queries';
+import { outlinePath, specFile, specKind } from '../spec-kind';
+import type { SelectCheck } from './check-detail';
+import { DocumentPage } from './document-page';
+import { useEvidence } from './evidence-context';
+import styles from './evidence.module.css';
+import { FeaturePage } from './feature-page';
+import { ModelPage } from './model-page';
+import { Overview } from './overview';
+import { RecordingPage } from './recording-page';
+
+/** 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' });
+  const search = useSearch({ from: '/specs/$kind' });
+  const navigate = useNavigate({ from: '/specs/$kind' });
+  const adapter = useAdapter();
+  const evidence = useEvidence();
+  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 });
+
+  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>
+    );
+  }
+  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>
+    );
+  }
+
+  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));
+    void navigate({
+      search: (prev) => ({
+        ...prev,
+        check: value(patch.check, prev.check),
+        layer: value(patch.layer, prev.layer),
+        view: value(patch.view, prev.view),
+        // Opening or leaving a recording starts from its usual moment.
+        moment: patch.view === undefined ? prev.moment : undefined
+      })
+    });
+  };
+
+  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.
+    const spec = `${evidence.titleOf(file)}: `;
+    const label = slot ? (slot.title.startsWith(spec) ? slot.title.slice(spec.length) : slot.title) : 'Recorded test';
+    return (
+      <RecordingPage
+        slot={slot}
+        layerId={search.layer}
+        label={label}
+        back={evidence.titleOf(file)}
+        moment={search.moment ?? null}
+        onMoment={(moment, replace) => void navigate({ search: (prev) => ({ ...prev, moment }), replace })}
+        onClose={() => select({ view: null })}
+      />
+    );
+  }
+  if (text.isPending) return <article className={styles.page}><p className={styles.aside} role="status">Loading the {kind.one}…</p></article>;
+  if (text.isError) {
+    return (
+      <article className={styles.page}>
+        <p className={styles.notice} role="alert">
+          The {kind.one} could not be read.{' '}
+          <button type="button" className={styles.link} onClick={() => void text.refetch()}>Try again</button>
+        </p>
+      </article>
+    );
+  }
+  const page = { file, text: text.data, kind, entry, selection: { check: search.check, layer: search.layer }, select };
+  if (kind.id === 'gherkin') return <FeaturePage {...page} />;
+  if (kind.id === 'quint') return <ModelPage {...page} />;
+  return <DocumentPage {...page} />;
+}

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

@@ -0,0 +1,26 @@
+import styles from './evidence.module.css';
+
+/** A fixed-size visual summary made from the spec itself, available before any run exists. */
+export function SpecSnapshot({ title, text, kind }: { title: string; text: string; kind: string }) {
+  const lines = text.split(/\r?\n/).map((line) => line.trim()).filter(Boolean).slice(0, 4);
+  return (
+    <figure className={styles.specSnapshot}>
+      <figcaption>Spec snapshot <span>Generated from {kind} source</span></figcaption>
+      <svg className={styles.specSnapshotImage} viewBox="0 0 960 260" role="img" aria-label={`Visual summary of ${title}`}>
+        <rect width="960" height="260" rx="18" />
+        <text className={styles.snapshotTitle} x="32" y="52">{title}</text>
+        {lines.map((line, index) => {
+          const y = 90 + index * 40;
+          return (
+            <g key={`${index}-${line}`}>
+              <circle cx="42" cy={y - 5} r="5" />
+              <rect className={styles.snapshotLine} x="60" y={y - 15} width="868" height="28" rx="7" />
+              <text className={styles.snapshotText} x="76" y={y + 4}>{line.slice(0, 112)}{line.length > 112 ? '…' : ''}</text>
+            </g>
+          );
+        })}
+        {lines.length === 0 && <text className={styles.snapshotText} x="32" y="112">No readable source lines</text>}
+      </svg>
+    </figure>
+  );
+}

package/packages/visualizer/src/layout/graph.test.ts

@@ -0,0 +1,113 @@
+import { describe, expect, it } from 'bun:test';
+
+import { buildAtlasView } from '../data/model';
+import { parseSpec } from '../data/parse/spec';
+import { loadFixture } from '../data/testing/load-fixture';
+import { MAP_PLACE_CAP, chartGraph, mapScope } from './graph';
+
+function viewFrom(yaml: string) {
+  const spec = parseSpec({ ref: null, files: [{ path: 'wide.machine.yaml', text: yaml }] });
+  return buildAtlasView({ spec, specIssues: [], runs: [], run: null, runIssues: [], resolveMedia: () => '' });
+}
+
+function places(count: number, id: string) {
+  const states = Array.from({ length: count }, (_, i) => `          P${i}: {}`).join('\n');
+  return `id: ${id}\ninitial: Root\nstates:\n  Root:\n    initial: P0\n    states:\n${states}\n`;
+}
+
+function wideMachine() {
+  const big = Array.from({ length: 30 }, (_, i) => (i === 0 ? `          B0:\n            on:\n              Goes:\n                target: '#B1'` : `          B${i}: {}`)).join('\n');
+  return `id: Wide
+initial: Root
+states:
+  Root:
+    initial: Big
+    states:
+      Big:
+        initial: B0
+        states:
+${big}
+      Small:
+        initial: S0
+        states:
+          S0:
+            on:
+              Leaves:
+                target: '#B0'
+              Leaves again:
+                target: '#B1'
+          S1: {}
+      Alone:
+        on:
+          Waves:
+            target: '#S0'
+`;
+}
+
+describe('chart map scope', () => {
+  const view = viewFrom(wideMachine());
+
+  it('draws one layer of a large chart instead of every nested screen', () => {
+    const graph = chartGraph(view, 'Wide');
+    expect(graph?.mode).toBe('level');
+    expect(graph?.focus).toBe('Root');
+    expect(graph?.scoped).toBe(true);
+    expect(graph?.nodes.map((node) => [node.id, node.kind, node.places])).toEqual([
+      ['Big', 'summary', 30],
+      ['Small', 'summary', 2],
+      ['Alone', 'screen', undefined]
+    ]);
+    expect(graph?.nodes.some((node) => node.id === 'B0')).toBe(false);
+    const bundle = graph?.edges.find((edge) => edge.bundle);
+    expect(bundle).toMatchObject({ source: 'Small', target: 'Big', bundle: { label: '2 events', count: 2, group: 'Big', screen: null } });
+    expect(graph?.edges.find((edge) => edge.transitionId)?.source).toBe('Alone');
+  });
+
+  it('opens a large section as its own layer and a small section in full', () => {
+    const big = chartGraph(view, 'Wide', 'Big');
+    expect(big?.mode).toBe('level');
+    expect(big?.nodes).toHaveLength(30);
+    expect(big?.nodes.every((node) => node.kind === 'screen')).toBe(true);
+    expect(big?.nodes.map((node) => node.id)).toContain('B0');
+    expect(big?.edges.map((edge) => edge.transitionId).filter(Boolean)).toEqual([expect.stringContaining('Goes')]);
+
+    const small = chartGraph(view, 'Wide', 'Small');
+    expect(small?.mode).toBe('subtree');
+    expect(small?.nodes.map((node) => node.id)).toEqual(expect.arrayContaining(['Small', 'S0', 'S1', 'B0', 'B1']));
+    expect(small?.nodes.map((node) => node.id)).not.toContain('B29');
+    expect(small?.nodes.find((node) => node.id === 'B0')?.kind).toBe('context');
+  });
+
+  it('sends a place to the section that can draw it', () => {
+    expect(mapScope(view, 'Wide', 'S0')).toBe('Small');
+    expect(mapScope(view, 'Wide', 'B0')).toBe('Big');
+    expect(mapScope(view, 'Wide', 'Small')).toBe('Small');
+    expect(mapScope(view, 'Wide', 'Big')).toBe('Big');
+    expect(chartGraph(view, 'Wide', 'missing')?.focus).toBe('Root');
+  });
+
+  it('keeps a chart at the place cap fully expanded', () => {
+    const capped = viewFrom(places(MAP_PLACE_CAP, 'Cap'));
+    const graph = chartGraph(capped, 'Cap');
+    expect(graph?.mode).toBe('full');
+    expect(graph?.scoped).toBe(false);
+    expect(graph?.nodes.map((node) => node.id)).toContain('Root');
+    expect(graph?.nodes.map((node) => node.id)).toContain(`P${MAP_PLACE_CAP - 1}`);
+    expect(graph?.nodes.some((node) => node.kind === 'summary')).toBe(false);
+  });
+});
+
+describe('coffee chart map', () => {
+  const { view } = loadFixture('spec-only');
+
+  it('still draws every state of a small chart', () => {
+    const graph = chartGraph(view, 'Coffee order');
+    const names = [...view.states.values()].filter((state) => state.chartId === 'Coffee order').map((state) => state.name);
+    expect(graph?.mode).toBe('full');
+    expect(graph?.scoped).toBe(false);
+    expect(graph?.nodes.some((node) => node.kind === 'summary')).toBe(false);
+    for (const name of names) expect(graph?.nodes.map((node) => node.id)).toContain(name);
+    expect(graph?.edges.every((edge) => edge.bundle === null)).toBe(true);
+    expect(mapScope(view, 'Coffee order', 'Browsing the menu')).toBeNull();
+  });
+});

package/packages/visualizer/src/layout/graph.ts

@@ -0,0 +1,324 @@
+import { worstOf, type AtlasView, type ChartView, type ItemStatus, type StateView, type TransitionView } from '../data/model';
+
+export const SIZES = {
+  screen: { width: 156, height: 372 },
+  context: { width: 132, height: 132 },
+  chartLink: { width: 280, height: 200 },
+  summary: { width: 220, height: 96 },
+  chip: { height: 28, minWidth: 64, maxWidth: 240, perChar: 6.3, padding: 46 },
+  groupPadding: { top: 48, left: 24, bottom: 24, right: 24 }
+} as const;
+
+/** A section with more places than this is drawn as one layer of boxes, not every nested screen. */
+export const MAP_PLACE_CAP = 24;
+
+export type LayoutNodeKind = 'screen' | 'group' | 'region' | 'parallel' | 'chart-link' | 'context' | 'summary';
+
+export type LayoutNode = {
+  id: string;
+  parent: string | null;
+  kind: LayoutNodeKind;
+  width: number;
+  height: number;
+  /** Atomic screens inside a collapsed box. */
+  places?: number;
+  /** Rolled-up status of those screens. A failure anywhere shows on the box. */
+  status?: ItemStatus;
+};
+
+export type LayoutBundle = {
+  label: string;
+  status: ItemStatus;
+  count: number;
+  group: string | null;
+  screen: string | null;
+};
+
+export type LayoutEdge = {
+  id: string;
+  transitionId: string | null;
+  source: string;
+  target: string;
+  labelWidth: number;
+  bundle: LayoutBundle | null;
+  /** Transitions folded into a bundle, so a journey can still dim the chip. */
+  memberIds?: string[];
+};
+
+export type LayoutInput = {
+  chartId: string;
+  key: string;
+  nodes: LayoutNode[];
+  edges: LayoutEdge[];
+  /** A committed layout file describes the whole chart, so a scoped map ignores it. */
+  scoped: boolean;
+  focus: string | null;
+  mode: 'full' | 'subtree' | 'level';
+};
+
+export type MapFrame = {
+  mode: 'full' | 'subtree' | 'level';
+  focus: string | null;
+  scoped: boolean;
+  /** Parent of the focused section. The wider map draws that parent. */
+  wider: string | null;
+};
+
+export function chipWidth(text: string) {
+  const { minWidth, maxWidth, perChar, padding } = SIZES.chip;
+  return Math.round(Math.min(maxWidth, Math.max(minWidth, padding + text.length * perChar)));
+}
+
+function isPlace(state: StateView) {
+  return state.kind === 'screen' || state.kind === 'final' || state.kind === 'chart-link';
+}
+
+function placeCount(view: AtlasView, name: string, memo: Map<string, number>): number {
+  const hit = memo.get(name);
+  if (hit !== undefined) return hit;
+  const state = view.states.get(name);
+  if (!state || state.kind === 'chart-link') {
+    memo.set(name, 0);
+    return 0;
+  }
+  if (state.kind === 'screen' || state.kind === 'final') {
+    memo.set(name, 1);
+    return 1;
+  }
+  let count = 0;
+  for (const child of state.children) count += placeCount(view, child, memo);
+  memo.set(name, count);
+  return count;
+}
+
+function chartPlaces(view: AtlasView, chart: ChartView, memo: Map<string, number>) {
+  return chart.rootStates.reduce((count, name) => count + placeCount(view, name, memo), 0);
+}
+
+function autoFocus(view: AtlasView, chart: ChartView, memo: Map<string, number>) {
+  if (chart.rootStates.length !== 1) return null;
+  const name = chart.rootStates[0]!;
+  const state = view.states.get(name);
+  if (!state || isPlace(state) || placeCount(view, name, memo) <= MAP_PLACE_CAP) return null;
+  return name;
+}
+
+/** Which section the map draws. A small chart is always the whole chart. */
+export function mapFrame(view: AtlasView, chartId: string, requested: string | null): MapFrame {
+  const chart = view.charts.get(chartId);
+  const whole: MapFrame = { mode: 'full', focus: null, scoped: false, wider: null };
+  if (!chart) return whole;
+  const memo = new Map<string, number>();
+  if (chartPlaces(view, chart, memo) <= MAP_PLACE_CAP) return whole;
+  const auto = autoFocus(view, chart, memo);
+  let focus = requested;
+  const requestedState = focus ? view.states.get(focus) : undefined;
+  if (!requestedState || requestedState.chartId !== chartId) focus = auto;
+  else if (isPlace(requestedState)) {
+    const parent = requestedState.parent ? view.states.get(requestedState.parent) : undefined;
+    focus = parent && parent.chartId === chartId ? parent.name : auto;
+  }
+  if (!focus) return { mode: 'level', focus: null, scoped: true, wider: null };
+  const state = view.states.get(focus);
+  if (!state) return { mode: 'level', focus: null, scoped: true, wider: null };
+  const wider = state.parent && view.states.get(state.parent)?.chartId === chartId ? state.parent : null;
+  if (placeCount(view, focus, memo) <= MAP_PLACE_CAP) return { mode: 'subtree', focus, scoped: true, wider };
+  return { mode: 'level', focus, scoped: true, wider };
+}
+
+/**
+ * The section a place belongs on. Null when the whole chart is small enough to draw.
+ * A place inside a small section opens that section. A place inside a large section
+ * opens the section, one layer at a time.
+ */
+export function mapScope(view: AtlasView, chartId: string, stateName: string): string | null {
+  const chart = view.charts.get(chartId);
+  const state = view.states.get(stateName);
+  if (!chart || !state || state.chartId !== chartId) return null;
+  const memo = new Map<string, number>();
+  if (chartPlaces(view, chart, memo) <= MAP_PLACE_CAP) return null;
+  if (!isPlace(state)) return state.name;
+  let node = state;
+  while (node.parent) {
+    const parent = view.states.get(node.parent);
+    if (!parent || parent.chartId !== chartId) break;
+    if (placeCount(view, parent.name, memo) > MAP_PLACE_CAP) break;
+    node = parent;
+  }
+  if (node !== state) return node.name;
+  return state.parent;
+}
+
+function nodeKind(state: StateView): LayoutNodeKind {
+  switch (state.kind) {
+    case 'chart-link':
+      return 'chart-link';
+    case 'group':
+      return 'group';
+    case 'region':
+      return 'region';
+    case 'parallel':
+      return 'parallel';
+    default:
+      return 'screen';
+  }
+}
+
+function rollup(view: AtlasView, name: string): ItemStatus {
+  const statuses: ItemStatus[] = [];
+  const walk = (id: string) => {
+    const state = view.states.get(id);
+    if (!state) return;
+    if (state.kind === 'screen' || state.kind === 'final') statuses.push(state.status);
+    else for (const child of state.children) walk(child);
+  };
+  walk(name);
+  return worstOf(statuses, view.states.get(name)?.status ?? 'spec-only');
+}
+
+function expandGraph(view: AtlasView, chart: ChartView, focus: string | null, key: string, scoped: boolean, mode: 'full' | 'subtree'): LayoutInput {
+  const nodes: LayoutNode[] = [];
+  const visible = new Set<string>();
+  const add = (state: StateView, parent: string | null) => {
+    const kind = nodeKind(state);
+    const size = kind === 'chart-link' ? SIZES.chartLink : SIZES.screen;
+    nodes.push({ id: state.name, parent, kind, width: size.width, height: size.height });
+    visible.add(state.name);
+    if (kind === 'chart-link') return;
+    for (const child of state.children) {
+      const next = view.states.get(child);
+      if (next) add(next, state.name);
+    }
+  };
+  const roots = focus ? [focus] : chart.rootStates;
+  for (const name of roots) {
+    const state = view.states.get(name);
+    if (state) add(state, null);
+  }
+
+  const contextNode = (name: string) => {
+    if (visible.has(name) || !view.states.has(name)) return;
+    nodes.push({ id: name, parent: null, kind: 'context', width: SIZES.context.width, height: SIZES.context.height });
+    visible.add(name);
+  };
+  const edges: LayoutEdge[] = [];
+  const edge = (transitionId: string, source: string, target: string, event: string) => {
+    edges.push({ id: transitionId, transitionId, source, target, labelWidth: chipWidth(event), bundle: null });
+  };
+  for (const tid of chart.transitions) {
+    const transition = view.transitions.get(tid);
+    if (!transition?.target || !visible.has(transition.source)) continue;
+    if (!visible.has(transition.target)) contextNode(transition.target);
+    if (visible.has(transition.target)) edge(transition.id, transition.source, transition.target, transition.event);
+  }
+  if (chart.parent && chart.initial && visible.has(chart.initial)) {
+    for (const transition of view.transitions.values()) {
+      if (transition.target !== chart.parent.state || transition.chartId === chart.id) continue;
+      contextNode(transition.source);
+      edge(transition.id, transition.source, chart.initial, transition.event);
+    }
+  }
+  return { chartId: chart.id, key, nodes, edges, scoped, focus, mode };
+}
+
+function lift(view: AtlasView, name: string, visible: Set<string>, focus: string | null) {
+  let current: string | null = name;
+  while (current) {
+    if (visible.has(current)) return current;
+    if (focus && current === focus) return null;
+    current = view.states.get(current)?.parent ?? null;
+  }
+  return null;
+}
+
+function levelKind(state: StateView): LayoutNodeKind {
+  if (state.kind === 'chart-link') return 'chart-link';
+  if (state.kind === 'screen' || state.kind === 'final') return 'screen';
+  return 'summary';
+}
+
+function levelSize(kind: LayoutNodeKind) {
+  if (kind === 'chart-link') return SIZES.chartLink;
+  if (kind === 'summary') return SIZES.summary;
+  return SIZES.screen;
+}
+
+/** One layer: direct children are boxes, and events between the same pair share one chip. */
+function levelGraph(view: AtlasView, chart: ChartView, focus: string | null, key: string): LayoutInput {
+  const memo = new Map<string, number>();
+  const childNames = focus ? (view.states.get(focus)?.children ?? []) : chart.rootStates;
+  const nodes: LayoutNode[] = [];
+  const visible = new Set<string>();
+  for (const name of childNames) {
+    const state = view.states.get(name);
+    if (!state) continue;
+    const kind = levelKind(state);
+    const size = levelSize(kind);
+    nodes.push({
+      id: name,
+      parent: null,
+      kind,
+      width: size.width,
+      height: size.height,
+      ...(kind === 'summary' ? { places: placeCount(view, name, memo), status: rollup(view, name) } : {})
+    });
+    visible.add(name);
+  }
+
+  const groups = new Map<string, { source: string; target: string; transitions: TransitionView[] }>();
+  for (const tid of chart.transitions) {
+    const transition = view.transitions.get(tid);
+    if (!transition?.target || transition.carriedBy) continue;
+    const source = lift(view, transition.source, visible, focus);
+    const target = lift(view, transition.target, visible, focus);
+    if (!source || !target || source === target) continue;
+    const id = `${source}>${target}`;
+    const bucket = groups.get(id) ?? { source, target, transitions: [] };
+    bucket.transitions.push(transition);
+    groups.set(id, bucket);
+  }
+
+  const edges: LayoutEdge[] = [];
+  for (const bucket of groups.values()) {
+    const only = bucket.transitions[0];
+    if (bucket.transitions.length === 1 && only) {
+      edges.push({ id: only.id, transitionId: only.id, source: bucket.source, target: bucket.target, labelWidth: chipWidth(only.event), bundle: null });
+      continue;
+    }
+    const label = `${bucket.transitions.length} events`;
+    const targetState = view.states.get(bucket.target);
+    const opensGroup = Boolean(targetState && !isPlace(targetState));
+    edges.push({
+      id: `bundle:${bucket.source}>${bucket.target}`,
+      transitionId: null,
+      source: bucket.source,
+      target: bucket.target,
+      labelWidth: chipWidth(label),
+      memberIds: bucket.transitions.map((transition) => transition.id),
+      bundle: {
+        label,
+        status: worstOf(
+          bucket.transitions.map((transition) => transition.status),
+          'spec-only'
+        ),
+        count: bucket.transitions.length,
+        group: opensGroup ? bucket.target : null,
+        screen: opensGroup ? null : bucket.target
+      }
+    });
+  }
+  return { chartId: chart.id, key, nodes, edges, scoped: true, focus, mode: 'level' };
+}
+
+/**
+ * What one chart's map shows. A small chart expands every screen. A large chart shows one
+ * section at a time: its direct children as boxes, or the whole section when that section is small.
+ */
+export function chartGraph(view: AtlasView, chartId: string, requested: string | null = null): LayoutInput | null {
+  const chart = view.charts.get(chartId);
+  if (!chart) return null;
+  const frame = mapFrame(view, chartId, requested);
+  const key = `${chart.structureKey}\n${frame.mode}\n${frame.focus ?? ''}`;
+  if (frame.mode === 'level') return levelGraph(view, chart, frame.focus, key);
+  return expandGraph(view, chart, frame.mode === 'subtree' ? frame.focus : null, key, frame.scoped, frame.mode);
+}