Merge branch 'main' into jesselumarie/test-SEP-974

client/src/App.tsx

@@ -19,6 +19,11 @@ import {
 } from "@modelcontextprotocol/sdk/types.js";
 import { OAuthTokensSchema } from "@modelcontextprotocol/sdk/shared/auth.js";
 import { SESSION_KEYS, getServerSpecificKey } from "./lib/constants";
+import {
+  hasValidMetaName,
+  hasValidMetaPrefix,
+  isReservedMetaKey,
+} from "@/utils/metaUtils";
 import { AuthDebuggerState, EMPTY_DEBUGGER_STATE } from "./lib/auth-types";
 import { OAuthStateMachine } from "./lib/oauth-state-machine";
 import { cacheToolOutputSchemas } from "./utils/schemaUtils";
@@ -47,6 +52,7 @@ import {
   Hash,
   Key,
   MessageSquare,
+  Settings,
 } from "lucide-react";
 
 import { z } from "zod";
@@ -80,9 +86,28 @@ import {
   CustomHeaders,
   migrateFromLegacyAuth,
 } from "./lib/types/customHeaders";
+import MetadataTab from "./components/MetadataTab";
 
 const CONFIG_LOCAL_STORAGE_KEY = "inspectorConfig_v1";
 
+const filterReservedMetadata = (
+  metadata: Record<string, string>,
+): Record<string, string> => {
+  return Object.entries(metadata).reduce<Record<string, string>>(
+    (acc, [key, value]) => {
+      if (
+        !isReservedMetaKey(key) &&
+        hasValidMetaPrefix(key) &&
+        hasValidMetaName(key)
+      ) {
+        acc[key] = value;
+      }
+      return acc;
+    },
+    {},
+  );
+};
+
 const App = () => {
   const [resources, setResources] = useState<Resource[]>([]);
   const [resourceTemplates, setResourceTemplates] = useState<
@@ -199,9 +224,31 @@ const App = () => {
   const [authState, setAuthState] =
     useState<AuthDebuggerState>(EMPTY_DEBUGGER_STATE);
 
+  // Metadata state - persisted in localStorage
+  const [metadata, setMetadata] = useState<Record<string, string>>(() => {
+    const savedMetadata = localStorage.getItem("lastMetadata");
+    if (savedMetadata) {
+      try {
+        const parsed = JSON.parse(savedMetadata);
+        if (parsed && typeof parsed === "object") {
+          return filterReservedMetadata(parsed);
+        }
+      } catch (error) {
+        console.warn("Failed to parse saved metadata:", error);
+      }
+    }
+    return {};
+  });
+
   const updateAuthState = (updates: Partial<AuthDebuggerState>) => {
     setAuthState((prev) => ({ ...prev, ...updates }));
   };
+
+  const handleMetadataChange = (newMetadata: Record<string, string>) => {
+    const sanitizedMetadata = filterReservedMetadata(newMetadata);
+    setMetadata(sanitizedMetadata);
+    localStorage.setItem("lastMetadata", JSON.stringify(sanitizedMetadata));
+  };
   const nextRequestId = useRef(0);
   const rootsRef = useRef<Root[]>([]);
 
@@ -305,6 +352,7 @@ const App = () => {
     },
     getRoots: () => rootsRef.current,
     defaultLoggingLevel: logLevel,
+    metadata,
   });
 
   useEffect(() => {
@@ -785,7 +833,11 @@ const App = () => {
     cacheToolOutputSchemas(response.tools);
   };
 
-  const callTool = async (name: string, params: Record<string, unknown>) => {
+  const callTool = async (
+    name: string,
+    params: Record<string, unknown>,
+    toolMetadata?: Record<string, unknown>,
+  ) => {
     lastToolCallOriginTabRef.current = currentTabRef.current;
 
     try {
@@ -795,15 +847,21 @@ const App = () => {
         ? cleanParams(params, tool.inputSchema as JsonSchemaType)
         : params;
 
+      // Merge general metadata with tool-specific metadata
+      // Tool-specific metadata takes precedence over general metadata
+      const mergedMetadata = {
+        ...metadata, // General metadata
+        progressToken: progressTokenRef.current++,
+        ...toolMetadata, // Tool-specific metadata
+      };
+
       const response = await sendMCPRequest(
         {
           method: "tools/call" as const,
           params: {
             name,
             arguments: cleanedParams,
-            _meta: {
-              progressToken: progressTokenRef.current++,
-            },
+            _meta: mergedMetadata,
           },
         },
         CompatibilityCallToolResultSchema,
@@ -1002,6 +1060,10 @@ const App = () => {
                   <Key className="w-4 h-4 mr-2" />
                   Auth
                 </TabsTrigger>
+                <TabsTrigger value="metadata">
+                  <Settings className="w-4 h-4 mr-2" />
+                  Metadata
+                </TabsTrigger>
               </TabsList>
 
               <div className="w-full">
@@ -1112,10 +1174,14 @@ const App = () => {
                         setNextToolCursor(undefined);
                         cacheToolOutputSchemas([]);
                       }}
-                      callTool={async (name, params) => {
+                      callTool={async (
+                        name: string,
+                        params: Record<string, unknown>,
+                        metadata?: Record<string, unknown>,
+                      ) => {
                         clearError("tools");
                         setToolResult(null);
-                        await callTool(name, params);
+                        await callTool(name, params, metadata);
                       }}
                       selectedTool={selectedTool}
                       setSelectedTool={(tool) => {
@@ -1158,6 +1224,10 @@ const App = () => {
                       onRootsChange={handleRootsChange}
                     />
                     <AuthDebuggerWrapper />
+                    <MetadataTab
+                      metadata={metadata}
+                      onMetadataChange={handleMetadataChange}
+                    />
                   </>
                 )}
               </div>