@bpmnkit/plugins 0.0.19 → 0.0.23

package/dist/process-runner/index.js

@@ -1,3 +1,4 @@
+import { findValidationStructure, getValidationInputNames } from "@bpmnkit/core";
 import { injectProcessRunnerStyles } from "./css.js";
 // ── IndexedDB persistence for input variables ───────────────────────────────
 function openRunnerDb() {
@@ -122,6 +123,27 @@ export function createProcessRunnerPlugin(options) {
     let currentProcessId;
     /** The project ID used to scope input variable persistence. */
     let currentProjectId = null;
+    // Wrappers that prefer the caller-provided callbacks over internal IndexedDB.
+    async function persistScenarios(scenarios) {
+        if (options.onSaveScenarios)
+            return options.onSaveScenarios(scenarios);
+        return saveScenarios(currentProjectId, scenarios);
+    }
+    async function fetchScenarios() {
+        if (options.onLoadScenarios)
+            return options.onLoadScenarios();
+        return loadScenarios(currentProjectId);
+    }
+    async function persistInputVars(vars) {
+        if (options.onSaveInputVars)
+            return options.onSaveInputVars(vars);
+        return saveInputVars(currentProjectId, vars);
+    }
+    async function fetchInputVars() {
+        if (options.onLoadInputVars)
+            return options.onLoadInputVars();
+        return loadInputVars(currentProjectId);
+    }
     /** Pending step resolvers — each represents a paused beforeComplete call. */
     const stepQueue = [];
     /** Accumulated FEEL expression evaluations for the current run. */
@@ -146,6 +168,11 @@ export function createProcessRunnerPlugin(options) {
     let lastChaosRunCompleted = null;
     /** Input variables configured by the user (persisted in IndexedDB). */
     const inputVars = [];
+    /** Which scenario is open in the editor (null = list view). */
+    let editingScenarioId = null;
+    /** Element ID last clicked in the canvas while editing a scenario. */
+    let focusedElementId = null;
+    const MOCKABLE_TASK_TYPES = new Set(["serviceTask", "sendTask", "businessRuleTask", "userTask"]);
     const toolbarEl = document.createElement("div");
     toolbarEl.className = "bpmnkit-runner-toolbar";
     /** Entry button placed in the HUD action bar (styled by initEditorHud). */
@@ -170,12 +197,14 @@ export function createProcessRunnerPlugin(options) {
     const feelTabBtn = makeTabBtn("FEEL", false);
     const errorsTabBtn = makeTabBtn("Errors", false);
     const inputTabBtn = makeTabBtn("Input", false);
-    const testsTabBtn = makeTabBtn("Tests", false);
+    // Tests sub-tab only shown when there is no dedicated testsContainer
+    const testsTabBtn = options.testsContainer === undefined ? makeTabBtn("Tests", false) : null;
     playTabBarEl.appendChild(varTabBtn);
     playTabBarEl.appendChild(feelTabBtn);
     playTabBarEl.appendChild(errorsTabBtn);
     playTabBarEl.appendChild(inputTabBtn);
-    playTabBarEl.appendChild(testsTabBtn);
+    if (testsTabBtn !== null)
+        playTabBarEl.appendChild(testsTabBtn);
     function makePaneEl(hidden) {
         const d = document.createElement("div");
         d.className = hidden
@@ -217,24 +246,34 @@ export function createProcessRunnerPlugin(options) {
     playPanelEl.appendChild(feelPaneEl);
     playPanelEl.appendChild(errorsPaneEl);
     playPanelEl.appendChild(ivarsPaneEl);
-    playPanelEl.appendChild(testsPaneEl);
+    // Mount tests pane into dedicated container when provided, otherwise keep as sub-tab
+    if (options.testsContainer !== undefined) {
+        testsPaneEl.classList.remove("bpmnkit-runner-play-pane--hidden");
+        options.testsContainer.appendChild(testsPaneEl);
+    }
+    else {
+        playPanelEl.appendChild(testsPaneEl);
+    }
     function switchPlayTab(tab) {
         varTabBtn.classList.toggle("bpmnkit-runner-play-tab--active", tab === "variables");
         feelTabBtn.classList.toggle("bpmnkit-runner-play-tab--active", tab === "feel");
         errorsTabBtn.classList.toggle("bpmnkit-runner-play-tab--active", tab === "errors");
         inputTabBtn.classList.toggle("bpmnkit-runner-play-tab--active", tab === "input");
-        testsTabBtn.classList.toggle("bpmnkit-runner-play-tab--active", tab === "tests");
+        testsTabBtn?.classList.toggle("bpmnkit-runner-play-tab--active", tab === "tests");
         varsPaneEl.classList.toggle("bpmnkit-runner-play-pane--hidden", tab !== "variables");
         feelPaneEl.classList.toggle("bpmnkit-runner-play-pane--hidden", tab !== "feel");
         errorsPaneEl.classList.toggle("bpmnkit-runner-play-pane--hidden", tab !== "errors");
         ivarsPaneEl.classList.toggle("bpmnkit-runner-play-pane--hidden", tab !== "input");
-        testsPaneEl.classList.toggle("bpmnkit-runner-play-pane--hidden", tab !== "tests");
+        // testsPaneEl lives in the dock when testsContainer is set — don't hide/show it here
+        if (options.testsContainer === undefined) {
+            testsPaneEl.classList.toggle("bpmnkit-runner-play-pane--hidden", tab !== "tests");
+        }
     }
     varTabBtn.addEventListener("click", () => switchPlayTab("variables"));
     feelTabBtn.addEventListener("click", () => switchPlayTab("feel"));
     errorsTabBtn.addEventListener("click", () => switchPlayTab("errors"));
     inputTabBtn.addEventListener("click", () => switchPlayTab("input"));
-    testsTabBtn.addEventListener("click", () => switchPlayTab("tests"));
+    testsTabBtn?.addEventListener("click", () => switchPlayTab("tests"));
     function computeStateAt(idx) {
         const vars = new Map();
         const feels = [];
@@ -450,6 +489,25 @@ export function createProcessRunnerPlugin(options) {
     }
     function renderInputVars() {
         clearEl(ivarsPaneEl);
+        // ── Validation hints ────────────────────────────────────────────────────
+        if (options.getValidationDmn && options.getDefinitions) {
+            const defs = options.getDefinitions();
+            const startEvent = defs?.processes[0]?.flowElements.find((e) => e.type === "startEvent");
+            if (startEvent && defs) {
+                // getDefinitions returns a minimal interface; cast to BpmnDefinitions-compatible shape
+                const structure = findValidationStructure(defs, startEvent.id);
+                if (structure) {
+                    const dmnXml = options.getValidationDmn(structure.decisionId);
+                    const names = dmnXml ? getValidationInputNames(dmnXml) : [];
+                    if (names.length > 0) {
+                        const hintsEl = document.createElement("div");
+                        hintsEl.className = "bpmnkit-runner-play-ivar-hints";
+                        hintsEl.innerHTML = `<span class="bpmnkit-runner-play-ivar-hints-label">Expected:</span> ${names.map((n) => `<span class="bpmnkit-runner-play-ivar-hint-chip">${n}</span>`).join("")}`;
+                        ivarsPaneEl.appendChild(hintsEl);
+                    }
+                }
+            }
+        }
         for (let i = 0; i < inputVars.length; i++) {
             const entry = inputVars[i];
             if (entry === undefined)
@@ -464,7 +522,7 @@ export function createProcessRunnerPlugin(options) {
                 const v = inputVars[i];
                 if (v !== undefined) {
                     v.name = nameInput.value;
-                    void saveInputVars(currentProjectId, inputVars);
+                    void persistInputVars(inputVars);
                 }
             });
             const eqEl = document.createElement("span");
@@ -478,7 +536,7 @@ export function createProcessRunnerPlugin(options) {
                 const v = inputVars[i];
                 if (v !== undefined) {
                     v.value = valueInput.value;
-                    void saveInputVars(currentProjectId, inputVars);
+                    void persistInputVars(inputVars);
                 }
             });
             const delBtn = document.createElement("button");
@@ -487,7 +545,7 @@ export function createProcessRunnerPlugin(options) {
             delBtn.addEventListener("click", () => {
                 inputVars.splice(i, 1);
                 renderInputVars();
-                void saveInputVars(currentProjectId, inputVars);
+                void persistInputVars(inputVars);
             });
             row.appendChild(nameInput);
             row.appendChild(eqEl);
@@ -501,23 +559,129 @@ export function createProcessRunnerPlugin(options) {
         addBtn.addEventListener("click", () => {
             inputVars.push({ name: "", value: "" });
             renderInputVars();
-            void saveInputVars(currentProjectId, inputVars);
+            void persistInputVars(inputVars);
             // Focus the name field of the new row
             const rows = ivarsPaneEl.querySelectorAll(".bpmnkit-runner-play-ivar-name");
             rows[rows.length - 1]?.focus();
         });
         ivarsPaneEl.appendChild(addBtn);
     }
+    // ── Tests helpers ─────────────────────────────────────────────────────────
+    function parseVarValue(str) {
+        const t = str.trim();
+        if (!t)
+            return "";
+        try {
+            return JSON.parse(t);
+        }
+        catch {
+            return t;
+        }
+    }
+    function formatVarValue(val) {
+        return typeof val === "string" ? val : JSON.stringify(val);
+    }
+    function makeSectionTitle(text) {
+        const el = document.createElement("div");
+        el.className = "bpmnkit-runner-tests-section-title";
+        el.textContent = text;
+        return el;
+    }
+    /** Renders a key=value editor widget. Calls onUpdate whenever entries change. */
+    function makeVarList(vars, addLabel, onUpdate) {
+        const wrap = document.createElement("div");
+        wrap.className = "bpmnkit-runner-tests-varlist";
+        const entries = Object.entries(vars).map(([k, v]) => ({
+            key: k,
+            val: formatVarValue(v),
+        }));
+        function save() {
+            const r = {};
+            for (const e of entries) {
+                if (e.key.trim())
+                    r[e.key.trim()] = parseVarValue(e.val);
+            }
+            onUpdate(r);
+        }
+        function renderList() {
+            clearEl(wrap);
+            for (let i = 0; i < entries.length; i++) {
+                const entry = entries[i];
+                if (entry === undefined)
+                    continue;
+                const row = document.createElement("div");
+                row.className = "bpmnkit-runner-play-ivar-row";
+                const nameInput = document.createElement("input");
+                nameInput.className = "bpmnkit-runner-play-ivar-name";
+                nameInput.placeholder = "name";
+                nameInput.value = entry.key;
+                nameInput.addEventListener("input", () => {
+                    if (entries[i] !== undefined) {
+                        ;
+                        entries[i].key = nameInput.value;
+                        save();
+                    }
+                });
+                const eq = document.createElement("span");
+                eq.className = "bpmnkit-runner-play-ivar-eq";
+                eq.textContent = "=";
+                const valInput = document.createElement("input");
+                valInput.className = "bpmnkit-runner-play-ivar-value";
+                valInput.placeholder = "value";
+                valInput.value = entry.val;
+                valInput.addEventListener("input", () => {
+                    if (entries[i] !== undefined) {
+                        ;
+                        entries[i].val = valInput.value;
+                        save();
+                    }
+                });
+                const del = document.createElement("button");
+                del.className = "bpmnkit-runner-play-ivar-del";
+                del.textContent = "\u00D7";
+                del.addEventListener("click", () => {
+                    entries.splice(i, 1);
+                    renderList();
+                    save();
+                });
+                row.appendChild(nameInput);
+                row.appendChild(eq);
+                row.appendChild(valInput);
+                row.appendChild(del);
+                wrap.appendChild(row);
+            }
+            const addBtn = document.createElement("button");
+            addBtn.className = "bpmnkit-runner-play-ivar-add";
+            addBtn.textContent = addLabel;
+            addBtn.addEventListener("click", () => {
+                entries.push({ key: "", val: "" });
+                renderList();
+                const inputs = wrap.querySelectorAll(".bpmnkit-runner-play-ivar-name");
+                inputs[inputs.length - 1]?.focus();
+            });
+            wrap.appendChild(addBtn);
+        }
+        renderList();
+        return wrap;
+    }
     // ── Tests tab ────────────────────────────────────────────────────────────
     const scenarios = [];
     const scenarioResults = new Map();
     function renderTests() {
+        if (editingScenarioId !== null) {
+            renderScenarioEditor();
+        }
+        else {
+            renderScenarioList();
+        }
+    }
+    function renderScenarioList() {
         clearEl(testsPaneEl);
         if (options.runScenario === undefined) {
             testsPaneEl.appendChild(emptyEl("Pass runScenario in options to enable the Tests tab."));
             return;
         }
-        // Run all button
+        // Header
         const headerEl = document.createElement("div");
         headerEl.className = "bpmnkit-runner-tests-header";
         const runAllBtn = document.createElement("button");
@@ -535,7 +699,7 @@ export function createProcessRunnerPlugin(options) {
         headerEl.appendChild(runAllBtn);
         const addBtn = document.createElement("button");
         addBtn.className = "bpmnkit-runner-btn bpmnkit-runner-tests-add";
-        addBtn.textContent = "+ New scenario";
+        addBtn.textContent = "+ New";
         addBtn.addEventListener("click", () => {
             const id = `scenario-${Date.now()}`;
             scenarios.push({
@@ -545,11 +709,12 @@ export function createProcessRunnerPlugin(options) {
                 mocks: {},
                 expect: {},
             });
-            void saveScenarios(currentProjectId, scenarios);
+            void persistScenarios(scenarios);
+            editingScenarioId = id;
+            focusedElementId = null;
             renderTests();
         });
         headerEl.appendChild(addBtn);
-        // AI generate scenarios button
         if (options.generateScenarios !== undefined) {
             const genBtn = document.createElement("button");
             genBtn.className = "bpmnkit-runner-btn bpmnkit-runner-tests-gen";
@@ -561,14 +726,13 @@ export function createProcessRunnerPlugin(options) {
                 void options.generateScenarios()
                     .then((newScenarios) => {
                     scenarios.push(...newScenarios);
-                    void saveScenarios(currentProjectId, scenarios);
+                    void persistScenarios(scenarios);
                 })
                     .catch(() => undefined)
                     .finally(() => renderTests());
             });
             headerEl.appendChild(genBtn);
         }
-        // Import chaos findings as draft scenarios
         if (lastChaosInjections.length > 0 && options.getJobType !== undefined) {
             const importChaosBtn = document.createElement("button");
             importChaosBtn.className = "bpmnkit-runner-btn bpmnkit-runner-tests-chaos-import";
@@ -592,7 +756,7 @@ export function createProcessRunnerPlugin(options) {
                 }
                 if (newScenarios.length > 0) {
                     scenarios.push(...newScenarios);
-                    void saveScenarios(currentProjectId, scenarios);
+                    void persistScenarios(scenarios);
                     renderTests();
                 }
             });
@@ -600,7 +764,7 @@ export function createProcessRunnerPlugin(options) {
         }
         testsPaneEl.appendChild(headerEl);
         if (scenarios.length === 0) {
-            testsPaneEl.appendChild(emptyEl("No test scenarios yet. Click + New scenario."));
+            testsPaneEl.appendChild(emptyEl("No test scenarios yet. Click + New."));
             return;
         }
         for (let i = 0; i < scenarios.length; i++) {
@@ -616,15 +780,17 @@ export function createProcessRunnerPlugin(options) {
             const statusEl = document.createElement("span");
             statusEl.className = "bpmnkit-runner-tests-status";
             statusEl.textContent = result === undefined ? "\u25CB" : result.passed ? "\u2713" : "\u2717";
-            const nameInput = document.createElement("input");
-            nameInput.className = "bpmnkit-runner-tests-name";
-            nameInput.value = scenario.name;
-            nameInput.addEventListener("input", () => {
-                if (scenarios[i] !== undefined) {
-                    ;
-                    scenarios[i].name = nameInput.value;
-                    void saveScenarios(currentProjectId, scenarios);
-                }
+            const nameEl = document.createElement("span");
+            nameEl.className = "bpmnkit-runner-tests-name-label";
+            nameEl.textContent = scenario.name;
+            const editBtn = document.createElement("button");
+            editBtn.className = "bpmnkit-runner-btn bpmnkit-runner-tests-edit";
+            editBtn.textContent = "\u270E";
+            editBtn.title = "Edit scenario";
+            editBtn.addEventListener("click", () => {
+                editingScenarioId = scenario.id;
+                focusedElementId = null;
+                renderTests();
             });
             const runOneBtn = document.createElement("button");
             runOneBtn.className = "bpmnkit-runner-btn bpmnkit-runner-tests-run-one";
@@ -643,15 +809,16 @@ export function createProcessRunnerPlugin(options) {
             delBtn.addEventListener("click", () => {
                 scenarios.splice(i, 1);
                 scenarioResults.delete(scenario.id);
-                void saveScenarios(currentProjectId, scenarios);
+                void persistScenarios(scenarios);
                 renderTests();
             });
             rowEl.appendChild(statusEl);
-            rowEl.appendChild(nameInput);
+            rowEl.appendChild(nameEl);
+            rowEl.appendChild(editBtn);
             rowEl.appendChild(runOneBtn);
             rowEl.appendChild(delBtn);
             testsPaneEl.appendChild(rowEl);
-            // Expandable diff on failure
+            // Failure diff
             if (result !== undefined && !result.passed) {
                 const diffEl = document.createElement("div");
                 diffEl.className = "bpmnkit-runner-tests-diff";
@@ -671,6 +838,310 @@ export function createProcessRunnerPlugin(options) {
             }
         }
     }
+    function renderScenarioEditor() {
+        clearEl(testsPaneEl);
+        const scenario = scenarios.find((s) => s.id === editingScenarioId);
+        if (scenario === undefined) {
+            editingScenarioId = null;
+            renderScenarioList();
+            return;
+        }
+        const result = scenarioResults.get(scenario.id);
+        // ── Editor header ───────────────────────────────────────────────────────
+        const headerEl = document.createElement("div");
+        headerEl.className = "bpmnkit-runner-tests-editor-header";
+        const backBtn = document.createElement("button");
+        backBtn.className = "bpmnkit-runner-btn bpmnkit-runner-tests-back";
+        backBtn.textContent = "\u2190 Back";
+        backBtn.addEventListener("click", () => {
+            editingScenarioId = null;
+            focusedElementId = null;
+            renderTests();
+        });
+        headerEl.appendChild(backBtn);
+        const nameInput = document.createElement("input");
+        nameInput.className = "bpmnkit-runner-tests-editor-name";
+        nameInput.value = scenario.name;
+        nameInput.placeholder = "Scenario name";
+        nameInput.addEventListener("input", () => {
+            scenario.name = nameInput.value;
+            void persistScenarios(scenarios);
+        });
+        headerEl.appendChild(nameInput);
+        const runBtn = document.createElement("button");
+        runBtn.className = "bpmnkit-runner-btn bpmnkit-runner-tests-run-one";
+        runBtn.textContent = "\u25B6 Run";
+        runBtn.title = "Run this scenario";
+        if (options.runScenario !== undefined) {
+            runBtn.addEventListener("click", () => {
+                runBtn.disabled = true;
+                void options.runScenario(scenario).then((r) => {
+                    scenarioResults.set(scenario.id, r);
+                    renderTests();
+                });
+            });
+        }
+        else {
+            runBtn.disabled = true;
+        }
+        headerEl.appendChild(runBtn);
+        if (result !== undefined) {
+            const badge = document.createElement("span");
+            badge.className = `bpmnkit-runner-tests-editor-badge ${result.passed ? "bpmnkit-runner-tests-editor-badge--pass" : "bpmnkit-runner-tests-editor-badge--fail"}`;
+            badge.textContent = result.passed ? "\u2713 passed" : "\u2717 failed";
+            headerEl.appendChild(badge);
+        }
+        testsPaneEl.appendChild(headerEl);
+        // ── Start Variables ──────────────────────────────────────────────────────
+        testsPaneEl.appendChild(makeSectionTitle("Start Variables"));
+        testsPaneEl.appendChild(makeVarList(scenario.inputs ?? {}, "+ Add variable", (updated) => {
+            scenario.inputs = updated;
+            void persistScenarios(scenarios);
+        }));
+        // ── Task Mocks ──────────────────────────────────────────────────────────
+        const defs = options.getDefinitions?.() ?? null;
+        // Decisions referenced by BRTs — used both for filtering mocks and for missing-DMN warnings
+        const referencedDecisions = defs?.processes.flatMap((p) => p.flowElements.flatMap((e) => e.type === "businessRuleTask" && e.decisionId ? [e.decisionId] : [])) ?? [];
+        const missingDmns = options.getValidationDmn
+            ? referencedDecisions.filter((id) => options.getValidationDmn?.(id) === null)
+            : [];
+        const mockableTasks = defs?.processes.flatMap((p) => p.flowElements.filter((e) => {
+            if (!MOCKABLE_TASK_TYPES.has(e.type))
+                return false;
+            // BRTs with calledDecision run internally via DMN — no external job, no mock needed
+            if (e.type === "businessRuleTask" && e.decisionId)
+                return false;
+            return true;
+        })) ?? [];
+        if (mockableTasks.length > 0) {
+            testsPaneEl.appendChild(makeSectionTitle("Task Outputs"));
+            const hintEl = document.createElement("div");
+            hintEl.className = "bpmnkit-runner-tests-hint";
+            hintEl.textContent = "Click a task in the diagram to configure its mock output.";
+            testsPaneEl.appendChild(hintEl);
+            for (const task of mockableTasks) {
+                const jobType = options.getJobType?.(task.id) ?? task.id;
+                const mock = scenario.mocks?.[jobType] ?? {};
+                const isFocused = focusedElementId === task.id;
+                const taskEl = document.createElement("div");
+                taskEl.className = `bpmnkit-runner-tests-task${isFocused ? " bpmnkit-runner-tests-task--focused" : ""}`;
+                taskEl.dataset.elementId = task.id;
+                const taskHeaderEl = document.createElement("div");
+                taskHeaderEl.className = "bpmnkit-runner-tests-task-header";
+                const taskNameEl = document.createElement("span");
+                taskNameEl.className = "bpmnkit-runner-tests-task-name";
+                taskNameEl.textContent = task.name ?? task.id;
+                const typeEl = document.createElement("span");
+                typeEl.className = "bpmnkit-runner-tests-task-badge";
+                typeEl.textContent = task.type.replace("Task", "");
+                taskHeaderEl.appendChild(taskNameEl);
+                taskHeaderEl.appendChild(typeEl);
+                taskEl.appendChild(taskHeaderEl);
+                // Click header to focus/unfocus
+                taskHeaderEl.addEventListener("click", () => {
+                    focusedElementId = isFocused ? null : task.id;
+                    renderTests();
+                });
+                if (isFocused) {
+                    const bodyEl = document.createElement("div");
+                    bodyEl.className = "bpmnkit-runner-tests-task-body";
+                    // Output variables
+                    bodyEl.appendChild(makeVarList(mock.outputs ?? {}, "+ Add output", (updated) => {
+                        if (scenario.mocks === undefined)
+                            scenario.mocks = {};
+                        scenario.mocks[jobType] = { ...mock, outputs: updated };
+                        void persistScenarios(scenarios);
+                    }));
+                    // Error field
+                    const errorRow = document.createElement("div");
+                    errorRow.className = "bpmnkit-runner-tests-error-row";
+                    const errorLabel = document.createElement("label");
+                    errorLabel.className = "bpmnkit-runner-tests-error-label";
+                    errorLabel.textContent = "Fail with error:";
+                    const errorInput = document.createElement("input");
+                    errorInput.className = "bpmnkit-runner-tests-error-input";
+                    errorInput.placeholder = "error message (leave blank to complete)";
+                    errorInput.value = mock.error ?? "";
+                    errorInput.addEventListener("input", () => {
+                        if (scenario.mocks === undefined)
+                            scenario.mocks = {};
+                        const err = errorInput.value.trim() || undefined;
+                        scenario.mocks[jobType] = { ...mock, error: err };
+                        void persistScenarios(scenarios);
+                    });
+                    errorRow.appendChild(errorLabel);
+                    errorRow.appendChild(errorInput);
+                    bodyEl.appendChild(errorRow);
+                    taskEl.appendChild(bodyEl);
+                }
+                testsPaneEl.appendChild(taskEl);
+            }
+        }
+        // ── Missing DMN warning ──────────────────────────────────────────────────
+        if (missingDmns.length > 0) {
+            const warnEl = document.createElement("div");
+            warnEl.className = "bpmnkit-runner-tests-missing-dmn";
+            warnEl.textContent = `⚠ Decision model${missingDmns.length > 1 ? "s" : ""} not found: ${missingDmns.join(", ")}. Import the DMN in the Models view.`;
+            testsPaneEl.appendChild(warnEl);
+        }
+        // ── Expected Variables ──────────────────────────────────────────────────
+        testsPaneEl.appendChild(makeSectionTitle("Expected Variables"));
+        testsPaneEl.appendChild(makeVarList(scenario.expect?.variables ?? {}, "+ Add assertion", (updated) => {
+            if (scenario.expect === undefined)
+                scenario.expect = {};
+            scenario.expect.variables = updated;
+            void persistScenarios(scenarios);
+        }));
+        // ── Failure details ─────────────────────────────────────────────────────
+        if (result !== undefined && (result.failures.length > 0 || result.errors.length > 0)) {
+            testsPaneEl.appendChild(makeSectionTitle("Last Run Failures"));
+            const diffEl = document.createElement("div");
+            diffEl.className = "bpmnkit-runner-tests-diff";
+            for (const f of result.failures) {
+                const row = document.createElement("div");
+                row.className = "bpmnkit-runner-tests-diff-row";
+                row.textContent = `${f.field}: expected ${JSON.stringify(f.expected)}, got ${JSON.stringify(f.actual)}`;
+                diffEl.appendChild(row);
+            }
+            for (const e of result.errors) {
+                const row = document.createElement("div");
+                row.className = "bpmnkit-runner-tests-diff-row bpmnkit-runner-tests-diff-error";
+                row.textContent = `Error${e.elementId !== undefined ? ` (${e.elementId})` : ""}: ${e.message}`;
+                diffEl.appendChild(row);
+            }
+            testsPaneEl.appendChild(diffEl);
+        }
+        // ── Last Run Trace ───────────────────────────────────────────────────────
+        if (result !== undefined) {
+            const traceResult = result;
+            testsPaneEl.appendChild(makeSectionTitle("Last Run Trace"));
+            const traceTabsEl = document.createElement("div");
+            traceTabsEl.className = "bpmnkit-runner-play-tabs bpmnkit-runner-tests-trace-tabs";
+            const tracePaneEl = document.createElement("div");
+            tracePaneEl.className = "bpmnkit-runner-tests-trace-pane";
+            let activeTraceTab = "vars";
+            const tVarBtn = makeTabBtn("Variables", true);
+            const tFeelBtn = makeTabBtn("FEEL", false);
+            const tElemBtn = makeTabBtn("Elements", false);
+            function renderTraceTab() {
+                clearEl(tracePaneEl);
+                tVarBtn.className =
+                    activeTraceTab === "vars"
+                        ? "bpmnkit-runner-play-tab bpmnkit-runner-play-tab--active"
+                        : "bpmnkit-runner-play-tab";
+                tFeelBtn.className =
+                    activeTraceTab === "feel"
+                        ? "bpmnkit-runner-play-tab bpmnkit-runner-play-tab--active"
+                        : "bpmnkit-runner-play-tab";
+                tElemBtn.className =
+                    activeTraceTab === "elements"
+                        ? "bpmnkit-runner-play-tab bpmnkit-runner-play-tab--active"
+                        : "bpmnkit-runner-play-tab";
+                if (activeTraceTab === "vars") {
+                    const entries = Object.entries(traceResult.finalVariables);
+                    if (entries.length === 0) {
+                        tracePaneEl.appendChild(emptyEl("No variables."));
+                    }
+                    else {
+                        for (const [name, value] of entries) {
+                            const row = document.createElement("div");
+                            row.className = "bpmnkit-runner-play-var-row";
+                            const nameEl = document.createElement("span");
+                            nameEl.className = "bpmnkit-runner-play-var-name";
+                            nameEl.textContent = name;
+                            const valueEl = document.createElement("span");
+                            valueEl.className = "bpmnkit-runner-play-var-value";
+                            valueEl.textContent = JSON.stringify(value);
+                            row.append(nameEl, valueEl);
+                            tracePaneEl.appendChild(row);
+                        }
+                    }
+                }
+                else if (activeTraceTab === "feel") {
+                    const evals = traceResult.feelEvals;
+                    if (evals.length === 0) {
+                        tracePaneEl.appendChild(emptyEl("No FEEL evaluations recorded."));
+                    }
+                    else {
+                        const groups = new Map();
+                        for (const ev of evals) {
+                            let arr = groups.get(ev.elementId);
+                            if (arr === undefined) {
+                                arr = [];
+                                groups.set(ev.elementId, arr);
+                            }
+                            arr.push({ property: ev.property, expression: ev.expression, result: ev.result });
+                        }
+                        for (const [elementId, evArr] of groups) {
+                            const groupEl = document.createElement("div");
+                            groupEl.className = "bpmnkit-runner-play-feel-group";
+                            const headerEl = document.createElement("div");
+                            headerEl.className = "bpmnkit-runner-play-feel-header";
+                            headerEl.textContent = elementId;
+                            groupEl.appendChild(headerEl);
+                            for (const ev of evArr) {
+                                const rowEl = document.createElement("div");
+                                rowEl.className = "bpmnkit-runner-play-feel-row";
+                                const propEl = document.createElement("div");
+                                propEl.className = "bpmnkit-runner-play-feel-prop";
+                                propEl.textContent = ev.property;
+                                const exprEl = document.createElement("code");
+                                exprEl.className = "bpmnkit-runner-play-feel-expr";
+                                exprEl.textContent = ev.expression;
+                                const resultRowEl = document.createElement("div");
+                                resultRowEl.className = "bpmnkit-runner-play-feel-result-row";
+                                const arrowEl = document.createElement("span");
+                                arrowEl.className = "bpmnkit-runner-play-feel-arrow";
+                                arrowEl.textContent = "\u2192";
+                                const resultEl = document.createElement("span");
+                                resultEl.className = "bpmnkit-runner-play-feel-result";
+                                resultEl.textContent = JSON.stringify(ev.result);
+                                resultRowEl.append(arrowEl, resultEl);
+                                rowEl.append(propEl, exprEl, resultRowEl);
+                                groupEl.appendChild(rowEl);
+                            }
+                            tracePaneEl.appendChild(groupEl);
+                        }
+                    }
+                }
+                else {
+                    const elems = traceResult.visitedElements;
+                    if (elems.length === 0) {
+                        tracePaneEl.appendChild(emptyEl("No elements visited."));
+                    }
+                    else {
+                        for (let i = 0; i < elems.length; i++) {
+                            const row = document.createElement("div");
+                            row.className = "bpmnkit-runner-tests-trace-elem-row";
+                            const idxEl = document.createElement("span");
+                            idxEl.className = "bpmnkit-runner-tests-trace-elem-idx";
+                            idxEl.textContent = String(i + 1);
+                            const idEl = document.createElement("span");
+                            idEl.className = "bpmnkit-runner-tests-trace-elem-id";
+                            idEl.textContent = elems[i] ?? "";
+                            row.append(idxEl, idEl);
+                            tracePaneEl.appendChild(row);
+                        }
+                    }
+                }
+            }
+            tVarBtn.addEventListener("click", () => {
+                activeTraceTab = "vars";
+                renderTraceTab();
+            });
+            tFeelBtn.addEventListener("click", () => {
+                activeTraceTab = "feel";
+                renderTraceTab();
+            });
+            tElemBtn.addEventListener("click", () => {
+                activeTraceTab = "elements";
+                renderTraceTab();
+            });
+            traceTabsEl.append(tVarBtn, tFeelBtn, tElemBtn);
+            renderTraceTab();
+            testsPaneEl.append(traceTabsEl, tracePaneEl);
+        }
+    }
     // ── Helpers ────────────────────────────────────────────────────────────
     function getPrimaryProcessId() {
         return currentProcessId;
@@ -950,13 +1421,13 @@ export function createProcessRunnerPlugin(options) {
             }
             // Load persisted input variables and scenarios for the initial project
             currentProjectId = options.getProjectId?.() ?? null;
-            void loadInputVars(currentProjectId).then((loaded) => {
+            void fetchInputVars().then((loaded) => {
                 inputVars.length = 0;
                 for (const v of loaded)
                     inputVars.push(v);
                 renderInputVars();
             });
-            void loadScenarios(currentProjectId).then((loaded) => {
+            void fetchScenarios().then((loaded) => {
                 scenarios.length = 0;
                 for (const s of loaded)
                     scenarios.push(s);
@@ -969,7 +1440,7 @@ export function createProcessRunnerPlugin(options) {
                         scenarios.length = 0;
                         for (const s of sidecar)
                             scenarios.push(s);
-                        void saveScenarios(currentProjectId, scenarios);
+                        void persistScenarios(scenarios);
                         renderTests();
                     }
                 });
@@ -984,13 +1455,13 @@ export function createProcessRunnerPlugin(options) {
                 const pid = options.getProjectId?.() ?? null;
                 if (pid !== currentProjectId) {
                     currentProjectId = pid;
-                    void loadInputVars(pid).then((loaded) => {
+                    void fetchInputVars().then((loaded) => {
                         inputVars.length = 0;
                         for (const v of loaded)
                             inputVars.push(v);
                         renderInputVars();
                     });
-                    void loadScenarios(pid).then((loaded) => {
+                    void fetchScenarios().then((loaded) => {
                         scenarios.length = 0;
                         for (const s of loaded)
                             scenarios.push(s);
@@ -1005,7 +1476,7 @@ export function createProcessRunnerPlugin(options) {
                                 for (const s of sidecar)
                                     scenarios.push(s);
                                 scenarioResults.clear();
-                                void saveScenarios(currentProjectId, scenarios);
+                                void persistScenarios(scenarios);
                                 renderTests();
                             }
                         });
@@ -1023,6 +1494,18 @@ export function createProcessRunnerPlugin(options) {
                 engine.deploy({ bpmn: defs });
                 if (currentInstance !== null)
                     cleanup();
+            }), onAny("element:click", (evt) => {
+                if (editingScenarioId === null)
+                    return;
+                const typed = evt;
+                const elementId = typed.element?.id;
+                if (elementId === undefined)
+                    return;
+                const elementType = typed.element?.type ?? "";
+                if (!MOCKABLE_TASK_TYPES.has(elementType))
+                    return;
+                focusedElementId = focusedElementId === elementId ? null : elementId;
+                renderTests();
             }));
         },
         uninstall() {