diff --git a/clients/web/src/components/groups/ImportServerJsonPanel/ImportServerJsonPanel.stories.tsx b/clients/web/src/components/groups/ImportServerJsonPanel/ImportServerJsonPanel.stories.tsx
index 63acd6296..1b84e3167 100644
--- a/clients/web/src/components/groups/ImportServerJsonPanel/ImportServerJsonPanel.stories.tsx
+++ b/clients/web/src/components/groups/ImportServerJsonPanel/ImportServerJsonPanel.stories.tsx
@@ -1,7 +1,13 @@
+import type { InspectorServerJsonDraft } from "@inspector/core/mcp/types.js";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { fn } from "storybook/test";
 import { ImportServerJsonPanel } from "./ImportServerJsonPanel";
 
+const emptyDraft: InspectorServerJsonDraft = {
+  rawText: "",
+  envOverrides: {},
+};
+
 const meta: Meta<typeof ImportServerJsonPanel> = {
   title: "Groups/ImportServerJsonPanel",
   component: ImportServerJsonPanel,
@@ -13,10 +19,8 @@ const meta: Meta<typeof ImportServerJsonPanel> = {
     onServerNameChange: fn(),
     onAddServer: fn(),
     onCancel: fn(),
-    selectedPackageIndex: 0,
     envVars: [],
-    serverName: "",
-    validationResults: [],
+    validation: [],
   },
 };
 
@@ -25,28 +29,31 @@ type Story = StoryObj<typeof ImportServerJsonPanel>;
 
 export const Empty: Story = {
   args: {
-    jsonContent: "",
+    draft: emptyDraft,
   },
 };
 
 export const ValidJson: Story = {
   args: {
-    jsonContent: JSON.stringify(
-      {
-        name: "my-mcp-server",
-        version: "1.0.0",
-        packages: [
-          {
-            registryType: "npm",
-            identifier: "my-mcp-server",
-            runtimeHint: "node",
-          },
-        ],
-      },
-      null,
-      2,
-    ),
-    validationResults: [
+    draft: {
+      rawText: JSON.stringify(
+        {
+          name: "my-mcp-server",
+          version: "1.0.0",
+          packages: [
+            {
+              registryType: "npm",
+              identifier: "my-mcp-server",
+              runtimeHint: "node",
+            },
+          ],
+        },
+        null,
+        2,
+      ),
+      envOverrides: {},
+    },
+    validation: [
       { type: "success", message: "Valid server.json format detected" },
       { type: "success", message: "Package configuration is valid" },
       { type: "info", message: "1 package found" },
@@ -56,31 +63,38 @@ export const ValidJson: Story = {
 
 export const MultiplePackages: Story = {
   args: {
-    jsonContent: JSON.stringify(
-      {
-        name: "multi-server",
-        packages: [
-          {
-            registryType: "npm",
-            identifier: "@scope/server",
-            runtimeHint: "node",
-          },
-          {
-            registryType: "pip",
-            identifier: "server-python",
-            runtimeHint: "python3",
-          },
-        ],
-      },
-      null,
-      2,
-    ),
-    validationResults: [
+    draft: {
+      rawText: JSON.stringify(
+        {
+          name: "multi-server",
+          packages: [
+            {
+              registryType: "npm",
+              identifier: "@scope/server",
+              runtimeHint: "node",
+            },
+            {
+              registryType: "pip",
+              identifier: "server-python",
+              runtimeHint: "python3",
+            },
+          ],
+        },
+        null,
+        2,
+      ),
+      envOverrides: {},
+    },
+    validation: [
       { type: "success", message: "Valid server.json format detected" },
       { type: "info", message: "2 packages found - select one to install" },
     ],
     packages: [
-      { registryType: "npm", identifier: "@scope/server", runtimeHint: "node" },
+      {
+        registryType: "npm",
+        identifier: "@scope/server",
+        runtimeHint: "node",
+      },
       {
         registryType: "pip",
         identifier: "server-python",
@@ -92,25 +106,28 @@ export const MultiplePackages: Story = {
 
 export const WithEnvVars: Story = {
   args: {
-    jsonContent: JSON.stringify(
-      {
-        name: "api-server",
-        packages: [
-          {
-            registryType: "npm",
-            identifier: "api-server",
-            runtimeHint: "node",
-          },
-        ],
-        envVars: [
-          { name: "API_KEY", required: true },
-          { name: "API_URL", required: false },
-        ],
-      },
-      null,
-      2,
-    ),
-    validationResults: [
+    draft: {
+      rawText: JSON.stringify(
+        {
+          name: "api-server",
+          packages: [
+            {
+              registryType: "npm",
+              identifier: "api-server",
+              runtimeHint: "node",
+            },
+          ],
+          envVars: [
+            { name: "API_KEY", required: true },
+            { name: "API_URL", required: false },
+          ],
+        },
+        null,
+        2,
+      ),
+      envOverrides: {},
+    },
+    validation: [
       { type: "success", message: "Valid server.json format detected" },
       {
         type: "warning",
@@ -136,31 +153,36 @@ export const WithEnvVars: Story = {
 
 export const FullyConfigured: Story = {
   args: {
-    jsonContent: JSON.stringify(
-      {
-        name: "full-server",
-        version: "2.1.0",
-        packages: [
-          {
-            registryType: "npm",
-            identifier: "@org/full-server",
-            runtimeHint: "node",
-          },
-          {
-            registryType: "docker",
-            identifier: "org/full-server:latest",
-            runtimeHint: "docker",
-          },
-        ],
-        envVars: [
-          { name: "TOKEN", required: true },
-          { name: "DEBUG", required: false },
-        ],
-      },
-      null,
-      2,
-    ),
-    validationResults: [
+    draft: {
+      rawText: JSON.stringify(
+        {
+          name: "full-server",
+          version: "2.1.0",
+          packages: [
+            {
+              registryType: "npm",
+              identifier: "@org/full-server",
+              runtimeHint: "node",
+            },
+            {
+              registryType: "docker",
+              identifier: "org/full-server:latest",
+              runtimeHint: "docker",
+            },
+          ],
+          envVars: [
+            { name: "TOKEN", required: true },
+            { name: "DEBUG", required: false },
+          ],
+        },
+        null,
+        2,
+      ),
+      selectedPackageIndex: 1,
+      envOverrides: { TOKEN: "sk-abc123", DEBUG: "true" },
+      nameOverride: "My Custom Server",
+    },
+    validation: [
       { type: "success", message: "Valid server.json format detected" },
       { type: "success", message: "All required fields present" },
       { type: "info", message: "2 packages found" },
@@ -181,7 +203,6 @@ export const FullyConfigured: Story = {
         runtimeHint: "docker",
       },
     ],
-    selectedPackageIndex: 1,
     envVars: [
       {
         name: "TOKEN",
@@ -196,6 +217,5 @@ export const FullyConfigured: Story = {
         value: "true",
       },
     ],
-    serverName: "My Custom Server",
   },
 };
diff --git a/clients/web/src/components/groups/ImportServerJsonPanel/ImportServerJsonPanel.tsx b/clients/web/src/components/groups/ImportServerJsonPanel/ImportServerJsonPanel.tsx
index da19f5283..68dd8e1e2 100644
--- a/clients/web/src/components/groups/ImportServerJsonPanel/ImportServerJsonPanel.tsx
+++ b/clients/web/src/components/groups/ImportServerJsonPanel/ImportServerJsonPanel.tsx
@@ -9,6 +9,7 @@ import {
   Textarea,
   Title,
 } from "@mantine/core";
+import type { InspectorServerJsonDraft } from "@inspector/core/mcp/types.js";
 
 export interface ValidationResult {
   type: "success" | "warning" | "info" | "error";
@@ -29,12 +30,10 @@ export interface EnvVarInfo {
 }
 
 export interface ImportServerJsonPanelProps {
-  jsonContent: string;
-  validationResults: ValidationResult[];
+  draft: InspectorServerJsonDraft;
+  validation: ValidationResult[];
   packages?: PackageInfo[];
-  selectedPackageIndex: number;
   envVars: EnvVarInfo[];
-  serverName: string;
   onJsonChange: (content: string) => void;
   onValidate: () => void;
   onSelectPackage: (index: number) => void;
@@ -64,12 +63,10 @@ function formatPackageLabel(pkg: PackageInfo): string {
 }
 
 export function ImportServerJsonPanel({
-  jsonContent,
-  validationResults,
+  draft,
+  validation,
   packages,
-  selectedPackageIndex,
   envVars,
-  serverName,
   onJsonChange,
   onValidate,
   onSelectPackage,
@@ -85,7 +82,7 @@ export function ImportServerJsonPanel({
       <HintText>Paste server.json content or drag and drop a file:</HintText>
 
       <Textarea
-        value={jsonContent}
+        value={draft.rawText}
         onChange={(e) => onJsonChange(e.currentTarget.value)}
         ff="monospace"
         autosize
@@ -97,7 +94,7 @@ export function ImportServerJsonPanel({
 
       <Title order={5}>Validation Results:</Title>
 
-      {validationResults.map((result, index) => {
+      {validation.map((result, index) => {
         const { icon, color } = validationIcons[result.type];
         return (
           <Group key={index} gap="xs">
@@ -112,7 +109,7 @@ export function ImportServerJsonPanel({
           <Divider />
           <Title order={5}>Package Selection:</Title>
           <Radio.Group
-            value={String(selectedPackageIndex)}
+            value={String(draft.selectedPackageIndex ?? 0)}
             onChange={(value) => onSelectPackage(Number(value))}
           >
             <Stack gap="xs">
@@ -151,7 +148,7 @@ export function ImportServerJsonPanel({
 
       <TextInput
         label="Server Name (optional override)"
-        value={serverName}
+        value={draft.nameOverride ?? ""}
         onChange={(e) => onServerNameChange(e.currentTarget.value)}
       />
 
diff --git a/clients/web/src/components/groups/ServerCard/ServerCard.stories.tsx b/clients/web/src/components/groups/ServerCard/ServerCard.stories.tsx
index 678bb6e54..65aed9206 100644
--- a/clients/web/src/components/groups/ServerCard/ServerCard.stories.tsx
+++ b/clients/web/src/components/groups/ServerCard/ServerCard.stories.tsx
@@ -1,7 +1,33 @@
+import type {
+  ConnectionState,
+  MCPServerConfig,
+} from "@inspector/core/mcp/types.js";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { fn } from "storybook/test";
 import { ServerCard } from "./ServerCard";
 
+const stdioConfig: MCPServerConfig = {
+  command: "npx -y @modelcontextprotocol/server-everything",
+};
+
+const httpConfig: MCPServerConfig = {
+  type: "streamable-http",
+  url: "https://api.example.com/mcp",
+};
+
+const connected: ConnectionState = { status: "connected" };
+const disconnected: ConnectionState = { status: "disconnected" };
+const connecting: ConnectionState = { status: "connecting" };
+const failed: ConnectionState = {
+  status: "error",
+  retryCount: 3,
+  error: {
+    message: "Connection refused",
+    details:
+      "ECONNREFUSED 127.0.0.1:3000 - The server process exited unexpectedly.",
+  },
+};
+
 const meta: Meta<typeof ServerCard> = {
   title: "Groups/ServerCard",
   component: ServerCard,
@@ -26,11 +52,10 @@ type Story = StoryObj<typeof ServerCard>;
 export const Connected: Story = {
   args: {
     name: "My MCP Server",
-    version: "1.2.0",
-    transport: "stdio",
+    config: stdioConfig,
+    info: { name: "My MCP Server", version: "1.2.0" },
+    connection: connected,
     connectionMode: "Subprocess",
-    command: "npx -y @modelcontextprotocol/server-everything",
-    status: "connected",
     canTestClientFeatures: false,
   },
 };
@@ -38,11 +63,10 @@ export const Connected: Story = {
 export const Disconnected: Story = {
   args: {
     name: "My MCP Server",
-    version: "1.2.0",
-    transport: "stdio",
+    config: stdioConfig,
+    info: { name: "My MCP Server", version: "1.2.0" },
+    connection: disconnected,
     connectionMode: "Subprocess",
-    command: "npx -y @modelcontextprotocol/server-everything",
-    status: "disconnected",
     canTestClientFeatures: false,
   },
 };
@@ -50,11 +74,10 @@ export const Disconnected: Story = {
 export const Connecting: Story = {
   args: {
     name: "My MCP Server",
-    version: "1.2.0",
-    transport: "stdio",
+    config: stdioConfig,
+    info: { name: "My MCP Server", version: "1.2.0" },
+    connection: connecting,
     connectionMode: "Subprocess",
-    command: "npx -y @modelcontextprotocol/server-everything",
-    status: "connecting",
     canTestClientFeatures: false,
   },
 };
@@ -62,17 +85,10 @@ export const Connecting: Story = {
 export const Failed: Story = {
   args: {
     name: "My MCP Server",
-    version: "1.2.0",
-    transport: "stdio",
+    config: stdioConfig,
+    info: { name: "My MCP Server", version: "1.2.0" },
+    connection: failed,
     connectionMode: "Subprocess",
-    command: "npx -y @modelcontextprotocol/server-everything",
-    status: "error",
-    retryCount: 3,
-    error: {
-      message: "Connection refused",
-      details:
-        "ECONNREFUSED 127.0.0.1:3000 - The server process exited unexpectedly.",
-    },
     canTestClientFeatures: false,
   },
 };
@@ -80,11 +96,10 @@ export const Failed: Story = {
 export const WithClientFeatures: Story = {
   args: {
     name: "My MCP Server",
-    version: "1.2.0",
-    transport: "stdio",
+    config: stdioConfig,
+    info: { name: "My MCP Server", version: "1.2.0" },
+    connection: connected,
     connectionMode: "Subprocess",
-    command: "npx -y @modelcontextprotocol/server-everything",
-    status: "connected",
     canTestClientFeatures: true,
   },
 };
@@ -92,12 +107,16 @@ export const WithClientFeatures: Story = {
 export const LongServerName: Story = {
   args: {
     name: "my-organization-super-long-experimental-mcp-server-with-many-features-v2",
-    version: "1.0.0-beta.42",
-    transport: "stdio",
+    config: {
+      command:
+        "npx -y @my-organization/super-long-experimental-mcp-server-with-many-features-v2",
+    },
+    info: {
+      name: "my-organization-super-long-experimental-mcp-server-with-many-features-v2",
+      version: "1.0.0-beta.42",
+    },
+    connection: connected,
     connectionMode: "Subprocess",
-    command:
-      "npx -y @my-organization/super-long-experimental-mcp-server-with-many-features-v2",
-    status: "connected",
     canTestClientFeatures: true,
   },
 };
@@ -105,11 +124,10 @@ export const LongServerName: Story = {
 export const HttpDirect: Story = {
   args: {
     name: "Remote API Server",
-    version: "2.0.0",
-    transport: "streamable-http",
+    config: httpConfig,
+    info: { name: "Remote API Server", version: "2.0.0" },
+    connection: connected,
     connectionMode: "Direct",
-    command: "https://api.example.com/mcp",
-    status: "connected",
     canTestClientFeatures: false,
   },
 };
@@ -117,11 +135,10 @@ export const HttpDirect: Story = {
 export const CompactConnected: Story = {
   args: {
     name: "My MCP Server",
-    version: "1.2.0",
-    transport: "stdio",
+    config: stdioConfig,
+    info: { name: "My MCP Server", version: "1.2.0" },
+    connection: connected,
     connectionMode: "Subprocess",
-    command: "npx -y @modelcontextprotocol/server-everything",
-    status: "connected",
     canTestClientFeatures: false,
     compact: true,
   },
@@ -130,11 +147,10 @@ export const CompactConnected: Story = {
 export const CompactDisconnected: Story = {
   args: {
     name: "My MCP Server",
-    version: "1.2.0",
-    transport: "stdio",
+    config: stdioConfig,
+    info: { name: "My MCP Server", version: "1.2.0" },
+    connection: disconnected,
     connectionMode: "Subprocess",
-    command: "npx -y @modelcontextprotocol/server-everything",
-    status: "disconnected",
     canTestClientFeatures: false,
     compact: true,
   },
diff --git a/clients/web/src/components/groups/ServerCard/ServerCard.tsx b/clients/web/src/components/groups/ServerCard/ServerCard.tsx
index 20db78954..75f8292dc 100644
--- a/clients/web/src/components/groups/ServerCard/ServerCard.tsx
+++ b/clients/web/src/components/groups/ServerCard/ServerCard.tsx
@@ -1,7 +1,8 @@
-import { useEffect } from "react";
 import { Badge, Button, Card, Group, Menu, Stack, Text } from "@mantine/core";
+import type { Implementation } from "@modelcontextprotocol/sdk/types.js";
 import type {
-  ConnectionStatus,
+  ConnectionState,
+  MCPServerConfig,
   ServerType,
 } from "@inspector/core/mcp/types.js";
 import { ServerStatusIndicator } from "../../elements/ServerStatusIndicator/ServerStatusIndicator";
@@ -12,13 +13,10 @@ import { InlineError } from "../../elements/InlineError/InlineError";
 
 export interface ServerCardProps {
   name: string;
-  version?: string;
-  transport: ServerType;
+  config: MCPServerConfig;
+  info?: Implementation;
+  connection: ConnectionState;
   connectionMode: string;
-  command: string;
-  status: ConnectionStatus;
-  retryCount?: number;
-  error?: { message: string; details?: string };
   canTestClientFeatures: boolean;
   activeServer?: string;
   onSetActiveServer?: (name: string | undefined) => void;
@@ -68,15 +66,23 @@ const RemoveButton = Button.withProps({
   color: "red.6",
 });
 
+function getTransport(config: MCPServerConfig): ServerType {
+  return config.type ?? "stdio";
+}
+
+function getCommandOrUrl(config: MCPServerConfig): string {
+  if (config.type === "sse" || config.type === "streamable-http") {
+    return config.url;
+  }
+  return config.command;
+}
+
 export function ServerCard({
   name,
-  version,
-  transport,
+  config,
+  info,
+  connection,
   connectionMode,
-  command,
-  status,
-  retryCount,
-  error,
   canTestClientFeatures,
   activeServer,
   onSetActiveServer,
@@ -92,24 +98,10 @@ export function ServerCard({
   onConfigureRoots,
   compact = false,
 }: ServerCardProps) {
-  const isThisConnecting = activeServer === name;
   const isDimmed = activeServer !== undefined && activeServer !== name;
-  const displayStatus = isThisConnecting ? "connecting" : status;
-
-  useEffect(() => {
-    if (isThisConnecting) {
-      onToggleConnection(true);
-    }
-  }, [isThisConnecting, onToggleConnection]);
-
-  function handleToggle(connect: boolean) {
-    if (connect && !activeServer) {
-      onSetActiveServer?.(name);
-    } else if (!connect && activeServer && activeServer === name) {
-      onSetActiveServer?.(undefined);
-      onToggleConnection(false);
-    }
-  }
+  const transport = getTransport(config);
+  const commandOrUrl = getCommandOrUrl(config);
+  const version = info?.version;
 
   return (
     <Card
@@ -126,14 +118,20 @@ export function ServerCard({
           </HeaderLeft>
           <HeaderRight>
             <ServerStatusIndicator
-              status={displayStatus}
-              retryCount={retryCount}
+              status={connection.status}
+              retryCount={connection.retryCount}
             />
             <ConnectionToggle
-              status={displayStatus}
+              status={connection.status}
               disabled={isDimmed}
-              onConnect={() => handleToggle(true)}
-              onDisconnect={() => handleToggle(false)}
+              onConnect={() => {
+                onSetActiveServer?.(name);
+                onToggleConnection(true);
+              }}
+              onDisconnect={() => {
+                onSetActiveServer?.(undefined);
+                onToggleConnection(false);
+              }}
             />
           </HeaderRight>
         </Group>
@@ -168,15 +166,18 @@ export function ServerCard({
               )}
             </Group>
 
-            <ContentViewer block={{ type: "text", text: command }} copyable />
+            <ContentViewer
+              block={{ type: "text", text: commandOrUrl }}
+              copyable
+            />
 
-            {error && (
+            {connection.error && (
               <InlineError
                 error={{
-                  message: error.message,
-                  data: error.details,
+                  message: connection.error.message,
+                  data: connection.error.details,
                 }}
-                retryCount={retryCount}
+                retryCount={connection.retryCount}
               />
             )}
 
diff --git a/clients/web/src/components/groups/ServerInfoContent/ServerInfoContent.stories.tsx b/clients/web/src/components/groups/ServerInfoContent/ServerInfoContent.stories.tsx
index d5e07e8ab..e6b7e65a5 100644
--- a/clients/web/src/components/groups/ServerInfoContent/ServerInfoContent.stories.tsx
+++ b/clients/web/src/components/groups/ServerInfoContent/ServerInfoContent.stories.tsx
@@ -1,6 +1,31 @@
+import type {
+  ClientCapabilities,
+  InitializeResult,
+} from "@modelcontextprotocol/sdk/types.js";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { ServerInfoContent } from "./ServerInfoContent";
 
+const fullResult: InitializeResult = {
+  protocolVersion: "2025-03-26",
+  serverInfo: { name: "Everything Server", version: "2.1.0" },
+  capabilities: {
+    tools: { listChanged: true },
+    resources: { subscribe: true, listChanged: true },
+    prompts: { listChanged: true },
+    logging: {},
+    completions: {},
+  },
+  instructions:
+    "This server provides access to the project management system. Use the list_projects tool first to discover available projects before querying tasks. Rate limiting applies: max 60 requests per minute.",
+};
+
+const fullClientCaps: ClientCapabilities = {
+  roots: { listChanged: true },
+  sampling: {},
+  elicitation: {},
+  experimental: {},
+};
+
 const meta: Meta<typeof ServerInfoContent> = {
   title: "Groups/ServerInfoContent",
   component: ServerInfoContent,
@@ -11,80 +36,54 @@ type Story = StoryObj<typeof ServerInfoContent>;
 
 export const FullCapabilities: Story = {
   args: {
-    name: "Everything Server",
-    version: "2.1.0",
-    protocolVersion: "2025-03-26",
+    initializeResult: fullResult,
+    clientCapabilities: fullClientCaps,
     transport: "stdio",
-    serverCapabilities: [
-      { capability: "tools", supported: true, count: 12 },
-      { capability: "resources", supported: true, count: 8 },
-      { capability: "prompts", supported: true, count: 5 },
-      { capability: "logging", supported: true },
-      { capability: "completions", supported: true },
-    ],
-    clientCapabilities: [
-      { capability: "roots", supported: true, count: 3 },
-      { capability: "sampling", supported: true },
-      { capability: "elicitation", supported: true },
-      { capability: "experimental", supported: true },
-    ],
   },
 };
 
 export const MinimalCapabilities: Story = {
   args: {
-    name: "Simple Server",
-    version: "1.0.0",
-    protocolVersion: "2025-03-26",
+    initializeResult: {
+      protocolVersion: "2025-03-26",
+      serverInfo: { name: "Simple Server", version: "1.0.0" },
+      capabilities: {
+        tools: { listChanged: false },
+      },
+    },
+    clientCapabilities: {
+      roots: { listChanged: true },
+    },
     transport: "streamable-http",
-    serverCapabilities: [
-      { capability: "tools", supported: true, count: 2 },
-      { capability: "resources", supported: false },
-      { capability: "prompts", supported: false },
-    ],
-    clientCapabilities: [
-      { capability: "roots", supported: true },
-      { capability: "sampling", supported: false },
-      { capability: "elicitation", supported: false },
-    ],
   },
 };
 
 export const WithInstructions: Story = {
   args: {
-    name: "Guided Server",
-    version: "1.5.0",
-    protocolVersion: "2025-03-26",
+    initializeResult: fullResult,
+    clientCapabilities: {
+      roots: { listChanged: true },
+      sampling: {},
+    },
     transport: "stdio",
-    serverCapabilities: [
-      { capability: "tools", supported: true, count: 4 },
-      { capability: "resources", supported: true, count: 2 },
-      { capability: "prompts", supported: true, count: 1 },
-    ],
-    clientCapabilities: [
-      { capability: "roots", supported: true },
-      { capability: "sampling", supported: true },
-    ],
-    instructions:
-      "This server provides access to the project management system. Use the list_projects tool first to discover available projects before querying tasks. Rate limiting applies: max 60 requests per minute.",
   },
 };
 
 export const WithOAuth: Story = {
   args: {
-    name: "Authenticated Server",
-    version: "3.0.0",
-    protocolVersion: "2025-03-26",
+    initializeResult: {
+      protocolVersion: "2025-03-26",
+      serverInfo: { name: "Authenticated Server", version: "3.0.0" },
+      capabilities: {
+        tools: { listChanged: true },
+        resources: { subscribe: true },
+      },
+    },
+    clientCapabilities: {
+      roots: { listChanged: true },
+    },
     transport: "streamable-http",
-    serverCapabilities: [
-      { capability: "tools", supported: true, count: 6 },
-      { capability: "resources", supported: true, count: 3 },
-    ],
-    clientCapabilities: [
-      { capability: "roots", supported: true },
-      { capability: "sampling", supported: false },
-    ],
-    oauthDetails: {
+    oauth: {
       authUrl: "https://auth.example.com/oauth2/authorize",
       scopes: ["read", "write", "admin"],
       accessToken: "eyJhbGciOiJSUzI1NiIs...truncated",
diff --git a/clients/web/src/components/groups/ServerInfoContent/ServerInfoContent.tsx b/clients/web/src/components/groups/ServerInfoContent/ServerInfoContent.tsx
index 0dce62d5d..147d246d4 100644
--- a/clients/web/src/components/groups/ServerInfoContent/ServerInfoContent.tsx
+++ b/clients/web/src/components/groups/ServerInfoContent/ServerInfoContent.tsx
@@ -7,20 +7,27 @@ import {
   Text,
   Title,
 } from "@mantine/core";
+import type {
+  ClientCapabilities,
+  InitializeResult,
+} from "@modelcontextprotocol/sdk/types.js";
+import type { ServerType } from "@inspector/core/mcp/types.js";
 import {
   CapabilityItem,
-  type CapabilityItemProps,
+  type CapabilityKey,
 } from "../../elements/CapabilityItem/CapabilityItem";
 
+export interface OAuthDetails {
+  authUrl?: string;
+  scopes?: string[];
+  accessToken?: string;
+}
+
 export interface ServerInfoContentProps {
-  name: string;
-  version: string;
-  protocolVersion: string;
-  transport: string;
-  serverCapabilities: CapabilityItemProps[];
-  clientCapabilities: CapabilityItemProps[];
-  instructions?: string;
-  oauthDetails?: { authUrl?: string; scopes?: string[]; accessToken?: string };
+  initializeResult: InitializeResult;
+  clientCapabilities: ClientCapabilities;
+  transport: ServerType;
+  oauth?: OAuthDetails;
 }
 
 const ValueText = Text.withProps({
@@ -32,26 +39,58 @@ function formatScopes(scopes: string[]): string {
   return scopes.join(", ");
 }
 
+const SERVER_CAPABILITY_KEYS: CapabilityKey[] = [
+  "tools",
+  "resources",
+  "prompts",
+  "logging",
+  "completions",
+  "tasks",
+  "experimental",
+];
+
+const CLIENT_CAPABILITY_KEYS: CapabilityKey[] = [
+  "roots",
+  "sampling",
+  "elicitation",
+  "experimental",
+];
+
+function getCapabilityEntries(
+  capabilities: Record<string, unknown>,
+  knownKeys: CapabilityKey[],
+): { capability: CapabilityKey; supported: boolean }[] {
+  return knownKeys.map((key) => ({
+    capability: key,
+    supported: key in capabilities && capabilities[key] != null,
+  }));
+}
+
 export function ServerInfoContent({
-  name,
-  version,
-  protocolVersion,
-  transport,
-  serverCapabilities,
+  initializeResult,
   clientCapabilities,
-  instructions,
-  oauthDetails,
+  transport,
+  oauth,
 }: ServerInfoContentProps) {
+  const { serverInfo, protocolVersion, capabilities, instructions } =
+    initializeResult;
+
+  const serverCaps = getCapabilityEntries(capabilities, SERVER_CAPABILITY_KEYS);
+  const clientCaps = getCapabilityEntries(
+    clientCapabilities,
+    CLIENT_CAPABILITY_KEYS,
+  );
+
   return (
     <Stack gap="md">
       <Title order={3}>Server Information</Title>
 
       <SimpleGrid cols={2}>
         <Text size="sm">Name</Text>
-        <ValueText>{name}</ValueText>
+        <ValueText>{serverInfo.name}</ValueText>
 
         <Text size="sm">Version</Text>
-        <ValueText>{version}</ValueText>
+        <ValueText>{serverInfo.version}</ValueText>
 
         <Text size="sm">Protocol</Text>
         <ValueText>{protocolVersion}</ValueText>
@@ -63,23 +102,21 @@ export function ServerInfoContent({
       <SimpleGrid cols={2}>
         <Stack gap="xs">
           <Title order={5}>Server Capabilities</Title>
-          {serverCapabilities.map((cap) => (
+          {serverCaps.map((cap) => (
             <CapabilityItem
               key={cap.capability}
               capability={cap.capability}
               supported={cap.supported}
-              count={cap.count}
             />
           ))}
         </Stack>
         <Stack gap="xs">
           <Title order={5}>Client Capabilities</Title>
-          {clientCapabilities.map((cap) => (
+          {clientCaps.map((cap) => (
             <CapabilityItem
               key={cap.capability}
               capability={cap.capability}
               supported={cap.supported}
-              count={cap.count}
             />
           ))}
         </Stack>
@@ -92,26 +129,26 @@ export function ServerInfoContent({
         </Stack>
       )}
 
-      {oauthDetails && (
+      {oauth && (
         <Stack gap="xs">
           <Title order={5}>OAuth Details</Title>
           <Stack gap="xs">
-            {oauthDetails.authUrl && (
+            {oauth.authUrl && (
               <SimpleGrid cols={2}>
                 <Text size="sm">Auth URL</Text>
-                <Code>{oauthDetails.authUrl}</Code>
+                <Code>{oauth.authUrl}</Code>
               </SimpleGrid>
             )}
-            {oauthDetails.scopes && oauthDetails.scopes.length > 0 && (
+            {oauth.scopes && oauth.scopes.length > 0 && (
               <SimpleGrid cols={2}>
                 <Text size="sm">Scopes</Text>
-                <ValueText>{formatScopes(oauthDetails.scopes)}</ValueText>
+                <ValueText>{formatScopes(oauth.scopes)}</ValueText>
               </SimpleGrid>
             )}
-            {oauthDetails.accessToken && (
+            {oauth.accessToken && (
               <SimpleGrid cols={2}>
                 <Text size="sm">Access Token</Text>
-                <Code>{oauthDetails.accessToken}</Code>
+                <Code>{oauth.accessToken}</Code>
               </SimpleGrid>
             )}
           </Stack>
diff --git a/clients/web/src/components/groups/ServerSettingsForm/ServerSettingsForm.stories.tsx b/clients/web/src/components/groups/ServerSettingsForm/ServerSettingsForm.stories.tsx
index d3fdc636c..de732b810 100644
--- a/clients/web/src/components/groups/ServerSettingsForm/ServerSettingsForm.stories.tsx
+++ b/clients/web/src/components/groups/ServerSettingsForm/ServerSettingsForm.stories.tsx
@@ -1,10 +1,119 @@
+import type { InspectorServerSettings } from "@inspector/core/mcp/types.js";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { fn } from "storybook/test";
-import { ServerSettingsForm } from "./ServerSettingsForm";
+import { useArgs } from "storybook/preview-api";
+import {
+  ServerSettingsForm,
+  type ServerSettingsFormProps,
+} from "./ServerSettingsForm";
+
+const defaultSettings: InspectorServerSettings = {
+  connectionMode: "proxy",
+  headers: [],
+  metadata: [],
+  connectionTimeout: 30000,
+  requestTimeout: 60000,
+};
+
+function InteractiveRender(args: ServerSettingsFormProps) {
+  const [, updateArgs] = useArgs<ServerSettingsFormProps>();
+
+  return (
+    <ServerSettingsForm
+      {...args}
+      onExpandedSectionsChange={(sections) => {
+        args.onExpandedSectionsChange(sections);
+        updateArgs({ expandedSections: sections });
+      }}
+      onConnectionModeChange={(mode) => {
+        args.onConnectionModeChange(mode);
+        updateArgs({
+          settings: { ...args.settings, connectionMode: mode },
+        });
+      }}
+      onAddHeader={() => {
+        args.onAddHeader();
+        updateArgs({
+          settings: {
+            ...args.settings,
+            headers: [...args.settings.headers, { key: "", value: "" }],
+          },
+        });
+      }}
+      onRemoveHeader={(index) => {
+        args.onRemoveHeader(index);
+        updateArgs({
+          settings: {
+            ...args.settings,
+            headers: args.settings.headers.filter((_, i) => i !== index),
+          },
+        });
+      }}
+      onHeaderChange={(index, key, value) => {
+        args.onHeaderChange(index, key, value);
+        updateArgs({
+          settings: {
+            ...args.settings,
+            headers: args.settings.headers.map((h, i) =>
+              i === index ? { key, value } : h,
+            ),
+          },
+        });
+      }}
+      onAddMetadata={() => {
+        args.onAddMetadata();
+        updateArgs({
+          settings: {
+            ...args.settings,
+            metadata: [...args.settings.metadata, { key: "", value: "" }],
+          },
+        });
+      }}
+      onRemoveMetadata={(index) => {
+        args.onRemoveMetadata(index);
+        updateArgs({
+          settings: {
+            ...args.settings,
+            metadata: args.settings.metadata.filter((_, i) => i !== index),
+          },
+        });
+      }}
+      onMetadataChange={(index, key, value) => {
+        args.onMetadataChange(index, key, value);
+        updateArgs({
+          settings: {
+            ...args.settings,
+            metadata: args.settings.metadata.map((m, i) =>
+              i === index ? { key, value } : m,
+            ),
+          },
+        });
+      }}
+      onTimeoutChange={(field, value) => {
+        args.onTimeoutChange(field, value);
+        updateArgs({
+          settings: { ...args.settings, [field]: value },
+        });
+      }}
+      onOAuthChange={(oauth) => {
+        args.onOAuthChange(oauth);
+        updateArgs({
+          settings: {
+            ...args.settings,
+            oauthClientId: oauth.clientId,
+            oauthClientSecret: oauth.clientSecret,
+            oauthScopes: oauth.scopes,
+          },
+        });
+      }}
+    />
+  );
+}
 
 const meta: Meta<typeof ServerSettingsForm> = {
   title: "Groups/ServerSettingsForm",
   component: ServerSettingsForm,
+  render: InteractiveRender,
   args: {
     expandedSections: ["connectionMode"],
     onExpandedSectionsChange: fn(),
@@ -25,55 +134,51 @@ type Story = StoryObj<typeof ServerSettingsForm>;
 
 export const DefaultSettings: Story = {
   args: {
-    connectionMode: "proxy",
-    headers: [],
-    metadata: [],
-    connectionTimeout: 30000,
-    requestTimeout: 60000,
+    settings: defaultSettings,
   },
 };
 
 export const WithHeaders: Story = {
   args: {
-    connectionMode: "proxy",
-    headers: [
-      { key: "Authorization", value: "Bearer token-abc-123" },
-      { key: "X-Custom-Header", value: "custom-value" },
-    ],
-    metadata: [],
-    connectionTimeout: 30000,
-    requestTimeout: 60000,
+    settings: {
+      ...defaultSettings,
+      headers: [
+        { key: "Authorization", value: "Bearer token-abc-123" },
+        { key: "X-Custom-Header", value: "custom-value" },
+      ],
+    },
   },
 };
 
 export const WithOAuth: Story = {
   args: {
-    connectionMode: "direct",
-    headers: [],
-    metadata: [],
-    connectionTimeout: 30000,
-    requestTimeout: 60000,
-    oauthClientId: "my-client-id",
-    oauthClientSecret: "super-secret-value",
-    oauthScopes: "read write admin",
+    settings: {
+      ...defaultSettings,
+      connectionMode: "direct",
+      oauthClientId: "my-client-id",
+      oauthClientSecret: "super-secret-value",
+      oauthScopes: "read write admin",
+    },
   },
 };
 
 export const AllConfigured: Story = {
   args: {
-    connectionMode: "proxy",
-    headers: [
-      { key: "Authorization", value: "Bearer token-abc-123" },
-      { key: "X-Request-Id", value: "req-456" },
-    ],
-    metadata: [
-      { key: "userId", value: "user-789" },
-      { key: "sessionId", value: "session-012" },
-    ],
-    connectionTimeout: 15000,
-    requestTimeout: 45000,
-    oauthClientId: "my-client-id",
-    oauthClientSecret: "super-secret-value",
-    oauthScopes: "read write",
+    settings: {
+      connectionMode: "proxy",
+      headers: [
+        { key: "Authorization", value: "Bearer token-abc-123" },
+        { key: "X-Request-Id", value: "req-456" },
+      ],
+      metadata: [
+        { key: "userId", value: "user-789" },
+        { key: "sessionId", value: "session-012" },
+      ],
+      connectionTimeout: 15000,
+      requestTimeout: 45000,
+      oauthClientId: "my-client-id",
+      oauthClientSecret: "super-secret-value",
+      oauthScopes: "read write",
+    },
   },
 };
diff --git a/clients/web/src/components/groups/ServerSettingsForm/ServerSettingsForm.tsx b/clients/web/src/components/groups/ServerSettingsForm/ServerSettingsForm.tsx
index f66c19bad..3db4cf7f2 100644
--- a/clients/web/src/components/groups/ServerSettingsForm/ServerSettingsForm.tsx
+++ b/clients/web/src/components/groups/ServerSettingsForm/ServerSettingsForm.tsx
@@ -9,11 +9,7 @@ import {
   Text,
   TextInput,
 } from "@mantine/core";
-
-export interface KeyValuePair {
-  key: string;
-  value: string;
-}
+import type { InspectorServerSettings } from "@inspector/core/mcp/types.js";
 
 export type ServerSettingsSection =
   | "connectionMode"
@@ -23,17 +19,10 @@ export type ServerSettingsSection =
   | "oauth";
 
 export interface ServerSettingsFormProps {
-  connectionMode: "proxy" | "direct";
-  headers: KeyValuePair[];
-  metadata: KeyValuePair[];
-  connectionTimeout: number;
-  requestTimeout: number;
-  oauthClientId?: string;
-  oauthClientSecret?: string;
-  oauthScopes?: string;
+  settings: InspectorServerSettings;
   expandedSections: ServerSettingsSection[];
   onExpandedSectionsChange: (sections: ServerSettingsSection[]) => void;
-  onConnectionModeChange: (mode: string) => void;
+  onConnectionModeChange: (mode: "proxy" | "direct") => void;
   onAddHeader: () => void;
   onRemoveHeader: (index: number) => void;
   onHeaderChange: (index: number, key: string, value: string) => void;
@@ -41,7 +30,13 @@ export interface ServerSettingsFormProps {
   onRemoveMetadata: (index: number) => void;
   onMetadataChange: (index: number, key: string, value: string) => void;
   onTimeoutChange: (field: string, value: number) => void;
-  onOAuthChange: (field: string, value: string) => void;
+  onOAuthChange: (oauth: OAuthSettings) => void;
+}
+
+export interface OAuthSettings {
+  clientId: string;
+  clientSecret: string;
+  scopes: string;
 }
 
 const CONNECTION_MODE_OPTIONS = [
@@ -75,7 +70,7 @@ function KeyValueRows({
   onChange,
   onRemove,
 }: {
-  items: KeyValuePair[];
+  items: { key: string; value: string }[];
   onChange: (index: number, key: string, value: string) => void;
   onRemove: (index: number) => void;
 }) {
@@ -105,14 +100,7 @@ function KeyValueRows({
 }
 
 export function ServerSettingsForm({
-  connectionMode,
-  headers,
-  metadata,
-  connectionTimeout,
-  requestTimeout,
-  oauthClientId,
-  oauthClientSecret,
-  oauthScopes,
+  settings,
   expandedSections,
   onExpandedSectionsChange,
   onConnectionModeChange,
@@ -131,6 +119,14 @@ export function ServerSettingsForm({
     onTimeoutChange(field, numValue);
   };
 
+  function currentOAuth(): OAuthSettings {
+    return {
+      clientId: settings.oauthClientId ?? "",
+      clientSecret: settings.oauthClientSecret ?? "",
+      scopes: settings.oauthScopes ?? "",
+    };
+  }
+
   return (
     <Accordion
       multiple
@@ -145,12 +141,12 @@ export function ServerSettingsForm({
         <Accordion.Panel>
           <Select
             data={CONNECTION_MODE_OPTIONS}
-            value={connectionMode}
+            value={settings.connectionMode}
             onChange={(value) => {
-              if (value) onConnectionModeChange(value);
+              if (value) onConnectionModeChange(value as "proxy" | "direct");
             }}
             description={
-              connectionMode === "proxy"
+              settings.connectionMode === "proxy"
                 ? "Route through inspector proxy (required for STDIO)"
                 : undefined
             }
@@ -168,11 +164,11 @@ export function ServerSettingsForm({
               </HintText>
               <AddButton onClick={onAddHeader}>+ Add Header</AddButton>
             </Group>
-            {headers.length === 0 ? (
+            {settings.headers.length === 0 ? (
               <EmptyHint>No custom headers configured</EmptyHint>
             ) : (
               <KeyValueRows
-                items={headers}
+                items={settings.headers}
                 onChange={onHeaderChange}
                 onRemove={onRemoveHeader}
               />
@@ -191,11 +187,11 @@ export function ServerSettingsForm({
               </HintText>
               <AddButton onClick={onAddMetadata}>+ Add Metadata</AddButton>
             </Group>
-            {metadata.length === 0 ? (
+            {settings.metadata.length === 0 ? (
               <EmptyHint>No request metadata configured</EmptyHint>
             ) : (
               <KeyValueRows
-                items={metadata}
+                items={settings.metadata}
                 onChange={onMetadataChange}
                 onRemove={onRemoveMetadata}
               />
@@ -211,13 +207,13 @@ export function ServerSettingsForm({
             <NumberInput
               label="Connection Timeout"
               suffix=" ms"
-              value={connectionTimeout}
+              value={settings.connectionTimeout}
               onChange={handleTimeoutChange("connectionTimeout")}
             />
             <NumberInput
               label="Request Timeout"
               suffix=" ms"
-              value={requestTimeout}
+              value={settings.requestTimeout}
               onChange={handleTimeoutChange("requestTimeout")}
             />
           </Group>
@@ -234,21 +230,34 @@ export function ServerSettingsForm({
             </HintText>
             <TextInput
               label="Client ID"
-              value={oauthClientId ?? ""}
-              onChange={(e) => onOAuthChange("clientId", e.currentTarget.value)}
+              value={settings.oauthClientId ?? ""}
+              onChange={(e) =>
+                onOAuthChange({
+                  ...currentOAuth(),
+                  clientId: e.currentTarget.value,
+                })
+              }
             />
             <TextInput
               label="Client Secret"
-              value={oauthClientSecret ?? ""}
+              value={settings.oauthClientSecret ?? ""}
               type="password"
               onChange={(e) =>
-                onOAuthChange("clientSecret", e.currentTarget.value)
+                onOAuthChange({
+                  ...currentOAuth(),
+                  clientSecret: e.currentTarget.value,
+                })
               }
             />
             <TextInput
               label="Scopes"
-              value={oauthScopes ?? ""}
-              onChange={(e) => onOAuthChange("scopes", e.currentTarget.value)}
+              value={settings.oauthScopes ?? ""}
+              onChange={(e) =>
+                onOAuthChange({
+                  ...currentOAuth(),
+                  scopes: e.currentTarget.value,
+                })
+              }
             />
           </Stack>
         </Accordion.Panel>
diff --git a/clients/web/src/components/groups/ServerSettingsModal/ServerSettingsModal.stories.tsx b/clients/web/src/components/groups/ServerSettingsModal/ServerSettingsModal.stories.tsx
new file mode 100644
index 000000000..596bf93c3
--- /dev/null
+++ b/clients/web/src/components/groups/ServerSettingsModal/ServerSettingsModal.stories.tsx
@@ -0,0 +1,74 @@
+import type { InspectorServerSettings } from "@inspector/core/mcp/types.js";
+import { AppShell } from "@mantine/core";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
+import { useArgs } from "storybook/preview-api";
+import {
+  ServerSettingsModal,
+  type ServerSettingsModalProps,
+} from "./ServerSettingsModal";
+
+const initialSettings: InspectorServerSettings = {
+  connectionMode: "proxy",
+  headers: [
+    { key: "Authorization", value: "Bearer token-abc-123" },
+    { key: "X-Request-Id", value: "req-456" },
+  ],
+  metadata: [{ key: "userId", value: "user-789" }],
+  connectionTimeout: 30000,
+  requestTimeout: 60000,
+  oauthClientId: "my-client-id",
+  oauthClientSecret: "super-secret-value",
+  oauthScopes: "read write",
+};
+
+function InteractiveRender(args: ServerSettingsModalProps) {
+  const [, updateArgs] = useArgs<ServerSettingsModalProps>();
+
+  return (
+    <AppShell>
+      <AppShell.Main>
+        <ServerSettingsModal
+          {...args}
+          onSettingsChange={(settings) => {
+            args.onSettingsChange(settings);
+            updateArgs({ settings });
+          }}
+        />
+      </AppShell.Main>
+    </AppShell>
+  );
+}
+
+const meta: Meta<typeof ServerSettingsModal> = {
+  title: "Groups/ServerSettingsModal",
+  component: ServerSettingsModal,
+  parameters: { layout: "fullscreen" },
+  render: InteractiveRender,
+  args: {
+    opened: true,
+    onClose: fn(),
+    onSettingsChange: fn(),
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ServerSettingsModal>;
+
+export const FullyConfigured: Story = {
+  args: {
+    settings: initialSettings,
+  },
+};
+
+export const EmptySettings: Story = {
+  args: {
+    settings: {
+      connectionMode: "proxy",
+      headers: [],
+      metadata: [],
+      connectionTimeout: 30000,
+      requestTimeout: 60000,
+    },
+  },
+};
diff --git a/clients/web/src/components/groups/ServerSettingsModal/ServerSettingsModal.tsx b/clients/web/src/components/groups/ServerSettingsModal/ServerSettingsModal.tsx
new file mode 100644
index 000000000..c1a882ab8
--- /dev/null
+++ b/clients/web/src/components/groups/ServerSettingsModal/ServerSettingsModal.tsx
@@ -0,0 +1,139 @@
+import { useState } from "react";
+import { CloseButton, Group, Modal, Title } from "@mantine/core";
+import type { InspectorServerSettings } from "@inspector/core/mcp/types.js";
+import { ListToggle } from "../../elements/ListToggle/ListToggle";
+import {
+  ServerSettingsForm,
+  type ServerSettingsSection,
+  type OAuthSettings,
+} from "../ServerSettingsForm/ServerSettingsForm";
+
+const ALL_SECTIONS: ServerSettingsSection[] = [
+  "connectionMode",
+  "headers",
+  "metadata",
+  "timeouts",
+  "oauth",
+];
+
+export interface ServerSettingsModalProps {
+  opened: boolean;
+  settings: InspectorServerSettings;
+  onClose: () => void;
+  onSettingsChange: (settings: InspectorServerSettings) => void;
+}
+
+export function ServerSettingsModal({
+  opened,
+  settings,
+  onClose,
+  onSettingsChange,
+}: ServerSettingsModalProps) {
+  const [expandedSections, setExpandedSections] = useState<
+    ServerSettingsSection[]
+  >(["connectionMode"]);
+
+  const allExpanded = expandedSections.length === ALL_SECTIONS.length;
+
+  function handleToggleAll() {
+    setExpandedSections(allExpanded ? [] : ALL_SECTIONS);
+  }
+
+  function handleConnectionModeChange(mode: "proxy" | "direct") {
+    onSettingsChange({ ...settings, connectionMode: mode });
+  }
+
+  function handleAddHeader() {
+    onSettingsChange({
+      ...settings,
+      headers: [...settings.headers, { key: "", value: "" }],
+    });
+  }
+
+  function handleRemoveHeader(index: number) {
+    onSettingsChange({
+      ...settings,
+      headers: settings.headers.filter((_, i) => i !== index),
+    });
+  }
+
+  function handleHeaderChange(index: number, key: string, value: string) {
+    const headers = settings.headers.map((h, i) =>
+      i === index ? { key, value } : h,
+    );
+    onSettingsChange({ ...settings, headers });
+  }
+
+  function handleAddMetadata() {
+    onSettingsChange({
+      ...settings,
+      metadata: [...settings.metadata, { key: "", value: "" }],
+    });
+  }
+
+  function handleRemoveMetadata(index: number) {
+    onSettingsChange({
+      ...settings,
+      metadata: settings.metadata.filter((_, i) => i !== index),
+    });
+  }
+
+  function handleMetadataChange(index: number, key: string, value: string) {
+    const metadata = settings.metadata.map((m, i) =>
+      i === index ? { key, value } : m,
+    );
+    onSettingsChange({ ...settings, metadata });
+  }
+
+  function handleTimeoutChange(field: string, value: number) {
+    onSettingsChange({ ...settings, [field]: value });
+  }
+
+  function handleOAuthChange(oauth: OAuthSettings) {
+    onSettingsChange({
+      ...settings,
+      oauthClientId: oauth.clientId,
+      oauthClientSecret: oauth.clientSecret,
+      oauthScopes: oauth.scopes,
+    });
+  }
+
+  return (
+    <Modal
+      opened={opened}
+      onClose={onClose}
+      withCloseButton={false}
+      title={
+        <Group justify="space-between" wrap="nowrap" w="100%">
+          <ListToggle
+            compact={allExpanded}
+            variant="subtle"
+            onToggle={handleToggleAll}
+          />
+          <Title order={4} ta="center" style={{ flex: 1 }}>
+            Server Settings
+          </Title>
+          <CloseButton onClick={onClose} />
+        </Group>
+      }
+      size="lg"
+      centered
+      styles={{ title: { flex: 1 } }}
+    >
+      <ServerSettingsForm
+        settings={settings}
+        expandedSections={expandedSections}
+        onExpandedSectionsChange={setExpandedSections}
+        onConnectionModeChange={handleConnectionModeChange}
+        onAddHeader={handleAddHeader}
+        onRemoveHeader={handleRemoveHeader}
+        onHeaderChange={handleHeaderChange}
+        onAddMetadata={handleAddMetadata}
+        onRemoveMetadata={handleRemoveMetadata}
+        onMetadataChange={handleMetadataChange}
+        onTimeoutChange={handleTimeoutChange}
+        onOAuthChange={handleOAuthChange}
+      />
+    </Modal>
+  );
+}
diff --git a/clients/web/src/components/groups/ViewHeader/ViewHeader.stories.tsx b/clients/web/src/components/groups/ViewHeader/ViewHeader.stories.tsx
index bf7b9ffd5..3b8bb5a34 100644
--- a/clients/web/src/components/groups/ViewHeader/ViewHeader.stories.tsx
+++ b/clients/web/src/components/groups/ViewHeader/ViewHeader.stories.tsx
@@ -1,6 +1,6 @@
+import { AppShell } from "@mantine/core";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { fn } from "storybook/test";
-import { AppShell } from "@mantine/core";
 import { ViewHeader } from "./ViewHeader";
 
 const meta: Meta<typeof ViewHeader> = {
@@ -23,7 +23,7 @@ type Story = StoryObj<typeof ViewHeader>;
 export const Connected: Story = {
   args: {
     connected: true,
-    serverName: "my-mcp-server",
+    serverInfo: { name: "my-mcp-server", version: "1.2.0" },
     status: "connected",
     latencyMs: 23,
     activeTab: "Tools",
diff --git a/clients/web/src/components/groups/ViewHeader/ViewHeader.tsx b/clients/web/src/components/groups/ViewHeader/ViewHeader.tsx
index 2eddb6fa6..4de55a89c 100644
--- a/clients/web/src/components/groups/ViewHeader/ViewHeader.tsx
+++ b/clients/web/src/components/groups/ViewHeader/ViewHeader.tsx
@@ -7,17 +7,19 @@ import {
   SegmentedControl,
   Text,
   Title,
+  useComputedColorScheme,
 } from "@mantine/core";
-import { useComputedColorScheme } from "@mantine/core";
+import type { Implementation } from "@modelcontextprotocol/sdk/types.js";
 import { MdLightMode, MdDarkMode } from "react-icons/md";
+import type { ConnectionStatus } from "@inspector/core/mcp/types.js";
 import { ServerStatusIndicator } from "../../elements/ServerStatusIndicator/ServerStatusIndicator";
 import mcpLogo from "../../../theme/assets/MCP.svg";
 import mcpLogoDark from "../../../theme/assets/MCP-dark.svg";
 
 interface ConnectedProps {
   connected: true;
-  serverName: string;
-  status: "connected" | "connecting" | "error";
+  serverInfo: Implementation;
+  status: ConnectionStatus;
   latencyMs?: number;
   activeTab: string;
   availableTabs: string[];
@@ -120,7 +122,7 @@ export function ViewHeader(props: ViewHeaderProps) {
         <LogoLink>
           <LogoImage src={colorScheme === "dark" ? mcpLogoDark : mcpLogo} />
         </LogoLink>
-        <ServerName>{props.serverName}</ServerName>
+        <ServerName>{props.serverInfo.name}</ServerName>
       </LeftSection>
 
       <CenterSection>
diff --git a/clients/web/src/components/screens/ServerListScreen/ServerListScreen.stories.tsx b/clients/web/src/components/screens/ServerListScreen/ServerListScreen.stories.tsx
index 7ffd109d0..60e6c8ee3 100644
--- a/clients/web/src/components/screens/ServerListScreen/ServerListScreen.stories.tsx
+++ b/clients/web/src/components/screens/ServerListScreen/ServerListScreen.stories.tsx
@@ -46,48 +46,56 @@ function makeServerCallbacks(): Pick<
 
 const connectedStdioServer: ServerCardProps = {
   name: "Local Dev Server",
-  version: "1.2.0",
-  transport: "stdio",
+  config: {
+    command: "npx @modelcontextprotocol/server-filesystem /home/user/projects",
+  },
+  info: { name: "Local Dev Server", version: "1.2.0" },
+  connection: { status: "connected" },
   connectionMode: "Direct",
-  command: "npx @modelcontextprotocol/server-filesystem /home/user/projects",
-  status: "connected",
   canTestClientFeatures: true,
   ...makeServerCallbacks(),
 };
 
 const disconnectedStdioServer: ServerCardProps = {
   name: "Database Tools",
-  version: "0.9.1",
-  transport: "stdio",
+  config: {
+    command: "python -m mcp_server_sqlite --db-path ./data.db",
+  },
+  info: { name: "Database Tools", version: "0.9.1" },
+  connection: { status: "disconnected" },
   connectionMode: "Direct",
-  command: "python -m mcp_server_sqlite --db-path ./data.db",
-  status: "disconnected",
   canTestClientFeatures: false,
   ...makeServerCallbacks(),
 };
 
 const failedHttpServer: ServerCardProps = {
   name: "Remote API Server",
-  version: "2.0.0",
-  transport: "streamable-http",
-  connectionMode: "Streamable HTTP",
-  command: "https://api.example.com/mcp",
-  status: "error",
-  retryCount: 3,
-  error: {
-    message: "Connection refused",
-    details: "ECONNREFUSED 127.0.0.1:8080 - The server may not be running.",
+  config: {
+    type: "streamable-http",
+    url: "https://api.example.com/mcp",
   },
+  info: { name: "Remote API Server", version: "2.0.0" },
+  connection: {
+    status: "error",
+    retryCount: 3,
+    error: {
+      message: "Connection refused",
+      details: "ECONNREFUSED 127.0.0.1:8080 - The server may not be running.",
+    },
+  },
+  connectionMode: "Streamable HTTP",
   canTestClientFeatures: false,
   ...makeServerCallbacks(),
 };
 
 const connectingHttpServer: ServerCardProps = {
   name: "Staging Server",
-  transport: "streamable-http",
+  config: {
+    type: "streamable-http",
+    url: "https://staging.example.com/mcp",
+  },
+  connection: { status: "connecting" },
   connectionMode: "Streamable HTTP",
-  command: "https://staging.example.com/mcp",
-  status: "connecting",
   canTestClientFeatures: false,
   ...makeServerCallbacks(),
 };
diff --git a/clients/web/src/components/screens/ServerListScreen/ServerListScreen.tsx b/clients/web/src/components/screens/ServerListScreen/ServerListScreen.tsx
index 5c92493ed..ff5ef7357 100644
--- a/clients/web/src/components/screens/ServerListScreen/ServerListScreen.tsx
+++ b/clients/web/src/components/screens/ServerListScreen/ServerListScreen.tsx
@@ -31,7 +31,7 @@ export function ServerListScreen({
   const [activeServer, setActiveServer] = useState<string | undefined>();
 
   function handleToggleList() {
-    setCompact((prev) => (prev === true ? false : true));
+    setCompact((prev) => !prev);
   }
 
   return (
diff --git a/clients/web/src/components/views/ConnectedView/ConnectedView.stories.tsx b/clients/web/src/components/views/ConnectedView/ConnectedView.stories.tsx
index 02c28771b..ac68c0272 100644
--- a/clients/web/src/components/views/ConnectedView/ConnectedView.stories.tsx
+++ b/clients/web/src/components/views/ConnectedView/ConnectedView.stories.tsx
@@ -150,7 +150,7 @@ const meta: Meta<typeof ConnectedView> = {
   component: ConnectedView,
   parameters: { layout: "fullscreen" },
   args: {
-    serverName: "my-mcp-server",
+    serverInfo: { name: "my-mcp-server", version: "1.0.0" },
     status: "connected",
     latencyMs: 23,
     availableTabs: allTabs,
@@ -705,7 +705,10 @@ export const LimitedTabs: Story = {
 
 export const LongServerName: Story = {
   args: {
-    serverName: "my-very-long-server-name-that-might-overflow-is",
+    serverInfo: {
+      name: "my-very-long-server-name-that-might-overflow-is",
+      version: "1.0.0",
+    },
     children: <Text>Tools screen content</Text>,
   },
 };
diff --git a/clients/web/src/components/views/ConnectedView/ConnectedView.tsx b/clients/web/src/components/views/ConnectedView/ConnectedView.tsx
index 229834448..2d74c621d 100644
--- a/clients/web/src/components/views/ConnectedView/ConnectedView.tsx
+++ b/clients/web/src/components/views/ConnectedView/ConnectedView.tsx
@@ -1,10 +1,12 @@
 import type { ReactNode } from "react";
 import { AppShell } from "@mantine/core";
+import type { Implementation } from "@modelcontextprotocol/sdk/types.js";
+import type { ConnectionStatus } from "@inspector/core/mcp/types.js";
 import { ViewHeader } from "../../groups/ViewHeader/ViewHeader";
 
 export interface ConnectedLayoutProps {
-  serverName: string;
-  status: "connected" | "connecting" | "error";
+  serverInfo: Implementation;
+  status: ConnectionStatus;
   latencyMs?: number;
   activeTab: string;
   availableTabs: string[];
@@ -15,7 +17,7 @@ export interface ConnectedLayoutProps {
 }
 
 export function ConnectedView({
-  serverName,
+  serverInfo,
   status,
   latencyMs,
   activeTab,
@@ -30,7 +32,7 @@ export function ConnectedView({
       <AppShell.Header>
         <ViewHeader
           connected
-          serverName={serverName}
+          serverInfo={serverInfo}
           status={status}
           latencyMs={latencyMs}
           activeTab={activeTab}
diff --git a/clients/web/src/components/views/UnconnectedView/UnconnectedView.stories.tsx b/clients/web/src/components/views/UnconnectedView/UnconnectedView.stories.tsx
index 511fc1481..15d198ad8 100644
--- a/clients/web/src/components/views/UnconnectedView/UnconnectedView.stories.tsx
+++ b/clients/web/src/components/views/UnconnectedView/UnconnectedView.stories.tsx
@@ -1,22 +1,10 @@
 import { useState } from "react";
+import type { InspectorServerSettings } from "@inspector/core/mcp/types.js";
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Box, CloseButton, Group, Modal, Title } from "@mantine/core";
 import { fn } from "storybook/test";
 import { UnconnectedView } from "./UnconnectedView.js";
 import { ServerListScreen } from "../../screens/ServerListScreen/ServerListScreen";
-import {
-  ServerSettingsForm,
-  type ServerSettingsSection,
-} from "../../groups/ServerSettingsForm/ServerSettingsForm";
-
-const ALL_SETTINGS_SECTIONS: ServerSettingsSection[] = [
-  "connectionMode",
-  "headers",
-  "metadata",
-  "timeouts",
-  "oauth",
-];
-import { ListToggle } from "../../elements/ListToggle/ListToggle";
+import { ServerSettingsModal } from "../../groups/ServerSettingsModal/ServerSettingsModal";
 import type { ServerCardProps } from "../../groups/ServerCard/ServerCard";
 
 const meta: Meta<typeof UnconnectedView> = {
@@ -50,6 +38,38 @@ function makeServerCallbacks(): Pick<
   };
 }
 
+function makeStdioServer(
+  name: string,
+  version: string,
+  command: string,
+): ServerCardProps {
+  return {
+    name,
+    config: { command },
+    info: { name, version },
+    connection: { status: "disconnected" },
+    connectionMode: "Via Proxy",
+    canTestClientFeatures: false,
+    ...makeServerCallbacks(),
+  };
+}
+
+function makeHttpServer(
+  name: string,
+  version: string,
+  url: string,
+): ServerCardProps {
+  return {
+    name,
+    config: { type: "streamable-http", url },
+    info: { name, version },
+    connection: { status: "disconnected" },
+    connectionMode: "Direct",
+    canTestClientFeatures: false,
+    ...makeServerCallbacks(),
+  };
+}
+
 export const Empty: Story = {
   args: {
     children: (
@@ -68,37 +88,21 @@ export const WithServers: Story = {
     children: (
       <ServerListScreen
         servers={[
-          {
-            name: "everything-server",
-            version: "1.0.0",
-            transport: "stdio",
-            connectionMode: "Via Proxy",
-            command: "npx -y @modelcontextprotocol/server-everything",
-            status: "disconnected",
-            canTestClientFeatures: false,
-            ...makeServerCallbacks(),
-          },
-          {
-            name: "filesystem-server",
-            version: "0.6.2",
-            transport: "stdio",
-            connectionMode: "Via Proxy",
-            command:
-              "npx -y @modelcontextprotocol/server-filesystem /home/user",
-            status: "disconnected",
-            canTestClientFeatures: false,
-            ...makeServerCallbacks(),
-          },
-          {
-            name: "remote-server",
-            version: "2.1.0",
-            transport: "streamable-http",
-            connectionMode: "Direct",
-            command: "https://api.example.com/mcp",
-            status: "disconnected",
-            canTestClientFeatures: false,
-            ...makeServerCallbacks(),
-          },
+          makeStdioServer(
+            "everything-server",
+            "1.0.0",
+            "npx -y @modelcontextprotocol/server-everything",
+          ),
+          makeStdioServer(
+            "filesystem-server",
+            "0.6.2",
+            "npx -y @modelcontextprotocol/server-filesystem /home/user",
+          ),
+          makeHttpServer(
+            "remote-server",
+            "2.1.0",
+            "https://api.example.com/mcp",
+          ),
         ]}
         onAddManually={fn()}
         onImportConfig={fn()}
@@ -109,79 +113,40 @@ export const WithServers: Story = {
 };
 
 function SettingsModalStory() {
-  const [expandedSections, setExpandedSections] = useState<
-    ServerSettingsSection[]
-  >(["connectionMode"]);
-  const allExpanded = expandedSections.length === ALL_SETTINGS_SECTIONS.length;
+  const [settings, setSettings] = useState<InspectorServerSettings>({
+    connectionMode: "proxy",
+    headers: [
+      { key: "Authorization", value: "Bearer token-abc-123" },
+      { key: "X-Request-Id", value: "req-456" },
+    ],
+    metadata: [{ key: "userId", value: "user-789" }],
+    connectionTimeout: 30000,
+    requestTimeout: 60000,
+    oauthClientId: "my-client-id",
+    oauthClientSecret: "super-secret-value",
+    oauthScopes: "read write",
+  });
+
   return (
     <UnconnectedView onToggleTheme={fn()}>
       <ServerListScreen
         servers={[
-          {
-            name: "everything-server",
-            version: "1.0.0",
-            transport: "stdio",
-            connectionMode: "Via Proxy",
-            command: "npx -y @modelcontextprotocol/server-everything",
-            status: "disconnected",
-            canTestClientFeatures: false,
-            ...makeServerCallbacks(),
-          },
+          makeStdioServer(
+            "everything-server",
+            "1.0.0",
+            "npx -y @modelcontextprotocol/server-everything",
+          ),
         ]}
         onAddManually={fn()}
         onImportConfig={fn()}
         onImportServerJson={fn()}
       />
-      <Modal
+      <ServerSettingsModal
         opened
+        settings={settings}
         onClose={fn()}
-        withCloseButton={false}
-        title={
-          <Group justify="space-between" wrap="nowrap" w="100%">
-            <ListToggle
-              compact={allExpanded}
-              variant="subtle"
-              onToggle={() =>
-                setExpandedSections(allExpanded ? [] : ALL_SETTINGS_SECTIONS)
-              }
-            />
-            <Title order={4} ta="center" style={{ flex: 1 }}>
-              Server Settings
-            </Title>
-            <Box>
-              <CloseButton onClick={fn()} />
-            </Box>
-          </Group>
-        }
-        size="lg"
-        centered
-        styles={{ title: { flex: 1 } }}
-      >
-        <ServerSettingsForm
-          connectionMode="proxy"
-          headers={[
-            { key: "Authorization", value: "Bearer token-abc-123" },
-            { key: "X-Request-Id", value: "req-456" },
-          ]}
-          metadata={[{ key: "userId", value: "user-789" }]}
-          connectionTimeout={30000}
-          requestTimeout={60000}
-          oauthClientId="my-client-id"
-          oauthClientSecret="super-secret-value"
-          oauthScopes="read write"
-          expandedSections={expandedSections}
-          onExpandedSectionsChange={setExpandedSections}
-          onConnectionModeChange={fn()}
-          onAddHeader={fn()}
-          onRemoveHeader={fn()}
-          onHeaderChange={fn()}
-          onAddMetadata={fn()}
-          onRemoveMetadata={fn()}
-          onMetadataChange={fn()}
-          onTimeoutChange={fn()}
-          onOAuthChange={fn()}
-        />
-      </Modal>
+        onSettingsChange={setSettings}
+      />
     </UnconnectedView>
   );
 }
@@ -195,127 +160,66 @@ export const ManyServers: Story = {
     children: (
       <ServerListScreen
         servers={[
-          {
-            name: "everything-server",
-            version: "1.0.0",
-            transport: "stdio",
-            connectionMode: "Via Proxy",
-            command: "npx -y @modelcontextprotocol/server-everything",
-            status: "disconnected",
-            canTestClientFeatures: false,
-            ...makeServerCallbacks(),
-          },
-          {
-            name: "filesystem-server",
-            version: "0.6.2",
-            transport: "stdio",
-            connectionMode: "Via Proxy",
-            command:
-              "npx -y @modelcontextprotocol/server-filesystem /home/user",
-            status: "disconnected",
-            canTestClientFeatures: false,
-            ...makeServerCallbacks(),
-          },
-          {
-            name: "remote-api-server",
-            version: "2.1.0",
-            transport: "streamable-http",
-            connectionMode: "Direct",
-            command: "https://api.example.com/mcp",
-            status: "disconnected",
-            canTestClientFeatures: false,
-            ...makeServerCallbacks(),
-          },
-          {
-            name: "postgres-server",
-            version: "1.3.0",
-            transport: "stdio",
-            connectionMode: "Via Proxy",
-            command: "npx -y @modelcontextprotocol/server-postgres",
-            status: "disconnected",
-            canTestClientFeatures: false,
-            ...makeServerCallbacks(),
-          },
-          {
-            name: "github-server",
-            version: "0.9.1",
-            transport: "stdio",
-            connectionMode: "Via Proxy",
-            command: "npx -y @modelcontextprotocol/server-github",
-            status: "disconnected",
-            canTestClientFeatures: false,
-            ...makeServerCallbacks(),
-          },
-          {
-            name: "slack-server",
-            version: "1.1.0",
-            transport: "streamable-http",
-            connectionMode: "Direct",
-            command: "https://slack-mcp.example.com/mcp",
-            status: "disconnected",
-            canTestClientFeatures: false,
-            ...makeServerCallbacks(),
-          },
-          {
-            name: "memory-server",
-            version: "0.2.0",
-            transport: "stdio",
-            connectionMode: "Via Proxy",
-            command: "npx -y @modelcontextprotocol/server-memory",
-            status: "disconnected",
-            canTestClientFeatures: false,
-            ...makeServerCallbacks(),
-          },
-          {
-            name: "puppeteer-server",
-            version: "1.0.3",
-            transport: "stdio",
-            connectionMode: "Via Proxy",
-            command: "npx -y @modelcontextprotocol/server-puppeteer",
-            status: "disconnected",
-            canTestClientFeatures: false,
-            ...makeServerCallbacks(),
-          },
-          {
-            name: "sqlite-server",
-            version: "0.5.1",
-            transport: "stdio",
-            connectionMode: "Via Proxy",
-            command: "npx -y @modelcontextprotocol/server-sqlite ./data.db",
-            status: "disconnected",
-            canTestClientFeatures: false,
-            ...makeServerCallbacks(),
-          },
-          {
-            name: "brave-search-server",
-            version: "1.2.0",
-            transport: "stdio",
-            connectionMode: "Via Proxy",
-            command: "npx -y @modelcontextprotocol/server-brave-search",
-            status: "disconnected",
-            canTestClientFeatures: false,
-            ...makeServerCallbacks(),
-          },
-          {
-            name: "google-maps-server",
-            version: "0.8.0",
-            transport: "streamable-http",
-            connectionMode: "Direct",
-            command: "https://maps-mcp.example.com/mcp",
-            status: "disconnected",
-            canTestClientFeatures: false,
-            ...makeServerCallbacks(),
-          },
-          {
-            name: "sequential-thinking-server",
-            version: "1.4.2",
-            transport: "stdio",
-            connectionMode: "Via Proxy",
-            command: "npx -y @modelcontextprotocol/server-sequential-thinking",
-            status: "disconnected",
-            canTestClientFeatures: false,
-            ...makeServerCallbacks(),
-          },
+          makeStdioServer(
+            "everything-server",
+            "1.0.0",
+            "npx -y @modelcontextprotocol/server-everything",
+          ),
+          makeStdioServer(
+            "filesystem-server",
+            "0.6.2",
+            "npx -y @modelcontextprotocol/server-filesystem /home/user",
+          ),
+          makeHttpServer(
+            "remote-api-server",
+            "2.1.0",
+            "https://api.example.com/mcp",
+          ),
+          makeStdioServer(
+            "postgres-server",
+            "1.3.0",
+            "npx -y @modelcontextprotocol/server-postgres",
+          ),
+          makeStdioServer(
+            "github-server",
+            "0.9.1",
+            "npx -y @modelcontextprotocol/server-github",
+          ),
+          makeHttpServer(
+            "slack-server",
+            "1.1.0",
+            "https://slack-mcp.example.com/mcp",
+          ),
+          makeStdioServer(
+            "memory-server",
+            "0.2.0",
+            "npx -y @modelcontextprotocol/server-memory",
+          ),
+          makeStdioServer(
+            "puppeteer-server",
+            "1.0.3",
+            "npx -y @modelcontextprotocol/server-puppeteer",
+          ),
+          makeStdioServer(
+            "sqlite-server",
+            "0.5.1",
+            "npx -y @modelcontextprotocol/server-sqlite ./data.db",
+          ),
+          makeStdioServer(
+            "brave-search-server",
+            "1.2.0",
+            "npx -y @modelcontextprotocol/server-brave-search",
+          ),
+          makeHttpServer(
+            "google-maps-server",
+            "0.8.0",
+            "https://maps-mcp.example.com/mcp",
+          ),
+          makeStdioServer(
+            "sequential-thinking-server",
+            "1.4.2",
+            "npx -y @modelcontextprotocol/server-sequential-thinking",
+          ),
         ]}
         onAddManually={fn()}
         onImportConfig={fn()}
diff --git a/core/mcp/types.ts b/core/mcp/types.ts
index 0d0585338..6ca15ef7e 100644
--- a/core/mcp/types.ts
+++ b/core/mcp/types.ts
@@ -60,6 +60,16 @@ export type ConnectionStatus =
   | "connected"
   | "error";
 
+/**
+ * Snapshot of a server's connection state, used by dumb components
+ * that display status, retry count, and error details.
+ */
+export interface ConnectionState {
+  status: ConnectionStatus;
+  retryCount?: number;
+  error?: { message: string; details?: string };
+}
+
 export interface StderrLogEntry {
   timestamp: Date;
   message: string;
@@ -173,6 +183,22 @@ export interface InspectorResourceSubscription {
   lastUpdated?: Date;
 }
 
+/**
+ * Runtime settings for a configured server. A subset of
+ * InspectorClientOptions (v1.5) relevant to the settings form:
+ * connection mode, headers, metadata, timeouts, and OAuth credentials.
+ */
+export interface InspectorServerSettings {
+  connectionMode: "proxy" | "direct";
+  headers: { key: string; value: string }[];
+  metadata: { key: string; value: string }[];
+  connectionTimeout: number;
+  requestTimeout: number;
+  oauthClientId?: string;
+  oauthClientSecret?: string;
+  oauthScopes?: string;
+}
+
 /**
  * Draft state for importing a server from registry JSON. Owned by the
  * ImportServerJsonPanel wiring layer. `parsed` is typed `unknown` until the