From 1785a5281c40c70eae4d7b50e770749465cea0d8 Mon Sep 17 00:00:00 2001 From: cliffhall Date: Sat, 25 Apr 2026 19:46:18 -0400 Subject: [PATCH] Share LoggingScreen fixture with InspectorView story; tune transition timing - Extract `mixedEntries` (50 mixed-level log entries) into `LoggingScreen.fixtures.ts` so both `LoggingScreen.stories` and `InspectorView.stories` can consume it. The InspectorView Default story now shows a populated, scrollable Logs tab. - InspectorView screen transitions: separate enter (350ms) and exit (250ms) durations via Mantine Transition's `exitDuration` prop, so screens leave faster than they enter. Co-Authored-By: Claude Opus 4.7 (1M context) --- .../LoggingScreen/LoggingScreen.fixtures.ts | 140 ++++++++++++++++++ .../LoggingScreen/LoggingScreen.stories.tsx | 137 +---------------- .../InspectorView/InspectorView.stories.tsx | 41 +---- .../views/InspectorView/InspectorView.tsx | 6 +- 4 files changed, 146 insertions(+), 178 deletions(-) create mode 100644 clients/web/src/components/screens/LoggingScreen/LoggingScreen.fixtures.ts diff --git a/clients/web/src/components/screens/LoggingScreen/LoggingScreen.fixtures.ts b/clients/web/src/components/screens/LoggingScreen/LoggingScreen.fixtures.ts new file mode 100644 index 00000000..74372e8b --- /dev/null +++ b/clients/web/src/components/screens/LoggingScreen/LoggingScreen.fixtures.ts @@ -0,0 +1,140 @@ +import type { LoggingLevel } from "@modelcontextprotocol/sdk/types.js"; +import type { LogEntryData } from "../../elements/LogEntry/LogEntry"; + +const logMessages: { + level: LoggingLevel; + data: string; + logger?: string; +}[] = [ + { level: "info", data: "Server started on port 3000" }, + { + level: "debug", + data: "Loading configuration from /etc/mcp/config.json", + logger: "config", + }, + { + level: "warning", + data: "Deprecated API endpoint called: /v1/tools", + logger: "http", + }, + { level: "info", data: "Client connected: inspector-web-ui" }, + { + level: "error", + data: "Failed to read resource: file not found at /data/missing.txt", + logger: "resources", + }, + { + level: "info", + data: "Tool execution completed: search_files (245ms)", + logger: "tools", + }, + { + level: "debug", + data: "Parsing JSON-RPC request body", + logger: "transport", + }, + { + level: "info", + data: "Listing available tools for client session", + logger: "tools", + }, + { + level: "warning", + data: "Slow query detected: 1200ms for resource lookup", + logger: "db", + }, + { + level: "info", + data: "Resource subscription added: file:///config.json", + logger: "resources", + }, + { + level: "debug", + data: "Heartbeat ping received from client", + logger: "session", + }, + { + level: "error", + data: "Permission denied reading /etc/secrets.env", + logger: "resources", + }, + { + level: "info", + data: "Prompt 'summarize' resolved with 2 messages", + logger: "prompts", + }, + { + level: "debug", + data: "Cache hit for resource: db://users/42", + logger: "cache", + }, + { + level: "info", + data: "Tool 'create_record' executed successfully in 89ms", + logger: "tools", + }, + { + level: "warning", + data: "Client reconnection attempt #3", + logger: "session", + }, + { + level: "info", + data: "New resource detected: file:///data/output.csv", + logger: "resources", + }, + { + level: "debug", + data: "Serializing response payload (2.4KB)", + logger: "transport", + }, + { + level: "error", + data: "Timeout waiting for tool response after 30s", + logger: "tools", + }, + { + level: "info", + data: "Session initialized with capabilities: tools, resources, prompts", + }, + { + level: "debug", + data: "Validating input schema for tool 'batch_process'", + logger: "tools", + }, + { + level: "info", + data: "Resource template resolved: db://tables/users/rows/15", + logger: "resources", + }, + { + level: "warning", + data: "Memory usage at 78% — consider increasing limits", + logger: "system", + }, + { + level: "info", + data: "Client disconnected gracefully", + logger: "session", + }, + { + level: "debug", + data: "Flushing log buffer to disk (128 entries)", + logger: "logging", + }, +]; + +function pad(n: number): string { + return n.toString().padStart(2, "0"); +} + +export const mixedEntries: LogEntryData[] = Array.from( + { length: 50 }, + (_, i) => { + const src = logMessages[i % logMessages.length]; + return { + receivedAt: new Date(`2026-03-17T10:00:${pad(i + 1)}Z`), + params: { level: src.level, data: src.data, logger: src.logger }, + }; + }, +); diff --git a/clients/web/src/components/screens/LoggingScreen/LoggingScreen.stories.tsx b/clients/web/src/components/screens/LoggingScreen/LoggingScreen.stories.tsx index ff771eff..b67d6197 100644 --- a/clients/web/src/components/screens/LoggingScreen/LoggingScreen.stories.tsx +++ b/clients/web/src/components/screens/LoggingScreen/LoggingScreen.stories.tsx @@ -1,7 +1,7 @@ import type { Meta, StoryObj } from "@storybook/react-vite"; -import type { LoggingLevel } from "@modelcontextprotocol/sdk/types.js"; import { fn } from "storybook/test"; import { LoggingScreen } from "./LoggingScreen"; +import { mixedEntries } from "./LoggingScreen.fixtures"; import type { LogEntryData } from "../../elements/LogEntry/LogEntry"; const meta: Meta = { @@ -28,141 +28,6 @@ export const Empty: Story = { }, }; -const logMessages: { - level: LoggingLevel; - data: string; - logger?: string; -}[] = [ - { level: "info", data: "Server started on port 3000" }, - { - level: "debug", - data: "Loading configuration from /etc/mcp/config.json", - logger: "config", - }, - { - level: "warning", - data: "Deprecated API endpoint called: /v1/tools", - logger: "http", - }, - { level: "info", data: "Client connected: inspector-web-ui" }, - { - level: "error", - data: "Failed to read resource: file not found at /data/missing.txt", - logger: "resources", - }, - { - level: "info", - data: "Tool execution completed: search_files (245ms)", - logger: "tools", - }, - { - level: "debug", - data: "Parsing JSON-RPC request body", - logger: "transport", - }, - { - level: "info", - data: "Listing available tools for client session", - logger: "tools", - }, - { - level: "warning", - data: "Slow query detected: 1200ms for resource lookup", - logger: "db", - }, - { - level: "info", - data: "Resource subscription added: file:///config.json", - logger: "resources", - }, - { - level: "debug", - data: "Heartbeat ping received from client", - logger: "session", - }, - { - level: "error", - data: "Permission denied reading /etc/secrets.env", - logger: "resources", - }, - { - level: "info", - data: "Prompt 'summarize' resolved with 2 messages", - logger: "prompts", - }, - { - level: "debug", - data: "Cache hit for resource: db://users/42", - logger: "cache", - }, - { - level: "info", - data: "Tool 'create_record' executed successfully in 89ms", - logger: "tools", - }, - { - level: "warning", - data: "Client reconnection attempt #3", - logger: "session", - }, - { - level: "info", - data: "New resource detected: file:///data/output.csv", - logger: "resources", - }, - { - level: "debug", - data: "Serializing response payload (2.4KB)", - logger: "transport", - }, - { - level: "error", - data: "Timeout waiting for tool response after 30s", - logger: "tools", - }, - { - level: "info", - data: "Session initialized with capabilities: tools, resources, prompts", - }, - { - level: "debug", - data: "Validating input schema for tool 'batch_process'", - logger: "tools", - }, - { - level: "info", - data: "Resource template resolved: db://tables/users/rows/15", - logger: "resources", - }, - { - level: "warning", - data: "Memory usage at 78% — consider increasing limits", - logger: "system", - }, - { - level: "info", - data: "Client disconnected gracefully", - logger: "session", - }, - { - level: "debug", - data: "Flushing log buffer to disk (128 entries)", - logger: "logging", - }, -]; - -function pad(n: number): string { - return n.toString().padStart(2, "0"); -} - -const mixedEntries: LogEntryData[] = Array.from({ length: 50 }, (_, i) => { - const src = logMessages[i % logMessages.length]; - return { - receivedAt: new Date(`2026-03-17T10:00:${pad(i + 1)}Z`), - params: { level: src.level, data: src.data, logger: src.logger }, - }; -}); - export const WithEntries: Story = { args: { entries: mixedEntries, diff --git a/clients/web/src/components/views/InspectorView/InspectorView.stories.tsx b/clients/web/src/components/views/InspectorView/InspectorView.stories.tsx index 2c7df425..3c070674 100644 --- a/clients/web/src/components/views/InspectorView/InspectorView.stories.tsx +++ b/clients/web/src/components/views/InspectorView/InspectorView.stories.tsx @@ -13,7 +13,7 @@ import type { Meta, StoryObj } from "@storybook/react-vite"; import { fn } from "storybook/test"; import { InspectorView } from "./InspectorView"; import type { ServerEntry } from "../../screens/ServerListScreen/ServerListScreen"; -import type { LogEntryData } from "../../elements/LogEntry/LogEntry"; +import { mixedEntries as demoLogs } from "../../screens/LoggingScreen/LoggingScreen.fixtures"; import type { TaskProgress } from "../../groups/TaskCard/TaskCard"; const demoServers: ServerEntry[] = [ @@ -122,45 +122,6 @@ const demoSubscriptions: InspectorResourceSubscription[] = [ }, ]; -const demoLogs: LogEntryData[] = [ - { - receivedAt: new Date("2026-03-17T10:00:00Z"), - params: { level: "info", data: "Server started on port 3000" }, - }, - { - receivedAt: new Date("2026-03-17T10:00:01Z"), - params: { - level: "debug", - logger: "config", - data: "Loading configuration from /etc/mcp/config.json", - }, - }, - { - receivedAt: new Date("2026-03-17T10:00:02Z"), - params: { - level: "warning", - logger: "http", - data: "Deprecated API endpoint called: /v1/tools", - }, - }, - { - receivedAt: new Date("2026-03-17T10:00:03Z"), - params: { - level: "error", - logger: "resources", - data: "Failed to read resource: file not found at /data/missing.txt", - }, - }, - { - receivedAt: new Date("2026-03-17T10:00:04Z"), - params: { - level: "info", - logger: "tools", - data: "Tool execution completed: search_files (245ms)", - }, - }, -]; - const demoTasks: Task[] = [ { taskId: "d0b22eba71fa36229ce5c4dfadeaa7de", diff --git a/clients/web/src/components/views/InspectorView/InspectorView.tsx b/clients/web/src/components/views/InspectorView/InspectorView.tsx index c2ec403e..8dda619d 100644 --- a/clients/web/src/components/views/InspectorView/InspectorView.tsx +++ b/clients/web/src/components/views/InspectorView/InspectorView.tsx @@ -40,7 +40,8 @@ const ALL_TABS: string[] = [ "History", ]; -const SCREEN_TRANSITION_MS = 350; +const SCREEN_ENTER_MS = 350; +const SCREEN_EXIT_MS = 250; const ScreenStageContainer = Stack.withProps({ pos: "relative", @@ -60,7 +61,8 @@ function ScreenStage({ {(styles) => (