@kiberon-labs/behave-graph-flow 1.0.0 → 3.0.0

package/src/generators/SwitchOnIntegerGenerator.tsx

@@ -0,0 +1,256 @@
+import React, { useCallback, useState } from 'react';
+import {
+  VscodeButton,
+  VscodeTextfield,
+  VscodeSingleSelect,
+  VscodeOption
+} from '@vscode-elements/react-elements';
+import { Plus, Minus } from 'iconoir-react';
+
+import { useGraph } from '@/system/provider';
+import type { SocketGeneratorRenderProps } from '@/store/socketGenerator';
+import type { NodeSpecJSON } from '@kiberon-labs/behave-graph/Graphs/IO/NodeSpecJSON';
+
+const NAME = 'flow/switch/integer.socketGenerator';
+
+export function getSwitchOnIntegerGenerator() {
+  return {
+    name: NAME,
+    check: (spec: NodeSpecJSON) => spec?.type === 'flow/switch/integer',
+    render: SwitchOnIntegerGenerator
+  };
+}
+
+const SwitchOnIntegerGenerator: React.FC<SocketGeneratorRenderProps> = ({
+  node
+}) => {
+  const system = useGraph();
+
+  const numCases = node.data.configuration?.numCases ?? 0;
+  const caseLabels = node.data.configuration?.caseLabels ?? {};
+  const caseValues = node.data.configuration?.cases ?? {};
+
+  const [selectedCase, setSelectedCase] = useState<number>(1);
+
+  const updateNumCases = useCallback(
+    (newNumCases: number) => {
+      if (newNumCases < 0) return;
+
+      system.nodeStore.getState().setNodes((prev) =>
+        prev.map((n) => {
+          if (n.id !== node.id) return n;
+
+          // Preserve existing case values when changing numCases
+          const existingCases = n.data?.configuration?.cases ?? {};
+          const newCases: Record<string, bigint> = {};
+          for (let i = 1; i <= newNumCases; i++) {
+            const key = `${i}`;
+            newCases[key] = existingCases[key] ?? BigInt(i);
+          }
+
+          // Generate input sockets for each case
+          const inputs = [];
+          for (let i = 1; i <= newNumCases; i++) {
+            const key = `${i}`;
+            inputs.push({
+              name: n.data.configuration?.caseLabels?.[key] || key,
+              key,
+              valueType: 'integer'
+            });
+          }
+
+          // Generate output sockets for each case
+          const outputs = [];
+          for (let i = 1; i <= newNumCases; i++) {
+            const label = n.data.configuration?.caseLabels?.[`${i}`] || `${i}`;
+            outputs.push({
+              name: label,
+              key: `${i}`,
+              valueType: 'flow'
+            });
+          }
+          // Add default output
+          outputs.push({
+            name: 'default',
+            key: 'default',
+            valueType: 'flow'
+          });
+
+          return {
+            ...n,
+            data: {
+              ...n.data,
+              configuration: {
+                ...n.data.configuration,
+                numCases: newNumCases,
+                cases: newCases
+              },
+              dynamicPorts: {
+                ...n.data.dynamicPorts,
+                inputs,
+                outputs
+              }
+            }
+          };
+        })
+      );
+
+      if (selectedCase > newNumCases && newNumCases > 0) {
+        setSelectedCase(newNumCases);
+      }
+    },
+    [node.id, system, selectedCase]
+  );
+
+  const updateCaseValue = useCallback(
+    (caseIndex: number, value: string) => {
+      const intValue =
+        value === ''
+          ? BigInt(caseIndex)
+          : BigInt(parseInt(value, 10) || caseIndex);
+      system.nodeStore.getState().setNodes((prev) =>
+        prev.map((n: any) => {
+          if (n.id !== node.id) return n;
+
+          const updatedCases = {
+            ...n.data?.configuration?.cases,
+            [`${caseIndex}`]: intValue
+          };
+
+          const updatedLabels = {
+            ...n.data?.configuration?.caseLabels,
+            [`${caseIndex}`]: value || `${caseIndex}`
+          };
+
+          // Update input sockets
+          const numCases = n.data?.configuration?.numCases ?? 0;
+          const inputs = [];
+          for (let i = 1; i <= numCases; i++) {
+            const key = `${i}`;
+            inputs.push({
+              name: updatedLabels[key] || key,
+              key,
+              valueType: 'integer'
+            });
+          }
+
+          // Regenerate output sockets with updated labels
+          const outputs = [];
+          for (let i = 1; i <= numCases; i++) {
+            const label = updatedLabels[`${i}`] || `${i}`;
+            outputs.push({
+              name: label,
+              key: `${i}`,
+              valueType: 'flow'
+            });
+          }
+          outputs.push({
+            name: 'default',
+            key: 'default',
+            valueType: 'flow'
+          });
+
+          return {
+            ...n,
+            data: {
+              ...n.data,
+              dynamicPorts: {
+                ...n.data?.dynamicPorts,
+                inputs,
+                outputs
+              },
+              configuration: {
+                ...n.data?.configuration,
+                cases: updatedCases,
+                caseLabels: updatedLabels
+              }
+            }
+          };
+        })
+      );
+    },
+    [node.id, system]
+  );
+
+  const addCase = useCallback(() => {
+    const newCount = numCases + 1;
+    updateNumCases(newCount);
+    setSelectedCase(newCount);
+  }, [numCases, updateNumCases]);
+
+  const removeCase = useCallback(() => {
+    updateNumCases(Math.max(0, numCases - 1));
+  }, [numCases, updateNumCases]);
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 8
+      }}
+    >
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          marginBottom: 4
+        }}
+      >
+        <div style={{ fontSize: 12, opacity: 0.9 }}>Cases: {numCases}</div>
+      </div>
+
+      {numCases > 0 && (
+        <>
+          <div style={{ fontSize: 11, opacity: 0.8, marginBottom: -4 }}>
+            Edit Case
+          </div>
+          <VscodeSingleSelect
+            value={String(selectedCase)}
+            onChange={(e: any) => setSelectedCase(Number(e.target.value))}
+          >
+            {Array.from({ length: numCases }, (_, i) => i + 1).map(
+              (caseIndex) => (
+                <VscodeOption key={caseIndex} value={String(caseIndex)}>
+                  {caseLabels[`${caseIndex}`] || `Case ${caseIndex}`}
+                </VscodeOption>
+              )
+            )}
+          </VscodeSingleSelect>
+
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
+            <label style={{ fontSize: 11, opacity: 0.8 }}>Match Value</label>
+            <VscodeTextfield
+              type="number"
+              value={
+                caseValues[`${selectedCase}`] !== undefined
+                  ? String(caseValues[`${selectedCase}`])
+                  : ''
+              }
+              onInput={(e: any) =>
+                updateCaseValue(selectedCase, e.target.value)
+              }
+              placeholder={`Integer value for case ${selectedCase}`}
+            />
+          </div>
+        </>
+      )}
+
+      <div style={{ display: 'flex', gap: 4, marginTop: 4 }}>
+        <VscodeButton onClick={addCase} title="Add Case" iconOnly>
+          <Plus />
+        </VscodeButton>
+        <VscodeButton
+          onClick={removeCase}
+          secondary
+          iconOnly
+          title="Remove Case"
+          disabled={numCases === 0}
+        >
+          <Minus />
+        </VscodeButton>
+      </div>
+    </div>
+  );
+};

package/src/generators/SwitchOnStringGenerator.tsx

@@ -0,0 +1,263 @@
+import React, { useCallback, useState } from 'react';
+import {
+  VscodeButton,
+  VscodeTextfield,
+  VscodeSingleSelect,
+  VscodeOption
+} from '@vscode-elements/react-elements';
+import { Plus, Minus } from 'iconoir-react';
+
+import { useGraph } from '@/system/provider';
+import type { SocketGeneratorRenderProps } from '@/store/socketGenerator';
+import type { NodeSpecJSON } from '@kiberon-labs/behave-graph/Graphs/IO/NodeSpecJSON';
+
+const NAME = 'flow/switch/string.socketGenerator';
+
+export function getSwitchOnStringGenerator() {
+  return {
+    name: NAME,
+    check: (spec: NodeSpecJSON) => spec?.type === 'flow/switch/string',
+    render: SwitchOnStringGenerator
+  };
+}
+
+const SwitchOnStringGenerator: React.FC<SocketGeneratorRenderProps> = ({
+  node
+}) => {
+  const system = useGraph();
+
+  const numCases = node.data.configuration?.numCases ?? 0;
+  const caseLabels = node.data.configuration?.caseLabels ?? {};
+  const caseValues = node.data.configuration?.cases ?? {};
+
+  const [selectedCase, setSelectedCase] = useState<number>(1);
+
+  const updateNumCases = useCallback(
+    (newNumCases: number) => {
+      if (newNumCases < 0) return;
+
+      system.nodeStore.getState().setNodes((prev) =>
+        prev.map((n: any) => {
+          if (n.id !== node.id) return n;
+
+          // Preserve existing case values when changing numCases
+          const existingCases = n.data?.configuration?.cases ?? {};
+          const newCases: Record<string, string> = {};
+          for (let i = 1; i <= newNumCases; i++) {
+            const key = `${i}`;
+            newCases[key] = existingCases[key] ?? `case${i}`;
+          }
+
+          // Generate input sockets for each case
+          const inputs = [];
+          for (let i = 1; i <= newNumCases; i++) {
+            const key = `${i}`;
+            inputs.push({
+              name: n.data?.configuration?.caseLabels?.[key] || `Case ${i}`,
+              key,
+              valueType: 'string'
+            });
+          }
+
+          // Generate output sockets for each case
+          const outputs = [];
+          for (let i = 1; i <= newNumCases; i++) {
+            const label =
+              n.data?.configuration?.caseLabels?.[`${i}`] || `Case ${i}`;
+            outputs.push({
+              name: label,
+              key: `${i}`,
+              valueType: 'flow'
+            });
+          }
+          // Add default output
+          outputs.push({
+            name: 'default',
+            key: 'default',
+            valueType: 'flow'
+          });
+
+          return {
+            ...n,
+            data: {
+              ...n.data,
+              configuration: {
+                ...n.data?.configuration,
+                numCases: newNumCases,
+                cases: newCases
+              },
+              dynamicPorts: {
+                ...n.data?.dynamicPorts,
+                inputs,
+                outputs
+              }
+            }
+          };
+        })
+      );
+
+      if (selectedCase > newNumCases && newNumCases > 0) {
+        setSelectedCase(newNumCases);
+      }
+    },
+    [node.id, system, selectedCase]
+  );
+
+  const updateCaseValue = useCallback(
+    (caseIndex: number, value: string) => {
+      system.nodeStore.getState().setNodes((prev) =>
+        prev.map((n: any) => {
+          if (n.id !== node.id) return n;
+
+          const updatedCases = {
+            ...n.data?.configuration?.cases,
+            [`${caseIndex}`]: value
+          };
+
+          const updatedLabels = {
+            ...n.data?.configuration?.caseLabels,
+            [`${caseIndex}`]: value || `Case ${caseIndex}`
+          };
+
+          // Update input sockets
+          const numCases = n.data?.configuration?.numCases ?? 0;
+          const inputs = [];
+          for (let i = 1; i <= numCases; i++) {
+            const key = `${i}`;
+            inputs.push({
+              name: updatedLabels[key] || `Case ${i}`,
+              key,
+              valueType: 'string'
+            });
+          }
+
+          // Regenerate output sockets with updated labels
+          const outputs = [];
+          for (let i = 1; i <= numCases; i++) {
+            const label = updatedLabels[`${i}`] || `Case ${i}`;
+            outputs.push({
+              name: label,
+              key: `${i}`,
+              valueType: 'flow'
+            });
+          }
+          outputs.push({
+            name: 'default',
+            key: 'default',
+            valueType: 'flow'
+          });
+
+          return {
+            ...n,
+            data: {
+              ...n.data,
+              dynamicPorts: {
+                ...n.data?.dynamicPorts,
+                inputs,
+                outputs
+              },
+              configuration: {
+                ...n.data?.configuration,
+                cases: updatedCases,
+                caseLabels: updatedLabels
+              }
+            }
+          };
+        })
+      );
+    },
+    [node.id, system]
+  );
+
+  const addCase = useCallback(() => {
+    const newCount = numCases + 1;
+    updateNumCases(newCount);
+    setSelectedCase(newCount);
+  }, [numCases, updateNumCases]);
+
+  const removeCase = useCallback(() => {
+    updateNumCases(Math.max(0, numCases - 1));
+  }, [numCases, updateNumCases]);
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 8
+      }}
+    >
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          marginBottom: 4
+        }}
+      >
+        <div style={{ fontSize: 12, opacity: 0.9 }}>Cases: {numCases}</div>
+      </div>
+
+      {numCases > 0 && (
+        <>
+          <div style={{ fontSize: 11, opacity: 0.8, marginBottom: -4 }}>
+            Edit Case
+          </div>
+          <VscodeSingleSelect
+            value={String(selectedCase)}
+            onChange={(e: any) => setSelectedCase(Number(e.target.value))}
+          >
+            {Array.from({ length: numCases }, (_, i) => i + 1).map(
+              (caseIndex) => (
+                <VscodeOption key={caseIndex} value={String(caseIndex)}>
+                  {caseLabels[`${caseIndex}`] || `Case ${caseIndex}`}
+                </VscodeOption>
+              )
+            )}
+          </VscodeSingleSelect>
+
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
+            <label style={{ fontSize: 11, opacity: 0.8 }}>Match Value</label>
+            <VscodeTextfield
+              value={caseValues[`${selectedCase}`] ?? ''}
+              onInput={(e: any) =>
+                updateCaseValue(selectedCase, e.target.value)
+              }
+              placeholder={`String value for case ${selectedCase}`}
+            />
+          </div>
+        </>
+      )}
+
+      <div style={{ display: 'flex', gap: 4, marginTop: 4 }}>
+        <VscodeButton
+          onClick={addCase}
+          style={{
+            flex: 1,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: 4
+          }}
+        >
+          <Plus width={16} height={16} />
+          Add Case
+        </VscodeButton>
+        <VscodeButton
+          onClick={removeCase}
+          disabled={numCases === 0}
+          style={{
+            flex: 1,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: 4
+          }}
+        >
+          <Minus width={16} height={16} />
+          Remove
+        </VscodeButton>
+      </div>
+    </div>
+  );
+};

package/src/generators/callSubgraphSync.ts

@@ -0,0 +1,126 @@
+import type { System } from '@/system/system';
+import type { GraphSession } from '@/system/graphSession';
+import type { IBehaveNode } from '@/types/nodes';
+import {
+  CALL_SUBGRAPH_TYPE,
+  contractToParams,
+  deriveContract,
+  paramsToSockets,
+  type ContractParam
+} from '@/transformers/contract';
+
+/**
+ * Stable string key for a session's contract (its graph/input + graph/output
+ * params). Used to detect *contract* changes and ignore unrelated node edits
+ * (e.g. dragging), so we only repropagate when the boundary actually changes.
+ */
+const contractKey = (session: GraphSession): string =>
+  JSON.stringify(deriveContract(session.nodeStore.getState().nodes));
+
+/**
+ * Reconcile every Call Subgraph node in every open graph with the *current*
+ * contract of the subgraph it references. Idempotent: a node is only rewritten
+ * when its stored contract/ports actually differ, so this converges and never
+ * loops (rewriting a call node does not change its host graph's contract).
+ */
+const resyncAllCallNodes = (editor: System): void => {
+  const sessions = editor.activeGraph.getState().sessions;
+
+  for (const target of Object.values(sessions)) {
+    let mutated = false;
+
+    const nextNodes = target.nodeStore.getState().nodes.map((node) => {
+      if (node.data?.type !== CALL_SUBGRAPH_TYPE) return node;
+
+      const subgraphId = String(node.data?.configuration?.subgraphId ?? '');
+      const subgraph = subgraphId ? sessions[subgraphId] : undefined;
+      // Referenced graph not open (e.g. its tab was closed): leave the last
+      // known contract in place rather than wiping the node's ports.
+      if (!subgraph) return node;
+
+      const contract = deriveContract(subgraph.nodeStore.getState().nodes);
+      const inputs: ContractParam[] = contractToParams(contract.graphInputs);
+      const outputs: ContractParam[] = contractToParams(contract.graphOutputs);
+      const inputSockets = paramsToSockets(inputs);
+      const outputSockets = paramsToSockets(outputs);
+
+      const currentConfig = {
+        inputs: node.data?.configuration?.inputs ?? [],
+        outputs: node.data?.configuration?.outputs ?? []
+      };
+      const currentPorts = {
+        inputs: node.data?.dynamicPorts?.inputs ?? [],
+        outputs: node.data?.dynamicPorts?.outputs ?? []
+      };
+
+      if (
+        JSON.stringify(currentConfig) === JSON.stringify({ inputs, outputs }) &&
+        JSON.stringify(currentPorts) ===
+          JSON.stringify({ inputs: inputSockets, outputs: outputSockets })
+      ) {
+        return node;
+      }
+
+      mutated = true;
+      return {
+        ...node,
+        data: {
+          ...node.data,
+          configuration: {
+            ...node.data?.configuration,
+            inputs,
+            outputs
+          },
+          dynamicPorts: {
+            ...node.data?.dynamicPorts,
+            inputs: inputSockets,
+            outputs: outputSockets
+          }
+        }
+      } as IBehaveNode;
+    });
+
+    if (mutated) target.nodeStore.getState().setNodes(() => nextNodes);
+  }
+};
+
+/**
+ * Keep Call Subgraph nodes live with the graphs they reference. Without this a
+ * call node only captures the subgraph's contract at selection time; editing the
+ * subgraph's inputs/outputs afterwards would leave callers stale.
+ *
+ * Implemented as an editor session extension: every open graph (existing and
+ * future) watches its own contract, and when it changes we repropagate to all
+ * call nodes referencing it across every graph. Returns a disposer.
+ */
+export function setupCallSubgraphSync(editor: System): () => void {
+  const unsubscribes = new Map<string, () => void>();
+
+  const watch = (session: GraphSession) => {
+    if (unsubscribes.has(session.id)) return;
+
+    let last = contractKey(session);
+    const unsub = session.nodeStore.subscribe(() => {
+      const next = contractKey(session);
+      if (next === last) return; // ignore non-contract edits (drags, etc.)
+      last = next;
+      resyncAllCallNodes(editor);
+    });
+
+    unsubscribes.set(session.id, unsub);
+    session.onDispose(() => {
+      unsubscribes.get(session.id)?.();
+      unsubscribes.delete(session.id);
+    });
+  };
+
+  const unregister = editor.registerSessionExtension(watch);
+  // Reconcile graphs already open (e.g. a project loaded from disk) once.
+  resyncAllCallNodes(editor);
+
+  return () => {
+    unregister();
+    for (const unsub of unsubscribes.values()) unsub();
+    unsubscribes.clear();
+  };
+}

package/src/generators/registerDefaultGenerators.ts

@@ -0,0 +1,55 @@
+import type { System } from '@/system/system';
+import { getSwitchOnStringGenerator } from '../generators/SwitchOnStringGenerator';
+import { getSwitchOnIntegerGenerator } from '../generators/SwitchOnIntegerGenerator';
+import { getCustomEventOnTriggeredGenerator } from '../generators/CustomEventOnTriggeredGenerator';
+import { getSequenceGenerator } from '../generators/SequenceGenerator';
+import {
+  getGraphInputGenerator,
+  getGraphOutputGenerator
+} from '../generators/GraphBoundaryGenerator';
+import { getCallSubgraphGenerator } from '../generators/CallSubgraphGenerator';
+
+export function registerDefaultSocketGenerators(system: System): () => void {
+  const store = system.socketGeneratorStore.getState();
+
+  const switchOnString = getSwitchOnStringGenerator();
+  store.registerGenerator(switchOnString);
+
+  const switchOnInteger = getSwitchOnIntegerGenerator();
+  store.registerGenerator(switchOnInteger);
+
+  const customEventOnTriggered = getCustomEventOnTriggeredGenerator();
+  store.registerGenerator(customEventOnTriggered);
+
+  const sequence = getSequenceGenerator();
+  store.registerGenerator(sequence);
+
+  const graphInput = getGraphInputGenerator();
+  store.registerGenerator(graphInput);
+
+  const graphOutput = getGraphOutputGenerator();
+  store.registerGenerator(graphOutput);
+
+  const callSubgraph = getCallSubgraphGenerator();
+  store.registerGenerator(callSubgraph);
+
+  return () => {
+    system.socketGeneratorStore
+      .getState()
+      .unregisterGenerator(switchOnString.name);
+    system.socketGeneratorStore
+      .getState()
+      .unregisterGenerator(switchOnInteger.name);
+    system.socketGeneratorStore
+      .getState()
+      .unregisterGenerator(customEventOnTriggered.name);
+    system.socketGeneratorStore.getState().unregisterGenerator(sequence.name);
+    system.socketGeneratorStore.getState().unregisterGenerator(graphInput.name);
+    system.socketGeneratorStore
+      .getState()
+      .unregisterGenerator(graphOutput.name);
+    system.socketGeneratorStore
+      .getState()
+      .unregisterGenerator(callSubgraph.name);
+  };
+}