src/pages/SimpleProgram/SimpleProgram.tsx

@@ -0,0 +1,136 @@
+import React from "react";
+import styles from "../VisProgPage/VisProg.module.css";
+
+/* ---------- Types (mirrors backend / reducer output) ---------- */
+
+type Norm = {
+  id: string;
+  label: string;
+  norm: string;
+};
+
+type Goal = {
+  id: string;
+  label: string;
+  description: string;
+  achieved: boolean;
+};
+
+type TriggerKeyword = {
+  id: string;
+  keyword: string;
+};
+
+type KeywordTrigger = {
+  id: string;
+  label: string;
+  type: string;
+  keywords: TriggerKeyword[];
+};
+
+type Phase = {
+  id: string;
+  label: string;
+  norms: Norm[];
+  goals: Goal[];
+  triggers: KeywordTrigger[];
+};
+
+type SimpleProgramProps = {
+  phases: Phase[];
+};
+
+
+/* ---------- Component ---------- */
+
+
+/**
+ * SimpleProgram
+ *
+ * Read-only oversight view for a reduced program.
+ * Displays norms, goals, and triggers grouped per phase.
+ */
+const SimpleProgram: React.FC<SimpleProgramProps> = ({ phases }) => {
+  return (
+    <div className={`${styles.innerEditorContainer} round-lg border-lg`}>
+      <h2>Simple Program Overview</h2>
+      <button onClick={() => {
+            window.history.back();
+            setTimeout(() => {
+            window.history.forward();
+            }, 5); // small delay to ensure the back happens
+        } }> Back </button>
+      {phases.map((phase) => (
+        <div
+          key={phase.id}
+          style={{
+            border: "1px solid #505050",
+            borderRadius: "6px",
+            padding: "1rem",
+            marginBottom: "1rem",
+          }}
+        >
+          <h2>{phase.label}</h2>
+
+          {/* Norms */}
+          <section>
+            <h3>Norms</h3>
+            {phase.norms.length === 0 ? (
+              <p>No norms defined.</p>
+            ) : (
+              <ul>
+                {phase.norms.map((norm) => (
+                  <li key={norm.id}>
+                    <strong>{norm.label}</strong>: {norm.norm}
+                  </li>
+                ))}
+              </ul>
+            )}
+          </section>
+
+          {/* Goals */}
+          <section>
+            <h3>Goals</h3>
+            {phase.goals.length === 0 ? (
+              <p>No goals defined.</p>
+            ) : (
+              <ul>
+                {phase.goals.map((goal) => (
+                  <li key={goal.id}>
+                    <strong>{goal.label}</strong>: {goal.description}{" "}
+                    <em>
+                      [{goal.achieved ? "✔" : "❌"}]
+                    </em>
+                  </li>
+                ))}
+              </ul>
+            )}
+          </section>
+
+          {/* Triggers */}
+          <section>
+            <h3>Triggers</h3>
+            {phase.triggers.length === 0 ? (
+              <p>No triggers defined.</p>
+            ) : (
+              <ul>
+                {phase.triggers.map((trigger) => (
+                  <li key={trigger.id}>
+                    <strong>{trigger.label}</strong> ({trigger.type})
+                    <ul>
+                      {trigger.keywords.map((kw) => (
+                        <li key={kw.id}>{kw.keyword}</li>
+                      ))}
+                    </ul>
+                  </li>
+                ))}
+              </ul>
+            )}
+          </section>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default SimpleProgram;

src/pages/VisProgPage/VisProg.tsx

@@ -7,7 +7,7 @@ import {
   MarkerType,
 } from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
-import {useEffect} from "react";
+import {useEffect, useState} from "react";
 import {useShallow} from 'zustand/react/shallow';
 import {DndToolbar} from './visualProgrammingUI/components/DragDropSidebar.tsx';
 import useFlowStore from './visualProgrammingUI/VisProgStores.tsx';
@@ -15,6 +15,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";
 
 // --| config starting params for flow |--
 
@@ -138,7 +139,7 @@ function VisualProgrammingUI() {
 }
 
 // currently outputs the prepared program to the console
-function runProgram() {
+function runProgramm() {
   const phases = graphReducer();
   const program = {phases}
   console.log(JSON.stringify(program, null, 2));
@@ -174,6 +175,25 @@ function graphReducer() {
  * @constructor
  */
 function VisProgPage() {
+  const [showSimpleProgram, setShowSimpleProgram] = useState(false);
+  const [phases, setPhases] = useState<any[]>([]);
+
+  const runProgram = () => {
+    const reducedPhases = graphReducer();
+    setPhases(reducedPhases);
+    setShowSimpleProgram(true);
+    runProgramm();
+  };
+
+  if (showSimpleProgram) {
+    return (
+      <SimpleProgram
+        phases={phases}
+
+      />
+    );
+  }
+
   return (
     <>
       <VisualProgrammingUI/>