src/pages/MonitoringPage/Components.tsx

@@ -0,0 +1,149 @@
+import React, { 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 ---
+interface StatusListProps {
+  title: string;
+  items: any[];
+  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>
+  );
+};

src/pages/MonitoringPage/MonitoringPage.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import styles from './MonitoringPage.module.css';
 import useProgramStore from "../../utils/programStore.ts";
+import { GestureControls, SpeechPresets, DirectSpeechInput, StatusList } from './Components';
 import { nextPhase } from ".//MonitoringPageAPI.ts"
 
 type Goal = { id?: string | number; description?: string; achieved?: boolean };
@@ -88,57 +89,14 @@ const MonitoringPage: React.FC = () => {
           <h3>Phase Overview</h3>
         </section>
 
-        <section className={styles.phaseBox}>
-          <h3>Goals</h3>
-          <ul>
-            {goals.length > 0 ? (
-              goals.map((goal, idx) => (
-                <li key={goal.id ?? idx}>
-                  <span>{goal.achieved ? "✔️" : "❌"}</span> {goal.description}
-                </li>
-              ))) : (
-              <p>No goals defined.</p>
-              )
-            }
-          </ul>
-        </section>
-
-        <section className={styles.phaseBox}>
-          <h3>Triggers</h3>
-          <ul>
-            {triggers.length > 0 ? (
-              triggers.map((trigger, idx) => (
-                <li key={trigger.id ?? idx}>
-                  <span>{trigger.achieved ? "✔️" : "❌"}</span> {trigger.label}
-                </li>
-              ))) : (
-              <p>No triggers defined.</p>
-              )
-            }
-          </ul>
-        </section>
-
-        <section className={styles.phaseBox}>
-          <h3>Norms</h3>
-          <ul>
-            {norms.length > 0 ? (
-              norms.map((norm, idx) => (
-                <li key={norm.id ?? idx}>
-                  {norm.norm}
-                </li>
-              ))) : (
-              <p>No norms defined.</p>
-              )
-            }
-          </ul>
-        </section>
-
-        <section className={styles.phaseBox}>
-          <h3>Conditional Norms</h3>
-          <ul>
-            <li>“RP is sad” - Be nice</li>
-          </ul>
-        </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 */}
@@ -155,38 +113,9 @@ const MonitoringPage: React.FC = () => {
 
       {/* FOOTER */}
       <footer className={styles.controlsSection}>
-        <div className={styles.gestures}>
-          <h4>Controls</h4>
-          <ul>
-            <li>Gesture: Wave Left Hand</li>
-            <li>Gesture: Wave Right Hand</li>
-            <li>Gesture: Left Thumbs Up</li>
-            <li>Gesture: Right Thumbs Up</li>
-          </ul>
-        </div>
-
-        <div className={styles.speech}>
-          <h4>Speech Options</h4>
-          <ul>
-            <li>\"Hello, my name is pepper.\"</li>
-            <li>\"How is the weather today?\"</li>
-            <li>\"I like your outfit, very pretty.\"</li>
-            <li>\"How is your day going?\"</li>
-          </ul>
-        </div>
-
-        <div className={styles.directSpeech}>
-          <h4>Direct Pepper Speech</h4>
-          <ul>
-            <li>[time] Send: *Previous message*</li>
-            <li>[time] Send: *Previous message*</li>
-            <li>[time] Send: *Previous message*</li>
-          </ul>
-          <div className={styles.speechInput}>
-            <input type="text" placeholder="Type message..." />
-            <button>Send</button>
-          </div>
-        </div>
+        <GestureControls />
+        <SpeechPresets />
+        <DirectSpeechInput />
       </footer>
     </div>
   );