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

fix lint error, build error, and apply formatting across components

Browse source 
Suppress react-refresh lint rule in Storybook preview config, fix
LogLevel type annotation in LoggingScreen stories, and apply consistent
formatting and layout improvements across multiple components.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
cliffhall 2026-03-24 10:30:43 -04:00
commit fb4ca78726
16 changed files with 615 additions and 371 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -7,6 +7,7 @@ import '../src/App.css'
import { theme } from '../src/theme/theme' import { theme } from '../src/theme/theme'
import { useEffect } from 'react' import { useEffect } from 'react'
// eslint-disable-next-line react-refresh/only-export-components
function ColorSchemeWrapper({ function ColorSchemeWrapper({
colorScheme, colorScheme,
children, children,

5
clients/web/src/components/atoms/AnnotationBadge/AnnotationBadge.tsx
View file

@ -32,7 +32,10 @@ export function AnnotationBadge({
const colorScheme = useComputedColorScheme(); const colorScheme = useComputedColorScheme();
const { color, variant: badgeVariant } = variantMap[variant]; const { color, variant: badgeVariant } = variantMap[variant];
const textColor = const textColor =
(variant === "priority" || variant === "destructive") && colorScheme === "dark" ? "black" : undefined; (variant === "priority" || variant === "destructive") &&
colorScheme === "dark"
? "black"
: undefined;
return ( return (
<Badge color={color} variant={badgeVariant} c={textColor}> <Badge color={color} variant={badgeVariant} c={textColor}>

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

@ -16,30 +16,121 @@ const allTabs = ["Tools", "Resources", "Prompts", "Logs", "Tasks", "History"];
const logMessages: { level: LogLevel; message: string; logger?: string }[] = [ const logMessages: { level: LogLevel; message: string; logger?: string }[] = [
{ level: "info", message: "Server started on port 3000" }, { 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: "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: "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: "error",
{ level: "debug", message: "Parsing JSON-RPC request body", logger: "transport" }, message: "Failed to read resource: file not found at /data/missing.txt",
{ level: "info", message: "Listing available tools for client session", logger: "tools" }, logger: "resources",
{ 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: "info",
{ level: "error", message: "Permission denied reading /etc/secrets.env", logger: "resources" }, message: "Tool execution completed: search_files (245ms)",
{ level: "info", message: "Prompt 'summarize' resolved with 2 messages", logger: "prompts" }, logger: "tools",
{ 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: "debug",
{ level: "info", message: "New resource detected: file:///data/output.csv", logger: "resources" }, message: "Parsing JSON-RPC request body",
{ level: "debug", message: "Serializing response payload (2.4KB)", logger: "transport" }, 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",
{ level: "info", message: "Resource template resolved: db://tables/users/rows/15", logger: "resources" }, message: "Listing available tools for client session",
{ level: "warning", message: "Memory usage at 78% — consider increasing limits", logger: "system" }, logger: "tools",
{ level: "info", message: "Client disconnected gracefully", logger: "session" }, },
{ level: "debug", message: "Flushing log buffer to disk (128 entries)", logger: "logging" }, {
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 { function pad(n: number): string {
@ -81,8 +172,18 @@ export const ToolsActive: Story = {
children: ( children: (
<ToolsScreen <ToolsScreen
tools={[ tools={[
{ name: "send_message", title: "Send Message", selected: false, onClick: fn() }, {
{ name: "create_record", title: "Create Record", selected: true, onClick: fn() }, name: "send_message",
title: "Send Message",
selected: false,
onClick: fn(),
},
{
name: "create_record",
title: "Create Record",
selected: true,
onClick: fn(),
},
{ name: "delete_records", selected: false, onClick: fn() }, { name: "delete_records", selected: false, onClick: fn() },
{ name: "list_users", selected: false, onClick: fn() }, { name: "list_users", selected: false, onClick: fn() },
{ name: "batch_process", selected: false, onClick: fn() }, { name: "batch_process", selected: false, onClick: fn() },
@ -96,7 +197,10 @@ export const ToolsActive: Story = {
properties: { properties: {
title: { type: "string", description: "Record title" }, title: { type: "string", description: "Record title" },
count: { type: "number", description: "Number of items" }, count: { type: "number", description: "Number of items" },
enabled: { type: "boolean", description: "Whether the record is active" }, enabled: {
type: "boolean",
description: "Whether the record is active",
},
}, },
required: ["title"], required: ["title"],
}, },
@ -111,7 +215,13 @@ export const ToolsActive: Story = {
{ {
type: "text", type: "text",
text: JSON.stringify( text: JSON.stringify(
{ id: 42, title: "New Record", count: 5, enabled: true, createdAt: "2026-03-17T12:00:00Z" }, {
id: 42,
title: "New Record",
count: 5,
enabled: true,
createdAt: "2026-03-17T12:00:00Z",
},
null, null,
2, 2,
), ),
@ -172,7 +282,11 @@ export const ResourcesActive: Story = {
mimeType: "application/json", mimeType: "application/json",
annotations: { audience: "developer", priority: 0.8 }, annotations: { audience: "developer", priority: 0.8 },
content: JSON.stringify( content: JSON.stringify(
{ name: "my-project", version: "1.0.0", settings: { debug: true, logLevel: "info" } }, {
name: "my-project",
version: "1.0.0",
settings: { debug: true, logLevel: "info" },
},
null, null,
2, 2,
), ),
@ -199,13 +313,24 @@ export const PromptsActive: Story = {
promptForm={{ promptForm={{
prompts: [ prompts: [
{ name: "summarize", description: "Summarize a document" }, { name: "summarize", description: "Summarize a document" },
{ name: "translate", description: "Translate text to another language" }, {
name: "translate",
description: "Translate text to another language",
},
{ name: "code-review", description: "Review code for issues" }, { name: "code-review", description: "Review code for issues" },
], ],
selectedPrompt: "translate", selectedPrompt: "translate",
arguments: [ arguments: [
{ name: "text", required: true, description: "The text to translate" }, {
{ name: "targetLanguage", required: true, description: "Target language code" }, name: "text",
required: true,
description: "The text to translate",
},
{
name: "targetLanguage",
required: true,
description: "Target language code",
},
], ],
argumentValues: { argumentValues: {
text: "Hello, how are you?", text: "Hello, how are you?",
@ -218,7 +343,11 @@ export const PromptsActive: Story = {
messages={{ messages={{
onCopyAll: fn(), onCopyAll: fn(),
messages: [ messages: [
{ role: "user", content: 'Translate the following text to Spanish: "Hello, how are you?"' }, {
role: "user",
content:
'Translate the following text to Spanish: "Hello, how are you?"',
},
{ role: "assistant", content: "Hola, como estas?" }, { role: "assistant", content: "Hola, como estas?" },
], ],
}} }}

18
clients/web/src/components/layouts/ConnectedLayout/ConnectedLayout.tsx
View file

@ -1,5 +1,13 @@
import type { ReactNode } from "react"; import type { ReactNode } from "react";
import { ActionIcon, AppShell, Button, Group, Image, SegmentedControl, Text } from "@mantine/core"; import {
ActionIcon,
AppShell,
Button,
Group,
Image,
SegmentedControl,
Text,
} from "@mantine/core";
import { useComputedColorScheme } from "@mantine/core"; import { useComputedColorScheme } from "@mantine/core";
import { StatusIndicator } from "../../atoms/StatusIndicator/StatusIndicator"; import { StatusIndicator } from "../../atoms/StatusIndicator/StatusIndicator";
import mcpLogo from "../../../theme/assets/MCP.svg"; import mcpLogo from "../../../theme/assets/MCP.svg";
@ -42,7 +50,13 @@ export function ConnectedLayout({
<AppShell.Header> <AppShell.Header>
<Group h="100%" px="md" wrap="nowrap" gap={0}> <Group h="100%" px="md" wrap="nowrap" gap={0}>
<Group gap="md" wrap="nowrap" w="33.33%" miw={0}> <Group gap="md" wrap="nowrap" w="33.33%" miw={0}>
<Image src={colorScheme === "dark" ? mcpLogoDark : mcpLogo} alt="MCP" w={28} h={28} fit="contain" /> <Image
src={colorScheme === "dark" ? mcpLogoDark : mcpLogo}
alt="MCP"
w={28}
h={28}
fit="contain"
/>
<ServerName>{serverName}</ServerName> <ServerName>{serverName}</ServerName>
</Group> </Group>

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

@ -69,10 +69,7 @@ export function ResourcePreviewPanel({
<Group justify="space-between"> <Group justify="space-between">
<Group gap="xs"> <Group gap="xs">
{annotations?.audience && ( {annotations?.audience && (
<AnnotationBadge <AnnotationBadge label={annotations.audience} variant="audience" />
label={annotations.audience}
variant="audience"
/>
)} )}
{annotations?.priority !== undefined && ( {annotations?.priority !== undefined && (
<AnnotationBadge <AnnotationBadge

10
clients/web/src/components/molecules/ServerCard/ServerCard.tsx
View file

@ -1,12 +1,4 @@
import { import { Badge, Button, Card, Group, Menu, Stack, Text } from "@mantine/core";
Badge,
Button,
Card,
Group,
Menu,
Stack,
Text,
} from "@mantine/core";
import { StatusIndicator } from "../../atoms/StatusIndicator/StatusIndicator"; import { StatusIndicator } from "../../atoms/StatusIndicator/StatusIndicator";
import { TransportBadge } from "../../atoms/TransportBadge/TransportBadge"; import { TransportBadge } from "../../atoms/TransportBadge/TransportBadge";
import { ConnectionToggle } from "../../atoms/ConnectionToggle/ConnectionToggle"; import { ConnectionToggle } from "../../atoms/ConnectionToggle/ConnectionToggle";

5
clients/web/src/components/molecules/ToolDetailPanel/ToolDetailPanel.tsx
View file

@ -55,10 +55,7 @@ export function ToolDetailPanel({
{hasAnnotations && ( {hasAnnotations && (
<Group gap="xs"> <Group gap="xs">
{annotations.audience && ( {annotations.audience && (
<AnnotationBadge <AnnotationBadge label={annotations.audience} variant="audience" />
label={annotations.audience}
variant="audience"
/>
)} )}
{annotations.readOnly && ( {annotations.readOnly && (
<AnnotationBadge label="read-only" variant="readOnly" /> <AnnotationBadge label="read-only" variant="readOnly" />

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

@ -53,74 +53,74 @@ export function HistoryScreen({
}: HistoryScreenProps) { }: HistoryScreenProps) {
return ( return (
<Container size="xl" py="xl"> <Container size="xl" py="xl">
<Paper withBorder p="md"> <Paper withBorder p="md">
<Stack gap="md"> <Stack gap="md">
<Group justify="space-between" wrap="wrap"> <Group justify="space-between" wrap="wrap">
<Title order={3}>Request History</Title> <Title order={3}>Request History</Title>
<Group> <Group>
<TextInput <TextInput
placeholder="Search..." placeholder="Search..."
value={searchText} value={searchText}
onChange={(event) => onSearchChange(event.currentTarget.value)} onChange={(event) => onSearchChange(event.currentTarget.value)}
/>
<Select
placeholder="Filter by method"
data={METHOD_OPTIONS}
value={methodFilter}
onChange={(value) => onMethodFilterChange(value ?? "")}
clearable
/>
<Button variant="light" size="sm" onClick={onExport}>
Export JSON
</Button>
<Button variant="light" size="sm" onClick={onClearAll}>
Clear All
</Button>
</Group>
</Group>
{entries.length === 0 ? (
<Text c="dimmed" ta="center" py="xl">
No request history
</Text>
) : (
<Stack gap="md">
{entries.map((entry) => (
<HistoryEntry
key={`${entry.timestamp}-${entry.method}`}
{...entry}
/> />
))} <Select
</Stack> placeholder="Filter by method"
)} data={METHOD_OPTIONS}
value={methodFilter}
onChange={(value) => onMethodFilterChange(value ?? "")}
clearable
/>
<Button variant="light" size="sm" onClick={onExport}>
Export JSON
</Button>
<Button variant="light" size="sm" onClick={onClearAll}>
Clear All
</Button>
</Group>
</Group>
{pinnedEntries.length > 0 && ( {entries.length === 0 ? (
<> <Text c="dimmed" ta="center" py="xl">
<Divider /> No request history
<Title order={4}>Pinned Requests ({pinnedEntries.length})</Title> </Text>
<Stack gap="sm"> ) : (
{pinnedEntries.map((entry) => ( <Stack gap="md">
{entries.map((entry) => (
<HistoryEntry <HistoryEntry
key={`${entry.timestamp}-${entry.method}`} key={`${entry.timestamp}-${entry.method}`}
{...entry} {...entry}
/> />
))} ))}
</Stack> </Stack>
</>
)}
<Group justify="flex-end">
<Text size="sm" c="dimmed">
Showing {displayedCount} of {totalCount} entries
</Text>
{displayedCount < totalCount && (
<Button variant="light" size="sm" onClick={onLoadMore}>
Load More
</Button>
)} )}
</Group>
</Stack> {pinnedEntries.length > 0 && (
</Paper> <>
<Divider />
<Title order={4}>Pinned Requests ({pinnedEntries.length})</Title>
<Stack gap="sm">
{pinnedEntries.map((entry) => (
<HistoryEntry
key={`${entry.timestamp}-${entry.method}`}
{...entry}
/>
))}
</Stack>
</>
)}
<Group justify="flex-end">
<Text size="sm" c="dimmed">
Showing {displayedCount} of {totalCount} entries
</Text>
{displayedCount < totalCount && (
<Button variant="light" size="sm" onClick={onLoadMore}>
Load More
</Button>
)}
</Group>
</Stack>
</Paper>
</Container> </Container>
); );
} }

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

@ -2,7 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react-vite";
import { fn } from "storybook/test"; import { fn } from "storybook/test";
import { LoggingScreen } from "./LoggingScreen"; import { LoggingScreen } from "./LoggingScreen";
import type { LogControlsProps } from "../../molecules/LogControls/LogControls"; import type { LogControlsProps } from "../../molecules/LogControls/LogControls";
import type { LogEntryProps } from "../../atoms/LogEntry/LogEntry"; import type { LogEntryProps, LogLevel } from "../../atoms/LogEntry/LogEntry";
function makeControls(): LogControlsProps { function makeControls(): LogControlsProps {
return { return {
@ -46,32 +46,123 @@ export const Empty: Story = {
}, },
}; };
const logMessages: { level: string; message: string; logger?: string }[] = [ const logMessages: { level: LogLevel; message: string; logger?: string }[] = [
{ level: "info", message: "Server started on port 3000" }, { 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: "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: "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: "error",
{ level: "debug", message: "Parsing JSON-RPC request body", logger: "transport" }, message: "Failed to read resource: file not found at /data/missing.txt",
{ level: "info", message: "Listing available tools for client session", logger: "tools" }, logger: "resources",
{ 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: "info",
{ level: "error", message: "Permission denied reading /etc/secrets.env", logger: "resources" }, message: "Tool execution completed: search_files (245ms)",
{ level: "info", message: "Prompt 'summarize' resolved with 2 messages", logger: "prompts" }, logger: "tools",
{ 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: "debug",
{ level: "info", message: "New resource detected: file:///data/output.csv", logger: "resources" }, message: "Parsing JSON-RPC request body",
{ level: "debug", message: "Serializing response payload (2.4KB)", logger: "transport" }, 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",
{ level: "info", message: "Resource template resolved: db://tables/users/rows/15", logger: "resources" }, message: "Listing available tools for client session",
{ level: "warning", message: "Memory usage at 78% — consider increasing limits", logger: "system" }, logger: "tools",
{ level: "info", message: "Client disconnected gracefully", logger: "session" }, },
{ level: "debug", message: "Flushing log buffer to disk (128 entries)", logger: "logging" }, {
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 { function pad(n: number): string {

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

@ -5,7 +5,6 @@ import {
Container, Container,
Grid, Grid,
Group, Group,
ScrollArea, ScrollArea,
Stack, Stack,
Text, Text,
@ -33,45 +32,45 @@ export function LoggingScreen({
}: LoggingScreenProps) { }: LoggingScreenProps) {
return ( return (
<Container size="xl" py="xl"> <Container size="xl" py="xl">
<Grid align="stretch"> <Grid align="stretch">
<Grid.Col span={3}> <Grid.Col span={3}>
<Card withBorder padding="lg"> <Card withBorder padding="lg">
<LogControls {...controls} /> <LogControls {...controls} />
</Card> </Card>
</Grid.Col> </Grid.Col>
<Grid.Col span={9}> <Grid.Col span={9}>
<Card withBorder padding="lg" h="100%"> <Card withBorder padding="lg" h="100%">
<Stack gap="sm" h="100%"> <Stack gap="sm" h="100%">
<Group justify="space-between"> <Group justify="space-between">
<Title order={4}>Log Stream</Title> <Title order={4}>Log Stream</Title>
<Group> <Group>
<Checkbox <Checkbox
label="Auto-scroll" label="Auto-scroll"
checked={autoScroll} checked={autoScroll}
onChange={onToggleAutoScroll} onChange={onToggleAutoScroll}
/> />
<Button variant="light" size="sm" onClick={onCopyAll}> <Button variant="light" size="sm" onClick={onCopyAll}>
Copy All Copy All
</Button> </Button>
</Group>
</Group> </Group>
</Group> {entries.length > 0 ? (
{entries.length > 0 ? ( <ScrollArea flex={1}>
<ScrollArea flex={1}> <Stack gap="xs">
<Stack gap="xs"> {entries.map((entry, index) => (
{entries.map((entry, index) => ( <LogEntry key={index} {...entry} />
<LogEntry key={index} {...entry} /> ))}
))} </Stack>
</ScrollArea>
) : (
<Stack flex={1} align="center" justify="center">
<Text c="dimmed">No log entries</Text>
</Stack> </Stack>
</ScrollArea> )}
) : ( </Stack>
<Stack flex={1} align="center" justify="center"> </Card>
<Text c="dimmed">No log entries</Text> </Grid.Col>
</Stack> </Grid>
)}
</Stack>
</Card>
</Grid.Col>
</Grid>
</Container> </Container>
); );
} }

48
clients/web/src/components/organisms/PromptsScreen/PromptsScreen.tsx
View file

@ -20,30 +20,30 @@ export function PromptsScreen({
}: PromptsScreenProps) { }: PromptsScreenProps) {
return ( return (
<Container size="xl" py="xl"> <Container size="xl" py="xl">
<Grid align="stretch"> <Grid align="stretch">
<Grid.Col span={5}> <Grid.Col span={5}>
<Card withBorder padding="lg" h="100%"> <Card withBorder padding="lg" h="100%">
<Stack gap="md"> <Stack gap="md">
<ListChangedIndicator <ListChangedIndicator
visible={listChanged} visible={listChanged}
onRefresh={onRefreshList} onRefresh={onRefreshList}
/> />
<PromptArgumentsForm {...promptForm} /> <PromptArgumentsForm {...promptForm} />
</Stack> </Stack>
</Card> </Card>
</Grid.Col> </Grid.Col>
<Grid.Col span={7}> <Grid.Col span={7}>
<Card withBorder padding="lg" h="100%"> <Card withBorder padding="lg" h="100%">
{messages ? ( {messages ? (
<PromptMessagesDisplay {...messages} /> <PromptMessagesDisplay {...messages} />
) : ( ) : (
<Text c="dimmed" ta="center" py="xl"> <Text c="dimmed" ta="center" py="xl">
Select a prompt and click Get Prompt to see messages Select a prompt and click Get Prompt to see messages
</Text> </Text>
)} )}
</Card> </Card>
</Grid.Col> </Grid.Col>
</Grid> </Grid>
</Container> </Container>
); );
} }

170
clients/web/src/components/organisms/ResourcesScreen/ResourcesScreen.tsx
View file

@ -1,4 +1,13 @@
import { Accordion, Card, Container, Grid, Stack, Text, TextInput, Title } from "@mantine/core"; import {
Accordion,
Card,
Container,
Grid,
Stack,
Text,
TextInput,
Title,
} from "@mantine/core";
import { ListChangedIndicator } from "../../atoms/ListChangedIndicator/ListChangedIndicator"; import { ListChangedIndicator } from "../../atoms/ListChangedIndicator/ListChangedIndicator";
import { ResourceListItem } from "../../molecules/ResourceListItem/ResourceListItem"; import { ResourceListItem } from "../../molecules/ResourceListItem/ResourceListItem";
import { ResourcePreviewPanel } from "../../molecules/ResourcePreviewPanel/ResourcePreviewPanel"; import { ResourcePreviewPanel } from "../../molecules/ResourcePreviewPanel/ResourcePreviewPanel";
@ -46,90 +55,87 @@ export function ResourcesScreen({
return ( return (
<Container size="xl" py="xl"> <Container size="xl" py="xl">
<Grid align="stretch"> <Grid align="stretch">
<Grid.Col span={4}> <Grid.Col span={4}>
<Card withBorder padding="lg" h="100%"> <Card withBorder padding="lg" h="100%">
<Stack gap="sm"> <Stack gap="sm">
<Title order={4}>Resources</Title> <Title order={4}>Resources</Title>
<ListChangedIndicator <ListChangedIndicator
visible={listChanged} visible={listChanged}
onRefresh={onRefreshList} onRefresh={onRefreshList}
/> />
<TextInput <TextInput
placeholder="Search..." placeholder="Search..."
value={searchText} value={searchText}
onChange={(e) => onSearchChange(e.currentTarget.value)} onChange={(e) => onSearchChange(e.currentTarget.value)}
/> />
<Accordion <Accordion multiple defaultValue={openSections}>
multiple <Accordion.Item value="resources">
defaultValue={openSections} <Accordion.Control disabled={filteredResources.length === 0}>
> URIs ({filteredResources.length})
<Accordion.Item value="resources"> </Accordion.Control>
<Accordion.Control disabled={filteredResources.length === 0}> <Accordion.Panel>
URIs ({filteredResources.length}) <Stack gap="xs">
</Accordion.Control> {filteredResources.map((resource) => (
<Accordion.Panel> <ResourceListItem key={resource.uri} {...resource} />
<Stack gap="xs"> ))}
{filteredResources.map((resource) => ( </Stack>
<ResourceListItem key={resource.uri} {...resource} /> </Accordion.Panel>
))} </Accordion.Item>
</Stack>
</Accordion.Panel>
</Accordion.Item>
<Accordion.Item value="templates"> <Accordion.Item value="templates">
<Accordion.Control disabled={templates.length === 0}> <Accordion.Control disabled={templates.length === 0}>
Templates ({templates.length}) Templates ({templates.length})
</Accordion.Control> </Accordion.Control>
<Accordion.Panel> <Accordion.Panel>
<Stack gap="xs"> <Stack gap="xs">
{templates.map((template) => ( {templates.map((template) => (
<ResourceTemplateInput <ResourceTemplateInput
key={template.template} key={template.template}
{...template} {...template}
/> />
))} ))}
</Stack> </Stack>
</Accordion.Panel> </Accordion.Panel>
</Accordion.Item> </Accordion.Item>
<Accordion.Item value="subscriptions"> <Accordion.Item value="subscriptions">
<Accordion.Control disabled={subscriptions.length === 0}> <Accordion.Control disabled={subscriptions.length === 0}>
Subscriptions ({subscriptions.length}) Subscriptions ({subscriptions.length})
</Accordion.Control> </Accordion.Control>
<Accordion.Panel> <Accordion.Panel>
<Stack gap="xs"> <Stack gap="xs">
{subscriptions.map((sub) => ( {subscriptions.map((sub) => (
<Text key={sub.name} size="sm"> <Text key={sub.name} size="sm">
{sub.name} {sub.name}
{sub.lastUpdated && ( {sub.lastUpdated && (
<Text span c="dimmed" size="xs"> <Text span c="dimmed" size="xs">
{" "} {" "}
— {sub.lastUpdated} — {sub.lastUpdated}
</Text> </Text>
)} )}
</Text> </Text>
))} ))}
</Stack> </Stack>
</Accordion.Panel> </Accordion.Panel>
</Accordion.Item> </Accordion.Item>
</Accordion> </Accordion>
</Stack> </Stack>
</Card> </Card>
</Grid.Col> </Grid.Col>
<Grid.Col span={8}> <Grid.Col span={8}>
<Card withBorder padding="lg"> <Card withBorder padding="lg">
{selectedResource ? ( {selectedResource ? (
<ResourcePreviewPanel {...selectedResource} /> <ResourcePreviewPanel {...selectedResource} />
) : ( ) : (
<Text c="dimmed" ta="center" py="xl"> <Text c="dimmed" ta="center" py="xl">
Select a resource to preview Select a resource to preview
</Text> </Text>
)} )}
</Card> </Card>
</Grid.Col> </Grid.Col>
</Grid> </Grid>
</Container> </Container>
); );
} }

14
clients/web/src/components/organisms/ServerListScreen/ServerListScreen.tsx
View file

@ -1,10 +1,4 @@
import { import { Container, Group, SimpleGrid, Stack, Text } from "@mantine/core";
Container,
Group,
SimpleGrid,
Stack,
Text,
} from "@mantine/core";
import { ServerCard } from "../../molecules/ServerCard/ServerCard"; import { ServerCard } from "../../molecules/ServerCard/ServerCard";
import { AddServerMenu } from "../../molecules/AddServerMenu/AddServerMenu"; import { AddServerMenu } from "../../molecules/AddServerMenu/AddServerMenu";
import type { ServerCardProps } from "../../molecules/ServerCard/ServerCard"; import type { ServerCardProps } from "../../molecules/ServerCard/ServerCard";
@ -38,7 +32,11 @@ export function ServerListScreen({
No servers configured. Add a server to get started. No servers configured. Add a server to get started.
</Text> </Text>
) : ( ) : (
<SimpleGrid cols={{ base: 1, md: 2 }} spacing="lg" className="grid-align-start"> <SimpleGrid
cols={{ base: 1, md: 2 }}
spacing="lg"
className="grid-align-start"
>
{servers.map((server) => ( {servers.map((server) => (
<ServerCard key={server.name} {...server} /> <ServerCard key={server.name} {...server} />
))} ))}

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

@ -1,4 +1,12 @@
import { Button, Container, Group, Paper, Stack, Text, Title } from "@mantine/core"; import {
Button,
Container,
Group,
Paper,
Stack,
Text,
Title,
} from "@mantine/core";
import { TaskCard } from "../../molecules/TaskCard/TaskCard"; import { TaskCard } from "../../molecules/TaskCard/TaskCard";
import type { TaskCardProps } from "../../molecules/TaskCard/TaskCard"; import type { TaskCardProps } from "../../molecules/TaskCard/TaskCard";
@ -17,43 +25,43 @@ export function TasksScreen({
}: TasksScreenProps) { }: TasksScreenProps) {
return ( return (
<Container size="xl" py="xl"> <Container size="xl" py="xl">
<Paper withBorder p="md"> <Paper withBorder p="md">
<Stack gap="lg"> <Stack gap="lg">
<Group justify="space-between"> <Group justify="space-between">
<Title order={4}>Active Tasks ({activeTasks.length})</Title> <Title order={4}>Active Tasks ({activeTasks.length})</Title>
<Button variant="light" size="xs" onClick={onRefresh}> <Button variant="light" size="xs" onClick={onRefresh}>
Refresh Tasks Refresh Tasks
</Button> </Button>
</Group> </Group>
{activeTasks.length === 0 ? ( {activeTasks.length === 0 ? (
<Text c="dimmed">No active tasks</Text> <Text c="dimmed">No active tasks</Text>
) : ( ) : (
<Stack gap="md"> <Stack gap="md">
{activeTasks.map((task) => ( {activeTasks.map((task) => (
<TaskCard key={task.taskId} {...task} /> <TaskCard key={task.taskId} {...task} />
))} ))}
</Stack> </Stack>
)} )}
<Group justify="space-between"> <Group justify="space-between">
<Title order={4}>Completed Tasks ({completedTasks.length})</Title> <Title order={4}>Completed Tasks ({completedTasks.length})</Title>
{completedTasks.length > 0 && ( {completedTasks.length > 0 && (
<Button variant="light" size="xs" onClick={onClearHistory}> <Button variant="light" size="xs" onClick={onClearHistory}>
Clear History Clear History
</Button> </Button>
)} )}
</Group> </Group>
{completedTasks.length === 0 ? ( {completedTasks.length === 0 ? (
<Text c="dimmed">No completed tasks</Text> <Text c="dimmed">No completed tasks</Text>
) : ( ) : (
<Stack gap="md"> <Stack gap="md">
{completedTasks.map((task) => ( {completedTasks.map((task) => (
<TaskCard key={task.taskId} {...task} /> <TaskCard key={task.taskId} {...task} />
))} ))}
</Stack>
)}
</Stack> </Stack>
)} </Paper>
</Stack>
</Paper>
</Container> </Container>
); );
} }

3
clients/web/src/components/organisms/ToolsScreen/ToolsScreen.stories.tsx
View file

@ -145,7 +145,8 @@ export const LongToolName: Story = {
}, },
aggregation_functions: { aggregation_functions: {
type: "string", type: "string",
description: "Comma-separated list of aggregation functions to apply", description:
"Comma-separated list of aggregation functions to apply",
}, },
}, },
required: ["primary_table_name"], required: ["primary_table_name"],

102
clients/web/src/components/organisms/ToolsScreen/ToolsScreen.tsx
View file

@ -1,4 +1,12 @@
import { Card, Container, Grid, Stack, Text, TextInput, Title } from "@mantine/core"; import {
Card,
Container,
Grid,
Stack,
Text,
TextInput,
Title,
} from "@mantine/core";
import { ListChangedIndicator } from "../../atoms/ListChangedIndicator/ListChangedIndicator"; import { ListChangedIndicator } from "../../atoms/ListChangedIndicator/ListChangedIndicator";
import { ToolListItem } from "../../molecules/ToolListItem/ToolListItem"; import { ToolListItem } from "../../molecules/ToolListItem/ToolListItem";
import { ToolDetailPanel } from "../../molecules/ToolDetailPanel/ToolDetailPanel"; import { ToolDetailPanel } from "../../molecules/ToolDetailPanel/ToolDetailPanel";
@ -36,55 +44,55 @@ export function ToolsScreen({
return ( return (
<Container size="xl" py="xl"> <Container size="xl" py="xl">
<Grid align="stretch"> <Grid align="stretch">
<Grid.Col span={3}> <Grid.Col span={3}>
<Card withBorder padding="lg" h="100%"> <Card withBorder padding="lg" h="100%">
<Stack gap="sm"> <Stack gap="sm">
<Title order={4}>Tools</Title> <Title order={4}>Tools</Title>
<ListChangedIndicator <ListChangedIndicator
visible={listChanged} visible={listChanged}
onRefresh={onRefreshList} onRefresh={onRefreshList}
/>
<TextInput
placeholder="Search tools..."
value={searchText}
onChange={(event) => onSearchChange(event.currentTarget.value)}
/>
{filteredTools.map((tool) => (
<ToolListItem
key={tool.name}
{...tool}
onClick={() => onSelectTool(tool.name)}
/> />
))} <TextInput
</Stack> placeholder="Search tools..."
</Card> value={searchText}
</Grid.Col> onChange={(event) => onSearchChange(event.currentTarget.value)}
/>
{filteredTools.map((tool) => (
<ToolListItem
key={tool.name}
{...tool}
onClick={() => onSelectTool(tool.name)}
/>
))}
</Stack>
</Card>
</Grid.Col>
<Grid.Col span={5}> <Grid.Col span={5}>
<Card withBorder padding="lg" h="100%"> <Card withBorder padding="lg" h="100%">
{selectedTool ? ( {selectedTool ? (
<ToolDetailPanel {...selectedTool} /> <ToolDetailPanel {...selectedTool} />
) : ( ) : (
<Text c="dimmed" ta="center" py="xl"> <Text c="dimmed" ta="center" py="xl">
Select a tool to view details Select a tool to view details
</Text> </Text>
)} )}
</Card> </Card>
</Grid.Col> </Grid.Col>
<Grid.Col span={4}> <Grid.Col span={4}>
<Card withBorder padding="lg" h="100%"> <Card withBorder padding="lg" h="100%">
{result ? ( {result ? (
<ResultPanel {...result} /> <ResultPanel {...result} />
) : ( ) : (
<Text c="dimmed" ta="center" py="xl"> <Text c="dimmed" ta="center" py="xl">
Results will appear here Results will appear here
</Text> </Text>
)} )}
</Card> </Card>
</Grid.Col> </Grid.Col>
</Grid> </Grid>
</Container> </Container>
); );
} }