feat: Add badge to leaf nodes

[lornakelly]

Closes #85

Summary

Add badge rendering and subtype extraction for leaf nodes

Changes

• Extract subtypes from Call, Run and Listen tasks
• Add TaskNodeBadge component
• Render known subtypes as text and unknown as info icon with tooltip
• Add missing Catch leaf node and TryCatch container node with placeholder content

[Copilot]

Pull request overview

This PR adds subtype “badges” to task leaf nodes in the React Flow diagram editor, along with subtype extraction helpers and initial support for TryCatch/Catch nodes to advance the agreed node styling/UX work.

Changes:

• Introduces task subtype extraction utilities for Call, Run, and Listen tasks and exports them from src/core.
• Adds badge rendering to leaf task nodes (text for known subtypes, info-icon with tooltip for unknown).
• Adds Catch as a leaf node (incl. config + tests) and TryCatch as a placeholder container node; adjusts default node sizing and demo diagram data.

Reviewed changes

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

Show a summary per file

File	Description
packages/serverless-workflow-diagram-editor/tests/react-flow/nodes/taskNodeConfig.test.ts	Updates leaf node config coverage to include Catch.
packages/serverless-workflow-diagram-editor/tests/react-flow/nodes/Nodes.test.tsx	Extends node rendering tests for TryCatch/Catch and adds badge rendering tests.
packages/serverless-workflow-diagram-editor/tests/core/taskSubType.test.ts	Adds unit tests for subtype extraction utilities.
packages/serverless-workflow-diagram-editor/src/react-flow/nodes/taskNodeConfig.ts	Adds Catch leaf node config (color/icon/type label).
packages/serverless-workflow-diagram-editor/src/react-flow/nodes/Nodes.tsx	Adds TryCatch/Catch node types and implements TaskNodeBadge rendering.
packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.tsx	Updates hardcoded demo nodes to include badges and tweaks positions/edge waypoints.
packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.css	Adds badge styling and adjusts leaf node layout to accommodate badge + truncation.
packages/serverless-workflow-diagram-editor/src/core/taskSubType.ts	Implements getCallSubType, getRunSubType, getListenSubType, getTaskSubType.
packages/serverless-workflow-diagram-editor/src/core/index.ts	Exports the new taskSubType module.
packages/serverless-workflow-diagram-editor/src/core/autoLayout.ts	Increases default node width to 200.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

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

[Copilot]

Pull request overview

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

[lornakelly]

@fantonangeli @handreyrc Ready for review after rebase

[handreyrc]

@lornakelly
It LGTM, Just a small remark to consider.

[handreyrc]

Looking at the node components, we have the task base type already solved then it is converted back to a generic task type as prop to the TaskNodeComponent, finally the task type is solved again in the TaskNodeComponent to get a subtype if there is one. Maybe it could be possible to avoid the back and forth of task types.
I understand we are trying to avoid repetition. However, I see that we reached a point that we need to specialize the nodes content. I suggest to handle the specifics of each task type within its respective node component, otherwise we may end up with lengthy TaskNodeComponent with lots of "ifs". Break TaskNodeComponent into smaller reusable components and add then to the nodes as needed would make it easier follow and maintain IMO.
For example, the TaskNodeBadge could be moved to the node component, if we make those changes while nodes content is still simple and small.
WDYT?