src/pages/MonitoringPage/Components.tsx

@@ -106,24 +106,34 @@ interface StatusListProps {
   title: string;
   items: any[];
   type: 'goal' | 'trigger' | 'norm'| 'cond_norm';
+  activeIds: Record<string, boolean>;
+  currentGoalIndex?: number;
 }
 
 // --- STATUS LIST COMPONENT ---
-export const StatusList: React.FC<StatusListProps> = ({ title, items, type }) => {
-
+export const StatusList: React.FC<StatusListProps> = ({ 
+  title, 
+  items, 
+  type, 
+  activeIds, 
+  currentGoalIndex // Destructure this prop
+}) => {
   return (
     <section className={styles.phaseBox}>
       <h3>{title}</h3>
       <ul>
         {items.map((item, idx) => {
-          let isAchieved = item.achieved;
+          const isActive = !!activeIds[item.id];
           const showIndicator = type !== 'norm';
-          const canOverride = showIndicator && !isAchieved;
-          const isCurrentGoal = type === 'goal' && item.isCurrent;
+          const canOverride = showIndicator && !isActive;
+
+          // HIGHLIGHT LOGIC: 
+          // If this is the "Goals" list, check if the current index matches
+          const isCurrentGoal = type === 'goal' && idx === currentGoalIndex;
+
           const handleOverrideClick = () => {
             if (!canOverride) return;
-            let contextValue = String(item.id);
-            sendUserInterrupt("override", contextValue);
+            sendUserInterrupt("override", String(item.id));
           };
 
           return (
@@ -133,18 +143,23 @@ export const StatusList: React.FC<StatusListProps> = ({ title, items, type }) =>
                   className={`${styles.statusIndicator} ${canOverride ? styles.clickable : ''}`}
                   onClick={handleOverrideClick}
                 >
-                  {isAchieved ? "✔️" : "❌"}
+                  {isActive ? "✔️" : "❌"}
                 </span>
               )}
-             <span 
+              <span 
                 className={styles.itemDescription}
                 style={{ 
+                  // Visual Feedback
                   textDecoration: isCurrentGoal ? 'underline' : 'none',
                   fontWeight: isCurrentGoal ? 'bold' : 'normal',
-                  color: isCurrentGoal ? '#007bff' : 'inherit' 
+                  color: isCurrentGoal ? '#007bff' : 'inherit',
+                  backgroundColor: isCurrentGoal ? '#e7f3ff' : 'transparent', // Added subtle highlight
+                  padding: isCurrentGoal ? '2px 4px' : '0',
+                  borderRadius: '4px'
                 }}
               >
                 {item.description || item.label || item.norm}
+                {isCurrentGoal && " (Current)"} 
               </span>
             </li>
           );

src/pages/MonitoringPage/MonitoringPage.tsx

@@ -22,6 +22,7 @@ const MonitoringPage: React.FC = () => {
   const phaseIds = getPhaseIds();
   const [phaseIndex, setPhaseIndex] = React.useState(0);
   
+  const isFinished = phaseIndex >= phaseIds.length; //determines if experiment is over
   
   const handleStreamUpdate = React.useCallback((data: any) => {
     // Check for phase updates
@@ -34,19 +35,29 @@ const MonitoringPage: React.FC = () => {
       }
     } 
     else if (data.type === 'goal_update') {
-    // We find which goal in the current phase matches this ID
-    const currentPhaseGoals = getGoalsInPhase(phaseIds[phaseIndex]);
+    const currentPhaseGoals = getGoalsInPhase(phaseIds[phaseIndex]) as any[];
     const gIndex = currentPhaseGoals.findIndex((g: any) => g.id === data.id);
-    if (gIndex !== -1) {
-      setGoalIndex(gIndex);
-      console.log(`Goal index updated to ${gIndex} for goal ID ${data.id}`);
-    }
 
-      setActiveIds((prev) => ({
-        ...prev,
-        [data.id]: true
-      }));
+    if (gIndex !== -1) {
+      //set current goal to the goal that is just started
+      setGoalIndex(gIndex);
+
+      // All previous goals are set to "active" which means they are achieved
+      setActiveIds((prev) => {
+        const nextState = { ...prev };
+        
+        // We loop until i is LESS than gIndex.
+        // This leaves currentPhaseGoals[gIndex] as isActive: false.
+        for (let i = 0; i < gIndex; i++) {
+          nextState[currentPhaseGoals[i].id ] = true;
+        }
+
+        return nextState;
+      });
+
+      console.log(`Now pursuing goal: ${data.id}. Previous goals marked achieved.`);
     }
+  }
 
     else if (data.type === 'trigger_update') {
     setActiveIds((prev) => ({
@@ -54,7 +65,19 @@ const MonitoringPage: React.FC = () => {
       [data.id]: data.achieved // data.id is de key, achieved is true/false
     }));
   }
-  }, [getPhaseIds]);
+  else if (data.type === 'cond_norms_state_update') {
+    setActiveIds((prev) => {
+      const nextState = { ...prev };
+      
+      data.norms.forEach((normUpdate: { id: string; active: boolean }) => {
+        nextState[normUpdate.id] = normUpdate.active;
+      });
+
+      return nextState;
+    });
+    console.log("Updated conditional norms state:", data.norms);
+  }
+}, [getPhaseIds]);
 
   useExperimentLogger(handleStreamUpdate);
 
@@ -74,30 +97,39 @@ const MonitoringPage: React.FC = () => {
   const triggers = (getTriggersInPhase(phaseId) as any[]).map(t => ({
     ...t,
     label: (() => {
-      // Determine the Condition Prefix
-      let prefix = t.label; // Default fallback
+
+      let prefix = "";
       if (t.condition?.keyword) {
         prefix = `if keywords said: "${t.condition.keyword}"`;
       } else if (t.condition?.name) {
         prefix = `if LLM belief: ${t.condition.name}`;
+      } else { //fallback
+        prefix = t.label || "Trigger";
       }
 
-      // Format the Plan Steps
-      // We check if plan exists and has steps
+ 
       const stepLabels = t.plan?.steps?.map((step: any) => {
-     
-        return step.label || step.name || "Action"; 
+        if (step.text) {
+          return `say: "${step.text}"`;
+        } 
+        if (step.gesture) {
+          return `perform gesture: ${step.gesture.name || step.gesture.type}`;
+        } 
+        if (step.goal) {
+          return `perform LLM: ${step.goal}`;
+        }
+        return "Action"; // Fallback
       }) || [];
 
       const planText = stepLabels.length > 0 
         ? `➔ Do: ${stepLabels.join(", ")}` 
         : "➔ (No actions set)";
 
-      // "If [Condition] ➔ Do: [Steps]"
       return `${prefix} ${planText}`;
     })(),
-    achieved: activeIds[t.id] ?? false 
+    isActive: activeIds[t.id] ?? false 
   }));
+
   const norms = (getNormsInPhase(phaseId) as NormNodeData[])
     .filter(n => !n.condition)
     .map(n => ({
@@ -186,11 +218,18 @@ const MonitoringPage: React.FC = () => {
         <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={conditionalNorms} type="cond_norm"/>
+      {isFinished ? (
+          <div className={styles.finishedMessage}>
+            <p> All phases have been successfully completed.</p>
+          </div>
+        ) : (
+          <>
+            <StatusList title="Goals" items={goals} type="goal" activeIds={activeIds} 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} />
+          </>
+        )}
       </main>
 
       {/* LOGS */}