test(lightspeed): e2e for MCP tool calling in chat UI (#2748)

Add SSE fixture with tool_call/tool_result and a Playwright test that
asserts the tool response header renders after a streamed mcp_list_tools call.

Made-with: Cursor

Co-authored-by: HusneShabbir <husneshabbir447@gmail.com>

Author: HusneShabbir

workspaces/lightspeed/packages/app-legacy/e2e-tests/fixtures/responses.ts

@@ -162,3 +162,56 @@ export const generateQueryResponse = (conversationId: string) => {
     .map(({ event, data }) => `data: ${JSON.stringify({ event, data })}\n\n`)
     .join('')}\n`;
 };
+
+const e2eMcpToolCallId = 'mcp_list_e2e-00000000-0000-4000-8000-000000000001';
+
+/** SSE with `tool_call` / `tool_result` then assistant tokens (same wire format as {@link generateQueryResponse}). */
+export function generateQueryResponseWithMcpToolCall(
+  conversationId: string,
+): string {
+  const events: {
+    event: string;
+    data?: Record<string, any>;
+    done?: boolean;
+  }[] = [];
+
+  events.push({
+    event: 'start',
+    data: {
+      conversation_id: conversationId,
+      request_id: mockStreamRequestId,
+    },
+  });
+  events.push({
+    event: 'tool_call',
+    data: {
+      id: e2eMcpToolCallId,
+      name: 'mcp_list_tools',
+      args: { server_label: 'mcp-integration-tools' },
+      type: 'mcp_list_tools',
+    },
+  });
+  events.push({
+    event: 'tool_result',
+    data: {
+      id: e2eMcpToolCallId,
+      status: 'success',
+      content: '{"server_label":"mcp-integration-tools","tools":[]}',
+    },
+  });
+
+  const tokens = assistantResponse.match(/(\s+|[^\s]+)/g) || [
+    assistantResponse,
+  ];
+  tokens.forEach((token, index) => {
+    events.push({
+      event: 'token',
+      data: { id: index, token, role: 'inference' },
+    });
+  });
+  events.push({ event: 'end', done: true });
+
+  return `${events
+    .map(({ event, data }) => `data: ${JSON.stringify({ event, data })}\n\n`)
+    .join('')}\n`;
+}

workspaces/lightspeed/packages/app-legacy/e2e-tests/lightspeed.test.ts

@@ -27,6 +27,8 @@ import {
   type McpServersListMock,
   thinkingContent,
   assistantResponse,
+  generateQueryResponseWithMcpToolCall,
+  modelBaseUrl,
 } from './fixtures/responses';
 import {
   openLightspeed,
@@ -687,4 +689,39 @@ test.describe('Lightspeed tests', () => {
       });
     });
   });
+
+  test('MCP tool calling renders in UI', async () => {
+    const mcpToolCallPrompt = 'test mcp tool call';
+
+    await mockConversations(sharedPage, conversations, true);
+    await mockChatHistory(sharedPage, []);
+    await openLightspeed(sharedPage);
+
+    await sharedPage.unroute(`${modelBaseUrl}/v1/query`);
+    await sharedPage.route(`${modelBaseUrl}/v1/query`, async route => {
+      const payload = route.request().postDataJSON();
+      if (payload.conversation_id) {
+        conversations[1].conversation_id = payload.conversation_id;
+      }
+      const conversationId =
+        conversations[1].conversation_id ?? conversations[0].conversation_id;
+      await route.fulfill({
+        body: generateQueryResponseWithMcpToolCall(conversationId),
+      });
+    });
+
+    await sendMessage(mcpToolCallPrompt, sharedPage, translations);
+
+    await expect(
+      sharedPage.getByRole('button', {
+        name: evaluateMessage(
+          translations['toolCall.header'],
+          'mcp_list_tools',
+        ),
+      }),
+    ).toBeVisible();
+
+    await sharedPage.unroute(`${modelBaseUrl}/v1/query`);
+    await mockQuery(sharedPage, botQuery, conversations);
+  });
 });