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

Normalize screen layouts: extract control groups, unify sidebar widths, and refactor PromptsScreen

Browse source 
- Extract ToolControls group from ToolsScreen (search, list, list-changed indicator)
- Extract PromptControls and PromptListItem groups for PromptsScreen sidebar
- Refactor PromptsScreen to sidebar + detail layout (matching ResourcesScreen pattern)
- Refactor PromptArgumentsForm to accept a single prompt instead of a dropdown
- Normalize all screen sidebar widths to 340px (Tools, Resources, Prompts, Logs, Tasks, History)
- Convert ToolsScreen from Grid-only to sidebar + Grid layout
- Replace LogControls checkboxes with full-width toggle buttons
- Move Clear/Export buttons from LogControls to LogStreamPanel toolbar
- Make PromptArgumentsForm "Get Prompt" button right-aligned and compact
- Update all affected stories and ConnectedView

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
cliffhall 2026-03-31 17:54:20 -04:00
commit a6724626b7
12 changed files with 627 additions and 233 deletions
Download patch file Download diff file Expand all files Collapse all files

3
clients/web/src/components/groups/LogControls/LogControls.stories.tsx
View file

@ -20,8 +20,7 @@ const meta: Meta<typeof LogControls> = {
onSetLevel: fn(),
onFilterChange: fn(),
onToggleLevel: fn(),
onClear: fn(),
onExport: fn(),
onToggleAllLevels: fn(),
},
};

58
clients/web/src/components/groups/LogControls/LogControls.tsx
View file

@ -1,12 +1,12 @@
import {
Button,
Checkbox,
Group,
Select,
Stack,
Text,
TextInput,
Title,
UnstyledButton,
} from "@mantine/core";
const LOG_LEVELS = [
@ -20,22 +20,17 @@ const LOG_LEVELS = [
"emergency",
] as const;
const LEVEL_COLORS: Record<string, { c: string; fw?: number }> = {
const LEVEL_COLORS: Record<string, { c: string }> = {
debug: { c: "dimmed" },
info: { c: "blue" },
notice: { c: "teal" },
warning: { c: "yellow" },
error: { c: "red" },
critical: { c: "red", fw: 700 },
alert: { c: "red", fw: 700 },
emergency: { c: "red", fw: 900 },
critical: { c: "red" },
alert: { c: "red" },
emergency: { c: "red" },
};
const ToolbarButton = Button.withProps({
variant: "light",
size: "sm",
});
const SubtleButton = Button.withProps({
variant: "subtle",
size: "xs",
@ -49,8 +44,6 @@ export interface LogControlsProps {
onFilterChange: (text: string) => void;
onToggleLevel: (level: string, visible: boolean) => void;
onToggleAllLevels: () => void;
onClear: () => void;
onExport: () => void;
}
export function LogControls({
@ -61,8 +54,6 @@ export function LogControls({
onFilterChange,
onToggleLevel,
onToggleAllLevels,
onClear,
onExport,
}: LogControlsProps) {
return (
<Stack gap="md">
@ -71,6 +62,7 @@ export function LogControls({
<Title order={5}>Active Level</Title>
<Group wrap="nowrap">
<Select
flex={1}
data={LOG_LEVELS.map((level) => ({ value: level, label: level }))}
value={currentLevel}
onChange={(value) => {
@ -97,26 +89,24 @@ export function LogControls({
: "Select All"}
</SubtleButton>
</Group>
{LOG_LEVELS.map((level) => {
const style = LEVEL_COLORS[level];
return (
<Checkbox
key={level}
checked={!!visibleLevels[level]}
onChange={(e) => onToggleLevel(level, e.currentTarget.checked)}
label={
<Text c={style.c} fw={style.fw}>
{level}
</Text>
}
/>
);
})}
<Group>
<ToolbarButton onClick={onClear}>Clear</ToolbarButton>
<ToolbarButton onClick={onExport}>Export</ToolbarButton>
</Group>
<Stack gap="xs">
{LOG_LEVELS.map((level) => {
const style = LEVEL_COLORS[level];
const active = !!visibleLevels[level];
return (
<UnstyledButton
key={level}
w="100%"
p="sm"
variant="listItem"
bg={active ? "var(--mantine-primary-color-light)" : undefined}
onClick={() => onToggleLevel(level, !active)}
>
<Text c={style.c} ta="center" fw={500}>{level}</Text>
</UnstyledButton>
);
})}
</Stack>
</Stack>
);
}

2
clients/web/src/components/groups/LogStreamPanel/LogStreamPanel.stories.tsx
View file

@ -21,6 +21,8 @@ const meta: Meta<typeof LogStreamPanel> = {
autoScroll: true,
onToggleAutoScroll: fn(),
onCopyAll: fn(),
onClear: fn(),
onExport: fn(),
},
};

6
clients/web/src/components/groups/LogStreamPanel/LogStreamPanel.tsx
View file

@ -19,6 +19,8 @@ export interface LogStreamPanelProps {
autoScroll: boolean;
onToggleAutoScroll: () => void;
onCopyAll: () => void;
onClear: () => void;
onExport: () => void;
}
const PanelContainer = Paper.withProps({
@ -61,6 +63,8 @@ export function LogStreamPanel({
autoScroll,
onToggleAutoScroll,
onCopyAll,
onClear,
onExport,
}: LogStreamPanelProps) {
const filteredEntries = useMemo(
() => entries.filter((e) => matchesFilters(e, filterText, visibleLevels)),
@ -77,6 +81,8 @@ export function LogStreamPanel({
checked={autoScroll}
onChange={onToggleAutoScroll}
/>
<ToolbarButton onClick={onClear}>Clear</ToolbarButton>
<ToolbarButton onClick={onExport}>Export</ToolbarButton>
<ToolbarButton onClick={onCopyAll}>Copy All</ToolbarButton>
</Group>
</Group>

43
clients/web/src/components/groups/PromptArgumentsForm/PromptArgumentsForm.stories.tsx
View file

@ -6,7 +6,6 @@ const meta: Meta<typeof PromptArgumentsForm> = {
title: "Groups/PromptArgumentsForm",
component: PromptArgumentsForm,
args: {
onSelectPrompt: fn(),
onArgumentChange: fn(),
onGetPrompt: fn(),
},
@ -15,31 +14,19 @@ const meta: Meta<typeof PromptArgumentsForm> = {
export default meta;
type Story = StoryObj<typeof PromptArgumentsForm>;
const samplePrompts = [
{
export const NoArguments: Story = {
args: {
name: "summarize",
description: "Summarize the given text into key points",
},
{
name: "translate",
description: "Translate text from one language to another",
},
{ name: "analyze", description: "Analyze sentiment and tone of the text" },
];
export const NoSelection: Story = {
args: {
prompts: samplePrompts,
selectedPrompt: undefined,
arguments: [],
argumentValues: {},
},
};
export const Selected: Story = {
export const WithArguments: Story = {
args: {
prompts: samplePrompts,
selectedPrompt: "translate",
name: "translate",
description: "Translate text from one language to another",
arguments: [
{ name: "text", required: true, description: "The text to translate" },
{
@ -52,10 +39,10 @@ export const Selected: Story = {
},
};
export const WithRequiredArgs: Story = {
export const WithRequiredAndOptional: Story = {
args: {
prompts: samplePrompts,
selectedPrompt: "summarize",
name: "summarize",
description: "Summarize the given text into key points",
arguments: [
{ name: "text", required: true, description: "The text to summarize" },
{
@ -75,8 +62,8 @@ export const WithRequiredArgs: Story = {
export const AllFilled: Story = {
args: {
prompts: samplePrompts,
selectedPrompt: "translate",
name: "translate",
description: "Translate text from one language to another",
arguments: [
{ name: "text", required: true, description: "The text to translate" },
{
@ -91,3 +78,13 @@ export const AllFilled: Story = {
},
},
};
export const NoDescription: Story = {
args: {
name: "code-review",
arguments: [
{ name: "code", required: true, description: "The code to review" },
],
argumentValues: {},
},
};

45
clients/web/src/components/groups/PromptArgumentsForm/PromptArgumentsForm.tsx
View file

@ -1,4 +1,4 @@
import { Button, Select, Stack, Text, TextInput, Title } from "@mantine/core";
import { Button, Group, Stack, Text, TextInput, Title } from "@mantine/core";
export interface PromptArgument {
name: string;
@ -6,17 +6,11 @@ export interface PromptArgument {
description?: string;
}
export interface PromptInfo {
export interface PromptArgumentsFormProps {
name: string;
description?: string;
}
export interface PromptArgumentsFormProps {
prompts: PromptInfo[];
selectedPrompt?: string;
arguments: PromptArgument[];
argumentValues: Record<string, string>;
onSelectPrompt: (name: string) => void;
onArgumentChange: (name: string, value: string) => void;
onGetPrompt: () => void;
}
@ -31,34 +25,19 @@ function formatPlaceholder(name: string): string {
}
export function PromptArgumentsForm({
prompts,
selectedPrompt,
name,
description,
arguments: promptArguments,
argumentValues,
onSelectPrompt,
onArgumentChange,
onGetPrompt,
}: PromptArgumentsFormProps) {
const selectedPromptInfo = prompts.find((p) => p.name === selectedPrompt);
return (
<Stack gap="md">
<Title order={4}>Prompts</Title>
<Select
data={prompts.map((p) => ({ value: p.name, label: p.name }))}
value={selectedPrompt ?? null}
onChange={(value) => {
if (value) {
onSelectPrompt(value);
}
}}
placeholder="Choose a prompt..."
/>
{selectedPrompt && selectedPromptInfo?.description && (
<DescriptionText>{selectedPromptInfo.description}</DescriptionText>
)}
<Title order={4}>{name}</Title>
{description && <DescriptionText>{description}</DescriptionText>}
{promptArguments.length > 0 && (
<>
<Stack gap="sm">
{promptArguments.map((arg) => (
<TextInput
key={arg.name}
@ -72,11 +51,13 @@ export function PromptArgumentsForm({
}
/>
))}
</>
</Stack>
)}
<Button fullWidth onClick={onGetPrompt} disabled={!selectedPrompt}>
Get Prompt
</Button>
<Group justify="flex-end">
<Button size="sm" onClick={onGetPrompt}>
Get Prompt
</Button>
</Group>
</Stack>
);
}

76
clients/web/src/components/groups/PromptControls/PromptControls.stories.tsx Normal file
View file

@ -0,0 +1,76 @@
import type { Meta, StoryObj } from "@storybook/react-vite";
import { fn } from "storybook/test";
import { PromptControls } from "./PromptControls";
const meta: Meta<typeof PromptControls> = {
title: "Groups/PromptControls",
component: PromptControls,
args: {
searchText: "",
onSearchChange: fn(),
onRefreshList: fn(),
onSelectPrompt: fn(),
listChanged: false,
},
};
export default meta;
type Story = StoryObj<typeof PromptControls>;
const samplePrompts = [
{
name: "summarize",
description: "Summarize the given text into key points",
selected: false,
},
{
name: "translate",
description: "Translate text from one language to another",
selected: false,
},
{
name: "analyze",
description: "Analyze sentiment and tone of the text",
selected: false,
},
{
name: "code-review",
description: "Review code for issues",
selected: false,
},
{ name: "refactor", selected: false },
];
export const Default: Story = {
args: {
prompts: samplePrompts,
},
};
export const WithSelection: Story = {
args: {
prompts: samplePrompts.map((p) =>
p.name === "translate" ? { ...p, selected: true } : p,
),
},
};
export const WithSearch: Story = {
args: {
prompts: samplePrompts,
searchText: "sum",
},
};
export const ListChanged: Story = {
args: {
prompts: samplePrompts,
listChanged: true,
},
};
export const Empty: Story = {
args: {
prompts: [],
},
};

55
clients/web/src/components/groups/PromptControls/PromptControls.tsx Normal file
View file

@ -0,0 +1,55 @@
import { ScrollArea, Stack, TextInput, Title } from "@mantine/core";
import { ListChangedIndicator } from "../../elements/ListChangedIndicator/ListChangedIndicator";
import { PromptListItem } from "../PromptListItem/PromptListItem";
import type { PromptItem } from "../../screens/PromptsScreen/PromptsScreen";
export interface PromptControlsProps {
prompts: PromptItem[];
listChanged: boolean;
searchText: string;
onSearchChange: (text: string) => void;
onRefreshList: () => void;
onSelectPrompt: (name: string) => void;
}
function listMaxHeight(): string {
return "calc(100vh - var(--app-shell-header-height, 0px) - var(--mantine-spacing-xl) * 2 - 160px)";
}
export function PromptControls({
prompts,
listChanged,
searchText,
onSearchChange,
onRefreshList,
onSelectPrompt,
}: PromptControlsProps) {
const filteredPrompts = prompts.filter((p) =>
p.name.toLowerCase().includes(searchText.toLowerCase()),
);
return (
<Stack gap="sm">
<Title order={4}>Prompts</Title>
<ListChangedIndicator visible={listChanged} onRefresh={onRefreshList} />
<TextInput
placeholder="Search prompts..."
value={searchText}
onChange={(e) => onSearchChange(e.currentTarget.value)}
/>
<ScrollArea.Autosize mah={listMaxHeight()}>
<Stack gap="xs">
{filteredPrompts.map((prompt) => (
<PromptListItem
key={prompt.name}
name={prompt.name}
description={prompt.description}
selected={prompt.selected}
onClick={() => onSelectPrompt(prompt.name)}
/>
))}
</Stack>
</ScrollArea.Autosize>
</Stack>
);
}

37
clients/web/src/components/groups/PromptListItem/PromptListItem.stories.tsx Normal file
View file

@ -0,0 +1,37 @@
import type { Meta, StoryObj } from "@storybook/react-vite";
import { fn } from "storybook/test";
import { PromptListItem } from "./PromptListItem";
const meta: Meta<typeof PromptListItem> = {
title: "Groups/PromptListItem",
component: PromptListItem,
args: {
onClick: fn(),
},
};
export default meta;
type Story = StoryObj<typeof PromptListItem>;
export const Default: Story = {
args: {
name: "summarize",
description: "Summarize the given text into key points",
selected: false,
},
};
export const Selected: Story = {
args: {
name: "translate",
description: "Translate text from one language to another",
selected: true,
},
};
export const NoDescription: Story = {
args: {
name: "code-review",
selected: false,
},
};

40
clients/web/src/components/groups/PromptListItem/PromptListItem.tsx Normal file
View file

@ -0,0 +1,40 @@
import { Stack, Text, UnstyledButton } from "@mantine/core";
export interface PromptListItemProps {
name: string;
description?: string;
selected: boolean;
onClick: () => void;
}
const NameText = Text.withProps({
fw: 500,
});
const DescriptionText = Text.withProps({
size: "xs",
c: "dimmed",
lineClamp: 1,
});
export function PromptListItem({
name,
description,
selected,
onClick,
}: PromptListItemProps) {
return (
<UnstyledButton
w="100%"
p="sm"
variant="listItem"
bg={selected ? "var(--mantine-primary-color-light)" : undefined}
onClick={onClick}
>
<Stack gap={2}>
<NameText>{name}</NameText>
{description && <DescriptionText>{description}</DescriptionText>}
</Stack>
</UnstyledButton>
);
}

70
clients/web/src/components/groups/ToolControls/ToolControls.stories.tsx Normal file
View file

@ -0,0 +1,70 @@
import type { Meta, StoryObj } from "@storybook/react-vite";
import { fn } from "storybook/test";
import { ToolControls } from "./ToolControls";
const meta: Meta<typeof ToolControls> = {
title: "Groups/ToolControls",
component: ToolControls,
args: {
searchText: "",
onSearchChange: fn(),
onRefreshList: fn(),
onSelectTool: fn(),
listChanged: false,
},
};
export default meta;
type Story = StoryObj<typeof ToolControls>;
const sampleTools = [
{
name: "send_message",
title: "Send Message",
selected: false,
onClick: fn(),
},
{
name: "create_record",
title: "Create Record",
selected: false,
onClick: fn(),
},
{ name: "delete_records", selected: false, onClick: fn() },
{ name: "list_users", selected: false, onClick: fn() },
{ name: "batch_process", selected: false, onClick: fn() },
];
export const Default: Story = {
args: {
tools: sampleTools,
},
};
export const WithSelection: Story = {
args: {
tools: sampleTools.map((t) =>
t.name === "create_record" ? { ...t, selected: true } : t,
),
},
};
export const WithSearch: Story = {
args: {
tools: sampleTools,
searchText: "send",
},
};
export const ListChanged: Story = {
args: {
tools: sampleTools,
listChanged: true,
},
};
export const Empty: Story = {
args: {
tools: [],
},
};

55
clients/web/src/components/groups/ToolControls/ToolControls.tsx Normal file
View file

@ -0,0 +1,55 @@
import { ScrollArea, Stack, TextInput, Title } from "@mantine/core";
import { ListChangedIndicator } from "../../elements/ListChangedIndicator/ListChangedIndicator";
import { ToolListItem } from "../ToolListItem/ToolListItem";
import type { ToolListItemProps } from "../ToolListItem/ToolListItem";
export interface ToolControlsProps {
tools: ToolListItemProps[];
listChanged: boolean;
searchText: string;
onSearchChange: (text: string) => void;
onRefreshList: () => void;
onSelectTool: (name: string) => void;
}
function listMaxHeight(): string {
return "calc(100vh - var(--app-shell-header-height, 0px) - var(--mantine-spacing-xl) * 2 - 160px)";
}
export function ToolControls({
tools,
listChanged,
searchText,
onSearchChange,
onRefreshList,
onSelectTool,
}: ToolControlsProps) {
const filteredTools = searchText
? tools.filter((tool) =>
tool.name.toLowerCase().includes(searchText.toLowerCase()),
)
: tools;
return (
<Stack gap="sm">
<Title order={4}>Tools</Title>
<ListChangedIndicator visible={listChanged} onRefresh={onRefreshList} />
<TextInput
placeholder="Search tools..."
value={searchText}
onChange={(e) => onSearchChange(e.currentTarget.value)}
/>
<ScrollArea.Autosize mah={listMaxHeight()}>
<Stack gap="xs">
{filteredTools.map((tool) => (
<ToolListItem
key={tool.name}
{...tool}
onClick={() => onSelectTool(tool.name)}
/>
))}
</Stack>
</ScrollArea.Autosize>
</Stack>
);
}