Build Metadata-Driven UI System for Plugin Configuration

[coderabbitai]

Overview

Create a dynamic UI system that automatically generates configuration forms from plugin metadata (no manual UI coding needed for new plugins).

Context

Related to PR #40 - Enable zero-code UI generation for plugin configuration.

Implementation Steps

1. Dynamic Form Component

Create src/lib/plugin-system/ui/dynamic-form.tsx:

• Render form fields based on PluginProperty[]
• Support all property types: string, number, boolean, select, json, dynamic
• Handle validation and error display
• Support nested objects and arrays
• Real-time validation

2. Plugin Dialog Component

Create src/lib/plugin-system/ui/plugin-dialog.tsx:

• Generic dialog for any plugin configuration
• Uses DynamicForm internally
• Handles save/cancel actions
• Displays plugin icon and metadata
• Validation before save

3. Dynamic Select Field

Create src/lib/plugin-system/ui/dynamic-select-field.tsx:

• Fetches options from API based on current configuration
• Example: Load Google Forms list after authentication
• Supports search and pagination
• Caching for performance

4. Variable Picker Component

Create src/lib/plugin-system/ui/variable-picker.tsx:

• Shows available variables from previous nodes
• Autocomplete with {{variable}} syntax
• Context-aware suggestions

5. Field Type Implementations

Each property type needs a renderer:

• string → Input
• number → Input type="number"
• boolean → Switch
• select → Select dropdown
• json → Code editor (Monaco or CodeMirror)
• dynamic → Async select with API calls

Acceptance Criteria

• DynamicForm component renders all property types correctly
• Validation works (required, min/max, pattern, custom)
• PluginDialog is fully functional
• Dynamic fields load options from API
• Variable picker works for string fields
• Error states display properly
• Form state management is clean
• Responsive design for mobile

Example Usage

<PluginDialog
  plugin={googleFormsPlugin}
  open={isOpen}
  onOpenChange={setIsOpen}
  onSave={(config) => {
    // config contains all field values
    saveNodeConfiguration(config);
  }}
/>

Dependencies

• Issue feat: tRPC Initalized #1 (Plugin System Foundation)

Estimated Effort

• Large (10-14 hours)

---

Backlink: #40

[github-actions]

👋 Thanks for opening another issue, @coderabbitai[bot]! We appreciate your continued engagement with the project.

Quick checklist:

• Clear description of the issue
• Steps to reproduce (if applicable)
• Expected vs actual behavior

We'll take a look as soon as possible!

[coderabbitai]

Coding Plan

Approach

Build a metadata-driven UI system that automatically generates plugin configuration forms from PluginProperty[] metadata. This requires creating the type foundation (since Issue #1's plugin system doesn't exist yet), individual field renderers for each property type, and composite components (DynamicForm, PluginDialog, VariablePicker) that orchestrate the dynamic form generation.

Observations

The codebase is a Next.js workflow automation application using shadcn/ui components built on Radix UI, React Hook Form with Zod validation, and tRPC for API calls. Forms follow a composition pattern with Form, FormField, FormItem, FormControl, and FormMessage components. Dialogs use shadcn/ui's Dialog component. The workflow system uses ReactFlow with nodes containing flexible JSON data fields, and Handlebars for {{variable}} interpolation at execution time. Critically, the plugin system foundation (Issue #1) has not been implemented—there are no PluginProperty interfaces, plugin types, or plugin-system directory. The codebase has a topologicalSort utility that can be leveraged for determining variable availability from predecessor nodes.

Assumptions

Assumption 1: PluginProperty Type Definitions

Options Considered:

1. Wait for Issue #1 to be completed before implementing this ticket
2. Define minimal PluginProperty types within this ticket to enable UI development

Chosen Option: 2

Rationale: Define minimal types as part of this implementation since the UI components cannot function without them, and the types can be refined when Issue #1 is formally implemented.

Assumption 2: JSON Field Code Editor

Options Considered:

1. Use a basic Textarea with JSON validation as an interim solution
2. Add @monaco-editor/react package and implement full code editor

Chosen Option: 2

Rationale: Install @monaco-editor/react since the ticket explicitly requires a code editor, and Monaco provides syntax highlighting, validation, and proper JSON editing experience essential for the json property type.

Assumption 3: Variable Picker Integration Approach

Options Considered:

1. Replace standard Input with a custom component that includes the picker inline
2. Add a popover/trigger button adjacent to string fields that opens the picker

Chosen Option: 2

Rationale: Use an adjacent trigger button with a popover containing the variable list, as this follows existing UI patterns, doesn't require replacing core Input components, and provides clear visual affordance for the feature.

💡 User Tips

Regenerate the plan with different choices with @coderabbitai <feedback>.

Implementation Steps

Phase 1: Foundation & Type System

Establish the plugin property type definitions, Zod schema generation utility, and variable availability utility. These foundational pieces are required before building any UI components.

Task 1: Create Plugin Property Type Definitions

Define the TypeScript interfaces that describe plugin property metadata, validation rules, and property type discriminators.

• Create src/lib/plugin-system/types/ directory for type definitions
• Define PropertyType union type covering: 'string' | 'number' | 'boolean' | 'select' | 'json' | 'dynamic'
• Define base PluginPropertyBase interface with common fields: name, label, description, required, defaultValue
• Define type-specific interfaces using discriminated unions:
  • StringProperty with minLength, maxLength, pattern, supportsVariables
  • NumberProperty with min, max, step
  • BooleanProperty (minimal, mostly uses base)
  • SelectProperty with static options: Array<{value, label}>
  • JsonProperty with optional JSON schema for validation
  • DynamicProperty with optionsEndpoint, searchable, dependsOn fields
• Define PluginProperty as union of all property types
• Define PluginMetadata interface with id, name, description, icon, properties: PluginProperty[]
• Export all types from src/lib/plugin-system/types/index.ts

Task 2: Create Zod Schema Generator Utility

Build a utility function that converts PluginProperty[] metadata into a Zod validation schema for use with React Hook Form.

• Create src/lib/plugin-system/utils/schema-generator.ts
• Implement generateZodSchema(properties: PluginProperty[]): z.ZodObject function
• Map each property type to appropriate Zod validators:
  • String: z.string() with .min(), .max(), .regex() based on property config
  • Number: z.number() with .min(), .max()
  • Boolean: z.boolean()
  • Select: z.enum() from options values
  • Json: z.string() with custom .refine() for JSON parsing validation
  • Dynamic: z.string() or z.array(z.string()) based on multi-select config
• Handle required vs optional fields using .optional() modifier
• Apply default values using .default() where specified

Task 3: Create Variable Availability Utility

Build a utility to determine which variables are accessible to a given node based on its position in the workflow graph.

• Create src/lib/plugin-system/utils/variable-utils.ts
• Implement getAvailableVariables(nodeId: string, nodes: Node[], edges: Edge[]): Variable[] function
• Use ReactFlow's getIncomers utility or adapt the existing topologicalSort for backward traversal
• Recursively collect all predecessor nodes (not just immediate parents)
• Extract variableName from each predecessor node's data field
• Return array of Variable objects with name, sourceNodeId, sourceNodeType, path suggestions
• Define Variable interface in the types directory

🤖 Prompt for AI agents

Establish the foundational type system and utilities for the plugin property
metadata system. The goal is to create TypeScript types, Zod schema generation,
and variable availability utilities that will be used by all UI components.

**Task 1: Plugin Property Type Definitions**
- Create directory structure: `src/lib/plugin-system/types/`
- Define `PropertyType` as a union type: `'string' | 'number' | 'boolean' |
'select' | 'json' | 'dynamic'`
- Create base interface `PluginPropertyBase` with fields: `name`, `label`,
`description`, `required`, `defaultValue`
- Use discriminated unions with `type` discriminator to define property-specific
interfaces:
- `StringProperty`: extends base with `type: 'string'`, `minLength`,
`maxLength`, `pattern`, `supportsVariables`
  - `NumberProperty`: extends base with `type: 'number'`, `min`, `max`, `step`
  - `BooleanProperty`: extends base with `type: 'boolean'`
- `SelectProperty`: extends base with `type: 'select'`, `options: Array<{value:
string, label: string}>`
  - `JsonProperty`: extends base with `type: 'json'`, optional JSON schema
- `DynamicProperty`: extends base with `type: 'dynamic'`, `optionsEndpoint`,
`searchable`, `dependsOn`
- Define `PluginProperty` as union of all property interfaces
- Define `PluginMetadata` interface with `id`, `name`, `description`, `icon`,
`properties: PluginProperty[]`
- Define `Variable` interface with `name`, `sourceNodeId`, `sourceNodeType`,
`path`
- Export all types from `src/lib/plugin-system/types/index.ts`

**Task 2: Zod Schema Generator**
- Create `src/lib/plugin-system/utils/schema-generator.ts`
- Implement `generateZodSchema(properties: PluginProperty[]): z.ZodObject` that
converts property metadata to Zod schema
- Use switch statement or type guards on `property.type` to map to appropriate
Zod validators:
- `string`: `z.string()` with conditional `.min()`, `.max()`, `.regex()` based
on property config
  - `number`: `z.number()` with conditional `.min()`, `.max()`
  - `boolean`: `z.boolean()`
  - `select`: `z.enum()` derived from options array values
  - `json`: `z.string()` with `.refine()` callback that validates JSON parsing
  - `dynamic`: `z.string()` or `z.array(z.string())` based on configuration
- Apply `.optional()` when `property.required` is false
- Apply `.default()` when `property.defaultValue` is defined
- Return composed `z.object()` with all property schemas

**Task 3: Variable Availability Utility**
- Create `src/lib/plugin-system/utils/variable-utils.ts`
- Implement `getAvailableVariables(nodeId: string, nodes: Node[], edges:
Edge[]): Variable[]`
- Use ReactFlow's `getIncomers` utility or leverage existing `topologicalSort`
utility for graph traversal
- Recursively traverse backward from the given node to collect all predecessor
nodes
- Extract `variableName` from each predecessor's `data` field
- Construct `Variable` objects with `name`, `sourceNodeId`, `sourceNodeType`,
and suggested `path` values
- Return array of available variables

Phase 2: Field Type Components

Create individual field renderer components for each property type. Each component receives property metadata and integrates with React Hook Form.

Task 1: Create Base Field Renderers (String, Number, Boolean)

Implement the straightforward field type components that map directly to existing shadcn/ui primitives.

• Create src/lib/plugin-system/ui/fields/ directory for field components
• Create string-field.tsx: Render Input component, pass through validation props, conditionally show VariablePicker trigger when supportsVariables is true
• Create number-field.tsx: Render Input type="number" with min, max, step attributes from property config
• Create boolean-field.tsx: Render Switch component from shadcn/ui
• All field components accept PluginProperty, control (from React Hook Form), and name props
• Use existing FormField, FormItem, FormLabel, FormControl, FormDescription, FormMessage composition pattern
• Follow the styling patterns from src/features/executions/components/http-request/dialog.tsx

Task 2: Create Select Field Renderer

Implement the static select field that renders options defined in the property metadata.

• Create src/lib/plugin-system/ui/fields/select-field.tsx
• Use shadcn/ui Select component with SelectTrigger, SelectContent, SelectItem
• Map property.options array to SelectItem components
• Include placeholder text from property description
• Handle controlled value through React Hook Form's Controller

Task 3: Create JSON Field Renderer with Monaco Editor

Implement the JSON field with Monaco Editor for syntax highlighting and validation.

• Add @monaco-editor/react package dependency (note in implementation)
• Create src/lib/plugin-system/ui/fields/json-field.tsx
• Integrate Monaco Editor with React Hook Form using controlled component pattern
• Configure Monaco for JSON language mode with syntax highlighting
• Set editor height to reasonable default (e.g., 200px) with option to resize
• Add JSON parse validation in the field's onChange handler
• Display parsing errors inline below the editor
• Use useTheme or similar to match Monaco theme to app theme (light/dark)

Task 4: Create Dynamic Select Field

Implement the async select field that fetches options from an API endpoint.

• Create src/lib/plugin-system/ui/fields/dynamic-select-field.tsx
• Accept optionsEndpoint from property config to determine which tRPC endpoint to call
• Implement search input with debounced query parameter
• Use useQuery from tRPC client following patterns in src/features/workflows/hooks/
• Display loading state while fetching options
• Render options in a searchable Select or Combobox component (consider using cmdk which is already installed)
• Handle pagination with "load more" if API returns hasNextPage
• React Query provides caching automatically - configure appropriate staleTime
• Support dependsOn to refetch when dependent field values change using useWatch from React Hook Form

Task 5: Create Variable Picker Component

Build the component that displays available variables and allows insertion into string fields.

• Create src/lib/plugin-system/ui/variable-picker.tsx
• Render as a Popover with a trigger button (icon button with variable/bracket icon)
• Use the getAvailableVariables utility to fetch available variables for current node context
• Display variables grouped by source node with node name as section header
• Each variable shows the variable name and common path suggestions (e.g., variableName.httpResponse.data)
• On variable selection, call onSelect(variableString) callback with formatted {{variableName.path}} string
• Support keyboard navigation within the popover list
• Include search/filter input for workflows with many variables

Task 6: Create Field Renderer Registry

Create a mapping component that selects the appropriate field renderer based on property type.

• Create src/lib/plugin-system/ui/fields/index.tsx as the main export
• Implement FieldRenderer component that accepts PluginProperty and renders the correct field component
• Use a switch statement or object map on property.type to select renderer
• Export individual field components for direct use if needed
• This component will be used by DynamicForm to render each property

🤖 Prompt for AI agents

Create individual field renderer components for each property type that
integrate with React Hook Form and shadcn/ui. The goal is to build reusable,
type-specific field components that can be orchestrated by the DynamicForm
component.

**Task 1: Base Field Renderers**
- Create directory: `src/lib/plugin-system/ui/fields/`
- Create `string-field.tsx`:
  - Accept props: `property` (StringProperty), `control`, `name`
  - Use shadcn/ui `Input` component within React Hook Form composition pattern
- Wrap in `FormField`, `FormItem`, `FormLabel`, `FormControl`,
`FormDescription`, `FormMessage`
- Conditionally render VariablePicker trigger button adjacent to input when
`property.supportsVariables` is true
- Apply validation attributes from property config (`minLength`, `maxLength`,
`pattern`)
- Create `number-field.tsx`:
  - Similar structure to string field
- Render `Input` with `type="number"` and attributes: `min`, `max`, `step` from
property config
- Create `boolean-field.tsx`:
  - Use shadcn/ui `Switch` component
- Follow same form composition pattern with appropriate layout for switch
controls
- Follow styling patterns from
`src/features/executions/components/http-request/dialog.tsx`

**Task 2: Select Field Renderer**
- Create `src/lib/plugin-system/ui/fields/select-field.tsx`
- Accept props: `property` (SelectProperty), `control`, `name`
- Use shadcn/ui `Select` with `SelectTrigger`, `SelectContent`, `SelectItem`
components
- Map `property.options` array to render `SelectItem` for each option (value and
label)
- Use placeholder text from `property.description`
- Integrate with React Hook Form using `Controller` component for controlled
state

**Task 3: JSON Field with Monaco Editor**
- Note: Requires adding `@monaco-editor/react` package dependency
- Create `src/lib/plugin-system/ui/fields/json-field.tsx`
- Accept props: `property` (JsonProperty), `control`, `name`
- Import and render Monaco Editor component from `@monaco-editor/react`
- Configure editor: `language="json"`, `height="200px"`, enable syntax
highlighting
- Integrate with React Hook Form using controlled component pattern
(value/onChange)
- Implement onChange handler that validates JSON parsing and updates form state
- Display JSON parsing errors below the editor using `FormMessage` or custom
error display
- Use `useTheme` hook to determine theme and set Monaco theme accordingly
(`vs-dark` or `vs-light`)

**Task 4: Dynamic Select Field**
- Create `src/lib/plugin-system/ui/fields/dynamic-select-field.tsx`
- Accept props: `property` (DynamicProperty), `control`, `name`, `nodeId`
- Implement search input with debouncing (use `useDebouncedValue` or similar)
- Use tRPC `useQuery` hook to fetch options from endpoint specified in
`property.optionsEndpoint`
- Display loading spinner/skeleton while fetching
- Render using shadcn/ui Combobox or Select component (leverage `cmdk` if using
Combobox)
- Handle pagination if API returns `hasNextPage` - add "Load More" button
- Use `useWatch` from React Hook Form to watch `property.dependsOn` fields and
refetch when they change
- Configure React Query `staleTime` for appropriate caching behavior

**Task 5: Variable Picker Component**
- Create `src/lib/plugin-system/ui/variable-picker.tsx`
- Accept props: `nodeId`, `nodes`, `edges`, `onSelect: (variable: string) =>
void`
- Render icon button trigger (use bracket or variable icon)
- Wrap in shadcn/ui `Popover` component
- Call `getAvailableVariables(nodeId, nodes, edges)` to get available variables
- Group variables by source node with section headers showing node names
- Display each variable with name and path suggestions (e.g.,
`{{variableName.httpResponse.data}}`)
- On click, call `onSelect` with formatted Handlebars variable string
`{{variableName.path}}`
- Implement search/filter input at top of popover for filtering variables
- Support keyboard navigation within the list (arrow keys, enter to select)

**Task 6: Field Renderer Registry**
- Create `src/lib/plugin-system/ui/fields/index.tsx`
- Implement `FieldRenderer` component:
- Accept props: `property` (PluginProperty union type), `control`, `name`,
`nodeId`, `nodes`, `edges`
- Use switch statement on `property.type` to render appropriate field component:
    - `'string'` → StringField
    - `'number'` → NumberField
    - `'boolean'` → BooleanField
    - `'select'` → SelectField
    - `'json'` → JsonField
    - `'dynamic'` → DynamicSelectField
  - Pass through all necessary props to each field component
- Export `FieldRenderer` as default
- Export individual field components for direct usage: `StringField`,
`NumberField`, `BooleanField`, `SelectField`, `JsonField`, `DynamicSelectField`

Phase 3: Core UI Components

Build the main composite components that orchestrate the dynamic form generation and provide the public API for plugin configuration.

Task 1: Create DynamicForm Component

Build the core component that generates a complete form from plugin property metadata.

• Create src/lib/plugin-system/ui/dynamic-form.tsx
• Accept props: properties: PluginProperty[], defaultValues: Record<string, unknown>, onSubmit: (values) => void, nodeId?: string (for variable context)
• Use generateZodSchema utility to create validation schema from properties
• Initialize React Hook Form with useForm, zodResolver, and computed schema
• Map over properties array and render FieldRenderer for each
• Handle form layout - stack fields vertically with consistent spacing
• Support grouping if properties define a group field (optional enhancement)
• Expose form methods via ref using useImperativeHandle for external validation triggers
• Reset form when defaultValues prop changes (follow pattern from http-request dialog)

Task 2: Create PluginDialog Component

Build the dialog wrapper that provides the complete plugin configuration UI.

• Create src/lib/plugin-system/ui/plugin-dialog.tsx
• Accept props: plugin: PluginMetadata, open: boolean, onOpenChange: (open) => void, onSave: (config) => void, defaultValues?: Record<string, unknown>, nodeId?: string
• Use shadcn/ui Dialog with standard structure (DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter)
• Display plugin icon (if provided) and name in DialogHeader
• Show plugin description in DialogDescription
• Render DynamicForm in the dialog body, passing through properties and nodeId
• DialogFooter contains Cancel and Save buttons
• Save button triggers form validation, then calls onSave with form values if valid
• Show loading state on Save button during submission (accept isSaving prop or manage internally)
• Cancel button calls onOpenChange(false) without saving

Task 3: Create Component Exports and Integration Helpers

Consolidate exports and create any helper hooks for common integration patterns.

• Create src/lib/plugin-system/ui/index.ts with clean public exports
• Export: DynamicForm, PluginDialog, VariablePicker, FieldRenderer
• Export individual field components for customization use cases
• Create src/lib/plugin-system/index.ts as main package entry point
• Export types, utilities, and UI components from single entry
• Consider creating usePluginForm hook that encapsulates common form setup patterns

🤖 Prompt for AI agents

Build the composite UI components that orchestrate the dynamic form generation
and provide the main API for plugin configuration. The goal is to create
DynamicForm and PluginDialog components that consume the field renderers and
utilities from previous phases.

**Task 1: DynamicForm Component**
- Create `src/lib/plugin-system/ui/dynamic-form.tsx`
- Accept props:
  - `properties: PluginProperty[]`
  - `defaultValues: Record<string, unknown>`
  - `onSubmit: (values: Record<string, unknown>) => void`
  - `nodeId?: string` (for variable context)
  - `nodes?: Node[]` (for variable availability)
  - `edges?: Edge[]` (for variable availability)
- Use `generateZodSchema(properties)` to create Zod schema
- Initialize React Hook Form:
  - `const form = useForm({ resolver: zodResolver(schema), defaultValues })`
- Render shadcn/ui `Form` component wrapping the form fields
- Map over `properties` array and render `FieldRenderer` for each property:
- Pass `property`, `control={form.control}`, `name={property.name}`, `nodeId`,
`nodes`, `edges`
- Apply vertical stacking layout with consistent spacing (use CSS or flex/grid)
- Optionally support grouping by `property.group` field if defined (render
groups with visual separation)
- Use `useImperativeHandle` with `forwardRef` to expose form methods (`trigger`,
`getValues`, `reset`) for external control
- Use `useEffect` to reset form when `defaultValues` prop changes (follow
pattern from http-request dialog)
- Handle form submission with `form.handleSubmit(onSubmit)`

**Task 2: PluginDialog Component**
- Create `src/lib/plugin-system/ui/plugin-dialog.tsx`
- Accept props:
  - `plugin: PluginMetadata`
  - `open: boolean`
  - `onOpenChange: (open: boolean) => void`
  - `onSave: (config: Record<string, unknown>) => void`
  - `defaultValues?: Record<string, unknown>`
  - `nodeId?: string`
  - `nodes?: Node[]`
  - `edges?: Edge[]`
  - `isSaving?: boolean` (optional loading state)
- Use shadcn/ui Dialog structure:
  - `Dialog` with `open` and `onOpenChange` props
  - `DialogContent` as container
  - `DialogHeader` with `DialogTitle` and `DialogDescription`
  - `DialogFooter` for action buttons
- In DialogHeader:
  - Display plugin icon if `plugin.icon` is provided
  - Show `plugin.name` as title
  - Show `plugin.description` in DialogDescription
- In dialog body:
  - Render `DynamicForm` component
- Pass `properties={plugin.properties}`, `defaultValues`, `nodeId`, `nodes`,
`edges`
  - Use ref to access form methods
- In DialogFooter:
  - Render Cancel button that calls `onOpenChange(false)`
  - Render Save button that:
    - Triggers form validation using form ref
    - Calls `onSave` with form values if validation passes
    - Shows loading spinner when `isSaving` is true
    - Disabled state when `isSaving` is true

**Task 3: Component Exports and Integration Helpers**
- Create `src/lib/plugin-system/ui/index.ts`:
  - Export `DynamicForm` from `./dynamic-form`
  - Export `PluginDialog` from `./plugin-dialog`
  - Export `VariablePicker` from `./variable-picker`
  - Export `FieldRenderer` and individual field components from `./fields`
- Create `src/lib/plugin-system/index.ts` as main entry point:
  - Re-export all types from `./types`
- Re-export utilities: `generateZodSchema`, `getAvailableVariables` from
`./utils`
  - Re-export all UI components from `./ui`
- Optional: Create `usePluginForm` hook in
`src/lib/plugin-system/hooks/use-plugin-form.ts`:
- Encapsulate common form setup: schema generation, form initialization,
validation
  - Accept `properties` and `defaultValues`
  - Return form instance and helper methods
  - Export from main index if created

---

🚀 Next Steps

🤖 All AI agent prompts combined

Task: 1

Establish the foundational type system and utilities for the plugin property
metadata system. The goal is to create TypeScript types, Zod schema generation,
and variable availability utilities that will be used by all UI components.

**Task 1: Plugin Property Type Definitions**
- Create directory structure: `src/lib/plugin-system/types/`
- Define `PropertyType` as a union type: `'string' | 'number' | 'boolean' |
'select' | 'json' | 'dynamic'`
- Create base interface `PluginPropertyBase` with fields: `name`, `label`,
`description`, `required`, `defaultValue`
- Use discriminated unions with `type` discriminator to define property-specific
interfaces:
- `StringProperty`: extends base with `type: 'string'`, `minLength`,
`maxLength`, `pattern`, `supportsVariables`
  - `NumberProperty`: extends base with `type: 'number'`, `min`, `max`, `step`
  - `BooleanProperty`: extends base with `type: 'boolean'`
- `SelectProperty`: extends base with `type: 'select'`, `options: Array<{value:
string, label: string}>`
  - `JsonProperty`: extends base with `type: 'json'`, optional JSON schema
- `DynamicProperty`: extends base with `type: 'dynamic'`, `optionsEndpoint`,
`searchable`, `dependsOn`
- Define `PluginProperty` as union of all property interfaces
- Define `PluginMetadata` interface with `id`, `name`, `description`, `icon`,
`properties: PluginProperty[]`
- Define `Variable` interface with `name`, `sourceNodeId`, `sourceNodeType`,
`path`
- Export all types from `src/lib/plugin-system/types/index.ts`

**Task 2: Zod Schema Generator**
- Create `src/lib/plugin-system/utils/schema-generator.ts`
- Implement `generateZodSchema(properties: PluginProperty[]): z.ZodObject` that
converts property metadata to Zod schema
- Use switch statement or type guards on `property.type` to map to appropriate
Zod validators:
- `string`: `z.string()` with conditional `.min()`, `.max()`, `.regex()` based
on property config
  - `number`: `z.number()` with conditional `.min()`, `.max()`
  - `boolean`: `z.boolean()`
  - `select`: `z.enum()` derived from options array values
  - `json`: `z.string()` with `.refine()` callback that validates JSON parsing
  - `dynamic`: `z.string()` or `z.array(z.string())` based on configuration
- Apply `.optional()` when `property.required` is false
- Apply `.default()` when `property.defaultValue` is defined
- Return composed `z.object()` with all property schemas

**Task 3: Variable Availability Utility**
- Create `src/lib/plugin-system/utils/variable-utils.ts`
- Implement `getAvailableVariables(nodeId: string, nodes: Node[], edges:
Edge[]): Variable[]`
- Use ReactFlow's `getIncomers` utility or leverage existing `topologicalSort`
utility for graph traversal
- Recursively traverse backward from the given node to collect all predecessor
nodes
- Extract `variableName` from each predecessor's `data` field
- Construct `Variable` objects with `name`, `sourceNodeId`, `sourceNodeType`,
and suggested `path` values
- Return array of available variables
===============================================================================

Task: 2

Create individual field renderer components for each property type that
integrate with React Hook Form and shadcn/ui. The goal is to build reusable,
type-specific field components that can be orchestrated by the DynamicForm
component.

**Task 1: Base Field Renderers**
- Create directory: `src/lib/plugin-system/ui/fields/`
- Create `string-field.tsx`:
  - Accept props: `property` (StringProperty), `control`, `name`
  - Use shadcn/ui `Input` component within React Hook Form composition pattern
- Wrap in `FormField`, `FormItem`, `FormLabel`, `FormControl`,
`FormDescription`, `FormMessage`
- Conditionally render VariablePicker trigger button adjacent to input when
`property.supportsVariables` is true
- Apply validation attributes from property config (`minLength`, `maxLength`,
`pattern`)
- Create `number-field.tsx`:
  - Similar structure to string field
- Render `Input` with `type="number"` and attributes: `min`, `max`, `step` from
property config
- Create `boolean-field.tsx`:
  - Use shadcn/ui `Switch` component
- Follow same form composition pattern with appropriate layout for switch
controls
- Follow styling patterns from
`src/features/executions/components/http-request/dialog.tsx`

**Task 2: Select Field Renderer**
- Create `src/lib/plugin-system/ui/fields/select-field.tsx`
- Accept props: `property` (SelectProperty), `control`, `name`
- Use shadcn/ui `Select` with `SelectTrigger`, `SelectContent`, `SelectItem`
components
- Map `property.options` array to render `SelectItem` for each option (value and
label)
- Use placeholder text from `property.description`
- Integrate with React Hook Form using `Controller` component for controlled
state

**Task 3: JSON Field with Monaco Editor**
- Note: Requires adding `@monaco-editor/react` package dependency
- Create `src/lib/plugin-system/ui/fields/json-field.tsx`
- Accept props: `property` (JsonProperty), `control`, `name`
- Import and render Monaco Editor component from `@monaco-editor/react`
- Configure editor: `language="json"`, `height="200px"`, enable syntax
highlighting
- Integrate with React Hook Form using controlled component pattern
(value/onChange)
- Implement onChange handler that validates JSON parsing and updates form state
- Display JSON parsing errors below the editor using `FormMessage` or custom
error display
- Use `useTheme` hook to determine theme and set Monaco theme accordingly
(`vs-dark` or `vs-light`)

**Task 4: Dynamic Select Field**
- Create `src/lib/plugin-system/ui/fields/dynamic-select-field.tsx`
- Accept props: `property` (DynamicProperty), `control`, `name`, `nodeId`
- Implement search input with debouncing (use `useDebouncedValue` or similar)
- Use tRPC `useQuery` hook to fetch options from endpoint specified in
`property.optionsEndpoint`
- Display loading spinner/skeleton while fetching
- Render using shadcn/ui Combobox or Select component (leverage `cmdk` if using
Combobox)
- Handle pagination if API returns `hasNextPage` - add "Load More" button
- Use `useWatch` from React Hook Form to watch `property.dependsOn` fields and
refetch when they change
- Configure React Query `staleTime` for appropriate caching behavior

**Task 5: Variable Picker Component**
- Create `src/lib/plugin-system/ui/variable-picker.tsx`
- Accept props: `nodeId`, `nodes`, `edges`, `onSelect: (variable: string) =>
void`
- Render icon button trigger (use bracket or variable icon)
- Wrap in shadcn/ui `Popover` component
- Call `getAvailableVariables(nodeId, nodes, edges)` to get available variables
- Group variables by source node with section headers showing node names
- Display each variable with name and path suggestions (e.g.,
`{{variableName.httpResponse.data}}`)
- On click, call `onSelect` with formatted Handlebars variable string
`{{variableName.path}}`
- Implement search/filter input at top of popover for filtering variables
- Support keyboard navigation within the list (arrow keys, enter to select)

**Task 6: Field Renderer Registry**
- Create `src/lib/plugin-system/ui/fields/index.tsx`
- Implement `FieldRenderer` component:
- Accept props: `property` (PluginProperty union type), `control`, `name`,
`nodeId`, `nodes`, `edges`
- Use switch statement on `property.type` to render appropriate field component:
    - `'string'` → StringField
    - `'number'` → NumberField
    - `'boolean'` → BooleanField
    - `'select'` → SelectField
    - `'json'` → JsonField
    - `'dynamic'` → DynamicSelectField
  - Pass through all necessary props to each field component
- Export `FieldRenderer` as default
- Export individual field components for direct usage: `StringField`,
`NumberField`, `BooleanField`, `SelectField`, `JsonField`, `DynamicSelectField`
===============================================================================

Task: 3

Build the composite UI components that orchestrate the dynamic form generation
and provide the main API for plugin configuration. The goal is to create
DynamicForm and PluginDialog components that consume the field renderers and
utilities from previous phases.

**Task 1: DynamicForm Component**
- Create `src/lib/plugin-system/ui/dynamic-form.tsx`
- Accept props:
  - `properties: PluginProperty[]`
  - `defaultValues: Record<string, unknown>`
  - `onSubmit: (values: Record<string, unknown>) => void`
  - `nodeId?: string` (for variable context)
  - `nodes?: Node[]` (for variable availability)
  - `edges?: Edge[]` (for variable availability)
- Use `generateZodSchema(properties)` to create Zod schema
- Initialize React Hook Form:
  - `const form = useForm({ resolver: zodResolver(schema), defaultValues })`
- Render shadcn/ui `Form` component wrapping the form fields
- Map over `properties` array and render `FieldRenderer` for each property:
- Pass `property`, `control={form.control}`, `name={property.name}`, `nodeId`,
`nodes`, `edges`
- Apply vertical stacking layout with consistent spacing (use CSS or flex/grid)
- Optionally support grouping by `property.group` field if defined (render
groups with visual separation)
- Use `useImperativeHandle` with `forwardRef` to expose form methods (`trigger`,
`getValues`, `reset`) for external control
- Use `useEffect` to reset form when `defaultValues` prop changes (follow
pattern from http-request dialog)
- Handle form submission with `form.handleSubmit(onSubmit)`

**Task 2: PluginDialog Component**
- Create `src/lib/plugin-system/ui/plugin-dialog.tsx`
- Accept props:
  - `plugin: PluginMetadata`
  - `open: boolean`
  - `onOpenChange: (open: boolean) => void`
  - `onSave: (config: Record<string, unknown>) => void`
  - `defaultValues?: Record<string, unknown>`
  - `nodeId?: string`
  - `nodes?: Node[]`
  - `edges?: Edge[]`
  - `isSaving?: boolean` (optional loading state)
- Use shadcn/ui Dialog structure:
  - `Dialog` with `open` and `onOpenChange` props
  - `DialogContent` as container
  - `DialogHeader` with `DialogTitle` and `DialogDescription`
  - `DialogFooter` for action buttons
- In DialogHeader:
  - Display plugin icon if `plugin.icon` is provided
  - Show `plugin.name` as title
  - Show `plugin.description` in DialogDescription
- In dialog body:
  - Render `DynamicForm` component
- Pass `properties={plugin.properties}`, `defaultValues`, `nodeId`, `nodes`,
`edges`
  - Use ref to access form methods
- In DialogFooter:
  - Render Cancel button that calls `onOpenChange(false)`
  - Render Save button that:
    - Triggers form validation using form ref
    - Calls `onSave` with form values if validation passes
    - Shows loading spinner when `isSaving` is true
    - Disabled state when `isSaving` is true

**Task 3: Component Exports and Integration Helpers**
- Create `src/lib/plugin-system/ui/index.ts`:
  - Export `DynamicForm` from `./dynamic-form`
  - Export `PluginDialog` from `./plugin-dialog`
  - Export `VariablePicker` from `./variable-picker`
  - Export `FieldRenderer` and individual field components from `./fields`
- Create `src/lib/plugin-system/index.ts` as main entry point:
  - Re-export all types from `./types`
- Re-export utilities: `generateZodSchema`, `getAvailableVariables` from
`./utils`
  - Re-export all UI components from `./ui`
- Optional: Create `usePluginForm` hook in
`src/lib/plugin-system/hooks/use-plugin-form.ts`:
- Encapsulate common form setup: schema generation, form initialization,
validation
  - Accept `properties` and `defaultValues`
  - Return form instance and helper methods
  - Export from main index if created

💡 Iterate on the plan with: @coderabbitai <feedback>

Example Feedback
- `@coderabbitai` You can skip phase 3. Add a simple unit test case for phase 2.
- `@coderabbitai` For assumption 1 go ahead with option 3 and replan.

---

💬 Have feedback or questions? Drop into our discord!