@bian-womp/spark-workbench 0.2.21 → 0.2.23

package/lib/cjs/index.cjs

@@ -534,13 +534,19 @@ class LocalGraphRunner extends AbstractGraphRunner {
         const def = undefined; // UI will supply def/positions on download for local
         const inputs = this.getInputs(this.runtime
             ? {
-                nodes: Array.from(this.runtime.getNodeIds()).map((id) => ({ nodeId: id, typeId: "" })),
+                nodes: Array.from(this.runtime.getNodeIds()).map((id) => ({
+                    nodeId: id,
+                    typeId: "",
+                })),
                 edges: [],
             }
             : { nodes: [], edges: [] });
         const outputs = this.getOutputs(this.runtime
             ? {
-                nodes: Array.from(this.runtime.getNodeIds()).map((id) => ({ nodeId: id, typeId: "" })),
+                nodes: Array.from(this.runtime.getNodeIds()).map((id) => ({
+                    nodeId: id,
+                    typeId: "",
+                })),
                 edges: [],
             }
             : { nodes: [], edges: [] });
@@ -1261,18 +1267,44 @@ function layoutNode(args) {
 }
 
 function toReactFlow(def, positions, registry, opts) {
+    const EDGE_STYLE_MISSING = { stroke: "#f59e0b", strokeWidth: 2 }; // amber-500
     const EDGE_STYLE_ERROR = { stroke: "#ef4444", strokeWidth: 2 };
     const EDGE_STYLE_RUNNING = { stroke: "#3b82f6" };
-    const nodeHandleMap = {};
-    // Precompute which inputs are connected per node
+    // Build a map of valid handles per node up-front
+    const validHandleMap = {};
+    for (const n of def.nodes) {
+        const { inputs, outputs } = computeEffectiveHandles(n, registry);
+        const inputOrder = Object.keys(inputs).filter((k) => !sparkGraph.isInputPrivate(inputs, k));
+        const outputOrder = Object.keys(outputs);
+        validHandleMap[n.nodeId] = {
+            inputs: new Set(inputOrder),
+            outputs: new Set(outputOrder),
+        };
+    }
+    // Track which inputs are connected (for UI) and which handles are missing (for layout)
     const connectedInputs = {};
+    const missingInputsByNode = {};
+    const missingOutputsByNode = {};
     for (const e of def.edges) {
-        const nid = e.target.nodeId;
-        const hid = e.target.handle;
-        if (!connectedInputs[nid])
-            connectedInputs[nid] = new Set();
-        connectedInputs[nid].add(hid);
-    }
+        const tgtId = e.target.nodeId;
+        const tgtHandle = e.target.handle;
+        if (!connectedInputs[tgtId])
+            connectedInputs[tgtId] = new Set();
+        connectedInputs[tgtId].add(tgtHandle);
+        const tgtValid = !!validHandleMap[tgtId]?.inputs.has(tgtHandle);
+        if (!tgtValid) {
+            (missingInputsByNode[tgtId] || (missingInputsByNode[tgtId] = new Set())).add(tgtHandle);
+        }
+        const srcId = e.source.nodeId;
+        const srcHandle = e.source.handle;
+        const srcValid = !!validHandleMap[srcId]?.outputs.has(srcHandle);
+        if (!srcValid) {
+            (missingOutputsByNode[srcId] || (missingOutputsByNode[srcId] = new Set())).add(srcHandle);
+        }
+    }
+    // This map is still used later for certain checks; align with valid handles
+    const nodeHandleMap = {};
+    Object.assign(nodeHandleMap, validHandleMap);
     const nodes = def.nodes.map((n) => {
         const { inputs: inputSource, outputs: outputSource } = computeEffectiveHandles(n, registry);
         const overrideSize = opts.getDefaultNodeSize?.(n.typeId);
@@ -1294,11 +1326,61 @@ function toReactFlow(def, positions, registry, opts) {
             inputs: new Set(inputHandles.map((h) => h.id)),
             outputs: new Set(outputHandles.map((h) => h.id)),
         };
-        // Shared sizing
+        // Append placeholder entries for any missing handles (below valid ones)
+        const baseLeftCount = geom.inputOrder.length;
+        const baseRightCount = geom.outputOrder.length;
+        const extraInputs = Array.from(missingInputsByNode[n.nodeId] || []);
+        const extraOutputs = Array.from(missingOutputsByNode[n.nodeId] || []);
+        const HEADER = NODE_HEADER_HEIGHT_PX;
+        const ROW = NODE_ROW_HEIGHT_PX;
+        const extraHandleLayoutLeft = extraInputs.map((id, i) => ({
+            id,
+            type: "target",
+            position: react.Position.Left,
+            y: HEADER + (baseLeftCount + i) * ROW + ROW / 2,
+            missing: true,
+        }));
+        const extraHandleLayoutRight = extraOutputs.map((id, i) => ({
+            id,
+            type: "source",
+            position: react.Position.Right,
+            y: HEADER + (baseRightCount + i) * ROW + ROW / 2,
+            missing: true,
+        }));
+        const handleLayout = [
+            ...geom.handleLayout,
+            ...extraHandleLayoutLeft,
+            ...extraHandleLayoutRight,
+        ];
+        // Precompute handle bounds (including missing) so edges can render immediately
+        const missingBoundsLeft = extraInputs.map((id, i) => ({
+            id,
+            type: "target",
+            position: react.Position.Left,
+            x: 0,
+            y: HEADER + (baseLeftCount + i) * ROW,
+            width: 1,
+            height: ROW + 2,
+        }));
+        const missingBoundsRight = extraOutputs.map((id, i) => ({
+            id,
+            type: "source",
+            position: react.Position.Right,
+            x: geom.width - 1,
+            y: HEADER + (baseRightCount + i) * ROW,
+            width: 1,
+            height: ROW + 2,
+        }));
+        const handles = [
+            ...geom.handles,
+            ...missingBoundsLeft,
+            ...missingBoundsRight,
+        ];
+        // Adjust node height to accommodate missing handle rows
+        const baseRows = Math.max(baseLeftCount, baseRightCount);
+        const newRows = Math.max(baseLeftCount + extraInputs.length, baseRightCount + extraOutputs.length);
         const initialWidth = geom.width;
-        const initialHeight = geom.height;
-        // Precompute handle bounds so edges can render immediately without waiting for measurement
-        const handles = geom.handles;
+        const initialHeight = geom.height + Math.max(0, newRows - baseRows) * ROW;
         return {
             id: n.nodeId,
             data: {
@@ -1310,7 +1392,7 @@ function toReactFlow(def, positions, registry, opts) {
                     h.id,
                     !!connectedInputs[n.nodeId]?.has(h.id),
                 ])),
-                handleLayout: geom.handleLayout,
+                handleLayout,
                 showValues: opts.showValues,
                 renderWidth: initialWidth,
                 renderHeight: initialHeight,
@@ -1337,24 +1419,21 @@ function toReactFlow(def, positions, registry, opts) {
             height: initialHeight,
         };
     });
-    const edges = def.edges
-        .filter((e) => {
-        const src = nodeHandleMap[e.source.nodeId];
-        const dst = nodeHandleMap[e.target.nodeId];
-        if (!src || !dst)
-            return false;
-        return (src.outputs.has(e.source.handle) && dst.inputs.has(e.target.handle));
-    })
-        .map((e) => {
+    const edges = def.edges.map((e) => {
         const st = opts.edgeStatus?.[e.id];
         const isRunning = !!st?.activeRuns;
         const hasError = !!st?.lastError;
         const isInvalidEdge = !!opts.edgeValidation?.[e.id];
-        const style = hasError || isInvalidEdge
-            ? EDGE_STYLE_ERROR
-            : isRunning
-                ? EDGE_STYLE_RUNNING
-                : undefined;
+        const sourceMissing = !validHandleMap[e.source.nodeId]?.outputs.has(e.source.handle);
+        const targetMissing = !validHandleMap[e.target.nodeId]?.inputs.has(e.target.handle);
+        const isMissing = sourceMissing || targetMissing;
+        const style = isMissing
+            ? EDGE_STYLE_MISSING
+            : hasError || isInvalidEdge
+                ? EDGE_STYLE_ERROR
+                : isRunning
+                    ? EDGE_STYLE_RUNNING
+                    : undefined;
         return {
             id: e.id,
             source: e.source.nodeId,
@@ -1364,7 +1443,7 @@ function toReactFlow(def, positions, registry, opts) {
             selected: opts.selectedEdgeIds
                 ? opts.selectedEdgeIds.has(e.id)
                 : undefined,
-            animated: isRunning,
+            animated: isRunning && !isMissing,
             style,
             label: e.typeId || undefined,
         };
@@ -1420,7 +1499,7 @@ function useWorkbenchContext() {
     return ctx;
 }
 
-function WorkbenchProvider({ wb, runner, registry, setRegistry, children, }) {
+function WorkbenchProvider({ wb, runner, registry, setRegistry, overrides, children, }) {
     const [nodeStatus, setNodeStatus] = React.useState({});
     const [edgeStatus, setEdgeStatus] = React.useState({});
     const [events, setEvents] = React.useState([]);
@@ -1551,8 +1630,14 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, children, }) {
                 if (!node)
                     continue;
                 // Prefer showValues sizing similar to node rendering
-                // Lazy import to avoid circular deps at module top
-                const size = estimateNodeSize({ node, registry, showValues: true });
+                // Consider per-type overrides when available via UI
+                const overrideSize = overrides?.getDefaultNodeSize?.(node.typeId) ?? undefined;
+                const size = estimateNodeSize({
+                    node,
+                    registry,
+                    showValues: true,
+                    overrides: overrideSize,
+                });
                 heights[id] = size.height;
                 if (size.width > maxWidth)
                     maxWidth = size.width;
@@ -1567,7 +1652,7 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, children, }) {
             curX += maxWidth + H_GAP;
         }
         wb.setPositions(pos);
-    }, [wb]);
+    }, [wb, registry, overrides?.getDefaultNodeSize]);
     const updateEdgeType = React.useCallback((edgeId, typeId) => wb.updateEdgeType(edgeId, typeId), [wb]);
     const triggerExternal = React.useCallback((nodeId, event) => runner.triggerExternal(nodeId, event), [runner]);
     // Subscribe to runner/workbench events
@@ -2155,6 +2240,17 @@ function Inspector({ debug, autoScroll, hideWorkbench, onAutoScrollChange, onHid
                                                 }, title: "Delete referenced edge", children: "Delete edge" }))] }, i))) })] }))] })) }), debug && (jsxRuntime.jsx("div", { className: "mt-3 flex-none min-h-0 h-[50%]", children: jsxRuntime.jsx(DebugEvents, { autoScroll: !!autoScroll, hideWorkbench: !!hideWorkbench, onAutoScrollChange: onAutoScrollChange, onHideWorkbenchChange: onHideWorkbenchChange }) }))] }));
 }
 
+function NodeHandleItem({ kind, id, type, position, y, isConnectable, className, labelClassName, renderLabel, }) {
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(react.Handle, { id: id, type: type, position: position, isConnectable: isConnectable, className: className, style: y !== undefined ? { top: y } : undefined }), renderLabel && (jsxRuntime.jsx("div", { className: labelClassName + (kind === "input" ? " left-2" : " right-2"), style: {
+                    top: (y ?? 0) - 8,
+                    ...(kind === "input"
+                        ? { right: "50%" }
+                        : { left: "50%", textAlign: "right" }),
+                    whiteSpace: "nowrap",
+                    overflow: "hidden",
+                    textOverflow: "ellipsis",
+                }, children: renderLabel({ kind, id }) }))] }));
+}
 function NodeHandles({ data, isConnectable, inputClassName = "!w-2 !h-2 !bg-gray-600", outputClassName = "!w-2 !h-2 !bg-gray-600", getClassName, renderLabel, labelClassName = "absolute text-[11px] text-gray-700 dark:text-gray-300 pointer-events-none", }) {
     const layout = data.handleLayout ?? [];
     const byId = React.useMemo(() => {
@@ -2165,40 +2261,49 @@ function NodeHandles({ data, isConnectable, inputClassName = "!w-2 !h-2 !bg-gray
                 position: h.position,
                 y: h.y,
                 type: h.type,
+                missing: h.missing,
             });
             // Back-compat: also store by id-only if not already set
             if (!m.has(h.id))
-                m.set(h.id, { position: h.position, y: h.y, type: h.type });
+                m.set(h.id, {
+                    position: h.position,
+                    y: h.y,
+                    type: h.type,
+                    missing: h.missing,
+                });
         }
         return m;
     }, [layout]);
+    const inputIds = React.useMemo(() => new Set((data.inputHandles ?? []).map((h) => h.id)), [data.inputHandles]);
+    const outputIds = React.useMemo(() => new Set((data.outputHandles ?? []).map((h) => h.id)), [data.outputHandles]);
+    const missingInputs = React.useMemo(() => (layout || []).filter((h) => h.type === "target" && (!inputIds.has(h.id) || h.missing)), [layout, inputIds]);
+    const missingOutputs = React.useMemo(() => (layout || []).filter((h) => h.type === "source" && (!outputIds.has(h.id) || h.missing)), [layout, outputIds]);
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [(data.inputHandles ?? []).map((h) => {
                 const placed = byId.get(`target:${h.id}`) ?? byId.get(h.id);
                 const position = placed?.position ?? react.Position.Left;
                 const y = placed?.y;
                 const cls = getClassName?.({ kind: "input", id: h.id, type: "target" }) ??
                     inputClassName;
-                return (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx(react.Handle, { id: h.id, type: "target", position: position, isConnectable: isConnectable, className: cls, style: y !== undefined ? { top: y } : undefined }), renderLabel && (jsxRuntime.jsx("div", { className: labelClassName + " left-2", style: {
-                                top: (y ?? 0) - 8,
-                                right: "50%",
-                                whiteSpace: "nowrap",
-                                overflow: "hidden",
-                                textOverflow: "ellipsis",
-                            }, children: renderLabel({ kind: "input", id: h.id }) }))] }, h.id));
+                return (jsxRuntime.jsx(NodeHandleItem, { kind: "input", id: h.id, type: "target", position: position, y: y, isConnectable: isConnectable, className: cls, labelClassName: labelClassName, renderLabel: renderLabel }, h.id));
+            }), missingInputs.map((h) => {
+                const key = `missing-input:${h.id}`;
+                const position = h.position ?? react.Position.Left;
+                const y = h.y;
+                const cls = "!w-3 !h-3 !bg-amber-400 !border-amber-500";
+                return (jsxRuntime.jsx(NodeHandleItem, { kind: "input", id: h.id, type: "target", position: position, y: y, isConnectable: false, className: cls, labelClassName: labelClassName, renderLabel: renderLabel }, key));
             }), (data.outputHandles ?? []).map((h) => {
                 const placed = byId.get(`source:${h.id}`) ?? byId.get(h.id);
                 const position = placed?.position ?? react.Position.Right;
                 const y = placed?.y;
                 const cls = getClassName?.({ kind: "output", id: h.id, type: "source" }) ??
                     outputClassName;
-                return (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx(react.Handle, { id: h.id, type: "source", position: position, isConnectable: isConnectable, className: `${cls} wb-nodrag wb-nowheel`, style: y !== undefined ? { top: y } : undefined }), renderLabel && (jsxRuntime.jsx("div", { className: labelClassName + " right-2", style: {
-                                top: (y ?? 0) - 8,
-                                left: "50%",
-                                textAlign: "right",
-                                whiteSpace: "nowrap",
-                                overflow: "hidden",
-                                textOverflow: "ellipsis",
-                            }, children: renderLabel({ kind: "output", id: h.id }) }))] }, h.id));
+                return (jsxRuntime.jsx(NodeHandleItem, { kind: "output", id: h.id, type: "source", position: position, y: y, isConnectable: isConnectable, className: `${cls} wb-nodrag wb-nowheel`, labelClassName: labelClassName, renderLabel: renderLabel }, h.id));
+            }), missingOutputs.map((h) => {
+                const key = `missing-output:${h.id}`;
+                const position = h.position ?? react.Position.Right;
+                const y = h.y;
+                const cls = "!w-3 !h-3 !bg-amber-400 !border-amber-500 !rounded-none wb-nodrag wb-nowheel";
+                return (jsxRuntime.jsx(NodeHandleItem, { kind: "output", id: h.id, type: "source", position: position, y: y, isConnectable: false, className: cls, labelClassName: labelClassName, renderLabel: renderLabel }, key));
             })] }));
 }
 
@@ -2262,6 +2367,18 @@ function DefaultNodeHeader({ id, title, validation, right, showId, onInvalidate,
 }
 function DefaultNodeContent({ data, isConnectable, }) {
     const { showValues, inputValues, outputValues, toString } = data;
+    const prettyHandle = React.useCallback((id) => {
+        try {
+            const parts = String(id).split(":");
+            // If there are exactly 3 colons (4 parts), display only the second part
+            if (parts.length === 4)
+                return parts[1] || id;
+            return id;
+        }
+        catch {
+            return id;
+        }
+    }, []);
     const inputEntries = data.inputHandles ?? [];
     const outputEntries = data.outputHandles ?? [];
     const status = data.status ?? { activeRuns: 0 };
@@ -2279,7 +2396,7 @@ function DefaultNodeContent({ data, isConnectable, }) {
                     const entries = kind === "input" ? inputEntries : outputEntries;
                     const entry = entries.find((e) => e.id === handleId);
                     if (!entry)
-                        return handleId;
+                        return prettyHandle(handleId);
                     const vIssues = (kind === "input" ? validation.inputs : validation.outputs).filter((v) => v.handle === handleId);
                     const hasAny = vIssues.length > 0;
                     const hasErr = vIssues.some((v) => v.level === "error");
@@ -2297,7 +2414,7 @@ function DefaultNodeContent({ data, isConnectable, }) {
                         const txt = toString(resolved.typeId, resolved.value);
                         return typeof txt === "string" ? txt : String(txt);
                     })();
-                    return (jsxRuntime.jsxs("span", { className: "flex items-center gap-1 w-full", children: [kind === "output" ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [valueText !== undefined ? (jsxRuntime.jsx("span", { className: "opacity-60 truncate pl-1", style: { flex: 1, minWidth: 0, maxWidth: "100%" }, children: valueText })) : (jsxRuntime.jsx("span", { style: { flex: 1, minWidth: 0, maxWidth: "100%" } })), jsxRuntime.jsx("span", { className: "truncate shrink-0", style: valueText !== undefined ? { maxWidth: "40%" } : {}, children: handleId })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { className: "truncate shrink-0", style: valueText !== undefined ? { maxWidth: "40%" } : {}, children: handleId }), valueText !== undefined && (jsxRuntime.jsx("span", { className: "opacity-60 truncate pr-1", style: { flex: 1, minWidth: 0, maxWidth: "100%" }, children: valueText }))] })), hasAny && (jsxRuntime.jsx(IssueBadge, { level: hasErr ? "error" : "warning", size: 12, className: "shrink-0", title: title }))] }));
+                    return (jsxRuntime.jsxs("span", { className: "flex items-center gap-1 w-full", children: [kind === "output" ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [valueText !== undefined ? (jsxRuntime.jsx("span", { className: "opacity-60 truncate pl-1", style: { flex: 1, minWidth: 0, maxWidth: "100%" }, children: valueText })) : (jsxRuntime.jsx("span", { style: { flex: 1, minWidth: 0, maxWidth: "100%" } })), jsxRuntime.jsx("span", { className: "truncate shrink-0", style: valueText !== undefined ? { maxWidth: "40%" } : {}, children: prettyHandle(handleId) })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { className: "truncate shrink-0", style: valueText !== undefined ? { maxWidth: "40%" } : {}, children: prettyHandle(handleId) }), valueText !== undefined && (jsxRuntime.jsx("span", { className: "opacity-60 truncate pr-1", style: { flex: 1, minWidth: 0, maxWidth: "100%" }, children: valueText }))] })), hasAny && (jsxRuntime.jsx(IssueBadge, { level: hasErr ? "error" : "warning", size: 12, className: "shrink-0", title: title }))] }));
                 } })] }));
 }
 
@@ -2887,6 +3004,7 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
             return overrides.getExamples(defaultExamples);
         return defaultExamples;
     }, [overrides, defaultExamples]);
+    const [hydrated, setHydrated] = React.useState(false);
     const lastAutoLaunched = React.useRef(undefined);
     const autoLayoutRan = React.useRef(false);
     const canvasRef = React.useRef(null);
@@ -2910,7 +3028,6 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
                     runner.setInputs(nodeId, map);
                 }
             }
-            runAutoLayout();
         };
         onInit({ wb, runner, setInitialGraph });
     }, [onInit, wb, runner, runAutoLayout, registry, setRegistry]);
@@ -3098,7 +3215,7 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
                     createRuntime: () => ({
                         async onInputsChanged() { },
                     }),
-                    policy: { mode: "push", asyncConcurrency: "switch" },
+                    policy: { asyncConcurrency: "switch" },
                 };
                 r.categories.register(category);
             }
@@ -3167,23 +3284,32 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
     }, [engine, runner, wb, backendKind]);
     // When switching to remote backend, auto-hydrate registry from backend
     React.useEffect(() => {
+        let hydrate;
         if (backendKind === "remote-http" && httpBaseUrl) {
-            hydrateFromBackend("remote-http", httpBaseUrl);
+            hydrate = hydrateFromBackend("remote-http", httpBaseUrl);
         }
         else if (backendKind === "remote-ws" && wsUrl) {
-            hydrateFromBackend("remote-ws", wsUrl);
+            hydrate = hydrateFromBackend("remote-ws", wsUrl);
         }
-    }, [backendKind, httpBaseUrl, wsUrl, hydrateFromBackend]);
+        if (hydrate) {
+            hydrate.then(() => {
+                setHydrated(true);
+            });
+        }
+    }, [backendKind, httpBaseUrl, wsUrl, hydrateFromBackend, setHydrated]);
     React.useEffect(() => {
         if (autoLayoutRan.current)
             return;
+        if (backendKind !== "local" && !hydrated)
+            return;
         const cur = wb.export();
-        const allMissing = cur.nodes.every((n) => !wb.getPositions()[n.nodeId]);
+        const positions = wb.getPositions();
+        const allMissing = cur.nodes.every((n) => !positions[n.nodeId]);
         if (allMissing) {
             autoLayoutRan.current = true;
             runAutoLayout();
         }
-    }, [wb, runAutoLayout]);
+    }, [wb, runAutoLayout, backendKind, hydrated]);
     const baseSetInput = React.useCallback((handle, raw) => {
         if (!selectedNodeId)
             return;
@@ -3409,7 +3535,7 @@ function WorkbenchStudio({ engine, onEngineChange, example, onExampleChange, bac
         overrides?.registerUI?.(baseRegisterUI, { wb, wbRunner: runner });
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [wb, runner, overrides]);
-    return (jsxRuntime.jsx(WorkbenchProvider, { wb: wb, runner: runner, registry: registry, setRegistry: setRegistry, children: jsxRuntime.jsx(WorkbenchStudioCanvas, { setRegistry: setRegistry, autoScroll: autoScroll, onAutoScrollChange: onAutoScrollChange, example: example, onExampleChange: onExampleChange, engine: engine, onEngineChange: onEngineChange, backendKind: backendKind, onBackendKindChange: (v) => {
+    return (jsxRuntime.jsx(WorkbenchProvider, { wb: wb, runner: runner, registry: registry, setRegistry: setRegistry, overrides: overrides, children: jsxRuntime.jsx(WorkbenchStudioCanvas, { setRegistry: setRegistry, autoScroll: autoScroll, onAutoScrollChange: onAutoScrollChange, example: example, onExampleChange: onExampleChange, engine: engine, onEngineChange: onEngineChange, backendKind: backendKind, onBackendKindChange: (v) => {
                 if (runner.isRunning())
                     runner.dispose();
                 onBackendKindChange(v);