DROP-BPMN Mission Report

Date: 2026-03-04 PR: #435 (merged, squash) Branch: feat/drop-bpmn-timeline Status: DEPLOYED & VERIFIED

Objective

Remove bpmn-js entirely, replace "Sơ đồ BPMN" tab with "Tiến trình thực hiện" featuring a 2-column layout: compact table + Tailwind Steps Timeline.

Changes Summary

Files Deleted (3)

File	Lines	Purpose
components/modules/workflow-module/WorkflowViewer.vue	303	BPMN viewer with colorization
components/modules/workflow-module/WorkflowModeler.vue	287	BPMN modeler with DSL governance
server/api/workflows/[id]/diagram.get.ts	50	BPMN XML endpoint

Files Modified (6)

File	Change
composables/useWorkflows.ts	Removed BPMN functions (useWorkflowDetail, saveWorkflow, useWorkflow)
pages/knowledge/workflows/[id].vue	Tab rename + 2-column layout with table + timeline
pages/knowledge/modules/[id].vue	Replaced BPMN viewer/modeler with workflow link card
types/workflows.ts	Removed bpmn_xml field
types/workflow-dsl.ts	Removed source_bpmn_id, WorkflowRuntimePayload
server/utils/directusService.ts	Removed bpmn_xml from WORKFLOW_FIELDS

Files Created (1)

File	Purpose
components/modules/workflow-module/partials/StepsTimeline.vue	Tailwind vertical timeline with done/current/pending states

Dependencies Removed

• bpmn-js — saved ~1.9MB bundle size (30.8MB → 28.9MB)

New Component: StepsTimeline

Interface (ready for task_checkpoints integration)

type StepStatus = 'done' | 'current' | 'pending';
interface TimelineStep {
  id: number;
  title: string;
  actorType?: string | null;
  stepType?: string | null;
  status: StepStatus;
}

Visual States

• done: Green circle + checkmark icon
• current: Blue circle + pulsing number (animated)
• pending: Gray hollow circle + number

Features

• Dark mode support
• Actor type labels in Vietnamese
• Vertical connector lines between steps
• Responsive 2-column grid (stacks on mobile)

Files Preserved (not touched)

• server/utils/workflowDsl.ts — DSL step management (non-BPMN)
• server/utils/workflowGovernance.ts — WCR scanning system
• server/api/workflows/[id]/migrate.post.ts — DSL migration
• composables/useTasks.ts — task_checkpoints references

Production Verification

Check	Result
/knowledge/workflows → 200	✅ PASS
/knowledge/workflows/1 → 200	✅ PASS
/knowledge/workflows/1?tab=diagram → 200	✅ PASS
"Sơ đồ BPMN" NOT in HTML	✅ PASS
"Tiến trình thực hiện" in HTML	✅ PASS

Tech Debt Impact

• TD-064 (bpmn-js bundle bloat): RESOLVED by this mission