From fd99d879c5075c5fda8eb05a18ac735752b5b7cf Mon Sep 17 00:00:00 2001
From: cliffhall <cliff@futurescale.com>
Date: Tue, 2 Dec 2025 19:37:28 -0500
Subject: [PATCH 1/4] DynamicJsonForm improvements and full enum schema support
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

In DynamicJsonForm.tsx,
  - Support all five enum shapes used by MCP SDK:
    - Titled single-select via `oneOf`/`anyOf` with `{ const, title }`
    - Untitled single-select via `enum`
    - Titled legacy single-select with optional `enumNames` for labels
    - Titled multi-select via `items.anyOf`/`oneOf`
    - Untitled multi-select via `items.enum`
  - Show field descriptions for string select fields and boolean checkboxes (consistent help text above inputs).
  - Prefer schema property `title` for object field labels; fall back to the JSON key when missing.
  - Allow top‑level form rendering for objects with properties, arrays with items, and primitive types (was overly strict before).
  - Multi-select UI: sensible list size and `minItems`/`maxItems` helper text when present.
  - JSON editor fallback, copy/format controls, and debounced parsing preserved.
  - apply defaults for optional fields during form init

In schemaUtils.ts
  - `generateDefaultValue` now includes optional properties that declare a `default`, ensuring fields like strings show their defaults on first render.

In jsonUtils.ts
  - Add legacy `enumNames?: string[]` and array constraints `minItems?`/`maxItems?`.
---
 client/src/components/DynamicJsonForm.tsx | 235 ++++++++++++++++------
 client/src/utils/jsonUtils.ts             |   5 +
 client/src/utils/schemaUtils.ts           |   6 +-
 3 files changed, 184 insertions(+), 62 deletions(-)

diff --git a/client/src/components/DynamicJsonForm.tsx b/client/src/components/DynamicJsonForm.tsx
index 685401ab9..af5f4def4 100644
--- a/client/src/components/DynamicJsonForm.tsx
+++ b/client/src/components/DynamicJsonForm.tsx
@@ -76,7 +76,38 @@ const getArrayItemDefault = (schema: JsonSchemaType): JsonValue => {
 
 const DynamicJsonForm = forwardRef<DynamicJsonFormRef, DynamicJsonFormProps>(
   ({ schema, value, onChange, maxDepth = 3 }, ref) => {
-    const isOnlyJSON = !isSimpleObject(schema);
+    // Determine if we can render a form at the top level.
+    // This is more permissive than isSimpleObject():
+    // - Objects with any properties are form-capable (individual complex fields may still fallback to JSON)
+    // - Arrays with defined items are form-capable
+    // - Primitive types are form-capable
+    const canRenderTopLevelForm = (s: JsonSchemaType): boolean => {
+      const primitiveTypes = ["string", "number", "integer", "boolean", "null"];
+
+      const hasType = Array.isArray(s.type) ? s.type.length > 0 : !!s.type;
+      if (!hasType) return false;
+
+      const includesType = (t: string) =>
+        Array.isArray(s.type) ? s.type.includes(t as any) : s.type === t;
+
+      // Primitive at top-level
+      if (primitiveTypes.some(includesType)) return true;
+
+      // Object with properties
+      if (includesType("object")) {
+        const keys = Object.keys(s.properties ?? {});
+        return keys.length > 0;
+      }
+
+      // Array with items
+      if (includesType("array")) {
+        return !!s.items;
+      }
+
+      return false;
+    };
+
+    const isOnlyJSON = !canRenderTopLevelForm(schema);
     const [isJsonMode, setIsJsonMode] = useState(isOnlyJSON);
     const [jsonError, setJsonError] = useState<string>();
     const [copiedJson, setCopiedJson] = useState<boolean>(false);
@@ -267,63 +298,76 @@ const DynamicJsonForm = forwardRef<DynamicJsonFormRef, DynamicJsonFormProps>(
 
       switch (fieldType) {
         case "string": {
-          if (
-            propSchema.oneOf &&
-            propSchema.oneOf.every(
-              (option) =>
-                typeof option.const === "string" &&
-                typeof option.title === "string",
-            )
-          ) {
+          // Titled single-select using oneOf/anyOf with const/title pairs
+          const titledOptions = (propSchema.oneOf ?? propSchema.anyOf)?.filter(
+            (opt) => (opt as any).const !== undefined,
+          ) as { const: string; title?: string }[] | undefined;
+
+          if (titledOptions && titledOptions.length > 0) {
             return (
-              <select
-                value={(currentValue as string) ?? ""}
-                onChange={(e) => {
-                  const val = e.target.value;
-                  if (!val && !isRequired) {
-                    handleFieldChange(path, undefined);
-                  } else {
-                    handleFieldChange(path, val);
-                  }
-                }}
-                required={isRequired}
-                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-800"
-              >
-                <option value="">Select an option...</option>
-                {propSchema.oneOf.map((option) => (
-                  <option
-                    key={option.const as string}
-                    value={option.const as string}
-                  >
-                    {option.title as string}
-                  </option>
-                ))}
-              </select>
+              <div className="space-y-2">
+                {propSchema.description && (
+                  <p className="text-sm text-gray-600">
+                    {propSchema.description}
+                  </p>
+                )}
+                <select
+                  value={(currentValue as string) ?? ""}
+                  onChange={(e) => {
+                    const val = e.target.value;
+                    if (!val && !isRequired) {
+                      handleFieldChange(path, undefined);
+                    } else {
+                      handleFieldChange(path, val);
+                    }
+                  }}
+                  required={isRequired}
+                  className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-800"
+                >
+                  <option value="">Select an option...</option>
+                  {titledOptions.map((option) => (
+                    <option key={option.const} value={option.const}>
+                      {option.title ?? String(option.const)}
+                    </option>
+                  ))}
+                </select>
+              </div>
             );
           }
 
+          // Untitled single-select using enum (with optional legacy enumNames for labels)
           if (propSchema.enum) {
+            const names = Array.isArray((propSchema as any).enumNames)
+              ? (propSchema as any).enumNames
+              : undefined;
             return (
-              <select
-                value={(currentValue as string) ?? ""}
-                onChange={(e) => {
-                  const val = e.target.value;
-                  if (!val && !isRequired) {
-                    handleFieldChange(path, undefined);
-                  } else {
-                    handleFieldChange(path, val);
-                  }
-                }}
-                required={isRequired}
-                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-800"
-              >
-                <option value="">Select an option...</option>
-                {propSchema.enum.map((option) => (
-                  <option key={option} value={option}>
-                    {option}
-                  </option>
-                ))}
-              </select>
+              <div className="space-y-2">
+                {propSchema.description && (
+                  <p className="text-sm text-gray-600">
+                    {propSchema.description}
+                  </p>
+                )}
+                <select
+                  value={(currentValue as string) ?? ""}
+                  onChange={(e) => {
+                    const val = e.target.value;
+                    if (!val && !isRequired) {
+                      handleFieldChange(path, undefined);
+                    } else {
+                      handleFieldChange(path, val);
+                    }
+                  }}
+                  required={isRequired}
+                  className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-800"
+                >
+                  <option value="">Select an option...</option>
+                  {propSchema.enum.map((option, idx) => (
+                    <option key={option} value={option}>
+                      {names?.[idx] ?? option}
+                    </option>
+                  ))}
+                </select>
+              </div>
             );
           }
 
@@ -413,13 +457,20 @@ const DynamicJsonForm = forwardRef<DynamicJsonFormRef, DynamicJsonFormProps>(
 
         case "boolean":
           return (
-            <Input
-              type="checkbox"
-              checked={(currentValue as boolean) ?? false}
-              onChange={(e) => handleFieldChange(path, e.target.checked)}
-              className="w-4 h-4"
-              required={isRequired}
-            />
+            <div className="space-y-2">
+              {propSchema.description && (
+                <p className="text-sm text-gray-600">
+                  {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>
           );
         case "null":
           return null;
@@ -449,7 +500,7 @@ const DynamicJsonForm = forwardRef<DynamicJsonFormRef, DynamicJsonFormProps>(
               {Object.entries(propSchema.properties).map(([key, subSchema]) => (
                 <div key={key}>
                   <label className="block text-sm font-medium mb-1">
-                    {key}
+                    {(subSchema as JsonSchemaType).title ?? key}
                     {propSchema.required?.includes(key) && (
                       <span className="text-red-500 ml-1">*</span>
                     )}
@@ -470,6 +521,70 @@ const DynamicJsonForm = forwardRef<DynamicJsonFormRef, DynamicJsonFormProps>(
           const arrayValue = Array.isArray(currentValue) ? currentValue : [];
           if (!propSchema.items) return null;
 
+          // Special handling: array of enums -> render multi-select control
+          const itemSchema = propSchema.items as JsonSchemaType;
+          let multiOptions: { value: string; label: string }[] | null = null;
+
+          const titledMulti = (itemSchema.anyOf ?? itemSchema.oneOf)?.filter(
+            (opt) => (opt as any).const !== undefined,
+          ) as { const: string; title?: string }[] | undefined;
+
+          if (titledMulti && titledMulti.length > 0) {
+            multiOptions = titledMulti.map((o) => ({
+              value: o.const,
+              label: o.title ?? String(o.const),
+            }));
+          } else if (itemSchema.enum) {
+            const names = Array.isArray((itemSchema as any).enumNames)
+              ? (itemSchema as any).enumNames
+              : undefined;
+            multiOptions = itemSchema.enum.map((v, i) => ({
+              value: v,
+              label: names?.[i] ?? v,
+            }));
+          }
+
+          if (multiOptions) {
+            const selectSize = Math.min(Math.max(multiOptions.length, 3), 8);
+            return (
+              <div className="space-y-2">
+                {propSchema.description && (
+                  <p className="text-sm text-gray-600">
+                    {propSchema.description}
+                  </p>
+                )}
+                <select
+                  multiple
+                  size={selectSize}
+                  value={arrayValue as string[]}
+                  onChange={(e) => {
+                    const selected = Array.from(
+                      (e.target as HTMLSelectElement).selectedOptions,
+                    ).map((o) => o.value);
+                    handleFieldChange(path, selected);
+                  }}
+                  className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-800"
+                >
+                  {multiOptions.map((opt) => (
+                    <option key={opt.value} value={opt.value}>
+                      {opt.label}
+                    </option>
+                  ))}
+                </select>
+                {(propSchema.minItems || propSchema.maxItems) && (
+                  <p className="text-xs text-gray-500">
+                    {propSchema.minItems
+                      ? `Select at least ${propSchema.minItems}. `
+                      : ""}
+                    {propSchema.maxItems
+                      ? `Select at most ${propSchema.maxItems}.`
+                      : ""}
+                  </p>
+                )}
+              </div>
+            );
+          }
+
           // If the array items are simple, render as form fields, otherwise use JSON editor
           if (isSimpleObject(propSchema.items)) {
             return (
diff --git a/client/src/utils/jsonUtils.ts b/client/src/utils/jsonUtils.ts
index 334dafc24..27fc82479 100644
--- a/client/src/utils/jsonUtils.ts
+++ b/client/src/utils/jsonUtils.ts
@@ -37,6 +37,9 @@ export type JsonSchemaType = {
   default?: JsonValue;
   properties?: Record<string, JsonSchemaType>;
   items?: JsonSchemaType;
+  // Array validation constraints
+  minItems?: number;
+  maxItems?: number;
   minimum?: number;
   maximum?: number;
   minLength?: number;
@@ -45,6 +48,8 @@ export type JsonSchemaType = {
   pattern?: string;
   format?: string;
   enum?: string[];
+  // Non-standard legacy support: titles for enum values
+  enumNames?: string[];
   const?: JsonValue;
   oneOf?: (JsonSchemaType | JsonSchemaConst)[];
   anyOf?: (JsonSchemaType | JsonSchemaConst)[];
diff --git a/client/src/utils/schemaUtils.ts b/client/src/utils/schemaUtils.ts
index 42d77d439..846fb69cd 100644
--- a/client/src/utils/schemaUtils.ts
+++ b/client/src/utils/schemaUtils.ts
@@ -115,9 +115,11 @@ export function generateDefaultValue(
       if (!schema.properties) return isRequired ? {} : undefined;
 
       const obj: JsonObject = {};
-      // Only include properties that are required according to the schema's required array
+      // Include required properties OR optional properties that declare a default
       Object.entries(schema.properties).forEach(([key, prop]) => {
-        if (isPropertyRequired(key, schema)) {
+        const hasExplicitDefault =
+          "default" in prop && (prop as JsonSchemaType).default !== undefined;
+        if (isPropertyRequired(key, schema) || hasExplicitDefault) {
           const value = generateDefaultValue(prop, key, schema);
           if (value !== undefined) {
             obj[key] = value;

From 3f0c45e10dca7ff3a3bcd35c218a3f009830bd91 Mon Sep 17 00:00:00 2001
From: cliffhall <cliff@futurescale.com>
Date: Wed, 3 Dec 2025 09:58:18 -0500
Subject: [PATCH 2/4] update DynamicJsonForm tests; add enum coverage and
 JSON-mode assertions
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Align tests with new form-first rendering and UI behavior:
  - Labels prefer schema `title` over property key.
  - Descriptions shown for boolean checkboxes and select fields.
  - Explicit mode switching between Form/JSON when needed.
- Add comprehensive coverage for enum schema variants:
  - Titled single-select via `oneOf`/`anyOf` with `{ const, title }`.
  - Untitled single-select via `enum` (with legacy `enumNames` labels).
  - Untitled multi-select via `items.enum` with `minItems`/`maxItems` helper text.
  - Titled multi-select via `items.anyOf`/`oneOf` with `{ const, title }`.
- Adjust complex/JSON-mode tests to click “Switch to JSON” before asserting textarea and clipboard interactions.
- Fix debounced JSON update expectations to assert parsed objects rather than raw text.

Files updated:
- `client/src/components/__tests__/DynamicJsonForm.test.tsx`
- `client/src/components/__tests__/DynamicJsonForm.array.test.tsx`
---
 .../__tests__/DynamicJsonForm.array.test.tsx  |  82 +++++++++++++-
 .../__tests__/DynamicJsonForm.test.tsx        | 105 ++++++++++++++++--
 2 files changed, 178 insertions(+), 9 deletions(-)

diff --git a/client/src/components/__tests__/DynamicJsonForm.array.test.tsx b/client/src/components/__tests__/DynamicJsonForm.array.test.tsx
index 00a324bf2..39dfb2b90 100644
--- a/client/src/components/__tests__/DynamicJsonForm.array.test.tsx
+++ b/client/src/components/__tests__/DynamicJsonForm.array.test.tsx
@@ -1,4 +1,5 @@
 import { render, screen, fireEvent } from "@testing-library/react";
+import "@testing-library/jest-dom";
 import { describe, it, expect, jest } from "@jest/globals";
 import DynamicJsonForm from "../DynamicJsonForm";
 import type { JsonSchemaType } from "@/utils/jsonUtils";
@@ -104,7 +105,11 @@ describe("DynamicJsonForm Array Fields", () => {
     it("should render JSON editor for complex arrays", () => {
       renderComplexArrayForm();
 
-      // Should render as JSON editor (textarea)
+      // 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);
+
       const textarea = screen.getByRole("textbox");
       expect(textarea).toHaveProperty("type", "textarea");
 
@@ -173,6 +178,81 @@ describe("DynamicJsonForm Array Fields", () => {
   });
 
   describe("Array with Different Item Types", () => {
+    it("should render multi-select for untitled items.enum with helper text", () => {
+      const schema: JsonSchemaType = {
+        type: "array",
+        title: "Colors",
+        description: "Pick colors",
+        minItems: 1,
+        maxItems: 3,
+        items: { type: "string", enum: ["red", "green", "blue"] },
+      } as JsonSchemaType;
+      const onChange = jest.fn();
+      render(
+        <DynamicJsonForm schema={schema} value={["red"]} onChange={onChange} />,
+      );
+
+      // Description visible
+      expect(screen.getByText("Pick colors")).toBeInTheDocument();
+      // Multi-select present
+      const listbox = screen.getByRole("listbox");
+      expect(listbox).toHaveAttribute("multiple");
+
+      // Helper text shows min/max
+      expect(screen.getByText(/Select at least 1/i)).toBeInTheDocument();
+      expect(screen.getByText(/Select at most 3/i)).toBeInTheDocument();
+
+      // Select another option by toggling option.selected
+      const colorOptions = screen.getAllByRole("option");
+      // options: red, green, blue
+      colorOptions[0].selected = true; // red
+      colorOptions[2].selected = true; // blue
+      fireEvent.change(listbox);
+      expect(onChange).toHaveBeenCalledWith(["red", "blue"]);
+    });
+
+    it("should render titled multi-select for items.anyOf with const/title", () => {
+      const schema: JsonSchemaType = {
+        type: "array",
+        description: "Pick fish",
+        items: {
+          anyOf: [
+            { const: "fish-1", title: "Tuna" },
+            { const: "fish-2", title: "Salmon" },
+            { const: "fish-3", title: "Trout" },
+          ],
+        } as unknown as JsonSchemaType,
+      } as unknown as JsonSchemaType;
+      const onChange = jest.fn();
+      render(
+        <DynamicJsonForm
+          schema={schema}
+          value={["fish-1"]}
+          onChange={onChange}
+        />,
+      );
+
+      // Description visible
+      expect(screen.getByText("Pick fish")).toBeInTheDocument();
+
+      const listbox = screen.getByRole("listbox");
+      expect(listbox).toHaveAttribute("multiple");
+
+      // Ensure options have titles as labels
+      const options = screen.getAllByRole("option");
+      expect(options[0]).toHaveProperty("textContent", "Tuna");
+      expect(options[1]).toHaveProperty("textContent", "Salmon");
+      expect(options[2]).toHaveProperty("textContent", "Trout");
+
+      // Select fish-2 and fish-3
+      const fishOptions = screen.getAllByRole("option");
+      // options: Tuna (fish-1), Salmon (fish-2), Trout (fish-3)
+      fishOptions[0].selected = false; // deselect fish-1
+      fishOptions[1].selected = true; // fish-2
+      fishOptions[2].selected = true; // fish-3
+      fireEvent.change(listbox);
+      expect(onChange).toHaveBeenCalledWith(["fish-2", "fish-3"]);
+    });
     it("should handle integer array items", () => {
       const schema = {
         type: "array" as const,
diff --git a/client/src/components/__tests__/DynamicJsonForm.test.tsx b/client/src/components/__tests__/DynamicJsonForm.test.tsx
index 770c7e668..a9f17d55b 100644
--- a/client/src/components/__tests__/DynamicJsonForm.test.tsx
+++ b/client/src/components/__tests__/DynamicJsonForm.test.tsx
@@ -202,6 +202,55 @@ describe("DynamicJsonForm String Fields", () => {
       fireEvent.change(select, { target: { value: "amber" } });
       expect(onChange).toHaveBeenCalledWith("amber");
     });
+
+    it("should render anyOf with const/title for labeled options and show description", () => {
+      const onChange = jest.fn();
+      const schema: JsonSchemaType = {
+        type: "string",
+        title: "Heroes",
+        description: "Choose a hero",
+        anyOf: [
+          { const: "hero-1", title: "Superman" },
+          { const: "hero-2", title: "Batman" },
+        ],
+      };
+      render(<DynamicJsonForm schema={schema} value="" onChange={onChange} />);
+
+      // Description should be visible above the select
+      expect(screen.getByText("Choose a hero")).toBeInTheDocument();
+      const select = screen.getByRole("combobox");
+      const options = screen.getAllByRole("option");
+      expect(options).toHaveLength(3);
+      expect(options[1]).toHaveProperty("textContent", "Superman");
+      expect(options[2]).toHaveProperty("textContent", "Batman");
+
+      fireEvent.change(select, { target: { value: "hero-2" } });
+      expect(onChange).toHaveBeenCalledWith("hero-2");
+    });
+
+    it("should render legacy enum with enumNames as labels", () => {
+      const onChange = jest.fn();
+      const schema: JsonSchemaType = {
+        type: "string",
+        title: "Pets",
+        description: "Choose a pet",
+        enum: ["pet-1", "pet-2", "pet-3"],
+        enumNames: ["Cat", "Dog", "Bird"],
+      } as unknown as JsonSchemaType; // enumNames is legacy extension
+
+      render(<DynamicJsonForm schema={schema} value="" onChange={onChange} />);
+
+      // Description should be visible above the select
+      expect(screen.getByText("Choose a pet")).toBeInTheDocument();
+      const options = screen.getAllByRole("option");
+      expect(options[1]).toHaveProperty("textContent", "Cat");
+      expect(options[2]).toHaveProperty("textContent", "Dog");
+      expect(options[3]).toHaveProperty("textContent", "Bird");
+
+      const select = screen.getByRole("combobox");
+      fireEvent.change(select, { target: { value: "pet-2" } });
+      expect(onChange).toHaveBeenCalledWith("pet-2");
+    });
   });
 
   describe("Validation Attributes", () => {
@@ -535,8 +584,8 @@ describe("DynamicJsonForm Object Fields", () => {
         <DynamicJsonForm schema={schema} value={{}} onChange={jest.fn()} />,
       );
 
-      const nameLabel = screen.getByText("name");
-      const optionalLabel = screen.getByText("optional");
+      const nameLabel = screen.getByText("Name");
+      const optionalLabel = screen.getByText("Optional");
 
       const nameInput = nameLabel.closest("div")?.querySelector("input");
       const optionalInput = optionalLabel
@@ -567,30 +616,46 @@ describe("DynamicJsonForm Complex Fields", () => {
   };
 
   describe("Basic Operations", () => {
-    it("should render textbox and autoformat button, but no switch-to-form button", () => {
+    it("should allow switching to JSON mode and show copy/format buttons", () => {
       renderForm();
+
+      // Initially renders as a form with a Switch to JSON button
+      const switchToJson = screen.getByRole("button", {
+        name: /switch to json/i,
+      });
+      expect(switchToJson).toBeInTheDocument();
+
+      // Switch to JSON mode
+      fireEvent.click(switchToJson);
+
+      // Now a textarea and JSON helpers should be visible
       const input = screen.getByRole("textbox");
       expect(input).toHaveProperty("type", "textarea");
-      const buttons = screen.getAllByRole("button");
-      expect(buttons).toHaveLength(2); // Copy JSON + Format JSON
       const copyButton = screen.getByRole("button", { name: /copy json/i });
       const formatButton = screen.getByRole("button", { name: /format json/i });
       expect(copyButton).toBeTruthy();
       expect(formatButton).toBeTruthy();
+      // And a Switch to Form button should appear
+      expect(
+        screen.getByRole("button", { name: /switch to form/i }),
+      ).toBeInTheDocument();
     });
 
-    it("should pass changed values to onChange", () => {
+    it("should pass changed values to onChange in JSON mode", () => {
       const onChange = jest.fn();
       renderForm({ onChange });
 
+      // Switch to JSON mode first
+      fireEvent.click(screen.getByRole("button", { name: /switch to json/i }));
+
       const input = screen.getByRole("textbox");
       fireEvent.change(input, {
         target: { value: `{ "nested": "i am string" }` },
       });
 
       // The onChange handler is debounced when using the JSON view, so we need to wait a little bit
-      waitFor(() => {
-        expect(onChange).toHaveBeenCalledWith(`{ "nested": "i am string" }`);
+      return waitFor(() => {
+        expect(onChange).toHaveBeenCalledWith({ nested: "i am string" });
       });
     });
   });
@@ -626,6 +691,10 @@ describe("DynamicJsonForm Copy JSON Functionality", () => {
     it("should render Copy JSON button when in JSON mode", () => {
       renderFormInJsonMode();
 
+      // Switch to JSON mode to reveal copy/format buttons
+      const switchBtn = screen.getByRole("button", { name: /switch to json/i });
+      fireEvent.click(switchBtn);
+
       const copyButton = screen.getByRole("button", { name: "Copy JSON" });
       expect(copyButton).toBeTruthy();
     });
@@ -653,6 +722,10 @@ describe("DynamicJsonForm Copy JSON Functionality", () => {
 
       renderFormInJsonMode({ value: testValue });
 
+      // Switch to JSON mode first
+      const switchBtn = screen.getByRole("button", { name: /switch to json/i });
+      fireEvent.click(switchBtn);
+
       const copyButton = screen.getByRole("button", { name: "Copy JSON" });
       fireEvent.click(copyButton);
 
@@ -768,6 +841,10 @@ describe("DynamicJsonForm Validation Functionality", () => {
     it("should return valid for valid JSON in JSON mode", () => {
       renderFormWithRef();
 
+      // Switch to JSON mode to enable textarea editing/validation
+      const switchBtn = screen.getByRole("button", { name: /switch to json/i });
+      fireEvent.click(switchBtn);
+
       const validateButton = screen.getByTestId("validate-button");
       fireEvent.click(validateButton);
 
@@ -778,6 +855,10 @@ describe("DynamicJsonForm Validation Functionality", () => {
     it("should return invalid for malformed JSON in JSON mode", async () => {
       renderFormWithRef();
 
+      // Switch to JSON mode first
+      const switchBtn = screen.getByRole("button", { name: /switch to json/i });
+      fireEvent.click(switchBtn);
+
       // Enter invalid JSON
       const textarea = screen.getByRole("textbox");
       fireEvent.change(textarea, { target: { value: '{ "invalid": json }' } });
@@ -799,6 +880,10 @@ describe("DynamicJsonForm Validation Functionality", () => {
     it("should return valid for empty JSON in JSON mode", () => {
       renderFormWithRef();
 
+      // Switch to JSON mode first
+      const switchBtn = screen.getByRole("button", { name: /switch to json/i });
+      fireEvent.click(switchBtn);
+
       // Clear the textarea
       const textarea = screen.getByRole("textbox");
       fireEvent.change(textarea, { target: { value: "" } });
@@ -813,6 +898,10 @@ describe("DynamicJsonForm Validation Functionality", () => {
     it("should set error state when validation fails", async () => {
       renderFormWithRef();
 
+      // Switch to JSON mode first
+      const switchBtn = screen.getByRole("button", { name: /switch to json/i });
+      fireEvent.click(switchBtn);
+
       // Enter invalid JSON
       const textarea = screen.getByRole("textbox");
       fireEvent.change(textarea, {

From d0c5b884c6a4e198e2130a3370ffd64b1ffac962 Mon Sep 17 00:00:00 2001
From: cliffhall <cliff@futurescale.com>
Date: Wed, 3 Dec 2025 10:08:13 -0500
Subject: [PATCH 3/4] Fix linter issues in DynamicJsonForm.tsx

---
 client/src/components/DynamicJsonForm.tsx | 41 +++++++++++++++--------
 1 file changed, 27 insertions(+), 14 deletions(-)

diff --git a/client/src/components/DynamicJsonForm.tsx b/client/src/components/DynamicJsonForm.tsx
index af5f4def4..1cfe46c39 100644
--- a/client/src/components/DynamicJsonForm.tsx
+++ b/client/src/components/DynamicJsonForm.tsx
@@ -11,7 +11,11 @@ import { Input } from "@/components/ui/input";
 import JsonEditor from "./JsonEditor";
 import { updateValueAtPath } from "@/utils/jsonUtils";
 import { generateDefaultValue } from "@/utils/schemaUtils";
-import type { JsonValue, JsonSchemaType } from "@/utils/jsonUtils";
+import type {
+  JsonValue,
+  JsonSchemaType,
+  JsonSchemaConst,
+} from "@/utils/jsonUtils";
 import { useToast } from "@/lib/hooks/useToast";
 import { CheckCheck, Copy } from "lucide-react";
 
@@ -88,7 +92,9 @@ const DynamicJsonForm = forwardRef<DynamicJsonFormRef, DynamicJsonFormProps>(
       if (!hasType) return false;
 
       const includesType = (t: string) =>
-        Array.isArray(s.type) ? s.type.includes(t as any) : s.type === t;
+        Array.isArray(s.type)
+          ? (s.type as ReadonlyArray<string>).includes(t)
+          : s.type === t;
 
       // Primitive at top-level
       if (primitiveTypes.some(includesType)) return true;
@@ -299,9 +305,11 @@ const DynamicJsonForm = forwardRef<DynamicJsonFormRef, DynamicJsonFormProps>(
       switch (fieldType) {
         case "string": {
           // Titled single-select using oneOf/anyOf with const/title pairs
-          const titledOptions = (propSchema.oneOf ?? propSchema.anyOf)?.filter(
-            (opt) => (opt as any).const !== undefined,
-          ) as { const: string; title?: string }[] | undefined;
+          const titledOptions = (
+            (propSchema.oneOf ?? propSchema.anyOf) as
+              | (JsonSchemaType | JsonSchemaConst)[]
+              | undefined
+          )?.filter((opt): opt is JsonSchemaConst => "const" in opt);
 
           if (titledOptions && titledOptions.length > 0) {
             return (
@@ -326,7 +334,10 @@ const DynamicJsonForm = forwardRef<DynamicJsonFormRef, DynamicJsonFormProps>(
                 >
                   <option value="">Select an option...</option>
                   {titledOptions.map((option) => (
-                    <option key={option.const} value={option.const}>
+                    <option
+                      key={String(option.const)}
+                      value={String(option.const)}
+                    >
                       {option.title ?? String(option.const)}
                     </option>
                   ))}
@@ -337,8 +348,8 @@ const DynamicJsonForm = forwardRef<DynamicJsonFormRef, DynamicJsonFormProps>(
 
           // Untitled single-select using enum (with optional legacy enumNames for labels)
           if (propSchema.enum) {
-            const names = Array.isArray((propSchema as any).enumNames)
-              ? (propSchema as any).enumNames
+            const names = Array.isArray(propSchema.enumNames)
+              ? propSchema.enumNames
               : undefined;
             return (
               <div className="space-y-2">
@@ -525,18 +536,20 @@ const DynamicJsonForm = forwardRef<DynamicJsonFormRef, DynamicJsonFormProps>(
           const itemSchema = propSchema.items as JsonSchemaType;
           let multiOptions: { value: string; label: string }[] | null = null;
 
-          const titledMulti = (itemSchema.anyOf ?? itemSchema.oneOf)?.filter(
-            (opt) => (opt as any).const !== undefined,
-          ) as { const: string; title?: string }[] | undefined;
+          const titledMulti = (
+            (itemSchema.anyOf ?? itemSchema.oneOf) as
+              | (JsonSchemaType | JsonSchemaConst)[]
+              | undefined
+          )?.filter((opt): opt is JsonSchemaConst => "const" in opt);
 
           if (titledMulti && titledMulti.length > 0) {
             multiOptions = titledMulti.map((o) => ({
-              value: o.const,
+              value: String(o.const),
               label: o.title ?? String(o.const),
             }));
           } else if (itemSchema.enum) {
-            const names = Array.isArray((itemSchema as any).enumNames)
-              ? (itemSchema as any).enumNames
+            const names = Array.isArray(itemSchema.enumNames)
+              ? itemSchema.enumNames
               : undefined;
             multiOptions = itemSchema.enum.map((v, i) => ({
               value: v,

From cb1be764c123112be7b02d295719a36c86dc918c Mon Sep 17 00:00:00 2001
From: cliffhall <cliff@futurescale.com>
Date: Wed, 3 Dec 2025 10:16:33 -0500
Subject: [PATCH 4/4] Exclude tests from build in tsconfig.app.json

---
 client/tsconfig.app.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/client/tsconfig.app.json b/client/tsconfig.app.json
index e6620f7d0..6667055c8 100644
--- a/client/tsconfig.app.json
+++ b/client/tsconfig.app.json
@@ -27,5 +27,6 @@
     "resolveJsonModule": true,
     "types": ["jest", "@testing-library/jest-dom", "node"]
   },
-  "include": ["src"]
+  "include": ["src"],
+  "exclude": ["src/**/*.test.ts", "src/**/*.test.tsx", "src/**/__tests__/**"]
 }