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

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>

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,

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 (
     <Badge color={color} variant={badgeVariant} c={textColor}>

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: (
       <ToolsScreen
         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: "list_users", selected: false, onClick: fn() },
           { name: "batch_process", selected: false, onClick: fn() },
@@ -96,7 +197,10 @@ export const ToolsActive: Story = {
             properties: {
               title: { type: "string", description: "Record title" },
               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"],
           },
@@ -111,7 +215,13 @@ export const ToolsActive: Story = {
             {
               type: "text",
               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,
                 2,
               ),
@@ -172,7 +282,11 @@ export const ResourcesActive: Story = {
           mimeType: "application/json",
           annotations: { audience: "developer", priority: 0.8 },
           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,
             2,
           ),
@@ -199,13 +313,24 @@ export const PromptsActive: Story = {
         promptForm={{
           prompts: [
             { 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" },
           ],
           selectedPrompt: "translate",
           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: {
             text: "Hello, how are you?",
@@ -218,7 +343,11 @@ export const PromptsActive: Story = {
         messages={{
           onCopyAll: fn(),
           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?" },
           ],
         }}

clients/web/src/components/layouts/ConnectedLayout/ConnectedLayout.tsx

@@ -1,5 +1,13 @@
 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 { StatusIndicator } from "../../atoms/StatusIndicator/StatusIndicator";
 import mcpLogo from "../../../theme/assets/MCP.svg";
@@ -42,7 +50,13 @@ export function ConnectedLayout({
       <AppShell.Header>
         <Group h="100%" px="md" wrap="nowrap" gap={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>
           </Group>
 

clients/web/src/components/molecules/ResourcePreviewPanel/ResourcePreviewPanel.tsx

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

clients/web/src/components/molecules/ServerCard/ServerCard.tsx

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

clients/web/src/components/molecules/ToolDetailPanel/ToolDetailPanel.tsx

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

clients/web/src/components/organisms/HistoryScreen/HistoryScreen.tsx

@@ -53,74 +53,74 @@ export function HistoryScreen({
 }: HistoryScreenProps) {
   return (
     <Container size="xl" py="xl">
-    <Paper withBorder p="md">
-      <Stack gap="md">
-        <Group justify="space-between" wrap="wrap">
-          <Title order={3}>Request History</Title>
-          <Group>
-            <TextInput
-              placeholder="Search..."
-              value={searchText}
-              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}
+      <Paper withBorder p="md">
+        <Stack gap="md">
+          <Group justify="space-between" wrap="wrap">
+            <Title order={3}>Request History</Title>
+            <Group>
+              <TextInput
+                placeholder="Search..."
+                value={searchText}
+                onChange={(event) => onSearchChange(event.currentTarget.value)}
               />
-            ))}
-          </Stack>
-        )}
+              <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>
 
-        {pinnedEntries.length > 0 && (
-          <>
-            <Divider />
-            <Title order={4}>Pinned Requests ({pinnedEntries.length})</Title>
-            <Stack gap="sm">
-              {pinnedEntries.map((entry) => (
+          {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}
                 />
               ))}
             </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>
+
+          {pinnedEntries.length > 0 && (
+            <>
+              <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>
   );
 }

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 {

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

clients/web/src/components/organisms/PromptsScreen/PromptsScreen.tsx

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

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

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.
           </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) => (
               <ServerCard key={server.name} {...server} />
             ))}

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 (
     <Container size="xl" py="xl">
-    <Paper withBorder p="md">
-    <Stack gap="lg">
-      <Group justify="space-between">
-        <Title order={4}>Active Tasks ({activeTasks.length})</Title>
-        <Button variant="light" size="xs" onClick={onRefresh}>
-          Refresh Tasks
-        </Button>
-      </Group>
-      {activeTasks.length === 0 ? (
-        <Text c="dimmed">No active tasks</Text>
-      ) : (
-        <Stack gap="md">
-          {activeTasks.map((task) => (
-            <TaskCard key={task.taskId} {...task} />
-          ))}
-        </Stack>
-      )}
+      <Paper withBorder p="md">
+        <Stack gap="lg">
+          <Group justify="space-between">
+            <Title order={4}>Active Tasks ({activeTasks.length})</Title>
+            <Button variant="light" size="xs" onClick={onRefresh}>
+              Refresh Tasks
+            </Button>
+          </Group>
+          {activeTasks.length === 0 ? (
+            <Text c="dimmed">No active tasks</Text>
+          ) : (
+            <Stack gap="md">
+              {activeTasks.map((task) => (
+                <TaskCard key={task.taskId} {...task} />
+              ))}
+            </Stack>
+          )}
 
-      <Group justify="space-between">
-        <Title order={4}>Completed Tasks ({completedTasks.length})</Title>
-        {completedTasks.length > 0 && (
-          <Button variant="light" size="xs" onClick={onClearHistory}>
-            Clear History
-          </Button>
-        )}
-      </Group>
-      {completedTasks.length === 0 ? (
-        <Text c="dimmed">No completed tasks</Text>
-      ) : (
-        <Stack gap="md">
-          {completedTasks.map((task) => (
-            <TaskCard key={task.taskId} {...task} />
-          ))}
+          <Group justify="space-between">
+            <Title order={4}>Completed Tasks ({completedTasks.length})</Title>
+            {completedTasks.length > 0 && (
+              <Button variant="light" size="xs" onClick={onClearHistory}>
+                Clear History
+              </Button>
+            )}
+          </Group>
+          {completedTasks.length === 0 ? (
+            <Text c="dimmed">No completed tasks</Text>
+          ) : (
+            <Stack gap="md">
+              {completedTasks.map((task) => (
+                <TaskCard key={task.taskId} {...task} />
+              ))}
+            </Stack>
+          )}
         </Stack>
-      )}
-    </Stack>
-    </Paper>
+      </Paper>
     </Container>
   );
 }

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"],

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 (
     <Container size="xl" py="xl">
-    <Grid align="stretch">
-      <Grid.Col span={3}>
-        <Card withBorder padding="lg" h="100%">
-          <Stack gap="sm">
-            <Title order={4}>Tools</Title>
-            <ListChangedIndicator
-              visible={listChanged}
-              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)}
+      <Grid align="stretch">
+        <Grid.Col span={3}>
+          <Card withBorder padding="lg" h="100%">
+            <Stack gap="sm">
+              <Title order={4}>Tools</Title>
+              <ListChangedIndicator
+                visible={listChanged}
+                onRefresh={onRefreshList}
               />
-            ))}
-          </Stack>
-        </Card>
-      </Grid.Col>
+              <TextInput
+                placeholder="Search tools..."
+                value={searchText}
+                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}>
-        <Card withBorder padding="lg" h="100%">
-          {selectedTool ? (
-            <ToolDetailPanel {...selectedTool} />
-          ) : (
-            <Text c="dimmed" ta="center" py="xl">
-              Select a tool to view details
-            </Text>
-          )}
-        </Card>
-      </Grid.Col>
+        <Grid.Col span={5}>
+          <Card withBorder padding="lg" h="100%">
+            {selectedTool ? (
+              <ToolDetailPanel {...selectedTool} />
+            ) : (
+              <Text c="dimmed" ta="center" py="xl">
+                Select a tool to view details
+              </Text>
+            )}
+          </Card>
+        </Grid.Col>
 
-      <Grid.Col span={4}>
-        <Card withBorder padding="lg" h="100%">
-          {result ? (
-            <ResultPanel {...result} />
-          ) : (
-            <Text c="dimmed" ta="center" py="xl">
-              Results will appear here
-            </Text>
-          )}
-        </Card>
-      </Grid.Col>
-    </Grid>
+        <Grid.Col span={4}>
+          <Card withBorder padding="lg" h="100%">
+            {result ? (
+              <ResultPanel {...result} />
+            ) : (
+              <Text c="dimmed" ta="center" py="xl">
+                Results will appear here
+              </Text>
+            )}
+          </Card>
+        </Grid.Col>
+      </Grid>
     </Container>
   );
 }