Merge remote-tracking branch 'upstream/nightly' into nightly

backend/Dockerfile

@@ -27,7 +27,7 @@ FROM alpine:latest as certs
 RUN apk add --update ca-certificates
 
 # Sets up the final image
-FROM alpine:3.21.2
+FROM alpine:3.22.1
 
 # FIXME: Install cgo because CGO_ENABLED=1 during build
 RUN apk add --no-cache libc6-compat

backend/go-app/go.mod

@@ -24,7 +24,7 @@ require (
 	github.com/gorilla/mux v1.8.1
 	github.com/h2non/filetype v1.1.3
 	github.com/satori/go.uuid v1.2.0
-	github.com/shuffle/shuffle-shared v0.8.96
+	github.com/shuffle/shuffle-shared v0.9.0
 	github.com/shuffle/singul v0.0.15
 	golang.org/x/crypto v0.38.0
 	google.golang.org/api v0.236.0

backend/go-app/go.sum

@@ -359,8 +359,8 @@ github.com/sendgrid/sendgrid-go v3.16.1+incompatible h1:zWhTmB0Y8XCDzeWIm2/BIt1G
 github.com/sendgrid/sendgrid-go v3.16.1+incompatible/go.mod h1:QRQt+LX/NmgVEvmdRw0VT/QgUn499+iza2FnDca9fg8=
 github.com/sergi/go-diff v1.3.2-0.20230802210424-5b0b94c5c0d3 h1:n661drycOFuPLCN3Uc8sB6B/s6Z4t2xvBgU1htSHuq8=
 github.com/sergi/go-diff v1.3.2-0.20230802210424-5b0b94c5c0d3/go.mod h1:A0bzQcvG0E7Rwjx0REVgAGH58e96+X0MeOfepqsbeW4=
-github.com/shuffle/shuffle-shared v0.8.91 h1:ZcxSKhns96w1GQG/EjEJSLBvuEA3KVjvORAetV3W4bM=
+github.com/shuffle/shuffle-shared v0.9.0 h1:hUNtW3qHkji2cUVyR1cIXAz6qxpAHHP5hBmSAe3pIhs=
-github.com/shuffle/shuffle-shared v0.8.91/go.mod h1:PFLG4eaxz8zQc9Lbc0Ok/nG8rNsaBkZ0TNar+VU+J/g=
+github.com/shuffle/shuffle-shared v0.9.0/go.mod h1:PFLG4eaxz8zQc9Lbc0Ok/nG8rNsaBkZ0TNar+VU+J/g=
 github.com/shuffle/singul v0.0.15 h1:a5Qro1BKs9a+mWE289oYTkDeVFoKEd/H9qu9XJGsVxo=
 github.com/shuffle/singul v0.0.15/go.mod h1:z1RRZsymTYxsB8WMQwwswypruy4j5EugGPFEZspTEA4=
 github.com/sirupsen/logrus v1.7.0/go.mod h1:yWOB1SBYBC5VeMP7gHvWumXLIWorT60ONWic61uBYv0=

backend/go-app/main.go

@@ -4100,8 +4100,9 @@ func runInitEs(ctx context.Context) {
 		time.Sleep(30 * time.Second)
 	}
 
-	// FIXME: This should ONLY run on one backend instance
+	shuffle.InitOpensearchIndexes()
 
+	// FIXME: This should ONLY run on one backend instance. This may cause interference.
 	schedules, err := shuffle.GetAllSchedules(ctx, "ALL")
 	if err != nil {
 		log.Printf("[WARNING] Failed getting schedules during service init: %s", err)

frontend/src/components/EditWorkflow.jsx

@@ -63,6 +63,7 @@ import {
 	Add as AddIcon,
 	Remove as RemoveIcon,
 	EditNote as EditNoteIcon,
+	AutoAwesome as AutoAwesomeIcon
 } from "@mui/icons-material";
 
 const EditWorkflow = (props) => {
@@ -72,6 +73,7 @@ const EditWorkflow = (props) => {
 	const {themeMode, brandColor} = useContext(Context)
 	const theme = getTheme(themeMode, brandColor)
 	const [submitLoading, setSubmitLoading] = React.useState(false);
+	const [aiGenerateLoading, setAiGenerateLoading] = React.useState(false);
 	const [showMoreClicked, setShowMoreClicked] = React.useState(isEditing !== false ? true : false);
 
 	const [innerWorkflow, setInnerWorkflow] = React.useState(workflow)
@@ -220,7 +222,7 @@ const EditWorkflow = (props) => {
 				<div style={{ display: "flex" }}>
 					<div style={{ flex: 1, color: theme.palette.textColor }}>
 						<div style={{ display: "flex" }}>
-							<Typography variant="h4" style={{ flex: 9, marginTop: 25, }}>
+							<Typography variant="h4" style={{ flex: 9, marginTop: newWorkflow ? 50 : 25, }}>
 								{newWorkflow ? "New" : "Editing"} Workflow
 							</Typography>
 
@@ -298,93 +300,316 @@ const EditWorkflow = (props) => {
 					paddingLeft: 30, 
 					backgroundColor: themeMode === "dark" ? "#262626" :  theme.palette.DialogStyle.backgroundColor,
 				}}>
-					<Button
+					{newWorkflow === true ? (
-						variant="contained"
+						<div style={{ display: "flex", gap: 10 }}>
-						style={{}}
+							
-						id="save_workflow_button"
+							
-						disabled={name.length === 0 || submitLoading === true}
+							<Button
-						onClick={() => {
+								variant="contained"
-							setSubmitLoading(true)
+								style={{}}
+								id="save_workflow_button"
+								disabled={name.length === 0 || submitLoading === true || aiGenerateLoading === true}
+								onClick={() => {
+									setSubmitLoading(true)
 
-							// Loop inputfields
+									// Loop inputfields
-							var validfields = []
+									var validfields = []
-							for (var i = 0; i < inputQuestions.length; i++) {
+									for (var i = 0; i < inputQuestions.length; i++) {
-								if (inputQuestions[i].deleted === true) {
+										if (inputQuestions[i].deleted === true) {
-									continue
+											continue
+										}
+
+										if (inputQuestions[i].value.length === 0) {
+											continue
+										}
+
+										validfields.push(inputQuestions[i])
+									}
+
+									innerWorkflow.input_questions = validfields
+
+									if (innerWorkflow.form_control === undefined || innerWorkflow.form_control === null) {
+										innerWorkflow.form_control = {}
+									}
+
+									innerWorkflow.form_control.input_markdown = inputMarkdown
+									innerWorkflow.form_control.output_yields = selectedYieldActions
+									innerWorkflow.form_control.form_width = formWidth
+									innerWorkflow.form_control.cleanup_actions = selectedCleanupActions
+
+									innerWorkflow.name = name
+									innerWorkflow.description = description
+
+									if (newWorkflowTags.length > 0) {
+										innerWorkflow.tags = newWorkflowTags
+									} else {
+										innerWorkflow.tags = []
+									}
+
+									if (selectedUsecases.length > 0) {
+										innerWorkflow.usecase_ids = selectedUsecases
+									} else {
+										innerWorkflow.usecase_ids = []
+									}
+
+									if (dueDate > 0) {
+										innerWorkflow.due_date = new Date(`${dueDate["$y"]}-${dueDate["$M"] + 1}-${dueDate["$D"]}`).getTime() / 1000
+									}
+
+									if (saveWorkflow !== undefined) {
+										saveWorkflow(innerWorkflow)
+
+										if (setWorkflow !== undefined) {
+											setWorkflow(innerWorkflow)
+										}
+									} else if (setNewWorkflow !== undefined) {
+										setNewWorkflow(
+											innerWorkflow.name,
+											innerWorkflow.description,
+											innerWorkflow.tags,
+											innerWorkflow.default_return_value,
+											innerWorkflow,
+											newWorkflow,
+											innerWorkflow.usecase_ids,
+											innerWorkflow.blogpost,
+											innerWorkflow.status,
+											workflowAsCode
+										)
+										setWorkflow({})
+									} else {
+										setWorkflow(innerWorkflow)
+									}
+
+									setSubmitLoading(true)
+
+									// If new workflow, don't close it
+									if (isEditing) {
+										setModalOpen(false)
+									}
+								}}
+								color="primary"
+							>
+								{submitLoading ? <CircularProgress color="secondary" /> : "Create from scratch"}
+							</Button>
+
+							<Tooltip placement="top" arrow
+								title={
+									<Typography variant="body1" style={{padding: 10, }}>
+										Generate using the name, description, usecases and tags provided. Required: Name + Description
+									</Typography>
+								}
+							>
+								<span>
+								<Button
+									disabled={name.length === 0 || innerWorkflow?.default_return_value?.length === 0 || aiGenerateLoading === true || submitLoading === true}
+									variant="aiButton"
+									onClick={async () => {
+										// Check if description is provided in the visible field for new workflows
+										if (!innerWorkflow.default_return_value || innerWorkflow.default_return_value.trim().length === 0) {
+											toast.error("You need to describe what you want to generate so the AI can auto generate the entire workflow");
+											return;
+										}
+
+										setAiGenerateLoading(true);
+										toast.info("Creating workflow...");
+
+										try {
+											// Step 1: Create basic workflow WITHOUT using setNewWorkflow (to avoid modal closing)
+											const workflowData = {
+												name: name.length > 0 ? name : "AI Generated Workflow",
+												description: innerWorkflow.default_return_value,
+												tags: newWorkflowTags,
+												default_return_value: innerWorkflow.default_return_value,
+												usecase_ids: selectedUsecases,
+												blogpost: innerWorkflow.blogpost || "",
+												status: innerWorkflow.status || ""
+											};
+
+											const workflowResponse = await fetch(`${globalUrl}/api/v1/workflows`, {
+												method: "POST",
+												headers: {
+													"Content-Type": "application/json",
+													Accept: "application/json",
+												},
+												body: JSON.stringify(workflowData),
+												credentials: "include",
+											});
+
+											if (workflowResponse.status !== 200) {
+												toast.error("Failed to create workflow");
+												setAiGenerateLoading(false);
+												return;
+											}
+
+											const workflowJson = await workflowResponse.json();
+
+											if (workflowJson.success === false) {
+												toast.error("Failed to create workflow: " + (workflowJson.reason || "Unknown error"));
+												setAiGenerateLoading(false);
+												return;
+											}
+
+											if (!workflowJson || !workflowJson.id) {
+												toast.error("Failed to create workflow - no ID returned");
+												setAiGenerateLoading(false);
+												return;
+											}
+
+											const workflowId = workflowJson.id;
+											console.log("Created workflow with ID:", workflowId);
+
+											// Step 2: Generate AI content for the workflow
+											const data = { 
+												query: innerWorkflow.default_return_value,
+												workflow_id: workflowId,
+											};
+
+											const aiResponse = await fetch(globalUrl + "/api/v2/workflows/generate/llm", {
+												method: "POST",
+												headers: {
+													"Content-Type": "application/json",
+													Accept: "application/json",
+												},
+												body: JSON.stringify(data),
+												credentials: "include",
+											});
+
+											const json = await aiResponse.json();
+
+											// Handle AI response and provide feedback
+											if (aiResponse.status !== 200) {
+												console.log("AI generation failed, but workflow created:", json.message || "Unexpected response");
+												toast.warning("Workflow created successfully, but AI generation failed. Opening workflow editor...");
+											} else if (json.success === true && typeof json.message === "string") {
+												// AI "rejection" message
+												console.log("AI rejected request:", json.message);
+												toast.warning(`AI: ${json.message}. Opening empty workflow editor...`);
+											} else if (json.success === false) {
+												console.log("AI generation failed:", json.message || "Operation failed");
+												toast.warning("AI generation failed. Opening empty workflow editor...");
+											} else if (!json || Object.keys(json).length === 0) {
+												console.log("Empty AI response");
+												toast.warning("AI returned empty response. Opening workflow editor...");
+											} else {
+												toast.success("Workflow generated successfully! Opening editor...");
+												console.log("AI generation successful");
+											}
+
+											// Step 3: Now close modal and redirect (only after everything is complete)
+											setTimeout(() => {
+												setModalOpen(false);
+												setAiGenerateLoading(false);
+												window.location.href = `/workflows/${workflowId}`;
+											}, 1500); // Give user time to read the final message
+
+										} catch (error) {
+											console.error("Error in AI workflow generation:", error);
+											toast.error("Failed to generate. Please try again later: " + error.message);
+											setAiGenerateLoading(false);
+											// Don't close modal on error so user can try again
+										}
+									}}
+								>
+									{aiGenerateLoading ? (
+										<CircularProgress color="secondary" size={20} style={{ marginRight: 8 }} />
+									) : (
+										<AutoAwesomeIcon style={{ marginRight: 8 }} />
+									)}
+
+									AI Generate
+								</Button>
+								</span>
+							</Tooltip>
+						</div>
+					) : (
+						<Button
+							variant="contained"
+							style={{}}
+							id="save_workflow_button"
+							disabled={name.length === 0 || submitLoading === true}
+							onClick={() => {
+								setSubmitLoading(true)
+
+								// Loop inputfields
+								var validfields = []
+								for (var i = 0; i < inputQuestions.length; i++) {
+									if (inputQuestions[i].deleted === true) {
+										continue
+									}
+
+									if (inputQuestions[i].value.length === 0) {
+										continue
+									}
+
+									validfields.push(inputQuestions[i])
 								}
 
-								if (inputQuestions[i].value.length === 0) {
+								innerWorkflow.input_questions = validfields
-									continue
+
+								if (innerWorkflow.form_control === undefined || innerWorkflow.form_control === null) {
+									innerWorkflow.form_control = {}
 								}
 
-								validfields.push(inputQuestions[i])
+								innerWorkflow.form_control.input_markdown = inputMarkdown
-							}
+								innerWorkflow.form_control.output_yields = selectedYieldActions
+								innerWorkflow.form_control.form_width = formWidth
+								innerWorkflow.form_control.cleanup_actions = selectedCleanupActions
 
-							innerWorkflow.input_questions = validfields
+								innerWorkflow.name = name
+								innerWorkflow.description = description
 
-							if (innerWorkflow.form_control === undefined || innerWorkflow.form_control === null) {
+								if (newWorkflowTags.length > 0) {
-								innerWorkflow.form_control = {}
+									innerWorkflow.tags = newWorkflowTags
-							}
+								} else {
+									innerWorkflow.tags = []
+								}
 
-							innerWorkflow.form_control.input_markdown = inputMarkdown
+								if (selectedUsecases.length > 0) {
-							innerWorkflow.form_control.output_yields = selectedYieldActions
+									innerWorkflow.usecase_ids = selectedUsecases
-							innerWorkflow.form_control.form_width = formWidth
+								} else {
-							innerWorkflow.form_control.cleanup_actions = selectedCleanupActions
+									innerWorkflow.usecase_ids = []
+								}
 
-							innerWorkflow.name = name
+								if (dueDate > 0) {
-							innerWorkflow.description = description
+									innerWorkflow.due_date = new Date(`${dueDate["$y"]}-${dueDate["$M"] + 1}-${dueDate["$D"]}`).getTime() / 1000
+								}
 
-							if (newWorkflowTags.length > 0) {
+								if (saveWorkflow !== undefined) {
-								innerWorkflow.tags = newWorkflowTags
+									saveWorkflow(innerWorkflow)
-							} else {
-								innerWorkflow.tags = []
-							}
 
-							if (selectedUsecases.length > 0) {
+									if (setWorkflow !== undefined) {
-								innerWorkflow.usecase_ids = selectedUsecases
+										setWorkflow(innerWorkflow)
-							} else {
+									}
-								innerWorkflow.usecase_ids = []
+								} else if (setNewWorkflow !== undefined) {
-							}
+									setNewWorkflow(
-
+										innerWorkflow.name,
-							if (dueDate > 0) {
+										innerWorkflow.description,
-								innerWorkflow.due_date = new Date(`${dueDate["$y"]}-${dueDate["$M"] + 1}-${dueDate["$D"]}`).getTime() / 1000
+										innerWorkflow.tags,
-							}
+										innerWorkflow.default_return_value,
-
+										innerWorkflow,
-							if (saveWorkflow !== undefined) {
+										newWorkflow,
-								saveWorkflow(innerWorkflow)
+										innerWorkflow.usecase_ids,
-
+										innerWorkflow.blogpost,
-								if (setWorkflow !== undefined) {
+										innerWorkflow.status,
+										workflowAsCode
+									)
+									setWorkflow({})
+								} else {
 									setWorkflow(innerWorkflow)
 								}
-							} else if (setNewWorkflow !== undefined) {
-								setNewWorkflow(
-									innerWorkflow.name,
-									innerWorkflow.description,
-									innerWorkflow.tags,
-									innerWorkflow.default_return_value,
-									innerWorkflow,
-									newWorkflow,
-									innerWorkflow.usecase_ids,
-									innerWorkflow.blogpost,
-									innerWorkflow.status,
-									workflowAsCode
-								)
-								setWorkflow({})
-							} else {
-								setWorkflow(innerWorkflow)
-							}
 
-							setSubmitLoading(true)
+								setSubmitLoading(true)
 
-							// If new workflow, don't close it
+								// If new workflow, don't close it
-							if (isEditing) {
+								if (isEditing) {
-								setModalOpen(false)
+									setModalOpen(false)
-							}
+								}
-						}}
+							}}
-						color="primary"
+							color="primary"
-					>
+						>
-						{submitLoading ? <CircularProgress color="secondary" /> : "Save Changes"}
+							{submitLoading ? <CircularProgress color="secondary" /> : "Save Changes"}
-					</Button>
+						</Button>
+					)}
 				</div>
 
 				<DialogContent style={{ paddingTop: 10, display: "flex", minHeight: 300, zIndex: 1001, paddingBottom: 400, paddingLeft: 50, }}>
@@ -409,6 +634,29 @@ const EditWorkflow = (props) => {
 							id="Enter-Workflow-Name"
 						/>
 
+						{newWorkflow === true ?
+							<TextField
+								onBlur={(event) => {
+									innerWorkflow.default_return_value = event.target.value
+									setInnerWorkflow(innerWorkflow)
+									setUpdate(Math.random())
+								}}
+								InputProps={{
+									style: {
+										color: "white",
+									},
+								}}
+								color="primary"
+								defaultValue={innerWorkflow.default_return_value}
+								placeholder="Please describe your workflow below so the AI can generate it."
+								rows="3"
+								multiline
+								label="Description"
+								margin="dense"
+								fullWidth
+							/>
+						: null}
+
 						<div style={{ display: "flex", marginTop: 10, }}>
 							{usecases !== null && usecases !== undefined && usecases.length > 0 ?
 								<FormControl style={{ flex: 1, marginRight: 5, }}>
@@ -1285,7 +1533,7 @@ const EditWorkflow = (props) => {
 				</DialogContent>
 
 
-				{newWorkflow === true ?
+				{/*newWorkflow === true ?
 					<span style={{ paddingTop: 30 }}>
 						<Typography variant="h6" style={{ marginLeft: 30, paddingBottom: 0, }}>
 							Relevant Workflows
@@ -1311,9 +1559,8 @@ const EditWorkflow = (props) => {
 						}
 
 					</span>
-					: null}
+			: null*/}
-
+			{/*newWorkflow === true && name.length > 2 ?
-				{/*newWorkflow === true && name.length > 2 ?
 			<div style={{marginLeft: 30, }}>
 				<WorkflowGrid 
 					maxRows={1}

frontend/src/components/EnvironmentTab.jsx

@@ -383,38 +383,36 @@ const EnvironmentTab = memo((props) => {
           //toast("No Orborus necessary for environment cloud. Create and use a different environment to run executions on-premises.",)
           return
         }
-    
+
         if (
           props.userdata.active_org === undefined ||
           props.userdata.active_org === null
         ) {
           return;
         }
-    
+
         const elementName = "copy_element_shuffle";
         var auth =
           environment.auth === ""
             ? "cb5st3d3Z!3X3zaJ*Pc"
             : environment.auth
-
+      // Escape exclamation marks for copying
-		// Escape exclamation marks for copying
+      auth = auth.replace("\\!", "!").replace(/!/g, "\\!")
-		auth = auth.replace("\\!", "!").replace(/!/g, "\\!")
-
         const newUrl =
           globalUrl === "https://shuffler.io"
             ? "https://shuffle-backend-stbuwivzoq-nw.a.run.app"
             : globalUrl;
-    
+
         var skipPipeline = false
         if (commandController.pipelines === true) {
             skipPipeline = true
         }
-    
+
         var addProxy = false
         if (commandController.proxies === true) {
             addProxy = true
         }
-    
+
         if (installationTab === 1) {
             return (`docker run -d \\
         --restart=always \\
@@ -428,14 +426,32 @@ const EnvironmentTab = memo((props) => {
         -e SHUFFLE_SWARM_CONFIG=run \\
         -e SHUFFLE_LOGS_DISABLED=true \\
         -e BASE_URL="${newUrl}" \\${addProxy ? `
-		-e HTTPS_PROXY=IP:PORT \\` : ""}${skipPipeline ? `
+      -e HTTPS_PROXY=IP:PORT \\` : ""}${skipPipeline ? `
-		-e SHUFFLE_SKIP_PIPELINES=true \\` : ""}
+      -e SHUFFLE_SKIP_PIPELINES=true \\` : ""}
         ghcr.io/shuffle/shuffle-orborus:latest
             `)
         } else if (installationTab === 2) {
-            return `https://shuffler.io/docs/configuration#kubernetes`
+             return `helm install shuffle-orborus oci://ghcr.io/shuffle/charts/shuffle \\
+              --namespace shuffle --create-namespace \\
+              --set opensearch.enabled=false \\
+              --set backend.replicaCount=0 \\
+              --set frontend.replicaCount=0 \\
+              --set 'orborus.extraEnvVars[0].name=AUTH' \\
+              --set 'orborus.extraEnvVars[0].value=${auth}' \\
+              --set 'orborus.extraEnvVars[1].name=BASE_URL' \\
+              --set 'orborus.extraEnvVars[1].value=${newUrl}' \\
+              --set 'orborus.extraEnvVars[2].name=ENVIRONMENT_NAME' \\
+              --set 'orborus.extraEnvVars[2].value=${environment.Name}' \\
+              --set 'orborus.extraEnvVars[3].name=ORG' \\
+              --set 'orborus.extraEnvVars[3].value=${environment.org_id}' \\
+              --set shuffle.org="${environment.org_id}"${addProxy ? ` \\
+              --set 'orborus.extraEnvVars[4].name=HTTPS_PROXY' \\
+              --set 'orborus.extraEnvVars[4].value=IP:PORT'` : ""}${skipPipeline ? ` \\
+              --set 'orborus.extraEnvVars[${addProxy ? 5 : 4}].name=SHUFFLE_SKIP_PIPELINES' \\
+              --set 'orborus.extraEnvVars[${addProxy ? 5 : 4}].value=true'` : ""} \\
+              --set persistence.storageClass=standard`
         }
-    
+
         const commandData = `docker rm shuffle-orborus --force; \\\ndocker run -d \\
         --restart=always \\
         --name="shuffle-orborus" \\
@@ -445,12 +461,13 @@ const EnvironmentTab = memo((props) => {
         -e ENVIRONMENT_NAME="${environment.Name}" \\
         -e ORG="${props.userdata.active_org.id}" \\
         -e BASE_URL="${newUrl}" \\${addProxy ? `
-		-e HTTPS_PROXY=IP:PORT \\` : ""}${skipPipeline ? `
+      -e HTTPS_PROXY=IP:PORT \\` : ""}${skipPipeline ? `
-		-e SHUFFLE_SKIP_PIPELINES=true \\` : ""}
+      -e SHUFFLE_SKIP_PIPELINES=true \\` : ""}
         ghcr.io/shuffle/shuffle-orborus:latest`
-    
+
         return commandData
-      };
+    };
+
 
     const submitEnvironment = (data) => {
         // FIXME - add some check here ROFL
@@ -1475,7 +1492,7 @@ const EnvironmentTab = memo((props) => {
                           <Typography variant="body1" color="textSecondary" style={{marginTop: 15, }}>
                             {installationTab === 2 ?
                             <Typography variant='body2' color="textSecondary">
-                                Check our <a href="https://docs.docker.com/get-started/get-docker/" target="_blank" rel="noopener noreferrer" style={{textDecoration: "none", color: "#f85a3e",}}>Kubernetes documentation</a> for more information on how to run Shuffle on Kubernetes. The status of the node will change when connected.
+                                Simply connect to your Kubernetes cluster and run the following command:
                             </Typography>
                             :
                             <Typography variant='body2' color="textSecondary">
@@ -1489,7 +1506,6 @@ const EnvironmentTab = memo((props) => {
                             "2. Run this command on the server you want to run workflows or store Pipeline data on"}
                           </Typography>
         
-                          {installationTab === 2 ? null : 
                           <div
                             style={{
                               marginTop: 10, 
@@ -1571,8 +1587,7 @@ const EnvironmentTab = memo((props) => {
                               }}
                             />
                             </div>
-                            </div>
+                          </div>
-                        }
         
                           <Typography variant="body1" color="textSecondary" style={{marginTop: 15, }}>
                             {installationTab === 2 ? null : 

frontend/src/components/HealthBarChart.jsx

@@ -1,22 +1,93 @@
-import React from 'react';
+import React, { useState } from 'react';
-import { Bar } from 'react-chartjs-2';
 
 const HealthBarChart = (props) => {
-    const { globalUrl, filteredData, options, onBarClick  } = props;
+  const { filteredData, onBarClick } = props;
-
+  const [hoveredBar, setHoveredBar] = useState(null); 
-    return (
+  
-        <Bar
+  if (!filteredData || !Array.isArray(filteredData)) {
-            data={filteredData}
+    console.error('Invalid chart data format');
-            options={options}
+    return null; 
-            height="35.5rem"
+  }
-            width={filteredData.width}
+  
-            getElementAtEvent={(elements) => {
+  const formatData = () => {
-                if (elements && elements.length > 0) {
+    return filteredData.map((item) => ({
-                    onBarClick(elements);
+      label: item.date, 
-                }
+      value: item.avgRunFinished, 
+      color: item.color, 
+      executionIds: item.executionIds, 
+    }));
+  };
+  
+  const handleBarClick = (data) => {
+    if (onBarClick) {
+      onBarClick(data); 
+    }
+  };
+  
+  const chartData = formatData();
+  
+  const barWidth = `calc((100% - ${(chartData.length - 1) * 5}px) / ${chartData.length})`;
+  const barGap = '5px';
+  
+  return (
+    <div style={{ 
+      height: '5rem', 
+      width: '100%', 
+      position: 'relative',
+      display: 'flex',
+      alignItems: 'center', // Center the content vertically
+      justifyContent: 'center', // Center the content horizontally
+      padding: '0.5rem 0' // Add some padding for spacing
+    }}>
+      {/* Chart Container */}
+      <div style={{ 
+        display: 'flex',
+        height: '80%', // Take up 80% of the parent height
+        width: '100%',
+        alignItems: 'center', // Center the bars vertically
+        gap: barGap,
+      }}>
+        {chartData.map((item, index) => (
+          <div
+            key={index}
+            style={{
+              width: barWidth,
+              height: '70%', // 70% of the container height
+              backgroundColor: item.color,
+              cursor: 'pointer',
+              borderRadius: '2px',
             }}
-        />
+            onMouseEnter={() => setHoveredBar(item)}
-    );
+            onMouseLeave={() => setHoveredBar(null)}
+            onClick={() => handleBarClick(item)}
+          />
+        ))}
+      </div>
+      
+      {/* Tooltip */}
+      {hoveredBar && (
+        <div
+          style={{
+            position: 'absolute',
+            top: '-3rem', // Position above the chart
+            left: '50%',
+            transform: 'translateX(-50%)',
+            backgroundColor: '#333333',
+            color: '#ffffff',
+            padding: '8px',
+            borderRadius: '4px',
+            fontSize: '12px',
+            boxShadow: '0 2px 4px rgba(0, 0, 0, 0.5)',
+            zIndex: 1000,
+          }}
+        >
+          <div>Date: {hoveredBar.label}</div>
+          <div>Uptime: {hoveredBar.value}%</div>
+          <div>Executions: {hoveredBar.executionIds.length}</div>
+        </div>
+      )}
+    </div>
+  );
 };
 
 export default HealthBarChart;

frontend/src/components/HealthPage.jsx

@@ -1,31 +1,35 @@
 import React, { useEffect, useState, useCallback } from 'react';
-import { Bar } from 'react-chartjs-2';
+import { toast } from "react-toastify";
-//import healthData1 from '../healthstats1.json';
+import {
-import { toast } from "react-toastify"
+    CheckOutlined as CheckOutlinedIcon,
-import CheckOutlinedIcon from '@mui/icons-material/CheckOutlined';
+} from '@mui/icons-material';
+
 import {
     Button,
     ButtonGroup,
     Typography,
+    LinearProgress,
 } from "@mui/material";
+
 import HealthBarChart from '../components/HealthBarChart.jsx';
+import LiveExecutionsChart from '../components/LiveExecutionsGraph.jsx';
 
 const HealthPage = (props) => {
-    const { globalUrl, userdata } = props;
+    const { userdata, globalUrl } = props;
     const [healthData, setHealthData] = useState(null);
     const [selectedRange, setSelectedRange] = useState('30d');
+    const [liveExecutionsData, setLiveExecutionsData] = useState([]);
     const [filteredData, setFilteredData] = useState([]);
     const [averageUptime, setAverageUptime] = useState(0);
+    const [liveExecutionsRange, setLiveExecutionsRange] = useState('1h'); // Default to 1h
+    const [isHealthLoading, setIsHealthLoading] = useState(false); // Loading state for HealthBarChart
+    const [isLiveExecutionsLoading, setIsLiveExecutionsLoading] = useState(false); // Loading state for LiveExecutionsChart
 
-    const isCloud = window.location.host === "localhost:3002" || window.location.host === "shuffler.io";
+    const isCloud = (window.location.host === "localhost:3002" || window.location.host === "shuffler.io") ? true : (process.env.IS_SSR === "true");
-    //const globalUrl = `https://shuffler.io` 
-
-	console.log("HEALTHPAGE 1")
 
     const fetchHealthStats = useCallback(async () => {
-		//const after = new Date().getTime() - 90 * 24 * 60 * 60 
+        setIsHealthLoading(true); // Start loading for HealthBarChart
         try {
-            //const response = await fetch(`${globalUrl}/api/v1/health/stats?after=${after}`, {
             const response = await fetch(`${globalUrl}/api/v1/health/stats`, {
                 method: "GET",
                 headers: {
@@ -42,31 +46,118 @@ const HealthPage = (props) => {
         } catch (error) {
             console.error("Error fetching health stats:", error);
             toast.error("Failed loading health stats");
+        } finally {
+            setIsHealthLoading(false); // Stop loading for HealthBarChart
+        }
+    }, [globalUrl]);
+
+    const fetchLiveExecutions = useCallback(async (range = '1h') => {
+        setIsLiveExecutionsLoading(true); // Start loading for LiveExecutionsChart
+        try {
+            const fetchOptions = {
+                method: "GET",
+                credentials: "include",
+            };
+
+            if (window.location.host !== "localhost:3002") {
+                fetchOptions.headers = {
+                    "Content-Type": "application/json",
+                    Accept: "application/json",
+                };
+            }
+
+            const now = Math.floor(Date.now() / 1000);
+            // let after = now - 3600; // Default to 1h
+            let mode = ""
+
+            switch (range) {
+                case '1h':
+                    mode = "1h"
+                    break;
+                case '7h':
+                    mode = "7h"
+                    break;
+                case '1d':
+                    mode = "1d"
+                    break;
+                case '7d':
+                    mode = "7d"
+                    break;
+                case 'month':
+                    mode = "month"
+                    break;
+                default:
+                    mode = "1h"
+            }
+
+            if (!userdata.support_access) {
+                return
+            }
+
+            const response = await fetch(
+                `${globalUrl}/api/v1/health/executions/live?mode=${mode}`,
+                fetchOptions
+            );
+
+            if (!response.ok) {
+                throw new Error("Failed to fetch live executions");
+            }
+
+            const data = await response.json();
+            console.log("Raw live executions data:", data);
+
+            if (Array.isArray(data)) {
+                const formattedData = data
+                    .map(item => ({
+                        ...item,
+                        // failed: Number(item.failed) || 0,
+                        executing: Number(item.executing) || 0,
+                        finished: Number(item.finished) || 0,
+                        aborted: Number(item.aborted) || 0,
+                        created_at: Number(item.created_at) || 0
+                    }))
+                    .sort((a, b) => a.created_at - b.created_at);
+
+                console.log("Formatted live executions data:", formattedData);
+                setLiveExecutionsData(formattedData);
+            } else {
+                console.error("Received invalid data format:", data);
+                setLiveExecutionsData([]);
+            }
+        } catch (error) {
+            console.error("Error fetching live executions:", error);
+            toast.error("Failed loading live executions data");
+        } finally {
+            setIsLiveExecutionsLoading(false); // Stop loading for LiveExecutionsChart
         }
     }, [globalUrl]);
 
     useEffect(() => {
         fetchHealthStats();
-    }, [fetchHealthStats]);
+        fetchLiveExecutions(liveExecutionsRange);
+
+        const interval = setInterval(() => fetchLiveExecutions(liveExecutionsRange), 60000);
+        return () => clearInterval(interval);
+    }, [fetchHealthStats, fetchLiveExecutions, liveExecutionsRange]);
 
     const extractRunFinished = (data, range) => {
         if (!data || !Array.isArray(data)) return [];
-    
+
         const currentDate = new Date().getTime();
         const rangeInMillis = {
             '24hr': 24 * 60 * 60 * 1000,
             '7day': 7 * 24 * 60 * 60 * 1000,
             '30d': 30 * 24 * 60 * 60 * 1000,
             '90d': 90 * 24 * 60 * 60 * 1000
-        }
+        };
-        const filteredData = data.filter(item => currentDate - item.updated * 1000 <= rangeInMillis[range])
+        const filteredData = data.filter(item => currentDate - item.updated * 1000 <= rangeInMillis[range]);
-    
+
-        const aggregatedData = new Map()
+        const aggregatedData = new Map();
-    
+
         filteredData.forEach(item => {
             const timestamp = item.updated * 1000; // Convert Unix timestamp to milliseconds
             let key;
-    
+
             switch (range) {
                 case '24hr':
                     const date = new Date(timestamp);
@@ -83,7 +174,7 @@ const HealthPage = (props) => {
                 default:
                     key = new Date(timestamp).toLocaleDateString();
             }
-    
+
             // Check if date already exists in the map
             if (aggregatedData.has(key)) {
                 // Update aggregated values
@@ -100,13 +191,13 @@ const HealthPage = (props) => {
                 });
             }
         });
-    
+
         // Calculate averages and assign colors
         const result = Array.from(aggregatedData.entries()).map(([key, { totalEntries, totalRunFinished, executionIds }]) => {
             const avg = totalEntries > 0 ? totalRunFinished / totalEntries : 0;
             const FinalAvg = avg * 100;
             let color;
-    
+
             if (FinalAvg >= 100) {
                 color = '#00F670';
             } else if (FinalAvg >= 98.50 && FinalAvg <= 99.99) {
@@ -114,7 +205,7 @@ const HealthPage = (props) => {
             } else if (FinalAvg <= 98.49) {
                 color = '#FF354C';
             }
-    
+
             return {
                 date: range === '24hr' ? `${key}:00` : key,
                 avgRunFinished: FinalAvg,
@@ -122,11 +213,10 @@ const HealthPage = (props) => {
                 executionIds
             };
         });
-    
+
         return result;
     };
-    
+
-    
     useEffect(() => {
         if (healthData) {
             const newData = extractRunFinished(healthData, selectedRange);
@@ -160,19 +250,19 @@ const HealthPage = (props) => {
         const labels = filteredData.map((value, i) => {
             if (selectedRange === '24hr') {
                 const [datePart, hourPart] = value.date.split(' ');
-                const [day, month, year] = datePart.split('/');
+                const [month, day, year] = datePart.split('/');
                 const monthIndex = parseInt(month, 10) - 1;
                 const date = new Date(year, monthIndex, day);
                 let formattedDate = `${date.toLocaleString('en-US', { month: 'short', day: '2-digit' })}`;
-
                 // Add hour part if available
                 if (hourPart) {
                     formattedDate += `, ${hourPart.split(':').slice(0, 2).join(':')}`;
                 }
+
                 return `${formattedDate} \nUptime: ${value.avgRunFinished.toFixed(2)}%`;
             } else if (selectedRange === '7day') {
                 const [datePart, hourPart] = value.date.split(' ');
-                const [day, month, year] = datePart.split('/');
+                const [month, day, year] = datePart.split('/');
                 const monthIndex = parseInt(month, 10) - 1;
                 const date = new Date(year, monthIndex, day);
                 let formattedDate = `${date.toLocaleString('en-US', { month: 'short', day: '2-digit' })}`;
@@ -185,12 +275,12 @@ const HealthPage = (props) => {
             }
             else {
                 const dateParts = value.date.split('/'); // Assuming the date format is "DD/MM/YYYY"
-                const date = new Date(`${dateParts[2]}-${dateParts[1]}-${dateParts[0]}`); // Reformat the date string to "YYYY-MM-DD"
+                const date = new Date(`${dateParts[2]}-${dateParts[0]}-${dateParts[1]}`); // Reformat the date string to "YYYY-MM-DD"
+
                 return `${date.toLocaleDateString('en-US', { month: 'short', day: '2-digit', year: 'numeric' })} \nUptime: ${value.avgRunFinished.toFixed(2)}%`;
             }
         });
 
-
         if (selectedRange === '24hr') {
             barThickness = 35;
         }
@@ -200,12 +290,6 @@ const HealthPage = (props) => {
         else if (selectedRange === '30d') {
             barThickness = 25;
         }
-        // let width = 800; // Default chart width
-        // if (selectedRange === '7day') {
-        //     width = 400; // Adjust chart width for 7 days
-        // } else if (selectedRange === '30d') {
-        //     width = 600; // Adjust chart width for 30 days
-        // }
 
         const datasets = [{
             label: "",
@@ -213,14 +297,11 @@ const HealthPage = (props) => {
             backgroundColor: filteredData.map(item => item.color),
             borderWidth: 1,
             barThickness: barThickness,
-            // barPercentage: barPercentage,
         }];
 
         return { labels, datasets };
     };
 
-	console.log("HEALTHPAGE 2")
-
     const options = {
         legend: {
             display: false
@@ -253,12 +334,11 @@ const HealthPage = (props) => {
                 },
                 afterLabel: function (tooltipItem, data) {
                     const label = data.labels[tooltipItem.index];
-                    // console.log(label)
                     const uptime = label.match(/Uptime:\s*(\d+(?:\.\d+)?)/)[1]; // Extract uptime value using regex
-                    return `Success Rate: ${uptime}%`; // Customize the uptime display
+                    return `Test-Workflow Health: ${uptime}%`; // Customize the uptime display
                 },
                 title: function () {
-                    return 'Fully Oprational'; // Hide the tooltip title
+                    return 'Fully Operational'; // Hide the tooltip title
                 }
             }
         }
@@ -284,32 +364,118 @@ const HealthPage = (props) => {
         }
     };
 
+	  const healthBarData = updateChartData()
+
 
     return (
-        <div style={{ padding: 30, width: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
+        <div style={{ paddingTop: 30, width: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
-
+            {/* Health Bar Chart Section */}
             <ButtonGroup style={{ display: 'flex', margin: "auto", marginBottom: 10, width: 300, borderRadius: 30, background: "#000000" }}>
-                <Button variant="contained" style={{ flex: 1, borderBottom: selectedRange === '24hr' ? '2px solid #FF8444' : 'none', background: "#000000", color: selectedRange === '24hr' ? '#FF8444' : '#cfd8dc', textTransform: 'none' }} onClick={() => filterDataByRange('24hr')}>24h</Button>
+                <Button variant="contained" style={{ flex: 1, borderBottom: selectedRange === '24hr' ? '2px solid #FF8444' : 'none', background: "#000000", color: selectedRange === '24hr' ? '#FF8444' : '#cfd8dc', textTransform: 'none' }} onClick={() => filterDataByRange('24hr')} disabled={isHealthLoading}>24h</Button>
-                <Button variant="contained" style={{ flex: 1, borderBottom: selectedRange === '7day' ? '2px solid #FF8444' : 'none', background: "#000000", color: selectedRange === '7day' ? '#FF8444' : '#cfd8dc', textTransform: 'none' }} onClick={() => filterDataByRange('7day')}>7d</Button>
+                <Button variant="contained" style={{ flex: 1, borderBottom: selectedRange === '7day' ? '2px solid #FF8444' : 'none', background: "#000000", color: selectedRange === '7day' ? '#FF8444' : '#cfd8dc', textTransform: 'none' }} onClick={() => filterDataByRange('7day')} disabled={isHealthLoading}>7d</Button>
-                <Button variant="contained" style={{ flex: 1, borderBottom: selectedRange === '30d' ? '2px solid #FF8444' : 'none', background: "#000000", color: selectedRange === '30d' ? '#FF8444' : '#cfd8dc', textTransform: 'none' }} onClick={() => filterDataByRange('30d')}>30d</Button>
+                <Button variant="contained" style={{ flex: 1, borderBottom: selectedRange === '30d' ? '2px solid #FF8444' : 'none', background: "#000000", color: selectedRange === '30d' ? '#FF8444' : '#cfd8dc', textTransform: 'none' }} onClick={() => filterDataByRange('30d')} disabled={isHealthLoading}>30d</Button>
-                <Button disabled variant="contained" style={{ flex: 1, borderBottom: selectedRange === '90d' ? '2px solid #FF8444' : 'none', background: "#000000", color: false === false ? "grey" : selectedRange === '90d' ? '#FF8444' : '#cfd8dc', textTransform: 'none' }} onClick={() => filterDataByRange('90d')}>90d</Button>
+                <Button disabled variant="contained" style={{ flex: 1, borderBottom: selectedRange === '90d' ? '2px solid #FF8444' : 'none', background: "#000000", color: false === false ? "grey" : selectedRange === '90d' ? '#FF8444' : '#cfd8dc', textTransform: 'none' }} onClick={() => filterDataByRange('90d')} disabled={isHealthLoading}>90d</Button>
-                <Button disabled variant="contained" style={{ flex: 1, borderBottom: selectedRange === '180d' ? '2px solid #FF8444' : 'none', background: "#000000", color: false === false ? "grey" : selectedRange === '180d' ? '#FF8444' : '#cfd8dc', textTransform: 'none' }} onClick={() => filterDataByRange('180d')}>180d</Button>
+                <Button disabled variant="contained" style={{ flex: 1, borderBottom: selectedRange === '180d' ? '2px solid #FF8444' : 'none', background: "#000000", color: false === false ? "grey" : selectedRange === '180d' ? '#FF8444' : '#cfd8dc', textTransform: 'none' }} onClick={() => filterDataByRange('180d')} disabled={isHealthLoading}>180d</Button>
             </ButtonGroup>
 
-            <div style={{ margin: '0 auto', padding: 20, width: 1000, justifyContent: "center", color: '#ffffff', backgroundColor: '#000000', fontSize: '16px', borderRadius: '16px' }}>
+            {/* Loading Bar for HealthBarChart */}
-                <div style={{ display: "flex", alignItems: "center" }}>
+            {isHealthLoading && (
-                    <CheckOutlinedIcon style={{ borderRadius: 20, fontSize: 24, backgroundColor: '#00e600', marginLeft: 25 }} />
+                <LinearProgress style={{ width: '100%', marginBottom: 10 }} />
-                    <div>
+            )}
-                        <Typography style={{ marginLeft: 10 }}>Workflow Health</Typography>
+
-                        <Typography style={{ marginLeft: 10, fontWeight: 100, fontSize: 13, color: "#00FF00" }}>Operational</Typography>
+            <div style={{ margin: '0 auto', padding: 10, width: 800, backgroundColor: '#000000', borderRadius: '16px' }}>
+                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '10px' }}>
+                    <div style={{ display: 'flex', alignItems: 'center' }}>
+                        <CheckOutlinedIcon style={{ borderRadius: 20, fontSize: 24, backgroundColor: '#00e600', marginRight: 10 }} />
+                        <div>
+                            <Typography style={{ color: '#ffffff', fontSize: 16 }}>Workflow Health</Typography>
+                            <Typography style={{ color: '#00FF00', fontSize: 12, fontWeight: 100 }}>Operational</Typography>
+                        </div>
                     </div>
-                    <div style={{ marginLeft: 720 }}>
+                    <div>
-                        <Typography style={{}}>{averageUptime.toFixed(2)}%</Typography>
+                        <Typography style={{ color: '#ffffff', fontSize: 16, textAlign: 'end' }}>{averageUptime.toFixed(2)}%</Typography>
-                        <Typography style={{ fontWeight: 100, fontSize: 13, textAlign: "end" }}>Success Rate</Typography>
+                        <Typography style={{ color: '#ffffff', fontSize: 12, fontWeight: 100 }}>Success Rate</Typography>
                     </div>
                 </div>
-                <HealthBarChart filteredData={updateChartData()} options={options} onBarClick={handleBarClick} />
+                <HealthBarChart
+                    filteredData={filteredData}
+                    onBarClick={handleBarClick}
+                />
             </div>
+
+            {userdata.support_access && (
+                <div style={{ margin: '20px auto', padding: 20, width: 1000, justifyContent: "center", color: '#ffffff', backgroundColor: '#000000', fontSize: '16px', borderRadius: '16px' }}>
+                    <div style={{ display: "flex", alignItems: "center", marginBottom: 20 }}>
+                        <Typography variant="h6" style={{ marginLeft: 10 }}>Live Executions</Typography>
+                        <ButtonGroup style={{ marginLeft: 'auto', borderRadius: 30, background: "#000000" }}>
+                            <Button
+                                variant="contained"
+                                style={{
+                                    flex: 1,
+                                    borderBottom: liveExecutionsRange === '1h' ? '2px solid #FF8444' : 'none',
+                                    background: "#000000",
+                                    color: liveExecutionsRange === '1h' ? '#FF8444' : '#cfd8dc',
+                                    textTransform: 'none'
+                                }}
+                                onClick={() => setLiveExecutionsRange('1h')}
+                                disabled={isLiveExecutionsLoading}
+                            >
+                                1h
+                            </Button>
+                            <Button
+                                variant="contained"
+                                style={{
+                                    flex: 1,
+                                    borderBottom: liveExecutionsRange === '7h' ? '2px solid #FF8444' : 'none',
+                                    background: "#000000",
+                                    color: liveExecutionsRange === '7h' ? '#FF8444' : '#cfd8dc',
+                                    textTransform: 'none'
+                                }}
+                                onClick={() => setLiveExecutionsRange('7h')}
+                                disabled={isLiveExecutionsLoading}
+                            >
+                                7h
+                            </Button>
+                            <Button
+                                variant="contained"
+                                style={{
+                                    flex: 1,
+                                    borderBottom: liveExecutionsRange === '1d' ? '2px solid #FF8444' : 'none',
+                                    background: "#000000",
+                                    color: liveExecutionsRange === '1d' ? '#FF8444' : '#cfd8dc',
+                                    textTransform: 'none'
+                                }}
+                                onClick={() => setLiveExecutionsRange('1d')}
+                                disabled={isLiveExecutionsLoading}
+                            >
+                                1d
+                            </Button>
+                            <Button
+                                variant="contained"
+                                style={{
+                                    flex: 1,
+                                    borderBottom: liveExecutionsRange === '7d' ? '2px solid #FF8444' : 'none',
+                                    background: "#000000",
+                                    color: liveExecutionsRange === '7d' ? '#FF8444' : '#cfd8dc',
+                                    textTransform: 'none'
+                                }}
+                                onClick={() => setLiveExecutionsRange('7d')}
+                                disabled={isLiveExecutionsLoading}
+                            >
+                                7d
+                            </Button>
+                            {/* <Button variant="contained" style={{ flex: 1, borderBottom: liveExecutionsRange === 'month' ? '2px solid #FF8444' : 'none', background: "#000000", color: liveExecutionsRange === 'month' ? '#FF8444' : '#cfd8dc', textTransform: 'none' }} onClick={() => setLiveExecutionsRange('month')} disabled={isLiveExecutionsLoading}>Month</Button> */}
+                        </ButtonGroup>
+                    </div>
+                    {/* Loading Bar for LiveExecutionsChart */}
+                    {isLiveExecutionsLoading && (
+                        <LinearProgress style={{ width: '100%', marginBottom: 10 }} />
+                    )}
+                    <LiveExecutionsChart data={liveExecutionsData} />
+                </div>
+            )}
+
+
         </div>
     );
 };

frontend/src/components/LiveExecutionsGraph.jsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const LiveExecutionsGraph = ({ executions }) => {
+	return null
+}
+
+export default LiveExecutionsGraph

frontend/src/components/PartnerHeader.jsx

@@ -741,7 +741,7 @@ const PartnerHeader = (props) => {
           <div >
             <Button
               style={{ fontSize: 16, textTransform: 'capitalize',  boxShadow: "none", borderRadius: 4, width: 128, height: 40 }}
-              variant="contained"
+              variant="outlined"
               color="primary"
               disabled={isDisabled || isPublishing}
               onClick={() => {
@@ -812,7 +812,7 @@ const PartnerHeader = (props) => {
           <div >
             <Button
               style={{ fontSize: 16, textTransform: 'capitalize',  boxShadow: "none", borderRadius: 4, width: 128, height: 40 }}
-              variant="contained"
+              variant="outlined"
               color="primary"
               disabled={isDisabled || isPublishing}
               onClick={() => {

frontend/src/theme.jsx

@@ -391,6 +391,78 @@ export const getTheme = (themeMode, brandColor) =>
                 },
               },
             },
+            {
+              props: { variant: 'aiButton' },
+              style: {
+                background: 'linear-gradient(90deg, #ff8544 0%, #ec517c 50%, #9c5af2 100%)',
+                color: '#ffffff',
+                borderRadius: '4px',
+                whiteSpace: "nowrap",
+                textWrap: "normal",
+                border: 'none',
+                boxShadow: 'none',
+                transition: 'all 0.2s ease-in-out',
+                '&:hover': {
+                  color: '#ffffff',
+                  textShadow: '0 0 1px currentColor',
+                },
+                '&:active': {
+                  background: 'linear-gradient(90deg, #e6743a 0%, #d4456e 50%, #8a4de8 100%)',
+                },
+                '&:disabled': {
+                  background: themeMode === "dark" ? '#494949' : '#C9C9C9',
+                  color: themeMode === "dark" ? '#9E9E9E' : '#616161',
+                },
+              },
+            },
+            {
+              props: { variant: 'aiButtonGhost' },
+              style: {
+                background: 'transparent',
+                border: 'none',
+                borderRadius: '4px',
+                color: '#ffffff',
+                whiteSpace: "nowrap",
+                textWrap: "normal",
+                boxShadow: 'none',
+                transition: 'all 0.2s ease-in-out',
+                position: 'relative',
+                '&::before': {
+                  content: '""',
+                  position: 'absolute',
+                  top: 0,
+                  left: 0,
+                  right: 0,
+                  bottom: 0,
+                  borderRadius: '4px',
+                  padding: '2px',
+                  background: 'linear-gradient(90deg, #ff8544 0%, #ec517c 50%, #9c5af2 100%)',
+                  mask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)',
+                  WebkitMask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)',
+                  maskComposite: 'exclude',
+                  WebkitMaskComposite: 'xor',
+                  transition: 'opacity 0.2s ease-in-out',
+                  zIndex: -1,
+                },
+                '&:hover': {
+                  background: 'linear-gradient(90deg, #ff8544 0%, #ec517c 50%, #9c5af2 100%)',
+                  color: '#ffffff',
+                  '&::before': {
+                    opacity: 0,
+                  },
+                },
+                '&:active': {
+                  background: 'linear-gradient(90deg, #e6743a 0%, #d4456e 50%, #8a4de8 100%)',
+                },
+                '&:disabled': {
+                  background: 'transparent',
+                  color: themeMode === "dark" ? '#9E9E9E' : '#616161',
+                  '&::before': {
+                    background: themeMode === "dark" ? '#494949' : '#C9C9C9',
+                  },
+                },
+              },
+            },
           ],
         },
         MuiTab: {
@@ -412,39 +484,39 @@ export const getTheme = (themeMode, brandColor) =>
           MuiCssBaseline: {
             styleOverrides: `
               @font-face {
-                font-family: 'Roboto';
+                font-family: 'Inter';
                 font-style: normal;
                 font-display: swap;
                 font-weight: 300;
-                src: local('Roboto Light'), local('Roboto-Light');
+                src: local('Inter Light'), local('Inter-Light');
               }
               @font-face {
-                font-family: 'Roboto';
+                font-family: 'Inter';
                 font-style: normal;
                 font-display: swap;
                 font-weight: 400;
-                src: local('Roboto'), local('Roboto-Regular');
+                src: local('Inter Regular'), local('Inter-Regular');
               }
               @font-face {
-                font-family: 'Roboto';
+                font-family: 'Inter';
                 font-style: normal;
                 font-display: swap;
                 font-weight: 500;
-                src: local('Roboto Medium'), local('Roboto-Medium');
+                src: local('Inter Medium'), local('Inter-Medium');
               }
               @font-face {
-                font-family: 'Roboto';
+                font-family: 'Inter';
                 font-style: normal;
                 font-display: swap;
                 font-weight: 600;
-                src: local('Roboto SemiBold'), local('Roboto-SemiBold');
+                src: local('Inter SemiBold'), local('Inter-SemiBold');
               }
               @font-face {
-                font-family: 'Roboto';
+                font-family: 'Inter';
                 font-style: normal;
                 font-display: swap;
                 font-weight: 700;
-                src: local('Roboto Bold'), local('Roboto-Bold');
+                src: local('Inter Bold'), local('Inter-Bold');
               }
             `,
           },

frontend/src/views/LoginPage.jsx

@@ -5,6 +5,7 @@ import { useNavigate, Link, useParams } from "react-router-dom";
 import { isMobile } from "react-device-detect";
 import { toast } from 'react-toastify';
 import { useInterval } from "react-powerhooks";
+import ReactGA from 'react-ga4';
 import VisibilityOutlinedIcon from '@mui/icons-material/VisibilityOutlined';
 import VisibilityOffOutlinedIcon from '@mui/icons-material/VisibilityOffOutlined';
 import {
@@ -157,7 +158,7 @@ const FreePlanCard = ({ classes }) => {
 	);
 };
 
-const MarketplaceCard = ({ classes }) => {
+const MarketplaceCard = ({ classes, isCloud }) => {
 	const marketplaceOptions = [
 		{
 			name: "Open Source Install",
@@ -216,6 +217,15 @@ const MarketplaceCard = ({ classes }) => {
 					>
 						<button
 							onClick={() => {
+								// Track marketplace click
+								if (isCloud) {
+									ReactGA.event({
+										category: "authentication",
+										action: "click_marketplace_option",
+										label: option.name,
+									});
+								}
+								
 								if (option.valid === true) {
 									window.open(option.link, "_blank")
 								}
@@ -512,6 +522,15 @@ const LoginPage = props => {
 	const onSubmit = (e) => {
 		//toast("Testing from login page")
 
+		// Track form submission attempt
+		if (isCloud) {
+			ReactGA.event({
+				category: "authentication",
+				action: register ? "submit_login_form" : "submit_register_form",
+				label: register ? (loginWithSSO ? "SSO Login Form" : "Email Login Form") : "Email Registration Form",
+			});
+		}
+
 		setMessage("")
 		setLoginLoading(true)
 		e.preventDefault()
@@ -556,6 +575,14 @@ const LoginPage = props => {
 				setLoginLoading(false)
 
 				if (responseJson["success"] === false) {
+					// Track failed login event
+					if (isCloud) {
+						ReactGA.event({
+							category: "authentication",
+							action: loginWithSSO ? "login_sso_failed" : "login_failed",
+							label: loginWithSSO ? "SSO Login Failed" : "Email Login Failed",
+						});
+					}
 					setLoginInfo(responseJson["reason"])
 				} else {
 					if (responseJson?.region_url !== undefined && responseJson?.region_url !== null && responseJson?.region_url !== "") {
@@ -583,6 +610,14 @@ const LoginPage = props => {
 						return
 					}
 
+					// Track successful login event
+					if (isCloud) {
+						ReactGA.event({
+							category: "authentication",
+							action: loginWithSSO ? "login_sso_success" : "login_success",
+							label: loginWithSSO ? "SSO Login" : "Email Login",
+						});
+					}
 
 					setLoginInfo("Successful login! Redirecting you in 3 seconds...")
 					for (var key in responseJson["cookies"]) {
@@ -643,6 +678,14 @@ const LoginPage = props => {
 				.then(response =>
 					response.json().then(responseJson => {
 						if (responseJson["success"] === false) {
+							// Track failed registration event
+							if (isCloud) {
+								ReactGA.event({
+									category: "authentication",
+									action: "register_failed",
+									label: "Email Registration Failed",
+								});
+							}
 							setLoginInfo(responseJson["reason"])
 						} else {
 							if (responseJson["reason"] === "shuffle_account") {
@@ -659,6 +702,16 @@ const LoginPage = props => {
 							}
 
 							setLoginLoading(false)
+							
+							// Track successful registration event
+							if (isCloud) {
+								ReactGA.event({
+									category: "authentication",
+									action: "register_success",
+									label: "Email Registration",
+								});
+							}
+							
 							setLoginInfo("Successful registration! Redirecting in 3 seconds...")
 
 
@@ -707,15 +760,40 @@ const LoginPage = props => {
 	}
 
 	const HandleLoginWithSSO = () => {
+		// Track SSO login attempt
+		if (isCloud) {
+			ReactGA.event({
+				category: "authentication",
+				action: "click_sso_login",
+				label: "SSO Login Attempt",
+			});
+		}
+		
 		setPassword("")
 		setLoginInfo("")
 		setLoginWithSSO(true)
 	}
 
 	var formtitle = register ? <div>Welcome Back!</div> : <div>Create your account</div>
-	var formButton = !isCloud ? "" : register ? <div style={{ display: "flex" }}> <div style={{ fontSize: "14px", paddingRight: "7px", textDecoration: "none", }}>Don’t have an account yet?</div> <Link style={hrefStyle} to={`/register${parsedsearch}`}><div>Register here</div></Link></div> : <>
+	var formButton = !isCloud ? "" : register ? <div style={{ display: "flex" }}> <div style={{ fontSize: "14px", paddingRight: "7px", textDecoration: "none", }}>Don’t have an account yet?</div> <Link style={hrefStyle} to={`/register${parsedsearch}`} onClick={() => {
+		if (isCloud) {
+			ReactGA.event({
+				category: "authentication",
+				action: "click_register_link",
+				label: "Switch to Register",
+			});
+		}
+	}}><div>Register here</div></Link></div> : <>
 
-		<div style={{ display: "flex", marginTop: 40, marginBottom: -10 }}> <div style={{ fontSize: "14px", paddingRight: "7px", textDecoration: "none", }}>Already have an account?</div> <Link style={hrefStyle} to={`/login${parsedsearch}`}><div>Login here</div></Link></div>
+		<div style={{ display: "flex", marginTop: 40, marginBottom: -10 }}> <div style={{ fontSize: "14px", paddingRight: "7px", textDecoration: "none", }}>Already have an account?</div> <Link style={hrefStyle} to={`/login${parsedsearch}`} onClick={() => {
+			if (isCloud) {
+				ReactGA.event({
+					category: "authentication",
+					action: "click_login_link",
+					label: "Switch to Login",
+				});
+			}
+		}}><div>Login here</div></Link></div>
 	</>
 	//<Link to={`/login${parsedsearch}`} style={hrefStyle}><div>Click here to Login</div></Link>
 
@@ -1025,7 +1103,7 @@ const LoginPage = props => {
 						<div className={classes.divider}>
 							<span>OR</span>
 						</div>
-						<MarketplaceCard classes={classes} />
+						<MarketplaceCard classes={classes} isCloud={isCloud} />
 					</>
 				)}
 			</div>

functions/onprem/orborus/go.mod

@@ -10,7 +10,7 @@ require (
 	github.com/docker/docker v28.2.2+incompatible
 	github.com/docker/go-connections v0.5.0
 	github.com/satori/go.uuid v1.2.0
-	github.com/shuffle/shuffle-shared v0.8.96
+	github.com/shuffle/shuffle-shared v0.8.99
 	k8s.io/api v0.33.1
 	k8s.io/apimachinery v0.33.1
 )

functions/onprem/worker/go.mod

@@ -10,7 +10,7 @@ require (
 	github.com/docker/docker v28.2.2+incompatible
 	github.com/gorilla/mux v1.8.1
 	github.com/satori/go.uuid v1.2.0
-	github.com/shuffle/shuffle-shared v0.8.96
+	github.com/shuffle/shuffle-shared v0.8.99
 	k8s.io/api v0.33.1
 	k8s.io/apimachinery v0.33.1
 	k8s.io/client-go v0.33.1