import React, { useState } from 'react';
import MasterTester from './MasterTester';
import MCPTestComponent from './MCPTestComponent';
import Test from './Test';
import StreamingChatTest from './StreamingChatTest';
import MCPCapabilitiesComponent from './MCPCapabilitiesComponent';
const App = () => {
const [currentPage, setCurrentPage] = useState('master-tester');
const pages = {
'master-tester': {
name: '🔬 Master Tester',
component: <MasterTester />,
description: 'Comprehensive validation suite'
},
'test': {
name: '🧪 Tool Tester',
component: <Test />,
description: 'Individual tool testing'
},
'mcp-test': {
name: '📋 MCP Test Component',
component: <MCPTestComponent />,
description: 'Basic MCP testing'
},
'streaming-chat': {
name: '💬 Streaming Chat',
component: <StreamingChatTest />,
description: 'Chat streaming test'
},
'capabilities': {
name: '⚙️ Capabilities',
component: <MCPCapabilitiesComponent />,
description: 'Server capabilities overview'
}
};
const currentPageInfo = pages[currentPage];
return (
<div style={{ minHeight: '100vh', backgroundColor: '#f8f9fa' }}>
{/* Navigation Header */}
<nav style={{
backgroundColor: '#343a40',
padding: '0',
marginBottom: '0',
boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
}}>
<div style={{
maxWidth: '1400px',
margin: '0 auto',
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
padding: '0 20px'
}}>
{/* Logo/Title */}
<div style={{
display: 'flex',
alignItems: 'center',
padding: '15px 0'
}}>
<h1 style={{
color: '#ffffff',
margin: '0',
fontSize: '1.5rem',
fontWeight: 'bold'
}}>
🚀 MCP Testing Suite
</h1>
</div>
{/* Navigation Menu */}
<div style={{
display: 'flex',
gap: '0',
alignItems: 'center'
}}>
{Object.entries(pages).map(([pageKey, pageInfo]) => (
<button
key={pageKey}
onClick={() => setCurrentPage(pageKey)}
style={{
backgroundColor: currentPage === pageKey ? '#007bff' : 'transparent',
color: '#ffffff',
border: 'none',
padding: '12px 20px',
cursor: 'pointer',
fontSize: '0.9rem',
fontWeight: currentPage === pageKey ? 'bold' : 'normal',
transition: 'all 0.2s ease',
borderRadius: '0',
whiteSpace: 'nowrap'
}}
onMouseOver={(e) => {
if (currentPage !== pageKey) {
e.target.style.backgroundColor = '#495057';
}
}}
onMouseOut={(e) => {
if (currentPage !== pageKey) {
e.target.style.backgroundColor = 'transparent';
}
}}
>
{pageInfo.name}
</button>
))}
</div>
</div>
</nav>
{/* Page Header */}
<div style={{
backgroundColor: '#ffffff',
borderBottom: '1px solid #dee2e6',
padding: '20px 0'
}}>
<div style={{
maxWidth: '1400px',
margin: '0 auto',
padding: '0 20px'
}}>
<div style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between'
}}>
<div>
<h2 style={{
margin: '0 0 5px 0',
color: '#495057',
fontSize: '1.8rem'
}}>
{currentPageInfo.name}
</h2>
<p style={{
margin: '0',
color: '#6c757d',
fontSize: '1rem'
}}>
{currentPageInfo.description}
</p>
</div>
{/* Quick Actions */}
<div style={{
display: 'flex',
gap: '10px',
alignItems: 'center'
}}>
<div style={{
fontSize: '0.85rem',
color: '#6c757d',
textAlign: 'right'
}}>
<div>🔗 Server: localhost:8000</div>
<div>📅 {new Date().toLocaleDateString()}</div>
</div>
</div>
</div>
</div>
</div>
{/* Page Content */}
<main style={{
maxWidth: '1400px',
margin: '0 auto',
padding: '0'
}}>
{currentPageInfo.component}
</main>
{/* Footer */}
<footer style={{
marginTop: '40px',
padding: '20px 0',
backgroundColor: '#343a40',
color: '#ffffff',
textAlign: 'center'
}}>
<div style={{
maxWidth: '1400px',
margin: '0 auto',
padding: '0 20px'
}}>
<p style={{
margin: '0',
fontSize: '0.9rem',
opacity: '0.8'
}}>
🔬 MCP Testing Suite | Validate all your MCP server capabilities
</p>
</div>
</footer>
</div>
);
};
export default App;
