feat: first version of simple program shown

shows up if you run the program

ref: N25B-405

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/>