diff --git a/client/src/components/DynamicJsonForm.tsx b/client/src/components/DynamicJsonForm.tsx
index 90249ab1c..c8c40ef2b 100644
--- a/client/src/components/DynamicJsonForm.tsx
+++ b/client/src/components/DynamicJsonForm.tsx
@@ -8,9 +8,11 @@ import {
 } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { Switch } from "@/components/ui/switch";
 import JsonEditor from "./JsonEditor";
 import { updateValueAtPath } from "@/utils/jsonUtils";
-import { generateDefaultValue } from "@/utils/schemaUtils";
+import { generateDefaultValue, normalizeUnionType } from "@/utils/schemaUtils";
 import type {
   JsonValue,
   JsonSchemaType,
@@ -87,6 +89,9 @@ const DynamicJsonForm = forwardRef<DynamicJsonFormRef, DynamicJsonFormProps>(
     // - Arrays with defined items are form-capable
     // - Primitive types are form-capable
     const canRenderTopLevelForm = (s: JsonSchemaType): boolean => {
+      // Unwrap Optional[X] at the top level so anyOf:[X,null] is treated as X
+      s = normalizeUnionType(s);
+
       const primitiveTypes = ["string", "number", "integer", "boolean", "null"];
 
       const hasType = Array.isArray(s.type) ? s.type.length > 0 : !!s.type;
@@ -303,6 +308,19 @@ const DynamicJsonForm = forwardRef<DynamicJsonFormRef, DynamicJsonFormProps>(
       parentSchema?: JsonSchemaType,
       propertyName?: string,
     ) => {
+      // Unwrap Optional[X] / nullable unions (anyOf: [X, null]) before ANY type checks
+      // so that maxDepth enforcement and the type switch both see the real type.
+      propSchema = normalizeUnionType(propSchema);
+
+      // Trim description to remove leading/trailing whitespace from multi-line
+      // Python triple-quoted strings (e.g. """\n            - text\n            """)
+      if (propSchema.description) {
+        propSchema = {
+          ...propSchema,
+          description: propSchema.description.trim(),
+        };
+      }
+
       if (
         depth >= maxDepth &&
         (propSchema.type === "object" || propSchema.type === "array")
@@ -422,39 +440,41 @@ const DynamicJsonForm = forwardRef<DynamicJsonFormRef, DynamicJsonFormProps>(
             );
           }
 
-          let inputType = "text";
-          switch (propSchema.format) {
-            case "email":
-              inputType = "email";
-              break;
-            case "uri":
-              inputType = "url";
-              break;
-            case "date":
-              inputType = "date";
-              break;
-            case "date-time":
-              inputType = "datetime-local";
-              break;
-            default:
-              inputType = "text";
-              break;
+          // Special formats keep a typed <Input>; plain text uses <Textarea> to
+          // match the height and style of direct-parameter string inputs.
+          type SpecialFormat = "email" | "uri" | "date" | "date-time";
+          const specialFormatMap: Record<SpecialFormat, string> = {
+            email: "email",
+            uri: "url",
+            date: "date",
+            "date-time": "datetime-local",
+          };
+          const specialInputType =
+            specialFormatMap[propSchema.format as SpecialFormat];
+
+          if (specialInputType) {
+            return (
+              <Input
+                type={specialInputType}
+                value={(currentValue as string) ?? ""}
+                onChange={(e) => handleFieldChange(path, e.target.value)}
+                placeholder={propSchema.description}
+                required={isRequired}
+                minLength={propSchema.minLength}
+                maxLength={propSchema.maxLength}
+                pattern={propSchema.pattern}
+              />
+            );
           }
 
           return (
-            <Input
-              type={inputType}
+            <Textarea
               value={(currentValue as string) ?? ""}
-              onChange={(e) => {
-                const val = e.target.value;
-                // Always allow setting string values, including empty strings
-                handleFieldChange(path, val);
-              }}
+              onChange={(e) => handleFieldChange(path, e.target.value)}
               placeholder={propSchema.description}
               required={isRequired}
               minLength={propSchema.minLength}
               maxLength={propSchema.maxLength}
-              pattern={propSchema.pattern}
             />
           );
         }
@@ -536,19 +556,23 @@ const DynamicJsonForm = forwardRef<DynamicJsonFormRef, DynamicJsonFormProps>(
 
         case "boolean":
           return (
-            <div className="space-y-2">
+            <div className="space-y-1">
               {propSchema.description && (
-                <p className="text-sm text-gray-600">
+                <p className="text-xs text-gray-500 dark:text-gray-400">
                   {propSchema.description}
                 </p>
               )}
-              <Input
-                type="checkbox"
-                checked={(currentValue as boolean) ?? false}
-                onChange={(e) => handleFieldChange(path, e.target.checked)}
-                className="w-4 h-4"
-                required={isRequired}
-              />
+              <div className="flex items-center gap-3 py-1">
+                <Switch
+                  checked={(currentValue as boolean) ?? false}
+                  onCheckedChange={(checked) =>
+                    handleFieldChange(path, checked)
+                  }
+                />
+                <span className="text-sm text-gray-600 dark:text-gray-400">
+                  {(currentValue as boolean) ? "True" : "False"}
+                </span>
+              </div>
             </div>
           );
         case "null":
@@ -601,7 +625,10 @@ const DynamicJsonForm = forwardRef<DynamicJsonFormRef, DynamicJsonFormProps>(
           if (!propSchema.items) return null;
 
           // Special handling: array of enums -> render multi-select control
-          const itemSchema = propSchema.items as JsonSchemaType;
+          // Normalize items so Optional[X] (anyOf:[X,null]) is unwrapped correctly.
+          const itemSchema = normalizeUnionType(
+            propSchema.items as JsonSchemaType,
+          );
           let multiOptions: { value: string; label: string }[] | null = null;
 
           const titledMulti = (
@@ -666,56 +693,69 @@ const DynamicJsonForm = forwardRef<DynamicJsonFormRef, DynamicJsonFormProps>(
             );
           }
 
-          // If the array items are simple, render as form fields, otherwise use JSON editor
-          if (isSimpleObject(propSchema.items)) {
+          // Typed object items → structured form with Add/Remove; untyped → JSON fallback
+          const itemIsObject =
+            itemSchema.type === "object" && !!itemSchema.properties;
+
+          if (isSimpleObject(itemSchema) || itemIsObject) {
             return (
               <div className="space-y-4">
-                {propSchema.description && (
-                  <p className="text-sm text-gray-600">
-                    {propSchema.description}
-                  </p>
-                )}
-
-                {propSchema.items?.description && (
-                  <p className="text-sm text-gray-500">
-                    Items: {propSchema.items.description}
-                  </p>
-                )}
-
                 <div className="space-y-2">
-                  {arrayValue.map((item, index) => (
-                    <div key={index} className="flex items-center gap-2">
-                      {renderFormFields(
-                        propSchema.items as JsonSchemaType,
-                        item,
-                        [...path, index.toString()],
-                        depth + 1,
-                      )}
-                      <Button
-                        variant="outline"
-                        size="sm"
-                        onClick={() => {
-                          const newArray = [...arrayValue];
-                          newArray.splice(index, 1);
-                          handleFieldChange(path, newArray);
-                        }}
-                      >
-                        Remove
-                      </Button>
-                    </div>
-                  ))}
+                  {arrayValue.map((item, index) =>
+                    itemIsObject ? (
+                      <div key={index} className="space-y-2">
+                        {renderFormFields(
+                          itemSchema,
+                          item,
+                          [...path, index.toString()],
+                          depth + 1,
+                        )}
+                        <div className="flex justify-end">
+                          <Button
+                            variant="outline"
+                            size="sm"
+                            onClick={() => {
+                              const newArray = [...arrayValue];
+                              newArray.splice(index, 1);
+                              handleFieldChange(path, newArray);
+                            }}
+                          >
+                            Remove
+                          </Button>
+                        </div>
+                      </div>
+                    ) : (
+                      <div key={index} className="flex items-center gap-2">
+                        {renderFormFields(
+                          itemSchema,
+                          item,
+                          [...path, index.toString()],
+                          depth + 1,
+                        )}
+                        <Button
+                          variant="outline"
+                          size="sm"
+                          onClick={() => {
+                            const newArray = [...arrayValue];
+                            newArray.splice(index, 1);
+                            handleFieldChange(path, newArray);
+                          }}
+                        >
+                          Remove
+                        </Button>
+                      </div>
+                    ),
+                  )}
                   <Button
                     variant="outline"
                     size="sm"
                     onClick={() => {
-                      const defaultValue = getArrayItemDefault(
-                        propSchema.items as JsonSchemaType,
-                      );
+                      const defaultValue = getArrayItemDefault(itemSchema);
                       handleFieldChange(path, [...arrayValue, defaultValue]);
                     }}
                     title={
-                      propSchema.items?.description
-                        ? `Add new ${propSchema.items.description}`
+                      itemSchema.description
+                        ? `Add new ${itemSchema.description}`
                         : "Add new item"
                     }
                   >
@@ -726,7 +766,7 @@ const DynamicJsonForm = forwardRef<DynamicJsonFormRef, DynamicJsonFormProps>(
             );
           }
 
-          // For complex arrays, fall back to JSON editor
+          // For truly unstructured arrays (no type or no properties), fall back to JSON editor
           return (
             <JsonEditor
               value={JSON.stringify(currentValue ?? [], null, 2)}
diff --git a/client/src/components/__tests__/DynamicJsonForm.array.test.tsx b/client/src/components/__tests__/DynamicJsonForm.array.test.tsx
index 39dfb2b90..d8836ea96 100644
--- a/client/src/components/__tests__/DynamicJsonForm.array.test.tsx
+++ b/client/src/components/__tests__/DynamicJsonForm.array.test.tsx
@@ -43,10 +43,6 @@ describe("DynamicJsonForm Array Fields", () => {
     it("should render form fields for simple array items", () => {
       renderSimpleArrayForm({ value: ["item1", "item2"] });
 
-      // Should show array description
-      expect(screen.getByText("Test array field")).toBeDefined();
-      expect(screen.getByText("Items: Array item")).toBeDefined();
-
       // Should show input fields for each item
       const inputs = screen.getAllByRole("textbox");
       expect(inputs).toHaveLength(2);
@@ -94,28 +90,86 @@ describe("DynamicJsonForm Array Fields", () => {
     it("should handle empty arrays", () => {
       renderSimpleArrayForm({ value: [] });
 
-      // Should show description and add button but no items
-      expect(screen.getByText("Test array field")).toBeDefined();
+      // Should show add button but no items
       expect(screen.getByText("Add Item")).toBeDefined();
       expect(screen.queryByText("Remove")).toBeNull();
     });
   });
 
-  describe("Complex Array Fallback", () => {
-    it("should render JSON editor for complex arrays", () => {
-      renderComplexArrayForm();
+  describe("Complex Array Rendering", () => {
+    it("should render structured form for arrays of objects with properties", () => {
+      renderComplexArrayForm({ value: [{ nested: {} }] });
+
+      // Should show Add Item and Remove — not fall back to raw JSON
+      expect(screen.getByText("Add Item")).toBeInTheDocument();
+      expect(screen.getByText("Remove")).toBeInTheDocument();
 
-      // Initially renders form view with Switch to JSON button; switch to JSON to see textarea
-      const switchBtn = screen.getByRole("button", { name: /switch to json/i });
-      expect(switchBtn).toBeInTheDocument();
-      fireEvent.click(switchBtn);
+      // Switch to JSON should still be available
+      expect(
+        screen.getByRole("button", { name: /switch to json/i }),
+      ).toBeInTheDocument();
+    });
 
-      const textarea = screen.getByRole("textbox");
-      expect(textarea).toHaveProperty("type", "textarea");
+    it("should render JSON editor for untyped (no-type) array items", () => {
+      const schema: JsonSchemaType = {
+        type: "array",
+        items: {} as JsonSchemaType, // no type at all
+      };
+      render(
+        <DynamicJsonForm schema={schema} value={[]} onChange={jest.fn()} />,
+      );
 
-      // Should not show form-specific array controls
+      // Falls back to JSON editor; no structured controls
       expect(screen.queryByText("Add Item")).toBeNull();
-      expect(screen.queryByText("Remove")).toBeNull();
+    });
+
+    it("should render structured form for Optional array (anyOf:[array,null])", () => {
+      const schema: JsonSchemaType = {
+        anyOf: [
+          {
+            type: "array",
+            items: { type: "string" as const },
+          },
+          { type: "null" },
+        ],
+      } as unknown as JsonSchemaType;
+      render(
+        <DynamicJsonForm
+          schema={schema}
+          value={["hello"]}
+          onChange={jest.fn()}
+        />,
+      );
+
+      // Should render as a structured string-array form, not a raw JSON box
+      expect(screen.getByText("Add Item")).toBeInTheDocument();
+      const inputs = screen.getAllByRole("textbox");
+      expect(inputs[0]).toHaveProperty("value", "hello");
+    });
+
+    it("should render structured form for array of Optional objects (items anyOf:[object,null])", () => {
+      const schema: JsonSchemaType = {
+        type: "array",
+        items: {
+          anyOf: [
+            {
+              type: "object" as const,
+              properties: { name: { type: "string" as const } },
+            },
+            { type: "null" },
+          ],
+        } as unknown as JsonSchemaType,
+      };
+      render(
+        <DynamicJsonForm
+          schema={schema}
+          value={[{ name: "Alice" }]}
+          onChange={jest.fn()}
+        />,
+      );
+
+      expect(screen.getByText("Add Item")).toBeInTheDocument();
+      expect(screen.getByText("Remove")).toBeInTheDocument();
     });
   });
 
@@ -127,11 +181,9 @@ describe("DynamicJsonForm Array Fields", () => {
       };
       renderSimpleArrayForm({ schema, value: ["test"] });
 
-      // Should render form fields, not JSON editor
-      expect(screen.getByRole("textbox")).not.toHaveProperty(
-        "type",
-        "textarea",
-      );
+      // Structured form controls are shown (not the JSON editor fallback)
+      expect(screen.getByText("Add Item")).toBeDefined();
+      expect(screen.getByText("Remove")).toBeDefined();
     });
 
     it("should detect number arrays as simple", () => {
@@ -153,9 +205,9 @@ describe("DynamicJsonForm Array Fields", () => {
       };
       renderSimpleArrayForm({ schema, value: [true, false] });
 
-      // Should render form fields (checkboxes)
-      const checkboxes = screen.getAllByRole("checkbox");
-      expect(checkboxes).toHaveLength(2);
+      // Should render Switch toggles (role="switch") for boolean items
+      const switches = screen.getAllByRole("switch");
+      expect(switches).toHaveLength(2);
     });
 
     it("should detect simple object arrays as simple", () => {
@@ -280,10 +332,10 @@ describe("DynamicJsonForm Array Fields", () => {
       const onChange = jest.fn();
       renderSimpleArrayForm({ schema, value: [true, false], onChange });
 
-      const checkboxes = screen.getAllByRole("checkbox");
-      expect(checkboxes).toHaveLength(2);
-      expect(checkboxes[0]).toHaveProperty("checked", true);
-      expect(checkboxes[1]).toHaveProperty("checked", false);
+      const switches = screen.getAllByRole("switch");
+      expect(switches).toHaveLength(2);
+      expect(switches[0]).toHaveAttribute("aria-checked", "true");
+      expect(switches[1]).toHaveAttribute("aria-checked", "false");
 
       // Test adding new boolean item
       const addButton = screen.getByText("Add Item");
@@ -303,9 +355,6 @@ describe("DynamicJsonForm Array Fields", () => {
         },
       };
       renderSimpleArrayForm({ schema });
-
-      expect(screen.getByText("List of names")).toBeDefined();
-      expect(screen.getByText("Items: Person name")).toBeDefined();
     });
 
     it("should use item description in add button title", () => {
diff --git a/client/src/components/__tests__/DynamicJsonForm.test.tsx b/client/src/components/__tests__/DynamicJsonForm.test.tsx
index a273f75ae..a59699d4e 100644
--- a/client/src/components/__tests__/DynamicJsonForm.test.tsx
+++ b/client/src/components/__tests__/DynamicJsonForm.test.tsx
@@ -31,10 +31,10 @@ describe("DynamicJsonForm String Fields", () => {
       expect(typeof onChange.mock.calls[0][0]).toBe("string");
     });
 
-    it("should render as text input, not number input", () => {
+    it("should render as textarea, not number input", () => {
       renderForm();
       const input = screen.getByRole("textbox");
-      expect(input).toHaveProperty("type", "text");
+      expect(input).toHaveProperty("type", "textarea");
     });
 
     it("should handle a union type of string and null", () => {
@@ -46,7 +46,7 @@ describe("DynamicJsonForm String Fields", () => {
         <DynamicJsonForm schema={schema} value={null} onChange={jest.fn()} />,
       );
       const input = screen.getByRole("textbox");
-      expect(input).toHaveProperty("type", "text");
+      expect(input).toHaveProperty("type", "textarea");
     });
   });
 
@@ -268,17 +268,8 @@ describe("DynamicJsonForm String Fields", () => {
       expect(input).toHaveProperty("maxLength", 10);
     });
 
-    it("should apply pattern validation", () => {
-      const schema: JsonSchemaType = {
-        type: "string",
-        pattern: "^[A-Za-z]+$",
-        description: "Letters only",
-      };
-      render(<DynamicJsonForm schema={schema} value="" onChange={jest.fn()} />);
-
-      const input = screen.getByRole("textbox");
-      expect(input).toHaveProperty("pattern", "^[A-Za-z]+$");
-    });
+    // Note: pattern is an <input>-only attribute; <textarea> does not support it,
+    // so plain-text string fields do not expose a pattern property.
   });
 });
 
@@ -430,7 +421,7 @@ describe("DynamicJsonForm Number Fields", () => {
 
 describe("DynamicJsonForm Boolean Fields", () => {
   describe("Basic Operations", () => {
-    it("should render checkbox for boolean type", () => {
+    it("should render switch for boolean type", () => {
       const schema: JsonSchemaType = {
         type: "boolean",
         description: "Enable notifications",
@@ -439,8 +430,8 @@ describe("DynamicJsonForm Boolean Fields", () => {
         <DynamicJsonForm schema={schema} value={false} onChange={jest.fn()} />,
       );
 
-      const checkbox = screen.getByRole("checkbox");
-      expect(checkbox).toHaveProperty("type", "checkbox");
+      const toggle = screen.getByRole("switch");
+      expect(toggle).toHaveAttribute("aria-checked", "false");
     });
 
     it("should call onChange with boolean value", () => {
@@ -453,8 +444,8 @@ describe("DynamicJsonForm Boolean Fields", () => {
         <DynamicJsonForm schema={schema} value={false} onChange={onChange} />,
       );
 
-      const checkbox = screen.getByRole("checkbox");
-      fireEvent.click(checkbox);
+      const toggle = screen.getByRole("switch");
+      fireEvent.click(toggle);
 
       expect(onChange).toHaveBeenCalledWith(true);
     });
@@ -468,8 +459,8 @@ describe("DynamicJsonForm Boolean Fields", () => {
         <DynamicJsonForm schema={schema} value={false} onChange={jest.fn()} />,
       );
 
-      const checkbox = screen.getByRole("checkbox");
-      expect(checkbox).toHaveProperty("checked", false);
+      const toggle = screen.getByRole("switch");
+      expect(toggle).toHaveAttribute("aria-checked", "false");
     });
   });
 });
@@ -507,8 +498,8 @@ describe("DynamicJsonForm Object Fields", () => {
       const numberInput = screen.getByRole("spinbutton");
 
       expect(textInputs).toHaveLength(2);
-      expect(textInputs[0]).toHaveProperty("type", "text");
-      expect(textInputs[1]).toHaveProperty("type", "email");
+      expect(textInputs[0]).toHaveProperty("type", "textarea"); // plain text → <textarea>
+      expect(textInputs[1]).toHaveProperty("type", "email"); // email format → <input type="email">
       expect(numberInput).toHaveProperty("type", "number");
       expect(numberInput).toHaveProperty("min", "18");
     });
@@ -610,10 +601,10 @@ describe("DynamicJsonForm Object Fields", () => {
       const nameLabel = screen.getByText("Name");
       const optionalLabel = screen.getByText("Optional");
 
-      const nameInput = nameLabel.closest("div")?.querySelector("input");
+      const nameInput = nameLabel.closest("div")?.querySelector("textarea");
       const optionalInput = optionalLabel
         .closest("div")
-        ?.querySelector("input");
+        ?.querySelector("textarea");
 
       expect(nameInput).toHaveProperty("required", true);
       expect(optionalInput).toHaveProperty("required", false);