M002-BPMN-POLISH Report

Mission Summary

Fix 3 UI bugs in Workflows BPMN viewer:

• Bug A: BPMN layout horizontal/squished to vertical auto-layout
• Bug B: Tab active state not visually distinct
• Bug C: Rename Bang buoc to Trinh tu

Bug A: BPMN Auto-Layout

Option chosen: Option 1 - bpmn-auto-layout (dagre) Reason: Official bpmn-io library, handles top-to-bottom layout automatically Package: bpmn-auto-layout@^1.2.0 Before: Nodes placed horizontally at x = 220 + index * 180, y = 200 After: layoutProcess(xml) applied client-side - dagre vertical flow

Implementation: WorkflowViewer.vue dynamic import of bpmn-auto-layout, XML transformed before rendering, graceful fallback to original XML if auto-layout fails.

Bug B: Tab Active State

Root cause: VHorizontalNavigation uses NuxtLink exact-active-class which fails for query-param tabs Before: No visual indicator on active tab After: Inline tabs using activeTab computed for :class binding. Active tab gets text-primary-700 bg-primary-100.

Bug C: Rename

Before: Bang buoc in tab label and table title After: Trinh tu in both locations

PR and Deploy

• PR: #432
• Branch: fix/m002-bpmn-polish
• CI: ALL PASS (build, E2E, Quality Gate, Pass Gate)
• Deploy: rsync .output + docker compose restart nuxt

Production Verification

• 5/5 routes return 200
• Tab Trinh tu present, Bang buoc absent
• Active tab class text-primary-700 bg-primary-100 verified
• BPMN API: source=dsl, stepCount=10, bpmnXml=7981 chars
• Health check: DNS PASS, Web PASS, API PASS

Files Changed

1. web/components/modules/workflow-module/WorkflowViewer.vue - bpmn-auto-layout import + layoutProcess
2. web/pages/knowledge/workflows/[id].vue - tab active state fix + rename
3. web/package.json - added bpmn-auto-layout dependency
4. web/pnpm-lock.yaml - lockfile update