Merge branch 'main' of ssh://git.twirre.io:2222/pepperplus/pepperplus-ui

chore: remove hooks
2026-02-02 14:40:55 +01:00 · 2026-02-02 14:40:34 +01:00 · 2026-02-02 14:39:20 +01:00 · 2026-02-02 14:39:07 +01:00 · 2026-01-30 20:04:35 +00:00 · 2026-01-30 20:58:03 +01:00
52 changed files with 548 additions and 851 deletions
--- a/.env.example
+++ b/.env.example
@@ -0,0 +1,2 @@
+# The location of the backend
+VITE_API_BASE_URL=http://localhost:8000
--- a/.githooks/check-branch-name.sh
+++ b/.githooks/check-branch-name.sh
@@ -1,77 +0,0 @@
-#!/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
@@ -1,138 +0,0 @@
-#!/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
@@ -1 +0,0 @@
-sh .githooks/check-commit-msg.sh $1
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@@ -1,3 +0,0 @@
-sh .githooks/check-branch-name.sh
-
-npm run lint
--- a/README.md
+++ b/README.md
@@ -28,6 +28,14 @@ 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,7 +31,6 @@
        "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",
@@ -5544,22 +5543,6 @@
        "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,8 +8,7 @@
    "build": "tsc -b && vite build",
    "lint": "eslint src test",
    "preview": "vite preview",
-    "test": "jest",
-    "prepare": "husky"
+    "test": "jest"
  },
  "dependencies": {
    "@neodrag/react": "^2.3.1",
@@ -35,7 +34,6 @@
    "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,8 +4,7 @@
 import { Routes, Route, Link } from 'react-router'
 import './App.css'
 import Home from './pages/Home/Home.tsx'
-import Robot from './pages/Robot/Robot.tsx';
-import ConnectedRobots from './pages/ConnectedRobots/ConnectedRobots.tsx'
+import UserManual from './pages/Manuals/Manuals.tsx';
 import VisProg from "./pages/VisProgPage/VisProg.tsx";
 import {useState} from "react";
 import Logging from "./components/Logging/Logging.tsx";
@@ -26,8 +25,7 @@ function App(){
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/editor" element={<VisProg />} />
-            <Route path="/robot" element={<Robot />} />
-            <Route path="/ConnectedRobots" element={<ConnectedRobots />} />
+            <Route path="/user_manual" element={<UserManual />} />
        </Routes>
        </main>
        {showLogs && <Logging />}
--- a/src/components/Logging/Filters.module.css
+++ b/src/components/Logging/Filters.module.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)
-*/}
+*/
 .filter-root {
  position: relative;
  display: flex;
--- a/src/components/Logging/Logging.module.css
+++ b/src/components/Logging/Logging.module.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)
-*/}
+*/
 .logging-container {
  box-sizing: border-box;

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

@@ -210,7 +211,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("http://localhost:8000/logs/stream");
+    const es = new EventSource(`${API_BASE_URL}/logs/stream`);
    sseRef.current = es;

    es.onmessage = (event) => {
--- a/src/components/TextField.module.css
+++ b/src/components/TextField.module.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)
-*/}
+*/
 .text-field {
  border: 1px solid transparent;
  border-radius: 5pt;
--- a/src/config/api.ts
+++ b/src/config/api.ts
@@ -0,0 +1,11 @@
+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,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)
-*/}
+*/

 :root {
  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
--- a/src/pages/ConnectedRobots/ConnectedRobots.tsx
+++ b/src/pages/ConnectedRobots/ConnectedRobots.tsx
@@ -1,63 +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 { useEffect, useState } from 'react'
-
-/**
- * Displays the current connection status of a robot in real time.
- *
- * Opens an SSE connection to the backend (`/robot/ping_stream`) that emits
- * simple boolean JSON messages (`true` or `false`). Updates automatically when
- * the robot connects or disconnects.
- *
- * @returns A React element showing the current robot connection status.
- */
-export default function ConnectedRobots() {
-  
-  /**
-   * The current connection state:
-   * - `true`: Robot is connected.
-   * - `false`: Robot is not connected.
-   * - `null`: Connection status is unknown (initial check in progress).
-   */
-  const [connected, setConnected] = useState<boolean | null>(null);
-
-  useEffect(() => {
-    // Open a Server-Sent Events (SSE) connection to receive live ping updates.
-    // We're expecting a stream of data like that looks like this: `data = False` or `data = True`
-    const eventSource = new EventSource("http://localhost:8000/robot/ping_stream");
-    eventSource.onmessage = (event) => {
-    
-      // Expecting messages in JSON format: `true` or `false`
-      console.log("received message:", event.data);
-      try {
-        const data = JSON.parse(event.data);
-
-        try {
-          setConnected(data)
-        }
-        catch {
-          console.log("couldnt extract connected from incoming ping data")
-        }
-
-      } catch {
-        console.log("Ping message not in correct format:", event.data);
-      }
-    };
-
-    // Clean up the SSE connection when the component unmounts.
-    return () => eventSource.close();
-  }, []);
-
-  return (
-    <div>
-      <h1>Is robot currently connected?</h1>
-      <div>
-        <h2>Robot is currently: {connected == null ? "checking..." : (connected ? "connected! 🟢" : "not connected... 🔴")} </h2>
-        <h3>
-          {connected == null ? "If checking continues, make sure CB is properly loaded with robot at least once." : ""}
-        </h3>
-      </div>
-    </div>
-  );
-}
--- a/src/pages/Home/Home.module.css
+++ b/src/pages/Home/Home.module.css
@@ -1,8 +1,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)
-*/}
+*/
 .read_the_docs {
  color: #888;
 }
@@ -26,4 +26,52 @@ University within the Software Project course.
  display: flex;
  flex-direction: column;
  gap: 1em;
+}
+
+.links {
+  display: flex;
+  flex-direction: row; /* Horizontal layout looks more like a dashboard */
+  gap: 1.5rem;
+  justify-content: center;
+  margin-top: 2rem;
+}
+
+.navCard {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem 2rem;
+  min-width: 180px;
+  background-color: #ffffff;
+  color: #333;
+  text-decoration: none;
+  font-weight: 600;
+  border-radius: 12px;
+  border: 1px solid #e0e0e0;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
+  transition: all 0.2s ease-in-out;
+}
+
+/* Hover effects */
+.navCard:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
+  border-color: #ffcd00; /* UU Yellow accent */
+  color: #000;
+}
+
+/* Specific styling for the logo container */
+.logoPepperScaling {
+  display: flex;
+  justify-content: center;
+  transition: transform 0.3s ease;
+}
+
+.logoPepperScaling:hover {
+  transform: scale(1.05);
+}
+
+.logopepper {
+  height: 120px;
+  width: auto;
 }
--- a/src/pages/Home/Home.tsx
+++ b/src/pages/Home/Home.tsx
@@ -16,15 +16,20 @@ import styles from './Home.module.css'
 function Home() {
  return (
    <div className={`flex-col ${styles.gapXl}`}>
-      <div className="logoPepperScaling">
-        <a href="https://git.science.uu.nl/ics/sp/2025/n25b" target="_blank">
-          <img src={pepperLogo} className="logopepper" alt="Pepper logo" />
+      <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" />
        </a>
      </div>
+      
      <div className={styles.links}>
-        <Link to={"/robot"}>Robot Interaction →</Link>
-        <Link to={"/editor"}>Editor →</Link>
-        <Link to={"/ConnectedRobots"}>Connected Robots →</Link>
+        {/* 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>
      </div>
    </div>
  )
--- a/src/pages/Manuals/Manuals.module.css
+++ b/src/pages/Manuals/Manuals.module.css
@@ -0,0 +1,81 @@
+/* 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
@@ -0,0 +1,39 @@
+// 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
@@ -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)
-*/}
+*/
 .dashboardContainer {
  display: grid;
  grid-template-columns: 2fr 1fr; /* Left = content, Right = logs */
@@ -98,6 +98,11 @@ 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
@@ -6,17 +6,18 @@ import styles from './MonitoringPage.module.css';

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

@@ -26,12 +27,12 @@ import type { GoalNode } from '../VisProgPage/visualProgrammingUI/nodes/GoalNode
 import type { TriggerNode } from '../VisProgPage/visualProgrammingUI/nodes/TriggerNode';

 // Sub-components
-import { 
-  GestureControls, 
-  SpeechPresets, 
-  DirectSpeechInput, 
-  StatusList, 
-  RobotConnected 
+import {
+  GestureControls,
+  SpeechPresets,
+  DirectSpeechInput,
+  StatusList,
+  RobotConnected
 } from './MonitoringPageComponents';
 import ExperimentLogs from "./components/ExperimentLogs.tsx";

@@ -76,7 +77,7 @@ function useExperimentLogic() {
          setGoalIndex(0);
        }
      }
-    } 
+    }
    else if (data.type === 'goal_update') {
      const payload = data as GoalUpdate;
      const currentPhaseGoals = getGoalsInPhase(phaseIds[phaseIndex]) as GoalNode[];
@@ -97,7 +98,7 @@ function useExperimentLogic() {
          return nextState;
        });
      }
-    } 
+    }
    else if (data.type === 'trigger_update') {
      const payload = data as TriggerUpdate;
      setActiveIds((prev) => ({ ...prev, [payload.id]: payload.achieved }));
@@ -111,7 +112,7 @@ function useExperimentLogic() {
    setActiveIds((prev) => {
      const hasChanges = payload.norms.some((u) => prev[u.id] !== u.active);
      if (!hasChanges) return prev;
-      
+
      const nextState = { ...prev };
      payload.norms.forEach((u) => { nextState[u.id] = u.active; });
      return nextState;
@@ -144,7 +145,7 @@ function useExperimentLogic() {
    }
  }, [setProgramState]);

-  const handleControlAction = async (action: "pause" | "play" | "nextPhase") => {
+  const handleControlAction = async (action: "pause" | "play" | "nextPhase" | "stop") => {
    try {
      setLoading(true);
      switch (action) {
@@ -159,6 +160,9 @@ function useExperimentLogic() {
        case "nextPhase":
          await nextPhase();
          break;
+        case "stop":
+          await stopExperiment();
+          break;
      }
    } catch (err) {
      console.error(err);
@@ -189,14 +193,14 @@ function useExperimentLogic() {
 /**
 * Visual indicator of progress through experiment phases.
 */
-function PhaseProgressBar({ 
-  phaseIds, 
-  phaseIndex, 
-  isFinished 
-}: { 
-  phaseIds: string[], 
-  phaseIndex: number, 
-  isFinished: boolean 
+function PhaseProgressBar({
+  phaseIds,
+  phaseIndex,
+  isFinished
+}: {
+  phaseIds: string[],
+  phaseIndex: number,
+  isFinished: boolean
 }) {
  return (
    <div className={styles.phaseProgress}>
@@ -218,16 +222,16 @@ function PhaseProgressBar({
 /**
 * Main control buttons (Play, Pause, Next, Reset).
 */
-function ControlPanel({ 
-  loading, 
-  isPlaying, 
-  onAction, 
-  onReset 
-}: { 
-  loading: boolean, 
-  isPlaying: boolean, 
-  onAction: (a: "pause" | "play" | "nextPhase") => void,
-  onReset: () => void 
+function ControlPanel({
+  loading,
+  isPlaying,
+  onAction,
+  onReset
+}: {
+  loading: boolean,
+  isPlaying: boolean,
+  onAction: (a: "pause" | "play" | "nextPhase" | "stop") => void,
+  onReset: () => void
 }) {
  return (
    <div className={styles.experimentControls}>
@@ -245,17 +249,23 @@ function ControlPanel({
          disabled={loading}
        >▶</button>

-        <button 
-          className={styles.next} 
-          onClick={() => onAction("nextPhase")} 
+        <button
+          className={styles.next}
+          onClick={() => onAction("nextPhase")}
          disabled={loading}
        >⏭</button>

-        <button 
-          className={styles.restartExperiment} 
-          onClick={onReset} 
+        <button
+          className={styles.restartExperiment}
+          onClick={onReset}
          disabled={loading}
        >⟲</button>
+
+        <button
+          className={styles.stop}
+          onClick={() => onAction("stop")}
+          disabled={loading}
+        >⏹</button>
      </div>
    </div>
  );
@@ -353,11 +363,11 @@ const MonitoringPage: React.FC = () => {
          <PhaseProgressBar phaseIds={phaseIds} phaseIndex={phaseIndex} isFinished={isFinished} />
        </div>

-        <ControlPanel 
-          loading={loading} 
-          isPlaying={isPlaying} 
-          onAction={handleControlAction} 
-          onReset={resetExperiment} 
+        <ControlPanel
+          loading={loading}
+          isPlaying={isPlaying}
+          onAction={handleControlAction}
+          onReset={resetExperiment}
        />

        <div className={styles.connectionStatus}>
@@ -370,17 +380,17 @@ const MonitoringPage: React.FC = () => {
        <section className={styles.phaseOverviewText}>
          <h3>Phase Overview</h3>
        </section>
-        
+
        {isFinished ? (
          <div className={styles.finishedMessage}>
            <p>All phases have been successfully completed.</p>
          </div>
        ) : (
-          <PhaseDashboard 
-            phaseId={phaseIds[phaseIndex]} 
-            activeIds={activeIds} 
-            setActiveIds={setActiveIds} 
-            goalIndex={goalIndex} 
+          <PhaseDashboard
+            phaseId={phaseIds[phaseIndex]}
+            activeIds={activeIds}
+            setActiveIds={setActiveIds}
+            goalIndex={goalIndex}
          />
        )}
      </main>
@@ -398,4 +408,4 @@ const MonitoringPage: React.FC = () => {
  );
 }

-export default MonitoringPage;
+export default MonitoringPage;
--- a/src/pages/MonitoringPage/MonitoringPageAPI.ts
+++ b/src/pages/MonitoringPage/MonitoringPageAPI.ts
@@ -2,16 +2,14 @@
 // University within the Software Project course.
 // © Copyright Utrecht University (Department of Information and Computing Sciences)
 import React, { useEffect } from 'react';
-
-const API_BASE = "http://localhost:8000";
-const API_BASE_BP = API_BASE + "/button_pressed"; //UserInterruptAgent endpoint
+import { API_BASE_URL } from '../../config/api.ts';

 /**
 * HELPER: Unified sender function
 */
 export const sendAPICall = async (type: string, context: string, endpoint?: string) => {
  try {
-    const response = await fetch(`${API_BASE_BP}${endpoint ?? ""}`, {
+    const response = await fetch(`${API_BASE_URL}/button_pressed${endpoint ?? ""}`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ type, context }),
@@ -34,6 +32,12 @@ 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
@@ -76,7 +80,7 @@ export function useExperimentLogger(onUpdate?: (data: ExperimentStreamData) => v

  useEffect(() => {
    console.log("Connecting to Experiment Stream...");
-    const eventSource = new EventSource(`${API_BASE}/experiment_stream`);
+    const eventSource = new EventSource(`${API_BASE_URL}/experiment_stream`);

    eventSource.onmessage = (event) => {
      try {
@@ -97,14 +101,14 @@ export function useExperimentLogger(onUpdate?: (data: ExperimentStreamData) => v
      console.log("Closing Experiment Stream...");
      eventSource.close();
    };
-  }, []); 
+  }, []);
 }

 /**
 * A hook that listens to the status stream that updates active conditional norms
 * via updates sent from the backend
 */
-export function useStatusLogger(onUpdate?: (data: ExperimentStreamData)  => void) {
+export function useStatusLogger(onUpdate?: (data: ExperimentStreamData) => void) {
  const callbackRef = React.useRef(onUpdate);

  React.useEffect(() => {
@@ -112,7 +116,7 @@ export function useStatusLogger(onUpdate?: (data: ExperimentStreamData)  => void
  }, [onUpdate]);

  useEffect(() => {
-    const eventSource = new EventSource(`${API_BASE}/status_stream`);
+    const eventSource = new EventSource(`${API_BASE_URL}/status_stream`);
    eventSource.onmessage = (event) => {
      try {
        const parsedData = JSON.parse(event.data);
@@ -121,4 +125,4 @@ export function useStatusLogger(onUpdate?: (data: ExperimentStreamData)  => void
    };
    return () => eventSource.close();
  }, []);
-}
+}
--- a/src/pages/MonitoringPage/MonitoringPageComponents.tsx
+++ b/src/pages/MonitoringPage/MonitoringPageComponents.tsx
@@ -4,6 +4,7 @@
 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 = () => {
@@ -201,7 +202,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("http://localhost:8000/robot/ping_stream");
+      const eventSource = new EventSource(`${API_BASE_URL}/robot/ping_stream`);
      eventSource.onmessage = (event) => {
      
        // Expecting messages in JSON format: `true` or `false`
@@ -232,4 +233,4 @@ export const RobotConnected = () => {
    <p className={connected ? styles.connected : styles.disconnected }>{connected ? "● Robot is connected" : "● Robot is disconnected"}</p>
  </div>
  )
-}
+}
--- a/src/pages/MonitoringPage/components/ExperimentLogs.module.css
+++ b/src/pages/MonitoringPage/components/ExperimentLogs.module.css
@@ -1,3 +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)
+*/
 .logs {
  /* grid-area used in MonitoringPage.module.css */
  grid-area: logs;
--- a/src/pages/MonitoringPage/components/ExperimentLogs.tsx
+++ b/src/pages/MonitoringPage/components/ExperimentLogs.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)
 import styles from "./ExperimentLogs.module.css";
 import {LogMessages} from "../../../components/Logging/Logging.tsx";
 import {useEffect, useMemo, useState} from "react";
@@ -14,6 +17,7 @@ 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.
@@ -107,7 +111,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={`http://localhost:8000/api/logs/files/${filename}`} download={filename}>{filename}</a></li>
+        <li><a key={filename} href={`${API_BASE_URL}/api/logs/files/${filename}`} download={filename}>{filename}</a></li>
      ))}
    </ol>;
  })();
@@ -127,7 +131,7 @@ function DownloadButton() {
  const [filenames, setFilenames] = useState<string[] | null>(null);

  async function getFiles(): Promise<string[]> {
-    const response = await fetch("http://localhost:8000/api/logs/files");
+    const response = await fetch(`${API_BASE_URL}/api/logs/files`);
    const files = await response.json();
    files.sort();
    return files;
@@ -183,4 +187,4 @@ export default function ExperimentLogs() {
    </div>
    <LogMessages recordCells={filteredLogs} MessageComponent={ExperimentMessage} />
  </aside>;
-}
+}
--- a/src/pages/Robot/Robot.tsx
+++ b/src/pages/Robot/Robot.tsx
@@ -1,133 +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 { 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/VisProg.module.css
+++ b/src/pages/VisProgPage/VisProg.module.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)
-*/}
+*/
 /* editor UI */

 .inner-editor-container {
--- a/src/pages/VisProgPage/VisProgLogic.ts
+++ b/src/pages/VisProgPage/VisProgLogic.ts
@@ -6,6 +6,7 @@ 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
@@ -28,7 +29,7 @@ export function runProgram() {
  const program = {phases}
  console.log(JSON.stringify(program, null, 2));
  fetch(
-    "http://localhost:8000/program",
+    `${API_BASE_URL}/program`,
    {
      method: "POST",
      headers: {"Content-Type": "application/json"},
@@ -43,4 +44,4 @@ export function runProgram() {
    useProgramStore.getState().setProgramState(structuredClone(program));
  }).catch(() => console.log("Failed to send program to the backend."));
  console.log(program);
-}
+}
--- a/src/pages/VisProgPage/visualProgrammingUI/VisProgStores.tsx
+++ b/src/pages/VisProgPage/visualProgrammingUI/VisProgStores.tsx
@@ -90,9 +90,20 @@ const useFlowStore = create<FlowState>(UndoRedo((set, get) => ({
   */
  onNodesChange: (changes) => set({nodes: applyNodeChanges(changes, get().nodes)}),

-  onNodesDelete: (nodes) => nodes.forEach((_node) => {
-    return;
-  }),
+  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);
+  },

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

  /**
   * Adds a new node to the flow store.
--- a/src/pages/VisProgPage/visualProgrammingUI/VisProgTypes.tsx
+++ b/src/pages/VisProgPage/visualProgrammingUI/VisProgTypes.tsx
@@ -96,6 +96,11 @@ 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,6 +23,8 @@ 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/GestureValueEditor.module.css
+++ b/src/pages/VisProgPage/visualProgrammingUI/components/GestureValueEditor.module.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)
-*/}
+*/
 .gestureEditor {
  display: flex;
  flex-direction: column;
--- a/src/pages/VisProgPage/visualProgrammingUI/components/PlanEditor.module.css
+++ b/src/pages/VisProgPage/visualProgrammingUI/components/PlanEditor.module.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)
-*/}
+*/
 .planDialog {
  overflow:visible;
  width: 80vw;
--- a/src/pages/VisProgPage/visualProgrammingUI/components/RuleBasedHandle.module.css
+++ b/src/pages/VisProgPage/visualProgrammingUI/components/RuleBasedHandle.module.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)
-*/}
+*/
 :global(.react-flow__handle.source){
    border-radius: 100%;
 }
--- a/src/pages/VisProgPage/visualProgrammingUI/components/SaveLoadPanel.module.css
+++ b/src/pages/VisProgPage/visualProgrammingUI/components/SaveLoadPanel.module.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)
-*/}
+*/
 .save-load-panel {
  border-radius: 0 0 5pt 5pt;
  background-color: canvas;
--- a/src/pages/VisProgPage/visualProgrammingUI/components/WarningSidebar.module.css
+++ b/src/pages/VisProgPage/visualProgrammingUI/components/WarningSidebar.module.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)
-*/}
+*/
 .warnings-sidebar {
    min-width: auto;
    max-width: 340px;
--- a/src/pages/VisProgPage/visualProgrammingUI/nodes/GoalNode.tsx
+++ b/src/pages/VisProgPage/visualProgrammingUI/nodes/GoalNode.tsx
@@ -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,12 +81,31 @@ 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){
+    if (!data.plan || data.plan.steps?.length === 0){
      registerWarning(noPlanWarning);
      return;
    }
    unregisterWarning(id, noPlanWarning.type);
  },[data.plan, id, registerWarning, unregisterWarning])
+
+  //starts with number warning
+  useEffect(() => {
+      const name = data.name || "";
+      
+      const startsWithNumberWarning: EditorWarning = {
+        scope: { id: id },
+        type: 'ELEMENT_STARTS_WITH_NUMBER',
+        severity: 'ERROR',
+        description: "Norms are not allowed to start with a number."
+      };
+  
+      if (/^\d/.test(name)) {
+        registerWarning(startsWithNumberWarning);
+      } else {
+        unregisterWarning(id, 'ELEMENT_STARTS_WITH_NUMBER');
+      }
+    }, [data.name, id, registerWarning, unregisterWarning]);
+  
  return <>
    <Toolbar nodeId={id} allowDelete={true}/>
    <div className={`${styles.defaultNode} ${styles.nodeGoal} flex-col gap-sm`}>
--- a/src/pages/VisProgPage/visualProgrammingUI/nodes/InferredBeliefNode.module.css
+++ b/src/pages/VisProgPage/visualProgrammingUI/nodes/InferredBeliefNode.module.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)
-*/}
+*/
 .operator-switch {
    display: inline-flex;
    align-items: center;
--- a/src/pages/VisProgPage/visualProgrammingUI/nodes/NormNode.tsx
+++ b/src/pages/VisProgPage/visualProgrammingUI/nodes/NormNode.tsx
@@ -1,6 +1,8 @@
 // This program has been developed by students from the bachelor Computer Science at Utrecht
 // University within the Software Project course.
 // © Copyright Utrecht University (Department of Information and Computing Sciences)
+import { useEffect } from "react";
+import type { EditorWarning } from "../components/EditorWarnings.tsx";
 import {
  type NodeProps,
  Position,
@@ -39,7 +41,7 @@ export type NormNode = Node<NormNodeData>
 */
 export default function NormNode(props: NodeProps<NormNode>) {
  const data = props.data;
-  const {updateNodeData} = useFlowStore();
+  const {updateNodeData, registerWarning, unregisterWarning} = useFlowStore();

  const text_input_id = `norm_${props.id}_text_input`;
  const checkbox_id = `goal_${props.id}_checkbox`;
@@ -47,10 +49,44 @@ 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."
+    };

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

  return <>
    <Toolbar nodeId={props.id} allowDelete={true}/>
@@ -64,7 +100,10 @@ export default function NormNode(props: NodeProps<NormNode>) {
          placeholder={"Pepper should ..."}
        />
      </div>
-      <div className={"flex-row gap-md align-center"}>
+      {/*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"}>
        <label htmlFor={checkbox_id}>Critical:</label>
        <input
          id={checkbox_id}
@@ -72,7 +111,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
@@ -115,12 +115,27 @@ 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 && outputCons.length !== 0){
+    if ((!data.plan || data.plan.steps?.length === 0) && outputCons.length !== 0){
      registerWarning(noPlanWarning);
      return;
    }
    unregisterWarning(props.id, noPlanWarning.type);
  },[data.plan, outputCons.length, props.id, registerWarning, unregisterWarning])
+
+  useEffect(() => {
+  const name = data.name || "";
+  
+  if (/^\d/.test(name)) {
+    registerWarning({
+      scope: { id: props.id },
+      type: 'ELEMENT_STARTS_WITH_NUMBER',
+      severity: 'ERROR',
+      description: "Trigger names are not allowed to start with a number."
+    });
+  } else {
+    unregisterWarning(props.id, 'ELEMENT_STARTS_WITH_NUMBER');
+  }
+}, [data.name, props.id, registerWarning, unregisterWarning]);
  return <>

    <Toolbar nodeId={props.id} allowDelete={true}/>
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@@ -0,0 +1,11 @@
+/// <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,6 +6,7 @@ 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[]) =>
@@ -83,7 +84,7 @@ describe("useLogs (unit)", () => {
    );
    const es = (globalThis as any).__es as MockEventSource;
    expect(es).toBeTruthy();
-    expect(es.url).toBe("http://localhost:8000/logs/stream");
+    expect(es.url).toBe(`${API_BASE_URL}/logs/stream`);

    unmount();
    expect(es.close).toHaveBeenCalledTimes(1);
--- a/test/pages/connectedRobots/ConnectedRobots.test.tsx
+++ b/test/pages/connectedRobots/ConnectedRobots.test.tsx
@@ -1,107 +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 { 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,6 +10,7 @@ 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
@@ -72,7 +73,7 @@ describe('MonitoringPageAPI', () => {
      await sendAPICall('test_type', 'test_ctx');

      expect(globalThis.fetch).toHaveBeenCalledWith(
-        'http://localhost:8000/button_pressed',
+        `${API_BASE_URL}/button_pressed`,
        expect.objectContaining({
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
@@ -220,4 +221,4 @@ describe('MonitoringPageAPI', () => {
      expect(consoleSpy).toHaveBeenCalledWith('Status stream error:', expect.any(Error));
    });
  });
-});
+});
--- a/test/pages/robot/Robot.test.tsx
+++ b/test/pages/robot/Robot.test.tsx
@@ -1,170 +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 { 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,3 +648,46 @@ 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/nodes/NormNode.test.tsx
+++ b/test/pages/visProgPage/visualProgrammingUI/nodes/NormNode.test.tsx
@@ -699,15 +699,12 @@ 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/vite.config.ts
+++ b/vite.config.ts
@@ -4,6 +4,9 @@ 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
Kasper Marinus	b826b8ae47	Merge branch 'main' of ssh://git.twirre.io:2222/pepperplus/pepperplus-ui	2026-02-02 14:40:55 +01:00
Kasper Marinus	d8308b0d0b	chore: remove hooks	2026-02-02 14:40:34 +01:00
Kasper Marinus	af196529f8	chore: remove hooks	2026-02-02 14:39:20 +01:00
Kasper Marinus	901159ae2d	feat: stop experiment button	2026-02-02 14:39:07 +01:00
Kasper Marinus	4dcbe78abf	Merge branch 'chore/cleanup-frontpage' into 'main' chore: cleaned up front page See merge request ics/sp/2025/n25b/pepperplus-ui!56	2026-01-30 20:04:35 +00:00
Pim Hutting	f626a6571a	chore: add pdfs	2026-01-30 20:58:03 +01:00
Kasper Marinus	268199a825	Merge branch 'chore/more-warnings' into 'main' chore: added warnings See merge request ics/sp/2025/n25b/pepperplus-ui!54	2026-01-30 19:53:19 +00:00
Pim Hutting	84bb8c5ae8	Merge branch 'main' into chore/more-warnings	2026-01-30 19:52:06 +01:00
Pim Hutting	d3501cb063	chore: made updates delete on backspacke delete	2026-01-30 19:48:27 +01:00
Pim Hutting	00d605164c	chore: cleaned up front page note: pdfs are not added yet.	2026-01-30 13:55:46 +01:00
Kasper Marinus	7deecaa160	Merge branch 'chore/remove-critical-norm' into 'main' Chore/remove critical norm See merge request ics/sp/2025/n25b/pepperplus-ui!55	2026-01-30 11:59:07 +00:00
Pim Hutting	72993b7576	chore: removed critical norm from UI	2026-01-30 12:54:26 +01:00
Pim Hutting	4fa3946a10	Merge branch 'main' into chore/remove-critical-norm	2026-01-30 12:45:42 +01:00
Kasper Marinus	07ad746c9d	Merge branch 'main' into chore/more-warnings	2026-01-30 12:43:52 +01:00
Pim Hutting	55fa4f3a8b	chore: removed critical norm from UI	2026-01-30 12:42:24 +01:00
Kasper Marinus	d919eb8471	Merge branch 'feat/environment-variables' into 'main' Introduce backend URL environment variable See merge request ics/sp/2025/n25b/pepperplus-ui!53	2026-01-30 11:41:12 +00:00
Kasper Marinus	c0e8331fbf	Merge branch 'fix/comment-fix' into 'main' chore: fixed a comment See merge request ics/sp/2025/n25b/pepperplus-ui!52	2026-01-30 11:40:51 +00:00
Pim Hutting	d514c2ef50	chore: added warnings Warning 1: if elements have the same name, show a warning. Warning 2: if a goal/triggerNode has no/empty plan, show a warning. Warning 3: if (non-phase) elements start with or are a number, show a warning.	2026-01-30 12:31:09 +01:00
Twirre Meulenbelt	179b8fd75b	chore: remove last curly brackets	2026-01-29 17:42:13 +01:00
Twirre Meulenbelt	4395e44dbf	feat: introduce backend url environment variable ref: N25B-352	2026-01-29 17:40:49 +01:00
Pim Hutting	e3abf8c14a	chore: removed curly brackets from css comments	2026-01-29 16:31:21 +01:00
Pim Hutting	1b9dddcbf2	chore: fixed a comment	2026-01-29 14:57:45 +01:00
Kasper Marinus	378a64c7ca	Merge branch 'dev' into 'main' Merging dev into main See merge request ics/sp/2025/n25b/pepperplus-ui!49	2026-01-28 10:48:51 +00:00
Kasper Marinus	cca98dbebe	Merge branch 'dev' into 'main' Add installation and run instructions to README See merge request ics/sp/2025/n25b/pepperplus-ui!4	2025-09-30 11:50:36 +00:00