Workflow builder UI integration Xyne Dashboard

frontend/package.json

@@ -29,11 +29,12 @@
     "@tanstack/react-router": "^1.102.0",
     "@tanstack/react-virtual": "^3.13.12",
     "@uiw/react-markdown-preview": "^5.1.3",
+    "@xyflow/react": "^12.8.4",
     "caniuse-lite": "^1.0.30001696",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "docx-preview": "^0.3.5",
     "date-fns": "^4.1.0",
+    "docx-preview": "^0.3.5",
     "dompurify": "^3.2.6",
     "hono": "^4.6.15",
     "jszip": "^3.10.1",
@@ -44,6 +45,7 @@
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-icons": "^5.5.0",
+    "react-is": "^19.1.1",
     "react-json-view": "^1.21.3",
     "react-zoom-pan-pinch": "^3.7.0",
     "recharts": "^3.1.0",
@@ -78,4 +80,4 @@
     "vite-plugin-svgr": "^4.3.0",
     "vitest": "^3.1.4"
   }
-}
+}

frontend/src/components/Sidebar.tsx

@@ -12,6 +12,7 @@ import {
   Key,
   BarChart3,
   BookOpen,
+  Workflow,
 } from "lucide-react"
 import { useState, useEffect } from "react"
 import HistoryModal from "@/components/HistoryModal"
@@ -170,6 +171,26 @@ export const Sidebar = ({
             </Tooltip>
           </div>
 
+           <Link
+            to="/workflow"
+            className={cn(
+              "flex w-8 h-8 items-center justify-center hover:bg-[#D8DFE680] dark:hover:bg-gray-700 rounded-md mt-[10px]",
+              location.pathname.includes("/workflow") &&
+                "bg-[#D8DFE680] dark:bg-gray-700",
+            )}
+          >
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Workflow
+                  stroke="#384049"
+                  size={18}
+                  className="dark:stroke-[#F1F3F4]"
+                />
+              </TooltipTrigger>
+              <Tip side="right" info="Workflow Builder" />
+            </Tooltip>
+          </Link>
+
           {/* TODO: Add appropriate Link destination and Tooltip info for the Bot icon */}
           {isAgentMode && (
             <Link