Style start/end node components

[kumaradityaraj]

Closes

Style Start and End Nodes and Verify Edge Connectivity

Summary

This PR applies the finalized styling for the custom Start and End workflow nodes and validates their connectivity within the editor. The implementation aligns with the agreed design, providing clear visual indicators for workflow entry and exit points.

Changes

• Applied custom styling to Start and End nodes.
• Updated node appearance to match Mermaid-style start and end points.
• Verified edge rendering for:
  • Start → Standard nodes
  • Standard nodes → End
  • Start → End
  • Complex workflows containing multiple intermediate nodes
• Confirmed correct connection behavior between custom nodes and standard task nodes.
• Added/updated tests to validate edge rendering and node connectivity.

Screenshots

[netlify]

✅ Deploy Preview for swf-editor ready!

Name	Link
🔨 Latest commit	28110e7
🔍 Latest deploy log	https://app.netlify.com/projects/swf-editor/deploys/6a4643f73ecc620008da9429
😎 Deploy Preview	https://deploy-preview-202--swf-editor.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[Copilot]

Pull request overview

This PR replaces the placeholder Start/End React Flow nodes with a dedicated StartEndNode component and introduces corresponding CSS to render Mermaid-style start (single circle) and end (double circle) markers in the workflow diagram editor.

Changes:

• Added a shared StartEndNode renderer and wired it into StartNode/EndNode.
• Added new CSS classes for start/end node shapes, plus selected/hover styling.

Reviewed changes

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

File	Description
packages/serverless-workflow-diagram-editor/src/react-flow/nodes/Nodes.tsx	Adds StartEndNode and updates Start/End node components to render it.
packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.css	Adds styling for the new start/end node shapes and their interaction states.

---

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

[lornakelly]

@kumaradityaraj I know not ready for review but I know I mentioned the grey like the edge but looks a bit off next to diagram, can you try the same colours as what we style the entry/exit nodes for light and dark themes please

[Copilot]

Pull request overview

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

Files not reviewed (1)

• pnpm-lock.yaml: Generated file

[kumaradityaraj]

@lornakelly @fantonangeli @handreyrc Please review this PR. Special attention to colour of the node must be verified as mentioned by Lorna in the above comment.

[lornakelly]

@kumaradityaraj It doesnt look like the colours are updated to match entry/exit nodes?
#202 (comment)

Once that is done I will review rest of PR, thanks

[Copilot]

Pull request overview

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

[Copilot]

Pull request overview

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

[kumaradityaraj]

[Copilot]

Pull request overview

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

Comments suppressed due to low confidence (2)

packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.css:410

• In this stylesheet’s @layer custom-nodes, selectors are consistently scoped under .dec-root (e.g. .dec-root .custom-node-container). These new Start/End node styles are unscoped, which can leak styling outside the editor root and behave inconsistently with the rest of the file.

    box-shadow:
      0 0 0 2px var(--dec-error-accent),
      0 0 0 4px rgb(59 130 246),
      0 0 12px 4px rgba(59, 130, 246, 0.45);
  }

packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.css:417

• These selectors should also be scoped under .dec-root for consistency and to avoid leaking global styles.

  .dec-root.dark .dec-container-node.has-error.selected {
    box-shadow:
      0 0 0 2px var(--dec-error-accent),
      0 0 0 4px rgb(96 165 250),
      0 0 16px 4px rgba(96, 165, 250, 0.5);

[Copilot]

Pull request overview

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

[Copilot]

Pull request overview

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

[Copilot]

Pull request overview

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

[lornakelly]

LGTM

[kumaradityaraj]

@handreyrc @fantonangeli @cheryl7114 please review this.

[fantonangeli]

LGTM, 1 small comment only

[kumaradityaraj]

@ricardozanini please review and merge this pr.