diff --git a/clients/web/.storybook/preview.tsx b/clients/web/.storybook/preview.tsx index 5a6be884..3aed15c1 100644 --- a/clients/web/.storybook/preview.tsx +++ b/clients/web/.storybook/preview.tsx @@ -7,6 +7,7 @@ import '../src/App.css' import { theme } from '../src/theme/theme' import { useEffect } from 'react' +// eslint-disable-next-line react-refresh/only-export-components function ColorSchemeWrapper({ colorScheme, children, diff --git a/clients/web/src/components/atoms/AnnotationBadge/AnnotationBadge.tsx b/clients/web/src/components/atoms/AnnotationBadge/AnnotationBadge.tsx index a7490f70..c4aa06ca 100644 --- a/clients/web/src/components/atoms/AnnotationBadge/AnnotationBadge.tsx +++ b/clients/web/src/components/atoms/AnnotationBadge/AnnotationBadge.tsx @@ -32,7 +32,10 @@ export function AnnotationBadge({ const colorScheme = useComputedColorScheme(); const { color, variant: badgeVariant } = variantMap[variant]; const textColor = - (variant === "priority" || variant === "destructive") && colorScheme === "dark" ? "black" : undefined; + (variant === "priority" || variant === "destructive") && + colorScheme === "dark" + ? "black" + : undefined; return ( diff --git a/clients/web/src/components/layouts/ConnectedLayout/ConnectedLayout.stories.tsx b/clients/web/src/components/layouts/ConnectedLayout/ConnectedLayout.stories.tsx index 625fd118..a8c3b970 100644 --- a/clients/web/src/components/layouts/ConnectedLayout/ConnectedLayout.stories.tsx +++ b/clients/web/src/components/layouts/ConnectedLayout/ConnectedLayout.stories.tsx @@ -16,30 +16,121 @@ 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: "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" }, + { + 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 { @@ -81,8 +172,18 @@ export const ToolsActive: Story = { children: ( - MCP + MCP {serverName} diff --git a/clients/web/src/components/molecules/ResourcePreviewPanel/ResourcePreviewPanel.tsx b/clients/web/src/components/molecules/ResourcePreviewPanel/ResourcePreviewPanel.tsx index 562a5b66..69c9c2c6 100644 --- a/clients/web/src/components/molecules/ResourcePreviewPanel/ResourcePreviewPanel.tsx +++ b/clients/web/src/components/molecules/ResourcePreviewPanel/ResourcePreviewPanel.tsx @@ -69,10 +69,7 @@ export function ResourcePreviewPanel({ {annotations?.audience && ( - + )} {annotations?.priority !== undefined && ( {annotations.audience && ( - + )} {annotations.readOnly && ( diff --git a/clients/web/src/components/organisms/HistoryScreen/HistoryScreen.tsx b/clients/web/src/components/organisms/HistoryScreen/HistoryScreen.tsx index 14ce5b83..f868bbec 100644 --- a/clients/web/src/components/organisms/HistoryScreen/HistoryScreen.tsx +++ b/clients/web/src/components/organisms/HistoryScreen/HistoryScreen.tsx @@ -53,74 +53,74 @@ export function HistoryScreen({ }: HistoryScreenProps) { return ( - - - - Request History - - onSearchChange(event.currentTarget.value)} - /> - onMethodFilterChange(value ?? "")} + clearable + /> + + + + - {pinnedEntries.length > 0 && ( - <> - - Pinned Requests ({pinnedEntries.length}) - - {pinnedEntries.map((entry) => ( + {entries.length === 0 ? ( + + No request history + + ) : ( + + {entries.map((entry) => ( ))} - - )} - - - - Showing {displayedCount} of {totalCount} entries - - {displayedCount < totalCount && ( - )} - - - + + {pinnedEntries.length > 0 && ( + <> + + Pinned Requests ({pinnedEntries.length}) + + {pinnedEntries.map((entry) => ( + + ))} + + + )} + + + + Showing {displayedCount} of {totalCount} entries + + {displayedCount < totalCount && ( + + )} + + + ); } diff --git a/clients/web/src/components/organisms/LoggingScreen/LoggingScreen.stories.tsx b/clients/web/src/components/organisms/LoggingScreen/LoggingScreen.stories.tsx index 6b8f6a74..bf497115 100644 --- a/clients/web/src/components/organisms/LoggingScreen/LoggingScreen.stories.tsx +++ b/clients/web/src/components/organisms/LoggingScreen/LoggingScreen.stories.tsx @@ -2,7 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react-vite"; import { fn } from "storybook/test"; import { LoggingScreen } from "./LoggingScreen"; 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 { 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: "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: "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" }, + { + 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 { diff --git a/clients/web/src/components/organisms/LoggingScreen/LoggingScreen.tsx b/clients/web/src/components/organisms/LoggingScreen/LoggingScreen.tsx index 9a146e4e..dd736b4a 100644 --- a/clients/web/src/components/organisms/LoggingScreen/LoggingScreen.tsx +++ b/clients/web/src/components/organisms/LoggingScreen/LoggingScreen.tsx @@ -5,7 +5,6 @@ import { Container, Grid, Group, - ScrollArea, Stack, Text, @@ -33,45 +32,45 @@ export function LoggingScreen({ }: LoggingScreenProps) { return ( - - - - - - - - - - - Log Stream - - - + + + + + + + + + + + Log Stream + + + + - - {entries.length > 0 ? ( - - - {entries.map((entry, index) => ( - - ))} + {entries.length > 0 ? ( + + + {entries.map((entry, index) => ( + + ))} + + + ) : ( + + No log entries - - ) : ( - - No log entries - - )} - - - - + )} + + + + ); } diff --git a/clients/web/src/components/organisms/PromptsScreen/PromptsScreen.tsx b/clients/web/src/components/organisms/PromptsScreen/PromptsScreen.tsx index 247d8a85..7715d311 100644 --- a/clients/web/src/components/organisms/PromptsScreen/PromptsScreen.tsx +++ b/clients/web/src/components/organisms/PromptsScreen/PromptsScreen.tsx @@ -20,30 +20,30 @@ export function PromptsScreen({ }: PromptsScreenProps) { return ( - - - - - - - - - - - - {messages ? ( - - ) : ( - - Select a prompt and click Get Prompt to see messages - - )} - - - + + + + + + + + + + + + {messages ? ( + + ) : ( + + Select a prompt and click Get Prompt to see messages + + )} + + + ); } diff --git a/clients/web/src/components/organisms/ResourcesScreen/ResourcesScreen.tsx b/clients/web/src/components/organisms/ResourcesScreen/ResourcesScreen.tsx index 0cfa340b..4e3e08fb 100644 --- a/clients/web/src/components/organisms/ResourcesScreen/ResourcesScreen.tsx +++ b/clients/web/src/components/organisms/ResourcesScreen/ResourcesScreen.tsx @@ -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 { ResourceListItem } from "../../molecules/ResourceListItem/ResourceListItem"; import { ResourcePreviewPanel } from "../../molecules/ResourcePreviewPanel/ResourcePreviewPanel"; @@ -46,90 +55,87 @@ export function ResourcesScreen({ return ( - - - - - Resources - - onSearchChange(e.currentTarget.value)} - /> - - - - URIs ({filteredResources.length}) - - - - {filteredResources.map((resource) => ( - - ))} - - - + + + + + Resources + + onSearchChange(e.currentTarget.value)} + /> + + + + URIs ({filteredResources.length}) + + + + {filteredResources.map((resource) => ( + + ))} + + + - - - Templates ({templates.length}) - - - - {templates.map((template) => ( - - ))} - - - + + + Templates ({templates.length}) + + + + {templates.map((template) => ( + + ))} + + + - - - Subscriptions ({subscriptions.length}) - - - - {subscriptions.map((sub) => ( - - {sub.name} - {sub.lastUpdated && ( - - {" "} - — {sub.lastUpdated} - - )} - - ))} - - - - - - - + + + Subscriptions ({subscriptions.length}) + + + + {subscriptions.map((sub) => ( + + {sub.name} + {sub.lastUpdated && ( + + {" "} + — {sub.lastUpdated} + + )} + + ))} + + + + + + + - - - {selectedResource ? ( - - ) : ( - - Select a resource to preview - - )} - - - + + + {selectedResource ? ( + + ) : ( + + Select a resource to preview + + )} + + + ); } diff --git a/clients/web/src/components/organisms/ServerListScreen/ServerListScreen.tsx b/clients/web/src/components/organisms/ServerListScreen/ServerListScreen.tsx index a7e6a86d..2b710427 100644 --- a/clients/web/src/components/organisms/ServerListScreen/ServerListScreen.tsx +++ b/clients/web/src/components/organisms/ServerListScreen/ServerListScreen.tsx @@ -1,10 +1,4 @@ -import { - Container, - Group, - SimpleGrid, - Stack, - Text, -} from "@mantine/core"; +import { Container, Group, SimpleGrid, Stack, Text } from "@mantine/core"; import { ServerCard } from "../../molecules/ServerCard/ServerCard"; import { AddServerMenu } from "../../molecules/AddServerMenu/AddServerMenu"; import type { ServerCardProps } from "../../molecules/ServerCard/ServerCard"; @@ -38,7 +32,11 @@ export function ServerListScreen({ No servers configured. Add a server to get started. ) : ( - + {servers.map((server) => ( ))} diff --git a/clients/web/src/components/organisms/TasksScreen/TasksScreen.tsx b/clients/web/src/components/organisms/TasksScreen/TasksScreen.tsx index 2e90baf9..58a2d352 100644 --- a/clients/web/src/components/organisms/TasksScreen/TasksScreen.tsx +++ b/clients/web/src/components/organisms/TasksScreen/TasksScreen.tsx @@ -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 type { TaskCardProps } from "../../molecules/TaskCard/TaskCard"; @@ -17,43 +25,43 @@ export function TasksScreen({ }: TasksScreenProps) { return ( - - - - Active Tasks ({activeTasks.length}) - - - {activeTasks.length === 0 ? ( - No active tasks - ) : ( - - {activeTasks.map((task) => ( - - ))} - - )} + + + + Active Tasks ({activeTasks.length}) + + + {activeTasks.length === 0 ? ( + No active tasks + ) : ( + + {activeTasks.map((task) => ( + + ))} + + )} - - Completed Tasks ({completedTasks.length}) - {completedTasks.length > 0 && ( - - )} - - {completedTasks.length === 0 ? ( - No completed tasks - ) : ( - - {completedTasks.map((task) => ( - - ))} + + Completed Tasks ({completedTasks.length}) + {completedTasks.length > 0 && ( + + )} + + {completedTasks.length === 0 ? ( + No completed tasks + ) : ( + + {completedTasks.map((task) => ( + + ))} + + )} - )} - - + ); } diff --git a/clients/web/src/components/organisms/ToolsScreen/ToolsScreen.stories.tsx b/clients/web/src/components/organisms/ToolsScreen/ToolsScreen.stories.tsx index 9a4ed5c8..2edc8c3b 100644 --- a/clients/web/src/components/organisms/ToolsScreen/ToolsScreen.stories.tsx +++ b/clients/web/src/components/organisms/ToolsScreen/ToolsScreen.stories.tsx @@ -145,7 +145,8 @@ export const LongToolName: Story = { }, aggregation_functions: { type: "string", - description: "Comma-separated list of aggregation functions to apply", + description: + "Comma-separated list of aggregation functions to apply", }, }, required: ["primary_table_name"], diff --git a/clients/web/src/components/organisms/ToolsScreen/ToolsScreen.tsx b/clients/web/src/components/organisms/ToolsScreen/ToolsScreen.tsx index 3150d3e2..16e8c69a 100644 --- a/clients/web/src/components/organisms/ToolsScreen/ToolsScreen.tsx +++ b/clients/web/src/components/organisms/ToolsScreen/ToolsScreen.tsx @@ -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 { ToolListItem } from "../../molecules/ToolListItem/ToolListItem"; import { ToolDetailPanel } from "../../molecules/ToolDetailPanel/ToolDetailPanel"; @@ -36,55 +44,55 @@ export function ToolsScreen({ return ( - - - - - Tools - - onSearchChange(event.currentTarget.value)} - /> - {filteredTools.map((tool) => ( - onSelectTool(tool.name)} + + + + + Tools + - ))} - - - + onSearchChange(event.currentTarget.value)} + /> + {filteredTools.map((tool) => ( + onSelectTool(tool.name)} + /> + ))} + + + - - - {selectedTool ? ( - - ) : ( - - Select a tool to view details - - )} - - + + + {selectedTool ? ( + + ) : ( + + Select a tool to view details + + )} + + - - - {result ? ( - - ) : ( - - Results will appear here - - )} - - - + + + {result ? ( + + ) : ( + + Results will appear here + + )} + + + ); }