Fix bug that roots returned by roots/list are never updated

The roots state is capture at the initialization of the connectMcpServer.
This causes roots/list to always return empty roots despite updates
to the roots. We are now using a ref to reference it and avoid the closure
issue. roots/list now returns correctly the roots.

client/src/App.tsx

@@ -108,6 +108,7 @@ const App = () => {
     >
   >([]);
   const nextRequestId = useRef(0);
+  const rootsRef = useRef<Root[]>([]);
 
   const handleApproveSampling = (id: number, result: CreateMessageResult) => {
     setPendingSampleRequests((prev) => {
@@ -159,6 +160,10 @@ const App = () => {
       );
   }, []);
 
+  useEffect(() => {
+    rootsRef.current = roots;
+  }, [roots]);
+
   const pushHistory = (request: object, response?: object) => {
     setRequestHistory((prev) => [
       ...prev,
@@ -293,7 +298,7 @@ const App = () => {
   };
 
   const handleRootsChange = async () => {
-    sendNotification({ method: "notifications/roots/list_changed" });
+    await sendNotification({ method: "notifications/roots/list_changed" });
   };
 
   const connectMcpServer = async () => {
@@ -337,7 +342,7 @@ const App = () => {
       });
 
       client.setRequestHandler(ListRootsRequestSchema, async () => {
-        return { roots };
+        return { roots: rootsRef.current };
       });
 
       setMcpClient(client);