refactor: adapted to fit the split made in monitoringPage

ref: N25B-450
feat: added warnings to inferredBeliefNodes
2026-01-27 10:47:00 +01:00 · 2026-01-23 18:30:26 +01:00 · 2026-01-23 18:23:46 +01:00 · 2026-01-23 18:18:08 +01:00 · 2026-01-23 17:10:48 +01:00 · 2026-01-23 12:57:35 +00:00
59 changed files with 1535 additions and 3052 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,6 +14,7 @@
        "react": "^19.1.1",
        "react-dom": "^19.1.1",
        "react-router": "^7.9.3",
+        "reactflow": "^11.11.4",
        "zustand": "^5.0.8"
      },
      "devDependencies": {
@@ -2054,6 +2055,276 @@
        "url": "https://opencollective.com/pkgr"
      }
    },
+    "node_modules/@reactflow/background": {
+      "version": "11.3.14",
+      "resolved": "https://registry.npmjs.org/@reactflow/background/-/background-11.3.14.tgz",
+      "integrity": "sha512-Gewd7blEVT5Lh6jqrvOgd4G6Qk17eGKQfsDXgyRSqM+CTwDqRldG2LsWN4sNeno6sbqVIC2fZ+rAUBFA9ZEUDA==",
+      "license": "MIT",
+      "dependencies": {
+        "@reactflow/core": "11.11.4",
+        "classcat": "^5.0.3",
+        "zustand": "^4.4.1"
+      },
+      "peerDependencies": {
+        "react": ">=17",
+        "react-dom": ">=17"
+      }
+    },
+    "node_modules/@reactflow/background/node_modules/zustand": {
+      "version": "4.5.7",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.5.7.tgz",
+      "integrity": "sha512-CHOUy7mu3lbD6o6LJLfllpjkzhHXSBlX8B9+qPddUsIfeF5S/UZ5q0kmCsnRqT1UHFQZchNFDDzMbQsuesHWlw==",
+      "license": "MIT",
+      "dependencies": {
+        "use-sync-external-store": "^1.2.2"
+      },
+      "engines": {
+        "node": ">=12.7.0"
+      },
+      "peerDependencies": {
+        "@types/react": ">=16.8",
+        "immer": ">=9.0.6",
+        "react": ">=16.8"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "immer": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@reactflow/controls": {
+      "version": "11.2.14",
+      "resolved": "https://registry.npmjs.org/@reactflow/controls/-/controls-11.2.14.tgz",
+      "integrity": "sha512-MiJp5VldFD7FrqaBNIrQ85dxChrG6ivuZ+dcFhPQUwOK3HfYgX2RHdBua+gx+40p5Vw5It3dVNp/my4Z3jF0dw==",
+      "license": "MIT",
+      "dependencies": {
+        "@reactflow/core": "11.11.4",
+        "classcat": "^5.0.3",
+        "zustand": "^4.4.1"
+      },
+      "peerDependencies": {
+        "react": ">=17",
+        "react-dom": ">=17"
+      }
+    },
+    "node_modules/@reactflow/controls/node_modules/zustand": {
+      "version": "4.5.7",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.5.7.tgz",
+      "integrity": "sha512-CHOUy7mu3lbD6o6LJLfllpjkzhHXSBlX8B9+qPddUsIfeF5S/UZ5q0kmCsnRqT1UHFQZchNFDDzMbQsuesHWlw==",
+      "license": "MIT",
+      "dependencies": {
+        "use-sync-external-store": "^1.2.2"
+      },
+      "engines": {
+        "node": ">=12.7.0"
+      },
+      "peerDependencies": {
+        "@types/react": ">=16.8",
+        "immer": ">=9.0.6",
+        "react": ">=16.8"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "immer": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@reactflow/core": {
+      "version": "11.11.4",
+      "resolved": "https://registry.npmjs.org/@reactflow/core/-/core-11.11.4.tgz",
+      "integrity": "sha512-H4vODklsjAq3AMq6Np4LE12i1I4Ta9PrDHuBR9GmL8uzTt2l2jh4CiQbEMpvMDcp7xi4be0hgXj+Ysodde/i7Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3": "^7.4.0",
+        "@types/d3-drag": "^3.0.1",
+        "@types/d3-selection": "^3.0.3",
+        "@types/d3-zoom": "^3.0.1",
+        "classcat": "^5.0.3",
+        "d3-drag": "^3.0.0",
+        "d3-selection": "^3.0.0",
+        "d3-zoom": "^3.0.0",
+        "zustand": "^4.4.1"
+      },
+      "peerDependencies": {
+        "react": ">=17",
+        "react-dom": ">=17"
+      }
+    },
+    "node_modules/@reactflow/core/node_modules/zustand": {
+      "version": "4.5.7",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.5.7.tgz",
+      "integrity": "sha512-CHOUy7mu3lbD6o6LJLfllpjkzhHXSBlX8B9+qPddUsIfeF5S/UZ5q0kmCsnRqT1UHFQZchNFDDzMbQsuesHWlw==",
+      "license": "MIT",
+      "dependencies": {
+        "use-sync-external-store": "^1.2.2"
+      },
+      "engines": {
+        "node": ">=12.7.0"
+      },
+      "peerDependencies": {
+        "@types/react": ">=16.8",
+        "immer": ">=9.0.6",
+        "react": ">=16.8"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "immer": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@reactflow/minimap": {
+      "version": "11.7.14",
+      "resolved": "https://registry.npmjs.org/@reactflow/minimap/-/minimap-11.7.14.tgz",
+      "integrity": "sha512-mpwLKKrEAofgFJdkhwR5UQ1JYWlcAAL/ZU/bctBkuNTT1yqV+y0buoNVImsRehVYhJwffSWeSHaBR5/GJjlCSQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@reactflow/core": "11.11.4",
+        "@types/d3-selection": "^3.0.3",
+        "@types/d3-zoom": "^3.0.1",
+        "classcat": "^5.0.3",
+        "d3-selection": "^3.0.0",
+        "d3-zoom": "^3.0.0",
+        "zustand": "^4.4.1"
+      },
+      "peerDependencies": {
+        "react": ">=17",
+        "react-dom": ">=17"
+      }
+    },
+    "node_modules/@reactflow/minimap/node_modules/zustand": {
+      "version": "4.5.7",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.5.7.tgz",
+      "integrity": "sha512-CHOUy7mu3lbD6o6LJLfllpjkzhHXSBlX8B9+qPddUsIfeF5S/UZ5q0kmCsnRqT1UHFQZchNFDDzMbQsuesHWlw==",
+      "license": "MIT",
+      "dependencies": {
+        "use-sync-external-store": "^1.2.2"
+      },
+      "engines": {
+        "node": ">=12.7.0"
+      },
+      "peerDependencies": {
+        "@types/react": ">=16.8",
+        "immer": ">=9.0.6",
+        "react": ">=16.8"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "immer": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@reactflow/node-resizer": {
+      "version": "2.2.14",
+      "resolved": "https://registry.npmjs.org/@reactflow/node-resizer/-/node-resizer-2.2.14.tgz",
+      "integrity": "sha512-fwqnks83jUlYr6OHcdFEedumWKChTHRGw/kbCxj0oqBd+ekfs+SIp4ddyNU0pdx96JIm5iNFS0oNrmEiJbbSaA==",
+      "license": "MIT",
+      "dependencies": {
+        "@reactflow/core": "11.11.4",
+        "classcat": "^5.0.4",
+        "d3-drag": "^3.0.0",
+        "d3-selection": "^3.0.0",
+        "zustand": "^4.4.1"
+      },
+      "peerDependencies": {
+        "react": ">=17",
+        "react-dom": ">=17"
+      }
+    },
+    "node_modules/@reactflow/node-resizer/node_modules/zustand": {
+      "version": "4.5.7",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.5.7.tgz",
+      "integrity": "sha512-CHOUy7mu3lbD6o6LJLfllpjkzhHXSBlX8B9+qPddUsIfeF5S/UZ5q0kmCsnRqT1UHFQZchNFDDzMbQsuesHWlw==",
+      "license": "MIT",
+      "dependencies": {
+        "use-sync-external-store": "^1.2.2"
+      },
+      "engines": {
+        "node": ">=12.7.0"
+      },
+      "peerDependencies": {
+        "@types/react": ">=16.8",
+        "immer": ">=9.0.6",
+        "react": ">=16.8"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "immer": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@reactflow/node-toolbar": {
+      "version": "1.3.14",
+      "resolved": "https://registry.npmjs.org/@reactflow/node-toolbar/-/node-toolbar-1.3.14.tgz",
+      "integrity": "sha512-rbynXQnH/xFNu4P9H+hVqlEUafDCkEoCy0Dg9mG22Sg+rY/0ck6KkrAQrYrTgXusd+cEJOMK0uOOFCK2/5rSGQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@reactflow/core": "11.11.4",
+        "classcat": "^5.0.3",
+        "zustand": "^4.4.1"
+      },
+      "peerDependencies": {
+        "react": ">=17",
+        "react-dom": ">=17"
+      }
+    },
+    "node_modules/@reactflow/node-toolbar/node_modules/zustand": {
+      "version": "4.5.7",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.5.7.tgz",
+      "integrity": "sha512-CHOUy7mu3lbD6o6LJLfllpjkzhHXSBlX8B9+qPddUsIfeF5S/UZ5q0kmCsnRqT1UHFQZchNFDDzMbQsuesHWlw==",
+      "license": "MIT",
+      "dependencies": {
+        "use-sync-external-store": "^1.2.2"
+      },
+      "engines": {
+        "node": ">=12.7.0"
+      },
+      "peerDependencies": {
+        "@types/react": ">=16.8",
+        "immer": ">=9.0.6",
+        "react": ">=16.8"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "immer": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/@rolldown/pluginutils": {
      "version": "1.0.0-beta.35",
      "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.35.tgz",
@@ -2648,12 +2919,102 @@
        "@babel/types": "^7.28.2"
      }
    },
+    "node_modules/@types/d3": {
+      "version": "7.4.3",
+      "resolved": "https://registry.npmjs.org/@types/d3/-/d3-7.4.3.tgz",
+      "integrity": "sha512-lZXZ9ckh5R8uiFVt8ogUNf+pIrK4EsWrx2Np75WvF/eTpJ0FMHNhjXk8CKEx/+gpHbNQyJWehbFaTvqmHWB3ww==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-array": "*",
+        "@types/d3-axis": "*",
+        "@types/d3-brush": "*",
+        "@types/d3-chord": "*",
+        "@types/d3-color": "*",
+        "@types/d3-contour": "*",
+        "@types/d3-delaunay": "*",
+        "@types/d3-dispatch": "*",
+        "@types/d3-drag": "*",
+        "@types/d3-dsv": "*",
+        "@types/d3-ease": "*",
+        "@types/d3-fetch": "*",
+        "@types/d3-force": "*",
+        "@types/d3-format": "*",
+        "@types/d3-geo": "*",
+        "@types/d3-hierarchy": "*",
+        "@types/d3-interpolate": "*",
+        "@types/d3-path": "*",
+        "@types/d3-polygon": "*",
+        "@types/d3-quadtree": "*",
+        "@types/d3-random": "*",
+        "@types/d3-scale": "*",
+        "@types/d3-scale-chromatic": "*",
+        "@types/d3-selection": "*",
+        "@types/d3-shape": "*",
+        "@types/d3-time": "*",
+        "@types/d3-time-format": "*",
+        "@types/d3-timer": "*",
+        "@types/d3-transition": "*",
+        "@types/d3-zoom": "*"
+      }
+    },
+    "node_modules/@types/d3-array": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.2.tgz",
+      "integrity": "sha512-hOLWVbm7uRza0BYXpIIW5pxfrKe0W+D5lrFiAEYR+pb6w3N2SwSMaJbXdUfSEv+dT4MfHBLtn5js0LAWaO6otw==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-axis": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@types/d3-axis/-/d3-axis-3.0.6.tgz",
+      "integrity": "sha512-pYeijfZuBd87T0hGn0FO1vQ/cgLk6E1ALJjfkC0oJ8cbwkZl3TpgS8bVBLZN+2jjGgg38epgxb2zmoGtSfvgMw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-selection": "*"
+      }
+    },
+    "node_modules/@types/d3-brush": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@types/d3-brush/-/d3-brush-3.0.6.tgz",
+      "integrity": "sha512-nH60IZNNxEcrh6L1ZSMNA28rj27ut/2ZmI3r96Zd+1jrZD++zD3LsMIjWlvg4AYrHn/Pqz4CF3veCxGjtbqt7A==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-selection": "*"
+      }
+    },
+    "node_modules/@types/d3-chord": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@types/d3-chord/-/d3-chord-3.0.6.tgz",
+      "integrity": "sha512-LFYWWd8nwfwEmTZG9PfQxd17HbNPksHBiJHaKuY1XeqscXacsS2tyoo6OdRsjf+NQYeB6XrNL3a25E3gH69lcg==",
+      "license": "MIT"
+    },
    "node_modules/@types/d3-color": {
      "version": "3.1.3",
      "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz",
      "integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==",
      "license": "MIT"
    },
+    "node_modules/@types/d3-contour": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@types/d3-contour/-/d3-contour-3.0.6.tgz",
+      "integrity": "sha512-BjzLgXGnCWjUSYGfH1cpdo41/hgdWETu4YxpezoztawmqsvCeep+8QGfiY6YbDvfgHz/DkjeIkkZVJavB4a3rg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-array": "*",
+        "@types/geojson": "*"
+      }
+    },
+    "node_modules/@types/d3-delaunay": {
+      "version": "6.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-delaunay/-/d3-delaunay-6.0.4.tgz",
+      "integrity": "sha512-ZMaSKu4THYCU6sV64Lhg6qjf1orxBthaC161plr5KuPHo3CNm8DTHiLw/5Eq2b6TsNP0W0iJrUOFscY6Q450Hw==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-dispatch": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-dispatch/-/d3-dispatch-3.0.7.tgz",
+      "integrity": "sha512-5o9OIAdKkhN1QItV2oqaE5KMIiXAvDWBDPrD85e58Qlz1c1kI/J0NcqbEG88CoTwJrYe7ntUCVfeUl2UJKbWgA==",
+      "license": "MIT"
+    },
    "node_modules/@types/d3-drag": {
      "version": "3.0.7",
      "resolved": "https://registry.npmjs.org/@types/d3-drag/-/d3-drag-3.0.7.tgz",
@@ -2663,6 +3024,54 @@
        "@types/d3-selection": "*"
      }
    },
+    "node_modules/@types/d3-dsv": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-dsv/-/d3-dsv-3.0.7.tgz",
+      "integrity": "sha512-n6QBF9/+XASqcKK6waudgL0pf/S5XHPPI8APyMLLUHd8NqouBGLsU8MgtO7NINGtPBtk9Kko/W4ea0oAspwh9g==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-ease": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-3.0.2.tgz",
+      "integrity": "sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-fetch": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-fetch/-/d3-fetch-3.0.7.tgz",
+      "integrity": "sha512-fTAfNmxSb9SOWNB9IoG5c8Hg6R+AzUHDRlsXsDZsNp6sxAEOP0tkP3gKkNSO/qmHPoBFTxNrjDprVHDQDvo5aA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-dsv": "*"
+      }
+    },
+    "node_modules/@types/d3-force": {
+      "version": "3.0.10",
+      "resolved": "https://registry.npmjs.org/@types/d3-force/-/d3-force-3.0.10.tgz",
+      "integrity": "sha512-ZYeSaCF3p73RdOKcjj+swRlZfnYpK1EbaDiYICEEp5Q6sUiqFaFQ9qgoshp5CzIyyb/yD09kD9o2zEltCexlgw==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-format": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-format/-/d3-format-3.0.4.tgz",
+      "integrity": "sha512-fALi2aI6shfg7vM5KiR1wNJnZ7r6UuggVqtDA+xiEdPZQwy/trcQaHnwShLuLdta2rTymCNpxYTiMZX/e09F4g==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-geo": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@types/d3-geo/-/d3-geo-3.1.0.tgz",
+      "integrity": "sha512-856sckF0oP/diXtS4jNsiQw/UuK5fQG8l/a9VVLeSouf1/PPbBE1i1W852zVwKwYCBkFJJB7nCFTbk6UMEXBOQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/geojson": "*"
+      }
+    },
+    "node_modules/@types/d3-hierarchy": {
+      "version": "3.1.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-hierarchy/-/d3-hierarchy-3.1.7.tgz",
+      "integrity": "sha512-tJFtNoYBtRtkNysX1Xq4sxtjK8YgoWUNpIiUee0/jHGRwqvzYxkq0hGVbbOGSz+JgFxxRu4K8nb3YpG3CMARtg==",
+      "license": "MIT"
+    },
    "node_modules/@types/d3-interpolate": {
      "version": "3.0.4",
      "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz",
@@ -2672,12 +3081,78 @@
        "@types/d3-color": "*"
      }
    },
+    "node_modules/@types/d3-path": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-3.1.1.tgz",
+      "integrity": "sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-polygon": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-polygon/-/d3-polygon-3.0.2.tgz",
+      "integrity": "sha512-ZuWOtMaHCkN9xoeEMr1ubW2nGWsp4nIql+OPQRstu4ypeZ+zk3YKqQT0CXVe/PYqrKpZAi+J9mTs05TKwjXSRA==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-quadtree": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@types/d3-quadtree/-/d3-quadtree-3.0.6.tgz",
+      "integrity": "sha512-oUzyO1/Zm6rsxKRHA1vH0NEDG58HrT5icx/azi9MF1TWdtttWl0UIUsjEQBBh+SIkrpd21ZjEv7ptxWys1ncsg==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-random": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-random/-/d3-random-3.0.3.tgz",
+      "integrity": "sha512-Imagg1vJ3y76Y2ea0871wpabqp613+8/r0mCLEBfdtqC7xMSfj9idOnmBYyMoULfHePJyxMAw3nWhJxzc+LFwQ==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-scale": {
+      "version": "4.0.9",
+      "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.9.tgz",
+      "integrity": "sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-time": "*"
+      }
+    },
+    "node_modules/@types/d3-scale-chromatic": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@types/d3-scale-chromatic/-/d3-scale-chromatic-3.1.0.tgz",
+      "integrity": "sha512-iWMJgwkK7yTRmWqRB5plb1kadXyQ5Sj8V/zYlFGMUBbIPKQScw+Dku9cAAMgJG+z5GYDoMjWGLVOvjghDEFnKQ==",
+      "license": "MIT"
+    },
    "node_modules/@types/d3-selection": {
      "version": "3.0.11",
      "resolved": "https://registry.npmjs.org/@types/d3-selection/-/d3-selection-3.0.11.tgz",
      "integrity": "sha512-bhAXu23DJWsrI45xafYpkQ4NtcKMwWnAC/vKrd2l+nxMFuvOT3XMYTIj2opv8vq8AO5Yh7Qac/nSeP/3zjTK0w==",
      "license": "MIT"
    },
+    "node_modules/@types/d3-shape": {
+      "version": "3.1.8",
+      "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.8.tgz",
+      "integrity": "sha512-lae0iWfcDeR7qt7rA88BNiqdvPS5pFVPpo5OfjElwNaT2yyekbM0C9vK+yqBqEmHr6lDkRnYNoTBYlAgJa7a4w==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-path": "*"
+      }
+    },
+    "node_modules/@types/d3-time": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.4.tgz",
+      "integrity": "sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-time-format": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-time-format/-/d3-time-format-4.0.3.tgz",
+      "integrity": "sha512-5xg9rC+wWL8kdDj153qZcsJ0FWiFt0J5RB6LYUNZjwSnesfblqrI/bJ1wBdJ8OQfncgbJG5+2F+qfqnqyzYxyg==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-timer": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-3.0.2.tgz",
+      "integrity": "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==",
+      "license": "MIT"
+    },
    "node_modules/@types/d3-transition": {
      "version": "3.0.9",
      "resolved": "https://registry.npmjs.org/@types/d3-transition/-/d3-transition-3.0.9.tgz",
@@ -2704,6 +3179,12 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/@types/geojson": {
+      "version": "7946.0.16",
+      "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.16.tgz",
+      "integrity": "sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg==",
+      "license": "MIT"
+    },
    "node_modules/@types/hast": {
      "version": "3.0.4",
      "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz",
@@ -6976,6 +7457,24 @@
        }
      }
    },
+    "node_modules/reactflow": {
+      "version": "11.11.4",
+      "resolved": "https://registry.npmjs.org/reactflow/-/reactflow-11.11.4.tgz",
+      "integrity": "sha512-70FOtJkUWH3BAOsN+LU9lCrKoKbtOPnz2uq0CV2PLdNSwxTXOhCbsZr50GmZ+Rtw3jx8Uv7/vBFtCGixLfd4Og==",
+      "license": "MIT",
+      "dependencies": {
+        "@reactflow/background": "11.3.14",
+        "@reactflow/controls": "11.2.14",
+        "@reactflow/core": "11.11.4",
+        "@reactflow/minimap": "11.7.14",
+        "@reactflow/node-resizer": "2.2.14",
+        "@reactflow/node-toolbar": "1.3.14"
+      },
+      "peerDependencies": {
+        "react": ">=17",
+        "react-dom": ">=17"
+      }
+    },
    "node_modules/redent": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
    "react": "^19.1.1",
    "react-dom": "^19.1.1",
    "react-router": "^7.9.3",
+    "reactflow": "^11.11.4",
    "zustand": "^5.0.8"
  },
  "devDependencies": {
--- a/src/App.css
+++ b/src/App.css
@@ -161,13 +161,7 @@ input[type="checkbox"] {
 .margin-0 {
  margin: 0;
 }
-.margin-lg {
-  margin: 1rem;
-}

-.padding-0 {
-  padding: 0;
-}
 .padding-sm {
  padding: .25rem;
 }
@@ -177,9 +171,11 @@ input[type="checkbox"] {
 .padding-lg {
  padding: 1rem;
 }
-.padding-h-lg {
-  padding-left: 1rem;
-  padding-right: 1rem;
+.padding-b-sm {
+  padding-bottom: .25rem;
+}
+.padding-b-md {
+  padding-bottom: .5rem;
 }
 .padding-b-lg {
  padding-bottom: 1rem;
@@ -208,27 +204,6 @@ input[type="checkbox"] {
  border: 3px solid canvastext;
 }

-.shadow-sm {
-  box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.25);
-}
-.shadow-md {
-  box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.25);
-}
-.shadow-lg {
-  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.25);
-}
-@media (prefers-color-scheme: dark) {
-  .shadow-sm {
-    box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.5);
-  }
-  .shadow-md {
-    box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.5);
-  }
-  .shadow-lg {
-    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.5);
-  }
-}
-
 .font-small {
  font-size: .75rem;
 }
@@ -245,9 +220,6 @@ input[type="checkbox"] {
  font-weight: bold;
 }

-.relative {
-  position: relative;
-}

 .clickable {
  cursor: pointer;
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -8,7 +8,6 @@ import VisProg from "./pages/VisProgPage/VisProg.tsx";
 import {useState} from "react";
 import Logging from "./components/Logging/Logging.tsx";

-
 function App(){
  const [showLogs, setShowLogs] = useState(false);

@@ -16,7 +15,7 @@ function App(){
    <>
      <header>
        <Link to={"/"}>Home</Link>
-        <button onClick={() => setShowLogs(!showLogs)}>Developer Logs</button>
+        <button onClick={() => setShowLogs(!showLogs)}>Toggle Logging</button>
      </header>
      <div className={"flex-row justify-center flex-1 min-height-0"}>
        <main className={"flex-col align-center flex-1 scroll-y"}>
--- a/src/components/Dialog.tsx
+++ b/src/components/Dialog.tsx
@@ -1,48 +0,0 @@
-import {type ReactNode, type RefObject, useEffect, useRef} from "react";
-
-export default function Dialog({
-  open,
-  close,
-  classname,
-  children,
-}: {
-  open: boolean;
-  close: () => void;
-  classname?: string;
-  children: ReactNode;
-}) {
-  const ref: RefObject<HTMLDialogElement | null> = useRef(null);
-
-  useEffect(() => {
-    if (open) {
-      ref.current?.showModal();
-    } else {
-      ref.current?.close();
-    }
-  }, [open]);
-
-  function handleClickOutside(event: React.MouseEvent) {
-    if (!ref.current) return;
-
-    const dialogDimensions = ref.current.getBoundingClientRect()
-    if (
-      event.clientX < dialogDimensions.left ||
-      event.clientX > dialogDimensions.right ||
-      event.clientY < dialogDimensions.top ||
-      event.clientY > dialogDimensions.bottom
-    ) {
-      close();
-    }
-  }
-
-  return (
-    <dialog
-      ref={ref}
-      onCancel={close}
-      onPointerDown={handleClickOutside}
-      className={classname}
-    >
-      {children}
-    </dialog>
-  );
-}
--- a/src/components/Logging/Definitions.ts
+++ b/src/components/Logging/Definitions.ts
@@ -1,31 +0,0 @@
-import type {Cell} from "../../utils/cellStore.ts";
-import type {LogRecord} from "./useLogs.ts";
-
-/**
- * Zustand store definition for managing user preferences related to logging.
- *
- * Includes flags for toggling relative timestamps and automatic scroll behavior.
- */
-export type LoggingSettings = {
-  /** Whether to display log timestamps as relative (e.g., "2m 15s ago") instead of absolute. */
-  showRelativeTime: boolean;
-  /** Updates the `showRelativeTime` setting. */
-  setShowRelativeTime: (showRelativeTime: boolean) => void;
-};
-
-/**
- * Props for any component that renders a single log message entry.
- *
- * @param recordCell - A reactive `Cell` containing a single `LogRecord`.
- * @param onUpdate - Optional callback triggered when the log entry updates.
- */
-export type MessageComponentProps = {
-  recordCell: Cell<LogRecord>,
-  onUpdate?: () => void,
-};
-
-/**
- * Key used for the experiment filter predicate in the filter map, to exclude experiment logs from the developer logs.
- */
-export const EXPERIMENT_FILTER_KEY = "experiment_filter";
-export const EXPERIMENT_LOGGER_NAME = "experiment";
--- a/src/components/Logging/Filters.tsx
+++ b/src/components/Logging/Filters.tsx
@@ -13,8 +13,9 @@ type Setter<T> = (value: T | ((prev: T) => T)) => void;
 * Mapping of log level names to their corresponding numeric severity.
 * Used for comparison in log filtering predicates.
 */
-const optionMapping: Map<string, number> = new Map([
+const optionMapping = new Map([
  ["ALL", 0],
+  ["LLM", 9],
  ["DEBUG", 10],
  ["INFO", 20],
  ["WARNING", 30],
@@ -92,7 +93,7 @@ function GlobalLevelFilter({
  filterPredicates: Map<string, LogFilterPredicate>;
  setFilterPredicates: Setter<Map<string, LogFilterPredicate>>;
 }) {
-  const selected = filterPredicates.get(GLOBAL_LOG_LEVEL_PREDICATE_KEY)?.value ?? "ALL";
+  const selected = filterPredicates.get(GLOBAL_LOG_LEVEL_PREDICATE_KEY)?.value || "ALL";
  const setSelected = (selected: string | null) => {
    if (!selected || !optionMapping.has(selected)) return;

--- a/src/components/Logging/Logging.module.css
+++ b/src/components/Logging/Logging.module.css
@@ -5,6 +5,7 @@
  flex-shrink: 0;

  box-shadow: 0 0 1rem black;
+  padding: 1rem 1rem 0 1rem;
 }

 .no-numbers {
@@ -14,6 +15,8 @@
 }

 .log-container {
+  margin-bottom: .5rem;
+
  .accented-0, .accented-10 {
    background-color: color-mix(in oklab, canvas, rgb(159, 159, 159) 35%)
  }
@@ -29,7 +32,7 @@
 }

 .floating-button {
-  position: absolute;
+  position: fixed;
  bottom: 1rem;
  right: 1rem;
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.5);
--- a/src/components/Logging/Logging.tsx
+++ b/src/components/Logging/Logging.tsx
@@ -1,23 +1,38 @@
-import {type ComponentType, useEffect, useRef, useState} from "react";
+import {useEffect, useRef, useState} from "react";
+import {create} from "zustand";
+
 import formatDuration from "../../utils/formatDuration.ts";
 import {type LogFilterPredicate, type LogRecord, useLogs} from "./useLogs.ts";
 import Filters from "./Filters.tsx";
 import {type Cell, useCell} from "../../utils/cellStore.ts";
+
 import styles from "./Logging.module.css";
-import {
-  EXPERIMENT_FILTER_KEY,
-  EXPERIMENT_LOGGER_NAME,
-  type LoggingSettings,
-  type MessageComponentProps
-} from "./Definitions.ts";
-import {create} from "zustand";
+

 /**
- * Local Zustand store for logging UI preferences.
+ * Zustand store definition for managing user preferences related to logging.
+ *
+ * Includes flags for toggling relative timestamps and automatic scroll behavior.
+ */
+type LoggingSettings = {
+  /** Whether to display log timestamps as relative (e.g., "2m 15s ago") instead of absolute. */
+  showRelativeTime: boolean;
+  /** Updates the `showRelativeTime` setting. */
+  setShowRelativeTime: (showRelativeTime: boolean) => void;
+  /** Whether the log view should automatically scroll to the newest entry. */
+  scrollToBottom: boolean;
+  /** Updates the `scrollToBottom` setting. */
+  setScrollToBottom: (scrollToBottom: boolean) => void;
+};
+
+/**
+ * Global Zustand store for logging UI preferences.
 */
 const useLoggingSettings = create<LoggingSettings>((set) => ({
  showRelativeTime: false,
  setShowRelativeTime: (showRelativeTime: boolean) => set({ showRelativeTime }),
+  scrollToBottom: true,
+  setScrollToBottom: (scrollToBottom: boolean) => set({ scrollToBottom }),
 }));

 /**
@@ -30,7 +45,13 @@ const useLoggingSettings = create<LoggingSettings>((set) => ({
 * @param onUpdate - Optional callback triggered when the log entry updates.
 * @returns A JSX element displaying a formatted log message.
 */
-function LogMessage({ recordCell, onUpdate }: MessageComponentProps) {
+function LogMessage({
+  recordCell,
+  onUpdate,
+}: {
+  recordCell: Cell<LogRecord>,
+  onUpdate?: () => void,
+}) {
  const { showRelativeTime, setShowRelativeTime } = useLoggingSettings();
  const record = useCell(recordCell);

@@ -48,7 +69,7 @@ function LogMessage({ recordCell, onUpdate }: MessageComponentProps) {
  /** Simplifies the logger name by showing only the last path segment. */
  const normalizedName = record.name.split(".").pop() || record.name;

-  // Notify the parent component (e.g., for scroll updates) when this record changes.
+  // Notify parent component (e.g. for scroll updates) when this record changes.
  useEffect(() => {
    if (onUpdate) onUpdate();
  }, [record, onUpdate]);
@@ -56,10 +77,11 @@ function LogMessage({ recordCell, onUpdate }: MessageComponentProps) {
  return <div className={`${styles.logContainer} round-md border-lg flex-row gap-md`}>
    <div className={`${styles[`accented${normalizedLevelNo}`]} flex-col padding-sm justify-between`}>
      <span className={"mono bold"}>{record.levelname}</span>
-      <span className={"mono clickable font-small"} onClick={() => setShowRelativeTime(!showRelativeTime)}>{
-        showRelativeTime
-          ? formatDuration(record.relativeCreated)
-          : new Date(record.created * 1000).toLocaleTimeString()
+      <span className={"mono clickable font-small"}
+        onClick={() => setShowRelativeTime(!showRelativeTime)}
+      >{showRelativeTime
+        ? formatDuration(record.relativeCreated)
+        : new Date(record.created * 1000).toLocaleTimeString()
      }</span>
    </div>
    <div className={"flex-col flex-1 padding-sm"}>
@@ -78,18 +100,12 @@ function LogMessage({ recordCell, onUpdate }: MessageComponentProps) {
 * - A floating "Scroll to bottom" button when not at the bottom.
 *
 * @param recordCells - Array of reactive log records to display.
- * @param MessageComponent - A component to use to render each log message entry.
 * @returns A scrollable log list component.
 */
-export function LogMessages({
-  recordCells,
-  MessageComponent,
-}: {
-  recordCells: Cell<LogRecord>[],
-  MessageComponent: ComponentType<MessageComponentProps>,
-}) {
+function LogMessages({ recordCells }: { recordCells: Cell<LogRecord>[] }) {
  const scrollableRef = useRef<HTMLDivElement>(null);
-  const [scrollToBottom, setScrollToBottom] = useState(true);
+  const lastElementRef = useRef<HTMLLIElement>(null)
+  const { scrollToBottom, setScrollToBottom } = useLoggingSettings();

  // Disable auto-scroll if the user manually scrolls.
  useEffect(() => {
@@ -108,28 +124,30 @@ export function LogMessages({
  }, [scrollableRef, setScrollToBottom]);

  /**
-   * Scrolls the log messages to the bottom, making the latest messages visible.
+   * Scrolls the last log message into view if auto-scroll is enabled,
+   * or if forced (e.g., user clicks "Scroll to bottom").
   *
   * @param force - If true, forces scrolling even if `scrollToBottom` is false.
   */
-  function showBottom(force = false) {
-    if ((!scrollToBottom && !force) || !scrollableRef.current) return;
-    scrollableRef.current.scrollTo({top: scrollableRef.current.scrollHeight, left: 0, behavior: "smooth"});
+  function scrollLastElementIntoView(force = false) {
+    if ((!scrollToBottom && !force) || !lastElementRef.current) return;
+    lastElementRef.current.scrollIntoView({ behavior: "smooth" });
  }

-  return <div ref={scrollableRef} className={"min-height-0 scroll-y padding-h-lg padding-b-lg flex-1"}>
+  return <div ref={scrollableRef} className={"min-height-0 scroll-y padding-b-md"}>
    <ol className={`${styles.noNumbers} margin-0 flex-col gap-md`}>
      {recordCells.map((recordCell, i) => (
        <li key={`${i}_${recordCell.get().firstRelativeCreated}`}>
-          <MessageComponent recordCell={recordCell} onUpdate={showBottom} />
+          <LogMessage recordCell={recordCell} onUpdate={scrollLastElementIntoView} />
        </li>
      ))}
+      <li ref={lastElementRef}></li>
    </ol>
    {!scrollToBottom && <button
      className={styles.floatingButton}
      onClick={() => {
        setScrollToBottom(true);
-        showBottom(true);
+        scrollLastElementIntoView(true);
      }}
    >
      Scroll to bottom
@@ -146,27 +164,16 @@ export function LogMessages({
 * - Zustand-managed UI settings (auto-scroll, timestamp display).
 *
 * This component uses the `useLogs` hook to fetch and filter logs based on
- * active predicates and re-renders automatically as new logs arrive.
+ * active predicates, and re-renders automatically as new logs arrive.
 *
 * @returns The complete logging UI as a React element.
 */
 export default function Logging() {
-  // By default, filter experiment logs from this debug logger
-  const [filterPredicates, setFilterPredicates] = useState(new Map<string, LogFilterPredicate>([
-    [
-      EXPERIMENT_FILTER_KEY,
-      {
-        predicate: (r) => r.name == EXPERIMENT_LOGGER_NAME ? false : null,
-        priority: 999,
-        value: null,
-      } as LogFilterPredicate,
-    ],
-  ]));
+  const [filterPredicates, setFilterPredicates] = useState(new Map<string, LogFilterPredicate>());
  const { filteredLogs, distinctNames } = useLogs(filterPredicates)
-  distinctNames.delete(EXPERIMENT_LOGGER_NAME);

-  return <div className={`flex-col min-height-0 relative ${styles.loggingContainer}`}>
-    <div className={"flex-row gap-lg justify-between align-center padding-lg"}>
+  return <div className={`flex-col gap-lg min-height-0 ${styles.loggingContainer}`}>
+    <div className={"flex-row gap-lg justify-between align-center"}>
      <h2 className={"margin-0"}>Logs</h2>
      <Filters
        filterPredicates={filterPredicates}
@@ -174,6 +181,6 @@ export default function Logging() {
        agentNames={distinctNames}
      />
    </div>
-    <LogMessages recordCells={filteredLogs} MessageComponent={LogMessage} />
+    <LogMessages recordCells={filteredLogs} />
  </div>;
 }
--- a/src/components/Logging/useLogs.ts
+++ b/src/components/Logging/useLogs.ts
@@ -3,21 +3,6 @@ import {useCallback, useEffect, useRef, useState} from "react";
 import {applyPriorityPredicates, type PriorityFilterPredicate} from "../../utils/priorityFiltering.ts";
 import {cell, type Cell} from "../../utils/cellStore.ts";

-type ExtraLevelName = 'LLM' | 'OBSERVATION' | 'ACTION' | 'CHAT';
-
-export type LevelName = ExtraLevelName | 'DEBUG' | 'INFO' | 'WARNING' | 'ERROR' | 'CRITICAL' | string;
-
-/**
- * Extra fields that are added to log records in the backend but are not part of the standard `LogRecord` type.
- *
- * @property reference - (Optional) A reference identifier linking related log messages.
- * @property role - (Optional) For chat log messages, the role of the agent that generated the message.
- */
-type ExtraLogRecordFields = {
-  reference?: string;
-  role?: string;
-}
-
 /**
 * Represents a single log record emitted by the backend logging system.
 *
@@ -27,19 +12,21 @@ type ExtraLogRecordFields = {
 * @property levelno - The numeric severity value corresponding to `levelname`.
 * @property created - The UNIX timestamp (in seconds) when this record was created.
 * @property relativeCreated - The time (in milliseconds) since the logging system started.
+ * @property reference - (Optional) A reference identifier linking related log messages.
 * @property firstCreated - Timestamp of the first log in this reference group.
 * @property firstRelativeCreated - Relative timestamp of the first log in this reference group.
 */
 export type LogRecord = {
  name: string;
  message: string;
-  levelname: LevelName;
+  levelname: 'LLM' | 'DEBUG' | 'INFO' | 'WARNING' | 'ERROR' | 'CRITICAL' | string;
  levelno: number;
  created: number;
  relativeCreated: number;
+  reference?: string;
  firstCreated: number;
  firstRelativeCreated: number;
-} & ExtraLogRecordFields;
+};

 /**
 * A log filter predicate with priority support, used to determine whether
@@ -50,7 +37,7 @@ export type LogRecord = {
 *
 * @template T - The type of record being filtered (here, `LogRecord`).
 */
-export type LogFilterPredicate = PriorityFilterPredicate<LogRecord> & {
+export type LogFilterPredicate = PriorityFilterPredicate<LogRecord> & { 
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  value: any };

--- a/src/index.css
+++ b/src/index.css
@@ -8,9 +8,6 @@
  background-color: #242424;

  --accent-color: #008080;
-  --panel-shadow:
-      0 1px 2px white,
-      0 8px 24px rgba(190, 186, 186, 0.253);

  font-synthesis: none;
  text-rendering: optimizeLegibility;
@@ -18,14 +15,6 @@
  -moz-osx-font-smoothing: grayscale;
 }

-@media (prefers-color-scheme: dark) {
-  :root {
-    --panel-shadow:
-      0 1px 2px rgba(221, 221, 221, 0.178),
-      0 8px 24px rgba(27, 27, 27, 0.507);
-  }
-}
-
 html, body, #root {
  margin: 0;
  padding: 0;
@@ -52,7 +41,7 @@ button {
  font-size: 1em;
  font-weight: 500;
  font-family: inherit;
-  background-color: canvas;
+  background-color: #1a1a1a;
  cursor: pointer;
  transition: border-color 0.25s;
 }
@@ -75,6 +64,9 @@ button:focus-visible {
    --dropdown-menu-background-color: rgb(247, 247, 247);
    --dropdown-menu-border: rgba(207, 207, 207, 0.986);
  }
+  button {
+    background-color: #f9f9f9;
+  }
 }

@media (prefers-color-scheme: dark) {
--- a/src/pages/MonitoringPage/MonitoringPage.module.css
+++ b/src/pages/MonitoringPage/MonitoringPage.module.css
@@ -1,255 +0,0 @@
-.dashboardContainer {
-  display: grid;
-  grid-template-columns: 2fr 1fr; /* Left = content, Right = logs */
-  grid-template-rows: auto 1fr auto; /* Header, Main, Footer */
-  grid-template-areas:
-    "header logs"
-    "main logs"
-    "footer footer";
-  gap: 1rem;
-  padding: 1rem;
-  background-color: var(--bg-main);
-  color: var(--text-main);
-  font-family: Arial, sans-serif;
-}
-
-/* HEADER */
-.experimentOverview {
-  grid-area: header;
-  display: flex;
-  color: color;
-  justify-content: space-between;
-  align-items: flex-start;
-  background: var(--bg-surface);
-  color: var(--text-main);
-  box-shadow: var(--shadow);
-  padding: 1rem;
-  box-shadow: var(--panel-shadow);
-  position: static; /* ensures it scrolls away */
-}
-
-.phaseProgress {
-  margin-top: 0.5rem;
-}
-
-.phase {
-  display: inline-block;
-  width: 25px;
-  height: 25px;
-  margin: 0 3px;
-  text-align: center;
-  line-height: 25px;
-  background: gray;
-}
-
-.completed {
-  background-color: green;
-  color: white;
-}
-
-.current {
-  background-color: rgb(255, 123, 0);
-  color: white;
-}
-
-.connected {
-  color: green;
-  font-weight: bold;
-}
-
-.disconnected {
-  color: red;
-  font-weight: bold;
-}
-
-.pausePlayInactive{
-  background-color: gray;
-  color: white;
-}
-
-.pausePlayActive{
-  background-color: green;
-  color: white;
-}
-
-.next {
-  background-color: #6c757d;
-  color: white;
-}
-
-.restartPhase{
-  background-color: rgb(255, 123, 0);
-  color: white;
-}
-
-.restartExperiment{
-  background-color: red;
-  color: white;
-}
-
-/* MAIN GRID */
-.phaseOverview {
-  grid-area: main;
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  grid-template-rows: repeat(2, auto);
-  gap: 1rem;
-  background: var(--bg-surface);
-  color: var(--text-main);
-  padding: 1rem;
-  box-shadow: var(--panel-shadow);
-  
-}
-
-.phaseBox {
-  background: var(--bg-surface);
-  border: 1px solid var(--border-color);
-  box-shadow: var(--panel-shadow);
-  padding: 1rem;
-  display: flex;         
-  flex-direction: column;
-  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.05);
-  
-  height: 250px;   
-}
-
-.phaseBox ul {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-  
-  overflow-y: auto;       
-  flex-grow: 1;          
-  
-
-}
-
-.phaseBox ul::-webkit-scrollbar {
-  width: 6px;
-}
-
-.phaseBox ul::-webkit-scrollbar-thumb {
-  background-color: #ccc;
-  border-radius: 10px;
-}
-
-.phaseOverviewText {
-  grid-column: 1 / -1; /* make the title span across both columns */
-  font-size: 1.4rem;
-  font-weight: 600;
-  margin: 0;            /* remove default section margin */
-  padding: 0.25rem 0;   /* smaller internal space */
-}
-
-.phaseOverviewText h3{
-  margin: 0;            /* removes top/bottom whitespace */
-  padding: 0;           /* keeps spacing tight */
-}
-
-.phaseBox h3 {
-  margin-top: 0;
-  border-bottom: 1px solid var(--border-color);
-  padding-bottom: 0.4rem;
-}
-
-.checked::before {
-  content: '✔️ ';
-}
-
-.statusIndicator {
-  display: inline-block;
-  margin-right: 10px;
-  user-select: none; 
-  transition: transform 0.1s ease;
-  font-size: 1.1rem;
-}
-
-.statusIndicator.clickable {
-  cursor: pointer;
-}
-
-.statusIndicator.clickable:hover {
-  transform: scale(1.2);
-}
-
-.clickable {
-  cursor: pointer;
-}
-
-.clickable:hover {
-  transform: scale(1.2);
-}
-
-.active {
-  opacity: 1;
-}
-
-.statusItem {
-  display: flex;
-  align-items: center;
-  margin-bottom: 0.4rem;
-}
-
-.itemDescription {
-  line-height: 1.4;
-}
-
-/* FOOTER */
-.controlsSection {
-  grid-area: footer;
-  display: flex;
-  justify-content: space-between;
-  gap: 1rem;
-  background: var(--bg-surface);
-  color: var(--text-main);
-  box-shadow: var(--panel-shadow);
-  padding: 1rem;
-  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
-}
-
-.controlsSection button {
-  background: var(--bg-surface);
-  box-shadow: var(--panel-shadow);
-  margin-top: 0.5rem;
-  margin-left: 0.5rem;
-}
-
-.gestures,
-.speech,
-.directSpeech {
-  flex: 1;
-}
-
-.speechInput {
-  display: flex;
-  margin-top: 0.5rem;
-}
-
-.speechInput input {
-  flex: 1;
-  padding: 0.5rem;
-  background-color: Canvas;
-  color: CanvasText;
-  border: 1px solid var(--border-color);
-}
-
-.speechInput button {
-  color: white;
-  border: none;
-  padding: 0.5rem 1rem;
-  cursor: pointer;
-  background-color: Canvas;
-  color: CanvasText;
-  border: 1px solid var(--border-color);
-}
-
-/* RESPONSIVE */
-@media (max-width: 900px) {
-  .phaseOverview {
-    grid-template-columns: 1fr;
-  }
-
-  .controlsSection {
-    flex-direction: column;
-  }
-}
--- a/src/pages/MonitoringPage/MonitoringPage.tsx
+++ b/src/pages/MonitoringPage/MonitoringPage.tsx
@@ -1,433 +0,0 @@
-import React, { useCallback, useRef, useState } from 'react';
-import styles from './MonitoringPage.module.css';
-
-// Store & API
-import useProgramStore from "../../utils/programStore";
-import { 
-  nextPhase, 
-  useExperimentLogger, 
-  useStatusLogger, 
-  pauseExperiment, 
-  playExperiment, 
-  type ExperimentStreamData, 
-  type GoalUpdate, 
-  type TriggerUpdate, 
-  type CondNormsStateUpdate, 
-  type PhaseUpdate 
-} from "./MonitoringPageAPI";
-import { graphReducer, runProgramm } from '../VisProgPage/VisProgLogic.ts';
-
-// Types
-import type { NormNodeData } from '../VisProgPage/visualProgrammingUI/nodes/NormNode';
-import type { GoalNode } from '../VisProgPage/visualProgrammingUI/nodes/GoalNode';
-import type { TriggerNode } from '../VisProgPage/visualProgrammingUI/nodes/TriggerNode';
-
-// Sub-components
-import { 
-  GestureControls, 
-  SpeechPresets, 
-  DirectSpeechInput, 
-  StatusList, 
-  RobotConnected 
-} from './MonitoringPageComponents';
-import ExperimentLogs from "./components/ExperimentLogs.tsx";
-
-// ----------------------------------------------------------------------
-// 1. State management
-// ----------------------------------------------------------------------
-
-/**
- * Manages the state of the active experiment, including phase progression,
- * goal tracking, and stream event listeners.
- */
-function useExperimentLogic() {
-  const getPhaseIds = useProgramStore((s) => s.getPhaseIds);
-  const getPhaseNames = useProgramStore((s) => s.getPhaseNames);
-  const getGoalsInPhase = useProgramStore((s) => s.getGoalsInPhase);
-  const setProgramState = useProgramStore((state) => state.setProgramState);
-
-  const [loading, setLoading] = useState(false);
-  const [activeIds, setActiveIds] = useState<Record<string, boolean>>({});
-  const [goalIndex, setGoalIndex] = useState(0);
-  const [isPlaying, setIsPlaying] = useState(false);
-  const [phaseIndex, setPhaseIndex] = useState(0);
-  const [isFinished, setIsFinished] = useState(false);
-
-  // Ref to suppress stream updates during the "Reset Phase" fast-forward sequence
-  const suppressUpdates = useRef(false);
-
-  const phaseIds = getPhaseIds();
-  const phaseNames = getPhaseNames();
-
-  // --- Stream Handlers ---
-
-  const handleStreamUpdate = useCallback((data: ExperimentStreamData) => {
-    if (suppressUpdates.current) return;
-    if (data.type === 'phase_update' && data.id) {
-      const payload = data as PhaseUpdate;
-      console.log(`${data.type} received, id : ${data.id}`);
-
-      if (payload.id === "end") {
-        setIsFinished(true);
-      } else {
-        setIsFinished(false);
-        const newIndex = getPhaseIds().indexOf(payload.id);
-        if (newIndex !== -1) {
-          setPhaseIndex(newIndex);
-          setGoalIndex(0);
-        }
-      }
-    } 
-    else if (data.type === 'goal_update') {
-      const payload = data as GoalUpdate;
-      const currentPhaseGoals = getGoalsInPhase(phaseIds[phaseIndex]) as GoalNode[];
-      const gIndex = currentPhaseGoals.findIndex((g) => g.id === payload.id);
-
-      console.log(`${data.type} received, id : ${data.id}`);
-
-      if (gIndex === -1) {
-        console.warn(`Goal ${payload.id} not found in phase ${phaseNames[phaseIndex]}`);
-      } else {
-        setGoalIndex(gIndex);
-        // Mark all previous goals as achieved
-        setActiveIds((prev) => {
-          const nextState = { ...prev };
-          for (let i = 0; i < gIndex; i++) {
-            nextState[currentPhaseGoals[i].id] = true;
-          }
-          return nextState;
-        });
-      }
-    } 
-    else if (data.type === 'trigger_update') {
-      const payload = data as TriggerUpdate;
-      setActiveIds((prev) => ({ ...prev, [payload.id]: payload.achieved }));
-    }
-  }, [getPhaseIds, getGoalsInPhase, phaseIds, phaseIndex, phaseNames]);
-
-  const handleStatusUpdate = useCallback((data: unknown) => {
-    if (suppressUpdates.current) return;
-    const payload = data as CondNormsStateUpdate;
-    if (payload.type !== 'cond_norms_state_update') return;
-
-    setActiveIds((prev) => {
-      const hasChanges = payload.norms.some((u) => prev[u.id] !== u.active);
-      if (!hasChanges) return prev;
-      
-      const nextState = { ...prev };
-      payload.norms.forEach((u) => { nextState[u.id] = u.active; });
-      return nextState;
-    });
-  }, []);
-
-  // Connect listeners
-  useExperimentLogger(handleStreamUpdate);
-  useStatusLogger(handleStatusUpdate);
-
-  // --- Actions ---
-
-  const resetExperiment = useCallback(async () => {
-    try {
-      setLoading(true);
-      const phases = graphReducer();
-      setProgramState({ phases });
-
-      setActiveIds({});
-      setPhaseIndex(0);
-      setGoalIndex(0);
-      setIsFinished(false);
-
-      await runProgramm();
-      console.log("Experiment & UI successfully reset.");
-    } catch (err) {
-      console.error("Failed to reset program:", err);
-    } finally {
-      setLoading(false);
-    }
-  }, [setProgramState]);
-
-  const handleControlAction = async (action: "pause" | "play" | "nextPhase" | "resetPhase") => {
-    try {
-      setLoading(true);
-      switch (action) {
-        case "pause":
-          setIsPlaying(false);
-          await pauseExperiment();
-          break;
-        case "play":
-          setIsPlaying(true);
-          await playExperiment();
-          break;
-        case "nextPhase":
-          await nextPhase();
-          break;
-        case "resetPhase":
-          //make sure you don't see the phases pass to arrive back at current phase
-          suppressUpdates.current = true;
-
-          const targetIndex = phaseIndex;
-          console.log(`Resetting phase: Restarting and skipping to index ${targetIndex}`);
-          const phases = graphReducer();
-          setProgramState({ phases });
-          
-          setActiveIds({});
-          setPhaseIndex(0); // Visually reset to start
-          setGoalIndex(0);
-          setIsFinished(false);
-          
-          // Restart backend
-          await runProgramm();
-          for (let i = 0; i < targetIndex; i++) {
-            console.log(`Skipping phase ${i}...`);
-            await nextPhase();
-          }
-          suppressUpdates.current = false;
-          setPhaseIndex(targetIndex);
-          setIsPlaying(true); //Maybe you pause and then reset
-          break;
-      }
-    } catch (err) {
-      console.error(err);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  return {
-    loading,
-    isPlaying,
-    isFinished,
-    phaseIds,
-    phaseNames,
-    phaseIndex,
-    goalIndex,
-    activeIds,
-    setActiveIds,
-    resetExperiment,
-    handleControlAction,
-  };
-}
-
-// ----------------------------------------------------------------------
-// 2. Smaller Presentation Components
-// ----------------------------------------------------------------------
-
-/**
- * Visual indicator of progress through experiment phases.
- */
-function PhaseProgressBar({ 
-  phaseIds, 
-  phaseIndex, 
-  isFinished 
-}: { 
-  phaseIds: string[], 
-  phaseIndex: number, 
-  isFinished: boolean 
-}) {
-  return (
-    <div className={styles.phaseProgress}>
-      {phaseIds.map((id, index) => {
-        let statusClass = "";
-        if (isFinished || index < phaseIndex) statusClass = styles.completed;
-        else if (index === phaseIndex) statusClass = styles.current;
-
-        return (
-          <span key={id} className={`${styles.phase} ${statusClass}`}>
-            {index + 1}
-          </span>
-        );
-      })}
-    </div>
-  );
-}
-
-/**
- * Main control buttons (Play, Pause, Next, Reset).
- */
-function ControlPanel({ 
-  loading, 
-  isPlaying, 
-  onAction, 
-  onReset 
-}: { 
-  loading: boolean, 
-  isPlaying: boolean, 
-  onAction: (a: "pause" | "play" | "nextPhase" | "resetPhase") => void, 
-  onReset: () => void 
-}) {
-  return (
-    <div className={styles.experimentControls}>
-      <h3>Experiment Controls</h3>
-      <div className={styles.controlsButtons}>
-        <button
-          className={!isPlaying ? styles.pausePlayActive : styles.pausePlayInactive}
-          onClick={() => onAction("pause")}
-          disabled={loading}
-        >❚❚</button>
-
-        <button
-          className={isPlaying ? styles.pausePlayActive : styles.pausePlayInactive}
-          onClick={() => onAction("play")}
-          disabled={loading}
-        >▶</button>
-
-        <button 
-          className={styles.next} 
-          onClick={() => onAction("nextPhase")} 
-          disabled={loading}
-        >⏭</button>
-
-        <button 
-          className={styles.restartPhase} 
-          onClick={() => onAction("resetPhase")} 
-          disabled={loading}
-        >↩</button>
-
-        <button 
-          className={styles.restartExperiment} 
-          onClick={onReset} 
-          disabled={loading}
-        >⟲</button>
-      </div>
-    </div>
-  );
-}
-
-/**
- * Displays lists of Goals, Triggers, and Norms for the current phase.
- */
-function PhaseDashboard({
-  phaseId,
-  activeIds,
-  setActiveIds,
-  goalIndex
-}: {
-  phaseId: string,
-  activeIds: Record<string, boolean>,
-  setActiveIds: React.Dispatch<React.SetStateAction<Record<string, boolean>>>,
-  goalIndex: number
-}) {
-  const getGoalsWithDepth = useProgramStore((s) => s.getGoalsWithDepth);
-  const getTriggers = useProgramStore((s) => s.getTriggersInPhase);
-  const getNorms = useProgramStore((s) => s.getNormsInPhase);
-
-  // Prepare data view models
-  const goals = getGoalsWithDepth(phaseId).map((g) => ({
-    ...g,
-    id: g.id as string,
-    name: g.name as string,
-    achieved: activeIds[g.id as string] ?? false,
-    level: g.level, // Pass this new property to the UI
-  }));
-
-  const triggers = (getTriggers(phaseId) as TriggerNode[]).map(t => ({
-    ...t,
-    achieved: activeIds[t.id] ?? false,
-  }));
-
-  const norms = (getNorms(phaseId) as NormNodeData[])
-    .filter(n => !n.condition)
-    .map(n => ({ ...n, label: n.norm }));
-
-  const conditionalNorms = (getNorms(phaseId) as (NormNodeData & { id: string })[])
-    .filter(n => !!n.condition)
-    .map(n => ({
-      ...n,
-      achieved: activeIds[n.id] ?? false
-    }));
-
-  return (
-    <>
-      <StatusList title="Goals" items={goals} type="goal" activeIds={activeIds} setActiveIds={setActiveIds} 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} />
-    </>
-  );
-}
-
-// ----------------------------------------------------------------------
-// 3. Main Component
-// ----------------------------------------------------------------------
-
-const MonitoringPage: React.FC = () => {
-  const {
-    loading,
-    isPlaying,
-    isFinished,
-    phaseIds,
-    phaseNames,
-    phaseIndex,
-    goalIndex,
-    activeIds,
-    setActiveIds,
-    resetExperiment,
-    handleControlAction
-  } = useExperimentLogic();
-
-  if (phaseIds.length === 0) {
-    return <p className={styles.empty}>No program loaded.</p>;
-  }
-
-  return (
-    <div className={styles.dashboardContainer}>
-      {/* HEADER */}
-      <header className={styles.experimentOverview}>
-        <div className={styles.phaseName}>
-          <h2>Experiment Overview</h2>
-          <p>
-            {isFinished ? (
-              <strong>Experiment finished</strong>
-            ) : (
-              <><strong>Phase {phaseIndex + 1}:</strong> {phaseNames[phaseIndex]}</>
-            )}
-          </p>
-          <PhaseProgressBar phaseIds={phaseIds} phaseIndex={phaseIndex} isFinished={isFinished} />
-        </div>
-
-        <ControlPanel 
-          loading={loading} 
-          isPlaying={isPlaying} 
-          onAction={handleControlAction} 
-          onReset={resetExperiment} 
-        />
-
-        <div className={styles.connectionStatus}>
-          <RobotConnected />
-        </div>
-      </header>
-
-      {/* MAIN GRID */}
-      <main className={styles.phaseOverview}>
-        <section className={styles.phaseOverviewText}>
-          <h3>Phase Overview</h3>
-        </section>
-        
-        {isFinished ? (
-          <div className={styles.finishedMessage}>
-            <p>All phases have been successfully completed.</p>
-          </div>
-        ) : (
-          <PhaseDashboard 
-            phaseId={phaseIds[phaseIndex]} 
-            activeIds={activeIds} 
-            setActiveIds={setActiveIds} 
-            goalIndex={goalIndex} 
-          />
-        )}
-      </main>
-
-      {/* LOGS */}
-      <ExperimentLogs />
-
-      {/* FOOTER */}
-      <footer className={styles.controlsSection}>
-        <GestureControls />
-        <SpeechPresets />
-        <DirectSpeechInput />
-      </footer>
-    </div>
-  );
-}
-
-export default MonitoringPage;
--- a/src/pages/MonitoringPage/MonitoringPageAPI.ts
+++ b/src/pages/MonitoringPage/MonitoringPageAPI.ts
@@ -1,131 +0,0 @@
-import React, { useEffect } from 'react';
-
-const API_BASE = "http://localhost:8000";
-const API_BASE_BP = API_BASE + "/button_pressed"; //UserInterruptAgent endpoint
-
-/**
- * HELPER: Unified sender function
- */
-export const sendAPICall = async (type: string, context: string, endpoint?: string) => {
-  try {
-    const response = await fetch(`${API_BASE_BP}${endpoint ?? ""}`, {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ type, context }),
-    });
-    if (!response.ok) throw new Error("Backend response error");
-    console.log(`API Call send - Type: ${type}, Context: ${context} ${endpoint ? `, Endpoint: ${endpoint}` : ""}`);
-  } catch (err) {
-    console.error(`Failed to send api call:`, err);
-  }
-};
-
-
-/**
- * Sends an API call to the CB for going to the next phase. 
- * In case we can't go to the next phase, the function will throw an error.
- */
-export async function nextPhase(): Promise<void> {
-  const type = "next_phase"
-  const context = ""
-  sendAPICall(type, context)
-}
-
-
-/**
- * Sends an API call to the CB for going to reset the currect phase 
- * In case we can't go to the next phase, the function will throw an error.
- */
-export async function resetPhase(): Promise<void> {
-  const type = "reset_phase"
-  const context = ""
-  sendAPICall(type, context)
-}
-
-/**
- * Sends an API call to the CB for going to pause experiment
-*/
-export async function pauseExperiment(): Promise<void> {
-  const type = "pause"
-  const context = "true"
-  sendAPICall(type, context)
-}
-
-/**
- * Sends an API call to the CB for going to resume experiment
-*/
-export async function playExperiment(): Promise<void> {
-  const type = "pause"
-  const context = "false"
-  sendAPICall(type, context)
-}
-
-
-/**
- * Types for the experiment stream messages
- */
-export type PhaseUpdate = { type: 'phase_update'; id: string };
-export type GoalUpdate = { type: 'goal_update'; id: string };
-export type TriggerUpdate = { type: 'trigger_update'; id: string; achieved: boolean };
-export type CondNormsStateUpdate = { type: 'cond_norms_state_update'; norms: { id: string; active: boolean }[] };
-export type ExperimentStreamData = PhaseUpdate | GoalUpdate | TriggerUpdate | CondNormsStateUpdate | Record<string, unknown>;
-
-/**
- * A hook that listens to the experiment stream that updates current state of the program
- * 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;
-        //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: ExperimentStreamData)  => 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();
-  }, []);
-}
--- a/src/pages/MonitoringPage/MonitoringPageComponents.tsx
+++ b/src/pages/MonitoringPage/MonitoringPageComponents.tsx
@@ -1,232 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import styles from './MonitoringPage.module.css';
-import { sendAPICall } from './MonitoringPageAPI';
-
-// --- GESTURE COMPONENT ---
-export const GestureControls: React.FC = () => {
-  const [selectedGesture, setSelectedGesture] = useState("animations/Stand/BodyTalk/Speaking/BodyTalk_1");
-
-  const gestures = [
-    { label: "Wave", value: "animations/Stand/Gestures/Hey_1" }, 
-    { label: "Think", value: "animations/Stand/Emotions/Neutral/Puzzled_1" }, 
-    { label: "Explain", value: "animations/Stand/Gestures/Explain_4" }, 
-    { label: "You", value: "animations/Stand/Gestures/You_1" }, 
-    { label: "Happy", value: "animations/Stand/Emotions/Positive/Happy_1" }, 
-    { label: "Laugh", value: "animations/Stand/Emotions/Positive/Laugh_2" }, 
-    { label: "Lonely", value: "animations/Stand/Emotions/Neutral/Lonely_1" }, 
-    { label: "Suprise", value: "animations/Stand/Emotions/Negative/Surprise_1" }, 
-    { label: "Hurt", value: "animations/Stand/Emotions/Negative/Hurt_2" }, 
-    { label: "Angry", value: "animations/Stand/Emotions/Negative/Angry_4" },
-  ];
-  return (
-    <div className={styles.gestures}>
-      <h4>Gestures</h4>
-      <div className={styles.gestureInputGroup}>
-        <select 
-          value={selectedGesture} 
-          onChange={(e) => setSelectedGesture(e.target.value)}
-        >
-          {gestures.map(g => <option key={g.value} value={g.value}>{g.label}</option>)}
-        </select>
-        <button onClick={() => sendAPICall("gesture", selectedGesture)}>
-          Actuate
-        </button>
-      </div>
-    </div>
-  );
-};
-
-// --- PRESET SPEECH COMPONENT ---
-export const SpeechPresets: React.FC = () => {
-  const phrases = [
-    { label: "Hello, I'm Pepper", text: "Hello, I'm Pepper" },
-    { label: "Repeat please", text: "Could you repeat that please" },
-    { label: "About yourself", text: "Tell me something about yourself" },
-  ];
-
-  return (
-    <div className={styles.speech}>
-      <h4>Speech Presets</h4>
-      <ul>
-        {phrases.map((phrase, i) => (
-          <li key={i}>
-            <button 
-              className={styles.speechBtn} 
-              onClick={() =>  sendAPICall("speech", phrase.text)}
-            >
-              "{phrase.label}"
-            </button>
-          </li>
-        ))}
-      </ul>
-    </div>
-  );
-};
-
-// --- DIRECT SPEECH (INPUT) COMPONENT ---
-export const DirectSpeechInput: React.FC = () => {
-  const [text, setText] = useState("");
-
-  const handleSend = () => {
-    if (!text.trim()) return;
-    sendAPICall("speech", text);
-    setText(""); // Clear after sending
-  };
-
-  return (
-    <div className={styles.directSpeech}>
-      <h4>Direct Pepper Speech</h4>
-      <div className={styles.speechInput}>
-        <input 
-          type="text" 
-          value={text}
-          onChange={(e) => setText(e.target.value)}
-          placeholder="Type message..." 
-          onKeyDown={(e) => e.key === 'Enter' && handleSend()}
-        />
-        <button onClick={handleSend}>Send</button>
-      </div>
-    </div>
-  );
-};
-
-// --- interface for goals/triggers/norms/conditional norms ---
-export type StatusItem = {
-  id?: string | number;
-  achieved?: boolean;
-  description?: string;
-  label?: string;
-  norm?: string;
-  name?: string;
-  level?: number;
-};
-
-interface StatusListProps {
-  title: string;
-  items: StatusItem[];
-  type: 'goal' | 'trigger' | 'norm'| 'cond_norm';
-  activeIds: Record<string, boolean>;
-  setActiveIds?: React.Dispatch<React.SetStateAction<Record<string, boolean>>>; 
-  currentGoalIndex?: number;
-}
-
-// --- STATUS LIST COMPONENT ---
-export const StatusList: React.FC<StatusListProps> = ({ 
-  title, 
-  items, 
-  type, 
-  activeIds, 
-  setActiveIds,
-  currentGoalIndex // Destructure this prop
-}) => {
-  return (
-    <section className={styles.phaseBox}>
-      <h3>{title}</h3>
-      <ul>
-        {items.map((item, idx) => {
-          if (item.id === undefined) return null;
-          const isActive = !!activeIds[item.id];
-          const showIndicator = type !== 'norm';
-          const isCurrentGoal = type === 'goal' && idx === currentGoalIndex;
-          const canOverride =  (showIndicator && !isActive) || (type === 'cond_norm' && isActive); 
-
-         const indentation = (item.level || 0) * 20;
-
-          const handleOverrideClick = () => {
-            if (!canOverride) return;
-            if (type === 'cond_norm' && isActive){  
-              {/* Unachieve conditional norm */}
-              sendAPICall("override_unachieve", String(item.id));
-            }
-            else {
-              if(type === 'goal')
-                if(setActiveIds)
-                {setActiveIds(prev => ({ ...prev, [String(item.id)]: true }));}
-            
-              sendAPICall("override", String(item.id));
-            }
-          };
-
-          return (
-            <li key={item.id ?? idx} 
-            className={styles.statusItem}
-            style={{ paddingLeft: `${indentation}px` }}
-            >
-              {showIndicator && (
-                <span 
-                  className={`${styles.statusIndicator} ${isActive ? styles.active : styles.inactive} ${canOverride ? styles.clickable : ''}`}
-                  onClick={handleOverrideClick}
-                >
-                  {isActive ? "✔️" : "❌"}
-                </span>
-              )}
-              <span 
-                className={styles.itemDescription}
-                style={{ 
-                  // Visual Feedback
-                  textDecoration: isCurrentGoal ? 'underline' : 'none',
-                  fontWeight: isCurrentGoal ? 'bold' : 'normal',
-                  color: isCurrentGoal ? '#007bff' : 'inherit',
-                  backgroundColor: isCurrentGoal ? '#e7f3ff' : 'transparent', // Added subtle highlight
-                  padding: isCurrentGoal ? '2px 4px' : '0',
-                  borderRadius: '4px'
-                }}
-              >
-                {item.name || item.norm}
-                {isCurrentGoal && " (Current)"} 
-              </span>
-            </li>
-          );
-        })}
-      </ul>
-    </section>
-  );
-};
-
-
-// --- Robot Connected --- 
-export const RobotConnected = () => {
-
-  /**
-     * The current connection state:
-     * - `true`: Robot is connected.
-     * - `false`: Robot is not connected.
-     * - `null`: Connection status is unknown (initial check in progress).
-     */
-    const [connected, setConnected] = useState<boolean | null>(null);
-  
-    useEffect(() => {
-      // Open a Server-Sent Events (SSE) connection to receive live ping updates.
-      // We're expecting a stream of data like that looks like this: `data = False` or `data = True`
-      const eventSource = new EventSource("http://localhost:8000/robot/ping_stream");
-      eventSource.onmessage = (event) => {
-      
-        // Expecting messages in JSON format: `true` or `false`
-        //commented out this log as it clutters console logs, but might be useful to debug
-        //console.log("received message:", event.data);
-        try {
-          const data = JSON.parse(event.data);
-  
-          try {
-            setConnected(data)
-          }
-          catch {
-            console.log("couldnt extract connected from incoming ping data")
-          }
-  
-        } catch {
-          console.log("Ping message not in correct format:", event.data);
-        }
-      };
-  
-      // Clean up the SSE connection when the component unmounts.
-      return () => eventSource.close();
-    }, []);
-
-  return  (
-  <div>
-    <h3>Connection:</h3>
-    <p className={connected ? styles.connected : styles.disconnected }>{connected ? "● Robot is connected" : "● Robot is disconnected"}</p>
-  </div>
-  )
-}
--- a/src/pages/MonitoringPage/components/ExperimentLogs.module.css
+++ b/src/pages/MonitoringPage/components/ExperimentLogs.module.css
@@ -1,34 +0,0 @@
-.logs {
-  /* grid-area used in MonitoringPage.module.css */
-  grid-area: logs;
-  box-shadow: var(--panel-shadow);
-
-  height: 900px;
-  width: 450px;
-
-  .live {
-    width: .5rem;
-    height: .5rem;
-    left: .5rem;
-    background: red;
-    border-radius: 50%;
-  }
-}
-
-.chat-message.alternate {
-  align-items: end;
-  text-align: end;
-
-  background-color: color-mix(in oklab, canvas, 75% #86c4fa);
-
-  .message-head {
-    flex-direction: row-reverse;
-  }
-}
-
-.download-list {
-  box-sizing: border-box;
-  list-style: none;
-  height: 50dvh;
-  min-width: 300px;
-}
--- a/src/pages/MonitoringPage/components/ExperimentLogs.tsx
+++ b/src/pages/MonitoringPage/components/ExperimentLogs.tsx
@@ -1,186 +0,0 @@
-import styles from "./ExperimentLogs.module.css";
-import {LogMessages} from "../../../components/Logging/Logging.tsx";
-import {useEffect, useMemo, useState} from "react";
-import {type LogFilterPredicate, type LogRecord, useLogs} from "../../../components/Logging/useLogs.ts";
-import capitalize from "../../../utils/capitalize.ts";
-import {useCell} from "../../../utils/cellStore.ts";
-import {
-  EXPERIMENT_FILTER_KEY,
-  EXPERIMENT_LOGGER_NAME,
-  type LoggingSettings,
-  type MessageComponentProps,
-} from "../../../components/Logging/Definitions.ts";
-import formatDuration from "../../../utils/formatDuration.ts";
-import {create} from "zustand";
-import Dialog from "../../../components/Dialog.tsx";
-import delayedResolve from "../../../utils/delayedResolve.ts";
-
-/**
- * Local Zustand store for logging UI preferences.
- */
-const useLoggingSettings = create<LoggingSettings>((set) => ({
-  showRelativeTime: false,
-  setShowRelativeTime: (showRelativeTime: boolean) => set({ showRelativeTime }),
-}));
-
-/**
- * A dedicated component for rendering chat messages.
- *
- * @param record The chat record to render.
- */
-function ChatMessage({ record }: { record: LogRecord }) {
-  const { showRelativeTime, setShowRelativeTime } = useLoggingSettings();
-
-  const reverse = record.role === "user" ? styles.alternate : "";
-
-  return <div className={`${styles.chatMessage} ${reverse} flex-col padding-md padding-h-lg shadow-md round-md`}>
-    <div className={`${styles.messageHead} flex-row gap-md align-center`}>
-      <span className={"bold"}>{capitalize(record.role ?? "unknown")}</span>
-      <span className={"font-small"}>•</span>
-      <span className={"mono clickable font-small"} onClick={() => setShowRelativeTime(!showRelativeTime)}>{
-        showRelativeTime
-          ? formatDuration(record.relativeCreated)
-          : new Date(record.created * 1000).toLocaleTimeString()
-      }</span>
-    </div>
-    <span>{record.message}</span>
-  </div>
-}
-
-/**
- * A generic log message component showing the log level, time, and message text.
- *
- * @param record The log record to render.
- */
-function DefaultMessage({ record }: { record: LogRecord }) {
-  const { showRelativeTime, setShowRelativeTime } = useLoggingSettings();
-
-  return <div>
-    <div className={"flex-row gap-md align-center"}>
-      <span className={"font-small"}>{record.levelname}</span>
-      <span className={"font-small"}>•</span>
-      <span className={"mono clickable font-small"} onClick={() => setShowRelativeTime(!showRelativeTime)}>{
-        showRelativeTime
-          ? formatDuration(record.relativeCreated)
-          : new Date(record.created * 1000).toLocaleTimeString()
-      }</span>
-    </div>
-    <span>{record.message}</span>
-  </div>;
-}
-
-/**
- * A custom component for rendering experiment messages, which might include chat messages.
- *
- * @param recordCell The cell containing the log record to render.
- * @param onUpdate A callback to notify the parent component when the record changes.
- */
-function ExperimentMessage({recordCell, onUpdate}: MessageComponentProps) {
-  const record = useCell(recordCell);
-
-  // Notify the parent component (e.g., for scroll updates) when this record changes.
-  useEffect(() => {
-    if (onUpdate) onUpdate();
-  }, [record, onUpdate]);
-
-  if (record.levelname == "CHAT") {
-    return <ChatMessage record={record} />
-  } else {
-    return <DefaultMessage record={record} />
-  }
-}
-
-/**
- * A download dialog listing experiment logs to download.
- *
- * @param filenames The list of available experiment logs to download.
- * @param refresh A callback to refresh the list of available experiment logs.
- */
-function DownloadScreen({filenames, refresh}: {filenames: string[] | null, refresh: () => void}) {
-  const list = (() => {
-    if (filenames == null) return <div className={`${styles.downloadList} flex-col align-center justify-center`}>
-      <p>Loading...</p>
-    </div>;
-    if (filenames.length === 0) return <div className={`${styles.downloadList} flex-col align-center justify-center`}>
-      <p>No files available.</p>
-    </div>
-
-    return <ol className={`${styles.downloadList} margin-0 padding-h-lg scroll-y`}>
-      {filenames!.map((filename) => (
-        <li><a key={filename} href={`http://localhost:8000/api/logs/files/${filename}`} download={filename}>{filename}</a></li>
-      ))}
-    </ol>;
-  })();
-
-  return <div className={"flex-col"}>
-    <p className={"margin-lg"}>Select a file to download:</p>
-    {list}
-    <button onClick={refresh} className={"margin-lg shadow-sm"}>Refresh</button>
-  </div>;
-}
-
-/**
- * A button that opens a download dialog for experiment logs when pressed.
- */
-function DownloadButton() {
-  const [showModal, setShowModal] = useState(false);
-  const [filenames, setFilenames] = useState<string[] | null>(null);
-
-  async function getFiles(): Promise<string[]> {
-    const response = await fetch("http://localhost:8000/api/logs/files");
-    const files = await response.json();
-    files.sort();
-    return files;
-  }
-
-  useEffect(() => {
-    getFiles().then(setFilenames);
-  }, [showModal]);
-
-  return <>
-    <button className={"shadow-sm"} onClick={() => setShowModal((curr) => !curr)}>Download...</button>
-    <Dialog open={showModal} close={() => setShowModal(false)} classname={"padding-0 round-lg"}>
-      <DownloadScreen filenames={filenames} refresh={async () => {
-        setFilenames(null);
-        const files = await delayedResolve(getFiles(), 250);
-        setFilenames(files);
-      }} />
-    </Dialog>
-  </>;
-}
-
-/**
- * A component for rendering experiment logs. This component uses the `useLogs` hook with a filter to show only
- * experiment logs.
- */
-export default function ExperimentLogs() {
-  // Show only experiment logs in this logger
-  const filters = useMemo(() => new Map<string, LogFilterPredicate>([
-    [
-      EXPERIMENT_FILTER_KEY,
-      {
-        predicate: (r) => r.name == EXPERIMENT_LOGGER_NAME,
-        priority: 999,
-        value: null,
-      } as LogFilterPredicate,
-    ],
-  ]), []);
-
-  const { filteredLogs } = useLogs(filters);
-
-  return <aside className={`${styles.logs} flex-col relative`}>
-    <div className={`${styles.head} padding-lg`}>
-      <div className={"flex-row align-center justify-between"}>
-        <h3>Logs</h3>
-        <div className={"flex-row gap-md align-center"}>
-          <div className={`flex-row align-center gap-md relative padding-md shadow-sm round-md`}>
-            <div className={styles.live}></div>
-            <span>Live</span>
-          </div>
-          <DownloadButton />
-        </div>
-      </div>
-    </div>
-    <LogMessages recordCells={filteredLogs} MessageComponent={ExperimentMessage} />
-  </aside>;
-}
--- a/src/pages/SimpleProgram/SimpleProgram.module.css
+++ b/src/pages/SimpleProgram/SimpleProgram.module.css
@@ -1,167 +0,0 @@
-/* ---------- Layout ---------- */
-
-.container {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  background: #1e1e1e;
-  color: #f5f5f5;
-}
-
-.header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: clamp(0.75rem, 2vw, 1.25rem);
-  background: #2a2a2a;
-  border-bottom: 1px solid #3a3a3a;
-}
-
-.header h2 {
-  font-size: clamp(1rem, 2.2vw, 1.4rem);
-  font-weight: 600;
-}
-
-.controls button {
-  margin-left: 0.5rem;
-  padding: 0.4rem 0.9rem;
-  border-radius: 6px;
-  border: none;
-  background: #111;
-  color: white;
-  cursor: pointer;
-}
-
-.controls button:disabled {
-  opacity: 0.4;
-  cursor: not-allowed;
-}
-
-/* ---------- Content ---------- */
-
-.content {
-  flex: 1;
-  padding: 2%;
-}
-
-/* ---------- Grid ---------- */
-
-.phaseGrid {
-  height: 100%;
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  grid-template-rows: repeat(2, minmax(0, 1fr));
-  gap: 2%;
-}
-
-/* ---------- Box ---------- */
-
-.box {
-  display: flex;
-  flex-direction: column;
-  background: #ffffff;
-  color: #1e1e1e;
-  border-radius: 10px;
-  overflow: hidden;
-  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
-}
-
-.boxHeader {
-  padding: 0.6rem 0.9rem;
-  background: linear-gradient(135deg, #dcdcdc, #e9e9e9);
-  font-style: italic;
-  font-weight: 500;
-  font-size: clamp(0.9rem, 1.5vw, 1.05rem);
-  border-bottom: 1px solid #cfcfcf;
-}
-
-.boxContent {
-  flex: 1;
-  padding: 0.8rem 1rem;
-  overflow-y: auto;
-}
-
-/* ---------- Lists ---------- */
-
-.iconList {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-
-.iconList li {
-  display: flex;
-  align-items: center;
-  gap: 0.6rem;
-  margin-bottom: 0.5rem;
-  font-size: clamp(0.85rem, 1.3vw, 1rem);
-}
-
-.bulletList {
-  margin: 0;
-  padding-left: 1.2rem;
-}
-
-.bulletList li {
-  margin-bottom: 0.4rem;
-}
-
-/* ---------- Icons ---------- */
-
-.successIcon,
-.failIcon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 1.5rem;
-  height: 1.5rem;
-  border-radius: 4px;
-  font-weight: bold;
-  color: white;
-  flex-shrink: 0;
-}
-
-.successIcon {
-  background: #3cb371;
-}
-
-.failIcon {
-  background: #e5533d;
-}
-
-/* ---------- Empty ---------- */
-
-.empty {
-  opacity: 0.55;
-  font-style: italic;
-  font-size: 0.9rem;
-}
-
-/* ---------- Responsive ---------- */
-
-@media (max-width: 900px) {
-  .phaseGrid {
-    grid-template-columns: 1fr;
-    grid-template-rows: repeat(4, minmax(0, 1fr));
-    gap: 1rem;
-  }
-}
-
-.leftControls {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-}
-
-.backButton {
-  background: transparent;
-  border: 1px solid #555;
-  color: #ddd;
-  padding: 0.35rem 0.75rem;
-  border-radius: 6px;
-  cursor: pointer;
-}
-
-.backButton:hover {
-  background: #333;
-}
--- a/src/pages/SimpleProgram/SimpleProgram.tsx
+++ b/src/pages/SimpleProgram/SimpleProgram.tsx
@@ -1,192 +0,0 @@
-import React from "react";
-import styles from "./SimpleProgram.module.css";
-import useProgramStore from "../../utils/programStore.ts";
-
-/**
- * Generic container box with a header and content area.
- */
-type BoxProps = {
-  title: string;
-  children: React.ReactNode;
-};
-
-const Box: React.FC<BoxProps> = ({ title, children }) => (
-  <div className={styles.box}>
-    <div className={styles.boxHeader}>{title}</div>
-    <div className={styles.boxContent}>{children}</div>
-  </div>
-);
-
-/**
- * Renders a list of goals for a phase.
- * Expects goal-like objects from the program store.
- */
-const GoalList: React.FC<{ goals: unknown[] }> = ({ goals }) => {
-  if (!goals.length) {
-    return <p className={styles.empty}>No goals defined.</p>;
-  }
-
-  return (
-    <ul className={styles.iconList}>
-      {goals.map((g, idx) => {
-        const goal = g as {
-          id?: string;
-          description?: string;
-          achieved?: boolean;
-        };
-
-        return (
-          <li key={goal.id ?? idx}>
-            <span
-              className={
-                goal.achieved ? styles.successIcon : styles.failIcon
-              }
-            >
-              {goal.achieved ? "✔" : "✖"}
-            </span>
-            {goal.description ?? "Unnamed goal"}
-          </li>
-        );
-      })}
-    </ul>
-  );
-};
-
-/**
- * Renders a list of triggers for a phase.
- */
-const TriggerList: React.FC<{ triggers: unknown[] }> = ({ triggers }) => {
-  if (!triggers.length) {
-    return <p className={styles.empty}>No triggers defined.</p>;
-  }
-
-  return (
-    <ul className={styles.iconList}>
-      {triggers.map((t, idx) => {
-        const trigger = t as {
-          id?: string;
-          label?: string;
-        };
-
-        return (
-          <li key={trigger.id ?? idx}>
-            <span className={styles.failIcon}>✖</span>
-            {trigger.label ?? "Unnamed trigger"}
-          </li>
-        );
-      })}
-    </ul>
-  );
-};
-
-/**
- * Renders a list of norms for a phase.
- */
-const NormList: React.FC<{ norms: unknown[] }> = ({ norms }) => {
-  if (!norms.length) {
-    return <p className={styles.empty}>No norms defined.</p>;
-  }
-
-  return (
-    <ul className={styles.bulletList}>
-      {norms.map((n, idx) => {
-        const norm = n as {
-          id?: string;
-          norm?: string;
-        };
-
-        return <li key={norm.id ?? idx}>{norm.norm ?? "Unnamed norm"}</li>;
-      })}
-    </ul>
-  );
-};
-
-/**
- * Displays all phase-related information in a grid layout.
- */
-type PhaseGridProps = {
-  norms: unknown[];
-  goals: unknown[];
-  triggers: unknown[];
-};
-
-const PhaseGrid: React.FC<PhaseGridProps> = ({
-  norms,
-  goals,
-  triggers,
-}) => (
-  <div className={styles.phaseGrid}>
-    <Box title="Norms">
-      <NormList norms={norms} />
-    </Box>
-
-    <Box title="Triggers">
-      <TriggerList triggers={triggers} />
-    </Box>
-
-    <Box title="Goals">
-      <GoalList goals={goals} />
-    </Box>
-
-    <Box title="Conditional Norms">
-      <p className={styles.empty}>No conditional norms defined.</p>
-    </Box>
-  </div>
-);
-
-/**
- * Main program viewer.
- * Reads all data from the program store and allows
- * navigating between phases.
- */
-const SimpleProgram: 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];
-
-  return (
-    <div className={styles.container}>
-      <header className={styles.header}>
-        <h2>
-          Phase {phaseIndex + 1} / {phaseIds.length}
-        </h2>
-
-        <div className={styles.controls}>
-          <button
-            disabled={phaseIndex === 0}
-            onClick={() => setPhaseIndex((i) => i - 1)}
-          >
-            ◀ Prev
-          </button>
-
-          <button
-            disabled={phaseIndex === phaseIds.length - 1}
-            onClick={() => setPhaseIndex((i) => i + 1)}
-          >
-            Next ▶
-          </button>
-        </div>
-      </header>
-
-      <div className={styles.content}>
-        <PhaseGrid
-          norms={getNormsInPhase(phaseId)}
-          goals={getGoalsInPhase(phaseId)}
-          triggers={getTriggersInPhase(phaseId)}
-        />
-      </div>
-    </div>
-  );
-};
-
-export default SimpleProgram;
--- a/src/pages/VisProgPage/VisProg.module.css
+++ b/src/pages/VisProgPage/VisProg.module.css
@@ -183,18 +183,6 @@
  left: 60% !important;
 }

-.planNoIterate {
-  opacity: 0.5;
-  font-style: italic;
-  text-decoration: line-through;
-}
-.backButton {
-  background: var(--bg-surface);
-  box-shadow: var(--panel-shadow);
-  margin-top: 0.5rem;
-  margin-left: 0.5rem;
-}
-
 .node-toolbar-tooltip {
    background-color: darkgray;
    color: white;
--- a/src/pages/VisProgPage/VisProg.tsx
+++ b/src/pages/VisProgPage/VisProg.tsx
@@ -7,20 +7,19 @@ import {
  MarkerType, getOutgoers
 } from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
+import {graphReducer, runProgram} from "./VisProgLogic.tsx";
+import warningStyles from './visualProgrammingUI/components/WarningSidebar.module.css'
 import {type CSSProperties, useEffect, useState} from "react";
 import {useShallow} from 'zustand/react/shallow';
 import useProgramStore from "../../utils/programStore.ts";
 import {DndToolbar} from './visualProgrammingUI/components/DragDropSidebar.tsx';
 import {type EditorWarning, globalWarning} from "./visualProgrammingUI/components/EditorWarnings.tsx";
 import {WarningsSidebar} from "./visualProgrammingUI/components/WarningSidebar.tsx";
-import type {PhaseNode} from "./visualProgrammingUI/nodes/PhaseNode.tsx";
 import useFlowStore from './visualProgrammingUI/VisProgStores.tsx';
 import type {FlowState} from './visualProgrammingUI/VisProgTypes.tsx';
 import styles from './VisProg.module.css'
-import {NodeTypes} from './visualProgrammingUI/NodeRegistry.ts';
+import { NodeTypes } from './visualProgrammingUI/NodeRegistry.ts';
 import SaveLoadPanel from './visualProgrammingUI/components/SaveLoadPanel.tsx';
-import MonitoringPage from '../MonitoringPage/MonitoringPage.tsx';
-import { graphReducer, runProgramm } from './VisProgLogic.ts';

 // --| config starting params for flow |--

@@ -45,6 +44,7 @@ const selector = (state: FlowState) => ({
  nodes: state.nodes,
  edges: state.edges,
  onNodesChange: state.onNodesChange,
+  onNodesDelete: state.onNodesDelete,
  onEdgesDelete: state.onEdgesDelete,
  onEdgesChange: state.onEdgesChange,
  onConnect: state.onConnect,
@@ -70,6 +70,7 @@ const VisProgUI = () => {
  const {
    nodes, edges,
    onNodesChange,
+    onNodesDelete,
    onEdgesDelete,
    onEdgesChange,
    onConnect,
@@ -94,7 +95,7 @@ const VisProgUI = () => {
  });
  const {unregisterWarning, registerWarning} = useFlowStore();
  useEffect(() => {
-    
+
    if (checkPhaseChain()) {
      unregisterWarning(globalWarning,'INCOMPLETE_PROGRAM');
    } else {
@@ -113,8 +114,6 @@ const VisProgUI = () => {
    }
  },[edges, registerWarning, unregisterWarning])

-
-
  return (
    <div className={`${styles.innerEditorContainer} round-lg border-lg flex-row`} style={({'--flow-zoom': zoom} as CSSProperties)}>
      <ReactFlow
@@ -123,6 +122,7 @@ const VisProgUI = () => {
        defaultEdgeOptions={DEFAULT_EDGE_OPTIONS}
        nodeTypes={NodeTypes}
        onNodesChange={onNodesChange}
+        onNodesDelete={onNodesDelete}
        onEdgesDelete={onEdgesDelete}
        onEdgesChange={onEdgesChange}
        onReconnect={onReconnect}
@@ -133,6 +133,7 @@ const VisProgUI = () => {
        onNodeDragStop={endBatchAction}
        preventScrolling={scrollable}
        onMove={(_, viewport) => setZoom(viewport.zoom)}
+        reconnectRadius={15}
        snapToGrid
        fitView
        proOptions={{hideAttribution: true}}
@@ -145,14 +146,16 @@ const VisProgUI = () => {
            <SaveLoadPanel></SaveLoadPanel>
          </Panel>
        <Panel position="bottom-center">
-          <button onClick={() => undo()}>undo</button>
-
+          <button onClick={() => undo()}>Undo</button>
          <button onClick={() => redo()}>Redo</button>
        </Panel>
+        <Panel position="center-right" className={warningStyles.warningsSidebar}>
+          <WarningsSidebar/>
+        </Panel>
        <Controls/>
        <Background/>
      </ReactFlow>
-      <WarningsSidebar/>
+
    </div>
  );
 };
@@ -184,54 +187,41 @@ const checkPhaseChain = (): boolean => {

    const next = outgoingPhases.map(node => checkForCompleteChain(node.id))
      .find(result => result);
-    console.log(next);
    return !!next;
  }

  return checkForCompleteChain('start');
 };

-
 /**
 * houses the entire page, so also UI elements
 * that are not a part of the Visual Programming UI
 * @constructor
 */
 function VisProgPage() {
-  const [showSimpleProgram, setShowSimpleProgram] = useState(false);
-  const setProgramState = useProgramStore((state) => state.setProgramState);
-
-  const runProgram = () => {
-    const phases = graphReducer();       // reduce graph
-    setProgramState({ phases });          // <-- save to store
-    setShowSimpleProgram(true);          // show SimpleProgram
-    runProgramm();                        // send to backend if needed
-  };
-
-  if (showSimpleProgram) {
-    return (
-    <div>
-      <button className={styles.backButton} onClick={() => setShowSimpleProgram(false)}>
-        Back to Editor ◀ 
-      </button>
-      <MonitoringPage/>
-    </div>
-    );
-  }
-
  const [programValidity, setProgramValidity] = useState<boolean>(true);
  const {isProgramValid, severityIndex} = useFlowStore();

+  const validity = () => {return isProgramValid();}
+
  useEffect(() => {
-    setProgramValidity(isProgramValid);
+    setProgramValidity(validity);
    // the following eslint disable is required as it wants us to use all possible dependencies for the useEffect statement,
    // however this would cause unneeded updates
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [severityIndex]);
+
+  const setProgramState = useProgramStore((state) => state.setProgramState);
+
+  const processProgram = () => {
+    const phases = graphReducer();       // reduce graph
+    setProgramState({ phases });          // <-- save to store
+    runProgram();                        // send to backend if needed
+  };
  return (
    <>
      <VisualProgrammingUI/>
-      <button onClick={runProgram} disabled={!programValidity}>run program</button>
+      <button onClick={processProgram} disabled={!programValidity}>Run Program</button>
    </>
  )
 }
--- a/src/pages/VisProgPage/VisProgLogic.tsx
+++ b/src/pages/VisProgPage/VisProgLogic.tsx
@@ -6,21 +6,21 @@ import type { PhaseNode } from "./visualProgrammingUI/nodes/PhaseNode";

 /**
 * Reduces the graph into its phases' information and recursively calls their reducing function
- */ 
+ */
 export function graphReducer() {
  const { nodes } = useFlowStore.getState();
  return orderPhaseNodeArray(nodes.filter((n) => n.type == 'phase') as PhaseNode [])
    .map((n) => {
      const reducer = NodeReduces['phase'];
      return reducer(n, nodes)
-    }); 
+    });
 }


 /**
 * Outputs the prepared program to the console and sends it to the backend
 */
-export function runProgramm() {
+export function runProgram() {
  const phases = graphReducer();
  const program = {phases}
  console.log(JSON.stringify(program, null, 2));
--- a/src/pages/VisProgPage/visualProgrammingUI/EditorUndoRedo.ts
+++ b/src/pages/VisProgPage/visualProgrammingUI/EditorUndoRedo.ts
@@ -1,10 +1,18 @@
 import type {Edge, Node} from "@xyflow/react";
 import type {StateCreator, StoreApi } from 'zustand/vanilla';
+import type {
+  SeverityIndex,
+  WarningRegistry
+} from "./components/EditorWarnings.tsx";
 import type {FlowState} from "./VisProgTypes.tsx";

 export type FlowSnapshot = {
  nodes: Node[];
  edges: Edge[];
+  warnings: {
+    warningRegistry: WarningRegistry;
+    severityIndex: SeverityIndex;
+  }
 }

 /**
@@ -41,7 +49,11 @@ export const UndoRedo = (
   */
  const getSnapshot = (state : BaseFlowState) : FlowSnapshot => (structuredClone({
    nodes: state.nodes,
-    edges: state.edges
+    edges: state.edges,
+    warnings: {
+      warningRegistry: state.editorWarningRegistry,
+      severityIndex: state.severityIndex,
+    }
  }));

  const initialState = config(set, get, api);
@@ -78,6 +90,8 @@ export const UndoRedo = (
      set({
        nodes: snapshot.nodes,
        edges: snapshot.edges,
+        editorWarningRegistry: snapshot.warnings.warningRegistry,
+        severityIndex: snapshot.warnings.severityIndex,
      });

      state.future.push(currentSnapshot); // push current to redo
@@ -97,6 +111,8 @@ export const UndoRedo = (
      set({
        nodes: snapshot.nodes,
        edges: snapshot.edges,
+        editorWarningRegistry: snapshot.warnings.warningRegistry,
+        severityIndex: snapshot.warnings.severityIndex,
      });

      state.past.push(currentSnapshot); // push current to undo
--- a/src/pages/VisProgPage/visualProgrammingUI/VisProgStores.tsx
+++ b/src/pages/VisProgPage/visualProgrammingUI/VisProgStores.tsx
@@ -45,19 +45,18 @@ function createNode(id: string, type: string, position: XYPosition, data: Record
    }
 }

-  //* Initial nodes, created by using createNode. */
-  // Start and End don't need to apply the UUID, since they are technically never compiled into a program.
-  const startNode = createNode('start', 'start', {x: 110, y: 100}, {label: "Start"}, false)
-  const endNode = createNode('end', 'end', {x: 590, y: 100}, {label: "End"}, false)
-  const initialPhaseNode = createNode(crypto.randomUUID(), 'phase', {x:235, y:100}, {label: "Phase 1", children : [], isFirstPhase: false, nextPhaseId: null})
+//* Initial nodes, created by using createNode. */
+// Start and End don't need to apply the UUID, since they are technically never compiled into a program.
+const startNode = createNode('start', 'start', {x: 110, y: 100}, {label: "Start"}, false)
+const endNode = createNode('end', 'end', {x: 590, y: 100}, {label: "End"}, false)
+const initialPhaseNode = createNode(crypto.randomUUID(), 'phase', {x:235, y:100}, {label: "Phase 1", children : [], isFirstPhase: false, nextPhaseId: null})

-  const initialNodes : Node[] = [startNode, endNode, initialPhaseNode];
+const initialNodes : Node[] = [startNode, endNode, initialPhaseNode];

 // Initial edges, leave empty as setting initial edges...
 // ...breaks logic that is dependent on connection events
 const initialEdges: Edge[] = [];

-
 /**
 * useFlowStore contains the implementation for all editor functionality
 * and stores the current state of the visual programming editor
@@ -88,7 +87,9 @@ const useFlowStore = create<FlowState>(UndoRedo((set, get) => ({
   */
  onNodesChange: (changes) => set({nodes: applyNodeChanges(changes, get().nodes)}),

-  onNodesDelete: (nodes) => nodes.forEach(node => get().unregisterNodeRules(node.id)),
+  onNodesDelete: (nodes) => nodes.forEach((_node) => {
+    return;
+  }),

  onEdgesDelete: (edges) => {
    // we make sure any affected nodes get updated to reflect removal of edges
@@ -218,19 +219,32 @@ const useFlowStore = create<FlowState>(UndoRedo((set, get) => ({
   * Deletes a node by ID, respecting NodeDeletes rules.
   * Also removes all edges connected to that node.
   */
-  deleteNode: (nodeId) => {
+  deleteNode: (nodeId, deleteElements) => {
    get().pushSnapshot();

    // Let's find our node to check if they have a special deletion function
    const ourNode = get().nodes.find((n)=>n.id==nodeId);
    const ourFunction = Object.entries(NodeDeletes).find(([t])=>t==ourNode?.type)?.[1]

+
+
    // If there's no function, OR, our function tells us we can delete it, let's do so...
    if (ourFunction == undefined || ourFunction()) {
-      set({
-      nodes: get().nodes.filter((n) => n.id !== nodeId),
-      edges: get().edges.filter((e) => e.source !== nodeId && e.target !== nodeId),
-      })}
+      if (deleteElements){
+        deleteElements({
+          nodes: get().nodes.filter((n) => n.id === nodeId),
+          edges: get().edges.filter((e) => e.source !== nodeId && e.target === nodeId)}
+        ).then(() => {
+          get().unregisterNodeRules(nodeId);
+          get().unregisterWarningsForId(nodeId);
+        });
+      } else {
+        set({
+        nodes: get().nodes.filter((n) => n.id !== nodeId),
+        edges: get().edges.filter((e) => e.source !== nodeId && e.target !== nodeId),
+        })
+      }
+    }
  },

  /**
--- a/src/pages/VisProgPage/visualProgrammingUI/VisProgTypes.tsx
+++ b/src/pages/VisProgPage/visualProgrammingUI/VisProgTypes.tsx
@@ -7,7 +7,7 @@ import type {
  OnReconnect,
  Node,
  OnEdgesDelete,
-  OnNodesDelete
+  OnNodesDelete, DeleteElementsOptions
 } from '@xyflow/react';
 import type {EditorWarningRegistry} from "./components/EditorWarnings.tsx";
 import type {HandleRule} from "./HandleRuleLogic.ts";
@@ -69,7 +69,10 @@ export type FlowState = {
   * Deletes a node and any connected edges.
   * @param nodeId - the ID of the node to delete
   */
-  deleteNode: (nodeId: string) => void;
+  deleteNode: (nodeId: string,  deleteElements?: (params: DeleteElementsOptions) => Promise<{
+    deletedNodes: Node[]
+    deletedEdges: Edge[]
+  }>) => void;

  /**
   * Replaces the current nodes array in the store.
--- a/src/pages/VisProgPage/visualProgrammingUI/components/EditorWarnings.tsx
+++ b/src/pages/VisProgPage/visualProgrammingUI/components/EditorWarnings.tsx
@@ -19,6 +19,7 @@ export type WarningType =
  | 'MISSING_OUTPUT'
  | 'PLAN_IS_UNDEFINED'
  | 'INCOMPLETE_PROGRAM'
+  | 'NOT_CONNECTED_TO_PROGRAM'
  | string

 export type WarningSeverity =
@@ -26,6 +27,9 @@ export type WarningSeverity =
  | 'WARNING' // Acceptable, but probably undesirable behavior
  | 'ERROR' // Prevents running program, should be fixed before running program is allowed

+/**
+ * warning scope, include a handleId if the warning is handle specific
+ */
 export type WarningScope = {
  id: string;
  handleId?: string;
@@ -60,11 +64,26 @@ type ZustandSet = (partial: Partial<FlowState> | ((state: FlowState) => Partial<
 type ZustandGet = () => FlowState;

 export type EditorWarningRegistry = {
+  /**
+   * stores all editor warnings
+   */
  editorWarningRegistry: WarningRegistry;
+  /**
+   * index of warnings by severity
+   */
  severityIndex: SeverityIndex;

+  /**
+   * gets all warnings and returns them as a list of warnings
+   * @returns {EditorWarning[]}
+   */
  getWarnings: () => EditorWarning[];

+  /**
+   * gets all warnings with the current severity
+   * @param {WarningSeverity} warningSeverity
+   * @returns {EditorWarning[]}
+   */
  getWarningsBySeverity: (warningSeverity: WarningSeverity) => EditorWarning[];

  /**
@@ -87,13 +106,17 @@ export type EditorWarningRegistry = {

  /**
   * unregisters warnings from the warningRegistry and the SeverityIndex
-   * @param {EditorWarning} warning
+   * @param {WarningId} warning
   */
  unregisterWarningsForId: (id: WarningId) => void;
 }

 // --| implemented logic |--

+/**
+ * the id to use for global editor warnings
+ * @type {string}
+ */
 export const globalWarning = "GLOBAL_WARNINGS";

 export function editorWarningRegistry(get: ZustandGet, set: ZustandSet) : EditorWarningRegistry { return {
@@ -105,8 +128,8 @@ export function editorWarningRegistry(get: ZustandGet, set: ZustandSet) : Editor
  ]),

  getWarningsBySeverity: (warningSeverity) => {
-    const wRegistry = get().editorWarningRegistry;
-    const sIndex = get().severityIndex;
+    const wRegistry = new Map([...get().editorWarningRegistry].map(([k, v]) => [k, new Map(v)]));
+    const sIndex = new Map(get().severityIndex);
    const warningKeys = sIndex.get(warningSeverity);
    const warnings: EditorWarning[] = [];

@@ -137,9 +160,8 @@ export function editorWarningRegistry(get: ZustandGet, set: ZustandSet) : Editor
    const { scope: {id, handleId}, type, severity } = warning;
    const warningKey = handleId ? `${type}:${handleId}` : type;
    const compositeKey = `${id}|${warningKey}`;
-    const wRegistry = structuredClone(get().editorWarningRegistry);
-    const sIndex = structuredClone(get().severityIndex);
-    console.log("register")
+    const wRegistry = new Map([...get().editorWarningRegistry].map(([k, v]) => [k, new Map(v)]));
+    const sIndex = new Map(get().severityIndex);
    // add to warning registry
    if (!wRegistry.has(id)) {
      wRegistry.set(id, new Map());
@@ -159,9 +181,8 @@ export function editorWarningRegistry(get: ZustandGet, set: ZustandSet) : Editor
  },

  unregisterWarning: (id, warningKey) => {
-    const wRegistry = structuredClone(get().editorWarningRegistry);
-    const sIndex = structuredClone(get().severityIndex);
-    console.log("unregister")
+    const wRegistry = new Map([...get().editorWarningRegistry].map(([k, v]) => [k, new Map(v)]));
+    const sIndex = new Map(get().severityIndex);
    // verify if the warning was created already
    const warning = wRegistry.get(id)?.get(warningKey);
    if (!warning) return;
@@ -180,14 +201,17 @@ export function editorWarningRegistry(get: ZustandGet, set: ZustandSet) : Editor
  },

  unregisterWarningsForId: (id) => {
-    const wRegistry = structuredClone(get().editorWarningRegistry);
-    const sIndex = structuredClone(get().severityIndex);
+    const wRegistry = new Map([...get().editorWarningRegistry].map(([k, v]) => [k, new Map(v)]));
+    const sIndex = new Map(get().severityIndex);

    const nodeWarnings = wRegistry.get(id);

    // remove from severity index
    if (nodeWarnings) {
-      nodeWarnings.forEach((warning, warningKey) => {
+      nodeWarnings.forEach((warning) => {
+        const warningKey = warning.scope.handleId
+          ? `${warning.type}:${warning.scope.handleId}`
+          : warning.type;
        sIndex.get(warning.severity)?.delete(`${id}|${warningKey}`);
      });
    }
@@ -203,7 +227,11 @@ export function editorWarningRegistry(get: ZustandGet, set: ZustandSet) : Editor
 }}


-// returns a summary of the warningRegistry
+
+/**
+ * returns a summary of the warningRegistry
+ * @returns {{info: number, warning: number, error: number, isValid: boolean}}
+ */
 export function warningSummary() {
  const {severityIndex, isProgramValid} = useFlowStore.getState();
  return {
--- a/src/pages/VisProgPage/visualProgrammingUI/components/NodeComponents.tsx
+++ b/src/pages/VisProgPage/visualProgrammingUI/components/NodeComponents.tsx
@@ -1,4 +1,4 @@
-import {NodeToolbar} from '@xyflow/react';
+import {NodeToolbar, useReactFlow} from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
 import {type JSX, useState} from "react";
 import {createPortal} from "react-dom";
@@ -30,10 +30,11 @@ type ToolbarProps = {
 */
 export function Toolbar({nodeId, allowDelete}: ToolbarProps) {
  const {nodes, deleteNode} = useFlowStore();
-
+  const { deleteElements } = useReactFlow();

  const deleteParentNode = () => {
-    deleteNode(nodeId);
+
+    deleteNode(nodeId, deleteElements);
  };

  const nodeType = nodes.find((node) => node.id === nodeId)?.type as keyof typeof NodeTooltips;
--- a/src/pages/VisProgPage/visualProgrammingUI/components/RuleBasedHandle.module.css
+++ b/src/pages/VisProgPage/visualProgrammingUI/components/RuleBasedHandle.module.css
@@ -1,7 +1,16 @@
+:global(.react-flow__handle.source){
+    border-radius: 100%;
+}
+:global(.react-flow__handle.target){
+    border-radius: 15%;
+}
+
+
+
 :global(.react-flow__handle.connected) {
    background: lightgray;
    border-color: green;
-    filter: drop-shadow(0 0 0.25rem green);
+    filter: drop-shadow(0 0 0.15rem green);
 }

 :global(.singleConnectionHandle.connected) {
@@ -16,19 +25,19 @@
 :global(.singleConnectionHandle.unconnected){
    background: lightsalmon;
    border-color: #ff6060;
-    filter: drop-shadow(0 0 0.25rem #ff6060);
+    filter: drop-shadow(0 0 0.15rem #ff6060);
 }

 :global(.react-flow__handle.connectingto) {
    background: #ff6060;
    border-color: coral;
-    filter: drop-shadow(0 0 0.25rem coral);
+    filter: drop-shadow(0 0 0.15rem coral);
 }

 :global(.react-flow__handle.valid) {
    background: #55dd99;
    border-color: green;
-    filter: drop-shadow(0 0 0.25rem green);
+    filter: drop-shadow(0 0 0.15rem green);
 }

 :global(.react-flow__handle) {
--- a/src/pages/VisProgPage/visualProgrammingUI/components/RuleBasedHandle.tsx
+++ b/src/pages/VisProgPage/visualProgrammingUI/components/RuleBasedHandle.tsx
@@ -4,7 +4,6 @@ import {
  type Connection,
  useNodeId, useNodeConnections
 } from '@xyflow/react';
-import {useState} from 'react';
 import { type HandleRule, useHandleRules} from "../HandleRuleLogic.ts";
 import "./RuleBasedHandle.module.css";

@@ -29,21 +28,16 @@ export function MultiConnectionHandle({
    handleId: id!
  })

-  // initialise the handles state with { isValid: true } to show that connections are possible
-  const [handleState, setHandleState] = useState<{ isSatisfied: boolean, message?: string }>({ isSatisfied: true });
-
  return (
    <Handle
      {...otherProps}
      id={id}
      type={type}
-      className={"multiConnectionHandle" + (connections.length === 0 ? " unconnected" : " connected")}
+      className={"multiConnectionHandle" + (connections.length === 0 ? " unconnected" : " connected") + ` ${type}`}
      isValidConnection={(connection) => {
        const result = validate(connection as Connection);
-        setHandleState(result);
        return result.isSatisfied;
      }}
-      title={handleState.message}
    />
  );
 }
@@ -66,22 +60,18 @@ export function SingleConnectionHandle({
    handleId: id!
  })

-  // initialise the handles state with { isValid: true } to show that connections are possible
-  const [handleState, setHandleState] = useState<{ isSatisfied: boolean, message?: string }>({ isSatisfied: true });

  return (
    <Handle
      {...otherProps}
      id={id}
      type={type}
-      className={"singleConnectionHandle" + (connections.length === 0 ? " unconnected" : " connected")}
+      className={"singleConnectionHandle" + (connections.length === 0 ? " unconnected" : " connected") + ` ${type}`}
      isConnectable={connections.length === 0}
      isValidConnection={(connection) => {
        const result = validate(connection as Connection);
-        setHandleState(result);
        return result.isSatisfied;
      }}
-      title={handleState.message}
    />
  );
 }
--- a/src/pages/VisProgPage/visualProgrammingUI/components/WarningSidebar.module.css
+++ b/src/pages/VisProgPage/visualProgrammingUI/components/WarningSidebar.module.css
@@ -1,15 +1,56 @@
 .warnings-sidebar {
-    width: 320px;
+    min-width: auto;
+    max-width: 340px;
+    margin-right: 0;
    height: 100%;
    background: canvas;
-    border-left: 2px solid black;
    display: flex;
+    flex-direction: row;
+}
+
+.warnings-toggle-bar {
+    background-color: ButtonFace;
+    justify-items: center;
+    align-content: center;
+    width: 1rem;
+    cursor: pointer;
+}
+
+.warnings-toggle-bar.error:first-child:has(.arrow-right){
+    background-color: hsl(from red h s 75%);
+}
+.warnings-toggle-bar.warning:first-child:has(.arrow-right) {
+    background-color: hsl(from orange h s 75%);
+}
+.warnings-toggle-bar.info:first-child:has(.arrow-right) {
+    background-color: hsl(from steelblue h s 75%);
+}
+
+.warnings-toggle-bar:hover {
+    background-color: GrayText !important ;
+    .arrow-left {
+        border-right-color: ButtonFace;
+        transition: transform 0.15s ease-in-out;
+        transform: rotateY(180deg);
+    }
+    .arrow-right {
+        border-left-color: ButtonFace;
+        transition: transform 0.15s ease-in-out;
+        transform: rotateY(180deg);
+    }
+}
+
+
+.warnings-content {
+    width: 320px;
+    flex: 1;
    flex-direction: column;
+    border-left: 2px solid CanvasText;
 }

 .warnings-header {
    padding: 12px;
-    border-bottom: 1px solid #2a2a2e;
+    border-bottom: 2px solid CanvasText;
 }

 .severity-tabs {
@@ -36,15 +77,21 @@
 .severity-tab.active {
    color: ButtonText;
    border: 2px solid currentColor;
+    .count {
+        color: ButtonText;
+    }
 }

 .warning-group-header {
    background: ButtonFace;
+    padding: 6px;
+    font-weight: bold;
 }

 .warnings-list {
    flex: 1;
-    overflow-y: auto;
+    min-height: 0;
+    overflow-y: scroll;
 }

 .warnings-empty {
@@ -53,11 +100,13 @@

 .warning-item {
    display: flex;
+    flex-direction: column;
    margin: 5px;
-    gap: 8px;
-    padding: 8px 12px;
+    gap: 2px;
+    padding: 0;
    border-radius: 5px;
    cursor: pointer;
+    color: GrayText;
 }

 .warning-item:hover {
@@ -66,17 +115,89 @@

 .warning-item--error {
    border: 2px solid red;
+    background-color: hsl(from red h s 96%);
+    .item-header{
+        background-color: red;
+        .type{
+            color: hsl(from red h s 96%);
+        }
+    }
+
+}
+
+.warning-item--error:hover {
+    background-color: hsl(from red h s 75%);
 }

 .warning-item--warning {
-    border: 3px solid orange;
+    border: 2px solid orange;
+    background-color: hsl(from orange h s 96%);
+    .item-header{
+        background-color: orange;
+        .type{
+            color: hsl(from orange h s 96%);
+        }
+    }
+}
+
+.warning-item--warning:hover {
+    background-color: hsl(from orange h s 75%);
 }

 .warning-item--info {
-    border: 3px solid steelblue;
+    border: 2px solid steelblue;
+    background-color: hsl(from steelblue h s 96%);
+    .item-header{
+        background-color: steelblue;
+        .type{
+            color: hsl(from steelblue h s 96%);
+        }
+    }
 }

-.warning-item .meta {
-    font-size: 11px;
-    opacity: 0.6;
-}
+.warning-item--info:hover {
+    background-color: hsl(from steelblue h s 75%);
+}
+
+.warning-item .item-header {
+    padding: 8px 8px;
+    opacity: 1;
+    font-weight: bolder;
+}
+.warning-item .item-header .type{
+    padding: 2px 8px;
+    font-size: 0.9rem;
+}
+
+.warning-item .description {
+    padding: 5px 10px;
+    font-size: 0.8rem;
+}
+
+.auto-hide {
+    background-color: Canvas;
+    border-top: 2px solid CanvasText;
+    margin-top: auto;
+    width: 100%;
+    height: 2.5rem;
+    display: flex;
+    align-items: center;
+    padding: 0 12px;
+}
+
+/* arrows for toggleBar */
+.arrow-right {
+    width: 0;
+    height: 0;
+    border-top: 0.5rem solid transparent;
+    border-bottom: 0.5rem solid transparent;
+    border-left: 0.6rem solid GrayText;
+}
+
+.arrow-left {
+    width: 0;
+    height: 0;
+    border-top: 0.5rem solid transparent;
+    border-bottom: 0.5rem solid transparent;
+    border-right: 0.6rem solid GrayText;
+}
--- a/src/pages/VisProgPage/visualProgrammingUI/components/WarningSidebar.tsx
+++ b/src/pages/VisProgPage/visualProgrammingUI/components/WarningSidebar.tsx
@@ -9,31 +9,83 @@ import {
 } from "./EditorWarnings.tsx";
 import styles from "./WarningSidebar.module.css";

+/**
+ * the warning sidebar, shows all warnings
+ *
+ * @returns {React.JSX.Element}
+ * @constructor
+ */
 export function WarningsSidebar() {
  const warnings = useFlowStore.getState().getWarnings();
-
+  const [hide, setHide] = useState(false);
  const [severityFilter, setSeverityFilter] = useState<WarningSeverity | 'ALL'>('ALL');
+  const [autoHide, setAutoHide] = useState(false);
+
+  // let autohide change hide status only when autohide is toggled
+  // and allow for user to change the hide state even if autohide is enabled
+  const hasWarnings = warnings.length > 0;
+  useEffect(() => {
+    if (autoHide) {
+      setHide(!hasWarnings);
+    }
+  }, [autoHide, hasWarnings]);

-  useEffect(() => {}, [warnings]);
  const filtered = severityFilter === 'ALL'
    ? warnings
    : warnings.filter(w => w.severity === severityFilter);


-
+  const summary = warningSummary();
+  // Finds the first key where the count > 0
+  const getHighestSeverity = () => {
+    if (summary.error > 0) return styles.error;
+    if (summary.warning > 0) return styles.warning;
+    if (summary.info > 0) return styles.info;
+    return '';
+  };

  return (
-    <aside className={styles.warningsSidebar}>
-      <WarningsHeader
-        severityFilter={severityFilter}
-        onChange={setSeverityFilter}
-      />
+    <aside className={`flex-row`} >
+      <div
+        className={`${styles.warningsToggleBar} ${getHighestSeverity()}`}
+        onClick={() => setHide(!hide)}
+        title={"toggle warnings"}
+      >
+        <div className={`${hide ? styles.arrowRight : styles.arrowLeft}`}></div>
+      </div>
+      <div 
+        id="warningSidebar" 
+        className={styles.warningsContent} 
+        style={hide ? {display: "none"} : {display: "flex"}}
+      >
+        <WarningsHeader
+          severityFilter={severityFilter}
+          onChange={setSeverityFilter}
+        />

-      <WarningsList warnings={filtered} />
+        <WarningsList warnings={filtered} />
+        <div className={styles.autoHide}>
+          <input
+            id="autoHideSwitch"
+            type={"checkbox"}
+            checked={autoHide}
+            onChange={(e) => setAutoHide(e.target.checked)}
+          /><label>Hide if there are no warnings</label>
+        </div>
+      </div>
    </aside>
+
  );
 }

+/**
+ * the header of the warning sidebar, contains severity filtering buttons
+ *
+ * @param {WarningSeverity | "ALL"} severityFilter
+ * @param {(severity: (WarningSeverity | "ALL")) => void} onChange
+ * @returns {React.JSX.Element}
+ * @constructor
+ */
 function WarningsHeader({
  severityFilter,
  onChange,
@@ -46,7 +98,6 @@ function WarningsHeader({
  return (
    <div className={styles.warningsHeader}>
      <h3>Warnings</h3>
-
      <div className={styles.severityTabs}>
        {(['ALL', 'ERROR', 'WARNING', 'INFO'] as const).map(severity => (
          <button
@@ -68,13 +119,18 @@ function WarningsHeader({
 }


-
+/**
+ *  the list of warnings in the warning sidebar
+ *
+ * @param {{warnings: EditorWarning[]}} props
+ * @returns {React.JSX.Element}
+ * @constructor
+ */
 function WarningsList(props: { warnings: EditorWarning[] }) {
  const splitWarnings = {
    global: props.warnings.filter(w => w.scope.id === globalWarning),
    other: props.warnings.filter(w => w.scope.id !== globalWarning),
  }
-
  if (props.warnings.length === 0) {
    return (
      <div className={styles.warningsEmpty}>
@@ -83,30 +139,39 @@ function WarningsList(props: { warnings: EditorWarning[] }) {
    )
  }
  return (
-    <div>
-      <div className={"warningGroup"}>
+    <div className={styles.warningsList}>
        <div className={styles.warningGroupHeader}>global:</div>
-        <div className={styles.warningsList}>
+        <div className={styles.warningsGroup}>
          {splitWarnings.global.map((warning) => (
-            <WarningListItem warning={warning} />
+            <WarningListItem warning={warning} key={`${warning.scope.id}|${warning.type}` + (warning.scope.handleId
+              ? `:${warning.scope.handleId}`
+              : "")}
+            />
          ))}
          {splitWarnings.global.length === 0 && "No global warnings!"}
        </div>
-      </div>
-      <div className={"warningGroup"}>
        <div className={styles.warningGroupHeader}>other:</div>
-        <div className={styles.warningsList}>
+        <div className={styles.warningsGroup}>
          {splitWarnings.other.map((warning) => (
-            <WarningListItem warning={warning} />
+            <WarningListItem warning={warning} key={`${warning.scope.id}|${warning.type}` + (warning.scope.handleId
+              ? `:${warning.scope.handleId}`
+              : "")}
+            />
          ))}
          {splitWarnings.other.length === 0 && "No other warnings!"}
        </div>
-      </div>
    </div>
  );
 }

-function WarningListItem(props: { warning: EditorWarning }) {
+/**
+ * a single warning in the warning sidebar
+ *
+ * @param {{warning: EditorWarning, key: string}} props
+ * @returns {React.JSX.Element}
+ * @constructor
+ */
+function WarningListItem(props: { warning: EditorWarning, key: string}) {
  const jumpToNode = useJumpToNode();

  return (
@@ -114,41 +179,47 @@ function WarningListItem(props: { warning: EditorWarning }) {
      className={clsx(styles.warningItem, styles[`warning-item--${props.warning.severity.toLowerCase()}`],)}
      onClick={() => jumpToNode(props.warning.scope.id)}
    >
-      <div className={styles.description}>
-        {props.warning.description}
+      <div className={styles.itemHeader}>
+        <span className={styles.type}>{props.warning.type}</span>
      </div>

-      <div className={styles.meta}>
-        {props.warning.scope.id}
-        {props.warning.scope.handleId && (
-          <span className={styles.handle}>@{props.warning.scope.handleId}</span>
-        )}
+      <div className={styles.description}>
+        {props.warning.description}
      </div>
    </div>
  );
 }

+/**
+ * moves the editor to the provided node
+ * @returns {(nodeId: string) => void}
+ */
 function useJumpToNode() {
-  const { getNode, setCenter } = useReactFlow();
+  const { getNode, setCenter, getViewport } = useReactFlow();
  const { addSelectedNodes } = useStoreApi().getState();

+
  return (nodeId: string) => {
-    // user can't jump to global warning, so prevent further logic from running
+    // user can't jump to global warning, so prevent further logic from running if the warning is a globalWarning
    if (nodeId === globalWarning) return;
    const node = getNode(nodeId);
    if (!node) return;

-    const { position, width = 0, height = 0} = node;
+    const nodeElement = document.querySelector(`.react-flow__node[data-id="${nodeId}"]`) as HTMLElement;
+    const { position } = node;
+    const viewport = getViewport();
+    const { width, height } = nodeElement.getBoundingClientRect();

-    // move to node
+    //move to node
    setCenter(
-      position!.x + width / 2,
-      position!.y + height / 2,
-      { zoom: 2, duration: 300 }
+      position!.x + ((width / viewport.zoom) / 2),
+      position!.y + ((height / viewport.zoom) / 2),
+      {duration: 300, interpolate: "smooth" }
    ).then(() => {
-      // select the node
      addSelectedNodes([nodeId]);
    });

+
+
  };
 }
--- a/src/pages/VisProgPage/visualProgrammingUI/nodes/BasicBeliefNode.tsx
+++ b/src/pages/VisProgPage/visualProgrammingUI/nodes/BasicBeliefNode.tsx
@@ -113,8 +113,8 @@ export default function BasicBeliefNode(props: NodeProps<BasicBeliefNode>) {
    updateNodeData(props.id, {...data, belief: {...data.belief, description: value}});
  }

-  // These are the labels outputted by our emotion detection model
- const emotionOptions = ["sad", "angry", "surprise", "fear", "happy", "disgust", "neutral"];
+  // Use this
+  const emotionOptions = ["Happy", "Angry", "Sad", "Cheerful"]


  let placeholder = ""
@@ -192,7 +192,7 @@ export default function BasicBeliefNode(props: NodeProps<BasicBeliefNode>) {
        <MultiConnectionHandle type="source" position={Position.Right} id="source" rules={[
          noMatchingLeftRightBelief,
          allowOnlyConnectionsFromHandle([{nodeType:"trigger",handleId:"TriggerBeliefs"}, {nodeType:"norm",handleId:"NormBeliefs"}]),
-        ]}/>
+        ]}  title="Connect to any number of trigger and/or normNode(-s)"/>
      </div>
    </>
  );
--- a/src/pages/VisProgPage/visualProgrammingUI/nodes/EndNode.tsx
+++ b/src/pages/VisProgPage/visualProgrammingUI/nodes/EndNode.tsx
@@ -60,7 +60,7 @@ export default function EndNode(props: NodeProps<EndNode>) {
        </div>
        <SingleConnectionHandle type="target" position={Position.Left} id="target" rules={[
          allowOnlyConnectionsFromType(["phase"])
-        ]}/>
+        ]} title="Connect to a phaseNode"/>
      </div>
    </>
  );
--- a/src/pages/VisProgPage/visualProgrammingUI/nodes/GoalNode.tsx
+++ b/src/pages/VisProgPage/visualProgrammingUI/nodes/GoalNode.tsx
@@ -1,8 +1,10 @@
 import {
  type NodeProps,
  Position,
-  type Node,
+  type Node
 } from '@xyflow/react';
+import {useEffect} from "react";
+import type {EditorWarning} from "../components/EditorWarnings.tsx";
 import { Toolbar } from '../components/NodeComponents';
 import styles from '../../VisProg.module.css';
 import { TextField } from '../../../../components/TextField';
@@ -44,7 +46,7 @@ export type GoalNode = Node<GoalNodeData>
 * @returns React.JSX.Element
 */
 export default function GoalNode({id, data}: NodeProps<GoalNode>) {
-  const {updateNodeData} = useFlowStore();
+  const {updateNodeData, registerWarning, unregisterWarning} = useFlowStore();
  const _nodes = useFlowStore().nodes;

  const text_input_id = `goal_${id}_text_input`;
@@ -64,6 +66,24 @@ export default function GoalNode({id, data}: NodeProps<GoalNode>) {
    updateNodeData(id, {...data, can_fail: value});
  }

+
+  useEffect(() => {
+    const noPlanWarning : EditorWarning = {
+      scope: {
+        id: id,
+        handleId: undefined
+      },
+      type: 'PLAN_IS_UNDEFINED',
+      severity: 'ERROR',
+      description: "This goalNode is missing a plan, please make sure to create a plan by using the create plan button"
+    };
+
+    if (!data.plan){
+      registerWarning(noPlanWarning);
+      return;
+    }
+    unregisterWarning(id, noPlanWarning.type);
+  },[data.plan, id, registerWarning, unregisterWarning])
  return <>
    <Toolbar nodeId={id} allowDelete={true}/>
    <div className={`${styles.defaultNode} ${styles.nodeGoal} flex-col gap-sm`}>
@@ -118,9 +138,11 @@ export default function GoalNode({id, data}: NodeProps<GoalNode>) {
      </div>
      <MultiConnectionHandle type="source" position={Position.Right} id="GoalSource" rules={[
        allowOnlyConnectionsFromHandle([{nodeType:"phase",handleId:"data"}]),
-      ]}/>
+      ]} title="Connect to any number of phase and/or goalNode(-s)"/>

-      <MultiConnectionHandle type="target" position={Position.Bottom} id="GoalTarget" rules={[allowOnlyConnectionsFromType(["goal"])]}/>
+      <MultiConnectionHandle type="target" position={Position.Bottom} id="GoalTarget" rules={[
+        allowOnlyConnectionsFromType(["goal"])]
+      } title="Connect to any number of goalNode(-s)"/>


    </div>
--- a/src/pages/VisProgPage/visualProgrammingUI/nodes/InferredBeliefNode.default.ts
+++ b/src/pages/VisProgPage/visualProgrammingUI/nodes/InferredBeliefNode.default.ts
@@ -5,7 +5,7 @@ import type { InferredBeliefNodeData } from "./InferredBeliefNode.tsx";
 * Default data for this node
 */
 export const InferredBeliefNodeDefaults: InferredBeliefNodeData = {
-  label: "Inferred Belief",
+  label: "AND/OR",
  droppable: true,
  inferredBelief: {
    left: undefined,
--- a/src/pages/VisProgPage/visualProgrammingUI/nodes/InferredBeliefNode.tsx
+++ b/src/pages/VisProgPage/visualProgrammingUI/nodes/InferredBeliefNode.tsx
@@ -1,6 +1,7 @@
-import {getConnectedEdges, type Node, type NodeProps, Position} from '@xyflow/react';
-import {useState} from "react";
+import {getConnectedEdges, type Node, type NodeProps, Position, useNodeConnections} from '@xyflow/react';
+import {useEffect, useState} from "react";
 import styles from '../../VisProg.module.css';
+import type {EditorWarning} from "../components/EditorWarnings.tsx";
 import {Toolbar} from '../components/NodeComponents.tsx';
 import {MultiConnectionHandle, SingleConnectionHandle} from "../components/RuleBasedHandle.tsx";
 import {allowOnlyConnectionsFromType} from "../HandleRules.ts";
@@ -91,7 +92,7 @@ export const InferredBeliefTooltip = `
 */
 export default function InferredBeliefNode(props: NodeProps<InferredBeliefNode>) {
  const data = props.data;
-  const { updateNodeData } = useFlowStore();
+  const { updateNodeData, registerWarning, unregisterWarning } = useFlowStore();
  // start of as an AND operator, true: "AND", false: "OR"
  const [enforceAllBeliefs, setEnforceAllBeliefs] = useState(true);

@@ -109,6 +110,29 @@ export default function InferredBeliefNode(props: NodeProps<InferredBeliefNode>)
    });
  }

+  const beliefConnections = useNodeConnections({
+    id: props.id,
+    handleType: "target",
+  })
+
+  useEffect(() => {
+    const noBeliefsWarning : EditorWarning = {
+      scope: {
+        id: props.id,
+        handleId: undefined
+      },
+      type: 'MISSING_INPUT',
+      severity: 'ERROR',
+      description: `This AND/OR node is missing one or more beliefs, 
+      please make sure to use both inputs of an AND/OR node`
+    };
+
+    if (beliefConnections.length < 2){
+      registerWarning(noBeliefsWarning);
+      return;
+    }
+    unregisterWarning(props.id, noBeliefsWarning.type);
+  },[beliefConnections.length, props.id, registerWarning, unregisterWarning])
  return (
    <>
      <Toolbar nodeId={props.id} allowDelete={true}/>
--- a/src/pages/VisProgPage/visualProgrammingUI/nodes/NormNode.tsx
+++ b/src/pages/VisProgPage/visualProgrammingUI/nodes/NormNode.tsx
@@ -79,10 +79,10 @@ export default function NormNode(props: NodeProps<NormNode>) {

      <MultiConnectionHandle type="source" position={Position.Right} id="norms" rules={[
        allowOnlyConnectionsFromHandle([{nodeType:"phase",handleId:"data"}])
-      ]}/>
+      ]} title="Connect to any number of phaseNode(-s)"/>
      <SingleConnectionHandle type="target" position={Position.Bottom} id="NormBeliefs" rules={[
        allowOnlyConnectionsFromType(["basic_belief", "inferred_belief"])
-      ]}/>
+      ]} title="Connect to a beliefNode or a set of beliefs combined using the AND/OR node"/>
    </div>
  </>;
 };
--- a/src/pages/VisProgPage/visualProgrammingUI/nodes/PhaseNode.tsx
+++ b/src/pages/VisProgPage/visualProgrammingUI/nodes/PhaseNode.tsx
@@ -3,8 +3,8 @@ import {
  Position,
  type Node, useNodeConnections
 } from '@xyflow/react';
-import {useEffect} from "react";
-import type {EditorWarning} from "../components/EditorWarnings.tsx";
+import {useEffect, useRef} from "react";
+import {type EditorWarning} from "../components/EditorWarnings.tsx";
 import { Toolbar } from '../components/NodeComponents';
 import styles from '../../VisProg.module.css';
 import {SingleConnectionHandle, MultiConnectionHandle} from "../components/RuleBasedHandle.tsx";
@@ -39,16 +39,29 @@ export type PhaseNode = Node<PhaseNodeData>
 */
 export default function PhaseNode(props: NodeProps<PhaseNode>) {
  const data = props.data;
-  const {updateNodeData} = useFlowStore();
+  const {updateNodeData, registerWarning, unregisterWarning} = useFlowStore();
  const updateLabel = (value: string) => updateNodeData(props.id, {...data, label: value});
  const label_input_id = `phase_${props.id}_label_input`;

-  const {registerWarning, unregisterWarning} = useFlowStore.getState();
  const connections = useNodeConnections({
    id: props.id,
    handleType: "target",
    handleId: 'data'
  })
+  
+  const phaseOutCons = useNodeConnections({
+    id: props.id,
+    handleType: "source",
+    handleId: 'source',
+  })
+
+  const phaseInCons = useNodeConnections({
+    id: props.id,
+    handleType: "target",
+    handleId: 'target',
+  })
+
+

  useEffect(() => {
    const noConnectionWarning : EditorWarning = {
@@ -61,10 +74,72 @@ export default function PhaseNode(props: NodeProps<PhaseNode>) {
      description: "the phaseNode has no incoming goals, norms, and/or triggers"
    }

-    if (connections.length === 0) { registerWarning(noConnectionWarning); }
-    else { unregisterWarning(props.id, `${noConnectionWarning.type}:data`); }
+    if (connections.length === 0) { registerWarning(noConnectionWarning); return; }
+    unregisterWarning(props.id, `${noConnectionWarning.type}:data`);
  }, [connections.length, props.id, registerWarning, unregisterWarning]);

+  useEffect(() => {
+    const notConnectedInfo : EditorWarning = {
+      scope: {
+        id: props.id,
+        handleId: undefined,
+      },
+      type: 'NOT_CONNECTED_TO_PROGRAM',
+      severity: "INFO",
+      description: "The PhaseNode is not connected to other nodes"
+    };
+    const noIncomingPhaseWarning : EditorWarning = {
+      scope: {
+        id: props.id,
+        handleId: 'target'
+      },
+      type: 'MISSING_INPUT',
+      severity: "WARNING",
+      description: "the phaseNode has no incoming connection from a phase or the startNode"
+    }
+    const noOutgoingPhaseWarning : EditorWarning = {
+      scope: {
+        id: props.id,
+        handleId: 'source'
+      },
+      type: 'MISSING_OUTPUT',
+      severity: "WARNING",
+      description: "the phaseNode has no outgoing connection to a phase or the endNode"
+    }
+
+    // register relevant warning and unregister others
+    if (phaseInCons.length === 0 && phaseOutCons.length === 0) {
+      registerWarning(notConnectedInfo);
+      unregisterWarning(props.id, `${noOutgoingPhaseWarning.type}:${noOutgoingPhaseWarning.scope.handleId}`);
+      unregisterWarning(props.id, `${noIncomingPhaseWarning.type}:${noIncomingPhaseWarning.scope.handleId}`);
+      return;
+    }
+    if (phaseOutCons.length === 0) {
+      registerWarning(noOutgoingPhaseWarning);
+      unregisterWarning(props.id, `${noIncomingPhaseWarning.type}:${noIncomingPhaseWarning.scope.handleId}`);
+      unregisterWarning(notConnectedInfo.scope.id, notConnectedInfo.type);
+      return;
+    }
+    if (phaseInCons.length === 0) {
+      registerWarning(noIncomingPhaseWarning);
+      unregisterWarning(props.id, `${noOutgoingPhaseWarning.type}:${noOutgoingPhaseWarning.scope.handleId}`);
+      unregisterWarning(notConnectedInfo.scope.id, notConnectedInfo.type);
+      return;
+    }
+    // unregister all warnings if none should be present
+    unregisterWarning(notConnectedInfo.scope.id, notConnectedInfo.type);
+    unregisterWarning(props.id, `${noOutgoingPhaseWarning.type}:${noOutgoingPhaseWarning.scope.handleId}`);
+    unregisterWarning(props.id, `${noIncomingPhaseWarning.type}:${noIncomingPhaseWarning.scope.handleId}`);
+  }, [phaseInCons.length, phaseOutCons.length, props.id, registerWarning, unregisterWarning]);
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (ref.current) {
+      const { width, height } = ref.current.getBoundingClientRect();
+
+      console.log('Node width:', width, 'height:', height);
+    }
+  }, []);
  return (
    <>
      <Toolbar nodeId={props.id} allowDelete={true}/>
@@ -81,14 +156,14 @@ export default function PhaseNode(props: NodeProps<PhaseNode>) {
        <SingleConnectionHandle type="target" position={Position.Left} id="target" rules={[
          noSelfConnections,
          allowOnlyConnectionsFromType(["phase", "start"]),
-        ]}/>
+        ]} title="Connect to a phase or the startNode"/>
        <MultiConnectionHandle type="target" position={Position.Bottom} id="data" rules={[
          allowOnlyConnectionsFromType(["norm", "goal", "trigger"])
-        ]}/>
+        ]} title="Connect to any number of norm, goal, and TriggerNode(-s)"/>
        <SingleConnectionHandle type="source" position={Position.Right} id="source" rules={[
          noSelfConnections,
          allowOnlyConnectionsFromType(["phase", "end"]),
-        ]}/>
+        ]} title="Connect to a phase or the endNode"/>
      </div>
    </>
  );
--- a/src/pages/VisProgPage/visualProgrammingUI/nodes/StartNode.tsx
+++ b/src/pages/VisProgPage/visualProgrammingUI/nodes/StartNode.tsx
@@ -58,7 +58,7 @@ export default function StartNode(props: NodeProps<StartNode>) {
        </div>
        <SingleConnectionHandle type="source" position={Position.Right} id="source" rules={[
          allowOnlyConnectionsFromHandle([{nodeType:"phase",handleId:"target"}])
-        ]}/>
+        ]} title="Connect to a phaseNode"/>
      </div>
    </>
  );
--- a/src/pages/VisProgPage/visualProgrammingUI/nodes/TriggerNode.tsx
+++ b/src/pages/VisProgPage/visualProgrammingUI/nodes/TriggerNode.tsx
@@ -1,8 +1,10 @@
 import {
  type NodeProps,
  Position,
-  type Node,
+  type Node, useNodeConnections
 } from '@xyflow/react';
+import {useEffect} from "react";
+import type {EditorWarning} from "../components/EditorWarnings.tsx";
 import { Toolbar } from '../components/NodeComponents';
 import styles from '../../VisProg.module.css';
 import {MultiConnectionHandle, SingleConnectionHandle} from "../components/RuleBasedHandle.tsx";
@@ -45,12 +47,77 @@ export type TriggerNode = Node<TriggerNodeData>
 */
 export default function TriggerNode(props: NodeProps<TriggerNode>) {
  const data = props.data;
-  const {updateNodeData} = useFlowStore();
+  const {updateNodeData, registerWarning, unregisterWarning} = useFlowStore();

  const setName= (value: string) => {
    updateNodeData(props.id, {...data, name: value})
  }

+  const beliefInput = useNodeConnections({
+    id: props.id,
+    handleType: "target",
+    handleId: "TriggerBeliefs"
+  })
+
+  const outputCons = useNodeConnections({
+    id: props.id,
+    handleType: "source",
+    handleId: "TriggerSource"
+  })
+
+  useEffect(() => {
+    const noPhaseConnectionWarning : EditorWarning = {
+      scope: {
+        id: props.id,
+        handleId: 'TriggerSource'
+      },
+      type: 'MISSING_OUTPUT',
+      severity: 'INFO',
+      description: "This triggerNode is missing a condition/belief, please make sure to connect a belief node to "
+    };
+
+    if (outputCons.length === 0){
+      registerWarning(noPhaseConnectionWarning);
+      return;
+    }
+    unregisterWarning(props.id, `${noPhaseConnectionWarning.type}:${noPhaseConnectionWarning.scope.handleId}`);
+  },[outputCons.length, props.id, registerWarning, unregisterWarning])
+
+  useEffect(() => {
+    const noBeliefWarning : EditorWarning = {
+      scope: {
+        id: props.id,
+        handleId: 'TriggerBeliefs'
+      },
+      type: 'MISSING_INPUT',
+      severity: 'ERROR',
+      description: "This triggerNode is missing a condition/belief, please make sure to connect a belief node to "
+    };
+
+    if (beliefInput.length === 0 && outputCons.length !== 0){
+      registerWarning(noBeliefWarning);
+      return;
+    }
+    unregisterWarning(props.id, `${noBeliefWarning.type}:${noBeliefWarning.scope.handleId}`);
+  },[beliefInput.length, outputCons.length, props.id, registerWarning, unregisterWarning])
+
+  useEffect(() => {
+    const noPlanWarning : EditorWarning = {
+      scope: {
+        id: props.id,
+        handleId: undefined
+      },
+      type: 'PLAN_IS_UNDEFINED',
+      severity: 'ERROR',
+      description: "This triggerNode is missing a plan, please make sure to create a plan by using the create plan button"
+    };
+
+    if (!data.plan && outputCons.length !== 0){
+      registerWarning(noPlanWarning);
+      return;
+    }
+    unregisterWarning(props.id, noPlanWarning.type);
+  },[data.plan, outputCons.length, props.id, registerWarning, unregisterWarning])
  return <>

    <Toolbar nodeId={props.id} allowDelete={true}/>
@@ -65,7 +132,7 @@ export default function TriggerNode(props: NodeProps<TriggerNode>) {
      <div className={"flex-row gap-md"}>Plan{data.plan ? (": " + data.plan.name) : ""} is currently {data.plan ? "" : "not"} set. {data.plan ? "🟢" : "🔴"}</div>
      <MultiConnectionHandle type="source" position={Position.Right} id="TriggerSource" rules={[
        allowOnlyConnectionsFromHandle([{nodeType:"phase",handleId:"data"}]),
-      ]}/>
+      ]} title="Connect to any number of phaseNodes"/>
      <SingleConnectionHandle
        type="target"
        position={Position.Bottom}
@@ -74,6 +141,7 @@ export default function TriggerNode(props: NodeProps<TriggerNode>) {
        rules={[
          allowOnlyConnectionsFromType(["basic_belief","inferred_belief"]),
        ]}
+        title="Connect to a beliefNode or a set of beliefs combined using the AND/OR node"
      />
      
      <MultiConnectionHandle
@@ -84,6 +152,7 @@ export default function TriggerNode(props: NodeProps<TriggerNode>) {
        rules={[
          allowOnlyConnectionsFromType(['goal']),
        ]}
+        title="Connect to any number of goalNodes"
      />

      <PlanEditorDialog
--- a/src/utils/capitalize.ts
+++ b/src/utils/capitalize.ts
@@ -1,3 +0,0 @@
-export default function (s: string) {
-    return s.charAt(0).toUpperCase() + s.slice(1);
-}
--- a/src/utils/delayedResolve.ts
+++ b/src/utils/delayedResolve.ts
@@ -1,7 +0,0 @@
-export default async function <T>(promise: Promise<T>, minDelayMs: number): Promise<T> {
-  const [result] = await Promise.all([
-    promise,
-    new Promise(resolve => setTimeout(resolve, minDelayMs))
-  ]);
-  return result;
-}
--- a/src/utils/priorityFiltering.ts
+++ b/src/utils/priorityFiltering.ts
@@ -4,7 +4,7 @@ export type PriorityFilterPredicate<T> = {
 }

 /**
- * Applies a list of priority predicates to an element. For all predicates that don't return null, if the ones with the highest level return true, then this function returns true. Or conversely, if the one with the highest level returns false, then this function returns false.
+ * Applies a list of priority predicates to an element. For all predicates that don't return null, if the ones with the highest level return true, then this function returns true.
 * @param element The element to apply the predicates to.
 * @param predicates The list of predicates to apply.
 */
--- a/src/utils/programStore.ts
+++ b/src/utils/programStore.ts
@@ -3,8 +3,6 @@ import {create} from "zustand";
 // the type of a reduced program
 export type ReducedProgram = { phases: Record<string, unknown>[] };

-export type GoalWithDepth = Record<string, unknown> & { level: number };
-
 /**
 * the type definition of the programStore
 */
@@ -17,10 +15,8 @@ export type ProgramState = {
  // Utility functions:
  // to avoid having to manually go through the entire state for every instance where data is required
  getPhaseIds: () => string[];
-  getPhaseNames: () => string[];
  getNormsInPhase: (currentPhaseId: string) => Record<string, unknown>[];
  getGoalsInPhase: (currentPhaseId: string) => Record<string, unknown>[];
-  getGoalsWithDepth: (currentPhaseId: string) => GoalWithDepth[];
  getTriggersInPhase: (currentPhaseId: string) => Record<string, unknown>[];
  // if more specific utility functions are needed they can be added here:
 }
@@ -47,10 +43,6 @@ const useProgramStore = create<ProgramState>((set, get) => ({
   * gets the ids of all phases in the program
   */
  getPhaseIds: () => get().currentProgram.phases.map(entry => entry["id"] as string),
-   /**
-   * gets the names of all phases in the program
-   */
-  getPhaseNames: () => get().currentProgram.phases.map((entry) => (entry["name"] as string)),
  /**
   * gets the norms for the provided phase
   */
@@ -73,51 +65,6 @@ const useProgramStore = create<ProgramState>((set, get) => ({
    }
    throw new Error(`phase with id:"${currentPhaseId}" not found`)
  },
-
-  getGoalsWithDepth: (currentPhaseId: string) => {
-    const program = get().currentProgram;
-    const phase = program.phases.find(val => val["id"] === currentPhaseId);
-    
-    if (!phase) {
-      throw new Error(`phase with id:"${currentPhaseId}" not found`);
-    }
-
-    const rootGoals = phase["goals"] as Record<string, unknown>[];
-    const flatList: GoalWithDepth[] = [];
-
-    // Helper: Define this ONCE, outside the loop
-    const isGoal = (item: Record<string, unknown>) => {
-      return item["plan"] !== undefined && item["plan"] !== null;
-    };
-
-    // Recursive helper function
-    const traverse = (goals: Record<string, unknown>[], depth: number) => {
-      goals.forEach((goal) => {
-        // 1. Add the current goal to the list
-        flatList.push({ ...goal, level: depth });
-
-        // 2. Check for children
-        const plan = goal["plan"] as Record<string, unknown> | undefined;
-        
-        if (plan && Array.isArray(plan["steps"])) {
-           const steps = plan["steps"] as Record<string, unknown>[];
-           
-           // 3. FILTER: Only recurse on steps that are actually goals
-           // If we just passed 'steps', we might accidentally add Actions/Speeches to the goal list
-           const childGoals = steps.filter(isGoal);
-
-           if (childGoals.length > 0) {
-             traverse(childGoals, depth + 1);
-           }
-        }
-      });
-    };
-
-    // Start traversal
-    traverse(rootGoals, 0);
-
-    return flatList;
-  },
  /**
   * gets the triggers for the provided phase
   */
--- a/test/components/Logging/Logging.test.tsx
+++ b/test/components/Logging/Logging.test.tsx
@@ -11,6 +11,8 @@ const loggingStoreRef: { current: null | { setState: (state: Partial<LoggingSett
 type LoggingSettingsState = {
  showRelativeTime: boolean;
  setShowRelativeTime: (show: boolean) => void;
+  scrollToBottom: boolean;
+  setScrollToBottom: (scroll: boolean) => void;
 };

 jest.mock("zustand", () => {
@@ -57,8 +59,8 @@ type LoggingComponent = typeof import("../../../src/components/Logging/Logging.t
 let Logging: LoggingComponent;

 beforeAll(async () => {
-  if (!Element.prototype.scrollTo) {
-    Object.defineProperty(Element.prototype, "scrollTo", {
+  if (!Element.prototype.scrollIntoView) {
+    Object.defineProperty(Element.prototype, "scrollIntoView", {
      configurable: true,
      writable: true,
      value: function () {},
@@ -82,6 +84,7 @@ afterEach(() => {
 function resetLoggingStore() {
  loggingStoreRef.current?.setState({
    showRelativeTime: false,
+    scrollToBottom: true,
  });
 }

@@ -148,7 +151,7 @@ describe("Logging component", () => {
    ];
    mockUseLogs.mockReturnValue({filteredLogs: logs, distinctNames: new Set()});

-    const scrollSpy = jest.spyOn(Element.prototype, "scrollTo").mockImplementation(() => {});
+    const scrollSpy = jest.spyOn(Element.prototype, "scrollIntoView").mockImplementation(() => {});
    const user = userEvent.setup();
    const view = render(<Logging/>);

@@ -172,7 +175,7 @@ describe("Logging component", () => {
    const logCell = makeCell({message: "Initial", firstRelativeCreated: 42});
    mockUseLogs.mockReturnValue({filteredLogs: [logCell], distinctNames: new Set()});

-    const scrollSpy = jest.spyOn(Element.prototype, "scrollTo").mockImplementation(() => {});
+    const scrollSpy = jest.spyOn(Element.prototype, "scrollIntoView").mockImplementation(() => {});
    render(<Logging/>);

    await waitFor(() => {
@@ -206,7 +209,7 @@ describe("Logging component", () => {

    const initialMap = firstProps.filterPredicates;
    expect(initialMap).toBeInstanceOf(Map);
-    expect(initialMap.size).toBe(1);  // Initially, only filter out experiment logs
+    expect(initialMap.size).toBe(0);
    expect(mockUseLogs).toHaveBeenCalledWith(initialMap);

    const updatedPredicate: LogFilterPredicate = {
--- a/test/pages/monitoringPage/MonitoringPage.test.tsx
+++ b/test/pages/monitoringPage/MonitoringPage.test.tsx
@@ -1,293 +0,0 @@
-import { render, screen, fireEvent, act } from '@testing-library/react';
-import '@testing-library/jest-dom';
-import MonitoringPage from '../../../src/pages/MonitoringPage/MonitoringPage';
-import useProgramStore from '../../../src/utils/programStore';
-import * as MonitoringAPI from '../../../src/pages/MonitoringPage/MonitoringPageAPI';
-import * as VisProg from '../../../src/pages/VisProgPage/VisProgLogic';
-
-// --- Mocks ---
-
-// Mock the Zustand store
-jest.mock('../../../src/utils/programStore', () => ({
-  __esModule: true,
-  default: jest.fn(),
-}));
-
-// Mock the API layer including hooks
-jest.mock('../../../src/pages/MonitoringPage/MonitoringPageAPI', () => ({
-  nextPhase: jest.fn(),
-  resetPhase: jest.fn(),
-  pauseExperiment: jest.fn(),
-  playExperiment: jest.fn(),
-  // We mock these to capture the callbacks and trigger them manually in tests
-  useExperimentLogger: jest.fn(),
-  useStatusLogger: jest.fn(),
-}));
-
-// Mock VisProg functionality
-jest.mock('../../../src/pages/VisProgPage/VisProgLogic', () => ({
-  graphReducer: jest.fn(),
-  runProgramm: jest.fn(),
-}));
-
-// Mock Child Components to reduce noise (optional, but keeps unit test focused)
-// For this test, we will allow them to render to test data passing, 
-// but we mock RobotConnected as it has its own side effects
-jest.mock('../../../src/pages/MonitoringPage/MonitoringPageComponents', () => {
-  const original = jest.requireActual('../../../src/pages/MonitoringPage/MonitoringPageComponents');
-  return {
-    ...original,
-    RobotConnected: () => <div data-testid="robot-connected-mock">Robot Status</div>,
-  };
-});
-
-describe('MonitoringPage', () => {
-  // Capture stream callbacks
-  let streamUpdateCallback: (data: any) => void;
-  let statusUpdateCallback: (data: any) => void;
-
-  // Setup default store state
-  const mockGetPhaseIds = jest.fn();
-  const mockGetPhaseNames = jest.fn();
-  const mockGetNorms = jest.fn();
-  const mockGetGoals = jest.fn();
-  const mockGetTriggers = jest.fn();
-  const mockSetProgramState = jest.fn();
-
-  beforeEach(() => {
-    jest.clearAllMocks();
-
-    // Default Store Implementation
-    (useProgramStore as unknown as jest.Mock).mockImplementation((selector) => {
-      const state = {
-        getPhaseIds: mockGetPhaseIds,
-        getPhaseNames: mockGetPhaseNames,
-        getNormsInPhase: mockGetNorms,
-        getGoalsInPhase: mockGetGoals,
-        getTriggersInPhase: mockGetTriggers,
-        setProgramState: mockSetProgramState,
-      };
-      return selector(state);
-    });
-
-    // Capture the hook callbacks
-    (MonitoringAPI.useExperimentLogger as jest.Mock).mockImplementation((cb) => {
-      streamUpdateCallback = cb;
-    });
-    (MonitoringAPI.useStatusLogger as jest.Mock).mockImplementation((cb) => {
-      statusUpdateCallback = cb;
-    });
-
-    // Default mock return values
-    mockGetPhaseIds.mockReturnValue(['phase-1', 'phase-2']);
-    mockGetPhaseNames.mockReturnValue(['Intro', 'Main']);
-    mockGetGoals.mockReturnValue([{ id: 'g1', name: 'Goal 1' }, { id: 'g2', name: 'Goal 2' }]);
-    mockGetTriggers.mockReturnValue([{ id: 't1', name: 'Trigger 1' }]);
-    mockGetNorms.mockReturnValue([
-        { id: 'n1', norm: 'Norm 1', condition: null }, 
-        { id: 'cn1', norm: 'Cond Norm 1', condition: 'some-cond' }
-    ]);
-  });
-
-  test('renders "No program loaded" when phaseIds are empty', () => {
-    mockGetPhaseIds.mockReturnValue([]);
-    render(<MonitoringPage />);
-    expect(screen.getByText('No program loaded.')).toBeInTheDocument();
-  });
-
-  test('renders the dashboard with initial state', () => {
-    render(<MonitoringPage />);
-    
-    // Check Header
-    expect(screen.getByText('Phase 1:')).toBeInTheDocument();
-    expect(screen.getByText('Intro')).toBeInTheDocument();
-    
-    // Check Lists
-    expect(screen.getByText(/Goal 1/)).toBeInTheDocument(); 
-    
-    expect(screen.getByText('Trigger 1')).toBeInTheDocument();
-    expect(screen.getByText('Norm 1')).toBeInTheDocument();
-    expect(screen.getByText('Cond Norm 1')).toBeInTheDocument();
-  });
-
-  describe('Control Buttons', () => {
-    test('Pause calls API and updates UI', async () => {
-      render(<MonitoringPage />);
-      const pauseBtn = screen.getByText('❚❚');
-      
-      await act(async () => {
-        fireEvent.click(pauseBtn);
-      });
-
-      expect(MonitoringAPI.pauseExperiment).toHaveBeenCalled();
-      // Ensure local state toggled (we check if play button is now inactive style or pause active)
-    });
-
-    test('Play calls API and updates UI', async () => {
-      render(<MonitoringPage />);
-      const playBtn = screen.getByText('▶');
-      
-      await act(async () => {
-        fireEvent.click(playBtn);
-      });
-
-      expect(MonitoringAPI.playExperiment).toHaveBeenCalled();
-    });
-
-    test('Next Phase calls API', async () => {
-      render(<MonitoringPage />);
-      await act(async () => {
-        fireEvent.click(screen.getByText('⏭'));
-      });
-      expect(MonitoringAPI.nextPhase).toHaveBeenCalled();
-    });
-
-    test('Reset Experiment calls logic and resets state', async () => {
-      render(<MonitoringPage />);
-      
-      // Mock graph reducer return
-      (VisProg.graphReducer as jest.Mock).mockReturnValue([{ id: 'new-phase' }]);
-
-      await act(async () => {
-        fireEvent.click(screen.getByText('⟲'));
-      });
-
-      expect(VisProg.graphReducer).toHaveBeenCalled();
-      expect(mockSetProgramState).toHaveBeenCalledWith({ phases: [{ id: 'new-phase' }] });
-      expect(VisProg.runProgramm).toHaveBeenCalled();
-    });
-    
-    test('Reset Experiment handles errors gracefully', async () => {
-        const consoleSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
-        (VisProg.runProgramm as jest.Mock).mockRejectedValue(new Error('Fail'));
-        
-        render(<MonitoringPage />);
-        await act(async () => {
-            fireEvent.click(screen.getByText('⟲'));
-        });
-        
-        expect(consoleSpy).toHaveBeenCalledWith('Failed to reset program:', expect.any(Error));
-        consoleSpy.mockRestore();
-    });
-  });
-
-  describe('Stream Updates (useExperimentLogger)', () => {
-    test('Handles phase_update to next phase', () => {
-      render(<MonitoringPage />);
-      
-      expect(screen.getByText('Intro')).toBeInTheDocument(); // Phase 0
-
-      act(() => {
-        streamUpdateCallback({ type: 'phase_update', id: 'phase-2' });
-      });
-
-      expect(screen.getByText('Main')).toBeInTheDocument(); // Phase 1
-    });
-
-    test('Handles phase_update to "end"', () => {
-      render(<MonitoringPage />);
-      
-      act(() => {
-        streamUpdateCallback({ type: 'phase_update', id: 'end' });
-      });
-
-      expect(screen.getByText('Experiment finished')).toBeInTheDocument();
-      expect(screen.getByText('All phases have been successfully completed.')).toBeInTheDocument();
-    });
-
-    test('Handles phase_update with unknown ID gracefully', () => {
-      render(<MonitoringPage />);
-      act(() => {
-        streamUpdateCallback({ type: 'phase_update', id: 'unknown-phase' });
-      });
-      // Should remain on current phase
-      expect(screen.getByText('Intro')).toBeInTheDocument();
-    });
-
-    test('Handles goal_update: advances index and marks previous as achieved', () => {
-      render(<MonitoringPage />);
-      
-      // Initial: Goal 1 (index 0) is current.
-      // Send update for Goal 2 (index 1).
-      act(() => {
-        streamUpdateCallback({ type: 'goal_update', id: 'g2' });
-      });
-
-      // Goal 1 should now be marked achieved (passed via activeIds)
-      // Goal 2 should be current.
-      
-      // We can inspect the "StatusList" props implicitly by checking styling or indicators if not mocked,
-      // but since we render the full component, we check the class/text.
-      // Goal 1 should have checkmark (override logic puts checkmark for activeIds)
-      // The implementation details of StatusList show ✔️ for activeIds.
-      
-      const items = screen.getAllByRole('listitem');
-      // Helper to find checkmarks within items
-      expect(items[0]).toHaveTextContent('Goal 1');
-      // After update, g1 is active (achieved), g2 is current
-      // logic: loop i < gIndex (1). activeIds['g1'] = true.
-    });
-    
-    test('Handles goal_update with unknown ID', () => {
-        const warnSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
-        
-        render(<MonitoringPage />);
-        act(() => {
-            streamUpdateCallback({ type: 'goal_update', id: 'unknown-goal' });
-        });
-
-        expect(warnSpy).toHaveBeenCalledWith(expect.stringContaining('Goal unknown-goal not found'));
-        warnSpy.mockRestore();
-    });
-
-    test('Handles trigger_update', () => {
-      render(<MonitoringPage />);
-      
-      // Trigger 1 initially not achieved
-      act(() => {
-        streamUpdateCallback({ type: 'trigger_update', id: 't1', achieved: true });
-      });
-
-      // StatusList logic: if activeId is true, show ✔️
-      // We look for visual confirmation or check logic
-      const triggerList = screen.getByText('Triggers').parentElement;
-      expect(triggerList).toHaveTextContent('✔️'); // Assuming 't1' is the only trigger
-    });
-  });
-
-  describe('Status Updates (useStatusLogger)', () => {
-    test('Handles cond_norms_state_update', () => {
-      render(<MonitoringPage />);
-      
-      // Initial state: activeIds empty.
-      act(() => {
-        statusUpdateCallback({ 
-            type: 'cond_norms_state_update', 
-            norms: [{ id: 'cn1', active: true }] 
-        });
-      });
-
-      // Conditional Norm 1 should now be active
-      const cnList = screen.getByText('Conditional Norms').parentElement;
-      expect(cnList).toHaveTextContent('✔️');
-    });
-
-    test('Ignores status update if no changes detected', () => {
-       render(<MonitoringPage />);
-       // First update
-       act(() => {
-           statusUpdateCallback({ type: 'cond_norms_state_update', norms: [{ id: 'cn1', active: true }] });
-       });
-       
-       // Second identical update - strictly checking if this causes a rerender is hard in RTL,
-       // but we ensure no errors and state remains consistent.
-       act(() => {
-           statusUpdateCallback({ type: 'cond_norms_state_update', norms: [{ id: 'cn1', active: true }] });
-       });
-       
-       const cnList = screen.getByText('Conditional Norms').parentElement;
-       expect(cnList).toHaveTextContent('✔️');
-    });
-  });
-});
-
--- a/test/pages/monitoringPage/MonitoringPageAPI.test.ts
+++ b/test/pages/monitoringPage/MonitoringPageAPI.test.ts
@@ -1,229 +0,0 @@
-import { renderHook, act, cleanup } from '@testing-library/react';
-import { 
-    sendAPICall, 
-    nextPhase, 
-    resetPhase, 
-    pauseExperiment, 
-    playExperiment, 
-    useExperimentLogger, 
-    useStatusLogger 
-} from '../../../src/pages/MonitoringPage/MonitoringPageAPI';
-
-// --- MOCK EVENT SOURCE SETUP ---
-// This mocks the browser's EventSource so we can manually 'push' messages to our hooks
-const mockInstances: MockEventSource[] = [];
-
-class MockEventSource {
-  url: string;
-  onmessage: ((event: MessageEvent) => void) | null = null;
-  onerror: ((event: Event) => void) | null = null; // Added onerror support
-  closed = false;
-
-  constructor(url: string) {
-    this.url = url;
-    mockInstances.push(this);
-  }
-
-  sendMessage(data: string) {
-    if (this.onmessage) {
-      this.onmessage({ data } as MessageEvent);
-    }
-  }
-
-  triggerError(err: any) {
-    if (this.onerror) {
-        this.onerror(err);
-    }
-  }
-
-  close() {
-    this.closed = true;
-  }
-}
-
-// Mock global EventSource
-beforeAll(() => {
-  (globalThis as any).EventSource = jest.fn((url: string) => new MockEventSource(url));
-});
-
-// Mock global fetch
-beforeEach(() => {
-  globalThis.fetch = jest.fn(() =>
-    Promise.resolve({
-      ok: true,
-      json: () => Promise.resolve({ reply: 'ok' }),
-    })
-  ) as jest.Mock;
-});
-
-// Cleanup after every test
-afterEach(() => {
-  cleanup();
-  jest.restoreAllMocks();
-  mockInstances.length = 0;
-});
-
-describe('MonitoringPageAPI', () => {
-
-  describe('sendAPICall', () => {
-    test('sends correct POST request', async () => {
-      await sendAPICall('test_type', 'test_ctx');
-
-      expect(globalThis.fetch).toHaveBeenCalledWith(
-        'http://localhost:8000/button_pressed',
-        expect.objectContaining({
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ type: 'test_type', context: 'test_ctx' }),
-        })
-      );
-    });
-
-    test('appends endpoint if provided', async () => {
-      await sendAPICall('t', 'c', '/extra');
-
-      expect(globalThis.fetch).toHaveBeenCalledWith(
-        expect.stringContaining('/button_pressed/extra'),
-        expect.any(Object)
-      );
-    });
-
-    test('logs error on fetch network failure', async () => {
-      (globalThis.fetch as jest.Mock).mockRejectedValue('Network error');
-      const consoleSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
-
-      await sendAPICall('t', 'c');
-
-      expect(consoleSpy).toHaveBeenCalledWith('Failed to send api call:', 'Network error');
-    });
-
-    test('throws error if response is not ok', async () => {
-        (globalThis.fetch as jest.Mock).mockResolvedValue({ ok: false });
-        const consoleSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
-
-        await sendAPICall('t', 'c');
-        
-        expect(consoleSpy).toHaveBeenCalledWith('Failed to send api call:', expect.any(Error));
-    });
-  });
-
-  describe('Helper Functions', () => {
-    test('nextPhase sends correct params', async () => {
-      await nextPhase();
-      expect(globalThis.fetch).toHaveBeenCalledWith(
-        expect.any(String),
-        expect.objectContaining({ body: JSON.stringify({ type: 'next_phase', context: '' }) })
-      );
-    });
-
-    test('resetPhase sends correct params', async () => {
-      await resetPhase();
-      expect(globalThis.fetch).toHaveBeenCalledWith(
-        expect.any(String),
-        expect.objectContaining({ body: JSON.stringify({ type: 'reset_phase', context: '' }) })
-      );
-    });
-
-    test('pauseExperiment sends correct params', async () => {
-      await pauseExperiment();
-      expect(globalThis.fetch).toHaveBeenCalledWith(
-        expect.any(String),
-        expect.objectContaining({ body: JSON.stringify({ type: 'pause', context: 'true' }) })
-      );
-    });
-
-    test('playExperiment sends correct params', async () => {
-      await playExperiment();
-      expect(globalThis.fetch).toHaveBeenCalledWith(
-        expect.any(String),
-        expect.objectContaining({ body: JSON.stringify({ type: 'pause', context: 'false' }) })
-      );
-    });
-  });
-
-  describe('useExperimentLogger', () => {
-    test('connects to SSE and receives messages', () => {
-      const onUpdate = jest.fn();
-      
-      // Hook must be rendered to start the effect
-      renderHook(() => useExperimentLogger(onUpdate));
-
-      // Retrieve the mocked instance created by the hook
-      const eventSource = mockInstances[0];
-      expect(eventSource.url).toContain('/experiment_stream');
-
-      // Simulate incoming message
-      act(() => {
-        eventSource.sendMessage(JSON.stringify({ type: 'phase_update', id: '1' }));
-      });
-
-      expect(onUpdate).toHaveBeenCalledWith({ type: 'phase_update', id: '1' });
-    });
-
-    test('handles JSON parse errors in stream', () => {
-      const consoleSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
-      renderHook(() => useExperimentLogger());
-      const eventSource = mockInstances[0];
-
-      act(() => {
-        eventSource.sendMessage('invalid-json');
-      });
-
-      expect(consoleSpy).toHaveBeenCalledWith('Stream parse error:', expect.any(Error));
-    });
-    
-    
-
-    test('handles SSE connection error', () => {
-        const consoleSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
-        renderHook(() => useExperimentLogger());
-        const eventSource = mockInstances[0];
-  
-        act(() => {
-          eventSource.triggerError('Connection lost');
-        });
-  
-        expect(consoleSpy).toHaveBeenCalledWith('SSE Connection Error:', 'Connection lost');
-        expect(eventSource.closed).toBe(true);
-      });
-
-    test('closes EventSource on unmount', () => {
-      const { unmount } = renderHook(() => useExperimentLogger());
-      const eventSource = mockInstances[0];
-      const closeSpy = jest.spyOn(eventSource, 'close');
-
-      unmount();
-
-      expect(closeSpy).toHaveBeenCalled();
-      expect(eventSource.closed).toBe(true);
-    });
-  });
-
-  describe('useStatusLogger', () => {
-    test('connects to SSE and receives messages', () => {
-      const onUpdate = jest.fn();
-      renderHook(() => useStatusLogger(onUpdate));
-      const eventSource = mockInstances[0];
-
-      expect(eventSource.url).toContain('/status_stream');
-
-      act(() => {
-        eventSource.sendMessage(JSON.stringify({ some: 'data' }));
-      });
-
-      expect(onUpdate).toHaveBeenCalledWith({ some: 'data' });
-    });
-
-    test('handles JSON parse errors', () => {
-      const consoleSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
-      renderHook(() => useStatusLogger());
-      const eventSource = mockInstances[0];
-
-      act(() => {
-        eventSource.sendMessage('bad-data');
-      });
-
-      expect(consoleSpy).toHaveBeenCalledWith('Status stream error:', expect.any(Error));
-    });
-  });
-});
--- a/test/pages/monitoringPage/MonitoringPageComponents.test.tsx
+++ b/test/pages/monitoringPage/MonitoringPageComponents.test.tsx
@@ -1,226 +0,0 @@
-import React from 'react';
-import { render, screen, fireEvent, act } from '@testing-library/react';
-import '@testing-library/jest-dom';
-
-// Corrected Imports
-import { 
-  GestureControls, 
-  SpeechPresets, 
-  DirectSpeechInput, 
-  StatusList, 
-  RobotConnected 
-} from '../../../src/pages/MonitoringPage/MonitoringPageComponents';
-
-import * as MonitoringAPI from '../../../src/pages/MonitoringPage/MonitoringPageAPI';
-
-// Mock the API Call function with the correct path
-jest.mock('../../../src/pages/MonitoringPage/MonitoringPageAPI', () => ({
-  sendAPICall: jest.fn(),
-}));
-
-describe('MonitoringPageComponents', () => {
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
-  describe('GestureControls', () => {
-    test('renders and sends gesture command', () => {
-      render(<GestureControls />);
-      
-      fireEvent.change(screen.getByRole('combobox'), { 
-        target: { value: 'animations/Stand/Gestures/Hey_1' } 
-      });
-      
-      // Click button
-      fireEvent.click(screen.getByText('Actuate'));
-      
-      // Expect the API to be called with that new value
-      expect(MonitoringAPI.sendAPICall).toHaveBeenCalledWith('gesture', 'animations/Stand/Gestures/Hey_1');
-    });
-  });
-
-  describe('SpeechPresets', () => {
-    test('renders buttons and sends speech command', () => {
-      render(<SpeechPresets />);
-      
-      const btn = screen.getByText('"Hello, I\'m Pepper"');
-      fireEvent.click(btn);
-      
-      expect(MonitoringAPI.sendAPICall).toHaveBeenCalledWith('speech', "Hello, I'm Pepper");
-    });
-  });
-
-  describe('DirectSpeechInput', () => {
-    test('inputs text and sends on button click', () => {
-      render(<DirectSpeechInput />);
-      const input = screen.getByPlaceholderText('Type message...');
-      
-      fireEvent.change(input, { target: { value: 'Custom text' } });
-      fireEvent.click(screen.getByText('Send'));
-      
-      expect(MonitoringAPI.sendAPICall).toHaveBeenCalledWith('speech', 'Custom text');
-      expect(input).toHaveValue(''); // Should clear
-    });
-
-    test('sends on Enter key', () => {
-        render(<DirectSpeechInput />);
-        const input = screen.getByPlaceholderText('Type message...');
-        
-        fireEvent.change(input, { target: { value: 'Enter text' } });
-        fireEvent.keyDown(input, { key: 'Enter', code: 'Enter' });
-        
-        expect(MonitoringAPI.sendAPICall).toHaveBeenCalledWith('speech', 'Enter text');
-      });
-  
-      test('does not send empty text', () => {
-        render(<DirectSpeechInput />);
-        fireEvent.click(screen.getByText('Send'));
-        expect(MonitoringAPI.sendAPICall).not.toHaveBeenCalled();
-      });
-  });
-
-  describe('StatusList', () => {
-    const mockSet = jest.fn();
-    const items = [
-      { id: '1', name: 'Item 1' },
-      { id: '2', name: 'Item 2' }
-    ];
-
-    test('renders list items', () => {
-      render(<StatusList title="Test List" items={items} type="goal" activeIds={{}} />);
-      expect(screen.getByText('Test List')).toBeInTheDocument();
-      expect(screen.getByText('Item 1')).toBeInTheDocument();
-    });
-
-    test('Goals: click override on inactive item calls API', () => {
-      render(
-        <StatusList 
-          title="Goals" 
-          items={items} 
-          type="goal" 
-          activeIds={{}} 
-          setActiveIds={mockSet} 
-        />
-      );
-      
-      // Click the X (inactive)
-      const indicator = screen.getAllByText('❌')[0];
-      fireEvent.click(indicator);
-      
-      expect(MonitoringAPI.sendAPICall).toHaveBeenCalledWith('override', '1');
-      expect(mockSet).toHaveBeenCalled();
-    });
-
-    test('Conditional Norms: click override on ACTIVE item unachieves', () => {
-        render(
-          <StatusList 
-            title="CN" 
-            items={items} 
-            type="cond_norm" 
-            activeIds={{ '1': true }} 
-          />
-        );
-        
-        const indicator = screen.getByText('✔️'); // It is active
-        fireEvent.click(indicator);
-        
-        expect(MonitoringAPI.sendAPICall).toHaveBeenCalledWith('override_unachieve', '1');
-      });
-  
-      test('Current Goal highlighting', () => {
-          render(
-              <StatusList 
-                title="Goals" 
-                items={items} 
-                type="goal" 
-                activeIds={{}} 
-                currentGoalIndex={0}
-              />
-            );
-          // Using regex to handle the "(Current)" text
-          expect(screen.getByText(/Item 1/)).toBeInTheDocument();
-          expect(screen.getByText(/(Current)/)).toBeInTheDocument();
-      });
-  });
-
-  describe('RobotConnected', () => {
-    let mockEventSource: any;
-
-    beforeAll(() => {
-        Object.defineProperty(window, 'EventSource', {
-            writable: true,
-            value: jest.fn().mockImplementation(() => ({
-                close: jest.fn(),
-                onmessage: null,
-            })),
-        });
-    });
-
-    beforeEach(() => {
-        mockEventSource = new window.EventSource('url');
-        (window.EventSource as unknown as jest.Mock).mockClear();
-        (window.EventSource as unknown as jest.Mock).mockImplementation(() => mockEventSource);
-    });
-
-    test('displays disconnected initially', () => {
-        render(<RobotConnected />);
-        expect(screen.getByText('● Robot is disconnected')).toBeInTheDocument();
-    });
-
-    test('updates to connected when SSE receives true', async () => {
-        render(<RobotConnected />);
-        
-        act(() => {
-            if(mockEventSource.onmessage) {
-                mockEventSource.onmessage({ data: 'true' } as MessageEvent);
-            }
-        });
-
-        expect(await screen.findByText('● Robot is connected')).toBeInTheDocument();
-    });
-    
-    test('handles invalid JSON gracefully', async () => {
-        const consoleSpy = jest.spyOn(console, 'log').mockImplementation(() => {});
-        render(<RobotConnected />);
-        
-        act(() => {
-            if(mockEventSource.onmessage) {
-                mockEventSource.onmessage({ data: 'invalid-json' } as MessageEvent);
-            }
-        });
-        
-        // Should catch error and log it, state remains disconnected
-        expect(consoleSpy).toHaveBeenCalledWith('Ping message not in correct format:', 'invalid-json');
-        consoleSpy.mockRestore();
-    });
-
-    test('logs error if state update fails (inner catch block)', async () => {
-        const consoleSpy = jest.spyOn(console, 'log').mockImplementation(() => {});
-        
-        // 1. Force useState to return a setter that throws an error
-        const mockThrowingSetter = jest.fn(() => { throw new Error('Forced State Error'); });
-        
-        // We use mockImplementation to return [currentState, throwingSetter]
-        const useStateSpy = jest.spyOn(React, 'useState')
-            .mockImplementation(() => [null, mockThrowingSetter]);
-
-        render(<RobotConnected />);
-        
-        // 2. Trigger the event with VALID JSON ("true")
-        // This passes the first JSON.parse try/catch, 
-        // but fails when calling setConnected(true) because of our mock.
-        await act(async () => {
-            if (mockEventSource.onmessage) {
-                mockEventSource.onmessage({ data: 'true' } as MessageEvent);
-            }
-        });
-
-        // 3. Verify the specific error log from line 205
-        expect(consoleSpy).toHaveBeenCalledWith("couldnt extract connected from incoming ping data");
-        
-        // Cleanup spies
-        useStateSpy.mockRestore();
-        consoleSpy.mockRestore();
-    });
-  });
-});
--- a/test/pages/simpleProgram/SimpleProgram.tsx
+++ b/test/pages/simpleProgram/SimpleProgram.tsx
@@ -1,83 +0,0 @@
-import { render, screen, fireEvent } from "@testing-library/react";
-import SimpleProgram from "../../../src/pages/SimpleProgram/SimpleProgram";
-import useProgramStore from "../../../src/utils/programStore";
-
-/**
- * Helper to preload the program store before rendering.
- */
-function loadProgram(phases: Record<string, unknown>[]) {
-  useProgramStore.getState().setProgramState({ phases });
-}
-
-describe("SimpleProgram", () => {
-  beforeEach(() => {
-    loadProgram([]);
-  });
-
-  test("shows empty state when no program is loaded", () => {
-    render(<SimpleProgram />);
-    expect(screen.getByText("No program loaded.")).toBeInTheDocument();
-  });
-
-  test("renders first phase content", () => {
-    loadProgram([
-      {
-        id: "phase-1",
-        norms: [{ id: "n1", norm: "Be polite" }],
-        goals: [{ id: "g1", description: "Finish task", achieved: true }],
-        triggers: [{ id: "t1", label: "Keyword trigger" }],
-      },
-    ]);
-
-    render(<SimpleProgram />);
-
-    expect(screen.getByText("Phase 1 / 1")).toBeInTheDocument();
-    expect(screen.getByText("Be polite")).toBeInTheDocument();
-    expect(screen.getByText("Finish task")).toBeInTheDocument();
-    expect(screen.getByText("Keyword trigger")).toBeInTheDocument();
-  });
-
-  test("allows navigating between phases", () => {
-    loadProgram([
-      {
-        id: "phase-1",
-        norms: [],
-        goals: [],
-        triggers: [],
-      },
-      {
-        id: "phase-2",
-        norms: [{ id: "n2", norm: "Be careful" }],
-        goals: [],
-        triggers: [],
-      },
-    ]);
-
-    render(<SimpleProgram />);
-
-    expect(screen.getByText("Phase 1 / 2")).toBeInTheDocument();
-
-    fireEvent.click(screen.getByText("Next ▶"));
-
-    expect(screen.getByText("Phase 2 / 2")).toBeInTheDocument();
-    expect(screen.getByText("Be careful")).toBeInTheDocument();
-  });
-
-  test("prev button is disabled on first phase", () => {
-    loadProgram([
-      { id: "phase-1", norms: [], goals: [], triggers: [] },
-    ]);
-
-    render(<SimpleProgram />);
-    expect(screen.getByText("◀ Prev")).toBeDisabled();
-  });
-
-  test("next button is disabled on last phase", () => {
-    loadProgram([
-      { id: "phase-1", norms: [], goals: [], triggers: [] },
-    ]);
-
-    render(<SimpleProgram />);
-    expect(screen.getByText("Next ▶")).toBeDisabled();
-  });
-});
--- a/test/pages/visProgPage/visualProgrammingUI/EditorUndoRedo.test.ts
+++ b/test/pages/visProgPage/visualProgrammingUI/EditorUndoRedo.test.ts
@@ -34,10 +34,17 @@ describe("UndoRedo Middleware", () => {
            type: 'default',
            position: {x: 0, y: 0},
            data: {label: 'A'}
-          },
+          }
        ],
-        edges: []
+        edges: [],
+        warnings: {
+          warningRegistry: new Map(),
+          severityIndex: new Map()
+        }
      }],
+      ruleRegistry: new Map(),
+      editorWarningRegistry: new Map(),
+      severityIndex: new Map()
    });

    act(() => {
@@ -53,7 +60,11 @@ describe("UndoRedo Middleware", () => {
        position: {x: 0, y: 0},
        data: {label: 'A'}
      }],
-      edges: []
+      edges: [],
+      warnings: {
+        warningRegistry: {},
+        severityIndex: {}
+      }
    });
    expect(state.future).toEqual([]);
  });
@@ -80,7 +91,9 @@ describe("UndoRedo Middleware", () => {
        position: {x: 0, y: 0},
        data: {label: 'A'}
      }],
-      edges: []
+      edges: [],
+      editorWarningRegistry: new Map(),
+      severityIndex: new Map()
    });

    act(() => {
@@ -114,7 +127,11 @@ describe("UndoRedo Middleware", () => {
        position: {x: 0, y: 0},
        data: {label: 'B'}
      }],
-      edges: []
+      edges: [],
+      warnings: {
+        warningRegistry: {},
+        severityIndex: {}
+      }
    });
  });

@@ -140,7 +157,9 @@ describe("UndoRedo Middleware", () => {
        position: {x: 0, y: 0},
        data: {label: 'A'}
      }],
-      edges: []
+      edges: [],
+      editorWarningRegistry: new Map(),
+      severityIndex: new Map()
    });

    act(() => {
@@ -176,7 +195,11 @@ describe("UndoRedo Middleware", () => {
        position: {x: 0, y: 0},
        data: {label: 'A'}
      }],
-      edges: []
+      edges: [],
+      warnings: {
+        warningRegistry: {},
+        severityIndex: {}
+      }
    });
  });

@@ -199,7 +222,9 @@ describe("UndoRedo Middleware", () => {
        position: {x: 0, y: 0},
        data: {label: 'A'}
      }],
-      edges: []
+      edges: [],
+      editorWarningRegistry: new Map(),
+      severityIndex: new Map()
    });

    act(() => { store.getState().beginBatchAction(); });
--- a/test/pages/visProgPage/visualProgrammingUI/VisProgStores.test.tsx
+++ b/test/pages/visProgPage/visualProgrammingUI/VisProgStores.test.tsx
@@ -1,5 +1,9 @@
 import {act} from '@testing-library/react';
-import type {Connection, Edge, Node} from "@xyflow/react";
+import {
+  type Connection,
+  type Edge,
+  type Node,
+} from "@xyflow/react";
 import type {HandleRule, RuleResult} from "../../../../src/pages/VisProgPage/visualProgrammingUI/HandleRuleLogic.ts";
 import { NodeDisconnections } from "../../../../src/pages/VisProgPage/visualProgrammingUI/NodeRegistry.ts";
 import type {PhaseNodeData} from "../../../../src/pages/VisProgPage/visualProgrammingUI/nodes/PhaseNode.tsx";
@@ -398,6 +402,7 @@ describe('FlowStore Functionality', () => {
          }]
      });

+
      act(()=> {
        deleteNode(nodeId);
      });
--- a/test/pages/visProgPage/visualProgrammingUI/components/EditorWarnings.test.tsx
+++ b/test/pages/visProgPage/visualProgrammingUI/components/EditorWarnings.test.tsx
@@ -0,0 +1,152 @@
+import { describe, it, expect} from '@jest/globals';
+import {
+  type EditorWarning, warningSummary
+} from "../../../../../src/pages/VisProgPage/visualProgrammingUI/components/EditorWarnings.tsx";
+import useFlowStore from "../../../../../src/pages/VisProgPage/visualProgrammingUI/VisProgStores.tsx";
+
+
+function makeWarning(
+  overrides?: Partial<EditorWarning>
+): EditorWarning {
+  return {
+    scope: { id: 'node-1' },
+    type: 'MISSING_INPUT',
+    severity: 'ERROR',
+    description: 'Missing input',
+    ...overrides,
+  };
+}
+
+describe("editorWarnings", () => {
+  describe('registerWarning', () => {
+    it('registers a node-level warning', () => {
+      const warning = makeWarning();
+      const {registerWarning, getWarnings} = useFlowStore.getState()
+      registerWarning(warning);
+
+      const warnings = getWarnings();
+      expect(warnings).toHaveLength(1);
+      expect(warnings[0]).toEqual(warning);
+    });
+
+    it('registers a handle-level warning with scoped key', () => {
+      const warning = makeWarning({
+        scope: { id: 'node-1', handleId: 'input-1' },
+      });
+      const {registerWarning} = useFlowStore.getState()
+      registerWarning(warning);
+      const nodeWarnings = useFlowStore.getState().editorWarningRegistry.get('node-1');
+      expect(nodeWarnings?.has('MISSING_INPUT:input-1') === true).toBe(true);
+    });
+
+    it('updates severityIndex correctly', () => {
+      const {registerWarning, severityIndex} = useFlowStore.getState()
+      registerWarning(makeWarning());
+      expect(severityIndex.get('ERROR')!.size).toBe(1);
+    });
+  });
+
+  describe('getWarningsBySeverity', () => {
+    it('returns only warnings of requested severity', () => {
+      const {registerWarning, getWarningsBySeverity} = useFlowStore.getState()
+      registerWarning(
+        makeWarning({ severity: 'ERROR' })
+      );
+
+      registerWarning(
+        makeWarning({
+          severity: 'WARNING',
+          type: 'MISSING_OUTPUT',
+        })
+      );
+
+      const errors = getWarningsBySeverity('ERROR');
+      const warnings = getWarningsBySeverity('WARNING');
+
+      expect(errors).toHaveLength(1);
+      expect(warnings).toHaveLength(1);
+    });
+  });
+
+  describe('isProgramValid', () => {
+    it('returns true when no ERROR warnings exist', () => {
+      expect(useFlowStore.getState().isProgramValid()).toBe(true);
+    });
+
+    it('returns false when ERROR warnings exist', () => {
+      const {registerWarning, isProgramValid} = useFlowStore.getState()
+      registerWarning(makeWarning());
+      expect(isProgramValid()).toBe(false);
+    });
+  });
+
+  describe('unregisterWarning', () => {
+    it('removes warning from registry and severityIndex', () => {
+      const warning = makeWarning();
+      const {
+        registerWarning,
+        getWarnings,
+        unregisterWarning,
+        severityIndex
+      } = useFlowStore.getState()
+
+      registerWarning(warning);
+
+      unregisterWarning('node-1', 'MISSING_INPUT');
+
+      expect(getWarnings()).toHaveLength(0);
+      expect(severityIndex.get('ERROR')!.size).toBe(0);
+    });
+
+    it('does nothing if warning does not exist', () => {
+      expect(() =>
+        useFlowStore.getState().unregisterWarning('node-1', 'DOES_NOT_EXIST')
+      ).not.toThrow();
+    });
+  });
+
+  describe('unregisterWarningsForId', () => {
+    it('removes all warnings for a node', () => {
+      const {registerWarning, unregisterWarningsForId, getWarnings, severityIndex} = useFlowStore.getState()
+      registerWarning(
+        makeWarning({
+          scope: { id: 'node-1', handleId: 'h1' },
+        })
+      );
+
+      registerWarning(
+        makeWarning({
+          scope: { id: 'node-1' },
+          type: 'MISSING_OUTPUT',
+          severity: 'WARNING',
+        })
+      );
+
+      unregisterWarningsForId('node-1');
+
+      expect(getWarnings()).toHaveLength(0);
+      expect(
+        severityIndex.get('ERROR')!.size
+      ).toBe(0);
+      expect(
+        severityIndex.get('WARNING')!.size
+      ).toBe(0);
+    });
+  });
+
+  describe('warningSummary', () => {
+    it('returns correct counts and validity', () => {
+      const {registerWarning} = useFlowStore.getState()
+      registerWarning(
+        makeWarning({ severity: 'ERROR' })
+      );
+
+      const summary = warningSummary();
+
+      expect(summary.error).toBe(1);
+      expect(summary.warning).toBe(0);
+      expect(summary.info).toBe(0);
+      expect(summary.isValid).toBe(false);
+    });
+  });
+})
--- a/test/pages/visProgPage/visualProgrammingUI/components/WarningSidebar.test.tsx
+++ b/test/pages/visProgPage/visualProgrammingUI/components/WarningSidebar.test.tsx
@@ -0,0 +1,138 @@
+import {fireEvent, render, screen} from '@testing-library/react';
+import '@testing-library/jest-dom';
+import {useReactFlow, useStoreApi} from "@xyflow/react";
+import {
+  type EditorWarning,
+  globalWarning
+} from "../../../../../src/pages/VisProgPage/visualProgrammingUI/components/EditorWarnings.tsx";
+import {WarningsSidebar} from "../../../../../src/pages/VisProgPage/visualProgrammingUI/components/WarningSidebar.tsx";
+import useFlowStore from "../../../../../src/pages/VisProgPage/visualProgrammingUI/VisProgStores.tsx";
+
+
+jest.mock('@xyflow/react', () => ({
+  useReactFlow: jest.fn(),
+  useStoreApi: jest.fn(),
+}));
+
+jest.mock('../../../../../src/pages/VisProgPage/visualProgrammingUI/VisProgStores.tsx');
+
+function makeWarning(
+  overrides?: Partial<EditorWarning>
+): EditorWarning {
+  return {
+    scope: { id: 'node-1' },
+    type: 'MISSING_INPUT',
+    severity: 'ERROR',
+    description: 'Missing input',
+    ...overrides,
+  };
+}
+
+describe('WarningsSidebar', () => {
+  let getStateSpy: jest.SpyInstance;
+
+  const setCenter = jest.fn(() => Promise.resolve());
+  const getNode = jest.fn();
+  const addSelectedNodes = jest.fn();
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+
+    // React Flow hooks
+    (useReactFlow as jest.Mock).mockReturnValue({
+      getNode,
+      setCenter,
+    });
+    (useStoreApi as jest.Mock).mockReturnValue({
+      getState: () => ({ addSelectedNodes }),
+    });
+
+    // Use spyOn to override store
+    const mockWarnings = [
+      makeWarning({ description: 'Node warning', scope: { id: 'node-1' } }),
+      makeWarning({
+        description: 'Global warning',
+        scope: { id: globalWarning },
+        type: 'INCOMPLETE_PROGRAM',
+        severity: 'WARNING',
+      }),
+      makeWarning({
+        description: 'Info warning',
+        scope: { id: 'node-2' },
+        severity: 'INFO',
+      }),
+    ];
+
+    getStateSpy = jest
+      .spyOn(useFlowStore, 'getState')
+      .mockReturnValue({
+        getWarnings: () => mockWarnings,
+      } as any);
+  });
+
+  afterEach(() => {
+    getStateSpy.mockRestore();
+  });
+
+  it('renders warnings header', () => {
+    render(<WarningsSidebar />);
+    expect(screen.getByText('Warnings')).toBeInTheDocument();
+  });
+
+  it('renders all warning descriptions', () => {
+    render(<WarningsSidebar />);
+    expect(screen.getByText('Node warning')).toBeInTheDocument();
+    expect(screen.getByText('Global warning')).toBeInTheDocument();
+    expect(screen.getByText('Info warning')).toBeInTheDocument();
+  });
+
+  it('splits global and other warnings correctly', () => {
+    render(<WarningsSidebar />);
+    expect(screen.getByText('global:')).toBeInTheDocument();
+    expect(screen.getByText('other:')).toBeInTheDocument();
+  });
+
+  it('shows empty state when no warnings exist', () => {
+    getStateSpy.mockReturnValueOnce({
+      getWarnings: () => [],
+    } as any);
+
+    render(<WarningsSidebar />);
+    expect(screen.getByText('No warnings!')).toBeInTheDocument();
+  });
+
+  it('filters by severity', () => {
+    render(<WarningsSidebar />);
+    fireEvent.click(screen.getByText('ERROR'));
+
+    expect(screen.getByText('Node warning')).toBeInTheDocument();
+    expect(screen.queryByText('Global warning')).not.toBeInTheDocument();
+    expect(screen.queryByText('Info warning')).not.toBeInTheDocument();
+  });
+
+  it('filters INFO severity correctly', () => {
+    render(<WarningsSidebar />);
+    fireEvent.click(screen.getByText('INFO'));
+
+    expect(screen.getByText('Info warning')).toBeInTheDocument();
+    expect(screen.queryByText('Node warning')).not.toBeInTheDocument();
+    expect(screen.queryByText('Global warning')).not.toBeInTheDocument();
+  });
+
+  it('clicking global warning does NOT jump', () => {
+    render(<WarningsSidebar />);
+    fireEvent.click(screen.getByText('Global warning'));
+
+    expect(setCenter).not.toHaveBeenCalled();
+    expect(addSelectedNodes).not.toHaveBeenCalled();
+  });
+
+  it('does nothing if node does not exist', () => {
+    getNode.mockReturnValue(undefined);
+
+    render(<WarningsSidebar />);
+    fireEvent.click(screen.getByText('Node warning'));
+
+    expect(setCenter).not.toHaveBeenCalled();
+  });
+});
--- a/test/pages/visProgPage/visualProgrammingUI/nodes/TriggerNode.test.tsx
+++ b/test/pages/visProgPage/visualProgrammingUI/nodes/TriggerNode.test.tsx
@@ -14,7 +14,7 @@ import { BasicBeliefNodeDefaults } from '../../../../../src/pages/VisProgPage/vi
 import { defaultPlan } from '../../../../../src/pages/VisProgPage/visualProgrammingUI/components/Plan.default.ts';
 import { NormNodeDefaults } from '../../../../../src/pages/VisProgPage/visualProgrammingUI/nodes/NormNode.default.ts';
 import { GoalNodeDefaults } from '../../../../../src/pages/VisProgPage/visualProgrammingUI/nodes/GoalNode.default.ts';
-import { act } from '@testing-library/react';
+import { act } from 'react-dom/test-utils';

 describe('TriggerNode', () => {

@@ -137,6 +137,7 @@ describe('TriggerNode', () => {
    });
  });

+
  describe('TriggerConnects Function', () => {
    it('should correctly remove a goal from the triggers plan after it has been disconnected', () => {
      // first, define the goal node and trigger node.
@@ -161,6 +162,7 @@ describe('TriggerNode', () => {
      act(() => {
        useFlowStore.getState().onConnect({ source: 'g-1', target: 'trigger-1', sourceHandle: null, targetHandle: null });
      });
+
      // expect the goal id to be part of a goal step of the plan.
      let updatedTrigger = useFlowStore.getState().nodes.find((n) => n.id === 'trigger-1');
      expect(updatedTrigger?.data.plan).toBeDefined();
@@ -179,4 +181,4 @@ describe('TriggerNode', () => {
      expect(stillHas).toBeUndefined();
    });
  });
- });
+});
--- a/test/setupFlowTests.ts
+++ b/test/setupFlowTests.ts
@@ -1,5 +1,9 @@
 import '@testing-library/jest-dom';
 import { cleanup } from '@testing-library/react';
+import {
+  type CompositeWarningKey,
+  type SeverityIndex,
+} from "../src/pages/VisProgPage/visualProgrammingUI/components/EditorWarnings.tsx";
 import useFlowStore from '../src/pages/VisProgPage/visualProgrammingUI/VisProgStores.tsx';

 if (!globalThis.structuredClone) {
@@ -69,8 +73,6 @@ export const mockReactFlow = () => {

 };

-
-
 beforeAll(() => {
  useFlowStore.setState({
    nodes: [],
@@ -79,7 +81,13 @@ beforeAll(() => {
    future: [],
    isBatchAction: false,
    edgeReconnectSuccessful: true,
-    ruleRegistry: new Map()
+    ruleRegistry: new Map(),
+    editorWarningRegistry: new Map(),
+    severityIndex: new Map([
+      ['INFO', new Set<CompositeWarningKey>()],
+      ['WARNING', new Set<CompositeWarningKey>()],
+      ['ERROR', new Set<CompositeWarningKey>()],
+    ]) as SeverityIndex,
  });
 });

@@ -92,7 +100,13 @@ afterEach(() => {
    future: [],
    isBatchAction: false,
    edgeReconnectSuccessful: true,
-    ruleRegistry: new Map()
+    ruleRegistry: new Map(),
+    editorWarningRegistry: new Map(),
+    severityIndex: new Map([
+      ['INFO', new Set<CompositeWarningKey>()],
+      ['WARNING', new Set<CompositeWarningKey>()],
+      ['ERROR', new Set<CompositeWarningKey>()],
+    ]) as SeverityIndex,
  });
 });

--- a/test/test-utils/test-utils.tsx
+++ b/test/test-utils/test-utils.tsx
@@ -2,6 +2,9 @@
 import { render, type RenderOptions } from '@testing-library/react';
 import { type ReactElement, type ReactNode } from 'react';
 import { ReactFlowProvider } from '@xyflow/react';
+import {mockReactFlow} from "../setupFlowTests.ts";
+
+mockReactFlow();

 /**
 * Custom render function that wraps components with necessary providers
--- a/test/utils/capitalize.test.ts
+++ b/test/utils/capitalize.test.ts
@@ -1,34 +0,0 @@
-import capitalize from "../../src/utils/capitalize.ts";
-
-describe('capitalize', () => {
-  it('capitalizes the first letter of a lowercase word', () => {
-    expect(capitalize('hello')).toBe('Hello');
-  });
-
-  it('keeps the first letter capitalized if already uppercase', () => {
-    expect(capitalize('Hello')).toBe('Hello');
-  });
-
-  it('handles single character strings', () => {
-    expect(capitalize('a')).toBe('A');
-    expect(capitalize('A')).toBe('A');
-  });
-
-  it('returns empty string for empty input', () => {
-    expect(capitalize('')).toBe('');
-  });
-
-  it('only capitalizes the first letter, leaving the rest unchanged', () => {
-    expect(capitalize('hELLO')).toBe('HELLO');
-    expect(capitalize('hello world')).toBe('Hello world');
-  });
-
-  it('handles strings starting with numbers', () => {
-    expect(capitalize('123abc')).toBe('123abc');
-  });
-
-  it('handles strings starting with special characters', () => {
-    expect(capitalize('!hello')).toBe('!hello');
-    expect(capitalize(' hello')).toBe(' hello');
-  });
-});
--- a/test/utils/delayedResolve.test.ts
+++ b/test/utils/delayedResolve.test.ts
@@ -1,77 +0,0 @@
-import { describe, it, expect, beforeEach, afterEach } from '@jest/globals';
-import delayedResolve from "../../src/utils/delayedResolve.ts";
-
-describe('delayedResolve', () => {
-  beforeEach(() => {
-    jest.useFakeTimers();
-  });
-
-  afterEach(() => {
-    jest.useRealTimers();
-  });
-
-  it('returns the resolved value of the promise', async () => {
-    const resultPromise = delayedResolve(Promise.resolve('hello'), 100);
-    await jest.advanceTimersByTimeAsync(100);
-    expect(await resultPromise).toBe('hello');
-  });
-
-  it('waits at least minDelayMs before resolving', async () => {
-    let resolved = false;
-    const resultPromise = delayedResolve(Promise.resolve('fast'), 100);
-    resultPromise.then(() => { resolved = true; });
-
-    await jest.advanceTimersByTimeAsync(50);
-    expect(resolved).toBe(false);
-
-    await jest.advanceTimersByTimeAsync(50);
-    expect(resolved).toBe(true);
-  });
-
-  it('resolves immediately after slow promise if it exceeds minDelayMs', async () => {
-    let resolved = false;
-    const slowPromise = new Promise<string>(resolve =>
-      setTimeout(() => resolve('slow'), 150)
-    );
-    const resultPromise = delayedResolve(slowPromise, 50);
-    resultPromise.then(() => { resolved = true; });
-
-    await jest.advanceTimersByTimeAsync(50);
-    expect(resolved).toBe(false);
-
-    await jest.advanceTimersByTimeAsync(100);
-    expect(resolved).toBe(true);
-    expect(await resultPromise).toBe('slow');
-  });
-
-  it('propagates rejections from the promise', async () => {
-    const error = new Error('test error');
-    const rejectedPromise = Promise.reject(error);
-
-    const resultPromise = delayedResolve(rejectedPromise, 100);
-    const assertion = expect(resultPromise).rejects.toThrow('test error');
-
-    await jest.advanceTimersByTimeAsync(100);
-
-    await assertion;
-  });
-
-  it('works with different value types', async () => {
-    const test = async <T>(value: T) => {
-      const resultPromise = delayedResolve(Promise.resolve(value), 10);
-      await jest.advanceTimersByTimeAsync(10);
-      return resultPromise;
-    };
-
-    expect(await test(42)).toBe(42);
-    expect(await test({ foo: 'bar' })).toEqual({ foo: 'bar' });
-    expect(await test([1, 2, 3])).toEqual([1, 2, 3]);
-    expect(await test(null)).toBeNull();
-  });
-
-  it('handles zero delay', async () => {
-    const resultPromise = delayedResolve(Promise.resolve('instant'), 0);
-    await jest.advanceTimersByTimeAsync(0);
-    expect(await resultPromise).toBe('instant');
-  });
-});
--- a/test/utils/programStore.test.ts
+++ b/test/utils/programStore.test.ts
@@ -113,31 +113,4 @@ describe('useProgramStore', () => {
    // store should NOT change
    expect(storedProgram.phases[0]['norms']).toHaveLength(1);
  });
-});
-
-it('should return the names of all phases in the program', () => {
-    // Define a program specifically with names for this test
-    const programWithNames: ReducedProgram = {
-      phases: [
-        {
-          id: 'phase-1',
-          name: 'Introduction Phase', // Assuming the property is 'name'
-          norms: [],
-          goals: [],
-          triggers: [],
-        },
-        {
-          id: 'phase-2',
-          name: 'Execution Phase',
-          norms: [],
-          goals: [],
-          triggers: [],
-        },
-      ],
-    };
-
-    useProgramStore.getState().setProgramState(programWithNames);
-
-    const phaseNames = useProgramStore.getState().getPhaseNames();
-    expect(phaseNames).toEqual(['Introduction Phase', 'Execution Phase']);
-  });
+});
Author	SHA1	Message	Date
JGerla	a85dbeaca6	refactor: adapted to fit the split made in monitoringPage ref: N25B-450	2026-01-27 10:47:00 +01:00
JGerla	53568476d5	feat: added warnings to inferredBeliefNodes ref: N25B-450	2026-01-23 18:30:26 +01:00
JGerla	58bd57818e	Merge branch 'dev' into feat/editor-user-feedback # Conflicts: # src/pages/VisProgPage/VisProg.tsx # src/pages/VisProgPage/visualProgrammingUI/VisProgStores.tsx # src/pages/VisProgPage/visualProgrammingUI/nodes/BasicBeliefNode.tsx # src/pages/VisProgPage/visualProgrammingUI/nodes/NormNode.tsx # src/pages/VisProgPage/visualProgrammingUI/nodes/TriggerNode.tsx	2026-01-23 18:23:46 +01:00
JGerla	ee79660276	feat: added documentation comments ref: N25B-450	2026-01-23 18:18:08 +01:00
JGerla	85b84c2281	feat: added visibility toggle with autoHide option ref: N25B-450	2026-01-23 17:10:48 +01:00
Twirre	f9e0eb95f8	Merge branch 'feat/add-inferred-belief-node' into 'dev' feat: added an inferred belief node to the editor See merge request ics/sp/2025/n25b/pepperplus-ui!42	2026-01-23 12:57:35 +00:00
Gerla, J. (Justin)	47c5e94b8f	feat: added an inferred belief node to the editor	2026-01-23 12:57:34 +00:00
JGerla	820884f8aa	fix: updated styles to work with darkMode ref: N25B-450	2026-01-23 11:45:08 +01:00
Pim Hutting	b17d1e7618	Merge branch 'fix/correct-capitalization' into 'dev' chore: fix the capitalization of 3 characters to make sure they match. :) See merge request ics/sp/2025/n25b/pepperplus-ui!46	2026-01-23 10:42:36 +00:00
JGerla	641d794cf0	fix: updated styles to work with darkMode ref: N25B-450	2026-01-23 11:42:06 +01:00
Björn Otgaar	ec211ccbc3	chore: fix the capitalization of 3 characters to make sure they match. :)	2026-01-23 11:25:30 +01:00
JGerla	7757a04694	fix: fixed warning for missing plan in goal ref: N25B-450	2026-01-22 20:34:48 +01:00
JGerla	2a6ead352d	feat: added warning for missing plan in goal ref: N25B-450	2026-01-22 20:34:20 +01:00
JGerla	274ffb0238	fix: fixed bug with warning rendering in the sidebar ref: N25B-450	2026-01-22 18:19:36 +01:00
JGerla	a00fd02634	fix: fixed runProgram button being disabled if program is invalid ref: N25B-450	2026-01-22 17:55:57 +01:00
JGerla	f6b692e420	test: removed test, as it can be tested manually with better accuracy and the test was causing issues instead of verifying functionality ref: N25B-450	2026-01-22 16:28:36 +01:00
JGerla	2cbd905f0b	style: updated comment ref: N25B-450	2026-01-22 16:18:07 +01:00
JGerla	84d9cbb19d	fix: fixed centering for jumptonode from warningSidebar ref: N25B-450	2026-01-22 16:14:46 +01:00
JGerla	e5b438c17e	fix: fixed tests ref: N25B-450	2026-01-22 14:21:03 +01:00
JGerla	64dcdc49b3	fix: added missing key attribute to the warningListItem ref: N25B-450	2026-01-22 13:56:35 +01:00
JGerla	9c64455a19	test: added tests for the warningSidebar ref: N25B-450	2026-01-22 13:54:24 +01:00
JGerla	9f359de953	test: added tests for editorwarnings ref: N25B-450	2026-01-22 13:31:02 +01:00
JGerla	9d2f5127c1	fix: fixed incorrect warningkey creation in unregisterWarningsForId ref: N25B-450	2026-01-22 13:09:44 +01:00
JGerla	bb053fda21	feat: added title based tooltips and updated handle styling to reflect in and output handles ref: N25B-450	2026-01-22 13:04:56 +01:00
JGerla	f92467b409	Merge branch 'dev' into feat/editor-user-feedback	2026-01-22 12:19:20 +01:00
JGerla	c9c7f55aa0	feat: removed usage of structuredClone inside the editorWarningSystem ref: N25B-450	2026-01-22 12:02:20 +01:00
JGerla	d6d74d4c6b	feat: made warnings undo redo safe and added warnings to phase nodes ref: N25B-450	2026-01-22 11:26:48 +01:00
JGerla	e86c06c3e5	fix: fixed deleting behaviour ref: N25B-450	2026-01-22 10:26:21 +01:00
JGerla	363054afda	feat: updated visuals ref: N25B-450	2026-01-20 14:00:01 +01:00
Gerla, J. (Justin)	6f4471ce6f	Merge branch 'demo' into 'dev' feat: merged demo into dev See merge request ics/sp/2025/n25b/pepperplus-ui!43	2026-01-20 11:10:58 +00:00