M002-BPMN-V2 Report — PR #433

Date: 2026-03-04 PR: https://github.com/Huyen1974/web-test/pull/433 Status: MERGED + DEPLOYED

Changes Delivered

Part A: BPMN Vertical Layout (TB)

• Removed bpmn-auto-layout library (only supported LR layout)
• Implemented BFS-based top-to-bottom layout in buildShapeRegistry()
• Constants: CENTER_X=400, VERTICAL_SPACING=200, HORIZONTAL_SPACING=250
• STT numbering prefix on all BPMN nodes (from sort_order)
• Increased node sizes: task 160x80, gateway 60x60
• Vertical waypoints routing with offset support

Part B: Reorder Endpoint

• POST /api/workflows/:id/steps/reorder
• Re-numbers sort_order with SPACING=10
• Optional after_step_id creates gap slot for new step insertion
• Returns { updated, slot? }

Part C: 60-Step Test Workflow

• Workflow #2: "Quy trình xử lý đơn hàng xuất khẩu (60 bước)"
• 60 steps across 7 phases with diverse types
• 70 relations (59 sequential + 11 conditional branches)
• BPMN XML generated: 45KB

Part D: Narrative Field + Mô tả Tab

• Created narrative field on workflows collection
• Tab order: [Mô tả] [Trình tự] [Sơ đồ BPMN] [Đề xuất thay đổi]
• Inline edit with save/cancel
• "Hội đồng AI" placeholder (Phase 2B)

Part E: WCR Accordion Expand

• Click-to-expand accordion with chevron animation
• Shows description, position_context, date_created inline

Production Verification

Check	Result
Health /api/health	200 OK
Workflow #1 page	200 OK
Workflow #2 (60 steps)	200 OK
BPMN diagram API	source=dsl, 60 steps, 70 relations
Reorder endpoint	{"updated":0}

Files Changed (7)

• web/server/utils/workflowDsl.ts — TB layout engine
• web/components/modules/workflow-module/WorkflowViewer.vue — removed bpmn-auto-layout
• web/pages/knowledge/workflows/[id].vue — narrative tab + tab order
• web/components/modules/workflow-module/partials/WcrIntakePanel.vue — accordion
• web/server/api/workflows/[id]/steps/reorder.post.ts — NEW endpoint
• web/package.json — removed bpmn-auto-layout
• web/pnpm-lock.yaml — lockfile update