@orchestrator-ui/orchestrator-ui-components 7.5.0 → 7.6.0

package/dist/index.js

@@ -35,6 +35,7 @@ var METADATA_PRODUCT_BLOCK_ENDPOINT = "product_blocks";
 var METADATA_RESOURCE_TYPE_ENDPOINT = "resource_types";
 var METADATA_WORKFLOWS_ENDPOINT = "workflows";
 var METADATA_SCHEDULES_ENDPOINT = "schedules";
+var SEARCH_QUERY_RESULTS_ENDPOINT = "search/queries";
 
 // src/configuration/policy-resources.ts
 var PolicyResource = /* @__PURE__ */ ((PolicyResource2) => {
@@ -63,7 +64,7 @@ var PolicyResource = /* @__PURE__ */ ((PolicyResource2) => {
 })(PolicyResource || {});
 
 // src/configuration/version.ts
-var ORCHESTRATOR_UI_LIBRARY_VERSION = "7.5.0";
+var ORCHESTRATOR_UI_LIBRARY_VERSION = "7.6.0";
 
 // src/types/types.ts
 var EngineStatus = /* @__PURE__ */ ((EngineStatus2) => {
@@ -2613,6 +2614,22 @@ var availabilityApi = orchestratorApi.injectEndpoints({
 });
 var { useCheckSearchAvailabilityQuery, useCheckAgentAvailabilityQuery } = availabilityApi;
 
+// src/rtk/endpoints/agentQueryResults.ts
+var agentQueryResultsApi = orchestratorApi.injectEndpoints({
+  endpoints: (builder) => ({
+    getAgentQueryResults: builder.query({
+      query: (queryId) => ({
+        url: `${SEARCH_QUERY_RESULTS_ENDPOINT}/${queryId}/results`,
+        method: "GET"
+      }),
+      extraOptions: {
+        baseQueryType: "fetch" /* fetch */
+      }
+    })
+  })
+});
+var { useGetAgentQueryResultsQuery } = agentQueryResultsApi;
+
 // src/hooks/useCheckEngineStatus.ts
 var useCheckEngineStatus = () => {
   const { data, isLoading, refetch } = useGetEngineStatusQuery();
@@ -2656,35 +2673,51 @@ import { useTranslations as useTranslations3 } from "next-intl";
 import { EuiSpacer, EuiToolTip } from "@elastic/eui";
 
 // src/utils/compareVersions.ts
-var compareVersions = (versionString1, versionString2) => {
-  const splittedVersion1 = versionString1.split(".");
-  const splittedVersion2 = versionString2.split(".");
-  for (let i = 0; i < splittedVersion1.length; i++) {
-    if (parseInt(splittedVersion1[i]) > parseInt(splittedVersion2[i])) {
-      return 1;
-    } else if (parseInt(splittedVersion1[i]) < parseInt(splittedVersion2[i])) {
-      return -1;
+var compareVersions = (v1, v2) => {
+  const parse = (v) => {
+    const parts = v.split(".");
+    const major = parseInt(parts[0]);
+    const minor = parseInt(parts[1]);
+    const patchPart = parts[2] ?? "";
+    let patch = 0;
+    let suffix = "";
+    for (let i = 0; i < patchPart.length; i++) {
+      const char = patchPart[i];
+      if (char >= "0" && char <= "9") {
+        patch = patch * 10 + Number(char);
+      } else {
+        suffix = patchPart.slice(i);
+        break;
+      }
     }
-  }
-  return 0;
+    return { major, minor, patch, suffix };
+  };
+  const a = parse(v1);
+  const b = parse(v2);
+  if (a.major !== b.major) return a.major > b.major ? 1 : -1;
+  if (a.minor !== b.minor) return a.minor > b.minor ? 1 : -1;
+  if (a.patch !== b.patch) return a.patch > b.patch ? 1 : -1;
+  if (a.suffix === b.suffix) return 0;
+  if (!a.suffix) return 1;
+  if (!b.suffix) return -1;
+  return a.suffix > b.suffix ? 1 : -1;
 };
 var findMinimumOrchestratorCoreVersion = (orchestratorUiVersion, versionMappings) => {
-  const orchestratorUiVersions = versionMappings.map((version) => version.orchestratorUiVersion);
-  let mappedVersion = versionMappings[0];
-  for (let i = 0; i < orchestratorUiVersions.length; i++) {
-    if ([0, 1].includes(compareVersions(orchestratorUiVersion, orchestratorUiVersions[i]))) {
-      mappedVersion = versionMappings[i];
+  const sorted = [...versionMappings].sort((a, b) => compareVersions(b.orchestratorUiVersion, a.orchestratorUiVersion));
+  for (const mapping of sorted) {
+    if (compareVersions(orchestratorUiVersion, mapping.orchestratorUiVersion) >= 0) {
+      return mapping.minimumOrchestratorCoreVersion;
     }
   }
-  return mappedVersion.minimumOrchestratorCoreVersion;
+  return sorted[sorted.length - 1]?.minimumOrchestratorCoreVersion ?? null;
 };
 var getOrchestratorCoreVersionIfNotCompatible = (orchestratorUiVersion, orchestratorCoreVersion, versionMappings) => {
-  const minimumOrchestratorCoreVersion = findMinimumOrchestratorCoreVersion(orchestratorUiVersion, versionMappings);
-  const comparison = compareVersions(orchestratorCoreVersion, minimumOrchestratorCoreVersion);
-  if (comparison === -1) {
-    return minimumOrchestratorCoreVersion;
+  const minimumVersion = findMinimumOrchestratorCoreVersion(orchestratorUiVersion, versionMappings);
+  if (!minimumVersion) {
+    return null;
   }
-  return null;
+  const isCompatible = compareVersions(orchestratorCoreVersion, minimumVersion) !== -1;
+  return isCompatible ? null : minimumVersion;
 };
 
 // ../../version-compatibility.json
@@ -2720,11 +2753,8 @@ var WfoVersionIncompatibleBadge = ({
   const t = useTranslations3("main");
   const { theme } = useOrchestratorTheme();
   const mappedVersions = version_compatibility_default;
-  const minimumOrchestratorCoreVersion = getOrchestratorCoreVersionIfNotCompatible(
-    orchestratorUiVersion,
-    orchestratorCoreVersion,
-    mappedVersions
-  );
+  const isReady = orchestratorCoreVersion && orchestratorUiVersion;
+  const minimumOrchestratorCoreVersion = isReady ? getOrchestratorCoreVersionIfNotCompatible(orchestratorUiVersion, orchestratorCoreVersion, mappedVersions) : null;
   return /* @__PURE__ */ jsx9(
     EuiToolTip,
     {
@@ -2752,7 +2782,7 @@ var WfoVersionIncompatibleBadge = ({
           textColor: theme.colors.textGhost,
           css: {
             marginLeft: theme.size.s,
-            visibility: minimumOrchestratorCoreVersion ? "visible" : "hidden"
+            display: minimumOrchestratorCoreVersion ? "block" : "none"
           },
           children: t("incompatibleVersion")
         }
@@ -4434,6 +4464,9 @@ var getCopyrightStyles = ({ theme }) => {
 var getMenuStyles = ({ theme }) => {
   const menuStyle = css5({
     backgroundColor: theme.colors.backgroundBaseSubdued,
+    ".euiSideNavItem--trunk > .euiSideNavItem__items": {
+      marginInline: theme.base
+    },
     ".euiSideNavItem--branch": {
       "&:after": {
         backgroundColor: theme.colors.borderBaseSubdued,
@@ -4461,8 +4494,7 @@ var getMenuItemStyles = ({ theme, isDarkModeActive }) => {
     color: theme.colors.textSubdued,
     padding: `${theme.base * 0.5}px ${theme.base * 0.75}px`
   };
-  const baseSubMenuStyles = {
-    ...baseStyles,
+  const subItemDash = {
     ":after": {
       content: "''",
       top: "50%",
@@ -4474,6 +4506,10 @@ var getMenuItemStyles = ({ theme, isDarkModeActive }) => {
       transform: "translateY(-50%)"
     }
   };
+  const baseSubMenuStyles = {
+    ...baseStyles,
+    ...subItemDash
+  };
   const menuItemStyle = css5({
     ...baseStyles
   });
@@ -4503,17 +4539,34 @@ var getMenuItemStyles = ({ theme, isDarkModeActive }) => {
     marginLeft: `${theme.size.xs}`,
     paddingLeft: `${theme.size.s}`
   });
-  const subMenuHeaderStyle = css5({
+  const subMenuHeader = {
     ...baseStyles,
     color: theme.colors.link,
     fontWeight: theme.font.weight.medium
+  };
+  const subMenuHeaderStyle = css5({
+    ...subMenuHeader
+  });
+  const subMenuSubItemHeaderStyle = css5({
+    ...subMenuHeader,
+    ...{
+      ":after": {
+        content: "''",
+        left: 0,
+        width: "4px",
+        height: "1px",
+        backgroundColor: theme.colors.borderBaseSubdued,
+        position: "absolute"
+      }
+    }
   });
   return {
     menuItemStyle,
     selectedMenuItem,
     selectedSubMenuItem,
     subMenuItemStyle,
-    subMenuHeaderStyle
+    subMenuHeaderStyle,
+    subMenuSubItemHeaderStyle
   };
 };
 
@@ -4937,12 +4990,19 @@ var WfoMenuItemLink = ({
   isSubItem,
   hasSubItems
 }) => {
-  const { menuItemStyle, selectedMenuItem, selectedSubMenuItem, subMenuHeaderStyle, subMenuItemStyle } = useWithOrchestratorTheme(getMenuItemStyles);
+  const {
+    menuItemStyle,
+    selectedMenuItem,
+    selectedSubMenuItem,
+    subMenuHeaderStyle,
+    subMenuItemStyle,
+    subMenuSubItemHeaderStyle
+  } = useWithOrchestratorTheme(getMenuItemStyles);
   const getMenuItemStyle = () => {
-    if (isSubItem) {
+    if (isSubItem && (!hasSubItems || !isSelected)) {
       return isSelected ? selectedSubMenuItem : subMenuItemStyle;
     } else if (isSelected && hasSubItems) {
-      return subMenuHeaderStyle;
+      return isSubItem ? subMenuSubItemHeaderStyle : subMenuHeaderStyle;
     } else {
       return isSelected ? selectedMenuItem : menuItemStyle;
     }
@@ -5604,6 +5664,7 @@ var WfoRadio = ({ pydanticFormField, onChange, value, disabled }) => {
 };
 
 // src/components/WfoPydanticForm/fields/WfoInteger.tsx
+import React12, { useEffect as useEffect3 } from "react";
 import _2 from "lodash";
 import { getFormFieldIdWithPath as getFormFieldIdWithPath2 } from "pydantic-forms";
 import { EuiFieldNumber } from "@elastic/eui";
@@ -5625,21 +5686,38 @@ var WfoInteger = ({ pydanticFormField, onChange, value, disabled }) => {
   const { formFieldBaseStyle } = useWithOrchestratorTheme(getFormFieldsBaseStyle2);
   const fieldName = getFormFieldIdWithPath2(pydanticFormField.id);
   const fieldValue = _2.isObject(value) && _2.has(value, fieldName) ? _2.get(value, fieldName) : value;
+  const [userInput, setUserInput] = React12.useState();
+  useEffect3(() => {
+    if (fieldValue !== void 0 && fieldValue !== null) {
+      setUserInput(fieldValue);
+    } else {
+      setUserInput("");
+    }
+  }, [fieldValue, value]);
+  const handleOnChange = (event) => {
+    const newValue = event.target.value;
+    if (value === null && newValue !== value) {
+      onChange(parseInt(newValue));
+    }
+    setUserInput(newValue);
+  };
   return /* @__PURE__ */ jsx84(
     EuiFieldNumber,
     {
+      placeholder: "Enter a number",
       "data-testid": pydanticFormField.id,
       css: formFieldBaseStyle,
       name: pydanticFormField.id,
-      onChange: (event) => onChange(event.target.value ? parseInt(event.target.value) : null),
-      value: fieldValue,
+      onBlur: (event) => onChange(event.target.value ? parseInt(event.target.value) : null),
+      onChange: handleOnChange,
+      value: userInput,
       disabled
     }
   );
 };
 
 // src/components/WfoPydanticForm/fields/WfoReactSelect/WfoReactSelect.tsx
-import { useEffect as useEffect3, useState as useState8 } from "react";
+import { useEffect as useEffect4, useState as useState8 } from "react";
 import ReactSelect, { components } from "react-select";
 import { EuiButtonIcon as EuiButtonIcon3 } from "@elastic/eui";
 
@@ -5732,7 +5810,7 @@ var WfoReactSelect = ({
 }) => {
   const initialValue = options.find((option) => option.value === value);
   const [selectedValue, setSelectedValue] = useState8(initialValue || null);
-  useEffect3(() => {
+  useEffect4(() => {
     const preSelectedValue = options.find((option) => option.value === value);
     if (preSelectedValue !== selectedValue) {
       setSelectedValue(preSelectedValue || null);
@@ -5805,11 +5883,11 @@ var WfoDropdown = ({ onChange, pydanticFormField, value }) => {
 };
 
 // src/components/WfoPydanticForm/fields/WfoMultiCheckboxField.tsx
-import { useEffect as useEffect4, useState as useState9 } from "react";
+import { useEffect as useEffect5, useState as useState9 } from "react";
 import { EuiCheckboxGroup } from "@elastic/eui";
 import { jsx as jsx87 } from "@emotion/react/jsx-runtime";
 var WfoMultiCheckboxField = ({ pydanticFormField, onChange, value }) => {
-  useEffect4(() => {
+  useEffect5(() => {
     const getInitialMap = () => {
       const initialIdMap = (value || []).reduce((idMap, id2) => {
         idMap[id2] = true;
@@ -6396,7 +6474,7 @@ import { useContext as useContext4 } from "react";
 // src/components/WfoBadges/WfoHeaderBadge/WfoHeaderBadge.tsx
 import { jsx as jsx96 } from "@emotion/react/jsx-runtime";
 var WfoHeaderBadge = ({ children, ...restProps }) => {
-  const css50 = restProps.iconType ? {
+  const css49 = restProps.iconType ? {
     height: 24,
     display: "flex",
     paddingLeft: 0
@@ -6404,7 +6482,7 @@ var WfoHeaderBadge = ({ children, ...restProps }) => {
     height: 24,
     display: "flex"
   };
-  return /* @__PURE__ */ jsx96(WfoBadge, { ...restProps, css: css50, children });
+  return /* @__PURE__ */ jsx96(WfoBadge, { ...restProps, css: css49, children });
 };
 
 // src/components/WfoBadges/WfoEnvironmentBadge/WfoEnvironmentBadge.tsx
@@ -6516,7 +6594,7 @@ var WfoWorkflowTargetBadge = ({ target }) => {
 };
 
 // src/components/WfoBadges/WfoWebsocketStatusBadge/WfoWebsocketStatusBadge.tsx
-import { useCallback as useCallback5, useEffect as useEffect5 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect6 } from "react";
 import { useDispatch as useDispatch2 } from "react-redux";
 import { useTranslations as useTranslations13 } from "next-intl";
 import { EuiToolTip as EuiToolTip4 } from "@elastic/eui";
@@ -6552,7 +6630,7 @@ var WfoWebsocketStatusBadge = ({ hideWhenConnected = false }) => {
   const reconnect = useCallback5(() => {
     dispatch(orchestratorApi.util.resetApiState());
   }, [dispatch]);
-  useEffect5(() => {
+  useEffect6(() => {
     const handleVisibilityChange = () => {
       if (document.visibilityState === "visible" && !websocketConnected) {
         reconnect();
@@ -6953,7 +7031,7 @@ var WfoKeyCell = ({ value, rowNumber }) => {
 };
 
 // src/components/WfoKeyValueTable/WfoValueCell.tsx
-import React17 from "react";
+import React18 from "react";
 import { EuiCopy } from "@elastic/eui";
 
 // src/icons/WfoClipboardCopy.tsx
@@ -6982,7 +7060,7 @@ var WfoValueCell = ({ value, textToCopy, rowNumber, enableCopyIcon }) => {
     valueCellStyle
   } = useWithOrchestratorTheme(getStyles5);
   const shouldRenderCopyColumn = enableCopyIcon && textToCopy;
-  const valueToRender = typeof value === "string" || typeof value === "number" || React17.isValidElement(value) ? value : JSON.stringify(value);
+  const valueToRender = typeof value === "string" || typeof value === "number" || React18.isValidElement(value) ? value : JSON.stringify(value);
   const copyText = typeof textToCopy === "object" ? JSON.stringify(textToCopy) : textToCopy;
   return /* @__PURE__ */ jsxs55("div", { css: [getBackgroundColorStyleForRow(rowNumber), valueColumnStyle], children: [
     /* @__PURE__ */ jsx113("div", { css: valueCellStyle, children: valueToRender }),
@@ -6991,7 +7069,7 @@ var WfoValueCell = ({ value, textToCopy, rowNumber, enableCopyIcon }) => {
       {
         width: clipboardIconSize,
         height: clipboardIconSize,
-        color: theme.colors.backgroundBaseDisabled
+        color: theme.colors.backgroundBaseAccent
       }
     ) }) }) })
   ] });
@@ -7033,7 +7111,7 @@ var WfoValueOnlyTable = ({ values, showCopyToClipboardIcon = false }) => {
 };
 
 // src/components/WfoSearchBar/WfoSearchField.tsx
-import { useEffect as useEffect6, useRef as useRef2, useState as useState10 } from "react";
+import { useEffect as useEffect7, useRef as useRef2, useState as useState10 } from "react";
 import { useTranslations as useTranslations18 } from "next-intl";
 import { EuiFieldSearch, EuiFormRow as EuiFormRow3 } from "@elastic/eui";
 import { jsx as jsx116 } from "@emotion/react/jsx-runtime";
@@ -7043,10 +7121,10 @@ var WfoSearchField = ({ queryString, queryIsValid = true, onUpdateQueryString })
   const { formFieldBaseStyle } = useWithOrchestratorTheme(getFormFieldsBaseStyle);
   const handleSearch = useRef2((queryText) => onUpdateQueryString?.(queryText));
   const [currentQuery, setCurrentQuery] = useState10(queryString ?? "");
-  useEffect6(() => {
+  useEffect7(() => {
     setCurrentQuery(queryString ?? "");
   }, [queryString]);
-  useEffect6(() => {
+  useEffect7(() => {
     if (currentQuery === "") {
       handleSearch.current(currentQuery);
     }
@@ -7459,7 +7537,7 @@ var SubscriptionKeyValueBlock = ({ title, keyValues }) => {
 };
 
 // src/components/WfoSubscription/WfoInSyncField/WfoInSyncField.tsx
-import { useContext as useContext5, useEffect as useEffect7, useState as useState11 } from "react";
+import { useContext as useContext5, useEffect as useEffect8, useState as useState11 } from "react";
 import { useTranslations as useTranslations24 } from "next-intl";
 import Link5 from "next/link";
 import { EuiButton as EuiButton7, EuiContextMenuItem, EuiLoadingSpinner, EuiToolTip as EuiToolTip6 } from "@elastic/eui";
@@ -7614,7 +7692,7 @@ var WfoInSyncField = ({ subscriptionDetail, compactMode = false, setPopover }) =
   const [setSubscriptionInSync, { isLoading }] = useSetSubscriptionInSyncMutation();
   const { showToastMessage } = useShowToastMessage();
   const { showConfirmDialog } = useContext5(ConfirmationDialogContext);
-  useEffect7(() => {
+  useEffect8(() => {
     setInSync(subscriptionDetail.insync);
   }, [subscriptionDetail.insync]);
   const setInSyncAction = () => {
@@ -7697,7 +7775,7 @@ var WfoInSyncField = ({ subscriptionDetail, compactMode = false, setPopover }) =
 };
 
 // src/components/WfoSubscription/WfoProcessesTimeline.tsx
-import React21 from "react";
+import React22 from "react";
 import { useTranslations as useTranslations25 } from "next-intl";
 import Link6 from "next/link";
 import { EuiComment, EuiCommentList, EuiFlexGroup as EuiFlexGroup10, EuiFlexItem as EuiFlexItem7, EuiSpacer as EuiSpacer11, EuiText as EuiText8 } from "@elastic/eui";
@@ -7825,7 +7903,7 @@ var WfoProcessesTimeline = ({ subscriptionDetailProcesses }) => {
       value: "DESC" /* DESC */
     }
   ];
-  const [selectedOption, setSelectedOption] = React21.useState(options[0]);
+  const [selectedOption, setSelectedOption] = React22.useState(options[0]);
   const handleOnSelectOption = (option) => {
     setSelectedOption(option);
   };
@@ -8218,7 +8296,7 @@ var getWfoTableStyles = ({ theme, isDarkModeActive }) => {
 };
 
 // src/components/WfoTable/WfoTable/utils.ts
-import { useEffect as useEffect8 } from "react";
+import { useEffect as useEffect9 } from "react";
 var getSortedVisibleColumns = (columnConfig, columnOrder, hiddenColumns) => {
   const tableHeadersEntries = Object.entries(
     toObjectWithSortedKeys(
@@ -8260,7 +8338,7 @@ var usePageIndexBoundsGuard = ({
   isLoading,
   pagination
 }) => {
-  useEffect8(() => {
+  useEffect9(() => {
     if (!pagination) return;
     const { pageIndex, pageSize, totalItemCount, onChangePage } = pagination;
     const maxPage = Math.max(0, Math.floor(((totalItemCount ?? 1) - 1) / pageSize));
@@ -8740,7 +8818,7 @@ import { useTranslations as useTranslations29 } from "next-intl";
 import { EuiButtonEmpty as EuiButtonEmpty4, EuiFlexGroup as EuiFlexGroup11, EuiSpacer as EuiSpacer13 } from "@elastic/eui";
 
 // src/components/WfoTable/WfoTable/WfoGroupedTable/useGroupedTableConfig.tsx
-import { useEffect as useEffect9, useRef as useRef6, useState as useState15 } from "react";
+import { useEffect as useEffect10, useRef as useRef6, useState as useState15 } from "react";
 
 // src/components/WfoTable/WfoTable/WfoGroupedTable/WfoExpandableRow.tsx
 import { useTranslations as useTranslations28 } from "next-intl";
@@ -8806,12 +8884,12 @@ var WfoExpandableRow = ({
 };
 
 // src/components/WfoTable/WfoTable/WfoGroupedTable/WfoExpandedGroupRow.tsx
-import React30 from "react";
+import React31 from "react";
 
 // src/components/WfoTable/WfoTable/WfoGroupedTable/WfoGroupedTableGroups.tsx
-import React29, { useImperativeHandle } from "react";
+import React30, { useImperativeHandle } from "react";
 import { jsx as jsx138 } from "@emotion/react/jsx-runtime";
-var WfoGroupedTableGroups = React29.forwardRef(
+var WfoGroupedTableGroups = React30.forwardRef(
   ({ data, groupNameLabel, columnConfig, nestingLevel = 1, onExpandRowChange }, reference) => {
     const { expandedRowStyle } = useWithOrchestratorTheme(getWfoTableStyles);
     const { getNestingStyle } = useWithOrchestratorTheme(getWfoGroupedTableStyles);
@@ -8846,7 +8924,7 @@ WfoGroupedTableGroups.displayName = "WfoGroupedTableGroups";
 
 // src/components/WfoTable/WfoTable/WfoGroupedTable/WfoExpandedGroupRow.tsx
 import { Fragment as Fragment22, jsx as jsx139, jsxs as jsxs69 } from "@emotion/react/jsx-runtime";
-var WfoExpandedGroupRow = React30.forwardRef(
+var WfoExpandedGroupRow = React31.forwardRef(
   ({ data, columnConfig, nestingLevel = 1, groupNameLabel, onExpandRowChange }, reference) => {
     const { expandedRowStyle } = useWithOrchestratorTheme(getWfoTableStyles);
     const { innerTableHeaderStyle, getNestingStyle } = useWithOrchestratorTheme(getWfoGroupedTableStyles);
@@ -8924,7 +9002,7 @@ var useGroupedTableConfig = ({
   const numberOfColumnsInnerTable = Object.keys(columnConfig).length;
   const notifyParentRef = useRef6(notifyParent);
   const groupsRef = useRef6(groups);
-  useEffect9(() => {
+  useEffect10(() => {
     if (isExpanding) {
       groupReferences.current.forEach((ref) => {
         ref.expandAllRows();
@@ -8932,7 +9010,7 @@ var useGroupedTableConfig = ({
       setIsExpanding(false);
     }
   }, [isExpanding]);
-  useEffect9(() => {
+  useEffect10(() => {
     if (notifyParentRef.current) {
       notifyParentRef.current(
         isAllGroupsExpanded && groupsRef.current.every(({ groupName }) => isAllSubgroupsExpanded.includes(groupName))
@@ -9473,6 +9551,7 @@ var WfoSubscriptionActions = ({
   compactMode = false
 }) => {
   const t = useTranslations33("subscriptions.detail.actions");
+  const { theme } = useOrchestratorTheme();
   const [isPopoverOpen, setPopover] = useState18(false);
   const router = useRouter6();
   const disableQuery = isLoading || !isPopoverOpen && compactMode;
@@ -9493,7 +9572,7 @@ var WfoSubscriptionActions = ({
   const button = compactMode ? /* @__PURE__ */ jsx152(
     EuiButtonIcon8,
     {
-      iconType: () => /* @__PURE__ */ jsx152(WfoDotsHorizontal, {}),
+      iconType: () => /* @__PURE__ */ jsx152(WfoDotsHorizontal, { color: theme.colors.textDisabled }),
       onClick: onButtonClick,
       "aria-label": "Row context menu",
       isLoading
@@ -9878,12 +9957,12 @@ var WfoProductBlockKeyValueRow = ({
 };
 
 // src/components/WfoSubscription/WfoSubscriptionDetailTree.tsx
-import React41, { useState as useState21 } from "react";
+import React42, { useState as useState21 } from "react";
 import { useTranslations as useTranslations37 } from "next-intl";
 import { EuiCallOut as EuiCallOut3, EuiFlexGroup as EuiFlexGroup17, EuiFlexItem as EuiFlexItem13, EuiText as EuiText15 } from "@elastic/eui";
 
 // src/components/WfoButtonComboBox/WfoButtonComboBox.tsx
-import { useEffect as useEffect10, useState as useState20 } from "react";
+import { useEffect as useEffect11, useState as useState20 } from "react";
 import { EuiPopover as EuiPopover4, EuiSelectable as EuiSelectable2, EuiSpacer as EuiSpacer16, EuiText as EuiText13 } from "@elastic/eui";
 
 // src/components/WfoButtonComboBox/styles.ts
@@ -9922,7 +10001,7 @@ var WfoButtonComboBox = ({
   const [isPopoverOpen, setPopoverOpen] = useState20(false);
   const [optionsState, setOptionsState] = useState20(options);
   const { selectableStyle, titleStyle } = useWithOrchestratorTheme(getWfoButtonComboBoxStyles);
-  useEffect10(() => {
+  useEffect11(() => {
     if (!isPopoverOpen) {
       setOptionsState(options);
     }
@@ -9978,14 +10057,14 @@ function getTokenName(name) {
 }
 
 // src/components/WfoTree/WfoTree.tsx
-import React40, { useEffect as useEffect11 } from "react";
+import React41, { useEffect as useEffect12 } from "react";
 
 // src/components/WfoTree/WfoTreeBranch.tsx
-import React39 from "react";
+import React40 from "react";
 import { EuiListGroup } from "@elastic/eui";
 
 // src/components/WfoTree/WfoTreeNode.tsx
-import React38 from "react";
+import React39 from "react";
 import { EuiFlexGroup as EuiFlexGroup16, EuiFlexItem as EuiFlexItem12, EuiIcon as EuiIcon3, EuiToken } from "@elastic/eui";
 
 // src/components/WfoTree/WfoTreeNodeListItem.tsx
@@ -9999,7 +10078,7 @@ var getStyles7 = ({ theme, toSecondaryColor }) => {
     cursor: "pointer"
   };
   const treeContainerStyle = {
-    width: 0,
+    width: theme.size.m,
     marginTop: theme.size.s,
     marginRight: `-${theme.size.s}`
   };
@@ -10080,7 +10159,7 @@ import { jsx as jsx159, jsxs as jsxs82 } from "@emotion/react/jsx-runtime";
 var WfoTreeNode = ({ item, hasChildren, level }) => {
   const { theme } = useOrchestratorTheme();
   const { expandIconContainerStyle, treeContainerStyle } = useWithOrchestratorTheme(getStyles7);
-  const { expandedIds, collapseNode, expandNode, selectedIds } = React38.useContext(TreeContext);
+  const { expandedIds, collapseNode, expandNode, selectedIds } = React39.useContext(TreeContext);
   const expanded = expandedIds.includes(item.id);
   const selected = selectedIds.includes(item.id);
   const expandIcon = expanded ? "arrowDown" : "arrowRight";
@@ -10101,7 +10180,7 @@ var WfoTreeNode = ({ item, hasChildren, level }) => {
 // src/components/WfoTree/WfoTreeBranch.tsx
 import { Fragment as Fragment32, jsx as jsx160, jsxs as jsxs83 } from "@emotion/react/jsx-runtime";
 var WfoTreeBranch = ({ item, level }) => {
-  const { expandedIds } = React39.useContext(TreeContext);
+  const { expandedIds } = React40.useContext(TreeContext);
   const selected = expandedIds.includes(item.id);
   const { productBlockTreeWidth } = useWithOrchestratorTheme(getSubscriptionDetailStyles);
   const hasChildren = item.children && item.children.length !== 0;
@@ -10121,8 +10200,8 @@ var WfoTreeBranch = ({ item, level }) => {
 // src/components/WfoTree/WfoTree.tsx
 import { jsx as jsx161 } from "@emotion/react/jsx-runtime";
 var WfoTree = ({ treeBlocks, depthList }) => {
-  const { setDepths } = React40.useContext(TreeContext);
-  useEffect11(() => {
+  const { setDepths } = React41.useContext(TreeContext);
+  useEffect12(() => {
     setDepths(depthList);
   }, [setDepths, TreeContext]);
   return /* @__PURE__ */ jsx161("div", { style: { width: "500px" }, children: treeBlocks.map((item) => /* @__PURE__ */ jsx161(WfoTreeBranch, { item, level: 0 }, item.id)) });
@@ -10200,7 +10279,7 @@ var WfoSubscriptionDetailTree = ({
   const { theme } = useOrchestratorTheme();
   const [, setSelectedTreeNode] = useState21(-1);
   const { productBlockTreeWidth } = useWithOrchestratorTheme(getSubscriptionDetailStyles);
-  const { selectedIds, expandAll, resetSelection, selectAll, selectIds, deselectIds } = React41.useContext(
+  const { selectedIds, expandAll, resetSelection, selectAll, selectIds, deselectIds } = React42.useContext(
     TreeContext
   );
   let tree = null;
@@ -10447,7 +10526,7 @@ var customerDescriptionsApi = orchestratorApi.injectEndpoints({
 var { useSetCustomerDescriptionMutation, useUpdateCustomerDescriptionMutation } = customerDescriptionsApi;
 
 // src/components/WfoInlineEdit/WfoInlineEdit.tsx
-import { useEffect as useEffect12, useState as useState22 } from "react";
+import { useEffect as useEffect13, useState as useState22 } from "react";
 import { EuiInlineEditText } from "@elastic/eui";
 import { jsx as jsx164 } from "@emotion/react/jsx-runtime";
 var WfoInlineEdit = ({ value, onlyShowOnHover = false, onSave = () => {
@@ -10462,7 +10541,7 @@ var WfoInlineEdit = ({ value, onlyShowOnHover = false, onSave = () => {
     setValue(value);
     setIsTooltipVisible(true);
   };
-  useEffect12(() => {
+  useEffect13(() => {
     setValue(value);
   }, [value]);
   return /* @__PURE__ */ jsx164(
@@ -10892,7 +10971,7 @@ var WfoFirstPartUUID = ({ UUID, showCopyIcon = true }) => {
   const { theme } = useOrchestratorTheme();
   return /* @__PURE__ */ jsxs88("span", { css: uuidFieldStyle, children: [
     getFirstUuidPart(UUID),
-    showCopyIcon && /* @__PURE__ */ jsx170(EuiCopy2, { textToCopy: UUID, children: (copy) => /* @__PURE__ */ jsx170("div", { className: COPY_ICON_CLASS, onClick: copy, css: clickable, children: /* @__PURE__ */ jsx170(WfoClipboardCopy, { width: 16, height: 16, color: theme.colors.backgroundBaseDisabled }) }) })
+    showCopyIcon && /* @__PURE__ */ jsx170(EuiCopy2, { textToCopy: UUID, children: (copy) => /* @__PURE__ */ jsx170("div", { className: COPY_ICON_CLASS, onClick: copy, css: clickable, children: /* @__PURE__ */ jsx170(WfoClipboardCopy, { width: 16, height: 16, color: theme.colors.backgroundBaseAccent }) }) })
   ] });
 };
 
@@ -10907,13 +10986,13 @@ var WfoInlineJson = ({ data }) => {
 };
 
 // src/components/WfoTable/WfoRowContextMenu/WfoRowContextMenu.tsx
-import { useEffect as useEffect13, useRef as useRef7, useState as useState24 } from "react";
+import { useEffect as useEffect14, useRef as useRef7, useState as useState24 } from "react";
 import { EuiButtonIcon as EuiButtonIcon10, EuiContextMenu as EuiContextMenu2, EuiPopover as EuiPopover5 } from "@elastic/eui";
 import { jsx as jsx172 } from "@emotion/react/jsx-runtime";
 var WfoRowContextMenu = ({ items, onOpenContextMenu }) => {
   const [isOpen, setIsOpen] = useState24(false);
   const onOpenContextMenuRef = useRef7(onOpenContextMenu);
-  useEffect13(() => {
+  useEffect14(() => {
     if (isOpen) {
       onOpenContextMenuRef.current?.();
     }
@@ -10967,7 +11046,7 @@ var toSortedTableColumnConfig = (columnConfig, columnKeys) => columnKeys.reduce(
 }, {});
 
 // src/components/WfoTable/WfoAdvancedTable/WfoAdvancedTable.tsx
-import { useEffect as useEffect14, useState as useState25 } from "react";
+import { useEffect as useEffect15, useState as useState25 } from "react";
 import { useTranslations as useTranslations39 } from "next-intl";
 import { EuiButton as EuiButton9, EuiButtonIcon as EuiButtonIcon11, EuiFlexGroup as EuiFlexGroup18, EuiFlexItem as EuiFlexItem15, EuiSpacer as EuiSpacer18, EuiText as EuiText16 } from "@elastic/eui";
 import { Fragment as Fragment34, jsx as jsx174, jsxs as jsxs89 } from "@emotion/react/jsx-runtime";
@@ -10992,7 +11071,7 @@ var WfoAdvancedTable = ({
   const [selectedDataForDetailModal, setSelectedDataForDetailModal] = useState25(void 0);
   const [showSearchModal, setShowSearchModal] = useState25(false);
   const t = useTranslations39("common");
-  useEffect14(() => {
+  useEffect15(() => {
     if (defaultHiddenColumns) {
       setHiddenColumns(defaultHiddenColumns);
     }
@@ -11002,7 +11081,7 @@ var WfoAdvancedTable = ({
     viewDetails: {
       columnType: "control" /* CONTROL */,
       width: "36px",
-      renderControl: (row) => /* @__PURE__ */ jsx174(EuiFlexItem15, { css: { cursor: "pointer" }, onClick: () => setSelectedDataForDetailModal(row), children: /* @__PURE__ */ jsx174(WfoArrowsExpand, { color: theme.colors.borderBasePlain }) })
+      renderControl: (row) => /* @__PURE__ */ jsx174(EuiFlexItem15, { css: { cursor: "pointer" }, onClick: () => setSelectedDataForDetailModal(row), children: /* @__PURE__ */ jsx174(WfoArrowsExpand, { color: theme.colors.textDisabled }) })
     }
   };
   const tableColumnsWithControlColumns = {
@@ -11439,7 +11518,7 @@ import Link12 from "next/link";
 import { useRouter as useRouter17 } from "next/router";
 
 // src/pages/metadata/WfoProductBlocksPage.tsx
-import { useEffect as useEffect15, useState as useState27 } from "react";
+import { useEffect as useEffect16, useState as useState27 } from "react";
 import { useTranslations as useTranslations42 } from "next-intl";
 import { EuiBadgeGroup as EuiBadgeGroup2 } from "@elastic/eui";
 
@@ -11510,7 +11589,7 @@ var WfoProductBlocksPage = () => {
     METADATA_PRODUCT_BLOCKS_TABLE_LOCAL_STORAGE_KEY
   );
   const [updateProductBlock] = useUpdateProductBlockMutation();
-  useEffect15(() => {
+  useEffect16(() => {
     const storedConfig = getStoredTableConfig();
     if (storedConfig) {
       setTableDefaults(storedConfig);
@@ -11695,7 +11774,7 @@ var WfoProductBlocksPage = () => {
 };
 
 // src/pages/metadata/WfoResourceTypesPage.tsx
-import { useEffect as useEffect16, useState as useState28 } from "react";
+import { useEffect as useEffect17, useState as useState28 } from "react";
 import { useTranslations as useTranslations43 } from "next-intl";
 import { EuiBadgeGroup as EuiBadgeGroup3 } from "@elastic/eui";
 import { Fragment as Fragment39, jsx as jsx187, jsxs as jsxs92 } from "@emotion/react/jsx-runtime";
@@ -11709,7 +11788,7 @@ var WfoResourceTypesPage = () => {
     METADATA_RESOURCE_TYPES_TABLE_LOCAL_STORAGE_KEY
   );
   const [updateResourceType] = useUpdateResourceTypeMutation();
-  useEffect16(() => {
+  useEffect17(() => {
     const storedConfig = getStoredTableConfig();
     if (storedConfig) {
       setTableDefaults(storedConfig);
@@ -11845,7 +11924,7 @@ var WfoResourceTypesPage = () => {
 };
 
 // src/pages/metadata/WfoProductsPage.tsx
-import { useEffect as useEffect17, useState as useState29 } from "react";
+import { useEffect as useEffect18, useState as useState29 } from "react";
 import { useTranslations as useTranslations44 } from "next-intl";
 import { Fragment as Fragment40, jsx as jsx188, jsxs as jsxs93 } from "@emotion/react/jsx-runtime";
 var PRODUCT_FIELD_NAME = "name";
@@ -11856,7 +11935,7 @@ var WfoProductsPage = () => {
   const [tableDefaults, setTableDefaults] = useState29();
   const getStoredTableConfig = useStoredTableConfig(METADATA_PRODUCT_TABLE_LOCAL_STORAGE_KEY);
   const [updateProduct] = useUpdateProductMutation();
-  useEffect17(() => {
+  useEffect18(() => {
     const storedConfig = getStoredTableConfig();
     if (storedConfig) {
       setTableDefaults(storedConfig);
@@ -12025,7 +12104,7 @@ var WfoProductsPage = () => {
 };
 
 // src/pages/metadata/WfoWorkflowsPage.tsx
-import { useEffect as useEffect18, useState as useState30 } from "react";
+import { useEffect as useEffect19, useState as useState30 } from "react";
 import { useTranslations as useTranslations45 } from "next-intl";
 import { EuiBadgeGroup as EuiBadgeGroup4 } from "@elastic/eui";
 
@@ -12064,7 +12143,7 @@ var WfoWorkflowsPage = () => {
   const [tableDefaults, setTableDefaults] = useState30();
   const getStoredTableConfig = useStoredTableConfig(METADATA_WORKFLOWS_TABLE_LOCAL_STORAGE_KEY);
   const [updateWorkflow] = useUpdateWorkflowMutation();
-  useEffect18(() => {
+  useEffect19(() => {
     const storedConfig = getStoredTableConfig();
     if (storedConfig) {
       setTableDefaults(storedConfig);
@@ -12219,7 +12298,7 @@ var WfoWorkflowsPage = () => {
 };
 
 // src/pages/metadata/WfoTasksPage.tsx
-import { useEffect as useEffect19, useState as useState31 } from "react";
+import { useEffect as useEffect20, useState as useState31 } from "react";
 import { useTranslations as useTranslations46 } from "next-intl";
 import { useRouter as useRouter8 } from "next/router";
 import { EuiBadgeGroup as EuiBadgeGroup5, EuiButtonIcon as EuiButtonIcon12, EuiContextMenuItem as EuiContextMenuItem3 } from "@elastic/eui";
@@ -12303,7 +12382,7 @@ var WfoTasksPage = () => {
   const [tableDefaults, setTableDefaults] = useState31();
   const getStoredTableConfig = useStoredTableConfig(METADATA_TASKS_TABLE_LOCAL_STORAGE_KEY);
   const [updateWorkflow] = useUpdateWorkflowMutation();
-  useEffect19(() => {
+  useEffect20(() => {
     const storedConfig = getStoredTableConfig();
     if (storedConfig) {
       setTableDefaults(storedConfig);
@@ -12472,7 +12551,7 @@ var WfoTasksPage = () => {
 };
 
 // src/pages/metadata/WfoScheduledTasksPage.tsx
-import { useEffect as useEffect20, useState as useState32 } from "react";
+import { useEffect as useEffect21, useState as useState32 } from "react";
 import { useTranslations as useTranslations47 } from "next-intl";
 import { useRouter as useRouter9 } from "next/router";
 import { EuiButton as EuiButton10, EuiFlexGroup as EuiFlexGroup19, EuiFlexItem as EuiFlexItem16 } from "@elastic/eui";
@@ -12494,7 +12573,7 @@ var WfoScheduledTasksPage = () => {
     showToastMessage("ERROR" /* ERROR */, "", tError("failedDeletingScheduledTask"));
     console.error("Failed to delete scheduled task.", mutationState.error);
   }
-  useEffect20(() => {
+  useEffect21(() => {
     const storedConfig = getStoredTableConfig();
     if (storedConfig) {
       setTableDefaults(storedConfig);
@@ -13035,7 +13114,7 @@ var WfoProcessListSubscriptionsCell = ({
 import { useRef as useRef9 } from "react";
 
 // src/pages/processes/WfoProcessDetail.tsx
-import { useContext as useContext8, useEffect as useEffect21, useRef as useRef8 } from "react";
+import { useContext as useContext8, useEffect as useEffect22, useRef as useRef8 } from "react";
 import { useTranslations as useTranslations50 } from "next-intl";
 import { useRouter as useRouter11 } from "next/router";
 import { EuiButton as EuiButton11, EuiFlexGroup as EuiFlexGroup21, EuiPanel as EuiPanel2, EuiSpacer as EuiSpacer20, EuiText as EuiText17 } from "@elastic/eui";
@@ -13139,7 +13218,7 @@ var ProcessHeaderValue = ({ translationKey, value = "" }) => {
 };
 function useHasPreviousRoute() {
   const hasPrev = useRef8(false);
-  useEffect21(() => {
+  useEffect22(() => {
     if (document.referrer && document.referrer !== window.location.href) {
       hasPrev.current = true;
     }
@@ -13388,7 +13467,7 @@ import { useRouter as useRouter12 } from "next/router";
 import { PydanticForm as PydanticForm3 } from "pydantic-forms";
 
 // src/components/WfoPydanticForm/Footer.tsx
-import { useCallback as useCallback6, useContext as useContext9, useEffect as useEffect22 } from "react";
+import { useCallback as useCallback6, useContext as useContext9, useEffect as useEffect23 } from "react";
 import { useTranslations as useTranslations52 } from "next-intl";
 import { EuiButton as EuiButton12, EuiFlexGroup as EuiFlexGroup22, EuiHorizontalRule as EuiHorizontalRule5 } from "@elastic/eui";
 
@@ -13432,7 +13511,7 @@ var Footer = ({ onCancel, onPrevious, hasNext, hasPrevious, isTask = false, butt
     }
   }, [onCancel, showConfirmDialog, t]);
   const { next, previous } = buttons || {};
-  useEffect22(() => {
+  useEffect23(() => {
     const handleKeyDown = (event) => {
       const isPrimary = event.metaKey || event.ctrlKey;
       if (isPrimary && event.key === "ArrowLeft") {
@@ -13604,7 +13683,7 @@ var WfoPydanticForm = ({ processName, startProcessPayload, isTask }) => {
 };
 
 // src/components/WfoWorkflowSteps/WfoStep/WfoStep.tsx
-import React60, { useCallback as useCallback10, useState as useState34 } from "react";
+import React61, { useCallback as useCallback10, useState as useState34 } from "react";
 import { useTranslations as useTranslations55 } from "next-intl";
 import { EuiFlexGroup as EuiFlexGroup23, EuiFlexItem as EuiFlexItem19, EuiPanel as EuiPanel3, EuiText as EuiText18 } from "@elastic/eui";
 
@@ -13929,7 +14008,7 @@ var WfoStepForm = ({ userInputForm, isTask, processId, userPermissions }) => {
 
 // src/components/WfoWorkflowSteps/WfoStep/WfoStep.tsx
 import { Fragment as Fragment47, jsx as jsx203, jsxs as jsxs104 } from "@emotion/react/jsx-runtime";
-var WfoStep = React60.forwardRef(
+var WfoStep = React61.forwardRef(
   ({
     stepListItem,
     onToggleStepDetail,
@@ -14025,9 +14104,9 @@ var WfoStep = React60.forwardRef(
 WfoStep.displayName = "WfoStep";
 
 // src/components/WfoWorkflowSteps/WfoStepList/WfoStepList.tsx
-import React61, { useImperativeHandle as useImperativeHandle2, useRef as useRef10 } from "react";
+import React62, { useImperativeHandle as useImperativeHandle2, useRef as useRef10 } from "react";
 import { Fragment as Fragment48, jsx as jsx204, jsxs as jsxs105 } from "@emotion/react/jsx-runtime";
-var WfoStepList = React61.forwardRef(
+var WfoStepList = React62.forwardRef(
   ({
     stepListItems,
     showHiddenKeys,
@@ -14096,11 +14175,11 @@ var WfoStepList = React61.forwardRef(
 WfoStepList.displayName = "WfoStepList";
 
 // src/components/WfoWorkflowSteps/WfoWorkflowStepList/WfoWorkflowStepList.tsx
-import React63, { useEffect as useEffect24, useState as useState36 } from "react";
+import React64, { useEffect as useEffect25, useState as useState36 } from "react";
 import { useTranslations as useTranslations58 } from "next-intl";
 
 // src/components/WfoDiff/WfoDiff.tsx
-import { useCallback as useCallback11, useEffect as useEffect23, useMemo as useMemo4, useState as useState35 } from "react";
+import { useCallback as useCallback11, useEffect as useEffect24, useMemo as useMemo4, useState as useState35 } from "react";
 import { Diff, Hunk, parseDiff, tokenize } from "react-diff-view";
 import "react-diff-view/style/index.css";
 import { useTranslations as useTranslations56 } from "next-intl";
@@ -14177,7 +14256,7 @@ var WfoDiff = ({ oldText, newText, syntax }) => {
       return void 0;
     }
   }, [hunks, syntax]);
-  useEffect23(() => {
+  useEffect24(() => {
     updateDiffText();
   }, [updateDiffText, showFull]);
   return /* @__PURE__ */ jsxs106("div", { children: [
@@ -14268,7 +14347,7 @@ var WfoProcessSubscriptionDelta = ({ processId }) => {
     }
   );
 };
-var WfoWorkflowStepList = React63.forwardRef(
+var WfoWorkflowStepList = React64.forwardRef(
   ({ steps = [], lastStatus, traceBack, processId, isTask, userInputForm, userPermissions }, reference) => {
     const [showHiddenKeys, setShowHiddenKeys] = useState36(false);
     const [showRaw, setShowRaw] = useState36(false);
@@ -14294,7 +14373,7 @@ var WfoWorkflowStepList = React63.forwardRef(
         };
       });
     };
-    useEffect24(() => {
+    useEffect25(() => {
       setStepListItems(
         (previousStepListItems) => persistStepListItemState(previousStepListItems, steps, userInputForm)
       );
@@ -14795,7 +14874,7 @@ var WfoSubscriptionDetailPage = () => {
 };
 
 // src/pages/subscriptions/WfoSubscriptionsListPage.tsx
-import { useEffect as useEffect25, useState as useState39 } from "react";
+import { useEffect as useEffect26, useState as useState39 } from "react";
 import { useTranslations as useTranslations65 } from "next-intl";
 import { StringParam as StringParam4, useQueryParam as useQueryParam3, withDefault as withDefault4 } from "use-query-params";
 import { EuiSpacer as EuiSpacer24 } from "@elastic/eui";
@@ -14804,7 +14883,7 @@ var WfoSubscriptionsListPage = () => {
   const t = useTranslations65("subscriptions.detail");
   const [tableDefaults, setTableDefaults] = useState39();
   const getStoredTableConfig = useStoredTableConfig(SUBSCRIPTIONS_TABLE_LOCAL_STORAGE_KEY);
-  useEffect25(() => {
+  useEffect26(() => {
     const storedConfig = getStoredTableConfig();
     if (storedConfig) {
       setTableDefaults(storedConfig);
@@ -14855,7 +14934,7 @@ var WfoSubscriptionsListPage = () => {
 };
 
 // src/pages/tasks/WfoTasksListPage.tsx
-import { useContext as useContext10, useEffect as useEffect26, useState as useState40 } from "react";
+import { useContext as useContext10, useEffect as useEffect27, useState as useState40 } from "react";
 import { useTranslations as useTranslations66 } from "next-intl";
 import Link11 from "next/link";
 import { useRouter as useRouter15 } from "next/router";
@@ -14938,7 +15017,7 @@ var WfoTasksListPage = () => {
   const { showConfirmDialog } = useContext10(ConfirmationDialogContext);
   const [retryAllProcesses] = useRetryAllProcessesMutation();
   const { isEngineRunningNow } = useCheckEngineStatus();
-  useEffect26(() => {
+  useEffect27(() => {
     const storedConfig = getStoredTableConfig();
     if (storedConfig) {
       setTableDefaults(storedConfig);
@@ -15031,7 +15110,7 @@ var WfoTasksListPage = () => {
 };
 
 // src/pages/workflows/WfoWorkflowsListPage.tsx
-import { useEffect as useEffect27, useState as useState41 } from "react";
+import { useEffect as useEffect28, useState as useState41 } from "react";
 import { useTranslations as useTranslations67 } from "next-intl";
 import { useRouter as useRouter16 } from "next/router";
 import { StringParam as StringParam6, useQueryParam as useQueryParam5, withDefault as withDefault6 } from "use-query-params";
@@ -15112,7 +15191,7 @@ var WfoWorkflowsListPage = () => {
   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);
-  useEffect27(() => {
+  useEffect28(() => {
     const storedConfig = getStoredTableConfig();
     if (storedConfig) {
       setTableDefaults(storedConfig);
@@ -15655,9 +15734,9 @@ var WfoInsyncIcon = ({ inSync }) => {
 };
 
 // src/components/WfoErrorBoundary/WfoErrorBoundary.tsx
-import React71 from "react";
+import React72 from "react";
 import { jsx as jsx228, jsxs as jsxs123 } from "@emotion/react/jsx-runtime";
-var WfoErrorBoundary = class extends React71.Component {
+var WfoErrorBoundary = class extends React72.Component {
   constructor(props) {
     super(props);
     this.state = { hasError: false };
@@ -15862,6 +15941,11 @@ var WfoSubscriptionsList = ({
   const { data, isFetching, error, endpointName } = useGetSubscriptionListQuery(graphqlQueryVariables);
   const subscriptionList = mapGraphQlSubscriptionsResultToSubscriptionListItems(data);
   const tableColumnConfig = {
+    actions: {
+      columnType: "control" /* CONTROL */,
+      width: "50px",
+      renderControl: (row) => /* @__PURE__ */ jsx231(WfoSubscriptionActions, { compactMode: true, subscriptionId: row.subscriptionId })
+    },
     subscriptionId: {
       columnType: "data" /* DATA */,
       label: t("id"),
@@ -15886,11 +15970,12 @@ var WfoSubscriptionsList = ({
     insync: {
       columnType: "data" /* DATA */,
       label: t("insync"),
-      width: "80px",
+      width: "75px",
       renderData: (value) => /* @__PURE__ */ jsx231(WfoInsyncIcon, { inSync: value })
     },
     productName: {
       columnType: "data" /* DATA */,
+      width: "260px",
       label: t("product")
     },
     tag: {
@@ -15910,7 +15995,7 @@ var WfoSubscriptionsList = ({
     startDate: {
       columnType: "data" /* DATA */,
       label: t("startDate"),
-      width: "120px",
+      width: "100px",
       renderData: (value) => /* @__PURE__ */ jsx231(WfoDateTime, { dateOrIsoString: value }),
       renderDetails: parseDateToLocaleDateTimeString,
       clipboardText: parseDateToLocaleDateTimeString,
@@ -15919,7 +16004,7 @@ var WfoSubscriptionsList = ({
     endDate: {
       columnType: "data" /* DATA */,
       label: t("endDate"),
-      width: "120px",
+      width: "100px",
       renderData: (value) => /* @__PURE__ */ jsx231(WfoDateTime, { dateOrIsoString: value }),
       renderDetails: parseDateToLocaleDateTimeString,
       clipboardText: parseDateToLocaleDateTimeString,
@@ -15942,12 +16027,6 @@ var WfoSubscriptionsList = ({
         );
       }
     },
-    actions: {
-      columnType: "control" /* CONTROL */,
-      label: t("actions"),
-      width: "80px",
-      renderControl: (row) => /* @__PURE__ */ jsx231(WfoSubscriptionActions, { compactMode: true, subscriptionId: row.subscriptionId })
-    },
     metadata: {
       columnType: "data" /* DATA */,
       label: t("metadata"),
@@ -16785,7 +16864,7 @@ var WfoTableCodeBlock = ({ stepState: data }) => {
 };
 
 // src/components/WfoSearchPage/WfoSearch/WfoSearch.tsx
-import { useEffect as useEffect31, useState as useState48 } from "react";
+import { useEffect as useEffect32, useState as useState48 } from "react";
 import { useTranslations as useTranslations83 } from "next-intl";
 import {
   EuiButton as EuiButton21,
@@ -16802,10 +16881,10 @@ import {
 } from "@elastic/eui";
 
 // src/hooks/useDebounce.ts
-import { useEffect as useEffect28, useState as useState44 } from "react";
+import { useEffect as useEffect29, useState as useState44 } from "react";
 function useDebounce(value, delay) {
   const [debouncedValue, setDebouncedValue] = useState44(value);
-  useEffect28(() => {
+  useEffect29(() => {
     if (delay <= 0) {
       setDebouncedValue(value);
       return;
@@ -16821,7 +16900,7 @@ function useDebounce(value, delay) {
 }
 
 // src/hooks/useSearch.ts
-import { useEffect as useEffect29, useState as useState45 } from "react";
+import { useEffect as useEffect30, useState as useState45 } from "react";
 var useSearch = (query, entityType, filterGroup, limit, retriever = "auto" /* Auto */) => {
   const [results, setResults] = useState45({
     data: [],
@@ -16829,7 +16908,7 @@ var useSearch = (query, entityType, filterGroup, limit, retriever = "auto" /* Au
     search_metadata: { search_type: null, description: null }
   });
   const [triggerSearch, { isLoading, isError }] = useSearchMutation();
-  useEffect29(() => {
+  useEffect30(() => {
     const queryText = typeof query === "string" ? query : query.text?.trim() || "";
     const hasFilters = filterGroup && filterGroup.children.length > 0;
     if (queryText.length < 2 && !hasFilters) {
@@ -16978,7 +17057,7 @@ var useSearchPagination = (debouncedQuery, selectedEntityTab, filterGroup, pageS
 };
 
 // src/hooks/useUrlParams.ts
-import { useCallback as useCallback13, useEffect as useEffect30, useState as useState47 } from "react";
+import { useCallback as useCallback13, useEffect as useEffect31, useState as useState47 } from "react";
 
 // src/components/WfoSearchPage/constants.ts
 var DEFAULT_PAGE_SIZE2 = 5;
@@ -17039,7 +17118,7 @@ var useUrlParams = () => {
     window.history.replaceState({}, "", newUrl);
     setUrlParams(newParams);
   }, [query, selectedEntityTab, showFilters, selectedRecordIndex, selectedRecordId]);
-  useEffect30(() => {
+  useEffect31(() => {
     updateUrl();
   }, [updateUrl]);
   return {
@@ -17091,7 +17170,7 @@ var WfoSearch = () => {
     retrieverType
   );
   const [hasSearchBeenAttempted, setHasSearchBeenAttempted] = useState48(false);
-  useEffect31(() => {
+  useEffect32(() => {
     const queryText = typeof debouncedQuery === "string" ? debouncedQuery : debouncedQuery?.text?.trim() || "";
     const hasFilters = filterGroup && filterGroup.children.length > 0;
     if (queryText.length >= 2 || hasFilters) {
@@ -17134,7 +17213,7 @@ var WfoSearch = () => {
     setSearchValue(searchText);
     setQuery(searchText);
   };
-  useEffect31(() => {
+  useEffect32(() => {
     if (typeof query === "string") {
       if (query !== searchValue) {
         setSearchValue(query);
@@ -17151,7 +17230,7 @@ var WfoSearch = () => {
   const shouldShowNoResults = (() => {
     return hasSearchBeenAttempted && !loading && results.data.length === 0;
   })();
-  useEffect31(() => {
+  useEffect32(() => {
     if (results.data.length > 0) {
       if (selectedRecordId) {
         const foundIndex = results.data.findIndex((result) => result.entity_id === selectedRecordId);
@@ -17169,10 +17248,10 @@ var WfoSearch = () => {
       }
     }
   }, [results.data, selectedRecordId, setSelectedRecordId, setSelectedRecordIndex, urlParams]);
-  useEffect31(() => {
+  useEffect32(() => {
     setShowDetailPanel(results?.data?.length > 0 && selectedRecordIndex >= 0 && selectedEntityTab === "SUBSCRIPTION");
   }, [results?.data?.length, selectedRecordIndex, selectedEntityTab]);
-  useEffect31(() => {
+  useEffect32(() => {
     resetPagination();
   }, [debouncedQuery, selectedEntityTab, filterGroup, resetPagination]);
   const { RESULTS_GROW, DETAIL_GROW } = LAYOUT_RATIOS;
@@ -17333,7 +17412,7 @@ var WfoSearchLoadingState = () => {
 };
 
 // src/components/WfoSearchPage/WfoSearchResults/WfoSearchResultItem.tsx
-import { useEffect as useEffect32, useRef as useRef11 } from "react";
+import { useEffect as useEffect33, useRef as useRef11 } from "react";
 import { useTranslations as useTranslations86 } from "next-intl";
 import { EuiButtonIcon as EuiButtonIcon15, EuiFlexGroup as EuiFlexGroup38, EuiFlexItem as EuiFlexItem36, EuiPanel as EuiPanel16, EuiSpacer as EuiSpacer32, EuiText as EuiText35 } from "@elastic/eui";
 
@@ -17418,7 +17497,7 @@ var WfoSearchResultItem = ({
   const baseUrl = `${window.location.protocol}//${window.location.host}`;
   const detailUrl = getDetailUrl(result, baseUrl);
   const itemRef = useRef11(null);
-  useEffect32(() => {
+  useEffect33(() => {
     if (isSelected && onPositionChange && itemRef.current) {
       onPositionChange(index, itemRef.current);
     }
@@ -17631,7 +17710,7 @@ import { useTranslations as useTranslations93 } from "next-intl";
 import { EuiButtonIcon as EuiButtonIcon17, EuiFlexGroup as EuiFlexGroup45, EuiFlexItem as EuiFlexItem42, EuiFormRow as EuiFormRow8, EuiPanel as EuiPanel18 } from "@elastic/eui";
 
 // src/hooks/usePathAutoComplete.ts
-import { useEffect as useEffect33, useState as useState49 } from "react";
+import { useEffect as useEffect34, useState as useState49 } from "react";
 var FALLBACK_DEFINITIONS = {
   string: {
     operators: ["eq", "neq"],
@@ -17679,7 +17758,7 @@ var usePathAutocomplete = (prefix, entityType) => {
     isLoading,
     isError
   } = useSearchPathsQuery({ q: debouncedPrefix, entity_type: entityType }, { skip: debouncedPrefix.length < 1 });
-  useEffect33(() => {
+  useEffect34(() => {
     if (debouncedPrefix.length < 1) {
       setPaths([]);
       return;
@@ -18632,10 +18711,142 @@ var FilterGroup = ({
 };
 
 // src/components/WfoAgent/WfoAgent/WfoAgent.tsx
+import { useCallback as useCallback14, useRef as useRef12 } from "react";
 import { useTranslations as useTranslations99 } from "next-intl";
-import { useCopilotAction, useRenderToolCall } from "@copilotkit/react-core";
+import { useRenderToolCall } from "@copilotkit/react-core";
 import { CopilotChat } from "@copilotkit/react-ui";
 
+// src/hooks/useAgentPlanEvents.ts
+import { useEffect as useEffect35, useState as useState51 } from "react";
+import { useAgent } from "@copilotkit/react-core/v2";
+var PLANNER_STEP_NAME = "Planner";
+var initialState2 = {
+  planning: false,
+  steps: []
+};
+var updateSteps = (steps, predicate, updater) => steps.map((step) => predicate(step) ? updater(step) : step);
+function useAgentPlanEvents(agentId = "query_agent") {
+  const { agent } = useAgent({ agentId });
+  const [executionState, setExecutionState] = useState51(initialState2);
+  useEffect35(() => {
+    if (!agent) {
+      return;
+    }
+    const subscriber = {
+      onCustomEvent: (params) => {
+        const event = params?.event;
+        if (!event) return;
+        if (event.name === "PLAN_CREATED" /* PLAN_CREATED */) {
+          const tasks = event.value;
+          if (!Array.isArray(tasks)) return;
+          setExecutionState({
+            planning: false,
+            steps: tasks.map((task) => ({
+              step_name: task.skillName,
+              reasoning: task.reasoning,
+              status: "pending",
+              tool_calls: []
+            }))
+          });
+          return;
+        }
+        if (event.name === "AGENT_STEP_ACTIVE" /* STEP_ACTIVE */) {
+          const stepName = event.value?.step;
+          if (!stepName) return;
+          if (stepName === PLANNER_STEP_NAME) {
+            setExecutionState((prev) => ({
+              ...prev,
+              planning: true
+            }));
+            return;
+          }
+          const reasoning = event.value?.reasoning ?? null;
+          setExecutionState((prev) => {
+            const steps = updateSteps(
+              prev.steps,
+              (step) => step.status === "active",
+              (step) => ({ ...step, status: "completed" })
+            );
+            const existingIndex = steps.findIndex((step) => step.step_name === stepName);
+            if (existingIndex >= 0) {
+              steps[existingIndex] = {
+                ...steps[existingIndex],
+                status: "active",
+                reasoning: reasoning ?? steps[existingIndex].reasoning
+              };
+            } else {
+              steps.push({
+                step_name: stepName,
+                reasoning,
+                status: "active",
+                tool_calls: []
+              });
+            }
+            return { planning: false, steps };
+          });
+        }
+      },
+      onToolCallStartEvent: ({ event }) => {
+        setExecutionState((prev) => {
+          const currentStep = prev.steps.find((step) => step.status === "active");
+          if (!currentStep) return prev;
+          return {
+            ...prev,
+            steps: updateSteps(
+              prev.steps,
+              (step) => step.step_name === currentStep.step_name,
+              (step) => ({
+                ...step,
+                tool_calls: [
+                  ...step.tool_calls,
+                  {
+                    id: event.toolCallId,
+                    name: event.toolCallName,
+                    status: "executing"
+                  }
+                ]
+              })
+            )
+          };
+        });
+      },
+      onToolCallEndEvent: ({ event }) => {
+        setExecutionState((prev) => ({
+          ...prev,
+          steps: updateSteps(
+            prev.steps,
+            (step) => step.tool_calls.some((toolCall) => toolCall.id === event.toolCallId),
+            (step) => ({
+              ...step,
+              tool_calls: step.tool_calls.map(
+                (toolCall) => toolCall.id === event.toolCallId ? { ...toolCall, status: "complete" } : toolCall
+              )
+            })
+          )
+        }));
+      },
+      onRunStartedEvent: () => {
+        setExecutionState(initialState2);
+      },
+      onRunFinishedEvent: () => {
+        setExecutionState((prev) => ({
+          planning: false,
+          steps: updateSteps(
+            prev.steps,
+            (step) => step.status === "active",
+            (step) => ({ ...step, status: "completed" })
+          )
+        }));
+      }
+    };
+    const subscription = agent.subscribe(subscriber);
+    return () => {
+      subscription.unsubscribe();
+    };
+  }, [agent]);
+  return executionState;
+}
+
 // src/components/WfoAgent/ExportButton/ExportButton.tsx
 import { useTranslations as useTranslations95 } from "next-intl";
 import { EuiIcon as EuiIcon8, EuiLoadingSpinner as EuiLoadingSpinner3 } from "@elastic/eui";
@@ -18719,7 +18930,7 @@ var getExportButtonStyles = ({ theme }) => {
 
 // src/components/WfoAgent/ExportButton/ExportButton.tsx
 import { jsx as jsx267, jsxs as jsxs142 } from "@emotion/react/jsx-runtime";
-function ExportButton({ exportData }) {
+function ExportButton({ artifact }) {
   const { showToastMessage } = useShowToastMessage();
   const tError = useTranslations95("errors");
   const [triggerExport, { isFetching }] = useLazyGetAgentExportQuery();
@@ -18734,7 +18945,7 @@ function ExportButton({ exportData }) {
   } = useWithOrchestratorTheme(getExportButtonStyles);
   const filename = getCsvFileNameWithDate("export");
   const onDownloadClick = async () => {
-    const data = await triggerExport(exportData.download_url).unwrap();
+    const data = await triggerExport(artifact.download_url).unwrap();
     const keyOrder = data.page.length > 0 ? Object.keys(data.page[0]) : [];
     const handleExport = csvDownloadHandler(
       async () => data,
@@ -18756,7 +18967,7 @@ function ExportButton({ exportData }) {
     await handleExport();
   };
   return /* @__PURE__ */ jsx267("div", { css: containerStyle2, children: /* @__PURE__ */ jsxs142("div", { css: buttonWrapperStyle, children: [
-    exportData.message && /* @__PURE__ */ jsx267("div", { css: titleStyle, children: exportData.message }),
+    artifact.description && /* @__PURE__ */ jsx267("div", { css: titleStyle, children: artifact.description }),
     /* @__PURE__ */ jsxs142("div", { css: fileRowStyle, onClick: onDownloadClick, children: [
       /* @__PURE__ */ jsxs142("div", { css: fileInfoStyle, children: [
         /* @__PURE__ */ jsx267(EuiIcon8, { type: "document", size: "m" }),
@@ -18767,310 +18978,137 @@ function ExportButton({ exportData }) {
   ] }) });
 }
 
-// src/components/WfoAgent/ToolProgress/ToolProgress.tsx
-import { useState as useState51 } from "react";
-import { useTranslations as useTranslations97 } from "next-intl";
-import { EuiFlexGroup as EuiFlexGroup49, EuiFlexItem as EuiFlexItem46, EuiLoadingSpinner as EuiLoadingSpinner4 } from "@elastic/eui";
-
-// src/components/WfoAgent/ToolProgress/DiscoverFilterPathsDisplay.tsx
-import React78 from "react";
-import { EuiSpacer as EuiSpacer34, EuiText as EuiText42 } from "@elastic/eui";
-import { Fragment as Fragment66, jsx as jsx268, jsxs as jsxs143 } from "@emotion/react/jsx-runtime";
-var DiscoverFilterPathsDisplay = ({ parameters, result }) => {
-  const { field_names = [] } = parameters;
-  const foundFields = result ? Object.entries(result).filter(
-    ([, fieldResult]) => fieldResult.status !== "NOT_FOUND"
-  ) : [];
-  const totalPaths = foundFields.reduce((count, [, fieldResult]) => {
-    const pathCount = fieldResult.leaves?.reduce((leafCount, leaf) => {
-      return leafCount + (leaf.paths?.length || 1);
-    }, 0) || 0;
-    return count + pathCount;
-  }, 0);
-  return /* @__PURE__ */ jsxs143("div", { children: [
-    field_names.length > 0 && /* @__PURE__ */ jsxs143(Fragment66, { children: [
-      /* @__PURE__ */ jsxs143(EuiText42, { size: "xs", color: "subdued", children: [
-        "Looking for",
-        " ",
-        field_names.map((name, idx) => /* @__PURE__ */ jsxs143(React78.Fragment, { children: [
-          idx > 0 && ", ",
-          /* @__PURE__ */ jsx268(WfoBadge, { color: "hollow", textColor: "default", children: name })
-        ] }, name))
-      ] }),
-      /* @__PURE__ */ jsx268(EuiSpacer34, { size: "s" })
-    ] }),
-    result && totalPaths > 0 && /* @__PURE__ */ jsxs143("div", { children: [
-      /* @__PURE__ */ jsx268(EuiText42, { size: "xs", color: "subdued", children: /* @__PURE__ */ jsxs143("strong", { children: [
-        "Found ",
-        totalPaths,
-        " path",
-        totalPaths > 1 ? "s" : "",
-        ":"
-      ] }) }),
-      /* @__PURE__ */ jsx268(EuiSpacer34, { size: "xs" }),
-      foundFields.map(([fieldName, fieldResult]) => /* @__PURE__ */ jsx268("div", { style: { marginBottom: "8px" }, children: fieldResult.leaves && fieldResult.leaves.length > 0 && fieldResult.leaves.map((leaf, leafIdx) => {
-        const paths = leaf.paths || (leaf.name ? [leaf.name] : []);
-        return /* @__PURE__ */ jsx268(React78.Fragment, { children: paths.map((path, pathIdx) => /* @__PURE__ */ jsx268(
-          "div",
-          {
-            style: {
-              marginBottom: "4px"
-            },
-            children: /* @__PURE__ */ jsx268(WfoPathBreadcrumb, { path, size: "s" })
-          },
-          pathIdx
-        )) }, leafIdx);
-      }) }, fieldName))
-    ] })
-  ] });
-};
-
-// src/components/WfoAgent/ToolProgress/RunSearchDisplay.tsx
-import { EuiFlexGroup as EuiFlexGroup47, EuiFlexItem as EuiFlexItem44, EuiText as EuiText43 } from "@elastic/eui";
-import { jsx as jsx269, jsxs as jsxs144 } from "@emotion/react/jsx-runtime";
-var RunSearchDisplay = ({ parameters }) => {
-  const { limit = 10 } = parameters;
-  return /* @__PURE__ */ jsx269("div", { children: /* @__PURE__ */ jsxs144(EuiFlexGroup47, { gutterSize: "s", alignItems: "center", children: [
-    /* @__PURE__ */ jsx269(EuiFlexItem44, { grow: false, children: /* @__PURE__ */ jsx269(EuiText43, { size: "xs", color: "subdued", children: /* @__PURE__ */ jsx269("strong", { children: "Results Limit" }) }) }),
-    /* @__PURE__ */ jsx269(EuiFlexItem44, { grow: false, children: /* @__PURE__ */ jsx269(WfoBadge, { textColor: "default", color: "hollow", children: limit }) })
-  ] }) });
-};
-
-// src/components/WfoAgent/ToolProgress/SetFilterTreeDisplay.tsx
+// src/components/WfoAgent/WfoPlanProgress/WfoPlanProgress.tsx
+import { useState as useState52 } from "react";
 import { useTranslations as useTranslations96 } from "next-intl";
-import { EuiText as EuiText44 } from "@elastic/eui";
+import { EuiLoadingSpinner as EuiLoadingSpinner4, EuiPanel as EuiPanel20, EuiText as EuiText42 } from "@elastic/eui";
 
-// src/components/WfoAgent/ToolProgress/SetFilterTreeDisplay.styles.ts
+// src/components/WfoAgent/WfoPlanProgress/styles.ts
 import { css as css45 } from "@emotion/react";
-var getFilterDisplayStyles = ({ theme }) => {
-  const wrapStyle = css45({
-    display: "flex",
-    flexWrap: "wrap",
-    gap: theme.size.s
+var getWfoPlanProgressStyles = ({ theme }) => {
+  const iconSize = 14;
+  const containerStyle2 = css45({
+    maxWidth: "50%",
+    marginRight: "auto",
+    marginBottom: theme.size.s,
+    fontSize: theme.size.m
   });
-  const columnGroupWrapStyle = css45({
+  const headerStyle = css45({
     display: "flex",
-    flexDirection: "column",
+    alignItems: "center",
     gap: theme.size.s,
-    alignItems: "flex-start"
+    paddingBottom: theme.size.s,
+    marginBottom: theme.size.xs,
+    borderBottom: `${theme.border.width.thin} solid ${theme.colors.borderBaseSubdued}`,
+    fontWeight: theme.font.weight.semiBold
   });
-  const chipStyle = css45({
-    display: "inline-flex",
+  const rowStyle = css45({
+    display: "flex",
     alignItems: "center",
-    borderRadius: theme.size.xl,
-    border: `1px solid ${theme.border.color}`,
-    backgroundColor: theme.colors.backgroundBasePlain,
-    padding: `${theme.size.s} ${theme.size.m}`,
-    lineHeight: 1.1,
-    gap: theme.size.s
-  });
-  const groupStyle = css45({
-    border: `1px solid ${theme.colors.borderBaseSubdued}`,
-    borderRadius: theme.border.radius.medium,
-    padding: theme.size.s,
-    margin: theme.size.xs,
-    backgroundColor: theme.colors.backgroundBasePlain
-  });
-  const operatorStyle = css45({
-    fontFamily: theme.font.familyCode,
-    padding: `${theme.size.xs}px ${theme.size.s}px`,
-    borderRadius: theme.size.s,
-    backgroundColor: theme.colors.primary,
-    color: theme.colors.textGhost,
-    fontSize: theme.size.m,
-    fontWeight: theme.font.weight.bold,
-    margin: `${theme.size.xs} 0`
+    gap: theme.size.s,
+    padding: `${theme.size.xxs} 0`
   });
-  const valueStyle = css45({
-    fontWeight: theme.font.weight.semiBold,
-    color: theme.colors.warning
+  const reasoningStyle = css45({
+    marginLeft: `calc(${iconSize}px + ${theme.size.s})`
   });
-  return {
-    wrapStyle,
-    columnGroupWrapStyle,
-    chipStyle,
-    groupStyle,
-    operatorStyle,
-    valueStyle
-  };
-};
-
-// src/components/WfoAgent/ToolProgress/SetFilterTreeDisplay.tsx
-import { jsx as jsx270, jsxs as jsxs145 } from "@emotion/react/jsx-runtime";
-var DEPTH_INDENT = 16;
-var SetFilterTreeDisplay = ({ parameters }) => {
-  const t = useTranslations96("agent.page");
-  const { wrapStyle, columnGroupWrapStyle, chipStyle, groupStyle, operatorStyle, valueStyle } = useWithOrchestratorTheme(getFilterDisplayStyles);
-  const filters = parameters?.filters || parameters;
-  const formatFilterValue = (condition) => {
-    if ("value" in condition && condition.value !== void 0) {
-      if (condition.op === "between" && condition.value && typeof condition.value === "object") {
-        const { start, end, from, to } = condition.value;
-        const fromVal = start || from;
-        const toVal = end || to;
-        return `${fromVal} \u2026 ${toVal}`;
-      }
-      return String(condition.value);
-    }
-    return "\u2014";
-  };
-  const renderFilterGroup = (group, depth = 0) => {
-    if (!group.children || group.children.length === 0) {
-      return /* @__PURE__ */ jsx270(EuiText44, { size: "s", color: "subdued", children: /* @__PURE__ */ jsx270("em", { children: t("emptyGroup") }) });
-    }
-    const areChildrenGroups = group.children.length > 0 && !isCondition(group.children[0]);
-    return /* @__PURE__ */ jsxs145("div", { css: groupStyle, style: { marginLeft: depth * DEPTH_INDENT }, children: [
-      /* @__PURE__ */ jsx270("div", { css: operatorStyle, children: group.op }),
-      /* @__PURE__ */ jsx270("div", { css: areChildrenGroups ? columnGroupWrapStyle : wrapStyle, children: group.children.map((child, i) => /* @__PURE__ */ jsx270("div", { children: isCondition(child) ? /* @__PURE__ */ jsxs145("div", { css: chipStyle, children: [
-        /* @__PURE__ */ jsx270(WfoPathBreadcrumb, { path: child.path, size: "s", showArrows: true }),
-        /* @__PURE__ */ jsx270(WfoBadge, { textColor: "default", color: "hollow", children: getOperatorDisplay(
-          child.condition.op,
-          child.value_kind ? {
-            path: child.path,
-            type: child.value_kind,
-            operators: [],
-            value_schema: {},
-            group: "leaf"
-          } : void 0
-        ).symbol }),
-        /* @__PURE__ */ jsx270("span", { css: valueStyle, children: formatFilterValue(child.condition) })
-      ] }) : renderFilterGroup(child, depth + 1) }, i)) })
-    ] });
-  };
-  if (!filters || !filters.children || filters.children.length === 0) {
-    return /* @__PURE__ */ jsx270(EuiText44, { size: "s", color: "subdued", children: /* @__PURE__ */ jsx270("em", { children: t("noFiltersApplied") }) });
-  }
-  return /* @__PURE__ */ jsx270("div", { children: renderFilterGroup(filters) });
-};
-
-// src/components/WfoAgent/ToolProgress/StartNewSearchDisplay.tsx
-import { EuiFlexGroup as EuiFlexGroup48, EuiFlexItem as EuiFlexItem45, EuiSpacer as EuiSpacer35, EuiText as EuiText45 } from "@elastic/eui";
-import { Fragment as Fragment67, jsx as jsx271, jsxs as jsxs146 } from "@emotion/react/jsx-runtime";
-var StartNewSearchDisplay = ({ parameters }) => {
-  const { entity_type, action, query } = parameters;
-  return /* @__PURE__ */ jsxs146("div", { children: [
-    /* @__PURE__ */ jsxs146(EuiFlexGroup48, { gutterSize: "s", wrap: true, children: [
-      entity_type && /* @__PURE__ */ jsxs146(EuiFlexItem45, { grow: false, children: [
-        /* @__PURE__ */ jsx271(EuiText45, { size: "xs", color: "subdued", children: /* @__PURE__ */ jsx271("strong", { children: "Entity Type" }) }),
-        /* @__PURE__ */ jsx271(EuiSpacer35, { size: "xs" }),
-        /* @__PURE__ */ jsx271(WfoBadge, { textColor: "default", color: "hollow", children: entity_type })
-      ] }),
-      action && /* @__PURE__ */ jsxs146(EuiFlexItem45, { grow: false, children: [
-        /* @__PURE__ */ jsx271(EuiText45, { size: "xs", color: "subdued", children: /* @__PURE__ */ jsx271("strong", { children: "Action" }) }),
-        /* @__PURE__ */ jsx271(EuiSpacer35, { size: "xs" }),
-        /* @__PURE__ */ jsx271(WfoBadge, { textColor: "default", color: "hollow", children: action })
-      ] })
-    ] }),
-    query && /* @__PURE__ */ jsxs146(Fragment67, { children: [
-      /* @__PURE__ */ jsx271(EuiSpacer35, { size: "s" }),
-      /* @__PURE__ */ jsx271(EuiText45, { size: "xs", color: "subdued", children: /* @__PURE__ */ jsx271("strong", { children: "Query" }) }),
-      /* @__PURE__ */ jsx271(EuiSpacer35, { size: "xs" }),
-      /* @__PURE__ */ jsx271(EuiText45, { size: "s", children: /* @__PURE__ */ jsxs146("em", { children: [
-        '"',
-        query,
-        '"'
-      ] }) })
-    ] })
-  ] });
-};
-
-// src/components/WfoAgent/ToolProgress/styles.ts
-import { css as css46 } from "@emotion/react";
-var getToolProgressStyles = ({ theme }) => {
-  const containerStyle2 = css46({
-    border: `${theme.border.width.thin} solid ${theme.colors.borderBaseSubdued}`,
-    borderRadius: theme.border.radius.medium,
-    backgroundColor: theme.colors.backgroundBaseNeutral,
-    transition: `all ${theme.animation.normal} ease`,
-    maxWidth: "50%",
-    marginRight: "auto"
-  });
-  const containerClickableStyle = css46({
+  const toolCallsToggleStyle = css45({
+    display: "inline-flex",
+    alignItems: "center",
+    gap: theme.size.xxs,
     cursor: "pointer",
+    fontSize: theme.size.s,
+    color: theme.colors.textSubdued,
+    marginLeft: "auto",
     "&:hover": {
-      borderColor: theme.colors.primary,
-      backgroundColor: theme.colors.backgroundBasePlain
+      color: theme.colors.textParagraph
     }
   });
-  const headerStyle = css46({
-    padding: `${theme.size.base} ${theme.size.l}`
-  });
-  const nameStyle = css46({
-    fontSize: theme.size.m,
-    fontWeight: theme.font.weight.medium
-  });
-  const expandedContentStyle = css46({
-    borderTop: `${theme.border.width.thin} solid ${theme.colors.borderBaseSubdued}`,
-    padding: `${theme.size.base} ${theme.size.l}`
-  });
-  const iconSize = 18;
-  const iconStyle = css46({
-    color: theme.colors.textSubdued
+  const toolCallsListStyle = css45({
+    paddingLeft: `calc(${iconSize}px + ${theme.size.s})`
   });
   return {
     containerStyle: containerStyle2,
-    containerClickableStyle,
     headerStyle,
-    nameStyle,
-    expandedContentStyle,
-    iconSize,
-    iconStyle
+    rowStyle,
+    reasoningStyle,
+    toolCallsToggleStyle,
+    toolCallsListStyle,
+    iconSize
   };
 };
 
-// src/components/WfoAgent/ToolProgress/ToolProgress.tsx
-import { jsx as jsx272, jsxs as jsxs147 } from "@emotion/react/jsx-runtime";
-var TOOL_DISPLAY_COMPONENTS = {
-  set_filter_tree: SetFilterTreeDisplay,
-  start_new_search: StartNewSearchDisplay,
-  run_search: RunSearchDisplay,
-  discover_filter_paths: DiscoverFilterPathsDisplay
-};
-var ToolProgress = ({ name, status, args, result }) => {
-  const [isExpanded, setIsExpanded] = useState51(false);
-  const tPage = useTranslations97("agent.page");
-  const { containerStyle: containerStyle2, containerClickableStyle, headerStyle, nameStyle, expandedContentStyle, iconSize, iconStyle } = useWithOrchestratorTheme(getToolProgressStyles);
+// src/components/WfoAgent/WfoPlanProgress/WfoPlanProgress.tsx
+import { jsx as jsx268, jsxs as jsxs143 } from "@emotion/react/jsx-runtime";
+var WfoPlanProgress = ({ executionState }) => {
+  const [expandedSteps, setExpandedSteps] = useState52(/* @__PURE__ */ new Set());
+  const t = useTranslations96("agent.page.planProgress");
   const { theme } = useOrchestratorTheme();
-  const getToolLabel = (toolName) => {
-    const toolKey = `tools.${toolName}`;
-    const translated = tPage(toolKey);
-    const fullKey = `agent.page.${toolKey}`;
-    return translated === fullKey ? toolName : translated;
-  };
-  const renderStatus = () => {
-    if (status === "complete") {
-      return /* @__PURE__ */ jsx272(WfoCheckmarkCircleFill, { color: theme.colors.success, width: iconSize, height: iconSize });
-    }
-    if (status === "inProgress" || status === "executing") {
-      return /* @__PURE__ */ jsx272(EuiLoadingSpinner4, { size: "s" });
-    }
-    if (status === "failed") {
-      return /* @__PURE__ */ jsx272(WfoXCircleFill, { color: theme.colors.danger, width: iconSize, height: iconSize });
-    }
+  const { containerStyle: containerStyle2, headerStyle, rowStyle, reasoningStyle, toolCallsToggleStyle, toolCallsListStyle, iconSize } = useWithOrchestratorTheme(getWfoPlanProgressStyles);
+  if (!executionState.planning && executionState.steps.length === 0) {
     return null;
+  }
+  const toggleStep = (stepName) => {
+    setExpandedSteps((prev) => {
+      const next = new Set(prev);
+      if (next.has(stepName)) {
+        next.delete(stepName);
+      } else {
+        next.add(stepName);
+      }
+      return next;
+    });
   };
-  const DisplayComponent = TOOL_DISPLAY_COMPONENTS[name];
-  const hasContent = DisplayComponent && (args || result);
-  return /* @__PURE__ */ jsxs147("div", { css: containerStyle2, children: [
-    /* @__PURE__ */ jsx272("div", { css: hasContent && containerClickableStyle, onClick: () => hasContent && setIsExpanded(!isExpanded), children: /* @__PURE__ */ jsxs147(EuiFlexGroup49, { gutterSize: "m", alignItems: "center", css: headerStyle, children: [
-      /* @__PURE__ */ jsx272(EuiFlexItem46, { grow: false, children: /* @__PURE__ */ jsx272("div", { css: iconStyle, children: /* @__PURE__ */ jsx272(WfoWrench, { width: iconSize, height: iconSize }) }) }),
-      /* @__PURE__ */ jsx272(EuiFlexItem46, { grow: true, children: /* @__PURE__ */ jsx272("span", { css: nameStyle, children: getToolLabel(name) }) }),
-      /* @__PURE__ */ jsx272(EuiFlexItem46, { grow: false, style: { minWidth: `${iconSize}px` }, children: renderStatus() }),
-      /* @__PURE__ */ jsx272(EuiFlexItem46, { grow: false, style: { minWidth: `${iconSize}px` }, children: hasContent && (isExpanded ? /* @__PURE__ */ jsx272(WfoChevronUp, { width: iconSize, height: iconSize }) : /* @__PURE__ */ jsx272(WfoChevronDown, { width: iconSize, height: iconSize })) })
-    ] }) }),
-    hasContent && isExpanded && /* @__PURE__ */ jsx272("div", { css: expandedContentStyle, children: /* @__PURE__ */ jsx272(DisplayComponent, { parameters: args, result }) })
+  const completedCount = executionState.steps.filter((s) => s.status === "completed").length;
+  const totalCount = executionState.steps.length;
+  const allDone = totalCount > 0 && completedCount === totalCount;
+  const headerLabel = executionState.planning ? t("planning") : allDone ? t("completed") : t("executing", { completed: completedCount, total: totalCount });
+  const StatusIcon = ({ status }) => {
+    if (status === "completed")
+      return /* @__PURE__ */ jsx268(WfoCheckmarkCircleFill, { color: theme.colors.success, width: iconSize, height: iconSize });
+    if (status === "pending")
+      return /* @__PURE__ */ jsx268(WfoMinusCircleOutline, { color: theme.colors.textSubdued, width: iconSize, height: iconSize });
+    return /* @__PURE__ */ jsx268(EuiLoadingSpinner4, { size: "s" });
+  };
+  return /* @__PURE__ */ jsxs143(EuiPanel20, { hasBorder: true, paddingSize: "s", css: containerStyle2, children: [
+    /* @__PURE__ */ jsxs143("div", { css: headerStyle, children: [
+      allDone ? /* @__PURE__ */ jsx268(WfoCheckmarkCircleFill, { color: theme.colors.success, width: iconSize, height: iconSize }) : /* @__PURE__ */ jsx268(EuiLoadingSpinner4, { size: "s" }),
+      /* @__PURE__ */ jsx268("span", { children: headerLabel })
+    ] }),
+    executionState.steps.map((step) => {
+      const isExpanded = expandedSteps.has(step.step_name);
+      const hasToolCalls = step.tool_calls.length > 0;
+      return /* @__PURE__ */ jsxs143("div", { children: [
+        /* @__PURE__ */ jsxs143("div", { css: rowStyle, children: [
+          /* @__PURE__ */ jsx268(StatusIcon, { status: step.status }),
+          /* @__PURE__ */ jsx268(EuiText42, { size: "s", color: step.status === "pending" ? "subdued" : void 0, children: step.step_name }),
+          hasToolCalls && /* @__PURE__ */ jsxs143("span", { css: toolCallsToggleStyle, onClick: () => toggleStep(step.step_name), children: [
+            step.tool_calls.length,
+            isExpanded ? /* @__PURE__ */ jsx268(WfoChevronUp, { width: iconSize, height: iconSize }) : /* @__PURE__ */ jsx268(WfoChevronDown, { width: iconSize, height: iconSize })
+          ] })
+        ] }),
+        step.reasoning && /* @__PURE__ */ jsx268(EuiText42, { size: "xs", color: "subdued", css: reasoningStyle, children: step.reasoning }),
+        isExpanded && hasToolCalls && /* @__PURE__ */ jsx268("div", { css: toolCallsListStyle, children: step.tool_calls.map((tc) => /* @__PURE__ */ jsxs143(EuiText42, { size: "xs", css: rowStyle, children: [
+          /* @__PURE__ */ jsx268(StatusIcon, { status: tc.status === "complete" ? "completed" : "active" }),
+          /* @__PURE__ */ jsx268("span", { children: tc.name })
+        ] }, tc.id)) })
+      ] }, step.step_name);
+    })
   ] });
 };
 
-// src/components/WfoAgent/WfoAgentVisualization/WfoAgentVisualization.tsx
+// src/components/WfoAgent/WfoQueryArtifact/WfoQueryArtifact.tsx
 import { useTranslations as useTranslations98 } from "next-intl";
-import { EuiText as EuiText46 } from "@elastic/eui";
+import { EuiText as EuiText44 } from "@elastic/eui";
+
+// src/components/WfoAgent/WfoAgentVisualization/WfoAgentVisualization.tsx
+import { useTranslations as useTranslations97 } from "next-intl";
+import { EuiText as EuiText43 } from "@elastic/eui";
 
 // src/components/WfoAgent/WfoAgentChart/WfoAgentLineChart.tsx
 import { Axis, Chart, DARK_THEME, LIGHT_THEME, LineSeries, Position, Settings } from "@elastic/charts";
 import "@elastic/charts/dist/theme_only_dark.css";
 import "@elastic/charts/dist/theme_only_light.css";
-import { jsx as jsx273, jsxs as jsxs148 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx269, jsxs as jsxs144 } from "@emotion/react/jsx-runtime";
 function WfoAgentLineChart({ aggregationData }) {
   const { results } = aggregationData;
   const { isDarkModeActive, multiplyByBaseUnit } = useOrchestratorTheme();
@@ -19084,9 +19122,9 @@ function WfoAgentLineChart({ aggregationData }) {
     xLabel: result.group_values[xKey],
     ...result.aggregations
   }));
-  return /* @__PURE__ */ jsxs148(Chart, { size: { height: multiplyByBaseUnit(30) }, children: [
-    /* @__PURE__ */ jsx273(Settings, { showLegend: true, baseTheme: chartBaseTheme }),
-    /* @__PURE__ */ jsx273(
+  return /* @__PURE__ */ jsxs144(Chart, { size: { height: multiplyByBaseUnit(30) }, children: [
+    /* @__PURE__ */ jsx269(Settings, { showLegend: true, baseTheme: chartBaseTheme }),
+    /* @__PURE__ */ jsx269(
       Axis,
       {
         id: "bottom",
@@ -19095,8 +19133,8 @@ function WfoAgentLineChart({ aggregationData }) {
         tickFormat: (d) => chartData[d]?.xLabel?.split(" ")[0] || d
       }
     ),
-    /* @__PURE__ */ jsx273(Axis, { id: "left", position: Position.Left, title: "Count" }),
-    aggKeys.map((aggKey) => /* @__PURE__ */ jsx273(
+    /* @__PURE__ */ jsx269(Axis, { id: "left", position: Position.Left, title: "Count" }),
+    aggKeys.map((aggKey) => /* @__PURE__ */ jsx269(
       LineSeries,
       {
         id: aggKey,
@@ -19116,14 +19154,14 @@ import "@elastic/charts/dist/theme_only_dark.css";
 import "@elastic/charts/dist/theme_only_light.css";
 
 // src/components/WfoAgent/WfoAgentChart/styles.ts
-import { css as css47 } from "@emotion/react";
-var containerStyle = css47({
+import { css as css46 } from "@emotion/react";
+var containerStyle = css46({
   maxWidth: "50%",
   marginRight: "auto"
 });
 
 // src/components/WfoAgent/WfoAgentChart/WfoAgentPieChart.tsx
-import { jsx as jsx274, jsxs as jsxs149 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx270, jsxs as jsxs145 } from "@emotion/react/jsx-runtime";
 function WfoAgentPieChart({ aggregationData }) {
   const { results } = aggregationData;
   const { isDarkModeActive, multiplyByBaseUnit } = useOrchestratorTheme();
@@ -19137,9 +19175,9 @@ function WfoAgentPieChart({ aggregationData }) {
     label: result.group_values[groupKey],
     value: result.aggregations[aggKey]
   }));
-  return /* @__PURE__ */ jsx274("div", { css: containerStyle, children: /* @__PURE__ */ jsxs149(Chart2, { size: { height: multiplyByBaseUnit(25) }, children: [
-    /* @__PURE__ */ jsx274(Settings2, { showLegend: true, legendPosition: Position2.Right, baseTheme: chartBaseTheme }),
-    /* @__PURE__ */ jsx274(
+  return /* @__PURE__ */ jsx270("div", { css: containerStyle, children: /* @__PURE__ */ jsxs145(Chart2, { size: { height: multiplyByBaseUnit(25) }, children: [
+    /* @__PURE__ */ jsx270(Settings2, { showLegend: true, legendPosition: Position2.Right, baseTheme: chartBaseTheme }),
+    /* @__PURE__ */ jsx270(
       Partition,
       {
         id: "pieByPR",
@@ -19163,7 +19201,7 @@ function WfoAgentPieChart({ aggregationData }) {
 // src/components/WfoAgent/WfoAgentTable/WfoAgentTable.tsx
 import React80 from "react";
 import { EuiBasicTable } from "@elastic/eui";
-import { jsx as jsx275 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx271 } from "@emotion/react/jsx-runtime";
 var formatColumnName = (key) => key.replace(/_/g, " ").replace(/\b\w/g, (l) => l.toUpperCase());
 function WfoAgentTable({ aggregationData }) {
   const { results } = aggregationData;
@@ -19200,7 +19238,7 @@ function WfoAgentTable({ aggregationData }) {
       setPageSize(page.size);
     }
   };
-  return /* @__PURE__ */ jsx275(
+  return /* @__PURE__ */ jsx271(
     EuiBasicTable,
     {
       items: paginatedItems,
@@ -19213,12 +19251,12 @@ function WfoAgentTable({ aggregationData }) {
 }
 
 // src/components/WfoAgent/WfoAgentVisualization/WfoAgentVisualization.tsx
-import { jsx as jsx276 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx272 } from "@emotion/react/jsx-runtime";
 function WfoAgentVisualization({ aggregationData }) {
   const { visualization_type, results } = aggregationData;
-  const t = useTranslations98("agent.page.visualization");
+  const t = useTranslations97("agent.page.visualization");
   if (!results || results.length === 0) {
-    return /* @__PURE__ */ jsx276(EuiText46, { size: "s", children: /* @__PURE__ */ jsx276("p", { children: t("noDataAvailable") }) });
+    return /* @__PURE__ */ jsx272(EuiText43, { size: "s", children: /* @__PURE__ */ jsx272("p", { children: t("noDataAvailable") }) });
   }
   const visualizationType = visualization_type?.type;
   if (visualizationType === "pie" /* PIE */ || visualizationType === "line" /* LINE */) {
@@ -19226,70 +19264,122 @@ function WfoAgentVisualization({ aggregationData }) {
     const groupKeys = Object.keys(firstResult.group_values);
     const aggKeys = Object.keys(firstResult.aggregations);
     if (groupKeys.length === 0 || aggKeys.length === 0) {
-      return /* @__PURE__ */ jsx276(EuiText46, { size: "s", children: /* @__PURE__ */ jsx276("p", { children: t("invalidDataStructure") }) });
+      return /* @__PURE__ */ jsx272(EuiText43, { size: "s", children: /* @__PURE__ */ jsx272("p", { children: t("invalidDataStructure") }) });
     }
   }
   switch (visualizationType) {
     case "pie" /* PIE */:
-      return /* @__PURE__ */ jsx276(WfoAgentPieChart, { aggregationData });
+      return /* @__PURE__ */ jsx272(WfoAgentPieChart, { aggregationData });
     case "line" /* LINE */:
-      return /* @__PURE__ */ jsx276(WfoAgentLineChart, { aggregationData });
+      return /* @__PURE__ */ jsx272(WfoAgentLineChart, { aggregationData });
     case "table" /* TABLE */:
     default:
-      return /* @__PURE__ */ jsx276(WfoAgentTable, { aggregationData });
+      return /* @__PURE__ */ jsx272(WfoAgentTable, { aggregationData });
+  }
+}
+
+// src/components/WfoAgent/WfoQueryArtifact/WfoQueryArtifact.tsx
+import { jsx as jsx273 } from "@emotion/react/jsx-runtime";
+function WfoQueryArtifact({ artifact }) {
+  const t = useTranslations98("agent.page.visualization");
+  const { data, isLoading, isError } = useGetAgentQueryResultsQuery(artifact.query_id);
+  if (isLoading) {
+    return /* @__PURE__ */ jsx273(WfoLoading, {});
+  }
+  if (isError || !data) {
+    return /* @__PURE__ */ jsx273(EuiText44, { size: "s", color: "danger", children: /* @__PURE__ */ jsx273("p", { children: t("noDataAvailable") }) });
   }
+  const aggregationData = {
+    ...data,
+    visualization_type: artifact.visualization_type
+  };
+  return /* @__PURE__ */ jsx273(WfoAgentVisualization, { aggregationData });
 }
 
 // src/components/WfoAgent/WfoAgent/WfoAgent.tsx
-import { jsx as jsx277, jsxs as jsxs150 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment66, jsx as jsx274, jsxs as jsxs146 } from "@emotion/react/jsx-runtime";
 function WfoAgent() {
   const tPage = useTranslations99("agent.page");
   const { NAVIGATION_HEIGHT } = useWithOrchestratorTheme(getPageTemplateStyles);
   const agentAvailability = useAgentAvailability();
-  useRenderToolCall({
-    name: "run_search",
-    render: ({ result }) => {
-      if (!result) {
-        return /* @__PURE__ */ jsx277("div", {});
+  const planProgress = useAgentPlanEvents();
+  const planProgressRef = useRef12(planProgress);
+  planProgressRef.current = planProgress;
+  const RenderMessage = useCallback14(
+    ({
+      message,
+      messages,
+      inProgress,
+      index,
+      isCurrentMessage,
+      AssistantMessage,
+      UserMessage,
+      ImageRenderer,
+      onRegenerate,
+      ...rest
+    }) => {
+      if (message.role === "user") {
+        return UserMessage ? /* @__PURE__ */ jsx274(UserMessage, { rawData: message, message, ImageRenderer }, index) : null;
       }
-      return /* @__PURE__ */ jsx277(WfoAgentVisualization, { aggregationData: result });
-    }
-  });
-  useRenderToolCall({
-    name: "run_aggregation",
-    render: ({ result }) => {
-      if (!result) {
-        return /* @__PURE__ */ jsx277("div", {});
+      if (message.role === "assistant") {
+        const progress = planProgressRef.current;
+        const lastUserIndex = [...messages].reverse().findIndex((msg) => msg.role === "user");
+        const firstAssistantAfterUser = lastUserIndex >= 0 ? messages.length - lastUserIndex : -1;
+        const showPlanProgress = index === firstAssistantAfterUser && (progress.planning || progress.steps.length > 0);
+        return /* @__PURE__ */ jsxs146(Fragment66, { children: [
+          showPlanProgress && /* @__PURE__ */ jsx274(WfoPlanProgress, { executionState: progress }),
+          AssistantMessage && /* @__PURE__ */ jsx274(
+            AssistantMessage,
+            {
+              subComponent: message.generativeUI?.(),
+              rawData: message,
+              message,
+              messages,
+              isLoading: inProgress && isCurrentMessage && !message.content,
+              isGenerating: inProgress && isCurrentMessage && !!message.content,
+              isCurrentMessage,
+              onRegenerate: () => onRegenerate?.(message.id),
+              feedback: rest.messageFeedback?.[message.id] || null,
+              ImageRenderer,
+              ...rest
+            },
+            index
+          )
+        ] });
       }
-      return /* @__PURE__ */ jsx277(WfoAgentVisualization, { aggregationData: result });
+      return null;
+    },
+    []
+  );
+  const renderQueryResult = ({ result }) => {
+    if (!result) {
+      return /* @__PURE__ */ jsx274(Fragment66, {});
     }
-  });
+    return /* @__PURE__ */ jsx274(WfoQueryArtifact, { artifact: result });
+  };
+  useRenderToolCall({ name: "run_search", render: renderQueryResult });
+  useRenderToolCall({ name: "run_aggregation", render: renderQueryResult });
   useRenderToolCall({
     name: "prepare_export",
     render: ({ result }) => {
       if (!result) {
-        return /* @__PURE__ */ jsx277("div", {});
+        return /* @__PURE__ */ jsx274(Fragment66, {});
       }
-      return /* @__PURE__ */ jsx277(ExportButton, { exportData: result });
-    }
-  });
-  useCopilotAction({
-    name: "*",
-    render: ({ name, status, args, result }) => {
-      return /* @__PURE__ */ jsx277(ToolProgress, { name, status, args, result });
+      return /* @__PURE__ */ jsx274(ExportButton, { artifact: result });
     }
   });
-  return /* @__PURE__ */ jsx277(WfoAvailabilityCheck, { featureType: "agent", availability: agentAvailability, children: /* @__PURE__ */ jsxs150("div", { style: { height: `calc(90vh - ${NAVIGATION_HEIGHT}px)` }, children: [
-    /* @__PURE__ */ jsx277("style", { children: `
+  return /* @__PURE__ */ jsx274(WfoAvailabilityCheck, { featureType: "agent", availability: agentAvailability, children: /* @__PURE__ */ jsxs146("div", { style: { height: `calc(90vh - ${NAVIGATION_HEIGHT}px)` }, children: [
+    /* @__PURE__ */ jsx274("style", { children: `
                 .copilotKitChat {
                     height: 100%;
                     display: flex;
                     flex-direction: column;
                 }
             ` }),
-    /* @__PURE__ */ jsx277(
+    /* @__PURE__ */ jsx274(
       CopilotChat,
       {
+        RenderMessage,
         labels: {
           title: tPage("copilot.title"),
           initial: tPage("copilot.initial")
@@ -19318,14 +19408,14 @@ function WfoAgent() {
 }
 
 // src/components/WfoMonacoCodeBlock/WfoMonacoCodeBlock.tsx
-import { useCallback as useCallback14, useEffect as useEffect34, useState as useState52 } from "react";
-import { EuiFlexItem as EuiFlexItem47 } from "@elastic/eui";
+import { useCallback as useCallback15, useEffect as useEffect36, useState as useState53 } from "react";
+import { EuiFlexItem as EuiFlexItem44 } from "@elastic/eui";
 import Editor from "@monaco-editor/react";
 
 // src/components/WfoMonacoCodeBlock/styles.ts
-import { css as css48 } from "@emotion/react";
+import { css as css47 } from "@emotion/react";
 var getStyles15 = ({ theme, isDarkModeActive }) => {
-  const monacoEditorStyle = css48({
+  const monacoEditorStyle = css47({
     marginTop: 10,
     padding: 10,
     backgroundColor: isDarkModeActive ? theme.colors.backgroundBaseNeutral : theme.colors.backgroundBaseSubdued,
@@ -19337,7 +19427,7 @@ var getStyles15 = ({ theme, isDarkModeActive }) => {
 };
 
 // src/components/WfoMonacoCodeBlock/WfoMonacoCodeBlock.tsx
-import { jsx as jsx278 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx275 } from "@emotion/react/jsx-runtime";
 var MONACO_THEME = {
   light: "vs",
   dark: "hc-black"
@@ -19345,10 +19435,10 @@ var MONACO_THEME = {
 var WfoMonacoCodeBlock = ({ data }) => {
   const { theme, isDarkModeActive } = useOrchestratorTheme();
   const { monacoEditorStyle } = useWithOrchestratorTheme(getStyles15);
-  const [monacoInstance, setMonacoInstance] = useState52(void 0);
+  const [monacoInstance, setMonacoInstance] = useState53(void 0);
   const json = JSON.stringify(data, null, 4);
-  const [editorHeight, setEditorHeight] = useState52(0);
-  const addThemeToEditor = useCallback14(
+  const [editorHeight, setEditorHeight] = useState53(0);
+  const addThemeToEditor = useCallback15(
     (monaco) => {
       monaco.editor.defineTheme("wfoTheme", {
         base: isDarkModeActive ? MONACO_THEME.dark : MONACO_THEME.light,
@@ -19362,7 +19452,7 @@ var WfoMonacoCodeBlock = ({ data }) => {
     },
     [theme, isDarkModeActive]
   );
-  useEffect34(() => {
+  useEffect36(() => {
     if (monacoInstance) {
       addThemeToEditor(monacoInstance);
     }
@@ -19372,7 +19462,7 @@ var WfoMonacoCodeBlock = ({ data }) => {
     setEditorHeight(Math.min(scrollHeight, 500));
     setMonacoInstance(monaco);
   }
-  return /* @__PURE__ */ jsx278(EuiFlexItem47, { css: monacoEditorStyle, children: /* @__PURE__ */ jsx278(
+  return /* @__PURE__ */ jsx275(EuiFlexItem44, { css: monacoEditorStyle, children: /* @__PURE__ */ jsx275(
     Editor,
     {
       height: editorHeight,
@@ -19396,10 +19486,10 @@ var WfoMonacoCodeBlock = ({ data }) => {
 };
 
 // src/components/WfoLogoSpinner/styles.ts
-import { css as css49 } from "@emotion/react";
+import { css as css48 } from "@emotion/react";
 var getWfoLogoSpinnerStyles = () => {
   const isDark = typeof window !== "undefined" && localStorage?.getItem("colorMode") === "DARK";
-  const spinCenteringCss = css49({
+  const spinCenteringCss = css48({
     width: "100vw",
     height: "100vh",
     display: "flex",
@@ -19407,7 +19497,7 @@ var getWfoLogoSpinnerStyles = () => {
     justifyContent: "center",
     backgroundColor: isDark ? "#101827" : "#FFFFFF"
   });
-  const spinContainerCss = css49({
+  const spinContainerCss = css48({
     display: "flex",
     alignItems: "center",
     width: "80px",
@@ -19417,7 +19507,7 @@ var getWfoLogoSpinnerStyles = () => {
     backgroundColor: "#04385F",
     borderRadius: "8px"
   });
-  const spinPathCss = css49({
+  const spinPathCss = css48({
     transformBox: "fill-box",
     transformOrigin: "center",
     animation: "spin 3s linear infinite",
@@ -19434,11 +19524,11 @@ var getWfoLogoSpinnerStyles = () => {
 };
 
 // src/components/WfoLogoSpinner/WfoLogoSpinner.tsx
-import { jsx as jsx279, jsxs as jsxs151 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx276, jsxs as jsxs147 } from "@emotion/react/jsx-runtime";
 var WfoLogoSpinner = () => {
   const { spinContainerCss, spinCenteringCss, spinPathCss } = getWfoLogoSpinnerStyles();
-  return /* @__PURE__ */ jsx279("div", { css: spinCenteringCss, children: /* @__PURE__ */ jsx279("div", { css: spinContainerCss, children: /* @__PURE__ */ jsxs151("svg", { width: "64", height: "64", viewBox: "0 0 640 640", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-    /* @__PURE__ */ jsx279(
+  return /* @__PURE__ */ jsx276("div", { css: spinCenteringCss, children: /* @__PURE__ */ jsx276("div", { css: spinContainerCss, children: /* @__PURE__ */ jsxs147("svg", { width: "64", height: "64", viewBox: "0 0 640 640", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+    /* @__PURE__ */ jsx276(
       "path",
       {
         css: spinPathCss,
@@ -19448,7 +19538,7 @@ var WfoLogoSpinner = () => {
         fill: "#76B5E0"
       }
     ),
-    /* @__PURE__ */ jsx279(
+    /* @__PURE__ */ jsx276(
       "path",
       {
         fillRule: "evenodd",
@@ -19461,10 +19551,10 @@ var WfoLogoSpinner = () => {
 };
 
 // src/components/WfoPopover/WfoPopover.tsx
-import { EuiContextMenuPanel, EuiLoadingSpinner as EuiLoadingSpinner5, EuiPanel as EuiPanel20, EuiPopover as EuiPopover9 } from "@elastic/eui";
-import { jsx as jsx280 } from "@emotion/react/jsx-runtime";
+import { EuiContextMenuPanel, EuiLoadingSpinner as EuiLoadingSpinner5, EuiPanel as EuiPanel21, EuiPopover as EuiPopover9 } from "@elastic/eui";
+import { jsx as jsx277 } from "@emotion/react/jsx-runtime";
 var WfoPopover = ({ id, isLoading, PopoverContent, button, isPopoverOpen, closePopover }) => {
-  return /* @__PURE__ */ jsx280(
+  return /* @__PURE__ */ jsx277(
     EuiPopover9,
     {
       id,
@@ -19473,7 +19563,7 @@ var WfoPopover = ({ id, isLoading, PopoverContent, button, isPopoverOpen, closeP
       closePopover,
       panelPaddingSize: "none",
       anchorPosition: "downLeft",
-      children: /* @__PURE__ */ jsx280(EuiContextMenuPanel, { children: /* @__PURE__ */ jsx280(EuiPanel20, { color: "transparent", paddingSize: "s", children: isLoading ? /* @__PURE__ */ jsx280(EuiLoadingSpinner5, {}) : /* @__PURE__ */ jsx280(PopoverContent, {}) }) })
+      children: /* @__PURE__ */ jsx277(EuiContextMenuPanel, { children: /* @__PURE__ */ jsx277(EuiPanel21, { color: "transparent", paddingSize: "s", children: isLoading ? /* @__PURE__ */ jsx277(EuiLoadingSpinner5, {}) : /* @__PURE__ */ jsx277(PopoverContent, {}) }) })
     }
   );
 };
@@ -19481,7 +19571,7 @@ var WfoPopover = ({ id, isLoading, PopoverContent, button, isPopoverOpen, closeP
 // src/components/WfoButtonWithConfirm/WfoButtonWithConfirm.tsx
 import { useContext as useContext11 } from "react";
 import { EuiButtonIcon as EuiButtonIcon19 } from "@elastic/eui";
-import { jsx as jsx281 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx278 } from "@emotion/react/jsx-runtime";
 var WfoButtonWithConfirm = ({
   question,
   onConfirm,
@@ -19489,7 +19579,7 @@ var WfoButtonWithConfirm = ({
   ariaLabel = "Confirmation button"
 }) => {
   const { showConfirmDialog } = useContext11(ConfirmationDialogContext);
-  return /* @__PURE__ */ jsx281(
+  return /* @__PURE__ */ jsx278(
     EuiButtonIcon19,
     {
       iconType,
@@ -20085,6 +20175,11 @@ var en_GB_default = {
         get_valid_operators: "I'm getting valid operators",
         set_temporal_grouping: "I'm setting temporal grouping"
       },
+      planProgress: {
+        planning: "Planning...",
+        completed: "Plan completed",
+        executing: "Executing plan ({completed}/{total})"
+      },
       visualization: {
         noDataAvailable: "No data available for visualization.",
         invalidDataStructure: "Invalid data structure."
@@ -20794,6 +20889,7 @@ export {
   RenderDirection,
   RetrieverType,
   Row,
+  SEARCH_QUERY_RESULTS_ENDPOINT,
   SETTINGS_CACHE_ENDPOINT,
   SETTINGS_CACHE_NAMES_ENDPOINT,
   SETTINGS_ENDPOINT,
@@ -20932,6 +21028,7 @@ export {
   WfoPencil,
   WfoPencilAlt,
   WfoPencilCompact,
+  WfoPlanProgress,
   WfoPlannedWork,
   WfoPlayCircle,
   WfoPlayFill,
@@ -20955,6 +21052,7 @@ export {
   WfoProductsPage,
   WfoProductsSummaryCard,
   WfoPydanticForm,
+  WfoQueryArtifact,
   WfoQueryParams,
   WfoRadio,
   WfoRadioDropdown,
@@ -21237,6 +21335,7 @@ export {
   useDataDisplayParams,
   useDeleteProcessMutation,
   useDeleteScheduledTaskMutation,
+  useGetAgentQueryResultsQuery,
   useGetCacheNamesQuery,
   useGetCustomerQuery,
   useGetCustomersQuery,