[Agent Builder] Fix flakey test - conversation error handling - keeps the previous conversation rounds visible when there is an error

x-pack/platform/plugins/shared/agent_builder/public/application/context/conversation/use_conversation_actions.ts

@@ -41,7 +41,7 @@ export interface ConversationActions {
     userMessage: string;
     attachments?: AttachmentInput[];
     agentId: string;
-  }) => void;
+  }) => Promise<void>;
   removeOptimisticRound: () => void;
   clearLastRoundResponse: () => void;
   addReasoningStep: ({ step }: { step: ReasoningStep }) => void;
@@ -120,7 +120,7 @@ export const createConversationActions = ({
       queryClient.invalidateQueries({ queryKey: queryKeys.conversations.all });
     },
 
-    addOptimisticRound: ({
+    addOptimisticRound: async ({
       userMessage,
       attachments,
       agentId,
@@ -132,6 +132,14 @@ export const createConversationActions = ({
       if (!conversationId) {
         return;
       }
+      // Cancel any in-flight refetch on this conversation's query before mutating
+      // the cache. After a previous successful stream, the mutation's finally block
+      // calls invalidateConversation() + clearActiveStream(), which opens the
+      // useConversation gate and triggers a GET refetch. If that refetch is still
+      // in flight when we write the optimistic round, its response will overwrite
+      // our write — and the round will then be erroneously popped by
+      // removeOptimisticRound() if this stream errors.
+      await queryClient.cancelQueries({ queryKey });
       setConversation(
         produce((draft) => {
           const current = queryClient.getQueryData<Conversation>(queryKey);

x-pack/platform/plugins/shared/agent_builder/public/application/context/send_message/use_send_message_mutation.ts

@@ -175,7 +175,7 @@ export const useSendMessageMutation = ({
           throw new Error('Message is required');
         }
         setPendingMessage(vars.conversationId, vars.message);
-        streamActions.addOptimisticRound({
+        await streamActions.addOptimisticRound({
           userMessage: vars.message,
           attachments: vars.attachments ?? [],
           agentId: vars.agentId,

x-pack/platform/plugins/shared/agent_builder/test/scout_agent_builder/ui/fixtures/page_objects/agent_builder_app.ts

@@ -109,16 +109,20 @@ export class AgentBuilderApp {
     await this.typeMessage(userMessage);
     await this.sendMessage();
     await llmProxy.waitForAllInterceptorsToHaveBeenCalled();
+    // Wait for the FULL expected response (not just any text) so streaming is
+    // proven complete before we return; the streaming text component animates
+    // tokens (~17ms each) and the test can read the DOM before the last token
+    // has painted on resource-constrained CI runs.
     await this.page.waitForFunction(
-      () => {
+      (expected: string) => {
         const els = document.querySelectorAll('[data-test-subj="agentBuilderRoundResponse"]');
         if (els.length === 0) {
           return false;
         }
         const last = els[els.length - 1];
-        return (last.textContent?.trim().length ?? 0) > 0;
+        return (last.textContent ?? '').includes(expected);
       },
-      undefined,
+      expectedResponse,
       { timeout: 120_000 }
     );
     await this.page.waitForFunction(