MCP needsApproval calls show up as generic interrupts in useChat, so the Approve/Deny UI from the docs never renders #1924

import { describe, expect, it, vi } from 'vitest'
import { EventType, chat, toolDefinition } from '@tanstack/ai'
import { z } from 'zod'
import { InterruptManager } from '../../ai-client/src/interrupt-manager'
import { createMCPClient } from '../src/client'
import { createMCPServer } from '../src/server/create-server'
import type { AnyTextAdapter, StreamChunk } from '@tanstack/ai'

const deleteNote = toolDefinition({
  name: 'delete_note',
  description: 'Delete a note by id',
  inputSchema: z.object({ id: z.string() }),
}).server(async ({ id }) => `deleted ${id}`)

const server = createMCPServer({
  name: 'notes',
  version: '1.0.0',
  tools: [deleteNote],
})

async function connect() {
  return createMCPClient({
    transport: {
      type: 'http',
      url: 'https://notes.example.com/mcp',
      fetch: (input, init) => server.fetch(new Request(input, init)),
    },
    needsApproval: () => true,
  })
}

function adapterCalling(seen: Array<string>): AnyTextAdapter {
  return {
    kind: 'text',
    name: 'mock',
    model: 'test-model',
    '~types': {
      providerOptions: {},
      inputModalities: ['text'],
      messageMetadataByModality: {
        text: undefined,
        image: undefined,
        audio: undefined,
        video: undefined,
        document: undefined,
      },
      toolCapabilities: [],
      toolCallMetadata: undefined,
      systemPromptMetadata: undefined,
    },
    chatStream: (options) => {
      const names = (options.tools ?? []).map((t) => t.name)
      seen.push(...names)
      const name = names[0]!
      return (async function* () {
        yield { type: EventType.RUN_STARTED, runId: 'r1', threadId: 't1', timestamp: 1 }
        yield { type: EventType.TOOL_CALL_START, toolCallId: 'call-1', toolCallName: name, timestamp: 1 }
        yield { type: EventType.TOOL_CALL_ARGS, toolCallId: 'call-1', delta: '{"id":"n1"}', timestamp: 1 }
        yield { type: EventType.TOOL_CALL_END, toolCallId: 'call-1', timestamp: 1 }
        yield { type: EventType.RUN_FINISHED, runId: 'r1', threadId: 't1', finishReason: 'tool_calls', timestamp: 1 }
      })() as never
    },
    structuredOutput: async () => ({ data: {}, rawText: '{}' }),
  }
}

async function serverInterrupt() {
  const mcp = await connect()
  const seen: Array<string> = []
  const emitted: Array<StreamChunk> = []
  for await (const chunk of chat({
    adapter: adapterCalling(seen),
    messages: [{ role: 'user', content: 'delete n1' }],
    runId: 'r1',
    threadId: 't1',
    mcp: { clients: [mcp] },
  })) {
    emitted.push(chunk)
  }
  const terminal = emitted.find(
    (c) => c.type === EventType.RUN_FINISHED && c.outcome?.type === 'interrupt',
  )
  if (terminal?.type !== EventType.RUN_FINISHED || terminal.outcome?.type !== 'interrupt') {
    throw new Error('no interrupt terminal')
  }
  const mcpTools = await (await connect()).tools()
  return { interrupts: terminal.outcome.interrupts, seen, mcpTools }
}

describe('MCP needsApproval -> useChat', () => {
  it('without a client definition', async () => {
    const { interrupts, seen } = await serverInterrupt()
    console.log('TOOLS SEEN BY MODEL', seen)
    console.log('INTERRUPT', JSON.stringify(interrupts, null, 2))
    const submit = vi.fn(async () => undefined)
    const manager = new InterruptManager({ tools: [], submit })
    manager.hydrate({ threadId: 't1', interruptedRunId: 'r1', generation: 0, interrupts })
    const item = manager.getInterrupts()[0]!
    console.log('NO CLIENT DEF', { kind: item.kind, canResolve: item.canResolve })
    expect(item.kind).not.toBe('tool-approval')
    ;(item as any).resolveInterrupt({ approved: true })
    await Promise.resolve()
    await Promise.resolve()
    const submission: any = (submit.mock.calls as any)[0]?.[0]
    console.log('GENERIC SUBMITTED', JSON.stringify(submission?.resolutions))

    // Resume on the server with what the generic item submitted.
    const mcp = await connect()
    const calls: Array<string> = []
    const resumed: Array<StreamChunk> = []
    for await (const chunk of chat({
      adapter: {
        ...adapterCalling([]),
        chatStream: () =>
          (async function* () {
            yield { type: EventType.RUN_STARTED, runId: 'r2', threadId: 't1', timestamp: 1 }
            yield { type: EventType.RUN_FINISHED, runId: 'r2', threadId: 't1', finishReason: 'stop', timestamp: 1 }
          })() as never,
      },
      messages: [
        { id: 'u1', role: 'user', parts: [{ type: 'text', content: 'delete n1' }] },
        {
          id: 'a1',
          role: 'assistant',
          parts: [
            {
              type: 'tool-call',
              id: 'call-1',
              name: 'delete_note',
              arguments: '{"id":"n1"}',
              input: { id: 'n1' },
              state: 'approval-requested',
              approval: { id: 'approval_call-1', needsApproval: true },
            },
          ],
        },
      ] as never,
      threadId: 't1',
      runId: 'r2',
      parentRunId: 'r1',
      resume: submission.resolutions,
      mcp: { clients: [mcp] },
    })) {
      resumed.push(chunk)
      if (chunk.type === EventType.TOOL_CALL_RESULT) calls.push(JSON.stringify(chunk))
    }
    console.log('RESUME CHUNKS', resumed.map((c) => c.type), calls, JSON.stringify(resumed.filter((c) => c.type === EventType.RUN_ERROR)))
  })

  it('with a client definition built from the MCP tool list', async () => {
    const { interrupts, mcpTools } = await serverInterrupt()
    const t = mcpTools[0]!
    const clientDef = toolDefinition({
      name: t.name,
      description: t.description,
      inputSchema: t.inputSchema as never,
      needsApproval: true,
    })
    const submit = vi.fn(async () => undefined)
    const manager = new InterruptManager({ tools: [clientDef] as never, submit })
    manager.hydrate({ threadId: 't1', interruptedRunId: 'r1', generation: 0, interrupts })
    const item = manager.getInterrupts()[0]!
    console.log('WITH CLIENT DEF', { kind: item.kind, canResolve: item.canResolve })
    expect(item.kind).toBe('tool-approval')
    expect(item.canResolve).toBe(true)
    if (item.kind === 'tool-approval') (item as any).resolveInterrupt(true)
    await Promise.resolve()
    await Promise.resolve()
    console.log('SUBMITTED', JSON.stringify(submit.mock.calls[0]?.[0], null, 2))
    expect(submit).toHaveBeenCalledOnce()
  })
})