From d603e352614b853cc0549d4d5b8650de34a898dc Mon Sep 17 00:00:00 2001
From: Chris Feijoo <chris@kube.io>
Date: Thu, 27 Aug 2026 04:08:24 +0200
Subject: [PATCH 01/17] FE-1517: Scenario creation authors through the ad-hoc
 form

---
 .changeset/adhoc-scenario-authoring.md        |   6 +
 .../petrinaut/docs/ad-hoc-scenarios.md        |  37 ++--
 libs/@hashintel/petrinaut/docs/scenarios.md   |   2 +
 .../petrinaut/docs/visual-settings.md         |   4 +
 .../src/react/experiments/provider.tsx        |   6 +-
 .../petrinaut/src/react/lsp/context.ts        |  10 +-
 .../src/react/simulation/provider.tsx         |   7 +
 .../src/react/simulation/use-scenario-hir.ts  |  36 +++-
 .../ad-hoc-scenario-form.tsx                  |   8 +-
 .../use-ad-hoc-lsp-session.ts                 |  10 +-
 .../ad-hoc-scenario-authoring.test.tsx        | 144 +++++++++++++++
 .../scenarios/ad-hoc-scenario-authoring.tsx   | 166 ++++++++++++++++++
 .../scenarios/create-scenario-drawer.tsx      |  81 +++++++++
 .../SimulateView/scenarios/scenario-form.tsx  |   2 +-
 .../SimulateView/scenarios/scenario-lsp.ts    |  14 +-
 .../scenarios/view-scenario-drawer.tsx        | 101 +++++++++++
 .../content/ui/ad-hoc-form.mdx                |   6 +-
 17 files changed, 608 insertions(+), 32 deletions(-)
 create mode 100644 .changeset/adhoc-scenario-authoring.md
 create mode 100644 libs/@hashintel/petrinaut/src/ui/views/Editor/panels/SimulateView/scenarios/ad-hoc-scenario-authoring.test.tsx
 create mode 100644 libs/@hashintel/petrinaut/src/ui/views/Editor/panels/SimulateView/scenarios/ad-hoc-scenario-authoring.tsx

diff --git a/.changeset/adhoc-scenario-authoring.md b/.changeset/adhoc-scenario-authoring.md
new file mode 100644
index 00000000000..878f7461861
--- /dev/null
+++ b/.changeset/adhoc-scenario-authoring.md
@@ -0,0 +1,6 @@
+---
+"@hashintel/petrinaut": patch
+"@hashintel/petrinaut-core": patch
+---
+
+Behind the new experimental "Ad-hoc scenarios" setting, the scenario creation form authors scenarios through the ad-hoc form: exposed Variables become the saved scenario's tunable parameters, and the definition persists as `initialState.type: "adhoc"`.
diff --git a/libs/@hashintel/petrinaut/docs/ad-hoc-scenarios.md b/libs/@hashintel/petrinaut/docs/ad-hoc-scenarios.md
index 404d507219c..0a82710ce4f 100644
--- a/libs/@hashintel/petrinaut/docs/ad-hoc-scenarios.md
+++ b/libs/@hashintel/petrinaut/docs/ad-hoc-scenarios.md
@@ -2,27 +2,32 @@
 
 An **ad-hoc scenario** is an initial state and a set of parameter values defined inline, right where you run -- without saving a [scenario](scenarios.md) first. Petrinaut compiles what you enter through a scenario generated for that run. Nothing is added to the net's scenario list, and leaving the form discards nothing: your entries stay until you clear them.
 
-Use an ad-hoc scenario for one-off runs and quick exploration. When you want to keep a configuration, name it, or compare several setups, [create a scenario](scenarios.md#creating-a-scenario).
+Use an ad-hoc scenario for one-off runs and quick exploration. When you want to keep a configuration, name it, or compare several setups, [create a scenario](scenarios.md#creating-a-scenario) -- with the feature enabled, the creation form is the same ad-hoc form, plus a **Scenario Parameter** toggle on each Variable.
+
+## Enabling the feature
+
+Ad-hoc scenarios are **experimental and off by default**. Turn them on in the viewport settings dialog (the gear button over the canvas): the **Ad-hoc scenarios** toggle under General. While the setting is off, every surface below renders exactly as before the feature -- "No scenario" simply means the model's own initial marking.
 
 ## Where the form appears
 
 The same form appears in three places, always when **no scenario is selected**:
 
-1. **Quick simulation** -- in the [Simulation Settings](simulation.md#simulation-settings) tab, with "No scenario" selected, the **Initial state** column edits token counts and values directly in the panel -- no separate dialog. A **Clear** button appears next to the column's title once you have entries. This embedding shows only the initial state: the panel's own parameter inputs set parameter values, and there are no Variables here. The next simulation run uses what you defined. Any [compile error](#errors) appears in the settings panel's error banner.
+1. **Quick simulation** -- in the [Simulation Settings](simulation.md#simulation-settings) tab, with "No scenario" selected, the **Parameters** and **Initial state** columns are the form's own tables: parameter overrides as a spreadsheet on the left, token counts and values in the middle -- no separate dialog. A **Clear** button appears next to the Initial state title once you have entries. There are no Variables in this embedding. The next simulation run uses what you defined. Any [compile error](#errors) appears in the settings panel's error banner.
 2. **Experiments** -- in the [create-experiment drawer](experiments.md#creating-an-experiment), choosing "No scenario" shows the form inside the Scenario section. The experiment's runs start from the state you defined, and the experiments table shows "Ad-hoc scenario" in its Scenario column.
-3. **Optimizations** -- in the [create-optimization drawer](optimization.md#creating-an-optimization), the scenario picker offers **Ad-hoc (define inline)**. This is the only surface where the form shows **Optimize** controls (see below).
+3. **Optimizations** -- in the [create-optimization drawer](optimization.md#creating-an-optimization), the scenario picker offers **No scenario** too. This is the only surface where the form shows **Optimize** controls (see below).
+4. **Scenario creation** -- [creating or editing a scenario](scenarios.md#creating-a-scenario) uses the same form with a **Scenario Parameter** toggle on each top-level Variable; see [Saved ad-hoc scenarios](#saved-ad-hoc-scenarios).
 
 ## The form
 
-The form has up to three sections:
+The form has up to three sections. Variables come first -- parameter overrides may read them:
 
-- **Parameters** -- one row per [net-level parameter](petri-net-extensions.md#global-parameters), showing its type and its value. An untouched parameter shows its default quietly, marked with a small `default` tag; enter an expression to override the value for this run. In the quick-simulation embedding this section is its own panel beside Initial state.
 - **Variables** -- named values (real, integer, or boolean) written as `scenario.<name>` in every expression below, exactly as scenario parameters are written in scenario code. Use them to drive many values from one number. Add one from the dimmed **Add a variable** line at the bottom of the list: like any cell, a first click selects it and a second click (or Enter, or its gutter's `+`) adds the variable -- or reach it with the down arrow from the last row; the fresh name opens ready to type. Each row starts with a small variable-glyph gutter whose menu offers **Delete variable**, and the add line's gutter shows a `+`. A variable's name edits like any other cell: select it, then press Enter (or click again) to edit, and Enter or Escape to leave. Its type select is a cell too: arrow keys move past it, Enter opens it. In the quick-simulation embedding, Variables sit above Parameters in the left column.
-- **Initial state** -- one block per place in the net.
+- **Parameters** -- one row per [net-level parameter](petri-net-extensions.md#global-parameters), showing its type and its value. An untouched parameter shows its default quietly, marked with a small `default` tag; enter an expression to override the value for this run -- it may read the Variables above. In the quick-simulation embedding this section is its own panel beside Initial state.
+- **Initial state** -- one block per place in the net. Each place's title carries its token colour dot (grey for untyped places).
 
 In the experiment and optimization drawers each section collapses: click the chevron in its header, or focus the header and press Left to collapse and Right to expand. Place headers inside Initial state collapse the same way everywhere, and a collapsed place shows a one-line summary of its rows and token total. In the quick-simulation embedding, places start collapsed.
 
-Every value in the form is an expression. A first click selects a value; a second click, a double-click, or Enter opens the editor in place: a code input with completion and type checking at exactly the cell's position, the value's path (for example `Space › item 0 › x`) above it, and -- in the optimization drawer -- the Optimize control below it. Expressions may use your Variables (`scenario.<name>`), net parameters (`parameters.<name>`), and arithmetic -- the same [expression language](scenarios.md) scenarios use. Press Enter, Escape, or click elsewhere to close the editor; closing tidies a valid expression's formatting (spacing, redundant parentheses) without changing its meaning. A value may also be left **empty**: an empty cell reads as its type's neutral value -- 0 for numbers, `false` for booleans, `""` for text, the nil UUID -- shown grayed in the cell, and it is never an error. An empty dynamic-row count means 1 token; an empty place count means 0.
+Every value in the form is an expression. A first click selects a value; a second click, a double-click, or Enter opens the editor in place: a code input with completion and type checking at exactly the cell's position, the value's path (for example `Space › item 0 › x`) above it, and -- in the optimization drawer -- the Optimize control below it. Expressions may use your Variables (`scenario.<name>`), net parameters (`parameters.<name>`), and arithmetic -- the same [expression language](scenarios.md) scenarios use. Press Enter, Escape, or click elsewhere to close the editor. Escape closes only the innermost thing that is open -- a completion list, a bound edit, the editor itself -- and never the drawer or dialog around the form; close those from their own buttons. Closing tidies a valid expression's formatting (spacing, redundant parentheses) without changing its meaning. A value may also be left **empty**: an empty cell reads as its type's neutral value -- 0 for numbers, `false` for booleans, `""` for text, the nil UUID -- shown grayed in the cell, and it is never an error. An empty dynamic-row count means 1 token; an empty place count means 0.
 
 Opening a value with Enter or a second click selects its whole content, so typing replaces it. Opening by typing keeps the caret right after what you typed.
 
@@ -40,7 +45,7 @@ Focusing a value highlights what it is connected to, in amber. A cell that reads
 
 ### Places without a token type
 
-A place without a token type is one line: the place's name and a single **token count** slot after a `×` mark.
+A place without a token type is its name above one full-width **token count** cell -- the same expression cell as everywhere else, in its own bordered box.
 
 ### Places with a token type
 
@@ -76,14 +81,20 @@ At least one Optimize selection is required to run; a cell muted by a shared col
 
 Each selection becomes a generated scenario parameter with a deterministic name, and optimization results attribute back to your selections by these names:
 
-- `adhoc.<place>.r<row>.<field>` -- a cell in a fixed or dynamic row.
-- `adhoc.<place>.col.<field>` -- a shared column value.
-- `adhoc.count.<place>` -- an untyped place's count; `adhoc.count.<place>.r<row>` for a dynamic row's count.
-- `adhoc.var.net.<name>` -- a top-level Variable; place-scoped variables use the place's name as the scope.
-- `adhoc.param.<variable_name>` -- a net parameter override.
+- `adhoc_<place>_r<row>_<field>` -- a cell in a fixed or dynamic row.
+- `adhoc_<place>_col_<field>` -- a shared column value.
+- `adhoc_count_<place>` -- an untyped place's count; `adhoc_count_<place>_r<row>` for a dynamic row's count.
+- `adhoc_var_net_<name>` -- a top-level Variable; place-scoped variables use the place's name as the scope.
+- `adhoc_param_<variable_name>` -- a net parameter override.
 
 Optimized values follow the same rules as [scenario parameter domains](optimization.md#search-domains): bounds must be expressions that resolve to finite constants, integer domains need integer bounds and a positive step, and logarithmic domains need a positive minimum. One optimized value cannot appear in another optimized value's bounds.
 
+## Saved ad-hoc scenarios
+
+With the feature enabled, [creating a scenario](scenarios.md#creating-a-scenario) opens the same form -- name and description above it -- as the one authoring surface (there is no "Define as code" toggle in this mode). Each top-level Variable's row carries a **Scenario Parameter** toggle: an exposed Variable becomes one of the saved scenario's tunable parameters, named after the Variable in snake_case (`baseLoad` becomes `base_load`), defaulting to its expression's value -- which must therefore be a constant. Everyone running the scenario can then adjust it wherever scenario parameters appear, without editing the scenario.
+
+Saving keeps your form entries as the scenario's definition, so editing the scenario reopens exactly the form you left. A scenario authored this way always edits through the ad-hoc form, whatever the setting says -- the classical form cannot represent it.
+
 ## Errors
 
 Ad-hoc definitions are validated as you type, on the value they belong to, and again when you run. In quick simulation, compile problems also appear in the Simulation Settings error banner; in the experiment and optimization drawers, in the footer.
diff --git a/libs/@hashintel/petrinaut/docs/scenarios.md b/libs/@hashintel/petrinaut/docs/scenarios.md
index 5cff7caed1f..7847c2e55f7 100644
--- a/libs/@hashintel/petrinaut/docs/scenarios.md
+++ b/libs/@hashintel/petrinaut/docs/scenarios.md
@@ -37,6 +37,8 @@ You will need scenarios when you want to:
 
 The view drawer (opened by clicking a row in the Scenarios list) is the same form populated with the existing values. It has **Close** and **Save** buttons.
 
+With the experimental [Ad-hoc scenarios](ad-hoc-scenarios.md#enabling-the-feature) setting on, the Create Scenario drawer instead shows the [ad-hoc form](ad-hoc-scenarios.md#saved-ad-hoc-scenarios): name and description above one inline Initial State + Parameters form, with a **Scenario Parameter** toggle on each Variable and no "Define as code" toggle. A scenario created that way always edits through the same form.
+
 ## Initial state: per-place vs code
 
 The Initial State section has a **Define as code** toggle.
diff --git a/libs/@hashintel/petrinaut/docs/visual-settings.md b/libs/@hashintel/petrinaut/docs/visual-settings.md
index cc3b1bebbd3..2eab8fd2383 100644
--- a/libs/@hashintel/petrinaut/docs/visual-settings.md
+++ b/libs/@hashintel/petrinaut/docs/visual-settings.md
@@ -44,6 +44,10 @@ Controls selection box behavior in [Select mode](drawing-a-net.md#pan-and-select
 
 Replaces the tabbed left sidebar with a unified **tree view** showing all entities (nodes, types, equations, parameters) in a single hierarchy.
 
+### Ad-hoc scenarios (experimental)
+
+Off by default. Enables the [ad-hoc scenario form](ad-hoc-scenarios.md): defining initial state and parameters inline in Simulation Settings, the experiment and optimization drawers, and the scenario creation form. Off, "No scenario" everywhere means the model's own initial marking, as before.
+
 ### Arcs rendering
 
 Choose how arcs are drawn between nodes:
diff --git a/libs/@hashintel/petrinaut/src/react/experiments/provider.tsx b/libs/@hashintel/petrinaut/src/react/experiments/provider.tsx
index ead89c92f72..f50fc327de7 100644
--- a/libs/@hashintel/petrinaut/src/react/experiments/provider.tsx
+++ b/libs/@hashintel/petrinaut/src/react/experiments/provider.tsx
@@ -363,7 +363,11 @@ export const ExperimentsProvider: React.FC<ExperimentsProviderProps> = ({
         throw new Error(parsedScenarioValues.errors.join("\n"));
       }
 
-      const scenarioHir = await requestScenarioHir(selectedScenario);
+      const scenarioHir = await requestScenarioHir(selectedScenario, {
+        netParameters: globalParameters,
+        places: sdcpn.places,
+        types: sdcpn.types,
+      });
       const compiledScenario = compileScenario(
         selectedScenario,
         scenarioHir,
diff --git a/libs/@hashintel/petrinaut/src/react/lsp/context.ts b/libs/@hashintel/petrinaut/src/react/lsp/context.ts
index 7f9c1283633..57ac591ea5a 100644
--- a/libs/@hashintel/petrinaut/src/react/lsp/context.ts
+++ b/libs/@hashintel/petrinaut/src/react/lsp/context.ts
@@ -1,6 +1,7 @@
 import { createContext } from "react";
 
 import type {
+  AdHocSynthesisContext,
   CompletionList,
   Diagnostic,
   DocumentUri,
@@ -56,9 +57,14 @@ export interface LanguageClientContextValue {
   /**
    * Lower a scenario's expressions and code-mode body to HIR (in the
    * language worker). `compileScenario` type-checks and interprets the
-   * result.
+   * result. A scenario whose initial state is `adhoc` synthesizes against
+   * `adHocContext` first — without it, lowering that scenario reports an
+   * error item.
    */
-  requestScenarioHir: (scenario: ScenarioLoweringInput) => Promise<ScenarioHir>;
+  requestScenarioHir: (
+    scenario: ScenarioLoweringInput,
+    adHocContext?: AdHocSynthesisContext,
+  ) => Promise<ScenarioHir>;
   /**
    * Re-print a single scenario-expression canonically (normalized spacing,
    * minimal parentheses, numeric literals preserved). Resolves null when the
diff --git a/libs/@hashintel/petrinaut/src/react/simulation/provider.tsx b/libs/@hashintel/petrinaut/src/react/simulation/provider.tsx
index 67fc72b6f54..611e02ab8b7 100644
--- a/libs/@hashintel/petrinaut/src/react/simulation/provider.tsx
+++ b/libs/@hashintel/petrinaut/src/react/simulation/provider.tsx
@@ -710,6 +710,13 @@ export const SimulationProvider: React.FC<SimulationProviderProps> = ({
   const scenarioHirState = useScenarioHir(
     selectedScenario ??
       (adHocSynthesized?.ok ? adHocSynthesized.scenario : undefined),
+    // A persisted ad-hoc scenario synthesizes in the worker against the
+    // net context; the quick-sim definition was synthesized above already.
+    {
+      netParameters: extensions.parameters ? petriNetDefinition.parameters : [],
+      places: petriNetDefinition.places,
+      types: petriNetDefinition.types,
+    },
   );
 
   // Build a scenario with user-tweaked parameter values.
diff --git a/libs/@hashintel/petrinaut/src/react/simulation/use-scenario-hir.ts b/libs/@hashintel/petrinaut/src/react/simulation/use-scenario-hir.ts
index 99a084c2c14..f1a48c9a0c0 100644
--- a/libs/@hashintel/petrinaut/src/react/simulation/use-scenario-hir.ts
+++ b/libs/@hashintel/petrinaut/src/react/simulation/use-scenario-hir.ts
@@ -3,6 +3,7 @@ import { use, useEffect, useState } from "react";
 import { LanguageClientContext } from "../lsp/context";
 
 import type {
+  AdHocSynthesisContext,
   Scenario,
   ScenarioHir,
   ScenarioLoweringInput,
@@ -17,9 +18,19 @@ export type ScenarioHirState = {
 
 /** Serializes the parts of a scenario that lowering depends on: its code,
  * not its parameter defaults or coloured-place token rows — tweaking a value
- * or editing a row must not re-lower. The key doubles as the request payload
- * (parsed back in the effect), so the effect depends on nothing else. */
-const loweringKey = (scenario: Scenario): string => {
+ * or editing a row must not re-lower. An ad-hoc scenario also depends on the
+ * net context it synthesizes against, so that joins the key. The key doubles
+ * as the request payload (parsed back in the effect), so the effect depends
+ * on nothing else. */
+type LoweringPayload = {
+  scenario: ScenarioLoweringInput;
+  adHocContext?: AdHocSynthesisContext;
+};
+
+const loweringKey = (
+  scenario: Scenario,
+  adHocContext: AdHocSynthesisContext | undefined,
+): string => {
   const initialState =
     scenario.initialState.type === "per_place"
       ? {
@@ -34,9 +45,14 @@ const loweringKey = (scenario: Scenario): string => {
         }
       : scenario.initialState;
   return JSON.stringify({
-    parameterOverrides: scenario.parameterOverrides,
-    initialState,
-  } satisfies ScenarioLoweringInput);
+    scenario: {
+      parameterOverrides: scenario.parameterOverrides,
+      initialState,
+    },
+    ...(scenario.initialState.type === "adhoc" && adHocContext
+      ? { adHocContext }
+      : {}),
+  } satisfies LoweringPayload);
 };
 
 const PENDING: ScenarioHirState = { hir: null, error: null };
@@ -51,9 +67,11 @@ const PENDING: ScenarioHirState = { hir: null, error: null };
  */
 export function useScenarioHir(
   scenario: Scenario | undefined,
+  /** The net context an `adhoc` initial state synthesizes against. */
+  adHocContext?: AdHocSynthesisContext,
 ): ScenarioHirState {
   const { requestScenarioHir } = use(LanguageClientContext);
-  const key = scenario ? loweringKey(scenario) : null;
+  const key = scenario ? loweringKey(scenario, adHocContext) : null;
 
   const [entry, setEntry] = useState<{
     key: string;
@@ -65,8 +83,8 @@ export function useScenarioHir(
       return;
     }
     let cancelled = false;
-    const input = JSON.parse(key) as ScenarioLoweringInput;
-    requestScenarioHir(input)
+    const payload = JSON.parse(key) as LoweringPayload;
+    requestScenarioHir(payload.scenario, payload.adHocContext)
       .then((hir) => {
         if (!cancelled) {
           setEntry({ key, state: { hir, error: null } });
diff --git a/libs/@hashintel/petrinaut/src/ui/components/ad-hoc-scenario-form/ad-hoc-scenario-form.tsx b/libs/@hashintel/petrinaut/src/ui/components/ad-hoc-scenario-form/ad-hoc-scenario-form.tsx
index 9a84c5e8676..320ad42bbfa 100644
--- a/libs/@hashintel/petrinaut/src/ui/components/ad-hoc-scenario-form/ad-hoc-scenario-form.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/components/ad-hoc-scenario-form/ad-hoc-scenario-form.tsx
@@ -107,6 +107,11 @@ export interface AdHocScenarioFormProps {
   }) => React.ReactNode;
   /** Classname for the form's root element (the keyboard-handling div). */
   className?: string;
+  /**
+   * Externally-owned LSP session id, so the host can address this form's
+   * diagnostics (a drawer footer summing errors); generated when omitted.
+   */
+  sessionId?: string;
 }
 
 /**
@@ -158,8 +163,9 @@ export const AdHocScenarioForm: React.FC<AdHocScenarioFormProps> = ({
   withVariables = true,
   renderLayout,
   className,
+  sessionId: externalSessionId,
 }) => {
-  const sessionId = useAdHocLspSession(state);
+  const sessionId = useAdHocLspSession(state, externalSessionId);
   const { diagnosticsByUri, requestFormatExpression } = use(
     LanguageClientContext,
   );
diff --git a/libs/@hashintel/petrinaut/src/ui/components/ad-hoc-scenario-form/use-ad-hoc-lsp-session.ts b/libs/@hashintel/petrinaut/src/ui/components/ad-hoc-scenario-form/use-ad-hoc-lsp-session.ts
index 9ab281032b6..a9fcb59f29b 100644
--- a/libs/@hashintel/petrinaut/src/ui/components/ad-hoc-scenario-form/use-ad-hoc-lsp-session.ts
+++ b/libs/@hashintel/petrinaut/src/ui/components/ad-hoc-scenario-form/use-ad-hoc-lsp-session.ts
@@ -11,12 +11,18 @@ import type { AdHocScenarioState } from "@hashintel/petrinaut-core";
  * `diagnosticsByUri`. With the default (no-op) language client this is
  * harmless: no documents exist and no diagnostics ever arrive.
  */
-export function useAdHocLspSession(state: AdHocScenarioState): string {
+export function useAdHocLspSession(
+  state: AdHocScenarioState,
+  /** Externally-owned session id, so a host (a drawer footer) can address
+   * this session's diagnostics; generated per mount when omitted. */
+  externalSessionId?: string,
+): string {
   const { initializeAdHocSession, updateAdHocSession, killAdHocSession } = use(
     LanguageClientContext,
   );
   // useState (not useRef/useMemo) — needed for a stable per-mount value.
-  const [sessionId] = useState(() => crypto.randomUUID());
+  const [generatedSessionId] = useState(() => crypto.randomUUID());
+  const sessionId = externalSessionId ?? generatedSessionId;
   const initializedRef = useRef(false);
 
   useEffect(() => {
diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/SimulateView/scenarios/ad-hoc-scenario-authoring.test.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/SimulateView/scenarios/ad-hoc-scenario-authoring.test.tsx
new file mode 100644
index 00000000000..7ee770907c5
--- /dev/null
+++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/SimulateView/scenarios/ad-hoc-scenario-authoring.test.tsx
@@ -0,0 +1,144 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { render } from "@testing-library/react";
+import { act } from "react";
+import { describe, expect, it } from "vitest";
+
+import {
+  DEFAULT_PETRINAUT_EXTENSIONS,
+  scenarioSchema,
+} from "@hashintel/petrinaut-core";
+
+import { SDCPNContext } from "../../../../../../react/state/sdcpn-context";
+import { useAdHocScenarioAuthoring } from "./ad-hoc-scenario-authoring";
+
+import type { SDCPNContextValue } from "../../../../../../react/state/sdcpn-context";
+import type { AdHocScenarioState, SDCPN } from "@hashintel/petrinaut-core";
+
+const sdcpn: SDCPN = {
+  places: [
+    {
+      id: "place-queue",
+      name: "Queue",
+      colorId: null,
+      dynamicsEnabled: false,
+      differentialEquationId: null,
+      x: 0,
+      y: 0,
+    },
+  ],
+  transitions: [],
+  types: [],
+  parameters: [
+    {
+      id: "param-rate",
+      name: "Rate",
+      variableName: "rate",
+      type: "real",
+      defaultValue: "1.5",
+    },
+  ],
+  differentialEquations: [],
+};
+
+const sdcpnContextValue: SDCPNContextValue = {
+  createNewNet: () => {},
+  existingNets: [],
+  loadPetriNet: () => {},
+  petriNetId: "test-net",
+  petriNetDefinition: sdcpn,
+  readonly: false,
+  extensions: DEFAULT_PETRINAUT_EXTENSIONS,
+  setTitle: () => {},
+  title: "Test",
+  getItemType: () => null,
+};
+
+const draftState: AdHocScenarioState = {
+  variables: [
+    {
+      name: "baseLoad",
+      type: "integer",
+      expression: "6",
+      optimize: null,
+      exposed: true,
+    },
+  ],
+  netParameters: [
+    {
+      parameterId: "param-rate",
+      expression: "scenario.baseLoad / 2",
+      optimize: null,
+    },
+  ],
+  places: {
+    "place-queue": {
+      kind: "uncoloured",
+      count: { expression: "scenario.baseLoad", optimize: null },
+    },
+  },
+};
+
+const Harness = ({
+  existingNames,
+  onValue,
+}: {
+  existingNames: ReadonlySet<string>;
+  onValue: (value: ReturnType<typeof useAdHocScenarioAuthoring>) => void;
+}) => {
+  onValue(useAdHocScenarioAuthoring({ existingScenarioNames: existingNames }));
+  return null;
+};
+
+function renderAuthoring(existingNames: ReadonlySet<string> = new Set()) {
+  const holder: {
+    current: ReturnType<typeof useAdHocScenarioAuthoring> | null;
+  } = { current: null };
+  const capture = (value: ReturnType<typeof useAdHocScenarioAuthoring>) => {
+    holder.current = value;
+  };
+  render(
+    <SDCPNContext value={sdcpnContextValue}>
+      <Harness existingNames={existingNames} onValue={capture} />
+    </SDCPNContext>,
+  );
+  return holder as { current: ReturnType<typeof useAdHocScenarioAuthoring> };
+}
+
+describe("useAdHocScenarioAuthoring", () => {
+  it("derives parameters and overrides, and persists the ad-hoc state", () => {
+    const authoring = renderAuthoring();
+    act(() => {
+      authoring.current.setName("Morning rush");
+      authoring.current.setState(draftState);
+    });
+
+    expect(authoring.current.canSave).toBe(true);
+    const scenario = authoring.current.buildScenario("scenario-1");
+    expect(scenario).not.toBeNull();
+    // The exposed Variable became the scenario's one tunable parameter.
+    expect(scenario!.scenarioParameters).toEqual([
+      { type: "integer", identifier: "base_load", default: 6 },
+    ]);
+    // The override survived, rewritten to read the exposed parameter.
+    expect(scenario!.parameterOverrides["param-rate"]).toContain("base_load");
+    expect(scenario!.initialState).toEqual({
+      type: "adhoc",
+      content: draftState,
+    });
+    // The persisted shape passes the schema the save paths validate with.
+    expect(scenarioSchema.safeParse(scenario).success).toBe(true);
+  });
+
+  it("blocks saving on a duplicate name or broken state", () => {
+    const authoring = renderAuthoring(new Set(["Morning rush"]));
+    act(() => {
+      authoring.current.setName("Morning rush");
+      authoring.current.setState(draftState);
+    });
+    expect(authoring.current.canSave).toBe(false);
+    expect(authoring.current.firstError).toContain("already exists");
+    expect(authoring.current.buildScenario("scenario-1")).toBeNull();
+  });
+});
diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/SimulateView/scenarios/ad-hoc-scenario-authoring.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/SimulateView/scenarios/ad-hoc-scenario-authoring.tsx
new file mode 100644
index 00000000000..ab48585ab89
--- /dev/null
+++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/SimulateView/scenarios/ad-hoc-scenario-authoring.tsx
@@ -0,0 +1,166 @@
+/**
+ * The ad-hoc authoring surface of the scenario drawers (behind the Ad-hoc
+ * scenarios setting): name + description above the ad-hoc Initial State +
+ * Parameters form in expose mode — each top-level Variable offers a
+ * "Scenario Parameter" toggle, and the exposed Variables become the saved
+ * scenario's tunable parameters. One mode only: no "Define as code" here.
+ *
+ * Saving persists the form state itself (`initialState.type: "adhoc"`) and
+ * derives `scenarioParameters` and `parameterOverrides` from it through
+ * `synthesizeAdHocScenario` — those stay the compiler's inputs, so every
+ * other consumer of the saved scenario works unchanged.
+ */
+
+import { use, useState } from "react";
+
+import { Drawer, Form, TextArea, TextInput } from "@hashintel/ds-components";
+import { css } from "@hashintel/ds-helpers/css";
+import {
+  EMPTY_AD_HOC_STATE,
+  synthesizeAdHocScenario,
+} from "@hashintel/petrinaut-core";
+
+import { LanguageClientContext } from "../../../../../../react/lsp/context";
+import { SDCPNContext } from "../../../../../../react/state/sdcpn-context";
+import { AdHocScenarioForm } from "../../../../../components/ad-hoc-scenario-form/ad-hoc-scenario-form";
+import { validateScenarioName } from "./scenario-form";
+import { summarizeScenarioLspErrors } from "./scenario-lsp";
+
+import type { AdHocScenarioState, Scenario } from "@hashintel/petrinaut-core";
+
+const fieldsStyle = css({
+  display: "flex",
+  flexDirection: "column",
+  gap: "4",
+  marginBottom: "5",
+});
+
+export interface AdHocScenarioDraft {
+  name: string;
+  description: string;
+  state: AdHocScenarioState;
+}
+
+export interface UseAdHocScenarioAuthoringOptions {
+  initial?: Partial<AdHocScenarioDraft>;
+  /** Names of other scenarios; the draft's name must not match any. */
+  existingScenarioNames: ReadonlySet<string>;
+}
+
+/**
+ * The draft state plus everything the footer needs: the error summary
+ * (name validation, synthesis errors, this form's LSP diagnostics) and
+ * `buildScenario`, which derives the persisted shape from the draft.
+ */
+export function useAdHocScenarioAuthoring({
+  initial,
+  existingScenarioNames,
+}: UseAdHocScenarioAuthoringOptions) {
+  const { extensions, petriNetDefinition } = use(SDCPNContext);
+  const { diagnosticsByUri } = use(LanguageClientContext);
+
+  const [name, setName] = useState(initial?.name ?? "");
+  const [description, setDescription] = useState(initial?.description ?? "");
+  const [state, setState] = useState<AdHocScenarioState>(
+    initial?.state ?? EMPTY_AD_HOC_STATE,
+  );
+  // Owned here (not generated inside the form) so the footer can address
+  // exactly this form's diagnostics.
+  const [sessionId] = useState(() => crypto.randomUUID());
+
+  const context = {
+    netParameters: extensions.parameters ? petriNetDefinition.parameters : [],
+    places: petriNetDefinition.places,
+    types: extensions.colors ? petriNetDefinition.types : [],
+  };
+
+  const nameError = validateScenarioName(name, existingScenarioNames);
+  const synthesized = synthesizeAdHocScenario(state, context);
+  const synthesisErrors = synthesized.ok ? [] : synthesized.errors;
+  const { count: lspErrorCount, firstMessage: firstLspMessage } =
+    summarizeScenarioLspErrors(diagnosticsByUri, {
+      adHocSessionId: sessionId,
+    });
+
+  const errorCount =
+    (nameError ? 1 : 0) + synthesisErrors.length + lspErrorCount;
+  const firstError =
+    nameError ?? synthesisErrors[0]?.message ?? firstLspMessage;
+
+  const buildScenario = (id: string): Scenario | null => {
+    if (!synthesized.ok || nameError) {
+      return null;
+    }
+    return {
+      id,
+      name: name.trim(),
+      description: description.trim() === "" ? undefined : description.trim(),
+      // Derived from the form state; the state itself stays the authoring
+      // source of truth and round-trips through the edit drawer.
+      scenarioParameters: synthesized.scenario.scenarioParameters,
+      parameterOverrides: synthesized.scenario.parameterOverrides,
+      initialState: { type: "adhoc", content: state },
+    };
+  };
+
+  return {
+    name,
+    setName,
+    description,
+    setDescription,
+    state,
+    setState,
+    sessionId,
+    context,
+    nameError,
+    errorCount,
+    firstError,
+    canSave: errorCount === 0,
+    buildScenario,
+  };
+}
+
+export type AdHocScenarioAuthoring = ReturnType<
+  typeof useAdHocScenarioAuthoring
+>;
+
+/** The drawer body: name, description, and the expose-mode ad-hoc form. */
+export const AdHocScenarioAuthoringBody: React.FC<{
+  authoring: AdHocScenarioAuthoring;
+}> = ({ authoring }) => (
+  <Drawer.Body className={css({ paddingTop: "[0]" })}>
+    <div className={fieldsStyle}>
+      <Form.Field
+        label="Scenario name"
+        size="sm"
+        errors={
+          authoring.nameError && authoring.name !== ""
+            ? [authoring.nameError]
+            : undefined
+        }
+      >
+        <TextInput
+          size="sm"
+          value={authoring.name}
+          onChange={authoring.setName}
+          invalid={authoring.nameError !== undefined && authoring.name !== ""}
+        />
+      </Form.Field>
+      <Form.Field label="Description" size="sm">
+        <TextArea
+          className={css({ minHeight: "[80px]" })}
+          size="sm"
+          value={authoring.description}
+          onChange={authoring.setDescription}
+        />
+      </Form.Field>
+    </div>
+    <AdHocScenarioForm
+      state={authoring.state}
+      onChange={authoring.setState}
+      context={authoring.context}
+      selection="expose"
+      sessionId={authoring.sessionId}
+    />
+  </Drawer.Body>
+);
diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/SimulateView/scenarios/create-scenario-drawer.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/SimulateView/scenarios/create-scenario-drawer.tsx
index 5849ff2b6b4..bdd2577ff55 100644
--- a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/SimulateView/scenarios/create-scenario-drawer.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/SimulateView/scenarios/create-scenario-drawer.tsx
@@ -8,7 +8,12 @@ import { scenarioSchema, type Color } from "@hashintel/petrinaut-core";
 import { usePetrinautMutations } from "../../../../../../react";
 import { LanguageClientContext } from "../../../../../../react/lsp/context";
 import { SDCPNContext } from "../../../../../../react/state/sdcpn-context";
+import { UserSettingsContext } from "../../../../../../react/state/user-settings-context";
 import { DrawerErrorDisplay } from "../drawer-error-display";
+import {
+  AdHocScenarioAuthoringBody,
+  useAdHocScenarioAuthoring,
+} from "./ad-hoc-scenario-authoring";
 import {
   ScenarioFormBody,
   type ScenarioFormInstance,
@@ -113,6 +118,72 @@ const CreateScenarioBody = ({ form }: { form: ScenarioFormInstance }) => {
   );
 };
 
+// -- Ad-hoc creation (behind the Ad-hoc scenarios setting) --------------------
+
+/**
+ * The ad-hoc creation drawer: the expose-mode ad-hoc form is the one
+ * authoring surface — no "Define as code" toggle in this mode.
+ */
+const CreateAdHocScenarioContent = ({
+  existingScenarioNames,
+  onClose,
+}: {
+  existingScenarioNames: ReadonlySet<string>;
+  onClose: () => void;
+}) => {
+  const { addScenario } = usePetrinautMutations();
+  const authoring = useAdHocScenarioAuthoring({ existingScenarioNames });
+
+  const save = () => {
+    const scenario = authoring.buildScenario(crypto.randomUUID());
+    if (!scenario) {
+      return;
+    }
+    // Final structural validation against the persistence schema.
+    const result = scenarioSchema.safeParse(scenario);
+    if (!result.success) {
+      return;
+    }
+    addScenario(result.data);
+    onClose();
+  };
+
+  return (
+    <Drawer showBackdrop={false} onClose={onClose} swapKey="scenario">
+      <Drawer.Header
+        title="Create a scenario"
+        description="Initial configurations of tokens that can be quickly loaded in to 'Model' or 'Simulate' mode"
+      />
+      <AdHocScenarioAuthoringBody authoring={authoring} />
+      <Drawer.Footer
+        secondaryActions={
+          <DrawerErrorDisplay
+            count={authoring.errorCount}
+            firstMessage={authoring.firstError}
+          />
+        }
+        actions={
+          <>
+            <Button variant="subtle" tone="neutral" size="sm" onClick={onClose}>
+              Cancel
+            </Button>
+            <Button
+              variant="solid"
+              tone="neutral"
+              size="sm"
+              disabled={!authoring.canSave}
+              tooltip={authoring.firstError}
+              onClick={save}
+            >
+              Create
+            </Button>
+          </>
+        }
+      />
+    </Drawer>
+  );
+};
+
 // -- Drawer wrapper -----------------------------------------------------------
 
 interface CreateScenarioDrawerProps {
@@ -126,6 +197,7 @@ export const CreateScenarioDrawer = ({
 }: CreateScenarioDrawerProps) => {
   const { petriNetDefinition } = use(SDCPNContext);
   const { addScenario } = usePetrinautMutations();
+  const { enableAdHocScenarios } = use(UserSettingsContext);
 
   const existingScenarioNames = new Set(
     (petriNetDefinition.scenarios ?? []).map((s) => s.name),
@@ -163,6 +235,15 @@ export const CreateScenarioDrawer = ({
     return null;
   }
 
+  if (enableAdHocScenarios) {
+    return (
+      <CreateAdHocScenarioContent
+        existingScenarioNames={existingScenarioNames}
+        onClose={onClose}
+      />
+    );
+  }
+
   return (
     <Drawer showBackdrop={false} onClose={onClose} swapKey="scenario">
       <Drawer.Header
diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/SimulateView/scenarios/scenario-form.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/SimulateView/scenarios/scenario-form.tsx
index 8aba8578a89..6ff569c9ca7 100644
--- a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/SimulateView/scenarios/scenario-form.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/SimulateView/scenarios/scenario-form.tsx
@@ -331,7 +331,7 @@ function validateScenarioParams(
  * Validate the scenario name: must be non-empty and unique among existing
  * scenarios (excluding the one being edited, when `editingScenarioId` is set).
  */
-function validateScenarioName(
+export function validateScenarioName(
   name: string,
   existingNames: ReadonlySet<string>,
 ): string | undefined {
diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/SimulateView/scenarios/scenario-lsp.ts b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/SimulateView/scenarios/scenario-lsp.ts
index 98f24f59410..ec3cc9143ae 100644
--- a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/SimulateView/scenarios/scenario-lsp.ts
+++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/SimulateView/scenarios/scenario-lsp.ts
@@ -2,15 +2,25 @@ const SCENARIO_TEMP_URI_PREFIX = "inmemory://sdcpn/_temp/scenarios/";
 
 /**
  * Returns the total number of LSP diagnostics across scenario expressions and
- * the first error message (if any) for compact display.
+ * the first error message (if any) for compact display. With
+ * `adHocSessionId`, that one ad-hoc form session's documents count too —
+ * scoped by id, so another mounted ad-hoc form (the Simulation Settings
+ * panel) never leaks its errors into this drawer's footer.
  */
 export function summarizeScenarioLspErrors(
   diagnosticsByUri: ReadonlyMap<string, ReadonlyArray<{ message: string }>>,
+  options: { adHocSessionId?: string } = {},
 ): { count: number; firstMessage: string | undefined } {
+  const adHocPrefix = options.adHocSessionId
+    ? `inmemory://sdcpn/_temp/adhoc/${options.adHocSessionId}/`
+    : null;
   let count = 0;
   let firstMessage: string | undefined;
   for (const [uri, diagnostics] of diagnosticsByUri) {
-    if (!uri.startsWith(SCENARIO_TEMP_URI_PREFIX)) {
+    if (
+      !uri.startsWith(SCENARIO_TEMP_URI_PREFIX) &&
+      !(adHocPrefix !== null && uri.startsWith(adHocPrefix))
+    ) {
       continue;
     }
     count += diagnostics.length;
diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/SimulateView/scenarios/view-scenario-drawer.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/SimulateView/scenarios/view-scenario-drawer.tsx
index 8654466ff60..213c093aadd 100644
--- a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/SimulateView/scenarios/view-scenario-drawer.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/SimulateView/scenarios/view-scenario-drawer.tsx
@@ -13,6 +13,10 @@ import { usePetrinautMutations } from "../../../../../../react";
 import { LanguageClientContext } from "../../../../../../react/lsp/context";
 import { SDCPNContext } from "../../../../../../react/state/sdcpn-context";
 import { DrawerErrorDisplay } from "../drawer-error-display";
+import {
+  AdHocScenarioAuthoringBody,
+  useAdHocScenarioAuthoring,
+} from "./ad-hoc-scenario-authoring";
 import {
   ScenarioFormBody,
   type ScenarioFormInstance,
@@ -125,6 +129,93 @@ const ViewScenarioFooter = ({
   );
 };
 
+// -- Ad-hoc scenarios (initialState.type "adhoc") ------------------------------
+
+/**
+ * Editing a scenario the ad-hoc form authored: the same expose-mode form,
+ * seeded from the persisted state; saving re-derives the scenario's
+ * parameters and overrides. Rendered whatever the Ad-hoc scenarios setting
+ * says — the classical form cannot represent this scenario, and falling
+ * back to it would silently rewrite the initial state as per-place.
+ */
+const ViewAdHocScenarioContent = ({
+  scenario,
+  onClose,
+}: {
+  scenario: Scenario & { initialState: { type: "adhoc" } };
+  onClose: () => void;
+}) => {
+  const { petriNetDefinition } = use(SDCPNContext);
+  const { updateScenario } = usePetrinautMutations();
+  const existingScenarioNames = new Set(
+    (petriNetDefinition.scenarios ?? [])
+      .filter((candidate) => candidate.id !== scenario.id)
+      .map((candidate) => candidate.name),
+  );
+  const authoring = useAdHocScenarioAuthoring({
+    initial: {
+      name: scenario.name,
+      description: scenario.description ?? "",
+      state: scenario.initialState.content,
+    },
+    existingScenarioNames,
+  });
+
+  const save = () => {
+    const updated = authoring.buildScenario(scenario.id);
+    if (!updated) {
+      return;
+    }
+    const result = scenarioSchema.safeParse(updated);
+    if (!result.success) {
+      return;
+    }
+    updateScenario({
+      scenarioId: scenario.id,
+      update: {
+        name: result.data.name,
+        description: result.data.description,
+        scenarioParameters: result.data.scenarioParameters,
+        parameterOverrides: result.data.parameterOverrides,
+        initialState: result.data.initialState,
+      },
+    });
+    onClose();
+  };
+
+  return (
+    <Drawer showBackdrop={false} onClose={onClose} swapKey="scenario">
+      <Drawer.Header title={scenario.name} />
+      <AdHocScenarioAuthoringBody authoring={authoring} />
+      <Drawer.Footer
+        secondaryActions={
+          <DrawerErrorDisplay
+            count={authoring.errorCount}
+            firstMessage={authoring.firstError}
+          />
+        }
+        actions={
+          <>
+            <Button variant="subtle" tone="neutral" size="sm" onClick={onClose}>
+              Close
+            </Button>
+            <Button
+              variant="solid"
+              tone="neutral"
+              size="sm"
+              disabled={!authoring.canSave}
+              tooltip={authoring.firstError}
+              onClick={save}
+            >
+              Save
+            </Button>
+          </>
+        }
+      />
+    </Drawer>
+  );
+};
+
 // -- Inner content (remounts when scenario changes via `key`) -----------------
 
 const ViewScenarioContent = ({
@@ -221,6 +312,16 @@ export const ViewScenarioDrawer = ({
     return null;
   }
 
+  if (scenario.initialState.type === "adhoc") {
+    return (
+      <ViewAdHocScenarioContent
+        key={scenario.id}
+        scenario={scenario as Scenario & { initialState: { type: "adhoc" } }}
+        onClose={onClose}
+      />
+    );
+  }
+
   return (
     <ViewScenarioContent
       key={scenario.id}
diff --git a/libs/@local/petrinaut-arch-docs/content/ui/ad-hoc-form.mdx b/libs/@local/petrinaut-arch-docs/content/ui/ad-hoc-form.mdx
index 2dbde1e5f11..433f9dc4c22 100644
--- a/libs/@local/petrinaut-arch-docs/content/ui/ad-hoc-form.mdx
+++ b/libs/@local/petrinaut-arch-docs/content/ui/ad-hoc-form.mdx
@@ -20,7 +20,11 @@ third mode, `"expose"`, is the scenario creation form's: it offers no value
 toggles at all, and instead each top-level Variable row grows a "Scenario
 Parameter" toggle (`AdHocVariable.exposed`) — the saved scenario exposes
 those Variables as its tunable parameters. Optimize selections write the
-`optimize` settings object; expose writes the boolean `exposed` flag.
+`optimize` settings object; expose writes the boolean `exposed` flag. In
+that consumer alone the definition persists — `initialState.type: "adhoc"`
+on the saved scenario, with `scenarioParameters` and `parameterOverrides`
+derived from it on save (`useAdHocScenarioAuthoring`); everywhere else the
+generated scenario stays ephemeral.
 
 The design is the scenario **code editor's model, constrained**: everything
 the form can express synthesizes to code-mode scenario source that the

From 835810f1fff1028e93b0478ed1b34916f3aeb96e Mon Sep 17 00:00:00 2001
From: Chris Feijoo <chris@kube.io>
Date: Thu, 27 Aug 2026 04:33:43 +0200
Subject: [PATCH 02/17] FE-1517: Runs compile the ad-hoc definition with the
 net context

---
 .../src/react/simulation/provider.tsx         | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/libs/@hashintel/petrinaut/src/react/simulation/provider.tsx b/libs/@hashintel/petrinaut/src/react/simulation/provider.tsx
index 611e02ab8b7..072a217c415 100644
--- a/libs/@hashintel/petrinaut/src/react/simulation/provider.tsx
+++ b/libs/@hashintel/petrinaut/src/react/simulation/provider.tsx
@@ -477,10 +477,21 @@ export const SimulationProvider: React.FC<SimulationProviderProps> = ({
       let initialMarking = manualInitialMarking;
       let parameterValues: Record<string, string> = manualParameterValues;
       if (scenarioToCompile) {
-        const scenarioHir = await requestScenarioHir({
-          parameterOverrides: scenarioToCompile.parameterOverrides,
-          initialState: scenarioToCompile.initialState,
-        });
+        const scenarioHir = await requestScenarioHir(
+          {
+            parameterOverrides: scenarioToCompile.parameterOverrides,
+            initialState: scenarioToCompile.initialState,
+          },
+          // A persisted ad-hoc scenario synthesizes against the net inside
+          // the worker; other kinds ignore the context.
+          {
+            netParameters: simulationExtensions.parameters
+              ? sdcpn.parameters
+              : [],
+            places: sdcpn.places,
+            types: sdcpn.types,
+          },
+        );
         if (initializationGenerationRef.current !== generation) {
           return;
         }

From bf77da4adf9aac9996de452362d066de58fb2e89 Mon Sep 17 00:00:00 2001
From: Chris Feijoo <chris@kube.io>
Date: Thu, 27 Aug 2026 04:48:45 +0200
Subject: [PATCH 03/17] =?UTF-8?q?FE-1517:=20Review=20fixes=20=E2=80=94=20r?=
 =?UTF-8?q?un=20parameters=20snapshot,=20key=20projection,=20save=20errors?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/react/experiments/provider.test.tsx   |  4 +-
 .../src/react/simulation/provider.tsx         | 75 ++++++-------------
 .../src/react/simulation/use-scenario-hir.ts  | 29 ++++++-
 .../scenarios/create-scenario-drawer.tsx      | 12 ++-
 .../scenarios/view-scenario-drawer.tsx        | 12 ++-
 5 files changed, 71 insertions(+), 61 deletions(-)

diff --git a/libs/@hashintel/petrinaut/src/react/experiments/provider.test.tsx b/libs/@hashintel/petrinaut/src/react/experiments/provider.test.tsx
index ed0ef39eb8b..a7b65e2546c 100644
--- a/libs/@hashintel/petrinaut/src/react/experiments/provider.test.tsx
+++ b/libs/@hashintel/petrinaut/src/react/experiments/provider.test.tsx
@@ -181,8 +181,8 @@ const LanguageClientOverride = ({
             Promise.resolve(compileHirArtifacts(sdcpn, extensions))),
         // Lower for real (inline instead of in a worker), so scenarios the
         // provider synthesizes — the ad-hoc path — actually compile.
-        requestScenarioHir: (scenario) =>
-          Promise.resolve(lowerScenarioToHir(scenario)),
+        requestScenarioHir: (scenario, adHocContext) =>
+          Promise.resolve(lowerScenarioToHir(scenario, { adHocContext })),
       }}
     >
       {children}
diff --git a/libs/@hashintel/petrinaut/src/react/simulation/provider.tsx b/libs/@hashintel/petrinaut/src/react/simulation/provider.tsx
index 072a217c415..4155828c069 100644
--- a/libs/@hashintel/petrinaut/src/react/simulation/provider.tsx
+++ b/libs/@hashintel/petrinaut/src/react/simulation/provider.tsx
@@ -442,23 +442,7 @@ export const SimulationProvider: React.FC<SimulationProviderProps> = ({
       ? currentState.parameterValues
       : {};
     // eslint-disable-next-line no-use-before-define -- closure; ref is defined later in render
-    const namedScenarioToCompile = tweakedScenarioRef.current;
-    // eslint-disable-next-line no-use-before-define -- closure; ref is defined later in render
-    const adHocRunState = adHocRunScenarioRef.current;
-    if (namedScenarioToCompile === null && adHocRunState?.ok === false) {
-      const refusal = new Error(
-        `The inline scenario definition has errors:\n${adHocRunState.messages.join("\n")}`,
-      );
-      setError(refusal.message);
-      setErrorItemId(null);
-      throw refusal;
-    }
-    const adHocScenarioToCompile = adHocRunState?.ok
-      ? adHocRunState.scenario
-      : null;
-    const scenarioToCompile = namedScenarioToCompile ?? adHocScenarioToCompile;
-    const adHocRun =
-      namedScenarioToCompile === null && adHocScenarioToCompile !== null;
+    const scenarioToCompile = scenarioToCompileRef.current;
 
     // Dispose any active simulation before starting a new one. Update both
     // the ref and React state so same-tick callers see the cleared handle.
@@ -479,8 +463,8 @@ export const SimulationProvider: React.FC<SimulationProviderProps> = ({
       if (scenarioToCompile) {
         const scenarioHir = await requestScenarioHir(
           {
-            parameterOverrides: scenarioToCompile.parameterOverrides,
-            initialState: scenarioToCompile.initialState,
+            parameterOverrides: scenarioToCompile.scenario.parameterOverrides,
+            initialState: scenarioToCompile.scenario.initialState,
           },
           // A persisted ad-hoc scenario synthesizes against the net inside
           // the worker; other kinds ignore the context.
@@ -495,23 +479,10 @@ export const SimulationProvider: React.FC<SimulationProviderProps> = ({
         if (initializationGenerationRef.current !== generation) {
           return;
         }
-        // The ad-hoc definition reads net parameters at the panel's current
-        // values (the render path compiles it the same way); a named
-        // scenario keeps the parameters' own defaults, its overrides rule.
-        const compileParameters = simulationExtensions.parameters
-          ? adHocRun
-            ? sdcpn.parameters.map((parameter) => ({
-                ...parameter,
-                defaultValue:
-                  manualParameterValues[parameter.variableName] ??
-                  parameter.defaultValue,
-              }))
-            : sdcpn.parameters
-          : [];
         const outcome = compileScenario(
-          scenarioToCompile,
+          scenarioToCompile.scenario,
           scenarioHir,
-          compileParameters,
+          scenarioToCompile.netParameters,
           sdcpn.places,
           sdcpn.types,
         );
@@ -825,25 +796,25 @@ export const SimulationProvider: React.FC<SimulationProviderProps> = ({
     };
   }
 
-  // Snapshot for `initialize`, which compiles the scenario itself.
-  const tweakedScenarioRef = useLatest(tweakedScenario);
-  // The quick-sim ad-hoc definition, synthesized to an ordinary scenario:
-  // Play compiles it exactly like a selected scenario, so the run starts
-  // from the defined tokens rather than the manual marking. A failed
-  // synthesis is carried too — a run must refuse a broken definition, the
-  // way a broken named scenario refuses, never silently fall back to the
-  // manual marking behind the error banner.
-  const adHocRunScenarioRef = useLatest(
-    adHocSynthesized
-      ? adHocSynthesized.ok
-        ? { ok: true as const, scenario: adHocSynthesized.scenario }
-        : {
-            ok: false as const,
-            messages: adHocSynthesized.errors.map(
-              (synthesisError) => synthesisError.message,
-            ),
+  // Snapshot for `initialize`, which compiles the scenario itself: the
+  // saved (tweaked) scenario, or the quick-sim ad-hoc definition already
+  // synthesized above — a run must consume the same definition AND the
+  // same net parameters the render preview compiled with (the ad-hoc
+  // preview overlays the panel's values onto the defaults).
+  const scenarioToCompileRef = useLatest(
+    tweakedScenario
+      ? {
+          scenario: tweakedScenario,
+          netParameters: extensions.parameters
+            ? petriNetDefinition.parameters
+            : [],
+        }
+      : adHocSynthesized?.ok
+        ? {
+            scenario: adHocSynthesized.scenario,
+            netParameters: adHocNetParameters,
           }
-      : null,
+        : null,
   );
 
   const contextValue: SimulationContextValue = {
diff --git a/libs/@hashintel/petrinaut/src/react/simulation/use-scenario-hir.ts b/libs/@hashintel/petrinaut/src/react/simulation/use-scenario-hir.ts
index f1a48c9a0c0..f0faad75517 100644
--- a/libs/@hashintel/petrinaut/src/react/simulation/use-scenario-hir.ts
+++ b/libs/@hashintel/petrinaut/src/react/simulation/use-scenario-hir.ts
@@ -27,6 +27,33 @@ type LoweringPayload = {
   adHocContext?: AdHocSynthesisContext;
 };
 
+/**
+ * Synthesis reads only a place's id, name, and colour, and only a type's
+ * identity and elements — geometry and dynamics fields must not churn the
+ * key (dragging a node would re-lower otherwise).
+ */
+const projectAdHocContext = (
+  context: AdHocSynthesisContext,
+): AdHocSynthesisContext => ({
+  netParameters: context.netParameters,
+  places: context.places.map((place) => ({
+    id: place.id,
+    name: place.name,
+    colorId: place.colorId,
+    dynamicsEnabled: false,
+    differentialEquationId: null,
+    x: 0,
+    y: 0,
+  })),
+  types: context.types.map((type) => ({
+    id: type.id,
+    name: type.name,
+    iconSlug: type.iconSlug,
+    displayColor: type.displayColor,
+    elements: type.elements,
+  })),
+});
+
 const loweringKey = (
   scenario: Scenario,
   adHocContext: AdHocSynthesisContext | undefined,
@@ -50,7 +77,7 @@ const loweringKey = (
       initialState,
     },
     ...(scenario.initialState.type === "adhoc" && adHocContext
-      ? { adHocContext }
+      ? { adHocContext: projectAdHocContext(adHocContext) }
       : {}),
   } satisfies LoweringPayload);
 };
diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/SimulateView/scenarios/create-scenario-drawer.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/SimulateView/scenarios/create-scenario-drawer.tsx
index bdd2577ff55..e71b33e14bd 100644
--- a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/SimulateView/scenarios/create-scenario-drawer.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/SimulateView/scenarios/create-scenario-drawer.tsx
@@ -1,5 +1,5 @@
 import { useStore } from "@tanstack/react-form";
-import { use } from "react";
+import { use, useState } from "react";
 
 import { Button, Drawer } from "@hashintel/ds-components";
 import { css } from "@hashintel/ds-helpers/css";
@@ -132,6 +132,9 @@ const CreateAdHocScenarioContent = ({
   onClose: () => void;
 }) => {
   const { addScenario } = usePetrinautMutations();
+  // A schema rejection after a passing form would otherwise be a silent
+  // no-op click; surface it in the footer instead.
+  const [saveError, setSaveError] = useState<string | null>(null);
   const authoring = useAdHocScenarioAuthoring({ existingScenarioNames });
 
   const save = () => {
@@ -142,6 +145,9 @@ const CreateAdHocScenarioContent = ({
     // Final structural validation against the persistence schema.
     const result = scenarioSchema.safeParse(scenario);
     if (!result.success) {
+      setSaveError(
+        result.error.issues[0]?.message ?? "The scenario failed validation.",
+      );
       return;
     }
     addScenario(result.data);
@@ -158,8 +164,8 @@ const CreateAdHocScenarioContent = ({
       <Drawer.Footer
         secondaryActions={
           <DrawerErrorDisplay
-            count={authoring.errorCount}
-            firstMessage={authoring.firstError}
+            count={authoring.errorCount + (saveError ? 1 : 0)}
+            firstMessage={authoring.firstError ?? saveError ?? undefined}
           />
         }
         actions={
diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/SimulateView/scenarios/view-scenario-drawer.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/SimulateView/scenarios/view-scenario-drawer.tsx
index 213c093aadd..83bb2a7e3da 100644
--- a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/SimulateView/scenarios/view-scenario-drawer.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/SimulateView/scenarios/view-scenario-drawer.tsx
@@ -1,5 +1,5 @@
 import { useStore } from "@tanstack/react-form";
-import { use } from "react";
+import { use, useState } from "react";
 
 import { Button, Drawer } from "@hashintel/ds-components";
 import { css } from "@hashintel/ds-helpers/css";
@@ -152,6 +152,9 @@ const ViewAdHocScenarioContent = ({
       .filter((candidate) => candidate.id !== scenario.id)
       .map((candidate) => candidate.name),
   );
+  // A schema rejection after a passing form would otherwise be a silent
+  // no-op click; surface it in the footer instead.
+  const [saveError, setSaveError] = useState<string | null>(null);
   const authoring = useAdHocScenarioAuthoring({
     initial: {
       name: scenario.name,
@@ -168,6 +171,9 @@ const ViewAdHocScenarioContent = ({
     }
     const result = scenarioSchema.safeParse(updated);
     if (!result.success) {
+      setSaveError(
+        result.error.issues[0]?.message ?? "The scenario failed validation.",
+      );
       return;
     }
     updateScenario({
@@ -190,8 +196,8 @@ const ViewAdHocScenarioContent = ({
       <Drawer.Footer
         secondaryActions={
           <DrawerErrorDisplay
-            count={authoring.errorCount}
-            firstMessage={authoring.firstError}
+            count={authoring.errorCount + (saveError ? 1 : 0)}
+            firstMessage={authoring.firstError ?? saveError ?? undefined}
           />
         }
         actions={

From fbffc5f206bef85c89f78d4d934f6effe908b8cf Mon Sep 17 00:00:00 2001
From: Chris Feijoo <chris@kube.io>
Date: Thu, 27 Aug 2026 04:55:13 +0200
Subject: [PATCH 04/17] FE-1517: A run refuses a broken inline definition

---
 .../src/react/simulation/provider.tsx         | 26 +++++++++++++++----
 1 file changed, 21 insertions(+), 5 deletions(-)

diff --git a/libs/@hashintel/petrinaut/src/react/simulation/provider.tsx b/libs/@hashintel/petrinaut/src/react/simulation/provider.tsx
index 4155828c069..9aafc3c5568 100644
--- a/libs/@hashintel/petrinaut/src/react/simulation/provider.tsx
+++ b/libs/@hashintel/petrinaut/src/react/simulation/provider.tsx
@@ -460,6 +460,11 @@ export const SimulationProvider: React.FC<SimulationProviderProps> = ({
     try {
       let initialMarking = manualInitialMarking;
       let parameterValues: Record<string, string> = manualParameterValues;
+      if (scenarioToCompile?.kind === "invalid") {
+        throw new Error(
+          `The inline initial state does not compile:\n${scenarioToCompile.messages.join("\n")}`,
+        );
+      }
       if (scenarioToCompile) {
         const scenarioHir = await requestScenarioHir(
           {
@@ -804,16 +809,27 @@ export const SimulationProvider: React.FC<SimulationProviderProps> = ({
   const scenarioToCompileRef = useLatest(
     tweakedScenario
       ? {
+          kind: "scenario" as const,
           scenario: tweakedScenario,
           netParameters: extensions.parameters
             ? petriNetDefinition.parameters
             : [],
         }
-      : adHocSynthesized?.ok
-        ? {
-            scenario: adHocSynthesized.scenario,
-            netParameters: adHocNetParameters,
-          }
+      : adHocSynthesized
+        ? adHocSynthesized.ok
+          ? {
+              kind: "scenario" as const,
+              scenario: adHocSynthesized.scenario,
+              netParameters: adHocNetParameters,
+            }
+          : // A broken inline definition must refuse to run — falling back
+            // to the manual marking would silently ignore what was typed.
+            {
+              kind: "invalid" as const,
+              messages: adHocSynthesized.errors.map(
+                (synthesisError) => synthesisError.message,
+              ),
+            }
         : null,
   );
 

From 1cb5ba18d44538593820e4ffa5a83f39b6311d80 Mon Sep 17 00:00:00 2001
From: Chris Feijoo <chris@kube.io>
Date: Sat, 29 Aug 2026 16:21:35 +0200
Subject: [PATCH 05/17] FE-1517: Describe the persisted ad-hoc format in the
 spec

---
 .../content/ui/ad-hoc-form.mdx                | 50 +++++++++++++++++--
 1 file changed, 46 insertions(+), 4 deletions(-)

diff --git a/libs/@local/petrinaut-arch-docs/content/ui/ad-hoc-form.mdx b/libs/@local/petrinaut-arch-docs/content/ui/ad-hoc-form.mdx
index 433f9dc4c22..b0160edf58a 100644
--- a/libs/@local/petrinaut-arch-docs/content/ui/ad-hoc-form.mdx
+++ b/libs/@local/petrinaut-arch-docs/content/ui/ad-hoc-form.mdx
@@ -21,10 +21,8 @@ toggles at all, and instead each top-level Variable row grows a "Scenario
 Parameter" toggle (`AdHocVariable.exposed`) — the saved scenario exposes
 those Variables as its tunable parameters. Optimize selections write the
 `optimize` settings object; expose writes the boolean `exposed` flag. In
-that consumer alone the definition persists — `initialState.type: "adhoc"`
-on the saved scenario, with `scenarioParameters` and `parameterOverrides`
-derived from it on save (`useAdHocScenarioAuthoring`); everywhere else the
-generated scenario stays ephemeral.
+that consumer alone the definition persists (see **The persisted format**
+below); everywhere else the generated scenario stays ephemeral.
 
 The design is the scenario **code editor's model, constrained**: everything
 the form can express synthesizes to code-mode scenario source that the
@@ -65,6 +63,50 @@ Each `AdHocOptimizedField` carries the generated parameter's deterministic
 (`Space › item 0 › x`) — the join key from optimization results back to the
 thing the user selected.
 
+## The persisted format
+
+A scenario saved from the form is an ordinary `Scenario` whose
+`initialState` takes the third of its three variants, declared beside the
+other two in `core/types/sdcpn.ts`:
+
+- `{ type: "per_place", content }` — the classical spreadsheet of static
+  values;
+- `{ type: "code", content }` — a hand-written code block;
+- `{ type: "adhoc", content: AdHocScenarioState }` — the form's state,
+  verbatim.
+
+`AdHocScenarioState` (the [core ad-hoc
+layer](layer:core.simulation.authoring.adhoc)) is a JSON-serializable tree,
+so it saves as YAML or JSON with the rest of the model document; the zod
+schema in `ad-hoc/ad-hoc-state-schema.ts` validates it on load. Its parts:
+
+- `variables: AdHocVariable[]` — name, declared type, the value slot, and
+  the `exposed` flag expose mode writes.
+- `netParameters: AdHocNetParameter[]` — a `parameterId` plus a value slot
+  per overridden net parameter; an empty expression keeps the default.
+- `places: Record<PlaceID, AdHocPlaceState>` — a coloured place holds
+  per-place `variables`, `rows` (`fixed`, or `template` with a count), and
+  `sharedColumns`; an uncoloured place holds one `count`.
+- Every value slot is an `AdHocValue`: the expression string plus the
+  Optimize bounds while that toggle is on. The `retained*` fields
+  (`retainedOptimize`, `retainedCount`, `retainedSharedColumns`) persist
+  too, so a toggle switched off, saved, and switched back on restores what
+  it held.
+
+Two scenario fields are **derived on save** rather than stored as more
+state: `useAdHocScenarioAuthoring` runs `synthesizeAdHocScenario` and
+writes the result's `scenarioParameters` (one per exposed Variable,
+snake_case-named, defaulting to its expression's constant value) and
+`parameterOverrides` onto the scenario. Downstream consumers — experiments,
+optimization manifests, the CLI's `metadata` — read those derived fields;
+`content` stays the single editable source, and the edit drawer loads it
+back into the form verbatim.
+
+Code exists only at compile time: `lowerScenarioToHir` synthesizes the
+state to code-mode scenario source and
+[`compileScenario`](layer:core.simulation.authoring) takes its ordinary
+code branch. The generated source is never persisted.
+
 ## The row grammar
 
 The Initial State section renders one block per place. A coloured place is a

From e40601484d01822e4bbd2d176aa1a1daddf4fcfb Mon Sep 17 00:00:00 2001
From: Chris Feijoo <chris@kube.io>
Date: Sun, 30 Aug 2026 06:40:48 +0200
Subject: [PATCH 06/17] FE-1517: Run a selected ad-hoc scenario through the
 form

---
 .../petrinaut/docs/ad-hoc-scenarios.md        |   4 +-
 libs/@hashintel/petrinaut/docs/simulation.md  |   2 +-
 .../ad-hoc-scenario-form.test.tsx             |  88 ++++++++++++
 .../ad-hoc-scenario-form.tsx                  |  35 +++--
 .../ad-hoc-scenario-form/form-context.ts      |  12 ++
 .../ad-hoc-scenario-form/parameter-rows.tsx   |  46 ++----
 .../ad-hoc-scenario-form/place-block.tsx      |  18 ++-
 .../scenario-parameter-rows.tsx               |  87 +++++++++++
 .../spreadsheet/form-table.ts                 |  32 +++++
 .../spreadsheet/gutter-cell.tsx               |  33 +++--
 .../ad-hoc-scenario-form/token-table.tsx      | 119 ++++++++-------
 .../ad-hoc-scenario-form/value-editor.tsx     |  20 ++-
 .../subviews/scenario-run-state.ts            |  70 +++++++++
 .../subviews/simulation-settings.tsx          | 135 ++++++++++++++++--
 .../content/ui/ad-hoc-form.mdx                |   6 +-
 .../content/ui/form-interaction-spec.mdx      |  18 +++
 16 files changed, 603 insertions(+), 122 deletions(-)
 create mode 100644 libs/@hashintel/petrinaut/src/ui/components/ad-hoc-scenario-form/scenario-parameter-rows.tsx
 create mode 100644 libs/@hashintel/petrinaut/src/ui/views/Editor/panels/BottomPanel/subviews/scenario-run-state.ts

diff --git a/libs/@hashintel/petrinaut/docs/ad-hoc-scenarios.md b/libs/@hashintel/petrinaut/docs/ad-hoc-scenarios.md
index 0a82710ce4f..75fa8ee8e29 100644
--- a/libs/@hashintel/petrinaut/docs/ad-hoc-scenarios.md
+++ b/libs/@hashintel/petrinaut/docs/ad-hoc-scenarios.md
@@ -93,7 +93,9 @@ Optimized values follow the same rules as [scenario parameter domains](optimizat
 
 With the feature enabled, [creating a scenario](scenarios.md#creating-a-scenario) opens the same form -- name and description above it -- as the one authoring surface (there is no "Define as code" toggle in this mode). Each top-level Variable's row carries a **Scenario Parameter** toggle: an exposed Variable becomes one of the saved scenario's tunable parameters, named after the Variable in snake_case (`baseLoad` becomes `base_load`), defaulting to its expression's value -- which must therefore be a constant. Everyone running the scenario can then adjust it wherever scenario parameters appear, without editing the scenario.
 
-Saving keeps your form entries as the scenario's definition, so editing the scenario reopens exactly the form you left. A scenario authored this way always edits through the ad-hoc form, whatever the setting says -- the classical form cannot represent it.
+Saving keeps your form entries as the scenario's definition, so editing the scenario reopens exactly the form you left.
+
+Selecting a saved ad-hoc scenario in Simulation Settings shows it through the same form, read-only: only the scenario parameters (the exposed Variables) take value edits, for that run alone; auxiliary Variables stay hidden, and the parameter overrides and initial state can be browsed with the usual keyboard navigation but not changed. A scenario authored this way always edits through the ad-hoc form, whatever the setting says -- the classical form cannot represent it.
 
 ## Errors
 
diff --git a/libs/@hashintel/petrinaut/docs/simulation.md b/libs/@hashintel/petrinaut/docs/simulation.md
index bb14bd02f49..b99238f5b95 100644
--- a/libs/@hashintel/petrinaut/docs/simulation.md
+++ b/libs/@hashintel/petrinaut/docs/simulation.md
@@ -32,7 +32,7 @@ Quick-action buttons next to the picker let you edit the selected scenario, crea
 Override values for this run:
 
 - With **No scenario** selected: each [net-level parameter](petri-net-extensions.md#global-parameters) shows its name and variable name. Boolean parameters use a toggle; real and integer parameters use a numeric input pre-filled with the default.
-- With a scenario selected: the **scenario parameters** are shown instead, pre-filled with that scenario's defaults. Net-level parameter values are fixed by the scenario's [parameter bindings](scenarios.md#parameter-bindings) and are not editable here.
+- With a scenario selected: the **scenario parameters** are shown instead, pre-filled with that scenario's defaults. Net-level parameter values are fixed by the scenario's [parameter bindings](scenarios.md#parameter-bindings) and are not editable here. A scenario saved from the [ad-hoc form](ad-hoc-scenarios.md) shows through that form instead: its scenario parameters take value edits in the left column, and its parameter overrides and initial state sit read-only in the right one -- browsable with the same keyboard navigation, but only a scenario edit (the pencil next to the picker) changes them.
 
 Changes here do not modify the parameter definition or the scenario -- they only apply to the simulation. Parameter values are locked while a simulation is running. Reset the simulation to change them.
 
diff --git a/libs/@hashintel/petrinaut/src/ui/components/ad-hoc-scenario-form/ad-hoc-scenario-form.test.tsx b/libs/@hashintel/petrinaut/src/ui/components/ad-hoc-scenario-form/ad-hoc-scenario-form.test.tsx
index 5805444a701..64e2485a0bd 100644
--- a/libs/@hashintel/petrinaut/src/ui/components/ad-hoc-scenario-form/ad-hoc-scenario-form.test.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/components/ad-hoc-scenario-form/ad-hoc-scenario-form.test.tsx
@@ -111,12 +111,14 @@ const Harness: React.FC<{
   initial?: AdHocScenarioState;
   withVariables?: boolean;
   renderLayout?: React.ComponentProps<typeof AdHocScenarioForm>["renderLayout"];
+  mode?: React.ComponentProps<typeof AdHocScenarioForm>["mode"];
 }> = ({
   selection = "optimize",
   onState,
   initial = EMPTY_AD_HOC_STATE,
   withVariables,
   renderLayout,
+  mode,
 }) => {
   const [state, setState] = useState(initial);
   return (
@@ -130,6 +132,7 @@ const Harness: React.FC<{
       selection={selection}
       withVariables={withVariables}
       renderLayout={renderLayout}
+      mode={mode}
     />
   );
 };
@@ -1069,6 +1072,91 @@ describe("AdHocScenarioForm", () => {
     expect(latest?.variables).toHaveLength(1);
   });
 
+  const RUN_STATE: AdHocScenarioState = {
+    variables: [
+      {
+        name: "altitude",
+        type: "real",
+        expression: "400",
+        optimize: null,
+        exposed: true,
+      },
+      { name: "helper", type: "real", expression: "2", optimize: null },
+    ],
+    netParameters: [],
+    places: {
+      "place-pumps": {
+        kind: "coloured",
+        variables: [
+          { name: "boost", type: "real", expression: "1", optimize: null },
+        ],
+        rows: [
+          {
+            kind: "fixed",
+            cells: [
+              { expression: "400", optimize: null },
+              { expression: "false", optimize: null },
+            ],
+          },
+        ],
+        sharedColumns: {},
+      },
+    },
+  };
+
+  it("run mode lists only exposed variables and offers no structural edits", () => {
+    render(<Harness selection="none" mode="run" initial={RUN_STATE} />);
+
+    // The exposed Variable is a static-name row; the auxiliary top-level
+    // and per-place Variables are gone entirely.
+    expect(screen.getByText("altitude")).toBeTruthy();
+    expect(screen.queryByText("helper")).toBe(null);
+    expect(screen.queryByText("boost")).toBe(null);
+    // No add-lines, no row menus, no dots affordance.
+    expect(screen.queryByRole("button", { name: /Add a variable/ })).toBe(null);
+    expect(screen.queryByRole("button", { name: /Add a token row/ })).toBe(
+      null,
+    );
+    expect(screen.queryByRole("button", { name: "Row 1 menu" })).toBe(null);
+  });
+
+  it("run mode edits exposed values and nothing else, but still walks", () => {
+    let latest: AdHocScenarioState | undefined;
+    render(
+      <Harness
+        selection="none"
+        mode="run"
+        initial={RUN_STATE}
+        onState={(state) => {
+          latest = state;
+        }}
+      />,
+    );
+
+    // A read-only cell: activation opens no editor, Delete clears nothing,
+    // but arrows still walk the grid.
+    const cell = screen.getByRole("button", {
+      name: "Pumps › item 0 › pressure",
+    });
+    cell.focus();
+    fireEvent.click(cell, { detail: 0 });
+    expect(screen.queryByLabelText("Expression")).toBe(null);
+    fireEvent.keyDown(cell, { key: "Delete" });
+    expect(latest).toBe(undefined);
+    fireEvent.keyDown(cell, { key: "ArrowRight" });
+    expect(document.activeElement?.getAttribute("aria-label")).toBe(
+      "Pumps › item 0 › worn",
+    );
+
+    // The exposed Variable's value cell opens and edits.
+    const value = screen.getByRole("button", { name: "altitude" });
+    value.focus();
+    fireEvent.click(value, { detail: 0 });
+    const editor = screen.getByLabelText("Expression");
+    fireEvent.change(editor, { target: { value: "500" } });
+    expect(latest?.variables[0]?.expression).toBe("500");
+  });
+
   it("renderLayout columns: vertical arrows stay, horizontal ones cross with memory", () => {
     render(
       <Harness
diff --git a/libs/@hashintel/petrinaut/src/ui/components/ad-hoc-scenario-form/ad-hoc-scenario-form.tsx b/libs/@hashintel/petrinaut/src/ui/components/ad-hoc-scenario-form/ad-hoc-scenario-form.tsx
index 320ad42bbfa..e8e13e80d92 100644
--- a/libs/@hashintel/petrinaut/src/ui/components/ad-hoc-scenario-form/ad-hoc-scenario-form.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/components/ad-hoc-scenario-form/ad-hoc-scenario-form.tsx
@@ -47,12 +47,17 @@ import { computeAdHocHighlight } from "./dependency-highlight";
 import { AdHocFormContext } from "./form-context";
 import { ParameterRows } from "./parameter-rows";
 import { ColouredPlaceBlock, UncolouredPlaceBlock } from "./place-block";
+import { ScenarioParameterRows } from "./scenario-parameter-rows";
 import { useAdHocLspSession } from "./use-ad-hoc-lsp-session";
 import { useAdHocFormHistory } from "./use-form-history";
 import { VariableRows } from "./variable-rows";
 
 import type { AdHocFocusTarget } from "./dependency-highlight";
-import type { AdHocFormSelection, AdHocFormServices } from "./form-context";
+import type {
+  AdHocFormMode,
+  AdHocFormSelection,
+  AdHocFormServices,
+} from "./form-context";
 import type {
   AdHocScenarioState,
   AdHocSlot,
@@ -81,6 +86,13 @@ export interface AdHocScenarioFormProps {
   context: AdHocSynthesisContext;
   /** What selecting a value means; "none" hides the toggles. */
   selection: AdHocFormSelection;
+  /**
+   * "author" (default) is the full editor. "run" shows a saved scenario
+   * for a run: only the exposed top-level Variables (the scenario's
+   * parameters) accept value edits, auxiliary Variables are hidden, and
+   * everything else is read-only yet keyboard-navigable and selectable.
+   */
+  mode?: AdHocFormMode;
   /**
    * Whether the Variables section is offered. Embeddings that provide no
    * scenario Variables (quick simulation's Simulation Settings) turn it
@@ -160,6 +172,7 @@ export const AdHocScenarioForm: React.FC<AdHocScenarioFormProps> = ({
   onChange,
   context,
   selection,
+  mode = "author",
   withVariables = true,
   renderLayout,
   className,
@@ -276,6 +289,7 @@ export const AdHocScenarioForm: React.FC<AdHocScenarioFormProps> = ({
     highlight,
     setFocusedValue,
     formatExpression: requestFormatExpression,
+    mode,
     dense: renderLayout !== undefined,
     overlayKeyDown: { capture: handleKeyDown, bubble: stopDeleteKeys },
   };
@@ -285,13 +299,18 @@ export const AdHocScenarioForm: React.FC<AdHocScenarioFormProps> = ({
       <ParameterRows entries={state.netParameters} />
     ) : null;
 
-  const variableRows = withVariables ? (
-    <VariableRows
-      scopeLabel="Top-level variables"
-      placeId={null}
-      variables={state.variables}
-    />
-  ) : null;
+  // Run mode lists the scenario's parameters (the exposed Variables, value
+  // edits only); authoring gets the full Variables editor.
+  const variableRows =
+    mode === "run" ? (
+      <ScenarioParameterRows variables={state.variables} />
+    ) : withVariables ? (
+      <VariableRows
+        scopeLabel="Top-level variables"
+        placeId={null}
+        variables={state.variables}
+      />
+    ) : null;
 
   const placesList = (
     <div className={placesListStyle}>
diff --git a/libs/@hashintel/petrinaut/src/ui/components/ad-hoc-scenario-form/form-context.ts b/libs/@hashintel/petrinaut/src/ui/components/ad-hoc-scenario-form/form-context.ts
index 6df72ac2f83..20c03d73a62 100644
--- a/libs/@hashintel/petrinaut/src/ui/components/ad-hoc-scenario-form/form-context.ts
+++ b/libs/@hashintel/petrinaut/src/ui/components/ad-hoc-scenario-form/form-context.ts
@@ -33,7 +33,18 @@ export type AdHocFormSelection = "none" | "optimize" | "expose";
 export const adHocSelectionText = (selection: AdHocFormSelection): string =>
   selection === "expose" ? "Scenario Parameter" : "Optimize";
 
+/**
+ * What the form lets the user change. "author" is the full editor. "run"
+ * shows a saved scenario for a run: only the exposed top-level Variables
+ * (the scenario's parameters) accept value edits; auxiliary Variables are
+ * hidden, and everything else is read-only yet stays keyboard-navigable
+ * and selectable.
+ */
+export type AdHocFormMode = "author" | "run";
+
 export interface AdHocFormServices {
+  /** What the form lets the user change; see {@link AdHocFormMode}. */
+  mode: AdHocFormMode;
   /** The whole form state, as currently edited. */
   formState: AdHocScenarioState;
   /**
@@ -82,6 +93,7 @@ export interface AdHocFormServices {
 }
 
 export const AdHocFormContext = createContext<AdHocFormServices>({
+  mode: "author",
   formState: { variables: [], netParameters: [], places: {} },
   dispatch: () => {},
   synthesisContext: { netParameters: [], places: [], types: [] },
diff --git a/libs/@hashintel/petrinaut/src/ui/components/ad-hoc-scenario-form/parameter-rows.tsx b/libs/@hashintel/petrinaut/src/ui/components/ad-hoc-scenario-form/parameter-rows.tsx
index 19096519d8f..4c7ba34c4a1 100644
--- a/libs/@hashintel/petrinaut/src/ui/components/ad-hoc-scenario-form/parameter-rows.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/components/ad-hoc-scenario-form/parameter-rows.tsx
@@ -15,28 +15,14 @@ import { FormSpreadsheet } from "./spreadsheet/form-spreadsheet";
 import {
   cellStyle,
   dependencyHighlightStyle as highlightStyle,
+  staticNameCellStyle,
+  staticTypeCellStyle,
 } from "./spreadsheet/form-table";
 import { OptimizeToggle } from "./spreadsheet/optimize-toggle";
 import { ValueEditor } from "./value-editor";
 
 import type { AdHocNetParameter } from "@hashintel/petrinaut-core";
 
-const parameterNameCellStyle = css({
-  width: "[170px]",
-  display: "flex",
-  alignItems: "center",
-  height: "[28px]",
-  paddingX: "2",
-  fontSize: "xs",
-  fontWeight: "medium",
-  color: "neutral.s110",
-  overflow: "hidden",
-  whiteSpace: "nowrap",
-  // A long name fades out instead of clipping to an ellipsis.
-  maskImage:
-    "[linear-gradient(to right, black calc(100% - 14px), transparent)]",
-});
-
 // An untouched parameter shows its default quietly: a small uppercase tag,
 // then the value — both lighter than an actual override.
 const defaultDisplayStyle = css({
@@ -56,19 +42,6 @@ const defaultTagStyle = css({
   color: "neutral.s80",
 });
 
-// Matches the variables' type-select face: same width, plain (non-code)
-// capitalized text, so the two columns read as one grammar.
-const parameterTypeCellStyle = css({
-  width: "[84px]",
-  display: "flex",
-  alignItems: "center",
-  height: "[28px]",
-  paddingX: "2",
-  fontSize: "xs",
-  color: "neutral.s80",
-  textTransform: "capitalize",
-});
-
 const parameterOptimizeCellStyle = css({
   width: "[92px]",
   paddingX: "1",
@@ -80,8 +53,14 @@ export interface ParameterRowsProps {
 }
 
 export const ParameterRows: React.FC<ParameterRowsProps> = ({ entries }) => {
-  const { synthesisContext, selection, highlight, setFocusedValue, dispatch } =
-    use(AdHocFormContext);
+  const {
+    mode,
+    synthesisContext,
+    selection,
+    highlight,
+    setFocusedValue,
+    dispatch,
+  } = use(AdHocFormContext);
   const { register, onKeyDown, attach } = useFocusGrid();
 
   const entryFor = (parameterId: string): AdHocNetParameter =>
@@ -107,10 +86,10 @@ export const ParameterRows: React.FC<ParameterRowsProps> = ({ entries }) => {
                 className={cx(cellStyle, rowHighlight)}
                 style={{ width: 170 }}
               >
-                <div className={parameterNameCellStyle}>{parameter.name}</div>
+                <div className={staticNameCellStyle}>{parameter.name}</div>
               </td>
               <td className={cx(cellStyle, rowHighlight)} style={{ width: 84 }}>
-                <div className={parameterTypeCellStyle}>{parameter.type}</div>
+                <div className={staticTypeCellStyle}>{parameter.type}</div>
               </td>
               <td className={cx(cellStyle, rowHighlight)}>
                 <ValueEditor
@@ -127,6 +106,7 @@ export const ParameterRows: React.FC<ParameterRowsProps> = ({ entries }) => {
                         )
                   }
                   kind={parameter.type}
+                  readOnly={mode === "run"}
                   placeholder={parameter.defaultValue}
                   triggerRef={register(parameterIndex, 0)}
                   onTriggerKeyDown={onKeyDown(parameterIndex, 0)}
diff --git a/libs/@hashintel/petrinaut/src/ui/components/ad-hoc-scenario-form/place-block.tsx b/libs/@hashintel/petrinaut/src/ui/components/ad-hoc-scenario-form/place-block.tsx
index 09fcba381e4..a1a587e1a49 100644
--- a/libs/@hashintel/petrinaut/src/ui/components/ad-hoc-scenario-form/place-block.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/components/ad-hoc-scenario-form/place-block.tsx
@@ -217,13 +217,18 @@ const PlaceBlockContents: React.FC<ColouredPlaceBlockProps> = ({
   colour,
   state,
 }) => {
+  const { mode } = use(AdHocFormContext);
   return (
     <>
-      <VariableRows
-        scopeLabel={`Variables of ${place.name}`}
-        placeId={place.id}
-        variables={state.variables}
-      />
+      {/* Run mode shows no auxiliary Variables — they are the saved
+          definition's internals, not something a run adjusts. */}
+      {mode === "run" ? null : (
+        <VariableRows
+          scopeLabel={`Variables of ${place.name}`}
+          placeId={place.id}
+          variables={state.variables}
+        />
+      )}
       <TokenTable place={place} colour={colour} state={state} />
     </>
   );
@@ -324,7 +329,7 @@ export const UncolouredPlaceBlock: React.FC<UncolouredPlaceBlockProps> = ({
   place,
   state,
 }) => {
-  const { dense } = use(AdHocFormContext);
+  const { mode, dense } = use(AdHocFormContext);
   const target = { kind: "count" as const, placeId: place.id, row: null };
   // The count cell is a single-element member: vertical arrows leave to the
   // neighbouring member, horizontal ones cross into a sibling column.
@@ -351,6 +356,7 @@ export const UncolouredPlaceBlock: React.FC<UncolouredPlaceBlockProps> = ({
           value={state.count}
           target={target}
           kind="count"
+          readOnly={mode === "run"}
           placeholder="0 tokens"
           className={uncolouredCountTriggerStyle}
           triggerRef={attachTrigger}
diff --git a/libs/@hashintel/petrinaut/src/ui/components/ad-hoc-scenario-form/scenario-parameter-rows.tsx b/libs/@hashintel/petrinaut/src/ui/components/ad-hoc-scenario-form/scenario-parameter-rows.tsx
new file mode 100644
index 00000000000..18ccfe3ae85
--- /dev/null
+++ b/libs/@hashintel/petrinaut/src/ui/components/ad-hoc-scenario-form/scenario-parameter-rows.tsx
@@ -0,0 +1,87 @@
+/**
+ * The scenario-parameters table of the form's run mode: one row per exposed
+ * top-level Variable — a static name, a static type, and the one thing a
+ * run may change, the value. No gutter, no phantom line, no rename: the
+ * scenario's structure belongs to its author, values belong to the run.
+ */
+
+import { use } from "react";
+
+import { cx } from "@hashintel/ds-helpers/css";
+
+import { useFocusGrid } from "../../worksheet/use-focus-grid";
+import { adHocVariableKey } from "./dependency-highlight";
+import { AdHocFormContext } from "./form-context";
+import { FormSpreadsheet } from "./spreadsheet/form-spreadsheet";
+import {
+  cellStyle,
+  dependencyHighlightStyle as highlightStyle,
+  staticNameCellStyle,
+  staticTypeCellStyle,
+} from "./spreadsheet/form-table";
+import { ValueEditor } from "./value-editor";
+
+import type { AdHocVariable } from "@hashintel/petrinaut-core";
+
+export interface ScenarioParameterRowsProps {
+  /**
+   * The form's top-level Variables, exposed and auxiliary alike; the rows
+   * render the exposed ones under their original indices, so value edits
+   * dispatch against the right slot.
+   */
+  variables: AdHocVariable[];
+}
+
+export const ScenarioParameterRows: React.FC<ScenarioParameterRowsProps> = ({
+  variables,
+}) => {
+  const { highlight } = use(AdHocFormContext);
+  const { register, onKeyDown, attach } = useFocusGrid();
+
+  const exposed = variables.flatMap((variable, index) =>
+    variable.exposed ? [{ variable, index }] : [],
+  );
+  if (exposed.length === 0) {
+    return null;
+  }
+
+  return (
+    <FormSpreadsheet attach={attach} ariaLabel="Scenario parameters">
+      <tbody>
+        {exposed.map(({ variable, index }, rowIndex) => {
+          const target = {
+            kind: "variable" as const,
+            placeId: null,
+            index,
+          };
+          const highlighted = highlight.variableKeys.has(
+            adHocVariableKey(null, variable.name),
+          );
+          const rowHighlight = highlighted && highlightStyle;
+          return (
+            <tr key={index} data-highlighted={highlighted || undefined}>
+              <td
+                className={cx(cellStyle, rowHighlight)}
+                style={{ width: 170 }}
+              >
+                <div className={staticNameCellStyle}>{variable.name}</div>
+              </td>
+              <td className={cx(cellStyle, rowHighlight)} style={{ width: 84 }}>
+                <div className={staticTypeCellStyle}>{variable.type}</div>
+              </td>
+              <td className={cx(cellStyle, rowHighlight)}>
+                <ValueEditor
+                  value={variable}
+                  target={target}
+                  kind={variable.type}
+                  triggerRef={register(rowIndex, 0)}
+                  onTriggerKeyDown={onKeyDown(rowIndex, 0)}
+                />
+              </td>
+            </tr>
+          );
+        })}
+      </tbody>
+    </FormSpreadsheet>
+  );
+};
diff --git a/libs/@hashintel/petrinaut/src/ui/components/ad-hoc-scenario-form/spreadsheet/form-table.ts b/libs/@hashintel/petrinaut/src/ui/components/ad-hoc-scenario-form/spreadsheet/form-table.ts
index d5d689647c7..fbbbe04ea26 100644
--- a/libs/@hashintel/petrinaut/src/ui/components/ad-hoc-scenario-form/spreadsheet/form-table.ts
+++ b/libs/@hashintel/petrinaut/src/ui/components/ad-hoc-scenario-form/spreadsheet/form-table.ts
@@ -326,6 +326,38 @@ export const phantomGutterButtonStyle = css({
   },
 });
 
+/**
+ * A read-structure name cell (a parameter's or scenario parameter's name):
+ * plain face, fading out under a mask when it overflows.
+ */
+export const staticNameCellStyle = css({
+  display: "flex",
+  alignItems: "center",
+  height: "[28px]",
+  paddingX: "2",
+  fontSize: "xs",
+  fontWeight: "medium",
+  color: "neutral.s110",
+  overflow: "hidden",
+  whiteSpace: "nowrap",
+  maskImage:
+    "[linear-gradient(to right, black calc(100% - 14px), transparent)]",
+});
+
+/**
+ * A read-structure type cell, matching the variables' type-select face:
+ * plain capitalized text at the same width.
+ */
+export const staticTypeCellStyle = css({
+  display: "flex",
+  alignItems: "center",
+  height: "[28px]",
+  paddingX: "2",
+  fontSize: "xs",
+  color: "neutral.s80",
+  textTransform: "capitalize",
+});
+
 /**
  * Lightens a gutter cell one surface step. The Variables lists wear it so
  * their gutters read quieter than the token tables'.
diff --git a/libs/@hashintel/petrinaut/src/ui/components/ad-hoc-scenario-form/spreadsheet/gutter-cell.tsx b/libs/@hashintel/petrinaut/src/ui/components/ad-hoc-scenario-form/spreadsheet/gutter-cell.tsx
index e95ea6b70e7..d780858c902 100644
--- a/libs/@hashintel/petrinaut/src/ui/components/ad-hoc-scenario-form/spreadsheet/gutter-cell.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/components/ad-hoc-scenario-form/spreadsheet/gutter-cell.tsx
@@ -39,6 +39,12 @@ export interface GutterCellProps {
   onKeyDown: React.KeyboardEventHandler<HTMLButtonElement>;
   /** Delete/Backspace on the selected gutter. */
   onDelete: () => void;
+  /**
+   * No row actions: the menu, the dots affordance, and Delete are gone,
+   * while the button stays focusable so the row can still be selected and
+   * walked (the form's run mode).
+   */
+  readOnly?: boolean;
 }
 
 export const GutterCell: React.FC<GutterCellProps> = ({
@@ -56,6 +62,7 @@ export const GutterCell: React.FC<GutterCellProps> = ({
   onBlur,
   onKeyDown,
   onDelete,
+  readOnly = false,
 }) => {
   const button = (
     <button
@@ -71,7 +78,9 @@ export const GutterCell: React.FC<GutterCellProps> = ({
         if (event.key === "Delete" || event.key === "Backspace") {
           event.preventDefault();
           event.stopPropagation();
-          onDelete();
+          if (!readOnly) {
+            onDelete();
+          }
           return;
         }
         onKeyDown(event);
@@ -79,7 +88,7 @@ export const GutterCell: React.FC<GutterCellProps> = ({
       onClick={(event) => {
         // A pointer click only selects; the keyboard "click" (Enter) and the
         // dots button open the menu.
-        if (event.detail === 0) {
+        if (event.detail === 0 && !readOnly) {
           onOpenMenu(event.currentTarget);
         }
       }}
@@ -91,15 +100,17 @@ export const GutterCell: React.FC<GutterCellProps> = ({
   return (
     <>
       {tooltip ? <Tooltip content={tooltip}>{button}</Tooltip> : button}
-      <button
-        type="button"
-        tabIndex={-1}
-        className={gutterMenuButtonStyle}
-        aria-label={menuLabel}
-        onClick={(event) => onOpenMenu(event.currentTarget)}
-      >
-        ⋯
-      </button>
+      {readOnly ? null : (
+        <button
+          type="button"
+          tabIndex={-1}
+          className={gutterMenuButtonStyle}
+          aria-label={menuLabel}
+          onClick={(event) => onOpenMenu(event.currentTarget)}
+        >
+          ⋯
+        </button>
+      )}
       {menuAnchor ? (
         <GutterMenu
           anchor={menuAnchor}
diff --git a/libs/@hashintel/petrinaut/src/ui/components/ad-hoc-scenario-form/token-table.tsx b/libs/@hashintel/petrinaut/src/ui/components/ad-hoc-scenario-form/token-table.tsx
index f54a8d3c6c3..fc38add40e9 100644
--- a/libs/@hashintel/petrinaut/src/ui/components/ad-hoc-scenario-form/token-table.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/components/ad-hoc-scenario-form/token-table.tsx
@@ -159,8 +159,17 @@ export const TokenTable: React.FC<TokenTableProps> = ({
   colour,
   state,
 }) => {
-  const { formState, synthesisContext, selection, setFocusedValue, dispatch } =
-    use(AdHocFormContext);
+  const {
+    mode,
+    formState,
+    synthesisContext,
+    selection,
+    setFocusedValue,
+    dispatch,
+  } = use(AdHocFormContext);
+  // Run mode: cells and gutters stay focusable and walkable, but nothing
+  // edits and no rows are added or removed.
+  const readOnly = mode === "run";
   const elements = colour.elements;
   const columnCount = elements.length;
   // Nonces, so a repeat click re-triggers the editor's auto-open behaviour.
@@ -224,7 +233,7 @@ export const TokenTable: React.FC<TokenTableProps> = ({
           ]
         : [{ id: `cells-${index}`, kind: "row", gutter: true }],
     ),
-    { id: "phantom", kind: "row" },
+    ...(readOnly ? [] : [{ id: "phantom", kind: "row" } as const]),
   ];
 
   const { attach, onKeyDown, onFocusTarget } = useFocusStops({
@@ -335,6 +344,7 @@ export const TokenTable: React.FC<TokenTableProps> = ({
                   value={row.count}
                   target={countTarget}
                   kind="count"
+                  readOnly={readOnly}
                   placeholder="1"
                   className={cx(
                     stripEditorStyle,
@@ -441,6 +451,7 @@ export const TokenTable: React.FC<TokenTableProps> = ({
                 column: "gutter",
               })}
               onDelete={() => deleteRow(rowIndex)}
+              readOnly={readOnly}
             />
           </td>
           {elements.map((element, columnIndex) => {
@@ -486,6 +497,7 @@ export const TokenTable: React.FC<TokenTableProps> = ({
                   }
                   kind={element.type}
                   derived={Boolean(shared)}
+                  readOnly={readOnly}
                   autoOpen={autoOpen}
                   onOpenDerived={() => openSharedEditor(element.name)}
                   triggerRef={registerTarget({
@@ -526,9 +538,11 @@ export const TokenTable: React.FC<TokenTableProps> = ({
                 >
                   <Tooltip
                     content={
-                      shared
-                        ? "Shared value — click to release the column"
-                        : "Click to share one value across the column"
+                      readOnly
+                        ? element.name
+                        : shared
+                          ? "Shared value — click to release the column"
+                          : "Click to share one value across the column"
                     }
                   >
                     <button
@@ -550,7 +564,10 @@ export const TokenTable: React.FC<TokenTableProps> = ({
                         stopId: "header",
                         column: columnIndex,
                       })}
-                      onClick={() =>
+                      onClick={() => {
+                        if (readOnly) {
+                          return;
+                        }
                         dispatch(
                           shared
                             ? {
@@ -564,8 +581,8 @@ export const TokenTable: React.FC<TokenTableProps> = ({
                                 field: element.name,
                                 column: columnIndex,
                               },
-                        )
-                      }
+                        );
+                      }}
                     >
                       {element.name}
                     </button>
@@ -600,6 +617,7 @@ export const TokenTable: React.FC<TokenTableProps> = ({
                       value={shared}
                       target={target}
                       kind={element.type}
+                      readOnly={readOnly}
                       autoOpen={
                         sharedAutoOpen?.field === element.name
                           ? sharedAutoOpen.nonce
@@ -631,47 +649,50 @@ export const TokenTable: React.FC<TokenTableProps> = ({
 
         {/* Phantom trailing row: a first click selects a phantom cell; a
             click on the selected cell, a double-click, or Enter materializes
-            the row. The gutter's + materializes directly. */}
-        <tbody>
-          <PhantomLine
-            gutterLabel="Add a token row"
-            onMaterialize={() => materializeRow(0)}
-          >
-            {elements.map((element, columnIndex) => (
-              <td
-                key={element.elementId}
-                className={cx(
-                  cellStyle,
-                  phantomRowCellStyle,
-                  state.sharedColumns[element.name] && sharedWashStyle,
-                )}
-              >
-                <button
-                  ref={registerTarget({
-                    stopId: "phantom",
-                    column: columnIndex,
-                  })}
-                  type="button"
-                  className={phantomCellButtonStyle}
-                  aria-label={`Add a token row (${element.name})`}
-                  onPointerDown={phantomActivation.onPointerDown}
-                  onClick={(event) => {
-                    if (phantomActivation.shouldActivate(event)) {
-                      materializeRow(columnIndex);
+            the row. The gutter's + materializes directly. Run mode adds no
+            rows, so the line is gone entirely. */}
+        {readOnly ? null : (
+          <tbody>
+            <PhantomLine
+              gutterLabel="Add a token row"
+              onMaterialize={() => materializeRow(0)}
+            >
+              {elements.map((element, columnIndex) => (
+                <td
+                  key={element.elementId}
+                  className={cx(
+                    cellStyle,
+                    phantomRowCellStyle,
+                    state.sharedColumns[element.name] && sharedWashStyle,
+                  )}
+                >
+                  <button
+                    ref={registerTarget({
+                      stopId: "phantom",
+                      column: columnIndex,
+                    })}
+                    type="button"
+                    className={phantomCellButtonStyle}
+                    aria-label={`Add a token row (${element.name})`}
+                    onPointerDown={phantomActivation.onPointerDown}
+                    onClick={(event) => {
+                      if (phantomActivation.shouldActivate(event)) {
+                        materializeRow(columnIndex);
+                      }
+                    }}
+                    onFocus={() =>
+                      onFocusTarget({ stopId: "phantom", column: columnIndex })
                     }
-                  }}
-                  onFocus={() =>
-                    onFocusTarget({ stopId: "phantom", column: columnIndex })
-                  }
-                  onKeyDown={onKeyDown({
-                    stopId: "phantom",
-                    column: columnIndex,
-                  })}
-                />
-              </td>
-            ))}
-          </PhantomLine>
-        </tbody>
+                    onKeyDown={onKeyDown({
+                      stopId: "phantom",
+                      column: columnIndex,
+                    })}
+                  />
+                </td>
+              ))}
+            </PhantomLine>
+          </tbody>
+        )}
       </FormSpreadsheet>
       <div className={totalTextStyle}>
         {total.resolved ? `${total.total} tokens` : `${total.text} tokens`}
diff --git a/libs/@hashintel/petrinaut/src/ui/components/ad-hoc-scenario-form/value-editor.tsx b/libs/@hashintel/petrinaut/src/ui/components/ad-hoc-scenario-form/value-editor.tsx
index 84346723256..7bd4b85dc26 100644
--- a/libs/@hashintel/petrinaut/src/ui/components/ad-hoc-scenario-form/value-editor.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/components/ad-hoc-scenario-form/value-editor.tsx
@@ -243,6 +243,12 @@ export interface ValueEditorProps {
    * editing is delegated to the shared column's own editor by the parent.
    */
   derived?: boolean;
+  /**
+   * The cell never opens an editor or accepts an edit — Delete and
+   * type-to-overwrite included — but stays focusable, selectable, and part
+   * of the keyboard walk (the form's run mode).
+   */
+  readOnly?: boolean;
   /** Extra classname for the trigger. */
   className?: string;
   /** Overrides the trigger content (defaults to the expression). */
@@ -402,6 +408,7 @@ export const ValueEditor: React.FC<ValueEditorProps> = ({
   target,
   kind,
   derived = false,
+  readOnly = false,
   className,
   display,
   placeholder,
@@ -580,7 +587,7 @@ export const ValueEditor: React.FC<ValueEditorProps> = ({
   const [seenAutoOpen, setSeenAutoOpen] = useState(autoOpen);
   if (autoOpen !== seenAutoOpen) {
     setSeenAutoOpen(autoOpen);
-    if (autoOpen > 0) {
+    if (autoOpen > 0 && !readOnly) {
       setMountSelection("all");
       setOpenState(true);
     }
@@ -829,7 +836,7 @@ export const ValueEditor: React.FC<ValueEditorProps> = ({
             onOpenDerived?.();
             return;
           }
-          if (triggerActivation.shouldActivate(event)) {
+          if (triggerActivation.shouldActivate(event) && !readOnly) {
             setMountSelection("all");
             setOpenState(true);
           }
@@ -840,14 +847,19 @@ export const ValueEditor: React.FC<ValueEditorProps> = ({
           if (event.key === "Delete" || event.key === "Backspace") {
             event.preventDefault();
             event.stopPropagation();
-            if (!derived && !optimized && value.expression !== "") {
+            if (
+              !derived &&
+              !readOnly &&
+              !optimized &&
+              value.expression !== ""
+            ) {
               dispatch({ type: "setExpression", target, expression: "" });
             }
             return;
           }
           // Typing on a selected cell overwrites it, spreadsheet-style: the
           // typed character replaces the value and the editor opens on it.
-          if (!derived && !optimized && isOverwriteKey(event)) {
+          if (!derived && !readOnly && !optimized && isOverwriteKey(event)) {
             event.preventDefault();
             event.stopPropagation();
             dispatch({
diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/BottomPanel/subviews/scenario-run-state.ts b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/BottomPanel/subviews/scenario-run-state.ts
new file mode 100644
index 00000000000..d123a6eab3b
--- /dev/null
+++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/BottomPanel/subviews/scenario-run-state.ts
@@ -0,0 +1,70 @@
+/**
+ * The pure state behind running a saved ad-hoc scenario from Simulation
+ * Settings: the panel edits a local copy of the scenario's definition whose
+ * only writable slots are the exposed Variables' values, and every edit is
+ * pushed to the run as ordinary scenario-parameter values — the engine
+ * contract (scenario id + parameter values) stays untouched.
+ */
+
+import {
+  adHocExposedParameterIdentifier,
+  synthesizeAdHocScenario,
+} from "@hashintel/petrinaut-core";
+
+import type {
+  AdHocScenarioState,
+  AdHocSynthesisContext,
+} from "@hashintel/petrinaut-core";
+
+/**
+ * The panel's editable copy of a saved ad-hoc definition: each exposed
+ * Variable's expression is seeded from this session's run override where
+ * one exists, so re-selecting the scenario keeps the values the user set.
+ * Engine values are numeric strings (booleans as "1"/"0"); a boolean
+ * Variable's expression gets the literal back.
+ */
+export function seedScenarioRunState(
+  content: AdHocScenarioState,
+  overrides: Record<string, string>,
+): AdHocScenarioState {
+  return {
+    ...content,
+    variables: content.variables.map((variable) => {
+      if (!variable.exposed) {
+        return variable;
+      }
+      const override =
+        overrides[adHocExposedParameterIdentifier(variable.name)];
+      if (override === undefined) {
+        return variable;
+      }
+      const expression =
+        variable.type === "boolean"
+          ? override === "0"
+            ? "false"
+            : "true"
+          : override;
+      return { ...variable, expression };
+    }),
+  };
+}
+
+/**
+ * The run values an edited copy produces: synthesis resolves each exposed
+ * Variable's expression to its scenario parameter's constant. A copy that
+ * does not synthesize (a value mid-edit) produces nothing — the previous
+ * values stand until the expression resolves again.
+ */
+export function scenarioRunParameterValues(
+  state: AdHocScenarioState,
+  context: AdHocSynthesisContext,
+): { identifier: string; value: string }[] {
+  const synthesized = synthesizeAdHocScenario(state, context);
+  if (!synthesized.ok) {
+    return [];
+  }
+  return synthesized.scenario.scenarioParameters.map((parameter) => ({
+    identifier: parameter.identifier,
+    value: String(parameter.default),
+  }));
+}
diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/BottomPanel/subviews/simulation-settings.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/BottomPanel/subviews/simulation-settings.tsx
index d7799401001..fa3a0eb17d7 100644
--- a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/BottomPanel/subviews/simulation-settings.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/BottomPanel/subviews/simulation-settings.tsx
@@ -23,8 +23,13 @@ import {
 import { Slider } from "../../../../../components/slider";
 import { useScrollOverflow } from "../../../../../hooks/use-scroll-overflow";
 import { ViewScenarioDrawer } from "../../SimulateView/scenarios/view-scenario-drawer";
+import {
+  scenarioRunParameterValues,
+  seedScenarioRunState,
+} from "./scenario-run-state";
 
 import type { SubView } from "../../../../../components/sub-view/types";
+import type { AdHocScenarioState } from "@hashintel/petrinaut-core";
 
 // -- Styles -------------------------------------------------------------------
 
@@ -415,6 +420,52 @@ const SimulationSettingsContent: React.FC = () => {
   // the feature.
   const adHocActive = enableAdHocScenarios && !selectedScenario;
 
+  // A selected ad-hoc scenario shows through the form too, in run mode:
+  // the panel edits a local copy whose only writable slots are the exposed
+  // Variables (the scenario's parameters); every edit resolves to ordinary
+  // scenario-parameter values, so the run path is the selected scenario's.
+  const selectedAdHocScenario =
+    enableAdHocScenarios && selectedScenario?.initialState.type === "adhoc"
+      ? selectedScenario
+      : undefined;
+  const [scenarioRun, setScenarioRun] = useState<{
+    scenarioId: string;
+    state: AdHocScenarioState;
+  } | null>(null);
+  if (
+    selectedAdHocScenario &&
+    selectedAdHocScenario.initialState.type === "adhoc" &&
+    scenarioRun?.scenarioId !== selectedAdHocScenario.id
+  ) {
+    setScenarioRun({
+      scenarioId: selectedAdHocScenario.id,
+      state: seedScenarioRunState(
+        selectedAdHocScenario.initialState.content,
+        scenarioParameterValues,
+      ),
+    });
+  }
+  const adHocFormContext = {
+    // The quick-sim embedding sees the overlaid parameters the run compiles
+    // against (the raw panel inputs are hidden while it is live); a selected
+    // scenario keeps the net's own defaults — its overrides rule.
+    netParameters: adHocActive ? adHocNetParameters : globalParameters,
+    places,
+    types: extensions.colors ? types : [],
+  };
+  const onScenarioRunChange = (next: AdHocScenarioState) => {
+    if (!selectedAdHocScenario) {
+      return;
+    }
+    setScenarioRun({ scenarioId: selectedAdHocScenario.id, state: next });
+    for (const { identifier, value } of scenarioRunParameterValues(
+      next,
+      adHocFormContext,
+    )) {
+      setScenarioParameterValue(identifier, value);
+    }
+  };
+
   // When a scenario is selected, show its scenario parameters + overridden net params.
   // When no scenario, show net-level parameters.
   const displayParams: Array<{
@@ -575,14 +626,7 @@ const SimulationSettingsContent: React.FC = () => {
         <AdHocScenarioForm
           state={adHocScenario ?? EMPTY_AD_HOC_STATE}
           onChange={setAdHocScenario}
-          context={{
-            // The overlaid parameters the run compiles against, so the
-            // defaults the form displays are the ones the run resolves —
-            // the raw panel inputs are hidden while this embedding is live.
-            netParameters: adHocNetParameters,
-            places,
-            types: extensions.colors ? types : [],
-          }}
+          context={adHocFormContext}
           selection="none"
           className={adHocFormRootStyle}
           renderLayout={({
@@ -659,6 +703,81 @@ const SimulationSettingsContent: React.FC = () => {
             </div>
           )}
         />
+      ) : selectedAdHocScenario && scenarioRun ? (
+        /* A selected ad-hoc scenario, shown through the form in run mode:
+           the scenario's parameters (its exposed Variables) take value
+           edits in the left column; Parameters and Initial state sit
+           read-only in the right one, still walkable and selectable. */
+        <AdHocScenarioForm
+          state={scenarioRun.state}
+          onChange={onScenarioRunChange}
+          context={adHocFormContext}
+          selection="none"
+          mode="run"
+          className={adHocFormRootStyle}
+          renderLayout={({
+            variables: scenarioParameterRows,
+            parameters: parameterRows,
+            places: placesList,
+          }) => (
+            <div className={cx(containerStyle, adHocColumnsContainerStyle)}>
+              <FormLayoutColumn>
+                <div className={cx(sectionStyle, fillSectionStyle)}>
+                  <ParametersScrollArea>
+                    <div
+                      inert={isSimulationActive}
+                      className={cx(isSimulationActive && lockedFormStyle)}
+                    >
+                      <div className={initialStateTitleRowStyle}>
+                        <div className={sectionTitleStyle}>
+                          Scenario parameters
+                        </div>
+                        <HelpTooltip content="The scenario's tunable parameters. Change a value for this run; the scenario itself stays untouched." />
+                      </div>
+                      {scenarioParameterRows ?? (
+                        <div className={emptyMessageStyle}>
+                          This scenario exposes no parameters
+                        </div>
+                      )}
+                    </div>
+                  </ParametersScrollArea>
+                </div>
+              </FormLayoutColumn>
+              <FormLayoutColumn>
+                <div className={cx(sectionStyle, fillSectionStyle)}>
+                  <ParametersScrollArea>
+                    <div
+                      inert={isSimulationActive}
+                      className={cx(
+                        leftColumnSectionsStyle,
+                        isSimulationActive && lockedFormStyle,
+                      )}
+                    >
+                      <div>
+                        <div className={initialStateTitleRowStyle}>
+                          <div className={sectionTitleStyle}>Parameters</div>
+                          <HelpTooltip content="The parameter overrides the scenario fixes. Read-only here." />
+                        </div>
+                        {parameterRows ?? (
+                          <div className={emptyMessageStyle}>
+                            No parameters defined
+                          </div>
+                        )}
+                      </div>
+                      <div>
+                        <div className={initialStateTitleRowStyle}>
+                          <div className={sectionTitleStyle}>Initial state</div>
+                          <HelpTooltip content="The initial marking the scenario defines. Read-only here." />
+                        </div>
+                        {placesList}
+                      </div>
+                    </div>
+                  </ParametersScrollArea>
+                </div>
+              </FormLayoutColumn>
+            </div>
+          )}
+        />
       ) : (
         <div className={cx(containerStyle, parametersOnlyContainerStyle)}>
           {/* Parameters Section */}
diff --git a/libs/@local/petrinaut-arch-docs/content/ui/ad-hoc-form.mdx b/libs/@local/petrinaut-arch-docs/content/ui/ad-hoc-form.mdx
index b0160edf58a..7368d917e30 100644
--- a/libs/@local/petrinaut-arch-docs/content/ui/ad-hoc-form.mdx
+++ b/libs/@local/petrinaut-arch-docs/content/ui/ad-hoc-form.mdx
@@ -22,7 +22,11 @@ Parameter" toggle (`AdHocVariable.exposed`) — the saved scenario exposes
 those Variables as its tunable parameters. Optimize selections write the
 `optimize` settings object; expose writes the boolean `exposed` flag. In
 that consumer alone the definition persists (see **The persisted format**
-below); everywhere else the generated scenario stays ephemeral.
+below); everywhere else the generated scenario stays ephemeral. A fourth
+consumer reuses the component in `mode="run"`: Simulation Settings with a
+saved ad-hoc scenario selected shows the definition read-only, with only
+the exposed Variables' values editable; each edit resolves to an ordinary
+scenario-parameter value for the run.
 
 The design is the scenario **code editor's model, constrained**: everything
 the form can express synthesizes to code-mode scenario source that the
diff --git a/libs/@local/petrinaut-arch-docs/content/ui/form-interaction-spec.mdx b/libs/@local/petrinaut-arch-docs/content/ui/form-interaction-spec.mdx
index bb07e6586ba..16dff22ce28 100644
--- a/libs/@local/petrinaut-arch-docs/content/ui/form-interaction-spec.mdx
+++ b/libs/@local/petrinaut-arch-docs/content/ui/form-interaction-spec.mdx
@@ -107,6 +107,24 @@ two clicks of a double-click would break click-count activation (rule 3).
     column, entering it at its remembered position. The default stacked
     layout is a single vertical stack chaining top to bottom.
 
+## Run mode
+
+The form's `mode="run"` shows a saved ad-hoc scenario for a run (the
+Simulation Settings panel with an ad-hoc scenario selected).
+
+14a. Only the exposed top-level Variables render, as scenario parameters:
+static name, static type, editable value. Auxiliary top-level and per-place
+Variables do not render at all.
+
+14b. Every other cell is read-only: activation selects but opens no editor,
+Delete clears nothing, typing overwrites nothing, and the structural
+affordances (phantom lines, row menus, the dots affordance, column-share
+toggles) are gone or inert.
+
+14c. Read-only cells stay focusable and selectable, and the keyboard walk is
+the author mode's: grids, gutters, headers, and columns move exactly as they
+do when editing.
+
 ## The editor slab
 
 Opening a value cell replaces it in place with a fixed-position slab: a path

From 81ea1645bf1472d2da053a8e1879bcdc1c216ad8 Mon Sep 17 00:00:00 2001
From: Chris Feijoo <chris@kube.io>
Date: Sun, 30 Aug 2026 18:50:08 +0200
Subject: [PATCH 07/17] FE-1517: Classic scenarios run through the form with a
 materialized preview

---
 libs/@hashintel/petrinaut-core/src/index.ts   |   8 +
 .../ad-hoc/materialize-run-state.test.ts      | 193 ++++++++++++++++
 .../scenario/ad-hoc/materialize-run-state.ts  | 210 ++++++++++++++++++
 libs/@hashintel/petrinaut/docs/simulation.md  |   2 +-
 .../subviews/simulation-settings.tsx          | 179 ++++++++++++++-
 .../content/ui/ad-hoc-form.mdx                |  13 +-
 6 files changed, 595 insertions(+), 10 deletions(-)
 create mode 100644 libs/@hashintel/petrinaut-core/src/simulation/authoring/scenario/ad-hoc/materialize-run-state.test.ts
 create mode 100644 libs/@hashintel/petrinaut-core/src/simulation/authoring/scenario/ad-hoc/materialize-run-state.ts

diff --git a/libs/@hashintel/petrinaut-core/src/index.ts b/libs/@hashintel/petrinaut-core/src/index.ts
index 12521a63b30..3ebc9879efa 100644
--- a/libs/@hashintel/petrinaut-core/src/index.ts
+++ b/libs/@hashintel/petrinaut-core/src/index.ts
@@ -474,6 +474,14 @@ export {
   type AdHocActionInput,
   type AdHocActionName,
 } from "./simulation/authoring/scenario/ad-hoc/ad-hoc-actions";
+export {
+  CLASSIC_RUN_ROW_CAP,
+  classicRunParameterValues,
+  classicRunVariables,
+  classicScenarioRunState,
+  initialMarkingToAdHocPlaces,
+  type TruncatedPlace,
+} from "./simulation/authoring/scenario/ad-hoc/materialize-run-state";
 export { adHocScenarioStateSchema } from "./simulation/authoring/scenario/ad-hoc/ad-hoc-state-schema";
 export { createHirMetricEvaluator } from "./simulation/frames/hir-metric";
 export {
diff --git a/libs/@hashintel/petrinaut-core/src/simulation/authoring/scenario/ad-hoc/materialize-run-state.test.ts b/libs/@hashintel/petrinaut-core/src/simulation/authoring/scenario/ad-hoc/materialize-run-state.test.ts
new file mode 100644
index 00000000000..d34f47ce69b
--- /dev/null
+++ b/libs/@hashintel/petrinaut-core/src/simulation/authoring/scenario/ad-hoc/materialize-run-state.test.ts
@@ -0,0 +1,193 @@
+import { describe, expect, it } from "vitest";
+
+import {
+  classicRunParameterValues,
+  classicRunVariables,
+  classicScenarioRunState,
+  initialMarkingToAdHocPlaces,
+} from "./materialize-run-state";
+
+import type { InitialMarking } from "../../../api";
+import type { Color, Place, Scenario } from "../../../../types/sdcpn";
+
+const place = (id: string, name: string, colorId: string | null): Place => ({
+  id,
+  name,
+  colorId,
+  dynamicsEnabled: false,
+  differentialEquationId: null,
+  x: 0,
+  y: 0,
+});
+
+const SATELLITE: Color = {
+  id: "colour-satellite",
+  name: "Satellite",
+  iconSlug: "circle",
+  displayColor: "#3676b8",
+  elements: [
+    { elementId: "e1", name: "altitude", type: "real" },
+    { elementId: "e2", name: "active", type: "boolean" },
+    { elementId: "e3", name: "tag", type: "uuid" },
+  ],
+};
+
+const CONTEXT = {
+  places: [
+    place("place-space", "Space", "colour-satellite"),
+    place("place-debris", "Debris", null),
+  ],
+  types: [SATELLITE],
+};
+
+const SCENARIO: Scenario = {
+  id: "scenario-moon",
+  name: "Moon Orbit",
+  scenarioParameters: [
+    { type: "real", identifier: "launch_rate", default: 0.3 },
+    { type: "integer", identifier: "initialAltitude", default: 20 },
+    { type: "boolean", identifier: "night_mode", default: 0 },
+    { type: "ratio", identifier: "mix", default: 0.5 },
+  ],
+  parameterOverrides: { "param-gravity": "9.81" },
+  initialState: { type: "code", content: "return {};" },
+};
+
+describe("initialMarkingToAdHocPlaces", () => {
+  const marking: InitialMarking = {
+    "place-space": [
+      { altitude: 400, active: true, tag: "0000-aa" },
+      { altitude: 550.5, active: false, tag: "0000-bb" },
+    ],
+    "place-debris": 40,
+  };
+
+  it("converts tokens to literal fixed rows in colour-element order", () => {
+    const { places, truncated } = initialMarkingToAdHocPlaces(
+      marking,
+      CONTEXT,
+    );
+    expect(truncated).toEqual([]);
+    const space = places["place-space"]!;
+    expect(space.kind).toBe("coloured");
+    if (space.kind !== "coloured") {
+      return;
+    }
+    expect(space.rows).toHaveLength(2);
+    expect(space.rows[0]!.kind).toBe("fixed");
+    expect(space.rows[0]!.cells.map((cell) => cell.expression)).toEqual([
+      "400",
+      "true",
+      '"0000-aa"',
+    ]);
+    expect(space.rows[1]!.cells[1]!.expression).toBe("false");
+    expect(space.variables).toEqual([]);
+  });
+
+  it("converts counts to literal uncoloured states", () => {
+    const { places } = initialMarkingToAdHocPlaces(marking, CONTEXT);
+    const debris = places["place-debris"]!;
+    expect(debris.kind).toBe("uncoloured");
+    if (debris.kind === "uncoloured") {
+      expect(debris.count.expression).toBe("40");
+    }
+  });
+
+  it("caps rows per place and reports the cut", () => {
+    const long: InitialMarking = {
+      "place-space": Array.from({ length: 130 }, (_, index) => ({
+        altitude: index,
+        active: false,
+        tag: "t",
+      })),
+    };
+    const { places, truncated } = initialMarkingToAdHocPlaces(long, CONTEXT);
+    const space = places["place-space"]!;
+    expect(space.kind === "coloured" && space.rows.length).toBe(100);
+    expect(truncated).toEqual([
+      { placeName: "Space", shown: 100, total: 130 },
+    ]);
+  });
+
+  it("skips places absent from the marking", () => {
+    const { places } = initialMarkingToAdHocPlaces(
+      { "place-debris": 0 },
+      CONTEXT,
+    );
+    expect(places["place-space"]).toBeUndefined();
+  });
+});
+
+describe("classicRunVariables", () => {
+  it("names Variables by the identifier verbatim and seeds overrides", () => {
+    const variables = classicRunVariables(SCENARIO, {
+      initialAltitude: "35",
+      night_mode: "1",
+    });
+    expect(variables.map((variable) => variable.name)).toEqual([
+      "launch_rate",
+      "initialAltitude",
+      "night_mode",
+      "mix",
+    ]);
+    expect(variables[0]).toMatchObject({
+      type: "real",
+      expression: "0.3",
+      exposed: true,
+    });
+    expect(variables[1]!.expression).toBe("35");
+    expect(variables[2]).toMatchObject({ type: "boolean", expression: "true" });
+    expect(variables[3]).toMatchObject({ type: "real", expression: "0.5" });
+  });
+});
+
+describe("classicScenarioRunState", () => {
+  it("carries overrides and the materialized marking", () => {
+    const { state } = classicScenarioRunState(
+      SCENARIO,
+      { "place-debris": 3 },
+      CONTEXT,
+      {},
+    );
+    expect(state.netParameters).toEqual([
+      { parameterId: "param-gravity", expression: "9.81", optimize: null },
+    ]);
+    expect(state.places["place-debris"]).toBeDefined();
+    expect(state.variables).toHaveLength(4);
+  });
+});
+
+describe("classicRunParameterValues", () => {
+  const stateWith = (expressions: Record<string, string>) => ({
+    variables: classicRunVariables(SCENARIO, {}).map((variable) =>
+      Object.prototype.hasOwnProperty.call(expressions, variable.name)
+        ? { ...variable, expression: expressions[variable.name]! }
+        : variable,
+    ),
+    netParameters: [],
+    places: {},
+  });
+
+  it("pushes literal values under the classic identifiers", () => {
+    const values = classicRunParameterValues(
+      stateWith({ initialAltitude: "42", night_mode: "true" }),
+      SCENARIO,
+    );
+    expect(values).toContainEqual({ identifier: "initialAltitude", value: "42" });
+    expect(values).toContainEqual({ identifier: "night_mode", value: "1" });
+    expect(values).toContainEqual({ identifier: "launch_rate", value: "0.3" });
+  });
+
+  it("skips non-literal expressions so the previous value stands", () => {
+    const values = classicRunParameterValues(
+      stateWith({ initialAltitude: "42 +", night_mode: "maybe" }),
+      SCENARIO,
+    );
+    expect(
+      values.find((value) => value.identifier === "initialAltitude"),
+    ).toBeUndefined();
+    expect(
+      values.find((value) => value.identifier === "night_mode"),
+    ).toBeUndefined();
+  });
+});
diff --git a/libs/@hashintel/petrinaut-core/src/simulation/authoring/scenario/ad-hoc/materialize-run-state.ts b/libs/@hashintel/petrinaut-core/src/simulation/authoring/scenario/ad-hoc/materialize-run-state.ts
new file mode 100644
index 00000000000..0c0643589c1
--- /dev/null
+++ b/libs/@hashintel/petrinaut-core/src/simulation/authoring/scenario/ad-hoc/materialize-run-state.ts
@@ -0,0 +1,210 @@
+/**
+ * A classic scenario shown through the ad-hoc form: Simulation Settings
+ * renders every selected scenario in the form's run mode, and a scenario
+ * that was not authored ad-hoc has no `AdHocScenarioState` to show — so one
+ * is materialized from what the run will actually start with. The compiled
+ * initial marking (`compileScenario`) becomes literal read-only token rows,
+ * the scenario's parameter overrides become read-only parameter entries,
+ * and its scenario parameters become the editable exposed Variables.
+ *
+ * Classic scenario parameter identifiers are used verbatim as the Variable
+ * names, so value pushes never route through the ad-hoc snake_case name
+ * mapping — a camelCase identifier must round-trip unchanged.
+ */
+
+import type { InitialMarking } from "../../../api";
+import type {
+  AdHocPlaceState,
+  AdHocScenarioState,
+  AdHocVariable,
+  Color,
+  Place,
+  Scenario,
+} from "../../../../types/sdcpn";
+
+/** Places longer than this render only their first rows in the preview. */
+export const CLASSIC_RUN_ROW_CAP = 100;
+
+export type MaterializeContext = {
+  places: Place[];
+  types: Color[];
+};
+
+export type TruncatedPlace = {
+  placeName: string;
+  shown: number;
+  total: number;
+};
+
+function literalExpression(value: number | boolean | bigint | string): string {
+  switch (typeof value) {
+    case "number":
+      return String(value);
+    case "bigint":
+      return value.toString();
+    case "boolean":
+      return value ? "true" : "false";
+    default:
+      return JSON.stringify(value);
+  }
+}
+
+/**
+ * Converts a compiled initial marking into read-only ad-hoc place states:
+ * one fixed row per token, cells ordered by the colour's elements, counts
+ * as literals. Rows beyond {@link CLASSIC_RUN_ROW_CAP} are dropped and the
+ * cut is reported, so the caller can say what the preview omits.
+ */
+export function initialMarkingToAdHocPlaces(
+  marking: InitialMarking,
+  context: MaterializeContext,
+  rowCap: number = CLASSIC_RUN_ROW_CAP,
+): { places: Record<string, AdHocPlaceState>; truncated: TruncatedPlace[] } {
+  const places: Record<string, AdHocPlaceState> = {};
+  const truncated: TruncatedPlace[] = [];
+  for (const place of context.places) {
+    const entry = Object.prototype.hasOwnProperty.call(marking, place.id)
+      ? marking[place.id]
+      : undefined;
+    if (entry === undefined) {
+      continue;
+    }
+    if (typeof entry === "number") {
+      places[place.id] = {
+        kind: "uncoloured",
+        count: { expression: literalExpression(entry), optimize: null },
+      };
+      continue;
+    }
+    const colour = context.types.find((type) => type.id === place.colorId);
+    if (!colour) {
+      continue;
+    }
+    const shown = entry.slice(0, rowCap);
+    if (entry.length > shown.length) {
+      truncated.push({
+        placeName: place.name,
+        shown: shown.length,
+        total: entry.length,
+      });
+    }
+    places[place.id] = {
+      kind: "coloured",
+      variables: [],
+      rows: shown.map((token) => ({
+        kind: "fixed",
+        cells: colour.elements.map((element) => ({
+          expression: literalExpression(
+            token[element.name] ?? (element.type === "boolean" ? false : 0),
+          ),
+          optimize: null,
+        })),
+      })),
+      sharedColumns: {},
+    };
+  }
+  return { places, truncated };
+}
+
+const variableType = (
+  type: Scenario["scenarioParameters"][number]["type"],
+): AdHocVariable["type"] => (type === "ratio" ? "real" : type);
+
+/**
+ * The editable half of the pseudo-state: one exposed Variable per scenario
+ * parameter, named by the parameter's identifier verbatim, seeded from this
+ * run's override where one exists (engine values are numeric strings;
+ * booleans arrive as "1"/"0" and become literals).
+ */
+export function classicRunVariables(
+  scenario: Scenario,
+  overrides: Readonly<Record<string, string>>,
+): AdHocVariable[] {
+  return scenario.scenarioParameters
+    .filter((parameter) => parameter.identifier.trim() !== "")
+    .map((parameter) => {
+      const override = Object.prototype.hasOwnProperty.call(
+        overrides,
+        parameter.identifier,
+      )
+        ? overrides[parameter.identifier]
+        : undefined;
+      const numeric = override ?? String(parameter.default);
+      const expression =
+        parameter.type === "boolean"
+          ? Number(numeric) === 0
+            ? "false"
+            : "true"
+          : numeric;
+      return {
+        name: parameter.identifier,
+        type: variableType(parameter.type),
+        expression,
+        exposed: true,
+        optimize: null,
+      };
+    });
+}
+
+/**
+ * The full pseudo-state the form renders for a classic scenario: editable
+ * scenario parameters, read-only parameter overrides, and the materialized
+ * initial state.
+ */
+export function classicScenarioRunState(
+  scenario: Scenario,
+  marking: InitialMarking,
+  context: MaterializeContext,
+  overrides: Readonly<Record<string, string>>,
+): { state: AdHocScenarioState; truncated: TruncatedPlace[] } {
+  const { places, truncated } = initialMarkingToAdHocPlaces(marking, context);
+  return {
+    state: {
+      variables: classicRunVariables(scenario, overrides),
+      netParameters: Object.entries(scenario.parameterOverrides).map(
+        ([parameterId, expression]) => ({
+          parameterId,
+          expression,
+          optimize: null,
+        }),
+      ),
+      places,
+    },
+    truncated,
+  };
+}
+
+/**
+ * The run values an edited pseudo-state produces, keyed by the classic
+ * identifiers. Only literal values push (`12`, `0.5`, `true`) — an
+ * expression mid-edit produces nothing, and the previous value stands until
+ * the text is a literal again.
+ */
+export function classicRunParameterValues(
+  state: AdHocScenarioState,
+  scenario: Scenario,
+): { identifier: string; value: string }[] {
+  const values: { identifier: string; value: string }[] = [];
+  for (const parameter of scenario.scenarioParameters) {
+    const variable = state.variables.find(
+      (candidate) => candidate.name === parameter.identifier,
+    );
+    if (!variable) {
+      continue;
+    }
+    const text = variable.expression.trim();
+    if (parameter.type === "boolean") {
+      if (text === "true" || text === "false") {
+        values.push({
+          identifier: parameter.identifier,
+          value: text === "true" ? "1" : "0",
+        });
+      }
+      continue;
+    }
+    if (text !== "" && Number.isFinite(Number(text))) {
+      values.push({ identifier: parameter.identifier, value: text });
+    }
+  }
+  return values;
+}
diff --git a/libs/@hashintel/petrinaut/docs/simulation.md b/libs/@hashintel/petrinaut/docs/simulation.md
index b99238f5b95..0157d283d5e 100644
--- a/libs/@hashintel/petrinaut/docs/simulation.md
+++ b/libs/@hashintel/petrinaut/docs/simulation.md
@@ -32,7 +32,7 @@ Quick-action buttons next to the picker let you edit the selected scenario, crea
 Override values for this run:
 
 - With **No scenario** selected: each [net-level parameter](petri-net-extensions.md#global-parameters) shows its name and variable name. Boolean parameters use a toggle; real and integer parameters use a numeric input pre-filled with the default.
-- With a scenario selected: the **scenario parameters** are shown instead, pre-filled with that scenario's defaults. Net-level parameter values are fixed by the scenario's [parameter bindings](scenarios.md#parameter-bindings) and are not editable here. A scenario saved from the [ad-hoc form](ad-hoc-scenarios.md) shows through that form instead: its scenario parameters take value edits in the left column, and its parameter overrides and initial state sit read-only in the right one -- browsable with the same keyboard navigation, but only a scenario edit (the pencil next to the picker) changes them.
+- With a scenario selected: the **scenario parameters** are shown instead, pre-filled with that scenario's defaults. Net-level parameter values are fixed by the scenario's [parameter bindings](scenarios.md#parameter-bindings) and are not editable here. Every selected scenario shows through the [ad-hoc form](ad-hoc-scenarios.md): its scenario parameters take value edits in the left column, and its parameter overrides and initial state sit read-only in the right one -- browsable with the same keyboard navigation, but only a scenario edit (the pencil next to the picker) changes them. A scenario saved from the ad-hoc form shows its definition; any other scenario shows a computed preview of the exact tokens the run will start with, recomputed as you change parameter values (very large places preview their first 100 rows).
 
 Changes here do not modify the parameter definition or the scenario -- they only apply to the simulation. Parameter values are locked while a simulation is running. Reset the simulation to change them.
 
diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/BottomPanel/subviews/simulation-settings.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/BottomPanel/subviews/simulation-settings.tsx
index fa3a0eb17d7..62c8560654c 100644
--- a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/BottomPanel/subviews/simulation-settings.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/BottomPanel/subviews/simulation-settings.tsx
@@ -10,9 +10,17 @@ import {
   Toggle,
 } from "@hashintel/ds-components";
 import { css, cva, cx } from "@hashintel/ds-helpers/css";
-import { EMPTY_AD_HOC_STATE } from "@hashintel/petrinaut-core";
+import {
+  classicRunParameterValues,
+  classicRunVariables,
+  classicScenarioRunState,
+  compileScenario,
+  createUserKeyedRecord,
+  EMPTY_AD_HOC_STATE,
+} from "@hashintel/petrinaut-core";
 
 import { SimulationContext } from "../../../../../../react/simulation/context";
+import { useScenarioHir } from "../../../../../../react/simulation/use-scenario-hir";
 import { EditorContext } from "../../../../../../react/state/editor-context";
 import { SDCPNContext } from "../../../../../../react/state/sdcpn-context";
 import { UserSettingsContext } from "../../../../../../react/state/user-settings-context";
@@ -313,6 +321,20 @@ const emptyMessageStyle = css({
   fontStyle: "italic",
 });
 
+// The classic-scenario preview's status line: why the Initial state section
+// is not (fully) showing yet — compiling, a compilation error, or a row cap.
+const runNoticeStyle = css({
+  fontSize: "xs",
+  color: "neutral.s90",
+  backgroundColor: "[rgb(217 119 6 / 0.08)]",
+  border: "1px solid",
+  borderColor: "[rgb(217 119 6 / 0.35)]",
+  borderRadius: "sm",
+  paddingX: "2",
+  paddingY: "1.5",
+  marginBottom: "2",
+});
+
 // Error callout shown when the selected scenario fails to compile, so a
 // broken scenario is never silently ignored. It docks at the panel's bottom,
 // below the columns: appearing takes height from the content grid — whose
@@ -428,6 +450,15 @@ const SimulationSettingsContent: React.FC = () => {
     enableAdHocScenarios && selectedScenario?.initialState.type === "adhoc"
       ? selectedScenario
       : undefined;
+  // Any other selected scenario shows through the same form: its scenario
+  // parameters stay editable, and the right column previews the state the
+  // run will actually start with — the compiled initial marking,
+  // materialized into literal read-only rows.
+  const selectedClassicScenario =
+    enableAdHocScenarios && selectedScenario && !selectedAdHocScenario
+      ? selectedScenario
+      : undefined;
+  const classicHir = useScenarioHir(selectedClassicScenario);
   const [scenarioRun, setScenarioRun] = useState<{
     scenarioId: string;
     state: AdHocScenarioState;
@@ -445,6 +476,24 @@ const SimulationSettingsContent: React.FC = () => {
       ),
     });
   }
+  if (
+    selectedClassicScenario &&
+    scenarioRun?.scenarioId !== selectedClassicScenario.id
+  ) {
+    // Only the Variables (the editable scenario parameters) live in local
+    // state; the overrides and places are derived from compilation below.
+    setScenarioRun({
+      scenarioId: selectedClassicScenario.id,
+      state: {
+        variables: classicRunVariables(
+          selectedClassicScenario,
+          scenarioParameterValues,
+        ),
+        netParameters: [],
+        places: {},
+      },
+    });
+  }
   const adHocFormContext = {
     // The quick-sim embedding sees the overlaid parameters the run compiles
     // against (the raw panel inputs are hidden while it is live); a selected
@@ -465,6 +514,121 @@ const SimulationSettingsContent: React.FC = () => {
       setScenarioParameterValue(identifier, value);
     }
   };
+  const onClassicRunChange = (next: AdHocScenarioState) => {
+    if (!selectedClassicScenario) {
+      return;
+    }
+    setScenarioRun({
+      scenarioId: selectedClassicScenario.id,
+      state: { variables: next.variables, netParameters: [], places: {} },
+    });
+    for (const { identifier, value } of classicRunParameterValues(
+      next,
+      selectedClassicScenario,
+    )) {
+      setScenarioParameterValue(identifier, value);
+    }
+  };
+
+  // What the run-mode branch renders, for either scenario kind. A classic
+  // scenario's places come from compiling its initial state with the
+  // current parameter values; until that preview is ready (or when it
+  // fails) the notice explains and the Initial state section stays empty.
+  const scenarioRunView: {
+    state: AdHocScenarioState;
+    onChange: (next: AdHocScenarioState) => void;
+    notice: string | null;
+    previewReady: boolean;
+  } | null = (() => {
+    if (
+      selectedAdHocScenario &&
+      scenarioRun?.scenarioId === selectedAdHocScenario.id
+    ) {
+      return {
+        state: scenarioRun.state,
+        onChange: onScenarioRunChange,
+        notice: null,
+        previewReady: true,
+      };
+    }
+    if (
+      !selectedClassicScenario ||
+      scenarioRun?.scenarioId !== selectedClassicScenario.id
+    ) {
+      return null;
+    }
+    const withoutPreview = (notice: string) => ({
+      state: {
+        variables: scenarioRun.state.variables,
+        netParameters: Object.entries(
+          selectedClassicScenario.parameterOverrides,
+        ).map(([parameterId, expression]) => ({
+          parameterId,
+          expression,
+          optimize: null,
+        })),
+        places: {},
+      },
+      onChange: onClassicRunChange,
+      notice,
+      previewReady: false,
+    });
+    if (classicHir.error !== null) {
+      return withoutPreview(
+        `The initial state preview could not be compiled: ${classicHir.error}`,
+      );
+    }
+    if (classicHir.hir === null) {
+      return withoutPreview("Compiling the initial state preview…");
+    }
+    const numericValues = createUserKeyedRecord<number>();
+    for (const [identifier, value] of Object.entries(
+      scenarioParameterValues,
+    )) {
+      const parsed = Number(value);
+      if (Number.isFinite(parsed)) {
+        numericValues[identifier] = parsed;
+      }
+    }
+    const outcome = compileScenario(
+      selectedClassicScenario,
+      classicHir.hir,
+      globalParameters,
+      places,
+      adHocFormContext.types,
+      { scenarioParameterValues: numericValues },
+    );
+    if (!outcome.ok) {
+      return withoutPreview(
+        `The initial state preview could not be computed: ${outcome.errors
+          .map((error) => error.message)
+          .join(" · ")}`,
+      );
+    }
+    const materialized = classicScenarioRunState(
+      selectedClassicScenario,
+      outcome.result.initialState,
+      { places, types: adHocFormContext.types },
+      scenarioParameterValues,
+    );
+    return {
+      state: {
+        ...materialized.state,
+        variables: scenarioRun.state.variables,
+      },
+      onChange: onClassicRunChange,
+      notice:
+        materialized.truncated.length > 0
+          ? `Preview truncated: ${materialized.truncated
+              .map(
+                (cut) =>
+                  `${cut.placeName} shows ${cut.shown} of ${cut.total} rows`,
+              )
+              .join(" · ")}`
+          : null,
+      previewReady: true,
+    };
+  })();
 
   // When a scenario is selected, show its scenario parameters + overridden net params.
   // When no scenario, show net-level parameters.
@@ -703,14 +867,14 @@ const SimulationSettingsContent: React.FC = () => {
             </div>
           )}
         />
-      ) : selectedAdHocScenario && scenarioRun ? (
+      ) : scenarioRunView ? (
         /* A selected ad-hoc scenario, shown through the form in run mode:
            the scenario's parameters (its exposed Variables) take value
            edits in the left column; Parameters and Initial state sit
            read-only in the right one, still walkable and selectable. */
         <AdHocScenarioForm
-          state={scenarioRun.state}
-          onChange={onScenarioRunChange}
+          state={scenarioRunView.state}
+          onChange={scenarioRunView.onChange}
           context={adHocFormContext}
           selection="none"
           mode="run"
@@ -769,7 +933,12 @@ const SimulationSettingsContent: React.FC = () => {
                           <div className={sectionTitleStyle}>Initial state</div>
                           <HelpTooltip content="The initial marking the scenario defines. Read-only here." />
                         </div>
-                        {placesList}
+                        {scenarioRunView.notice === null ? null : (
+                          <div className={runNoticeStyle}>
+                            {scenarioRunView.notice}
+                          </div>
+                        )}
+                        {scenarioRunView.previewReady ? placesList : null}
                       </div>
                     </div>
                   </ParametersScrollArea>
diff --git a/libs/@local/petrinaut-arch-docs/content/ui/ad-hoc-form.mdx b/libs/@local/petrinaut-arch-docs/content/ui/ad-hoc-form.mdx
index 7368d917e30..7030931bee4 100644
--- a/libs/@local/petrinaut-arch-docs/content/ui/ad-hoc-form.mdx
+++ b/libs/@local/petrinaut-arch-docs/content/ui/ad-hoc-form.mdx
@@ -23,10 +23,15 @@ those Variables as its tunable parameters. Optimize selections write the
 `optimize` settings object; expose writes the boolean `exposed` flag. In
 that consumer alone the definition persists (see **The persisted format**
 below); everywhere else the generated scenario stays ephemeral. A fourth
-consumer reuses the component in `mode="run"`: Simulation Settings with a
-saved ad-hoc scenario selected shows the definition read-only, with only
-the exposed Variables' values editable; each edit resolves to an ordinary
-scenario-parameter value for the run.
+consumer reuses the component in `mode="run"`: Simulation Settings shows
+every selected scenario through the form read-only, with only the scenario
+parameters' values editable; each edit resolves to an ordinary
+scenario-parameter value for the run. An ad-hoc scenario renders its stored
+definition; a classic (`code` or `per_place`) scenario has none, so its
+compiled initial marking is materialized into literal fixed rows
+(`classicScenarioRunState` in petrinaut-core), recomputed per parameter
+edit and capped per place, with the scenario parameters named by their
+identifiers verbatim so value pushes bypass the ad-hoc snake_case mapping.
 
 The design is the scenario **code editor's model, constrained**: everything
 the form can express synthesizes to code-mode scenario source that the

From f865a2d5c605d00e39c88522fc35833b7e659098 Mon Sep 17 00:00:00 2001
From: Chris Feijoo <chris@kube.io>
Date: Sun, 30 Aug 2026 20:33:03 +0200
Subject: [PATCH 08/17] FE-1517: Experiments show the scenario through the form
 with a computed-state preview

---
 .../ad-hoc/materialize-run-state.test.ts      |  16 +-
 .../scenario/ad-hoc/materialize-run-state.ts  |   2 +-
 libs/@hashintel/petrinaut/docs/experiments.md |   2 +
 .../subviews/simulation-settings.tsx          |   4 +-
 .../experiments/create-experiment-drawer.tsx  |  28 ++-
 .../experiments/experiment-scenario-run.tsx   | 226 ++++++++++++++++++
 .../content/ui/ad-hoc-form.mdx                |  10 +-
 7 files changed, 270 insertions(+), 18 deletions(-)
 create mode 100644 libs/@hashintel/petrinaut/src/ui/views/Editor/panels/SimulateView/experiments/experiment-scenario-run.tsx

diff --git a/libs/@hashintel/petrinaut-core/src/simulation/authoring/scenario/ad-hoc/materialize-run-state.test.ts b/libs/@hashintel/petrinaut-core/src/simulation/authoring/scenario/ad-hoc/materialize-run-state.test.ts
index d34f47ce69b..8ce39e9f0d7 100644
--- a/libs/@hashintel/petrinaut-core/src/simulation/authoring/scenario/ad-hoc/materialize-run-state.test.ts
+++ b/libs/@hashintel/petrinaut-core/src/simulation/authoring/scenario/ad-hoc/materialize-run-state.test.ts
@@ -7,8 +7,8 @@ import {
   initialMarkingToAdHocPlaces,
 } from "./materialize-run-state";
 
-import type { InitialMarking } from "../../../api";
 import type { Color, Place, Scenario } from "../../../../types/sdcpn";
+import type { InitialMarking } from "../../../api";
 
 const place = (id: string, name: string, colorId: string | null): Place => ({
   id,
@@ -63,10 +63,7 @@ describe("initialMarkingToAdHocPlaces", () => {
   };
 
   it("converts tokens to literal fixed rows in colour-element order", () => {
-    const { places, truncated } = initialMarkingToAdHocPlaces(
-      marking,
-      CONTEXT,
-    );
+    const { places, truncated } = initialMarkingToAdHocPlaces(marking, CONTEXT);
     expect(truncated).toEqual([]);
     const space = places["place-space"]!;
     expect(space.kind).toBe("coloured");
@@ -104,9 +101,7 @@ describe("initialMarkingToAdHocPlaces", () => {
     const { places, truncated } = initialMarkingToAdHocPlaces(long, CONTEXT);
     const space = places["place-space"]!;
     expect(space.kind === "coloured" && space.rows.length).toBe(100);
-    expect(truncated).toEqual([
-      { placeName: "Space", shown: 100, total: 130 },
-    ]);
+    expect(truncated).toEqual([{ placeName: "Space", shown: 100, total: 130 }]);
   });
 
   it("skips places absent from the marking", () => {
@@ -173,7 +168,10 @@ describe("classicRunParameterValues", () => {
       stateWith({ initialAltitude: "42", night_mode: "true" }),
       SCENARIO,
     );
-    expect(values).toContainEqual({ identifier: "initialAltitude", value: "42" });
+    expect(values).toContainEqual({
+      identifier: "initialAltitude",
+      value: "42",
+    });
     expect(values).toContainEqual({ identifier: "night_mode", value: "1" });
     expect(values).toContainEqual({ identifier: "launch_rate", value: "0.3" });
   });
diff --git a/libs/@hashintel/petrinaut-core/src/simulation/authoring/scenario/ad-hoc/materialize-run-state.ts b/libs/@hashintel/petrinaut-core/src/simulation/authoring/scenario/ad-hoc/materialize-run-state.ts
index 0c0643589c1..0d0a6b0114d 100644
--- a/libs/@hashintel/petrinaut-core/src/simulation/authoring/scenario/ad-hoc/materialize-run-state.ts
+++ b/libs/@hashintel/petrinaut-core/src/simulation/authoring/scenario/ad-hoc/materialize-run-state.ts
@@ -12,7 +12,6 @@
  * mapping — a camelCase identifier must round-trip unchanged.
  */
 
-import type { InitialMarking } from "../../../api";
 import type {
   AdHocPlaceState,
   AdHocScenarioState,
@@ -21,6 +20,7 @@ import type {
   Place,
   Scenario,
 } from "../../../../types/sdcpn";
+import type { InitialMarking } from "../../../api";
 
 /** Places longer than this render only their first rows in the preview. */
 export const CLASSIC_RUN_ROW_CAP = 100;
diff --git a/libs/@hashintel/petrinaut/docs/experiments.md b/libs/@hashintel/petrinaut/docs/experiments.md
index a752a2896f8..147ac77bd69 100644
--- a/libs/@hashintel/petrinaut/docs/experiments.md
+++ b/libs/@hashintel/petrinaut/docs/experiments.md
@@ -20,6 +20,8 @@ Experiments live under the **Simulate** [global mode](drawing-a-net.md#global-mo
 | **Scenario parameters** | each scenario parameter's default | When a scenario is selected, you can override its scenario parameters per experiment. Expressions are evaluated once at start.                                                                                     |
 
 With "No scenario" selected, the Scenario section shows the [ad-hoc scenario form](ad-hoc-scenarios.md): define the initial state and parameter values inline for this experiment, without saving a scenario. Left untouched, the experiment runs from the manually-set markings and defaults as before. The experiments table shows "Ad-hoc scenario" in its Scenario column for such runs.
+
+With a scenario selected (and ad-hoc scenarios enabled), the Scenario section shows it through the same form: the scenario parameters take value edits in worksheet style, and a collapsed **Computed state** sub-section underneath previews the exact parameter values and initial tokens each run will start with -- computed only when you open it, and recomputed as you change the values above.
 | **Runs** | `1000` | Positive integer; how many independent simulations to run. |
 | **Time step (dt)** | `0.1` | Same meaning as in single-run simulations (see [Simulation](simulation.md#time-step-dt)). |
 | **Max time (seconds)** | `180` | Each run advances until simulation time reaches this value, then completes. |
diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/BottomPanel/subviews/simulation-settings.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/BottomPanel/subviews/simulation-settings.tsx
index 62c8560654c..b990d7c8721 100644
--- a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/BottomPanel/subviews/simulation-settings.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/BottomPanel/subviews/simulation-settings.tsx
@@ -582,9 +582,7 @@ const SimulationSettingsContent: React.FC = () => {
       return withoutPreview("Compiling the initial state preview…");
     }
     const numericValues = createUserKeyedRecord<number>();
-    for (const [identifier, value] of Object.entries(
-      scenarioParameterValues,
-    )) {
+    for (const [identifier, value] of Object.entries(scenarioParameterValues)) {
       const parsed = Number(value);
       if (Number.isFinite(parsed)) {
         numericValues[identifier] = parsed;
diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/SimulateView/experiments/create-experiment-drawer.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/SimulateView/experiments/create-experiment-drawer.tsx
index cd7122cea06..e7f5f45c7fe 100644
--- a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/SimulateView/experiments/create-experiment-drawer.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/SimulateView/experiments/create-experiment-drawer.tsx
@@ -41,6 +41,7 @@ import {
   getExperimentMetricDiagnosticError,
   type MetricLspDiagnosticSummary,
 } from "./experiment-metric-lsp-validation";
+import { ExperimentScenarioRun } from "./experiment-scenario-run";
 
 import type {
   AdHocScenarioState,
@@ -1071,7 +1072,32 @@ export const CreateExperimentDrawer = ({
             </div>
 
             {selectedScenario ? (
-              selectedScenario.scenarioParameters.length === 0 ? (
+              enableAdHocScenarios ? (
+                // The selected scenario shows through the ad-hoc form in run
+                // mode: scenario parameters editable in worksheet style, and
+                // a collapsed "Computed state" preview of the exact values
+                // and tokens each run starts with.
+                <ExperimentScenarioRun
+                  scenario={selectedScenario}
+                  context={{
+                    netParameters: extensions.parameters
+                      ? petriNetDefinition.parameters
+                      : [],
+                    places: petriNetDefinition.places,
+                    types: extensions.colors ? petriNetDefinition.types : [],
+                  }}
+                  values={paramValues}
+                  onValuesChange={(updates) =>
+                    setParamValues((prev) => {
+                      const next = { ...prev };
+                      for (const update of updates) {
+                        next[update.identifier] = update.value;
+                      }
+                      return next;
+                    })
+                  }
+                />
+              ) : selectedScenario.scenarioParameters.length === 0 ? (
                 <div className={emptyParamsStyle}>No scenario parameters</div>
               ) : (
                 selectedScenario.scenarioParameters.map((param) => (
diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/SimulateView/experiments/experiment-scenario-run.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/SimulateView/experiments/experiment-scenario-run.tsx
new file mode 100644
index 00000000000..cc9e1330cf1
--- /dev/null
+++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/SimulateView/experiments/experiment-scenario-run.tsx
@@ -0,0 +1,226 @@
+/**
+ * The experiment drawer's scenario body when a saved scenario is selected
+ * (behind the ad-hoc scenarios setting): the scenario shows through the
+ * ad-hoc form in run mode — its scenario parameters editable in worksheet
+ * style — above a collapsed "Computed state" sub-section that materializes
+ * the exact parameter values and initial tokens each run will start with.
+ * The materialization (lowering, compiling, converting the marking to
+ * literal rows) only happens while that sub-section is open, and recomputes
+ * as the values above change.
+ */
+
+import { useState } from "react";
+
+import { css } from "@hashintel/ds-helpers/css";
+import {
+  classicRunParameterValues,
+  classicRunVariables,
+  classicScenarioRunState,
+  compileScenario,
+  createUserKeyedRecord,
+} from "@hashintel/petrinaut-core";
+
+import { useScenarioHir } from "../../../../../../react/simulation/use-scenario-hir";
+import {
+  AdHocScenarioForm,
+  FormLayoutColumn,
+} from "../../../../../components/ad-hoc-scenario-form/ad-hoc-scenario-form";
+import { Section } from "../../../../../components/section";
+
+import type {
+  AdHocScenarioState,
+  AdHocSynthesisContext,
+  AdHocVariable,
+  Scenario,
+} from "@hashintel/petrinaut-core";
+
+const emptyMessageStyle = css({
+  fontSize: "sm",
+  color: "neutral.s80",
+});
+
+const groupTitleStyle = css({
+  fontSize: "xs",
+  fontWeight: "semibold",
+  textTransform: "uppercase",
+  letterSpacing: "wide",
+  color: "neutral.s80",
+});
+
+const groupStyle = css({
+  display: "flex",
+  flexDirection: "column",
+  gap: "1.5",
+});
+
+const noticeStyle = css({
+  fontSize: "xs",
+  color: "neutral.s90",
+  backgroundColor: "[rgb(217 119 6 / 0.08)]",
+  border: "1px solid",
+  borderColor: "[rgb(217 119 6 / 0.35)]",
+  borderRadius: "sm",
+  paddingX: "2",
+  paddingY: "1.5",
+});
+
+export interface ExperimentScenarioRunProps {
+  scenario: Scenario;
+  /** The net the scenario compiles and renders against. */
+  context: AdHocSynthesisContext;
+  /** The experiment's scenario parameter values, keyed by identifier. */
+  values: Readonly<Record<string, string>>;
+  onValuesChange: (updates: { identifier: string; value: string }[]) => void;
+}
+
+export const ExperimentScenarioRun: React.FC<ExperimentScenarioRunProps> = ({
+  scenario,
+  context,
+  values,
+  onValuesChange,
+}) => {
+  const hirState = useScenarioHir(scenario, context);
+  const [computedOpen, setComputedOpen] = useState(false);
+  const [run, setRun] = useState<{
+    scenarioId: string;
+    variables: AdHocVariable[];
+  } | null>(null);
+  if (run?.scenarioId !== scenario.id) {
+    setRun({
+      scenarioId: scenario.id,
+      variables: classicRunVariables(scenario, values),
+    });
+  }
+
+  const onFormChange = (next: AdHocScenarioState) => {
+    setRun({ scenarioId: scenario.id, variables: next.variables });
+    const updates = classicRunParameterValues(next, scenario);
+    if (updates.length > 0) {
+      onValuesChange(updates);
+    }
+  };
+
+  // The materialized preview, computed only while its sub-section is open.
+  // "Computed parameters" are the RESOLVED values compilation produces
+  // (defaults, overrides, and ad-hoc entries applied), not the raw override
+  // expressions — every net parameter shows the concrete value the runs use.
+  const computed = (() => {
+    if (!computedOpen) {
+      return null;
+    }
+    if (hirState.error !== null) {
+      return {
+        ready: false as const,
+        notice: `The state preview could not be compiled: ${hirState.error}`,
+      };
+    }
+    if (hirState.hir === null) {
+      return { ready: false as const, notice: "Computing the state preview…" };
+    }
+    const numericValues = createUserKeyedRecord<number>();
+    for (const [identifier, value] of Object.entries(values)) {
+      const parsed = Number(value);
+      if (Number.isFinite(parsed)) {
+        numericValues[identifier] = parsed;
+      }
+    }
+    const outcome = compileScenario(
+      scenario,
+      hirState.hir,
+      context.netParameters,
+      context.places,
+      context.types,
+      { scenarioParameterValues: numericValues },
+    );
+    if (!outcome.ok) {
+      return {
+        ready: false as const,
+        notice: `The state preview could not be computed: ${outcome.errors
+          .map((error) => error.message)
+          .join(" · ")}`,
+      };
+    }
+    const materialized = classicScenarioRunState(
+      scenario,
+      outcome.result.initialState,
+      { places: context.places, types: context.types },
+      values,
+    );
+    return {
+      ready: true as const,
+      notice:
+        materialized.truncated.length > 0
+          ? `Preview truncated: ${materialized.truncated
+              .map(
+                (cut) =>
+                  `${cut.placeName} shows ${cut.shown} of ${cut.total} rows`,
+              )
+              .join(" · ")}`
+          : null,
+      places: materialized.state.places,
+      netParameters: context.netParameters.flatMap((parameter) => {
+        const resolved = outcome.result.parameterValues[parameter.variableName];
+        return resolved === undefined
+          ? []
+          : [
+              {
+                parameterId: parameter.id,
+                expression: resolved,
+                optimize: null,
+              },
+            ];
+      }),
+    };
+  })();
+
+  const renderState: AdHocScenarioState = {
+    variables: run?.variables ?? [],
+    netParameters: computed?.ready ? computed.netParameters : [],
+    places: computed?.ready ? computed.places : {},
+  };
+
+  return (
+    <AdHocScenarioForm
+      state={renderState}
+      onChange={onFormChange}
+      context={context}
+      selection="none"
+      mode="run"
+      renderLayout={({ variables, parameters, places }) => (
+        <FormLayoutColumn>
+          {variables ?? (
+            <div className={emptyMessageStyle}>
+              This scenario exposes no parameters
+            </div>
+          )}
+          <Section
+            title="Computed state"
+            tooltip="The exact parameter values and initial tokens each run starts with, computed from the scenario with the values above."
+            collapsible
+            defaultOpen={false}
+            onOpenChange={setComputedOpen}
+            unmountOnCollapse
+          >
+            {computed === null || computed.notice === null ? null : (
+              <div className={noticeStyle}>{computed.notice}</div>
+            )}
+            {computed?.ready ? (
+              <>
+                <div className={groupStyle}>
+                  <div className={groupTitleStyle}>Parameters</div>
+                  {parameters ?? (
+                    <div className={emptyMessageStyle}>No parameters</div>
+                  )}
+                </div>
+                <div className={groupStyle}>
+                  <div className={groupTitleStyle}>Initial state</div>
+                  {places}
+                </div>
+              </>
+            ) : null}
+          </Section>
+        </FormLayoutColumn>
+      )}
+    />
+  );
+};
diff --git a/libs/@local/petrinaut-arch-docs/content/ui/ad-hoc-form.mdx b/libs/@local/petrinaut-arch-docs/content/ui/ad-hoc-form.mdx
index 7030931bee4..c584effee84 100644
--- a/libs/@local/petrinaut-arch-docs/content/ui/ad-hoc-form.mdx
+++ b/libs/@local/petrinaut-arch-docs/content/ui/ad-hoc-form.mdx
@@ -23,10 +23,12 @@ those Variables as its tunable parameters. Optimize selections write the
 `optimize` settings object; expose writes the boolean `exposed` flag. In
 that consumer alone the definition persists (see **The persisted format**
 below); everywhere else the generated scenario stays ephemeral. A fourth
-consumer reuses the component in `mode="run"`: Simulation Settings shows
-every selected scenario through the form read-only, with only the scenario
-parameters' values editable; each edit resolves to an ordinary
-scenario-parameter value for the run. An ad-hoc scenario renders its stored
+consumer reuses the component in `mode="run"`: Simulation Settings and the
+experiment drawer show every selected scenario through the form read-only,
+with only the scenario parameters' values editable; each edit resolves to
+an ordinary scenario-parameter value for the run. The experiment drawer
+adds a collapsed "Computed state" sub-section, materialized only while
+open. An ad-hoc scenario renders its stored
 definition; a classic (`code` or `per_place`) scenario has none, so its
 compiled initial marking is materialized into literal fixed rows
 (`classicScenarioRunState` in petrinaut-core), recomputed per parameter

From aaa6a365c74cc9aa6a77c98fb3b150ee7de515de Mon Sep 17 00:00:00 2001
From: Chris Feijoo <chris@kube.io>
Date: Mon, 31 Aug 2026 04:17:03 +0200
Subject: [PATCH 09/17] FE-1517: The run form reseeds on scenario edits and
 remounts per scenario

---
 .../subviews/simulation-settings.tsx          | 34 ++++++++++++++-----
 .../experiments/experiment-scenario-run.tsx   | 13 +++++--
 2 files changed, 37 insertions(+), 10 deletions(-)

diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/BottomPanel/subviews/simulation-settings.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/BottomPanel/subviews/simulation-settings.tsx
index b990d7c8721..183dba4cc80 100644
--- a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/BottomPanel/subviews/simulation-settings.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/BottomPanel/subviews/simulation-settings.tsx
@@ -37,7 +37,7 @@ import {
 } from "./scenario-run-state";
 
 import type { SubView } from "../../../../../components/sub-view/types";
-import type { AdHocScenarioState } from "@hashintel/petrinaut-core";
+import type { AdHocScenarioState, Scenario } from "@hashintel/petrinaut-core";
 
 // -- Styles -------------------------------------------------------------------
 
@@ -459,17 +459,28 @@ const SimulationSettingsContent: React.FC = () => {
       ? selectedScenario
       : undefined;
   const classicHir = useScenarioHir(selectedClassicScenario);
+  // `seededFrom` is the persisted scenario object the run state came from:
+  // saving an edit to the selected scenario replaces that object, so the
+  // form reseeds to the new definition instead of showing the old one while
+  // the run compiles the new. `seed` counts reseeds — it keys the form so a
+  // reseed (or a scenario switch) remounts it, discarding an undo history
+  // whose snapshots belong to another definition.
   const [scenarioRun, setScenarioRun] = useState<{
     scenarioId: string;
+    seededFrom: Scenario;
+    seed: number;
     state: AdHocScenarioState;
   } | null>(null);
   if (
     selectedAdHocScenario &&
     selectedAdHocScenario.initialState.type === "adhoc" &&
-    scenarioRun?.scenarioId !== selectedAdHocScenario.id
+    (scenarioRun?.scenarioId !== selectedAdHocScenario.id ||
+      scenarioRun.seededFrom !== selectedAdHocScenario)
   ) {
     setScenarioRun({
       scenarioId: selectedAdHocScenario.id,
+      seededFrom: selectedAdHocScenario,
+      seed: (scenarioRun?.seed ?? 0) + 1,
       state: seedScenarioRunState(
         selectedAdHocScenario.initialState.content,
         scenarioParameterValues,
@@ -478,12 +489,15 @@ const SimulationSettingsContent: React.FC = () => {
   }
   if (
     selectedClassicScenario &&
-    scenarioRun?.scenarioId !== selectedClassicScenario.id
+    (scenarioRun?.scenarioId !== selectedClassicScenario.id ||
+      scenarioRun.seededFrom !== selectedClassicScenario)
   ) {
     // Only the Variables (the editable scenario parameters) live in local
     // state; the overrides and places are derived from compilation below.
     setScenarioRun({
       scenarioId: selectedClassicScenario.id,
+      seededFrom: selectedClassicScenario,
+      seed: (scenarioRun?.seed ?? 0) + 1,
       state: {
         variables: classicRunVariables(
           selectedClassicScenario,
@@ -506,7 +520,7 @@ const SimulationSettingsContent: React.FC = () => {
     if (!selectedAdHocScenario) {
       return;
     }
-    setScenarioRun({ scenarioId: selectedAdHocScenario.id, state: next });
+    setScenarioRun((current) => current && { ...current, state: next });
     for (const { identifier, value } of scenarioRunParameterValues(
       next,
       adHocFormContext,
@@ -518,10 +532,13 @@ const SimulationSettingsContent: React.FC = () => {
     if (!selectedClassicScenario) {
       return;
     }
-    setScenarioRun({
-      scenarioId: selectedClassicScenario.id,
-      state: { variables: next.variables, netParameters: [], places: {} },
-    });
+    setScenarioRun(
+      (current) =>
+        current && {
+          ...current,
+          state: { variables: next.variables, netParameters: [], places: {} },
+        },
+    );
     for (const { identifier, value } of classicRunParameterValues(
       next,
       selectedClassicScenario,
@@ -871,6 +888,7 @@ const SimulationSettingsContent: React.FC = () => {
            edits in the left column; Parameters and Initial state sit
            read-only in the right one, still walkable and selectable. */
         <AdHocScenarioForm
+          key={`${scenarioRun?.scenarioId}:${scenarioRun?.seed}`}
           state={scenarioRunView.state}
           onChange={scenarioRunView.onChange}
           context={adHocFormContext}
diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/SimulateView/experiments/experiment-scenario-run.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/SimulateView/experiments/experiment-scenario-run.tsx
index cc9e1330cf1..0e3da87cbac 100644
--- a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/SimulateView/experiments/experiment-scenario-run.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/SimulateView/experiments/experiment-scenario-run.tsx
@@ -81,19 +81,27 @@ export const ExperimentScenarioRun: React.FC<ExperimentScenarioRunProps> = ({
 }) => {
   const hirState = useScenarioHir(scenario, context);
   const [computedOpen, setComputedOpen] = useState(false);
+  // `seededFrom` is the persisted scenario object the variables came from:
+  // saving an edit to it replaces the object, so the drawer reseeds to the
+  // new definition. `seed` keys the form so a reseed (or scenario switch)
+  // remounts it, discarding an undo history from another definition.
   const [run, setRun] = useState<{
     scenarioId: string;
+    seededFrom: Scenario;
+    seed: number;
     variables: AdHocVariable[];
   } | null>(null);
-  if (run?.scenarioId !== scenario.id) {
+  if (run?.scenarioId !== scenario.id || run.seededFrom !== scenario) {
     setRun({
       scenarioId: scenario.id,
+      seededFrom: scenario,
+      seed: (run?.seed ?? 0) + 1,
       variables: classicRunVariables(scenario, values),
     });
   }
 
   const onFormChange = (next: AdHocScenarioState) => {
-    setRun({ scenarioId: scenario.id, variables: next.variables });
+    setRun((current) => current && { ...current, variables: next.variables });
     const updates = classicRunParameterValues(next, scenario);
     if (updates.length > 0) {
       onValuesChange(updates);
@@ -181,6 +189,7 @@ export const ExperimentScenarioRun: React.FC<ExperimentScenarioRunProps> = ({
 
   return (
     <AdHocScenarioForm
+      key={`${run?.scenarioId}:${run?.seed}`}
       state={renderState}
       onChange={onFormChange}
       context={context}

From 9209b4afb1466eac7d78f4d131d0e6bdecd67f0f Mon Sep 17 00:00:00 2001
From: Chris Feijoo <chris@kube.io>
Date: Mon, 31 Aug 2026 05:49:58 +0200
Subject: [PATCH 10/17] FE-1517: Deselecting a scenario drops the run form
 state

---
 .../panels/BottomPanel/subviews/simulation-settings.tsx    | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/BottomPanel/subviews/simulation-settings.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/BottomPanel/subviews/simulation-settings.tsx
index 183dba4cc80..13147e35f5f 100644
--- a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/BottomPanel/subviews/simulation-settings.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/BottomPanel/subviews/simulation-settings.tsx
@@ -508,6 +508,13 @@ const SimulationSettingsContent: React.FC = () => {
       },
     });
   }
+  // Deselecting (No scenario, or the ad-hoc embedding) drops the run state
+  // entirely: reselecting the same scenario later must reseed from the
+  // then-current parameter values, not resurface stale edits the run no
+  // longer uses.
+  if (!selectedAdHocScenario && !selectedClassicScenario && scenarioRun) {
+    setScenarioRun(null);
+  }
   const adHocFormContext = {
     // The quick-sim embedding sees the overlaid parameters the run compiles
     // against (the raw panel inputs are hidden while it is live); a selected

From 1f2545269935a6d509d502493f900672d251c1d5 Mon Sep 17 00:00:00 2001
From: Chris Feijoo <chris@kube.io>
Date: Tue, 1 Sep 2026 14:17:15 +0200
Subject: [PATCH 11/17] FE-1517: A refused inline definition leaves the running
 simulation alone

---
 .../petrinaut/src/react/simulation/provider.tsx  | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/libs/@hashintel/petrinaut/src/react/simulation/provider.tsx b/libs/@hashintel/petrinaut/src/react/simulation/provider.tsx
index 9aafc3c5568..c602a3adba4 100644
--- a/libs/@hashintel/petrinaut/src/react/simulation/provider.tsx
+++ b/libs/@hashintel/petrinaut/src/react/simulation/provider.tsx
@@ -444,6 +444,17 @@ export const SimulationProvider: React.FC<SimulationProviderProps> = ({
     // eslint-disable-next-line no-use-before-define -- closure; ref is defined later in render
     const scenarioToCompile = scenarioToCompileRef.current;
 
+    // Refused before anything is torn down: a definition that does not
+    // compile leaves the run that is already going, and only reports.
+    if (scenarioToCompile?.kind === "invalid") {
+      const refusal = new Error(
+        `The inline initial state does not compile:\n${scenarioToCompile.messages.join("\n")}`,
+      );
+      setError(refusal.message);
+      setErrorItemId(null);
+      throw refusal;
+    }
+
     // Dispose any active simulation before starting a new one. Update both
     // the ref and React state so same-tick callers see the cleared handle.
     const previous = simulationRef.current;
@@ -460,11 +471,6 @@ export const SimulationProvider: React.FC<SimulationProviderProps> = ({
     try {
       let initialMarking = manualInitialMarking;
       let parameterValues: Record<string, string> = manualParameterValues;
-      if (scenarioToCompile?.kind === "invalid") {
-        throw new Error(
-          `The inline initial state does not compile:\n${scenarioToCompile.messages.join("\n")}`,
-        );
-      }
       if (scenarioToCompile) {
         const scenarioHir = await requestScenarioHir(
           {

From e47ff690dff0f055c8ac8155d290fe0231687e67 Mon Sep 17 00:00:00 2001
From: Chris Feijoo <chris@kube.io>
Date: Tue, 1 Sep 2026 14:19:15 +0200
Subject: [PATCH 12/17] FE-1517: An emptied run parameter takes its type's
 neutral

---
 .../scenario/ad-hoc/materialize-run-state.test.ts  | 14 ++++++++++++++
 .../scenario/ad-hoc/materialize-run-state.ts       |  9 ++++++++-
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/libs/@hashintel/petrinaut-core/src/simulation/authoring/scenario/ad-hoc/materialize-run-state.test.ts b/libs/@hashintel/petrinaut-core/src/simulation/authoring/scenario/ad-hoc/materialize-run-state.test.ts
index 8ce39e9f0d7..7c3e2caa028 100644
--- a/libs/@hashintel/petrinaut-core/src/simulation/authoring/scenario/ad-hoc/materialize-run-state.test.ts
+++ b/libs/@hashintel/petrinaut-core/src/simulation/authoring/scenario/ad-hoc/materialize-run-state.test.ts
@@ -176,6 +176,20 @@ describe("classicRunParameterValues", () => {
     expect(values).toContainEqual({ identifier: "launch_rate", value: "0.3" });
   });
 
+  it("reads an emptied cell as its type's neutral", () => {
+    // The cell shows `0` / `false` when empty, and the run has to agree:
+    // ignoring the edit left the previous value in effect behind it.
+    const values = classicRunParameterValues(
+      stateWith({ initialAltitude: "", night_mode: "" }),
+      SCENARIO,
+    );
+    expect(values).toContainEqual({
+      identifier: "initialAltitude",
+      value: "0",
+    });
+    expect(values).toContainEqual({ identifier: "night_mode", value: "0" });
+  });
+
   it("skips non-literal expressions so the previous value stands", () => {
     const values = classicRunParameterValues(
       stateWith({ initialAltitude: "42 +", night_mode: "maybe" }),
diff --git a/libs/@hashintel/petrinaut-core/src/simulation/authoring/scenario/ad-hoc/materialize-run-state.ts b/libs/@hashintel/petrinaut-core/src/simulation/authoring/scenario/ad-hoc/materialize-run-state.ts
index 0d0a6b0114d..ae464963e8e 100644
--- a/libs/@hashintel/petrinaut-core/src/simulation/authoring/scenario/ad-hoc/materialize-run-state.ts
+++ b/libs/@hashintel/petrinaut-core/src/simulation/authoring/scenario/ad-hoc/materialize-run-state.ts
@@ -193,6 +193,13 @@ export function classicRunParameterValues(
       continue;
     }
     const text = variable.expression.trim();
+    // An emptied cell reads as its type's neutral everywhere else in the
+    // form, so a run takes the neutral too. Ignoring it instead left the
+    // previous value running behind a cell that showed `0` / `false`.
+    if (text === "") {
+      values.push({ identifier: parameter.identifier, value: "0" });
+      continue;
+    }
     if (parameter.type === "boolean") {
       if (text === "true" || text === "false") {
         values.push({
@@ -202,7 +209,7 @@ export function classicRunParameterValues(
       }
       continue;
     }
-    if (text !== "" && Number.isFinite(Number(text))) {
+    if (Number.isFinite(Number(text))) {
       values.push({ identifier: parameter.identifier, value: text });
     }
   }

From 66207cf8b2f5419b7eb9c8447edba2d2eaf694c3 Mon Sep 17 00:00:00 2001
From: Chris Feijoo <chris@kube.io>
Date: Tue, 1 Sep 2026 16:47:51 +0200
Subject: [PATCH 13/17] FE-1517: A run's derived state stays out of the undo
 stack

---
 .../ad-hoc-scenario-form.tsx                  |  4 +++
 .../use-form-history.test.tsx                 | 29 ++++++++++++++++++-
 .../ad-hoc-scenario-form/use-form-history.ts  | 23 +++++++++++----
 3 files changed, 50 insertions(+), 6 deletions(-)

diff --git a/libs/@hashintel/petrinaut/src/ui/components/ad-hoc-scenario-form/ad-hoc-scenario-form.tsx b/libs/@hashintel/petrinaut/src/ui/components/ad-hoc-scenario-form/ad-hoc-scenario-form.tsx
index e8e13e80d92..54b4a7c9937 100644
--- a/libs/@hashintel/petrinaut/src/ui/components/ad-hoc-scenario-form/ad-hoc-scenario-form.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/components/ad-hoc-scenario-form/ad-hoc-scenario-form.tsx
@@ -190,6 +190,10 @@ export const AdHocScenarioForm: React.FC<AdHocScenarioFormProps> = ({
     state,
     context,
     onChange,
+    // Run mode shows a saved scenario: the host owns the computed
+    // parameters and marking and recomputes them from the values edited
+    // here, so those arrivals are not separate undo steps.
+    mode === "run",
   );
 
   // Escape pressed while focus is inside the form never reaches the host:
diff --git a/libs/@hashintel/petrinaut/src/ui/components/ad-hoc-scenario-form/use-form-history.test.tsx b/libs/@hashintel/petrinaut/src/ui/components/ad-hoc-scenario-form/use-form-history.test.tsx
index 959d52b6b03..70bdd7262ba 100644
--- a/libs/@hashintel/petrinaut/src/ui/components/ad-hoc-scenario-form/use-form-history.test.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/components/ad-hoc-scenario-form/use-form-history.test.tsx
@@ -6,7 +6,7 @@
  * while a real external change records one step.
  */
 
-import { renderHook } from "@testing-library/react";
+import { act, renderHook } from "@testing-library/react";
 import { describe, expect, it } from "vitest";
 
 import { useAdHocFormHistory } from "./use-form-history";
@@ -29,6 +29,33 @@ const stateWith = (expression: string): AdHocScenarioState => ({
 });
 
 describe("useAdHocFormHistory", () => {
+  it("keeps a host's derived state out of the undo stack", () => {
+    // Run mode: the host owns part of the state and recomputes it from the
+    // form's edits. Recording those arrivals made one edit land twice, and
+    // undo could never get back past the derived half.
+    const { result, rerender } = renderHook(
+      ({ state }) =>
+        useAdHocFormHistory(state, context, () => {}, /* hostDerives */ true),
+      { initialProps: { state: stateWith("1") } },
+    );
+    expect(result.current.history).toHaveLength(1);
+
+    rerender({ state: stateWith("2") });
+    expect(result.current.history).toHaveLength(1);
+    expect(result.current.canUndo).toBe(false);
+
+    // An edit made through the form is still one step, and still undoable.
+    act(() => {
+      result.current.dispatch({
+        type: "setExpression",
+        target: { kind: "variable", placeId: null, index: 0 },
+        expression: "3",
+      });
+    });
+    expect(result.current.history).toHaveLength(2);
+    expect(result.current.canUndo).toBe(true);
+  });
+
   it("adopts a same-content rematerialization without a history step", () => {
     const { result, rerender } = renderHook(
       ({ state }) => useAdHocFormHistory(state, context, () => {}),
diff --git a/libs/@hashintel/petrinaut/src/ui/components/ad-hoc-scenario-form/use-form-history.ts b/libs/@hashintel/petrinaut/src/ui/components/ad-hoc-scenario-form/use-form-history.ts
index 2c364465943..c40c91f8034 100644
--- a/libs/@hashintel/petrinaut/src/ui/components/ad-hoc-scenario-form/use-form-history.ts
+++ b/libs/@hashintel/petrinaut/src/ui/components/ad-hoc-scenario-form/use-form-history.ts
@@ -90,6 +90,15 @@ export function useAdHocFormHistory(
   state: AdHocScenarioState,
   context: AdHocSynthesisContext,
   onChange: (state: AdHocScenarioState) => void,
+  /**
+   * Whether the host owns part of the state and recomputes it from the
+   * form's own edits. In run mode the computed parameters and marking are
+   * derived, so they belong to the host rather than to the undo stack: an
+   * external change adopts in place instead of adding a step. Recording it
+   * as a step made an edit land twice — the value, then the preview it
+   * derived — and undo could never get back past the second one.
+   */
+  hostDerivesState = false,
 ): AdHocFormHistory {
   const [model, setModel] = useState<HistoryModel>(() => ({
     entries: [{ state, timestamp: new Date().toISOString() }],
@@ -100,13 +109,17 @@ export function useAdHocFormHistory(
   // The invariant is `entries[cursor].state === state`; every dispatch,
   // undo, and redo maintains it. A mismatch means the parent changed the
   // state externally — record that as a fresh step (render-adjusted state,
-  // no effect involved). Same-content rematerializations are adopted
-  // silently instead: run-mode hosts compose their state per render, and
-  // recording each of those as an edit would fill the history with steps
-  // that undo nothing.
+  // no effect involved). Two kinds of mismatch are adopted in place
+  // instead: a same-content rematerialization (hosts compose their state
+  // per render, and a step that undoes nothing is noise), and any external
+  // change at all when the host derives part of the state, because then
+  // the change is the host's own answer to an edit already recorded.
   const cursorEntry = model.entries[model.cursor]!;
   if (cursorEntry.state !== state) {
-    if (JSON.stringify(cursorEntry.state) === JSON.stringify(state)) {
+    if (
+      hostDerivesState ||
+      JSON.stringify(cursorEntry.state) === JSON.stringify(state)
+    ) {
       const entries = [...model.entries];
       entries[model.cursor] = { state, timestamp: cursorEntry.timestamp };
       setModel({ ...model, entries });

From efb47dfc1eb32d997ccb00805aec09a9c7c8b22a Mon Sep 17 00:00:00 2001
From: Chris Feijoo <chris@kube.io>
Date: Tue, 1 Sep 2026 17:20:20 +0200
Subject: [PATCH 14/17] FE-1517: The quick-simulation form starts from the
 canvas marking

A null draft ran the canvas marking while the form showed empty places.
The form now seeds its fallback from the marking, uncapped, so the first
edit materializes a draft that already holds those tokens.
---
 .../ad-hoc/materialize-run-state.test.ts      | 20 +++++++++++++++++++
 .../subviews/simulation-settings.tsx          | 19 +++++++++++++++++-
 2 files changed, 38 insertions(+), 1 deletion(-)

diff --git a/libs/@hashintel/petrinaut-core/src/simulation/authoring/scenario/ad-hoc/materialize-run-state.test.ts b/libs/@hashintel/petrinaut-core/src/simulation/authoring/scenario/ad-hoc/materialize-run-state.test.ts
index 7c3e2caa028..54d5cd766ca 100644
--- a/libs/@hashintel/petrinaut-core/src/simulation/authoring/scenario/ad-hoc/materialize-run-state.test.ts
+++ b/libs/@hashintel/petrinaut-core/src/simulation/authoring/scenario/ad-hoc/materialize-run-state.test.ts
@@ -104,6 +104,26 @@ describe("initialMarkingToAdHocPlaces", () => {
     expect(truncated).toEqual([{ placeName: "Space", shown: 100, total: 130 }]);
   });
 
+  it("keeps every token when the cap is lifted", () => {
+    // The quick-simulation form seeds its editable draft from the marking,
+    // where a cap would drop tokens the moment the user typed.
+    const long = {
+      "place-space": Array.from({ length: 130 }, (_unused, index) => ({
+        altitude: index,
+        active: false,
+        tag: "t",
+      })),
+    };
+    const { places, truncated } = initialMarkingToAdHocPlaces(
+      long,
+      CONTEXT,
+      Number.POSITIVE_INFINITY,
+    );
+    const space = places["place-space"]!;
+    expect(space.kind === "coloured" && space.rows.length).toBe(130);
+    expect(truncated).toEqual([]);
+  });
+
   it("skips places absent from the marking", () => {
     const { places } = initialMarkingToAdHocPlaces(
       { "place-debris": 0 },
diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/BottomPanel/subviews/simulation-settings.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/BottomPanel/subviews/simulation-settings.tsx
index 13147e35f5f..1d2b9f0b03c 100644
--- a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/BottomPanel/subviews/simulation-settings.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/BottomPanel/subviews/simulation-settings.tsx
@@ -17,6 +17,7 @@ import {
   compileScenario,
   createUserKeyedRecord,
   EMPTY_AD_HOC_STATE,
+  initialMarkingToAdHocPlaces,
 } from "@hashintel/petrinaut-core";
 
 import { SimulationContext } from "../../../../../../react/simulation/context";
@@ -425,6 +426,7 @@ const SimulationSettingsContent: React.FC = () => {
     adHocScenario,
     setAdHocScenario,
     adHocNetParameters,
+    initialMarking,
   } = use(SimulationContext);
 
   const { enableAdHocScenarios } = use(UserSettingsContext);
@@ -515,6 +517,21 @@ const SimulationSettingsContent: React.FC = () => {
   if (!selectedAdHocScenario && !selectedClassicScenario && scenarioRun) {
     setScenarioRun(null);
   }
+  // Until a definition exists, the form stands in for the markings entered
+  // on the canvas: those are what a run uses while the draft is null, so
+  // showing an empty place for each of them would be a lie the run does not
+  // tell. Seeding also means the first edit materializes a draft that
+  // already holds them, so nothing is silently zeroed. No row cap: a cap
+  // here would drop tokens from the draft the moment the user typed.
+  const seededAdHocState: AdHocScenarioState = {
+    ...EMPTY_AD_HOC_STATE,
+    places: initialMarkingToAdHocPlaces(
+      initialMarking,
+      { places, types: extensions.colors ? types : [] },
+      Number.POSITIVE_INFINITY,
+    ).places,
+  };
+
   const adHocFormContext = {
     // The quick-sim embedding sees the overlaid parameters the run compiles
     // against (the raw panel inputs are hidden while it is live); a selected
@@ -810,7 +827,7 @@ const SimulationSettingsContent: React.FC = () => {
            the keyboard flow. This embedding offers no Optimize/expose
            toggles. */
         <AdHocScenarioForm
-          state={adHocScenario ?? EMPTY_AD_HOC_STATE}
+          state={adHocScenario ?? seededAdHocState}
           onChange={setAdHocScenario}
           context={adHocFormContext}
           selection="none"

From fc0466ba4cbfc24243e0b510822d750dac7cd113 Mon Sep 17 00:00:00 2001
From: Chris Feijoo <chris@kube.io>
Date: Mon, 31 Aug 2026 18:26:03 +0200
Subject: [PATCH 15/17] FE-778: The optimize bounds slab takes its own presses

---
 .../petrinaut/.storybook/preview.tsx          |  29 +-
 .../ad-hoc-scenario-form.test.tsx             |  63 ++++
 .../ad-hoc-scenario-form/value-editor.tsx     | 294 ++++++++++--------
 .../SimulateView/simulate-view.stories.tsx    |   5 +
 4 files changed, 246 insertions(+), 145 deletions(-)

diff --git a/libs/@hashintel/petrinaut/.storybook/preview.tsx b/libs/@hashintel/petrinaut/.storybook/preview.tsx
index 4f7b441f25e..e9f248b4d5f 100644
--- a/libs/@hashintel/petrinaut/.storybook/preview.tsx
+++ b/libs/@hashintel/petrinaut/.storybook/preview.tsx
@@ -2,9 +2,25 @@ import "../src/ui/index.css";
 import { useRef } from "react";
 
 import { PortalContainerContext } from "@hashintel/ds-components";
+import { css } from "@hashintel/ds-helpers/css";
 
 import type { Preview } from "@storybook/react-vite";
 
+// The layer covers the whole story, so it must let presses through to the
+// story beneath it — but its children are the portalled surfaces themselves
+// (menus, selects, the ad-hoc value editor), and those have to be clickable.
+// Without the child rule every portalled surface in Storybook is inert, which
+// the app never is: there the portal container is `.petrinaut-root` itself.
+const portalLayerStyle = css({
+  position: "absolute",
+  inset: "[0]",
+  zIndex: "[99999]",
+  pointerEvents: "none",
+  "& > *": {
+    pointerEvents: "auto",
+  },
+});
+
 const preview: Preview = {
   decorators: [
     (Story) => {
@@ -15,18 +31,7 @@ const preview: Preview = {
           // Required (for now) given design tokens are scoped to .petrinaut-root
           className="petrinaut-root"
         >
-          <div
-            ref={portalContainerRef}
-            style={{
-              position: "absolute",
-              top: "0",
-              left: "0",
-              width: "100%",
-              height: "100%",
-              zIndex: "99999",
-              pointerEvents: "none",
-            }}
-          />
+          <div ref={portalContainerRef} className={portalLayerStyle} />
 
           <PortalContainerContext value={portalContainerRef}>
             <Story />
diff --git a/libs/@hashintel/petrinaut/src/ui/components/ad-hoc-scenario-form/ad-hoc-scenario-form.test.tsx b/libs/@hashintel/petrinaut/src/ui/components/ad-hoc-scenario-form/ad-hoc-scenario-form.test.tsx
index 64e2485a0bd..44539bacbc7 100644
--- a/libs/@hashintel/petrinaut/src/ui/components/ad-hoc-scenario-form/ad-hoc-scenario-form.test.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/components/ad-hoc-scenario-form/ad-hoc-scenario-form.test.tsx
@@ -58,6 +58,9 @@ class ObserverStub {
 globalThis.ResizeObserver = ObserverStub as unknown as typeof ResizeObserver;
 globalThis.IntersectionObserver =
   ObserverStub as unknown as typeof IntersectionObserver;
+// jsdom implements no scrolling at all, and the Scale list scrolls itself to
+// the selected option when it opens.
+Element.prototype.scrollTo = () => {};
 
 afterEach(cleanup);
 
@@ -920,6 +923,66 @@ describe("AdHocScenarioForm", () => {
     expect(screen.queryByText("Scale")).toBe(null);
   });
 
+  it("keeps the optimize bounds usable while the slab is open", async () => {
+    let latest: AdHocScenarioState | undefined;
+    const initial: AdHocScenarioState = {
+      variables: [
+        {
+          name: "n",
+          type: "integer",
+          expression: "2",
+          optimize: { min: "0", max: "10", step: "1", scale: "linear" },
+        },
+      ],
+      netParameters: [],
+      places: {},
+    };
+    render(
+      <Harness
+        initial={initial}
+        onState={(state) => {
+          latest = state;
+        }}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "n" }));
+    const minCell = await screen.findByRole("button", { name: "Min of n" });
+    const slab = document.querySelector("[data-adhoc-slab]");
+
+    // The slab takes its own pointer events: a portal container is often a
+    // pointer-transparent layer, and a click-through slab hands every press
+    // to the row beneath it — which the dismiss handler reads as a press
+    // outside and closes the slab on.
+    expect(slab?.className).toContain("pointer-events_auto");
+
+    // A layer opened from inside the slab lives inside it, so pressing its
+    // options is not an outside press.
+    fireEvent.click(screen.getByRole("combobox", { name: "Scale of n" }));
+    const scaleList = await screen.findByRole("listbox");
+    expect(slab?.contains(scaleList)).toBe(true);
+    fireEvent.keyDown(scaleList, { key: "Escape" });
+
+    // Editing one bound keeps focus in its editor. Each keystroke dispatches
+    // and re-renders the slab, and the one-shot Min selection must not
+    // re-arm on the re-render: it used to steal focus mid-edit, so the next
+    // character overwrote Min instead.
+    fireEvent.keyDown(minCell, { key: "ArrowRight" });
+    fireEvent.click(screen.getByRole("button", { name: "Max of n" }));
+    const editor = await screen.findByRole("textbox", { name: "Expression" });
+    // The real editor focuses itself on mount; the jsdom stand-in does not.
+    editor.focus();
+    fireEvent.change(editor, { target: { value: "12" } });
+    expect(latest?.variables[0]?.optimize?.max).toBe("12");
+    expect(document.activeElement).toBe(editor);
+    // ...on the commit after that one too, which is where a guard re-armed
+    // by the ref churn would have taken the focus.
+    fireEvent.change(editor, { target: { value: "125" } });
+    expect(latest?.variables[0]?.optimize?.max).toBe("125");
+    expect(document.activeElement).toBe(editor);
+    expect(latest?.variables[0]?.optimize?.min).toBe("0");
+  });
+
   it("selects on pointer click and opens the menu from the dots", async () => {
     render(<Harness />);
     fireEvent.click(
diff --git a/libs/@hashintel/petrinaut/src/ui/components/ad-hoc-scenario-form/value-editor.tsx b/libs/@hashintel/petrinaut/src/ui/components/ad-hoc-scenario-form/value-editor.tsx
index 7bd4b85dc26..119c20b5150 100644
--- a/libs/@hashintel/petrinaut/src/ui/components/ad-hoc-scenario-form/value-editor.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/components/ad-hoc-scenario-form/value-editor.tsx
@@ -25,7 +25,11 @@ import {
   useState,
 } from "react";
 
-import { Select, usePortalContainerRef } from "@hashintel/ds-components";
+import {
+  PortalContainerContext,
+  Select,
+  usePortalContainerRef,
+} from "@hashintel/ds-components";
 import { css, cx } from "@hashintel/ds-helpers/css";
 import {
   adHocNeutralExpression,
@@ -89,6 +93,13 @@ const OPEN_EVENT = "petrinaut-adhoc-editor-open";
 const overlayStyle = css({
   position: "fixed",
   zIndex: "popover",
+  // A portal container is often a full-bleed layer that lets presses through
+  // to the app beneath it (`pointer-events: none`), so a surface portaled
+  // into one has to take its own presses back. Without this the whole slab
+  // is click-through: Min, Max, Step and Scale never see the press, and the
+  // press lands on whatever sits under the slab — which the dismiss handler
+  // then reads as a click outside and closes the slab.
+  pointerEvents: "auto",
 });
 
 const overlayBodyStyle = css({
@@ -463,8 +474,15 @@ export const ValueEditor: React.FC<ValueEditorProps> = ({
     setEditingBound(null);
   }
   const boundRefs = useRef(new Map<string, HTMLButtonElement>());
-  // Opening the slab selects the Min cell once; reset per open.
-  const minAutoSelectedRef = useRef(false);
+  // Opening the slab selects the Min cell once, and the guard is the element
+  // it selected rather than a flag. The ref callback is a fresh closure on
+  // every render, so React detaches and re-attaches it on every commit, and a
+  // flag cleared by either side of that churn re-arms the selection: an edit
+  // in a neighbouring bound (every keystroke dispatches) then yanked focus to
+  // Min mid-typing, where the next character overwrote Min's own bound.
+  // Comparing elements needs no reset — closing the slab unmounts the cell,
+  // so a reopened slab always presents a new button to select.
+  const minSelectedElementRef = useRef<HTMLButtonElement | null>(null);
 
   // Value slots carry Optimize toggles only in optimize mode; expose mode
   // marks whole top-level Variables (in their own rows), never value slots.
@@ -783,15 +801,12 @@ export const ValueEditor: React.FC<ValueEditorProps> = ({
     (element: HTMLButtonElement | null) => {
       if (element) {
         boundRefs.current.set(key, element);
-        if (selectOnAttach && !minAutoSelectedRef.current) {
-          minAutoSelectedRef.current = true;
+        if (selectOnAttach && minSelectedElementRef.current !== element) {
+          minSelectedElementRef.current = element;
           element.focus();
         }
       } else {
         boundRefs.current.delete(key);
-        if (selectOnAttach) {
-          minAutoSelectedRef.current = false;
-        }
       }
     };
   const boundValue = (key: "min" | "max" | "step"): string =>
@@ -884,6 +899,7 @@ export const ValueEditor: React.FC<ValueEditorProps> = ({
             ref={overlayRef}
             className={overlayStyle}
             role="presentation"
+            data-adhoc-slab=""
             // The slab portals outside the form root, so the root's undo
             // capture and Delete/Backspace stop are re-attached here — keys
             // on the slab's non-Monaco controls must reach form undo, never
@@ -905,147 +921,159 @@ export const ValueEditor: React.FC<ValueEditorProps> = ({
               minHeight: rect.height,
             }}
           >
-            <div className={pathLabelStyle}>{label}</div>
-            <div
-              className={cx(
-                overlayBodyStyle,
-                !selectable && bodyBottomEdgeStyle,
-              )}
-            >
-              {optimized && booleanDomain ? (
-                <div className={booleanNoteStyle}>
-                  The optimizer tries true and false.
-                </div>
-              ) : optimized ? (
-                <div className={boundsGridStyle}>
-                  {boundFields.map((field, fieldIndex) => (
-                    <div key={field.key} className={boundsColumnStyle}>
-                      <div className={boundsLabelStyle}>{field.fieldLabel}</div>
-                      <BoundCell
-                        label={field.fieldLabel}
-                        valueLabel={label}
-                        bound={boundValue(field.key)}
-                        uri={uriFor({ target, part: field.key }) || undefined}
-                        error={errorFor({ target, part: field.key })}
-                        editing={editingBound === field.key}
-                        onStartEdit={() => setEditingBound(field.key)}
-                        onEndEdit={() => endBoundEdit(field.key)}
-                        onChange={(next) =>
+            {/* A layer opened from inside the slab — the Scale list — portals
+                into the slab itself, not into the app container it would
+                otherwise share with the slab as a sibling. As a descendant it
+                inherits the slab's pointer events, the dismiss handler's
+                containment test accepts a press on it, and choosing a value
+                commits instead of closing the slab. */}
+            <PortalContainerContext value={overlayRef}>
+              <div className={pathLabelStyle}>{label}</div>
+              <div
+                className={cx(
+                  overlayBodyStyle,
+                  !selectable && bodyBottomEdgeStyle,
+                )}
+              >
+                {optimized && booleanDomain ? (
+                  <div className={booleanNoteStyle}>
+                    The optimizer tries true and false.
+                  </div>
+                ) : optimized ? (
+                  <div className={boundsGridStyle}>
+                    {boundFields.map((field, fieldIndex) => (
+                      <div key={field.key} className={boundsColumnStyle}>
+                        <div className={boundsLabelStyle}>
+                          {field.fieldLabel}
+                        </div>
+                        <BoundCell
+                          label={field.fieldLabel}
+                          valueLabel={label}
+                          bound={boundValue(field.key)}
+                          uri={uriFor({ target, part: field.key }) || undefined}
+                          error={errorFor({ target, part: field.key })}
+                          editing={editingBound === field.key}
+                          onStartEdit={() => setEditingBound(field.key)}
+                          onEndEdit={() => endBoundEdit(field.key)}
+                          onChange={(next) =>
+                            dispatch({
+                              type: "setDomainField",
+                              target,
+                              field: field.key,
+                              value: next,
+                            })
+                          }
+                          registerTrigger={registerBound(
+                            field.key,
+                            fieldIndex === 0,
+                          )}
+                          onNavigate={(delta) =>
+                            navigateBound(field.key, delta)
+                          }
+                          onEditorMount={(editorInstance) => {
+                            monacoRef.current = editorInstance;
+                          }}
+                        />
+                      </div>
+                    ))}
+                    <div
+                      ref={(element) => {
+                        const trigger =
+                          element?.querySelector<HTMLButtonElement>(
+                            "[data-part='trigger']",
+                          ) ?? null;
+                        if (trigger) {
+                          boundRefs.current.set("scale", trigger);
+                        } else {
+                          boundRefs.current.delete("scale");
+                        }
+                      }}
+                      className={cx(
+                        boundsColumnStyle,
+                        boundsScaleColumnStyle,
+                        cellSelectStyle,
+                      )}
+                      onKeyDownCapture={(event) => {
+                        const trigger = event.currentTarget.querySelector(
+                          "[data-part='trigger']",
+                        );
+                        if (trigger?.getAttribute("aria-expanded") === "true") {
+                          return;
+                        }
+                        if (event.key === "ArrowLeft") {
+                          event.preventDefault();
+                          event.stopPropagation();
+                          navigateBound("scale", -1);
+                        }
+                      }}
+                    >
+                      <div className={boundsLabelStyle}>Scale</div>
+                      <Select
+                        required
+                        size="sm"
+                        aria-label={`Scale of ${label}`}
+                        value={value.optimize!.scale}
+                        onChange={(scale) =>
                           dispatch({
                             type: "setDomainField",
                             target,
-                            field: field.key,
-                            value: next,
+                            field: "scale",
+                            value: scale,
                           })
                         }
-                        registerTrigger={registerBound(
-                          field.key,
-                          fieldIndex === 0,
-                        )}
-                        onNavigate={(delta) => navigateBound(field.key, delta)}
-                        onEditorMount={(editorInstance) => {
-                          monacoRef.current = editorInstance;
-                        }}
+                        items={[
+                          { value: "linear", text: "Linear" },
+                          { value: "log", text: "Log" },
+                        ]}
                       />
                     </div>
-                  ))}
-                  <div
-                    ref={(element) => {
-                      const trigger =
-                        element?.querySelector<HTMLButtonElement>(
-                          "[data-part='trigger']",
-                        ) ?? null;
-                      if (trigger) {
-                        boundRefs.current.set("scale", trigger);
-                      } else {
-                        boundRefs.current.delete("scale");
-                      }
-                    }}
-                    className={cx(
-                      boundsColumnStyle,
-                      boundsScaleColumnStyle,
-                      cellSelectStyle,
-                    )}
-                    onKeyDownCapture={(event) => {
-                      const trigger = event.currentTarget.querySelector(
-                        "[data-part='trigger']",
-                      );
-                      if (trigger?.getAttribute("aria-expanded") === "true") {
-                        return;
-                      }
-                      if (event.key === "ArrowLeft") {
-                        event.preventDefault();
-                        event.stopPropagation();
-                        navigateBound("scale", -1);
-                      }
-                    }}
-                  >
-                    <div className={boundsLabelStyle}>Scale</div>
-                    <Select
-                      required
-                      size="sm"
-                      aria-label={`Scale of ${label}`}
-                      value={value.optimize!.scale}
-                      onChange={(scale) =>
+                  </div>
+                ) : (
+                  <div className={expressionRowStyle}>
+                    <CodeEditor
+                      singleLine
+                      frameless
+                      language="typescript"
+                      path={uriFor(expressionSlot) || undefined}
+                      value={value.expression}
+                      mountSelection={mountSelection}
+                      placeholder={triggerPlaceholder}
+                      onMount={(editorInstance) => {
+                        monacoRef.current = editorInstance;
+                        editorInstance.focus();
+                      }}
+                      onChange={(expression) =>
                         dispatch({
-                          type: "setDomainField",
+                          type: "setExpression",
                           target,
-                          field: "scale",
-                          value: scale,
+                          expression: expression ?? "",
                         })
                       }
-                      items={[
-                        { value: "linear", text: "Linear" },
-                        { value: "log", text: "Log" },
-                      ]}
+                      onSubmit={() => {
+                        commitFormat();
+                        setOpenState(false);
+                        buttonRef.current?.focus();
+                      }}
                     />
                   </div>
-                </div>
-              ) : (
-                <div className={expressionRowStyle}>
-                  <CodeEditor
-                    singleLine
-                    frameless
-                    language="typescript"
-                    path={uriFor(expressionSlot) || undefined}
-                    value={value.expression}
-                    mountSelection={mountSelection}
-                    placeholder={triggerPlaceholder}
-                    onMount={(editorInstance) => {
-                      monacoRef.current = editorInstance;
-                      editorInstance.focus();
-                    }}
-                    onChange={(expression) =>
-                      dispatch({
-                        type: "setExpression",
-                        target,
-                        expression: expression ?? "",
-                      })
+                )}
+              </div>
+              {selectable ? (
+                <div className={belowStripStyle}>
+                  <OptimizeToggle
+                    text={adHocSelectionText(selection)}
+                    label={`${adHocSelectionText(selection)} ${label}`}
+                    value={value.optimize !== null}
+                    onChange={(on) =>
+                      dispatch({ type: "toggleSelection", target, on })
                     }
-                    onSubmit={() => {
-                      commitFormat();
-                      setOpenState(false);
-                      buttonRef.current?.focus();
-                    }}
                   />
                 </div>
-              )}
-            </div>
-            {selectable ? (
-              <div className={belowStripStyle}>
-                <OptimizeToggle
-                  text={adHocSelectionText(selection)}
-                  label={`${adHocSelectionText(selection)} ${label}`}
-                  value={value.optimize !== null}
-                  onChange={(on) =>
-                    dispatch({ type: "toggleSelection", target, on })
-                  }
-                />
-              </div>
-            ) : null}
-            {boundsError ? (
-              <div className={fieldErrorStyle}>{boundsError}</div>
-            ) : null}
+              ) : null}
+              {boundsError ? (
+                <div className={fieldErrorStyle}>{boundsError}</div>
+              ) : null}
+            </PortalContainerContext>
           </div>
         </Portal>
       ) : null}
diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/SimulateView/simulate-view.stories.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/SimulateView/simulate-view.stories.tsx
index 9f8337932ea..ee581f97f4e 100644
--- a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/SimulateView/simulate-view.stories.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/SimulateView/simulate-view.stories.tsx
@@ -59,11 +59,16 @@ const rootStyle = css({
   backgroundColor: "neutral.s00",
 });
 
+// Covers the story, so presses fall through to it — but the portalled
+// surfaces themselves are this layer's children and have to stay clickable.
 const portalContainerStyle = css({
   position: "absolute",
   inset: "[0]",
   zIndex: "modal",
   pointerEvents: "none",
+  "& > *": {
+    pointerEvents: "auto",
+  },
 });
 
 type StoryExample = {

From 39933cec92aeff898a64df9395d2dc208cb712d0 Mon Sep 17 00:00:00 2001
From: Chris Feijoo <chris@kube.io>
Date: Mon, 31 Aug 2026 18:34:14 +0200
Subject: [PATCH 16/17] FE-778: A focused section stays under its host's sticky
 header

---
 .../src/ui/components/section.test.tsx        | 50 +++++++++++++++++++
 .../petrinaut/src/ui/components/section.tsx   | 10 +++-
 2 files changed, 59 insertions(+), 1 deletion(-)
 create mode 100644 libs/@hashintel/petrinaut/src/ui/components/section.test.tsx

diff --git a/libs/@hashintel/petrinaut/src/ui/components/section.test.tsx b/libs/@hashintel/petrinaut/src/ui/components/section.test.tsx
new file mode 100644
index 00000000000..b996e2c862f
--- /dev/null
+++ b/libs/@hashintel/petrinaut/src/ui/components/section.test.tsx
@@ -0,0 +1,50 @@
+/**
+ * @vitest-environment jsdom
+ *
+ * Stacking is the one thing about a Section that jsdom can still hold to
+ * account: it computes no layout, but the classes Panda emits carry the
+ * tiers, and the tiers are what the nesting bug was about.
+ */
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+
+import { Section, SectionList } from "./section";
+
+afterEach(cleanup);
+
+describe("Section", () => {
+  it("keeps a focused section below every sticky header", () => {
+    render(
+      <SectionList>
+        <Section title="Host" collapsible defaultOpen>
+          <Section title="Nested" collapsible defaultOpen>
+            <button type="button">Cell</button>
+          </Section>
+        </Section>
+      </SectionList>,
+    );
+
+    const nestedTrigger = screen.getByRole("button", {
+      name: "Toggle Nested section",
+    });
+    const nestedHeader = nestedTrigger.closest<HTMLElement>(
+      '[class*="pos_sticky"]',
+    )!;
+    const nestedRoot = nestedHeader.parentElement!;
+
+    // Sections nest — a drawer section hosts the ad-hoc form, which brings
+    // its own — so a focused section that outranked a header painted its
+    // title and rows straight through the header pinned above it.
+    const focusWithinTier = /\[&:focus-within\]:z_\[(\d+)\]/.exec(
+      nestedRoot.className,
+    );
+    const headerTier = /(?:^|\s)z_\[(\d+)\]/.exec(nestedHeader.className);
+    expect(focusWithinTier?.[1]).toBeDefined();
+    expect(headerTier?.[1]).toBeDefined();
+    expect(Number(focusWithinTier![1])).toBeLessThan(Number(headerTier![1]));
+
+    // ...while still winning against a section that is not focused.
+    const restingTier = /(?:^|\s)z_\[(\d+)\]/.exec(nestedRoot.className);
+    expect(Number(restingTier![1])).toBeLessThan(Number(focusWithinTier![1]));
+  });
+});
diff --git a/libs/@hashintel/petrinaut/src/ui/components/section.tsx b/libs/@hashintel/petrinaut/src/ui/components/section.tsx
index f29d9a62dac..81214b5f779 100644
--- a/libs/@hashintel/petrinaut/src/ui/components/section.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/components/section.tsx
@@ -37,8 +37,16 @@ const sectionStyle = css({
   zIndex: "[0]",
   // No vertical padding here — the sticky header owns its own padding so it
   // can fully cover scrolling content underneath it.
+  //
+  // A focused section paints over its unfocused siblings, but never over a
+  // sticky header: sections nest (a drawer section hosting the ad-hoc form,
+  // which brings its own), and the host's header sits at 2 in the same
+  // stacking context. Lifting a focused section above that let the nested
+  // section's title and rows paint straight through the header pinned above
+  // them, so 1 is the ceiling here — high enough to win against a sibling
+  // at 0, low enough to stay under every header.
   "&:focus-within": {
-    zIndex: "[3]",
+    zIndex: "[1]",
   },
 });
 

From b4cf7946b3e2a9772a25185a9dcece53a25e3417 Mon Sep 17 00:00:00 2001
From: Chris Feijoo <chris@kube.io>
Date: Mon, 31 Aug 2026 18:44:32 +0200
Subject: [PATCH 17/17] FE-778: The computed initial state preview scrolls in
 its own region

---
 .../adhoc-form-editing-and-layout-fixes.md    |   9 ++
 libs/@hashintel/petrinaut/docs/experiments.md |   2 +-
 .../experiment-scenario-run.test.tsx          | 117 ++++++++++++++++++
 .../experiments/experiment-scenario-run.tsx   |  27 +++-
 4 files changed, 152 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/adhoc-form-editing-and-layout-fixes.md
 create mode 100644 libs/@hashintel/petrinaut/src/ui/views/Editor/panels/SimulateView/experiments/experiment-scenario-run.test.tsx

diff --git a/.changeset/adhoc-form-editing-and-layout-fixes.md b/.changeset/adhoc-form-editing-and-layout-fixes.md
new file mode 100644
index 00000000000..f0313cea99a
--- /dev/null
+++ b/.changeset/adhoc-form-editing-and-layout-fixes.md
@@ -0,0 +1,9 @@
+---
+"@hashintel/petrinaut": patch
+---
+
+Fix three defects in the ad-hoc scenario form: the optimize bounds popover
+ignored every press (Min, Max, Step and Scale were uneditable, and each press
+dismissed it), a focused section painted over the sticky header of the section
+hosting it, and the experiment drawer's computed initial state grew unbounded
+instead of scrolling in its own region.
diff --git a/libs/@hashintel/petrinaut/docs/experiments.md b/libs/@hashintel/petrinaut/docs/experiments.md
index 147ac77bd69..c7a61f1e909 100644
--- a/libs/@hashintel/petrinaut/docs/experiments.md
+++ b/libs/@hashintel/petrinaut/docs/experiments.md
@@ -21,7 +21,7 @@ Experiments live under the **Simulate** [global mode](drawing-a-net.md#global-mo
 
 With "No scenario" selected, the Scenario section shows the [ad-hoc scenario form](ad-hoc-scenarios.md): define the initial state and parameter values inline for this experiment, without saving a scenario. Left untouched, the experiment runs from the manually-set markings and defaults as before. The experiments table shows "Ad-hoc scenario" in its Scenario column for such runs.
 
-With a scenario selected (and ad-hoc scenarios enabled), the Scenario section shows it through the same form: the scenario parameters take value edits in worksheet style, and a collapsed **Computed state** sub-section underneath previews the exact parameter values and initial tokens each run will start with -- computed only when you open it, and recomputed as you change the values above.
+With a scenario selected (and ad-hoc scenarios enabled), the Scenario section shows it through the same form: the scenario parameters take value edits in worksheet style, and a collapsed **Computed state** sub-section underneath previews the exact parameter values and initial tokens each run will start with -- computed only when you open it, and recomputed as you change the values above. The preview sits in its own tinted panel and scrolls as one, so a net with many places leaves the rest of the drawer in reach.
 | **Runs** | `1000` | Positive integer; how many independent simulations to run. |
 | **Time step (dt)** | `0.1` | Same meaning as in single-run simulations (see [Simulation](simulation.md#time-step-dt)). |
 | **Max time (seconds)** | `180` | Each run advances until simulation time reaches this value, then completes. |
diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/SimulateView/experiments/experiment-scenario-run.test.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/SimulateView/experiments/experiment-scenario-run.test.tsx
new file mode 100644
index 00000000000..6cbad9e74fd
--- /dev/null
+++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/SimulateView/experiments/experiment-scenario-run.test.tsx
@@ -0,0 +1,117 @@
+/**
+ * @vitest-environment jsdom
+ */
+import {
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import { lowerScenarioToHir } from "@hashintel/petrinaut-core/hir";
+
+import {
+  DEFAULT_LANGUAGE_CLIENT_CONTEXT,
+  LanguageClientContext,
+} from "../../../../../../react/lsp/context";
+import { ExperimentScenarioRun } from "./experiment-scenario-run";
+
+import type {
+  AdHocSynthesisContext,
+  Scenario,
+} from "@hashintel/petrinaut-core";
+
+// Monaco cannot run in jsdom; the expression editor becomes a plain textarea.
+vi.mock("../../../../../monaco/code-editor", () => ({
+  CodeEditor: ({ value }: { value?: string }) => (
+    <textarea aria-label="Expression" defaultValue={value ?? ""} />
+  ),
+}));
+
+class ObserverStub {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+  takeRecords(): never[] {
+    return [];
+  }
+}
+globalThis.ResizeObserver = ObserverStub as unknown as typeof ResizeObserver;
+globalThis.IntersectionObserver =
+  ObserverStub as unknown as typeof IntersectionObserver;
+
+afterEach(cleanup);
+
+const place = (index: number) => ({
+  id: `place-${index}`,
+  name: `Place ${index}`,
+  colorId: null,
+  dynamicsEnabled: false,
+  differentialEquationId: null,
+  x: 0,
+  y: 0,
+});
+
+const context: AdHocSynthesisContext = {
+  netParameters: [],
+  places: [place(1), place(2), place(3)],
+  types: [],
+};
+
+const scenario: Scenario = {
+  id: "scenario-1",
+  name: "Baseline",
+  scenarioParameters: [],
+  parameterOverrides: {},
+  initialState: {
+    type: "per_place",
+    content: { "place-1": "1", "place-2": "2", "place-3": "3" },
+  },
+};
+
+// The preview only materializes from a lowered scenario, so the stand-in
+// client lowers with the real compiler instead of the stub's empty HIR.
+const languageClient = {
+  ...DEFAULT_LANGUAGE_CLIENT_CONTEXT,
+  requestScenarioHir: (input: Parameters<typeof lowerScenarioToHir>[0]) =>
+    Promise.resolve(lowerScenarioToHir(input)),
+};
+
+describe("ExperimentScenarioRun", () => {
+  it("renders the computed initial state in a bounded scroll region", async () => {
+    render(
+      <LanguageClientContext value={languageClient}>
+        <ExperimentScenarioRun
+          scenario={scenario}
+          context={context}
+          values={{}}
+          onValuesChange={() => {}}
+        />
+      </LanguageClientContext>,
+    );
+
+    // The preview materializes only once its sub-section is opened.
+    fireEvent.click(
+      screen.getByRole("button", { name: "Toggle Computed state section" }),
+    );
+
+    const title = await waitFor(() => screen.getByText("Initial state"));
+    const region = title.closest<HTMLElement>('[class*="max-h_"]');
+
+    // A net with many places — or one coloured place with many token rows —
+    // would otherwise push Metrics and the drawer's footer out of view.
+    expect(region).not.toBeNull();
+    expect(region!.className).toContain("ov-y_auto");
+    expect(region!.className).toMatch(/max-h_\[\d+px\]/);
+    // Parameters and initial state scroll together inside it, and it reads as
+    // a panel rather than more form.
+    expect(region!.textContent).toContain("Parameters");
+    expect(region!.querySelector("[aria-label='Place 1 › count']")).not.toBe(
+      null,
+    );
+    expect(region!.className).toContain("bg-c_neutral.s20");
+    expect(region!.className).toContain("bd-c_neutral.bd.subtle");
+  });
+});
diff --git a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/SimulateView/experiments/experiment-scenario-run.tsx b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/SimulateView/experiments/experiment-scenario-run.tsx
index 0e3da87cbac..883fedcab22 100644
--- a/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/SimulateView/experiments/experiment-scenario-run.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/views/Editor/panels/SimulateView/experiments/experiment-scenario-run.tsx
@@ -53,6 +53,29 @@ const groupStyle = css({
   gap: "1.5",
 });
 
+// The computed state is a preview, not part of the form: a net with many
+// places (or a coloured place with many token rows) would otherwise push
+// Metrics and the drawer's own footer out of view. Parameters and initial
+// state share one bounded region and scroll together, tinted so the preview
+// reads as a panel the form writes into rather than more form. The left
+// padding covers the 20px the place headers hang their chevron into, plus a
+// gutter, so the hang is not clipped by the region's own overflow.
+const computedStatePreviewStyle = css({
+  display: "flex",
+  flexDirection: "column",
+  gap: "3",
+  maxHeight: "[320px]",
+  overflowY: "auto",
+  backgroundColor: "neutral.s20",
+  borderWidth: "[1px]",
+  borderStyle: "solid",
+  borderColor: "neutral.bd.subtle",
+  borderRadius: "md",
+  paddingY: "2",
+  paddingRight: "2",
+  paddingLeft: "[28px]",
+});
+
 const noticeStyle = css({
   fontSize: "xs",
   color: "neutral.s90",
@@ -214,7 +237,7 @@ export const ExperimentScenarioRun: React.FC<ExperimentScenarioRunProps> = ({
               <div className={noticeStyle}>{computed.notice}</div>
             )}
             {computed?.ready ? (
-              <>
+              <div className={computedStatePreviewStyle}>
                 <div className={groupStyle}>
                   <div className={groupTitleStyle}>Parameters</div>
                   {parameters ?? (
@@ -225,7 +248,7 @@ export const ExperimentScenarioRun: React.FC<ExperimentScenarioRunProps> = ({
                   <div className={groupTitleStyle}>Initial state</div>
                   {places}
                 </div>
-              </>
+              </div>
             ) : null}
           </Section>
         </FormLayoutColumn>