feat: initial commit - adding a plan to phases and different ui for phase order editing

ref: N25B-451
chore: remove useState import
2026-01-14 19:44:53 +01:00 · 2026-01-13 12:39:48 +01:00 · 2026-01-13 12:39:25 +01:00 · 2026-01-13 12:03:49 +01:00 · 2026-01-13 11:43:24 +01:00 · 2026-01-13 11:41:58 +01:00
146 changed files with 1873 additions and 5612 deletions
--- a/.env.example
+++ b/.env.example
@@ -1,2 +0,0 @@
-# The location of the backend
-VITE_API_BASE_URL=http://localhost:8000
--- a/.githooks/check-branch-name.sh
+++ b/.githooks/check-branch-name.sh
@@ -0,0 +1,77 @@
+#!/usr/bin/env bash
+
+# This script checks if the current branch name follows the specified format.
+# It's designed to be used as a 'pre-commit' git hook.
+
+# Format: <type>/<short-description>
+# Example: feat/add-user-login
+
+# --- Configuration ---
+# An array of allowed commit types
+ALLOWED_TYPES=(feat fix refactor perf style test docs build chore revert)
+# An array of branches to ignore
+IGNORED_BRANCHES=(main dev demo)
+
+# --- Colors for Output ---
+RED='\033[0;31m'
+GREEN='\033[0;32m'
+YELLOW='\033[1;33m'
+NC='\033[0m' # No Color
+
+# --- Helper Functions ---
+error_exit() {
+  echo -e "${RED}ERROR: $1${NC}" >&2
+  echo -e "${YELLOW}Branch name format is incorrect. Aborting commit.${NC}" >&2
+  exit 1
+}
+
+# --- Main Logic ---
+
+# 1. Get the current branch name
+BRANCH_NAME=$(git symbolic-ref --short HEAD)
+
+# 2. Check if the current branch is in the ignored list
+for ignored_branch in "${IGNORED_BRANCHES[@]}"; do
+  if [ "$BRANCH_NAME" == "$ignored_branch" ]; then
+    echo -e "${GREEN}Branch check skipped for default branch: $BRANCH_NAME${NC}"
+    exit 0
+  fi
+done
+
+# 3. Validate the overall structure: <type>/<description>
+if ! [[ "$BRANCH_NAME" =~ ^[a-z]+/.+$ ]]; then
+  error_exit "Branch name must be in the format: <type>/<short-description>\nExample: feat/add-user-login"
+fi
+
+# 4. Extract the type and description
+TYPE=$(echo "$BRANCH_NAME" | cut -d'/' -f1)
+DESCRIPTION=$(echo "$BRANCH_NAME" | cut -d'/' -f2-)
+
+# 5. Validate the <type>
+type_valid=false
+for allowed_type in "${ALLOWED_TYPES[@]}"; do
+  if [ "$TYPE" == "$allowed_type" ]; then
+    type_valid=true
+    break
+  fi
+done
+
+if [ "$type_valid" == false ]; then
+  error_exit "Invalid type '$TYPE'.\nAllowed types are: ${ALLOWED_TYPES[*]}"
+fi
+
+# 6. Validate the <short-description>
+# Regex breakdown:
+# ^[a-z0-9]+      - Starts with one or more lowercase letters/numbers (the first word).
+# (-[a-z0-9]+){0,5} - Followed by a group of (dash + word) 0 to 5 times.
+# $               - End of the string.
+# This entire pattern enforces 1 to 6 words total, separated by dashes.
+DESCRIPTION_REGEX="^[a-z0-9]+(-[a-z0-9]+){0,5}$"
+
+if ! [[ "$DESCRIPTION" =~ $DESCRIPTION_REGEX ]]; then
+  error_exit "Invalid short description '$DESCRIPTION'.\nIt must be a maximum of 6 words, all lowercase, separated by dashes.\nExample: add-new-user-authentication-feature"
+fi
+
+# If all checks pass, exit successfully
+echo -e "${GREEN}Branch name '$BRANCH_NAME' is valid.${NC}"
+exit 0
--- a/.githooks/check-commit-msg.sh
+++ b/.githooks/check-commit-msg.sh
@@ -0,0 +1,138 @@
+#!/usr/bin/env bash
+
+# This script checks if a commit message follows the specified format.
+# It's designed to be used as a 'commit-msg' git hook.
+
+# Format:
+# <type>: <short description>
+#
+# [optional]<body>
+#
+# [ref/close]: <issue identifier>
+
+# --- Configuration ---
+# An array of allowed commit types
+ALLOWED_TYPES=(feat fix refactor perf style test docs build chore revert)
+
+# --- Colors for Output ---
+RED='\033[0;31m'
+GREEN='\033[0;32m'
+YELLOW='\033[1;33m'
+NC='\033[0m' # No Color
+
+# The first argument to the hook is the path to the file containing the commit message
+COMMIT_MSG_FILE=$1
+
+# --- Automated Commit Detection ---
+
+# Read the first line (header) for initial checks
+HEADER=$(head -n 1 "$COMMIT_MSG_FILE")
+
+echo 'Given commit message:'
+echo $HEADER
+
+# Check for Merge commits (covers 'git merge' and PR merges from GitHub/GitLab)
+# Examples: "Merge branch 'main' into ...", "Merge pull request #123 from ..."
+MERGE_PATTERN="^Merge (remote-tracking )?(branch|pull request|tag) .*"
+if [[ "$HEADER" =~ $MERGE_PATTERN ]]; then
+  echo -e "${GREEN}Merge commit detected by message content. Skipping validation.${NC}"
+  exit 0
+fi
+
+# Check for Revert commits
+# Example: "Revert "feat: add new feature""
+REVERT_PATTERN="^Revert \".*\""
+if [[ "$HEADER" =~ $REVERT_PATTERN ]]; then
+  echo -e "${GREEN}Revert commit detected by message content. Skipping validation.${NC}"
+  exit 0
+fi
+
+# Check for Cherry-pick commits (this pattern appears at the end of the message)
+# Example: "(cherry picked from commit deadbeef...)"
+# We use grep -q to search the whole file quietly.
+CHERRY_PICK_PATTERN="\(cherry picked from commit [a-f0-9]{7,40}\)"
+if grep -qE "$CHERRY_PICK_PATTERN" "$COMMIT_MSG_FILE"; then
+  echo -e "${GREEN}Cherry-pick detected by message content. Skipping validation.${NC}"
+  exit 0
+fi
+
+# Check for Squash
+# Example: "Squash commits ..."
+SQUASH_PATTERN="^Squash .+"
+if [[ "$HEADER" =~ $SQUASH_PATTERN ]]; then
+  echo -e "${GREEN}Squash commit detected by message content. Skipping validation.${NC}"
+  exit 0
+fi
+
+# --- Validation Functions ---
+
+# Function to print an error message and exit
+# Usage: error_exit "Your error message here"
+error_exit() {
+  # >&2 redirects echo to stderr
+  echo -e "${RED}ERROR: $1${NC}" >&2
+  echo -e "${YELLOW}Commit message format is incorrect. Aborting commit.${NC}" >&2
+  exit 1
+}
+
+# --- Main Logic ---
+
+# 1. Read the header (first line) of the commit message
+HEADER=$(head -n 1 "$COMMIT_MSG_FILE")
+
+# 2. Validate the header format: <type>: <description>
+# Regex breakdown:
+# ^(type1|type2|...)  - Starts with one of the allowed types
+# :                    - Followed by a literal colon
+# \s                   - Followed by a single space
+# .+                   - Followed by one or more characters for the description
+# $                    - End of the line
+TYPES_REGEX=$(
+  IFS="|"
+  echo "${ALLOWED_TYPES[*]}"
+)
+HEADER_REGEX="^($TYPES_REGEX): .+$"
+
+if ! [[ "$HEADER" =~ $HEADER_REGEX ]]; then
+  error_exit "Invalid header format.\n\nHeader must be in the format: <type>: <short description>\nAllowed types: ${ALLOWED_TYPES[*]}\nExample: feat: add new user authentication feature"
+fi
+
+# Only validate footer if commit type is not chore
+TYPE=$(echo "$HEADER" | cut -d':' -f1)
+if [ "$TYPE" != "chore" ]; then
+  # 3. Validate the footer (last line) of the commit message
+  FOOTER=$(tail -n 1 "$COMMIT_MSG_FILE")
+
+  # Regex breakdown:
+  # ^(ref|close)         - Starts with 'ref' or 'close'
+  # :                    - Followed by a literal colon
+  # \s                   - Followed by a single space
+  # N25B-                - Followed by the literal string 'N25B-'
+  # [0-9]+               - Followed by one or more digits
+  # $                    - End of the line
+  FOOTER_REGEX="^(ref|close): N25B-[0-9]+$"
+
+  if ! [[ "$FOOTER" =~ $FOOTER_REGEX ]]; then
+    error_exit "Invalid footer format.\n\nFooter must be in the format: [ref/close]: <issue identifier>\nExample: ref: N25B-123"
+  fi
+fi
+
+# 4. If the message has more than 2 lines, validate the separator
+#    A blank line must exist between the header and the body.
+LINE_COUNT=$(wc -l <"$COMMIT_MSG_FILE" | xargs) # xargs trims whitespace
+
+# We only care if there is a body. Header + Footer = 2 lines.
+# Header + Blank Line + Body... + Footer > 2 lines.
+if [ "$LINE_COUNT" -gt 2 ]; then
+  # Get the second line
+  SECOND_LINE=$(sed -n '2p' "$COMMIT_MSG_FILE")
+
+  # Check if the second line is NOT empty. If it's not, it's an error.
+  if [ -n "$SECOND_LINE" ]; then
+    error_exit "Missing blank line between header and body.\n\nThe second line of your commit message must be empty if a body is present."
+  fi
+fi
+
+# If all checks pass, exit with success
+echo -e "${GREEN}Commit message is valid.${NC}"
+exit 0
--- a/.husky/commit-msg
+++ b/.husky/commit-msg
@@ -0,0 +1 @@
+sh .githooks/check-commit-msg.sh $1
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@@ -0,0 +1,3 @@
+sh .githooks/check-branch-name.sh
+
+npm run lint
--- a/README.md
+++ b/README.md
@@ -28,14 +28,6 @@ npm run dev

 It should automatically reload when you save changes.

-## Environment
-
-Copy `.env.example` to `.env.local` and adjust values as needed:
-
-```shell
-cp .env.example .env.local
-```
-
 ## Git Hooks

 To activate automatic linting, branch name checks and commit message checks, run:
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,11 +10,9 @@
      "dependencies": {
        "@neodrag/react": "^2.3.1",
        "@xyflow/react": "^12.8.6",
-        "clsx": "^2.1.1",
        "react": "^19.1.1",
        "react-dom": "^19.1.1",
        "react-router": "^7.9.3",
-        "reactflow": "^11.11.4",
        "zustand": "^5.0.8"
      },
      "devDependencies": {
@@ -31,6 +29,7 @@
        "eslint-plugin-react-hooks": "^5.2.0",
        "eslint-plugin-react-refresh": "^0.4.20",
        "globals": "^16.4.0",
+        "husky": "^9.1.7",
        "identity-obj-proxy": "^3.0.0",
        "jest": "^30.2.0",
        "jest-environment-jsdom": "^30.2.0",
@@ -2054,276 +2053,6 @@
        "url": "https://opencollective.com/pkgr"
      }
    },
-    "node_modules/@reactflow/background": {
-      "version": "11.3.14",
-      "resolved": "https://registry.npmjs.org/@reactflow/background/-/background-11.3.14.tgz",
-      "integrity": "sha512-Gewd7blEVT5Lh6jqrvOgd4G6Qk17eGKQfsDXgyRSqM+CTwDqRldG2LsWN4sNeno6sbqVIC2fZ+rAUBFA9ZEUDA==",
-      "license": "MIT",
-      "dependencies": {
-        "@reactflow/core": "11.11.4",
-        "classcat": "^5.0.3",
-        "zustand": "^4.4.1"
-      },
-      "peerDependencies": {
-        "react": ">=17",
-        "react-dom": ">=17"
-      }
-    },
-    "node_modules/@reactflow/background/node_modules/zustand": {
-      "version": "4.5.7",
-      "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.5.7.tgz",
-      "integrity": "sha512-CHOUy7mu3lbD6o6LJLfllpjkzhHXSBlX8B9+qPddUsIfeF5S/UZ5q0kmCsnRqT1UHFQZchNFDDzMbQsuesHWlw==",
-      "license": "MIT",
-      "dependencies": {
-        "use-sync-external-store": "^1.2.2"
-      },
-      "engines": {
-        "node": ">=12.7.0"
-      },
-      "peerDependencies": {
-        "@types/react": ">=16.8",
-        "immer": ">=9.0.6",
-        "react": ">=16.8"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "immer": {
-          "optional": true
-        },
-        "react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@reactflow/controls": {
-      "version": "11.2.14",
-      "resolved": "https://registry.npmjs.org/@reactflow/controls/-/controls-11.2.14.tgz",
-      "integrity": "sha512-MiJp5VldFD7FrqaBNIrQ85dxChrG6ivuZ+dcFhPQUwOK3HfYgX2RHdBua+gx+40p5Vw5It3dVNp/my4Z3jF0dw==",
-      "license": "MIT",
-      "dependencies": {
-        "@reactflow/core": "11.11.4",
-        "classcat": "^5.0.3",
-        "zustand": "^4.4.1"
-      },
-      "peerDependencies": {
-        "react": ">=17",
-        "react-dom": ">=17"
-      }
-    },
-    "node_modules/@reactflow/controls/node_modules/zustand": {
-      "version": "4.5.7",
-      "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.5.7.tgz",
-      "integrity": "sha512-CHOUy7mu3lbD6o6LJLfllpjkzhHXSBlX8B9+qPddUsIfeF5S/UZ5q0kmCsnRqT1UHFQZchNFDDzMbQsuesHWlw==",
-      "license": "MIT",
-      "dependencies": {
-        "use-sync-external-store": "^1.2.2"
-      },
-      "engines": {
-        "node": ">=12.7.0"
-      },
-      "peerDependencies": {
-        "@types/react": ">=16.8",
-        "immer": ">=9.0.6",
-        "react": ">=16.8"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "immer": {
-          "optional": true
-        },
-        "react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@reactflow/core": {
-      "version": "11.11.4",
-      "resolved": "https://registry.npmjs.org/@reactflow/core/-/core-11.11.4.tgz",
-      "integrity": "sha512-H4vODklsjAq3AMq6Np4LE12i1I4Ta9PrDHuBR9GmL8uzTt2l2jh4CiQbEMpvMDcp7xi4be0hgXj+Ysodde/i7Q==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/d3": "^7.4.0",
-        "@types/d3-drag": "^3.0.1",
-        "@types/d3-selection": "^3.0.3",
-        "@types/d3-zoom": "^3.0.1",
-        "classcat": "^5.0.3",
-        "d3-drag": "^3.0.0",
-        "d3-selection": "^3.0.0",
-        "d3-zoom": "^3.0.0",
-        "zustand": "^4.4.1"
-      },
-      "peerDependencies": {
-        "react": ">=17",
-        "react-dom": ">=17"
-      }
-    },
-    "node_modules/@reactflow/core/node_modules/zustand": {
-      "version": "4.5.7",
-      "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.5.7.tgz",
-      "integrity": "sha512-CHOUy7mu3lbD6o6LJLfllpjkzhHXSBlX8B9+qPddUsIfeF5S/UZ5q0kmCsnRqT1UHFQZchNFDDzMbQsuesHWlw==",
-      "license": "MIT",
-      "dependencies": {
-        "use-sync-external-store": "^1.2.2"
-      },
-      "engines": {
-        "node": ">=12.7.0"
-      },
-      "peerDependencies": {
-        "@types/react": ">=16.8",
-        "immer": ">=9.0.6",
-        "react": ">=16.8"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "immer": {
-          "optional": true
-        },
-        "react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@reactflow/minimap": {
-      "version": "11.7.14",
-      "resolved": "https://registry.npmjs.org/@reactflow/minimap/-/minimap-11.7.14.tgz",
-      "integrity": "sha512-mpwLKKrEAofgFJdkhwR5UQ1JYWlcAAL/ZU/bctBkuNTT1yqV+y0buoNVImsRehVYhJwffSWeSHaBR5/GJjlCSQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@reactflow/core": "11.11.4",
-        "@types/d3-selection": "^3.0.3",
-        "@types/d3-zoom": "^3.0.1",
-        "classcat": "^5.0.3",
-        "d3-selection": "^3.0.0",
-        "d3-zoom": "^3.0.0",
-        "zustand": "^4.4.1"
-      },
-      "peerDependencies": {
-        "react": ">=17",
-        "react-dom": ">=17"
-      }
-    },
-    "node_modules/@reactflow/minimap/node_modules/zustand": {
-      "version": "4.5.7",
-      "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.5.7.tgz",
-      "integrity": "sha512-CHOUy7mu3lbD6o6LJLfllpjkzhHXSBlX8B9+qPddUsIfeF5S/UZ5q0kmCsnRqT1UHFQZchNFDDzMbQsuesHWlw==",
-      "license": "MIT",
-      "dependencies": {
-        "use-sync-external-store": "^1.2.2"
-      },
-      "engines": {
-        "node": ">=12.7.0"
-      },
-      "peerDependencies": {
-        "@types/react": ">=16.8",
-        "immer": ">=9.0.6",
-        "react": ">=16.8"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "immer": {
-          "optional": true
-        },
-        "react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@reactflow/node-resizer": {
-      "version": "2.2.14",
-      "resolved": "https://registry.npmjs.org/@reactflow/node-resizer/-/node-resizer-2.2.14.tgz",
-      "integrity": "sha512-fwqnks83jUlYr6OHcdFEedumWKChTHRGw/kbCxj0oqBd+ekfs+SIp4ddyNU0pdx96JIm5iNFS0oNrmEiJbbSaA==",
-      "license": "MIT",
-      "dependencies": {
-        "@reactflow/core": "11.11.4",
-        "classcat": "^5.0.4",
-        "d3-drag": "^3.0.0",
-        "d3-selection": "^3.0.0",
-        "zustand": "^4.4.1"
-      },
-      "peerDependencies": {
-        "react": ">=17",
-        "react-dom": ">=17"
-      }
-    },
-    "node_modules/@reactflow/node-resizer/node_modules/zustand": {
-      "version": "4.5.7",
-      "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.5.7.tgz",
-      "integrity": "sha512-CHOUy7mu3lbD6o6LJLfllpjkzhHXSBlX8B9+qPddUsIfeF5S/UZ5q0kmCsnRqT1UHFQZchNFDDzMbQsuesHWlw==",
-      "license": "MIT",
-      "dependencies": {
-        "use-sync-external-store": "^1.2.2"
-      },
-      "engines": {
-        "node": ">=12.7.0"
-      },
-      "peerDependencies": {
-        "@types/react": ">=16.8",
-        "immer": ">=9.0.6",
-        "react": ">=16.8"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "immer": {
-          "optional": true
-        },
-        "react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@reactflow/node-toolbar": {
-      "version": "1.3.14",
-      "resolved": "https://registry.npmjs.org/@reactflow/node-toolbar/-/node-toolbar-1.3.14.tgz",
-      "integrity": "sha512-rbynXQnH/xFNu4P9H+hVqlEUafDCkEoCy0Dg9mG22Sg+rY/0ck6KkrAQrYrTgXusd+cEJOMK0uOOFCK2/5rSGQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@reactflow/core": "11.11.4",
-        "classcat": "^5.0.3",
-        "zustand": "^4.4.1"
-      },
-      "peerDependencies": {
-        "react": ">=17",
-        "react-dom": ">=17"
-      }
-    },
-    "node_modules/@reactflow/node-toolbar/node_modules/zustand": {
-      "version": "4.5.7",
-      "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.5.7.tgz",
-      "integrity": "sha512-CHOUy7mu3lbD6o6LJLfllpjkzhHXSBlX8B9+qPddUsIfeF5S/UZ5q0kmCsnRqT1UHFQZchNFDDzMbQsuesHWlw==",
-      "license": "MIT",
-      "dependencies": {
-        "use-sync-external-store": "^1.2.2"
-      },
-      "engines": {
-        "node": ">=12.7.0"
-      },
-      "peerDependencies": {
-        "@types/react": ">=16.8",
-        "immer": ">=9.0.6",
-        "react": ">=16.8"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "immer": {
-          "optional": true
-        },
-        "react": {
-          "optional": true
-        }
-      }
-    },
    "node_modules/@rolldown/pluginutils": {
      "version": "1.0.0-beta.35",
      "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.35.tgz",
@@ -2918,102 +2647,12 @@
        "@babel/types": "^7.28.2"
      }
    },
-    "node_modules/@types/d3": {
-      "version": "7.4.3",
-      "resolved": "https://registry.npmjs.org/@types/d3/-/d3-7.4.3.tgz",
-      "integrity": "sha512-lZXZ9ckh5R8uiFVt8ogUNf+pIrK4EsWrx2Np75WvF/eTpJ0FMHNhjXk8CKEx/+gpHbNQyJWehbFaTvqmHWB3ww==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/d3-array": "*",
-        "@types/d3-axis": "*",
-        "@types/d3-brush": "*",
-        "@types/d3-chord": "*",
-        "@types/d3-color": "*",
-        "@types/d3-contour": "*",
-        "@types/d3-delaunay": "*",
-        "@types/d3-dispatch": "*",
-        "@types/d3-drag": "*",
-        "@types/d3-dsv": "*",
-        "@types/d3-ease": "*",
-        "@types/d3-fetch": "*",
-        "@types/d3-force": "*",
-        "@types/d3-format": "*",
-        "@types/d3-geo": "*",
-        "@types/d3-hierarchy": "*",
-        "@types/d3-interpolate": "*",
-        "@types/d3-path": "*",
-        "@types/d3-polygon": "*",
-        "@types/d3-quadtree": "*",
-        "@types/d3-random": "*",
-        "@types/d3-scale": "*",
-        "@types/d3-scale-chromatic": "*",
-        "@types/d3-selection": "*",
-        "@types/d3-shape": "*",
-        "@types/d3-time": "*",
-        "@types/d3-time-format": "*",
-        "@types/d3-timer": "*",
-        "@types/d3-transition": "*",
-        "@types/d3-zoom": "*"
-      }
-    },
-    "node_modules/@types/d3-array": {
-      "version": "3.2.2",
-      "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.2.tgz",
-      "integrity": "sha512-hOLWVbm7uRza0BYXpIIW5pxfrKe0W+D5lrFiAEYR+pb6w3N2SwSMaJbXdUfSEv+dT4MfHBLtn5js0LAWaO6otw==",
-      "license": "MIT"
-    },
-    "node_modules/@types/d3-axis": {
-      "version": "3.0.6",
-      "resolved": "https://registry.npmjs.org/@types/d3-axis/-/d3-axis-3.0.6.tgz",
-      "integrity": "sha512-pYeijfZuBd87T0hGn0FO1vQ/cgLk6E1ALJjfkC0oJ8cbwkZl3TpgS8bVBLZN+2jjGgg38epgxb2zmoGtSfvgMw==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/d3-selection": "*"
-      }
-    },
-    "node_modules/@types/d3-brush": {
-      "version": "3.0.6",
-      "resolved": "https://registry.npmjs.org/@types/d3-brush/-/d3-brush-3.0.6.tgz",
-      "integrity": "sha512-nH60IZNNxEcrh6L1ZSMNA28rj27ut/2ZmI3r96Zd+1jrZD++zD3LsMIjWlvg4AYrHn/Pqz4CF3veCxGjtbqt7A==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/d3-selection": "*"
-      }
-    },
-    "node_modules/@types/d3-chord": {
-      "version": "3.0.6",
-      "resolved": "https://registry.npmjs.org/@types/d3-chord/-/d3-chord-3.0.6.tgz",
-      "integrity": "sha512-LFYWWd8nwfwEmTZG9PfQxd17HbNPksHBiJHaKuY1XeqscXacsS2tyoo6OdRsjf+NQYeB6XrNL3a25E3gH69lcg==",
-      "license": "MIT"
-    },
    "node_modules/@types/d3-color": {
      "version": "3.1.3",
      "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz",
      "integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==",
      "license": "MIT"
    },
-    "node_modules/@types/d3-contour": {
-      "version": "3.0.6",
-      "resolved": "https://registry.npmjs.org/@types/d3-contour/-/d3-contour-3.0.6.tgz",
-      "integrity": "sha512-BjzLgXGnCWjUSYGfH1cpdo41/hgdWETu4YxpezoztawmqsvCeep+8QGfiY6YbDvfgHz/DkjeIkkZVJavB4a3rg==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/d3-array": "*",
-        "@types/geojson": "*"
-      }
-    },
-    "node_modules/@types/d3-delaunay": {
-      "version": "6.0.4",
-      "resolved": "https://registry.npmjs.org/@types/d3-delaunay/-/d3-delaunay-6.0.4.tgz",
-      "integrity": "sha512-ZMaSKu4THYCU6sV64Lhg6qjf1orxBthaC161plr5KuPHo3CNm8DTHiLw/5Eq2b6TsNP0W0iJrUOFscY6Q450Hw==",
-      "license": "MIT"
-    },
-    "node_modules/@types/d3-dispatch": {
-      "version": "3.0.7",
-      "resolved": "https://registry.npmjs.org/@types/d3-dispatch/-/d3-dispatch-3.0.7.tgz",
-      "integrity": "sha512-5o9OIAdKkhN1QItV2oqaE5KMIiXAvDWBDPrD85e58Qlz1c1kI/J0NcqbEG88CoTwJrYe7ntUCVfeUl2UJKbWgA==",
-      "license": "MIT"
-    },
    "node_modules/@types/d3-drag": {
      "version": "3.0.7",
      "resolved": "https://registry.npmjs.org/@types/d3-drag/-/d3-drag-3.0.7.tgz",
@@ -3023,54 +2662,6 @@
        "@types/d3-selection": "*"
      }
    },
-    "node_modules/@types/d3-dsv": {
-      "version": "3.0.7",
-      "resolved": "https://registry.npmjs.org/@types/d3-dsv/-/d3-dsv-3.0.7.tgz",
-      "integrity": "sha512-n6QBF9/+XASqcKK6waudgL0pf/S5XHPPI8APyMLLUHd8NqouBGLsU8MgtO7NINGtPBtk9Kko/W4ea0oAspwh9g==",
-      "license": "MIT"
-    },
-    "node_modules/@types/d3-ease": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-3.0.2.tgz",
-      "integrity": "sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==",
-      "license": "MIT"
-    },
-    "node_modules/@types/d3-fetch": {
-      "version": "3.0.7",
-      "resolved": "https://registry.npmjs.org/@types/d3-fetch/-/d3-fetch-3.0.7.tgz",
-      "integrity": "sha512-fTAfNmxSb9SOWNB9IoG5c8Hg6R+AzUHDRlsXsDZsNp6sxAEOP0tkP3gKkNSO/qmHPoBFTxNrjDprVHDQDvo5aA==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/d3-dsv": "*"
-      }
-    },
-    "node_modules/@types/d3-force": {
-      "version": "3.0.10",
-      "resolved": "https://registry.npmjs.org/@types/d3-force/-/d3-force-3.0.10.tgz",
-      "integrity": "sha512-ZYeSaCF3p73RdOKcjj+swRlZfnYpK1EbaDiYICEEp5Q6sUiqFaFQ9qgoshp5CzIyyb/yD09kD9o2zEltCexlgw==",
-      "license": "MIT"
-    },
-    "node_modules/@types/d3-format": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/@types/d3-format/-/d3-format-3.0.4.tgz",
-      "integrity": "sha512-fALi2aI6shfg7vM5KiR1wNJnZ7r6UuggVqtDA+xiEdPZQwy/trcQaHnwShLuLdta2rTymCNpxYTiMZX/e09F4g==",
-      "license": "MIT"
-    },
-    "node_modules/@types/d3-geo": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/@types/d3-geo/-/d3-geo-3.1.0.tgz",
-      "integrity": "sha512-856sckF0oP/diXtS4jNsiQw/UuK5fQG8l/a9VVLeSouf1/PPbBE1i1W852zVwKwYCBkFJJB7nCFTbk6UMEXBOQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/geojson": "*"
-      }
-    },
-    "node_modules/@types/d3-hierarchy": {
-      "version": "3.1.7",
-      "resolved": "https://registry.npmjs.org/@types/d3-hierarchy/-/d3-hierarchy-3.1.7.tgz",
-      "integrity": "sha512-tJFtNoYBtRtkNysX1Xq4sxtjK8YgoWUNpIiUee0/jHGRwqvzYxkq0hGVbbOGSz+JgFxxRu4K8nb3YpG3CMARtg==",
-      "license": "MIT"
-    },
    "node_modules/@types/d3-interpolate": {
      "version": "3.0.4",
      "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz",
@@ -3080,78 +2671,12 @@
        "@types/d3-color": "*"
      }
    },
-    "node_modules/@types/d3-path": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-3.1.1.tgz",
-      "integrity": "sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==",
-      "license": "MIT"
-    },
-    "node_modules/@types/d3-polygon": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/@types/d3-polygon/-/d3-polygon-3.0.2.tgz",
-      "integrity": "sha512-ZuWOtMaHCkN9xoeEMr1ubW2nGWsp4nIql+OPQRstu4ypeZ+zk3YKqQT0CXVe/PYqrKpZAi+J9mTs05TKwjXSRA==",
-      "license": "MIT"
-    },
-    "node_modules/@types/d3-quadtree": {
-      "version": "3.0.6",
-      "resolved": "https://registry.npmjs.org/@types/d3-quadtree/-/d3-quadtree-3.0.6.tgz",
-      "integrity": "sha512-oUzyO1/Zm6rsxKRHA1vH0NEDG58HrT5icx/azi9MF1TWdtttWl0UIUsjEQBBh+SIkrpd21ZjEv7ptxWys1ncsg==",
-      "license": "MIT"
-    },
-    "node_modules/@types/d3-random": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/@types/d3-random/-/d3-random-3.0.3.tgz",
-      "integrity": "sha512-Imagg1vJ3y76Y2ea0871wpabqp613+8/r0mCLEBfdtqC7xMSfj9idOnmBYyMoULfHePJyxMAw3nWhJxzc+LFwQ==",
-      "license": "MIT"
-    },
-    "node_modules/@types/d3-scale": {
-      "version": "4.0.9",
-      "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.9.tgz",
-      "integrity": "sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/d3-time": "*"
-      }
-    },
-    "node_modules/@types/d3-scale-chromatic": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/@types/d3-scale-chromatic/-/d3-scale-chromatic-3.1.0.tgz",
-      "integrity": "sha512-iWMJgwkK7yTRmWqRB5plb1kadXyQ5Sj8V/zYlFGMUBbIPKQScw+Dku9cAAMgJG+z5GYDoMjWGLVOvjghDEFnKQ==",
-      "license": "MIT"
-    },
    "node_modules/@types/d3-selection": {
      "version": "3.0.11",
      "resolved": "https://registry.npmjs.org/@types/d3-selection/-/d3-selection-3.0.11.tgz",
      "integrity": "sha512-bhAXu23DJWsrI45xafYpkQ4NtcKMwWnAC/vKrd2l+nxMFuvOT3XMYTIj2opv8vq8AO5Yh7Qac/nSeP/3zjTK0w==",
      "license": "MIT"
    },
-    "node_modules/@types/d3-shape": {
-      "version": "3.1.8",
-      "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.8.tgz",
-      "integrity": "sha512-lae0iWfcDeR7qt7rA88BNiqdvPS5pFVPpo5OfjElwNaT2yyekbM0C9vK+yqBqEmHr6lDkRnYNoTBYlAgJa7a4w==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/d3-path": "*"
-      }
-    },
-    "node_modules/@types/d3-time": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.4.tgz",
-      "integrity": "sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==",
-      "license": "MIT"
-    },
-    "node_modules/@types/d3-time-format": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/@types/d3-time-format/-/d3-time-format-4.0.3.tgz",
-      "integrity": "sha512-5xg9rC+wWL8kdDj153qZcsJ0FWiFt0J5RB6LYUNZjwSnesfblqrI/bJ1wBdJ8OQfncgbJG5+2F+qfqnqyzYxyg==",
-      "license": "MIT"
-    },
-    "node_modules/@types/d3-timer": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-3.0.2.tgz",
-      "integrity": "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==",
-      "license": "MIT"
-    },
    "node_modules/@types/d3-transition": {
      "version": "3.0.9",
      "resolved": "https://registry.npmjs.org/@types/d3-transition/-/d3-transition-3.0.9.tgz",
@@ -3178,12 +2703,6 @@
      "dev": true,
      "license": "MIT"
    },
-    "node_modules/@types/geojson": {
-      "version": "7946.0.16",
-      "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.16.tgz",
-      "integrity": "sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg==",
-      "license": "MIT"
-    },
    "node_modules/@types/hast": {
      "version": "3.0.4",
      "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz",
@@ -4452,15 +3971,6 @@
        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
      }
    },
-    "node_modules/clsx": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
-      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      }
-    },
    "node_modules/co": {
      "version": "4.6.0",
      "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
@@ -5543,6 +5053,22 @@
        "node": ">=10.17.0"
      }
    },
+    "node_modules/husky": {
+      "version": "9.1.7",
+      "resolved": "https://registry.npmjs.org/husky/-/husky-9.1.7.tgz",
+      "integrity": "sha512-5gs5ytaNjBrh5Ow3zrvdUUY+0VxIuWVL4i9irt6friV+BqdCfmV11CQTWMiBYWHbXhco+J1kHfTOUkePhCDvMA==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "husky": "bin.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/typicode"
+      }
+    },
    "node_modules/iconv-lite": {
      "version": "0.6.3",
      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
@@ -7419,9 +6945,9 @@
      }
    },
    "node_modules/react-router": {
-      "version": "7.12.0",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.12.0.tgz",
-      "integrity": "sha512-kTPDYPFzDVGIIGNLS5VJykK0HfHLY5MF3b+xj0/tTyNYL1gF1qs7u67Z9jEhQk2sQ98SUaHxlG31g1JtF7IfVw==",
+      "version": "7.9.3",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.9.3.tgz",
+      "integrity": "sha512-4o2iWCFIwhI/eYAIL43+cjORXYn/aRQPgtFRRZb3VzoyQ5Uej0Bmqj7437L97N9NJW4wnicSwLOLS+yCXfAPgg==",
      "license": "MIT",
      "dependencies": {
        "cookie": "^1.0.1",
@@ -7440,24 +6966,6 @@
        }
      }
    },
-    "node_modules/reactflow": {
-      "version": "11.11.4",
-      "resolved": "https://registry.npmjs.org/reactflow/-/reactflow-11.11.4.tgz",
-      "integrity": "sha512-70FOtJkUWH3BAOsN+LU9lCrKoKbtOPnz2uq0CV2PLdNSwxTXOhCbsZr50GmZ+Rtw3jx8Uv7/vBFtCGixLfd4Og==",
-      "license": "MIT",
-      "dependencies": {
-        "@reactflow/background": "11.3.14",
-        "@reactflow/controls": "11.2.14",
-        "@reactflow/core": "11.11.4",
-        "@reactflow/minimap": "11.7.14",
-        "@reactflow/node-resizer": "2.2.14",
-        "@reactflow/node-toolbar": "1.3.14"
-      },
-      "peerDependencies": {
-        "react": ">=17",
-        "react-dom": ">=17"
-      }
-    },
    "node_modules/redent": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
--- a/package.json
+++ b/package.json
@@ -8,16 +8,15 @@
    "build": "tsc -b && vite build",
    "lint": "eslint src test",
    "preview": "vite preview",
-    "test": "jest"
+    "test": "jest",
+    "prepare": "husky"
  },
  "dependencies": {
    "@neodrag/react": "^2.3.1",
    "@xyflow/react": "^12.8.6",
-    "clsx": "^2.1.1",
    "react": "^19.1.1",
    "react-dom": "^19.1.1",
    "react-router": "^7.9.3",
-    "reactflow": "^11.11.4",
    "zustand": "^5.0.8"
  },
  "devDependencies": {
@@ -34,6 +33,7 @@
    "eslint-plugin-react-hooks": "^5.2.0",
    "eslint-plugin-react-refresh": "^0.4.20",
    "globals": "^16.4.0",
+    "husky": "^9.1.7",
    "identity-obj-proxy": "^3.0.0",
    "jest": "^30.2.0",
    "jest-environment-jsdom": "^30.2.0",
--- a/public/DeveloperManual.pdf
+++ b/public/DeveloperManual.pdf
--- a/public/UserManual.pdf
+++ b/public/UserManual.pdf
--- a/src/App.css
+++ b/src/App.css
@@ -1,8 +1,3 @@
-/*
-This program has been developed by students from the bachelor Computer Science at Utrecht
-University within the Software Project course.
-© Copyright Utrecht University (Department of Information and Computing Sciences)
-*/
 .logopepper {
  height: 8em;
  padding: 1.5em;
@@ -166,13 +161,7 @@ input[type="checkbox"] {
 .margin-0 {
  margin: 0;
 }
-.margin-lg {
-  margin: 1rem;
-}

-.padding-0 {
-  padding: 0;
-}
 .padding-sm {
  padding: .25rem;
 }
@@ -182,9 +171,11 @@ input[type="checkbox"] {
 .padding-lg {
  padding: 1rem;
 }
-.padding-h-lg {
-  padding-left: 1rem;
-  padding-right: 1rem;
+.padding-b-sm {
+  padding-bottom: .25rem;
+}
+.padding-b-md {
+  padding-bottom: .5rem;
 }
 .padding-b-lg {
  padding-bottom: 1rem;
@@ -213,27 +204,6 @@ input[type="checkbox"] {
  border: 3px solid canvastext;
 }

-.shadow-sm {
-  box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.25);
-}
-.shadow-md {
-  box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.25);
-}
-.shadow-lg {
-  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.25);
-}
-@media (prefers-color-scheme: dark) {
-  .shadow-sm {
-    box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.5);
-  }
-  .shadow-md {
-    box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.5);
-  }
-  .shadow-lg {
-    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.5);
-  }
-}
-
 .font-small {
  font-size: .75rem;
 }
@@ -250,9 +220,6 @@ input[type="checkbox"] {
  font-weight: bold;
 }

-.relative {
-  position: relative;
-}

 .clickable {
  cursor: pointer;
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,10 +1,9 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
 import { Routes, Route, Link } from 'react-router'
 import './App.css'
+import TemplatePage from './pages/TemplatePage/Template.tsx'
 import Home from './pages/Home/Home.tsx'
-import UserManual from './pages/Manuals/Manuals.tsx';
+import Robot from './pages/Robot/Robot.tsx';
+import ConnectedRobots from './pages/ConnectedRobots/ConnectedRobots.tsx'
 import VisProg from "./pages/VisProgPage/VisProg.tsx";
 import {useState} from "react";
 import Logging from "./components/Logging/Logging.tsx";
@@ -16,16 +15,17 @@ function App(){
  return (
    <>
      <header>
-        <span>© Utrecht University (ICS)</span>
        <Link to={"/"}>Home</Link>
-        <button onClick={() => setShowLogs(!showLogs)}>Developer Logs</button>
+        <button onClick={() => setShowLogs(!showLogs)}>Toggle Logging</button>
      </header>
      <div className={"flex-row justify-center flex-1 min-height-0"}>
        <main className={"flex-col align-center flex-1 scroll-y"}>
          <Routes>
            <Route path="/" element={<Home />} />
+            <Route path="/template" element={<TemplatePage />} />
            <Route path="/editor" element={<VisProg />} />
-            <Route path="/user_manual" element={<UserManual />} />
+            <Route path="/robot" element={<Robot />} />
+            <Route path="/ConnectedRobots" element={<ConnectedRobots />} />
        </Routes>
        </main>
        {showLogs && <Logging />}
--- a/src/components/Dialog.tsx
+++ b/src/components/Dialog.tsx
@@ -1,48 +0,0 @@
-import {type ReactNode, type RefObject, useEffect, useRef} from "react";
-
-export default function Dialog({
-  open,
-  close,
-  classname,
-  children,
-}: {
-  open: boolean;
-  close: () => void;
-  classname?: string;
-  children: ReactNode;
-}) {
-  const ref: RefObject<HTMLDialogElement | null> = useRef(null);
-
-  useEffect(() => {
-    if (open) {
-      ref.current?.showModal();
-    } else {
-      ref.current?.close();
-    }
-  }, [open]);
-
-  function handleClickOutside(event: React.MouseEvent) {
-    if (!ref.current) return;
-
-    const dialogDimensions = ref.current.getBoundingClientRect()
-    if (
-      event.clientX < dialogDimensions.left ||
-      event.clientX > dialogDimensions.right ||
-      event.clientY < dialogDimensions.top ||
-      event.clientY > dialogDimensions.bottom
-    ) {
-      close();
-    }
-  }
-
-  return (
-    <dialog
-      ref={ref}
-      onCancel={close}
-      onPointerDown={handleClickOutside}
-      className={classname}
-    >
-      {children}
-    </dialog>
-  );
-}
--- a/src/components/Icons/Next.tsx
+++ b/src/components/Icons/Next.tsx
@@ -1,5 +0,0 @@
-export default function Next({ fill }: { fill?: string }) {
-    return <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill={fill ?? "canvas"}>
-        <path d="M664.07-224.93v-510.14h91v510.14h-91Zm-459.14 0v-510.14L587.65-480 204.93-224.93Z"/>
-    </svg>;
-}
--- a/src/components/Icons/Pause.tsx
+++ b/src/components/Icons/Pause.tsx
@@ -1,5 +0,0 @@
-export default function Pause({ fill }: { fill?: string }) {
-    return <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill={fill ?? "canvas"}>
-        <path d="M556.17-185.41v-589.18h182v589.18h-182Zm-334.34 0v-589.18h182v589.18h-182Z"/>
-    </svg>;
-}
--- a/src/components/Icons/Play.tsx
+++ b/src/components/Icons/Play.tsx
@@ -1,5 +0,0 @@
-export default function Play({ fill }: { fill?: string }) {
-    return <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill={fill ?? "canvas"}>
-        <path d="M311.87-185.41v-589.18L775.07-480l-463.2 294.59Z"/>
-    </svg>;
-}
--- a/src/components/Icons/Redo.tsx
+++ b/src/components/Icons/Redo.tsx
@@ -1,5 +0,0 @@
-export default function Redo({ fill }: { fill?: string }) {
-    return <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill={fill ?? "canvas"}>
-        <path d="M390.98-191.87q-98.44 0-168.77-65.27-70.34-65.27-70.34-161.43 0-96.15 70.34-161.54 70.33-65.39 168.77-65.39h244.11l-98.98-98.98 63.65-63.65L808.13-600 599.76-391.87l-63.65-63.65 98.98-98.98H390.98q-60.13 0-104.12 38.92-43.99 38.93-43.99 96.78 0 57.84 43.99 96.89 43.99 39.04 104.12 39.04h286.15v91H390.98Z"/>
-    </svg>;
-}
--- a/src/components/Icons/Replay.tsx
+++ b/src/components/Icons/Replay.tsx
@@ -1,5 +0,0 @@
-export default function Replay({ fill }: { fill?: string }) {
-    return <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill={fill ?? "canvas"}>
-        <path d="M480.05-70.43q-76.72 0-143.78-29.1-67.05-29.1-116.75-78.8-49.69-49.69-78.79-116.75-29.1-67.05-29.1-143.49h91q0 115.81 80.73 196.47Q364.1-161.43 480-161.43q115.8 0 196.47-80.74 80.66-80.73 80.66-196.63 0-115.81-80.73-196.47-80.74-80.66-196.64-80.66h-6.24l60.09 60.08-58.63 60.63-166.22-166.21 166.22-166.22 58.63 60.87-59.85 59.85h6q76.74 0 143.76 29.09 67.02 29.1 116.84 78.8 49.81 49.69 78.91 116.64 29.1 66.95 29.1 143.61 0 76.66-29.1 143.71-29.1 67.06-78.79 116.75-49.7 49.7-116.7 78.8-67.01 29.1-143.73 29.1Z"/>
-    </svg>;
-}
--- a/src/components/Logging/Definitions.ts
+++ b/src/components/Logging/Definitions.ts
@@ -1,31 +0,0 @@
-import type {Cell} from "../../utils/cellStore.ts";
-import type {LogRecord} from "./useLogs.ts";
-
-/**
- * Zustand store definition for managing user preferences related to logging.
- *
- * Includes flags for toggling relative timestamps and automatic scroll behavior.
- */
-export type LoggingSettings = {
-  /** Whether to display log timestamps as relative (e.g., "2m 15s ago") instead of absolute. */
-  showRelativeTime: boolean;
-  /** Updates the `showRelativeTime` setting. */
-  setShowRelativeTime: (showRelativeTime: boolean) => void;
-};
-
-/**
- * Props for any component that renders a single log message entry.
- *
- * @param recordCell - A reactive `Cell` containing a single `LogRecord`.
- * @param onUpdate - Optional callback triggered when the log entry updates.
- */
-export type MessageComponentProps = {
-  recordCell: Cell<LogRecord>,
-  onUpdate?: () => void,
-};
-
-/**
- * Key used for the experiment filter predicate in the filter map, to exclude experiment logs from the developer logs.
- */
-export const EXPERIMENT_FILTER_KEY = "experiment_filter";
-export const EXPERIMENT_LOGGER_NAME = "experiment";
--- a/src/components/Logging/Filters.module.css
+++ b/src/components/Logging/Filters.module.css
@@ -1,8 +1,3 @@
-/*
-This program has been developed by students from the bachelor Computer Science at Utrecht
-University within the Software Project course.
-© Copyright Utrecht University (Department of Information and Computing Sciences)
-*/
 .filter-root {
  position: relative;
  display: flex;
--- a/src/components/Logging/Filters.tsx
+++ b/src/components/Logging/Filters.tsx
@@ -1,6 +1,3 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
 import {useEffect, useRef, useState} from "react";

 import type {LogFilterPredicate} from "./useLogs.ts";
@@ -16,8 +13,9 @@ type Setter<T> = (value: T | ((prev: T) => T)) => void;
 * Mapping of log level names to their corresponding numeric severity.
 * Used for comparison in log filtering predicates.
 */
-const optionMapping: Map<string, number> = new Map([
+const optionMapping = new Map([
  ["ALL", 0],
+  ["LLM", 9],
  ["DEBUG", 10],
  ["INFO", 20],
  ["WARNING", 30],
@@ -95,7 +93,7 @@ function GlobalLevelFilter({
  filterPredicates: Map<string, LogFilterPredicate>;
  setFilterPredicates: Setter<Map<string, LogFilterPredicate>>;
 }) {
-  const selected = filterPredicates.get(GLOBAL_LOG_LEVEL_PREDICATE_KEY)?.value ?? "ALL";
+  const selected = filterPredicates.get(GLOBAL_LOG_LEVEL_PREDICATE_KEY)?.value || "ALL";
  const setSelected = (selected: string | null) => {
    if (!selected || !optionMapping.has(selected)) return;

--- a/src/components/Logging/Logging.module.css
+++ b/src/components/Logging/Logging.module.css
@@ -1,8 +1,3 @@
-/*
-This program has been developed by students from the bachelor Computer Science at Utrecht
-University within the Software Project course.
-© Copyright Utrecht University (Department of Information and Computing Sciences)
-*/
 .logging-container {
  box-sizing: border-box;

@@ -10,6 +5,7 @@ University within the Software Project course.
  flex-shrink: 0;

  box-shadow: 0 0 1rem black;
+  padding: 1rem 1rem 0 1rem;
 }

 .no-numbers {
@@ -19,6 +15,8 @@ University within the Software Project course.
 }

 .log-container {
+  margin-bottom: .5rem;
+
  .accented-0, .accented-10 {
    background-color: color-mix(in oklab, canvas, rgb(159, 159, 159) 35%)
  }
@@ -34,7 +32,7 @@ University within the Software Project course.
 }

 .floating-button {
-  position: absolute;
+  position: fixed;
  bottom: 1rem;
  right: 1rem;
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.5);
--- a/src/components/Logging/Logging.tsx
+++ b/src/components/Logging/Logging.tsx
@@ -1,26 +1,38 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
-import {type ComponentType, useEffect, useRef, useState} from "react";
+import {useEffect, useRef, useState} from "react";
+import {create} from "zustand";
+
 import formatDuration from "../../utils/formatDuration.ts";
 import {type LogFilterPredicate, type LogRecord, useLogs} from "./useLogs.ts";
 import Filters from "./Filters.tsx";
 import {type Cell, useCell} from "../../utils/cellStore.ts";
+
 import styles from "./Logging.module.css";
-import {
-  EXPERIMENT_FILTER_KEY,
-  EXPERIMENT_LOGGER_NAME,
-  type LoggingSettings,
-  type MessageComponentProps
-} from "./Definitions.ts";
-import {create} from "zustand";
+

 /**
- * Local Zustand store for logging UI preferences.
+ * Zustand store definition for managing user preferences related to logging.
+ *
+ * Includes flags for toggling relative timestamps and automatic scroll behavior.
+ */
+type LoggingSettings = {
+  /** Whether to display log timestamps as relative (e.g., "2m 15s ago") instead of absolute. */
+  showRelativeTime: boolean;
+  /** Updates the `showRelativeTime` setting. */
+  setShowRelativeTime: (showRelativeTime: boolean) => void;
+  /** Whether the log view should automatically scroll to the newest entry. */
+  scrollToBottom: boolean;
+  /** Updates the `scrollToBottom` setting. */
+  setScrollToBottom: (scrollToBottom: boolean) => void;
+};
+
+/**
+ * Global Zustand store for logging UI preferences.
 */
 const useLoggingSettings = create<LoggingSettings>((set) => ({
  showRelativeTime: false,
  setShowRelativeTime: (showRelativeTime: boolean) => set({ showRelativeTime }),
+  scrollToBottom: true,
+  setScrollToBottom: (scrollToBottom: boolean) => set({ scrollToBottom }),
 }));

 /**
@@ -33,7 +45,13 @@ const useLoggingSettings = create<LoggingSettings>((set) => ({
 * @param onUpdate - Optional callback triggered when the log entry updates.
 * @returns A JSX element displaying a formatted log message.
 */
-function LogMessage({ recordCell, onUpdate }: MessageComponentProps) {
+function LogMessage({
+  recordCell,
+  onUpdate,
+}: {
+  recordCell: Cell<LogRecord>,
+  onUpdate?: () => void,
+}) {
  const { showRelativeTime, setShowRelativeTime } = useLoggingSettings();
  const record = useCell(recordCell);

@@ -51,7 +69,7 @@ function LogMessage({ recordCell, onUpdate }: MessageComponentProps) {
  /** Simplifies the logger name by showing only the last path segment. */
  const normalizedName = record.name.split(".").pop() || record.name;

-  // Notify the parent component (e.g., for scroll updates) when this record changes.
+  // Notify parent component (e.g. for scroll updates) when this record changes.
  useEffect(() => {
    if (onUpdate) onUpdate();
  }, [record, onUpdate]);
@@ -59,10 +77,11 @@ function LogMessage({ recordCell, onUpdate }: MessageComponentProps) {
  return <div className={`${styles.logContainer} round-md border-lg flex-row gap-md`}>
    <div className={`${styles[`accented${normalizedLevelNo}`]} flex-col padding-sm justify-between`}>
      <span className={"mono bold"}>{record.levelname}</span>
-      <span className={"mono clickable font-small"} onClick={() => setShowRelativeTime(!showRelativeTime)}>{
-        showRelativeTime
-          ? formatDuration(record.relativeCreated)
-          : new Date(record.created * 1000).toLocaleTimeString()
+      <span className={"mono clickable font-small"}
+        onClick={() => setShowRelativeTime(!showRelativeTime)}
+      >{showRelativeTime
+        ? formatDuration(record.relativeCreated)
+        : new Date(record.created * 1000).toLocaleTimeString()
      }</span>
    </div>
    <div className={"flex-col flex-1 padding-sm"}>
@@ -81,18 +100,12 @@ function LogMessage({ recordCell, onUpdate }: MessageComponentProps) {
 * - A floating "Scroll to bottom" button when not at the bottom.
 *
 * @param recordCells - Array of reactive log records to display.
- * @param MessageComponent - A component to use to render each log message entry.
 * @returns A scrollable log list component.
 */
-export function LogMessages({
-  recordCells,
-  MessageComponent,
-}: {
-  recordCells: Cell<LogRecord>[],
-  MessageComponent: ComponentType<MessageComponentProps>,
-}) {
+function LogMessages({ recordCells }: { recordCells: Cell<LogRecord>[] }) {
  const scrollableRef = useRef<HTMLDivElement>(null);
-  const [scrollToBottom, setScrollToBottom] = useState(true);
+  const lastElementRef = useRef<HTMLLIElement>(null)
+  const { scrollToBottom, setScrollToBottom } = useLoggingSettings();

  // Disable auto-scroll if the user manually scrolls.
  useEffect(() => {
@@ -111,28 +124,30 @@ export function LogMessages({
  }, [scrollableRef, setScrollToBottom]);

  /**
-   * Scrolls the log messages to the bottom, making the latest messages visible.
+   * Scrolls the last log message into view if auto-scroll is enabled,
+   * or if forced (e.g., user clicks "Scroll to bottom").
   *
   * @param force - If true, forces scrolling even if `scrollToBottom` is false.
   */
-  function showBottom(force = false) {
-    if ((!scrollToBottom && !force) || !scrollableRef.current) return;
-    scrollableRef.current.scrollTo({top: scrollableRef.current.scrollHeight, left: 0, behavior: "smooth"});
+  function scrollLastElementIntoView(force = false) {
+    if ((!scrollToBottom && !force) || !lastElementRef.current) return;
+    lastElementRef.current.scrollIntoView({ behavior: "smooth" });
  }

-  return <div ref={scrollableRef} className={"min-height-0 scroll-y padding-h-lg padding-b-lg flex-1"}>
+  return <div ref={scrollableRef} className={"min-height-0 scroll-y padding-b-md"}>
    <ol className={`${styles.noNumbers} margin-0 flex-col gap-md`}>
      {recordCells.map((recordCell, i) => (
        <li key={`${i}_${recordCell.get().firstRelativeCreated}`}>
-          <MessageComponent recordCell={recordCell} onUpdate={showBottom} />
+          <LogMessage recordCell={recordCell} onUpdate={scrollLastElementIntoView} />
        </li>
      ))}
+      <li ref={lastElementRef}></li>
    </ol>
    {!scrollToBottom && <button
      className={styles.floatingButton}
      onClick={() => {
        setScrollToBottom(true);
-        showBottom(true);
+        scrollLastElementIntoView(true);
      }}
    >
      Scroll to bottom
@@ -149,27 +164,16 @@ export function LogMessages({
 * - Zustand-managed UI settings (auto-scroll, timestamp display).
 *
 * This component uses the `useLogs` hook to fetch and filter logs based on
- * active predicates and re-renders automatically as new logs arrive.
+ * active predicates, and re-renders automatically as new logs arrive.
 *
 * @returns The complete logging UI as a React element.
 */
 export default function Logging() {
-  // By default, filter experiment logs from this debug logger
-  const [filterPredicates, setFilterPredicates] = useState(new Map<string, LogFilterPredicate>([
-    [
-      EXPERIMENT_FILTER_KEY,
-      {
-        predicate: (r) => r.name == EXPERIMENT_LOGGER_NAME ? false : null,
-        priority: 999,
-        value: null,
-      } as LogFilterPredicate,
-    ],
-  ]));
+  const [filterPredicates, setFilterPredicates] = useState(new Map<string, LogFilterPredicate>());
  const { filteredLogs, distinctNames } = useLogs(filterPredicates)
-  distinctNames.delete(EXPERIMENT_LOGGER_NAME);

-  return <div className={`flex-col min-height-0 relative ${styles.loggingContainer}`}>
-    <div className={"flex-row gap-lg justify-between align-center padding-lg"}>
+  return <div className={`flex-col gap-lg min-height-0 ${styles.loggingContainer}`}>
+    <div className={"flex-row gap-lg justify-between align-center"}>
      <h2 className={"margin-0"}>Logs</h2>
      <Filters
        filterPredicates={filterPredicates}
@@ -177,6 +181,6 @@ export default function Logging() {
        agentNames={distinctNames}
      />
    </div>
-    <LogMessages recordCells={filteredLogs} MessageComponent={LogMessage} />
+    <LogMessages recordCells={filteredLogs} />
  </div>;
 }
--- a/src/components/Logging/useLogs.ts
+++ b/src/components/Logging/useLogs.ts
@@ -1,26 +1,7 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
 import {useCallback, useEffect, useRef, useState} from "react";

 import {applyPriorityPredicates, type PriorityFilterPredicate} from "../../utils/priorityFiltering.ts";
 import {cell, type Cell} from "../../utils/cellStore.ts";
-import { API_BASE_URL } from "../../config/api.ts";
-
-type ExtraLevelName = 'LLM' | 'OBSERVATION' | 'ACTION' | 'CHAT';
-
-export type LevelName = ExtraLevelName | 'DEBUG' | 'INFO' | 'WARNING' | 'ERROR' | 'CRITICAL' | string;
-
-/**
- * Extra fields that are added to log records in the backend but are not part of the standard `LogRecord` type.
- *
- * @property reference - (Optional) A reference identifier linking related log messages.
- * @property role - (Optional) For chat log messages, the role of the agent that generated the message.
- */
-type ExtraLogRecordFields = {
-  reference?: string;
-  role?: string;
-}

 /**
 * Represents a single log record emitted by the backend logging system.
@@ -31,19 +12,21 @@ type ExtraLogRecordFields = {
 * @property levelno - The numeric severity value corresponding to `levelname`.
 * @property created - The UNIX timestamp (in seconds) when this record was created.
 * @property relativeCreated - The time (in milliseconds) since the logging system started.
+ * @property reference - (Optional) A reference identifier linking related log messages.
 * @property firstCreated - Timestamp of the first log in this reference group.
 * @property firstRelativeCreated - Relative timestamp of the first log in this reference group.
 */
 export type LogRecord = {
  name: string;
  message: string;
-  levelname: LevelName;
+  levelname: 'LLM' | 'DEBUG' | 'INFO' | 'WARNING' | 'ERROR' | 'CRITICAL' | string;
  levelno: number;
  created: number;
  relativeCreated: number;
+  reference?: string;
  firstCreated: number;
  firstRelativeCreated: number;
-} & ExtraLogRecordFields;
+};

 /**
 * A log filter predicate with priority support, used to determine whether
@@ -54,7 +37,7 @@ export type LogRecord = {
 *
 * @template T - The type of record being filtered (here, `LogRecord`).
 */
-export type LogFilterPredicate = PriorityFilterPredicate<LogRecord> & {
+export type LogFilterPredicate = PriorityFilterPredicate<LogRecord> & { 
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  value: any };

@@ -211,7 +194,7 @@ export function useLogs(filterPredicates: Map<string, LogFilterPredicate>) {
    // Only create one SSE connection for the lifetime of the hook.
    if (sseRef.current) return;

-    const es = new EventSource(`${API_BASE_URL}/logs/stream`);
+    const es = new EventSource("http://localhost:8000/logs/stream");
    sseRef.current = es;

    es.onmessage = (event) => {
--- a/src/components/MultilineTextField.tsx
+++ b/src/components/MultilineTextField.tsx
@@ -1,6 +1,3 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
 import { useEffect, useRef, useState } from "react";
 import styles from "./TextField.module.css";

--- a/src/components/ScrollIntoView.tsx
+++ b/src/components/ScrollIntoView.tsx
@@ -1,6 +1,3 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
 import {useEffect, useRef} from "react";

 /**
--- a/src/components/TextField.module.css
+++ b/src/components/TextField.module.css
@@ -1,8 +1,3 @@
-/*
-This program has been developed by students from the bachelor Computer Science at Utrecht
-University within the Software Project course.
-© Copyright Utrecht University (Department of Information and Computing Sciences)
-*/
 .text-field {
  border: 1px solid transparent;
  border-radius: 5pt;
--- a/src/components/TextField.tsx
+++ b/src/components/TextField.tsx
@@ -1,6 +1,3 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
 import {useEffect, useState} from "react";
 import styles from "./TextField.module.css";

--- a/src/components/components.tsx
+++ b/src/components/components.tsx
@@ -1,6 +1,3 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
 import { useState } from 'react'

 /**
--- a/src/config/api.ts
+++ b/src/config/api.ts
@@ -1,11 +0,0 @@
-declare const __VITE_API_BASE_URL__: string | undefined;
-
-const DEFAULT_API_BASE_URL = "http://localhost:8000";
-
-const rawApiBaseUrl =
-  (typeof __VITE_API_BASE_URL__ !== "undefined" ? __VITE_API_BASE_URL__ : undefined) ??
-  DEFAULT_API_BASE_URL;
-
-export const API_BASE_URL = rawApiBaseUrl.endsWith("/")
-  ? rawApiBaseUrl.slice(0, -1)
-  : rawApiBaseUrl;
--- a/src/index.css
+++ b/src/index.css
@@ -1,9 +1,3 @@
-/*
-This program has been developed by students from the bachelor Computer Science at Utrecht
-University within the Software Project course.
-© Copyright Utrecht University (Department of Information and Computing Sciences)
-*/
-
 :root {
  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
@@ -58,7 +52,7 @@ button {
  font-size: 1em;
  font-weight: 500;
  font-family: inherit;
-  background-color: canvas;
+  background-color: #1a1a1a;
  cursor: pointer;
  transition: border-color 0.25s;
 }
@@ -81,6 +75,9 @@ button:focus-visible {
    --dropdown-menu-background-color: rgb(247, 247, 247);
    --dropdown-menu-border: rgba(207, 207, 207, 0.986);
  }
+  button {
+    background-color: #f9f9f9;
+  }
 }

@media (prefers-color-scheme: dark) {
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,6 +1,3 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import { BrowserRouter } from 'react-router'
--- a/src/pages/ConnectedRobots/ConnectedRobots.tsx
+++ b/src/pages/ConnectedRobots/ConnectedRobots.tsx
@@ -0,0 +1,60 @@
+import { useEffect, useState } from 'react'
+
+/**
+ * Displays the current connection status of a robot in real time.
+ *
+ * Opens an SSE connection to the backend (`/robot/ping_stream`) that emits
+ * simple boolean JSON messages (`true` or `false`). Updates automatically when
+ * the robot connects or disconnects.
+ *
+ * @returns A React element showing the current robot connection status.
+ */
+export default function ConnectedRobots() {
+  
+  /**
+   * 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>
+      <h1>Is robot currently connected?</h1>
+      <div>
+        <h2>Robot is currently: {connected == null ? "checking..." : (connected ? "connected! 🟢" : "not connected... 🔴")} </h2>
+        <h3>
+          {connected == null ? "If checking continues, make sure CB is properly loaded with robot at least once." : ""}
+        </h3>
+      </div>
+    </div>
+  );
+}
--- a/src/pages/Home/Home.module.css
+++ b/src/pages/Home/Home.module.css
@@ -1,8 +1,3 @@
-/*
-This program has been developed by students from the bachelor Computer Science at Utrecht
-University within the Software Project course.
-© Copyright Utrecht University (Department of Information and Computing Sciences)
-*/
 .read_the_docs {
  color: #888;
 }
@@ -26,52 +21,4 @@ University within the Software Project course.
  display: flex;
  flex-direction: column;
  gap: 1em;
-}
-
-.links {
-  display: flex;
-  flex-direction: row; /* Horizontal layout looks more like a dashboard */
-  gap: 1.5rem;
-  justify-content: center;
-  margin-top: 2rem;
-}
-
-.navCard {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 1rem 2rem;
-  min-width: 180px;
-  background-color: #ffffff;
-  color: #333;
-  text-decoration: none;
-  font-weight: 600;
-  border-radius: 12px;
-  border: 1px solid #e0e0e0;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
-  transition: all 0.2s ease-in-out;
-}
-
-/* Hover effects */
-.navCard:hover {
-  transform: translateY(-4px);
-  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
-  border-color: #ffcd00; /* UU Yellow accent */
-  color: #000;
-}
-
-/* Specific styling for the logo container */
-.logoPepperScaling {
-  display: flex;
-  justify-content: center;
-  transition: transform 0.3s ease;
-}
-
-.logoPepperScaling:hover {
-  transform: scale(1.05);
-}
-
-.logopepper {
-  height: 120px;
-  width: auto;
 }
--- a/src/pages/Home/Home.tsx
+++ b/src/pages/Home/Home.tsx
@@ -1,6 +1,3 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
 import { Link } from 'react-router'
 import pepperLogo from '../../assets/pepper_transp2_small.svg'
 import styles from './Home.module.css'
@@ -16,20 +13,16 @@ import styles from './Home.module.css'
 function Home() {
  return (
    <div className={`flex-col ${styles.gapXl}`}>
-      <div className={styles.logoPepperScaling}>
-        <a href="https://git.science.uu.nl/ics/sp/2025/n25b" target="_blank" rel="noreferrer">
-          <img src={pepperLogo} className={styles.logopepper} alt="Pepper logo" />
+      <div className="logoPepperScaling">
+        <a href="https://git.science.uu.nl/ics/sp/2025/n25b" target="_blank">
+          <img src={pepperLogo} className="logopepper" alt="Pepper logo" />
        </a>
      </div>
-      
      <div className={styles.links}>
-        {/* Program Editor is now first */}
-        <Link to="/editor" className={styles.navCard}>
-          Program Editor
-        </Link>
-        <Link to="/user_manual" className={styles.navCard}>
-          User and Developer Manual
-        </Link>
+        <Link to={"/robot"}>Robot Interaction →</Link>
+        <Link to={"/editor"}>Editor →</Link>
+        <Link to={"/template"}>Template →</Link>
+        <Link to={"/ConnectedRobots"}>Connected Robots →</Link>
      </div>
    </div>
  )
--- a/src/pages/Manuals/Manuals.module.css
+++ b/src/pages/Manuals/Manuals.module.css
@@ -1,81 +0,0 @@
-/* This program has been developed by students from the bachelor Computer Science at Utrecht
-University within the Software Project course.
-© Copyright Utrecht University (Department of Information and Computing Sciences)
-*/
-
-.manualContainer {
-  width: 100%;
-  max-width: 800px;
-  margin: 4rem auto;
-  padding: 2rem;
-  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-  text-align: center;
-}
-
-.manualHeader h1 {
-  font-size: 2.2rem;
-  margin-bottom: 0.5rem;
-}
-
-.buttonStack {
-  display: flex;
-  flex-direction: column; /* Stacks the manual sections vertically */
-  gap: 3rem;
-  margin-top: 3rem;
-  align-items: center;
-}
-
-.manualEntry {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.manualEntry h3 {
-  margin: 0;
-  font-size: 1.4rem;
-}
-
-.manualEntry p {
-  color: #666;
-  margin-bottom: 0.5rem;
-}
-
-.downloadBtn {
-  display: inline-block;
-  background-color: #ffffff; /* White background as requested */
-  color: #000;
-  padding: 1rem 2rem;
-  border-radius: 50px;
-  text-decoration: none;
-  font-weight: 700;
-  font-size: 1.1rem;
-  width: 280px; /* Fixed width for uniform appearance */
-  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
-  transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
-}
-
-.downloadBtn:hover {
-  transform: translateY(-3px);
-  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
-  background-color: #247284; /* Teal hover as requested */
-  color: #ffffff; /* Text turns white on teal for better contrast */
-}
-
-.dateBadge {
-  display: inline-block;
-  margin-top: 1rem;
-  padding: 0.4rem 1rem;
-  background-color: #f0f0f0;
-  border-radius: 4px;
-  font-size: 0.85rem;
-  color: #888;
-}
-
-.divider {
-  margin-top: 4rem;
-  border: 0;
-  border-top: 1px solid #eee;
-  width: 60%;
-}
--- a/src/pages/Manuals/Manuals.tsx
+++ b/src/pages/Manuals/Manuals.tsx
@@ -1,39 +0,0 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
-import styles from './Manuals.module.css';
-
-export default function Manuals() {
-  const userManualPath = "/UserManual.pdf"; 
-  const developerManualPath = "/DeveloperManual.pdf"; 
-
-  return (
-    <div className={styles.manualContainer}>
-      <header className={styles.manualHeader}>
-        <h1>Documentation & Manuals</h1>
-
-      <span className={styles.dateBadge}>Last Updated: January 2026</span>
-      </header>
-
-      <div className={styles.buttonStack}>
-        <div className={styles.manualEntry}>
-          <h3>User Manual</h3>
-          <p>Manual for Users of the Pepper+ Software </p>
-          <a href={userManualPath} download="UserManual.pdf" className={styles.downloadBtn}>
-            Download User Manual
-          </a>
-        </div>
-
-        <div className={styles.manualEntry}>
-          <h3>Developer Manual</h3>
-          <p>Technical documentation for future developers.</p>
-          <a href={developerManualPath} download="DeveloperManual.pdf" className={styles.downloadBtn}>
-            Download Developer Manual
-          </a>
-        </div>
-      </div>
-
-      <hr className={styles.divider} />
-    </div> 
-  );
-}
--- a/src/pages/MonitoringPage/MonitoringPageComponents.tsx
+++ b/src/pages/MonitoringPage/MonitoringPageComponents.tsx
@@ -1,27 +1,34 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
 import React, { useEffect, useState } from 'react';
 import styles from './MonitoringPage.module.css';
-import { sendAPICall } from './MonitoringPageAPI';
-import { API_BASE_URL } from '../../config/api.ts';
+
+/**
+ * HELPER: Unified sender function
+ */
+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: "Wave", value: "animations/Stand/Gestures/Hey_1" }, 
-    { label: "Think", value: "animations/Stand/Emotions/Neutral/Puzzled_1" }, 
-    { label: "Explain", value: "animations/Stand/Gestures/Explain_4" }, 
-    { label: "You", value: "animations/Stand/Gestures/You_1" }, 
-    { label: "Happy", value: "animations/Stand/Emotions/Positive/Happy_1" }, 
-    { label: "Laugh", value: "animations/Stand/Emotions/Positive/Laugh_2" }, 
-    { label: "Lonely", value: "animations/Stand/Emotions/Neutral/Lonely_1" }, 
-    { label: "Suprise", value: "animations/Stand/Emotions/Negative/Surprise_1" }, 
-    { label: "Hurt", value: "animations/Stand/Emotions/Negative/Hurt_2" }, 
-    { label: "Angry", value: "animations/Stand/Emotions/Negative/Angry_4" },
+    { 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>
@@ -32,7 +39,7 @@ export const GestureControls: React.FC = () => {
        >
          {gestures.map(g => <option key={g.value} value={g.value}>{g.label}</option>)}
        </select>
-        <button onClick={() => sendAPICall("gesture", selectedGesture)}>
+        <button onClick={() => sendUserInterrupt("gesture", selectedGesture)}>
          Actuate
        </button>
      </div>
@@ -56,7 +63,7 @@ export const SpeechPresets: React.FC = () => {
          <li key={i}>
            <button 
              className={styles.speechBtn} 
-              onClick={() =>  sendAPICall("speech", phrase.text)}
+              onClick={() => sendUserInterrupt("speech", phrase.text)}
            >
              "{phrase.label}"
            </button>
@@ -73,7 +80,7 @@ export const DirectSpeechInput: React.FC = () => {

  const handleSend = () => {
    if (!text.trim()) return;
-    sendAPICall("speech", text);
+    sendUserInterrupt("speech", text);
    setText(""); // Clear after sending
  };

@@ -95,14 +102,12 @@ export const DirectSpeechInput: React.FC = () => {
 };

 // --- interface for goals/triggers/norms/conditional norms ---
-export type StatusItem = {
+type StatusItem = {
  id?: string | number;
  achieved?: boolean;
  description?: string;
  label?: string;
  norm?: string;
-  name?: string;
-  level?: number;
 };

 interface StatusListProps {
@@ -110,7 +115,6 @@ interface StatusListProps {
  items: StatusItem[];
  type: 'goal' | 'trigger' | 'norm'| 'cond_norm';
  activeIds: Record<string, boolean>;
-  setActiveIds?: React.Dispatch<React.SetStateAction<Record<string, boolean>>>; 
  currentGoalIndex?: number;
 }

@@ -120,7 +124,6 @@ export const StatusList: React.FC<StatusListProps> = ({
  items, 
  type, 
  activeIds, 
-  setActiveIds,
  currentGoalIndex // Destructure this prop
 }) => {
  return (
@@ -131,31 +134,17 @@ export const StatusList: React.FC<StatusListProps> = ({
          if (item.id === undefined) return null;
          const isActive = !!activeIds[item.id];
          const showIndicator = type !== 'norm';
-          const isCurrentGoal = type === 'goal' && idx === currentGoalIndex;
-          const canOverride =  (showIndicator && !isActive) || (type === 'cond_norm' && isActive); 
+          const canOverride = showIndicator && !isActive;

-         const indentation = (item.level || 0) * 20;
+          const isCurrentGoal = type === 'goal' && idx === currentGoalIndex;

          const handleOverrideClick = () => {
            if (!canOverride) return;
-            if (type === 'cond_norm' && isActive){  
-              {/* Unachieve conditional norm */}
-              sendAPICall("override_unachieve", String(item.id));
-            }
-            else {
-              if(type === 'goal')
-                if(setActiveIds)
-                {setActiveIds(prev => ({ ...prev, [String(item.id)]: true }));}
-            
-              sendAPICall("override", String(item.id));
-            }
+            sendUserInterrupt("override", String(item.id));
          };

          return (
-            <li key={item.id ?? idx} 
-            className={styles.statusItem}
-            style={{ paddingLeft: `${indentation}px` }}
-            >
+            <li key={item.id ?? idx} className={styles.statusItem}>
              {showIndicator && (
                <span 
                  className={`${styles.statusIndicator} ${isActive ? styles.active : styles.inactive} ${canOverride ? styles.clickable : ''}`}
@@ -176,7 +165,7 @@ export const StatusList: React.FC<StatusListProps> = ({
                  borderRadius: '4px'
                }}
              >
-                {item.name || item.norm}
+                {item.description || item.label || item.norm}
                {isCurrentGoal && " (Current)"} 
              </span>
            </li>
@@ -202,12 +191,11 @@ export const RobotConnected = () => {
    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(`${API_BASE_URL}/robot/ping_stream`);
+      const eventSource = new EventSource("http://localhost:8000/robot/ping_stream");
      eventSource.onmessage = (event) => {
      
        // Expecting messages in JSON format: `true` or `false`
-        //commented out this log as it clutters console logs, but might be useful to debug
-        //console.log("received message:", event.data);
+        console.log("received message:", event.data);
        try {
          const data = JSON.parse(event.data);
  
@@ -233,4 +221,4 @@ export const RobotConnected = () => {
    <p className={connected ? styles.connected : styles.disconnected }>{connected ? "● Robot is connected" : "● Robot is disconnected"}</p>
  </div>
  )
-}
+}
--- a/src/pages/MonitoringPage/MonitoringPage.module.css
+++ b/src/pages/MonitoringPage/MonitoringPage.module.css
@@ -1,8 +1,3 @@
-/*
-This program has been developed by students from the bachelor Computer Science at Utrecht
-University within the Software Project course.
-© Copyright Utrecht University (Department of Information and Computing Sciences)
-*/
 .dashboardContainer {
  display: grid;
  grid-template-columns: 2fr 1fr; /* Left = content, Right = logs */
@@ -33,22 +28,6 @@ University within the Software Project course.
  position: static; /* ensures it scrolls away */
 }

-.controlsButtons {
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  gap: .25rem;
-  max-width: 260px;
-  flex-wrap: wrap;
-
-  button {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-}
-
 .phaseProgress {
  margin-top: 0.5rem;
 }
@@ -98,8 +77,8 @@ University within the Software Project course.
  color: white;
 }

-.stop {
-  background-color: red;
+.restartPhase{
+  background-color: rgb(255, 123, 0);
  color: white;
 }

@@ -185,14 +164,6 @@ University within the Software Project course.
  font-size: 1.1rem;
 }

-.statusIndicator.clickable {
-  cursor: pointer;
-}
-
-.statusIndicator.clickable:hover {
-  transform: scale(1.2);
-}
-
 .clickable {
  cursor: pointer;
 }
@@ -202,6 +173,7 @@ University within the Software Project course.
 }

 .active {
+  cursor: default; 
  opacity: 1;
 }

@@ -215,6 +187,32 @@ University within the Software Project course.
  line-height: 1.4;
 }

+/* LOGS */
+.logs {
+  grid-area: logs;
+  background: var(--bg-surface);
+  color: var(--text-main);
+  box-shadow: var(--panel-shadow);
+  padding: 1rem;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+}
+
+.logs textarea {
+  width: 100%;
+  height: 83%;
+  margin-top: 0.5rem;
+  background-color: Canvas;
+  color: CanvasText;
+  border: 1px solid var(--border-color);
+}
+
+.logs button {
+  background: var(--bg-surface);
+  box-shadow: var(--panel-shadow);
+  margin-top: 0.5rem;
+  margin-left: 0.5rem;
+}
+
 /* FOOTER */
 .controlsSection {
  grid-area: footer;
--- a/src/pages/MonitoringPage/MonitoringPage.tsx
+++ b/src/pages/MonitoringPage/MonitoringPage.tsx
@@ -1,402 +1,338 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
-import React, { useCallback, useState } from 'react';
+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, useExperimentLogger, pauseExperiment, playExperiment, resetExperiment, resetPhase, type ExperimentStreamData, type GoalUpdate, type TriggerUpdate, type CondNormsStateUpdate, type PhaseUpdate } from ".//MonitoringPageAPI.ts"

-// Store & API
-import useProgramStore from "../../utils/programStore";
-import {
-  nextPhase,
-  stopExperiment,
-  useExperimentLogger,
-  useStatusLogger,
-  pauseExperiment,
-  playExperiment,
-  type ExperimentStreamData,
-  type GoalUpdate,
-  type TriggerUpdate,
-  type CondNormsStateUpdate,
-  type PhaseUpdate
-} from "./MonitoringPageAPI";
-import { graphReducer, runProgram } from '../VisProgPage/VisProgLogic.ts';
+import type { NormNodeData } from '../VisProgPage/visualProgrammingUI/nodes/NormNode.tsx';

-// Types
-import type { NormNodeData } from '../VisProgPage/visualProgrammingUI/nodes/NormNode';
-import type { GoalNode } from '../VisProgPage/visualProgrammingUI/nodes/GoalNode';
-import type { TriggerNode } from '../VisProgPage/visualProgrammingUI/nodes/TriggerNode';
+// Stream message types are defined in MonitoringPageAPI as `ExperimentStreamData`.
+// Types for reduced program items (output from node reducers):
+export type ReducedPlanStep = {
+  id: string;
+  text?: string;
+  gesture?: { type: string; name?: string };
+  goal?: string;
+} & Record<string, unknown>;

-// Sub-components
-import {
-  GestureControls,
-  SpeechPresets,
-  DirectSpeechInput,
-  StatusList,
-  RobotConnected
-} from './MonitoringPageComponents';
-import ExperimentLogs from "./components/ExperimentLogs.tsx";
+export type ReducedPlan = { id: string; steps: ReducedPlanStep[] } | "";

-// ----------------------------------------------------------------------
-// 1. State management
-// ----------------------------------------------------------------------
+export type ReducedGoal = { id: string; name: string; description?: string; can_fail?: boolean; plan?: ReducedPlan };

-/**
- * Manages the state of the active experiment, including phase progression,
- * goal tracking, and stream event listeners.
- */
-function useExperimentLogic() {
+export type ReducedCondition = {
+  id: string;
+  keyword?: string;
+  emotion?: string;
+  object?: string;
+  name?: string;
+  description?: string;
+} & Record<string, unknown>;
+
+export type ReducedTrigger = { id: string; name: string; condition?: ReducedCondition | ""; plan?: ReducedPlan };
+
+export type ReducedNorm = { id: string; label?: string; norm?: string; condition?: ReducedCondition | "" };
+
+
+const MonitoringPage: React.FC = () => {
  const getPhaseIds = useProgramStore((s) => s.getPhaseIds);
-  const getPhaseNames = useProgramStore((s) => s.getPhaseNames);
+  const getNormsInPhase = useProgramStore((s) => s.getNormsInPhase);
  const getGoalsInPhase = useProgramStore((s) => s.getGoalsInPhase);
-  const setProgramState = useProgramStore((state) => state.setProgramState);
+  const getTriggersInPhase = useProgramStore((s) => s.getTriggersInPhase);

-  const [loading, setLoading] = useState(false);
-  const [activeIds, setActiveIds] = useState<Record<string, boolean>>({});
-  const [goalIndex, setGoalIndex] = useState(0);
-  const [isPlaying, setIsPlaying] = useState(false);
-  const [phaseIndex, setPhaseIndex] = useState(0);
-  const [isFinished, setIsFinished] = useState(false);
+  // Can be used to block actions until feedback from CB.
+  const [loading, setLoading] = React.useState(false);
+  const [activeIds, setActiveIds] = React.useState<Record<string, boolean>>({});
+  const [goalIndex, setGoalIndex] = React.useState(0);
+  const [isPlaying, setIsPlaying] = React.useState(false);

  const phaseIds = getPhaseIds();
-  const phaseNames = getPhaseNames();
+  
+  const [phaseIndex, setPhaseIndex] = React.useState(0);
+  
+  //see if we reached end node
+  const [isFinished, setIsFinished] = React.useState(false); 

-  // --- Stream Handlers ---
-
-  const handleStreamUpdate = useCallback((data: ExperimentStreamData) => {
+  const handleStreamUpdate = React.useCallback((data: ExperimentStreamData) => {
+    // Check for phase updates
    if (data.type === 'phase_update' && data.id) {
      const payload = data as PhaseUpdate;
-      console.log(`${data.type} received, id : ${data.id}`);
-
      if (payload.id === "end") {
        setIsFinished(true);
      } else {
        setIsFinished(false);
-        const newIndex = getPhaseIds().indexOf(payload.id);
+
+        const allIds = getPhaseIds();
+        const newIndex = allIds.indexOf(payload.id);
        if (newIndex !== -1) {
-          setPhaseIndex(newIndex);
-          setGoalIndex(0);
+            setPhaseIndex(newIndex);
+            setGoalIndex(0);
        }
      }
-    }
+    } 
    else if (data.type === 'goal_update') {
-      const payload = data as GoalUpdate;
-      const currentPhaseGoals = getGoalsInPhase(phaseIds[phaseIndex]) as GoalNode[];
-      const gIndex = currentPhaseGoals.findIndex((g) => g.id === payload.id);
+    const payload = data as GoalUpdate;
+    const currentPhaseGoals = getGoalsInPhase(phaseIds[phaseIndex]) as ReducedGoal[];
+    const gIndex = currentPhaseGoals.findIndex((g: ReducedGoal) => g.id === payload.id);

-      console.log(`${data.type} received, id : ${data.id}`);
+    if (gIndex !== -1) {
+      //set current goal to the goal that is just started
+      setGoalIndex(gIndex);

-      if (gIndex === -1) {
-        console.warn(`Goal ${payload.id} not found in phase ${phaseNames[phaseIndex]}`);
-      } else {
-        setGoalIndex(gIndex);
-        // Mark all previous goals as achieved
-        setActiveIds((prev) => {
-          const nextState = { ...prev };
-          for (let i = 0; i < gIndex; i++) {
-            nextState[currentPhaseGoals[i].id] = true;
-          }
-          return nextState;
-        });
-      }
+      // All previous goals are set to "active" which means they are achieved
+      setActiveIds((prev) => {
+        const nextState = { ...prev };
+        
+        // We loop until i is LESS than gIndex.
+        // This leaves currentPhaseGoals[gIndex] as isActive: false.
+        for (let i = 0; i < gIndex; i++) {
+          nextState[currentPhaseGoals[i].id ] = true;
+        }
+
+        return nextState;
+      });
+
+      console.log(`Now pursuing goal: ${payload.id}. Previous goals marked achieved.`);
    }
+  }
+
    else if (data.type === 'trigger_update') {
-      const payload = data as TriggerUpdate;
-      setActiveIds((prev) => ({ ...prev, [payload.id]: payload.achieved }));
-    }
-  }, [getPhaseIds, getGoalsInPhase, phaseIds, phaseIndex, phaseNames]);
-
-  const handleStatusUpdate = useCallback((data: unknown) => {
+    const payload = data as TriggerUpdate;
+    setActiveIds((prev) => ({
+      ...prev,
+      [payload.id]: payload.achieved
+    }));
+  }
+  else if (data.type === 'cond_norms_state_update') {
    const payload = data as CondNormsStateUpdate;
-    if (payload.type !== 'cond_norms_state_update') return;
-
    setActiveIds((prev) => {
-      const hasChanges = payload.norms.some((u) => prev[u.id] !== u.active);
-      if (!hasChanges) return prev;
-
      const nextState = { ...prev };
-      payload.norms.forEach((u) => { nextState[u.id] = u.active; });
+      // payload.norms is typed on the union, so safe to use directly
+      payload.norms.forEach((normUpdate) => {
+        nextState[normUpdate.id] = normUpdate.active;
+        console.log(`Conditional norm ${normUpdate.id} set to active: ${normUpdate.active}`);
+      });
+
      return nextState;
    });
-  }, []);
+    console.log("Updated conditional norms state:", payload.norms);
+  }
+}, [getPhaseIds, getGoalsInPhase, phaseIds, phaseIndex]);

-  // Connect listeners
  useExperimentLogger(handleStreamUpdate);
-  useStatusLogger(handleStatusUpdate);

-  // --- Actions ---
+  if (phaseIds.length === 0) {
+    return <p className={styles.empty}>No program loaded.</p>;
+  }

-  const resetExperiment = useCallback(async () => {
+  const phaseId = phaseIds[phaseIndex];
+
+  const goals = (getGoalsInPhase(phaseId) as ReducedGoal[]).map(g => ({
+    ...g,
+    label: g.name,
+    achieved: activeIds[g.id] ?? false,
+  }));
+
+
+  const triggers = (getTriggersInPhase(phaseId) as ReducedTrigger[]).map(t => ({
+    ...t,
+    label: (() => {
+
+      let prefix = "";
+      if (t.condition && typeof t.condition !== "string" && "keyword" in t.condition && typeof t.condition.keyword === "string") {
+        prefix = `if keywords said: "${t.condition.keyword}"`;
+      } else if (t.condition && typeof t.condition !== "string" && "name" in t.condition && typeof t.condition.name === "string") {
+        prefix = `if LLM belief: ${t.condition.name}`;
+      } else { //fallback
+        prefix = t.name || "Trigger"; // use typed `name` as a reliable fallback
+      }
+
+ 
+      const stepLabels = (t.plan && typeof t.plan !== "string" ? t.plan.steps : []).map((step: ReducedPlanStep) => {
+        if ("text" in step && typeof step.text === "string") {
+          return `say: "${step.text}"`;
+        }
+        if ("gesture" in step && step.gesture) {
+          const g = step.gesture;
+          return `perform gesture: ${g.name || g.type}`;
+        }
+        if ("goal" in step && typeof step.goal === "string") {
+          return `perform LLM: ${step.goal}`;
+        }
+        return "Action"; // Fallback
+      }) || [];
+
+      const planText = stepLabels.length > 0 
+        ? `➔ Do: ${stepLabels.join(", ")}` 
+        : "➔ (No actions set)";
+
+      return `${prefix} ${planText}`;
+    })(),
+    isActive: activeIds[t.id] ?? false 
+  }));
+
+  const norms = (getNormsInPhase(phaseId) as NormNodeData[])
+    .filter(n => !n.condition)
+    .map(n => ({
+      ...n,
+      label: n.norm, 
+    }));
+    const conditionalNorms = (getNormsInPhase(phaseId) as ReducedNorm[])
+    .filter(n => !!n.condition) // Only items with a condition
+    .map(n => ({
+      ...n,
+      label: (() => {
+        let prefix = "";
+        if (n.condition && typeof n.condition !== "string" && "keyword" in n.condition && typeof n.condition.keyword === "string") {
+          prefix = `if keywords said: "${n.condition.keyword}"`;
+        } else if (n.condition && typeof n.condition !== "string" && "name" in n.condition && typeof n.condition.name === "string") {
+          prefix = `if LLM belief: ${n.condition.name}`;
+        }
+        
+    
+        return `${prefix} ➔ Norm: ${n.norm}`;
+      })(),
+      achieved: activeIds[n.id] ?? false
+    }));
+
+  // Handle logic of 'next' button.
+
+  const handleButton = async (button: string, _context?: string, _endpoint?: string) => {
    try {
      setLoading(true);
-      const phases = graphReducer();
-      setProgramState({ phases });
-
-      setActiveIds({});
-      setPhaseIndex(0);
-      setGoalIndex(0);
-      setIsFinished(false);
-
-      await runProgram();
-      console.log("Experiment & UI successfully reset.");
-    } catch (err) {
-      console.error("Failed to reset program:", err);
-    } finally {
-      setLoading(false);
-    }
-  }, [setProgramState]);
-
-  const handleControlAction = async (action: "pause" | "play" | "nextPhase" | "stop") => {
-    try {
-      setLoading(true);
-      switch (action) {
+      switch (button)  {
        case "pause":
-          setIsPlaying(false);
          await pauseExperiment();
          break;
        case "play":
-          setIsPlaying(true);
          await playExperiment();
          break;
        case "nextPhase":
          await nextPhase();
          break;
-        case "stop":
-          await stopExperiment();
+        case "resetPhase":
+          await resetPhase();
          break;
+        case "resetExperiment":
+          await resetExperiment();
+          break;
+        default:
      }
    } catch (err) {
      console.error(err);
    } finally {
      setLoading(false);
    }
-  };
-
-  return {
-    loading,
-    isPlaying,
-    isFinished,
-    phaseIds,
-    phaseNames,
-    phaseIndex,
-    goalIndex,
-    activeIds,
-    setActiveIds,
-    resetExperiment,
-    handleControlAction,
-  };
-}
-
-// ----------------------------------------------------------------------
-// 2. Smaller Presentation Components
-// ----------------------------------------------------------------------
-
-/**
- * Visual indicator of progress through experiment phases.
- */
-function PhaseProgressBar({
-  phaseIds,
-  phaseIndex,
-  isFinished
-}: {
-  phaseIds: string[],
-  phaseIndex: number,
-  isFinished: boolean
-}) {
-  return (
-    <div className={styles.phaseProgress}>
-      {phaseIds.map((id, index) => {
-        let statusClass = "";
-        if (isFinished || index < phaseIndex) statusClass = styles.completed;
-        else if (index === phaseIndex) statusClass = styles.current;
-
-        return (
-          <span key={id} className={`${styles.phase} ${statusClass}`}>
-            {index + 1}
-          </span>
-        );
-      })}
-    </div>
-  );
-}
-
-/**
- * Main control buttons (Play, Pause, Next, Reset).
- */
-function ControlPanel({
-  loading,
-  isPlaying,
-  onAction,
-  onReset
-}: {
-  loading: boolean,
-  isPlaying: boolean,
-  onAction: (a: "pause" | "play" | "nextPhase" | "stop") => void,
-  onReset: () => void
-}) {
-  return (
-    <div className={styles.experimentControls}>
-      <h3>Experiment Controls</h3>
-      <div className={styles.controlsButtons}>
-        <button
-          className={!isPlaying ? styles.pausePlayActive : styles.pausePlayInactive}
-          onClick={() => onAction("pause")}
-          disabled={loading}
-        >❚❚</button>
-
-        <button
-          className={isPlaying ? styles.pausePlayActive : styles.pausePlayInactive}
-          onClick={() => onAction("play")}
-          disabled={loading}
-        >▶</button>
-
-        <button
-          className={styles.next}
-          onClick={() => onAction("nextPhase")}
-          disabled={loading}
-        >⏭</button>
-
-        <button
-          className={styles.restartExperiment}
-          onClick={onReset}
-          disabled={loading}
-        >⟲</button>
-
-        <button
-          className={styles.stop}
-          onClick={() => onAction("stop")}
-          disabled={loading}
-        >⏹</button>
-      </div>
-    </div>
-  );
-}
-
-/**
- * Displays lists of Goals, Triggers, and Norms for the current phase.
- */
-function PhaseDashboard({
-  phaseId,
-  activeIds,
-  setActiveIds,
-  goalIndex
-}: {
-  phaseId: string,
-  activeIds: Record<string, boolean>,
-  setActiveIds: React.Dispatch<React.SetStateAction<Record<string, boolean>>>,
-  goalIndex: number
-}) {
-  const getGoalsWithDepth = useProgramStore((s) => s.getGoalsWithDepth);
-  const getTriggers = useProgramStore((s) => s.getTriggersInPhase);
-  const getNorms = useProgramStore((s) => s.getNormsInPhase);
-
-  // Prepare data view models
-  const goals = getGoalsWithDepth(phaseId).map((g) => ({
-    ...g,
-    id: g.id as string,
-    name: g.name as string,
-    achieved: activeIds[g.id as string] ?? false,
-    level: g.level, // Pass this new property to the UI
-  }));
-
-  const triggers = (getTriggers(phaseId) as TriggerNode[]).map(t => ({
-    ...t,
-    achieved: activeIds[t.id] ?? false,
-  }));
-
-  const norms = (getNorms(phaseId) as NormNodeData[])
-    .filter(n => !n.condition)
-    .map(n => ({ ...n, label: n.norm }));
-
-  const conditionalNorms = (getNorms(phaseId) as (NormNodeData & { id: string })[])
-    .filter(n => !!n.condition)
-    .map(n => ({
-      ...n,
-      achieved: activeIds[n.id] ?? false
-    }));
-
-  return (
-    <>
-      <StatusList title="Goals" items={goals} type="goal" activeIds={activeIds} setActiveIds={setActiveIds} currentGoalIndex={goalIndex} />
-      <StatusList title="Triggers" items={triggers} type="trigger" activeIds={activeIds} />
-      <StatusList title="Norms" items={norms} type="norm" activeIds={activeIds} />
-      <StatusList title="Conditional Norms" items={conditionalNorms} type="cond_norm" activeIds={activeIds} />
-    </>
-  );
-}
-
-// ----------------------------------------------------------------------
-// 3. Main Component
-// ----------------------------------------------------------------------
-
-const MonitoringPage: React.FC = () => {
-  const {
-    loading,
-    isPlaying,
-    isFinished,
-    phaseIds,
-    phaseNames,
-    phaseIndex,
-    goalIndex,
-    activeIds,
-    setActiveIds,
-    resetExperiment,
-    handleControlAction
-  } = useExperimentLogic();
-
-  if (phaseIds.length === 0) {
-    return <p className={styles.empty}>No program loaded.</p>;
  }
-
  return (
    <div className={styles.dashboardContainer}>
      {/* HEADER */}
      <header className={styles.experimentOverview}>
        <div className={styles.phaseName}>
          <h2>Experiment Overview</h2>
-          <p>
-            {isFinished ? (
-              <strong>Experiment finished</strong>
-            ) : (
-              <><strong>Phase {phaseIndex + 1}:</strong> {phaseNames[phaseIndex]}</>
-            )}
-          </p>
-          <PhaseProgressBar phaseIds={phaseIds} phaseIndex={phaseIndex} isFinished={isFinished} />
+          <p><strong>Phase</strong> {` ${phaseIndex + 1}`} </p>
+          <div className={styles.phaseProgress}>
+            {phaseIds.map((id, index) => (
+              <span 
+                key={id} 
+                className={`${styles.phase} ${
+                  index < phaseIndex ? styles.completed : 
+                  index === phaseIndex ? styles.current : ""
+                }`}
+              >
+                {index + 1}
+              </span>
+            ))}
+          </div>
        </div>

-        <ControlPanel
-          loading={loading}
-          isPlaying={isPlaying}
-          onAction={handleControlAction}
-          onReset={resetExperiment}
-        />
+        <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 />
+          {RobotConnected()}
        </div>
      </header>

      {/* MAIN GRID */}
+      
      <main className={styles.phaseOverview}>
        <section className={styles.phaseOverviewText}>
          <h3>Phase Overview</h3>
        </section>
-
-        {isFinished ? (
+      {isFinished ? (
          <div className={styles.finishedMessage}>
-            <p>All phases have been successfully completed.</p>
+            <p> All phases have been successfully completed.</p>
          </div>
        ) : (
-          <PhaseDashboard
-            phaseId={phaseIds[phaseIndex]}
-            activeIds={activeIds}
-            setActiveIds={setActiveIds}
-            goalIndex={goalIndex}
-          />
+          <>
+            <StatusList title="Goals" items={goals} type="goal" activeIds={activeIds} currentGoalIndex={goalIndex} />
+            <StatusList title="Triggers" items={triggers} type="trigger" activeIds={activeIds} />
+            <StatusList title="Norms" items={norms} type="norm" activeIds={activeIds} />
+            <StatusList title="Conditional Norms" items={conditionalNorms} type="cond_norm" activeIds={activeIds} />
+          </>
        )}
      </main>

      {/* LOGS */}
-      <ExperimentLogs />
+      <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}>
@@ -408,4 +344,4 @@ const MonitoringPage: React.FC = () => {
  );
 }

-export default MonitoringPage;
+export default MonitoringPage;
--- a/src/pages/MonitoringPage/MonitoringPageAPI.ts
+++ b/src/pages/MonitoringPage/MonitoringPageAPI.ts
@@ -1,15 +1,15 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
-import React, { useEffect } from 'react';
-import { API_BASE_URL } from '../../config/api.ts';
+import { useEffect } from 'react';
+const API_BASE_BP = "http://localhost:8000/button_pressed"; // Change depending on Pims interup agent/ correct endpoint
+const API_BASE = "http://localhost:8000";
+

 /**
 * HELPER: Unified sender function
+ * In a real app, you might move this to a /services or /hooks folder
 */
-export const sendAPICall = async (type: string, context: string, endpoint?: string) => {
+const sendAPICall = async (type: string, context: string, endpoint?: string) => {
  try {
-    const response = await fetch(`${API_BASE_URL}/button_pressed${endpoint ?? ""}`, {
+    const response = await fetch(`${API_BASE_BP}${endpoint ?? ""}`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ type, context }),
@@ -32,25 +32,33 @@ export async function nextPhase(): Promise<void> {
  sendAPICall(type, context)
 }

-export async function stopExperiment(): Promise<void> {
-  const type = "stop"
+
+/**
+ * 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 pause experiment
-*/
+ * 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)
 }

-/**
- * Sends an API call to the CB for going to resume experiment
-*/
 export async function playExperiment(): Promise<void> {
  const type = "pause"
  const context = "false"
@@ -68,25 +76,20 @@ export type CondNormsStateUpdate = { type: 'cond_norms_state_update'; norms: { i
 export type ExperimentStreamData = PhaseUpdate | GoalUpdate | TriggerUpdate | CondNormsStateUpdate | Record<string, unknown>;

 /**
- * A hook that listens to the experiment stream that updates current state of the program
- * via updates sent from the backend
+ * A hook that listens to the experiment stream and logs data to the console.
+ * It does not render anything.
 */
 export function useExperimentLogger(onUpdate?: (data: ExperimentStreamData) => void) {
-  const callbackRef = React.useRef(onUpdate);
-  // Ref is updated every time with on update
-  React.useEffect(() => {
-    callbackRef.current = onUpdate;
-  }, [onUpdate]);
-
  useEffect(() => {
-    console.log("Connecting to Experiment Stream...");
-    const eventSource = new EventSource(`${API_BASE_URL}/experiment_stream`);
+    const eventSource = new EventSource(`${API_BASE}/experiment_stream`);

    eventSource.onmessage = (event) => {
      try {
        const parsedData = JSON.parse(event.data) as ExperimentStreamData;
-        //call function using the ref
-        callbackRef.current?.(parsedData);
+        if (onUpdate) {
+          console.log(event.data);
+          onUpdate(parsedData);
+        }
      } catch (err) {
        console.warn("Stream parse error:", err);
      }
@@ -98,31 +101,7 @@ export function useExperimentLogger(onUpdate?: (data: ExperimentStreamData) => v
    };

    return () => {
-      console.log("Closing Experiment Stream...");
      eventSource.close();
    };
-  }, []);
-}
-
-/**
- * A hook that listens to the status stream that updates active conditional norms
- * via updates sent from the backend
- */
-export function useStatusLogger(onUpdate?: (data: ExperimentStreamData) => void) {
-  const callbackRef = React.useRef(onUpdate);
-
-  React.useEffect(() => {
-    callbackRef.current = onUpdate;
  }, [onUpdate]);
-
-  useEffect(() => {
-    const eventSource = new EventSource(`${API_BASE_URL}/status_stream`);
-    eventSource.onmessage = (event) => {
-      try {
-        const parsedData = JSON.parse(event.data);
-        callbackRef.current?.(parsedData);
-      } catch (err) { console.warn("Status stream error:", err); }
-    };
-    return () => eventSource.close();
-  }, []);
-}
+}
--- a/src/pages/MonitoringPage/components/ExperimentLogs.module.css
+++ b/src/pages/MonitoringPage/components/ExperimentLogs.module.css
@@ -1,39 +0,0 @@
-/*
-This program has been developed by students from the bachelor Computer Science at Utrecht
-University within the Software Project course.
-© Copyright Utrecht University (Department of Information and Computing Sciences)
-*/
-.logs {
-  /* grid-area used in MonitoringPage.module.css */
-  grid-area: logs;
-  box-shadow: var(--panel-shadow);
-
-  height: 900px;
-  width: 450px;
-
-  .live {
-    width: .5rem;
-    height: .5rem;
-    left: .5rem;
-    background: red;
-    border-radius: 50%;
-  }
-}
-
-.chat-message.alternate {
-  align-items: end;
-  text-align: end;
-
-  background-color: color-mix(in oklab, canvas, 75% #86c4fa);
-
-  .message-head {
-    flex-direction: row-reverse;
-  }
-}
-
-.download-list {
-  box-sizing: border-box;
-  list-style: none;
-  height: 50dvh;
-  min-width: 300px;
-}
--- a/src/pages/MonitoringPage/components/ExperimentLogs.tsx
+++ b/src/pages/MonitoringPage/components/ExperimentLogs.tsx
@@ -1,190 +0,0 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
-import styles from "./ExperimentLogs.module.css";
-import {LogMessages} from "../../../components/Logging/Logging.tsx";
-import {useEffect, useMemo, useState} from "react";
-import {type LogFilterPredicate, type LogRecord, useLogs} from "../../../components/Logging/useLogs.ts";
-import capitalize from "../../../utils/capitalize.ts";
-import {useCell} from "../../../utils/cellStore.ts";
-import {
-  EXPERIMENT_FILTER_KEY,
-  EXPERIMENT_LOGGER_NAME,
-  type LoggingSettings,
-  type MessageComponentProps,
-} from "../../../components/Logging/Definitions.ts";
-import formatDuration from "../../../utils/formatDuration.ts";
-import {create} from "zustand";
-import Dialog from "../../../components/Dialog.tsx";
-import delayedResolve from "../../../utils/delayedResolve.ts";
-import { API_BASE_URL } from "../../../config/api.ts";
-
-/**
- * Local Zustand store for logging UI preferences.
- */
-const useLoggingSettings = create<LoggingSettings>((set) => ({
-  showRelativeTime: false,
-  setShowRelativeTime: (showRelativeTime: boolean) => set({ showRelativeTime }),
-}));
-
-/**
- * A dedicated component for rendering chat messages.
- *
- * @param record The chat record to render.
- */
-function ChatMessage({ record }: { record: LogRecord }) {
-  const { showRelativeTime, setShowRelativeTime } = useLoggingSettings();
-
-  const reverse = record.role === "user" ? styles.alternate : "";
-
-  return <div className={`${styles.chatMessage} ${reverse} flex-col padding-md padding-h-lg shadow-md round-md`}>
-    <div className={`${styles.messageHead} flex-row gap-md align-center`}>
-      <span className={"bold"}>{capitalize(record.role ?? "unknown")}</span>
-      <span className={"font-small"}>•</span>
-      <span className={"mono clickable font-small"} onClick={() => setShowRelativeTime(!showRelativeTime)}>{
-        showRelativeTime
-          ? formatDuration(record.relativeCreated)
-          : new Date(record.created * 1000).toLocaleTimeString()
-      }</span>
-    </div>
-    <span>{record.message}</span>
-  </div>
-}
-
-/**
- * A generic log message component showing the log level, time, and message text.
- *
- * @param record The log record to render.
- */
-function DefaultMessage({ record }: { record: LogRecord }) {
-  const { showRelativeTime, setShowRelativeTime } = useLoggingSettings();
-
-  return <div>
-    <div className={"flex-row gap-md align-center"}>
-      <span className={"font-small"}>{record.levelname}</span>
-      <span className={"font-small"}>•</span>
-      <span className={"mono clickable font-small"} onClick={() => setShowRelativeTime(!showRelativeTime)}>{
-        showRelativeTime
-          ? formatDuration(record.relativeCreated)
-          : new Date(record.created * 1000).toLocaleTimeString()
-      }</span>
-    </div>
-    <span>{record.message}</span>
-  </div>;
-}
-
-/**
- * A custom component for rendering experiment messages, which might include chat messages.
- *
- * @param recordCell The cell containing the log record to render.
- * @param onUpdate A callback to notify the parent component when the record changes.
- */
-function ExperimentMessage({recordCell, onUpdate}: MessageComponentProps) {
-  const record = useCell(recordCell);
-
-  // Notify the parent component (e.g., for scroll updates) when this record changes.
-  useEffect(() => {
-    if (onUpdate) onUpdate();
-  }, [record, onUpdate]);
-
-  if (record.levelname == "CHAT") {
-    return <ChatMessage record={record} />
-  } else {
-    return <DefaultMessage record={record} />
-  }
-}
-
-/**
- * A download dialog listing experiment logs to download.
- *
- * @param filenames The list of available experiment logs to download.
- * @param refresh A callback to refresh the list of available experiment logs.
- */
-function DownloadScreen({filenames, refresh}: {filenames: string[] | null, refresh: () => void}) {
-  const list = (() => {
-    if (filenames == null) return <div className={`${styles.downloadList} flex-col align-center justify-center`}>
-      <p>Loading...</p>
-    </div>;
-    if (filenames.length === 0) return <div className={`${styles.downloadList} flex-col align-center justify-center`}>
-      <p>No files available.</p>
-    </div>
-
-    return <ol className={`${styles.downloadList} margin-0 padding-h-lg scroll-y`}>
-      {filenames!.map((filename) => (
-        <li><a key={filename} href={`${API_BASE_URL}/api/logs/files/${filename}`} download={filename}>{filename}</a></li>
-      ))}
-    </ol>;
-  })();
-
-  return <div className={"flex-col"}>
-    <p className={"margin-lg"}>Select a file to download:</p>
-    {list}
-    <button onClick={refresh} className={"margin-lg shadow-sm"}>Refresh</button>
-  </div>;
-}
-
-/**
- * A button that opens a download dialog for experiment logs when pressed.
- */
-function DownloadButton() {
-  const [showModal, setShowModal] = useState(false);
-  const [filenames, setFilenames] = useState<string[] | null>(null);
-
-  async function getFiles(): Promise<string[]> {
-    const response = await fetch(`${API_BASE_URL}/api/logs/files`);
-    const files = await response.json();
-    files.sort();
-    return files;
-  }
-
-  useEffect(() => {
-    getFiles().then(setFilenames);
-  }, [showModal]);
-
-  return <>
-    <button className={"shadow-sm"} onClick={() => setShowModal((curr) => !curr)}>Download...</button>
-    <Dialog open={showModal} close={() => setShowModal(false)} classname={"padding-0 round-lg"}>
-      <DownloadScreen filenames={filenames} refresh={async () => {
-        setFilenames(null);
-        const files = await delayedResolve(getFiles(), 250);
-        setFilenames(files);
-      }} />
-    </Dialog>
-  </>;
-}
-
-/**
- * A component for rendering experiment logs. This component uses the `useLogs` hook with a filter to show only
- * experiment logs.
- */
-export default function ExperimentLogs() {
-  // Show only experiment logs in this logger
-  const filters = useMemo(() => new Map<string, LogFilterPredicate>([
-    [
-      EXPERIMENT_FILTER_KEY,
-      {
-        predicate: (r) => r.name == EXPERIMENT_LOGGER_NAME,
-        priority: 999,
-        value: null,
-      } as LogFilterPredicate,
-    ],
-  ]), []);
-
-  const { filteredLogs } = useLogs(filters);
-
-  return <aside className={`${styles.logs} flex-col relative`}>
-    <div className={`${styles.head} padding-lg`}>
-      <div className={"flex-row align-center justify-between"}>
-        <h3>Logs</h3>
-        <div className={"flex-row gap-md align-center"}>
-          <div className={`flex-row align-center gap-md relative padding-md shadow-sm round-md`}>
-            <div className={styles.live}></div>
-            <span>Live</span>
-          </div>
-          <DownloadButton />
-        </div>
-      </div>
-    </div>
-    <LogMessages recordCells={filteredLogs} MessageComponent={ExperimentMessage} />
-  </aside>;
-}
--- a/src/pages/Robot/Robot.tsx
+++ b/src/pages/Robot/Robot.tsx
@@ -0,0 +1,130 @@
+import { useState, useEffect, useRef } from 'react'
+
+/**
+ * Displays a live robot interaction panel with user input, conversation history,
+ * and real-time updates from the robot backend via Server-Sent Events (SSE).
+ *
+ * @returns A React element rendering the interactive robot UI.
+ */
+export default function Robot() {
+  /** The text message currently entered by the user. */
+  const [message, setMessage] = useState('');
+
+  /** Whether the robot’s microphone or listening mode is currently active. */
+  const [listening, setListening] = useState(false);
+  /** The ongoing conversation history as a sequence of user/assistant messages. */
+  const [conversation, setConversation] = useState<
+  {"role": "user" | "assistant", "content": string}[]>([])
+  /** Reference to the scrollable conversation container for auto-scrolling. */
+  const conversationRef = useRef<HTMLDivElement | null>(null);
+  /**
+   * Index used to force refresh the SSE connection or clear conversation.
+   * Incrementing this value triggers a reset of the live data stream.
+   */
+  const [conversationIndex, setConversationIndex] = useState(0);
+
+  /**
+   * Sends a message to the robot backend.
+   *
+   * Makes a POST request to `/message` with the user’s text.
+   * The backend may respond with confirmation or error information.
+   */
+  const sendMessage = async () => {
+    try {
+      const response = await fetch("http://localhost:8000/message", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ message }),
+      });
+      const data = await response.json();
+      console.log(data);
+    } catch (error) {
+      console.error("Error sending message: ", error);
+    }
+  };
+
+   /**
+   * Establishes a persistent Server-Sent Events (SSE) connection
+   * to receive real-time updates from the robot backend.
+   *
+   * Handles three event types:
+   * - `voice_active`: whether the robot is currently listening.
+   * - `speech`: recognized user speech input.
+   * - `llm_response`: the robot’s language model-generated reply.
+   *
+   * The connection resets whenever `conversationIndex` changes.
+   */
+  useEffect(() => {
+    const eventSource = new EventSource("http://localhost:8000/sse");
+
+    eventSource.onmessage = (event) => {
+      try {
+        const data = JSON.parse(event.data);
+        if ("voice_active" in data) setListening(data.voice_active);
+        if ("speech" in data) setConversation(conversation => [...conversation, {"role": "user", "content": data.speech}]);
+        if ("llm_response" in data) setConversation(conversation => [...conversation, {"role": "assistant", "content": data.llm_response}]);
+      } catch {
+        console.log("Unparsable SSE message:", event.data);
+      }
+    };
+
+    return () => {
+      eventSource.close();
+    };
+  }, [conversationIndex]);
+
+  /**
+   * Automatically scrolls the conversation view to the bottom
+   * whenever a new message is added.
+   */
+  useEffect(() => {
+    if (!conversationRef || !conversationRef.current) return;
+    conversationRef.current.scrollTop = conversationRef.current.scrollHeight;
+  }, [conversation]);
+
+  return (
+    <>
+      <h1>Robot interaction</h1>
+      <h2>Force robot speech</h2>
+      <div className={"flex-row gap-md justify-center"}>
+        <input
+          type="text"
+          value={message}
+          onChange={(e) => setMessage(e.target.value)}
+          onKeyDown={(e) => e.key === "Enter" && sendMessage().then(() => setMessage(""))}
+          placeholder="Enter a message"
+        />
+        <button onClick={sendMessage}>Speak</button>
+      </div>
+      <div className={"flex-col gap-lg align-center"}>
+        <h2>Conversation</h2>
+        <p>Listening {listening ? "🟢" : "🔴"}</p>
+        <div style={{ maxHeight: "200px", maxWidth: "600px", overflowY: "auto"}} ref={conversationRef}>
+          {conversation.map((item, i) => (
+            <p key={i}
+              style={{
+                backgroundColor: item["role"] == "user"
+                  ? "color-mix(in oklab, canvas, blue 20%)"
+                  : "color-mix(in oklab, canvas, gray 20%)",
+                whiteSpace: "pre-line",
+              }}
+              className={"round-md padding-md"}
+            >{item["content"]}</p>
+          ))}
+        </div>
+        <div className={"flex-row gap-md justify-center"}>
+          <button onClick={() => {
+            setConversationIndex((conversationIndex) => conversationIndex + 1)
+            setConversation([])
+          }}>Reset</button>
+          <button onClick={() => {
+            setConversationIndex((conversationIndex) => conversationIndex == -1 ? 0 : -1)
+            setConversation([])
+          }}>{conversationIndex == -1 ? "Start" : "Stop"}</button>
+        </div>
+      </div>
+    </>
+  );
+}
--- a/src/pages/SimpleProgram/SimpleProgram.module.css
+++ b/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;
+}
--- a/src/pages/SimpleProgram/SimpleProgram.tsx
+++ b/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;
--- a/src/pages/TemplatePage/Template.tsx
+++ b/src/pages/TemplatePage/Template.tsx
@@ -0,0 +1,11 @@
+import Counter from '../../components/components.tsx'
+
+function TemplatePage() {
+  return (
+    <>
+      <Counter />
+    </>
+  )
+}
+
+export default TemplatePage
--- a/src/pages/VisProgPage/VisProg.module.css
+++ b/src/pages/VisProgPage/VisProg.module.css
@@ -1,8 +1,3 @@
-/*
-This program has been developed by students from the bachelor Computer Science at Utrecht
-University within the Software Project course.
-© Copyright Utrecht University (Department of Information and Computing Sciences)
-*/
 /* editor UI */

 .inner-editor-container {
@@ -89,10 +84,7 @@ University within the Software Project course.
    filter: drop-shadow(0 0 0.25rem plum);
 }

-.node-inferred_belief {
-    outline: mediumpurple solid 2pt;
-    filter: drop-shadow(0 0 0.25rem mediumpurple);
-}
+

 .draggable-node {
    padding: 3px 10px;
@@ -166,14 +158,6 @@ University within the Software Project course.
    filter: drop-shadow(0 0 0.25rem plum);
 }

-.draggable-node-inferred_belief {
-    padding: 3px 10px;
-    background-color: canvas;
-    border-radius: 5pt;
-    outline: mediumpurple solid 2pt;
-    filter: drop-shadow(0 0 0.25rem mediumpurple);
-}
-
 .planNoIterate {
  opacity: 0.5;
  font-style: italic;
--- a/src/pages/VisProgPage/VisProg.tsx
+++ b/src/pages/VisProgPage/VisProg.tsx
@@ -1,29 +1,24 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
 import {
  Background,
  Controls,
  Panel,
  ReactFlow,
  ReactFlowProvider,
-  MarkerType, getOutgoers
+  MarkerType,
 } from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
-import warningStyles from './visualProgrammingUI/components/WarningSidebar.module.css'
 import {type CSSProperties, useEffect, useState} from "react";
 import {useShallow} from 'zustand/react/shallow';
+import orderPhaseNodeArray from "../../utils/orderPhaseNodes.ts";
 import useProgramStore from "../../utils/programStore.ts";
 import {DndToolbar} from './visualProgrammingUI/components/DragDropSidebar.tsx';
-import {type EditorWarning, globalWarning} from "./visualProgrammingUI/components/EditorWarnings.tsx";
-import {WarningsSidebar} from "./visualProgrammingUI/components/WarningSidebar.tsx";
+import type {PhaseNode} from "./visualProgrammingUI/nodes/PhaseNode.tsx";
 import useFlowStore from './visualProgrammingUI/VisProgStores.tsx';
 import type {FlowState} from './visualProgrammingUI/VisProgTypes.tsx';
 import styles from './VisProg.module.css'
-import {NodeTypes} from './visualProgrammingUI/NodeRegistry.ts';
+import { NodeReduces, NodeTypes } from './visualProgrammingUI/NodeRegistry.ts';
 import SaveLoadPanel from './visualProgrammingUI/components/SaveLoadPanel.tsx';
 import MonitoringPage from '../MonitoringPage/MonitoringPage.tsx';
-import {graphReducer, runProgram} from './VisProgLogic.ts';

 // --| config starting params for flow |--

@@ -48,7 +43,6 @@ const selector = (state: FlowState) => ({
  nodes: state.nodes,
  edges: state.edges,
  onNodesChange: state.onNodesChange,
-  onNodesDelete: state.onNodesDelete,
  onEdgesDelete: state.onEdgesDelete,
  onEdgesChange: state.onEdgesChange,
  onConnect: state.onConnect,
@@ -74,7 +68,6 @@ const VisProgUI = () => {
  const {
    nodes, edges,
    onNodesChange,
-    onNodesDelete,
    onEdgesDelete,
    onEdgesChange,
    onConnect,
@@ -97,36 +90,15 @@ const VisProgUI = () => {
    window.addEventListener('keydown', handler);
    return () => window.removeEventListener('keydown', handler);
  });
-  const {unregisterWarning, registerWarning} = useFlowStore();
-  useEffect(() => {
-
-    if (checkPhaseChain()) {
-      unregisterWarning(globalWarning,'INCOMPLETE_PROGRAM');
-    } else {
-      // create global warning for incomplete program chain
-      const incompleteProgramWarning : EditorWarning = {
-        scope: {
-          id: globalWarning,
-          handleId: undefined
-        },
-        type: 'INCOMPLETE_PROGRAM',
-        severity: "ERROR",
-        description: "there is no complete phase chain from the startNode to the EndNode"
-      }
-
-      registerWarning(incompleteProgramWarning);
-    }
-  },[edges, registerWarning, unregisterWarning])

  return (
-    <div className={`${styles.innerEditorContainer} round-lg border-lg flex-row`} style={({'--flow-zoom': zoom} as CSSProperties)}>
+    <div className={`${styles.innerEditorContainer} round-lg border-lg`} style={({'--flow-zoom': zoom} as CSSProperties)}>
      <ReactFlow
        nodes={nodes}
        edges={edges}
        defaultEdgeOptions={DEFAULT_EDGE_OPTIONS}
        nodeTypes={NodeTypes}
        onNodesChange={onNodesChange}
-        onNodesDelete={onNodesDelete}
        onEdgesDelete={onEdgesDelete}
        onEdgesChange={onEdgesChange}
        onReconnect={onReconnect}
@@ -137,11 +109,9 @@ const VisProgUI = () => {
        onNodeDragStop={endBatchAction}
        preventScrolling={scrollable}
        onMove={(_, viewport) => setZoom(viewport.zoom)}
-        reconnectRadius={15}
        snapToGrid
        fitView
        proOptions={{hideAttribution: true}}
-        style={{flexGrow: 3}}
      >
        <Panel position="top-center" className={styles.dndPanel}>
          <DndToolbar/> {/* contains the drag and drop panel for nodes */}
@@ -150,16 +120,12 @@ const VisProgUI = () => {
            <SaveLoadPanel></SaveLoadPanel>
          </Panel>
        <Panel position="bottom-center">
-          <button onClick={() => undo()}>Undo</button>
+          <button onClick={() => undo()}>undo</button>
          <button onClick={() => redo()}>Redo</button>
        </Panel>
-        <Panel position="center-right" className={warningStyles.warningsSidebar}>
-          <WarningsSidebar/>
-        </Panel>
        <Controls/>
        <Background/>
      </ReactFlow>
-
    </div>
  );
 };
@@ -179,23 +145,41 @@ function VisualProgrammingUI() {
  );
 }

-const checkPhaseChain = (): boolean => {
-  const {nodes, edges} = useFlowStore.getState();
+// currently outputs the prepared program to the console
+function runProgramm() {
+  const phases = graphReducer();
+  const program = {phases}
+  console.log(JSON.stringify(program, null, 2));
+  fetch(
+    "http://localhost:8000/program",
+    {
+      method: "POST",
+      headers: {"Content-Type": "application/json"},
+      body: JSON.stringify(program),
+    }
+  ).then((res) => {
+    if (!res.ok) throw new Error("Failed communicating with the backend.")
+    console.log("Successfully sent the program to the backend.");

-  function checkForCompleteChain(currentNodeId: string): boolean {
-    const outgoingPhases = getOutgoers({id: currentNodeId}, nodes, edges)
-      .filter(node => ["end", "phase"].includes(node.type!));
+    // 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."));
+}

-    if (outgoingPhases.length === 0) return false;
-    if (outgoingPhases.some(node => node.type === "end" )) return true;
+/**
+ * Reduces the graph into its phases' information and recursively calls their reducing function
+ */ 
+function graphReducer() {
+  const { nodes } = useFlowStore.getState();
+  return orderPhaseNodeArray(nodes.filter((n) => n.type == 'phase') as PhaseNode [])
+    .map((n) => {
+      const reducer = NodeReduces['phase'];
+      return reducer(n, nodes)
+    }); 
+}

-    const next = outgoingPhases.map(node => checkForCompleteChain(node.id))
-      .find(result => result);
-    return !!next;
-  }

-  return checkForCompleteChain('start');
-};

 /**
 * houses the entire page, so also UI elements
@@ -204,43 +188,30 @@ const checkPhaseChain = (): boolean => {
 */
 function VisProgPage() {
  const [showSimpleProgram, setShowSimpleProgram] = useState(false);
-  const [programValidity, setProgramValidity] = useState<boolean>(true);
-  const {isProgramValid, severityIndex} = useFlowStore();
  const setProgramState = useProgramStore((state) => state.setProgramState);

-  const validity = () => {return isProgramValid();}
-
-  useEffect(() => {
-    setProgramValidity(validity);
-    // the following eslint disable is required as it wants us to use all possible dependencies for the useEffect statement,
-    // however this would cause unneeded updates
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [severityIndex]);
-
-  const processProgram = () => {
+  const runProgram = () => {
    const phases = graphReducer();       // reduce graph
    setProgramState({ phases });          // <-- save to store
    setShowSimpleProgram(true);          // show SimpleProgram
-    runProgram();                        // send to backend if needed
+    runProgramm();                        // send to backend if needed
  };

  if (showSimpleProgram) {
    return (
    <div>
      <button className={styles.backButton} onClick={() => setShowSimpleProgram(false)}>
-        Back to Editor ◀
+        Back to Editor ◀ 
      </button>
      <MonitoringPage/>
    </div>
    );
  }

-
-
  return (
    <>
      <VisualProgrammingUI/>
-      <button onClick={processProgram} disabled={!programValidity}>Run Program</button>
+      <button onClick={runProgram}>run program</button>
    </>
  )
 }
--- a/src/pages/VisProgPage/VisProgLogic.ts
+++ b/src/pages/VisProgPage/VisProgLogic.ts
@@ -1,47 +0,0 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
-import useProgramStore from "../../utils/programStore";
-import orderPhaseNodeArray from "../../utils/orderPhaseNodes";
-import useFlowStore from './visualProgrammingUI/VisProgStores';
-import { NodeReduces } from './visualProgrammingUI/NodeRegistry';
-import type { PhaseNode } from "./visualProgrammingUI/nodes/PhaseNode";
-import { API_BASE_URL } from "../../config/api.ts";
-
-/**
- * Reduces the graph into its phases' information and recursively calls their reducing function
- */ 
-export function graphReducer() {
-  const { nodes } = useFlowStore.getState();
-  return orderPhaseNodeArray(nodes.filter((n) => n.type == 'phase') as PhaseNode [])
-    .map((n) => {
-      const reducer = NodeReduces['phase'];
-      return reducer(n, nodes)
-    }); 
-}
-
-
-/**
- * Outputs the prepared program to the console and sends it to the backend
- */
-export function runProgram() {
-  const phases = graphReducer();
-  const program = {phases}
-  console.log(JSON.stringify(program, null, 2));
-  fetch(
-    `${API_BASE_URL}/program`,
-    {
-      method: "POST",
-      headers: {"Content-Type": "application/json"},
-      body: JSON.stringify(program),
-    }
-  ).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."));
-  console.log(program);
-}
--- a/src/pages/VisProgPage/visualProgrammingUI/EditorUndoRedo.ts
+++ b/src/pages/VisProgPage/visualProgrammingUI/EditorUndoRedo.ts
@@ -1,21 +1,10 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
 import type {Edge, Node} from "@xyflow/react";
 import type {StateCreator, StoreApi } from 'zustand/vanilla';
-import type {
-  SeverityIndex,
-  WarningRegistry
-} from "./components/EditorWarnings.tsx";
 import type {FlowState} from "./VisProgTypes.tsx";

 export type FlowSnapshot = {
  nodes: Node[];
  edges: Edge[];
-  warnings: {
-    warningRegistry: WarningRegistry;
-    severityIndex: SeverityIndex;
-  }
 }

 /**
@@ -52,11 +41,7 @@ export const UndoRedo = (
   */
  const getSnapshot = (state : BaseFlowState) : FlowSnapshot => (structuredClone({
    nodes: state.nodes,
-    edges: state.edges,
-    warnings: {
-      warningRegistry: state.editorWarningRegistry,
-      severityIndex: state.severityIndex,
-    }
+    edges: state.edges
  }));

  const initialState = config(set, get, api);
@@ -93,8 +78,6 @@ export const UndoRedo = (
      set({
        nodes: snapshot.nodes,
        edges: snapshot.edges,
-        editorWarningRegistry: snapshot.warnings.warningRegistry,
-        severityIndex: snapshot.warnings.severityIndex,
      });

      state.future.push(currentSnapshot); // push current to redo
@@ -114,8 +97,6 @@ export const UndoRedo = (
      set({
        nodes: snapshot.nodes,
        edges: snapshot.edges,
-        editorWarningRegistry: snapshot.warnings.warningRegistry,
-        severityIndex: snapshot.warnings.severityIndex,
      });

      state.past.push(currentSnapshot); // push current to undo
--- a/src/pages/VisProgPage/visualProgrammingUI/HandleRuleLogic.ts
+++ b/src/pages/VisProgPage/visualProgrammingUI/HandleRuleLogic.ts
@@ -1,6 +1,3 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
 import {type Connection} from "@xyflow/react";
 import {useEffect} from "react";
 import useFlowStore from "./VisProgStores.tsx";
@@ -110,16 +107,4 @@ export function useHandleRules(
    // finally we return a function that evaluates all rules using the created context
    return evaluateRules(targetRules, connection, context);
  };
-}
-
-export function validateConnectionWithRules(
-  connection: Connection,
-  context: ConnectionContext
-): RuleResult {
-  const rules = useFlowStore.getState().getTargetRules(
-    connection.target!,
-    connection.targetHandle!
-  );
-
-  return evaluateRules(rules,connection, context);
 }
--- a/src/pages/VisProgPage/visualProgrammingUI/HandleRules.ts
+++ b/src/pages/VisProgPage/visualProgrammingUI/HandleRules.ts
@@ -1,6 +1,3 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
 import {
  type HandleRule,
  ruleResult
@@ -46,4 +43,3 @@ export const noSelfConnections : HandleRule =
  }


-
--- a/src/pages/VisProgPage/visualProgrammingUI/NodeRegistry.ts
+++ b/src/pages/VisProgPage/visualProgrammingUI/NodeRegistry.ts
@@ -1,6 +1,3 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
 import EndNode, {
  EndConnectionTarget,
  EndConnectionSource,
@@ -55,24 +52,15 @@ import TriggerNode, {
  TriggerTooltip
 } from "./nodes/TriggerNode";
 import { TriggerNodeDefaults } from "./nodes/TriggerNode.default";
-import InferredBeliefNode, {
-  InferredBeliefConnectionTarget,
-  InferredBeliefConnectionSource,
-  InferredBeliefDisconnectionTarget,
-  InferredBeliefDisconnectionSource,
-  InferredBeliefReduce, InferredBeliefTooltip
-} from "./nodes/InferredBeliefNode";
-import { InferredBeliefNodeDefaults } from "./nodes/InferredBeliefNode.default";
 import BasicBeliefNode, {
  BasicBeliefConnectionSource,
  BasicBeliefConnectionTarget,
  BasicBeliefDisconnectionSource,
  BasicBeliefDisconnectionTarget,
-  BasicBeliefReduce
-,
+  BasicBeliefReduce,
  BasicBeliefTooltip
-} from "./nodes/BasicBeliefNode.tsx";
-import { BasicBeliefNodeDefaults } from "./nodes/BasicBeliefNode.default.ts";
+} from "./nodes/BasicBeliefNode";
+import { BasicBeliefNodeDefaults } from "./nodes/BasicBeliefNode.default";

 /**
 * Registered node types in the visual programming system.
@@ -88,7 +76,6 @@ export const NodeTypes = {
  goal: GoalNode,
  trigger: TriggerNode,
  basic_belief: BasicBeliefNode,
-  inferred_belief: InferredBeliefNode,
 };

 /**
@@ -104,7 +91,6 @@ export const NodeDefaults = {
  goal: GoalNodeDefaults,
  trigger: TriggerNodeDefaults,
  basic_belief: BasicBeliefNodeDefaults,
-  inferred_belief: InferredBeliefNodeDefaults,
 };


@@ -122,7 +108,6 @@ export const NodeReduces = {
  goal: GoalReduce,
  trigger: TriggerReduce,
  basic_belief: BasicBeliefReduce,
-  inferred_belief: InferredBeliefReduce,
 }


@@ -141,7 +126,6 @@ export const NodeConnections = {
    goal: GoalConnectionTarget,
    trigger: TriggerConnectionTarget,
    basic_belief: BasicBeliefConnectionTarget,
-    inferred_belief: InferredBeliefConnectionTarget,
  },
  Sources: {
    start: StartConnectionSource,
@@ -150,8 +134,7 @@ export const NodeConnections = {
    norm: NormConnectionSource,
    goal: GoalConnectionSource,
    trigger: TriggerConnectionSource,
-    basic_belief: BasicBeliefConnectionSource,
-    inferred_belief: InferredBeliefConnectionSource,
+    basic_belief: BasicBeliefConnectionSource
  }
 }

@@ -170,7 +153,6 @@ export const NodeDisconnections = {
    goal: GoalDisconnectionTarget,
    trigger: TriggerDisconnectionTarget,
    basic_belief: BasicBeliefDisconnectionTarget,
-    inferred_belief: InferredBeliefDisconnectionTarget,
  },
  Sources: {
    start: StartDisconnectionSource,
@@ -180,7 +162,6 @@ export const NodeDisconnections = {
    goal: GoalDisconnectionSource,
    trigger: TriggerDisconnectionSource,
    basic_belief: BasicBeliefDisconnectionSource,
-    inferred_belief: InferredBeliefDisconnectionSource,
  },
 }

@@ -205,7 +186,6 @@ export const NodesInPhase = {
  end: () => false,
  phase: () => false,
  basic_belief: () => false,
-  inferred_belief: () => false,
 }

 /**
@@ -219,5 +199,4 @@ export const NodeTooltips = {
  goal: GoalTooltip,
  trigger: TriggerTooltip,
  basic_belief: BasicBeliefTooltip,
-  inferred_belief: InferredBeliefTooltip,
 }
--- a/src/pages/VisProgPage/visualProgrammingUI/VisProgStores.tsx
+++ b/src/pages/VisProgPage/visualProgrammingUI/VisProgStores.tsx
@@ -1,6 +1,3 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
 import { create } from 'zustand';
 import {
  applyNodeChanges,
@@ -12,8 +9,6 @@ import {
  type XYPosition,
 } from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
-import {type ConnectionContext, validateConnectionWithRules} from "./HandleRuleLogic.ts";
-import {editorWarningRegistry} from "./components/EditorWarnings.tsx";
 import type { FlowState } from './VisProgTypes';
 import {
  NodeDefaults,
@@ -48,18 +43,19 @@ function createNode(id: string, type: string, position: XYPosition, data: Record
    }
 }

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

-const initialNodes : Node[] = [startNode, endNode, initialPhaseNode];
+  const initialNodes : Node[] = [startNode, endNode, initialPhaseNode,];

 // Initial edges, leave empty as setting initial edges...
 // ...breaks logic that is dependent on connection events
 const initialEdges: Edge[] = [];

+
 /**
 * useFlowStore contains the implementation for all editor functionality
 * and stores the current state of the visual programming editor
@@ -90,20 +86,7 @@ const useFlowStore = create<FlowState>(UndoRedo((set, get) => ({
   */
  onNodesChange: (changes) => set({nodes: applyNodeChanges(changes, get().nodes)}),

-  onNodesDelete: (deletedNodes) => {
-
-    const allNodes = get().nodes;
-    const deletedIds = new Set(deletedNodes.map(n => n.id));
-
-    deletedNodes.forEach((node) => {
-      get().unregisterNodeRules(node.id);
-      get().unregisterWarningsForId(node.id);
-    });
-    const remainingNodes = allNodes.filter((node) => !deletedIds.has(node.id));
-    
-    // Validate only the survivors
-    get().validateDuplicateNames(remainingNodes);
-  },
+  onNodesDelete: (nodes) => nodes.forEach(node => get().unregisterNodeRules(node.id)),

  onEdgesDelete: (edges) => {
    // we make sure any affected nodes get updated to reflect removal of edges
@@ -146,41 +129,7 @@ const useFlowStore = create<FlowState>(UndoRedo((set, get) => ({
   * Handles reconnecting an edge between nodes.
   */
  onReconnect: (oldEdge, newConnection) => {
-
-    function createContext(
-      source: {id: string, handleId: string},
-      target: {id: string, handleId: string}
-    ) : ConnectionContext {
-      const edges = get().edges;
-      const targetConnections = edges.filter(edge => edge.target === target.id && edge.targetHandle === target.handleId).length
-      return {
-        connectionCount: targetConnections,
-        source: source,
-        target: target
-      }
-    }
-
-    // connection validation
-    const context: ConnectionContext = oldEdge.source === newConnection.source
-      ? createContext({id: newConnection.source, handleId: newConnection.sourceHandle!}, {id: newConnection.target, handleId: newConnection.targetHandle!})
-      : createContext({id: newConnection.target, handleId: newConnection.targetHandle!}, {id: newConnection.source, handleId: newConnection.sourceHandle!});
-
-    const result = validateConnectionWithRules(
-      newConnection,
-      context
-    );
-
-    if (!result.isSatisfied) {
-      set({
-        edges: get().edges.map(e =>
-          e.id === oldEdge.id ? oldEdge : e
-        ),
-      });
-      return;
-    }
-
-    // further reconnect logic
-    set({ edgeReconnectSuccessful: true });
+    get().edgeReconnectSuccessful = true;
    set({ edges: reconnectEdge(oldEdge, newConnection, get().edges) });

    // We make sure to perform any required data updates on the newly reconnected nodes
@@ -233,36 +182,19 @@ const useFlowStore = create<FlowState>(UndoRedo((set, get) => ({
   * Deletes a node by ID, respecting NodeDeletes rules.
   * Also removes all edges connected to that node.
   */
-  deleteNode: (nodeId, deleteElements) => {
+  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]
-
-
-
+    
    // If there's no function, OR, our function tells us we can delete it, let's do so...
    if (ourFunction == undefined || ourFunction()) {
-      if (deleteElements){
-        deleteElements({
-          nodes: get().nodes.filter((n) => n.id === nodeId),
-          edges: get().edges.filter((e) => e.source !== nodeId && e.target === nodeId)}
-        ).then(() => {
-          get().unregisterNodeRules(nodeId);
-          get().unregisterWarningsForId(nodeId);
-          // Re-validate after deletion is finished
-          get().validateDuplicateNames(get().nodes);
-        });
-      } else {
-        const remainingNodes = get().nodes.filter((n) => n.id !== nodeId);
-        get().validateDuplicateNames(remainingNodes); // Re-validate survivors
-        set({
-        nodes: remainingNodes,
-        edges: get().edges.filter((e) => e.source !== nodeId && e.target !== nodeId),
-        })
-      }
-    }
+      set({
+      nodes: get().nodes.filter((n) => n.id !== nodeId),
+      edges: get().edges.filter((e) => e.source !== nodeId && e.target !== nodeId),
+      })}
  },

  /**
@@ -280,49 +212,15 @@ const useFlowStore = create<FlowState>(UndoRedo((set, get) => ({
   */
  updateNodeData: (nodeId, data) => {
    get().pushSnapshot();
-    const updatedNodes = get().nodes.map((node) => {
-      if (node.id === nodeId) {
-        return { ...node, data: { ...node.data, ...data } };
-      }
-      return node;
-    });
-
-    get().validateDuplicateNames(updatedNodes); // Re-validate after update
-    set({ nodes: updatedNodes });
-  },
-
-  //helper function to see if any of the nodes have duplicate names
-  validateDuplicateNames: (nodes: Node[]) => {
-    const nameMap = new Map<string, string[]>();
-
-    // 1. Group IDs by their identifier (name, norm, or label)
-    nodes.forEach((n) => {
-      const name = (n.data.name || n.data.norm )?.toString().trim();
-      if (name) {
-        if (!nameMap.has(name)) nameMap.set(name, []);
-        nameMap.get(name)!.push(n.id);
-      }
-    });
-
-    // 2. Scan nodes and toggle the warning
-    nodes.forEach((n) => {
-      const name = (n.data.name || n.data.norm )?.toString().trim();
-      const isDuplicate = name ? (nameMap.get(name)?.length || 0) > 1 : false;
-
-      if (isDuplicate) {
-        get().registerWarning({
-          scope: { id: n.id },
-          type: 'DUPLICATE_ELEMENT_NAME',
-          severity: 'ERROR',
-          description: `The name "${name}" is already used by another element.`
-        });
-      } else {
-        // This clears the warning if the "twin" was deleted or renamed
-        get().unregisterWarning(n.id, 'DUPLICATE_ELEMENT_NAME');
-      }
+    set({
+      nodes: get().nodes.map((node) => {
+        if (node.id === nodeId) {
+          node = { ...node, data: { ...node.data, ...data }};
+        }
+        return node;
+      }),
    });
  },
-  

  /**
   * Adds a new node to the flow store.
@@ -408,12 +306,8 @@ const useFlowStore = create<FlowState>(UndoRedo((set, get) => ({
      })
      return { ruleRegistry: registry };
    })
-  },
-  ...editorWarningRegistry(get, set),
+  }
  }))
 );

-
-
 export default useFlowStore;
-
--- a/src/pages/VisProgPage/visualProgrammingUI/VisProgTypes.tsx
+++ b/src/pages/VisProgPage/visualProgrammingUI/VisProgTypes.tsx
@@ -1,6 +1,3 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
 // VisProgTypes.ts
 import type {
  Edge,
@@ -10,9 +7,8 @@ import type {
  OnReconnect,
  Node,
  OnEdgesDelete,
-  OnNodesDelete, DeleteElementsOptions
+  OnNodesDelete
 } from '@xyflow/react';
-import type {EditorWarningRegistry} from "./components/EditorWarnings.tsx";
 import type {HandleRule} from "./HandleRuleLogic.ts";
 import type { NodeTypes } from './NodeRegistry';
 import type {FlowSnapshot} from "./EditorUndoRedo.ts";
@@ -72,10 +68,7 @@ export type FlowState = {
   * Deletes a node and any connected edges.
   * @param nodeId - the ID of the node to delete
   */
-  deleteNode: (nodeId: string,  deleteElements?: (params: DeleteElementsOptions) => Promise<{
-    deletedNodes: Node[]
-    deletedEdges: Edge[]
-  }>) => void;
+  deleteNode: (nodeId: string) => void;

  /**
   * Replaces the current nodes array in the store.
@@ -96,17 +89,12 @@ export type FlowState = {
   */
  updateNodeData: (nodeId: string, data: object) => void;

-  /**
-   * Validates that all node names are unique across the workspace.
-   */
-  validateDuplicateNames: (nodes: Node[]) => void;
-
  /**
   * Adds a new node to the flow.
   * @param node - the Node object to add
   */
  addNode: (node: Node) => void;
-} & UndoRedoState & HandleRuleRegistry & EditorWarningRegistry;
+} & UndoRedoState & HandleRuleRegistry;

 export type UndoRedoState = {
  // UndoRedo Types
@@ -141,7 +129,4 @@ export type HandleRuleRegistry = {

  // cleans up all registered rules of all handles of the provided node
  unregisterNodeRules: (nodeId: string) => void
-}
-
-
-
+}
--- a/src/pages/VisProgPage/visualProgrammingUI/components/DragDropSidebar.tsx
+++ b/src/pages/VisProgPage/visualProgrammingUI/components/DragDropSidebar.tsx
@@ -1,6 +1,3 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
 import { useDraggable } from '@neodrag/react';
 import { useReactFlow, type XYPosition } from '@xyflow/react';
 import { type ReactNode, useCallback, useRef, useState } from 'react';
--- a/src/pages/VisProgPage/visualProgrammingUI/components/EditorWarnings.tsx
+++ b/src/pages/VisProgPage/visualProgrammingUI/components/EditorWarnings.tsx
@@ -1,250 +0,0 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
-/* contains all logic for the VisProgEditor warning system
-*
-* Missing but desirable features:
-* - Warning filtering:
-*     - if there is no completely connected chain of startNode-[PhaseNodes]-EndNode
-*       then hide any startNode, phaseNode, or endNode specific warnings
-*/
-import useFlowStore from "../VisProgStores.tsx";
-import type {FlowState} from "../VisProgTypes.tsx";
-
-// --| Type definitions |--
-
-export type WarningId = NodeId | "GLOBAL_WARNINGS";
-export type NodeId = string;
-
-
-export type WarningType =
-  | 'MISSING_INPUT'
-  | 'MISSING_OUTPUT'
-  | 'PLAN_IS_UNDEFINED'
-  | 'INCOMPLETE_PROGRAM'
-  | 'NOT_CONNECTED_TO_PROGRAM'
-  | 'ELEMENT_STARTS_WITH_NUMBER' //(non-phase)elements are not allowed to be or start with a number
-  | 'DUPLICATE_ELEMENT_NAME' // elements are not allowed to have the same name as another element
-  | string
-
-export type WarningSeverity =
-  | 'INFO' // Acceptable, but important to be aware of
-  | 'WARNING' // Acceptable, but probably undesirable behavior
-  | 'ERROR' // Prevents running program, should be fixed before running program is allowed
-
-/**
- * warning scope, include a handleId if the warning is handle specific
- */
-export type WarningScope = {
-  id: string;
-  handleId?: string;
-}
-
-export type EditorWarning = {
-  scope: WarningScope;
-  type: WarningType;
-  severity: WarningSeverity;
-  description: string;
-};
-
-/**
- * a scoped WarningKey,
- * the handleId scoping is only needed for handle specific errors
- *
- * "`WarningType`:`handleId`"
- */
-export type WarningKey = string; // for warnings that can occur on a per-handle basis
-
-/**
- * a composite key used in the severityIndex
- *
- * "`WarningId`|`WarningKey`"
- */
-export type CompositeWarningKey = string;
-
-export type WarningRegistry = Map<WarningId , Map<WarningKey, EditorWarning>>;
-export type SeverityIndex = Map<WarningSeverity, Set<CompositeWarningKey>>;
-
-type ZustandSet = (partial: Partial<FlowState> | ((state: FlowState) => Partial<FlowState>)) => void;
-type ZustandGet = () => FlowState;
-
-export type EditorWarningRegistry = {
-  /**
-   * stores all editor warnings
-   */
-  editorWarningRegistry: WarningRegistry;
-  /**
-   * index of warnings by severity
-   */
-  severityIndex: SeverityIndex;
-
-  /**
-   * gets all warnings and returns them as a list of warnings
-   * @returns {EditorWarning[]}
-   */
-  getWarnings: () => EditorWarning[];
-
-  /**
-   * gets all warnings with the current severity
-   * @param {WarningSeverity} warningSeverity
-   * @returns {EditorWarning[]}
-   */
-  getWarningsBySeverity: (warningSeverity: WarningSeverity) => EditorWarning[];
-
-  /**
-   * checks if there are no warnings of breaking severity
-   * @returns {boolean}
-   */
-  isProgramValid: () => boolean;
-
-  /**
-   * registers a warning to the warningRegistry and the SeverityIndex
-   * @param {EditorWarning} warning
-   */
-  registerWarning: (warning: EditorWarning) => void;
-
-  /**
-   * unregisters a warning from the warningRegistry and the SeverityIndex
-   * @param {EditorWarning} warning
-   */
-  unregisterWarning: (id: WarningId, warningKey: WarningKey) => void
-
-  /**
-   * unregisters warnings from the warningRegistry and the SeverityIndex
-   * @param {WarningId} warning
-   */
-  unregisterWarningsForId: (id: WarningId) => void;
-}
-
-// --| implemented logic |--
-
-/**
- * the id to use for global editor warnings
- * @type {string}
- */
-export const globalWarning = "GLOBAL_WARNINGS";
-
-export function editorWarningRegistry(get: ZustandGet, set: ZustandSet) : EditorWarningRegistry { return {
-  editorWarningRegistry: new Map<NodeId, Map<WarningKey, EditorWarning>>(),
-  severityIndex: new Map([
-    ['INFO', new Set<CompositeWarningKey>()],
-    ['WARNING', new Set<CompositeWarningKey>()],
-    ['ERROR', new Set<CompositeWarningKey>()],
-  ]),
-
-  getWarningsBySeverity: (warningSeverity) => {
-    const wRegistry = new Map([...get().editorWarningRegistry].map(([k, v]) => [k, new Map(v)]));
-    const sIndex = new Map(get().severityIndex);
-    const warningKeys = sIndex.get(warningSeverity);
-    const warnings: EditorWarning[] = [];
-
-    warningKeys?.forEach(
-      (compositeKey) => {
-        const [id, warningKey] = compositeKey.split('|');
-        const warning = wRegistry.get(id)?.get(warningKey);
-
-        if (warning) {
-          warnings.push(warning);
-        }
-      }
-    )
-
-    return warnings;
-  },
-
-  isProgramValid: () => {
-    const sIndex = get().severityIndex;
-    return (sIndex.get("ERROR")!.size === 0);
-  },
-
-  getWarnings: () => Array.from(get().editorWarningRegistry.values())
-      .flatMap(innerMap => Array.from(innerMap.values())),
-
-
-  registerWarning: (warning) => {
-    const { scope: {id, handleId}, type, severity } = warning;
-    const warningKey = handleId ? `${type}:${handleId}` : type;
-    const compositeKey = `${id}|${warningKey}`;
-    const wRegistry = new Map([...get().editorWarningRegistry].map(([k, v]) => [k, new Map(v)]));
-    const sIndex = new Map(get().severityIndex);
-    // add to warning registry
-    if (!wRegistry.has(id)) {
-      wRegistry.set(id, new Map());
-    }
-    wRegistry.get(id)!.set(warningKey, warning);
-
-
-    // add to severityIndex
-    if (!sIndex.get(severity)!.has(compositeKey)) {
-      sIndex.get(severity)!.add(compositeKey);
-    }
-
-    set({
-      editorWarningRegistry: wRegistry,
-      severityIndex: sIndex
-    })
-  },
-
-  unregisterWarning: (id, warningKey) => {
-    const wRegistry = new Map([...get().editorWarningRegistry].map(([k, v]) => [k, new Map(v)]));
-    const sIndex = new Map(get().severityIndex);
-    // verify if the warning was created already
-    const warning = wRegistry.get(id)?.get(warningKey);
-    if (!warning) return;
-
-    // remove from warning registry
-    wRegistry.get(id)!.delete(warningKey);
-
-
-    // remove from severityIndex
-    sIndex.get(warning.severity)!.delete(`${id}|${warningKey}`);
-
-    set({
-      editorWarningRegistry: wRegistry,
-      severityIndex: sIndex
-    })
-  },
-
-  unregisterWarningsForId: (id) => {
-    const wRegistry = new Map([...get().editorWarningRegistry].map(([k, v]) => [k, new Map(v)]));
-    const sIndex = new Map(get().severityIndex);
-
-    const nodeWarnings = wRegistry.get(id);
-
-    // remove from severity index
-    if (nodeWarnings) {
-      nodeWarnings.forEach((warning) => {
-        const warningKey = warning.scope.handleId
-          ? `${warning.type}:${warning.scope.handleId}`
-          : warning.type;
-        sIndex.get(warning.severity)?.delete(`${id}|${warningKey}`);
-      });
-    }
-
-    // remove from warning registry
-    wRegistry.delete(id);
-
-    set({
-      editorWarningRegistry: wRegistry,
-      severityIndex: sIndex
-    })
-  },
-}}
-
-
-
-/**
- * returns a summary of the warningRegistry
- * @returns {{info: number, warning: number, error: number, isValid: boolean}}
- */
-export function warningSummary() {
-  const {severityIndex, isProgramValid} = useFlowStore.getState();
-  return {
-    info: severityIndex.get('INFO')!.size,
-    warning: severityIndex.get('WARNING')!.size,
-    error: severityIndex.get('ERROR')!.size,
-    isValid: isProgramValid(),
-  };
-}
-
-
--- a/src/pages/VisProgPage/visualProgrammingUI/components/GestureValueEditor.module.css
+++ b/src/pages/VisProgPage/visualProgrammingUI/components/GestureValueEditor.module.css
@@ -1,8 +1,4 @@
-/*
-This program has been developed by students from the bachelor Computer Science at Utrecht
-University within the Software Project course.
-© Copyright Utrecht University (Department of Information and Computing Sciences)
-*/
+
 .gestureEditor {
  display: flex;
  flex-direction: column;
--- a/src/pages/VisProgPage/visualProgrammingUI/components/GestureValueEditor.tsx
+++ b/src/pages/VisProgPage/visualProgrammingUI/components/GestureValueEditor.tsx
@@ -1,6 +1,3 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
 import { useState, useRef } from "react";
 import styles from './GestureValueEditor.module.css'

--- a/src/pages/VisProgPage/visualProgrammingUI/components/NodeComponents.tsx
+++ b/src/pages/VisProgPage/visualProgrammingUI/components/NodeComponents.tsx
@@ -1,7 +1,4 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
-import {NodeToolbar, useReactFlow} from '@xyflow/react';
+import {NodeToolbar} from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
 import {type JSX, useState} from "react";
 import {createPortal} from "react-dom";
@@ -33,11 +30,10 @@ type ToolbarProps = {
 */
 export function Toolbar({nodeId, allowDelete}: ToolbarProps) {
  const {nodes, deleteNode} = useFlowStore();
-  const { deleteElements } = useReactFlow();
+

  const deleteParentNode = () => {
-
-    deleteNode(nodeId, deleteElements);
+    deleteNode(nodeId);
  };

  const nodeType = nodes.find((node) => node.id === nodeId)?.type as keyof typeof NodeTooltips;
--- a/src/pages/VisProgPage/visualProgrammingUI/components/Plan.default.ts
+++ b/src/pages/VisProgPage/visualProgrammingUI/components/Plan.default.ts
@@ -1,6 +1,3 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
 import type { Plan, PlanElement } from "./Plan";

 export const defaultPlan: Plan = {
--- a/src/pages/VisProgPage/visualProgrammingUI/components/Plan.tsx
+++ b/src/pages/VisProgPage/visualProgrammingUI/components/Plan.tsx
@@ -1,6 +1,3 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
 import { type Node } from "@xyflow/react"
 import { GoalReduce } from "../nodes/GoalNode"

--- a/src/pages/VisProgPage/visualProgrammingUI/components/PlanEditingFunctions.tsx
+++ b/src/pages/VisProgPage/visualProgrammingUI/components/PlanEditingFunctions.tsx
@@ -1,6 +1,3 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
 // This file is to avoid sharing both functions and components which eslint dislikes. :)
 import type { GoalNode } from "../nodes/GoalNode"
 import type { Goal, Plan } from "./Plan"
--- a/src/pages/VisProgPage/visualProgrammingUI/components/PlanEditor.module.css
+++ b/src/pages/VisProgPage/visualProgrammingUI/components/PlanEditor.module.css
@@ -1,8 +1,3 @@
-/*
-This program has been developed by students from the bachelor Computer Science at Utrecht
-University within the Software Project course.
-© Copyright Utrecht University (Department of Information and Computing Sciences)
-*/
 .planDialog {
  overflow:visible;
  width: 80vw;
@@ -11,7 +6,6 @@ University within the Software Project course.
  overscroll-behavior: contain;
 }

-
 .planDialog::backdrop {
  background: rgba(0, 0, 0, 0.4);
 }
@@ -73,4 +67,17 @@ University within the Software Project course.
  font-style: italic;
 }

+.dragHandle {
+  margin-left: auto;
+  cursor: grab;
+  opacity: 0.5;
+  user-select: none;
+}

+.dragHandle:active {
+  cursor: grabbing;
+}
+
+.planStepDragging {
+  opacity: 0.4;
+}
--- a/src/pages/VisProgPage/visualProgrammingUI/components/PlanEditor.tsx
+++ b/src/pages/VisProgPage/visualProgrammingUI/components/PlanEditor.tsx
@@ -1,6 +1,3 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
 import {useRef, useState} from "react";
 import useFlowStore from "../VisProgStores.tsx";
 import styles from './PlanEditor.module.css';
@@ -9,16 +6,26 @@ import { defaultPlan } from "../components/Plan.default";
 import { TextField } from "../../../../components/TextField";
 import GestureValueEditor from "./GestureValueEditor"; 

+/**
+ * The properties of a plan editor.
+ * @property plan: The optional plan loaded into this editor.
+ * @property onSave: The function that will be called upon save.
+ * @property description: Optional description which is already set.
+ * @property onlyEditPhasing: Optional boolean to toggle
+ * whether or not this editor is part of the phase editing.
+ */
 type PlanEditorDialogProps = {
  plan?: Plan;
  onSave: (plan: Plan | undefined) => void;
  description? : string;
+  onlyEditPhasing? : boolean;
 };

 export default function PlanEditorDialog({
  plan,
  onSave,
  description,
+  onlyEditPhasing = false,
 }: PlanEditorDialogProps) {
  // UseStates and references
  const dialogRef = useRef<HTMLDialogElement | null>(null);
@@ -27,10 +34,11 @@ export default function PlanEditorDialog({
  const [newActionGestureType, setNewActionGestureType] = useState<boolean>(true);
  const [newActionValue, setNewActionValue] = useState("");
  const [hasInteractedWithPlan, setHasInteractedWithPlan] = useState<boolean>(false)
+  const [draggedIndex, setDraggedIndex] = useState<number | null>(null);
  const { setScrollable } = useFlowStore();
  const nodes = useFlowStore().nodes;

-  //Button Actions
+  // Button Actions
  const openCreate = () => {
    setScrollable(false);
    setDraftPlan({...structuredClone(defaultPlan), id: crypto.randomUUID()});
@@ -92,9 +100,9 @@ export default function PlanEditorDialog({
        data-testid={"PlanEditorDialogTestID"}
      >
      <form method="dialog" className="flex-col gap-md">
-          <h3> {draftPlan?.id === plan?.id ? "Edit Plan" : "Create Plan"} </h3>
+          <h3> {onlyEditPhasing ? "Editing Phase Ordering" : (draftPlan?.id === plan?.id ? "Edit Plan" : "Create Plan")} </h3>
          {/* Plan name text field */}
-          {draftPlan && (
+          {(draftPlan && !onlyEditPhasing) && (
              <TextField
                  value={draftPlan.name}
                  setValue={(name) =>
@@ -107,12 +115,14 @@ export default function PlanEditorDialog({
          {draftPlan && (<div className={styles.planEditor}>
              <div className={styles.planEditorLeft}>
              {/* Left Side (Action Adder) */}
-                  <h4>Add Action</h4>
+                  <h4>{onlyEditPhasing ? "You can't add any actions, only rearrange the steps." : "Add Action"}</h4>
                  {(!plan && description && draftPlan.steps.length === 0 && !hasInteractedWithPlan) && (<div className={styles.stepSuggestion}>
                      <label> Filled in as a suggestion! </label>
                      <label> Feel free to change! </label>
                  </div>)}
-                  <label>
+                
+                    
+                    {(!onlyEditPhasing) && (<label>
                      Action Type <wbr />
                      {/* Type selection */}
                      <select
@@ -126,10 +136,10 @@ export default function PlanEditorDialog({
                      <option value="gesture">Gesture Action</option>
                      <option value="llm">LLM Action</option>
                      </select>
-                  </label>
+                    </label>)}

-                  {/* Action value editor*/}
-                  {newActionType === "gesture" ? (
+                    {/* Action value editor*/}
+                    {!onlyEditPhasing && newActionType === "gesture" ? (
                      // Gesture get their own editor component
                      <GestureValueEditor
                        value={newActionValue}
@@ -137,17 +147,20 @@ export default function PlanEditorDialog({
                        setType={setNewActionGestureType}
                        placeholder="Gesture name"
                      />
-                  ) : (
-                      <TextField
+                    ) 
+                    :
+                    // Only show the text field if we're not just rearranging.
+                    (!onlyEditPhasing &&
+                      (<TextField
                          value={newActionValue}
                          setValue={setNewActionValue}
                          placeholder={
                              newActionType === "speech" ? "Speech text"
                              : "LLM goal"
                          }
-                      />
-                  )}
-
+                      />)
+                    )}
+                
                  {/* Adding steps */}
                  <button
                      type="button"
--- a/src/pages/VisProgPage/visualProgrammingUI/components/RuleBasedHandle.module.css
+++ b/src/pages/VisProgPage/visualProgrammingUI/components/RuleBasedHandle.module.css
@@ -1,21 +1,7 @@
-/*
-This program has been developed by students from the bachelor Computer Science at Utrecht
-University within the Software Project course.
-© Copyright Utrecht University (Department of Information and Computing Sciences)
-*/
-:global(.react-flow__handle.source){
-    border-radius: 100%;
-}
-:global(.react-flow__handle.target){
-    border-radius: 15%;
-}
-
-
-
 :global(.react-flow__handle.connected) {
    background: lightgray;
    border-color: green;
-    filter: drop-shadow(0 0 0.15rem green);
+    filter: drop-shadow(0 0 0.25rem green);
 }

 :global(.singleConnectionHandle.connected) {
@@ -30,19 +16,19 @@ University within the Software Project course.
 :global(.singleConnectionHandle.unconnected){
    background: lightsalmon;
    border-color: #ff6060;
-    filter: drop-shadow(0 0 0.15rem #ff6060);
+    filter: drop-shadow(0 0 0.25rem #ff6060);
 }

 :global(.react-flow__handle.connectingto) {
    background: #ff6060;
    border-color: coral;
-    filter: drop-shadow(0 0 0.15rem coral);
+    filter: drop-shadow(0 0 0.25rem coral);
 }

 :global(.react-flow__handle.valid) {
    background: #55dd99;
    border-color: green;
-    filter: drop-shadow(0 0 0.15rem green);
+    filter: drop-shadow(0 0 0.25rem green);
 }

 :global(.react-flow__handle) {
--- a/src/pages/VisProgPage/visualProgrammingUI/components/RuleBasedHandle.tsx
+++ b/src/pages/VisProgPage/visualProgrammingUI/components/RuleBasedHandle.tsx
@@ -1,12 +1,10 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
 import {
  Handle,
  type HandleProps,
  type Connection,
  useNodeId, useNodeConnections
 } from '@xyflow/react';
+import {useState} from 'react';
 import { type HandleRule, useHandleRules} from "../HandleRuleLogic.ts";
 import "./RuleBasedHandle.module.css";

@@ -31,16 +29,21 @@ export function MultiConnectionHandle({
    handleId: id!
  })

+  // initialise the handles state with { isValid: true } to show that connections are possible
+  const [handleState, setHandleState] = useState<{ isSatisfied: boolean, message?: string }>({ isSatisfied: true });
+
  return (
    <Handle
      {...otherProps}
      id={id}
      type={type}
-      className={"multiConnectionHandle" + (connections.length === 0 ? " unconnected" : " connected") + ` ${type}`}
+      className={"multiConnectionHandle" + (connections.length === 0 ? " unconnected" : " connected")}
      isValidConnection={(connection) => {
        const result = validate(connection as Connection);
+        setHandleState(result);
        return result.isSatisfied;
      }}
+      title={handleState.message}
    />
  );
 }
@@ -63,18 +66,22 @@ export function SingleConnectionHandle({
    handleId: id!
  })

+  // initialise the handles state with { isValid: true } to show that connections are possible
+  const [handleState, setHandleState] = useState<{ isSatisfied: boolean, message?: string }>({ isSatisfied: true });

  return (
    <Handle
      {...otherProps}
      id={id}
      type={type}
-      className={"singleConnectionHandle" + (connections.length === 0 ? " unconnected" : " connected") + ` ${type}`}
+      className={"singleConnectionHandle" + (connections.length === 0 ? " unconnected" : " connected")}
      isConnectable={connections.length === 0}
      isValidConnection={(connection) => {
        const result = validate(connection as Connection);
+        setHandleState(result);
        return result.isSatisfied;
      }}
+      title={handleState.message}
    />
  );
 }
--- a/src/pages/VisProgPage/visualProgrammingUI/components/SaveLoadPanel.module.css
+++ b/src/pages/VisProgPage/visualProgrammingUI/components/SaveLoadPanel.module.css
@@ -1,8 +1,3 @@
-/*
-This program has been developed by students from the bachelor Computer Science at Utrecht
-University within the Software Project course.
-© Copyright Utrecht University (Department of Information and Computing Sciences)
-*/
 .save-load-panel {
  border-radius: 0 0 5pt 5pt;
  background-color: canvas;
--- a/src/pages/VisProgPage/visualProgrammingUI/components/SaveLoadPanel.tsx
+++ b/src/pages/VisProgPage/visualProgrammingUI/components/SaveLoadPanel.tsx
@@ -1,6 +1,3 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
 import {type ChangeEvent, useRef, useState} from "react";
 import useFlowStore from "../VisProgStores";
 import visProgStyles from "../../VisProg.module.css";
@@ -32,8 +29,6 @@ export default function SaveLoadPanel() {
      const text = await file.text();
      const parsed = JSON.parse(text) as SavedProject;
      if (!parsed.nodes || !parsed.edges) throw new Error("Invalid file format");
-      const {nodes, unregisterWarningsForId} = useFlowStore.getState();
-      nodes.forEach((node) => {unregisterWarningsForId(node.id);});
      setNodes(parsed.nodes);
      setEdges(parsed.edges);
    } catch (e) {
--- a/src/pages/VisProgPage/visualProgrammingUI/components/WarningSidebar.module.css
+++ b/src/pages/VisProgPage/visualProgrammingUI/components/WarningSidebar.module.css
@@ -1,208 +0,0 @@
-/*
-This program has been developed by students from the bachelor Computer Science at Utrecht
-University within the Software Project course.
-© Copyright Utrecht University (Department of Information and Computing Sciences)
-*/
-.warnings-sidebar {
-    min-width: auto;
-    max-width: 340px;
-    margin-right: 0;
-    height: 100%;
-    background: canvas;
-    display: flex;
-    flex-direction: row;
-}
-
-.warnings-toggle-bar {
-    background-color: ButtonFace;
-    justify-items: center;
-    align-content: center;
-    width: 1rem;
-    cursor: pointer;
-}
-
-.warnings-toggle-bar.error:first-child:has(.arrow-right){
-    background-color: hsl(from red h s 75%);
-}
-.warnings-toggle-bar.warning:first-child:has(.arrow-right) {
-    background-color: hsl(from orange h s 75%);
-}
-.warnings-toggle-bar.info:first-child:has(.arrow-right) {
-    background-color: hsl(from steelblue h s 75%);
-}
-
-.warnings-toggle-bar:hover {
-    background-color: GrayText !important ;
-    .arrow-left {
-        border-right-color: ButtonFace;
-        transition: transform 0.15s ease-in-out;
-        transform: rotateY(180deg);
-    }
-    .arrow-right {
-        border-left-color: ButtonFace;
-        transition: transform 0.15s ease-in-out;
-        transform: rotateY(180deg);
-    }
-}
-
-
-.warnings-content {
-    width: 320px;
-    flex: 1;
-    flex-direction: column;
-    border-left: 2px solid CanvasText;
-}
-
-.warnings-header {
-    padding: 12px;
-    border-bottom: 2px solid CanvasText;
-}
-
-.severity-tabs {
-    display: flex;
-    gap: 4px;
-}
-
-.severity-tab {
-    flex: 1;
-    padding: 4px;
-    background: ButtonFace;
-    color: GrayText;
-    border: none;
-    cursor: pointer;
-}
-
-.count {
-    padding: 4px;
-    color: GrayText;
-    border: none;
-    cursor: pointer;
-}
-
-.severity-tab.active {
-    color: ButtonText;
-    border: 2px solid currentColor;
-    .count {
-        color: ButtonText;
-    }
-}
-
-.warning-group-header {
-    background: ButtonFace;
-    padding: 6px;
-    font-weight: bold;
-}
-
-.warnings-list {
-    flex: 1;
-    min-height: 0;
-    overflow-y: scroll;
-}
-
-.warnings-empty {
-    margin: auto;
-}
-
-.warning-item {
-    display: flex;
-    flex-direction: column;
-    margin: 5px;
-    gap: 2px;
-    padding: 0;
-    border-radius: 5px;
-    cursor: pointer;
-    color: GrayText;
-}
-
-.warning-item:hover {
-    background: ButtonFace;
-}
-
-.warning-item--error {
-    border: 2px solid red;
-    background-color: hsl(from red h s 96%);
-    .item-header{
-        background-color: red;
-        .type{
-            color: hsl(from red h s 96%);
-        }
-    }
-
-}
-
-.warning-item--error:hover {
-    background-color: hsl(from red h s 75%);
-}
-
-.warning-item--warning {
-    border: 2px solid orange;
-    background-color: hsl(from orange h s 96%);
-    .item-header{
-        background-color: orange;
-        .type{
-            color: hsl(from orange h s 96%);
-        }
-    }
-}
-
-.warning-item--warning:hover {
-    background-color: hsl(from orange h s 75%);
-}
-
-.warning-item--info {
-    border: 2px solid steelblue;
-    background-color: hsl(from steelblue h s 96%);
-    .item-header{
-        background-color: steelblue;
-        .type{
-            color: hsl(from steelblue h s 96%);
-        }
-    }
-}
-
-.warning-item--info:hover {
-    background-color: hsl(from steelblue h s 75%);
-}
-
-.warning-item .item-header {
-    padding: 8px 8px;
-    opacity: 1;
-    font-weight: bolder;
-}
-.warning-item .item-header .type{
-    padding: 2px 8px;
-    font-size: 0.9rem;
-}
-
-.warning-item .description {
-    padding: 5px 10px;
-    font-size: 0.8rem;
-}
-
-.auto-hide {
-    background-color: Canvas;
-    border-top: 2px solid CanvasText;
-    margin-top: auto;
-    width: 100%;
-    height: 2.5rem;
-    display: flex;
-    align-items: center;
-    padding: 0 12px;
-}
-
-/* arrows for toggleBar */
-.arrow-right {
-    width: 0;
-    height: 0;
-    border-top: 0.5rem solid transparent;
-    border-bottom: 0.5rem solid transparent;
-    border-left: 0.6rem solid GrayText;
-}
-
-.arrow-left {
-    width: 0;
-    height: 0;
-    border-top: 0.5rem solid transparent;
-    border-bottom: 0.5rem solid transparent;
-    border-right: 0.6rem solid GrayText;
-}
--- a/src/pages/VisProgPage/visualProgrammingUI/components/WarningSidebar.tsx
+++ b/src/pages/VisProgPage/visualProgrammingUI/components/WarningSidebar.tsx
@@ -1,228 +0,0 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
-import {useReactFlow, useStoreApi} from "@xyflow/react";
-import clsx from "clsx";
-import {useEffect, useState} from "react";
-import useFlowStore from "../VisProgStores.tsx";
-import {
-  warningSummary,
-  type WarningSeverity,
-  type EditorWarning, globalWarning
-} from "./EditorWarnings.tsx";
-import styles from "./WarningSidebar.module.css";
-
-/**
- * the warning sidebar, shows all warnings
- *
- * @returns {React.JSX.Element}
- * @constructor
- */
-export function WarningsSidebar() {
-  const warnings = useFlowStore.getState().getWarnings();
-  const [hide, setHide] = useState(false);
-  const [severityFilter, setSeverityFilter] = useState<WarningSeverity | 'ALL'>('ALL');
-  const [autoHide, setAutoHide] = useState(false);
-
-  // let autohide change hide status only when autohide is toggled
-  // and allow for user to change the hide state even if autohide is enabled
-  const hasWarnings = warnings.length > 0;
-  useEffect(() => {
-    if (autoHide) {
-      setHide(!hasWarnings);
-    }
-  }, [autoHide, hasWarnings]);
-
-  const filtered = severityFilter === 'ALL'
-    ? warnings
-    : warnings.filter(w => w.severity === severityFilter);
-
-
-  const summary = warningSummary();
-  // Finds the first key where the count > 0
-  const getHighestSeverity = () => {
-    if (summary.error > 0) return styles.error;
-    if (summary.warning > 0) return styles.warning;
-    if (summary.info > 0) return styles.info;
-    return '';
-  };
-
-  return (
-    <aside className={`flex-row`} >
-      <div
-        className={`${styles.warningsToggleBar} ${getHighestSeverity()}`}
-        onClick={() => setHide(!hide)}
-        title={"toggle warnings"}
-      >
-        <div className={`${hide ? styles.arrowRight : styles.arrowLeft}`}></div>
-      </div>
-      <div 
-        id="warningSidebar" 
-        className={styles.warningsContent} 
-        style={hide ? {display: "none"} : {display: "flex"}}
-      >
-        <WarningsHeader
-          severityFilter={severityFilter}
-          onChange={setSeverityFilter}
-        />
-
-        <WarningsList warnings={filtered} />
-        <div className={styles.autoHide}>
-          <input
-            id="autoHideSwitch"
-            type={"checkbox"}
-            checked={autoHide}
-            onChange={(e) => setAutoHide(e.target.checked)}
-          /><label>Hide if there are no warnings</label>
-        </div>
-      </div>
-    </aside>
-
-  );
-}
-
-/**
- * the header of the warning sidebar, contains severity filtering buttons
- *
- * @param {WarningSeverity | "ALL"} severityFilter
- * @param {(severity: (WarningSeverity | "ALL")) => void} onChange
- * @returns {React.JSX.Element}
- * @constructor
- */
-function WarningsHeader({
-  severityFilter,
-  onChange,
-}: {
-  severityFilter: WarningSeverity | 'ALL';
-  onChange: (severity: WarningSeverity | 'ALL') => void;
-}) {
-  const summary = warningSummary();
-
-  return (
-    <div className={styles.warningsHeader}>
-      <h3>Warnings</h3>
-      <div className={styles.severityTabs}>
-        {(['ALL', 'ERROR', 'WARNING', 'INFO'] as const).map(severity => (
-          <button
-            key={severity}
-            className={clsx(styles.severityTab, severityFilter === severity && styles.active)}
-            onClick={() => onChange(severity)}
-          >
-            {severity}
-            {severity !== 'ALL' && (
-              <span className={styles.count}>
-                {summary[severity.toLowerCase() as keyof typeof summary]}
-              </span>
-            )}
-          </button>
-        ))}
-      </div>
-    </div>
-  );
-}
-
-
-/**
- *  the list of warnings in the warning sidebar
- *
- * @param {{warnings: EditorWarning[]}} props
- * @returns {React.JSX.Element}
- * @constructor
- */
-function WarningsList(props: { warnings: EditorWarning[] }) {
-  const splitWarnings = {
-    global: props.warnings.filter(w => w.scope.id === globalWarning),
-    other: props.warnings.filter(w => w.scope.id !== globalWarning),
-  }
-  if (props.warnings.length === 0) {
-    return (
-      <div className={styles.warningsEmpty}>
-        No warnings!
-      </div>
-    )
-  }
-  return (
-    <div className={styles.warningsList}>
-        <div className={styles.warningGroupHeader}>global:</div>
-        <div className={styles.warningsGroup}>
-          {splitWarnings.global.map((warning) => (
-            <WarningListItem warning={warning} key={`${warning.scope.id}|${warning.type}` + (warning.scope.handleId
-              ? `:${warning.scope.handleId}`
-              : "")}
-            />
-          ))}
-          {splitWarnings.global.length === 0 && "No global warnings!"}
-        </div>
-        <div className={styles.warningGroupHeader}>other:</div>
-        <div className={styles.warningsGroup}>
-          {splitWarnings.other.map((warning) => (
-            <WarningListItem warning={warning} key={`${warning.scope.id}|${warning.type}` + (warning.scope.handleId
-              ? `:${warning.scope.handleId}`
-              : "")}
-            />
-          ))}
-          {splitWarnings.other.length === 0 && "No other warnings!"}
-        </div>
-    </div>
-  );
-}
-
-/**
- * a single warning in the warning sidebar
- *
- * @param {{warning: EditorWarning, key: string}} props
- * @returns {React.JSX.Element}
- * @constructor
- */
-function WarningListItem(props: { warning: EditorWarning, key: string}) {
-  const jumpToNode = useJumpToNode();
-
-  return (
-    <div
-      className={clsx(styles.warningItem, styles[`warning-item--${props.warning.severity.toLowerCase()}`],)}
-      onClick={() => jumpToNode(props.warning.scope.id)}
-    >
-      <div className={styles.itemHeader}>
-        <span className={styles.type}>{props.warning.type}</span>
-      </div>
-
-      <div className={styles.description}>
-        {props.warning.description}
-      </div>
-    </div>
-  );
-}
-
-/**
- * moves the editor to the provided node
- * @returns {(nodeId: string) => void}
- */
-function useJumpToNode() {
-  const { getNode, setCenter, getViewport } = useReactFlow();
-  const { addSelectedNodes } = useStoreApi().getState();
-
-
-  return (nodeId: string) => {
-    // user can't jump to global warning, so prevent further logic from running if the warning is a globalWarning
-    if (nodeId === globalWarning) return;
-    const node = getNode(nodeId);
-    if (!node) return;
-
-    const nodeElement = document.querySelector(`.react-flow__node[data-id="${nodeId}"]`) as HTMLElement;
-    const { position } = node;
-    const viewport = getViewport();
-    const { width, height } = nodeElement.getBoundingClientRect();
-
-    //move to node
-    setCenter(
-      position!.x + ((width / viewport.zoom) / 2),
-      position!.y + ((height / viewport.zoom) / 2),
-      {duration: 300, interpolate: "smooth" }
-    ).then(() => {
-      addSelectedNodes([nodeId]);
-    });
-
-
-
-  };
-}
--- a/src/pages/VisProgPage/visualProgrammingUI/nodes/BasicBeliefNode.default.ts
+++ b/src/pages/VisProgPage/visualProgrammingUI/nodes/BasicBeliefNode.default.ts
@@ -1,7 +1,4 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
-import type { BasicBeliefNodeData } from "./BasicBeliefNode.tsx";
+import type { BasicBeliefNodeData } from "./BasicBeliefNode";


 /**
--- a/src/pages/VisProgPage/visualProgrammingUI/nodes/BasicBeliefNode.tsx
+++ b/src/pages/VisProgPage/visualProgrammingUI/nodes/BasicBeliefNode.tsx
@@ -1,19 +1,15 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
 import {
  type NodeProps,
  Position,
  type Node,
 } from '@xyflow/react';
-import { Toolbar } from '../components/NodeComponents.tsx';
+import { Toolbar } from '../components/NodeComponents';
 import styles from '../../VisProg.module.css';
 import {MultiConnectionHandle} from "../components/RuleBasedHandle.tsx";
 import {allowOnlyConnectionsFromHandle} from "../HandleRules.ts";
-import useFlowStore from '../VisProgStores.tsx';
-import { TextField } from '../../../../components/TextField.tsx';
-import { MultilineTextField } from '../../../../components/MultilineTextField.tsx';
-import {noMatchingLeftRightBelief} from "./BeliefGlobals.ts";
+import useFlowStore from '../VisProgStores';
+import { TextField } from '../../../../components/TextField';
+import { MultilineTextField } from '../../../../components/MultilineTextField';

 /**
 * The default data structure for a BasicBelief node
@@ -35,7 +31,7 @@ export type BasicBeliefNodeData = {
 };

 // These are all the types a basic belief could be.
-export type BasicBeliefType = Keyword | Semantic | DetectedObject | Emotion
+type BasicBeliefType = Keyword | Semantic | DetectedObject | Emotion
 type Keyword = { type: "keyword", id: string, value: string, label: "Keyword said:"};
 type Semantic = { type: "semantic", id: string, value: string, description: string, label: "Detected with LLM:"};
 type DetectedObject = { type: "object", id: string, value: string, label: "Object found:"};
@@ -116,7 +112,9 @@ export default function BasicBeliefNode(props: NodeProps<BasicBeliefNode>) {
    updateNodeData(props.id, {...data, belief: {...data.belief, description: value}});
  }

-  const emotionOptions = ["sad", "angry", "surprise", "fear", "happy", "disgust", "neutral"];
+  // Use this
+  const emotionOptions = ["Happy", "Angry", "Sad", "Cheerful"]
+

  let placeholder = ""
  let wrapping = ""
@@ -191,9 +189,8 @@ export default function BasicBeliefNode(props: NodeProps<BasicBeliefNode>) {
          </div>
          )}
        <MultiConnectionHandle type="source" position={Position.Right} id="source" rules={[
-          noMatchingLeftRightBelief,
-          allowOnlyConnectionsFromHandle([{nodeType:"trigger",handleId:"TriggerBeliefs"}, {nodeType:"norm",handleId:"NormBeliefs"},{nodeType:"InferredBelief",handleId:"inferred_belief"}]),
-        ]}  title="Connect to any number of trigger and/or normNode(-s)"/>
+        allowOnlyConnectionsFromHandle([{nodeType:"trigger",handleId:"TriggerBeliefs"}, {nodeType:"norm",handleId:"NormBeliefs"}]),
+        ]}/>
      </div>
    </>
  );
--- a/src/pages/VisProgPage/visualProgrammingUI/nodes/BeliefGlobals.ts
+++ b/src/pages/VisProgPage/visualProgrammingUI/nodes/BeliefGlobals.ts
@@ -1,66 +0,0 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
-import {getOutgoers, type Node} from '@xyflow/react';
-import {type HandleRule, type RuleResult, ruleResult} from "../HandleRuleLogic.ts";
-import useFlowStore from "../VisProgStores.tsx";
-import {BasicBeliefReduce} from "./BasicBeliefNode.tsx";
-import {type InferredBeliefNodeData, InferredBeliefReduce} from "./InferredBeliefNode.tsx";
-
-export function BeliefGlobalReduce(beliefNode: Node, nodes: Node[]) {
-  switch (beliefNode.type) {
-    case 'basic_belief':
-      return BasicBeliefReduce(beliefNode, nodes);
-    case 'inferred_belief':
-      return InferredBeliefReduce(beliefNode, nodes);
-  }
-}
-
-export const noMatchingLeftRightBelief : HandleRule = (connection, _)=> {
-  const { nodes } = useFlowStore.getState();
-  const thisNode = nodes.find(node => node.id === connection.target && node.type === 'inferred_belief');
-  if (!thisNode) return ruleResult.satisfied;
-
-  const iBelief = (thisNode.data as InferredBeliefNodeData).inferredBelief;
-  return (iBelief.left === connection.source || iBelief.right === connection.source)
-    ? ruleResult.notSatisfied("Connecting one belief to both input handles of an inferred belief node is not allowed")
-    : ruleResult.satisfied;
-}
-/**
- * makes it impossible to connect Inferred belief nodes
- * if the connection would create a cyclical connection between inferred beliefs
- */
-export const noBeliefCycles: HandleRule = (connection, _): RuleResult => {
-  const {nodes, edges} = useFlowStore.getState();
-  const defaultErrorMessage = "Cyclical connection exists between inferred beliefs";
-
-  /**
-   * recursively checks for cyclical connections between InferredBelief nodes
-   *
-   * to check for a cycle provide the source of an attempted connection as the targetNode for the cycle check,
-   * the currentNodeId should be initialised with the id of the targetNode of the attempted connection.
-   *
-   * @param {string} targetNodeId - the id of the node we are looking for as the endpoint of a cyclical connection
-   * @param {string} currentNodeId - the id of the node we are checking for outgoing connections to the provided target node
-   * @returns {RuleResult}
-   */
-  function checkForCycle(targetNodeId: string, currentNodeId: string): RuleResult {
-    const outgoingBeliefs = getOutgoers({id: currentNodeId}, nodes, edges)
-      .filter(node => node.type === 'inferred_belief');
-
-    if (outgoingBeliefs.length === 0) return ruleResult.satisfied;
-    if (outgoingBeliefs.some(node => node.id === targetNodeId)) return ruleResult
-      .notSatisfied(defaultErrorMessage);
-
-    const next = outgoingBeliefs.map(node => checkForCycle(targetNodeId, node.id))
-      .find(result => !result.isSatisfied);
-
-    return next
-      ? next
-      : ruleResult.satisfied;
-  }
-
-  return connection.source === connection.target
-    ? ruleResult.notSatisfied(defaultErrorMessage)
-    : checkForCycle(connection.source, connection.target);
-};
--- a/src/pages/VisProgPage/visualProgrammingUI/nodes/EndNode.default.ts
+++ b/src/pages/VisProgPage/visualProgrammingUI/nodes/EndNode.default.ts
@@ -1,6 +1,3 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
 import type { EndNodeData } from "./EndNode";

 /**
--- a/src/pages/VisProgPage/visualProgrammingUI/nodes/EndNode.tsx
+++ b/src/pages/VisProgPage/visualProgrammingUI/nodes/EndNode.tsx
@@ -1,18 +1,12 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
 import {
  type NodeProps,
  Position,
-  type Node, useNodeConnections
+  type Node,
 } from '@xyflow/react';
-import {useEffect} from "react";
-import type {EditorWarning} from "../components/EditorWarnings.tsx";
 import { Toolbar } from '../components/NodeComponents';
 import styles from '../../VisProg.module.css';
 import {SingleConnectionHandle} from "../components/RuleBasedHandle.tsx";
 import {allowOnlyConnectionsFromType} from "../HandleRules.ts";
-import useFlowStore from "../VisProgStores.tsx";



@@ -33,27 +27,6 @@ export type EndNode = Node<EndNodeData>
 * @returns React.JSX.Element
 */
 export default function EndNode(props: NodeProps<EndNode>) {
-  const {registerWarning, unregisterWarning} = useFlowStore.getState();
-  const connections = useNodeConnections({
-    id: props.id,
-    handleId: 'target'
-  })
-
-  useEffect(() => {
-    const noConnectionWarning : EditorWarning = {
-      scope: {
-        id: props.id,
-        handleId: 'target'
-      },
-      type: 'MISSING_INPUT',
-      severity: "ERROR",
-      description: "the endNode does not have an incoming connection from a phaseNode"
-    }
-
-    if (connections.length === 0) { registerWarning(noConnectionWarning); }
-    else { unregisterWarning(props.id, `${noConnectionWarning.type}:target`); }
-  }, [connections.length, props.id, registerWarning, unregisterWarning]);
-
  return (
    <>
      <Toolbar nodeId={props.id} allowDelete={false}/>
@@ -63,7 +36,7 @@ export default function EndNode(props: NodeProps<EndNode>) {
        </div>
        <SingleConnectionHandle type="target" position={Position.Left} id="target" rules={[
          allowOnlyConnectionsFromType(["phase"])
-        ]} title="Connect to a phaseNode"/>
+        ]}/>
      </div>
    </>
  );
--- a/src/pages/VisProgPage/visualProgrammingUI/nodes/GoalNode.default.ts
+++ b/src/pages/VisProgPage/visualProgrammingUI/nodes/GoalNode.default.ts
@@ -1,6 +1,3 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
 import type { GoalNodeData } from "./GoalNode";

 /**
--- a/src/pages/VisProgPage/visualProgrammingUI/nodes/GoalNode.tsx
+++ b/src/pages/VisProgPage/visualProgrammingUI/nodes/GoalNode.tsx
@@ -1,13 +1,8 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
 import {
  type NodeProps,
  Position,
-  type Node
+  type Node,
 } from '@xyflow/react';
-import {useEffect} from "react";
-import type {EditorWarning} from "../components/EditorWarnings.tsx";
 import { Toolbar } from '../components/NodeComponents';
 import styles from '../../VisProg.module.css';
 import { TextField } from '../../../../components/TextField';
@@ -49,7 +44,7 @@ export type GoalNode = Node<GoalNodeData>
 * @returns React.JSX.Element
 */
 export default function GoalNode({id, data}: NodeProps<GoalNode>) {
-  const {updateNodeData, registerWarning, unregisterWarning} = useFlowStore();
+  const {updateNodeData} = useFlowStore();
  const _nodes = useFlowStore().nodes;

  const text_input_id = `goal_${id}_text_input`;
@@ -69,43 +64,6 @@ export default function GoalNode({id, data}: NodeProps<GoalNode>) {
    updateNodeData(id, {...data, can_fail: value});
  }

-  //undefined plan warning
-  useEffect(() => {
-    const noPlanWarning : EditorWarning = {
-      scope: {
-        id: id,
-        handleId: undefined
-      },
-      type: 'PLAN_IS_UNDEFINED',
-      severity: 'ERROR',
-      description: "This goalNode is missing a plan, please make sure to create a plan by using the create plan button"
-    };
-
-    if (!data.plan || data.plan.steps?.length === 0){
-      registerWarning(noPlanWarning);
-      return;
-    }
-    unregisterWarning(id, noPlanWarning.type);
-  },[data.plan, id, registerWarning, unregisterWarning])
-
-  //starts with number warning
-  useEffect(() => {
-      const name = data.name || "";
-      
-      const startsWithNumberWarning: EditorWarning = {
-        scope: { id: id },
-        type: 'ELEMENT_STARTS_WITH_NUMBER',
-        severity: 'ERROR',
-        description: "Norms are not allowed to start with a number."
-      };
-  
-      if (/^\d/.test(name)) {
-        registerWarning(startsWithNumberWarning);
-      } else {
-        unregisterWarning(id, 'ELEMENT_STARTS_WITH_NUMBER');
-      }
-    }, [data.name, id, registerWarning, unregisterWarning]);
-  
  return <>
    <Toolbar nodeId={id} allowDelete={true}/>
    <div className={`${styles.defaultNode} ${styles.nodeGoal} flex-col gap-sm`}>
@@ -160,11 +118,9 @@ export default function GoalNode({id, data}: NodeProps<GoalNode>) {
      </div>
      <MultiConnectionHandle type="source" position={Position.Right} id="GoalSource" rules={[
        allowOnlyConnectionsFromHandle([{nodeType:"phase",handleId:"data"}]),
-      ]} title="Connect to any number of phase and/or goalNode(-s)"/>
+      ]}/>

-      <MultiConnectionHandle type="target" position={Position.Bottom} id="GoalTarget" rules={[
-        allowOnlyConnectionsFromType(["goal"])]
-      } title="Connect to any number of goalNode(-s)"/>
+      <MultiConnectionHandle type="target" position={Position.Bottom} id="GoalTarget" rules={[allowOnlyConnectionsFromType(["goal"])]}/>


    </div>
--- a/src/pages/VisProgPage/visualProgrammingUI/nodes/InferredBeliefNode.default.ts
+++ b/src/pages/VisProgPage/visualProgrammingUI/nodes/InferredBeliefNode.default.ts
@@ -1,19 +0,0 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
-import type { InferredBeliefNodeData } from "./InferredBeliefNode.tsx";
-
-
-/**
- * Default data for this node
- */
-export const InferredBeliefNodeDefaults: InferredBeliefNodeData = {
-  label: "AND/OR",
-  droppable: true,
-  inferredBelief: {
-    left: undefined,
-    operator: true,
-    right: undefined
-  },
-  hasReduce: true,
-};
--- a/src/pages/VisProgPage/visualProgrammingUI/nodes/InferredBeliefNode.module.css
+++ b/src/pages/VisProgPage/visualProgrammingUI/nodes/InferredBeliefNode.module.css
@@ -1,85 +0,0 @@
-/*
-This program has been developed by students from the bachelor Computer Science at Utrecht
-University within the Software Project course.
-© Copyright Utrecht University (Department of Information and Computing Sciences)
-*/
-.operator-switch {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.5em;
-    cursor: pointer;
-    font-family: sans-serif;
-    /* Change this font-size to scale the whole component */
-    font-size: 12px;
-}
-
-/* hide the default checkbox */
-.operator-switch input {
-    display: none;
-}
-
-/* The Track */
-.switch-visual {
-    position: relative;
-    /* height is now 3x the font size */
-    height: 3em;
-    aspect-ratio: 1 / 2;
-    background-color: ButtonFace;
-    border-radius: 2em;
-    transition: 0.2s;
-}
-
-/* The Knob */
-.switch-visual::after {
-    content: "";
-    position: absolute;
-    top: 0.1em;
-    left: 0.1em;
-    width: 1em;
-    height: 1em;
-    background: Canvas;
-    border: 0.175em solid mediumpurple;
-    border-radius: 50%;
-    transition: transform 0.2s ease-in-out, border-color 0.2s;
-}
-
-/* Labels */
-.switch-labels {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    height: 3em; /* Matches the track height */
-    font-weight: 800;
-    color: Canvas;
-    line-height: 1.4;
-    padding: 0.2em 0;
-}
-
-.operator-switch input:checked + .switch-visual::after {
-    /* Moves the slider down */
-    transform: translateY(1.4em);
-}
-
-/*change the colours to highlight the selected operator*/
-.operator-switch input:checked ~ .switch-labels{
-    :first-child {
-        transition: ease-in-out color 0.2s;
-        color: ButtonFace;
-    }
-    :last-child {
-        transition: ease-in-out color 0.2s;
-        color: mediumpurple;
-    }
-}
-
-.operator-switch input:not(:checked) ~ .switch-labels{
-    :first-child {
-        transition: ease-in-out color 0.2s;
-        color: mediumpurple;
-    }
-    :last-child {
-        transition: ease-in-out color 0.2s;
-        color: ButtonFace;
-    }
-
-}
--- a/src/pages/VisProgPage/visualProgrammingUI/nodes/InferredBeliefNode.tsx
+++ b/src/pages/VisProgPage/visualProgrammingUI/nodes/InferredBeliefNode.tsx
@@ -1,203 +0,0 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
-import {getConnectedEdges, type Node, type NodeProps, Position, useNodeConnections} from '@xyflow/react';
-import {useEffect, useState} from "react";
-import styles from '../../VisProg.module.css';
-import type {EditorWarning} from "../components/EditorWarnings.tsx";
-import {Toolbar} from '../components/NodeComponents.tsx';
-import {MultiConnectionHandle, SingleConnectionHandle} from "../components/RuleBasedHandle.tsx";
-import {allowOnlyConnectionsFromType} from "../HandleRules.ts";
-import useFlowStore from "../VisProgStores.tsx";
-import {BeliefGlobalReduce, noBeliefCycles, noMatchingLeftRightBelief} from "./BeliefGlobals.ts";
-import switchStyles from './InferredBeliefNode.module.css';
-
-
-/**
- * The default data structure for an InferredBelief node
- */
-export type InferredBeliefNodeData = {
-  label: string;
-  droppable: boolean;
-  inferredBelief: InferredBelief;
-  hasReduce: boolean;
-};
-
-/**
- * stores a boolean to represent the operator
- * and a left and right BeliefNode (can be both an inferred and a basic belief)
- * in the form of their corresponding id's
- */
-export type InferredBelief = {
-  left: string | undefined,
-  operator: boolean,
-  right: string | undefined,
-}
-
-export type InferredBeliefNode = Node<InferredBeliefNodeData>;
-
-/**
- * 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 InferredBeliefConnectionTarget(_thisNode: Node, _sourceNodeId: string) {
-  const data = _thisNode.data as InferredBeliefNodeData;
-
-  if ((useFlowStore.getState().nodes.find((node) => node.id === _sourceNodeId
-    && ['basic_belief', 'inferred_belief'].includes(node.type!)))
-  ) {
-    const connectedEdges = getConnectedEdges([_thisNode], useFlowStore.getState().edges);
-    switch(connectedEdges.find(edge => edge.source === _sourceNodeId)?.targetHandle){
-      case 'beliefLeft': data.inferredBelief.left = _sourceNodeId; break;
-      case 'beliefRight': data.inferredBelief.right = _sourceNodeId; break;
-    }
-  }
-}
-
-/**
- * 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 InferredBeliefConnectionSource(_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 InferredBeliefDisconnectionTarget(_thisNode: Node, _sourceNodeId: string) {
-  const data = _thisNode.data as InferredBeliefNodeData;
-
-  if (_sourceNodeId === data.inferredBelief.left) data.inferredBelief.left = undefined;
-  if (_sourceNodeId === data.inferredBelief.right) data.inferredBelief.right = undefined;
-}
-
-/**
- * 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 InferredBeliefDisconnectionSource(_thisNode: Node, _targetNodeId: string) {
-  // no additional connection logic exists yet
-}
-
-export const InferredBeliefTooltip = `
-  Combines two beliefs into a single belief using logical inference, 
-  the node can be toggled between using "AND" and "OR" mode for inference`;
-/**
- * Defines how an InferredBelief node should be rendered
- * @param {NodeProps<InferredBeliefNode>} props - Node properties provided by React Flow, including `id` and `data`.
- * @returns The rendered InferredBeliefNode React element. (React.JSX.Element)
- */
-export default function InferredBeliefNode(props: NodeProps<InferredBeliefNode>) {
-  const data = props.data;
-  const { updateNodeData, registerWarning, unregisterWarning } = useFlowStore();
-  // start of as an AND operator, true: "AND", false: "OR"
-  const [enforceAllBeliefs, setEnforceAllBeliefs] = useState(true);
-
-  // used to toggle operator
-  function onToggle() {
-    const newOperator = !enforceAllBeliefs; // compute the new value
-    setEnforceAllBeliefs(newOperator);
-
-    updateNodeData(props.id, {
-      ...data,
-      inferredBelief: {
-        ...data.inferredBelief,
-        operator: enforceAllBeliefs,
-      }
-    });
-  }
-
-  const beliefConnections = useNodeConnections({
-    id: props.id,
-    handleType: "target",
-  })
-
-  useEffect(() => {
-    const noBeliefsWarning : EditorWarning = {
-      scope: {
-        id: props.id,
-        handleId: undefined
-      },
-      type: 'MISSING_INPUT',
-      severity: 'ERROR',
-      description: `This AND/OR node is missing one or more beliefs, 
-      please make sure to use both inputs of an AND/OR node`
-    };
-
-    if (beliefConnections.length < 2){
-      registerWarning(noBeliefsWarning);
-      return;
-    }
-    unregisterWarning(props.id, noBeliefsWarning.type);
-  },[beliefConnections.length, props.id, registerWarning, unregisterWarning])
-  return (
-    <>
-      <Toolbar nodeId={props.id} allowDelete={true}/>
-      <div className={`${styles.defaultNode} ${styles.nodeInferredBelief}`}>
-        {/* The checkbox used to toggle the operator between 'AND' and 'OR' */}
-        <label className={switchStyles.operatorSwitch}>
-          <input
-            type="checkbox"
-            checked={data.inferredBelief.operator}
-            onChange={onToggle}
-          />
-          <div className={switchStyles.switchVisual}></div>
-          <div className={switchStyles.switchLabels}>
-            <span title={"Belief is fulfilled if either of the supplied beliefs is true"}>OR</span>
-            <span title={"Belief is fulfilled if all of the supplied beliefs are true"}>AND</span>
-          </div>
-        </label>
-
-
-        {/* outgoing connections */}
-        <MultiConnectionHandle type="source" position={Position.Right} id="source" rules={[
-          allowOnlyConnectionsFromType(["norm", "trigger"]),
-          noBeliefCycles,
-          noMatchingLeftRightBelief
-        ]}/>
-
-        {/* incoming connections */}
-        <SingleConnectionHandle type="target" position={Position.Left} style={{top: '30%'}} id="beliefLeft" rules={[
-          allowOnlyConnectionsFromType(["basic_belief", "inferred_belief"]),
-          noBeliefCycles,
-          noMatchingLeftRightBelief
-        ]}/>
-        <SingleConnectionHandle type="target" position={Position.Left} style={{top: '70%'}} id="beliefRight" rules={[
-          allowOnlyConnectionsFromType(["basic_belief", "inferred_belief"]),
-          noBeliefCycles,
-          noMatchingLeftRightBelief
-        ]}/>
-      </div>
-    </>
-  );
-};
-
-/**
- * Reduces each BasicBelief, including its children down into its core data.
- * @param {Node} node - The BasicBelief node to reduce.
- * @param {Node[]} nodes - The list of all nodes in the current flow graph.
- * @returns A simplified object containing the node label and its list of BasicBeliefs.
- */
-export function InferredBeliefReduce(node: Node, nodes: Node[]) {
-  const data = node.data as InferredBeliefNodeData;
-  const leftBelief = nodes.find((node) => node.id === data.inferredBelief.left);
-  const rightBelief = nodes.find((node) => node.id === data.inferredBelief.right);
-
-  if (!leftBelief) { throw new Error("No Left belief found")}
-  if (!rightBelief) { throw new Error("No Right Belief found")}
-
-  const result: Record<string, unknown> = {
-    id: node.id,
-    left: BeliefGlobalReduce(leftBelief, nodes),
-    operator: data.inferredBelief.operator ? "AND" : "OR",
-    right: BeliefGlobalReduce(rightBelief, nodes),
-  };
-
-  return result
-}
--- a/src/pages/VisProgPage/visualProgrammingUI/nodes/NormNode.default.ts
+++ b/src/pages/VisProgPage/visualProgrammingUI/nodes/NormNode.default.ts
@@ -1,6 +1,3 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
 import type { NormNodeData } from "./NormNode";

 /**
--- a/src/pages/VisProgPage/visualProgrammingUI/nodes/NormNode.tsx
+++ b/src/pages/VisProgPage/visualProgrammingUI/nodes/NormNode.tsx
@@ -1,8 +1,3 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
-import { useEffect } from "react";
-import type { EditorWarning } from "../components/EditorWarnings.tsx";
 import {
  type NodeProps,
  Position,
@@ -14,7 +9,7 @@ import { TextField } from '../../../../components/TextField';
 import {MultiConnectionHandle, SingleConnectionHandle} from "../components/RuleBasedHandle.tsx";
 import {allowOnlyConnectionsFromHandle, allowOnlyConnectionsFromType} from "../HandleRules.ts";
 import useFlowStore from '../VisProgStores';
-import {BeliefGlobalReduce} from "./BeliefGlobals.ts";
+import { BasicBeliefReduce } from './BasicBeliefNode';

 /**
 * The default data dot a phase node
@@ -41,7 +36,7 @@ export type NormNode = Node<NormNodeData>
 */
 export default function NormNode(props: NodeProps<NormNode>) {
  const data = props.data;
-  const {updateNodeData, registerWarning, unregisterWarning} = useFlowStore();
+  const {updateNodeData} = useFlowStore();

  const text_input_id = `norm_${props.id}_text_input`;
  const checkbox_id = `goal_${props.id}_checkbox`;
@@ -49,44 +44,10 @@ export default function NormNode(props: NodeProps<NormNode>) {
  const setValue = (value: string) => {
    updateNodeData(props.id, {norm: value});
  }
-  //this function is commented out, because of lack of backend implementation.
-  //If you wish to set critical norms, in the UI side, you can uncomment and use this function.
-  
-  // const setCritical = (value: boolean) => {
-  //   updateNodeData(props.id, {...data, critical: value});
-  // }
-  useEffect(() => {
-    const normText = data.norm || "";
-    
-    const startsWithNumberWarning: EditorWarning = {
-      scope: { id: props.id },
-      type: 'ELEMENT_STARTS_WITH_NUMBER',
-      severity: 'ERROR',
-      description: "Norms are not allowed to start with a number."
-    };

-    if (/^\d/.test(normText)) {
-      registerWarning(startsWithNumberWarning);
-    } else {
-      unregisterWarning(props.id, 'ELEMENT_STARTS_WITH_NUMBER');
-    }
-  }, [data.norm, props.id, registerWarning, unregisterWarning]);
-  useEffect(() => {
-    const normText = data.norm || "";
-    
-    const startsWithNumberWarning: EditorWarning = {
-      scope: { id: props.id },
-      type: 'ELEMENT_STARTS_WITH_NUMBER',
-      severity: 'ERROR',
-      description: "Norms are not allowed to start with a number."
-    };
-
-    if (/^\d/.test(normText)) {
-      registerWarning(startsWithNumberWarning);
-    } else {
-      unregisterWarning(props.id, 'ELEMENT_STARTS_WITH_NUMBER');
-    }
-  }, [data.norm, props.id, registerWarning, unregisterWarning]);
+  const setCritical = (value: boolean) => {
+    updateNodeData(props.id, {...data, critical: value});
+  }

  return <>
    <Toolbar nodeId={props.id} allowDelete={true}/>
@@ -100,10 +61,7 @@ export default function NormNode(props: NodeProps<NormNode>) {
          placeholder={"Pepper should ..."}
        />
      </div>
-      {/*There is no backend implementation yet of how critical norms would
-      be treated differently than normal norms. The commented code below shows
-      how you could add the UI side, if you wish to implement */}
-      {/* <div className={"flex-row gap-md align-center"}>
+      <div className={"flex-row gap-md align-center"}>
        <label htmlFor={checkbox_id}>Critical:</label>
        <input
          id={checkbox_id}
@@ -111,7 +69,7 @@ export default function NormNode(props: NodeProps<NormNode>) {
          checked={data.critical || false}
          onChange={(e) => setCritical(e.target.checked)}
        />
-      </div> */}
+      </div>


      {data.condition && (<div className={"flex-row gap-md align-center"} data-testid="norm-condition-information">
@@ -121,10 +79,10 @@ export default function NormNode(props: NodeProps<NormNode>) {

      <MultiConnectionHandle type="source" position={Position.Right} id="norms" rules={[
        allowOnlyConnectionsFromHandle([{nodeType:"phase",handleId:"data"}])
-      ]} title="Connect to any number of phaseNode(-s)"/>
+      ]}/>
      <SingleConnectionHandle type="target" position={Position.Bottom} id="NormBeliefs" rules={[
-        allowOnlyConnectionsFromType(["basic_belief", "inferred_belief"])
-      ]} title="Connect to a beliefNode or a set of beliefs combined using the AND/OR node"/>
+        allowOnlyConnectionsFromType(["basic_belief"])
+      ]}/>
    </div>
  </>;
 };
@@ -147,10 +105,11 @@ export function NormReduce(node: Node, nodes: Node[]) {
  };

  if (data.condition) {
+    const reducer = BasicBeliefReduce; // TODO: also add inferred.
    const conditionNode = nodes.find((node) => node.id === data.condition);
    // In case something went wrong, and our condition doesn't actually exist;
    if (conditionNode == undefined) return result;
-    result["condition"] = BeliefGlobalReduce(conditionNode, nodes)
+    result["condition"] = reducer(conditionNode, nodes)
  }
  return result
 }
@@ -167,7 +126,7 @@ export const NormTooltip = `
 export function NormConnectionTarget(_thisNode: Node, _sourceNodeId: string) {
  const data = _thisNode.data as NormNodeData;
  // If we got a belief connected, this is the condition for the norm.
-  if ((useFlowStore.getState().nodes.find((node) => node.id === _sourceNodeId && ['basic_belief', 'inferred_belief'].includes(node.type!)))) {
+  if ((useFlowStore.getState().nodes.find((node) => node.id === _sourceNodeId && node.type === 'basic_belief' /* TODO: Add the option for an inferred belief */))) {
      data.condition = _sourceNodeId;
    }
 }
--- a/src/pages/VisProgPage/visualProgrammingUI/nodes/PhaseNode.default.ts
+++ b/src/pages/VisProgPage/visualProgrammingUI/nodes/PhaseNode.default.ts
@@ -1,6 +1,3 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
 import type { PhaseNodeData } from "./PhaseNode";

 /**
@@ -13,4 +10,5 @@ export const PhaseNodeDefaults: PhaseNodeData = {
  hasReduce: true,
  nextPhaseId: null,
  isFirstPhase: false,
+  plan: undefined,
 };
--- a/src/pages/VisProgPage/visualProgrammingUI/nodes/PhaseNode.tsx
+++ b/src/pages/VisProgPage/visualProgrammingUI/nodes/PhaseNode.tsx
@@ -1,13 +1,8 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
 import {
  type NodeProps,
  Position,
-  type Node, useNodeConnections
+  type Node
 } from '@xyflow/react';
-import {useEffect, useRef} from "react";
-import {type EditorWarning} from "../components/EditorWarnings.tsx";
 import { Toolbar } from '../components/NodeComponents';
 import styles from '../../VisProg.module.css';
 import {SingleConnectionHandle, MultiConnectionHandle} from "../components/RuleBasedHandle.tsx";
@@ -15,6 +10,11 @@ import {allowOnlyConnectionsFromType, noSelfConnections} from "../HandleRules.ts
 import { NodeReduces, NodesInPhase, NodeTypes} from '../NodeRegistry';
 import useFlowStore from '../VisProgStores';
 import { TextField } from '../../../../components/TextField';
+import PlanEditorDialog from '../components/PlanEditor.tsx';
+import type { Plan } from '../components/Plan.tsx';
+import { insertGoalInPlan } from '../components/PlanEditingFunctions.tsx';
+import { defaultPlan } from '../components/Plan.default.ts';
+import type { GoalNode } from './GoalNode.tsx';

 /**
 * The default data dot a phase node
@@ -31,6 +31,7 @@ export type PhaseNodeData = {
  hasReduce: boolean;
  nextPhaseId: string | "end" | null;
  isFirstPhase: boolean;
+  plan?: Plan;
 };

 export type PhaseNode = Node<PhaseNodeData>
@@ -42,107 +43,10 @@ export type PhaseNode = Node<PhaseNodeData>
 */
 export default function PhaseNode(props: NodeProps<PhaseNode>) {
  const data = props.data;
-  const {updateNodeData, registerWarning, unregisterWarning} = useFlowStore();
+  const {updateNodeData} = useFlowStore();
  const updateLabel = (value: string) => updateNodeData(props.id, {...data, label: value});
  const label_input_id = `phase_${props.id}_label_input`;

-  const connections = useNodeConnections({
-    id: props.id,
-    handleType: "target",
-    handleId: 'data'
-  })
-  
-  const phaseOutCons = useNodeConnections({
-    id: props.id,
-    handleType: "source",
-    handleId: 'source',
-  })
-
-  const phaseInCons = useNodeConnections({
-    id: props.id,
-    handleType: "target",
-    handleId: 'target',
-  })
-
-
-
-  useEffect(() => {
-    const noConnectionWarning : EditorWarning = {
-      scope: {
-        id: props.id,
-        handleId: 'data'
-      },
-      type: 'MISSING_INPUT',
-      severity: "WARNING",
-      description: "the phaseNode has no incoming goals, norms, and/or triggers"
-    }
-
-    if (connections.length === 0) { registerWarning(noConnectionWarning); return; }
-    unregisterWarning(props.id, `${noConnectionWarning.type}:data`);
-  }, [connections.length, props.id, registerWarning, unregisterWarning]);
-
-  useEffect(() => {
-    const notConnectedInfo : EditorWarning = {
-      scope: {
-        id: props.id,
-        handleId: undefined,
-      },
-      type: 'NOT_CONNECTED_TO_PROGRAM',
-      severity: "INFO",
-      description: "The PhaseNode is not connected to other nodes"
-    };
-    const noIncomingPhaseWarning : EditorWarning = {
-      scope: {
-        id: props.id,
-        handleId: 'target'
-      },
-      type: 'MISSING_INPUT',
-      severity: "WARNING",
-      description: "the phaseNode has no incoming connection from a phase or the startNode"
-    }
-    const noOutgoingPhaseWarning : EditorWarning = {
-      scope: {
-        id: props.id,
-        handleId: 'source'
-      },
-      type: 'MISSING_OUTPUT',
-      severity: "WARNING",
-      description: "the phaseNode has no outgoing connection to a phase or the endNode"
-    }
-
-    // register relevant warning and unregister others
-    if (phaseInCons.length === 0 && phaseOutCons.length === 0) {
-      registerWarning(notConnectedInfo);
-      unregisterWarning(props.id, `${noOutgoingPhaseWarning.type}:${noOutgoingPhaseWarning.scope.handleId}`);
-      unregisterWarning(props.id, `${noIncomingPhaseWarning.type}:${noIncomingPhaseWarning.scope.handleId}`);
-      return;
-    }
-    if (phaseOutCons.length === 0) {
-      registerWarning(noOutgoingPhaseWarning);
-      unregisterWarning(props.id, `${noIncomingPhaseWarning.type}:${noIncomingPhaseWarning.scope.handleId}`);
-      unregisterWarning(notConnectedInfo.scope.id, notConnectedInfo.type);
-      return;
-    }
-    if (phaseInCons.length === 0) {
-      registerWarning(noIncomingPhaseWarning);
-      unregisterWarning(props.id, `${noOutgoingPhaseWarning.type}:${noOutgoingPhaseWarning.scope.handleId}`);
-      unregisterWarning(notConnectedInfo.scope.id, notConnectedInfo.type);
-      return;
-    }
-    // unregister all warnings if none should be present
-    unregisterWarning(notConnectedInfo.scope.id, notConnectedInfo.type);
-    unregisterWarning(props.id, `${noOutgoingPhaseWarning.type}:${noOutgoingPhaseWarning.scope.handleId}`);
-    unregisterWarning(props.id, `${noIncomingPhaseWarning.type}:${noIncomingPhaseWarning.scope.handleId}`);
-  }, [phaseInCons.length, phaseOutCons.length, props.id, registerWarning, unregisterWarning]);
-  const ref = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    if (ref.current) {
-      const { width, height } = ref.current.getBoundingClientRect();
-
-      console.log('Node width:', width, 'height:', height);
-    }
-  }, []);
  return (
    <>
      <Toolbar nodeId={props.id} allowDelete={true}/>
@@ -156,17 +60,35 @@ export default function PhaseNode(props: NodeProps<PhaseNode>) {
            placeholder={"Phase ..."}
          />
        </div>
+
+
+        {(data.plan && data.plan.steps.length > 0) && (<div>
+          <PlanEditorDialog
+                    plan={data.plan}
+                    onSave={(plan) => {
+                      updateNodeData(props.id, {
+                        ...data,
+                        plan,
+                      });
+                    }} 
+                    description={props.data.label}
+                    onlyEditPhasing={true}
+          />
+        </div>)}
+
+
+
        <SingleConnectionHandle type="target" position={Position.Left} id="target" rules={[
          noSelfConnections,
          allowOnlyConnectionsFromType(["phase", "start"]),
-        ]} title="Connect to a phase or the startNode"/>
+        ]}/>
        <MultiConnectionHandle type="target" position={Position.Bottom} id="data" rules={[
          allowOnlyConnectionsFromType(["norm", "goal", "trigger"])
-        ]} title="Connect to any number of norm, goal, and TriggerNode(-s)"/>
+        ]}/>
        <SingleConnectionHandle type="source" position={Position.Right} id="source" rules={[
          noSelfConnections,
          allowOnlyConnectionsFromType(["phase", "end"]),
-        ]} title="Connect to a phase or the endNode"/>
+        ]}/>
      </div>
    </>
  );
@@ -231,9 +153,9 @@ export const PhaseTooltip = `
 */
 export function PhaseConnectionTarget(_thisNode: Node, _sourceNodeId: string) {
  const data = _thisNode.data as PhaseNodeData
-
  const nodes = useFlowStore.getState().nodes;
  const sourceNode = nodes.find((node) => node.id === _sourceNodeId)!
+
  switch (sourceNode.type) {
    case "phase": break;
    case "start": data.isFirstPhase = true; break;
@@ -241,6 +163,18 @@ export function PhaseConnectionTarget(_thisNode: Node, _sourceNodeId: string) {
    // endNodes cannot be the source of an outgoing connection
    // so we don't need to cover them with a special case
    // before handling the default behavior
+    case "goal": {
+        // First, let's see if we have a plan currently. If not, let's create a default plan with this goal inside.:)
+        if (!data.plan) {
+          data.plan = insertGoalInPlan({...structuredClone(defaultPlan), id: crypto.randomUUID()} as Plan, sourceNode as GoalNode)
+        }
+        
+        // Else, lets just insert this goal into our current plan.
+        else {
+          data.plan = insertGoalInPlan(structuredClone(data.plan), sourceNode as GoalNode)
+        }
+        break;
+    }
    default: data.children.push(_sourceNodeId); break;
  }
 }
--- a/src/pages/VisProgPage/visualProgrammingUI/nodes/StartNode.default.ts
+++ b/src/pages/VisProgPage/visualProgrammingUI/nodes/StartNode.default.ts
@@ -1,6 +1,3 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
 import type { StartNodeData } from "./StartNode";

 /**
--- a/src/pages/VisProgPage/visualProgrammingUI/nodes/StartNode.tsx
+++ b/src/pages/VisProgPage/visualProgrammingUI/nodes/StartNode.tsx
@@ -1,18 +1,12 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
 import {
  type NodeProps,
  Position,
-  type Node, useNodeConnections
+  type Node,
 } from '@xyflow/react';
-import {useEffect} from "react";
 import { Toolbar } from '../components/NodeComponents';
 import styles from '../../VisProg.module.css';
 import {SingleConnectionHandle} from "../components/RuleBasedHandle.tsx";
-import {type EditorWarning} from "../components/EditorWarnings.tsx";
 import {allowOnlyConnectionsFromHandle} from "../HandleRules.ts";
-import useFlowStore from "../VisProgStores.tsx";


 export type StartNodeData = {
@@ -31,27 +25,6 @@ export type StartNode = Node<StartNodeData>
 * @returns React.JSX.Element
 */
 export default function StartNode(props: NodeProps<StartNode>) {
-  const {registerWarning, unregisterWarning} = useFlowStore.getState();
-  const connections = useNodeConnections({
-    id: props.id,
-    handleId: 'source'
-  })
-
-  useEffect(() => {
-    const noConnectionWarning : EditorWarning = {
-      scope: {
-        id: props.id,
-        handleId: 'source'
-      },
-      type: 'MISSING_OUTPUT',
-      severity: "ERROR",
-      description: "the startNode does not have an outgoing connection to a phaseNode"
-    }
-
-    if (connections.length === 0) { registerWarning(noConnectionWarning); }
-    else { unregisterWarning(props.id, `${noConnectionWarning.type}:source`); }
-  }, [connections.length, props.id, registerWarning, unregisterWarning]);
-
  return (
    <>
      <Toolbar nodeId={props.id} allowDelete={false}/>
@@ -61,7 +34,7 @@ export default function StartNode(props: NodeProps<StartNode>) {
        </div>
        <SingleConnectionHandle type="source" position={Position.Right} id="source" rules={[
          allowOnlyConnectionsFromHandle([{nodeType:"phase",handleId:"target"}])
-        ]} title="Connect to a phaseNode"/>
+        ]}/>
      </div>
    </>
  );
--- a/src/pages/VisProgPage/visualProgrammingUI/nodes/TriggerNode.default.ts
+++ b/src/pages/VisProgPage/visualProgrammingUI/nodes/TriggerNode.default.ts
@@ -1,6 +1,3 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
 import type { TriggerNodeData } from "./TriggerNode";

 /**
--- a/src/pages/VisProgPage/visualProgrammingUI/nodes/TriggerNode.tsx
+++ b/src/pages/VisProgPage/visualProgrammingUI/nodes/TriggerNode.tsx
@@ -1,21 +1,16 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
 import {
  type NodeProps,
  Position,
-  type Node, useNodeConnections
+  type Node,
 } from '@xyflow/react';
-import {useEffect} from "react";
-import type {EditorWarning} from "../components/EditorWarnings.tsx";
 import { Toolbar } from '../components/NodeComponents';
 import styles from '../../VisProg.module.css';
 import {MultiConnectionHandle, SingleConnectionHandle} from "../components/RuleBasedHandle.tsx";
 import {allowOnlyConnectionsFromHandle, allowOnlyConnectionsFromType} from "../HandleRules.ts";
 import useFlowStore from '../VisProgStores';
 import {PlanReduce, type Plan } from '../components/Plan';
-import PlanEditorDialog from '../components/PlanEditor';
-import {BeliefGlobalReduce} from "./BeliefGlobals.ts";
+import PlanEditorDialog from '../components/PlanEditor';  
+import { BasicBeliefReduce } from './BasicBeliefNode';
 import type { GoalNode } from './GoalNode.tsx';
 import { defaultPlan } from '../components/Plan.default.ts';
 import { deleteGoalInPlanByID, insertGoalInPlan } from '../components/PlanEditingFunctions.tsx';
@@ -50,94 +45,14 @@ export type TriggerNode = Node<TriggerNodeData>
 */
 export default function TriggerNode(props: NodeProps<TriggerNode>) {
  const data = props.data;
-  const {updateNodeData, registerWarning, unregisterWarning} = useFlowStore();
+  const {updateNodeData} = useFlowStore();

  const setName= (value: string) => {
    updateNodeData(props.id, {...data, name: value})
  }
-
-  const beliefInput = useNodeConnections({
-    id: props.id,
-    handleType: "target",
-    handleId: "TriggerBeliefs"
-  })
-
-  const outputCons = useNodeConnections({
-    id: props.id,
-    handleType: "source",
-    handleId: "TriggerSource"
-  })
-
-  useEffect(() => {
-    const noPhaseConnectionWarning : EditorWarning = {
-      scope: {
-        id: props.id,
-        handleId: 'TriggerSource'
-      },
-      type: 'MISSING_OUTPUT',
-      severity: 'INFO',
-      description: "This triggerNode is missing a condition/belief, please make sure to connect a belief node to "
-    };
-
-    if (outputCons.length === 0){
-      registerWarning(noPhaseConnectionWarning);
-      return;
-    }
-    unregisterWarning(props.id, `${noPhaseConnectionWarning.type}:${noPhaseConnectionWarning.scope.handleId}`);
-  },[outputCons.length, props.id, registerWarning, unregisterWarning])
-
-  useEffect(() => {
-    const noBeliefWarning : EditorWarning = {
-      scope: {
-        id: props.id,
-        handleId: 'TriggerBeliefs'
-      },
-      type: 'MISSING_INPUT',
-      severity: 'ERROR',
-      description: "This triggerNode is missing a condition/belief, please make sure to connect a belief node to "
-    };
-
-    if (beliefInput.length === 0 && outputCons.length !== 0){
-      registerWarning(noBeliefWarning);
-      return;
-    }
-    unregisterWarning(props.id, `${noBeliefWarning.type}:${noBeliefWarning.scope.handleId}`);
-  },[beliefInput.length, outputCons.length, props.id, registerWarning, unregisterWarning])
-
-  useEffect(() => {
-    const noPlanWarning : EditorWarning = {
-      scope: {
-        id: props.id,
-        handleId: undefined
-      },
-      type: 'PLAN_IS_UNDEFINED',
-      severity: 'ERROR',
-      description: "This triggerNode is missing a plan, please make sure to create a plan by using the create plan button"
-    };
-
-    if ((!data.plan || data.plan.steps?.length === 0) && outputCons.length !== 0){
-      registerWarning(noPlanWarning);
-      return;
-    }
-    unregisterWarning(props.id, noPlanWarning.type);
-  },[data.plan, outputCons.length, props.id, registerWarning, unregisterWarning])
-
-  useEffect(() => {
-  const name = data.name || "";
  
-  if (/^\d/.test(name)) {
-    registerWarning({
-      scope: { id: props.id },
-      type: 'ELEMENT_STARTS_WITH_NUMBER',
-      severity: 'ERROR',
-      description: "Trigger names are not allowed to start with a number."
-    });
-  } else {
-    unregisterWarning(props.id, 'ELEMENT_STARTS_WITH_NUMBER');
-  }
-}, [data.name, props.id, registerWarning, unregisterWarning]);
  return <>
-
+  
    <Toolbar nodeId={props.id} allowDelete={true}/>
    <div className={`${styles.defaultNode} ${styles.nodeTrigger} flex-col gap-sm`}>
      <TextField
@@ -150,16 +65,15 @@ export default function TriggerNode(props: NodeProps<TriggerNode>) {
      <div className={"flex-row gap-md"}>Plan{data.plan ? (": " + data.plan.name) : ""} is currently {data.plan ? "" : "not"} set. {data.plan ? "🟢" : "🔴"}</div>
      <MultiConnectionHandle type="source" position={Position.Right} id="TriggerSource" rules={[
        allowOnlyConnectionsFromHandle([{nodeType:"phase",handleId:"data"}]),
-      ]} title="Connect to any number of phaseNodes"/>
+      ]}/>
      <SingleConnectionHandle
        type="target"
        position={Position.Bottom}
        id="TriggerBeliefs"
-        style={{ left: '40%' }}
+        style={{ left: '40%' }} 
        rules={[
-          allowOnlyConnectionsFromType(['basic_belief','inferred_belief']),
+          allowOnlyConnectionsFromType(['basic_belief']),
        ]}
-        title="Connect to a beliefNode or a set of beliefs combined using the AND/OR node"
      />
      
      <MultiConnectionHandle
@@ -170,7 +84,6 @@ export default function TriggerNode(props: NodeProps<TriggerNode>) {
        rules={[
          allowOnlyConnectionsFromType(['goal']),
        ]}
-        title="Connect to any number of goalNodes"
      />

      <PlanEditorDialog
@@ -189,13 +102,13 @@ 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[]) {
  const data = node.data as TriggerNodeData;
  const conditionNode = data.condition ? nodes.find((n)=>n.id===data.condition) : undefined
-  const conditionData = conditionNode ? BeliefGlobalReduce(conditionNode, nodes) : ""
+  const conditionData = conditionNode ? BasicBeliefReduce(conditionNode, nodes) : ""
  return {
    id: node.id,
    name: node.data.name,
@@ -223,7 +136,7 @@ export function TriggerConnectionTarget(_thisNode: Node, _sourceNodeId: string)
  const otherNode = nodes.find((x) => x.id === _sourceNodeId)
  if (!otherNode) return;

-  if (['basic_belief', 'inferred_belief'].includes(otherNode.type!)) {
+  if (otherNode.type === 'basic_belief' /* TODO: Add the option for an inferred belief */) {
      data.condition = _sourceNodeId;
  }

@@ -259,7 +172,7 @@ export function TriggerDisconnectionTarget(_thisNode: Node, _sourceNodeId: strin
  const data = _thisNode.data as TriggerNodeData;
    // remove if the target of disconnection was our condition
    if (_sourceNodeId == data.condition) data.condition = undefined
-
+    
  data.plan = deleteGoalInPlanByID(structuredClone(data.plan) as Plan, _sourceNodeId)
 }

--- a/src/utils/SaveLoad.ts
+++ b/src/utils/SaveLoad.ts
@@ -1,6 +1,3 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
 import {type Edge, type Node } from "@xyflow/react";

 export type SavedProject = {
--- a/src/utils/capitalize.ts
+++ b/src/utils/capitalize.ts
@@ -1,3 +0,0 @@
-export default function (s: string) {
-    return s.charAt(0).toUpperCase() + s.slice(1);
-}
--- a/src/utils/cellStore.ts
+++ b/src/utils/cellStore.ts
@@ -1,6 +1,3 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
 import {useSyncExternalStore} from "react";

 type Unsub = () => void;
--- a/src/utils/delayedResolve.ts
+++ b/src/utils/delayedResolve.ts
@@ -1,7 +0,0 @@
-export default async function <T>(promise: Promise<T>, minDelayMs: number): Promise<T> {
-  const [result] = await Promise.all([
-    promise,
-    new Promise(resolve => setTimeout(resolve, minDelayMs))
-  ]);
-  return result;
-}
--- a/src/utils/duplicateIndices.ts
+++ b/src/utils/duplicateIndices.ts
@@ -1,6 +1,3 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
 /**
 * Find the indices of all elements that occur more than once.
 *
--- a/src/utils/formatDuration.ts
+++ b/src/utils/formatDuration.ts
@@ -1,6 +1,3 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
 /**
 * Format a time duration like `HH:MM:SS.mmm`.
 *
--- a/src/utils/orderPhaseNodes.ts
+++ b/src/utils/orderPhaseNodes.ts
@@ -1,6 +1,3 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
 import type {PhaseNode} from "../pages/VisProgPage/visualProgrammingUI/nodes/PhaseNode.tsx";

 /**
--- a/src/utils/priorityFiltering.ts
+++ b/src/utils/priorityFiltering.ts
@@ -1,13 +1,10 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
 export type PriorityFilterPredicate<T> = {
  priority: number;
  predicate: (element: T) => boolean | null; // The predicate and its priority are ignored if it returns null.
 }

 /**
- * Applies a list of priority predicates to an element. For all predicates that don't return null, if the ones with the highest level return true, then this function returns true. Or conversely, if the one with the highest level returns false, then this function returns false.
+ * Applies a list of priority predicates to an element. For all predicates that don't return null, if the ones with the highest level return true, then this function returns true.
 * @param element The element to apply the predicates to.
 * @param predicates The list of predicates to apply.
 */
--- a/src/utils/programStore.ts
+++ b/src/utils/programStore.ts
@@ -1,13 +1,8 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
 import {create} from "zustand";

 // the type of a reduced program
 export type ReducedProgram = { phases: Record<string, unknown>[] };

-export type GoalWithDepth = Record<string, unknown> & { level: number };
-
 /**
 * the type definition of the programStore
 */
@@ -20,10 +15,8 @@ export type ProgramState = {
  // Utility functions:
  // to avoid having to manually go through the entire state for every instance where data is required
  getPhaseIds: () => string[];
-  getPhaseNames: () => string[];
  getNormsInPhase: (currentPhaseId: string) => Record<string, unknown>[];
  getGoalsInPhase: (currentPhaseId: string) => Record<string, unknown>[];
-  getGoalsWithDepth: (currentPhaseId: string) => GoalWithDepth[];
  getTriggersInPhase: (currentPhaseId: string) => Record<string, unknown>[];
  // if more specific utility functions are needed they can be added here:
 }
@@ -50,10 +43,6 @@ const useProgramStore = create<ProgramState>((set, get) => ({
   * gets the ids of all phases in the program
   */
  getPhaseIds: () => get().currentProgram.phases.map(entry => entry["id"] as string),
-   /**
-   * gets the names of all phases in the program
-   */
-  getPhaseNames: () => get().currentProgram.phases.map((entry) => (entry["name"] as string)),
  /**
   * gets the norms for the provided phase
   */
@@ -76,50 +65,6 @@ const useProgramStore = create<ProgramState>((set, get) => ({
    }
    throw new Error(`phase with id:"${currentPhaseId}" not found`)
  },
-
-  getGoalsWithDepth: (currentPhaseId: string) => {
-    const program = get().currentProgram;
-    const phase = program.phases.find(val => val["id"] === currentPhaseId);
-    
-    if (!phase) {
-      throw new Error(`phase with id:"${currentPhaseId}" not found`);
-    }
-
-    const rootGoals = phase["goals"] as Record<string, unknown>[];
-    const flatList: GoalWithDepth[] = [];
-
-    const isGoal = (item: Record<string, unknown>) => {
-      return item["plan"] !== undefined;
-    };
-
-    // Recursive helper function
-    const traverse = (goals: Record<string, unknown>[], depth: number) => {
-      goals.forEach((goal) => {
-        // 1. Add the current goal to the list
-        flatList.push({ ...goal, level: depth });
-
-        // 2. Check for children
-        const plan = goal["plan"] as Record<string, unknown> | undefined;
-        
-        if (plan && Array.isArray(plan["steps"])) {
-           const steps = plan["steps"] as Record<string, unknown>[];
-           
-           // 3. FILTER: Only recurse on steps that are actually goals
-           // If we just passed 'steps', we might accidentally add Actions/Speeches to the goal list
-           const childGoals = steps.filter(isGoal);
-
-           if (childGoals.length > 0) {
-             traverse(childGoals, depth + 1);
-           }
-        }
-      });
-    };
-
-    // Start traversal
-    traverse(rootGoals, 0);
-
-    return flatList;
-  },
  /**
   * gets the triggers for the provided phase
   */
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@@ -1,11 +0,0 @@
-/// <reference types="vite/client" />
-
-interface ImportMetaEnv {
-  readonly VITE_API_BASE_URL?: string;
-}
-
-interface ImportMeta {
-  readonly env: ImportMetaEnv;
-}
-
-declare const __VITE_API_BASE_URL__: string | undefined;
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Björn Otgaar	47e7207c32	feat: initial commit - adding a plan to phases and different ui for phase order editing ref: N25B-451	2026-01-14 19:44:53 +01:00
Storm	5e245a00da	chore: remove useState import	2026-01-13 12:39:48 +01:00
Storm	1e951968dd	Merge remote-tracking branch 'origin/demo' into feat/monitoringpage	2026-01-13 12:39:25 +01:00
Björn Otgaar	108fdeeedc	chore: gptd data typing and tests fixing	2026-01-13 12:03:49 +01:00
Björn Otgaar	79d889c10e	chore: revert components page, fixing the test	2026-01-13 11:43:24 +01:00
Björn Otgaar	bac94d5f8c	chore: remove unused imports	2026-01-13 11:41:58 +01:00
Pim Hutting	f95b1148d9	chore: made last page access more sensible still didnt work with CB ref: N25B-400	2026-01-13 00:53:41 +01:00
Pim Hutting	46d900305a	chore: made activatable elements clickable ref: N25B-400	2026-01-12 19:41:05 +01:00
Pim Hutting	c4a4c52ecc	Merge remote-tracking branch 'origin/feat/recursive-goal-making' into feat/monitoringpage	2026-01-12 17:16:52 +01:00
Pim Hutting	96242fa6b0	chore: fix connection error was connected to wrong endpoint after merge ref: N25B-400	2026-01-12 15:17:38 +01:00
Pim Hutting	c2486f5f43	Merge branch 'feat/monitoringpage-pim' into feat/monitoringpage	2026-01-12 13:04:15 +01:00
Pim Hutting	f0c67c00dc	fix: update goals and trigger/norms.. correctly feat: N25B-400	2026-01-12 12:49:00 +01:00
Björn Otgaar	a0a4687aeb	chore: add support for dark mode in monitoring page	2026-01-10 12:14:37 +01:00
Pim Hutting	71443c7fb6	feat: added scroll bar to simple program note that it will take quite a lot of items for the simple prog to be filled up, only when it's overflown the scroll bar will appear ref: N25B-400	2026-01-08 15:19:38 +01:00
Pim Hutting	39f013c47f	feat: goals now update in UI ref: N25B-400	2026-01-08 14:51:02 +01:00
Björn Otgaar	6e1eb25bbc	feat: add robot connection ref: N25B-400	2026-01-08 14:01:42 +01:00
Pim Hutting	f2c01f67ac	feat: small implementation change ref: N25B-400	2026-01-08 11:26:31 +01:00
Pim Hutting	14cfc2bf15	fix: removed unused imports ref: N25B-400	2026-01-08 11:01:19 +01:00
Pim Hutting	a2b4847ca4	Merge remote-tracking branch 'origin/demo' into feat/monitoringpage-pim	2026-01-08 09:54:48 +01:00
Björn Otgaar	a1e242e391	feat: added the functionality for the play, pause, next phase, reset phase, reset experiment buttons ref: N25B-400	2026-01-07 18:31:56 +01:00
Pim Hutting	4356f201ab	feat: added endpoint ref:N25B-400	2026-01-07 17:39:20 +01:00
Björn Otgaar	c9df87929b	feat: add the buttons for next, reset phase and reset experiment ref: N25B-400	2026-01-07 15:09:44 +01:00
Björn Otgaar	57ebe724db	Merge remote-tracking branch 'origin/feat/monitoringpage-pim' into feat/monitoringpage-bjorn	2026-01-07 11:55:20 +01:00
Björn Otgaar	794e638081	feat: start with functionality ref: N25B-400	2026-01-07 11:54:29 +01:00
Pim Hutting	12ef2ef86e	feat: added forced speech/gestures +overrides ref: N25B-400	2026-01-06 15:15:36 +01:00
Tuurminator69	0fefefe7f0	feat: removed the temporary access to MP from Home ref: N25B-398	2026-01-05 17:41:36 +01:00
Tuurminator69	9601f56ea9	feat: merged most of simpleprogram into MP ref: N25B-398	2026-01-05 17:35:32 +01:00
Tuurminator69	873b1cfb0b	Merge branch 'feat/simple-program-page' of git.science.uu.nl:ics/sp/2025/n25b/pepperplus-ui into feat/monitoringpage	2026-01-05 16:41:51 +01:00
Tuurminator69	4bd67debf3	feat: added and changed the monitoringpage a lot ref: N25B-398	2026-01-04 20:07:44 +01:00
Tuurminator69	e53e1a3958	feat: can go to a skeleton monitoringpage ref: N25B-398	2026-01-03 21:59:51 +01:00
Tuurminator69	7a89b0aedd	feat: added a skeleton for the monitoringpage. ref: N25B-398	2026-01-03 21:07:32 +01:00
JobvAlewijk	7b05c7344c	feat: added tests ref: N25B-399	2026-01-02 21:06:41 +01:00
JobvAlewijk	d80ced547c	feat: SimpleProgram no longer relies on types ref: N25B-399	2026-01-02 20:55:24 +01:00
JobvAlewijk	cd1aa84f89	feat: using programstore ref: N25B-399	2026-01-02 20:43:20 +01:00
JobvAlewijk	469a6c7a69	build: merge ref: N25B-402	2026-01-02 19:56:01 +01:00
JobvAlewijk	b0a5e4770c	feat: improved visuals and structure ref: N25B-402	2025-12-30 20:56:05 +01:00
JobvAlewijk	f0fe520ea0	feat: first version of simple program shown shows up if you run the program ref: N25B-405	2025-12-30 18:10:51 +01:00
JGerla	b10dbae488	test: added tests for the ProgramStore also added documentation ref: N25B-428	2025-12-20 22:58:22 +01:00