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

Show ResourcePreviewPanel beside ResourceTemplatePanel instead of below

Browse source 
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
cliffhall 2026-04-02 18:16:40 -04:00
commit e00853afac
1 changed files with 58 additions and 44 deletions
Download patch file Download diff file Expand all files Collapse all files

102
clients/web/src/components/screens/ResourcesScreen/ResourcesScreen.tsx
View file

@ -1,4 +1,4 @@
import { Card, Flex, ScrollArea, Stack, Text } from "@mantine/core"; import { Card, Flex, Group, ScrollArea, Stack, Text } from "@mantine/core";
import { ResourceControls } from "../../groups/ResourceControls/ResourceControls"; import { ResourceControls } from "../../groups/ResourceControls/ResourceControls";
import { ResourcePreviewPanel } from "../../groups/ResourcePreviewPanel/ResourcePreviewPanel"; import { ResourcePreviewPanel } from "../../groups/ResourcePreviewPanel/ResourcePreviewPanel";
import { ResourceTemplatePanel } from "../../groups/ResourceTemplatePanel/ResourceTemplatePanel"; import { ResourceTemplatePanel } from "../../groups/ResourceTemplatePanel/ResourceTemplatePanel";
@ -114,52 +114,66 @@ export function ResourcesScreen({
</SidebarCard> </SidebarCard>
</Sidebar> </Sidebar>
<ScrollArea.Autosize {selectedTemplate ? (
flex={1} <Group flex={1} gap="md" align="flex-start" wrap="nowrap">
mah="calc(100vh - var(--app-shell-header-height, 0px) - var(--mantine-spacing-xl) * 2)" <ScrollArea.Autosize
> flex={1}
<Stack gap="md"> mah="calc(100vh - var(--app-shell-header-height, 0px) - var(--mantine-spacing-xl) * 2)"
{selectedTemplate ? ( >
<>
<DetailCard>
<ResourceTemplatePanel
{...selectedTemplate}
onReadResource={onReadResource}
/>
</DetailCard>
{selectedResource && (
<DetailCard>
<ResourcePreviewPanel
{...selectedResource}
onRefresh={() => onReadResource(selectedResource.uri)}
onSubscribe={() =>
onSubscribeResource(selectedResource.uri)
}
onUnsubscribe={() =>
onUnsubscribeResource(selectedResource.uri)
}
/>
</DetailCard>
)}
</>
) : selectedResource ? (
<DetailCard> <DetailCard>
<ResourcePreviewPanel <ResourceTemplatePanel
{...selectedResource} {...selectedTemplate}
onRefresh={() => onReadResource(selectedResource.uri)} onReadResource={onReadResource}
onSubscribe={() => onSubscribeResource(selectedResource.uri)}
onUnsubscribe={() =>
onUnsubscribeResource(selectedResource.uri)
}
/> />
</DetailCard> </DetailCard>
) : ( </ScrollArea.Autosize>
<DetailCard> <ScrollArea.Autosize
<EmptyState>Select a resource to preview</EmptyState> flex={1}
</DetailCard> mah="calc(100vh - var(--app-shell-header-height, 0px) - var(--mantine-spacing-xl) * 2)"
)} >
</Stack> {selectedResource ? (
</ScrollArea.Autosize> <DetailCard>
<ResourcePreviewPanel
{...selectedResource}
onRefresh={() => onReadResource(selectedResource.uri)}
onSubscribe={() =>
onSubscribeResource(selectedResource.uri)
}
onUnsubscribe={() =>
onUnsubscribeResource(selectedResource.uri)
}
/>
</DetailCard>
) : (
<DetailCard>
<EmptyState>
Enter a URI and click Read to preview
</EmptyState>
</DetailCard>
)}
</ScrollArea.Autosize>
</Group>
) : selectedResource ? (
<ScrollArea.Autosize
flex={1}
mah="calc(100vh - var(--app-shell-header-height, 0px) - var(--mantine-spacing-xl) * 2)"
>
<DetailCard>
<ResourcePreviewPanel
{...selectedResource}
onRefresh={() => onReadResource(selectedResource.uri)}
onSubscribe={() => onSubscribeResource(selectedResource.uri)}
onUnsubscribe={() =>
onUnsubscribeResource(selectedResource.uri)
}
/>
</DetailCard>
</ScrollArea.Autosize>
) : (
<DetailCard flex={1}>
<EmptyState>Select a resource to preview</EmptyState>
</DetailCard>
)}
</ScreenLayout> </ScreenLayout>
); );
} }