fix(mcp): harden result delivery and app lifecycle

Author: waleedlatif1

.github/workflows/checks.yml

@@ -215,29 +215,34 @@ jobs:
           retention-days: 7
 
   mcp-app:
-    name: mcp-app
-    runs-on: ubuntu-latest
+    name: mcp-app (${{ matrix.browser }})
+    runs-on: *runner-4vcpu
     timeout-minutes: 10
+    strategy:
+      fail-fast: false
+      matrix:
+        browser: [chromium, webkit]
     steps:
       - *checkout-mirror
       - *checkout-plain
       - name: Setup workspace
         uses: ./.github/actions/setup
         with:
           provider: ${{ vars.CI_PROVIDER }}
-      - name: Install Chromium
+      - name: Install browser
         working-directory: apps/sim
-        run: bunx playwright install --with-deps chromium
+        run: bunx playwright install --with-deps ${{ matrix.browser }}
       - name: Exercise MCP App sandbox
         working-directory: apps/sim
         env:
+          MCP_APP_E2E_BROWSER: ${{ matrix.browser }}
           MCP_APP_E2E_REPORT_PATH: ${{ runner.temp }}/mcp-app.json
         run: bun run test:mcp-app:e2e
       - name: Upload MCP App report
         if: failure()
         uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4
         with:
-          name: mcp-app-report
+          name: mcp-app-report-${{ matrix.browser }}
           path: ${{ runner.temp }}/mcp-app.json*
           if-no-files-found: warn
           retention-days: 7

apps/sim/app/api/mothership/chats/[chatId]/mcp-results/[id]/assets/[index]/route.ts

@@ -12,10 +12,7 @@ export const GET = defineInternalBinaryRoute({
   contract: getMcpPresentationAssetContract,
   auth: internalSessionAuth,
   operation: readMcpResultAsset.operation,
-  rateLimit: internalRateLimits.none({
-    reason:
-      'Bounded private MCP result delivery requires current chat ownership and connection authorization for live resources.',
-  }),
+  rateLimit: internalRateLimits.user({ bucketName: 'mcp-apps' }),
   errorPolicy: internalOrchestrationErrorPolicy,
   mapInput: ({ params }) => params,
   useCase: readMcpResultAsset,

apps/sim/app/api/mothership/chats/[chatId]/mcp-results/[id]/frame/route.ts

@@ -12,10 +12,7 @@ export const GET = defineInternalBinaryRoute({
   contract: getMcpAppFrameContract,
   auth: internalSessionAuth,
   operation: readMcpAppFrame.operation,
-  rateLimit: internalRateLimits.none({
-    reason:
-      'Bounded private MCP result delivery requires current chat ownership and connection authorization for live resources.',
-  }),
+  rateLimit: internalRateLimits.user({ bucketName: 'mcp-apps' }),
   errorPolicy: internalOrchestrationErrorPolicy,
   mapInput: ({ params }) => params,
   useCase: readMcpAppFrame,

apps/sim/app/api/mothership/chats/[chatId]/mcp-results/[id]/metadata/route.ts

@@ -0,0 +1,20 @@
+import { getMcpPresentationMetadataContract } from '@/lib/api/contracts/mcp-presentations'
+import {
+  defineInternalJsonRoute,
+  internalRateLimits,
+  internalSessionAuth,
+} from '@/lib/api/server/routes'
+import { internalOrchestrationErrorPolicy } from '@/lib/api/server/routes/internal-json-route'
+import { readMcpResultMetadata } from '@/lib/mothership/chat/application/mcp-results'
+
+export const dynamic = 'force-dynamic'
+export const GET = defineInternalJsonRoute({
+  contract: getMcpPresentationMetadataContract,
+  auth: internalSessionAuth,
+  operation: readMcpResultMetadata.operation,
+  rateLimit: internalRateLimits.user({ bucketName: 'mcp-apps' }),
+  errorPolicy: internalOrchestrationErrorPolicy,
+  mapInput: ({ params }) => params,
+  useCase: readMcpResultMetadata,
+  staticResponseHeaders: { 'Cache-Control': 'private, no-store' },
+})

apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/mcp-result/mcp-app.tsx

@@ -29,11 +29,19 @@ function McpAppFrame({ chatId, id, data, onClose }: McpAppFrameProps) {
   const { resolvedTheme } = useTheme()
   const theme = resolvedTheme === 'dark' ? 'dark' : 'light'
   const themeRef = useRef<'dark' | 'light'>(theme)
-  themeRef.current = theme
   const [height, setHeight] = useState(400)
   const [error, setError] = useState<string>()
   const [closing, setClosing] = useState(false)
 
+  useEffect(() => {
+    themeRef.current = theme
+    bridgeRef.current?.setHostContext({
+      theme,
+      displayMode: 'inline',
+      availableDisplayModes: ['inline'],
+    })
+  }, [theme])
+
   useEffect(() => {
     const frame = frameRef.current
     if (!frame?.contentWindow) return
@@ -50,7 +58,6 @@ function McpAppFrame({ chatId, id, data, onClose }: McpAppFrameProps) {
         },
       }
     )
-    bridgeRef.current = bridge
     const reportError = (cause: unknown) => {
       if (!lifecycle.signal.aborted) setError(getErrorMessage(cause))
     }
@@ -84,6 +91,12 @@ function McpAppFrame({ chatId, id, data, onClose }: McpAppFrameProps) {
       if (initialized || lifecycle.signal.aborted) return
       window.clearTimeout(initializationTimer)
       initialized = true
+      bridgeRef.current = bridge
+      bridge.setHostContext({
+        theme: themeRef.current,
+        displayMode: 'inline',
+        availableDisplayModes: ['inline'],
+      })
       void (async () => {
         await bridge.sendToolInput({ arguments: data.arguments })
         if (!lifecycle.signal.aborted) await bridge.sendToolResult(data.result)
@@ -123,14 +136,6 @@ function McpAppFrame({ chatId, id, data, onClose }: McpAppFrameProps) {
     }
   }, [chatId, id, data, callTool, readResource])
 
-  useEffect(() => {
-    bridgeRef.current?.setHostContext({
-      theme,
-      displayMode: 'inline',
-      availableDisplayModes: ['inline'],
-    })
-  }, [theme])
-
   const close = async () => {
     if (closing) return
     setClosing(true)

apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/mcp-result/mcp-result.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useState } from 'react'
+import { useRef, useState } from 'react'
 import { Chip, ChipLink } from '@sim/emcn'
 import { type McpPresentationReceipt, mcpPresentationAssetUrl } from '@/lib/mcp/presentation'
 import { useChatSurface } from '@/app/workspace/[workspaceId]/home/components/chat-surface-context'
@@ -15,12 +15,14 @@ export function McpResult({ receipt }: McpResultProps) {
   const { chatId } = useChatSurface()
   const resources = useOptionalMothershipResources()
   const [appOpen, setAppOpen] = useState(false)
+  const openButtonRef = useRef<HTMLButtonElement>(null)
   if (!chatId) return null
   return (
     <div className='flex min-w-0 flex-col gap-3 py-2'>
-      {receipt.hasApp && !appOpen && (
+      {receipt.hasApp && (
         <div className='flex items-center gap-2'>
           <Chip
+            ref={openButtonRef}
             variant='border'
             active={appOpen}
             onClick={() => setAppOpen(true)}
@@ -35,7 +37,10 @@ export function McpResult({ receipt }: McpResultProps) {
           key={`${chatId}:${receipt.id}`}
           chatId={chatId}
           id={receipt.id}
-          onClose={() => setAppOpen(false)}
+          onClose={() => {
+            setAppOpen(false)
+            openButtonRef.current?.focus()
+          }}
         />
       )}
       {receipt.items.map((item) => {

apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/components/mcp-resource-content.tsx

@@ -5,8 +5,9 @@ import { getErrorMessage } from '@sim/utils/errors'
 import { mcpPresentationAssetUrl } from '@/lib/mcp/presentation'
 import type { MothershipResource } from '@/lib/mothership/resources/types'
 import type { WorkspaceFileRecord } from '@/lib/uploads/contexts/workspace'
+import { resolveFileCategory } from '@/app/workspace/[workspaceId]/files/components/file-viewer/file-category'
 import { FileViewer } from '@/app/workspace/[workspaceId]/files/components/file-viewer/file-viewer'
-import { useMcpPresentation } from '@/hooks/queries/mcp-presentations'
+import { useMcpPresentationMetadata } from '@/hooks/queries/mcp-presentations'
 import type { FileContentSource } from '@/hooks/use-file-content-source'
 
 interface McpResourceContentProps {
@@ -23,7 +24,7 @@ interface McpArtifactPreviewProps {
 const SNAPSHOT_DATE = new Date(0)
 
 function McpArtifactPreview({ chatId, presentationId, index }: McpArtifactPreviewProps) {
-  const { data, error, isPending } = useMcpPresentation(chatId, presentationId)
+  const { data, error, isPending } = useMcpPresentationMetadata(chatId, presentationId)
   if (isPending) return <p className='p-4 text-[var(--text-muted)] text-small'>Opening result…</p>
   if (error)
     return (
@@ -41,7 +42,7 @@ function McpArtifactPreview({ chatId, presentationId, index }: McpArtifactPrevie
   const previewable =
     plainText ||
     item.kind === 'image' ||
-    item.kind === 'audio' ||
+    (item.kind === 'audio' && resolveFileCategory(item.mimeType, '') === 'audio-previewable') ||
     item.mimeType === 'application/pdf'
   if (!previewable)
     return (

apps/sim/app/workspace/[workspaceId]/home/hooks/stream/handle-tool-event.ts

@@ -68,12 +68,10 @@ function runToolResultSideEffects(ctx: StreamLoopContext, node: ToolNode, replay
       ? extractResourcesFromToolResult(name, params, output)
       : []
   const mcpResources = extractedResources.filter((resource) => resource.type === 'mcp')
-  if (replay && mcpResources.length) {
+  if (mcpResources.length) {
     const chatId = deps.chatIdRef.current
     if (chatId)
       void deps.queryClient.invalidateQueries({ queryKey: mothershipChatKeys.detail(chatId) })
-  } else {
-    for (const resource of mcpResources) deps.addResource(resource)
   }
   if (!deps.workspaceId) return
   const calledBy = agentIdForSpan(ctx, node.spanId)

apps/sim/hooks/queries/mcp-presentations.ts

@@ -3,8 +3,12 @@ import { requestJson } from '@/lib/api/client/request'
 import {
   callMcpAppToolContract,
   getMcpPresentationContract,
+  getMcpPresentationMetadataContract,
   type McpAppResourceBody,
+  type McpAppResourceResponse,
   type McpAppToolBody,
+  type McpAppToolResponse,
+  type McpPresentationMetadataResponse,
   readMcpAppResourceContract,
 } from '@/lib/api/contracts/mcp-presentations'
 import { mcpKeys } from '@/hooks/queries/utils/mcp-keys'
@@ -23,9 +27,27 @@ export function useMcpPresentation(chatId: string, id: string) {
   })
 }
 
+export function useMcpPresentationMetadata(chatId: string, id: string) {
+  return useQuery({
+    queryKey: mcpKeys.presentationMetadata(chatId, id),
+    queryFn: ({ signal }): Promise<McpPresentationMetadataResponse> =>
+      requestJson(getMcpPresentationMetadataContract, { params: { chatId, id }, signal }),
+    staleTime: MCP_PRESENTATION_STALE_TIME,
+    gcTime: 0,
+    refetchOnWindowFocus: false,
+    retry: false,
+  })
+}
+
 export function useMcpAppTool(chatId: string, id: string) {
   return useMutation({
-    mutationFn: ({ body, signal }: { body: McpAppToolBody; signal: AbortSignal }) =>
+    mutationFn: ({
+      body,
+      signal,
+    }: {
+      body: McpAppToolBody
+      signal: AbortSignal
+    }): Promise<McpAppToolResponse> =>
       requestJson(callMcpAppToolContract, { params: { chatId, id }, body, signal }),
     gcTime: 0,
     retry: false,
@@ -34,7 +56,13 @@ export function useMcpAppTool(chatId: string, id: string) {
 
 export function useMcpAppResource(chatId: string, id: string) {
   return useMutation({
-    mutationFn: ({ body, signal }: { body: McpAppResourceBody; signal: AbortSignal }) =>
+    mutationFn: ({
+      body,
+      signal,
+    }: {
+      body: McpAppResourceBody
+      signal: AbortSignal
+    }): Promise<McpAppResourceResponse> =>
       requestJson(readMcpAppResourceContract, { params: { chatId, id }, body, signal }),
     gcTime: 0,
     retry: false,

apps/sim/hooks/queries/utils/mcp-keys.ts

@@ -2,6 +2,8 @@ export const mcpKeys = {
   all: ['mcp'] as const,
   presentations: () => [...mcpKeys.all, 'presentation'] as const,
   presentation: (chatId: string, id: string) => [...mcpKeys.presentations(), chatId, id] as const,
+  presentationMetadata: (chatId: string, id: string) =>
+    [...mcpKeys.presentation(chatId, id), 'metadata'] as const,
   servers: () => [...mcpKeys.all, 'servers'] as const,
   serversList: (workspaceId?: string) => [...mcpKeys.servers(), workspaceId ?? ''] as const,
   managedCatalog: () => [...mcpKeys.all, 'managedCatalog'] as const,