feat: Implement editable field components for scalar value types

[kumaradityaraj]

Closes #295

Changes

• Added Input for string fields with focus-visible ring styling.

• Added auto-growing Textarea for long string fields such as commands and scripts.

• Added Input with type="number" for number fields.

• Added Switch for boolean fields.

• Added Combobox for enum fields.

• Added monospace Input with hint text for runtime expression fields.

• Added Input with ISO 8601 validation for duration fields.

• Added isReadOnly support across all scalar field controls:

  • Uses the native disabled state for accessibility.
  • Fields remain visible but non-interactive in read-only mode.
  • Edit/pencil icons are hidden when isReadOnly is enabled.

Screenshots

[Copilot]

Pull request overview

Note

Copilot was unable to run its full agentic suite in this review.

This PR enhances the side panel “Properties” rendering by introducing richer field typing in getTaskDetails and rendering those field types as appropriate UI controls (inputs, switches, textarea, combobox) instead of plain text.

Changes:

• Refactors DetailField to include richer kind variants (scalar/enum/runtime-expression/duration/long-string) and updates task flattening logic accordingly.
• Updates the side panel property renderer to render per-kind controls (e.g., number input, switch, textarea, combobox).
• Updates and expands tests to reflect the new field model and verify rendering for number/boolean fields.

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
packages/open-workflow-diagram-editor/tests/side-panel/NodeDetailsView.test.tsx	Updates assertions to match input-based rendering and adds tests for number + boolean controls.
packages/open-workflow-diagram-editor/tests/core/taskDetails.test.ts	Updates expected DetailField shapes and adds tests for long-string/enum/duration classification.
packages/open-workflow-diagram-editor/src/side-panel/NodeDetailsView.tsx	Routes DetailField objects to PropertyField for typed rendering; propagates isReadOnly.
packages/open-workflow-diagram-editor/src/side-panel/Fields.tsx	Implements typed property rendering controls (textarea/input/switch/combobox) and duration validation.
packages/open-workflow-diagram-editor/src/core/taskDetails.ts	Expands DetailField and adds classification for long-string/runtime-expression/duration/enum fields.

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.