fix(mcp): improve OAuth failure recovery

Author: j15z

apps/sim/app/workspace/[workspaceId]/settings/components/mcp/mcp.tsx

@@ -44,6 +44,8 @@ import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
 import { useSubBlockStore } from '@/stores/workflows/subblock/store'
 import type { BlockState } from '@/stores/workflows/workflow/types'
 import { McpServerFormModal } from './components'
+import { getRefreshActionState } from './refresh-action-state'
+import { getServerToolsLabel } from './server-tools-label'
 
 const logger = createLogger('McpSettings')
 
@@ -58,16 +60,6 @@ function formatTransportLabel(transport: string): string {
     .join('-')
 }
 
-function formatToolsLabel(tools: McpTool[], connectionStatus?: string): string {
-  if (connectionStatus === 'error') {
-    return 'Unable to connect'
-  }
-  const count = tools.length
-  const plural = count !== 1 ? 's' : ''
-  const names = count > 0 ? `: ${tools.map((t) => t.name).join(', ')}` : ''
-  return `${count} tool${plural}${names}`
-}
-
 interface ServerListItemProps {
   server: McpServer
   tools: McpTool[]
@@ -88,7 +80,7 @@ function ServerListItem({
   onViewDetails,
 }: ServerListItemProps) {
   const transportLabel = formatTransportLabel(server.transport || 'http')
-  const toolsLabel = formatToolsLabel(tools, server.connectionStatus)
+  const toolsLabel = getServerToolsLabel(tools, server.connectionStatus, server.lastError)
   const isError = server.connectionStatus === 'error'
 
   return (
@@ -295,19 +287,11 @@ export function MCP() {
   }
 
   useEffect(() => {
-    if (!refreshServerMutation.isSuccess) return
+    if (!refreshServerMutation.isSuccess && !refreshServerMutation.isError) return
     const timeout = window.setTimeout(() => refreshServerMutation.reset(), 3000)
     return () => window.clearTimeout(timeout)
-    // eslint-disable-next-line react-hooks/exhaustive-deps -- mutation object is unstable; isSuccess flag is the trigger
-  }, [refreshServerMutation.isSuccess])
-
-  const refreshingServerId = refreshServerMutation.isPending
-    ? refreshServerMutation.variables?.serverId
-    : null
-  const refreshedServerId = refreshServerMutation.isSuccess
-    ? refreshServerMutation.variables?.serverId
-    : null
-  const refreshedWorkflowsUpdated = refreshServerMutation.data?.workflowsUpdated
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- mutation object is unstable; status flags are the triggers
+  }, [refreshServerMutation.isSuccess, refreshServerMutation.isError])
 
   const editingServer = editingServerId
     ? (servers.find((s) => s.id === editingServerId) as McpServer | undefined)
@@ -372,25 +356,23 @@ export function MCP() {
   if (selectedServer) {
     const { server, tools } = selectedServer
     const transportLabel = formatTransportLabel(server.transport || 'http')
-
-    const refreshLabel =
-      refreshingServerId === server.id
-        ? 'Refreshing...'
-        : refreshedServerId === server.id
-          ? refreshedWorkflowsUpdated
-            ? `Synced (${refreshedWorkflowsUpdated} workflow${refreshedWorkflowsUpdated === 1 ? '' : 's'})`
-            : 'Refreshed'
-          : 'Refresh tools'
+    const isCurrentRefresh = refreshServerMutation.variables?.serverId === server.id
+    const refreshAction = getRefreshActionState({
+      mutationStatus: isCurrentRefresh ? refreshServerMutation.status : 'idle',
+      connectionStatus: isCurrentRefresh ? refreshServerMutation.data?.status : undefined,
+      workflowsUpdated: isCurrentRefresh ? refreshServerMutation.data?.workflowsUpdated : undefined,
+    })
 
     return (
       <SettingsPanel
         back={{ text: 'MCP tools', icon: ArrowLeft, onSelect: handleBackToList }}
         title={server.name || 'Unnamed Server'}
         actions={[
           {
-            text: refreshLabel,
+            text: refreshAction.text,
+            textTone: refreshAction.textTone,
             onSelect: () => handleRefreshServer(server.id),
-            disabled: refreshingServerId === server.id || refreshedServerId === server.id,
+            disabled: refreshAction.disabled,
           },
           {
             text: 'Edit',
@@ -634,7 +616,10 @@ export function MCP() {
                   tools={tools}
                   isDeleting={deletingServers.has(server.id)}
                   isLoadingTools={isLoadingTools}
-                  isRefreshing={refreshingServerId === server.id}
+                  isRefreshing={
+                    refreshServerMutation.isPending &&
+                    refreshServerMutation.variables?.serverId === server.id
+                  }
                   onRemove={() => handleRemoveServer(server.id)}
                   onViewDetails={() => handleViewDetails(server.id)}
                 />

apps/sim/app/workspace/[workspaceId]/settings/components/mcp/refresh-action-state.test.ts

@@ -0,0 +1,47 @@
+import { describe, expect, it } from 'vitest'
+import { getRefreshActionState } from './refresh-action-state'
+
+describe('getRefreshActionState', () => {
+  it.each(['error', 'disconnected'] as const)(
+    'shows a retryable red-text Failed state when refresh returns %s',
+    (status) => {
+      expect(
+        getRefreshActionState({
+          mutationStatus: 'success',
+          connectionStatus: status,
+          workflowsUpdated: 0,
+        })
+      ).toEqual({
+        text: 'Failed',
+        textTone: 'error',
+        disabled: false,
+      })
+    }
+  )
+
+  it('shows Failed when the refresh request itself rejects', () => {
+    expect(
+      getRefreshActionState({
+        mutationStatus: 'error',
+      })
+    ).toEqual({
+      text: 'Failed',
+      textTone: 'error',
+      disabled: false,
+    })
+  })
+
+  it('preserves successful refresh feedback', () => {
+    expect(
+      getRefreshActionState({
+        mutationStatus: 'success',
+        connectionStatus: 'connected',
+        workflowsUpdated: 2,
+      })
+    ).toEqual({
+      text: 'Synced (2 workflows)',
+      textTone: undefined,
+      disabled: true,
+    })
+  })
+})

apps/sim/app/workspace/[workspaceId]/settings/components/mcp/refresh-action-state.ts

@@ -0,0 +1,37 @@
+import type { MutationStatus } from '@tanstack/react-query'
+import type { RefreshMcpServerResult } from '@/lib/api/contracts/mcp'
+import type { SettingsAction } from '@/app/workspace/[workspaceId]/settings/components/settings-header/settings-header'
+
+interface RefreshActionStateInput {
+  mutationStatus: MutationStatus
+  connectionStatus?: RefreshMcpServerResult['status']
+  workflowsUpdated?: number
+}
+
+type RefreshActionState = Pick<SettingsAction, 'text' | 'textTone' | 'disabled'>
+
+export function getRefreshActionState({
+  mutationStatus,
+  connectionStatus,
+  workflowsUpdated,
+}: RefreshActionStateInput): RefreshActionState {
+  if (mutationStatus === 'pending') {
+    return { text: 'Refreshing...', textTone: undefined, disabled: true }
+  }
+
+  if (
+    mutationStatus === 'error' ||
+    (mutationStatus === 'success' && connectionStatus !== 'connected')
+  ) {
+    return { text: 'Failed', textTone: 'error', disabled: false }
+  }
+
+  if (mutationStatus === 'success') {
+    const text = workflowsUpdated
+      ? `Synced (${workflowsUpdated} workflow${workflowsUpdated === 1 ? '' : 's'})`
+      : 'Refreshed'
+    return { text, textTone: undefined, disabled: true }
+  }
+
+  return { text: 'Refresh tools', textTone: undefined, disabled: false }
+}

apps/sim/app/workspace/[workspaceId]/settings/components/mcp/server-tools-label.test.ts

@@ -0,0 +1,18 @@
+import { describe, expect, it } from 'vitest'
+import { getServerToolsLabel } from './server-tools-label'
+
+describe('getServerToolsLabel', () => {
+  it('shows the persisted server error for errored connections', () => {
+    expect(getServerToolsLabel([], 'error', 'MCP error -32001: Request timed out')).toBe(
+      'MCP error -32001: Request timed out'
+    )
+  })
+
+  it('falls back when an errored connection has no persisted error', () => {
+    expect(getServerToolsLabel([], 'error', null)).toBe('Unable to connect')
+  })
+
+  it('continues showing discovered tools for healthy connections', () => {
+    expect(getServerToolsLabel([{ name: 'search' }], 'connected', null)).toBe('1 tool: search')
+  })
+})

apps/sim/app/workspace/[workspaceId]/settings/components/mcp/server-tools-label.ts

@@ -0,0 +1,20 @@
+import type { McpServer } from '@/lib/api/contracts/mcp'
+
+interface NamedTool {
+  name: string
+}
+
+export function getServerToolsLabel(
+  tools: NamedTool[],
+  connectionStatus?: McpServer['connectionStatus'],
+  lastError?: McpServer['lastError']
+): string {
+  if (connectionStatus === 'error') {
+    return lastError?.trim() || 'Unable to connect'
+  }
+
+  const count = tools.length
+  const plural = count !== 1 ? 's' : ''
+  const names = count > 0 ? `: ${tools.map((tool) => tool.name).join(', ')}` : ''
+  return `${count} tool${plural}${names}`
+}

apps/sim/app/workspace/[workspaceId]/settings/components/settings-header/settings-header.tsx

@@ -21,6 +21,7 @@ const useIsomorphicLayoutEffect = typeof window === 'undefined' ? useEffect : us
 /** The strict contract for a settings header action — rendered as a {@link Chip}, data only. */
 export interface SettingsAction {
   text: string
+  textTone?: 'error'
   icon?: ComponentType<{ className?: string }>
   variant?: 'primary' | 'destructive'
   active?: boolean
@@ -83,6 +84,7 @@ function computeSignature(c: SettingsHeaderConfig): string {
     b: c.back ? [c.back.text, c.back.icon ? 1 : 0] : null,
     a: c.actions?.map((x) => [
       x.text,
+      x.textTone ?? '',
       x.variant ?? '',
       x.active ?? false,
       x.disabled ?? false,
@@ -173,7 +175,11 @@ export function SettingsHeaderShell({ children }: { children: ReactNode }) {
                 }
                 disabled={action.disabled}
               >
-                {action.text}
+                {action.textTone === 'error' ? (
+                  <span className='text-[var(--text-error)]'>{action.text}</span>
+                ) : (
+                  action.text
+                )}
               </Chip>
             )
             return action.tooltip ? (