refactor: adapted to fit the split made in monitoringPage

ref: N25B-450

.env.example

@@ -1,2 +0,0 @@
-# The location of the backend
-VITE_API_BASE_URL=http://localhost:8000

README.md

@@ -28,14 +28,6 @@ npm run dev
 
 It should automatically reload when you save changes.
 
-## Environment
-
-Copy `.env.example` to `.env.local` and adjust values as needed:
-
-```shell
-cp .env.example .env.local
-```
-
 ## Git Hooks
 
 To activate automatic linting, branch name checks and commit message checks, run:

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,31 +1,30 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
 import { Routes, Route, Link } from 'react-router'
 import './App.css'
+import TemplatePage from './pages/TemplatePage/Template.tsx'
 import Home from './pages/Home/Home.tsx'
-import UserManual from './pages/Manuals/Manuals.tsx';
+import Robot from './pages/Robot/Robot.tsx';
+import ConnectedRobots from './pages/ConnectedRobots/ConnectedRobots.tsx'
 import VisProg from "./pages/VisProgPage/VisProg.tsx";
 import {useState} from "react";
 import Logging from "./components/Logging/Logging.tsx";
 
-
 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="/user_manual" element={<UserManual />} />
+            <Route path="/robot" element={<Robot />} />
+            <Route path="/ConnectedRobots" element={<ConnectedRobots />} />
         </Routes>
         </main>
         {showLogs && <Logging />}

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,5 +0,0 @@
-export default function Next({ fill }: { fill?: string }) {
-    return <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill={fill ?? "canvas"}>
-        <path d="M664.07-224.93v-510.14h91v510.14h-91Zm-459.14 0v-510.14L587.65-480 204.93-224.93Z"/>
-    </svg>;
-}

src/components/Icons/Pause.tsx

@@ -1,5 +0,0 @@
-export default function Pause({ fill }: { fill?: string }) {
-    return <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill={fill ?? "canvas"}>
-        <path d="M556.17-185.41v-589.18h182v589.18h-182Zm-334.34 0v-589.18h182v589.18h-182Z"/>
-    </svg>;
-}

src/components/Icons/Play.tsx

@@ -1,5 +0,0 @@
-export default function Play({ fill }: { fill?: string }) {
-    return <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill={fill ?? "canvas"}>
-        <path d="M311.87-185.41v-589.18L775.07-480l-463.2 294.59Z"/>
-    </svg>;
-}

src/components/Icons/Redo.tsx

@@ -1,5 +0,0 @@
-export default function Redo({ fill }: { fill?: string }) {
-    return <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill={fill ?? "canvas"}>
-        <path d="M390.98-191.87q-98.44 0-168.77-65.27-70.34-65.27-70.34-161.43 0-96.15 70.34-161.54 70.33-65.39 168.77-65.39h244.11l-98.98-98.98 63.65-63.65L808.13-600 599.76-391.87l-63.65-63.65 98.98-98.98H390.98q-60.13 0-104.12 38.92-43.99 38.93-43.99 96.78 0 57.84 43.99 96.89 43.99 39.04 104.12 39.04h286.15v91H390.98Z"/>
-    </svg>;
-}

src/components/Icons/Replay.tsx

@@ -1,5 +0,0 @@
-export default function Replay({ fill }: { fill?: string }) {
-    return <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill={fill ?? "canvas"}>
-        <path d="M480.05-70.43q-76.72 0-143.78-29.1-67.05-29.1-116.75-78.8-49.69-49.69-78.79-116.75-29.1-67.05-29.1-143.49h91q0 115.81 80.73 196.47Q364.1-161.43 480-161.43q115.8 0 196.47-80.74 80.66-80.73 80.66-196.63 0-115.81-80.73-196.47-80.74-80.66-196.64-80.66h-6.24l60.09 60.08-58.63 60.63-166.22-166.21 166.22-166.22 58.63 60.87-59.85 59.85h6q76.74 0 143.76 29.09 67.02 29.1 116.84 78.8 49.81 49.69 78.91 116.64 29.1 66.95 29.1 143.61 0 76.66-29.1 143.71-29.1 67.06-78.79 116.75-49.7 49.7-116.7 78.8-67.01 29.1-143.73 29.1Z"/>
-    </svg>;
-}

src/components/Logging/Definitions.ts

@@ -1,31 +0,0 @@
-import type {Cell} from "../../utils/cellStore.ts";
-import type {LogRecord} from "./useLogs.ts";
-
-/**
- * Zustand store definition for managing user preferences related to logging.
- *
- * Includes flags for toggling relative timestamps and automatic scroll behavior.
- */
-export type LoggingSettings = {
-  /** Whether to display log timestamps as relative (e.g., "2m 15s ago") instead of absolute. */
-  showRelativeTime: boolean;
-  /** Updates the `showRelativeTime` setting. */
-  setShowRelativeTime: (showRelativeTime: boolean) => void;
-};
-
-/**
- * Props for any component that renders a single log message entry.
- *
- * @param recordCell - A reactive `Cell` containing a single `LogRecord`.
- * @param onUpdate - Optional callback triggered when the log entry updates.
- */
-export type MessageComponentProps = {
-  recordCell: Cell<LogRecord>,
-  onUpdate?: () => void,
-};
-
-/**
- * Key used for the experiment filter predicate in the filter map, to exclude experiment logs from the developer logs.
- */
-export const EXPERIMENT_FILTER_KEY = "experiment_filter";
-export const EXPERIMENT_LOGGER_NAME = "experiment";

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,7 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
 import {useCallback, useEffect, useRef, useState} from "react";
 
 import {applyPriorityPredicates, type PriorityFilterPredicate} from "../../utils/priorityFiltering.ts";
 import {cell, type Cell} from "../../utils/cellStore.ts";
-import { API_BASE_URL } from "../../config/api.ts";
-
-type ExtraLevelName = 'LLM' | 'OBSERVATION' | 'ACTION' | 'CHAT';
-
-export type LevelName = ExtraLevelName | 'DEBUG' | 'INFO' | 'WARNING' | 'ERROR' | 'CRITICAL' | string;
-
-/**
- * Extra fields that are added to log records in the backend but are not part of the standard `LogRecord` type.
- *
- * @property reference - (Optional) A reference identifier linking related log messages.
- * @property role - (Optional) For chat log messages, the role of the agent that generated the message.
- */
-type ExtraLogRecordFields = {
-  reference?: string;
-  role?: string;
-}
 
 /**
  * Represents a single log record emitted by the backend logging system.
@@ -31,19 +12,21 @@ type ExtraLogRecordFields = {
  * @property levelno - The numeric severity value corresponding to `levelname`.
  * @property created - The UNIX timestamp (in seconds) when this record was created.
  * @property relativeCreated - The time (in milliseconds) since the logging system started.
+ * @property reference - (Optional) A reference identifier linking related log messages.
  * @property firstCreated - Timestamp of the first log in this reference group.
  * @property firstRelativeCreated - Relative timestamp of the first log in this reference group.
  */
 export type LogRecord = {
   name: string;
   message: string;
-  levelname: LevelName;
+  levelname: 'LLM' | 'DEBUG' | 'INFO' | 'WARNING' | 'ERROR' | 'CRITICAL' | string;
   levelno: number;
   created: number;
   relativeCreated: number;
+  reference?: string;
   firstCreated: number;
   firstRelativeCreated: number;
-} & ExtraLogRecordFields;
+};
 
 /**
  * A log filter predicate with priority support, used to determine whether
@@ -211,7 +194,7 @@ export function useLogs(filterPredicates: Map<string, LogFilterPredicate>) {
     // Only create one SSE connection for the lifetime of the hook.
     if (sseRef.current) return;
 
-    const es = new EventSource(`${API_BASE_URL}/logs/stream`);
+    const es = new EventSource("http://localhost:8000/logs/stream");
     sseRef.current = es;
 
     es.onmessage = (event) => {

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/config/api.ts

@@ -1,11 +0,0 @@
-declare const __VITE_API_BASE_URL__: string | undefined;
-
-const DEFAULT_API_BASE_URL = "http://localhost:8000";
-
-const rawApiBaseUrl =
-  (typeof __VITE_API_BASE_URL__ !== "undefined" ? __VITE_API_BASE_URL__ : undefined) ??
-  DEFAULT_API_BASE_URL;
-
-export const API_BASE_URL = rawApiBaseUrl.endsWith("/")
-  ? rawApiBaseUrl.slice(0, -1)
-  : rawApiBaseUrl;

src/index.css

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

@@ -0,0 +1,60 @@
+import { useEffect, useState } from 'react'
+
+/**
+ * Displays the current connection status of a robot in real time.
+ *
+ * Opens an SSE connection to the backend (`/robot/ping_stream`) that emits
+ * simple boolean JSON messages (`true` or `false`). Updates automatically when
+ * the robot connects or disconnects.
+ *
+ * @returns A React element showing the current robot connection status.
+ */
+export default function ConnectedRobots() {
+  
+  /**
+   * The current connection state:
+   * - `true`: Robot is connected.
+   * - `false`: Robot is not connected.
+   * - `null`: Connection status is unknown (initial check in progress).
+   */
+  const [connected, setConnected] = useState<boolean | null>(null);
+
+  useEffect(() => {
+    // Open a Server-Sent Events (SSE) connection to receive live ping updates.
+    // We're expecting a stream of data like that looks like this: `data = False` or `data = True`
+    const eventSource = new EventSource("http://localhost:8000/robot/ping_stream");
+    eventSource.onmessage = (event) => {
+    
+      // Expecting messages in JSON format: `true` or `false`
+      console.log("received message:", event.data);
+      try {
+        const data = JSON.parse(event.data);
+
+        try {
+          setConnected(data)
+        }
+        catch {
+          console.log("couldnt extract connected from incoming ping data")
+        }
+
+      } catch {
+        console.log("Ping message not in correct format:", event.data);
+      }
+    };
+
+    // Clean up the SSE connection when the component unmounts.
+    return () => eventSource.close();
+  }, []);
+
+  return (
+    <div>
+      <h1>Is robot currently connected?</h1>
+      <div>
+        <h2>Robot is currently: {connected == null ? "checking..." : (connected ? "connected! 🟢" : "not connected... 🔴")} </h2>
+        <h3>
+          {connected == null ? "If checking continues, make sure CB is properly loaded with robot at least once." : ""}
+        </h3>
+      </div>
+    </div>
+  );
+}

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;
 }
@@ -27,51 +22,3 @@ University within the Software Project course.
   flex-direction: column;
   gap: 1em;
 }
-
-.links {
-  display: flex;
-  flex-direction: row; /* Horizontal layout looks more like a dashboard */
-  gap: 1.5rem;
-  justify-content: center;
-  margin-top: 2rem;
-}
-
-.navCard {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 1rem 2rem;
-  min-width: 180px;
-  background-color: #ffffff;
-  color: #333;
-  text-decoration: none;
-  font-weight: 600;
-  border-radius: 12px;
-  border: 1px solid #e0e0e0;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
-  transition: all 0.2s ease-in-out;
-}
-
-/* Hover effects */
-.navCard:hover {
-  transform: translateY(-4px);
-  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
-  border-color: #ffcd00; /* UU Yellow accent */
-  color: #000;
-}
-
-/* Specific styling for the logo container */
-.logoPepperScaling {
-  display: flex;
-  justify-content: center;
-  transition: transform 0.3s ease;
-}
-
-.logoPepperScaling:hover {
-  transform: scale(1.05);
-}
-
-.logopepper {
-  height: 120px;
-  width: auto;
-}

src/pages/Home/Home.tsx

@@ -1,6 +1,3 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
 import { Link } from 'react-router'
 import pepperLogo from '../../assets/pepper_transp2_small.svg'
 import styles from './Home.module.css'
@@ -16,20 +13,16 @@ import styles from './Home.module.css'
 function Home() {
   return (
     <div className={`flex-col ${styles.gapXl}`}>
-      <div className={styles.logoPepperScaling}>
-        <a href="https://git.science.uu.nl/ics/sp/2025/n25b" target="_blank" rel="noreferrer">
-          <img src={pepperLogo} className={styles.logopepper} alt="Pepper logo" />
+      <div className="logoPepperScaling">
+        <a href="https://git.science.uu.nl/ics/sp/2025/n25b" target="_blank">
+          <img src={pepperLogo} className="logopepper" alt="Pepper logo" />
         </a>
       </div>
-      
       <div className={styles.links}>
-        {/* Program Editor is now first */}
-        <Link to="/editor" className={styles.navCard}>
-          Program Editor
-        </Link>
-        <Link to="/user_manual" className={styles.navCard}>
-          User and Developer Manual
-        </Link>
+        <Link to={"/robot"}>Robot Interaction →</Link>
+        <Link to={"/editor"}>Editor →</Link>
+        <Link to={"/template"}>Template →</Link>
+        <Link to={"/ConnectedRobots"}>Connected Robots →</Link>
       </div>
     </div>
   )

src/pages/Manuals/Manuals.module.css

@@ -1,81 +0,0 @@
-/* This program has been developed by students from the bachelor Computer Science at Utrecht
-University within the Software Project course.
-© Copyright Utrecht University (Department of Information and Computing Sciences)
-*/
-
-.manualContainer {
-  width: 100%;
-  max-width: 800px;
-  margin: 4rem auto;
-  padding: 2rem;
-  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-  text-align: center;
-}
-
-.manualHeader h1 {
-  font-size: 2.2rem;
-  margin-bottom: 0.5rem;
-}
-
-.buttonStack {
-  display: flex;
-  flex-direction: column; /* Stacks the manual sections vertically */
-  gap: 3rem;
-  margin-top: 3rem;
-  align-items: center;
-}
-
-.manualEntry {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.manualEntry h3 {
-  margin: 0;
-  font-size: 1.4rem;
-}
-
-.manualEntry p {
-  color: #666;
-  margin-bottom: 0.5rem;
-}
-
-.downloadBtn {
-  display: inline-block;
-  background-color: #ffffff; /* White background as requested */
-  color: #000;
-  padding: 1rem 2rem;
-  border-radius: 50px;
-  text-decoration: none;
-  font-weight: 700;
-  font-size: 1.1rem;
-  width: 280px; /* Fixed width for uniform appearance */
-  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
-  transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
-}
-
-.downloadBtn:hover {
-  transform: translateY(-3px);
-  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
-  background-color: #247284; /* Teal hover as requested */
-  color: #ffffff; /* Text turns white on teal for better contrast */
-}
-
-.dateBadge {
-  display: inline-block;
-  margin-top: 1rem;
-  padding: 0.4rem 1rem;
-  background-color: #f0f0f0;
-  border-radius: 4px;
-  font-size: 0.85rem;
-  color: #888;
-}
-
-.divider {
-  margin-top: 4rem;
-  border: 0;
-  border-top: 1px solid #eee;
-  width: 60%;
-}

src/pages/Manuals/Manuals.tsx

@@ -1,39 +0,0 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
-import styles from './Manuals.module.css';
-
-export default function Manuals() {
-  const userManualPath = "/UserManual.pdf"; 
-  const developerManualPath = "/DeveloperManual.pdf"; 
-
-  return (
-    <div className={styles.manualContainer}>
-      <header className={styles.manualHeader}>
-        <h1>Documentation & Manuals</h1>
-
-      <span className={styles.dateBadge}>Last Updated: January 2026</span>
-      </header>
-
-      <div className={styles.buttonStack}>
-        <div className={styles.manualEntry}>
-          <h3>User Manual</h3>
-          <p>Manual for Users of the Pepper+ Software </p>
-          <a href={userManualPath} download="UserManual.pdf" className={styles.downloadBtn}>
-            Download User Manual
-          </a>
-        </div>
-
-        <div className={styles.manualEntry}>
-          <h3>Developer Manual</h3>
-          <p>Technical documentation for future developers.</p>
-          <a href={developerManualPath} download="DeveloperManual.pdf" className={styles.downloadBtn}>
-            Download Developer Manual
-          </a>
-        </div>
-      </div>
-
-      <hr className={styles.divider} />
-    </div> 
-  );
-}

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,122 +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';
-import { API_BASE_URL } from '../../config/api.ts';
-
-/**
- * HELPER: Unified sender function
- */
-export const sendAPICall = async (type: string, context: string, endpoint?: string) => {
-  try {
-    const response = await fetch(`${API_BASE_URL}/button_pressed${endpoint ?? ""}`, {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ type, context }),
-    });
-    if (!response.ok) throw new Error("Backend response error");
-    console.log(`API Call send - Type: ${type}, Context: ${context} ${endpoint ? `, Endpoint: ${endpoint}` : ""}`);
-  } catch (err) {
-    console.error(`Failed to send api call:`, err);
-  }
-};
-
-
-/**
- * Sends an API call to the CB for going to the next phase. 
- * In case we can't go to the next phase, the function will throw an error.
- */
-export async function nextPhase(): Promise<void> {
-  const type = "next_phase"
-  const context = ""
-  sendAPICall(type, context)
-}
-
-
-/**
- * Sends an API call to the CB for going to pause experiment
-*/
-export async function pauseExperiment(): Promise<void> {
-  const type = "pause"
-  const context = "true"
-  sendAPICall(type, context)
-}
-
-/**
- * Sends an API call to the CB for going to resume experiment
-*/
-export async function playExperiment(): Promise<void> {
-  const type = "pause"
-  const context = "false"
-  sendAPICall(type, context)
-}
-
-
-/**
- * Types for the experiment stream messages
- */
-export type PhaseUpdate = { type: 'phase_update'; id: string };
-export type GoalUpdate = { type: 'goal_update'; id: string };
-export type TriggerUpdate = { type: 'trigger_update'; id: string; achieved: boolean };
-export type CondNormsStateUpdate = { type: 'cond_norms_state_update'; norms: { id: string; active: boolean }[] };
-export type ExperimentStreamData = PhaseUpdate | GoalUpdate | TriggerUpdate | CondNormsStateUpdate | Record<string, unknown>;
-
-/**
- * A hook that listens to the experiment stream that updates current state of the program
- * via updates sent from the backend
- */
-export function useExperimentLogger(onUpdate?: (data: ExperimentStreamData) => void) {
-  const callbackRef = React.useRef(onUpdate);
-  // Ref is updated every time with on update
-  React.useEffect(() => {
-    callbackRef.current = onUpdate;
-  }, [onUpdate]);
-
-  useEffect(() => {
-    console.log("Connecting to Experiment Stream...");
-    const eventSource = new EventSource(`${API_BASE_URL}/experiment_stream`);
-
-    eventSource.onmessage = (event) => {
-      try {
-        const parsedData = JSON.parse(event.data) as ExperimentStreamData;
-        //call function using the ref
-        callbackRef.current?.(parsedData);
-      } catch (err) {
-        console.warn("Stream parse error:", err);
-      }
-    };
-
-    eventSource.onerror = (err) => {
-      console.error("SSE Connection Error:", err);
-      eventSource.close();
-    };
-
-    return () => {
-      console.log("Closing Experiment Stream...");
-      eventSource.close();
-    };
-  }, []); 
-}
-
-/**
- * A hook that listens to the status stream that updates active conditional norms
- * via updates sent from the backend
- */
-export function useStatusLogger(onUpdate?: (data: ExperimentStreamData)  => void) {
-  const callbackRef = React.useRef(onUpdate);
-
-  React.useEffect(() => {
-    callbackRef.current = onUpdate;
-  }, [onUpdate]);
-
-  useEffect(() => {
-    const eventSource = new EventSource(`${API_BASE_URL}/status_stream`);
-    eventSource.onmessage = (event) => {
-      try {
-        const parsedData = JSON.parse(event.data);
-        callbackRef.current?.(parsedData);
-      } catch (err) { console.warn("Status stream error:", err); }
-    };
-    return () => eventSource.close();
-  }, []);
-}

src/pages/MonitoringPage/MonitoringPageComponents.tsx

@@ -1,236 +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';
-import { API_BASE_URL } from '../../config/api.ts';
-
-// --- GESTURE COMPONENT ---
-export const GestureControls: React.FC = () => {
-  const [selectedGesture, setSelectedGesture] = useState("animations/Stand/BodyTalk/Speaking/BodyTalk_1");
-
-  const gestures = [
-    { label: "Wave", value: "animations/Stand/Gestures/Hey_1" }, 
-    { label: "Think", value: "animations/Stand/Emotions/Neutral/Puzzled_1" }, 
-    { label: "Explain", value: "animations/Stand/Gestures/Explain_4" }, 
-    { label: "You", value: "animations/Stand/Gestures/You_1" }, 
-    { label: "Happy", value: "animations/Stand/Emotions/Positive/Happy_1" }, 
-    { label: "Laugh", value: "animations/Stand/Emotions/Positive/Laugh_2" }, 
-    { label: "Lonely", value: "animations/Stand/Emotions/Neutral/Lonely_1" }, 
-    { label: "Suprise", value: "animations/Stand/Emotions/Negative/Surprise_1" }, 
-    { label: "Hurt", value: "animations/Stand/Emotions/Negative/Hurt_2" }, 
-    { label: "Angry", value: "animations/Stand/Emotions/Negative/Angry_4" },
-  ];
-  return (
-    <div className={styles.gestures}>
-      <h4>Gestures</h4>
-      <div className={styles.gestureInputGroup}>
-        <select 
-          value={selectedGesture} 
-          onChange={(e) => setSelectedGesture(e.target.value)}
-        >
-          {gestures.map(g => <option key={g.value} value={g.value}>{g.label}</option>)}
-        </select>
-        <button onClick={() => sendAPICall("gesture", selectedGesture)}>
-          Actuate
-        </button>
-      </div>
-    </div>
-  );
-};
-
-// --- PRESET SPEECH COMPONENT ---
-export const SpeechPresets: React.FC = () => {
-  const phrases = [
-    { label: "Hello, I'm Pepper", text: "Hello, I'm Pepper" },
-    { label: "Repeat please", text: "Could you repeat that please" },
-    { label: "About yourself", text: "Tell me something about yourself" },
-  ];
-
-  return (
-    <div className={styles.speech}>
-      <h4>Speech Presets</h4>
-      <ul>
-        {phrases.map((phrase, i) => (
-          <li key={i}>
-            <button 
-              className={styles.speechBtn} 
-              onClick={() =>  sendAPICall("speech", phrase.text)}
-            >
-              "{phrase.label}"
-            </button>
-          </li>
-        ))}
-      </ul>
-    </div>
-  );
-};
-
-// --- DIRECT SPEECH (INPUT) COMPONENT ---
-export const DirectSpeechInput: React.FC = () => {
-  const [text, setText] = useState("");
-
-  const handleSend = () => {
-    if (!text.trim()) return;
-    sendAPICall("speech", text);
-    setText(""); // Clear after sending
-  };
-
-  return (
-    <div className={styles.directSpeech}>
-      <h4>Direct Pepper Speech</h4>
-      <div className={styles.speechInput}>
-        <input 
-          type="text" 
-          value={text}
-          onChange={(e) => setText(e.target.value)}
-          placeholder="Type message..." 
-          onKeyDown={(e) => e.key === 'Enter' && handleSend()}
-        />
-        <button onClick={handleSend}>Send</button>
-      </div>
-    </div>
-  );
-};
-
-// --- interface for goals/triggers/norms/conditional norms ---
-export type StatusItem = {
-  id?: string | number;
-  achieved?: boolean;
-  description?: string;
-  label?: string;
-  norm?: string;
-  name?: string;
-  level?: number;
-};
-
-interface StatusListProps {
-  title: string;
-  items: StatusItem[];
-  type: 'goal' | 'trigger' | 'norm'| 'cond_norm';
-  activeIds: Record<string, boolean>;
-  setActiveIds?: React.Dispatch<React.SetStateAction<Record<string, boolean>>>; 
-  currentGoalIndex?: number;
-}
-
-// --- STATUS LIST COMPONENT ---
-export const StatusList: React.FC<StatusListProps> = ({ 
-  title, 
-  items, 
-  type, 
-  activeIds, 
-  setActiveIds,
-  currentGoalIndex // Destructure this prop
-}) => {
-  return (
-    <section className={styles.phaseBox}>
-      <h3>{title}</h3>
-      <ul>
-        {items.map((item, idx) => {
-          if (item.id === undefined) return null;
-          const isActive = !!activeIds[item.id];
-          const showIndicator = type !== 'norm';
-          const isCurrentGoal = type === 'goal' && idx === currentGoalIndex;
-          const canOverride =  (showIndicator && !isActive) || (type === 'cond_norm' && isActive); 
-
-         const indentation = (item.level || 0) * 20;
-
-          const handleOverrideClick = () => {
-            if (!canOverride) return;
-            if (type === 'cond_norm' && isActive){  
-              {/* Unachieve conditional norm */}
-              sendAPICall("override_unachieve", String(item.id));
-            }
-            else {
-              if(type === 'goal')
-                if(setActiveIds)
-                {setActiveIds(prev => ({ ...prev, [String(item.id)]: true }));}
-            
-              sendAPICall("override", String(item.id));
-            }
-          };
-
-          return (
-            <li key={item.id ?? idx} 
-            className={styles.statusItem}
-            style={{ paddingLeft: `${indentation}px` }}
-            >
-              {showIndicator && (
-                <span 
-                  className={`${styles.statusIndicator} ${isActive ? styles.active : styles.inactive} ${canOverride ? styles.clickable : ''}`}
-                  onClick={handleOverrideClick}
-                >
-                  {isActive ? "✔️" : "❌"}
-                </span>
-              )}
-              <span 
-                className={styles.itemDescription}
-                style={{ 
-                  // Visual Feedback
-                  textDecoration: isCurrentGoal ? 'underline' : 'none',
-                  fontWeight: isCurrentGoal ? 'bold' : 'normal',
-                  color: isCurrentGoal ? '#007bff' : 'inherit',
-                  backgroundColor: isCurrentGoal ? '#e7f3ff' : 'transparent', // Added subtle highlight
-                  padding: isCurrentGoal ? '2px 4px' : '0',
-                  borderRadius: '4px'
-                }}
-              >
-                {item.name || item.norm}
-                {isCurrentGoal && " (Current)"} 
-              </span>
-            </li>
-          );
-        })}
-      </ul>
-    </section>
-  );
-};
-
-
-// --- Robot Connected --- 
-export const RobotConnected = () => {
-
-  /**
-     * The current connection state:
-     * - `true`: Robot is connected.
-     * - `false`: Robot is not connected.
-     * - `null`: Connection status is unknown (initial check in progress).
-     */
-    const [connected, setConnected] = useState<boolean | null>(null);
-  
-    useEffect(() => {
-      // Open a Server-Sent Events (SSE) connection to receive live ping updates.
-      // We're expecting a stream of data like that looks like this: `data = False` or `data = True`
-      const eventSource = new EventSource(`${API_BASE_URL}/robot/ping_stream`);
-      eventSource.onmessage = (event) => {
-      
-        // Expecting messages in JSON format: `true` or `false`
-        //commented out this log as it clutters console logs, but might be useful to debug
-        //console.log("received message:", event.data);
-        try {
-          const data = JSON.parse(event.data);
-  
-          try {
-            setConnected(data)
-          }
-          catch {
-            console.log("couldnt extract connected from incoming ping data")
-          }
-  
-        } catch {
-          console.log("Ping message not in correct format:", event.data);
-        }
-      };
-  
-      // Clean up the SSE connection when the component unmounts.
-      return () => eventSource.close();
-    }, []);
-
-  return  (
-  <div>
-    <h3>Connection:</h3>
-    <p className={connected ? styles.connected : styles.disconnected }>{connected ? "● Robot is connected" : "● Robot is disconnected"}</p>
-  </div>
-  )
-}

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,190 +0,0 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
-import styles from "./ExperimentLogs.module.css";
-import {LogMessages} from "../../../components/Logging/Logging.tsx";
-import {useEffect, useMemo, useState} from "react";
-import {type LogFilterPredicate, type LogRecord, useLogs} from "../../../components/Logging/useLogs.ts";
-import capitalize from "../../../utils/capitalize.ts";
-import {useCell} from "../../../utils/cellStore.ts";
-import {
-  EXPERIMENT_FILTER_KEY,
-  EXPERIMENT_LOGGER_NAME,
-  type LoggingSettings,
-  type MessageComponentProps,
-} from "../../../components/Logging/Definitions.ts";
-import formatDuration from "../../../utils/formatDuration.ts";
-import {create} from "zustand";
-import Dialog from "../../../components/Dialog.tsx";
-import delayedResolve from "../../../utils/delayedResolve.ts";
-import { API_BASE_URL } from "../../../config/api.ts";
-
-/**
- * Local Zustand store for logging UI preferences.
- */
-const useLoggingSettings = create<LoggingSettings>((set) => ({
-  showRelativeTime: false,
-  setShowRelativeTime: (showRelativeTime: boolean) => set({ showRelativeTime }),
-}));
-
-/**
- * A dedicated component for rendering chat messages.
- *
- * @param record The chat record to render.
- */
-function ChatMessage({ record }: { record: LogRecord }) {
-  const { showRelativeTime, setShowRelativeTime } = useLoggingSettings();
-
-  const reverse = record.role === "user" ? styles.alternate : "";
-
-  return <div className={`${styles.chatMessage} ${reverse} flex-col padding-md padding-h-lg shadow-md round-md`}>
-    <div className={`${styles.messageHead} flex-row gap-md align-center`}>
-      <span className={"bold"}>{capitalize(record.role ?? "unknown")}</span>
-      <span className={"font-small"}>•</span>
-      <span className={"mono clickable font-small"} onClick={() => setShowRelativeTime(!showRelativeTime)}>{
-        showRelativeTime
-          ? formatDuration(record.relativeCreated)
-          : new Date(record.created * 1000).toLocaleTimeString()
-      }</span>
-    </div>
-    <span>{record.message}</span>
-  </div>
-}
-
-/**
- * A generic log message component showing the log level, time, and message text.
- *
- * @param record The log record to render.
- */
-function DefaultMessage({ record }: { record: LogRecord }) {
-  const { showRelativeTime, setShowRelativeTime } = useLoggingSettings();
-
-  return <div>
-    <div className={"flex-row gap-md align-center"}>
-      <span className={"font-small"}>{record.levelname}</span>
-      <span className={"font-small"}>•</span>
-      <span className={"mono clickable font-small"} onClick={() => setShowRelativeTime(!showRelativeTime)}>{
-        showRelativeTime
-          ? formatDuration(record.relativeCreated)
-          : new Date(record.created * 1000).toLocaleTimeString()
-      }</span>
-    </div>
-    <span>{record.message}</span>
-  </div>;
-}
-
-/**
- * A custom component for rendering experiment messages, which might include chat messages.
- *
- * @param recordCell The cell containing the log record to render.
- * @param onUpdate A callback to notify the parent component when the record changes.
- */
-function ExperimentMessage({recordCell, onUpdate}: MessageComponentProps) {
-  const record = useCell(recordCell);
-
-  // Notify the parent component (e.g., for scroll updates) when this record changes.
-  useEffect(() => {
-    if (onUpdate) onUpdate();
-  }, [record, onUpdate]);
-
-  if (record.levelname == "CHAT") {
-    return <ChatMessage record={record} />
-  } else {
-    return <DefaultMessage record={record} />
-  }
-}
-
-/**
- * A download dialog listing experiment logs to download.
- *
- * @param filenames The list of available experiment logs to download.
- * @param refresh A callback to refresh the list of available experiment logs.
- */
-function DownloadScreen({filenames, refresh}: {filenames: string[] | null, refresh: () => void}) {
-  const list = (() => {
-    if (filenames == null) return <div className={`${styles.downloadList} flex-col align-center justify-center`}>
-      <p>Loading...</p>
-    </div>;
-    if (filenames.length === 0) return <div className={`${styles.downloadList} flex-col align-center justify-center`}>
-      <p>No files available.</p>
-    </div>
-
-    return <ol className={`${styles.downloadList} margin-0 padding-h-lg scroll-y`}>
-      {filenames!.map((filename) => (
-        <li><a key={filename} href={`${API_BASE_URL}/api/logs/files/${filename}`} download={filename}>{filename}</a></li>
-      ))}
-    </ol>;
-  })();
-
-  return <div className={"flex-col"}>
-    <p className={"margin-lg"}>Select a file to download:</p>
-    {list}
-    <button onClick={refresh} className={"margin-lg shadow-sm"}>Refresh</button>
-  </div>;
-}
-
-/**
- * A button that opens a download dialog for experiment logs when pressed.
- */
-function DownloadButton() {
-  const [showModal, setShowModal] = useState(false);
-  const [filenames, setFilenames] = useState<string[] | null>(null);
-
-  async function getFiles(): Promise<string[]> {
-    const response = await fetch(`${API_BASE_URL}/api/logs/files`);
-    const files = await response.json();
-    files.sort();
-    return files;
-  }
-
-  useEffect(() => {
-    getFiles().then(setFilenames);
-  }, [showModal]);
-
-  return <>
-    <button className={"shadow-sm"} onClick={() => setShowModal((curr) => !curr)}>Download...</button>
-    <Dialog open={showModal} close={() => setShowModal(false)} classname={"padding-0 round-lg"}>
-      <DownloadScreen filenames={filenames} refresh={async () => {
-        setFilenames(null);
-        const files = await delayedResolve(getFiles(), 250);
-        setFilenames(files);
-      }} />
-    </Dialog>
-  </>;
-}
-
-/**
- * A component for rendering experiment logs. This component uses the `useLogs` hook with a filter to show only
- * experiment logs.
- */
-export default function ExperimentLogs() {
-  // Show only experiment logs in this logger
-  const filters = useMemo(() => new Map<string, LogFilterPredicate>([
-    [
-      EXPERIMENT_FILTER_KEY,
-      {
-        predicate: (r) => r.name == EXPERIMENT_LOGGER_NAME,
-        priority: 999,
-        value: null,
-      } as LogFilterPredicate,
-    ],
-  ]), []);
-
-  const { filteredLogs } = useLogs(filters);
-
-  return <aside className={`${styles.logs} flex-col relative`}>
-    <div className={`${styles.head} padding-lg`}>
-      <div className={"flex-row align-center justify-between"}>
-        <h3>Logs</h3>
-        <div className={"flex-row gap-md align-center"}>
-          <div className={`flex-row align-center gap-md relative padding-md shadow-sm round-md`}>
-            <div className={styles.live}></div>
-            <span>Live</span>
-          </div>
-          <DownloadButton />
-        </div>
-      </div>
-    </div>
-    <LogMessages recordCells={filteredLogs} MessageComponent={ExperimentMessage} />
-  </aside>;
-}

src/pages/Robot/Robot.tsx

@@ -0,0 +1,130 @@
+import { useState, useEffect, useRef } from 'react'
+
+/**
+ * Displays a live robot interaction panel with user input, conversation history,
+ * and real-time updates from the robot backend via Server-Sent Events (SSE).
+ *
+ * @returns A React element rendering the interactive robot UI.
+ */
+export default function Robot() {
+  /** The text message currently entered by the user. */
+  const [message, setMessage] = useState('');
+
+  /** Whether the robot’s microphone or listening mode is currently active. */
+  const [listening, setListening] = useState(false);
+  /** The ongoing conversation history as a sequence of user/assistant messages. */
+  const [conversation, setConversation] = useState<
+  {"role": "user" | "assistant", "content": string}[]>([])
+  /** Reference to the scrollable conversation container for auto-scrolling. */
+  const conversationRef = useRef<HTMLDivElement | null>(null);
+  /**
+   * Index used to force refresh the SSE connection or clear conversation.
+   * Incrementing this value triggers a reset of the live data stream.
+   */
+  const [conversationIndex, setConversationIndex] = useState(0);
+
+  /**
+   * Sends a message to the robot backend.
+   *
+   * Makes a POST request to `/message` with the user’s text.
+   * The backend may respond with confirmation or error information.
+   */
+  const sendMessage = async () => {
+    try {
+      const response = await fetch("http://localhost:8000/message", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ message }),
+      });
+      const data = await response.json();
+      console.log(data);
+    } catch (error) {
+      console.error("Error sending message: ", error);
+    }
+  };
+
+   /**
+   * Establishes a persistent Server-Sent Events (SSE) connection
+   * to receive real-time updates from the robot backend.
+   *
+   * Handles three event types:
+   * - `voice_active`: whether the robot is currently listening.
+   * - `speech`: recognized user speech input.
+   * - `llm_response`: the robot’s language model-generated reply.
+   *
+   * The connection resets whenever `conversationIndex` changes.
+   */
+  useEffect(() => {
+    const eventSource = new EventSource("http://localhost:8000/sse");
+
+    eventSource.onmessage = (event) => {
+      try {
+        const data = JSON.parse(event.data);
+        if ("voice_active" in data) setListening(data.voice_active);
+        if ("speech" in data) setConversation(conversation => [...conversation, {"role": "user", "content": data.speech}]);
+        if ("llm_response" in data) setConversation(conversation => [...conversation, {"role": "assistant", "content": data.llm_response}]);
+      } catch {
+        console.log("Unparsable SSE message:", event.data);
+      }
+    };
+
+    return () => {
+      eventSource.close();
+    };
+  }, [conversationIndex]);
+
+  /**
+   * Automatically scrolls the conversation view to the bottom
+   * whenever a new message is added.
+   */
+  useEffect(() => {
+    if (!conversationRef || !conversationRef.current) return;
+    conversationRef.current.scrollTop = conversationRef.current.scrollHeight;
+  }, [conversation]);
+
+  return (
+    <>
+      <h1>Robot interaction</h1>
+      <h2>Force robot speech</h2>
+      <div className={"flex-row gap-md justify-center"}>
+        <input
+          type="text"
+          value={message}
+          onChange={(e) => setMessage(e.target.value)}
+          onKeyDown={(e) => e.key === "Enter" && sendMessage().then(() => setMessage(""))}
+          placeholder="Enter a message"
+        />
+        <button onClick={sendMessage}>Speak</button>
+      </div>
+      <div className={"flex-col gap-lg align-center"}>
+        <h2>Conversation</h2>
+        <p>Listening {listening ? "🟢" : "🔴"}</p>
+        <div style={{ maxHeight: "200px", maxWidth: "600px", overflowY: "auto"}} ref={conversationRef}>
+          {conversation.map((item, i) => (
+            <p key={i}
+              style={{
+                backgroundColor: item["role"] == "user"
+                  ? "color-mix(in oklab, canvas, blue 20%)"
+                  : "color-mix(in oklab, canvas, gray 20%)",
+                whiteSpace: "pre-line",
+              }}
+              className={"round-md padding-md"}
+            >{item["content"]}</p>
+          ))}
+        </div>
+        <div className={"flex-row gap-md justify-center"}>
+          <button onClick={() => {
+            setConversationIndex((conversationIndex) => conversationIndex + 1)
+            setConversation([])
+          }}>Reset</button>
+          <button onClick={() => {
+            setConversationIndex((conversationIndex) => conversationIndex == -1 ? 0 : -1)
+            setConversation([])
+          }}>{conversationIndex == -1 ? "Start" : "Stop"}</button>
+        </div>
+      </div>
+    </>
+  );
+}

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,12 +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 useProgramStore from "../../utils/programStore";
 import orderPhaseNodeArray from "../../utils/orderPhaseNodes";
 import useFlowStore from './visualProgrammingUI/VisProgStores';
 import { NodeReduces } from './visualProgrammingUI/NodeRegistry';
 import type { PhaseNode } from "./visualProgrammingUI/nodes/PhaseNode";
-import { API_BASE_URL } from "../../config/api.ts";
 
 /**
  * Reduces the graph into its phases' information and recursively calls their reducing function
@@ -29,7 +25,7 @@ export function runProgram() {
   const program = {phases}
   console.log(JSON.stringify(program, null, 2));
   fetch(
-    `${API_BASE_URL}/program`,
+    "http://localhost:8000/program",
     {
       method: "POST",
       headers: {"Content-Type": "application/json"},

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

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,
@@ -96,11 +93,6 @@ export type FlowState = {
    */
   updateNodeData: (nodeId: string, data: object) => void;
 
-  /**
-   * Validates that all node names are unique across the workspace.
-   */
-  validateDuplicateNames: (nodes: Node[]) => void;
-
   /**
    * Adds a new node to the flow.
    * @param node - the Node object to add

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:
@@ -23,8 +20,6 @@ export type WarningType =
   | 'PLAN_IS_UNDEFINED'
   | 'INCOMPLETE_PROGRAM'
   | 'NOT_CONNECTED_TO_PROGRAM'
-  | 'ELEMENT_STARTS_WITH_NUMBER' //(non-phase)elements are not allowed to be or start with a number
-  | 'DUPLICATE_ELEMENT_NAME' // elements are not allowed to have the same name as another element
   | string
 
 export type WarningSeverity =

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

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

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

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

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

@@ -1,6 +1,3 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
 // This file is to avoid sharing both functions and components which eslint dislikes. :)
 import type { GoalNode } from "../nodes/GoalNode"
 import type { Goal, Plan } from "./Plan"

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

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

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,
@@ -69,7 +66,7 @@ export default function GoalNode({id, data}: NodeProps<GoalNode>) {
     updateNodeData(id, {...data, can_fail: value});
   }
 
-  //undefined plan warning
+
   useEffect(() => {
     const noPlanWarning : EditorWarning = {
       scope: {
@@ -81,31 +78,12 @@ export default function GoalNode({id, data}: NodeProps<GoalNode>) {
       description: "This goalNode is missing a plan, please make sure to create a plan by using the create plan button"
     };
 
-    if (!data.plan || data.plan.steps?.length === 0){
+    if (!data.plan){
       registerWarning(noPlanWarning);
       return;
     }
     unregisterWarning(id, noPlanWarning.type);
   },[data.plan, id, registerWarning, unregisterWarning])
-
-  //starts with number warning
-  useEffect(() => {
-      const name = data.name || "";
-      
-      const startsWithNumberWarning: EditorWarning = {
-        scope: { id: id },
-        type: 'ELEMENT_STARTS_WITH_NUMBER',
-        severity: 'ERROR',
-        description: "Norms are not allowed to start with a number."
-      };
-  
-      if (/^\d/.test(name)) {
-        registerWarning(startsWithNumberWarning);
-      } else {
-        unregisterWarning(id, 'ELEMENT_STARTS_WITH_NUMBER');
-      }
-    }, [data.name, id, registerWarning, unregisterWarning]);
-  
   return <>
     <Toolbar nodeId={id} allowDelete={true}/>
     <div className={`${styles.defaultNode} ${styles.nodeGoal} flex-col gap-sm`}>

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,8 +1,3 @@
-// This program has been developed by students from the bachelor Computer Science at Utrecht
-// University within the Software Project course.
-// © Copyright Utrecht University (Department of Information and Computing Sciences)
-import { useEffect } from "react";
-import type { EditorWarning } from "../components/EditorWarnings.tsx";
 import {
   type NodeProps,
   Position,
@@ -41,7 +36,7 @@ export type NormNode = Node<NormNodeData>
  */
 export default function NormNode(props: NodeProps<NormNode>) {
   const data = props.data;
-  const {updateNodeData, registerWarning, unregisterWarning} = useFlowStore();
+  const {updateNodeData} = useFlowStore();
 
   const text_input_id = `norm_${props.id}_text_input`;
   const checkbox_id = `goal_${props.id}_checkbox`;
@@ -49,44 +44,10 @@ export default function NormNode(props: NodeProps<NormNode>) {
   const setValue = (value: string) => {
     updateNodeData(props.id, {norm: value});
   }
-  //this function is commented out, because of lack of backend implementation.
-  //If you wish to set critical norms, in the UI side, you can uncomment and use this function.
 
-  // const setCritical = (value: boolean) => {
-  //   updateNodeData(props.id, {...data, critical: value});
-  // }
-  useEffect(() => {
-    const normText = data.norm || "";
-    
-    const startsWithNumberWarning: EditorWarning = {
-      scope: { id: props.id },
-      type: 'ELEMENT_STARTS_WITH_NUMBER',
-      severity: 'ERROR',
-      description: "Norms are not allowed to start with a number."
-    };
-
-    if (/^\d/.test(normText)) {
-      registerWarning(startsWithNumberWarning);
-    } else {
-      unregisterWarning(props.id, 'ELEMENT_STARTS_WITH_NUMBER');
-    }
-  }, [data.norm, props.id, registerWarning, unregisterWarning]);
-  useEffect(() => {
-    const normText = data.norm || "";
-    
-    const startsWithNumberWarning: EditorWarning = {
-      scope: { id: props.id },
-      type: 'ELEMENT_STARTS_WITH_NUMBER',
-      severity: 'ERROR',
-      description: "Norms are not allowed to start with a number."
-    };
-
-    if (/^\d/.test(normText)) {
-      registerWarning(startsWithNumberWarning);
-    } else {
-      unregisterWarning(props.id, 'ELEMENT_STARTS_WITH_NUMBER');
-    }
-  }, [data.norm, props.id, registerWarning, unregisterWarning]);
+  const setCritical = (value: boolean) => {
+    updateNodeData(props.id, {...data, critical: value});
+  }
 
   return <>
     <Toolbar nodeId={props.id} allowDelete={true}/>
@@ -100,10 +61,7 @@ export default function NormNode(props: NodeProps<NormNode>) {
           placeholder={"Pepper should ..."}
         />
       </div>
-      {/*There is no backend implementation yet of how critical norms would
-      be treated differently than normal norms. The commented code below shows
-      how you could add the UI side, if you wish to implement */}
-      {/* <div className={"flex-row gap-md align-center"}>
+      <div className={"flex-row gap-md align-center"}>
         <label htmlFor={checkbox_id}>Critical:</label>
         <input
           id={checkbox_id}
@@ -111,7 +69,7 @@ export default function NormNode(props: NodeProps<NormNode>) {
           checked={data.critical || false}
           onChange={(e) => setCritical(e.target.checked)}
         />
-      </div> */}
+      </div>
 
 
       {data.condition && (<div className={"flex-row gap-md align-center"} data-testid="norm-condition-information">

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,
@@ -115,27 +112,12 @@ export default function TriggerNode(props: NodeProps<TriggerNode>) {
       description: "This triggerNode is missing a plan, please make sure to create a plan by using the create plan button"
     };
 
-    if ((!data.plan || data.plan.steps?.length === 0) && outputCons.length !== 0){
+    if (!data.plan && outputCons.length !== 0){
       registerWarning(noPlanWarning);
       return;
     }
     unregisterWarning(props.id, noPlanWarning.type);
   },[data.plan, outputCons.length, props.id, registerWarning, unregisterWarning])
-
-  useEffect(() => {
-  const name = data.name || "";
-  
-  if (/^\d/.test(name)) {
-    registerWarning({
-      scope: { id: props.id },
-      type: 'ELEMENT_STARTS_WITH_NUMBER',
-      severity: 'ERROR',
-      description: "Trigger names are not allowed to start with a number."
-    });
-  } else {
-    unregisterWarning(props.id, 'ELEMENT_STARTS_WITH_NUMBER');
-  }
-}, [data.name, props.id, registerWarning, unregisterWarning]);
   return <>
 
     <Toolbar nodeId={props.id} allowDelete={true}/>
@@ -157,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
    */

src/vite-env.d.ts

@@ -1,11 +0,0 @@
-/// <reference types="vite/client" />
-
-interface ImportMetaEnv {
-  readonly VITE_API_BASE_URL?: string;
-}
-
-interface ImportMeta {
-  readonly env: ImportMetaEnv;
-}
-
-declare const __VITE_API_BASE_URL__: string | undefined;

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,12 +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 { render, screen, act } from "@testing-library/react";
 import "@testing-library/jest-dom";
 import {type LogRecord, useLogs} from "../../../src/components/Logging/useLogs.ts";
 import {type cell, useCell} from "../../../src/utils/cellStore.ts";
 import { StrictMode } from "react";
-import { API_BASE_URL } from "../../../src/config/api.ts";
 
 jest.mock("../../../src/utils/priorityFiltering.ts", () => ({
   applyPriorityPredicates: jest.fn((_log, preds: any[]) =>
@@ -84,7 +80,7 @@ describe("useLogs (unit)", () => {
     );
     const es = (globalThis as any).__es as MockEventSource;
     expect(es).toBeTruthy();
-    expect(es.url).toBe(`${API_BASE_URL}/logs/stream`);
+    expect(es.url).toBe("http://localhost:8000/logs/stream");
 
     unmount();
     expect(es.close).toHaveBeenCalledTimes(1);

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

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

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,224 +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';
-import { API_BASE_URL } from '../../../src/config/api.ts';
-
-// --- MOCK EVENT SOURCE SETUP ---
-// This mocks the browser's EventSource so we can manually 'push' messages to our hooks
-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(
-        `${API_BASE_URL}/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));
-    });
-  });
-});