src/pages/VisProgPage/visualProgrammingUI/components/GestureValueEditor.tsx

@@ -10,6 +10,7 @@ import styles from './GestureValueEditor.module.css'
 type GestureValueEditorProps = {
   value: string;
   setValue: (value: string) => void;
+  setType: (value: boolean) => void;
   placeholder?: string;
 };
 
@@ -443,6 +444,7 @@ const GESTURE_SINGLES = [
 export default function GestureValueEditor({
   value,
   setValue,
+  setType,
   placeholder = "Gesture name",
 }: GestureValueEditorProps) {
 
@@ -465,10 +467,12 @@ export default function GestureValueEditor({
 
     if (newMode === "single") {
       setValue(customValue || value);
+      setType(false);
       setFilteredSuggestions(GESTURE_SINGLES);
       setShowSuggestions(true);
     } else {
       // Clear value if it does not match a valid tag
+      setType(true);
       const isValidTag = GESTURE_TAGS.some(
         tag => tag.toLowerCase() === value.toLowerCase()
       );

src/pages/VisProgPage/visualProgrammingUI/components/Plan.tsx

@@ -17,7 +17,7 @@ export type Goal = {
 // Actions
 export type Action = SpeechAction | GestureAction | LLMAction
 export type SpeechAction = { id: string, text: string, type:"speech" }
-export type GestureAction = { id: string, gesture: string, type:"gesture" }
+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";
@@ -29,7 +29,40 @@ export function PlanReduce(plan?: Plan) {
     return {
         name: plan.name,
         id: plan.id,
-        steps: plan.steps,
+        steps: plan.steps.map((x) => StepReduce(x))
+    }
+}
+
+
+// Extract the wanted information from a plan element.
+function StepReduce(planElement: PlanElement) {
+    // We have different types of plan elements, requiring differnt types of output
+    switch (planElement.type) {
+        case ("speech"):
+            return {
+                id: planElement.id,
+                text: planElement.text,
+            }
+        case ("gesture"):
+            return {
+                id: planElement.id,
+                gesture: {
+                    type: planElement.isTag ? "tag" : "single",
+                    name: planElement.gesture 
+                },
+            }
+        case ("llm"):
+            return {
+                id: planElement.id,
+                goal: planElement.goal,
+            }
+        case ("goal"):
+            return {
+                id: planElement.id,
+                plan: planElement.plan,
+                can_fail: planElement.can_fail,
+            };
+        default:
     }
 }
 

src/pages/VisProgPage/visualProgrammingUI/components/PlanEditor.tsx

@@ -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 [newActionGestureType, setNewActionGestureType] = useState<boolean>(true);
   const [newActionValue, setNewActionValue] = useState("");
   const { setScrollable } = useFlowStore();
 
@@ -58,7 +59,7 @@ export default function PlanEditorDialog({
     case "speech":
      return { id, text: newActionValue, type: "speech" };
     case "gesture":
-        return { id, gesture: newActionValue, type: "gesture" };
+        return { id, gesture: newActionValue, isTag: newActionGestureType, type: "gesture" };
     case "llm":
         return { id, goal: newActionValue, type: "llm" };
     }
@@ -127,6 +128,7 @@ export default function PlanEditorDialog({
                       <GestureValueEditor
                         value={newActionValue}
                         setValue={setNewActionValue}
+                        setType={setNewActionGestureType}
                         placeholder="Gesture name"
                       />
                   ) : (

src/pages/VisProgPage/visualProgrammingUI/nodes/GoalNode.tsx

@@ -65,7 +65,7 @@ export default function GoalNode({id, data}: NodeProps<GoalNode>) {
         
       </div>
       <div>
-        <label> {!data.plan ? "No plan set to execute while goal is not reached. 🔴" : "Will follow plan '" + data.plan.name + "' until goal is met. 🟢"} </label>
+        <label> {!data.plan ? "No plan set to execute while goal is not reached. 🔴" : "Will follow plan '" + data.plan.name + "' until all steps complete. 🟢"} </label>
       </div>
       {data.plan && (<div className={"flex-row gap-md align-center " + (planIterate ? "" : styles.planNoIterate)}>
         {planIterate ? "" : <s></s>}

test/pages/visProgPage/visualProgrammingUI/components/GestureValueEditor.test.tsx

@@ -3,10 +3,11 @@ import userEvent from '@testing-library/user-event';
 import { renderWithProviders, screen } from '../../../../test-utils/test-utils.tsx';
 import GestureValueEditor from '../../../../../src/pages/VisProgPage/visualProgrammingUI/components/GestureValueEditor';
 
-function TestHarness({ initialValue = '', placeholder = 'Gesture name' } : { initialValue?: string, placeholder?: string }) {
+function TestHarness({ initialValue = '', initialType=true, placeholder = 'Gesture name' } : { initialValue?: string, initialType?: boolean, placeholder?: string }) {
   const [value, setValue] = useState(initialValue);
+  const [_, setType] = useState(initialType)
   return (
-    <GestureValueEditor value={value} setValue={setValue} placeholder={placeholder} />
+    <GestureValueEditor value={value} setValue={setValue} setType={setType} placeholder={placeholder} />
   );
 }
 

test/pages/visProgPage/visualProgrammingUI/components/PlanEditor.test.tsx

@@ -4,7 +4,7 @@ import { screen, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { renderWithProviders } from '../../../../test-utils/test-utils.tsx';
 import PlanEditorDialog from '../../../../../src/pages/VisProgPage/visualProgrammingUI/components/PlanEditor';
-import type { Plan } from '../../../../../src/pages/VisProgPage/visualProgrammingUI/components/Plan';
+import { PlanReduce, type Plan } from '../../../../../src/pages/VisProgPage/visualProgrammingUI/components/Plan';
 import '@testing-library/jest-dom';
 
 // Mock structuredClone
@@ -28,12 +28,48 @@ describe('PlanEditorDialog', () => {
     steps: [],
   };
 
+  const extendedPlan: Plan = {
+    id: 'extended-plan-1',
+    name: 'extended test plan',
+    steps: [
+      // Step 1: A wave tag gesture
+      {
+        id: 'firststep',
+        type: 'gesture',
+        isTag: true,
+        gesture: "hello"
+      },
+
+      // Step 2: A single tag gesture
+      {
+        id: 'secondstep',
+        type: 'gesture',
+        isTag: false,
+        gesture: "somefolder/somegesture"
+      },
+
+      // Step 3: A LLM action
+      {
+        id: 'thirdstep',
+        type: 'llm',
+        goal: 'ask the user something or whatever'
+      },
+
+      // Step 4: A speech action
+      {
+        id: 'fourthstep',
+        type: 'speech',
+        text: "I'm a cyborg ninja :>"
+      },
+    ]
+  }
+
   const planWithSteps: Plan = {
     id: 'plan-2',
     name: 'Existing Plan',
     steps: [
       { id: 'step-1', text: 'Hello world', type: 'speech' as const },
-      { id: 'step-2', gesture: 'Wave', type: 'gesture' as const },
+      { id: 'step-2', gesture: 'Wave', isTag:true, type: 'gesture' as const },
     ],
   };
 
@@ -429,4 +465,42 @@ describe('PlanEditorDialog', () => {
       expect(llmInput).toBeInTheDocument();
     });
   });
+
+  describe('Plan reducing', () => {
+    it('should correctly reduce the plan given the elements of the plan', () => {
+        const testplan = extendedPlan
+        const expectedResult = {
+          name: "extended test plan",
+          id: "extended-plan-1",
+          steps: [
+            {
+              id: "firststep",
+              gesture: {
+                type: "tag",
+                name: "hello"
+              }
+            },
+            {
+              id: "secondstep",
+              gesture: {
+                type: "single",
+                name: "somefolder/somegesture"
+              }
+            },
+            {
+              id: "thirdstep",
+              goal: "ask the user something or whatever"
+            },
+            {
+              id: "fourthstep",
+              text: "I'm a cyborg ninja :>"
+            }
+          ]
+        }
+
+        const actualResult = PlanReduce(testplan)
+
+        expect(actualResult).toEqual(expectedResult)
+    });
+  })
 });