refactor: change the code for better readability

ref: N25B-400

src/index.css

@@ -8,6 +8,9 @@
   background-color: #242424;
 
   --accent-color: #008080;
+  --panel-shadow:
+      0 1px 2px white,
+      0 8px 24px rgba(190, 186, 186, 0.253);
 
   font-synthesis: none;
   text-rendering: optimizeLegibility;
@@ -15,6 +18,14 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+@media (prefers-color-scheme: dark) {
+  :root {
+    --panel-shadow:
+      0 1px 2px rgba(221, 221, 221, 0.178),
+      0 8px 24px rgba(27, 27, 27, 0.507);
+  }
+}
+
 html, body, #root {
   margin: 0;
   padding: 0;

src/pages/MonitoringPage/Components.tsx

@@ -0,0 +1,204 @@
+import React, { useEffect, useState } from 'react';
+import styles from './MonitoringPage.module.css';
+
+/**
+ * HELPER: Unified sender function
+ * In a real app, you might move this to a /services or /hooks folder
+ */
+const sendUserInterrupt = async (type: string, context: string) => {
+  try {
+    const response = await fetch("http://localhost:8000/button_pressed", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ type, context }),
+    });
+    if (!response.ok) throw new Error("Backend response error");
+    console.log(`Interrupt Sent - Type: ${type}, Context: ${context}`);
+  } catch (err) {
+    console.error(`Failed to send interrupt:`, err);
+  }
+};
+
+// --- GESTURE COMPONENT ---
+export const GestureControls: React.FC = () => {
+  const [selectedGesture, setSelectedGesture] = useState("animations/Stand/BodyTalk/Speaking/BodyTalk_1");
+
+  const gestures = [
+    { label: "Body Talk 1", value: "animations/Stand/BodyTalk/Speaking/BodyTalk_1" },
+    { label: "Thinking 8", value: "animations/Stand/Gestures/Thinking_8" },
+    { label: "Thinking 1", value: "animations/Stand/Gestures/Thinking_1" },
+    { label: "Happy", value: "animations/Stand/Emotions/Positive/Happy_1" },
+  ];
+
+  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={() => sendUserInterrupt("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={() => sendUserInterrupt("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;
+    sendUserInterrupt("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 ---
+type StatusItem = {
+  id?: string | number;
+  achieved?: boolean;
+  description?: string;
+  label?: string;
+  norm?: string;
+};
+
+interface StatusListProps {
+  title: string;
+  items: StatusItem[];
+  type: 'goal' | 'trigger' | 'norm'| 'cond_norm';
+}
+
+// --- STATUS LIST COMPONENT ---
+export const StatusList: React.FC<StatusListProps> = ({ title, items, type }) => {
+  return (
+    <section className={styles.phaseBox}>
+      <h3>{title}</h3>
+      <ul>
+        {items.length > 0 ? (
+          items.map((item, idx) => {
+            const isAchieved = item.achieved;
+            const showIndicator = type !== 'norm';
+            const canOverride = showIndicator && !isAchieved;
+
+            return (
+              <li key={item.id ?? idx} className={styles.statusItem}>
+                {showIndicator && (
+                  <span 
+                    className={`${styles.statusIndicator} ${canOverride ? styles.clickable : ''}`}
+                    onClick={() => canOverride && sendUserInterrupt("override", String(item.id))}
+                    title={canOverride ? `Send override for ID: ${item.id}` : 'Achieved'}
+                    style={{ cursor: canOverride ? 'pointer' : 'default' }}
+                  >
+                    {isAchieved ? "✔️" : "❌"}
+                  </span>
+                )}
+
+                <span className={styles.itemDescription}>
+                  {item.description || item.label || item.norm}
+                </span>
+              </li>
+            );
+          })
+        ) : (
+          <p className={styles.emptyText}>No {title.toLowerCase()} defined.</p>
+        )}
+      </ul>
+    </section>
+  );
+};
+
+
+// --- Robot Connected --- 
+export const RobotConnected = () => {
+
+  /**
+     * The current connection state:
+     * - `true`: Robot is connected.
+     * - `false`: Robot is not connected.
+     * - `null`: Connection status is unknown (initial check in progress).
+     */
+    const [connected, setConnected] = useState<boolean | null>(null);
+  
+    useEffect(() => {
+      // Open a Server-Sent Events (SSE) connection to receive live ping updates.
+      // We're expecting a stream of data like that looks like this: `data = False` or `data = True`
+      const eventSource = new EventSource("http://localhost:8000/robot/ping_stream");
+      eventSource.onmessage = (event) => {
+      
+        // Expecting messages in JSON format: `true` or `false`
+        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/MonitoringPage.module.css

@@ -0,0 +1,220 @@
+.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 */
+}
+
+.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;
+}
+
+.restartPhase{
+  background-color: rgb(255, 123, 0);
+  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;
+}
+
+.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: '✔️ ';
+}
+
+/* LOGS */
+.logs {
+  grid-area: logs;
+  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);
+}
+
+.logs textarea {
+  width: 100%;
+  height: 83%;
+  margin-top: 0.5rem;
+  background-color: Canvas;
+  color: CanvasText;
+  border: 1px solid var(--border-color);
+}
+
+.logs button {
+  background: var(--bg-surface);
+  box-shadow: var(--panel-shadow);
+  margin-top: 0.5rem;
+  margin-left: 0.5rem;
+}
+
+/* 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

@@ -0,0 +1,199 @@
+import React from 'react';
+import styles from './MonitoringPage.module.css';
+import useProgramStore from "../../utils/programStore.ts";
+import { GestureControls, SpeechPresets, DirectSpeechInput, StatusList, RobotConnected } from './Components';
+import { nextPhase, pauseExperiment, playExperiment, resetExperiment, resetPhase } from ".//MonitoringPageAPI.ts"
+
+type Goal = { id?: string | number; description?: string; achieved?: boolean };
+type Trigger = { id?: string | number; label?: string ; achieved?: boolean };
+type Norm = { id?: string | number; norm?: string };
+
+
+/**
+ * Helper function for handling the experiment controls buttons.
+ * @param buttonType - Type of button that was pressed.
+ * @param setLoading - Reference to the function that sets the current loading value.
+ * @param _context - (Optional) context parameter that could get used in an API call.
+ * @param _endpoint - (Optional) context parameter that could get used in an API call.
+ */
+const handleButton = async (buttonType: string, setLoading: React.Dispatch<React.SetStateAction<boolean>>, _context?: string, _endpoint?: string,) => {
+  try {
+    setLoading(true);
+    switch (buttonType)  {
+      case "pause":
+        await pauseExperiment();
+        break;
+      case "play":
+        await playExperiment();
+        break;
+      case "nextPhase":
+        await nextPhase();
+        break;
+      case "resetPhase":
+        await resetPhase();
+        break;
+      case "resetExperiment":
+        await resetExperiment();
+        break;
+      default:
+    }
+  } catch (err) {
+    console.error(err);
+  } finally {
+    setLoading(false);
+  }
+}
+
+/**
+ * Defines the pages experiment controls section
+ * @returns an JSX React element
+ */
+const experimentControls = () => {
+  // Define use states for playing and loading
+  const [loading, setLoading] = React.useState(false);
+  const [isPlaying, setIsPlaying] = React.useState(false);
+
+  return ( 
+    <div className={styles.experimentControls}>
+          <h3>Experiment Controls</h3>
+          <div className={styles.controlsButtons}>
+            {/*Pause button*/}
+            <button 
+            className={`${!isPlaying ? styles.pausePlayActive : styles.pausePlayInactive}`}
+            onClick={() => {
+              setIsPlaying(false);
+              handleButton("pause", setLoading);}
+            }
+            disabled={loading}
+            >❚❚</button>
+
+            {/*Play button*/}
+            <button 
+            className={`${isPlaying ? styles.pausePlayActive : styles.pausePlayInactive}`}
+            onClick={() => {
+              setIsPlaying(true);
+              handleButton("play", setLoading);}
+            }
+            disabled={loading}
+            >▶</button>
+
+            {/*Next button*/}
+            <button
+              className={styles.next}
+              onClick={() => handleButton("nextPhase", setLoading)}
+              disabled={loading}
+            >
+              ⏭
+            </button>
+
+            {/*Restart Phase button*/}
+            <button 
+              className={styles.restartPhase}
+              onClick={() => handleButton("resetPhase", setLoading)}
+              disabled={loading}
+            >
+              ↩
+            </button>
+
+            {/*Restart Experiment button*/}
+            <button 
+              className={styles.restartExperiment}
+              onClick={() => handleButton("resetExperiment", setLoading)}
+              disabled={loading}
+              >
+                ⟲
+              </button>
+          </div>  
+        </div>
+  )
+}
+
+
+
+const MonitoringPage: React.FC = () => {
+  const getPhaseIds = useProgramStore((s) => s.getPhaseIds);
+  const getNormsInPhase = useProgramStore((s) => s.getNormsInPhase);
+  const getGoalsInPhase = useProgramStore((s) => s.getGoalsInPhase);
+  const getTriggersInPhase = useProgramStore((s) => s.getTriggersInPhase);
+
+  // Can be used to block actions until feedback from CB.
+  
+
+  const phaseIds = getPhaseIds();
+  const [phaseIndex, _] = React.useState(0);
+
+  if (phaseIds.length === 0) {
+    return <p className={styles.empty}>No program loaded.</p>;
+  }
+
+  const phaseId = phaseIds[phaseIndex];
+
+  const goals = getGoalsInPhase(phaseId) as Goal[];
+  const triggers = getTriggersInPhase(phaseId) as Trigger[];
+  const norms = getNormsInPhase(phaseId) as Norm[];
+
+ 
+  return (
+    <div className={styles.dashboardContainer}>
+      {/* HEADER */}
+      <header className={styles.experimentOverview}>
+        <div className={styles.phaseName}>
+          <h2>Experiment Overview</h2>
+          <p><strong>Phase name:</strong> Rhyming fish</p>
+          <div className={styles.phaseProgress}>
+            <span className={`${styles.phase} ${styles.completed}`}>1</span>
+            <span className={`${styles.phase} ${styles.completed}`}>2</span>
+            <span className={`${styles.phase} ${styles.current}`}>3</span>
+            <span className={styles.phase}>4</span>
+            <span className={styles.phase}>5</span>
+          </div>
+        </div>
+
+        {/*Experiment Controls*/}
+        {experimentControls()}
+
+        <div className={styles.connectionStatus}>
+          {RobotConnected()}
+        </div>
+      </header>
+
+      {/* MAIN GRID */}
+      
+      <main className={styles.phaseOverview}>
+        <section className={styles.phaseOverviewText}>
+          <h3>Phase Overview</h3>
+        </section>
+
+        <StatusList title="Goals" items={goals} type="goal" />
+        <StatusList title="Triggers" items={triggers} type="trigger" />
+        <StatusList title="Norms" items={norms} type="norm" />
+        <StatusList 
+          title="Conditional Norms" 
+          items={[{ id: 'cn_1', norm: '“RP is sad” - Be nice', achieved: false }]} 
+          type="cond_norm" 
+        />
+      </main>
+
+      {/* LOGS */}
+      <aside className={styles.logs}>
+        <h3>Logs</h3>
+        <div className={styles.logHeader}>
+          <span>Global:</span>
+          <button>ALL</button>
+          <button>Add</button>
+          <button className={styles.live}>Live</button>
+        </div>
+        <textarea defaultValue="Example Log: much log"></textarea>
+      </aside>
+
+      {/* FOOTER */}
+      <footer className={styles.controlsSection}>
+        <GestureControls />
+        <SpeechPresets />
+        <DirectSpeechInput />
+      </footer>
+    </div>
+  );
+}
+
+export default MonitoringPage;

src/pages/MonitoringPage/MonitoringPageAPI.ts

@@ -0,0 +1,64 @@
+const API_BASE = "http://localhost:8000/button_pressed"; // Change depending on Pims interup agent/ correct endpoint
+
+
+/**
+ * HELPER: Unified sender function
+ * In a real app, you might move this to a /services or /hooks folder
+ */
+const sendAPICall = async (type: string, context: string, endpoint?: string) => {
+  try {
+    const response = await fetch(`${API_BASE}${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 reset the currect phase 
+ * In case we can't go to the next phase, the function will throw an error.
+ */
+export async function resetPhase(): Promise<void> {
+  const type = "reset_phase"
+  const context = ""
+  sendAPICall(type, context)
+}
+
+/**
+ * Sends an API call to the CB for going to reset the experiment
+ * In case we can't go to the next phase, the function will throw an error.
+ */
+export async function resetExperiment(): Promise<void> {
+  const type = "reset_experiment"
+  const context = ""
+  sendAPICall(type, context)
+}
+
+export async function pauseExperiment(): Promise<void> {
+  const type = "pause"
+  const context = "true"
+  sendAPICall(type, context)
+}
+
+export async function playExperiment(): Promise<void> {
+  const type = "pause"
+  const context = "false"
+  sendAPICall(type, context)
+}

src/pages/VisProgPage/VisProg.module.css

@@ -126,3 +126,10 @@
     outline: red solid 2pt;
     filter: drop-shadow(0 0 0.25rem red);
 }
+
+.backButton {
+  background: var(--bg-surface);
+  box-shadow: var(--panel-shadow);
+  margin-top: 0.5rem;
+  margin-left: 0.5rem;
+}

src/pages/VisProgPage/VisProg.tsx

@@ -16,7 +16,7 @@ import type {FlowState} from './visualProgrammingUI/VisProgTypes.tsx';
 import styles from './VisProg.module.css'
 import { NodeReduces, NodeTypes } from './visualProgrammingUI/NodeRegistry.ts';
 import SaveLoadPanel from './visualProgrammingUI/components/SaveLoadPanel.tsx';
-import SimpleProgram from "../SimpleProgram/SimpleProgram.tsx";
+import MonitoringPage from '../MonitoringPage/MonitoringPage.tsx';
 
 // --| config starting params for flow |--
 
@@ -193,10 +193,10 @@ function VisProgPage() {
   if (showSimpleProgram) {
     return (
     <div>
-      <button onClick={() => setShowSimpleProgram(false)}>
+      <button className={styles.backButton} onClick={() => setShowSimpleProgram(false)}>
         Back to Editor ◀ 
       </button>
-      <SimpleProgram/>
+      <MonitoringPage/>
     </div>
     );
   }