refactor: adapted to fit the split made in monitoringPage

ref: N25B-450

src/App.css

@@ -1,8 +1,3 @@
-{/*
-This program has been developed by students from the bachelor Computer Science at Utrecht
-University within the Software Project course.
-© Copyright Utrecht University (Department of Information and Computing Sciences)
-*/}
 .logopepper {
   height: 8em;
   padding: 1.5em;
@@ -166,13 +161,7 @@ input[type="checkbox"] {
 .margin-0 {
   margin: 0;
 }
-.margin-lg {
-  margin: 1rem;
-}
 
-.padding-0 {
-  padding: 0;
-}
 .padding-sm {
   padding: .25rem;
 }
@@ -182,9 +171,11 @@ input[type="checkbox"] {
 .padding-lg {
   padding: 1rem;
 }
-.padding-h-lg {
-  padding-left: 1rem;
-  padding-right: 1rem;
+.padding-b-sm {
+  padding-bottom: .25rem;
+}
+.padding-b-md {
+  padding-bottom: .5rem;
 }
 .padding-b-lg {
   padding-bottom: 1rem;
@@ -213,27 +204,6 @@ input[type="checkbox"] {
   border: 3px solid canvastext;
 }
 
-.shadow-sm {
-  box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.25);
-}
-.shadow-md {
-  box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.25);
-}
-.shadow-lg {
-  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.25);
-}
-@media (prefers-color-scheme: dark) {
-  .shadow-sm {
-    box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.5);
-  }
-  .shadow-md {
-    box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.5);
-  }
-  .shadow-lg {
-    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.5);
-  }
-}
-
 .font-small {
   font-size: .75rem;
 }
@@ -250,9 +220,6 @@ input[type="checkbox"] {
   font-weight: bold;
 }
 
-.relative {
-  position: relative;
-}
 
 .clickable {
   cursor: pointer;

src/App.tsx

@@ -1,8 +1,6 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
 import { 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'
@@ -10,21 +8,20 @@ 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)}>Developer Logs</button>
+        <button onClick={() => setShowLogs(!showLogs)}>Toggle Logging</button>
       </header>
       <div className={"flex-row justify-center flex-1 min-height-0"}>
         <main className={"flex-col align-center flex-1 scroll-y"}>
           <Routes>
             <Route path="/" element={<Home />} />
+            <Route path="/template" element={<TemplatePage />} />
             <Route path="/editor" element={<VisProg />} />
             <Route path="/robot" element={<Robot />} />
             <Route path="/ConnectedRobots" element={<ConnectedRobots />} />

src/components/Dialog.tsx

@@ -1,48 +0,0 @@
-import {type ReactNode, type RefObject, useEffect, useRef} from "react";
-
-export default function Dialog({
-  open,
-  close,
-  classname,
-  children,
-}: {
-  open: boolean;
-  close: () => void;
-  classname?: string;
-  children: ReactNode;
-}) {
-  const ref: RefObject<HTMLDialogElement | null> = useRef(null);
-
-  useEffect(() => {
-    if (open) {
-      ref.current?.showModal();
-    } else {
-      ref.current?.close();
-    }
-  }, [open]);
-
-  function handleClickOutside(event: React.MouseEvent) {
-    if (!ref.current) return;
-
-    const dialogDimensions = ref.current.getBoundingClientRect()
-    if (
-      event.clientX < dialogDimensions.left ||
-      event.clientX > dialogDimensions.right ||
-      event.clientY < dialogDimensions.top ||
-      event.clientY > dialogDimensions.bottom
-    ) {
-      close();
-    }
-  }
-
-  return (
-    <dialog
-      ref={ref}
-      onCancel={close}
-      onPointerDown={handleClickOutside}
-      className={classname}
-    >
-      {children}
-    </dialog>
-  );
-}

src/components/Icons/Next.tsx

@@ -1,8 +0,0 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
-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>;
-}

src/components/Icons/Pause.tsx

@@ -1,8 +0,0 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
-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>;
-}

src/components/Icons/Play.tsx

@@ -1,8 +0,0 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
-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>;
-}

src/components/Icons/Redo.tsx

@@ -1,8 +0,0 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
-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>;
-}

src/components/Icons/Replay.tsx

@@ -1,8 +0,0 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
-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>;
-}

src/components/Logging/Definitions.ts

@@ -1,34 +0,0 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
-import type {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";

src/components/Logging/Filters.module.css

@@ -1,8 +1,3 @@
-/*
-This program has been developed by students from the bachelor Computer Science at Utrecht
-University within the Software Project course.
-© Copyright Utrecht University (Department of Information and Computing Sciences)
-*/
 .filter-root {
   position: relative;
   display: flex;

src/components/Logging/Filters.tsx

@@ -1,6 +1,3 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
 import {useEffect, useRef, useState} from "react";
 
 import type {LogFilterPredicate} from "./useLogs.ts";
@@ -16,8 +13,9 @@ type Setter<T> = (value: T | ((prev: T) => T)) => void;
  * Mapping of log level names to their corresponding numeric severity.
  * Used for comparison in log filtering predicates.
  */
-const optionMapping: Map<string, number> = new Map([
+const optionMapping = new Map([
   ["ALL", 0],
+  ["LLM", 9],
   ["DEBUG", 10],
   ["INFO", 20],
   ["WARNING", 30],
@@ -95,7 +93,7 @@ function GlobalLevelFilter({
   filterPredicates: Map<string, LogFilterPredicate>;
   setFilterPredicates: Setter<Map<string, LogFilterPredicate>>;
 }) {
-  const selected = filterPredicates.get(GLOBAL_LOG_LEVEL_PREDICATE_KEY)?.value ?? "ALL";
+  const selected = filterPredicates.get(GLOBAL_LOG_LEVEL_PREDICATE_KEY)?.value || "ALL";
   const setSelected = (selected: string | null) => {
     if (!selected || !optionMapping.has(selected)) return;
 

src/components/Logging/Logging.module.css

@@ -1,8 +1,3 @@
-/*
-This program has been developed by students from the bachelor Computer Science at Utrecht
-University within the Software Project course.
-© Copyright Utrecht University (Department of Information and Computing Sciences)
-*/
 .logging-container {
   box-sizing: border-box;
 
@@ -10,6 +5,7 @@ University within the Software Project course.
   flex-shrink: 0;
 
   box-shadow: 0 0 1rem black;
+  padding: 1rem 1rem 0 1rem;
 }
 
 .no-numbers {
@@ -19,6 +15,8 @@ University within the Software Project course.
 }
 
 .log-container {
+  margin-bottom: .5rem;
+
   .accented-0, .accented-10 {
     background-color: color-mix(in oklab, canvas, rgb(159, 159, 159) 35%)
   }
@@ -34,7 +32,7 @@ University within the Software Project course.
 }
 
 .floating-button {
-  position: absolute;
+  position: fixed;
   bottom: 1rem;
   right: 1rem;
   box-shadow: 0 0 1rem rgba(0, 0, 0, 0.5);

src/components/Logging/Logging.tsx

@@ -1,26 +1,38 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
-import {type ComponentType, useEffect, useRef, useState} from "react";
+import {useEffect, useRef, useState} from "react";
+import {create} from "zustand";
+
 import formatDuration from "../../utils/formatDuration.ts";
 import {type LogFilterPredicate, type LogRecord, useLogs} from "./useLogs.ts";
 import Filters from "./Filters.tsx";
 import {type Cell, useCell} from "../../utils/cellStore.ts";
+
 import styles from "./Logging.module.css";
-import {
-  EXPERIMENT_FILTER_KEY,
-  EXPERIMENT_LOGGER_NAME,
-  type LoggingSettings,
-  type MessageComponentProps
-} from "./Definitions.ts";
-import {create} from "zustand";
+
 
 /**
- * Local Zustand store for logging UI preferences.
+ * Zustand store definition for managing user preferences related to logging.
+ *
+ * Includes flags for toggling relative timestamps and automatic scroll behavior.
+ */
+type LoggingSettings = {
+  /** Whether to display log timestamps as relative (e.g., "2m 15s ago") instead of absolute. */
+  showRelativeTime: boolean;
+  /** Updates the `showRelativeTime` setting. */
+  setShowRelativeTime: (showRelativeTime: boolean) => void;
+  /** Whether the log view should automatically scroll to the newest entry. */
+  scrollToBottom: boolean;
+  /** Updates the `scrollToBottom` setting. */
+  setScrollToBottom: (scrollToBottom: boolean) => void;
+};
+
+/**
+ * Global Zustand store for logging UI preferences.
  */
 const useLoggingSettings = create<LoggingSettings>((set) => ({
   showRelativeTime: false,
   setShowRelativeTime: (showRelativeTime: boolean) => set({ showRelativeTime }),
+  scrollToBottom: true,
+  setScrollToBottom: (scrollToBottom: boolean) => set({ scrollToBottom }),
 }));
 
 /**
@@ -33,7 +45,13 @@ const useLoggingSettings = create<LoggingSettings>((set) => ({
  * @param onUpdate - Optional callback triggered when the log entry updates.
  * @returns A JSX element displaying a formatted log message.
  */
-function LogMessage({ recordCell, onUpdate }: MessageComponentProps) {
+function LogMessage({
+  recordCell,
+  onUpdate,
+}: {
+  recordCell: Cell<LogRecord>,
+  onUpdate?: () => void,
+}) {
   const { showRelativeTime, setShowRelativeTime } = useLoggingSettings();
   const record = useCell(recordCell);
 
@@ -51,7 +69,7 @@ function LogMessage({ recordCell, onUpdate }: MessageComponentProps) {
   /** Simplifies the logger name by showing only the last path segment. */
   const normalizedName = record.name.split(".").pop() || record.name;
 
-  // Notify the parent component (e.g., for scroll updates) when this record changes.
+  // Notify parent component (e.g. for scroll updates) when this record changes.
   useEffect(() => {
     if (onUpdate) onUpdate();
   }, [record, onUpdate]);
@@ -59,10 +77,11 @@ function LogMessage({ recordCell, onUpdate }: MessageComponentProps) {
   return <div className={`${styles.logContainer} round-md border-lg flex-row gap-md`}>
     <div className={`${styles[`accented${normalizedLevelNo}`]} flex-col padding-sm justify-between`}>
       <span className={"mono bold"}>{record.levelname}</span>
-      <span className={"mono clickable font-small"} onClick={() => setShowRelativeTime(!showRelativeTime)}>{
-        showRelativeTime
-          ? formatDuration(record.relativeCreated)
-          : new Date(record.created * 1000).toLocaleTimeString()
+      <span className={"mono clickable font-small"}
+        onClick={() => setShowRelativeTime(!showRelativeTime)}
+      >{showRelativeTime
+        ? formatDuration(record.relativeCreated)
+        : new Date(record.created * 1000).toLocaleTimeString()
       }</span>
     </div>
     <div className={"flex-col flex-1 padding-sm"}>
@@ -81,18 +100,12 @@ function LogMessage({ recordCell, onUpdate }: MessageComponentProps) {
  * - A floating "Scroll to bottom" button when not at the bottom.
  *
  * @param recordCells - Array of reactive log records to display.
- * @param MessageComponent - A component to use to render each log message entry.
  * @returns A scrollable log list component.
  */
-export function LogMessages({
-  recordCells,
-  MessageComponent,
-}: {
-  recordCells: Cell<LogRecord>[],
-  MessageComponent: ComponentType<MessageComponentProps>,
-}) {
+function LogMessages({ recordCells }: { recordCells: Cell<LogRecord>[] }) {
   const scrollableRef = useRef<HTMLDivElement>(null);
-  const [scrollToBottom, setScrollToBottom] = useState(true);
+  const lastElementRef = useRef<HTMLLIElement>(null)
+  const { scrollToBottom, setScrollToBottom } = useLoggingSettings();
 
   // Disable auto-scroll if the user manually scrolls.
   useEffect(() => {
@@ -111,28 +124,30 @@ export function LogMessages({
   }, [scrollableRef, setScrollToBottom]);
 
   /**
-   * Scrolls the log messages to the bottom, making the latest messages visible.
+   * Scrolls the last log message into view if auto-scroll is enabled,
+   * or if forced (e.g., user clicks "Scroll to bottom").
    *
    * @param force - If true, forces scrolling even if `scrollToBottom` is false.
    */
-  function showBottom(force = false) {
-    if ((!scrollToBottom && !force) || !scrollableRef.current) return;
-    scrollableRef.current.scrollTo({top: scrollableRef.current.scrollHeight, left: 0, behavior: "smooth"});
+  function scrollLastElementIntoView(force = false) {
+    if ((!scrollToBottom && !force) || !lastElementRef.current) return;
+    lastElementRef.current.scrollIntoView({ behavior: "smooth" });
   }
 
-  return <div ref={scrollableRef} className={"min-height-0 scroll-y padding-h-lg padding-b-lg flex-1"}>
+  return <div ref={scrollableRef} className={"min-height-0 scroll-y padding-b-md"}>
     <ol className={`${styles.noNumbers} margin-0 flex-col gap-md`}>
       {recordCells.map((recordCell, i) => (
         <li key={`${i}_${recordCell.get().firstRelativeCreated}`}>
-          <MessageComponent recordCell={recordCell} onUpdate={showBottom} />
+          <LogMessage recordCell={recordCell} onUpdate={scrollLastElementIntoView} />
         </li>
       ))}
+      <li ref={lastElementRef}></li>
     </ol>
     {!scrollToBottom && <button
       className={styles.floatingButton}
       onClick={() => {
         setScrollToBottom(true);
-        showBottom(true);
+        scrollLastElementIntoView(true);
       }}
     >
       Scroll to bottom
@@ -149,27 +164,16 @@ export function LogMessages({
  * - Zustand-managed UI settings (auto-scroll, timestamp display).
  *
  * This component uses the `useLogs` hook to fetch and filter logs based on
- * active predicates and re-renders automatically as new logs arrive.
+ * active predicates, and re-renders automatically as new logs arrive.
  *
  * @returns The complete logging UI as a React element.
  */
 export default function Logging() {
-  // By default, filter experiment logs from this debug logger
-  const [filterPredicates, setFilterPredicates] = useState(new Map<string, LogFilterPredicate>([
-    [
-      EXPERIMENT_FILTER_KEY,
-      {
-        predicate: (r) => r.name == EXPERIMENT_LOGGER_NAME ? false : null,
-        priority: 999,
-        value: null,
-      } as LogFilterPredicate,
-    ],
-  ]));
+  const [filterPredicates, setFilterPredicates] = useState(new Map<string, LogFilterPredicate>());
   const { filteredLogs, distinctNames } = useLogs(filterPredicates)
-  distinctNames.delete(EXPERIMENT_LOGGER_NAME);
 
-  return <div className={`flex-col min-height-0 relative ${styles.loggingContainer}`}>
-    <div className={"flex-row gap-lg justify-between align-center padding-lg"}>
+  return <div className={`flex-col gap-lg min-height-0 ${styles.loggingContainer}`}>
+    <div className={"flex-row gap-lg justify-between align-center"}>
       <h2 className={"margin-0"}>Logs</h2>
       <Filters
         filterPredicates={filterPredicates}
@@ -177,6 +181,6 @@ export default function Logging() {
         agentNames={distinctNames}
       />
     </div>
-    <LogMessages recordCells={filteredLogs} MessageComponent={LogMessage} />
+    <LogMessages recordCells={filteredLogs} />
   </div>;
 }

src/components/Logging/useLogs.ts

@@ -1,26 +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 {useCallback, useEffect, useRef, useState} from "react";
 
 import {applyPriorityPredicates, type PriorityFilterPredicate} from "../../utils/priorityFiltering.ts";
 import {cell, type Cell} from "../../utils/cellStore.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.
  *
@@ -30,19 +12,21 @@ type ExtraLogRecordFields = {
  * @property levelno - The numeric severity value corresponding to `levelname`.
  * @property created - The UNIX timestamp (in seconds) when this record was created.
  * @property relativeCreated - The time (in milliseconds) since the logging system started.
+ * @property reference - (Optional) A reference identifier linking related log messages.
  * @property firstCreated - Timestamp of the first log in this reference group.
  * @property firstRelativeCreated - Relative timestamp of the first log in this reference group.
  */
 export type LogRecord = {
   name: string;
   message: string;
-  levelname: LevelName;
+  levelname: 'LLM' | 'DEBUG' | 'INFO' | 'WARNING' | 'ERROR' | 'CRITICAL' | string;
   levelno: number;
   created: number;
   relativeCreated: number;
+  reference?: string;
   firstCreated: number;
   firstRelativeCreated: number;
-} & ExtraLogRecordFields;
+};
 
 /**
  * A log filter predicate with priority support, used to determine whether
@@ -53,7 +37,7 @@ export type LogRecord = {
  *
  * @template T - The type of record being filtered (here, `LogRecord`).
  */
-export type LogFilterPredicate = PriorityFilterPredicate<LogRecord> & {
+export type LogFilterPredicate = PriorityFilterPredicate<LogRecord> & { 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   value: any };
 

src/components/MultilineTextField.tsx

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

src/components/ScrollIntoView.tsx

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

src/components/TextField.module.css

@@ -1,8 +1,3 @@
-/*
-This program has been developed by students from the bachelor Computer Science at Utrecht
-University within the Software Project course.
-© Copyright Utrecht University (Department of Information and Computing Sciences)
-*/
 .text-field {
   border: 1px solid transparent;
   border-radius: 5pt;

src/components/TextField.tsx

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

src/components/components.tsx

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

src/index.css

@@ -1,14 +1,3 @@
-{/*
-This program has been developed by students from the bachelor Computer Science at Utrecht
-University within the Software Project course.
-© Copyright Utrecht University (Department of Information and Computing Sciences)
-*/}
-
-/*
-This 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;
@@ -19,9 +8,6 @@ University within the Software Project course.
   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;
@@ -29,14 +15,6 @@ University within the Software Project course.
   -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;
@@ -63,7 +41,7 @@ button {
   font-size: 1em;
   font-weight: 500;
   font-family: inherit;
-  background-color: canvas;
+  background-color: #1a1a1a;
   cursor: pointer;
   transition: border-color 0.25s;
 }
@@ -86,6 +64,9 @@ button:focus-visible {
     --dropdown-menu-background-color: rgb(247, 247, 247);
     --dropdown-menu-border: rgba(207, 207, 207, 0.986);
   }
+  button {
+    background-color: #f9f9f9;
+  }
 }
 
 @media (prefers-color-scheme: dark) {

src/main.tsx

@@ -1,6 +1,3 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import { BrowserRouter } from 'react-router'

src/pages/ConnectedRobots/ConnectedRobots.tsx

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

src/pages/Home/Home.module.css

@@ -1,8 +1,3 @@
-/*
-This program has been developed by students from the bachelor Computer Science at Utrecht
-University within the Software Project course.
-© Copyright Utrecht University (Department of Information and Computing Sciences)
-*/
 .read_the_docs {
   color: #888;
 }

src/pages/Home/Home.tsx

@@ -1,6 +1,3 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
 import { Link } from 'react-router'
 import pepperLogo from '../../assets/pepper_transp2_small.svg'
 import styles from './Home.module.css'
@@ -24,6 +21,7 @@ function Home() {
       <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>
       </div>
     </div>

src/pages/MonitoringPage/MonitoringPage.module.css

@@ -1,271 +0,0 @@
-/*
-This program has been developed by students from the bachelor Computer Science at Utrecht
-University within the Software Project course.
-© Copyright Utrecht University (Department of Information and Computing Sciences)
-*/
-.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;
-}
-
-.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;
-  }
-}

src/pages/MonitoringPage/MonitoringPage.tsx

@@ -1,401 +0,0 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
-import React, { useCallback, useState } from 'react';
-import styles from './MonitoringPage.module.css';
-
-// Store & API
-import useProgramStore from "../../utils/programStore";
-import { 
-  nextPhase, 
-  useExperimentLogger, 
-  useStatusLogger, 
-  pauseExperiment, 
-  playExperiment, 
-  type ExperimentStreamData, 
-  type GoalUpdate, 
-  type TriggerUpdate, 
-  type CondNormsStateUpdate, 
-  type PhaseUpdate 
-} 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") => {
-    try {
-      setLoading(true);
-      switch (action) {
-        case "pause":
-          setIsPlaying(false);
-          await pauseExperiment();
-          break;
-        case "play":
-          setIsPlaying(true);
-          await playExperiment();
-          break;
-        case "nextPhase":
-          await nextPhase();
-          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") => 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>
-      </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;

src/pages/MonitoringPage/MonitoringPageAPI.ts

@@ -1,124 +0,0 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
-import React, { useEffect } from 'react';
-
-const API_BASE = "http://localhost:8000";
-const API_BASE_BP = API_BASE + "/button_pressed"; //UserInterruptAgent endpoint
-
-/**
- * HELPER: Unified sender function
- */
-export const sendAPICall = async (type: string, context: string, endpoint?: string) => {
-  try {
-    const response = await fetch(`${API_BASE_BP}${endpoint ?? ""}`, {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ type, context }),
-    });
-    if (!response.ok) throw new Error("Backend response error");
-    console.log(`API Call send - Type: ${type}, Context: ${context} ${endpoint ? `, Endpoint: ${endpoint}` : ""}`);
-  } catch (err) {
-    console.error(`Failed to send api call:`, err);
-  }
-};
-
-
-/**
- * Sends an API call to the CB for going to the next phase. 
- * In case we can't go to the next phase, the function will throw an error.
- */
-export async function nextPhase(): Promise<void> {
-  const type = "next_phase"
-  const context = ""
-  sendAPICall(type, context)
-}
-
-
-/**
- * Sends an API call to the CB for going to 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}/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}/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();
-  }, []);
-}

src/pages/MonitoringPage/MonitoringPageComponents.tsx

@@ -1,235 +0,0 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
-import React, { useEffect, useState } from 'react';
-import styles from './MonitoringPage.module.css';
-import { sendAPICall } from './MonitoringPageAPI';
-
-// --- 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("http://localhost:8000/robot/ping_stream");
-      eventSource.onmessage = (event) => {
-      
-        // Expecting messages in JSON format: `true` or `false`
-        //commented out this log as it clutters console logs, but might be useful to debug
-        //console.log("received message:", event.data);
-        try {
-          const data = JSON.parse(event.data);
-  
-          try {
-            setConnected(data)
-          }
-          catch {
-            console.log("couldnt extract connected from incoming ping data")
-          }
-  
-        } catch {
-          console.log("Ping message not in correct format:", event.data);
-        }
-      };
-  
-      // Clean up the SSE connection when the component unmounts.
-      return () => eventSource.close();
-    }, []);
-
-  return  (
-  <div>
-    <h3>Connection:</h3>
-    <p className={connected ? styles.connected : styles.disconnected }>{connected ? "● Robot is connected" : "● Robot is disconnected"}</p>
-  </div>
-  )
-}

src/pages/MonitoringPage/components/ExperimentLogs.module.css

@@ -1,39 +0,0 @@
-/*
-This program has been developed by students from the bachelor Computer Science at Utrecht
-University within the Software Project course.
-© Copyright Utrecht University (Department of Information and Computing Sciences)
-*/
-.logs {
-  /* grid-area used in MonitoringPage.module.css */
-  grid-area: logs;
-  box-shadow: var(--panel-shadow);
-
-  height: 900px;
-  width: 450px;
-
-  .live {
-    width: .5rem;
-    height: .5rem;
-    left: .5rem;
-    background: red;
-    border-radius: 50%;
-  }
-}
-
-.chat-message.alternate {
-  align-items: end;
-  text-align: end;
-
-  background-color: color-mix(in oklab, canvas, 75% #86c4fa);
-
-  .message-head {
-    flex-direction: row-reverse;
-  }
-}
-
-.download-list {
-  box-sizing: border-box;
-  list-style: none;
-  height: 50dvh;
-  min-width: 300px;
-}

src/pages/MonitoringPage/components/ExperimentLogs.tsx

@@ -1,189 +0,0 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
-import styles from "./ExperimentLogs.module.css";
-import {LogMessages} from "../../../components/Logging/Logging.tsx";
-import {useEffect, useMemo, useState} from "react";
-import {type LogFilterPredicate, type LogRecord, useLogs} from "../../../components/Logging/useLogs.ts";
-import capitalize from "../../../utils/capitalize.ts";
-import {useCell} from "../../../utils/cellStore.ts";
-import {
-  EXPERIMENT_FILTER_KEY,
-  EXPERIMENT_LOGGER_NAME,
-  type LoggingSettings,
-  type MessageComponentProps,
-} from "../../../components/Logging/Definitions.ts";
-import formatDuration from "../../../utils/formatDuration.ts";
-import {create} from "zustand";
-import Dialog from "../../../components/Dialog.tsx";
-import delayedResolve from "../../../utils/delayedResolve.ts";
-
-/**
- * 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={`http://localhost:8000/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("http://localhost:8000/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>;
-}

src/pages/Robot/Robot.tsx

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

src/pages/TemplatePage/Template.tsx

@@ -0,0 +1,11 @@
+import Counter from '../../components/components.tsx'
+
+function TemplatePage() {
+  return (
+    <>
+      <Counter />
+    </>
+  )
+}
+
+export default TemplatePage

src/pages/VisProgPage/VisProg.module.css

@@ -1,8 +1,3 @@
-/*
-This program has been developed by students from the bachelor Computer Science at Utrecht
-University within the Software Project course.
-© Copyright Utrecht University (Department of Information and Computing Sciences)
-*/
 /* editor UI */
 
 .inner-editor-container {
@@ -188,18 +183,6 @@ University within the Software Project course.
   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;

src/pages/VisProgPage/VisProg.tsx

@@ -1,6 +1,3 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
 import {
   Background,
   Controls,
@@ -10,6 +7,7 @@ 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';
@@ -20,10 +18,8 @@ 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 |--
 
@@ -203,10 +199,8 @@ 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();}
 
@@ -217,26 +211,13 @@ 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/>

src/pages/VisProgPage/VisProgLogic.tsx

@@ -1,6 +1,3 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
 import useProgramStore from "../../utils/programStore";
 import orderPhaseNodeArray from "../../utils/orderPhaseNodes";
 import useFlowStore from './visualProgrammingUI/VisProgStores';
@@ -9,14 +6,14 @@ import type { PhaseNode } from "./visualProgrammingUI/nodes/PhaseNode";
 
 /**
  * Reduces the graph into its phases' information and recursively calls their reducing function
- */ 
+ */
 export function graphReducer() {
   const { nodes } = useFlowStore.getState();
   return orderPhaseNodeArray(nodes.filter((n) => n.type == 'phase') as PhaseNode [])
     .map((n) => {
       const reducer = NodeReduces['phase'];
       return reducer(n, nodes)
-    }); 
+    });
 }
 
 

src/pages/VisProgPage/visualProgrammingUI/EditorUndoRedo.ts

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

src/pages/VisProgPage/visualProgrammingUI/HandleRuleLogic.ts

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

src/pages/VisProgPage/visualProgrammingUI/HandleRules.ts

@@ -1,6 +1,3 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
 import {
   type HandleRule,
   ruleResult

src/pages/VisProgPage/visualProgrammingUI/NodeRegistry.ts

@@ -1,6 +1,3 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
 import EndNode, {
   EndConnectionTarget,
   EndConnectionSource,

src/pages/VisProgPage/visualProgrammingUI/VisProgStores.tsx

@@ -1,6 +1,3 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
 import { create } from 'zustand';
 import {
   applyNodeChanges,

src/pages/VisProgPage/visualProgrammingUI/VisProgTypes.tsx

@@ -1,6 +1,3 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
 // VisProgTypes.ts
 import type {
   Edge,

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

@@ -1,6 +1,3 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
 import { useDraggable } from '@neodrag/react';
 import { useReactFlow, type XYPosition } from '@xyflow/react';
 import { type ReactNode, useCallback, useRef, useState } from 'react';

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

@@ -1,6 +1,3 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
 /* contains all logic for the VisProgEditor warning system
 *
 * Missing but desirable features:

src/pages/VisProgPage/visualProgrammingUI/components/GestureValueEditor.module.css

@@ -1,8 +1,4 @@
-/*
-This program has been developed by students from the bachelor Computer Science at Utrecht
-University within the Software Project course.
-© Copyright Utrecht University (Department of Information and Computing Sciences)
-*/
+
 .gestureEditor {
   display: flex;
   flex-direction: column;

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

@@ -1,6 +1,3 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
 import { useState, useRef } from "react";
 import styles from './GestureValueEditor.module.css'
 

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

@@ -1,6 +1,3 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
 import {NodeToolbar, useReactFlow} from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
 import {type JSX, useState} from "react";

src/pages/VisProgPage/visualProgrammingUI/components/Plan.default.ts

@@ -0,0 +1,7 @@
+import type { Plan, PlanElement } from "./Plan";
+
+export const defaultPlan: Plan = {
+    name: "Default Plan",
+    id: "-1",
+    steps: [] as PlanElement[],
+}

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

@@ -1,8 +1,5 @@
-// 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"
+import { GoalReduce } from "../nodes/GoalNode"
 
 
 export type Plan = {
@@ -124,6 +121,4 @@ export function GetActionValue(action: Action) {
             return returnAction.goal;
         default:
     }
-}
-
-
+}

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

@@ -1,8 +1,5 @@
-// 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 { GoalNode } from "../nodes/GoalNode"
 import type { Goal, Plan } from "./Plan"
 
 /**
@@ -35,5 +32,4 @@ export function deleteGoalInPlanByID(plan: Plan, goalID: string) {
         steps: plan.steps.filter((x) => x.id !== goalID)
     }
     return updatedPlan.steps.length == 0 ? undefined : updatedPlan
-}
-
+}

src/pages/VisProgPage/visualProgrammingUI/components/PlanEditor.module.css

@@ -1,8 +1,3 @@
-/*
-This program has been developed by students from the bachelor Computer Science at Utrecht
-University within the Software Project course.
-© Copyright Utrecht University (Department of Information and Computing Sciences)
-*/
 .planDialog {
   overflow:visible;
   width: 80vw;

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

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

src/pages/VisProgPage/visualProgrammingUI/components/PlanEditor/ActionAdder.tsx

@@ -1,72 +0,0 @@
-import { TextField } from "../../../../../components/TextField";
-import GestureValueEditor from "./GestureValueEditor";
-import type { ActionTypes } from "./Plan";
-import styles from './PlanEditor.module.css';
-
-type ActionAdderProps = {
-  newActionType: ActionTypes;
-  setNewActionType: (t: ActionTypes) => void;
-  newActionValue: string;
-  setNewActionValue: (v: string) => void;
-  setNewActionGestureType: (b: boolean) => void;
-  onAdd: () => void;
-  showSuggestion: boolean;
-};
-
-
-export function ActionAdder({
-  newActionType,
-  setNewActionType,
-  newActionValue,
-  setNewActionValue,
-  setNewActionGestureType,
-  onAdd,
-  showSuggestion,
-}: ActionAdderProps) {
-  return (
-    <div className={styles.planEditorLeft}>
-      <h4>Add Action</h4>
-
-      {showSuggestion && (
-        <div className={styles.stepSuggestion}>
-          <label>Filled in as a suggestion!</label>
-          <label>Feel free to change!</label>
-        </div>
-      )}
-
-      <label>
-        Action Type <wbr />
-        <select
-          value={newActionType}
-          onChange={(e) => {
-            setNewActionType(e.target.value as ActionTypes);
-            setNewActionValue("");
-          }}
-        >
-          <option value="speech">Speech Action</option>
-          <option value="gesture">Gesture Action</option>
-          <option value="llm">LLM Action</option>
-        </select>
-      </label>
-
-      {newActionType === "gesture" ? (
-        <GestureValueEditor
-          value={newActionValue}
-          setValue={setNewActionValue}
-          setType={setNewActionGestureType}
-          placeholder="Gesture name"
-        />
-      ) : (
-        <TextField
-          value={newActionValue}
-          setValue={setNewActionValue}
-          placeholder={newActionType === "speech" ? "Speech text" : "LLM goal"}
-        />
-      )}
-
-      <button type="button" disabled={!newActionValue} onClick={onAdd}>
-        Add Step
-      </button>
-    </div>
-  );
-}

src/pages/VisProgPage/visualProgrammingUI/components/PlanEditor/Plan.default.ts

@@ -1,10 +0,0 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
-import type { Plan, PlanElement } from "./Plan";
-
-export const defaultPlan: Plan = {
-    name: "Default Plan",
-    id: "-1",
-    steps: [] as PlanElement[],
-}

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

@@ -1,214 +0,0 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
-import {useRef, useState} from "react";
-import useFlowStore from "../../VisProgStores.tsx";
-import styles from './PlanEditor.module.css';
-import { type Action, type ActionTypes, type Plan } from "./Plan.tsx";
-import { defaultPlan } from "./Plan.default.ts";
-import { TextField } from "../../../../../components/TextField.tsx";
-import { StepsList } from "./StepList.tsx";
-import { ActionAdder } from "./ActionAdder.tsx";
-
-
-
-type PlanEditorDialogProps = {
-  plan?: Plan;
-  onSave: (plan: Plan | undefined) => void;
-  description? : string;
-};
-
-
-/**
- * Creates an action, as a step for a plan.
- * @param type the type of action to build
- * @param value the value of this action to build
- * @param isGestureTag whether or not this action, restricted to gestures, is a tag.
- * @returns An action
- */
-function buildAction(
-  type: ActionTypes,
-  value: string,
-  isGestureTag: boolean
-): Action {
-  const id = crypto.randomUUID();
-
-  switch (type) {
-    case "speech":
-      return { id, text: value, type: "speech" };
-    case "gesture":
-      return { id, gesture: value, isTag: isGestureTag, type: "gesture" };
-    case "llm":
-      return { id, goal: value, type: "llm" };
-  }
-}
-
-
-
-
-
-export default function PlanEditorDialog({
-  plan,
-  onSave,
-  description,
-}: PlanEditorDialogProps) {
-  // UseStates and references
-  const dialogRef = useRef<HTMLDialogElement | null>(null);
-  const [draftPlan, setDraftPlan] = useState<Plan | null>(null);
-  const [newActionType, setNewActionType] = useState<ActionTypes>("speech");
-  const [newActionGestureType, setNewActionGestureType] = useState<boolean>(true);
-  const [newActionValue, setNewActionValue] = useState("");
-  const [hasInteractedWithPlan, setHasInteractedWithPlan] = useState<boolean>(false)
-  const { setScrollable } = useFlowStore();
-  const nodes = useFlowStore().nodes;
-
-  //Button Actions
-  const openCreate = () => {
-    setScrollable(false);
-    setDraftPlan({...structuredClone(defaultPlan), id: crypto.randomUUID()});
-    dialogRef.current?.showModal();
-  };
-
-  const openCreateWithDescription = () => {
-    setScrollable(false);
-    setDraftPlan({...structuredClone(defaultPlan), id: crypto.randomUUID(), name: description!});
-    setNewActionType("llm")
-    setNewActionValue(description!)
-    dialogRef.current?.showModal();
-  }
-
-  const openEdit = () => {
-    setScrollable(false);
-    if (!plan) return;
-    setDraftPlan(structuredClone(plan));
-    dialogRef.current?.showModal();
-  };
-
-  const close = () => {
-    setScrollable(true);
-    dialogRef.current?.close();
-    setDraftPlan(null);
-  };
-
-  const addAction = () => {
-    if (!draftPlan) return;
-    // Add action to steps
-    const action = buildAction(newActionType, newActionValue, newActionGestureType);
-    setDraftPlan({
-        ...draftPlan,
-        steps: [...draftPlan.steps, action],});
-
-    // Reset current action building
-    setNewActionValue("");
-    setNewActionType("speech"); 
-    setHasInteractedWithPlan(true);
-  }
-                            
-
-  const showSuggestion : boolean = (
-    !plan && 
-    !!description && 
-    draftPlan !== null && 
-    draftPlan.steps.length === 0 && 
-    !hasInteractedWithPlan)
-
-  return (<>
-      {/* Create and edit buttons */}
-      {!plan && (
-          <button className={styles.nodeButton} onClick={description ? openCreateWithDescription : openCreate}>
-          Create Plan
-          </button>
-      )}
-      {plan && (
-          <button className={styles.nodeButton} onClick={openEdit}>
-          Edit Plan
-          </button>
-      )}
-
-      {/* Start of dialog (plan editor) */}
-      <dialog
-        ref={dialogRef}
-        className={`${styles.planDialog}`}
-        //onWheel={(e) => e.stopPropagation()}
-        data-testid={"PlanEditorDialogTestID"}
-      >
-      <form method="dialog" className="flex-col gap-md">
-          <h3> {draftPlan?.id === plan?.id ? "Edit Plan" : "Create Plan"} </h3>
-          {/* Plan name text field */}
-          {draftPlan && (
-              <TextField
-                  value={draftPlan.name}
-                  setValue={(name) =>
-                  setDraftPlan({ ...draftPlan, name })}
-              placeholder="Plan name"
-              data-testid="name_text_field"/>
-          )}
-
-          {/* Entire "bottom" part (adder and steps) without cancel, confirm and reset */}
-          {draftPlan && (<div className={styles.planEditor}>
-              <div className={styles.planEditorLeft}>
-              {/* Left Side (Action Adder) */}
-                <ActionAdder 
-                  newActionType={newActionType}
-                  setNewActionType={setNewActionType}
-                  newActionValue={newActionValue}
-                  setNewActionValue={setNewActionValue}
-                  setNewActionGestureType={setNewActionGestureType}
-                  onAdd={addAction}
-                  showSuggestion={showSuggestion}
-                />
-              </div>
-
-              {/* Right Side (Steps shown) */}
-              <div className={styles.planEditorRight}>
-                  <h4>Steps</h4>
-                  {/* Map over all steps */}
-                  <StepsList
-                    steps={draftPlan.steps}
-                    nodes={nodes}
-                    onRemove={(id) =>
-                      setDraftPlan({
-                        ...draftPlan,
-                        steps: draftPlan.steps.filter(s => s.id !== id),
-                      })
-                    }
-                  />
-              </div>
-            </div>
-          )}
-
-          {/* Buttons */}
-          <div className="flex-row gap-md">
-              {/* Close button */}
-              <button type="button" onClick={close}>
-              Cancel
-              </button>
-
-              {/* Confirm/ Create button */}
-              <button
-              type="button"
-              disabled={!draftPlan}
-              onClick={() => {
-                  if (!draftPlan) return;
-                  onSave(draftPlan);
-                  close();
-              }}>
-              {draftPlan?.id === plan?.id ? "Confirm" : "Create"}
-              </button>
-
-              {/* Reset button */}
-              <button
-              type="button"
-              disabled={!draftPlan}
-              onClick={() => {
-                  onSave(undefined);
-                  close();
-              }}>
-              Reset
-              </button>
-        </div>
-      </form>
-    </dialog>
-  </>
-);
-}

src/pages/VisProgPage/visualProgrammingUI/components/PlanEditor/StepList.tsx

@@ -1,54 +0,0 @@
-import { GetActionValue, type PlanElement } from "./Plan";
-import styles from './PlanEditor.module.css';
-import { type Node} from "@xyflow/react"
-
-type StepsListProps = {
-  steps: PlanElement[];
-  onRemove: (id: string) => void;
-  nodes: Node[];
-};
-
-function getStepLabel(
-  step: PlanElement,
-  nodes: Node[],
-): string {
-  if (step.type === "goal") {
-    // For goals, we lookup the value through the nodes in the diagram
-    const node = nodes.find(n => n.id === step.id);
-    return (node?.data?.name as string)?.trim() || "unnamed goal";
-  }
-
-  // Not a goal, we lookup the correct action value of the action
-  return GetActionValue(step) ?? "";
-}
-
-export function StepsList({ steps, onRemove, nodes }: StepsListProps) {
-  if (steps.length === 0) {
-    return <div className={styles.emptySteps}>No steps yet</div>;
-  }
-
-  return (
-    <>
-      {steps.map((step, index) => (
-        <div
-          key={step.id}
-          role="button"
-          tabIndex={0}
-          className={styles.planStep}
-          onClick={() => onRemove(step.id)}
-          onKeyDown={(e) => {
-            if (e.key === "Enter" || e.key === " ") {
-              onRemove(step.id);
-            }
-          }}
-        >
-          <span className={styles.stepIndex}>{index + 1}.</span>
-          <span className={styles.stepType}>{step.type}:</span>
-          <span className={styles.stepName}>
-            {getStepLabel(step, nodes)}
-          </span>
-        </div>
-      ))}
-    </>
-  );
-}

src/pages/VisProgPage/visualProgrammingUI/components/RuleBasedHandle.module.css

@@ -1,8 +1,3 @@
-/*
-This program has been developed by students from the bachelor Computer Science at Utrecht
-University within the Software Project course.
-© Copyright Utrecht University (Department of Information and Computing Sciences)
-*/
 :global(.react-flow__handle.source){
     border-radius: 100%;
 }

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

@@ -1,6 +1,3 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
 import {
   Handle,
   type HandleProps,

src/pages/VisProgPage/visualProgrammingUI/components/SaveLoadPanel.module.css

@@ -1,8 +1,3 @@
-/*
-This program has been developed by students from the bachelor Computer Science at Utrecht
-University within the Software Project course.
-© Copyright Utrecht University (Department of Information and Computing Sciences)
-*/
 .save-load-panel {
   border-radius: 0 0 5pt 5pt;
   background-color: canvas;

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

@@ -1,6 +1,3 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
 import {type ChangeEvent, useRef, useState} from "react";
 import useFlowStore from "../VisProgStores";
 import visProgStyles from "../../VisProg.module.css";
@@ -32,8 +29,6 @@ export default function SaveLoadPanel() {
       const text = await file.text();
       const parsed = JSON.parse(text) as SavedProject;
       if (!parsed.nodes || !parsed.edges) throw new Error("Invalid file format");
-      const {nodes, unregisterWarningsForId} = useFlowStore.getState();
-      nodes.forEach((node) => {unregisterWarningsForId(node.id);});
       setNodes(parsed.nodes);
       setEdges(parsed.edges);
     } catch (e) {

src/pages/VisProgPage/visualProgrammingUI/components/WarningSidebar.module.css

@@ -1,8 +1,3 @@
-/*
-This program has been developed by students from the bachelor Computer Science at Utrecht
-University within the Software Project course.
-© Copyright Utrecht University (Department of Information and Computing Sciences)
-*/
 .warnings-sidebar {
     min-width: auto;
     max-width: 340px;

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

@@ -1,6 +1,3 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
 import {useReactFlow, useStoreApi} from "@xyflow/react";
 import clsx from "clsx";
 import {useEffect, useState} from "react";

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

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

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

@@ -1,6 +1,3 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
 import {
   type NodeProps,
   Position,
@@ -116,7 +113,9 @@ export default function BasicBeliefNode(props: NodeProps<BasicBeliefNode>) {
     updateNodeData(props.id, {...data, belief: {...data.belief, description: value}});
   }
 
-  const emotionOptions = ["sad", "angry", "surprise", "fear", "happy", "disgust", "neutral"];
+  // Use this
+  const emotionOptions = ["Happy", "Angry", "Sad", "Cheerful"]
+
 
   let placeholder = ""
   let wrapping = ""
@@ -192,7 +191,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"},{nodeType:"InferredBelief",handleId:"inferred_belief"}]),
+          allowOnlyConnectionsFromHandle([{nodeType:"trigger",handleId:"TriggerBeliefs"}, {nodeType:"norm",handleId:"NormBeliefs"}]),
         ]}  title="Connect to any number of trigger and/or normNode(-s)"/>
       </div>
     </>

src/pages/VisProgPage/visualProgrammingUI/nodes/BeliefGlobals.ts

@@ -1,6 +1,3 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
 import {getOutgoers, type Node} from '@xyflow/react';
 import {type HandleRule, type RuleResult, ruleResult} from "../HandleRuleLogic.ts";
 import useFlowStore from "../VisProgStores.tsx";

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

@@ -1,6 +1,3 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
 import type { EndNodeData } from "./EndNode";
 
 /**

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

@@ -1,6 +1,3 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
 import {
   type NodeProps,
   Position,

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

@@ -1,6 +1,3 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
 import type { GoalNodeData } from "./GoalNode";
 
 /**

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

@@ -1,6 +1,3 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
 import {
   type NodeProps,
   Position,
@@ -14,11 +11,11 @@ import { TextField } from '../../../../components/TextField';
 import {MultiConnectionHandle} from "../components/RuleBasedHandle.tsx";
 import {allowOnlyConnectionsFromHandle, allowOnlyConnectionsFromType} from "../HandleRules.ts";
 import useFlowStore from '../VisProgStores';
-import {DoesPlanIterate, HasCheckingSubGoal, PlanReduce, type Plan } from '../components/PlanEditor/Plan.tsx';
-import PlanEditorDialog from '../components/PlanEditor/PlanEditor.tsx';
+import {DoesPlanIterate, HasCheckingSubGoal, PlanReduce, type Plan } from '../components/Plan';
+import PlanEditorDialog from '../components/PlanEditor';
 import { MultilineTextField } from '../../../../components/MultilineTextField';
-import { defaultPlan } from '../components/PlanEditor/Plan.default.ts';
-import { deleteGoalInPlanByID, insertGoalInPlan } from '../components/PlanEditor/PlanEditingFunctions.tsx';
+import { defaultPlan } from '../components/Plan.default.ts';
+import { deleteGoalInPlanByID, insertGoalInPlan } from '../components/PlanEditingFunctions.tsx';
 
 /**
  * The default data dot a phase node

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

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

src/pages/VisProgPage/visualProgrammingUI/nodes/InferredBeliefNode.module.css

@@ -1,8 +1,3 @@
-/*
-This program has been developed by students from the bachelor Computer Science at Utrecht
-University within the Software Project course.
-© Copyright Utrecht University (Department of Information and Computing Sciences)
-*/
 .operator-switch {
     display: inline-flex;
     align-items: center;

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

@@ -1,6 +1,3 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
 import {getConnectedEdges, type Node, type NodeProps, Position, useNodeConnections} from '@xyflow/react';
 import {useEffect, useState} from "react";
 import styles from '../../VisProg.module.css';

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

@@ -1,6 +1,3 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
 import type { NormNodeData } from "./NormNode";
 
 /**

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

@@ -1,6 +1,3 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
 import {
   type NodeProps,
   Position,

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

@@ -1,6 +1,3 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
 import type { PhaseNodeData } from "./PhaseNode";
 
 /**

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

@@ -1,6 +1,3 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
 import {
   type NodeProps,
   Position,

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

@@ -1,6 +1,3 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
 import type { StartNodeData } from "./StartNode";
 
 /**

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

@@ -1,6 +1,3 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
 import {
   type NodeProps,
   Position,

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

@@ -1,6 +1,3 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
 import type { TriggerNodeData } from "./TriggerNode";
 
 /**

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

@@ -1,6 +1,3 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
 import {
   type NodeProps,
   Position,
@@ -13,12 +10,12 @@ import styles from '../../VisProg.module.css';
 import {MultiConnectionHandle, SingleConnectionHandle} from "../components/RuleBasedHandle.tsx";
 import {allowOnlyConnectionsFromHandle, allowOnlyConnectionsFromType} from "../HandleRules.ts";
 import useFlowStore from '../VisProgStores';
-import {PlanReduce, type Plan } from '../components/PlanEditor/Plan.tsx';
-import PlanEditorDialog from '../components/PlanEditor/PlanEditor.tsx';
+import {PlanReduce, type Plan } from '../components/Plan';
+import PlanEditorDialog from '../components/PlanEditor';
 import {BeliefGlobalReduce} from "./BeliefGlobals.ts";
 import type { GoalNode } from './GoalNode.tsx';
-import { defaultPlan } from '../components/PlanEditor/Plan.default.ts';
-import { deleteGoalInPlanByID, insertGoalInPlan } from '../components/PlanEditor/PlanEditingFunctions.tsx';
+import { defaultPlan } from '../components/Plan.default.ts';
+import { deleteGoalInPlanByID, insertGoalInPlan } from '../components/PlanEditingFunctions.tsx';
 import { TextField } from '../../../../components/TextField.tsx';
 
 /**
@@ -142,7 +139,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"
       />

src/utils/SaveLoad.ts

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

src/utils/capitalize.ts

@@ -1,3 +0,0 @@
-export default function (s: string) {
-    return s.charAt(0).toUpperCase() + s.slice(1);
-}

src/utils/cellStore.ts

@@ -1,6 +1,3 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
 import {useSyncExternalStore} from "react";
 
 type Unsub = () => void;

src/utils/delayedResolve.ts

@@ -1,7 +0,0 @@
-export default async function <T>(promise: Promise<T>, minDelayMs: number): Promise<T> {
-  const [result] = await Promise.all([
-    promise,
-    new Promise(resolve => setTimeout(resolve, minDelayMs))
-  ]);
-  return result;
-}

src/utils/duplicateIndices.ts

@@ -1,6 +1,3 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
 /**
  * Find the indices of all elements that occur more than once.
  *

src/utils/formatDuration.ts

@@ -1,6 +1,3 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
 /**
  * Format a time duration like `HH:MM:SS.mmm`.
  *

src/utils/orderPhaseNodes.ts

@@ -1,6 +1,3 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
 import type {PhaseNode} from "../pages/VisProgPage/visualProgrammingUI/nodes/PhaseNode.tsx";
 
 /**

src/utils/priorityFiltering.ts

@@ -1,13 +1,10 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
 export type PriorityFilterPredicate<T> = {
   priority: number;
   predicate: (element: T) => boolean | null; // The predicate and its priority are ignored if it returns null.
 }
 
 /**
- * Applies a list of priority predicates to an element. For all predicates that don't return null, if the ones with the highest level return true, then this function returns true. Or conversely, if the one with the highest level returns false, then this function returns false.
+ * Applies a list of priority predicates to an element. For all predicates that don't return null, if the ones with the highest level return true, then this function returns true.
  * @param element The element to apply the predicates to.
  * @param predicates The list of predicates to apply.
  */

src/utils/programStore.ts

@@ -1,13 +1,8 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
 import {create} from "zustand";
 
 // the type of a reduced program
 export type ReducedProgram = { phases: Record<string, unknown>[] };
 
-export type GoalWithDepth = Record<string, unknown> & { level: number };
-
 /**
  * the type definition of the programStore
  */
@@ -20,10 +15,8 @@ export type ProgramState = {
   // Utility functions:
   // to avoid having to manually go through the entire state for every instance where data is required
   getPhaseIds: () => string[];
-  getPhaseNames: () => string[];
   getNormsInPhase: (currentPhaseId: string) => Record<string, unknown>[];
   getGoalsInPhase: (currentPhaseId: string) => Record<string, unknown>[];
-  getGoalsWithDepth: (currentPhaseId: string) => GoalWithDepth[];
   getTriggersInPhase: (currentPhaseId: string) => Record<string, unknown>[];
   // if more specific utility functions are needed they can be added here:
 }
@@ -50,10 +43,6 @@ const useProgramStore = create<ProgramState>((set, get) => ({
    * gets the ids of all phases in the program
    */
   getPhaseIds: () => get().currentProgram.phases.map(entry => entry["id"] as string),
-   /**
-   * gets the names of all phases in the program
-   */
-  getPhaseNames: () => get().currentProgram.phases.map((entry) => (entry["name"] as string)),
   /**
    * gets the norms for the provided phase
    */
@@ -76,50 +65,6 @@ const useProgramStore = create<ProgramState>((set, get) => ({
     }
     throw new Error(`phase with id:"${currentPhaseId}" not found`)
   },
-
-  getGoalsWithDepth: (currentPhaseId: string) => {
-    const program = get().currentProgram;
-    const phase = program.phases.find(val => val["id"] === currentPhaseId);
-    
-    if (!phase) {
-      throw new Error(`phase with id:"${currentPhaseId}" not found`);
-    }
-
-    const rootGoals = phase["goals"] as Record<string, unknown>[];
-    const flatList: GoalWithDepth[] = [];
-
-    const isGoal = (item: Record<string, unknown>) => {
-      return item["plan"] !== undefined;
-    };
-
-    // Recursive helper function
-    const traverse = (goals: Record<string, unknown>[], depth: number) => {
-      goals.forEach((goal) => {
-        // 1. Add the current goal to the list
-        flatList.push({ ...goal, level: depth });
-
-        // 2. Check for children
-        const plan = goal["plan"] as Record<string, unknown> | undefined;
-        
-        if (plan && Array.isArray(plan["steps"])) {
-           const steps = plan["steps"] as Record<string, unknown>[];
-           
-           // 3. FILTER: Only recurse on steps that are actually goals
-           // If we just passed 'steps', we might accidentally add Actions/Speeches to the goal list
-           const childGoals = steps.filter(isGoal);
-
-           if (childGoals.length > 0) {
-             traverse(childGoals, depth + 1);
-           }
-        }
-      });
-    };
-
-    // Start traversal
-    traverse(rootGoals, 0);
-
-    return flatList;
-  },
   /**
    * gets the triggers for the provided phase
    */

test/components.test.tsx

@@ -1,6 +1,3 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
 import userEvent from '@testing-library/user-event';
 import { render, screen} from '@testing-library/react';
 import Counter from '../src/components/components';

test/components/Logging/Filters.test.tsx

@@ -1,6 +1,3 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
 import {render, screen, waitFor, fireEvent} from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import * as React from "react";

test/components/Logging/Logging.test.tsx

@@ -1,6 +1,3 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
 import {render, screen, fireEvent, act, waitFor} from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import "@testing-library/jest-dom";
@@ -14,6 +11,8 @@ const loggingStoreRef: { current: null | { setState: (state: Partial<LoggingSett
 type LoggingSettingsState = {
   showRelativeTime: boolean;
   setShowRelativeTime: (show: boolean) => void;
+  scrollToBottom: boolean;
+  setScrollToBottom: (scroll: boolean) => void;
 };
 
 jest.mock("zustand", () => {
@@ -60,8 +59,8 @@ type LoggingComponent = typeof import("../../../src/components/Logging/Logging.t
 let Logging: LoggingComponent;
 
 beforeAll(async () => {
-  if (!Element.prototype.scrollTo) {
-    Object.defineProperty(Element.prototype, "scrollTo", {
+  if (!Element.prototype.scrollIntoView) {
+    Object.defineProperty(Element.prototype, "scrollIntoView", {
       configurable: true,
       writable: true,
       value: function () {},
@@ -85,6 +84,7 @@ afterEach(() => {
 function resetLoggingStore() {
   loggingStoreRef.current?.setState({
     showRelativeTime: false,
+    scrollToBottom: true,
   });
 }
 
@@ -151,7 +151,7 @@ describe("Logging component", () => {
     ];
     mockUseLogs.mockReturnValue({filteredLogs: logs, distinctNames: new Set()});
 
-    const scrollSpy = jest.spyOn(Element.prototype, "scrollTo").mockImplementation(() => {});
+    const scrollSpy = jest.spyOn(Element.prototype, "scrollIntoView").mockImplementation(() => {});
     const user = userEvent.setup();
     const view = render(<Logging/>);
 
@@ -175,7 +175,7 @@ describe("Logging component", () => {
     const logCell = makeCell({message: "Initial", firstRelativeCreated: 42});
     mockUseLogs.mockReturnValue({filteredLogs: [logCell], distinctNames: new Set()});
 
-    const scrollSpy = jest.spyOn(Element.prototype, "scrollTo").mockImplementation(() => {});
+    const scrollSpy = jest.spyOn(Element.prototype, "scrollIntoView").mockImplementation(() => {});
     render(<Logging/>);
 
     await waitFor(() => {
@@ -209,7 +209,7 @@ describe("Logging component", () => {
 
     const initialMap = firstProps.filterPredicates;
     expect(initialMap).toBeInstanceOf(Map);
-    expect(initialMap.size).toBe(1);  // Initially, only filter out experiment logs
+    expect(initialMap.size).toBe(0);
     expect(mockUseLogs).toHaveBeenCalledWith(initialMap);
 
     const updatedPredicate: LogFilterPredicate = {

test/components/Logging/useLogs.test.tsx

@@ -1,6 +1,3 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
 import { render, screen, act } from "@testing-library/react";
 import "@testing-library/jest-dom";
 import {type LogRecord, useLogs} from "../../../src/components/Logging/useLogs.ts";

test/eslint.config.js.ts

@@ -1,3 +0,0 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)

test/pages/connectedRobots/ConnectedRobots.test.tsx

@@ -1,6 +1,3 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
 import { render, screen, act, cleanup, waitFor } from '@testing-library/react';
 import ConnectedRobots from '../../../src/pages/ConnectedRobots/ConnectedRobots';
 

test/pages/monitoringPage/MonitoringPage.test.tsx

@@ -1,302 +0,0 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
-import { render, screen, fireEvent, act } from '@testing-library/react';
-import '@testing-library/jest-dom';
-import MonitoringPage from '../../../src/pages/MonitoringPage/MonitoringPage';
-import useProgramStore from '../../../src/utils/programStore';
-import * as MonitoringAPI from '../../../src/pages/MonitoringPage/MonitoringPageAPI';
-import * as VisProg from '../../../src/pages/VisProgPage/VisProgLogic';
-
-// --- Mocks ---
-
-// Mock the Zustand store
-jest.mock('../../../src/utils/programStore', () => ({
-  __esModule: true,
-  default: jest.fn(),
-}));
-
-// Mock the API layer including hooks
-jest.mock('../../../src/pages/MonitoringPage/MonitoringPageAPI', () => ({
-  nextPhase: jest.fn(),
-  resetPhase: jest.fn(),
-  pauseExperiment: jest.fn(),
-  playExperiment: jest.fn(),
-  // We mock these to capture the callbacks and trigger them manually in tests
-  useExperimentLogger: jest.fn(),
-  useStatusLogger: jest.fn(),
-}));
-
-// Mock VisProg functionality
-jest.mock('../../../src/pages/VisProgPage/VisProgLogic', () => ({
-  graphReducer: jest.fn(),
-  runProgram: jest.fn(),
-}));
-
-// Mock Child Components to reduce noise (optional, but keeps unit test focused)
-// For this test, we will allow them to render to test data passing, 
-// but we mock RobotConnected as it has its own side effects
-jest.mock('../../../src/pages/MonitoringPage/MonitoringPageComponents', () => {
-  const original = jest.requireActual('../../../src/pages/MonitoringPage/MonitoringPageComponents');
-  return {
-    ...original,
-    RobotConnected: () => <div data-testid="robot-connected-mock">Robot Status</div>,
-  };
-});
-
-describe('MonitoringPage', () => {
-  // Capture stream callbacks
-  let streamUpdateCallback: (data: any) => void;
-  let statusUpdateCallback: (data: any) => void;
-
-  // Setup default store state
-  const mockGetPhaseIds = jest.fn();
-  const mockGetPhaseNames = jest.fn();
-  const mockGetNorms = jest.fn();
-  const mockGetGoals = jest.fn();
-  const mockGetGoalsWithDepth = jest.fn();
-  const mockGetTriggers = jest.fn();
-  const mockSetProgramState = jest.fn();
-
-  beforeEach(() => {
-    jest.clearAllMocks();
-
-    // Default Store Implementation
-    (useProgramStore as unknown as jest.Mock).mockImplementation((selector) => {
-      const state = {
-        getPhaseIds: mockGetPhaseIds,
-        getPhaseNames: mockGetPhaseNames,
-        getNormsInPhase: mockGetNorms,
-        getGoalsInPhase: mockGetGoals,
-        getTriggersInPhase: mockGetTriggers,
-        getGoalsWithDepth: mockGetGoalsWithDepth,
-        setProgramState: mockSetProgramState,
-      };
-      return selector(state);
-    });
-
-    // Capture the hook callbacks
-    (MonitoringAPI.useExperimentLogger as jest.Mock).mockImplementation((cb) => {
-      streamUpdateCallback = cb;
-    });
-    (MonitoringAPI.useStatusLogger as jest.Mock).mockImplementation((cb) => {
-      statusUpdateCallback = cb;
-    });
-
-    // Default mock return values
-    mockGetPhaseIds.mockReturnValue(['phase-1', 'phase-2']);
-    mockGetPhaseNames.mockReturnValue(['Intro', 'Main']);
-    mockGetGoals.mockReturnValue([{ id: 'g1', name: 'Goal 1'}, { id: 'g2', name: 'Goal 2'}]);
-    mockGetGoalsWithDepth.mockReturnValue([
-        { id: 'g1', name: 'Goal 1', level: 0 }, 
-        { id: 'g2', name: 'Goal 2', level: 0 }
-    ]);
-    mockGetTriggers.mockReturnValue([{ id: 't1', name: 'Trigger 1' }]);
-    mockGetNorms.mockReturnValue([
-        { id: 'n1', norm: 'Norm 1', condition: null }, 
-        { id: 'cn1', norm: 'Cond Norm 1', condition: 'some-cond' }
-    ]);
-  });
-
-  test('renders "No program loaded" when phaseIds are empty', () => {
-    mockGetPhaseIds.mockReturnValue([]);
-    render(<MonitoringPage />);
-    expect(screen.getByText('No program loaded.')).toBeInTheDocument();
-  });
-
-  test('renders the dashboard with initial state', () => {
-    render(<MonitoringPage />);
-    
-    // Check Header
-    expect(screen.getByText('Phase 1:')).toBeInTheDocument();
-    expect(screen.getByText('Intro')).toBeInTheDocument();
-    
-    // Check Lists
-    expect(screen.getByText(/Goal 1/)).toBeInTheDocument(); 
-    
-    expect(screen.getByText('Trigger 1')).toBeInTheDocument();
-    expect(screen.getByText('Norm 1')).toBeInTheDocument();
-    expect(screen.getByText('Cond Norm 1')).toBeInTheDocument();
-  });
-
-  describe('Control Buttons', () => {
-    test('Pause calls API and updates UI', async () => {
-      render(<MonitoringPage />);
-      const pauseBtn = screen.getByText('❚❚');
-      
-      await act(async () => {
-        fireEvent.click(pauseBtn);
-      });
-
-      expect(MonitoringAPI.pauseExperiment).toHaveBeenCalled();
-      // Ensure local state toggled (we check if play button is now inactive style or pause active)
-    });
-
-    test('Play calls API and updates UI', async () => {
-      render(<MonitoringPage />);
-      const playBtn = screen.getByText('▶');
-      
-      await act(async () => {
-        fireEvent.click(playBtn);
-      });
-
-      expect(MonitoringAPI.playExperiment).toHaveBeenCalled();
-    });
-
-    test('Next Phase calls API', async () => {
-      render(<MonitoringPage />);
-      await act(async () => {
-        fireEvent.click(screen.getByText('⏭'));
-      });
-      expect(MonitoringAPI.nextPhase).toHaveBeenCalled();
-    });
-
-    test('Reset Experiment calls logic and resets state', async () => {
-      render(<MonitoringPage />);
-      
-      // Mock graph reducer return
-      (VisProg.graphReducer as jest.Mock).mockReturnValue([{ id: 'new-phase' }]);
-
-      await act(async () => {
-        fireEvent.click(screen.getByText('⟲'));
-      });
-
-      expect(VisProg.graphReducer).toHaveBeenCalled();
-      expect(mockSetProgramState).toHaveBeenCalledWith({ phases: [{ id: 'new-phase' }] });
-      expect(VisProg.runProgram).toHaveBeenCalled();
-    });
-    
-    test('Reset Experiment handles errors gracefully', async () => {
-        const consoleSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
-        (VisProg.runProgram as jest.Mock).mockRejectedValue(new Error('Fail'));
-        
-        render(<MonitoringPage />);
-        await act(async () => {
-            fireEvent.click(screen.getByText('⟲'));
-        });
-        
-        expect(consoleSpy).toHaveBeenCalledWith('Failed to reset program:', expect.any(Error));
-        consoleSpy.mockRestore();
-    });
-  });
-
-  describe('Stream Updates (useExperimentLogger)', () => {
-    test('Handles phase_update to next phase', () => {
-      render(<MonitoringPage />);
-      
-      expect(screen.getByText('Intro')).toBeInTheDocument(); // Phase 0
-
-      act(() => {
-        streamUpdateCallback({ type: 'phase_update', id: 'phase-2' });
-      });
-
-      expect(screen.getByText('Main')).toBeInTheDocument(); // Phase 1
-    });
-
-    test('Handles phase_update to "end"', () => {
-      render(<MonitoringPage />);
-      
-      act(() => {
-        streamUpdateCallback({ type: 'phase_update', id: 'end' });
-      });
-
-      expect(screen.getByText('Experiment finished')).toBeInTheDocument();
-      expect(screen.getByText('All phases have been successfully completed.')).toBeInTheDocument();
-    });
-
-    test('Handles phase_update with unknown ID gracefully', () => {
-      render(<MonitoringPage />);
-      act(() => {
-        streamUpdateCallback({ type: 'phase_update', id: 'unknown-phase' });
-      });
-      // Should remain on current phase
-      expect(screen.getByText('Intro')).toBeInTheDocument();
-    });
-
-    test('Handles goal_update: advances index and marks previous as achieved', () => {
-      render(<MonitoringPage />);
-      
-      // Initial: Goal 1 (index 0) is current.
-      // Send update for Goal 2 (index 1).
-      act(() => {
-        streamUpdateCallback({ type: 'goal_update', id: 'g2' });
-      });
-
-      // Goal 1 should now be marked achieved (passed via activeIds)
-      // Goal 2 should be current.
-      
-      // We can inspect the "StatusList" props implicitly by checking styling or indicators if not mocked,
-      // but since we render the full component, we check the class/text.
-      // Goal 1 should have checkmark (override logic puts checkmark for activeIds)
-      // The implementation details of StatusList show ✔️ for activeIds.
-      
-      const items = screen.getAllByRole('listitem');
-      // Helper to find checkmarks within items
-      expect(items[0]).toHaveTextContent('Goal 1');
-      // After update, g1 is active (achieved), g2 is current
-      // logic: loop i < gIndex (1). activeIds['g1'] = true.
-    });
-    
-    test('Handles goal_update with unknown ID', () => {
-        const warnSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
-        
-        render(<MonitoringPage />);
-        act(() => {
-            streamUpdateCallback({ type: 'goal_update', id: 'unknown-goal' });
-        });
-
-        expect(warnSpy).toHaveBeenCalledWith(expect.stringContaining('Goal unknown-goal not found'));
-        warnSpy.mockRestore();
-    });
-
-    test('Handles trigger_update', () => {
-      render(<MonitoringPage />);
-      
-      // Trigger 1 initially not achieved
-      act(() => {
-        streamUpdateCallback({ type: 'trigger_update', id: 't1', achieved: true });
-      });
-
-      // StatusList logic: if activeId is true, show ✔️
-      // We look for visual confirmation or check logic
-      const triggerList = screen.getByText('Triggers').parentElement;
-      expect(triggerList).toHaveTextContent('✔️'); // Assuming 't1' is the only trigger
-    });
-  });
-
-  describe('Status Updates (useStatusLogger)', () => {
-    test('Handles cond_norms_state_update', () => {
-      render(<MonitoringPage />);
-      
-      // Initial state: activeIds empty.
-      act(() => {
-        statusUpdateCallback({ 
-            type: 'cond_norms_state_update', 
-            norms: [{ id: 'cn1', active: true }] 
-        });
-      });
-
-      // Conditional Norm 1 should now be active
-      const cnList = screen.getByText('Conditional Norms').parentElement;
-      expect(cnList).toHaveTextContent('✔️');
-    });
-
-    test('Ignores status update if no changes detected', () => {
-       render(<MonitoringPage />);
-       // First update
-       act(() => {
-           statusUpdateCallback({ type: 'cond_norms_state_update', norms: [{ id: 'cn1', active: true }] });
-       });
-       
-       // Second identical update - strictly checking if this causes a rerender is hard in RTL,
-       // but we ensure no errors and state remains consistent.
-       act(() => {
-           statusUpdateCallback({ type: 'cond_norms_state_update', norms: [{ id: 'cn1', active: true }] });
-       });
-       
-       const cnList = screen.getByText('Conditional Norms').parentElement;
-       expect(cnList).toHaveTextContent('✔️');
-    });
-  });
-});
-

test/pages/monitoringPage/MonitoringPageAPI.test.ts

@@ -1,223 +0,0 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
-import { renderHook, act, cleanup } from '@testing-library/react';
-import { 
-    sendAPICall, 
-    nextPhase,  
-    pauseExperiment, 
-    playExperiment, 
-    useExperimentLogger, 
-    useStatusLogger 
-} from '../../../src/pages/MonitoringPage/MonitoringPageAPI';
-
-// --- MOCK EVENT SOURCE SETUP ---
-// This mocks the browser's EventSource so we can manually 'push' messages to our hooks
-const mockInstances: MockEventSource[] = [];
-
-class MockEventSource {
-  url: string;
-  onmessage: ((event: MessageEvent) => void) | null = null;
-  onerror: ((event: Event) => void) | null = null; // Added onerror support
-  closed = false;
-
-  constructor(url: string) {
-    this.url = url;
-    mockInstances.push(this);
-  }
-
-  sendMessage(data: string) {
-    if (this.onmessage) {
-      this.onmessage({ data } as MessageEvent);
-    }
-  }
-
-  triggerError(err: any) {
-    if (this.onerror) {
-        this.onerror(err);
-    }
-  }
-
-  close() {
-    this.closed = true;
-  }
-}
-
-// Mock global EventSource
-beforeAll(() => {
-  (globalThis as any).EventSource = jest.fn((url: string) => new MockEventSource(url));
-});
-
-// Mock global fetch
-beforeEach(() => {
-  globalThis.fetch = jest.fn(() =>
-    Promise.resolve({
-      ok: true,
-      json: () => Promise.resolve({ reply: 'ok' }),
-    })
-  ) as jest.Mock;
-});
-
-// Cleanup after every test
-afterEach(() => {
-  cleanup();
-  jest.restoreAllMocks();
-  mockInstances.length = 0;
-});
-
-describe('MonitoringPageAPI', () => {
-
-  describe('sendAPICall', () => {
-    test('sends correct POST request', async () => {
-      await sendAPICall('test_type', 'test_ctx');
-
-      expect(globalThis.fetch).toHaveBeenCalledWith(
-        'http://localhost:8000/button_pressed',
-        expect.objectContaining({
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ type: 'test_type', context: 'test_ctx' }),
-        })
-      );
-    });
-
-    test('appends endpoint if provided', async () => {
-      await sendAPICall('t', 'c', '/extra');
-
-      expect(globalThis.fetch).toHaveBeenCalledWith(
-        expect.stringContaining('/button_pressed/extra'),
-        expect.any(Object)
-      );
-    });
-
-    test('logs error on fetch network failure', async () => {
-      (globalThis.fetch as jest.Mock).mockRejectedValue('Network error');
-      const consoleSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
-
-      await sendAPICall('t', 'c');
-
-      expect(consoleSpy).toHaveBeenCalledWith('Failed to send api call:', 'Network error');
-    });
-
-    test('throws error if response is not ok', async () => {
-        (globalThis.fetch as jest.Mock).mockResolvedValue({ ok: false });
-        const consoleSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
-
-        await sendAPICall('t', 'c');
-        
-        expect(consoleSpy).toHaveBeenCalledWith('Failed to send api call:', expect.any(Error));
-    });
-  });
-
-  describe('Helper Functions', () => {
-    test('nextPhase sends correct params', async () => {
-      await nextPhase();
-      expect(globalThis.fetch).toHaveBeenCalledWith(
-        expect.any(String),
-        expect.objectContaining({ body: JSON.stringify({ type: 'next_phase', context: '' }) })
-      );
-    });
-
-    test('pauseExperiment sends correct params', async () => {
-      await pauseExperiment();
-      expect(globalThis.fetch).toHaveBeenCalledWith(
-        expect.any(String),
-        expect.objectContaining({ body: JSON.stringify({ type: 'pause', context: 'true' }) })
-      );
-    });
-
-    test('playExperiment sends correct params', async () => {
-      await playExperiment();
-      expect(globalThis.fetch).toHaveBeenCalledWith(
-        expect.any(String),
-        expect.objectContaining({ body: JSON.stringify({ type: 'pause', context: 'false' }) })
-      );
-    });
-  });
-
-  describe('useExperimentLogger', () => {
-    test('connects to SSE and receives messages', () => {
-      const onUpdate = jest.fn();
-      
-      // Hook must be rendered to start the effect
-      renderHook(() => useExperimentLogger(onUpdate));
-
-      // Retrieve the mocked instance created by the hook
-      const eventSource = mockInstances[0];
-      expect(eventSource.url).toContain('/experiment_stream');
-
-      // Simulate incoming message
-      act(() => {
-        eventSource.sendMessage(JSON.stringify({ type: 'phase_update', id: '1' }));
-      });
-
-      expect(onUpdate).toHaveBeenCalledWith({ type: 'phase_update', id: '1' });
-    });
-
-    test('handles JSON parse errors in stream', () => {
-      const consoleSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
-      renderHook(() => useExperimentLogger());
-      const eventSource = mockInstances[0];
-
-      act(() => {
-        eventSource.sendMessage('invalid-json');
-      });
-
-      expect(consoleSpy).toHaveBeenCalledWith('Stream parse error:', expect.any(Error));
-    });
-    
-    
-
-    test('handles SSE connection error', () => {
-        const consoleSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
-        renderHook(() => useExperimentLogger());
-        const eventSource = mockInstances[0];
-  
-        act(() => {
-          eventSource.triggerError('Connection lost');
-        });
-  
-        expect(consoleSpy).toHaveBeenCalledWith('SSE Connection Error:', 'Connection lost');
-        expect(eventSource.closed).toBe(true);
-      });
-
-    test('closes EventSource on unmount', () => {
-      const { unmount } = renderHook(() => useExperimentLogger());
-      const eventSource = mockInstances[0];
-      const closeSpy = jest.spyOn(eventSource, 'close');
-
-      unmount();
-
-      expect(closeSpy).toHaveBeenCalled();
-      expect(eventSource.closed).toBe(true);
-    });
-  });
-
-  describe('useStatusLogger', () => {
-    test('connects to SSE and receives messages', () => {
-      const onUpdate = jest.fn();
-      renderHook(() => useStatusLogger(onUpdate));
-      const eventSource = mockInstances[0];
-
-      expect(eventSource.url).toContain('/status_stream');
-
-      act(() => {
-        eventSource.sendMessage(JSON.stringify({ some: 'data' }));
-      });
-
-      expect(onUpdate).toHaveBeenCalledWith({ some: 'data' });
-    });
-
-    test('handles JSON parse errors', () => {
-      const consoleSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
-      renderHook(() => useStatusLogger());
-      const eventSource = mockInstances[0];
-
-      act(() => {
-        eventSource.sendMessage('bad-data');
-      });
-
-      expect(consoleSpy).toHaveBeenCalledWith('Status stream error:', expect.any(Error));
-    });
-  });
-});

test/pages/monitoringPage/MonitoringPageComponents.test.tsx

@@ -1,229 +0,0 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
-import React from 'react';
-import { render, screen, fireEvent, act } from '@testing-library/react';
-import '@testing-library/jest-dom';
-
-// Corrected Imports
-import { 
-  GestureControls, 
-  SpeechPresets, 
-  DirectSpeechInput, 
-  StatusList, 
-  RobotConnected 
-} from '../../../src/pages/MonitoringPage/MonitoringPageComponents';
-
-import * as MonitoringAPI from '../../../src/pages/MonitoringPage/MonitoringPageAPI';
-
-// Mock the API Call function with the correct path
-jest.mock('../../../src/pages/MonitoringPage/MonitoringPageAPI', () => ({
-  sendAPICall: jest.fn(),
-}));
-
-describe('MonitoringPageComponents', () => {
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
-  describe('GestureControls', () => {
-    test('renders and sends gesture command', () => {
-      render(<GestureControls />);
-      
-      fireEvent.change(screen.getByRole('combobox'), { 
-        target: { value: 'animations/Stand/Gestures/Hey_1' } 
-      });
-      
-      // Click button
-      fireEvent.click(screen.getByText('Actuate'));
-      
-      // Expect the API to be called with that new value
-      expect(MonitoringAPI.sendAPICall).toHaveBeenCalledWith('gesture', 'animations/Stand/Gestures/Hey_1');
-    });
-  });
-
-  describe('SpeechPresets', () => {
-    test('renders buttons and sends speech command', () => {
-      render(<SpeechPresets />);
-      
-      const btn = screen.getByText('"Hello, I\'m Pepper"');
-      fireEvent.click(btn);
-      
-      expect(MonitoringAPI.sendAPICall).toHaveBeenCalledWith('speech', "Hello, I'm Pepper");
-    });
-  });
-
-  describe('DirectSpeechInput', () => {
-    test('inputs text and sends on button click', () => {
-      render(<DirectSpeechInput />);
-      const input = screen.getByPlaceholderText('Type message...');
-      
-      fireEvent.change(input, { target: { value: 'Custom text' } });
-      fireEvent.click(screen.getByText('Send'));
-      
-      expect(MonitoringAPI.sendAPICall).toHaveBeenCalledWith('speech', 'Custom text');
-      expect(input).toHaveValue(''); // Should clear
-    });
-
-    test('sends on Enter key', () => {
-        render(<DirectSpeechInput />);
-        const input = screen.getByPlaceholderText('Type message...');
-        
-        fireEvent.change(input, { target: { value: 'Enter text' } });
-        fireEvent.keyDown(input, { key: 'Enter', code: 'Enter' });
-        
-        expect(MonitoringAPI.sendAPICall).toHaveBeenCalledWith('speech', 'Enter text');
-      });
-  
-      test('does not send empty text', () => {
-        render(<DirectSpeechInput />);
-        fireEvent.click(screen.getByText('Send'));
-        expect(MonitoringAPI.sendAPICall).not.toHaveBeenCalled();
-      });
-  });
-
-  describe('StatusList', () => {
-    const mockSet = jest.fn();
-    const items = [
-      { id: '1', name: 'Item 1' },
-      { id: '2', name: 'Item 2' }
-    ];
-
-    test('renders list items', () => {
-      render(<StatusList title="Test List" items={items} type="goal" activeIds={{}} />);
-      expect(screen.getByText('Test List')).toBeInTheDocument();
-      expect(screen.getByText('Item 1')).toBeInTheDocument();
-    });
-
-    test('Goals: click override on inactive item calls API', () => {
-      render(
-        <StatusList 
-          title="Goals" 
-          items={items} 
-          type="goal" 
-          activeIds={{}} 
-          setActiveIds={mockSet} 
-        />
-      );
-      
-      // Click the X (inactive)
-      const indicator = screen.getAllByText('❌')[0];
-      fireEvent.click(indicator);
-      
-      expect(MonitoringAPI.sendAPICall).toHaveBeenCalledWith('override', '1');
-      expect(mockSet).toHaveBeenCalled();
-    });
-
-    test('Conditional Norms: click override on ACTIVE item unachieves', () => {
-        render(
-          <StatusList 
-            title="CN" 
-            items={items} 
-            type="cond_norm" 
-            activeIds={{ '1': true }} 
-          />
-        );
-        
-        const indicator = screen.getByText('✔️'); // It is active
-        fireEvent.click(indicator);
-        
-        expect(MonitoringAPI.sendAPICall).toHaveBeenCalledWith('override_unachieve', '1');
-      });
-  
-      test('Current Goal highlighting', () => {
-          render(
-              <StatusList 
-                title="Goals" 
-                items={items} 
-                type="goal" 
-                activeIds={{}} 
-                currentGoalIndex={0}
-              />
-            );
-          // Using regex to handle the "(Current)" text
-          expect(screen.getByText(/Item 1/)).toBeInTheDocument();
-          expect(screen.getByText(/(Current)/)).toBeInTheDocument();
-      });
-  });
-
-  describe('RobotConnected', () => {
-    let mockEventSource: any;
-
-    beforeAll(() => {
-        Object.defineProperty(window, 'EventSource', {
-            writable: true,
-            value: jest.fn().mockImplementation(() => ({
-                close: jest.fn(),
-                onmessage: null,
-            })),
-        });
-    });
-
-    beforeEach(() => {
-        mockEventSource = new window.EventSource('url');
-        (window.EventSource as unknown as jest.Mock).mockClear();
-        (window.EventSource as unknown as jest.Mock).mockImplementation(() => mockEventSource);
-    });
-
-    test('displays disconnected initially', () => {
-        render(<RobotConnected />);
-        expect(screen.getByText('● Robot is disconnected')).toBeInTheDocument();
-    });
-
-    test('updates to connected when SSE receives true', async () => {
-        render(<RobotConnected />);
-        
-        act(() => {
-            if(mockEventSource.onmessage) {
-                mockEventSource.onmessage({ data: 'true' } as MessageEvent);
-            }
-        });
-
-        expect(await screen.findByText('● Robot is connected')).toBeInTheDocument();
-    });
-    
-    test('handles invalid JSON gracefully', async () => {
-        const consoleSpy = jest.spyOn(console, 'log').mockImplementation(() => {});
-        render(<RobotConnected />);
-        
-        act(() => {
-            if(mockEventSource.onmessage) {
-                mockEventSource.onmessage({ data: 'invalid-json' } as MessageEvent);
-            }
-        });
-        
-        // Should catch error and log it, state remains disconnected
-        expect(consoleSpy).toHaveBeenCalledWith('Ping message not in correct format:', 'invalid-json');
-        consoleSpy.mockRestore();
-    });
-
-    test('logs error if state update fails (inner catch block)', async () => {
-        const consoleSpy = jest.spyOn(console, 'log').mockImplementation(() => {});
-        
-        // 1. Force useState to return a setter that throws an error
-        const mockThrowingSetter = jest.fn(() => { throw new Error('Forced State Error'); });
-        
-        // We use mockImplementation to return [currentState, throwingSetter]
-        const useStateSpy = jest.spyOn(React, 'useState')
-            .mockImplementation(() => [null, mockThrowingSetter]);
-
-        render(<RobotConnected />);
-        
-        // 2. Trigger the event with VALID JSON ("true")
-        // This passes the first JSON.parse try/catch, 
-        // but fails when calling setConnected(true) because of our mock.
-        await act(async () => {
-            if (mockEventSource.onmessage) {
-                mockEventSource.onmessage({ data: 'true' } as MessageEvent);
-            }
-        });
-
-        // 3. Verify the specific error log from line 205
-        expect(consoleSpy).toHaveBeenCalledWith("couldnt extract connected from incoming ping data");
-        
-        // Cleanup spies
-        useStateSpy.mockRestore();
-        consoleSpy.mockRestore();
-    });
-  });
-});

test/pages/robot/Robot.test.tsx

@@ -1,6 +1,3 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
 import { render, screen, act, cleanup, fireEvent } from '@testing-library/react';
 import Robot from '../../../src/pages/Robot/Robot';
 

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

@@ -1,6 +1,3 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
 import {act} from '@testing-library/react';
 import useFlowStore from '../../../../src/pages/VisProgPage/visualProgrammingUI/VisProgStores.tsx';
 import { mockReactFlow } from '../../../setupFlowTests.ts';

test/pages/visProgPage/visualProgrammingUI/GraphReducer.test.ts

@@ -1,6 +1,3 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
 describe('not yet implemented', () => {
   test('nothing yet', () => {
     expect(true);