feat(web): add workflow graph editor and try-mode JSON tree

Add a Graph tab (React Flow) as the default workflow editor view, drop the Mermaid YAML preview, auto-assign step-N ids on add, and show test results as a JSON tree.

Co-authored-by: Nasyarobby Putra <nasyarobby@gmail.com>

packages/web/package.json

@@ -7,19 +7,20 @@
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview",
-    "lint": "eslint src"
+    "lint": "eslint src",
+    "test": "node --test src/lib/workflow-graph.test.js"
   },
   "dependencies": {
-    "@jerapah-flow/shared": "workspace:*",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
+    "@jerapah-flow/shared": "workspace:*",
     "@monaco-editor/react": "^4.7.0",
     "@tanstack/react-query": "^5.84.0",
     "@uiw/react-json-view": "2.0.0-alpha.43",
+    "@xyflow/react": "^12.11.3",
     "axios": "^1.11.0",
     "cronstrue": "^3.24.0",
-    "mermaid": "^11.9.0",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
     "react-icons": "^5.5.0",