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

package/jest.config.cjs

@@ -11,7 +11,10 @@ const createJestConfig = nextJest({
 const customJestConfig = {
     ...base,
     displayName: 'Wfo-UI Tests',
-    moduleNameMapper: { '^uuid$': 'uuid' },
+    moduleNameMapper: {
+        '^uuid$': 'uuid',
+        '^@copilotkit/react-core/v2$': '<rootDir>/__mocks__/@copilotkit/react-core.js',
+    },
 };
 
 module.exports = createJestConfig(customJestConfig);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orchestrator-ui/orchestrator-ui-components",
-  "version": "7.5.1",
+  "version": "7.7.0",
   "license": "Apache-2.0",
   "description": "Library of UI Components used to display the workflow orchestrator frontend",
   "author": {
@@ -34,10 +34,10 @@
     "dev": "tsup --watch"
   },
   "dependencies": {
-    "@ag-ui/client": "0.0.42",
-    "@copilotkit/react-core": "1.10.6",
-    "@copilotkit/react-ui": "1.10.6",
-    "@copilotkit/runtime": "1.10.6",
+    "@ag-ui/client": "^0.0.47",
+    "@copilotkit/react-core": "1.54.0",
+    "@copilotkit/react-ui": "1.54.0",
+    "@copilotkit/runtime": "1.54.0",
     "@elastic/charts": "^64.1.0",
     "@emotion/css": "^11.11.2",
     "@emotion/react": "^11.11.4",
@@ -54,7 +54,7 @@
     "next-query-params": "^5.0.0",
     "object-hash": "^3.0.0",
     "prism-themes": "^1.9.0",
-    "pydantic-forms": "^1.0.4",
+    "pydantic-forms": "^1.0.7",
     "react-diff-view": "^3.2.0",
     "react-draggable": "^4.4.6",
     "react-redux": "^9.1.2",

package/src/components/WfoAgent/ExportButton/ExportButton.tsx

@@ -6,20 +6,14 @@ import { EuiIcon, EuiLoadingSpinner } from '@elastic/eui';
 
 import { useShowToastMessage, useWithOrchestratorTheme } from '@/hooks';
 import { useLazyGetAgentExportQuery } from '@/rtk/endpoints/agentExport';
-import { GraphQLPageInfo } from '@/types';
+import { ExportArtifact, GraphQLPageInfo } from '@/types';
 import { getCsvFileNameWithDate } from '@/utils';
 import { csvDownloadHandler } from '@/utils/csvDownload';
 
 import { getExportButtonStyles } from './styles';
 
-export type ExportData = {
-  action: string;
-  download_url: string;
-  message: string;
-};
-
 export type ExportButtonProps = {
-  exportData: ExportData;
+  artifact: ExportArtifact;
 };
 
 type ExportApiResponse = {
@@ -27,7 +21,7 @@ type ExportApiResponse = {
   pageInfo?: GraphQLPageInfo;
 };
 
-export function ExportButton({ exportData }: ExportButtonProps) {
+export function ExportButton({ artifact }: ExportButtonProps) {
   const { showToastMessage } = useShowToastMessage();
   const tError = useTranslations('errors');
   const [triggerExport, { isFetching }] = useLazyGetAgentExportQuery();
@@ -45,7 +39,7 @@ export function ExportButton({ exportData }: ExportButtonProps) {
   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]) : [];
 
@@ -74,7 +68,7 @@ export function ExportButton({ exportData }: ExportButtonProps) {
   return (
     <div css={containerStyle}>
       <div css={buttonWrapperStyle}>
-        {exportData.message && <div css={titleStyle}>{exportData.message}</div>}
+        {artifact.description && <div css={titleStyle}>{artifact.description}</div>}
         <div css={fileRowStyle} onClick={onDownloadClick}>
           <div css={fileInfoStyle}>
             <EuiIcon type="document" size="m" />

package/src/components/WfoAgent/WfoAgent/WfoAgent.tsx

@@ -1,61 +1,108 @@
-import React from 'react';
+import React, { useCallback, useRef } from 'react';
 
 import { useTranslations } from 'next-intl';
 
-import { CatchAllActionRenderProps, useCopilotAction, useRenderToolCall } from '@copilotkit/react-core';
+import { useRenderToolCall } from '@copilotkit/react-core';
 import { CopilotChat } from '@copilotkit/react-ui';
+import type { RenderMessageProps } from '@copilotkit/react-ui';
 
 import { WfoAvailabilityCheck } from '@/components/WfoAvailabilityCheck';
 import { getPageTemplateStyles } from '@/components/WfoPageTemplate/WfoPageTemplate/styles';
 import { useWithOrchestratorTheme } from '@/hooks';
+import { type PlanExecutionState, useAgentPlanEvents } from '@/hooks/useAgentPlanEvents';
 import { useAgentAvailability } from '@/hooks/useBackendAvailability';
-import { AggregationResultsData } from '@/types';
+import { ExportArtifact, QueryArtifact } from '@/types';
 
-import { ExportButton, ExportData } from '../ExportButton';
-import { ToolProgress } from '../ToolProgress';
-import { WfoAgentVisualization } from '../WfoAgentVisualization';
+import { ExportButton } from '../ExportButton';
+import { WfoPlanProgress } from '../WfoPlanProgress';
+import { WfoQueryArtifact } from '../WfoQueryArtifact';
 
 export function WfoAgent() {
   const tPage = useTranslations('agent.page');
 
   const { NAVIGATION_HEIGHT } = useWithOrchestratorTheme(getPageTemplateStyles);
   const agentAvailability = useAgentAvailability();
+  const planProgress = useAgentPlanEvents();
 
-  useRenderToolCall({
-    name: 'run_search',
-    render: ({ result }) => {
-      if (!result) {
-        return <div></div>;
+  // Use a ref so the RenderMessage callback stays stable (no blink)
+  // while always reading the latest plan progress
+  const planProgressRef = useRef<PlanExecutionState>(planProgress);
+  planProgressRef.current = planProgress;
+
+  const RenderMessage = useCallback(
+    ({
+      message,
+      messages,
+      inProgress,
+      index,
+      isCurrentMessage,
+      AssistantMessage,
+      UserMessage,
+      ImageRenderer,
+      onRegenerate,
+      ...rest
+    }: RenderMessageProps) => {
+      if (message.role === 'user') {
+        return UserMessage ?
+            <UserMessage key={index} rawData={message} message={message} ImageRenderer={ImageRenderer!} />
+          : null;
       }
-      return <WfoAgentVisualization aggregationData={result as AggregationResultsData} />;
-    },
-  });
 
-  useRenderToolCall({
-    name: 'run_aggregation',
-    render: ({ result }) => {
-      if (!result) {
-        return <div></div>;
+      if (message.role === 'assistant') {
+        const progress = planProgressRef.current;
+
+        // Show plan progress on the first assistant message
+        // after the last user message (the active response)
+        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 (
+          <>
+            {showPlanProgress && <WfoPlanProgress executionState={progress} />}
+            {AssistantMessage && (
+              <AssistantMessage
+                key={index}
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any -- generativeUI is an internal CopilotKit property not in public types
+                subComponent={(message as any).generativeUI?.()}
+                rawData={message}
+                message={message}
+                messages={messages}
+                isLoading={inProgress && isCurrentMessage && !message.content}
+                isGenerating={inProgress && isCurrentMessage && !!message.content}
+                isCurrentMessage={isCurrentMessage}
+                onRegenerate={() => onRegenerate?.(message.id)}
+                feedback={rest.messageFeedback?.[message.id] || null}
+                ImageRenderer={ImageRenderer!}
+                {...rest}
+              />
+            )}
+          </>
+        );
       }
-      return <WfoAgentVisualization aggregationData={result as AggregationResultsData} />;
+
+      return null;
     },
-  });
+    [],
+  );
+
+  const renderQueryResult = ({ result }: { result?: unknown }) => {
+    if (!result) {
+      return <></>;
+    }
+    return <WfoQueryArtifact artifact={result as QueryArtifact} />;
+  };
+
+  useRenderToolCall({ name: 'run_search', render: renderQueryResult });
+  useRenderToolCall({ name: 'run_aggregation', render: renderQueryResult });
 
   useRenderToolCall({
     name: 'prepare_export',
     render: ({ result }) => {
       if (!result) {
-        return <div></div>;
+        return <></>;
       }
-      return <ExportButton exportData={result as ExportData} />;
-    },
-  });
-
-  // Automatically render all other tool calls
-  useCopilotAction({
-    name: '*',
-    render: ({ name, status, args, result }: CatchAllActionRenderProps<[]>) => {
-      return <ToolProgress name={name} status={status} args={args} result={result} />;
+      return <ExportButton artifact={result as ExportArtifact} />;
     },
   });
 
@@ -70,6 +117,7 @@ export function WfoAgent() {
                 }
             `}</style>
         <CopilotChat
+          RenderMessage={RenderMessage}
           labels={{
             title: tPage('copilot.title'),
             initial: tPage('copilot.initial'),

package/src/components/WfoAgent/WfoAgentChart/WfoAgentLineChart.tsx

@@ -5,10 +5,10 @@ import '@elastic/charts/dist/theme_only_dark.css';
 import '@elastic/charts/dist/theme_only_light.css';
 
 import { useOrchestratorTheme } from '@/hooks';
-import { AggregationResultsData } from '@/types';
+import { QueryResultsData } from '@/types';
 
 export type WfoAgentLineChartProps = {
-  aggregationData: AggregationResultsData;
+  aggregationData: QueryResultsData;
 };
 
 export function WfoAgentLineChart({ aggregationData }: WfoAgentLineChartProps) {

package/src/components/WfoAgent/WfoAgentChart/WfoAgentPieChart.tsx

@@ -4,13 +4,13 @@ import { Chart, DARK_THEME, LIGHT_THEME, Partition, PartitionLayout, Position, S
 import '@elastic/charts/dist/theme_only_dark.css';
 import '@elastic/charts/dist/theme_only_light.css';
 
-import { AggregationResultsData } from '@/types';
+import { QueryResultsData } from '@/types';
 
 import { useOrchestratorTheme } from '../../../hooks';
 import { containerStyle } from './styles';
 
 export type WfoAgentPieChartProps = {
-  aggregationData: AggregationResultsData;
+  aggregationData: QueryResultsData;
 };
 
 export function WfoAgentPieChart({ aggregationData }: WfoAgentPieChartProps) {

package/src/components/WfoAgent/WfoAgentTable/WfoAgentTable.tsx

@@ -2,10 +2,10 @@ import React from 'react';
 
 import { EuiBasicTable, EuiBasicTableColumn } from '@elastic/eui';
 
-import { AggregationResult, AggregationResultsData } from '@/types';
+import { QueryResultsData, ResultRow } from '@/types';
 
 export type WfoAgentTableProps = {
-  aggregationData: AggregationResultsData;
+  aggregationData: QueryResultsData;
 };
 
 const formatColumnName = (key: string) => key.replace(/_/g, ' ').replace(/\b\w/g, (l) => l.toUpperCase());
@@ -15,23 +15,23 @@ export function WfoAgentTable({ aggregationData }: WfoAgentTableProps) {
   const [pageIndex, setPageIndex] = React.useState(0);
   const [pageSize, setPageSize] = React.useState(5);
 
-  const columns: EuiBasicTableColumn<AggregationResult>[] = React.useMemo(() => {
+  const columns: EuiBasicTableColumn<ResultRow>[] = React.useMemo(() => {
     if (results.length === 0) return [];
 
     const firstResult = results[0];
     const groupKeys = Object.keys(firstResult.group_values);
     const aggKeys = Object.keys(firstResult.aggregations);
 
-    const groupColumns: EuiBasicTableColumn<AggregationResult>[] = groupKeys.map((key) => ({
-      field: 'group_values' as keyof AggregationResult,
+    const groupColumns: EuiBasicTableColumn<ResultRow>[] = groupKeys.map((key) => ({
+      field: 'group_values' as keyof ResultRow,
       name: formatColumnName(key),
-      render: (_: unknown, record: AggregationResult) => record.group_values[key],
+      render: (_: unknown, record: ResultRow) => record.group_values[key],
     }));
 
-    const aggColumns: EuiBasicTableColumn<AggregationResult>[] = aggKeys.map((key) => ({
-      field: 'aggregations' as keyof AggregationResult,
+    const aggColumns: EuiBasicTableColumn<ResultRow>[] = aggKeys.map((key) => ({
+      field: 'aggregations' as keyof ResultRow,
       name: formatColumnName(key),
-      render: (_: unknown, record: AggregationResult) => record.aggregations[key],
+      render: (_: unknown, record: ResultRow) => record.aggregations[key],
     }));
 
     return [...groupColumns, ...aggColumns];

package/src/components/WfoAgent/WfoAgentVisualization/WfoAgentVisualization.tsx

@@ -4,14 +4,14 @@ import { useTranslations } from 'next-intl';
 
 import { EuiText } from '@elastic/eui';
 
-import { AggregationResultsData, VisualizationType } from '@/types';
+import { QueryResultsData, VisualizationType } from '@/types';
 
 import { WfoAgentLineChart } from '../WfoAgentChart/WfoAgentLineChart';
 import { WfoAgentPieChart } from '../WfoAgentChart/WfoAgentPieChart';
 import { WfoAgentTable } from '../WfoAgentTable';
 
 export type WfoAgentVisualizationProps = {
-  aggregationData: AggregationResultsData;
+  aggregationData: QueryResultsData;
 };
 
 export function WfoAgentVisualization({ aggregationData }: WfoAgentVisualizationProps) {

package/src/components/WfoAgent/WfoPlanProgress/WfoPlanProgress.tsx

@@ -0,0 +1,107 @@
+import React, { useState } from 'react';
+
+import { useTranslations } from 'next-intl';
+
+import { EuiLoadingSpinner, EuiPanel, EuiText } from '@elastic/eui';
+
+import { useWithOrchestratorTheme } from '@/hooks';
+import type { PlanExecutionState } from '@/hooks/useAgentPlanEvents';
+import { useOrchestratorTheme } from '@/hooks/useOrchestratorTheme';
+import { WfoCheckmarkCircleFill, WfoChevronDown, WfoChevronUp, WfoMinusCircleOutline } from '@/icons';
+
+import { getWfoPlanProgressStyles } from './styles';
+
+type WfoPlanProgressProps = {
+  executionState: PlanExecutionState;
+};
+
+export const WfoPlanProgress = ({ executionState }: WfoPlanProgressProps) => {
+  const [expandedSteps, setExpandedSteps] = useState<Set<string>>(new Set());
+  const t = useTranslations('agent.page.planProgress');
+  const { theme } = useOrchestratorTheme();
+
+  const { containerStyle, headerStyle, rowStyle, reasoningStyle, toolCallsToggleStyle, toolCallsListStyle, iconSize } =
+    useWithOrchestratorTheme(getWfoPlanProgressStyles);
+
+  if (!executionState.planning && executionState.steps.length === 0) {
+    return null;
+  }
+
+  const toggleStep = (stepName: string) => {
+    setExpandedSteps((prev) => {
+      const next = new Set(prev);
+      if (next.has(stepName)) {
+        next.delete(stepName);
+      } else {
+        next.add(stepName);
+      }
+      return next;
+    });
+  };
+
+  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 }: { status: string }) => {
+    if (status === 'completed')
+      return <WfoCheckmarkCircleFill color={theme.colors.success} width={iconSize} height={iconSize} />;
+    if (status === 'pending')
+      return <WfoMinusCircleOutline color={theme.colors.textSubdued} width={iconSize} height={iconSize} />;
+    return <EuiLoadingSpinner size="s" />;
+  };
+
+  return (
+    <EuiPanel hasBorder paddingSize="s" css={containerStyle}>
+      <div css={headerStyle}>
+        {allDone ?
+          <WfoCheckmarkCircleFill color={theme.colors.success} width={iconSize} height={iconSize} />
+        : <EuiLoadingSpinner size="s" />}
+        <span>{headerLabel}</span>
+      </div>
+      {executionState.steps.map((step) => {
+        const isExpanded = expandedSteps.has(step.step_name);
+        const hasToolCalls = step.tool_calls.length > 0;
+
+        return (
+          <div key={step.step_name}>
+            <div css={rowStyle}>
+              <StatusIcon status={step.status} />
+              <EuiText size="s" color={step.status === 'pending' ? 'subdued' : undefined}>
+                {step.step_name}
+              </EuiText>
+              {hasToolCalls && (
+                <span css={toolCallsToggleStyle} onClick={() => toggleStep(step.step_name)}>
+                  {step.tool_calls.length}
+                  {isExpanded ?
+                    <WfoChevronUp width={iconSize} height={iconSize} />
+                  : <WfoChevronDown width={iconSize} height={iconSize} />}
+                </span>
+              )}
+            </div>
+            {step.reasoning && (
+              <EuiText size="xs" color="subdued" css={reasoningStyle}>
+                {step.reasoning}
+              </EuiText>
+            )}
+            {isExpanded && hasToolCalls && (
+              <div css={toolCallsListStyle}>
+                {step.tool_calls.map((tc) => (
+                  <EuiText size="xs" key={tc.id} css={rowStyle}>
+                    <StatusIcon status={tc.status === 'complete' ? 'completed' : 'active'} />
+                    <span>{tc.name}</span>
+                  </EuiText>
+                ))}
+              </div>
+            )}
+          </div>
+        );
+      })}
+    </EuiPanel>
+  );
+};

package/src/components/WfoAgent/WfoPlanProgress/index.ts

@@ -0,0 +1 @@
+export { WfoPlanProgress } from './WfoPlanProgress';

package/src/components/WfoAgent/WfoPlanProgress/styles.ts

@@ -0,0 +1,62 @@
+import { css } from '@emotion/react';
+
+import { WfoThemeHelpers } from '@/hooks';
+
+export const getWfoPlanProgressStyles = ({ theme }: WfoThemeHelpers) => {
+  const iconSize = 14;
+
+  const containerStyle = css({
+    maxWidth: '50%',
+    marginRight: 'auto',
+    marginBottom: theme.size.s,
+    fontSize: theme.size.m,
+  });
+
+  const headerStyle = css({
+    display: 'flex',
+    alignItems: 'center',
+    gap: theme.size.s,
+    paddingBottom: theme.size.s,
+    marginBottom: theme.size.xs,
+    borderBottom: `${theme.border.width.thin} solid ${theme.colors.borderBaseSubdued}`,
+    fontWeight: theme.font.weight.semiBold,
+  });
+
+  const rowStyle = css({
+    display: 'flex',
+    alignItems: 'center',
+    gap: theme.size.s,
+    padding: `${theme.size.xxs} 0`,
+  });
+
+  const reasoningStyle = css({
+    marginLeft: `calc(${iconSize}px + ${theme.size.s})`,
+  });
+
+  const toolCallsToggleStyle = css({
+    display: 'inline-flex',
+    alignItems: 'center',
+    gap: theme.size.xxs,
+    cursor: 'pointer',
+    fontSize: theme.size.s,
+    color: theme.colors.textSubdued,
+    marginLeft: 'auto',
+    '&:hover': {
+      color: theme.colors.textParagraph,
+    },
+  });
+
+  const toolCallsListStyle = css({
+    paddingLeft: `calc(${iconSize}px + ${theme.size.s})`,
+  });
+
+  return {
+    containerStyle,
+    headerStyle,
+    rowStyle,
+    reasoningStyle,
+    toolCallsToggleStyle,
+    toolCallsListStyle,
+    iconSize,
+  };
+};

package/src/components/WfoAgent/WfoQueryArtifact/WfoQueryArtifact.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+
+import { useTranslations } from 'next-intl';
+
+import { EuiText } from '@elastic/eui';
+
+import { WfoLoading } from '@/components';
+import { useGetAgentQueryResultsQuery } from '@/rtk/endpoints/agentQueryResults';
+import { QueryArtifact } from '@/types';
+
+import { WfoAgentVisualization } from '../WfoAgentVisualization';
+
+export type WfoQueryArtifactProps = {
+  artifact: QueryArtifact;
+};
+
+export function WfoQueryArtifact({ artifact }: WfoQueryArtifactProps) {
+  const t = useTranslations('agent.page.visualization');
+  const { data, isLoading, isError } = useGetAgentQueryResultsQuery(artifact.query_id);
+
+  if (isLoading) {
+    return <WfoLoading />;
+  }
+
+  if (isError || !data) {
+    return (
+      <EuiText size="s" color="danger">
+        <p>{t('noDataAvailable')}</p>
+      </EuiText>
+    );
+  }
+
+  // Use the visualization_type from the artifact (set by the LLM) rather than the response
+  const aggregationData = {
+    ...data,
+    visualization_type: artifact.visualization_type,
+  };
+
+  return <WfoAgentVisualization aggregationData={aggregationData} />;
+}

package/src/components/WfoAgent/WfoQueryArtifact/index.ts

@@ -0,0 +1 @@
+export * from './WfoQueryArtifact';

package/src/components/WfoAgent/index.ts

@@ -3,3 +3,5 @@ export * from './WfoAgentTable';
 export * from './WfoAgentChart/WfoAgentLineChart';
 export * from './WfoAgentChart/WfoAgentPieChart';
 export * from './WfoAgentVisualization';
+export * from './WfoPlanProgress';
+export * from './WfoQueryArtifact';

package/src/components/WfoBadges/WfoEngineStatusBadge/WfoEngineStatusBadge.tsx

@@ -13,10 +13,12 @@ export const WfoEngineStatusBadge = () => {
   const { data } = useGetEngineStatusQuery();
   const { engineStatus } = data || {};
   const { useWebSockets } = useGetOrchestratorConfig();
+
+  const { orchestratorWebsocketUrl } = useGetOrchestratorConfig();
   const [websocketTrigger, { isUninitialized }] = useLazyStreamMessagesQuery();
 
   if (useWebSockets && isUninitialized) {
-    websocketTrigger();
+    websocketTrigger(orchestratorWebsocketUrl);
   }
 
   const engineStatusText: string = engineStatus ? `Engine is ${engineStatus}` : 'Engine status is unavailable';

package/src/components/WfoBadges/WfoVersionIncompatibleBadge/WfoVersionIncompatibleBadge.tsx

@@ -23,11 +23,12 @@ export const WfoVersionIncompatibleBadge: FC<WfoVersionIncompatibleBadgeProps> =
   const t = useTranslations('main');
   const { theme } = useOrchestratorTheme();
   const mappedVersions: MappedVersion[] = versionCompatibility;
-  const minimumOrchestratorCoreVersion = getOrchestratorCoreVersionIfNotCompatible(
-    orchestratorUiVersion,
-    orchestratorCoreVersion,
-    mappedVersions,
-  );
+  const isReady = orchestratorCoreVersion && orchestratorUiVersion;
+
+  const minimumOrchestratorCoreVersion =
+    isReady ?
+      getOrchestratorCoreVersionIfNotCompatible(orchestratorUiVersion, orchestratorCoreVersion, mappedVersions)
+    : null;
 
   return (
     <EuiToolTip
@@ -52,7 +53,7 @@ export const WfoVersionIncompatibleBadge: FC<WfoVersionIncompatibleBadgeProps> =
         textColor={theme.colors.textGhost}
         css={{
           marginLeft: theme.size.s,
-          visibility: minimumOrchestratorCoreVersion ? 'visible' : 'hidden',
+          display: minimumOrchestratorCoreVersion ? 'block' : 'none',
         }}
       >
         {t('incompatibleVersion')}

package/src/components/WfoBadges/WfoWebsocketStatusBadge/WfoWebsocketStatusBadge.tsx

@@ -6,7 +6,7 @@ import { useTranslations } from 'next-intl';
 import { EuiToolTip } from '@elastic/eui';
 
 import { WfoHeaderBadge } from '@/components';
-import { useWithOrchestratorTheme } from '@/hooks';
+import { useGetOrchestratorConfig, useWithOrchestratorTheme } from '@/hooks';
 import { useOrchestratorTheme } from '@/hooks/useOrchestratorTheme';
 import { WfoBoltFill, WfoBoltSlashFill } from '@/icons';
 import { orchestratorApi } from '@/rtk';
@@ -15,16 +15,22 @@ import { useStreamMessagesQuery } from '@/rtk/endpoints/streamMessages';
 import { getStyles } from './styles';
 
 interface WfoWebsocketStatusBadgeProps {
+  wsUrl?: string;
   hideWhenConnected?: boolean;
 }
 
-export const WfoWebsocketStatusBadge: FC<WfoWebsocketStatusBadgeProps> = ({ hideWhenConnected = false }) => {
+export const WfoWebsocketStatusBadge: FC<WfoWebsocketStatusBadgeProps> = ({
+  hideWhenConnected = false,
+  wsUrl = undefined,
+}) => {
   const dispatch = useDispatch();
   const { connectedStyle, disconnectedStyle } = useWithOrchestratorTheme(getStyles);
 
   const t = useTranslations('main');
   const { theme } = useOrchestratorTheme();
-  const { data: websocketConnected } = useStreamMessagesQuery();
+
+  const { orchestratorWebsocketUrl } = useGetOrchestratorConfig();
+  const { data: websocketConnected } = useStreamMessagesQuery(wsUrl || orchestratorWebsocketUrl);
 
   const showBadge = !(websocketConnected && hideWhenConnected);
 

package/src/components/WfoKeyValueTable/WfoValueCell.tsx

@@ -45,7 +45,7 @@ export const WfoValueCell: FC<WfoValueCellProps> = ({ value, textToCopy, rowNumb
                 <WfoClipboardCopy
                   width={clipboardIconSize}
                   height={clipboardIconSize}
-                  color={theme.colors.backgroundBaseDisabled}
+                  color={theme.colors.backgroundBaseAccent}
                 />
               </div>
             )}