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

package/src/components/WfoSubscriptionsList/WfoSubscriptionsList.tsx

@@ -80,6 +80,11 @@ export const WfoSubscriptionsList: FC<WfoSubscriptionsListProps> = ({
   const subscriptionList = mapGraphQlSubscriptionsResultToSubscriptionListItems(data);
 
   const tableColumnConfig: WfoAdvancedTableColumnConfig<SubscriptionListItem> = {
+    actions: {
+      columnType: ColumnType.CONTROL,
+      width: '50px',
+      renderControl: (row) => <WfoSubscriptionActions compactMode={true} subscriptionId={row.subscriptionId} />,
+    },
     subscriptionId: {
       columnType: ColumnType.DATA,
       label: t('id'),
@@ -104,11 +109,12 @@ export const WfoSubscriptionsList: FC<WfoSubscriptionsListProps> = ({
     insync: {
       columnType: ColumnType.DATA,
       label: t('insync'),
-      width: '80px',
+      width: '75px',
       renderData: (value) => <WfoInsyncIcon inSync={value} />,
     },
     productName: {
       columnType: ColumnType.DATA,
+      width: '260px',
       label: t('product'),
     },
     tag: {
@@ -128,7 +134,7 @@ export const WfoSubscriptionsList: FC<WfoSubscriptionsListProps> = ({
     startDate: {
       columnType: ColumnType.DATA,
       label: t('startDate'),
-      width: '120px',
+      width: '100px',
       renderData: (value) => <WfoDateTime dateOrIsoString={value} />,
       renderDetails: parseDateToLocaleDateTimeString,
       clipboardText: parseDateToLocaleDateTimeString,
@@ -137,7 +143,7 @@ export const WfoSubscriptionsList: FC<WfoSubscriptionsListProps> = ({
     endDate: {
       columnType: ColumnType.DATA,
       label: t('endDate'),
-      width: '120px',
+      width: '100px',
       renderData: (value) => <WfoDateTime dateOrIsoString={value} />,
       renderDetails: parseDateToLocaleDateTimeString,
       clipboardText: parseDateToLocaleDateTimeString,
@@ -159,12 +165,6 @@ export const WfoSubscriptionsList: FC<WfoSubscriptionsListProps> = ({
         );
       },
     },
-    actions: {
-      columnType: ColumnType.CONTROL,
-      label: t('actions'),
-      width: '80px',
-      renderControl: (row) => <WfoSubscriptionActions compactMode={true} subscriptionId={row.subscriptionId} />,
-    },
     metadata: {
       columnType: ColumnType.DATA,
       label: t('metadata'),

package/src/components/WfoTable/WfoAdvancedTable/WfoAdvancedTable.tsx

@@ -81,7 +81,7 @@ export const WfoAdvancedTable = <T extends object>({
       width: '36px',
       renderControl: (row) => (
         <EuiFlexItem css={{ cursor: 'pointer' }} onClick={() => setSelectedDataForDetailModal(row)}>
-          <WfoArrowsExpand color={theme.colors.borderBasePlain} />
+          <WfoArrowsExpand color={theme.colors.textDisabled} />
         </EuiFlexItem>
       ),
     },

package/src/components/WfoTable/WfoFirstPartUUID/WfoFirstPartUUID.tsx

@@ -24,7 +24,7 @@ export const WfoFirstPartUUID: FC<WfoFirstUUIDPartProps> = ({ UUID, showCopyIcon
         <EuiCopy textToCopy={UUID}>
           {(copy) => (
             <div className={COPY_ICON_CLASS} onClick={copy} css={clickable}>
-              <WfoClipboardCopy width={16} height={16} color={theme.colors.backgroundBaseDisabled} />
+              <WfoClipboardCopy width={16} height={16} color={theme.colors.backgroundBaseAccent} />
             </div>
           )}
         </EuiCopy>

package/src/configuration/constants.ts

@@ -35,3 +35,6 @@ export const METADATA_PRODUCT_BLOCK_ENDPOINT = 'product_blocks';
 export const METADATA_RESOURCE_TYPE_ENDPOINT = 'resource_types';
 export const METADATA_WORKFLOWS_ENDPOINT = 'workflows';
 export const METADATA_SCHEDULES_ENDPOINT = 'schedules';
+
+//search
+export const SEARCH_QUERY_RESULTS_ENDPOINT = 'search/queries';

package/src/configuration/version.ts

@@ -1 +1 @@
-export const ORCHESTRATOR_UI_LIBRARY_VERSION = '7.5.1';
+export const ORCHESTRATOR_UI_LIBRARY_VERSION = '7.6.0';

package/src/hooks/useAgentPlanEvents.ts

@@ -0,0 +1,188 @@
+import { useEffect, useState } from 'react';
+
+import type { AgentSubscriber } from '@ag-ui/client';
+// @ts-expect-error - v2 subpath exists but TypeScript moduleResolution doesn't recognize it
+import { useAgent } from '@copilotkit/react-core/v2';
+
+/** AG-UI custom event names emitted by the backend agent. */
+enum AgentEvent {
+  PLAN_CREATED = 'PLAN_CREATED',
+  STEP_ACTIVE = 'AGENT_STEP_ACTIVE',
+}
+
+/** The backend step name used for the planning phase (not a real task). */
+const PLANNER_STEP_NAME = 'Planner';
+
+export type ToolCallState = {
+  id: string;
+  name: string;
+  status: 'executing' | 'complete';
+};
+
+export type PlanStep = {
+  step_name: string;
+  reasoning: string | null;
+  status: 'pending' | 'active' | 'completed';
+  tool_calls: ToolCallState[];
+};
+
+export type PlanExecutionState = {
+  planning: boolean;
+  steps: PlanStep[];
+};
+
+const initialState: PlanExecutionState = {
+  planning: false,
+  steps: [],
+};
+
+const updateSteps = (
+  steps: PlanStep[],
+  predicate: (step: PlanStep) => boolean,
+  updater: (step: PlanStep) => PlanStep,
+): PlanStep[] => steps.map((step) => (predicate(step) ? updater(step) : step));
+
+export function useAgentPlanEvents(agentId: string = 'query_agent'): PlanExecutionState {
+  const { agent } = useAgent({ agentId });
+  const [executionState, setExecutionState] = useState<PlanExecutionState>(initialState);
+
+  useEffect(() => {
+    if (!agent) {
+      return;
+    }
+
+    const subscriber: AgentSubscriber = {
+      onCustomEvent: (params) => {
+        const event = params?.event;
+        if (!event) return;
+
+        if (event.name === AgentEvent.PLAN_CREATED) {
+          const tasks = event.value as Array<{
+            skillName: string;
+            reasoning: string;
+          }>;
+          if (!Array.isArray(tasks)) return;
+
+          setExecutionState({
+            planning: false,
+            steps: tasks.map((task) => ({
+              step_name: task.skillName,
+              reasoning: task.reasoning,
+              status: 'pending' as const,
+              tool_calls: [],
+            })),
+          });
+          return;
+        }
+
+        if (event.name === AgentEvent.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) => {
+            // Mark previous active step as completed
+            const steps = updateSteps(
+              prev.steps,
+              (step) => step.status === 'active',
+              (step) => ({ ...step, status: 'completed' as const }),
+            );
+
+            // If step already exists (from PLAN_CREATED), activate it
+            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' as const,
+                  },
+                ],
+              }),
+            ),
+          };
+        });
+      },
+
+      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' as const } : toolCall,
+              ),
+            }),
+          ),
+        }));
+      },
+
+      onRunStartedEvent: () => {
+        setExecutionState(initialState);
+      },
+
+      onRunFinishedEvent: () => {
+        setExecutionState((prev) => ({
+          planning: false,
+          steps: updateSteps(
+            prev.steps,
+            (step) => step.status === 'active',
+            (step) => ({ ...step, status: 'completed' as const }),
+          ),
+        }));
+      },
+    };
+
+    const subscription = agent.subscribe(subscriber);
+
+    return () => {
+      subscription.unsubscribe();
+    };
+  }, [agent]);
+
+  return executionState;
+}

package/src/messages/en-GB.json

@@ -558,6 +558,11 @@
         "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."

package/src/rtk/endpoints/agentQueryResults.ts

@@ -0,0 +1,19 @@
+import { SEARCH_QUERY_RESULTS_ENDPOINT } from '@/configuration';
+import { BaseQueryTypes, orchestratorApi } from '@/rtk';
+import { QueryResultsData } from '@/types';
+
+const agentQueryResultsApi = orchestratorApi.injectEndpoints({
+  endpoints: (builder) => ({
+    getAgentQueryResults: builder.query<QueryResultsData, string>({
+      query: (queryId) => ({
+        url: `${SEARCH_QUERY_RESULTS_ENDPOINT}/${queryId}/results`,
+        method: 'GET',
+      }),
+      extraOptions: {
+        baseQueryType: BaseQueryTypes.fetch,
+      },
+    }),
+  }),
+});
+
+export const { useGetAgentQueryResultsQuery } = agentQueryResultsApi;

package/src/rtk/endpoints/index.ts

@@ -20,3 +20,4 @@ export * from './forms';
 export * from './fileUpload';
 export * from './search';
 export * from './availability';
+export * from './agentQueryResults';

package/src/types/search.ts

@@ -156,7 +156,7 @@ export type PathInfo = {
 
 /** ---------- Agent visualization types ---------- */
 
-export type AggregationResult = {
+export type ResultRow = {
   group_values: Record<string, string>;
   aggregations: Record<string, number>;
 };
@@ -172,11 +172,26 @@ export enum VisualizationType {
   TABLE = 'table',
 }
 
-export type AggregationResultsData = {
-  results: AggregationResult[];
-  total_groups: number;
+export type QueryResultsData = {
+  results: ResultRow[];
+  total_results: number;
   metadata: SearchMetadata;
   visualization_type: {
     type: VisualizationType;
   };
 };
+
+export type QueryArtifact = {
+  query_id: string;
+  total_results: number;
+  visualization_type: {
+    type: VisualizationType;
+  };
+  description: string;
+};
+
+export type ExportArtifact = {
+  query_id: string;
+  download_url: string;
+  description: string;
+};

package/src/utils/compareVersions.spec.ts

@@ -48,4 +48,9 @@ describe('isOrchestratorUiVersionCompatible', () => {
     expect(getOrchestratorCoreVersionIfNotCompatible('1.0.0', '2.10.0', TEST_VERSIONS)).toBe(null); // falls back to first MAPPED_VERSION
     expect(getOrchestratorCoreVersionIfNotCompatible('1.0.0', '2.9.9', TEST_VERSIONS)).toBe('2.10.0');
   });
+
+  test('handles prerelease orchestratorCoreVersion (e.g. 5.0.0a7)', () => {
+    expect(getOrchestratorCoreVersionIfNotCompatible('3.10.0', '5.0.0a7', TEST_VERSIONS)).toBe(null);
+    expect(getOrchestratorCoreVersionIfNotCompatible('3.10.0', '3.1.1a1', TEST_VERSIONS)).toBe('3.1.1');
+  });
 });

package/src/utils/compareVersions.ts

@@ -1,33 +1,62 @@
 import { MappedVersion } from '@/types';
 
-const compareVersions = (versionString1: string, versionString2: string): number => {
-  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;
+const compareVersions = (v1: string, v2: string): number => {
+  const parse = (v: string) => {
+    const parts = v.split('.');
+
+    const major = parseInt(parts[0]);
+    const minor = parseInt(parts[1]);
+
+    const patchPart = parts[2] ?? '';
+
+    let patch = 0;
+    let suffix = '';
+
+    // extract numeric patch and suffix manually
+    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);
+
+  // compare numeric parts
+  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;
+
+  // compare suffix
+  if (a.suffix === b.suffix) return 0;
+  if (!a.suffix) return 1; // stable > pre-release
+  if (!b.suffix) return -1;
+
+  return a.suffix > b.suffix ? 1 : -1;
 };
 
 const findMinimumOrchestratorCoreVersion = (
   orchestratorUiVersion: string,
   versionMappings: MappedVersion[],
-): string => {
-  const orchestratorUiVersions = versionMappings.map((version) => version.orchestratorUiVersion);
-  let mappedVersion = versionMappings[0];
+): string | null => {
+  // sort mappings descending by UI version. This is done just in case the input versionMappings are not sorted
+  const sorted = [...versionMappings].sort((a, b) => compareVersions(b.orchestratorUiVersion, a.orchestratorUiVersion));
 
-  for (let i = 0; i < orchestratorUiVersions.length; i++) {
-    if ([0, 1].includes(compareVersions(orchestratorUiVersion, orchestratorUiVersions[i]))) {
-      mappedVersion = versionMappings[i];
+  for (const mapping of sorted) {
+    if (compareVersions(orchestratorUiVersion, mapping.orchestratorUiVersion) >= 0) {
+      return mapping.minimumOrchestratorCoreVersion;
     }
   }
 
-  return mappedVersion.minimumOrchestratorCoreVersion;
+  return sorted[sorted.length - 1]?.minimumOrchestratorCoreVersion ?? null;
 };
 
 export const getOrchestratorCoreVersionIfNotCompatible = (
@@ -35,10 +64,13 @@ export const getOrchestratorCoreVersionIfNotCompatible = (
   orchestratorCoreVersion: string,
   versionMappings: MappedVersion[],
 ): string | null => {
-  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;
 };

package/src/components/WfoAgent/ToolProgress/DiscoverFilterPathsDisplay.tsx

@@ -1,99 +0,0 @@
-import React from 'react';
-
-import { EuiSpacer, EuiText } from '@elastic/eui';
-
-import { WfoBadge } from '@/components/WfoBadges';
-import { WfoPathBreadcrumb } from '@/components/WfoSearchPage/WfoSearchResults/WfoPathBreadcrumb';
-
-interface DiscoverFilterPathsResult {
-  status?: string;
-  leaves?: Array<{
-    paths?: string[];
-    name?: string;
-  }>;
-}
-
-type DiscoverFilterPathsDisplayProps = {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  result?: any;
-  parameters: {
-    field_names?: string[];
-    entity_type?: string;
-  };
-};
-
-export const DiscoverFilterPathsDisplay = ({ parameters, result }: DiscoverFilterPathsDisplayProps) => {
-  const { field_names = [] } = parameters;
-
-  const foundFields: [string, DiscoverFilterPathsResult][] =
-    result ?
-      Object.entries(result as Record<string, DiscoverFilterPathsResult>).filter(
-        ([, fieldResult]) => fieldResult.status !== 'NOT_FOUND',
-      )
-    : [];
-
-  // Count total paths across all found fields
-  const totalPaths = foundFields.reduce((count, [, fieldResult]) => {
-    const pathCount =
-      fieldResult.leaves?.reduce((leafCount: number, leaf) => {
-        return leafCount + (leaf.paths?.length || 1);
-      }, 0) || 0;
-    return count + pathCount;
-  }, 0);
-
-  return (
-    <div>
-      {field_names.length > 0 && (
-        <>
-          <EuiText size="xs" color="subdued">
-            Looking for{' '}
-            {field_names.map((name, idx) => (
-              <React.Fragment key={name}>
-                {idx > 0 && ', '}
-                <WfoBadge color="hollow" textColor="default">
-                  {name}
-                </WfoBadge>
-              </React.Fragment>
-            ))}
-          </EuiText>
-          <EuiSpacer size="s" />
-        </>
-      )}
-
-      {result && totalPaths > 0 && (
-        <div>
-          <EuiText size="xs" color="subdued">
-            <strong>
-              Found {totalPaths} path
-              {totalPaths > 1 ? 's' : ''}:
-            </strong>
-          </EuiText>
-          <EuiSpacer size="xs" />
-          {foundFields.map(([fieldName, fieldResult]) => (
-            <div key={fieldName} style={{ marginBottom: '8px' }}>
-              {fieldResult.leaves
-                && fieldResult.leaves.length > 0
-                && fieldResult.leaves.map((leaf, leafIdx: number) => {
-                  const paths = leaf.paths || (leaf.name ? [leaf.name] : []);
-                  return (
-                    <React.Fragment key={leafIdx}>
-                      {paths.map((path: string, pathIdx: number) => (
-                        <div
-                          key={pathIdx}
-                          style={{
-                            marginBottom: '4px',
-                          }}
-                        >
-                          <WfoPathBreadcrumb path={path} size="s" />
-                        </div>
-                      ))}
-                    </React.Fragment>
-                  );
-                })}
-            </div>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-};

package/src/components/WfoAgent/ToolProgress/RunSearchDisplay.tsx

@@ -1,34 +0,0 @@
-import React from 'react';
-
-import { EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui';
-
-import { WfoBadge } from '@/components/WfoBadges';
-
-type RunSearchDisplayProps = {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  result?: any;
-  parameters: {
-    limit?: number;
-  };
-};
-
-export const RunSearchDisplay = ({ parameters }: RunSearchDisplayProps) => {
-  const { limit = 10 } = parameters;
-
-  return (
-    <div>
-      <EuiFlexGroup gutterSize="s" alignItems="center">
-        <EuiFlexItem grow={false}>
-          <EuiText size="xs" color="subdued">
-            <strong>Results Limit</strong>
-          </EuiText>
-        </EuiFlexItem>
-        <EuiFlexItem grow={false}>
-          <WfoBadge textColor="default" color="hollow">
-            {limit}
-          </WfoBadge>
-        </EuiFlexItem>
-      </EuiFlexGroup>
-    </div>
-  );
-};

package/src/components/WfoAgent/ToolProgress/SetFilterTreeDisplay.styles.ts

@@ -1,62 +0,0 @@
-import { css } from '@emotion/react';
-
-import { WfoThemeHelpers } from '@/hooks';
-
-export const getFilterDisplayStyles = ({ theme }: WfoThemeHelpers) => {
-  const wrapStyle = css({
-    display: 'flex',
-    flexWrap: 'wrap',
-    gap: theme.size.s,
-  });
-
-  const columnGroupWrapStyle = css({
-    display: 'flex',
-    flexDirection: 'column',
-    gap: theme.size.s,
-    alignItems: 'flex-start',
-  });
-
-  const chipStyle = css({
-    display: 'inline-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 = css({
-    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 = css({
-    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`,
-  });
-
-  const valueStyle = css({
-    fontWeight: theme.font.weight.semiBold,
-    color: theme.colors.warning,
-  });
-
-  return {
-    wrapStyle,
-    columnGroupWrapStyle,
-    chipStyle,
-    groupStyle,
-    operatorStyle,
-    valueStyle,
-  };
-};