Description
Add a collapsible right-hand sidebar to the diagram editor using the shadcn Sidebar component. This is the first phase of the sidebar feature; node selection behaviour is out of scope for this ticket.
By default the sidebar is collapsed to a rail and stays collapsed until the user explicitly opens it. When expanded, it shows read-only top-level workflow document properties when no node is selected, along with a hint prompting the user to select a node to view its details.
All field values are read-only for this ticket. No editing.
Motivation
- The canvas currently has no persistent information panel. Users have no way to inspect workflow-level properties without reading the raw YAML.
- A right-hand sidebar is the conventional location for a properties panel in diagram editors, and keeps the canvas unobstructed by default since it starts collapsed as a rail.
Proposed Implementation
- Introduce a new component using the shadcn Sidebar with side="right" and collapsible="icon" so it starts as a rail and expands on user interaction.
- The sidebar header contains a workflow icon, a "Workflow" title, and the collapse toggle.
- The sidebar content area shows a hint ("Select a node to view its details") followedread-only workflow details like Document (name, version, dsl, metadata etc
- Workflow info should read from the workflow model held in state.
- The sidebar must respect the
dec: Tailwind prefix throughout, including any shadcn component class overrides. Dark mode is handled via the dec-root.dark class convention rather than Tailwind's dark: variant.
- Both light and dark modes must be accounted for.
Definition of Done
Description
Add a collapsible right-hand sidebar to the diagram editor using the shadcn Sidebar component. This is the first phase of the sidebar feature; node selection behaviour is out of scope for this ticket.
By default the sidebar is collapsed to a rail and stays collapsed until the user explicitly opens it. When expanded, it shows read-only top-level workflow document properties when no node is selected, along with a hint prompting the user to select a node to view its details.
All field values are read-only for this ticket. No editing.
Motivation
Proposed Implementation
dec:Tailwind prefix throughout, including any shadcn component class overrides. Dark mode is handled via thedec-root.darkclass convention rather than Tailwind's dark: variant.Definition of Done