Merge remote-tracking branch 'origin/dev' into feat/save-load-nodes

2025-11-26 14:05:38 +01:00
parent 221fbe42c2 f87c7fed03
commit 5287cb3bf3
55 changed files with 3521 additions and 1893 deletions
--- a/src/App.css
+++ b/src/App.css
@@ -82,6 +82,10 @@ button.movePage:hover{
 }


+#root {
+  display: flex;
+  flex-direction: column;
+}

 header {
  position: sticky;
@@ -96,6 +100,7 @@ header {
  align-items: center;
  justify-content: center;

+  background-color: var(--accent-color);
  backdrop-filter: blur(10px);
  z-index: 1; /* Otherwise any translated elements render above the blur?? */
 }
@@ -104,6 +109,10 @@ main {
  padding: 1rem 0;
 }

+input[type="checkbox"] {
+  cursor: pointer;
+}
+
 .flex-row {
  display: flex;
  flex-direction: row;
@@ -121,6 +130,14 @@ main {
  flex-wrap: wrap;
 }

+.min-height-0 {
+  min-height: 0;
+}
+
+.scroll-y {
+  overflow-y: scroll;
+}
+
 .align-center {
  align-items: center;
 }
@@ -141,6 +158,10 @@ main {
  gap: 1rem;
 }

+.margin-0 {
+  margin: 0;
+}
+
 .padding-sm {
  padding: .25rem;
 }
@@ -150,7 +171,19 @@ main {
 .padding-lg {
  padding: 1rem;
 }
+.padding-b-sm {
+  padding-bottom: .25rem;
+}
+.padding-b-md {
+  padding-bottom: .5rem;
+}
+.padding-b-lg {
+  padding-bottom: 1rem;
+}

+.round-sm, .round-md, .round-lg {
+  overflow: hidden;
+}
 .round-sm {
  border-radius: .25rem;
 }
@@ -159,4 +192,59 @@ main {
 }
 .round-lg {
  border-radius: 1rem;
-}
+}
+
+.border-sm {
+  border: 1px solid canvastext;
+}
+.border-md {
+  border: 2px solid canvastext;
+}
+.border-lg {
+  border: 3px solid canvastext;
+}
+
+.font-small {
+  font-size: .75rem;
+}
+.font-medium {
+  font-size: 1rem;
+}
+.font-large {
+  font-size: 1.25rem;
+}
+.mono {
+  font-family: ui-monospace, monospace;
+}
+.bold {
+  font-weight: bold;
+}
+
+
+.clickable {
+  cursor: pointer;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+.user-select-all {
+  -webkit-user-select: all;
+  user-select: all;
+}
+.user-select-none {
+  -webkit-user-select: none;
+  user-select: none;
+}
+button.no-button {
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  color: inherit;
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -3,24 +3,34 @@ import './App.css'
 import TemplatePage from './pages/TemplatePage/Template.tsx'
 import Home from './pages/Home/Home.tsx'
 import Robot from './pages/Robot/Robot.tsx';
+import ConnectedRobots from './pages/ConnectedRobots/ConnectedRobots.tsx'
 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);
+
  return (
-    <div>
+    <>
      <header>
        <Link to={"/"}>Home</Link>
+        <button onClick={() => setShowLogs(!showLogs)}>Toggle Logging</button>
      </header>
-      <main className={"flex-col align-center"}>
-        <Routes>
-          <Route path="/" element={<Home />} />
-          <Route path="/template" element={<TemplatePage />} />
-          <Route path="/editor" element={<VisProg />} />
-          <Route path="/robot" element={<Robot />} />
+      <div className={"flex-row justify-center flex-1 min-height-0"}>
+        <main className={"flex-col align-center flex-1 scroll-y"}>
+          <Routes>
+            <Route path="/" element={<Home />} />
+            <Route path="/template" element={<TemplatePage />} />
+            <Route path="/editor" element={<VisProg />} />
+            <Route path="/robot" element={<Robot />} />
+            <Route path="/ConnectedRobots" element={<ConnectedRobots />} />
        </Routes>
-      </main>
-    </div>
-  )
+        </main>
+        {showLogs && <Logging />}
+      </div>
+    </>
+  );
 }

 export default App
--- a/src/components/Logging/Filters.module.css
+++ b/src/components/Logging/Filters.module.css
@@ -0,0 +1,34 @@
+.filter-root {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.filter-panel {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  gap: .25rem;
+  top: 0;
+  right: 0;
+  z-index: 1;
+  background: canvas;
+  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.5);
+  width: 300px;
+
+  *:first-child {
+    margin-top: 0;
+  }
+  *:last-child {
+    margin-bottom: 0;
+  }
+}
+
+button.deletable {
+  cursor: pointer;
+
+  &:hover {
+    text-decoration: line-through;
+  }
+}
--- a/src/components/Logging/Filters.tsx
+++ b/src/components/Logging/Filters.tsx
@@ -0,0 +1,200 @@
+import {useEffect, useRef, useState} from "react";
+
+import type {LogFilterPredicate} from "./useLogs.ts";
+
+import styles from "./Filters.module.css";
+
+type Setter<T> = (value: T | ((prev: T) => T)) => void;
+
+const optionMapping = new Map([
+  ["ALL", 0],
+  ["DEBUG", 10],
+  ["INFO", 20],
+  ["WARNING", 30],
+  ["ERROR", 40],
+  ["CRITICAL", 50],
+  ["NONE", 999_999_999_999], // It is technically possible to have a higher level, but this is fine
+]);
+
+function LevelPredicateElement({
+  name,
+  level,
+  setLevel,
+  onDelete,
+}: {
+  name: string;
+  level: string;
+  setLevel: (level: string) => void;
+  onDelete?: () => void;
+}) {
+  const normalizedName = name.split(".").pop() || name;
+
+  return <div className={"flex-row gap-sm align-center"}>
+    <label
+      htmlFor={`log_level_${name}`}
+      className={"font-small"}
+    >
+      {onDelete
+        ? <button
+          className={`no-button ${styles.deletable}`}
+          onClick={onDelete}
+        >{normalizedName}:</button>
+        : normalizedName + ':'
+      }
+    </label>
+    <select
+      id={`log_level_${name}`}
+      value={level}
+      onChange={(e) => setLevel(e.target.value)}
+    >
+      {Array.from(optionMapping.keys()).map((key) => (
+        <option key={key} value={key}>{key}</option>
+      ))}
+    </select>
+  </div>
+}
+
+const GLOBAL_LOG_LEVEL_PREDICATE_KEY = "global_log_level";
+
+function GlobalLevelFilter({
+  filterPredicates,
+  setFilterPredicates,
+}: {
+  filterPredicates: Map<string, LogFilterPredicate>;
+  setFilterPredicates: Setter<Map<string, LogFilterPredicate>>;
+}) {
+  const selected = filterPredicates.get(GLOBAL_LOG_LEVEL_PREDICATE_KEY)?.value || "ALL";
+  const setSelected = (selected: string | null) => {
+    if (!selected || !optionMapping.has(selected)) return;
+
+    setFilterPredicates((curr) => {
+      const next = new Map(curr);
+      next.set(GLOBAL_LOG_LEVEL_PREDICATE_KEY, {
+        predicate: (record) => record.levelno >= optionMapping.get(selected)!,
+        priority: 0,
+        value: selected,
+      });
+      return next;
+    });
+  }
+
+  useEffect(() => {
+    if (filterPredicates.has(GLOBAL_LOG_LEVEL_PREDICATE_KEY)) return;
+    setSelected("INFO");
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []); // Run only once when the component mounts, not when anything changes
+
+  return <LevelPredicateElement
+    name={"Global"}
+    level={selected}
+    setLevel={setSelected}
+  />;
+}
+
+const AGENT_LOG_LEVEL_PREDICATE_KEY_PREFIX = "agent_log_level_";
+
+function AgentLevelFilters({
+  filterPredicates,
+  setFilterPredicates,
+  agentNames,
+}: {
+  filterPredicates: Map<string, LogFilterPredicate>;
+  setFilterPredicates: Setter<Map<string, LogFilterPredicate>>;
+  agentNames: Set<string>;
+}) {
+  const rootRef = useRef<HTMLDivElement>(null);
+  const [open, setOpen] = useState(false);
+
+  // Click outside to close
+  useEffect(() => {
+    if (!open) return;
+    const onDocClick = (e: MouseEvent) => {
+      if (!rootRef.current?.contains(e.target as Node)) setOpen(false);
+    };
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key !== "Escape") return;
+      setOpen(false);
+      e.preventDefault(); // Don't exit fullscreen mode
+    };
+    document.addEventListener("mousedown", onDocClick);
+    document.addEventListener("keydown", onKey);
+    return () => {
+      document.removeEventListener("mousedown", onDocClick);
+      document.removeEventListener("keydown", onKey);
+    };
+  }, [open]);
+
+  const agentPredicates = [...filterPredicates.keys()].filter((key) =>
+    key.startsWith(AGENT_LOG_LEVEL_PREDICATE_KEY_PREFIX));
+
+  /**
+   * Create or change the predicate for an agent. If the level is not given, the global level is used.
+   * @param agentName The name of the agent.
+   * @param level The level to filter by. If not given, the global level is used.
+   */
+  const setAgentPredicate = (agentName: string, level?: string ) => {
+    level = level ?? filterPredicates.get(GLOBAL_LOG_LEVEL_PREDICATE_KEY)?.value ?? "ALL";
+    setFilterPredicates((prev) => {
+      const next = new Map(prev);
+      next.set(AGENT_LOG_LEVEL_PREDICATE_KEY_PREFIX + agentName, {
+        predicate: (record) => record.name === agentName
+          ? record.levelno >= optionMapping.get(level!)!
+          : null,
+        priority: 1,
+        value: {agentName, level},
+      });
+      return next;
+    });
+  }
+
+  const deleteAgentPredicate = (agentName: string) => {
+    setFilterPredicates((curr) => {
+      const fullName = AGENT_LOG_LEVEL_PREDICATE_KEY_PREFIX + agentName;
+      if (!curr.has(fullName)) return curr; // Return unchanged, no re-render
+      const next = new Map(curr);
+      next.delete(fullName);
+      return next;
+    });
+  }
+
+  return <>
+    {agentPredicates.map((key) => {
+      const {agentName, level} = filterPredicates.get(key)!.value;
+
+      return <LevelPredicateElement
+        key={key}
+        name={agentName}
+        level={level}
+        setLevel={(level) => setAgentPredicate(agentName, level)}
+        onDelete={() => deleteAgentPredicate(agentName)}
+      />;
+    })}
+    <div className={"flex-row gap-sm align-center"}>
+      <label htmlFor={"add_agent"} className={"font-small"}>Add:</label>
+      <select
+        id={"add_agent"}
+        value={""}
+        onChange={(e) => !!e.target.value && setAgentPredicate(e.target.value)}
+      >
+        {["", ...agentNames.keys()].map((key) => (
+          <option key={key} value={key}>{key.split(".").pop()}</option>
+        ))}
+      </select>
+    </div>
+  </>;
+}
+
+export default function Filters({
+  filterPredicates,
+  setFilterPredicates,
+  agentNames,
+}: {
+  filterPredicates: Map<string, LogFilterPredicate>;
+  setFilterPredicates: Setter<Map<string, LogFilterPredicate>>;
+  agentNames: Set<string>;
+}) {
+  return <div className={"flex-1 flex-row flex-wrap gap-md align-center"}>
+    <GlobalLevelFilter filterPredicates={filterPredicates} setFilterPredicates={setFilterPredicates} />
+    <AgentLevelFilters filterPredicates={filterPredicates} setFilterPredicates={setFilterPredicates} agentNames={agentNames} />
+  </div>;
+}
--- a/src/components/Logging/Logging.module.css
+++ b/src/components/Logging/Logging.module.css
@@ -0,0 +1,39 @@
+.logging-container {
+  box-sizing: border-box;
+
+  width: max(30dvw, 500px);
+  flex-shrink: 0;
+
+  box-shadow: 0 0 1rem black;
+  padding: 1rem 1rem 0 1rem;
+}
+
+.no-numbers {
+  list-style-type: none;
+  counter-reset: none;
+  padding-inline-start: 0;
+}
+
+.log-container {
+  margin-bottom: .5rem;
+
+  .accented-0, .accented-10 {
+    background-color: color-mix(in oklab, canvas, rgb(159, 159, 159) 35%)
+  }
+  .accented-20 {
+    background-color: color-mix(in oklab, canvas, green 35%)
+  }
+  .accented-30 {
+    background-color: color-mix(in oklab, canvas, yellow 35%)
+  }
+  .accented-40, .accented-50 {
+    background-color: color-mix(in oklab, canvas, red 35%)
+  }
+}
+
+.floating-button {
+  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
@@ -0,0 +1,129 @@
+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";
+
+type LoggingSettings = {
+  showRelativeTime: boolean;
+  setShowRelativeTime: (showRelativeTime: boolean) => void;
+  scrollToBottom: boolean;
+  setScrollToBottom: (scrollToBottom: boolean) => void;
+};
+
+const useLoggingSettings = create<LoggingSettings>((set) => ({
+  showRelativeTime: false,
+  setShowRelativeTime: (showRelativeTime: boolean) => set({ showRelativeTime }),
+  scrollToBottom: true,
+  setScrollToBottom: (scrollToBottom: boolean) => set({ scrollToBottom }),
+}));
+
+function LogMessage({
+  recordCell,
+  onUpdate,
+}: {
+  recordCell: Cell<LogRecord>,
+  onUpdate?: () => void,
+}) {
+  const { showRelativeTime, setShowRelativeTime } = useLoggingSettings();
+  const record = useCell(recordCell);
+
+  /**
+   * Normalizes the log level number to a multiple of 10, for which there are CSS styles.
+   */
+  const normalizedLevelNo = (() => {
+    // By default, the highest level is 50 (CRITICAL). Custom levels can be higher, but we don't have more critical color.
+    if (record.levelno >= 50) return 50;
+
+    return Math.round(record.levelno / 10) * 10;
+  })();
+
+  const normalizedName = record.name.split(".").pop() || record.name;
+
+  useEffect(() => {
+    if (onUpdate) onUpdate();
+  }, [record, onUpdate]);
+
+  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>
+    </div>
+    <div className={"flex-col flex-1 padding-sm"}>
+      <span className={"mono"}>{normalizedName}</span>
+      <span>{record.message}</span>
+    </div>
+  </div>;
+}
+
+function LogMessages({ recordCells }: { recordCells: Cell<LogRecord>[] }) {
+  const scrollableRef = useRef<HTMLDivElement>(null);
+  const lastElementRef = useRef<HTMLLIElement>(null)
+  const { scrollToBottom, setScrollToBottom } = useLoggingSettings();
+
+  useEffect(() => {
+    if (!scrollableRef.current) return;
+    const currentScrollableRef = scrollableRef.current;
+
+    const handleScroll = () => setScrollToBottom(false);
+
+    currentScrollableRef.addEventListener("wheel", handleScroll);
+    currentScrollableRef.addEventListener("touchmove", handleScroll);
+
+    return () => {
+      currentScrollableRef.removeEventListener("wheel", handleScroll);
+      currentScrollableRef.removeEventListener("touchmove", handleScroll);
+    }
+  }, [scrollableRef, setScrollToBottom]);
+
+  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-b-md"}>
+    <ol className={`${styles.noNumbers} margin-0 flex-col gap-md`}>
+      {recordCells.map((recordCell, i) => (
+        <li key={`${i}_${recordCell.get().firstRelativeCreated}`}>
+          <LogMessage recordCell={recordCell} onUpdate={scrollLastElementIntoView} />
+        </li>
+      ))}
+      <li ref={lastElementRef}></li>
+    </ol>
+    {!scrollToBottom && <button
+      className={styles.floatingButton}
+      onClick={() => {
+        setScrollToBottom(true);
+        scrollLastElementIntoView(true);
+      }}
+    >
+      Scroll to bottom
+    </button>}
+  </div>;
+}
+
+export default function Logging() {
+  const [filterPredicates, setFilterPredicates] = useState(new Map<string, LogFilterPredicate>());
+  const { filteredLogs, distinctNames } = useLogs(filterPredicates)
+
+  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}
+        setFilterPredicates={setFilterPredicates}
+        agentNames={distinctNames}
+      />
+    </div>
+    <LogMessages recordCells={filteredLogs} />
+  </div>;
+}
--- a/src/components/Logging/useLogs.ts
+++ b/src/components/Logging/useLogs.ts
@@ -0,0 +1,146 @@
+import {useCallback, useEffect, useRef, useState} from "react";
+
+import {applyPriorityPredicates, type PriorityFilterPredicate} from "../../utils/priorityFiltering.ts";
+import {cell, type Cell} from "../../utils/cellStore.ts";
+
+export type LogRecord = {
+  name: string;
+  message: string;
+  levelname: 'DEBUG' | 'INFO' | 'WARNING' | 'ERROR' | 'CRITICAL' | string;
+  levelno: number;
+  created: number;
+  relativeCreated: number;
+  reference?: string;
+  firstCreated: number;
+  firstRelativeCreated: number;
+};
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type LogFilterPredicate = PriorityFilterPredicate<LogRecord> & { value: any };
+
+export function useLogs(filterPredicates: Map<string, LogFilterPredicate>) {
+  const [distinctNames, setDistinctNames] = useState<Set<string>>(new Set());
+  const [filtered, setFiltered] = useState<Cell<LogRecord>[]>([]);
+
+  const sseRef = useRef<EventSource | null>(null);
+  const filtersRef = useRef(filterPredicates);
+  const logsRef = useRef<LogRecord[]>([]);
+
+  /** Map to store the first message for each reference, instance can be updated to change contents. */
+  const firstByRefRef = useRef<Map<string, Cell<LogRecord>>>(new Map());
+
+  /**
+   * Apply the filter predicates to a log record.
+   * @param log The log record to apply the filters to.
+   * @returns `true` if the record passes.
+   */
+  const applyFilters = useCallback((log: LogRecord) =>
+    applyPriorityPredicates(log, [...filtersRef.current.values()]), []);
+
+  /** Recomputes the entire filtered list. Use when filter predicates change. */
+  const recomputeFiltered = useCallback(() => {
+    const newFiltered: Cell<LogRecord>[] = [];
+    firstByRefRef.current = new Map();
+
+    for (const message of logsRef.current) {
+      const messageCell = cell<LogRecord>({
+        ...message,
+        firstCreated: message.created,
+        firstRelativeCreated: message.relativeCreated,
+      });
+
+      if (message.reference) {
+        const first = firstByRefRef.current.get(message.reference);
+        if (first) {
+          // Update the first's contents
+          first.set((prev) => ({
+            ...message,
+            firstCreated: prev.firstCreated ?? prev.created,
+            firstRelativeCreated: prev.firstRelativeCreated ?? prev.relativeCreated,
+          }));
+
+          // Don't add it to the list again
+          continue;
+        } else {
+          // Add the first message with this reference to the registry
+          firstByRefRef.current.set(message.reference, messageCell);
+        }
+      }
+
+      if (applyFilters(message)) {
+        newFiltered.push(messageCell);
+      }
+    }
+
+    setFiltered(newFiltered);
+  }, [applyFilters, setFiltered]);
+
+  // Reapply filters to all logs, only when filters change
+  useEffect(() => {
+    filtersRef.current = filterPredicates;
+    recomputeFiltered();
+  }, [filterPredicates, recomputeFiltered]);
+
+  /**
+   * Handle a new log message. Updates the filtered list and to the full history.
+   * @param message The new log message.
+   */
+  const handleNewMessage = useCallback((message: LogRecord) => {
+    // Add to the full history for re-filtering on filter changes
+    logsRef.current.push(message);
+
+    setDistinctNames((prev) => {
+      if (prev.has(message.name)) return prev;
+      const newSet = new Set(prev);
+      newSet.add(message.name);
+      return newSet;
+    });
+
+    const messageCell = cell<LogRecord>({
+      ...message,
+      firstCreated: message.created,
+      firstRelativeCreated: message.relativeCreated,
+    });
+
+    if (message.reference) {
+      const first = firstByRefRef.current.get(message.reference);
+      if (first) {
+        // Update the first's contents
+        first.set((prev) => ({
+          ...message,
+          firstCreated: prev.firstCreated ?? prev.created,
+          firstRelativeCreated: prev.firstRelativeCreated ?? prev.relativeCreated,
+        }));
+
+        // Don't add it to the list again
+        return;
+      } else {
+        // Add the first message with this reference to the registry
+        firstByRefRef.current.set(message.reference, messageCell);
+      }
+    }
+
+    if (applyFilters(message)) {
+      setFiltered((curr) => [...curr, messageCell]);
+    }
+  }, [applyFilters, setFiltered]);
+
+  useEffect(() => {
+    if (sseRef.current) return;
+
+    const es = new EventSource("http://localhost:8000/logs/stream");
+    sseRef.current = es;
+
+    es.onmessage = (event) => {
+      const data: LogRecord = JSON.parse(event.data);
+      handleNewMessage(data);
+    };
+
+    return () => {
+      es.close();
+      sseRef.current = null;
+    };
+  }, [handleNewMessage]);
+
+  return {filteredLogs: filtered, distinctNames};
+}
--- a/src/components/ScrollIntoView.tsx
+++ b/src/components/ScrollIntoView.tsx
@@ -0,0 +1,14 @@
+import {useEffect, useRef} from "react";
+
+/**
+ * An element that always scrolls into view when it is rendered. When added to a list, the entire list will scroll to show this element.
+ */
+export default function ScrollIntoView() {
+  const elementRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (elementRef.current) elementRef.current.scrollIntoView({ behavior: "smooth" });
+  });
+
+  return <div ref={elementRef} />;
+}
--- a/src/components/TextField.module.css
+++ b/src/components/TextField.module.css
@@ -0,0 +1,27 @@
+.text-field {
+  border: 1px solid transparent;
+  border-radius: 5pt;
+  padding: 4px 8px;
+  outline: none;
+  background-color: canvas;
+  transition: border-color 0.2s, box-shadow 0.2s;
+  cursor: text;
+}
+
+.text-field.invalid {
+  border-color: red;
+  color: red;
+}
+
+.text-field:focus:not(.invalid) {
+  border-color: color-mix(in srgb, canvas, #777 10%);
+}
+
+.text-field:read-only {
+  cursor: pointer;
+  background-color: color-mix(in srgb, canvas, #777 5%);
+}
+
+.text-field:read-only:hover:not(.invalid) {
+  border-color: color-mix(in srgb, canvas, #777 10%);
+}
--- a/src/components/TextField.tsx
+++ b/src/components/TextField.tsx
@@ -0,0 +1,101 @@
+import {useState} from "react";
+import styles from "./TextField.module.css";
+
+/**
+ * A text input element in our own style that calls `setValue` at every keystroke.
+ *
+ * @param {Object} props - The component props.
+ * @param {string} props.value - The value of the text input.
+ * @param {(value: string) => void} props.setValue - A function that sets the value of the text input.
+ * @param {string} [props.placeholder] - The placeholder text for the text input.
+ * @param {string} [props.className] - Additional CSS classes for the text input.
+ * @param {string} [props.id] - The ID of the text input.
+ * @param {string} [props.ariaLabel] - The ARIA label for the text input.
+ */
+export function RealtimeTextField({
+  value = "",
+  setValue,
+  onCommit,
+  placeholder,
+  className,
+  id,
+  ariaLabel,
+  invalid = false,
+} : {
+  value: string,
+  setValue: (value: string) => void,
+  onCommit: () => void,
+  placeholder?: string,
+  className?: string,
+  id?: string,
+  ariaLabel?: string,
+  invalid?: boolean,
+}) {
+  const [readOnly, setReadOnly] = useState(true);
+
+  const updateData  = () => {
+    setReadOnly(true);
+    onCommit();
+  };
+
+  const updateOnEnter = (event: React.KeyboardEvent<HTMLInputElement>) => { if (event.key === "Enter") (event.target as HTMLInputElement).blur(); };
+
+  return <input
+    type={"text"}
+    placeholder={placeholder}
+    value={value}
+    onChange={(e) => setValue(e.target.value)}
+    onFocus={() => setReadOnly(false)}
+    onBlur={updateData}
+    onKeyDown={updateOnEnter}
+    readOnly={readOnly}
+    id={id}
+    // ReactFlow uses the "drag" / "nodrag" classes to enable / disable dragging of nodes
+    className={`${readOnly ? "drag" : "nodrag"} ${styles.textField} ${invalid ? styles.invalid : ""} ${className}`}
+    aria-label={ariaLabel}
+  />;
+}
+
+/**
+ * A text input element in our own style that calls `setValue` once the user presses the enter key or clicks outside the input.
+ *
+ * @param {Object} props - The component props.
+ * @param {string} props.value - The value of the text input.
+ * @param {(value: string) => void} props.setValue - A function that sets the value of the text input.
+ * @param {string} [props.placeholder] - The placeholder text for the text input.
+ * @param {string} [props.className] - Additional CSS classes for the text input.
+ * @param {string} [props.id] - The ID of the text input.
+ * @param {string} [props.ariaLabel] - The ARIA label for the text input.
+ */
+export function TextField({
+  value = "",
+  setValue,
+  placeholder,
+  className,
+  id,
+  ariaLabel,
+  invalid = false,
+} : {
+  value: string,
+  setValue: (value: string) => void,
+  placeholder?: string,
+  className?: string,
+  id?: string,
+  ariaLabel?: string,
+  invalid?: boolean,
+}) {
+  const [inputValue, setInputValue] = useState(value);
+
+  const onCommit = () => setValue(inputValue);
+
+  return <RealtimeTextField
+    placeholder={placeholder}
+    value={inputValue}
+    setValue={setInputValue}
+    onCommit={onCommit}
+    id={id}
+    className={className}
+    ariaLabel={ariaLabel}
+    invalid={invalid}
+  />;
+}
--- a/src/index.css
+++ b/src/index.css
@@ -7,13 +7,15 @@
  color: rgba(255, 255, 255, 0.87);
  background-color: #242424;

+  --accent-color: #008080;
+
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
 }

-html, body {
+html, body, #root {
  margin: 0;
  padding: 0;

@@ -25,11 +27,7 @@ html, body {

 a {
  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
+  color: canvastext;
 }

 h1 {
@@ -49,7 +47,7 @@ button {
  transition: border-color 0.25s;
 }
 button:hover {
-  border-color: #646cff;
+  border-color: var(--accent-color);
 }
 button:focus,
 button:focus-visible {
@@ -60,9 +58,8 @@ button:focus-visible {
  :root {
    color: #213547;
    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
+
+    --accent-color: #00AAAA;
  }
  button {
    background-color: #f9f9f9;
--- a/src/pages/ConnectedRobots/ConnectedRobots.tsx
+++ b/src/pages/ConnectedRobots/ConnectedRobots.tsx
@@ -0,0 +1,43 @@
+import { useEffect, useState } from 'react'
+
+export default function ConnectedRobots() {
+  
+  const [connected, setConnected] = useState<boolean | null>(null);
+
+  useEffect(() => {
+    // We're excepting 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) => {
+    
+      // Receive message and parse
+      console.log("received message:", event.data);
+      try {
+        const data = JSON.parse(event.data);
+
+        // Set connected to value.
+        try {
+          setConnected(data)
+        }
+        catch {
+          console.log("couldnt extract connected from incoming ping data")
+        }
+
+      } catch {
+        console.log("Ping message not in correct format:", event.data);
+      }
+    };
+    return () => eventSource.close();
+  }, []);
+
+  return (
+    <div>
+      <h1>Is robot currently connected?</h1>
+      <div>
+        <h2>Robot is currently: {connected == null ? "checking..." : (connected ? "connected! 🟢" : "not connected... 🔴")} </h2>
+        <h3>
+          {connected == null ? "If checking continues, make sure CB is properly loaded with robot at least once." : ""}
+        </h3>
+      </div>
+    </div>
+  );
+}
--- a/src/pages/Home/Home.tsx
+++ b/src/pages/Home/Home.tsx
@@ -14,6 +14,7 @@ function Home() {
        <Link to={"/robot"}>Robot Interaction →</Link>
        <Link to={"/editor"}>Editor →</Link>
        <Link to={"/template"}>Template →</Link>
+        <Link to={"/ConnectedRobots"}>Connected Robots →</Link>
      </div>
    </div>
  )
--- a/src/pages/VisProgPage/VisProg.module.css
+++ b/src/pages/VisProgPage/VisProg.module.css
@@ -1,47 +1,12 @@
 /* editor UI */

-.outer-editor-container {
-    margin-inline: auto;
-    display: flex;
-    justify-self: center;
-    padding: 10px;
-    align-items: center;
-    width: 80vw;
-    height: 80vh;
-}
-
 .inner-editor-container {
-    outline-style: solid;
-    border-radius: 10pt;
-    width: 90%;
+    box-sizing: border-box;
+    margin: 1rem;
+    width: calc(100% - 2rem);
    height: 100%;
 }

-
-
-.node-text-input {
-    border: 1px solid transparent;
-    border-radius: 5pt;
-    padding: 4px 8px;
-    outline: none;
-    background-color: white;
-    transition: border-color 0.2s, box-shadow 0.2s;
-    cursor: text;
-}
-
-.node-text-input:focus {
-    border-color: gainsboro;
-}
-
-.node-text-input:read-only {
-    cursor: pointer;
-    background-color: whitesmoke;
-}
-
-.node-text-input:read-only:hover {
-    border-color: gainsboro;
-}
-
 .dnd-panel {
    margin-inline-start: auto;
    margin-inline-end: auto;
@@ -85,10 +50,20 @@
 }

 .node-norm {
-    outline: forestgreen solid 2pt;
+    outline: rgb(0, 149, 25) solid 2pt;
    filter: drop-shadow(0 0 0.25rem forestgreen);
 }

+.node-goal {
+    outline: yellow solid 2pt;
+    filter: drop-shadow(0 0 0.25rem yellow);
+}
+
+.node-trigger {
+    outline: teal solid 2pt;
+    filter: drop-shadow(0 0 0.25rem teal);
+}
+
 .node-phase {
    outline: dodgerblue solid 2pt;
    filter: drop-shadow(0 0 0.25rem dodgerblue);
@@ -120,6 +95,22 @@
    filter: drop-shadow(0 0 0.25rem forestgreen);
 }

+.draggable-node-goal {
+    padding: 3px 10px;
+    background-color: canvas;
+    border-radius: 5pt;
+    outline: yellow solid 2pt;
+    filter: drop-shadow(0 0 0.25rem yellow);
+}
+
+.draggable-node-trigger {
+    padding: 3px 10px;
+    background-color: canvas;
+    border-radius: 5pt;
+    outline: teal solid 2pt;
+    filter: drop-shadow(0 0 0.25rem teal);
+}
+
 .draggable-node-phase {
    padding: 3px 10px;
    background-color: canvas;
--- a/src/pages/VisProgPage/VisProg.tsx
+++ b/src/pages/VisProgPage/VisProg.tsx
@@ -8,31 +8,15 @@ import {
 } from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
 import {useShallow} from 'zustand/react/shallow';
-
-import {
-  StartNodeComponent,
-  EndNodeComponent,
-  PhaseNodeComponent,
-  NormNodeComponent
-} from './visualProgrammingUI/components/NodeDefinitions.tsx';
 import {DndToolbar} from './visualProgrammingUI/components/DragDropSidebar.tsx';
-import graphReducer from "./visualProgrammingUI/GraphReducer.ts";
 import useFlowStore from './visualProgrammingUI/VisProgStores.tsx';
 import type {FlowState} from './visualProgrammingUI/VisProgTypes.tsx';
 import styles from './VisProg.module.css'
+import { NodeReduces, NodeTypes } from './visualProgrammingUI/NodeRegistry.ts';
 import SaveLoadPanel from './visualProgrammingUI/components/SaveLoadPanel.tsx';

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

-/**
- * contains the types of all nodes that are available in the editor
- */
-const NODE_TYPES = {
-  start: StartNodeComponent,
-  end: EndNodeComponent,
-  phase: PhaseNodeComponent,
-  norm: NormNodeComponent
-};

 /**
 * defines how the default edge looks inside the editor
@@ -81,38 +65,37 @@ const VisProgUI = () => {
  } = useFlowStore(useShallow(selector)); // instructs the editor to use the corresponding functions from the FlowStore

  return (
-    <div className={styles.outerEditorContainer}>
-      <div className={styles.innerEditorContainer}>
-        <ReactFlow
-          nodes={nodes}
-          edges={edges}
-          defaultEdgeOptions={DEFAULT_EDGE_OPTIONS}
-          nodeTypes={NODE_TYPES}
-          onNodesChange={onNodesChange}
-          onEdgesChange={onEdgesChange}
-          onReconnect={onReconnect}
-          onReconnectStart={onReconnectStart}
-          onReconnectEnd={onReconnectEnd}
-          onConnect={onConnect}
-          snapToGrid
-          fitView
-          proOptions={{hideAttribution: true}}
-        >
-          <Panel position="top-center" className={styles.dndPanel}>
-            <DndToolbar/> {/* contains the drag and drop panel for nodes */}
+    <div className={`${styles.innerEditorContainer} round-lg border-lg`}>
+      <ReactFlow
+        nodes={nodes}
+        edges={edges}
+        defaultEdgeOptions={DEFAULT_EDGE_OPTIONS}
+        nodeTypes={NodeTypes}
+        onNodesChange={onNodesChange}
+        onEdgesChange={onEdgesChange}
+        onReconnect={onReconnect}
+        onReconnectStart={onReconnectStart}
+        onReconnectEnd={onReconnectEnd}
+        onConnect={onConnect}
+        snapToGrid
+        fitView
+        proOptions={{hideAttribution: true}}
+      >
+        <Panel position="top-center" className={styles.dndPanel}>
+          <DndToolbar/> {/* contains the drag and drop panel for nodes */}
          </Panel>
          <Panel position = "bottom-left" className={styles.saveLoadPanel}>
            <SaveLoadPanel></SaveLoadPanel>
-            </Panel>
-          <Controls/>
-          <Background/>
-        </ReactFlow>
-      </div>
+          </Panel>
+        <Controls/>
+        <Background/>
+      </ReactFlow>
    </div>
  );
 };


+
 /**
 * Places the VisProgUI component inside a ReactFlowProvider
 *
@@ -132,6 +115,20 @@ function VisualProgrammingUI() {
 function runProgram() {
  const program = graphReducer();
  console.log(program);
+  console.log(JSON.stringify(program, null, 2));
+}
+
+/**
+ * Reduces the graph into its phases' information and recursively calls their reducing function
+ */ 
+function graphReducer() {
+  const { nodes } = useFlowStore.getState();
+  return nodes
+    .filter((n) => n.type == 'phase')
+    .map((n) => {
+      const reducer = NodeReduces['phase'];
+      return reducer(n, nodes)
+    }); 
 }

 /**
@@ -148,4 +145,4 @@ function VisProgPage() {
  )
 }

-export default VisProgPage
+export default VisProgPage
--- a/src/pages/VisProgPage/visualProgrammingUI/GraphReducer.ts
+++ b/src/pages/VisProgPage/visualProgrammingUI/GraphReducer.ts
@@ -1,188 +0,0 @@
-import {
-  type Edge,
-  getIncomers,
-  getOutgoers
-} from '@xyflow/react';
-import useFlowStore from "./VisProgStores.tsx";
-import type {
-  BehaviorProgram,
-  GoalData,
-  GoalReducer,
-  GraphPreprocessor,
-  NormData,
-  NormReducer,
-  OrderedPhases,
-  Phase,
-  PhaseReducer,
-  PreparedGraph,
-  PreparedPhase
-} from "./GraphReducerTypes.ts";
-import type {
-  AppNode,
-  GoalNode,
-  NormNode,
-  PhaseNode
-} from "./VisProgTypes.tsx";
-
-/**
- * Reduces the current graph inside the visual programming editor into a BehaviorProgram
- *
- * @param {GraphPreprocessor} graphPreprocessor
- * @param {PhaseReducer} phaseReducer
- * @param {NormReducer} normReducer
- * @param {GoalReducer} goalReducer
- * @returns {BehaviorProgram}
- */
-export default function graphReducer(
-  graphPreprocessor: GraphPreprocessor = defaultGraphPreprocessor,
-  phaseReducer: PhaseReducer = defaultPhaseReducer,
-  normReducer: NormReducer = defaultNormReducer,
-  goalReducer: GoalReducer = defaultGoalReducer
-) : BehaviorProgram {
-  const nodes: AppNode[] = useFlowStore.getState().nodes;
-  const edges: Edge[] = useFlowStore.getState().edges;
-  const preparedGraph: PreparedGraph = graphPreprocessor(nodes, edges);
-
-  return preparedGraph.map((preparedPhase: PreparedPhase) : Phase =>
-    phaseReducer(
-      preparedPhase,
-      normReducer,
-      goalReducer
-    ));
-};
-
-/**
- * reduces a single preparedPhase to a Phase object
- * the Phase object describes a single phase in a BehaviorProgram
- *
- * @param {PreparedPhase} phase
- * @param {NormReducer} normReducer
- * @param {GoalReducer} goalReducer
- * @returns {Phase}
- */
-export function defaultPhaseReducer(
-  phase: PreparedPhase,
-  normReducer: NormReducer = defaultNormReducer,
-  goalReducer: GoalReducer = defaultGoalReducer
-) : Phase {
-  return {
-    id: phase.phaseNode.id,
-    name: phase.phaseNode.data.label,
-    nextPhaseId: phase.nextPhaseId,
-    phaseData: {
-      norms: phase.connectedNorms.map(normReducer),
-      goals: phase.connectedGoals.map(goalReducer)
-    }
-  }
-}
-
-/**
- * the default implementation of the goalNode reducer function
- *
- * @param {GoalNode} node
- * @returns {GoalData}
- */
-function defaultGoalReducer(node: GoalNode) : GoalData {
-  return {
-    id: node.id,
-    name: node.data.label,
-    value: node.data.value
-  }
-}
-
-/**
- * the default implementation of the normNode reducer function
- *
- * @param {NormNode} node
- * @returns {NormData}
- */
-function defaultNormReducer(node: NormNode) :NormData {
-  return {
-    id: node.id,
-    name: node.data.label,
-    value: node.data.value
-  }
-}
-
-// Graph preprocessing functions:
-
-/**
- * Preprocesses the provide state of the behavior editor graph, preparing it for further processing in
- * the graphReducer function
- *
- * @param {AppNode[]} nodes
- * @param {Edge[]} edges
- * @returns {PreparedGraph}
- */
-export function defaultGraphPreprocessor(nodes: AppNode[], edges: Edge[]) : PreparedGraph {
-  const norms : NormNode[] = nodes.filter((node) => node.type === 'norm') as NormNode[];
-  const goals : GoalNode[] = nodes.filter((node) => node.type === 'goal') as GoalNode[];
-  const orderedPhases : OrderedPhases = orderPhases(nodes, edges);
-
-  return orderedPhases.phaseNodes.map((phase: PhaseNode) : PreparedPhase => {
-    const nextPhase = orderedPhases.connections.get(phase.id);
-      return {
-        phaseNode: phase,
-        nextPhaseId: nextPhase as string,
-        connectedNorms: getIncomers({id: phase.id}, norms,edges),
-        connectedGoals: getIncomers({id: phase.id}, goals,edges)
-      };
-    });
-}
-
-/**
- * orderPhases takes the state of the graph created by the editor and turns it into an OrderedPhases object.
- *
- * @param {AppNode[]} nodes
- * @param {Edge[]} edges
- * @returns {OrderedPhases}
- */
-export function orderPhases(nodes: AppNode[],edges: Edge[]) : OrderedPhases {
-  // find the first Phase node
-  const phaseNodes : PhaseNode[] = nodes.filter((node) => node.type === 'phase') as PhaseNode[];
-  const startNodeIndex = nodes.findIndex((node : AppNode):boolean  => {return (node.type === 'start');});
-  const firstPhaseNode = getOutgoers({ id: nodes[startNodeIndex].id },phaseNodes,edges);
-
-  // recursively adds the phase nodes to a list in the order they are connected in the graph
-  const nextPhase  = (
-    currentIndex: number,
-    { phaseNodes: phases, connections: connections} : OrderedPhases
-  ) : OrderedPhases => {
-    // get the current phase and the next phases;
-    const currentPhase = phases[currentIndex];
-    const nextPhaseNodes = getOutgoers(currentPhase,phaseNodes,edges);
-    const nextNodes = getOutgoers(currentPhase,nodes, edges);
-
-    // handles adding of the next phase to the chain, and error handle if an invalid state is received
-    if (nextPhaseNodes.length === 1 && nextNodes.length === 1) {
-      connections.set(currentPhase.id, nextPhaseNodes[0].id);
-      return nextPhase(phases.push(nextPhaseNodes[0] as PhaseNode) - 1, {phaseNodes: phases, connections: connections});
-    } else {
-      // handle erroneous states
-      if (nextNodes.length === 0){
-        throw new Error(`| INVALID PROGRAM | the source handle of "${currentPhase.id}" doesn't have any outgoing connections`);
-      } else {
-        if (nextNodes.length > 1) {
-          throw new Error(`| INVALID PROGRAM | the source handle of "${currentPhase.id}" connects to too many targets`);
-        } else {
-          if (nextNodes[0].type === "end"){
-            connections.set(currentPhase.id, "end");
-            // returns the final output of the function
-            return { phaseNodes: phases, connections: connections};
-          } else {
-            throw new Error(`| INVALID PROGRAM | the node "${nextNodes[0].id}" that "${currentPhase.id}" connects to is not a phase or end node`);
-          }
-        }
-      }
-    }
-  }
-  // initializes the Map describing the connections between phase nodes
-  // we need this Map to make sure we preserve this information,
-  // so we don't need to do checks on the entire set of edges in further stages of the reduction algorithm
-  const connections : Map<string, string> = new Map();
-
-  // returns an empty list if no phase nodes are present, otherwise returns an ordered list of phaseNodes
-  if (firstPhaseNode.length > 0) {
-      return nextPhase(0, {phaseNodes: [firstPhaseNode[0] as PhaseNode], connections: connections})
-  } else { return {phaseNodes: [], connections: connections} }
-}
--- a/src/pages/VisProgPage/visualProgrammingUI/GraphReducerTypes.ts
+++ b/src/pages/VisProgPage/visualProgrammingUI/GraphReducerTypes.ts
@@ -1,106 +0,0 @@
-import type {Edge} from "@xyflow/react";
-import type {AppNode, GoalNode, NormNode, PhaseNode} from "./VisProgTypes.tsx";
-
-
-/**
- * defines how a norm is represented in the simplified behavior program
-  */
-export type NormData = {
-  id: string;
-  name: string;
-  value: string;
-};
-
-/**
- * defines how a goal is represented in the simplified behavior program
- */
-export type GoalData = {
-  id: string;
-  name: string;
-  value: string;
-};
-
-/**
- * definition of a PhaseData object, it contains all phaseData that is relevant
- * for further processing and execution of a phase.
- */
-export type PhaseData = {
-  norms: NormData[];
-  goals: GoalData[];
-};
-
-/**
- * Describes a single phase within the simplified representation of a behavior program,
- *
- * Contains:
- * - the id of the described phase,
- * - the name of the described phase,
- * - the id of the next phase in the user defined behavior program
- * - the data property of the described phase node
- *
- * @NOTE at the moment the type definitions do not support branching programs,
- * if branching of phases is to be supported in the future, the type definition for Phase has to be updated
- */
-export type Phase = {
-  id: string;
-  name: string;
-  nextPhaseId: string;
-  phaseData: PhaseData;
-};
-
-/**
- * Describes a simplified behavior program as a list of Phase objects
- */
-export type BehaviorProgram = Phase[];
-
-
-
-export type NormReducer = (node: NormNode) => NormData;
-export type GoalReducer = (node: GoalNode) => GoalData;
-export type PhaseReducer = (
-  preparedPhase: PreparedPhase,
-  normReducer: NormReducer,
-  goalReducer: GoalReducer
-) => Phase;
-
-/**
- * contains:
- *
- * - list of phases, sorted based on position in chain between the start and end node
- * - a dictionary containing all outgoing connections,
- * to other phase or end nodes, for each phase node uses the id of the source node as key
- * and the id of the target node as value
- *
- */
-export type OrderedPhases = {
-  phaseNodes: PhaseNode[];
-  connections: Map<string, string>;
-};
-
-/**
- * A single prepared phase,
- * contains:
- * - the described phaseNode,
- * - the id of the next phaseNode or "end" for the end node
- * - a list of the normNodes that are connected to the described phase
- * - a list of the goalNodes that are connected to the described phase
- */
-export type PreparedPhase = {
-  phaseNode: PhaseNode;
-  nextPhaseId: string;
-  connectedNorms: NormNode[];
-  connectedGoals: GoalNode[];
-};
-
-/**
- * a list of PreparedPhase objects,
- * describes the preprocessed state of a program,
- * before the contents of the node
- */
-export type PreparedGraph = PreparedPhase[];
-
-export type GraphPreprocessor = (nodes: AppNode[], edges: Edge[]) => PreparedGraph;
-
-
-
-
--- a/src/pages/VisProgPage/visualProgrammingUI/NodeRegistry.ts
+++ b/src/pages/VisProgPage/visualProgrammingUI/NodeRegistry.ts
@@ -0,0 +1,82 @@
+import StartNode, { StartConnects, StartReduce } from "./nodes/StartNode";
+import EndNode, { EndConnects, EndReduce } from "./nodes/EndNode";
+import PhaseNode, { PhaseConnects, PhaseReduce } from "./nodes/PhaseNode";
+import NormNode, { NormConnects, NormReduce } from "./nodes/NormNode";
+import { EndNodeDefaults } from "./nodes/EndNode.default";
+import { StartNodeDefaults } from "./nodes/StartNode.default";
+import { PhaseNodeDefaults } from "./nodes/PhaseNode.default";
+import { NormNodeDefaults } from "./nodes/NormNode.default";
+import GoalNode, { GoalConnects, GoalReduce } from "./nodes/GoalNode";
+import { GoalNodeDefaults } from "./nodes/GoalNode.default";
+import TriggerNode, { TriggerConnects, TriggerReduce } from "./nodes/TriggerNode";
+import { TriggerNodeDefaults } from "./nodes/TriggerNode.default";
+
+/**
+ * The types of the nodes we have registered.
+ */
+export const NodeTypes = {
+  start: StartNode,
+  end: EndNode,
+  phase: PhaseNode,
+  norm: NormNode,
+  goal: GoalNode,
+  trigger: TriggerNode,
+};
+
+/**
+ * The default functions of the nodes we have registered.
+ * These are defined in the <node>.default.ts files.
+ */
+export const NodeDefaults = {
+  start: StartNodeDefaults,
+  end: EndNodeDefaults,
+  phase: PhaseNodeDefaults,
+  norm: NormNodeDefaults,
+  goal: GoalNodeDefaults,
+  trigger: TriggerNodeDefaults,
+};
+
+
+/**
+ * The reduce functions of the nodes we have registered.
+ */
+export const NodeReduces = {
+  start: StartReduce,
+  end: EndReduce,
+  phase: PhaseReduce,
+  norm: NormReduce,
+  goal: GoalReduce,
+  trigger: TriggerReduce,
+}
+
+
+/**
+ * The connection functionality of the nodes we have registered.
+ */
+export const NodeConnects = {
+  start: StartConnects,
+  end: EndConnects,
+  phase: PhaseConnects,
+  norm: NormConnects,
+  goal: GoalConnects,
+  trigger: TriggerConnects,
+}
+
+/**
+ * Functions that define whether a node should be deleted, currently constant only for start and end.
+ * Any node types that aren't mentioned are 'true', and can be deleted by default.
+ */
+export const NodeDeletes = {
+  start: () => false,
+  end: () => false,
+}
+
+/**
+ * Defines which types are variables in the phase node- 
+ * any node that is NOT mentioned here, is automatically seen as a variable of a phase.
+ */
+export const NodesInPhase = {
+  start: () => false,
+  end: () => false,
+  phase: () => false,
+}
--- a/src/pages/VisProgPage/visualProgrammingUI/VisProgStores.tsx
+++ b/src/pages/VisProgPage/visualProgrammingUI/VisProgStores.tsx
@@ -1,142 +1,135 @@
-import {create} from 'zustand';
+import { create } from 'zustand';
 import {
  applyNodeChanges,
  applyEdgeChanges,
  addEdge,
-  reconnectEdge, type Edge, type Connection
+  reconnectEdge,
+  type Node,
+  type Edge,
+  type XYPosition,
 } from '@xyflow/react';
+import type { FlowState } from './VisProgTypes';
+import { NodeDefaults, NodeConnects, NodeDeletes } from './NodeRegistry';

-import {type AppNode, type FlowState} from './VisProgTypes.tsx';

 /**
- * contains the nodes that are created when the editor is loaded,
- * should contain at least a start and an end node
+ * Create a node given the correct data
+ * @param type the type of the node to create
+ * @param id the id of the node to create
+ * @param position the position of the node to create
+ * @param data the data in the node to create
+ * @param deletable if this node should be able to be deleted IN ANY WAY POSSIBLE
+ * @constructor
 */
-const initialNodes = [
-  {
-    id: 'start',
-    type: 'start',
-    position: {x: 0, y: 0},
-    data: {label: 'start'}
-  },
-  {
-    id: 'phase-1',
-    type: 'phase',
-    position: {x: 0, y: 150},
-    data: {label: 'Generic Phase', number: 1},
-  },
-  {
-    id: 'end',
-    type: 'end',
-    position: {x: 0, y: 300},
-    data: {label: 'End'}
+function createNode(id: string, type: string, position: XYPosition, data: Record<string, unknown>, deletable? : boolean) {
+  const defaultData = NodeDefaults[type as keyof typeof NodeDefaults]
+  const newData = {
+      id: id,
+      type: type,
+      position: position,
+      data: data,
+      deletable: deletable,
  }
+  return {...defaultData, ...newData}
+}
+
+//* Initial nodes, created by using createNode. */
+const initialNodes : Node[] = [
+    createNode('start', 'start', {x: 100, y: 100}, {label: "Start"}, false),
+    createNode('end', 'end', {x: 500, y: 100}, {label: "End"}, false),
+    createNode('phase-1', 'phase',  {x:200, y:100}, {label: "Phase 1", children : []}),
+    createNode('norms-1', 'norm',  {x:-200, y:100}, {label: "Initial Norms", normList: ["Be a robot", "get good"]}),     
 ];

-/**
- * contains the initial edges that are created when the editor is loaded
- */
-const initialEdges = [
-  {
-    id: 'start-phase-1',
-    source: 'start',
-    target: 'phase-1',
-  },
-  {
-    id: 'phase-1-end',
-    source: 'phase-1',
-    target: 'end',
-  }
+// * Initial edges * /
+const initialEdges: Edge[] = [
+  { id: 'start-phase-1', source: 'start', target: 'phase-1' },
+  { id: 'phase-1-end', source: 'phase-1', target: 'end' },
 ];

+
 /**
- * The useFlowStore hook contains the implementation for editor functionality and state
- * we can use this inside our editor component to access the current state
- * and use any implemented functionality
+ * How we have defined the functions for our FlowState. 
+ * We have the normal functionality of a default FlowState with some exceptions to account for extra functionality.
+ * The biggest changes are in onConnect and onDelete, which we have given extra functionality based on the nodes defined functions.
 */
 const useFlowStore = create<FlowState>((set, get) => ({
  nodes: initialNodes,
  edges: initialEdges,
  edgeReconnectSuccessful: true,
-  onNodesChange: (changes) => {
-    set({
-      nodes: applyNodeChanges(changes, get().nodes)
-    });
-  },
-  onEdgesChange: (changes) => {
-    set({
-      edges: applyEdgeChanges(changes, get().edges)
-    });
-  },
-  // handles connection of newly created edges
-  onConnect: (connection) => {
-    set({
-      edges: addEdge(connection, get().edges)
-    });
-  },
-  // handles attempted reconnections of a previously disconnected edge
-  onReconnect: (oldEdge: Edge, newConnection: Connection) => {
-    get().edgeReconnectSuccessful = true;
-    set({
-      edges: reconnectEdge(oldEdge, newConnection, get().edges)
-    });
-  },
-  // Handles initiation of reconnection of edges that are manually disconnected from a node
-  onReconnectStart: () => {
-    set({
-      edgeReconnectSuccessful: false
-    });
-  },
-  // Drops the edge from the set of edges, removing it from the flow, if no successful reconnection occurred
-  onReconnectEnd: (_: unknown, edge: { id: string; }) => {
-    if (!get().edgeReconnectSuccessful) {
-      set({
-        edges: get().edges.filter((e) => e.id !== edge.id),
-      });
-    }
-    set({
-      edgeReconnectSuccessful: true
-    });
-  },
-  deleteNode: (nodeId: string) => {
-    set({
-      nodes: get().nodes.filter((n) => n.id !== nodeId),
-      edges: get().edges.filter((e) => e.source !== nodeId && e.target !== nodeId)
-    });
-  },
-  setNodes: (nodes) => {
-    set({nodes});
-  },
-  setEdges: (edges) => {
-    set({edges});
-  },
-/**
- * handles updating the data component of a node,
- * if the provided data object contains entries that aren't present in the updated node's data component
- * those entries are added to the data component,
- * entries that do exist within the node's data component,
- * are simply updated to contain the new value
- *
- * the data object
- * @param {string} nodeId
- * @param {object} data
- */
-  updateNodeData: (nodeId: string, data) => {
-    set({
-      nodes: get().nodes.map((node) : AppNode => {
-        if (node.id === nodeId) {
-          return {
-            ...node,
-            data: {
-              ...node.data,
-              ...data
-            }
-          };
-        } else { return node; }
-      })
-    });
-  }
-  }),
-);

-export default useFlowStore;
+  onNodesChange: (changes) =>
+  set({nodes: applyNodeChanges(changes, get().nodes)}),
+  onEdgesChange: (changes) => set({ edges: applyEdgeChanges(changes, get().edges) }),
+
+  onConnect: (connection) => {
+  const edges = addEdge(connection, get().edges);
+  const nodes = get().nodes;
+  // connection has: { source, sourceHandle, target, targetHandle }
+  // Let's find the source and target ID's.
+  const sourceNode = nodes.find((n) => n.id == connection.source);
+  const targetNode = nodes.find((n) => n.id == connection.target);
+  
+  // In case the nodes weren't found, return basic functionality.
+  if (sourceNode == undefined || targetNode == undefined || sourceNode.type == undefined || targetNode.type == undefined) {
+    set({ nodes, edges });
+    return;
+  }
+
+  // We should find out how their data changes by calling their respective functions.
+  const sourceConnectFunction = NodeConnects[sourceNode.type as keyof typeof NodeConnects]
+  const targetConnectFunction = NodeConnects[targetNode.type as keyof typeof NodeConnects]
+  
+  // We're going to have to update their data based on how they want to update it.
+  sourceConnectFunction(sourceNode, targetNode, true)
+  targetConnectFunction(targetNode, sourceNode, false)
+  set({ nodes, edges });
+},
+
+  onReconnect: (oldEdge, newConnection) => {
+    get().edgeReconnectSuccessful = true;
+    set({ edges: reconnectEdge(oldEdge, newConnection, get().edges) });
+  },
+
+  onReconnectStart: () => set({ edgeReconnectSuccessful: false }),
+  onReconnectEnd: (_evt, edge) => {
+    if (!get().edgeReconnectSuccessful) {
+      set({ edges: get().edges.filter((e) => e.id !== edge.id) });
+    }
+    set({ edgeReconnectSuccessful: true });
+  },
+
+  deleteNode: (nodeId) => {
+    // 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),
+      })}
+    },
+
+  
+  setNodes: (nodes) => set({ nodes }),
+  setEdges: (edges) => set({ edges }),
+
+  updateNodeData: (nodeId, data) => {
+    set({
+      nodes: get().nodes.map((node) => {
+        if (node.id === nodeId) {
+          node = { ...node, data: { ...node.data, ...data }};
+        }
+        return node;
+      }),
+    });
+  },
+
+  addNode: (node: Node) => {
+    set({ nodes: [...get().nodes, node] });
+  },
+}));
+
+export default useFlowStore;
--- a/src/pages/VisProgPage/visualProgrammingUI/VisProgTypes.tsx
+++ b/src/pages/VisProgPage/visualProgrammingUI/VisProgTypes.tsx
@@ -1,47 +1,24 @@
-import {
-  type Edge,
-  type Node,
-  type OnNodesChange,
-  type OnEdgesChange,
-  type OnConnect,
-  type OnReconnect,
-} from '@xyflow/react';
+// VisProgTypes.ts
+import type { Edge, OnNodesChange, OnEdgesChange, OnConnect, OnReconnect, Node } from '@xyflow/react';
+import type { NodeTypes } from './NodeRegistry';

+export type AppNode = typeof NodeTypes

-type defaultNodeData = {
-  label: string;
-};
-
-export type StartNode = Node<defaultNodeData, 'start'>;
-export type EndNode = Node<defaultNodeData, 'end'>;
-export type GoalNode = Node<defaultNodeData & { value: string; }, 'goal'>;
-export type NormNode = Node<defaultNodeData & { value: string; }, 'norm'>;
-export type PhaseNode = Node<defaultNodeData & { number: number; }, 'phase'>;
-
-
-/**
- * a type meant to house different node types, currently not used
- * but will allow us to more clearly define nodeTypes when we implement
- * computation of the Graph inside the ReactFlow editor
- */
-export type AppNode = Node | StartNode | EndNode | NormNode | GoalNode | PhaseNode;
-
-
-/**
- * The type for the Zustand store object used to manage the state of the ReactFlow editor
- */
 export type FlowState = {
-  nodes: AppNode[];
+  nodes: Node[];
  edges: Edge[];
  edgeReconnectSuccessful: boolean;
+
  onNodesChange: OnNodesChange;
  onEdgesChange: OnEdgesChange;
  onConnect: OnConnect;
  onReconnect: OnReconnect;
  onReconnectStart: () => void;
  onReconnectEnd: (_: unknown, edge: { id: string }) => void;
+
  deleteNode: (nodeId: string) => void;
-  setNodes: (nodes: AppNode[]) => void;
+  setNodes: (nodes: Node[]) => void;
  setEdges: (edges: Edge[]) => void;
  updateNodeData: (nodeId: string, data: object) => void;
+  addNode: (node: Node) => void;
 };
--- a/src/pages/VisProgPage/visualProgrammingUI/components/DragDropSidebar.tsx
+++ b/src/pages/VisProgPage/visualProgrammingUI/components/DragDropSidebar.tsx
@@ -1,19 +1,9 @@
-import {useDraggable} from '@neodrag/react';
-import {
-  useReactFlow,
-  type XYPosition
-} from '@xyflow/react';
-import {
-  type ReactNode,
-  useCallback,
-  useRef,
-  useState
-} from 'react';
-import useFlowStore from "../VisProgStores.tsx";
-import styles from "../../VisProg.module.css"
-import type {AppNode, PhaseNode, NormNode} from "../VisProgTypes.tsx";
-
-
+import { useDraggable } from '@neodrag/react';
+import { useReactFlow, type XYPosition } from '@xyflow/react';
+import { type ReactNode, useCallback, useRef, useState } from 'react';
+import useFlowStore from '../VisProgStores';
+import styles from '../../VisProg.module.css';
+import { NodeDefaults, type NodeTypes } from '../NodeRegistry'

 /**
 * DraggableNodeProps dictates the type properties of a DraggableNode
@@ -21,41 +11,28 @@ import type {AppNode, PhaseNode, NormNode} from "../VisProgTypes.tsx";
 interface DraggableNodeProps {
  className?: string;
  children: ReactNode;
-  nodeType: string;
-  onDrop: (nodeType: string, position: XYPosition) => void;
+  nodeType: keyof typeof NodeTypes;
+  onDrop: (nodeType: keyof typeof NodeTypes, position: XYPosition) => void;
 }

 /**
- * Definition of a node inside the drag and drop toolbar,
- * these nodes require an onDrop function to be supplied
- * that dictates how the node is created in the graph.
- *
- * @param className
- * @param children
- * @param nodeType
- * @param onDrop
- * @constructor
+ * Definition of a node inside the drag and drop toolbar.
+ * These nodes require an onDrop function that dictates
+ * how the node is created in the graph.
 */
-function DraggableNode({className, children, nodeType, onDrop}: DraggableNodeProps) {
+function DraggableNode({ className, children, nodeType, onDrop }: DraggableNodeProps) {
  const draggableRef = useRef<HTMLDivElement>(null);
-  const [position, setPosition] = useState<XYPosition>({x: 0, y: 0});
+  const [position, setPosition] = useState<XYPosition>({ x: 0, y: 0 });

-  // @ts-expect-error comes from a package and doesn't appear to play nicely with strict typescript typing
+  // @ts-expect-error from the neodrag package — safe to ignore
  useDraggable(draggableRef, {
-    position: position,
-    onDrag: ({offsetX, offsetY}) => {
-      // Calculate position relative to the viewport
-      setPosition({
-        x: offsetX,
-        y: offsetY,
-      });
+    position,
+    onDrag: ({ offsetX, offsetY }) => {
+      setPosition({ x: offsetX, y: offsetY });
    },
-    onDragEnd: ({event}) => {
-      setPosition({x: 0, y: 0});
-      onDrop(nodeType, {
-        x: event.clientX,
-        y: event.clientY,
-      });
+    onDragEnd: ({ event }) => {
+      setPosition({ x: 0, y: 0 });
+      onDrop(nodeType, { x: event.clientX, y: event.clientY });
    },
  });

@@ -66,71 +43,48 @@ function DraggableNode({className, children, nodeType, onDrop}: DraggableNodePro
  );
 }

+/**
+ * addNode — adds a new node to the flow using the unified class-based system.
+ * Keeps numbering logic for phase/norm nodes.
+ */
+function addNode(nodeType: keyof typeof NodeTypes, position: XYPosition) {
+  const { nodes, setNodes } = useFlowStore.getState();

-// eslint-disable-next-line react-refresh/only-export-components
-export function addNode(nodeType: string, position: XYPosition) {
-  const {setNodes} = useFlowStore.getState();
-  const nds : AppNode[] = useFlowStore.getState().nodes;
-  const newNode = () => {
-    switch (nodeType) {
-      case "phase":
-      {
-        const phaseNodes= nds.filter((node) => node.type === 'phase');
-        let phaseNumber;
-        if (phaseNodes.length > 0) {
-          const finalPhaseId : number = +(phaseNodes[phaseNodes.length - 1].id.split('-')[1]);
-          phaseNumber = finalPhaseId + 1;
-        } else {
-          phaseNumber = 1;
-        }
-        const phaseNode : PhaseNode = {
-          id: `phase-${phaseNumber}`,
-          type: nodeType,
-          position,
-          data: {label: 'new', number: phaseNumber},
-        }
-        return phaseNode;
-      }
-      case "norm":
-      {
-        const normNodes= nds.filter((node) => node.type === 'norm');
-        let normNumber
-        if (normNodes.length > 0) {
-          const finalNormId : number = +(normNodes[normNodes.length - 1].id.split('-')[1]);
-          normNumber = finalNormId + 1;
-        } else {
-          normNumber = 1;
-        }
-
-        const normNode : NormNode = {
-          id: `norm-${normNumber}`,
-          type: nodeType,
-          position,
-          data: {label: `new norm node`, value: "Pepper should be formal"},
-        }
-        return normNode;
-      }
-      default: {
-        throw new Error(`Node ${nodeType} not found`);
-      }
-    }
+  // Find out if there's any default data about our ndoe
+  const defaultData = NodeDefaults[nodeType] ?? {}
+  
+  // Currently, we find out what the Id is by checking the last node and adding one
+  const sameTypeNodes = nodes.filter((node) => node.type === nodeType);
+  const nextNumber =
+    sameTypeNodes.length > 0
+      ? (() => {
+          const lastNode = sameTypeNodes[sameTypeNodes.length - 1];
+          const parts = lastNode.id.split('-');
+          const lastNum = Number(parts[1]);
+          return Number.isNaN(lastNum) ? sameTypeNodes.length + 1 : lastNum + 1;
+        })()
+      : 1;
+  const id = `${nodeType}-${nextNumber}`;
+  
+  // Create new node
+  const newNode = {
+    id: id,
+    type: nodeType,
+    position,
+    data: {...defaultData}
  }
-
-  setNodes(nds.concat(newNode()));
+  setNodes([...nodes, newNode]);
 }

 /**
- * the DndToolbar defines how the drag and drop toolbar component works
- * and includes the default onDrop behavior through handleNodeDrop
- * @constructor
+ * DndToolbar defines how the drag and drop toolbar component works
+ * and includes the default onDrop behavior.
 */
 export function DndToolbar() {
-  const {screenToFlowPosition} = useReactFlow();
-  /**
-   * handleNodeDrop implements the default onDrop behavior
-   */
+  const { screenToFlowPosition } = useReactFlow();
+
  const handleNodeDrop = useCallback(
-    (nodeType: string, screenPosition: XYPosition) => {
+    (nodeType: keyof typeof NodeTypes, screenPosition: XYPosition) => {
      const flow = document.querySelector('.react-flow');
      const flowRect = flow?.getBoundingClientRect();
      const isInFlow =
@@ -140,7 +94,6 @@ export function DndToolbar() {
        screenPosition.y >= flowRect.top &&
        screenPosition.y <= flowRect.bottom;

-      // Create a new node and add it to the flow
      if (isInFlow) {
        const position = screenToFlowPosition(screenPosition);
        addNode(nodeType, position);
@@ -149,24 +102,32 @@ export function DndToolbar() {
    [screenToFlowPosition],
  );

+
+  // Map over our default settings to see which of them have their droppable data set to true
+  const droppableNodes = Object.entries(NodeDefaults)
+  .filter(([, data]) => data.droppable)
+  .map(([type, data]) => ({ 
+    type: type as DraggableNodeProps['nodeType'], 
+    data 
+  }));
+
  return (
-    <div>
-
-      <div className={`flex-col gap-lg padding-md ${styles.innerDndPanel}`}>
-        <div className="description">
-          You can drag these nodes to the pane to create new nodes.
-        </div>
-        <div className={`flex-row gap-lg ${styles.dndNodeContainer}`}>
-          <DraggableNode className={styles.draggableNodePhase} nodeType="phase" onDrop={handleNodeDrop}>
-            phase Node
-          </DraggableNode>
-          <DraggableNode className={styles.draggableNodeNorm} nodeType="norm" onDrop={handleNodeDrop}>
-            norm Node
-          </DraggableNode>
-        </div>
+    <div className={`flex-col gap-lg padding-md ${styles.innerDndPanel}`}>
+      <div className="description">
+        You can drag these nodes to the pane to create new nodes.
+      </div>
+      <div className={`flex-row gap-lg ${styles.dndNodeContainer}`}>
+        {/* Maps over all the nodes that are droppable, and puts them in the panel */}
+        {droppableNodes.map(({type, data}) => (
+          <DraggableNode
+            className={styles[`draggable-node-${type}`]} // Our current style signature for nodes
+            nodeType={type}
+            onDrop={handleNodeDrop}
+          >
+            {data.label}
+          </DraggableNode>
+        ))}
      </div>
-
-      
    </div>
  );
-}
+}
--- a/src/pages/VisProgPage/visualProgrammingUI/components/NodeComponents.tsx
+++ b/src/pages/VisProgPage/visualProgrammingUI/components/NodeComponents.tsx
@@ -0,0 +1,32 @@
+import { NodeToolbar } from '@xyflow/react';
+import '@xyflow/react/dist/style.css';
+import useFlowStore from "../VisProgStores.tsx";
+
+//Toolbar definitions
+type ToolbarProps = {
+  nodeId: string;
+  allowDelete: boolean;
+};
+
+/**
+ * Node Toolbar definition:
+ * handles: node deleting functionality
+ * can be added to any custom node component as a React component
+ *
+ * @param {string} nodeId
+ * @param {boolean} allowDelete
+ * @returns {React.JSX.Element}
+ * @constructor
+ */
+export function Toolbar({nodeId, allowDelete}: ToolbarProps) {
+  const {deleteNode} = useFlowStore();
+
+  const deleteParentNode = ()=> {
+    deleteNode(nodeId);
+  }
+  return (
+    <NodeToolbar>
+      <button className="Node-toolbar__deletebutton" onClick={deleteParentNode} disabled={!allowDelete}>delete</button>
+    </NodeToolbar>);
+}
+
--- a/src/pages/VisProgPage/visualProgrammingUI/components/NodeDefinitions.tsx
+++ b/src/pages/VisProgPage/visualProgrammingUI/components/NodeDefinitions.tsx
@@ -1,183 +0,0 @@
-import {
-  Handle,
-  type NodeProps,
-  NodeToolbar,
-  Position
-} from '@xyflow/react';
-import '@xyflow/react/dist/style.css';
-import styles from '../../VisProg.module.css';
-import useFlowStore from "../VisProgStores.tsx";
-import type {
-  StartNode,
-  EndNode,
-  PhaseNode,
-  NormNode
-} from "../VisProgTypes.tsx";
-
-//Toolbar definitions
-
-type ToolbarProps = {
-  nodeId: string;
-  allowDelete: boolean;
-};
-
-
-/**
- * Node Toolbar definition:
- * handles: node deleting functionality
- * can be added to any custom node component as a React component
- *
- * @param {string} nodeId
- * @param {boolean} allowDelete
- * @returns {React.JSX.Element}
- * @constructor
- */
-export function Toolbar({nodeId, allowDelete}: ToolbarProps) {
-  const {deleteNode} = useFlowStore();
-
-  const deleteParentNode = ()=> {
-    deleteNode(nodeId);
-  }
-  return (
-    <NodeToolbar>
-      <button className="Node-toolbar__deletebutton" onClick={deleteParentNode} disabled={!allowDelete}>delete</button>
-    </NodeToolbar>);
-}
-
-// Renaming component
-
-/**
- * Adds a component that can be used to edit a node's label entry inside its Data
- * can be added to any custom node that has a label inside its Data
- *
- * @param {string} nodeLabel
- * @param {string} nodeId
- * @returns {React.JSX.Element}
- * @constructor
- */
-export function EditableName({nodeLabel = "new node", nodeId} : { nodeLabel : string, nodeId: string}) {
-  const {updateNodeData} = useFlowStore();
-
-  const updateData  = (event: React.FocusEvent<HTMLInputElement>) => {
-    const input = event.target.value;
-    updateNodeData(nodeId, {label: input});
-    event.currentTarget.setAttribute("readOnly", "true");
-    window.getSelection()?.empty();
-    event.currentTarget.classList.replace("nodrag", "drag"); // enable dragging of the node with cursor on the input box
-  };
-
-  const updateOnEnter = (event: React.KeyboardEvent<HTMLInputElement>) => { if (event.key === "Enter") (event.target as HTMLInputElement).blur(); };
-
-  const enableEditing = (event: React.MouseEvent<HTMLInputElement>) => {
-    if(event.currentTarget.hasAttribute("readOnly")) {
-      event.currentTarget.removeAttribute("readOnly"); // enable editing
-      event.currentTarget.select(); // select the text input
-      window.getSelection()?.collapseToEnd(); // move the caret to the end of the current value
-      event.currentTarget.classList.replace("drag", "nodrag"); // disable dragging using input box
-    }
-  }
-
-  return (
-    <div className={styles.NodeTextBar }>
-      <label>name: </label>
-      <input
-        className={`drag ${styles.nodeTextInput}`} // prevents dragging the component when user has focused the text input
-        type={"text"}
-        defaultValue={nodeLabel}
-        onKeyDown={updateOnEnter}
-        onBlur={updateData}
-        onClick={enableEditing}
-        maxLength={25}
-        readOnly
-      />
-    </div>
-  )
-}
-
-
-// Definitions of Nodes
-
-/**
- * Start Node definition:
- *
- * @param {string} id
- * @param {defaultNodeData} data
- * @returns {React.JSX.Element}
- * @constructor
- */
-export const StartNodeComponent = ({id, data}: NodeProps<StartNode>) => {
-  return (
-    <>
-      <Toolbar nodeId={id} allowDelete={false}/>
-      <div className={`${styles.defaultNode} ${styles.nodeStart}`}>
-        <div> data test {data.label} </div>
-        <Handle type="source" position={Position.Right} id="start"/>
-      </div>
-    </>
-  );
-};
-
-
-/**
- * End node definition:
- *
- * @param {string} id
- * @param {defaultNodeData} data
- * @returns {React.JSX.Element}
- * @constructor
- */
-export const EndNodeComponent = ({id, data}: NodeProps<EndNode>) => {
-  return (
-    <>
-      <Toolbar nodeId={id} allowDelete={false}/>
-      <div className={`${styles.defaultNode} ${styles.nodeEnd}`}>
-        <div> {data.label} </div>
-        <Handle type="target" position={Position.Left} id="end"/>
-      </div>
-    </>
-  );
-};
-
-
-/**
- * Phase node definition:
- *
- * @param {string} id
- * @param {defaultNodeData & {number: number}} data
- * @returns {React.JSX.Element}
- * @constructor
- */
-export const PhaseNodeComponent = ({id, data}: NodeProps<PhaseNode>) => {
-  return (
-    <>
-      <Toolbar nodeId={id} allowDelete={true}/>
-      <div className={`${styles.defaultNode} ${styles.nodePhase}`}>
-        <EditableName nodeLabel={data.label} nodeId={id}/>
-        <Handle type="target" position={Position.Left} id="target"/>
-        <Handle type="target" position={Position.Bottom} id="norms"/>
-        <Handle type="source" position={Position.Right} id="source"/>
-      </div>
-    </>
-  );
-};
-
-
-/**
- * Norm node definition:
- *
- * @param {string} id
- * @param {defaultNodeData & {value: string}} data
- * @returns {React.JSX.Element}
- * @constructor
- */
-export const NormNodeComponent = ({id, data}: NodeProps<NormNode>) => {
-  return (
-    <>
-      <Toolbar nodeId={id} allowDelete={true}/>
-      <div className={`${styles.defaultNode} ${styles.nodeNorm}`}>
-        <EditableName nodeLabel={data.label} nodeId={id}/>
-        <Handle type="source" position={Position.Right} id="NormSource"/>
-      </div>
-    </>
-  );
-};
--- a/src/pages/VisProgPage/visualProgrammingUI/nodes/EndNode.default.ts
+++ b/src/pages/VisProgPage/visualProgrammingUI/nodes/EndNode.default.ts
@@ -0,0 +1,10 @@
+import type { EndNodeData } from "./EndNode";
+
+/**
+ * Default data for this node.
+ */
+export const EndNodeDefaults: EndNodeData = {
+  label: "End Node",
+  droppable: false,
+  hasReduce: true
+};
--- a/src/pages/VisProgPage/visualProgrammingUI/nodes/EndNode.tsx
+++ b/src/pages/VisProgPage/visualProgrammingUI/nodes/EndNode.tsx
@@ -0,0 +1,67 @@
+import {
+  Handle,
+  type NodeProps,
+  Position,
+  type Node,
+} from '@xyflow/react';
+import { Toolbar } from '../components/NodeComponents';
+import styles from '../../VisProg.module.css'; 
+
+/**
+ * The typing of this node's data
+ */
+export type EndNodeData = {
+  label: string;
+  droppable: boolean;
+  hasReduce: boolean;
+};
+
+export type EndNode = Node<EndNodeData>
+
+/**
+ * Default function to render an end node given its properties
+ * @param props the node's properties
+ * @returns React.JSX.Element
+ */
+export default function EndNode(props: NodeProps<EndNode>) {
+  return (
+    <>
+      <Toolbar nodeId={props.id} allowDelete={false}/>
+      <div className={`${styles.defaultNode} ${styles.nodeEnd}`}>
+        <div className={"flex-row gap-sm"}>
+        End
+        </div>
+        <Handle type="target" position={Position.Left} id="target"/>
+      </div>
+    </>
+  );
+}
+
+/**
+ * Functionality for reducing this node into its more compact json program
+ * @param node the node to reduce
+ * @param nodes all nodes present
+ * @returns Dictionary, {id: node.id}
+ */
+export function EndReduce(node: Node, nodes: Node[]) {
+  // Replace this for nodes functionality
+  if (nodes.length <= -1) { 
+    console.warn("Impossible nodes length in EndReduce") 
+  } 
+  return {
+    id: node.id
+  }
+}
+
+/**
+ * Any connection functionality that should get called when a connection is made to this node type (end)
+ * @param thisNode the node of which the functionality gets called
+ * @param otherNode the other node which has connected
+ * @param isThisSource whether this node is the one that is the source of the connection
+ */
+export function EndConnects(thisNode: Node, otherNode: Node, isThisSource: boolean) {
+  // Replace this for connection logic
+  if (thisNode == undefined && otherNode == undefined && isThisSource == false) { 
+    console.warn("Impossible node connection called in EndConnects")
+  }
+}
--- a/src/pages/VisProgPage/visualProgrammingUI/nodes/GoalNode.default.ts
+++ b/src/pages/VisProgPage/visualProgrammingUI/nodes/GoalNode.default.ts
@@ -0,0 +1,12 @@
+import type { GoalNodeData } from "./GoalNode";
+
+/**
+ * Default data for this node
+ */
+export const GoalNodeDefaults: GoalNodeData = {
+  label: "Goal Node",
+  droppable: true,
+  description: "The robot will strive towards this goal",
+  achieved: false,
+  hasReduce: true,
+};
--- a/src/pages/VisProgPage/visualProgrammingUI/nodes/GoalNode.tsx
+++ b/src/pages/VisProgPage/visualProgrammingUI/nodes/GoalNode.tsx
@@ -0,0 +1,101 @@
+import {
+  Handle,
+  type NodeProps,
+  Position,
+  type Node,
+} from '@xyflow/react';
+import { Toolbar } from '../components/NodeComponents';
+import styles from '../../VisProg.module.css';
+import { TextField } from '../../../../components/TextField';
+import useFlowStore from '../VisProgStores';
+
+/**
+ * The default data dot a phase node
+ * @param label: the label of this phase
+ * @param droppable: whether this node is droppable from the drop bar (initialized as true)
+ * @param desciption: description of the goal
+ * @param hasReduce: whether this node has reducing functionality (true by default)
+ */
+export type GoalNodeData = {
+  label: string;
+  description: string;
+  droppable: boolean;
+  achieved: boolean;
+  hasReduce: boolean;
+};
+
+export type GoalNode = Node<GoalNodeData>
+
+
+/**
+ * Defines how a Goal node should be rendered
+ * @param props NodeProps, like id, label, children
+ * @returns React.JSX.Element
+ */
+export default function GoalNode(props: NodeProps<GoalNode>) {
+  const data = props.data
+  const {updateNodeData} = useFlowStore();
+
+  const text_input_id = `goal_${props.id}_text_input`;
+  const checkbox_id = `goal_${props.id}_checkbox`;
+
+  const setDescription = (value: string) => {
+    updateNodeData(props.id, {...data, description: value});
+  }
+
+  const setAchieved = (value: boolean) => {
+    updateNodeData(props.id, {...data, achieved: value});
+  }
+
+  return <>
+    <Toolbar nodeId={props.id} allowDelete={true}/>
+    <div className={`${styles.defaultNode} ${styles.nodeGoal} flex-col gap-sm`}>
+      <div className={"flex-row gap-md"}>
+        <label htmlFor={text_input_id}>Goal:</label>
+        <TextField
+          id={text_input_id}
+          value={data.description}
+          setValue={(val) => setDescription(val)}
+          placeholder={"To ..."}
+        />
+      </div>
+      <div className={"flex-row gap-md align-center"}>
+        <label htmlFor={checkbox_id}>Achieved:</label>
+        <input
+          id={checkbox_id}
+          type={"checkbox"}
+          value={data.achieved ? "checked" : ""}
+          onChange={(e) => setAchieved(e.target.checked)}
+        />
+      </div>
+      <Handle type="source" position={Position.Right} id="GoalSource"/>
+    </div>
+  </>;
+}
+
+
+/**
+ * Reduces each Goal, including its children down into its relevant data.
+ * @param node: The Node Properties of this node.
+ * @param nodes: all the nodes in the graph
+ */
+export function GoalReduce(node: Node, nodes: Node[]) {
+  // Replace this for nodes functionality
+  if (nodes.length <= -1) { 
+    console.warn("Impossible nodes length in GoalReduce") 
+  } 
+  const data = node.data as GoalNodeData;
+    return {
+      id: node.id,
+      label: data.label,
+      description: data.description,
+      achieved: data.achieved,
+    }
+}
+
+export function GoalConnects(thisNode: Node, otherNode: Node, isThisSource: boolean) {
+  // Replace this for connection logic
+  if (thisNode == undefined && otherNode == undefined && isThisSource == false) { 
+    console.warn("Impossible node connection called in EndConnects")
+  }
+}
--- a/src/pages/VisProgPage/visualProgrammingUI/nodes/NormNode.default.ts
+++ b/src/pages/VisProgPage/visualProgrammingUI/nodes/NormNode.default.ts
@@ -0,0 +1,11 @@
+import type { NormNodeData } from "./NormNode";
+
+/**
+ * Default data for this node
+ */
+export const NormNodeDefaults: NormNodeData = {
+  label: "Norm Node",
+  droppable: true,
+  norm: "",
+  hasReduce: true,
+};
--- a/src/pages/VisProgPage/visualProgrammingUI/nodes/NormNode.tsx
+++ b/src/pages/VisProgPage/visualProgrammingUI/nodes/NormNode.tsx
@@ -0,0 +1,84 @@
+import {
+  Handle,
+  type NodeProps,
+  Position,
+  type Node,
+} from '@xyflow/react';
+import { Toolbar } from '../components/NodeComponents';
+import styles from '../../VisProg.module.css';
+import { TextField } from '../../../../components/TextField';
+import useFlowStore from '../VisProgStores';
+
+/**
+ * The default data dot a phase node
+ * @param label: the label of this phase
+ * @param droppable: whether this node is droppable from the drop bar (initialized as true)
+ * @param norm: list of strings of norms for this node
+ * @param hasReduce: whether this node has reducing functionality (true by default)
+ */
+export type NormNodeData = {
+  label: string;
+  droppable: boolean;
+  norm: string;
+  hasReduce: boolean;
+};
+
+export type NormNode = Node<NormNodeData>
+
+/**
+ * Defines how a Norm node should be rendered
+ * @param props NodeProps, like id, label, children
+ * @returns React.JSX.Element
+ */
+export default function NormNode(props: NodeProps<NormNode>) {
+  const data = props.data;
+  const {updateNodeData} = useFlowStore();
+
+  const text_input_id = `norm_${props.id}_text_input`;
+
+  const setValue = (value: string) => {
+    updateNodeData(props.id, {norm: value});
+  }
+
+  return <>
+    <Toolbar nodeId={props.id} allowDelete={true}/>
+    <div className={`${styles.defaultNode} ${styles.nodeNorm}`}>
+      <div className={"flex-row gap-sm"}>
+        <label htmlFor={text_input_id}>Norm :</label>
+        <TextField
+          id={text_input_id}
+          value={data.norm}
+          setValue={(val) => setValue(val)}
+          placeholder={"Pepper should ..."}
+        />
+      </div>
+      <Handle type="source" position={Position.Right} id="norms"/>
+    </div>
+  </>;
+};
+
+
+/**
+ * Reduces each Norm, including its children down into its relevant data.
+ * @param node: The Node Properties of this node.
+ * @param nodes: all the nodes in the graph
+ */
+export function NormReduce(node: Node, nodes: Node[]) {
+  // Replace this for nodes functionality
+  if (nodes.length <= -1) { 
+    console.warn("Impossible nodes length in NormReduce") 
+  } 
+  const data = node.data as NormNodeData;
+    return {
+      id: node.id,
+      label: data.label,
+      norm: data.norm,
+    }
+}
+
+export function NormConnects(thisNode: Node, otherNode: Node, isThisSource: boolean) {
+  // Replace this for connection logic
+  if (thisNode == undefined && otherNode == undefined && isThisSource == false) { 
+    console.warn("Impossible node connection called in EndConnects")
+  }
+}
--- a/src/pages/VisProgPage/visualProgrammingUI/nodes/PhaseNode.default.ts
+++ b/src/pages/VisProgPage/visualProgrammingUI/nodes/PhaseNode.default.ts
@@ -0,0 +1,11 @@
+import type { PhaseNodeData } from "./PhaseNode";
+
+/**
+ * Default data for this node
+ */
+export const PhaseNodeDefaults: PhaseNodeData = {
+  label: "Phase Node",
+  droppable: true,
+  children: [],
+  hasReduce: true,
+};
--- a/src/pages/VisProgPage/visualProgrammingUI/nodes/PhaseNode.tsx
+++ b/src/pages/VisProgPage/visualProgrammingUI/nodes/PhaseNode.tsx
@@ -0,0 +1,116 @@
+import {
+  Handle,
+  type NodeProps,
+  Position,
+  type Node,
+} from '@xyflow/react';
+import { Toolbar } from '../components/NodeComponents';
+import styles from '../../VisProg.module.css';
+import { NodeReduces, NodesInPhase, NodeTypes } from '../NodeRegistry';
+import useFlowStore from '../VisProgStores';
+import { TextField } from '../../../../components/TextField';
+
+/**
+ * The default data dot a phase node
+ * @param label: the label of this phase
+ * @param droppable: whether this node is droppable from the drop bar (initialized as true)
+ * @param children: ID's of children of this node
+ * @param hasReduce: whether this node has reducing functionality (true by default)
+ */
+export type PhaseNodeData = {
+  label: string;
+  droppable: boolean;
+  children: string[];
+  hasReduce: boolean;
+};
+
+export type PhaseNode = Node<PhaseNodeData>
+
+/**
+ * Defines how a phase node should be rendered
+ * @param props NodeProps, like id, label, children
+ * @returns React.JSX.Element
+ */
+export default function PhaseNode(props: NodeProps<PhaseNode>) {
+  const data = props.data;
+  const {updateNodeData} = useFlowStore();
+  const updateLabel = (value: string) => updateNodeData(props.id, {...data, label: value});
+  const label_input_id = `phase_${props.id}_label_input`;
+
+  return (
+    <>
+      <Toolbar nodeId={props.id} allowDelete={true}/>
+      <div className={`${styles.defaultNode} ${styles.nodePhase}`}>
+        <div className={"flex-row gap-sm"}>
+          <label htmlFor={label_input_id}>Name:</label>
+          <TextField
+            id={label_input_id}
+            value={data.label}
+            setValue={updateLabel}
+            placeholder={"Phase ..."}
+          />
+        </div>
+        <Handle type="target" position={Position.Left} id="target"/>
+        <Handle type="target" position={Position.Bottom} id="norms"/>
+        <Handle type="source" position={Position.Right} id="source"/>
+      </div>
+    </>
+  );
+};
+
+/**
+ * Reduces each phase, including its children down into its relevant data.
+ * @param node the node which is being reduced
+ * @param nodes all the nodes currently in the flow.
+ * @returns A collection of all reduced nodes in this phase, starting with this phases' reduced data.  
+ */
+export function PhaseReduce(node: Node, nodes: Node[]) {
+    const thisnode = node as PhaseNode;
+    const data = thisnode.data as PhaseNodeData;
+
+    // node typings that are not in phase
+    const nodesNotInPhase: string[] = Object.entries(NodesInPhase)
+        .filter(([, f]) => !f())
+        .map(([t]) => t);
+
+    // node typings that then are in phase
+    const nodesInPhase: string[] = Object.entries(NodeTypes)
+        .filter(([t]) => !nodesNotInPhase.includes(t))
+        .map(([t]) => t);
+
+    // children nodes
+    const childrenNodes = nodes.filter((node) => data.children.includes(node.id));
+
+    // Build the result object
+    const result: Record<string, unknown> = {
+        id: thisnode.id,
+        label: data.label,
+    };
+
+    nodesInPhase.forEach((type) => {
+        const typedChildren = childrenNodes.filter((child) => child.type == type);
+        const reducer = NodeReduces[type as keyof typeof NodeReduces];
+        if (!reducer) {
+            console.warn(`No reducer found for node type ${type}`);
+            result[type + "s"] = [];
+        } else {
+            result[type + "s"] = typedChildren.map((child) => reducer(child, nodes));
+        }
+    });
+
+    return result;
+}
+
+/**
+ * This function is called whenever a connection is made with this node type (phase)
+ * @param thisNode the node of this node type which function is called
+ * @param otherNode the other node which was part of the connection
+ * @param isThisSource whether this instance of the node was the source in the connection, true = yes.
+ */
+export function PhaseConnects(thisNode: Node, otherNode: Node, isThisSource: boolean) {
+  console.log("Connect functionality called.")
+  const node = thisNode as PhaseNode
+  const data = node.data as PhaseNodeData
+  if (!isThisSource)
+    data.children.push(otherNode.id)
+}
--- a/src/pages/VisProgPage/visualProgrammingUI/nodes/StartNode.default.ts
+++ b/src/pages/VisProgPage/visualProgrammingUI/nodes/StartNode.default.ts
@@ -0,0 +1,10 @@
+import type { StartNodeData } from "./StartNode";
+
+/**
+ * Default data for this node.
+ */
+export const StartNodeDefaults: StartNodeData = {
+  label: "Start Node",
+  droppable: false,
+  hasReduce: true
+};
--- a/src/pages/VisProgPage/visualProgrammingUI/nodes/StartNode.tsx
+++ b/src/pages/VisProgPage/visualProgrammingUI/nodes/StartNode.tsx
@@ -0,0 +1,67 @@
+import {
+  Handle,
+  type NodeProps,
+  Position,
+  type Node,
+} from '@xyflow/react';
+import { Toolbar } from '../components/NodeComponents';
+import styles from '../../VisProg.module.css';
+
+
+export type StartNodeData = {
+  label: string;
+  droppable: boolean;
+  hasReduce: boolean;
+};
+
+
+export type StartNode = Node<StartNodeData>
+
+
+/**
+ * Defines how a Norm node should be rendered
+ * @param props NodeProps, like id, label, children
+ * @returns React.JSX.Element
+ */
+export default function StartNode(props: NodeProps<StartNode>) {
+  return (
+    <>
+      <Toolbar nodeId={props.id} allowDelete={false}/>
+      <div className={`${styles.defaultNode} ${styles.nodeStart}`}>
+        <div className={"flex-row gap-sm"}>
+          Start
+        </div>
+        <Handle type="source" position={Position.Right} id="source"/>
+      </div>
+    </>
+  );
+}
+
+/**
+ * The reduce function for this node type.
+ * @param node this node
+ * @param nodes all the nodes in the graph
+ * @returns a reduced structure of this node
+ */
+export function StartReduce(node: Node, nodes: Node[]) {
+  // Replace this for nodes functionality
+  if (nodes.length <= -1) { 
+    console.warn("Impossible nodes length in StartReduce") 
+  } 
+  return {
+    id: node.id
+  }
+}
+
+/**
+ * This function is called whenever a connection is made with this node type (start)
+ * @param thisNode the node of this node type which function is called
+ * @param otherNode the other node which was part of the connection
+ * @param isThisSource whether this instance of the node was the source in the connection, true = yes.
+ */
+export function StartConnects(thisNode: Node, otherNode: Node, isThisSource: boolean) {
+  // Replace this for connection logic
+  if (thisNode == undefined && otherNode == undefined && isThisSource == false) { 
+    console.warn("Impossible node connection called in EndConnects")
+  }
+}
--- a/src/pages/VisProgPage/visualProgrammingUI/nodes/TriggerNode.default.ts
+++ b/src/pages/VisProgPage/visualProgrammingUI/nodes/TriggerNode.default.ts
@@ -0,0 +1,12 @@
+import type { TriggerNodeData } from "./TriggerNode";
+
+/**
+ * Default data for this node
+ */
+export const TriggerNodeDefaults: TriggerNodeData = {
+  label: "Trigger Node",
+  droppable: true,
+  triggers: [],
+  triggerType: "keywords",
+  hasReduce: true,
+};
--- a/src/pages/VisProgPage/visualProgrammingUI/nodes/TriggerNode.tsx
+++ b/src/pages/VisProgPage/visualProgrammingUI/nodes/TriggerNode.tsx
@@ -0,0 +1,187 @@
+import {
+  Handle,
+  type NodeProps,
+  Position,
+  type Connection,
+  type Edge,
+  type Node,
+} from '@xyflow/react';
+import { Toolbar } from '../components/NodeComponents';
+import styles from '../../VisProg.module.css';
+import useFlowStore from '../VisProgStores';
+import { useState } from 'react';
+import { RealtimeTextField, TextField } from '../../../../components/TextField';
+import duplicateIndices from '../../../../utils/duplicateIndices';
+
+/**
+ * The default data dot a Trigger node
+ * @param label: the label of this Trigger
+ * @param droppable: whether this node is droppable from the drop bar (initialized as true)
+ * @param children: ID's of children of this node
+ */
+export type TriggerNodeData = {
+  label: string;
+  droppable: boolean;
+  triggerType: "keywords" | string;
+  triggers: Keyword[] | never;
+  hasReduce: boolean;
+};
+
+
+export type TriggerNode = Node<TriggerNodeData>
+
+
+export function TriggerNodeCanConnect(connection: Connection | Edge): boolean {
+  return (connection != undefined);
+}
+
+/**
+ * Defines how a Trigger node should be rendered
+ * @param props NodeProps, like id, label, children
+ * @returns React.JSX.Element
+ */
+export default function TriggerNode(props: NodeProps<TriggerNode>) {
+  const data = props.data;
+  const {updateNodeData} = useFlowStore();
+
+  const setKeywords = (keywords: Keyword[]) => {
+    updateNodeData(props.id, {...data, triggers: keywords});
+  }
+
+  return <>
+    <Toolbar nodeId={props.id} allowDelete={true}/>
+    <div className={`${styles.defaultNode} ${styles.nodeTrigger} flex-col gap-sm`}>
+      {data.triggerType === "emotion" && (
+        <div className={"flex-row gap-md"}>Emotion?</div>
+      )}
+      {data.triggerType === "keywords" && (
+        <Keywords
+          keywords={data.triggers}
+          setKeywords={setKeywords}
+        />
+      )}
+      <Handle type="source" position={Position.Right} id="TriggerSource"/>
+    </div>
+  </>;
+}
+
+/**
+ * Reduces each Trigger, including its children down into its relevant data.
+ * @param node: The Node Properties of this node.
+ * @param nodes: all the nodes in the graph.
+ */
+export function TriggerReduce(node: Node, nodes: Node[]) {
+  // Replace this for nodes functionality
+  if (nodes.length <= -1) { 
+    console.warn("Impossible nodes length in TriggerReduce") 
+  } 
+  const data = node.data as TriggerNodeData;
+    return {
+      label: data.label,
+      list: data.triggers,
+    }
+}
+
+/**
+ * This function is called whenever a connection is made with this node type (trigger)
+ * @param thisNode the node of this node type which function is called
+ * @param otherNode the other node which was part of the connection
+ * @param isThisSource whether this instance of the node was the source in the connection, true = yes.
+ */
+export function TriggerConnects(thisNode: Node, otherNode: Node, isThisSource: boolean) {
+  // Replace this for connection logic
+  if (thisNode == undefined && otherNode == undefined && isThisSource == false) { 
+    console.warn("Impossible node connection called in EndConnects")
+  }
+}
+
+// Definitions for the possible triggers, being keywords and emotions
+type Keyword = { id: string, keyword: string };
+
+export type EmotionTriggerNodeProps = {
+  type: "emotion";
+  value: string;
+}
+export type KeywordTriggerNodeProps = {
+  type: "keywords";
+  value: Keyword[];
+}
+
+export type TriggerNodeProps = EmotionTriggerNodeProps | KeywordTriggerNodeProps;
+
+/**
+ * The JSX element that is responsible for updating the field and showing the text
+ * @param param0 the function that updates the field
+ * @returns React.JSX.Element that handles adding keywords
+ */
+function KeywordAdder({ addKeyword }: { addKeyword: (keyword: string) => void }) {
+  const [input, setInput] = useState("");
+
+  const text_input_id = "keyword_adder_input";
+
+  return <div className={"flex-row gap-md"}>
+    <label htmlFor={text_input_id}>New Keyword:</label>
+    <RealtimeTextField
+      id={text_input_id}
+      value={input}
+      setValue={setInput}
+      onCommit={() => {
+        if (!input) return;
+        addKeyword(input);
+        setInput("");
+      }}
+      placeholder={"..."}
+      className={"flex-1"}
+    />
+  </div>;
+}
+
+function Keywords({
+  keywords,
+  setKeywords,
+}: {
+  keywords: Keyword[];
+  setKeywords: (keywords: Keyword[]) => void;
+}) {
+  type Interpolatable = string | number | boolean | bigint | null | undefined;
+
+  const inputElementId = (id: Interpolatable) => `keyword_${id}_input`;
+
+  /** Indices of duplicates in the keyword array. */
+  const [duplicates, setDuplicates] = useState<number[]>([]);
+
+  function replace(id: string, value: string) {
+    value = value.trim();
+    const newKeywords = value === ""
+      ? keywords.filter((kw) => kw.id != id)
+      : keywords.map((kw) => kw.id === id ? {...kw, keyword: value} : kw);
+    setKeywords(newKeywords);
+    setDuplicates(duplicateIndices(newKeywords.map((kw) => kw.keyword)));
+  }
+
+  function add(value: string) {
+    value = value.trim();
+    if (value === "") return;
+    const newKeywords = [...keywords, {id: crypto.randomUUID(), keyword: value}];
+    setKeywords(newKeywords);
+    setDuplicates(duplicateIndices(newKeywords.map((kw) => kw.keyword)));
+  }
+
+  return <>
+    <span>Triggers when {keywords.length <= 1 ? "the keyword is" : "all keywords are"} spoken.</span>
+    {[...keywords].map(({id, keyword}, index) => {
+      return <div key={id} className={"flex-row gap-md"}>
+        <label htmlFor={inputElementId(id)}>Keyword:</label>
+        <TextField
+          id={inputElementId(id)}
+          value={keyword}
+          setValue={(val) => replace(id, val)}
+          placeholder={"..."}
+          className={"flex-1"}
+          invalid={duplicates.includes(index)}
+        />
+      </div>;
+    })}
+    <KeywordAdder addKeyword={add} />
+  </>;
+}
--- a/src/utils/cellStore.ts
+++ b/src/utils/cellStore.ts
@@ -0,0 +1,29 @@
+import {useSyncExternalStore} from "react";
+
+type Unsub = () => void;
+
+export type Cell<T> = {
+  get: () => T;
+  set: (next: T | ((prev: T) => T)) => void;
+  subscribe: (callback: () => void) => Unsub;
+};
+
+export function cell<T>(initial: T): Cell<T> {
+  let value = initial;
+  const listeners = new Set<() => void>();
+  return {
+    get: () => value,
+    set: (next) => {
+      value = typeof next === "function" ? (next as (v: T) => T)(value) : next;
+      for (const l of listeners) l();
+    },
+    subscribe: (callback) => {
+      listeners.add(callback);
+      return () => listeners.delete(callback);
+    },
+  };
+}
+
+export function useCell<T>(c: Cell<T>) {
+  return useSyncExternalStore(c.subscribe, c.get, c.get);
+}
--- a/src/utils/duplicateIndices.ts
+++ b/src/utils/duplicateIndices.ts
@@ -0,0 +1,19 @@
+/**
+ * Find the indices of all elements that occur more than once.
+ *
+ * @param array The array to search for duplicates.
+ * @returns An array of indices where an element occurs more than once, in no particular order.
+ */
+export default function duplicateIndices<T>(array: T[]): number[] {
+  const positions = new Map<T, number[]>();
+
+  array.forEach((value, i) => {
+    if (!positions.has(value)) positions.set(value, []);
+    positions.get(value)!.push(i);
+  });
+
+  // flatten all index lists with more than one element
+  return Array.from(positions.values())
+    .filter(idxs => idxs.length > 1)
+    .flat();
+}
--- a/src/utils/formatDuration.ts
+++ b/src/utils/formatDuration.ts
@@ -0,0 +1,21 @@
+/**
+ * Format a time duration like `HH:MM:SS.mmm`.
+ *
+ * @param durationMs time duration in milliseconds.
+ * @return formatted time string.
+ */
+export default function formatDuration(durationMs: number): string {
+  const isNegative = durationMs < 0;
+  if (isNegative) durationMs = -durationMs;
+
+  const hours = Math.floor(durationMs / 3600000);
+  const minutes = Math.floor((durationMs % 3600000) / 60000);
+  const seconds = Math.floor((durationMs % 60000) / 1000);
+  const milliseconds = Math.floor(durationMs % 1000);
+
+  return (isNegative ? '-' : '') +
+    `${hours.toString().padStart(2, '0')}:` +
+    `${minutes.toString().padStart(2, '0')}:` +
+    `${seconds.toString().padStart(2, '0')}.` +
+    `${milliseconds.toString().padStart(3, '0')}`;
+}
--- a/src/utils/priorityFiltering.ts
+++ b/src/utils/priorityFiltering.ts
@@ -0,0 +1,24 @@
+export type PriorityFilterPredicate<T> = {
+  priority: number;
+  predicate: (element: T) => boolean | null; // The predicate and its priority are ignored if it returns null.
+}
+
+/**
+ * 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.
+ */
+export function applyPriorityPredicates<T>(element: T, predicates: PriorityFilterPredicate<T>[]): boolean {
+  let highestPriority = -1;
+  let highestKeep = true;
+  for (const predicate of predicates) {
+    if (predicate.priority >= highestPriority) {
+      const predicateKeep = predicate.predicate(element);
+      if (predicateKeep === null) continue; // This predicate doesn't care about the element, so skip it
+      if (predicate.priority > highestPriority) highestKeep = true;
+      highestPriority = predicate.priority;
+      highestKeep = highestKeep && predicateKeep;
+    }
+  }
+  return highestKeep;
+}