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

formatting

Browse source
This commit is contained in:
cliffhall 2026-03-17 16:43:27 -04:00
commit 4b28a69856
2 changed files with 2438 additions and 1874 deletions
Download patch file Download diff file Expand all files Collapse all files

67
clients/web/src/components/molecules/ResourcePreviewPanel/ResourcePreviewPanel.stories.tsx
View file

@ -1,68 +1,73 @@
import type { Meta, StoryObj } from '@storybook/react-vite'
import { fn } from 'storybook/test'
import { ResourcePreviewPanel } from './ResourcePreviewPanel'
import type { Meta, StoryObj } from "@storybook/react-vite";
import { fn } from "storybook/test";
import { ResourcePreviewPanel } from "./ResourcePreviewPanel";
const meta: Meta<typeof ResourcePreviewPanel> = {
title: 'Molecules/ResourcePreviewPanel',
title: "Molecules/ResourcePreviewPanel",
component: ResourcePreviewPanel,
args: {
onCopy: fn(),
onSubscribe: fn(),
onUnsubscribe: fn(),
},
}
};
export default meta
type Story = StoryObj<typeof ResourcePreviewPanel>
export default meta;
type Story = StoryObj<typeof ResourcePreviewPanel>;
export const JsonResource: Story = {
args: {
uri: 'file:///config.json',
mimeType: 'application/json',
content: JSON.stringify({ name: 'mcp-inspector', version: '2.0.0', debug: true }, null, 2),
uri: "file:///config.json",
mimeType: "application/json",
content: JSON.stringify(
{ name: "mcp-inspector", version: "2.0.0", debug: true },
null,
2,
),
isSubscribed: false,
lastUpdated: '2026-03-17T10:30:00Z',
lastUpdated: "2026-03-17T10:30:00Z",
},
}
};
export const TextResource: Story = {
args: {
uri: 'file:///readme.txt',
mimeType: 'text/plain',
content: 'This is a plain text resource with some example content.\nLine two of the content.',
uri: "file:///readme.txt",
mimeType: "text/plain",
content:
"This is a plain text resource with some example content.\nLine two of the content.",
isSubscribed: false,
},
}
};
export const Subscribed: Story = {
args: {
uri: 'file:///data.json',
mimeType: 'application/json',
content: JSON.stringify({ status: 'active' }, null, 2),
uri: "file:///data.json",
mimeType: "application/json",
content: JSON.stringify({ status: "active" }, null, 2),
isSubscribed: true,
lastUpdated: '2026-03-17T12:00:00Z',
lastUpdated: "2026-03-17T12:00:00Z",
},
}
};
export const NotSubscribed: Story = {
args: {
uri: 'file:///data.json',
mimeType: 'application/json',
content: JSON.stringify({ status: 'active' }, null, 2),
uri: "file:///data.json",
mimeType: "application/json",
content: JSON.stringify({ status: "active" }, null, 2),
isSubscribed: false,
},
}
};
export const WithAnnotations: Story = {
args: {
uri: 'file:///settings.json',
mimeType: 'application/json',
content: JSON.stringify({ theme: 'dark', lang: 'en' }, null, 2),
uri: "file:///settings.json",
mimeType: "application/json",
content: JSON.stringify({ theme: "dark", lang: "en" }, null, 2),
isSubscribed: false,
annotations: {
audience: 'application',
audience: "application",
priority: 0.8,
},
lastUpdated: '2026-03-17T09:00:00Z',
lastUpdated: "2026-03-17T09:00:00Z",
},
}
};

47
clients/web/src/components/molecules/ResourcePreviewPanel/ResourcePreviewPanel.tsx
View file

@ -1,22 +1,22 @@
import { Button, Group, Stack, Text, Title } from '@mantine/core'
import { ContentViewer } from '../../atoms/ContentViewer/ContentViewer'
import { Button, Group, Stack, Text, Title } from "@mantine/core";
import { ContentViewer } from "../../atoms/ContentViewer/ContentViewer";
export interface ResourcePreviewPanelProps {
uri: string
mimeType: string
annotations?: { audience?: string; priority?: number }
content: string
lastUpdated?: string
isSubscribed: boolean
onCopy: () => void
onSubscribe: () => void
onUnsubscribe: () => void
uri: string;
mimeType: string;
annotations?: { audience?: string; priority?: number };
content: string;
lastUpdated?: string;
isSubscribed: boolean;
onCopy: () => void;
onSubscribe: () => void;
onUnsubscribe: () => void;
}
function resolveContentType(mimeType: string): 'json' | 'image' | 'text' {
if (mimeType === 'application/json') return 'json'
if (mimeType.startsWith('image/')) return 'image'
return 'text'
function resolveContentType(mimeType: string): "json" | "image" | "text" {
if (mimeType === "application/json") return "json";
if (mimeType.startsWith("image/")) return "image";
return "text";
}
export function ResourcePreviewPanel({
@ -34,7 +34,10 @@ export function ResourcePreviewPanel({
<Stack gap="md">
<Title order={4}>Content Preview</Title>
<Text size="sm">
URI: <Text span c="blue">{uri}</Text>
URI:{" "}
<Text span c="blue">
{uri}
</Text>
</Text>
<Text size="sm" c="dimmed">
MIME: {mimeType}
@ -43,10 +46,14 @@ export function ResourcePreviewPanel({
<Stack gap="xs">
<Text size="sm">Annotations:</Text>
{annotations.audience && (
<Text size="sm" c="dimmed">Audience: {annotations.audience}</Text>
<Text size="sm" c="dimmed">
Audience: {annotations.audience}
</Text>
)}
{annotations.priority !== undefined && (
<Text size="sm" c="dimmed">Priority: {annotations.priority}</Text>
<Text size="sm" c="dimmed">
Priority: {annotations.priority}
</Text>
)}
</Stack>
)}
@ -64,7 +71,7 @@ export function ResourcePreviewPanel({
size="sm"
onClick={isSubscribed ? onUnsubscribe : onSubscribe}
>
{isSubscribed ? 'Unsubscribe' : 'Subscribe'}
{isSubscribed ? "Unsubscribe" : "Subscribe"}
</Button>
</Group>
{lastUpdated && (
@ -73,5 +80,5 @@ export function ResourcePreviewPanel({
</Text>
)}
</Stack>
)
);
}