Brendan/cs 598 review and clean up images2

docs/cli/federated-graph/fetch.mdx

@@ -33,7 +33,7 @@ The `npx wgc federated-graph fetch` command allows you to download the latest va
 This mode will help smooth migration from the Apollo router to the WunderGraph Cosmo router. Initially, the users can use the schema registry from Cosmo and use this mode to update their routers/gateways. Later they can move from Apollo Router/Gateway to WunderGraph Router.
 
 <Frame caption="Apollo Compatibility mode">
-  <img src="/images/tutorial/apollo-compatibility-mode.png" alt="Apollo Compatibility" />
+  <img src="/images/tutorial/apollo-compatibility-cosmo-with-apollo-router-gateway.png" alt="Diagram showing Cosmo Schema Registry and WGC CLI generating an Apollo-compatible supergraph for the Apollo Router/Gateway, updated via webhook on schema change." title="Apollo compatibility — Cosmo with Apollo Router/Gateway" />
 </Frame>
 
 ## Output

docs/studio/cosmo-ai.mdx

@@ -25,7 +25,9 @@ You can run "[wgc subgraph fix](/cli/subgraph/fix)" to get a possible solution f
 Navigate to your organization settings and click on "Enable" in the "Cosmo AI" section. By clicking this button, you agree to the terms described above.
 
 <Frame caption="Enable Cosmo AI">
-  <img src="/images/studio/image-51.png" />
+  <img src="/images/studio/organization-settings-with-ai-and-rbac.png" 
+  alt="Organization settings with options for generative AI documentation and RBAC controls" 
+  title="Organization settings with AI and RBAC" />
 </Frame>
 
 ## Demo

docs/studio/sso/auth0.mdx

@@ -17,15 +17,25 @@ description: "Setting up SSO with Auth0"
   A dialog will open, give the app a name, select the type of application and then click on the **Create** button.
 
 <Frame>
-  <img src="/images/studio/sso/image-14.png" />
-  </Frame>
+  <img
+    src="/images/studio/sso/create-native-app-named-my-app.png"
+    alt="Creating a new Native application named My App"
+    title="Create Native app named My App"
+  />
+</Frame>
+
 </Step>
 <Step>
   Once the app is created, navigate to the Setting tab. Now copy the **Domain**, **Client ID** and **Client Secret**.
 
-  <Frame>
-    <img src="/images/studio/sso/image-15.png" />
-  </Frame>
+<Frame>
+  <img
+    src="/images/studio/sso/app-basic-info-with-name-and-domain.png"
+    alt="Basic Information section showing app name My App and development domain"
+    title="App basic info with name and domain"
+  />
+</Frame>
+
 </Step>
 <Step>
   Navigate to the settings page on Cosmo.
@@ -34,43 +44,71 @@ description: "Setting up SSO with Auth0"
 * Click on **Connect.**
 
 <Frame>
-    <img src="/images/studio/sso/connect_oidc.png" />
+  <img
+    src="/images/studio/sso/organization-settings-with-ai-rbac-scim.png"
+    alt="Organization settings showing name, slug, and status of AI, RBAC, and SCIM features"
+    title="Organization settings with AI, RBAC, SCIM"
+  />
 </Frame>
+
 </Step>
 <Step>
-  Give the connection a name, the **Discovery Endpoint** will be  `https://YOUR_AUTH0_DOMAIN/.well-known/openid-configuration` **,** and paste the **Client ID** and  **Client secret**copied before into the **Client ID** and  **Client Secret fields respectively,**&#x61;nd then click on **Connect.**
+  Give the connection a name, the **Discovery Endpoint** will be  `https://YOUR_AUTH0_DOMAIN/.well-known/openid-configuration` **,** and paste the **Client ID** and  **Client secret**copied before into the **Client ID** and  **Client Secret fields respectively,** &#x61;nd then click on **Connect.**
 
 <Frame>
-  <img src="/images/studio/sso/connect-oidc-dialog.png" />
+  <img
+    src="/images/studio/sso/oidc-provider-configuration-form.png"
+    alt="Connect OpenID Connect Provider form with fields for name, endpoint, and credentials"
+    title="OIDC provider configuration form"
+  />
 </Frame>
+
 </Step>
 <Step>
  Configure the mapping between the roles in Cosmo and the user roles in Auth0. The field **Group in the provider** can be populated with the name of the role or a regex to match the user roles. Once all the mappers are configured, click on **Save**.
 
-<Frame>
-  <img src="/images/studio/sso/map-oidc-groups.png" />
-</Frame>
+  <Frame>
+    <img 
+    src="/images/studio/sso/group-to-role-mapping-dialog.png" 
+    alt="Group mapper configuration dialog linking provider groups to Cosmo roles"
+    title="Group-to-role mapping dialog"
+    />
+  </Frame>
 </Step>
 <Step>
  Copy the sign-in and sign-out redirect URIs displayed in the dialog.
 
 <Frame>
-  <img src="/images/studio/sso/connect-oidc-success.png" />
+  <img
+    src="/images/studio/sso/oidc-provider-configuration-steps.png"
+    alt="Steps to configure OIDC provider with sign-in and sign-out redirect URLs"
+    title="OIDC provider configuration steps"
+  />
 </Frame>
 </Step>
 <Step>
   Navigate back to the settings tab of the application created on Auth0 and populate the **Allowed Callback URLs** and **Allowed Logout URLs** redirect URIs with the above-copied sign-in and sign-out URLs respectively. Click on **Save Changes**.
 
 <Frame>
-  <img src="/images/studio/sso/image-20.png" />
+  <img
+    src="/images/studio/sso/application-uri-configuration.png"
+    alt="Application URI settings for callback and logout URLs in Cosmo Docs"
+    title="Application URI configuration"
+  />
 </Frame>
+
 </Step>
 <Step>
   Now navigate to **Actions** -> **Library,** and then click on  **the Build Custom**butto&#x6E;**.**
 
 <Frame>
-  <img src="/images/studio/sso/image-21.png" />
+  <img
+    src="/images/studio/sso/empty-library-page.png"
+    alt="Cosmo Docs library page showing no installed actions or configurations"
+    title="Empty library page"
+  />
 </Frame>
+
 </Step>
 
 <Step>
@@ -97,7 +135,11 @@ exports.onExecutePostLogin = async (event, api) => {
 Navigate to the **Custom** tab on the right side of the page. Now drag the action and place it between Start and Complete as shown below, and then click on **Apply**.
 
 <Frame>
-  <img src="/images/studio/sso/image-22.png" />
+  <img
+    src="/images/studio/sso/login-flow-customization.png"
+    alt="Login flow customization showing Start, test, and Complete actions"
+    title="Login flow customization"
+  />
 </Frame>
 </Step>
 <Step>

docs/studio/sso/keycloak.mdx

@@ -16,30 +16,46 @@ icon: "key"
   <Step>
   Select OpenID Connect as the **Client Type, and** give the client a  **Client ID**and a  **Name**and then click on **Next.**
 
-  <Frame>
-    <img src="/images/studio/sso/image-23.png" />
-  </Frame>
+<Frame>
+  <img
+    src="/images/studio/sso/create-openid-connect-client.png"
+    alt="Create client form for OpenID Connect with general, capability, and login settings"
+    title="Create OpenID Connect client"
+  />
+</Frame>
   </Step>
   <Step>
   Enable **Client authentication,** then click on **Next** and then click on  **Save**on the next pag&#x65;**.**
 
-  <Frame>
-    <img src="/images/studio/sso/image-24.png" />
-  </Frame>
+<Frame>
+  <img
+    src="/images/studio/sso/create-client-settings-overview.png"
+    alt="Create client page in Cosmo Docs with client authentication on and authorization off"
+    title="Create client settings overview"
+  />
+</Frame>
   </Step>
   <Step>
   Navigate to the **Credentials** tab and then copy the **Client Secret.**
 
-  <Frame>
-    <img src="/images/studio/sso/image-25.png" />
-  </Frame>
+<Frame>
+  <img
+    src="/images/studio/sso/client-authenticator-with-id-and-secret.png"
+    alt="Client Authenticator settings showing client ID, secret, and regenerate option"
+    title="Client Authenticator with ID and secret"
+  />
+</Frame>
   </Step>
   <Step>
   Navigate to the **Realm Settings** and then copy the link of **OpenID Endpoint Configuration.**
 
-  <Frame>
-    <img src="/images/studio/sso/image-26.png" />
-  </Frame>
+<Frame>
+  <img
+    src="/images/studio/sso/openid-and-saml-metadata-settings.png"
+    alt="OpenID and SAML metadata settings with user-managed access turned off"
+    title="OpenID and SAML metadata settings"
+  />
+</Frame>
   </Step>
   <Step>
 
@@ -48,52 +64,83 @@ icon: "key"
   <Step>
   Click on **Connect.**
 
-  <Frame>
-    <img src="/images/studio/sso/connect_oidc.png" />
-  </Frame>
+<Frame>
+  <img
+    src="/images/studio/sso/organization-settings-with-ai-rbac-scim.png"
+    alt="Organization settings showing name, slug, and status of AI, RBAC, and SCIM features"
+    title="Organization settings with AI, RBAC, SCIM"
+  />
+</Frame>
+
   </Step>
   <Step>
-  Give the connection a name, paste the **OpenID Endpoint Configuration** copied before, into the  **Discovery Endpoint,**&#x61;nd paste the **Client ID** and  **Client secret**copied before into the **Client ID** and  **Client Secret fields respectively,**&#x61;nd then click on **Connect.**
+  Give the connection a name, paste the **OpenID Endpoint Configuration** copied before, into the  **Discovery Endpoint,**&#x61;nd paste the **Client ID** and  **Client secret**copied before into the **Client ID** and  **Client Secret fields respectively,** &#x61;nd then click on **Connect.**
+
+<Frame>
+  <img
+    src="/images/studio/sso/oidc-provider-configuration-form.png"
+    alt="Connect OpenID Connect Provider form with fields for name, endpoint, and credentials"
+    title="OIDC provider configuration form"
+  />
+</Frame>
 
-  <Frame>
-    <img src="/images/studio/sso/connect-oidc-dialog.png" />
-  </Frame>
   </Step>
   <Step>
   Configure the mapping between the roles in Cosmo and the user groups in Keycloak. The field **Group in the provider** can be populated with the name of the group or a regex to match the user groups. Once all the mappers are configured, click on **Save**.
-
+  
   <Frame>
-    <img src="/images/studio/sso/map-oidc-groups.png" />
+    <img 
+    src="/images/studio/sso/group-to-role-mapping-dialog.png" 
+    alt="Group mapper configuration dialog linking provider groups to Cosmo roles"
+    title="Group-to-role mapping dialog"
+    />
   </Frame>
   </Step>
   <Step>
   Copy the sign-in and sign-out redirect URIs displayed in the dialog.
 
-  <Frame>
-    <img src="/images/studio/sso/connect-oidc-success.png" />
-  </Frame>
+<Frame>
+  <img
+    src="/images/studio/sso/oidc-provider-configuration-steps.png"
+    alt="Steps to configure OIDC provider with sign-in and sign-out redirect URLs"
+    title="OIDC provider configuration steps"
+  />
+</Frame>
   </Step>
   <Step>
   Navigate back to the client created on Keycloak and populate the **Valid redirect URIs** and **Valid post Logout redirect URIs** with the above-copied sign-in and sign-out URLs respectively. Click on **Save**.
 
-  <Frame>
-    <img src="/images/studio/sso/image-31.png" />
-  </Frame>
+<Frame>
+  <img
+    src="/images/studio/sso/access-settings-for-redirect-urls.png"
+    alt="Access settings showing valid redirect and logout URLs fields"
+    title="Access settings for redirect URLs"
+  />
+</Frame>
+
   </Step>
 
   <Step>
   Navigate to the **Client Scopes** tab, click on the first client scope(usually would be \$\{**clientID}-dedicated**), and then click on **Configure a new mapper.**
 
-  <Frame>
-    <img src="/images/studio/sso/image-32.png" />
-  </Frame>
+<Frame>
+  <img
+    src="/images/studio/sso/client-scope-with-no-mappers-configured.png"
+    alt="Client scope page showing dedicated mappers section with no mappers added"
+    title="Client scope with no mappers configured"
+  />
+</Frame>
   </Step>
   <Step>
   Select **Group Membership.**
 
-  <Frame>
-    <img src="/images/studio/sso/image-33.png" />
-  </Frame>
+<Frame>
+  <img
+    src="/images/studio/sso/group-membership-mapper-configuration.png"
+    alt="Configure new mapper dialog with Group Membership option for token mapping"
+    title="Group membership mapper configuration"
+  />
+</Frame>
   </Step>
   <Step>
   Give the mapper a name, then populate the **Token Claim Name** with **"**&#x73;soGroup&#x73;**"** and then click on **Save.**