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

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

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

@ -1,117 +0,0 @@
import { Flex, Group, Stack, Text, Title } from "@mantine/core";
import { AnnotationBadge } from "../../atoms/AnnotationBadge/AnnotationBadge";
import { ContentViewer } from "../../atoms/ContentViewer/ContentViewer";
import { CopyButton } from "../../atoms/CopyButton/CopyButton";
import { SubscribeButton } from "../../atoms/SubscribeButton/SubscribeButton";
export interface ResourcePreviewPanelProps {
uri: string;
mimeType: string;
annotations?: { audience?: string; priority?: number };
content: string;
lastUpdated?: string;
isSubscribed: boolean;
onSubscribe: () => void;
onUnsubscribe: () => void;
}
function priorityLabel(priority: number): string {
if (priority >= 0.7) return "priority: high";
if (priority >= 0.4) return "priority: medium";
return "priority: low";
}
function resolveContentType(mimeType: string): "json" | "image" | "text" {
if (mimeType === "application/json") return "json";
if (mimeType.startsWith("image/")) return "image";
return "text";
}
function formatLastUpdated(lastUpdated: string): string {
return `Last updated: ${lastUpdated}`;
}
const HeaderRow = Group.withProps({
justify: "space-between",
wrap: "nowrap",
});
const UriGroup = Group.withProps({
gap: "xs",
wrap: "nowrap",
});
const UriText = Text.withProps({
size: "sm",
c: "blue",
truncate: "end",
});
const MetaRow = Group.withProps({
justify: "space-between",
wrap: "nowrap",
});
const TimestampText = Text.withProps({
size: "xs",
c: "dimmed",
});
const MimeText = Text.withProps({
size: "sm",
c: "dimmed",
});
export function ResourcePreviewPanel({
uri,
mimeType,
annotations,
content,
lastUpdated,
isSubscribed,
onSubscribe,
onUnsubscribe,
}: ResourcePreviewPanelProps) {
return (
<Stack gap="md">
<HeaderRow>
<Title order={4}>Resource</Title>
<UriGroup>
<UriText>{uri}</UriText>
<CopyButton value={uri} />
</UriGroup>
</HeaderRow>
<ContentViewer
type={resolveContentType(mimeType)}
content={content}
mimeType={mimeType}
copyable
/>
<MetaRow>
{lastUpdated ? (
<TimestampText>{formatLastUpdated(lastUpdated)}</TimestampText>
) : (
<Flex />
)}
<MimeText>{mimeType}</MimeText>
</MetaRow>
<Group justify="space-between">
<Group gap="xs">
{annotations?.audience && (
<AnnotationBadge label={annotations.audience} variant="audience" />
)}
{annotations?.priority !== undefined && (
<AnnotationBadge
label={priorityLabel(annotations.priority)}
variant="priority"
/>
)}
</Group>
<SubscribeButton
subscribed={isSubscribed}
onToggle={isSubscribed ? onUnsubscribe : onSubscribe}
/>
</Group>
</Stack>
);
}