Merge remote-tracking branch 'origin/demo' into feat/monitoringpage-pim

2026-01-08 09:54:48 +01:00
parent 4356f201ab
commit a2b4847ca4
48 changed files with 3038 additions and 527 deletions
--- a/src/pages/MonitoringPage/Components.tsx
+++ b/src/pages/MonitoringPage/Components.tsx
@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import styles from './MonitoringPage.module.css';
+import useProgramStore from '../../utils/programStore';

 /**
 * HELPER: Unified sender function
@@ -110,38 +111,47 @@ interface StatusListProps {

 // --- STATUS LIST COMPONENT ---
 export const StatusList: React.FC<StatusListProps> = ({ title, items, type }) => {
+
  return (
    <section className={styles.phaseBox}>
      <h3>{title}</h3>
      <ul>
-        {items.length > 0 ? (
-          items.map((item, idx) => {
-            const isAchieved = item.achieved;
-            const showIndicator = type !== 'norm';
-            const canOverride = showIndicator && !isAchieved;
+        {items.map((item, idx) => {
+          let isAchieved = item.achieved;
+          const showIndicator = type !== 'norm';
+          const canOverride = showIndicator && !isAchieved;

-            return (
-              <li key={item.id ?? idx} className={styles.statusItem}>
-                {showIndicator && (
-                  <span 
-                    className={`${styles.statusIndicator} ${canOverride ? styles.clickable : ''}`}
-                    onClick={() => canOverride && sendUserInterrupt("override", String(item.id))}
-                    title={canOverride ? `Send override for ID: ${item.id}` : 'Achieved'}
-                    style={{ cursor: canOverride ? 'pointer' : 'default' }}
-                  >
-                    {isAchieved ? "✔️" : "❌"}
-                  </span>
-                )}
+          const handleOverrideClick = () => {
+            if (!canOverride) return;

-                <span className={styles.itemDescription}>
-                  {item.description || item.label || item.norm}
+            let contextValue = String(item.id);
+
+           
+            if (type === 'trigger' || type === 'cond_norm') {
+              if (item.condition?.id) {
+                contextValue = String(item.condition);
+              }
+            }
+
+            sendUserInterrupt("override", contextValue);
+          };
+
+          return (
+            <li key={item.id ?? idx} className={styles.statusItem}>
+              {showIndicator && (
+                <span 
+                  className={`${styles.statusIndicator} ${canOverride ? styles.clickable : ''}`}
+                  onClick={handleOverrideClick}
+                >
+                  {isAchieved ? "✔️" : "❌"}
                </span>
-              </li>
-            );
-          })
-        ) : (
-          <p className={styles.emptyText}>No {title.toLowerCase()} defined.</p>
-        )}
+              )}
+              <span className={styles.itemDescription}>
+                {item.description || item.label || item.norm}
+              </span>
+            </li>
+          );
+        })}
      </ul>
    </section>
  );
--- a/src/pages/MonitoringPage/MonitoringPage.tsx
+++ b/src/pages/MonitoringPage/MonitoringPage.tsx
@@ -4,9 +4,9 @@ import useProgramStore from "../../utils/programStore.ts";
 import { GestureControls, SpeechPresets, DirectSpeechInput, StatusList } from './Components';
 import { nextPhase, useExperimentLogger } from ".//MonitoringPageAPI.ts"

-type Goal = { id?: string | number; description?: string; achieved?: boolean };
-type Trigger = { id?: string | number; label?: string ; achieved?: boolean };
-type Norm = { id?: string | number; norm?: string };
+import type { GoalNodeData } from '../VisProgPage/visualProgrammingUI/nodes/GoalNode.tsx';
+import type { TriggerNodeData } from '../VisProgPage/visualProgrammingUI/nodes/TriggerNode.tsx';
+import type { NormNodeData } from '../VisProgPage/visualProgrammingUI/nodes/NormNode.tsx';

 const MonitoringPage: React.FC = () => {
  const getPhaseIds = useProgramStore((s) => s.getPhaseIds);
@@ -16,9 +16,32 @@ const MonitoringPage: React.FC = () => {

  // Can be used to block actions until feedback from CB.
  const [loading, setLoading] = React.useState(false);
+  const [activeIds, setActiveIds] = React.useState<Record<string, boolean>>({});

  const phaseIds = getPhaseIds();
  const [phaseIndex, setPhaseIndex] = React.useState(0);
+  
+  
+  const handleStreamUpdate = React.useCallback((data: any) => {
+    // Check for phase updates
+    if (data.type === 'phase_update' && data.phase_id) {
+      const allIds = getPhaseIds();
+      const newIndex = allIds.indexOf(data.phase_id);
+      if (newIndex !== -1) {
+        setPhaseIndex(newIndex);
+      }
+    } 
+    
+    
+    else if (data.type === 'trigger_update' || data.type === 'goal_update') {
+    setActiveIds((prev) => ({
+      ...prev,
+      [data.id]: data.achieved // data.id is de key, achieved is true/false
+    }));
+  }
+  }, [getPhaseIds]);
+
+  useExperimentLogger(handleStreamUpdate);

  if (phaseIds.length === 0) {
    return <p className={styles.empty}>No program loaded.</p>;
@@ -26,9 +49,63 @@ const MonitoringPage: React.FC = () => {

  const phaseId = phaseIds[phaseIndex];

-  const goals = getGoalsInPhase(phaseId) as Goal[];
-  const triggers = getTriggersInPhase(phaseId) as Trigger[];
-  const norms = getNormsInPhase(phaseId) as Norm[];
+  const goals = (getGoalsInPhase(phaseId) as any[]).map(g => ({
+    ...g,
+    label: g.name, 
+    achieved: activeIds[g.id] ?? false 
+  }));
+
+
+  const triggers = (getTriggersInPhase(phaseId) as any[]).map(t => ({
+    ...t,
+    label: (() => {
+      // Determine the Condition Prefix
+      let prefix = t.label; // Default fallback
+      if (t.condition?.keyword) {
+        prefix = `if keywords said: "${t.condition.keyword}"`;
+      } else if (t.condition?.name) {
+        prefix = `if LLM belief: ${t.condition.name}`;
+      }
+
+      // Format the Plan Steps
+      // We check if plan exists and has steps
+      const stepLabels = t.plan?.steps?.map((step: any) => {
+     
+        return step.label || step.name || "Action"; 
+      }) || [];
+
+      const planText = stepLabels.length > 0 
+        ? `➔ Do: ${stepLabels.join(", ")}` 
+        : "➔ (No actions set)";
+
+      // "If [Condition] ➔ Do: [Steps]"
+      return `${prefix} ${planText}`;
+    })(),
+    achieved: activeIds[t.id] ?? false 
+  }));
+  const norms = (getNormsInPhase(phaseId) as NormNodeData[])
+    .filter(n => !n.condition)
+    .map(n => ({
+      ...n,
+      label: n.norm, 
+    }));
+    const conditionalNorms = (getNormsInPhase(phaseId) as any[])
+    .filter(n => !!n.condition) // Only items with a condition
+    .map(n => ({
+      ...n,
+      label: (() => {
+        let prefix = "";
+        if (n.condition?.keyword) {
+          prefix = `if keywords said: "${n.condition.keyword}"`;
+        } else if (n.condition?.name) {
+          prefix = `if LLM belief: ${n.condition.name}`;
+        }
+        
+    
+        return `${prefix} ➔ Norm: ${n.norm}`;
+      })(),
+      achieved: activeIds[n.id] ?? false
+    }));

  // Handle logic of 'next' button.
  const handleNext = async () => {
@@ -42,20 +119,27 @@ const MonitoringPage: React.FC = () => {
      setLoading(false);
    }
  };
-  useExperimentLogger();
+
+
  return (
    <div className={styles.dashboardContainer}>
      {/* HEADER */}
      <header className={styles.experimentOverview}>
        <div className={styles.phaseName}>
          <h2>Experiment Overview</h2>
-          <p><strong>Phase name:</strong> Rhyming fish</p>
+          <p><strong>Phase</strong> {` ${phaseIndex + 1}`} </p>
          <div className={styles.phaseProgress}>
-            <span className={`${styles.phase} ${styles.completed}`}>1</span>
-            <span className={`${styles.phase} ${styles.completed}`}>2</span>
-            <span className={`${styles.phase} ${styles.current}`}>3</span>
-            <span className={styles.phase}>4</span>
-            <span className={styles.phase}>5</span>
+            {phaseIds.map((id, index) => (
+              <span 
+                key={id} 
+                className={`${styles.phase} ${
+                  index < phaseIndex ? styles.completed : 
+                  index === phaseIndex ? styles.current : ""
+                }`}
+              >
+                {index + 1}
+              </span>
+            ))}
          </div>
        </div>

@@ -92,10 +176,10 @@ const MonitoringPage: React.FC = () => {
        <StatusList title="Triggers" items={triggers} type="trigger" />
        <StatusList title="Norms" items={norms} type="norm" />
        <StatusList 
-          title="Conditional Norms" 
-          items={[{ id: 'cn_1', norm: '“RP is sad” - Be nice', achieved: false }]} 
-          type="cond_norm" 
-        />
+        title="Conditional Norms" 
+        items={conditionalNorms} 
+        type="cond_norm" 
+      />
      </main>

      {/* LOGS */}
--- a/src/pages/MonitoringPage/MonitoringPageAPI.ts
+++ b/src/pages/MonitoringPage/MonitoringPageAPI.ts
@@ -23,31 +23,28 @@ export async function nextPhase(): Promise<void> {
 * A hook that listens to the experiment stream and logs data to the console.
 * It does not render anything.
 */
-export function useExperimentLogger() {
+export function useExperimentLogger(onUpdate?: (data: any) => void) {
  useEffect(() => {
-    console.log("Starting Experiment Stream listener...");
-    
    const eventSource = new EventSource(`${API_BASE}/experiment_stream`);

    eventSource.onmessage = (event) => {
      try {
        const parsedData = JSON.parse(event.data);
-        
-        console.log(" [Experiment Update Received] ", parsedData);
-        
+        if (onUpdate) {
+          onUpdate(parsedData);
+        }
      } catch (err) {
-        console.warn("Received non-JSON experiment data:", event.data);
+        console.warn("Stream parse error:", err);
      }
    };

    eventSource.onerror = (err) => {
-      console.error("SSE Connection Error (Experiment Stream):", err);
+      console.error("SSE Connection Error:", err);
      eventSource.close();
    };

    return () => {
-      console.log("Closing Experiment Stream listener...");
      eventSource.close();
    };
-  }, []);
+  }, [onUpdate]);
 }
--- a/src/pages/VisProgPage/VisProg.module.css
+++ b/src/pages/VisProgPage/VisProg.module.css
@@ -138,4 +138,10 @@
    border-radius: 5pt;
    outline: plum solid 2pt;
    filter: drop-shadow(0 0 0.25rem plum);
+}
+
+.planNoIterate {
+  opacity: 0.5;
+  font-style: italic;
+  text-decoration: line-through;
 }
--- a/src/pages/VisProgPage/VisProg.tsx
+++ b/src/pages/VisProgPage/VisProg.tsx
@@ -53,7 +53,8 @@ const selector = (state: FlowState) => ({
  undo: state.undo,
  redo: state.redo,
  beginBatchAction: state.beginBatchAction,
-  endBatchAction: state.endBatchAction
+  endBatchAction: state.endBatchAction,
+  scrollable: state.scrollable
 });

 // --| define ReactFlow editor |--
@@ -77,7 +78,8 @@ const VisProgUI = () => {
    undo,
    redo,
    beginBatchAction,
-    endBatchAction
+    endBatchAction,
+    scrollable
  } = useFlowStore(useShallow(selector)); // instructs the editor to use the corresponding functions from the FlowStore

  // adds ctrl+z and ctrl+y support to respectively undo and redo actions
@@ -106,6 +108,7 @@ const VisProgUI = () => {
        onConnect={onConnect}
        onNodeDragStart={beginBatchAction}
        onNodeDragStop={endBatchAction}
+        preventScrolling={scrollable}
        snapToGrid
        fitView
        proOptions={{hideAttribution: true}}
--- a/src/pages/VisProgPage/visualProgrammingUI/HandleRuleLogic.ts
+++ b/src/pages/VisProgPage/visualProgrammingUI/HandleRuleLogic.ts
@@ -0,0 +1,110 @@
+import {type Connection} from "@xyflow/react";
+import {useEffect} from "react";
+import useFlowStore from "./VisProgStores.tsx";
+
+export type ConnectionContext = {
+  connectionCount: number;
+  source: {
+    id: string;
+    handleId: string;
+  }
+  target: {
+    id: string;
+    handleId: string;
+  }
+}
+
+export type HandleRule = (
+  connection: Connection,
+  context: ConnectionContext
+) => RuleResult;
+
+/**
+ * A RuleResult describes the outcome of validating a HandleRule
+ *
+ * if a rule is not satisfied, the RuleResult includes a message that is used inside a tooltip
+ * that tells the user why their attempted connection is not possible
+ */
+export type RuleResult =
+  | { isSatisfied: true }
+  | { isSatisfied: false, message: string };
+
+/**
+ * default RuleResults, can be used to create more readable handleRule definitions
+ */
+export const ruleResult = {
+  satisfied: { isSatisfied: true } as RuleResult,
+  unknownError: {isSatisfied: false, message: "Unknown Error" } as RuleResult,
+  notSatisfied: (message: string) : RuleResult => { return {isSatisfied: false, message: message } }
+}
+
+
+const evaluateRules = (
+  rules: HandleRule[],
+  connection: Connection,
+  context: ConnectionContext
+) : RuleResult => {
+  // evaluate the rules and check if there is at least one unsatisfied rule
+  const failedRule = rules
+    .map(rule => rule(connection, context))
+    .find(result => !result.isSatisfied);
+
+  return failedRule ? ruleResult.notSatisfied(failedRule.message) : ruleResult.satisfied;
+}
+
+
+/**
+ * !DOCUMENTATION NOT FINISHED!
+ *
+ * - The output is a single RuleResult, meaning we only show one error message.
+ * Error messages are prioritised by listOrder; Thus, if multiple HandleRules evaluate to false,
+ * we only send the error message of the first failed rule in the target's registered list of rules.
+ *
+ * @param {string} nodeId
+ * @param {string} handleId
+ * @param type
+ * @param {HandleRule[]} rules
+ * @returns {(c: Connection) => RuleResult} a function that validates an attempted connection
+ */
+export function useHandleRules(
+  nodeId: string,
+  handleId: string,
+  type: "source" | "target",
+  rules: HandleRule[],
+) : (c: Connection) => RuleResult {
+  const edges = useFlowStore.getState().edges;
+  const registerRules = useFlowStore((state) => state.registerRules);
+
+
+  useEffect(() => {
+    registerRules(nodeId, handleId, rules);
+    // the following eslint disable is required as it wants us to use all possible dependencies for the useEffect statement,
+    // however this would result in an infinite loop because it would change one of its own dependencies
+    // so we only use those dependencies that we don't change ourselves
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [handleId, nodeId, registerRules]);
+
+  return (connection: Connection) => {
+    // inside this function we consider the target to be the target of the isValidConnection event
+    // and not the target in the actual connection
+    const { target, targetHandle } = type === "source"
+      ? connection
+      : { target: connection.source, targetHandle: connection.sourceHandle };
+
+    if (!targetHandle) {throw new Error("No target handle was provided");}
+
+    const targetConnections = edges.filter(edge => edge.target === target && edge.targetHandle === targetHandle);
+
+
+    // we construct the connectionContext
+    const context: ConnectionContext = {
+      connectionCount: targetConnections.length,
+      source: {id: nodeId, handleId: handleId},
+      target: {id: target, handleId: targetHandle},
+    };
+    const targetRules = useFlowStore.getState().getTargetRules(target, targetHandle);
+
+    // finally we return a function that evaluates all rules using the created context
+    return evaluateRules(targetRules, connection, context);
+  };
+}
--- a/src/pages/VisProgPage/visualProgrammingUI/HandleRules.ts
+++ b/src/pages/VisProgPage/visualProgrammingUI/HandleRules.ts
@@ -0,0 +1,45 @@
+import {
+  type HandleRule,
+  ruleResult
+} from "./HandleRuleLogic.ts";
+import useFlowStore from "./VisProgStores.tsx";
+
+
+/**
+ * this specifies what types of nodes can make a connection to a handle that uses this rule
+ */
+export function allowOnlyConnectionsFromType(nodeTypes: string[]) : HandleRule  {
+  return ((_, {source}) => {
+    const sourceType = useFlowStore.getState().nodes.find(node => node.id === source.id)!.type!;
+    return nodeTypes.find(type => sourceType === type)
+      ? ruleResult.satisfied
+      : ruleResult.notSatisfied(`the target doesn't allow connections from nodes with type: ${sourceType}`);
+  })
+}
+
+/**
+ * similar to allowOnlyConnectionsFromType,
+ * this is a more specific variant that allows you to restrict connections to specific handles on each nodeType
+ */
+//
+export function allowOnlyConnectionsFromHandle(handles: {nodeType: string, handleId: string}[]) : HandleRule  {
+  return ((_, {source}) => {
+    const sourceNode = useFlowStore.getState().nodes.find(node => node.id === source.id)!;
+    return handles.find(handle => sourceNode.type === handle.nodeType && source.handleId === handle.handleId)
+      ? ruleResult.satisfied
+      : ruleResult.notSatisfied(`the target doesn't allow connections from nodes with type: ${sourceNode.type}`);
+  })
+}
+
+
+/**
+ * This rule prevents a node from making a connection between its own handles
+ */
+export const noSelfConnections : HandleRule =
+  (connection, _) => {
+    return connection.source !== connection.target
+      ? ruleResult.satisfied
+      : ruleResult.notSatisfied("nodes are not allowed to connect to themselves");
+  }
+
+
--- a/src/pages/VisProgPage/visualProgrammingUI/VisProgStores.tsx
+++ b/src/pages/VisProgPage/visualProgrammingUI/VisProgStores.tsx
@@ -8,6 +8,7 @@ import {
  type Edge,
  type XYPosition,
 } from '@xyflow/react';
+import '@xyflow/react/dist/style.css';
 import type { FlowState } from './VisProgTypes';
 import {
  NodeDefaults,
@@ -40,19 +41,19 @@ function createNode(id: string, type: string, position: XYPosition, data: Record
        ...data,
      },
    }
-  }
+}

+  //* Initial nodes, created by using createNode. */
+  // Start and End don't need to apply the UUID, since they are technically never compiled into a program.
+  const startNode = createNode('start', 'start', {x: 100, y: 100}, {label: "Start"}, false)
+  const endNode = createNode('end', 'end', {x: 500, y: 100}, {label: "End"}, false)
+  const initialPhaseNode = createNode(crypto.randomUUID(), 'phase', {x:200, y:100}, {label: "Phase 1", children : [], isFirstPhase: false, nextPhaseId: null})

-//* Initial nodes, created by using createNode. */
-const initialNodes : Node[] = [
-    createNode('start', 'start', {x: 100, y: 100}, {label: "Start"}, false),
-    createNode('end', 'end', {x: 500, y: 100}, {label: "End"}, false),
-    createNode(crypto.randomUUID(), 'phase',  {x:200, y:100}, {label: "Phase 1", children : []}),
-    createNode('norms-1', 'norm',  {x:-200, y:100}, {label: "Initial Norms", normList: ["Be a robot", "get good"], critical:false}),
-];
+  const initialNodes : Node[] = [startNode, endNode, initialPhaseNode,];

-// * Initial edges * /
-const initialEdges: Edge[] = []; // no initial edges as edge connect events don't fire when using initial edges
+// Initial edges, leave empty as setting initial edges...
+// ...breaks logic that is dependent on connection events
+const initialEdges: Edge[] = [];


 /**
@@ -70,14 +71,24 @@ const useFlowStore = create<FlowState>(UndoRedo((set, get) => ({
  nodes: initialNodes,
  edges: initialEdges,
  edgeReconnectSuccessful: true,
+  scrollable: true,
+
+  /**
+   * handles changing the scrollable state of the editor,
+   * this is used to control if scrolling is captured by the editor
+   * or if it's available to other components within the reactFlowProvider
+   * @param {boolean} val - the desired state
+   */
+  setScrollable: (val) => set({scrollable: val}),

   /**
   * Handles changes to nodes triggered by ReactFlow.
   */
  onNodesChange: (changes) => set({nodes: applyNodeChanges(changes, get().nodes)}),

-  onEdgesDelete: (edges) => {
+  onNodesDelete: (nodes) => nodes.forEach(node => get().unregisterNodeRules(node.id)),

+  onEdgesDelete: (edges) => {
    // we make sure any affected nodes get updated to reflect removal of edges
    edges.forEach((edge) => {
        const nodes = get().nodes;
@@ -223,6 +234,79 @@ const useFlowStore = create<FlowState>(UndoRedo((set, get) => ({
  past: [],
  future: [],
  isBatchAction: false,
+
+  // handleRuleRegistry definitions
+  /**
+   * stores registered rules for handle connection validation
+   */
+  ruleRegistry: new Map(),
+
+  /**
+   * gets the rules registered by that handle described by the given node and handle ids
+   *
+   * @param {string} targetNodeId
+   * @param {string} targetHandleId
+   * @returns {HandleRule[]}
+   */
+  getTargetRules: (targetNodeId, targetHandleId) => {
+    const key = `${targetNodeId}:${targetHandleId}`;
+    const rules = get().ruleRegistry.get(key);
+
+    // helper function that handles a situation where no rules were registered
+    const missingRulesResponse = () => {
+      console.warn(
+        `No rules were registered for the following handle "${key}"!
+          returning and empty handleRule[] to avoid crashing`);
+      return []
+    }
+
+    return rules
+      ? rules
+      : missingRulesResponse()
+  },
+
+  /**
+   * registers a handle's connection rules
+   *
+   * @param {string} nodeId
+   * @param {string} handleId
+   * @param {HandleRule[]} rules
+   */
+  registerRules: (nodeId, handleId, rules) => {
+      const registry = get().ruleRegistry;
+      registry.set(`${nodeId}:${handleId}`, rules);
+      set({ ruleRegistry: registry }) ;
+  },
+
+  /**
+   * unregisters a handles connection rules
+   *
+   * @param {string} nodeId
+   * @param {string} handleId
+   */
+  unregisterHandleRules: (nodeId, handleId) => {
+    set( () => {
+      const registry = get().ruleRegistry;
+      registry.delete(`${nodeId}:${handleId}`);
+      return { ruleRegistry: registry };
+    })
+  },
+
+  /**
+   * unregisters connection rules for all handles on the given node
+   * used for cleaning up rules on node deletion
+   *
+   * @param {string} nodeId
+   */
+  unregisterNodeRules: (nodeId) => {
+    set(() => {
+      const registry = get().ruleRegistry;
+      registry.forEach((_,key) => {
+        if (key.startsWith(`${nodeId}:`)) registry.delete(key)
+      })
+      return { ruleRegistry: registry };
+    })
+  }
  }))
 );

--- a/src/pages/VisProgPage/visualProgrammingUI/VisProgTypes.tsx
+++ b/src/pages/VisProgPage/visualProgrammingUI/VisProgTypes.tsx
@@ -1,5 +1,15 @@
 // VisProgTypes.ts
-import type {Edge, OnNodesChange, OnEdgesChange, OnConnect, OnReconnect, Node, OnEdgesDelete} from '@xyflow/react';
+import type {
+  Edge,
+  OnNodesChange,
+  OnEdgesChange,
+  OnConnect,
+  OnReconnect,
+  Node,
+  OnEdgesDelete,
+  OnNodesDelete
+} from '@xyflow/react';
+import type {HandleRule} from "./HandleRuleLogic.ts";
 import type { NodeTypes } from './NodeRegistry';
 import type {FlowSnapshot} from "./EditorUndoRedo.ts";

@@ -23,10 +33,16 @@ export type FlowState = {
  nodes: Node[];
  edges: Edge[];
  edgeReconnectSuccessful: boolean;
+  scrollable: boolean;
+
+  /** Handler for managing scrollable state */
+  setScrollable: (value: boolean) => void;

  /** Handler for changes to nodes triggered by ReactFlow */
  onNodesChange: OnNodesChange;

+  onNodesDelete: OnNodesDelete;
+
  onEdgesDelete: OnEdgesDelete;

  /** Handler for changes to edges triggered by ReactFlow */
@@ -78,7 +94,9 @@ export type FlowState = {
   * @param node - the Node object to add
   */
  addNode: (node: Node) => void;
+} & UndoRedoState & HandleRuleRegistry;

+export type UndoRedoState = {
  // UndoRedo Types
  past: FlowSnapshot[];
  future: FlowSnapshot[];
@@ -88,4 +106,27 @@ export type FlowState = {
  endBatchAction: () => void;
  undo: () => void;
  redo: () => void;
-};
+}
+
+export type HandleRuleRegistry = {
+  ruleRegistry: Map<string, HandleRule[]>;
+
+  getTargetRules: (
+    targetNodeId: string,
+    targetHandleId: string
+  ) => HandleRule[];
+
+  registerRules: (
+    nodeId: string,
+    handleId: string,
+    rules: HandleRule[]
+  ) => void;
+
+  unregisterHandleRules: (
+    nodeId: string,
+    handleId: string
+  ) => void;
+
+  // cleans up all registered rules of all handles of the provided node
+  unregisterNodeRules: (nodeId: string) => void
+}
--- a/src/pages/VisProgPage/visualProgrammingUI/components/CustomNodeHandles.tsx
+++ b/src/pages/VisProgPage/visualProgrammingUI/components/CustomNodeHandles.tsx
@@ -1,30 +0,0 @@
-import {
-  Handle,
-  useNodeConnections,
-  type HandleType,
-  type Position
-} from '@xyflow/react';
-
-
-const LimitedConnectionCountHandle = (props: {
-  node_id: string,
-  type: HandleType,
-  position: Position,
-  connection_count: number,
-  id?: string
-}) => {
-  const connections = useNodeConnections({
-    id: props.node_id,
-    handleType: props.type,
-    handleId: props.id,
-  });
-
-  return (
-    <Handle
-      {...props}
-      isConnectable={connections.length < props.connection_count}
-    />
-  );
-};
-
-export default LimitedConnectionCountHandle;
--- a/src/pages/VisProgPage/visualProgrammingUI/components/DragDropSidebar.tsx
+++ b/src/pages/VisProgPage/visualProgrammingUI/components/DragDropSidebar.tsx
@@ -69,23 +69,11 @@ function DraggableNode({ className, children, nodeType, onDrop }: DraggableNodeP
 * @param position - The XY position in the flow canvas where the node will appear.
 */
 function addNodeToFlow(nodeType: keyof typeof NodeTypes, position: XYPosition) {
-  const { nodes, addNode } = useFlowStore.getState();
+  const { addNode } = useFlowStore.getState();

  // Load any predefined data for this node type.
  const defaultData = NodeDefaults[nodeType] ?? {}
-  
-  // Currently, we find out what the Id is by checking the last node and adding one.
-  const sameTypeNodes = nodes.filter((node) => node.type === nodeType);
-  const nextNumber =
-    sameTypeNodes.length > 0
-      ? (() => {
-          const lastNode = sameTypeNodes[sameTypeNodes.length - 1];
-          const parts = lastNode.id.split('-');
-          const lastNum = Number(parts[1]);
-          return Number.isNaN(lastNum) ? sameTypeNodes.length + 1 : lastNum + 1;
-        })()
-      : 1;
-  const id = `${nodeType}-${nextNumber}`;
+  const id = crypto.randomUUID();
  
  // Create new node
  const newNode = {
--- a/src/pages/VisProgPage/visualProgrammingUI/components/GestureValueEditor.module.css
+++ b/src/pages/VisProgPage/visualProgrammingUI/components/GestureValueEditor.module.css
@@ -0,0 +1,164 @@
+
+.gestureEditor {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  width: 100%;
+}
+
+.modeSelector {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.modeLabel {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--text-secondary);
+  white-space: nowrap;
+}
+
+.toggleContainer {
+  display: flex;
+  background: rgba(78, 78, 78, 0.411);
+  border-radius: 6px;
+  padding: 2px;
+  border: 1px solid var(--border-color);
+}
+
+.toggleButton {
+  padding: 6px 12px;
+  background: none;
+  border: none;
+  border-radius: 4px;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  color: var(--text-secondary);
+}
+
+.toggleButton:hover {
+  background: none;
+}
+
+.toggleButton.active {
+  box-shadow: 0 0 1px 0 rgba(9, 255, 0, 0.733);
+}
+
+.valueEditor {
+  width: 100%;
+}
+
+.textInput {
+  width: 100%;
+  padding: 8px 12px;
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+  font-size: 14px;
+  transition: border-color 0.2s ease;
+}
+
+.textInput:focus {
+  outline: none;
+  border-color: var(--primary-color);
+  box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.1);
+}
+
+.tagSelector {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.tagSelect {
+  width: 100%;
+  padding: 8px 12px;
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+  font-size: 14px;
+  background-color: rgba(135, 135, 135, 0.296);
+  cursor: pointer;
+}
+
+.tagSelect:focus {
+  outline: none;
+  border-color: rgb(0, 149, 25);
+}
+
+.tagList {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  max-height: 120px;
+  overflow-y: auto;
+  padding: 4px;
+  border: 1px solid rgba(var(--primary-rgb), 0.1);
+  border-radius: 4px;
+  background: var(--primary-color);
+}
+
+.tagButton {
+  padding: 4px 8px;
+  border: 1px solid gray;
+  border-radius: 4px;
+  background: var(--primary-rgb);
+  font-size: 12px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  white-space: nowrap;
+}
+
+.tagButton:hover {
+  background: gray;
+  border-color: gray;
+}
+
+.tagButton.selected {
+  background: rgba(var(--primary-rgb), 0.5);
+  color: var(--primary-rgb);
+  border-color: rgb(27, 223, 60);
+}
+
+.suggestionsDropdownLeft {
+  position: absolute;
+  left: -220px; 
+  top: 120px;
+
+  width: 200px;
+  max-height: 20vh;
+  overflow-y: auto;
+
+  background: var(--dropdown-menu-background-color);
+  border-radius: 12px;
+  box-shadow: 0 8px 24px var(--dropdown-menu-border);
+}
+
+.suggestionsDropdownLeft::before {
+  content: "Gesture Suggestions";
+  display: block;
+  padding: 8px 12px;
+  font-weight: 600;
+  border-bottom: 1px solid var(--border-light);
+}
+
+.suggestionItem {
+  padding: 8px 12px;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+  font-size: 14px;
+  border-bottom: 1px solid var(--border-light);
+}
+
+.suggestionItem:last-child {
+  border-bottom: none;
+}
+
+.suggestionItem:hover {
+  background-color: var(--background-hover);
+}
+
+.suggestionItem:active {
+  background-color: var(--primary-color-light);
+}
--- a/src/pages/VisProgPage/visualProgrammingUI/components/GestureValueEditor.tsx
+++ b/src/pages/VisProgPage/visualProgrammingUI/components/GestureValueEditor.tsx
@@ -0,0 +1,611 @@
+import { useState, useRef } from "react";
+import styles from './GestureValueEditor.module.css'
+
+/**
+ * Props for the GestureValueEditor component.
+ * - value: current gesture value (controlled by parent)
+ * - setValue: callback to update the gesture value in parent state
+ * - placeholder: optional placeholder text for the input field
+ */
+type GestureValueEditorProps = {
+  value: string;
+  setValue: (value: string) => void;
+  setType: (value: boolean) => void;
+  placeholder?: string;
+};
+
+/**
+ * List of high-level gesture "tags".
+ * These are human-readable categories or semantic labels.
+ * In a real app, these would likely be loaded from an external source.
+ */
+const GESTURE_TAGS = ["above", "affirmative", "afford", "agitated", "all", "allright", "alright", "any", 
+            "assuage", "attemper", "back", "bashful", "beg", "beseech", "blank", 
+            "body language", "bored", "bow", "but", "call", "calm", "choose", "choice", "cloud", 
+            "cogitate", "cool", "crazy", "disappointed", "down", "earth", "empty", "embarrassed", 
+            "enthusiastic", "entire", "estimate", "except", "exalted", "excited", "explain", "far", 
+            "field", "floor", "forlorn", "friendly", "front", "frustrated", "gentle", "gift", 
+            "give", "ground", "happy", "hello", "her", "here", "hey", "hi", "him", "hopeless", 
+            "hysterical", "I", "implore", "indicate", "joyful", "me", "meditate", "modest", 
+            "negative", "nervous", "no", "not know", "nothing", "offer", "ok", "once upon a time", 
+            "oppose", "or", "pacify", "pick", "placate", "please", "present", "proffer", "quiet", 
+            "reason", "refute", "reject", "rousing", "sad", "select", "shamefaced", "show", 
+            "show sky", "sky", "soothe", "sun", "supplicate", "tablet", "tall", "them", "there", 
+            "think", "timid", "top", "unless", "up", "upstairs", "void", "warm", "winner", "yeah", 
+            "yes", "yoo-hoo", "you", "your", "zero", "zestful"];
+
+/**
+ * List of concrete gesture animation paths.
+ * These represent specific animation assets and are used in "single" mode
+ * with autocomplete-style selection, also would be loaded from an external source.
+ */
+const GESTURE_SINGLES = [
+        "animations/Stand/BodyTalk/Listening/Listening_1",
+        "animations/Stand/BodyTalk/Listening/Listening_2",
+        "animations/Stand/BodyTalk/Listening/Listening_3",
+        "animations/Stand/BodyTalk/Listening/Listening_4",
+        "animations/Stand/BodyTalk/Listening/Listening_5",
+        "animations/Stand/BodyTalk/Listening/Listening_6",
+        "animations/Stand/BodyTalk/Listening/Listening_7",
+        "animations/Stand/BodyTalk/Speaking/BodyTalk_1",
+        "animations/Stand/BodyTalk/Speaking/BodyTalk_10",
+        "animations/Stand/BodyTalk/Speaking/BodyTalk_11",
+        "animations/Stand/BodyTalk/Speaking/BodyTalk_12",
+        "animations/Stand/BodyTalk/Speaking/BodyTalk_13",
+        "animations/Stand/BodyTalk/Speaking/BodyTalk_14",
+        "animations/Stand/BodyTalk/Speaking/BodyTalk_15",
+        "animations/Stand/BodyTalk/Speaking/BodyTalk_16",
+        "animations/Stand/BodyTalk/Speaking/BodyTalk_2",
+        "animations/Stand/BodyTalk/Speaking/BodyTalk_3",
+        "animations/Stand/BodyTalk/Speaking/BodyTalk_4",
+        "animations/Stand/BodyTalk/Speaking/BodyTalk_5",
+        "animations/Stand/BodyTalk/Speaking/BodyTalk_6",
+        "animations/Stand/BodyTalk/Speaking/BodyTalk_7",
+        "animations/Stand/BodyTalk/Speaking/BodyTalk_8",
+        "animations/Stand/BodyTalk/Speaking/BodyTalk_9",
+        "animations/Stand/BodyTalk/Thinking/Remember_1",
+        "animations/Stand/BodyTalk/Thinking/Remember_2",
+        "animations/Stand/BodyTalk/Thinking/Remember_3",
+        "animations/Stand/BodyTalk/Thinking/ThinkingLoop_1",
+        "animations/Stand/BodyTalk/Thinking/ThinkingLoop_2",
+        "animations/Stand/Emotions/Negative/Angry_1",
+        "animations/Stand/Emotions/Negative/Angry_2",
+        "animations/Stand/Emotions/Negative/Angry_3",
+        "animations/Stand/Emotions/Negative/Angry_4",
+        "animations/Stand/Emotions/Negative/Anxious_1",
+        "animations/Stand/Emotions/Negative/Bored_1",
+        "animations/Stand/Emotions/Negative/Bored_2",
+        "animations/Stand/Emotions/Negative/Disappointed_1",
+        "animations/Stand/Emotions/Negative/Exhausted_1",
+        "animations/Stand/Emotions/Negative/Exhausted_2",
+        "animations/Stand/Emotions/Negative/Fear_1",
+        "animations/Stand/Emotions/Negative/Fear_2",
+        "animations/Stand/Emotions/Negative/Fearful_1",
+        "animations/Stand/Emotions/Negative/Frustrated_1",
+        "animations/Stand/Emotions/Negative/Humiliated_1",
+        "animations/Stand/Emotions/Negative/Hurt_1",
+        "animations/Stand/Emotions/Negative/Hurt_2",
+        "animations/Stand/Emotions/Negative/Late_1",
+        "animations/Stand/Emotions/Negative/Sad_1",
+        "animations/Stand/Emotions/Negative/Sad_2",
+        "animations/Stand/Emotions/Negative/Shocked_1",
+        "animations/Stand/Emotions/Negative/Sorry_1",
+        "animations/Stand/Emotions/Negative/Surprise_1",
+        "animations/Stand/Emotions/Negative/Surprise_2",
+        "animations/Stand/Emotions/Negative/Surprise_3",
+        "animations/Stand/Emotions/Neutral/Alienated_1",
+        "animations/Stand/Emotions/Neutral/AskForAttention_1",
+        "animations/Stand/Emotions/Neutral/AskForAttention_2",
+        "animations/Stand/Emotions/Neutral/AskForAttention_3",
+        "animations/Stand/Emotions/Neutral/Cautious_1",
+        "animations/Stand/Emotions/Neutral/Confused_1",
+        "animations/Stand/Emotions/Neutral/Determined_1",
+        "animations/Stand/Emotions/Neutral/Embarrassed_1",
+        "animations/Stand/Emotions/Neutral/Hesitation_1",
+        "animations/Stand/Emotions/Neutral/Innocent_1",
+        "animations/Stand/Emotions/Neutral/Lonely_1",
+        "animations/Stand/Emotions/Neutral/Mischievous_1",
+        "animations/Stand/Emotions/Neutral/Puzzled_1",
+        "animations/Stand/Emotions/Neutral/Sneeze",
+        "animations/Stand/Emotions/Neutral/Stubborn_1",
+        "animations/Stand/Emotions/Neutral/Suspicious_1",
+        "animations/Stand/Emotions/Positive/Amused_1",
+        "animations/Stand/Emotions/Positive/Confident_1",
+        "animations/Stand/Emotions/Positive/Ecstatic_1",
+        "animations/Stand/Emotions/Positive/Enthusiastic_1",
+        "animations/Stand/Emotions/Positive/Excited_1",
+        "animations/Stand/Emotions/Positive/Excited_2",
+        "animations/Stand/Emotions/Positive/Excited_3",
+        "animations/Stand/Emotions/Positive/Happy_1",
+        "animations/Stand/Emotions/Positive/Happy_2",
+        "animations/Stand/Emotions/Positive/Happy_3",
+        "animations/Stand/Emotions/Positive/Happy_4",
+        "animations/Stand/Emotions/Positive/Hungry_1",
+        "animations/Stand/Emotions/Positive/Hysterical_1",
+        "animations/Stand/Emotions/Positive/Interested_1",
+        "animations/Stand/Emotions/Positive/Interested_2",
+        "animations/Stand/Emotions/Positive/Laugh_1",
+        "animations/Stand/Emotions/Positive/Laugh_2",
+        "animations/Stand/Emotions/Positive/Laugh_3",
+        "animations/Stand/Emotions/Positive/Mocker_1",
+        "animations/Stand/Emotions/Positive/Optimistic_1",
+        "animations/Stand/Emotions/Positive/Peaceful_1",
+        "animations/Stand/Emotions/Positive/Proud_1",
+        "animations/Stand/Emotions/Positive/Proud_2",
+        "animations/Stand/Emotions/Positive/Proud_3",
+        "animations/Stand/Emotions/Positive/Relieved_1",
+        "animations/Stand/Emotions/Positive/Shy_1",
+        "animations/Stand/Emotions/Positive/Shy_2",
+        "animations/Stand/Emotions/Positive/Sure_1",
+        "animations/Stand/Emotions/Positive/Winner_1",
+        "animations/Stand/Emotions/Positive/Winner_2",
+        "animations/Stand/Gestures/Angry_1",
+        "animations/Stand/Gestures/Angry_2",
+        "animations/Stand/Gestures/Angry_3",
+        "animations/Stand/Gestures/BowShort_1",
+        "animations/Stand/Gestures/BowShort_2",
+        "animations/Stand/Gestures/BowShort_3",
+        "animations/Stand/Gestures/But_1",
+        "animations/Stand/Gestures/CalmDown_1",
+        "animations/Stand/Gestures/CalmDown_2",
+        "animations/Stand/Gestures/CalmDown_3",
+        "animations/Stand/Gestures/CalmDown_4",
+        "animations/Stand/Gestures/CalmDown_5",
+        "animations/Stand/Gestures/CalmDown_6",
+        "animations/Stand/Gestures/Choice_1",
+        "animations/Stand/Gestures/ComeOn_1",
+        "animations/Stand/Gestures/Confused_1",
+        "animations/Stand/Gestures/Confused_2",
+        "animations/Stand/Gestures/CountFive_1",
+        "animations/Stand/Gestures/CountFour_1",
+        "animations/Stand/Gestures/CountMore_1",
+        "animations/Stand/Gestures/CountOne_1",
+        "animations/Stand/Gestures/CountThree_1",
+        "animations/Stand/Gestures/CountTwo_1",
+        "animations/Stand/Gestures/Desperate_1",
+        "animations/Stand/Gestures/Desperate_2",
+        "animations/Stand/Gestures/Desperate_3",
+        "animations/Stand/Gestures/Desperate_4",
+        "animations/Stand/Gestures/Desperate_5",
+        "animations/Stand/Gestures/DontUnderstand_1",
+        "animations/Stand/Gestures/Enthusiastic_3",
+        "animations/Stand/Gestures/Enthusiastic_4",
+        "animations/Stand/Gestures/Enthusiastic_5",
+        "animations/Stand/Gestures/Everything_1",
+        "animations/Stand/Gestures/Everything_2",
+        "animations/Stand/Gestures/Everything_3",
+        "animations/Stand/Gestures/Everything_4",
+        "animations/Stand/Gestures/Everything_6",
+        "animations/Stand/Gestures/Excited_1",
+        "animations/Stand/Gestures/Explain_1",
+        "animations/Stand/Gestures/Explain_10",
+        "animations/Stand/Gestures/Explain_11",
+        "animations/Stand/Gestures/Explain_2",
+        "animations/Stand/Gestures/Explain_3",
+        "animations/Stand/Gestures/Explain_4",
+        "animations/Stand/Gestures/Explain_5",
+        "animations/Stand/Gestures/Explain_6",
+        "animations/Stand/Gestures/Explain_7",
+        "animations/Stand/Gestures/Explain_8",
+        "animations/Stand/Gestures/Far_1",
+        "animations/Stand/Gestures/Far_2",
+        "animations/Stand/Gestures/Far_3",
+        "animations/Stand/Gestures/Follow_1",
+        "animations/Stand/Gestures/Give_1",
+        "animations/Stand/Gestures/Give_2",
+        "animations/Stand/Gestures/Give_3",
+        "animations/Stand/Gestures/Give_4",
+        "animations/Stand/Gestures/Give_5",
+        "animations/Stand/Gestures/Give_6",
+        "animations/Stand/Gestures/Great_1",
+        "animations/Stand/Gestures/HeSays_1",
+        "animations/Stand/Gestures/HeSays_2",
+        "animations/Stand/Gestures/HeSays_3",
+        "animations/Stand/Gestures/Hey_1",
+        "animations/Stand/Gestures/Hey_10",
+        "animations/Stand/Gestures/Hey_2",
+        "animations/Stand/Gestures/Hey_3",
+        "animations/Stand/Gestures/Hey_4",
+        "animations/Stand/Gestures/Hey_6",
+        "animations/Stand/Gestures/Hey_7",
+        "animations/Stand/Gestures/Hey_8",
+        "animations/Stand/Gestures/Hey_9",
+        "animations/Stand/Gestures/Hide_1",
+        "animations/Stand/Gestures/Hot_1",
+        "animations/Stand/Gestures/Hot_2",
+        "animations/Stand/Gestures/IDontKnow_1",
+        "animations/Stand/Gestures/IDontKnow_2",
+        "animations/Stand/Gestures/IDontKnow_3",
+        "animations/Stand/Gestures/IDontKnow_4",
+        "animations/Stand/Gestures/IDontKnow_5",
+        "animations/Stand/Gestures/IDontKnow_6",
+        "animations/Stand/Gestures/Joy_1",
+        "animations/Stand/Gestures/Kisses_1",
+        "animations/Stand/Gestures/Look_1",
+        "animations/Stand/Gestures/Look_2",
+        "animations/Stand/Gestures/Maybe_1",
+        "animations/Stand/Gestures/Me_1",
+        "animations/Stand/Gestures/Me_2",
+        "animations/Stand/Gestures/Me_4",
+        "animations/Stand/Gestures/Me_7",
+        "animations/Stand/Gestures/Me_8",
+        "animations/Stand/Gestures/Mime_1",
+        "animations/Stand/Gestures/Mime_2",
+        "animations/Stand/Gestures/Next_1",
+        "animations/Stand/Gestures/No_1",
+        "animations/Stand/Gestures/No_2",
+        "animations/Stand/Gestures/No_3",
+        "animations/Stand/Gestures/No_4",
+        "animations/Stand/Gestures/No_5",
+        "animations/Stand/Gestures/No_6",
+        "animations/Stand/Gestures/No_7",
+        "animations/Stand/Gestures/No_8",
+        "animations/Stand/Gestures/No_9",
+        "animations/Stand/Gestures/Nothing_1",
+        "animations/Stand/Gestures/Nothing_2",
+        "animations/Stand/Gestures/OnTheEvening_1",
+        "animations/Stand/Gestures/OnTheEvening_2",
+        "animations/Stand/Gestures/OnTheEvening_3",
+        "animations/Stand/Gestures/OnTheEvening_4",
+        "animations/Stand/Gestures/OnTheEvening_5",
+        "animations/Stand/Gestures/Please_1",
+        "animations/Stand/Gestures/Please_2",
+        "animations/Stand/Gestures/Please_3",
+        "animations/Stand/Gestures/Reject_1",
+        "animations/Stand/Gestures/Reject_2",
+        "animations/Stand/Gestures/Reject_3",
+        "animations/Stand/Gestures/Reject_4",
+        "animations/Stand/Gestures/Reject_5",
+        "animations/Stand/Gestures/Reject_6",
+        "animations/Stand/Gestures/Salute_1",
+        "animations/Stand/Gestures/Salute_2",
+        "animations/Stand/Gestures/Salute_3",
+        "animations/Stand/Gestures/ShowFloor_1",
+        "animations/Stand/Gestures/ShowFloor_2",
+        "animations/Stand/Gestures/ShowFloor_3",
+        "animations/Stand/Gestures/ShowFloor_4",
+        "animations/Stand/Gestures/ShowFloor_5",
+        "animations/Stand/Gestures/ShowSky_1",
+        "animations/Stand/Gestures/ShowSky_10",
+        "animations/Stand/Gestures/ShowSky_11",
+        "animations/Stand/Gestures/ShowSky_12",
+        "animations/Stand/Gestures/ShowSky_2",
+        "animations/Stand/Gestures/ShowSky_3",
+        "animations/Stand/Gestures/ShowSky_4",
+        "animations/Stand/Gestures/ShowSky_5",
+        "animations/Stand/Gestures/ShowSky_6",
+        "animations/Stand/Gestures/ShowSky_7",
+        "animations/Stand/Gestures/ShowSky_8",
+        "animations/Stand/Gestures/ShowSky_9",
+        "animations/Stand/Gestures/ShowTablet_1",
+        "animations/Stand/Gestures/ShowTablet_2",
+        "animations/Stand/Gestures/ShowTablet_3",
+        "animations/Stand/Gestures/Shy_1",
+        "animations/Stand/Gestures/Stretch_1",
+        "animations/Stand/Gestures/Stretch_2",
+        "animations/Stand/Gestures/Surprised_1",
+        "animations/Stand/Gestures/TakePlace_1",
+        "animations/Stand/Gestures/TakePlace_2",
+        "animations/Stand/Gestures/Take_1",
+        "animations/Stand/Gestures/Thinking_1",
+        "animations/Stand/Gestures/Thinking_2",
+        "animations/Stand/Gestures/Thinking_3",
+        "animations/Stand/Gestures/Thinking_4",
+        "animations/Stand/Gestures/Thinking_5",
+        "animations/Stand/Gestures/Thinking_6",
+        "animations/Stand/Gestures/Thinking_7",
+        "animations/Stand/Gestures/Thinking_8",
+        "animations/Stand/Gestures/This_1",
+        "animations/Stand/Gestures/This_10",
+        "animations/Stand/Gestures/This_11",
+        "animations/Stand/Gestures/This_12",
+        "animations/Stand/Gestures/This_13",
+        "animations/Stand/Gestures/This_14",
+        "animations/Stand/Gestures/This_15",
+        "animations/Stand/Gestures/This_2",
+        "animations/Stand/Gestures/This_3",
+        "animations/Stand/Gestures/This_4",
+        "animations/Stand/Gestures/This_5",
+        "animations/Stand/Gestures/This_6",
+        "animations/Stand/Gestures/This_7",
+        "animations/Stand/Gestures/This_8",
+        "animations/Stand/Gestures/This_9",
+        "animations/Stand/Gestures/WhatSThis_1",
+        "animations/Stand/Gestures/WhatSThis_10",
+        "animations/Stand/Gestures/WhatSThis_11",
+        "animations/Stand/Gestures/WhatSThis_12",
+        "animations/Stand/Gestures/WhatSThis_13",
+        "animations/Stand/Gestures/WhatSThis_14",
+        "animations/Stand/Gestures/WhatSThis_15",
+        "animations/Stand/Gestures/WhatSThis_16",
+        "animations/Stand/Gestures/WhatSThis_2",
+        "animations/Stand/Gestures/WhatSThis_3",
+        "animations/Stand/Gestures/WhatSThis_4",
+        "animations/Stand/Gestures/WhatSThis_5",
+        "animations/Stand/Gestures/WhatSThis_6",
+        "animations/Stand/Gestures/WhatSThis_7",
+        "animations/Stand/Gestures/WhatSThis_8",
+        "animations/Stand/Gestures/WhatSThis_9",
+        "animations/Stand/Gestures/Whisper_1",
+        "animations/Stand/Gestures/Wings_1",
+        "animations/Stand/Gestures/Wings_2",
+        "animations/Stand/Gestures/Wings_3",
+        "animations/Stand/Gestures/Wings_4",
+        "animations/Stand/Gestures/Wings_5",
+        "animations/Stand/Gestures/Yes_1",
+        "animations/Stand/Gestures/Yes_2",
+        "animations/Stand/Gestures/Yes_3",
+        "animations/Stand/Gestures/YouKnowWhat_1",
+        "animations/Stand/Gestures/YouKnowWhat_2",
+        "animations/Stand/Gestures/YouKnowWhat_3",
+        "animations/Stand/Gestures/YouKnowWhat_4",
+        "animations/Stand/Gestures/YouKnowWhat_5",
+        "animations/Stand/Gestures/YouKnowWhat_6",
+        "animations/Stand/Gestures/You_1",
+        "animations/Stand/Gestures/You_2",
+        "animations/Stand/Gestures/You_3",
+        "animations/Stand/Gestures/You_4",
+        "animations/Stand/Gestures/You_5",
+        "animations/Stand/Gestures/Yum_1",
+        "animations/Stand/Reactions/EthernetOff_1",
+        "animations/Stand/Reactions/EthernetOn_1",
+        "animations/Stand/Reactions/Heat_1",
+        "animations/Stand/Reactions/Heat_2",
+        "animations/Stand/Reactions/LightShine_1",
+        "animations/Stand/Reactions/LightShine_2",
+        "animations/Stand/Reactions/LightShine_3",
+        "animations/Stand/Reactions/LightShine_4",
+        "animations/Stand/Reactions/SeeColor_1",
+        "animations/Stand/Reactions/SeeColor_2",
+        "animations/Stand/Reactions/SeeColor_3",
+        "animations/Stand/Reactions/SeeSomething_1",
+        "animations/Stand/Reactions/SeeSomething_3",
+        "animations/Stand/Reactions/SeeSomething_4",
+        "animations/Stand/Reactions/SeeSomething_5",
+        "animations/Stand/Reactions/SeeSomething_6",
+        "animations/Stand/Reactions/SeeSomething_7",
+        "animations/Stand/Reactions/SeeSomething_8",
+        "animations/Stand/Reactions/ShakeBody_1",
+        "animations/Stand/Reactions/ShakeBody_2",
+        "animations/Stand/Reactions/ShakeBody_3",
+        "animations/Stand/Reactions/TouchHead_1",
+        "animations/Stand/Reactions/TouchHead_2",
+        "animations/Stand/Reactions/TouchHead_3",
+        "animations/Stand/Reactions/TouchHead_4",
+        "animations/Stand/Waiting/AirGuitar_1",
+        "animations/Stand/Waiting/BackRubs_1",
+        "animations/Stand/Waiting/Bandmaster_1",
+        "animations/Stand/Waiting/Binoculars_1",
+        "animations/Stand/Waiting/BreathLoop_1",
+        "animations/Stand/Waiting/BreathLoop_2",
+        "animations/Stand/Waiting/BreathLoop_3",
+        "animations/Stand/Waiting/CallSomeone_1",
+        "animations/Stand/Waiting/Drink_1",
+        "animations/Stand/Waiting/DriveCar_1",
+        "animations/Stand/Waiting/Fitness_1",
+        "animations/Stand/Waiting/Fitness_2",
+        "animations/Stand/Waiting/Fitness_3",
+        "animations/Stand/Waiting/FunnyDancer_1",
+        "animations/Stand/Waiting/HappyBirthday_1",
+        "animations/Stand/Waiting/Helicopter_1",
+        "animations/Stand/Waiting/HideEyes_1",
+        "animations/Stand/Waiting/HideHands_1",
+        "animations/Stand/Waiting/Innocent_1",
+        "animations/Stand/Waiting/Knight_1",
+        "animations/Stand/Waiting/KnockEye_1",
+        "animations/Stand/Waiting/KungFu_1",
+        "animations/Stand/Waiting/LookHand_1",
+        "animations/Stand/Waiting/LookHand_2",
+        "animations/Stand/Waiting/LoveYou_1",
+        "animations/Stand/Waiting/Monster_1",
+        "animations/Stand/Waiting/MysticalPower_1",
+        "animations/Stand/Waiting/PlayHands_1",
+        "animations/Stand/Waiting/PlayHands_2",
+        "animations/Stand/Waiting/PlayHands_3",
+        "animations/Stand/Waiting/Relaxation_1",
+        "animations/Stand/Waiting/Relaxation_2",
+        "animations/Stand/Waiting/Relaxation_3",
+        "animations/Stand/Waiting/Relaxation_4",
+        "animations/Stand/Waiting/Rest_1",
+        "animations/Stand/Waiting/Robot_1",
+        "animations/Stand/Waiting/ScratchBack_1",
+        "animations/Stand/Waiting/ScratchBottom_1",
+        "animations/Stand/Waiting/ScratchEye_1",
+        "animations/Stand/Waiting/ScratchHand_1",
+        "animations/Stand/Waiting/ScratchHead_1",
+        "animations/Stand/Waiting/ScratchLeg_1",
+        "animations/Stand/Waiting/ScratchTorso_1",
+        "animations/Stand/Waiting/ShowMuscles_1",
+        "animations/Stand/Waiting/ShowMuscles_2",
+        "animations/Stand/Waiting/ShowMuscles_3",
+        "animations/Stand/Waiting/ShowMuscles_4",
+        "animations/Stand/Waiting/ShowMuscles_5",
+        "animations/Stand/Waiting/ShowSky_1",
+        "animations/Stand/Waiting/ShowSky_2",
+        "animations/Stand/Waiting/SpaceShuttle_1",
+        "animations/Stand/Waiting/Stretch_1",
+        "animations/Stand/Waiting/Stretch_2",
+        "animations/Stand/Waiting/TakePicture_1",
+        "animations/Stand/Waiting/Taxi_1",
+        "animations/Stand/Waiting/Think_1",
+        "animations/Stand/Waiting/Think_2",
+        "animations/Stand/Waiting/Think_3",
+        "animations/Stand/Waiting/Think_4",
+        "animations/Stand/Waiting/Waddle_1",
+        "animations/Stand/Waiting/Waddle_2",
+        "animations/Stand/Waiting/WakeUp_1",
+        "animations/Stand/Waiting/Zombie_1"]
+
+
+/**
+ * Returns a gesture value editor component.
+ * @returns JSX.Element
+ */
+export default function GestureValueEditor({
+  value,
+  setValue,
+  setType,
+  placeholder = "Gesture name",
+}: GestureValueEditorProps) {
+
+  /** Input mode: semantic tag vs concrete animation path */
+  const [mode, setMode] = useState<"single" | "tag">("tag");
+
+  /** Raw text value for single-gesture input */
+  const [customValue, setCustomValue] = useState("");
+
+  /** Autocomplete dropdown state */
+  const [showSuggestions, setShowSuggestions] = useState(true);
+  const [filteredSuggestions, setFilteredSuggestions] = useState<string[]>([]);
+
+  /** Reserved for future click-outside / positioning logic */
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  /** Switch between tag and single input modes */
+  const handleModeChange = (newMode: "single" | "tag") => {
+    setMode(newMode);
+
+    if (newMode === "single") {
+      setValue(customValue || value);
+      setType(false);
+      setFilteredSuggestions(GESTURE_SINGLES);
+      setShowSuggestions(true);
+    } else {
+      // Clear value if it does not match a valid tag
+      setType(true);
+      const isValidTag = GESTURE_TAGS.some(
+        tag => tag.toLowerCase() === value.toLowerCase()
+      );
+      if (!isValidTag) setValue("");
+      setShowSuggestions(false);
+    }
+  };
+
+  /** Select a semantic gesture tag */
+  const handleTagSelect = (tag: string) => {
+    setValue(tag);
+  };
+
+  /** Update single-gesture input and filter suggestions */
+  const handleCustomChange = (newValue: string) => {
+    setCustomValue(newValue);
+    setValue(newValue);
+
+    if (newValue.trim() === "") {
+      setFilteredSuggestions(GESTURE_SINGLES);
+      setShowSuggestions(true);
+    } else {
+      const filtered = GESTURE_SINGLES.filter(single =>
+        single.toLowerCase().includes(newValue.toLowerCase())
+      );
+      setFilteredSuggestions(filtered);
+      setShowSuggestions(filtered.length > 0);
+    }
+  };
+
+  /** Commit autocomplete selection */
+  const handleSuggestionSelect = (suggestion: string) => {
+    setCustomValue(suggestion);
+    setValue(suggestion);
+    setShowSuggestions(false);
+  };
+
+  /** Refresh suggestions on refocus */
+  const handleInputFocus = () => {
+    if (!customValue.trim()) return;
+
+    const filtered = GESTURE_SINGLES.filter(single =>
+      single.toLowerCase().includes(customValue.toLowerCase())
+    );
+    setFilteredSuggestions(filtered);
+    setShowSuggestions(filtered.length > 0);
+  };
+
+  /** Exists to allow delayed blur handling if needed */
+  const handleInputBlur = (_e: React.FocusEvent) => {};
+
+
+  /** Build the JSX component */
+  return (
+    <div className={styles.gestureEditor} ref={containerRef}>
+      {/* Mode toggle */}
+      <div className={styles.modeSelector}>
+        <label className={styles.modeLabel}>Input Mode:</label>
+        <div className={styles.toggleContainer}>
+          <button
+            type="button"
+            className={`${styles.toggleButton} ${mode === "single" ? styles.active : ""}`}
+            onClick={() => handleModeChange("single")}
+          >
+            Single
+          </button>
+          <button
+            type="button"
+            className={`${styles.toggleButton} ${mode === "tag" ? styles.active : ""}`}
+            onClick={() => handleModeChange("tag")}
+          >
+            Tag
+          </button>
+        </div>
+      </div>
+
+      <div className={styles.valueEditor} data-testid={"valueEditorTestID"}>
+        {mode === "single" ? (
+          <div className={styles.autocompleteContainer}>
+            {showSuggestions && (
+              <div className={styles.suggestionsDropdownLeft}>
+                {filteredSuggestions.map((suggestion) => (
+                  <div
+                    key={suggestion}
+                    className={styles.suggestionItem}
+                    onClick={() => handleSuggestionSelect(suggestion)}
+                    onMouseDown={(e) => e.preventDefault()} // prevent blur before click
+                  >
+                    {suggestion}
+                  </div>
+                ))}
+              </div>
+            )}
+            <input
+              type="text"
+              value={customValue}
+              onChange={(e) => handleCustomChange(e.target.value)}
+              onFocus={handleInputFocus}
+              onBlur={handleInputBlur}
+              placeholder={placeholder}
+              className={`${styles.textInput} ${showSuggestions ? styles.textInputWithSuggestions : ''}`}
+              autoComplete="off"
+            />
+          </div>
+        ) : (
+          <div className={styles.tagSelector}>
+            <select
+              value={value}
+              onChange={(e) => handleTagSelect(e.target.value)}
+              className={styles.tagSelect}
+              data-testid={"tagSelectorTestID"}
+            >
+              <option value="" >Select a gesture tag...</option>
+              {GESTURE_TAGS.map((tag) => (
+                <option key={tag} value={tag}>{tag}</option>
+              ))}
+            </select>
+
+            <div className={styles.tagList}>
+              {GESTURE_TAGS.map((tag) => (
+                <button
+                  key={tag}
+                  type="button"
+                  className={`${styles.tagButton} ${value === tag ? styles.selected : ""}`}
+                  onClick={() => handleTagSelect(tag)}
+                >
+                  {tag}
+                </button>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
--- a/src/pages/VisProgPage/visualProgrammingUI/components/Plan.default.ts
+++ b/src/pages/VisProgPage/visualProgrammingUI/components/Plan.default.ts
@@ -0,0 +1,7 @@
+import type { Plan } from "./Plan";
+
+export const defaultPlan: Plan = {
+    name: "Default Plan",
+    id: "-1",
+    steps: [],
+}
--- a/src/pages/VisProgPage/visualProgrammingUI/components/Plan.tsx
+++ b/src/pages/VisProgPage/visualProgrammingUI/components/Plan.tsx
@@ -0,0 +1,101 @@
+export type Plan = {
+    name: string,
+    id: string,
+    steps: PlanElement[],
+}
+
+export type PlanElement = Goal | Action
+
+export type Goal = {
+    id: string,
+    name: string,
+    plan: Plan,
+    can_fail: boolean,
+    type: "goal"
+}
+
+// Actions
+export type Action = SpeechAction | GestureAction | LLMAction
+export type SpeechAction = { id: string, text: string, type:"speech" }
+export type GestureAction = { id: string, gesture: string, isTag: boolean, type:"gesture" }
+export type LLMAction = { id: string, goal: string, type:"llm" }
+
+export type ActionTypes = "speech" | "gesture" | "llm";
+
+
+// Extract the wanted information from a plan within the reducing of nodes
+export function PlanReduce(plan?: Plan) {
+    if (!plan) return ""
+    return {
+        id: plan.id,
+        steps: plan.steps.map((x) => StepReduce(x))
+    }
+}
+
+
+// Extract the wanted information from a plan element.
+function StepReduce(planElement: PlanElement) {
+    // We have different types of plan elements, requiring differnt types of output
+    switch (planElement.type) {
+        case ("speech"):
+            return {
+                id: planElement.id,
+                text: planElement.text,
+            }
+        case ("gesture"):
+            return {
+                id: planElement.id,
+                gesture: {
+                    type: planElement.isTag ? "tag" : "single",
+                    name: planElement.gesture 
+                },
+            }
+        case ("llm"):
+            return {
+                id: planElement.id,
+                goal: planElement.goal,
+            }
+        case ("goal"):
+            return {
+                id: planElement.id,
+                plan: planElement.plan,
+                can_fail: planElement.can_fail,
+            };
+        default:
+    }
+}
+
+/**
+ * Finds out whether the plan can iterate multiple times, or always stops after one action.
+ * This comes down to checking if the plan only has speech/ gesture actions, or others as well.
+ * @param plan: the plan to check
+ * @returns: a boolean 
+ */
+export function DoesPlanIterate(plan?: Plan) : boolean {
+    // TODO: should recursively check plans that have goals (and thus more plans) in them.
+    if (!plan) return false
+    return plan.steps.filter((step) => step.type == "llm").length > 0;
+}
+
+/**
+ * Returns the value of the action.
+ * Since typescript can't polymorphicly access the value field,
+ * we need to switch over the types and return the correct field.
+ * @param action: action to retrieve the value from 
+ * @returns string | undefined
+ */
+export function GetActionValue(action: Action) {
+    let returnAction;
+    switch (action.type) {
+        case "gesture":
+            returnAction = action as GestureAction
+            return returnAction.gesture;
+        case "speech":
+            returnAction = action as SpeechAction
+            return returnAction.text;
+        case "llm":
+            returnAction = action as LLMAction
+            return returnAction.goal;
+        default:
+    }
+}
--- a/src/pages/VisProgPage/visualProgrammingUI/components/PlanEditor.module.css
+++ b/src/pages/VisProgPage/visualProgrammingUI/components/PlanEditor.module.css
@@ -0,0 +1,71 @@
+.planDialog {
+  overflow:visible;
+  width: 80vw;
+  max-width: 900px;
+  transition: width 0.25s ease;
+  overscroll-behavior: contain;
+}
+
+
+.planDialog::backdrop {
+  background: rgba(0, 0, 0, 0.4);
+}
+
+.planEditor {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem;
+  min-width: 600px;
+}
+
+.planEditorLeft {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.planEditorRight {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  border-left: 1px solid var(--border-color, #ccc);
+  padding-left: 1rem;
+  max-height: 300px;
+  overflow-y: auto;
+}
+
+.planStep {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+  transition: text-decoration 0.2s;
+}
+
+
+.planStep:hover {
+  text-decoration: line-through;
+}
+
+.stepType {
+  opacity: 0.7;
+  font-size: 0.85em;
+}
+
+
+.stepIndex {
+  opacity: 0.6;
+}
+
+.emptySteps {
+  opacity: 0.5;
+  font-style: italic;
+}
+
+.stepSuggestion {
+  opacity: 0.5;
+  font-style: italic;
+}
+
+
--- a/src/pages/VisProgPage/visualProgrammingUI/components/PlanEditor.tsx
+++ b/src/pages/VisProgPage/visualProgrammingUI/components/PlanEditor.tsx
@@ -0,0 +1,243 @@
+import {useRef, useState} from "react";
+import useFlowStore from "../VisProgStores.tsx";
+import styles from './PlanEditor.module.css';
+import { GetActionValue, type Action, type ActionTypes, type Plan } from "../components/Plan";
+import { defaultPlan } from "../components/Plan.default";
+import { TextField } from "../../../../components/TextField";
+import GestureValueEditor from "./GestureValueEditor"; 
+
+type PlanEditorDialogProps = {
+  plan?: Plan;
+  onSave: (plan: Plan | undefined) => void;
+  description? : string;
+};
+
+export default function PlanEditorDialog({
+  plan,
+  onSave,
+  description,
+}: PlanEditorDialogProps) {
+  // UseStates and references
+  const dialogRef = useRef<HTMLDialogElement | null>(null);
+  const [draftPlan, setDraftPlan] = useState<Plan | null>(null);
+  const [newActionType, setNewActionType] = useState<ActionTypes>("speech");
+  const [newActionGestureType, setNewActionGestureType] = useState<boolean>(true);
+  const [newActionValue, setNewActionValue] = useState("");
+  const { setScrollable } = useFlowStore();
+
+  //Button Actions
+  const openCreate = () => {
+    setScrollable(false);
+    setDraftPlan({...structuredClone(defaultPlan), id: crypto.randomUUID()});
+    dialogRef.current?.showModal();
+  };
+
+  const openCreateWithDescription = () => {
+    setScrollable(false);
+    setDraftPlan({...structuredClone(defaultPlan), id: crypto.randomUUID(), name: description!});
+    setNewActionType("llm")
+    setNewActionValue(description!)
+    dialogRef.current?.showModal();
+  }
+
+  const openEdit = () => {
+    setScrollable(false);
+    if (!plan) return;
+    setDraftPlan(structuredClone(plan));
+    dialogRef.current?.showModal();
+  };
+
+  const close = () => {
+    setScrollable(true);
+    dialogRef.current?.close();
+    setDraftPlan(null);
+  };
+
+  const buildAction = (): Action => {
+    const id = crypto.randomUUID();
+    switch (newActionType) {
+    case "speech":
+     return { id, text: newActionValue, type: "speech" };
+    case "gesture":
+        return { id, gesture: newActionValue, isTag: newActionGestureType, type: "gesture" };
+    case "llm":
+        return { id, goal: newActionValue, type: "llm" };
+    }
+  };
+
+  return (<>
+      {/* Create and edit buttons */}
+      {!plan && (
+          <button className={styles.nodeButton} onClick={description ? openCreateWithDescription : openCreate}>
+          Create Plan
+          </button>
+      )}
+      {plan && (
+          <button className={styles.nodeButton} onClick={openEdit}>
+          Edit Plan
+          </button>
+      )}
+
+      {/* Start of dialog (plan editor) */}
+      <dialog
+        ref={dialogRef}
+        className={`${styles.planDialog}`}
+        //onWheel={(e) => e.stopPropagation()}
+        data-testid={"PlanEditorDialogTestID"}
+      >
+      <form method="dialog" className="flex-col gap-md">
+          <h3> {draftPlan?.id === plan?.id ? "Edit Plan" : "Create Plan"} </h3>
+          {/* Plan name text field */}
+          {draftPlan && (
+              <TextField
+                  value={draftPlan.name}
+                  setValue={(name) =>
+                  setDraftPlan({ ...draftPlan, name })}
+              placeholder="Plan name"
+              data-testid="name_text_field"/>
+          )}
+
+          {/* Entire "bottom" part (adder and steps) without cancel, confirm and reset */}
+          {draftPlan && (<div className={styles.planEditor}>
+              <div className={styles.planEditorLeft}>
+              {/* Left Side (Action Adder) */}
+                  <h4>Add Action</h4>
+                  {(!plan && description && draftPlan.steps.length === 0) && (<div className={styles.stepSuggestion}>
+                      <label> Filled in as a suggestion! </label>
+                      <label> Feel free to change! </label>
+                  </div>)}
+                  <label>
+                      Action Type <wbr />
+                      {/* Type selection */}
+                      <select
+                          value={newActionType}
+                          onChange={(e) => {
+                              setNewActionType(e.target.value as ActionTypes);
+                              // Reset value when action type changes
+                              setNewActionValue("");
+                          }}>
+                      <option value="speech">Speech Action</option>
+                      <option value="gesture">Gesture Action</option>
+                      <option value="llm">LLM Action</option>
+                      </select>
+                  </label>
+
+                  {/* Action value editor*/}
+                  {newActionType === "gesture" ? (
+                      // Gesture get their own editor component
+                      <GestureValueEditor
+                        value={newActionValue}
+                        setValue={setNewActionValue}
+                        setType={setNewActionGestureType}
+                        placeholder="Gesture name"
+                      />
+                  ) : (
+                      <TextField
+                          value={newActionValue}
+                          setValue={setNewActionValue}
+                          placeholder={
+                              newActionType === "speech" ? "Speech text"
+                              : "LLM goal"
+                          }
+                      />
+                  )}
+
+                  {/* Adding steps */}
+                  <button
+                      type="button"
+                      disabled={!newActionValue}
+                      onClick={() => {
+                          if (!draftPlan) return;
+                          // Add action to steps
+                          const action = buildAction();
+                          setDraftPlan({
+                              ...draftPlan,
+                              steps: [...draftPlan.steps, action],});
+
+                          // Reset current action building
+                          setNewActionValue("");
+                          setNewActionType("speech");
+                      }}>
+                  Add Step
+                </button>
+              </div>
+
+              {/* Right Side (Steps shown) */}
+              <div className={styles.planEditorRight}>
+                  <h4>Steps</h4>
+
+                  {/* Show if there are no steps yet */}
+                  {draftPlan.steps.length === 0 && (
+                      <div className={styles.emptySteps}>
+                      No steps yet
+                      </div>
+                  )}
+
+
+                  {/* Map over all steps */}
+                  {draftPlan.steps.map((step, index) => (
+                      <div
+                      role="button"
+                      tabIndex={0}
+                      key={step.id}
+                      className={styles.planStep}
+                      // Extra logic for screen readers to access using keyboard
+                      onKeyDown={(e) => {
+                          if (e.key === "Enter" || e.key === " ") {
+                          setDraftPlan({
+                          ...draftPlan,
+                          steps: draftPlan.steps.filter((s) => s.id !== step.id),});
+                          }}}
+                      onClick={() => {
+                          setDraftPlan({
+                          ...draftPlan,
+                          steps: draftPlan.steps.filter((s) => s.id !== step.id),});
+                      }}>
+
+                      <span className={styles.stepIndex}>{index + 1}.</span>
+                      <span className={styles.stepType}>{step.type}:</span>
+                      <span className={styles.stepName}>{
+                      step.type == "goal" ? ""/* TODO: Add support for goals */
+                      : GetActionValue(step)}
+                      </span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* Buttons */}
+          <div className="flex-row gap-md">
+              {/* Close button */}
+              <button type="button" onClick={close}>
+              Cancel
+              </button>
+
+              {/* Confirm/ Create button */}
+              <button
+              type="button"
+              disabled={!draftPlan}
+              onClick={() => {
+                  if (!draftPlan) return;
+                  onSave(draftPlan);
+                  close();
+              }}>
+              {draftPlan?.id === plan?.id ? "Confirm" : "Create"}
+              </button>
+
+              {/* Reset button */}
+              <button
+              type="button"
+              disabled={!draftPlan}
+              onClick={() => {
+                  onSave(undefined);
+                  close();
+              }}>
+              Reset
+              </button>
+        </div>
+      </form>
+    </dialog>
+  </>
+);
+}
--- a/src/pages/VisProgPage/visualProgrammingUI/components/RuleBasedHandle.module.css
+++ b/src/pages/VisProgPage/visualProgrammingUI/components/RuleBasedHandle.module.css
@@ -0,0 +1,34 @@
+:global(.react-flow__handle.connected) {
+    background: lightgray;
+    border-color: green;
+    filter: drop-shadow(0 0 0.25rem green);
+}
+
+:global(.singleConnectionHandle.connected) {
+    background: #55dd99;
+}
+
+:global(.react-flow__handle.unconnected){
+    background: lightgray;
+    border-color: gray;
+}
+
+:global(.singleConnectionHandle.unconnected){
+    background: lightsalmon;
+    border-color: #ff6060;
+    filter: drop-shadow(0 0 0.25rem #ff6060);
+}
+
+:global(.react-flow__handle.connectingto) {
+    background: #ff6060;
+    border-color: coral;
+    filter: drop-shadow(0 0 0.25rem coral);
+}
+
+:global(.react-flow__handle.valid) {
+    background: #55dd99;
+    border-color: green;
+    filter: drop-shadow(0 0 0.25rem green);
+}
+
+
--- a/src/pages/VisProgPage/visualProgrammingUI/components/RuleBasedHandle.tsx
+++ b/src/pages/VisProgPage/visualProgrammingUI/components/RuleBasedHandle.tsx
@@ -0,0 +1,88 @@
+import {
+  Handle,
+  type HandleProps,
+  type Connection,
+  useNodeId, useNodeConnections
+} from '@xyflow/react';
+import {useState} from 'react';
+import { type HandleRule, useHandleRules} from "../HandleRuleLogic.ts";
+import "./RuleBasedHandle.module.css";
+
+
+
+export function MultiConnectionHandle({
+  id,
+  type,
+  rules = [],
+  ...otherProps
+} : HandleProps & { rules?: HandleRule[]}) {
+  let nodeId = useNodeId();
+  // this check is used to make sure that the handle code doesn't break when used inside a test,
+  // since useNodeId would be undefined if the handle is not used inside a node
+  nodeId = nodeId ? nodeId : "mockId";
+  const validate = useHandleRules(nodeId, id!, type!, rules);
+
+
+  const connections = useNodeConnections({
+    id: nodeId,
+    handleType: type,
+    handleId: id!
+  })
+
+  // initialise the handles state with { isValid: true } to show that connections are possible
+  const [handleState, setHandleState] = useState<{ isSatisfied: boolean, message?: string }>({ isSatisfied: true });
+
+  return (
+    <Handle
+      {...otherProps}
+      id={id}
+      type={type}
+      className={"multiConnectionHandle" + (connections.length === 0 ? " unconnected" : " connected")}
+      isValidConnection={(connection) => {
+        const result = validate(connection as Connection);
+        setHandleState(result);
+        return result.isSatisfied;
+      }}
+      title={handleState.message}
+    />
+  );
+}
+
+export function SingleConnectionHandle({
+  id,
+  type,
+  rules = [],
+  ...otherProps
+} : HandleProps & { rules?: HandleRule[]}) {
+  let nodeId = useNodeId();
+  // this check is used to make sure that the handle code doesn't break when used inside a test,
+  // since useNodeId would be undefined if the handle is not used inside a node
+  nodeId = nodeId ? nodeId : "mockId";
+  const validate = useHandleRules(nodeId, id!, type!, rules);
+
+  const connections = useNodeConnections({
+    id: nodeId,
+    handleType: type,
+    handleId: id!
+  })
+
+  // initialise the handles state with { isValid: true } to show that connections are possible
+  const [handleState, setHandleState] = useState<{ isSatisfied: boolean, message?: string }>({ isSatisfied: true });
+
+  return (
+    <Handle
+      {...otherProps}
+      id={id}
+      type={type}
+      className={"singleConnectionHandle" + (connections.length === 0 ? " unconnected" : " connected")}
+      isConnectable={connections.length === 0}
+      isValidConnection={(connection) => {
+        const result = validate(connection as Connection);
+        setHandleState(result);
+        return result.isSatisfied;
+      }}
+      title={handleState.message}
+    />
+  );
+}
+
--- a/src/pages/VisProgPage/visualProgrammingUI/nodes/BasicBeliefNode.default.ts
+++ b/src/pages/VisProgPage/visualProgrammingUI/nodes/BasicBeliefNode.default.ts
@@ -7,6 +7,6 @@ import type { BasicBeliefNodeData } from "./BasicBeliefNode";
 export const BasicBeliefNodeDefaults: BasicBeliefNodeData = {
  label: "Belief",
  droppable: true,
-  belief: {type: "keyword", id: "help", value: "help", label: "Keyword said:"},
+  belief: {type: "keyword", id: "", value: "", label: "Keyword said:"},
  hasReduce: true,
 };
--- a/src/pages/VisProgPage/visualProgrammingUI/nodes/BasicBeliefNode.tsx
+++ b/src/pages/VisProgPage/visualProgrammingUI/nodes/BasicBeliefNode.tsx
@@ -1,13 +1,15 @@
 import {
-  Handle,
  type NodeProps,
  Position,
  type Node,
 } from '@xyflow/react';
 import { Toolbar } from '../components/NodeComponents';
 import styles from '../../VisProg.module.css';
+import {MultiConnectionHandle} from "../components/RuleBasedHandle.tsx";
+import {allowOnlyConnectionsFromType} from "../HandleRules.ts";
 import useFlowStore from '../VisProgStores';
 import { TextField } from '../../../../components/TextField';
+import { MultilineTextField } from '../../../../components/MultilineTextField';

 /**
 * The default data structure for a BasicBelief node
@@ -31,7 +33,7 @@ export type BasicBeliefNodeData = {
 // These are all the types a basic belief could be.
 type BasicBeliefType = Keyword | Semantic | DetectedObject | Emotion
 type Keyword = { type: "keyword", id: string, value: string, label: "Keyword said:"};
-type Semantic = { type: "semantic", id: string, value: string, label: "Detected with LLM:"};
+type Semantic = { type: "semantic", id: string, value: string, description: string, label: "Detected with LLM:"};
 type DetectedObject = { type: "object", id: string, value: string, label: "Object found:"};
 type Emotion = { type: "emotion", id: string, value: string, label: "Emotion recognised:"};

@@ -102,6 +104,10 @@ export default function BasicBeliefNode(props: NodeProps<BasicBeliefNode>) {
  }


+  const setBeliefDescription = (value: string) => {
+    updateNodeData(props.id, {...data, belief: {...data.belief, description: value}});
+  }
+
  // Use this
  const emotionOptions = ["Happy", "Angry", "Sad", "Cheerful"]

@@ -114,7 +120,7 @@ export default function BasicBeliefNode(props: NodeProps<BasicBeliefNode>) {
      wrapping = '"'
      break; 
    case ("semantic"):
-      placeholder = "word..."
+      placeholder = "description..."
      wrapping = '"'
      break; 
    case ("object"):
@@ -147,7 +153,6 @@ export default function BasicBeliefNode(props: NodeProps<BasicBeliefNode>) {
            <option value="emotion">Emotion recognised:</option>
          </select>
          {wrapping}
-
          {data.belief.type === "emotion" && (
            <select
              value={data.belief.value}
@@ -161,7 +166,6 @@ export default function BasicBeliefNode(props: NodeProps<BasicBeliefNode>) {
            </select>
          )}

-
          {data.belief.type !== "emotion" && 
          (<TextField
            id={label_input_id}
@@ -171,7 +175,18 @@ export default function BasicBeliefNode(props: NodeProps<BasicBeliefNode>) {
          />)}
          {wrapping}
        </div>
-        <Handle type="source" position={Position.Right} id="source"/>
+        {data.belief.type === "semantic" && (
+          <div className={"flex-wrap padding-sm"}>
+            <MultilineTextField
+                        value={data.belief.description}
+                        setValue={setBeliefDescription}
+                        placeholder={"Describe the desciption of this LLM belief..."}
+                      />
+          </div>
+          )}
+        <MultiConnectionHandle type="source" position={Position.Right} id="source" rules={[
+          allowOnlyConnectionsFromType(["norm", "trigger"]),
+        ]}/>
      </div>
    </>
  );
@@ -185,9 +200,26 @@ export default function BasicBeliefNode(props: NodeProps<BasicBeliefNode>) {
 */
 export function BasicBeliefReduce(node: Node, _nodes: Node[]) {
  const data = node.data as BasicBeliefNodeData;
-  return {
-    id: node.id,
-    type: data.belief.type,
-    value: data.belief.value
+  const result: Record<string, unknown> = {
+        id: node.id, 
+  };
+
+  switch (data.belief.type) {
+    case "emotion":
+      result["emotion"] = data.belief.value;
+      break;
+    case "keyword":
+      result["keyword"] = data.belief.value;
+      break;
+    case "object":
+      result["object"] = data.belief.value;
+      break;
+    case "semantic":
+      result["name"] = data.belief.value;
+      result["description"] = data.belief.description;
+      break;
+    default:
+      break;
  }
+  return result
 }
--- a/src/pages/VisProgPage/visualProgrammingUI/nodes/EndNode.tsx
+++ b/src/pages/VisProgPage/visualProgrammingUI/nodes/EndNode.tsx
@@ -3,9 +3,11 @@ import {
  Position,
  type Node,
 } from '@xyflow/react';
-import LimitedConnectionCountHandle from "../components/CustomNodeHandles.tsx";
 import { Toolbar } from '../components/NodeComponents';
 import styles from '../../VisProg.module.css';
+import {SingleConnectionHandle} from "../components/RuleBasedHandle.tsx";
+import {allowOnlyConnectionsFromType} from "../HandleRules.ts";
+


 /**
@@ -32,13 +34,9 @@ export default function EndNode(props: NodeProps<EndNode>) {
        <div className={"flex-row gap-sm"}>
        End
        </div>
-        <LimitedConnectionCountHandle
-          node_id={props.id}
-          type="target"
-          position={Position.Left}
-          connection_count={1}
-          id="target"
-        />
+        <SingleConnectionHandle type="target" position={Position.Left} id="target" rules={[
+          allowOnlyConnectionsFromType(["phase"])
+        ]}/>
      </div>
    </>
  );
--- a/src/pages/VisProgPage/visualProgrammingUI/nodes/GoalNode.default.ts
+++ b/src/pages/VisProgPage/visualProgrammingUI/nodes/GoalNode.default.ts
@@ -5,8 +5,10 @@ import type { GoalNodeData } from "./GoalNode";
 */
 export const GoalNodeDefaults: GoalNodeData = {
  label: "Goal Node",
+  name: "",
  droppable: true,
-  description: "The robot will strive towards this goal",
+  description: "",
  achieved: false,
  hasReduce: true,
+  can_fail: false,
 };
--- a/src/pages/VisProgPage/visualProgrammingUI/nodes/GoalNode.tsx
+++ b/src/pages/VisProgPage/visualProgrammingUI/nodes/GoalNode.tsx
@@ -1,5 +1,4 @@
 import {
-  Handle,
  type NodeProps,
  Position,
  type Node,
@@ -7,21 +6,31 @@ import {
 import { Toolbar } from '../components/NodeComponents';
 import styles from '../../VisProg.module.css';
 import { TextField } from '../../../../components/TextField';
+import {MultiConnectionHandle} from "../components/RuleBasedHandle.tsx";
+import {allowOnlyConnectionsFromHandle} from "../HandleRules.ts";
 import useFlowStore from '../VisProgStores';
+import { DoesPlanIterate, PlanReduce, type Plan } from '../components/Plan';
+import PlanEditorDialog from '../components/PlanEditor';
+import { MultilineTextField } from '../../../../components/MultilineTextField';

 /**
 * The default data dot a phase node
 * @param label: the label of this phase
 * @param droppable: whether this node is droppable from the drop bar (initialized as true)
- * @param desciption: description of the goal
+ * @param desciption: description of the goal - this will be checked for completion
 * @param hasReduce: whether this node has reducing functionality (true by default)
+ * @param can_fail: whether this plan should be checked- this plan could possible fail
+ * @param plan: The (possible) attached plan to this goal
 */
 export type GoalNodeData = {
  label: string;
+  name: string;
  description: string;
  droppable: boolean;
  achieved: boolean;
  hasReduce: boolean;
+  can_fail: boolean;
+  plan?: Plan;
 };

 export type GoalNode = Node<GoalNodeData>
@@ -37,13 +46,18 @@ export default function GoalNode({id, data}: NodeProps<GoalNode>) {

  const text_input_id = `goal_${id}_text_input`;
  const checkbox_id = `goal_${id}_checkbox`;
+  const planIterate = DoesPlanIterate(data.plan);

  const setDescription = (value: string) => {
    updateNodeData(id, {...data, description: value});
  }

-  const setAchieved = (value: boolean) => {
-    updateNodeData(id, {...data, achieved: value});
+  const setName= (value: string) => {
+    updateNodeData(id, {...data, name: value})
+  }
+
+  const setFailable = (value: boolean) => {
+    updateNodeData(id, {...data, can_fail: value});
  }

  return <>
@@ -53,21 +67,54 @@ export default function GoalNode({id, data}: NodeProps<GoalNode>) {
        <label htmlFor={text_input_id}>Goal:</label>
        <TextField
          id={text_input_id}
-          value={data.description}
-          setValue={(val) => setDescription(val)}
+          value={data.name}
+          setValue={(val) => setName(val)}
          placeholder={"To ..."}
        />
      </div>
-      <div className={"flex-row gap-md align-center"}>
-        <label htmlFor={checkbox_id}>Achieved:</label>
+      
+      {data.can_fail && (<div>
+        <label htmlFor={text_input_id}>Description/ Condition of goal:</label>
+        <div className={"flex-wrap"}>
+          <MultilineTextField
+            id={text_input_id}
+            value={data.description}
+            setValue={setDescription}
+            placeholder={"Describe the condition of this goal..."}
+          />
+        </div>
+      </div>)}
+      <div>
+        <label> {!data.plan ? "No plan set to execute while goal is not reached. 🔴" : "Will follow plan '" + data.plan.name + "' until all steps complete. 🟢"} </label>
+      </div>
+      {data.plan && (<div className={"flex-row gap-md align-center " + (planIterate ? "" : styles.planNoIterate)}>
+        {planIterate ? "" : <s></s>}
+        <label htmlFor={checkbox_id}>{!planIterate ? "This plan always succeeds!" : "Check if this plan fails"}:</label>
        <input
          id={checkbox_id}
          type={"checkbox"}
-          checked={data.achieved || false}
-          onChange={(e) => setAchieved(e.target.checked)}
+          disabled={!planIterate}
+          checked={!planIterate || data.can_fail}
+          onChange={(e) => planIterate ? setFailable(e.target.checked) : setFailable(false)}
        />
      </div>
-      <Handle type="source" position={Position.Right} id="GoalSource"/>
+)}
+
+      <div>
+        <PlanEditorDialog
+                  plan={data.plan}
+                  onSave={(plan) => {
+                    updateNodeData(id, {
+                      ...data,
+                      plan,
+                    });
+                  }} 
+                  description={data.name}
+        />
+      </div>
+      <MultiConnectionHandle type="source" position={Position.Right} id="GoalSource" rules={[
+        allowOnlyConnectionsFromHandle([{nodeType:"phase",handleId:"data"}]),
+      ]}/>
    </div>
  </>;
 }
@@ -80,11 +127,12 @@ export default function GoalNode({id, data}: NodeProps<GoalNode>) {
 */
 export function GoalReduce(node: Node, _nodes: Node[]) {
  const data = node.data as GoalNodeData;
-    return {
+    return {  
      id: node.id,
-      label: data.label,
+      name: data.name,
      description: data.description,
-      achieved: data.achieved,
+      can_fail: data.can_fail,  
+      plan: data.plan ? PlanReduce(data.plan) : "",
    }
 }

--- a/src/pages/VisProgPage/visualProgrammingUI/nodes/NormNode.default.ts
+++ b/src/pages/VisProgPage/visualProgrammingUI/nodes/NormNode.default.ts
@@ -6,7 +6,7 @@ import type { NormNodeData } from "./NormNode";
 export const NormNodeDefaults: NormNodeData = {
  label: "Norm Node",
  droppable: true,
-  conditions: [],
+  condition: undefined,
  norm: "",
  hasReduce: true,
  critical: false,
--- a/src/pages/VisProgPage/visualProgrammingUI/nodes/NormNode.tsx
+++ b/src/pages/VisProgPage/visualProgrammingUI/nodes/NormNode.tsx
@@ -1,5 +1,4 @@
 import {
-  Handle,
  type NodeProps,
  Position,
  type Node,
@@ -7,6 +6,8 @@ import {
 import { Toolbar } from '../components/NodeComponents';
 import styles from '../../VisProg.module.css';
 import { TextField } from '../../../../components/TextField';
+import {MultiConnectionHandle, SingleConnectionHandle} from "../components/RuleBasedHandle.tsx";
+import {allowOnlyConnectionsFromHandle, allowOnlyConnectionsFromType} from "../HandleRules.ts";
 import useFlowStore from '../VisProgStores';
 import { BasicBeliefReduce } from './BasicBeliefNode';

@@ -20,7 +21,7 @@ import { BasicBeliefReduce } from './BasicBeliefNode';
 export type NormNodeData = {
  label: string;
  droppable: boolean;
-  conditions: string[]; // List of (basic) belief nodes' ids.
+  condition?: string; // id of this node's belief.
  norm: string;
  hasReduce: boolean;
  critical: boolean;
@@ -70,13 +71,18 @@ export default function NormNode(props: NodeProps<NormNode>) {
        />
      </div>

-      {data.conditions.length > 0 && (<div className={"flex-row gap-md align-center"} data-testid="norm-condition-information">
-        <label htmlFor={checkbox_id}>{data.conditions.length} condition{data.conditions.length > 1 ? "s" : ""}/ belief{data.conditions.length > 1 ? "s" : ""} attached.</label>
+
+      {data.condition && (<div className={"flex-row gap-md align-center"} data-testid="norm-condition-information">
+        <label htmlFor={checkbox_id}>Condition/ Belief attached.</label>
      </div>)}

-  
-      <Handle type="source" position={Position.Right} id="norms"/>
-      <Handle type="target" position={Position.Bottom} id="norms"/>
+
+      <MultiConnectionHandle type="source" position={Position.Right} id="norms" rules={[
+        allowOnlyConnectionsFromHandle([{nodeType:"phase",handleId:"data"}])
+      ]}/>
+      <SingleConnectionHandle type="target" position={Position.Bottom} id="beliefs" rules={[
+        allowOnlyConnectionsFromType(["basic_belief"])
+      ]}/>
    </div>
  </>;
 };
@@ -85,17 +91,12 @@ export default function NormNode(props: NodeProps<NormNode>) {
 /**
 * Reduces each Norm, including its children down into its relevant data.
 * @param node The Node Properties of this node.
- * @param _nodes all the nodes in the graph
+ * @param nodes all the nodes in the graph
 */
 export function NormReduce(node: Node, nodes: Node[]) {
  const data = node.data as NormNodeData;

  // conditions nodes - make sure to check for empty arrays
-  let conditionNodes: Node[] = [];
-  if (data.conditions) 
-    conditionNodes = nodes.filter((node) => data.conditions.includes(node.id));
-
-   // Build the result object
  const result: Record<string, unknown> = {
    id: node.id,
    label: data.label,
@@ -103,12 +104,13 @@ export function NormReduce(node: Node, nodes: Node[]) {
    critical: data.critical,
  };

-  // Go over our conditionNodes. They should either be Basic (OR TODO: Inferred)
-  const reducer = BasicBeliefReduce;
-  result["basic_beliefs"] = conditionNodes.map((condition) => reducer(condition, nodes))
-
-  // When the Inferred is being implemented, you should follow the same kind of structure that PhaseNode has,
-  // dividing the conditions into basic and inferred, then calling the correct reducer on them.
+  if (data.condition) {
+    const reducer = BasicBeliefReduce; // TODO: also add inferred.
+    const conditionNode = nodes.find((node) => node.id === data.condition);
+    // In case something went wrong, and our condition doesn't actually exist;
+    if (conditionNode == undefined) return result;
+    result["condition"] = reducer(conditionNode, nodes)
+  }
  return result
 }

@@ -119,9 +121,9 @@ export function NormReduce(node: Node, nodes: Node[]) {
 */
 export function NormConnectionTarget(_thisNode: Node, _sourceNodeId: string) {
  const data = _thisNode.data as NormNodeData;
-  // If we got a belief connected, this is a condition for the norm.
+  // If we got a belief connected, this is the condition for the norm.
  if ((useFlowStore.getState().nodes.find((node) => node.id === _sourceNodeId && node.type === 'basic_belief' /* TODO: Add the option for an inferred belief */))) {
-      data.conditions.push(_sourceNodeId);
+      data.condition = _sourceNodeId;
    }
 }

@@ -141,10 +143,8 @@ export function NormConnectionSource(_thisNode: Node, _targetNodeId: string) {
 */
 export function NormDisconnectionTarget(_thisNode: Node, _sourceNodeId: string) {
  const data = _thisNode.data as NormNodeData;
-  // If we got a belief connected, this is a condition for the norm.
-  if ((useFlowStore.getState().nodes.find((node) => node.id === _sourceNodeId && node.type === 'basic_belief' /* TODO: Add the option for an inferred belief */))) {
-    data.conditions = data.conditions.filter(id => id != _sourceNodeId);
-    }
+  // remove if the target of disconnection was our condition
+  if (_sourceNodeId == data.condition) data.condition = undefined
 }

 /**
--- a/src/pages/VisProgPage/visualProgrammingUI/nodes/PhaseNode.tsx
+++ b/src/pages/VisProgPage/visualProgrammingUI/nodes/PhaseNode.tsx
@@ -1,15 +1,15 @@
 import {
-  Handle,
  type NodeProps,
  Position,
  type Node
 } from '@xyflow/react';
 import { Toolbar } from '../components/NodeComponents';
 import styles from '../../VisProg.module.css';
+import {SingleConnectionHandle, MultiConnectionHandle} from "../components/RuleBasedHandle.tsx";
+import {allowOnlyConnectionsFromType, noSelfConnections} from "../HandleRules.ts";
 import { NodeReduces, NodesInPhase, NodeTypes} from '../NodeRegistry';
 import useFlowStore from '../VisProgStores';
 import { TextField } from '../../../../components/TextField';
-import LimitedConnectionCountHandle from "../components/CustomNodeHandles.tsx";

 /**
 * The default data dot a phase node
@@ -54,21 +54,17 @@ export default function PhaseNode(props: NodeProps<PhaseNode>) {
            placeholder={"Phase ..."}
          />
        </div>
-        <LimitedConnectionCountHandle
-          node_id={props.id}
-          type="target"
-          position={Position.Left}
-          connection_count={1}
-          id="target"
-        />
-        <Handle type="target" position={Position.Bottom} id="norms"/>
-        <LimitedConnectionCountHandle
-          node_id={props.id}
-          type="source"
-          position={Position.Right}
-          connection_count={1}
-          id="source"
-        />
+        <SingleConnectionHandle type="target" position={Position.Left} id="target" rules={[
+          noSelfConnections,
+          allowOnlyConnectionsFromType(["phase", "start"]),
+        ]}/>
+        <MultiConnectionHandle type="target" position={Position.Bottom} id="data" rules={[
+          allowOnlyConnectionsFromType(["norm", "goal", "trigger"])
+        ]}/>
+        <SingleConnectionHandle type="source" position={Position.Right} id="source" rules={[
+          noSelfConnections,
+          allowOnlyConnectionsFromType(["phase", "end"]),
+        ]}/>
      </div>
    </>
  );
@@ -101,8 +97,8 @@ export function PhaseReduce(node: Node, nodes: Node[]) {

    // Build the result object
    const result: Record<string, unknown> = {
-      id: thisNode.id,
-      label: data.label,
+        id: thisNode.id,
+        name: data.label,
    };

    nodesInPhase.forEach((type) => {
--- a/src/pages/VisProgPage/visualProgrammingUI/nodes/StartNode.tsx
+++ b/src/pages/VisProgPage/visualProgrammingUI/nodes/StartNode.tsx
@@ -3,9 +3,10 @@ import {
  Position,
  type Node,
 } from '@xyflow/react';
-import LimitedConnectionCountHandle from "../components/CustomNodeHandles.tsx";
 import { Toolbar } from '../components/NodeComponents';
 import styles from '../../VisProg.module.css';
+import {SingleConnectionHandle} from "../components/RuleBasedHandle.tsx";
+import {allowOnlyConnectionsFromHandle} from "../HandleRules.ts";


 export type StartNodeData = {
@@ -31,13 +32,9 @@ export default function StartNode(props: NodeProps<StartNode>) {
        <div className={"flex-row gap-sm"}>
          Start
        </div>
-        <LimitedConnectionCountHandle
-          node_id={props.id}
-          type="source"
-          position={Position.Right}
-          connection_count={1}
-          id="source"
-        />
+        <SingleConnectionHandle type="source" position={Position.Right} id="source" rules={[
+          allowOnlyConnectionsFromHandle([{nodeType:"phase",handleId:"target"}])
+        ]}/>
      </div>
    </>
  );
--- a/src/pages/VisProgPage/visualProgrammingUI/nodes/TriggerNode.default.ts
+++ b/src/pages/VisProgPage/visualProgrammingUI/nodes/TriggerNode.default.ts
@@ -6,7 +6,5 @@ import type { TriggerNodeData } from "./TriggerNode";
 export const TriggerNodeDefaults: TriggerNodeData = {
  label: "Trigger Node",
  droppable: true,
-  triggers: [],
-  triggerType: "keywords",
  hasReduce: true,
 };
--- a/src/pages/VisProgPage/visualProgrammingUI/nodes/TriggerNode.tsx
+++ b/src/pages/VisProgPage/visualProgrammingUI/nodes/TriggerNode.tsx
@@ -1,5 +1,4 @@
 import {
-  Handle,
  type NodeProps,
  Position,
  type Connection,
@@ -8,10 +7,12 @@ import {
 } from '@xyflow/react';
 import { Toolbar } from '../components/NodeComponents';
 import styles from '../../VisProg.module.css';
+import {MultiConnectionHandle, SingleConnectionHandle} from "../components/RuleBasedHandle.tsx";
+import {allowOnlyConnectionsFromHandle, allowOnlyConnectionsFromType} from "../HandleRules.ts";
 import useFlowStore from '../VisProgStores';
-import { useState } from 'react';
-import { RealtimeTextField, TextField } from '../../../../components/TextField';
-import duplicateIndices from '../../../../utils/duplicateIndices';
+import { PlanReduce, type Plan } from '../components/Plan';
+import PlanEditorDialog from '../components/PlanEditor';  
+import { BasicBeliefReduce } from './BasicBeliefNode';

 /**
 * The default data structure for a Trigger node
@@ -21,15 +22,13 @@ import duplicateIndices from '../../../../utils/duplicateIndices';
 *
 * @property label: the display label of this Trigger node.
 * @property droppable: Whether this node can be dropped from the toolbar (default: true).
- * @property triggerType - The type of trigger ("keywords" or a custom string).
- * @property triggers - The list of keyword triggers (if applicable).
 * @property hasReduce - Whether this node supports reduction logic.
 */
 export type TriggerNodeData = {
  label: string;
  droppable: boolean;
-  triggerType: "keywords" | string;
-  triggers: Keyword[] | never;
+  condition?: string; // id of the belief
+  plan?: Plan;
  hasReduce: boolean;
 };

@@ -42,6 +41,7 @@ export type TriggerNode = Node<TriggerNodeData>
 *
 * @param connection - The connection or edge being attempted to connect towards.
 * @returns `true` if the connection is defined; otherwise, `false`.
+ * 
 */
 export function TriggerNodeCanConnect(connection: Connection | Edge): boolean {
  return (connection != undefined);
@@ -55,24 +55,30 @@ export function TriggerNodeCanConnect(connection: Connection | Edge): boolean {
 export default function TriggerNode(props: NodeProps<TriggerNode>) {
  const data = props.data;
  const {updateNodeData} = useFlowStore();
-
-  const setKeywords = (keywords: Keyword[]) => {
-    updateNodeData(props.id, {...data, triggers: keywords});
-  }
-
+  
  return <>
    <Toolbar nodeId={props.id} allowDelete={true}/>
    <div className={`${styles.defaultNode} ${styles.nodeTrigger} flex-col gap-sm`}>
-      {data.triggerType === "emotion" && (
-        <div className={"flex-row gap-md"}>Emotion?</div>
-      )}
-      {data.triggerType === "keywords" && (
-        <Keywords
-          keywords={data.triggers}
-          setKeywords={setKeywords}
-        />
-      )}
-      <Handle type="source" position={Position.Right} id="TriggerSource"/>
+      <div className={"flex-row gap-md"}>Triggers when the condition is met.</div>
+      <div className={"flex-row gap-md"}>Condition/ Belief is currently {data.condition ? "" : "not"} set. {data.condition ? "🟢" : "🔴"}</div>
+      <div className={"flex-row gap-md"}>Plan{data.plan ? (": " + data.plan.name) : ""} is currently {data.plan ? "" : "not"} set. {data.plan ? "🟢" : "🔴"}</div>
+      <MultiConnectionHandle type="source" position={Position.Right} id="TriggerSource" rules={[
+        allowOnlyConnectionsFromHandle([{nodeType:"phase",handleId:"data"}]),
+      ]}/>
+      <SingleConnectionHandle type="target" position={Position.Bottom} id="beliefs" rules={[
+              allowOnlyConnectionsFromType(["basic_belief"])
+      ]}/>
+      
+
+      <PlanEditorDialog
+          plan={data.plan}
+          onSave={(plan) => {
+            updateNodeData(props.id, {
+              ...data,
+              plan,
+            });
+          }}
+      />
    </div>
  </>;
 }
@@ -83,22 +89,16 @@ export default function TriggerNode(props: NodeProps<TriggerNode>) {
 * @param _nodes - The list of all nodes in the current flow graph.
 * @returns A simplified object containing the node label and its list of triggers.
 */
-export function TriggerReduce(node: Node, _nodes: Node[]) {
-  const data = node.data;
-  switch (data.triggerType) {
-    case "keywords":
-      return {
-        id: node.id,
-        type: "keywords",
-        label: data.label,
-        keywords: data.triggers,
-      };
-    default:
-      return {
-        ...data,
-        id: node.id,
-      };
+export function TriggerReduce(node: Node, nodes: Node[]) {
+  const data = node.data as TriggerNodeData;
+  const conditionNode = data.condition ? nodes.find((n)=>n.id===data.condition) : undefined
+  const conditionData = conditionNode ? BasicBeliefReduce(conditionNode, nodes) : ""
+  return {
+    id: node.id,
+    condition: conditionData, // Make sure we have a condition before reducing, or default to ""
+    plan: !data.plan ? "" : PlanReduce(data.plan), // Make sure we have a plan when reducing, or default to ""
  }
+  
 }

 /**
@@ -108,6 +108,11 @@ export function TriggerReduce(node: Node, _nodes: Node[]) {
 */
 export function TriggerConnectionTarget(_thisNode: Node, _sourceNodeId: string) {
  // no additional connection logic exists yet
+  const data = _thisNode.data as TriggerNodeData;
+  // If we got a belief connected, this is the condition for the norm.
+  if ((useFlowStore.getState().nodes.find((node) => node.id === _sourceNodeId && node.type === 'basic_belief' /* TODO: Add the option for an inferred belief */))) {
+      data.condition = _sourceNodeId;
+    }
 }

 /**
@@ -126,6 +131,9 @@ export function TriggerConnectionSource(_thisNode: Node, _targetNodeId: string)
 */
 export function TriggerDisconnectionTarget(_thisNode: Node, _sourceNodeId: string) {
  // no additional connection logic exists yet
+  const data = _thisNode.data as TriggerNodeData;
+    // remove if the target of disconnection was our condition
+    if (_sourceNodeId == data.condition) data.condition = undefined
 }

 /**
@@ -155,92 +163,4 @@ export type KeywordTriggerNodeProps = {
 }

 /** Union type for all possible Trigger node configurations. */
-export type TriggerNodeProps = EmotionTriggerNodeProps | KeywordTriggerNodeProps;
-
-/**
- * Renders an input element that allows users to add new keyword triggers.
- *
- * When the input is committed, the `addKeyword` callback is called with the new keyword.
- *
- * @param param0 - An object containing the `addKeyword` function.
- * @returns A React element(React.JSX.Element) providing an input for adding keywords.
- */
-function KeywordAdder({ addKeyword }: { addKeyword: (keyword: string) => void }) {
-  const [input, setInput] = useState("");
-
-  const text_input_id = "keyword_adder_input";
-
-  return <div className={"flex-row gap-md"}>
-    <label htmlFor={text_input_id}>New Keyword:</label>
-    <RealtimeTextField
-      id={text_input_id}
-      value={input}
-      setValue={setInput}
-      onCommit={() => {
-        if (!input) return;
-        addKeyword(input);
-        setInput("");
-      }}
-      placeholder={"..."}
-      className={"flex-1"}
-    />
-  </div>;
-}
-
-/**
- * Displays and manages a list of keyword triggers for a Trigger node.
- * Handles adding, editing, and removing keywords, as well as detecting duplicate entries.
- *
- * @param keywords - The current list of keyword triggers.
- * @param setKeywords - A callback to update the keyword list in the parent node.
- * @returns A React element(React.JSX.Element) for editing keyword triggers.
- */
-function Keywords({
-  keywords,
-  setKeywords,
-}: {
-  keywords: Keyword[];
-  setKeywords: (keywords: Keyword[]) => void;
-}) {
-  type Interpolatable = string | number | boolean | bigint | null | undefined;
-
-  const inputElementId = (id: Interpolatable) => `keyword_${id}_input`;
-
-  /** Indices of duplicates in the keyword array. */
-  const [duplicates, setDuplicates] = useState<number[]>([]);
-
-  function replace(id: string, value: string) {
-    value = value.trim();
-    const newKeywords = value === ""
-      ? keywords.filter((kw) => kw.id != id)
-      : keywords.map((kw) => kw.id === id ? {...kw, keyword: value} : kw);
-    setKeywords(newKeywords);
-    setDuplicates(duplicateIndices(newKeywords.map((kw) => kw.keyword)));
-  }
-
-  function add(value: string) {
-    value = value.trim();
-    if (value === "") return;
-    const newKeywords = [...keywords, {id: crypto.randomUUID(), keyword: value}];
-    setKeywords(newKeywords);
-    setDuplicates(duplicateIndices(newKeywords.map((kw) => kw.keyword)));
-  }
-
-  return <>
-    <span>Triggers when {keywords.length <= 1 ? "the keyword is" : "all keywords are"} spoken.</span>
-    {[...keywords].map(({id, keyword}, index) => {
-      return <div key={id} className={"flex-row gap-md"}>
-        <label htmlFor={inputElementId(id)}>Keyword:</label>
-        <TextField
-          id={inputElementId(id)}
-          value={keyword}
-          setValue={(val) => replace(id, val)}
-          placeholder={"..."}
-          className={"flex-1"}
-          invalid={duplicates.includes(index)}
-        />
-      </div>;
-    })}
-    <KeywordAdder addKeyword={add} />
-  </>;
-}
+export type TriggerNodeProps = EmotionTriggerNodeProps | KeywordTriggerNodeProps;