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

refine UI layout, stories, and component consistency across screens

Browse source 
Add HistoryActive and other missing stories to ConnectedLayout, wrap
HistoryScreen and TasksScreen in consistent Container/Paper layout,
add copy button to MessageBubble, and clean up various component props.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
cliffhall 2026-03-23 18:59:38 -04:00
commit bca31d1d3c
12 changed files with 321 additions and 88 deletions
Download patch file Download diff file Expand all files Collapse all files

12
clients/web/src/components/atoms/MessageBubble/MessageBubble.tsx
View file

@ -1,4 +1,5 @@
import { Image, Paper, Stack, Text } from "@mantine/core";
import { Group, Image, Paper, Stack, Text } from "@mantine/core";
import { CopyButton } from "../CopyButton/CopyButton";
export interface MessageBubbleProps {
index: number;
@ -18,9 +19,12 @@ export function MessageBubble({
return (
<Paper p="md" radius="md" withBorder>
<Stack gap="xs">
<Text size="xs" c="dimmed">
[{index}] role: {role}
</Text>
<Group justify="space-between">
<Text size="xs" c="dimmed">
[{index}] role: {role}
</Text>
<CopyButton value={content} />
</Group>
<Text size="sm">&quot;{content}&quot;</Text>
{imageContent && (
<Image

2
clients/web/src/components/atoms/SubscribeButton/SubscribeButton.tsx
View file

@ -10,7 +10,7 @@ export function SubscribeButton({
onToggle,
}: SubscribeButtonProps) {
return (
<Button variant="outline" size="sm" onClick={onToggle}>
<Button variant="filled" size="sm" onClick={onToggle}>
{subscribed ? "Unsubscribe" : "Subscribe"}
</Button>
);

242
clients/web/src/components/layouts/ConnectedLayout/ConnectedLayout.stories.tsx
View file

@ -5,9 +5,57 @@ import { ConnectedLayout } from "./ConnectedLayout";
import { ToolsScreen } from "../../organisms/ToolsScreen/ToolsScreen";
import { ResourcesScreen } from "../../organisms/ResourcesScreen/ResourcesScreen";
import { PromptsScreen } from "../../organisms/PromptsScreen/PromptsScreen";
import { LoggingScreen } from "../../organisms/LoggingScreen/LoggingScreen";
import { TasksScreen } from "../../organisms/TasksScreen/TasksScreen";
import { HistoryScreen } from "../../organisms/HistoryScreen/HistoryScreen";
import type { LogEntryProps } from "../../atoms/LogEntry/LogEntry";
import type { LogLevel } from "../../atoms/LogEntry/LogEntry";
const allTabs = ["Tools", "Resources", "Prompts", "Logs", "Tasks", "History"];
const logMessages: { level: LogLevel; message: string; logger?: string }[] = [
{ level: "info", message: "Server started on port 3000" },
{ level: "debug", message: "Loading configuration from /etc/mcp/config.json", logger: "config" },
{ level: "warning", message: "Deprecated API endpoint called: /v1/tools", logger: "http" },
{ level: "info", message: "Client connected: inspector-web-ui" },
{ level: "error", message: "Failed to read resource: file not found at /data/missing.txt", logger: "resources" },
{ level: "info", message: "Tool execution completed: search_files (245ms)", logger: "tools" },
{ level: "debug", message: "Parsing JSON-RPC request body", logger: "transport" },
{ level: "info", message: "Listing available tools for client session", logger: "tools" },
{ level: "warning", message: "Slow query detected: 1200ms for resource lookup", logger: "db" },
{ level: "info", message: "Resource subscription added: file:///config.json", logger: "resources" },
{ level: "debug", message: "Heartbeat ping received from client", logger: "session" },
{ level: "error", message: "Permission denied reading /etc/secrets.env", logger: "resources" },
{ level: "info", message: "Prompt 'summarize' resolved with 2 messages", logger: "prompts" },
{ level: "debug", message: "Cache hit for resource: db://users/42", logger: "cache" },
{ level: "info", message: "Tool 'create_record' executed successfully in 89ms", logger: "tools" },
{ level: "warning", message: "Client reconnection attempt #3", logger: "session" },
{ level: "info", message: "New resource detected: file:///data/output.csv", logger: "resources" },
{ level: "debug", message: "Serializing response payload (2.4KB)", logger: "transport" },
{ level: "error", message: "Timeout waiting for tool response after 30s", logger: "tools" },
{ level: "info", message: "Session initialized with capabilities: tools, resources, prompts" },
{ level: "debug", message: "Validating input schema for tool 'batch_process'", logger: "tools" },
{ level: "info", message: "Resource template resolved: db://tables/users/rows/15", logger: "resources" },
{ level: "warning", message: "Memory usage at 78% — consider increasing limits", logger: "system" },
{ level: "info", message: "Client disconnected gracefully", logger: "session" },
{ level: "debug", message: "Flushing log buffer to disk (128 entries)", logger: "logging" },
];
function pad(n: number): string {
return n.toString().padStart(2, "0");
}
const sampleLogEntries: LogEntryProps[] = Array.from({ length: 50 }, (_, i) => {
const src = logMessages[i % logMessages.length];
return {
timestamp: `2026-03-17T10:00:${pad(i + 1)}Z`,
level: src.level,
message: src.message,
logger: src.logger,
};
});
const meta: Meta<typeof ConnectedLayout> = {
title: "Layouts/ConnectedLayout",
component: ConnectedLayout,
@ -168,6 +216,7 @@ export const PromptsActive: Story = {
onGetPrompt: fn(),
}}
messages={{
onCopyAll: fn(),
messages: [
{ role: "user", content: 'Translate the following text to Spanish: "Hello, how are you?"' },
{ role: "assistant", content: "Hola, como estas?" },
@ -180,6 +229,199 @@ export const PromptsActive: Story = {
},
};
export const LoggingActive: Story = {
args: {
activeTab: "Logs",
children: (
<LoggingScreen
controls={{
currentLevel: "info",
filterText: "",
visibleLevels: {
debug: true,
info: true,
notice: true,
warning: true,
error: true,
critical: true,
alert: true,
emergency: true,
},
onSetLevel: fn(),
onFilterChange: fn(),
onToggleLevel: fn(),
onClear: fn(),
onExport: fn(),
}}
entries={sampleLogEntries}
autoScroll={true}
onToggleAutoScroll={fn()}
onCopyAll={fn()}
/>
),
},
};
export const TasksActive: Story = {
args: {
activeTab: "Tasks",
children: (
<TasksScreen
activeTasks={[
{
taskId: "task-001",
status: "running",
method: "tools/call",
target: "batch_process",
progress: 65,
progressDescription: "Processing records 650 of 1000...",
startedAt: "2026-03-17T10:05:00Z",
onViewDetails: fn(),
onViewResult: fn(),
onCancel: fn(),
onDismiss: fn(),
},
{
taskId: "task-002",
status: "waiting",
method: "resources/read",
target: "file:///data/large-dataset.csv",
startedAt: "2026-03-17T10:06:12Z",
onViewDetails: fn(),
onViewResult: fn(),
onCancel: fn(),
onDismiss: fn(),
},
]}
completedTasks={[
{
taskId: "task-000",
status: "completed",
method: "tools/call",
target: "send_message",
startedAt: "2026-03-17T09:58:00Z",
completedAt: "2026-03-17T09:58:02Z",
elapsed: "2s",
onViewDetails: fn(),
onViewResult: fn(),
onCancel: fn(),
onDismiss: fn(),
},
{
taskId: "task-099",
status: "failed",
method: "tools/call",
target: "delete_records",
startedAt: "2026-03-17T09:50:00Z",
completedAt: "2026-03-17T09:50:30Z",
elapsed: "30s",
error: "Timeout waiting for tool response after 30s",
onViewDetails: fn(),
onViewResult: fn(),
onCancel: fn(),
onDismiss: fn(),
},
]}
onRefresh={fn()}
onClearHistory={fn()}
/>
),
},
};
export const HistoryActive: Story = {
args: {
activeTab: "History",
children: (
<HistoryScreen
entries={[
{
timestamp: "2026-03-17T10:32:00Z",
method: "tools/call",
target: "complex_operation",
status: "success",
durationMs: 1250,
isPinned: false,
isExpanded: true,
parameters: {
action: "process",
},
response: {
result: "completed",
},
childEntries: [
{
timestamp: "+120ms",
method: "sampling/createMessage",
target: "gpt-4",
status: "success",
durationMs: 800,
},
{
timestamp: "+950ms",
method: "elicitation/create",
target: "confirm_action",
status: "success",
durationMs: 200,
},
],
onToggleExpand: fn(),
onReplay: fn(),
onTogglePin: fn(),
},
{
timestamp: "2026-03-17T10:31:15Z",
method: "tools/call",
target: "query_database",
status: "error",
durationMs: 3200,
isPinned: false,
isExpanded: false,
onToggleExpand: fn(),
onReplay: fn(),
onTogglePin: fn(),
},
{
timestamp: "2026-03-17T10:30:00Z",
method: "tools/call",
target: "get_weather",
status: "success",
durationMs: 142,
isPinned: false,
isExpanded: false,
onToggleExpand: fn(),
onReplay: fn(),
onTogglePin: fn(),
},
]}
pinnedEntries={[
{
timestamp: "2026-03-17T10:33:00Z",
method: "resources/read",
target: "config.json",
status: "success",
durationMs: 45,
isPinned: true,
pinLabel: "Baseline",
isExpanded: false,
onToggleExpand: fn(),
onReplay: fn(),
onTogglePin: fn(),
},
]}
searchText=""
totalCount={4}
displayedCount={4}
onSearchChange={fn()}
onMethodFilterChange={fn()}
onLoadMore={fn()}
onClearAll={fn()}
onExport={fn()}
/>
),
},
};
export const LimitedTabs: Story = {
args: {
availableTabs: ["Tools", "Resources", "Prompts"],

1
clients/web/src/components/molecules/PromptArgumentsForm/PromptArgumentsForm.tsx
View file

@ -52,7 +52,6 @@ export function PromptArgumentsForm({
)}
{promptArguments.length > 0 && (
<>
<Title order={5}>Arguments</Title>
{promptArguments.map((arg) => (
<TextInput
key={arg.name}

2
clients/web/src/components/molecules/PromptMessagesDisplay/PromptMessagesDisplay.stories.tsx
View file

@ -24,6 +24,7 @@ export const SingleMessage: Story = {
export const Conversation: Story = {
args: {
onCopyAll: fn(),
messages: [
{
role: "user",
@ -55,6 +56,7 @@ export const WithImage: Story = {
export const LongConversation: Story = {
args: {
onCopyAll: fn(),
messages: [
{
role: "user",

13
clients/web/src/components/molecules/PromptMessagesDisplay/PromptMessagesDisplay.tsx
View file

@ -1,4 +1,4 @@
import { Stack, Text, Title } from "@mantine/core";
import { Button, Group, Stack, Text, Title } from "@mantine/core";
import { MessageBubble } from "../../atoms/MessageBubble/MessageBubble";
export interface PromptMessage {
@ -10,14 +10,23 @@ export interface PromptMessage {
export interface PromptMessagesDisplayProps {
messages: PromptMessage[];
onCopyAll?: () => void;
}
export function PromptMessagesDisplay({
messages,
onCopyAll,
}: PromptMessagesDisplayProps) {
return (
<Stack gap="md">
<Title order={4}>Messages</Title>
<Group justify="space-between">
<Title order={4}>Messages</Title>
{onCopyAll && messages.length > 0 && (
<Button variant="light" size="sm" onClick={onCopyAll}>
Copy All
</Button>
)}
</Group>
{messages.length === 0 ? (
<Text c="dimmed">No messages to display</Text>
) : (

35
clients/web/src/components/molecules/ResourceListItem/ResourceListItem.stories.tsx
View file

@ -28,38 +28,3 @@ export const Selected: Story = {
selected: true,
},
};
export const WithAnnotations: Story = {
args: {
name: "app-settings.json",
uri: "file:///app-settings.json",
selected: false,
annotations: {
audience: "application",
priority: 0.9,
},
},
};
export const WithHighPriority: Story = {
args: {
name: "critical-data.json",
uri: "file:///critical-data.json",
selected: false,
annotations: {
audience: "user",
priority: 0.8,
},
},
};
export const NoPriority: Story = {
args: {
name: "readme.md",
uri: "file:///readme.md",
selected: false,
annotations: {
audience: "user",
},
},
};

3
clients/web/src/components/organisms/HistoryScreen/HistoryScreen.tsx
View file

@ -1,5 +1,6 @@
import {
Button,
Container,
Divider,
Group,
Paper,
@ -51,6 +52,7 @@ export function HistoryScreen({
onExport,
}: HistoryScreenProps) {
return (
<Container size="xl" py="xl">
<Paper withBorder p="md">
<Stack gap="md">
<Group justify="space-between" wrap="wrap">
@ -119,5 +121,6 @@ export function HistoryScreen({
</Group>
</Stack>
</Paper>
</Container>
);
}

76
clients/web/src/components/organisms/LoggingScreen/LoggingScreen.stories.tsx
View file

@ -46,43 +46,49 @@ export const Empty: Story = {
},
};
const mixedEntries: LogEntryProps[] = [
{
timestamp: "2026-03-17T10:00:01Z",
level: "info",
message: "Server started on port 3000",
},
{
timestamp: "2026-03-17T10:00:02Z",
level: "debug",
message: "Loading configuration from /etc/mcp/config.json",
logger: "config",
},
{
timestamp: "2026-03-17T10:00:03Z",
level: "warning",
message: "Deprecated API endpoint called: /v1/tools",
logger: "http",
},
{
timestamp: "2026-03-17T10:00:04Z",
level: "info",
message: "Client connected: inspector-web-ui",
},
{
timestamp: "2026-03-17T10:00:05Z",
level: "error",
message: "Failed to read resource: file not found at /data/missing.txt",
logger: "resources",
},
{
timestamp: "2026-03-17T10:00:06Z",
level: "info",
message: "Tool execution completed: search_files (245ms)",
logger: "tools",
},
const logMessages: { level: string; message: string; logger?: string }[] = [
{ level: "info", message: "Server started on port 3000" },
{ level: "debug", message: "Loading configuration from /etc/mcp/config.json", logger: "config" },
{ level: "warning", message: "Deprecated API endpoint called: /v1/tools", logger: "http" },
{ level: "info", message: "Client connected: inspector-web-ui" },
{ level: "error", message: "Failed to read resource: file not found at /data/missing.txt", logger: "resources" },
{ level: "info", message: "Tool execution completed: search_files (245ms)", logger: "tools" },
{ level: "debug", message: "Parsing JSON-RPC request body", logger: "transport" },
{ level: "info", message: "Listing available tools for client session", logger: "tools" },
{ level: "warning", message: "Slow query detected: 1200ms for resource lookup", logger: "db" },
{ level: "info", message: "Resource subscription added: file:///config.json", logger: "resources" },
{ level: "debug", message: "Heartbeat ping received from client", logger: "session" },
{ level: "error", message: "Permission denied reading /etc/secrets.env", logger: "resources" },
{ level: "info", message: "Prompt 'summarize' resolved with 2 messages", logger: "prompts" },
{ level: "debug", message: "Cache hit for resource: db://users/42", logger: "cache" },
{ level: "info", message: "Tool 'create_record' executed successfully in 89ms", logger: "tools" },
{ level: "warning", message: "Client reconnection attempt #3", logger: "session" },
{ level: "info", message: "New resource detected: file:///data/output.csv", logger: "resources" },
{ level: "debug", message: "Serializing response payload (2.4KB)", logger: "transport" },
{ level: "error", message: "Timeout waiting for tool response after 30s", logger: "tools" },
{ level: "info", message: "Session initialized with capabilities: tools, resources, prompts" },
{ level: "debug", message: "Validating input schema for tool 'batch_process'", logger: "tools" },
{ level: "info", message: "Resource template resolved: db://tables/users/rows/15", logger: "resources" },
{ level: "warning", message: "Memory usage at 78% — consider increasing limits", logger: "system" },
{ level: "info", message: "Client disconnected gracefully", logger: "session" },
{ level: "debug", message: "Flushing log buffer to disk (128 entries)", logger: "logging" },
];
function pad(n: number): string {
return n.toString().padStart(2, "0");
}
const mixedEntries: LogEntryProps[] = Array.from({ length: 50 }, (_, i) => {
const src = logMessages[i % logMessages.length];
const seconds = pad(i + 1);
return {
timestamp: `2026-03-17T10:00:${seconds}Z`,
level: src.level,
message: src.message,
logger: src.logger,
};
});
export const WithEntries: Story = {
args: {
controls: makeControls(),

11
clients/web/src/components/organisms/LoggingScreen/LoggingScreen.tsx
View file

@ -1,10 +1,11 @@
import {
Button,
Card,
Checkbox,
Container,
Grid,
Group,
Paper,
ScrollArea,
Stack,
Text,
@ -34,12 +35,12 @@ export function LoggingScreen({
<Container size="xl" py="xl">
<Grid align="stretch">
<Grid.Col span={3}>
<Paper withBorder p="md" h="100%">
<Card withBorder padding="lg">
<LogControls {...controls} />
</Paper>
</Card>
</Grid.Col>
<Grid.Col span={9}>
<Paper withBorder p="md" h="100%">
<Card withBorder padding="lg" h="100%">
<Stack gap="sm" h="100%">
<Group justify="space-between">
<Title order={4}>Log Stream</Title>
@ -68,7 +69,7 @@ export function LoggingScreen({
</Stack>
)}
</Stack>
</Paper>
</Card>
</Grid.Col>
</Grid>
</Container>

1
clients/web/src/components/organisms/PromptsScreen/PromptsScreen.stories.tsx
View file

@ -65,6 +65,7 @@ export const WithResult: Story = {
onGetPrompt: fn(),
},
messages: {
onCopyAll: fn(),
messages: [
{
role: "user",

11
clients/web/src/components/organisms/TasksScreen/TasksScreen.tsx
View file

@ -1,4 +1,4 @@
import { Button, Container, Group, Stack, Text, Title } from "@mantine/core";
import { Button, Container, Group, Paper, Stack, Text, Title } from "@mantine/core";
import { TaskCard } from "../../molecules/TaskCard/TaskCard";
import type { TaskCardProps } from "../../molecules/TaskCard/TaskCard";
@ -17,14 +17,14 @@ export function TasksScreen({
}: TasksScreenProps) {
return (
<Container size="xl" py="xl">
<Paper withBorder p="md">
<Stack gap="lg">
<Group justify="flex-end">
<Button variant="dark" onClick={onRefresh}>
<Group justify="space-between">
<Title order={4}>Active Tasks ({activeTasks.length})</Title>
<Button variant="light" size="xs" onClick={onRefresh}>
Refresh Tasks
</Button>
</Group>
<Title order={4}>Active Tasks ({activeTasks.length})</Title>
{activeTasks.length === 0 ? (
<Text c="dimmed">No active tasks</Text>
) : (
@ -53,6 +53,7 @@ export function TasksScreen({
</Stack>
)}
</Stack>
</Paper>
</Container>
);
}