@bramas/simulant-ui 0.1.2 → 0.3.0

package/dist/components/ConfigGraphGenerator.css

@@ -1,101 +1,243 @@
-/* The configuration graph (tokens in simulator.css). */
+/* The configuration graph, filling its container (tokens in simulator.css). */
+
+.config-graph {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+}
+
+.cg-toolbar {
+  flex: none;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--sim-border);
+  background: var(--sim-surface);
+}
 
 .cg-controls {
   display: flex;
-  align-items: flex-end;
-  gap: 0.6rem;
+  align-items: center;
+  gap: 8px;
   flex-wrap: wrap;
 }
 
 .cg-depth {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: 8px;
   white-space: nowrap;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--sim-text-2);
+  margin-right: 4px;
 }
 
 .cg-depth input {
-  width: 5.5rem;
+  width: 5rem !important;
 }
 
-.cg-views {
-  display: inline-flex;
-  gap: 0.25rem;
+.cg-divider {
+  width: 1px;
+  height: 22px;
+  margin: 0 4px;
+  background: var(--sim-border);
 }
 
 .cg-stats {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
-  gap: 0.4rem;
-  margin-top: 0.75rem;
+  gap: 6px;
 }
 
-.cg-selection {
+.cg-notes {
   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;
+  gap: 4px 16px;
+  font-size: 12px;
+  color: var(--sim-muted);
+}
+
+.cg-stale {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  color: var(--sim-progress);
+}
+
+.cg-toolbar .sim-feedback {
+  margin: 0;
+}
+
+.cg-body {
+  position: relative;
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
 }
 
 .cg-frame {
   position: relative;
-  margin-top: 0.75rem;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
 }
 
 .cg-canvas {
+  position: absolute;
+  inset: 0;
   display: block;
-  background: var(--sim-surface-2);
-  border: 1px solid var(--sim-border);
-  border-radius: 8px;
+  background-color: var(--sim-stage);
+  background-image: radial-gradient(var(--sim-stage-dot) 1px, transparent 1.2px);
+  background-size: 18px 18px;
   cursor: grab;
   touch-action: none;
 }
 
 .cg-zoom {
   position: absolute;
-  top: 0.5rem;
-  right: 0.5rem;
+  top: 12px;
+  right: 12px;
   display: flex;
   align-items: center;
-  gap: 0.3rem;
+  gap: 2px;
   background: var(--sim-surface);
   border: 1px solid var(--sim-border);
   border-radius: 8px;
-  padding: 0.2rem 0.3rem;
+  padding: 3px;
+  box-shadow: var(--sim-shadow-md);
+}
+
+.cg-zoom-value {
+  min-width: 3.2em;
+  text-align: center;
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+  color: var(--sim-muted);
+}
+
+.cg-zoom-sep {
+  width: 1px;
+  height: 16px;
+  margin: 0 2px;
+  background: var(--sim-border);
 }
 
 .cg-help {
-  margin: 0.4rem 0 0;
-  font-size: 0.78rem;
+  position: absolute;
+  right: 12px;
+  bottom: 10px;
+  margin: 0;
+  padding: 3px 8px;
+  border-radius: 6px;
+  font-size: 11.5px;
+  color: var(--sim-muted);
+  background: color-mix(in srgb, var(--sim-surface) 85%, transparent);
+  pointer-events: none;
+}
+
+/* The selected node, in a card over the graph */
+
+.cg-selection {
+  position: absolute;
+  left: 12px;
+  top: 12px;
+  z-index: 2;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: 196px;
+  padding: 10px;
+  border-radius: 10px;
+  background: var(--sim-surface);
+  border: 1px solid var(--sim-border);
+  box-shadow: var(--sim-shadow-lg);
+  font-size: 12.5px;
+}
+
+.cg-selection-head {
+  display: flex;
+  align-items: center;
+}
+
+.cg-preview {
+  align-self: center;
+  border-radius: 8px;
+  border: 1px solid var(--sim-border);
+  background-color: var(--sim-stage);
+  background-image: radial-gradient(var(--sim-stage-dot) 1px, transparent 1.2px);
+  background-size: 14px 14px;
+}
+
+.cg-selection-facts {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 3px 10px;
+}
+
+.cg-selection-facts dt {
+  color: var(--sim-muted);
+}
+
+.cg-selection-facts dd {
+  margin: 0;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.cg-empty {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  padding: 28px 16px;
+  color: var(--sim-muted);
+  font-size: 13px;
+  text-align: center;
+  background-color: var(--sim-stage);
+  background-image: radial-gradient(var(--sim-stage-dot) 1px, transparent 1.2px);
+  background-size: 18px 18px;
+}
+
+.cg-empty strong {
+  color: var(--sim-text);
+  font-size: 14px;
+}
+
+.cg-empty span {
+  max-width: 28rem;
 }
 
 .cg-list,
 .cg-tree {
-  margin-top: 0.75rem;
-  max-height: 480px;
+  flex: 1;
+  min-height: 0;
   overflow: auto;
-  border: 1px solid var(--sim-border);
-  border-radius: 8px;
-  padding: 0.5rem 0.75rem;
-  font-size: 0.85rem;
+  padding: 8px 12px;
+  font-size: 13px;
+}
+
+/* The selection card covers the top left: lists start beside it. */
+.cg-body:has(.cg-selection) :is(.cg-list, .cg-tree) {
+  padding-left: 224px;
 }
 
 .cg-list summary {
   cursor: pointer;
   font-weight: 600;
-  margin: 0.3rem 0;
+  margin: 4px 0;
 }
 
 .config-graph .cg-list-row,
 .config-graph .cg-node-link {
   display: flex;
-  gap: 0.8rem;
+  gap: 12px;
   align-items: baseline;
   width: 100%;
   text-align: left;
@@ -104,8 +246,8 @@
   border-left: 3px solid transparent;
   border-radius: 4px;
   color: var(--sim-text);
-  padding: 0.15rem 0.5rem;
-  font-size: 0.82rem;
+  padding: 2px 8px;
+  font-size: 12.5px;
 }
 
 .config-graph .cg-node-link {

package/dist/components/ConfigGraphGenerator.jsx

@@ -2,11 +2,14 @@
  * 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.
+ * as a list by depth, or as a tree. The simulator's current path is highlighted. It fills the
+ * space it is given; the selected node is shown, drawn, in a card over the graph.
  */
 import { createEffect, createMemo, createSignal, For, onCleanup, onMount, Show } from "solid-js";
+import { Icon } from "./Icon.jsx";
 import "./ConfigGraphGenerator.css";
-const HEIGHT = 560;
+/** The preview of the selected node, in CSS pixels. */
+const PREVIEW = 132;
 const EMPTY_STATS = { totalNodes: 0, successNodes: 0, failureNodes: 0, inProgressNodes: 0, maxDepthReached: 0 };
 const STATUS_TEXT = { success: 'success', failure: 'failure', inProgress: 'in progress' };
 const key = (path) => path.join('-');
@@ -35,9 +38,12 @@ export function ConfigGraphGenerator(props) {
     const [pan, setPan] = createSignal({ x: 0, y: 0 });
     const [zoom, setZoom] = createSignal(1);
     const [width, setWidth] = createSignal(1000);
+    const [height, setHeight] = createSignal(560);
     let canvas;
     let frame;
     let worker;
+    // Until the user pans or zooms, the graph keeps fitting its frame.
+    let moved = false;
     const radius = props.configRadius || 60;
     const horizontalSpacing = props.horizontalSpacing || 150;
     const verticalSpacing = props.verticalSpacing || 180;
@@ -66,9 +72,9 @@ export function ConfigGraphGenerator(props) {
         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));
+        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 });
+        setPan({ x: (width() - (x1 - x0) * z) / 2 - x0 * z, y: (height() - (y1 - y0) * z) / 2 - y0 * z });
     };
     const generate = () => {
         stop();
@@ -77,6 +83,7 @@ export function ConfigGraphGenerator(props) {
         setGraph([]);
         setStats(EMPTY_STATS);
         setGraphSettings({ settings: props.settings });
+        moved = false;
         if (!props.projectName || !props.createWorker) {
             setError('This page has no graph worker.');
             return;
@@ -132,11 +139,20 @@ export function ConfigGraphGenerator(props) {
         if (s && props.onOpen)
             props.onOpen(s.settings, node.path);
     };
-    // The canvas follows the width of its frame.
+    // The canvas fills its frame.
     onMount(() => {
         if (!frame)
             return;
-        const observer = new ResizeObserver(entries => setWidth(Math.max(300, Math.floor(entries[0].contentRect.width))));
+        const observer = new ResizeObserver(entries => {
+            const { width: w, height: h } = entries[0].contentRect;
+            // A hidden frame (another view) has no size: keep the last one.
+            if (w <= 0 || h <= 0)
+                return;
+            setWidth(Math.max(300, Math.floor(w)));
+            setHeight(Math.max(240, Math.floor(h)));
+            if (!moved)
+                fit();
+        });
         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 });
@@ -163,8 +179,10 @@ export function ConfigGraphGenerator(props) {
         const { x: px, y: py } = pan();
         const z = zoom();
         const w = width();
+        const h = height();
         const highlighted = onPath();
         const sel = selected();
+        const theme = props.theme;
         if (!canvas || view() !== 'visual')
             return;
         const ctx = canvas.getContext('2d');
@@ -172,7 +190,7 @@ export function ConfigGraphGenerator(props) {
             return;
         const ratio = window.devicePixelRatio || 1;
         canvas.width = w * ratio;
-        canvas.height = HEIGHT * ratio;
+        canvas.height = h * ratio;
         const css = getComputedStyle(canvas);
         const color = (name, fallback) => css.getPropertyValue(name).trim() || fallback;
         const palette = {
@@ -182,13 +200,13 @@ export function ConfigGraphGenerator(props) {
         };
         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.clearRect(0, 0, w, h);
         ctx.save();
         ctx.translate(px, py);
         ctx.scale(z, z);
         const pad = radius * 2;
         const visible = (n) => 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;
+            && n.x >= -px / z - pad && n.x <= (w - px) / z + pad && n.y >= -py / z - pad && n.y <= (h - py) / z + pad;
         // Edges, the simulator's path on top.
         for (const pass of [false, true]) {
             ctx.strokeStyle = pass ? accent : edge;
@@ -231,7 +249,7 @@ export function ConfigGraphGenerator(props) {
                     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 });
+                    props.drawConfig(ctx, config, session.model, { centerX: 0, centerY: 0, radius: 100, nodeRadius: 10, agentRadius: 5, showNodeLabels: false, theme });
                     ctx.restore();
                 }
                 catch (e) {
@@ -261,7 +279,7 @@ export function ConfigGraphGenerator(props) {
         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;
+                drag.moved = moved = true;
             setPan(next);
         }
         else if (canvas) {
@@ -277,6 +295,7 @@ export function ConfigGraphGenerator(props) {
         if (!canvas)
             return;
         e.preventDefault();
+        moved = true;
         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);
@@ -285,8 +304,9 @@ export function ConfigGraphGenerator(props) {
         setPan({ x: mx - wx * z, y: my - wy * z });
     };
     const zoomBy = (factor) => {
+        moved = true;
         const z = Math.min(Math.max(0.05, zoom() * factor), 5);
-        const cx = width() / 2, cy = HEIGHT / 2;
+        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 });
@@ -306,103 +326,142 @@ export function ConfigGraphGenerator(props) {
           </div>)}
       </Show>);
     };
+    /** The selected node's configuration, drawn small. */
+    const Preview = (p) => {
+        let preview;
+        createEffect(() => {
+            const session = graphExecution();
+            const ctx = preview?.getContext('2d');
+            if (!preview || !ctx || !session || !props.drawConfig)
+                return;
+            const ratio = window.devicePixelRatio || 1;
+            preview.width = preview.height = PREVIEW * ratio;
+            ctx.setTransform(ratio, 0, 0, ratio, 0, 0);
+            ctx.clearRect(0, 0, PREVIEW, PREVIEW);
+            try {
+                const config = session.execution.get(p.node.path);
+                props.drawConfig(ctx, config, session.model, { centerX: PREVIEW / 2, centerY: PREVIEW / 2, radius: PREVIEW * 0.34, nodeRadius: 3, agentRadius: 4, showNodeLabels: false, theme: props.theme });
+            }
+            catch (e) {
+                console.error('Error drawing the selected configuration:', e);
+            }
+        });
+        return <canvas ref={preview} class="cg-preview" style={{ width: `${PREVIEW}px`, height: `${PREVIEW}px` }}/>;
+    };
     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)
+      <div class="cg-toolbar">
+        <div class="cg-controls">
+          <label class="cg-depth">
+            <span>Max depth</span>
+            <input type="number" value={maxDepth()} min="0" max="1000" aria-label="Max depth (rounds)" 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>
+            <span class="sim-muted">rounds</span>
+          </label>
+          <Show when={!isGenerating()} fallback={<button class="sim-btn" onClick={stop}><Icon name="stop" size={14}/> Stop</button>}>
+            <button class="sim-primary" onClick={generate}><Icon name="play" size={14}/> Generate graph</button>
+          </Show>
+          <Show when={graph().length > 0 && !isGenerating()}>
+            <button class="sim-ghost" onClick={exportGraph}><Icon name="download" size={14}/> Export JSON</button>
           </Show>
-          <Show when={stale()}>
-            <span class="sim-muted">Generated for other settings: generate again to follow the current ones.</span>
+          <Show when={stats().totalNodes > 0}>
+            <span class="cg-divider"/>
+            <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>
+            </div>
+          </Show>
+          <span class="sim-spacer"/>
+          <Show when={graph().length > 0}>
+            <div class="sim-tabs" role="tablist" aria-label="Graph view">
+              <Show when={props.drawConfig}>
+                <button role="tab" aria-selected={view() === 'visual'} class={view() === 'visual' ? 'sim-tab sim-tab-current' : 'sim-tab'} onClick={() => setView('visual')}>Drawing</button>
+              </Show>
+              <button role="tab" aria-selected={view() === 'list'} class={view() === 'list' ? 'sim-tab sim-tab-current' : 'sim-tab'} onClick={() => setView('list')}>List</button>
+              <button role="tab" aria-selected={view() === 'tree'} class={view() === 'tree' ? 'sim-tab sim-tab-current' : 'sim-tab'} onClick={() => setView('tree')}>Tree</button>
+            </div>
           </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>
+        <Show when={stats().failureNodes > 0 || stale()}>
+          <div class="cg-notes">
+            <Show when={stats().failureNodes > 0}><span>The generation stops at the first failure.</span></Show>
+            <Show when={stale()}><span class="cg-stale"><Icon name="alert" size={13}/> Generated for other settings: generate again to follow the current ones.</span></Show>
+          </div>
+        </Show>
+        <Show when={error()}>
+          <div class="sim-feedback sim-settings-error"><Icon name="alert"/><div>Could not generate the graph: {error()}</div></div>
+        </Show>
+      </div>
 
-      <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)
+      <div class="cg-body">
+        <div ref={frame} class="cg-frame" style={{ display: graph().length > 0 && view() === 'visual' ? undefined : '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 class="cg-zoom">
+            <button class="sim-ghost sim-icon sim-sm" onClick={() => zoomBy(1 / 1.25)} aria-label="Zoom out" title="Zoom out"><Icon name="minus" size={14}/></button>
+            <span class="cg-zoom-value">{Math.round(zoom() * 100)}%</span>
+            <button class="sim-ghost sim-icon sim-sm" onClick={() => zoomBy(1.25)} aria-label="Zoom in" title="Zoom in"><Icon name="plus" size={14}/></button>
+            <span class="cg-zoom-sep"/>
+            <button class="sim-ghost sim-sm" onClick={() => { moved = false; fit(); }} title="Show the whole graph"><Icon name="fit" size={14}/> Fit</button>
+          </div>
+          <p class="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>
-        <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 => {
+        <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>);
+                    <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>
+            </For>
+          </div>
+        </Show>
 
-      <Show when={graph().length > 0 && view() === 'tree'}>
-        <div class="cg-tree"><Tree path={[0]}/></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>
+        <Show when={graph().length === 0 && !isGenerating() && !error()}>
+          <div class="cg-empty">
+            <Icon name="graph" size={32}/>
+            <strong>No graph yet</strong>
+            <span>Generate the graph to see every execution of these settings up to the depth, with the verdict of each configuration.</span>
+            <button class="sim-primary" onClick={generate}><Icon name="play" size={14}/> Generate up to depth {maxDepth()}</button>
+          </div>
+        </Show>
+
+        <Show when={selected()}>
+          {n => (<div class="cg-selection" role="region" aria-label="Selected configuration">
+              <div class="cg-selection-head">
+                <span class={`sim-chip sim-${n().status}`}>{STATUS_TEXT[n().status]}</span>
+                <span class="sim-spacer"/>
+                <button class="sim-ghost sim-icon sim-sm" onClick={() => setSelected(null)} aria-label="Clear the selection" title="Clear the selection"><Icon name="close" size={14}/></button>
+              </div>
+              <Show when={props.drawConfig}><Preview node={n()}/></Show>
+              <dl class="cg-selection-facts">
+                <dt>Path</dt><dd><code>[{n().path.join(', ')}]</code></dd>
+                <dt>Round</dt><dd>{n().depth}</dd>
+                <dt>Explored</dt><dd>{n().childrenCount} {n().childrenCount === 1 ? 'child' : 'children'}</dd>
+              </dl>
+              <Show when={props.onOpen}>
+                <button class="sim-primary sim-sm" onClick={() => open(n())}>Open in simulator</button>
+              </Show>
+            </div>)}
+        </Show>
+      </div>
     </div>);
 }