Skip to content

Commit 0951966

Browse files
tonxxdtonxxd
committed
refactor(inspector): adjust layout and panel sizes for improved UI consistency
- Update border color in Layout component for better visual distinction. - Modify default sizes of ResizablePanels in PromptsTab, ResourcesTab, and ToolsTab for enhanced layout balance. - Introduce Wrench icon in ToolsTab for improved tool identification and user interaction. - Replace loading spinner with a new Spinner component for consistent loading indicators.
1 parent c558b6b commit 0951966

File tree

4 files changed

+46
-25
lines changed

4 files changed

+46
-25
lines changed

‎packages/inspector/src/client/components/Layout.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -458,7 +458,7 @@ export function Layout({ children }: LayoutProps) {
458458
</header>
459459

460460
{/* Main Content */}
461-
<main className="flex-1 max-w-screen-2xl w-full mx-auto bg-white dark:bg-zinc-800 rounded-2xl border border-zinc-100 dark:border-zinc-700 p-0 overflow-auto">
461+
<main className="flex-1 max-w-screen-2xl w-full mx-auto bg-white dark:bg-zinc-800 rounded-2xl border border-zinc-200 dark:border-zinc-700 p-0 overflow-auto">
462462
{selectedServer && activeTab === 'tools'
463463
? (
464464
<ToolsTab

‎packages/inspector/src/client/components/PromptsTab.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -239,7 +239,7 @@ export function PromptsTab({ prompts, callPrompt, isConnected }: PromptsTabProps
239239

240240
return (
241241
<ResizablePanelGroup direction="horizontal" className="h-full">
242-
<ResizablePanel defaultSize={60}>
242+
<ResizablePanel defaultSize={33}>
243243
{/* Left pane: Prompts list with search */}
244244
<div className="flex flex-col h-full border-r dark:border-zinc-700 p-6 bg-white dark:bg-zinc-800">
245245
<div className="p-0 ">
@@ -305,7 +305,7 @@ export function PromptsTab({ prompts, callPrompt, isConnected }: PromptsTabProps
305305

306306
<ResizableHandle withHandle />
307307

308-
<ResizablePanel defaultSize={40}>
308+
<ResizablePanel defaultSize={67}>
309309
{/* Right pane: Prompt details and execution */}
310310
<div className="flex flex-col h-full bg-white dark:bg-zinc-800 p-6">
311311
{selectedPrompt ? (

‎packages/inspector/src/client/components/ResourcesTab.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -152,7 +152,7 @@ export function ResourcesTab({ resources, readResource, isConnected }: Resources
152152

153153
return (
154154
<ResizablePanelGroup direction="horizontal" className="h-full">
155-
<ResizablePanel defaultSize={60}>
155+
<ResizablePanel defaultSize={33}>
156156
{/* Left pane: Resources list with search */}
157157
<div className="flex flex-col h-full border-r dark:border-zinc-700 p-6 bg-white dark:bg-zinc-800">
158158
<div className="p-0 ">
@@ -231,7 +231,7 @@ export function ResourcesTab({ resources, readResource, isConnected }: Resources
231231

232232
<ResizableHandle withHandle />
233233

234-
<ResizablePanel defaultSize={40}>
234+
<ResizablePanel defaultSize={67}>
235235
{/* Right pane: Resource details and content */}
236236
<div className="flex flex-col h-full bg-white dark:bg-zinc-800 p-6">
237237
{selectedResource

‎packages/inspector/src/client/components/ToolsTab.tsx‎

Lines changed: 41 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import type { Tool } from '@modelcontextprotocol/sdk/types.js'
2-
import { Check, Clock, Copy, Play, Save, Search, Trash2, Zap } from 'lucide-react'
2+
import { Check, Clock, Copy, Play, Save, Search, Trash2, Wrench, Zap } from 'lucide-react'
33
import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
44
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
55
import { usePrismTheme } from '@/client/hooks/usePrismTheme'
@@ -13,8 +13,10 @@ import {
1313
ResizablePanel,
1414
ResizablePanelGroup,
1515
} from '@/components/ui/resizable'
16+
import { Spinner } from '@/components/ui/spinner'
1617
import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs'
1718
import { Textarea } from '@/components/ui/textarea'
19+
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
1820
import { cn } from '@/lib/utils'
1921
import { isMcpUIResource, McpUIRenderer } from './McpUIRenderer'
2022

@@ -313,7 +315,7 @@ export function ToolsTab({ tools, callTool, isConnected }: ToolsTabProps) {
313315

314316
return (
315317
<ResizablePanelGroup direction="horizontal" className="h-full">
316-
<ResizablePanel defaultSize={60}>
318+
<ResizablePanel defaultSize={33}>
317319
{/* Left pane: Tools list with search */}
318320
<div className="flex flex-col h-full border-r dark:border-zinc-700 p-6 bg-white dark:bg-zinc-800">
319321
<div className="p-0 ">
@@ -427,7 +429,7 @@ export function ToolsTab({ tools, callTool, isConnected }: ToolsTabProps) {
427429
</div>
428430
</ResizablePanel>
429431
<ResizableHandle withHandle />
430-
<ResizablePanel defaultSize={40}>
432+
<ResizablePanel defaultSize={67}>
431433

432434
<ResizablePanelGroup direction="vertical">
433435
<ResizablePanel defaultSize={40}>
@@ -437,10 +439,40 @@ export function ToolsTab({ tools, callTool, isConnected }: ToolsTabProps) {
437439
{selectedTool
438440
? (
439441
<div className="flex flex-col h-full">
440-
<div className="p-4 border-b dark:border-zinc-700 bg-gray-50 dark:bg-zinc-700">
442+
<div className="p-4 ">
441443
<div className="flex items-center justify-between">
442444
<div className="flex items-center gap-2">
443-
<Badge variant="outline">{selectedTool.name}</Badge>
445+
<div className="space-x-2 flex items-center">
446+
<span className="bg-blue-100 text-blue-400 rounded-full p-2 aspect-square flex items-center justify-center">
447+
<Wrench className="size-4" />
448+
</span>
449+
<div>
450+
<h3 className="text-sm font-medium text-gray-900 dark:text-gray-100">
451+
{selectedTool.name}
452+
</h3>
453+
{selectedTool.description && (
454+
<p className="text-sm text-gray-600 dark:text-gray-300">{selectedTool.description}</p>
455+
)}
456+
</div>
457+
</div>
458+
459+
</div>
460+
<div className="flex items-center gap-2">
461+
<Tooltip>
462+
<TooltipTrigger asChild>
463+
<Button
464+
variant="ghost"
465+
size="sm"
466+
onClick={() => setSaveDialogOpen(true)}
467+
disabled={!selectedTool}
468+
>
469+
<Save className="h-4 w-4" />
470+
</Button>
471+
</TooltipTrigger>
472+
<TooltipContent>
473+
<p>Save request</p>
474+
</TooltipContent>
475+
</Tooltip>
444476
<Button
445477
onClick={executeTool}
446478
disabled={!isConnected || isExecuting}
@@ -449,31 +481,20 @@ export function ToolsTab({ tools, callTool, isConnected }: ToolsTabProps) {
449481
{isExecuting
450482
? (
451483
<>
452-
<div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2" />
484+
<Spinner className="size-4 mr-1" />
453485
Executing...
454486
</>
455487
)
456488
: (
457489
<>
458-
<Play className="h-4 w-4 mr-2" />
490+
<Play className="h-4 w-4 mr-1" />
459491
Execute
460492
</>
461493
)}
462494
</Button>
463495
</div>
464-
<Button
465-
variant="outline"
466-
size="sm"
467-
onClick={() => setSaveDialogOpen(true)}
468-
disabled={!selectedTool}
469-
>
470-
<Save className="h-4 w-4 mr-2" />
471-
Save
472-
</Button>
473496
</div>
474-
{selectedTool.description && (
475-
<p className="text-sm text-gray-600 dark:text-gray-300 mt-2">{selectedTool.description}</p>
476-
)}
497+
477498
</div>
478499

479500
<div className="flex-1 overflow-y-auto p-4">
@@ -522,7 +543,7 @@ export function ToolsTab({ tools, callTool, isConnected }: ToolsTabProps) {
522543

523544
return (
524545
<div key={index} className="space-y-3">
525-
<div className={`flex items-center gap-2 px-4 pt-4 ${hasMcpUIResources ? 'border-b border-gray-200 dark:border-zinc-600 pb-3' : ''}`}>
546+
<div className={`flex items-center gap-2 px-4 pt-2 ${hasMcpUIResources ? 'border-b border-gray-200 dark:border-zinc-600 pb-2' : ''}`}>
526547
<h3 className="text-sm font-medium">Response</h3>
527548
<div className="flex items-center gap-1">
528549
<Clock className="h-3 w-3 text-gray-400" />

0 commit comments

Comments
 (0)