From ad8111d6c28bc11e2ae90a4d29e152121c651226 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B6rn=20Otgaar?= <b.r.c.otgaar@students.uu.nl>
Date: Wed, 7 Jan 2026 15:44:56 +0100
Subject: [PATCH] chore: initial branch commit

---
 .../visualProgrammingUI/components/Plan.tsx   |  5 ++-
 .../components/PlanEditor.tsx                 | 41 ++++++++++++++-----
 2 files changed, 34 insertions(+), 12 deletions(-)

diff --git a/src/pages/VisProgPage/visualProgrammingUI/components/Plan.tsx b/src/pages/VisProgPage/visualProgrammingUI/components/Plan.tsx
index 00fa88f..a4c4848 100644
--- a/src/pages/VisProgPage/visualProgrammingUI/components/Plan.tsx
+++ b/src/pages/VisProgPage/visualProgrammingUI/components/Plan.tsx
@@ -5,6 +5,7 @@ export type Plan = {
 }
 
 export type PlanElement = Goal | Action
+export type PlanElementTypes = ActionTypes | "goal"
 
 export type Goal = {
     id: string,
@@ -20,7 +21,7 @@ export type SpeechAction = { id: string, text: string, type:"speech" }
 export type GestureAction = { id: string, gesture: string, isTag: boolean, type:"gesture" }
 export type LLMAction = { id: string, goal: string, type:"llm" }
 
-export type ActionTypes = "speech" | "gesture" | "llm";
+export type ActionTypes = "speech" | "gesture" | "llm"
 
 
 // Extract the wanted information from a plan within the reducing of nodes
@@ -75,7 +76,7 @@ function StepReduce(planElement: PlanElement) {
 export function DoesPlanIterate(plan?: Plan) : boolean {
     // TODO: should recursively check plans that have goals (and thus more plans) in them.
     if (!plan) return false
-    return plan.steps.filter((step) => step.type == "llm").length > 0;
+    return plan.steps.filter((step) => step.type == "llm").length > 0 || (plan.steps.filter((x) => x.type == "goal").map((x) => DoesPlanIterate(x.plan))).includes(true);
 }
 
 /**
diff --git a/src/pages/VisProgPage/visualProgrammingUI/components/PlanEditor.tsx b/src/pages/VisProgPage/visualProgrammingUI/components/PlanEditor.tsx
index 19b590b..f303900 100644
--- a/src/pages/VisProgPage/visualProgrammingUI/components/PlanEditor.tsx
+++ b/src/pages/VisProgPage/visualProgrammingUI/components/PlanEditor.tsx
@@ -1,7 +1,7 @@
 import {useRef, useState} from "react";
 import useFlowStore from "../VisProgStores.tsx";
 import styles from './PlanEditor.module.css';
-import { GetActionValue, type Action, type ActionTypes, type Plan } from "../components/Plan";
+import { GetActionValue, type Action, type ActionTypes, type Goal, type Plan, type PlanElement, type PlanElementTypes } from "../components/Plan";
 import { defaultPlan } from "../components/Plan.default";
 import { TextField } from "../../../../components/TextField";
 import GestureValueEditor from "./GestureValueEditor"; 
@@ -21,6 +21,7 @@ export default function PlanEditorDialog({
   const dialogRef = useRef<HTMLDialogElement | null>(null);
   const [draftPlan, setDraftPlan] = useState<Plan | null>(null);
   const [newActionType, setNewActionType] = useState<ActionTypes>("speech");
+  const [newPlanElementType, setNewPlanElementType] = useState<PlanElementTypes>("speech")
   const [newActionGestureType, setNewActionGestureType] = useState<boolean>(true);
   const [newActionValue, setNewActionValue] = useState("");
   const { setScrollable } = useFlowStore();
@@ -57,14 +58,24 @@ export default function PlanEditorDialog({
     const id = crypto.randomUUID();
     switch (newActionType) {
     case "speech":
-     return { id, text: newActionValue, type: "speech" };
+     return { id, text: newPlanElementType, type: "speech" };
     case "gesture":
-        return { id, gesture: newActionValue, isTag: newActionGestureType, type: "gesture" };
+        return { id, gesture: newPlanElementType, isTag: newActionGestureType, type: "gesture" };
     case "llm":
-        return { id, goal: newActionValue, type: "llm" };
+        return { id, goal: newPlanElementType, type: "llm" };
     }
   };
 
+  const buildGoal = (): Goal => {
+      return {
+        id: "",
+        name: "",
+        plan: defaultPlan,
+        can_fail: false,
+        type: "goal"
+      }
+  }
+
   return (<>
       {/* Create and edit buttons */}
       {!plan && (
@@ -110,20 +121,21 @@ export default function PlanEditorDialog({
                       Action Type <wbr />
                       {/* Type selection */}
                       <select
-                          value={newActionType}
+                          value={newPlanElementType}
                           onChange={(e) => {
-                              setNewActionType(e.target.value as ActionTypes);
+                              setNewPlanElementType(e.target.value as PlanElementTypes);
                               // Reset value when action type changes
                               setNewActionValue("");
                           }}>
                       <option value="speech">Speech Action</option>
                       <option value="gesture">Gesture Action</option>
                       <option value="llm">LLM Action</option>
+                      <option value="goal">Seperate Goal</option>
                       </select>
                   </label>
 
                   {/* Action value editor*/}
-                  {newActionType === "gesture" ? (
+                  {newPlanElementType === "gesture" ? (
                       // Gesture get their own editor component
                       <GestureValueEditor
                         value={newActionValue}
@@ -131,16 +143,25 @@ export default function PlanEditorDialog({
                         setType={setNewActionGestureType}
                         placeholder="Gesture name"
                       />
-                  ) : (
+                  ) 
+                  : (newPlanElementType === "goal" ? (
+                    <div>
+
+
+                    </div>
+                  ) 
+                 :
+                  // Only used for the Speech and LLM elements
+                  (
                       <TextField
                           value={newActionValue}
                           setValue={setNewActionValue}
                           placeholder={
-                              newActionType === "speech" ? "Speech text"
+                              newPlanElementType === "speech" ? "Speech text"
                               : "LLM goal"
                           }
                       />
-                  )}
+                  ))}
 
                   {/* Adding steps */}
                   <button