feat: add MCP configuration page to frontend settings UI (#1211)

* feat: add MCP configuration page to frontend settings UI

Adds a dedicated MCP configuration page at /mcp-config that displays:
- SSE endpoint URL for connecting MCP clients with one-click copy
- Claude Desktop configuration JSON with copy-to-clipboard
- OAuth authorization URL for browser-based MCP client login
- Documentation link to the MCP Server README
- Accordion listing all 22 available tools grouped by category (Read, Simulate, Write) and 2 resources

Adds VITE_MCP_SERVER_URL environment variable (defaults to http://localhost:8091),
Bot icon nav item in the sidebar, and route in App.tsx.

* fix: resolve ESLint consistent-type-imports violation in test mock

* fix: add clipboard error handling, timer cleanup, and stable README link

- Wrap navigator.clipboard.writeText in try/catch to prevent unhandled rejections
- Store timeout ID in ref and clear on unmount to prevent setState after unmount
- Replace repo-relative href with stable GitHub URL for the MCP Server README

* refactor: improve test isolation with afterEach cleanup and seeded context

---------

Co-authored-by: Ben Coombs <bjcoombs@users.noreply.github.com>

Author: bjcoombs

frontend/src/App.tsx

@@ -38,6 +38,7 @@ import { ReconciliationPage } from '@/pages/reconciliation'
 import { ReconciliationDetailPage } from '@/pages/reconciliation/detail'
 import { DashboardPage } from '@/pages/dashboard'
 import { ManifestsPage } from '@/pages/manifests'
+import { McpConfigPage } from '@/pages/mcp-config'
 
 // Placeholder page components - replaced as each page task is implemented
 function PlaceholderPage({ title }: { title: string }) {
@@ -160,6 +161,7 @@ function AppShellLayout() {
         <Route path="/gateway-mappings" element={<MappingsPage />} />
         <Route path="/gateway-mappings/:mappingId" element={<MappingDetailPage />} />
         <Route path="/manifests" element={<ManifestsPage />} />
+        <Route path="/mcp-config" element={<McpConfigPage />} />
         <Route path="/audit-log" element={<AuditLogPage />} />
 
         {/* Platform-only routes */}

frontend/src/components/layout/sidebar.tsx

@@ -17,6 +17,7 @@ import {
   ClipboardList,
   CheckSquare,
   FileJson,
+  Bot,
 } from 'lucide-react'
 import { cn } from '@/lib/utils'
 
@@ -41,6 +42,7 @@ const TENANT_NAV_ITEMS: NavItem[] = [
   { label: 'Reference Data', href: '/reference-data', icon: Database },
   { label: 'Gateway Mappings', href: '/gateway-mappings', icon: Map },
   { label: 'Manifests', href: '/manifests', icon: FileJson },
+  { label: 'MCP Config', href: '/mcp-config', icon: Bot },
   { label: 'Audit Log', href: '/audit-log', icon: ClipboardList },
 ]
 

frontend/src/pages/mcp-config/index.test.tsx

@@ -0,0 +1,241 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { render, screen, waitFor, act } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { MemoryRouter } from 'react-router-dom'
+import { McpConfigPage } from './index'
+
+// Mock tenant context for tests that need a specific tenant
+vi.mock('@/contexts/tenant-context', () => ({
+  useTenantContext: vi.fn(() => ({
+    tenantSlug: 'test-tenant',
+    currentTenant: { id: 'tid', slug: 'test-tenant', name: 'Test Tenant' },
+    isPlatformAdmin: false,
+    switchTenant: vi.fn(),
+    clearTenant: vi.fn(),
+  })),
+}))
+
+import { useTenantContext } from '@/contexts/tenant-context'
+
+function Wrapper({ children }: { children: React.ReactNode }) {
+  return <MemoryRouter>{children}</MemoryRouter>
+}
+
+const defaultTenantContext = {
+  tenantSlug: 'test-tenant',
+  currentTenant: { id: 'tid', slug: 'test-tenant', name: 'Test Tenant' },
+  isPlatformAdmin: false,
+  switchTenant: vi.fn(),
+  clearTenant: vi.fn(),
+}
+
+describe('McpConfigPage', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    vi.mocked(useTenantContext).mockReturnValue(defaultTenantContext)
+  })
+
+  afterEach(() => {
+    vi.unstubAllGlobals()
+  })
+
+  describe('rendering', () => {
+    it('renders page title and description', () => {
+      render(<McpConfigPage />, { wrapper: Wrapper })
+
+      expect(screen.getByRole('heading', { name: /MCP Configuration/i })).toBeInTheDocument()
+      expect(screen.getByText(/Model Context Protocol/i)).toBeInTheDocument()
+    })
+
+    it('renders server connection section with SSE URL', () => {
+      render(<McpConfigPage />, { wrapper: Wrapper })
+
+      expect(screen.getByText('Server Connection')).toBeInTheDocument()
+      expect(screen.getByTestId('sse-url')).toHaveTextContent('/sse')
+    })
+
+    it('renders Claude Desktop config section with JSON', () => {
+      render(<McpConfigPage />, { wrapper: Wrapper })
+
+      expect(screen.getByText('Claude Desktop Configuration')).toBeInTheDocument()
+      const configEl = screen.getByTestId('claude-desktop-config')
+      expect(configEl).toHaveTextContent('mcpServers')
+      expect(configEl).toHaveTextContent('meridian')
+      expect(configEl).toHaveTextContent('mcp-remote')
+    })
+
+    it('renders OAuth authorization section', () => {
+      render(<McpConfigPage />, { wrapper: Wrapper })
+
+      expect(screen.getByText('OAuth Authorization')).toBeInTheDocument()
+      expect(screen.getByTestId('oauth-url')).toHaveTextContent('/oauth/authorize')
+    })
+
+    it('renders documentation link', () => {
+      render(<McpConfigPage />, { wrapper: Wrapper })
+
+      const link = screen.getByTestId('readme-link')
+      expect(link).toBeInTheDocument()
+      expect(link).toHaveTextContent('MCP Server README')
+      expect(link).toHaveAttribute('target', '_blank')
+    })
+
+    it('renders MCP tools accordion', () => {
+      render(<McpConfigPage />, { wrapper: Wrapper })
+
+      expect(screen.getByText('Available Capabilities')).toBeInTheDocument()
+      expect(screen.getByText('Read Tools')).toBeInTheDocument()
+      expect(screen.getByText('Simulate Tools')).toBeInTheDocument()
+      expect(screen.getByText('Write Tools')).toBeInTheDocument()
+      expect(screen.getByText('Resources')).toBeInTheDocument()
+    })
+
+    it('shows tenant badge when tenant is selected', () => {
+      vi.mocked(useTenantContext).mockReturnValue({
+        tenantSlug: 'my-tenant',
+        currentTenant: { id: 'tid', slug: 'my-tenant', name: 'My Tenant' },
+        isPlatformAdmin: false,
+        switchTenant: vi.fn(),
+        clearTenant: vi.fn(),
+      })
+
+      render(<McpConfigPage />, { wrapper: Wrapper })
+
+      expect(screen.getByText('Tenant: my-tenant')).toBeInTheDocument()
+    })
+
+    it('does not show tenant badge when no tenant selected', () => {
+      vi.mocked(useTenantContext).mockReturnValue({
+        tenantSlug: null,
+        currentTenant: null,
+        isPlatformAdmin: true,
+        switchTenant: vi.fn(),
+        clearTenant: vi.fn(),
+      })
+
+      render(<McpConfigPage />, { wrapper: Wrapper })
+
+      expect(screen.queryByText(/Tenant:/)).not.toBeInTheDocument()
+    })
+  })
+
+  describe('copy to clipboard', () => {
+    it('copies SSE URL on button click', async () => {
+      const writeText = vi.fn().mockResolvedValue(undefined)
+      vi.stubGlobal('navigator', { ...navigator, clipboard: { writeText } })
+
+      render(<McpConfigPage />, { wrapper: Wrapper })
+
+      const copyButton = screen.getByRole('button', { name: /Copy SSE URL/i })
+      await act(async () => {
+        copyButton.click()
+      })
+
+      expect(writeText).toHaveBeenCalledWith(expect.stringContaining('/sse'))
+    })
+
+    it('shows Copied! feedback after clicking copy', async () => {
+      const writeText = vi.fn().mockResolvedValue(undefined)
+      vi.stubGlobal('navigator', { ...navigator, clipboard: { writeText } })
+
+      render(<McpConfigPage />, { wrapper: Wrapper })
+
+      const copyButton = screen.getByRole('button', { name: /Copy SSE URL/i })
+      await act(async () => {
+        copyButton.click()
+      })
+
+      await waitFor(() => {
+        expect(screen.getByText('Copied!')).toBeInTheDocument()
+      })
+    })
+
+    it('copies Claude Desktop config on button click', async () => {
+      const writeText = vi.fn().mockResolvedValue(undefined)
+      vi.stubGlobal('navigator', { ...navigator, clipboard: { writeText } })
+
+      render(<McpConfigPage />, { wrapper: Wrapper })
+
+      const copyButton = screen.getByRole('button', { name: /Copy Claude Desktop config/i })
+      await act(async () => {
+        copyButton.click()
+      })
+
+      expect(writeText).toHaveBeenCalledWith(expect.stringContaining('mcpServers'))
+    })
+
+    it('copies OAuth URL on button click', async () => {
+      const writeText = vi.fn().mockResolvedValue(undefined)
+      vi.stubGlobal('navigator', { ...navigator, clipboard: { writeText } })
+
+      render(<McpConfigPage />, { wrapper: Wrapper })
+
+      const copyButton = screen.getByRole('button', { name: /Copy OAuth URL/i })
+      await act(async () => {
+        copyButton.click()
+      })
+
+      expect(writeText).toHaveBeenCalledWith(expect.stringContaining('/oauth/authorize'))
+    })
+  })
+
+  describe('MCP tools accordion', () => {
+    it('expands Read Tools accordion and shows tool names', async () => {
+      const user = userEvent.setup({ writeToClipboard: false })
+      render(<McpConfigPage />, { wrapper: Wrapper })
+
+      const readToolsTrigger = screen.getByRole('button', { name: /Read Tools/i })
+      await user.click(readToolsTrigger)
+
+      await waitFor(() => {
+        expect(screen.getByText('meridian_economy_structure')).toBeInTheDocument()
+        expect(screen.getByText('meridian_instruments_list')).toBeInTheDocument()
+      })
+    })
+
+    it('expands Simulate Tools accordion and shows tool names', async () => {
+      const user = userEvent.setup({ writeToClipboard: false })
+      render(<McpConfigPage />, { wrapper: Wrapper })
+
+      const simulateTrigger = screen.getByRole('button', { name: /Simulate Tools/i })
+      await user.click(simulateTrigger)
+
+      await waitFor(() => {
+        expect(screen.getByText('meridian_cel_validate')).toBeInTheDocument()
+        expect(screen.getByText('meridian_saga_simulate')).toBeInTheDocument()
+      })
+    })
+
+    it('expands Write Tools accordion and shows tool names', async () => {
+      const user = userEvent.setup({ writeToClipboard: false })
+      render(<McpConfigPage />, { wrapper: Wrapper })
+
+      const writeTrigger = screen.getByRole('button', { name: /Write Tools/i })
+      await user.click(writeTrigger)
+
+      await waitFor(() => {
+        expect(screen.getByText('meridian_manifest_apply')).toBeInTheDocument()
+      })
+    })
+
+    it('expands Resources accordion and shows resource URIs', async () => {
+      const user = userEvent.setup({ writeToClipboard: false })
+      render(<McpConfigPage />, { wrapper: Wrapper })
+
+      const resourcesTrigger = screen.getByRole('button', { name: /Resources/i })
+      await user.click(resourcesTrigger)
+
+      await waitFor(() => {
+        expect(screen.getByText('meridian://tenant/manifest/current')).toBeInTheDocument()
+      })
+    })
+
+    it('displays tool and resource counts in badges', () => {
+      render(<McpConfigPage />, { wrapper: Wrapper })
+
+      // Total: 13 read + 8 simulate + 1 write = 22 tools, 2 resources
+      expect(screen.getByText('22 tools')).toBeInTheDocument()
+      expect(screen.getByText('2 resources')).toBeInTheDocument()
+    })
+  })
+})