@bramas/simulant-ui 0.0.0-stage → 0.1.0

package/src/components/BranchPicker.tsx

@@ -0,0 +1,90 @@
+/**
+ * The branches of a step: the configurations the adversary's choices lead to. A window lists
+ * them all, each with a drawing of its configuration, its verdict and what distinguishes it, to
+ * pick one.
+ */
+import { For, Show, createMemo, createSignal, onCleanup, onMount } from 'solid-js';
+import type { ExecutionStatus } from '@bramas/simulant-core/types/project';
+import './BranchPicker.css';
+
+export type Branch = {
+  index: number;
+  /** The step's witness, every choice of the round ("a0: as is; a1: mirrored; no crash"). */
+  label: string;
+  /** Only the choices that differ between the branches ("a1: mirrored"). */
+  short: string;
+  verdict?: ExecutionStatus;
+};
+
+export { distinguishing } from '../sim/branches';
+
+const VERDICT_TEXT = { success: 'success', failure: 'failure', inProgress: 'not yet' } as const;
+
+export interface BranchPickerProps {
+  branches: Branch[];
+  current: number;
+  onPick: (index: number) => void;
+  onClose: () => void;
+  /** Draws the configuration of a branch in a canvas of the given size (CSS pixels). */
+  draw?: (index: number, ctx: CanvasRenderingContext2D, size: number) => void;
+}
+
+const THUMB = 150;
+
+export function BranchPicker(props: BranchPickerProps) {
+  const [filter, setFilter] = createSignal('');
+  const shown = createMemo(() => {
+    const f = filter().trim().toLowerCase();
+    return f ? props.branches.filter(b => `${b.index} ${b.label}`.toLowerCase().includes(f)) : props.branches;
+  });
+  const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') props.onClose(); };
+  onMount(() => window.addEventListener('keydown', onKey));
+  onCleanup(() => window.removeEventListener('keydown', onKey));
+
+  const Thumb = (p: { index: number }) => {
+    let canvas: HTMLCanvasElement | undefined;
+    onMount(() => {
+      const ctx = canvas?.getContext('2d');
+      if (!canvas || !ctx || !props.draw) return;
+      const ratio = window.devicePixelRatio || 1;
+      canvas.width = canvas.height = THUMB * ratio;
+      ctx.setTransform(ratio, 0, 0, ratio, 0, 0);
+      try {
+        props.draw(p.index, ctx, THUMB);
+      } catch (e) {
+        console.error('Error drawing a branch:', e);
+      }
+    });
+    return <canvas ref={canvas} class="bp-thumb" style={{ width: `${THUMB}px`, height: `${THUMB}px` }} />;
+  };
+
+  return (
+    <div class="bp-backdrop" onClick={e => { if (e.target === e.currentTarget) props.onClose(); }}>
+      <div class="bp-window" role="dialog" aria-modal="true" aria-label="Branches">
+        <div class="bp-header">
+          <h3>{props.branches.length} branches at this step</h3>
+          <Show when={props.branches.length > 8}>
+            <input type="search" placeholder="Filter (index or choice)" value={filter()} onInput={e => setFilter(e.currentTarget.value)} aria-label="Filter the branches" />
+          </Show>
+          <span style={{ flex: 1 }} />
+          <button class="sim-ghost sim-icon" onClick={props.onClose} title="Close (Esc)">✕</button>
+        </div>
+        <p class="sim-muted bp-help">Each branch is one way the adversary can play this round; only the choices that differ between branches and are not the first option are listed.</p>
+        <div class="bp-grid">
+          <For each={shown()} fallback={<p class="sim-muted">No branch matches.</p>}>
+            {b => (
+              <button class={`bp-branch${b.index === props.current ? ' bp-current' : ''}`} onClick={() => props.onPick(b.index)} title={b.label}>
+                <Show when={props.draw}><Thumb index={b.index} /></Show>
+                <span class="bp-caption">
+                  <strong>Branch {b.index}</strong>
+                  <Show when={b.verdict}>{v => <span class={`sim-chip sim-${v()}`}>{VERDICT_TEXT[v()]}</span>}</Show>
+                </span>
+                <span class="bp-label">{b.short || b.label || '(no choice)'}</span>
+              </button>
+            )}
+          </For>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/ConfigGraphGenerator.css

@@ -0,0 +1,129 @@
+/* The configuration graph (tokens in simulator.css). */
+
+.cg-controls {
+  display: flex;
+  align-items: flex-end;
+  gap: 0.6rem;
+  flex-wrap: wrap;
+}
+
+.cg-depth {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  white-space: nowrap;
+}
+
+.cg-depth input {
+  width: 5.5rem;
+}
+
+.cg-views {
+  display: inline-flex;
+  gap: 0.25rem;
+}
+
+.cg-stats {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.4rem;
+  margin-top: 0.75rem;
+}
+
+.cg-selection {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  flex-wrap: wrap;
+  margin-top: 0.75rem;
+  padding: 0.45rem 0.6rem;
+  border-radius: 8px;
+  background: var(--sim-surface-2);
+  font-size: 0.85rem;
+}
+
+.cg-frame {
+  position: relative;
+  margin-top: 0.75rem;
+}
+
+.cg-canvas {
+  display: block;
+  background: var(--sim-surface-2);
+  border: 1px solid var(--sim-border);
+  border-radius: 8px;
+  cursor: grab;
+  touch-action: none;
+}
+
+.cg-zoom {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  display: flex;
+  align-items: center;
+  gap: 0.3rem;
+  background: var(--sim-surface);
+  border: 1px solid var(--sim-border);
+  border-radius: 8px;
+  padding: 0.2rem 0.3rem;
+}
+
+.cg-help {
+  margin: 0.4rem 0 0;
+  font-size: 0.78rem;
+}
+
+.cg-list,
+.cg-tree {
+  margin-top: 0.75rem;
+  max-height: 480px;
+  overflow: auto;
+  border: 1px solid var(--sim-border);
+  border-radius: 8px;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.85rem;
+}
+
+.cg-list summary {
+  cursor: pointer;
+  font-weight: 600;
+  margin: 0.3rem 0;
+}
+
+.config-graph .cg-list-row,
+.config-graph .cg-node-link {
+  display: flex;
+  gap: 0.8rem;
+  align-items: baseline;
+  width: 100%;
+  text-align: left;
+  background: transparent;
+  border: none;
+  border-left: 3px solid transparent;
+  border-radius: 4px;
+  color: var(--sim-text);
+  padding: 0.15rem 0.5rem;
+  font-size: 0.82rem;
+}
+
+.config-graph .cg-node-link {
+  width: auto;
+  font-family: var(--sim-mono);
+}
+
+.config-graph .cg-list-row:hover,
+.config-graph .cg-node-link:hover {
+  background: var(--sim-surface-2);
+}
+
+.cg-success { border-left-color: var(--sim-success) !important; }
+.cg-failure { border-left-color: var(--sim-failure) !important; }
+.cg-inProgress { border-left-color: var(--sim-progress) !important; }
+.config-graph .cg-on-path { background: var(--sim-highlight-soft); }
+
+.cg-tree-children {
+  margin-left: 1.2rem;
+  border-left: 1px dotted var(--sim-border);
+}

package/src/components/ConfigGraphGenerator.tsx

@@ -0,0 +1,448 @@
+/**
+ * The configuration graph of the current settings: every execution, round by round, up to a
+ * depth, generated by the project's graph worker. Shown as a drawing (by default: each node draws
+ * its configuration; drag to pan, scroll to zoom, double-click to open a node in the simulator),
+ * as a list by depth, or as a tree. The simulator's current path is highlighted.
+ */
+import { createEffect, createMemo, createSignal, For, onCleanup, onMount, Show } from 'solid-js';
+import type { GraphNode, GraphStats, WorkerRequest, WorkerResponse } from '@bramas/simulant-core/lib/config-graph';
+import type { ExecutionLike, ExecutionStatus } from '@bramas/simulant-core/types/project';
+import './ConfigGraphGenerator.css';
+
+export type { ExecutionStatus } from '@bramas/simulant-core/types/project';
+export type { GraphNode, WorkerRequest, WorkerResponse } from '@bramas/simulant-core/lib/config-graph';
+
+export interface ConfigGraphGeneratorProps<T, ConfigType, ModelType> {
+  settings: T;
+  setup: (settings: T) => ModelType;
+  executionStatusChecker: (config: ConfigType, model: ModelType, configs: ConfigType[]) => ExecutionStatus;
+  drawConfig?: (ctx: CanvasRenderingContext2D, config: ConfigType, model: ModelType, options: any) => any;
+  configRadius?: number;
+  horizontalSpacing?: number;
+  verticalSpacing?: number;
+  /** Name of the project for the worker. */
+  projectName?: string;
+  createWorker?: () => Worker;
+  /** The project's tree of executions. */
+  execute: (model: any) => ExecutionLike;
+  /** The revision of the project's sources: the worker refuses to answer for another one. */
+  revision?: string;
+  /** The simulator's current path, highlighted in the graph. */
+  currentPath?: number[];
+  /** Opens a node in the simulator, with the settings the graph was generated for. */
+  onOpen?: (settings: T, path: number[]) => void;
+}
+
+type View = 'visual' | 'list' | 'tree';
+const HEIGHT = 560;
+const EMPTY_STATS: GraphStats = { totalNodes: 0, successNodes: 0, failureNodes: 0, inProgressNodes: 0, maxDepthReached: 0 };
+const STATUS_TEXT = { success: 'success', failure: 'failure', inProgress: 'in progress' } as const;
+const key = (path: number[]) => path.join('-');
+
+/** Each round's row centered under the first one (the worker lays rows out from the left). */
+function centered(nodes: GraphNode[]): GraphNode[] {
+  const rows = new Map<number, GraphNode[]>();
+  for (const n of nodes) rows.set(n.depth, [...(rows.get(n.depth) ?? []), n]);
+  const xs = nodes.map(n => n.x ?? 0);
+  const middle = (Math.min(...xs) + Math.max(...xs)) / 2;
+  return nodes.map(n => {
+    const row = rows.get(n.depth)!;
+    const rx = row.map(m => m.x ?? 0);
+    return { ...n, x: (n.x ?? 0) - (Math.min(...rx) + Math.max(...rx)) / 2 + middle };
+  });
+}
+
+export function ConfigGraphGenerator<T, ConfigType, ModelType>(props: ConfigGraphGeneratorProps<T, ConfigType, ModelType>) {
+  const [maxDepth, setMaxDepth] = createSignal(10);
+  const [isGenerating, setIsGenerating] = createSignal(false);
+  const [error, setError] = createSignal('');
+  const [graph, setGraph] = createSignal<GraphNode[]>([]);
+  const [graphSettings, setGraphSettings] = createSignal<{ settings: T } | null>(null);
+  const [stats, setStats] = createSignal<GraphStats>(EMPTY_STATS);
+  const [view, setView] = createSignal<View>(props.drawConfig ? 'visual' : 'list');
+  const [selected, setSelected] = createSignal<GraphNode | null>(null);
+  const [pan, setPan] = createSignal({ x: 0, y: 0 });
+  const [zoom, setZoom] = createSignal(1);
+  const [width, setWidth] = createSignal(1000);
+
+  let canvas: HTMLCanvasElement | undefined;
+  let frame: HTMLDivElement | undefined;
+  let worker: Worker | undefined;
+  const radius = props.configRadius || 60;
+  const horizontalSpacing = props.horizontalSpacing || 150;
+  const verticalSpacing = props.verticalSpacing || 180;
+
+  const stop = () => {
+    worker?.terminate();
+    worker = undefined;
+    setIsGenerating(false);
+  };
+  onCleanup(stop);
+
+  const nodesByPath = createMemo(() => new Map(graph().map(n => [key(n.path), n])));
+  const stale = createMemo(() => !!graphSettings() && JSON.stringify(graphSettings()!.settings) !== JSON.stringify(props.settings));
+  /** The simulator's path, when the graph shows the same settings. */
+  const onPath = createMemo(() => {
+    const out = new Set<string>();
+    if (stale() || !props.currentPath) return out;
+    for (let i = 1; i <= props.currentPath.length; i++) out.add(key(props.currentPath.slice(0, i)));
+    return out;
+  });
+
+  /** Pan and zoom so that the whole graph fits the canvas. */
+  const fit = () => {
+    const nodes = graph().filter(n => n.x !== undefined && n.y !== undefined);
+    if (!nodes.length) return;
+    const xs = nodes.map(n => n.x!), ys = nodes.map(n => n.y!);
+    const margin = radius + 30;
+    const [x0, x1, y0, y1] = [Math.min(...xs) - margin, Math.max(...xs) + margin, Math.min(...ys) - margin, Math.max(...ys) + margin];
+    const z = Math.min(2, width() / (x1 - x0), HEIGHT / (y1 - y0));
+    setZoom(z);
+    setPan({ x: (width() - (x1 - x0) * z) / 2 - x0 * z, y: (HEIGHT - (y1 - y0) * z) / 2 - y0 * z });
+  };
+
+  const generate = () => {
+    stop();
+    setError('');
+    setSelected(null);
+    setGraph([]);
+    setStats(EMPTY_STATS);
+    setGraphSettings({ settings: props.settings });
+    if (!props.projectName || !props.createWorker) {
+      setError('This page has no graph worker.');
+      return;
+    }
+    try {
+      worker = props.createWorker();
+    } catch (e) {
+      setError(`The graph worker could not start: ${e instanceof Error ? e.message : String(e)}`);
+      return;
+    }
+    setIsGenerating(true);
+    let fitted = false;
+    worker.onmessage = (e: MessageEvent<WorkerResponse>) => {
+      const r = e.data;
+      if (r.type === 'error') {
+        setError(r.error ?? 'unknown error');
+        stop();
+        return;
+      }
+      if (r.nodes) setGraph(centered(r.nodes));
+      if (r.stats) setStats(r.stats);
+      if (!fitted || r.type === 'complete') { fit(); fitted = true; }
+      if (r.type === 'complete') stop();
+    };
+    worker.onerror = (e) => {
+      setError(`Graph worker error: ${e.message}`);
+      stop();
+    };
+    const request: WorkerRequest = {
+      type: 'generate', maxDepth: maxDepth(), horizontalSpacing, verticalSpacing,
+      settings: props.settings, projectName: props.projectName, revision: props.revision,
+    };
+    worker.postMessage(request);
+  };
+
+  const exportGraph = () => {
+    const data = { settings: graphSettings()?.settings, maxDepth: maxDepth(), stats: stats(), nodes: graph() };
+    const url = URL.createObjectURL(new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' }));
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `config-graph-${Date.now()}.json`;
+    a.click();
+    URL.revokeObjectURL(url);
+  };
+
+  const open = (node: GraphNode) => {
+    const s = graphSettings();
+    if (s && props.onOpen) props.onOpen(s.settings, node.path);
+  };
+
+  // The canvas follows the width of its frame.
+  onMount(() => {
+    if (!frame) return;
+    const observer = new ResizeObserver(entries => setWidth(Math.max(300, Math.floor(entries[0].contentRect.width))));
+    observer.observe(frame);
+    // Scrolling over the graph zooms it instead of scrolling the page: the listener cannot be passive.
+    canvas?.addEventListener('wheel', onWheel, { passive: false });
+    onCleanup(() => {
+      observer.disconnect();
+      canvas?.removeEventListener('wheel', onWheel);
+    });
+  });
+
+  // Keep the execution cache across redraws; panning and zooming only change canvas coordinates.
+  const graphExecution = createMemo(() => {
+    const saved = graphSettings();
+    if (!saved || !props.drawConfig) return null;
+    try {
+      const model = props.setup(saved.settings);
+      return { model, execution: props.execute(model) };
+    } catch {
+      return null;
+    }
+  });
+
+  createEffect(() => {
+    const nodes = graph();
+    const { x: px, y: py } = pan();
+    const z = zoom();
+    const w = width();
+    const highlighted = onPath();
+    const sel = selected();
+    if (!canvas || view() !== 'visual') return;
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return;
+    const ratio = window.devicePixelRatio || 1;
+    canvas.width = w * ratio;
+    canvas.height = HEIGHT * ratio;
+    const css = getComputedStyle(canvas);
+    const color = (name: string, fallback: string) => css.getPropertyValue(name).trim() || fallback;
+    const palette = {
+      success: [color('--sim-success', 'green'), color('--sim-success-soft', '#dcf5e3')],
+      failure: [color('--sim-failure', 'red'), color('--sim-failure-soft', '#fde2e1')],
+      inProgress: [color('--sim-progress', 'orange'), color('--sim-progress-soft', '#fff4d6')],
+    } as const;
+    const edge = color('--sim-border', '#ccc'), text = color('--sim-text', '#222'), accent = color('--sim-highlight', '#f5b301');
+
+    ctx.setTransform(ratio, 0, 0, ratio, 0, 0);
+    ctx.clearRect(0, 0, w, HEIGHT);
+    ctx.save();
+    ctx.translate(px, py);
+    ctx.scale(z, z);
+    const pad = radius * 2;
+    const visible = (n: GraphNode) => n.x !== undefined && n.y !== undefined
+      && n.x >= -px / z - pad && n.x <= (w - px) / z + pad && n.y >= -py / z - pad && n.y <= (HEIGHT - py) / z + pad;
+
+    // Edges, the simulator's path on top.
+    for (const pass of [false, true]) {
+      ctx.strokeStyle = pass ? accent : edge;
+      ctx.lineWidth = (pass ? 4 : 1.5) / z;
+      for (const n of nodes) {
+        if (n.path.length === 1 || highlighted.has(key(n.path)) !== pass) continue;
+        const parent = nodesByPath().get(key(n.path.slice(0, -1)));
+        if (!parent || parent.x === undefined || parent.y === undefined || n.x === undefined || n.y === undefined) continue;
+        if (!visible(parent) && !visible(n)) continue;
+        ctx.beginPath();
+        ctx.moveTo(parent.x, parent.y + radius + 5);
+        ctx.lineTo(n.x, n.y - radius - 5);
+        ctx.stroke();
+      }
+    }
+
+    const session = graphExecution();
+    for (const n of nodes) {
+      if (!visible(n)) continue;
+      const [stroke, fill] = palette[n.status];
+      ctx.beginPath();
+      ctx.arc(n.x!, n.y!, radius + 5, 0, 2 * Math.PI);
+      ctx.fillStyle = fill;
+      ctx.fill();
+      const isSelected = sel && key(sel.path) === key(n.path);
+      ctx.strokeStyle = highlighted.has(key(n.path)) ? accent : stroke;
+      ctx.lineWidth = (isSelected ? 5 : highlighted.has(key(n.path)) ? 3.5 : 2) / z;
+      ctx.stroke();
+      // The configuration itself, small, when the graph is close enough to read it.
+      if (session && props.drawConfig && radius * z > 18) {
+        try {
+          const config = session.execution.get(n.path) as ConfigType;
+          ctx.save();
+          ctx.beginPath();
+          ctx.arc(n.x!, n.y!, radius + 4, 0, 2 * Math.PI);
+          ctx.clip();
+          ctx.translate(n.x!, n.y!);
+          const scale = (radius - 8) / 100;
+          ctx.scale(scale, scale);
+          props.drawConfig(ctx, config, session.model, { centerX: 0, centerY: 0, radius: 100, nodeRadius: 10, agentRadius: 5, showNodeLabels: false });
+          ctx.restore();
+        } catch (e) {
+          console.error('Error drawing a configuration of the graph:', e);
+        }
+      }
+      // Path labels only when they fit between nodes.
+      if (horizontalSpacing * z > 6.5 * (2 * n.path.length + 1)) {
+        ctx.fillStyle = text;
+        ctx.font = `${11 / z}px system-ui, sans-serif`;
+        ctx.textAlign = 'center';
+        ctx.fillText(`[${n.path.join(',')}]`, n.x!, n.y! + radius + 18 / z);
+      }
+    }
+    ctx.restore();
+  });
+
+  // Pointer: drag to pan, click to select, double-click to open; wheel to zoom.
+  let drag: { x: number; y: number; moved: boolean } | null = null;
+  const nodeAt = (e: MouseEvent) => {
+    const rect = canvas!.getBoundingClientRect();
+    const x = (e.clientX - rect.left - pan().x) / zoom();
+    const y = (e.clientY - rect.top - pan().y) / zoom();
+    return graph().find(n => n.x !== undefined && n.y !== undefined && Math.hypot(x - n.x, y - n.y) <= radius + 5) ?? null;
+  };
+  const onDown = (e: MouseEvent) => { drag = { x: e.clientX - pan().x, y: e.clientY - pan().y, moved: false }; };
+  const onMove = (e: MouseEvent) => {
+    if (drag) {
+      const next = { x: e.clientX - drag.x, y: e.clientY - drag.y };
+      if (Math.abs(next.x - pan().x) + Math.abs(next.y - pan().y) > 2) drag.moved = true;
+      setPan(next);
+    } else if (canvas) {
+      canvas.style.cursor = nodeAt(e) ? 'pointer' : 'grab';
+    }
+  };
+  const onUp = (e: MouseEvent) => {
+    if (drag && !drag.moved) setSelected(nodeAt(e));
+    drag = null;
+  };
+  const onWheel = (e: WheelEvent) => {
+    if (!canvas) return;
+    e.preventDefault();
+    const rect = canvas.getBoundingClientRect();
+    const mx = e.clientX - rect.left, my = e.clientY - rect.top;
+    const z = Math.min(Math.max(0.05, zoom() * Math.exp(-e.deltaY * 0.0015)), 5);
+    const wx = (mx - pan().x) / zoom(), wy = (my - pan().y) / zoom();
+    setZoom(z);
+    setPan({ x: mx - wx * z, y: my - wy * z });
+  };
+  const zoomBy = (factor: number) => {
+    const z = Math.min(Math.max(0.05, zoom() * factor), 5);
+    const cx = width() / 2, cy = HEIGHT / 2;
+    const wx = (cx - pan().x) / zoom(), wy = (cy - pan().y) / zoom();
+    setZoom(z);
+    setPan({ x: cx - wx * z, y: cy - wy * z });
+  };
+
+  const Tree = (p: { path: number[] }) => {
+    const node = () => nodesByPath().get(key(p.path));
+    return (
+      <Show when={node()}>
+        {n => (
+          <div class="cg-tree-node">
+            <button class={`cg-node-link cg-${n().status}${onPath().has(key(p.path)) ? ' cg-on-path' : ''}`} onClick={() => setSelected(n())} onDblClick={() => open(n())}>
+              {n().status === 'success' ? '✓' : n().status === 'failure' ? '✗' : '○'} [{p.path.join(', ')}]
+            </button>
+            <Show when={n().childrenCount > 0}>
+              <div class="cg-tree-children">
+                <For each={Array.from({ length: n().childrenCount }, (_, i) => i)}>{i => <Tree path={[...p.path, i]} />}</For>
+              </div>
+            </Show>
+          </div>
+        )}
+      </Show>
+    );
+  };
+
+  return (
+    <div class="config-graph">
+      <div class="cg-controls">
+        <label class="cg-depth">
+          Max Depth (rounds):
+          <input type="number" value={maxDepth()} min="0" max="1000"
+            onInput={e => { const n = e.currentTarget.valueAsNumber; if (Number.isInteger(n) && n >= 0) setMaxDepth(n); }} />
+        </label>
+        <Show when={!isGenerating()} fallback={<button class="sim-ghost" onClick={stop}>Stop</button>}>
+          <button onClick={generate}>Generate Graph</button>
+        </Show>
+        <Show when={graph().length > 0 && !isGenerating()}>
+          <button class="sim-ghost" onClick={exportGraph}>Export JSON</button>
+        </Show>
+        <span class="sim-spacer" style={{ flex: 1 }} />
+        <Show when={graph().length > 0}>
+          <div class="cg-views" role="tablist" aria-label="Graph view">
+            <Show when={props.drawConfig}>
+              <button role="tab" aria-selected={view() === 'visual'} class={view() === 'visual' ? '' : 'sim-ghost'} onClick={() => setView('visual')}>Drawing</button>
+            </Show>
+            <button role="tab" aria-selected={view() === 'list'} class={view() === 'list' ? '' : 'sim-ghost'} onClick={() => setView('list')}>List</button>
+            <button role="tab" aria-selected={view() === 'tree'} class={view() === 'tree' ? '' : 'sim-ghost'} onClick={() => setView('tree')}>Tree</button>
+          </div>
+        </Show>
+      </div>
+
+      <Show when={error()}>
+        <div class="sim-notice sim-error">Could not generate the graph: {error()}</div>
+      </Show>
+
+      <Show when={stats().totalNodes > 0}>
+        <div class="cg-stats" aria-label="Statistics">
+          <span class="sim-chip">{stats().totalNodes} nodes{isGenerating() ? '…' : ''}</span>
+          <span class="sim-chip sim-success">{stats().successNodes} success</span>
+          <span class="sim-chip sim-failure">{stats().failureNodes} failure</span>
+          <span class="sim-chip sim-inProgress">{stats().inProgressNodes} in progress</span>
+          <span class="sim-chip">depth {stats().maxDepthReached}</span>
+          <Show when={stats().failureNodes > 0}>
+            <span class="sim-muted">The generation stops at the first failure.</span>
+          </Show>
+          <Show when={stale()}>
+            <span class="sim-muted">Generated for other settings: generate again to follow the current ones.</span>
+          </Show>
+        </div>
+      </Show>
+
+      <Show when={selected()}>
+        {n => (
+          <div class="cg-selection">
+            <span class={`sim-chip sim-${n().status}`}>{STATUS_TEXT[n().status]}</span>
+            <span>path <code>[{n().path.join(', ')}]</code> · round {n().depth} · {n().childrenCount} {n().childrenCount === 1 ? 'child' : 'children'} explored</span>
+            <span class="sim-spacer" style={{ flex: 1 }} />
+            <Show when={props.onOpen}>
+              <button onClick={() => open(n())}>Open in simulator</button>
+            </Show>
+            <button class="sim-ghost sim-icon" onClick={() => setSelected(null)} title="Clear the selection">✕</button>
+          </div>
+        )}
+      </Show>
+
+      <div ref={frame} class="cg-frame" style={{ display: graph().length > 0 && view() === 'visual' ? 'block' : 'none' }}>
+        <canvas
+          ref={canvas}
+          class="cg-canvas"
+          style={{ width: `${width()}px`, height: `${HEIGHT}px` }}
+          onMouseDown={onDown}
+          onMouseMove={onMove}
+          onMouseUp={onUp}
+          onMouseLeave={() => { drag = null; }}
+          onDblClick={e => { const n = nodeAt(e); if (n) open(n); }}
+        />
+        <div class="cg-zoom">
+          <button class="sim-ghost sim-icon" onClick={() => zoomBy(1 / 1.25)} title="Zoom out">−</button>
+          <span class="sim-muted">{Math.round(zoom() * 100)}%</span>
+          <button class="sim-ghost sim-icon" onClick={() => zoomBy(1.25)} title="Zoom in">+</button>
+          <button class="sim-ghost" onClick={fit} title="Show the whole graph">Fit</button>
+        </div>
+        <p class="sim-muted cg-help">Drag to pan, scroll to zoom. Click a node to select it, double-click to open it in the simulator. The simulator's path is highlighted.</p>
+      </div>
+
+      <Show when={graph().length > 0 && view() === 'list'}>
+        <div class="cg-list">
+          <For each={Array.from({ length: stats().maxDepthReached + 1 }, (_, i) => i)}>
+            {depth => {
+              const nodes = () => graph().filter(n => n.depth === depth);
+              return (
+                <Show when={nodes().length > 0}>
+                  <details open={depth < 3}>
+                    <summary>Round {depth} <span class="sim-muted">({nodes().length} nodes)</span></summary>
+                    <For each={nodes()}>
+                      {n => (
+                        <button class={`cg-list-row cg-${n.status}${onPath().has(key(n.path)) ? ' cg-on-path' : ''}`} onClick={() => setSelected(n)} onDblClick={() => open(n)}>
+                          <code>[{n.path.join(', ')}]</code>
+                          <span>{STATUS_TEXT[n.status]}</span>
+                          <span class="sim-muted">{n.childrenCount} children</span>
+                        </button>
+                      )}
+                    </For>
+                  </details>
+                </Show>
+              );
+            }}
+          </For>
+        </div>
+      </Show>
+
+      <Show when={graph().length > 0 && view() === 'tree'}>
+        <div class="cg-tree"><Tree path={[0]} /></div>
+      </Show>
+
+      <Show when={graph().length === 0 && !isGenerating() && !error()}>
+        <p class="sim-muted">Generate the graph to see every execution of these settings up to the depth, with the verdict of each configuration.</p>
+      </Show>
+    </div>
+  );
+}