chore: among other things, fixed connection issue

fix: connection issue
conditional norm now able to undo
 and are updated via pings
goals are able to be achieved out of turn

ref: N25B-400

src/pages/MonitoringPage/MonitoringPageAPI.ts

@@ -1,4 +1,5 @@
-import { useEffect } from 'react';
+import React, { useEffect } from 'react';
+import { data } from 'react-router';
 
 const API_BASE = "http://localhost:8000";
 const API_BASE_BP = API_BASE + "/button_pressed"; //UserInterruptAgent endpoint
@@ -6,26 +7,7 @@ const API_BASE_BP = API_BASE + "/button_pressed"; //UserInterruptAgent endpoint
 /**
  * HELPER: Unified sender function
  */
-export const sendUserInterrupt = async (type: string, context: string) => {
-  try {
-    const response = await fetch(API_BASE_BP, {
-      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);
-  }
-};
-
-
-/**
- * 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) => {
+export const sendAPICall = async (type: string, context: string, endpoint?: string) => {
   try {
     const response = await fetch(`${API_BASE_BP}${endpoint ?? ""}`, {
       method: "POST",
@@ -98,25 +80,56 @@ export type ExperimentStreamData = PhaseUpdate | GoalUpdate | TriggerUpdate | Co
  * via updates sent from the backend
  */
 export function useExperimentLogger(onUpdate?: (data: ExperimentStreamData) => void) {
+  const callbackRef = React.useRef(onUpdate);
+  // Ref is updated every time with on update
+  React.useEffect(() => {
+    callbackRef.current = onUpdate;
+  }, [onUpdate]);
+
   useEffect(() => {
+    console.log("Connecting to Experiment Stream...");
     const eventSource = new EventSource(`${API_BASE}/experiment_stream`);
 
     eventSource.onmessage = (event) => {
       try {
         const parsedData = JSON.parse(event.data) as ExperimentStreamData;
-        if (onUpdate) {
-          onUpdate(parsedData);
-        }
+        //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: any) => void) {
+  const callbackRef = React.useRef(onUpdate);
+
+  React.useEffect(() => {
+    callbackRef.current = onUpdate;
   }, [onUpdate]);
+
+  useEffect(() => {
+    const eventSource = new EventSource(`${API_BASE}/status_stream`);
+    eventSource.onmessage = (event) => {
+      try {
+        const parsedData = JSON.parse(event.data);
+        callbackRef.current?.(parsedData);
+      } catch (err) { console.warn("Status stream error:", err); }
+    };
+    return () => eventSource.close();
+  }, []); // LEGE dependency array
 }