claude-code/src/components/mcp/MCPToolDetailView.tsx

import React from 'react'
import { Box, Text } from '@anthropic/ink'
import {
  extractMcpToolDisplayName,
  getMcpDisplayName,
} from '../../services/mcp/mcpStringUtils.js'
import type { Tool } from '../../Tool.js'
import { ConfigurableShortcutHint } from '../ConfigurableShortcutHint.js'
import { Dialog } from '@anthropic/ink'
import type { ServerInfo } from './types.js'

type Props = {
  tool: Tool
  server: ServerInfo
  onBack: () => void
}

export function MCPToolDetailView({
  tool,
  server,
  onBack,
}: Props): React.ReactNode {
  const [toolDescription, setToolDescription] = React.useState<string>('')

  const toolName = getMcpDisplayName(tool.name, server.name)
  const fullDisplayName = tool.userFacingName
    ? tool.userFacingName({})
    : toolName
  const displayName = extractMcpToolDisplayName(fullDisplayName)

  const isReadOnly = tool.isReadOnly?.({}) ?? false
  const isDestructive = tool.isDestructive?.({}) ?? false
  const isOpenWorld = tool.isOpenWorld?.({}) ?? false

  React.useEffect(() => {
    async function loadDescription() {
      try {
        const desc = await tool.description(
          {},
          {
            isNonInteractiveSession: false,
            toolPermissionContext: {
              mode: 'default' as const,
              additionalWorkingDirectories: new Map(),
              alwaysAllowRules: {},
              alwaysDenyRules: {},
              alwaysAskRules: {},
              isBypassPermissionsModeAvailable: false,
            },
            tools: [],
          },
        )
        setToolDescription(desc)
      } catch {
        setToolDescription('Failed to load description')
      }
    }
    void loadDescription()
  }, [tool])

  const titleContent = (
    <>
      {displayName}
      {isReadOnly && <Text color="success"> [read-only]</Text>}
      {isDestructive && <Text color="error"> [destructive]</Text>}
      {isOpenWorld && <Text dimColor> [open-world]</Text>}
    </>
  )

  return (
    <Dialog
      title={titleContent}
      subtitle={server.name}
      onCancel={onBack}
      inputGuide={exitState =>
        exitState.pending ? (
          <Text>Press {exitState.keyName} again to exit</Text>
        ) : (
          <ConfigurableShortcutHint
            action="confirm:no"
            context="Confirmation"
            fallback="Esc"
            description="go back"
          />
        )
      }
    >
      <Box flexDirection="column">
        <Box>
          <Text bold>Tool name: </Text>
          <Text dimColor>{toolName}</Text>
        </Box>

        <Box>
          <Text bold>Full name: </Text>
          <Text dimColor>{tool.name}</Text>
        </Box>

        {toolDescription && (
          <Box flexDirection="column" marginTop={1}>
            <Text bold>Description:</Text>
            <Text wrap="wrap">{toolDescription}</Text>
          </Box>
        )}

        {tool.inputJSONSchema &&
          tool.inputJSONSchema.properties &&
          Object.keys(tool.inputJSONSchema.properties).length > 0 && (
            <Box flexDirection="column" marginTop={1}>
              <Text bold>Parameters:</Text>
              <Box marginLeft={2} flexDirection="column">
                {Object.entries(tool.inputJSONSchema.properties).map(
                  ([key, value]) => {
                    const required = tool.inputJSONSchema?.required as
                      | string[]
                      | undefined
                    const isRequired = required?.includes(key)
                    return (
                      <Text key={key}>
                        • {key}
                        {isRequired && <Text dimColor> (required)</Text>}:{' '}
                        <Text dimColor>
                          {typeof value === 'object' && value && 'type' in value
                            ? String(value.type)
                            : 'unknown'}
                        </Text>
                        {typeof value === 'object' &&
                          value &&
                          'description' in value && (
                            <Text dimColor> - {String(value.description)}</Text>
                          )}
                      </Text>
                    )
                  },
                )}
              </Box>
            </Box>
          )}
      </Box>
    </Dialog>
  )
}