src/pages/MonitoringPage/MonitoringPage.tsx

@@ -1,7 +1,32 @@
 import React from 'react';
 import styles from './MonitoringPage.module.css';
+import useProgramStore from "../../utils/programStore.ts";
 
-export default function MonitoringPage() {
+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 };
+
+
+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);
+
+  const phaseIds = getPhaseIds();
+  const [phaseIndex, setPhaseIndex] = 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 */}
@@ -44,26 +69,45 @@ export default function MonitoringPage() {
         <section className={styles.phaseBox}>
           <h3>Goals</h3>
           <ul>
-            <li className={styles.checked}>Convince the RP that you are a fish</li>
-            <li>Reference Shakespeare</li>
-            <li>Give a compliment</li>
+            {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>
-            <li className={styles.checked}>Convince the RP that you are a fish</li>
-            <li>Reference Shakespeare</li>
-            <li>Give a compliment</li>
+            {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>
-            <li>Rhyme when talking</li>
-            <li>Talk like a fish</li>
+            {norms.length > 0 ? (
+              norms.map((norm, idx) => (
+                <li key={norm.id ?? idx}>
+                  {norm.norm}
+                </li>
+              ))) : (
+              <p>No norms defined.</p>
+              )
+            }
           </ul>
         </section>
 
@@ -125,3 +169,5 @@ export default function MonitoringPage() {
     </div>
   );
 }
+
+export default MonitoringPage;

src/pages/VisProgPage/VisProg.tsx

@@ -17,6 +17,7 @@ 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 |--
 
@@ -196,7 +197,7 @@ function VisProgPage() {
       <button onClick={() => setShowSimpleProgram(false)}>
         Back to Editor ◀ 
       </button>
-      <SimpleProgram/>
+      <MonitoringPage/>
     </div>
     );
   }