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
143 changed files with 3402 additions and 874 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,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)
+*/
 .logopepper {
  height: 8em;
  padding: 1.5em;
@@ -161,7 +166,13 @@ input[type="checkbox"] {
 .margin-0 {
  margin: 0;
 }
+.margin-lg {
+  margin: 1rem;
+}

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

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

+.relative {
+  position: relative;
+}

 .clickable {
  cursor: pointer;
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,30 +1,31 @@
+// This program has been developed by students from the bachelor Computer Science at Utrecht
+// University within the Software Project course.
+// © Copyright Utrecht University (Department of Information and Computing Sciences)
 import { Routes, Route, Link } from 'react-router'
 import './App.css'
-import TemplatePage from './pages/TemplatePage/Template.tsx'
 import Home from './pages/Home/Home.tsx'
-import 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";

+
 function App(){
  const [showLogs, setShowLogs] = useState(false);

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

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

--- a/src/components/Logging/Logging.module.css
+++ b/src/components/Logging/Logging.module.css
@@ -1,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)
+*/
 .logging-container {
  box-sizing: border-box;

@@ -5,7 +10,6 @@
  flex-shrink: 0;

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

 .no-numbers {
@@ -15,8 +19,6 @@
 }

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

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

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

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

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

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

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

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

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

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

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

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

 /**
 * A log filter predicate with priority support, used to determine whether
@@ -194,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/MultilineTextField.tsx
+++ b/src/components/MultilineTextField.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 { useEffect, useRef, useState } from "react";
 import styles from "./TextField.module.css";

--- a/src/components/ScrollIntoView.tsx
+++ b/src/components/ScrollIntoView.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 {useEffect, useRef} from "react";

 /**
--- a/src/components/TextField.module.css
+++ b/src/components/TextField.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)
+*/
 .text-field {
  border: 1px solid transparent;
  border-radius: 5pt;
--- a/src/components/TextField.tsx
+++ b/src/components/TextField.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 {useEffect, useState} from "react";
 import styles from "./TextField.module.css";

--- a/src/components/components.tsx
+++ b/src/components/components.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 { useState } from 'react'

 /**
--- 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,3 +1,9 @@
+/*
+This program has been developed by students from the bachelor Computer Science at Utrecht
+University within the Software Project course.
+© Copyright Utrecht University (Department of Information and Computing Sciences)
+*/
+
 :root {
  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
@@ -8,6 +14,9 @@
  background-color: #242424;

  --accent-color: #008080;
+  --panel-shadow:
+      0 1px 2px white,
+      0 8px 24px rgba(190, 186, 186, 0.253);

  font-synthesis: none;
  text-rendering: optimizeLegibility;
@@ -15,6 +24,14 @@
  -moz-osx-font-smoothing: grayscale;
 }

+@media (prefers-color-scheme: dark) {
+  :root {
+    --panel-shadow:
+      0 1px 2px rgba(221, 221, 221, 0.178),
+      0 8px 24px rgba(27, 27, 27, 0.507);
+  }
+}
+
 html, body, #root {
  margin: 0;
  padding: 0;
@@ -41,7 +58,7 @@ button {
  font-size: 1em;
  font-weight: 500;
  font-family: inherit;
-  background-color: #1a1a1a;
+  background-color: canvas;
  cursor: pointer;
  transition: border-color 0.25s;
 }
@@ -64,9 +81,6 @@ button:focus-visible {
    --dropdown-menu-background-color: rgb(247, 247, 247);
    --dropdown-menu-border: rgba(207, 207, 207, 0.986);
  }
-  button {
-    background-color: #f9f9f9;
-  }
 }

@media (prefers-color-scheme: dark) {
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,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 { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import { BrowserRouter } from 'react-router'
--- a/src/pages/ConnectedRobots/ConnectedRobots.tsx
+++ b/src/pages/ConnectedRobots/ConnectedRobots.tsx
@@ -1,60 +0,0 @@
-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,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)
+*/
 .read_the_docs {
  color: #888;
 }
@@ -22,3 +27,51 @@
  flex-direction: column;
  gap: 1em;
 }
+
+.links {
+  display: flex;
+  flex-direction: row; /* Horizontal layout looks more like a dashboard */
+  gap: 1.5rem;
+  justify-content: center;
+  margin-top: 2rem;
+}
+
+.navCard {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem 2rem;
+  min-width: 180px;
+  background-color: #ffffff;
+  color: #333;
+  text-decoration: none;
+  font-weight: 600;
+  border-radius: 12px;
+  border: 1px solid #e0e0e0;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
+  transition: all 0.2s ease-in-out;
+}
+
+/* Hover effects */
+.navCard:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
+  border-color: #ffcd00; /* UU Yellow accent */
+  color: #000;
+}
+
+/* Specific styling for the logo container */
+.logoPepperScaling {
+  display: flex;
+  justify-content: center;
+  transition: transform 0.3s ease;
+}
+
+.logoPepperScaling:hover {
+  transform: scale(1.05);
+}
+
+.logopepper {
+  height: 120px;
+  width: auto;
+}
--- a/src/pages/Home/Home.tsx
+++ b/src/pages/Home/Home.tsx
@@ -1,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 { Link } from 'react-router'
 import pepperLogo from '../../assets/pepper_transp2_small.svg'
 import styles from './Home.module.css'
@@ -13,16 +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={"/template"}>Template →</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
@@ -0,0 +1,276 @@
+/*
+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 */
+  grid-template-rows: auto 1fr auto; /* Header, Main, Footer */
+  grid-template-areas:
+    "header logs"
+    "main logs"
+    "footer footer";
+  gap: 1rem;
+  padding: 1rem;
+  background-color: var(--bg-main);
+  color: var(--text-main);
+  font-family: Arial, sans-serif;
+}
+
+/* HEADER */
+.experimentOverview {
+  grid-area: header;
+  display: flex;
+  color: color;
+  justify-content: space-between;
+  align-items: flex-start;
+  background: var(--bg-surface);
+  color: var(--text-main);
+  box-shadow: var(--shadow);
+  padding: 1rem;
+  box-shadow: var(--panel-shadow);
+  position: static; /* ensures it scrolls away */
+}
+
+.controlsButtons {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  gap: .25rem;
+  max-width: 260px;
+  flex-wrap: wrap;
+
+  button {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}
+
+.phaseProgress {
+  margin-top: 0.5rem;
+}
+
+.phase {
+  display: inline-block;
+  width: 25px;
+  height: 25px;
+  margin: 0 3px;
+  text-align: center;
+  line-height: 25px;
+  background: gray;
+}
+
+.completed {
+  background-color: green;
+  color: white;
+}
+
+.current {
+  background-color: rgb(255, 123, 0);
+  color: white;
+}
+
+.connected {
+  color: green;
+  font-weight: bold;
+}
+
+.disconnected {
+  color: red;
+  font-weight: bold;
+}
+
+.pausePlayInactive{
+  background-color: gray;
+  color: white;
+}
+
+.pausePlayActive{
+  background-color: green;
+  color: white;
+}
+
+.next {
+  background-color: #6c757d;
+  color: white;
+}
+
+.stop {
+  background-color: red;
+  color: white;
+}
+
+.restartExperiment{
+  background-color: red;
+  color: white;
+}
+
+/* MAIN GRID */
+.phaseOverview {
+  grid-area: main;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: repeat(2, auto);
+  gap: 1rem;
+  background: var(--bg-surface);
+  color: var(--text-main);
+  padding: 1rem;
+  box-shadow: var(--panel-shadow);
+  
+}
+
+.phaseBox {
+  background: var(--bg-surface);
+  border: 1px solid var(--border-color);
+  box-shadow: var(--panel-shadow);
+  padding: 1rem;
+  display: flex;         
+  flex-direction: column;
+  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.05);
+  
+  height: 250px;   
+}
+
+.phaseBox ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  
+  overflow-y: auto;       
+  flex-grow: 1;          
+  
+
+}
+
+.phaseBox ul::-webkit-scrollbar {
+  width: 6px;
+}
+
+.phaseBox ul::-webkit-scrollbar-thumb {
+  background-color: #ccc;
+  border-radius: 10px;
+}
+
+.phaseOverviewText {
+  grid-column: 1 / -1; /* make the title span across both columns */
+  font-size: 1.4rem;
+  font-weight: 600;
+  margin: 0;            /* remove default section margin */
+  padding: 0.25rem 0;   /* smaller internal space */
+}
+
+.phaseOverviewText h3{
+  margin: 0;            /* removes top/bottom whitespace */
+  padding: 0;           /* keeps spacing tight */
+}
+
+.phaseBox h3 {
+  margin-top: 0;
+  border-bottom: 1px solid var(--border-color);
+  padding-bottom: 0.4rem;
+}
+
+.checked::before {
+  content: '✔️ ';
+}
+
+.statusIndicator {
+  display: inline-block;
+  margin-right: 10px;
+  user-select: none; 
+  transition: transform 0.1s ease;
+  font-size: 1.1rem;
+}
+
+.statusIndicator.clickable {
+  cursor: pointer;
+}
+
+.statusIndicator.clickable:hover {
+  transform: scale(1.2);
+}
+
+.clickable {
+  cursor: pointer;
+}
+
+.clickable:hover {
+  transform: scale(1.2);
+}
+
+.active {
+  opacity: 1;
+}
+
+.statusItem {
+  display: flex;
+  align-items: center;
+  margin-bottom: 0.4rem;
+}
+
+.itemDescription {
+  line-height: 1.4;
+}
+
+/* FOOTER */
+.controlsSection {
+  grid-area: footer;
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  background: var(--bg-surface);
+  color: var(--text-main);
+  box-shadow: var(--panel-shadow);
+  padding: 1rem;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+}
+
+.controlsSection button {
+  background: var(--bg-surface);
+  box-shadow: var(--panel-shadow);
+  margin-top: 0.5rem;
+  margin-left: 0.5rem;
+}
+
+.gestures,
+.speech,
+.directSpeech {
+  flex: 1;
+}
+
+.speechInput {
+  display: flex;
+  margin-top: 0.5rem;
+}
+
+.speechInput input {
+  flex: 1;
+  padding: 0.5rem;
+  background-color: Canvas;
+  color: CanvasText;
+  border: 1px solid var(--border-color);
+}
+
+.speechInput button {
+  color: white;
+  border: none;
+  padding: 0.5rem 1rem;
+  cursor: pointer;
+  background-color: Canvas;
+  color: CanvasText;
+  border: 1px solid var(--border-color);
+}
+
+/* RESPONSIVE */
+@media (max-width: 900px) {
+  .phaseOverview {
+    grid-template-columns: 1fr;
+  }
+
+  .controlsSection {
+    flex-direction: column;
+  }
+}
--- a/src/pages/MonitoringPage/MonitoringPage.tsx
+++ b/src/pages/MonitoringPage/MonitoringPage.tsx
@@ -0,0 +1,411 @@
+// This program has been developed by students from the bachelor Computer Science at Utrecht
+// University within the Software Project course.
+// © Copyright Utrecht University (Department of Information and Computing Sciences)
+import React, { useCallback, useState } from 'react';
+import styles from './MonitoringPage.module.css';
+
+// Store & API
+import useProgramStore from "../../utils/programStore";
+import {
+  nextPhase,
+  stopExperiment,
+  useExperimentLogger,
+  useStatusLogger,
+  pauseExperiment,
+  playExperiment,
+  type ExperimentStreamData,
+  type GoalUpdate,
+  type TriggerUpdate,
+  type CondNormsStateUpdate,
+  type PhaseUpdate
+} from "./MonitoringPageAPI";
+import { graphReducer, runProgram } from '../VisProgPage/VisProgLogic.ts';
+
+// Types
+import type { NormNodeData } from '../VisProgPage/visualProgrammingUI/nodes/NormNode';
+import type { GoalNode } from '../VisProgPage/visualProgrammingUI/nodes/GoalNode';
+import type { TriggerNode } from '../VisProgPage/visualProgrammingUI/nodes/TriggerNode';
+
+// Sub-components
+import {
+  GestureControls,
+  SpeechPresets,
+  DirectSpeechInput,
+  StatusList,
+  RobotConnected
+} from './MonitoringPageComponents';
+import ExperimentLogs from "./components/ExperimentLogs.tsx";
+
+// ----------------------------------------------------------------------
+// 1. State management
+// ----------------------------------------------------------------------
+
+/**
+ * Manages the state of the active experiment, including phase progression,
+ * goal tracking, and stream event listeners.
+ */
+function useExperimentLogic() {
+  const getPhaseIds = useProgramStore((s) => s.getPhaseIds);
+  const getPhaseNames = useProgramStore((s) => s.getPhaseNames);
+  const getGoalsInPhase = useProgramStore((s) => s.getGoalsInPhase);
+  const setProgramState = useProgramStore((state) => state.setProgramState);
+
+  const [loading, setLoading] = useState(false);
+  const [activeIds, setActiveIds] = useState<Record<string, boolean>>({});
+  const [goalIndex, setGoalIndex] = useState(0);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [phaseIndex, setPhaseIndex] = useState(0);
+  const [isFinished, setIsFinished] = useState(false);
+
+  const phaseIds = getPhaseIds();
+  const phaseNames = getPhaseNames();
+
+  // --- Stream Handlers ---
+
+  const handleStreamUpdate = useCallback((data: ExperimentStreamData) => {
+    if (data.type === 'phase_update' && data.id) {
+      const payload = data as PhaseUpdate;
+      console.log(`${data.type} received, id : ${data.id}`);
+
+      if (payload.id === "end") {
+        setIsFinished(true);
+      } else {
+        setIsFinished(false);
+        const newIndex = getPhaseIds().indexOf(payload.id);
+        if (newIndex !== -1) {
+          setPhaseIndex(newIndex);
+          setGoalIndex(0);
+        }
+      }
+    }
+    else if (data.type === 'goal_update') {
+      const payload = data as GoalUpdate;
+      const currentPhaseGoals = getGoalsInPhase(phaseIds[phaseIndex]) as GoalNode[];
+      const gIndex = currentPhaseGoals.findIndex((g) => g.id === payload.id);
+
+      console.log(`${data.type} received, id : ${data.id}`);
+
+      if (gIndex === -1) {
+        console.warn(`Goal ${payload.id} not found in phase ${phaseNames[phaseIndex]}`);
+      } else {
+        setGoalIndex(gIndex);
+        // Mark all previous goals as achieved
+        setActiveIds((prev) => {
+          const nextState = { ...prev };
+          for (let i = 0; i < gIndex; i++) {
+            nextState[currentPhaseGoals[i].id] = true;
+          }
+          return nextState;
+        });
+      }
+    }
+    else if (data.type === 'trigger_update') {
+      const payload = data as TriggerUpdate;
+      setActiveIds((prev) => ({ ...prev, [payload.id]: payload.achieved }));
+    }
+  }, [getPhaseIds, getGoalsInPhase, phaseIds, phaseIndex, phaseNames]);
+
+  const handleStatusUpdate = useCallback((data: unknown) => {
+    const payload = data as CondNormsStateUpdate;
+    if (payload.type !== 'cond_norms_state_update') return;
+
+    setActiveIds((prev) => {
+      const hasChanges = payload.norms.some((u) => prev[u.id] !== u.active);
+      if (!hasChanges) return prev;
+
+      const nextState = { ...prev };
+      payload.norms.forEach((u) => { nextState[u.id] = u.active; });
+      return nextState;
+    });
+  }, []);
+
+  // Connect listeners
+  useExperimentLogger(handleStreamUpdate);
+  useStatusLogger(handleStatusUpdate);
+
+  // --- Actions ---
+
+  const resetExperiment = useCallback(async () => {
+    try {
+      setLoading(true);
+      const phases = graphReducer();
+      setProgramState({ phases });
+
+      setActiveIds({});
+      setPhaseIndex(0);
+      setGoalIndex(0);
+      setIsFinished(false);
+
+      await runProgram();
+      console.log("Experiment & UI successfully reset.");
+    } catch (err) {
+      console.error("Failed to reset program:", err);
+    } finally {
+      setLoading(false);
+    }
+  }, [setProgramState]);
+
+  const handleControlAction = async (action: "pause" | "play" | "nextPhase" | "stop") => {
+    try {
+      setLoading(true);
+      switch (action) {
+        case "pause":
+          setIsPlaying(false);
+          await pauseExperiment();
+          break;
+        case "play":
+          setIsPlaying(true);
+          await playExperiment();
+          break;
+        case "nextPhase":
+          await nextPhase();
+          break;
+        case "stop":
+          await stopExperiment();
+          break;
+      }
+    } catch (err) {
+      console.error(err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return {
+    loading,
+    isPlaying,
+    isFinished,
+    phaseIds,
+    phaseNames,
+    phaseIndex,
+    goalIndex,
+    activeIds,
+    setActiveIds,
+    resetExperiment,
+    handleControlAction,
+  };
+}
+
+// ----------------------------------------------------------------------
+// 2. Smaller Presentation Components
+// ----------------------------------------------------------------------
+
+/**
+ * Visual indicator of progress through experiment phases.
+ */
+function PhaseProgressBar({
+  phaseIds,
+  phaseIndex,
+  isFinished
+}: {
+  phaseIds: string[],
+  phaseIndex: number,
+  isFinished: boolean
+}) {
+  return (
+    <div className={styles.phaseProgress}>
+      {phaseIds.map((id, index) => {
+        let statusClass = "";
+        if (isFinished || index < phaseIndex) statusClass = styles.completed;
+        else if (index === phaseIndex) statusClass = styles.current;
+
+        return (
+          <span key={id} className={`${styles.phase} ${statusClass}`}>
+            {index + 1}
+          </span>
+        );
+      })}
+    </div>
+  );
+}
+
+/**
+ * Main control buttons (Play, Pause, Next, Reset).
+ */
+function ControlPanel({
+  loading,
+  isPlaying,
+  onAction,
+  onReset
+}: {
+  loading: boolean,
+  isPlaying: boolean,
+  onAction: (a: "pause" | "play" | "nextPhase" | "stop") => void,
+  onReset: () => void
+}) {
+  return (
+    <div className={styles.experimentControls}>
+      <h3>Experiment Controls</h3>
+      <div className={styles.controlsButtons}>
+        <button
+          className={!isPlaying ? styles.pausePlayActive : styles.pausePlayInactive}
+          onClick={() => onAction("pause")}
+          disabled={loading}
+        >❚❚</button>
+
+        <button
+          className={isPlaying ? styles.pausePlayActive : styles.pausePlayInactive}
+          onClick={() => onAction("play")}
+          disabled={loading}
+        >▶</button>
+
+        <button
+          className={styles.next}
+          onClick={() => onAction("nextPhase")}
+          disabled={loading}
+        >⏭</button>
+
+        <button
+          className={styles.restartExperiment}
+          onClick={onReset}
+          disabled={loading}
+        >⟲</button>
+
+        <button
+          className={styles.stop}
+          onClick={() => onAction("stop")}
+          disabled={loading}
+        >⏹</button>
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Displays lists of Goals, Triggers, and Norms for the current phase.
+ */
+function PhaseDashboard({
+  phaseId,
+  activeIds,
+  setActiveIds,
+  goalIndex
+}: {
+  phaseId: string,
+  activeIds: Record<string, boolean>,
+  setActiveIds: React.Dispatch<React.SetStateAction<Record<string, boolean>>>,
+  goalIndex: number
+}) {
+  const getGoalsWithDepth = useProgramStore((s) => s.getGoalsWithDepth);
+  const getTriggers = useProgramStore((s) => s.getTriggersInPhase);
+  const getNorms = useProgramStore((s) => s.getNormsInPhase);
+
+  // Prepare data view models
+  const goals = getGoalsWithDepth(phaseId).map((g) => ({
+    ...g,
+    id: g.id as string,
+    name: g.name as string,
+    achieved: activeIds[g.id as string] ?? false,
+    level: g.level, // Pass this new property to the UI
+  }));
+
+  const triggers = (getTriggers(phaseId) as TriggerNode[]).map(t => ({
+    ...t,
+    achieved: activeIds[t.id] ?? false,
+  }));
+
+  const norms = (getNorms(phaseId) as NormNodeData[])
+    .filter(n => !n.condition)
+    .map(n => ({ ...n, label: n.norm }));
+
+  const conditionalNorms = (getNorms(phaseId) as (NormNodeData & { id: string })[])
+    .filter(n => !!n.condition)
+    .map(n => ({
+      ...n,
+      achieved: activeIds[n.id] ?? false
+    }));
+
+  return (
+    <>
+      <StatusList title="Goals" items={goals} type="goal" activeIds={activeIds} setActiveIds={setActiveIds} currentGoalIndex={goalIndex} />
+      <StatusList title="Triggers" items={triggers} type="trigger" activeIds={activeIds} />
+      <StatusList title="Norms" items={norms} type="norm" activeIds={activeIds} />
+      <StatusList title="Conditional Norms" items={conditionalNorms} type="cond_norm" activeIds={activeIds} />
+    </>
+  );
+}
+
+// ----------------------------------------------------------------------
+// 3. Main Component
+// ----------------------------------------------------------------------
+
+const MonitoringPage: React.FC = () => {
+  const {
+    loading,
+    isPlaying,
+    isFinished,
+    phaseIds,
+    phaseNames,
+    phaseIndex,
+    goalIndex,
+    activeIds,
+    setActiveIds,
+    resetExperiment,
+    handleControlAction
+  } = useExperimentLogic();
+
+  if (phaseIds.length === 0) {
+    return <p className={styles.empty}>No program loaded.</p>;
+  }
+
+  return (
+    <div className={styles.dashboardContainer}>
+      {/* HEADER */}
+      <header className={styles.experimentOverview}>
+        <div className={styles.phaseName}>
+          <h2>Experiment Overview</h2>
+          <p>
+            {isFinished ? (
+              <strong>Experiment finished</strong>
+            ) : (
+              <><strong>Phase {phaseIndex + 1}:</strong> {phaseNames[phaseIndex]}</>
+            )}
+          </p>
+          <PhaseProgressBar phaseIds={phaseIds} phaseIndex={phaseIndex} isFinished={isFinished} />
+        </div>
+
+        <ControlPanel
+          loading={loading}
+          isPlaying={isPlaying}
+          onAction={handleControlAction}
+          onReset={resetExperiment}
+        />
+
+        <div className={styles.connectionStatus}>
+          <RobotConnected />
+        </div>
+      </header>
+
+      {/* MAIN GRID */}
+      <main className={styles.phaseOverview}>
+        <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}
+          />
+        )}
+      </main>
+
+      {/* LOGS */}
+      <ExperimentLogs />
+
+      {/* FOOTER */}
+      <footer className={styles.controlsSection}>
+        <GestureControls />
+        <SpeechPresets />
+        <DirectSpeechInput />
+      </footer>
+    </div>
+  );
+}
+
+export default MonitoringPage;
--- a/src/pages/MonitoringPage/MonitoringPageAPI.ts
+++ b/src/pages/MonitoringPage/MonitoringPageAPI.ts
@@ -0,0 +1,128 @@
+// This program has been developed by students from the bachelor Computer Science at Utrecht
+// University within the Software Project course.
+// © Copyright Utrecht University (Department of Information and Computing Sciences)
+import React, { useEffect } from 'react';
+import { API_BASE_URL } from '../../config/api.ts';
+
+/**
+ * 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 ?? ""}`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ type, context }),
+    });
+    if (!response.ok) throw new Error("Backend response error");
+    console.log(`API Call send - Type: ${type}, Context: ${context} ${endpoint ? `, Endpoint: ${endpoint}` : ""}`);
+  } catch (err) {
+    console.error(`Failed to send api call:`, err);
+  }
+};
+
+
+/**
+ * Sends an API call to the CB for going to the next phase. 
+ * In case we can't go to the next phase, the function will throw an error.
+ */
+export async function nextPhase(): Promise<void> {
+  const type = "next_phase"
+  const context = ""
+  sendAPICall(type, context)
+}
+
+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
+*/
+export async function pauseExperiment(): Promise<void> {
+  const type = "pause"
+  const context = "true"
+  sendAPICall(type, context)
+}
+
+/**
+ * Sends an API call to the CB for going to resume experiment
+*/
+export async function playExperiment(): Promise<void> {
+  const type = "pause"
+  const context = "false"
+  sendAPICall(type, context)
+}
+
+
+/**
+ * Types for the experiment stream messages
+ */
+export type PhaseUpdate = { type: 'phase_update'; id: string };
+export type GoalUpdate = { type: 'goal_update'; id: string };
+export type TriggerUpdate = { type: 'trigger_update'; id: string; achieved: boolean };
+export type CondNormsStateUpdate = { type: 'cond_norms_state_update'; norms: { id: string; active: boolean }[] };
+export type ExperimentStreamData = PhaseUpdate | GoalUpdate | TriggerUpdate | CondNormsStateUpdate | Record<string, unknown>;
+
+/**
+ * A hook that listens to the experiment stream that updates current state of the program
+ * via updates sent from the backend
+ */
+export function useExperimentLogger(onUpdate?: (data: ExperimentStreamData) => void) {
+  const callbackRef = React.useRef(onUpdate);
+  // Ref is updated every time with on update
+  React.useEffect(() => {
+    callbackRef.current = onUpdate;
+  }, [onUpdate]);
+
+  useEffect(() => {
+    console.log("Connecting to Experiment Stream...");
+    const eventSource = new EventSource(`${API_BASE_URL}/experiment_stream`);
+
+    eventSource.onmessage = (event) => {
+      try {
+        const parsedData = JSON.parse(event.data) as ExperimentStreamData;
+        //call function using the ref
+        callbackRef.current?.(parsedData);
+      } catch (err) {
+        console.warn("Stream parse error:", err);
+      }
+    };
+
+    eventSource.onerror = (err) => {
+      console.error("SSE Connection Error:", err);
+      eventSource.close();
+    };
+
+    return () => {
+      console.log("Closing Experiment Stream...");
+      eventSource.close();
+    };
+  }, []);
+}
+
+/**
+ * A hook that listens to the status stream that updates active conditional norms
+ * via updates sent from the backend
+ */
+export function useStatusLogger(onUpdate?: (data: ExperimentStreamData) => void) {
+  const callbackRef = React.useRef(onUpdate);
+
+  React.useEffect(() => {
+    callbackRef.current = onUpdate;
+  }, [onUpdate]);
+
+  useEffect(() => {
+    const eventSource = new EventSource(`${API_BASE_URL}/status_stream`);
+    eventSource.onmessage = (event) => {
+      try {
+        const parsedData = JSON.parse(event.data);
+        callbackRef.current?.(parsedData);
+      } catch (err) { console.warn("Status stream error:", err); }
+    };
+    return () => eventSource.close();
+  }, []);
+}
--- a/src/pages/MonitoringPage/MonitoringPageComponents.tsx
+++ b/src/pages/MonitoringPage/MonitoringPageComponents.tsx
@@ -0,0 +1,236 @@
+// This program has been developed by students from the bachelor Computer Science at Utrecht
+// University within the Software Project course.
+// © Copyright Utrecht University (Department of Information and Computing Sciences)
+import React, { useEffect, useState } from 'react';
+import styles from './MonitoringPage.module.css';
+import { sendAPICall } from './MonitoringPageAPI';
+import { API_BASE_URL } from '../../config/api.ts';
+
+// --- GESTURE COMPONENT ---
+export const GestureControls: React.FC = () => {
+  const [selectedGesture, setSelectedGesture] = useState("animations/Stand/BodyTalk/Speaking/BodyTalk_1");
+
+  const gestures = [
+    { label: "Wave", value: "animations/Stand/Gestures/Hey_1" }, 
+    { label: "Think", value: "animations/Stand/Emotions/Neutral/Puzzled_1" }, 
+    { label: "Explain", value: "animations/Stand/Gestures/Explain_4" }, 
+    { label: "You", value: "animations/Stand/Gestures/You_1" }, 
+    { label: "Happy", value: "animations/Stand/Emotions/Positive/Happy_1" }, 
+    { label: "Laugh", value: "animations/Stand/Emotions/Positive/Laugh_2" }, 
+    { label: "Lonely", value: "animations/Stand/Emotions/Neutral/Lonely_1" }, 
+    { label: "Suprise", value: "animations/Stand/Emotions/Negative/Surprise_1" }, 
+    { label: "Hurt", value: "animations/Stand/Emotions/Negative/Hurt_2" }, 
+    { label: "Angry", value: "animations/Stand/Emotions/Negative/Angry_4" },
+  ];
+  return (
+    <div className={styles.gestures}>
+      <h4>Gestures</h4>
+      <div className={styles.gestureInputGroup}>
+        <select 
+          value={selectedGesture} 
+          onChange={(e) => setSelectedGesture(e.target.value)}
+        >
+          {gestures.map(g => <option key={g.value} value={g.value}>{g.label}</option>)}
+        </select>
+        <button onClick={() => sendAPICall("gesture", selectedGesture)}>
+          Actuate
+        </button>
+      </div>
+    </div>
+  );
+};
+
+// --- PRESET SPEECH COMPONENT ---
+export const SpeechPresets: React.FC = () => {
+  const phrases = [
+    { label: "Hello, I'm Pepper", text: "Hello, I'm Pepper" },
+    { label: "Repeat please", text: "Could you repeat that please" },
+    { label: "About yourself", text: "Tell me something about yourself" },
+  ];
+
+  return (
+    <div className={styles.speech}>
+      <h4>Speech Presets</h4>
+      <ul>
+        {phrases.map((phrase, i) => (
+          <li key={i}>
+            <button 
+              className={styles.speechBtn} 
+              onClick={() =>  sendAPICall("speech", phrase.text)}
+            >
+              "{phrase.label}"
+            </button>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+// --- DIRECT SPEECH (INPUT) COMPONENT ---
+export const DirectSpeechInput: React.FC = () => {
+  const [text, setText] = useState("");
+
+  const handleSend = () => {
+    if (!text.trim()) return;
+    sendAPICall("speech", text);
+    setText(""); // Clear after sending
+  };
+
+  return (
+    <div className={styles.directSpeech}>
+      <h4>Direct Pepper Speech</h4>
+      <div className={styles.speechInput}>
+        <input 
+          type="text" 
+          value={text}
+          onChange={(e) => setText(e.target.value)}
+          placeholder="Type message..." 
+          onKeyDown={(e) => e.key === 'Enter' && handleSend()}
+        />
+        <button onClick={handleSend}>Send</button>
+      </div>
+    </div>
+  );
+};
+
+// --- interface for goals/triggers/norms/conditional norms ---
+export type StatusItem = {
+  id?: string | number;
+  achieved?: boolean;
+  description?: string;
+  label?: string;
+  norm?: string;
+  name?: string;
+  level?: number;
+};
+
+interface StatusListProps {
+  title: string;
+  items: StatusItem[];
+  type: 'goal' | 'trigger' | 'norm'| 'cond_norm';
+  activeIds: Record<string, boolean>;
+  setActiveIds?: React.Dispatch<React.SetStateAction<Record<string, boolean>>>; 
+  currentGoalIndex?: number;
+}
+
+// --- STATUS LIST COMPONENT ---
+export const StatusList: React.FC<StatusListProps> = ({ 
+  title, 
+  items, 
+  type, 
+  activeIds, 
+  setActiveIds,
+  currentGoalIndex // Destructure this prop
+}) => {
+  return (
+    <section className={styles.phaseBox}>
+      <h3>{title}</h3>
+      <ul>
+        {items.map((item, idx) => {
+          if (item.id === undefined) return null;
+          const isActive = !!activeIds[item.id];
+          const showIndicator = type !== 'norm';
+          const isCurrentGoal = type === 'goal' && idx === currentGoalIndex;
+          const canOverride =  (showIndicator && !isActive) || (type === 'cond_norm' && isActive); 
+
+         const indentation = (item.level || 0) * 20;
+
+          const handleOverrideClick = () => {
+            if (!canOverride) return;
+            if (type === 'cond_norm' && isActive){  
+              {/* Unachieve conditional norm */}
+              sendAPICall("override_unachieve", String(item.id));
+            }
+            else {
+              if(type === 'goal')
+                if(setActiveIds)
+                {setActiveIds(prev => ({ ...prev, [String(item.id)]: true }));}
+            
+              sendAPICall("override", String(item.id));
+            }
+          };
+
+          return (
+            <li key={item.id ?? idx} 
+            className={styles.statusItem}
+            style={{ paddingLeft: `${indentation}px` }}
+            >
+              {showIndicator && (
+                <span 
+                  className={`${styles.statusIndicator} ${isActive ? styles.active : styles.inactive} ${canOverride ? styles.clickable : ''}`}
+                  onClick={handleOverrideClick}
+                >
+                  {isActive ? "✔️" : "❌"}
+                </span>
+              )}
+              <span 
+                className={styles.itemDescription}
+                style={{ 
+                  // Visual Feedback
+                  textDecoration: isCurrentGoal ? 'underline' : 'none',
+                  fontWeight: isCurrentGoal ? 'bold' : 'normal',
+                  color: isCurrentGoal ? '#007bff' : 'inherit',
+                  backgroundColor: isCurrentGoal ? '#e7f3ff' : 'transparent', // Added subtle highlight
+                  padding: isCurrentGoal ? '2px 4px' : '0',
+                  borderRadius: '4px'
+                }}
+              >
+                {item.name || item.norm}
+                {isCurrentGoal && " (Current)"} 
+              </span>
+            </li>
+          );
+        })}
+      </ul>
+    </section>
+  );
+};
+
+
+// --- Robot Connected --- 
+export const RobotConnected = () => {
+
+  /**
+     * The current connection state:
+     * - `true`: Robot is connected.
+     * - `false`: Robot is not connected.
+     * - `null`: Connection status is unknown (initial check in progress).
+     */
+    const [connected, setConnected] = useState<boolean | null>(null);
+  
+    useEffect(() => {
+      // Open a Server-Sent Events (SSE) connection to receive live ping updates.
+      // We're expecting a stream of data like that looks like this: `data = False` or `data = True`
+      const eventSource = new EventSource(`${API_BASE_URL}/robot/ping_stream`);
+      eventSource.onmessage = (event) => {
+      
+        // Expecting messages in JSON format: `true` or `false`
+        //commented out this log as it clutters console logs, but might be useful to debug
+        //console.log("received message:", event.data);
+        try {
+          const data = JSON.parse(event.data);
+  
+          try {
+            setConnected(data)
+          }
+          catch {
+            console.log("couldnt extract connected from incoming ping data")
+          }
+  
+        } catch {
+          console.log("Ping message not in correct format:", event.data);
+        }
+      };
+  
+      // Clean up the SSE connection when the component unmounts.
+      return () => eventSource.close();
+    }, []);
+
+  return  (
+  <div>
+    <h3>Connection:</h3>
+    <p className={connected ? styles.connected : styles.disconnected }>{connected ? "● Robot is connected" : "● Robot is disconnected"}</p>
+  </div>
+  )
+}
--- a/src/pages/MonitoringPage/components/ExperimentLogs.module.css
+++ b/src/pages/MonitoringPage/components/ExperimentLogs.module.css
@@ -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)
+*/
+.logs {
+  /* grid-area used in MonitoringPage.module.css */
+  grid-area: logs;
+  box-shadow: var(--panel-shadow);
+
+  height: 900px;
+  width: 450px;
+
+  .live {
+    width: .5rem;
+    height: .5rem;
+    left: .5rem;
+    background: red;
+    border-radius: 50%;
+  }
+}
+
+.chat-message.alternate {
+  align-items: end;
+  text-align: end;
+
+  background-color: color-mix(in oklab, canvas, 75% #86c4fa);
+
+  .message-head {
+    flex-direction: row-reverse;
+  }
+}
+
+.download-list {
+  box-sizing: border-box;
+  list-style: none;
+  height: 50dvh;
+  min-width: 300px;
+}
--- a/src/pages/MonitoringPage/components/ExperimentLogs.tsx
+++ b/src/pages/MonitoringPage/components/ExperimentLogs.tsx
@@ -0,0 +1,190 @@
+// This program has been developed by students from the bachelor Computer Science at Utrecht
+// University within the Software Project course.
+// © Copyright Utrecht University (Department of Information and Computing Sciences)
+import styles from "./ExperimentLogs.module.css";
+import {LogMessages} from "../../../components/Logging/Logging.tsx";
+import {useEffect, useMemo, useState} from "react";
+import {type LogFilterPredicate, type LogRecord, useLogs} from "../../../components/Logging/useLogs.ts";
+import capitalize from "../../../utils/capitalize.ts";
+import {useCell} from "../../../utils/cellStore.ts";
+import {
+  EXPERIMENT_FILTER_KEY,
+  EXPERIMENT_LOGGER_NAME,
+  type LoggingSettings,
+  type MessageComponentProps,
+} from "../../../components/Logging/Definitions.ts";
+import formatDuration from "../../../utils/formatDuration.ts";
+import {create} from "zustand";
+import Dialog from "../../../components/Dialog.tsx";
+import delayedResolve from "../../../utils/delayedResolve.ts";
+import { API_BASE_URL } from "../../../config/api.ts";
+
+/**
+ * Local Zustand store for logging UI preferences.
+ */
+const useLoggingSettings = create<LoggingSettings>((set) => ({
+  showRelativeTime: false,
+  setShowRelativeTime: (showRelativeTime: boolean) => set({ showRelativeTime }),
+}));
+
+/**
+ * A dedicated component for rendering chat messages.
+ *
+ * @param record The chat record to render.
+ */
+function ChatMessage({ record }: { record: LogRecord }) {
+  const { showRelativeTime, setShowRelativeTime } = useLoggingSettings();
+
+  const reverse = record.role === "user" ? styles.alternate : "";
+
+  return <div className={`${styles.chatMessage} ${reverse} flex-col padding-md padding-h-lg shadow-md round-md`}>
+    <div className={`${styles.messageHead} flex-row gap-md align-center`}>
+      <span className={"bold"}>{capitalize(record.role ?? "unknown")}</span>
+      <span className={"font-small"}>•</span>
+      <span className={"mono clickable font-small"} onClick={() => setShowRelativeTime(!showRelativeTime)}>{
+        showRelativeTime
+          ? formatDuration(record.relativeCreated)
+          : new Date(record.created * 1000).toLocaleTimeString()
+      }</span>
+    </div>
+    <span>{record.message}</span>
+  </div>
+}
+
+/**
+ * A generic log message component showing the log level, time, and message text.
+ *
+ * @param record The log record to render.
+ */
+function DefaultMessage({ record }: { record: LogRecord }) {
+  const { showRelativeTime, setShowRelativeTime } = useLoggingSettings();
+
+  return <div>
+    <div className={"flex-row gap-md align-center"}>
+      <span className={"font-small"}>{record.levelname}</span>
+      <span className={"font-small"}>•</span>
+      <span className={"mono clickable font-small"} onClick={() => setShowRelativeTime(!showRelativeTime)}>{
+        showRelativeTime
+          ? formatDuration(record.relativeCreated)
+          : new Date(record.created * 1000).toLocaleTimeString()
+      }</span>
+    </div>
+    <span>{record.message}</span>
+  </div>;
+}
+
+/**
+ * A custom component for rendering experiment messages, which might include chat messages.
+ *
+ * @param recordCell The cell containing the log record to render.
+ * @param onUpdate A callback to notify the parent component when the record changes.
+ */
+function ExperimentMessage({recordCell, onUpdate}: MessageComponentProps) {
+  const record = useCell(recordCell);
+
+  // Notify the parent component (e.g., for scroll updates) when this record changes.
+  useEffect(() => {
+    if (onUpdate) onUpdate();
+  }, [record, onUpdate]);
+
+  if (record.levelname == "CHAT") {
+    return <ChatMessage record={record} />
+  } else {
+    return <DefaultMessage record={record} />
+  }
+}
+
+/**
+ * A download dialog listing experiment logs to download.
+ *
+ * @param filenames The list of available experiment logs to download.
+ * @param refresh A callback to refresh the list of available experiment logs.
+ */
+function DownloadScreen({filenames, refresh}: {filenames: string[] | null, refresh: () => void}) {
+  const list = (() => {
+    if (filenames == null) return <div className={`${styles.downloadList} flex-col align-center justify-center`}>
+      <p>Loading...</p>
+    </div>;
+    if (filenames.length === 0) return <div className={`${styles.downloadList} flex-col align-center justify-center`}>
+      <p>No files available.</p>
+    </div>
+
+    return <ol className={`${styles.downloadList} margin-0 padding-h-lg scroll-y`}>
+      {filenames!.map((filename) => (
+        <li><a key={filename} href={`${API_BASE_URL}/api/logs/files/${filename}`} download={filename}>{filename}</a></li>
+      ))}
+    </ol>;
+  })();
+
+  return <div className={"flex-col"}>
+    <p className={"margin-lg"}>Select a file to download:</p>
+    {list}
+    <button onClick={refresh} className={"margin-lg shadow-sm"}>Refresh</button>
+  </div>;
+}
+
+/**
+ * A button that opens a download dialog for experiment logs when pressed.
+ */
+function DownloadButton() {
+  const [showModal, setShowModal] = useState(false);
+  const [filenames, setFilenames] = useState<string[] | null>(null);
+
+  async function getFiles(): Promise<string[]> {
+    const response = await fetch(`${API_BASE_URL}/api/logs/files`);
+    const files = await response.json();
+    files.sort();
+    return files;
+  }
+
+  useEffect(() => {
+    getFiles().then(setFilenames);
+  }, [showModal]);
+
+  return <>
+    <button className={"shadow-sm"} onClick={() => setShowModal((curr) => !curr)}>Download...</button>
+    <Dialog open={showModal} close={() => setShowModal(false)} classname={"padding-0 round-lg"}>
+      <DownloadScreen filenames={filenames} refresh={async () => {
+        setFilenames(null);
+        const files = await delayedResolve(getFiles(), 250);
+        setFilenames(files);
+      }} />
+    </Dialog>
+  </>;
+}
+
+/**
+ * A component for rendering experiment logs. This component uses the `useLogs` hook with a filter to show only
+ * experiment logs.
+ */
+export default function ExperimentLogs() {
+  // Show only experiment logs in this logger
+  const filters = useMemo(() => new Map<string, LogFilterPredicate>([
+    [
+      EXPERIMENT_FILTER_KEY,
+      {
+        predicate: (r) => r.name == EXPERIMENT_LOGGER_NAME,
+        priority: 999,
+        value: null,
+      } as LogFilterPredicate,
+    ],
+  ]), []);
+
+  const { filteredLogs } = useLogs(filters);
+
+  return <aside className={`${styles.logs} flex-col relative`}>
+    <div className={`${styles.head} padding-lg`}>
+      <div className={"flex-row align-center justify-between"}>
+        <h3>Logs</h3>
+        <div className={"flex-row gap-md align-center"}>
+          <div className={`flex-row align-center gap-md relative padding-md shadow-sm round-md`}>
+            <div className={styles.live}></div>
+            <span>Live</span>
+          </div>
+          <DownloadButton />
+        </div>
+      </div>
+    </div>
+    <LogMessages recordCells={filteredLogs} MessageComponent={ExperimentMessage} />
+  </aside>;
+}
--- a/src/pages/Robot/Robot.tsx
+++ b/src/pages/Robot/Robot.tsx
@@ -1,130 +0,0 @@
-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/TemplatePage/Template.tsx
+++ b/src/pages/TemplatePage/Template.tsx
@@ -1,11 +0,0 @@
-import Counter from '../../components/components.tsx'
-
-function TemplatePage() {
-  return (
-    <>
-      <Counter />
-    </>
-  )
-}
-
-export default TemplatePage
--- a/src/pages/VisProgPage/VisProg.module.css
+++ b/src/pages/VisProgPage/VisProg.module.css
@@ -1,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)
+*/
 /* editor UI */

 .inner-editor-container {
@@ -183,6 +188,18 @@
  left: 60% !important;
 }

+.planNoIterate {
+  opacity: 0.5;
+  font-style: italic;
+  text-decoration: line-through;
+}
+.backButton {
+  background: var(--bg-surface);
+  box-shadow: var(--panel-shadow);
+  margin-top: 0.5rem;
+  margin-left: 0.5rem;
+}
+
 .node-toolbar-tooltip {
    background-color: darkgray;
    color: white;
--- a/src/pages/VisProgPage/VisProg.tsx
+++ b/src/pages/VisProgPage/VisProg.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 {
  Background,
  Controls,
@@ -7,7 +10,6 @@ import {
  MarkerType, getOutgoers
 } from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
-import {graphReducer, runProgram} from "./VisProgLogic.tsx";
 import warningStyles from './visualProgrammingUI/components/WarningSidebar.module.css'
 import {type CSSProperties, useEffect, useState} from "react";
 import {useShallow} from 'zustand/react/shallow';
@@ -18,8 +20,10 @@ import {WarningsSidebar} from "./visualProgrammingUI/components/WarningSidebar.t
 import useFlowStore from './visualProgrammingUI/VisProgStores.tsx';
 import type {FlowState} from './visualProgrammingUI/VisProgTypes.tsx';
 import styles from './VisProg.module.css'
-import { NodeTypes } from './visualProgrammingUI/NodeRegistry.ts';
+import {NodeTypes} from './visualProgrammingUI/NodeRegistry.ts';
 import SaveLoadPanel from './visualProgrammingUI/components/SaveLoadPanel.tsx';
+import MonitoringPage from '../MonitoringPage/MonitoringPage.tsx';
+import {graphReducer, runProgram} from './VisProgLogic.ts';

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

@@ -199,8 +203,10 @@ const checkPhaseChain = (): boolean => {
 * @constructor
 */
 function VisProgPage() {
+  const [showSimpleProgram, setShowSimpleProgram] = useState(false);
  const [programValidity, setProgramValidity] = useState<boolean>(true);
  const {isProgramValid, severityIndex} = useFlowStore();
+  const setProgramState = useProgramStore((state) => state.setProgramState);

  const validity = () => {return isProgramValid();}

@@ -211,13 +217,26 @@ function VisProgPage() {
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [severityIndex]);

-  const setProgramState = useProgramStore((state) => state.setProgramState);
-
  const processProgram = () => {
    const phases = graphReducer();       // reduce graph
    setProgramState({ phases });          // <-- save to store
+    setShowSimpleProgram(true);          // show SimpleProgram
    runProgram();                        // send to backend if needed
  };
+
+  if (showSimpleProgram) {
+    return (
+    <div>
+      <button className={styles.backButton} onClick={() => setShowSimpleProgram(false)}>
+        Back to Editor ◀
+      </button>
+      <MonitoringPage/>
+    </div>
+    );
+  }
+
+
+
  return (
    <>
      <VisualProgrammingUI/>
--- a/src/pages/VisProgPage/VisProgLogic.tsx
+++ b/src/pages/VisProgPage/VisProgLogic.tsx
@@ -1,8 +1,12 @@
+// This program has been developed by students from the bachelor Computer Science at Utrecht
+// University within the Software Project course.
+// © Copyright Utrecht University (Department of Information and Computing Sciences)
 import useProgramStore from "../../utils/programStore";
 import orderPhaseNodeArray from "../../utils/orderPhaseNodes";
 import useFlowStore from './visualProgrammingUI/VisProgStores';
 import { NodeReduces } from './visualProgrammingUI/NodeRegistry';
 import type { PhaseNode } from "./visualProgrammingUI/nodes/PhaseNode";
+import { API_BASE_URL } from "../../config/api.ts";

 /**
 * Reduces the graph into its phases' information and recursively calls their reducing function
@@ -25,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"},
--- a/src/pages/VisProgPage/visualProgrammingUI/EditorUndoRedo.ts
+++ b/src/pages/VisProgPage/visualProgrammingUI/EditorUndoRedo.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 {Edge, Node} from "@xyflow/react";
 import type {StateCreator, StoreApi } from 'zustand/vanilla';
 import type {
--- a/src/pages/VisProgPage/visualProgrammingUI/HandleRuleLogic.ts
+++ b/src/pages/VisProgPage/visualProgrammingUI/HandleRuleLogic.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 Connection} from "@xyflow/react";
 import {useEffect} from "react";
 import useFlowStore from "./VisProgStores.tsx";
--- a/src/pages/VisProgPage/visualProgrammingUI/HandleRules.ts
+++ b/src/pages/VisProgPage/visualProgrammingUI/HandleRules.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 HandleRule,
  ruleResult
--- a/src/pages/VisProgPage/visualProgrammingUI/NodeRegistry.ts
+++ b/src/pages/VisProgPage/visualProgrammingUI/NodeRegistry.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 EndNode, {
  EndConnectionTarget,
  EndConnectionSource,
--- a/src/pages/VisProgPage/visualProgrammingUI/VisProgStores.tsx
+++ b/src/pages/VisProgPage/visualProgrammingUI/VisProgStores.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 { create } from 'zustand';
 import {
  applyNodeChanges,
@@ -87,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
@@ -237,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),
        })
      }
@@ -262,16 +280,50 @@ const useFlowStore = create<FlowState>(UndoRedo((set, get) => ({
   */
  updateNodeData: (nodeId, data) => {
    get().pushSnapshot();
-    set({
-      nodes: get().nodes.map((node) => {
+    const updatedNodes = get().nodes.map((node) => {
      if (node.id === nodeId) {
-          node = { ...node, data: { ...node.data, ...data }};
+        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
@@ -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)
 // VisProgTypes.ts
 import type {
  Edge,
@@ -93,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/DragDropSidebar.tsx
+++ b/src/pages/VisProgPage/visualProgrammingUI/components/DragDropSidebar.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 { useDraggable } from '@neodrag/react';
 import { useReactFlow, type XYPosition } from '@xyflow/react';
 import { type ReactNode, useCallback, useRef, useState } from 'react';
--- a/src/pages/VisProgPage/visualProgrammingUI/components/EditorWarnings.tsx
+++ b/src/pages/VisProgPage/visualProgrammingUI/components/EditorWarnings.tsx
@@ -1,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)
 /* contains all logic for the VisProgEditor warning system
 *
 * Missing but desirable features:
@@ -20,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,4 +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/GestureValueEditor.tsx
+++ b/src/pages/VisProgPage/visualProgrammingUI/components/GestureValueEditor.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 { useState, useRef } from "react";
 import styles from './GestureValueEditor.module.css'

--- a/src/pages/VisProgPage/visualProgrammingUI/components/NodeComponents.tsx
+++ b/src/pages/VisProgPage/visualProgrammingUI/components/NodeComponents.tsx
@@ -1,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 {NodeToolbar, useReactFlow} from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
 import {type JSX, useState} from "react";
--- a/src/pages/VisProgPage/visualProgrammingUI/components/Plan.default.ts
+++ b/src/pages/VisProgPage/visualProgrammingUI/components/Plan.default.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 { Plan, PlanElement } from "./Plan";

 export const defaultPlan: Plan = {
--- a/src/pages/VisProgPage/visualProgrammingUI/components/Plan.tsx
+++ b/src/pages/VisProgPage/visualProgrammingUI/components/Plan.tsx
@@ -1,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 Node } from "@xyflow/react"
 import { GoalReduce } from "../nodes/GoalNode"

--- a/src/pages/VisProgPage/visualProgrammingUI/components/PlanEditingFunctions.tsx
+++ b/src/pages/VisProgPage/visualProgrammingUI/components/PlanEditingFunctions.tsx
@@ -1,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)
 // This file is to avoid sharing both functions and components which eslint dislikes. :)
 import type { GoalNode } from "../nodes/GoalNode"
 import type { Goal, Plan } from "./Plan"
--- a/src/pages/VisProgPage/visualProgrammingUI/components/PlanEditor.module.css
+++ b/src/pages/VisProgPage/visualProgrammingUI/components/PlanEditor.module.css
@@ -1,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)
+*/
 .planDialog {
  overflow:visible;
  width: 80vw;
--- a/src/pages/VisProgPage/visualProgrammingUI/components/PlanEditor.tsx
+++ b/src/pages/VisProgPage/visualProgrammingUI/components/PlanEditor.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 {useRef, useState} from "react";
 import useFlowStore from "../VisProgStores.tsx";
 import styles from './PlanEditor.module.css';
--- a/src/pages/VisProgPage/visualProgrammingUI/components/RuleBasedHandle.module.css
+++ b/src/pages/VisProgPage/visualProgrammingUI/components/RuleBasedHandle.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)
+*/
 :global(.react-flow__handle.source){
    border-radius: 100%;
 }
--- a/src/pages/VisProgPage/visualProgrammingUI/components/RuleBasedHandle.tsx
+++ b/src/pages/VisProgPage/visualProgrammingUI/components/RuleBasedHandle.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 {
  Handle,
  type HandleProps,
--- a/src/pages/VisProgPage/visualProgrammingUI/components/SaveLoadPanel.module.css
+++ b/src/pages/VisProgPage/visualProgrammingUI/components/SaveLoadPanel.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)
+*/
 .save-load-panel {
  border-radius: 0 0 5pt 5pt;
  background-color: canvas;
--- a/src/pages/VisProgPage/visualProgrammingUI/components/SaveLoadPanel.tsx
+++ b/src/pages/VisProgPage/visualProgrammingUI/components/SaveLoadPanel.tsx
@@ -1,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 ChangeEvent, useRef, useState} from "react";
 import useFlowStore from "../VisProgStores";
 import visProgStyles from "../../VisProg.module.css";
@@ -29,6 +32,8 @@ export default function SaveLoadPanel() {
      const text = await file.text();
      const parsed = JSON.parse(text) as SavedProject;
      if (!parsed.nodes || !parsed.edges) throw new Error("Invalid file format");
+      const {nodes, unregisterWarningsForId} = useFlowStore.getState();
+      nodes.forEach((node) => {unregisterWarningsForId(node.id);});
      setNodes(parsed.nodes);
      setEdges(parsed.edges);
    } catch (e) {
--- a/src/pages/VisProgPage/visualProgrammingUI/components/WarningSidebar.module.css
+++ b/src/pages/VisProgPage/visualProgrammingUI/components/WarningSidebar.module.css
@@ -1,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)
+*/
 .warnings-sidebar {
    min-width: auto;
    max-width: 340px;
--- a/src/pages/VisProgPage/visualProgrammingUI/components/WarningSidebar.tsx
+++ b/src/pages/VisProgPage/visualProgrammingUI/components/WarningSidebar.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 {useReactFlow, useStoreApi} from "@xyflow/react";
 import clsx from "clsx";
 import {useEffect, useState} from "react";
--- a/src/pages/VisProgPage/visualProgrammingUI/nodes/BasicBeliefNode.default.ts
+++ b/src/pages/VisProgPage/visualProgrammingUI/nodes/BasicBeliefNode.default.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 { BasicBeliefNodeData } from "./BasicBeliefNode.tsx";


--- a/src/pages/VisProgPage/visualProgrammingUI/nodes/BasicBeliefNode.tsx
+++ b/src/pages/VisProgPage/visualProgrammingUI/nodes/BasicBeliefNode.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 {
  type NodeProps,
  Position,
@@ -113,9 +116,7 @@ export default function BasicBeliefNode(props: NodeProps<BasicBeliefNode>) {
    updateNodeData(props.id, {...data, belief: {...data.belief, description: value}});
  }

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

  let placeholder = ""
  let wrapping = ""
@@ -191,7 +192,7 @@ export default function BasicBeliefNode(props: NodeProps<BasicBeliefNode>) {
          )}
        <MultiConnectionHandle type="source" position={Position.Right} id="source" rules={[
          noMatchingLeftRightBelief,
-          allowOnlyConnectionsFromHandle([{nodeType:"trigger",handleId:"TriggerBeliefs"}, {nodeType:"norm",handleId:"NormBeliefs"}]),
+          allowOnlyConnectionsFromHandle([{nodeType:"trigger",handleId:"TriggerBeliefs"}, {nodeType:"norm",handleId:"NormBeliefs"},{nodeType:"InferredBelief",handleId:"inferred_belief"}]),
        ]}  title="Connect to any number of trigger and/or normNode(-s)"/>
      </div>
    </>
--- a/src/pages/VisProgPage/visualProgrammingUI/nodes/BeliefGlobals.ts
+++ b/src/pages/VisProgPage/visualProgrammingUI/nodes/BeliefGlobals.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 {getOutgoers, type Node} from '@xyflow/react';
 import {type HandleRule, type RuleResult, ruleResult} from "../HandleRuleLogic.ts";
 import useFlowStore from "../VisProgStores.tsx";
--- a/src/pages/VisProgPage/visualProgrammingUI/nodes/EndNode.default.ts
+++ b/src/pages/VisProgPage/visualProgrammingUI/nodes/EndNode.default.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 { EndNodeData } from "./EndNode";

 /**
--- a/src/pages/VisProgPage/visualProgrammingUI/nodes/EndNode.tsx
+++ b/src/pages/VisProgPage/visualProgrammingUI/nodes/EndNode.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 {
  type NodeProps,
  Position,
--- a/src/pages/VisProgPage/visualProgrammingUI/nodes/GoalNode.default.ts
+++ b/src/pages/VisProgPage/visualProgrammingUI/nodes/GoalNode.default.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 { GoalNodeData } from "./GoalNode";

 /**
--- a/src/pages/VisProgPage/visualProgrammingUI/nodes/GoalNode.tsx
+++ b/src/pages/VisProgPage/visualProgrammingUI/nodes/GoalNode.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 {
  type NodeProps,
  Position,
@@ -66,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: {
@@ -78,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.default.ts
+++ b/src/pages/VisProgPage/visualProgrammingUI/nodes/InferredBeliefNode.default.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 { InferredBeliefNodeData } from "./InferredBeliefNode.tsx";


--- a/src/pages/VisProgPage/visualProgrammingUI/nodes/InferredBeliefNode.module.css
+++ b/src/pages/VisProgPage/visualProgrammingUI/nodes/InferredBeliefNode.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)
+*/
 .operator-switch {
    display: inline-flex;
    align-items: center;
--- a/src/pages/VisProgPage/visualProgrammingUI/nodes/InferredBeliefNode.tsx
+++ b/src/pages/VisProgPage/visualProgrammingUI/nodes/InferredBeliefNode.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 {getConnectedEdges, type Node, type NodeProps, Position, useNodeConnections} from '@xyflow/react';
 import {useEffect, useState} from "react";
 import styles from '../../VisProg.module.css';
--- a/src/pages/VisProgPage/visualProgrammingUI/nodes/NormNode.default.ts
+++ b/src/pages/VisProgPage/visualProgrammingUI/nodes/NormNode.default.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 { NormNodeData } from "./NormNode";

 /**
--- a/src/pages/VisProgPage/visualProgrammingUI/nodes/NormNode.tsx
+++ b/src/pages/VisProgPage/visualProgrammingUI/nodes/NormNode.tsx
@@ -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)
+import { useEffect } from "react";
+import type { EditorWarning } from "../components/EditorWarnings.tsx";
 import {
  type NodeProps,
  Position,
@@ -36,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`;
@@ -44,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});
+  // const setCritical = (value: boolean) => {
+  //   updateNodeData(props.id, {...data, critical: value});
+  // }
+  useEffect(() => {
+    const normText = data.norm || "";
+    
+    const startsWithNumberWarning: EditorWarning = {
+      scope: { id: props.id },
+      type: 'ELEMENT_STARTS_WITH_NUMBER',
+      severity: 'ERROR',
+      description: "Norms are not allowed to start with a number."
+    };
+
+    if (/^\d/.test(normText)) {
+      registerWarning(startsWithNumberWarning);
+    } else {
+      unregisterWarning(props.id, 'ELEMENT_STARTS_WITH_NUMBER');
    }
+  }, [data.norm, props.id, registerWarning, unregisterWarning]);
+  useEffect(() => {
+    const normText = data.norm || "";
+    
+    const startsWithNumberWarning: EditorWarning = {
+      scope: { id: props.id },
+      type: 'ELEMENT_STARTS_WITH_NUMBER',
+      severity: 'ERROR',
+      description: "Norms are not allowed to start with a number."
+    };
+
+    if (/^\d/.test(normText)) {
+      registerWarning(startsWithNumberWarning);
+    } else {
+      unregisterWarning(props.id, 'ELEMENT_STARTS_WITH_NUMBER');
+    }
+  }, [data.norm, props.id, registerWarning, unregisterWarning]);

  return <>
    <Toolbar nodeId={props.id} allowDelete={true}/>
@@ -61,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}
@@ -69,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/PhaseNode.default.ts
+++ b/src/pages/VisProgPage/visualProgrammingUI/nodes/PhaseNode.default.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 { PhaseNodeData } from "./PhaseNode";

 /**
--- a/src/pages/VisProgPage/visualProgrammingUI/nodes/PhaseNode.tsx
+++ b/src/pages/VisProgPage/visualProgrammingUI/nodes/PhaseNode.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 {
  type NodeProps,
  Position,
--- a/src/pages/VisProgPage/visualProgrammingUI/nodes/StartNode.default.ts
+++ b/src/pages/VisProgPage/visualProgrammingUI/nodes/StartNode.default.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 { StartNodeData } from "./StartNode";

 /**
--- a/src/pages/VisProgPage/visualProgrammingUI/nodes/StartNode.tsx
+++ b/src/pages/VisProgPage/visualProgrammingUI/nodes/StartNode.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 {
  type NodeProps,
  Position,
--- a/src/pages/VisProgPage/visualProgrammingUI/nodes/TriggerNode.default.ts
+++ b/src/pages/VisProgPage/visualProgrammingUI/nodes/TriggerNode.default.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 { TriggerNodeData } from "./TriggerNode";

 /**
--- a/src/pages/VisProgPage/visualProgrammingUI/nodes/TriggerNode.tsx
+++ b/src/pages/VisProgPage/visualProgrammingUI/nodes/TriggerNode.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 {
  type NodeProps,
  Position,
@@ -112,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}/>
@@ -139,7 +157,7 @@ export default function TriggerNode(props: NodeProps<TriggerNode>) {
        id="TriggerBeliefs"
        style={{ left: '40%' }}
        rules={[
-          allowOnlyConnectionsFromType(["basic_belief","inferred_belief"]),
+          allowOnlyConnectionsFromType(['basic_belief','inferred_belief']),
        ]}
        title="Connect to a beliefNode or a set of beliefs combined using the AND/OR node"
      />
--- a/src/utils/SaveLoad.ts
+++ b/src/utils/SaveLoad.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 Edge, type Node } from "@xyflow/react";

 export type SavedProject = {
--- a/src/utils/capitalize.ts
+++ b/src/utils/capitalize.ts
@@ -0,0 +1,3 @@
+export default function (s: string) {
+    return s.charAt(0).toUpperCase() + s.slice(1);
+}
--- a/src/utils/cellStore.ts
+++ b/src/utils/cellStore.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 {useSyncExternalStore} from "react";

 type Unsub = () => void;
--- a/src/utils/delayedResolve.ts
+++ b/src/utils/delayedResolve.ts
@@ -0,0 +1,7 @@
+export default async function <T>(promise: Promise<T>, minDelayMs: number): Promise<T> {
+  const [result] = await Promise.all([
+    promise,
+    new Promise(resolve => setTimeout(resolve, minDelayMs))
+  ]);
+  return result;
+}
--- a/src/utils/duplicateIndices.ts
+++ b/src/utils/duplicateIndices.ts
@@ -1,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)
 /**
 * Find the indices of all elements that occur more than once.
 *
--- a/src/utils/formatDuration.ts
+++ b/src/utils/formatDuration.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)
 /**
 * Format a time duration like `HH:MM:SS.mmm`.
 *
--- a/src/utils/orderPhaseNodes.ts
+++ b/src/utils/orderPhaseNodes.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 {PhaseNode} from "../pages/VisProgPage/visualProgrammingUI/nodes/PhaseNode.tsx";

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

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

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

+export type GoalWithDepth = Record<string, unknown> & { level: number };
+
 /**
 * the type definition of the programStore
 */
@@ -15,8 +20,10 @@ export type ProgramState = {
  // Utility functions:
  // to avoid having to manually go through the entire state for every instance where data is required
  getPhaseIds: () => string[];
+  getPhaseNames: () => string[];
  getNormsInPhase: (currentPhaseId: string) => Record<string, unknown>[];
  getGoalsInPhase: (currentPhaseId: string) => Record<string, unknown>[];
+  getGoalsWithDepth: (currentPhaseId: string) => GoalWithDepth[];
  getTriggersInPhase: (currentPhaseId: string) => Record<string, unknown>[];
  // if more specific utility functions are needed they can be added here:
 }
@@ -43,6 +50,10 @@ const useProgramStore = create<ProgramState>((set, get) => ({
   * gets the ids of all phases in the program
   */
  getPhaseIds: () => get().currentProgram.phases.map(entry => entry["id"] as string),
+   /**
+   * gets the names of all phases in the program
+   */
+  getPhaseNames: () => get().currentProgram.phases.map((entry) => (entry["name"] as string)),
  /**
   * gets the norms for the provided phase
   */
@@ -65,6 +76,50 @@ const useProgramStore = create<ProgramState>((set, get) => ({
    }
    throw new Error(`phase with id:"${currentPhaseId}" not found`)
  },
+
+  getGoalsWithDepth: (currentPhaseId: string) => {
+    const program = get().currentProgram;
+    const phase = program.phases.find(val => val["id"] === currentPhaseId);
+    
+    if (!phase) {
+      throw new Error(`phase with id:"${currentPhaseId}" not found`);
+    }
+
+    const rootGoals = phase["goals"] as Record<string, unknown>[];
+    const flatList: GoalWithDepth[] = [];
+
+    const isGoal = (item: Record<string, unknown>) => {
+      return item["plan"] !== undefined;
+    };
+
+    // Recursive helper function
+    const traverse = (goals: Record<string, unknown>[], depth: number) => {
+      goals.forEach((goal) => {
+        // 1. Add the current goal to the list
+        flatList.push({ ...goal, level: depth });
+
+        // 2. Check for children
+        const plan = goal["plan"] as Record<string, unknown> | undefined;
+        
+        if (plan && Array.isArray(plan["steps"])) {
+           const steps = plan["steps"] as Record<string, unknown>[];
+           
+           // 3. FILTER: Only recurse on steps that are actually goals
+           // If we just passed 'steps', we might accidentally add Actions/Speeches to the goal list
+           const childGoals = steps.filter(isGoal);
+
+           if (childGoals.length > 0) {
+             traverse(childGoals, depth + 1);
+           }
+        }
+      });
+    };
+
+    // Start traversal
+    traverse(rootGoals, 0);
+
+    return flatList;
+  },
  /**
   * gets the triggers for the provided phase
   */
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@@ -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.test.tsx
+++ b/test/components.test.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 userEvent from '@testing-library/user-event';
 import { render, screen} from '@testing-library/react';
 import Counter from '../src/components/components';
--- a/test/components/Logging/Filters.test.tsx
+++ b/test/components/Logging/Filters.test.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 {render, screen, waitFor, fireEvent} from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import * as React from "react";
--- a/Show More
+++ b/Show More
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
Gerla, J. (Justin)	9e06bf079b	Merge branch 'chore/adding-uu-strings' into 'dev' chore: added copyright strings and removed template page See merge request ics/sp/2025/n25b/pepperplus-ui!50	2026-01-28 10:34:36 +00:00
Gerla, J. (Justin)	eb5a6cddd7	chore: added copyright strings and removed template page	2026-01-28 10:34:36 +00:00
Björn Otgaar	60f7bad5d1	Merge branch 'feat/experiment-logs' into 'dev' Add experiment logs to the monitoring page See merge request ics/sp/2025/n25b/pepperplus-ui!48	2026-01-28 10:15:59 +00:00
Twirre	835de03a29	Add experiment logs to the monitoring page	2026-01-28 10:15:58 +00:00
Pim Hutting	78901ee25b	Merge branch 'temp_screenshot_manual' into 'dev' feat: The Big One UI See merge request ics/sp/2025/n25b/pepperplus-ui!47	2026-01-28 08:27:30 +00:00
Gerla, J. (Justin)	82785dc8cb	feat: The Big One UI	2026-01-28 08:27:30 +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