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

Phase 1: Style refinements and component tweaks from Storybook review

Browse source 
Theme & styling:
- Add custom "inspector" color palette with dark navy primary
- Change primaryShade to { light: 7, dark: 8 }
- Add Input theme override to apply --inspector-input-background globally
- Add --inspector-input-background token (white in light, dark-9 in dark)
- Override --mantine-color-body in dark mode via cssVariablesResolver
  in both main.tsx and Storybook preview.tsx
- Add dark-mode CSS overrides for Select dropdown and option hover
- Add dark-mode CSS override for Accordion control hover
- Rename CSS variable --inspector-status-failed → --inspector-status-error

Component changes:
- CopyButton: increase icon font size to 24px, use --inspector-text-primary
  for high-contrast color (black/white per theme)
- TaskControls: remove onClearHistory (moved to TaskListPanel), fix Select
  clear button not disappearing by passing null instead of undefined
- TaskListPanel: add onClearCompleted callback, render "Clear" button
  next to Completed section header
- HistoryListPanel: move "Clear" button from toolbar to History section
  header, rename from "Clear All"

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
cliffhall 2026-04-17 19:26:21 -04:00
commit 658ef86944
24 changed files with 148 additions and 51 deletions
Download patch file Download diff file Expand all files Collapse all files

12
clients/web/.storybook/preview.tsx
View file

@ -1,5 +1,5 @@
import type { Preview } from '@storybook/react-vite'
import { MantineProvider, useMantineColorScheme } from '@mantine/core'
import { MantineProvider, useMantineColorScheme, type CSSVariablesResolver } from '@mantine/core'
import { Notifications } from '@mantine/notifications'
import '@mantine/core/styles.css'
import '@mantine/notifications/styles.css'
@ -24,6 +24,14 @@ function ColorSchemeWrapper({
return <>{children}</>
}
const resolver: CSSVariablesResolver = () => ({
variables: {},
light: {},
dark: {
'--mantine-color-body': 'var(--mantine-color-dark-9)',
},
})
const preview: Preview = {
globalTypes: {
colorScheme: {
@ -46,7 +54,7 @@ const preview: Preview = {
(Story, context) => {
const isFullscreen = context.parameters?.layout === 'fullscreen'
return (
<MantineProvider theme={theme} defaultColorScheme="light">
<MantineProvider theme={theme} defaultColorScheme="light" cssVariablesResolver={resolver}>
<ColorSchemeWrapper colorScheme={context.globals.colorScheme ?? 'light'}>
<Notifications position="top-right" />
{isFullscreen ? (

34
clients/web/src/App.css
View file

@ -26,6 +26,9 @@
--inspector-surface-card: var(--mantine-color-gray-0);
--inspector-surface-code: var(--mantine-color-white);
/* ── Inputs ────────────────────────────────────────────── */
--inspector-input-background: var(--mantine-color-white);
/* ── Borders ───────────────────────────────────────────── */
--inspector-border-default: var(--mantine-color-default-border);
--inspector-border-subtle: var(--mantine-color-gray-3);
@ -71,7 +74,8 @@
[data-mantine-color-scheme="dark"] {
--inspector-surface-card: var(--mantine-color-gray-9);
--inspector-surface-code: var(--mantine-color-dark-9);
--inspector-border-subtle: var(--mantine-color-dark-4);
--inspector-border-subtle: var(--mantine-color-gray-4);
--inspector-input-background: var(--mantine-color-dark-9);
}
/* ── Animations ──────────────────────────────────────────── */
@ -112,7 +116,33 @@
}
[data-mantine-color-scheme="dark"] .list-item:hover {
background-color: var(--mantine-color-dark-5);
background-color: var(--mantine-primary-color-light);
}
/* ── Select dropdown / option (dark mode) ──────────────────────── */
[data-mantine-color-scheme="dark"] .mantine-Select-dropdown {
background-color: var(--mantine-color-gray-8);
}
[data-mantine-color-scheme="dark"] .mantine-Select-option:hover {
background-color: var(--mantine-primary-color-light);
}
[data-mantine-color-scheme="dark"] .mantine-Select-option:hover {
background-color: var(--mantine-primary-color-light);
}
/* ── Segmented control label (dark mode) ──────────────────────── */
[data-mantine-color-scheme="dark"] .mantine-SegmentedControl-indicator {
background-color: var(--mantine-primary-color-light);
}
/* ── Accordion button hover ─────────────────────────────── */
[data-mantine-color-scheme="dark"] .mantine-Accordion-control:hover {
background-color: var(--mantine-primary-color-filled-hover);
}
/* ── Grid alignment ─────────────────────────────────────── */

3
clients/web/src/components/elements/CopyButton/CopyButton.tsx
View file

@ -15,8 +15,9 @@ export function CopyButton({ value }: CopyButtonProps) {
<Tooltip label={copied ? "Copied" : "Copy"}>
<ActionIcon
variant="subtle"
color={copied ? "green" : "gray"}
color={copied ? "green" : "var(--inspector-text-primary)"}
onClick={copy}
fz={24}
>
{copied ? "\u2713" : "\u2398"}
</ActionIcon>

2
clients/web/src/components/elements/ListChangedIndicator/ListChangedIndicator.tsx
View file

@ -19,7 +19,7 @@ const UpdateLabel = Text.withProps({
const RefreshButton = Button.withProps({
size: "sm",
variant: "light",
variant: "subtle",
});
export function ListChangedIndicator({

2
clients/web/src/components/elements/ListToggle/ListToggle.tsx
View file

@ -23,7 +23,7 @@ export function ListToggle({
}
return (
<Button size="sm" onClick={onToggle}>
<Button size="sm" variant="subtle" onClick={onToggle}>
<Icon size={20} />
</Button>
);

12
clients/web/src/components/groups/HistoryListPanel/HistoryListPanel.tsx
View file

@ -22,7 +22,7 @@ export interface HistoryRequestsPanelProps {
}
const ToolbarButton = Button.withProps({
variant: "light",
variant: "subtle",
size: "sm",
});
@ -96,7 +96,6 @@ export function HistoryListPanel({
<Title order={4}>Requests</Title>
<Group gap="xs">
<ToolbarButton onClick={onExport}>Export JSON</ToolbarButton>
<ToolbarButton onClick={onClearAll}>Clear All</ToolbarButton>
{hasResults && (
<ListToggle
compact={compact}
@ -128,9 +127,12 @@ export function HistoryListPanel({
{filteredEntries.length > 0 && (
<>
<Title order={5}>
{formatHistoryTitle(filteredEntries.length)}
</Title>
<Group justify="space-between">
<Title order={5}>
{formatHistoryTitle(filteredEntries.length)}
</Title>
<ToolbarButton onClick={onClearAll}>Clear</ToolbarButton>
</Group>
{filteredEntries.map((entry) => (
<HistoryEntry
key={entryKey(entry)}

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

@ -91,7 +91,7 @@ export function LogControls({
<Stack gap="xs">
{LOG_LEVELS.map((level) => {
const style = LEVEL_COLORS[level];
const active = !!visibleLevels[level];
const active = visibleLevels[level];
return (
<UnstyledButton
key={level}

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

@ -31,7 +31,7 @@ const PanelContainer = Paper.withProps({
});
const ToolbarButton = Button.withProps({
variant: "light",
variant: "subtle",
size: "sm",
});

2
clients/web/src/components/groups/PromptMessagesDisplay/PromptMessagesDisplay.tsx
View file

@ -6,7 +6,7 @@ import type {
import { MessageBubble } from "../../elements/MessageBubble/MessageBubble";
const CopyAllButton = Button.withProps({
variant: "light",
variant: "subtle",
size: "sm",
});

8
clients/web/src/components/groups/ResourceControls/ResourceControls.tsx
View file

@ -93,16 +93,16 @@ export function ResourceControls({
<ListChangedIndicator visible={listChanged} onRefresh={onRefreshList} />
</Group>
<Group gap="xs" wrap="nowrap">
<ListToggle
compact={!allExpanded}
onToggle={() => setOpenSections(allExpanded ? [] : [...allSections])}
/>
<TextInput
flex={1}
placeholder="Search..."
value={searchText}
onChange={(e) => setSearchText(e.currentTarget.value)}
/>
<ListToggle
compact={!allExpanded}
onToggle={() => setOpenSections(allExpanded ? [] : [...allSections])}
/>
</Group>
<Accordion multiple value={openSections} onChange={setOpenSections}>
<Accordion.Item value="resources">

1
clients/web/src/components/groups/TaskControls/TaskControls.stories.tsx
View file

@ -10,7 +10,6 @@ const meta: Meta<typeof TaskControls> = {
onSearchChange: fn(),
onStatusFilterChange: fn(),
onRefresh: fn(),
onClearHistory: fn(),
},
};

17
clients/web/src/components/groups/TaskControls/TaskControls.tsx
View file

@ -10,7 +10,7 @@ const STATUS_OPTIONS: TaskStatus[] = [
];
const ToolbarButton = Button.withProps({
variant: "light",
variant: "subtle",
size: "sm",
});
@ -20,7 +20,6 @@ export interface TaskControlsProps {
onSearchChange: (text: string) => void;
onStatusFilterChange: (status: string) => void;
onRefresh: () => void;
onClearHistory: () => void;
}
export function TaskControls({
@ -29,12 +28,13 @@ export function TaskControls({
onSearchChange,
onStatusFilterChange,
onRefresh,
onClearHistory,
}: TaskControlsProps) {
return (
<Stack gap="md">
<Title order={4}>Tasks</Title>
<Group flex={1} justify={"space-between"}>
<Title order={4}>Tasks</Title>
<ToolbarButton onClick={onRefresh}>Refresh</ToolbarButton>
</Group>
<Title order={5}>Search</Title>
<TextInput
placeholder="Search..."
@ -46,15 +46,10 @@ export function TaskControls({
<Select
placeholder="All statuses"
data={STATUS_OPTIONS}
value={statusFilter}
value={statusFilter ?? null}
onChange={(value) => onStatusFilterChange(value ?? "")}
clearable
/>
<Group>
<ToolbarButton onClick={onRefresh}>Refresh</ToolbarButton>
<ToolbarButton onClick={onClearHistory}>Clear History</ToolbarButton>
</Group>
</Stack>
);
}

1
clients/web/src/components/groups/TaskListPanel/TaskListPanel.stories.tsx
View file

@ -61,6 +61,7 @@ const meta: Meta<typeof TaskListPanel> = {
args: {
tasks: sampleTasks,
searchText: "",
onClearCompleted: fn(),
},
};

28
clients/web/src/components/groups/TaskListPanel/TaskListPanel.tsx
View file

@ -1,5 +1,13 @@
import { useMemo, useState } from "react";
import { Group, Paper, ScrollArea, Stack, Text, Title } from "@mantine/core";
import {
Button,
Group,
Paper,
ScrollArea,
Stack,
Text,
Title,
} from "@mantine/core";
import { TaskCard } from "../TaskCard/TaskCard";
import { ListToggle } from "../../elements/ListToggle/ListToggle";
import type { TaskCardProps } from "../TaskCard/TaskCard";
@ -8,6 +16,7 @@ export interface TaskListPanelProps {
tasks: TaskCardProps[];
searchText: string;
statusFilter?: string;
onClearCompleted: () => void;
}
const PanelContainer = Paper.withProps({
@ -17,6 +26,11 @@ const PanelContainer = Paper.withProps({
variant: "panel",
});
const ClearHistoryButton = Button.withProps({
variant: "subtle",
size: "sm",
});
const EmptyState = Text.withProps({
c: "dimmed",
ta: "center",
@ -58,6 +72,7 @@ export function TaskListPanel({
tasks,
searchText,
statusFilter,
onClearCompleted,
}: TaskListPanelProps) {
const [compact, setCompact] = useState(false);
@ -110,9 +125,14 @@ export function TaskListPanel({
{completedTasks.length > 0 && (
<>
<Title order={5}>
{formatCompletedTitle(completedTasks.length)}
</Title>
<Group justify="space-between">
<Title order={5}>
{formatCompletedTitle(completedTasks.length)}
</Title>
<ClearHistoryButton onClick={onClearCompleted}>
Clear
</ClearHistoryButton>
</Group>
{completedTasks.map((task) => (
<TaskCard
key={taskKey(task)}

2
clients/web/src/components/groups/ToolResultPanel/ToolResultPanel.tsx
View file

@ -15,7 +15,7 @@ export interface ToolResultPanelProps {
}
const ClearButton = Button.withProps({
variant: "light",
variant: "subtle",
size: "sm",
});

4
clients/web/src/components/groups/ViewHeader/ViewHeader.tsx
View file

@ -79,13 +79,13 @@ const RightSection = Group.withProps({
});
const DisconnectButton = Button.withProps({
variant: "outline",
variant: "subtle",
c: "red",
size: "sm",
});
const ThemeToggle = ActionIcon.withProps({
variant: "outline",
variant: "subtle",
size: 36,
"aria-label": "Toggle color scheme",
});

7
clients/web/src/components/screens/PromptsScreen/PromptsScreen.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 { PromptControls } from "../../groups/PromptControls/PromptControls";
import { PromptArgumentsForm } from "../../groups/PromptArgumentsForm/PromptArgumentsForm";
import { PromptMessagesDisplay } from "../../groups/PromptMessagesDisplay/PromptMessagesDisplay";
@ -47,6 +47,7 @@ const SidebarCard = Card.withProps({
});
const DetailCard = Card.withProps({
flex: 1,
withBorder: true,
padding: "lg",
});
@ -84,7 +85,7 @@ export function PromptsScreen({
flex={1}
mah="calc(100vh - var(--app-shell-header-height, 0px) - var(--mantine-spacing-xl) * 2)"
>
<Stack gap="md">
<Group flex={1} gap="md" align="flex-start" wrap="nowrap">
{selectedPrompt ? (
<>
<DetailCard>
@ -108,7 +109,7 @@ export function PromptsScreen({
<EmptyState>Select a prompt to view details</EmptyState>
</DetailCard>
)}
</Stack>
</Group>
</ScrollArea.Autosize>
</ScreenLayout>
);

2
clients/web/src/components/screens/TasksScreen/TasksScreen.stories.tsx
View file

@ -9,7 +9,7 @@ const meta: Meta<typeof TasksScreen> = {
parameters: { layout: "fullscreen" },
args: {
onRefresh: fn(),
onClearHistory: fn(),
onClearCompleted: fn(),
},
};

6
clients/web/src/components/screens/TasksScreen/TasksScreen.tsx
View file

@ -7,7 +7,7 @@ import type { TaskCardProps } from "../../groups/TaskCard/TaskCard";
export interface TasksScreenProps {
tasks: TaskCardProps[];
onRefresh: () => void;
onClearHistory: () => void;
onClearCompleted: () => void;
}
const ScreenLayout = Flex.withProps({
@ -30,7 +30,7 @@ const SidebarCard = Card.withProps({
export function TasksScreen({
tasks,
onRefresh,
onClearHistory,
onClearCompleted,
}: TasksScreenProps) {
const [searchText, setSearchText] = useState("");
const [statusFilter, setStatusFilter] = useState<string | undefined>();
@ -47,7 +47,6 @@ export function TasksScreen({
setStatusFilter(value || undefined)
}
onRefresh={onRefresh}
onClearHistory={onClearHistory}
/>
</SidebarCard>
</Sidebar>
@ -55,6 +54,7 @@ export function TasksScreen({
tasks={tasks}
searchText={searchText}
statusFilter={statusFilter}
onClearCompleted={onClearCompleted}
/>
</ScreenLayout>
);

2
clients/web/src/components/views/ConnectedView/ConnectedView.stories.tsx
View file

@ -762,7 +762,7 @@ export const TasksActive: Story = {
},
]}
onRefresh={fn()}
onClearHistory={fn()}
onClearCompleted={fn()}
/>
),
},

Some files were not shown because too many files have changed in this diff Show more