hzhang/inspector
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Move "history and notifications" pane to bottom

Browse Source
This commit is contained in:
Justin Spahr-Summers
2024-11-12 14:35:53 +00:00
parent a507bafc3e
commit 0cf344bb6a
3 changed files with 118 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

230
client/src/App.tsx
View File

@@ -355,125 +355,125 @@ const App = () => {
onConnect={connectMcpServer} onConnect={connectMcpServer}
/> />
<div className="flex-1 flex flex-col overflow-hidden"> <div className="flex-1 flex flex-col overflow-hidden">
<div className="flex-1 overflow-auto flex"> <div className="flex-1 overflow-auto">
<div className="flex-1"> {mcpClient ? (
{mcpClient ? ( <Tabs defaultValue="resources" className="w-full p-4">
<Tabs defaultValue="resources" className="w-full p-4"> <TabsList className="mb-4 p-0">
<TabsList className="mb-4 p-0"> <TabsTrigger value="resources">
<TabsTrigger value="resources"> <Files className="w-4 h-4 mr-2" />
<Files className="w-4 h-4 mr-2" /> Resources
Resources </TabsTrigger>
</TabsTrigger> <TabsTrigger value="prompts">
<TabsTrigger value="prompts"> <MessageSquare className="w-4 h-4 mr-2" />
<MessageSquare className="w-4 h-4 mr-2" /> Prompts
Prompts </TabsTrigger>
</TabsTrigger> <TabsTrigger value="requests" disabled>
<TabsTrigger value="requests" disabled> <Send className="w-4 h-4 mr-2" />
<Send className="w-4 h-4 mr-2" /> Requests
Requests </TabsTrigger>
</TabsTrigger> <TabsTrigger value="tools">
<TabsTrigger value="tools"> <Hammer className="w-4 h-4 mr-2" />
<Hammer className="w-4 h-4 mr-2" /> Tools
Tools </TabsTrigger>
</TabsTrigger> <TabsTrigger value="console" disabled>
<TabsTrigger value="console" disabled> <Terminal className="w-4 h-4 mr-2" />
<Terminal className="w-4 h-4 mr-2" /> Console
Console </TabsTrigger>
</TabsTrigger> <TabsTrigger value="ping">
<TabsTrigger value="ping"> <Bell className="w-4 h-4 mr-2" />
<Bell className="w-4 h-4 mr-2" /> Ping
Ping </TabsTrigger>
</TabsTrigger> <TabsTrigger value="sampling" className="relative">
<TabsTrigger value="sampling" className="relative"> <Hash className="w-4 h-4 mr-2" />
<Hash className="w-4 h-4 mr-2" /> Sampling
Sampling {pendingSampleRequests.length > 0 && (
{pendingSampleRequests.length > 0 && ( <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">
<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"> {pendingSampleRequests.length}
{pendingSampleRequests.length} </span>
</span> )}
)} </TabsTrigger>
</TabsTrigger> <TabsTrigger value="roots">
<TabsTrigger value="roots"> <FolderTree className="w-4 h-4 mr-2" />
<FolderTree className="w-4 h-4 mr-2" /> Roots
Roots </TabsTrigger>
</TabsTrigger> </TabsList>
</TabsList>
<div className="w-full"> <div className="w-full">
<ResourcesTab <ResourcesTab
resources={resources} resources={resources}
resourceTemplates={resourceTemplates} resourceTemplates={resourceTemplates}
listResources={listResources} listResources={listResources}
listResourceTemplates={listResourceTemplates} listResourceTemplates={listResourceTemplates}
readResource={readResource} readResource={readResource}
selectedResource={selectedResource} selectedResource={selectedResource}
setSelectedResource={setSelectedResource} setSelectedResource={setSelectedResource}
resourceContent={resourceContent} resourceContent={resourceContent}
nextCursor={nextResourceCursor} nextCursor={nextResourceCursor}
nextTemplateCursor={nextResourceTemplateCursor} nextTemplateCursor={nextResourceTemplateCursor}
error={error} error={error}
/> />
<PromptsTab <PromptsTab
prompts={prompts} prompts={prompts}
listPrompts={listPrompts} listPrompts={listPrompts}
getPrompt={getPrompt} getPrompt={getPrompt}
selectedPrompt={selectedPrompt} selectedPrompt={selectedPrompt}
setSelectedPrompt={setSelectedPrompt} setSelectedPrompt={setSelectedPrompt}
promptContent={promptContent} promptContent={promptContent}
nextCursor={nextPromptCursor} nextCursor={nextPromptCursor}
error={error} error={error}
/> />
<RequestsTab /> <RequestsTab />
<ToolsTab <ToolsTab
tools={tools} tools={tools}
listTools={listTools} listTools={listTools}
callTool={callTool} callTool={callTool}
selectedTool={selectedTool} selectedTool={selectedTool}
setSelectedTool={(tool) => { setSelectedTool={(tool) => {
setSelectedTool(tool); setSelectedTool(tool);
setToolResult(null); setToolResult(null);
}} }}
toolResult={toolResult} toolResult={toolResult}
nextCursor={nextToolCursor} nextCursor={nextToolCursor}
error={error} error={error}
/> />
<ConsoleTab /> <ConsoleTab />
<PingTab <PingTab
onPingClick={() => { onPingClick={() => {
void makeRequest( void makeRequest(
{ {
method: "ping" as const, method: "ping" as const,
}, },
EmptyResultSchema, EmptyResultSchema,
); );
}} }}
/> />
<SamplingTab <SamplingTab
pendingRequests={pendingSampleRequests} pendingRequests={pendingSampleRequests}
onApprove={handleApproveSampling} onApprove={handleApproveSampling}
onReject={handleRejectSampling} onReject={handleRejectSampling}
/> />
<RootsTab <RootsTab
roots={roots} roots={roots}
setRoots={setRoots} setRoots={setRoots}
onRootsChange={handleRootsChange} onRootsChange={handleRootsChange}
/> />
</div>
</Tabs>
) : (
<div className="flex items-center justify-center h-full">
<p className="text-lg text-gray-500">
Connect to an MCP server to start inspecting
</p>
</div> </div>
)} </Tabs>
</div> ) : (
<div className="flex items-center justify-center h-full">
<p className="text-lg text-gray-500">
Connect to an MCP server to start inspecting
</p>
</div>
)}
</div>
<div className="h-1/3 min-h-[200px] border-t border-border">
<HistoryAndNotifications
requestHistory={requestHistory}
serverNotifications={notifications}
/>
</div> </div>
</div> </div>
<HistoryAndNotifications
requestHistory={requestHistory}
serverNotifications={notifications}
/>
</div> </div>
); );
}; };

6
client/src/components/History.tsx
View File

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

0
client/src/components/HistoryAndNotifications.tsx
View File