@bramas/simulant-ui 0.1.2 → 0.3.0

package/dist/SimulatorApp.jsx

@@ -1,9 +1,12 @@
 /**
- * The simulator page, in two views. The simulation: an execution of the selected experiment,
- * step by step. The execution toolbar is on top (rounds, the adversary's choices, the path), the
- * configuration and its state on the left, the algorithm on the right, the settings and saved
- * settings below, then the configuration graph. The model (`#model`): the experiment's semantics
- * and the declarations it is built from, as written, to compare with the paper.
+ * The simulator page, as a desktop application that fills the window. The top bar picks the
+ * project and the view. The simulation: the transport (rounds, playback, the verdict, the
+ * adversary's choices, then the path) above a workbench whose center always shows the current
+ * configuration; an activity bar shows or hides the panels around it (settings and saved
+ * settings on the left, the algorithm and the state on the right), resized by splitters. The
+ * graph view puts the configuration graph in the center, beside the same settings. The model
+ * (`#model`): the experiment's semantics and the declarations it is built from, as written, to
+ * compare with the paper. A status bar sums up the experiment.
  */
 import { batch, createEffect, createMemo, createSignal, For, onCleanup, onMount, Show } from "solid-js";
 import { ConfigGraphGenerator } from "./components/ConfigGraphGenerator.jsx";
@@ -13,10 +16,53 @@ import { StateInspector } from "./components/StateInspector.jsx";
 import { ModelView } from "./components/ModelView.jsx";
 import { SettingsLibrary } from "./components/SettingsLibrary.jsx";
 import { BranchPicker } from "./components/BranchPicker.jsx";
+import { Icon, Logo } from "./components/Icon.jsx";
+import { Splitter } from "./components/Splitter.jsx";
+import { createSystemDark, renderTheme } from "./components/theme.js";
 import { distinguishing, distinguishingChoices } from "./sim/branches.js";
 const DEFAULT_STORAGE_KEY = 'project_settings_v2';
 const THEME_KEY = 'simulant-theme';
-const CANVAS = { width: 500, height: 300 };
+const PANELS_KEY = 'simulant-panels';
+const RANDOM_KEY = 'simulant-random-branch';
+const SIZES_KEY = 'simulant-panel-sizes';
+const DOCKS_KEY = 'simulant-panel-docks';
+const WEIGHTS_KEY = 'simulant-panel-weights';
+const PANEL_IDS = ['settings', 'library', 'algorithm', 'state'];
+const PANEL_TITLE = { settings: 'Settings', library: 'Saved settings', algorithm: 'Algorithm', state: 'State' };
+const DEFAULT_PANELS = { settings: true, library: true, algorithm: true, state: true };
+/** The panels the graph view shows beside the graph (the graph follows the settings). */
+const GRAPH_PANELS = new Set(['settings', 'library']);
+/** Panels that take only the height they need in a side bar. */
+const COMPACT_PANELS = new Set(['settings']);
+const DOCKS = ['left', 'right', 'bottom'];
+const DOCK_LABEL = { left: 'Left side bar', right: 'Right side bar', bottom: 'Below the configuration' };
+const DOCK_ICON = { left: 'dockLeft', right: 'dockRight', bottom: 'dockBottom' };
+const DEFAULT_DOCKS = { left: ['settings', 'library'], right: ['algorithm'], bottom: ['state'] };
+/** Widths of the side bars, in pixels, and the share of the center below the configuration. */
+const DEFAULT_SIZES = { left: 300, right: 540, bottom: 0.34 };
+/** Stored docks, with every panel exactly once (panels added later go to their default dock). */
+function normalizeDocks(stored) {
+    const seen = new Set();
+    const out = { left: [], right: [], bottom: [] };
+    for (const dock of DOCKS) {
+        for (const id of Array.isArray(stored?.[dock]) ? stored[dock] : []) {
+            if (PANEL_IDS.includes(id) && !seen.has(id)) {
+                seen.add(id);
+                out[dock].push(id);
+            }
+        }
+    }
+    for (const dock of DOCKS)
+        for (const id of DEFAULT_DOCKS[dock])
+            if (!seen.has(id))
+                out[dock].push(id);
+    return out;
+}
+const VIEW_HASH = { simulation: '', graph: '#graph', model: '#model' };
+/** Steps per second while playing. */
+const SPEEDS = [1, 2, 4, 8];
+/** Beyond this length, the path's stops are not judged one by one. */
+const JUDGED_PATH = 400;
 // Browser storage may be unavailable (private windows, blocked site data): the page works without it.
 function readStorage(key) {
     try {
@@ -69,6 +115,81 @@ const typing = (e) => {
     const t = e.target;
     return !!t && (t.isContentEditable || ['INPUT', 'TEXTAREA', 'SELECT'].includes(t.tagName));
 };
+/** `N=6 · site=2`, for the status bar. */
+const settingsSummary = (settings) => Object.entries(settings).map(([k, v]) => {
+    const s = typeof v === 'string' ? v : JSON.stringify(v);
+    return `${k}=${s.length > 18 ? s.slice(0, 16) + '…' : s}`;
+}).join(' · ');
+/**
+ * Where the stage draws the configuration: centered, with room around the ring for labels and
+ * up to four agents stacked on a node (the default ring stacks them outwards).
+ */
+const geometry = (size) => ({
+    cx: size.w / 2,
+    cy: size.h / 2,
+    r: Math.max(40, Math.min(size.w, size.h) / 2 - 68),
+});
+/** A panel's dock menu ("Move to…") and the button that hides it. */
+function PanelActions(props) {
+    const [open, setOpen] = createSignal(false);
+    let root;
+    const onPointer = (e) => { if (!root?.contains(e.target))
+        setOpen(false); };
+    const onKey = (e) => { if (e.key === 'Escape')
+        setOpen(false); };
+    createEffect(() => {
+        if (!open())
+            return;
+        window.addEventListener('pointerdown', onPointer);
+        window.addEventListener('keydown', onKey);
+        onCleanup(() => {
+            window.removeEventListener('pointerdown', onPointer);
+            window.removeEventListener('keydown', onKey);
+        });
+    });
+    return (<>
+      <Show when={props.onMove}>
+        <div class="sim-popover-anchor" ref={root}>
+          <button class="sim-ghost sim-icon sim-sm" onClick={() => setOpen(v => !v)} aria-label={`Move ${props.title.toLowerCase()}`} aria-haspopup="menu" aria-expanded={open()} title="Move this panel (or drag its title bar)">
+            <Icon name={props.dock ? DOCK_ICON[props.dock] : 'dock'} size={14}/>
+          </button>
+          <Show when={open()}>
+            <div class="sim-menu" role="menu" aria-label={`Move ${props.title.toLowerCase()} to`}>
+              <div class="sim-menu-label">Move to</div>
+              <For each={DOCKS}>
+                {dock => (<button role="menuitemradio" aria-checked={props.dock === dock} class={`sim-menu-item${props.dock === dock ? ' sim-menu-current' : ''}`} onClick={() => { setOpen(false); props.onMove(dock); }}>
+                    <Icon name={DOCK_ICON[dock]} size={15}/> {DOCK_LABEL[dock]}
+                    <Show when={props.dock === dock}><Icon name="check" size={14} class="sim-menu-check"/></Show>
+                  </button>)}
+              </For>
+            </div>
+          </Show>
+        </div>
+      </Show>
+      <Show when={props.onClose}>
+        <button class="sim-ghost sim-icon sim-sm" onClick={() => props.onClose()} aria-label={`Hide ${props.title.toLowerCase()}`} title="Hide this panel">
+          <Icon name="close" size={14}/>
+        </button>
+      </Show>
+    </>);
+}
+/** A panel's title bar: its name, what it shows, its actions; it drags the panel to another dock. */
+function PanelHead(props) {
+    return (<div class={`sim-panel-head${props.onDragStart ? ' sim-panel-head-draggable' : ''}`} onPointerDown={e => props.onDragStart?.(e)}>
+      <Icon name={props.icon}/>
+      <h2 class="sim-panel-title">{props.title}</h2>
+      <Show when={props.sub}><span class="sim-panel-sub">{props.sub}</span></Show>
+      <span class="sim-spacer"/>
+      {props.children}
+      <PanelActions title={props.title} dock={props.dock} onMove={props.onMove} onClose={props.onClose}/>
+    </div>);
+}
+/** A button of the activity bar: shows or hides a panel. */
+function ActivityButton(props) {
+    return (<button class={`sim-activity-btn${props.active ? ' sim-active' : ''}`} aria-pressed={props.active} aria-label={props.label} title={props.label} onClick={() => props.onClick()}>
+      <Icon name={props.icon} size={18}/>
+    </button>);
+}
 const VERDICT_TEXT = { success: 'success', failure: 'failure', inProgress: 'not yet' };
 /** What a configuration's verdict says about the execution, under each goal of the task. */
 const VERDICT_TITLE = {
@@ -99,41 +220,75 @@ export const SimulatorApp = (props) => {
     const [executionPath, setExecutionPath] = createSignal([0]);
     const [indexInPath, setIndexInPath] = createSignal(0);
     const [selectedAgent, setSelectedAgent] = createSignal(null);
-    // The view, in the URL's hash so that a link can open the model.
-    const viewOfHash = () => window.location.hash === '#model' ? 'model' : 'simulation';
+    const [playing, setPlaying] = createSignal(false);
+    // Past the end of the path, a step takes the first branch, or a random one (remembered).
+    const [randomBranch, setRandomBranch] = createSignal(readStorage(RANDOM_KEY) === true);
+    const toggleRandomBranch = () => {
+        setRandomBranch(r => !r);
+        writeStorage(RANDOM_KEY, randomBranch());
+    };
+    const [speed, setSpeed] = createSignal(2);
+    // The view, in the URL's hash so that a link can open the graph or the model.
+    const viewOfHash = () => window.location.hash === '#model' ? 'model' : window.location.hash === '#graph' ? 'graph' : 'simulation';
     const [view, setView] = createSignal(viewOfHash());
     const showView = (v) => {
         setView(v);
-        history.replaceState(null, '', `${window.location.pathname}${window.location.search}${v === 'model' ? '#model' : ''}`);
+        setPlaying(false);
+        history.replaceState(null, '', `${window.location.pathname}${window.location.search}${VIEW_HASH[v]}`);
     };
     const onHash = () => setView(viewOfHash());
     window.addEventListener('hashchange', onHash);
     onCleanup(() => window.removeEventListener('hashchange', onHash));
-    const [showConfigGraph, setShowConfigGraph] = createSignal(false);
+    // The panels shown, and their sizes (remembered).
+    const [panels, setPanels] = createSignal({ ...DEFAULT_PANELS, ...readStorage(PANELS_KEY) });
+    const togglePanel = (id) => setPanels(p => {
+        const next = { ...p, [id]: !p[id] };
+        writeStorage(PANELS_KEY, next);
+        return next;
+    });
+    const stored = { ...DEFAULT_SIZES, ...readStorage(SIZES_KEY) };
+    const [sizes, setSizes] = createSignal(stored.bottom > 0 && stored.bottom < 1 ? stored : { ...stored, bottom: DEFAULT_SIZES.bottom });
+    const resize = (key, value) => setSizes(s => ({ ...s, [key]: value }));
+    const saveSizes = () => writeStorage(SIZES_KEY, sizes());
+    const resetSize = (key) => { resize(key, DEFAULT_SIZES[key]); saveSizes(); };
+    const [showKeys, setShowKeys] = createSignal(false);
     const [setupLog, setSetupLog] = createSignal('');
     const [toast, setToast] = createSignal('');
     let canvas;
+    let stage;
+    let track;
+    let workbench;
+    let center;
+    let leftBar;
+    let rightBar;
     const goTo = (path, index = 0) => batch(() => {
         setExecutionPath(path.length ? path : [0]);
         setIndexInPath(Math.min(index, Math.max(0, path.length - 1)));
         setSelectedAgent(null);
+        setPlaying(false);
     });
     // Theme: the system's, unless the user picked one (remembered).
-    const systemDark = () => !!window.matchMedia?.('(prefers-color-scheme: dark)').matches;
+    const systemDark = createSystemDark();
     const [theme, setTheme] = createSignal(readStorage(THEME_KEY));
     const dark = () => (theme() ?? (systemDark() ? 'dark' : 'light')) === 'dark';
-    createEffect(() => {
-        const t = theme();
+    // Applied at once, not in an effect: the drawing colors are read from the applied theme.
+    const applyTheme = (t) => {
         if (t)
             document.documentElement.setAttribute('data-theme', t);
         else
             document.documentElement.removeAttribute('data-theme');
-    });
+    };
+    applyTheme(theme());
     const toggleTheme = () => {
         const next = dark() ? 'light' : 'dark';
+        applyTheme(next);
         setTheme(next);
         writeStorage(THEME_KEY, next);
     };
+    /** The colors drawings use, after the theme's tokens apply. */
+    const [mounted, setMounted] = createSignal(false);
+    onMount(() => setMounted(true));
+    const drawTheme = createMemo(() => (mounted(), renderTheme(stage, dark())));
     let toastTimer;
     const notify = (text) => {
         setToast(text);
@@ -180,7 +335,6 @@ export const SimulatorApp = (props) => {
             return { baseModel, execution: current.execute(baseModel) };
         }
         catch (e) {
-            console.error('Project setup failed:', e);
             setSetupLog(e instanceof Error ? e.message : String(e));
             return { baseModel: null, execution: null };
         }
@@ -235,6 +389,21 @@ export const SimulatorApp = (props) => {
             return undefined;
         }
     });
+    /** The verdict at each stop of the path, to mark where the task holds or fails. */
+    const pathVerdicts = createMemo(() => {
+        redrawTick();
+        const { execution, baseModel } = startedProject();
+        const judge = Projects[project()].verdict;
+        const path = executionPath();
+        if (!execution || !judge || path.length > JUDGED_PATH)
+            return [];
+        try {
+            return path.map((_, i) => judge(execution.get(path.slice(0, i + 1)), baseModel).verdict);
+        }
+        catch {
+            return [];
+        }
+    });
     const childCount = createMemo(() => {
         const { execution } = startedProject();
         if (!execution || !config())
@@ -286,7 +455,7 @@ export const SimulatorApp = (props) => {
         if (!execution || !draw)
             return;
         const c = execution.get([...currentPath().slice(0, -1), index]);
-        draw(ctx, c, baseModel, { centerX: size / 2, centerY: size / 2, radius: size * 0.34, nodeRadius: 4, agentRadius: 4, showNodeLabels: false });
+        draw(ctx, c, baseModel, { centerX: size / 2, centerY: size / 2, radius: size * 0.34, nodeRadius: 4, agentRadius: 4, showNodeLabels: false, theme: drawTheme() });
     };
     const inspected = createMemo(() => {
         redrawTick();
@@ -310,51 +479,98 @@ export const SimulatorApp = (props) => {
         }
         return { ...info, agents: info.agents.map(a => ({ ...a, explanation: a.index !== undefined ? explanations[a.index] : undefined })) };
     });
-    // Drawing, at the screen's resolution (renderers draw in CSS pixels).
+    // The stage follows the size of its panel.
+    const [stageSize, setStageSize] = createSignal({ w: 500, h: 300 });
+    onMount(() => {
+        if (!stage)
+            return;
+        const observer = new ResizeObserver(entries => {
+            const { width, height } = entries[0].contentRect;
+            // A hidden stage (the model view) keeps its last size.
+            if (width > 0 && height > 0)
+                setStageSize({ w: Math.floor(width), h: Math.floor(height) });
+        });
+        observer.observe(stage);
+        onCleanup(() => observer.disconnect());
+    });
+    /** Where the agents are drawn, for hit tests and the selection's halo. */
+    const agentsAt = () => {
+        const c = config();
+        const baseModel = startedProject().baseModel;
+        const current = Projects[project()];
+        if (!c || !baseModel || !current.getAgentsRenderInfo)
+            return [];
+        const { cx, cy, r } = geometry(stageSize());
+        try {
+            return current.getAgentsRenderInfo(c, baseModel, cx, cy, r);
+        }
+        catch (err) {
+            console.error('Error locating the agents:', err);
+            return [];
+        }
+    };
+    // Drawing, at the screen's resolution (renderers draw in CSS pixels), then the selection.
     createEffect(() => {
         redrawTick();
         const c = config();
         const baseModel = startedProject().baseModel;
+        const size = stageSize();
+        const colors = drawTheme();
+        const selected = selectedAgent();
         if (!canvas || !c || !baseModel)
             return;
         const ctx = canvas.getContext('2d');
         if (!ctx)
             return;
         const ratio = window.devicePixelRatio || 1;
-        if (canvas.width !== CANVAS.width * ratio) {
-            canvas.width = CANVAS.width * ratio;
-            canvas.height = CANVAS.height * ratio;
+        if (canvas.width !== size.w * ratio || canvas.height !== size.h * ratio) {
+            canvas.width = size.w * ratio;
+            canvas.height = size.h * ratio;
         }
         ctx.setTransform(ratio, 0, 0, ratio, 0, 0);
-        ctx.clearRect(0, 0, CANVAS.width, CANVAS.height);
-        const current = Projects[project()];
+        ctx.clearRect(0, 0, size.w, size.h);
+        const { cx, cy, r } = geometry(size);
         try {
-            current.drawConfig?.(ctx, c, baseModel, { centerX: 250, centerY: 150, radius: 100, showNodeLabels: true });
+            Projects[project()].drawConfig?.(ctx, c, baseModel, { centerX: cx, centerY: cy, radius: r, showNodeLabels: true, theme: colors });
         }
         catch (e) {
             console.error('Error drawing config:', e);
         }
+        const halo = selected !== null ? agentsAt().find(a => a.agentId === selected) : undefined;
+        if (halo) {
+            ctx.save();
+            ctx.strokeStyle = colors.accent;
+            ctx.lineWidth = 2;
+            ctx.beginPath();
+            ctx.arc(halo.position.x, halo.position.y, 12, 0, 2 * Math.PI);
+            ctx.stroke();
+            ctx.globalAlpha = 0.25;
+            ctx.lineWidth = 6;
+            ctx.beginPath();
+            ctx.arc(halo.position.x, halo.position.y, 15, 0, 2 * Math.PI);
+            ctx.stroke();
+            ctx.restore();
+        }
     });
-    // Clicking an agent selects it in the state inspector.
-    const handleCanvasClick = (e) => {
-        const c = config();
-        const baseModel = startedProject().baseModel;
-        const current = Projects[project()];
-        if (!canvas || !c || !baseModel || !current.getAgentsRenderInfo)
-            return;
+    const hitAt = (e) => {
+        if (!canvas)
+            return undefined;
         const rect = canvas.getBoundingClientRect();
-        const x = (e.clientX - rect.left) * CANVAS.width / rect.width;
-        const y = (e.clientY - rect.top) * CANVAS.height / rect.height;
-        try {
-            const hit = current.getAgentsRenderInfo(c, baseModel, 250, 150, 100)
-                .find(a => Math.hypot(x - a.position.x, y - a.position.y) <= 10);
-            setSelectedAgent(hit ?? null);
-        }
-        catch (err) {
-            console.error('Error handling canvas click:', err);
-        }
+        const x = e.clientX - rect.left, y = e.clientY - rect.top;
+        return agentsAt().find(a => Math.hypot(x - a.position.x, y - a.position.y) <= 10);
     };
+    // Clicking an agent selects it in the state inspector; hovering names it.
+    const handleCanvasClick = (e) => setSelectedAgent(hitAt(e)?.agentId ?? null);
+    const [hover, setHover] = createSignal();
+    // Agents move between configurations: the tooltip waits for the pointer to move again.
+    createEffect(() => { config(); setHover(undefined); });
+    const hovered = createMemo(() => {
+        const h = hover();
+        const agent = h && inspected()?.agents.find(a => a.id === h.agentId);
+        return h && { at: h.position, name: agent?.name ?? `agent ${h.agentId}`, agent };
+    });
     // Navigation
+    const atEnd = () => indexInPath() === executionPath().length - 1 && childCount() === 0;
     const onNext = () => {
         if (!canExplore())
             return;
@@ -362,26 +578,55 @@ export const SimulatorApp = (props) => {
             setIndexInPath(i => i + 1);
         }
         else if (childCount() > 0) {
+            const execution = startedProject().execution;
+            const choice = randomBranch() ? Math.min(execution.getRandomChildIndex(currentPath()), childCount() - 1) : 0;
             batch(() => {
-                setExecutionPath(p => [...p, 0]);
+                setExecutionPath(p => [...p, choice]);
                 setIndexInPath(i => i + 1);
             });
         }
     };
-    const onPrevious = () => {
-        if (canExplore() && indexInPath() > 0)
-            setIndexInPath(i => i - 1);
+    const step = (index) => {
+        setPlaying(false);
+        if (canExplore())
+            setIndexInPath(Math.max(0, Math.min(index, executionPath().length - 1)));
     };
+    const onPrevious = () => step(indexInPath() - 1);
     const setChoice = (index) => {
         if (!canExplore())
             return;
+        setPlaying(false);
         // A different choice at this step: the steps after it no longer apply.
         setExecutionPath([...executionPath().slice(0, indexInPath()), index]);
     };
+    const togglePlay = () => {
+        if (playing())
+            setPlaying(false);
+        else if (canExplore() && !atEnd())
+            setPlaying(true);
+    };
+    // Playing steps forward (taking the first branch past the path) until the execution ends.
+    createEffect(() => {
+        if (!playing())
+            return;
+        const timer = setInterval(() => {
+            if (!canExplore() || atEnd())
+                setPlaying(false);
+            else
+                onNext();
+        }, 1000 / speed());
+        onCleanup(() => clearInterval(timer));
+    });
     const onKey = (e) => {
-        if (modelShown() || typing(e) || e.altKey || e.ctrlKey || e.metaKey)
+        if (e.key === 'Escape') {
+            setShowKeys(false);
+            if (!pickingBranch())
+                setSelectedAgent(null);
+        }
+        if (shownView() !== 'simulation' || typing(e) || e.altKey || e.ctrlKey || e.metaKey)
             return;
         if (e.key === 'ArrowRight') {
+            setPlaying(false);
             onNext();
             e.preventDefault();
         }
@@ -389,9 +634,153 @@ export const SimulatorApp = (props) => {
             onPrevious();
             e.preventDefault();
         }
+        else if (e.key === 'Home') {
+            step(0);
+            e.preventDefault();
+        }
+        else if (e.key === 'End') {
+            step(executionPath().length - 1);
+            e.preventDefault();
+        }
+        else if (e.key === ' ' && !(e.target instanceof HTMLButtonElement)) {
+            togglePlay();
+            e.preventDefault();
+        }
+        else if (e.key === '?')
+            setShowKeys(v => !v);
+        else if (e.key === 'r' || e.key === 'R')
+            toggleRandomBranch();
     };
     window.addEventListener('keydown', onKey);
     onCleanup(() => window.removeEventListener('keydown', onKey));
+    // The shortcuts close on a click elsewhere.
+    let shortcuts;
+    const onPointer = (e) => {
+        if (showKeys() && !shortcuts?.contains(e.target))
+            setShowKeys(false);
+    };
+    window.addEventListener('pointerdown', onPointer);
+    onCleanup(() => window.removeEventListener('pointerdown', onPointer));
+    // The current stop of the path stays in view.
+    createEffect(() => {
+        indexInPath();
+        executionPath();
+        queueMicrotask(() => {
+            const current = track?.querySelector('.sim-current');
+            if (!track || !current)
+                return;
+            const left = current.offsetLeft - track.offsetLeft, right = left + current.offsetWidth;
+            if (left < track.scrollLeft + 8)
+                track.scrollLeft = left - 24;
+            else if (right > track.scrollLeft + track.clientWidth - 16)
+                track.scrollLeft = right - track.clientWidth + 40;
+        });
+    });
+    // The side bars leave the configuration at least this wide.
+    const STAGE_MIN = 320;
+    const workbenchWidth = () => workbench?.getBoundingClientRect().width ?? window.innerWidth;
+    /** A side bar's width as shown: narrow windows shrink the side bars below their remembered widths. */
+    const barWidth = (bar) => bar?.getBoundingClientRect().width ?? 0;
+    const resizeLeft = (w) => resize('left', Math.round(Math.max(220, Math.min(w, 600, workbenchWidth() - STAGE_MIN - barWidth(rightBar)))));
+    const resizeRight = (w) => resize('right', Math.round(Math.max(280, Math.min(w, workbenchWidth() - STAGE_MIN - barWidth(leftBar)))));
+    const centerHeight = () => center?.getBoundingClientRect().height || 600;
+    const resizeBottom = (h) => resize('bottom', Math.max(0.15, Math.min(h / centerHeight(), 0.7)));
+    // Where each panel is docked, in order, and how panels sharing a dock divide it (remembered).
+    const [docks, setDocks] = createSignal(normalizeDocks(readStorage(DOCKS_KEY)));
+    const dockOf = (id) => DOCKS.find(d => docks()[d].includes(id));
+    const movePanel = (id, dock, index) => {
+        setDocks(d => {
+            const next = { left: d.left.filter(x => x !== id), right: d.right.filter(x => x !== id), bottom: d.bottom.filter(x => x !== id) };
+            next[dock].splice(index ?? next[dock].length, 0, id);
+            writeStorage(DOCKS_KEY, next);
+            return next;
+        });
+        if (!panels()[id])
+            togglePanel(id);
+    };
+    const resetLayout = () => {
+        batch(() => {
+            setPanels({ ...DEFAULT_PANELS });
+            setDocks(normalizeDocks(null));
+            setWeights({});
+            setSizes({ ...DEFAULT_SIZES });
+        });
+        writeStorage(PANELS_KEY, null);
+        writeStorage(DOCKS_KEY, null);
+        writeStorage(WEIGHTS_KEY, null);
+        saveSizes();
+    };
+    const [weights, setWeights] = createSignal(readStorage(WEIGHTS_KEY) ?? {});
+    const weightOf = (id) => weights()[id] ?? 1;
+    const saveWeights = () => writeStorage(WEIGHTS_KEY, weights());
+    const panelElement = (id) => workbench?.querySelector(`[data-panel="${id}"]`);
+    const extent = (id, dock) => {
+        const box = panelElement(id)?.getBoundingClientRect();
+        return box ? (dock === 'bottom' ? box.width : box.height) : 0;
+    };
+    /** Gives `first` (and takes from `second`, its neighbor) so that `first` measures `size`. */
+    const splitPanels = (first, second, dock, size) => {
+        const both = extent(first, dock) + extent(second, dock);
+        if (both <= 0)
+            return;
+        const share = Math.max(100, Math.min(size, both - 100)) / both;
+        const total = weightOf(first) + weightOf(second);
+        setWeights(w => ({ ...w, [first]: share * total, [second]: (1 - share) * total }));
+    };
+    /** Panels the current view shows: the simulation shows them all, the graph only the settings. */
+    const panelShown = (id) => panels()[id] && (shownView() === 'simulation' || (shownView() === 'graph' && GRAPH_PANELS.has(id)));
+    const dockShown = (dock) => shownView() !== 'model' && docks()[dock].some(panelShown);
+    const [dragging, setDragging] = createSignal(null);
+    /** The drop zones, in page coordinates: strips on the sides, and the bottom of the center. */
+    const dropZones = () => {
+        const box = workbench?.getBoundingClientRect();
+        if (!box)
+            return undefined;
+        const side = Math.min(320, box.width * 0.24);
+        return {
+            left: { left: box.left, top: box.top, width: side, height: box.height },
+            right: { left: box.right - side, top: box.top, width: side, height: box.height },
+            bottom: { left: box.left + side, top: box.top + box.height * 0.5, width: box.width - 2 * side, height: box.height * 0.5 },
+        };
+    };
+    const dropAt = (id, x, y) => {
+        const zones = dropZones();
+        const dock = zones && DOCKS.find(d => x >= zones[d].left && x <= zones[d].left + zones[d].width && y >= zones[d].top && y <= zones[d].top + zones[d].height);
+        if (!dock)
+            return undefined;
+        // Before the first panel of the dock whose middle is past the pointer.
+        const others = docks()[dock].filter(p => p !== id);
+        const before = others.find(p => {
+            const box = panelShown(p) ? panelElement(p)?.getBoundingClientRect() : undefined;
+            return box && (dock === 'bottom' ? x < box.left + box.width / 2 : y < box.top + box.height / 2);
+        });
+        return { dock, index: before ? others.indexOf(before) : others.length };
+    };
+    const startPanelDrag = (id, e) => {
+        if (e.button !== 0 || e.target.closest('button, input, select, a'))
+            return;
+        e.preventDefault();
+        const from = { x: e.clientX, y: e.clientY };
+        const move = (ev) => {
+            if (!dragging() && Math.hypot(ev.clientX - from.x, ev.clientY - from.y) < 6)
+                return;
+            document.documentElement.classList.add('sim-dragging-panel');
+            setDragging({ id, x: ev.clientX, y: ev.clientY, drop: dropAt(id, ev.clientX, ev.clientY) });
+        };
+        const end = (ev) => {
+            window.removeEventListener('pointermove', move);
+            window.removeEventListener('pointerup', end);
+            window.removeEventListener('pointercancel', end);
+            document.documentElement.classList.remove('sim-dragging-panel');
+            const drop = ev.type === 'pointerup' ? dragging()?.drop : undefined;
+            setDragging(null);
+            if (drop)
+                movePanel(id, drop.dock, drop.index);
+        };
+        window.addEventListener('pointermove', move);
+        window.addEventListener('pointerup', end);
+        window.addEventListener('pointercancel', end);
+    };
     // Settings
     const [savedSettings, setSavedSettings] = createSignal([]);
     createEffect(() => setSavedSettings(getSavedSettings(storageKey, project())));
@@ -412,6 +801,7 @@ export const SimulatorApp = (props) => {
             window.prompt('Copy this link:', url);
         }
     };
+    const share = () => copy(`${shareLink(effectiveSettings(), currentPath())}${VIEW_HASH[shownView()]}`);
     onMount(() => {
         const shared = new URLSearchParams(window.location.search).get('shared');
         const data = shared && decodeSettingFromUrl(shared);
@@ -437,164 +827,381 @@ export const SimulatorApp = (props) => {
             return undefined;
         }
     });
-    const modelShown = () => view() === 'model' && !!description();
+    const hasGraph = () => !!Projects[project()].executionStatusChecker;
+    /** The view shown: the one asked for, when this project has it. */
+    const shownView = () => view() === 'model' && description() ? 'model' : view() === 'graph' && hasGraph() ? 'graph' : 'simulation';
+    // The graph stays mounted once opened, so that switching views keeps it.
+    const [graphOpened, setGraphOpened] = createSignal(false);
+    createEffect(() => { if (shownView() === 'graph')
+        setGraphOpened(true); });
     const chooseProject = (name) => batch(() => {
         setProjectUserSettings(null);
         goTo([0]);
         setProject(name);
     });
-    return (<div class="sim-app">
-      <header class="sim-header">
-        <h1>{props.title ?? 'Simulant'}</h1>
-        <select value={project()} onChange={(e) => chooseProject(e.currentTarget.value)} aria-label="Simulation">
-          <For each={projectKeys}>{(p) => <option value={p}>{p}</option>}</For>
-        </select>
-        <Show when={description()}>
-          <div class="sim-tabs" role="tablist">
-            <button role="tab" aria-selected={view() === 'simulation'} class={view() === 'simulation' ? 'sim-tab sim-tab-current' : 'sim-tab'} onClick={() => showView('simulation')}>Simulation</button>
-            <button role="tab" aria-selected={view() === 'model'} class={view() === 'model' ? 'sim-tab sim-tab-current' : 'sim-tab'} onClick={() => showView('model')} title="The model and the experiment, as defined">Model</button>
-          </div>
-        </Show>
-        <span class="sim-spacer"/>
-        <button class="sim-ghost theme-toggle" onClick={toggleTheme} title={dark() ? 'Light theme' : 'Dark theme'}>
-          {dark() ? '☀' : '🌙'}
-        </button>
-      </header>
-
-      <Show when={updateNotice()}>
-        {notice => (<pre class={`sim-notice${notice().outOfDate ? ' sim-error' : ''}`}>
-            {notice().outOfDate ? 'Out of date: the sources do not compile; showing the last version that did.\n' : 'Sources updated; the execution restarted.\n'}
-            {notice().text}
-          </pre>)}
-      </Show>
-      <Show when={modelShown() && description()}>
-        {d => <ModelView description={d()} simulation={project()} onCopyLink={() => copy(`${shareLink(effectiveSettings(), currentPath())}#model`)}/>}
-      </Show>
-
-      <div class="sim-simulation" style={{ display: modelShown() ? 'none' : undefined }}>
-        <Show when={description()}>
-          {d => (<button class="sim-model-strip" onClick={() => showView('model')} title="Show the model and the experiment as defined">
-              <span class="sim-model-strip-label">Model</span>
-              <For each={d().summary}>{c => <span class="sim-model-strip-item">{c}</span>}</For>
-              <span class="sim-model-strip-more">details →</span>
-            </button>)}
-        </Show>
-
-        <section class="sim-card">
-          <div class="sim-toolbar">
-            <div class="sim-group">
-              <button class="sim-ghost sim-icon" onClick={() => setIndexInPath(0)} disabled={indexInPath() === 0 || !canExplore()} title="First step">«</button>
-              <button onClick={onPrevious} disabled={indexInPath() === 0 || !canExplore()} title="Previous step (←)">Previous {'<'}</button>
-              <span class="sim-round">Round {indexInPath()}</span>
-              <button onClick={onNext} disabled={!canExplore() || (indexInPath() === executionPath().length - 1 && childCount() === 0)} title="Next step (→)">{'>'} Next</button>
-              <button class="sim-ghost sim-icon" onClick={() => setIndexInPath(executionPath().length - 1)} disabled={indexInPath() === executionPath().length - 1 || !canExplore()} title="Last step of the path">»</button>
+    const branchIndex = () => currentPath().at(-1);
+    /** Each panel's content; the docks place them. Moving a panel to another dock recreates it. */
+    const head = (id) => ({ dock: dockOf(id), onMove: (dock) => movePanel(id, dock), onClose: () => togglePanel(id), onDragStart: (e) => startPanelDrag(id, e) });
+    const panelContent = {
+        settings: () => (<section class="sim-panel sim-settings">
+        <PanelHead icon="sliders" title="Settings" {...head('settings')}>
+          <button class="sim-ghost sim-sm" onClick={() => batch(() => { setProjectUserSettings(null); goTo([0]); })} disabled={!projectUserSettings()} title="Reset the settings to the experiment's defaults">
+            <Icon name="reset" size={14}/> <span class="sim-btn-label">Reset</span>
+          </button>
+        </PanelHead>
+        <div class="sim-panel-body">
+          <Show when={editorSchema()} keyed>
+            {schema => (<GenericEditor schema={schema} value={projectUserSettings()} onInput={(v) => batch(() => { setProjectUserSettings(v); goTo([0]); })}/>)}
+          </Show>
+          <Show when={setupLog()}>
+            <div class="sim-feedback sim-settings-error" role="alert">
+              <Icon name="alert"/>
+              <div>
+                <strong>These settings do not start an execution</strong>
+                <mark>{setupLog()}</mark>
+              </div>
             </div>
-            <Show when={verdict()}>
-              {v => <span class={`sim-chip sim-${v().status}`} title={v().title}>task: {v().text}</span>}
-            </Show>
-            <Show when={config() && childCount() === 0}>
-              <span class="sim-chip" title="No successor: the execution ends here">end of execution</span>
-            </Show>
-            <Show when={branches().length > 1}>
-              <span class="sim-divider"/>
-              <div class="sim-group sim-choices">
-                <button class="sim-ghost sim-icon" onClick={() => setChoice((currentPath().at(-1) + branches().length - 1) % branches().length)} disabled={!canExplore()} title="Previous branch">‹</button>
-                <span class="sim-branch">Branch {currentPath().at(-1)} ∈ [0, {branches().length - 1}]</span>
-                <button class="sim-ghost sim-icon" onClick={() => setChoice((currentPath().at(-1) + 1) % branches().length)} disabled={!canExplore()} title="Next branch">›</button>
-                <span class="sim-step-label sim-branch-label" title={branches()[currentPath().at(-1)]?.label}>{branches()[currentPath().at(-1)]?.short}</span>
-                <button class="sim-ghost" onClick={() => setPickingBranch(true)} disabled={!canExplore()} title="See every branch of this step and pick one">All branches</button>
+          </Show>
+          <Show when={!setupLog() && settingsWarnings().length > 0}>
+            <div class="sim-feedback sim-settings-warning" role="alert">
+              <Icon name="alert"/>
+              <div>
+                <strong>Initial settings warning</strong>
+                <For each={settingsWarnings()}>{warning => <span>{warning}</span>}</For>
+                <span class="sim-muted">You can still explore this execution. Checks over the declared domains do not cover settings outside them.</span>
               </div>
+            </div>
+          </Show>
+        </div>
+      </section>),
+        library: () => (<section class="sim-panel sim-library-panel">
+        <PanelHead icon="bookmark" title="Saved settings" {...head('library')}/>
+        <div class="sim-panel-body">
+          <SettingsLibrary presets={predefinedSettings()} saved={savedSettings()} current={effectiveSettings()} onLoad={loadSettings} onShare={s => copy(shareLink(loadedSettings(project(), s.settings), s.path))} onDelete={name => {
+                deleteSettings(storageKey, project(), name);
+                setSavedSettings(getSavedSettings(storageKey, project()));
+            }} onSave={name => {
+                saveSettings(storageKey, project(), name, effectiveSettings(), currentPath());
+                setSavedSettings(getSavedSettings(storageKey, project()));
+                notify(`Saved "${name}"`);
+            }}/>
+        </div>
+      </section>),
+        algorithm: () => (<Show when={config() && algorithmViewInfo()} fallback={<section class="sim-panel">
+          <PanelHead icon="file" title="Algorithm" {...head('algorithm')}/>
+          <div class="sim-stage-empty"><Icon name="file" size={28}/><span>No algorithm to show.</span></div>
+        </section>}>
+        {info => (<AlgorithmViewer source={info().source} agents={info().agents} onHeadPointerDown={e => startPanelDrag('algorithm', e)} highlighted={inspected()?.agents.find(a => a.id === selectedAgent())?.name ?? null} onSelectAgent={name => setSelectedAgent(inspected()?.agents.find(a => a.name === name)?.id ?? null)} actions={<PanelActions title="Algorithm" {...head('algorithm')}/>}/>)}
+      </Show>),
+        state: () => (<section class="sim-panel sim-inspector-panel">
+        <PanelHead icon="inspect" title="State" sub="world, agents and parameters" {...head('state')}/>
+        <div class="sim-panel-body">
+          <Show when={inspected()} fallback={<p class="sim-muted">No state to inspect.</p>}>
+            {state => <StateInspector state={state()} selected={selectedAgent()} onSelect={setSelectedAgent} onClearSelection={() => setSelectedAgent(null)}/>}
+          </Show>
+        </div>
+      </section>),
+    };
+    /** A dock's panels in order, the hidden ones kept mounted, with splitters between neighbors that share the space. */
+    const DockPanels = (p) => (<For each={docks()[p.dock]}>
+      {(id, i) => {
+            const fills = (x) => p.dock === 'bottom' || !COMPACT_PANELS.has(x);
+            const previous = () => docks()[p.dock].slice(0, i()).filter(panelShown).at(-1);
+            return (<>
+            <Show when={panelShown(id) && previous() && fills(id) && fills(previous()) && previous()} keyed>
+              {prev => (<Splitter orientation={p.dock === 'bottom' ? 'vertical' : 'horizontal'} value={extent(prev, p.dock)} onChange={size => splitPanels(prev, id, p.dock, size)} onCommit={saveWeights} onReset={() => { setWeights(w => ({ ...w, [prev]: 1, [id]: 1 })); saveWeights(); }} label={`Resize ${PANEL_TITLE[prev].toLowerCase()} and ${PANEL_TITLE[id].toLowerCase()}`}/>)}
             </Show>
-            <span class="sim-spacer" style={{ flex: 1 }}/>
-            <button class="sim-ghost" onClick={() => copy(shareLink(effectiveSettings(), currentPath()))} title="Copy a link to these settings and this path">Share</button>
-          </div>
-          <div class="sim-path">
-            <span class="sim-path-label">Path</span>
-            <For each={executionPath()}>
-              {(step, i) => (<button class={`sim-step${i() === indexInPath() ? ' sim-current' : ''}${i() > indexInPath() ? ' sim-future' : ''}`} onClick={() => setIndexInPath(i())} title={`Round ${i()}: ${stepLabel(i())}`}>
-                  {step}
-                </button>)}
-            </For>
-            <Show when={indexInPath() > 0 && stepLabel(indexInPath())}>
-              <span class="sim-step-label">last step: {stepLabel(indexInPath())}</span>
+            <div class={`sim-slot${dragging()?.id === id ? ' sim-slot-dragged' : ''}`} data-panel={id} hidden={!panelShown(id)} 
+            // Grow factors below 1 would leave part of the dock empty (a lone panel of weight 0.6
+            // takes 60% of it): scaled up, they keep their ratios and always fill the dock.
+            style={{ flex: fills(id) ? `${weightOf(id) * 100} 1 0` : '0 1 auto' }}>
+              {panelContent[id]()}
+            </div>
+          </>);
+        }}
+    </For>);
+    return (<div class={`sim-app sim-view-${shownView()}`}>
+      <header class="sim-topbar">
+        <div class="sim-brand">
+          <Logo />
+          <span class="sim-brand-name">Simulant</span>
+          <span class="sim-brand-sep">/</span>
+          <h1>{props.title ?? 'Simulator'}</h1>
+        </div>
+        <div class="sim-project">
+          <select value={project()} onChange={(e) => chooseProject(e.currentTarget.value)} aria-label="Simulation" title="Simulation">
+            <For each={projectKeys}>{(p) => <option value={p}>{p}</option>}</For>
+          </select>
+        </div>
+        <div class="sim-tabs" role="tablist" aria-label="View">
+          <button role="tab" aria-selected={shownView() === 'simulation'} class={shownView() === 'simulation' ? 'sim-tab sim-tab-current' : 'sim-tab'} onClick={() => showView('simulation')} title="Step through an execution">
+            <Icon name="play" size={13}/> <span class="sim-tab-label">Simulation</span>
+          </button>
+          <Show when={hasGraph()}>
+            <button role="tab" aria-selected={shownView() === 'graph'} class={shownView() === 'graph' ? 'sim-tab sim-tab-current' : 'sim-tab'} onClick={() => showView('graph')} title="Every execution from these settings, round by round">
+              <Icon name="graph" size={13}/> <span class="sim-tab-label">Graph</span>
+            </button>
+          </Show>
+          <Show when={description()}>
+            <button role="tab" aria-selected={shownView() === 'model'} class={shownView() === 'model' ? 'sim-tab sim-tab-current' : 'sim-tab'} onClick={() => showView('model')} title="The model and the experiment, as defined">
+              <Icon name="layers" size={13}/> <span class="sim-tab-label">Model</span>
+            </button>
+          </Show>
+        </div>
+        <span class="sim-spacer"/>
+        <div class="sim-topbar-actions">
+          <button class="sim-btn" onClick={share} title={shownView() === 'simulation' ? 'Copy a link to these settings and this path' : 'Copy a link that opens this view'}>
+            <Icon name="link"/> <span class="sim-share-label">Share</span>
+          </button>
+          <div class="sim-popover-anchor" ref={shortcuts}>
+            <button class="sim-ghost sim-icon" onClick={() => setShowKeys(v => !v)} aria-label="Keyboard shortcuts" aria-expanded={showKeys()} title="Keyboard shortcuts (?)">
+              <Icon name="keyboard"/>
+            </button>
+            <Show when={showKeys()}>
+              <div class="sim-shortcuts" role="dialog" aria-label="Keyboard shortcuts">
+                <h4>Keyboard shortcuts</h4>
+                <dl>
+                  <dt><kbd>→</kbd></dt><dd>Next step</dd>
+                  <dt><kbd>←</kbd></dt><dd>Previous step</dd>
+                  <dt><kbd>Home</kbd><kbd>End</kbd></dt><dd>First / last step of the path</dd>
+                  <dt><kbd>Space</kbd></dt><dd>Play / pause</dd>
+                  <dt><kbd>R</kbd></dt><dd>Random or first branch for new steps</dd>
+                  <dt><kbd>Esc</kbd></dt><dd>Clear the selected agent</dd>
+                  <dt><kbd>?</kbd></dt><dd>Show these shortcuts</dd>
+                </dl>
+              </div>
             </Show>
           </div>
-        </section>
+          <button class="sim-ghost sim-icon theme-toggle" onClick={toggleTheme} aria-label={dark() ? 'Light theme' : 'Dark theme'} title={dark() ? 'Light theme' : 'Dark theme'}>
+            <Icon name={dark() ? 'sun' : 'moon'}/>
+          </button>
+        </div>
+      </header>
 
-        <div class="sim-main">
-          <div class="sim-left">
-            <canvas ref={canvas} class="sim-canvas" style={{ width: `${CANVAS.width}px`, height: `${CANVAS.height}px` }} onClick={handleCanvasClick}/>
-            <Show when={inspected()}>
-              {state => <StateInspector state={state()} selected={selectedAgent()?.agentId ?? null} onClearSelection={() => setSelectedAgent(null)}/>}
+      <Show when={updateNotice()}>
+        {notice => (<div class={`sim-banner${notice().outOfDate ? ' sim-error' : ''}`} role="status">
+            <Icon name={notice().outOfDate ? 'alert' : 'info'}/>
+            <div class="sim-banner-body">
+              <strong>{notice().outOfDate ? 'Out of date: the sources do not compile; showing the last version that did.' : 'Sources updated; the execution restarted.'}</strong>
+              <Show when={notice().text}><pre>{notice().text}</pre></Show>
+            </div>
+            <Show when={!notice().outOfDate}>
+              <button class="sim-ghost sim-icon sim-sm" onClick={() => setUpdateNotice(null)} aria-label="Dismiss"><Icon name="close" size={14}/></button>
             </Show>
-          </div>
-          <Show when={config() && algorithmViewInfo()}>
-            {info => <AlgorithmViewer source={info().source} agents={info().agents}/>}
+          </div>)}
+      </Show>
+
+      <div class="sim-shell" hidden={shownView() === 'model'}>
+        <nav class="sim-activity" aria-label="Panels">
+          <ActivityButton icon="sliders" label="Settings" active={panels().settings} onClick={() => togglePanel('settings')}/>
+          <ActivityButton icon="bookmark" label="Saved settings" active={panels().library} onClick={() => togglePanel('library')}/>
+          <Show when={shownView() === 'simulation'}>
+            <span class="sim-activity-sep"/>
+            <ActivityButton icon="file" label="Algorithm" active={panels().algorithm} onClick={() => togglePanel('algorithm')}/>
+            <ActivityButton icon="inspect" label="State" active={panels().state} onClick={() => togglePanel('state')}/>
           </Show>
-        </div>
+          <span class="sim-spacer"/>
+          <ActivityButton icon="dock" label="Reset the panel layout" active={false} onClick={resetLayout}/>
+          <Show when={hasGraph()}>
+            <ActivityButton icon="graph" label={shownView() === 'graph' ? 'Back to the simulation' : 'Configuration graph'} active={shownView() === 'graph'} onClick={() => showView(shownView() === 'graph' ? 'simulation' : 'graph')}/>
+          </Show>
+        </nav>
 
-        <div class="sim-panels">
-          <section class="sim-card sim-settings">
-            <h3>
-              Settings
-              <span class="sim-spacer" style={{ flex: 1 }}/>
-              <button class="sim-ghost" onClick={() => batch(() => { setProjectUserSettings(null); goTo([0]); })} disabled={!projectUserSettings()}>Reset to defaults</button>
-            </h3>
-            <Show when={editorSchema()} keyed>
-              {schema => (<GenericEditor schema={schema} value={projectUserSettings()} onInput={(v) => batch(() => { setProjectUserSettings(v); goTo([0]); })}/>)}
-            </Show>
-            <Show when={setupLog()}>
-              <div class="sim-notice sim-error sim-settings-feedback" role="alert"><mark>{setupLog()}</mark></div>
-            </Show>
-            <Show when={!setupLog() && settingsWarnings().length > 0}>
-              <div class="sim-notice sim-settings-warning sim-settings-feedback" role="alert">
-                <strong>Initial settings warning</strong>
-                <For each={settingsWarnings()}>{warning => <div>{warning}</div>}</For>
-                <div>You can still explore this execution. Checks over the declared domains do not cover settings outside them.</div>
+        <div class="sim-main">
+          <div class="sim-transport-bar" hidden={shownView() !== 'simulation'}>
+            <section class="sim-transport" aria-label="Execution">
+              <div class="sim-transport-row">
+                <div class="sim-group">
+                  <button class="sim-ghost sim-icon" onClick={() => step(0)} disabled={indexInPath() === 0 || !canExplore()} aria-label="First step" title="First step (Home)"><Icon name="first"/></button>
+                  <button class="sim-btn sim-icon" onClick={onPrevious} disabled={indexInPath() === 0 || !canExplore()} aria-label="Previous step" title="Previous step (←)"><Icon name="previous"/></button>
+                  <div class="sim-round" title={`Round ${indexInPath()} of the path's ${executionPath().length - 1}`}>
+                    <span class="sim-round-label">Round</span>
+                    <span class="sim-round-value">{indexInPath()}</span>
+                    <span class="sim-round-total">/ {executionPath().length - 1}</span>
+                  </div>
+                  <button class="sim-btn sim-icon" onClick={() => { setPlaying(false); onNext(); }} disabled={!canExplore() || atEnd()} aria-label="Next step" title="Next step (→)"><Icon name="next"/></button>
+                  <button class="sim-ghost sim-icon" onClick={() => step(executionPath().length - 1)} disabled={indexInPath() === executionPath().length - 1 || !canExplore()} aria-label="Last step" title="Last step of the path (End)"><Icon name="last"/></button>
+                </div>
+                <span class="sim-divider"/>
+                <div class="sim-group">
+                  <button class={`${playing() ? 'sim-btn' : 'sim-primary'} sim-play`} onClick={togglePlay} disabled={!playing() && (!canExplore() || atEnd())} aria-label={playing() ? 'Pause' : 'Play'} title={playing() ? 'Pause (Space)' : 'Play: step forward until the execution ends (Space)'}>
+                    <Icon name={playing() ? 'pause' : 'play'}/>
+                  </button>
+                  <label class="sim-speed" title="Playback speed">
+                    <select value={speed()} onChange={e => setSpeed(Number(e.currentTarget.value))} aria-label="Playback speed">
+                      <For each={SPEEDS}>{s => <option value={s}>{s} step{s > 1 ? 's' : ''}/s</option>}</For>
+                    </select>
+                  </label>
+                </div>
+                <span class="sim-divider"/>
+                <div class="sim-group">
+                  <Show when={verdict()}>
+                    {v => <span class={`sim-chip sim-verdict sim-${v().status}`} title={v().title}>Task: {v().text}</span>}
+                  </Show>
+                  <Show when={config() && childCount() === 0}>
+                    <span class="sim-chip sim-verdict" title="No successor: the execution ends here">End of execution</span>
+                  </Show>
+                </div>
+                <span class="sim-divider"/>
+                <div class="sim-group sim-branches">
+                  <button class={`sim-ghost sim-icon sim-toggle${randomBranch() ? ' sim-toggle-on' : ''}`} onClick={toggleRandomBranch} aria-pressed={randomBranch()} aria-label="Random branch for new steps" title={randomBranch()
+            ? 'New steps take a random branch (R): click to take the first branch'
+            : 'New steps take the first branch (R): click to take a random branch'}>
+                    <Icon name="dice"/>
+                  </button>
+                  <Show when={branches().length > 1}>
+                    <Icon name="branch"/>
+                    <span class="sim-branch">Branch {branchIndex()} <span class="sim-branch-of">of {branches().length}</span></span>
+                    <button class="sim-ghost sim-icon sim-sm" onClick={() => setChoice((branchIndex() + branches().length - 1) % branches().length)} disabled={!canExplore()} aria-label="Previous branch" title="Previous branch"><Icon name="previous" size={14}/></button>
+                    <button class="sim-ghost sim-icon sim-sm" onClick={() => setChoice((branchIndex() + 1) % branches().length)} disabled={!canExplore()} aria-label="Next branch" title="Next branch"><Icon name="next" size={14}/></button>
+                    <span class="sim-step-label sim-branch-label" title={branches()[branchIndex()]?.label}>{branches()[branchIndex()]?.short || '(first options)'}</span>
+                    <button class="sim-btn sim-sm" onClick={() => setPickingBranch(true)} disabled={!canExplore()} title="See every branch of this step and pick one">
+                      <Icon name="grid" size={14}/> All branches
+                    </button>
+                  </Show>
+                </div>
+              </div>
+              <div class="sim-timeline">
+                <span class="sim-timeline-label">Path</span>
+                <div class="sim-track" ref={track}>
+                  <For each={executionPath()}>
+                    {(choice, i) => (<>
+                        <Show when={i() > 0}><span class="sim-track-sep"/></Show>
+                        <button class={`sim-step${i() === indexInPath() ? ' sim-current' : ''}${i() > indexInPath() ? ' sim-future' : ''}`} data-verdict={pathVerdicts()[i()]} onClick={() => step(i())} title={`Round ${i()}: ${stepLabel(i())}${pathVerdicts()[i()] ? ` (task: ${VERDICT_TEXT[pathVerdicts()[i()]]})` : ''}`}>
+                          {choice}
+                        </button>
+                      </>)}
+                  </For>
+                </div>
+                <Show when={indexInPath() > 0 && stepLabel(indexInPath())}>
+                  <span class="sim-step-label" title={stepLabel(indexInPath())}>last step: {stepLabel(indexInPath())}</span>
+                </Show>
               </div>
+            </section>
+          </div>
+
+          <div class="sim-workbench" ref={workbench}>
+            <aside class="sim-sidebar sim-dock" ref={leftBar} hidden={!dockShown('left')} style={{ 'flex-basis': `${sizes().left}px` }} aria-label={DOCK_LABEL.left}>
+              <DockPanels dock="left"/>
+            </aside>
+            <Show when={dockShown('left')}>
+              <Splitter orientation="vertical" value={barWidth(leftBar)} onChange={resizeLeft} onCommit={saveSizes} onReset={() => resetSize('left')} label="Resize the left side bar"/>
             </Show>
-          </section>
-          <section class="sim-card">
-            <h3>Saved settings</h3>
-            <SettingsLibrary presets={predefinedSettings()} saved={savedSettings()} current={effectiveSettings()} onLoad={loadSettings} onShare={s => copy(shareLink(loadedSettings(project(), s.settings), s.path))} onDelete={name => {
-            deleteSettings(storageKey, project(), name);
-            setSavedSettings(getSavedSettings(storageKey, project()));
-        }} onSave={name => {
-            saveSettings(storageKey, project(), name, effectiveSettings(), currentPath());
-            setSavedSettings(getSavedSettings(storageKey, project()));
-            notify(`Saved "${name}"`);
-        }}/>
-          </section>
-        </div>
 
-        <Show when={Projects[project()].executionStatusChecker}>
-          <section class="sim-card sim-section">
-            <h3>
-              Configuration graph
-              <span class="sim-muted">every execution from these settings, round by round</span>
-              <span class="sim-spacer" style={{ flex: 1 }}/>
-              <button class={showConfigGraph() ? 'sim-ghost' : ''} onClick={() => setShowConfigGraph(v => !v)}>
-                {showConfigGraph() ? 'Hide Configuration Graph' : 'Show Configuration Graph'}
-              </button>
-            </h3>
-            <Show when={showConfigGraph() && !updateNotice()?.outOfDate && projectRevision() + 1} keyed>
-              <ConfigGraphGenerator revision={Projects[project()].revision?.()} settings={effectiveSettings()} setup={Projects[project()].setup} execute={Projects[project()].execute} executionStatusChecker={Projects[project()].executionStatusChecker} drawConfig={Projects[project()].drawConfig} projectName={project()} createWorker={props.createGraphWorker} currentPath={currentPath()} onOpen={(settings, path) => batch(() => {
+            <main class="sim-center" ref={center}>
+              <section class="sim-panel sim-stage-panel" hidden={shownView() !== 'simulation'}>
+                <PanelHead icon="ring" title="Configuration" sub={`round ${indexInPath()} · ${settingsSummary(effectiveSettings())}`}/>
+                <div class="sim-stage" ref={stage}>
+                  <canvas ref={canvas} class={`sim-canvas${hover() ? ' sim-over-agent' : ''}`} style={{ width: `${stageSize().w}px`, height: `${stageSize().h}px` }} onClick={handleCanvasClick} onMouseMove={e => setHover(hitAt(e))} onMouseLeave={() => setHover(undefined)}/>
+                  <Show when={hovered()}>
+                    {h => (<div class="sim-stage-tip" style={{ left: `${h().at.x}px`, top: `${h().at.y}px` }}>
+                        <strong>{h().name}</strong>
+                        <Show when={h().agent}>{a => <span> · node {String(a().value.position)}{a().status !== 'correct' ? ` · ${a().status === 'hidden' ? 'gone' : 'faulty'}` : ''}</span>}</Show>
+                      </div>)}
+                  </Show>
+                  <Show when={!config()}>
+                    <div class="sim-stage-empty">
+                      <Icon name="ring" size={28}/>
+                      <span>No configuration to show.</span>
+                      <span class="sim-muted">The current settings do not start an execution: see the settings below.</span>
+                    </div>
+                  </Show>
+                  <Show when={config() && Projects[project()].getAgentsRenderInfo}>
+                    <div class="sim-stage-overlay">
+                      <span class="sim-stage-badge">
+                        {selectedAgent() !== null
+            ? `${inspected()?.agents.find(a => a.id === selectedAgent())?.name ?? 'Agent'} selected · Esc to clear`
+            : 'Click an agent to inspect it'}
+                      </span>
+                    </div>
+                  </Show>
+                </div>
+              </section>
+              <Show when={graphOpened() && hasGraph()}>
+                <section class="sim-panel sim-graph-panel" hidden={shownView() !== 'graph'}>
+                  <PanelHead icon="graph" title="Configuration graph" sub="every execution from these settings, round by round">
+                    <button class="sim-ghost sim-sm" onClick={() => showView('simulation')}><Icon name="previous" size={14}/> Back to the simulation</button>
+                  </PanelHead>
+                  <Show when={!updateNotice()?.outOfDate && projectRevision() + 1} keyed fallback={<div class="sim-stage-empty"><Icon name="alert" size={28}/><span>The sources do not compile: the graph waits until they do.</span></div>}>
+                    <ConfigGraphGenerator revision={Projects[project()].revision?.()} settings={effectiveSettings()} setup={Projects[project()].setup} execute={Projects[project()].execute} executionStatusChecker={Projects[project()].executionStatusChecker} drawConfig={Projects[project()].drawConfig} projectName={project()} createWorker={props.createGraphWorker} currentPath={currentPath()} theme={drawTheme()} onOpen={(settings, path) => batch(() => {
             setProjectUserSettings(settings);
             goTo(path, path.length - 1);
-            window.scrollTo({ top: 0, behavior: 'smooth' });
+            showView('simulation');
         })} configRadius={50} horizontalSpacing={140} verticalSpacing={150}/>
+                  </Show>
+                </section>
+              </Show>
+              <Show when={dockShown('bottom')}>
+                <Splitter orientation="horizontal" direction={-1} value={sizes().bottom * centerHeight()} onChange={resizeBottom} onCommit={saveSizes} onReset={() => resetSize('bottom')} label="Resize the panels below the configuration"/>
+              </Show>
+              <div class="sim-dock sim-dock-bottom" hidden={!dockShown('bottom')} style={{ flex: `0 0 ${sizes().bottom * 100}%` }} aria-label={DOCK_LABEL.bottom}>
+                <DockPanels dock="bottom"/>
+              </div>
+            </main>
+
+            <Show when={dockShown('right')}>
+              <Splitter orientation="vertical" direction={-1} value={barWidth(rightBar)} onChange={resizeRight} onCommit={saveSizes} onReset={() => resetSize('right')} label="Resize the right side bar"/>
             </Show>
-          </section>
-        </Show>
+            <aside class="sim-sidebar sim-dock" ref={rightBar} hidden={!dockShown('right')} style={{ 'flex-basis': `${sizes().right}px` }} aria-label={DOCK_LABEL.right}>
+              <DockPanels dock="right"/>
+            </aside>
 
+            <Show when={dragging()}>
+              {d => (<>
+                  <div class="sim-dropzones" aria-hidden="true">
+                    <For each={DOCKS}>
+                      {dock => {
+                const zone = () => {
+                    const z = dropZones()?.[dock], box = workbench?.getBoundingClientRect();
+                    return z && box ? { left: `${z.left - box.left}px`, top: `${z.top - box.top}px`, width: `${z.width}px`, height: `${z.height}px` } : {};
+                };
+                return (<div class={`sim-dropzone${d().drop?.dock === dock ? ' sim-dropzone-active' : ''}`} style={zone()}>
+                            <Icon name={DOCK_ICON[dock]} size={20}/>
+                            <span>{DOCK_LABEL[dock]}</span>
+                          </div>);
+            }}
+                    </For>
+                  </div>
+                  <div class="sim-drag-ghost" style={{ left: `${d().x}px`, top: `${d().y}px` }}>
+                    <Icon name="grip" size={14}/> {PANEL_TITLE[d().id]}
+                  </div>
+                </>)}
+            </Show>
+          </div>
+        </div>
       </div>
 
+      <Show when={shownView() === 'model' && description()}>
+        {d => (<div class="sim-model-page">
+            <ModelView description={d()} simulation={project()} onCopyLink={() => copy(`${shareLink(effectiveSettings(), currentPath())}#model`)}/>
+          </div>)}
+      </Show>
+
+      <footer class="sim-statusbar">
+        <span class="sim-status-item" title={updateNotice()?.outOfDate ? 'The sources do not compile' : 'Up to date'}>
+          <span class={`sim-status-dot${updateNotice()?.outOfDate || setupLog() ? ' sim-stale' : ''}`}/>
+          <span class="sim-status-mono">{project()}</span>
+        </span>
+        <span class="sim-status-item sim-status-mono sim-status-hide-sm">{settingsSummary(effectiveSettings())}</span>
+        <span class="sim-status-item sim-status-hide-sm">
+          <Icon name="branch"/> {childCount()} successor{childCount() === 1 ? '' : 's'}
+        </span>
+        <Show when={description()} fallback={<span class="sim-spacer"/>}>
+          {d => (<button class="sim-status-model" onClick={() => showView('model')} title="Show the model and the experiment as defined">
+              <Icon name="layers"/> <span>{d().summary.join(' · ')}</span>
+            </button>)}
+        </Show>
+        <span class="sim-status-keys">
+          <kbd>←</kbd><kbd>→</kbd> step · <kbd>Space</kbd> play · <kbd>?</kbd> help
+        </span>
+      </footer>
+
       <Show when={pickingBranch() && branches().length > 1}>
-        <BranchPicker branches={branches()} current={currentPath().at(-1)} draw={Projects[project()].drawConfig ? drawBranch : undefined} onPick={i => { setChoice(i); setPickingBranch(false); }} onClose={() => setPickingBranch(false)}/>
+        <BranchPicker branches={branches()} current={branchIndex()} draw={Projects[project()].drawConfig ? drawBranch : undefined} onPick={i => { setChoice(i); setPickingBranch(false); }} onClose={() => setPickingBranch(false)}/>
       </Show>
 
       <Show when={toast()}>
-        <div class="sim-toast" role="status">{toast()}</div>
+        <div class="sim-toast" role="status"><Icon name="check"/>{toast()}</div>
       </Show>
     </div>);
 };