From 98a28e1b829d54fbf900eadeca80c0848c9f07c1 Mon Sep 17 00:00:00 2001
From: Marie Harris <marie.harris@zebra.com>
Date: Tue, 10 Mar 2026 22:59:23 -0400
Subject: [PATCH 1/9] feat: show required form inputs and compatible component
 types

When building a form, users had no visibility into what inputs needed
to be mapped or what form component types to use for each input.

- formSchemaUtils: add extractInputPaths() to flatten a JSONSchema7
  inputDefinition into { path, type } pairs
- pathOptionsService: export TYPE_COMPATIBILITY, COMPONENT_TYPE_LABELS,
  and compatibleComponentLabels() for use outside Form-JS modules
- SelectedEligibilityCheck: render Required Form Inputs section showing
  each input path, its type, and compatible component types (filling in
  the existing placeholder comment)
- FormValidationDrawer: show compatible component type hints on each
  missing input row so users know what field type to add
- FormValidationDrawer: rename trigger to 'Required Inputs' and add a
  red badge showing the missing input count at a glance
---
 .../src/components/project/FormEditorView.tsx | 25 ++++++---
 .../customKeyDropdown/pathOptionsService.ts   | 25 ++++++++-
 .../SelectedEligibilityCheck.tsx              | 23 ++++++--
 builder-frontend/src/utils/formSchemaUtils.ts | 52 +++++++++++++++++++
 4 files changed, 115 insertions(+), 10 deletions(-)

diff --git a/builder-frontend/src/components/project/FormEditorView.tsx b/builder-frontend/src/components/project/FormEditorView.tsx
index 72a1be5c..258dd013 100644
--- a/builder-frontend/src/components/project/FormEditorView.tsx
+++ b/builder-frontend/src/components/project/FormEditorView.tsx
@@ -12,7 +12,7 @@ import Drawer from "@corvu/drawer"; // 'corvu/drawer'
 
 import CustomFormFieldsModule from "./formJsExtensions/customFormFields";
 import { customKeyModule } from './formJsExtensions/customKeyDropdown/customKeyDropdownProvider';
-import PathOptionsService, { pathOptionsModule } from './formJsExtensions/customKeyDropdown/pathOptionsService';
+import PathOptionsService, { compatibleComponentLabels, pathOptionsModule } from './formJsExtensions/customKeyDropdown/pathOptionsService';
 
 import { saveFormSchema, fetchFormPaths } from "../../api/screener";
 import { extractFormPaths } from "../../utils/formSchemaUtils";
@@ -226,8 +226,18 @@ const FormValidationDrawer = (
               my-auto rounded-lg
               text-lg font-medium transition-all duration-100 "
           >
-            <div class="btn-default btn-gray shadow-[0_0_10px_rgba(0,0,0,0.4)]">
-              Validate Form Outputs
+            <div class="btn-default btn-gray shadow-[0_0_10px_rgba(0,0,0,0.4)] flex items-center gap-2">
+              Required Inputs
+              <Show when={missingInputs().length > 0}>
+                <span class="bg-red-500 text-white text-xs font-bold rounded-full px-2 py-0.5">
+                  {missingInputs().length}
+                </span>
+              </Show>
+              <Show when={missingInputs().length === 0 && expectedInputs().length > 0}>
+                <span class="bg-green-500 text-white text-xs font-bold rounded-full px-2 py-0.5">
+                  ✓
+                </span>
+              </Show>
             </div>
           </Drawer.Trigger>
           <Drawer.Portal>
@@ -251,7 +261,7 @@ const FormValidationDrawer = (
                 data-transitioning:ease-[cubic-bezier(0.32,0.72,0,1)] overflow-y-scroll"
             >
               <Drawer.Label class="pt-5 mr-10 text-center text-xl font-bold">
-                Form Validation
+                Required Inputs
               </Drawer.Label>
 
               {/* Form Outputs Section */}
@@ -289,8 +299,11 @@ const FormValidationDrawer = (
                   }
                 >
                   {(formPath) => (
-                    <div class="py-2 px-3 mb-2 bg-red-50 rounded border border-red-300 font-mono text-sm text-red-800">
-                      {formPath.path} ({formPath.type})
+                    <div class="py-2 px-3 mb-2 bg-red-50 rounded border border-red-300 text-red-800">
+                      <div class="font-mono text-sm">{formPath.path}</div>
+                      <div class="text-xs text-red-600 mt-0.5">
+                        Use: {compatibleComponentLabels(formPath.type).join(", ")}
+                      </div>
                     </div>
                   )}
                 </For>
diff --git a/builder-frontend/src/components/project/formJsExtensions/customKeyDropdown/pathOptionsService.ts b/builder-frontend/src/components/project/formJsExtensions/customKeyDropdown/pathOptionsService.ts
index 1c862cc0..24c0654d 100644
--- a/builder-frontend/src/components/project/formJsExtensions/customKeyDropdown/pathOptionsService.ts
+++ b/builder-frontend/src/components/project/formJsExtensions/customKeyDropdown/pathOptionsService.ts
@@ -5,7 +5,7 @@ interface PathOption {
   disabled?: boolean;
 }
 
-const TYPE_COMPATIBILITY: Record<string, string[]> = {
+export const TYPE_COMPATIBILITY: Record<string, string[]> = {
   // String types
   'string': ['textfield', 'textarea', 'select', 'radio', 'checklist', 'taglist'],
   // Number types
@@ -25,6 +25,29 @@ const TYPE_COMPATIBILITY: Record<string, string[]> = {
   'any': ['textfield', 'textarea', 'number', 'checkbox', 'select', 'radio', 'checklist', 'taglist', 'datetime', 'yes_no'],
 };
 
+/** Human-readable labels for Form-JS component types. */
+export const COMPONENT_TYPE_LABELS: Record<string, string> = {
+  textfield: "Text field",
+  textarea: "Text area",
+  number: "Number",
+  checkbox: "Checkbox",
+  yes_no: "Yes / No",
+  radio: "Radio buttons",
+  select: "Dropdown",
+  checklist: "Checklist",
+  taglist: "Tag list",
+  datetime: "Date picker",
+};
+
+/**
+ * Returns the compatible Form-JS component types for a given JSON Schema type,
+ * as human-readable labels.
+ */
+export function compatibleComponentLabels(schemaType: string): string[] {
+  const componentTypes = TYPE_COMPATIBILITY[schemaType] ?? [];
+  return componentTypes.map((t) => COMPONENT_TYPE_LABELS[t] ?? t);
+}
+
 interface EventBus {
   fire(event: string, payload: { options: PathOption[] }): void;
 }
diff --git a/builder-frontend/src/components/project/manageBenefits/configureBenefit/SelectedEligibilityCheck.tsx b/builder-frontend/src/components/project/manageBenefits/configureBenefit/SelectedEligibilityCheck.tsx
index 7fa68da9..09213b72 100644
--- a/builder-frontend/src/components/project/manageBenefits/configureBenefit/SelectedEligibilityCheck.tsx
+++ b/builder-frontend/src/components/project/manageBenefits/configureBenefit/SelectedEligibilityCheck.tsx
@@ -3,6 +3,8 @@ import { Accessor, createSignal, For, Show } from "solid-js";
 import ConfigureCheckModal from "./modals/ConfigureCheckModal";
 
 import { titleCase } from "@/utils/title_case";
+import { extractInputPaths } from "@/utils/formSchemaUtils";
+import { compatibleComponentLabels } from "@/components/project/formJsExtensions/customKeyDropdown/pathOptionsService";
 
 import type {
   CheckConfig,
@@ -60,9 +62,24 @@ const SelectedEligibilityCheck = ({
         <div class="pl-2 [&:has(+div)]:mb-2">
           {checkConfig().checkDescription}
         </div>
-        {
-          // Place to display information about expected inputs for check
-        }
+        <Show when={extractInputPaths(checkConfig().inputDefinition).length > 0}>
+          <div class="[&:has(+div)]:mb-2">
+            <div class="text-lg font-bold pl-2">Required Form Inputs</div>
+            <For each={extractInputPaths(checkConfig().inputDefinition)}>
+              {(input) => (
+                <div class="pl-4 py-1">
+                  <div class="flex gap-2 items-baseline">
+                    <div class="font-mono text-sm">{input.path}</div>
+                    <div class="text-xs text-gray-500">({input.type})</div>
+                  </div>
+                  <div class="text-xs text-gray-400 pl-2">
+                    Use: {compatibleComponentLabels(input.type).join(", ")}
+                  </div>
+                </div>
+              )}
+            </For>
+          </div>
+        </Show>
         {checkConfig().parameterDefinitions &&
           checkConfig().parameterDefinitions.length > 0 && (
             <div class="[&:has(+div)]:mb-2">
diff --git a/builder-frontend/src/utils/formSchemaUtils.ts b/builder-frontend/src/utils/formSchemaUtils.ts
index fd632293..d45bcf1e 100644
--- a/builder-frontend/src/utils/formSchemaUtils.ts
+++ b/builder-frontend/src/utils/formSchemaUtils.ts
@@ -1,3 +1,55 @@
+import type { JSONSchema7 } from "json-schema";
+
+export interface InputPath {
+  path: string;
+  type: string;
+}
+
+/**
+ * Recursively flattens a JSONSchema7 inputDefinition into dot-separated
+ * { path, type } pairs. Types match the keys used in TYPE_COMPATIBILITY
+ * (e.g. "string", "number", "boolean", "date", "date-time", "array:string").
+ *
+ * @param schema - The JSONSchema7 inputDefinition from a CheckConfig
+ * @returns Array of { path, type } pairs for every leaf field
+ */
+export function extractInputPaths(schema: JSONSchema7 | undefined): InputPath[] {
+  if (!schema) return [];
+
+  const results: InputPath[] = [];
+
+  function resolveLeafType(node: JSONSchema7): string {
+    const type = Array.isArray(node.type) ? node.type[0] : node.type;
+    if (type === "string") {
+      if (node.format === "date") return "date";
+      if (node.format === "date-time") return "date-time";
+      if (node.format === "time") return "time";
+    }
+    return (type as string) || "string";
+  }
+
+  function traverse(node: JSONSchema7, prefix: string) {
+    if (node.type === "object" && node.properties) {
+      for (const [key, value] of Object.entries(node.properties)) {
+        if (typeof value === "boolean") continue;
+        traverse(value, prefix ? `${prefix}.${key}` : key);
+      }
+    } else if (node.type === "array") {
+      const items = node.items;
+      let itemType = "string";
+      if (items && typeof items !== "boolean" && !Array.isArray(items)) {
+        itemType = resolveLeafType(items as JSONSchema7);
+      }
+      if (prefix) results.push({ path: prefix, type: `array:${itemType}` });
+    } else {
+      if (prefix) results.push({ path: prefix, type: resolveLeafType(node) });
+    }
+  }
+
+  traverse(schema, "");
+  return results;
+}
+
 interface FormComponent {
   type: string;
   key?: string;

From cdf89e2e21172044ba8420a81cfa524a6547d6bf Mon Sep 17 00:00:00 2001
From: Marie Harris <marie.harris@zebra.com>
Date: Tue, 10 Mar 2026 23:31:49 -0400
Subject: [PATCH 2/9] refine form input panel: compact pills, palette
 highlight, ARIA support
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Replace stacked card layout with horizontal pill strip in form editor toolbar
- Hover/click a pill to dim incompatible palette fields and ring compatible ones
  via injected <style> tag targeting .fjs-palette-field[data-field-type]
- Click to pin the highlight; click again to unpin
- Add ⓘ indicator and tooltip showing compatible component types
- Add full ARIA support: role=button, tabIndex, aria-pressed, aria-label,
  onKeyDown (Enter/Space), onFocus/onBlur for keyboard palette highlight,
  role=tooltip, group-focus-within tooltip visibility, focus-visible ring
- Remove stray console.log statements from customKeyDropdownProvider and pathOptionsService
- Fix extractInputPaths to skip "null" in JSON Schema union types before
  resolving the leaf type (e.g. ["null","string"] now correctly resolves to "string")

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../src/components/project/FormEditorView.tsx | 286 +++++++++---------
 .../customKeyDropdownProvider.ts              |   2 -
 .../customKeyDropdown/pathOptionsService.ts   |   1 -
 builder-frontend/src/utils/formSchemaUtils.ts |   4 +-
 4 files changed, 150 insertions(+), 143 deletions(-)

diff --git a/builder-frontend/src/components/project/FormEditorView.tsx b/builder-frontend/src/components/project/FormEditorView.tsx
index 258dd013..c413317a 100644
--- a/builder-frontend/src/components/project/FormEditorView.tsx
+++ b/builder-frontend/src/components/project/FormEditorView.tsx
@@ -8,11 +8,10 @@ import toast from "solid-toast";
 import { useParams } from "@solidjs/router";
 
 import { FormEditor } from "@bpmn-io/form-js-editor";
-import Drawer from "@corvu/drawer"; // 'corvu/drawer'
 
 import CustomFormFieldsModule from "./formJsExtensions/customFormFields";
 import { customKeyModule } from './formJsExtensions/customKeyDropdown/customKeyDropdownProvider';
-import PathOptionsService, { compatibleComponentLabels, pathOptionsModule } from './formJsExtensions/customKeyDropdown/pathOptionsService';
+import PathOptionsService, { compatibleComponentLabels, pathOptionsModule, TYPE_COMPATIBILITY } from './formJsExtensions/customKeyDropdown/pathOptionsService';
 
 import { saveFormSchema, fetchFormPaths } from "../../api/screener";
 import { extractFormPaths } from "../../utils/formSchemaUtils";
@@ -25,6 +24,7 @@ import { FormPath } from "@/types";
 function FormEditorView({ formSchema, setFormSchema }) {
   const [isUnsaved, setIsUnsaved] = createSignal(false);
   const [isSaving, setIsSaving] = createSignal(false);
+  const [highlightedTypes, setHighlightedTypes] = createSignal<string[]>([]);
   const params = useParams();
 
   // Fetch form paths from backend (replaces local transformation logic)
@@ -148,6 +148,42 @@ function FormEditorView({ formSchema, setFormSchema }) {
     }
   });
 
+  // Highlight compatible palette fields when an input pill is hovered/pinned
+  const STYLE_ID = 'bdt-palette-highlight';
+  onCleanup(() => document.getElementById(STYLE_ID)?.remove());
+  createEffect(() => {
+    const types = highlightedTypes();
+    if (types.length === 0) {
+      const el = document.getElementById(STYLE_ID);
+      if (el) el.textContent = '';
+      return;
+    }
+
+    let styleEl = document.getElementById(STYLE_ID) as HTMLStyleElement | null;
+    if (!styleEl) {
+      styleEl = document.createElement('style');
+      styleEl.id = STYLE_ID;
+      document.head.appendChild(styleEl);
+    }
+
+    const compatibleSelectors = types
+      .map((t) => `.fjs-palette-field[data-field-type='${t}']`)
+      .join(', ');
+
+    styleEl.textContent = `
+      .fjs-palette-field {
+        opacity: 0.2;
+        transition: opacity 0.15s ease;
+      }
+      ${compatibleSelectors} {
+        opacity: 1 !important;
+        outline: 2px solid #0ea5e9;
+        outline-offset: 1px;
+        border-radius: 4px;
+      }
+    `;
+  });
+
   const handleSave = async () => {
     const projectId = params.projectId;
     const schema = formSchema();
@@ -163,12 +199,10 @@ function FormEditorView({ formSchema, setFormSchema }) {
       <Show when={formPaths.loading}>
         <Loading />
       </Show>
-      <div class="flex flex-row">
-        <div class="flex-8 overflow-auto">
-          <div class="h-full" ref={(el) => (container = el)} />
-        </div>
-        <div class="flex-1 border-l-4 border-l-gray-200">
-          <div class="flex flex-col p-10 gap-4 place-items-center">
+      <div class="flex flex-col min-h-0 flex-1">
+        <div class="flex items-start gap-4 px-4 py-3 border-b-4 border-gray-200 bg-gray-50">
+          <InputsPanel formSchema={formSchema} expectedInputPaths={formPaths} setHighlightedTypes={setHighlightedTypes} />
+          <div class="shrink-0 pt-1">
             <Switch>
               <Match when={isUnsaved()}>
                 <div onClick={handleSave} class="btn-default btn-yellow">
@@ -176,10 +210,7 @@ function FormEditorView({ formSchema, setFormSchema }) {
                 </div>
               </Match>
               <Match when={isSaving()}>
-                <div
-                  onClick={handleSave}
-                  class="btn-default btn-gray cursor-not-allowed"
-                >
+                <div onClick={handleSave} class="btn-default btn-gray cursor-not-allowed">
                   Saving...
                 </div>
               </Match>
@@ -191,149 +222,126 @@ function FormEditorView({ formSchema, setFormSchema }) {
             </Switch>
           </div>
         </div>
-        <FormValidationDrawer formSchema={formSchema} expectedInputPaths={formPaths} />
+        <div class="flex-1 overflow-auto min-h-0">
+          <div class="h-full" ref={(el) => (container = el)} />
+        </div>
       </div>
     </>
   );
 }
 
-const FormValidationDrawer = (
-  { formSchema, expectedInputPaths }:
-  {formSchema: any, expectedInputPaths: Accessor<FormPath[]>}
-) => {
-  const formOutputs = () =>
-    formSchema() ? extractFormPaths(formSchema()) : [];
+const InputsPanel = ({
+  formSchema,
+  expectedInputPaths,
+  setHighlightedTypes,
+}: {
+  formSchema: any;
+  expectedInputPaths: Accessor<FormPath[]>;
+  setHighlightedTypes: (types: string[]) => void;
+}) => {
+  const [hoveredPath, setHoveredPath] = createSignal<string | null>(null);
+  const [pinnedPath, setPinnedPath] = createSignal<string | null>(null);
+
+  const formOutputSet = () =>
+    new Set(formSchema() ? extractFormPaths(formSchema()) : []);
 
-  // Expected inputs come directly from backend API
   const expectedInputs = () => expectedInputPaths() || [];
+  const missingInputs = () =>
+    expectedInputs().filter((p) => !formOutputSet().has(p.path));
+  const mappedInputs = () =>
+    expectedInputs().filter((p) => formOutputSet().has(p.path));
 
-  // Compute which expected inputs are satisfied vs missing
-  const formOutputSet = () => new Set(formOutputs());
-
-  const satisfiedInputs = () =>
-    expectedInputs().filter((formPath) => formOutputSet().has(formPath.path));
+  // Hover takes precedence over pin; pin persists after mouse leave
+  createEffect(() => {
+    const activePath = hoveredPath() ?? pinnedPath();
+    if (!activePath) {
+      setHighlightedTypes([]);
+      return;
+    }
+    const formPath = expectedInputs().find((p) => p.path === activePath);
+    setHighlightedTypes(formPath ? (TYPE_COMPATIBILITY[formPath.type] ?? []) : []);
+  });
 
-  const missingInputs = () =>
-    expectedInputs().filter((formPath) => !formOutputSet().has(formPath.path));
+  const handleMouseEnter = (path: string) => setHoveredPath(path);
+  const handleMouseLeave = () => setHoveredPath(null);
+  const handleClick = (path: string) =>
+    setPinnedPath((p) => (p === path ? null : path));
 
   return (
-    <Drawer side="right">
-      {(props) => (
-        <>
-          <Drawer.Trigger
-            class="
-              fixed bottom-5 right-5
-              my-auto rounded-lg
-              text-lg font-medium transition-all duration-100 "
-          >
-            <div class="btn-default btn-gray shadow-[0_0_10px_rgba(0,0,0,0.4)] flex items-center gap-2">
-              Required Inputs
-              <Show when={missingInputs().length > 0}>
-                <span class="bg-red-500 text-white text-xs font-bold rounded-full px-2 py-0.5">
-                  {missingInputs().length}
-                </span>
-              </Show>
-              <Show when={missingInputs().length === 0 && expectedInputs().length > 0}>
-                <span class="bg-green-500 text-white text-xs font-bold rounded-full px-2 py-0.5">
-                  ✓
-                </span>
-              </Show>
-            </div>
-          </Drawer.Trigger>
-          <Drawer.Portal>
-            <Drawer.Overlay
-              class="
-                fixed inset-0 z-50
-                data-transitioning:transition-colors data-transitioning:duration-500
-                data-transitioning:ease-[cubic-bezier(0.32,0.72,0,1)]"
-              style={{
-                "background-color": `rgb(0 0 0 / ${
-                  0.5 * props.openPercentage
-                })`,
-              }}
-            />
-            <Drawer.Content
-              class="
-                fixed flex flex-col md:select-none
-                -right-10 bottom-0 z-50 px-5 h-full max-w-[500px] min-w-[500px]
-                bg-gray-100 border-l-4 border-gray-400 rounded-l-lg
-                data-transitioning:transition-transform data-transitioning:duration-500
-                data-transitioning:ease-[cubic-bezier(0.32,0.72,0,1)] overflow-y-scroll"
-            >
-              <Drawer.Label class="pt-5 mr-10 text-center text-xl font-bold">
-                Required Inputs
-              </Drawer.Label>
-
-              {/* Form Outputs Section */}
-              <div class="mt-4 mr-10 px-4 pb-10">
-                <h3 class="text-lg font-semibold text-gray-700 mb-2">
-                  Form Outputs
-                </h3>
-                <For
-                  each={formOutputs()}
-                  fallback={
-                    <p class="text-gray-500 italic text-sm">
-                      No form fields defined yet.
-                    </p>
-                  }
-                >
-                  {(path) => (
-                    <div class="py-2 px-3 mb-2 bg-white rounded border border-gray-300 font-mono text-sm">
-                      {path}
-                    </div>
-                  )}
-                </For>
-              </div>
+    <div class="flex items-center gap-3 flex-1 min-w-0">
+      <span class="shrink-0 text-xs font-semibold text-gray-500 uppercase tracking-wide">
+        Form Inputs
+      </span>
+
+      <Show when={expectedInputs().length === 0}>
+        <span class="text-gray-400 italic text-sm">
+          No benefits configured. Add benefits to see required inputs.
+        </span>
+      </Show>
 
-              {/* Missing Inputs Section */}
-              <div class="mt-4 mr-10 px-4">
-                <h3 class="text-lg font-semibold text-red-900 mb-2">
-                  Missing Inputs
-                </h3>
-                <For
-                  each={missingInputs()}
-                  fallback={
-                    <p class="text-gray-500 italic text-sm">
-                      All required inputs are satisfied!
-                    </p>
-                  }
+      <Show when={expectedInputs().length > 0}>
+        <div class="flex items-center gap-2 overflow-x-auto flex-1 py-0.5 no-scrollbar">
+          <For each={missingInputs()}>
+            {(formPath) => (
+              <div class="group relative shrink-0">
+                <div
+                  role="button"
+                  tabIndex={0}
+                  aria-pressed={pinnedPath() === formPath.path}
+                  aria-label={`${formPath.path}: not yet mapped. Needs ${compatibleComponentLabels(formPath.type).join(" or ")}.`}
+                  class={`flex items-center gap-1.5 px-2 py-1 rounded-md border border-red-300 bg-red-50 text-red-800 text-xs font-mono cursor-pointer select-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-sky-500${pinnedPath() === formPath.path ? ' ring-2 ring-offset-1 ring-red-400' : ''}`}
+                  onMouseEnter={() => handleMouseEnter(formPath.path)}
+                  onMouseLeave={handleMouseLeave}
+                  onFocus={() => handleMouseEnter(formPath.path)}
+                  onBlur={handleMouseLeave}
+                  onClick={() => handleClick(formPath.path)}
+                  onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); handleClick(formPath.path); } }}
+                >
+                  <span aria-hidden="true" class="text-red-400 font-sans">✗</span>
+                  {formPath.path}
+                  <span aria-hidden="true" class="text-red-300 font-sans text-[10px] leading-none">ⓘ</span>
+                </div>
+                <div
+                  role="tooltip"
+                  class="absolute bottom-full left-0 mb-2 px-2 py-1.5 bg-gray-800 text-white text-xs rounded-md whitespace-nowrap opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 transition-opacity pointer-events-none z-10"
                 >
-                  {(formPath) => (
-                    <div class="py-2 px-3 mb-2 bg-red-50 rounded border border-red-300 text-red-800">
-                      <div class="font-mono text-sm">{formPath.path}</div>
-                      <div class="text-xs text-red-600 mt-0.5">
-                        Use: {compatibleComponentLabels(formPath.type).join(", ")}
-                      </div>
-                    </div>
-                  )}
-                </For>
+                  Use: {compatibleComponentLabels(formPath.type).join(", ")}
+                </div>
               </div>
-
-              {/* Satisfied Inputs Section */}
-              <div class="mt-4 mr-10 px-4">
-                <h3 class="text-lg font-semibold text-green-900 mb-2">
-                  Satisfied Inputs
-                </h3>
-                <For
-                  each={satisfiedInputs()}
-                  fallback={
-                    <p class="text-gray-500 italic text-sm">
-                      No inputs satisfied yet.
-                    </p>
-                  }
+            )}
+          </For>
+          <For each={mappedInputs()}>
+            {(formPath) => (
+              <div class="group relative shrink-0">
+                <div
+                  role="button"
+                  tabIndex={0}
+                  aria-pressed={pinnedPath() === formPath.path}
+                  aria-label={`${formPath.path}: mapped. Compatible with ${compatibleComponentLabels(formPath.type).join(" or ")}.`}
+                  class={`flex items-center gap-1.5 px-2 py-1 rounded-md border border-green-300 bg-green-50 text-green-800 text-xs font-mono cursor-pointer select-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-sky-500${pinnedPath() === formPath.path ? ' ring-2 ring-offset-1 ring-green-400' : ''}`}
+                  onMouseEnter={() => handleMouseEnter(formPath.path)}
+                  onMouseLeave={handleMouseLeave}
+                  onFocus={() => handleMouseEnter(formPath.path)}
+                  onBlur={handleMouseLeave}
+                  onClick={() => handleClick(formPath.path)}
+                  onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); handleClick(formPath.path); } }}
                 >
-                  {(formPath) => (
-                    <div class="py-2 px-3 mb-2 bg-green-50 rounded border border-green-300 font-mono text-sm text-green-800">
-                      {formPath.path} ({formPath.type})
-                    </div>
-                  )}
-                </For>
+                  <span aria-hidden="true" class="text-green-600 font-sans">✓</span>
+                  {formPath.path}
+                  <span aria-hidden="true" class="text-green-400 font-sans text-[10px] leading-none">ⓘ</span>
+                </div>
+                <div
+                  role="tooltip"
+                  class="absolute bottom-full left-0 mb-2 px-2 py-1.5 bg-gray-800 text-white text-xs rounded-md whitespace-nowrap opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 transition-opacity pointer-events-none z-10"
+                >
+                  Use: {compatibleComponentLabels(formPath.type).join(", ")}
+                </div>
               </div>
-            </Drawer.Content>
-          </Drawer.Portal>
-        </>
-      )}
-    </Drawer>
+            )}
+          </For>
+        </div>
+      </Show>
+    </div>
   );
 };
 
diff --git a/builder-frontend/src/components/project/formJsExtensions/customKeyDropdown/customKeyDropdownProvider.ts b/builder-frontend/src/components/project/formJsExtensions/customKeyDropdown/customKeyDropdownProvider.ts
index a29e7c63..6fdbd6c8 100644
--- a/builder-frontend/src/components/project/formJsExtensions/customKeyDropdown/customKeyDropdownProvider.ts
+++ b/builder-frontend/src/components/project/formJsExtensions/customKeyDropdown/customKeyDropdownProvider.ts
@@ -75,8 +75,6 @@ function CustomKeyDropdown(props: any) {
     // Get the component type to filter compatible options
     const componentType = field.type || '';
 
-    console.log(componentType);
-
     // Get options from the injected service, passing current key to exclude from disabling
     const options = pathOptionsService?.getOptions(currentKey, componentType) || [];
 
diff --git a/builder-frontend/src/components/project/formJsExtensions/customKeyDropdown/pathOptionsService.ts b/builder-frontend/src/components/project/formJsExtensions/customKeyDropdown/pathOptionsService.ts
index 24c0654d..6d45ffa8 100644
--- a/builder-frontend/src/components/project/formJsExtensions/customKeyDropdown/pathOptionsService.ts
+++ b/builder-frontend/src/components/project/formJsExtensions/customKeyDropdown/pathOptionsService.ts
@@ -118,7 +118,6 @@ export default class PathOptionsService {
    */
   getOptions(currentFieldKey?: string, componentType?: string): PathOption[] {
     const usedKeys = this.getUsedKeys();
-    console.log(this.pathOptions);
 
     return this.pathOptions
       .filter(option => {
diff --git a/builder-frontend/src/utils/formSchemaUtils.ts b/builder-frontend/src/utils/formSchemaUtils.ts
index d45bcf1e..6cbce324 100644
--- a/builder-frontend/src/utils/formSchemaUtils.ts
+++ b/builder-frontend/src/utils/formSchemaUtils.ts
@@ -19,7 +19,9 @@ export function extractInputPaths(schema: JSONSchema7 | undefined): InputPath[]
   const results: InputPath[] = [];
 
   function resolveLeafType(node: JSONSchema7): string {
-    const type = Array.isArray(node.type) ? node.type[0] : node.type;
+    const type = Array.isArray(node.type)
+      ? node.type.find((t) => t !== "null") ?? node.type[0]
+      : node.type;
     if (type === "string") {
       if (node.format === "date") return "date";
       if (node.format === "date-time") return "date-time";

From e60c6650667cc3427976945817819b78b0240bcb Mon Sep 17 00:00:00 2001
From: Marie Harris <marie.harris@zebra.com>
Date: Thu, 12 Mar 2026 08:36:32 -0400
Subject: [PATCH 3/9] fix: address PR #357 review feedback

Critical fixes:
- setFormSchema({ ...e.schema }) to force new reference and fix
  InputsPanel not updating when dropdown selections change
- extractInputPaths in SelectedEligibilityCheck now calls
  transformInputDefinitionSchema first so people/enrollments paths
  reflect parameter-keyed shape, matching what the backend returns
- Tooltips now render via Portal to escape overflow-x:auto clipping;
  position is computed from getBoundingClientRect on hover/focus

Nits:
- Extract updatePaletteHighlight as a module-level function for readability
- Extract shared InputPill component; red/green pills no longer duplicate
  markup
- Add py-1.5 px-0.5 to pill scroll container so pinned rings aren't
  clipped at edges

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../src/components/project/FormEditorView.tsx | 264 ++++++++++++------
 .../SelectedEligibilityCheck.tsx              |   6 +-
 builder-frontend/src/utils/formSchemaUtils.ts |  76 +++++
 3 files changed, 251 insertions(+), 95 deletions(-)

diff --git a/builder-frontend/src/components/project/FormEditorView.tsx b/builder-frontend/src/components/project/FormEditorView.tsx
index c413317a..29552302 100644
--- a/builder-frontend/src/components/project/FormEditorView.tsx
+++ b/builder-frontend/src/components/project/FormEditorView.tsx
@@ -4,6 +4,7 @@ import {
   For, Match, Show, Switch,
   Accessor,
 } from "solid-js";
+import { Portal } from "solid-js/web";
 import toast from "solid-toast";
 import { useParams } from "@solidjs/router";
 
@@ -71,7 +72,7 @@ function FormEditorView({ formSchema, setFormSchema }) {
 
     formEditor.on("changed", (e) => {
       setIsUnsaved(true);
-      setFormSchema(e.schema);
+      setFormSchema({ ...e.schema });
     });
 
     // Set default key to field ID when a new form field is added
@@ -149,40 +150,9 @@ function FormEditorView({ formSchema, setFormSchema }) {
   });
 
   // Highlight compatible palette fields when an input pill is hovered/pinned
-  const STYLE_ID = 'bdt-palette-highlight';
-  onCleanup(() => document.getElementById(STYLE_ID)?.remove());
-  createEffect(() => {
-    const types = highlightedTypes();
-    if (types.length === 0) {
-      const el = document.getElementById(STYLE_ID);
-      if (el) el.textContent = '';
-      return;
-    }
-
-    let styleEl = document.getElementById(STYLE_ID) as HTMLStyleElement | null;
-    if (!styleEl) {
-      styleEl = document.createElement('style');
-      styleEl.id = STYLE_ID;
-      document.head.appendChild(styleEl);
-    }
-
-    const compatibleSelectors = types
-      .map((t) => `.fjs-palette-field[data-field-type='${t}']`)
-      .join(', ');
-
-    styleEl.textContent = `
-      .fjs-palette-field {
-        opacity: 0.2;
-        transition: opacity 0.15s ease;
-      }
-      ${compatibleSelectors} {
-        opacity: 1 !important;
-        outline: 2px solid #0ea5e9;
-        outline-offset: 1px;
-        border-radius: 4px;
-      }
-    `;
-  });
+  const PALETTE_STYLE_ID = 'bdt-palette-highlight';
+  onCleanup(() => document.getElementById(PALETTE_STYLE_ID)?.remove());
+  createEffect(() => updatePaletteHighlight(highlightedTypes(), PALETTE_STYLE_ID));
 
   const handleSave = async () => {
     const projectId = params.projectId;
@@ -230,6 +200,116 @@ function FormEditorView({ formSchema, setFormSchema }) {
   );
 }
 
+// ---------------------------------------------------------------------------
+// Palette highlight helper (module-level, no reactive dependencies)
+// ---------------------------------------------------------------------------
+
+function updatePaletteHighlight(types: string[], styleId: string) {
+  let styleEl = document.getElementById(styleId) as HTMLStyleElement | null;
+  if (types.length === 0) {
+    if (styleEl) styleEl.textContent = '';
+    return;
+  }
+  if (!styleEl) {
+    styleEl = document.createElement('style');
+    styleEl.id = styleId;
+    document.head.appendChild(styleEl);
+  }
+  const compatibleSelectors = types
+    .map((t) => `.fjs-palette-field[data-field-type='${t}']`)
+    .join(', ');
+  styleEl.textContent = `
+    .fjs-palette-field {
+      opacity: 0.2;
+      transition: opacity 0.15s ease;
+    }
+    ${compatibleSelectors} {
+      opacity: 1 !important;
+      outline: 2px solid #0ea5e9;
+      outline-offset: 1px;
+      border-radius: 4px;
+    }
+  `;
+}
+
+// ---------------------------------------------------------------------------
+// InputPill — shared pill component for missing and mapped inputs
+// ---------------------------------------------------------------------------
+
+type TooltipPosition = { x: number; y: number };
+
+const InputPill = ({
+  formPath,
+  status,
+  isPinned,
+  onShowTooltip,
+  onHideTooltip,
+  onClick,
+}: {
+  formPath: FormPath;
+  status: 'missing' | 'mapped';
+  isPinned: boolean;
+  onShowTooltip: (path: string, pos: TooltipPosition) => void;
+  onHideTooltip: () => void;
+  onClick: (path: string) => void;
+}) => {
+  const isMissing = status === 'missing';
+
+  const pillClass = () => [
+    'flex items-center gap-1.5 px-2 py-1 rounded-md border text-xs font-mono',
+    'cursor-pointer select-none',
+    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-sky-500',
+    isMissing
+      ? 'border-red-300 bg-red-50 text-red-800'
+      : 'border-green-300 bg-green-50 text-green-800',
+    isPinned
+      ? isMissing ? 'ring-2 ring-offset-1 ring-red-400' : 'ring-2 ring-offset-1 ring-green-400'
+      : '',
+  ].filter(Boolean).join(' ');
+
+  const ariaLabel = isMissing
+    ? `${formPath.path}: not yet mapped. Needs ${compatibleComponentLabels(formPath.type).join(' or ')}.`
+    : `${formPath.path}: mapped. Compatible with ${compatibleComponentLabels(formPath.type).join(' or ')}.`;
+
+  const handleInteract = (e: MouseEvent | FocusEvent) => {
+    const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+    onShowTooltip(formPath.path, { x: rect.left, y: rect.top });
+  };
+
+  return (
+    <div
+      role="button"
+      tabIndex={0}
+      aria-pressed={isPinned}
+      aria-label={ariaLabel}
+      class={pillClass()}
+      onMouseEnter={handleInteract}
+      onMouseLeave={onHideTooltip}
+      onFocus={handleInteract}
+      onBlur={onHideTooltip}
+      onClick={() => onClick(formPath.path)}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          onClick(formPath.path);
+        }
+      }}
+    >
+      <span aria-hidden="true" class={isMissing ? 'text-red-400 font-sans' : 'text-green-600 font-sans'}>
+        {isMissing ? '✗' : '✓'}
+      </span>
+      {formPath.path}
+      <span aria-hidden="true" class={isMissing ? 'text-red-300 font-sans text-[10px] leading-none' : 'text-green-400 font-sans text-[10px] leading-none'}>
+        ⓘ
+      </span>
+    </div>
+  );
+};
+
+// ---------------------------------------------------------------------------
+// InputsPanel
+// ---------------------------------------------------------------------------
+
 const InputsPanel = ({
   formSchema,
   expectedInputPaths,
@@ -241,15 +321,14 @@ const InputsPanel = ({
 }) => {
   const [hoveredPath, setHoveredPath] = createSignal<string | null>(null);
   const [pinnedPath, setPinnedPath] = createSignal<string | null>(null);
+  const [tooltipState, setTooltipState] = createSignal<{ path: string; x: number; y: number } | null>(null);
 
   const formOutputSet = () =>
     new Set(formSchema() ? extractFormPaths(formSchema()) : []);
 
   const expectedInputs = () => expectedInputPaths() || [];
-  const missingInputs = () =>
-    expectedInputs().filter((p) => !formOutputSet().has(p.path));
-  const mappedInputs = () =>
-    expectedInputs().filter((p) => formOutputSet().has(p.path));
+  const missingInputs = () => expectedInputs().filter((p) => !formOutputSet().has(p.path));
+  const mappedInputs = () => expectedInputs().filter((p) => formOutputSet().has(p.path));
 
   // Hover takes precedence over pin; pin persists after mouse leave
   createEffect(() => {
@@ -262,11 +341,26 @@ const InputsPanel = ({
     setHighlightedTypes(formPath ? (TYPE_COMPATIBILITY[formPath.type] ?? []) : []);
   });
 
-  const handleMouseEnter = (path: string) => setHoveredPath(path);
-  const handleMouseLeave = () => setHoveredPath(null);
+  const handleShowTooltip = (path: string, pos: TooltipPosition) => {
+    setTooltipState({ path, ...pos });
+    setHoveredPath(path);
+  };
+
+  const handleHideTooltip = () => {
+    setTooltipState(null);
+    setHoveredPath(null);
+  };
+
   const handleClick = (path: string) =>
     setPinnedPath((p) => (p === path ? null : path));
 
+  const tooltipLabel = () => {
+    const state = tooltipState();
+    if (!state) return '';
+    const fp = expectedInputs().find((p) => p.path === state.path);
+    return fp ? `Use: ${compatibleComponentLabels(fp.type).join(', ')}` : '';
+  };
+
   return (
     <div class="flex items-center gap-3 flex-1 min-w-0">
       <span class="shrink-0 text-xs font-semibold text-gray-500 uppercase tracking-wide">
@@ -280,67 +374,53 @@ const InputsPanel = ({
       </Show>
 
       <Show when={expectedInputs().length > 0}>
-        <div class="flex items-center gap-2 overflow-x-auto flex-1 py-0.5 no-scrollbar">
+        {/* py-1.5 and px-0.5 give the pinned ring enough room to avoid clipping */}
+        <div class="flex items-center gap-2 overflow-x-auto flex-1 py-1.5 px-0.5 no-scrollbar">
           <For each={missingInputs()}>
             {(formPath) => (
-              <div class="group relative shrink-0">
-                <div
-                  role="button"
-                  tabIndex={0}
-                  aria-pressed={pinnedPath() === formPath.path}
-                  aria-label={`${formPath.path}: not yet mapped. Needs ${compatibleComponentLabels(formPath.type).join(" or ")}.`}
-                  class={`flex items-center gap-1.5 px-2 py-1 rounded-md border border-red-300 bg-red-50 text-red-800 text-xs font-mono cursor-pointer select-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-sky-500${pinnedPath() === formPath.path ? ' ring-2 ring-offset-1 ring-red-400' : ''}`}
-                  onMouseEnter={() => handleMouseEnter(formPath.path)}
-                  onMouseLeave={handleMouseLeave}
-                  onFocus={() => handleMouseEnter(formPath.path)}
-                  onBlur={handleMouseLeave}
-                  onClick={() => handleClick(formPath.path)}
-                  onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); handleClick(formPath.path); } }}
-                >
-                  <span aria-hidden="true" class="text-red-400 font-sans">✗</span>
-                  {formPath.path}
-                  <span aria-hidden="true" class="text-red-300 font-sans text-[10px] leading-none">ⓘ</span>
-                </div>
-                <div
-                  role="tooltip"
-                  class="absolute bottom-full left-0 mb-2 px-2 py-1.5 bg-gray-800 text-white text-xs rounded-md whitespace-nowrap opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 transition-opacity pointer-events-none z-10"
-                >
-                  Use: {compatibleComponentLabels(formPath.type).join(", ")}
-                </div>
-              </div>
+              <InputPill
+                formPath={formPath}
+                status="missing"
+                isPinned={pinnedPath() === formPath.path}
+                onShowTooltip={handleShowTooltip}
+                onHideTooltip={handleHideTooltip}
+                onClick={handleClick}
+              />
             )}
           </For>
           <For each={mappedInputs()}>
             {(formPath) => (
-              <div class="group relative shrink-0">
-                <div
-                  role="button"
-                  tabIndex={0}
-                  aria-pressed={pinnedPath() === formPath.path}
-                  aria-label={`${formPath.path}: mapped. Compatible with ${compatibleComponentLabels(formPath.type).join(" or ")}.`}
-                  class={`flex items-center gap-1.5 px-2 py-1 rounded-md border border-green-300 bg-green-50 text-green-800 text-xs font-mono cursor-pointer select-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-sky-500${pinnedPath() === formPath.path ? ' ring-2 ring-offset-1 ring-green-400' : ''}`}
-                  onMouseEnter={() => handleMouseEnter(formPath.path)}
-                  onMouseLeave={handleMouseLeave}
-                  onFocus={() => handleMouseEnter(formPath.path)}
-                  onBlur={handleMouseLeave}
-                  onClick={() => handleClick(formPath.path)}
-                  onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); handleClick(formPath.path); } }}
-                >
-                  <span aria-hidden="true" class="text-green-600 font-sans">✓</span>
-                  {formPath.path}
-                  <span aria-hidden="true" class="text-green-400 font-sans text-[10px] leading-none">ⓘ</span>
-                </div>
-                <div
-                  role="tooltip"
-                  class="absolute bottom-full left-0 mb-2 px-2 py-1.5 bg-gray-800 text-white text-xs rounded-md whitespace-nowrap opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 transition-opacity pointer-events-none z-10"
-                >
-                  Use: {compatibleComponentLabels(formPath.type).join(", ")}
-                </div>
-              </div>
+              <InputPill
+                formPath={formPath}
+                status="mapped"
+                isPinned={pinnedPath() === formPath.path}
+                onShowTooltip={handleShowTooltip}
+                onHideTooltip={handleHideTooltip}
+                onClick={handleClick}
+              />
             )}
           </For>
         </div>
       </Show>
+
+      {/* Tooltip rendered via Portal to escape the overflow-x:auto clipping context */}
+      <Show when={tooltipState() !== null}>
+        <Portal>
+          <div
+            role="tooltip"
+            style={{
+              position: 'fixed',
+              left: `${tooltipState()?.x ?? 0}px`,
+              top: `${(tooltipState()?.y ?? 0) - 8}px`,
+              transform: 'translateY(-100%)',
+              'z-index': '9999',
+            }}
+            class="px-2 py-1.5 bg-gray-800 text-white text-xs rounded-md whitespace-nowrap pointer-events-none"
+          >
+            {tooltipLabel()}
+          </div>
+        </Portal>
+      </Show>
     </div>
   );
 };
diff --git a/builder-frontend/src/components/project/manageBenefits/configureBenefit/SelectedEligibilityCheck.tsx b/builder-frontend/src/components/project/manageBenefits/configureBenefit/SelectedEligibilityCheck.tsx
index 09213b72..c1c3d0ab 100644
--- a/builder-frontend/src/components/project/manageBenefits/configureBenefit/SelectedEligibilityCheck.tsx
+++ b/builder-frontend/src/components/project/manageBenefits/configureBenefit/SelectedEligibilityCheck.tsx
@@ -3,7 +3,7 @@ import { Accessor, createSignal, For, Show } from "solid-js";
 import ConfigureCheckModal from "./modals/ConfigureCheckModal";
 
 import { titleCase } from "@/utils/title_case";
-import { extractInputPaths } from "@/utils/formSchemaUtils";
+import { extractInputPaths, transformInputDefinitionSchema } from "@/utils/formSchemaUtils";
 import { compatibleComponentLabels } from "@/components/project/formJsExtensions/customKeyDropdown/pathOptionsService";
 
 import type {
@@ -62,10 +62,10 @@ const SelectedEligibilityCheck = ({
         <div class="pl-2 [&:has(+div)]:mb-2">
           {checkConfig().checkDescription}
         </div>
-        <Show when={extractInputPaths(checkConfig().inputDefinition).length > 0}>
+        <Show when={extractInputPaths(transformInputDefinitionSchema(checkConfig().inputDefinition, checkConfig().parameters)).length > 0}>
           <div class="[&:has(+div)]:mb-2">
             <div class="text-lg font-bold pl-2">Required Form Inputs</div>
-            <For each={extractInputPaths(checkConfig().inputDefinition)}>
+            <For each={extractInputPaths(transformInputDefinitionSchema(checkConfig().inputDefinition, checkConfig().parameters))}>
               {(input) => (
                 <div class="pl-4 py-1">
                   <div class="flex gap-2 items-baseline">
diff --git a/builder-frontend/src/utils/formSchemaUtils.ts b/builder-frontend/src/utils/formSchemaUtils.ts
index 6cbce324..811bcb27 100644
--- a/builder-frontend/src/utils/formSchemaUtils.ts
+++ b/builder-frontend/src/utils/formSchemaUtils.ts
@@ -5,6 +5,82 @@ export interface InputPath {
   type: string;
 }
 
+/**
+ * Mirrors the backend InputSchemaService.transformInputDefinitionSchema.
+ * Applies the people-array → personId-keyed-object and enrollments-nesting
+ * transformations before path extraction, so paths match what the backend
+ * returns from /screener/{id}/form-paths.
+ *
+ * @param schema - Raw inputDefinition JSONSchema7 from a CheckConfig
+ * @param parameters - CheckConfig parameters (may contain personId / peopleIds)
+ * @returns Transformed schema suitable for extractInputPaths
+ */
+export function transformInputDefinitionSchema(
+  schema: JSONSchema7 | undefined,
+  parameters: Record<string, any> = {}
+): JSONSchema7 {
+  if (!schema) return {};
+
+  const personIds: string[] = [];
+  if (typeof parameters.personId === "string" && parameters.personId) {
+    personIds.push(parameters.personId);
+  }
+  if (Array.isArray(parameters.peopleIds)) {
+    for (const id of parameters.peopleIds) {
+      if (typeof id === "string" && id) personIds.push(id);
+    }
+  }
+
+  let result = _transformPeopleSchema(schema, personIds);
+  result = _transformEnrollmentsSchema(result, personIds);
+  return result;
+}
+
+function _transformPeopleSchema(schema: JSONSchema7, personIds: string[]): JSONSchema7 {
+  const props = schema.properties;
+  if (!props || !props.people || personIds.length === 0) return { ...schema };
+
+  const peopleSchema = props.people as JSONSchema7;
+  const itemsSchema = (peopleSchema.items as JSONSchema7) ?? {};
+
+  const newPeopleProps: Record<string, JSONSchema7> = {};
+  for (const id of personIds) {
+    newPeopleProps[id] = { ...itemsSchema };
+  }
+
+  return {
+    ...schema,
+    properties: { ...props, people: { type: "object", properties: newPeopleProps } },
+  };
+}
+
+function _transformEnrollmentsSchema(schema: JSONSchema7, personIds: string[]): JSONSchema7 {
+  const props = schema.properties;
+  if (!props || !props.enrollments || personIds.length === 0) return { ...schema };
+
+  const enrollmentsSchema: JSONSchema7 = { type: "array", items: { type: "string" } };
+  const { enrollments: _removed, people, ...restProps } = props as any;
+  const existingPeople = (people ?? { type: "object", properties: {} }) as JSONSchema7;
+  const existingPeopleProps = (existingPeople.properties ?? {}) as Record<string, JSONSchema7>;
+
+  const newPeopleProps: Record<string, JSONSchema7> = {};
+  for (const id of personIds) {
+    const existing = existingPeopleProps[id] ?? ({ type: "object", properties: {} } as JSONSchema7);
+    newPeopleProps[id] = {
+      ...existing,
+      properties: {
+        ...(existing.properties as Record<string, JSONSchema7> ?? {}),
+        enrollments: enrollmentsSchema,
+      },
+    };
+  }
+
+  return {
+    ...schema,
+    properties: { ...restProps, people: { ...existingPeople, properties: newPeopleProps } },
+  };
+}
+
 /**
  * Recursively flattens a JSONSchema7 inputDefinition into dot-separated
  * { path, type } pairs. Types match the keys used in TYPE_COMPATIBILITY

From 0487b83464cc25f4cf0e5824eb54a3bd95cc1d9b Mon Sep 17 00:00:00 2001
From: Marie Harris <marie.harris@zebra.com>
Date: Thu, 12 Mar 2026 08:45:47 -0400
Subject: [PATCH 4/9] =?UTF-8?q?fix:=20make=20click=E2=86=92palette=20highl?=
 =?UTF-8?q?ight=20connection=20explicit?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The previous createEffect on (hoveredPath ?? pinnedPath) was indirect:
clicking a pill set pinnedPath, which triggered the effect, which called
setHighlightedTypes with TYPE_COMPATIBILITY[type] — often the same array
reference as the current value, so Solid.js { equals: === } would skip
the downstream FormEditorView effect and updatePaletteHighlight would
not re-run.

Fix:
- Remove the derived createEffect entirely
- Add a `highlight(path | null)` helper called directly from each event
  handler — hover, hover-end, and click each explicitly drive the palette
- Set equals: false on highlightedTypes so every setHighlightedTypes
  call always propagates to updatePaletteHighlight regardless of
  array reference equality

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../src/components/project/FormEditorView.tsx | 27 ++++++++++---------
 1 file changed, 14 insertions(+), 13 deletions(-)

diff --git a/builder-frontend/src/components/project/FormEditorView.tsx b/builder-frontend/src/components/project/FormEditorView.tsx
index 29552302..83249f22 100644
--- a/builder-frontend/src/components/project/FormEditorView.tsx
+++ b/builder-frontend/src/components/project/FormEditorView.tsx
@@ -25,7 +25,7 @@ import { FormPath } from "@/types";
 function FormEditorView({ formSchema, setFormSchema }) {
   const [isUnsaved, setIsUnsaved] = createSignal(false);
   const [isSaving, setIsSaving] = createSignal(false);
-  const [highlightedTypes, setHighlightedTypes] = createSignal<string[]>([]);
+  const [highlightedTypes, setHighlightedTypes] = createSignal<string[]>([], { equals: false });
   const params = useParams();
 
   // Fetch form paths from backend (replaces local transformation logic)
@@ -330,29 +330,30 @@ const InputsPanel = ({
   const missingInputs = () => expectedInputs().filter((p) => !formOutputSet().has(p.path));
   const mappedInputs = () => expectedInputs().filter((p) => formOutputSet().has(p.path));
 
-  // Hover takes precedence over pin; pin persists after mouse leave
-  createEffect(() => {
-    const activePath = hoveredPath() ?? pinnedPath();
-    if (!activePath) {
-      setHighlightedTypes([]);
-      return;
-    }
-    const formPath = expectedInputs().find((p) => p.path === activePath);
-    setHighlightedTypes(formPath ? (TYPE_COMPATIBILITY[formPath.type] ?? []) : []);
-  });
+  const highlight = (activePath: string | null) => {
+    const fp = activePath ? expectedInputs().find((p) => p.path === activePath) : null;
+    setHighlightedTypes(fp ? (TYPE_COMPATIBILITY[fp.type] ?? []) : []);
+  };
 
   const handleShowTooltip = (path: string, pos: TooltipPosition) => {
     setTooltipState({ path, ...pos });
     setHoveredPath(path);
+    highlight(path);
   };
 
   const handleHideTooltip = () => {
     setTooltipState(null);
     setHoveredPath(null);
+    // Restore highlight from pinned pill (if any) when hover ends
+    highlight(pinnedPath());
   };
 
-  const handleClick = (path: string) =>
-    setPinnedPath((p) => (p === path ? null : path));
+  const handleClick = (path: string) => {
+    const newPin = pinnedPath() === path ? null : path;
+    setPinnedPath(newPin);
+    // Hover takes precedence; otherwise drive highlight from the new pin state
+    highlight(hoveredPath() ?? newPin);
+  };
 
   const tooltipLabel = () => {
     const state = tooltipState();

From 0557b7a8c3c4448665d70d1bc9ab4a37b4dd2272 Mon Sep 17 00:00:00 2001
From: Marie Harris <marie.harris@zebra.com>
Date: Thu, 12 Mar 2026 08:48:36 -0400
Subject: [PATCH 5/9] feat: add glow to pinned input pill

Pinned pills now show a colored box-shadow glow (red for missing,
green for mapped) alongside the existing ring, making it visually
clear which pill is active and that clicking again will deactivate it.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 builder-frontend/src/components/project/FormEditorView.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/builder-frontend/src/components/project/FormEditorView.tsx b/builder-frontend/src/components/project/FormEditorView.tsx
index 83249f22..853e5156 100644
--- a/builder-frontend/src/components/project/FormEditorView.tsx
+++ b/builder-frontend/src/components/project/FormEditorView.tsx
@@ -263,7 +263,9 @@ const InputPill = ({
       ? 'border-red-300 bg-red-50 text-red-800'
       : 'border-green-300 bg-green-50 text-green-800',
     isPinned
-      ? isMissing ? 'ring-2 ring-offset-1 ring-red-400' : 'ring-2 ring-offset-1 ring-green-400'
+      ? isMissing
+        ? 'ring-2 ring-offset-1 ring-red-400 shadow-md shadow-red-400/50'
+        : 'ring-2 ring-offset-1 ring-green-400 shadow-md shadow-green-400/50'
       : '',
   ].filter(Boolean).join(' ');
 

From b0f457e8783e6fbe7614e7c8be41958572e276c2 Mon Sep 17 00:00:00 2001
From: Marie Harris <marie.harris@zebra.com>
Date: Thu, 12 Mar 2026 08:50:12 -0400
Subject: [PATCH 6/9] feat: darken pinned pill border

Pinned pills now use border-red-500/border-green-500 instead of the
default -300 shade, giving a stronger visual distinction alongside the
existing ring and glow.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 builder-frontend/src/components/project/FormEditorView.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/builder-frontend/src/components/project/FormEditorView.tsx b/builder-frontend/src/components/project/FormEditorView.tsx
index 853e5156..1f0fc018 100644
--- a/builder-frontend/src/components/project/FormEditorView.tsx
+++ b/builder-frontend/src/components/project/FormEditorView.tsx
@@ -260,8 +260,8 @@ const InputPill = ({
     'cursor-pointer select-none',
     'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-sky-500',
     isMissing
-      ? 'border-red-300 bg-red-50 text-red-800'
-      : 'border-green-300 bg-green-50 text-green-800',
+      ? `${isPinned ? 'border-red-500' : 'border-red-300'} bg-red-50 text-red-800`
+      : `${isPinned ? 'border-green-500' : 'border-green-300'} bg-green-50 text-green-800`,
     isPinned
       ? isMissing
         ? 'ring-2 ring-offset-1 ring-red-400 shadow-md shadow-red-400/50'

From cd82a1e4867cca87e6094bcdf497f8c701a6d7b2 Mon Sep 17 00:00:00 2001
From: Marie Harris <marie.harris@zebra.com>
Date: Thu, 12 Mar 2026 08:51:34 -0400
Subject: [PATCH 7/9] fix: use background darkening for pinned pill instead of
 border color

form-js loads Bootstrap CSS which has `.border { border: 1px solid #dee2e6 !important }`
overriding Tailwind's border-color utilities. Switch to darkening the
background (bg-red-100 / bg-green-100 vs bg-*-50) to distinguish the
pinned state, which is not affected by that rule.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 builder-frontend/src/components/project/FormEditorView.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/builder-frontend/src/components/project/FormEditorView.tsx b/builder-frontend/src/components/project/FormEditorView.tsx
index 1f0fc018..9c580edf 100644
--- a/builder-frontend/src/components/project/FormEditorView.tsx
+++ b/builder-frontend/src/components/project/FormEditorView.tsx
@@ -260,8 +260,8 @@ const InputPill = ({
     'cursor-pointer select-none',
     'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-sky-500',
     isMissing
-      ? `${isPinned ? 'border-red-500' : 'border-red-300'} bg-red-50 text-red-800`
-      : `${isPinned ? 'border-green-500' : 'border-green-300'} bg-green-50 text-green-800`,
+      ? `border-red-300 ${isPinned ? 'bg-red-100' : 'bg-red-50'} text-red-800`
+      : `border-green-300 ${isPinned ? 'bg-green-100' : 'bg-green-50'} text-green-800`,
     isPinned
       ? isMissing
         ? 'ring-2 ring-offset-1 ring-red-400 shadow-md shadow-red-400/50'

From f109229d6ef767474cdc18abff6992cc35bef54e Mon Sep 17 00:00:00 2001
From: Marie Harris <marie.harris@zebra.com>
Date: Thu, 12 Mar 2026 08:53:37 -0400
Subject: [PATCH 8/9] fix: preserve reactivity of isPinned prop in InputPill
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Destructuring props in SolidJS evaluates each getter once at creation
time, producing a static snapshot. isPinned was destructured, so it
never updated after the initial render — clicking a pill set pinnedPath
in the parent but InputPill kept aria-pressed="false" and never applied
the ring/glow/bg classes.

Switch InputPill to the props-object pattern so every access of
props.isPinned reads the live reactive getter.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../src/components/project/FormEditorView.tsx | 50 ++++++++-----------
 1 file changed, 22 insertions(+), 28 deletions(-)

diff --git a/builder-frontend/src/components/project/FormEditorView.tsx b/builder-frontend/src/components/project/FormEditorView.tsx
index 9c580edf..7a5f5180 100644
--- a/builder-frontend/src/components/project/FormEditorView.tsx
+++ b/builder-frontend/src/components/project/FormEditorView.tsx
@@ -238,14 +238,7 @@ function updatePaletteHighlight(types: string[], styleId: string) {
 
 type TooltipPosition = { x: number; y: number };
 
-const InputPill = ({
-  formPath,
-  status,
-  isPinned,
-  onShowTooltip,
-  onHideTooltip,
-  onClick,
-}: {
+const InputPill = (props: {
   formPath: FormPath;
   status: 'missing' | 'mapped';
   isPinned: boolean;
@@ -253,55 +246,56 @@ const InputPill = ({
   onHideTooltip: () => void;
   onClick: (path: string) => void;
 }) => {
-  const isMissing = status === 'missing';
+  // Derive isMissing from props (not destructured) so status stays reactive
+  const isMissing = () => props.status === 'missing';
 
   const pillClass = () => [
     'flex items-center gap-1.5 px-2 py-1 rounded-md border text-xs font-mono',
     'cursor-pointer select-none',
     'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-sky-500',
-    isMissing
-      ? `border-red-300 ${isPinned ? 'bg-red-100' : 'bg-red-50'} text-red-800`
-      : `border-green-300 ${isPinned ? 'bg-green-100' : 'bg-green-50'} text-green-800`,
-    isPinned
-      ? isMissing
+    isMissing()
+      ? `border-red-300 ${props.isPinned ? 'bg-red-100' : 'bg-red-50'} text-red-800`
+      : `border-green-300 ${props.isPinned ? 'bg-green-100' : 'bg-green-50'} text-green-800`,
+    props.isPinned
+      ? isMissing()
         ? 'ring-2 ring-offset-1 ring-red-400 shadow-md shadow-red-400/50'
         : 'ring-2 ring-offset-1 ring-green-400 shadow-md shadow-green-400/50'
       : '',
   ].filter(Boolean).join(' ');
 
-  const ariaLabel = isMissing
-    ? `${formPath.path}: not yet mapped. Needs ${compatibleComponentLabels(formPath.type).join(' or ')}.`
-    : `${formPath.path}: mapped. Compatible with ${compatibleComponentLabels(formPath.type).join(' or ')}.`;
+  const ariaLabel = () => isMissing()
+    ? `${props.formPath.path}: not yet mapped. Needs ${compatibleComponentLabels(props.formPath.type).join(' or ')}.`
+    : `${props.formPath.path}: mapped. Compatible with ${compatibleComponentLabels(props.formPath.type).join(' or ')}.`;
 
   const handleInteract = (e: MouseEvent | FocusEvent) => {
     const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
-    onShowTooltip(formPath.path, { x: rect.left, y: rect.top });
+    props.onShowTooltip(props.formPath.path, { x: rect.left, y: rect.top });
   };
 
   return (
     <div
       role="button"
       tabIndex={0}
-      aria-pressed={isPinned}
-      aria-label={ariaLabel}
+      aria-pressed={props.isPinned}
+      aria-label={ariaLabel()}
       class={pillClass()}
       onMouseEnter={handleInteract}
-      onMouseLeave={onHideTooltip}
+      onMouseLeave={props.onHideTooltip}
       onFocus={handleInteract}
-      onBlur={onHideTooltip}
-      onClick={() => onClick(formPath.path)}
+      onBlur={props.onHideTooltip}
+      onClick={() => props.onClick(props.formPath.path)}
       onKeyDown={(e) => {
         if (e.key === 'Enter' || e.key === ' ') {
           e.preventDefault();
-          onClick(formPath.path);
+          props.onClick(props.formPath.path);
         }
       }}
     >
-      <span aria-hidden="true" class={isMissing ? 'text-red-400 font-sans' : 'text-green-600 font-sans'}>
-        {isMissing ? '✗' : '✓'}
+      <span aria-hidden="true" class={isMissing() ? 'text-red-400 font-sans' : 'text-green-600 font-sans'}>
+        {isMissing() ? '✗' : '✓'}
       </span>
-      {formPath.path}
-      <span aria-hidden="true" class={isMissing ? 'text-red-300 font-sans text-[10px] leading-none' : 'text-green-400 font-sans text-[10px] leading-none'}>
+      {props.formPath.path}
+      <span aria-hidden="true" class={isMissing() ? 'text-red-300 font-sans text-[10px] leading-none' : 'text-green-400 font-sans text-[10px] leading-none'}>
         ⓘ
       </span>
     </div>

From f97bd4aa537f83330fefce1cb65e9609ff405e1c Mon Sep 17 00:00:00 2001
From: Marie Harris <marie.harris@zebra.com>
Date: Thu, 12 Mar 2026 08:54:54 -0400
Subject: [PATCH 9/9] feat: use background-only to indicate pinned pill state

Remove ring and glow; pinned pills are now distinguished solely by
background darkening (bg-*-100 vs bg-*-50).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 builder-frontend/src/components/project/FormEditorView.tsx | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/builder-frontend/src/components/project/FormEditorView.tsx b/builder-frontend/src/components/project/FormEditorView.tsx
index 7a5f5180..573db764 100644
--- a/builder-frontend/src/components/project/FormEditorView.tsx
+++ b/builder-frontend/src/components/project/FormEditorView.tsx
@@ -256,11 +256,6 @@ const InputPill = (props: {
     isMissing()
       ? `border-red-300 ${props.isPinned ? 'bg-red-100' : 'bg-red-50'} text-red-800`
       : `border-green-300 ${props.isPinned ? 'bg-green-100' : 'bg-green-50'} text-green-800`,
-    props.isPinned
-      ? isMissing()
-        ? 'ring-2 ring-offset-1 ring-red-400 shadow-md shadow-red-400/50'
-        : 'ring-2 ring-offset-1 ring-green-400 shadow-md shadow-green-400/50'
-      : '',
   ].filter(Boolean).join(' ');
 
   const ariaLabel = () => isMissing()