@@ -355,125 +355,125 @@ const App = () => {
355
355
onConnect = { connectMcpServer }
356
356
/>
357
357
< div className = "flex-1 flex flex-col overflow-hidden" >
358
- < div className = "flex-1 overflow-auto flex" >
359
- < div className = "flex-1" >
360
- { mcpClient ? (
361
- < Tabs defaultValue = "resources" className = "w-full p-4" >
362
- < TabsList className = "mb-4 p-0" >
363
- < TabsTrigger value = "resources" >
364
- < Files className = "w-4 h-4 mr-2" />
365
- Resources
366
- </ TabsTrigger >
367
- < TabsTrigger value = "prompts" >
368
- < MessageSquare className = "w-4 h-4 mr-2" />
369
- Prompts
370
- </ TabsTrigger >
371
- < TabsTrigger value = "requests" disabled >
372
- < Send className = "w-4 h-4 mr-2" />
373
- Requests
374
- </ TabsTrigger >
375
- < TabsTrigger value = "tools" >
376
- < Hammer className = "w-4 h-4 mr-2" />
377
- Tools
378
- </ TabsTrigger >
379
- < TabsTrigger value = "console" disabled >
380
- < Terminal className = "w-4 h-4 mr-2" />
381
- Console
382
- </ TabsTrigger >
383
- < TabsTrigger value = "ping" >
384
- < Bell className = "w-4 h-4 mr-2" />
385
- Ping
386
- </ TabsTrigger >
387
- < TabsTrigger value = "sampling" className = "relative" >
388
- < Hash className = "w-4 h-4 mr-2" />
389
- Sampling
390
- { pendingSampleRequests . length > 0 && (
391
- < span className = "absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-4 w-4 flex items-center justify-center" >
392
- { pendingSampleRequests . length }
393
- </ span >
394
- ) }
395
- </ TabsTrigger >
396
- < TabsTrigger value = "roots" >
397
- < FolderTree className = "w-4 h-4 mr-2" />
398
- Roots
399
- </ TabsTrigger >
400
- </ TabsList >
401
-
402
- < div className = "w-full" >
403
- < ResourcesTab
404
- resources = { resources }
405
- resourceTemplates = { resourceTemplates }
406
- listResources = { listResources }
407
- listResourceTemplates = { listResourceTemplates }
408
- readResource = { readResource }
409
- selectedResource = { selectedResource }
410
- setSelectedResource = { setSelectedResource }
411
- resourceContent = { resourceContent }
412
- nextCursor = { nextResourceCursor }
413
- nextTemplateCursor = { nextResourceTemplateCursor }
414
- error = { error }
415
- />
416
- < PromptsTab
417
- prompts = { prompts }
418
- listPrompts = { listPrompts }
419
- getPrompt = { getPrompt }
420
- selectedPrompt = { selectedPrompt }
421
- setSelectedPrompt = { setSelectedPrompt }
422
- promptContent = { promptContent }
423
- nextCursor = { nextPromptCursor }
424
- error = { error }
425
- />
426
- < RequestsTab />
427
- < ToolsTab
428
- tools = { tools }
429
- listTools = { listTools }
430
- callTool = { callTool }
431
- selectedTool = { selectedTool }
432
- setSelectedTool = { ( tool ) => {
433
- setSelectedTool ( tool ) ;
434
- setToolResult ( null ) ;
435
- } }
436
- toolResult = { toolResult }
437
- nextCursor = { nextToolCursor }
438
- error = { error }
439
- />
440
- < ConsoleTab />
441
- < PingTab
442
- onPingClick = { ( ) => {
443
- void makeRequest (
444
- {
445
- method : "ping" as const ,
446
- } ,
447
- EmptyResultSchema ,
448
- ) ;
449
- } }
450
- />
451
- < SamplingTab
452
- pendingRequests = { pendingSampleRequests }
453
- onApprove = { handleApproveSampling }
454
- onReject = { handleRejectSampling }
455
- />
456
- < RootsTab
457
- roots = { roots }
458
- setRoots = { setRoots }
459
- onRootsChange = { handleRootsChange }
460
- />
461
- </ div >
462
- </ Tabs >
463
- ) : (
464
- < div className = "flex items-center justify-center h-full" >
465
- < p className = "text-lg text-gray-500" >
466
- Connect to an MCP server to start inspecting
467
- </ p >
358
+ < div className = "flex-1 overflow-auto" >
359
+ { mcpClient ? (
360
+ < Tabs defaultValue = "resources" className = "w-full p-4" >
361
+ < TabsList className = "mb-4 p-0" >
362
+ < TabsTrigger value = "resources" >
363
+ < Files className = "w-4 h-4 mr-2" />
364
+ Resources
365
+ </ TabsTrigger >
366
+ < TabsTrigger value = "prompts" >
367
+ < MessageSquare className = "w-4 h-4 mr-2" />
368
+ Prompts
369
+ </ TabsTrigger >
370
+ < TabsTrigger value = "requests" disabled >
371
+ < Send className = "w-4 h-4 mr-2" />
372
+ Requests
373
+ </ TabsTrigger >
374
+ < TabsTrigger value = "tools" >
375
+ < Hammer className = "w-4 h-4 mr-2" />
376
+ Tools
377
+ </ TabsTrigger >
378
+ < TabsTrigger value = "console" disabled >
379
+ < Terminal className = "w-4 h-4 mr-2" />
380
+ Console
381
+ </ TabsTrigger >
382
+ < TabsTrigger value = "ping" >
383
+ < Bell className = "w-4 h-4 mr-2" />
384
+ Ping
385
+ </ TabsTrigger >
386
+ < TabsTrigger value = "sampling" className = "relative" >
387
+ < Hash className = "w-4 h-4 mr-2" />
388
+ Sampling
389
+ { pendingSampleRequests . length > 0 && (
390
+ < span className = "absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-4 w-4 flex items-center justify-center" >
391
+ { pendingSampleRequests . length }
392
+ </ span >
393
+ ) }
394
+ </ TabsTrigger >
395
+ < TabsTrigger value = "roots" >
396
+ < FolderTree className = "w-4 h-4 mr-2" />
397
+ Roots
398
+ </ TabsTrigger >
399
+ </ TabsList >
400
+
401
+ < div className = "w-full" >
402
+ < ResourcesTab
403
+ resources = { resources }
404
+ resourceTemplates = { resourceTemplates }
405
+ listResources = { listResources }
406
+ listResourceTemplates = { listResourceTemplates }
407
+ readResource = { readResource }
408
+ selectedResource = { selectedResource }
409
+ setSelectedResource = { setSelectedResource }
410
+ resourceContent = { resourceContent }
411
+ nextCursor = { nextResourceCursor }
412
+ nextTemplateCursor = { nextResourceTemplateCursor }
413
+ error = { error }
414
+ />
415
+ < PromptsTab
416
+ prompts = { prompts }
417
+ listPrompts = { listPrompts }
418
+ getPrompt = { getPrompt }
419
+ selectedPrompt = { selectedPrompt }
420
+ setSelectedPrompt = { setSelectedPrompt }
421
+ promptContent = { promptContent }
422
+ nextCursor = { nextPromptCursor }
423
+ error = { error }
424
+ />
425
+ < RequestsTab />
426
+ < ToolsTab
427
+ tools = { tools }
428
+ listTools = { listTools }
429
+ callTool = { callTool }
430
+ selectedTool = { selectedTool }
431
+ setSelectedTool = { ( tool ) => {
432
+ setSelectedTool ( tool ) ;
433
+ setToolResult ( null ) ;
434
+ } }
435
+ toolResult = { toolResult }
436
+ nextCursor = { nextToolCursor }
437
+ error = { error }
438
+ />
439
+ < ConsoleTab />
440
+ < PingTab
441
+ onPingClick = { ( ) => {
442
+ void makeRequest (
443
+ {
444
+ method : "ping" as const ,
445
+ } ,
446
+ EmptyResultSchema ,
447
+ ) ;
448
+ } }
449
+ />
450
+ < SamplingTab
451
+ pendingRequests = { pendingSampleRequests }
452
+ onApprove = { handleApproveSampling }
453
+ onReject = { handleRejectSampling }
454
+ />
455
+ < RootsTab
456
+ roots = { roots }
457
+ setRoots = { setRoots }
458
+ onRootsChange = { handleRootsChange }
459
+ />
468
460
</ div >
469
- ) }
470
- </ div >
461
+ </ Tabs >
462
+ ) : (
463
+ < div className = "flex items-center justify-center h-full" >
464
+ < p className = "text-lg text-gray-500" >
465
+ Connect to an MCP server to start inspecting
466
+ </ p >
467
+ </ div >
468
+ ) }
469
+ </ div >
470
+ < div className = "h-1/3 min-h-[200px] border-t border-border" >
471
+ < HistoryAndNotifications
472
+ requestHistory = { requestHistory }
473
+ serverNotifications = { notifications }
474
+ />
471
475
</ div >
472
476
</ div >
473
- < HistoryAndNotifications
474
- requestHistory = { requestHistory }
475
- serverNotifications = { notifications }
476
- />
477
477
</ div >
478
478
) ;
479
479
} ;
0 commit comments