feat: add robot connection

ref: N25B-400

src/components/Logging/Filters.tsx

@@ -15,6 +15,7 @@ type Setter<T> = (value: T | ((prev: T) => T)) => void;
  */
 const optionMapping = new Map([
   ["ALL", 0],
+  ["LLM", 9],
   ["DEBUG", 10],
   ["INFO", 20],
   ["WARNING", 30],

src/components/Logging/useLogs.ts

@@ -19,7 +19,7 @@ import {cell, type Cell} from "../../utils/cellStore.ts";
 export type LogRecord = {
   name: string;
   message: string;
-  levelname: 'DEBUG' | 'INFO' | 'WARNING' | 'ERROR' | 'CRITICAL' | string;
+  levelname: 'LLM' | 'DEBUG' | 'INFO' | 'WARNING' | 'ERROR' | 'CRITICAL' | string;
   levelno: number;
   created: number;
   relativeCreated: number;

src/components/TextField.tsx

@@ -105,8 +105,9 @@ export function TextField({
 }) {
   const [inputValue, setInputValue] = useState(value);
 
-  // Re-render when the value gets updated externally
-  useEffect(() => setInputValue(value), [setInputValue, value]);
+  useEffect(() => {
+    setInputValue(value);
+  }, [value]);
 
   const onCommit = () => setValue(inputValue);
 

src/pages/MonitoringPage/Components.tsx

@@ -0,0 +1,204 @@
+import React, { useEffect, useState } from 'react';
+import styles from './MonitoringPage.module.css';
+
+/**
+ * HELPER: Unified sender function
+ * In a real app, you might move this to a /services or /hooks folder
+ */
+const sendUserInterrupt = async (type: string, context: string) => {
+  try {
+    const response = await fetch("http://localhost:8000/button_pressed", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ type, context }),
+    });
+    if (!response.ok) throw new Error("Backend response error");
+    console.log(`Interrupt Sent - Type: ${type}, Context: ${context}`);
+  } catch (err) {
+    console.error(`Failed to send interrupt:`, err);
+  }
+};
+
+// --- GESTURE COMPONENT ---
+export const GestureControls: React.FC = () => {
+  const [selectedGesture, setSelectedGesture] = useState("animations/Stand/BodyTalk/Speaking/BodyTalk_1");
+
+  const gestures = [
+    { label: "Body Talk 1", value: "animations/Stand/BodyTalk/Speaking/BodyTalk_1" },
+    { label: "Thinking 8", value: "animations/Stand/Gestures/Thinking_8" },
+    { label: "Thinking 1", value: "animations/Stand/Gestures/Thinking_1" },
+    { label: "Happy", value: "animations/Stand/Emotions/Positive/Happy_1" },
+  ];
+
+  return (
+    <div className={styles.gestures}>
+      <h4>Gestures</h4>
+      <div className={styles.gestureInputGroup}>
+        <select 
+          value={selectedGesture} 
+          onChange={(e) => setSelectedGesture(e.target.value)}
+        >
+          {gestures.map(g => <option key={g.value} value={g.value}>{g.label}</option>)}
+        </select>
+        <button onClick={() => sendUserInterrupt("gesture", selectedGesture)}>
+          Actuate
+        </button>
+      </div>
+    </div>
+  );
+};
+
+// --- PRESET SPEECH COMPONENT ---
+export const SpeechPresets: React.FC = () => {
+  const phrases = [
+    { label: "Hello, I'm Pepper", text: "Hello, I'm Pepper" },
+    { label: "Repeat please", text: "Could you repeat that please" },
+    { label: "About yourself", text: "Tell me something about yourself" },
+  ];
+
+  return (
+    <div className={styles.speech}>
+      <h4>Speech Presets</h4>
+      <ul>
+        {phrases.map((phrase, i) => (
+          <li key={i}>
+            <button 
+              className={styles.speechBtn} 
+              onClick={() => sendUserInterrupt("speech", phrase.text)}
+            >
+              "{phrase.label}"
+            </button>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+// --- DIRECT SPEECH (INPUT) COMPONENT ---
+export const DirectSpeechInput: React.FC = () => {
+  const [text, setText] = useState("");
+
+  const handleSend = () => {
+    if (!text.trim()) return;
+    sendUserInterrupt("speech", text);
+    setText(""); // Clear after sending
+  };
+
+  return (
+    <div className={styles.directSpeech}>
+      <h4>Direct Pepper Speech</h4>
+      <div className={styles.speechInput}>
+        <input 
+          type="text" 
+          value={text}
+          onChange={(e) => setText(e.target.value)}
+          placeholder="Type message..." 
+          onKeyDown={(e) => e.key === 'Enter' && handleSend()}
+        />
+        <button onClick={handleSend}>Send</button>
+      </div>
+    </div>
+  );
+};
+
+// --- interface for goals/triggers/norms/conditional norms ---
+type StatusItem = {
+  id?: string | number;
+  achieved?: boolean;
+  description?: string;
+  label?: string;
+  norm?: string;
+};
+
+interface StatusListProps {
+  title: string;
+  items: StatusItem[];
+  type: 'goal' | 'trigger' | 'norm'| 'cond_norm';
+}
+
+// --- 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;
+
+            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>
+                )}
+
+                <span className={styles.itemDescription}>
+                  {item.description || item.label || item.norm}
+                </span>
+              </li>
+            );
+          })
+        ) : (
+          <p className={styles.emptyText}>No {title.toLowerCase()} defined.</p>
+        )}
+      </ul>
+    </section>
+  );
+};
+
+
+// --- Robot Connected --- 
+export const RobotConnected = () => {
+
+  /**
+     * The current connection state:
+     * - `true`: Robot is connected.
+     * - `false`: Robot is not connected.
+     * - `null`: Connection status is unknown (initial check in progress).
+     */
+    const [connected, setConnected] = useState<boolean | null>(null);
+  
+    useEffect(() => {
+      // Open a Server-Sent Events (SSE) connection to receive live ping updates.
+      // We're expecting a stream of data like that looks like this: `data = False` or `data = True`
+      const eventSource = new EventSource("http://localhost:8000/robot/ping_stream");
+      eventSource.onmessage = (event) => {
+      
+        // Expecting messages in JSON format: `true` or `false`
+        console.log("received message:", event.data);
+        try {
+          const data = JSON.parse(event.data);
+  
+          try {
+            setConnected(data)
+          }
+          catch {
+            console.log("couldnt extract connected from incoming ping data")
+          }
+  
+        } catch {
+          console.log("Ping message not in correct format:", event.data);
+        }
+      };
+  
+      // Clean up the SSE connection when the component unmounts.
+      return () => eventSource.close();
+    }, []);
+
+  return  (
+  <div>
+    <h3>Connection:</h3>
+    <p className={connected ? styles.connected : styles.disconnected }>{connected ? "● Robot is connected" : "● Robot is disconnected"}</p>
+  </div>
+  )
+}

src/pages/MonitoringPage/MonitoringPage.module.css

@@ -0,0 +1,184 @@
+.dashboardContainer {
+  display: grid;
+  grid-template-columns: 2fr 1fr; /* Left = content, Right = logs */
+  grid-template-rows: auto 1fr auto; /* Header, Main, Footer */
+  grid-template-areas:
+    "header logs"
+    "main logs"
+    "footer footer";
+  gap: 1rem;
+  padding: 1rem;
+  background-color: #f5f5f5;
+  font-family: Arial, sans-serif;
+}
+
+/* HEADER */
+.experimentOverview {
+  grid-area: header;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  background: #fff;
+  padding: 1rem;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+  position: static; /* ensures it scrolls away */
+}
+
+.phaseProgress {
+  margin-top: 0.5rem;
+}
+
+.phase {
+  display: inline-block;
+  width: 25px;
+  height: 25px;
+  margin: 0 3px;
+  text-align: center;
+  line-height: 25px;
+  background: #ccc;
+}
+
+.completed {
+  background-color: #5cb85c;
+  color: white;
+}
+
+.current {
+  background-color: #f0ad4e;
+  color: white;
+}
+
+.connected {
+  color: green;
+  font-weight: bold;
+}
+
+.disconnected {
+  color: red;
+  font-weight: bold;
+}
+
+.pausePlayInactive{
+  background-color: gray;
+}
+
+.pausePlayActive{
+  background-color: green;
+}
+
+.next {
+  background-color: lightgray;
+}
+
+.restartPhase{
+  background-color: rgb(255, 123, 0);
+}
+
+.restartExperiment{
+  background-color: red;
+}
+
+/* MAIN GRID */
+.phaseOverview {
+  grid-area: main;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: repeat(2, auto);
+  gap: 1rem;
+  background: #fff;
+  padding: 1rem;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+}
+
+.phaseBox {
+  background: #f9f9f9;
+  border: 1px solid #ddd;
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.05);
+}
+
+.phaseOverviewText {
+  grid-column: 1 / -1; /* make the title span across both columns */
+  font-size: 1.4rem;
+  font-weight: 600;
+  margin: 0;            /* remove default section margin */
+  padding: 0.25rem 0;   /* smaller internal space */
+}
+
+.phaseOverviewText h3{
+  margin: 0;            /* removes top/bottom whitespace */
+  padding: 0;           /* keeps spacing tight */
+}
+
+.phaseBox h3 {
+  margin-top: 0;
+  border-bottom: 1px solid #ddd;
+  padding-bottom: 0.4rem;
+}
+
+.checked::before {
+  content: '✔️ ';
+}
+
+/* LOGS */
+.logs {
+  grid-area: logs;
+  background: #fff;
+  padding: 1rem;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+}
+
+.logs textarea {
+  width: 100%;
+  height: 200px;
+  margin-top: 0.5rem;
+}
+
+/* FOOTER */
+.controlsSection {
+  grid-area: footer;
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  background: #fff;
+  padding: 1rem;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+}
+
+.gestures,
+.speech,
+.directSpeech {
+  flex: 1;
+}
+
+.speechInput {
+  display: flex;
+  margin-top: 0.5rem;
+}
+
+.speechInput input {
+  flex: 1;
+  padding: 0.5rem;
+  border: 1px solid #ccc;
+}
+
+.speechInput button {
+  background: #007bff;
+  color: white;
+  border: none;
+  padding: 0.5rem 1rem;
+  cursor: pointer;
+}
+
+/* RESPONSIVE */
+@media (max-width: 900px) {
+  .phaseOverview {
+    grid-template-columns: 1fr;
+  }
+
+  .controlsSection {
+    flex-direction: column;
+  }
+}

src/pages/MonitoringPage/MonitoringPage.tsx

@@ -0,0 +1,176 @@
+import React from 'react';
+import styles from './MonitoringPage.module.css';
+import useProgramStore from "../../utils/programStore.ts";
+import { GestureControls, SpeechPresets, DirectSpeechInput, StatusList, RobotConnected } from './Components';
+import { nextPhase, pauseExperiment, playExperiment, resetExperiment, resetPhase } 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 };
+
+
+const MonitoringPage: React.FC = () => {
+  const getPhaseIds = useProgramStore((s) => s.getPhaseIds);
+  const getNormsInPhase = useProgramStore((s) => s.getNormsInPhase);
+  const getGoalsInPhase = useProgramStore((s) => s.getGoalsInPhase);
+  const getTriggersInPhase = useProgramStore((s) => s.getTriggersInPhase);
+
+  // Can be used to block actions until feedback from CB.
+  const [loading, setLoading] = React.useState(false);
+  const [isPlaying, setIsPlaying] = React.useState(false);
+
+  const phaseIds = getPhaseIds();
+  const [phaseIndex, _] = React.useState(0);
+
+  if (phaseIds.length === 0) {
+    return <p className={styles.empty}>No program loaded.</p>;
+  }
+
+  const phaseId = phaseIds[phaseIndex];
+
+  const goals = getGoalsInPhase(phaseId) as Goal[];
+  const triggers = getTriggersInPhase(phaseId) as Trigger[];
+  const norms = getNormsInPhase(phaseId) as Norm[];
+
+  // Handle logic of 'next' button.
+
+  const handleButton = async (button: string, _context?: string, _endpoint?: string) => {
+    try {
+      setLoading(true);
+      switch (button)  {
+        case "pause":
+          await pauseExperiment();
+          break;
+        case "play":
+          await playExperiment();
+          break;
+        case "nextPhase":
+          await nextPhase();
+          break;
+        case "resetPhase":
+          await resetPhase();
+          break;
+        case "resetExperiment":
+          await resetExperiment();
+          break;
+        default:
+      }
+    } catch (err) {
+      console.error(err);
+    } finally {
+      setLoading(false);
+    }
+  }
+  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>
+          <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>
+          </div>
+        </div>
+
+        <div className={styles.experimentControls}>
+          <h3>Experiment Controls</h3>
+          <div className={styles.controlsButtons}>
+            {/*Pause button*/}
+            <button 
+            className={`${!isPlaying ? styles.pausePlayActive : styles.pausePlayInactive}`}
+            onClick={() => {
+              setIsPlaying(false);
+              handleButton("pause");}
+            }
+            disabled={loading}
+            >❚❚</button>
+
+            {/*Play button*/}
+            <button 
+            className={`${isPlaying ? styles.pausePlayActive : styles.pausePlayInactive}`}
+            onClick={() => {
+              setIsPlaying(true);
+              handleButton("play");}
+            }
+            disabled={loading}
+            >▶</button>
+
+            {/*Next button*/}
+            <button
+              className={styles.next}
+              onClick={() => handleButton("nextPhase")}
+              disabled={loading}
+            >
+              ⏭
+            </button>
+
+            {/*Restart Phase button*/}
+            <button 
+              className={styles.restartPhase}
+              onClick={() => handleButton("resetPhase")}
+              disabled={loading}
+            >
+              ↩
+            </button>
+
+            {/*Restart Experiment button*/}
+            <button 
+              className={styles.restartExperiment}
+              onClick={() => handleButton("resetExperiment")}
+              disabled={loading}
+              >
+                ⟲
+              </button>
+          </div>  
+        </div>
+
+        <div className={styles.connectionStatus}>
+          {RobotConnected()}
+        </div>
+      </header>
+
+      {/* MAIN GRID */}
+      
+      <main className={styles.phaseOverview}>
+        <section className={styles.phaseOverviewText}>
+          <h3>Phase Overview</h3>
+        </section>
+
+        <StatusList title="Goals" items={goals} type="goal" />
+        <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" 
+        />
+      </main>
+
+      {/* LOGS */}
+      <aside className={styles.logs}>
+        <h3>Logs</h3>
+        <div className={styles.logHeader}>
+          <span>Global:</span>
+          <button>ALL</button>
+          <button>Add</button>
+          <button className={styles.live}>Live</button>
+        </div>
+        <textarea defaultValue="Example Log: much log"></textarea>
+      </aside>
+
+      {/* FOOTER */}
+      <footer className={styles.controlsSection}>
+        <GestureControls />
+        <SpeechPresets />
+        <DirectSpeechInput />
+      </footer>
+    </div>
+  );
+}
+
+export default MonitoringPage;

src/pages/MonitoringPage/MonitoringPageAPI.ts

@@ -0,0 +1,64 @@
+const API_BASE = "http://localhost:8000/button_pressed"; // Change depending on Pims interup agent/ correct endpoint
+
+
+/**
+ * HELPER: Unified sender function
+ * In a real app, you might move this to a /services or /hooks folder
+ */
+const sendAPICall = async (type: string, context: string, endpoint?: string) => {
+  try {
+    const response = await fetch(`${API_BASE}${endpoint ?? ""}`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ type, context }),
+    });
+    if (!response.ok) throw new Error("Backend response error");
+    console.log(`API Call send - Type: ${type}, Context: ${context} ${endpoint ? `, Endpoint: ${endpoint}` : ""}`);
+  } catch (err) {
+    console.error(`Failed to send api call:`, err);
+  }
+};
+
+
+/**
+ * Sends an API call to the CB for going to the next phase. 
+ * In case we can't go to the next phase, the function will throw an error.
+ */
+export async function nextPhase(): Promise<void> {
+  const type = "next_phase"
+  const context = ""
+  sendAPICall(type, context)
+}
+
+
+/**
+ * Sends an API call to the CB for going to reset the currect phase 
+ * In case we can't go to the next phase, the function will throw an error.
+ */
+export async function resetPhase(): Promise<void> {
+  const type = "reset_phase"
+  const context = ""
+  sendAPICall(type, context)
+}
+
+/**
+ * Sends an API call to the CB for going to reset the experiment
+ * In case we can't go to the next phase, the function will throw an error.
+ */
+export async function resetExperiment(): Promise<void> {
+  const type = "reset_experiment"
+  const context = ""
+  sendAPICall(type, context)
+}
+
+export async function pauseExperiment(): Promise<void> {
+  const type = "pause"
+  const context = "true"
+  sendAPICall(type, context)
+}
+
+export async function playExperiment(): Promise<void> {
+  const type = "pause"
+  const context = "false"
+  sendAPICall(type, context)
+}

src/pages/SimpleProgram/SimpleProgram.module.css

@@ -0,0 +1,167 @@
+/* ---------- Layout ---------- */
+
+.container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background: #1e1e1e;
+  color: #f5f5f5;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: clamp(0.75rem, 2vw, 1.25rem);
+  background: #2a2a2a;
+  border-bottom: 1px solid #3a3a3a;
+}
+
+.header h2 {
+  font-size: clamp(1rem, 2.2vw, 1.4rem);
+  font-weight: 600;
+}
+
+.controls button {
+  margin-left: 0.5rem;
+  padding: 0.4rem 0.9rem;
+  border-radius: 6px;
+  border: none;
+  background: #111;
+  color: white;
+  cursor: pointer;
+}
+
+.controls button:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* ---------- Content ---------- */
+
+.content {
+  flex: 1;
+  padding: 2%;
+}
+
+/* ---------- Grid ---------- */
+
+.phaseGrid {
+  height: 100%;
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  grid-template-rows: repeat(2, minmax(0, 1fr));
+  gap: 2%;
+}
+
+/* ---------- Box ---------- */
+
+.box {
+  display: flex;
+  flex-direction: column;
+  background: #ffffff;
+  color: #1e1e1e;
+  border-radius: 10px;
+  overflow: hidden;
+  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
+}
+
+.boxHeader {
+  padding: 0.6rem 0.9rem;
+  background: linear-gradient(135deg, #dcdcdc, #e9e9e9);
+  font-style: italic;
+  font-weight: 500;
+  font-size: clamp(0.9rem, 1.5vw, 1.05rem);
+  border-bottom: 1px solid #cfcfcf;
+}
+
+.boxContent {
+  flex: 1;
+  padding: 0.8rem 1rem;
+  overflow-y: auto;
+}
+
+/* ---------- Lists ---------- */
+
+.iconList {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.iconList li {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  margin-bottom: 0.5rem;
+  font-size: clamp(0.85rem, 1.3vw, 1rem);
+}
+
+.bulletList {
+  margin: 0;
+  padding-left: 1.2rem;
+}
+
+.bulletList li {
+  margin-bottom: 0.4rem;
+}
+
+/* ---------- Icons ---------- */
+
+.successIcon,
+.failIcon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1.5rem;
+  height: 1.5rem;
+  border-radius: 4px;
+  font-weight: bold;
+  color: white;
+  flex-shrink: 0;
+}
+
+.successIcon {
+  background: #3cb371;
+}
+
+.failIcon {
+  background: #e5533d;
+}
+
+/* ---------- Empty ---------- */
+
+.empty {
+  opacity: 0.55;
+  font-style: italic;
+  font-size: 0.9rem;
+}
+
+/* ---------- Responsive ---------- */
+
+@media (max-width: 900px) {
+  .phaseGrid {
+    grid-template-columns: 1fr;
+    grid-template-rows: repeat(4, minmax(0, 1fr));
+    gap: 1rem;
+  }
+}
+
+.leftControls {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.backButton {
+  background: transparent;
+  border: 1px solid #555;
+  color: #ddd;
+  padding: 0.35rem 0.75rem;
+  border-radius: 6px;
+  cursor: pointer;
+}
+
+.backButton:hover {
+  background: #333;
+}

src/pages/SimpleProgram/SimpleProgram.tsx

@@ -0,0 +1,192 @@
+import React from "react";
+import styles from "./SimpleProgram.module.css";
+import useProgramStore from "../../utils/programStore.ts";
+
+/**
+ * Generic container box with a header and content area.
+ */
+type BoxProps = {
+  title: string;
+  children: React.ReactNode;
+};
+
+const Box: React.FC<BoxProps> = ({ title, children }) => (
+  <div className={styles.box}>
+    <div className={styles.boxHeader}>{title}</div>
+    <div className={styles.boxContent}>{children}</div>
+  </div>
+);
+
+/**
+ * Renders a list of goals for a phase.
+ * Expects goal-like objects from the program store.
+ */
+const GoalList: React.FC<{ goals: unknown[] }> = ({ goals }) => {
+  if (!goals.length) {
+    return <p className={styles.empty}>No goals defined.</p>;
+  }
+
+  return (
+    <ul className={styles.iconList}>
+      {goals.map((g, idx) => {
+        const goal = g as {
+          id?: string;
+          description?: string;
+          achieved?: boolean;
+        };
+
+        return (
+          <li key={goal.id ?? idx}>
+            <span
+              className={
+                goal.achieved ? styles.successIcon : styles.failIcon
+              }
+            >
+              {goal.achieved ? "✔" : "✖"}
+            </span>
+            {goal.description ?? "Unnamed goal"}
+          </li>
+        );
+      })}
+    </ul>
+  );
+};
+
+/**
+ * Renders a list of triggers for a phase.
+ */
+const TriggerList: React.FC<{ triggers: unknown[] }> = ({ triggers }) => {
+  if (!triggers.length) {
+    return <p className={styles.empty}>No triggers defined.</p>;
+  }
+
+  return (
+    <ul className={styles.iconList}>
+      {triggers.map((t, idx) => {
+        const trigger = t as {
+          id?: string;
+          label?: string;
+        };
+
+        return (
+          <li key={trigger.id ?? idx}>
+            <span className={styles.failIcon}>✖</span>
+            {trigger.label ?? "Unnamed trigger"}
+          </li>
+        );
+      })}
+    </ul>
+  );
+};
+
+/**
+ * Renders a list of norms for a phase.
+ */
+const NormList: React.FC<{ norms: unknown[] }> = ({ norms }) => {
+  if (!norms.length) {
+    return <p className={styles.empty}>No norms defined.</p>;
+  }
+
+  return (
+    <ul className={styles.bulletList}>
+      {norms.map((n, idx) => {
+        const norm = n as {
+          id?: string;
+          norm?: string;
+        };
+
+        return <li key={norm.id ?? idx}>{norm.norm ?? "Unnamed norm"}</li>;
+      })}
+    </ul>
+  );
+};
+
+/**
+ * Displays all phase-related information in a grid layout.
+ */
+type PhaseGridProps = {
+  norms: unknown[];
+  goals: unknown[];
+  triggers: unknown[];
+};
+
+const PhaseGrid: React.FC<PhaseGridProps> = ({
+  norms,
+  goals,
+  triggers,
+}) => (
+  <div className={styles.phaseGrid}>
+    <Box title="Norms">
+      <NormList norms={norms} />
+    </Box>
+
+    <Box title="Triggers">
+      <TriggerList triggers={triggers} />
+    </Box>
+
+    <Box title="Goals">
+      <GoalList goals={goals} />
+    </Box>
+
+    <Box title="Conditional Norms">
+      <p className={styles.empty}>No conditional norms defined.</p>
+    </Box>
+  </div>
+);
+
+/**
+ * Main program viewer.
+ * Reads all data from the program store and allows
+ * navigating between phases.
+ */
+const SimpleProgram: React.FC = () => {
+  const getPhaseIds = useProgramStore((s) => s.getPhaseIds);
+  const getNormsInPhase = useProgramStore((s) => s.getNormsInPhase);
+  const getGoalsInPhase = useProgramStore((s) => s.getGoalsInPhase);
+  const getTriggersInPhase = useProgramStore((s) => s.getTriggersInPhase);
+
+  const phaseIds = getPhaseIds();
+  const [phaseIndex, setPhaseIndex] = React.useState(0);
+
+  if (phaseIds.length === 0) {
+    return <p className={styles.empty}>No program loaded.</p>;
+  }
+
+  const phaseId = phaseIds[phaseIndex];
+
+  return (
+    <div className={styles.container}>
+      <header className={styles.header}>
+        <h2>
+          Phase {phaseIndex + 1} / {phaseIds.length}
+        </h2>
+
+        <div className={styles.controls}>
+          <button
+            disabled={phaseIndex === 0}
+            onClick={() => setPhaseIndex((i) => i - 1)}
+          >
+            ◀ Prev
+          </button>
+
+          <button
+            disabled={phaseIndex === phaseIds.length - 1}
+            onClick={() => setPhaseIndex((i) => i + 1)}
+          >
+            Next ▶
+          </button>
+        </div>
+      </header>
+
+      <div className={styles.content}>
+        <PhaseGrid
+          norms={getNormsInPhase(phaseId)}
+          goals={getGoalsInPhase(phaseId)}
+          triggers={getTriggersInPhase(phaseId)}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default SimpleProgram;

src/pages/VisProgPage/VisProg.tsx

@@ -7,13 +7,16 @@ import {
   MarkerType,
 } from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
+import {useEffect, useState} from "react";
 import {useShallow} from 'zustand/react/shallow';
+import useProgramStore from "../../utils/programStore.ts";
 import {DndToolbar} from './visualProgrammingUI/components/DragDropSidebar.tsx';
 import useFlowStore from './visualProgrammingUI/VisProgStores.tsx';
 import type {FlowState} from './visualProgrammingUI/VisProgTypes.tsx';
 import styles from './VisProg.module.css'
 import { NodeReduces, NodeTypes } from './visualProgrammingUI/NodeRegistry.ts';
 import SaveLoadPanel from './visualProgrammingUI/components/SaveLoadPanel.tsx';
+import MonitoringPage from '../MonitoringPage/MonitoringPage.tsx';
 
 // --| config starting params for flow |--
 
@@ -38,11 +41,16 @@ const selector = (state: FlowState) => ({
   nodes: state.nodes,
   edges: state.edges,
   onNodesChange: state.onNodesChange,
+  onEdgesDelete: state.onEdgesDelete,
   onEdgesChange: state.onEdgesChange,
   onConnect: state.onConnect,
   onReconnectStart: state.onReconnectStart,
   onReconnectEnd: state.onReconnectEnd,
-  onReconnect: state.onReconnect
+  onReconnect: state.onReconnect,
+  undo: state.undo,
+  redo: state.redo,
+  beginBatchAction: state.beginBatchAction,
+  endBatchAction: state.endBatchAction
 });
 
 // --| define ReactFlow editor |--
@@ -57,13 +65,28 @@ const VisProgUI = () => {
   const {
     nodes, edges,
     onNodesChange,
+    onEdgesDelete,
     onEdgesChange,
     onConnect,
     onReconnect,
     onReconnectStart,
-    onReconnectEnd
+    onReconnectEnd,
+    undo,
+    redo,
+    beginBatchAction,
+    endBatchAction
   } = 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
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if (e.ctrlKey && e.key === 'z') undo();
+      if (e.ctrlKey && e.key === 'y') redo();
+    };
+    window.addEventListener('keydown', handler);
+    return () => window.removeEventListener('keydown', handler);
+  });
+
   return (
     <div className={`${styles.innerEditorContainer} round-lg border-lg`}>
       <ReactFlow
@@ -72,11 +95,14 @@ const VisProgUI = () => {
         defaultEdgeOptions={DEFAULT_EDGE_OPTIONS}
         nodeTypes={NodeTypes}
         onNodesChange={onNodesChange}
+        onEdgesDelete={onEdgesDelete}
         onEdgesChange={onEdgesChange}
         onReconnect={onReconnect}
         onReconnectStart={onReconnectStart}
         onReconnectEnd={onReconnectEnd}
         onConnect={onConnect}
+        onNodeDragStart={beginBatchAction}
+        onNodeDragStop={endBatchAction}
         snapToGrid
         fitView
         proOptions={{hideAttribution: true}}
@@ -87,6 +113,10 @@ const VisProgUI = () => {
           <Panel position = "bottom-left" className={styles.saveLoadPanel}>
             <SaveLoadPanel></SaveLoadPanel>
           </Panel>
+        <Panel position="bottom-center">
+          <button onClick={() => undo()}>undo</button>
+          <button onClick={() => redo()}>Redo</button>
+        </Panel>
         <Controls/>
         <Background/>
       </ReactFlow>
@@ -94,8 +124,6 @@ const VisProgUI = () => {
   );
 };
 
-
-
 /**
  * Places the VisProgUI component inside a ReactFlowProvider
  *
@@ -112,7 +140,7 @@ function VisualProgrammingUI() {
 }
 
 // currently outputs the prepared program to the console
-function runProgram() {
+function runProgramm() {
   const phases = graphReducer();
   const program = {phases}
   console.log(JSON.stringify(program, null, 2));
@@ -126,6 +154,10 @@ function runProgram() {
   ).then((res) => {
     if (!res.ok) throw new Error("Failed communicating with the backend.")
     console.log("Successfully sent the program to the backend.");
+
+    // store reduced program in global program store for further use in the UI
+    // when the program was sent to the backend successfully:
+    useProgramStore.getState().setProgramState(structuredClone(program));
   }).catch(() => console.log("Failed to send program to the backend."));
 }
 
@@ -148,6 +180,27 @@ function graphReducer() {
  * @constructor
  */
 function VisProgPage() {
+  const [showSimpleProgram, setShowSimpleProgram] = useState(false);
+  const setProgramState = useProgramStore((state) => state.setProgramState);
+
+  const runProgram = () => {
+    const phases = graphReducer();       // reduce graph
+    setProgramState({ phases });          // <-- save to store
+    setShowSimpleProgram(true);          // show SimpleProgram
+    runProgramm();                        // send to backend if needed
+  };
+
+  if (showSimpleProgram) {
+    return (
+    <div>
+      <button onClick={() => setShowSimpleProgram(false)}>
+        Back to Editor ◀ 
+      </button>
+      <MonitoringPage/>
+    </div>
+    );
+  }
+
   return (
     <>
       <VisualProgrammingUI/>

src/pages/VisProgPage/visualProgrammingUI/EditorUndoRedo.ts

@@ -0,0 +1,129 @@
+import type {Edge, Node} from "@xyflow/react";
+import type {StateCreator, StoreApi } from 'zustand/vanilla';
+import type {FlowState} from "./VisProgTypes.tsx";
+
+export type FlowSnapshot = {
+  nodes: Node[];
+  edges: Edge[];
+}
+
+/**
+ * A reduced version of the flowState type,
+ * This removes the functions that are provided by UndoRedo from the expected input type
+ */
+type BaseFlowState = Omit<FlowState, 'undo' | 'redo' | 'pushSnapshot' | 'beginBatchAction' | 'endBatchAction'>;
+
+
+/**
+ * UndoRedo is implemented as a middleware for the FlowState store,
+ * this allows us to keep the undo redo logic separate from the flowState,
+ * and thus from the internal editor logic
+ *
+ * Allows users to undo and redo actions in the visual programming editor
+ *
+ * @param {(set: StoreApi<FlowState>["setState"], get: () => FlowState, api: StoreApi<FlowState>) => BaseFlowState} config
+ * @returns {StateCreator<FlowState>}
+ * @constructor
+ */
+export const UndoRedo = (
+  config: (
+    set: StoreApi<FlowState>['setState'],
+    get: () => FlowState,
+    api: StoreApi<FlowState>
+  ) => BaseFlowState ) : StateCreator<FlowState> => (set, get, api) => {
+  let batchTimeout: number | null = null;
+
+  /**
+   * Captures the current state for
+   *
+   * @param {BaseFlowState} state - the current state of the editor
+   * @returns {FlowSnapshot} - returns a snapshot of the current editor state
+   */
+  const getSnapshot = (state : BaseFlowState) : FlowSnapshot => ({
+    nodes: state.nodes,
+    edges: state.edges
+  });
+
+  const initialState = config(set, get, api);
+
+  return {
+    ...initialState,
+
+    /**
+     *  Adds a snapshot of the current state to the undo history
+     */
+    pushSnapshot: () => {
+      const state = get();
+      // we don't add new snapshots during an ongoing batch action
+      if (!state.isBatchAction) {
+        set({
+          past: [...state.past, getSnapshot(state)],
+          future: []
+        });
+      }
+
+    },
+
+    /**
+     * Undoes the last action from the editor,
+     * The state before undoing is added to the future for potential redoing
+     */
+    undo: () => {
+      const state = get();
+      if (!state.past.length) return;
+
+      const snapshot = state.past.pop()!; // pop last snapshot
+      const currentSnapshot: FlowSnapshot = getSnapshot(state);
+
+      set({
+        nodes: snapshot.nodes,
+        edges: snapshot.edges,
+      });
+
+      state.future.push(currentSnapshot); // push current to redo
+    },
+
+    /**
+     * redoes the last undone action,
+     * The state before redoing is added to the past for potential undoing
+     */
+    redo: () => {
+      const state = get();
+      if (!state.future.length) return;
+
+      const snapshot = state.future.pop()!; // pop last redo
+      const currentSnapshot: FlowSnapshot = getSnapshot(state);
+
+      set({
+        nodes: snapshot.nodes,
+        edges: snapshot.edges,
+      });
+
+      state.past.push(currentSnapshot); // push current to undo
+    },
+
+    /**
+     * Begins a batched action
+     *
+     * An example of a batched action is dragging a node in the editor,
+     * where we want the entire action of moving a node to a different position
+     * to be covered by one undoable snapshot
+     */
+    beginBatchAction: () => {
+      get().pushSnapshot();
+      set({ isBatchAction: true });
+      if (batchTimeout) clearTimeout(batchTimeout);
+    },
+
+    /**
+     * Ends a batched action,
+     * a very short timeout is used to prevent new snapshots from being added
+     * until we are certain that the batch event is finished
+     */
+    endBatchAction: () => {
+      batchTimeout = window.setTimeout(() => {
+        set({ isBatchAction: false });
+      }, 10);
+    }
+  }
+}

src/pages/VisProgPage/visualProgrammingUI/NodeRegistry.ts

@@ -1,14 +1,50 @@
-import StartNode, { StartConnects, StartReduce } from "./nodes/StartNode";
-import EndNode, { EndConnects, EndReduce } from "./nodes/EndNode";
-import PhaseNode, { PhaseConnects, PhaseReduce } from "./nodes/PhaseNode";
-import NormNode, { NormConnects, NormReduce } from "./nodes/NormNode";
+import EndNode, {
+  EndConnectionTarget,
+  EndConnectionSource,
+  EndDisconnectionTarget,
+  EndDisconnectionSource,
+  EndReduce
+} from "./nodes/EndNode";
 import { EndNodeDefaults } from "./nodes/EndNode.default";
+import StartNode, {
+  StartConnectionTarget,
+  StartConnectionSource,
+  StartDisconnectionTarget,
+  StartDisconnectionSource,
+  StartReduce
+} from "./nodes/StartNode";
 import { StartNodeDefaults } from "./nodes/StartNode.default";
+import PhaseNode, {
+  PhaseConnectionTarget,
+  PhaseConnectionSource,
+  PhaseDisconnectionTarget,
+  PhaseDisconnectionSource,
+  PhaseReduce
+} from "./nodes/PhaseNode";
 import { PhaseNodeDefaults } from "./nodes/PhaseNode.default";
+import NormNode, {
+  NormConnectionTarget,
+  NormConnectionSource,
+  NormDisconnectionTarget,
+  NormDisconnectionSource,
+  NormReduce
+} from "./nodes/NormNode";
 import { NormNodeDefaults } from "./nodes/NormNode.default";
-import GoalNode, { GoalConnects, GoalReduce } from "./nodes/GoalNode";
+import GoalNode, {
+  GoalConnectionTarget,
+  GoalConnectionSource,
+  GoalDisconnectionTarget,
+  GoalDisconnectionSource,
+  GoalReduce
+} from "./nodes/GoalNode";
 import { GoalNodeDefaults } from "./nodes/GoalNode.default";
-import TriggerNode, { TriggerConnects, TriggerReduce } from "./nodes/TriggerNode";
+import TriggerNode, {
+  TriggerConnectionTarget,
+  TriggerConnectionSource,
+  TriggerDisconnectionTarget,
+  TriggerDisconnectionSource,
+  TriggerReduce
+} from "./nodes/TriggerNode";
 import { TriggerNodeDefaults } from "./nodes/TriggerNode.default";
 
 /**
@@ -60,15 +96,51 @@ export const NodeReduces = {
 /**
  * Connection functions for each node type.
  * 
- * These functions define how nodes of a particular type can connect to other nodes.
+ * These functions define any additional actions a node may perform
+ * when a new connection is made
  */
-export const NodeConnects = {
-  start: StartConnects,
-  end: EndConnects,
-  phase: PhaseConnects,
-  norm: NormConnects,
-  goal: GoalConnects,
-  trigger: TriggerConnects,
+export const NodeConnections = {
+  Targets: {
+    start: StartConnectionTarget,
+    end: EndConnectionTarget,
+    phase: PhaseConnectionTarget,
+    norm: NormConnectionTarget,
+    goal: GoalConnectionTarget,
+    trigger: TriggerConnectionTarget,
+  },
+  Sources: {
+    start: StartConnectionSource,
+    end: EndConnectionSource,
+    phase: PhaseConnectionSource,
+    norm: NormConnectionSource,
+    goal: GoalConnectionSource,
+    trigger: TriggerConnectionSource,
+  }
+}
+
+/**
+ * Disconnection functions for each node type.
+ *
+ * These functions define any additional actions a node may perform
+ * when a connection is disconnected
+ */
+export const NodeDisconnections = {
+  Targets: {
+    start: StartDisconnectionTarget,
+    end: EndDisconnectionTarget,
+    phase: PhaseDisconnectionTarget,
+    norm: NormDisconnectionTarget,
+    goal: GoalDisconnectionTarget,
+    trigger: TriggerDisconnectionTarget,
+  },
+  Sources: {
+    start: StartDisconnectionSource,
+    end: EndDisconnectionSource,
+    phase: PhaseDisconnectionSource,
+    norm: NormDisconnectionSource,
+    goal: GoalDisconnectionSource,
+    trigger: TriggerDisconnectionSource,
+  },
 }
 
 /**
@@ -79,6 +151,7 @@ export const NodeConnects = {
 export const NodeDeletes = {
   start: () => false,
   end: () => false,
+  test: () => false, // Used for coverage of universal/ undefined nodes
 }
 
 /**
@@ -91,4 +164,5 @@ export const NodesInPhase = {
   start: () => false,
   end: () => false,
   phase: () => false,
+  test: () => false, // Used for coverage of universal/ undefined nodes
 }

src/pages/VisProgPage/visualProgrammingUI/VisProgStores.tsx

@@ -9,7 +9,13 @@ import {
   type XYPosition,
 } from '@xyflow/react';
 import type { FlowState } from './VisProgTypes';
-import { NodeDefaults, NodeConnects, NodeDeletes } from './NodeRegistry';
+import {
+  NodeDefaults,
+  NodeConnections as NodeCs,
+  NodeDisconnections as NodeDs,
+  NodeDeletes
+} from './NodeRegistry';
+import { UndoRedo } from "./EditorUndoRedo.ts";
 
 
 /**
@@ -34,15 +40,15 @@ function createNode(id: string, type: string, position: XYPosition, data: Record
   return {...defaultData, ...newData}
 }
 
-//* Initial nodes to populate the flow at startup.
+//* 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('phase-1', '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"]}),     
+    createNode('norms-1', 'norm',  {x:-200, y:100}, {label: "Initial Norms", normList: ["Be a robot", "get good"], critical:false}),     
 ];
 
-//* Initial edges to connect the startup nodes.
+// * Initial edges * /
 const initialEdges: Edge[] = [
   { id: 'start-phase-1', source: 'start', target: 'phase-1' },
   { id: 'phase-1-end', source: 'phase-1', target: 'end' },
@@ -50,17 +56,17 @@ const initialEdges: Edge[] = [
 
 
 /**
- * How we have defined the functions for our FlowState. 
- * We have the normal functionality of a default FlowState with some exceptions to account for extra functionality.
- * The biggest changes are in onConnect and onDelete, which we have given extra functionality based on the nodes defined functions.
- * 
+ * useFlowStore contains the implementation for all editor functionality
+ * and stores the current state of the visual programming editor
+ *
  *  * Provides:
  * - Node and edge state management
  * - Node creation, deletion, and updates
  * - Custom connection handling via NodeConnects
  * - Edge reconnection handling
+ * - Undo Redo functionality through custom middleware
  */
-const useFlowStore = create<FlowState>((set, get) => ({
+const useFlowStore = create<FlowState>(UndoRedo((set, get) => ({
   nodes: initialNodes,
   edges: initialEdges,
   edgeReconnectSuccessful: true,
@@ -68,41 +74,45 @@ const useFlowStore = create<FlowState>((set, get) => ({
    /**
    * Handles changes to nodes triggered by ReactFlow.
    */
-  onNodesChange: (changes) =>
-  set({nodes: applyNodeChanges(changes, get().nodes)}),
+  onNodesChange: (changes) => set({nodes: applyNodeChanges(changes, get().nodes)}),
 
+  onEdgesDelete: (edges) => {
+
+    // we make sure any affected nodes get updated to reflect removal of edges
+    edges.forEach((edge) => {
+        const nodes = get().nodes;
+
+        const sourceNode = nodes.find((n) => n.id == edge.source);
+        const targetNode = nodes.find((n) => n.id == edge.target);
+
+        if (sourceNode) { NodeDs.Sources[sourceNode.type as keyof typeof NodeDs.Sources](sourceNode, edge.target); }
+        if (targetNode) { NodeDs.Targets[targetNode.type as keyof typeof NodeDs.Targets](targetNode, edge.source); }
+      });
+  },
   /**
    * Handles changes to edges triggered by ReactFlow.
    */
-  onEdgesChange: (changes) => set({ edges: applyEdgeChanges(changes, get().edges) }),
+  onEdgesChange: (changes) => {
+    set({ edges: applyEdgeChanges(changes, get().edges) })
+  },
 
   /**
    * Handles creating a new connection between nodes.
    * Updates edges and calls the node-specific connection functions.
    */
   onConnect: (connection) => {
-  const edges = addEdge(connection, get().edges);
-  const nodes = get().nodes;
-  // connection has: { source, sourceHandle, target, targetHandle }
-  // Let's find the source and target ID's.
-  const sourceNode = nodes.find((n) => n.id == connection.source);
-  const targetNode = nodes.find((n) => n.id == connection.target);
-  
-  // In case the nodes weren't found, return basic functionality.
-  if (sourceNode == undefined || targetNode == undefined || sourceNode.type == undefined || targetNode.type == undefined) {
-    set({ nodes, edges });
-    return;
-  }
+    get().pushSnapshot();
+    set({edges: addEdge(connection, get().edges)});
 
-  // We should find out how their data changes by calling their respective functions.
-  const sourceConnectFunction = NodeConnects[sourceNode.type as keyof typeof NodeConnects]
-  const targetConnectFunction = NodeConnects[targetNode.type as keyof typeof NodeConnects]
-  
-  // We're going to have to update their data based on how they want to update it.
-  sourceConnectFunction(sourceNode, targetNode, true)
-  targetConnectFunction(targetNode, sourceNode, false)
-  set({ nodes, edges });
-},
+    // We make sure to perform any required data updates on the newly connected nodes
+    const nodes = get().nodes;
+
+    const sourceNode = nodes.find((n) => n.id == connection.source);
+    const targetNode = nodes.find((n) => n.id == connection.target);
+
+    if (sourceNode) { NodeCs.Sources[sourceNode.type as keyof typeof NodeCs.Sources](sourceNode, connection.target); }
+    if (targetNode) { NodeCs.Targets[targetNode.type as keyof typeof NodeCs.Targets](targetNode, connection.source); }
+  },
 
   /**
    * Handles reconnecting an edge between nodes.
@@ -110,21 +120,60 @@ const useFlowStore = create<FlowState>((set, get) => ({
   onReconnect: (oldEdge, newConnection) => {
     get().edgeReconnectSuccessful = true;
     set({ edges: reconnectEdge(oldEdge, newConnection, get().edges) });
+
+    // We make sure to perform any required data updates on the newly reconnected nodes
+    const nodes = get().nodes;
+
+    const oldSourceNode = nodes.find((n) => n.id == oldEdge.source)!;
+    const oldTargetNode = nodes.find((n) => n.id == oldEdge.target)!;
+    const newSourceNode = nodes.find((n) => n.id == newConnection.source)!;
+    const newTargetNode = nodes.find((n) => n.id == newConnection.target)!;
+
+    if (oldSourceNode === newSourceNode && oldTargetNode === newTargetNode) return;
+
+    NodeCs.Sources[newSourceNode.type as keyof typeof NodeCs.Sources](newSourceNode, newConnection.target);
+    NodeCs.Targets[newTargetNode.type as keyof typeof NodeCs.Targets](newTargetNode, newConnection.source);
+
+    NodeDs.Sources[oldSourceNode.type as keyof typeof NodeDs.Sources](oldSourceNode, oldEdge.target);
+    NodeDs.Targets[oldTargetNode.type as keyof typeof NodeDs.Targets](oldTargetNode, oldEdge.source);
   },
 
-  onReconnectStart: () => set({ edgeReconnectSuccessful: false }),
+  onReconnectStart: () => {
+    get().pushSnapshot();
+    set({ edgeReconnectSuccessful: false })
+  },
+
+  /**
+   * handles potential dropping (deleting) of an edge
+   * if it is not reconnected to a node after detaching it
+   *
+   * @param _evt - the event
+   * @param edge - the described edge
+   */
   onReconnectEnd: (_evt, edge) => {
     if (!get().edgeReconnectSuccessful) {
+      // delete the edge from the flowState
       set({ edges: get().edges.filter((e) => e.id !== edge.id) });
+
+      // update node data to reflect the dropped edge
+      const nodes = get().nodes;
+
+      const sourceNode = nodes.find((n) => n.id == edge.source)!;
+      const targetNode = nodes.find((n) => n.id == edge.target)!;
+
+      NodeDs.Sources[sourceNode.type as keyof typeof NodeDs.Sources](sourceNode, edge.target);
+      NodeDs.Targets[targetNode.type as keyof typeof NodeDs.Targets](targetNode, edge.source);
     }
     set({ edgeReconnectSuccessful: true });
   },
-  
+
   /**
    * Deletes a node by ID, respecting NodeDeletes rules.
    * Also removes all edges connected to that node.
    */
   deleteNode: (nodeId) => {
+    get().pushSnapshot();
+
     // Let's find our node to check if they have a special deletion function
     const ourNode = get().nodes.find((n)=>n.id==nodeId);
     const ourFunction = Object.entries(NodeDeletes).find(([t])=>t==ourNode?.type)?.[1]
@@ -135,7 +184,7 @@ const useFlowStore = create<FlowState>((set, get) => ({
       nodes: get().nodes.filter((n) => n.id !== nodeId),
       edges: get().edges.filter((e) => e.source !== nodeId && e.target !== nodeId),
       })}
-    },
+  },
 
   /**
    * Replaces the entire nodes array in the store.
@@ -151,6 +200,7 @@ const useFlowStore = create<FlowState>((set, get) => ({
    * Updates the data of a node by merging new data with existing data.
    */
   updateNodeData: (nodeId, data) => {
+    get().pushSnapshot();
     set({
       nodes: get().nodes.map((node) => {
         if (node.id === nodeId) {
@@ -165,8 +215,15 @@ const useFlowStore = create<FlowState>((set, get) => ({
    * Adds a new node to the flow store.
    */
   addNode: (node: Node) => {
+    get().pushSnapshot();
     set({ nodes: [...get().nodes, node] });
   },
-}));
+
+  // undo redo default values
+  past: [],
+  future: [],
+  isBatchAction: false,
+  }))
+);
 
 export default useFlowStore;

src/pages/VisProgPage/visualProgrammingUI/VisProgTypes.tsx

@@ -1,6 +1,8 @@
 // VisProgTypes.ts
-import type { Edge, OnNodesChange, OnEdgesChange, OnConnect, OnReconnect, Node } from '@xyflow/react';
+import type {Edge, OnNodesChange, OnEdgesChange, OnConnect, OnReconnect, Node, OnEdgesDelete} from '@xyflow/react';
 import type { NodeTypes } from './NodeRegistry';
+import type {FlowSnapshot} from "./EditorUndoRedo.ts";
+
 
 /**
  * Type representing all registered node types.
@@ -25,6 +27,8 @@ export type FlowState = {
   /** Handler for changes to nodes triggered by ReactFlow */
   onNodesChange: OnNodesChange;
 
+  onEdgesDelete: OnEdgesDelete;
+
   /** Handler for changes to edges triggered by ReactFlow */
   onEdgesChange: OnEdgesChange;
 
@@ -42,7 +46,7 @@ export type FlowState = {
    * @param _ - event or unused parameter
    * @param edge - the edge that finished reconnecting
    */
-  onReconnectEnd: (_: unknown, edge: { id: string }) => void;
+  onReconnectEnd: (_: unknown, edge: Edge) => void;
 
   /**
    * Deletes a node and any connected edges.
@@ -74,4 +78,14 @@ export type FlowState = {
    * @param node - the Node object to add
    */
   addNode: (node: Node) => void;
+
+  // UndoRedo Types
+  past: FlowSnapshot[];
+  future: FlowSnapshot[];
+  pushSnapshot: () => void;
+  isBatchAction: boolean;
+  beginBatchAction: () => void;
+  endBatchAction: () => void;
+  undo: () => void;
+  redo: () => void;
 };

src/pages/VisProgPage/visualProgrammingUI/components/DragDropSidebar.tsx

@@ -47,7 +47,11 @@ function DraggableNode({ className, children, nodeType, onDrop }: DraggableNodeP
   });
 
   return (
-    <div className={className} ref={draggableRef}>
+    <div className={className} 
+    ref={draggableRef} 
+    id={`draggable-${nodeType}`}
+    data-testid={`draggable-${nodeType}`}
+    >
       {children}
     </div>
   );
@@ -64,8 +68,8 @@ function DraggableNode({ className, children, nodeType, onDrop }: DraggableNodeP
  * @param nodeType - The type of node to create (from `NodeTypes`).
  * @param position - The XY position in the flow canvas where the node will appear.
  */
-function addNode(nodeType: keyof typeof NodeTypes, position: XYPosition) {
-  const { nodes, setNodes } = useFlowStore.getState();
+function addNodeToFlow(nodeType: keyof typeof NodeTypes, position: XYPosition) {
+  const { nodes, addNode } = useFlowStore.getState();
 
   // Load any predefined data for this node type.
   const defaultData = NodeDefaults[nodeType] ?? {}
@@ -88,9 +92,9 @@ function addNode(nodeType: keyof typeof NodeTypes, position: XYPosition) {
     id: id,
     type: nodeType,
     position,
-    data: {...defaultData}
+    data: JSON.parse(JSON.stringify(defaultData))
   }
-  setNodes([...nodes, newNode]);
+  addNode(newNode);
 }
 
 /**
@@ -125,7 +129,7 @@ export function DndToolbar() {
 
       if (isInFlow) {
         const position = screenToFlowPosition(screenPosition);
-        addNode(nodeType, position);
+        addNodeToFlow(nodeType, position);
       }
     },
     [screenToFlowPosition],
@@ -149,6 +153,7 @@ export function DndToolbar() {
         {/* Maps over all the nodes that are droppable, and puts them in the panel */}
         {droppableNodes.map(({type, data}) => (
           <DraggableNode
+            key={type}
             className={styles[`draggable-node-${type}`]} // Our current style signature for nodes
             nodeType={type}
             onDrop={handleNodeDrop}

src/pages/VisProgPage/visualProgrammingUI/nodes/EndNode.tsx

@@ -5,7 +5,8 @@ import {
   type Node,
 } from '@xyflow/react';
 import { Toolbar } from '../components/NodeComponents';
-import styles from '../../VisProg.module.css'; 
+import styles from '../../VisProg.module.css';
+
 
 /**
  * The typing of this node's data
@@ -40,28 +41,48 @@ export default function EndNode(props: NodeProps<EndNode>) {
 /**
  * Functionality for reducing this node into its more compact json program
  * @param node the node to reduce
- * @param nodes all nodes present
+ * @param _nodes all nodes present
  * @returns Dictionary, {id: node.id}
  */
-export function EndReduce(node: Node, nodes: Node[]) {
+export function EndReduce(node: Node, _nodes: Node[]) {
   // Replace this for nodes functionality
-  if (nodes.length <= -1) { 
-    console.warn("Impossible nodes length in EndReduce") 
-  } 
   return {
     id: node.id
   }
 }
 
 /**
- * Any connection functionality that should get called when a connection is made to this node type (end)
- * @param thisNode the node of which the functionality gets called
- * @param otherNode the other node which has connected
- * @param isThisSource whether this node is the one that is the source of the connection
+ * This function is called whenever a connection is made with this node type as the target
+ * @param _thisNode the node of this node type which function is called
+ * @param _sourceNodeId the source of the received connection
  */
-export function EndConnects(thisNode: Node, otherNode: Node, isThisSource: boolean) {
-  // Replace this for connection logic
-  if (thisNode == undefined && otherNode == undefined && isThisSource == false) { 
-    console.warn("Impossible node connection called in EndConnects")
-  }
+export function EndConnectionTarget(_thisNode: Node, _sourceNodeId: string) {
+  // no additional connection logic exists yet
+}
+
+/**
+ * This function is called whenever a connection is made with this node type as the source
+ * @param _thisNode the node of this node type which function is called
+ * @param _targetNodeId the target of the created connection
+ */
+export function EndConnectionSource(_thisNode: Node, _targetNodeId: string) {
+  // no additional connection logic exists yet
+}
+
+/**
+ * This function is called whenever a connection is disconnected with this node type as the target
+ * @param _thisNode the node of this node type which function is called
+ * @param _sourceNodeId the source of the disconnected connection
+ */
+export function EndDisconnectionTarget(_thisNode: Node, _sourceNodeId: string) {
+  // no additional connection logic exists yet
+}
+
+/**
+ * This function is called whenever a connection is disconnected with this node type as the source
+ * @param _thisNode the node of this node type which function is called
+ * @param _targetNodeId the target of the diconnected connection
+ */
+export function EndDisconnectionSource(_thisNode: Node, _targetNodeId: string) {
+  // no additional connection logic exists yet
 }

src/pages/VisProgPage/visualProgrammingUI/nodes/GoalNode.tsx

@@ -32,23 +32,22 @@ export type GoalNode = Node<GoalNodeData>
  * @param props NodeProps, like id, label, children
  * @returns React.JSX.Element
  */
-export default function GoalNode(props: NodeProps<GoalNode>) {
-  const data = props.data
+export default function GoalNode({id, data}: NodeProps<GoalNode>) {
   const {updateNodeData} = useFlowStore();
 
-  const text_input_id = `goal_${props.id}_text_input`;
-  const checkbox_id = `goal_${props.id}_checkbox`;
+  const text_input_id = `goal_${id}_text_input`;
+  const checkbox_id = `goal_${id}_checkbox`;
 
   const setDescription = (value: string) => {
-    updateNodeData(props.id, {...data, description: value});
+    updateNodeData(id, {...data, description: value});
   }
 
   const setAchieved = (value: boolean) => {
-    updateNodeData(props.id, {...data, achieved: value});
+    updateNodeData(id, {...data, achieved: value});
   }
 
   return <>
-    <Toolbar nodeId={props.id} allowDelete={true}/>
+    <Toolbar nodeId={id} allowDelete={true}/>
     <div className={`${styles.defaultNode} ${styles.nodeGoal} flex-col gap-sm`}>
       <div className={"flex-row gap-md"}>
         <label htmlFor={text_input_id}>Goal:</label>
@@ -64,7 +63,7 @@ export default function GoalNode(props: NodeProps<GoalNode>) {
         <input
           id={checkbox_id}
           type={"checkbox"}
-          value={data.achieved ? "checked" : ""}
+          checked={data.achieved || false}
           onChange={(e) => setAchieved(e.target.checked)}
         />
       </div>
@@ -76,14 +75,10 @@ export default function GoalNode(props: NodeProps<GoalNode>) {
 
 /**
  * Reduces each Goal, 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 node The Node Properties of this node.
+ * @param _nodes all the nodes in the graph
  */
-export function GoalReduce(node: Node, nodes: Node[]) {
-  // Replace this for nodes functionality
-  if (nodes.length <= -1) { 
-    console.warn("Impossible nodes length in GoalReduce") 
-  } 
+export function GoalReduce(node: Node, _nodes: Node[]) {
   const data = node.data as GoalNodeData;
     return {
       id: node.id,
@@ -94,14 +89,37 @@ export function GoalReduce(node: Node, nodes: Node[]) {
 }
 
 /**
- * This function is called whenever a connection is made with this node type (Goal)
- * @param thisNode the node of this node type which function is called
- * @param otherNode the other node which was part of the connection
- * @param isThisSource whether this instance of the node was the source in the connection, true = yes.
+ * This function is called whenever a connection is made with this node type as the target
+ * @param _thisNode the node of this node type which function is called
+ * @param _sourceNodeId the source of the received connection
  */
-export function GoalConnects(thisNode: Node, otherNode: Node, isThisSource: boolean) {
-  // Replace this for connection logic
-  if (thisNode == undefined && otherNode == undefined && isThisSource == false) { 
-    console.warn("Impossible node connection called in EndConnects")
-  }
+export function GoalConnectionTarget(_thisNode: Node, _sourceNodeId: string) {
+  // no additional connection logic exists yet
+}
+
+/**
+ * This function is called whenever a connection is made with this node type as the source
+ * @param _thisNode the node of this node type which function is called
+ * @param _targetNodeId the target of the created connection
+ */
+export function GoalConnectionSource(_thisNode: Node, _targetNodeId: string) {
+  // no additional connection logic exists yet
+}
+
+/**
+ * This function is called whenever a connection is disconnected with this node type as the target
+ * @param _thisNode the node of this node type which function is called
+ * @param _sourceNodeId the source of the disconnected connection
+ */
+export function GoalDisconnectionTarget(_thisNode: Node, _sourceNodeId: string) {
+  // no additional connection logic exists yet
+}
+
+/**
+ * This function is called whenever a connection is disconnected with this node type as the source
+ * @param _thisNode the node of this node type which function is called
+ * @param _targetNodeId the target of the diconnected connection
+ */
+export function GoalDisconnectionSource(_thisNode: Node, _targetNodeId: string) {
+  // no additional connection logic exists yet
 }

src/pages/VisProgPage/visualProgrammingUI/nodes/NormNode.default.ts

@@ -8,4 +8,5 @@ export const NormNodeDefaults: NormNodeData = {
   droppable: true,
   norm: "",
   hasReduce: true,
+  critical: false,
 };

src/pages/VisProgPage/visualProgrammingUI/nodes/NormNode.tsx

@@ -21,6 +21,7 @@ export type NormNodeData = {
   droppable: boolean;
   norm: string;
   hasReduce: boolean;
+  critical: boolean;
 };
 
 export type NormNode = Node<NormNodeData>
@@ -35,11 +36,16 @@ export default function NormNode(props: NodeProps<NormNode>) {
   const {updateNodeData} = useFlowStore();
 
   const text_input_id = `norm_${props.id}_text_input`;
+  const checkbox_id = `goal_${props.id}_checkbox`;
 
   const setValue = (value: string) => {
     updateNodeData(props.id, {norm: value});
   }
 
+  const setCritical = (value: boolean) => {
+    updateNodeData(props.id, {...data, critical: value});
+  }
+
   return <>
     <Toolbar nodeId={props.id} allowDelete={true}/>
     <div className={`${styles.defaultNode} ${styles.nodeNorm}`}>
@@ -52,6 +58,15 @@ export default function NormNode(props: NodeProps<NormNode>) {
           placeholder={"Pepper should ..."}
         />
       </div>
+      <div className={"flex-row gap-md align-center"}>
+        <label htmlFor={checkbox_id}>Critical:</label>
+        <input
+          id={checkbox_id}
+          type={"checkbox"}
+          checked={data.critical || false}
+          onChange={(e) => setCritical(e.target.checked)}
+        />
+      </div>
       <Handle type="source" position={Position.Right} id="norms"/>
     </div>
   </>;
@@ -60,31 +75,51 @@ 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 node The Node Properties of this node.
+ * @param _nodes all the nodes in the graph
  */
-export function NormReduce(node: Node, nodes: Node[]) {
-  // Replace this for nodes functionality
-  if (nodes.length <= -1) { 
-    console.warn("Impossible nodes length in NormReduce") 
-  } 
+export function NormReduce(node: Node, _nodes: Node[]) {
   const data = node.data as NormNodeData;
     return {
       id: node.id,
       label: data.label,
       norm: data.norm,
+      critical: data.critical,
     }
 }
 
 /**
- * This function is called whenever a connection is made with this node type (Norm)
- * @param thisNode the node of this node type which function is called
- * @param otherNode the other node which was part of the connection
- * @param isThisSource whether this instance of the node was the source in the connection, true = yes.
+ * This function is called whenever a connection is made with this node type as the target
+ * @param _thisNode the node of this node type which function is called
+ * @param _sourceNodeId the source of the received connection
  */
-export function NormConnects(thisNode: Node, otherNode: Node, isThisSource: boolean) {
-  // Replace this for connection logic
-  if (thisNode == undefined && otherNode == undefined && isThisSource == false) { 
-    console.warn("Impossible node connection called in EndConnects")
-  }
+export function NormConnectionTarget(_thisNode: Node, _sourceNodeId: string) {
+  // no additional connection logic exists yet
+}
+
+/**
+ * This function is called whenever a connection is made with this node type as the source
+ * @param _thisNode the node of this node type which function is called
+ * @param _targetNodeId the target of the created connection
+ */
+export function NormConnectionSource(_thisNode: Node, _targetNodeId: string) {
+  // no additional connection logic exists yet
+}
+
+/**
+ * This function is called whenever a connection is disconnected with this node type as the target
+ * @param _thisNode the node of this node type which function is called
+ * @param _sourceNodeId the source of the disconnected connection
+ */
+export function NormDisconnectionTarget(_thisNode: Node, _sourceNodeId: string) {
+  // no additional connection logic exists yet
+}
+
+/**
+ * This function is called whenever a connection is disconnected with this node type as the source
+ * @param _thisNode the node of this node type which function is called
+ * @param _targetNodeId the target of the diconnected connection
+ */
+export function NormDisconnectionSource(_thisNode: Node, _targetNodeId: string) {
+  // no additional connection logic exists yet
 }

src/pages/VisProgPage/visualProgrammingUI/nodes/PhaseNode.tsx

@@ -2,11 +2,11 @@ import {
   Handle,
   type NodeProps,
   Position,
-  type Node,
+  type Node
 } from '@xyflow/react';
 import { Toolbar } from '../components/NodeComponents';
 import styles from '../../VisProg.module.css';
-import { NodeReduces, NodesInPhase, NodeTypes } from '../NodeRegistry';
+import { NodeReduces, NodesInPhase, NodeTypes} from '../NodeRegistry';
 import useFlowStore from '../VisProgStores';
 import { TextField } from '../../../../components/TextField';
 
@@ -78,8 +78,10 @@ export function PhaseReduce(node: Node, nodes: Node[]) {
         .filter(([t]) => !nodesNotInPhase.includes(t))
         .map(([t]) => t);
 
-    // children nodes
-    const childrenNodes = nodes.filter((node) => data.children.includes(node.id));
+    // children nodes - make sure to check for empty arrays
+    let childrenNodes: Node[] = [];
+    if (data.children) 
+      childrenNodes = nodes.filter((node) => data.children.includes(node.id));
 
     // Build the result object
     const result: Record<string, unknown> = {
@@ -102,15 +104,45 @@ export function PhaseReduce(node: Node, nodes: Node[]) {
 }
 
 /**
- * This function is called whenever a connection is made with this node type (phase)
- * @param thisNode the node of this node type which function is called
- * @param otherNode the other node which was part of the connection
- * @param isThisSource whether this instance of the node was the source in the connection, true = yes.
+ * This function is called whenever a connection is made with this node type as the target (phase)
+ * @param _thisNode the node of this node type which function is called
+ * @param _sourceNodeId the source of the received connection
  */
-export function PhaseConnects(thisNode: Node, otherNode: Node, isThisSource: boolean) {
-  console.log("Connect functionality called.")
-  const node = thisNode as PhaseNode
+export function PhaseConnectionTarget(_thisNode: Node, _sourceNodeId: string) {
+  const node = _thisNode as PhaseNode
   const data = node.data as PhaseNodeData
-  if (!isThisSource)
-    data.children.push(otherNode.id)
+  // we only add none phase nodes to the children
+  if (!(useFlowStore.getState().nodes.find((node) => node.id === _sourceNodeId && node.type === 'phase'))) {
+    data.children.push(_sourceNodeId)
+  }
+
+}
+
+/**
+ * This function is called whenever a connection is made with this node type as the source (phase)
+ * @param _thisNode the node of this node type which function is called
+ * @param _targetNodeId the target of the created connection
+ */
+export function PhaseConnectionSource(_thisNode: Node, _targetNodeId: string) {
+  // no additional connection logic exists yet
+}
+
+/**
+ * This function is called whenever a connection is disconnected with this node type as the target (phase)
+ * @param _thisNode the node of this node type which function is called
+ * @param _sourceNodeId the source of the disconnected connection
+ */
+export function PhaseDisconnectionTarget(_thisNode: Node, _sourceNodeId: string) {
+  const node = _thisNode as PhaseNode
+  const data = node.data as PhaseNodeData
+  data.children = data.children.filter((child) => { if (child != _sourceNodeId) return child; });
+}
+
+/**
+ * This function is called whenever a connection is disconnected with this node type as the source (phase)
+ * @param _thisNode the node of this node type which function is called
+ * @param _targetNodeId the target of the diconnected connection
+ */
+export function PhaseDisconnectionSource(_thisNode: Node, _targetNodeId: string) {
+  // no additional connection logic exists yet
 }

src/pages/VisProgPage/visualProgrammingUI/nodes/StartNode.tsx

@@ -40,28 +40,48 @@ export default function StartNode(props: NodeProps<StartNode>) {
 /**
  * The reduce function for this node type.
  * @param node this node
- * @param nodes all the nodes in the graph
+ * @param _nodes all the nodes in the graph
  * @returns a reduced structure of this node
  */
-export function StartReduce(node: Node, nodes: Node[]) {
+export function StartReduce(node: Node, _nodes: Node[]) {
   // Replace this for nodes functionality
-  if (nodes.length <= -1) { 
-    console.warn("Impossible nodes length in StartReduce") 
-  } 
   return {
     id: node.id
   }
 }
 
 /**
- * This function is called whenever a connection is made with this node type (start)
- * @param thisNode the node of this node type which function is called
- * @param otherNode the other node which was part of the connection
- * @param isThisSource whether this instance of the node was the source in the connection, true = yes.
+ * This function is called whenever a connection is made with this node type as the target
+ * @param _thisNode the node of this node type which function is called
+ * @param _sourceNodeId the source of the received connection
  */
-export function StartConnects(thisNode: Node, otherNode: Node, isThisSource: boolean) {
-  // Replace this for connection logic
-  if (thisNode == undefined && otherNode == undefined && isThisSource == false) { 
-    console.warn("Impossible node connection called in EndConnects")
-  }
+export function StartConnectionTarget(_thisNode: Node, _sourceNodeId: string) {
+  // no additional connection logic exists yet
+}
+
+/**
+ * This function is called whenever a connection is made with this node type as the source
+ * @param _thisNode the node of this node type which function is called
+ * @param _targetNodeId the target of the created connection
+ */
+export function StartConnectionSource(_thisNode: Node, _targetNodeId: string) {
+  // no additional connection logic exists yet
+}
+
+/**
+ * This function is called whenever a connection is disconnected with this node type as the target
+ * @param _thisNode the node of this node type which function is called
+ * @param _sourceNodeId the source of the disconnected connection
+ */
+export function StartDisconnectionTarget(_thisNode: Node, _sourceNodeId: string) {
+  // no additional connection logic exists yet
+}
+
+/**
+ * This function is called whenever a connection is disconnected with this node type as the source
+ * @param _thisNode the node of this node type which function is called
+ * @param _targetNodeId the target of the diconnected connection
+ */
+export function StartDisconnectionSource(_thisNode: Node, _targetNodeId: string) {
+  // no additional connection logic exists yet
 }

src/pages/VisProgPage/visualProgrammingUI/nodes/TriggerNode.tsx

@@ -80,14 +80,10 @@ export default function TriggerNode(props: NodeProps<TriggerNode>) {
 /**
  * Reduces each Trigger, including its children down into its core data.
  * @param node - The Trigger node to reduce.
- * @param nodes - The list of all nodes in the current flow graph.
+ * @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[]) {
-  // Replace this for nodes functionality
-  if (nodes.length <= -1) { 
-    console.warn("Impossible nodes length in TriggerReduce") 
-  } 
+export function TriggerReduce(node: Node, _nodes: Node[]) {
   const data = node.data;
   switch (data.triggerType) {
     case "keywords":
@@ -106,17 +102,39 @@ export function TriggerReduce(node: Node, nodes: Node[]) {
 }
 
 /**
- * Handles logic that occurs when a connection is made involving a Trigger node.
- *
- * @param thisNode - The current Trigger node being connected.
- * @param otherNode - The other node involved in the connection.
- * @param isThisSource - Whether this node was the source of the connection.
+ * This function is called whenever a connection is made with this node type as the target
+ * @param _thisNode the node of this node type which function is called
+ * @param _sourceNodeId the source of the received connection
  */
-export function TriggerConnects(thisNode: Node, otherNode: Node, isThisSource: boolean) {
-  // Replace this for connection logic
-  if (thisNode == undefined && otherNode == undefined && isThisSource == false) { 
-    console.warn("Impossible node connection called in EndConnects")
-  }
+export function TriggerConnectionTarget(_thisNode: Node, _sourceNodeId: string) {
+  // no additional connection logic exists yet
+}
+
+/**
+ * This function is called whenever a connection is made with this node type as the source
+ * @param _thisNode the node of this node type which function is called
+ * @param _targetNodeId the target of the created connection
+ */
+export function TriggerConnectionSource(_thisNode: Node, _targetNodeId: string) {
+  // no additional connection logic exists yet
+}
+
+/**
+ * This function is called whenever a connection is disconnected with this node type as the target
+ * @param _thisNode the node of this node type which function is called
+ * @param _sourceNodeId the source of the disconnected connection
+ */
+export function TriggerDisconnectionTarget(_thisNode: Node, _sourceNodeId: string) {
+  // no additional connection logic exists yet
+}
+
+/**
+ * This function is called whenever a connection is disconnected with this node type as the source
+ * @param _thisNode the node of this node type which function is called
+ * @param _targetNodeId the target of the diconnected connection
+ */
+export function TriggerDisconnectionSource(_thisNode: Node, _targetNodeId: string) {
+  // no additional connection logic exists yet
 }
 
 // Definitions for the possible triggers, being keywords and emotions

src/utils/programStore.ts

@@ -0,0 +1,81 @@
+import {create} from "zustand";
+
+// the type of a reduced program
+export type ReducedProgram = { phases: Record<string, unknown>[] };
+
+/**
+ * the type definition of the programStore
+ */
+export type ProgramState = {
+  // Basic store functionality:
+  currentProgram: ReducedProgram;
+  setProgramState: (state: ReducedProgram) => void;
+  getProgramState: () => ReducedProgram;
+
+  // Utility functions:
+  // to avoid having to manually go through the entire state for every instance where data is required
+  getPhaseIds: () => string[];
+  getNormsInPhase: (currentPhaseId: string) => Record<string, unknown>[];
+  getGoalsInPhase: (currentPhaseId: string) => Record<string, unknown>[];
+  getTriggersInPhase: (currentPhaseId: string) => Record<string, unknown>[];
+  // if more specific utility functions are needed they can be added here:
+}
+
+/**
+ * the ProgramStore can be used to access all information of the most recently sent program,
+ * it contains basic functions to set and get the current program.
+ * And it contains some utility functions that allow you to easily gain access
+ * to the norms, triggers and goals of a specific phase.
+ */
+const useProgramStore = create<ProgramState>((set, get) => ({
+  currentProgram: { phases: [] as Record<string, unknown>[]},
+  /**
+   * sets the current program by cloning the provided program using a structuredClone
+   */
+  setProgramState: (program: ReducedProgram) => set({currentProgram: structuredClone(program)}),
+  /**
+   * gets the current program
+   */
+  getProgramState: () => get().currentProgram,
+
+  // utility functions:
+  /**
+   * gets the ids of all phases in the program
+   */
+  getPhaseIds: () => get().currentProgram.phases.map(entry => entry["id"] as string),
+  /**
+   * gets the norms for the provided phase
+   */
+  getNormsInPhase: (currentPhaseId) => {
+    const program = get().currentProgram;
+    const phase = program.phases.find(val => val["id"] === currentPhaseId);
+    if (phase) {
+      return phase["norms"] as Record<string, unknown>[];
+    }
+    throw new Error(`phase with id:"${currentPhaseId}" not found`)
+  },
+  /**
+   * gets the goals for the provided phase
+   */
+  getGoalsInPhase: (currentPhaseId) => {
+    const program = get().currentProgram;
+    const phase = program.phases.find(val => val["id"] === currentPhaseId);
+    if (phase) {
+      return phase["goals"] as Record<string, unknown>[];
+    }
+    throw new Error(`phase with id:"${currentPhaseId}" not found`)
+  },
+  /**
+   * gets the triggers for the provided phase
+   */
+  getTriggersInPhase: (currentPhaseId) => {
+    const program = get().currentProgram;
+    const phase = program.phases.find(val => val["id"] === currentPhaseId);
+    if (phase) {
+      return phase["triggers"] as Record<string, unknown>[];
+    }
+    throw new Error(`phase with id:"${currentPhaseId}" not found`)
+  }
+}));
+
+export default useProgramStore;

test/components/Logging/Logging.test.tsx

@@ -127,10 +127,10 @@ describe("Logging component", () => {
 
     render(<Logging/>);
 
-    expect(screen.getByText("Logs")).toBeInTheDocument();
-    expect(screen.getByText("WARNING")).toBeInTheDocument();
-    expect(screen.getByText("logging")).toBeInTheDocument();
-    expect(screen.getByText("Ping")).toBeInTheDocument();
+    expect(screen.getByText("Logs")).toBeDefined();
+    expect(screen.getByText("WARNING")).toBeDefined();
+    expect(screen.getByText("logging")).toBeDefined();
+    expect(screen.getByText("Ping")).toBeDefined();
 
     let timestamp = screen.queryByText("ABS TIME");
     if (!timestamp) {
@@ -141,7 +141,7 @@ describe("Logging component", () => {
     }
 
     await user.click(timestamp);
-    expect(screen.getByText("00:00:12.345")).toBeInTheDocument();
+    expect(screen.getByText("00:00:12.345")).toBeDefined();
   });
 
   it("shows the scroll-to-bottom button after a manual scroll and scrolls when clicked", async () => {
@@ -188,7 +188,7 @@ describe("Logging component", () => {
       logCell.set({...current, message: "Updated"});
     });
 
-    expect(screen.getByText("Updated")).toBeInTheDocument();
+    expect(screen.getByText("Updated")).toBeDefined();
     await waitFor(() => {
       expect(scrollSpy).toHaveBeenCalledTimes(1);
     });

test/pages/robot/Robot.test.tsx

@@ -0,0 +1,167 @@
+import { render, screen, act, cleanup, fireEvent } from '@testing-library/react';
+import Robot from '../../../src/pages/Robot/Robot';
+
+// Mock EventSource
+const mockInstances: MockEventSource[] = [];
+class MockEventSource {
+  url: string;
+  onmessage: ((event: MessageEvent) => void) | null = null;
+  closed = false;
+
+  constructor(url: string) {
+    this.url = url;
+    mockInstances.push(this);
+  }
+
+  sendMessage(data: string) {
+    this.onmessage?.({ data } as MessageEvent);
+  }
+
+  close() {
+    this.closed = true;
+  }
+}
+
+// Mock global EventSource
+beforeAll(() => {
+  (globalThis as any).EventSource = jest.fn((url: string) => new MockEventSource(url));
+});
+
+// Mock fetch
+beforeEach(() => {
+  globalThis.fetch = jest.fn(() =>
+    Promise.resolve({
+      json: () => Promise.resolve({ reply: 'ok' }),
+    })
+  ) as jest.Mock;
+});
+
+// Cleanup
+afterEach(() => {
+  cleanup();
+  jest.restoreAllMocks();
+  mockInstances.length = 0;
+});
+
+describe('Robot', () => {
+  test('renders initial state', () => {
+    render(<Robot />);
+    expect(screen.getByText('Robot interaction')).toBeInTheDocument();
+    expect(screen.getByText('Force robot speech')).toBeInTheDocument();
+    expect(screen.getByText('Listening 🔴')).toBeInTheDocument();
+    expect(screen.getByPlaceholderText('Enter a message')).toBeInTheDocument();
+  });
+
+  test('sends message via button', async () => {
+    render(<Robot />);
+    const input = screen.getByPlaceholderText('Enter a message');
+    const button = screen.getByText('Speak');
+
+    fireEvent.change(input, { target: { value: 'Hello' } });
+    await act(async () => fireEvent.click(button));
+
+    expect(globalThis.fetch).toHaveBeenCalledWith(
+      'http://localhost:8000/message',
+      expect.objectContaining({
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ message: 'Hello' }),
+      })
+    );
+  });
+
+  test('sends message via Enter key', async () => {
+    render(<Robot />);
+    const input = screen.getByPlaceholderText('Enter a message');
+    fireEvent.change(input, { target: { value: 'Hi Enter' } });
+
+    await act(async () =>
+      fireEvent.keyDown(input, { key: 'Enter', code: 'Enter', charCode: 13 })
+    );
+
+    expect(globalThis.fetch).toHaveBeenCalledWith(
+      'http://localhost:8000/message',
+      expect.objectContaining({
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ message: 'Hi Enter' }),
+      })
+    );
+    expect((input as HTMLInputElement).value).toBe('');
+  });
+
+  test('handles fetch errors', async () => {
+    globalThis.fetch = jest.fn(() => Promise.reject('Network error')) as jest.Mock;
+    const consoleSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+
+    render(<Robot />);
+    const input = screen.getByPlaceholderText('Enter a message');
+    const button = screen.getByText('Speak');
+    fireEvent.change(input, { target: { value: 'Error test' } });
+
+    await act(async () => fireEvent.click(button));
+
+    expect(consoleSpy).toHaveBeenCalledWith(
+      'Error sending message: ',
+      'Network error'
+    );
+  });
+
+  test('updates conversation on SSE', async () => {
+    render(<Robot />);
+    const eventSource = mockInstances[0];
+
+    await act(async () => {
+      eventSource.sendMessage(JSON.stringify({ voice_active: true }));
+      eventSource.sendMessage(JSON.stringify({ speech: 'User says hi' }));
+      eventSource.sendMessage(JSON.stringify({ llm_response: 'Assistant replies' }));
+    });
+
+    expect(screen.getByText('Listening 🟢')).toBeInTheDocument();
+    expect(screen.getByText('User says hi')).toBeInTheDocument();
+    expect(screen.getByText('Assistant replies')).toBeInTheDocument();
+  });
+
+  test('handles invalid SSE JSON', async () => {
+    const logSpy = jest.spyOn(console, 'log').mockImplementation(() => {});
+    render(<Robot />);
+    const eventSource = mockInstances[0];
+
+    await act(async () => eventSource.sendMessage('bad-json'));
+
+    expect(logSpy).toHaveBeenCalledWith('Unparsable SSE message:', 'bad-json');
+  });
+
+  test('resets conversation with Reset button', async () => {
+    render(<Robot />);
+    const eventSource = mockInstances[0];
+
+    await act(async () =>
+      eventSource.sendMessage(JSON.stringify({ speech: 'Hello' }))
+    );
+    expect(screen.getByText('Hello')).toBeInTheDocument();
+
+    fireEvent.click(screen.getByText('Reset'));
+    expect(screen.queryByText('Hello')).not.toBeInTheDocument();
+  });
+
+  test('toggles conversationIndex with Stop/Start button', () => {
+    render(<Robot />);
+    const stopButton = screen.getByText('Stop');
+    fireEvent.click(stopButton);
+    expect(screen.getByText('Start')).toBeInTheDocument();
+
+    fireEvent.click(screen.getByText('Start'));
+    expect(screen.getByText('Stop')).toBeInTheDocument();
+  });
+
+  test('closes EventSource on unmount', () => {
+    const { unmount } = render(<Robot />);
+    const eventSource = mockInstances[0];
+    const closeSpy = jest.spyOn(eventSource, 'close');
+
+    unmount();
+    expect(closeSpy).toHaveBeenCalled();
+    expect(eventSource.closed).toBe(true);
+  });
+});

test/pages/simpleProgram/SimpleProgram.tsx

@@ -0,0 +1,83 @@
+import { render, screen, fireEvent } from "@testing-library/react";
+import SimpleProgram from "../../../src/pages/SimpleProgram/SimpleProgram";
+import useProgramStore from "../../../src/utils/programStore";
+
+/**
+ * Helper to preload the program store before rendering.
+ */
+function loadProgram(phases: Record<string, unknown>[]) {
+  useProgramStore.getState().setProgramState({ phases });
+}
+
+describe("SimpleProgram", () => {
+  beforeEach(() => {
+    loadProgram([]);
+  });
+
+  test("shows empty state when no program is loaded", () => {
+    render(<SimpleProgram />);
+    expect(screen.getByText("No program loaded.")).toBeInTheDocument();
+  });
+
+  test("renders first phase content", () => {
+    loadProgram([
+      {
+        id: "phase-1",
+        norms: [{ id: "n1", norm: "Be polite" }],
+        goals: [{ id: "g1", description: "Finish task", achieved: true }],
+        triggers: [{ id: "t1", label: "Keyword trigger" }],
+      },
+    ]);
+
+    render(<SimpleProgram />);
+
+    expect(screen.getByText("Phase 1 / 1")).toBeInTheDocument();
+    expect(screen.getByText("Be polite")).toBeInTheDocument();
+    expect(screen.getByText("Finish task")).toBeInTheDocument();
+    expect(screen.getByText("Keyword trigger")).toBeInTheDocument();
+  });
+
+  test("allows navigating between phases", () => {
+    loadProgram([
+      {
+        id: "phase-1",
+        norms: [],
+        goals: [],
+        triggers: [],
+      },
+      {
+        id: "phase-2",
+        norms: [{ id: "n2", norm: "Be careful" }],
+        goals: [],
+        triggers: [],
+      },
+    ]);
+
+    render(<SimpleProgram />);
+
+    expect(screen.getByText("Phase 1 / 2")).toBeInTheDocument();
+
+    fireEvent.click(screen.getByText("Next ▶"));
+
+    expect(screen.getByText("Phase 2 / 2")).toBeInTheDocument();
+    expect(screen.getByText("Be careful")).toBeInTheDocument();
+  });
+
+  test("prev button is disabled on first phase", () => {
+    loadProgram([
+      { id: "phase-1", norms: [], goals: [], triggers: [] },
+    ]);
+
+    render(<SimpleProgram />);
+    expect(screen.getByText("◀ Prev")).toBeDisabled();
+  });
+
+  test("next button is disabled on last phase", () => {
+    loadProgram([
+      { id: "phase-1", norms: [], goals: [], triggers: [] },
+    ]);
+
+    render(<SimpleProgram />);
+    expect(screen.getByText("Next ▶")).toBeDisabled();
+  });
+});

test/pages/visProgPage/visualProgrammingUI/EditorUndoRedo.test.ts

@@ -0,0 +1,239 @@
+import {act} from '@testing-library/react';
+import useFlowStore from '../../../../src/pages/VisProgPage/visualProgrammingUI/VisProgStores.tsx';
+import { mockReactFlow } from '../../../setupFlowTests.ts';
+
+
+beforeAll(() => {
+  mockReactFlow();
+});
+
+describe("UndoRedo Middleware", () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
+
+  test("pushSnapshot adds a snapshot to past and clears future", () => {
+    const store = useFlowStore;
+
+    store.setState({
+      nodes: [{
+        id: 'A',
+        type: 'default',
+        position: {x: 0, y: 0},
+        data: {label: 'A'}
+      }],
+      edges: [],
+      past: [],
+      future: [{
+        nodes: [
+          {
+            id: 'A',
+            type: 'default',
+            position: {x: 0, y: 0},
+            data: {label: 'A'}
+          },
+        ],
+        edges: []
+      }],
+    });
+
+    act(() => {
+      store.getState().pushSnapshot();
+    })
+
+    const state = store.getState();
+    expect(state.past.length).toBe(1);
+    expect(state.past[0]).toEqual({
+      nodes: [{
+        id: 'A',
+        type: 'default',
+        position: {x: 0, y: 0},
+        data: {label: 'A'}
+      }],
+      edges: []
+    });
+    expect(state.future).toEqual([]);
+  });
+
+  test("pushSnapshot does nothing during batch action", () => {
+    const store = useFlowStore;
+
+    act(() => {
+      store.setState({ isBatchAction: true });
+      store.getState().pushSnapshot();
+    })
+
+    expect(store.getState().past.length).toBe(0);
+  });
+
+  test("undo restores last snapshot and pushes current snapshot to future", () => {
+    const store = useFlowStore;
+
+    // initial state
+    store.setState({
+      nodes: [{
+        id: 'A',
+        type: 'default',
+        position: {x: 0, y: 0},
+        data: {label: 'A'}
+      }],
+      edges: []
+    });
+
+    act(() => {
+      store.getState().pushSnapshot();
+
+      // modified state
+      store.setState({
+        nodes: [{
+          id: 'B',
+          type: 'default',
+          position: {x: 0, y: 0},
+          data: {label: 'B'}
+        }],
+        edges: []
+      });
+
+      store.getState().undo();
+    })
+
+    expect(store.getState().nodes).toEqual([{
+      id: 'A',
+      type: 'default',
+      position: {x: 0, y: 0},
+      data: {label: 'A'}
+    }]);
+    expect(store.getState().future.length).toBe(1);
+    expect(store.getState().future[0]).toEqual({
+      nodes: [{
+        id: 'B',
+        type: 'default',
+        position: {x: 0, y: 0},
+        data: {label: 'B'}
+      }],
+      edges: []
+    });
+  });
+
+  test("undo does nothing when past is empty", () => {
+    const store = useFlowStore;
+
+    store.setState({past: []});
+
+    act(() => { store.getState().undo(); });
+
+    expect(store.getState().nodes).toEqual([]);
+    expect(store.getState().future).toEqual([]);
+  });
+
+  test("redo restores last future snapshot and pushes current to past", () => {
+    const store = useFlowStore;
+
+    // initial
+    store.setState({
+      nodes: [{
+        id: 'A',
+        type: 'default',
+        position: {x: 0, y: 0},
+        data: {label: 'A'}
+      }],
+      edges: []
+    });
+
+    act(() => {
+      store.getState().pushSnapshot();
+      store.setState({
+        nodes: [{
+          id: 'B',
+          type: 'default',
+          position: {x: 0, y: 0},
+          data: {label: 'B'}
+        }],
+        edges: []
+      });
+
+
+      store.getState().undo();
+
+      // redo should restore node with id 'B'
+      store.getState().redo();
+    })
+
+    expect(store.getState().nodes).toEqual([{
+      id: 'B',
+      type: 'default',
+      position: {x: 0, y: 0},
+      data: {label: 'B'}
+    }]);
+    expect(store.getState().past.length).toBe(1); // snapshot A stored
+    expect(store.getState().past[0]).toEqual({
+      nodes: [{
+        id: 'A',
+        type: 'default',
+        position: {x: 0, y: 0},
+        data: {label: 'A'}
+      }],
+      edges: []
+    });
+  });
+
+  test("redo does nothing when future is empty", () => {
+    const store = useFlowStore;
+
+    store.setState({past: []});
+    act(() => { store.getState().redo(); });
+
+    expect(store.getState().nodes).toEqual([]);
+  });
+
+  test("beginBatchAction pushes snapshot and sets isBatchAction=true", () => {
+    const store = useFlowStore;
+
+    store.setState({
+      nodes: [{
+        id: 'A',
+        type: 'default',
+        position: {x: 0, y: 0},
+        data: {label: 'A'}
+      }],
+      edges: []
+    });
+
+    act(() => { store.getState().beginBatchAction(); });
+
+    expect(store.getState().isBatchAction).toBe(true);
+    expect(store.getState().past.length).toBe(1);
+  });
+
+  test("endBatchAction sets isBatchAction=false after timeout", () => {
+    const store = useFlowStore;
+
+    store.setState({ isBatchAction: true });
+    act(() => { store.getState().endBatchAction(); });
+
+    // isBatchAction should remain true before the timer has advanced
+    expect(store.getState().isBatchAction).toBe(true);
+
+    jest.advanceTimersByTime(10);
+
+    // it should now be set to false as the timer has advanced enough
+    expect(store.getState().isBatchAction).toBe(false);
+  });
+
+  test("multiple beginBatchAction calls clear the timeout", () => {
+    const store = useFlowStore;
+
+    act(() => {
+      store.getState().beginBatchAction();
+      store.getState().endBatchAction(); // starts timeout
+      store.getState().beginBatchAction(); // should clear previous timeout
+    });
+
+
+    jest.advanceTimersByTime(10);
+
+    // After advancing the timers, isBatchAction should still be true,
+    // as the timeout should have been cleared
+    expect(store.getState().isBatchAction).toBe(true);
+  });
+});

test/pages/visProgPage/visualProgrammingUI/VisProgStores.test.tsx

@@ -1,4 +1,7 @@
 import {act} from '@testing-library/react';
+import type {Connection, Edge, Node} from "@xyflow/react";
+import { NodeDisconnections } from "../../../../src/pages/VisProgPage/visualProgrammingUI/NodeRegistry.ts";
+import type {PhaseNodeData} from "../../../../src/pages/VisProgPage/visualProgrammingUI/nodes/PhaseNode.tsx";
 import useFlowStore from '../../../../src/pages/VisProgPage/visualProgrammingUI/VisProgStores.tsx';
 import { mockReactFlow } from '../../../setupFlowTests.ts';
 
@@ -6,18 +9,187 @@ beforeAll(() => {
   mockReactFlow();
 });
 
+// default state values for testing,
+const normNode: Node = {
+  id: 'norm-1',
+  type: 'norm',
+  position: { x: 0, y: 0 },
+  data: {
+    label: 'Test Norm',
+    droppable: true,
+    norm: 'Test',
+    hasReduce: true,
+  },
+};
+
+const phaseNode: Node = {
+  id: 'phase-1',
+  type: 'phase',
+  position: { x: 100, y: 0 },
+  data: {
+    label: 'Phase 1',
+    droppable: true,
+    children: ["norm-1"],
+    hasReduce: true,
+  },
+};
+
+const testEdge: Edge = {
+  id: 'xy-edge__1-2',
+  source: 'norm-1',
+  target: 'phase-1',
+  sourceHandle: null,
+  targetHandle: null,
+}
+
+const testStateReconnectEnd = {
+  nodes: [phaseNode, normNode],
+  edges: [testEdge],
+}
+
+const phaseNodeUnconnected = {
+  id: 'phase-2',
+  type: 'phase',
+  position: { x: 100, y: 0 },
+  data: {
+    label: 'Phase 2',
+    droppable: true,
+    children: [],
+    hasReduce: true,
+  },
+};
+
+const testConnection: Connection = {
+  source: 'norm-1',
+  target: 'phase-2',
+  sourceHandle: null,
+  targetHandle: null,
+}
+const testStateOnConnect = {
+  nodes: [phaseNodeUnconnected, normNode],
+  edges: [],
+}
+
 describe('FlowStore Functionality', () => {
   describe('Node changes', () => {
     // currently just using a single function from the ReactFlow library,
     // so testing would mean we are testing already tested behavior.
     // if implementation gets modified tests should be added for custom behavior
   });
+  describe('ReactFlow onEdgesDelete', () => {
+    test('Deleted edge is reflected in removed phaseNode child', () => {
+      const {onEdgesDelete} = useFlowStore.getState();
+
+      useFlowStore.setState({
+        nodes: [{
+          id: 'phase-1',
+          type: 'phase',
+          position: { x: 100, y: 0 },
+          data: {
+            label: 'Phase 1',
+            droppable: true,
+            children: ["norm-1"],
+            hasReduce: true,
+          },
+        },{
+          id: 'norm-1',
+          type: 'norm',
+          position: { x: 0, y: 0 },
+          data: {
+            label: 'Test Norm',
+            droppable: true,
+            norm: 'Test',
+            hasReduce: true,
+          },
+        }],
+        edges: [], // edges is empty as onEdgesDelete is triggered after the edges are deleted
+      })
+
+      act(() => {
+        onEdgesDelete([testEdge])
+      });
+
+      const outcome = useFlowStore.getState();
+      expect((outcome.nodes[0].data as PhaseNodeData).children.length).toBe(0);
+    })
+    test('Deleted edge is reflected in phaseNode,even if normNode was already deleted and caused edge removal', () => {
+      const { onEdgesDelete } = useFlowStore.getState();
+      useFlowStore.setState({
+        nodes: [{
+          id: 'phase-1',
+          type: 'phase',
+          position: { x: 100, y: 0 },
+          data: {
+            label: 'Phase 1',
+            droppable: true,
+            children: ["norm-1"],
+            hasReduce: true,
+          },
+        }],
+        edges: [], // edges is empty as onEdgesDelete is triggered after the edges are deleted
+      })
+
+      act(() => {
+        onEdgesDelete([testEdge]);
+      })
+
+      const outcome = useFlowStore.getState();
+      expect((outcome.nodes[0].data as PhaseNodeData).children.length).toBe(0);
+    })
+    test('edge removal resulting from deletion of targetNode calls only the connection function for the sourceNode', () => {
+      const { onEdgesDelete } = useFlowStore.getState();
+      useFlowStore.setState({
+        nodes: [{
+          id: 'norm-1',
+          type: 'norm',
+          position: { x: 0, y: 0 },
+          data: {
+            label: 'Test Norm',
+            droppable: true,
+            norm: 'Test',
+            hasReduce: true,
+          },
+        }],
+        edges: [], // edges is empty as onEdgesDelete is triggered after the edges are deleted
+      })
+
+      const targetDisconnectSpy = jest.spyOn(NodeDisconnections.Targets, 'phase');
+      const sourceDisconnectSpy = jest.spyOn(NodeDisconnections.Sources, 'norm');
+
+      act(() => {
+        onEdgesDelete([testEdge]);
+      })
+
+      expect(sourceDisconnectSpy).toHaveBeenCalledWith(normNode, 'phase-1');
+      expect(targetDisconnectSpy).not.toHaveBeenCalled();
+
+      sourceDisconnectSpy.mockRestore();
+      targetDisconnectSpy.mockRestore();
+    })
+  })
   describe('Edge changes', () => {
     // currently just using a single function from the ReactFlow library,
     // so testing would mean we are testing already tested behavior.
     // if implementation gets modified tests should be added for custom behavior
   })
   describe('ReactFlow onConnect', () => {
+    test('Adds connecting node to children of phaseNode', () => {
+      const {onConnect} = useFlowStore.getState();
+      useFlowStore.setState({
+        nodes: testStateOnConnect.nodes,
+        edges: testStateOnConnect.edges
+      })
+
+      act(() => {
+        onConnect(testConnection);
+      })
+
+      const outcome = useFlowStore.getState();
+
+      // phaseNode adds the normNode to its children
+      expect((outcome.nodes[0].data as PhaseNodeData).children).toEqual(['norm-1']);
+
+    })
     test('adds an edge when onConnect is triggered', () => {
       const {onConnect} = useFlowStore.getState();
 
@@ -39,6 +211,53 @@ describe('FlowStore Functionality', () => {
     });
   });
   describe('ReactFlow onReconnect', () => {
+    test('PhaseNodes correctly change their children', () => {
+      const {onReconnect} = useFlowStore.getState();
+      useFlowStore.setState({
+        nodes: [{
+          id: 'phase-1',
+          type: 'phase',
+          position: { x: 100, y: 0 },
+          data: {
+            label: 'Phase 1',
+            droppable: true,
+            children: ["norm-1"],
+            hasReduce: true,
+          },
+        },{
+          id: 'phase-2',
+          type: 'phase',
+          position: { x: 100, y: 0 },
+          data: {
+            label: 'Phase 2',
+            droppable: true,
+            children: [],
+            hasReduce: true,
+          },
+        },{
+          id: 'norm-1',
+          type: 'norm',
+          position: { x: 0, y: 0 },
+          data: {
+            label: 'Test Norm',
+            droppable: true,
+            norm: 'Test',
+            hasReduce: true,
+          },
+        }],
+        edges: [testEdge],
+      })
+
+      act(() => {
+        onReconnect(testEdge, testConnection);
+      })
+
+      const outcome = useFlowStore.getState();
+
+      // phaseNodes lose and gain children when norm node's connection is changed from phaseNode to PhaseNodeUnconnected
+      expect((outcome.nodes[1].data as PhaseNodeData).children).toEqual(['norm-1']);
+      expect((outcome.nodes[0].data as PhaseNodeData).children).toEqual([]);
+    })
     test('reconnects an existing edge when onReconnect is triggered', () => {
       const {onReconnect} = useFlowStore.getState();
       const oldEdge = {
@@ -93,36 +312,63 @@ describe('FlowStore Functionality', () => {
       );
     });
 
+
+
     test('successfully removes edge if no successful reconnect occurred', () => {
       const {onReconnectEnd} = useFlowStore.getState();
-      useFlowStore.setState({edgeReconnectSuccessful: false});
+      useFlowStore.setState({
+        edgeReconnectSuccessful: false,
+        edges: testStateReconnectEnd.edges,
+        nodes: testStateReconnectEnd.nodes
+      });
 
       act(() => {
-        onReconnectEnd(null, {id: 'xy-edge__A-B'});
+        onReconnectEnd(null, testEdge);
       });
 
       const updatedState = useFlowStore.getState();
       expect(updatedState.edgeReconnectSuccessful).toBe(true);
       expect(updatedState.edges).toHaveLength(0);
+      expect(updatedState.nodes[0].data.children).toEqual([]);
     });
 
     test('does not remove reconnecting edge if successful reconnect occurred', () => {
       const {onReconnectEnd} = useFlowStore.getState();
+      useFlowStore.setState({
+        edgeReconnectSuccessful: true,
+        edges: [testEdge],
+        nodes: [{
+          id: 'phase-1',
+          type: 'phase',
+          position: { x: 100, y: 0 },
+          data: {
+            label: 'Phase 1',
+            droppable: true,
+            children: ["norm-1"],
+            hasReduce: true,
+          },
+        },{
+          id: 'norm-1',
+          type: 'norm',
+          position: { x: 0, y: 0 },
+          data: {
+            label: 'Test Norm',
+            droppable: true,
+            norm: 'Test',
+            hasReduce: true,
+          },
+        }]
+      });
 
       act(() => {
-        onReconnectEnd(null, {id: 'xy-edge__A-B'});
+        onReconnectEnd(null, testEdge);
       });
 
       const updatedState = useFlowStore.getState();
       expect(updatedState.edgeReconnectSuccessful).toBe(true);
       expect(updatedState.edges).toHaveLength(1);
-      expect(updatedState.edges).toMatchObject([
-        {
-          id: 'xy-edge__A-B',
-          source: 'A',
-          target: 'B'
-        }]
-      );
+      expect(updatedState.edges).toMatchObject([testEdge]);
+      expect(updatedState.nodes[0].data.children).toEqual(["norm-1"]);
     });
   });
   describe('ReactFlow deleteNode', () => {

test/pages/visProgPage/visualProgrammingUI/components/DragDropSidebar.test.tsx

@@ -1,5 +1,106 @@
-describe('Not implemented', () => {
-  test('nothing yet', () => {
-    expect(true)
-  });
+import { getByTestId, render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import useFlowStore from '../../../../../src/pages/VisProgPage/visualProgrammingUI/VisProgStores';
+import VisProgPage from '../../../../../src/pages/VisProgPage/VisProg';
+
+
+
+class ResizeObserver {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+}
+window.ResizeObserver = ResizeObserver;
+
+jest.mock('@neodrag/react', () => ({
+  useDraggable: (ref: React.RefObject<HTMLElement>, options: any) => {
+    // We access the real useEffect from React to attach a listener
+    // This bridges the gap between the test's userEvent and the component's logic
+    const { useEffect } = jest.requireActual('react');
+    
+    useEffect(() => {
+      const element = ref.current;
+      if (!element) return;
+
+      // When the test fires a "pointerup" (end of click/drag), 
+      // we manually trigger the library's onDragEnd callback.
+      const handlePointerUp = (e: PointerEvent) => {
+        if (options.onDragEnd) {
+          options.onDragEnd({ event: e });
+        }
+      };
+
+      element.addEventListener('pointerup', handlePointerUp as EventListener);
+      return () => {
+        element.removeEventListener('pointerup', handlePointerUp as EventListener);
+      };
+    }, [ref, options]);
+  },
+}));
+
+// We will mock @xyflow/react so we control screenToFlowPosition
+jest.mock('@xyflow/react', () => {
+  const actual = jest.requireActual('@xyflow/react');
+  return {
+    ...actual,
+    useReactFlow: () => ({
+      screenToFlowPosition: ({ x, y }: { x: number; y: number }) => ({
+        x: x - 100,
+        y: y - 100,
+      }),
+    }),
+  };
 });
+
+describe("Drag & drop node creation", () => {
+
+  test("drops a phase node inside the canvas and adds it with transformed position", async () => {
+    const user = userEvent.setup();
+
+    const { container } = render(<VisProgPage />);
+
+    // --- Mock ReactFlow bounding box ---
+    // Your DndToolbar checks these values:
+    const flowEl = container.querySelector('.react-flow');
+    jest.spyOn(flowEl!, 'getBoundingClientRect').mockReturnValue({
+      left: 0,
+      right: 800,
+      top: 0,
+      bottom: 600,
+      width: 800,
+      height: 600,
+      x: 0,
+      y: 0,
+      toJSON: () => {},
+    });
+
+  
+    const phaseLabel = getByTestId(container, 'draggable-phase')
+  
+    await user.pointer([
+      // touch the screen at element1
+      {keys: '[TouchA>]', target: phaseLabel},
+      // move the touch pointer to element2
+      {pointerName: 'TouchA', coords: {x: 300, y: 250}},
+      // release the touch pointer at the last position (element2)
+      {keys: '[/TouchA]'},
+    ]);
+
+    // Read the Zustand store
+    const { nodes } = useFlowStore.getState();
+
+    // --- Assertions ---
+    expect(nodes.length).toBe(1);
+
+    const node = nodes[0];
+
+    expect(node.type).toBe("phase");
+    expect(node.id).toBe("phase-1");
+
+    // screenToFlowPosition was mocked to subtract 100
+    expect(node.position).toEqual({
+      x: 200,
+      y: 150,
+    });
+  });
+});

test/pages/visProgPage/visualProgrammingUI/components/ScrollIntoView.test.tsx

@@ -0,0 +1,14 @@
+import { render } from '@testing-library/react';
+import { act } from '@testing-library/react';
+import ScrollIntoView from '../../../../../src/components/ScrollIntoView';
+
+test('scrolls the element into view on render', () => {
+  const scrollMock = jest.fn();
+  HTMLElement.prototype.scrollIntoView = scrollMock;
+
+  act(() => {
+    render(<ScrollIntoView />);
+  });
+
+  expect(scrollMock).toHaveBeenCalledWith({ behavior: 'smooth' });
+});

test/pages/visProgPage/visualProgrammingUI/nodes/NormNode.test.tsx

@@ -0,0 +1,798 @@
+import { describe, it, beforeEach } from '@jest/globals';
+import { screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { renderWithProviders } from '../../../../test-utils/test-utils.tsx';
+import NormNode, {
+  NormReduce,
+  type NormNodeData,
+  NormConnectionSource, NormConnectionTarget
+} from '../../../../../src/pages/VisProgPage/visualProgrammingUI/nodes/NormNode';
+import useFlowStore from '../../../../../src/pages/VisProgPage/visualProgrammingUI/VisProgStores';
+import type { Node } from '@xyflow/react';
+import '@testing-library/jest-dom'
+
+
+
+describe('NormNode', () => {
+  let user: ReturnType<typeof userEvent.setup>;
+
+  beforeEach(() => {
+    user = userEvent.setup();
+  });
+
+  describe('Rendering', () => {
+    it('should render the norm node with default data', () => {
+      const mockNode: Node = {
+        id: 'norm-1',
+        type: 'norm',
+        position: { x: 0, y: 0 },
+        data: {
+          label: 'Test Norm',
+          droppable: true,
+          norm: '',
+          hasReduce: true,
+        },
+      };
+
+      renderWithProviders(
+        <NormNode
+          id={mockNode.id}
+          type={mockNode.type as string}
+          data={mockNode.data as any}
+          selected={false}
+          isConnectable={true}
+          zIndex={0}
+          dragging={false}
+          selectable={true}
+          deletable={true}
+          draggable={true}
+          positionAbsoluteX={0}
+          positionAbsoluteY={0}
+        />
+      );
+
+      expect(screen.getByPlaceholderText('Pepper should ...')).toBeInTheDocument();
+    });
+
+    it('should render with pre-populated norm text', () => {
+      const mockNode: Node = {
+        id: 'norm-1',
+        type: 'norm',
+        position: { x: 0, y: 0 },
+        data: {
+          label: 'Test Norm',
+          droppable: true,
+          norm: 'Be respectful to humans',
+          hasReduce: true,
+        },
+      };
+
+      renderWithProviders(
+        <NormNode
+          id={mockNode.id}
+          type={mockNode.type as string}
+          data={mockNode.data as any}
+          selected={false}
+          isConnectable={true}
+          zIndex={0}
+          dragging={false}
+          selectable={true}
+          deletable={true}
+          draggable={true}
+          positionAbsoluteX={0}
+          positionAbsoluteY={0}
+        />
+      );
+
+      const input = screen.getByDisplayValue('Be respectful to humans');
+      expect(input).toBeInTheDocument();
+    });
+
+    it('should render with selected state', () => {
+      const mockNode: Node<NormNodeData> = {
+        id: 'norm-1',
+        type: 'norm',
+        position: { x: 0, y: 0 },
+        data: {
+          label: 'Test Norm',
+          droppable: true,
+          norm: '',
+          hasReduce: true,
+          critical: false
+        },
+      };
+
+      renderWithProviders( 
+        <NormNode
+          id={mockNode.id}
+          type={mockNode.type as string}
+          data={mockNode.data as any}
+          selected={false}
+          isConnectable={true}
+          zIndex={0}
+          dragging={false}
+          selectable={true}
+          deletable={true}
+          draggable={true}
+          positionAbsoluteX={0}
+          positionAbsoluteY={0}
+        />
+      );
+
+      const norm = screen.getByText("Norm :")
+      expect(norm).toBeInTheDocument();
+    });
+
+    it('should render with dragging state', () => {
+      const mockNode: Node = {
+        id: 'norm-1',
+        type: 'norm',
+        position: { x: 0, y: 0 },
+        data: {
+          label: 'Test Norm',
+          droppable: true,
+          norm: 'Dragged norm',
+          hasReduce: true,
+        },
+      };
+
+      renderWithProviders(
+        <NormNode
+          id={mockNode.id}
+          type={mockNode.type as string}
+          data={mockNode.data as any}
+          selected={false}
+          isConnectable={true}
+          zIndex={0}
+          dragging={false}
+          selectable={true}
+          deletable={true}
+          draggable={true}
+          positionAbsoluteX={0}
+          positionAbsoluteY={0}
+        />
+      );
+
+      const input = screen.getByDisplayValue('Dragged norm');
+      expect(input).toBeInTheDocument();
+    });
+  });
+
+  describe('User Interactions', () => {
+    it('should update norm text when user types in the input field', async () => {
+      const mockNode: Node = {
+        id: 'norm-1',
+        type: 'norm',
+        position: { x: 0, y: 0 },
+        data: {
+          label: 'Test Norm',
+          droppable: true,
+          norm: '',
+          hasReduce: true,
+        },
+      };
+
+      useFlowStore.setState({
+        nodes: [mockNode],
+        edges: [],
+      });
+
+      renderWithProviders(
+        <NormNode
+          id={mockNode.id}
+          type={mockNode.type as string}
+          data={mockNode.data as any}
+          selected={false}
+          isConnectable={true}
+          zIndex={0}
+          dragging={false}
+          selectable={true}
+          deletable={true}
+          draggable={true}
+          positionAbsoluteX={0}
+          positionAbsoluteY={0}
+        />
+      );
+
+      const input = screen.getByPlaceholderText('Pepper should ...');
+      await user.type(input, 'Be polite to guests{enter}');
+
+      await waitFor(() => {
+        const state = useFlowStore.getState();
+        const updatedNode = state.nodes.find(n => n.id === 'norm-1');
+        expect(updatedNode?.data.norm).toBe('Be polite to guests');
+      });
+    });
+
+    it('should handle clearing the norm text', async () => {
+      const mockNode: Node = {
+        id: 'norm-1',
+        type: 'norm',
+        position: { x: 0, y: 0 },
+        data: {
+          label: 'Test Norm',
+          droppable: true,
+          norm: 'Initial norm text',
+          hasReduce: true,
+        },
+      };
+
+      useFlowStore.setState({
+        nodes: [mockNode],
+        edges: [],
+      });
+
+      renderWithProviders(
+        <NormNode
+          id={mockNode.id}
+          type={mockNode.type as string}
+          data={mockNode.data as any}
+          selected={false}
+          isConnectable={true}
+          zIndex={0}
+          dragging={false}
+          selectable={true}
+          deletable={true}
+          draggable={true}
+          positionAbsoluteX={0}
+          positionAbsoluteY={0}
+        />
+      );
+
+      const input = screen.getByDisplayValue('Initial norm text') as HTMLInputElement;
+
+      // clearing the norm text is the same as just deleting all characters one by one
+      // TODO: FIGURE OUT A MORE EFFICIENT WAY, I"M SORRY, user.clear() just doesn't work:/
+      for (let a = 0; a < 'Initial norm text'.length; a++){
+        await user.type(input, '{backspace}')
+      }
+      await user.type(input,'{enter}')
+
+      await waitFor(() => {
+        const state = useFlowStore.getState();
+        const updatedNode = state.nodes.find(n => n.id === 'norm-1');
+        expect(updatedNode?.data.norm).toBe('');
+      });
+    });
+
+    it('should update norm text multiple times', async () => {
+      const mockNode: Node = {
+        id: 'norm-1',
+        type: 'norm',
+        position: { x: 0, y: 0 },
+        data: {
+          label: 'Test Norm',
+          droppable: true,
+          norm: '',
+          hasReduce: true,
+        },
+      };
+
+      useFlowStore.setState({
+        nodes: [mockNode],
+        edges: [],
+      });
+
+      renderWithProviders(
+        <NormNode
+          id={mockNode.id}
+          type={mockNode.type as string}
+          data={mockNode.data as any}
+          selected={false}
+          isConnectable={true}
+          zIndex={0}
+          dragging={false}
+          selectable={true}
+          deletable={true}
+          draggable={true}
+          positionAbsoluteX={0}
+          positionAbsoluteY={0}
+        />
+      );
+
+      const input = screen.getByPlaceholderText('Pepper should ...');
+      await user.type(input, 'First norm{enter}');
+      await waitFor(() => {
+        expect(useFlowStore.getState().nodes[0].data.norm).toBe('First norm');
+      });
+
+
+      // TODO: FIGURE OUT A MORE EFFICIENT WAY, I"M SORRY, user.clear() just doesn't work:/
+      for (let a = 0; a < 'First norm'.length; a++){
+        await user.type(input, '{backspace}')
+      }
+
+      await user.type(input, 'Second norm{enter}');
+      await waitFor(() => {
+        expect(useFlowStore.getState().nodes[0].data.norm).toBe('Second norm');
+      });
+    });
+
+    it('should handle special characters in norm text', async () => {
+      const mockNode: Node = {
+        id: 'norm-1',
+        type: 'norm',
+        position: { x: 0, y: 0 },
+        data: {
+          label: 'Test Norm',
+          droppable: true,
+          norm: '',
+          hasReduce: true,
+        },
+      };
+
+      useFlowStore.setState({
+        nodes: [mockNode],
+        edges: [],
+      });
+
+      renderWithProviders(
+        <NormNode
+          id={mockNode.id}
+          type={mockNode.type as string}
+          data={mockNode.data as any}
+          selected={false}
+          isConnectable={true}
+          zIndex={0}
+          dragging={false}
+          selectable={true}
+          deletable={true}
+          draggable={true}
+          positionAbsoluteX={0}
+          positionAbsoluteY={0}
+        />
+      );
+
+      const input = screen.getByPlaceholderText('Pepper should ...');
+      await user.type(input, "Don't harm & be nice!{enter}" );
+
+      await waitFor(() => {
+        expect(useFlowStore.getState().nodes[0].data.norm).toBe("Don't harm & be nice!");
+      });
+    });
+
+    it('should handle long norm text', async () => {
+      const longText = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.';
+      const mockNode: Node = {
+        id: 'norm-1',
+        type: 'norm',
+        position: { x: 0, y: 0 },
+        data: {
+          label: 'Test Norm',
+          droppable: true,
+          norm: '',
+          hasReduce: true,
+        },
+      };
+
+      useFlowStore.setState({
+        nodes: [mockNode],
+        edges: [],
+      });
+
+      renderWithProviders(
+        <NormNode
+          id={mockNode.id}
+          type={mockNode.type as string}
+          data={mockNode.data as any}
+          selected={false}
+          isConnectable={true}
+          zIndex={0}
+          dragging={false}
+          selectable={true}
+          deletable={true}
+          draggable={true}
+          positionAbsoluteX={0}
+          positionAbsoluteY={0}
+        />
+      );
+
+      const input = screen.getByPlaceholderText('Pepper should ...');
+      await user.type(input, longText);
+      await user.type(input, "{enter}")
+
+      await waitFor(() => {
+        expect(useFlowStore.getState().nodes[0].data.norm).toBe(longText);
+      });
+    });
+  });
+
+  describe('NormReduce Function', () => {
+    it('should reduce a norm node to its essential data', () => {
+      const normNode: Node = {
+        id: 'norm-1',
+        type: 'norm',
+        position: { x: 0, y: 0 },
+        data: {
+          label: 'Safety Norm',
+          droppable: true,
+          norm: 'Never harm humans',
+          hasReduce: true,
+        },
+      };
+
+      const allNodes: Node[] = [normNode];
+      const result = NormReduce(normNode, allNodes);
+
+      expect(result).toEqual({
+        id: 'norm-1',
+        label: 'Safety Norm',
+        norm: 'Never harm humans',
+      });
+    });
+
+    it('should reduce multiple norm nodes independently', () => {
+      const norm1: Node = {
+        id: 'norm-1',
+        type: 'norm',
+        position: { x: 0, y: 0 },
+        data: {
+          label: 'Norm 1',
+          droppable: true,
+          norm: 'Be helpful',
+          hasReduce: true,
+        },
+      };
+
+      const norm2: Node = {
+        id: 'norm-2',
+        type: 'norm',
+        position: { x: 100, y: 0 },
+        data: {
+          label: 'Norm 2',
+          droppable: true,
+          norm: 'Be honest',
+          hasReduce: true,
+        },
+      };
+
+      const allNodes: Node[] = [norm1, norm2];
+
+      const result1 = NormReduce(norm1, allNodes);
+      const result2 = NormReduce(norm2, allNodes);
+
+      expect(result1.id).toBe('norm-1');
+      expect(result1.norm).toBe('Be helpful');
+      expect(result2.id).toBe('norm-2');
+      expect(result2.norm).toBe('Be honest');
+    });
+
+    it('should handle empty norm text', () => {
+      const normNode: Node = {
+        id: 'norm-1',
+        type: 'norm',
+        position: { x: 0, y: 0 },
+        data: {
+          label: 'Empty Norm',
+          droppable: true,
+          norm: '',
+          hasReduce: true,
+        },
+      };
+
+      const result = NormReduce(normNode, [normNode]);
+
+      expect(result.norm).toBe('');
+      expect(result.id).toBe('norm-1');
+    });
+
+    it('should preserve node label in reduction', () => {
+      const normNode: Node = {
+        id: 'norm-1',
+        type: 'norm',
+        position: { x: 0, y: 0 },
+        data: {
+          label: 'Custom Label',
+          droppable: false,
+          norm: 'Test norm',
+          hasReduce: false,
+        },
+      };
+
+      const result = NormReduce(normNode, [normNode]);
+
+      expect(result.label).toBe('Custom Label');
+    });
+  });
+
+  describe('NormConnects Function', () => {
+    it('should handle connection without errors', () => {
+      const normNode: Node = {
+        id: 'norm-1',
+        type: 'norm',
+        position: { x: 0, y: 0 },
+        data: {
+          label: 'Test Norm',
+          droppable: true,
+          norm: 'Test',
+          hasReduce: true,
+        },
+      };
+
+      const phaseNode: Node = {
+        id: 'phase-1',
+        type: 'phase',
+        position: { x: 100, y: 0 },
+        data: {
+          label: 'Phase 1',
+          droppable: true,
+          children: [],
+          hasReduce: true,
+        },
+      };
+
+      expect(() => {
+        NormConnectionSource(normNode, phaseNode.id);
+      }).not.toThrow();
+    });
+
+    it('should handle connection when norm is target', () => {
+      const normNode: Node = {
+        id: 'norm-1',
+        type: 'norm',
+        position: { x: 0, y: 0 },
+        data: {
+          label: 'Test Norm',
+          droppable: true,
+          norm: 'Test',
+          hasReduce: true,
+        },
+      };
+
+      const phaseNode: Node = {
+        id: 'phase-1',
+        type: 'phase',
+        position: { x: 100, y: 0 },
+        data: {
+          label: 'Phase 1',
+          droppable: true,
+          children: [],
+          hasReduce: true,
+        },
+      };
+
+      expect(() => {
+        NormConnectionTarget(normNode, phaseNode.id);
+      }).not.toThrow();
+    });
+
+    it('should handle self-connection', () => {
+      const normNode: Node = {
+        id: 'norm-1',
+        type: 'norm',
+        position: { x: 0, y: 0 },
+        data: {
+          label: 'Test Norm',
+          droppable: true,
+          norm: 'Test',
+          hasReduce: true,
+        },
+      };
+
+      expect(() => {
+        NormConnectionTarget(normNode, normNode.id);
+        NormConnectionSource(normNode, normNode.id);
+      }).not.toThrow();
+    });
+  });
+
+  describe('Integration with Store', () => {
+    it('should properly update the store when editing norm text', async () => {
+      const mockNode: Node = {
+        id: 'norm-1',
+        type: 'norm',
+        position: { x: 0, y: 0 },
+        data: {
+          label: 'Test Norm',
+          droppable: true,
+          norm: '',
+          hasReduce: true,
+        },
+      };
+
+      useFlowStore.setState({
+        nodes: [mockNode],
+        edges: [],
+      });
+
+      renderWithProviders(
+        <NormNode
+          id={mockNode.id}
+          type={mockNode.type as string}
+          data={mockNode.data as any}
+          selected={false}
+          isConnectable={true}
+          zIndex={0}
+          dragging={false}
+          selectable={true}
+          deletable={true}
+          draggable={true}
+          positionAbsoluteX={0}
+          positionAbsoluteY={0}
+        />
+      );
+
+      const input = screen.getByPlaceholderText('Pepper should ...');
+
+      // TODO: FIGURE OUT A MORE EFFICIENT WAY, I"M SORRY, user.clear() just doesn't work:/
+      for (let a = 0; a < 20; a++){
+        await user.type(input, '{backspace}')
+      }
+      await user.type(input, 'New norm value{enter}');
+
+      await waitFor(() => {
+        const state = useFlowStore.getState();
+        expect(state.nodes).toHaveLength(1);
+        expect(state.nodes[0].id).toBe('norm-1');
+        expect(state.nodes[0].data.norm).toBe('New norm value');
+      });
+    });
+
+    it('should properly update the store when editing critical checkbox', async () => {
+      const mockNode: Node = {
+        id: 'norm-1',
+        type: 'norm',
+        position: { x: 0, y: 0 },
+        data: {
+          label: 'Test Norm',
+          droppable: true,
+          norm: '',
+          hasReduce: true,
+          critical: false,
+        },
+      };
+
+      useFlowStore.setState({
+        nodes: [mockNode],
+        edges: [],
+      });
+
+      renderWithProviders(
+        <NormNode
+          id={mockNode.id}
+          type={mockNode.type as string}
+          data={mockNode.data as any}
+          selected={false}
+          isConnectable={true}
+          zIndex={0}
+          dragging={false}
+          selectable={true}
+          deletable={true}
+          draggable={true}
+          positionAbsoluteX={0}
+          positionAbsoluteY={0}
+        />
+      );
+
+      const checkbox = screen.getByLabelText('Critical:');
+      await user.click(checkbox);
+
+      await waitFor(() => {
+        const state = useFlowStore.getState();
+        expect(state.nodes).toHaveLength(1);
+        expect(state.nodes[0].id).toBe('norm-1');
+        expect(state.nodes[0].data.norm).toBe('');
+        expect(state.nodes[0].data.critical).toBe(true);
+      });
+    });
+
+    it('should not affect other nodes when updating one norm node', async () => {
+      const norm1: Node = {
+        id: 'norm-1',
+        type: 'norm',
+        position: { x: 0, y: 0 },
+        data: {
+          label: 'Norm 1',
+          droppable: true,
+          norm: 'Original norm 1',
+          hasReduce: true,
+        },
+      };
+
+      const norm2: Node = {
+        id: 'norm-2',
+        type: 'norm',
+        position: { x: 100, y: 0 },
+        data: {
+          label: 'Norm 2',
+          droppable: true,
+          norm: 'Original norm 2',
+          hasReduce: true,
+        },
+      };
+
+      useFlowStore.setState({
+        nodes: [norm1, norm2],
+        edges: [],
+      });
+
+      renderWithProviders(
+        <NormNode
+          id={norm1.id}
+          type={norm1.type as string}
+          data={norm1.data as any}
+          selected={false}
+          isConnectable={true}
+          zIndex={0}
+          dragging={false}
+          selectable={true}
+          deletable={true}
+          draggable={true}
+          positionAbsoluteX={0}
+          positionAbsoluteY={0}
+        />
+      );
+
+      const input = screen.getByDisplayValue('Original norm 1') as HTMLInputElement;
+
+
+      // TODO: FIGURE OUT A MORE EFFICIENT WAY, I"M SORRY, user.clear() just doesn't work:/
+      for (let a = 0; a < 20; a++){
+        await user.type(input, '{backspace}')
+      }
+      await user.type(input, 'Updated norm 1{enter}');
+
+      await waitFor(() => {
+        const state = useFlowStore.getState();
+        const updatedNorm1 = state.nodes.find(n => n.id === 'norm-1');
+        const unchangedNorm2 = state.nodes.find(n => n.id === 'norm-2');
+
+        expect(updatedNorm1?.data.norm).toBe('Updated norm 1');
+        expect(unchangedNorm2?.data.norm).toBe('Original norm 2');
+      });
+    });
+
+    it('should maintain data consistency with multiple rapid updates', async () => {
+      const mockNode: Node = {
+        id: 'norm-1',
+        type: 'norm',
+        position: { x: 0, y: 0 },
+        data: {
+          label: 'Test Norm',
+          droppable: true,
+          norm: 'haa haa fuyaaah - link',
+          hasReduce: true,
+        },
+      };
+
+      useFlowStore.setState({
+        nodes: [mockNode],
+        edges: [],
+      });
+
+      renderWithProviders(
+        <NormNode
+          id={mockNode.id}
+          type={mockNode.type as string}
+          data={mockNode.data as any}
+          selected={false}
+          isConnectable={true}
+          zIndex={0}
+          dragging={false}
+          selectable={true}
+          deletable={true}
+          draggable={true}
+          positionAbsoluteX={0}
+          positionAbsoluteY={0}
+        />
+      );
+
+      const input = screen.getByPlaceholderText('Pepper should ...');
+
+      await user.type(input, 'a');
+      await waitFor(() => {
+        expect(useFlowStore.getState().nodes[0].data.norm).toBe('haa haa fuyaaah - link');
+      });
+
+      await user.type(input, 'b');
+      await waitFor(() => {
+        expect(useFlowStore.getState().nodes[0].data.norm).toBe('haa haa fuyaaah - link');
+      });
+
+      await user.type(input, 'c');
+      await waitFor(() => {
+        expect(useFlowStore.getState().nodes[0].data.norm).toBe('haa haa fuyaaah - link');
+      }, { timeout: 3000 });
+    });
+  });
+});

test/pages/visProgPage/visualProgrammingUI/nodes/PhaseNode.test.tsx

@@ -0,0 +1,101 @@
+import useFlowStore from '../../../../../src/pages/VisProgPage/visualProgrammingUI/VisProgStores';
+import type { PhaseNodeData } from "../../../../../src/pages/VisProgPage/visualProgrammingUI/nodes/PhaseNode";
+import { getByTestId, render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import VisProgPage from '../../../../../src/pages/VisProgPage/VisProg';
+
+
+class ResizeObserver {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+}
+window.ResizeObserver = ResizeObserver;
+
+jest.mock('@neodrag/react', () => ({
+  useDraggable: (ref: React.RefObject<HTMLElement>, options: any) => {
+    // We access the real useEffect from React to attach a listener
+    // This bridges the gap between the test's userEvent and the component's logic
+    const { useEffect } = jest.requireActual('react');
+    
+    useEffect(() => {
+      const element = ref.current;
+      if (!element) return;
+
+      // When the test fires a "pointerup" (end of click/drag), 
+      // we manually trigger the library's onDragEnd callback.
+      const handlePointerUp = (e: PointerEvent) => {
+        if (options.onDragEnd) {
+          options.onDragEnd({ event: e });
+        }
+      };
+
+      element.addEventListener('pointerup', handlePointerUp as EventListener);
+      return () => {
+        element.removeEventListener('pointerup', handlePointerUp as EventListener);
+      };
+    }, [ref, options]);
+  },
+}));
+
+describe('PhaseNode', () => {
+  it('each created phase gets its own children array, not the same reference ', async () => {
+    const user = userEvent.setup();
+
+    const { container } = render(<VisProgPage />);
+
+    // --- Mock ReactFlow bounding box ---
+    // Your DndToolbar checks these values:
+    const flowEl = container.querySelector('.react-flow');
+    jest.spyOn(flowEl!, 'getBoundingClientRect').mockReturnValue({
+      left: 0,
+      right: 800,
+      top: 0,
+      bottom: 600,
+      width: 800,
+      height: 600,
+      x: 0,
+      y: 0,
+      toJSON: () => {},
+    });
+    
+    // Find the draggable norm node in the toolbar
+    const phaseButton = getByTestId(container, 'draggable-phase')
+    
+    // Simulate dropping phase down in graph (twice)
+    for (let i = 0; i < 2; i++) {
+    await user.pointer([
+      // touch the screen at element1
+      {keys: '[TouchA>]', target: phaseButton},
+      // move the touch pointer to element2
+      {pointerName: 'TouchA', coords: {x: 300, y: 250}},
+      // release the touch pointer at the last position (element2)
+      {keys: '[/TouchA]'},
+    ]);
+    }
+
+    // Find nodes
+    const nodes = useFlowStore.getState().nodes;
+    const p1 = nodes.find((x) => x.id === 'phase-1')!;
+    const p2 = nodes.find((x) => x.id === 'phase-2')!;
+
+    // expect same value, not same reference
+    expect(p1.data.children).not.toBe(p2.data.children);
+    expect(p1.data.children).toEqual(p2.data.children);
+
+    // Add nodes to children
+    const p1_data = p1.data as PhaseNodeData;
+    const p2_data = p2.data as PhaseNodeData;
+    p1_data.children.push("norm-1");
+    p2_data.children.push("norm-2");
+    p2_data.children.push("goal-1");
+
+    // check that after adding, its not the same reference, and its not the same children
+    expect(p1.data.children).not.toBe(p2.data.children);
+    expect(p1.data.children).not.toEqual(p2.data.children);
+    
+    // expect them to have the correct length.
+    expect(p1_data.children.length == 1);
+    expect(p2_data.children.length == 2);
+  });
+});

test/pages/visProgPage/visualProgrammingUI/nodes/StartNode.test.tsx

@@ -0,0 +1,101 @@
+import { describe, it } from '@jest/globals';
+import '@testing-library/jest-dom';
+import { screen } from '@testing-library/react';
+import type { Node } from '@xyflow/react';
+import { renderWithProviders } from '../../../../test-utils/test-utils.tsx';
+import StartNode, {
+  StartConnectionSource, StartConnectionTarget,
+  StartReduce
+} from '../../../../../src/pages/VisProgPage/visualProgrammingUI/nodes/StartNode';
+
+
+describe('StartNode', () => {
+
+
+  describe('Rendering', () => {
+    it('renders the StartNode correctly', () => {
+      const mockNode: Node = {
+        id: 'start-1',
+        type: 'start', // TypeScript now knows this is a string
+        position: { x: 0, y: 0 },
+        data: {
+          label: 'Start Node',
+          droppable: false,
+          hasReduce: true,
+        },
+      };
+
+      renderWithProviders(
+        <StartNode
+            id={mockNode.id}
+            type={mockNode.type!} // <--- fix here
+            data={mockNode.data as any}
+            selected={false}
+            isConnectable={true}
+            zIndex={0}
+            dragging={false}
+            selectable={true}
+            deletable={false}
+            draggable={true}
+            positionAbsoluteX={0}
+            positionAbsoluteY={0}
+        />
+        );
+
+
+        expect(screen.getByText('Start')).toBeInTheDocument();
+
+        // The handle should exist in the DOM
+        expect(document.querySelector('[data-handleid="source"]')).toBeInTheDocument();
+
+    });
+  });
+
+  describe('StartReduce Function', () => {
+    it('reduces the StartNode to its minimal structure', () => {
+      const mockNode: Node = {
+        id: 'start-1',
+        type: 'start',
+        position: { x: 0, y: 0 },
+        data: {
+          label: 'Start Node',
+          droppable: false,
+          hasReduce: true,
+        },
+      };
+
+      const result = StartReduce(mockNode, [mockNode]);
+      expect(result).toEqual({ id: 'start-1' });
+    });
+  });
+
+  describe('StartConnects Function', () => {
+    it('handles connections without throwing', () => {
+      const startNode: Node = {
+        id: 'start-1',
+        type: 'start',
+        position: { x: 0, y: 0 },
+        data: {
+          label: 'Start Node',
+          droppable: false,
+          hasReduce: true,
+        },
+      };
+
+      const otherNode: Node = {
+        id: 'norm-1',
+        type: 'norm',
+        position: { x: 100, y: 0 },
+        data: {
+          label: 'Norm Node',
+          droppable: true,
+          norm: 'test',
+          hasReduce: true,
+        },
+      };
+
+      expect(() => StartConnectionSource(startNode, otherNode.id)).not.toThrow();
+      expect(() => StartConnectionTarget(startNode, otherNode.id)).not.toThrow();
+    });
+  });
+});

test/pages/visProgPage/visualProgrammingUI/nodes/TriggerNode.test.tsx

@@ -0,0 +1,251 @@
+import { describe, it, beforeEach } from '@jest/globals';
+import { screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { renderWithProviders } from '../../../../test-utils/test-utils.tsx';
+import TriggerNode, {
+  TriggerReduce,
+  TriggerNodeCanConnect,
+  type TriggerNodeData,
+  TriggerConnectionSource, TriggerConnectionTarget
+} from '../../../../../src/pages/VisProgPage/visualProgrammingUI/nodes/TriggerNode';
+import useFlowStore from '../../../../../src/pages/VisProgPage/visualProgrammingUI/VisProgStores';
+import type { Node } from '@xyflow/react';
+import '@testing-library/jest-dom';
+
+describe('TriggerNode', () => {
+  let user: ReturnType<typeof userEvent.setup>;
+
+  beforeEach(() => {
+    user = userEvent.setup();
+  });
+
+  describe('Rendering', () => {
+    it('should render TriggerNode with keywords type', () => {
+      const mockNode: Node<TriggerNodeData> = {
+        id: 'trigger-1',
+        type: 'trigger',
+        position: { x: 0, y: 0 },
+        data: {
+          label: 'Keyword Trigger',
+          droppable: true,
+          triggerType: 'keywords',
+          triggers: [],
+          hasReduce: true,
+        },
+      };
+
+      renderWithProviders(
+        <TriggerNode
+          id={mockNode.id}
+          type={mockNode.type as string}
+          data={mockNode.data as any}
+          selected={false}
+          isConnectable={true}
+          zIndex={0}
+          dragging={false}
+          selectable={true}
+          deletable={true}
+          draggable={true}
+          positionAbsoluteX={0}
+          positionAbsoluteY={0}
+        />
+      );
+
+      expect(screen.getByText(/Triggers when the keyword is spoken/i)).toBeInTheDocument();
+      expect(screen.getByPlaceholderText('...')).toBeInTheDocument();
+    });
+
+    it('should render TriggerNode with emotion type', () => {
+      const mockNode: Node<TriggerNodeData> = {
+        id: 'trigger-2',
+        type: 'trigger',
+        position: { x: 0, y: 0 },
+        data: {
+          label: 'Emotion Trigger',
+          droppable: true,
+          triggerType: 'emotion',
+          triggers: [],
+          hasReduce: true,
+        },
+      };
+
+      renderWithProviders(
+        <TriggerNode
+          id={mockNode.id}
+          type={mockNode.type as string}
+          data={mockNode.data as any}
+          selected={false}
+          isConnectable={true}
+          zIndex={0}
+          dragging={false}
+          selectable={true}
+          deletable={true}
+          draggable={true}
+          positionAbsoluteX={0}
+          positionAbsoluteY={0}
+        />
+      );
+
+      expect(screen.getByText(/Emotion\?/i)).toBeInTheDocument();
+    });
+  });
+
+  describe('User Interactions', () => {
+    it('should add a new keyword', async () => {
+      const mockNode: Node<TriggerNodeData> = {
+        id: 'trigger-1',
+        type: 'trigger',
+        position: { x: 0, y: 0 },
+        data: {
+          label: 'Keyword Trigger',
+          droppable: true,
+          triggerType: 'keywords',
+          triggers: [],
+          hasReduce: true,
+        },
+      };
+
+      useFlowStore.setState({ nodes: [mockNode], edges: [] });
+
+      renderWithProviders(
+        <TriggerNode
+          id={mockNode.id}
+          type={mockNode.type as string}
+          data={mockNode.data as any}
+          selected={false}
+          isConnectable={true}
+          zIndex={0}
+          dragging={false}
+          selectable={true}
+          deletable={true}
+          draggable={true}
+          positionAbsoluteX={0}
+          positionAbsoluteY={0}
+        />
+      );
+
+      const input = screen.getByPlaceholderText('...');
+      await user.type(input, 'hello{enter}');
+
+      await waitFor(() => {
+        const node = useFlowStore.getState().nodes.find(n => n.id === 'trigger-1') as Node<TriggerNodeData> | undefined;
+        expect(node?.data.triggers.length).toBe(1);
+        expect(node?.data.triggers[0].keyword).toBe('hello');
+      });
+
+    });
+
+    it('should remove a keyword when cleared', async () => {
+      const mockNode: Node<TriggerNodeData> = {
+        id: 'trigger-1',
+        type: 'trigger',
+        position: { x: 0, y: 0 },
+        data: {
+          label: 'Keyword Trigger',
+          droppable: true,
+          triggerType: 'keywords',
+          triggers: [{ id: 'kw1', keyword: 'hello' }],
+          hasReduce: true,
+        },
+      };
+
+      useFlowStore.setState({ nodes: [mockNode], edges: [] });
+
+      renderWithProviders(
+        <TriggerNode
+          id={mockNode.id}
+          type={mockNode.type as string}
+          data={mockNode.data as any}
+          selected={false}
+          isConnectable={true}
+          zIndex={0}
+          dragging={false}
+          selectable={true}
+          deletable={true}
+          draggable={true}
+          positionAbsoluteX={0}
+          positionAbsoluteY={0}
+        />
+      );
+
+      const input = screen.getByDisplayValue('hello');
+      for (let i = 0; i < 'hello'.length; i++) {
+        await user.type(input, '{backspace}');
+      }
+      await user.type(input, '{enter}');
+
+      await waitFor(() => {
+        const node = useFlowStore.getState().nodes.find(n => n.id === 'trigger-1') as Node<TriggerNodeData> | undefined;
+        expect(node?.data.triggers.length).toBe(0);
+        });
+
+    });
+  });
+
+  describe('TriggerReduce Function', () => {
+    it('should reduce a trigger node to its essential data', () => {
+      const triggerNode: Node = {
+        id: 'trigger-1',
+        type: 'trigger',
+        position: { x: 0, y: 0 },
+        data: {
+          label: 'Keyword Trigger',
+          droppable: true,
+          triggerType: 'keywords',
+          triggers: [{ id: 'kw1', keyword: 'hello' }],
+          hasReduce: true,
+        },
+      };
+
+    const allNodes: Node[] = [triggerNode];
+    const result = TriggerReduce(triggerNode, allNodes);
+
+    expect(result).toEqual({
+      id: 'trigger-1',
+      type: 'keywords',
+      label: 'Keyword Trigger',
+      keywords: [{ id: 'kw1', keyword: 'hello' }],
+    });
+    });
+  });
+
+
+  describe('TriggerConnects Function', () => {
+    it('should handle connection without errors', () => {
+      const node1: Node = {
+        id: 'trigger-1',
+        type: 'trigger',
+        position: { x: 0, y: 0 },
+        data: {
+          label: 'Trigger 1',
+          droppable: true,
+          triggerType: 'keywords',
+          triggers: [],
+          hasReduce: true,
+        },
+      };
+
+      const node2: Node = {
+        id: 'norm-1',
+        type: 'norm',
+        position: { x: 100, y: 0 },
+        data: {
+          label: 'Norm 1',
+          droppable: true,
+          norm: 'test',
+          hasReduce: true,
+        },
+      };
+
+      expect(() => {
+        TriggerConnectionSource(node1, node2.id);
+        TriggerConnectionTarget(node1, node2.id);
+      }).not.toThrow();
+    });
+
+    it('should return true for TriggerNodeCanConnect if connection exists', () => {
+      const connection = { source: 'trigger-1', target: 'norm-1' };
+      expect(TriggerNodeCanConnect(connection as any)).toBe(true);
+    });
+  });
+});

test/pages/visProgPage/visualProgrammingUI/nodes/UniversalNodes.test.tsx

@@ -0,0 +1,151 @@
+import { describe, beforeEach } from '@jest/globals';
+import { screen } from '@testing-library/react';
+import { renderWithProviders } from '../../../../test-utils/test-utils.tsx';
+import type { XYPosition } from '@xyflow/react';
+import { NodeTypes, NodeDefaults, NodeConnections, NodeReduces, NodesInPhase } from '../../../../../src/pages/VisProgPage/visualProgrammingUI/NodeRegistry';
+import '@testing-library/jest-dom'
+import { createElement } from 'react';
+import useFlowStore from '../../../../../src/pages/VisProgPage/visualProgrammingUI/VisProgStores';
+
+
+describe('NormNode', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  function createNode(id: string, type: string, position: XYPosition, data: Record<string, unknown>, deletable?: boolean) {
+    const defaultData = NodeDefaults[type as keyof typeof NodeDefaults]
+    const newData = {
+        id: id,
+        type: type,
+        position: position,
+        data: data,
+        deletable: deletable,
+    }
+    return {...defaultData, ...newData}
+  }  
+
+
+    /**
+   * Reduces the graph into its phases' information and recursively calls their reducing function
+   */ 
+  function graphReducer() {
+    const { nodes } = useFlowStore.getState();
+    return nodes
+      .filter((n) => n.type == 'phase')
+      .map((n) => {
+        const reducer = NodeReduces['phase'];
+        return reducer(n, nodes)
+      }); 
+  }
+
+  function getAllTypes() {
+    return Object.entries(NodeTypes).map(([t])=>t)
+  }
+    
+  describe('Rendering', () => {
+    test.each(getAllTypes())('it should render %s node with the default data', (nodeType) => {
+    const lengthBefore = screen.getAllByText(/.*/).length;
+
+    const newNode = createNode(nodeType + "1", nodeType, {x: 200, y:200}, {});
+
+    const found = Object.entries(NodeTypes).find(([t]) => t === nodeType);
+    const uiElement = found ? found[1] : null;
+
+    expect(uiElement).not.toBeNull();
+    const props = {
+      id: newNode.id,
+      type: newNode.type as string,
+      data: newNode.data as any,
+      selected: false,
+      isConnectable: true,
+      zIndex: 0,
+      dragging: false,
+      selectable: true,
+      deletable: true,
+      draggable: true,
+      positionAbsoluteX: 0,
+      positionAbsoluteY: 0,
+    };
+
+    renderWithProviders(createElement(uiElement as React.ComponentType<any>, props));
+    const lengthAfter = screen.getAllByText(/.*/).length;
+
+    expect(lengthBefore + 1 === lengthAfter);
+  });
+  
+  });
+
+
+  describe('Connecting', () => {
+    test.each(getAllTypes())('it should call the connect function when %s node is connected', (nodeType) => {
+      // Create two nodes - one of the current type and one to connect to
+      const sourceNode = createNode('source-1', nodeType, {x: 100, y: 100}, {});
+      const targetNode = createNode('target-1', 'end', {x: 300, y: 100}, {});
+      
+      // Add nodes to store
+      useFlowStore.setState({ nodes: [sourceNode, targetNode] });
+
+      // Spy on the connect functions
+      const sourceConnectSpy = jest.spyOn(NodeConnections.Sources, nodeType as keyof typeof NodeConnections.Sources);
+      const targetConnectSpy = jest.spyOn(NodeConnections.Targets, 'end');
+
+      // Simulate connection
+      useFlowStore.getState().onConnect({
+        source: 'source-1',
+        target: 'target-1',
+        sourceHandle: null,
+        targetHandle: null,
+      });
+
+      // Verify the connect functions were called
+      expect(sourceConnectSpy).toHaveBeenCalledWith(sourceNode, targetNode.id);
+      expect(targetConnectSpy).toHaveBeenCalledWith(targetNode, sourceNode.id);
+
+      sourceConnectSpy.mockRestore();
+      targetConnectSpy.mockRestore();
+    }); 
+  });
+
+  describe('Reducing', () => {
+    test.each(getAllTypes())('it should correctly call/ not call the reduce function when %s node is in a phase', (nodeType) => {
+      // Create a phase node and a node of the current type
+      const phaseNode = createNode('phase-1', 'phase', {x: 200, y: 100}, { label: 'Test Phase', children: [] });
+      const testNode = createNode('node-1', nodeType, {x: 100, y: 100}, {});
+      
+      // Add the test node as a child of the phase
+      (phaseNode.data as any).children.push(testNode.id);
+      
+      // Add nodes to store
+      useFlowStore.setState({ nodes: [phaseNode, testNode] });
+
+      // Spy on the reduce functions
+      const phaseReduceSpy = jest.spyOn(NodeReduces, 'phase');
+      const nodeReduceSpy = jest.spyOn(NodeReduces, nodeType as keyof typeof NodeReduces);
+
+      // Simulate reducing - using the graphReducer
+      const result = graphReducer();
+
+      // Verify the reduce functions were called
+      expect(phaseReduceSpy).toHaveBeenCalledWith(phaseNode, [phaseNode, testNode]);
+      // Check if this node type is in NodesInPhase and returns false
+      const nodesInPhaseFunc = NodesInPhase[nodeType as keyof typeof NodesInPhase];
+      if (nodesInPhaseFunc && !nodesInPhaseFunc() && nodeType !== 'phase') {
+        // Node is NOT in phase, so it should NOT be called
+        expect(nodeReduceSpy).not.toHaveBeenCalled();
+      } else {
+        // Node IS in phase, so it SHOULD be called
+        expect(nodeReduceSpy).toHaveBeenCalled();
+      }
+
+      // Verify the correct structure is present using NodesInPhase
+      expect(result).toHaveLength(nodeType !== 'phase' ? 1 : 2);
+      expect(result[0]).toHaveProperty('id', 'phase-1');
+      expect(result[0]).toHaveProperty('label', 'Test Phase');
+
+      // Restore mocks
+      phaseReduceSpy.mockRestore();
+      nodeReduceSpy.mockRestore();
+    }); 
+  });
+});

test/setupFlowTests.ts

@@ -2,6 +2,11 @@ import '@testing-library/jest-dom';
 import { cleanup } from '@testing-library/react';
 import useFlowStore from '../src/pages/VisProgPage/visualProgrammingUI/VisProgStores.tsx';
 
+if (!globalThis.structuredClone) {
+  globalThis.structuredClone = (obj: any) => {
+    return JSON.parse(JSON.stringify(obj));
+  };
+}
 
 // To make sure that the tests are working, it's important that you are using
 // this implementation of ResizeObserver and DOMMatrixReadOnly
@@ -69,6 +74,9 @@ beforeAll(() => {
   useFlowStore.setState({
     nodes: [],
     edges: [],
+    past: [],
+    future: [],
+    isBatchAction: false,
     edgeReconnectSuccessful: true
   });
 });
@@ -78,6 +86,9 @@ afterEach(() => {
   useFlowStore.setState({
     nodes: [],
     edges: [],
+    past: [],
+    future: [],
+    isBatchAction: false,
     edgeReconnectSuccessful: true
   });
 });

test/test-utils/mocks.ts

@@ -0,0 +1,41 @@
+import { jest } from '@jest/globals';
+import React from 'react';
+import '@testing-library/jest-dom';
+
+/**
+ * Mock for @xyflow/react
+ * Provides simplified versions of React Flow hooks and components
+ */
+jest.mock('@xyflow/react', () => ({
+  useReactFlow: jest.fn(() => ({
+    screenToFlowPosition: jest.fn((pos: any) => pos),
+    getNode: jest.fn(),
+    getNodes: jest.fn(() => []),
+    getEdges: jest.fn(() => []),
+    setNodes: jest.fn(),
+    setEdges: jest.fn(),
+  })),
+  ReactFlowProvider: ({ children }: { children: React.ReactNode }) =>
+    React.createElement('div', { 'data-testid': 'react-flow-provider' }, children),
+  ReactFlow: ({ children, ...props }: any) =>
+    React.createElement('div', { 'data-testid': 'react-flow', ...props }, children),
+  Handle: ({ type, position, id }: any) =>
+    React.createElement('div', { 'data-testid': `handle-${type}-${id}`, 'data-position': position }),
+  Panel: ({ children, position }: any) =>
+    React.createElement('div', { 'data-testid': 'panel', 'data-position': position }, children),
+  Controls: () => React.createElement('div', { 'data-testid': 'controls' }),
+  Background: () => React.createElement('div', { 'data-testid': 'background' }),
+}));
+
+/**
+ * Mock for @neodrag/react
+ * Simplifies drag behavior for testing
+ */
+jest.mock('@neodrag/react', () => ({
+  useDraggable: jest.fn((ref: any, options?: any) => {
+    // Store the options so we can trigger them in tests
+    if (ref && ref.current) {
+      (ref.current as any)._dragOptions = options;
+    }
+  }),
+}));

test/test-utils/test-utils.tsx

@@ -0,0 +1,24 @@
+// __tests__/utils/test-utils.tsx
+import { render, type RenderOptions } from '@testing-library/react';
+import { type ReactElement, type ReactNode } from 'react';
+import { ReactFlowProvider } from '@xyflow/react';
+
+/**
+ * Custom render function that wraps components with necessary providers
+ * This ensures all components have access to ReactFlow context
+ */
+export function renderWithProviders(
+  ui: ReactElement,
+  options?: Omit<RenderOptions, 'wrapper'>
+) {
+  function Wrapper({ children }: { children: ReactNode }) {
+    return <ReactFlowProvider>{children}</ReactFlowProvider>;
+  }
+
+  return render(ui, { wrapper: Wrapper, ...options });
+}
+
+
+// Re-export everything from testing library
+//eslint-disable-next-line react-refresh/only-export-components
+export * from '@testing-library/react';

test/utils/programStore.test.ts

@@ -0,0 +1,100 @@
+import useProgramStore, {type ReducedProgram} from "../../src/utils/programStore.ts";
+
+
+describe('useProgramStore', () => {
+  beforeEach(() => {
+    // Reset store before each test
+    useProgramStore.setState({
+      currentProgram: { phases: [] },
+    });
+  });
+
+  const mockProgram: ReducedProgram = {
+    phases: [
+      {
+        id: 'phase-1',
+        norms: [{ id: 'norm-1' }],
+        goals: [{ id: 'goal-1' }],
+        triggers: [{ id: 'trigger-1' }],
+      },
+      {
+        id: 'phase-2',
+        norms: [{ id: 'norm-2' }],
+        goals: [{ id: 'goal-2' }],
+        triggers: [{ id: 'trigger-2' }],
+      },
+    ],
+  };
+
+  it('should set and get the program state', () => {
+    useProgramStore.getState().setProgramState(mockProgram);
+
+    const program = useProgramStore.getState().getProgramState();
+    expect(program).toEqual(mockProgram);
+  });
+
+  it('should return the ids of all phases in the program', () => {
+    useProgramStore.getState().setProgramState(mockProgram);
+
+    const phaseIds = useProgramStore.getState().getPhaseIds();
+    expect(phaseIds).toEqual(['phase-1', 'phase-2']);
+  });
+
+  it('should return all norms for a given phase', () => {
+    useProgramStore.getState().setProgramState(mockProgram);
+
+    const norms = useProgramStore.getState().getNormsInPhase('phase-1');
+    expect(norms).toEqual([{ id: 'norm-1' }]);
+  });
+
+  it('should return all goals for a given phase', () => {
+    useProgramStore.getState().setProgramState(mockProgram);
+
+    const goals = useProgramStore.getState().getGoalsInPhase('phase-2');
+    expect(goals).toEqual([{ id: 'goal-2' }]);
+  });
+
+  it('should return all triggers for a given phase', () => {
+    useProgramStore.getState().setProgramState(mockProgram);
+
+    const triggers = useProgramStore.getState().getTriggersInPhase('phase-1');
+    expect(triggers).toEqual([{ id: 'trigger-1' }]);
+  });
+
+  it('throws if phase does not exist when getting norms', () => {
+    useProgramStore.getState().setProgramState(mockProgram);
+
+    expect(() =>
+      useProgramStore.getState().getNormsInPhase('missing-phase')
+    ).toThrow('phase with id:"missing-phase" not found');
+  });
+
+  it('throws if phase does not exist when getting goals', () => {
+    useProgramStore.getState().setProgramState(mockProgram);
+
+    expect(() =>
+      useProgramStore.getState().getGoalsInPhase('missing-phase')
+    ).toThrow('phase with id:"missing-phase" not found');
+  });
+
+  it('throws if phase does not exist when getting triggers', () => {
+    useProgramStore.getState().setProgramState(mockProgram);
+
+    expect(() =>
+      useProgramStore.getState().getTriggersInPhase('missing-phase')
+    ).toThrow('phase with id:"missing-phase" not found');
+  });
+
+  // this test should be at the bottom to avoid conflicts with the previous tests
+  it('should clone program state when setting it (no shared references should exist)', () => {
+    useProgramStore.getState().setProgramState(mockProgram);
+
+    const storedProgram = useProgramStore.getState().getProgramState();
+
+    // mutate original
+    (mockProgram.phases[0].norms as any[]).push({ id: 'norm-mutated' });
+
+    // store should NOT change
+    expect(storedProgram.phases[0]['norms']).toHaveLength(1);
+  });
+});