feat(visual-workflow-editor): apply spec

[rubenvdlinde]

Summary

Applies openspec/changes/visual-workflow-editor. Frontend-only — adds a drag-and-drop graph editor for workflow templates, mounted as a single custom manifest page; all persistence flows through the existing useWorkflowStore (createObjectStore on workflowTemplate), so no PHP changes.

• npm install @vue-flow/core@^1 @vue-flow/background @vue-flow/controls --save
• New components under src/components/workflow/:
  • VisualWorkflowEditor.vue (main, registered in customComponents.js)
  • NodePalette.vue, WorkflowCanvas.vue, NodeProperties.vue, EdgeProperties.vue
  • validator.js — live frontend validator (NO_FINAL_STATUS, UNREACHABLE_FINAL, ORPHAN_NODE, DANGLING_EDGE, DUPLICATE_TRANSITION, MISSING_LABEL, CYCLE_NO_EXIT)
• Manifest page added (the one acceptable custom page for this spec):

  { "id": "WorkflowTemplateEditor", "route": "/settings/workflow-templates/:id/edit", "type": "custom", "component": "VisualWorkflowEditor" }
  

• JSON import / export round-trips through the workflowTemplate shape (steps, transitions, layout).
• Save calls workflowStore.saveTemplate(...) (existing draft path); Publish calls workflowStore.publishVersion(id) and is gated on hasErrors === false.
• Build artifact: openspec/changes/visual-workflow-editor/builds/build.json.

Out of scope (per spec): guard-expression IDE, routing-rule editor inside nodes (slots in unchanged), backend changes.

Watchdog flags

• STRICT mode: no i18n, no composer check:strict — php -l not exercised because no PHP files changed; jq validates manifest + build artifact.
• Component tests (V01-V03 in tasks.md) deferred — implementation closes the spec; tests are a follow-up.
• dagre auto-layout (T09) not added; coordinates fall back to a deterministic left-to-right placement until the layout block is persisted.

Test plan

• npm run build succeeds with vue-flow bundled.
• Navigate to /settings/workflow-templates/{id}/edit for a draft template — editor mounts.
• Drag a Status node from the palette, drop on canvas — new step appears.
• Connect two nodes with the handle — new transition appears.
• Toggle "Final" on a status — NO_FINAL_STATUS clears.
• Click Publish on a clean draft — store calls publishVersion.
• Export -> re-import — graph round-trips structurally.

[github-actions]

Quality Report — ConductionNL/procest @ a5fffe4

Check	PHP	Vue	Security	License	Tests
lint	✅
phpcs	❌
phpmd	✅
psalm	✅
phpstan	✅
phpmetrics	✅
eslint		❌
stylelint		❌
composer			✅	✅ 100/100
npm			✅	✅ 419/419
PHPUnit					⏭️
Newman					⏭️
Playwright					❌

Spec coverage: 3% (21 tests / 673 specs)

---

Quality workflow — 2026-05-11 11:50 UTC

Download the full PDF report from the workflow artifacts.