Merge branch 'main' into parse-tool-arg

Author: olaservo

cli/src/client/connection.ts

@@ -18,6 +18,12 @@ export async function connect(
 ): Promise<void> {
   try {
     await client.connect(transport);
+
+    if (client.getServerCapabilities()?.logging) {
+      // default logging level is undefined in the spec, but the user of the
+      // inspector most likely wants debug.
+      await client.setLoggingLevel("debug");
+    }
   } catch (error) {
     throw new Error(
       `Failed to connect to MCP server: ${error instanceof Error ? error.message : String(error)}`,

client/package.json

@@ -49,19 +49,19 @@
     "serve-handler": "^6.1.6",
     "tailwind-merge": "^2.5.3",
     "tailwindcss-animate": "^1.0.7",
-    "zod": "^3.23.8"
+    "zod": "^3.25.76"
   },
   "devDependencies": {
     "@eslint/js": "^9.11.1",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.2.0",
     "@types/jest": "^29.5.14",
-    "@types/node": "^22.7.5",
+    "@types/node": "^22.17.0",
     "@types/prismjs": "^1.26.5",
-    "@types/react": "^18.3.10",
+    "@types/react": "^18.3.23",
     "@types/react-dom": "^18.3.0",
     "@types/serve-handler": "^6.1.4",
-    "@vitejs/plugin-react": "^4.3.2",
+    "@vitejs/plugin-react": "^4.7.0",
     "autoprefixer": "^10.4.20",
     "co": "^4.6.0",
     "eslint": "^9.11.1",
@@ -70,11 +70,11 @@
     "globals": "^15.9.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "postcss": "^8.4.47",
+    "postcss": "^8.5.6",
     "tailwindcss": "^3.4.13",
-    "ts-jest": "^29.2.6",
+    "ts-jest": "^29.4.0",
     "typescript": "^5.5.3",
-    "typescript-eslint": "^8.7.0",
-    "vite": "^6.3.0"
+    "typescript-eslint": "^8.38.0",
+    "vite": "^6.3.5"
   }
 }

client/src/App.tsx

@@ -260,6 +260,7 @@ const App = () => {
       window.location.hash = "elicitations";
     },
     getRoots: () => rootsRef.current,
+    defaultLoggingLevel: logLevel,
   });
 
   useEffect(() => {

client/src/components/ToolResults.tsx

@@ -154,6 +154,14 @@ const ToolResults = ({
             </div>
           </div>
         )}
+        {structuredResult._meta && (
+          <div className="mb-4">
+            <h5 className="font-semibold mb-2 text-sm">Meta:</h5>
+            <div className="bg-gray-50 dark:bg-gray-900 p-3 rounded-lg">
+              <JsonView data={structuredResult._meta} />
+            </div>
+          </div>
+        )}
         {!structuredResult.structuredContent &&
           validationResult &&
           !validationResult.isValid && (

client/src/components/ToolsTab.tsx

@@ -19,6 +19,10 @@ import ListPane from "./ListPane";
 import JsonView from "./JsonView";
 import ToolResults from "./ToolResults";
 
+// Type guard to safely detect the optional _meta field without using `any`
+const hasMeta = (tool: Tool): tool is Tool & { _meta: unknown } =>
+  typeof (tool as { _meta?: unknown })._meta !== "undefined";
+
 const ToolsTab = ({
   tools,
   listTools,
@@ -46,6 +50,7 @@ const ToolsTab = ({
   const [params, setParams] = useState<Record<string, unknown>>({});
   const [isToolRunning, setIsToolRunning] = useState(false);
   const [isOutputSchemaExpanded, setIsOutputSchemaExpanded] = useState(false);
+  const [isMetaExpanded, setIsMetaExpanded] = useState(false);
 
   useEffect(() => {
     const params = Object.entries(
@@ -245,6 +250,40 @@ const ToolsTab = ({
                     </div>
                   </div>
                 )}
+                {selectedTool &&
+                  hasMeta(selectedTool) &&
+                  selectedTool._meta && (
+                    <div className="bg-gray-50 dark:bg-gray-900 p-3 rounded-lg">
+                      <div className="flex items-center justify-between mb-2">
+                        <h4 className="text-sm font-semibold">Meta:</h4>
+                        <Button
+                          size="sm"
+                          variant="ghost"
+                          onClick={() => setIsMetaExpanded(!isMetaExpanded)}
+                          className="h-6 px-2"
+                        >
+                          {isMetaExpanded ? (
+                            <>
+                              <ChevronUp className="h-3 w-3 mr-1" />
+                              Collapse
+                            </>
+                          ) : (
+                            <>
+                              <ChevronDown className="h-3 w-3 mr-1" />
+                              Expand
+                            </>
+                          )}
+                        </Button>
+                      </div>
+                      <div
+                        className={`transition-all ${
+                          isMetaExpanded ? "" : "max-h-[8rem] overflow-y-auto"
+                        }`}
+                      >
+                        <JsonView data={selectedTool._meta} />
+                      </div>
+                    </div>
+                  )}
                 <Button
                   onClick={async () => {
                     try {

client/src/components/__tests__/ToolsTab.test.tsx

@@ -5,6 +5,7 @@ import ToolsTab from "../ToolsTab";
 import { Tool } from "@modelcontextprotocol/sdk/types.js";
 import { Tabs } from "@/components/ui/tabs";
 import { cacheToolOutputSchemas } from "@/utils/schemaUtils";
+import { within } from "@testing-library/react";
 
 describe("ToolsTab", () => {
   beforeEach(() => {
@@ -556,4 +557,84 @@ describe("ToolsTab", () => {
       expect(mockOnReadResource).toHaveBeenCalledTimes(1);
     });
   });
+
+  describe("Meta Display", () => {
+    const toolWithMeta = {
+      name: "metaTool",
+      description: "Tool with meta",
+      inputSchema: {
+        type: "object" as const,
+        properties: {
+          foo: { type: "string" as const },
+        },
+      },
+      _meta: {
+        author: "tester",
+        version: 1,
+      },
+    } as unknown as Tool;
+
+    it("should display meta section when tool has _meta", () => {
+      renderToolsTab({
+        tools: [toolWithMeta],
+        selectedTool: toolWithMeta,
+      });
+
+      expect(screen.getByText("Meta:")).toBeInTheDocument();
+      expect(
+        screen.getByRole("button", { name: /expand/i }),
+      ).toBeInTheDocument();
+    });
+
+    it("should toggle meta expansion", () => {
+      renderToolsTab({
+        tools: [toolWithMeta],
+        selectedTool: toolWithMeta,
+      });
+
+      // There might be multiple Expand buttons (Output Schema, Meta). We need the one within Meta section
+      const metaHeading = screen.getByText("Meta:");
+      const metaContainer = metaHeading.closest("div");
+      expect(metaContainer).toBeTruthy();
+      const toggleButton = within(metaContainer as HTMLElement).getByRole(
+        "button",
+        { name: /expand/i },
+      );
+
+      // Expand Meta
+      fireEvent.click(toggleButton);
+      expect(
+        within(metaContainer as HTMLElement).getByRole("button", {
+          name: /collapse/i,
+        }),
+      ).toBeInTheDocument();
+
+      // Collapse Meta
+      fireEvent.click(toggleButton);
+      expect(
+        within(metaContainer as HTMLElement).getByRole("button", {
+          name: /expand/i,
+        }),
+      ).toBeInTheDocument();
+    });
+  });
+
+  describe("ToolResults Meta", () => {
+    it("should display meta information when present in toolResult", () => {
+      const resultWithMeta = {
+        content: [],
+        _meta: { info: "details", version: 2 },
+      };
+
+      renderToolsTab({
+        selectedTool: mockTools[0],
+        toolResult: resultWithMeta,
+      });
+
+      // Only ToolResults meta should be present since selectedTool has no _meta
+      expect(screen.getAllByText("Meta:")).toHaveLength(1);
+      expect(screen.getByText(/info/i)).toBeInTheDocument();
+      expect(screen.getByText(/version/i)).toBeInTheDocument();
+    });
+  });
 });

client/src/lib/hooks/useConnection.ts

@@ -28,6 +28,7 @@ import {
   ToolListChangedNotificationSchema,
   PromptListChangedNotificationSchema,
   Progress,
+  LoggingLevel,
   ElicitRequestSchema,
 } from "@modelcontextprotocol/sdk/types.js";
 import { RequestOptions } from "@modelcontextprotocol/sdk/shared/protocol.js";
@@ -72,6 +73,7 @@ interface UseConnectionOptions {
   onElicitationRequest?: (request: any, resolve: any) => void;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   getRoots?: () => any[];
+  defaultLoggingLevel?: LoggingLevel;
 }
 
 export function useConnection({
@@ -90,6 +92,7 @@ export function useConnection({
   onPendingRequest,
   onElicitationRequest,
   getRoots,
+  defaultLoggingLevel,
 }: UseConnectionOptions) {
   const [connectionStatus, setConnectionStatus] =
     useState<ConnectionStatus>("disconnected");
@@ -560,6 +563,10 @@ export function useConnection({
         });
       }
 
+      if (capabilities?.logging && defaultLoggingLevel) {
+        await client.setLoggingLevel(defaultLoggingLevel);
+      }
+
       if (onElicitationRequest) {
         client.setRequestHandler(ElicitRequestSchema, async (request) => {
           return new Promise((resolve) => {

client/src/lib/oauth-state-machine.ts

@@ -113,13 +113,21 @@ export const oauthTransitions: Record<OAuthStep, StateTransition> = {
         scope = metadata.scopes_supported.join(" ");
       }
 
+      // Generate a random state
+      const array = new Uint8Array(32);
+      crypto.getRandomValues(array);
+      const state = Array.from(array, (byte) =>
+        byte.toString(16).padStart(2, "0"),
+      ).join("");
+
       const { authorizationUrl, codeVerifier } = await startAuthorization(
         context.serverUrl,
         {
           metadata,
           clientInformation,
           redirectUrl: context.provider.redirectUrl,
           scope,
+          state: state,
           resource: context.state.resource ?? undefined,
         },
       );