Skip to content

Commit 0cf344b

Browse files
committed
Move "history and notifications" pane to bottom
1 parent a507baf commit 0cf344b

File tree

3 files changed

+119
-119
lines changed

3 files changed

+119
-119
lines changed

client/src/App.tsx

Lines changed: 116 additions & 116 deletions
Original file line numberDiff line numberDiff line change
@@ -355,125 +355,125 @@ const App = () => {
355355
onConnect={connectMcpServer}
356356
/>
357357
<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+
/>
468460
</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+
/>
471475
</div>
472476
</div>
473-
<HistoryAndNotifications
474-
requestHistory={requestHistory}
475-
serverNotifications={notifications}
476-
/>
477477
</div>
478478
);
479479
};

client/src/components/History.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -29,8 +29,8 @@ const HistoryAndNotifications = ({
2929
};
3030

3131
return (
32-
<div className="w-64 bg-card shadow-md p-4 overflow-hidden flex flex-col h-full">
33-
<div className="flex-1 overflow-y-auto mb-4 border-b pb-4">
32+
<div className="bg-card p-4 overflow-hidden flex h-full">
33+
<div className="flex-1 overflow-y-auto px-4 border-r">
3434
<h2 className="text-lg font-semibold mb-4">History</h2>
3535
{requestHistory.length === 0 ? (
3636
<p className="text-sm text-gray-500 italic">No history yet</p>
@@ -107,7 +107,7 @@ const HistoryAndNotifications = ({
107107
</ul>
108108
)}
109109
</div>
110-
<div className="flex-1 overflow-y-auto">
110+
<div className="flex-1 overflow-y-auto px-4">
111111
<h2 className="text-lg font-semibold mb-4">Server Notifications</h2>
112112
{serverNotifications.length === 0 ? (
113113
<p className="text-sm text-gray-500 italic">No notifications yet</p>

client/src/components/HistoryAndNotifications.tsx

Whitespace-only changes.

0 commit comments

Comments
 (0)