Merge branch 'dev' into chore/clean-visprog-code

chore: replace plan editor functionality into own folder with own files.
Merge branch 'chore/editing-css-strings' into 'dev'
2026-01-28 12:27:27 +01:00 · 2026-01-28 12:26:57 +01:00 · 2026-01-28 11:19:16 +00:00 · 2026-01-28 12:07:33 +01:00 · 2026-01-28 11:36:21 +01:00 · 2026-01-28 11:35:34 +01:00
61 changed files with 1210 additions and 786 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
@@ -31,6 +31,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",
@@ -5543,6 +5544,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",
--- a/package.json
+++ b/package.json
@@ -8,7 +8,8 @@
    "build": "tsc -b && vite build",
    "lint": "eslint src test",
    "preview": "vite preview",
-    "test": "jest"
+    "test": "jest",
+    "prepare": "husky"
  },
  "dependencies": {
    "@neodrag/react": "^2.3.1",
@@ -34,6 +35,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,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)
-*/
+*/}
 .logopepper {
  height: 8em;
  padding: 1.5em;
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -4,7 +4,8 @@
 import { Routes, Route, Link } from 'react-router'
 import './App.css'
 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";
@@ -25,7 +26,8 @@ function App(){
          <Routes>
            <Route path="/" element={<Home />} />
            <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/Icons/Next.tsx
+++ b/src/components/Icons/Next.tsx
@@ -1,3 +1,6 @@
+// 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 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"/>
--- a/src/components/Icons/Pause.tsx
+++ b/src/components/Icons/Pause.tsx
@@ -1,3 +1,6 @@
+// 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 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"/>
--- a/src/components/Icons/Play.tsx
+++ b/src/components/Icons/Play.tsx
@@ -1,3 +1,6 @@
+// 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 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"/>
--- a/src/components/Icons/Redo.tsx
+++ b/src/components/Icons/Redo.tsx
@@ -1,3 +1,6 @@
+// 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 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"/>
--- a/src/components/Icons/Replay.tsx
+++ b/src/components/Icons/Replay.tsx
@@ -1,3 +1,6 @@
+// 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 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"/>
--- a/src/components/Logging/Definitions.ts
+++ b/src/components/Logging/Definitions.ts
@@ -1,3 +1,6 @@
+// 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 {Cell} from "../../utils/cellStore.ts";
 import type {LogRecord} from "./useLogs.ts";

--- a/src/components/Logging/useLogs.ts
+++ b/src/components/Logging/useLogs.ts
@@ -5,7 +5,6 @@ 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';

@@ -211,7 +210,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/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,14 @@
+{/*
+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 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;
--- a/src/pages/ConnectedRobots/ConnectedRobots.tsx
+++ b/src/pages/ConnectedRobots/ConnectedRobots.tsx
@@ -0,0 +1,63 @@
+// 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'
+
+/**
+ * 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
@@ -27,51 +27,3 @@ University within the Software Project course.
  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
@@ -16,20 +16,15 @@ 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={"/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/MonitoringPage.module.css
+++ b/src/pages/MonitoringPage/MonitoringPage.module.css
@@ -98,11 +98,6 @@ University within the Software Project course.
  color: white;
 }

-.stop {
-  background-color: red;
-  color: white;
-}
-
 .restartExperiment{
  background-color: red;
  color: white;
--- a/src/pages/MonitoringPage/MonitoringPage.tsx
+++ b/src/pages/MonitoringPage/MonitoringPage.tsx
@@ -8,7 +8,6 @@ import styles from './MonitoringPage.module.css';
 import useProgramStore from "../../utils/programStore";
 import { 
  nextPhase, 
-  stopExperiment,
  useExperimentLogger, 
  useStatusLogger, 
  pauseExperiment, 
@@ -145,7 +144,7 @@ function useExperimentLogic() {
    }
  }, [setProgramState]);

-  const handleControlAction = async (action: "pause" | "play" | "nextPhase" | "stop") => {
+  const handleControlAction = async (action: "pause" | "play" | "nextPhase") => {
    try {
      setLoading(true);
      switch (action) {
@@ -160,9 +159,6 @@ function useExperimentLogic() {
        case "nextPhase":
          await nextPhase();
          break;
-        case "stop":
-          await stopExperiment();
-          break;
      }
    } catch (err) {
      console.error(err);
@@ -230,7 +226,7 @@ function ControlPanel({
 }: { 
  loading: boolean, 
  isPlaying: boolean, 
-  onAction: (a: "pause" | "play" | "nextPhase" | "stop") => void,
+  onAction: (a: "pause" | "play" | "nextPhase") => void,
  onReset: () => void 
 }) {
  return (
@@ -260,12 +256,6 @@ function ControlPanel({
          onClick={onReset} 
          disabled={loading}
        >⟲</button>
-
-        <button
-          className={styles.stop}
-          onClick={() => onAction("stop")}
-          disabled={loading}
-        >⏹</button>
      </div>
    </div>
  );
--- a/src/pages/MonitoringPage/MonitoringPageAPI.ts
+++ b/src/pages/MonitoringPage/MonitoringPageAPI.ts
@@ -2,14 +2,16 @@
 // 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';
+
+const API_BASE = "http://localhost:8000";
+const API_BASE_BP = API_BASE + "/button_pressed"; //UserInterruptAgent endpoint

 /**
 * HELPER: Unified sender function
 */
 export 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,12 +34,6 @@ export async function nextPhase(): Promise<void> {
  sendAPICall(type, context)
 }

-export async function stopExperiment(): Promise<void> {
-  const type = "stop"
-  const context = ""
-  sendAPICall(type, context)
-}
-

 /**
 * Sends an API call to the CB for going to pause experiment
@@ -80,7 +76,7 @@ export function useExperimentLogger(onUpdate?: (data: ExperimentStreamData) => v

  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 {
@@ -116,7 +112,7 @@ export function useStatusLogger(onUpdate?: (data: ExperimentStreamData) => void)
  }, [onUpdate]);

  useEffect(() => {
-    const eventSource = new EventSource(`${API_BASE_URL}/status_stream`);
+    const eventSource = new EventSource(`${API_BASE}/status_stream`);
    eventSource.onmessage = (event) => {
      try {
        const parsedData = JSON.parse(event.data);
--- a/src/pages/MonitoringPage/MonitoringPageComponents.tsx
+++ b/src/pages/MonitoringPage/MonitoringPageComponents.tsx
@@ -4,7 +4,6 @@
 import React, { useEffect, useState } from 'react';
 import styles from './MonitoringPage.module.css';
 import { sendAPICall } from './MonitoringPageAPI';
-import { API_BASE_URL } from '../../config/api.ts';

 // --- GESTURE COMPONENT ---
 export const GestureControls: React.FC = () => {
@@ -202,7 +201,7 @@ 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`
--- a/src/pages/MonitoringPage/components/ExperimentLogs.tsx
+++ b/src/pages/MonitoringPage/components/ExperimentLogs.tsx
@@ -17,7 +17,6 @@ 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.
@@ -111,7 +110,7 @@ function DownloadScreen({filenames, refresh}: {filenames: string[] | null, refre

    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>
+        <li><a key={filename} href={`http://localhost:8000/api/logs/files/${filename}`} download={filename}>{filename}</a></li>
      ))}
    </ol>;
  })();
@@ -131,7 +130,7 @@ function DownloadButton() {
  const [filenames, setFilenames] = useState<string[] | null>(null);

  async function getFiles(): Promise<string[]> {
-    const response = await fetch(`${API_BASE_URL}/api/logs/files`);
+    const response = await fetch("http://localhost:8000/api/logs/files");
    const files = await response.json();
    files.sort();
    return files;
--- a/src/pages/Robot/Robot.tsx
+++ b/src/pages/Robot/Robot.tsx
@@ -0,0 +1,133 @@
+// 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, 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/VisProgPage/VisProgLogic.ts
+++ b/src/pages/VisProgPage/VisProgLogic.ts
@@ -6,7 +6,6 @@ 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
@@ -29,7 +28,7 @@ export function runProgram() {
  const program = {phases}
  console.log(JSON.stringify(program, null, 2));
  fetch(
-    `${API_BASE_URL}/program`,
+    "http://localhost:8000/program",
    {
      method: "POST",
      headers: {"Content-Type": "application/json"},
--- a/src/pages/VisProgPage/visualProgrammingUI/VisProgStores.tsx
+++ b/src/pages/VisProgPage/visualProgrammingUI/VisProgStores.tsx
@@ -90,20 +90,9 @@ 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) => {
+    return;
+  }),

  onEdgesDelete: (edges) => {
    // we make sure any affected nodes get updated to reflect removal of edges
@@ -251,14 +240,10 @@ const useFlowStore = create<FlowState>(UndoRedo((set, get) => ({
        ).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,
+        nodes: get().nodes.filter((n) => n.id !== nodeId),
        edges: get().edges.filter((e) => e.source !== nodeId && e.target !== nodeId),
        })
      }
@@ -280,50 +265,16 @@ const useFlowStore = create<FlowState>(UndoRedo((set, get) => ({
   */
  updateNodeData: (nodeId, data) => {
    get().pushSnapshot();
-    const updatedNodes = get().nodes.map((node) => {
+    set({
+      nodes: get().nodes.map((node) => {
        if (node.id === nodeId) {
-        return { ...node, data: { ...node.data, ...data } };
+          node = { ...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');
-      }
+      }),
    });
  },

-
  /**
   * Adds a new node to the flow store.
   */
--- a/src/pages/VisProgPage/visualProgrammingUI/VisProgTypes.tsx
+++ b/src/pages/VisProgPage/visualProgrammingUI/VisProgTypes.tsx
@@ -96,11 +96,6 @@ 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
--- a/src/pages/VisProgPage/visualProgrammingUI/components/EditorWarnings.tsx
+++ b/src/pages/VisProgPage/visualProgrammingUI/components/EditorWarnings.tsx
@@ -23,8 +23,6 @@ export type WarningType =
  | '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 =
--- a/src/pages/VisProgPage/visualProgrammingUI/components/PlanEditor.tsx
+++ b/src/pages/VisProgPage/visualProgrammingUI/components/PlanEditor.tsx
@@ -1,253 +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 {useRef, useState} from "react";
-import useFlowStore from "../VisProgStores.tsx";
-import styles from './PlanEditor.module.css';
-import { GetActionValue, type Action, type ActionTypes, type Plan } from "../components/Plan";
-import { defaultPlan } from "../components/Plan.default";
-import { TextField } from "../../../../components/TextField";
-import GestureValueEditor from "./GestureValueEditor"; 
-
-type PlanEditorDialogProps = {
-  plan?: Plan;
-  onSave: (plan: Plan | undefined) => void;
-  description? : string;
-};
-
-export default function PlanEditorDialog({
-  plan,
-  onSave,
-  description,
-}: PlanEditorDialogProps) {
-  // UseStates and references
-  const dialogRef = useRef<HTMLDialogElement | null>(null);
-  const [draftPlan, setDraftPlan] = useState<Plan | null>(null);
-  const [newActionType, setNewActionType] = useState<ActionTypes>("speech");
-  const [newActionGestureType, setNewActionGestureType] = useState<boolean>(true);
-  const [newActionValue, setNewActionValue] = useState("");
-  const [hasInteractedWithPlan, setHasInteractedWithPlan] = useState<boolean>(false)
-  const { setScrollable } = useFlowStore();
-  const nodes = useFlowStore().nodes;
-
-  //Button Actions
-  const openCreate = () => {
-    setScrollable(false);
-    setDraftPlan({...structuredClone(defaultPlan), id: crypto.randomUUID()});
-    dialogRef.current?.showModal();
-  };
-
-  const openCreateWithDescription = () => {
-    setScrollable(false);
-    setDraftPlan({...structuredClone(defaultPlan), id: crypto.randomUUID(), name: description!});
-    setNewActionType("llm")
-    setNewActionValue(description!)
-    dialogRef.current?.showModal();
-  }
-
-  const openEdit = () => {
-    setScrollable(false);
-    if (!plan) return;
-    setDraftPlan(structuredClone(plan));
-    dialogRef.current?.showModal();
-  };
-
-  const close = () => {
-    setScrollable(true);
-    dialogRef.current?.close();
-    setDraftPlan(null);
-  };
-
-  const buildAction = (): Action => {
-    const id = crypto.randomUUID();
-    setHasInteractedWithPlan(true)
-    switch (newActionType) {
-    case "speech":
-     return { id, text: newActionValue, type: "speech" };
-    case "gesture":
-        return { id, gesture: newActionValue, isTag: newActionGestureType, type: "gesture" };
-    case "llm":
-        return { id, goal: newActionValue, type: "llm" };
-    }
-  };
-
-  return (<>
-      {/* Create and edit buttons */}
-      {!plan && (
-          <button className={styles.nodeButton} onClick={description ? openCreateWithDescription : openCreate}>
-          Create Plan
-          </button>
-      )}
-      {plan && (
-          <button className={styles.nodeButton} onClick={openEdit}>
-          Edit Plan
-          </button>
-      )}
-
-      {/* Start of dialog (plan editor) */}
-      <dialog
-        ref={dialogRef}
-        className={`${styles.planDialog}`}
-        //onWheel={(e) => e.stopPropagation()}
-        data-testid={"PlanEditorDialogTestID"}
-      >
-      <form method="dialog" className="flex-col gap-md">
-          <h3> {draftPlan?.id === plan?.id ? "Edit Plan" : "Create Plan"} </h3>
-          {/* Plan name text field */}
-          {draftPlan && (
-              <TextField
-                  value={draftPlan.name}
-                  setValue={(name) =>
-                  setDraftPlan({ ...draftPlan, name })}
-              placeholder="Plan name"
-              data-testid="name_text_field"/>
-          )}
-
-          {/* Entire "bottom" part (adder and steps) without cancel, confirm and reset */}
-          {draftPlan && (<div className={styles.planEditor}>
-              <div className={styles.planEditorLeft}>
-              {/* Left Side (Action Adder) */}
-                  <h4>Add Action</h4>
-                  {(!plan && description && draftPlan.steps.length === 0 && !hasInteractedWithPlan) && (<div className={styles.stepSuggestion}>
-                      <label> Filled in as a suggestion! </label>
-                      <label> Feel free to change! </label>
-                  </div>)}
-                  <label>
-                      Action Type <wbr />
-                      {/* Type selection */}
-                      <select
-                          value={newActionType}
-                          onChange={(e) => {
-                              setNewActionType(e.target.value as ActionTypes);
-                              // Reset value when action type changes
-                              setNewActionValue("");
-                          }}>
-                      <option value="speech">Speech Action</option>
-                      <option value="gesture">Gesture Action</option>
-                      <option value="llm">LLM Action</option>
-                      </select>
-                  </label>
-
-                  {/* Action value editor*/}
-                  {newActionType === "gesture" ? (
-                      // Gesture get their own editor component
-                      <GestureValueEditor
-                        value={newActionValue}
-                        setValue={setNewActionValue}
-                        setType={setNewActionGestureType}
-                        placeholder="Gesture name"
-                      />
-                  ) : (
-                      <TextField
-                          value={newActionValue}
-                          setValue={setNewActionValue}
-                          placeholder={
-                              newActionType === "speech" ? "Speech text"
-                              : "LLM goal"
-                          }
-                      />
-                  )}
-
-                  {/* Adding steps */}
-                  <button
-                      type="button"
-                      disabled={!newActionValue}
-                      onClick={() => {
-                          if (!draftPlan) return;
-                          // Add action to steps
-                          const action = buildAction();
-                          setDraftPlan({
-                              ...draftPlan,
-                              steps: [...draftPlan.steps, action],});
-
-                          // Reset current action building
-                          setNewActionValue("");
-                          setNewActionType("speech");
-                      }}>
-                  Add Step
-                </button>
-              </div>
-
-              {/* Right Side (Steps shown) */}
-              <div className={styles.planEditorRight}>
-                  <h4>Steps</h4>
-
-                  {/* Show if there are no steps yet */}
-                  {draftPlan.steps.length === 0 && (
-                      <div className={styles.emptySteps}>
-                      No steps yet
-                      </div>
-                  )}
-
-
-                  {/* Map over all steps */}
-                  {draftPlan.steps.map((step, index) => (
-                      <div
-                      role="button"
-                      tabIndex={0}
-                      key={step.id}
-                      className={styles.planStep}
-                      // Extra logic for screen readers to access using keyboard
-                      onKeyDown={(e) => {
-                          if (e.key === "Enter" || e.key === " ") {
-                          setDraftPlan({
-                          ...draftPlan,
-                          steps: draftPlan.steps.filter((s) => s.id !== step.id),});
-                          }}}
-                      onClick={() => {
-                          setDraftPlan({
-                          ...draftPlan,
-                          steps: draftPlan.steps.filter((s) => s.id !== step.id),});
-                      }}>
-
-                      <span className={styles.stepIndex}>{index + 1}.</span>
-                      <span className={styles.stepType}>{step.type}:</span>
-                      <span className={styles.stepName}>
-                        {
-                        // This just tries to find the goals name, i know it looks ugly:(
-                        step.type === "goal"
-                        ? ((nodes.find(x => x.id === step.id)?.data.name as string) == "" ? 
-                        "unnamed goal": (nodes.find(x => x.id === step.id)?.data.name as string))
-                        : (GetActionValue(step) ?? "")}
-                      </span>
-                  </div>
-                ))}
-              </div>
-            </div>
-          )}
-
-          {/* Buttons */}
-          <div className="flex-row gap-md">
-              {/* Close button */}
-              <button type="button" onClick={close}>
-              Cancel
-              </button>
-
-              {/* Confirm/ Create button */}
-              <button
-              type="button"
-              disabled={!draftPlan}
-              onClick={() => {
-                  if (!draftPlan) return;
-                  onSave(draftPlan);
-                  close();
-              }}>
-              {draftPlan?.id === plan?.id ? "Confirm" : "Create"}
-              </button>
-
-              {/* Reset button */}
-              <button
-              type="button"
-              disabled={!draftPlan}
-              onClick={() => {
-                  onSave(undefined);
-                  close();
-              }}>
-              Reset
-              </button>
-        </div>
-      </form>
-    </dialog>
-  </>
-);
-}
--- a/src/pages/VisProgPage/visualProgrammingUI/components/PlanEditor/ActionAdder.tsx
+++ b/src/pages/VisProgPage/visualProgrammingUI/components/PlanEditor/ActionAdder.tsx
@@ -0,0 +1,72 @@
+import { TextField } from "../../../../../components/TextField";
+import GestureValueEditor from "./GestureValueEditor";
+import type { ActionTypes } from "./Plan";
+import styles from './PlanEditor.module.css';
+
+type ActionAdderProps = {
+  newActionType: ActionTypes;
+  setNewActionType: (t: ActionTypes) => void;
+  newActionValue: string;
+  setNewActionValue: (v: string) => void;
+  setNewActionGestureType: (b: boolean) => void;
+  onAdd: () => void;
+  showSuggestion: boolean;
+};
+
+
+export function ActionAdder({
+  newActionType,
+  setNewActionType,
+  newActionValue,
+  setNewActionValue,
+  setNewActionGestureType,
+  onAdd,
+  showSuggestion,
+}: ActionAdderProps) {
+  return (
+    <div className={styles.planEditorLeft}>
+      <h4>Add Action</h4>
+
+      {showSuggestion && (
+        <div className={styles.stepSuggestion}>
+          <label>Filled in as a suggestion!</label>
+          <label>Feel free to change!</label>
+        </div>
+      )}
+
+      <label>
+        Action Type <wbr />
+        <select
+          value={newActionType}
+          onChange={(e) => {
+            setNewActionType(e.target.value as ActionTypes);
+            setNewActionValue("");
+          }}
+        >
+          <option value="speech">Speech Action</option>
+          <option value="gesture">Gesture Action</option>
+          <option value="llm">LLM Action</option>
+        </select>
+      </label>
+
+      {newActionType === "gesture" ? (
+        <GestureValueEditor
+          value={newActionValue}
+          setValue={setNewActionValue}
+          setType={setNewActionGestureType}
+          placeholder="Gesture name"
+        />
+      ) : (
+        <TextField
+          value={newActionValue}
+          setValue={setNewActionValue}
+          placeholder={newActionType === "speech" ? "Speech text" : "LLM goal"}
+        />
+      )}
+
+      <button type="button" disabled={!newActionValue} onClick={onAdd}>
+        Add Step
+      </button>
+    </div>
+  );
+}
--- a/src/pages/VisProgPage/visualProgrammingUI/components/PlanEditor/GestureValueEditor.module.css
+++ b/src/pages/VisProgPage/visualProgrammingUI/components/PlanEditor/GestureValueEditor.module.css
--- a/src/pages/VisProgPage/visualProgrammingUI/components/PlanEditor/GestureValueEditor.tsx
+++ b/src/pages/VisProgPage/visualProgrammingUI/components/PlanEditor/GestureValueEditor.tsx
--- a/src/pages/VisProgPage/visualProgrammingUI/components/PlanEditor/Plan.default.ts
+++ b/src/pages/VisProgPage/visualProgrammingUI/components/PlanEditor/Plan.default.ts
--- a/src/pages/VisProgPage/visualProgrammingUI/components/PlanEditor/Plan.tsx
+++ b/src/pages/VisProgPage/visualProgrammingUI/components/PlanEditor/Plan.tsx
@@ -2,7 +2,7 @@
 // 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"
+import { GoalReduce } from "../../nodes/GoalNode"


 export type Plan = {
@@ -125,3 +125,5 @@ export function GetActionValue(action: Action) {
        default:
    }
 }
+
+
--- a/src/pages/VisProgPage/visualProgrammingUI/components/PlanEditor/PlanEditingFunctions.tsx
+++ b/src/pages/VisProgPage/visualProgrammingUI/components/PlanEditor/PlanEditingFunctions.tsx
@@ -2,7 +2,7 @@
 // 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 { GoalNode } from "../../nodes/GoalNode"
 import type { Goal, Plan } from "./Plan"

 /**
@@ -36,3 +36,4 @@ export function deleteGoalInPlanByID(plan: Plan, goalID: string) {
    }
    return updatedPlan.steps.length == 0 ? undefined : updatedPlan
 }
+
--- a/src/pages/VisProgPage/visualProgrammingUI/components/PlanEditor/PlanEditor.module.css
+++ b/src/pages/VisProgPage/visualProgrammingUI/components/PlanEditor/PlanEditor.module.css
--- a/src/pages/VisProgPage/visualProgrammingUI/components/PlanEditor/PlanEditor.tsx
+++ b/src/pages/VisProgPage/visualProgrammingUI/components/PlanEditor/PlanEditor.tsx
@@ -0,0 +1,214 @@
+// 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';
+import { type Action, type ActionTypes, type Plan } from "./Plan.tsx";
+import { defaultPlan } from "./Plan.default.ts";
+import { TextField } from "../../../../../components/TextField.tsx";
+import { StepsList } from "./StepList.tsx";
+import { ActionAdder } from "./ActionAdder.tsx";
+
+
+
+type PlanEditorDialogProps = {
+  plan?: Plan;
+  onSave: (plan: Plan | undefined) => void;
+  description? : string;
+};
+
+
+/**
+ * Creates an action, as a step for a plan.
+ * @param type the type of action to build
+ * @param value the value of this action to build
+ * @param isGestureTag whether or not this action, restricted to gestures, is a tag.
+ * @returns An action
+ */
+function buildAction(
+  type: ActionTypes,
+  value: string,
+  isGestureTag: boolean
+): Action {
+  const id = crypto.randomUUID();
+
+  switch (type) {
+    case "speech":
+      return { id, text: value, type: "speech" };
+    case "gesture":
+      return { id, gesture: value, isTag: isGestureTag, type: "gesture" };
+    case "llm":
+      return { id, goal: value, type: "llm" };
+  }
+}
+
+
+
+
+
+export default function PlanEditorDialog({
+  plan,
+  onSave,
+  description,
+}: PlanEditorDialogProps) {
+  // UseStates and references
+  const dialogRef = useRef<HTMLDialogElement | null>(null);
+  const [draftPlan, setDraftPlan] = useState<Plan | null>(null);
+  const [newActionType, setNewActionType] = useState<ActionTypes>("speech");
+  const [newActionGestureType, setNewActionGestureType] = useState<boolean>(true);
+  const [newActionValue, setNewActionValue] = useState("");
+  const [hasInteractedWithPlan, setHasInteractedWithPlan] = useState<boolean>(false)
+  const { setScrollable } = useFlowStore();
+  const nodes = useFlowStore().nodes;
+
+  //Button Actions
+  const openCreate = () => {
+    setScrollable(false);
+    setDraftPlan({...structuredClone(defaultPlan), id: crypto.randomUUID()});
+    dialogRef.current?.showModal();
+  };
+
+  const openCreateWithDescription = () => {
+    setScrollable(false);
+    setDraftPlan({...structuredClone(defaultPlan), id: crypto.randomUUID(), name: description!});
+    setNewActionType("llm")
+    setNewActionValue(description!)
+    dialogRef.current?.showModal();
+  }
+
+  const openEdit = () => {
+    setScrollable(false);
+    if (!plan) return;
+    setDraftPlan(structuredClone(plan));
+    dialogRef.current?.showModal();
+  };
+
+  const close = () => {
+    setScrollable(true);
+    dialogRef.current?.close();
+    setDraftPlan(null);
+  };
+
+  const addAction = () => {
+    if (!draftPlan) return;
+    // Add action to steps
+    const action = buildAction(newActionType, newActionValue, newActionGestureType);
+    setDraftPlan({
+        ...draftPlan,
+        steps: [...draftPlan.steps, action],});
+
+    // Reset current action building
+    setNewActionValue("");
+    setNewActionType("speech"); 
+    setHasInteractedWithPlan(true);
+  }
+                            
+
+  const showSuggestion : boolean = (
+    !plan && 
+    !!description && 
+    draftPlan !== null && 
+    draftPlan.steps.length === 0 && 
+    !hasInteractedWithPlan)
+
+  return (<>
+      {/* Create and edit buttons */}
+      {!plan && (
+          <button className={styles.nodeButton} onClick={description ? openCreateWithDescription : openCreate}>
+          Create Plan
+          </button>
+      )}
+      {plan && (
+          <button className={styles.nodeButton} onClick={openEdit}>
+          Edit Plan
+          </button>
+      )}
+
+      {/* Start of dialog (plan editor) */}
+      <dialog
+        ref={dialogRef}
+        className={`${styles.planDialog}`}
+        //onWheel={(e) => e.stopPropagation()}
+        data-testid={"PlanEditorDialogTestID"}
+      >
+      <form method="dialog" className="flex-col gap-md">
+          <h3> {draftPlan?.id === plan?.id ? "Edit Plan" : "Create Plan"} </h3>
+          {/* Plan name text field */}
+          {draftPlan && (
+              <TextField
+                  value={draftPlan.name}
+                  setValue={(name) =>
+                  setDraftPlan({ ...draftPlan, name })}
+              placeholder="Plan name"
+              data-testid="name_text_field"/>
+          )}
+
+          {/* Entire "bottom" part (adder and steps) without cancel, confirm and reset */}
+          {draftPlan && (<div className={styles.planEditor}>
+              <div className={styles.planEditorLeft}>
+              {/* Left Side (Action Adder) */}
+                <ActionAdder 
+                  newActionType={newActionType}
+                  setNewActionType={setNewActionType}
+                  newActionValue={newActionValue}
+                  setNewActionValue={setNewActionValue}
+                  setNewActionGestureType={setNewActionGestureType}
+                  onAdd={addAction}
+                  showSuggestion={showSuggestion}
+                />
+              </div>
+
+              {/* Right Side (Steps shown) */}
+              <div className={styles.planEditorRight}>
+                  <h4>Steps</h4>
+                  {/* Map over all steps */}
+                  <StepsList
+                    steps={draftPlan.steps}
+                    nodes={nodes}
+                    onRemove={(id) =>
+                      setDraftPlan({
+                        ...draftPlan,
+                        steps: draftPlan.steps.filter(s => s.id !== id),
+                      })
+                    }
+                  />
+              </div>
+            </div>
+          )}
+
+          {/* Buttons */}
+          <div className="flex-row gap-md">
+              {/* Close button */}
+              <button type="button" onClick={close}>
+              Cancel
+              </button>
+
+              {/* Confirm/ Create button */}
+              <button
+              type="button"
+              disabled={!draftPlan}
+              onClick={() => {
+                  if (!draftPlan) return;
+                  onSave(draftPlan);
+                  close();
+              }}>
+              {draftPlan?.id === plan?.id ? "Confirm" : "Create"}
+              </button>
+
+              {/* Reset button */}
+              <button
+              type="button"
+              disabled={!draftPlan}
+              onClick={() => {
+                  onSave(undefined);
+                  close();
+              }}>
+              Reset
+              </button>
+        </div>
+      </form>
+    </dialog>
+  </>
+);
+}
--- a/src/pages/VisProgPage/visualProgrammingUI/components/PlanEditor/StepList.tsx
+++ b/src/pages/VisProgPage/visualProgrammingUI/components/PlanEditor/StepList.tsx
@@ -0,0 +1,54 @@
+import { GetActionValue, type PlanElement } from "./Plan";
+import styles from './PlanEditor.module.css';
+import { type Node} from "@xyflow/react"
+
+type StepsListProps = {
+  steps: PlanElement[];
+  onRemove: (id: string) => void;
+  nodes: Node[];
+};
+
+function getStepLabel(
+  step: PlanElement,
+  nodes: Node[],
+): string {
+  if (step.type === "goal") {
+    // For goals, we lookup the value through the nodes in the diagram
+    const node = nodes.find(n => n.id === step.id);
+    return (node?.data?.name as string)?.trim() || "unnamed goal";
+  }
+
+  // Not a goal, we lookup the correct action value of the action
+  return GetActionValue(step) ?? "";
+}
+
+export function StepsList({ steps, onRemove, nodes }: StepsListProps) {
+  if (steps.length === 0) {
+    return <div className={styles.emptySteps}>No steps yet</div>;
+  }
+
+  return (
+    <>
+      {steps.map((step, index) => (
+        <div
+          key={step.id}
+          role="button"
+          tabIndex={0}
+          className={styles.planStep}
+          onClick={() => onRemove(step.id)}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              onRemove(step.id);
+            }
+          }}
+        >
+          <span className={styles.stepIndex}>{index + 1}.</span>
+          <span className={styles.stepType}>{step.type}:</span>
+          <span className={styles.stepName}>
+            {getStepLabel(step, nodes)}
+          </span>
+        </div>
+      ))}
+    </>
+  );
+}
--- a/src/pages/VisProgPage/visualProgrammingUI/nodes/GoalNode.tsx
+++ b/src/pages/VisProgPage/visualProgrammingUI/nodes/GoalNode.tsx
@@ -14,11 +14,11 @@ import { TextField } from '../../../../components/TextField';
 import {MultiConnectionHandle} from "../components/RuleBasedHandle.tsx";
 import {allowOnlyConnectionsFromHandle, allowOnlyConnectionsFromType} from "../HandleRules.ts";
 import useFlowStore from '../VisProgStores';
-import {DoesPlanIterate, HasCheckingSubGoal, PlanReduce, type Plan } from '../components/Plan';
-import PlanEditorDialog from '../components/PlanEditor';
+import {DoesPlanIterate, HasCheckingSubGoal, PlanReduce, type Plan } from '../components/PlanEditor/Plan.tsx';
+import PlanEditorDialog from '../components/PlanEditor/PlanEditor.tsx';
 import { MultilineTextField } from '../../../../components/MultilineTextField';
-import { defaultPlan } from '../components/Plan.default.ts';
-import { deleteGoalInPlanByID, insertGoalInPlan } from '../components/PlanEditingFunctions.tsx';
+import { defaultPlan } from '../components/PlanEditor/Plan.default.ts';
+import { deleteGoalInPlanByID, insertGoalInPlan } from '../components/PlanEditor/PlanEditingFunctions.tsx';

 /**
 * The default data dot a phase node
@@ -69,7 +69,7 @@ export default function GoalNode({id, data}: NodeProps<GoalNode>) {
    updateNodeData(id, {...data, can_fail: value});
  }

-  //undefined plan warning
+
  useEffect(() => {
    const noPlanWarning : EditorWarning = {
      scope: {
@@ -81,31 +81,12 @@ export default function GoalNode({id, data}: NodeProps<GoalNode>) {
      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){
+    if (!data.plan){
      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`}>
--- a/src/pages/VisProgPage/visualProgrammingUI/nodes/NormNode.tsx
+++ b/src/pages/VisProgPage/visualProgrammingUI/nodes/NormNode.tsx
@@ -1,8 +1,6 @@
 // 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,
@@ -41,7 +39,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 +47,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');
+  const setCritical = (value: boolean) => {
+    updateNodeData(props.id, {...data, critical: value});
  }
-  }, [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]);

  return <>
    <Toolbar nodeId={props.id} allowDelete={true}/>
@@ -100,10 +64,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 +72,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">
--- a/src/pages/VisProgPage/visualProgrammingUI/nodes/TriggerNode.tsx
+++ b/src/pages/VisProgPage/visualProgrammingUI/nodes/TriggerNode.tsx
@@ -13,12 +13,12 @@ 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 {PlanReduce, type Plan } from '../components/PlanEditor/Plan.tsx';
+import PlanEditorDialog from '../components/PlanEditor/PlanEditor.tsx';
 import {BeliefGlobalReduce} from "./BeliefGlobals.ts";
 import type { GoalNode } from './GoalNode.tsx';
-import { defaultPlan } from '../components/Plan.default.ts';
-import { deleteGoalInPlanByID, insertGoalInPlan } from '../components/PlanEditingFunctions.tsx';
+import { defaultPlan } from '../components/PlanEditor/Plan.default.ts';
+import { deleteGoalInPlanByID, insertGoalInPlan } from '../components/PlanEditor/PlanEditingFunctions.tsx';
 import { TextField } from '../../../../components/TextField.tsx';

 /**
@@ -115,27 +115,12 @@ export default function TriggerNode(props: NodeProps<TriggerNode>) {
      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){
+    if (!data.plan && 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}/>
--- 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/test/components/Logging/useLogs.test.tsx
+++ b/test/components/Logging/useLogs.test.tsx
@@ -6,7 +6,6 @@ import "@testing-library/jest-dom";
 import {type LogRecord, useLogs} from "../../../src/components/Logging/useLogs.ts";
 import {type cell, useCell} from "../../../src/utils/cellStore.ts";
 import { StrictMode } from "react";
-import { API_BASE_URL } from "../../../src/config/api.ts";

 jest.mock("../../../src/utils/priorityFiltering.ts", () => ({
  applyPriorityPredicates: jest.fn((_log, preds: any[]) =>
@@ -84,7 +83,7 @@ describe("useLogs (unit)", () => {
    );
    const es = (globalThis as any).__es as MockEventSource;
    expect(es).toBeTruthy();
-    expect(es.url).toBe(`${API_BASE_URL}/logs/stream`);
+    expect(es.url).toBe("http://localhost:8000/logs/stream");

    unmount();
    expect(es.close).toHaveBeenCalledTimes(1);
--- a/test/pages/connectedRobots/ConnectedRobots.test.tsx
+++ b/test/pages/connectedRobots/ConnectedRobots.test.tsx
@@ -0,0 +1,107 @@
+// 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 { render, screen, act, cleanup, waitFor } from '@testing-library/react';
+import ConnectedRobots from '../../../src/pages/ConnectedRobots/ConnectedRobots';
+
+// Mock event source
+const mockInstances: MockEventSource[] = [];
+class MockEventSource {
+  url: string;
+  onmessage: ((event: MessageEvent) => void) | null = null;
+  closed = false;
+
+  constructor(url: string) {
+    this.url = url;
+    mockInstances.push(this);
+  }
+
+  sendMessage(data: string) {
+    // Trigger whatever the component listens to
+    this.onmessage?.({ data } as MessageEvent);
+  }
+
+  close() {
+    this.closed = true;
+  }
+}
+
+// mock event source generation with fake function that returns our fake mock source
+beforeAll(() => {
+  // Cast globalThis to a type exposing EventSource and assign a mocked constructor.
+  (globalThis as unknown as { EventSource?: typeof EventSource }).EventSource =
+    jest.fn((url: string) => new MockEventSource(url)) as unknown as typeof EventSource;
+});
+
+// clean after tests
+afterEach(() => {
+  cleanup();
+  jest.restoreAllMocks();
+  mockInstances.length = 0;
+});
+
+describe('ConnectedRobots', () => {
+  test('renders initial state correctly', () => {
+    render(<ConnectedRobots />);
+    
+    // Check initial texts (before connection)
+    expect(screen.getByText('Is robot currently connected?')).toBeInTheDocument();
+    expect(screen.getByText(/Robot is currently:\s*checking/i)).toBeInTheDocument();
+    expect(
+      screen.getByText(/If checking continues, make sure CB is properly loaded/i)
+    ).toBeInTheDocument();
+  });
+
+  test('updates to connected when message data is true', async () => {
+    render(<ConnectedRobots />);
+    const eventSource = mockInstances[0];
+    expect(eventSource).toBeDefined();
+
+    // Check state after getting 'true' message
+    await act(async () => {
+      eventSource.sendMessage('true');
+    });
+
+    await waitFor(() => {
+      expect(screen.getByText(/connected! 🟢/i)).toBeInTheDocument();
+    });
+  });
+
+  test('updates to not connected when message data is false', async () => {
+    render(<ConnectedRobots />);
+    const eventSource = mockInstances[0];
+
+    // Check statew after getting 'false' message
+    await act(async () => {
+      eventSource.sendMessage('false');
+    });
+
+    await waitFor(() => {
+      expect(screen.getByText(/not connected.*🔴/i)).toBeInTheDocument();
+    });
+  });
+
+  test('handles invalid JSON gracefully', async () => {
+    const logSpy = jest.spyOn(console, 'log').mockImplementation(() => {});
+    render(<ConnectedRobots />);
+    const eventSource = mockInstances[0];
+
+    await act(async () => {
+      eventSource.sendMessage('not-json');
+    });
+
+    expect(logSpy).toHaveBeenCalledWith(
+      'Ping message not in correct format:',
+      'not-json'
+    );
+  });
+
+  test('closes EventSource on unmount', () => {
+    render(<ConnectedRobots />);
+    const eventSource = mockInstances[0];
+    const closeSpy = jest.spyOn(eventSource, 'close');
+    cleanup(); 
+    expect(closeSpy).toHaveBeenCalled();
+    expect(eventSource.closed).toBe(true);
+  });
+});
--- a/test/pages/monitoringPage/MonitoringPageAPI.test.ts
+++ b/test/pages/monitoringPage/MonitoringPageAPI.test.ts
@@ -10,7 +10,6 @@ import {
    useExperimentLogger, 
    useStatusLogger 
 } from '../../../src/pages/MonitoringPage/MonitoringPageAPI';
-import { API_BASE_URL } from '../../../src/config/api.ts';

 // --- MOCK EVENT SOURCE SETUP ---
 // This mocks the browser's EventSource so we can manually 'push' messages to our hooks
@@ -73,7 +72,7 @@ describe('MonitoringPageAPI', () => {
      await sendAPICall('test_type', 'test_ctx');

      expect(globalThis.fetch).toHaveBeenCalledWith(
-        `${API_BASE_URL}/button_pressed`,
+        'http://localhost:8000/button_pressed',
        expect.objectContaining({
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
--- a/test/pages/robot/Robot.test.tsx
+++ b/test/pages/robot/Robot.test.tsx
@@ -0,0 +1,170 @@
+// 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 { render, screen, act, cleanup, fireEvent } from '@testing-library/react';
+import Robot from '../../../src/pages/Robot/Robot';
+
+// Mock EventSource
+const mockInstances: MockEventSource[] = [];
+class MockEventSource {
+  url: string;
+  onmessage: ((event: MessageEvent) => void) | null = null;
+  closed = false;
+
+  constructor(url: string) {
+    this.url = url;
+    mockInstances.push(this);
+  }
+
+  sendMessage(data: string) {
+    this.onmessage?.({ data } as MessageEvent);
+  }
+
+  close() {
+    this.closed = true;
+  }
+}
+
+// Mock global EventSource
+beforeAll(() => {
+  (globalThis as any).EventSource = jest.fn((url: string) => new MockEventSource(url));
+});
+
+// Mock fetch
+beforeEach(() => {
+  globalThis.fetch = jest.fn(() =>
+    Promise.resolve({
+      json: () => Promise.resolve({ reply: 'ok' }),
+    })
+  ) as jest.Mock;
+});
+
+// Cleanup
+afterEach(() => {
+  cleanup();
+  jest.restoreAllMocks();
+  mockInstances.length = 0;
+});
+
+describe('Robot', () => {
+  test('renders initial state', () => {
+    render(<Robot />);
+    expect(screen.getByText('Robot interaction')).toBeInTheDocument();
+    expect(screen.getByText('Force robot speech')).toBeInTheDocument();
+    expect(screen.getByText('Listening 🔴')).toBeInTheDocument();
+    expect(screen.getByPlaceholderText('Enter a message')).toBeInTheDocument();
+  });
+
+  test('sends message via button', async () => {
+    render(<Robot />);
+    const input = screen.getByPlaceholderText('Enter a message');
+    const button = screen.getByText('Speak');
+
+    fireEvent.change(input, { target: { value: 'Hello' } });
+    await act(async () => fireEvent.click(button));
+
+    expect(globalThis.fetch).toHaveBeenCalledWith(
+      'http://localhost:8000/message',
+      expect.objectContaining({
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ message: 'Hello' }),
+      })
+    );
+  });
+
+  test('sends message via Enter key', async () => {
+    render(<Robot />);
+    const input = screen.getByPlaceholderText('Enter a message');
+    fireEvent.change(input, { target: { value: 'Hi Enter' } });
+
+    await act(async () =>
+      fireEvent.keyDown(input, { key: 'Enter', code: 'Enter', charCode: 13 })
+    );
+
+    expect(globalThis.fetch).toHaveBeenCalledWith(
+      'http://localhost:8000/message',
+      expect.objectContaining({
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ message: 'Hi Enter' }),
+      })
+    );
+    expect((input as HTMLInputElement).value).toBe('');
+  });
+
+  test('handles fetch errors', async () => {
+    globalThis.fetch = jest.fn(() => Promise.reject('Network error')) as jest.Mock;
+    const consoleSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+
+    render(<Robot />);
+    const input = screen.getByPlaceholderText('Enter a message');
+    const button = screen.getByText('Speak');
+    fireEvent.change(input, { target: { value: 'Error test' } });
+
+    await act(async () => fireEvent.click(button));
+
+    expect(consoleSpy).toHaveBeenCalledWith(
+      'Error sending message: ',
+      'Network error'
+    );
+  });
+
+  test('updates conversation on SSE', async () => {
+    render(<Robot />);
+    const eventSource = mockInstances[0];
+
+    await act(async () => {
+      eventSource.sendMessage(JSON.stringify({ voice_active: true }));
+      eventSource.sendMessage(JSON.stringify({ speech: 'User says hi' }));
+      eventSource.sendMessage(JSON.stringify({ llm_response: 'Assistant replies' }));
+    });
+
+    expect(screen.getByText('Listening 🟢')).toBeInTheDocument();
+    expect(screen.getByText('User says hi')).toBeInTheDocument();
+    expect(screen.getByText('Assistant replies')).toBeInTheDocument();
+  });
+
+  test('handles invalid SSE JSON', async () => {
+    const logSpy = jest.spyOn(console, 'log').mockImplementation(() => {});
+    render(<Robot />);
+    const eventSource = mockInstances[0];
+
+    await act(async () => eventSource.sendMessage('bad-json'));
+
+    expect(logSpy).toHaveBeenCalledWith('Unparsable SSE message:', 'bad-json');
+  });
+
+  test('resets conversation with Reset button', async () => {
+    render(<Robot />);
+    const eventSource = mockInstances[0];
+
+    await act(async () =>
+      eventSource.sendMessage(JSON.stringify({ speech: 'Hello' }))
+    );
+    expect(screen.getByText('Hello')).toBeInTheDocument();
+
+    fireEvent.click(screen.getByText('Reset'));
+    expect(screen.queryByText('Hello')).not.toBeInTheDocument();
+  });
+
+  test('toggles conversationIndex with Stop/Start button', () => {
+    render(<Robot />);
+    const stopButton = screen.getByText('Stop');
+    fireEvent.click(stopButton);
+    expect(screen.getByText('Start')).toBeInTheDocument();
+
+    fireEvent.click(screen.getByText('Start'));
+    expect(screen.getByText('Stop')).toBeInTheDocument();
+  });
+
+  test('closes EventSource on unmount', () => {
+    const { unmount } = render(<Robot />);
+    const eventSource = mockInstances[0];
+    const closeSpy = jest.spyOn(eventSource, 'close');
+
+    unmount();
+    expect(closeSpy).toHaveBeenCalled();
+    expect(eventSource.closed).toBe(true);
+  });
+});
--- a/test/pages/visProgPage/visualProgrammingUI/VisProgStores.test.tsx
+++ b/test/pages/visProgPage/visualProgrammingUI/VisProgStores.test.tsx
@@ -648,46 +648,3 @@ describe('FlowStore Functionality', () => {
  });
 })
 });
-
-describe('Extended Coverage Tests', () => {
-
-
-  test('calls deleteElements and performs async cleanup', async () => {
-    const { deleteNode } = useFlowStore.getState();
-    
-    useFlowStore.setState({
-      nodes: [{ id: 'target-node', type: 'phase', data: { label: 'T' }, position: { x: 0, y: 0 } }],
-      edges: [{ id: 'edge-1', source: 'other', target: 'target-node' }]
-    });
-
-    // Mock the deleteElements function required by the 'if' block
-    const deleteElementsMock = jest.fn().mockResolvedValue(true);
-
-    await act(async () => {
-      deleteNode('target-node', deleteElementsMock);
-    });
-
-    expect(deleteElementsMock).toHaveBeenCalledWith(expect.objectContaining({
-      nodes: expect.arrayContaining([expect.objectContaining({ id: 'target-node' })]),
-      edges: expect.arrayContaining([expect.objectContaining({ id: 'edge-1' })])
-    }));
-  });
-  test('triggers duplicate warning when two nodes share the same name', () => {
-    const { validateDuplicateNames } = useFlowStore.getState();
-    
-    const collidingNodes: Node[] = [
-      { id: 'node-1', type: 'phase', data: { name: 'Collision' }, position: { x: 0, y: 0 } },
-      { id: 'node-2', type: 'phase', data: { name: '  Collision  ' }, position: { x: 10, y: 10 } }
-    ];
-
-    act(() => {
-      validateDuplicateNames(collidingNodes);
-    });
-
-    const state = useFlowStore.getState();
-    // Assuming warnings are stored in a way accessible via get().warnings or similar from editorWarningRegistry
-    // Since validateDuplicateNames calls registerWarning:
-    expect(state.nodes).toBeDefined(); 
-    // You should check your 'warnings' state here to ensure DUPLICATE_ELEMENT_NAME exists
-  });
-});
--- a/test/pages/visProgPage/visualProgrammingUI/components/GestureValueEditor.test.tsx
+++ b/test/pages/visProgPage/visualProgrammingUI/components/GestureValueEditor.test.tsx
@@ -4,7 +4,7 @@
 import { useState } from 'react';
 import userEvent from '@testing-library/user-event';
 import { renderWithProviders, screen } from '../../../../test-utils/test-utils.tsx';
-import GestureValueEditor from '../../../../../src/pages/VisProgPage/visualProgrammingUI/components/GestureValueEditor';
+import GestureValueEditor from '../../../../../src/pages/VisProgPage/visualProgrammingUI/components/PlanEditor/GestureValueEditor.tsx';

 function TestHarness({ initialValue = '', initialType=true, placeholder = 'Gesture name' } : { initialValue?: string, initialType?: boolean, placeholder?: string }) {
  const [value, setValue] = useState(initialValue);
--- a/test/pages/visProgPage/visualProgrammingUI/components/PlanEditor.test.tsx
+++ b/test/pages/visProgPage/visualProgrammingUI/components/PlanEditor.test.tsx
@@ -6,12 +6,12 @@ import { screen, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import type { Node } from '@xyflow/react';
 import { renderWithProviders } from '../../../../test-utils/test-utils.tsx';
-import PlanEditorDialog from '../../../../../src/pages/VisProgPage/visualProgrammingUI/components/PlanEditor';
-import { PlanReduce, type Plan } from '../../../../../src/pages/VisProgPage/visualProgrammingUI/components/Plan';
+import PlanEditorDialog from '../../../../../src/pages/VisProgPage/visualProgrammingUI/components/PlanEditor/PlanEditor.tsx';
+import { PlanReduce, type Plan } from '../../../../../src/pages/VisProgPage/visualProgrammingUI/components/PlanEditor/Plan.tsx';
 import '@testing-library/jest-dom';
 import { GoalReduce, type GoalNodeData } from '../../../../../src/pages/VisProgPage/visualProgrammingUI/nodes/GoalNode.tsx';
 import { GoalNodeDefaults } from '../../../../../src/pages/VisProgPage/visualProgrammingUI/nodes/GoalNode.default.ts';
-import { insertGoalInPlan } from '../../../../../src/pages/VisProgPage/visualProgrammingUI/components/PlanEditingFunctions.tsx';
+import { insertGoalInPlan } from '../../../../../src/pages/VisProgPage/visualProgrammingUI/components/PlanEditor/PlanEditingFunctions.tsx';


 // Mock structuredClone
--- a/test/pages/visProgPage/visualProgrammingUI/nodes/GoalNode.test.tsx
+++ b/test/pages/visProgPage/visualProgrammingUI/nodes/GoalNode.test.tsx
@@ -10,7 +10,7 @@ import useFlowStore from '../../../../../src/pages/VisProgPage/visualProgramming
 import type { Node } from '@xyflow/react';
 import '@testing-library/jest-dom';
 import { GoalNodeDefaults } from '../../../../../src/pages/VisProgPage/visualProgrammingUI/nodes/GoalNode.default.ts';
-import { defaultPlan } from '../../../../../src/pages/VisProgPage/visualProgrammingUI/components/Plan.default.ts';
+import { defaultPlan } from '../../../../../src/pages/VisProgPage/visualProgrammingUI/components/PlanEditor/Plan.default.ts';

 describe('GoalNode', () => {
  let user: ReturnType<typeof userEvent.setup>;
--- a/test/pages/visProgPage/visualProgrammingUI/nodes/NormNode.test.tsx
+++ b/test/pages/visProgPage/visualProgrammingUI/nodes/NormNode.test.tsx
@@ -699,12 +699,15 @@ describe('NormNode', () => {
        />
      );

+      const checkbox = screen.getByLabelText('Critical:');
+      await user.click(checkbox);
+
      await waitFor(() => {
        const state = useFlowStore.getState();
        expect(state.nodes).toHaveLength(1);
        expect(state.nodes[0].id).toBe('norm-1');
        expect(state.nodes[0].data.norm).toBe('');
-
+        expect(state.nodes[0].data.critical).toBe(true);
      });
    });

--- a/test/pages/visProgPage/visualProgrammingUI/nodes/TriggerNode.test.tsx
+++ b/test/pages/visProgPage/visualProgrammingUI/nodes/TriggerNode.test.tsx
@@ -14,7 +14,7 @@ import type { Node } from '@xyflow/react';
 import '@testing-library/jest-dom';
 import { TriggerNodeDefaults } from '../../../../../src/pages/VisProgPage/visualProgrammingUI/nodes/TriggerNode.default.ts';
 import { BasicBeliefNodeDefaults } from '../../../../../src/pages/VisProgPage/visualProgrammingUI/nodes/BasicBeliefNode.default.ts';
-import { defaultPlan } from '../../../../../src/pages/VisProgPage/visualProgrammingUI/components/Plan.default.ts';
+import { defaultPlan } from '../../../../../src/pages/VisProgPage/visualProgrammingUI/components/PlanEditor/Plan.default.ts';
 import { NormNodeDefaults } from '../../../../../src/pages/VisProgPage/visualProgrammingUI/nodes/NormNode.default.ts';
 import { GoalNodeDefaults } from '../../../../../src/pages/VisProgPage/visualProgrammingUI/nodes/GoalNode.default.ts';
 import { act } from '@testing-library/react';
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -4,9 +4,6 @@ import react from '@vitejs/plugin-react'
 // https://vite.dev/config/
 export default defineConfig({
  plugins: [react()],
-  define: {
-    __VITE_API_BASE_URL__: "import.meta.env.VITE_API_BASE_URL",
-  },
  css: {
    modules: {
      localsConvention: "camelCase",
Author	SHA1	Message	Date
Björn Otgaar	26894cc2d2	Merge branch 'dev' into chore/clean-visprog-code	2026-01-28 12:27:27 +01:00
Björn Otgaar	dcf4f01e68	chore: replace plan editor functionality into own folder with own files.	2026-01-28 12:26:57 +01:00
Gerla, J. (Justin)	c84088dd9d	Merge branch 'chore/editing-css-strings' into 'dev' chore: updated css comments See merge request ics/sp/2025/n25b/pepperplus-ui!51	2026-01-28 11:19:16 +00:00
JGerla	dfe793e04a	chore: updated css comments	2026-01-28 12:07:33 +01:00
Björn Otgaar	1876138fe2	Merge branch 'dev' into chore/clean-visprog-code	2026-01-28 11:36:21 +01:00
Björn Otgaar	5930e24bf4	chore: intitial commit, starting seperating concerns for plan editor.	2026-01-28 11:35:34 +01:00