Phase 2: Refactor Server/Settings/ViewShell cluster to MCP SDK types

ServerCard: Replace flat scalar props (name, version, transport, status,
error) with grouped objects (config: MCPServerConfig, info?: Implementation,
connection: ConnectionState). Remove auto-connect useEffect — dumb
components must not self-dispatch side effects. Derive transport and
command/url from config.

ServerInfoContent: Replace flat props with initializeResult: InitializeResult
and clientCapabilities: ClientCapabilities from MCP SDK. Derive capability
lists by iterating the ServerCapabilities record.

ServerSettingsForm: Collapse flat setting props (connectionMode, headers,
metadata, timeouts, oauth*) into settings: InspectorServerSettings. Add
InspectorServerSettings type to core/mcp/types.ts.

ImportServerJsonPanel: Replace scattered scalar props (jsonContent,
selectedPackageIndex, serverName) with draft: InspectorServerJsonDraft.

ViewHeader: Replace serverName: string with serverInfo: Implementation.
Use ConnectionStatus from core types.

ConnectedView: Update to pass serverInfo: Implementation instead of
serverName. Use ConnectionStatus type.

Update all stories for ServerCard, ServerInfoContent, ServerSettingsForm,
ImportServerJsonPanel, ViewHeader, ServerListScreen, ConnectedView, and
UnconnectedView.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

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",
   },
 };

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)}
       />