@orchestrator-ui/orchestrator-ui-components 1.24.0 → 1.26.0

package/dist/index.js

@@ -34664,20 +34664,20 @@ var StepStatus = /* @__PURE__ */ ((StepStatus2) => {
   StepStatus2["COMPLETE"] = "complete";
   return StepStatus2;
 })(StepStatus || {});
-var ProcessStatus = /* @__PURE__ */ ((ProcessStatus3) => {
-  ProcessStatus3["CREATE"] = "create";
-  ProcessStatus3["CREATED"] = "created";
-  ProcessStatus3["RUNNING"] = "running";
-  ProcessStatus3["SUSPENDED"] = "suspended";
-  ProcessStatus3["WAITING"] = "waiting";
-  ProcessStatus3["AWAITING_CALLBACK"] = "awaiting_callback";
-  ProcessStatus3["ABORTED"] = "aborted";
-  ProcessStatus3["FAILED"] = "failed";
-  ProcessStatus3["RESUMED"] = "resumed";
-  ProcessStatus3["API_UNAVAILABLE"] = "api_unavailable";
-  ProcessStatus3["INCONSISTENT_DATA"] = "inconsistent_data";
-  ProcessStatus3["COMPLETED"] = "completed";
-  return ProcessStatus3;
+var ProcessStatus = /* @__PURE__ */ ((ProcessStatus2) => {
+  ProcessStatus2["CREATE"] = "create";
+  ProcessStatus2["CREATED"] = "created";
+  ProcessStatus2["RUNNING"] = "running";
+  ProcessStatus2["SUSPENDED"] = "suspended";
+  ProcessStatus2["WAITING"] = "waiting";
+  ProcessStatus2["AWAITING_CALLBACK"] = "awaiting_callback";
+  ProcessStatus2["ABORTED"] = "aborted";
+  ProcessStatus2["FAILED"] = "failed";
+  ProcessStatus2["RESUMED"] = "resumed";
+  ProcessStatus2["API_UNAVAILABLE"] = "api_unavailable";
+  ProcessStatus2["INCONSISTENT_DATA"] = "inconsistent_data";
+  ProcessStatus2["COMPLETED"] = "completed";
+  return ProcessStatus2;
 })(ProcessStatus || {});
 var ProcessDoneStatuses = [
   "completed" /* COMPLETED */,
@@ -40399,7 +40399,7 @@ var BaseQueryTypes = /* @__PURE__ */ ((BaseQueryTypes2) => {
 var CacheTags = /* @__PURE__ */ ((CacheTags2) => {
   CacheTags2["engineStatus"] = "engineStatus";
   CacheTags2["cacheNames"] = "cacheNames";
-  CacheTags2["processList"] = "processList";
+  CacheTags2["processes"] = "processes";
   CacheTags2["processListSummary"] = "processListSummary";
   CacheTags2["subscription"] = "subscription";
   CacheTags2["subscriptionList"] = "subscriptionList";
@@ -40473,7 +40473,7 @@ var orchestratorApi = createApi2({
   tagTypes: [
     "engineStatus" /* engineStatus */,
     "cacheNames" /* cacheNames */,
-    "processList" /* processList */,
+    "processes" /* processes */,
     "processListSummary" /* processListSummary */,
     "subscriptionList" /* subscriptionList */,
     "subscription" /* subscription */,
@@ -41255,7 +41255,7 @@ var processApi = orchestratorApi.injectEndpoints({
           pageInfo: ((_a = response.processes) == null ? void 0 : _a.pageInfo) || {}
         };
       },
-      providesTags: ["processList" /* processList */]
+      providesTags: ["processes" /* processes */]
     })
   })
 });
@@ -41723,16 +41723,20 @@ var streamMessagesApi = orchestratorApi.injectEndpoints({
             clearInterval(pingInterval);
             updateCachedData(() => false);
           };
-          const invalidateTag = (tag) => {
-            const tagToInvalidate = tag;
-            if (validCacheTags.includes(tagToInvalidate)) {
-              const cacheInvalidationAction = orchestratorApi.util.invalidateTags([
-                tagToInvalidate
-              ]);
+          const invalidateTag = (cacheTag, id) => {
+            if (validCacheTags.includes(cacheTag)) {
+              const cacheTags = [cacheTag];
+              if (id) {
+                cacheTags.push({
+                  type: cacheTag,
+                  id
+                });
+              }
+              const cacheInvalidationAction = orchestratorApi.util.invalidateTags(cacheTags);
               dispatch(cacheInvalidationAction);
             } else {
               console.error(
-                `Trying to invalidate a cache entry with an unknown tag: ${tagToInvalidate}`
+                `Trying to invalidate a cache entry with an unknown tag: ${cacheTag}`
               );
             }
           };
@@ -41741,8 +41745,10 @@ var streamMessagesApi = orchestratorApi.injectEndpoints({
               const messageValue = message.value;
               if (typeof messageValue === "string") {
                 invalidateTag(messageValue);
-              } else if (Array.isArray(messageValue)) {
-                messageValue.forEach((tag) => invalidateTag(tag));
+              } else if (Array.isArray(messageValue) && messageValue.length === 2) {
+                const [tag, id] = messageValue;
+                const cacheTag = tag;
+                invalidateTag(cacheTag, id);
               } else {
                 console.error(
                   "invalid message value type",
@@ -41833,7 +41839,10 @@ var subscriptionDetailQuery = `
                 }
                 productBlockInstances {
                     id
-                    ownerSubscriptionId
+                    subscription {
+                        subscriptionId
+                        description
+                    }
                     parent
                     productBlockInstanceValues
                     subscriptionInstanceId
@@ -44460,7 +44469,6 @@ var getStyles2 = ({ theme }) => {
     borderBottomLeftRadius: radius
   });
   const valueColumnStyle = css3({
-    padding,
     borderTopRightRadius: radius,
     borderBottomRightRadius: radius,
     display: "flex",
@@ -44656,7 +44664,7 @@ var WfoWebsocketStatusBadge = () => {
         WfoHeaderBadge,
         {
           textColor: theme.colors.shadow,
-          iconType: () => websocketConnected ? /* @__PURE__ */ jsx59(WfoBoltFill, { color: theme.colors.success }) : /* @__PURE__ */ jsx59(WfoBoltSlashFill, { color: "yellow" }),
+          iconType: () => websocketConnected ? /* @__PURE__ */ jsx59(WfoBoltFill, { color: theme.colors.success }) : /* @__PURE__ */ jsx59(WfoBoltSlashFill, { color: theme.colors.warning }),
           css: websocketConnected ? connectedStyle : disconnectedStyle,
           onClick: () => {
             if (!websocketConnected) {
@@ -45526,6 +45534,7 @@ var WfoInformationModal = ({
 };
 
 // src/components/WfoSettingsModal/WfoSettingsModal.tsx
+import { useTranslations as useTranslations12 } from "next-intl";
 import {
   EuiButton as EuiButton4,
   EuiButtonEmpty,
@@ -45544,15 +45553,18 @@ var WfoSettingsModal = ({
   onResetToDefaults,
   onUpdateTableConfig,
   children
-}) => /* @__PURE__ */ jsxs50(EuiModal3, { onClose, maxWidth: 400, children: [
-  /* @__PURE__ */ jsx70(EuiModalHeader3, { children: /* @__PURE__ */ jsx70(EuiModalHeaderTitle3, { size: "xs", children: title }) }),
-  /* @__PURE__ */ jsx70(EuiSpacer5, { size: "s" }),
-  /* @__PURE__ */ jsx70(EuiModalBody3, { children }),
-  /* @__PURE__ */ jsx70(EuiModalFooter3, { children: /* @__PURE__ */ jsxs50(EuiFlexGroup, { justifyContent: "spaceBetween", children: [
-    /* @__PURE__ */ jsx70(EuiButtonEmpty, { onClick: onResetToDefaults, flush: "left", children: "Reset to default" }),
-    /* @__PURE__ */ jsx70(EuiButton4, { onClick: onUpdateTableConfig, fill: true, children: "Save preference" })
-  ] }) })
-] });
+}) => {
+  const t = useTranslations12("main");
+  return /* @__PURE__ */ jsxs50(EuiModal3, { onClose, maxWidth: 400, children: [
+    /* @__PURE__ */ jsx70(EuiModalHeader3, { children: /* @__PURE__ */ jsx70(EuiModalHeaderTitle3, { size: "xs", children: title }) }),
+    /* @__PURE__ */ jsx70(EuiSpacer5, { size: "s" }),
+    /* @__PURE__ */ jsx70(EuiModalBody3, { children }),
+    /* @__PURE__ */ jsx70(EuiModalFooter3, { children: /* @__PURE__ */ jsxs50(EuiFlexGroup, { justifyContent: "spaceBetween", children: [
+      /* @__PURE__ */ jsx70(EuiButtonEmpty, { onClick: onResetToDefaults, flush: "left", children: t("resetToDefault") }),
+      /* @__PURE__ */ jsx70(EuiButton4, { onClick: onUpdateTableConfig, fill: true, children: t("savePreferences") })
+    ] }) })
+  ] });
+};
 
 // src/components/WfoSettingsModal/WfoSubmitModal.tsx
 import {
@@ -45738,7 +45750,7 @@ var SubscriptionKeyValueBlock = ({
 
 // src/components/WfoSubscription/WfoInSyncField.tsx
 import { useContext as useContext4 } from "react";
-import { useTranslations as useTranslations12 } from "next-intl";
+import { useTranslations as useTranslations13 } from "next-intl";
 import Link2 from "next/link";
 import { EuiButton as EuiButton6 } from "@elastic/eui";
 
@@ -45766,7 +45778,7 @@ var WfoInsyncIcon = ({ inSync }) => {
 // src/components/WfoSubscription/WfoInSyncField.tsx
 import { Fragment as Fragment9, jsx as jsx74, jsxs as jsxs53 } from "@emotion/react/jsx-runtime";
 var WfoInSyncField = ({ subscriptionDetail }) => {
-  const t = useTranslations12("subscriptions.detail");
+  const t = useTranslations13("subscriptions.detail");
   const { theme } = useOrchestratorTheme();
   const inSync = subscriptionDetail.insync;
   const lastTaskRunDate = getLatestTaskDate(
@@ -45833,7 +45845,7 @@ var WfoInSyncField = ({ subscriptionDetail }) => {
 };
 
 // src/components/WfoSubscription/WfoProcessesTimeline.tsx
-import { useTranslations as useTranslations13 } from "next-intl";
+import { useTranslations as useTranslations14 } from "next-intl";
 import { EuiComment, EuiCommentList, EuiSpacer as EuiSpacer8, EuiText as EuiText4 } from "@elastic/eui";
 
 // src/components/WfoLoading/WfoLoading.tsx
@@ -45912,7 +45924,7 @@ var getStyles5 = ({ theme }) => {
 // src/components/WfoSubscription/WfoProcessesTimeline.tsx
 import { Fragment as Fragment10, jsx as jsx77, jsxs as jsxs54 } from "@emotion/react/jsx-runtime";
 var WfoProcessCard = ({ subscriptionDetailProcess }) => {
-  const t = useTranslations13("subscriptions.detail.processDetail");
+  const t = useTranslations14("subscriptions.detail.processDetail");
   const {
     tableStyle,
     contentCellStyle,
@@ -46013,7 +46025,7 @@ var WfoProcessesTimeline = ({
 
 // src/components/WfoSubscription/WfoRelatedSubscriptions.tsx
 import { useState as useState10 } from "react";
-import { useTranslations as useTranslations14 } from "next-intl";
+import { useTranslations as useTranslations15 } from "next-intl";
 import Link3 from "next/link";
 import { EuiFlexGroup as EuiFlexGroup4, EuiFlexItem as EuiFlexItem3, EuiSpacer as EuiSpacer9, EuiSwitch } from "@elastic/eui";
 import { Fragment as Fragment11, jsx as jsx78, jsxs as jsxs55 } from "@emotion/react/jsx-runtime";
@@ -46022,7 +46034,7 @@ var WfoRelatedSubscriptions = ({
 }) => {
   var _a, _b, _c;
   const [hideTerminatedSubscriptions, setHideTerminatedSubscriptions] = useState10(true);
-  const t = useTranslations14("subscriptions.detail");
+  const t = useTranslations15("subscriptions.detail");
   const { theme } = useOrchestratorTheme();
   const terminatedSubscriptionsFilter = {
     field: "status",
@@ -46059,7 +46071,7 @@ var WfoRelatedSubscriptions = ({
         Link3,
         {
           target: "_blank",
-          href: `/subscriptions/${record.subscriptionId}`,
+          href: `${PATH_SUBSCRIPTIONS}/${record.subscriptionId}`,
           children: value
         }
       ),
@@ -46165,11 +46177,11 @@ import {
 } from "@elastic/eui";
 
 // src/components/WfoBadges/WfoSubscriptionSyncStatusBadge/WfoSubscriptionSyncStatusBadge.tsx
-import { useTranslations as useTranslations15 } from "next-intl";
+import { useTranslations as useTranslations16 } from "next-intl";
 import { jsx as jsx79 } from "@emotion/react/jsx-runtime";
 var WfoSubscriptionSyncStatusBadge = ({ insync }) => {
   const { theme, toSecondaryColor } = useOrchestratorTheme();
-  const t = useTranslations15("common");
+  const t = useTranslations16("common");
   const getBadgePropertiesFromStatus = (insync2) => {
     const { danger, dangerText, success, successText } = theme.colors;
     if (insync2) {
@@ -46191,11 +46203,11 @@ var WfoSubscriptionSyncStatusBadge = ({ insync }) => {
 };
 
 // src/components/WfoError/WfoError.tsx
-import { useTranslations as useTranslations16 } from "next-intl";
+import { useTranslations as useTranslations17 } from "next-intl";
 import { EuiFlexGroup as EuiFlexGroup5 } from "@elastic/eui";
 import { jsx as jsx80, jsxs as jsxs56 } from "@emotion/react/jsx-runtime";
 var WfoError = () => {
-  const t = useTranslations16("common");
+  const t = useTranslations17("common");
   const { theme } = useOrchestratorTheme();
   return /* @__PURE__ */ jsxs56(EuiFlexGroup5, { direction: "row", alignItems: "center", gutterSize: "s", children: [
     /* @__PURE__ */ jsx80(WfoXCircleFill, { color: theme.colors.danger }),
@@ -46340,7 +46352,7 @@ var WfoSubscription = ({ subscriptionId }) => {
 
 // src/components/WfoSubscription/WfoSubscriptionActions.tsx
 import { useState as useState11 } from "react";
-import { useTranslations as useTranslations17 } from "next-intl";
+import { useTranslations as useTranslations18 } from "next-intl";
 import Link4 from "next/link";
 import { useRouter as useRouter5 } from "next/router";
 import {
@@ -46375,7 +46387,7 @@ var WfoSubscriptionActions = ({
 }) => {
   const { theme } = useOrchestratorTheme();
   const router = useRouter5();
-  const t = useTranslations17("subscriptions.detail.actions");
+  const t = useTranslations18("subscriptions.detail.actions");
   const [isPopoverOpen, setPopover] = useState11(false);
   const { data: subscriptionActions } = useGetSubscriptionActionsQuery({
     subscriptionId
@@ -46512,7 +46524,7 @@ var WfoSubscriptionActions = ({
 
 // src/components/WfoSubscription/WfoSubscriptionProductBlock/WfoSubscriptionProductBlock.tsx
 import { useState as useState12 } from "react";
-import { useTranslations as useTranslations19 } from "next-intl";
+import { useTranslations as useTranslations20 } from "next-intl";
 import {
   EuiBadge as EuiBadge2,
   EuiButtonEmpty as EuiButtonEmpty3,
@@ -46525,13 +46537,13 @@ import {
 } from "@elastic/eui";
 
 // src/components/WfoSubscription/WfoInUseByRelations.tsx
-import { useTranslations as useTranslations18 } from "next-intl";
+import { useTranslations as useTranslations19 } from "next-intl";
 import Link5 from "next/link";
 import { Fragment as Fragment14, jsx as jsx84 } from "@emotion/react/jsx-runtime";
 var WfoInUseByRelations = ({
   inUseByRelations
 }) => {
-  const t = useTranslations18("subscriptions.detail");
+  const t = useTranslations19("subscriptions.detail");
   const { inUseByRelationDetailsStyle } = useWithOrchestratorTheme(getStyles5);
   const subscriptionIds = inUseByRelations.map((relation) => relation.subscription_id).join("|");
   const { data, isLoading, isError: isError2 } = useGetInUseByRelationDetailsQuery({
@@ -46560,7 +46572,7 @@ var WfoInUseByRelations = ({
         value: /* @__PURE__ */ jsx84(
           Link5,
           {
-            href: `/${PATH_SUBSCRIPTIONS}/${inUseByRelationDetails.subscriptionId}`,
+            href: `${PATH_SUBSCRIPTIONS}/${inUseByRelationDetails.subscriptionId}`,
             target: "_blank",
             children: inUseByRelationDetails.description
           }
@@ -46606,31 +46618,36 @@ var getStyles6 = (wfoTheme) => {
     border: `dashed 1px ${theme.colors.lightShade}`
   });
   const rowStyle = css10({
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "flex-start",
+    padding: `${theme.base / 2}px 0`,
     borderBottom: `solid 1px ${theme.colors.lightShade}`,
     "&:first-child": {
       borderTop: `solid 1px ${theme.colors.lightShade}`
     }
   });
   const leftColumnStyle = css10({
-    verticalAlign: "top",
     width: 250,
-    paddingLeft: 0,
-    paddingTop: 10,
-    paddingBottom: 10
+    flexShrink: 0,
+    paddingTop: `${theme.base / 4}px`
   });
-  const rightColumnStyle = css10({
-    verticalAlign: "top",
-    paddingLeft: 0,
-    paddingTop: 10,
-    paddingBottom: 10
+  const leftColumnStyleWithAlignSelf = css10({
+    width: 250,
+    flexShrink: 0,
+    alignSelf: "center"
+  });
+  const outsideSubscriptionIdTextStyle = css10({
+    padding: `${theme.size.xs}px 0`
   });
   return {
     iconStyle,
     panelStyle,
     leftColumnStyle,
-    rightColumnStyle,
+    leftColumnStyleWithAlignSelf,
     rowStyle,
-    panelStyleOutsideCurrentSubscription
+    panelStyleOutsideCurrentSubscription,
+    outsideSubscriptionIdTextStyle
   };
 };
 
@@ -46638,24 +46655,30 @@ var getStyles6 = (wfoTheme) => {
 import { Fragment as Fragment15, jsx as jsx85, jsxs as jsxs59 } from "@emotion/react/jsx-runtime";
 var HIDDEN_KEYS = ["title", "name", "label"];
 var WfoSubscriptionProductBlock = ({
-  ownerSubscriptionId,
-  subscriptionInstanceId,
-  productBlockInstanceValues,
-  inUseByRelations,
-  isOutsideCurrentSubscription = false
+  productBlock,
+  subscriptionId
 }) => {
-  const t = useTranslations19("subscriptions.detail");
+  const t = useTranslations20("subscriptions.detail");
   const { theme } = useOrchestratorTheme();
   const {
     iconStyle,
     panelStyle,
     panelStyleOutsideCurrentSubscription,
     leftColumnStyle,
-    rightColumnStyle,
+    leftColumnStyleWithAlignSelf,
+    outsideSubscriptionIdTextStyle,
     rowStyle
   } = useWithOrchestratorTheme(getStyles6);
   const [showDetails, setShowDetails] = useState12(false);
+  const ownerSubscriptionId = productBlock.subscription.subscriptionId;
+  const isOutsideCurrentSubscription = ownerSubscriptionId !== subscriptionId;
+  const inUseByRelations = productBlock.inUseByRelations.filter(
+    (inUseByRelation) => inUseByRelation.subscription_id !== subscriptionId
+  );
   const showProductBlockValues = !isOutsideCurrentSubscription || showDetails;
+  const isEmpty2 = (value) => {
+    return value === null || value === void 0 || value === "";
+  };
   return /* @__PURE__ */ jsxs59(Fragment15, { children: [
     /* @__PURE__ */ jsx85(EuiSpacer11, { size: "m" }),
     /* @__PURE__ */ jsxs59(
@@ -46675,10 +46698,10 @@ var WfoSubscriptionProductBlock = ({
             ) }) }),
             /* @__PURE__ */ jsxs59(EuiFlexItem6, { children: [
               /* @__PURE__ */ jsx85(EuiText6, { grow: true, children: /* @__PURE__ */ jsx85("h3", { children: getProductBlockTitle(
-                productBlockInstanceValues
+                productBlock.productBlockInstanceValues
               ) }) }),
               /* @__PURE__ */ jsx85(EuiText6, { size: "s", children: getFieldFromProductBlockInstanceValues(
-                productBlockInstanceValues,
+                productBlock.productBlockInstanceValues,
                 "name"
               ) })
             ] }),
@@ -46695,28 +46718,48 @@ var WfoSubscriptionProductBlock = ({
           /* @__PURE__ */ jsx85(EuiSpacer11, { size: "m" }),
           /* @__PURE__ */ jsx85("table", { width: "100%", children: /* @__PURE__ */ jsxs59("tbody", { children: [
             isOutsideCurrentSubscription && /* @__PURE__ */ jsxs59("tr", { css: rowStyle, children: [
-              /* @__PURE__ */ jsx85("td", { css: leftColumnStyle, children: /* @__PURE__ */ jsx85("b", { children: t("ownerSubscriptionId") }) }),
-              /* @__PURE__ */ jsx85("td", { css: rightColumnStyle, children: /* @__PURE__ */ jsx85(
-                "a",
+              /* @__PURE__ */ jsx85("td", { css: leftColumnStyleWithAlignSelf, children: /* @__PURE__ */ jsx85("b", { children: t("ownerSubscriptionId") }) }),
+              /* @__PURE__ */ jsx85("td", { children: /* @__PURE__ */ jsx85(
+                WfoValueCell,
                 {
-                  href: `${PATH_SUBSCRIPTIONS}/${ownerSubscriptionId}`,
-                  target: "_blank",
-                  children: ownerSubscriptionId
+                  value: /* @__PURE__ */ jsxs59(Fragment15, { children: [
+                    /* @__PURE__ */ jsx85(
+                      "a",
+                      {
+                        href: `${PATH_SUBSCRIPTIONS}/${ownerSubscriptionId}`,
+                        target: "_blank",
+                        children: productBlock.subscription.description
+                      }
+                    ),
+                    /* @__PURE__ */ jsx85(
+                      EuiText6,
+                      {
+                        css: outsideSubscriptionIdTextStyle,
+                        children: "-"
+                      }
+                    ),
+                    getFirstUuidPart(
+                      ownerSubscriptionId
+                    )
+                  ] }),
+                  textToCopy: ownerSubscriptionId,
+                  rowNumber: -1,
+                  enableCopyIcon: true
                 }
               ) })
             ] }, -1),
             showDetails && /* @__PURE__ */ jsxs59(Fragment15, { children: [
               /* @__PURE__ */ jsxs59("tr", { css: rowStyle, children: [
                 /* @__PURE__ */ jsx85("td", { css: leftColumnStyle, children: /* @__PURE__ */ jsx85("b", { children: t("subscriptionInstanceId") }) }),
-                /* @__PURE__ */ jsx85("td", { css: rightColumnStyle, children: subscriptionInstanceId })
+                /* @__PURE__ */ jsx85("td", { children: productBlock.subscriptionInstanceId })
               ] }, -2),
               !isOutsideCurrentSubscription && /* @__PURE__ */ jsxs59("tr", { css: rowStyle, children: [
                 /* @__PURE__ */ jsx85("td", { css: leftColumnStyle, children: /* @__PURE__ */ jsx85("b", { children: t("ownerSubscriptionId") }) }),
-                /* @__PURE__ */ jsx85("td", { css: rightColumnStyle, children: /* @__PURE__ */ jsx85(Fragment15, { children: /* @__PURE__ */ jsx85(EuiBadge2, { children: t("self") }) }) })
+                /* @__PURE__ */ jsx85("td", { children: /* @__PURE__ */ jsx85(Fragment15, { children: /* @__PURE__ */ jsx85(EuiBadge2, { children: t("self") }) }) })
               ] }, -3),
               /* @__PURE__ */ jsxs59("tr", { css: rowStyle, children: [
                 /* @__PURE__ */ jsx85("td", { css: leftColumnStyle, children: /* @__PURE__ */ jsx85("b", { children: t("inUseByRelations") }) }),
-                /* @__PURE__ */ jsx85("td", { css: rightColumnStyle, children: inUseByRelations.length === 0 && "None" || /* @__PURE__ */ jsx85(
+                /* @__PURE__ */ jsx85("td", { children: inUseByRelations.length === 0 && "None" || /* @__PURE__ */ jsx85(
                   WfoInUseByRelations,
                   {
                     inUseByRelations
@@ -46724,17 +46767,33 @@ var WfoSubscriptionProductBlock = ({
                 ) })
               ] }, -4)
             ] }),
-            showProductBlockValues && productBlockInstanceValues.filter(
+            showProductBlockValues && productBlock.productBlockInstanceValues.filter(
               (productBlockInstanceValue) => !HIDDEN_KEYS.includes(
                 productBlockInstanceValue.field
               )
-            ).map((productBlockInstanceValue, index) => /* @__PURE__ */ jsx85(
-              WfoProductBlockKeyValueRow,
-              {
-                fieldValue: productBlockInstanceValue
-              },
-              index
-            ))
+            ).sort(
+              ({ field: fieldNameA }, { field: fieldNameB }) => {
+                if (fieldNameA < fieldNameB) {
+                  return -1;
+                }
+                if (fieldNameA > fieldNameB) {
+                  return 1;
+                }
+                return 0;
+              }
+            ).map((productBlockInstanceValue, index) => {
+              if (productBlockInstanceValue && !isEmpty2(
+                productBlockInstanceValue.value
+              )) {
+                return /* @__PURE__ */ jsx85(
+                  WfoProductBlockKeyValueRow,
+                  {
+                    fieldValue: productBlockInstanceValue
+                  },
+                  index
+                );
+              }
+            })
           ] }) })
         ]
       }
@@ -46747,7 +46806,7 @@ import { EuiBadge as EuiBadge3 } from "@elastic/eui";
 import { Fragment as Fragment16, jsx as jsx86, jsxs as jsxs60 } from "@emotion/react/jsx-runtime";
 var WfoProductBlockKeyValueRow = ({ fieldValue }) => {
   var _a;
-  const { leftColumnStyle, rightColumnStyle, rowStyle } = useWithOrchestratorTheme(getStyles6);
+  const { leftColumnStyle, rowStyle } = useWithOrchestratorTheme(getStyles6);
   const { getOverriddenValue } = useSubscriptionDetailValueOverride();
   const { field, value } = fieldValue;
   const WfoProductBlockValue = ({
@@ -46755,13 +46814,13 @@ var WfoProductBlockKeyValueRow = ({ fieldValue }) => {
   }) => typeof value2 === "boolean" ? /* @__PURE__ */ jsx86(EuiBadge3, { children: value2.toString() }) : /* @__PURE__ */ jsx86(Fragment16, { children: value2 });
   return /* @__PURE__ */ jsxs60("tr", { css: rowStyle, children: [
     /* @__PURE__ */ jsx86("td", { css: leftColumnStyle, children: /* @__PURE__ */ jsx86("b", { children: camelToHuman(field) }) }),
-    /* @__PURE__ */ jsx86("td", { css: rightColumnStyle, children: (_a = getOverriddenValue(fieldValue)) != null ? _a : /* @__PURE__ */ jsx86(WfoProductBlockValue, { value }) })
+    /* @__PURE__ */ jsx86("td", { children: (_a = getOverriddenValue(fieldValue)) != null ? _a : /* @__PURE__ */ jsx86(WfoProductBlockValue, { value }) })
   ] });
 };
 
 // src/components/WfoSubscription/WfoSubscriptionDetailTree.tsx
 import React19, { useState as useState13 } from "react";
-import { useTranslations as useTranslations21 } from "next-intl";
+import { useTranslations as useTranslations22 } from "next-intl";
 import { EuiCallOut, EuiFlexGroup as EuiFlexGroup10, EuiFlexItem as EuiFlexItem8, EuiText as EuiText7 } from "@elastic/eui";
 
 // src/utils/getTokenName.ts
@@ -46788,7 +46847,7 @@ import { EuiListGroup } from "@elastic/eui";
 
 // src/components/WfoTree/WfoTreeNode.tsx
 import React16 from "react";
-import { useTranslations as useTranslations20 } from "next-intl";
+import { useTranslations as useTranslations21 } from "next-intl";
 import {
   EuiFlexGroup as EuiFlexGroup9,
   EuiFlexItem as EuiFlexItem7,
@@ -46832,7 +46891,7 @@ var WfoTreeNode = ({
     treeContainerStyle,
     treeItemOtherSubscriptionStyle
   } = useWithOrchestratorTheme(getStyles7);
-  const t = useTranslations20("common");
+  const t = useTranslations21("common");
   const {
     expandedIds,
     collapseNode,
@@ -46942,7 +47001,7 @@ var WfoSubscriptionDetailTree = ({
   productBlockInstances,
   subscriptionId
 }) => {
-  const t = useTranslations21("subscriptions.detail");
+  const t = useTranslations22("subscriptions.detail");
   const [, setSelectedTreeNode] = useState13(-1);
   const { selectedIds, expandAll, collapseAll, resetSelection, selectAll } = React19.useContext(TreeContext);
   let tree = null;
@@ -46955,7 +47014,7 @@ var WfoSubscriptionDetailTree = ({
       callback: () => {
       },
       children: [],
-      isOutsideCurrentSubscription: productBlockInstance.ownerSubscriptionId !== subscriptionId
+      isOutsideCurrentSubscription: productBlockInstance.subscription.subscriptionId !== subscriptionId
     });
     if (shallowCopy2.parent === null) {
       shallowCopy2.label = getProductBlockTitle(
@@ -47039,18 +47098,11 @@ var WfoSubscriptionDetailTree = ({
       ),
       selectedIds.length !== 0 && selectedIds.map((id, index) => {
         const block = idToNodeMap[selectedIds[index]];
-        const inUseByRelationsWithoutCurrentSubscription = block.inUseByRelations.filter(
-          (inUseByRelation) => inUseByRelation.subscription_id !== subscriptionId
-        );
         return /* @__PURE__ */ jsx90(
           WfoSubscriptionProductBlock,
           {
-            ownerSubscriptionId: block.ownerSubscriptionId,
-            subscriptionInstanceId: block.subscriptionInstanceId,
-            productBlockInstanceValues: block.productBlockInstanceValues,
-            inUseByRelations: inUseByRelationsWithoutCurrentSubscription,
-            isOutsideCurrentSubscription: block.isOutsideCurrentSubscription,
-            id
+            subscriptionId,
+            productBlock: block
           },
           index
         );
@@ -47060,7 +47112,7 @@ var WfoSubscriptionDetailTree = ({
 };
 
 // src/components/WfoSubscription/WfoSubscriptionGeneral.tsx
-import { useTranslations as useTranslations22 } from "next-intl";
+import { useTranslations as useTranslations23 } from "next-intl";
 import { EuiFlexGrid, EuiFlexItem as EuiFlexItem9 } from "@elastic/eui";
 
 // src/components/WfoSubscription/WfoCustomerDescriptionsField.tsx
@@ -47114,7 +47166,7 @@ import { jsx as jsx92 } from "@emotion/react/jsx-runtime";
 var WfoSubscriptionGeneral = ({
   subscriptionDetail
 }) => {
-  const t = useTranslations22("subscriptions.detail");
+  const t = useTranslations23("subscriptions.detail");
   const { overrideSections } = useSubscriptionDetailGeneralSectionConfigurationOverride();
   const hasCustomerDescriptions = subscriptionDetail.customerDescriptions.length > 0;
   const getSubscriptionDetailBlockData = () => {
@@ -47427,6 +47479,7 @@ var WfoDataGridTable = ({
 
 // src/components/WfoTable/WfoTableSettingsModal/WfoTableSettingsModal.tsx
 import { useState as useState15 } from "react";
+import { useTranslations as useTranslations24 } from "next-intl";
 import {
   EuiForm,
   EuiFormRow as EuiFormRow2,
@@ -47462,6 +47515,7 @@ var TableSettingsModal = ({
   onResetToDefaults,
   onClose
 }) => {
+  const t = useTranslations24("main");
   const { formRowStyle, selectFieldStyle } = useWithOrchestratorTheme(
     getWfoTableSettingsModalStyles
   );
@@ -47484,7 +47538,7 @@ var TableSettingsModal = ({
   return /* @__PURE__ */ jsx94(
     WfoSettingsModal,
     {
-      title: "Table settings",
+      title: t("tableSettings"),
       onClose,
       onResetToDefaults,
       onUpdateTableConfig: () => onUpdateTableConfig({
@@ -47521,7 +47575,7 @@ var TableSettingsModal = ({
           {
             css: formRowStyle,
             hasEmptyLabelSpace: true,
-            label: "Number of Rows",
+            label: t("numberOfRows"),
             display: "columnCompressed",
             children: /* @__PURE__ */ jsx94(
               EuiSelect,
@@ -47616,7 +47670,7 @@ var getQueryStringHandler = (setDataDisplayParam) => (queryString) => {
 };
 
 // src/components/WfoTable/WfoBasicTable/WfoBasicTable.tsx
-import { useTranslations as useTranslations23 } from "next-intl";
+import { useTranslations as useTranslations25 } from "next-intl";
 import { EuiBasicTable } from "@elastic/eui";
 
 // src/components/WfoTable/WfoBasicTable/styles.ts
@@ -47738,7 +47792,7 @@ var WfoBasicTable = ({
   const { basicTableStyle } = useWithOrchestratorTheme(
     getWfoBasicTableStyles
   );
-  const t = useTranslations23("common");
+  const t = useTranslations25("common");
   const statusColorColumn = {
     statusColorField: {
       field: WFO_STATUS_COLOR_FIELD,
@@ -47846,7 +47900,7 @@ var WfoSortDirectionIcon = ({
 
 // src/components/WfoTable/WfoBasicTable/WfoTableHeaderCell.tsx
 import { useState as useState16 } from "react";
-import { useTranslations as useTranslations24 } from "next-intl";
+import { useTranslations as useTranslations26 } from "next-intl";
 import {
   EuiFieldSearch as EuiFieldSearch2,
   EuiHorizontalRule as EuiHorizontalRule2,
@@ -47940,7 +47994,7 @@ var WfoTableHeaderCell = ({
     headerCellPopoverContentStyle,
     getHeaderCellButtonStyle
   } = useWithOrchestratorTheme(getWfoBasicTableStyles);
-  const t = useTranslations24("common");
+  const t = useTranslations26("common");
   const isSortable = !!onSetSortOrder;
   const isFilterable = !!onSearch;
   const shouldShowPopover = isSortable || isFilterable;
@@ -48021,7 +48075,7 @@ var WfoStatusColorField = ({ color }) => {
 
 // src/components/WfoTable/WfoTableWithFilter/WfoTableWithFilter.tsx
 import { useEffect as useEffect7, useState as useState17 } from "react";
-import { useTranslations as useTranslations25 } from "next-intl";
+import { useTranslations as useTranslations27 } from "next-intl";
 import {
   EuiButton as EuiButton8,
   EuiButtonIcon as EuiButtonIcon3,
@@ -48088,12 +48142,11 @@ var WfoTableWithFilter = ({
 }) => {
   var _a, _b;
   const { theme } = useOrchestratorTheme();
-  const defaultPageSize = pagination.pageSize;
   const [hiddenColumns, setHiddenColumns] = useState17(defaultHiddenColumns);
   const [showSettingsModal, setShowSettingsModal] = useState17(false);
   const [selectedDataForDetailModal, setSelectedDataForDetailModal] = useState17(void 0);
   const [showSearchModal, setShowSearchModal] = useState17(false);
-  const t = useTranslations25("common");
+  const t = useTranslations27("common");
   useEffect7(() => {
     if (defaultHiddenColumns) {
       setHiddenColumns(defaultHiddenColumns);
@@ -48153,12 +48206,14 @@ var WfoTableWithFilter = ({
     });
   };
   const handleResetToDefaults = () => {
-    setHiddenColumns(defaultHiddenColumns);
+    var _a2;
+    const defaultTableConfig = getDefaultTableConfig(localStorageKey);
+    setHiddenColumns(defaultTableConfig.hiddenColumns);
     setShowSettingsModal(false);
     clearTableConfigFromLocalStorage(localStorageKey);
     onUpdatePage({
       index: 0,
-      size: defaultPageSize != null ? defaultPageSize : DEFAULT_PAGE_SIZE
+      size: (_a2 = defaultTableConfig.selectedPageSize) != null ? _a2 : DEFAULT_PAGE_SIZE
     });
   };
   const onCriteriaChange = (criterion) => {
@@ -48562,7 +48617,7 @@ var import_cloneDeep2 = __toESM(require_cloneDeep(), 1);
 var import_get4 = __toESM(require_get(), 1);
 import { useContext as useContext5, useState as useState26 } from "react";
 import invariant from "invariant";
-import { useTranslations as useTranslations39 } from "next-intl";
+import { useTranslations as useTranslations41 } from "next-intl";
 import { filterDOMProps as filterDOMProps27, joinName as joinName10 } from "uniforms";
 import { JSONSchemaBridge } from "uniforms-bridge-json-schema";
 import { AutoField as AutoField6, AutoForm } from "uniforms-unstyled";
@@ -48577,7 +48632,7 @@ import { AutoField as AutoField5 } from "uniforms-unstyled";
 
 // src/components/WfoForms/formFields/AcceptField.tsx
 import { useReducer } from "react";
-import { useTranslations as useTranslations26 } from "next-intl";
+import { useTranslations as useTranslations28 } from "next-intl";
 import { connectField, filterDOMProps } from "uniforms";
 import { EuiCheckbox, EuiFlexItem as EuiFlexItem12, EuiText as EuiText10 } from "@elastic/eui";
 
@@ -48631,7 +48686,7 @@ function Accept(_a) {
     "errorMessage",
     "data"
   ]);
-  const t = useTranslations26();
+  const t = useTranslations28();
   const { acceptFieldStyle } = useWithOrchestratorTheme(getStyles11);
   const legacy = !data;
   const i18nBaseKey = data ? `pydanticForms.backendTranslations.${name}_accept` : "pydanticForms.backendTranslations";
@@ -48972,7 +49027,7 @@ var LabelField = connectField5(Label, { kind: "leaf" });
 
 // src/components/WfoForms/formFields/ListAddField.tsx
 var import_cloneDeep = __toESM(require_cloneDeep(), 1);
-import { useTranslations as useTranslations27 } from "next-intl";
+import { useTranslations as useTranslations29 } from "next-intl";
 import { connectField as connectField6, filterDOMProps as filterDOMProps6, joinName, useField } from "uniforms";
 import { EuiIcon as EuiIcon3, EuiText as EuiText12 } from "@elastic/eui";
 import { jsx as jsx113, jsxs as jsxs70 } from "@emotion/react/jsx-runtime";
@@ -48993,7 +49048,7 @@ function ListAdd(_a) {
     "outerList"
   ]);
   const { theme } = useOrchestratorTheme();
-  const t = useTranslations27("pydanticForms.backendTranslations");
+  const t = useTranslations29("pydanticForms.backendTranslations");
   const nameParts = joinName(null, name);
   const parentName = joinName(nameParts.slice(0, -1));
   const parent = useField(parentName, { initialCount }, { absoluteName: true })[0];
@@ -49034,7 +49089,7 @@ var ListAddField = connectField6(ListAdd, {
 });
 
 // src/components/WfoForms/formFields/ListDelField.tsx
-import { useTranslations as useTranslations28 } from "next-intl";
+import { useTranslations as useTranslations30 } from "next-intl";
 import { connectField as connectField7, filterDOMProps as filterDOMProps7, joinName as joinName2, useField as useField2 } from "uniforms";
 import { EuiIcon as EuiIcon4, EuiText as EuiText13 } from "@elastic/eui";
 import { jsx as jsx114, jsxs as jsxs71 } from "@emotion/react/jsx-runtime";
@@ -49053,7 +49108,7 @@ function ListDel(_a) {
     "outerList"
   ]);
   const { theme } = useOrchestratorTheme();
-  const t = useTranslations28("pydanticForms.backendTranslations");
+  const t = useTranslations30("pydanticForms.backendTranslations");
   const nameParts = joinName2(null, name);
   const nameIndex = +nameParts[nameParts.length - 1];
   const parentName = joinName2(nameParts.slice(0, -1));
@@ -49303,7 +49358,7 @@ import { joinName as joinName5, useField as useField5, useForm as useForm4 } fro
 // src/components/WfoForms/formFields/SelectField/SelectField.tsx
 var import_lodash2 = __toESM(require_lodash(), 1);
 import ReactSelect from "react-select";
-import { useTranslations as useTranslations29 } from "next-intl";
+import { useTranslations as useTranslations31 } from "next-intl";
 import { joinName as joinName4, useField as useField4, useForm as useForm3 } from "uniforms";
 import { EuiFormRow as EuiFormRow5, EuiText as EuiText15 } from "@elastic/eui";
 
@@ -49380,7 +49435,7 @@ function UnconnectedSelectField(_a) {
     "showInlineError",
     "errorMessage"
   ]);
-  const t = useTranslations29("pydanticForms");
+  const t = useTranslations31("pydanticForms");
   const nameArray = joinName4(null, name);
   let parentName = joinName4(nameArray.slice(0, -1));
   if (parentName === "") {
@@ -49931,7 +49986,7 @@ var DateField = connectField15(Date2, { kind: "leaf" });
 
 // src/components/WfoForms/formFields/LocationCodeField.tsx
 import { useEffect as useEffect8, useState as useState18 } from "react";
-import { useTranslations as useTranslations30 } from "next-intl";
+import { useTranslations as useTranslations32 } from "next-intl";
 import { connectField as connectField16, filterDOMProps as filterDOMProps16 } from "uniforms";
 
 // src/rtk/endpoints/formFields.ts
@@ -50044,7 +50099,7 @@ import { jsx as jsx126 } from "@emotion/react/jsx-runtime";
 filterDOMProps16.register("locationCodes");
 function LocationCode(_a) {
   var _b = _a, { locationCodes } = _b, props = __objRest(_b, ["locationCodes"]);
-  const t = useTranslations30("pydanticForms");
+  const t = useTranslations32("pydanticForms");
   const [codes, setCodes] = useState18(locationCodes != null ? locationCodes : []);
   const { data, error } = useLocationCodesQuery();
   useEffect8(() => {
@@ -50226,7 +50281,7 @@ var ContactPersonAutocomplete = ({
 var import_lodash5 = __toESM(require_lodash(), 1);
 var import_get = __toESM(require_get(), 1);
 import React27, { useEffect as useEffect10, useState as useState19 } from "react";
-import { useTranslations as useTranslations31 } from "next-intl";
+import { useTranslations as useTranslations33 } from "next-intl";
 import {
   connectField as connectField17,
   filterDOMProps as filterDOMProps17,
@@ -50286,7 +50341,7 @@ function ContactPersonName(_a) {
   const { formFieldBaseStyle } = useWithOrchestratorTheme(
     getFormFieldsBaseStyle
   );
-  const t = useTranslations31("pydanticForms");
+  const t = useTranslations33("pydanticForms");
   const { model, onChange: formOnChange, schema } = useForm6();
   const contactsPersonFieldNameArray = joinName6(null, name).slice(0, -1);
   const emailFieldName = joinName6(contactsPersonFieldNameArray, "email");
@@ -50426,7 +50481,7 @@ var ContactPersonNameField = connectField17(ContactPersonName, {
 // src/components/WfoForms/formFields/deprecated/ImsNodeIdField.tsx
 var import_lodash6 = __toESM(require_lodash(), 1);
 import { useEffect as useEffect11, useState as useState20 } from "react";
-import { useTranslations as useTranslations32 } from "next-intl";
+import { useTranslations as useTranslations34 } from "next-intl";
 import { connectField as connectField18, filterDOMProps as filterDOMProps18 } from "uniforms";
 import { jsx as jsx129 } from "@emotion/react/jsx-runtime";
 filterDOMProps18.register("locationCode", "status", "unsubscribedOnly");
@@ -50445,7 +50500,7 @@ function ImsNodeId(_a) {
     "unsubscribedOnly"
   ]);
   var _a2;
-  const t = useTranslations32("pydanticForms");
+  const t = useTranslations34("pydanticForms");
   const [nodes, setNodes] = useState20([]);
   const { data, isLoading, error } = useImsNodesQuery(
     {
@@ -50486,7 +50541,7 @@ var ImsNodeIdField = connectField18(ImsNodeId, { kind: "leaf" });
 // src/components/WfoForms/formFields/deprecated/ImsPortIdField.tsx
 import { useCallback as useCallback3, useEffect as useEffect12, useState as useState21 } from "react";
 import ReactSelect2 from "react-select";
-import { useTranslations as useTranslations33 } from "next-intl";
+import { useTranslations as useTranslations35 } from "next-intl";
 import { connectField as connectField19, filterDOMProps as filterDOMProps19 } from "uniforms";
 import { EuiFlexItem as EuiFlexItem16, EuiFormRow as EuiFormRow12, EuiText as EuiText22 } from "@elastic/eui";
 
@@ -50561,7 +50616,7 @@ function ImsPortId(_a) {
     nodeSubscriptionId
   );
   const [ports, setPorts] = useState21([]);
-  const t = useTranslations33("pydanticForms");
+  const t = useTranslations35("pydanticForms");
   const { reactSelectInnerComponentStyles } = useWithOrchestratorTheme(getSelectFieldStyles);
   const {
     data: freePorts,
@@ -50669,7 +50724,7 @@ var ImsPortIdField = connectField19(ImsPortId, { kind: "leaf" });
 
 // src/components/WfoForms/formFields/deprecated/IpNetworkField.tsx
 import { useState as useState24 } from "react";
-import { useTranslations as useTranslations34 } from "next-intl";
+import { useTranslations as useTranslations36 } from "next-intl";
 import { connectField as connectField20, filterDOMProps as filterDOMProps20 } from "uniforms";
 import { EuiCallOut as EuiCallOut2, EuiFormRow as EuiFormRow14, EuiText as EuiText24 } from "@elastic/eui";
 
@@ -51178,7 +51233,7 @@ function IpNetwork(_a) {
   ]);
   var _a2, _b2;
   const { formRowStyle } = useWithOrchestratorTheme(getCommonFormFieldStyles);
-  const t = useTranslations34("pydanticForms");
+  const t = useTranslations36("pydanticForms");
   const [selectedPrefix, setSelectedPrefix] = useState24(
     void 0
   );
@@ -51456,7 +51511,7 @@ var TimestampField = connectField21(Timestamp, { kind: "leaf" });
 // src/components/WfoForms/formFields/deprecated/VlanField.tsx
 var import_get2 = __toESM(require_get(), 1);
 import { useEffect as useEffect15, useState as useState25 } from "react";
-import { useTranslations as useTranslations35 } from "next-intl";
+import { useTranslations as useTranslations37 } from "next-intl";
 import { connectField as connectField22, filterDOMProps as filterDOMProps22, joinName as joinName7, useForm as useForm7 } from "uniforms";
 import { EuiFieldText as EuiFieldText4, EuiFormRow as EuiFormRow16, EuiText as EuiText26 } from "@elastic/eui";
 
@@ -51556,7 +51611,7 @@ function Vlan(_a) {
     "subscriptionFieldName",
     "nsiVlansOnly"
   ]);
-  const t = useTranslations35("pydanticForms");
+  const t = useTranslations37("pydanticForms");
   const { model, schema } = useForm7();
   const initialValue = schema.getInitialValue(name, {});
   const nameArray = joinName7(null, name);
@@ -51748,7 +51803,7 @@ function Nest(_a) {
 var NestField = connectField23(Nest);
 
 // src/components/WfoForms/formFields/OptGroupField.tsx
-import { useTranslations as useTranslations36 } from "next-intl";
+import { useTranslations as useTranslations38 } from "next-intl";
 import { connectField as connectField24, filterDOMProps as filterDOMProps24, useField as useField7 } from "uniforms";
 import { AutoField as AutoField4 } from "uniforms-unstyled";
 import { EuiDescribedFormGroup as EuiDescribedFormGroup2, EuiFlexItem as EuiFlexItem20, EuiFormRow as EuiFormRow17 } from "@elastic/eui";
@@ -51768,7 +51823,7 @@ function OptGroup(_a) {
     "readOnly",
     "className"
   ]);
-  const t = useTranslations36("pydanticForms.backendTranslations");
+  const t = useTranslations38("pydanticForms.backendTranslations");
   const enabled = useField7("enabled", {})[0].value;
   return /* @__PURE__ */ jsx137(
     EuiDescribedFormGroup2,
@@ -51796,7 +51851,7 @@ var OptGroupField = connectField24(OptGroup);
 // src/components/WfoForms/formFields/SubscriptionField.tsx
 var import_get3 = __toESM(require_get(), 1);
 import ReactSelect5 from "react-select";
-import { useTranslations as useTranslations37 } from "next-intl";
+import { useTranslations as useTranslations39 } from "next-intl";
 import {
   connectField as connectField25,
   filterDOMProps as filterDOMProps25,
@@ -51931,7 +51986,7 @@ function SubscriptionFieldDefinition(_a) {
     "tags",
     "statuses"
   ]);
-  const t = useTranslations37("pydanticForms");
+  const t = useTranslations39("pydanticForms");
   const { reactSelectInnerComponentStyles } = useWithOrchestratorTheme(getSelectFieldStyles);
   const { refetch, subscriptions, isFetching } = useGetSubscriptionDropdownOptions(tags, statuses);
   const nameArray = joinName9(null, name);
@@ -52204,12 +52259,12 @@ function Summary(_a) {
 var SummaryField = connectField26(Summary, { kind: "leaf" });
 
 // src/components/WfoForms/formFields/CustomerField.tsx
-import { useTranslations as useTranslations38 } from "next-intl";
+import { useTranslations as useTranslations40 } from "next-intl";
 import { connectField as connectField27 } from "uniforms";
 import { jsx as jsx140 } from "@emotion/react/jsx-runtime";
 function Customer2(_a) {
   var props = __objRest(_a, []);
-  const t = useTranslations38("pydanticForms");
+  const t = useTranslations40("pydanticForms");
   const { data: customers, isLoading } = useGetCustomersQuery();
   const uuidCustomerNameMap = /* @__PURE__ */ new Map();
   if (!isLoading && customers) {
@@ -52641,7 +52696,7 @@ function WfoUserInputForm({
   isResuming = false
 }) {
   var _a, _b, _c;
-  const t = useTranslations39("pydanticForms.userInputForm");
+  const t = useTranslations41("pydanticForms.userInputForm");
   const { theme } = useOrchestratorTheme();
   const { showConfirmDialog } = useContext5(ConfirmationDialogContext);
   const [processing, setProcessing] = useState26(false);
@@ -52789,7 +52844,7 @@ function WfoUserInputForm({
     prefilledForm,
     () => {
     },
-    useTranslations39()
+    useTranslations41()
   );
   const AutoFieldProvider = AutoField6.componentDetectorContext.Provider;
   const buttonsFromSchema = ((_a = prefilledForm.properties) == null ? void 0 : _a.buttons) && ((_b = prefilledForm.properties) == null ? void 0 : _b.buttons) !== true && ((_c = prefilledForm.properties) == null ? void 0 : _c.buttons.default) || {
@@ -53010,10 +53065,10 @@ var WfoDateTime = ({ dateOrIsoString }) => {
 };
 
 // src/components/WfoAuth/WfoPageUnauthorized.tsx
-import { useTranslations as useTranslations40 } from "next-intl";
+import { useTranslations as useTranslations42 } from "next-intl";
 import { jsx as jsx146 } from "@emotion/react/jsx-runtime";
 var WfoPageUnauthorized = () => {
-  const t = useTranslations40("common");
+  const t = useTranslations42("common");
   return /* @__PURE__ */ jsx146("p", { children: t("unauthorizedPage") });
 };
 
@@ -53117,16 +53172,16 @@ var WfoDropdownButton = ({
 };
 
 // src/components/WfoProcessList/WfoProcessesList.tsx
-import { useTranslations as useTranslations59 } from "next-intl";
+import { useTranslations as useTranslations61 } from "next-intl";
 import Link9 from "next/link";
 
 // src/pages/metadata/WfoProductBlocksPage.tsx
 import { useEffect as useEffect18, useState as useState30 } from "react";
-import { useTranslations as useTranslations42 } from "next-intl";
+import { useTranslations as useTranslations44 } from "next-intl";
 import { EuiBadgeGroup as EuiBadgeGroup3 } from "@elastic/eui";
 
 // src/pages/metadata/WfoMetadataPageLayout.tsx
-import { useTranslations as useTranslations41 } from "next-intl";
+import { useTranslations as useTranslations43 } from "next-intl";
 import { useRouter as useRouter7 } from "next/router";
 import { EuiPageHeader, EuiSpacer as EuiSpacer14, EuiTab as EuiTab2, EuiTabs as EuiTabs2 } from "@elastic/eui";
 import { Fragment as Fragment30, jsx as jsx151, jsxs as jsxs86 } from "@emotion/react/jsx-runtime";
@@ -53162,7 +53217,7 @@ var WfoMetadataPageLayout = ({
   tabs = metaDataTabs
 }) => {
   const router = useRouter7();
-  const t = useTranslations41("metadata");
+  const t = useTranslations43("metadata");
   const currentPath = router.pathname;
   return /* @__PURE__ */ jsxs86(Fragment30, { children: [
     /* @__PURE__ */ jsx151(EuiSpacer14, {}),
@@ -53195,8 +53250,8 @@ var PRODUCT_BLOCK_FIELD_RESOURCE_TYPES = "resourceTypes";
 var PRODUCT_BLOCK_FIELD_PRODUCT_BLOCKS = "dependsOn";
 var WfoProductBlocksPage = () => {
   var _a, _b, _c;
-  const t = useTranslations42("metadata.productBlocks");
-  const tError = useTranslations42("errors");
+  const t = useTranslations44("metadata.productBlocks");
+  const tError = useTranslations44("errors");
   const { showToastMessage } = useShowToastMessage();
   const [tableDefaults, setTableDefaults] = useState30();
   const getStoredTableConfig = useStoredTableConfig(
@@ -53372,7 +53427,7 @@ var WfoProductBlocksPage = () => {
 
 // src/pages/metadata/WfoResourceTypesPage.tsx
 import { useEffect as useEffect19, useState as useState31 } from "react";
-import { useTranslations as useTranslations43 } from "next-intl";
+import { useTranslations as useTranslations45 } from "next-intl";
 import { EuiBadgeGroup as EuiBadgeGroup4 } from "@elastic/eui";
 import { Fragment as Fragment32, jsx as jsx153 } from "@emotion/react/jsx-runtime";
 var RESOURCE_TYPE_FIELD_ID = "resourceTypeId";
@@ -53381,8 +53436,8 @@ var RESOURCE_TYPE_FIELD_DESCRIPTION = "description";
 var RESOURCE_TYPE_FIELD_PRODUCT_BLOCKS = "productBlocks";
 var WfoResourceTypesPage = () => {
   var _a, _b;
-  const t = useTranslations43("metadata.resourceTypes");
-  const tError = useTranslations43("errors");
+  const t = useTranslations45("metadata.resourceTypes");
+  const tError = useTranslations45("errors");
   const { showToastMessage } = useShowToastMessage();
   const [tableDefaults, setTableDefaults] = useState31();
   const getStoredTableConfig = useStoredTableConfig(
@@ -53519,7 +53574,7 @@ var WfoResourceTypesPage = () => {
 
 // src/pages/metadata/WfoProductsPage.tsx
 import { useEffect as useEffect20, useState as useState32 } from "react";
-import { useTranslations as useTranslations44 } from "next-intl";
+import { useTranslations as useTranslations46 } from "next-intl";
 import { Fragment as Fragment33, jsx as jsx154 } from "@emotion/react/jsx-runtime";
 var PRODUCT_FIELD_PRODUCT_ID = "productId";
 var PRODUCT_FIELD_NAME = "name";
@@ -53532,8 +53587,8 @@ var PRODUCT_FIELD_FIXED_INPUTS = "fixedInputs";
 var PRODUCT_FIELD_CREATED_AT = "createdAt";
 var WfoProductsPage = () => {
   var _a, _b, _c, _d;
-  const t = useTranslations44("metadata.products");
-  const tError = useTranslations44("errors");
+  const t = useTranslations46("metadata.products");
+  const tError = useTranslations46("errors");
   const { showToastMessage } = useShowToastMessage();
   const [tableDefaults, setTableDefaults] = useState32();
   const getStoredTableConfig = useStoredTableConfig(
@@ -53717,7 +53772,7 @@ var WfoProductsPage = () => {
 
 // src/pages/metadata/WfoWorkflowsPage.tsx
 import { useEffect as useEffect21, useState as useState33 } from "react";
-import { useTranslations as useTranslations45 } from "next-intl";
+import { useTranslations as useTranslations47 } from "next-intl";
 import { EuiBadgeGroup as EuiBadgeGroup5 } from "@elastic/eui";
 
 // src/pages/metadata/workflowListObjectMapper.ts
@@ -53752,8 +53807,8 @@ var graphQlWorkflowListMapper = ({
 import { Fragment as Fragment34, jsx as jsx155 } from "@emotion/react/jsx-runtime";
 var WfoWorkflowsPage = () => {
   var _a, _b;
-  const t = useTranslations45("metadata.workflows");
-  const tError = useTranslations45("errors");
+  const t = useTranslations47("metadata.workflows");
+  const tError = useTranslations47("errors");
   const { showToastMessage } = useShowToastMessage();
   const [tableDefaults, setTableDefaults] = useState33();
   const getStoredTableConfig = useStoredTableConfig(
@@ -53904,7 +53959,7 @@ var WfoWorkflowsPage = () => {
 
 // src/pages/metadata/WfoTasksPage.tsx
 import { useEffect as useEffect22, useState as useState34 } from "react";
-import { useTranslations as useTranslations46 } from "next-intl";
+import { useTranslations as useTranslations48 } from "next-intl";
 import { EuiBadgeGroup as EuiBadgeGroup6 } from "@elastic/eui";
 
 // src/pages/metadata/taskListObjectMapper.ts
@@ -53939,8 +53994,8 @@ var graphQlTaskListMapper = ({
 import { Fragment as Fragment35, jsx as jsx156 } from "@emotion/react/jsx-runtime";
 var WfoTasksPage = () => {
   var _a, _b;
-  const t = useTranslations46("metadata.tasks");
-  const tError = useTranslations46("errors");
+  const t = useTranslations48("metadata.tasks");
+  const tError = useTranslations48("errors");
   const { showToastMessage } = useShowToastMessage();
   const [tableDefaults, setTableDefaults] = useState34();
   const getStoredTableConfig = useStoredTableConfig(
@@ -54136,7 +54191,7 @@ var WfoProcessListSubscriptionsCell = ({
 };
 
 // src/pages/processes/WfoProcessDetailPage.tsx
-import { useEffect as useEffect25, useRef as useRef7, useState as useState39 } from "react";
+import { useRef as useRef6 } from "react";
 
 // src/rtk/endpoints/processDetail.ts
 import { signOut as signOut3 } from "next-auth/react";
@@ -54195,6 +54250,17 @@ var processDetailApi = orchestratorApi.injectEndpoints({
         return {
           processes
         };
+      },
+      providesTags: (result, error, queryArguments) => {
+        if (!error && result) {
+          return [
+            {
+              type: "processes" /* processes */,
+              id: queryArguments.processId
+            }
+          ];
+        }
+        return [];
       }
     }),
     getRawProcessDetail: builder.query({
@@ -54218,7 +54284,7 @@ var processDetailApi = orchestratorApi.injectEndpoints({
       extraOptions: {
         baseQueryType: "fetch" /* fetch */
       },
-      invalidatesTags: ["processList" /* processList */]
+      invalidatesTags: ["processes" /* processes */]
     }),
     retryProcess: builder.mutation({
       query: ({ processId }) => ({
@@ -54233,7 +54299,7 @@ var processDetailApi = orchestratorApi.injectEndpoints({
       extraOptions: {
         baseQueryType: "fetch" /* fetch */
       },
-      invalidatesTags: ["processList" /* processList */]
+      invalidatesTags: ["processes" /* processes */]
     }),
     deleteProcess: builder.mutation({
       query: ({ processId }) => ({
@@ -54244,7 +54310,7 @@ var processDetailApi = orchestratorApi.injectEndpoints({
       extraOptions: {
         baseQueryType: "fetch" /* fetch */
       },
-      invalidatesTags: ["processList" /* processList */]
+      invalidatesTags: ["processes" /* processes */]
     }),
     abortProcess: builder.mutation({
       query: ({ processId }) => ({
@@ -54255,7 +54321,7 @@ var processDetailApi = orchestratorApi.injectEndpoints({
       extraOptions: {
         baseQueryType: "fetch" /* fetch */
       },
-      invalidatesTags: ["processList" /* processList */]
+      invalidatesTags: ["processes" /* processes */]
     })
   })
 });
@@ -54268,1403 +54334,1386 @@ var {
   useAbortProcessMutation
 } = processDetailApi;
 
-// src/components/WfoWorkflowSteps/WfoStep/WfoStep.tsx
-import React45 from "react";
-import { useTranslations as useTranslations47 } from "next-intl";
-import { EuiFlexGroup as EuiFlexGroup17, EuiFlexItem as EuiFlexItem25, EuiPanel as EuiPanel4, EuiText as EuiText30 } from "@elastic/eui";
-
-// src/components/WfoWorkflowSteps/WfoStepStatusIcon/WfoStepStatusIcon.tsx
-import { EuiFlexItem as EuiFlexItem23 } from "@elastic/eui";
+// src/pages/processes/WfoProcessDetail.tsx
+import { useContext as useContext7 } from "react";
+import { useTranslations as useTranslations49 } from "next-intl";
+import { useRouter as useRouter8 } from "next/router";
+import {
+  EuiButton as EuiButton11,
+  EuiFlexGroup as EuiFlexGroup17,
+  EuiFlexItem as EuiFlexItem23,
+  EuiPageHeader as EuiPageHeader2,
+  EuiPanel as EuiPanel4,
+  EuiSpacer as EuiSpacer15,
+  EuiText as EuiText30
+} from "@elastic/eui";
 
-// src/components/WfoWorkflowSteps/styles.ts
-import { css as css27 } from "@emotion/react";
-var getStyles14 = ({ theme, toSecondaryColor }) => {
-  const stepSpacerStyle = css27({
-    borderLeft: `1px solid ${theme.colors.darkShade}`,
-    height: "24px",
-    marginLeft: "36px"
-  });
-  const stepRowStyle = css27({
-    flexGrow: 1,
-    alignItems: "center",
-    justifyContent: "flex-end"
-  });
-  const stepListHeaderStyle = css27({
-    marginBottom: "24px",
-    marginTop: "60px",
-    alignItems: "flex-end"
-  });
-  const stepListContentStyle = css27({
-    flexDirection: "row",
-    alignItems: "center"
-  });
-  const stepListContentBoldTextStyle = css27({
-    fontSize: theme.size.base,
-    fontWeight: theme.font.weight.bold
-  });
-  const stepListContentAnchorStyle = css27({
-    marginTop: 2,
-    marginLeft: 0,
-    fontSize: theme.size.m,
-    fontWeight: theme.font.weight.bold,
-    color: theme.colors.link,
-    cursor: "pointer"
-  });
-  const stepListOptionsContainerStyle = css27({
-    flexGrow: 0
-  });
-  const stepStateIcon = {
-    height: "40px",
-    width: "40px",
-    alignItems: "center",
-    display: "flex",
-    justifyContent: "center",
-    borderRadius: "24px"
-  };
-  const stepDurationStyle = {
-    fontSize: theme.size.m,
-    color: theme.colors.disabled,
-    fontWeight: theme.font.weight.semiBold
-  };
-  const stepStateSuccessIconStyle = css27(__spreadProps(__spreadValues({}, stepStateIcon), {
-    backgroundColor: toSecondaryColor(theme.colors.primary)
-  }));
-  const stepStateSuspendIconStyle = css27(__spreadProps(__spreadValues({}, stepStateIcon), {
-    backgroundColor: toSecondaryColor(theme.colors.warning)
-  }));
-  const stepStatePendingIconStyle = css27(__spreadProps(__spreadValues({}, stepStateIcon), {
-    backgroundColor: toSecondaryColor(theme.colors.darkShade)
-  }));
-  const stepStateFailedIconStyle = css27(__spreadProps(__spreadValues({}, stepStateIcon), {
-    backgroundColor: toSecondaryColor(theme.colors.danger)
-  }));
-  const stepHeaderRightStyle = css27({
-    alignItems: "center"
-  });
-  const stepEmailContainerStyle = css27({
-    paddingLeft: 24,
-    width: 600,
-    marginTop: 0
-  });
-  const getStepHeaderStyle = (isClickable) => css27({
-    gap: 0,
-    alignItems: "center",
-    cursor: isClickable ? "pointer" : "default"
-  });
-  const getStepToggleExpandStyle = (isVisible) => css27({
-    marginRight: theme.base / 2,
-    visibility: isVisible ? "visible" : "hidden"
-  });
-  return {
-    stepDurationStyle,
-    stepEmailContainerStyle,
-    stepHeaderRightStyle,
-    stepListContentAnchorStyle,
-    stepListContentBoldTextStyle,
-    stepListContentStyle,
-    stepListHeaderStyle,
-    stepListOptionsContainerStyle,
-    stepRowStyle,
-    stepSpacerStyle,
-    stepStateFailedIconStyle,
-    stepStatePendingIconStyle,
-    stepStateSuccessIconStyle,
-    stepStateSuspendIconStyle,
-    getStepHeaderStyle,
-    getStepToggleExpandStyle
+// src/pages/processes/timelineUtils.ts
+var getMostAccurateTimelineStatus = (statusPreviousStep, statusCurrentStep) => statusCurrentStep !== "pending" /* PENDING */ ? statusCurrentStep : statusPreviousStep;
+var isNonRetryableState = (status) => {
+  return status === "complete" /* COMPLETE */ || status === "success" /* SUCCESS */ || status === "skipped" /* SKIPPED */;
+};
+var isFailedStep = (step) => step.status === "failed" /* FAILED */;
+var stepsShouldBeMerged = (previousStep, currentStep) => !isNonRetryableState(previousStep.status) && previousStep.name === currentStep.name;
+var convertStepsToGroupedSteps = (steps) => steps.reduce(
+  (previousGroupedSteps, currentStep, index, allSteps) => {
+    const previousGroupedStep = previousGroupedSteps.slice(-1)[0];
+    if (index > 0 && stepsShouldBeMerged(allSteps[index - 1], currentStep)) {
+      const allGroupedStepsExceptLast = previousGroupedSteps.slice(
+        0,
+        -1
+      );
+      const updatedLastGroupedStep = {
+        steps: [...previousGroupedStep.steps, currentStep]
+      };
+      return [...allGroupedStepsExceptLast, updatedLastGroupedStep];
+    }
+    return [
+      ...previousGroupedSteps,
+      {
+        steps: [currentStep]
+      }
+    ];
+  },
+  []
+);
+var mapStepToTimelineItem = (processDetailStep) => {
+  return {
+    id: processDetailStep.stepId,
+    processStepStatus: processDetailStep.status,
+    stepDetail: processDetailStep.name
   };
 };
-
-// src/components/WfoWorkflowSteps/WfoStepStatusIcon/WfoStepStatusIcon.tsx
-import { jsx as jsx158, jsxs as jsxs88 } from "@emotion/react/jsx-runtime";
-var SubIcon = ({ stepStatus, color = "" }) => {
-  switch (stepStatus) {
-    case "suspend" /* SUSPEND */:
-      return /* @__PURE__ */ jsx158(WfoMinusCircleFill, { color });
-    case "failed" /* FAILED */:
-      return /* @__PURE__ */ jsx158(WfoXCircleFill, { color });
-    default:
-      return /* @__PURE__ */ jsx158(WfoCheckmarkCircleFill, { color });
+var mapGroupedStepToTimelineItem = (groupedStep) => {
+  if (groupedStep.steps.length === 1) {
+    return mapStepToTimelineItem(groupedStep.steps[0]);
   }
+  return groupedStep.steps.reduce(
+    (previousTimelineItem, currentStep) => {
+      var _a;
+      return __spreadProps(__spreadValues({}, previousTimelineItem), {
+        id: (_a = currentStep.stepId) != null ? _a : previousTimelineItem.id,
+        processStepStatus: getMostAccurateTimelineStatus(
+          previousTimelineItem.processStepStatus,
+          currentStep.status
+        )
+      });
+    },
+    __spreadProps(__spreadValues({}, mapStepToTimelineItem(groupedStep.steps[0])), {
+      value: groupedStep.steps.filter(isFailedStep).length || void 0
+    })
+  );
 };
-var MainIcon = ({ stepStatus, color = "", isStartStep }) => {
-  if (isStartStep) {
-    return /* @__PURE__ */ jsx158(WfoPlayFill, { color });
+var mapGroupedStepsToTimelineItems = (groupedSteps) => groupedSteps.map(mapGroupedStepToTimelineItem);
+var getIndexOfCurrentStep = (timelineItems) => {
+  const reversedTimelineItems = [...timelineItems].reverse();
+  const reversedIndexOfCurrentStep = reversedTimelineItems.findIndex(
+    (timelineItem) => timelineItem.processStepStatus === "running" /* RUNNING */
+  );
+  if (reversedIndexOfCurrentStep !== -1) {
+    return timelineItems.length - reversedIndexOfCurrentStep - 1;
   }
-  switch (stepStatus) {
-    case "form" /* FORM */:
-      return /* @__PURE__ */ jsx158(WfoPencilAlt, { color });
-    default:
-      return /* @__PURE__ */ jsx158(WfoCogFill, { color, width: 16, height: 16 });
+  const indexOfFirstPending = timelineItems.findIndex(
+    (timelineItem) => timelineItem.processStepStatus === "pending" /* PENDING */
+  );
+  if (indexOfFirstPending !== -1) {
+    return indexOfFirstPending - 1;
   }
+  return timelineItems.length - 1;
 };
-var WfoStepStatusIcon = ({
-  stepStatus,
-  isStartStep = false
+
+// src/pages/processes/WfoProcessDetail.tsx
+import { Fragment as Fragment37, jsx as jsx158, jsxs as jsxs88 } from "@emotion/react/jsx-runtime";
+var ProcessHeaderValue = ({
+  translationKey,
+  value = ""
 }) => {
+  const t = useTranslations49("processes.detail");
   const { theme } = useOrchestratorTheme();
-  const {
-    stepStateSuccessIconStyle,
-    stepStateSuspendIconStyle,
-    stepStatePendingIconStyle,
-    stepStateFailedIconStyle
-  } = useWithOrchestratorTheme(getStyles14);
-  const [
-    stepStateStyle,
-    mainIconColor,
-    hasSubIcon = false,
-    subIconColor = ""
-  ] = (() => {
-    switch (stepStatus) {
-      case "suspend" /* SUSPEND */:
-        return [
-          stepStateSuspendIconStyle,
-          theme.colors.warningText,
-          true,
-          theme.colors.warningText
-        ];
-      case "pending" /* PENDING */:
-        return [stepStatePendingIconStyle, theme.colors.darkShade];
-      case "failed" /* FAILED */:
-        return [
-          stepStateFailedIconStyle,
-          theme.colors.dangerText,
-          true,
-          theme.colors.dangerText
-        ];
-      case "skipped" /* SKIPPED */:
-        return [
-          stepStateSuccessIconStyle,
-          theme.colors.primaryText,
-          true,
-          theme.colors.darkShade
-        ];
-      case "form" /* FORM */:
-        return [stepStateSuccessIconStyle, theme.colors.link];
-      default:
-        return [
-          stepStateSuccessIconStyle,
-          theme.colors.primaryText,
-          true,
-          theme.colors.successText
-        ];
+  return /* @__PURE__ */ jsxs88(
+    EuiFlexGroup17,
+    {
+      direction: "column",
+      gutterSize: "xs",
+      css: {
+        flex: 1,
+        whiteSpace: "nowrap",
+        overflow: "hidden"
+      },
+      children: [
+        /* @__PURE__ */ jsx158(EuiText30, { size: "xs", children: t(translationKey) }),
+        /* @__PURE__ */ jsx158(
+          EuiText30,
+          {
+            css: {
+              fontWeight: theme.font.weight.bold,
+              fontSize: theme.size.m,
+              overflow: "hidden",
+              textOverflow: "ellipsis"
+            },
+            children: value
+          }
+        )
+      ]
     }
-  })();
-  return /* @__PURE__ */ jsxs88(EuiFlexItem23, { css: { flexDirection: "row" }, grow: 0, children: [
-    /* @__PURE__ */ jsx158("div", { css: stepStateStyle, children: /* @__PURE__ */ jsx158(
-      MainIcon,
-      {
-        color: mainIconColor,
-        stepStatus,
-        isStartStep
-      }
-    ) }),
-    /* @__PURE__ */ jsx158(
-      "div",
-      {
-        css: {
-          transform: "translate(-16px, -8px)",
-          width: `${theme.base}`,
-          visibility: hasSubIcon ? "visible" : "hidden"
-        },
-        children: /* @__PURE__ */ jsx158(SubIcon, { color: subIconColor, stepStatus })
-      }
-    )
-  ] });
-};
-
-// src/components/WfoWorkflowSteps/stepListUtils.ts
-var STEP_STATE_HIDDEN_KEYS = [
-  "label_",
-  "divider_",
-  "__",
-  "confirmation_mail"
-];
-var getStepContent = (stepDelta, showHiddenKeys) => {
-  if (showHiddenKeys) {
-    return stepDelta;
-  }
-  return Object.entries(stepDelta).filter(
-    ([key]) => !STEP_STATE_HIDDEN_KEYS.some((word) => key.startsWith(word))
-  ).reduce(
-    (previousValue, currentValue) => __spreadProps(__spreadValues({}, previousValue), {
-      [currentValue[0]]: currentValue[1]
-    }),
-    {}
   );
 };
-
-// src/components/WfoWorkflowSteps/WfoStep/WfoStepForm.tsx
-import { useState as useState35 } from "react";
-import { EuiFlexItem as EuiFlexItem24 } from "@elastic/eui";
-import { jsx as jsx159 } from "@emotion/react/jsx-runtime";
-var WfoStepForm = ({
-  userInputForm,
-  isTask,
-  processId
+var WfoProcessDetail = ({
+  children,
+  processDetail,
+  pageTitle,
+  productNames,
+  buttonsAreDisabled,
+  timelineItems,
+  onTimelineItemClick,
+  isLoading = false,
+  hasError = false
 }) => {
-  const [isProcessing, setIsProcessing] = useState35(false);
+  var _a, _b, _c;
+  const t = useTranslations49("processes.detail");
   const { theme } = useOrchestratorTheme();
-  const [resumeProcess] = useResumeProcessMutation();
-  const submitForm = (processInput) => {
-    if (!processId) {
-      return Promise.reject();
+  const { showConfirmDialog } = useContext7(ConfirmationDialogContext);
+  const [retryProcess] = useRetryProcessMutation();
+  const [deleteProcess] = useDeleteProcessMutation();
+  const [abortProcess] = useAbortProcessMutation();
+  const router = useRouter8();
+  const { isEngineRunningNow } = useCheckEngineStatus();
+  const { isAllowed } = usePolicy();
+  const listIncludesStatus = (processStatusesForDisabledState, status) => status ? processStatusesForDisabledState.map((stat) => stat.toUpperCase()).includes(status) : false;
+  const retryButtonIsDisabled = buttonsAreDisabled || !listIncludesStatus(
+    [
+      "failed" /* FAILED */,
+      "api_unavailable" /* API_UNAVAILABLE */,
+      "inconsistent_data" /* INCONSISTENT_DATA */,
+      "waiting" /* WAITING */
+    ],
+    processDetail == null ? void 0 : processDetail.lastStatus
+  );
+  const abortButtonIsDisabled = buttonsAreDisabled || listIncludesStatus(
+    ["completed" /* COMPLETED */, "aborted" /* ABORTED */],
+    processDetail == null ? void 0 : processDetail.lastStatus
+  );
+  const deleteButtonIsDisabled = buttonsAreDisabled || listIncludesStatus(["running" /* RUNNING */], processDetail == null ? void 0 : processDetail.lastStatus);
+  const processIsTask = (processDetail == null ? void 0 : processDetail.isTask) === true;
+  const handleActionButtonClick = (action) => () => __async(void 0, null, function* () {
+    if (yield isEngineRunningNow()) {
+      action();
     }
-    return resumeProcess({ processId, userInputs: processInput }).then(
-      () => {
-        setIsProcessing(true);
+  });
+  const retryAction = () => showConfirmDialog({
+    question: t(
+      processIsTask ? "retryTaskQuestion" : "retryWorkflowQuestion",
+      {
+        workflowName: processDetail == null ? void 0 : processDetail.workflowName
       }
-    );
-  };
-  return /* @__PURE__ */ jsx159(EuiFlexItem24, { css: { margin: theme.size.m }, children: isProcessing && /* @__PURE__ */ jsx159(WfoLoading, {}) || /* @__PURE__ */ jsx159(
-    UserInputFormWizard,
-    {
-      stepUserInput: userInputForm,
-      stepSubmit: submitForm,
-      hasNext: false,
-      isTask,
-      isResuming: true
+    ),
+    confirmAction: () => {
+      (processDetail == null ? void 0 : processDetail.processId) && retryProcess({ processId: processDetail.processId });
     }
-  ) });
-};
-
-// src/components/WfoWorkflowSteps/WfoStep/WfoStep.tsx
-import { Fragment as Fragment37, jsx as jsx160, jsxs as jsxs89 } from "@emotion/react/jsx-runtime";
-var WfoStep = React45.forwardRef(
-  ({
-    stepListItem,
-    onToggleStepDetail,
-    startedAt,
-    showHiddenKeys,
-    isStartStep = false,
-    isTask,
-    processId
-  }, ref) => {
-    var _a;
-    const { isExpanded, step, userInputForm } = stepListItem;
-    const { theme } = useOrchestratorTheme();
-    const {
-      stepEmailContainerStyle,
-      getStepHeaderStyle,
-      stepHeaderRightStyle,
-      stepListContentBoldTextStyle,
-      stepDurationStyle,
-      stepRowStyle,
-      getStepToggleExpandStyle
-    } = useWithOrchestratorTheme(getStyles14);
-    const t = useTranslations47("processes.steps");
-    const hasHtmlMail = (_a = step.stateDelta) == null ? void 0 : _a.hasOwnProperty("confirmation_mail");
-    const stepContent = step.stateDelta ? getStepContent(step.stateDelta, showHiddenKeys) : {};
-    const hasStepContent = hasHtmlMail || Object.keys(stepContent).length > 0;
-    const displayMailConfirmation = (value) => {
-      if (!value) {
-        return "";
+  });
+  const abortAction = () => showConfirmDialog({
+    question: t(
+      processIsTask ? "abortTaskQuestion" : "abortWorkflowQuestion",
+      {
+        workflowName: processDetail == null ? void 0 : processDetail.workflowName
       }
-      return /* @__PURE__ */ jsxs89(EuiText30, { size: "s", children: [
-        /* @__PURE__ */ jsx160("h4", { children: "To" }),
-        /* @__PURE__ */ jsx160("p", { children: value.to.map(
-          (v, i) => /* @__PURE__ */ jsxs89("div", { children: [
-            v.name,
-            " <",
-            /* @__PURE__ */ jsx160("a", { href: `mailto: ${v.email}`, children: v.email }),
-            ">"
-          ] }, `to-${i}`)
-        ) }),
-        /* @__PURE__ */ jsx160("h4", { children: "CC" }),
-        /* @__PURE__ */ jsx160("p", { children: value.cc.map(
-          (v, i) => /* @__PURE__ */ jsxs89("div", { children: [
-            v.name,
-            " <",
-            /* @__PURE__ */ jsx160("a", { href: `mailto: ${v.email}`, children: v.email }),
-            ">"
-          ] }, `cc-${i}`)
-        ) }),
-        /* @__PURE__ */ jsx160("h4", { children: "Subject" }),
-        /* @__PURE__ */ jsx160("p", { children: value.subject }),
-        /* @__PURE__ */ jsx160("h4", { children: "Message" }),
-        /* @__PURE__ */ jsx160(
-          "div",
+    ),
+    confirmAction: () => {
+      (processDetail == null ? void 0 : processDetail.processId) && abortProcess({ processId: processDetail.processId });
+      router.push(processIsTask ? PATH_TASKS : PATH_WORKFLOWS);
+    }
+  });
+  const deleteAction = () => showConfirmDialog({
+    question: t("deleteQuestion", {
+      workflowName: processDetail == null ? void 0 : processDetail.workflowName
+    }),
+    confirmAction: () => {
+      (processDetail == null ? void 0 : processDetail.processId) && deleteProcess({ processId: processDetail.processId });
+      router.push(PATH_TASKS);
+    }
+  });
+  return /* @__PURE__ */ jsxs88(Fragment37, { children: [
+    /* @__PURE__ */ jsxs88(EuiFlexGroup17, { children: [
+      /* @__PURE__ */ jsxs88(EuiFlexItem23, { children: [
+        /* @__PURE__ */ jsx158(EuiPageHeader2, { pageTitle }),
+        /* @__PURE__ */ jsx158(EuiSpacer15, {}),
+        /* @__PURE__ */ jsx158(
+          WfoProductInformationWithLink,
           {
-            className: "emailMessage",
-            dangerouslySetInnerHTML: { __html: value.message }
+            productNames,
+            workflowName: (_a = processDetail == null ? void 0 : processDetail.workflowName) != null ? _a : ""
           }
         )
-      ] });
-    };
-    return /* @__PURE__ */ jsx160("div", { ref, children: /* @__PURE__ */ jsxs89(EuiPanel4, { children: [
-      /* @__PURE__ */ jsxs89(
+      ] }),
+      /* @__PURE__ */ jsxs88(
         EuiFlexGroup17,
         {
-          css: getStepHeaderStyle(hasStepContent),
-          onClick: () => hasStepContent && onToggleStepDetail(),
+          justifyContent: "flexEnd",
+          direction: "row",
+          css: { flexGrow: 0 },
+          gutterSize: "s",
           children: [
-            /* @__PURE__ */ jsx160(
-              WfoStepStatusIcon,
+            /* @__PURE__ */ jsx158(
+              WfoIsAllowedToRender,
               {
-                stepStatus: step.status,
-                isStartStep
+                resource: "/orchestrator/processes/retry/" /* PROCESS_RETRY */,
+                children: /* @__PURE__ */ jsx158(
+                  EuiButton11,
+                  {
+                    onClick: handleActionButtonClick(retryAction),
+                    iconType: () => /* @__PURE__ */ jsx158(
+                      WfoRefresh,
+                      {
+                        color: retryButtonIsDisabled ? theme.colors.subduedText : theme.colors.link
+                      }
+                    ),
+                    isDisabled: retryButtonIsDisabled,
+                    children: t("retry")
+                  }
+                )
               }
             ),
-            /* @__PURE__ */ jsxs89(EuiFlexItem25, { grow: 0, children: [
-              /* @__PURE__ */ jsx160(EuiText30, { css: stepListContentBoldTextStyle, children: step.name }),
-              /* @__PURE__ */ jsxs89(EuiText30, { children: [
-                step.status,
-                " ",
-                step.executed && `- ${formatDate(step.executed)}`
-              ] })
-            ] }),
-            /* @__PURE__ */ jsx160(EuiFlexGroup17, { css: stepRowStyle, children: step.executed && /* @__PURE__ */ jsxs89(Fragment37, { children: [
-              /* @__PURE__ */ jsxs89(
-                EuiFlexItem25,
-                {
-                  grow: 0,
-                  css: stepHeaderRightStyle,
-                  children: [
-                    /* @__PURE__ */ jsx160(EuiText30, { css: stepDurationStyle, children: t("duration") }),
-                    /* @__PURE__ */ jsx160(EuiText30, { size: "m", children: calculateTimeDifference(
-                      startedAt,
-                      step.executed
-                    ) })
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsx160(
-                EuiFlexItem25,
-                {
-                  grow: 0,
-                  css: getStepToggleExpandStyle(
-                    hasStepContent
-                  ),
-                  children: isExpanded && /* @__PURE__ */ jsx160(
-                    WfoChevronUp,
-                    {
-                      color: theme.colors.text
-                    }
-                  ) || /* @__PURE__ */ jsx160(
-                    WfoChevronDown,
-                    {
-                      color: theme.colors.text
-                    }
-                  )
-                }
-              )
-            ] }) })
+            /* @__PURE__ */ jsx158(
+              WfoIsAllowedToRender,
+              {
+                resource: "/orchestrator/processes/abort/" /* PROCESS_ABORT */,
+                children: /* @__PURE__ */ jsx158(
+                  EuiButton11,
+                  {
+                    onClick: handleActionButtonClick(abortAction),
+                    iconType: () => /* @__PURE__ */ jsx158(
+                      WfoXCircleFill,
+                      {
+                        color: abortButtonIsDisabled ? theme.colors.subduedText : theme.colors.danger
+                      }
+                    ),
+                    color: "danger",
+                    isDisabled: abortButtonIsDisabled,
+                    children: t("abort")
+                  }
+                )
+              }
+            ),
+            processDetail && processIsTask && isAllowed("/orchestrator/processes/delete/" /* PROCESS_DELETE */) && /* @__PURE__ */ jsx158(
+              EuiButton11,
+              {
+                onClick: handleActionButtonClick(deleteAction),
+                iconType: () => /* @__PURE__ */ jsx158(
+                  WfoXCircleFill,
+                  {
+                    color: deleteButtonIsDisabled ? theme.colors.subduedText : theme.colors.danger
+                  }
+                ),
+                color: "danger",
+                isDisabled: deleteButtonIsDisabled,
+                children: t("delete")
+              }
+            )
           ]
         }
-      ),
-      hasStepContent && !hasHtmlMail && isExpanded && /* @__PURE__ */ jsx160(WfoJsonCodeBlock, { data: stepContent }),
-      isExpanded && hasHtmlMail && /* @__PURE__ */ jsx160("div", { css: stepEmailContainerStyle, children: displayMailConfirmation(
-        step.stateDelta.confirmation_mail
-      ) }),
-      step.status === "suspend" /* SUSPEND */ && userInputForm && /* @__PURE__ */ jsx160(
-        WfoStepForm,
-        {
-          userInputForm,
-          isTask,
-          processId
-        }
       )
-    ] }) });
-  }
-);
-WfoStep.displayName = "WfoStep";
-
-// src/components/WfoWorkflowSteps/WfoStepList/WfoStepList.tsx
-import React46, { useImperativeHandle, useRef as useRef6 } from "react";
-import { Fragment as Fragment38, jsx as jsx161, jsxs as jsxs90 } from "@emotion/react/jsx-runtime";
-var WfoStepList = React46.forwardRef(
-  ({
-    stepListItems,
-    showHiddenKeys,
-    startedAt,
-    onToggleExpandStepListItem,
-    onTriggerExpandStepListItem,
-    isTask,
-    processId
-  }, reference) => {
-    const { stepSpacerStyle } = useWithOrchestratorTheme(getStyles14);
-    const stepReferences = useRef6(/* @__PURE__ */ new Map());
-    let stepStartTime = startedAt;
-    useImperativeHandle(reference, () => ({
-      scrollToStep: (stepId) => __async(void 0, null, function* () {
-        var _a;
-        try {
-          yield new Promise((resolve, reject) => {
-            const foundStepListItem = stepListItems.find(
-              (value) => value.step.stepId === stepId
-            );
-            if (!foundStepListItem) {
-              return reject(void 0);
+    ] }),
+    /* @__PURE__ */ jsx158(EuiSpacer15, {}),
+    /* @__PURE__ */ jsx158(
+      EuiPanel4,
+      {
+        hasShadow: false,
+        hasBorder: false,
+        color: "subdued",
+        element: "div",
+        children: isLoading && !hasError && /* @__PURE__ */ jsx158(WfoLoading, {}) || processDetail !== void 0 && /* @__PURE__ */ jsxs88(EuiFlexGroup17, { direction: "row", gutterSize: "m", children: [
+          /* @__PURE__ */ jsx158(
+            ProcessHeaderValue,
+            {
+              translationKey: "status",
+              value: processDetail.lastStatus
+            }
+          ),
+          /* @__PURE__ */ jsx158(
+            ProcessHeaderValue,
+            {
+              translationKey: "lastStep",
+              value: processDetail == null ? void 0 : processDetail.lastStep
+            }
+          ),
+          processDetail.customer && /* @__PURE__ */ jsx158(
+            ProcessHeaderValue,
+            {
+              translationKey: "customer",
+              value: (_b = processDetail.customer) == null ? void 0 : _b.fullname
+            }
+          ),
+          /* @__PURE__ */ jsx158(
+            ProcessHeaderValue,
+            {
+              translationKey: "startedBy",
+              value: processDetail == null ? void 0 : processDetail.createdBy
+            }
+          ),
+          /* @__PURE__ */ jsx158(
+            ProcessHeaderValue,
+            {
+              translationKey: "startedOn",
+              value: (processDetail == null ? void 0 : processDetail.startedAt) ? parseIsoString(
+                parseDateRelativeToToday
+              )(processDetail == null ? void 0 : processDetail.startedAt) : ""
+            }
+          ),
+          /* @__PURE__ */ jsx158(
+            ProcessHeaderValue,
+            {
+              translationKey: "lastUpdate",
+              value: (processDetail == null ? void 0 : processDetail.lastModifiedAt) ? parseIsoString(
+                parseDateRelativeToToday
+              )(processDetail == null ? void 0 : processDetail.lastModifiedAt) : ""
+            }
+          ),
+          process && isAllowed(
+            "/orchestrator/subscriptions/view/from-process" /* PROCESS_RELATED_SUBSCRIPTIONS */
+          ) && processDetail.subscriptions && /* @__PURE__ */ jsxs88(
+            EuiFlexGroup17,
+            {
+              gutterSize: "xs",
+              direction: "column",
+              css: {
+                flex: 1,
+                overflow: "hidden"
+              },
+              children: [
+                /* @__PURE__ */ jsx158(EuiText30, { size: "xs", children: t("relatedSubscriptions") }),
+                /* @__PURE__ */ jsx158(
+                  EuiText30,
+                  {
+                    css: {
+                      flex: 1,
+                      whiteSpace: "nowrap",
+                      overflow: "hidden",
+                      textOverflow: "ellipsis",
+                      fontSize: theme.size.m
+                    },
+                    children: /* @__PURE__ */ jsx158(
+                      WfoProcessListSubscriptionsCell,
+                      {
+                        subscriptions: process && ((_c = processDetail == null ? void 0 : processDetail.subscriptions) == null ? void 0 : _c.page.map(
+                          (subscription) => ({
+                            subscriptionId: subscription.subscriptionId,
+                            description: subscription.description
+                          })
+                        )) || [],
+                        renderDirection: "VERTICAL" /* VERTICAL */
+                      }
+                    )
+                  }
+                )
+              ]
             }
-            return resolve(
-              onTriggerExpandStepListItem(foundStepListItem)
-            );
-          });
-          (_a = stepReferences.current.get(stepId)) == null ? void 0 : _a.scrollIntoView({
-            behavior: "smooth"
-          });
-        } catch (e) {
-          console.error(
-            "Error scrolling to step with stepId ",
-            stepId
-          );
-        }
-      })
-    }));
-    const getReferenceCallbackForStepId = (stepId) => (node) => node ? stepReferences.current.set(stepId, node) : stepReferences.current.delete(stepId);
-    return /* @__PURE__ */ jsx161(Fragment38, { children: stepListItems.map((stepListItem, index) => {
-      const stepComponent = /* @__PURE__ */ jsxs90("div", { children: [
-        index !== 0 && /* @__PURE__ */ jsx161("div", { css: stepSpacerStyle }),
-        /* @__PURE__ */ jsx161(
-          WfoStep,
-          {
-            ref: getReferenceCallbackForStepId(
-              stepListItem.step.stepId
-            ),
-            onToggleStepDetail: () => onToggleExpandStepListItem(stepListItem),
-            stepListItem,
-            startedAt: stepStartTime,
-            showHiddenKeys,
-            isStartStep: index === 0,
-            isTask,
-            processId
-          }
-        )
-      ] }, `step-${index}`);
-      if (index > 0) {
-        stepStartTime = stepListItem.step.executed;
-      }
-      return stepComponent;
-    }) });
-  }
-);
-WfoStepList.displayName = "WfoStepList";
-
-// src/components/WfoWorkflowSteps/WfoWorkflowStepList/WfoWorkflowStepList.tsx
-import React48, { useEffect as useEffect24, useState as useState37 } from "react";
-import { useTranslations as useTranslations50 } from "next-intl";
-
-// src/components/WfoDiff/WfoDiff.tsx
-var refractor = __toESM(require_refractor(), 1);
-import { useCallback as useCallback6, useEffect as useEffect23, useMemo as useMemo4, useState as useState36 } from "react";
-import { Diff, Hunk, parseDiff, tokenize } from "react-diff-view";
-import "react-diff-view/style/index.css";
-import { useTranslations as useTranslations48 } from "next-intl";
-import "prism-themes/themes/prism-ghcolors.min.css";
-import { diffLines, formatLines } from "unidiff";
-import {
-  EuiButtonIcon as EuiButtonIcon6,
-  EuiFlexGroup as EuiFlexGroup18,
-  EuiFlexItem as EuiFlexItem26,
-  EuiSpacer as EuiSpacer15,
-  EuiText as EuiText31
-} from "@elastic/eui";
-
-// src/components/WfoDiff/styles.ts
-import { shade as shade2, tint as tint4 } from "@elastic/eui";
-import { css as css28 } from "@emotion/react";
-var getWfoDiffStyles = ({
-  theme,
-  toSecondaryColor,
-  isDarkThemeActive
-}) => {
-  const SHADE_FACTOR = 0.5;
-  const TINT_FACTOR = 0.65;
-  const insertGutterColor = toSecondaryColor(theme.colors.success);
-  const insertCodeColor = isDarkThemeActive ? shade2(insertGutterColor, SHADE_FACTOR) : tint4(insertGutterColor, TINT_FACTOR);
-  const deleteColor = toSecondaryColor(theme.colors.danger);
-  const deleteSecondaryColor = isDarkThemeActive ? shade2(deleteColor, SHADE_FACTOR) : tint4(deleteColor, TINT_FACTOR);
-  const diffStyle = css28({
-    ".diff-code-insert": {
-      backgroundColor: insertCodeColor
-    },
-    ".diff-gutter-insert": {
-      backgroundColor: insertGutterColor
-    },
-    ".diff-code-delete": {
-      backgroundColor: deleteSecondaryColor
-    },
-    ".diff-gutter-delete": {
-      backgroundColor: deleteColor
-    },
-    ".operator, .punctuation": {
-      color: theme.colors.text
-    }
-  });
-  return {
-    diffStyle
-  };
-};
-
-// src/components/WfoDiff/WfoDiff.tsx
-import { jsx as jsx162, jsxs as jsxs91 } from "@emotion/react/jsx-runtime";
-var EMPTY_HUNKS = [];
-var SMALL_CONTEXT = 3;
-var FULL_CONTEXT = 1e6;
-var WfoDiff = ({ oldText, newText, syntax }) => {
-  const t = useTranslations48("processes.delta");
-  const [showSplit, setShowSplit] = useState36(true);
-  const [showFull, setShowFull] = useState36(false);
-  const { diffStyle } = useWithOrchestratorTheme(getWfoDiffStyles);
-  const [{ type, hunks }, setDiff] = useState36({
-    type: "modify",
-    hunks: []
-  });
-  const updateDiffText = useCallback6(() => {
-    const diffText = formatLines(diffLines(oldText, newText), {
-      context: showFull ? FULL_CONTEXT : SMALL_CONTEXT
-    });
-    const [diff] = parseDiff(diffText, { nearbySequences: "zip" });
-    setDiff(diff);
-  }, [oldText, newText, setDiff, showFull]);
-  const tokens = useMemo4(() => {
-    if (!hunks) {
-      return void 0;
-    }
-    const options = {
-      refractor,
-      highlight: !!syntax,
-      language: syntax != null ? syntax : ""
-    };
-    try {
-      return tokenize(hunks, options);
-    } catch (ex) {
-      return void 0;
-    }
-  }, [hunks, syntax]);
-  useEffect23(() => {
-    updateDiffText();
-  }, [updateDiffText, showFull]);
-  return /* @__PURE__ */ jsxs91("div", { children: [
-    /* @__PURE__ */ jsxs91(EuiFlexGroup18, { gutterSize: "xs", children: [
-      /* @__PURE__ */ jsx162(EuiFlexItem26, { grow: false, children: /* @__PURE__ */ jsx162(EuiText31, { children: /* @__PURE__ */ jsx162("h3", { children: t("title") }) }) }),
-      /* @__PURE__ */ jsx162(EuiFlexItem26, { grow: false, children: /* @__PURE__ */ jsx162(
-        EuiButtonIcon6,
-        {
-          size: "s",
-          iconType: showSplit ? "continuityAboveBelow" : "continuityWithin",
-          onClick: () => setShowSplit(!showSplit),
-          "aria-label": t(
-            showSplit ? "continuityAboveBelow" : "continuityWithin"
-          )
-        }
-      ) }),
-      /* @__PURE__ */ jsx162(EuiFlexItem26, { grow: false, children: /* @__PURE__ */ jsx162(
-        EuiButtonIcon6,
-        {
-          size: "s",
-          iconType: showFull ? "fullScreenExit" : "fullScreen",
-          onClick: () => setShowFull(!showFull),
-          "aria-label": t(
-            showFull ? "fullScreenExit" : "fullScreen"
           )
-        }
-      ) })
-    ] }),
-    /* @__PURE__ */ jsx162(EuiSpacer15, {}),
-    /* @__PURE__ */ jsx162(
-      Diff,
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx158(EuiSpacer15, { size: "s" }),
+    /* @__PURE__ */ jsx158(
+      WfoTimeline,
       {
-        css: diffStyle,
-        viewType: showSplit ? "split" : "unified",
-        diffType: type,
-        hunks: hunks || EMPTY_HUNKS,
-        tokens,
-        children: (hunks2) => hunks2.map((hunk) => /* @__PURE__ */ jsx162(Hunk, { hunk }, hunk.content))
+        timelineItems,
+        indexOfCurrentStep: getIndexOfCurrentStep(timelineItems),
+        onStepClick: (timelineItem) => onTimelineItemClick && timelineItem.id && onTimelineItemClick(timelineItem.id)
       }
-    )
-  ] });
-};
-var WfoDiff_default = WfoDiff;
-
-// src/components/WfoWorkflowSteps/WfoTraceback/WfoTraceback.tsx
-import { useTranslations as useTranslations49 } from "next-intl";
-import { EuiCodeBlock, EuiText as EuiText32 } from "@elastic/eui";
-
-// src/components/WfoWorkflowSteps/WfoTraceback/styles.ts
-import { css as css29 } from "@emotion/react";
-var getStyles15 = ({ theme }) => {
-  const codeBlockStyle = css29({
-    marginTop: theme.size.m,
-    marginBottom: theme.size.l,
-    borderRadius: theme.border.radius.medium
-  });
-  return {
-    codeBlockStyle
-  };
-};
-
-// src/components/WfoWorkflowSteps/WfoTraceback/WfoTraceback.tsx
-import { Fragment as Fragment39, jsx as jsx163, jsxs as jsxs92 } from "@emotion/react/jsx-runtime";
-var WfoTraceback = ({ children }) => {
-  const { codeBlockStyle } = useWithOrchestratorTheme(getStyles15);
-  const t = useTranslations49("processes.steps");
-  return /* @__PURE__ */ jsxs92(Fragment39, { children: [
-    /* @__PURE__ */ jsx163(EuiText32, { children: /* @__PURE__ */ jsx163("h3", { children: t("traceback") }) }),
-    /* @__PURE__ */ jsx163(EuiCodeBlock, { css: codeBlockStyle, children })
+    ),
+    children
   ] });
 };
 
-// src/components/WfoWorkflowSteps/WfoWorkflowStepList/WfoWorkflowStepList.tsx
-import { Fragment as Fragment40, jsx as jsx164, jsxs as jsxs93 } from "@emotion/react/jsx-runtime";
-var WfoProcessRawData = ({ processId }) => {
-  const { data, isFetching } = useGetRawProcessDetailQuery({ processId });
-  return isFetching ? /* @__PURE__ */ jsx164(WfoLoading, {}) : /* @__PURE__ */ jsx164(WfoJsonCodeBlock, { data: data || {} });
-};
-var WfoProcessSubscriptionDelta = ({
+// src/pages/processes/WfoProcessDetailPage.tsx
+import { jsx as jsx159 } from "@emotion/react/jsx-runtime";
+var WfoProcessDetailPage = ({
   processId
 }) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h;
-  const { data, isFetching } = useGetRawProcessDetailQuery({ processId });
-  const subscriptionKey = (_c = (_b = (_a = data == null ? void 0 : data.current_state) == null ? void 0 : _a.subscription) == null ? void 0 : _b.subscription_id) != null ? _c : "";
-  const newText = (_e = (_d = data == null ? void 0 : data.current_state) == null ? void 0 : _d.subscription) != null ? _e : null;
-  const oldText = ((_f = data == null ? void 0 : data.current_state) == null ? void 0 : _f.__old_subscriptions__) && subscriptionKey in ((_g = data == null ? void 0 : data.current_state) == null ? void 0 : _g.__old_subscriptions__) ? (_h = data == null ? void 0 : data.current_state) == null ? void 0 : _h.__old_subscriptions__[subscriptionKey] : null;
-  return isFetching ? /* @__PURE__ */ jsx164(WfoLoading, {}) : /* @__PURE__ */ jsx164(
-    WfoDiff_default,
+  var _a, _b;
+  const stepListRef = useRef6(null);
+  const { data, isLoading, isError: isError2 } = useGetProcessDetailQuery({
+    processId
+  });
+  const processDetail = data == null ? void 0 : data.processes[0];
+  const steps = (_a = processDetail == null ? void 0 : processDetail.steps) != null ? _a : [];
+  const productNames = getProductNamesFromProcess(processDetail);
+  const pageTitle = (processDetail == null ? void 0 : processDetail.workflowName) || "";
+  const isTask = (_b = processDetail == null ? void 0 : processDetail.isTask) != null ? _b : false;
+  const groupedSteps = convertStepsToGroupedSteps(steps);
+  const timelineItems = mapGroupedStepsToTimelineItems(groupedSteps);
+  return /* @__PURE__ */ jsx159(
+    WfoProcessDetail,
     {
-      oldText: oldText ? JSON.stringify(oldText, null, 2) : "",
-      newText: newText ? JSON.stringify(newText, null, 2) : "",
-      syntax: "javascript"
+      pageTitle,
+      productNames,
+      buttonsAreDisabled: isLoading || isError2,
+      processDetail,
+      timelineItems,
+      onTimelineItemClick: (id) => {
+        var _a2;
+        return (_a2 = stepListRef.current) == null ? void 0 : _a2.scrollToStep(id);
+      },
+      isLoading,
+      hasError: isError2,
+      children: isError2 && /* @__PURE__ */ jsx159(WfoError, {}) || isLoading && /* @__PURE__ */ jsx159(WfoLoading, {}) || processDetail !== void 0 && /* @__PURE__ */ jsx159(
+        WfoWorkflowStepList,
+        {
+          ref: stepListRef,
+          processId: processDetail.processId,
+          steps: groupedSteps.flatMap(
+            (groupedStep) => groupedStep.steps
+          ),
+          traceBack: processDetail.traceback,
+          userInputForm: processDetail.form,
+          startedAt: processDetail.startedAt,
+          isTask
+        }
+      ) || /* @__PURE__ */ jsx159("h1", { children: "Invalid processId" })
     }
   );
 };
-var WfoWorkflowStepList = React48.forwardRef(
-  ({
-    steps = [],
-    traceBack,
-    startedAt,
-    processId,
-    isTask,
-    userInputForm
-  }, reference) => {
-    const [showHiddenKeys, setShowHiddenKeys] = useState37(false);
-    const [showRaw, setShowRaw] = useState37(false);
-    const [showDelta, setShowDelta] = useState37(false);
-    const [showTraceback, setShowTraceback] = useState37(false);
-    const t = useTranslations50("processes.steps");
-    const initialStepListItems = steps.map((step) => ({
-      step,
-      isExpanded: false
-    }));
-    const [stepListItems, setStepListItems] = useState37(initialStepListItems);
-    const persistStepListItemState = (previousStepListItems, updatedSteps, userInputForm2) => {
-      var _a;
-      const reversedSteps = [...updatedSteps].reverse();
-      const lastStepWithSuspendStatusStepId = (_a = reversedSteps.find(
-        (step) => step.status === "suspend" /* SUSPEND */
-      )) == null ? void 0 : _a.stepId;
-      return updatedSteps.map((step) => {
-        const previousStepListItem = previousStepListItems.find(
-          (previousStepListItem2) => previousStepListItem2.step.stepId === step.stepId
-        );
-        return {
-          step,
-          isExpanded: (previousStepListItem == null ? void 0 : previousStepListItem.isExpanded) || false,
-          userInputForm: lastStepWithSuspendStatusStepId === step.stepId && userInputForm2 ? userInputForm2 : void 0
-        };
-      });
-    };
-    useEffect24(() => {
-      setStepListItems(
-        (previousStepListItems) => persistStepListItemState(
-          previousStepListItems,
-          steps,
-          userInputForm
-        )
-      );
-    }, [steps, userInputForm]);
-    const updateStepListItem = (stepListItemToUpdate, updateFunction) => setStepListItems(
-      stepListItems.map(
-        (stepListItem) => stepListItem === stepListItemToUpdate ? updateFunction(stepListItem) : stepListItem
-      )
-    );
-    const allStepsAreExpanded = stepListItems.every(
-      (item) => item.isExpanded
-    );
-    const setExpandedStateStepListItems = (isExpanded) => {
-      setStepListItems(
-        stepListItems.map((item) => __spreadProps(__spreadValues({}, item), {
-          isExpanded
-        }))
-      );
-    };
-    const toggleExpandedStateStepListItem = (stepListItem) => updateStepListItem(stepListItem, (item) => __spreadProps(__spreadValues({}, item), {
-      isExpanded: !item.isExpanded
-    }));
-    const handleExpandStepListItem = (stepListItem) => updateStepListItem(stepListItem, (item) => __spreadProps(__spreadValues({}, item), {
-      isExpanded: true
-    }));
-    return /* @__PURE__ */ jsxs93(Fragment40, { children: [
-      /* @__PURE__ */ jsx164(
-        WfoStepListHeader,
-        {
-          showHiddenKeys,
-          showRaw,
-          showDelta,
-          showTracebackButton: traceBack !== null,
-          showTraceback,
-          allDetailToggleText: allStepsAreExpanded ? t("collapseAll") : t("expandAll"),
-          onChangeShowHiddenKeys: setShowHiddenKeys,
-          onChangeShowRaw: setShowRaw,
-          onChangeShowDelta: setShowDelta,
-          onToggleAllDetailsIsOpen: () => setExpandedStateStepListItems(!allStepsAreExpanded),
-          onShowTraceback: setShowTraceback,
-          isTask
-        }
-      ),
-      showTraceback && /* @__PURE__ */ jsx164(WfoTraceback, { children: traceBack }),
-      showRaw && /* @__PURE__ */ jsx164(WfoProcessRawData, { processId }),
-      showDelta && /* @__PURE__ */ jsx164(WfoProcessSubscriptionDelta, { processId }),
-      !showRaw && !showDelta && /* @__PURE__ */ jsx164(
-        WfoStepList,
-        {
-          ref: reference,
-          stepListItems,
-          startedAt,
-          showHiddenKeys,
-          isTask,
-          onToggleExpandStepListItem: toggleExpandedStateStepListItem,
-          processId,
-          onTriggerExpandStepListItem: handleExpandStepListItem
-        }
-      )
-    ] });
-  }
-);
-WfoWorkflowStepList.displayName = "WfoWorkflowStepList";
 
-// src/components/WfoWorkflowSteps/WfoWorkflowStepList/WfoStepListHeader.tsx
-import { useState as useState38 } from "react";
-import { useTranslations as useTranslations51 } from "next-intl";
+// src/pages/processes/WfoStartProcessPage.tsx
+import { useCallback as useCallback7, useEffect as useEffect25, useMemo as useMemo5, useState as useState39 } from "react";
+import { useTranslations as useTranslations55 } from "next-intl";
+import { useRouter as useRouter9 } from "next/router";
 import {
-  EuiButton as EuiButton11,
-  EuiFlexGroup as EuiFlexGroup19,
-  EuiForm as EuiForm2,
-  EuiFormRow as EuiFormRow20,
-  EuiPopover as EuiPopover5,
-  EuiSwitch as EuiSwitch3,
-  EuiText as EuiText34
+  EuiFlexGroup as EuiFlexGroup21,
+  EuiFlexItem as EuiFlexItem28,
+  EuiHorizontalRule as EuiHorizontalRule5,
+  EuiPanel as EuiPanel6,
+  EuiText as EuiText36
 } from "@elastic/eui";
 
-// src/components/WfoTextAnchor/WfoTextAnchor.tsx
-import { EuiText as EuiText33 } from "@elastic/eui";
+// src/components/WfoWorkflowSteps/WfoStep/WfoStep.tsx
+import React47 from "react";
+import { useTranslations as useTranslations50 } from "next-intl";
+import { EuiFlexGroup as EuiFlexGroup18, EuiFlexItem as EuiFlexItem26, EuiPanel as EuiPanel5, EuiText as EuiText31 } from "@elastic/eui";
 
-// src/components/WfoTextAnchor/styles.ts
-import { css as css30 } from "@emotion/react";
-var getStyles16 = ({ theme }) => {
-  const textAnchorStyle = css30({
-    marginTop: theme.size.xxs,
+// src/components/WfoWorkflowSteps/WfoStepStatusIcon/WfoStepStatusIcon.tsx
+import { EuiFlexItem as EuiFlexItem24 } from "@elastic/eui";
+
+// src/components/WfoWorkflowSteps/styles.ts
+import { css as css27 } from "@emotion/react";
+var getStyles14 = ({ theme, toSecondaryColor }) => {
+  const stepSpacerStyle = css27({
+    borderLeft: `1px solid ${theme.colors.darkShade}`,
+    height: "24px",
+    marginLeft: "36px"
+  });
+  const stepRowStyle = css27({
+    flexGrow: 1,
+    alignItems: "center",
+    justifyContent: "flex-end"
+  });
+  const stepListHeaderStyle = css27({
+    marginBottom: "24px",
+    marginTop: "60px",
+    alignItems: "flex-end"
+  });
+  const stepListContentStyle = css27({
+    flexDirection: "row",
+    alignItems: "center"
+  });
+  const stepListContentBoldTextStyle = css27({
+    fontSize: theme.size.base,
+    fontWeight: theme.font.weight.bold
+  });
+  const stepListContentAnchorStyle = css27({
+    marginTop: 2,
     marginLeft: 0,
     fontSize: theme.size.m,
     fontWeight: theme.font.weight.bold,
     color: theme.colors.link,
     cursor: "pointer"
   });
+  const stepListOptionsContainerStyle = css27({
+    flexGrow: 0
+  });
+  const stepStateIcon = {
+    height: "40px",
+    width: "40px",
+    alignItems: "center",
+    display: "flex",
+    justifyContent: "center",
+    borderRadius: "24px"
+  };
+  const stepDurationStyle = {
+    fontSize: theme.size.m,
+    color: theme.colors.disabled,
+    fontWeight: theme.font.weight.semiBold
+  };
+  const stepStateSuccessIconStyle = css27(__spreadProps(__spreadValues({}, stepStateIcon), {
+    backgroundColor: toSecondaryColor(theme.colors.primary)
+  }));
+  const stepStateSuspendIconStyle = css27(__spreadProps(__spreadValues({}, stepStateIcon), {
+    backgroundColor: toSecondaryColor(theme.colors.warning)
+  }));
+  const stepStatePendingIconStyle = css27(__spreadProps(__spreadValues({}, stepStateIcon), {
+    backgroundColor: toSecondaryColor(theme.colors.darkShade)
+  }));
+  const stepStateFailedIconStyle = css27(__spreadProps(__spreadValues({}, stepStateIcon), {
+    backgroundColor: toSecondaryColor(theme.colors.danger)
+  }));
+  const stepHeaderRightStyle = css27({
+    alignItems: "center"
+  });
+  const stepEmailContainerStyle = css27({
+    paddingLeft: 24,
+    width: 600,
+    marginTop: 0
+  });
+  const getStepHeaderStyle = (isClickable) => css27({
+    gap: 0,
+    alignItems: "center",
+    cursor: isClickable ? "pointer" : "default"
+  });
+  const getStepToggleExpandStyle = (isVisible) => css27({
+    marginRight: theme.base / 2,
+    visibility: isVisible ? "visible" : "hidden"
+  });
   return {
-    textAnchorStyle
+    stepDurationStyle,
+    stepEmailContainerStyle,
+    stepHeaderRightStyle,
+    stepListContentAnchorStyle,
+    stepListContentBoldTextStyle,
+    stepListContentStyle,
+    stepListHeaderStyle,
+    stepListOptionsContainerStyle,
+    stepRowStyle,
+    stepSpacerStyle,
+    stepStateFailedIconStyle,
+    stepStatePendingIconStyle,
+    stepStateSuccessIconStyle,
+    stepStateSuspendIconStyle,
+    getStepHeaderStyle,
+    getStepToggleExpandStyle
   };
 };
 
-// src/components/WfoTextAnchor/WfoTextAnchor.tsx
-import { jsx as jsx165 } from "@emotion/react/jsx-runtime";
-var WfoTextAnchor = ({ text, onClick }) => {
-  const { textAnchorStyle } = useWithOrchestratorTheme(getStyles16);
-  return /* @__PURE__ */ jsx165(EuiText33, { onClick, css: textAnchorStyle, children: text });
+// src/components/WfoWorkflowSteps/WfoStepStatusIcon/WfoStepStatusIcon.tsx
+import { jsx as jsx160, jsxs as jsxs89 } from "@emotion/react/jsx-runtime";
+var SubIcon = ({ stepStatus, color = "" }) => {
+  switch (stepStatus) {
+    case "suspend" /* SUSPEND */:
+      return /* @__PURE__ */ jsx160(WfoMinusCircleFill, { color });
+    case "failed" /* FAILED */:
+      return /* @__PURE__ */ jsx160(WfoXCircleFill, { color });
+    default:
+      return /* @__PURE__ */ jsx160(WfoCheckmarkCircleFill, { color });
+  }
 };
-
-// src/components/WfoWorkflowSteps/WfoWorkflowStepList/WfoStepListHeader.tsx
-import { jsx as jsx166, jsxs as jsxs94 } from "@emotion/react/jsx-runtime";
-var WfoStepListHeader = ({
-  showHiddenKeys,
-  showRaw,
-  showDelta,
-  showTraceback,
-  showTracebackButton,
-  onChangeShowHiddenKeys,
-  onChangeShowRaw,
-  onChangeShowDelta,
-  allDetailToggleText,
-  onToggleAllDetailsIsOpen,
-  onShowTraceback,
-  isTask
+var MainIcon = ({ stepStatus, color = "", isStartStep }) => {
+  if (isStartStep) {
+    return /* @__PURE__ */ jsx160(WfoPlayFill, { color });
+  }
+  switch (stepStatus) {
+    case "form" /* FORM */:
+      return /* @__PURE__ */ jsx160(WfoPencilAlt, { color });
+    default:
+      return /* @__PURE__ */ jsx160(WfoCogFill, { color, width: 16, height: 16 });
+  }
+};
+var WfoStepStatusIcon = ({
+  stepStatus,
+  isStartStep = false
 }) => {
-  const t = useTranslations51("processes.steps");
   const { theme } = useOrchestratorTheme();
   const {
-    stepListHeaderStyle,
-    stepListContentStyle,
-    stepListContentBoldTextStyle,
-    stepListOptionsContainerStyle
+    stepStateSuccessIconStyle,
+    stepStateSuspendIconStyle,
+    stepStatePendingIconStyle,
+    stepStateFailedIconStyle
   } = useWithOrchestratorTheme(getStyles14);
-  const [isViewOptionOpen, setIsViewOptionOpen] = useState38(false);
-  const onViewOptionClick = () => setIsViewOptionOpen((isViewOptionOpen2) => !isViewOptionOpen2);
-  const closeViewOption = () => setIsViewOptionOpen(false);
-  const viewOptionButton = /* @__PURE__ */ jsx166(
-    EuiButton11,
-    {
-      onClick: onViewOptionClick,
-      iconType: () => /* @__PURE__ */ jsx166(WfoEyeFill, { color: theme.colors.link }),
-      iconSide: "right",
-      size: "s",
-      children: t("viewOptions")
+  const [
+    stepStateStyle,
+    mainIconColor,
+    hasSubIcon = false,
+    subIconColor = ""
+  ] = (() => {
+    switch (stepStatus) {
+      case "suspend" /* SUSPEND */:
+        return [
+          stepStateSuspendIconStyle,
+          theme.colors.warningText,
+          true,
+          theme.colors.warningText
+        ];
+      case "pending" /* PENDING */:
+        return [stepStatePendingIconStyle, theme.colors.darkShade];
+      case "failed" /* FAILED */:
+        return [
+          stepStateFailedIconStyle,
+          theme.colors.dangerText,
+          true,
+          theme.colors.dangerText
+        ];
+      case "skipped" /* SKIPPED */:
+        return [
+          stepStateSuccessIconStyle,
+          theme.colors.primaryText,
+          true,
+          theme.colors.darkShade
+        ];
+      case "form" /* FORM */:
+        return [stepStateSuccessIconStyle, theme.colors.link];
+      default:
+        return [
+          stepStateSuccessIconStyle,
+          theme.colors.primaryText,
+          true,
+          theme.colors.successText
+        ];
     }
-  );
-  return /* @__PURE__ */ jsxs94(EuiFlexGroup19, { css: stepListHeaderStyle, children: [
-    /* @__PURE__ */ jsxs94(EuiFlexGroup19, { css: stepListContentStyle, children: [
-      /* @__PURE__ */ jsx166(EuiText34, { css: stepListContentBoldTextStyle, children: t(isTask ? "taskSteps" : "workflowSteps") }),
-      !showRaw && /* @__PURE__ */ jsx166(
-        WfoTextAnchor,
-        {
-          text: allDetailToggleText,
-          onClick: onToggleAllDetailsIsOpen
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs94(
-      EuiFlexGroup19,
+  })();
+  return /* @__PURE__ */ jsxs89(EuiFlexItem24, { css: { flexDirection: "row" }, grow: 0, children: [
+    /* @__PURE__ */ jsx160("div", { css: stepStateStyle, children: /* @__PURE__ */ jsx160(
+      MainIcon,
       {
-        justifyContent: "flexEnd",
-        direction: "row",
-        css: stepListOptionsContainerStyle,
-        gutterSize: "s",
-        children: [
-          showTracebackButton && /* @__PURE__ */ jsx166(
-            EuiButton11,
-            {
-              onClick: () => onShowTraceback(!showTraceback),
-              size: "s",
-              children: showTraceback ? t("hideTraceback") : t("showTraceback")
-            }
-          ),
-          /* @__PURE__ */ jsx166(
-            EuiButton11,
-            {
-              onClick: () => onChangeShowDelta(!showDelta),
-              iconSide: "right",
-              size: "s",
-              iconType: () => /* @__PURE__ */ jsx166(WfoCode, { color: theme.colors.link }),
-              children: showDelta ? t("hideDelta") : t("showDelta")
-            }
-          ),
-          /* @__PURE__ */ jsx166(
-            EuiPopover5,
-            {
-              button: viewOptionButton,
-              isOpen: isViewOptionOpen,
-              closePopover: closeViewOption,
-              display: "block",
-              children: /* @__PURE__ */ jsx166("div", { children: /* @__PURE__ */ jsxs94(EuiForm2, { component: "form", children: [
-                /* @__PURE__ */ jsx166(EuiFormRow20, { children: /* @__PURE__ */ jsx166(
-                  EuiSwitch3,
-                  {
-                    label: "Hidden keys",
-                    checked: showHiddenKeys,
-                    onChange: (e) => {
-                      onChangeShowHiddenKeys(
-                        e.target.checked
-                      );
-                      closeViewOption();
-                    }
-                  }
-                ) }),
-                /* @__PURE__ */ jsx166(EuiFormRow20, { children: /* @__PURE__ */ jsx166(
-                  EuiSwitch3,
-                  {
-                    label: "Raw JSON data",
-                    checked: showRaw,
-                    onChange: (e) => {
-                      onChangeShowRaw(e.target.checked);
-                      closeViewOption();
-                    }
-                  }
-                ) })
-              ] }) })
-            }
-          )
-        ]
+        color: mainIconColor,
+        stepStatus,
+        isStartStep
+      }
+    ) }),
+    /* @__PURE__ */ jsx160(
+      "div",
+      {
+        css: {
+          transform: "translate(-16px, -8px)",
+          width: `${theme.base}`,
+          visibility: hasSubIcon ? "visible" : "hidden"
+        },
+        children: /* @__PURE__ */ jsx160(SubIcon, { color: subIconColor, stepStatus })
       }
     )
   ] });
 };
 
-// src/pages/processes/WfoProcessDetail.tsx
-import { useContext as useContext7 } from "react";
-import { useTranslations as useTranslations52 } from "next-intl";
-import { useRouter as useRouter8 } from "next/router";
-import {
-  EuiButton as EuiButton12,
-  EuiFlexGroup as EuiFlexGroup20,
-  EuiFlexItem as EuiFlexItem27,
-  EuiPageHeader as EuiPageHeader2,
-  EuiPanel as EuiPanel5,
-  EuiSpacer as EuiSpacer16,
-  EuiText as EuiText35
-} from "@elastic/eui";
-
-// src/pages/processes/timelineUtils.ts
-var getMostAccurateTimelineStatus = (statusPreviousStep, statusCurrentStep) => statusCurrentStep !== "pending" /* PENDING */ ? statusCurrentStep : statusPreviousStep;
-var isNonRetryableState = (status) => {
-  return status === "complete" /* COMPLETE */ || status === "success" /* SUCCESS */ || status === "skipped" /* SKIPPED */;
-};
-var isFailedStep = (step) => step.status === "failed" /* FAILED */;
-var stepsShouldBeMerged = (previousStep, currentStep) => !isNonRetryableState(previousStep.status) && previousStep.name === currentStep.name;
-var convertStepsToGroupedSteps = (steps) => steps.reduce(
-  (previousGroupedSteps, currentStep, index, allSteps) => {
-    const previousGroupedStep = previousGroupedSteps.slice(-1)[0];
-    if (index > 0 && stepsShouldBeMerged(allSteps[index - 1], currentStep)) {
-      const allGroupedStepsExceptLast = previousGroupedSteps.slice(
-        0,
-        -1
-      );
-      const updatedLastGroupedStep = {
-        steps: [...previousGroupedStep.steps, currentStep]
-      };
-      return [...allGroupedStepsExceptLast, updatedLastGroupedStep];
-    }
-    return [
-      ...previousGroupedSteps,
-      {
-        steps: [currentStep]
-      }
-    ];
-  },
-  []
-);
-var mapStepToTimelineItem = (processDetailStep) => {
-  return {
-    id: processDetailStep.stepId,
-    processStepStatus: processDetailStep.status,
-    stepDetail: processDetailStep.name
-  };
-};
-var mapGroupedStepToTimelineItem = (groupedStep) => {
-  if (groupedStep.steps.length === 1) {
-    return mapStepToTimelineItem(groupedStep.steps[0]);
-  }
-  return groupedStep.steps.reduce(
-    (previousTimelineItem, currentStep) => {
-      var _a;
-      return __spreadProps(__spreadValues({}, previousTimelineItem), {
-        id: (_a = currentStep.stepId) != null ? _a : previousTimelineItem.id,
-        processStepStatus: getMostAccurateTimelineStatus(
-          previousTimelineItem.processStepStatus,
-          currentStep.status
-        )
-      });
-    },
-    __spreadProps(__spreadValues({}, mapStepToTimelineItem(groupedStep.steps[0])), {
-      value: groupedStep.steps.filter(isFailedStep).length || void 0
-    })
-  );
-};
-var mapGroupedStepsToTimelineItems = (groupedSteps) => groupedSteps.map(mapGroupedStepToTimelineItem);
-var getIndexOfCurrentStep = (timelineItems) => {
-  const reversedTimelineItems = [...timelineItems].reverse();
-  const reversedIndexOfCurrentStep = reversedTimelineItems.findIndex(
-    (timelineItem) => timelineItem.processStepStatus === "running" /* RUNNING */
-  );
-  if (reversedIndexOfCurrentStep !== -1) {
-    return timelineItems.length - reversedIndexOfCurrentStep - 1;
+// src/components/WfoWorkflowSteps/stepListUtils.ts
+var STEP_STATE_HIDDEN_KEYS = [
+  "label_",
+  "divider_",
+  "__",
+  "confirmation_mail"
+];
+var getStepContent = (stepDelta, showHiddenKeys) => {
+  if (showHiddenKeys) {
+    return stepDelta;
   }
-  const indexOfFirstPending = timelineItems.findIndex(
-    (timelineItem) => timelineItem.processStepStatus === "pending" /* PENDING */
+  return Object.entries(stepDelta).filter(
+    ([key]) => !STEP_STATE_HIDDEN_KEYS.some((word) => key.startsWith(word))
+  ).reduce(
+    (previousValue, currentValue) => __spreadProps(__spreadValues({}, previousValue), {
+      [currentValue[0]]: currentValue[1]
+    }),
+    {}
   );
-  if (indexOfFirstPending !== -1) {
-    return indexOfFirstPending - 1;
-  }
-  return timelineItems.length - 1;
 };
 
-// src/pages/processes/WfoProcessDetail.tsx
-import { Fragment as Fragment41, jsx as jsx167, jsxs as jsxs95 } from "@emotion/react/jsx-runtime";
-var ProcessHeaderValue = ({
-  translationKey,
-  value = ""
+// src/components/WfoWorkflowSteps/WfoStep/WfoStepForm.tsx
+import { useState as useState35 } from "react";
+import { EuiFlexItem as EuiFlexItem25 } from "@elastic/eui";
+import { jsx as jsx161 } from "@emotion/react/jsx-runtime";
+var WfoStepForm = ({
+  userInputForm,
+  isTask,
+  processId
 }) => {
-  const t = useTranslations52("processes.detail");
+  const [isProcessing, setIsProcessing] = useState35(false);
+  const [hasError, setHasError] = useState35(false);
   const { theme } = useOrchestratorTheme();
-  return /* @__PURE__ */ jsxs95(
-    EuiFlexGroup20,
-    {
-      direction: "column",
-      gutterSize: "xs",
-      css: {
-        flex: 1,
-        whiteSpace: "nowrap",
-        overflow: "hidden"
-      },
-      children: [
-        /* @__PURE__ */ jsx167(EuiText35, { size: "xs", children: t(translationKey) }),
-        /* @__PURE__ */ jsx167(
-          EuiText35,
-          {
-            css: {
-              fontWeight: theme.font.weight.bold,
-              fontSize: theme.size.m,
-              overflow: "hidden",
-              textOverflow: "ellipsis"
-            },
-            children: value
-          }
-        )
-      ]
+  const [resumeProcess] = useResumeProcessMutation();
+  const submitForm = (processInput) => {
+    if (!processId) {
+      return Promise.reject();
     }
-  );
-};
-var WfoProcessDetail = ({
-  children,
-  processDetail,
-  pageTitle,
-  productNames,
-  buttonsAreDisabled,
-  timelineItems,
-  onTimelineItemClick,
-  isLoading = false,
-  hasError = false
-}) => {
-  var _a, _b, _c;
-  const t = useTranslations52("processes.detail");
-  const { theme } = useOrchestratorTheme();
-  const { showConfirmDialog } = useContext7(ConfirmationDialogContext);
-  const [retryProcess] = useRetryProcessMutation();
-  const [deleteProcess] = useDeleteProcessMutation();
-  const [abortProcess] = useAbortProcessMutation();
-  const router = useRouter8();
-  const { isEngineRunningNow } = useCheckEngineStatus();
-  const { isAllowed } = usePolicy();
-  const listIncludesStatus = (processStatusesForDisabledState, status) => status ? processStatusesForDisabledState.map((stat) => stat.toUpperCase()).includes(status) : false;
-  const retryButtonIsDisabled = buttonsAreDisabled || !listIncludesStatus(
-    [
-      "failed" /* FAILED */,
-      "api_unavailable" /* API_UNAVAILABLE */,
-      "inconsistent_data" /* INCONSISTENT_DATA */,
-      "waiting" /* WAITING */
-    ],
-    processDetail == null ? void 0 : processDetail.lastStatus
-  );
-  const abortButtonIsDisabled = buttonsAreDisabled || listIncludesStatus(
-    ["completed" /* COMPLETED */, "aborted" /* ABORTED */],
-    processDetail == null ? void 0 : processDetail.lastStatus
-  );
-  const deleteButtonIsDisabled = buttonsAreDisabled || listIncludesStatus(["running" /* RUNNING */], processDetail == null ? void 0 : processDetail.lastStatus);
-  const processIsTask = (processDetail == null ? void 0 : processDetail.isTask) === true;
-  const handleActionButtonClick = (action) => () => __async(void 0, null, function* () {
-    if (yield isEngineRunningNow()) {
-      action();
-    }
-  });
-  const retryAction = () => showConfirmDialog({
-    question: t(
-      processIsTask ? "retryTaskQuestion" : "retryWorkflowQuestion",
-      {
-        workflowName: processDetail == null ? void 0 : processDetail.workflowName
+    return resumeProcess({ processId, userInputs: processInput }).unwrap().then(() => {
+      setIsProcessing(true);
+    }).catch((error) => {
+      if ((error == null ? void 0 : error.status) !== 510 /* FormNotComplete */) {
+        if ((error == null ? void 0 : error.status) === 400 /* BadRequest */) {
+          throw error;
+        }
+        console.error(error);
+        setHasError(true);
+      } else {
+        throw error;
       }
-    ),
-    confirmAction: () => {
-      (processDetail == null ? void 0 : processDetail.processId) && retryProcess({ processId: processDetail.processId });
+    });
+  };
+  return /* @__PURE__ */ jsx161(EuiFlexItem25, { css: { margin: theme.size.m }, children: hasError && /* @__PURE__ */ jsx161(WfoError, {}) || isProcessing && /* @__PURE__ */ jsx161(WfoLoading, {}) || /* @__PURE__ */ jsx161(
+    UserInputFormWizard,
+    {
+      stepUserInput: userInputForm,
+      stepSubmit: submitForm,
+      hasNext: false,
+      isTask,
+      isResuming: true
     }
-  });
-  const abortAction = () => showConfirmDialog({
-    question: t(
-      processIsTask ? "abortTaskQuestion" : "abortWorkflowQuestion",
-      {
-        workflowName: processDetail == null ? void 0 : processDetail.workflowName
+  ) });
+};
+
+// src/components/WfoWorkflowSteps/WfoStep/WfoStep.tsx
+import { Fragment as Fragment38, jsx as jsx162, jsxs as jsxs90 } from "@emotion/react/jsx-runtime";
+var WfoStep = React47.forwardRef(
+  ({
+    stepListItem,
+    onToggleStepDetail,
+    startedAt,
+    showHiddenKeys,
+    isStartStep = false,
+    isTask,
+    processId
+  }, ref) => {
+    var _a;
+    const { isExpanded, step, userInputForm } = stepListItem;
+    const { theme } = useOrchestratorTheme();
+    const {
+      stepEmailContainerStyle,
+      getStepHeaderStyle,
+      stepHeaderRightStyle,
+      stepListContentBoldTextStyle,
+      stepDurationStyle,
+      stepRowStyle,
+      getStepToggleExpandStyle
+    } = useWithOrchestratorTheme(getStyles14);
+    const t = useTranslations50("processes.steps");
+    const hasHtmlMail = (_a = step.stateDelta) == null ? void 0 : _a.hasOwnProperty("confirmation_mail");
+    const stepContent = step.stateDelta ? getStepContent(step.stateDelta, showHiddenKeys) : {};
+    const hasStepContent = hasHtmlMail || Object.keys(stepContent).length > 0;
+    const displayMailConfirmation = (value) => {
+      if (!value) {
+        return "";
       }
-    ),
-    confirmAction: () => {
-      (processDetail == null ? void 0 : processDetail.processId) && abortProcess({ processId: processDetail.processId });
-      router.push(processIsTask ? PATH_TASKS : PATH_WORKFLOWS);
-    }
-  });
-  const deleteAction = () => showConfirmDialog({
-    question: t("deleteQuestion", {
-      workflowName: processDetail == null ? void 0 : processDetail.workflowName
-    }),
-    confirmAction: () => {
-      (processDetail == null ? void 0 : processDetail.processId) && deleteProcess({ processId: processDetail.processId });
-      router.push(PATH_TASKS);
-    }
-  });
-  return /* @__PURE__ */ jsxs95(Fragment41, { children: [
-    /* @__PURE__ */ jsxs95(EuiFlexGroup20, { children: [
-      /* @__PURE__ */ jsxs95(EuiFlexItem27, { children: [
-        /* @__PURE__ */ jsx167(EuiPageHeader2, { pageTitle }),
-        /* @__PURE__ */ jsx167(EuiSpacer16, {}),
-        /* @__PURE__ */ jsx167(
-          WfoProductInformationWithLink,
+      return /* @__PURE__ */ jsxs90(EuiText31, { size: "s", children: [
+        /* @__PURE__ */ jsx162("h4", { children: "To" }),
+        /* @__PURE__ */ jsx162("p", { children: value.to.map(
+          (v, i) => /* @__PURE__ */ jsxs90("div", { children: [
+            v.name,
+            " <",
+            /* @__PURE__ */ jsx162("a", { href: `mailto: ${v.email}`, children: v.email }),
+            ">"
+          ] }, `to-${i}`)
+        ) }),
+        /* @__PURE__ */ jsx162("h4", { children: "CC" }),
+        /* @__PURE__ */ jsx162("p", { children: value.cc.map(
+          (v, i) => /* @__PURE__ */ jsxs90("div", { children: [
+            v.name,
+            " <",
+            /* @__PURE__ */ jsx162("a", { href: `mailto: ${v.email}`, children: v.email }),
+            ">"
+          ] }, `cc-${i}`)
+        ) }),
+        /* @__PURE__ */ jsx162("h4", { children: "Subject" }),
+        /* @__PURE__ */ jsx162("p", { children: value.subject }),
+        /* @__PURE__ */ jsx162("h4", { children: "Message" }),
+        /* @__PURE__ */ jsx162(
+          "div",
           {
-            productNames,
-            workflowName: (_a = processDetail == null ? void 0 : processDetail.workflowName) != null ? _a : ""
+            className: "emailMessage",
+            dangerouslySetInnerHTML: { __html: value.message }
           }
         )
-      ] }),
-      /* @__PURE__ */ jsxs95(
-        EuiFlexGroup20,
+      ] });
+    };
+    return /* @__PURE__ */ jsx162("div", { ref, children: /* @__PURE__ */ jsxs90(EuiPanel5, { children: [
+      /* @__PURE__ */ jsxs90(
+        EuiFlexGroup18,
         {
-          justifyContent: "flexEnd",
-          direction: "row",
-          css: { flexGrow: 0 },
-          gutterSize: "s",
+          css: getStepHeaderStyle(hasStepContent),
+          onClick: () => hasStepContent && onToggleStepDetail(),
           children: [
-            /* @__PURE__ */ jsx167(
-              WfoIsAllowedToRender,
-              {
-                resource: "/orchestrator/processes/retry/" /* PROCESS_RETRY */,
-                children: /* @__PURE__ */ jsx167(
-                  EuiButton12,
-                  {
-                    onClick: handleActionButtonClick(retryAction),
-                    iconType: () => /* @__PURE__ */ jsx167(
-                      WfoRefresh,
-                      {
-                        color: retryButtonIsDisabled ? theme.colors.subduedText : theme.colors.link
-                      }
-                    ),
-                    isDisabled: retryButtonIsDisabled,
-                    children: t("retry")
-                  }
-                )
-              }
-            ),
-            /* @__PURE__ */ jsx167(
-              WfoIsAllowedToRender,
+            /* @__PURE__ */ jsx162(
+              WfoStepStatusIcon,
               {
-                resource: "/orchestrator/processes/abort/" /* PROCESS_ABORT */,
-                children: /* @__PURE__ */ jsx167(
-                  EuiButton12,
-                  {
-                    onClick: handleActionButtonClick(abortAction),
-                    iconType: () => /* @__PURE__ */ jsx167(
-                      WfoXCircleFill,
-                      {
-                        color: abortButtonIsDisabled ? theme.colors.subduedText : theme.colors.danger
-                      }
-                    ),
-                    color: "danger",
-                    isDisabled: abortButtonIsDisabled,
-                    children: t("abort")
-                  }
-                )
+                stepStatus: step.status,
+                isStartStep
               }
             ),
-            processDetail && processIsTask && isAllowed("/orchestrator/processes/delete/" /* PROCESS_DELETE */) && /* @__PURE__ */ jsx167(
-              EuiButton12,
-              {
-                onClick: handleActionButtonClick(deleteAction),
-                iconType: () => /* @__PURE__ */ jsx167(
-                  WfoXCircleFill,
-                  {
-                    color: deleteButtonIsDisabled ? theme.colors.subduedText : theme.colors.danger
-                  }
-                ),
-                color: "danger",
-                isDisabled: deleteButtonIsDisabled,
-                children: t("delete")
-              }
-            )
+            /* @__PURE__ */ jsxs90(EuiFlexItem26, { grow: 0, children: [
+              /* @__PURE__ */ jsx162(EuiText31, { css: stepListContentBoldTextStyle, children: step.name }),
+              /* @__PURE__ */ jsxs90(EuiText31, { children: [
+                step.status,
+                " ",
+                step.executed && `- ${formatDate(step.executed)}`
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx162(EuiFlexGroup18, { css: stepRowStyle, children: step.executed && /* @__PURE__ */ jsxs90(Fragment38, { children: [
+              /* @__PURE__ */ jsxs90(
+                EuiFlexItem26,
+                {
+                  grow: 0,
+                  css: stepHeaderRightStyle,
+                  children: [
+                    /* @__PURE__ */ jsx162(EuiText31, { css: stepDurationStyle, children: t("duration") }),
+                    /* @__PURE__ */ jsx162(EuiText31, { size: "m", children: calculateTimeDifference(
+                      startedAt,
+                      step.executed
+                    ) })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx162(
+                EuiFlexItem26,
+                {
+                  grow: 0,
+                  css: getStepToggleExpandStyle(
+                    hasStepContent
+                  ),
+                  children: isExpanded && /* @__PURE__ */ jsx162(
+                    WfoChevronUp,
+                    {
+                      color: theme.colors.text
+                    }
+                  ) || /* @__PURE__ */ jsx162(
+                    WfoChevronDown,
+                    {
+                      color: theme.colors.text
+                    }
+                  )
+                }
+              )
+            ] }) })
           ]
         }
+      ),
+      hasStepContent && !hasHtmlMail && isExpanded && /* @__PURE__ */ jsx162(WfoJsonCodeBlock, { data: stepContent }),
+      isExpanded && hasHtmlMail && /* @__PURE__ */ jsx162("div", { css: stepEmailContainerStyle, children: displayMailConfirmation(
+        step.stateDelta.confirmation_mail
+      ) }),
+      step.status === "suspend" /* SUSPEND */ && userInputForm && /* @__PURE__ */ jsx162(
+        WfoStepForm,
+        {
+          userInputForm,
+          isTask,
+          processId
+        }
+      )
+    ] }) });
+  }
+);
+WfoStep.displayName = "WfoStep";
+
+// src/components/WfoWorkflowSteps/WfoStepList/WfoStepList.tsx
+import React48, { useImperativeHandle, useRef as useRef7 } from "react";
+import { Fragment as Fragment39, jsx as jsx163, jsxs as jsxs91 } from "@emotion/react/jsx-runtime";
+var WfoStepList = React48.forwardRef(
+  ({
+    stepListItems,
+    showHiddenKeys,
+    startedAt,
+    onToggleExpandStepListItem,
+    onTriggerExpandStepListItem,
+    isTask,
+    processId
+  }, reference) => {
+    const { stepSpacerStyle } = useWithOrchestratorTheme(getStyles14);
+    const stepReferences = useRef7(/* @__PURE__ */ new Map());
+    let stepStartTime = startedAt;
+    useImperativeHandle(reference, () => ({
+      scrollToStep: (stepId) => __async(void 0, null, function* () {
+        var _a;
+        try {
+          yield new Promise((resolve, reject) => {
+            const foundStepListItem = stepListItems.find(
+              (value) => value.step.stepId === stepId
+            );
+            if (!foundStepListItem) {
+              return reject(void 0);
+            }
+            return resolve(
+              onTriggerExpandStepListItem(foundStepListItem)
+            );
+          });
+          (_a = stepReferences.current.get(stepId)) == null ? void 0 : _a.scrollIntoView({
+            behavior: "smooth"
+          });
+        } catch (e) {
+          console.error(
+            "Error scrolling to step with stepId ",
+            stepId
+          );
+        }
+      })
+    }));
+    const getReferenceCallbackForStepId = (stepId) => (node) => node ? stepReferences.current.set(stepId, node) : stepReferences.current.delete(stepId);
+    return /* @__PURE__ */ jsx163(Fragment39, { children: stepListItems.map((stepListItem, index) => {
+      const stepComponent = /* @__PURE__ */ jsxs91("div", { children: [
+        index !== 0 && /* @__PURE__ */ jsx163("div", { css: stepSpacerStyle }),
+        /* @__PURE__ */ jsx163(
+          WfoStep,
+          {
+            ref: getReferenceCallbackForStepId(
+              stepListItem.step.stepId
+            ),
+            onToggleStepDetail: () => onToggleExpandStepListItem(stepListItem),
+            stepListItem,
+            startedAt: stepStartTime,
+            showHiddenKeys,
+            isStartStep: index === 0,
+            isTask,
+            processId
+          }
+        )
+      ] }, `step-${index}`);
+      if (index > 0) {
+        stepStartTime = stepListItem.step.executed;
+      }
+      return stepComponent;
+    }) });
+  }
+);
+WfoStepList.displayName = "WfoStepList";
+
+// src/components/WfoWorkflowSteps/WfoWorkflowStepList/WfoWorkflowStepList.tsx
+import React50, { useEffect as useEffect24, useState as useState37 } from "react";
+import { useTranslations as useTranslations53 } from "next-intl";
+
+// src/components/WfoDiff/WfoDiff.tsx
+var refractor = __toESM(require_refractor(), 1);
+import { useCallback as useCallback6, useEffect as useEffect23, useMemo as useMemo4, useState as useState36 } from "react";
+import { Diff, Hunk, parseDiff, tokenize } from "react-diff-view";
+import "react-diff-view/style/index.css";
+import { useTranslations as useTranslations51 } from "next-intl";
+import "prism-themes/themes/prism-ghcolors.min.css";
+import { diffLines, formatLines } from "unidiff";
+import {
+  EuiButtonIcon as EuiButtonIcon6,
+  EuiFlexGroup as EuiFlexGroup19,
+  EuiFlexItem as EuiFlexItem27,
+  EuiSpacer as EuiSpacer16,
+  EuiText as EuiText32
+} from "@elastic/eui";
+
+// src/components/WfoDiff/styles.ts
+import { shade as shade2, tint as tint4 } from "@elastic/eui";
+import { css as css28 } from "@emotion/react";
+var getWfoDiffStyles = ({
+  theme,
+  toSecondaryColor,
+  isDarkThemeActive
+}) => {
+  const SHADE_FACTOR = 0.5;
+  const TINT_FACTOR = 0.65;
+  const insertGutterColor = toSecondaryColor(theme.colors.success);
+  const insertCodeColor = isDarkThemeActive ? shade2(insertGutterColor, SHADE_FACTOR) : tint4(insertGutterColor, TINT_FACTOR);
+  const deleteColor = toSecondaryColor(theme.colors.danger);
+  const deleteSecondaryColor = isDarkThemeActive ? shade2(deleteColor, SHADE_FACTOR) : tint4(deleteColor, TINT_FACTOR);
+  const diffStyle = css28({
+    ".diff-code-insert": {
+      backgroundColor: insertCodeColor
+    },
+    ".diff-gutter-insert": {
+      backgroundColor: insertGutterColor
+    },
+    ".diff-code-delete": {
+      backgroundColor: deleteSecondaryColor
+    },
+    ".diff-gutter-delete": {
+      backgroundColor: deleteColor
+    },
+    ".operator, .punctuation": {
+      color: theme.colors.text
+    }
+  });
+  return {
+    diffStyle
+  };
+};
+
+// src/components/WfoDiff/WfoDiff.tsx
+import { jsx as jsx164, jsxs as jsxs92 } from "@emotion/react/jsx-runtime";
+var EMPTY_HUNKS = [];
+var SMALL_CONTEXT = 3;
+var FULL_CONTEXT = 1e6;
+var WfoDiff = ({ oldText, newText, syntax }) => {
+  const t = useTranslations51("processes.delta");
+  const [showSplit, setShowSplit] = useState36(true);
+  const [showFull, setShowFull] = useState36(false);
+  const { diffStyle } = useWithOrchestratorTheme(getWfoDiffStyles);
+  const [{ type, hunks }, setDiff] = useState36({
+    type: "modify",
+    hunks: []
+  });
+  const updateDiffText = useCallback6(() => {
+    const diffText = formatLines(diffLines(oldText, newText), {
+      context: showFull ? FULL_CONTEXT : SMALL_CONTEXT
+    });
+    const [diff] = parseDiff(diffText, { nearbySequences: "zip" });
+    setDiff(diff);
+  }, [oldText, newText, setDiff, showFull]);
+  const tokens = useMemo4(() => {
+    if (!hunks) {
+      return void 0;
+    }
+    const options = {
+      refractor,
+      highlight: !!syntax,
+      language: syntax != null ? syntax : ""
+    };
+    try {
+      return tokenize(hunks, options);
+    } catch (ex) {
+      return void 0;
+    }
+  }, [hunks, syntax]);
+  useEffect23(() => {
+    updateDiffText();
+  }, [updateDiffText, showFull]);
+  return /* @__PURE__ */ jsxs92("div", { children: [
+    /* @__PURE__ */ jsxs92(EuiFlexGroup19, { gutterSize: "xs", children: [
+      /* @__PURE__ */ jsx164(EuiFlexItem27, { grow: false, children: /* @__PURE__ */ jsx164(EuiText32, { children: /* @__PURE__ */ jsx164("h3", { children: t("title") }) }) }),
+      /* @__PURE__ */ jsx164(EuiFlexItem27, { grow: false, children: /* @__PURE__ */ jsx164(
+        EuiButtonIcon6,
+        {
+          size: "s",
+          iconType: showSplit ? "continuityAboveBelow" : "continuityWithin",
+          onClick: () => setShowSplit(!showSplit),
+          "aria-label": t(
+            showSplit ? "continuityAboveBelow" : "continuityWithin"
+          )
+        }
+      ) }),
+      /* @__PURE__ */ jsx164(EuiFlexItem27, { grow: false, children: /* @__PURE__ */ jsx164(
+        EuiButtonIcon6,
+        {
+          size: "s",
+          iconType: showFull ? "fullScreenExit" : "fullScreen",
+          onClick: () => setShowFull(!showFull),
+          "aria-label": t(
+            showFull ? "fullScreenExit" : "fullScreen"
+          )
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsx164(EuiSpacer16, {}),
+    /* @__PURE__ */ jsx164(
+      Diff,
+      {
+        css: diffStyle,
+        viewType: showSplit ? "split" : "unified",
+        diffType: type,
+        hunks: hunks || EMPTY_HUNKS,
+        tokens,
+        children: (hunks2) => hunks2.map((hunk) => /* @__PURE__ */ jsx164(Hunk, { hunk }, hunk.content))
+      }
+    )
+  ] });
+};
+var WfoDiff_default = WfoDiff;
+
+// src/components/WfoWorkflowSteps/WfoTraceback/WfoTraceback.tsx
+import { useTranslations as useTranslations52 } from "next-intl";
+import { EuiCodeBlock, EuiText as EuiText33 } from "@elastic/eui";
+
+// src/components/WfoWorkflowSteps/WfoTraceback/styles.ts
+import { css as css29 } from "@emotion/react";
+var getStyles15 = ({ theme }) => {
+  const codeBlockStyle = css29({
+    marginTop: theme.size.m,
+    marginBottom: theme.size.l,
+    borderRadius: theme.border.radius.medium
+  });
+  return {
+    codeBlockStyle
+  };
+};
+
+// src/components/WfoWorkflowSteps/WfoTraceback/WfoTraceback.tsx
+import { Fragment as Fragment40, jsx as jsx165, jsxs as jsxs93 } from "@emotion/react/jsx-runtime";
+var WfoTraceback = ({ children }) => {
+  const { codeBlockStyle } = useWithOrchestratorTheme(getStyles15);
+  const t = useTranslations52("processes.steps");
+  return /* @__PURE__ */ jsxs93(Fragment40, { children: [
+    /* @__PURE__ */ jsx165(EuiText33, { children: /* @__PURE__ */ jsx165("h3", { children: t("traceback") }) }),
+    /* @__PURE__ */ jsx165(EuiCodeBlock, { css: codeBlockStyle, children })
+  ] });
+};
+
+// src/components/WfoWorkflowSteps/WfoWorkflowStepList/WfoWorkflowStepList.tsx
+import { Fragment as Fragment41, jsx as jsx166, jsxs as jsxs94 } from "@emotion/react/jsx-runtime";
+var WfoProcessRawData = ({ processId }) => {
+  const { data, isFetching } = useGetRawProcessDetailQuery({ processId });
+  return isFetching ? /* @__PURE__ */ jsx166(WfoLoading, {}) : /* @__PURE__ */ jsx166(WfoJsonCodeBlock, { data: data || {} });
+};
+var WfoProcessSubscriptionDelta = ({
+  processId
+}) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h;
+  const { data, isFetching } = useGetRawProcessDetailQuery({ processId });
+  const subscriptionKey = (_c = (_b = (_a = data == null ? void 0 : data.current_state) == null ? void 0 : _a.subscription) == null ? void 0 : _b.subscription_id) != null ? _c : "";
+  const newText = (_e = (_d = data == null ? void 0 : data.current_state) == null ? void 0 : _d.subscription) != null ? _e : null;
+  const oldText = ((_f = data == null ? void 0 : data.current_state) == null ? void 0 : _f.__old_subscriptions__) && subscriptionKey in ((_g = data == null ? void 0 : data.current_state) == null ? void 0 : _g.__old_subscriptions__) ? (_h = data == null ? void 0 : data.current_state) == null ? void 0 : _h.__old_subscriptions__[subscriptionKey] : null;
+  return isFetching ? /* @__PURE__ */ jsx166(WfoLoading, {}) : /* @__PURE__ */ jsx166(
+    WfoDiff_default,
+    {
+      oldText: oldText ? JSON.stringify(oldText, null, 2) : "",
+      newText: newText ? JSON.stringify(newText, null, 2) : "",
+      syntax: "javascript"
+    }
+  );
+};
+var WfoWorkflowStepList = React50.forwardRef(
+  ({
+    steps = [],
+    traceBack,
+    startedAt,
+    processId,
+    isTask,
+    userInputForm
+  }, reference) => {
+    const [showHiddenKeys, setShowHiddenKeys] = useState37(false);
+    const [showRaw, setShowRaw] = useState37(false);
+    const [showDelta, setShowDelta] = useState37(false);
+    const [showTraceback, setShowTraceback] = useState37(false);
+    const t = useTranslations53("processes.steps");
+    const initialStepListItems = steps.map((step) => ({
+      step,
+      isExpanded: false
+    }));
+    const [stepListItems, setStepListItems] = useState37(initialStepListItems);
+    const persistStepListItemState = (previousStepListItems, updatedSteps, userInputForm2) => {
+      var _a;
+      const reversedSteps = [...updatedSteps].reverse();
+      const lastStepWithSuspendStatusStepId = (_a = reversedSteps.find(
+        (step) => step.status === "suspend" /* SUSPEND */
+      )) == null ? void 0 : _a.stepId;
+      return updatedSteps.map((step) => {
+        const previousStepListItem = previousStepListItems.find(
+          (previousStepListItem2) => previousStepListItem2.step.stepId === step.stepId
+        );
+        return {
+          step,
+          isExpanded: (previousStepListItem == null ? void 0 : previousStepListItem.isExpanded) || false,
+          userInputForm: lastStepWithSuspendStatusStepId === step.stepId && userInputForm2 ? userInputForm2 : void 0
+        };
+      });
+    };
+    useEffect24(() => {
+      setStepListItems(
+        (previousStepListItems) => persistStepListItemState(
+          previousStepListItems,
+          steps,
+          userInputForm
+        )
+      );
+    }, [steps, userInputForm]);
+    const updateStepListItem = (stepListItemToUpdate, updateFunction) => setStepListItems(
+      stepListItems.map(
+        (stepListItem) => stepListItem === stepListItemToUpdate ? updateFunction(stepListItem) : stepListItem
+      )
+    );
+    const allStepsAreExpanded = stepListItems.every(
+      (item) => item.isExpanded
+    );
+    const setExpandedStateStepListItems = (isExpanded) => {
+      setStepListItems(
+        stepListItems.map((item) => __spreadProps(__spreadValues({}, item), {
+          isExpanded
+        }))
+      );
+    };
+    const toggleExpandedStateStepListItem = (stepListItem) => updateStepListItem(stepListItem, (item) => __spreadProps(__spreadValues({}, item), {
+      isExpanded: !item.isExpanded
+    }));
+    const handleExpandStepListItem = (stepListItem) => updateStepListItem(stepListItem, (item) => __spreadProps(__spreadValues({}, item), {
+      isExpanded: true
+    }));
+    return /* @__PURE__ */ jsxs94(Fragment41, { children: [
+      /* @__PURE__ */ jsx166(
+        WfoStepListHeader,
+        {
+          showHiddenKeys,
+          showRaw,
+          showDelta,
+          showTracebackButton: traceBack !== null,
+          showTraceback,
+          allDetailToggleText: allStepsAreExpanded ? t("collapseAll") : t("expandAll"),
+          onChangeShowHiddenKeys: setShowHiddenKeys,
+          onChangeShowRaw: setShowRaw,
+          onChangeShowDelta: setShowDelta,
+          onToggleAllDetailsIsOpen: () => setExpandedStateStepListItems(!allStepsAreExpanded),
+          onShowTraceback: setShowTraceback,
+          isTask
+        }
+      ),
+      showTraceback && /* @__PURE__ */ jsx166(WfoTraceback, { children: traceBack }),
+      showRaw && /* @__PURE__ */ jsx166(WfoProcessRawData, { processId }),
+      showDelta && /* @__PURE__ */ jsx166(WfoProcessSubscriptionDelta, { processId }),
+      !showRaw && !showDelta && /* @__PURE__ */ jsx166(
+        WfoStepList,
+        {
+          ref: reference,
+          stepListItems,
+          startedAt,
+          showHiddenKeys,
+          isTask,
+          onToggleExpandStepListItem: toggleExpandedStateStepListItem,
+          processId,
+          onTriggerExpandStepListItem: handleExpandStepListItem
+        }
+      )
+    ] });
+  }
+);
+WfoWorkflowStepList.displayName = "WfoWorkflowStepList";
+
+// src/components/WfoWorkflowSteps/WfoWorkflowStepList/WfoStepListHeader.tsx
+import { useState as useState38 } from "react";
+import { useTranslations as useTranslations54 } from "next-intl";
+import {
+  EuiButton as EuiButton12,
+  EuiFlexGroup as EuiFlexGroup20,
+  EuiForm as EuiForm2,
+  EuiFormRow as EuiFormRow20,
+  EuiPopover as EuiPopover5,
+  EuiSwitch as EuiSwitch3,
+  EuiText as EuiText35
+} from "@elastic/eui";
+
+// src/components/WfoTextAnchor/WfoTextAnchor.tsx
+import { EuiText as EuiText34 } from "@elastic/eui";
+
+// src/components/WfoTextAnchor/styles.ts
+import { css as css30 } from "@emotion/react";
+var getStyles16 = ({ theme }) => {
+  const textAnchorStyle = css30({
+    marginTop: theme.size.xxs,
+    marginLeft: 0,
+    fontSize: theme.size.m,
+    fontWeight: theme.font.weight.bold,
+    color: theme.colors.link,
+    cursor: "pointer"
+  });
+  return {
+    textAnchorStyle
+  };
+};
+
+// src/components/WfoTextAnchor/WfoTextAnchor.tsx
+import { jsx as jsx167 } from "@emotion/react/jsx-runtime";
+var WfoTextAnchor = ({ text, onClick }) => {
+  const { textAnchorStyle } = useWithOrchestratorTheme(getStyles16);
+  return /* @__PURE__ */ jsx167(EuiText34, { onClick, css: textAnchorStyle, children: text });
+};
+
+// src/components/WfoWorkflowSteps/WfoWorkflowStepList/WfoStepListHeader.tsx
+import { jsx as jsx168, jsxs as jsxs95 } from "@emotion/react/jsx-runtime";
+var WfoStepListHeader = ({
+  showHiddenKeys,
+  showRaw,
+  showDelta,
+  showTraceback,
+  showTracebackButton,
+  onChangeShowHiddenKeys,
+  onChangeShowRaw,
+  onChangeShowDelta,
+  allDetailToggleText,
+  onToggleAllDetailsIsOpen,
+  onShowTraceback,
+  isTask
+}) => {
+  const t = useTranslations54("processes.steps");
+  const { theme } = useOrchestratorTheme();
+  const {
+    stepListHeaderStyle,
+    stepListContentStyle,
+    stepListContentBoldTextStyle,
+    stepListOptionsContainerStyle
+  } = useWithOrchestratorTheme(getStyles14);
+  const [isViewOptionOpen, setIsViewOptionOpen] = useState38(false);
+  const onViewOptionClick = () => setIsViewOptionOpen((isViewOptionOpen2) => !isViewOptionOpen2);
+  const closeViewOption = () => setIsViewOptionOpen(false);
+  const viewOptionButton = /* @__PURE__ */ jsx168(
+    EuiButton12,
+    {
+      onClick: onViewOptionClick,
+      iconType: () => /* @__PURE__ */ jsx168(WfoEyeFill, { color: theme.colors.link }),
+      iconSide: "right",
+      size: "s",
+      children: t("viewOptions")
+    }
+  );
+  return /* @__PURE__ */ jsxs95(EuiFlexGroup20, { css: stepListHeaderStyle, children: [
+    /* @__PURE__ */ jsxs95(EuiFlexGroup20, { css: stepListContentStyle, children: [
+      /* @__PURE__ */ jsx168(EuiText35, { css: stepListContentBoldTextStyle, children: t(isTask ? "taskSteps" : "workflowSteps") }),
+      !showRaw && /* @__PURE__ */ jsx168(
+        WfoTextAnchor,
+        {
+          text: allDetailToggleText,
+          onClick: onToggleAllDetailsIsOpen
+        }
       )
     ] }),
-    /* @__PURE__ */ jsx167(EuiSpacer16, {}),
-    /* @__PURE__ */ jsx167(
-      EuiPanel5,
+    /* @__PURE__ */ jsxs95(
+      EuiFlexGroup20,
       {
-        hasShadow: false,
-        hasBorder: false,
-        color: "subdued",
-        element: "div",
-        children: isLoading && !hasError && /* @__PURE__ */ jsx167(WfoLoading, {}) || processDetail !== void 0 && /* @__PURE__ */ jsxs95(EuiFlexGroup20, { direction: "row", gutterSize: "m", children: [
-          /* @__PURE__ */ jsx167(
-            ProcessHeaderValue,
-            {
-              translationKey: "status",
-              value: processDetail.lastStatus
-            }
-          ),
-          /* @__PURE__ */ jsx167(
-            ProcessHeaderValue,
-            {
-              translationKey: "lastStep",
-              value: processDetail == null ? void 0 : processDetail.lastStep
-            }
-          ),
-          processDetail.customer && /* @__PURE__ */ jsx167(
-            ProcessHeaderValue,
-            {
-              translationKey: "customer",
-              value: (_b = processDetail.customer) == null ? void 0 : _b.fullname
-            }
-          ),
-          /* @__PURE__ */ jsx167(
-            ProcessHeaderValue,
-            {
-              translationKey: "startedBy",
-              value: processDetail == null ? void 0 : processDetail.createdBy
-            }
-          ),
-          /* @__PURE__ */ jsx167(
-            ProcessHeaderValue,
+        justifyContent: "flexEnd",
+        direction: "row",
+        css: stepListOptionsContainerStyle,
+        gutterSize: "s",
+        children: [
+          showTracebackButton && /* @__PURE__ */ jsx168(
+            EuiButton12,
             {
-              translationKey: "startedOn",
-              value: (processDetail == null ? void 0 : processDetail.startedAt) ? parseIsoString(
-                parseDateRelativeToToday
-              )(processDetail == null ? void 0 : processDetail.startedAt) : ""
+              onClick: () => onShowTraceback(!showTraceback),
+              size: "s",
+              children: showTraceback ? t("hideTraceback") : t("showTraceback")
             }
           ),
-          /* @__PURE__ */ jsx167(
-            ProcessHeaderValue,
+          /* @__PURE__ */ jsx168(
+            EuiButton12,
             {
-              translationKey: "lastUpdate",
-              value: (processDetail == null ? void 0 : processDetail.lastModifiedAt) ? parseIsoString(
-                parseDateRelativeToToday
-              )(processDetail == null ? void 0 : processDetail.lastModifiedAt) : ""
+              onClick: () => onChangeShowDelta(!showDelta),
+              iconSide: "right",
+              size: "s",
+              iconType: () => /* @__PURE__ */ jsx168(WfoCode, { color: theme.colors.link }),
+              children: showDelta ? t("hideDelta") : t("showDelta")
             }
           ),
-          process && isAllowed(
-            "/orchestrator/subscriptions/view/from-process" /* PROCESS_RELATED_SUBSCRIPTIONS */
-          ) && processDetail.subscriptions && /* @__PURE__ */ jsxs95(
-            EuiFlexGroup20,
+          /* @__PURE__ */ jsx168(
+            EuiPopover5,
             {
-              gutterSize: "xs",
-              direction: "column",
-              css: {
-                flex: 1,
-                overflow: "hidden"
-              },
-              children: [
-                /* @__PURE__ */ jsx167(EuiText35, { size: "xs", children: t("relatedSubscriptions") }),
-                /* @__PURE__ */ jsx167(
-                  EuiText35,
+              button: viewOptionButton,
+              isOpen: isViewOptionOpen,
+              closePopover: closeViewOption,
+              display: "block",
+              children: /* @__PURE__ */ jsx168("div", { children: /* @__PURE__ */ jsxs95(EuiForm2, { component: "form", children: [
+                /* @__PURE__ */ jsx168(EuiFormRow20, { children: /* @__PURE__ */ jsx168(
+                  EuiSwitch3,
                   {
-                    css: {
-                      flex: 1,
-                      whiteSpace: "nowrap",
-                      overflow: "hidden",
-                      textOverflow: "ellipsis",
-                      fontSize: theme.size.m
-                    },
-                    children: /* @__PURE__ */ jsx167(
-                      WfoProcessListSubscriptionsCell,
-                      {
-                        subscriptions: process && ((_c = processDetail == null ? void 0 : processDetail.subscriptions) == null ? void 0 : _c.page.map(
-                          (subscription) => ({
-                            subscriptionId: subscription.subscriptionId,
-                            description: subscription.description
-                          })
-                        )) || [],
-                        renderDirection: "VERTICAL" /* VERTICAL */
-                      }
-                    )
+                    label: "Hidden keys",
+                    checked: showHiddenKeys,
+                    onChange: (e) => {
+                      onChangeShowHiddenKeys(
+                        e.target.checked
+                      );
+                      closeViewOption();
+                    }
                   }
-                )
-              ]
+                ) }),
+                /* @__PURE__ */ jsx168(EuiFormRow20, { children: /* @__PURE__ */ jsx168(
+                  EuiSwitch3,
+                  {
+                    label: "Raw JSON data",
+                    checked: showRaw,
+                    onChange: (e) => {
+                      onChangeShowRaw(e.target.checked);
+                      closeViewOption();
+                    }
+                  }
+                ) })
+              ] }) })
             }
           )
-        ] })
-      }
-    ),
-    /* @__PURE__ */ jsx167(EuiSpacer16, { size: "s" }),
-    /* @__PURE__ */ jsx167(
-      WfoTimeline,
-      {
-        timelineItems,
-        indexOfCurrentStep: getIndexOfCurrentStep(timelineItems),
-        onStepClick: (timelineItem) => onTimelineItemClick && timelineItem.id && onTimelineItemClick(timelineItem.id)
+        ]
       }
-    ),
-    children
+    )
   ] });
 };
 
-// src/pages/processes/WfoProcessDetailPage.tsx
-import { jsx as jsx168 } from "@emotion/react/jsx-runtime";
-var PROCESS_DETAIL_DEFAULT_REFETCH_INTERVAL = 3e3;
-var WfoProcessDetailPage = ({
-  processId,
-  processDetailRefetchInterval = PROCESS_DETAIL_DEFAULT_REFETCH_INTERVAL
-}) => {
-  var _a, _b;
-  const stepListRef = useRef7(null);
-  const [fetchInterval, setFetchInterval] = useState39();
-  const [process3, setProcess] = useState39();
-  const { data, isLoading, isError: isError2 } = useGetProcessDetailQuery(
-    { processId },
-    { pollingInterval: fetchInterval }
-  );
-  if (isError2) {
-    if (fetchInterval) {
-      setFetchInterval(void 0);
-    }
-  }
-  useEffect25(() => {
-    const process4 = data == null ? void 0 : data.processes[0];
-    const lastStatus = process4 == null ? void 0 : process4.lastStatus.toLocaleLowerCase();
-    const isInProgress = !(lastStatus && ProcessDoneStatuses.includes(lastStatus));
-    setFetchInterval(
-      isInProgress ? processDetailRefetchInterval : void 0
-    );
-  }, [data, processDetailRefetchInterval]);
-  useEffect25(() => {
-    const fetchedProcessDetails = data == null ? void 0 : data.processes[0];
-    if (!process3) {
-      setProcess(fetchedProcessDetails);
-      return;
-    }
-    const shouldUpdateProcess = process3.lastStatus != (fetchedProcessDetails == null ? void 0 : fetchedProcessDetails.lastStatus) || process3.lastStep !== (fetchedProcessDetails == null ? void 0 : fetchedProcessDetails.lastStep);
-    if (shouldUpdateProcess) {
-      setProcess(fetchedProcessDetails);
-    }
-  }, [data, process3]);
-  const steps = (_a = process3 == null ? void 0 : process3.steps) != null ? _a : [];
-  const productNames = getProductNamesFromProcess(process3);
-  const pageTitle = (process3 == null ? void 0 : process3.workflowName) || "";
-  const isTask = (_b = process3 == null ? void 0 : process3.isTask) != null ? _b : false;
-  const groupedSteps = convertStepsToGroupedSteps(steps);
-  const timelineItems = mapGroupedStepsToTimelineItems(groupedSteps);
-  return /* @__PURE__ */ jsx168(
-    WfoProcessDetail,
-    {
-      pageTitle,
-      productNames,
-      buttonsAreDisabled: isLoading || isError2,
-      processDetail: process3,
-      timelineItems,
-      onTimelineItemClick: (id) => {
-        var _a2;
-        return (_a2 = stepListRef.current) == null ? void 0 : _a2.scrollToStep(id);
-      },
-      isLoading,
-      hasError: isError2,
-      children: isError2 && /* @__PURE__ */ jsx168(WfoError, {}) || isLoading && /* @__PURE__ */ jsx168(WfoLoading, {}) || process3 !== void 0 && /* @__PURE__ */ jsx168(
-        WfoWorkflowStepList,
-        {
-          ref: stepListRef,
-          processId: process3.processId,
-          steps: groupedSteps.flatMap(
-            (groupedStep) => groupedStep.steps
-          ),
-          traceBack: process3.traceback,
-          userInputForm: process3.form,
-          startedAt: process3.startedAt,
-          isTask
-        }
-      ) || /* @__PURE__ */ jsx168("h1", { children: "Invalid processId" })
-    }
-  );
-};
-
 // src/pages/processes/WfoStartProcessPage.tsx
-import { useCallback as useCallback7, useEffect as useEffect26, useMemo as useMemo5, useState as useState40 } from "react";
-import { useTranslations as useTranslations53 } from "next-intl";
-import { useRouter as useRouter9 } from "next/router";
-import {
-  EuiFlexGroup as EuiFlexGroup21,
-  EuiFlexItem as EuiFlexItem28,
-  EuiHorizontalRule as EuiHorizontalRule5,
-  EuiPanel as EuiPanel6,
-  EuiText as EuiText36
-} from "@elastic/eui";
 import { jsx as jsx169, jsxs as jsxs96 } from "@emotion/react/jsx-runtime";
 var getInitialProcessPayload = ({
   productId,
@@ -55686,12 +55735,22 @@ var WfoStartProcessPage = ({
   processName,
   isTask = false
 }) => {
-  const t = useTranslations53("processes.steps");
+  const t = useTranslations55("processes.steps");
   const router = useRouter9();
-  const [hasError, setHasError] = useState40(false);
+  const [hasError, setHasError] = useState39(false);
   const { theme } = useOrchestratorTheme();
-  const [form, setForm] = useState40({});
+  const [form, setForm] = useState39({});
   const { productId, subscriptionId } = router.query;
+  const {
+    data: subscriptionDetail,
+    isLoading: isLoadingSubscriptionDetail,
+    isError: isErrorSubscriptionDetail
+  } = useGetSubscriptionDetailQuery(
+    {
+      subscriptionId: subscriptionId || ""
+    },
+    { skip: !subscriptionId }
+  );
   const [startProcess] = useStartProcessMutation();
   const startProcessPayload = useMemo5(
     () => getInitialProcessPayload({ productId, subscriptionId }),
@@ -55701,9 +55760,11 @@ var WfoStartProcessPage = ({
   const { getStepHeaderStyle, stepListContentBoldTextStyle } = useWithOrchestratorTheme(getStyles14);
   const {
     data: timeLineItems = [],
-    isError: isError2,
-    isLoading
+    isError: isErrorTimeLineItems,
+    isLoading: isLoadingTimeLineItems
   } = useGetTimeLineItemsQuery(processName);
+  const isLoading = isLoadingSubscriptionDetail || isLoadingTimeLineItems;
+  const isError2 = isErrorSubscriptionDetail || isErrorTimeLineItems;
   if (isError2) {
     if (!hasError) {
       setHasError(true);
@@ -55718,7 +55779,7 @@ var WfoStartProcessPage = ({
         (process3) => {
           if (process3.id) {
             const basePath = isTask ? PATH_TASKS : PATH_WORKFLOWS;
-            router.push(`${basePath}/${process3.id}`);
+            router.replace(`${basePath}/${process3.id}`);
           }
         },
         // Reject handler
@@ -55747,7 +55808,7 @@ var WfoStartProcessPage = ({
     },
     [startProcess, processName, startProcessPayload, isTask, router]
   );
-  useEffect26(() => {
+  useEffect25(() => {
     if (processName) {
       const clientResultCallback = (json) => {
         var _a, _b;
@@ -55770,7 +55831,18 @@ var WfoStartProcessPage = ({
     lastStatus: "create" /* CREATE */,
     lastStep: "form" /* FORM */,
     workflowName: processName,
-    createdBy: "-"
+    createdBy: "-",
+    subscriptions: subscriptionDetail && {
+      page: [
+        {
+          product: {
+            name: subscriptionDetail.subscription.product.name
+          },
+          description: subscriptionDetail.subscription.description,
+          subscriptionId: subscriptionDetail.subscription.subscriptionId
+        }
+      ]
+    }
   };
   return /* @__PURE__ */ jsx169(
     WfoProcessDetail,
@@ -55810,7 +55882,7 @@ var WfoStartProcessPage = ({
 };
 
 // src/pages/processes/WfoProductInformationWithLink.tsx
-import { useTranslations as useTranslations54 } from "next-intl";
+import { useTranslations as useTranslations56 } from "next-intl";
 import { EuiButtonIcon as EuiButtonIcon7, EuiFlexGroup as EuiFlexGroup22, EuiText as EuiText37, EuiToolTip as EuiToolTip5 } from "@elastic/eui";
 import { jsx as jsx170, jsxs as jsxs97 } from "@emotion/react/jsx-runtime";
 var WfoProductInformationWithLink = ({
@@ -55818,7 +55890,7 @@ var WfoProductInformationWithLink = ({
   productNames
 }) => {
   const { workflowInformationLinkUrl, showWorkflowInformationLink } = useGetOrchestratorConfig();
-  const t = useTranslations54("processes.detail");
+  const t = useTranslations56("processes.detail");
   const docsUrl = workflowInformationLinkUrl + workflowName;
   return /* @__PURE__ */ jsxs97(EuiFlexGroup22, { gutterSize: "s", alignItems: "center", children: [
     showWorkflowInformationLink && /* @__PURE__ */ jsx170(EuiToolTip5, { content: t("openWorkflowTaskInfo"), children: /* @__PURE__ */ jsx170("a", { href: docsUrl, target: "_blank", children: /* @__PURE__ */ jsx170(
@@ -55913,8 +55985,8 @@ var WfoSubscriptionDetailPage = () => {
 };
 
 // src/pages/subscriptions/WfoSubscriptionsListPage.tsx
-import { useEffect as useEffect27, useState as useState41 } from "react";
-import { useTranslations as useTranslations56 } from "next-intl";
+import { useEffect as useEffect26, useState as useState40 } from "react";
+import { useTranslations as useTranslations58 } from "next-intl";
 import { StringParam as StringParam3, useQueryParam as useQueryParam2, withDefault as withDefault3 } from "use-query-params";
 import { EuiPageHeader as EuiPageHeader4, EuiSpacer as EuiSpacer18 } from "@elastic/eui";
 
@@ -55997,7 +56069,7 @@ var subscriptionListTabs = [
 ];
 
 // src/components/WfoSubscriptionsList/WfoSubscriptionsList.tsx
-import { useTranslations as useTranslations55 } from "next-intl";
+import { useTranslations as useTranslations57 } from "next-intl";
 import Link7 from "next/link";
 import { useRouter as useRouter11 } from "next/router";
 import { jsx as jsx174 } from "@emotion/react/jsx-runtime";
@@ -56009,8 +56081,8 @@ var WfoSubscriptionsList = ({
 }) => {
   var _a, _b, _c;
   const router = useRouter11();
-  const t = useTranslations55("subscriptions.index");
-  const tError = useTranslations55("errors");
+  const t = useTranslations57("subscriptions.index");
+  const tError = useTranslations57("errors");
   const { showToastMessage } = useShowToastMessage();
   const tableColumns = {
     subscriptionId: {
@@ -56159,12 +56231,12 @@ var WfoSubscriptionsList = ({
 import { Fragment as Fragment44, jsx as jsx175, jsxs as jsxs99 } from "@emotion/react/jsx-runtime";
 var WfoSubscriptionsListPage = () => {
   var _a;
-  const t = useTranslations56("subscriptions.detail");
-  const [tableDefaults, setTableDefaults] = useState41();
+  const t = useTranslations58("subscriptions.detail");
+  const [tableDefaults, setTableDefaults] = useState40();
   const getStoredTableConfig = useStoredTableConfig(
     SUBSCRIPTIONS_TABLE_LOCAL_STORAGE_KEY
   );
-  useEffect27(() => {
+  useEffect26(() => {
     const storedConfig = getStoredTableConfig();
     if (storedConfig) {
       setTableDefaults(storedConfig);
@@ -56223,8 +56295,8 @@ var WfoSubscriptionsListPage = () => {
 };
 
 // src/pages/tasks/WfoTasksListPage.tsx
-import { useContext as useContext8, useEffect as useEffect28, useState as useState42 } from "react";
-import { useTranslations as useTranslations57 } from "next-intl";
+import { useContext as useContext8, useEffect as useEffect27, useState as useState41 } from "react";
+import { useTranslations as useTranslations59 } from "next-intl";
 import Link8 from "next/link";
 import { useRouter as useRouter12 } from "next/router";
 import { StringParam as StringParam4, useQueryParam as useQueryParam3, withDefault as withDefault4 } from "use-query-params";
@@ -56303,12 +56375,12 @@ import { Fragment as Fragment45, jsx as jsx176, jsxs as jsxs100 } from "@emotion
 var WfoTasksListPage = () => {
   var _a;
   const router = useRouter12();
-  const t = useTranslations57("tasks.page");
+  const t = useTranslations59("tasks.page");
   const [activeTab, setActiveTab] = useQueryParam3(
     "activeTab",
     withDefault4(StringParam4, "ACTIVE" /* ACTIVE */)
   );
-  const [tableDefaults, setTableDefaults] = useState42();
+  const [tableDefaults, setTableDefaults] = useState41();
   const selectedTasksListTab = getTasksListTabTypeFromString(activeTab);
   const localStorageKey = selectedTasksListTab === "ACTIVE" /* ACTIVE */ ? ACTIVE_TASKS_LIST_TABLE_LOCAL_STORAGE_KEY : COMPLETED_TASKS_LIST_TABLE_LOCAL_STORAGE_KEY;
   const getStoredTableConfig = useStoredTableConfig(localStorageKey);
@@ -56316,7 +56388,7 @@ var WfoTasksListPage = () => {
   const { showConfirmDialog } = useContext8(ConfirmationDialogContext);
   const [retryAllProcesses] = useRetryAllProcessesMutation();
   const { isEngineRunningNow } = useCheckEngineStatus();
-  useEffect28(() => {
+  useEffect27(() => {
     const storedConfig = getStoredTableConfig();
     if (storedConfig) {
       setTableDefaults(storedConfig);
@@ -56431,8 +56503,8 @@ var WfoTasksListPage = () => {
 };
 
 // src/pages/workflows/WfoWorkflowsListPage.tsx
-import { useEffect as useEffect29, useState as useState43 } from "react";
-import { useTranslations as useTranslations58 } from "next-intl";
+import { useEffect as useEffect28, useState as useState42 } from "react";
+import { useTranslations as useTranslations60 } from "next-intl";
 import { useRouter as useRouter13 } from "next/router";
 import { StringParam as StringParam5, useQueryParam as useQueryParam4, withDefault as withDefault5 } from "use-query-params";
 import { EuiPageHeader as EuiPageHeader6, EuiSpacer as EuiSpacer20 } from "@elastic/eui";
@@ -56504,16 +56576,16 @@ import { Fragment as Fragment46, jsx as jsx177, jsxs as jsxs101 } from "@emotion
 var WfoWorkflowsListPage = () => {
   var _a;
   const router = useRouter13();
-  const t = useTranslations58("workflows.index");
+  const t = useTranslations60("workflows.index");
   const [activeTab, setActiveTab] = useQueryParam4(
     "activeTab",
     withDefault5(StringParam5, "ACTIVE" /* ACTIVE */)
   );
-  const [tableDefaults, setTableDefaults] = useState43();
+  const [tableDefaults, setTableDefaults] = useState42();
   const selectedWorkflowsListTab = getWorkflowsListTabTypeFromString(activeTab);
   const localStorageKey = selectedWorkflowsListTab === "ACTIVE" /* ACTIVE */ ? ACTIVE_PROCESSES_LIST_TABLE_LOCAL_STORAGE_KEY : COMPLETED_PROCESSES_LIST_TABLE_LOCAL_STORAGE_KEY;
   const getStoredTableConfig = useStoredTableConfig(localStorageKey);
-  useEffect29(() => {
+  useEffect28(() => {
     const storedConfig = getStoredTableConfig();
     if (storedConfig) {
       setTableDefaults(storedConfig);
@@ -56673,8 +56745,8 @@ var WfoProcessesList = ({
   overrideDefaultTableColumns
 }) => {
   var _a, _b;
-  const t = useTranslations59("processes.index");
-  const tError = useTranslations59("errors");
+  const t = useTranslations61("processes.index");
+  const tError = useTranslations61("errors");
   const { showToastMessage } = useShowToastMessage();
   const defaultTableColumns = {
     workflowName: {
@@ -56882,8 +56954,8 @@ var WfoJsonCodeBlock = ({
 };
 
 // src/components/WfoSettings/WfoFlushSettings.tsx
-import { useState as useState44 } from "react";
-import { useTranslations as useTranslations60 } from "next-intl";
+import { useState as useState43 } from "react";
+import { useTranslations as useTranslations62 } from "next-intl";
 import {
   EuiButton as EuiButton14,
   EuiComboBox,
@@ -56923,8 +56995,8 @@ var WfoFlushSettings = () => {
     getWfoFlushSettingsStyle
   );
   const [clearCache] = useClearCacheMutation();
-  const t = useTranslations60("settings.page");
-  const [selectedOptions, setSelected] = useState44(
+  const t = useTranslations62("settings.page");
+  const [selectedOptions, setSelected] = useState43(
     []
   );
   const { showToastMessage } = useShowToastMessage();
@@ -56977,14 +57049,14 @@ var WfoFlushSettings = () => {
 };
 
 // src/components/WfoSettings/WfoEngineStatusButton.tsx
-import { useTranslations as useTranslations61 } from "next-intl";
+import { useTranslations as useTranslations63 } from "next-intl";
 import { EuiButton as EuiButton15 } from "@elastic/eui";
 import { jsx as jsx181 } from "@emotion/react/jsx-runtime";
 var WfoEngineStatusButton = () => {
   const { data, isLoading } = useGetEngineStatusQuery();
   const { engineStatus } = data || {};
   const [setEngineStatus, { isLoading: isSettingEngineStatus }] = useSetEngineStatusMutation();
-  const t = useTranslations61("settings.page");
+  const t = useTranslations63("settings.page");
   if (isLoading || isSettingEngineStatus) {
     return /* @__PURE__ */ jsx181(EuiButton15, { isLoading: true, fill: true, children: "Loading..." });
   }
@@ -57010,16 +57082,16 @@ var WfoEngineStatusButton = () => {
 };
 
 // src/components/WfoSettings/WfoModifySettings.tsx
-import { useTranslations as useTranslations63 } from "next-intl";
+import { useTranslations as useTranslations65 } from "next-intl";
 import { EuiFlexItem as EuiFlexItem30, EuiPanel as EuiPanel8, EuiSpacer as EuiSpacer22, EuiText as EuiText39 } from "@elastic/eui";
 
 // src/components/WfoSettings/WfoResetTextSearchIndexButton.tsx
-import { useTranslations as useTranslations62 } from "next-intl";
+import { useTranslations as useTranslations64 } from "next-intl";
 import { EuiButton as EuiButton16 } from "@elastic/eui";
 import { jsx as jsx182 } from "@emotion/react/jsx-runtime";
 var WfoResetTextSearchIndexButton = () => {
   const [resetTextSearchIndex] = useResetTextSearchIndexMutation();
-  const t = useTranslations62("settings.page");
+  const t = useTranslations64("settings.page");
   return /* @__PURE__ */ jsx182(
     EuiButton16,
     {
@@ -57033,7 +57105,7 @@ var WfoResetTextSearchIndexButton = () => {
 // src/components/WfoSettings/WfoModifySettings.tsx
 import { jsx as jsx183, jsxs as jsxs103 } from "@emotion/react/jsx-runtime";
 var WfoModifySettings = () => {
-  const t = useTranslations63("settings.page");
+  const t = useTranslations65("settings.page");
   return /* @__PURE__ */ jsxs103(EuiFlexItem30, { children: [
     /* @__PURE__ */ jsxs103(EuiPanel8, { hasShadow: false, color: "subdued", paddingSize: "l", children: [
       /* @__PURE__ */ jsx183(EuiText39, { size: "s", children: /* @__PURE__ */ jsx183("h4", { children: t("resetTextSearchIndex") }) }),
@@ -57050,7 +57122,7 @@ var WfoModifySettings = () => {
 };
 
 // src/components/WfoSettings/WfoStatus.tsx
-import { useTranslations as useTranslations64 } from "next-intl";
+import { useTranslations as useTranslations66 } from "next-intl";
 import {
   EuiFlexGroup as EuiFlexGroup24,
   EuiFlexItem as EuiFlexItem31,
@@ -57064,7 +57136,7 @@ var WfoStatus = () => {
   const { data } = useGetEngineStatusQuery();
   const { engineStatus, runningProcesses } = data || {};
   const isRunning = engineStatus === "RUNNING" /* RUNNING */;
-  const t = useTranslations64("settings.page");
+  const t = useTranslations66("settings.page");
   return /* @__PURE__ */ jsxs104(EuiPanel9, { hasShadow: false, color: "subdued", paddingSize: "l", children: [
     /* @__PURE__ */ jsxs104(EuiFlexGroup24, { children: [
       /* @__PURE__ */ jsx184(EuiFlexItem31, { grow: false, style: { minWidth: 208 }, children: /* @__PURE__ */ jsx184(EuiText40, { size: "s", children: /* @__PURE__ */ jsx184("h4", { children: t("runningProcesses") }) }) }),
@@ -57151,12 +57223,12 @@ var WfoNoResults = ({ text, icon }) => {
 };
 
 // src/components/WfoStartButton/WfoStartTaskComboBox.tsx
-import { useTranslations as useTranslations65 } from "next-intl";
+import { useTranslations as useTranslations67 } from "next-intl";
 import { useRouter as useRouter14 } from "next/router";
 import { jsx as jsx186 } from "@emotion/react/jsx-runtime";
 var WfoStartTaskButtonComboBox = () => {
   const router = useRouter14();
-  const t = useTranslations65("common");
+  const t = useTranslations67("common");
   const { isEngineRunningNow } = useCheckEngineStatus();
   const { data } = useGetTaskOptionsQuery();
   const taskOptions = (data == null ? void 0 : data.startOptions) || [];
@@ -57520,7 +57592,7 @@ var WfoSummaryCard = ({
 };
 
 // src/components/WfoSummary/WfoActiveWorkflowsSummaryCard.tsx
-import { useTranslations as useTranslations66 } from "next-intl";
+import { useTranslations as useTranslations68 } from "next-intl";
 
 // src/pages/startPage/queryVariables.ts
 var baseQueryVariables = {
@@ -57613,7 +57685,7 @@ var productsSummaryQueryVariables = {
 import { jsx as jsx193 } from "@emotion/react/jsx-runtime";
 var WfoActiveWorkflowsSummaryCard = () => {
   var _a;
-  const t = useTranslations66("startPage.activeWorkflows");
+  const t = useTranslations68("startPage.activeWorkflows");
   const {
     data: activeWorkflowsSummaryResponse,
     isFetching: activeWorkflowsSummaryIsFetching
@@ -57636,11 +57708,11 @@ var WfoActiveWorkflowsSummaryCard = () => {
 };
 
 // src/components/WfoSummary/WfoFailedTasksSummaryCard.tsx
-import { useTranslations as useTranslations67 } from "next-intl";
+import { useTranslations as useTranslations69 } from "next-intl";
 import { jsx as jsx194 } from "@emotion/react/jsx-runtime";
 var WfoFailedTasksSummaryCard = () => {
   var _a;
-  const t = useTranslations67("startPage.failedTasks");
+  const t = useTranslations69("startPage.failedTasks");
   const {
     data: failedTasksSummaryResponse,
     isFetching: failedTasksSummaryIsFetching
@@ -57663,11 +57735,11 @@ var WfoFailedTasksSummaryCard = () => {
 };
 
 // src/components/WfoSummary/WfoLatestActiveSubscriptionsSummaryCard.tsx
-import { useTranslations as useTranslations68 } from "next-intl";
+import { useTranslations as useTranslations70 } from "next-intl";
 import { jsx as jsx195 } from "@emotion/react/jsx-runtime";
 var WfoLatestActiveSubscriptionsSummaryCard = () => {
   var _a;
-  const t = useTranslations68("startPage.activeSubscriptions");
+  const t = useTranslations70("startPage.activeSubscriptions");
   const {
     data: subscriptionsSummaryResult,
     isLoading: subscriptionsSummaryIsFetching
@@ -57692,11 +57764,11 @@ var WfoLatestActiveSubscriptionsSummaryCard = () => {
 };
 
 // src/components/WfoSummary/WfoLatestOutOfSyncSubscriptionSummaryCard.tsx
-import { useTranslations as useTranslations69 } from "next-intl";
+import { useTranslations as useTranslations71 } from "next-intl";
 import { jsx as jsx196 } from "@emotion/react/jsx-runtime";
 var WfoLatestOutOfSyncSubscriptionSummaryCard = () => {
   var _a;
-  const t = useTranslations69("startPage.outOfSyncSubscriptions");
+  const t = useTranslations71("startPage.outOfSyncSubscriptions");
   const {
     data: outOfSyncSubscriptionsSummaryResult,
     isLoading: outOfSyncsubscriptionsSummaryIsFetching
@@ -57724,13 +57796,13 @@ var WfoLatestOutOfSyncSubscriptionSummaryCard = () => {
 };
 
 // src/components/WfoSummary/WfoMyWorkflowsSummaryCard.tsx
-import { useTranslations as useTranslations70 } from "next-intl";
+import { useTranslations as useTranslations72 } from "next-intl";
 import { jsx as jsx197 } from "@emotion/react/jsx-runtime";
 var WfoMyWorkflowsSummaryCard = ({
   username
 }) => {
   var _a;
-  const t = useTranslations70("startPage.myWorkflows");
+  const t = useTranslations72("startPage.myWorkflows");
   const {
     data: myWorkflowsSummaryResponse,
     isFetching: myWorkflowsSummaryIsFetching
@@ -57758,11 +57830,11 @@ var WfoMyWorkflowsSummaryCard = ({
 };
 
 // src/components/WfoSummary/WfoProductsSummaryCard.tsx
-import { useTranslations as useTranslations71 } from "next-intl";
+import { useTranslations as useTranslations73 } from "next-intl";
 import { jsx as jsx198, jsxs as jsxs111 } from "@emotion/react/jsx-runtime";
 var WfoProductsSummaryCard = () => {
   var _a, _b, _c;
-  const t = useTranslations71("startPage.products");
+  const t = useTranslations73("startPage.products");
   const {
     data: productsSummaryResult,
     isLoading: productsSummaryIsFetching
@@ -57842,7 +57914,11 @@ var en_GB_default = {
     darkMode: "Dark mode",
     lightMode: "Light mode",
     websocketConnected: "The websocket is connected",
-    websocketDisconnected: "The websocket is disconnected, click the icon or refresh the page"
+    websocketDisconnected: "The websocket is disconnected, click the icon or refresh the page",
+    resetToDefault: "Reset to default",
+    savePreferences: "Save preferences",
+    numberOfRows: "Number of rows",
+    tableSettings: "Table settings"
   },
   common: {
     product: "Product",
@@ -58255,7 +58331,11 @@ var nl_NL_default = {
     darkMode: "Dark mode",
     lightMode: "Light mode",
     websocketConnected: "De websocket is actief",
-    websocketDisconnected: "De websocket verbinding is verbroken, klik op het icoon of ververs de pagina."
+    websocketDisconnected: "De websocket verbinding is verbroken, klik op het icoon of ververs de pagina.",
+    resetToDefault: "Reset naar standaard",
+    savePreferences: "Voorkeuren opslaan",
+    numberOfRows: "Aantal rijen",
+    tableSettings: "Tabel instellingen"
   },
   common: {
     product: "Produkt",