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

Refactor renamed the component groups to something less obtuse:

Browse source 
Elements -> Groups -> Screens -> Views
This commit is contained in:
cliffhall 2026-03-28 12:58:47 -04:00
commit dd46acba87
1 changed files with 151 additions and 144 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,111 +0,0 @@
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";
import { ResultPanel } from "../../molecules/ResultPanel/ResultPanel";
import type { ToolListItemProps } from "../../molecules/ToolListItem/ToolListItem";
import type { ToolDetailPanelProps } from "../../molecules/ToolDetailPanel/ToolDetailPanel";
import type { ResultPanelProps } from "../../molecules/ResultPanel/ResultPanel";
export interface ToolsScreenProps {
tools: ToolListItemProps[];
selectedTool?: ToolDetailPanelProps;
result?: ResultPanelProps;
listChanged: boolean;
searchText: string;
onSearchChange: (text: string) => void;
onRefreshList: () => void;
onSelectTool: (name: string) => void;
}
const PageContainer = Container.withProps({
size: "xl",
py: "xl",
});
const FullHeightCard = Card.withProps({
withBorder: true,
padding: "lg",
h: "100%",
});
const EmptyState = Text.withProps({
c: "dimmed",
ta: "center",
py: "xl",
});
export function ToolsScreen({
tools,
selectedTool,
result,
listChanged,
searchText,
onSearchChange,
onRefreshList,
onSelectTool,
}: ToolsScreenProps) {
const filteredTools = searchText
? tools.filter((tool) =>
tool.name.toLowerCase().includes(searchText.toLowerCase()),
)
: tools;
return (
<PageContainer>
<Grid align="stretch">
<Grid.Col span={3}>
<FullHeightCard>
<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)}
/>
))}
</Stack>
</FullHeightCard>
</Grid.Col>
<Grid.Col span={5}>
<FullHeightCard>
{selectedTool ? (
<ToolDetailPanel {...selectedTool} />
) : (
<EmptyState>Select a tool to view details</EmptyState>
)}
</FullHeightCard>
</Grid.Col>
<Grid.Col span={4}>
<FullHeightCard>
{result ? (
<ResultPanel {...result} />
) : (
<EmptyState>Results will appear here</EmptyState>
)}
</FullHeightCard>
</Grid.Col>
</Grid>
</PageContainer>
);
}