diff --git a/apps/Standalone/src/designer/app/AzureLogicAppsDesigner/DesignerCommandBarV2.tsx b/apps/Standalone/src/designer/app/AzureLogicAppsDesigner/DesignerCommandBarV2.tsx
index 0499be37aaf..80f23ea1a07 100644
--- a/apps/Standalone/src/designer/app/AzureLogicAppsDesigner/DesignerCommandBarV2.tsx
+++ b/apps/Standalone/src/designer/app/AzureLogicAppsDesigner/DesignerCommandBarV2.tsx
@@ -120,6 +120,7 @@ export const DesignerCommandBar = ({
   isDesignerView,
   isMonitoringView,
   isCodeView,
+  isEvaluateView,
   isDarkMode,
   isUnitTest,
   isDraftMode,
@@ -127,6 +128,7 @@ export const DesignerCommandBar = ({
   showMonitoringView,
   showDesignerView,
   showCodeView,
+  showEvaluateView,
   switchWorkflowMode,
 }: {
   id: string;
@@ -143,6 +145,7 @@ export const DesignerCommandBar = ({
   isDesignerView?: boolean;
   isMonitoringView?: boolean;
   isCodeView?: boolean;
+  isEvaluateView?: boolean;
   isDarkMode: boolean;
   isUnitTest: boolean;
   isDraftMode?: boolean;
@@ -151,6 +154,7 @@ export const DesignerCommandBar = ({
   showMonitoringView: () => void;
   showDesignerView: () => void;
   showCodeView: () => void;
+  showEvaluateView: () => void;
   switchWorkflowMode: (draftMode: boolean) => void;
 }) => {
   const styles = useStyles();
@@ -348,6 +352,18 @@ export const DesignerCommandBar = ({
       >
         Run history
       </Button>
+      <Button
+        appearance={isEvaluateView ? 'primary' : 'subtle'}
+        className={mergeClasses(styles.viewButton, isEvaluateView ? styles.selectedButton : '')}
+        size="small"
+        onClick={() => {
+          showEvaluateView();
+          dispatch(collapsePanel());
+          dispatch(resetDesignerView());
+        }}
+      >
+        Evaluate
+      </Button>
     </Card>
   );
 
diff --git a/apps/Standalone/src/designer/app/AzureLogicAppsDesigner/laDesignerV2.tsx b/apps/Standalone/src/designer/app/AzureLogicAppsDesigner/laDesignerV2.tsx
index ee72ceebe32..1cbe6e55951 100644
--- a/apps/Standalone/src/designer/app/AzureLogicAppsDesigner/laDesignerV2.tsx
+++ b/apps/Standalone/src/designer/app/AzureLogicAppsDesigner/laDesignerV2.tsx
@@ -46,6 +46,7 @@ import {
   StandardOperationManifestService,
   StandardRunService,
   StandardSearchService,
+  StandardEvaluationService,
   clone,
   equals,
   guid,
@@ -75,6 +76,7 @@ import {
   setIsWorkflowDirty,
   setFocusNode,
   changePanelNode,
+  EvaluateView,
 } from '@microsoft/logic-apps-designer-v2';
 import axios from 'axios';
 import isEqual from 'lodash.isequal';
@@ -130,6 +132,7 @@ const DesignerEditor = () => {
   const [workflow, setWorkflow] = useState<Workflow>(); // Current workflow on the designer
   const [isDesignerView, setIsDesignerView] = useState(true);
   const [isCodeView, setIsCodeView] = useState(false);
+  const [isEvaluateView, setIsEvaluateView] = useState(false);
   const [isDraftMode, setIsDraftMode] = useState(true);
 
   const codeEditorRef = useRef<{ getValue: () => string | undefined; hasChanges: () => boolean }>(null);
@@ -284,6 +287,7 @@ const DesignerEditor = () => {
     if (!isMonitoringView) {
       setIsDesignerView(false);
       setIsCodeView(false);
+      setIsEvaluateView(false);
       toggleMonitoringView();
     }
   }, [isMonitoringView, toggleMonitoringView]);
@@ -535,6 +539,12 @@ const DesignerEditor = () => {
       return;
     }
 
+    if (isEvaluateView) {
+      setIsEvaluateView(false);
+      setIsCodeView(true);
+      return;
+    }
+
     if (isMonitoringView) {
       hideMonitoringView();
       setIsCodeView(true);
@@ -551,6 +561,12 @@ const DesignerEditor = () => {
       return;
     }
 
+    if (isEvaluateView) {
+      setIsEvaluateView(false);
+      setIsDesignerView(true);
+      return;
+    }
+
     if (isMonitoringView) {
       hideMonitoringView();
       setIsDesignerView(true);
@@ -579,6 +595,18 @@ const DesignerEditor = () => {
     }
   };
 
+  const showEvaluateView = useCallback(() => {
+    if (isEvaluateView) {
+      return;
+    }
+    if (isMonitoringView) {
+      hideMonitoringView();
+    }
+    setIsDesignerView(false);
+    setIsCodeView(false);
+    setIsEvaluateView(true);
+  }, [isEvaluateView, isMonitoringView, hideMonitoringView]);
+
   // Our iframe root element is given a strange padding (not in this repo), this removes it
   useEffect(() => {
     const root = document.getElementById('root');
@@ -685,11 +713,13 @@ const DesignerEditor = () => {
               isMonitoringView={isMonitoringView}
               isDesignerView={isDesignerView}
               isCodeView={isCodeView}
+              isEvaluateView={isEvaluateView}
               enableCopilot={() => dispatch(setIsChatBotEnabled(!showChatBot))}
               saveWorkflowFromCode={saveWorkflowFromCode}
               showMonitoringView={showMonitoringView}
               showDesignerView={showDesignerView}
               showCodeView={showCodeView}
+              showEvaluateView={showEvaluateView}
               switchWorkflowMode={switchWorkflowMode}
               isDraftMode={isDraftMode}
               prodWorkflow={artifactData?.properties.files[Artifact.WorkflowFile]}
@@ -736,7 +766,7 @@ const DesignerEditor = () => {
                   }}
                 />
               </div>
-              {!isCodeView && (
+              {!isCodeView && !isEvaluateView && (
                 <div style={{ flexGrow: 1, display: 'inherit' }}>
                   <Designer />
                   <FloatingRunButton
@@ -751,6 +781,7 @@ const DesignerEditor = () => {
                 </div>
               )}
               {isCodeView && <CodeViewEditor ref={codeEditorRef} workflowKind={workflow?.kind} />}
+              {isEvaluateView && <EvaluateView workflowName={workflowName} />}
               <CombineInitializeVariableDialog />
               <TriggerDescriptionDialog workflowId={workflowId} />
             </div>
@@ -1102,6 +1133,10 @@ const getDesignerServices = (
     httpClient,
   });
 
+  const evaluationService = new StandardEvaluationService({
+    ...defaultServiceParams,
+  });
+
   const roleService = new BaseRoleService({
     baseUrl: armUrl,
     httpClient,
@@ -1175,6 +1210,7 @@ const getDesignerServices = (
     cognitiveServiceService,
     connectionParameterEditorService,
     editorService,
+    evaluationService,
     userPreferenceService: new BaseUserPreferenceService(),
     experimentationService: new BaseExperimentationService(),
   };
diff --git a/apps/vs-code-react/src/app/designer/DesignerCommandBar/indexV2.tsx b/apps/vs-code-react/src/app/designer/DesignerCommandBar/indexV2.tsx
index 6598e226486..f4b6118b465 100644
--- a/apps/vs-code-react/src/app/designer/DesignerCommandBar/indexV2.tsx
+++ b/apps/vs-code-react/src/app/designer/DesignerCommandBar/indexV2.tsx
@@ -88,9 +88,11 @@ export interface DesignerCommandBarProps {
   isDesignerView: boolean;
   isCodeView: boolean;
   isMonitoringView: boolean;
+  isEvaluateView: boolean;
   switchToDesignerView: () => void;
   switchToCodeView: () => void;
   switchToMonitoringView: () => void;
+  switchToEvaluateView: () => void;
 }
 
 export const DesignerCommandBar: React.FC<DesignerCommandBarProps> = ({
@@ -104,9 +106,11 @@ export const DesignerCommandBar: React.FC<DesignerCommandBarProps> = ({
   isDesignerView,
   isCodeView,
   isMonitoringView,
+  isEvaluateView,
   switchToDesignerView,
   switchToCodeView,
   switchToMonitoringView,
+  switchToEvaluateView,
 }) => {
   const vscode = useContext(VSCodeContext);
   const dispatch = DesignerStore.dispatch;
@@ -275,6 +279,18 @@ export const DesignerCommandBar: React.FC<DesignerCommandBarProps> = ({
       >
         Run history
       </Button>
+      <Button
+        appearance={isEvaluateView ? 'primary' : 'subtle'}
+        className={mergeClasses(styles.viewButton, isEvaluateView ? styles.selectedButton : '')}
+        size="small"
+        onClick={() => {
+          dispatch(collapsePanel());
+          dispatch(resetDesignerView());
+          switchToEvaluateView();
+        }}
+      >
+        Evaluate
+      </Button>
     </Card>
   );
 
diff --git a/apps/vs-code-react/src/app/designer/appV2.tsx b/apps/vs-code-react/src/app/designer/appV2.tsx
index 586056d2b55..c72d638af48 100644
--- a/apps/vs-code-react/src/app/designer/appV2.tsx
+++ b/apps/vs-code-react/src/app/designer/appV2.tsx
@@ -15,6 +15,7 @@ import {
   useThemeObserver,
   FloatingRunButton,
   useRun,
+  EvaluateView,
 } from '@microsoft/logic-apps-designer-v2';
 import { BundleVersionRequirements, guid, isNullOrUndefined, isVersionSupported, Theme } from '@microsoft/logic-apps-shared';
 import type { FileSystemConnectionInfo, MessageToVsix, StandardApp } from '@microsoft/vscode-extension-logic-apps';
@@ -54,6 +55,7 @@ export const DesignerApp = () => {
   const isDesignerView = useMemo(() => currentView === DesignerViewType.Workflow, [currentView]);
   const isCodeView = useMemo(() => currentView === DesignerViewType.Code, [currentView]);
   const isMonitoringView = useMemo(() => currentView === DesignerViewType.Monitoring, [currentView]);
+  const isEvaluateView = useMemo(() => currentView === DesignerViewType.Evaluate, [currentView]);
 
   const [runId, setRunId] = useState(_runId);
 
@@ -267,35 +269,48 @@ export const DesignerApp = () => {
       hideMonitoringView();
       setCurrentView(DesignerViewType.Workflow);
     }
-  }, [isDesignerView, isCodeView, isMonitoringView, validateAndSaveCodeView, hideMonitoringView]);
+    if (isEvaluateView) {
+      setCurrentView(DesignerViewType.Workflow);
+    }
+  }, [isDesignerView, isCodeView, isMonitoringView, isEvaluateView, validateAndSaveCodeView, hideMonitoringView]);
 
   const switchToCodeView = useCallback(async () => {
     if (isCodeView) {
       return;
     }
 
-    if (isDesignerView) {
+    if (isDesignerView || isEvaluateView) {
       setCurrentView(DesignerViewType.Code);
     }
     if (isMonitoringView) {
       hideMonitoringView();
       setCurrentView(DesignerViewType.Code);
     }
-  }, [hideMonitoringView, isCodeView, isDesignerView, isMonitoringView]);
+  }, [hideMonitoringView, isCodeView, isDesignerView, isMonitoringView, isEvaluateView]);
 
   const switchToMonitoringView = useCallback(async () => {
     if (isMonitoringView) {
       return;
     }
 
-    if (isDesignerView) {
+    if (isDesignerView || isEvaluateView) {
       setCurrentView(DesignerViewType.Monitoring);
     }
 
     if (isCodeView) {
       validateAndSaveCodeView().then(() => setCurrentView(DesignerViewType.Monitoring));
     }
-  }, [isMonitoringView, isDesignerView, isCodeView, validateAndSaveCodeView]);
+  }, [isMonitoringView, isDesignerView, isCodeView, isEvaluateView, validateAndSaveCodeView]);
+
+  const switchToEvaluateView = useCallback(async () => {
+    if (isEvaluateView) {
+      return;
+    }
+    if (isMonitoringView) {
+      hideMonitoringView();
+    }
+    setCurrentView(DesignerViewType.Evaluate);
+  }, [isEvaluateView, isMonitoringView, hideMonitoringView]);
 
   /////////////////////////////////////////////////////////////////////////////
   // Rendering
@@ -352,12 +367,14 @@ export const DesignerApp = () => {
               isDesignerView={isDesignerView}
               isCodeView={isCodeView}
               isMonitoringView={isMonitoringView}
+              isEvaluateView={isEvaluateView}
               switchToDesignerView={switchToDesignerView}
               switchToCodeView={switchToCodeView}
               switchToMonitoringView={switchToMonitoringView}
+              switchToEvaluateView={switchToEvaluateView}
             />
 
-            {!isCodeView && (
+            {!isCodeView && !isEvaluateView && (
               <div style={{ display: 'flex', flexDirection: 'row', flexGrow: 1, height: '80%', position: 'relative' }}>
                 <Designer />
                 <FloatingRunButton
@@ -372,6 +389,7 @@ export const DesignerApp = () => {
               </div>
             )}
             {isCodeView && <CodeViewEditor ref={codeEditorRef} workflowKind={workflow?.kind} workflowFile={initialWorkflow} />}
+            {isEvaluateView && <EvaluateView workflowName={panelMetaData?.workflowName ?? ''} />}
           </BJSWorkflowProvider>
         ) : null}
       </DesignerProvider>
diff --git a/apps/vs-code-react/src/app/designer/constants.ts b/apps/vs-code-react/src/app/designer/constants.ts
index 7b252884ccf..898cadba176 100644
--- a/apps/vs-code-react/src/app/designer/constants.ts
+++ b/apps/vs-code-react/src/app/designer/constants.ts
@@ -67,4 +67,5 @@ export const DesignerViewType = {
   Workflow: 'workflow',
   Code: 'code',
   Monitoring: 'monitoring',
+  Evaluate: 'evaluate',
 };
diff --git a/apps/vs-code-react/src/app/designer/servicesHelper.ts b/apps/vs-code-react/src/app/designer/servicesHelper.ts
index 4e08c05e49a..a8ce7457e70 100644
--- a/apps/vs-code-react/src/app/designer/servicesHelper.ts
+++ b/apps/vs-code-react/src/app/designer/servicesHelper.ts
@@ -6,6 +6,7 @@ import {
   StandardSearchService,
   BaseGatewayService,
   StandardRunService,
+  StandardEvaluationService,
   StandardArtifactService,
   BaseApiManagementService,
   BaseFunctionService,
@@ -60,6 +61,7 @@ export interface IDesignerServices {
   loggerService: ILoggerService;
   connectionParameterEditorService: CustomConnectionParameterEditorService;
   cognitiveServiceService: BaseCognitiveServiceService;
+  evaluationService: StandardEvaluationService;
 }
 
 export const getDesignerServices = (
@@ -378,6 +380,12 @@ export const getDesignerServices = (
     httpClient,
   });
 
+  const evaluationService = new StandardEvaluationService({
+    apiVersion,
+    baseUrl: isEmptyString(workflowRuntimeBaseUrl) ? baseUrl : workflowRuntimeBaseUrl,
+    httpClient,
+  });
+
   // MSI is not supported in VS Code
   const roleService = new BaseRoleService({
     baseUrl: armUrl,
@@ -428,6 +436,7 @@ export const getDesignerServices = (
     loggerService,
     connectionParameterEditorService,
     cognitiveServiceService,
+    evaluationService,
     functionService,
   };
 };
diff --git a/libs/designer-v2/src/lib/core/index.ts b/libs/designer-v2/src/lib/core/index.ts
index c907fb87d64..1a08c3293cb 100644
--- a/libs/designer-v2/src/lib/core/index.ts
+++ b/libs/designer-v2/src/lib/core/index.ts
@@ -129,3 +129,10 @@ export { setLocation, setSubscription, setResourceGroup } from './state/template
 export { getConsumptionWorkflowPayloadForCreate } from './templates/utils/createhelper';
 export * from './state/modal/modalSelectors';
 export * from './state/modal/modalSlice';
+export * from './queries/evaluations';
+export {
+  setSelectedRun as setEvaluationSelectedRun,
+  setSelectedAction as setEvaluationSelectedAction,
+  resetEvaluationState,
+} from './state/evaluation/evaluationSlice';
+export type { AgentAction, WorkflowRunEntry } from './state/evaluation/evaluationInterfaces';
diff --git a/libs/designer-v2/src/lib/core/queries/evaluations.ts b/libs/designer-v2/src/lib/core/queries/evaluations.ts
new file mode 100644
index 00000000000..8c34d152396
--- /dev/null
+++ b/libs/designer-v2/src/lib/core/queries/evaluations.ts
@@ -0,0 +1,267 @@
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { EvaluationService } from '@microsoft/logic-apps-shared';
+import type { Evaluator } from '@microsoft/logic-apps-shared';
+import { useIsAgenticWorkflow } from '../state/designerView/designerViewSelectors';
+
+const queryOpts = {
+  cacheTime: 1000 * 60 * 5,
+  refetchOnMount: true,
+  refetchOnWindowFocus: false,
+  refetchOnReconnect: false,
+};
+
+export const evaluationQueryKeys = {
+  evaluators: 'evaluators',
+  evaluator: 'evaluator',
+  evaluations: 'evaluations',
+  evaluation: 'evaluation',
+};
+
+export const useEvaluators = (workflowName: string, agentActionName: string) => {
+  const isAgenticWorkflow = useIsAgenticWorkflow();
+  const globalAgentEvaluators = useGlobalAgentEvaluators(workflowName, !isAgenticWorkflow);
+  const agentEvaluators = useAgentEvaluators(workflowName, agentActionName, isAgenticWorkflow);
+  return isAgenticWorkflow ? agentEvaluators : globalAgentEvaluators;
+};
+
+const useGlobalAgentEvaluators = (workflowName: string, isEnabled: boolean) => {
+  return useQuery(
+    [evaluationQueryKeys.evaluators, workflowName],
+    async () => {
+      return EvaluationService().getGlobalAgentEvaluators(workflowName);
+    },
+    {
+      ...queryOpts,
+      enabled: isEnabled && !!workflowName.trim(),
+    }
+  );
+};
+
+const useAgentEvaluators = (workflowName: string, agentActionName: string, isEnabled: boolean) => {
+  return useQuery(
+    [evaluationQueryKeys.evaluators, workflowName, agentActionName],
+    async () => {
+      return EvaluationService().getAgentEvaluators(workflowName, agentActionName);
+    },
+    {
+      ...queryOpts,
+      enabled: isEnabled && !!workflowName.trim() && !!agentActionName.trim(),
+    }
+  );
+};
+
+export const useEvaluator = (workflowName: string, agentActionName: string, evaluatorName: string) => {
+  const isAgenticWorkflow = useIsAgenticWorkflow();
+  const globalAgentEvaluator = useGlobalAgentEvaluator(workflowName, evaluatorName, !isAgenticWorkflow);
+  const agentEvaluator = useAgentEvaluator(workflowName, agentActionName, evaluatorName, isAgenticWorkflow);
+  return isAgenticWorkflow ? agentEvaluator : globalAgentEvaluator;
+};
+
+const useGlobalAgentEvaluator = (workflowName: string, evaluatorName: string, isEnabled: boolean) => {
+  return useQuery(
+    [evaluationQueryKeys.evaluator, workflowName, evaluatorName],
+    async () => {
+      return EvaluationService().getGlobalAgentEvaluator(workflowName, evaluatorName);
+    },
+    {
+      ...queryOpts,
+      enabled: isEnabled && !!workflowName.trim() && !!evaluatorName.trim(),
+    }
+  );
+};
+
+const useAgentEvaluator = (workflowName: string, agentActionName: string, evaluatorName: string, isEnabled: boolean) => {
+  return useQuery(
+    [evaluationQueryKeys.evaluator, workflowName, agentActionName, evaluatorName],
+    async () => {
+      return EvaluationService().getAgentEvaluator(workflowName, agentActionName, evaluatorName);
+    },
+    {
+      ...queryOpts,
+      enabled: isEnabled && !!workflowName.trim() && !!agentActionName.trim() && !!evaluatorName.trim(),
+    }
+  );
+};
+
+export const useCreateOrUpdateEvaluator = (workflowName: string, agentActionName: string) => {
+  const isAgenticWorkflow = useIsAgenticWorkflow();
+  const createOrUpdateGlobalAgentEvaluator = useCreateOrUpdateGlobalAgentEvaluator(workflowName);
+  const createOrUpdateAgentEvaluator = useCreateOrUpdateAgentEvaluator(workflowName, agentActionName);
+  return isAgenticWorkflow ? createOrUpdateAgentEvaluator : createOrUpdateGlobalAgentEvaluator;
+};
+
+const useCreateOrUpdateGlobalAgentEvaluator = (workflowName: string) => {
+  const queryClient = useQueryClient();
+  return useMutation(
+    async ({ evaluatorName, evaluator }: { evaluatorName: string; evaluator: Evaluator }) => {
+      return EvaluationService().createOrUpdateGlobalAgentEvaluator(workflowName, evaluatorName, evaluator);
+    },
+    {
+      onSuccess: (data, variables) => {
+        queryClient.invalidateQueries([evaluationQueryKeys.evaluators, workflowName]);
+        queryClient.invalidateQueries([evaluationQueryKeys.evaluator, workflowName, variables.evaluatorName]);
+      },
+    }
+  );
+};
+
+const useCreateOrUpdateAgentEvaluator = (workflowName: string, agentActionName: string) => {
+  const queryClient = useQueryClient();
+  return useMutation(
+    async ({ evaluatorName, evaluator }: { evaluatorName: string; evaluator: Evaluator }) => {
+      return EvaluationService().createOrUpdateAgentEvaluator(workflowName, agentActionName, evaluatorName, evaluator);
+    },
+    {
+      onSuccess: (data, variables) => {
+        queryClient.invalidateQueries([evaluationQueryKeys.evaluators, workflowName, agentActionName]);
+        queryClient.invalidateQueries([evaluationQueryKeys.evaluator, workflowName, agentActionName, variables.evaluatorName]);
+      },
+    }
+  );
+};
+
+export const useDeleteEvaluator = (workflowName: string, agentActionName: string) => {
+  const isAgenticWorkflow = useIsAgenticWorkflow();
+  const deleteGlobalAgentEvaluator = useDeleteGlobalAgentEvaluator(workflowName);
+  const deleteAgentEvaluator = useDeleteAgentEvaluator(workflowName, agentActionName);
+  return isAgenticWorkflow ? deleteAgentEvaluator : deleteGlobalAgentEvaluator;
+};
+
+const useDeleteGlobalAgentEvaluator = (workflowName: string) => {
+  const queryClient = useQueryClient();
+  return useMutation(
+    async (evaluatorName: string) => {
+      return EvaluationService().deleteGlobalAgentEvaluator(workflowName, evaluatorName);
+    },
+    {
+      onSuccess: (data, evaluatorName) => {
+        queryClient.invalidateQueries([evaluationQueryKeys.evaluators, workflowName]);
+        queryClient.invalidateQueries([evaluationQueryKeys.evaluator, workflowName, evaluatorName]);
+      },
+    }
+  );
+};
+
+const useDeleteAgentEvaluator = (workflowName: string, agentActionName: string) => {
+  const queryClient = useQueryClient();
+  return useMutation(
+    async (evaluatorName: string) => {
+      return EvaluationService().deleteAgentEvaluator(workflowName, agentActionName, evaluatorName);
+    },
+    {
+      onSuccess: (data, evaluatorName) => {
+        queryClient.invalidateQueries([evaluationQueryKeys.evaluators, workflowName, agentActionName]);
+        queryClient.invalidateQueries([evaluationQueryKeys.evaluator, workflowName, agentActionName, evaluatorName]);
+      },
+    }
+  );
+};
+
+export const useEvaluations = (workflowName: string, runId: string, agentActionName: string) => {
+  const isAgenticWorkflow = useIsAgenticWorkflow();
+  const globalAgentEvaluations = useGlobalAgentEvaluations(workflowName, runId, !isAgenticWorkflow);
+  const agentEvaluations = useAgentEvaluations(workflowName, runId, agentActionName, isAgenticWorkflow);
+  return isAgenticWorkflow ? agentEvaluations : globalAgentEvaluations;
+};
+
+const useGlobalAgentEvaluations = (workflowName: string, runId: string, isEnabled: boolean) => {
+  return useQuery(
+    [evaluationQueryKeys.evaluations, workflowName, runId],
+    async () => {
+      return EvaluationService().getGlobalAgentEvaluations(workflowName, runId);
+    },
+    {
+      ...queryOpts,
+      enabled: isEnabled && !!workflowName.trim() && !!runId.trim(),
+    }
+  );
+};
+
+const useAgentEvaluations = (workflowName: string, runId: string, agentActionName: string, isEnabled: boolean) => {
+  return useQuery(
+    [evaluationQueryKeys.evaluations, workflowName, runId, agentActionName],
+    async () => {
+      return EvaluationService().getAgentEvaluations(workflowName, runId, agentActionName);
+    },
+    {
+      ...queryOpts,
+      enabled: isEnabled && !!workflowName.trim() && !!runId.trim() && !!agentActionName.trim(),
+    }
+  );
+};
+
+export const useEvaluation = (workflowName: string, runId: string, agentActionName: string, evaluatorName: string) => {
+  const isAgenticWorkflow = useIsAgenticWorkflow();
+  const globalAgentEvaluation = useGlobalAgentEvaluation(workflowName, runId, evaluatorName, !isAgenticWorkflow);
+  const agentEvaluation = useAgentEvaluation(workflowName, runId, agentActionName, evaluatorName, isAgenticWorkflow);
+  return isAgenticWorkflow ? agentEvaluation : globalAgentEvaluation;
+};
+
+const useGlobalAgentEvaluation = (workflowName: string, runId: string, evaluatorName: string, isEnabled: boolean) => {
+  return useQuery(
+    [evaluationQueryKeys.evaluation, workflowName, runId, evaluatorName],
+    async () => {
+      return EvaluationService().getGlobalAgentEvaluation(workflowName, runId, evaluatorName);
+    },
+    {
+      ...queryOpts,
+      enabled: isEnabled && !!workflowName.trim() && !!runId.trim() && !!evaluatorName.trim(),
+    }
+  );
+};
+
+const useAgentEvaluation = (workflowName: string, runId: string, agentActionName: string, evaluatorName: string, isEnabled: boolean) => {
+  return useQuery(
+    [evaluationQueryKeys.evaluation, workflowName, runId, agentActionName, evaluatorName],
+    async () => {
+      return EvaluationService().getAgentEvaluation(workflowName, runId, agentActionName, evaluatorName);
+    },
+    {
+      ...queryOpts,
+      enabled: isEnabled && !!workflowName.trim() && !!runId.trim() && !!agentActionName.trim() && !!evaluatorName.trim(),
+    }
+  );
+};
+
+export const useRunEvaluation = (workflowName: string, agentActionName: string) => {
+  const isAgenticWorkflow = useIsAgenticWorkflow();
+  const runGlobalAgentEvaluation = useRunGlobalAgentEvaluation(workflowName);
+  const runAgentEvaluation = useRunAgentEvaluation(workflowName, agentActionName);
+  return isAgenticWorkflow ? runAgentEvaluation : runGlobalAgentEvaluation;
+};
+
+const useRunGlobalAgentEvaluation = (workflowName: string) => {
+  const queryClient = useQueryClient();
+  return useMutation(
+    async ({ runId, evaluatorName }: { runId: string; evaluatorName: string }) => {
+      return EvaluationService().runGlobalAgentEvaluation(workflowName, runId, evaluatorName);
+    },
+    {
+      onSuccess: (data, variables) => {
+        queryClient.invalidateQueries([evaluationQueryKeys.evaluations, workflowName, variables.runId]);
+        queryClient.invalidateQueries([evaluationQueryKeys.evaluation, workflowName, variables.runId, variables.evaluatorName]);
+      },
+    }
+  );
+};
+
+const useRunAgentEvaluation = (workflowName: string, agentActionName: string) => {
+  const queryClient = useQueryClient();
+  return useMutation(
+    async ({ runId, evaluatorName }: { runId: string; evaluatorName: string }) => {
+      return EvaluationService().runAgentEvaluation(workflowName, runId, agentActionName, evaluatorName);
+    },
+    {
+      onSuccess: (data, variables) => {
+        queryClient.invalidateQueries([evaluationQueryKeys.evaluations, workflowName, variables.runId, agentActionName]);
+        queryClient.invalidateQueries([
+          evaluationQueryKeys.evaluation,
+          workflowName,
+          variables.runId,
+          agentActionName,
+          variables.evaluatorName,
+        ]);
+      },
+    }
+  );
+};
diff --git a/libs/designer-v2/src/lib/core/queries/runs.ts b/libs/designer-v2/src/lib/core/queries/runs.ts
index 835883b6dba..b1ec7b66bf2 100644
--- a/libs/designer-v2/src/lib/core/queries/runs.ts
+++ b/libs/designer-v2/src/lib/core/queries/runs.ts
@@ -415,10 +415,10 @@ export const useRunChatHistory = (runId: string | undefined, isEnabled: boolean)
   );
 };
 
-export const useChatHistory = (isMonitoringView: boolean, runId: string | undefined, nodeIds: string[] = [], isA2AWorkflow: boolean) => {
-  const actionHistoryQuery = useActionsChatHistory(nodeIds, runId, isMonitoringView && !isA2AWorkflow);
+export const useChatHistory = (isEnabled: boolean, runId: string | undefined, nodeIds: string[] = [], isA2AWorkflow: boolean) => {
+  const actionHistoryQuery = useActionsChatHistory(nodeIds, runId, isEnabled && !isA2AWorkflow);
 
-  const runHistoryQuery = useRunChatHistory(runId, isMonitoringView && isA2AWorkflow);
+  const runHistoryQuery = useRunChatHistory(runId, isEnabled && isA2AWorkflow);
 
   return isA2AWorkflow ? runHistoryQuery : actionHistoryQuery;
 };
diff --git a/libs/designer-v2/src/lib/core/state/designerOptions/designerOptionsInterfaces.ts b/libs/designer-v2/src/lib/core/state/designerOptions/designerOptionsInterfaces.ts
index b2a7500c2fd..09d743f7417 100644
--- a/libs/designer-v2/src/lib/core/state/designerOptions/designerOptionsInterfaces.ts
+++ b/libs/designer-v2/src/lib/core/state/designerOptions/designerOptionsInterfaces.ts
@@ -24,6 +24,7 @@ import type {
   IUserPreferenceService,
   IExperimentationService,
   ICognitiveServiceService,
+  IEvaluationService,
 } from '@microsoft/logic-apps-shared';
 import type { MaximumWaitingRunsMetadata } from '../../../ui/settings';
 
@@ -82,4 +83,5 @@ export interface ServiceOptions {
   userPreferenceService?: IUserPreferenceService;
   experimentationService?: IExperimentationService;
   cognitiveServiceService?: ICognitiveServiceService;
+  evaluationService?: IEvaluationService;
 }
diff --git a/libs/designer-v2/src/lib/core/state/designerOptions/designerOptionsSlice.ts b/libs/designer-v2/src/lib/core/state/designerOptions/designerOptionsSlice.ts
index ad8e7ccb4a2..cac27d07399 100644
--- a/libs/designer-v2/src/lib/core/state/designerOptions/designerOptionsSlice.ts
+++ b/libs/designer-v2/src/lib/core/state/designerOptions/designerOptionsSlice.ts
@@ -25,6 +25,7 @@ import {
   InitUserPreferenceService,
   InitExperimentationServiceService,
   InitCognitiveServiceService,
+  InitEvaluationService,
 } from '@microsoft/logic-apps-shared';
 import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
 import type { PayloadAction } from '@reduxjs/toolkit';
@@ -78,6 +79,7 @@ export const initializeServices = createAsyncThunk(
     userPreferenceService,
     experimentationService,
     cognitiveServiceService,
+    evaluationService,
   }: ServiceOptions) => {
     const loggerServices: ILoggerService[] = [];
     if (loggerService) {
@@ -142,6 +144,10 @@ export const initializeServices = createAsyncThunk(
       InitCognitiveServiceService(cognitiveServiceService);
     }
 
+    if (evaluationService) {
+      InitEvaluationService(evaluationService);
+    }
+
     // Experimentation service is being used to A/B test features in the designer so in case client does not want to use the A/B test feature,
     // we are always defaulting to the false implementation of the experimentation service.
     InitExperimentationServiceService(experimentationService);
diff --git a/libs/designer-v2/src/lib/core/state/evaluation/evaluationInterfaces.ts b/libs/designer-v2/src/lib/core/state/evaluation/evaluationInterfaces.ts
new file mode 100644
index 00000000000..eb78bff516d
--- /dev/null
+++ b/libs/designer-v2/src/lib/core/state/evaluation/evaluationInterfaces.ts
@@ -0,0 +1,35 @@
+import type { Evaluator, EvaluationResult } from '@microsoft/logic-apps-shared';
+
+export type RightPanelView = 'empty' | 'create' | 'edit' | 'view' | 'result';
+
+export interface AgentAction {
+  name: string;
+  status: string;
+  startTime: string;
+  endTime: string;
+}
+
+export interface WorkflowRunEntry {
+  id: string;
+  name: string;
+  startTime: string;
+  endTime: string;
+  status: string;
+}
+
+export interface EvaluationState {
+  evaluators: Evaluator[];
+  evaluatorsLoading: boolean;
+  selectedEvaluator: Evaluator | null;
+  selectedRun: WorkflowRunEntry | null;
+  selectedAction: AgentAction | null;
+  agentActions: AgentAction[];
+  agentActionsLoading: boolean;
+  rightPanelView: RightPanelView;
+  editingEvaluator: Evaluator | null;
+  evaluationResult: EvaluationResult | null;
+  evaluationLoading: boolean;
+  evaluationError: string | null;
+  runningEvaluatorName: string;
+  searchQuery: string;
+}
diff --git a/libs/designer-v2/src/lib/core/state/evaluation/evaluationSelectors.ts b/libs/designer-v2/src/lib/core/state/evaluation/evaluationSelectors.ts
new file mode 100644
index 00000000000..172b565e567
--- /dev/null
+++ b/libs/designer-v2/src/lib/core/state/evaluation/evaluationSelectors.ts
@@ -0,0 +1,47 @@
+import type { RootState } from '../../store';
+import { useMemo } from 'react';
+import { useSelector } from 'react-redux';
+import { useIsAgenticWorkflow } from '../designerView/designerViewSelectors';
+
+export const useEvaluators = () => useSelector((state: RootState) => state.evaluation.evaluators);
+export const useEvaluatorsLoading = () => useSelector((state: RootState) => state.evaluation.evaluatorsLoading);
+export const useSelectedEvaluator = () => useSelector((state: RootState) => state.evaluation.selectedEvaluator);
+export const useSelectedRun = () => useSelector((state: RootState) => state.evaluation.selectedRun);
+export const useSelectedAction = () => useSelector((state: RootState) => state.evaluation.selectedAction);
+export const useAgentActions = () => useSelector((state: RootState) => state.evaluation.agentActions);
+export const useAgentActionsLoading = () => useSelector((state: RootState) => state.evaluation.agentActionsLoading);
+export const useRightPanelView = () => useSelector((state: RootState) => state.evaluation.rightPanelView);
+export const useEditingEvaluator = () => useSelector((state: RootState) => state.evaluation.editingEvaluator);
+export const useEvaluationResult = () => useSelector((state: RootState) => state.evaluation.evaluationResult);
+export const useEvaluationLoading = () => useSelector((state: RootState) => state.evaluation.evaluationLoading);
+export const useEvaluationError = () => useSelector((state: RootState) => state.evaluation.evaluationError);
+export const useRunningEvaluatorName = () => useSelector((state: RootState) => state.evaluation.runningEvaluatorName);
+export const useSearchQuery = () => useSelector((state: RootState) => state.evaluation.searchQuery);
+
+export const useFilteredEvaluators = () => {
+  const evaluators = useEvaluators();
+  const searchQuery = useSearchQuery();
+  return useMemo(
+    () =>
+      evaluators.filter(
+        (ev) => ev.name.toLowerCase().includes(searchQuery.toLowerCase()) || ev.template.toLowerCase().includes(searchQuery.toLowerCase())
+      ),
+    [evaluators, searchQuery]
+  );
+};
+
+export const useCanRunEvaluation = () => {
+  const selectedRun = useSelectedRun();
+  const selectedAction = useSelectedAction();
+  const isAgenticWorkflow = useIsAgenticWorkflow();
+
+  return useMemo(() => {
+    if (!selectedRun) {
+      return false;
+    }
+    if (isAgenticWorkflow) {
+      return !!selectedAction;
+    }
+    return true;
+  }, [selectedRun, selectedAction, isAgenticWorkflow]);
+};
diff --git a/libs/designer-v2/src/lib/core/state/evaluation/evaluationSlice.ts b/libs/designer-v2/src/lib/core/state/evaluation/evaluationSlice.ts
new file mode 100644
index 00000000000..727c12fc072
--- /dev/null
+++ b/libs/designer-v2/src/lib/core/state/evaluation/evaluationSlice.ts
@@ -0,0 +1,129 @@
+import type { Evaluator, EvaluationResult } from '@microsoft/logic-apps-shared';
+import type { PayloadAction } from '@reduxjs/toolkit';
+import { createSlice } from '@reduxjs/toolkit';
+import { resetWorkflowState } from '../global';
+import type { EvaluationState, RightPanelView, WorkflowRunEntry, AgentAction } from './evaluationInterfaces';
+
+export const initialEvaluationState: EvaluationState = {
+  evaluators: [],
+  evaluatorsLoading: false,
+  selectedEvaluator: null,
+  selectedRun: null,
+  selectedAction: null,
+  agentActions: [],
+  agentActionsLoading: false,
+  rightPanelView: 'empty',
+  editingEvaluator: null,
+  evaluationResult: null,
+  evaluationLoading: false,
+  evaluationError: null,
+  runningEvaluatorName: '',
+  searchQuery: '',
+};
+
+export const evaluationSlice = createSlice({
+  name: 'evaluation',
+  initialState: initialEvaluationState,
+  reducers: {
+    setEvaluators: (state, action: PayloadAction<Evaluator[]>) => {
+      state.evaluators = action.payload;
+    },
+    setEvaluatorsLoading: (state, action: PayloadAction<boolean>) => {
+      state.evaluatorsLoading = action.payload;
+    },
+    setSelectedEvaluator: (state, action: PayloadAction<Evaluator | null>) => {
+      state.selectedEvaluator = action.payload;
+      if (action.payload) {
+        state.rightPanelView = 'view';
+      } else {
+        state.rightPanelView = 'empty';
+      }
+    },
+    setSelectedRun: (state, action: PayloadAction<WorkflowRunEntry | null>) => {
+      state.selectedRun = action.payload;
+      state.selectedAction = null;
+    },
+    setSelectedAction: (state, action: PayloadAction<AgentAction | null>) => {
+      state.selectedAction = action.payload;
+    },
+    setAgentActions: (state, action: PayloadAction<AgentAction[]>) => {
+      state.agentActions = action.payload;
+    },
+    setAgentActionsLoading: (state, action: PayloadAction<boolean>) => {
+      state.agentActionsLoading = action.payload;
+    },
+    setRightPanelView: (state, action: PayloadAction<RightPanelView>) => {
+      state.rightPanelView = action.payload;
+    },
+    setEditingEvaluator: (state, action: PayloadAction<Evaluator | null>) => {
+      state.editingEvaluator = action.payload;
+    },
+    setEvaluationResult: (state, action: PayloadAction<EvaluationResult | null>) => {
+      state.evaluationResult = action.payload;
+    },
+    setEvaluationLoading: (state, action: PayloadAction<boolean>) => {
+      state.evaluationLoading = action.payload;
+    },
+    setEvaluationError: (state, action: PayloadAction<string | null>) => {
+      state.evaluationError = action.payload;
+    },
+    setRunningEvaluatorName: (state, action: PayloadAction<string>) => {
+      state.runningEvaluatorName = action.payload;
+    },
+    setSearchQuery: (state, action: PayloadAction<string>) => {
+      state.searchQuery = action.payload;
+    },
+    startCreateEvaluator: (state) => {
+      state.selectedEvaluator = null;
+      state.editingEvaluator = null;
+      state.rightPanelView = 'create';
+    },
+    startEditEvaluator: (state, action: PayloadAction<Evaluator>) => {
+      state.selectedEvaluator = action.payload;
+      state.editingEvaluator = action.payload;
+      state.rightPanelView = 'edit';
+    },
+    finishFormAction: (state) => {
+      state.rightPanelView = 'empty';
+      state.editingEvaluator = null;
+      state.selectedEvaluator = null;
+    },
+    cancelFormAction: (state) => {
+      if (state.selectedEvaluator && state.rightPanelView === 'edit') {
+        state.rightPanelView = 'view';
+      } else {
+        state.rightPanelView = 'empty';
+        state.selectedEvaluator = null;
+      }
+      state.editingEvaluator = null;
+    },
+    resetEvaluationState: () => initialEvaluationState,
+  },
+  extraReducers: (builder) => {
+    builder.addCase(resetWorkflowState, () => initialEvaluationState);
+  },
+});
+
+export const {
+  setEvaluators,
+  setEvaluatorsLoading,
+  setSelectedEvaluator,
+  setSelectedRun,
+  setSelectedAction,
+  setAgentActions,
+  setAgentActionsLoading,
+  setRightPanelView,
+  setEditingEvaluator,
+  setEvaluationResult,
+  setEvaluationLoading,
+  setEvaluationError,
+  setRunningEvaluatorName,
+  setSearchQuery,
+  startCreateEvaluator,
+  startEditEvaluator,
+  finishFormAction,
+  cancelFormAction,
+  resetEvaluationState,
+} = evaluationSlice.actions;
+
+export default evaluationSlice.reducer;
diff --git a/libs/designer-v2/src/lib/core/store.ts b/libs/designer-v2/src/lib/core/store.ts
index 9738ea030a6..1dc1c3153bf 100644
--- a/libs/designer-v2/src/lib/core/store.ts
+++ b/libs/designer-v2/src/lib/core/store.ts
@@ -14,6 +14,7 @@ import workflowReducer from './state/workflow/workflowSlice';
 import workflowParametersReducer from './state/workflowparameters/workflowparametersSlice';
 import modalReducer from './state/modal/modalSlice';
 import notesReducer from './state/notes/notesSlice';
+import evaluationReducer from './state/evaluation/evaluationSlice';
 
 import { configureStore } from '@reduxjs/toolkit';
 import type {} from 'redux-thunk';
@@ -42,6 +43,7 @@ export const store = configureStore({
     undoRedo: undoRedoReducer,
     modal: modalReducer,
     notes: notesReducer,
+    evaluation: evaluationReducer,
     // if is in dev environment, add devSlice to store
     ...(process.env.NODE_ENV === 'development' ? { dev: devReducer } : {}),
   },
diff --git a/libs/designer-v2/src/lib/ui/evaluation/AgentChatPanel.tsx b/libs/designer-v2/src/lib/ui/evaluation/AgentChatPanel.tsx
new file mode 100644
index 00000000000..379a89cef93
--- /dev/null
+++ b/libs/designer-v2/src/lib/ui/evaluation/AgentChatPanel.tsx
@@ -0,0 +1,83 @@
+import type { ConversationItem } from '@microsoft/designer-ui';
+import { useEffect, useMemo, useState } from 'react';
+import { Spinner, Text } from '@fluentui/react-components';
+import { ChatbotUI } from '@microsoft/logic-apps-chatbot';
+import { useSelectedRun } from '../../core/state/evaluation/evaluationSelectors';
+import { useChatHistory } from '../../core/queries/runs';
+import { parseChatHistory } from '../panel/agentChat/helper';
+import { useIsA2AWorkflow } from '../../core/state/designerView/designerViewSelectors';
+import { useAgentOperations } from '../../core/state/workflow/workflowSelectors';
+import { useEvaluateViewStyles } from './EvaluateView.styles';
+
+export const AgentChatPanel = () => {
+  const styles = useEvaluateViewStyles();
+  const selectedRun = useSelectedRun();
+
+  const isA2AWorkflow = useIsA2AWorkflow();
+  const agentOperations = useAgentOperations();
+  const runId = selectedRun?.id;
+
+  const { isFetching: isChatHistoryFetching, data: chatHistoryData } = useChatHistory(!!runId, runId, agentOperations, isA2AWorkflow);
+
+  const [conversation, setConversation] = useState<ConversationItem[]>([]);
+
+  const noopToolResult = useMemo(() => () => {}, []);
+  const noopToolContent = useMemo(() => () => {}, []);
+  const noopAgent = useMemo(() => () => {}, []);
+
+  useEffect(() => {
+    if (chatHistoryData) {
+      const items = parseChatHistory(chatHistoryData, noopToolResult as any, noopToolContent as any, noopAgent, isA2AWorkflow);
+      setConversation(items);
+    } else {
+      setConversation([]);
+    }
+  }, [chatHistoryData, noopToolResult, noopToolContent, noopAgent, isA2AWorkflow]);
+
+  if (!selectedRun) {
+    return (
+      <div className={styles.emptyState}>
+        <Text>Select a run to view chat history</Text>
+      </div>
+    );
+  }
+
+  if (isChatHistoryFetching) {
+    return (
+      <div className={styles.loadingContainer}>
+        <Spinner size="small" label="Loading chat history..." />
+      </div>
+    );
+  }
+
+  if (conversation.length === 0) {
+    return (
+      <div className={styles.emptyState}>
+        <Text>No chat history available for this run</Text>
+      </div>
+    );
+  }
+
+  return (
+    <div className={styles.chatPanelContainer}>
+      <ChatbotUI
+        panel={{}}
+        inputBox={{
+          onSubmit: () => Promise.resolve(),
+          readOnly: true,
+        }}
+        string={{
+          submit: '',
+          progressState: '',
+          progressSave: '',
+        }}
+        body={{
+          messages: conversation,
+          focus: false,
+          answerGenerationInProgress: false,
+          setFocus: () => {},
+        }}
+      />
+    </div>
+  );
+};
diff --git a/libs/designer-v2/src/lib/ui/evaluation/EvaluateView.styles.ts b/libs/designer-v2/src/lib/ui/evaluation/EvaluateView.styles.ts
new file mode 100644
index 00000000000..d7dbc35ea54
--- /dev/null
+++ b/libs/designer-v2/src/lib/ui/evaluation/EvaluateView.styles.ts
@@ -0,0 +1,372 @@
+import { makeStyles, tokens } from '@fluentui/react-components';
+
+export const useEvaluateViewStyles = makeStyles({
+  root: {
+    display: 'flex',
+    flexDirection: 'column',
+    height: '100%',
+    overflow: 'hidden',
+  },
+  main: {
+    flex: '1',
+    display: 'flex',
+    overflow: 'hidden',
+  },
+  panel: {
+    display: 'flex',
+    flexDirection: 'column',
+    overflow: 'hidden',
+    borderRight: `1px solid ${tokens.colorNeutralStroke1}`,
+  },
+  panelRuns: {
+    width: '320px',
+    minWidth: '240px',
+  },
+  panelEvaluators: {
+    width: '420px',
+    minWidth: '300px',
+  },
+  panelDetail: {
+    flex: '1',
+    minWidth: '300px',
+    overflow: 'auto',
+    borderRight: 'none',
+  },
+  panelHeader: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    padding: '12px 16px',
+    borderBottom: `1px solid ${tokens.colorNeutralStroke1}`,
+  },
+  panelHeaderWithBack: {
+    padding: '8px 16px',
+  },
+  panelTitle: {
+    margin: '0',
+    fontSize: tokens.fontSizeBase400,
+    fontWeight: tokens.fontWeightSemibold,
+  },
+  searchContainer: {
+    padding: '8px 16px',
+    borderBottom: `1px solid ${tokens.colorNeutralStroke1}`,
+  },
+  listContainer: {
+    flex: '1',
+    overflow: 'auto',
+  },
+  listItem: {
+    padding: '10px 16px',
+    cursor: 'pointer',
+    borderBottom: `1px solid ${tokens.colorNeutralStroke1}`,
+    '&:hover': {
+      backgroundColor: tokens.colorNeutralBackground1Hover,
+    },
+  },
+  listItemSelected: {
+    backgroundColor: tokens.colorNeutralBackground1Selected,
+  },
+  runName: {
+    fontSize: tokens.fontSizeBase300,
+    fontWeight: tokens.fontWeightSemibold,
+  },
+  runTiming: {
+    fontSize: tokens.fontSizeBase200,
+    color: tokens.colorNeutralForeground2,
+    marginTop: '2px',
+  },
+  emptyState: {
+    flex: '1',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    color: tokens.colorNeutralForeground2,
+    padding: '32px',
+    textAlign: 'center',
+  },
+  emptyTitle: {
+    fontSize: tokens.fontSizeBase300,
+    fontWeight: tokens.fontWeightSemibold,
+    margin: '0 0 4px 0',
+  },
+  emptySubtext: {
+    fontSize: tokens.fontSizeBase200,
+    margin: '0',
+    opacity: 0.7,
+  },
+  loadingContainer: {
+    display: 'flex',
+    justifyContent: 'center',
+    padding: '24px',
+  },
+  // Table styles for evaluators panel
+  tableHeader: {
+    display: 'flex',
+    padding: '8px 16px',
+    fontSize: tokens.fontSizeBase200,
+    color: tokens.colorNeutralForeground2,
+    fontWeight: tokens.fontWeightSemibold,
+    borderBottom: `1px solid ${tokens.colorNeutralStroke1}`,
+  },
+  tableRow: {
+    display: 'flex',
+    alignItems: 'center',
+    padding: '8px 16px',
+    cursor: 'pointer',
+    borderBottom: `1px solid ${tokens.colorNeutralStroke1}`,
+    '&:hover': {
+      backgroundColor: tokens.colorNeutralBackground1Hover,
+    },
+  },
+  tableRowSelected: {
+    backgroundColor: tokens.colorNeutralBackground1Selected,
+  },
+  colType: {
+    width: '140px',
+    flexShrink: 0,
+    fontSize: tokens.fontSizeBase200,
+  },
+  colName: {
+    flex: '1',
+    fontSize: tokens.fontSizeBase300,
+    fontWeight: tokens.fontWeightSemibold,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+  },
+  colActions: {
+    display: 'flex',
+    gap: '4px',
+    flexShrink: 0,
+  },
+  colResult: {
+    width: '70px',
+    flexShrink: 0,
+    fontSize: tokens.fontSizeBase200,
+    fontWeight: tokens.fontWeightSemibold,
+  },
+  // Agent actions list
+  actionItem: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '12px',
+    padding: '10px 16px',
+    cursor: 'pointer',
+    borderBottom: `1px solid ${tokens.colorNeutralStroke1}`,
+    '&:hover': {
+      backgroundColor: tokens.colorNeutralBackground1Hover,
+    },
+  },
+  actionItemSelected: {
+    backgroundColor: tokens.colorNeutralBackground1Selected,
+  },
+  actionIndex: {
+    width: '24px',
+    height: '24px',
+    borderRadius: '50%',
+    backgroundColor: tokens.colorNeutralBackground3,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    fontSize: tokens.fontSizeBase200,
+    fontWeight: tokens.fontWeightSemibold,
+    flexShrink: 0,
+  },
+  actionDetails: {
+    flex: '1',
+    minWidth: 0,
+  },
+  actionStatus: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '6px',
+    fontSize: tokens.fontSizeBase300,
+  },
+  actionTiming: {
+    fontSize: tokens.fontSizeBase200,
+    color: tokens.colorNeutralForeground2,
+    marginTop: '2px',
+  },
+  // Form styles
+  formContent: {
+    flex: '1',
+    overflow: 'auto',
+    padding: '16px',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '16px',
+  },
+  formActions: {
+    display: 'flex',
+    justifyContent: 'flex-end',
+    gap: '8px',
+    padding: '12px 16px',
+    borderTop: `1px solid ${tokens.colorNeutralStroke1}`,
+  },
+  formError: {
+    padding: '8px 12px',
+    margin: '0 16px',
+    borderRadius: '4px',
+    backgroundColor: tokens.colorPaletteRedBackground1,
+    color: tokens.colorPaletteRedForeground1,
+    fontSize: tokens.fontSizeBase200,
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  formRow: {
+    display: 'flex',
+    gap: '12px',
+  },
+  formFieldHalf: {
+    flex: '1',
+  },
+  // Tool calls
+  toolCallItem: {
+    padding: '12px',
+    borderRadius: '6px',
+    border: `1px solid ${tokens.colorNeutralStroke1}`,
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '8px',
+  },
+  toolCallHeader: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    fontSize: tokens.fontSizeBase200,
+    fontWeight: tokens.fontWeightSemibold,
+  },
+  // View panel
+  fieldRow: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '4px',
+    padding: '8px 0',
+  },
+  fieldLabel: {
+    fontSize: tokens.fontSizeBase200,
+    color: tokens.colorNeutralForeground2,
+    fontWeight: tokens.fontWeightSemibold,
+  },
+  fieldValue: {
+    fontSize: tokens.fontSizeBase300,
+  },
+  promptValue: {
+    whiteSpace: 'pre-wrap',
+    backgroundColor: tokens.colorNeutralBackground3,
+    padding: '8px 12px',
+    borderRadius: '4px',
+    fontSize: tokens.fontSizeBase200,
+  },
+  definitionActions: {
+    display: 'flex',
+    gap: '8px',
+    paddingTop: '12px',
+  },
+  // Result panel
+  resultBadge: {
+    display: 'inline-flex',
+    padding: '4px 12px',
+    borderRadius: '12px',
+    fontWeight: tokens.fontWeightSemibold,
+    fontSize: tokens.fontSizeBase300,
+  },
+  resultPassed: {
+    backgroundColor: tokens.colorPaletteGreenBackground1,
+    color: tokens.colorPaletteGreenForeground1,
+  },
+  resultFailed: {
+    backgroundColor: tokens.colorPaletteRedBackground1,
+    color: tokens.colorPaletteRedForeground1,
+  },
+  tokenStats: {
+    display: 'flex',
+    gap: '16px',
+    padding: '12px 0',
+  },
+  tokenStat: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '2px',
+  },
+  statLabel: {
+    fontSize: tokens.fontSizeBase200,
+    color: tokens.colorNeutralForeground2,
+  },
+  statValue: {
+    fontSize: tokens.fontSizeBase400,
+    fontWeight: tokens.fontWeightSemibold,
+  },
+  resultReason: {
+    padding: '12px',
+    backgroundColor: tokens.colorNeutralBackground3,
+    borderRadius: '6px',
+    fontSize: tokens.fontSizeBase200,
+    whiteSpace: 'pre-wrap',
+  },
+  // Status indicators
+  statusSucceeded: {
+    color: tokens.colorPaletteGreenForeground1,
+  },
+  statusFailed: {
+    color: tokens.colorPaletteRedForeground1,
+  },
+  statusRunning: {
+    color: tokens.colorPaletteYellowForeground1,
+  },
+  // Tabs
+  tabContainer: {
+    display: 'flex',
+    borderBottom: `1px solid ${tokens.colorNeutralStroke1}`,
+  },
+  // Card
+  card: {
+    padding: '16px',
+    borderRadius: '8px',
+    border: `1px solid ${tokens.colorNeutralStroke1}`,
+    backgroundColor: tokens.colorNeutralBackground1,
+    marginBottom: '16px',
+  },
+  evaluationHeader: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: '12px',
+  },
+  resultSection: {
+    padding: '8px 0',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '8px',
+  },
+  detailRow: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    padding: '4px 0',
+  },
+  detailLabel: {
+    fontSize: tokens.fontSizeBase200,
+    color: tokens.colorNeutralForeground2,
+  },
+  detailValue: {
+    fontSize: tokens.fontSizeBase300,
+    fontWeight: tokens.fontWeightSemibold,
+  },
+  panelChat: {
+    width: '380px',
+    minWidth: '280px',
+    borderLeft: `1px solid ${tokens.colorNeutralStroke1}`,
+    display: 'flex',
+    flexDirection: 'column',
+    overflow: 'hidden',
+  },
+  chatPanelContainer: {
+    flex: '1',
+    overflow: 'auto',
+    display: 'flex',
+    flexDirection: 'column',
+    position: 'relative',
+  },
+});
diff --git a/libs/designer-v2/src/lib/ui/evaluation/EvaluateView.tsx b/libs/designer-v2/src/lib/ui/evaluation/EvaluateView.tsx
new file mode 100644
index 00000000000..122f525ddea
--- /dev/null
+++ b/libs/designer-v2/src/lib/ui/evaluation/EvaluateView.tsx
@@ -0,0 +1,123 @@
+import { mergeClasses } from '@fluentui/react-components';
+import { useDispatch } from 'react-redux';
+import {
+  useSelectedEvaluator,
+  useRightPanelView,
+  useSelectedRun,
+  useSelectedAction,
+} from '../../core/state/evaluation/evaluationSelectors';
+import {
+  startEditEvaluator,
+  setSelectedEvaluator,
+  setRightPanelView,
+  setEvaluationLoading,
+  setEvaluationError,
+  setEvaluationResult,
+  setRunningEvaluatorName,
+} from '../../core/state/evaluation/evaluationSlice';
+import { useRunEvaluation, useDeleteEvaluator } from '../../core/queries/evaluations';
+import { RunDatasetPanel } from './RunDatasetPanel';
+import { EvaluatorManagementPanel } from './EvaluatorManagementPanel';
+import { EvaluatorFormPanel } from './EvaluatorFormPanel';
+import { EvaluatorDetailsPanel } from './EvaluatorDetailsPanel';
+import { EvaluationResultPanel } from './EvaluationResultPanel';
+import { AgentChatPanel } from './AgentChatPanel';
+import { useEvaluateViewStyles } from './EvaluateView.styles';
+import { useCallback } from 'react';
+
+interface EvaluateViewProps {
+  workflowName: string;
+}
+
+export const EvaluateView = ({ workflowName }: EvaluateViewProps) => {
+  const styles = useEvaluateViewStyles();
+  const dispatch = useDispatch();
+  const selectedEvaluator = useSelectedEvaluator();
+  const rightPanelView = useRightPanelView();
+  const selectedRun = useSelectedRun();
+  const selectedAction = useSelectedAction();
+
+  const { mutateAsync: runEvaluation } = useRunEvaluation(workflowName, selectedAction?.name ?? '');
+  const { mutateAsync: deleteEvaluator } = useDeleteEvaluator(workflowName, selectedAction?.name ?? '');
+
+  const handleRunClick = useCallback(async () => {
+    if (!selectedRun || !selectedEvaluator) {
+      return;
+    }
+
+    dispatch(setRightPanelView('result'));
+    dispatch(setEvaluationLoading(true));
+    dispatch(setEvaluationError(null));
+    dispatch(setEvaluationResult(null));
+    dispatch(setRunningEvaluatorName(selectedEvaluator.name));
+
+    try {
+      const result = await runEvaluation({
+        runId: selectedRun.name,
+        evaluatorName: selectedEvaluator.name,
+      });
+      dispatch(setEvaluationResult(result));
+    } catch (err) {
+      dispatch(setEvaluationError(err instanceof Error ? err.message : 'Failed to run evaluation'));
+    } finally {
+      dispatch(setEvaluationLoading(false));
+    }
+  }, [dispatch, selectedRun, selectedEvaluator, runEvaluation]);
+
+  const handleDeleteClick = useCallback(async () => {
+    if (!selectedEvaluator) {
+      return;
+    }
+    try {
+      await deleteEvaluator(selectedEvaluator.name);
+      dispatch(setSelectedEvaluator(null));
+    } catch (err) {
+      console.error('Failed to delete evaluator:', err);
+    }
+  }, [deleteEvaluator, dispatch, selectedEvaluator]);
+
+  const renderRightPanel = () => {
+    switch (rightPanelView) {
+      case 'create':
+      case 'edit':
+        return <EvaluatorFormPanel workflowName={workflowName} />;
+      case 'view':
+        return selectedEvaluator ? (
+          <EvaluatorDetailsPanel
+            workflowName={workflowName}
+            evaluator={selectedEvaluator}
+            onEdit={() => dispatch(startEditEvaluator(selectedEvaluator))}
+            onRun={handleRunClick}
+            onDelete={handleDeleteClick}
+          />
+        ) : null;
+      case 'result':
+        return <EvaluationResultPanel />;
+      default:
+        return (
+          <div className={styles.emptyState}>
+            <p className={styles.emptyTitle}>Select an action to get started</p>
+            <p className={styles.emptySubtext}>Create a new evaluator or select one to view</p>
+          </div>
+        );
+    }
+  };
+
+  return (
+    <div className={styles.root}>
+      <div className={styles.main}>
+        <RunDatasetPanel />
+        <EvaluatorManagementPanel workflowName={workflowName} />
+        <div className={mergeClasses(styles.panel, styles.panelDetail)}>{renderRightPanel()}</div>
+        {selectedRun && (
+          <div className={styles.panelChat}>
+            <div className={styles.panelHeader}>
+              <h2 className={styles.panelTitle}>Chat History</h2>
+            </div>
+            <AgentChatPanel />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
diff --git a/libs/designer-v2/src/lib/ui/evaluation/EvaluationResultPanel.tsx b/libs/designer-v2/src/lib/ui/evaluation/EvaluationResultPanel.tsx
new file mode 100644
index 00000000000..e81f77c4b0f
--- /dev/null
+++ b/libs/designer-v2/src/lib/ui/evaluation/EvaluationResultPanel.tsx
@@ -0,0 +1,108 @@
+import { mergeClasses, Spinner } from '@fluentui/react-components';
+import {
+  useEvaluationResult,
+  useEvaluationLoading,
+  useEvaluationError,
+  useRunningEvaluatorName,
+} from '../../core/state/evaluation/evaluationSelectors';
+import { useEvaluateViewStyles } from './EvaluateView.styles';
+
+export const EvaluationResultPanel = () => {
+  const styles = useEvaluateViewStyles();
+  const result = useEvaluationResult();
+  const loading = useEvaluationLoading();
+  const error = useEvaluationError();
+  const evaluatorName = useRunningEvaluatorName();
+
+  if (loading) {
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
+        <div className={styles.loadingContainer} style={{ flex: 1, alignItems: 'center' }}>
+          <Spinner size="medium" label="Running evaluation..." />
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
+        <div className={styles.panelHeader}>
+          <div>
+            <h2 className={styles.panelTitle}>Evaluation Result</h2>
+            <p style={{ margin: '4px 0 0', fontSize: '12px', color: 'var(--colorNeutralForeground2)' }}>Evaluator: {evaluatorName}</p>
+          </div>
+        </div>
+        <div className={styles.formContent}>
+          <div className={styles.formError}>
+            <span>{error}</span>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (!result) {
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
+        <div className={styles.emptyState}>
+          <p className={styles.emptyTitle}>No evaluation result</p>
+        </div>
+      </div>
+    );
+  }
+
+  const isPassed = result.result?.toLowerCase() === 'passed';
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
+      <div className={styles.panelHeader}>
+        <div>
+          <h2 className={styles.panelTitle}>Evaluation Result</h2>
+          <p style={{ margin: '4px 0 0', fontSize: '12px', color: 'var(--colorNeutralForeground2)' }}>Evaluator: {evaluatorName}</p>
+        </div>
+      </div>
+
+      <div className={styles.formContent}>
+        <div className={styles.card}>
+          <div style={{ display: 'flex', alignItems: 'center', gap: '12px', marginBottom: '12px' }}>
+            <span className={mergeClasses(styles.resultBadge, isPassed ? styles.resultPassed : styles.resultFailed)}>{result.result}</span>
+            <span>
+              <span className={styles.fieldLabel}>Value: </span>
+              <span className={styles.fieldValue}>{result.value}</span>
+            </span>
+          </div>
+
+          {result.agentActionName && (
+            <div className={styles.detailRow}>
+              <span className={styles.detailLabel}>Agent Action</span>
+              <span className={styles.detailValue}>{result.agentActionName}</span>
+            </div>
+          )}
+
+          {result.reason && (
+            <div style={{ marginTop: '8px' }}>
+              <span className={styles.fieldLabel}>Reason</span>
+              <div className={styles.resultReason}>{result.reason}</div>
+            </div>
+          )}
+
+          <div className={styles.tokenStats}>
+            <div className={styles.tokenStat}>
+              <span className={styles.statLabel}>Total Tokens</span>
+              <span className={styles.statValue}>{result.totalTokens}</span>
+            </div>
+            <div className={styles.tokenStat}>
+              <span className={styles.statLabel}>Input Tokens</span>
+              <span className={styles.statValue}>{result.inputTokens}</span>
+            </div>
+            <div className={styles.tokenStat}>
+              <span className={styles.statLabel}>Output Tokens</span>
+              <span className={styles.statValue}>{result.outputTokens}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/libs/designer-v2/src/lib/ui/evaluation/EvaluatorDetailsPanel.tsx b/libs/designer-v2/src/lib/ui/evaluation/EvaluatorDetailsPanel.tsx
new file mode 100644
index 00000000000..e8d33809ec8
--- /dev/null
+++ b/libs/designer-v2/src/lib/ui/evaluation/EvaluatorDetailsPanel.tsx
@@ -0,0 +1,247 @@
+import { Button, mergeClasses, Spinner, Tooltip } from '@fluentui/react-components';
+import { EditRegular, PlayRegular, DeleteRegular } from '@fluentui/react-icons';
+import type { Evaluator } from '@microsoft/logic-apps-shared';
+import { useSelectedRun, useSelectedAction, useCanRunEvaluation } from '../../core/state/evaluation/evaluationSelectors';
+import { useEvaluation } from '../../core/queries/evaluations';
+import { useEvaluateViewStyles } from './EvaluateView.styles';
+
+interface EvaluatorDetailsPanelProps {
+  workflowName: string;
+  evaluator: Evaluator;
+  onEdit: () => void;
+  onRun: () => void;
+  onDelete: () => void;
+}
+
+export const EvaluatorDetailsPanel = ({ workflowName, evaluator, onEdit, onRun, onDelete }: EvaluatorDetailsPanelProps) => {
+  const styles = useEvaluateViewStyles();
+  const selectedRun = useSelectedRun();
+  const selectedAction = useSelectedAction();
+  const canRun = useCanRunEvaluation();
+
+  const { data: evaluation, isLoading: isEvaluationLoading } = useEvaluation(
+    workflowName,
+    selectedRun?.name ?? '',
+    selectedAction?.name ?? '',
+    evaluator.name
+  );
+  const isEvalPassed = evaluation?.result?.toLowerCase() === 'passed';
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
+      <div className={styles.panelHeader}>
+        <div>
+          <h2 className={styles.panelTitle}>Evaluator Details</h2>
+          <p style={{ margin: '4px 0 0', fontSize: '12px', color: 'var(--colorNeutralForeground2)' }}>{evaluator.name}</p>
+        </div>
+      </div>
+
+      <div className={styles.formContent}>
+        {/* Evaluator Definition */}
+        <div className={styles.card}>
+          <div className={styles.fieldRow}>
+            <span className={styles.fieldLabel}>Evaluator name</span>
+            <span className={styles.fieldValue}>{evaluator.name}</span>
+          </div>
+
+          <div className={styles.fieldRow}>
+            <span className={styles.fieldLabel}>Template</span>
+            <span className={styles.fieldValue}>{evaluator.template === 'CustomPrompt' ? 'Custom Prompt' : evaluator.template}</span>
+          </div>
+
+          {evaluator.template !== 'ToolCallTrajectory' && (
+            <>
+              {evaluator.deploymentId && (
+                <div className={styles.fieldRow}>
+                  <span className={styles.fieldLabel}>Deployment ID</span>
+                  <span className={styles.fieldValue}>{evaluator.deploymentId}</span>
+                </div>
+              )}
+
+              {evaluator.agentModelType && (
+                <div className={styles.fieldRow}>
+                  <span className={styles.fieldLabel}>Agent model type</span>
+                  <span className={styles.fieldValue}>{evaluator.agentModelType}</span>
+                </div>
+              )}
+
+              {evaluator.modelConfiguration?.referenceName && (
+                <div className={styles.fieldRow}>
+                  <span className={styles.fieldLabel}>Model connection reference</span>
+                  <span className={styles.fieldValue}>{evaluator.modelConfiguration.referenceName}</span>
+                </div>
+              )}
+
+              {evaluator.agentModelSettings?.deploymentModelProperties?.name && (
+                <div className={styles.fieldRow}>
+                  <span className={styles.fieldLabel}>Deployment model name</span>
+                  <span className={styles.fieldValue}>{evaluator.agentModelSettings.deploymentModelProperties.name}</span>
+                </div>
+              )}
+            </>
+          )}
+
+          {evaluator.groundTruthRunId && (
+            <div className={styles.fieldRow}>
+              <span className={styles.fieldLabel}>Ground truth run ID</span>
+              <span className={styles.fieldValue}>{evaluator.groundTruthRunId}</span>
+            </div>
+          )}
+
+          {evaluator.groundTruthAgentActionName && (
+            <div className={styles.fieldRow}>
+              <span className={styles.fieldLabel}>Ground truth agent action</span>
+              <span className={styles.fieldValue}>{evaluator.groundTruthAgentActionName}</span>
+            </div>
+          )}
+
+          {/* Template-specific parameters */}
+          {evaluator.template === 'CustomPrompt' && evaluator.parameters.prompt && (
+            <div className={styles.fieldRow}>
+              <span className={styles.fieldLabel}>Instructions</span>
+              <div className={styles.promptValue}>{evaluator.parameters.prompt}</div>
+            </div>
+          )}
+
+          {evaluator.template === 'ToolCallTrajectory' && (
+            <>
+              {evaluator.parameters.expectedToolCalls && evaluator.parameters.expectedToolCalls.length > 0 && (
+                <div className={styles.fieldRow}>
+                  <span className={styles.fieldLabel}>Expected Tool Calls</span>
+                  <div style={{ display: 'flex', flexDirection: 'column', gap: '8px', marginTop: '4px' }}>
+                    {evaluator.parameters.expectedToolCalls.map((tc, idx) => (
+                      <div key={idx} className={styles.toolCallItem}>
+                        <div className={styles.toolCallHeader}>
+                          <span>{tc.name}</span>
+                        </div>
+                        {tc.arguments && Object.keys(tc.arguments).length > 0 && (
+                          <pre style={{ margin: 0, fontSize: '12px', whiteSpace: 'pre-wrap' }}>{JSON.stringify(tc.arguments, null, 2)}</pre>
+                        )}
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              )}
+
+              {evaluator.parameters.comparisonMethod && (
+                <div className={styles.fieldRow}>
+                  <span className={styles.fieldLabel}>Comparison method</span>
+                  <span className={styles.fieldValue}>{evaluator.parameters.comparisonMethod}</span>
+                </div>
+              )}
+
+              {evaluator.parameters.threshold !== undefined && (
+                <div className={styles.fieldRow}>
+                  <span className={styles.fieldLabel}>Threshold</span>
+                  <span className={styles.fieldValue}>{evaluator.parameters.threshold}</span>
+                </div>
+              )}
+
+              <div className={styles.fieldRow}>
+                <span className={styles.fieldLabel}>Compare arguments</span>
+                <span className={styles.fieldValue}>{evaluator.parameters.shouldCompareArgs ? 'Yes' : 'No'}</span>
+              </div>
+            </>
+          )}
+
+          {evaluator.template === 'SemanticSimilarity' && evaluator.parameters.expectedChatResponse && (
+            <div className={styles.fieldRow}>
+              <span className={styles.fieldLabel}>Expected Chat Response</span>
+              <div className={styles.promptValue}>{evaluator.parameters.expectedChatResponse}</div>
+            </div>
+          )}
+
+          <div className={styles.definitionActions}>
+            <Tooltip content="Edit evaluator" relationship="label">
+              <Button appearance="secondary" icon={<EditRegular />} onClick={onEdit}>
+                Edit
+              </Button>
+            </Tooltip>
+            <Tooltip content={canRun ? 'Run evaluation' : 'Select a run first'} relationship="label">
+              <Button appearance="primary" icon={<PlayRegular />} onClick={onRun} disabled={!canRun}>
+                Run
+              </Button>
+            </Tooltip>
+            <Tooltip content="Delete evaluator" relationship="label">
+              <Button appearance="subtle" icon={<DeleteRegular />} onClick={onDelete}>
+                Delete
+              </Button>
+            </Tooltip>
+          </div>
+        </div>
+
+        {/* Last Evaluation Result */}
+        {selectedRun && (
+          <div className={styles.card}>
+            {isEvaluationLoading ? (
+              <div className={styles.loadingContainer}>
+                <Spinner size="small" label="Loading evaluation..." />
+              </div>
+            ) : evaluation ? (
+              <>
+                <div className={styles.evaluationHeader}>
+                  <span className={styles.panelTitle}>Last Evaluation</span>
+                  <span className={mergeClasses(styles.resultBadge, isEvalPassed ? styles.resultPassed : styles.resultFailed)}>
+                    {evaluation.result}
+                  </span>
+                </div>
+
+                <div className={styles.resultSection}>
+                  <div className={styles.detailRow}>
+                    <span className={styles.detailLabel}>Status</span>
+                    <span className={mergeClasses(styles.detailValue, isEvalPassed ? styles.statusSucceeded : styles.statusFailed)}>
+                      {evaluation.result}
+                    </span>
+                  </div>
+                  <div className={styles.detailRow}>
+                    <span className={styles.detailLabel}>Value</span>
+                    <span className={styles.detailValue}>{evaluation.value}</span>
+                  </div>
+                  {evaluation.agentActionName && (
+                    <div className={styles.detailRow}>
+                      <span className={styles.detailLabel}>Agent Action</span>
+                      <span className={styles.detailValue}>{evaluation.agentActionName}</span>
+                    </div>
+                  )}
+                </div>
+
+                {evaluation.reason && (
+                  <div style={{ marginTop: '8px' }}>
+                    <span className={styles.fieldLabel}>Reason</span>
+                    <div className={styles.resultReason}>{evaluation.reason}</div>
+                  </div>
+                )}
+
+                <div className={styles.tokenStats}>
+                  <div className={styles.tokenStat}>
+                    <span className={styles.statLabel}>Total Tokens</span>
+                    <span className={styles.statValue}>{evaluation.totalTokens}</span>
+                  </div>
+                  <div className={styles.tokenStat}>
+                    <span className={styles.statLabel}>Input Tokens</span>
+                    <span className={styles.statValue}>{evaluation.inputTokens}</span>
+                  </div>
+                  <div className={styles.tokenStat}>
+                    <span className={styles.statLabel}>Output Tokens</span>
+                    <span className={styles.statValue}>{evaluation.outputTokens}</span>
+                  </div>
+                </div>
+              </>
+            ) : (
+              <div className={styles.emptyState}>
+                <p className={styles.emptyTitle}>No evaluation results for this run</p>
+                <p className={styles.emptySubtext}>Click Run to evaluate</p>
+              </div>
+            )}
+          </div>
+        )}
+
+        {!selectedRun && (
+          <div className={styles.emptyState}>
+            <p className={styles.emptyTitle}>Select a run to view evaluation results</p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
diff --git a/libs/designer-v2/src/lib/ui/evaluation/EvaluatorFormPanel.tsx b/libs/designer-v2/src/lib/ui/evaluation/EvaluatorFormPanel.tsx
new file mode 100644
index 00000000000..7e75f880998
--- /dev/null
+++ b/libs/designer-v2/src/lib/ui/evaluation/EvaluatorFormPanel.tsx
@@ -0,0 +1,356 @@
+import { useState, useEffect, useCallback } from 'react';
+import { Button, Dropdown, Input, Label, Option, Radio, RadioGroup, Checkbox, Textarea, Spinner } from '@fluentui/react-components';
+import { DeleteRegular, AddRegular, SaveRegular } from '@fluentui/react-icons';
+import { useDispatch } from 'react-redux';
+import { finishFormAction, cancelFormAction } from '../../core/state/evaluation/evaluationSlice';
+import { useEditingEvaluator, useRightPanelView, useSelectedAction } from '../../core/state/evaluation/evaluationSelectors';
+import { useCreateOrUpdateEvaluator } from '../../core/queries/evaluations';
+import type { EvaluatorTemplate, ComparisonMethod } from '@microsoft/logic-apps-shared';
+import type { EvaluatorFormData } from './evaluatorFormHelpers';
+import {
+  createDefaultEvaluatorFormData,
+  evaluatorToFormData,
+  formDataToEvaluator,
+  createDefaultToolCallFormItem,
+} from './evaluatorFormHelpers';
+import { useEvaluateViewStyles } from './EvaluateView.styles';
+
+interface EvaluatorFormPanelProps {
+  workflowName: string;
+}
+
+export const EvaluatorFormPanel = ({ workflowName }: EvaluatorFormPanelProps) => {
+  const styles = useEvaluateViewStyles();
+  const dispatch = useDispatch();
+  const rightPanelView = useRightPanelView();
+  const editingEvaluator = useEditingEvaluator();
+  const mode = rightPanelView === 'edit' ? 'edit' : 'create';
+  const selectedAction = useSelectedAction();
+  const { mutateAsync: createOrUpdateEvaluator, isLoading: isModifyingEvaluator } = useCreateOrUpdateEvaluator(
+    workflowName,
+    selectedAction?.name ?? ''
+  );
+
+  const [formData, setFormData] = useState<EvaluatorFormData>(createDefaultEvaluatorFormData());
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (mode === 'edit' && editingEvaluator) {
+      setFormData(evaluatorToFormData(editingEvaluator));
+    } else {
+      setFormData(createDefaultEvaluatorFormData());
+    }
+  }, [mode, editingEvaluator]);
+
+  const updateFormField = useCallback(<K extends keyof EvaluatorFormData>(field: K, value: EvaluatorFormData[K]) => {
+    setFormData((prev) => ({ ...prev, [field]: value }));
+  }, []);
+
+  const handleSubmit = useCallback(async () => {
+    if (!formData.name.trim()) {
+      setError('Evaluator name is required');
+      return;
+    }
+
+    setError(null);
+    try {
+      const evalData = formDataToEvaluator(formData);
+      await createOrUpdateEvaluator({ evaluatorName: formData.name, evaluator: evalData });
+      dispatch(finishFormAction());
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to save evaluator');
+    }
+  }, [formData, createOrUpdateEvaluator, dispatch]);
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
+      <div className={styles.panelHeader}>
+        <div>
+          <h2 className={styles.panelTitle}>{mode === 'create' ? 'Create Evaluator' : 'Edit Evaluator'}</h2>
+          <p style={{ margin: '4px 0 0', fontSize: '12px', color: 'var(--colorNeutralForeground2)' }}>
+            {mode === 'create' ? 'Configure a new evaluator for your agent' : 'Update evaluator configuration'}
+          </p>
+        </div>
+      </div>
+
+      {error && (
+        <div className={styles.formError}>
+          <span>{error}</span>
+          <Button appearance="subtle" size="small" onClick={() => setError(null)}>
+            ×
+          </Button>
+        </div>
+      )}
+
+      <div className={styles.formContent}>
+        <div>
+          <Label htmlFor="evaluator-name">Name</Label>
+          <Input
+            id="evaluator-name"
+            value={formData.name}
+            onChange={(_e, data) => updateFormField('name', data.value)}
+            placeholder="Enter evaluator name"
+            disabled={mode === 'edit'}
+            style={{ width: '100%' }}
+          />
+        </div>
+
+        <div>
+          <Label htmlFor="evaluator-template">Template</Label>
+          <Dropdown
+            id="evaluator-template"
+            value={
+              formData.template === 'CustomPrompt'
+                ? 'Custom Prompt'
+                : formData.template === 'ToolCallTrajectory'
+                  ? 'Tool Call Trajectory'
+                  : 'Semantic Similarity'
+            }
+            selectedOptions={[formData.template]}
+            onOptionSelect={(_e, data) => updateFormField('template', data.optionValue as EvaluatorTemplate)}
+            style={{ width: '100%' }}
+          >
+            <Option value="CustomPrompt">Custom Prompt</Option>
+            <Option value="ToolCallTrajectory">Tool Call Trajectory</Option>
+            <Option value="SemanticSimilarity">Semantic Similarity</Option>
+          </Dropdown>
+        </div>
+
+        {/* Model configuration - not needed for ToolCallTrajectory */}
+        {formData.template !== 'ToolCallTrajectory' && (
+          <>
+            <div>
+              <Label htmlFor="agent-model-type">Agent model type</Label>
+              <Dropdown
+                id="agent-model-type"
+                value={formData.agentModelType}
+                selectedOptions={[formData.agentModelType]}
+                onOptionSelect={(_e, data) => updateFormField('agentModelType', data.optionValue as string)}
+                style={{ width: '100%' }}
+              >
+                <Option value="AzureOpenAI">AzureOpenAI</Option>
+                <Option value="FoundryAgentService">FoundryAgentService</Option>
+              </Dropdown>
+            </div>
+
+            <div>
+              <Label htmlFor="deployment-id">Deployment ID (optional)</Label>
+              <Input
+                id="deployment-id"
+                value={formData.deploymentId}
+                onChange={(_e, data) => updateFormField('deploymentId', data.value)}
+                placeholder="Enter deployment identifier"
+                style={{ width: '100%' }}
+              />
+            </div>
+
+            <div>
+              <Label htmlFor="model-ref">Model connection reference (optional)</Label>
+              <Input
+                id="model-ref"
+                value={formData.modelReferenceName}
+                onChange={(_e, data) => updateFormField('modelReferenceName', data.value)}
+                placeholder="Enter model connection reference name"
+                style={{ width: '100%' }}
+              />
+            </div>
+
+            <div>
+              <Label htmlFor="model-name">Deployment model name (optional)</Label>
+              <Input
+                id="model-name"
+                value={formData.modelName}
+                onChange={(_e, data) => updateFormField('modelName', data.value)}
+                placeholder="Enter deployment model name"
+                style={{ width: '100%' }}
+              />
+            </div>
+          </>
+        )}
+
+        {/* Ground truth fields */}
+        {(formData.template === 'ToolCallTrajectory' || formData.template === 'SemanticSimilarity') && (
+          <>
+            <RadioGroup
+              value={formData.useGroundTruthRun ? 'groundTruth' : 'manual'}
+              onChange={(_e, data) => updateFormField('useGroundTruthRun', data.value === 'groundTruth')}
+            >
+              <Radio
+                value="manual"
+                label={formData.template === 'ToolCallTrajectory' ? 'Provide expected tool calls' : 'Provide expected response'}
+              />
+              <Radio value="groundTruth" label="Use ground truth run" />
+            </RadioGroup>
+
+            {formData.useGroundTruthRun && (
+              <>
+                <div>
+                  <Label htmlFor="ground-truth-run">Ground truth run ID</Label>
+                  <Input
+                    id="ground-truth-run"
+                    value={formData.groundTruthRunId}
+                    onChange={(_e, data) => updateFormField('groundTruthRunId', data.value)}
+                    placeholder="Enter ground truth run identifier"
+                    style={{ width: '100%' }}
+                  />
+                </div>
+                <div>
+                  <Label htmlFor="ground-truth-action">Ground truth agent action (optional)</Label>
+                  <Input
+                    id="ground-truth-action"
+                    value={formData.groundTruthAgentActionName}
+                    onChange={(_e, data) => updateFormField('groundTruthAgentActionName', data.value)}
+                    placeholder="Enter ground truth agent action name"
+                    style={{ width: '100%' }}
+                  />
+                </div>
+              </>
+            )}
+          </>
+        )}
+
+        {/* CustomPrompt: Instructions */}
+        {formData.template === 'CustomPrompt' && (
+          <div>
+            <Label htmlFor="prompt">Instructions</Label>
+            <Textarea
+              id="prompt"
+              value={formData.prompt}
+              onChange={(_e, data) => updateFormField('prompt', data.value)}
+              placeholder="Enter evaluation instructions"
+              rows={4}
+              style={{ width: '100%' }}
+            />
+          </div>
+        )}
+
+        {/* ToolCallTrajectory: Expected Tool Calls */}
+        {formData.template === 'ToolCallTrajectory' && !formData.useGroundTruthRun && (
+          <div>
+            <Label>Expected Tool Calls</Label>
+            <div style={{ display: 'flex', flexDirection: 'column', gap: '12px', marginTop: '8px' }}>
+              {formData.expectedToolCalls.map((toolCall, index) => (
+                <div key={index} className={styles.toolCallItem}>
+                  <div className={styles.toolCallHeader}>
+                    <span>Tool Call #{index + 1}</span>
+                    <Button
+                      appearance="subtle"
+                      icon={<DeleteRegular />}
+                      size="small"
+                      onClick={() => {
+                        const newToolCalls = formData.expectedToolCalls.filter((_, i) => i !== index);
+                        updateFormField('expectedToolCalls', newToolCalls);
+                      }}
+                    />
+                  </div>
+                  <Input
+                    value={toolCall.name}
+                    onChange={(_e, data) => {
+                      const newToolCalls = [...formData.expectedToolCalls];
+                      newToolCalls[index] = { ...toolCall, name: data.value };
+                      updateFormField('expectedToolCalls', newToolCalls);
+                    }}
+                    placeholder="Tool name"
+                    size="small"
+                    style={{ width: '100%' }}
+                  />
+                  <Textarea
+                    value={toolCall.arguments}
+                    onChange={(_e, data) => {
+                      const newToolCalls = [...formData.expectedToolCalls];
+                      newToolCalls[index] = { ...toolCall, arguments: data.value };
+                      updateFormField('expectedToolCalls', newToolCalls);
+                    }}
+                    placeholder='Arguments (JSON): {"key": "value"}'
+                    rows={2}
+                    size="small"
+                    style={{ width: '100%' }}
+                  />
+                </div>
+              ))}
+              <Button
+                appearance="subtle"
+                icon={<AddRegular />}
+                size="small"
+                onClick={() => {
+                  updateFormField('expectedToolCalls', [...formData.expectedToolCalls, createDefaultToolCallFormItem()]);
+                }}
+              >
+                Add Tool Call
+              </Button>
+            </div>
+          </div>
+        )}
+
+        {/* ToolCallTrajectory: Optional settings */}
+        {formData.template === 'ToolCallTrajectory' && (
+          <>
+            <div className={styles.formRow}>
+              <div className={styles.formFieldHalf}>
+                <Label htmlFor="threshold">Threshold (optional)</Label>
+                <Input
+                  id="threshold"
+                  type="number"
+                  value={formData.threshold}
+                  onChange={(_e, data) => updateFormField('threshold', data.value)}
+                  placeholder="e.g., 0.8"
+                  style={{ width: '100%' }}
+                />
+              </div>
+              <div className={styles.formFieldHalf}>
+                <Label htmlFor="comparison">Comparison Method</Label>
+                <Dropdown
+                  id="comparison"
+                  value={formData.comparisonMethod}
+                  selectedOptions={[formData.comparisonMethod]}
+                  onOptionSelect={(_e, data) => updateFormField('comparisonMethod', data.optionValue as ComparisonMethod)}
+                  style={{ width: '100%' }}
+                >
+                  <Option value="exact">Exact</Option>
+                  <Option value="in-order">In-order</Option>
+                  <Option value="any-order">Any-order</Option>
+                  <Option value="precision">Precision</Option>
+                  <Option value="recall">Recall</Option>
+                </Dropdown>
+              </div>
+            </div>
+            <Checkbox
+              checked={formData.shouldCompareArgs}
+              onChange={(_e, data) => updateFormField('shouldCompareArgs', !!data.checked)}
+              label="Compare Arguments"
+            />
+          </>
+        )}
+
+        {/* SemanticSimilarity: Expected response */}
+        {formData.template === 'SemanticSimilarity' && !formData.useGroundTruthRun && (
+          <div>
+            <Label htmlFor="expected-response">Expected Chat Response</Label>
+            <Textarea
+              id="expected-response"
+              value={formData.expectedChatResponse}
+              onChange={(_e, data) => updateFormField('expectedChatResponse', data.value)}
+              placeholder="Enter the expected chat response"
+              rows={4}
+              style={{ width: '100%' }}
+            />
+          </div>
+        )}
+      </div>
+
+      <div className={styles.formActions}>
+        <Button appearance="secondary" onClick={() => dispatch(cancelFormAction())}>
+          Cancel
+        </Button>
+        <Button
+          appearance="primary"
+          icon={isModifyingEvaluator ? <Spinner size="extra-tiny" /> : <SaveRegular />}
+          onClick={handleSubmit}
+          disabled={isModifyingEvaluator}
+        >
+          Save
+        </Button>
+      </div>
+    </div>
+  );
+};
diff --git a/libs/designer-v2/src/lib/ui/evaluation/EvaluatorManagementPanel.tsx b/libs/designer-v2/src/lib/ui/evaluation/EvaluatorManagementPanel.tsx
new file mode 100644
index 00000000000..85bccf19fa6
--- /dev/null
+++ b/libs/designer-v2/src/lib/ui/evaluation/EvaluatorManagementPanel.tsx
@@ -0,0 +1,230 @@
+import { useCallback, useEffect, useMemo } from 'react';
+import { Button, Input, mergeClasses, Spinner, Tooltip } from '@fluentui/react-components';
+import { AddRegular, EditRegular, PlayRegular, DeleteRegular } from '@fluentui/react-icons';
+import { useDispatch } from 'react-redux';
+import {
+  setEvaluators,
+  setEvaluatorsLoading,
+  setSelectedEvaluator,
+  startCreateEvaluator,
+  startEditEvaluator,
+  setSearchQuery,
+  setRightPanelView,
+  setEvaluationLoading,
+  setEvaluationError,
+  setEvaluationResult,
+  setRunningEvaluatorName,
+} from '../../core/state/evaluation/evaluationSlice';
+import {
+  useFilteredEvaluators,
+  useEvaluatorsLoading,
+  useSelectedEvaluator,
+  useSearchQuery,
+  useCanRunEvaluation,
+  useSelectedRun,
+  useSelectedAction,
+} from '../../core/state/evaluation/evaluationSelectors';
+import { useEvaluators, useRunEvaluation, useDeleteEvaluator, useEvaluations } from '../../core/queries/evaluations';
+import type { Evaluator, EvaluationResult } from '@microsoft/logic-apps-shared';
+import { useEvaluateViewStyles } from './EvaluateView.styles';
+
+interface EvaluatorManagementPanelProps {
+  workflowName: string;
+}
+
+export const EvaluatorManagementPanel = ({ workflowName }: EvaluatorManagementPanelProps) => {
+  const styles = useEvaluateViewStyles();
+  const dispatch = useDispatch();
+  const filteredEvaluators = useFilteredEvaluators();
+  const evaluatorsLoading = useEvaluatorsLoading();
+  const selectedEvaluator = useSelectedEvaluator();
+  const searchQuery = useSearchQuery();
+  const canRun = useCanRunEvaluation();
+  const selectedRun = useSelectedRun();
+  const selectedAction = useSelectedAction();
+
+  const { data: evaluators, isLoading: isEvaluatorsLoading } = useEvaluators(workflowName, selectedAction?.name ?? '');
+  const { mutateAsync: deleteEvaluator } = useDeleteEvaluator(workflowName, selectedAction?.name ?? '');
+  const { mutateAsync: runEvaluation } = useRunEvaluation(workflowName, selectedAction?.name ?? '');
+  const { data: evaluations } = useEvaluations(workflowName, selectedRun?.name ?? '', selectedAction?.name ?? '');
+
+  const evaluationsByName = useMemo(() => {
+    const map = new Map<string, EvaluationResult>();
+    if (evaluations) {
+      for (const result of evaluations) {
+        if (result.evaluatorName) {
+          map.set(result.evaluatorName, result);
+        }
+      }
+    }
+    return map;
+  }, [evaluations]);
+
+  useEffect(() => {
+    dispatch(setEvaluatorsLoading(isEvaluatorsLoading));
+    if (evaluators) {
+      dispatch(setEvaluators(Array.isArray(evaluators) ? evaluators : []));
+    }
+  }, [evaluators, isEvaluatorsLoading, dispatch]);
+
+  const handleSelectEvaluator = useCallback(
+    (evaluator: Evaluator) => {
+      dispatch(setSelectedEvaluator(selectedEvaluator?.name === evaluator.name ? null : evaluator));
+    },
+    [dispatch, selectedEvaluator]
+  );
+
+  const handleRunClick = useCallback(
+    async (evaluator: Evaluator) => {
+      if (!selectedRun) {
+        return;
+      }
+      dispatch(setRightPanelView('result'));
+      dispatch(setEvaluationLoading(true));
+      dispatch(setEvaluationError(null));
+      dispatch(setEvaluationResult(null));
+      dispatch(setRunningEvaluatorName(evaluator.name));
+
+      try {
+        const result = await runEvaluation({
+          runId: selectedRun.name,
+          evaluatorName: evaluator.name,
+        });
+        dispatch(setEvaluationResult(result));
+      } catch (err) {
+        dispatch(setEvaluationError(err instanceof Error ? err.message : 'Failed to run evaluation'));
+      } finally {
+        dispatch(setEvaluationLoading(false));
+      }
+    },
+    [dispatch, selectedRun, runEvaluation]
+  );
+
+  const handleDeleteClick = useCallback(
+    async (evaluator: Evaluator) => {
+      try {
+        await deleteEvaluator(evaluator.name);
+        if (selectedEvaluator?.name === evaluator.name) {
+          dispatch(setSelectedEvaluator(null));
+        }
+      } catch (err) {
+        console.error('Failed to delete evaluator:', err);
+      }
+    },
+    [deleteEvaluator, dispatch, selectedEvaluator]
+  );
+
+  return (
+    <div className={mergeClasses(styles.panel, styles.panelEvaluators)}>
+      <div className={styles.panelHeader}>
+        <h2 className={styles.panelTitle}>Evaluators</h2>
+        <Button
+          appearance="primary"
+          icon={<AddRegular />}
+          size="small"
+          onClick={() => dispatch(startCreateEvaluator())}
+          disabled={!workflowName.trim()}
+        >
+          Create
+        </Button>
+      </div>
+
+      <div className={styles.searchContainer}>
+        <Input
+          placeholder="Search or filter items by..."
+          value={searchQuery}
+          onChange={(_e, data) => dispatch(setSearchQuery(data.value))}
+          size="small"
+          style={{ width: '100%' }}
+        />
+      </div>
+
+      <div className={styles.tableHeader}>
+        <div className={styles.colType}>Type</div>
+        <div className={styles.colName}>Name</div>
+        <div className={styles.colResult}>Result</div>
+        <div className={styles.colActions} />
+      </div>
+
+      {evaluatorsLoading || isEvaluatorsLoading ? (
+        <div className={styles.loadingContainer}>
+          <Spinner size="small" label="Loading..." />
+        </div>
+      ) : workflowName.trim() ? (
+        filteredEvaluators.length === 0 ? (
+          <div className={styles.emptyState}>
+            <p className={styles.emptyTitle}>No evaluators yet</p>
+            <p className={styles.emptySubtext}>Click Create to add your first evaluator</p>
+          </div>
+        ) : (
+          <div className={styles.listContainer}>
+            {filteredEvaluators.map((evaluator) => (
+              <div
+                key={evaluator.name}
+                className={mergeClasses(styles.tableRow, selectedEvaluator?.name === evaluator.name && styles.tableRowSelected)}
+                onClick={() => handleSelectEvaluator(evaluator)}
+                role="button"
+                tabIndex={0}
+                onKeyDown={(e) => e.key === 'Enter' && handleSelectEvaluator(evaluator)}
+              >
+                <div className={styles.colType}>{evaluator.template}</div>
+                <div className={styles.colName}>{evaluator.name}</div>
+                <div className={styles.colResult}>
+                  {(() => {
+                    const result = evaluationsByName.get(evaluator.name);
+                    if (!result) {
+                      return <span style={{ color: 'var(--colorNeutralForeground3)' }}>—</span>;
+                    }
+                    const passed = result.result?.toLowerCase() === 'passed';
+                    return <span className={passed ? styles.statusSucceeded : styles.statusFailed}>{passed ? 'Passed' : 'Failed'}</span>;
+                  })()}
+                </div>
+                <div className={styles.colActions}>
+                  <Tooltip content="Edit" relationship="label">
+                    <Button
+                      appearance="subtle"
+                      icon={<EditRegular />}
+                      size="small"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        dispatch(startEditEvaluator(evaluator));
+                      }}
+                    />
+                  </Tooltip>
+                  <Tooltip content={canRun ? 'Run evaluation' : 'Select a run first'} relationship="label">
+                    <Button
+                      appearance="subtle"
+                      icon={<PlayRegular />}
+                      size="small"
+                      disabled={!canRun}
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        handleRunClick(evaluator);
+                      }}
+                    />
+                  </Tooltip>
+                  <Tooltip content="Delete evaluator" relationship="label">
+                    <Button
+                      appearance="subtle"
+                      icon={<DeleteRegular />}
+                      size="small"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        handleDeleteClick(evaluator);
+                      }}
+                    />
+                  </Tooltip>
+                </div>
+              </div>
+            ))}
+          </div>
+        )
+      ) : (
+        <div className={styles.emptyState}>
+          <p className={styles.emptyTitle}>Enter a workflow name</p>
+          <p className={styles.emptySubtext}>to view evaluators</p>
+        </div>
+      )}
+    </div>
+  );
+};
diff --git a/libs/designer-v2/src/lib/ui/evaluation/RunDatasetPanel.tsx b/libs/designer-v2/src/lib/ui/evaluation/RunDatasetPanel.tsx
new file mode 100644
index 00000000000..2c7d5b8ee4b
--- /dev/null
+++ b/libs/designer-v2/src/lib/ui/evaluation/RunDatasetPanel.tsx
@@ -0,0 +1,222 @@
+import { useCallback, useEffect } from 'react';
+import { Button, mergeClasses, Spinner } from '@fluentui/react-components';
+import { ArrowLeftRegular } from '@fluentui/react-icons';
+import { useDispatch } from 'react-redux';
+import { setSelectedRun, setSelectedAction, setAgentActions, setAgentActionsLoading } from '../../core/state/evaluation/evaluationSlice';
+import {
+  useSelectedRun,
+  useSelectedAction,
+  useAgentActions,
+  useAgentActionsLoading,
+} from '../../core/state/evaluation/evaluationSelectors';
+import { useRunsInfiniteQuery, useAllRuns, useRun } from '../../core/queries/runs';
+import type { WorkflowRunEntry, AgentAction } from '../../core/state/evaluation/evaluationInterfaces';
+import { useEvaluateViewStyles } from './EvaluateView.styles';
+import type { Run } from '@microsoft/logic-apps-shared';
+import { useIsAgenticWorkflow } from '../../core/state/designerView/designerViewSelectors';
+import { useAgentOperations } from '../../core/state/workflow/workflowSelectors';
+
+const formatTimestamp = (isoString: string | undefined): string => {
+  if (!isoString) {
+    return '';
+  }
+  const date = new Date(isoString);
+  return date.toLocaleString('en-US', {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+    hour: 'numeric',
+    minute: '2-digit',
+    hour12: true,
+  });
+};
+
+const calculateDuration = (startTime: string | undefined, endTime: string | undefined): string => {
+  if (!startTime || !endTime) {
+    return '';
+  }
+  const start = new Date(startTime).getTime();
+  const end = new Date(endTime).getTime();
+  const durationMs = end - start;
+  const seconds = (durationMs / 1000).toFixed(1);
+  return `${seconds}s`;
+};
+
+const formatTime = (isoString: string | undefined): string => {
+  if (!isoString) {
+    return '';
+  }
+  const date = new Date(isoString);
+  return date.toLocaleTimeString('en-US', {
+    hour: 'numeric',
+    minute: '2-digit',
+    second: '2-digit',
+    hour12: true,
+  });
+};
+
+const runToEntry = (run: Run): WorkflowRunEntry => ({
+  id: run.id,
+  name: run.name,
+  startTime: typeof run.properties.startTime === 'string' ? run.properties.startTime : new Date(run.properties.startTime).toISOString(),
+  endTime: run.properties.endTime
+    ? typeof run.properties.endTime === 'string'
+      ? run.properties.endTime
+      : new Date(run.properties.endTime).toISOString()
+    : '',
+  status: run.properties.status,
+});
+
+export const RunDatasetPanel = () => {
+  const styles = useEvaluateViewStyles();
+  const dispatch = useDispatch();
+  const selectedRun = useSelectedRun();
+  const selectedAction = useSelectedAction();
+  const agentActions = useAgentActions();
+  const agentActionsLoading = useAgentActionsLoading();
+  const isAgenticWorkflow = useIsAgenticWorkflow();
+  const agentOperations = useAgentOperations();
+
+  const { isLoading: runsLoading, fetchNextPage, hasNextPage } = useRunsInfiniteQuery(true);
+  const allRuns = useAllRuns();
+
+  const { data: runData } = useRun(selectedRun?.id, !!selectedRun && isAgenticWorkflow);
+
+  useEffect(() => {
+    if (!selectedRun || !isAgenticWorkflow || agentOperations.length === 0) {
+      dispatch(setAgentActions([]));
+      return;
+    }
+
+    if (!runData) {
+      dispatch(setAgentActionsLoading(true));
+      return;
+    }
+
+    const actions = (runData.properties.actions ?? {}) as Record<string, { status?: string; startTime?: string; endTime?: string }>;
+    dispatch(
+      setAgentActions(
+        agentOperations.map((nodeId) => {
+          const actionData = actions[nodeId];
+          return {
+            name: nodeId,
+            status: actionData?.status ?? '',
+            startTime: actionData?.startTime ?? '',
+            endTime: actionData?.endTime ?? '',
+          };
+        })
+      )
+    );
+    dispatch(setAgentActionsLoading(false));
+  }, [selectedRun, isAgenticWorkflow, agentOperations, runData, dispatch]);
+
+  const handleRunClick = useCallback(
+    (run: Run) => {
+      const entry = runToEntry(run);
+      if (selectedRun?.name === entry.name) {
+        return;
+      }
+      dispatch(setSelectedRun(entry));
+    },
+    [dispatch, selectedRun]
+  );
+
+  const handleActionClick = useCallback(
+    (action: AgentAction) => {
+      dispatch(setSelectedAction(selectedAction?.name === action.name ? null : action));
+    },
+    [dispatch, selectedAction]
+  );
+
+  const handleBackClick = useCallback(() => {
+    dispatch(setSelectedAction(null));
+  }, [dispatch]);
+
+  // Agent actions sub-view for stateful/agentic workflows
+  if (selectedRun && isAgenticWorkflow && agentActions.length > 0) {
+    return (
+      <div className={mergeClasses(styles.panel, styles.panelRuns)}>
+        <div className={mergeClasses(styles.panelHeader, styles.panelHeaderWithBack)}>
+          <Button appearance="subtle" icon={<ArrowLeftRegular />} onClick={handleBackClick} size="small">
+            Run history
+          </Button>
+        </div>
+        {agentActionsLoading ? (
+          <div className={styles.loadingContainer}>
+            <Spinner size="small" label="Loading agent actions..." />
+          </div>
+        ) : (
+          <div className={styles.listContainer}>
+            {agentActions.map((action, index) => (
+              <div
+                key={action.name}
+                className={mergeClasses(styles.actionItem, selectedAction?.name === action.name && styles.actionItemSelected)}
+                onClick={() => handleActionClick(action)}
+                role="button"
+                tabIndex={0}
+                onKeyDown={(e) => e.key === 'Enter' && handleActionClick(action)}
+              >
+                <div className={styles.actionIndex}>{index + 1}</div>
+                <div className={styles.actionDetails}>
+                  <div className={styles.actionStatus}>
+                    <span className={action.status === 'Succeeded' ? styles.statusSucceeded : styles.statusFailed}>●</span>
+                    <span>{action.name}</span>
+                  </div>
+                  <div className={styles.actionTiming}>
+                    {formatTime(action.startTime)} • {calculateDuration(action.startTime, action.endTime)}
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <div className={mergeClasses(styles.panel, styles.panelRuns)}>
+      <div className={styles.panelHeader}>
+        <h2 className={styles.panelTitle}>Run Dataset</h2>
+      </div>
+      {runsLoading ? (
+        <div className={styles.loadingContainer}>
+          <Spinner size="small" label="Loading runs..." />
+        </div>
+      ) : allRuns.length === 0 ? (
+        <div className={styles.emptyState}>
+          <p className={styles.emptyTitle}>No runs found</p>
+        </div>
+      ) : (
+        <div className={styles.listContainer}>
+          {allRuns.map((run) => {
+            const id = run.name;
+            return (
+              <div
+                key={id}
+                className={mergeClasses(styles.listItem, selectedRun?.name === id && styles.listItemSelected)}
+                onClick={() => handleRunClick(run)}
+                role="button"
+                tabIndex={0}
+                onKeyDown={(e) => e.key === 'Enter' && handleRunClick(run)}
+              >
+                <div className={styles.runName}>{run.name}</div>
+                <div className={styles.runTiming}>
+                  {formatTimestamp(run.properties.startTime as string)} •{' '}
+                  {calculateDuration(run.properties.startTime as string, run.properties.endTime as string)}
+                </div>
+              </div>
+            );
+          })}
+          {hasNextPage && (
+            <div style={{ padding: '8px 16px' }}>
+              <Button appearance="subtle" size="small" onClick={() => fetchNextPage()}>
+                Load more runs
+              </Button>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
diff --git a/libs/designer-v2/src/lib/ui/evaluation/evaluatorFormHelpers.ts b/libs/designer-v2/src/lib/ui/evaluation/evaluatorFormHelpers.ts
new file mode 100644
index 00000000000..7a4daf0261b
--- /dev/null
+++ b/libs/designer-v2/src/lib/ui/evaluation/evaluatorFormHelpers.ts
@@ -0,0 +1,139 @@
+import type { EvaluatorTemplate, ComparisonMethod, Evaluator, EvaluatorParameters } from '@microsoft/logic-apps-shared';
+
+export interface ToolCallFormItem {
+  name: string;
+  arguments: string;
+}
+
+export interface EvaluatorFormData {
+  name: string;
+  template: EvaluatorTemplate;
+  deploymentId: string;
+  agentModelType: string;
+  modelName: string;
+  modelReferenceName: string;
+  prompt: string;
+  expectedToolCalls: ToolCallFormItem[];
+  threshold: string;
+  comparisonMethod: ComparisonMethod;
+  shouldCompareArgs: boolean;
+  expectedChatResponse: string;
+  useGroundTruthRun: boolean;
+  groundTruthRunId: string;
+  groundTruthAgentActionName: string;
+}
+
+export const createDefaultToolCallFormItem = (): ToolCallFormItem => ({
+  name: '',
+  arguments: '{}',
+});
+
+export const createDefaultEvaluatorFormData = (): EvaluatorFormData => ({
+  name: '',
+  template: 'CustomPrompt',
+  deploymentId: 'gpt-4.1',
+  agentModelType: 'AzureOpenAI',
+  modelName: 'gpt-4.1',
+  modelReferenceName: 'agent',
+  prompt: '',
+  expectedToolCalls: [],
+  threshold: '',
+  comparisonMethod: 'exact',
+  shouldCompareArgs: false,
+  expectedChatResponse: '',
+  useGroundTruthRun: false,
+  groundTruthRunId: '',
+  groundTruthAgentActionName: '',
+});
+
+export const formDataToEvaluator = (formData: EvaluatorFormData): Evaluator => {
+  const parameters: EvaluatorParameters = {};
+
+  switch (formData.template) {
+    case 'CustomPrompt':
+      parameters.prompt = formData.prompt;
+      break;
+    case 'ToolCallTrajectory': {
+      if (!formData.useGroundTruthRun) {
+        parameters.expectedToolCalls = formData.expectedToolCalls
+          .filter((tc) => tc.name.trim().length > 0)
+          .map((tc, index) => ({
+            name: tc.name.trim(),
+            arguments: JSON.parse(tc.arguments || '{}'),
+            callId: String(index),
+          }));
+      }
+      if (formData.threshold) {
+        parameters.threshold = Number.parseFloat(formData.threshold);
+      }
+      if (formData.comparisonMethod) {
+        parameters.comparisonMethod = formData.comparisonMethod;
+      }
+      parameters.shouldCompareArgs = formData.shouldCompareArgs;
+      break;
+    }
+    case 'SemanticSimilarity': {
+      if (!formData.useGroundTruthRun) {
+        parameters.expectedChatResponse = formData.expectedChatResponse;
+      }
+      break;
+    }
+  }
+
+  const baseEvaluator: Evaluator = {
+    name: formData.name,
+    template: formData.template,
+    parameters,
+  };
+
+  if (formData.useGroundTruthRun && formData.groundTruthRunId) {
+    baseEvaluator.groundTruthRunId = formData.groundTruthRunId;
+    if (formData.groundTruthAgentActionName) {
+      baseEvaluator.groundTruthAgentActionName = formData.groundTruthAgentActionName;
+    }
+  }
+
+  if (formData.template === 'ToolCallTrajectory') {
+    return baseEvaluator;
+  }
+
+  return {
+    ...baseEvaluator,
+    deploymentId: formData.deploymentId,
+    agentModelType: formData.agentModelType,
+    agentModelSettings: {
+      deploymentModelProperties: {
+        name: formData.modelName,
+      },
+    },
+    modelConfiguration: {
+      referenceName: formData.modelReferenceName,
+    },
+  };
+};
+
+export const evaluatorToFormData = (evaluator: Evaluator): EvaluatorFormData => {
+  const useGroundTruthRun = !!evaluator.groundTruthRunId;
+
+  return {
+    name: evaluator.name,
+    template: evaluator.template,
+    deploymentId: evaluator.deploymentId ?? 'gpt-4.1',
+    agentModelType: evaluator.agentModelType ?? 'AzureOpenAI',
+    modelName: evaluator.agentModelSettings?.deploymentModelProperties.name ?? 'gpt-4.1',
+    modelReferenceName: evaluator.modelConfiguration?.referenceName ?? 'agent',
+    prompt: evaluator.parameters.prompt ?? '',
+    expectedToolCalls:
+      evaluator.parameters.expectedToolCalls?.map((tc) => ({
+        name: tc.name,
+        arguments: JSON.stringify(tc.arguments, null, 2),
+      })) ?? [],
+    threshold: evaluator.parameters.threshold?.toString() ?? '',
+    comparisonMethod: evaluator.parameters.comparisonMethod ?? 'exact',
+    shouldCompareArgs: evaluator.parameters.shouldCompareArgs ?? false,
+    expectedChatResponse: evaluator.parameters.expectedChatResponse ?? '',
+    useGroundTruthRun,
+    groundTruthRunId: evaluator.groundTruthRunId ?? '',
+    groundTruthAgentActionName: evaluator.groundTruthAgentActionName ?? '',
+  };
+};
diff --git a/libs/designer-v2/src/lib/ui/index.tsx b/libs/designer-v2/src/lib/ui/index.tsx
index 7fe75c06fbb..3e1f8c1a93d 100644
--- a/libs/designer-v2/src/lib/ui/index.tsx
+++ b/libs/designer-v2/src/lib/ui/index.tsx
@@ -11,3 +11,4 @@ export * from './FloatingRunButton';
 export * from './FloatingRunButton/chat';
 export { getLogicAppsCategories } from './configuretemplate/resources';
 export { TemplateInfoToast, type TemplateInfoToasterProps } from './configuretemplate/toasters';
+export { EvaluateView } from './evaluation/EvaluateView';
diff --git a/libs/logic-apps-shared/src/designer-client-services/index.ts b/libs/logic-apps-shared/src/designer-client-services/index.ts
index 9da4f99c47d..454120ab088 100644
--- a/libs/logic-apps-shared/src/designer-client-services/index.ts
+++ b/libs/logic-apps-shared/src/designer-client-services/index.ts
@@ -38,4 +38,5 @@ export * from './lib/uiInteractionsService';
 export * from './lib/userpreference';
 export * from './lib/resource';
 export * from './lib/role';
+export * from './lib/evaluation';
 export * from './lib/providers/FavoriteContextProvider';
diff --git a/libs/logic-apps-shared/src/designer-client-services/lib/evaluation.ts b/libs/logic-apps-shared/src/designer-client-services/lib/evaluation.ts
new file mode 100644
index 00000000000..bccf3825ca4
--- /dev/null
+++ b/libs/logic-apps-shared/src/designer-client-services/lib/evaluation.ts
@@ -0,0 +1,45 @@
+import { AssertionException, AssertionErrorCode } from '../../utils/src';
+import type { Evaluator, EvaluationResult } from '../../utils/src/lib/models/evaluation';
+
+export interface IEvaluationService {
+  // Evaluator management (A2A workflows)
+  getGlobalAgentEvaluators(workflowName: string): Promise<Evaluator[]>;
+  getGlobalAgentEvaluator(workflowName: string, evaluatorName: string): Promise<Evaluator>;
+  createOrUpdateGlobalAgentEvaluator(workflowName: string, evaluatorName: string, evaluator: Evaluator): Promise<Evaluator>;
+  deleteGlobalAgentEvaluator(workflowName: string, evaluatorName: string): Promise<void>;
+
+  // Evaluator management (Agentic workflows)
+  getAgentEvaluators(workflowName: string, agentActionName: string): Promise<Evaluator[]>;
+  getAgentEvaluator(workflowName: string, agentActionName: string, evaluatorName: string): Promise<Evaluator>;
+  createOrUpdateAgentEvaluator(
+    workflowName: string,
+    agentActionName: string,
+    evaluatorName: string,
+    evaluator: Evaluator
+  ): Promise<Evaluator>;
+  deleteAgentEvaluator(workflowName: string, agentActionName: string, evaluatorName: string): Promise<void>;
+
+  // Evaluations (A2A workflows)
+  getGlobalAgentEvaluations(workflowName: string, runId: string): Promise<EvaluationResult[]>;
+  getGlobalAgentEvaluation(workflowName: string, runId: string, evaluatorName: string): Promise<EvaluationResult>;
+  runGlobalAgentEvaluation(workflowName: string, runId: string, evaluatorName: string): Promise<EvaluationResult>;
+
+  // Evaluations (Agentic workflows)
+  getAgentEvaluations(workflowName: string, runId: string, agentActionName: string): Promise<EvaluationResult[]>;
+  getAgentEvaluation(workflowName: string, runId: string, agentActionName: string, evaluatorName: string): Promise<EvaluationResult>;
+  runAgentEvaluation(workflowName: string, runId: string, agentActionName: string, evaluatorName: string): Promise<EvaluationResult>;
+}
+
+let service: IEvaluationService;
+
+export const InitEvaluationService = (evaluationService: IEvaluationService): void => {
+  service = evaluationService;
+};
+
+export const EvaluationService = (): IEvaluationService => {
+  if (!service) {
+    throw new AssertionException(AssertionErrorCode.SERVICE_NOT_INITIALIZED, 'EvaluationService needs to be initialized before using');
+  }
+
+  return service;
+};
diff --git a/libs/logic-apps-shared/src/designer-client-services/lib/standard/evaluation.ts b/libs/logic-apps-shared/src/designer-client-services/lib/standard/evaluation.ts
new file mode 100644
index 00000000000..76fcee6a0cc
--- /dev/null
+++ b/libs/logic-apps-shared/src/designer-client-services/lib/standard/evaluation.ts
@@ -0,0 +1,114 @@
+import type { IHttpClient } from '../httpClient';
+import type { IEvaluationService } from '../evaluation';
+import type { Evaluator, EvaluationResult } from '../../../utils/src/lib/models/evaluation';
+import { validateRequiredServiceArguments } from '../../../utils/src';
+
+export interface EvaluationServiceOptions {
+  apiVersion: string;
+  baseUrl: string;
+  httpClient: IHttpClient;
+}
+
+export class StandardEvaluationService implements IEvaluationService {
+  constructor(public readonly options: EvaluationServiceOptions) {
+    const { apiVersion, baseUrl } = options;
+    validateRequiredServiceArguments({ apiVersion, baseUrl });
+  }
+
+  // Evaluator management (A2A workflows)
+  async getGlobalAgentEvaluators(workflowName: string): Promise<Evaluator[]> {
+    const { apiVersion, baseUrl, httpClient } = this.options;
+    const uri = `${baseUrl}/workflows/${workflowName}/evaluators?api-version=${apiVersion}`;
+    const response = await httpClient.get<{ value: Evaluator[] }>({ uri });
+    return response.value;
+  }
+
+  async getGlobalAgentEvaluator(workflowName: string, evaluatorName: string): Promise<Evaluator> {
+    const { apiVersion, baseUrl, httpClient } = this.options;
+    const uri = `${baseUrl}/workflows/${workflowName}/evaluators/${evaluatorName}?api-version=${apiVersion}`;
+    return httpClient.get<Evaluator>({ uri });
+  }
+
+  async createOrUpdateGlobalAgentEvaluator(workflowName: string, evaluatorName: string, evaluator: Evaluator): Promise<Evaluator> {
+    const { apiVersion, baseUrl, httpClient } = this.options;
+    const uri = `${baseUrl}/workflows/${workflowName}/evaluators/${evaluatorName}?api-version=${apiVersion}`;
+    return httpClient.put<Evaluator, Evaluator>({ uri, content: evaluator });
+  }
+
+  async deleteGlobalAgentEvaluator(workflowName: string, evaluatorName: string): Promise<void> {
+    const { apiVersion, baseUrl, httpClient } = this.options;
+    const uri = `${baseUrl}/workflows/${workflowName}/evaluators/${evaluatorName}?api-version=${apiVersion}`;
+    await httpClient.delete<void>({ uri });
+  }
+
+  // Evaluator management (Agentic workflows)
+  async getAgentEvaluators(workflowName: string, agentActionName: string): Promise<Evaluator[]> {
+    const { apiVersion, baseUrl, httpClient } = this.options;
+    const uri = `${baseUrl}/workflows/${workflowName}/actions/${agentActionName}/evaluators?api-version=${apiVersion}`;
+    const response = await httpClient.get<{ value: Evaluator[] }>({ uri });
+    return response.value;
+  }
+
+  async getAgentEvaluator(workflowName: string, agentActionName: string, evaluatorName: string): Promise<Evaluator> {
+    const { apiVersion, baseUrl, httpClient } = this.options;
+    const uri = `${baseUrl}/workflows/${workflowName}/actions/${agentActionName}/evaluators/${evaluatorName}?api-version=${apiVersion}`;
+    return httpClient.get<Evaluator>({ uri });
+  }
+
+  async createOrUpdateAgentEvaluator(
+    workflowName: string,
+    agentActionName: string,
+    evaluatorName: string,
+    evaluator: Evaluator
+  ): Promise<Evaluator> {
+    const { apiVersion, baseUrl, httpClient } = this.options;
+    const uri = `${baseUrl}/workflows/${workflowName}/actions/${agentActionName}/evaluators/${evaluatorName}?api-version=${apiVersion}`;
+    return httpClient.put<Evaluator, Evaluator>({ uri, content: evaluator });
+  }
+
+  async deleteAgentEvaluator(workflowName: string, agentActionName: string, evaluatorName: string): Promise<void> {
+    const { apiVersion, baseUrl, httpClient } = this.options;
+    const uri = `${baseUrl}/workflows/${workflowName}/actions/${agentActionName}/evaluators/${evaluatorName}?api-version=${apiVersion}`;
+    await httpClient.delete<void>({ uri });
+  }
+
+  // Evaluations (A2A workflows)
+  async getGlobalAgentEvaluations(workflowName: string, runId: string): Promise<EvaluationResult[]> {
+    const { apiVersion, baseUrl, httpClient } = this.options;
+    const uri = `${baseUrl}/workflows/${workflowName}/runs/${runId}/evaluators/runs/latest?api-version=${apiVersion}`;
+    const response = await httpClient.get<{ value: EvaluationResult[] }>({ uri });
+    return response.value;
+  }
+
+  async getGlobalAgentEvaluation(workflowName: string, runId: string, evaluatorName: string): Promise<EvaluationResult> {
+    const { apiVersion, baseUrl, httpClient } = this.options;
+    const uri = `${baseUrl}/workflows/${workflowName}/runs/${runId}/evaluators/${evaluatorName}/runs/latest?api-version=${apiVersion}`;
+    return httpClient.get<EvaluationResult>({ uri });
+  }
+
+  async runGlobalAgentEvaluation(workflowName: string, runId: string, evaluatorName: string): Promise<EvaluationResult> {
+    const { apiVersion, baseUrl, httpClient } = this.options;
+    const uri = `${baseUrl}/workflows/${workflowName}/runs/${runId}/evaluators/${evaluatorName}/run?api-version=${apiVersion}`;
+    return httpClient.post<any, EvaluationResult>({ uri });
+  }
+
+  // Evaluations (Agentic workflows)
+  async getAgentEvaluations(workflowName: string, runId: string, agentActionName: string): Promise<EvaluationResult[]> {
+    const { apiVersion, baseUrl, httpClient } = this.options;
+    const uri = `${baseUrl}/workflows/${workflowName}/runs/${runId}/actions/${agentActionName}/evaluators/runs/latest?api-version=${apiVersion}`;
+    const response = await httpClient.get<{ value: EvaluationResult[] }>({ uri });
+    return response.value;
+  }
+
+  async getAgentEvaluation(workflowName: string, runId: string, agentActionName: string, evaluatorName: string): Promise<EvaluationResult> {
+    const { apiVersion, baseUrl, httpClient } = this.options;
+    const uri = `${baseUrl}/workflows/${workflowName}/runs/${runId}/actions/${agentActionName}/evaluators/${evaluatorName}/runs/latest?api-version=${apiVersion}`;
+    return httpClient.get<EvaluationResult>({ uri });
+  }
+
+  async runAgentEvaluation(workflowName: string, runId: string, agentActionName: string, evaluatorName: string): Promise<EvaluationResult> {
+    const { apiVersion, baseUrl, httpClient } = this.options;
+    const uri = `${baseUrl}/workflows/${workflowName}/runs/${runId}/actions/${agentActionName}/evaluators/${evaluatorName}/run?api-version=${apiVersion}`;
+    return httpClient.post<any, EvaluationResult>({ uri });
+  }
+}
diff --git a/libs/logic-apps-shared/src/designer-client-services/lib/standard/index.ts b/libs/logic-apps-shared/src/designer-client-services/lib/standard/index.ts
index 9a248238828..81cc699c790 100644
--- a/libs/logic-apps-shared/src/designer-client-services/lib/standard/index.ts
+++ b/libs/logic-apps-shared/src/designer-client-services/lib/standard/index.ts
@@ -30,5 +30,6 @@ export {
   type UpdateFoundryAgentOptions,
   type ListAgentsOptions,
 } from './foundryAgentService';
+export { StandardEvaluationService, type EvaluationServiceOptions } from './evaluation';
 // Template
 export { StandardTemplateService } from './template';
diff --git a/libs/logic-apps-shared/src/utils/src/lib/models/evaluation.ts b/libs/logic-apps-shared/src/utils/src/lib/models/evaluation.ts
new file mode 100644
index 00000000000..dbd88a38fea
--- /dev/null
+++ b/libs/logic-apps-shared/src/utils/src/lib/models/evaluation.ts
@@ -0,0 +1,53 @@
+export type EvaluatorTemplate = 'CustomPrompt' | 'ToolCallTrajectory' | 'SemanticSimilarity';
+
+export type ComparisonMethod = 'exact' | 'in-order' | 'any-order' | 'precision' | 'recall';
+
+export interface ToolCall {
+  name: string;
+  arguments: Record<string, unknown>;
+  callId: string;
+}
+
+export interface EvaluatorParameters {
+  prompt?: string;
+  expectedToolCalls?: ToolCall[];
+  threshold?: number;
+  comparisonMethod?: ComparisonMethod;
+  shouldCompareArgs?: boolean;
+  expectedChatResponse?: string;
+}
+
+export interface DeploymentModelProperties {
+  name: string;
+}
+
+export interface AgentModelSettings {
+  deploymentModelProperties: DeploymentModelProperties;
+}
+
+export interface ModelConfiguration {
+  referenceName: string;
+}
+
+export interface Evaluator {
+  name: string;
+  template: EvaluatorTemplate;
+  deploymentId?: string;
+  agentModelType?: string;
+  parameters: EvaluatorParameters;
+  agentModelSettings?: AgentModelSettings;
+  modelConfiguration?: ModelConfiguration;
+  groundTruthRunId?: string;
+  groundTruthAgentActionName?: string;
+}
+
+export interface EvaluationResult {
+  agentActionName?: string;
+  evaluatorName: string;
+  result: string;
+  value: string;
+  reason: string;
+  totalTokens: number;
+  inputTokens: number;
+  outputTokens: number;
+}
diff --git a/libs/logic-apps-shared/src/utils/src/lib/models/index.ts b/libs/logic-apps-shared/src/utils/src/lib/models/index.ts
index ab7ccce3b9b..25ac585033b 100644
--- a/libs/logic-apps-shared/src/utils/src/lib/models/index.ts
+++ b/libs/logic-apps-shared/src/utils/src/lib/models/index.ts
@@ -28,6 +28,7 @@ import * as OpenAPIV2 from './openApiV2';
 import * as Swagger from './swagger';
 import * as Template from './template';
 export * from './agent';
+export * from './evaluation';
 export * from './mcp';
 export * from './knowledge';