modelcontextprotocol/inspector
Watch
1
0
Fork
You've already forked inspector
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 2

fix lint error, build error, and apply formatting across components

Browse source 
Suppress react-refresh lint rule in Storybook preview config, fix
LogLevel type annotation in LoggingScreen stories, and apply consistent
formatting and layout improvements across multiple components.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
cliffhall 2026-03-24 10:30:43 -04:00
commit fb4ca78726
1 changed files with 615 additions and 371 deletions
Download patch file Download diff file Expand all files Collapse all files

102
clients/web/src/components/organisms/ToolsScreen/ToolsScreen.tsx
View file

@ -1,4 +1,12 @@
import { Card, Container, Grid, Stack, Text, TextInput, Title } from "@mantine/core";
import {
Card,
Container,
Grid,
Stack,
Text,
TextInput,
Title,
} from "@mantine/core";
import { ListChangedIndicator } from "../../atoms/ListChangedIndicator/ListChangedIndicator";
import { ToolListItem } from "../../molecules/ToolListItem/ToolListItem";
import { ToolDetailPanel } from "../../molecules/ToolDetailPanel/ToolDetailPanel";
@ -36,55 +44,55 @@ export function ToolsScreen({
return (
<Container size="xl" py="xl">
<Grid align="stretch">
<Grid.Col span={3}>
<Card withBorder padding="lg" h="100%">
<Stack gap="sm">
<Title order={4}>Tools</Title>
<ListChangedIndicator
visible={listChanged}
onRefresh={onRefreshList}
/>
<TextInput
placeholder="Search tools..."
value={searchText}
onChange={(event) => onSearchChange(event.currentTarget.value)}
/>
{filteredTools.map((tool) => (
<ToolListItem
key={tool.name}
{...tool}
onClick={() => onSelectTool(tool.name)}
<Grid align="stretch">
<Grid.Col span={3}>
<Card withBorder padding="lg" h="100%">
<Stack gap="sm">
<Title order={4}>Tools</Title>
<ListChangedIndicator
visible={listChanged}
onRefresh={onRefreshList}
/>
))}
</Stack>
</Card>
</Grid.Col>
<TextInput
placeholder="Search tools..."
value={searchText}
onChange={(event) => onSearchChange(event.currentTarget.value)}
/>
{filteredTools.map((tool) => (
<ToolListItem
key={tool.name}
{...tool}
onClick={() => onSelectTool(tool.name)}
/>
))}
</Stack>
</Card>
</Grid.Col>
<Grid.Col span={5}>
<Card withBorder padding="lg" h="100%">
{selectedTool ? (
<ToolDetailPanel {...selectedTool} />
) : (
<Text c="dimmed" ta="center" py="xl">
Select a tool to view details
</Text>
)}
</Card>
</Grid.Col>
<Grid.Col span={5}>
<Card withBorder padding="lg" h="100%">
{selectedTool ? (
<ToolDetailPanel {...selectedTool} />
) : (
<Text c="dimmed" ta="center" py="xl">
Select a tool to view details
</Text>
)}
</Card>
</Grid.Col>
<Grid.Col span={4}>
<Card withBorder padding="lg" h="100%">
{result ? (
<ResultPanel {...result} />
) : (
<Text c="dimmed" ta="center" py="xl">
Results will appear here
</Text>
)}
</Card>
</Grid.Col>
</Grid>
<Grid.Col span={4}>
<Card withBorder padding="lg" h="100%">
{result ? (
<ResultPanel {...result} />
) : (
<Text c="dimmed" ta="center" py="xl">
Results will appear here
</Text>
)}
</Card>
</Grid.Col>
</Grid>
</Container>
);
}