From 2ff0936f83502b98102fdd40ee0b8525f3be9bbb Mon Sep 17 00:00:00 2001
From: Handrey Cunha <handrey.cunha@gmail.com>
Date: Thu, 10 Sep 2026 19:00:29 -0400
Subject: [PATCH 1/4] Add dynamic task form generation driven by JSON schema

Signed-off-by: Handrey Cunha <handrey.cunha@gmail.com>

# Conflicts:
#	packages/open-workflow-diagram-editor/src/i18n/locales/en.ts

# Conflicts:
#	packages/open-workflow-diagram-editor/src/side-panel/EditableProperties.tsx
---
 .changeset/form-generation.md                 |   5 +
 .../src/components/ui/combobox.tsx            |  68 +-
 .../src/components/ui/input-group.tsx         |   2 +-
 .../src/components/ui/input.tsx               |   2 +-
 .../src/components/ui/select.tsx              |  39 +
 .../src/components/ui/shadcn.css              |  72 ++
 .../src/components/ui/textarea.tsx            |   2 +-
 .../src/core/index.ts                         |   3 +-
 .../src/core/schemaWalker.ts                  |  80 ++
 .../src/core/taskDetails.ts                   | 124 ---
 .../src/core/taskDraft.ts                     | 194 ++--
 .../src/i18n/locales/en.ts                    |  11 +
 .../src/side-panel/EditFormFooter.tsx         | 140 +--
 .../src/side-panel/EditSession.tsx            |  30 +-
 .../src/side-panel/EditableProperties.tsx     | 134 ---
 .../src/side-panel/FieldControls.tsx          |  76 --
 .../src/side-panel/Fields.tsx                 |  53 --
 .../src/side-panel/NodeDetailsView.tsx        |  27 +-
 .../src/side-panel/SidePanel.css              | 360 ++++++++
 .../src/side-panel/forms/FieldControl.tsx     |  59 ++
 .../src/side-panel/forms/FormField.tsx        | 344 ++++++++
 .../src/side-panel/forms/TaskForm.tsx         | 137 +++
 .../forms/customFields/BooleanControl.tsx     |  52 ++
 .../forms/customFields/ChildTaskListField.tsx |  57 ++
 .../forms/customFields/DurationField.tsx      |  70 ++
 .../forms/customFields/EnumControl.tsx        |  82 ++
 .../forms/customFields/KeyValueMapField.tsx   | 282 ++++++
 .../forms/customFields/NumberControl.tsx      |  84 ++
 .../customFields/ScrollableTextField.tsx      |  64 ++
 .../forms/customFields/StringControl.tsx      |  66 ++
 .../forms/customFields/ThenField.tsx          |  98 ++
 .../forms/customFields/fieldHelpers.tsx       |  54 ++
 .../side-panel/forms/customFields/index.ts    |  26 +
 .../side-panel/forms/schemaToFormFields.ts    | 835 ++++++++++++++++++
 .../src/side-panel/forms/taskFormContext.ts   | 128 +++
 .../side-panel/forms/useSiblingTaskNames.ts   | 111 +++
 .../validation/index.ts}                      |  16 +-
 .../validation/useWorkflowErrorsForForm.ts    |  67 ++
 .../tests/core/taskDetails.test.ts            | 353 --------
 .../tests/core/taskDraft.test.ts              | 169 ++--
 .../tests/fixtures/workflows.ts               |  17 +
 .../tests/side-panel/EditFormFooter.test.tsx  | 182 ++--
 .../side-panel/EditableProperties.test.tsx    | 146 ---
 .../tests/side-panel/FieldControls.test.tsx   | 107 ---
 .../tests/side-panel/NodeDetailsView.test.tsx | 152 ++--
 .../side-panel/ReadOnlyProperties.test.tsx    |  97 --
 .../tests/side-panel/SidePanel.test.tsx       |  85 +-
 .../side-panel/forms/DurationField.test.ts    |  67 ++
 .../forms/KeyValueMapField.test.tsx           | 137 +++
 .../side-panel/forms/NumberControl.test.tsx   | 115 +++
 .../side-panel/forms/fieldHelpers.test.tsx    |  83 ++
 .../side-panel/forms/flattenTask.test.ts      | 135 +++
 .../forms/schemaToFormFields.test.ts          |  67 ++
 .../side-panel/forms/taskFormContext.test.ts  | 252 ++++++
 .../forms/useSiblingTaskNames.test.ts         | 137 +++
 55 files changed, 4720 insertions(+), 1635 deletions(-)
 create mode 100644 .changeset/form-generation.md
 create mode 100644 packages/open-workflow-diagram-editor/src/components/ui/select.tsx
 create mode 100644 packages/open-workflow-diagram-editor/src/core/schemaWalker.ts
 delete mode 100644 packages/open-workflow-diagram-editor/src/core/taskDetails.ts
 delete mode 100644 packages/open-workflow-diagram-editor/src/side-panel/EditableProperties.tsx
 delete mode 100644 packages/open-workflow-diagram-editor/src/side-panel/FieldControls.tsx
 create mode 100644 packages/open-workflow-diagram-editor/src/side-panel/forms/FieldControl.tsx
 create mode 100644 packages/open-workflow-diagram-editor/src/side-panel/forms/FormField.tsx
 create mode 100644 packages/open-workflow-diagram-editor/src/side-panel/forms/TaskForm.tsx
 create mode 100644 packages/open-workflow-diagram-editor/src/side-panel/forms/customFields/BooleanControl.tsx
 create mode 100644 packages/open-workflow-diagram-editor/src/side-panel/forms/customFields/ChildTaskListField.tsx
 create mode 100644 packages/open-workflow-diagram-editor/src/side-panel/forms/customFields/DurationField.tsx
 create mode 100644 packages/open-workflow-diagram-editor/src/side-panel/forms/customFields/EnumControl.tsx
 create mode 100644 packages/open-workflow-diagram-editor/src/side-panel/forms/customFields/KeyValueMapField.tsx
 create mode 100644 packages/open-workflow-diagram-editor/src/side-panel/forms/customFields/NumberControl.tsx
 create mode 100644 packages/open-workflow-diagram-editor/src/side-panel/forms/customFields/ScrollableTextField.tsx
 create mode 100644 packages/open-workflow-diagram-editor/src/side-panel/forms/customFields/StringControl.tsx
 create mode 100644 packages/open-workflow-diagram-editor/src/side-panel/forms/customFields/ThenField.tsx
 create mode 100644 packages/open-workflow-diagram-editor/src/side-panel/forms/customFields/fieldHelpers.tsx
 create mode 100644 packages/open-workflow-diagram-editor/src/side-panel/forms/customFields/index.ts
 create mode 100644 packages/open-workflow-diagram-editor/src/side-panel/forms/schemaToFormFields.ts
 create mode 100644 packages/open-workflow-diagram-editor/src/side-panel/forms/taskFormContext.ts
 create mode 100644 packages/open-workflow-diagram-editor/src/side-panel/forms/useSiblingTaskNames.ts
 rename packages/open-workflow-diagram-editor/src/side-panel/{ReadOnlyProperties.tsx => forms/validation/index.ts} (62%)
 create mode 100644 packages/open-workflow-diagram-editor/src/side-panel/forms/validation/useWorkflowErrorsForForm.ts
 delete mode 100644 packages/open-workflow-diagram-editor/tests/core/taskDetails.test.ts
 delete mode 100644 packages/open-workflow-diagram-editor/tests/side-panel/EditableProperties.test.tsx
 delete mode 100644 packages/open-workflow-diagram-editor/tests/side-panel/FieldControls.test.tsx
 delete mode 100644 packages/open-workflow-diagram-editor/tests/side-panel/ReadOnlyProperties.test.tsx
 create mode 100644 packages/open-workflow-diagram-editor/tests/side-panel/forms/DurationField.test.ts
 create mode 100644 packages/open-workflow-diagram-editor/tests/side-panel/forms/KeyValueMapField.test.tsx
 create mode 100644 packages/open-workflow-diagram-editor/tests/side-panel/forms/NumberControl.test.tsx
 create mode 100644 packages/open-workflow-diagram-editor/tests/side-panel/forms/fieldHelpers.test.tsx
 create mode 100644 packages/open-workflow-diagram-editor/tests/side-panel/forms/flattenTask.test.ts
 create mode 100644 packages/open-workflow-diagram-editor/tests/side-panel/forms/schemaToFormFields.test.ts
 create mode 100644 packages/open-workflow-diagram-editor/tests/side-panel/forms/taskFormContext.test.ts
 create mode 100644 packages/open-workflow-diagram-editor/tests/side-panel/forms/useSiblingTaskNames.test.ts

diff --git a/.changeset/form-generation.md b/.changeset/form-generation.md
new file mode 100644
index 00000000..65d29697
--- /dev/null
+++ b/.changeset/form-generation.md
@@ -0,0 +1,5 @@
+---
+"@openworkflowspec/diagram-editor": minor
+---
+
+Add dynamic task form generation driven by JSON schema.
diff --git a/packages/open-workflow-diagram-editor/src/components/ui/combobox.tsx b/packages/open-workflow-diagram-editor/src/components/ui/combobox.tsx
index 6e8ecb4e..487e5efa 100644
--- a/packages/open-workflow-diagram-editor/src/components/ui/combobox.tsx
+++ b/packages/open-workflow-diagram-editor/src/components/ui/combobox.tsx
@@ -22,12 +22,6 @@ import { CheckIcon, ChevronDownIcon, XIcon } from "lucide-react";
 
 import { cn } from "@/lib/utils";
 import { Button } from "@/components/ui/button";
-import {
-  InputGroup,
-  InputGroupAddon,
-  InputGroupButton,
-  InputGroupInput,
-} from "@/components/ui/input-group";
 
 const Combobox = ComboboxPrimitive.Root;
 
@@ -45,7 +39,7 @@ function ComboboxTrigger({ className, children, ...props }: ComboboxPrimitive.Tr
       {children}
       <ChevronDownIcon
         data-slot="combobox-trigger-icon"
-        className="dec:pointer-events-none dec:size-4 dec:text-slate-500 dec:dark:text-slate-400"
+        className="dec:pointer-events-none dec:size-4 dec:shrink-0 dec:text-slate-500 dec:dark:text-slate-400"
       />
     </ComboboxPrimitive.Trigger>
   );
@@ -55,11 +49,13 @@ function ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {
   return (
     <ComboboxPrimitive.Clear
       data-slot="combobox-clear"
-      render={<InputGroupButton variant="ghost" size="icon-xs" />}
-      className={cn(className)}
+      className={cn(
+        "dec:inline-flex dec:items-center dec:justify-center dec:size-6 dec:rounded-md dec:hover:bg-transparent dec:dark:hover:bg-transparent",
+        className,
+      )}
       {...props}
     >
-      <XIcon className="dec:pointer-events-none" />
+      <XIcon className="dec:pointer-events-none dec:size-3.5" />
     </ComboboxPrimitive.Clear>
   );
 }
@@ -76,32 +72,36 @@ function ComboboxInput({
   showClear?: boolean;
 }) {
   return (
-    <InputGroup className={cn("dec:w-auto", className)}>
-      <ComboboxPrimitive.Input render={<InputGroupInput disabled={disabled} />} {...props} />
-      <InputGroupAddon align="inline-end">
-        {showTrigger && (
-          <InputGroupButton
-            size="icon-xs"
-            variant="ghost"
-            asChild
-            data-slot="input-group-button"
-            className="dec:group-has-data-[slot=combobox-clear]/input-group:hidden dec:data-pressed:bg-transparent"
-            disabled={disabled}
-          >
-            <ComboboxTrigger />
-          </InputGroupButton>
-        )}
-        {showClear && <ComboboxClear disabled={disabled} />}
-      </InputGroupAddon>
+    <ComboboxPrimitive.Trigger
+      data-slot="combobox-input-wrap"
+      className={cn(
+        "dec:relative dec:flex dec:w-full dec:items-center dec:rounded-md dec:border dec:border-input dec:bg-transparent dec:shadow-xs dec:transition-[color,box-shadow] dec:outline-none",
+        "dec:dark:bg-input/30",
+        "dec:focus-within:border-ring dec:focus-within:ring-[3px] dec:focus-within:ring-ring/50",
+        "dec:has-[[aria-invalid=true]]:border-destructive dec:has-[[aria-invalid=true]]:ring-destructive/20 dec:dark:has-[[aria-invalid=true]]:ring-destructive/40",
+        "dec:disabled:pointer-events-none dec:disabled:opacity-50",
+        className,
+      )}
+    >
+      <ComboboxPrimitive.Input
+        data-slot="combobox-input"
+        className="dec:h-7 dec:min-w-0 dec:flex-1 dec:bg-transparent dec:px-2 dec:text-xs dec:outline-none dec:placeholder:text-muted-foreground dec:disabled:cursor-not-allowed"
+        disabled={disabled}
+        {...props}
+      />
+      {showClear && <ComboboxClear disabled={disabled} />}
+      {showTrigger && (
+        <ChevronDownIcon className="dec:pointer-events-none dec:mr-2 dec:size-4 dec:shrink-0 dec:text-slate-500 dec:dark:text-slate-400" />
+      )}
       {children}
-    </InputGroup>
+    </ComboboxPrimitive.Trigger>
   );
 }
 
 function ComboboxContent({
   className,
   side = "bottom",
-  sideOffset = 6,
+  sideOffset = 4,
   align = "start",
   alignOffset = 0,
   anchor,
@@ -111,8 +111,12 @@ function ComboboxContent({
     ComboboxPrimitive.Positioner.Props,
     "side" | "align" | "sideOffset" | "alignOffset" | "anchor"
   >) {
+  const [container, setContainer] = React.useState<HTMLElement | null>(null);
+  React.useEffect(() => {
+    setContainer(document.querySelector<HTMLElement>(".dec-root"));
+  }, []);
   return (
-    <ComboboxPrimitive.Portal>
+    <ComboboxPrimitive.Portal container={container}>
       <ComboboxPrimitive.Positioner
         side={side}
         sideOffset={sideOffset}
@@ -125,7 +129,7 @@ function ComboboxContent({
           data-slot="combobox-content"
           data-chips={!!anchor}
           className={cn(
-            "dec:group/combobox-content dec:relative dec:max-h-96 dec:w-(--anchor-width) dec:max-w-(--available-width) dec:min-w-[calc(var(--anchor-width)+--spacing(7))] dec:origin-(--transform-origin) dec:overflow-hidden dec:rounded-md  dec:shadow-md dec:ring-1 dec:bg-white dec:text-slate-900 dec:border dec:border-slate-200 dec:shadow-lg dec:dark:bg-[#1f2937] dec:dark:text-slate-100 dec:dark:border-slate-700 dec:duration-100 dec:data-[chips=true]:min-w-(--anchor-width) dec:data-[side=bottom]:slide-in-from-top-2 dec:data-[side=left]:slide-in-from-right-2 dec:data-[side=right]:slide-in-from-left-2 dec:data-[side=top]:slide-in-from-bottom-2 dec:*:data-[slot=input-group]:m-1 dec:*:data-[slot=input-group]:mb-0 dec:*:data-[slot=input-group]:h-8 dec:*:data-[slot=input-group]:border-input/30 dec:*:data-[slot=input-group]:bg-input/30 dec:*:data-[slot=input-group]:shadow-none dec:data-open:animate-in dec:data-open:fade-in-0 dec:data-open:zoom-in-95 dec:data-closed:animate-out dec:data-closed:fade-out-0 dec:data-closed:zoom-out-95",
+            "dec:group/combobox-content dec:relative dec:max-h-96 dec:w-(--anchor-width) dec:max-w-(--available-width) dec:min-w-[calc(var(--anchor-width)+--spacing(7))] dec:origin-(--transform-origin) dec:overflow-hidden dec:rounded-md dec:shadow-lg dec:bg-white dec:text-slate-900 dec:border dec:border-slate-200 dec:dark:bg-[#1f2937] dec:dark:text-slate-100 dec:dark:border-slate-700/50 dec:dark:shadow-[0_4px_16px_rgba(0,0,0,0.5)] dec:duration-100 dec:data-[chips=true]:min-w-(--anchor-width) dec:data-[side=bottom]:slide-in-from-top-2 dec:data-[side=left]:slide-in-from-right-2 dec:data-[side=right]:slide-in-from-left-2 dec:data-[side=top]:slide-in-from-bottom-2 dec:*:data-[slot=input-group]:m-1 dec:*:data-[slot=input-group]:mb-0 dec:*:data-[slot=input-group]:h-8 dec:*:data-[slot=input-group]:border-input/30 dec:*:data-[slot=input-group]:bg-input/30 dec:*:data-[slot=input-group]:shadow-none dec:data-open:animate-in dec:data-open:fade-in-0 dec:data-open:zoom-in-95 dec:data-closed:animate-out dec:data-closed:fade-out-0 dec:data-closed:zoom-out-95",
             className,
           )}
           {...props}
@@ -153,7 +157,7 @@ function ComboboxItem({ className, children, ...props }: ComboboxPrimitive.Item.
     <ComboboxPrimitive.Item
       data-slot="combobox-item"
       className={cn(
-        "dec:relative dec:flex dec:w-full dec:cursor-default dec:items-center dec:gap-2 dec:rounded-sm dec:py-1.5 dec:pr-8 dec:pl-2 dec:text-sm dec:outline-hidden dec:select-none dec:data-highlighted:bg-slate-100 dec:data-highlighted:text-slate-900 dec:dark:data-highlighted:bg-slate-700 dec:dark:data-highlighted:text-white dec:data-[disabled]:pointer-events-none dec:data-[disabled]:opacity-50 dec:[&_svg]:pointer-events-none dec:[&_svg]:shrink-0 dec:[&_svg:not([class*=size-])]:size-4",
+        "dec:relative dec:flex dec:w-full dec:cursor-default dec:items-center dec:gap-2 dec:rounded-sm dec:py-1.5 dec:pr-8 dec:pl-2 dec:text-sm dec:outline-hidden dec:select-none dec:data-highlighted:bg-slate-100 dec:data-highlighted:text-slate-900 dec:dark:data-highlighted:bg-blue-600 dec:dark:data-highlighted:text-white dec:data-[disabled]:pointer-events-none dec:data-[disabled]:opacity-50 dec:[&_svg]:pointer-events-none dec:[&_svg]:shrink-0 dec:[&_svg:not([class*=size-])]:size-4",
         className,
       )}
       {...props}
diff --git a/packages/open-workflow-diagram-editor/src/components/ui/input-group.tsx b/packages/open-workflow-diagram-editor/src/components/ui/input-group.tsx
index fcb9d060..33825aac 100644
--- a/packages/open-workflow-diagram-editor/src/components/ui/input-group.tsx
+++ b/packages/open-workflow-diagram-editor/src/components/ui/input-group.tsx
@@ -146,7 +146,7 @@ function InputGroupInput({ className, ...props }: React.ComponentProps<"input">)
     <Input
       data-slot="input-group-control"
       className={cn(
-        "dec:flex-1 dec:rounded-none dec:border-0 dec:bg-transparent dec:shadow-none dec:focus-visible:ring-0 dec:dark:bg-transparent",
+        "dec:flex-1 dec:rounded-none dec:border-0 dec:bg-transparent dec:shadow-none dec:focus-visible:ring-0 dec:focus-visible:border-transparent dec:dark:bg-transparent",
         className,
       )}
       {...props}
diff --git a/packages/open-workflow-diagram-editor/src/components/ui/input.tsx b/packages/open-workflow-diagram-editor/src/components/ui/input.tsx
index c13d40b8..7c9003ba 100644
--- a/packages/open-workflow-diagram-editor/src/components/ui/input.tsx
+++ b/packages/open-workflow-diagram-editor/src/components/ui/input.tsx
@@ -24,7 +24,7 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
       type={type}
       data-slot="input"
       className={cn(
-        "dec:h-9 dec:w-full dec:min-w-0 dec:rounded-md dec:border dec:border-input dec:bg-transparent dec:px-3 dec:py-1 dec:text-base dec:shadow-xs dec:transition-[color,box-shadow] dec:outline-none dec:selection:bg-primary dec:selection:text-primary-foreground dec:file:inline-flex dec:file:h-7 dec:file:border-0 dec:file:bg-transparent dec:file:text-sm dec:file:font-medium dec:file:text-foreground dec:placeholder:text-muted-foreground dec:disabled:pointer-events-none dec:disabled:cursor-not-allowed dec:disabled:opacity-50 dec:md:text-sm dec:dark:bg-input/30",
+        "dec:h-7 dec:w-full dec:min-w-0 dec:rounded-md dec:border dec:border-input dec:bg-transparent dec:px-2 dec:py-0.5 dec:text-xs dec:shadow-xs dec:transition-[color,box-shadow] dec:outline-none dec:selection:bg-primary dec:selection:text-primary-foreground dec:file:inline-flex dec:file:h-6 dec:file:border-0 dec:file:bg-transparent dec:file:text-xs dec:file:font-medium dec:file:text-foreground dec:placeholder:text-muted-foreground dec:disabled:pointer-events-none dec:disabled:cursor-not-allowed dec:disabled:opacity-50 dec:dark:bg-input/30",
         "dec:focus-visible:border-ring dec:focus-visible:ring-[3px] dec:focus-visible:ring-ring/50",
         "dec:aria-invalid:border-destructive dec:aria-invalid:ring-destructive/20 dec:dark:aria-invalid:ring-destructive/40",
         className,
diff --git a/packages/open-workflow-diagram-editor/src/components/ui/select.tsx b/packages/open-workflow-diagram-editor/src/components/ui/select.tsx
new file mode 100644
index 00000000..b8f5e78d
--- /dev/null
+++ b/packages/open-workflow-diagram-editor/src/components/ui/select.tsx
@@ -0,0 +1,39 @@
+/*
+ * Copyright 2021-Present The Open Workflow Specification Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+/**
+ * Styled native `<select>` element consistent with the project's Input component.
+ */
+function Select({ className, ...props }: React.ComponentProps<"select">) {
+  return (
+    <select
+      data-slot="select"
+      className={cn(
+        "dec:h-7 dec:w-full dec:min-w-0 dec:rounded-md dec:border dec:border-input dec:bg-transparent dec:px-2 dec:py-0.5 dec:text-xs dec:shadow-xs dec:transition-[color,box-shadow] dec:outline-none",
+        "dec:disabled:pointer-events-none dec:disabled:cursor-not-allowed dec:disabled:opacity-50 dec:dark:bg-input/30",
+        "dec:focus-visible:border-ring dec:focus-visible:ring-[3px] dec:focus-visible:ring-ring/50",
+        "dec:aria-invalid:border-destructive dec:aria-invalid:ring-destructive/20 dec:dark:aria-invalid:ring-destructive/40",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Select };
diff --git a/packages/open-workflow-diagram-editor/src/components/ui/shadcn.css b/packages/open-workflow-diagram-editor/src/components/ui/shadcn.css
index 1fc2d5b5..eaf53025 100644
--- a/packages/open-workflow-diagram-editor/src/components/ui/shadcn.css
+++ b/packages/open-workflow-diagram-editor/src/components/ui/shadcn.css
@@ -31,10 +31,34 @@
 
   --background: hsl(0 0% 100%);
 
+  --foreground: hsl(222.2 84% 4.9%);
+
   --border: hsl(220 13% 91%);
 
   --input: hsl(220 13% 91%);
 
+  --ring: #2563eb;
+
+  --muted: hsl(210 40% 96.1%);
+
+  --muted-foreground: hsl(215.4 16.3% 46.9%);
+
+  --destructive: hsl(0 84.2% 60.2%);
+
+  --destructive-foreground: hsl(210 40% 98%);
+
+  --secondary: hsl(210 40% 96.1%);
+
+  --secondary-foreground: hsl(222.2 47.4% 11.2%);
+
+  --card: hsl(0 0% 100%);
+
+  --card-foreground: hsl(222.2 84% 4.9%);
+
+  --popover: hsl(0 0% 100%);
+
+  --popover-foreground: hsl(222.2 84% 4.9%);
+
   --accent: hsl(240 4.8% 95.9%);
 
   --accent-foreground: hsl(240 5.9% 10%);
@@ -67,10 +91,34 @@
 
   --background: var(--dec-surface-dark);
 
+  --foreground: hsl(210 40% 98%);
+
   --border: var(--dec-surface-dark-line);
 
   --input: var(--dec-surface-dark-line);
 
+  --ring: #3b82f6;
+
+  --muted: var(--dec-surface-dark-elevated);
+
+  --muted-foreground: hsl(215 20.2% 65.1%);
+
+  --destructive: hsl(0 62.8% 30.6%);
+
+  --destructive-foreground: hsl(210 40% 98%);
+
+  --secondary: var(--dec-surface-dark-elevated);
+
+  --secondary-foreground: hsl(210 40% 98%);
+
+  --card: var(--dec-surface-dark-raised);
+
+  --card-foreground: hsl(210 40% 98%);
+
+  --popover: var(--dec-surface-dark-raised);
+
+  --popover-foreground: hsl(210 40% 98%);
+
   --accent: var(--dec-surface-dark-line);
 
   --accent-foreground: hsl(0 0% 98%);
@@ -103,10 +151,34 @@
 
   --color-background: var(--background);
 
+  --color-foreground: var(--foreground);
+
   --color-border: var(--border);
 
   --color-input: var(--input);
 
+  --color-ring: var(--ring);
+
+  --color-muted: var(--muted);
+
+  --color-muted-foreground: var(--muted-foreground);
+
+  --color-destructive: var(--destructive);
+
+  --color-destructive-foreground: var(--destructive-foreground);
+
+  --color-secondary: var(--secondary);
+
+  --color-secondary-foreground: var(--secondary-foreground);
+
+  --color-card: var(--card);
+
+  --color-card-foreground: var(--card-foreground);
+
+  --color-popover: var(--popover);
+
+  --color-popover-foreground: var(--popover-foreground);
+
   --color-accent: var(--accent);
 
   --color-accent-foreground: var(--accent-foreground);
diff --git a/packages/open-workflow-diagram-editor/src/components/ui/textarea.tsx b/packages/open-workflow-diagram-editor/src/components/ui/textarea.tsx
index ce505105..749205b1 100644
--- a/packages/open-workflow-diagram-editor/src/components/ui/textarea.tsx
+++ b/packages/open-workflow-diagram-editor/src/components/ui/textarea.tsx
@@ -23,7 +23,7 @@ function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
     <textarea
       data-slot="textarea"
       className={cn(
-        "dec:flex dec:field-sizing-content dec:min-h-16 dec:w-full dec:rounded-md dec:border dec:border-slate-300 dec:bg-white dec:px-3 dec:py-2 dec:text-base dec:text-slate-900 dec:placeholder:text-slate-400 dec:shadow-xs dec:transition-[border-color,box-shadow] dec:outline-none dec:hover:border-slate-400 dec:focus-visible:border-blue-500 dec:focus-visible:ring-[3px] dec:focus-visible:ring-blue-500/20 dec:disabled:cursor-not-allowed dec:disabled:opacity-50 dec:aria-invalid:border-red-500 dec:aria-invalid:ring-[3px] dec:aria-invalid:ring-red-500/20 dec:md:text-sm dec:dark:border-slate-600 dec:dark:bg-[#1f2937] dec:dark:text-slate-100 dec:dark:placeholder:text-slate-400 dec:dark:hover:border-slate-500 dec:dark:focus-visible:border-blue-400 dec:dark:focus-visible:ring-blue-400/20",
+        "dec:flex dec:field-sizing-content dec:min-h-[60px] dec:w-full dec:rounded-md dec:border dec:border-input dec:bg-transparent dec:px-2 dec:py-1.5 dec:text-xs dec:placeholder:text-muted-foreground dec:shadow-xs dec:transition-[border-color,box-shadow] dec:outline-none dec:hover:border-ring/50 dec:focus-visible:border-ring dec:focus-visible:ring-[3px] dec:focus-visible:ring-ring/50 dec:disabled:cursor-not-allowed dec:disabled:opacity-50 dec:aria-invalid:border-destructive dec:aria-invalid:ring-[3px] dec:aria-invalid:ring-destructive/20 dec:dark:bg-input/30",
         className,
       )}
       {...props}
diff --git a/packages/open-workflow-diagram-editor/src/core/index.ts b/packages/open-workflow-diagram-editor/src/core/index.ts
index 407547e2..92698113 100644
--- a/packages/open-workflow-diagram-editor/src/core/index.ts
+++ b/packages/open-workflow-diagram-editor/src/core/index.ts
@@ -18,11 +18,12 @@ export * from "./workflowSdk";
 export * from "./workflowEditing";
 export * from "./validationErrors";
 export * from "./graph";
-export * from "./taskDetails";
 export * from "./taskDraft";
 export * from "./taskSubType";
 export * from "./elkjs";
 export * from "./mermaidExport";
 export * from "./schemaFilter";
+export * from "./schemaWalker";
+export * from "./structuralEqual";
 /* TEMPORARY — remove with the workaround; see the revert checklist in workflowSdk.ts. */
 export * from "./specWorkarounds";
diff --git a/packages/open-workflow-diagram-editor/src/core/schemaWalker.ts b/packages/open-workflow-diagram-editor/src/core/schemaWalker.ts
new file mode 100644
index 00000000..c1f7230c
--- /dev/null
+++ b/packages/open-workflow-diagram-editor/src/core/schemaWalker.ts
@@ -0,0 +1,80 @@
+/*
+ * Copyright 2021-Present The Open Workflow Specification Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { GraphNodeType } from "@openworkflowspec/sdk";
+import { CATCH_CONTAINER_NODE_TYPE } from "@/react-flow/nodes/taskNodeConfig";
+import { getSchemaForDefinition } from "./schemaFilter";
+import { schemaToFormFields } from "@/side-panel/forms/schemaToFormFields";
+import type { FormFieldDescriptor } from "@/side-panel/forms/schemaToFormFields";
+
+// ---------------------------------------------------------------------------
+// Node-type → schema definition-name mapping
+//
+// Maps every graph node type to the `$defs` key that describes its schema.
+// Catch nodes share the tryTask schema because `try.catch` is inlined there.
+// ---------------------------------------------------------------------------
+
+const NODE_TYPE_TO_DEF: Readonly<Record<string, string>> = {
+  [GraphNodeType.Call]: "callTask",
+  [GraphNodeType.Do]: "doTask",
+  [GraphNodeType.Emit]: "emitTask",
+  [GraphNodeType.For]: "forTask",
+  [GraphNodeType.Fork]: "forkTask",
+  [GraphNodeType.Listen]: "listenTask",
+  [GraphNodeType.Raise]: "raiseTask",
+  [GraphNodeType.Run]: "runTask",
+  [GraphNodeType.Set]: "setTask",
+  [GraphNodeType.Switch]: "switchTask",
+  [GraphNodeType.Try]: "tryTask",
+  [GraphNodeType.Wait]: "waitTask",
+  [GraphNodeType.Catch]: "tryTask",
+  [CATCH_CONTAINER_NODE_TYPE]: "tryTask",
+} as const;
+
+// ---------------------------------------------------------------------------
+// Field cache — avoids re-walking the same schema on every render
+// ---------------------------------------------------------------------------
+
+const _fieldCache = new Map<string, FormFieldDescriptor[]>();
+
+/**
+ * Returns the ordered list of `FormFieldDescriptor`s for a given graph node
+ * type, or an empty array when no schema definition is registered for it.
+ *
+ * Results are cached by node type so the schema walk only happens once per
+ * definition. The cache is module-scoped and lives for the lifetime of the
+ * application — schemas do not change at runtime.
+ */
+export function getFormFieldsForNodeType(nodeType: string): FormFieldDescriptor[] {
+  const cached = _fieldCache.get(nodeType);
+  if (cached !== undefined) return cached;
+
+  const defName = NODE_TYPE_TO_DEF[nodeType];
+  if (!defName) return [];
+
+  try {
+    const s = getSchemaForDefinition(defName);
+    const defs = s.$defs as Record<string, unknown> | undefined;
+    const requiredSet = new Set<string>(Array.isArray(s.required) ? (s.required as string[]) : []);
+    const fields = schemaToFormFields(s, defs, requiredSet, "");
+    _fieldCache.set(nodeType, fields);
+    return fields;
+  } catch {
+    return [];
+  }
+}
+
+export type { FormFieldDescriptor };
diff --git a/packages/open-workflow-diagram-editor/src/core/taskDetails.ts b/packages/open-workflow-diagram-editor/src/core/taskDetails.ts
deleted file mode 100644
index 2eab6828..00000000
--- a/packages/open-workflow-diagram-editor/src/core/taskDetails.ts
+++ /dev/null
@@ -1,124 +0,0 @@
-/*
- * Copyright 2021-Present The Open Workflow Specification Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import type { Specification } from "@openworkflowspec/sdk";
-
-/* TaskBase: Common fields every task inherits (none required) (metadata is dropped for now) */
-const TASK_BASE_KEYS = new Set(["if", "input", "output", "export", "timeout", "then", "metadata"]);
-
-/* Number of object levels to expand into dot-notation rows */
-const MAX_DEPTH = 4;
-
-/* Flattened task row"
-    - kind: how the view should render it 
-    - label: the dot-joined display label(`with.method`)
-    - segments: the real key path and source of truth 
-*/
-type DetailFieldBase = { label: string; segments: string[] };
-
-export type DetailField =
-  | (DetailFieldBase & { kind: "scalar"; value: string | number | boolean })
-  /* TODO: Temporary until rendering arrays and objects */
-  | (DetailFieldBase & { kind: "array"; count: number })
-  | (DetailFieldBase & { kind: "object" });
-
-function isPlainObject(value: unknown): value is Record<string, unknown> {
-  return typeof value === "object" && value !== null && !Array.isArray(value);
-}
-
-function flattenFields(
-  value: unknown,
-  segments: string[],
-  depth: number = 0,
-  outputFields: DetailField[] = [],
-): void {
-  if (value === undefined || value === null) {
-    return;
-  }
-
-  const label = segments.join(".");
-
-  if (Array.isArray(value)) {
-    outputFields.push({ label, segments, kind: "array", count: value.length });
-    return;
-  }
-
-  if (isPlainObject(value)) {
-    if (depth >= MAX_DEPTH) {
-      /* Too deep - bare path, full value available in Source */
-      outputFields.push({ label, segments, kind: "object" });
-      return;
-    }
-
-    for (const [key, val] of Object.entries(value)) {
-      flattenFields(val, [...segments, key], depth + 1, outputFields);
-    }
-
-    return;
-  }
-
-  if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") {
-    outputFields.push({
-      label,
-      segments,
-      kind: "scalar",
-      value,
-    });
-  }
-}
-
-/* Builds the flattened detail rows for a task: task-specific fields first, inherited base fields last */
-export function getTaskDetails(task: Specification.Task): DetailField[] {
-  const record = task as Record<string, unknown>;
-  const nested = (key: string): Record<string, unknown> | undefined => {
-    const value = record[key];
-    return isPlainObject(value) ? value : undefined;
-  };
-
-  // Handle timeout as it can be a string or an object (after)
-  const timeoutSource =
-    typeof record.timeout === "string"
-      ? { segments: ["timeout"], value: record.timeout }
-      : {
-          segments: ["timeout", "after"],
-          value: nested("timeout")?.after,
-        };
-
-  /* Base fields, each labelled with its dsl path */
-  const baseSources: Array<{ segments: string[]; value: unknown }> = [
-    { segments: ["if"], value: record.if },
-    { segments: ["input", "from"], value: nested("input")?.from },
-    { segments: ["output", "as"], value: nested("output")?.as },
-    { segments: ["export", "as"], value: nested("export")?.as },
-    timeoutSource,
-    { segments: ["then"], value: record.then },
-  ];
-
-  const base: DetailField[] = [];
-  for (const { segments, value } of baseSources) {
-    flattenFields(value, segments, 0, base);
-  }
-
-  /* Top level keys (base keys and metadata excluded) */
-  const specific: DetailField[] = [];
-  for (const [key, value] of Object.entries(record)) {
-    if (!TASK_BASE_KEYS.has(key)) {
-      flattenFields(value, [key], 0, specific);
-    }
-  }
-
-  return [...specific, ...base];
-}
diff --git a/packages/open-workflow-diagram-editor/src/core/taskDraft.ts b/packages/open-workflow-diagram-editor/src/core/taskDraft.ts
index b272d7cf..69597cac 100644
--- a/packages/open-workflow-diagram-editor/src/core/taskDraft.ts
+++ b/packages/open-workflow-diagram-editor/src/core/taskDraft.ts
@@ -14,83 +14,143 @@
  * limitations under the License.
  */
 
-import type { Specification } from "@openworkflowspec/sdk";
-
-/*
- * This module bridges react-hook-form (which uses string field names) with nested task objects                                      
- * (which have deep property paths). It solves a critical problem: react-hook-form interprets                                                                                                                  
- * dots (.), brackets ([]), and slashes (/) as path separators, but workflow task properties  
- * can contain these characters as literal parts of their keys.
+/**
+ * Reconstructs a nested task object from the flat dot-notation form values
+ * produced by `flattenTask` in TaskForm. Arrays (child-task-list values) are
+ * kept as-is.
+ *
+ * For example:
+ *   `{ "for.each": "${items}", "for.in": "${data}" }`
+ * becomes:
+ *   `{ for: { each: "${items}", in: "${data}" } }`
+ *
+ * Empty strings, null, and undefined values are omitted so the resulting
+ * object only carries properties that were actually set.
  */
- 
-export type FieldChange = { segments: string[], value: unknown };
-
-const UNSAFE_SEGMENT_CHARS = /[%./[\]]/g;
-const ESCAPE_SEQUENCE = /%([0-9A-F]{2})/g;
-
-// Escapes special characters in a single path segment to prevent react-hook-form from misinterpreting them
-const encodeSegment = (segment: string): string =>
-    segment.replace(UNSAFE_SEGMENT_CHARS,(char) => `%${char.charCodeAt(0).toString(16).toUpperCase().padStart(2, "0")}`
-);
-
-// Reverses the encoding to get back the original key name
-const decodeSegment = (segment: string): string =>
-    segment.replace(ESCAPE_SEQUENCE,(_match, hex: string) =>
-    String.fromCharCode(Number.parseInt(hex, 16))
-);
-
-// Converts a property path array into a single encoded string for react-hook-form
-export function fieldName(segments: string[]): string {
-    return segments.map(encodeSegment).join("/");
-}
-
-// Converts an encoded field name back into the original property path array
-export function parseFieldName(name: string): string[] {
-    return name.split("/").map(decodeSegment);
+export function unflattenValues(flat: Record<string, unknown>): Record<string, unknown> {
+  const result: Record<string, unknown> = {};
+  for (const [dotPath, value] of Object.entries(flat)) {
+    if (value === undefined || value === null || value === "") continue;
+    const parts = dotPath.split(".");
+    let current = result;
+    for (let i = 0; i < parts.length - 1; i++) {
+      const part = parts[i]!;
+      if (
+        current[part] === undefined ||
+        typeof current[part] !== "object" ||
+        Array.isArray(current[part])
+      ) {
+        current[part] = {};
+      }
+      current = current[part] as Record<string, unknown>;
+    }
+    current[parts[parts.length - 1]!] = value;
+  }
+  return result;
 }
 
-// Writes a value to a deeply nested property path, creating intermediate objects as needed.
-function writeAtSegments(target: Record<string, unknown>, change: FieldChange): void {
-    const {segments, value} = change;
-    const leafKey = segments[segments.length - 1];
-
-    if(leafKey === undefined) {
-        return
+/**
+ * Produces an updated task by applying only the dirty form fields onto a deep
+ * clone of the original task.
+ *
+ * The form may render optional sections (e.g. `input`, `output`, `export`)
+ * whose fields all have empty / falsy default values. Reconstructing the task
+ * purely from `getValues()` would inject empty intermediate objects such as
+ * `{ input: { schema: {} } }` that cause the SDK to report missing-required-
+ * property errors for fields the user never intended to fill in.
+ *
+ * By starting from the original task and writing only the paths that the user
+ * actually changed, untouched optional sections are left exactly as they were
+ * — either with their original values or simply absent.
+ *
+ * @param original   - The current task snapshot held in the store, used as
+ *                     the base for the deep clone.
+ * @param allValues  - All flat dot-notation form values from `form.getValues()`.
+ * @param dirtyPaths - Set of dot-notation paths that are dirty according to
+ *                     react-hook-form's `dirtyFields` (top-level keys only is
+ *                     sufficient because `KeyValueMapField` registers individual
+ *                     leaf paths under the map prefix).
+ */
+export function applyDirtyValues(
+  original: Record<string, unknown>,
+  allValues: Record<string, unknown>,
+  dirtyPaths: Set<string>,
+): Record<string, unknown> {
+  // Deep clone the original so we never mutate the store value.
+  const result = deepClone(original);
+
+  for (const [dotPath, value] of Object.entries(allValues)) {
+    if (!isDirtyPath(dotPath, dirtyPaths)) continue;
+
+    // A dirty path with an empty / null value means the user cleared the
+    // field — delete it from the clone rather than writing an empty string.
+    if (value === undefined || value === null || value === "") {
+      deletePath(result, dotPath.split("."));
+    } else {
+      setPath(result, dotPath.split("."), value);
     }
+  }
 
-    let node = target
-
-    for (const segment of segments.slice(0, -1)) {
-        const next = node[segment]
+  return result;
+}
 
-        if(Array.isArray(next)) {
-            // TODO not handled yet
-            throw new Error("array editing not implemented yet")
-        } 
+// ---------------------------------------------------------------------------
+// Private helpers
+// ---------------------------------------------------------------------------
 
-        if(typeof next !== "object" || next === null){
-            node[segment] = {}
-        }
+function deepClone<T>(value: T): T {
+  // JSON round-trip is sufficient: task data is always plain JSON-serialisable.
+  return JSON.parse(JSON.stringify(value)) as T;
+}
 
-        node = node[segment] as Record<string, unknown>
-    }
+/**
+ * Returns true when `dotPath` should be written.
+ *
+ * react-hook-form's `dirtyFields` uses top-level keys for simple scalar
+ * fields and individual leaf paths for `KeyValueMapField` entries (which
+ * register their keys as `mapPath.entryKey`). A path is considered dirty
+ * when it either matches a key in `dirtyPaths` exactly, or when it starts
+ * with a dirty prefix (map-field case).
+ */
+function isDirtyPath(dotPath: string, dirtyPaths: Set<string>): boolean {
+  if (dirtyPaths.has(dotPath)) return true;
+  for (const dirty of dirtyPaths) {
+    if (dotPath.startsWith(dirty + ".")) return true;
+  }
+  return false;
+}
 
-    if(value === undefined){
-        delete node[leafKey]
-        return
+/** Sets a value at a dot-notation path within `obj`, creating intermediates as needed. */
+function setPath(obj: Record<string, unknown>, parts: string[], value: unknown): void {
+  let current = obj;
+  for (let i = 0; i < parts.length - 1; i++) {
+    const part = parts[i]!;
+    if (
+      current[part] === undefined ||
+      typeof current[part] !== "object" ||
+      Array.isArray(current[part])
+    ) {
+      current[part] = {};
     }
-
-    node[leafKey] = value
+    current = current[part] as Record<string, unknown>;
+  }
+  current[parts[parts.length - 1]!] = value;
 }
 
-
-// Applies multiple field changes to a task, returning a new modified task
-export function applyFieldValues(task: Specification.Task, changes: FieldChange[]): Specification.Task {
-    const draft = structuredClone(task) as Record<string, unknown>
-
-    for(const change of changes) {
-        writeAtSegments(draft, change)
+/** Removes a key at a dot-notation path within `obj`. Cleans up empty parent objects. */
+function deletePath(obj: Record<string, unknown>, parts: string[]): void {
+  if (parts.length === 0) return;
+  if (parts.length === 1) {
+    delete obj[parts[0]!];
+    return;
+  }
+  const head = parts[0]!;
+  const child = obj[head];
+  if (child !== null && typeof child === "object" && !Array.isArray(child)) {
+    deletePath(child as Record<string, unknown>, parts.slice(1));
+    // Remove the parent if it became empty after deletion.
+    if (Object.keys(child).length === 0) {
+      delete obj[head];
     }
-
-    return draft as Specification.Task
-}
\ No newline at end of file
+  }
+}
diff --git a/packages/open-workflow-diagram-editor/src/i18n/locales/en.ts b/packages/open-workflow-diagram-editor/src/i18n/locales/en.ts
index 1ecf2672..04c68147 100644
--- a/packages/open-workflow-diagram-editor/src/i18n/locales/en.ts
+++ b/packages/open-workflow-diagram-editor/src/i18n/locales/en.ts
@@ -57,6 +57,9 @@ export const en = {
   "toast.download.success": "Download started",
   "toast.download.error": "Download failed",
   "sidebar.duration.title": "Enter an ISO 8601 duration, for example PT30S or PT5M",
+  "sidebar.duration.placeholder": "PT30S",
+  "sidebar.then.flowDirectiveGroup": "Flow directive",
+  "sidebar.then.taskGroup": "Task",
   "sidebar.field.item": "item",
   "sidebar.field.items": "items",
   "sidebar.form.apply": "Apply",
@@ -64,6 +67,14 @@ export const en = {
   "sidebar.form.changed": "changed",
   "sidebar.form.noChanges": "No changes",
   "sidebar.form.applied": "Applied",
+  "sidebar.form.selectOption": "Select an option…",
+  "aria.form.taskProperties": "Task properties",
+  "sidebar.map.addProperty": "+ Add property",
+  "sidebar.map.keyPlaceholder": "key",
+  "sidebar.map.valuePlaceholder": "value",
+  "sidebar.map.keyLabel": "Entry key",
+  "sidebar.map.valueLabel": "Entry value",
+  "sidebar.map.deleteEntry": "Delete entry",
 } as const;
 
 export type TranslationKeys = keyof typeof en;
diff --git a/packages/open-workflow-diagram-editor/src/side-panel/EditFormFooter.tsx b/packages/open-workflow-diagram-editor/src/side-panel/EditFormFooter.tsx
index 80a3cfe3..e0c12075 100644
--- a/packages/open-workflow-diagram-editor/src/side-panel/EditFormFooter.tsx
+++ b/packages/open-workflow-diagram-editor/src/side-panel/EditFormFooter.tsx
@@ -22,97 +22,115 @@ import { SidebarFooter } from "@/components/ui/sidebar";
 import { Button } from "@/components/ui/button";
 import { useFormState } from "react-hook-form";
 import { updateTask } from "@/core/workflowEditing";
+import { applyDirtyValues } from "@/core/taskDraft";
+import { flattenTask } from "@/side-panel/forms/TaskForm";
 import { useDiagramEditorContext } from "@/store/DiagramEditorContext";
 import { useEditSession } from "./EditSession";
-import { applyFieldValues, parseFieldName } from "@/core/taskDraft";
 import { Check } from "lucide-react";
+import type { Specification } from "@openworkflowspec/sdk";
 
 /* How long the applied message stays in footer */
-const APPLIED_MESSAGE_MS = 2400; 
+const APPLIED_MESSAGE_MS = 2400;
 
-type DraftStatusProps ={
+type DraftStatusProps = {
   changedCount: number;
   isDirty: boolean;
   showApplied: boolean;
-}
+};
 
 function DraftStatus({ changedCount, isDirty, showApplied }: DraftStatusProps) {
-  const {t} = useI18n();
+  const { t } = useI18n();
 
-  const variant = isDirty? "changed": showApplied? "applied": "nochanges";
-  const label = variant === "changed" ? `${changedCount} ${t("sidebar.form.changed")}` : variant === "applied" ? t("sidebar.form.applied") : t("sidebar.form.noChanges");
+  const variant = isDirty ? "changed" : showApplied ? "applied" : "nochanges";
+  const label =
+    variant === "changed"
+      ? `${changedCount} ${t("sidebar.form.changed")}`
+      : variant === "applied"
+        ? t("sidebar.form.applied")
+        : t("sidebar.form.noChanges");
 
   return (
     <span className={`dec-sidebar-form-footer-status ${variant}`} role="status">
-      {variant === "applied" ?(<Check className="dec-sidebar-form-footer-status-icon" aria-hidden="true" />): null}
+      {variant === "applied" ? (
+        <Check className="dec-sidebar-form-footer-status-icon" aria-hidden="true" />
+      ) : null}
       {label}
     </span>
   );
 }
 
-
-
 export function EditFormFooter({ node }: { node: RF.Node<BaseNodeData> }) {
   const { t } = useI18n();
-  const {form, isEditing, setIsEditing} = useEditSession()
-  const {commitWorkflow, isReadOnly, model} = useDiagramEditorContext()
+  const { form } = useEditSession();
+  const { commitWorkflow, isReadOnly, model } = useDiagramEditorContext();
 
-    const [appliedNodeId, setAppliedNodeId] = React.useState<string | null>(null);
+  const [appliedNodeId, setAppliedNodeId] = React.useState<string | null>(null);
   const dismissTimer = React.useRef<ReturnType<typeof setTimeout> | null>(null);
 
-  React.useEffect(() => () =>{
-    if(dismissTimer.current !== null) {
+  React.useEffect(
+    () => () => {
+      if (dismissTimer.current !== null) {
+        clearTimeout(dismissTimer.current);
+      }
+    },
+    [],
+  );
+
+  const { dirtyFields, isDirty } = useFormState({ control: form.control });
+  const task = node.data.task;
+  const showApplied = appliedNodeId === node.id;
+
+  // Guard conditions that permanently prevent display
+  if (isReadOnly || task === undefined || node.data.taskReference === undefined || model === null) {
+    return null;
+  }
+
+  const changedCount = Object.keys(dirtyFields).length;
+
+  const handleCancel = () => {
+    form.reset();
+    setAppliedNodeId(null);
+  };
+
+  const handleApply = () => {
+    // TODO: Should add error handling if apply fails but first need to decide how to display that to the user before implementing
+    // RHF stores form values as a nested object (dot-notation names are resolved
+    // as nested paths internally). Flatten back to dot-notation so applyDirtyValues
+    // can match keys against its dirtyPaths set correctly.
+    const flatValues = flattenTask(form.getValues());
+    // dirtyFields is also nested: { timeout: { after: { hours: true } } }.
+    // Flatten it the same way to get leaf dot-notation paths.
+    const flatDirty = new Set(Object.keys(flattenTask(dirtyFields)));
+    const updated = applyDirtyValues(
+      task as unknown as Record<string, unknown>,
+      flatValues,
+      flatDirty,
+    ) as Specification.Task;
+    const updatedModel = updateTask(model, node.id, updated);
+    commitWorkflow(updatedModel);
+    form.reset(flatValues);
+    setAppliedNodeId(node.id);
+
+    if (dismissTimer.current !== null) {
       clearTimeout(dismissTimer.current);
     }
-  }, []);
 
-const {dirtyFields, isDirty} = useFormState({ control: form.control });
-const task = node.data.task;
-
-if(isReadOnly || (!isEditing && !isDirty) || task === undefined || node.data.taskReference === undefined || model === null) {
-  return null;
-}
-
-const changedNames = Object.keys(dirtyFields);
-
-const handleCancel = () => {
-  form.reset();
-  setIsEditing(false);
-};
-
-const handleApply = () => {
-  // TODO: Should add error handling if apply fails but first need to decide how to display that to the user before implementing
-  const values = form.getValues()
-  const changes = changedNames.map((name) => ({
-   segments: parseFieldName(name),
-   value: values[name],
-   }));
-
-  const updated = updateTask(model, node.id, applyFieldValues(task, changes));
-  commitWorkflow(updated)
-  form.reset(values);
-  setAppliedNodeId(node.id);
-
-  if(dismissTimer.current !== null) {
-    clearTimeout(dismissTimer.current);
-  } 
-
-  dismissTimer.current = setTimeout(() => setAppliedNodeId(null), APPLIED_MESSAGE_MS);
-};
+    dismissTimer.current = setTimeout(() => setAppliedNodeId(null), APPLIED_MESSAGE_MS);
+  };
 
   return (
-      <SidebarFooter>
-        <div className="dec-sidebar-form-footer">
-          <DraftStatus changedCount={changedNames.length} isDirty={isDirty} showApplied={appliedNodeId === node.id} />
-          <div className="dec-sidebar-form-footer-actions">
-            <Button type="button" variant="outline" onClick={handleCancel}>
-              {t("sidebar.form.cancel")}
-            </Button>
-              <Button type="button" onClick={handleApply} disabled={!isDirty}>
-              {t("sidebar.form.apply")}
-            </Button>
-          </div>
+    <SidebarFooter>
+      <div className="dec-sidebar-form-footer">
+        <DraftStatus changedCount={changedCount} isDirty={isDirty} showApplied={showApplied} />
+        <div className="dec-sidebar-form-footer-actions">
+          <Button type="button" variant="outline" onClick={handleCancel}>
+            {t("sidebar.form.cancel")}
+          </Button>
+          <Button type="button" onClick={handleApply} disabled={!isDirty}>
+            {t("sidebar.form.apply")}
+          </Button>
         </div>
-      </SidebarFooter>
+      </div>
+    </SidebarFooter>
   );
 }
diff --git a/packages/open-workflow-diagram-editor/src/side-panel/EditSession.tsx b/packages/open-workflow-diagram-editor/src/side-panel/EditSession.tsx
index f4c276c6..dcc8f3e7 100644
--- a/packages/open-workflow-diagram-editor/src/side-panel/EditSession.tsx
+++ b/packages/open-workflow-diagram-editor/src/side-panel/EditSession.tsx
@@ -17,30 +17,28 @@
 import * as React from "react";
 import { FormProvider, useForm, type UseFormReturn } from "react-hook-form";
 
-export type DraftValues = Record<string, unknown>;
-
 type EditSessionValue = {
-    form: UseFormReturn<DraftValues>;
-    isEditing: boolean;
-    setIsEditing: React.Dispatch<React.SetStateAction<boolean>>;
-}
+  form: UseFormReturn<Record<string, unknown>>;
+};
 
 const EditSessionContext = React.createContext<EditSessionValue | undefined>(undefined);
 
 export function EditSessionProvider({ children }: { children: React.ReactNode }) {
-    const form = useForm<DraftValues>({ defaultValues: {}});
-    const [isEditing, setIsEditing] = React.useState(false);
-
-    const value = React.useMemo(() => ({ form, isEditing, setIsEditing }), [form, isEditing]);
+  const form = useForm<Record<string, unknown>>({ defaultValues: {} });
 
-    return (<EditSessionContext.Provider value={value}>{<FormProvider {...form}>{children}</FormProvider>}</EditSessionContext.Provider>)
+  const value = React.useMemo(() => ({ form }), [form]);
 
+  return (
+    <EditSessionContext.Provider value={value}>
+      <FormProvider {...form}>{children}</FormProvider>
+    </EditSessionContext.Provider>
+  );
 }
 
 export function useEditSession() {
-    const context = React.useContext(EditSessionContext);
-    if (!context) {
-        throw new Error("useEditSession must be used within an EditSessionProvider");
-    }
-    return context;
+  const context = React.useContext(EditSessionContext);
+  if (!context) {
+    throw new Error("useEditSession must be used within an EditSessionProvider");
+  }
+  return context;
 }
diff --git a/packages/open-workflow-diagram-editor/src/side-panel/EditableProperties.tsx b/packages/open-workflow-diagram-editor/src/side-panel/EditableProperties.tsx
deleted file mode 100644
index f1d2474b..00000000
--- a/packages/open-workflow-diagram-editor/src/side-panel/EditableProperties.tsx
+++ /dev/null
@@ -1,134 +0,0 @@
-/*
- * Copyright 2021-Present The Open Workflow Specification Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import * as React from "react";
-import type { DetailField } from "@/core/taskDetails";
-import { Field, FieldGroup } from "@/components/ui/field";
-import { FieldControl } from "./FieldControls";
-import { PropertyValue, StaticPropertyRow } from "./Fields";
-import { useEditSession, type DraftValues } from "./EditSession";
-import { fieldName } from "@/core/taskDraft";
-
-/**
- * Editable presentation of a task's properties. Display when isReadOnly={false}
- *
- * By default this renders the same static rows as read-only mode; edit mode is entered deliberately, by clicking a row, which
- * also focuses it.
- *
- */
-
-type EditablePropertiesProps = {
-  fields: DetailField[];
-  nodeId: string;
-};
-
-/* Creates a field name for each and maps each fieldname to its current value. Allows RHF to track changes (only scaler for now) */
-function toDraftValues(fields: DetailField[]): DraftValues {
-  const values: DraftValues = {};
-
-  for (const field of fields) {
-    if (field.kind === "scalar") {
-      values[fieldName(field.segments)] = field.value;
-    }
-  }
-
-  return values;
-}
-
-export function EditableProperties({ fields, nodeId }: EditablePropertiesProps) {
-  const baseId = React.useId();
-  const { form, isEditing, setIsEditing } = useEditSession();
-
-  const fieldToFocus = React.useRef<string | null>(null);
-
-  /* Reset on node change rather than remounting behind a `key`: `useForm` lives above the
-     rows, so remounting them alone would leave the previous node's values in the draft. */
-  const renderedNodeId = React.useRef<string | null>(null);
-  React.useEffect(() => {
-    if (renderedNodeId.current === nodeId) {
-      return;
-    }
-
-    renderedNodeId.current = nodeId;
-    fieldToFocus.current = null;
-    form.reset(toDraftValues(fields));
-    setIsEditing(false);
-  }, [nodeId, fields, form, setIsEditing]);
-
-  /* Deferred to an effect because the control does not exist until edit mode has rendered. */
-  React.useEffect(() => {
-    if (!isEditing || fieldToFocus.current === null) {
-      return;
-    }
-
-    form.setFocus(fieldToFocus.current);
-    fieldToFocus.current = null;
-  }, [isEditing, fieldToFocus, form]);
-
-  const activateField = (name: string) => {
-    if (!isEditing) {
-      form.reset(toDraftValues(fields));
-      setIsEditing(true);
-    }
-
-    fieldToFocus.current = name;
-  };
-
-  return (
-    <>
-      {isEditing ? (
-        <FieldGroup className="dec-sidebar-edit-fields">
-          {fields.map((field, index) => {
-            if (field.kind !== "scalar") {
-              return <StaticPropertyRow key={fieldName(field.segments)} field={field} />;
-            }
-
-            const controlId = `${baseId}-${index}`;
-
-            return (
-              <Field key={fieldName(field.segments)}>
-                <label htmlFor={controlId} className="dec-sidebar-edit-field-label">
-                  {field.label}
-                </label>
-                <FieldControl field={field} id={controlId} name={fieldName(field.segments)} />
-              </Field>
-            );
-          })}
-        </FieldGroup>
-      ) : (
-        <div className="dec-sidebar-props">
-          {fields.map((field) =>
-            field.kind === "scalar" ? (
-              <button
-                key={fieldName(field.segments)}
-                type="button"
-                className="dec-sidebar-prop dec-sidebar-prop-activator"
-                onClick={() => activateField(fieldName(field.segments))}
-              >
-                <span className="dec-sidebar-prop-label">{field.label}</span>
-                <span className="dec-sidebar-prop-value">
-                  <PropertyValue field={field} />
-                </span>
-              </button>
-            ) : (
-              <StaticPropertyRow key={fieldName(field.segments)} field={field} />
-            ),
-          )}
-        </div>
-      )}
-    </>
-  );
-}
diff --git a/packages/open-workflow-diagram-editor/src/side-panel/FieldControls.tsx b/packages/open-workflow-diagram-editor/src/side-panel/FieldControls.tsx
deleted file mode 100644
index 9ace8441..00000000
--- a/packages/open-workflow-diagram-editor/src/side-panel/FieldControls.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-/*
- * Copyright 2021-Present The Open Workflow Specification Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import type { DetailField } from "@/core/taskDetails";
-import { Input } from "@/components/ui/input";
-import { Textarea } from "@/components/ui/textarea";
-import { Switch } from "@/components/ui/switch";
-import { Controller, useFormContext } from "react-hook-form";
-
-export type EditableDetailField = Extract<DetailField, { kind: "scalar" }>;
-
-type ControlProps = {
-  id: string;
-  name: string;
-};
-
-function TextControl({ id, name }: ControlProps) {
-  const { register } = useFormContext();
-  return <Input id={id} {...register(name)} />;
-}
-
-/* A shell command or script body needs room to edit.*/
-function MultilineControl({ id, name }: ControlProps) {
-  const { register } = useFormContext();
-  return <Textarea id={id} rows={4} {...register(name)} />;
-}
-
-function NumberControl({ id, name }: ControlProps) {
-  const { register } = useFormContext();
-  return <Input id={id} type="number" {...register(name, { valueAsNumber: true })} />;
-}
-
-function BooleanControl({ id, name }: ControlProps) {
-  const { control } = useFormContext();
-  return (
-    <Controller
-      control={control}
-      name={name}
-      render={({ field: draft }) => (
-        <Switch
-          id={id}
-          ref={draft.ref}
-          checked={draft.value}
-          onCheckedChange={draft.onChange}
-          onBlur={draft.onBlur}
-        />
-      )}
-    />
-  );
-}
-
-export function FieldControl({ field, ...rest }: ControlProps & { field: EditableDetailField }) {
-  if (typeof field.value === "number") {
-    return <NumberControl {...rest} />;
-  }
-
-  if (typeof field.value === "boolean") {
-    return <BooleanControl {...rest} />;
-  }
-
-  /* TODO: once we have the schemas metadata, use it to decide if multiline or not instead of below */
-  return field.value.includes("\n") ? <MultilineControl {...rest} /> : <TextControl {...rest} />;
-}
diff --git a/packages/open-workflow-diagram-editor/src/side-panel/Fields.tsx b/packages/open-workflow-diagram-editor/src/side-panel/Fields.tsx
index 8549363f..aab2f685 100644
--- a/packages/open-workflow-diagram-editor/src/side-panel/Fields.tsx
+++ b/packages/open-workflow-diagram-editor/src/side-panel/Fields.tsx
@@ -14,9 +14,6 @@
  * limitations under the License.
  */
 
-import { useI18n } from "@openworkflowspec/i18n";
-import type { DetailField } from "@/core/taskDetails";
-
 export function SectionHeader({ label }: { label: string }) {
   return (
     <div className="dec-sidebar-section-header">
@@ -35,17 +32,6 @@ export function InlineField({ label, value }: { label: string; value: string })
   );
 }
 
-export function PropertyField({ field }: { field: DetailField }) {
-  return (
-    <div className="dec-sidebar-prop">
-      <dt className="dec-sidebar-prop-label">{field.label}</dt>
-      <dd className="dec-sidebar-prop-value">
-        <PropertyValue field={field} />
-      </dd>
-    </div>
-  );
-}
-
 export function StackedField({ label, value }: { label: string; value: string }) {
   return (
     <div className="dec-sidebar-stacked-field">
@@ -65,42 +51,3 @@ export function YamlField({ yaml, summary = "{...}" }: { yaml: string; summary?:
     </div>
   );
 }
-
-export function StaticPropertyRow({ field }: { field: DetailField }) {
-  return (
-    <div className="dec-sidebar-prop dec-sidebar-prop-static">
-      <span className="dec-sidebar-prop-label">{field.label}</span>
-      <span className="dec-sidebar-prop-value">
-        <PropertyValue field={field} />
-      </span>
-    </div>
-  );
-}
-
-export function PropertyValue({ field }: { field: DetailField }) {
-  const { t } = useI18n();
-
-  switch (field.kind) {
-    case "array":
-      return (
-        <span className="dec-sidebar-value-shape">
-          {`${field.count} ${t(field.count === 1 ? "sidebar.field.item" : "sidebar.field.items")}`}
-        </span>
-      );
-
-    case "object":
-      return <span className="dec-sidebar-value-shape">{"{...}"}</span>;
-
-    default: {
-      if (typeof field.value === "string" && field.value.includes("\n")) {
-        return <pre className="dec-sidebar-value-multiline">{field.value}</pre>;
-      }
-      const numeric = typeof field.value === "number";
-      return (
-        <span className={numeric ? "dec-sidebar-value numeric" : "dec-sidebar-value"}>
-          {String(field.value)}
-        </span>
-      );
-    }
-  }
-}
diff --git a/packages/open-workflow-diagram-editor/src/side-panel/NodeDetailsView.tsx b/packages/open-workflow-diagram-editor/src/side-panel/NodeDetailsView.tsx
index 4f4227f1..5b0b0068 100644
--- a/packages/open-workflow-diagram-editor/src/side-panel/NodeDetailsView.tsx
+++ b/packages/open-workflow-diagram-editor/src/side-panel/NodeDetailsView.tsx
@@ -17,11 +17,9 @@
 import type * as RF from "@xyflow/react";
 import { dump } from "js-yaml";
 import { useI18n } from "@openworkflowspec/i18n";
-import { getTaskDetails } from "@/core/taskDetails";
 import type { BaseNodeData } from "@/react-flow/nodes/Nodes";
 import { YamlField, SectionHeader } from "./Fields";
-import { ReadOnlyProperties } from "./ReadOnlyProperties";
-import { EditableProperties } from "./EditableProperties";
+import { TaskForm } from "./forms/TaskForm";
 import { useDiagramEditorContext } from "@/store/DiagramEditorContext";
 import { getNodeErrorField, getNodeErrors } from "@/core";
 import { ErrorSection } from "./ErrorsSection";
@@ -36,32 +34,35 @@ export function NodeDetailsView({ node }: NodeDetailsViewProps) {
   const task = node.data.task;
   const taskReference = node.data.taskReference;
 
-  /* Layout-only nodes (entry/exit/start/end) have no taskReference, so no error can be owned by them */
+  /* Layout-only nodes (entry/exit/start/end) have no taskReference */
   const nodeErrors = taskReference ? getNodeErrors(errors, taskReference, taskReferences) : [];
   const errorItems = nodeErrors.map((error) => {
     const field = taskReference ? getNodeErrorField(error, taskReference) : undefined;
     return field !== undefined ? { message: error.message, field } : { message: error.message };
   });
-  const fields = task ? getTaskDetails(task) : [];
 
-  if (nodeErrors.length === 0 && fields.length === 0) {
+  const hasTask = task !== undefined && node.type !== undefined;
+
+  if (nodeErrors.length === 0 && !hasTask) {
     return <p className="dec-sidebar-hint-text">{t("sidebar.noDetails")}</p>;
   }
 
-  /* TODO FUTURE: Once we have a synced text -> diagram view, re-look at the source JSON block, it becomes redundant with dual view but if user wants standalone diagram without text then it is still valid so look at conditionally displaying it */
   return (
     <div data-testid="node-details">
       <ErrorSection items={errorItems} />
-      {fields.length > 0 && (
+
+      {hasTask && node.type !== undefined && (
         <>
           <SectionHeader label={t("sidebar.sectionProperties")} />
-          {isReadOnly ? (
-            <ReadOnlyProperties fields={fields} />
-          ) : (
-            <EditableProperties fields={fields} nodeId={node.id} />
-          )}
+          <TaskForm
+            nodeType={node.type}
+            task={task}
+            nodeId={node.id}
+            taskReference={taskReference}
+          />
         </>
       )}
+
       {isReadOnly && task !== undefined && (
         <>
           <div className="dec-sidebar-section-spacer" />
diff --git a/packages/open-workflow-diagram-editor/src/side-panel/SidePanel.css b/packages/open-workflow-diagram-editor/src/side-panel/SidePanel.css
index f8aa05af..520c70f0 100644
--- a/packages/open-workflow-diagram-editor/src/side-panel/SidePanel.css
+++ b/packages/open-workflow-diagram-editor/src/side-panel/SidePanel.css
@@ -507,4 +507,364 @@
     @apply dec:bg-red-300;
   }
     /* end validation errors */
+
+  /* ── Task form ───────────────────────────────────────────────────────── */
+
+  .dec-root .dec-task-form {
+    @apply dec:w-full;
+  }
+
+  .dec-root .dec-task-form-fields {
+    @apply dec:flex dec:flex-col dec:gap-2 dec:py-0.5;
+  }
+
+  /* Single field row (label-row + control) */
+  .dec-root .dec-form-field {
+    @apply dec:flex dec:flex-col dec:gap-0.5;
+  }
+
+  /* Label row: label text + optional ? button */
+  .dec-root .dec-form-field-label-row {
+    @apply dec:flex dec:items-center dec:gap-1;
+  }
+
+  .dec-root .dec-form-field-label {
+    @apply dec:text-[11px] dec:font-normal dec:text-gray-500;
+    overflow-wrap: anywhere;
+  }
+
+  .dec-root.dark .dec-form-field-label {
+    @apply dec:text-gray-400;
+  }
+
+  .dec-root .dec-form-field-required {
+    @apply dec:text-red-500;
+  }
+
+  /* Description tooltip trigger button */
+  .dec-root .dec-form-field-help {
+    @apply dec:inline-flex dec:items-center dec:justify-center
+      dec:h-4 dec:w-4 dec:rounded-sm dec:text-gray-400
+      dec:bg-transparent dec:border-0 dec:cursor-pointer dec:shrink-0
+      dec:transition-colors;
+  }
+
+  .dec-root .dec-form-field-help:hover {
+    @apply dec:text-gray-600;
+  }
+
+  .dec-root.dark .dec-form-field-help {
+    @apply dec:text-gray-500;
+  }
+
+  .dec-root.dark .dec-form-field-help:hover {
+    @apply dec:text-gray-300;
+  }
+
+  .dec-root .dec-form-field-help:focus-visible {
+    outline: 1px solid rgb(var(--dec-selected-rgb));
+    outline-offset: 1px;
+  }
+
+  .dec-root .dec-form-field-help-icon {
+    @apply dec:h-3 dec:w-3;
+  }
+
+  .dec-root .dec-form-field-control {
+    @apply dec:w-full;
+  }
+
+  /* Input + optional inline error */
+  .dec-root .dec-form-field-input-wrap {
+    @apply dec:flex dec:flex-col dec:gap-1;
+  }
+
+  .dec-root .dec-form-field-error {
+    @apply dec:text-xs dec:text-red-600;
+  }
+
+  .dec-root.dark .dec-form-field-error {
+    @apply dec:text-red-400;
+  }
+
+  /* Runtime-expression string input — monospace hint */
+  .dec-root .dec-form-expression-input {
+    font-family: var(--dec-font-mono);
+  }
+
+  /* Scrollable multiline textarea — fixed 3-line height with overflow scroll */
+  .dec-root .dec-form-scrollable-textarea {
+    @apply dec:min-h-0 dec:resize-none dec:overflow-y-auto;
+    field-sizing: fixed;
+    height: calc(3 * 1.5rem + 2 * 0.375rem); /* 3 lines × line-height + top/bottom padding */
+  }
+
+  /* ── Object group (collapsible) ──────────────────────────────────────── */
+
+  .dec-root .dec-form-object-group {
+    @apply dec:flex dec:flex-col dec:rounded-md
+      dec:border dec:border-gray-200 dec:overflow-hidden;
+  }
+
+  .dec-root.dark .dec-form-object-group {
+    @apply dec:border-gray-700;
+  }
+
+  .dec-root .dec-form-object-header {
+    @apply dec:flex dec:items-center dec:gap-1.5
+      dec:px-2 dec:py-1
+      dec:bg-gray-50 dec:text-left dec:w-full dec:cursor-pointer
+      dec:border-0 dec:transition-colors;
+  }
+
+  .dec-root .dec-form-object-header:hover {
+    @apply dec:bg-gray-100;
+  }
+
+  .dec-root.dark .dec-form-object-header {
+    @apply dec:bg-gray-800/60;
+  }
+
+  .dec-root.dark .dec-form-object-header:hover {
+    @apply dec:bg-gray-800;
+  }
+
+  .dec-root .dec-form-object-header:focus-visible {
+    outline: 1px solid rgb(var(--dec-selected-rgb));
+    outline-offset: -1px;
+  }
+
+  .dec-root .dec-form-object-chevron {
+    @apply dec:h-3.5 dec:w-3.5 dec:shrink-0 dec:text-gray-400;
+  }
+
+  .dec-root.dark .dec-form-object-chevron {
+    @apply dec:text-gray-500;
+  }
+
+  .dec-root .dec-form-object-label {
+    @apply dec:text-xs dec:font-medium dec:text-gray-600;
+  }
+
+  .dec-root.dark .dec-form-object-label {
+    @apply dec:text-gray-300;
+  }
+
+  .dec-root .dec-form-object-children {
+    @apply dec:flex dec:flex-col dec:gap-2 dec:px-2.5 dec:py-2
+      dec:border-t dec:border-gray-200;
+  }
+
+  .dec-root.dark .dec-form-object-children {
+    @apply dec:border-gray-700;
+  }
+
+  /* ── One-of group (variant selector + sub-fields) ────────────────────── */
+
+  .dec-root .dec-form-oneof-group {
+    @apply dec:flex dec:flex-col dec:gap-2 dec:rounded-md
+      dec:border dec:border-gray-200 dec:p-2;
+  }
+
+  .dec-root.dark .dec-form-oneof-group {
+    @apply dec:border-gray-700;
+  }
+
+  .dec-root .dec-form-oneof-children {
+    @apply dec:flex dec:flex-col dec:gap-2
+      dec:border-t dec:border-gray-100 dec:pt-2;
+  }
+
+  .dec-root.dark .dec-form-oneof-children {
+    @apply dec:border-gray-700/60;
+  }
+
+  /* ── Child task list ─────────────────────────────────────────────────── */
+
+  .dec-root .dec-form-child-list {
+    @apply dec:flex dec:flex-col dec:gap-0.5 dec:pl-0 dec:list-none;
+  }
+
+  .dec-root .dec-form-child-list-item {
+    @apply dec:text-xs dec:text-gray-700 dec:px-2 dec:py-1
+      dec:rounded-sm dec:bg-gray-100;
+    font-family: var(--dec-font-mono);
+  }
+
+  .dec-root.dark .dec-form-child-list-item {
+    @apply dec:text-gray-300 dec:bg-gray-800;
+  }
+
+  .dec-root .dec-form-child-list-empty {
+    @apply dec:text-xs dec:text-gray-400 dec:italic;
+  }
+
+  .dec-root.dark .dec-form-child-list-empty {
+    @apply dec:text-gray-500;
+  }
+
+  /* ── Key-value map editor ────────────────────────────────────────────── */
+
+  .dec-root .dec-map-group {
+    @apply dec:flex dec:flex-col dec:rounded-md
+      dec:border dec:border-gray-200 dec:overflow-hidden;
+  }
+
+  .dec-root.dark .dec-map-group {
+    @apply dec:border-gray-700;
+  }
+
+  /* Header: label + count badge */
+  .dec-root .dec-map-header {
+    @apply dec:flex dec:items-center dec:justify-between dec:gap-2
+      dec:px-2 dec:py-1
+      dec:bg-gray-50;
+  }
+
+  .dec-root.dark .dec-map-header {
+    @apply dec:bg-gray-800/60;
+  }
+
+  .dec-root .dec-map-label {
+    @apply dec:text-xs dec:font-medium dec:text-gray-600;
+  }
+
+  .dec-root.dark .dec-map-label {
+    @apply dec:text-gray-300;
+  }
+
+  .dec-root .dec-map-count {
+    @apply dec:text-xs dec:text-gray-400 dec:tabular-nums;
+  }
+
+  .dec-root.dark .dec-map-count {
+    @apply dec:text-gray-500;
+  }
+
+  /* Rows container */
+  .dec-root .dec-map-rows {
+    @apply dec:flex dec:flex-col
+      dec:border-t dec:border-gray-200;
+  }
+
+  .dec-root.dark .dec-map-rows {
+    @apply dec:border-gray-700;
+  }
+
+  /* Single row: key input + value input + delete button */
+  .dec-root .dec-map-row {
+    @apply dec:flex dec:items-center dec:gap-1.5 dec:px-2 dec:py-1
+      dec:border-b dec:border-gray-100;
+  }
+
+  .dec-root .dec-map-row:last-child {
+    @apply dec:border-b-0;
+  }
+
+  .dec-root.dark .dec-map-row {
+    @apply dec:border-gray-700/50;
+  }
+
+  .dec-root.dark .dec-map-row:last-child {
+    @apply dec:border-b-0;
+  }
+
+  /* Key input — fixed 40% width; !w-2/5 overrides the Input base's w-full */
+  .dec-root .dec-map-key-input {
+    @apply dec:h-6 dec:!w-2/5 dec:shrink-0 dec:min-w-0 dec:text-[11px] dec:px-1.5;
+    font-family: var(--dec-font-mono);
+  }
+
+  /* Value input — fill remaining space; !w-0 + flex-1 overrides Input's w-full */
+  .dec-root .dec-map-value-input {
+    @apply dec:h-6 dec:flex-1 dec:!w-0 dec:min-w-0 dec:text-[11px] dec:px-1.5;
+  }
+
+  /* Delete row button */
+  .dec-root .dec-map-delete-btn {
+    @apply dec:inline-flex dec:items-center dec:justify-center
+      dec:h-5 dec:w-5 dec:shrink-0 dec:rounded-sm
+      dec:text-gray-400 dec:bg-transparent dec:border-0
+      dec:cursor-pointer dec:transition-colors;
+  }
+
+  .dec-root .dec-map-delete-btn:hover {
+    @apply dec:text-gray-600;
+  }
+
+  .dec-root.dark .dec-map-delete-btn {
+    @apply dec:text-gray-500;
+  }
+
+  .dec-root.dark .dec-map-delete-btn:hover {
+    @apply dec:text-gray-300;
+  }
+
+  .dec-root .dec-map-delete-btn:focus-visible {
+    outline: 1px solid rgb(var(--dec-selected-rgb));
+    outline-offset: 1px;
+  }
+
+  .dec-root .dec-map-delete-icon {
+    @apply dec:h-3 dec:w-3;
+  }
+
+  /* Read-only rows */
+  .dec-root .dec-map-key-readonly {
+    @apply dec:text-xs dec:text-gray-600 dec:w-2/5 dec:shrink-0 dec:break-all;
+    font-family: var(--dec-font-mono);
+  }
+
+  .dec-root.dark .dec-map-key-readonly {
+    @apply dec:text-gray-300;
+  }
+
+  .dec-root .dec-map-value-readonly {
+    @apply dec:text-xs dec:text-gray-500 dec:flex-1 dec:break-all;
+  }
+
+  .dec-root.dark .dec-map-value-readonly {
+    @apply dec:text-gray-400;
+  }
+
+  /* Add-property button wrapper — provides the inset padding so the
+     dashed-border button sits with breathing room inside the map group */
+  .dec-root .dec-map-add-btn-wrap {
+    @apply dec:px-2 dec:pb-2 dec:pt-1;
+  }
+
+  /* Add-property button */
+  .dec-root .dec-map-add-btn {
+    @apply dec:inline-flex dec:items-center dec:justify-center dec:gap-1
+      dec:w-full dec:px-2 dec:py-1.5
+      dec:text-[11px] dec:font-medium
+      dec:rounded-sm dec:border dec:border-dashed
+      dec:bg-transparent dec:cursor-pointer dec:transition-colors;
+    color: #0d9488;
+    border-color: #0d9488;
+  }
+
+  .dec-root .dec-map-add-btn:hover {
+    background-color: rgba(13, 148, 136, 0.08);
+  }
+
+  .dec-root.dark .dec-map-add-btn {
+    color: #2dd4bf;
+    border-color: #2dd4bf;
+  }
+
+  .dec-root.dark .dec-map-add-btn:hover {
+    background-color: rgba(45, 212, 191, 0.08);
+  }
+
+  .dec-root .dec-map-add-btn:focus-visible {
+    outline: 1px solid rgb(var(--dec-selected-rgb));
+    outline-offset: -1px;
+  }
+
+  .dec-root .dec-map-add-icon {
+    @apply dec:h-2.5 dec:w-2.5 dec:shrink-0;
+  }
+
+  /* ── End task form ───────────────────────────────────────────────────── */
 }
diff --git a/packages/open-workflow-diagram-editor/src/side-panel/forms/FieldControl.tsx b/packages/open-workflow-diagram-editor/src/side-panel/forms/FieldControl.tsx
new file mode 100644
index 00000000..cb6f974d
--- /dev/null
+++ b/packages/open-workflow-diagram-editor/src/side-panel/forms/FieldControl.tsx
@@ -0,0 +1,59 @@
+/*
+ * Copyright 2021-Present The Open Workflow Specification Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import * as React from "react";
+import type { FormFieldDescriptor } from "./schemaToFormFields";
+import {
+  StringControl,
+  NumberControl,
+  BooleanControl,
+  EnumControl,
+  DurationField,
+  ThenField,
+  ChildTaskListField,
+} from "./customFields";
+
+// ---------------------------------------------------------------------------
+// FieldControl — dispatches to the appropriate control for each field kind
+// ---------------------------------------------------------------------------
+
+export type FieldControlProps = {
+  field: Exclude<FormFieldDescriptor, { kind: "object" } | { kind: "one-of" } | { kind: "map" }>;
+  /** DOM id forwarded to the underlying <input>/<select>/<textarea> so that
+   *  <label htmlFor> association works. Not applicable to boolean (Switch). */
+  id?: string;
+};
+
+export function FieldControl({ field, id }: FieldControlProps) {
+  const idProp = id !== undefined ? { id } : {};
+  switch (field.kind) {
+    case "string":
+      return <StringControl field={field} {...idProp} />;
+    case "number":
+      return <NumberControl field={field} {...idProp} />;
+    case "boolean":
+      // BooleanControl uses aria-label; htmlFor → <button> doesn't work in DOM
+      return <BooleanControl field={field} />;
+    case "enum":
+      return <EnumControl field={field} {...idProp} />;
+    case "duration":
+      return <DurationField field={field} {...idProp} />;
+    case "then":
+      return <ThenField field={field} {...idProp} />;
+    case "child-task-list":
+      return <ChildTaskListField field={field} />;
+  }
+}
diff --git a/packages/open-workflow-diagram-editor/src/side-panel/forms/FormField.tsx b/packages/open-workflow-diagram-editor/src/side-panel/forms/FormField.tsx
new file mode 100644
index 00000000..bb7cf832
--- /dev/null
+++ b/packages/open-workflow-diagram-editor/src/side-panel/forms/FormField.tsx
@@ -0,0 +1,344 @@
+/*
+ * Copyright 2021-Present The Open Workflow Specification Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import * as React from "react";
+import { HelpCircle, ChevronDown, ChevronRight } from "lucide-react";
+import { useFormContext } from "react-hook-form";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import type { FormFieldDescriptor, ObjectField, OneOfField } from "./schemaToFormFields";
+import { FieldControl } from "./FieldControl";
+import { useTaskFormContext, filterReadOnlyFields, getNestedValue } from "./taskFormContext";
+import {
+  Combobox,
+  ComboboxContent,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxList,
+} from "@/components/ui/combobox";
+import { KeyValueMapField } from "./customFields/KeyValueMapField";
+
+// ---------------------------------------------------------------------------
+// FormField — single form row (label + optional tooltip + control)
+// ---------------------------------------------------------------------------
+
+export type FormFieldProps = {
+  field: FormFieldDescriptor;
+};
+
+export function FormField({ field }: FormFieldProps) {
+  if (field.kind === "object") {
+    return <ObjectFieldRow field={field} />;
+  }
+  if (field.kind === "one-of") {
+    return <OneOfFieldRow field={field} />;
+  }
+  if (field.kind === "map") {
+    return <KeyValueMapField field={field} />;
+  }
+
+  // Boolean controls render as <button role="switch"> — htmlFor→<button> is
+  // not a valid DOM association. Skip the id linkage for booleans.
+  const controlId =
+    field.kind === "boolean" ? undefined : `field-${field.path.replace(/\./g, "-")}`;
+
+  return (
+    <div className="dec-form-field">
+      <FieldLabel
+        {...(controlId !== undefined ? { htmlFor: controlId } : {})}
+        label={field.label}
+        required={field.required}
+        {...(field.description !== undefined ? { description: field.description } : {})}
+      />
+      <div className="dec-form-field-control">
+        <FieldControl field={field} {...(controlId !== undefined ? { id: controlId } : {})} />
+      </div>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// FieldLabel — label text + optional description tooltip
+// ---------------------------------------------------------------------------
+
+function FieldLabel({
+  htmlFor,
+  label,
+  required,
+  description,
+}: {
+  htmlFor?: string;
+  label: string;
+  required: boolean;
+  description?: string;
+}) {
+  return (
+    <div className="dec-form-field-label-row">
+      <label htmlFor={htmlFor} className="dec-form-field-label">
+        {label}
+      </label>
+      {/* Required indicator sits outside the <label> so it is excluded from
+          the accessible name computation (getByLabelText matches label text only). */}
+      {required && (
+        <span className="dec-form-field-required" aria-hidden="true">
+          *
+        </span>
+      )}
+      {description && (
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <button
+              type="button"
+              className="dec-form-field-help"
+              aria-label={`Help: ${label}`}
+              tabIndex={0}
+            >
+              <HelpCircle className="dec-form-field-help-icon" aria-hidden="true" />
+            </button>
+          </TooltipTrigger>
+          <TooltipContent>{description}</TooltipContent>
+        </Tooltip>
+      )}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// ObjectFieldRow — collapsible group for object fields with sub-properties
+// ---------------------------------------------------------------------------
+
+function ObjectFieldRow({ field }: { field: ObjectField }) {
+  const [expanded, setExpanded] = React.useState(true);
+  const { isReadOnly, taskData } = useTaskFormContext();
+
+  const visibleChildren = isReadOnly
+    ? filterReadOnlyFields(field.children, taskData)
+    : field.children;
+
+  // In read-only mode collapse the whole group if nothing inside has a value
+  if (isReadOnly && visibleChildren.length === 0) return null;
+
+  return (
+    <div className="dec-form-object-group">
+      {/* Use a div with role="button" to avoid nesting a <button> inside a <button>
+          when this group appears inside a OneOfFieldRow which has a <button>-less ancestor.
+          The TooltipTrigger inside would otherwise produce invalid nested-button HTML. */}
+      <div
+        role="button"
+        tabIndex={0}
+        className="dec-form-object-header"
+        onClick={() => setExpanded((v) => !v)}
+        onKeyDown={(e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            setExpanded((v) => !v);
+          }
+        }}
+        aria-expanded={expanded}
+      >
+        {expanded ? (
+          <ChevronDown className="dec-form-object-chevron" aria-hidden="true" />
+        ) : (
+          <ChevronRight className="dec-form-object-chevron" aria-hidden="true" />
+        )}
+        <span className="dec-form-object-label">{field.label}</span>
+        {field.required && (
+          <span className="dec-form-field-required" aria-hidden="true">
+            {" "}
+            *
+          </span>
+        )}
+        {field.description !== undefined && (
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <button
+                type="button"
+                className="dec-form-field-help"
+                aria-label={`Help: ${field.label}`}
+                tabIndex={0}
+                onClick={(e) => e.stopPropagation()}
+              >
+                <HelpCircle className="dec-form-field-help-icon" aria-hidden="true" />
+              </button>
+            </TooltipTrigger>
+            <TooltipContent>{field.description}</TooltipContent>
+          </Tooltip>
+        )}
+      </div>
+
+      {expanded && (
+        <div className="dec-form-object-children">
+          {visibleChildren.map((child) => (
+            <FormField key={child.path} field={child} />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// OneOfFieldRow — type-selector combobox + sub-fields for selected variant
+// ---------------------------------------------------------------------------
+
+function OneOfFieldRow({ field }: { field: OneOfField }) {
+  const { isReadOnly, taskData } = useTaskFormContext();
+
+  // Derive the initial variant index from the actual task data in both modes.
+  const derivedIdx = React.useMemo(() => {
+    // For the root one-of the relevant data is the whole task object;
+    // for property-level one-ofs it's the value at the field's path.
+    const dataAtPath = field.path === "__root__" ? taskData : getNestedValue(taskData, field.path);
+    const idx = field.variants.findIndex((v) => v.matchesData(dataAtPath));
+    return idx === -1 ? 0 : idx;
+  }, [field.path, field.variants, taskData]);
+
+  const [selectedVariantIdx, setSelectedVariantIdx] = React.useState(derivedIdx);
+
+  // Re-sync when the selected task changes (taskData identity changes).
+  React.useEffect(() => {
+    setSelectedVariantIdx(derivedIdx);
+  }, [derivedIdx]);
+
+  // Per-variant saved values — preserves field data when switching variants
+  // and then switching back, so the user does not have to re-type values.
+  const savedVariantValues = React.useRef<Map<number, Record<string, unknown>>>(new Map());
+
+  const { getValues, setValue } = useFormContext<Record<string, unknown>>();
+
+  const handleVariantChange = React.useCallback(
+    (newIdx: number) => {
+      if (newIdx === selectedVariantIdx) return;
+
+      // Save current variant's field values before switching.
+      // getValues() returns a NESTED object so we must use getNestedValue to
+      // traverse dot-notation paths like "output.as" correctly.
+      const currentVariant = field.variants[selectedVariantIdx];
+      if (currentVariant) {
+        const snapshot: Record<string, unknown> = {};
+        const allValues = getValues();
+        for (const p of collectLeafPaths(currentVariant.fields)) {
+          snapshot[p] = getNestedValue(allValues as Record<string, unknown>, p);
+        }
+        savedVariantValues.current.set(selectedVariantIdx, snapshot);
+      }
+
+      setSelectedVariantIdx(newIdx);
+
+      // Restore saved values for the new variant if previously stored;
+      // otherwise clear its leaf paths so stale values from the old variant
+      // (e.g. an object being rendered in a string input as "[object Object]")
+      // are not left behind.
+      const saved = savedVariantValues.current.get(newIdx);
+      const newVariant = field.variants[newIdx];
+      if (saved) {
+        for (const [path, value] of Object.entries(saved)) {
+          setValue(path, value, { shouldDirty: true });
+        }
+      } else if (newVariant) {
+        for (const path of collectLeafPaths(newVariant.fields)) {
+          setValue(path, undefined, { shouldDirty: true });
+        }
+      }
+    },
+    [selectedVariantIdx, field.variants, getValues, setValue],
+  );
+
+  const variantLabels = field.variants.map((v) => v.label);
+  const currentVariant = field.variants[selectedVariantIdx];
+
+  const visibleVariantFields = React.useMemo(() => {
+    if (!currentVariant) return [];
+    if (!isReadOnly) return currentVariant.fields;
+    return filterReadOnlyFields(currentVariant.fields, taskData);
+  }, [currentVariant, isReadOnly, taskData]);
+
+  // If there is only 1 variant or no variants, render child fields without a combo selector
+  if (field.variants.length <= 1) {
+    return (
+      <div className="dec-form-oneof-children">
+        {visibleVariantFields.map((child) => (
+          <FormField key={child.path} field={child} />
+        ))}
+      </div>
+    );
+  }
+
+  return (
+    <div className="dec-form-oneof-group">
+      <div className="dec-form-field">
+        <FieldLabel
+          label={field.label}
+          required={field.required}
+          {...(field.description !== undefined ? { description: field.description } : {})}
+        />
+        <div className="dec-form-field-control">
+          <Combobox
+            value={variantLabels[selectedVariantIdx] ?? ""}
+            onValueChange={(val) => {
+              if (!val) return;
+              const idx = variantLabels.indexOf(val);
+              if (idx !== -1) handleVariantChange(idx);
+            }}
+            disabled={isReadOnly}
+          >
+            <ComboboxInput
+              readOnly
+              value={variantLabels[selectedVariantIdx] ?? ""}
+              aria-label={field.label}
+              showClear={false}
+              className="dec:h-7 dec:text-xs"
+            />
+            <ComboboxContent>
+              <ComboboxList>
+                {variantLabels.map((label) => (
+                  <ComboboxItem key={label} value={label}>
+                    {label}
+                  </ComboboxItem>
+                ))}
+              </ComboboxList>
+            </ComboboxContent>
+          </Combobox>
+        </div>
+      </div>
+
+      {visibleVariantFields.length > 0 && (
+        <div className="dec-form-oneof-children">
+          {visibleVariantFields.map((child) => (
+            <FormField key={child.path} field={child} />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+/** Collects all leaf field paths (non-object, non-one-of) from a descriptor tree. */
+function collectLeafPaths(fields: FormFieldDescriptor[]): string[] {
+  const paths: string[] = [];
+  for (const f of fields) {
+    if (f.kind === "object") {
+      paths.push(...collectLeafPaths(f.children));
+    } else if (f.kind === "one-of") {
+      // Collect from all variants so no path is missed during save
+      for (const v of f.variants) {
+        paths.push(...collectLeafPaths(v.fields));
+      }
+    } else {
+      paths.push(f.path);
+    }
+  }
+  return paths;
+}
diff --git a/packages/open-workflow-diagram-editor/src/side-panel/forms/TaskForm.tsx b/packages/open-workflow-diagram-editor/src/side-panel/forms/TaskForm.tsx
new file mode 100644
index 00000000..8cab3eb9
--- /dev/null
+++ b/packages/open-workflow-diagram-editor/src/side-panel/forms/TaskForm.tsx
@@ -0,0 +1,137 @@
+/*
+ * Copyright 2021-Present The Open Workflow Specification Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import * as React from "react";
+import type { Specification } from "@openworkflowspec/sdk";
+import { useI18n } from "@openworkflowspec/i18n";
+import { getFormFieldsForNodeType, structuralEqual } from "@/core";
+import { FormField } from "./FormField";
+import { useSiblingTaskNames } from "./useSiblingTaskNames";
+import { useDiagramEditorContext } from "@/store/DiagramEditorContext";
+import { TaskFormContext, filterReadOnlyFields } from "./taskFormContext";
+import { useWorkflowErrorsForForm } from "./validation";
+import { useEditSession } from "@/side-panel/EditSession";
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+/**
+ * Flattens a task object into a dot-notation record suitable for
+ * react-hook-form `defaultValues`. Arrays are kept as-is (they are rendered
+ * as child-task-list fields, which are always read-only).
+ */
+export function flattenTask(value: unknown, prefix = ""): Record<string, unknown> {
+  if (value === null || value === undefined) return {};
+  if (Array.isArray(value)) {
+    return prefix ? { [prefix]: value } : {};
+  }
+  if (typeof value === "object") {
+    const obj = value as Record<string, unknown>;
+    let result: Record<string, unknown> = {};
+    for (const [k, v] of Object.entries(obj)) {
+      const fullKey = prefix ? `${prefix}.${k}` : k;
+      if (Array.isArray(v)) {
+        result[fullKey] = v;
+      } else if (typeof v === "object" && v !== null) {
+        result = { ...result, ...flattenTask(v, fullKey) };
+      } else {
+        result[fullKey] = v;
+      }
+    }
+    return result;
+  }
+  return prefix ? { [prefix]: value } : {};
+}
+
+// ---------------------------------------------------------------------------
+// TaskForm
+// ---------------------------------------------------------------------------
+
+export type TaskFormProps = {
+  nodeType: string;
+  task: Specification.Task;
+  /**
+   * The non-indexed structural node id (e.g. `/do/logReading/do/callOrderService`).
+   * Used as the form reset-identity key and to locate sibling tasks in the model.
+   */
+  nodeId?: string | undefined;
+  /**
+   * The RFC 6901-style indexed task reference (e.g. `/do/0/step1`).
+   * Used to map workflow-level SDK errors to form fields on initial load.
+   */
+  taskReference?: string | undefined;
+};
+
+export function TaskForm({ nodeType, task, nodeId, taskReference }: TaskFormProps) {
+  const { t } = useI18n();
+  const { isReadOnly, model, errors, taskReferences } = useDiagramEditorContext();
+  const { form } = useEditSession();
+  const siblingTaskNames = useSiblingTaskNames(model, nodeId);
+
+  // ── Resolve form fields from schema ───────────────────────────────────────
+  const allFields = React.useMemo(() => getFormFieldsForNodeType(nodeType), [nodeType]);
+
+  // ── Reset form on node change ─────────────────────────────────────────────
+  // Runs whenever nodeId changes — covers initial mount and switching nodes.
+  React.useEffect(() => {
+    form.reset(flattenTask(task as unknown));
+    // `task` is intentionally excluded: on node change we always reset to the
+    // current task snapshot. External task mutations (undo/redo) are handled
+    // by the effect below.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [nodeId, form]);
+
+  // ── Reset when the model changes externally (undo/redo, same node) ────────
+  // Only fires when `task` identity changes while `nodeId` stays the same.
+  // Structural equality guards against spurious resets when the nodes array is
+  // rebuilt with identical content.
+  const prevTaskRef = React.useRef<Specification.Task>(task);
+  React.useEffect(() => {
+    if (structuralEqual(task, prevTaskRef.current)) return;
+    prevTaskRef.current = task;
+    form.reset(flattenTask(task as unknown));
+  }, [task, form]);
+
+  // ── Seed SDK errors into form field slots ─────────────────────────────────
+  useWorkflowErrorsForForm(errors, taskReference, taskReferences, form.setError, nodeId);
+
+  // ── Read-only: filter fields to only those with values ────────────────────
+  const visibleFields = React.useMemo(() => {
+    if (!isReadOnly) return allFields;
+    return filterReadOnlyFields(allFields, task as Record<string, unknown>);
+  }, [allFields, isReadOnly, task]);
+
+  if (allFields.length === 0 || visibleFields.length === 0) return null;
+
+  return (
+    <TaskFormContext.Provider
+      value={{ isReadOnly, siblingTaskNames, taskData: task as Record<string, unknown> }}
+    >
+      <form
+        className="dec-task-form"
+        onSubmit={(e) => e.preventDefault()}
+        aria-label={t("aria.form.taskProperties")}
+      >
+        <div className="dec-task-form-fields">
+          {visibleFields.map((field) => (
+            <FormField key={field.path} field={field} />
+          ))}
+        </div>
+      </form>
+    </TaskFormContext.Provider>
+  );
+}
diff --git a/packages/open-workflow-diagram-editor/src/side-panel/forms/customFields/BooleanControl.tsx b/packages/open-workflow-diagram-editor/src/side-panel/forms/customFields/BooleanControl.tsx
new file mode 100644
index 00000000..dcfea4a5
--- /dev/null
+++ b/packages/open-workflow-diagram-editor/src/side-panel/forms/customFields/BooleanControl.tsx
@@ -0,0 +1,52 @@
+/*
+ * Copyright 2021-Present The Open Workflow Specification Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import * as React from "react";
+import { Controller, useFormContext } from "react-hook-form";
+import { Switch } from "@/components/ui/switch";
+import type { BooleanField } from "../schemaToFormFields";
+import { useTaskFormContext } from "../taskFormContext";
+
+// ---------------------------------------------------------------------------
+// BooleanControl — toggle switch backed by react-hook-form
+//
+// Uses aria-label instead of htmlFor because htmlFor → <button> association
+// does not work in the DOM.
+// ---------------------------------------------------------------------------
+
+export type BooleanControlProps = {
+  field: BooleanField;
+};
+
+export function BooleanControl({ field }: BooleanControlProps) {
+  const { control } = useFormContext<Record<string, unknown>>();
+  const { isReadOnly } = useTaskFormContext();
+
+  return (
+    <Controller
+      name={field.path}
+      control={control}
+      render={({ field: rhfField }) => (
+        <Switch
+          checked={!!rhfField.value}
+          {...(!isReadOnly ? { onCheckedChange: rhfField.onChange } : {})}
+          disabled={isReadOnly}
+          aria-label={field.label}
+        />
+      )}
+    />
+  );
+}
diff --git a/packages/open-workflow-diagram-editor/src/side-panel/forms/customFields/ChildTaskListField.tsx b/packages/open-workflow-diagram-editor/src/side-panel/forms/customFields/ChildTaskListField.tsx
new file mode 100644
index 00000000..08c3835c
--- /dev/null
+++ b/packages/open-workflow-diagram-editor/src/side-panel/forms/customFields/ChildTaskListField.tsx
@@ -0,0 +1,57 @@
+/*
+ * Copyright 2021-Present The Open Workflow Specification Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import * as React from "react";
+import { Controller, useFormContext } from "react-hook-form";
+import type { ChildTaskListField as ChildTaskListFieldDescriptor } from "../schemaToFormFields";
+
+// ---------------------------------------------------------------------------
+// ChildTaskListField — read-only list of child task names
+// ---------------------------------------------------------------------------
+
+export type ChildTaskListFieldProps = {
+  field: ChildTaskListFieldDescriptor;
+};
+
+export function ChildTaskListField({ field }: ChildTaskListFieldProps) {
+  const { control } = useFormContext<Record<string, unknown>>();
+
+  return (
+    <Controller
+      name={field.path}
+      control={control}
+      render={({ field: rhfField }) => {
+        const list = rhfField.value;
+        if (!Array.isArray(list) || list.length === 0) {
+          return <span className="dec-form-child-list-empty">—</span>;
+        }
+        const names = list
+          .map((entry) => (entry && typeof entry === "object" ? Object.keys(entry)[0] : undefined))
+          .filter(Boolean) as string[];
+
+        return (
+          <ul className="dec-form-child-list">
+            {names.map((name) => (
+              <li key={name} className="dec-form-child-list-item">
+                {name}
+              </li>
+            ))}
+          </ul>
+        );
+      }}
+    />
+  );
+}
diff --git a/packages/open-workflow-diagram-editor/src/side-panel/forms/customFields/DurationField.tsx b/packages/open-workflow-diagram-editor/src/side-panel/forms/customFields/DurationField.tsx
new file mode 100644
index 00000000..e4cddf03
--- /dev/null
+++ b/packages/open-workflow-diagram-editor/src/side-panel/forms/customFields/DurationField.tsx
@@ -0,0 +1,70 @@
+/*
+ * Copyright 2021-Present The Open Workflow Specification Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import * as React from "react";
+import { Controller, useFormContext } from "react-hook-form";
+import { useI18n } from "@openworkflowspec/i18n";
+import { Input } from "@/components/ui/input";
+import type { DurationField as DurationFieldDescriptor } from "../schemaToFormFields";
+import { useTaskFormContext } from "../taskFormContext";
+import { useFieldError, FieldWithError } from "./fieldHelpers";
+
+// ---------------------------------------------------------------------------
+// ISO 8601 duration regex
+// ---------------------------------------------------------------------------
+
+export const ISO_8601_DURATION_PATTERN =
+  "^P(?!$)(\\d+(?:\\.\\d+)?Y)?(\\d+(?:\\.\\d+)?M)?(\\d+(?:\\.\\d+)?W)?(\\d+(?:\\.\\d+)?D)?(T(?=\\d)(\\d+(?:\\.\\d+)?H)?(\\d+(?:\\.\\d+)?M)?(\\d+(?:\\.\\d+)?S)?)?$";
+
+// ---------------------------------------------------------------------------
+// DurationField — ISO 8601 duration input backed by react-hook-form
+// ---------------------------------------------------------------------------
+
+export type DurationFieldProps = {
+  field: DurationFieldDescriptor;
+  id?: string;
+};
+
+export function DurationField({ field, id }: DurationFieldProps) {
+  const { control } = useFormContext<Record<string, unknown>>();
+  const { isReadOnly } = useTaskFormContext();
+  const { t } = useI18n();
+  const errorMessage = useFieldError(field.path);
+
+  return (
+    <Controller
+      name={field.path}
+      control={control}
+      render={({ field: rhfField }) => (
+        <FieldWithError errorMessage={errorMessage}>
+          <Input
+            id={id}
+            value={rhfField.value == null ? "" : String(rhfField.value)}
+            onChange={rhfField.onChange}
+            onBlur={rhfField.onBlur}
+            name={rhfField.name}
+            pattern={ISO_8601_DURATION_PATTERN}
+            title={t("sidebar.duration.title")}
+            disabled={isReadOnly}
+            readOnly={isReadOnly}
+            placeholder={t("sidebar.duration.placeholder")}
+            aria-invalid={errorMessage !== undefined || undefined}
+          />
+        </FieldWithError>
+      )}
+    />
+  );
+}
diff --git a/packages/open-workflow-diagram-editor/src/side-panel/forms/customFields/EnumControl.tsx b/packages/open-workflow-diagram-editor/src/side-panel/forms/customFields/EnumControl.tsx
new file mode 100644
index 00000000..f31dd758
--- /dev/null
+++ b/packages/open-workflow-diagram-editor/src/side-panel/forms/customFields/EnumControl.tsx
@@ -0,0 +1,82 @@
+/*
+ * Copyright 2021-Present The Open Workflow Specification Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import * as React from "react";
+import { Controller, useFormContext } from "react-hook-form";
+import { useI18n } from "@openworkflowspec/i18n";
+import {
+  Combobox,
+  ComboboxContent,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxList,
+} from "@/components/ui/combobox";
+import type { EnumField } from "../schemaToFormFields";
+import { useTaskFormContext } from "../taskFormContext";
+import { useFieldError, FieldWithError } from "./fieldHelpers";
+
+// ---------------------------------------------------------------------------
+// EnumControl — combobox selector backed by react-hook-form
+// ---------------------------------------------------------------------------
+
+export type EnumControlProps = {
+  field: EnumField;
+  id?: string;
+};
+
+export function EnumControl({ field, id }: EnumControlProps) {
+  const { control } = useFormContext<Record<string, unknown>>();
+  const { isReadOnly } = useTaskFormContext();
+  const { t } = useI18n();
+  const errorMessage = useFieldError(field.path);
+
+  return (
+    <Controller
+      name={field.path}
+      control={control}
+      render={({ field: rhfField }) => (
+        <FieldWithError errorMessage={errorMessage}>
+          <Combobox
+            value={(rhfField.value as string) ?? ""}
+            onValueChange={!isReadOnly ? rhfField.onChange : undefined}
+            disabled={isReadOnly}
+          >
+            <ComboboxInput
+              id={id}
+              readOnly
+              value={(rhfField.value as string) ?? t("sidebar.form.selectOption")}
+              onBlur={rhfField.onBlur}
+              name={rhfField.name}
+              aria-label={field.label}
+              aria-invalid={errorMessage !== undefined || undefined}
+              showClear={false}
+              className="dec:h-7 dec:text-xs"
+            />
+            <ComboboxContent>
+              <ComboboxList>
+                {field.options.map((opt) => (
+                  <ComboboxItem key={opt} value={opt}>
+                    {opt}
+                  </ComboboxItem>
+                ))}
+              </ComboboxList>
+            </ComboboxContent>
+          </Combobox>
+        </FieldWithError>
+      )}
+    />
+  );
+}
diff --git a/packages/open-workflow-diagram-editor/src/side-panel/forms/customFields/KeyValueMapField.tsx b/packages/open-workflow-diagram-editor/src/side-panel/forms/customFields/KeyValueMapField.tsx
new file mode 100644
index 00000000..cbe1371d
--- /dev/null
+++ b/packages/open-workflow-diagram-editor/src/side-panel/forms/customFields/KeyValueMapField.tsx
@@ -0,0 +1,282 @@
+/*
+ * Copyright 2021-Present The Open Workflow Specification Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import * as React from "react";
+import { useFormContext, type UseFormReturn } from "react-hook-form";
+import { X, Plus } from "lucide-react";
+import { useI18n } from "@openworkflowspec/i18n";
+import { Input } from "@/components/ui/input";
+import type { MapField } from "../schemaToFormFields";
+import { useTaskFormContext } from "../taskFormContext";
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+interface MapEntry {
+  /** Stable row identity — never changes after creation (survives key renames). */
+  id: string;
+  key: string;
+  value: string;
+}
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+/** Generate a stable row id that does not collide across adds/deletes. */
+function newId(): string {
+  return Math.random().toString(36).slice(2);
+}
+
+/**
+ * Extract map entries from a nested task data object at `prefix`.
+ * Returns the key/value pairs of the object stored at that path.
+ */
+function extractEntries(taskData: Record<string, unknown>, prefix: string): MapEntry[] {
+  // Walk the dot-notation prefix to find the nested object.
+  const parts = prefix ? prefix.split(".") : [];
+  let node: unknown = taskData;
+  for (const part of parts) {
+    if (node == null || typeof node !== "object" || Array.isArray(node)) return [];
+    node = (node as Record<string, unknown>)[part];
+  }
+  if (node == null || typeof node !== "object" || Array.isArray(node)) return [];
+  return extractEntriesFromObject(node as Record<string, unknown>);
+}
+
+/**
+ * Convert a plain key→value object directly into MapEntry rows.
+ * Used when the object is already resolved (e.g. from `getValues()`).
+ */
+function extractEntriesFromObject(obj: Record<string, unknown>): MapEntry[] {
+  return Object.entries(obj).map(([k, v]) => ({
+    id: newId(),
+    key: k,
+    value: v == null ? "" : String(v),
+  }));
+}
+
+// ---------------------------------------------------------------------------
+// KeyValueMapField
+// ---------------------------------------------------------------------------
+
+export type KeyValueMapFieldProps = {
+  field: MapField;
+};
+
+/**
+ * Renders a dynamic key-value map editor backed by react-hook-form.
+ *
+ * Each entry maps to a flat form key `field.path + "." + entryKey`, so the
+ * standard `unflattenValues` call in the footer reconstructs the nested object
+ * without any special knowledge of map fields.
+ *
+ * Works generically for any `MapField` produced by `schemaToFormFields`:
+ * `set`, `with`, `headers`, `query`, `environment`, and any future map-shaped
+ * schema property.
+ */
+export function KeyValueMapField({ field }: KeyValueMapFieldProps) {
+  const { t } = useI18n();
+  const { isReadOnly, taskData } = useTaskFormContext();
+  // Cast to untyped form to allow dynamic dot-notation path writes.
+  // react-hook-form's path inference over Record<string,unknown> can produce
+  // overly-narrow types for runtime-composed key strings.
+  const form = useFormContext() as UseFormReturn<Record<string, unknown>>;
+  const { setValue, unregister, getValues } = form;
+
+  // ── Initialise rows ───────────────────────────────────────────────────────
+  // Prefer the current RHF value (an object restored by a variant switch) over
+  // `taskData` when the field mounts. This covers the case where OneOfFieldRow
+  // already called setValue(field.path, savedObject) before this component was
+  // mounted (because KeyValueMapField unmounts when its variant is not active).
+  // If the RHF value is a plain object, derive rows from it; otherwise fall back
+  // to taskData (the committed task snapshot).
+  const [rows, setRows] = React.useState<MapEntry[]>(() => {
+    const rhfValue = getValues(field.path as never);
+    if (
+      rhfValue !== null &&
+      rhfValue !== undefined &&
+      typeof rhfValue === "object" &&
+      !Array.isArray(rhfValue)
+    ) {
+      return extractEntriesFromObject(rhfValue as Record<string, unknown>);
+    }
+    return extractEntries(taskData, field.path);
+  });
+
+  // Re-sync rows whenever the task data changes externally (undo/redo, node
+  // switch). `taskData` identity changes whenever TaskForm resets the form.
+  const prevTaskDataRef = React.useRef(taskData);
+  React.useEffect(() => {
+    if (prevTaskDataRef.current === taskData) return;
+    prevTaskDataRef.current = taskData;
+    setRows(extractEntries(taskData, field.path));
+  }, [taskData, field.path]);
+
+  // Keep a stable ref to rows so event handlers can read the current snapshot
+  // without needing rows as a dependency (avoids stale-closure issues).
+  const rowsRef = React.useRef(rows);
+  React.useEffect(() => {
+    rowsRef.current = rows;
+  });
+
+  // ── Entry mutation helpers ────────────────────────────────────────────────
+
+  const updateRow = React.useCallback(
+    (id: string, newKey: string, newValue: string) => {
+      const current = rowsRef.current.find((r) => r.id === id);
+      if (!current) return;
+
+      // Rename: unregister the old key before registering the new one.
+      if (current.key !== newKey && current.key !== "") {
+        unregister(`${field.path}.${current.key}`);
+      }
+      if (newKey !== "") {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        setValue(`${field.path}.${newKey}` as any, newValue, { shouldDirty: true });
+      }
+
+      setRows((prev) =>
+        prev.map((r) => (r.id === id ? { ...r, key: newKey, value: newValue } : r)),
+      );
+    },
+    [field.path, setValue, unregister],
+  );
+
+  const addRow = React.useCallback(() => {
+    setRows((prev) => [...prev, { id: newId(), key: "", value: "" }]);
+  }, []);
+
+  const deleteRow = React.useCallback(
+    (id: string) => {
+      const current = rowsRef.current.find((r) => r.id === id);
+      if (current?.key) {
+        unregister(`${field.path}.${current.key}`);
+      }
+      setRows((prev) => prev.filter((r) => r.id !== id));
+    },
+    [field.path, unregister],
+  );
+
+  // ── Count badge ───────────────────────────────────────────────────────────
+  const filledCount = rows.filter((r) => r.key !== "").length;
+  const countLabel =
+    filledCount === 1
+      ? `1 ${t("sidebar.field.item")}`
+      : `${filledCount} ${t("sidebar.field.items")}`;
+
+  // ── Read-only mode ────────────────────────────────────────────────────────
+  if (isReadOnly) {
+    if (filledCount === 0) return null;
+    return (
+      <div className="dec-map-group">
+        <div className="dec-map-header">
+          <span className="dec-map-label">{field.label}</span>
+          <span className="dec-map-count">{countLabel}</span>
+        </div>
+        <div className="dec-map-rows">
+          {rows
+            .filter((r) => r.key !== "")
+            .map((row) => (
+              <div key={row.id} className="dec-map-row">
+                <span className="dec-map-key-readonly">{row.key}</span>
+                <span className="dec-map-value-readonly">{row.value}</span>
+              </div>
+            ))}
+        </div>
+      </div>
+    );
+  }
+
+  // ── Edit mode ─────────────────────────────────────────────────────────────
+  return (
+    <div className="dec-map-group">
+      <div className="dec-map-header">
+        <span className="dec-map-label">{field.label}</span>
+        {filledCount > 0 && <span className="dec-map-count">{countLabel}</span>}
+      </div>
+
+      {rows.length > 0 && (
+        <div className="dec-map-rows">
+          {rows.map((row) => (
+            <MapRow
+              key={row.id}
+              row={row}
+              onUpdate={(newKey, newValue) => updateRow(row.id, newKey, newValue)}
+              onDelete={() => deleteRow(row.id)}
+            />
+          ))}
+        </div>
+      )}
+
+      <div className="dec-map-add-btn-wrap">
+        <button
+          type="button"
+          className="dec-map-add-btn"
+          onClick={addRow}
+          aria-label={t("sidebar.map.addProperty")}
+        >
+          <Plus className="dec-map-add-icon" aria-hidden="true" />
+          {t("sidebar.map.addProperty")}
+        </button>
+      </div>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// MapRow — single editable key/value entry
+// ---------------------------------------------------------------------------
+
+function MapRow({
+  row,
+  onUpdate,
+  onDelete,
+}: {
+  row: MapEntry;
+  onUpdate: (key: string, value: string) => void;
+  onDelete: () => void;
+}) {
+  const { t } = useI18n();
+
+  return (
+    <div className="dec-map-row">
+      <Input
+        className="dec-map-key-input"
+        value={row.key}
+        placeholder={t("sidebar.map.keyPlaceholder")}
+        onChange={(e) => onUpdate(e.target.value, row.value)}
+        aria-label={t("sidebar.map.keyLabel")}
+      />
+      <Input
+        className="dec-map-value-input"
+        value={row.value}
+        placeholder={t("sidebar.map.valuePlaceholder")}
+        onChange={(e) => onUpdate(row.key, e.target.value)}
+        aria-label={t("sidebar.map.valueLabel")}
+      />
+      <button
+        type="button"
+        className="dec-map-delete-btn"
+        onClick={onDelete}
+        aria-label={t("sidebar.map.deleteEntry")}
+      >
+        <X className="dec-map-delete-icon" aria-hidden="true" />
+      </button>
+    </div>
+  );
+}
diff --git a/packages/open-workflow-diagram-editor/src/side-panel/forms/customFields/NumberControl.tsx b/packages/open-workflow-diagram-editor/src/side-panel/forms/customFields/NumberControl.tsx
new file mode 100644
index 00000000..a619c930
--- /dev/null
+++ b/packages/open-workflow-diagram-editor/src/side-panel/forms/customFields/NumberControl.tsx
@@ -0,0 +1,84 @@
+/*
+ * Copyright 2021-Present The Open Workflow Specification Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import * as React from "react";
+import { Controller, useFormContext } from "react-hook-form";
+import { Input } from "@/components/ui/input";
+import type { NumberField } from "../schemaToFormFields";
+import { useTaskFormContext } from "../taskFormContext";
+import { useFieldError, FieldWithError } from "./fieldHelpers";
+
+// ---------------------------------------------------------------------------
+// NumberControl — numeric text input backed by react-hook-form
+//
+// Uses type="text" with inputMode="numeric" instead of type="number" so the
+// browser never prevents clearing the field. With type="number" the native
+// spin buttons and browser validation block the user from leaving the field
+// empty (the browser clamps or restores the last valid value). Using text mode
+// gives us full control: empty input maps to "" (treated as "remove this key"
+// by applyDirtyValues).
+// ---------------------------------------------------------------------------
+
+export type NumberControlProps = {
+  field: NumberField;
+  id?: string;
+};
+
+export function NumberControl({ field, id }: NumberControlProps) {
+  const { control, clearErrors } = useFormContext<Record<string, unknown>>();
+  const { isReadOnly } = useTaskFormContext();
+  const errorMessage = useFieldError(field.path);
+
+  return (
+    <Controller
+      name={field.path}
+      control={control}
+      render={({ field: rhfField }) => (
+        <FieldWithError errorMessage={errorMessage}>
+          <Input
+            type="text"
+            inputMode="numeric"
+            id={id}
+            ref={rhfField.ref}
+            value={rhfField.value == null ? "" : String(rhfField.value)}
+            onChange={(e) => {
+              const raw = e.target.value;
+              // Clear any stale SDK error the moment the user starts editing,
+              // so the "must be integer" message doesn't flash while typing.
+              clearErrors(field.path);
+              if (raw === "") {
+                // Empty input → store "" so RHF marks the field dirty.
+                // applyDirtyValues deletes the path when the value is "" or null.
+                rhfField.onChange("");
+              } else {
+                const parsed = Number(raw);
+                // Ignore non-numeric characters; leave the stored value unchanged.
+                if (!Number.isNaN(parsed)) {
+                  rhfField.onChange(parsed);
+                }
+              }
+            }}
+            onBlur={rhfField.onBlur}
+            name={rhfField.name}
+            disabled={isReadOnly}
+            readOnly={isReadOnly}
+            aria-invalid={errorMessage !== undefined || undefined}
+          />
+        </FieldWithError>
+      )}
+    />
+  );
+}
diff --git a/packages/open-workflow-diagram-editor/src/side-panel/forms/customFields/ScrollableTextField.tsx b/packages/open-workflow-diagram-editor/src/side-panel/forms/customFields/ScrollableTextField.tsx
new file mode 100644
index 00000000..c346e3ef
--- /dev/null
+++ b/packages/open-workflow-diagram-editor/src/side-panel/forms/customFields/ScrollableTextField.tsx
@@ -0,0 +1,64 @@
+/*
+ * Copyright 2021-Present The Open Workflow Specification Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import * as React from "react";
+import { Controller, useFormContext } from "react-hook-form";
+import { Textarea } from "@/components/ui/textarea";
+import type { StringField } from "../schemaToFormFields";
+import { useTaskFormContext } from "../taskFormContext";
+import { useFieldError, FieldWithError } from "./fieldHelpers";
+
+// ---------------------------------------------------------------------------
+// ScrollableTextField — fixed 3-line textarea with overflow scroll
+//
+// Use for fields whose content is typically long text (e.g. inline schema
+// documents, scripts, multi-line expressions) that benefit from a visible
+// height with scrollable overflow rather than an auto-expanding area.
+// ---------------------------------------------------------------------------
+
+export type ScrollableTextFieldProps = {
+  field: StringField;
+  id?: string | undefined;
+};
+
+export function ScrollableTextField({ field, id }: ScrollableTextFieldProps) {
+  const { control } = useFormContext<Record<string, unknown>>();
+  const { isReadOnly } = useTaskFormContext();
+  const errorMessage = useFieldError(field.path);
+
+  const placeholder = field.placeholder ?? (field.isRuntimeExpression ? "${...}" : undefined);
+
+  return (
+    <Controller
+      name={field.path}
+      control={control}
+      render={({ field: rhfField }) => (
+        <FieldWithError errorMessage={errorMessage}>
+          <Textarea
+            {...rhfField}
+            id={id}
+            value={rhfField.value == null ? "" : String(rhfField.value)}
+            disabled={isReadOnly}
+            readOnly={isReadOnly}
+            placeholder={placeholder}
+            className="dec-form-scrollable-textarea"
+            aria-invalid={errorMessage !== undefined || undefined}
+          />
+        </FieldWithError>
+      )}
+    />
+  );
+}
diff --git a/packages/open-workflow-diagram-editor/src/side-panel/forms/customFields/StringControl.tsx b/packages/open-workflow-diagram-editor/src/side-panel/forms/customFields/StringControl.tsx
new file mode 100644
index 00000000..1d0cf91c
--- /dev/null
+++ b/packages/open-workflow-diagram-editor/src/side-panel/forms/customFields/StringControl.tsx
@@ -0,0 +1,66 @@
+/*
+ * Copyright 2021-Present The Open Workflow Specification Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import * as React from "react";
+import { Controller, useFormContext } from "react-hook-form";
+import { Input } from "@/components/ui/input";
+import type { StringField } from "../schemaToFormFields";
+import { useTaskFormContext } from "../taskFormContext";
+import { useFieldError, FieldWithError } from "./fieldHelpers";
+import { ScrollableTextField } from "./ScrollableTextField";
+
+// ---------------------------------------------------------------------------
+// StringControl — single-line or multiline string input
+// ---------------------------------------------------------------------------
+
+export type StringControlProps = {
+  field: StringField;
+  id?: string;
+};
+
+export function StringControl({ field, id }: StringControlProps) {
+  // Multiline strings are handled by the dedicated scrollable custom field.
+  if (field.multiline) {
+    return <ScrollableTextField field={field} id={id} />;
+  }
+
+  const { control } = useFormContext<Record<string, unknown>>();
+  const { isReadOnly } = useTaskFormContext();
+  const errorMessage = useFieldError(field.path);
+
+  const placeholder = field.placeholder ?? (field.isRuntimeExpression ? "${...}" : undefined);
+
+  return (
+    <Controller
+      name={field.path}
+      control={control}
+      render={({ field: rhfField }) => (
+        <FieldWithError errorMessage={errorMessage}>
+          <Input
+            {...rhfField}
+            id={id}
+            value={rhfField.value == null ? "" : String(rhfField.value)}
+            disabled={isReadOnly}
+            readOnly={isReadOnly}
+            placeholder={placeholder}
+            className={field.isRuntimeExpression ? "dec-form-expression-input" : undefined}
+            aria-invalid={errorMessage !== undefined || undefined}
+          />
+        </FieldWithError>
+      )}
+    />
+  );
+}
diff --git a/packages/open-workflow-diagram-editor/src/side-panel/forms/customFields/ThenField.tsx b/packages/open-workflow-diagram-editor/src/side-panel/forms/customFields/ThenField.tsx
new file mode 100644
index 00000000..70c7f424
--- /dev/null
+++ b/packages/open-workflow-diagram-editor/src/side-panel/forms/customFields/ThenField.tsx
@@ -0,0 +1,98 @@
+/*
+ * Copyright 2021-Present The Open Workflow Specification Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import * as React from "react";
+import { Controller, useFormContext } from "react-hook-form";
+import { useI18n } from "@openworkflowspec/i18n";
+import {
+  Combobox,
+  ComboboxContent,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxLabel,
+  ComboboxList,
+  ComboboxSeparator,
+} from "@/components/ui/combobox";
+import type { ThenField as ThenFieldDescriptor } from "../schemaToFormFields";
+import { useTaskFormContext } from "../taskFormContext";
+import { useFieldError, FieldWithError } from "./fieldHelpers";
+
+// ---------------------------------------------------------------------------
+// ThenField — combobox of flow directives + sibling task names in scope
+// ---------------------------------------------------------------------------
+
+const FLOW_DIRECTIVES = ["continue", "exit", "end"] as const;
+
+export type ThenFieldProps = {
+  field: ThenFieldDescriptor;
+  id?: string;
+};
+
+export function ThenField({ field, id }: ThenFieldProps) {
+  const { t } = useI18n();
+  const { control } = useFormContext<Record<string, unknown>>();
+  const { isReadOnly, siblingTaskNames } = useTaskFormContext();
+  const errorMessage = useFieldError(field.path);
+
+  return (
+    <Controller
+      name={field.path}
+      control={control}
+      render={({ field: rhfField }) => (
+        <FieldWithError errorMessage={errorMessage}>
+          <Combobox
+            value={(rhfField.value as string) ?? ""}
+            onValueChange={!isReadOnly ? rhfField.onChange : undefined}
+            disabled={isReadOnly}
+          >
+            <ComboboxInput
+              id={id}
+              readOnly
+              value={(rhfField.value as string) ?? "—"}
+              onBlur={rhfField.onBlur}
+              name={rhfField.name}
+              aria-label={field.label}
+              aria-invalid={errorMessage !== undefined || undefined}
+              showClear={false}
+              className="dec:h-7 dec:text-xs"
+            />
+            <ComboboxContent>
+              <ComboboxList>
+                <ComboboxLabel>{t("sidebar.then.flowDirectiveGroup")}</ComboboxLabel>
+                {FLOW_DIRECTIVES.map((directive) => (
+                  <ComboboxItem key={directive} value={directive}>
+                    {directive}
+                  </ComboboxItem>
+                ))}
+                {siblingTaskNames.length > 0 && (
+                  <>
+                    <ComboboxSeparator />
+                    <ComboboxLabel>{t("sidebar.then.taskGroup")}</ComboboxLabel>
+                    {siblingTaskNames.map((name) => (
+                      <ComboboxItem key={name} value={name}>
+                        {name}
+                      </ComboboxItem>
+                    ))}
+                  </>
+                )}
+              </ComboboxList>
+            </ComboboxContent>
+          </Combobox>
+        </FieldWithError>
+      )}
+    />
+  );
+}
diff --git a/packages/open-workflow-diagram-editor/src/side-panel/forms/customFields/fieldHelpers.tsx b/packages/open-workflow-diagram-editor/src/side-panel/forms/customFields/fieldHelpers.tsx
new file mode 100644
index 00000000..7a8a4fcc
--- /dev/null
+++ b/packages/open-workflow-diagram-editor/src/side-panel/forms/customFields/fieldHelpers.tsx
@@ -0,0 +1,54 @@
+/*
+ * Copyright 2021-Present The Open Workflow Specification Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import * as React from "react";
+import { useFormState, get } from "react-hook-form";
+
+// ---------------------------------------------------------------------------
+// useFieldError — resolve field-level error message from RHF form state
+// ---------------------------------------------------------------------------
+
+export function useFieldError(path: string): string | undefined {
+  const { errors } = useFormState<Record<string, unknown>>();
+  // RHF stores errors as nested objects even when field names use dot-notation
+  // (e.g. "with.method" is stored at errors.with.method, not errors["with.method"]).
+  // Use RHF's own `get()` helper to traverse the nested path correctly.
+  const error = get(errors, path) as { message?: string } | undefined;
+  return error?.message;
+}
+
+// ---------------------------------------------------------------------------
+// FieldWithError — wraps a control and shows an inline error message beneath
+// ---------------------------------------------------------------------------
+
+export function FieldWithError({
+  errorMessage,
+  children,
+}: {
+  errorMessage: string | undefined;
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="dec-form-field-input-wrap">
+      {children}
+      {errorMessage !== undefined && (
+        <p className="dec-form-field-error" role="alert">
+          {errorMessage}
+        </p>
+      )}
+    </div>
+  );
+}
diff --git a/packages/open-workflow-diagram-editor/src/side-panel/forms/customFields/index.ts b/packages/open-workflow-diagram-editor/src/side-panel/forms/customFields/index.ts
new file mode 100644
index 00000000..ec80affb
--- /dev/null
+++ b/packages/open-workflow-diagram-editor/src/side-panel/forms/customFields/index.ts
@@ -0,0 +1,26 @@
+/*
+ * Copyright 2021-Present The Open Workflow Specification Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export { KeyValueMapField } from "./KeyValueMapField";
+export { DurationField } from "./DurationField";
+export { ThenField } from "./ThenField";
+export { ChildTaskListField } from "./ChildTaskListField";
+export { ScrollableTextField } from "./ScrollableTextField";
+export { useFieldError, FieldWithError } from "./fieldHelpers";
+export { StringControl } from "./StringControl";
+export { NumberControl } from "./NumberControl";
+export { BooleanControl } from "./BooleanControl";
+export { EnumControl } from "./EnumControl";
diff --git a/packages/open-workflow-diagram-editor/src/side-panel/forms/schemaToFormFields.ts b/packages/open-workflow-diagram-editor/src/side-panel/forms/schemaToFormFields.ts
new file mode 100644
index 00000000..326426c0
--- /dev/null
+++ b/packages/open-workflow-diagram-editor/src/side-panel/forms/schemaToFormFields.ts
@@ -0,0 +1,835 @@
+/*
+ * Copyright 2021-Present The Open Workflow Specification Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { DereferencedSchema } from "@/core/schemaFilter";
+
+/**
+ * A single form field descriptor produced by walking a task's JSON Schema.
+ * Each descriptor drives one row in the form UI.
+ *
+ * The walker is fully generic — it understands JSON Schema structure but
+ * carries no knowledge of any specific schema definition names or task types.
+ * Domain-specific concerns (e.g. mapping graph node types to definition names)
+ * live in `src/core/schemaWalker.ts`.
+ */
+export type FormFieldDescriptor =
+  | StringField
+  | NumberField
+  | BooleanField
+  | EnumField
+  | DurationField
+  | ThenField
+  | ChildTaskListField
+  | ObjectField
+  | MapField
+  | OneOfField;
+
+interface FieldBase {
+  /** Dot-notation path from the task root, e.g. "for.each" */
+  path: string;
+  /** Human-readable label (title from schema, or the last path segment) */
+  label: string;
+  /** Schema description shown as a tooltip when present */
+  description?: string | undefined;
+  /** Whether the field must have a value (required in schema) */
+  required: boolean;
+}
+
+export interface StringField extends FieldBase {
+  kind: "string";
+  /** When true the field uses a Textarea rather than an Input */
+  multiline: boolean;
+  /** The runtime-expression pattern — field value must match `${...}` syntax */
+  isRuntimeExpression: boolean;
+  /** Optional placeholder hint, e.g. "https://example.com/api/{id}" */
+  placeholder?: string | undefined;
+}
+
+export interface NumberField extends FieldBase {
+  kind: "number";
+}
+
+export interface BooleanField extends FieldBase {
+  kind: "boolean";
+}
+
+export interface EnumField extends FieldBase {
+  kind: "enum";
+  options: string[];
+}
+
+/**
+ * An ISO-8601 duration string field.
+ * Identified structurally: a string property whose `pattern` starts with `^P`.
+ */
+export interface DurationField extends FieldBase {
+  kind: "duration";
+}
+
+/**
+ * The `then` transition field — a combobox driven by sibling task names
+ * in the workflow. Identified structurally: any property named `then`, or
+ * any property whose schema is an `anyOf` containing an enum variant and a
+ * plain-string variant (the flowDirective pattern).
+ */
+export interface ThenField extends FieldBase {
+  kind: "then";
+}
+
+/**
+ * A property that resolves to an array of tagged task entries.
+ * Rendered as a read-only list of child-task names.
+ *
+ * Identified structurally: an array whose `items.additionalProperties.$ref`
+ * points to the task union definition.
+ */
+export interface ChildTaskListField extends FieldBase {
+  kind: "child-task-list";
+}
+
+/**
+ * A plain object with known sub-properties.
+ * Rendered as a collapsible group that recurses into its children.
+ */
+export interface ObjectField extends FieldBase {
+  kind: "object";
+  children: FormFieldDescriptor[];
+}
+
+/**
+ * An open-ended key-value map (an object schema with `additionalProperties`
+ * set and no fixed `properties` block).
+ *
+ * Identified structurally so it works with any conforming schema definition —
+ * not just `setTask`. Examples: `set`, `with` (custom function call),
+ * `headers`, `query`, `environment` in runTask scripts, etc.
+ *
+ * Rendered as a dynamic list of key/value rows with add and delete controls.
+ */
+export interface MapField extends FieldBase {
+  kind: "map";
+}
+
+/**
+ * A field that can hold one of several variant types (oneOf / anyOf in the
+ * schema). Each variant is a sub-schema with its own label and child fields.
+ */
+export interface OneOfField extends FieldBase {
+  kind: "one-of";
+  variants: OneOfVariant[];
+}
+
+export interface OneOfVariant {
+  /** Label for the variant (from schema `title`, or a generated fallback) */
+  label: string;
+  /** The fields that belong to this variant */
+  fields: FormFieldDescriptor[];
+  /**
+   * Discriminator predicate: given the actual task value at this field's path,
+   * returns true when this variant is the one that matches the current data.
+   * Used in read-only mode to auto-select the correct variant.
+   */
+  matchesData: (data: unknown) => boolean;
+}
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+const RUNTIME_EXPRESSION_PATTERN = /^\s*\$\{.+\}\s*$/;
+
+function isPlainObject(v: unknown): v is Record<string, unknown> {
+  return typeof v === "object" && v !== null && !Array.isArray(v);
+}
+
+/** Resolve a `$ref` string like `"#/$defs/taskList"` against the local `$defs` block. */
+function resolveRef(
+  ref: string,
+  defs: Record<string, unknown> | undefined,
+): Record<string, unknown> | null {
+  if (!ref.startsWith("#/$defs/") || !defs) return null;
+  const name = ref.slice("#/$defs/".length);
+  const def = defs[name];
+  return isPlainObject(def) ? def : null;
+}
+
+/**
+ * Returns true if the schema represents an open-ended key-value map: a plain
+ * object with `additionalProperties` set (to `true` or to a sub-schema) and
+ * no fixed `properties` block.
+ *
+ * Detection is purely structural — no schema definition name is referenced —
+ * so it captures every place the workflow schema uses this pattern: `set`,
+ * `with` (custom function call), `headers`, `query`, `environment`, etc.
+ */
+function isMapSchema(schema: Record<string, unknown>): boolean {
+  if (schema.type !== "object" || !!schema.properties) return false;
+  // Explicit additionalProperties — covers schemas like set's object variant
+  // ({ type: "object", additionalProperties: true }).
+  if (schema.additionalProperties !== undefined && schema.additionalProperties !== false)
+    return true;
+  // Bare { type: "object" } with no structural constraints — treat as an open
+  // key-value map. This covers input.from / output.as / export.as which omit
+  // additionalProperties but are semantically identical open maps.
+  if (schema.additionalProperties === undefined && !schema.oneOf && !schema.anyOf) return true;
+  return false;
+}
+
+/**
+ * Returns true if the schema node (or any `$ref` it resolves to) represents
+ * a task-list — an array whose `items.additionalProperties.$ref` points to
+ * the task union. Detection is purely structural; no definition name is
+ * hardcoded beyond the conventional task-union ref pattern.
+ */
+function isTaskListSchema(
+  schema: Record<string, unknown>,
+  defs: Record<string, unknown> | undefined,
+): boolean {
+  let node: Record<string, unknown> = schema;
+
+  // Follow one level of $ref
+  if (typeof node.$ref === "string") {
+    const resolved = resolveRef(node.$ref, defs);
+    if (!resolved) return false;
+    node = resolved;
+  }
+
+  if (node.type !== "array") return false;
+  const items = node.items;
+  if (!isPlainObject(items)) return false;
+  const ap = (items as Record<string, unknown>).additionalProperties;
+  if (!isPlainObject(ap)) return false;
+  const apRef = ap.$ref;
+  // Matches any ref whose last path segment is "task" (e.g. "#/$defs/task")
+  return typeof apRef === "string" && (apRef === "#/$defs/task" || apRef.endsWith("/task"));
+}
+
+/**
+ * Returns true if the schema represents a flow-directive field — a combobox
+ * that combines a set of named flow directives with a free-text task reference.
+ *
+ * Detection is structural: an `anyOf` that contains at least one variant with
+ * an `enum` array and at least one plain-string variant (no enum). This
+ * matches the `flowDirective` definition without referring to its name.
+ */
+function isFlowDirectiveSchema(
+  schema: Record<string, unknown>,
+  defs: Record<string, unknown> | undefined,
+): boolean {
+  // Recurse through a single level of $ref first
+  if (typeof schema.$ref === "string") {
+    const resolved = resolveRef(schema.$ref, defs);
+    if (resolved) return isFlowDirectiveSchema(resolved, defs);
+  }
+
+  if (!Array.isArray(schema.anyOf)) return false;
+  const anyOf = schema.anyOf as unknown[];
+
+  const hasEnum = anyOf.some(
+    (v) => isPlainObject(v) && Array.isArray((v as Record<string, unknown>).enum),
+  );
+  const hasPlainString = anyOf.some(
+    (v) =>
+      isPlainObject(v) &&
+      (v as Record<string, unknown>).type === "string" &&
+      !Array.isArray((v as Record<string, unknown>).enum),
+  );
+  return hasEnum && hasPlainString;
+}
+
+/** Derive a human-readable label from a schema node and the property key. */
+function deriveLabel(schema: Record<string, unknown>, key: string): string {
+  if (typeof schema.title === "string") {
+    // Strip any CamelCase prefix from composite titles like "ForTaskDo" → "Do"
+    const words = schema.title
+      .replace(/([A-Z])/g, " $1")
+      .trim()
+      .split(" ");
+    return words[words.length - 1] ?? key;
+  }
+  return key;
+}
+
+/** Formats a schema title or camelCase identifier into a user-friendly label. */
+function formatVariantLabel(title: string): string {
+  if (
+    title === "UriTemplate" ||
+    title === "LiteralEndpointURI" ||
+    title === "LiteralUriTemplate" ||
+    title === "LiteralUri"
+  ) {
+    return "URI";
+  }
+  if (title === "RuntimeExpression" || title === "ExpressionEndpointURI") {
+    return "Expression";
+  }
+  // Split camelCase into words (e.g. "EndpointConfiguration" -> "Endpoint Configuration")
+  return title
+    .replace(/([A-Z][a-z]+)/g, " $1")
+    .replace(/([A-Z]+)(?=[A-Z][a-z])/g, " $1")
+    .trim();
+}
+
+/** Only include the `description` key when it has a value (exactOptionalPropertyTypes). */
+function withDesc(description: string | undefined): { description?: string } {
+  return description !== undefined ? { description } : {};
+}
+
+// ---------------------------------------------------------------------------
+// Core walker
+// ---------------------------------------------------------------------------
+
+/**
+ * Walks a resolved JSON Schema and produces an ordered list of
+ * `FormFieldDescriptor`s that drive the task form UI.
+ *
+ * The walker understands JSON Schema structure (properties, oneOf, anyOf,
+ * $ref, type) and maps schema shapes to form field kinds. It is intentionally
+ * schema-agnostic: no specific definition names are referenced, so it works
+ * with any conforming JSON Schema regardless of which workflow DSL version
+ * produced it.
+ *
+ * @param schema     - The merged schema node (a `properties` block owner).
+ * @param defs       - The `$defs` bundle accompanying the top-level schema.
+ * @param requiredSet - Set of required property names at this level.
+ * @param path       - Dot-notation prefix (empty string at root).
+ */
+export function schemaToFormFields(
+  schema: DereferencedSchema,
+  defs?: Record<string, unknown>,
+  requiredSet?: Set<string>,
+  path = "",
+): FormFieldDescriptor[] {
+  const fields: FormFieldDescriptor[] = [];
+
+  // Tasks like callTask have a top-level `oneOf` with no own `properties`.
+  if (Array.isArray(schema.oneOf) && !schema.properties) {
+    const variants = buildOneOfVariants(schema.oneOf as unknown[], defs, path);
+    if (variants.length > 1) {
+      fields.push({
+        kind: "one-of",
+        path: path || "__root__",
+        label: typeof schema.title === "string" ? schema.title : "Type",
+        ...withDesc(typeof schema.description === "string" ? schema.description : undefined),
+        required: false,
+        variants,
+      });
+    } else if (variants.length === 1 && variants[0]) {
+      return variants[0].fields;
+    }
+    return fields;
+  }
+
+  const properties = schema.properties as Record<string, unknown> | undefined;
+  if (!properties) return fields;
+
+  const localDefs = (schema.$defs as Record<string, unknown> | undefined) ?? defs;
+  const req =
+    requiredSet ??
+    new Set<string>(Array.isArray(schema.required) ? (schema.required as string[]) : []);
+
+  for (const [key, rawProp] of Object.entries(properties)) {
+    if (!isPlainObject(rawProp)) continue;
+
+    const prop = rawProp as Record<string, unknown>;
+    const fieldPath = path ? `${path}.${key}` : key;
+    const isRequired = req.has(key);
+    const description = typeof prop.description === "string" ? prop.description : undefined;
+
+    // ── Special case: `then` key or flow-directive schema ─────────────────
+    // The `then` property is the canonical transition field and is always
+    // rendered as a sibling-task selector, regardless of its schema shape.
+    // Any other property whose schema structurally matches the flow-directive
+    // pattern (anyOf enum + plain string) is also treated as a `then` field.
+    if (key === "then" || isFlowDirectiveSchema(prop, localDefs)) {
+      fields.push({
+        kind: "then",
+        path: fieldPath,
+        label: deriveLabel(prop, key),
+        ...withDesc(description),
+        required: isRequired,
+      });
+      continue;
+    }
+
+    // ── Resolve $ref ───────────────────────────────────────────────────────
+    let resolved: Record<string, unknown> = prop;
+    if (typeof prop.$ref === "string") {
+      const ref = resolveRef(prop.$ref, localDefs);
+      if (ref) {
+        resolved = { ...ref, ...prop, $ref: undefined };
+      }
+    }
+
+    // ── Child task list ────────────────────────────────────────────────────
+    if (isTaskListSchema(resolved, localDefs)) {
+      fields.push({
+        kind: "child-task-list",
+        path: fieldPath,
+        label: deriveLabel(prop, key),
+        ...withDesc(description),
+        required: isRequired,
+      });
+      continue;
+    }
+
+    // ── oneOf / anyOf at property level ────────────────────────────────────
+    const candidates = (resolved.oneOf ?? resolved.anyOf) as unknown[] | undefined;
+    if (Array.isArray(candidates)) {
+      const variants = buildOneOfVariants(candidates, localDefs, fieldPath);
+      if (variants.length > 1) {
+        fields.push({
+          kind: "one-of",
+          path: fieldPath,
+          label: deriveLabel(prop, key),
+          ...withDesc(description),
+          required: isRequired,
+          variants,
+        });
+        continue;
+      } else if (variants.length === 1 && variants[0]) {
+        // When only 1 variant exists (e.g. collapsed string/expression scalar),
+        // unwrap its inner fields directly instead of rendering a 1-option dropdown.
+        const singleVariant = variants[0];
+        for (const childField of singleVariant.fields) {
+          if (childField.path === fieldPath || childField.path === `${fieldPath}.__leaf__`) {
+            fields.push({
+              ...childField,
+              path: fieldPath,
+              label: deriveLabel(prop, key),
+              ...withDesc(description),
+              required: isRequired,
+            });
+          } else {
+            fields.push(childField);
+          }
+        }
+        continue;
+      }
+    }
+
+    // ── Open-ended key-value map (additionalProperties, no fixed properties) ─
+    if (isMapSchema(resolved)) {
+      fields.push({
+        kind: "map",
+        path: fieldPath,
+        label: deriveLabel(prop, key),
+        ...withDesc(description),
+        required: isRequired,
+      });
+      continue;
+    }
+
+    // ── Object with known sub-properties ───────────────────────────────────
+    if (resolved.type === "object" && resolved.properties) {
+      const childRequired = new Set<string>(
+        Array.isArray(resolved.required) ? (resolved.required as string[]) : [],
+      );
+      const children = schemaToFormFields(
+        resolved as DereferencedSchema,
+        localDefs,
+        childRequired,
+        fieldPath,
+      );
+      fields.push({
+        kind: "object",
+        path: fieldPath,
+        label: deriveLabel(prop, key),
+        ...withDesc(description),
+        required: isRequired,
+        children,
+      });
+      continue;
+    }
+
+    // ── Boolean ────────────────────────────────────────────────────────────
+    if (resolved.type === "boolean") {
+      fields.push({
+        kind: "boolean",
+        path: fieldPath,
+        label: deriveLabel(prop, key),
+        ...withDesc(description),
+        required: isRequired,
+      });
+      continue;
+    }
+
+    // ── Enum (string with enum array) ──────────────────────────────────────
+    if (resolved.type === "string" && Array.isArray(resolved.enum)) {
+      fields.push({
+        kind: "enum",
+        path: fieldPath,
+        label: deriveLabel(prop, key),
+        ...withDesc(description),
+        required: isRequired,
+        options: resolved.enum as string[],
+      });
+      continue;
+    }
+
+    // ── Duration (string whose pattern describes an ISO 8601 duration) ─────
+    if (
+      resolved.type === "string" &&
+      typeof resolved.pattern === "string" &&
+      resolved.pattern.startsWith("^P")
+    ) {
+      fields.push({
+        kind: "duration",
+        path: fieldPath,
+        label: deriveLabel(prop, key),
+        ...withDesc(description),
+        required: isRequired,
+      });
+      continue;
+    }
+
+    // ── Number / integer ───────────────────────────────────────────────────
+    if (resolved.type === "number" || resolved.type === "integer") {
+      fields.push({
+        kind: "number",
+        path: fieldPath,
+        label: deriveLabel(prop, key),
+        ...withDesc(description),
+        required: isRequired,
+      });
+      continue;
+    }
+
+    // ── String ─────────────────────────────────────────────────────────────
+    if (resolved.type === "string") {
+      const isRe = RUNTIME_EXPRESSION_PATTERN.test(String(resolved.pattern ?? ""));
+      // Multi-line heuristic: keys that conventionally hold large text blocks
+      const multiline = key === "command" || key === "code" || key === "script";
+      fields.push({
+        kind: "string",
+        path: fieldPath,
+        label: deriveLabel(prop, key),
+        ...withDesc(description),
+        required: isRequired,
+        multiline,
+        isRuntimeExpression: isRe,
+      });
+      continue;
+    }
+
+    // ── Fallback: treat as free-form string ────────────────────────────────
+    // Multi-line heuristic also applies here for untyped properties (e.g.
+    // SchemaInline.document has no explicit type in the schema).
+    const fallbackMultiline = key === "document";
+    fields.push({
+      kind: "string",
+      path: fieldPath,
+      label: deriveLabel(prop, key),
+      ...withDesc(description),
+      required: isRequired,
+      multiline: fallbackMultiline,
+      isRuntimeExpression: false,
+    });
+  }
+
+  return fields;
+}
+
+// ---------------------------------------------------------------------------
+// Discriminator helpers
+// ---------------------------------------------------------------------------
+
+/**
+ * Builds a `matchesData` predicate for a resolved schema variant.
+ *
+ * Strategy (in order):
+ * 1. Property with `const` value → data must have that property equal to the
+ *    const (e.g. `call: { const: "http" }`).
+ * 2. Single unique required property → data must have that key present.
+ * 3. Scalar type → check `typeof data`.
+ * 4. Object type (no const discriminator) → data must be a non-array object.
+ * 5. Fallback → always returns false (last variant wins at the call site).
+ */
+function buildDiscriminator(
+  resolved: Record<string, unknown>,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  _defs: Record<string, unknown> | undefined,
+): (data: unknown) => boolean {
+  const properties = resolved.properties as Record<string, unknown> | undefined;
+
+  // Strategy 1: property with `const`
+  if (properties) {
+    for (const [key, propSchema] of Object.entries(properties)) {
+      if (isPlainObject(propSchema)) {
+        const constVal = (propSchema as Record<string, unknown>).const;
+        if (constVal !== undefined) {
+          return (data: unknown) =>
+            isPlainObject(data) && (data as Record<string, unknown>)[key] === constVal;
+        }
+      }
+    }
+  }
+
+  // Strategy 2: single unique required property key
+  if (properties) {
+    const ownKeys = Object.keys(properties);
+    const required = Array.isArray(resolved.required) ? (resolved.required as string[]) : [];
+    if (ownKeys.length === 1 && required.includes(ownKeys[0]!)) {
+      const uniqueKey = ownKeys[0]!;
+      return (data: unknown) =>
+        isPlainObject(data) && (data as Record<string, unknown>)[uniqueKey] !== undefined;
+    }
+  }
+
+  // Strategy 3: scalar type
+  if (resolved.type === "string" || Array.isArray(resolved.anyOf)) {
+    return (data: unknown) => typeof data === "string";
+  }
+  if (resolved.type === "number" || resolved.type === "integer") {
+    return (data: unknown) => typeof data === "number";
+  }
+  if (resolved.type === "boolean") {
+    return (data: unknown) => typeof data === "boolean";
+  }
+
+  // Strategy 4: object type
+  if (resolved.type === "object" || properties) {
+    return (data: unknown) => isPlainObject(data) && !Array.isArray(data);
+  }
+
+  // Fallback
+  return () => false;
+}
+
+// ---------------------------------------------------------------------------
+
+/** Intermediate representation for a resolved oneOf/anyOf candidate before collapsing. */
+type ResolvedVariant = {
+  kind: "string" | "number" | "boolean" | "enum" | "map" | "object";
+  label: string;
+  matchesData: (data: unknown) => boolean;
+  fields: FormFieldDescriptor[];
+  resolved: Record<string, unknown>;
+  c: Record<string, unknown>;
+};
+
+function buildOneOfVariants(
+  candidates: unknown[],
+  defs: Record<string, unknown> | undefined,
+  parentPath: string,
+): OneOfVariant[] {
+  // First pass: resolve candidate refs and build raw variant list
+  const resolvedList = candidates.flatMap((candidate, idx): ResolvedVariant[] => {
+    if (!isPlainObject(candidate)) return [];
+    const c = candidate as Record<string, unknown>;
+
+    let resolved: Record<string, unknown> = c;
+    if (typeof c.$ref === "string") {
+      const ref = resolveRef(c.$ref, defs);
+      if (ref) resolved = { ...ref, ...c, $ref: undefined };
+    }
+
+    const titleCandidate =
+      typeof c.title === "string"
+        ? c.title
+        : typeof resolved.title === "string"
+          ? resolved.title
+          : typeof resolved.type === "string"
+            ? resolved.type
+            : undefined;
+
+    const rawLabel = titleCandidate ? formatVariantLabel(titleCandidate) : `Option ${idx + 1}`;
+    const matchesData = buildDiscriminator(resolved, defs);
+
+    // Variants with no fixed properties and no nested oneOf are either maps or scalars.
+    if (!resolved.properties && !Array.isArray(resolved.oneOf)) {
+      // ── Key-value map variant ────────────────────────────────────────────
+      if (isMapSchema(resolved)) {
+        const GENERIC_TYPE_LABELS = new Set([
+          "string",
+          "object",
+          "number",
+          "integer",
+          "boolean",
+          "array",
+        ]);
+        const isGenericTypeLabel = GENERIC_TYPE_LABELS.has(titleCandidate ?? "");
+        const label =
+          titleCandidate && !isGenericTypeLabel ? formatVariantLabel(titleCandidate) : "key-value";
+        const mapField: MapField = {
+          kind: "map",
+          path: parentPath || "__leaf__",
+          label,
+          required: false,
+        };
+        return [{ kind: "map" as const, label, matchesData, fields: [mapField], resolved, c }];
+      }
+
+      // ── Pure scalar variants ─────────────────────────────────────────────
+      const leafPath = parentPath || "__leaf__";
+      let leafField: FormFieldDescriptor;
+
+      if (resolved.type === "string" && Array.isArray(resolved.enum)) {
+        leafField = {
+          kind: "enum",
+          path: leafPath,
+          label: rawLabel,
+          required: false,
+          options: resolved.enum as string[],
+        };
+        return [
+          { kind: "enum" as const, label: rawLabel, matchesData, fields: [leafField], resolved, c },
+        ];
+      } else if (resolved.type === "number" || resolved.type === "integer") {
+        leafField = { kind: "number", path: leafPath, label: rawLabel, required: false };
+        return [
+          {
+            kind: "number" as const,
+            label: rawLabel,
+            matchesData,
+            fields: [leafField],
+            resolved,
+            c,
+          },
+        ];
+      } else if (resolved.type === "boolean") {
+        leafField = { kind: "boolean", path: leafPath, label: rawLabel, required: false };
+        return [
+          {
+            kind: "boolean" as const,
+            label: rawLabel,
+            matchesData,
+            fields: [leafField],
+            resolved,
+            c,
+          },
+        ];
+      } else {
+        // plain string (or uriTemplate anyOf or runtimeExpression)
+        const isUriOrTemplate =
+          (typeof c.$ref === "string" && c.$ref.includes("uriTemplate")) ||
+          resolved.title === "UriTemplate" ||
+          parentPath.toLowerCase().endsWith("endpoint") ||
+          parentPath.toLowerCase().endsWith("uri");
+        const isRe = RUNTIME_EXPRESSION_PATTERN.test(String(resolved.pattern ?? ""));
+        const placeholder = isUriOrTemplate
+          ? "https://example.com/api/{id}"
+          : isRe
+            ? "${...}"
+            : undefined;
+
+        leafField = {
+          kind: "string",
+          path: leafPath,
+          label: rawLabel,
+          required: false,
+          multiline: false,
+          isRuntimeExpression: isRe,
+          ...(placeholder ? { placeholder } : {}),
+        };
+        return [
+          {
+            kind: "string" as const,
+            label: rawLabel,
+            matchesData,
+            fields: [leafField],
+            resolved,
+            c,
+          },
+        ];
+      }
+    }
+
+    const req = new Set<string>(
+      Array.isArray(resolved.required) ? (resolved.required as string[]) : [],
+    );
+    const children = schemaToFormFields(resolved as DereferencedSchema, defs, req, parentPath);
+
+    return [
+      { kind: "object" as const, label: rawLabel, matchesData, fields: children, resolved, c },
+    ];
+  });
+
+  // Second pass: collapse consecutive plain string variants (e.g. RuntimeExpression + UriTemplate)
+  // into a single "URI" or "string" variant with URI template placeholder support.
+  const collapsed: OneOfVariant[] = [];
+  let mergedStringVariant: {
+    label: string;
+    fields: FormFieldDescriptor[];
+    matchPredicates: ((data: unknown) => boolean)[];
+  } | null = null;
+
+  for (const item of resolvedList) {
+    if (item.kind === "string") {
+      const isUriContext =
+        parentPath.toLowerCase().endsWith("endpoint") ||
+        parentPath.toLowerCase().endsWith("uri") ||
+        (typeof item.c.$ref === "string" && item.c.$ref.includes("uriTemplate")) ||
+        item.resolved.title === "UriTemplate";
+
+      const preferredLabel = isUriContext
+        ? "URI"
+        : item.label === "Option 1" || item.label === "Option 2"
+          ? "string"
+          : item.label;
+
+      if (!mergedStringVariant) {
+        const stringField: StringField = {
+          kind: "string",
+          path: parentPath || "__leaf__",
+          label: preferredLabel,
+          required: false,
+          multiline: false,
+          isRuntimeExpression: false,
+          ...(isUriContext ? { placeholder: "https://example.com/api/{id}" } : {}),
+        };
+        mergedStringVariant = {
+          label: preferredLabel,
+          fields: [stringField],
+          matchPredicates: [item.matchesData],
+        };
+      } else {
+        mergedStringVariant.matchPredicates.push(item.matchesData);
+        if (isUriContext) {
+          mergedStringVariant.label = "URI";
+          (mergedStringVariant.fields[0] as StringField).placeholder =
+            "https://example.com/api/{id}";
+        }
+      }
+    } else {
+      if (mergedStringVariant) {
+        const preds = [...mergedStringVariant.matchPredicates];
+        collapsed.push({
+          label: mergedStringVariant.label,
+          fields: mergedStringVariant.fields,
+          matchesData: (data: unknown) => typeof data === "string" || preds.some((p) => p(data)),
+        });
+        mergedStringVariant = null;
+      }
+      collapsed.push({
+        label: item.label,
+        fields: item.fields,
+        matchesData: item.matchesData,
+      });
+    }
+  }
+
+  if (mergedStringVariant) {
+    const preds = [...mergedStringVariant.matchPredicates];
+    collapsed.push({
+      label: mergedStringVariant.label,
+      fields: mergedStringVariant.fields,
+      matchesData: (data: unknown) => typeof data === "string" || preds.some((p) => p(data)),
+    });
+  }
+
+  return collapsed;
+}
diff --git a/packages/open-workflow-diagram-editor/src/side-panel/forms/taskFormContext.ts b/packages/open-workflow-diagram-editor/src/side-panel/forms/taskFormContext.ts
new file mode 100644
index 00000000..253520cb
--- /dev/null
+++ b/packages/open-workflow-diagram-editor/src/side-panel/forms/taskFormContext.ts
@@ -0,0 +1,128 @@
+/*
+ * Copyright 2021-Present The Open Workflow Specification Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import * as React from "react";
+import type { FormFieldDescriptor } from "./schemaToFormFields";
+
+// ---------------------------------------------------------------------------
+// TaskFormContext
+// ---------------------------------------------------------------------------
+
+export type TaskFormContextType = {
+  isReadOnly: boolean;
+  siblingTaskNames: string[];
+  /**
+   * Raw task data — always present (both read-only and edit modes).
+   * Used for variant auto-selection (discrimination) in both modes, and
+   * additionally for field-visibility filtering in read-only mode.
+   */
+  taskData: Record<string, unknown>;
+};
+
+export const TaskFormContext = React.createContext<TaskFormContextType>({
+  isReadOnly: false,
+  siblingTaskNames: [],
+  taskData: {},
+});
+
+export function useTaskFormContext(): TaskFormContextType {
+  return React.useContext(TaskFormContext);
+}
+
+// ---------------------------------------------------------------------------
+// Read-only field filtering
+// ---------------------------------------------------------------------------
+
+/**
+ * Walks an arbitrary nested object along a dot-notation path.
+ * Returns `undefined` if any segment is missing.
+ */
+export function getNestedValue(data: Record<string, unknown>, path: string): unknown {
+  const parts = path.split(".");
+  let current: unknown = data;
+  for (const part of parts) {
+    if (current === null || current === undefined) return undefined;
+    if (typeof current !== "object" || Array.isArray(current)) return undefined;
+    current = (current as Record<string, unknown>)[part];
+  }
+  return current;
+}
+
+/**
+ * Returns true when the task actually has a meaningful value at `path`:
+ * non-null, non-undefined, and non-empty-string.
+ */
+export function hasValue(task: Record<string, unknown>, path: string): boolean {
+  const v = getNestedValue(task, path);
+  return v !== null && v !== undefined && v !== "";
+}
+
+/**
+ * Returns true when the task object has the given path present as an object
+ * (even if all of its own properties are absent/empty). Used to decide
+ * whether to show an object group or one-of selector in read-only mode.
+ */
+function hasObjectAtPath(task: Record<string, unknown>, path: string): boolean {
+  const v = getNestedValue(task, path);
+  return v !== null && v !== undefined && typeof v === "object" && !Array.isArray(v);
+}
+
+/**
+ * Recursively filters a field list for read-only display.
+ *
+ * Rules:
+ * - Object groups: hidden if the parent key is absent from task data; collapsed
+ *   if present but all children have no values.
+ * - one-of fields: hidden unless the task has a value at the field's path.
+ *   The `__root__` one-of (top-level task variant) is always shown.
+ * - Scalar fields (string/number/boolean/enum/…): hidden unless the task has a
+ *   non-null, non-empty value at the field's path. This applies even to
+ *   required fields — a required field inside an absent optional structure
+ *   must not appear.
+ */
+export function filterReadOnlyFields(
+  fields: FormFieldDescriptor[],
+  task: Record<string, unknown>,
+): FormFieldDescriptor[] {
+  return fields.flatMap((field): FormFieldDescriptor[] => {
+    if (field.kind === "object") {
+      // Never show the object group if the parent key doesn't exist in the task data.
+      if (!hasObjectAtPath(task, field.path)) return [];
+      const children = filterReadOnlyFields(field.children, task);
+      if (children.length === 0) return [];
+      return [{ ...field, children }];
+    }
+
+    if (field.kind === "one-of") {
+      // Root-level one-of (path="__root__") represents the whole task variant — always show
+      if (field.path === "__root__") return [field];
+      // Property-level one-of: show only if the task has a value at that path
+      if (hasValue(task, field.path)) return [field];
+      return [];
+    }
+
+    if (field.kind === "map") {
+      // Show the map group only when the task contains a non-empty object at this path.
+      return hasObjectAtPath(task, field.path) ? [field] : [];
+    }
+
+    // For scalar fields: only show when the task actually has a value at the path.
+    // This intentionally suppresses required fields whose parent object doesn't exist —
+    // a required field inside an optional structure should not appear when that
+    // structure is absent from the task data.
+    return hasValue(task, field.path) ? [field] : [];
+  });
+}
diff --git a/packages/open-workflow-diagram-editor/src/side-panel/forms/useSiblingTaskNames.ts b/packages/open-workflow-diagram-editor/src/side-panel/forms/useSiblingTaskNames.ts
new file mode 100644
index 00000000..444071f3
--- /dev/null
+++ b/packages/open-workflow-diagram-editor/src/side-panel/forms/useSiblingTaskNames.ts
@@ -0,0 +1,111 @@
+/*
+ * Copyright 2021-Present The Open Workflow Specification Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import * as React from "react";
+import type { Specification } from "@openworkflowspec/sdk";
+
+/**
+ * Returns the names of every task that shares the same parent task list as the
+ * currently selected task.
+ *
+ * **Path format**
+ *
+ * `nodeId` is the non-indexed structural path that mirrors the workflow model
+ * hierarchy, e.g. `/do/consumeReading` or `/do/logReading/do/callOrderService`.
+ *
+ * Segments alternate strictly as `<listProp>/<taskName>` pairs:
+ *
+ * ```
+ * /do/logReading/do/callOrderService
+ *  ^   ^          ^   ^
+ *  list task-name list task-name
+ * ```
+ *
+ * To reach the parent list, walk every pair except the last, following
+ * `model[listProp][taskName]` at each step. The final `<listProp>` names the
+ * array whose entries are the siblings.
+ *
+ * Note: spec-defined flow-directive values (`continue`, `exit`, `end`) are
+ * **not** returned here — they are spec constants, not model tasks. The
+ * `ThenControl` renders them as a separate option group.
+ *
+ * @param model  - The current workflow model (may be null).
+ * @param nodeId - The non-indexed node id of the currently selected task.
+ * @returns Names of sibling tasks in the same task list, excluding the current task.
+ */
+export function useSiblingTaskNames(
+  model: Specification.Workflow | null,
+  nodeId: string | undefined,
+): string[] {
+  return React.useMemo(() => {
+    if (!model || !nodeId) return [];
+
+    const segments = nodeId.split("/").filter(Boolean);
+    // Each depth level is a <listProp>/<taskName> pair — need at least one pair.
+    if (segments.length < 2 || segments.length % 2 !== 0) return [];
+
+    // Walk every pair except the last to reach the object that owns the parent list.
+    // At each step: current[listProp] is a task array; find the entry keyed by taskName
+    // and descend into its value (the task body).
+    let current: unknown = model;
+    for (let i = 0; i < segments.length - 2; i += 2) {
+      const listProp = segments[i]!;
+      const taskName = segments[i + 1]!;
+
+      if (
+        current === null ||
+        current === undefined ||
+        typeof current !== "object" ||
+        Array.isArray(current)
+      ) {
+        return [];
+      }
+
+      const list = (current as Record<string, unknown>)[listProp];
+      if (!Array.isArray(list)) return [];
+
+      // Find the entry { [taskName]: taskBody } and descend into taskBody
+      const entry = (list as Array<Record<string, unknown>>).find((e) => taskName in e);
+      if (!entry) return [];
+      current = entry[taskName];
+    }
+
+    // current is now the object that owns the final list (the model root or a task body)
+    if (
+      current === null ||
+      current === undefined ||
+      typeof current !== "object" ||
+      Array.isArray(current)
+    ) {
+      return [];
+    }
+
+    const listProp = segments[segments.length - 2]!;
+    const currentTaskName = segments[segments.length - 1]!;
+
+    const list = (current as Record<string, unknown>)[listProp];
+    if (!Array.isArray(list)) return [];
+
+    const siblings: string[] = [];
+    for (const entry of list as Array<Record<string, unknown>>) {
+      if (typeof entry !== "object" || entry === null || Array.isArray(entry)) continue;
+      const name = Object.keys(entry)[0];
+      if (name && name !== currentTaskName) siblings.push(name);
+    }
+
+    return siblings;
+  }, [model, nodeId]);
+}
diff --git a/packages/open-workflow-diagram-editor/src/side-panel/ReadOnlyProperties.tsx b/packages/open-workflow-diagram-editor/src/side-panel/forms/validation/index.ts
similarity index 62%
rename from packages/open-workflow-diagram-editor/src/side-panel/ReadOnlyProperties.tsx
rename to packages/open-workflow-diagram-editor/src/side-panel/forms/validation/index.ts
index e4d21417..c0d173cd 100644
--- a/packages/open-workflow-diagram-editor/src/side-panel/ReadOnlyProperties.tsx
+++ b/packages/open-workflow-diagram-editor/src/side-panel/forms/validation/index.ts
@@ -14,18 +14,4 @@
  * limitations under the License.
  */
 
-import type { DetailField } from "@/core/taskDetails";
-import { PropertyField } from "./Fields";
-
-/**
- * Static presentation of a task's flattened properties.
- */
-export function ReadOnlyProperties({ fields }: { fields: DetailField[] }) {
-  return (
-    <dl>
-      {fields.map((field) => (
-        <PropertyField key={field.label} field={field} />
-      ))}
-    </dl>
-  );
-}
+export { useWorkflowErrorsForForm } from "./useWorkflowErrorsForForm";
diff --git a/packages/open-workflow-diagram-editor/src/side-panel/forms/validation/useWorkflowErrorsForForm.ts b/packages/open-workflow-diagram-editor/src/side-panel/forms/validation/useWorkflowErrorsForForm.ts
new file mode 100644
index 00000000..5d6d308a
--- /dev/null
+++ b/packages/open-workflow-diagram-editor/src/side-panel/forms/validation/useWorkflowErrorsForForm.ts
@@ -0,0 +1,67 @@
+/*
+ * Copyright 2021-Present The Open Workflow Specification Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import * as React from "react";
+import type { UseFormSetError } from "react-hook-form";
+import { getNodeErrors, getNodeErrorField } from "@/core";
+import type { SdkError } from "@/core";
+
+/**
+ * On first render (and whenever the selected task changes), maps existing
+ * workflow-level SDK validation errors for the selected task into
+ * react-hook-form field errors so that fields are highlighted immediately
+ * without the user having to touch them.
+ *
+ * Only errors that resolve to a known dot-notation field path are set on the
+ * form. Errors without a resolvable field are left to the `ErrorSection`
+ * above the form (which already renders them as plain text).
+ *
+ * @param errors         - Current SDK errors for the whole workflow.
+ * @param taskReference  - RFC 6901-style indexed path for the selected task
+ *                         (e.g. `/do/0/step1`).  May be `undefined` for
+ *                         layout-only nodes that have no task.
+ * @param taskReferences - Full set of known task references used by
+ *                         `getNodeErrors` to attribute ownership.
+ * @param setError       - `setError` from `react-hook-form`'s `useForm`.
+ * @param resetKey       - Opaque key that changes whenever the selected task
+ *                         changes (typically the non-indexed node id).  The
+ *                         effect re-runs whenever this value changes so errors
+ *                         are refreshed for the new task.
+ */
+export function useWorkflowErrorsForForm(
+  errors: SdkError[],
+  taskReference: string | undefined,
+  taskReferences: Set<string>,
+  setError: UseFormSetError<Record<string, unknown>>,
+  resetKey: string | undefined,
+): void {
+  React.useEffect(() => {
+    if (!taskReference) return;
+
+    const nodeErrors = getNodeErrors(errors, taskReference, taskReferences);
+
+    for (const error of nodeErrors) {
+      const field = getNodeErrorField(error, taskReference);
+      if (field === undefined) continue;
+
+      setError(field, { type: "workflow", message: error.message });
+    }
+    // resetKey changes when the selected task changes — re-run for the new task.
+    // setError is stable (from react-hook-form) and intentionally excluded.
+    // errors/taskReferences/taskReference are content-stable within a render cycle.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [resetKey, errors, taskReference]);
+}
diff --git a/packages/open-workflow-diagram-editor/tests/core/taskDetails.test.ts b/packages/open-workflow-diagram-editor/tests/core/taskDetails.test.ts
deleted file mode 100644
index b5fb2175..00000000
--- a/packages/open-workflow-diagram-editor/tests/core/taskDetails.test.ts
+++ /dev/null
@@ -1,353 +0,0 @@
-/*
- * Copyright 2021-Present The Open Workflow Specification Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import type { Specification } from "@openworkflowspec/sdk";
-import { describe, expect, it } from "vitest";
-import { getTaskDetails } from "../../src/core";
-
-const asTask = (obj: unknown) => obj as Specification.Task;
-
-describe("getTaskDetails", () => {
-  it("flattens a HTTP call task into dot-notation text fields", () => {
-    const fields = getTaskDetails(
-      asTask({
-        call: "http",
-        with: { method: "GET", url: "http://example.com" },
-      }),
-    );
-
-    expect(fields).toEqual([
-      { label: "call", segments: ["call"], kind: "scalar", value: "http" },
-      { label: "with.method", segments: ["with", "method"], kind: "scalar", value: "GET" },
-      { label: "with.url", segments: ["with", "url"], kind: "scalar", value: "http://example.com" },
-    ]);
-  });
-
-  it("orders task specific fields before base fields (if/then)", () => {
-    const fields = getTaskDetails(
-      // eslint-disable-next-line unicorn/no-thenable -- 'then' is a real SWF directive
-      asTask({ if: "${ .ok }", set: { foo: "bar" }, then: "continue" }),
-    );
-
-    expect(fields).toEqual([
-      { label: "set.foo", segments: ["set", "foo"], kind: "scalar", value: "bar" },
-      { label: "if", segments: ["if"], kind: "scalar", value: "${ .ok }" },
-      { label: "then", segments: ["then"], kind: "scalar", value: "continue" },
-    ]);
-  });
-
-  it("extracts base fields (input/output/export/timeout) from their nested keys", () => {
-    const fields = getTaskDetails(
-      asTask({
-        input: { from: "${ .input }" },
-        output: { as: "${ .output }" },
-        export: { as: "${ .export }" },
-        timeout: { after: "${ .timeout }" },
-        set: { x: 1 },
-      }),
-    );
-
-    expect(fields).toEqual([
-      { label: "set.x", segments: ["set", "x"], kind: "scalar", value: 1 },
-      { label: "input.from", segments: ["input", "from"], kind: "scalar", value: "${ .input }" },
-      { label: "output.as", segments: ["output", "as"], kind: "scalar", value: "${ .output }" },
-      { label: "export.as", segments: ["export", "as"], kind: "scalar", value: "${ .export }" },
-      {
-        label: "timeout.after",
-        segments: ["timeout", "after"],
-        kind: "scalar",
-        value: "${ .timeout }",
-      },
-    ]);
-  });
-
-  it("flattens a timeout duration into dot-notation rows for object timeout 'after'", () => {
-    const fields = getTaskDetails(
-      asTask({
-        timeout: { after: { minutes: 5, seconds: 30 } },
-      }),
-    );
-
-    expect(fields).toEqual([
-      {
-        label: "timeout.after.minutes",
-        segments: ["timeout", "after", "minutes"],
-        kind: "scalar",
-        value: 5,
-      },
-      {
-        label: "timeout.after.seconds",
-        segments: ["timeout", "after", "seconds"],
-        kind: "scalar",
-        value: 30,
-      },
-    ]);
-  });
-
-  it("returns string timeout reference", () => {
-    const fields = getTaskDetails(
-      asTask({
-        timeout: "MyTimeout",
-      }),
-    );
-
-    expect(fields).toEqual([
-      { label: "timeout", segments: ["timeout"], kind: "scalar", value: "MyTimeout" },
-    ]);
-  });
-
-  it.each([{ length: 0 }, { length: 1 }, { length: 2 }])(
-    "returns an array of $length element(s) as a count",
-    ({ length }) => {
-      const items = Array.from({ length }, (_, i) => ({
-        [`case${i}`]: { when: "x" },
-      }));
-      const fields = getTaskDetails(asTask({ switch: items }));
-
-      expect(fields).toEqual([
-        { label: "switch", segments: ["switch"], kind: "array", count: length },
-      ]);
-    },
-  );
-
-  it("summarises objects deeper than the max depth with a bare path", () => {
-    const fields = getTaskDetails(
-      asTask({
-        with: {
-          a: {
-            b: {
-              client: {
-                name: "foo",
-                config: {
-                  c: 1,
-                },
-              },
-            },
-          },
-        },
-      }),
-    );
-
-    expect(fields).toEqual([
-      {
-        label: "with.a.b.client.name",
-        segments: ["with", "a", "b", "client", "name"],
-        kind: "scalar",
-        value: "foo",
-      },
-      {
-        label: "with.a.b.client.config",
-        segments: ["with", "a", "b", "client", "config"],
-        kind: "object",
-      },
-    ]);
-  });
-
-  it("excludes metadata from the fields", () => {
-    const fields = getTaskDetails(
-      asTask({
-        set: { x: 1 },
-        metadata: { author: "foo" },
-      }),
-    );
-
-    expect(fields).toEqual([{ label: "set.x", segments: ["set", "x"], kind: "scalar", value: 1 }]);
-  });
-
-  it("returns no fields for a task with no displayable fields", () => {
-    expect(getTaskDetails(asTask({}))).toEqual([]);
-  });
-
-  it("ignores null and undefined values", () => {
-    const fields = getTaskDetails(
-      asTask({
-        set: {
-          a: null,
-          b: undefined,
-          c: "value",
-        },
-      }),
-    );
-
-    expect(fields).toEqual([
-      { label: "set.c", segments: ["set", "c"], kind: "scalar", value: "value" },
-    ]);
-  });
-
-  it("converts boolean values to text", () => {
-    const fields = getTaskDetails(
-      asTask({
-        set: {
-          enabled: true,
-          disabled: false,
-        },
-      }),
-    );
-
-    expect(fields).toEqual([
-      { label: "set.enabled", segments: ["set", "enabled"], kind: "scalar", value: true },
-      { label: "set.disabled", segments: ["set", "disabled"], kind: "scalar", value: false },
-    ]);
-  });
-
-  it("ignores empty objects", () => {
-    const fields = getTaskDetails(
-      asTask({
-        set: {},
-      }),
-    );
-
-    expect(fields).toEqual([]);
-  });
-
-  it("ignores nested empty objects", () => {
-    const fields = getTaskDetails(
-      asTask({
-        set: {
-          foo: {},
-        },
-      }),
-    );
-
-    expect(fields).toEqual([]);
-  });
-
-  it("ignores input, output and export when they are not objects", () => {
-    const fields = getTaskDetails(
-      asTask({
-        input: "invalid",
-        output: 123,
-        export: true,
-      }),
-    );
-
-    expect(fields).toEqual([]);
-  });
-
-  it("ignores timeout object without an after property", () => {
-    const fields = getTaskDetails(
-      asTask({
-        timeout: {},
-      }),
-    );
-
-    expect(fields).toEqual([]);
-  });
-
-  it("ignores timeout object when after is undefined", () => {
-    const fields = getTaskDetails(
-      asTask({
-        timeout: {
-          after: undefined,
-        },
-      }),
-    );
-
-    expect(fields).toEqual([]);
-  });
-
-  it("supports primitive task-specific values", () => {
-    const fields = getTaskDetails(
-      asTask({
-        call: 123,
-      }),
-    );
-
-    expect(fields).toEqual([{ label: "call", segments: ["call"], kind: "scalar", value: 123 }]);
-  });
-
-  it("flattens fields exactly at the maximum supported depth", () => {
-    const fields = getTaskDetails(
-      asTask({
-        with: {
-          a: {
-            b: {
-              c: {
-                value: "foo",
-              },
-            },
-          },
-        },
-      }),
-    );
-
-    expect(fields).toEqual([
-      {
-        label: "with.a.b.c.value",
-        segments: ["with", "a", "b", "c", "value"],
-        kind: "scalar",
-        value: "foo",
-      },
-    ]);
-  });
-
-  it("returns base fields in the expected order", () => {
-    const fields = getTaskDetails(
-      asTask({
-        if: "${ .condition }",
-        input: { from: "${ .input }" },
-        output: { as: "${ .output }" },
-        export: { as: "${ .export }" },
-        timeout: "PT5M",
-        // eslint-disable-next-line unicorn/no-thenable -- then is an Open Workflow Spec field
-        then: "next",
-      }),
-    );
-
-    expect(fields).toEqual([
-      { label: "if", segments: ["if"], kind: "scalar", value: "${ .condition }" },
-      { label: "input.from", segments: ["input", "from"], kind: "scalar", value: "${ .input }" },
-      { label: "output.as", segments: ["output", "as"], kind: "scalar", value: "${ .output }" },
-      { label: "export.as", segments: ["export", "as"], kind: "scalar", value: "${ .export }" },
-      { label: "timeout", segments: ["timeout"], kind: "scalar", value: "PT5M" },
-      { label: "then", segments: ["then"], kind: "scalar", value: "next" },
-    ]);
-  });
-
-  it("returns no fields when only metadata is present", () => {
-    const fields = getTaskDetails(
-      asTask({
-        metadata: {
-          author: "john",
-        },
-      }),
-    );
-
-    expect(fields).toEqual([]);
-  });
-});
-
-describe("DetailField.segments", () => {
-  it("carries the unflattened key path alongside the display label", () => {
-    const fields = getTaskDetails(asTask({ call: "http", with: { method: "GET" } }));
-
-    expect(fields).toEqual([
-      { label: "call", segments: ["call"], kind: "scalar", value: "http" },
-      { label: "with.method", segments: ["with", "method"], kind: "scalar", value: "GET" },
-    ]);
-  });
-
-  /* `set` is an arbitrary-key map: the key is user text, not a schema property. A key that
-     itself contains a dot joins to a label indistinguishable from real nesting, so the
-     segments — not the label — are the source of truth for the real document shape. */
-  it("keeps a dotted arbitrary map key as a single segment", () => {
-    const fields = getTaskDetails(asTask({ set: { "user.name": "ada" } }));
-
-    expect(fields).toEqual([
-      { label: "set.user.name", segments: ["set", "user.name"], kind: "scalar", value: "ada" },
-    ]);
-  });
-});
diff --git a/packages/open-workflow-diagram-editor/tests/core/taskDraft.test.ts b/packages/open-workflow-diagram-editor/tests/core/taskDraft.test.ts
index 67ee0fd9..fbdcf2a6 100644
--- a/packages/open-workflow-diagram-editor/tests/core/taskDraft.test.ts
+++ b/packages/open-workflow-diagram-editor/tests/core/taskDraft.test.ts
@@ -15,111 +15,110 @@
  */
 
 import { describe, expect, it } from "vitest";
-import type { Specification } from "@openworkflowspec/sdk";
-import { applyFieldValues, fieldName, parseFieldName } from "../../src/core/taskDraft";
-
-const asTask = (value: Record<string, unknown>): Specification.Task =>
-  value as unknown as Specification.Task;
-
-describe("fieldName", () => {
-  it("joins segments with a slash", () => {
-    expect(fieldName(["with", "endpoint"])).toBe("with/endpoint");
-  });
-
-  /* react-hook-form reads `.` and `[` as path syntax, so a user-authored key
-     containing one must never reach it unescaped. */
-  it.each([
-    ["a dot", ["set", "user.name"], "set/user%2Ename"],
-    ["a slash", ["with", "headers", "text/plain"], "with/headers/text%2Fplain"],
-    ["a bracket", ["metadata", "a[0]"], "metadata/a%5B0%5D"],
-    ["a percent", ["metadata", "100%"], "metadata/100%25"],
-  ])("escapes %s", (_label, segments, expected) => {
-    expect(fieldName(segments)).toBe(expected);
-  });
-
-  it.each([
-    ["plain", ["with", "endpoint"]],
-    ["dots", ["set", "user.name"]],
-    ["slashes", ["with", "headers", "text/plain"]],
-    ["brackets", ["metadata", "a[0]"]],
-    ["percents", ["metadata", "100%"]],
-    ["an escape sequence written literally", ["metadata", "%2E"]],
-  ])("round-trips segments containing %s", (_label, segments) => {
-    expect(parseFieldName(fieldName(segments))).toEqual(segments);
+import { unflattenValues, applyDirtyValues } from "../../src/core/taskDraft";
+
+describe("unflattenValues", () => {
+  it("reconstructs a single-level object", () => {
+    expect(unflattenValues({ call: "http" })).toEqual({ call: "http" });
   });
-});
 
-describe("applyFieldValues", () => {
-  const task = () =>
-    asTask({
-      call: "http",
-      with: {
-        endpoint: "https://api.example.com",
-        method: "GET",
-        headers: { Accept: "application/json" },
-      },
-      metadata: { owner: "payments" },
-      export: { as: "." },
+  it("reconstructs nested dot-notation paths", () => {
+    expect(unflattenValues({ "for.each": "${items}", "for.in": "${data}" })).toEqual({
+      for: { each: "${items}", in: "${data}" },
     });
+  });
 
-  it("writes every change in one pass, at the key path each addresses", () => {
-    const result = applyFieldValues(task(), [
-      { segments: ["call"], value: "openapi" },
-      { segments: ["with", "method"], value: "POST" },
-    ])
+  it("handles deeply nested paths", () => {
+    expect(unflattenValues({ "call.http.endpoint": "https://example.com" })).toEqual({
+      call: { http: { endpoint: "https://example.com" } },
+    });
+  });
 
-    expect(result.call).toBe("openapi");
-    expect((result.with as Record<string, unknown>).method).toBe("POST");
+  it("omits empty-string values", () => {
+    expect(unflattenValues({ call: "http", "with.method": "" })).toEqual({ call: "http" });
   });
 
-  it("creates missing intermediate objects", () => {
-    const result = applyFieldValues(task(), [
-      { segments: ["timeout", "after"], value: "PT30S" },
-    ]) as Record<string, Record<string, unknown>>;
+  it("omits null values", () => {
+    expect(unflattenValues({ call: "http", "with.method": null })).toEqual({ call: "http" });
+  });
 
-    expect(result.timeout!.after).toBe("PT30S");
+  it("omits undefined values", () => {
+    expect(unflattenValues({ call: "http", "with.method": undefined })).toEqual({ call: "http" });
   });
 
-  /* getTaskDetails drops arrays, deep objects and metadata for now — so a
-     task rebuilt from the visible rows alone would silently delete them. */
-  it("preserves fields that no change mentions", () => {
-    const result = applyFieldValues(task(), [
-      { segments: ["with", "method"], value: "POST" },
-    ]) as Record<string, Record<string, unknown>>;
+  it("preserves number and boolean values", () => {
+    expect(unflattenValues({ "with.retries": 3, "with.redirect": false })).toEqual({
+      with: { retries: 3, redirect: false },
+    });
+  });
 
-    expect(result.metadata).toEqual({ owner: "payments" });
-    expect(result.with!.headers).toEqual({ Accept: "application/json" });
-    expect(result.export).toEqual({ as: "." });
+  it("preserves arrays at their path", () => {
+    const items = [{ step1: {} }];
+    expect(unflattenValues({ do: items })).toEqual({ do: items });
   });
 
-  it("does not mutate the source task", () => {
-    const source = task();
+  it("returns an empty object for an empty input", () => {
+    expect(unflattenValues({})).toEqual({});
+  });
+});
 
-    applyFieldValues(source, [{ segments: ["with", "method"], value: "POST" }]);
+describe("applyDirtyValues", () => {
+  const base = { set: { startEvent: "${x}" } };
 
-    expect((source as unknown as Record<string, Record<string, unknown>>).with!.method).toBe("GET");
+  it("returns a clone of the original when nothing is dirty", () => {
+    const allValues = { "set.startEvent": "${x}", "output.schema.document": "" };
+    const result = applyDirtyValues(base, allValues, new Set());
+    expect(result).toEqual(base);
+    // must be a clone, not the same reference
+    expect(result).not.toBe(base);
   });
 
-  /* A port written as "1433" must not come back as the number 1433. */
-  it("writes values at their given type", () => {
-    const result = applyFieldValues(task(), [
-      { segments: ["with", "port"], value: "1433" },
-      { segments: ["with", "retries"], value: 3 },
-      { segments: ["with", "redirect"], value: false },
-    ]) as Record<string, Record<string, unknown>>;
+  it("applies a dirty scalar value onto the clone", () => {
+    const allValues = { "set.startEvent": "${newValue}", "output.schema.document": "" };
+    const result = applyDirtyValues(base, allValues, new Set(["set.startEvent"]));
+    expect(result).toEqual({ set: { startEvent: "${newValue}" } });
+  });
 
-    expect(result.with!.port).toBe("1433");
-    expect(result.with!.retries).toBe(3);
-    expect(result.with!.redirect).toBe(false);
+  it("does not inject optional sections that are untouched", () => {
+    // Even though allValues contains these paths, they are not dirty
+    const allValues = {
+      "set.startEvent": "${x}",
+      "output.as": "",
+      "output.schema.document": "",
+      "input.schema.document": "",
+    };
+    const result = applyDirtyValues(base, allValues, new Set(["set.startEvent"]));
+    expect(result).toEqual({ set: { startEvent: "${x}" } });
+    expect(result).not.toHaveProperty("output");
+    expect(result).not.toHaveProperty("input");
   });
 
-  it("removes the key when the value is undefined", () => {
-    const result = applyFieldValues(task(), [
-      { segments: ["with", "method"], value: undefined },
-    ]) as Record<string, Record<string, unknown>>;
+  it("removes a field when the user clears it (dirty + empty value)", () => {
+    const original = { set: { startEvent: "${x}" }, if: "some-condition" };
+    const allValues = { "set.startEvent": "${x}", if: "" };
+    const result = applyDirtyValues(original, allValues, new Set(["if"]));
+    expect(result).toEqual({ set: { startEvent: "${x}" } });
+  });
 
-    expect("method" in result.with!).toBe(false);
-    expect(result.with!.endpoint).toBe("https://api.example.com");
+  it("removes a nested field and cleans up empty parents", () => {
+    const original = { set: { startEvent: "${x}" }, output: { as: "${.result}" } };
+    const allValues = { "set.startEvent": "${x}", "output.as": "" };
+    const result = applyDirtyValues(original, allValues, new Set(["output.as"]));
+    expect(result).toEqual({ set: { startEvent: "${x}" } });
+    expect(result).not.toHaveProperty("output");
   });
-});
 
+  it("applies a dirty map field (KeyValueMapField leaf path pattern)", () => {
+    // KeyValueMapField registers paths like "set.newKey" directly
+    const allValues = { "set.startEvent": "${x}", "set.newKey": "newVal" };
+    const result = applyDirtyValues(base, allValues, new Set(["set.newKey"]));
+    expect(result).toEqual({ set: { startEvent: "${x}", newKey: "newVal" } });
+  });
+
+  it("does not mutate the original object", () => {
+    const original = { set: { startEvent: "${x}" } };
+    const allValues = { "set.startEvent": "${changed}" };
+    applyDirtyValues(original, allValues, new Set(["set.startEvent"]));
+    expect(original.set.startEvent).toBe("${x}");
+  });
+});
diff --git a/packages/open-workflow-diagram-editor/tests/fixtures/workflows.ts b/packages/open-workflow-diagram-editor/tests/fixtures/workflows.ts
index 79be8002..68740449 100644
--- a/packages/open-workflow-diagram-editor/tests/fixtures/workflows.ts
+++ b/packages/open-workflow-diagram-editor/tests/fixtures/workflows.ts
@@ -526,6 +526,23 @@ export const PARSEABLE_INVALID_WORKFLOW_YAML = `
               while: .vet != null
               do:
   `;
+/**
+ * "Set Example" workflow — mirrors the SetExample Storybook story
+ * (`stories/examples/workflows/set.yaml`).
+ *
+ * Exercises:
+ * - A single `set` task (`initialize`) with a runtime-expression value
+ * - A schedule block (event-driven trigger)
+ * - Sibling-task resolution: `initialize` has no siblings at the top-level `do` list
+ */
+export const SET_EXAMPLE_WORKFLOW = {
+  document: { dsl: "1.0.3", namespace: "test", name: "set", version: "0.1.0" },
+  schedule: {
+    on: { one: { with: { type: "io.serverlessworkflow.samples.events.trigger.v1" } } },
+  },
+  do: [{ initialize: { set: { startEvent: "${ $workflow.input[0] }" } } }],
+};
+
 /**
  * A try/catch task, with a named error variable and a recovery task list.
  *
diff --git a/packages/open-workflow-diagram-editor/tests/side-panel/EditFormFooter.test.tsx b/packages/open-workflow-diagram-editor/tests/side-panel/EditFormFooter.test.tsx
index a16c7454..b56a9b55 100644
--- a/packages/open-workflow-diagram-editor/tests/side-panel/EditFormFooter.test.tsx
+++ b/packages/open-workflow-diagram-editor/tests/side-panel/EditFormFooter.test.tsx
@@ -20,25 +20,29 @@ import userEvent from "@testing-library/user-event";
 import type * as RF from "@xyflow/react";
 import type { Specification } from "@openworkflowspec/sdk";
 import { EditFormFooter } from "../../src/side-panel/EditFormFooter";
-import { EditableProperties } from "../../src/side-panel/EditableProperties";
-import { getTaskDetails } from "../../src/core";
+import { TaskForm } from "../../src/side-panel/forms/TaskForm";
 import type { BaseNodeData } from "../../src/react-flow/nodes/Nodes";
-import { MANAGING_GITHUB_ISSUES_WORKFLOW, TRY_CATCH_TASK } from "../fixtures/workflows";
+import { MANAGING_GITHUB_ISSUES_WORKFLOW } from "../fixtures/workflows";
 import { renderWithProviders } from "../test-utils/render-helpers";
 import { nodeAt, parseFixture } from "../test-utils";
 
+// The call task: /do/evaluateReview/do/closeIssue/do/closeIssueOnGithub
 const NODE_ID = "/do/evaluateReview/do/closeIssue/do/closeIssueOnGithub";
 const model = parseFixture(MANAGING_GITHUB_ISSUES_WORKFLOW);
-
 const node = nodeAt(model, NODE_ID);
-const task = node.data.task!;
 
+/** Renders TaskForm (for field display) + EditFormFooter (for the Apply/Cancel strip). */
 const renderFooter = (overrides = {}) => {
   const commitWorkflow = vi.fn();
 
   renderWithProviders(
     <>
-      <EditableProperties fields={getTaskDetails(task)} nodeId={NODE_ID} />
+      <TaskForm
+        nodeType={node.type!}
+        task={node.data.task!}
+        nodeId={NODE_ID}
+        taskReference={node.data.taskReference}
+      />
       <EditFormFooter node={node} />
     </>,
     { isReadOnly: false, contentFormat: "json", model, commitWorkflow, ...overrides },
@@ -47,90 +51,62 @@ const renderFooter = (overrides = {}) => {
   return { commitWorkflow };
 };
 
-/* The edited task, read back out of the workflow the footer committed. */
+/** Read the task from the workflow the footer committed. */
 const committedTask = (commitWorkflow: ReturnType<typeof vi.fn>) =>
-  nodeAt(commitWorkflow.mock.calls[0]![0] as Specification.Workflow, NODE_ID).data
-    .task as Record<string, unknown>;
-
-const editMethod = async (user: ReturnType<typeof userEvent.setup>, value: string) => {
-  await user.click(screen.getByText("patch"));
-  const input = screen.getByLabelText("with.method");
-  await user.clear(input);
-  await user.type(input, value);
-};
+  nodeAt(commitWorkflow.mock.calls[0]![0] as Specification.Workflow, NODE_ID).data.task as Record<
+    string,
+    unknown
+  >;
 
 describe("EditFormFooter", () => {
-  it("stays hidden before edit mode is entered", () => {
-    renderFooter();
-
-    expect(screen.queryByRole("button", { name: "Apply" })).not.toBeInTheDocument();
-  });
-
-  /* Cancel is the only way out of edit mode until the Edit button lands, so the footer has
-     to be present, and its exit usable, before anything has been changed. */
-  it("appears on entering edit mode, with a way out but nothing to apply", async () => {
-    const user = userEvent.setup();
+  it("is visible immediately with Apply disabled when nothing has been changed", () => {
     renderFooter();
 
-    await user.click(screen.getByText("patch"));
-
-    expect(screen.getByRole("button", { name: "Cancel" })).toBeEnabled();
     expect(screen.getByRole("button", { name: "Apply" })).toBeDisabled();
-    expect(screen.getByText("No changes")).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Cancel" })).toBeInTheDocument();
   });
 
-  it("enables applying, and counts the changed fields, once they change", async () => {
+  it("enables Apply once a field is changed", async () => {
     const user = userEvent.setup();
     renderFooter();
 
-    await editMethod(user, "delete");
+    // method is a free-form string field in the HTTP call schema
+    const methodInput = screen.getByLabelText(/^Method$/i);
+    await user.clear(methodInput);
+    await user.type(methodInput, "delete");
 
     expect(screen.getByRole("button", { name: "Apply" })).toBeEnabled();
-    expect(screen.queryByText("No changes")).not.toBeInTheDocument();
     expect(screen.getByText("1 changed")).toBeInTheDocument();
-
-    const endpoint = screen.getByLabelText("with.endpoint");
-    await user.clear(endpoint);
-    await user.type(endpoint, "https://api.github.com/other");
-
-    expect(screen.getByText("2 changed")).toBeInTheDocument();
   });
 
-  it("stays hidden in read-only mode", async () => {
-    const user = userEvent.setup();
+  it("stays hidden in read-only mode", () => {
     renderFooter({ isReadOnly: true });
 
-    expect(screen.queryByText("patch")).toBeInTheDocument();
-    await user.click(screen.getByText("patch"));
-
     expect(screen.queryByRole("button", { name: "Apply" })).not.toBeInTheDocument();
   });
 
   describe("cancel", () => {
-    /* Interim: Cancel doubles as the way out of edit mode until the Edit
-       button lands. See the note in EditFormFooter. */
-    it("discards the draft, leaves edit mode, and takes the footer with it", async () => {
+    it("discards the draft and disables Apply", async () => {
       const user = userEvent.setup();
       renderFooter();
 
-      await editMethod(user, "delete");
+      const methodInput = screen.getByLabelText(/^Method$/i);
+      await user.clear(methodInput);
+      await user.type(methodInput, "delete");
       await user.click(screen.getByRole("button", { name: "Cancel" }));
 
-      expect(screen.queryByLabelText("with.method")).not.toBeInTheDocument();
-      expect(screen.getByText("patch")).toBeInTheDocument();
-      expect(screen.queryByRole("button", { name: "Apply" })).not.toBeInTheDocument();
+      expect(screen.getByRole("button", { name: "Apply" })).toBeDisabled();
     });
   });
 
-  /* The count slot is the only feedback the footer gives: Apply otherwise just greys its own
-     button out. Each state is asserted by its wording, not its colour. */
   describe("status message", () => {
-    /* Announced rather than shown only, since a keyboard user's focus stays on Apply. */
-    it("confirms the commit, announcing it politely", async () => {
+    it("confirms the commit", async () => {
       const user = userEvent.setup();
       renderFooter();
 
-      await editMethod(user, "delete");
+      const methodInput = screen.getByLabelText(/^Method$/i);
+      await user.clear(methodInput);
+      await user.type(methodInput, "delete");
       await user.click(screen.getByRole("button", { name: "Apply" }));
 
       expect(screen.getByRole("status")).toHaveTextContent("Applied");
@@ -140,28 +116,30 @@ describe("EditFormFooter", () => {
       const user = userEvent.setup();
       renderFooter();
 
-      await editMethod(user, "delete");
+      const methodInput = screen.getByLabelText(/^Method$/i);
+      await user.clear(methodInput);
+      await user.type(methodInput, "delete");
       await user.click(screen.getByRole("button", { name: "Apply" }));
-      await user.type(screen.getByLabelText("with.method"), "X");
+
+      // Change again after apply — clear then type new value
+      await user.clear(methodInput);
+      await user.type(methodInput, "put");
 
       expect(screen.queryByText("Applied")).not.toBeInTheDocument();
       expect(screen.getByText("1 changed")).toBeInTheDocument();
     });
 
     describe("expiry", () => {
-      beforeEach(() => {
-        vi.useFakeTimers({ shouldAdvanceTime: true });
-      });
-
-      afterEach(() => {
-        vi.useRealTimers();
-      });
+      beforeEach(() => vi.useFakeTimers({ shouldAdvanceTime: true }));
+      afterEach(() => vi.useRealTimers());
 
       it("retires on its own, leaving the resting state", async () => {
         const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
         renderFooter();
 
-        await editMethod(user, "delete");
+        const methodInput = screen.getByLabelText(/^Method$/i);
+        await user.clear(methodInput);
+        await user.type(methodInput, "delete");
         await user.click(screen.getByRole("button", { name: "Apply" }));
         expect(screen.getByText("Applied")).toBeInTheDocument();
 
@@ -180,70 +158,60 @@ describe("EditFormFooter", () => {
       const user = userEvent.setup();
       const { commitWorkflow } = renderFooter();
 
-      await editMethod(user, "delete");
+      const methodInput = screen.getByLabelText(/^Method$/i);
+      await user.clear(methodInput);
+      await user.type(methodInput, "delete");
       await user.click(screen.getByRole("button", { name: "Apply" }));
 
       expect(commitWorkflow).toHaveBeenCalledTimes(1);
-      expect(committedTask(commitWorkflow).with.method).toBe("delete");
+      const committed = committedTask(commitWorkflow);
+      expect((committed.with as Record<string, unknown>).method).toBe("delete");
     });
 
-    /* Apply re-baselines the draft, so the panel stays in edit mode with a clean
-       footer rather than the footer vanishing under the user. */
-    it("leaves the panel in edit mode with nothing left to apply", async () => {
+    it("leaves the panel with nothing left to apply after apply", async () => {
       const user = userEvent.setup();
       renderFooter();
 
-      await editMethod(user, "delete");
+      const methodInput = screen.getByLabelText(/^Method$/i);
+      await user.clear(methodInput);
+      await user.type(methodInput, "delete");
       await user.click(screen.getByRole("button", { name: "Apply" }));
 
-      expect(screen.getByLabelText("with.method")).toBeInTheDocument();
       expect(screen.getByRole("button", { name: "Apply" })).toBeDisabled();
     });
 
-    /* The draft is merged onto the task rather than rebuilt from it: the rows are a lossy
-       view, so anything they never showed would otherwise be dropped on every Apply. */
-    it("carries over every field the change did not name", async () => {
+    it("carries over fields not changed", async () => {
       const user = userEvent.setup();
       const { commitWorkflow } = renderFooter();
 
-      await editMethod(user, "delete");
+      const methodInput = screen.getByLabelText(/^Method$/i);
+      await user.clear(methodInput);
+      await user.type(methodInput, "delete");
       await user.click(screen.getByRole("button", { name: "Apply" }));
 
       const committed = committedTask(commitWorkflow);
       expect(committed.call).toBe("http");
-      expect(committed.with.endpoint).toBe(
-        "https://api.github.com/repos/{organization}/{repository}/issues/{issueNumber}",
-      );
-      expect(committed.with.body).toEqual({ state: "closed" });
     });
   });
-});
-
-describe("EditFormFooter on a node that is not an addressable task", () => {
-  const frameNode = {
-    id: "/do/tryTask/try",
-    type: "try",
-    position: { x: 0, y: 0 },
-    data: { label: "tryTask (try)", task: TRY_CATCH_TASK },
-  } as RF.Node<BaseNodeData>;
-
-  const renderFrame = () =>
-    renderWithProviders(
-      <>
-        <EditableProperties fields={getTaskDetails(TRY_CATCH_TASK as never)} nodeId={frameNode.id} />
-        <EditFormFooter node={frameNode} />
-      </>,
-      { isReadOnly: false, contentFormat: "yaml", model: {} as never, commitWorkflow: vi.fn() },
-    );
-
-  it("never offers the footer, even in edit mode", async () => {
-    const user = userEvent.setup();
-    renderFrame();
 
-    await user.click(screen.getByText("error"));
+  describe("node without a taskReference", () => {
+    it("never offers the footer", async () => {
+      const frameNode = {
+        id: "/do/tryTask/try",
+        type: "try",
+        position: { x: 0, y: 0 },
+        data: { label: "tryTask (try)", task: { try: [] } },
+      } as RF.Node<BaseNodeData>;
+
+      renderWithProviders(
+        <>
+          <TaskForm nodeType={frameNode.type!} task={frameNode.data.task!} nodeId={frameNode.id} />
+          <EditFormFooter node={frameNode} />
+        </>,
+        { isReadOnly: false, contentFormat: "yaml", model: {} as never, commitWorkflow: vi.fn() },
+      );
 
-    expect(screen.getByLabelText("catch.as")).toBeInTheDocument();
-    expect(screen.queryByRole("button", { name: "Apply" })).not.toBeInTheDocument();
-    expect(screen.queryByRole("button", { name: "Cancel" })).not.toBeInTheDocument();
+      expect(screen.queryByRole("button", { name: "Apply" })).not.toBeInTheDocument();
+    });
   });
 });
diff --git a/packages/open-workflow-diagram-editor/tests/side-panel/EditableProperties.test.tsx b/packages/open-workflow-diagram-editor/tests/side-panel/EditableProperties.test.tsx
deleted file mode 100644
index 84db5cc5..00000000
--- a/packages/open-workflow-diagram-editor/tests/side-panel/EditableProperties.test.tsx
+++ /dev/null
@@ -1,146 +0,0 @@
-/*
- * Copyright 2021-Present The Open Workflow Specification Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { describe, it, expect, vi } from "vitest";
-import { screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { EditableProperties } from "../../src/side-panel/EditableProperties";
-import type { DetailField } from "../../src/core/taskDetails";
-import { renderWithProviders } from "../test-utils/render-helpers";
-import { scalarField } from "../test-utils/detail-fields";
-
-const callFields: DetailField[] = [scalarField("call", "http"), scalarField("with.method", "GET")];
-
-const renderEditable = (fields: DetailField[] = callFields, nodeId = "/do/fetchUser") =>
-  renderWithProviders(<EditableProperties fields={fields} nodeId={nodeId} />, {
-    isReadOnly: false,
-  });
-
-describe("EditableProperties", () => {
-  describe("default view (read only)", () => {
-    it("presents values statically rather than as form controls", () => {
-      renderEditable();
-
-      expect(screen.getByText("GET")).toBeInTheDocument();
-      expect(screen.queryByRole("textbox")).not.toBeInTheDocument();
-    });
-
-    it("renders an editable row as a button", () => {
-      renderEditable();
-
-      expect(screen.getByRole("button", { name: /with\.method/ })).toBeInTheDocument();
-    });
-  });
-
-  describe("entering edit mode", () => {
-    it("turns every editable field into a control, not just the clicked one", async () => {
-      const user = userEvent.setup();
-      renderEditable();
-
-      await user.click(screen.getByText("GET"));
-
-      expect(screen.getByLabelText("call")).toHaveValue("http");
-      expect(screen.getByLabelText("with.method")).toHaveValue("GET");
-    });
-
-    it("focuses the clicked field so typing continues where the user pointed", async () => {
-      const user = userEvent.setup();
-      renderEditable();
-
-      await user.click(screen.getByText("GET"));
-
-      expect(screen.getByLabelText("with.method")).toHaveFocus();
-    });
-
-    it("focuses a clicked boolean row's switch", async () => {
-      const user = userEvent.setup();
-      renderEditable([scalarField("fork.compete", true)]);
-
-      await user.click(screen.getByText("true"));
-
-      expect(screen.getByRole("switch")).toHaveFocus();
-    });
-  });
-
-  describe("editing", () => {
-    it("holds typed input in the draft", async () => {
-      const user = userEvent.setup();
-      renderEditable();
-
-      await user.click(screen.getByText("GET"));
-      await user.clear(screen.getByLabelText("with.method"));
-      await user.type(screen.getByLabelText("with.method"), "POST");
-
-      expect(screen.getByLabelText("with.method")).toHaveValue("POST");
-    });
-
-    /* That a number survives as a number, rather than just looking numeric, is proved by the
-       submit round-trip in `FieldControls.test.tsx`. */
-    it("renders a number field as a number input", async () => {
-      const user = userEvent.setup();
-      renderEditable([scalarField("with.port", 8080)]);
-
-      await user.click(screen.getByText("8080"));
-
-      expect(screen.getByLabelText("with.port")).toHaveAttribute("type", "number");
-    });
-
-    it("keeps fields with the same label but different segments distinct", () => {
-      const consoleError = vi.spyOn(console, "error").mockImplementation(() => {});
-      renderEditable([
-        scalarField("set.user.name", "aaa", ["set", "user", "name"]),
-        scalarField("set.user.name", "bbb", ["set", "user.name"]),
-      ]);
-      expect(
-        consoleError.mock.calls.some(([message]) =>
-          String(message).includes("Encountered two children with the same key"),
-        ),
-      ).toBe(false);
-      consoleError.mockRestore();
-    });
-  });
-
-  /* The form lives above the rendered rows, so a node switch must reset it explicitly —
-     remounting the rows alone would leave the previous node's values in the draft. */
-  describe("switching node", () => {
-    const otherNode = (
-      <EditableProperties fields={[scalarField("call", "grpc")]} nodeId="/do/other" />
-    );
-
-    it("shows the newly selected node's values", async () => {
-      const user = userEvent.setup();
-      const { rerender } = renderEditable();
-
-      await user.click(screen.getByText("GET"));
-      await user.clear(screen.getByLabelText("with.method"));
-      await user.type(screen.getByLabelText("with.method"), "POST");
-      rerender(otherNode);
-
-      expect(screen.getByText("grpc")).toBeInTheDocument();
-      expect(screen.queryByDisplayValue("POST")).not.toBeInTheDocument();
-    });
-
-    it("returns to the resting presentation", async () => {
-      const user = userEvent.setup();
-      const { rerender } = renderEditable();
-
-      await user.click(screen.getByText("GET"));
-      rerender(otherNode);
-
-      expect(screen.queryByRole("textbox")).not.toBeInTheDocument();
-    });
-  });
-});
diff --git a/packages/open-workflow-diagram-editor/tests/side-panel/FieldControls.test.tsx b/packages/open-workflow-diagram-editor/tests/side-panel/FieldControls.test.tsx
deleted file mode 100644
index d5d9a1f5..00000000
--- a/packages/open-workflow-diagram-editor/tests/side-panel/FieldControls.test.tsx
+++ /dev/null
@@ -1,107 +0,0 @@
-/*
- * Copyright 2021-Present The Open Workflow Specification Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { describe, it, expect } from "vitest";
-import { screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { FormProvider, useForm } from "react-hook-form";
-import { FieldControl } from "../../src/side-panel/FieldControls";
-import type { EditableDetailField } from "../../src/side-panel/FieldControls";
-import { renderWithProviders } from "../test-utils/render-helpers";
-import { scalarField } from "../test-utils/detail-fields";
-
-/* `FieldControl` is bound to the surrounding draft, so it only renders inside a form. . */
-const DRAFT_NAME = "f0";
-
-function SingleFieldForm({
-  field,
-  onValues,
-}: {
-  field: EditableDetailField;
-  onValues?: (v: unknown) => void;
-}) {
-  const form = useForm({ defaultValues: { [DRAFT_NAME]: field.value } });
-
-  return (
-    <FormProvider {...form}>
-      <form onSubmit={form.handleSubmit((values) => onValues?.(values))}>
-        <label htmlFor="control">{field.label}</label>
-        <FieldControl field={field} id="control" name={DRAFT_NAME} />
-        <button type="submit">submit</button>
-      </form>
-    </FormProvider>
-  );
-}
-
-const renderControl = (field: EditableDetailField, onValues?: (v: unknown) => void) =>
-  renderWithProviders(<SingleFieldForm field={field} onValues={onValues} />, { isReadOnly: false });
-
-const control = () => screen.getByLabelText("f");
-
-const field = (value: string | number | boolean) => scalarField("f", value) as EditableDetailField;
-
-describe("FieldControl", () => {
-  it("renders a string as a text input", () => {
-    renderControl(field("http"));
-
-    expect(control().tagName).toBe("INPUT");
-    expect(control()).toHaveValue("http");
-    expect(control()).toBeEnabled();
-  });
-
-  it("renders a number as a number input", () => {
-    renderControl(field(8080));
-
-    expect(control()).toHaveAttribute("type", "number");
-  });
-
-  it("submits an edited number as a number", async () => {
-    const user = userEvent.setup();
-    let submitted: unknown;
-    renderControl(field(8080), (v) => (submitted = v));
-
-    await user.clear(control());
-    await user.type(control(), "9090");
-    await user.click(screen.getByRole("button", { name: "submit" }));
-
-    expect(submitted).toEqual({ f0: 9090 });
-  });
-
-  it("renders a boolean as a switch", () => {
-    renderControl(field(true));
-
-    expect(screen.getByRole("switch")).toBeChecked();
-  });
-
-  it("submits a toggled boolean as a boolean", async () => {
-    const user = userEvent.setup();
-    let submitted: unknown;
-    renderControl(field(true), (v) => (submitted = v));
-
-    await user.click(screen.getByRole("switch"));
-    await user.click(screen.getByRole("button", { name: "submit" }));
-
-    expect(submitted).toEqual({ f0: false });
-  });
-
-  /* A shell command or script body needs room. Chosen from the value being multi-line rather
-   than from its key, so it holds for any such string. */
-  it("renders a multi-line string as a textarea", () => {
-    renderControl(field("line one\nline two"));
-
-    expect(control().tagName).toBe("TEXTAREA");
-  });
-});
diff --git a/packages/open-workflow-diagram-editor/tests/side-panel/NodeDetailsView.test.tsx b/packages/open-workflow-diagram-editor/tests/side-panel/NodeDetailsView.test.tsx
index 2083ceff..f48764ea 100644
--- a/packages/open-workflow-diagram-editor/tests/side-panel/NodeDetailsView.test.tsx
+++ b/packages/open-workflow-diagram-editor/tests/side-panel/NodeDetailsView.test.tsx
@@ -29,13 +29,12 @@ const makeNode = (data: BaseNodeData, type = "call"): RF.Node<BaseNodeData> => (
 });
 
 describe("NodeDetailsView", () => {
-  it("renders every task field as a path labelled row under the Properties header", () => {
+  it("renders the Properties section and form for a task node", () => {
     const node = makeNode({
       label: "getPets",
-      // eslint-disable-next-line unicorn/no-thenable -- 'then' is a real SWF directive
       task: {
         call: "http",
-        with: { endpoint: "https://api.example.com" },
+        with: { endpoint: "https://api.example.com", method: "get" },
         // eslint-disable-next-line unicorn/no-thenable -- then is an Open Workflow Spec field
         then: "continue",
       },
@@ -45,71 +44,11 @@ describe("NodeDetailsView", () => {
 
     expect(screen.getByTestId("node-details")).toBeInTheDocument();
     expect(screen.getByText("Properties")).toBeInTheDocument();
-    expect(screen.getByText("call")).toBeInTheDocument();
-    expect(screen.getByText("http")).toBeInTheDocument();
-    expect(screen.getByText("with.endpoint")).toBeInTheDocument();
-    expect(screen.getByText("https://api.example.com")).toBeInTheDocument();
-    expect(screen.getByText("then")).toBeInTheDocument();
-    expect(screen.getByText("continue")).toBeInTheDocument();
+    // The form renders a <form> element with the task properties aria-label
+    expect(screen.getByRole("form", { name: /task properties/i })).toBeInTheDocument();
   });
 
-  it("renders a number field as its literal value", () => {
-    const node = makeNode({
-      label: "step",
-      task: {
-        with: {
-          retries: 42,
-        },
-      },
-    });
-
-    renderWithProviders(<NodeDetailsView node={node} />);
-
-    expect(screen.getByText("with.retries")).toBeInTheDocument();
-    expect(screen.getByText("42")).toBeInTheDocument();
-  });
-
-  it("renders a boolean field as plain text", () => {
-    const node = makeNode({
-      label: "step",
-      task: {
-        with: {
-          enabled: true,
-        },
-      },
-    });
-
-    renderWithProviders(<NodeDetailsView node={node} />);
-
-    expect(screen.getByText("with.enabled")).toBeInTheDocument();
-    expect(screen.getByText("true")).toBeInTheDocument();
-  });
-
-  it.each([
-    { length: 1, text: "1 item" },
-    { length: 2, text: "2 items" },
-  ])("renders an array field as a summary $text", ({ length, text }) => {
-    const items = Array.from({ length }, () => ({}));
-    const node = makeNode({ label: "step", task: { switch: items } });
-
-    renderWithProviders(<NodeDetailsView node={node} />);
-
-    expect(screen.getByText("switch")).toBeInTheDocument();
-    expect(screen.getByText(text)).toBeInTheDocument();
-  });
-
-  it("renders an object field as a placeholder glyph (full value in source)", () => {
-    const node = makeNode({
-      label: "step",
-      task: { with: { a: { b: { client: { config: { z: 1 } } } } } },
-    });
-
-    renderWithProviders(<NodeDetailsView node={node} />);
-    expect(screen.getByText("with.a.b.client.config")).toBeInTheDocument();
-    expect(screen.getByText("{...}")).toBeInTheDocument();
-  });
-
-  it("renders a collapsed Source section with full yaml task", () => {
+  it("renders a collapsed Source section with full yaml task in read-only mode", () => {
     const task = {
       call: "http",
       with: { endpoint: "https://api.example.com" },
@@ -125,7 +64,7 @@ describe("NodeDetailsView", () => {
     );
   });
 
-  it("renders node details message when the task has no task", () => {
+  it("renders the no-details hint when the node has no task", () => {
     const node = makeNode({ label: "start" }, "start");
 
     renderWithProviders(<NodeDetailsView node={node} />);
@@ -137,7 +76,6 @@ describe("NodeDetailsView", () => {
   });
 
   describe("validation errors", () => {
-    /* Errors are attributed by taskReference (the indexed JSON pointer), not by node id */
     const taskReference = "/do/0/getPets";
     const taskReferences = new Set([taskReference]);
 
@@ -159,11 +97,9 @@ describe("NodeDetailsView", () => {
       });
 
       expect(screen.getByTestId("sidebar-errors")).toBeInTheDocument();
-      // field label derived relative to the node's taskReference
       const field = document.querySelector(".dec-sidebar-error-field");
       expect(field?.textContent).toBe("with");
       expect(screen.getByText("must have required property 'endpoint'")).toBeInTheDocument();
-      // Properties still render alongside the errors
       expect(screen.getByText("Properties")).toBeInTheDocument();
     });
 
@@ -178,7 +114,6 @@ describe("NodeDetailsView", () => {
       expect(screen.getByTestId("node-details")).toBeInTheDocument();
       expect(screen.getByTestId("sidebar-errors")).toBeInTheDocument();
       expect(screen.getByText("something is wrong")).toBeInTheDocument();
-      // No task -> no Properties, no Source, and not the empty hint
       expect(screen.queryByText("Properties")).not.toBeInTheDocument();
       expect(screen.queryByText("No additional details for this node")).not.toBeInTheDocument();
     });
@@ -221,54 +156,67 @@ describe("NodeDetailsView", () => {
       expect(screen.getByText("must have required property 'endpoint'")).toBeInTheDocument();
       expect(document.querySelector(".dec-sidebar-error-field")?.textContent).toBe("with");
     });
+  });
 
-    it("does not render the Source section in editable mode", () => {
-      const task = {
+  describe("read-only and editable modes", () => {
+    const node = makeNode({
+      label: "getPets",
+      task: {
         call: "http",
-        with: { endpoint: "https://api.example.com" },
-      };
-      const node = makeNode({ label: "getPets", task });
+        with: { endpoint: "https://api.example.com", method: "get" },
+      },
+    });
 
+    it("renders the Properties section in read-only mode", () => {
+      renderWithProviders(<NodeDetailsView node={node} />, { isReadOnly: true });
+
+      expect(screen.getByText("Properties")).toBeInTheDocument();
+      expect(screen.getByRole("form", { name: /task properties/i })).toBeInTheDocument();
+    });
+
+    it("renders the Properties section in editable mode", () => {
+      renderWithProviders(<NodeDetailsView node={node} />, { isReadOnly: false });
+
+      expect(screen.getByText("Properties")).toBeInTheDocument();
+      expect(screen.getByRole("form", { name: /task properties/i })).toBeInTheDocument();
+    });
+
+    it("does not render the Source section in editable mode", () => {
       const { container } = renderWithProviders(<NodeDetailsView node={node} />, {
         isReadOnly: false,
       });
 
       expect(screen.queryByRole("heading", { name: "Source" })).not.toBeInTheDocument();
       expect(container.querySelector(".dec-sidebar-yaml-summary")).toBeNull();
-      expect(container.querySelector(".dec-sidebar-yaml-pre")).toBeNull();
     });
-  });
 
-  describe("read-only and editable modes", () => {
-    const node = makeNode({
-      label: "getPets",
-      task: {
-        call: "http",
-        with: { endpoint: "https://api.example.com" },
-      },
-    });
+    it("renders the Source section in read-only mode", () => {
+      renderWithProviders(<NodeDetailsView node={node} />, { isReadOnly: true });
 
-    const modes = [
-      ["read-only", true],
-      ["editable", false],
-    ] as const;
+      expect(screen.getByRole("heading", { name: "Source" })).toBeInTheDocument();
+    });
 
-    /* The read-only/edit split is the same until the react-hook-form editor
-      lands, so both branches render the same property rows. */
-    it.each(modes)("renders the task's property rows in %s mode", (_mode, isReadOnly) => {
-      renderWithProviders(<NodeDetailsView node={node} />, { isReadOnly });
+    it("renders form controls in editable mode", () => {
+      const { container } = renderWithProviders(<NodeDetailsView node={node} />, {
+        isReadOnly: false,
+      });
 
-      expect(screen.getByText("Properties")).toBeInTheDocument();
-      expect(screen.getByText("call")).toBeInTheDocument();
-      expect(screen.getByText("http")).toBeInTheDocument();
-      expect(screen.getByText("with.endpoint")).toBeInTheDocument();
-      expect(screen.getByText("https://api.example.com")).toBeInTheDocument();
+      // The schema-driven form renders input/select controls for editable fields
+      expect(container.querySelector("input, textarea, select")).not.toBeNull();
     });
 
-    it.each(modes)("renders no form controls in %s mode", (_mode, isReadOnly) => {
-      const { container } = renderWithProviders(<NodeDetailsView node={node} />, { isReadOnly });
+    it("renders read-only controls in read-only mode", () => {
+      const { container } = renderWithProviders(<NodeDetailsView node={node} />, {
+        isReadOnly: true,
+      });
 
-      expect(container.querySelector("input, textarea, select, [role='switch']")).toBeNull();
+      // In read-only mode all controls are disabled
+      const controls = container.querySelectorAll<HTMLInputElement | HTMLSelectElement>(
+        "input, textarea, select",
+      );
+      for (const control of controls) {
+        expect(control.disabled).toBe(true);
+      }
     });
   });
 });
diff --git a/packages/open-workflow-diagram-editor/tests/side-panel/ReadOnlyProperties.test.tsx b/packages/open-workflow-diagram-editor/tests/side-panel/ReadOnlyProperties.test.tsx
deleted file mode 100644
index e688196c..00000000
--- a/packages/open-workflow-diagram-editor/tests/side-panel/ReadOnlyProperties.test.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-/*
- * Copyright 2021-Present The Open Workflow Specification Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { describe, it, expect } from "vitest";
-import { screen } from "@testing-library/react";
-import { ReadOnlyProperties } from "../../src/side-panel/ReadOnlyProperties";
-import type { DetailField } from "../../src/core/taskDetails";
-import { renderWithProviders } from "../test-utils/render-helpers";
-import { arrayField, objectField, scalarField } from "../test-utils/detail-fields";
-
-const render = (...fields: DetailField[]) =>
-  renderWithProviders(<ReadOnlyProperties fields={fields} />);
-
-describe("ReadOnlyProperties", () => {
-  it("renders one labelled row per field", () => {
-    const { container } = render(
-      scalarField("call", "http"),
-      scalarField("with.endpoint", "https://api.example.com"),
-    );
-
-    expect(container.querySelectorAll(".dec-sidebar-prop")).toHaveLength(2);
-    expect(screen.getByText("call")).toBeInTheDocument();
-    expect(screen.getByText("with.endpoint")).toBeInTheDocument();
-  });
-
-  const everyKind: Array<[string, DetailField]> = [
-    ["scalar string", scalarField("call", "http")],
-    ["scalar number", scalarField("with.port", 8080)],
-    ["scalar boolean", scalarField("fork.compete", true)],
-    ["array", arrayField("switch", 3)],
-    ["object", objectField("with.headers")],
-  ];
-
-  it.each(everyKind)("renders no form control for a %s", (_label, field) => {
-    const { container } = render(field);
-
-    expect(container.querySelector("input, textarea, select, [role='switch']")).toBeNull();
-  });
-
-  const literalValues: Array<[string, DetailField, string]> = [
-    ["a string", scalarField("call", "http"), "http"],
-    ["a number", scalarField("with.port", 8080), "8080"],
-    ["a boolean as plain text", scalarField("fork.compete", true), "true"],
-    ["an expression", scalarField("if", "${ .ok }"), "${ .ok }"],
-  ];
-
-  it.each(literalValues)("renders %s as its literal value", (_l, field, text) => {
-    render(field);
-
-    expect(screen.getByText(text)).toBeInTheDocument();
-  });
-
-  it("renders a long value in its own capped block", () => {
-    const code = "const total = items.reduce((a, b) => a + b, 0);\nreturn total;";
-    const { container } = render(scalarField("run.script.code", code));
-
-    const block = container.querySelector(".dec-sidebar-value-multiline");
-    expect(block).toBeInTheDocument();
-    expect(block?.tagName).toBe("PRE");
-    expect(block).toHaveTextContent("return total;");
-  });
-
-  /* A count and a placeholder describe shape rather than anything the task literally says. */
-  it.each([
-    [1, "1 item"],
-    [3, "3 items"],
-  ])("summarises an array of %i as %s", (count, expected) => {
-    const { container } = render(arrayField("switch", count));
-
-    expect(container.querySelector(".dec-sidebar-value-shape")).toHaveTextContent(expected);
-  });
-
-  it("renders an object as a shape placeholder", () => {
-    const { container } = render(objectField("with.headers"));
-
-    expect(container.querySelector(".dec-sidebar-value-shape")).toHaveTextContent("{...}");
-  });
-
-  it("renders nothing when the task has no fields", () => {
-    const { container } = render();
-
-    expect(container.querySelectorAll(".dec-sidebar-prop")).toHaveLength(0);
-  });
-});
diff --git a/packages/open-workflow-diagram-editor/tests/side-panel/SidePanel.test.tsx b/packages/open-workflow-diagram-editor/tests/side-panel/SidePanel.test.tsx
index f2f8aa40..6ee9c1f1 100644
--- a/packages/open-workflow-diagram-editor/tests/side-panel/SidePanel.test.tsx
+++ b/packages/open-workflow-diagram-editor/tests/side-panel/SidePanel.test.tsx
@@ -182,49 +182,48 @@ describe("SidePanel", () => {
   });
 
   describe("edit mode footer", () => {
-       /* The workflow's own task, so the node the panel is given matches what the write path
-      would resolve rather than describing a task the workflow does not contain. */
-   const selectedNode = {
-     id: "/do/step1",
-     type: "set",
-     position: { x: 0, y: 0 },
-     data: {
-       label: "step1",
-       task: { set: { variable: "my first workflow" } },
-       taskReference: "/do/0/step1",
-     },
-   };
-
-
-   const renderWithSelection = () => {
-     const { model } = parseWorkflow(WORKFLOW_WITH_METADATA_JSON);
-     return renderWithProviders(<SidePanel />, {
-       model,
-       isReadOnly: false,
-       nodes: [selectedNode],
-       selectedNodeId: selectedNode.id,
-     });
-   };
-
-
-   /* The panel body and the footer are siblings, so this is the wiring assertion: the draft
-      typed into a row is the one the pinned footer sees. When the footer itself decides to
-      show is covered in EditFormFooter's own tests. */
-   it("reaches the same draft the property rows write to", async () => {
-     const user = userEvent.setup();
-     renderWithSelection();
-
-
-     expect(screen.queryByRole("button", { name: "Apply" })).not.toBeInTheDocument();
-
-
-     await user.click(screen.getByText("my first workflow"));
-     await user.type(screen.getByLabelText("set.variable"), "X");
-
+    /* The workflow's own task, so the node the panel is given matches what the write path
+       would resolve rather than describing a task the workflow does not contain. */
+    const selectedNode = {
+      id: "/do/step1",
+      type: "set",
+      position: { x: 0, y: 0 },
+      data: {
+        label: "step1",
+        task: { set: { variable: "my first workflow" } },
+        taskReference: "/do/0/step1",
+      },
+    };
 
-     expect(screen.getByRole("button", { name: "Apply" })).toBeEnabled();
-     expect(screen.getByText("1 changed")).toBeInTheDocument();
-   });
- });
+    const renderWithSelection = () => {
+      const { model } = parseWorkflow(WORKFLOW_WITH_METADATA_JSON);
+      return renderWithProviders(<SidePanel />, {
+        model,
+        isReadOnly: false,
+        nodes: [selectedNode],
+        selectedNodeId: selectedNode.id,
+      });
+    };
 
+    /* The panel body and the footer are siblings sharing the same EditSession form.
+       Editing a field in the schema-driven form should be reflected in the footer. */
+    it("connects the schema-driven form to the footer's dirty state", async () => {
+      const user = userEvent.setup();
+      renderWithSelection();
+
+      // Footer is always visible in edit mode; Apply starts disabled
+      expect(screen.getByRole("button", { name: "Apply" })).toBeDisabled();
+
+      // The set task's `set` field renders as a key-value map editor.
+      // Clicking "+ Add property" adds a new row; typing into the key input
+      // marks the form as dirty.
+      // Use getAllByRole because `metadata` also renders an "+ Add property" button.
+      await user.click(screen.getAllByRole("button", { name: /add property/i })[0]!);
+      const keyInput = screen.getAllByLabelText(/entry key/i)[0]!;
+      await user.type(keyInput, "myKey");
+
+      expect(screen.getByRole("button", { name: "Apply" })).toBeEnabled();
+      expect(screen.getByText(/changed/i)).toBeInTheDocument();
+    });
+  });
 });
diff --git a/packages/open-workflow-diagram-editor/tests/side-panel/forms/DurationField.test.ts b/packages/open-workflow-diagram-editor/tests/side-panel/forms/DurationField.test.ts
new file mode 100644
index 00000000..8b6226cd
--- /dev/null
+++ b/packages/open-workflow-diagram-editor/tests/side-panel/forms/DurationField.test.ts
@@ -0,0 +1,67 @@
+/*
+ * Copyright 2021-Present The Open Workflow Specification Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { describe, expect, it } from "vitest";
+import { ISO_8601_DURATION_PATTERN } from "../../../src/side-panel/forms/customFields/DurationField";
+
+// ---------------------------------------------------------------------------
+// ISO_8601_DURATION_PATTERN
+// ---------------------------------------------------------------------------
+
+const re = new RegExp(ISO_8601_DURATION_PATTERN);
+
+describe("ISO_8601_DURATION_PATTERN", () => {
+  it.each([
+    // Date-only designators
+    ["P1Y", true],
+    ["P2M", true],
+    ["P3W", true],
+    ["P4D", true],
+    // Time-only designators
+    ["PT1H", true],
+    ["PT30M", true],
+    ["PT45S", true],
+    // Combined date + time
+    ["P1Y2M3DT4H5M6S", true],
+    ["P1DT12H", true],
+    // Decimal fractions
+    ["P1.5Y", true],
+    ["PT0.5S", true],
+    // Zero duration
+    ["P0D", true],
+    ["PT0S", true],
+  ] as const)("matches valid duration '%s'", (input) => {
+    expect(re.test(input)).toBe(true);
+  });
+
+  it.each([
+    // Missing "P" prefix
+    ["1Y", false],
+    ["T1H", false],
+    // Just "P" with no designators (P alone is invalid — the pattern requires at least one part)
+    ["P", false],
+    // Time marker "T" with no following value
+    ["PT", false],
+    // Plain strings / ISO dates
+    ["2024-01-01", false],
+    ["", false],
+    ["hello", false],
+    // Seconds without T separator
+    ["P30S", false],
+  ] as const)("rejects invalid value '%s'", (input) => {
+    expect(re.test(input)).toBe(false);
+  });
+});
diff --git a/packages/open-workflow-diagram-editor/tests/side-panel/forms/KeyValueMapField.test.tsx b/packages/open-workflow-diagram-editor/tests/side-panel/forms/KeyValueMapField.test.tsx
new file mode 100644
index 00000000..4cacefd4
--- /dev/null
+++ b/packages/open-workflow-diagram-editor/tests/side-panel/forms/KeyValueMapField.test.tsx
@@ -0,0 +1,137 @@
+/*
+ * Copyright 2021-Present The Open Workflow Specification Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * Tests for KeyValueMapField — focusing on the variant-switch memory fix.
+ *
+ * Regression coverage: when a OneOfFieldRow switches away from the map variant
+ * and then back, it calls setValue(path, savedObject) to restore the user's
+ * previously entered key-value data before KeyValueMapField remounts.  On
+ * remount the component must detect the already-restored RHF value and
+ * initialise its rows from it rather than from the (stale) committed taskData.
+ */
+
+import { describe, it, expect } from "vitest";
+import * as React from "react";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { FormProvider, useForm } from "react-hook-form";
+import { I18nProvider } from "@openworkflowspec/i18n";
+import { en } from "../../../src/i18n/locales/en";
+import { KeyValueMapField } from "../../../src/side-panel/forms/customFields/KeyValueMapField";
+import { TaskFormContext } from "../../../src/side-panel/forms/taskFormContext";
+import type { MapField } from "../../../src/side-panel/forms/schemaToFormFields";
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+const mapField: MapField = {
+  kind: "map",
+  path: "output.as",
+  label: "As",
+  required: false,
+};
+
+/**
+ * Wraps KeyValueMapField in a real RHF form.
+ *
+ * `presetPath` / `presetValue` simulate OneOfFieldRow.handleVariantChange
+ * calling setValue(path, savedObject) on the form BEFORE KeyValueMapField
+ * mounts (the variant switch causes a re-render that unmounts the old variant
+ * and mounts this component fresh, but the form setValue has already fired).
+ *
+ * We achieve this by rendering an inner component that calls setValue in a
+ * layout effect (which runs before paint, synchronously after commit) and
+ * only mounts the KeyValueMapField after that setValue has been applied.
+ */
+function MapFieldWrapper({
+  presetPath,
+  presetValue,
+}: {
+  presetPath?: string;
+  presetValue?: unknown;
+}) {
+  const form = useForm<Record<string, unknown>>();
+  const [ready, setReady] = React.useState(!presetPath);
+
+  // Simulate the OneOfFieldRow behaviour: setValue fires on the form before
+  // the map field component is mounted for the first time.
+  React.useLayoutEffect(() => {
+    if (presetPath !== undefined && presetValue !== undefined) {
+      form.setValue(presetPath as never, presetValue as never, { shouldDirty: true });
+      setReady(true);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <I18nProvider locale="en" dictionaries={{ en }}>
+      <TaskFormContext.Provider value={{ isReadOnly: false, siblingTaskNames: [], taskData: {} }}>
+        <FormProvider {...form}>{ready && <KeyValueMapField field={mapField} />}</FormProvider>
+      </TaskFormContext.Provider>
+    </I18nProvider>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+
+describe("KeyValueMapField — variant-switch restore", () => {
+  it("initialises from taskData when RHF has no map value at mount", async () => {
+    render(<MapFieldWrapper />);
+    // No rows — taskData is empty and RHF has no value
+    expect(screen.queryByRole("textbox")).not.toBeInTheDocument();
+  });
+
+  it("initialises rows from an RHF object set by setValue before mount", async () => {
+    // Simulate what OneOfFieldRow.handleVariantChange does: before switching to
+    // the map variant it calls setValue("output.as", savedMap) on the form.
+    // The user's previously-entered map data was saved when they last had the
+    // map variant active.  On remount the map field must recover that data.
+    const { findAllByRole } = render(
+      <MapFieldWrapper presetPath="output.as" presetValue={{ city: "Paris" }} />,
+    );
+
+    // Wait for the layout effect to fire and the component to mount.
+    const inputs = await findAllByRole("textbox");
+    const keyInput = inputs.find((el) =>
+      (el as HTMLInputElement).getAttribute("aria-label")?.toLowerCase().includes("key"),
+    );
+    const valueInput = inputs.find((el) =>
+      (el as HTMLInputElement).getAttribute("aria-label")?.toLowerCase().includes("value"),
+    );
+    expect(keyInput).toHaveValue("city");
+    expect(valueInput).toHaveValue("Paris");
+  });
+
+  it("supports adding new key-value rows after a restore", async () => {
+    const user = userEvent.setup();
+    const { findByDisplayValue, findByRole } = render(
+      <MapFieldWrapper presetPath="output.as" presetValue={{ city: "Paris" }} />,
+    );
+
+    // Wait for the preset to take effect and the row to be visible.
+    await findByDisplayValue("city");
+
+    // The user can add a new row on top.
+    await user.click(await findByRole("button", { name: /add property/i }));
+    const inputs = screen.getAllByRole("textbox");
+    // 4 inputs = 2 (restored row) + 2 (new empty row)
+    expect(inputs.length).toBe(4);
+  });
+});
diff --git a/packages/open-workflow-diagram-editor/tests/side-panel/forms/NumberControl.test.tsx b/packages/open-workflow-diagram-editor/tests/side-panel/forms/NumberControl.test.tsx
new file mode 100644
index 00000000..34555436
--- /dev/null
+++ b/packages/open-workflow-diagram-editor/tests/side-panel/forms/NumberControl.test.tsx
@@ -0,0 +1,115 @@
+/*
+ * Copyright 2021-Present The Open Workflow Specification Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * Tests for the NumberControl field inside FieldControl.
+ *
+ * Regression coverage: with type="number", browsers prevent the field from being
+ * cleared to an empty value — the native spin buttons and browser validation either
+ * clamp to 0 or restore the last valid value. The fix is to use type="text" with
+ * inputMode="numeric" so the browser never interferes, while keeping the same
+ * string-to-number mapping in onChange.
+ */
+
+import { describe, it, expect } from "vitest";
+import * as React from "react";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { FormProvider, useForm } from "react-hook-form";
+import { I18nProvider } from "@openworkflowspec/i18n";
+import { en } from "../../../src/i18n/locales/en";
+import { FieldControl } from "../../../src/side-panel/forms/FieldControl";
+import { TaskFormContext } from "../../../src/side-panel/forms/taskFormContext";
+import type { NumberField } from "../../../src/side-panel/forms/schemaToFormFields";
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+const numberField: NumberField = {
+  kind: "number",
+  path: "wait.seconds",
+  label: "Seconds",
+  required: false,
+};
+
+function NumberControlWrapper({ defaultValue }: { defaultValue?: number }) {
+  const form = useForm<Record<string, unknown>>({
+    defaultValues: { "wait.seconds": defaultValue },
+  });
+
+  return (
+    <I18nProvider locale="en" dictionaries={{ en }}>
+      <TaskFormContext.Provider value={{ isReadOnly: false, siblingTaskNames: [], taskData: {} }}>
+        <FormProvider {...form}>
+          <FieldControl field={numberField} id="field-wait-seconds" />
+        </FormProvider>
+      </TaskFormContext.Provider>
+    </I18nProvider>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+
+describe("NumberControl", () => {
+  it("renders a text input (not number) to allow clearing the field", () => {
+    render(<NumberControlWrapper defaultValue={30} />);
+
+    const input = screen.getByRole("textbox");
+    expect(input).toHaveAttribute("type", "text");
+    expect(input).toHaveAttribute("inputmode", "numeric");
+  });
+
+  it("displays the current numeric value as a string", () => {
+    render(<NumberControlWrapper defaultValue={30} />);
+    expect(screen.getByRole("textbox")).toHaveValue("30");
+  });
+
+  it("displays empty string when value is undefined", () => {
+    render(<NumberControlWrapper defaultValue={undefined} />);
+    expect(screen.getByRole("textbox")).toHaveValue("");
+  });
+
+  it("accepts numeric input and stores it as a number", async () => {
+    const user = userEvent.setup();
+    render(<NumberControlWrapper />);
+
+    const input = screen.getByRole("textbox");
+    await user.type(input, "42");
+    expect(input).toHaveValue("42");
+  });
+
+  it("ignores non-numeric characters", async () => {
+    const user = userEvent.setup();
+    render(<NumberControlWrapper defaultValue={5} />);
+
+    const input = screen.getByRole("textbox");
+    await user.type(input, "abc");
+    // Non-numeric input should not change the displayed value
+    expect(input).toHaveValue("5");
+  });
+
+  it("allows clearing the field to empty", async () => {
+    const user = userEvent.setup();
+    render(<NumberControlWrapper defaultValue={30} />);
+
+    const input = screen.getByRole("textbox");
+    await user.clear(input);
+    expect(input).toHaveValue("");
+  });
+});
diff --git a/packages/open-workflow-diagram-editor/tests/side-panel/forms/fieldHelpers.test.tsx b/packages/open-workflow-diagram-editor/tests/side-panel/forms/fieldHelpers.test.tsx
new file mode 100644
index 00000000..96961d73
--- /dev/null
+++ b/packages/open-workflow-diagram-editor/tests/side-panel/forms/fieldHelpers.test.tsx
@@ -0,0 +1,83 @@
+/*
+ * Copyright 2021-Present The Open Workflow Specification Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { describe, expect, it } from "vitest";
+import * as React from "react";
+import { render, screen } from "@testing-library/react";
+import { FieldWithError } from "../../../src/side-panel/forms/customFields/fieldHelpers";
+
+// ---------------------------------------------------------------------------
+// FieldWithError
+// ---------------------------------------------------------------------------
+
+describe("FieldWithError", () => {
+  it("renders the children it wraps", () => {
+    render(
+      <FieldWithError errorMessage={undefined}>
+        <input data-testid="the-input" />
+      </FieldWithError>,
+    );
+    expect(screen.getByTestId("the-input")).toBeInTheDocument();
+  });
+
+  it("does not render an error paragraph when errorMessage is undefined", () => {
+    render(
+      <FieldWithError errorMessage={undefined}>
+        <span>child</span>
+      </FieldWithError>,
+    );
+    expect(screen.queryByRole("alert")).not.toBeInTheDocument();
+  });
+
+  it("renders an alert paragraph with the error message when errorMessage is set", () => {
+    render(
+      <FieldWithError errorMessage="Field is required">
+        <span>child</span>
+      </FieldWithError>,
+    );
+    const alert = screen.getByRole("alert");
+    expect(alert).toBeInTheDocument();
+    expect(alert).toHaveTextContent("Field is required");
+  });
+
+  it.each([
+    ["validation message", "Value must be a positive number"],
+    ["workflow error message", "Task 'initialize' is missing required property 'set'"],
+  ])("displays '%s' verbatim", (_label, message) => {
+    render(
+      <FieldWithError errorMessage={message}>
+        <span />
+      </FieldWithError>,
+    );
+    expect(screen.getByRole("alert")).toHaveTextContent(message);
+  });
+
+  it("removes the error paragraph when errorMessage changes from a string to undefined", () => {
+    const { rerender } = render(
+      <FieldWithError errorMessage="oops">
+        <span />
+      </FieldWithError>,
+    );
+    expect(screen.getByRole("alert")).toBeInTheDocument();
+
+    rerender(
+      <FieldWithError errorMessage={undefined}>
+        <span />
+      </FieldWithError>,
+    );
+    expect(screen.queryByRole("alert")).not.toBeInTheDocument();
+  });
+});
diff --git a/packages/open-workflow-diagram-editor/tests/side-panel/forms/flattenTask.test.ts b/packages/open-workflow-diagram-editor/tests/side-panel/forms/flattenTask.test.ts
new file mode 100644
index 00000000..06475103
--- /dev/null
+++ b/packages/open-workflow-diagram-editor/tests/side-panel/forms/flattenTask.test.ts
@@ -0,0 +1,135 @@
+/*
+ * Copyright 2021-Present The Open Workflow Specification Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { describe, expect, it } from "vitest";
+import { flattenTask } from "../../../src/side-panel/forms/TaskForm";
+import { SET_EXAMPLE_WORKFLOW } from "../../fixtures/workflows";
+
+// ---------------------------------------------------------------------------
+// Fixtures derived from the "Set Example" workflow
+// ---------------------------------------------------------------------------
+
+/** The `initialize` task body from the Set Example workflow. */
+const initializeTask = SET_EXAMPLE_WORKFLOW.do[0]!["initialize"]! as Record<string, unknown>;
+
+// ---------------------------------------------------------------------------
+// Null / undefined / primitive inputs
+// ---------------------------------------------------------------------------
+
+describe("flattenTask — null / undefined / primitives", () => {
+  it.each([
+    ["null", null],
+    ["undefined", undefined],
+  ] as const)("returns {} for %s", (_label, value) => {
+    expect(flattenTask(value)).toEqual({});
+  });
+
+  it("returns {} for a bare primitive at the root (no prefix)", () => {
+    expect(flattenTask("hello")).toEqual({});
+    expect(flattenTask(42)).toEqual({});
+    expect(flattenTask(true)).toEqual({});
+  });
+
+  it("wraps a primitive under a prefix", () => {
+    expect(flattenTask("hello", "name")).toEqual({ name: "hello" });
+    expect(flattenTask(0, "count")).toEqual({ count: 0 });
+    expect(flattenTask(false, "flag")).toEqual({ flag: false });
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Array inputs
+// ---------------------------------------------------------------------------
+
+describe("flattenTask — arrays", () => {
+  it("returns {} for an array at the root (no prefix)", () => {
+    expect(flattenTask([1, 2, 3])).toEqual({});
+  });
+
+  it("keeps an array as-is under its prefix key", () => {
+    const arr = [{ step1: {} }];
+    expect(flattenTask(arr, "do")).toEqual({ do: arr });
+  });
+
+  it("preserves a nested array at its dot-notation key", () => {
+    const arr = [{ sub: {} }];
+    expect(flattenTask({ do: arr })).toEqual({ do: arr });
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Object flattening — Set Example task
+// ---------------------------------------------------------------------------
+
+describe("flattenTask — Set Example task", () => {
+  it("flattens the initialize task into dot-notation keys", () => {
+    expect(flattenTask(initializeTask)).toEqual({
+      "set.startEvent": "${ $workflow.input[0] }",
+    });
+  });
+
+  it("produces no top-level object keys (all are dot-paths)", () => {
+    const result = flattenTask(initializeTask);
+    for (const key of Object.keys(result)) {
+      // Every key with a "." is a flattened path; plain keys are single-segment
+      if (key.includes(".")) {
+        expect(key.split(".").length).toBeGreaterThanOrEqual(2);
+      }
+    }
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Object flattening — general cases
+// ---------------------------------------------------------------------------
+
+describe("flattenTask — object flattening", () => {
+  it("returns the flat key-value pairs for a single-level object", () => {
+    expect(flattenTask({ call: "http" })).toEqual({ call: "http" });
+  });
+
+  it("flattens two-level nesting into dot-notation keys", () => {
+    expect(flattenTask({ for: { each: "${items}", in: "${data}" } })).toEqual({
+      "for.each": "${items}",
+      "for.in": "${data}",
+    });
+  });
+
+  it("flattens deeply nested paths", () => {
+    expect(flattenTask({ call: { http: { endpoint: "https://example.com" } } })).toEqual({
+      "call.http.endpoint": "https://example.com",
+    });
+  });
+
+  it("respects a non-empty prefix at the root call", () => {
+    expect(flattenTask({ method: "GET" }, "with")).toEqual({ "with.method": "GET" });
+  });
+
+  it("preserves booleans and numbers as leaf values", () => {
+    expect(flattenTask({ with: { retries: 3, redirect: false } })).toEqual({
+      "with.retries": 3,
+      "with.redirect": false,
+    });
+  });
+
+  it("handles an empty object", () => {
+    expect(flattenTask({})).toEqual({});
+  });
+
+  it("handles an empty nested object (produces no entries for the empty child)", () => {
+    expect(flattenTask({ output: {} })).toEqual({});
+  });
+});
diff --git a/packages/open-workflow-diagram-editor/tests/side-panel/forms/schemaToFormFields.test.ts b/packages/open-workflow-diagram-editor/tests/side-panel/forms/schemaToFormFields.test.ts
new file mode 100644
index 00000000..6049eefe
--- /dev/null
+++ b/packages/open-workflow-diagram-editor/tests/side-panel/forms/schemaToFormFields.test.ts
@@ -0,0 +1,67 @@
+/*
+ * Copyright 2021-Present The Open Workflow Specification Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { describe, expect, it } from "vitest";
+import { getFormFieldsForNodeType } from "../../../src/core/schemaWalker";
+import type {
+  OneOfField,
+  StringField,
+  ObjectField,
+} from "../../../src/side-panel/forms/schemaToFormFields";
+
+describe("schemaToFormFields endpoint and oneOf unwrapping", () => {
+  it("generates clean endpoint options for setTask input.schema.resource.endpoint", () => {
+    const fields = getFormFieldsForNodeType("set");
+    const inputField = fields.find((f) => f.path === "input") as ObjectField | undefined;
+    expect(inputField).toBeDefined();
+
+    const schemaOneOf = inputField?.children.find((f) => f.path === "input.schema") as
+      | OneOfField
+      | undefined;
+    expect(schemaOneOf).toBeDefined();
+
+    const externalVariant = schemaOneOf?.variants.find((v) => v.label === "Schema External");
+    expect(externalVariant).toBeDefined();
+
+    const resourceField = externalVariant?.fields.find(
+      (f) => f.path === "input.schema.resource",
+    ) as ObjectField | undefined;
+    expect(resourceField).toBeDefined();
+
+    const endpointOneOf = resourceField?.children.find(
+      (f) => f.path === "input.schema.resource.endpoint",
+    ) as OneOfField | undefined;
+    expect(endpointOneOf).toBeDefined();
+
+    // Endpoint should have collapsed variants: "URI" and "Endpoint Configuration"
+    const variantLabels = endpointOneOf?.variants.map((v) => v.label);
+    expect(variantLabels).toEqual(["URI", "Endpoint Configuration"]);
+
+    // The "URI" variant should be a string field with placeholder
+    const uriVariant = endpointOneOf?.variants.find((v) => v.label === "URI");
+    const uriLeafField = uriVariant?.fields[0] as StringField;
+    expect(uriLeafField.kind).toBe("string");
+    expect(uriLeafField.placeholder).toBe("https://example.com/api/{id}");
+
+    // The "Endpoint Configuration" variant should have unwrapped `uri` as a direct string field (no 1-option oneOf dropdown)
+    const configVariant = endpointOneOf?.variants.find((v) => v.label === "Endpoint Configuration");
+    const uriFieldInConfig = configVariant?.fields.find(
+      (f) => f.path === "input.schema.resource.endpoint.uri",
+    );
+    expect(uriFieldInConfig?.kind).toBe("string");
+    expect((uriFieldInConfig as StringField).placeholder).toBe("https://example.com/api/{id}");
+  });
+});
diff --git a/packages/open-workflow-diagram-editor/tests/side-panel/forms/taskFormContext.test.ts b/packages/open-workflow-diagram-editor/tests/side-panel/forms/taskFormContext.test.ts
new file mode 100644
index 00000000..38306054
--- /dev/null
+++ b/packages/open-workflow-diagram-editor/tests/side-panel/forms/taskFormContext.test.ts
@@ -0,0 +1,252 @@
+/*
+ * Copyright 2021-Present The Open Workflow Specification Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { describe, expect, it } from "vitest";
+import {
+  getNestedValue,
+  hasValue,
+  filterReadOnlyFields,
+} from "../../../src/side-panel/forms/taskFormContext";
+import type { FormFieldDescriptor } from "../../../src/side-panel/forms/schemaToFormFields";
+import { SET_EXAMPLE_WORKFLOW } from "../../fixtures/workflows";
+
+// ---------------------------------------------------------------------------
+// Fixtures derived from the "Set Example" workflow
+// ---------------------------------------------------------------------------
+
+/** The `initialize` task body from the Set Example workflow. */
+const initializeTask = SET_EXAMPLE_WORKFLOW.do[0]!["initialize"]! as Record<string, unknown>;
+
+// ---------------------------------------------------------------------------
+// getNestedValue
+// ---------------------------------------------------------------------------
+
+describe("getNestedValue", () => {
+  it.each([
+    ["top-level key", initializeTask, "set", { startEvent: "${ $workflow.input[0] }" }],
+    ["nested two-level path", initializeTask, "set.startEvent", "${ $workflow.input[0] }"],
+  ] as const)("%s", (_label, data, path, expected) => {
+    expect(getNestedValue(data, path)).toEqual(expected);
+  });
+
+  it("returns undefined for a missing top-level key", () => {
+    expect(getNestedValue(initializeTask, "output")).toBeUndefined();
+  });
+
+  it("returns undefined when an intermediate segment is missing", () => {
+    expect(getNestedValue(initializeTask, "set.missing.deep")).toBeUndefined();
+  });
+
+  it("returns undefined when an intermediate segment is null", () => {
+    expect(getNestedValue({ a: null }, "a.b")).toBeUndefined();
+  });
+
+  it("returns undefined when an intermediate segment is an array", () => {
+    expect(getNestedValue({ a: [1, 2] }, "a.b")).toBeUndefined();
+  });
+
+  it("returns undefined for an empty data object", () => {
+    expect(getNestedValue({}, "set")).toBeUndefined();
+  });
+
+  it("returns the whole object for an empty path string", () => {
+    // A single split("") on "" produces [""], so we get data[""] which is undefined.
+    expect(getNestedValue(initializeTask, "")).toBeUndefined();
+  });
+});
+
+// ---------------------------------------------------------------------------
+// hasValue
+// ---------------------------------------------------------------------------
+
+describe("hasValue", () => {
+  it.each([
+    ["non-empty string", { x: "hello" }, "x", true],
+    ["number zero", { x: 0 }, "x", true],
+    ["false boolean", { x: false }, "x", true],
+    ["object value", { x: { y: 1 } }, "x", true],
+    ["empty string", { x: "" }, "x", false],
+    ["null", { x: null }, "x", false],
+    ["undefined", { x: undefined }, "x", false],
+    ["missing key", {}, "x", false],
+  ] as const)("%s → %s", (_label, data, path, expected) => {
+    expect(hasValue(data as Record<string, unknown>, path)).toBe(expected);
+  });
+
+  it("resolves nested paths from the Set Example task", () => {
+    expect(hasValue(initializeTask, "set.startEvent")).toBe(true);
+  });
+
+  it("returns false for a nested path that does not exist", () => {
+    expect(hasValue(initializeTask, "output.as")).toBe(false);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// filterReadOnlyFields — helpers
+// ---------------------------------------------------------------------------
+
+function makeString(path: string): FormFieldDescriptor {
+  return {
+    kind: "string",
+    path,
+    label: path,
+    required: false,
+    multiline: false,
+    isRuntimeExpression: false,
+  };
+}
+
+function makeNumber(path: string): FormFieldDescriptor {
+  return { kind: "number", path, label: path, required: false };
+}
+
+function makeObject(path: string, children: FormFieldDescriptor[]): FormFieldDescriptor {
+  return { kind: "object", path, label: path, required: false, children };
+}
+
+function makeMap(path: string): FormFieldDescriptor {
+  return { kind: "map", path, label: path, required: false };
+}
+
+function makeOneOf(path: string): FormFieldDescriptor {
+  return {
+    kind: "one-of",
+    path,
+    label: path,
+    required: false,
+    variants: [{ label: "v", fields: [], matchesData: () => true }],
+  };
+}
+
+// ---------------------------------------------------------------------------
+// filterReadOnlyFields — scalar fields
+// ---------------------------------------------------------------------------
+
+describe("filterReadOnlyFields — scalar fields", () => {
+  it("includes a string field when the task has a value at its path", () => {
+    const result = filterReadOnlyFields([makeString("set.startEvent")], initializeTask);
+    expect(result).toHaveLength(1);
+  });
+
+  it("excludes a string field when the task has no value at its path", () => {
+    const result = filterReadOnlyFields([makeString("output.as")], initializeTask);
+    expect(result).toHaveLength(0);
+  });
+
+  it("excludes a required scalar field whose parent object is absent", () => {
+    const requiredField: FormFieldDescriptor = {
+      kind: "string",
+      path: "output.as",
+      label: "as",
+      required: true,
+      multiline: false,
+      isRuntimeExpression: false,
+    };
+    const result = filterReadOnlyFields([requiredField], initializeTask);
+    expect(result).toHaveLength(0);
+  });
+
+  it.each([
+    ["empty string", { x: "" }],
+    ["null", { x: null }],
+    ["undefined (missing)", {}],
+  ] as const)("excludes field for %s value", (_label, task) => {
+    expect(filterReadOnlyFields([makeString("x")], task as Record<string, unknown>)).toHaveLength(
+      0,
+    );
+  });
+
+  it("includes a number field when it has value 0", () => {
+    const result = filterReadOnlyFields([makeNumber("retries")], { retries: 0 });
+    expect(result).toHaveLength(1);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// filterReadOnlyFields — object groups
+// ---------------------------------------------------------------------------
+
+describe("filterReadOnlyFields — object groups", () => {
+  it("excludes the group when the parent key is absent from the task", () => {
+    const result = filterReadOnlyFields(
+      [makeObject("output", [makeString("output.as")])],
+      initializeTask,
+    );
+    expect(result).toHaveLength(0);
+  });
+
+  it("includes the group and filters its children when the parent key exists", () => {
+    const task = { set: { startEvent: "${ $workflow.input[0] }", extra: "" } };
+    const result = filterReadOnlyFields(
+      [makeObject("set", [makeString("set.startEvent"), makeString("set.extra")])],
+      task,
+    );
+    expect(result).toHaveLength(1);
+    const group = result[0] as Extract<FormFieldDescriptor, { kind: "object" }>;
+    // Only the child with a real value survives
+    expect(group.children).toHaveLength(1);
+    expect(group.children[0]!.path).toBe("set.startEvent");
+  });
+
+  it("excludes the group when the parent key exists but all children are empty", () => {
+    const task = { set: { startEvent: "" } };
+    const result = filterReadOnlyFields([makeObject("set", [makeString("set.startEvent")])], task);
+    expect(result).toHaveLength(0);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// filterReadOnlyFields — map fields
+// ---------------------------------------------------------------------------
+
+describe("filterReadOnlyFields — map fields", () => {
+  it("includes a map field when the task has an object at its path", () => {
+    const result = filterReadOnlyFields([makeMap("set")], initializeTask);
+    expect(result).toHaveLength(1);
+  });
+
+  it("excludes a map field when the path is absent", () => {
+    const result = filterReadOnlyFields([makeMap("output.with")], initializeTask);
+    expect(result).toHaveLength(0);
+  });
+
+  it("excludes a map field when the path holds an array (not an object)", () => {
+    const result = filterReadOnlyFields([makeMap("items")], { items: [1, 2, 3] });
+    expect(result).toHaveLength(0);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// filterReadOnlyFields — one-of fields
+// ---------------------------------------------------------------------------
+
+describe("filterReadOnlyFields — one-of fields", () => {
+  it("always includes a root-level one-of (path === __root__)", () => {
+    const result = filterReadOnlyFields([makeOneOf("__root__")], {});
+    expect(result).toHaveLength(1);
+  });
+
+  it("includes a property-level one-of when the task has a value at that path", () => {
+    const result = filterReadOnlyFields([makeOneOf("set.startEvent")], initializeTask);
+    expect(result).toHaveLength(1);
+  });
+
+  it("excludes a property-level one-of when the task has no value at that path", () => {
+    const result = filterReadOnlyFields([makeOneOf("output.as")], initializeTask);
+    expect(result).toHaveLength(0);
+  });
+});
diff --git a/packages/open-workflow-diagram-editor/tests/side-panel/forms/useSiblingTaskNames.test.ts b/packages/open-workflow-diagram-editor/tests/side-panel/forms/useSiblingTaskNames.test.ts
new file mode 100644
index 00000000..62202089
--- /dev/null
+++ b/packages/open-workflow-diagram-editor/tests/side-panel/forms/useSiblingTaskNames.test.ts
@@ -0,0 +1,137 @@
+/*
+ * Copyright 2021-Present The Open Workflow Specification Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { describe, expect, it } from "vitest";
+import { renderHook } from "@testing-library/react";
+import { Classes, type Specification } from "@openworkflowspec/sdk";
+import { useSiblingTaskNames } from "../../../src/side-panel/forms/useSiblingTaskNames";
+import { SET_EXAMPLE_WORKFLOW, MANAGING_GITHUB_ISSUES_WORKFLOW } from "../../fixtures/workflows";
+
+// ---------------------------------------------------------------------------
+// Helper
+// ---------------------------------------------------------------------------
+
+function makeModel(data: object): Specification.Workflow {
+  return new Classes.Workflow(data) as Specification.Workflow;
+}
+
+function invoke(model: Specification.Workflow | null, nodeId: string | undefined): string[] {
+  const { result } = renderHook(() => useSiblingTaskNames(model, nodeId));
+  return result.current;
+}
+
+// ---------------------------------------------------------------------------
+// Guard cases
+// ---------------------------------------------------------------------------
+
+describe("useSiblingTaskNames — guard cases", () => {
+  it("returns [] when model is null", () => {
+    expect(invoke(null, "/do/initialize")).toEqual([]);
+  });
+
+  it("returns [] when nodeId is undefined", () => {
+    const model = makeModel(SET_EXAMPLE_WORKFLOW);
+    expect(invoke(model, undefined)).toEqual([]);
+  });
+
+  it("returns [] for an odd-segment nodeId (invalid path format)", () => {
+    const model = makeModel(SET_EXAMPLE_WORKFLOW);
+    // "/do" has only one segment — not a valid <list>/<taskName> pair
+    expect(invoke(model, "/do")).toEqual([]);
+  });
+
+  it("returns [] for a path with a non-existent list property", () => {
+    const model = makeModel(SET_EXAMPLE_WORKFLOW);
+    expect(invoke(model, "/steps/initialize")).toEqual([]);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Set Example workflow — single task, no siblings
+// ---------------------------------------------------------------------------
+
+describe("useSiblingTaskNames — Set Example (single task)", () => {
+  it("returns [] for initialize because it is the only top-level task", () => {
+    const model = makeModel(SET_EXAMPLE_WORKFLOW);
+    expect(invoke(model, "/do/initialize")).toEqual([]);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Managing GitHub Issues workflow — multiple siblings
+// ---------------------------------------------------------------------------
+
+describe("useSiblingTaskNames — Managing GitHub Issues", () => {
+  const model = makeModel(MANAGING_GITHUB_ISSUES_WORKFLOW);
+  // Top-level task names as defined in the fixture
+  const allTopLevel = MANAGING_GITHUB_ISSUES_WORKFLOW.do.map((entry) => Object.keys(entry)[0]!);
+
+  it.each(allTopLevel)("excludes the current task '%s' from its own sibling list", (taskName) => {
+    const siblings = invoke(model, `/do/${taskName}`);
+    expect(siblings).not.toContain(taskName);
+  });
+
+  it("returns all other top-level tasks as siblings of 'initialize'", () => {
+    const siblings = invoke(model, "/do/initialize");
+    const expected = allTopLevel.filter((n) => n !== "initialize");
+    expect(siblings).toEqual(expected);
+  });
+
+  it("returns top-level siblings for awaitForDevWork", () => {
+    const siblings = invoke(model, "/do/awaitForDevWork");
+    expect(siblings).toContain("initialize");
+    expect(siblings).toContain("evaluateDevWorkOutcome");
+    expect(siblings).not.toContain("awaitForDevWork");
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Nested task list — sibling resolution at depth
+// ---------------------------------------------------------------------------
+
+describe("useSiblingTaskNames — nested tasks", () => {
+  /**
+   * A minimal workflow with two nested tasks inside awaitForDevWork so we can
+   * verify the hook descends into the parent correctly.
+   */
+  const nestedWorkflow = {
+    document: { dsl: "1.0.3", namespace: "test", name: "nested", version: "0.1.0" },
+    do: [
+      {
+        awaitForDevWork: {
+          do: [{ assign: { set: { status: "inProgress" } } }, { notify: { set: { sent: true } } }],
+        },
+      },
+    ],
+  };
+
+  it("returns the nested sibling of 'assign' inside awaitForDevWork.do", () => {
+    const model = makeModel(nestedWorkflow);
+    const siblings = invoke(model, "/do/awaitForDevWork/do/assign");
+    expect(siblings).toEqual(["notify"]);
+  });
+
+  it("returns the nested sibling of 'notify' inside awaitForDevWork.do", () => {
+    const model = makeModel(nestedWorkflow);
+    const siblings = invoke(model, "/do/awaitForDevWork/do/notify");
+    expect(siblings).toEqual(["assign"]);
+  });
+
+  it("returns [] when the parent task entry cannot be found", () => {
+    const model = makeModel(nestedWorkflow);
+    expect(invoke(model, "/do/missing/do/assign")).toEqual([]);
+  });
+});

From 42b0d2882338b9984ea35c3888d45375eeebb11a Mon Sep 17 00:00:00 2001
From: Handrey Cunha <handrey.cunha@gmail.com>
Date: Thu, 10 Sep 2026 20:40:52 -0400
Subject: [PATCH 2/4] Fix copilot complaints

Signed-off-by: Handrey Cunha <handrey.cunha@gmail.com>
---
 .../src/components/ui/combobox.tsx            | 15 +++--
 .../src/core/taskDraft.ts                     | 18 +++++-
 .../src/side-panel/EditFormFooter.tsx         |  7 ++-
 .../src/side-panel/SidePanel.css              | 14 +++--
 .../src/side-panel/forms/FormField.tsx        | 58 +++++++++---------
 .../src/side-panel/forms/TaskForm.tsx         | 19 +++++-
 .../forms/customFields/KeyValueMapField.tsx   | 61 ++++++++++++++++---
 .../validation/useWorkflowErrorsForForm.ts    | 29 +++++++--
 .../forms/KeyValueMapField.test.tsx           | 34 ++++++++++-
 .../vitest.config.ts                          |  5 ++
 10 files changed, 199 insertions(+), 61 deletions(-)

diff --git a/packages/open-workflow-diagram-editor/src/components/ui/combobox.tsx b/packages/open-workflow-diagram-editor/src/components/ui/combobox.tsx
index 487e5efa..1e5d74aa 100644
--- a/packages/open-workflow-diagram-editor/src/components/ui/combobox.tsx
+++ b/packages/open-workflow-diagram-editor/src/components/ui/combobox.tsx
@@ -72,14 +72,14 @@ function ComboboxInput({
   showClear?: boolean;
 }) {
   return (
-    <ComboboxPrimitive.Trigger
+    <div
       data-slot="combobox-input-wrap"
       className={cn(
         "dec:relative dec:flex dec:w-full dec:items-center dec:rounded-md dec:border dec:border-input dec:bg-transparent dec:shadow-xs dec:transition-[color,box-shadow] dec:outline-none",
         "dec:dark:bg-input/30",
         "dec:focus-within:border-ring dec:focus-within:ring-[3px] dec:focus-within:ring-ring/50",
         "dec:has-[[aria-invalid=true]]:border-destructive dec:has-[[aria-invalid=true]]:ring-destructive/20 dec:dark:has-[[aria-invalid=true]]:ring-destructive/40",
-        "dec:disabled:pointer-events-none dec:disabled:opacity-50",
+        disabled && "dec:pointer-events-none dec:opacity-50",
         className,
       )}
     >
@@ -91,10 +91,17 @@ function ComboboxInput({
       />
       {showClear && <ComboboxClear disabled={disabled} />}
       {showTrigger && (
-        <ChevronDownIcon className="dec:pointer-events-none dec:mr-2 dec:size-4 dec:shrink-0 dec:text-slate-500 dec:dark:text-slate-400" />
+        <ComboboxPrimitive.Trigger
+          data-slot="combobox-input-trigger"
+          tabIndex={-1}
+          disabled={disabled}
+          className="dec:flex dec:items-center dec:justify-center dec:pr-2 dec:text-slate-500 dec:dark:text-slate-400 dec:focus:outline-none"
+        >
+          <ChevronDownIcon className="dec:pointer-events-none dec:size-4 dec:shrink-0" />
+        </ComboboxPrimitive.Trigger>
       )}
       {children}
-    </ComboboxPrimitive.Trigger>
+    </div>
   );
 }
 
diff --git a/packages/open-workflow-diagram-editor/src/core/taskDraft.ts b/packages/open-workflow-diagram-editor/src/core/taskDraft.ts
index 69597cac..f56dbf0f 100644
--- a/packages/open-workflow-diagram-editor/src/core/taskDraft.ts
+++ b/packages/open-workflow-diagram-editor/src/core/taskDraft.ts
@@ -120,17 +120,28 @@ function isDirtyPath(dotPath: string, dirtyPaths: Set<string>): boolean {
   return false;
 }
 
+/**
+ * Returns false for path segments that could reach inherited object keys and
+ * cause prototype pollution (__proto__, prototype, constructor).
+ */
+function isSafeKey(key: string): boolean {
+  return key !== "__proto__" && key !== "prototype" && key !== "constructor";
+}
+
 /** Sets a value at a dot-notation path within `obj`, creating intermediates as needed. */
 function setPath(obj: Record<string, unknown>, parts: string[], value: unknown): void {
+  if (parts.some((p) => !isSafeKey(p))) {
+    throw new Error(`Unsafe path segment in: ${parts.join(".")}`);
+  }
   let current = obj;
   for (let i = 0; i < parts.length - 1; i++) {
     const part = parts[i]!;
     if (
-      current[part] === undefined ||
+      !Object.prototype.hasOwnProperty.call(current, part) ||
       typeof current[part] !== "object" ||
       Array.isArray(current[part])
     ) {
-      current[part] = {};
+      current[part] = Object.create(null) as Record<string, unknown>;
     }
     current = current[part] as Record<string, unknown>;
   }
@@ -140,6 +151,9 @@ function setPath(obj: Record<string, unknown>, parts: string[], value: unknown):
 /** Removes a key at a dot-notation path within `obj`. Cleans up empty parent objects. */
 function deletePath(obj: Record<string, unknown>, parts: string[]): void {
   if (parts.length === 0) return;
+  if (parts.some((p) => !isSafeKey(p))) {
+    throw new Error(`Unsafe path segment in: ${parts.join(".")}`);
+  }
   if (parts.length === 1) {
     delete obj[parts[0]!];
     return;
diff --git a/packages/open-workflow-diagram-editor/src/side-panel/EditFormFooter.tsx b/packages/open-workflow-diagram-editor/src/side-panel/EditFormFooter.tsx
index e0c12075..0198bd1d 100644
--- a/packages/open-workflow-diagram-editor/src/side-panel/EditFormFooter.tsx
+++ b/packages/open-workflow-diagram-editor/src/side-panel/EditFormFooter.tsx
@@ -85,7 +85,7 @@ export function EditFormFooter({ node }: { node: RF.Node<BaseNodeData> }) {
     return null;
   }
 
-  const changedCount = Object.keys(dirtyFields).length;
+  const changedCount = Object.keys(flattenTask(dirtyFields)).length;
 
   const handleCancel = () => {
     form.reset();
@@ -108,7 +108,10 @@ export function EditFormFooter({ node }: { node: RF.Node<BaseNodeData> }) {
     ) as Specification.Task;
     const updatedModel = updateTask(model, node.id, updated);
     commitWorkflow(updatedModel);
-    form.reset(flatValues);
+    // Reset to the current nested form values (not the flat version) so that
+    // RHF's defaultValues stay consistent with the nested Controller paths and
+    // no sibling fields are spuriously marked dirty after apply.
+    form.reset(form.getValues());
     setAppliedNodeId(node.id);
 
     if (dismissTimer.current !== null) {
diff --git a/packages/open-workflow-diagram-editor/src/side-panel/SidePanel.css b/packages/open-workflow-diagram-editor/src/side-panel/SidePanel.css
index 520c70f0..eb3edf5e 100644
--- a/packages/open-workflow-diagram-editor/src/side-panel/SidePanel.css
+++ b/packages/open-workflow-diagram-editor/src/side-panel/SidePanel.css
@@ -612,9 +612,7 @@
 
   .dec-root .dec-form-object-header {
     @apply dec:flex dec:items-center dec:gap-1.5
-      dec:px-2 dec:py-1
-      dec:bg-gray-50 dec:text-left dec:w-full dec:cursor-pointer
-      dec:border-0 dec:transition-colors;
+      dec:bg-gray-50 dec:transition-colors;
   }
 
   .dec-root .dec-form-object-header:hover {
@@ -629,7 +627,15 @@
     @apply dec:bg-gray-800;
   }
 
-  .dec-root .dec-form-object-header:focus-visible {
+  /* The expand/collapse button fills the available row space */
+  .dec-root .dec-form-object-toggle {
+    @apply dec:flex dec:flex-1 dec:items-center dec:gap-1.5
+      dec:px-2 dec:py-1
+      dec:text-left dec:cursor-pointer
+      dec:border-0 dec:bg-transparent dec:transition-colors;
+  }
+
+  .dec-root .dec-form-object-toggle:focus-visible {
     outline: 1px solid rgb(var(--dec-selected-rgb));
     outline-offset: -1px;
   }
diff --git a/packages/open-workflow-diagram-editor/src/side-panel/forms/FormField.tsx b/packages/open-workflow-diagram-editor/src/side-panel/forms/FormField.tsx
index bb7cf832..f468582f 100644
--- a/packages/open-workflow-diagram-editor/src/side-panel/forms/FormField.tsx
+++ b/packages/open-workflow-diagram-editor/src/side-panel/forms/FormField.tsx
@@ -132,34 +132,34 @@ function ObjectFieldRow({ field }: { field: ObjectField }) {
 
   return (
     <div className="dec-form-object-group">
-      {/* Use a div with role="button" to avoid nesting a <button> inside a <button>
-          when this group appears inside a OneOfFieldRow which has a <button>-less ancestor.
-          The TooltipTrigger inside would otherwise produce invalid nested-button HTML. */}
-      <div
-        role="button"
-        tabIndex={0}
-        className="dec-form-object-header"
-        onClick={() => setExpanded((v) => !v)}
-        onKeyDown={(e) => {
-          if (e.key === "Enter" || e.key === " ") {
-            e.preventDefault();
-            setExpanded((v) => !v);
-          }
-        }}
-        aria-expanded={expanded}
-      >
-        {expanded ? (
-          <ChevronDown className="dec-form-object-chevron" aria-hidden="true" />
-        ) : (
-          <ChevronRight className="dec-form-object-chevron" aria-hidden="true" />
-        )}
-        <span className="dec-form-object-label">{field.label}</span>
-        {field.required && (
-          <span className="dec-form-field-required" aria-hidden="true">
-            {" "}
-            *
-          </span>
-        )}
+      {/* Header row: expand/collapse button and optional help button are siblings
+          so that no interactive element is nested inside another. */}
+      <div className="dec-form-object-header">
+        <button
+          type="button"
+          className="dec-form-object-toggle"
+          onClick={() => setExpanded((v) => !v)}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              setExpanded((v) => !v);
+            }
+          }}
+          aria-expanded={expanded}
+        >
+          {expanded ? (
+            <ChevronDown className="dec-form-object-chevron" aria-hidden="true" />
+          ) : (
+            <ChevronRight className="dec-form-object-chevron" aria-hidden="true" />
+          )}
+          <span className="dec-form-object-label">{field.label}</span>
+          {field.required && (
+            <span className="dec-form-field-required" aria-hidden="true">
+              {" "}
+              *
+            </span>
+          )}
+        </button>
         {field.description !== undefined && (
           <Tooltip>
             <TooltipTrigger asChild>
@@ -167,8 +167,6 @@ function ObjectFieldRow({ field }: { field: ObjectField }) {
                 type="button"
                 className="dec-form-field-help"
                 aria-label={`Help: ${field.label}`}
-                tabIndex={0}
-                onClick={(e) => e.stopPropagation()}
               >
                 <HelpCircle className="dec-form-field-help-icon" aria-hidden="true" />
               </button>
diff --git a/packages/open-workflow-diagram-editor/src/side-panel/forms/TaskForm.tsx b/packages/open-workflow-diagram-editor/src/side-panel/forms/TaskForm.tsx
index 8cab3eb9..e451db18 100644
--- a/packages/open-workflow-diagram-editor/src/side-panel/forms/TaskForm.tsx
+++ b/packages/open-workflow-diagram-editor/src/side-panel/forms/TaskForm.tsx
@@ -87,8 +87,14 @@ export function TaskForm({ nodeType, task, nodeId, taskReference }: TaskFormProp
 
   // ── Reset form on node change ─────────────────────────────────────────────
   // Runs whenever nodeId changes — covers initial mount and switching nodes.
+  // Pass the task as a nested object so RHF's defaultValues are stored with
+  // the same structure as the registered Controller field paths. Passing flat
+  // dot-notation keys (e.g. "with.method") causes RHF to store them as literal
+  // flat keys in _defaultValues while Controller registration resolves them to
+  // nested paths in _formValues, creating a mismatch that spuriously marks
+  // sibling fields dirty.
   React.useEffect(() => {
-    form.reset(flattenTask(task as unknown));
+    form.reset(task as unknown as Record<string, unknown>);
     // `task` is intentionally excluded: on node change we always reset to the
     // current task snapshot. External task mutations (undo/redo) are handled
     // by the effect below.
@@ -103,11 +109,18 @@ export function TaskForm({ nodeType, task, nodeId, taskReference }: TaskFormProp
   React.useEffect(() => {
     if (structuralEqual(task, prevTaskRef.current)) return;
     prevTaskRef.current = task;
-    form.reset(flattenTask(task as unknown));
+    form.reset(task as unknown as Record<string, unknown>);
   }, [task, form]);
 
   // ── Seed SDK errors into form field slots ─────────────────────────────────
-  useWorkflowErrorsForForm(errors, taskReference, taskReferences, form.setError, nodeId);
+  useWorkflowErrorsForForm(
+    errors,
+    taskReference,
+    taskReferences,
+    form.setError,
+    form.clearErrors,
+    nodeId,
+  );
 
   // ── Read-only: filter fields to only those with values ────────────────────
   const visibleFields = React.useMemo(() => {
diff --git a/packages/open-workflow-diagram-editor/src/side-panel/forms/customFields/KeyValueMapField.tsx b/packages/open-workflow-diagram-editor/src/side-panel/forms/customFields/KeyValueMapField.tsx
index cbe1371d..335f1cd4 100644
--- a/packages/open-workflow-diagram-editor/src/side-panel/forms/customFields/KeyValueMapField.tsx
+++ b/packages/open-workflow-diagram-editor/src/side-panel/forms/customFields/KeyValueMapField.tsx
@@ -30,7 +30,7 @@ interface MapEntry {
   /** Stable row identity — never changes after creation (survives key renames). */
   id: string;
   key: string;
-  value: string;
+  value: unknown;
 }
 
 // ---------------------------------------------------------------------------
@@ -42,6 +42,46 @@ function newId(): string {
   return Math.random().toString(36).slice(2);
 }
 
+/**
+ * Serializes a value for editing in the text input or display in read-only mode.
+ * Objects and arrays are formatted as JSON strings; null/undefined as ""; others as String(v).
+ */
+function serializeValue(value: unknown): string {
+  if (value == null) return "";
+  if (typeof value === "object") {
+    try {
+      return JSON.stringify(value);
+    } catch {
+      return String(value);
+    }
+  }
+  return String(value);
+}
+
+/**
+ * Parses a user-entered string back to a preserved JSON type if it represents
+ * a JSON object, array, number, boolean, or null; otherwise returns the raw string.
+ */
+function parseValue(valueStr: string): unknown {
+  const trimmed = valueStr.trim();
+  if (trimmed === "") return "";
+  if (
+    trimmed === "true" ||
+    trimmed === "false" ||
+    trimmed === "null" ||
+    (!isNaN(Number(trimmed)) && trimmed !== "") ||
+    trimmed.startsWith("{") ||
+    trimmed.startsWith("[")
+  ) {
+    try {
+      return JSON.parse(trimmed);
+    } catch {
+      return valueStr;
+    }
+  }
+  return valueStr;
+}
+
 /**
  * Extract map entries from a nested task data object at `prefix`.
  * Returns the key/value pairs of the object stored at that path.
@@ -66,7 +106,7 @@ function extractEntriesFromObject(obj: Record<string, unknown>): MapEntry[] {
   return Object.entries(obj).map(([k, v]) => ({
     id: newId(),
     key: k,
-    value: v == null ? "" : String(v),
+    value: v == null ? "" : v,
   }));
 }
 
@@ -137,22 +177,22 @@ export function KeyValueMapField({ field }: KeyValueMapFieldProps) {
   // ── Entry mutation helpers ────────────────────────────────────────────────
 
   const updateRow = React.useCallback(
-    (id: string, newKey: string, newValue: string) => {
+    (id: string, newKey: string, rawValueStr: string) => {
       const current = rowsRef.current.find((r) => r.id === id);
       if (!current) return;
 
+      const parsed = parseValue(rawValueStr);
+
       // Rename: unregister the old key before registering the new one.
       if (current.key !== newKey && current.key !== "") {
         unregister(`${field.path}.${current.key}`);
       }
       if (newKey !== "") {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        setValue(`${field.path}.${newKey}` as any, newValue, { shouldDirty: true });
+        setValue(`${field.path}.${newKey}` as any, parsed, { shouldDirty: true });
       }
 
-      setRows((prev) =>
-        prev.map((r) => (r.id === id ? { ...r, key: newKey, value: newValue } : r)),
-      );
+      setRows((prev) => prev.map((r) => (r.id === id ? { ...r, key: newKey, value: parsed } : r)));
     },
     [field.path, setValue, unregister],
   );
@@ -194,7 +234,7 @@ export function KeyValueMapField({ field }: KeyValueMapFieldProps) {
             .map((row) => (
               <div key={row.id} className="dec-map-row">
                 <span className="dec-map-key-readonly">{row.key}</span>
-                <span className="dec-map-value-readonly">{row.value}</span>
+                <span className="dec-map-value-readonly">{serializeValue(row.value)}</span>
               </div>
             ))}
         </div>
@@ -252,6 +292,7 @@ function MapRow({
   onDelete: () => void;
 }) {
   const { t } = useI18n();
+  const serializedValue = serializeValue(row.value);
 
   return (
     <div className="dec-map-row">
@@ -259,12 +300,12 @@ function MapRow({
         className="dec-map-key-input"
         value={row.key}
         placeholder={t("sidebar.map.keyPlaceholder")}
-        onChange={(e) => onUpdate(e.target.value, row.value)}
+        onChange={(e) => onUpdate(e.target.value, serializedValue)}
         aria-label={t("sidebar.map.keyLabel")}
       />
       <Input
         className="dec-map-value-input"
-        value={row.value}
+        value={serializedValue}
         placeholder={t("sidebar.map.valuePlaceholder")}
         onChange={(e) => onUpdate(row.key, e.target.value)}
         aria-label={t("sidebar.map.valueLabel")}
diff --git a/packages/open-workflow-diagram-editor/src/side-panel/forms/validation/useWorkflowErrorsForForm.ts b/packages/open-workflow-diagram-editor/src/side-panel/forms/validation/useWorkflowErrorsForForm.ts
index 5d6d308a..3510fd36 100644
--- a/packages/open-workflow-diagram-editor/src/side-panel/forms/validation/useWorkflowErrorsForForm.ts
+++ b/packages/open-workflow-diagram-editor/src/side-panel/forms/validation/useWorkflowErrorsForForm.ts
@@ -15,16 +15,19 @@
  */
 
 import * as React from "react";
-import type { UseFormSetError } from "react-hook-form";
+import type { UseFormClearErrors, UseFormSetError } from "react-hook-form";
 import { getNodeErrors, getNodeErrorField } from "@/core";
 import type { SdkError } from "@/core";
 
 /**
- * On first render (and whenever the selected task changes), maps existing
- * workflow-level SDK validation errors for the selected task into
- * react-hook-form field errors so that fields are highlighted immediately
+ * On first render (and whenever the selected task or workflow errors change),
+ * maps existing workflow-level SDK validation errors for the selected task
+ * into react-hook-form field errors so that fields are highlighted immediately
  * without the user having to touch them.
  *
+ * Stale errors from a previous run are cleared before the new set is applied,
+ * so fields whose errors disappeared are no longer highlighted.
+ *
  * Only errors that resolve to a known dot-notation field path are set on the
  * form. Errors without a resolvable field are left to the `ErrorSection`
  * above the form (which already renders them as plain text).
@@ -36,6 +39,7 @@ import type { SdkError } from "@/core";
  * @param taskReferences - Full set of known task references used by
  *                         `getNodeErrors` to attribute ownership.
  * @param setError       - `setError` from `react-hook-form`'s `useForm`.
+ * @param clearErrors    - `clearErrors` from `react-hook-form`'s `useForm`.
  * @param resetKey       - Opaque key that changes whenever the selected task
  *                         changes (typically the non-indexed node id).  The
  *                         effect re-runs whenever this value changes so errors
@@ -46,21 +50,36 @@ export function useWorkflowErrorsForForm(
   taskReference: string | undefined,
   taskReferences: Set<string>,
   setError: UseFormSetError<Record<string, unknown>>,
+  clearErrors: UseFormClearErrors<Record<string, unknown>>,
   resetKey: string | undefined,
 ): void {
+  /** Field paths seeded by the previous run of the effect. */
+  const previousFieldsRef = React.useRef<string[]>([]);
+
   React.useEffect(() => {
+    // Clear any fields that were seeded in the previous run so stale inline
+    // messages are removed before the new set is applied.
+    if (previousFieldsRef.current.length > 0) {
+      clearErrors(previousFieldsRef.current as Parameters<typeof clearErrors>[0]);
+      previousFieldsRef.current = [];
+    }
+
     if (!taskReference) return;
 
     const nodeErrors = getNodeErrors(errors, taskReference, taskReferences);
+    const seededFields: string[] = [];
 
     for (const error of nodeErrors) {
       const field = getNodeErrorField(error, taskReference);
       if (field === undefined) continue;
 
       setError(field, { type: "workflow", message: error.message });
+      seededFields.push(field);
     }
+
+    previousFieldsRef.current = seededFields;
     // resetKey changes when the selected task changes — re-run for the new task.
-    // setError is stable (from react-hook-form) and intentionally excluded.
+    // setError/clearErrors are stable (from react-hook-form) and intentionally excluded.
     // errors/taskReferences/taskReference are content-stable within a render cycle.
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [resetKey, errors, taskReference]);
diff --git a/packages/open-workflow-diagram-editor/tests/side-panel/forms/KeyValueMapField.test.tsx b/packages/open-workflow-diagram-editor/tests/side-panel/forms/KeyValueMapField.test.tsx
index 4cacefd4..3f3860e6 100644
--- a/packages/open-workflow-diagram-editor/tests/side-panel/forms/KeyValueMapField.test.tsx
+++ b/packages/open-workflow-diagram-editor/tests/side-panel/forms/KeyValueMapField.test.tsx
@@ -26,7 +26,7 @@
 
 import { describe, it, expect } from "vitest";
 import * as React from "react";
-import { render, screen } from "@testing-library/react";
+import { fireEvent, render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { FormProvider, useForm } from "react-hook-form";
 import { I18nProvider } from "@openworkflowspec/i18n";
@@ -134,4 +134,36 @@ describe("KeyValueMapField — variant-switch restore", () => {
     // 4 inputs = 2 (restored row) + 2 (new empty row)
     expect(inputs.length).toBe(4);
   });
+
+  it("preserves object-valued map entry and does not render [object Object]", async () => {
+    const complexObj = { assignedTo: "DevTeam", status: "inProgress" };
+    const { findAllByRole } = render(
+      <MapFieldWrapper presetPath="output.as" presetValue={{ issue: complexObj }} />,
+    );
+
+    const inputs = await findAllByRole("textbox");
+    const keyInput = inputs.find((el) =>
+      (el as HTMLInputElement).getAttribute("aria-label")?.toLowerCase().includes("key"),
+    );
+    const valueInput = inputs.find((el) =>
+      (el as HTMLInputElement).getAttribute("aria-label")?.toLowerCase().includes("value"),
+    );
+    expect(keyInput).toHaveValue("issue");
+    expect(valueInput).toHaveValue(JSON.stringify(complexObj));
+    expect(valueInput).not.toHaveValue("[object Object]");
+  });
+
+  it("parses JSON object string on edit and updates form value with parsed object", async () => {
+    const { findAllByRole } = render(
+      <MapFieldWrapper presetPath="output.as" presetValue={{ test: "initial" }} />,
+    );
+
+    const inputs = await findAllByRole("textbox");
+    const valueInput = inputs.find((el) =>
+      (el as HTMLInputElement).getAttribute("aria-label")?.toLowerCase().includes("value"),
+    )!;
+
+    fireEvent.change(valueInput, { target: { value: '{"assignedTo":"DevTeam"}' } });
+    expect(valueInput).toHaveValue('{"assignedTo":"DevTeam"}');
+  });
 });
diff --git a/packages/open-workflow-diagram-editor/vitest.config.ts b/packages/open-workflow-diagram-editor/vitest.config.ts
index 0abcd5e6..4de6dd75 100644
--- a/packages/open-workflow-diagram-editor/vitest.config.ts
+++ b/packages/open-workflow-diagram-editor/vitest.config.ts
@@ -73,6 +73,11 @@ export default defineConfig({
           name: "unit",
           css: true,
           include: ["tests/**/*.test.ts", "tests/**/*.test.tsx"],
+          // Some form-rendering tests take > 5 s under heavy parallel load
+          // (e.g. the full EditFormFooter suite that renders a CallHTTP task
+          // with a deep OneOf schema). 10 s is still tight enough to catch
+          // genuinely hanging tests.
+          testTimeout: 10000,
         },
       },
       {

From 620d039e63df26f6fe7c881cca7efea3d3cc7484 Mon Sep 17 00:00:00 2001
From: Handrey Cunha <handrey.cunha@gmail.com>
Date: Fri, 11 Sep 2026 11:36:49 -0400
Subject: [PATCH 3/4] Fix review comments

Signed-off-by: Handrey Cunha <handrey.cunha@gmail.com>
---
 .../src/components/ui/combobox.tsx            |  75 ++---
 .../src/components/ui/input-group.tsx         |   2 +-
 .../src/components/ui/input.tsx               |   2 +-
 .../src/components/ui/shadcn.css              |  72 -----
 .../src/components/ui/textarea.tsx            |   2 +-
 .../src/core/index.ts                         |   1 +
 .../forms => core}/schemaToFormFields.ts      |   2 +-
 .../src/core/schemaWalker.ts                  |   6 +-
 .../src/i18n/locales/en.ts                    |   1 +
 .../src/react-flow/diagram/diagramBuilder.ts  |   3 +-
 .../src/react-flow/nodes/Nodes.tsx            |   8 +-
 .../src/react-flow/nodes/taskNodeConfig.ts    |   6 +-
 .../src/side-panel/EditFormFooter.tsx         |   2 +-
 .../src/side-panel/forms/FieldControl.tsx     |   2 +-
 .../src/side-panel/forms/FormField.tsx        |  21 +-
 .../src/side-panel/forms/TaskForm.tsx         |   1 +
 .../forms/customFields/BooleanControl.tsx     |   2 +-
 .../forms/customFields/ChildTaskListField.tsx |   2 +-
 .../forms/customFields/DurationField.tsx      |   4 +-
 .../forms/customFields/EnumControl.tsx        |   4 +-
 .../forms/customFields/KeyValueMapField.tsx   |  57 +++-
 .../forms/customFields/NumberControl.tsx      |   4 +-
 .../customFields/ScrollableTextField.tsx      |   6 +-
 .../forms/customFields/StringControl.tsx      |   6 +-
 .../forms/customFields/ThenField.tsx          |  36 ++-
 .../src/side-panel/forms/forms.css            |  93 ++++++
 .../src/side-panel/forms/taskFormContext.ts   |   2 +-
 .../src/side-panel/forms/ui/combobox.tsx      | 304 ++++++++++++++++++
 .../forms/ui/input.tsx}                       |  16 +-
 .../src/side-panel/forms/ui/textarea.tsx      |  34 ++
 .../side-panel/forms/useSiblingTaskNames.ts   |  83 +++--
 .../stories/helpers.ts                        |   7 +-
 .../forms => core}/schemaToFormFields.test.ts |   8 +-
 .../diagram-editor/DiagramEditor.test.tsx     |  11 +-
 .../diagram/autoLayout.integration.test.ts    |  10 +-
 .../tests/side-panel/EditFormFooter.test.tsx  |   6 +-
 .../{flattenTask.test.ts => TaskForm.test.ts} |   0
 .../{ => customFields}/DurationField.test.ts  |   2 +-
 .../KeyValueMapField.test.tsx                 |  99 +++++-
 .../{ => customFields}/NumberControl.test.tsx |   8 +-
 .../forms/customFields/ThenField.test.tsx     |  79 +++++
 .../{ => customFields}/fieldHelpers.test.tsx  |   2 +-
 .../useWorkflowErrorsForForm.test.ts          | 104 ++++++
 .../vitest.config.ts                          |   7 +-
 44 files changed, 936 insertions(+), 266 deletions(-)
 rename packages/open-workflow-diagram-editor/src/{side-panel/forms => core}/schemaToFormFields.ts (99%)
 create mode 100644 packages/open-workflow-diagram-editor/src/side-panel/forms/forms.css
 create mode 100644 packages/open-workflow-diagram-editor/src/side-panel/forms/ui/combobox.tsx
 rename packages/open-workflow-diagram-editor/src/{components/ui/select.tsx => side-panel/forms/ui/input.tsx} (70%)
 create mode 100644 packages/open-workflow-diagram-editor/src/side-panel/forms/ui/textarea.tsx
 rename packages/open-workflow-diagram-editor/tests/{side-panel/forms => core}/schemaToFormFields.test.ts (93%)
 rename packages/open-workflow-diagram-editor/tests/side-panel/forms/{flattenTask.test.ts => TaskForm.test.ts} (100%)
 rename packages/open-workflow-diagram-editor/tests/side-panel/forms/{ => customFields}/DurationField.test.ts (95%)
 rename packages/open-workflow-diagram-editor/tests/side-panel/forms/{ => customFields}/KeyValueMapField.test.tsx (63%)
 rename packages/open-workflow-diagram-editor/tests/side-panel/forms/{ => customFields}/NumberControl.test.tsx (92%)
 create mode 100644 packages/open-workflow-diagram-editor/tests/side-panel/forms/customFields/ThenField.test.tsx
 rename packages/open-workflow-diagram-editor/tests/side-panel/forms/{ => customFields}/fieldHelpers.test.tsx (96%)
 create mode 100644 packages/open-workflow-diagram-editor/tests/side-panel/forms/validation/useWorkflowErrorsForForm.test.ts

diff --git a/packages/open-workflow-diagram-editor/src/components/ui/combobox.tsx b/packages/open-workflow-diagram-editor/src/components/ui/combobox.tsx
index 1e5d74aa..6e8ecb4e 100644
--- a/packages/open-workflow-diagram-editor/src/components/ui/combobox.tsx
+++ b/packages/open-workflow-diagram-editor/src/components/ui/combobox.tsx
@@ -22,6 +22,12 @@ import { CheckIcon, ChevronDownIcon, XIcon } from "lucide-react";
 
 import { cn } from "@/lib/utils";
 import { Button } from "@/components/ui/button";
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+} from "@/components/ui/input-group";
 
 const Combobox = ComboboxPrimitive.Root;
 
@@ -39,7 +45,7 @@ function ComboboxTrigger({ className, children, ...props }: ComboboxPrimitive.Tr
       {children}
       <ChevronDownIcon
         data-slot="combobox-trigger-icon"
-        className="dec:pointer-events-none dec:size-4 dec:shrink-0 dec:text-slate-500 dec:dark:text-slate-400"
+        className="dec:pointer-events-none dec:size-4 dec:text-slate-500 dec:dark:text-slate-400"
       />
     </ComboboxPrimitive.Trigger>
   );
@@ -49,13 +55,11 @@ function ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {
   return (
     <ComboboxPrimitive.Clear
       data-slot="combobox-clear"
-      className={cn(
-        "dec:inline-flex dec:items-center dec:justify-center dec:size-6 dec:rounded-md dec:hover:bg-transparent dec:dark:hover:bg-transparent",
-        className,
-      )}
+      render={<InputGroupButton variant="ghost" size="icon-xs" />}
+      className={cn(className)}
       {...props}
     >
-      <XIcon className="dec:pointer-events-none dec:size-3.5" />
+      <XIcon className="dec:pointer-events-none" />
     </ComboboxPrimitive.Clear>
   );
 }
@@ -72,43 +76,32 @@ function ComboboxInput({
   showClear?: boolean;
 }) {
   return (
-    <div
-      data-slot="combobox-input-wrap"
-      className={cn(
-        "dec:relative dec:flex dec:w-full dec:items-center dec:rounded-md dec:border dec:border-input dec:bg-transparent dec:shadow-xs dec:transition-[color,box-shadow] dec:outline-none",
-        "dec:dark:bg-input/30",
-        "dec:focus-within:border-ring dec:focus-within:ring-[3px] dec:focus-within:ring-ring/50",
-        "dec:has-[[aria-invalid=true]]:border-destructive dec:has-[[aria-invalid=true]]:ring-destructive/20 dec:dark:has-[[aria-invalid=true]]:ring-destructive/40",
-        disabled && "dec:pointer-events-none dec:opacity-50",
-        className,
-      )}
-    >
-      <ComboboxPrimitive.Input
-        data-slot="combobox-input"
-        className="dec:h-7 dec:min-w-0 dec:flex-1 dec:bg-transparent dec:px-2 dec:text-xs dec:outline-none dec:placeholder:text-muted-foreground dec:disabled:cursor-not-allowed"
-        disabled={disabled}
-        {...props}
-      />
-      {showClear && <ComboboxClear disabled={disabled} />}
-      {showTrigger && (
-        <ComboboxPrimitive.Trigger
-          data-slot="combobox-input-trigger"
-          tabIndex={-1}
-          disabled={disabled}
-          className="dec:flex dec:items-center dec:justify-center dec:pr-2 dec:text-slate-500 dec:dark:text-slate-400 dec:focus:outline-none"
-        >
-          <ChevronDownIcon className="dec:pointer-events-none dec:size-4 dec:shrink-0" />
-        </ComboboxPrimitive.Trigger>
-      )}
+    <InputGroup className={cn("dec:w-auto", className)}>
+      <ComboboxPrimitive.Input render={<InputGroupInput disabled={disabled} />} {...props} />
+      <InputGroupAddon align="inline-end">
+        {showTrigger && (
+          <InputGroupButton
+            size="icon-xs"
+            variant="ghost"
+            asChild
+            data-slot="input-group-button"
+            className="dec:group-has-data-[slot=combobox-clear]/input-group:hidden dec:data-pressed:bg-transparent"
+            disabled={disabled}
+          >
+            <ComboboxTrigger />
+          </InputGroupButton>
+        )}
+        {showClear && <ComboboxClear disabled={disabled} />}
+      </InputGroupAddon>
       {children}
-    </div>
+    </InputGroup>
   );
 }
 
 function ComboboxContent({
   className,
   side = "bottom",
-  sideOffset = 4,
+  sideOffset = 6,
   align = "start",
   alignOffset = 0,
   anchor,
@@ -118,12 +111,8 @@ function ComboboxContent({
     ComboboxPrimitive.Positioner.Props,
     "side" | "align" | "sideOffset" | "alignOffset" | "anchor"
   >) {
-  const [container, setContainer] = React.useState<HTMLElement | null>(null);
-  React.useEffect(() => {
-    setContainer(document.querySelector<HTMLElement>(".dec-root"));
-  }, []);
   return (
-    <ComboboxPrimitive.Portal container={container}>
+    <ComboboxPrimitive.Portal>
       <ComboboxPrimitive.Positioner
         side={side}
         sideOffset={sideOffset}
@@ -136,7 +125,7 @@ function ComboboxContent({
           data-slot="combobox-content"
           data-chips={!!anchor}
           className={cn(
-            "dec:group/combobox-content dec:relative dec:max-h-96 dec:w-(--anchor-width) dec:max-w-(--available-width) dec:min-w-[calc(var(--anchor-width)+--spacing(7))] dec:origin-(--transform-origin) dec:overflow-hidden dec:rounded-md dec:shadow-lg dec:bg-white dec:text-slate-900 dec:border dec:border-slate-200 dec:dark:bg-[#1f2937] dec:dark:text-slate-100 dec:dark:border-slate-700/50 dec:dark:shadow-[0_4px_16px_rgba(0,0,0,0.5)] dec:duration-100 dec:data-[chips=true]:min-w-(--anchor-width) dec:data-[side=bottom]:slide-in-from-top-2 dec:data-[side=left]:slide-in-from-right-2 dec:data-[side=right]:slide-in-from-left-2 dec:data-[side=top]:slide-in-from-bottom-2 dec:*:data-[slot=input-group]:m-1 dec:*:data-[slot=input-group]:mb-0 dec:*:data-[slot=input-group]:h-8 dec:*:data-[slot=input-group]:border-input/30 dec:*:data-[slot=input-group]:bg-input/30 dec:*:data-[slot=input-group]:shadow-none dec:data-open:animate-in dec:data-open:fade-in-0 dec:data-open:zoom-in-95 dec:data-closed:animate-out dec:data-closed:fade-out-0 dec:data-closed:zoom-out-95",
+            "dec:group/combobox-content dec:relative dec:max-h-96 dec:w-(--anchor-width) dec:max-w-(--available-width) dec:min-w-[calc(var(--anchor-width)+--spacing(7))] dec:origin-(--transform-origin) dec:overflow-hidden dec:rounded-md  dec:shadow-md dec:ring-1 dec:bg-white dec:text-slate-900 dec:border dec:border-slate-200 dec:shadow-lg dec:dark:bg-[#1f2937] dec:dark:text-slate-100 dec:dark:border-slate-700 dec:duration-100 dec:data-[chips=true]:min-w-(--anchor-width) dec:data-[side=bottom]:slide-in-from-top-2 dec:data-[side=left]:slide-in-from-right-2 dec:data-[side=right]:slide-in-from-left-2 dec:data-[side=top]:slide-in-from-bottom-2 dec:*:data-[slot=input-group]:m-1 dec:*:data-[slot=input-group]:mb-0 dec:*:data-[slot=input-group]:h-8 dec:*:data-[slot=input-group]:border-input/30 dec:*:data-[slot=input-group]:bg-input/30 dec:*:data-[slot=input-group]:shadow-none dec:data-open:animate-in dec:data-open:fade-in-0 dec:data-open:zoom-in-95 dec:data-closed:animate-out dec:data-closed:fade-out-0 dec:data-closed:zoom-out-95",
             className,
           )}
           {...props}
@@ -164,7 +153,7 @@ function ComboboxItem({ className, children, ...props }: ComboboxPrimitive.Item.
     <ComboboxPrimitive.Item
       data-slot="combobox-item"
       className={cn(
-        "dec:relative dec:flex dec:w-full dec:cursor-default dec:items-center dec:gap-2 dec:rounded-sm dec:py-1.5 dec:pr-8 dec:pl-2 dec:text-sm dec:outline-hidden dec:select-none dec:data-highlighted:bg-slate-100 dec:data-highlighted:text-slate-900 dec:dark:data-highlighted:bg-blue-600 dec:dark:data-highlighted:text-white dec:data-[disabled]:pointer-events-none dec:data-[disabled]:opacity-50 dec:[&_svg]:pointer-events-none dec:[&_svg]:shrink-0 dec:[&_svg:not([class*=size-])]:size-4",
+        "dec:relative dec:flex dec:w-full dec:cursor-default dec:items-center dec:gap-2 dec:rounded-sm dec:py-1.5 dec:pr-8 dec:pl-2 dec:text-sm dec:outline-hidden dec:select-none dec:data-highlighted:bg-slate-100 dec:data-highlighted:text-slate-900 dec:dark:data-highlighted:bg-slate-700 dec:dark:data-highlighted:text-white dec:data-[disabled]:pointer-events-none dec:data-[disabled]:opacity-50 dec:[&_svg]:pointer-events-none dec:[&_svg]:shrink-0 dec:[&_svg:not([class*=size-])]:size-4",
         className,
       )}
       {...props}
diff --git a/packages/open-workflow-diagram-editor/src/components/ui/input-group.tsx b/packages/open-workflow-diagram-editor/src/components/ui/input-group.tsx
index 33825aac..fcb9d060 100644
--- a/packages/open-workflow-diagram-editor/src/components/ui/input-group.tsx
+++ b/packages/open-workflow-diagram-editor/src/components/ui/input-group.tsx
@@ -146,7 +146,7 @@ function InputGroupInput({ className, ...props }: React.ComponentProps<"input">)
     <Input
       data-slot="input-group-control"
       className={cn(
-        "dec:flex-1 dec:rounded-none dec:border-0 dec:bg-transparent dec:shadow-none dec:focus-visible:ring-0 dec:focus-visible:border-transparent dec:dark:bg-transparent",
+        "dec:flex-1 dec:rounded-none dec:border-0 dec:bg-transparent dec:shadow-none dec:focus-visible:ring-0 dec:dark:bg-transparent",
         className,
       )}
       {...props}
diff --git a/packages/open-workflow-diagram-editor/src/components/ui/input.tsx b/packages/open-workflow-diagram-editor/src/components/ui/input.tsx
index 7c9003ba..c13d40b8 100644
--- a/packages/open-workflow-diagram-editor/src/components/ui/input.tsx
+++ b/packages/open-workflow-diagram-editor/src/components/ui/input.tsx
@@ -24,7 +24,7 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
       type={type}
       data-slot="input"
       className={cn(
-        "dec:h-7 dec:w-full dec:min-w-0 dec:rounded-md dec:border dec:border-input dec:bg-transparent dec:px-2 dec:py-0.5 dec:text-xs dec:shadow-xs dec:transition-[color,box-shadow] dec:outline-none dec:selection:bg-primary dec:selection:text-primary-foreground dec:file:inline-flex dec:file:h-6 dec:file:border-0 dec:file:bg-transparent dec:file:text-xs dec:file:font-medium dec:file:text-foreground dec:placeholder:text-muted-foreground dec:disabled:pointer-events-none dec:disabled:cursor-not-allowed dec:disabled:opacity-50 dec:dark:bg-input/30",
+        "dec:h-9 dec:w-full dec:min-w-0 dec:rounded-md dec:border dec:border-input dec:bg-transparent dec:px-3 dec:py-1 dec:text-base dec:shadow-xs dec:transition-[color,box-shadow] dec:outline-none dec:selection:bg-primary dec:selection:text-primary-foreground dec:file:inline-flex dec:file:h-7 dec:file:border-0 dec:file:bg-transparent dec:file:text-sm dec:file:font-medium dec:file:text-foreground dec:placeholder:text-muted-foreground dec:disabled:pointer-events-none dec:disabled:cursor-not-allowed dec:disabled:opacity-50 dec:md:text-sm dec:dark:bg-input/30",
         "dec:focus-visible:border-ring dec:focus-visible:ring-[3px] dec:focus-visible:ring-ring/50",
         "dec:aria-invalid:border-destructive dec:aria-invalid:ring-destructive/20 dec:dark:aria-invalid:ring-destructive/40",
         className,
diff --git a/packages/open-workflow-diagram-editor/src/components/ui/shadcn.css b/packages/open-workflow-diagram-editor/src/components/ui/shadcn.css
index eaf53025..1fc2d5b5 100644
--- a/packages/open-workflow-diagram-editor/src/components/ui/shadcn.css
+++ b/packages/open-workflow-diagram-editor/src/components/ui/shadcn.css
@@ -31,34 +31,10 @@
 
   --background: hsl(0 0% 100%);
 
-  --foreground: hsl(222.2 84% 4.9%);
-
   --border: hsl(220 13% 91%);
 
   --input: hsl(220 13% 91%);
 
-  --ring: #2563eb;
-
-  --muted: hsl(210 40% 96.1%);
-
-  --muted-foreground: hsl(215.4 16.3% 46.9%);
-
-  --destructive: hsl(0 84.2% 60.2%);
-
-  --destructive-foreground: hsl(210 40% 98%);
-
-  --secondary: hsl(210 40% 96.1%);
-
-  --secondary-foreground: hsl(222.2 47.4% 11.2%);
-
-  --card: hsl(0 0% 100%);
-
-  --card-foreground: hsl(222.2 84% 4.9%);
-
-  --popover: hsl(0 0% 100%);
-
-  --popover-foreground: hsl(222.2 84% 4.9%);
-
   --accent: hsl(240 4.8% 95.9%);
 
   --accent-foreground: hsl(240 5.9% 10%);
@@ -91,34 +67,10 @@
 
   --background: var(--dec-surface-dark);
 
-  --foreground: hsl(210 40% 98%);
-
   --border: var(--dec-surface-dark-line);
 
   --input: var(--dec-surface-dark-line);
 
-  --ring: #3b82f6;
-
-  --muted: var(--dec-surface-dark-elevated);
-
-  --muted-foreground: hsl(215 20.2% 65.1%);
-
-  --destructive: hsl(0 62.8% 30.6%);
-
-  --destructive-foreground: hsl(210 40% 98%);
-
-  --secondary: var(--dec-surface-dark-elevated);
-
-  --secondary-foreground: hsl(210 40% 98%);
-
-  --card: var(--dec-surface-dark-raised);
-
-  --card-foreground: hsl(210 40% 98%);
-
-  --popover: var(--dec-surface-dark-raised);
-
-  --popover-foreground: hsl(210 40% 98%);
-
   --accent: var(--dec-surface-dark-line);
 
   --accent-foreground: hsl(0 0% 98%);
@@ -151,34 +103,10 @@
 
   --color-background: var(--background);
 
-  --color-foreground: var(--foreground);
-
   --color-border: var(--border);
 
   --color-input: var(--input);
 
-  --color-ring: var(--ring);
-
-  --color-muted: var(--muted);
-
-  --color-muted-foreground: var(--muted-foreground);
-
-  --color-destructive: var(--destructive);
-
-  --color-destructive-foreground: var(--destructive-foreground);
-
-  --color-secondary: var(--secondary);
-
-  --color-secondary-foreground: var(--secondary-foreground);
-
-  --color-card: var(--card);
-
-  --color-card-foreground: var(--card-foreground);
-
-  --color-popover: var(--popover);
-
-  --color-popover-foreground: var(--popover-foreground);
-
   --color-accent: var(--accent);
 
   --color-accent-foreground: var(--accent-foreground);
diff --git a/packages/open-workflow-diagram-editor/src/components/ui/textarea.tsx b/packages/open-workflow-diagram-editor/src/components/ui/textarea.tsx
index 749205b1..ce505105 100644
--- a/packages/open-workflow-diagram-editor/src/components/ui/textarea.tsx
+++ b/packages/open-workflow-diagram-editor/src/components/ui/textarea.tsx
@@ -23,7 +23,7 @@ function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
     <textarea
       data-slot="textarea"
       className={cn(
-        "dec:flex dec:field-sizing-content dec:min-h-[60px] dec:w-full dec:rounded-md dec:border dec:border-input dec:bg-transparent dec:px-2 dec:py-1.5 dec:text-xs dec:placeholder:text-muted-foreground dec:shadow-xs dec:transition-[border-color,box-shadow] dec:outline-none dec:hover:border-ring/50 dec:focus-visible:border-ring dec:focus-visible:ring-[3px] dec:focus-visible:ring-ring/50 dec:disabled:cursor-not-allowed dec:disabled:opacity-50 dec:aria-invalid:border-destructive dec:aria-invalid:ring-[3px] dec:aria-invalid:ring-destructive/20 dec:dark:bg-input/30",
+        "dec:flex dec:field-sizing-content dec:min-h-16 dec:w-full dec:rounded-md dec:border dec:border-slate-300 dec:bg-white dec:px-3 dec:py-2 dec:text-base dec:text-slate-900 dec:placeholder:text-slate-400 dec:shadow-xs dec:transition-[border-color,box-shadow] dec:outline-none dec:hover:border-slate-400 dec:focus-visible:border-blue-500 dec:focus-visible:ring-[3px] dec:focus-visible:ring-blue-500/20 dec:disabled:cursor-not-allowed dec:disabled:opacity-50 dec:aria-invalid:border-red-500 dec:aria-invalid:ring-[3px] dec:aria-invalid:ring-red-500/20 dec:md:text-sm dec:dark:border-slate-600 dec:dark:bg-[#1f2937] dec:dark:text-slate-100 dec:dark:placeholder:text-slate-400 dec:dark:hover:border-slate-500 dec:dark:focus-visible:border-blue-400 dec:dark:focus-visible:ring-blue-400/20",
         className,
       )}
       {...props}
diff --git a/packages/open-workflow-diagram-editor/src/core/index.ts b/packages/open-workflow-diagram-editor/src/core/index.ts
index 92698113..015e1470 100644
--- a/packages/open-workflow-diagram-editor/src/core/index.ts
+++ b/packages/open-workflow-diagram-editor/src/core/index.ts
@@ -25,5 +25,6 @@ export * from "./mermaidExport";
 export * from "./schemaFilter";
 export * from "./schemaWalker";
 export * from "./structuralEqual";
+export * from "./schemaToFormFields";
 /* TEMPORARY — remove with the workaround; see the revert checklist in workflowSdk.ts. */
 export * from "./specWorkarounds";
diff --git a/packages/open-workflow-diagram-editor/src/side-panel/forms/schemaToFormFields.ts b/packages/open-workflow-diagram-editor/src/core/schemaToFormFields.ts
similarity index 99%
rename from packages/open-workflow-diagram-editor/src/side-panel/forms/schemaToFormFields.ts
rename to packages/open-workflow-diagram-editor/src/core/schemaToFormFields.ts
index 326426c0..f3b23a85 100644
--- a/packages/open-workflow-diagram-editor/src/side-panel/forms/schemaToFormFields.ts
+++ b/packages/open-workflow-diagram-editor/src/core/schemaToFormFields.ts
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import type { DereferencedSchema } from "@/core/schemaFilter";
+import type { DereferencedSchema } from "./schemaFilter";
 
 /**
  * A single form field descriptor produced by walking a task's JSON Schema.
diff --git a/packages/open-workflow-diagram-editor/src/core/schemaWalker.ts b/packages/open-workflow-diagram-editor/src/core/schemaWalker.ts
index c1f7230c..245acda9 100644
--- a/packages/open-workflow-diagram-editor/src/core/schemaWalker.ts
+++ b/packages/open-workflow-diagram-editor/src/core/schemaWalker.ts
@@ -15,10 +15,8 @@
  */
 
 import { GraphNodeType } from "@openworkflowspec/sdk";
-import { CATCH_CONTAINER_NODE_TYPE } from "@/react-flow/nodes/taskNodeConfig";
 import { getSchemaForDefinition } from "./schemaFilter";
-import { schemaToFormFields } from "@/side-panel/forms/schemaToFormFields";
-import type { FormFieldDescriptor } from "@/side-panel/forms/schemaToFormFields";
+import { schemaToFormFields, FormFieldDescriptor } from "./schemaToFormFields";
 
 // ---------------------------------------------------------------------------
 // Node-type → schema definition-name mapping
@@ -27,6 +25,8 @@ import type { FormFieldDescriptor } from "@/side-panel/forms/schemaToFormFields"
 // Catch nodes share the tryTask schema because `try.catch` is inlined there.
 // ---------------------------------------------------------------------------
 
+export const CATCH_CONTAINER_NODE_TYPE = "catch-container";
+
 const NODE_TYPE_TO_DEF: Readonly<Record<string, string>> = {
   [GraphNodeType.Call]: "callTask",
   [GraphNodeType.Do]: "doTask",
diff --git a/packages/open-workflow-diagram-editor/src/i18n/locales/en.ts b/packages/open-workflow-diagram-editor/src/i18n/locales/en.ts
index 04c68147..ffabb9a5 100644
--- a/packages/open-workflow-diagram-editor/src/i18n/locales/en.ts
+++ b/packages/open-workflow-diagram-editor/src/i18n/locales/en.ts
@@ -47,6 +47,7 @@ export const en = {
   "aria.minimap.hide": "Hide minimap",
   "aria.minimap.show": "Show minimap",
   "aria.badge": "Badge:",
+  "aria.help": "Help",
   "aria.panel.nodeDetails": "Node details panel",
   "aria.panel.workflowInfo": "Workflow information panel",
   "aria.panel.content": "Panel content",
diff --git a/packages/open-workflow-diagram-editor/src/react-flow/diagram/diagramBuilder.ts b/packages/open-workflow-diagram-editor/src/react-flow/diagram/diagramBuilder.ts
index 74e736bb..f5923ecb 100644
--- a/packages/open-workflow-diagram-editor/src/react-flow/diagram/diagramBuilder.ts
+++ b/packages/open-workflow-diagram-editor/src/react-flow/diagram/diagramBuilder.ts
@@ -17,6 +17,7 @@
 import * as RF from "@xyflow/react";
 import {
   buildFlatGraph,
+  CATCH_CONTAINER_NODE_TYPE,
   getErrorTaskReferences,
   getTaskReferences,
   type SdkError,
@@ -25,7 +26,7 @@ import { BaseNodeData, ReactFlowNodeTypes } from "../nodes/Nodes";
 import { BaseEdgeData, EdgeTypes } from "../edges/Edges";
 import * as sdk from "@openworkflowspec/sdk";
 import { getNodeSize } from "./autoLayout";
-import { CATCH_CONTAINER_NODE_TYPE, isTerminalNodeType } from "../nodes/taskNodeConfig";
+import { isTerminalNodeType } from "../nodes/taskNodeConfig";
 
 export type ReactFlowGraph = {
   nodes: RF.Node[];
diff --git a/packages/open-workflow-diagram-editor/src/react-flow/nodes/Nodes.tsx b/packages/open-workflow-diagram-editor/src/react-flow/nodes/Nodes.tsx
index c3470a6e..8255c18c 100644
--- a/packages/open-workflow-diagram-editor/src/react-flow/nodes/Nodes.tsx
+++ b/packages/open-workflow-diagram-editor/src/react-flow/nodes/Nodes.tsx
@@ -19,7 +19,6 @@ import { GraphNodeType, type Specification } from "@openworkflowspec/sdk";
 import * as RF from "@xyflow/react";
 import { useI18n } from "@openworkflowspec/i18n";
 import {
-  CATCH_CONTAINER_NODE_TYPE,
   type ContainerNodeType,
   type LeafNodeType,
   type TerminalNodeType,
@@ -27,7 +26,12 @@ import {
   containerNodeConfigMap,
   terminalNodeConfigMap,
 } from "./taskNodeConfig";
-import { getCallSubType, getListenSubType, getRunSubType } from "../../core";
+import {
+  CATCH_CONTAINER_NODE_TYPE,
+  getCallSubType,
+  getListenSubType,
+  getRunSubType,
+} from "../../core";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { CircleAlert } from "lucide-react";
 
diff --git a/packages/open-workflow-diagram-editor/src/react-flow/nodes/taskNodeConfig.ts b/packages/open-workflow-diagram-editor/src/react-flow/nodes/taskNodeConfig.ts
index 192a2817..a05f5ff3 100644
--- a/packages/open-workflow-diagram-editor/src/react-flow/nodes/taskNodeConfig.ts
+++ b/packages/open-workflow-diagram-editor/src/react-flow/nodes/taskNodeConfig.ts
@@ -34,6 +34,9 @@ import {
 } from "lucide-react";
 import type { ComponentType } from "react";
 import type { TranslationKeys } from "../../i18n/locales/en";
+import { CATCH_CONTAINER_NODE_TYPE } from "@/core";
+
+export { CATCH_CONTAINER_NODE_TYPE };
 
 export interface TaskNodeConfig {
   color: string;
@@ -46,9 +49,6 @@ export interface TerminalNodeConfig {
   labelKey: TranslationKeys;
 }
 
-/* Custom react-flow only node type for catch nodes that contain child nodes (i.e are containers) (the sdk uses GraphNodeType.Catch for both leaf and container catch nodes) */
-export const CATCH_CONTAINER_NODE_TYPE = "catch-container";
-
 export type TerminalNodeType = typeof GraphNodeType.Entry | typeof GraphNodeType.Exit;
 
 export type ContainerNodeType =
diff --git a/packages/open-workflow-diagram-editor/src/side-panel/EditFormFooter.tsx b/packages/open-workflow-diagram-editor/src/side-panel/EditFormFooter.tsx
index 0198bd1d..c4609f07 100644
--- a/packages/open-workflow-diagram-editor/src/side-panel/EditFormFooter.tsx
+++ b/packages/open-workflow-diagram-editor/src/side-panel/EditFormFooter.tsx
@@ -88,7 +88,7 @@ export function EditFormFooter({ node }: { node: RF.Node<BaseNodeData> }) {
   const changedCount = Object.keys(flattenTask(dirtyFields)).length;
 
   const handleCancel = () => {
-    form.reset();
+    form.reset(task as unknown as Record<string, unknown>);
     setAppliedNodeId(null);
   };
 
diff --git a/packages/open-workflow-diagram-editor/src/side-panel/forms/FieldControl.tsx b/packages/open-workflow-diagram-editor/src/side-panel/forms/FieldControl.tsx
index cb6f974d..fc269ce8 100644
--- a/packages/open-workflow-diagram-editor/src/side-panel/forms/FieldControl.tsx
+++ b/packages/open-workflow-diagram-editor/src/side-panel/forms/FieldControl.tsx
@@ -15,7 +15,7 @@
  */
 
 import * as React from "react";
-import type { FormFieldDescriptor } from "./schemaToFormFields";
+import type { FormFieldDescriptor } from "../../core/schemaToFormFields";
 import {
   StringControl,
   NumberControl,
diff --git a/packages/open-workflow-diagram-editor/src/side-panel/forms/FormField.tsx b/packages/open-workflow-diagram-editor/src/side-panel/forms/FormField.tsx
index f468582f..95771d4f 100644
--- a/packages/open-workflow-diagram-editor/src/side-panel/forms/FormField.tsx
+++ b/packages/open-workflow-diagram-editor/src/side-panel/forms/FormField.tsx
@@ -17,8 +17,9 @@
 import * as React from "react";
 import { HelpCircle, ChevronDown, ChevronRight } from "lucide-react";
 import { useFormContext } from "react-hook-form";
+import { useI18n } from "@openworkflowspec/i18n";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
-import type { FormFieldDescriptor, ObjectField, OneOfField } from "./schemaToFormFields";
+import type { FormFieldDescriptor, ObjectField, OneOfField } from "../../core/schemaToFormFields";
 import { FieldControl } from "./FieldControl";
 import { useTaskFormContext, filterReadOnlyFields, getNestedValue } from "./taskFormContext";
 import {
@@ -27,7 +28,7 @@ import {
   ComboboxInput,
   ComboboxItem,
   ComboboxList,
-} from "@/components/ui/combobox";
+} from "./ui/combobox";
 import { KeyValueMapField } from "./customFields/KeyValueMapField";
 
 // ---------------------------------------------------------------------------
@@ -84,6 +85,7 @@ function FieldLabel({
   required: boolean;
   description?: string;
 }) {
+  const { t } = useI18n();
   return (
     <div className="dec-form-field-label-row">
       <label htmlFor={htmlFor} className="dec-form-field-label">
@@ -102,7 +104,7 @@ function FieldLabel({
             <button
               type="button"
               className="dec-form-field-help"
-              aria-label={`Help: ${label}`}
+              aria-label={`${t("aria.help")}: ${label}`}
               tabIndex={0}
             >
               <HelpCircle className="dec-form-field-help-icon" aria-hidden="true" />
@@ -122,6 +124,7 @@ function FieldLabel({
 function ObjectFieldRow({ field }: { field: ObjectField }) {
   const [expanded, setExpanded] = React.useState(true);
   const { isReadOnly, taskData } = useTaskFormContext();
+  const { t } = useI18n();
 
   const visibleChildren = isReadOnly
     ? filterReadOnlyFields(field.children, taskData)
@@ -166,7 +169,7 @@ function ObjectFieldRow({ field }: { field: ObjectField }) {
               <button
                 type="button"
                 className="dec-form-field-help"
-                aria-label={`Help: ${field.label}`}
+                aria-label={`${t("aria.help")}: ${field.label}`}
               >
                 <HelpCircle className="dec-form-field-help-icon" aria-hidden="true" />
               </button>
@@ -206,9 +209,14 @@ function OneOfFieldRow({ field }: { field: OneOfField }) {
   const [selectedVariantIdx, setSelectedVariantIdx] = React.useState(derivedIdx);
 
   // Re-sync when the selected task changes (taskData identity changes).
-  React.useEffect(() => {
+  // Using a during-render state update avoids the set-state-in-effect lint rule
+  // while preserving the correct behaviour: when derivedIdx changes (i.e. a
+  // different task is selected) the variant resets before the next paint.
+  const [prevDerivedIdx, setPrevDerivedIdx] = React.useState(derivedIdx);
+  if (derivedIdx !== prevDerivedIdx) {
     setSelectedVariantIdx(derivedIdx);
-  }, [derivedIdx]);
+    setPrevDerivedIdx(derivedIdx);
+  }
 
   // Per-variant saved values — preserves field data when switching variants
   // and then switching back, so the user does not have to re-type values.
@@ -294,6 +302,7 @@ function OneOfFieldRow({ field }: { field: OneOfField }) {
           >
             <ComboboxInput
               readOnly
+              disabled={isReadOnly}
               value={variantLabels[selectedVariantIdx] ?? ""}
               aria-label={field.label}
               showClear={false}
diff --git a/packages/open-workflow-diagram-editor/src/side-panel/forms/TaskForm.tsx b/packages/open-workflow-diagram-editor/src/side-panel/forms/TaskForm.tsx
index e451db18..6c3de00c 100644
--- a/packages/open-workflow-diagram-editor/src/side-panel/forms/TaskForm.tsx
+++ b/packages/open-workflow-diagram-editor/src/side-panel/forms/TaskForm.tsx
@@ -15,6 +15,7 @@
  */
 
 import * as React from "react";
+import "./forms.css";
 import type { Specification } from "@openworkflowspec/sdk";
 import { useI18n } from "@openworkflowspec/i18n";
 import { getFormFieldsForNodeType, structuralEqual } from "@/core";
diff --git a/packages/open-workflow-diagram-editor/src/side-panel/forms/customFields/BooleanControl.tsx b/packages/open-workflow-diagram-editor/src/side-panel/forms/customFields/BooleanControl.tsx
index dcfea4a5..e13ee72a 100644
--- a/packages/open-workflow-diagram-editor/src/side-panel/forms/customFields/BooleanControl.tsx
+++ b/packages/open-workflow-diagram-editor/src/side-panel/forms/customFields/BooleanControl.tsx
@@ -17,7 +17,7 @@
 import * as React from "react";
 import { Controller, useFormContext } from "react-hook-form";
 import { Switch } from "@/components/ui/switch";
-import type { BooleanField } from "../schemaToFormFields";
+import type { BooleanField } from "../../../core/schemaToFormFields";
 import { useTaskFormContext } from "../taskFormContext";
 
 // ---------------------------------------------------------------------------
diff --git a/packages/open-workflow-diagram-editor/src/side-panel/forms/customFields/ChildTaskListField.tsx b/packages/open-workflow-diagram-editor/src/side-panel/forms/customFields/ChildTaskListField.tsx
index 08c3835c..cd5f7c3f 100644
--- a/packages/open-workflow-diagram-editor/src/side-panel/forms/customFields/ChildTaskListField.tsx
+++ b/packages/open-workflow-diagram-editor/src/side-panel/forms/customFields/ChildTaskListField.tsx
@@ -16,7 +16,7 @@
 
 import * as React from "react";
 import { Controller, useFormContext } from "react-hook-form";
-import type { ChildTaskListField as ChildTaskListFieldDescriptor } from "../schemaToFormFields";
+import type { ChildTaskListField as ChildTaskListFieldDescriptor } from "../../../core/schemaToFormFields";
 
 // ---------------------------------------------------------------------------
 // ChildTaskListField — read-only list of child task names
diff --git a/packages/open-workflow-diagram-editor/src/side-panel/forms/customFields/DurationField.tsx b/packages/open-workflow-diagram-editor/src/side-panel/forms/customFields/DurationField.tsx
index e4cddf03..f3b8b0cf 100644
--- a/packages/open-workflow-diagram-editor/src/side-panel/forms/customFields/DurationField.tsx
+++ b/packages/open-workflow-diagram-editor/src/side-panel/forms/customFields/DurationField.tsx
@@ -17,8 +17,8 @@
 import * as React from "react";
 import { Controller, useFormContext } from "react-hook-form";
 import { useI18n } from "@openworkflowspec/i18n";
-import { Input } from "@/components/ui/input";
-import type { DurationField as DurationFieldDescriptor } from "../schemaToFormFields";
+import { Input } from "../ui/input";
+import type { DurationField as DurationFieldDescriptor } from "../../../core/schemaToFormFields";
 import { useTaskFormContext } from "../taskFormContext";
 import { useFieldError, FieldWithError } from "./fieldHelpers";
 
diff --git a/packages/open-workflow-diagram-editor/src/side-panel/forms/customFields/EnumControl.tsx b/packages/open-workflow-diagram-editor/src/side-panel/forms/customFields/EnumControl.tsx
index f31dd758..3ce198b5 100644
--- a/packages/open-workflow-diagram-editor/src/side-panel/forms/customFields/EnumControl.tsx
+++ b/packages/open-workflow-diagram-editor/src/side-panel/forms/customFields/EnumControl.tsx
@@ -23,8 +23,8 @@ import {
   ComboboxInput,
   ComboboxItem,
   ComboboxList,
-} from "@/components/ui/combobox";
-import type { EnumField } from "../schemaToFormFields";
+} from "../ui/combobox";
+import type { EnumField } from "../../../core/schemaToFormFields";
 import { useTaskFormContext } from "../taskFormContext";
 import { useFieldError, FieldWithError } from "./fieldHelpers";
 
diff --git a/packages/open-workflow-diagram-editor/src/side-panel/forms/customFields/KeyValueMapField.tsx b/packages/open-workflow-diagram-editor/src/side-panel/forms/customFields/KeyValueMapField.tsx
index 335f1cd4..f381bd2f 100644
--- a/packages/open-workflow-diagram-editor/src/side-panel/forms/customFields/KeyValueMapField.tsx
+++ b/packages/open-workflow-diagram-editor/src/side-panel/forms/customFields/KeyValueMapField.tsx
@@ -15,11 +15,11 @@
  */
 
 import * as React from "react";
-import { useFormContext, type UseFormReturn } from "react-hook-form";
+import { useFormContext, useFormState, type UseFormReturn } from "react-hook-form";
 import { X, Plus } from "lucide-react";
 import { useI18n } from "@openworkflowspec/i18n";
-import { Input } from "@/components/ui/input";
-import type { MapField } from "../schemaToFormFields";
+import { Input } from "../ui/input";
+import type { MapField } from "../../../core/schemaToFormFields";
 import { useTaskFormContext } from "../taskFormContext";
 
 // ---------------------------------------------------------------------------
@@ -136,7 +136,7 @@ export function KeyValueMapField({ field }: KeyValueMapFieldProps) {
   // react-hook-form's path inference over Record<string,unknown> can produce
   // overly-narrow types for runtime-composed key strings.
   const form = useFormContext() as UseFormReturn<Record<string, unknown>>;
-  const { setValue, unregister, getValues } = form;
+  const { setValue, getValues } = form;
 
   // ── Initialise rows ───────────────────────────────────────────────────────
   // Prefer the current RHF value (an object restored by a variant switch) over
@@ -158,14 +158,32 @@ export function KeyValueMapField({ field }: KeyValueMapFieldProps) {
     return extractEntries(taskData, field.path);
   });
 
-  // Re-sync rows whenever the task data changes externally (undo/redo, node
-  // switch). `taskData` identity changes whenever TaskForm resets the form.
-  const prevTaskDataRef = React.useRef(taskData);
+  // Re-sync rows on any form reset (node switch, undo/redo, or cancel).
+  // `defaultValues` identity changes whenever form.reset(values) is called,
+  // which covers node switches and cancel (EditFormFooter passes the original
+  // task snapshot). Reading the map value directly from defaultValues is the
+  // most reliable signal because it is independent of taskData identity.
+  const { defaultValues } = useFormState({ control: form.control });
+  const prevDefaultValuesRef = React.useRef(defaultValues);
   React.useEffect(() => {
-    if (prevTaskDataRef.current === taskData) return;
-    prevTaskDataRef.current = taskData;
-    setRows(extractEntries(taskData, field.path));
-  }, [taskData, field.path]);
+    if (prevDefaultValuesRef.current === defaultValues) return;
+    prevDefaultValuesRef.current = defaultValues;
+    // Walk the dot-notation path inside the nested defaultValues object.
+    const parts = field.path ? field.path.split(".") : [];
+    let node: unknown = defaultValues;
+    for (const part of parts) {
+      if (node == null || typeof node !== "object" || Array.isArray(node)) {
+        node = undefined;
+        break;
+      }
+      node = (node as Record<string, unknown>)[part];
+    }
+    if (node != null && typeof node === "object" && !Array.isArray(node)) {
+      setRows(extractEntriesFromObject(node as Record<string, unknown>));
+    } else {
+      setRows([]);
+    }
+  }, [defaultValues, field.path]);
 
   // Keep a stable ref to rows so event handlers can read the current snapshot
   // without needing rows as a dependency (avoids stale-closure issues).
@@ -176,6 +194,13 @@ export function KeyValueMapField({ field }: KeyValueMapFieldProps) {
 
   // ── Entry mutation helpers ────────────────────────────────────────────────
 
+  const clearKey = React.useCallback(
+    (key: string) => {
+      setValue(`${field.path}.${key}` as never, undefined as never, { shouldDirty: true });
+    },
+    [field.path, setValue],
+  );
+
   const updateRow = React.useCallback(
     (id: string, newKey: string, rawValueStr: string) => {
       const current = rowsRef.current.find((r) => r.id === id);
@@ -183,9 +208,9 @@ export function KeyValueMapField({ field }: KeyValueMapFieldProps) {
 
       const parsed = parseValue(rawValueStr);
 
-      // Rename: unregister the old key before registering the new one.
+      // Rename: clear the old key before registering the new one.
       if (current.key !== newKey && current.key !== "") {
-        unregister(`${field.path}.${current.key}`);
+        clearKey(current.key);
       }
       if (newKey !== "") {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -194,7 +219,7 @@ export function KeyValueMapField({ field }: KeyValueMapFieldProps) {
 
       setRows((prev) => prev.map((r) => (r.id === id ? { ...r, key: newKey, value: parsed } : r)));
     },
-    [field.path, setValue, unregister],
+    [field.path, setValue, clearKey],
   );
 
   const addRow = React.useCallback(() => {
@@ -205,11 +230,11 @@ export function KeyValueMapField({ field }: KeyValueMapFieldProps) {
     (id: string) => {
       const current = rowsRef.current.find((r) => r.id === id);
       if (current?.key) {
-        unregister(`${field.path}.${current.key}`);
+        clearKey(current.key);
       }
       setRows((prev) => prev.filter((r) => r.id !== id));
     },
-    [field.path, unregister],
+    [clearKey],
   );
 
   // ── Count badge ───────────────────────────────────────────────────────────
diff --git a/packages/open-workflow-diagram-editor/src/side-panel/forms/customFields/NumberControl.tsx b/packages/open-workflow-diagram-editor/src/side-panel/forms/customFields/NumberControl.tsx
index a619c930..25f87ccf 100644
--- a/packages/open-workflow-diagram-editor/src/side-panel/forms/customFields/NumberControl.tsx
+++ b/packages/open-workflow-diagram-editor/src/side-panel/forms/customFields/NumberControl.tsx
@@ -16,8 +16,8 @@
 
 import * as React from "react";
 import { Controller, useFormContext } from "react-hook-form";
-import { Input } from "@/components/ui/input";
-import type { NumberField } from "../schemaToFormFields";
+import { Input } from "../ui/input";
+import type { NumberField } from "../../../core/schemaToFormFields";
 import { useTaskFormContext } from "../taskFormContext";
 import { useFieldError, FieldWithError } from "./fieldHelpers";
 
diff --git a/packages/open-workflow-diagram-editor/src/side-panel/forms/customFields/ScrollableTextField.tsx b/packages/open-workflow-diagram-editor/src/side-panel/forms/customFields/ScrollableTextField.tsx
index c346e3ef..ee27c2ea 100644
--- a/packages/open-workflow-diagram-editor/src/side-panel/forms/customFields/ScrollableTextField.tsx
+++ b/packages/open-workflow-diagram-editor/src/side-panel/forms/customFields/ScrollableTextField.tsx
@@ -16,8 +16,8 @@
 
 import * as React from "react";
 import { Controller, useFormContext } from "react-hook-form";
-import { Textarea } from "@/components/ui/textarea";
-import type { StringField } from "../schemaToFormFields";
+import { Textarea } from "../ui/textarea";
+import type { StringField } from "../../../core/schemaToFormFields";
 import { useTaskFormContext } from "../taskFormContext";
 import { useFieldError, FieldWithError } from "./fieldHelpers";
 
@@ -50,7 +50,7 @@ export function ScrollableTextField({ field, id }: ScrollableTextFieldProps) {
           <Textarea
             {...rhfField}
             id={id}
-            value={rhfField.value == null ? "" : String(rhfField.value)}
+            value={typeof rhfField.value === "string" ? rhfField.value : ""}
             disabled={isReadOnly}
             readOnly={isReadOnly}
             placeholder={placeholder}
diff --git a/packages/open-workflow-diagram-editor/src/side-panel/forms/customFields/StringControl.tsx b/packages/open-workflow-diagram-editor/src/side-panel/forms/customFields/StringControl.tsx
index 1d0cf91c..26e5034b 100644
--- a/packages/open-workflow-diagram-editor/src/side-panel/forms/customFields/StringControl.tsx
+++ b/packages/open-workflow-diagram-editor/src/side-panel/forms/customFields/StringControl.tsx
@@ -16,8 +16,8 @@
 
 import * as React from "react";
 import { Controller, useFormContext } from "react-hook-form";
-import { Input } from "@/components/ui/input";
-import type { StringField } from "../schemaToFormFields";
+import { Input } from "../ui/input";
+import type { StringField } from "../../../core/schemaToFormFields";
 import { useTaskFormContext } from "../taskFormContext";
 import { useFieldError, FieldWithError } from "./fieldHelpers";
 import { ScrollableTextField } from "./ScrollableTextField";
@@ -52,7 +52,7 @@ export function StringControl({ field, id }: StringControlProps) {
           <Input
             {...rhfField}
             id={id}
-            value={rhfField.value == null ? "" : String(rhfField.value)}
+            value={typeof rhfField.value === "string" ? rhfField.value : ""}
             disabled={isReadOnly}
             readOnly={isReadOnly}
             placeholder={placeholder}
diff --git a/packages/open-workflow-diagram-editor/src/side-panel/forms/customFields/ThenField.tsx b/packages/open-workflow-diagram-editor/src/side-panel/forms/customFields/ThenField.tsx
index 70c7f424..4fe972e2 100644
--- a/packages/open-workflow-diagram-editor/src/side-panel/forms/customFields/ThenField.tsx
+++ b/packages/open-workflow-diagram-editor/src/side-panel/forms/customFields/ThenField.tsx
@@ -20,13 +20,14 @@ import { useI18n } from "@openworkflowspec/i18n";
 import {
   Combobox,
   ComboboxContent,
+  ComboboxGroup,
   ComboboxInput,
   ComboboxItem,
   ComboboxLabel,
   ComboboxList,
   ComboboxSeparator,
-} from "@/components/ui/combobox";
-import type { ThenField as ThenFieldDescriptor } from "../schemaToFormFields";
+} from "../ui/combobox";
+import type { ThenField as ThenFieldDescriptor } from "../../../core/schemaToFormFields";
 import { useTaskFormContext } from "../taskFormContext";
 import { useFieldError, FieldWithError } from "./fieldHelpers";
 
@@ -61,7 +62,7 @@ export function ThenField({ field, id }: ThenFieldProps) {
             <ComboboxInput
               id={id}
               readOnly
-              value={(rhfField.value as string) ?? "—"}
+              value={(rhfField.value as string) || "—"}
               onBlur={rhfField.onBlur}
               name={rhfField.name}
               aria-label={field.label}
@@ -71,21 +72,26 @@ export function ThenField({ field, id }: ThenFieldProps) {
             />
             <ComboboxContent>
               <ComboboxList>
-                <ComboboxLabel>{t("sidebar.then.flowDirectiveGroup")}</ComboboxLabel>
-                {FLOW_DIRECTIVES.map((directive) => (
-                  <ComboboxItem key={directive} value={directive}>
-                    {directive}
-                  </ComboboxItem>
-                ))}
+                <ComboboxItem value="">—</ComboboxItem>
+                <ComboboxGroup>
+                  <ComboboxLabel>{t("sidebar.then.flowDirectiveGroup")}</ComboboxLabel>
+                  {FLOW_DIRECTIVES.map((directive) => (
+                    <ComboboxItem key={directive} value={directive}>
+                      {directive}
+                    </ComboboxItem>
+                  ))}
+                </ComboboxGroup>
                 {siblingTaskNames.length > 0 && (
                   <>
                     <ComboboxSeparator />
-                    <ComboboxLabel>{t("sidebar.then.taskGroup")}</ComboboxLabel>
-                    {siblingTaskNames.map((name) => (
-                      <ComboboxItem key={name} value={name}>
-                        {name}
-                      </ComboboxItem>
-                    ))}
+                    <ComboboxGroup>
+                      <ComboboxLabel>{t("sidebar.then.taskGroup")}</ComboboxLabel>
+                      {siblingTaskNames.map((name) => (
+                        <ComboboxItem key={name} value={name}>
+                          {name}
+                        </ComboboxItem>
+                      ))}
+                    </ComboboxGroup>
                   </>
                 )}
               </ComboboxList>
diff --git a/packages/open-workflow-diagram-editor/src/side-panel/forms/forms.css b/packages/open-workflow-diagram-editor/src/side-panel/forms/forms.css
new file mode 100644
index 00000000..c0971280
--- /dev/null
+++ b/packages/open-workflow-diagram-editor/src/side-panel/forms/forms.css
@@ -0,0 +1,93 @@
+/*
+ * Copyright 2021-Present The Open Workflow Specification Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* Form-only shadcn tokens. Keep these out of the generated UI primitives. */
+@theme inline {
+  --color-foreground: var(--foreground);
+  --color-ring: var(--ring);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+}
+
+.dec-task-form {
+  --form-control-bg: #ffffff;
+  --form-control-text: #1f2937;
+  --form-control-border: #cbd5e1;
+  --form-control-border-hover: #94a3b8;
+  --foreground: hsl(222.2 84% 4.9%);
+  --ring: #2563eb;
+  --muted: hsl(210 40% 96.1%);
+  --muted-foreground: hsl(215.4 16.3% 46.9%);
+  --destructive: hsl(0 84.2% 60.2%);
+  --destructive-foreground: hsl(210 40% 98%);
+  --secondary: hsl(210 40% 96.1%);
+  --secondary-foreground: hsl(222.2 47.4% 11.2%);
+  --card: hsl(0 0% 100%);
+  --card-foreground: hsl(222.2 84% 4.9%);
+  --popover: hsl(0 0% 100%);
+  --popover-foreground: hsl(222.2 84% 4.9%);
+}
+
+.dec-root.dark .dec-task-form {
+  --form-control-bg: #1f2937;
+  --form-control-text: #f1f5f9;
+  --form-control-border: #475569;
+  --form-control-border-hover: #64748b;
+  --foreground: hsl(210 40% 98%);
+  --ring: #3b82f6;
+  --muted: var(--dec-surface-dark-elevated);
+  --muted-foreground: hsl(215 20.2% 65.1%);
+  --destructive: hsl(0 62.8% 30.6%);
+  --destructive-foreground: hsl(210 40% 98%);
+  --secondary: var(--dec-surface-dark-elevated);
+  --secondary-foreground: hsl(210 40% 98%);
+  --card: var(--dec-surface-dark-raised);
+  --card-foreground: hsl(210 40% 98%);
+  --popover: var(--dec-surface-dark-raised);
+  --popover-foreground: hsl(210 40% 98%);
+}
+
+/* Keep embedded-host input rules from overriding the form controls. */
+.dec-task-form input[data-slot="input"],
+.dec-task-form textarea[data-slot="textarea"],
+.dec-task-form [data-slot="combobox-input-wrap"] {
+  border: 1px solid var(--form-control-border) !important;
+  background-color: transparent !important;
+  color: var(--form-control-text) !important;
+}
+
+.dec-task-form input[data-slot="input"]:hover,
+.dec-task-form textarea[data-slot="textarea"]:hover,
+.dec-task-form [data-slot="combobox-input-wrap"]:hover {
+  border-color: var(--form-control-border-hover) !important;
+}
+
+.dec-task-form input[data-slot="input"]:focus-visible,
+.dec-task-form textarea[data-slot="textarea"]:focus-visible,
+.dec-task-form [data-slot="combobox-input-wrap"]:focus-visible,
+.dec-task-form [data-slot="combobox-input-wrap"]:focus-within {
+  border-color: var(--ring) !important;
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 50%, transparent) !important;
+  outline: none !important;
+}
diff --git a/packages/open-workflow-diagram-editor/src/side-panel/forms/taskFormContext.ts b/packages/open-workflow-diagram-editor/src/side-panel/forms/taskFormContext.ts
index 253520cb..37754509 100644
--- a/packages/open-workflow-diagram-editor/src/side-panel/forms/taskFormContext.ts
+++ b/packages/open-workflow-diagram-editor/src/side-panel/forms/taskFormContext.ts
@@ -15,7 +15,7 @@
  */
 
 import * as React from "react";
-import type { FormFieldDescriptor } from "./schemaToFormFields";
+import type { FormFieldDescriptor } from "../../core/schemaToFormFields";
 
 // ---------------------------------------------------------------------------
 // TaskFormContext
diff --git a/packages/open-workflow-diagram-editor/src/side-panel/forms/ui/combobox.tsx b/packages/open-workflow-diagram-editor/src/side-panel/forms/ui/combobox.tsx
new file mode 100644
index 00000000..cb568165
--- /dev/null
+++ b/packages/open-workflow-diagram-editor/src/side-panel/forms/ui/combobox.tsx
@@ -0,0 +1,304 @@
+/*
+ * Copyright 2021-Present The Open Workflow Specification Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+"use client";
+
+import * as React from "react";
+import { Combobox as ComboboxPrimitive } from "@base-ui/react";
+import { CheckIcon, ChevronDownIcon, XIcon } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+
+const Combobox = ComboboxPrimitive.Root;
+
+function ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {
+  return <ComboboxPrimitive.Value data-slot="combobox-value" {...props} />;
+}
+
+function ComboboxTrigger({ className, children, ...props }: ComboboxPrimitive.Trigger.Props) {
+  return (
+    <ComboboxPrimitive.Trigger
+      data-slot="combobox-trigger"
+      className={cn("dec:[&_svg:not([class*=size-])]:size-4", className)}
+      {...props}
+    >
+      {children}
+      <ChevronDownIcon
+        data-slot="combobox-trigger-icon"
+        className="dec:pointer-events-none dec:size-4 dec:shrink-0 dec:text-slate-500 dec:dark:text-slate-400"
+      />
+    </ComboboxPrimitive.Trigger>
+  );
+}
+
+function ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {
+  return (
+    <ComboboxPrimitive.Clear
+      data-slot="combobox-clear"
+      className={cn(
+        "dec:inline-flex dec:items-center dec:justify-center dec:size-6 dec:rounded-md dec:hover:bg-transparent dec:dark:hover:bg-transparent",
+        className,
+      )}
+      {...props}
+    >
+      <XIcon className="dec:pointer-events-none dec:size-3.5" />
+    </ComboboxPrimitive.Clear>
+  );
+}
+
+function ComboboxInput({
+  className,
+  children,
+  disabled = false,
+  showTrigger = true,
+  showClear = false,
+  ...props
+}: ComboboxPrimitive.Input.Props & {
+  showTrigger?: boolean;
+  showClear?: boolean;
+}) {
+  return (
+    <ComboboxPrimitive.Trigger
+      data-slot="combobox-input-wrap"
+      className={cn(
+        "dec:relative dec:flex dec:w-full dec:items-center dec:rounded-md dec:border dec:border-input dec:bg-transparent dec:shadow-xs dec:transition-[color,box-shadow] dec:outline-none",
+        "dec:dark:bg-input/30",
+        "dec:focus-within:border-ring dec:focus-within:ring-[3px] dec:focus-within:ring-ring/50",
+        "dec:has-[[aria-invalid=true]]:border-destructive dec:has-[[aria-invalid=true]]:ring-destructive/20 dec:dark:has-[[aria-invalid=true]]:ring-destructive/40",
+        "dec:disabled:pointer-events-none dec:disabled:opacity-50",
+        className,
+      )}
+    >
+      <ComboboxPrimitive.Input
+        data-slot="combobox-input"
+        className="dec:h-7 dec:min-w-0 dec:flex-1 dec:bg-transparent dec:px-2 dec:text-xs dec:outline-none dec:placeholder:text-muted-foreground dec:disabled:cursor-not-allowed"
+        disabled={disabled}
+        {...props}
+      />
+      {showClear && <ComboboxClear disabled={disabled} />}
+      {showTrigger && (
+        <ChevronDownIcon className="dec:pointer-events-none dec:mr-2 dec:size-4 dec:shrink-0 dec:text-slate-500 dec:dark:text-slate-400" />
+      )}
+      {children}
+    </ComboboxPrimitive.Trigger>
+  );
+}
+
+function ComboboxContent({
+  className,
+  side = "bottom",
+  sideOffset = 4,
+  align = "start",
+  alignOffset = 0,
+  anchor,
+  ...props
+}: ComboboxPrimitive.Popup.Props &
+  Pick<
+    ComboboxPrimitive.Positioner.Props,
+    "side" | "align" | "sideOffset" | "alignOffset" | "anchor"
+  >) {
+  const [container] = React.useState<HTMLElement | null>(() =>
+    document.querySelector<HTMLElement>(".dec-root"),
+  );
+  return (
+    <ComboboxPrimitive.Portal container={container}>
+      <ComboboxPrimitive.Positioner
+        side={side}
+        sideOffset={sideOffset}
+        align={align}
+        alignOffset={alignOffset}
+        anchor={anchor}
+        className="dec:isolate dec:z-50"
+      >
+        <ComboboxPrimitive.Popup
+          data-slot="combobox-content"
+          data-chips={!!anchor}
+          className={cn(
+            "dec-form-combobox-content dec:group/combobox-content dec:relative dec:max-h-96 dec:w-(--anchor-width) dec:max-w-(--available-width) dec:min-w-[calc(var(--anchor-width)+--spacing(7))] dec:origin-(--transform-origin) dec:overflow-hidden dec:rounded-md dec:shadow-lg dec:bg-white dec:text-slate-900 dec:border dec:border-slate-200 dec:dark:bg-[#1f2937] dec:dark:text-slate-100 dec:dark:border-slate-700/50 dec:dark:shadow-[0_4px_16px_rgba(0,0,0,0.5)] dec:duration-100 dec:data-[chips=true]:min-w-(--anchor-width) dec:data-[side=bottom]:slide-in-from-top-2 dec:data-[side=left]:slide-in-from-right-2 dec:data-[side=right]:slide-in-from-left-2 dec:data-[side=top]:slide-in-from-bottom-2 dec:*:data-[slot=input-group]:m-1 dec:*:data-[slot=input-group]:mb-0 dec:*:data-[slot=input-group]:h-8 dec:*:data-[slot=input-group]:border-input/30 dec:*:data-[slot=input-group]:bg-input/30 dec:*:data-[slot=input-group]:shadow-none dec:data-open:animate-in dec:data-open:fade-in-0 dec:data-open:zoom-in-95 dec:data-closed:animate-out dec:data-closed:fade-out-0 dec:data-closed:zoom-out-95",
+            className,
+          )}
+          {...props}
+        />
+      </ComboboxPrimitive.Positioner>
+    </ComboboxPrimitive.Portal>
+  );
+}
+
+function ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {
+  return (
+    <ComboboxPrimitive.List
+      data-slot="combobox-list"
+      className={cn(
+        "dec:max-h-[min(calc(--spacing(96)---spacing(9)),calc(var(--available-height)---spacing(9)))] dec:scroll-py-1 dec:overflow-y-auto dec:p-1 dec:data-empty:p-0",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function ComboboxItem({ className, children, ...props }: ComboboxPrimitive.Item.Props) {
+  return (
+    <ComboboxPrimitive.Item
+      data-slot="combobox-item"
+      className={cn(
+        "dec:relative dec:flex dec:w-full dec:cursor-default dec:items-center dec:gap-2 dec:rounded-sm dec:py-1.5 dec:pr-8 dec:pl-2 dec:text-sm dec:outline-hidden dec:select-none dec:data-highlighted:bg-slate-100 dec:data-highlighted:text-slate-900 dec:dark:data-highlighted:bg-blue-600 dec:dark:data-highlighted:text-white dec:data-[disabled]:pointer-events-none dec:data-[disabled]:opacity-50 dec:[&_svg]:pointer-events-none dec:[&_svg]:shrink-0 dec:[&_svg:not([class*=size-])]:size-4",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ComboboxPrimitive.ItemIndicator
+        data-slot="combobox-item-indicator"
+        render={
+          <span className="dec:pointer-events-none dec:absolute dec:right-2 dec:flex dec:size-4 dec:items-center dec:justify-center" />
+        }
+      >
+        <CheckIcon className="dec:pointer-events-none dec:size-4 dec:pointer-coarse:size-5" />
+      </ComboboxPrimitive.ItemIndicator>
+    </ComboboxPrimitive.Item>
+  );
+}
+
+function ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props) {
+  return (
+    <ComboboxPrimitive.Group data-slot="combobox-group" className={cn(className)} {...props} />
+  );
+}
+
+function ComboboxLabel({ className, ...props }: ComboboxPrimitive.GroupLabel.Props) {
+  return (
+    <ComboboxPrimitive.GroupLabel
+      data-slot="combobox-label"
+      className={cn(
+        "dec:px-2 dec:py-1.5 dec:text-xs dec:text-slate-500 dec:dark:text-slate-400 dec:pointer-coarse:px-3 dec:pointer-coarse:py-2 dec:pointer-coarse:text-sm",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props) {
+  return <ComboboxPrimitive.Collection data-slot="combobox-collection" {...props} />;
+}
+
+function ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {
+  return (
+    <ComboboxPrimitive.Empty
+      data-slot="combobox-empty"
+      className={cn(
+        "dec:hidden dec:w-full dec:justify-center dec:py-2 dec:text-center dec:text-sm dec:text-slate-500 dec:dark:text-slate-400 dec:group-data-empty/combobox-content:flex",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function ComboboxSeparator({ className, ...props }: ComboboxPrimitive.Separator.Props) {
+  return (
+    <ComboboxPrimitive.Separator
+      data-slot="combobox-separator"
+      className={cn(
+        "dec:-mx-1 dec:my-1 dec:h-px dec:bg-slate-200 dec:dark:bg-slate-700",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function ComboboxChips({
+  className,
+  ...props
+}: React.ComponentPropsWithRef<typeof ComboboxPrimitive.Chips> & ComboboxPrimitive.Chips.Props) {
+  return (
+    <ComboboxPrimitive.Chips
+      data-slot="combobox-chips"
+      className={cn(
+        "dec:flex dec:min-h-9 dec:flex-wrap dec:items-center dec:gap-1.5 dec:rounded-md dec:border dec:bg-clip-padding dec:px-2.5 dec:py-1.5 dec:text-sm dec:shadow-xs dec:transition-[color,box-shadow] dec:focus-within:ring-[3px] dec:has-aria-invalid:ring-[3px] dec:has-data-[slot=combobox-chip]:px-1.5 dec:border-slate-300 dec:bg-white dec:text-slate-900 dec:hover:border-slate-400 dec:focus-within:border-blue-500 dec:focus-within:ring-[3px] dec:focus-within:ring-blue-500/20    dec:has-aria-invalid:border-red-500 dec:has-aria-invalid:ring-red-500/20 dec:dark:border-slate-600 dec:dark:bg-[#1f2937] dec:dark:text-slate-100 dec:dark:hover:border-slate-500 dec:dark:focus-within:border-blue-400 dec:dark:focus-within:ring-blue-400/20",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function ComboboxChip({
+  className,
+  children,
+  showRemove = true,
+  ...props
+}: ComboboxPrimitive.Chip.Props & {
+  showRemove?: boolean;
+}) {
+  return (
+    <ComboboxPrimitive.Chip
+      data-slot="combobox-chip"
+      className={cn(
+        "dec:flex dec:h-[calc(--spacing(5.5))] dec:w-fit dec:items-center dec:justify-center dec:gap-1 dec:rounded-sm dec:px-1.5 dec:text-xs dec:font-medium dec:whitespace-nowrap dec:has-disabled:pointer-events-none dec:has-disabled:cursor-not-allowed dec:has-disabled:opacity-50 dec:has-data-[slot=combobox-chip-remove]:pr-0 dec:bg-slate-100 dec:text-slate-800 dec:dark:bg-slate-700 dec:dark:text-slate-100",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      {showRemove && (
+        <ComboboxPrimitive.ChipRemove
+          render={<Button variant="ghost" size="icon-xs" />}
+          className="dec:-ml-1 dec:opacity-50 dec:hover:opacity-100"
+          data-slot="combobox-chip-remove"
+        >
+          <XIcon className="dec:pointer-events-none" />
+        </ComboboxPrimitive.ChipRemove>
+      )}
+    </ComboboxPrimitive.Chip>
+  );
+}
+
+function ComboboxChipsInput({ className, ...props }: ComboboxPrimitive.Input.Props) {
+  return (
+    <ComboboxPrimitive.Input
+      data-slot="combobox-chip-input"
+      className={cn("dec:min-w-16 dec:flex-1 dec:outline-none", className)}
+      {...props}
+    />
+  );
+}
+
+function useComboboxAnchor() {
+  return React.useRef<HTMLDivElement | null>(null);
+}
+
+export {
+  Combobox,
+  ComboboxInput,
+  ComboboxContent,
+  ComboboxList,
+  ComboboxItem,
+  ComboboxGroup,
+  ComboboxLabel,
+  ComboboxCollection,
+  ComboboxEmpty,
+  ComboboxSeparator,
+  ComboboxChips,
+  ComboboxChip,
+  ComboboxChipsInput,
+  ComboboxTrigger,
+  ComboboxValue,
+  useComboboxAnchor,
+};
diff --git a/packages/open-workflow-diagram-editor/src/components/ui/select.tsx b/packages/open-workflow-diagram-editor/src/side-panel/forms/ui/input.tsx
similarity index 70%
rename from packages/open-workflow-diagram-editor/src/components/ui/select.tsx
rename to packages/open-workflow-diagram-editor/src/side-panel/forms/ui/input.tsx
index b8f5e78d..7c9003ba 100644
--- a/packages/open-workflow-diagram-editor/src/components/ui/select.tsx
+++ b/packages/open-workflow-diagram-editor/src/side-panel/forms/ui/input.tsx
@@ -15,18 +15,16 @@
  */
 
 import * as React from "react";
+
 import { cn } from "@/lib/utils";
 
-/**
- * Styled native `<select>` element consistent with the project's Input component.
- */
-function Select({ className, ...props }: React.ComponentProps<"select">) {
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
   return (
-    <select
-      data-slot="select"
+    <input
+      type={type}
+      data-slot="input"
       className={cn(
-        "dec:h-7 dec:w-full dec:min-w-0 dec:rounded-md dec:border dec:border-input dec:bg-transparent dec:px-2 dec:py-0.5 dec:text-xs dec:shadow-xs dec:transition-[color,box-shadow] dec:outline-none",
-        "dec:disabled:pointer-events-none dec:disabled:cursor-not-allowed dec:disabled:opacity-50 dec:dark:bg-input/30",
+        "dec:h-7 dec:w-full dec:min-w-0 dec:rounded-md dec:border dec:border-input dec:bg-transparent dec:px-2 dec:py-0.5 dec:text-xs dec:shadow-xs dec:transition-[color,box-shadow] dec:outline-none dec:selection:bg-primary dec:selection:text-primary-foreground dec:file:inline-flex dec:file:h-6 dec:file:border-0 dec:file:bg-transparent dec:file:text-xs dec:file:font-medium dec:file:text-foreground dec:placeholder:text-muted-foreground dec:disabled:pointer-events-none dec:disabled:cursor-not-allowed dec:disabled:opacity-50 dec:dark:bg-input/30",
         "dec:focus-visible:border-ring dec:focus-visible:ring-[3px] dec:focus-visible:ring-ring/50",
         "dec:aria-invalid:border-destructive dec:aria-invalid:ring-destructive/20 dec:dark:aria-invalid:ring-destructive/40",
         className,
@@ -36,4 +34,4 @@ function Select({ className, ...props }: React.ComponentProps<"select">) {
   );
 }
 
-export { Select };
+export { Input };
diff --git a/packages/open-workflow-diagram-editor/src/side-panel/forms/ui/textarea.tsx b/packages/open-workflow-diagram-editor/src/side-panel/forms/ui/textarea.tsx
new file mode 100644
index 00000000..287f43f4
--- /dev/null
+++ b/packages/open-workflow-diagram-editor/src/side-panel/forms/ui/textarea.tsx
@@ -0,0 +1,34 @@
+/*
+ * Copyright 2021-Present The Open Workflow Specification Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "dec:flex dec:field-sizing-content dec:min-h-[60px] dec:w-full dec:rounded-md dec:border dec:border-input dec:bg-transparent dec:px-2 dec:py-1.5 dec:text-xs dec:placeholder:text-muted-foreground dec:shadow-xs dec:transition-[border-color,box-shadow] dec:outline-none dec:hover:border-ring/50 dec:focus-visible:border-ring dec:focus-visible:ring-[3px] dec:focus-visible:ring-ring/50 dec:disabled:cursor-not-allowed dec:disabled:opacity-50 dec:aria-invalid:border-destructive dec:aria-invalid:ring-[3px] dec:aria-invalid:ring-destructive/20 dec:dark:bg-input/30 dec:form-textarea",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Textarea };
diff --git a/packages/open-workflow-diagram-editor/src/side-panel/forms/useSiblingTaskNames.ts b/packages/open-workflow-diagram-editor/src/side-panel/forms/useSiblingTaskNames.ts
index 444071f3..1069cd5f 100644
--- a/packages/open-workflow-diagram-editor/src/side-panel/forms/useSiblingTaskNames.ts
+++ b/packages/open-workflow-diagram-editor/src/side-panel/forms/useSiblingTaskNames.ts
@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 
-import * as React from "react";
 import type { Specification } from "@openworkflowspec/sdk";
 
 /**
@@ -50,40 +49,20 @@ export function useSiblingTaskNames(
   model: Specification.Workflow | null,
   nodeId: string | undefined,
 ): string[] {
-  return React.useMemo(() => {
-    if (!model || !nodeId) return [];
+  if (!model || !nodeId) return [];
 
-    const segments = nodeId.split("/").filter(Boolean);
-    // Each depth level is a <listProp>/<taskName> pair — need at least one pair.
-    if (segments.length < 2 || segments.length % 2 !== 0) return [];
+  const segments = nodeId.split("/").filter(Boolean);
+  // Each depth level is a <listProp>/<taskName> pair — need at least one pair.
+  if (segments.length < 2 || segments.length % 2 !== 0) return [];
 
-    // Walk every pair except the last to reach the object that owns the parent list.
-    // At each step: current[listProp] is a task array; find the entry keyed by taskName
-    // and descend into its value (the task body).
-    let current: unknown = model;
-    for (let i = 0; i < segments.length - 2; i += 2) {
-      const listProp = segments[i]!;
-      const taskName = segments[i + 1]!;
+  // Walk every pair except the last to reach the object that owns the parent list.
+  // At each step: current[listProp] is a task array; find the entry keyed by taskName
+  // and descend into its value (the task body).
+  let current: unknown = model;
+  for (let i = 0; i < segments.length - 2; i += 2) {
+    const listProp = segments[i]!;
+    const taskName = segments[i + 1]!;
 
-      if (
-        current === null ||
-        current === undefined ||
-        typeof current !== "object" ||
-        Array.isArray(current)
-      ) {
-        return [];
-      }
-
-      const list = (current as Record<string, unknown>)[listProp];
-      if (!Array.isArray(list)) return [];
-
-      // Find the entry { [taskName]: taskBody } and descend into taskBody
-      const entry = (list as Array<Record<string, unknown>>).find((e) => taskName in e);
-      if (!entry) return [];
-      current = entry[taskName];
-    }
-
-    // current is now the object that owns the final list (the model root or a task body)
     if (
       current === null ||
       current === undefined ||
@@ -93,19 +72,37 @@ export function useSiblingTaskNames(
       return [];
     }
 
-    const listProp = segments[segments.length - 2]!;
-    const currentTaskName = segments[segments.length - 1]!;
-
     const list = (current as Record<string, unknown>)[listProp];
     if (!Array.isArray(list)) return [];
 
-    const siblings: string[] = [];
-    for (const entry of list as Array<Record<string, unknown>>) {
-      if (typeof entry !== "object" || entry === null || Array.isArray(entry)) continue;
-      const name = Object.keys(entry)[0];
-      if (name && name !== currentTaskName) siblings.push(name);
-    }
+    // Find the entry { [taskName]: taskBody } and descend into taskBody
+    const entry = (list as Array<Record<string, unknown>>).find((e) => taskName in e);
+    if (!entry) return [];
+    current = entry[taskName];
+  }
+
+  // current is now the object that owns the final list (the model root or a task body)
+  if (
+    current === null ||
+    current === undefined ||
+    typeof current !== "object" ||
+    Array.isArray(current)
+  ) {
+    return [];
+  }
+
+  const listProp = segments[segments.length - 2]!;
+  const currentTaskName = segments[segments.length - 1]!;
+
+  const list = (current as Record<string, unknown>)[listProp];
+  if (!Array.isArray(list)) return [];
+
+  const siblings: string[] = [];
+  for (const entry of list as Array<Record<string, unknown>>) {
+    if (typeof entry !== "object" || entry === null || Array.isArray(entry)) continue;
+    const name = Object.keys(entry)[0];
+    if (name && name !== currentTaskName) siblings.push(name);
+  }
 
-    return siblings;
-  }, [model, nodeId]);
+  return siblings;
 }
diff --git a/packages/open-workflow-diagram-editor/stories/helpers.ts b/packages/open-workflow-diagram-editor/stories/helpers.ts
index 04aaa599..3b710773 100644
--- a/packages/open-workflow-diagram-editor/stories/helpers.ts
+++ b/packages/open-workflow-diagram-editor/stories/helpers.ts
@@ -26,7 +26,7 @@ const DEFAULT_STORY_ARGS = {
 
 /**
  * Creates a workflow story with default configuration and play function.
- * 
+ *
  * @param workflowContent - The workflow YAML/JSON content to display
  * @returns A configured Story object
  */
@@ -37,8 +37,9 @@ export const createWorkflowStory = (workflowContent: string): Story => {
       content: workflowContent,
     },
     play: async ({ canvas }) => {
-      // Wait for the start node to be rendered to ensure all async state updates are complete
-      await canvas.findByTestId("start-node-root-entry-node");
+      // Wait for the start node to be rendered — large workflows can take several seconds
+      // for ELK auto-layout + React Flow node rendering in headless Chromium.
+      await canvas.findByTestId("start-node-root-entry-node", {}, { timeout: 10000 });
     },
   };
 };
diff --git a/packages/open-workflow-diagram-editor/tests/side-panel/forms/schemaToFormFields.test.ts b/packages/open-workflow-diagram-editor/tests/core/schemaToFormFields.test.ts
similarity index 93%
rename from packages/open-workflow-diagram-editor/tests/side-panel/forms/schemaToFormFields.test.ts
rename to packages/open-workflow-diagram-editor/tests/core/schemaToFormFields.test.ts
index 6049eefe..71236e4f 100644
--- a/packages/open-workflow-diagram-editor/tests/side-panel/forms/schemaToFormFields.test.ts
+++ b/packages/open-workflow-diagram-editor/tests/core/schemaToFormFields.test.ts
@@ -15,12 +15,8 @@
  */
 
 import { describe, expect, it } from "vitest";
-import { getFormFieldsForNodeType } from "../../../src/core/schemaWalker";
-import type {
-  OneOfField,
-  StringField,
-  ObjectField,
-} from "../../../src/side-panel/forms/schemaToFormFields";
+import { getFormFieldsForNodeType } from "../../src/core/schemaWalker";
+import type { OneOfField, StringField, ObjectField } from "../../src/core/schemaToFormFields";
 
 describe("schemaToFormFields endpoint and oneOf unwrapping", () => {
   it("generates clean endpoint options for setTask input.schema.resource.endpoint", () => {
diff --git a/packages/open-workflow-diagram-editor/tests/diagram-editor/DiagramEditor.test.tsx b/packages/open-workflow-diagram-editor/tests/diagram-editor/DiagramEditor.test.tsx
index 029f2b9e..394b73a6 100644
--- a/packages/open-workflow-diagram-editor/tests/diagram-editor/DiagramEditor.test.tsx
+++ b/packages/open-workflow-diagram-editor/tests/diagram-editor/DiagramEditor.test.tsx
@@ -269,10 +269,13 @@ do:
     render(<DiagramEditor content={BASIC_VALID_WORKFLOW_YAML} locale="en" isReadOnly={true} />);
 
     expect(screen.getByTestId("diagram-container")).toBeInTheDocument();
-    // The toggle button is inside the diagram canvas which is hidden until the first
-    // layout completes — wait for it to become visible.
-    await waitFor(() =>
-      expect(screen.getByRole("button", { name: /toggle sidebar/i })).toBeInTheDocument(),
+    // The toggle button is inside a React Flow Panel, which only mounts once the first
+    // ELK layout cycle completes. Use a generous timeout since jsdom runs all layouts
+    // synchronously and the debounce + layout + state-update chain can take several
+    // seconds under parallel test load.
+    await waitFor(
+      () => expect(screen.getByRole("button", { name: /toggle sidebar/i })).toBeInTheDocument(),
+      { timeout: 8000 },
     );
   });
 });
diff --git a/packages/open-workflow-diagram-editor/tests/react-flow/diagram/autoLayout.integration.test.ts b/packages/open-workflow-diagram-editor/tests/react-flow/diagram/autoLayout.integration.test.ts
index a945b9b5..66f1c456 100644
--- a/packages/open-workflow-diagram-editor/tests/react-flow/diagram/autoLayout.integration.test.ts
+++ b/packages/open-workflow-diagram-editor/tests/react-flow/diagram/autoLayout.integration.test.ts
@@ -29,9 +29,13 @@ import type { ReactFlowGraph } from "../../../src/react-flow/diagram/diagramBuil
 import * as core from "../../../src/core";
 
 // Mock the processElkLayout function
-vi.mock("../../../src/core", () => ({
-  processElkLayout: vi.fn(),
-}));
+vi.mock("../../../src/core", async (importOriginal) => {
+  const actual = await importOriginal();
+  return {
+    ...actual,
+    processElkLayout: vi.fn(),
+  };
+});
 
 describe("autoLayout", () => {
   describe("buildElkGraphFromReactFlowGraph", () => {
diff --git a/packages/open-workflow-diagram-editor/tests/side-panel/EditFormFooter.test.tsx b/packages/open-workflow-diagram-editor/tests/side-panel/EditFormFooter.test.tsx
index b56a9b55..68797894 100644
--- a/packages/open-workflow-diagram-editor/tests/side-panel/EditFormFooter.test.tsx
+++ b/packages/open-workflow-diagram-editor/tests/side-panel/EditFormFooter.test.tsx
@@ -86,16 +86,20 @@ describe("EditFormFooter", () => {
   });
 
   describe("cancel", () => {
-    it("discards the draft and disables Apply", async () => {
+    it("discards the draft, restores form field values, and disables Apply", async () => {
       const user = userEvent.setup();
       renderFooter();
 
       const methodInput = screen.getByLabelText(/^Method$/i);
+      const originalValue = (methodInput as HTMLInputElement).value;
       await user.clear(methodInput);
       await user.type(methodInput, "delete");
+      expect(methodInput).toHaveValue("delete");
+
       await user.click(screen.getByRole("button", { name: "Cancel" }));
 
       expect(screen.getByRole("button", { name: "Apply" })).toBeDisabled();
+      expect(methodInput).toHaveValue(originalValue);
     });
   });
 
diff --git a/packages/open-workflow-diagram-editor/tests/side-panel/forms/flattenTask.test.ts b/packages/open-workflow-diagram-editor/tests/side-panel/forms/TaskForm.test.ts
similarity index 100%
rename from packages/open-workflow-diagram-editor/tests/side-panel/forms/flattenTask.test.ts
rename to packages/open-workflow-diagram-editor/tests/side-panel/forms/TaskForm.test.ts
diff --git a/packages/open-workflow-diagram-editor/tests/side-panel/forms/DurationField.test.ts b/packages/open-workflow-diagram-editor/tests/side-panel/forms/customFields/DurationField.test.ts
similarity index 95%
rename from packages/open-workflow-diagram-editor/tests/side-panel/forms/DurationField.test.ts
rename to packages/open-workflow-diagram-editor/tests/side-panel/forms/customFields/DurationField.test.ts
index 8b6226cd..a6722527 100644
--- a/packages/open-workflow-diagram-editor/tests/side-panel/forms/DurationField.test.ts
+++ b/packages/open-workflow-diagram-editor/tests/side-panel/forms/customFields/DurationField.test.ts
@@ -15,7 +15,7 @@
  */
 
 import { describe, expect, it } from "vitest";
-import { ISO_8601_DURATION_PATTERN } from "../../../src/side-panel/forms/customFields/DurationField";
+import { ISO_8601_DURATION_PATTERN } from "../../../../src/side-panel/forms/customFields/DurationField";
 
 // ---------------------------------------------------------------------------
 // ISO_8601_DURATION_PATTERN
diff --git a/packages/open-workflow-diagram-editor/tests/side-panel/forms/KeyValueMapField.test.tsx b/packages/open-workflow-diagram-editor/tests/side-panel/forms/customFields/KeyValueMapField.test.tsx
similarity index 63%
rename from packages/open-workflow-diagram-editor/tests/side-panel/forms/KeyValueMapField.test.tsx
rename to packages/open-workflow-diagram-editor/tests/side-panel/forms/customFields/KeyValueMapField.test.tsx
index 3f3860e6..1d1d634e 100644
--- a/packages/open-workflow-diagram-editor/tests/side-panel/forms/KeyValueMapField.test.tsx
+++ b/packages/open-workflow-diagram-editor/tests/side-panel/forms/customFields/KeyValueMapField.test.tsx
@@ -30,10 +30,10 @@ import { fireEvent, render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { FormProvider, useForm } from "react-hook-form";
 import { I18nProvider } from "@openworkflowspec/i18n";
-import { en } from "../../../src/i18n/locales/en";
-import { KeyValueMapField } from "../../../src/side-panel/forms/customFields/KeyValueMapField";
-import { TaskFormContext } from "../../../src/side-panel/forms/taskFormContext";
-import type { MapField } from "../../../src/side-panel/forms/schemaToFormFields";
+import { en } from "../../../../src/i18n/locales/en";
+import { KeyValueMapField } from "../../../../src/side-panel/forms/customFields/KeyValueMapField";
+import { TaskFormContext } from "../../../../src/side-panel/forms/taskFormContext";
+import type { MapField } from "../../../../src/side-panel/forms/schemaToFormFields";
 
 // ---------------------------------------------------------------------------
 // Helpers
@@ -166,4 +166,95 @@ describe("KeyValueMapField — variant-switch restore", () => {
     fireEvent.change(valueInput, { target: { value: '{"assignedTo":"DevTeam"}' } });
     expect(valueInput).toHaveValue('{"assignedTo":"DevTeam"}');
   });
+
+  it("resynchronizes rows when form.reset is called with new defaultValues", async () => {
+    function ResetTester() {
+      const form = useForm<Record<string, unknown>>({
+        defaultValues: { output: { as: { env: "production" } } },
+      });
+      return (
+        <I18nProvider locale="en" dictionaries={{ en }}>
+          <TaskFormContext.Provider
+            value={{ isReadOnly: false, siblingTaskNames: [], taskData: {} }}
+          >
+            <FormProvider {...form}>
+              <KeyValueMapField field={mapField} />
+              <button
+                type="button"
+                onClick={() => form.reset({ output: { as: { env: "staging", debug: "true" } } })}
+              >
+                Reset form
+              </button>
+            </FormProvider>
+          </TaskFormContext.Provider>
+        </I18nProvider>
+      );
+    }
+
+    const { findAllByRole } = render(<ResetTester />);
+    const inputs = await findAllByRole("textbox");
+    const keyInput = inputs.find((el) =>
+      (el as HTMLInputElement).getAttribute("aria-label")?.toLowerCase().includes("key"),
+    );
+    expect(keyInput).toHaveValue("env");
+
+    // Simulate deleting the entry
+    fireEvent.click(screen.getByRole("button", { name: /delete entry/i }));
+    expect(screen.queryByRole("textbox")).not.toBeInTheDocument();
+
+    // Trigger reset with new default values
+    fireEvent.click(screen.getByRole("button", { name: "Reset form" }));
+
+    const restoredInputs = await screen.findAllByRole("textbox");
+    // 2 rows = 4 inputs
+    expect(restoredInputs.length).toBe(4);
+    expect(screen.getByDisplayValue("staging")).toBeInTheDocument();
+    expect(screen.getByDisplayValue("debug")).toBeInTheDocument();
+  });
+
+  it("clears old key in form values when a row key is renamed or removed", async () => {
+    function RemovalTester() {
+      const form = useForm<Record<string, unknown>>({
+        defaultValues: { output: { as: { oldKey: "val" } } },
+      });
+      const [dump, setDump] = React.useState<string>("");
+      return (
+        <I18nProvider locale="en" dictionaries={{ en }}>
+          <TaskFormContext.Provider
+            value={{ isReadOnly: false, siblingTaskNames: [], taskData: {} }}
+          >
+            <FormProvider {...form}>
+              <KeyValueMapField field={mapField} />
+              <button type="button" onClick={() => setDump(JSON.stringify(form.getValues()))}>
+                Dump values
+              </button>
+              <div data-testid="dump">{dump}</div>
+            </FormProvider>
+          </TaskFormContext.Provider>
+        </I18nProvider>
+      );
+    }
+
+    const user = userEvent.setup();
+    render(<RemovalTester />);
+
+    const keyInput = screen.getByDisplayValue("oldKey");
+    await user.clear(keyInput);
+    await user.type(keyInput, "newKey");
+
+    await user.click(screen.getByRole("button", { name: "Dump values" }));
+    let dumpObj = JSON.parse(screen.getByTestId("dump").textContent || "{}") as {
+      output?: { as?: Record<string, unknown> };
+    };
+    expect(dumpObj.output?.as?.oldKey).toBeUndefined();
+    expect(dumpObj.output?.as?.newKey).toBe("val");
+
+    // Remove row
+    await user.click(screen.getByRole("button", { name: /delete entry/i }));
+    await user.click(screen.getByRole("button", { name: "Dump values" }));
+    dumpObj = JSON.parse(screen.getByTestId("dump").textContent || "{}") as {
+      output?: { as?: Record<string, unknown> };
+    };
+    expect(dumpObj.output?.as?.newKey).toBeUndefined();
+  });
 });
diff --git a/packages/open-workflow-diagram-editor/tests/side-panel/forms/NumberControl.test.tsx b/packages/open-workflow-diagram-editor/tests/side-panel/forms/customFields/NumberControl.test.tsx
similarity index 92%
rename from packages/open-workflow-diagram-editor/tests/side-panel/forms/NumberControl.test.tsx
rename to packages/open-workflow-diagram-editor/tests/side-panel/forms/customFields/NumberControl.test.tsx
index 34555436..1875bb2b 100644
--- a/packages/open-workflow-diagram-editor/tests/side-panel/forms/NumberControl.test.tsx
+++ b/packages/open-workflow-diagram-editor/tests/side-panel/forms/customFields/NumberControl.test.tsx
@@ -30,10 +30,10 @@ import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { FormProvider, useForm } from "react-hook-form";
 import { I18nProvider } from "@openworkflowspec/i18n";
-import { en } from "../../../src/i18n/locales/en";
-import { FieldControl } from "../../../src/side-panel/forms/FieldControl";
-import { TaskFormContext } from "../../../src/side-panel/forms/taskFormContext";
-import type { NumberField } from "../../../src/side-panel/forms/schemaToFormFields";
+import { en } from "../../../../src/i18n/locales/en";
+import { FieldControl } from "../../../../src/side-panel/forms/FieldControl";
+import { TaskFormContext } from "../../../../src/side-panel/forms/taskFormContext";
+import type { NumberField } from "../../../../src/side-panel/forms/schemaToFormFields";
 
 // ---------------------------------------------------------------------------
 // Helpers
diff --git a/packages/open-workflow-diagram-editor/tests/side-panel/forms/customFields/ThenField.test.tsx b/packages/open-workflow-diagram-editor/tests/side-panel/forms/customFields/ThenField.test.tsx
new file mode 100644
index 00000000..6ef79bd3
--- /dev/null
+++ b/packages/open-workflow-diagram-editor/tests/side-panel/forms/customFields/ThenField.test.tsx
@@ -0,0 +1,79 @@
+/*
+ * Copyright 2021-Present The Open Workflow Specification Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { describe, it, expect } from "vitest";
+import * as React from "react";
+import { render, screen } from "@testing-library/react";
+import { FormProvider, useForm } from "react-hook-form";
+import { I18nProvider } from "@openworkflowspec/i18n";
+import { en } from "../../../../src/i18n/locales/en";
+import { ThenField } from "../../../../src/side-panel/forms/customFields/ThenField";
+import { TaskFormContext } from "../../../../src/side-panel/forms/taskFormContext";
+import type { ThenField as ThenFieldDescriptor } from "../../../../src/core/schemaToFormFields";
+
+const thenFieldDescriptor: ThenFieldDescriptor = {
+  kind: "then",
+  path: "then",
+  label: "Then",
+  required: false,
+};
+
+function ThenFieldWrapper({
+  defaultValue = "",
+  siblingTaskNames = [],
+  isReadOnly = false,
+}: {
+  defaultValue?: string;
+  siblingTaskNames?: string[];
+  isReadOnly?: boolean;
+}) {
+  const form = useForm<Record<string, unknown>>({
+    // eslint-disable-next-line unicorn/no-thenable
+    defaultValues: { then: defaultValue },
+  });
+
+  return (
+    <div className="dec-root">
+      <I18nProvider locale="en" dictionaries={{ en }}>
+        <TaskFormContext.Provider value={{ isReadOnly, siblingTaskNames, taskData: {} }}>
+          <FormProvider {...form}>
+            <ThenField field={thenFieldDescriptor} id="field-then" />
+          </FormProvider>
+        </TaskFormContext.Provider>
+      </I18nProvider>
+    </div>
+  );
+}
+
+describe("ThenField", () => {
+  it("displays '—' when value is empty", () => {
+    render(<ThenFieldWrapper defaultValue="" />);
+    const input = screen.getByLabelText("Then");
+    expect(input).toHaveValue("—");
+  });
+
+  it("displays the assigned directive or task name value", () => {
+    render(<ThenFieldWrapper defaultValue="continue" />);
+    const input = screen.getByLabelText("Then");
+    expect(input).toHaveValue("continue");
+  });
+
+  it("renders with disabled input in read-only mode", () => {
+    render(<ThenFieldWrapper defaultValue="continue" isReadOnly />);
+    const input = screen.getByLabelText("Then");
+    expect(input).toBeDisabled();
+  });
+});
diff --git a/packages/open-workflow-diagram-editor/tests/side-panel/forms/fieldHelpers.test.tsx b/packages/open-workflow-diagram-editor/tests/side-panel/forms/customFields/fieldHelpers.test.tsx
similarity index 96%
rename from packages/open-workflow-diagram-editor/tests/side-panel/forms/fieldHelpers.test.tsx
rename to packages/open-workflow-diagram-editor/tests/side-panel/forms/customFields/fieldHelpers.test.tsx
index 96961d73..8be9d518 100644
--- a/packages/open-workflow-diagram-editor/tests/side-panel/forms/fieldHelpers.test.tsx
+++ b/packages/open-workflow-diagram-editor/tests/side-panel/forms/customFields/fieldHelpers.test.tsx
@@ -17,7 +17,7 @@
 import { describe, expect, it } from "vitest";
 import * as React from "react";
 import { render, screen } from "@testing-library/react";
-import { FieldWithError } from "../../../src/side-panel/forms/customFields/fieldHelpers";
+import { FieldWithError } from "../../../../src/side-panel/forms/customFields/fieldHelpers";
 
 // ---------------------------------------------------------------------------
 // FieldWithError
diff --git a/packages/open-workflow-diagram-editor/tests/side-panel/forms/validation/useWorkflowErrorsForForm.test.ts b/packages/open-workflow-diagram-editor/tests/side-panel/forms/validation/useWorkflowErrorsForForm.test.ts
new file mode 100644
index 00000000..bad2952d
--- /dev/null
+++ b/packages/open-workflow-diagram-editor/tests/side-panel/forms/validation/useWorkflowErrorsForForm.test.ts
@@ -0,0 +1,104 @@
+/*
+ * Copyright 2021-Present The Open Workflow Specification Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { describe, it, expect, vi } from "vitest";
+import { renderHook } from "@testing-library/react";
+import type { SdkError } from "../../../../src/core";
+import { useWorkflowErrorsForForm } from "../../../../src/side-panel/forms/validation/useWorkflowErrorsForForm";
+
+describe("useWorkflowErrorsForForm", () => {
+  const taskRef = "/do/0/step1";
+  const taskReferences = new Set(["/do/0/step1", "/do/1/step2"]);
+
+  it("does nothing when taskReference is undefined", () => {
+    const setError = vi.fn();
+    const clearErrors = vi.fn();
+
+    renderHook(() =>
+      useWorkflowErrorsForForm([], undefined, taskReferences, setError, clearErrors, "node-1"),
+    );
+
+    expect(setError).not.toHaveBeenCalled();
+    expect(clearErrors).not.toHaveBeenCalled();
+  });
+
+  it("maps node errors matching a field path to react-hook-form setError", () => {
+    const setError = vi.fn();
+    const clearErrors = vi.fn();
+
+    const errors: SdkError[] = [
+      {
+        path: "/do/0/step1/call/http/endpoint",
+        message: "Endpoint is required",
+      },
+    ];
+
+    renderHook(() =>
+      useWorkflowErrorsForForm(errors, taskRef, taskReferences, setError, clearErrors, "node-1"),
+    );
+
+    expect(setError).toHaveBeenCalledWith("call.http.endpoint", {
+      type: "workflow",
+      message: "Endpoint is required",
+    });
+  });
+
+  it("ignores errors that do not resolve to a specific field path", () => {
+    const setError = vi.fn();
+    const clearErrors = vi.fn();
+
+    const errors: SdkError[] = [
+      {
+        path: "/do/0/step1",
+        message: "General task error",
+      },
+    ];
+
+    renderHook(() =>
+      useWorkflowErrorsForForm(errors, taskRef, taskReferences, setError, clearErrors, "node-1"),
+    );
+
+    expect(setError).not.toHaveBeenCalled();
+  });
+
+  it("clears previously set field errors when errors or resetKey changes", () => {
+    const setError = vi.fn();
+    const clearErrors = vi.fn();
+
+    const errors1: SdkError[] = [
+      {
+        path: "/do/0/step1/then",
+        message: "Target task does not exist",
+      },
+    ];
+
+    const { rerender } = renderHook(
+      ({ errs, key }) =>
+        useWorkflowErrorsForForm(errs, taskRef, taskReferences, setError, clearErrors, key),
+      { initialProps: { errs: errors1, key: "node-1" } },
+    );
+
+    expect(setError).toHaveBeenCalledWith("then", {
+      type: "workflow",
+      message: "Target task does not exist",
+    });
+
+    // Rerender with empty errors
+    rerender({ errs: [], key: "node-1" });
+
+    expect(clearErrors).toHaveBeenCalledWith(["then"]);
+  });
+});
diff --git a/packages/open-workflow-diagram-editor/vitest.config.ts b/packages/open-workflow-diagram-editor/vitest.config.ts
index 4de6dd75..a76401a0 100644
--- a/packages/open-workflow-diagram-editor/vitest.config.ts
+++ b/packages/open-workflow-diagram-editor/vitest.config.ts
@@ -73,11 +73,7 @@ export default defineConfig({
           name: "unit",
           css: true,
           include: ["tests/**/*.test.ts", "tests/**/*.test.tsx"],
-          // Some form-rendering tests take > 5 s under heavy parallel load
-          // (e.g. the full EditFormFooter suite that renders a CallHTTP task
-          // with a deep OneOf schema). 10 s is still tight enough to catch
-          // genuinely hanging tests.
-          testTimeout: 10000,
+          testTimeout: 15000,
         },
       },
       {
@@ -89,6 +85,7 @@ export default defineConfig({
         ],
         test: {
           name: "storybook",
+          testTimeout: 15000,
           browser: {
             enabled: true,
             headless: true,

From 36cea55f3d969689ccee50f26884cbe868047255 Mon Sep 17 00:00:00 2001
From: Handrey Cunha <handrey.cunha@gmail.com>
Date: Mon, 14 Sep 2026 09:39:18 -0400
Subject: [PATCH 4/4] Fix test imports

Signed-off-by: Handrey Cunha <handrey.cunha@gmail.com>
---
 .../side-panel/forms/customFields/KeyValueMapField.test.tsx     | 2 +-
 .../tests/side-panel/forms/customFields/NumberControl.test.tsx  | 2 +-
 .../tests/side-panel/forms/taskFormContext.test.ts              | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/open-workflow-diagram-editor/tests/side-panel/forms/customFields/KeyValueMapField.test.tsx b/packages/open-workflow-diagram-editor/tests/side-panel/forms/customFields/KeyValueMapField.test.tsx
index 1d1d634e..4b212fe8 100644
--- a/packages/open-workflow-diagram-editor/tests/side-panel/forms/customFields/KeyValueMapField.test.tsx
+++ b/packages/open-workflow-diagram-editor/tests/side-panel/forms/customFields/KeyValueMapField.test.tsx
@@ -33,7 +33,7 @@ import { I18nProvider } from "@openworkflowspec/i18n";
 import { en } from "../../../../src/i18n/locales/en";
 import { KeyValueMapField } from "../../../../src/side-panel/forms/customFields/KeyValueMapField";
 import { TaskFormContext } from "../../../../src/side-panel/forms/taskFormContext";
-import type { MapField } from "../../../../src/side-panel/forms/schemaToFormFields";
+import type { MapField } from "../../../../src/core/schemaToFormFields";
 
 // ---------------------------------------------------------------------------
 // Helpers
diff --git a/packages/open-workflow-diagram-editor/tests/side-panel/forms/customFields/NumberControl.test.tsx b/packages/open-workflow-diagram-editor/tests/side-panel/forms/customFields/NumberControl.test.tsx
index 1875bb2b..f8061aaa 100644
--- a/packages/open-workflow-diagram-editor/tests/side-panel/forms/customFields/NumberControl.test.tsx
+++ b/packages/open-workflow-diagram-editor/tests/side-panel/forms/customFields/NumberControl.test.tsx
@@ -33,7 +33,7 @@ import { I18nProvider } from "@openworkflowspec/i18n";
 import { en } from "../../../../src/i18n/locales/en";
 import { FieldControl } from "../../../../src/side-panel/forms/FieldControl";
 import { TaskFormContext } from "../../../../src/side-panel/forms/taskFormContext";
-import type { NumberField } from "../../../../src/side-panel/forms/schemaToFormFields";
+import type { NumberField } from "../../../../src/core/schemaToFormFields";
 
 // ---------------------------------------------------------------------------
 // Helpers
diff --git a/packages/open-workflow-diagram-editor/tests/side-panel/forms/taskFormContext.test.ts b/packages/open-workflow-diagram-editor/tests/side-panel/forms/taskFormContext.test.ts
index 38306054..dc6a6b92 100644
--- a/packages/open-workflow-diagram-editor/tests/side-panel/forms/taskFormContext.test.ts
+++ b/packages/open-workflow-diagram-editor/tests/side-panel/forms/taskFormContext.test.ts
@@ -20,7 +20,7 @@ import {
   hasValue,
   filterReadOnlyFields,
 } from "../../../src/side-panel/forms/taskFormContext";
-import type { FormFieldDescriptor } from "../../../src/side-panel/forms/schemaToFormFields";
+import type { FormFieldDescriptor } from "../../../src/core/schemaToFormFields";
 import { SET_EXAMPLE_WORKFLOW } from "../../fixtures/workflows";
 
 // ---------------------------------------------------------------------------