feat: Add selected node details to sidebar

[lornakelly]

Closes #101

Summary

Selecting a node opens the side panel and renders that task's details, changing selection updates the content and deselecting returns the panel to the workflow info state

Changes

• Add taskDetails to flatten task into dot-notation and expand nested objects up to MAX_DEPTH
• Add NodeDetailsView to sidepanel
• Add selectedNodeId to store
• Task details uses node.data.task which is deep clone of the task in the model
• Extract sidepanel field types into Fields

Screen.Recording.2026-06-04.at.09.00.16.mov

[netlify]

✅ Deploy Preview for swf-editor ready!

Name	Link
🔨 Latest commit	2953065
🔍 Latest deploy log	https://app.netlify.com/projects/swf-editor/deploys/6a21494101229a00081a6636
😎 Deploy Preview	https://deploy-preview-168--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

Note

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

Adds node selection support to the diagram editor and surfaces selected node task details in the right-hand SidePanel (including flattened task properties and a JSON source view).

Changes:

• Extend DiagramEditorContext to track selectedNodeId, update it from React Flow selection, and clear it when workflow content changes.
• Introduce getTaskDetails() to flatten SWF task fields for display, plus a new NodeDetailsView UI and shared SidePanel field components.
• Update SidePanel header/content to switch between workflow info and selected node details; add i18n strings and styling.

Reviewed changes

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

Show a summary per file

File	Description
packages/serverless-workflow-diagram-editor/tests/test-utils/render-helpers.tsx	Extends mocked context with selectedNodeId + setter for tests.
packages/serverless-workflow-diagram-editor/tests/store/DiagramEditorContextProvider.test.tsx	Adds coverage for clearing selection when content changes.
packages/serverless-workflow-diagram-editor/tests/side-panel/NodeDetailsView.test.tsx	Adds tests for rendering flattened task properties and source JSON.
packages/serverless-workflow-diagram-editor/tests/core/taskDetails.test.ts	Adds unit tests for the new task-flattening logic.
packages/serverless-workflow-diagram-editor/src/store/DiagramEditorContextProvider.tsx	Stores selection in context and resets it when the model changes.
packages/serverless-workflow-diagram-editor/src/store/DiagramEditorContext.tsx	Adds selectedNodeId and setSelectedNodeId to context type.
packages/serverless-workflow-diagram-editor/src/side-panel/WorkflowInfoView.tsx	Refactors shared field components into Fields.tsx.
packages/serverless-workflow-diagram-editor/src/side-panel/SidePanel.tsx	Renders node details when a node is selected; updates header icon/title/subtitle and auto-opens on selection.
packages/serverless-workflow-diagram-editor/src/side-panel/SidePanel.css	Adds styling for property rows, JSON section, and colored node icon wrapper.
packages/serverless-workflow-diagram-editor/src/side-panel/NodeDetailsView.tsx	New view that renders flattened task properties + a Source JSON section.
packages/serverless-workflow-diagram-editor/src/side-panel/Fields.tsx	New shared components for SidePanel field rendering and JSON collapsible block.
packages/serverless-workflow-diagram-editor/src/react-flow/diagram/Diagram.tsx	Wires React Flow selection changes into selectedNodeId.
packages/serverless-workflow-diagram-editor/src/i18n/locales/en.ts	Adds new sidebar translation keys for node/details UI.
packages/serverless-workflow-diagram-editor/src/core/taskDetails.ts	Implements task flattening into displayable detail fields.
packages/serverless-workflow-diagram-editor/src/core/index.ts	Exports the new taskDetails module.

---

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

[Copilot]

Pull request overview

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

[Copilot]

Pull request overview

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